mstate-angular 0.2.2 → 0.2.4

package/fesm2022/mstate-angular.mjs

@@ -4,11 +4,11 @@ import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import axios from 'axios';
+import { catchError, finalize } from 'rxjs';
 import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i4 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { catchError, finalize } from 'rxjs';
 
 var Route;
 (function (Route) {
@@ -58,7 +58,7 @@ var ActionType;
     ActionType["CHAINED"] = "CHAINED";
 })(ActionType || (ActionType = {}));
 
-// export const MSTATE_URL = 'https://dev.mstate.mobioffice.io/api';
+// export const MSTATE_URL: string = 'https://dev.mstate.mobioffice.io/api';
 // export const MSTATE_URL = 'http://localhost:3000/api';
 const MSTATE_URL = 'https://api.mstate.mobioffice.io/api';
 const TOKEN_KEY = 'secret-key';
@@ -85,6 +85,32 @@ class MstateAngularHelper {
     checkIsStep(step) {
         return step?.config !== undefined;
     }
+    checkIsHandledStep(module) {
+        switch (module) {
+            case FieldType.CHECKBOX:
+            case FieldType.DROP_DOWN:
+            case FieldType.INPUT_FIELD:
+            case FieldType.RADIO_LIST:
+                return true;
+            default:
+                return false;
+        }
+    }
+    checkInputError(form, key) {
+        switch ((form.controls[key].status === 'INVALID' && form.controls[key].touched) ||
+            (form.controls[key].status === 'INVALID' && form.controls[key].dirty)) {
+            case true:
+                return {
+                    isError: true,
+                    message: `${key} is required`,
+                };
+            default:
+                return {
+                    isError: false,
+                    message: '',
+                };
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularHelper, providedIn: 'root' }); }
 }
@@ -124,8 +150,8 @@ class MstateAngularService {
         });
     }
     async handleDropdownAPI(request, target) {
-        const { data } = await axios(request);
-        return this.mstateHelper.getObjectValue(data, target) ?? [];
+        const response = await axios(request);
+        return this.mstateHelper.getObjectValue(response?.data, target) ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularService, deps: [{ token: i1.HttpClient }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularService, providedIn: 'root' }); }
@@ -138,13 +164,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: MstateAngularHelper }] });
 
 class InputFieldComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFieldComponent, isStandalone: true, selector: "mobi-office-input-field", inputs: { config: "config", mstateModel: "mstateModel" }, ngImport: i0, template: "<div class=\"form-group\">\n  <label>{{ config.label }}</label>\n  <input\n    [type]=\"config.inputType\"\n    [name]=\"config.field.keyForAPI\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n    class=\"form-control\" />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    constructor(mstateHelper) {
+        this.mstateHelper = mstateHelper;
+    }
+    checkInputError(form, key) {
+        return this.mstateHelper.checkInputError(form, key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFieldComponent, deps: [{ token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputFieldComponent, isStandalone: true, selector: "mobi-office-input-field", inputs: { config: "config", mstateModel: "mstateModel" }, ngImport: i0, template: "<div\r\n  class=\"form-group\"\r\n  [formGroup]=\"mstateModel\"\r\n  style=\"display: flex; flex-direction: column\"\r\n>\r\n  <label>{{ config.label }}</label>\r\n  <input\r\n    style=\"flex: 1\"\r\n    [required]=\"config.field.isRequired || false\"\r\n    [type]=\"config.inputType\"\r\n    [name]=\"config.field.keyForAPI\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n    class=\"form-control\"\r\n  />\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-input-field', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"form-group\">\n  <label>{{ config.label }}</label>\n  <input\n    [type]=\"config.inputType\"\n    [name]=\"config.field.keyForAPI\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n    class=\"form-control\" />\n</div>\n" }]
-        }], propDecorators: { config: [{
+            args: [{ selector: 'mobi-office-input-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div\r\n  class=\"form-group\"\r\n  [formGroup]=\"mstateModel\"\r\n  style=\"display: flex; flex-direction: column\"\r\n>\r\n  <label>{{ config.label }}</label>\r\n  <input\r\n    style=\"flex: 1\"\r\n    [required]=\"config.field.isRequired || false\"\r\n    [type]=\"config.inputType\"\r\n    [name]=\"config.field.keyForAPI\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n    class=\"form-control\"\r\n  />\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: MstateAngularHelper }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
             }], mstateModel: [{
@@ -175,12 +207,15 @@ class SelectComponent {
     getObjectValue(obj, target) {
         return this.mstateHelper.getObjectValue(obj, target);
     }
+    checkInputError(form, key) {
+        return this.mstateHelper.checkInputError(form, key);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [{ token: MstateAngularService }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, isStandalone: true, selector: "mobi-office-select", inputs: { config: "config", mstateModel: "mstateModel" }, providers: [MstateAngularService], ngImport: i0, template: "<div class=\"form-group\">\n  <ng-select\n    [items]=\"list\"\n    [multiple]=\"config.field.placeholder\"\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n  >\n  </ng-select>\n</div>\n", styles: [".dropdown{position:relative;width:300px}.search-input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.dropdown-menu{position:absolute;width:100%;max-height:150px;overflow-y:auto;background:#fff;border:1px solid #ccc;border-radius:4px;margin-top:5px;z-index:10}.dropdown-item{padding:8px;cursor:pointer}.dropdown-item:hover{background-color:#f0f0f0}.no-results{padding:8px;color:#888;text-align:center}.selected-option{margin-top:10px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectComponent, isStandalone: true, selector: "mobi-office-select", inputs: { config: "config", mstateModel: "mstateModel" }, providers: [MstateAngularService], ngImport: i0, template: "<div class=\"form-group\" [formGroup]=\"mstateModel\">\r\n  <label>{{ config.label }}</label>\r\n\r\n  <ng-select\r\n    [required]=\"config.field.isRequired || false\"\r\n    [items]=\"list\"\r\n    [multiple]=\"true\"\r\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n  >\r\n  </ng-select>\r\n\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n", styles: [".dropdown{position:relative;width:300px}.search-input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.dropdown-menu{position:absolute;width:100%;max-height:150px;overflow-y:auto;background:#fff;border:1px solid #ccc;border-radius:4px;margin-top:5px;z-index:10}.dropdown-item{padding:8px;cursor:pointer}.dropdown-item:hover{background-color:#f0f0f0}.no-results{padding:8px;color:#888;text-align:center}.selected-option{margin-top:10px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-select', standalone: true, imports: [FormsModule, NgSelectModule, CommonModule], providers: [MstateAngularService], template: "<div class=\"form-group\">\n  <ng-select\n    [items]=\"list\"\n    [multiple]=\"config.field.placeholder\"\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n  >\n  </ng-select>\n</div>\n", styles: [".dropdown{position:relative;width:300px}.search-input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.dropdown-menu{position:absolute;width:100%;max-height:150px;overflow-y:auto;background:#fff;border:1px solid #ccc;border-radius:4px;margin-top:5px;z-index:10}.dropdown-item{padding:8px;cursor:pointer}.dropdown-item:hover{background-color:#f0f0f0}.no-results{padding:8px;color:#888;text-align:center}.selected-option{margin-top:10px;font-weight:700}\n"] }]
+            args: [{ selector: 'mobi-office-select', standalone: true, imports: [ReactiveFormsModule, NgSelectModule, CommonModule], providers: [MstateAngularService], template: "<div class=\"form-group\" [formGroup]=\"mstateModel\">\r\n  <label>{{ config.label }}</label>\r\n\r\n  <ng-select\r\n    [required]=\"config.field.isRequired || false\"\r\n    [items]=\"list\"\r\n    [multiple]=\"true\"\r\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n  >\r\n  </ng-select>\r\n\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n", styles: [".dropdown{position:relative;width:300px}.search-input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.dropdown-menu{position:absolute;width:100%;max-height:150px;overflow-y:auto;background:#fff;border:1px solid #ccc;border-radius:4px;margin-top:5px;z-index:10}.dropdown-item{padding:8px;cursor:pointer}.dropdown-item:hover{background-color:#f0f0f0}.no-results{padding:8px;color:#888;text-align:center}.selected-option{margin-top:10px;font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -212,12 +247,15 @@ class DropdownComponent {
     getObjectValue(obj, target) {
         return this.mstateHelper.getObjectValue(obj, target);
     }
+    checkInputError(form, key) {
+        return this.mstateHelper.checkInputError(form, key);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, deps: [{ token: MstateAngularService }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "mobi-office-dropdown", inputs: { config: "config", mstateModel: "mstateModel" }, providers: [MstateAngularService], ngImport: i0, template: "<div class=\"form-group\">\n  <ng-select\n    [items]=\"list\"\n    [multiple]=\"config.field.placeholder\"\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n  >\n  </ng-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "mobi-office-dropdown", inputs: { config: "config", mstateModel: "mstateModel" }, providers: [MstateAngularService], ngImport: i0, template: "<div class=\"form-group\" [formGroup]=\"mstateModel\">\r\n  <label>{{ config.label }}</label>\r\n\r\n  <ng-select\r\n    [items]=\"list\"\r\n    [multiple]=\"false\"\r\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n    [required]=\"config.field.isRequired || false\"\r\n  >\r\n  </ng-select>\r\n\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-dropdown', standalone: true, imports: [FormsModule, NgSelectModule, CommonModule], providers: [MstateAngularService], template: "<div class=\"form-group\">\n  <ng-select\n    [items]=\"list\"\n    [multiple]=\"config.field.placeholder\"\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\n    [placeholder]=\"config.field.placeholder\"\n    [(ngModel)]=\"mstateModel[config.field.keyForAPI]\"\n  >\n  </ng-select>\n</div>\n" }]
+            args: [{ selector: 'mobi-office-dropdown', standalone: true, imports: [ReactiveFormsModule, NgSelectModule, CommonModule], providers: [MstateAngularService], template: "<div class=\"form-group\" [formGroup]=\"mstateModel\">\r\n  <label>{{ config.label }}</label>\r\n\r\n  <ng-select\r\n    [items]=\"list\"\r\n    [multiple]=\"false\"\r\n    [bindLabel]=\"this.config.field.mapper?.label ?? 'label'\"\r\n    [placeholder]=\"config.field.placeholder\"\r\n    [formControlName]=\"config.field.keyForAPI\"\r\n    [required]=\"config.field.isRequired || false\"\r\n  >\r\n  </ng-select>\r\n\r\n  @if (checkInputError(mstateModel, config.field.keyForAPI).isError) {\r\n  <small>{{\r\n    checkInputError(mstateModel, config.field.keyForAPI).message\r\n  }}</small>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -236,8 +274,11 @@ class InputSelectorComponent {
             ? this.step?.config?.data
             : this.step;
     }
+    checkInputError(form, key) {
+        return this.mstateHelper.checkInputError(form, key);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectorComponent, deps: [{ token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectorComponent, isStandalone: true, selector: "mobi-office-input-selector", inputs: { step: "step", mstateModel: "mstateModel" }, providers: [MstateAngularHelper, MstateAngularService], ngImport: i0, template: "@switch (config.fieldType) {\n  @case (FieldType.INPUT_FIELD) {\n    <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n  @case (FieldType.TEXT_AREA) {\n    <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @case (FieldType.DROP_DOWN) {\n    <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n  @case (FieldType.RADIO_LIST) {\n    <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @case (FieldType.CHECKBOX) {\n    <mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @default {\n    <p>Step Left to handle</p>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputFieldComponent, selector: "mobi-office-input-field", inputs: ["config", "mstateModel"] }, { kind: "component", type: SelectComponent, selector: "mobi-office-select", inputs: ["config", "mstateModel"] }, { kind: "component", type: DropdownComponent, selector: "mobi-office-dropdown", inputs: ["config", "mstateModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectorComponent, isStandalone: true, selector: "mobi-office-input-selector", inputs: { step: "step", mstateModel: "mstateModel" }, providers: [MstateAngularHelper, MstateAngularService], ngImport: i0, template: "@switch (config.fieldType) { @case (FieldType.INPUT_FIELD) {\r\n<mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.TEXT_AREA) {\r\n<mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.DROP_DOWN) {\r\n<mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.RADIO_LIST) {\r\n<mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.CHECKBOX) {\r\n<mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @default { } }\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InputFieldComponent, selector: "mobi-office-input-field", inputs: ["config", "mstateModel"] }, { kind: "component", type: SelectComponent, selector: "mobi-office-select", inputs: ["config", "mstateModel"] }, { kind: "component", type: DropdownComponent, selector: "mobi-office-dropdown", inputs: ["config", "mstateModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectorComponent, decorators: [{
             type: Component,
@@ -246,7 +287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         InputFieldComponent,
                         SelectComponent,
                         DropdownComponent,
-                    ], providers: [MstateAngularHelper, MstateAngularService], template: "@switch (config.fieldType) {\n  @case (FieldType.INPUT_FIELD) {\n    <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n  @case (FieldType.TEXT_AREA) {\n    <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @case (FieldType.DROP_DOWN) {\n    <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n  @case (FieldType.RADIO_LIST) {\n    <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @case (FieldType.CHECKBOX) {\n    <mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\n  }\n\n  @default {\n    <p>Step Left to handle</p>\n  }\n}\n" }]
+                    ], providers: [MstateAngularHelper, MstateAngularService], template: "@switch (config.fieldType) { @case (FieldType.INPUT_FIELD) {\r\n<mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.TEXT_AREA) {\r\n<mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.DROP_DOWN) {\r\n<mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.RADIO_LIST) {\r\n<mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @case (FieldType.CHECKBOX) {\r\n<mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n} @default { } }\r\n" }]
         }], ctorParameters: () => [{ type: MstateAngularHelper }], propDecorators: { step: [{
                 type: Input,
                 args: [{ required: true }]
@@ -256,18 +297,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class ButtonComponent {
+    constructor() {
+        this.type = 'submit';
+        this.onClick = () => { };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "mobi-office-button", ngImport: i0, template: "<button>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "mobi-office-button", inputs: { type: "type", onClick: "onClick" }, ngImport: i0, template: "<button [type]=\"type\" (click)=\"onClick()\" class=\"btn\">\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".btn{width:100%;display:flex;align-items:center;justify-content:center;background-color:#007bff;color:#fff;border:1px solid #007bff;padding:10px 20px;font-size:16px;border-radius:4px;text-align:center;cursor:pointer;transition:all .3s ease}.btn:hover{background-color:#0056b3;border-color:#0056b3}.btn:focus{outline:none;box-shadow:0 0 0 .2rem #007bff40}.btn:active{background-color:#004085;border-color:#036}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-button', standalone: true, imports: [CommonModule], template: "<button>\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'mobi-office-button', standalone: true, imports: [CommonModule], template: "<button [type]=\"type\" (click)=\"onClick()\" class=\"btn\">\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".btn{width:100%;display:flex;align-items:center;justify-content:center;background-color:#007bff;color:#fff;border:1px solid #007bff;padding:10px 20px;font-size:16px;border-radius:4px;text-align:center;cursor:pointer;transition:all .3s ease}.btn:hover{background-color:#0056b3;border-color:#0056b3}.btn:focus{outline:none;box-shadow:0 0 0 .2rem #007bff40}.btn:active{background-color:#004085;border-color:#036}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], onClick: [{
+                type: Input
+            }] } });
+
+class LoaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoaderComponent, isStandalone: true, selector: "mobi-office-loader", ngImport: i0, template: "<img\r\n  class=\"loader\"\r\n  src=\"https://cdn.dribbble.com/users/10743/screenshots/2098959/ezgif.com-crop.gif\"\r\n  alt=\"loading\"\r\n/>\r\n", styles: [".loader{width:auto;height:100%;aspect-ratio:1/1;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mobi-office-loader', standalone: true, imports: [CommonModule], template: "<img\r\n  class=\"loader\"\r\n  src=\"https://cdn.dribbble.com/users/10743/screenshots/2098959/ezgif.com-crop.gif\"\r\n  alt=\"loading\"\r\n/>\r\n", styles: [".loader{width:auto;height:100%;aspect-ratio:1/1;border-radius:50%}\n"] }]
         }] });
 
 class ActionFormComponent {
-    constructor(mstateAngularService, mstateAngularHelper) {
+    constructor(fb, mstateAngularService, mstateHelper) {
+        this.fb = fb;
         this.mstateAngularService = mstateAngularService;
-        this.mstateAngularHelper = mstateAngularHelper;
+        this.mstateHelper = mstateHelper;
         this.token = '';
         this.workflow = '';
         this.config = {
@@ -275,23 +334,23 @@ class ActionFormComponent {
             type: ActionType.MANUAL,
             steps: [],
         };
-        this.onExecuteAction = () => { };
-        //#region Custom Declaration
-        this.isLoading = true;
-        this.mstateModel = {};
+        this.onExecuteAction = new EventEmitter();
+        this.isLoading = false;
+        this.nonUserInputField = {};
         this.handleStepConfigFilter = () => {
             const keyForAPISet = new Set();
-            this.config.steps = this.config?.steps?.filter(stepConfig => {
+            this.config.steps = this.config?.steps?.filter((stepConfig) => {
                 const step = stepConfig;
                 switch (step?.module) {
                     case ManualStepModule.CUSTOM_FIELD: {
                         if (this.updateCustomFieldValue) {
-                            this.mstateModel[step?.context?.as] = this.updateCustomFieldValue(step?.context?.key);
+                            this.nonUserInputField[step?.context?.as] =
+                                this.updateCustomFieldValue(step?.context?.key);
                         }
                         return true;
                     }
                     case ManualStepModule.CONTEXT_FIELD:
-                        this.mstateModel[step?.context?.as] = step?.context?.value;
+                        this.nonUserInputField[step?.context?.as] = step?.context?.value;
                         return true;
                     default: {
                         const isDuplicate = keyForAPISet.has(step?.field?.keyForAPI);
@@ -307,45 +366,80 @@ class ActionFormComponent {
             this.handleExecuteAction();
             return;
         }
+        this.assignFormBuilder();
         this.handleStepConfigFilter();
     }
-    ngOnChanges(changes) {
-        console.log({ changes });
-        if (this.mstateAngularHelper.detectChange(changes, ['mstateModel'])) {
-        }
-    }
     //#region handlers
     handleExecuteAction() {
-        this.isLoading = true;
-        console.log(this.mstateModel);
-        // this.mstateAngularService
-        //   .executeAction({
-        //     action: {
-        //       name: this.config.name,
-        //       payload: this.mstateModel,
-        //     },
-        //     token: this.token,
-        //     workflow: this.workflow,
-        //   })
-        //   .pipe(
-        //     catchError(e => {
-        //       throw e;
-        //     }),
-        //     finalize(() => {
-        //       this.isLoading = false;
-        //     })
-        //   )
-        //   .subscribe(data => {
-        //     this.onExecuteAction(data.data);
-        //   });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionFormComponent, deps: [{ token: MstateAngularService }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionFormComponent, isStandalone: true, selector: "lib-action-form", inputs: { token: "token", workflow: "workflow", config: "config", onExecuteAction: "onExecuteAction", updateCustomFieldValue: "updateCustomFieldValue", instanceID: "instanceID", onSuccess: "onSuccess" }, providers: [MstateAngularService, MstateAngularHelper], usesOnChanges: true, ngImport: i0, template: "<div>\r\n  <h4>{{ config.meta?.title ?? config.name }}</h4>\r\n\r\n  <form #userForm=\"ngForm\">\r\n    @for (step of config.steps; track $index) {\r\n      <mobi-office-input-selector [step]=\"step\" [mstateModel]=\"mstateModel\" />\r\n    }\r\n  </form>\r\n\r\n  <mobi-office-button (click)=\"handleExecuteAction()\"\r\n    >Submit</mobi-office-button\r\n  >\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InputSelectorComponent, selector: "mobi-office-input-selector", inputs: ["step", "mstateModel"] }, { kind: "component", type: ButtonComponent, selector: "mobi-office-button" }] }); }
+        if (this.form.status === 'VALID') {
+            this.isLoading = true;
+            this.mstateAngularService
+                .executeAction({
+                action: {
+                    name: this.config.name,
+                    payload: {
+                        ...this.form.value,
+                        ...this.nonUserInputField,
+                    },
+                },
+                token: this.token,
+                workflow: this.workflow,
+            })
+                .pipe(catchError((e) => {
+                this.onExecuteAction.emit({
+                    value: {},
+                    errors: e.error?.errors ?? [],
+                });
+                throw e;
+            }), finalize(() => {
+                this.isLoading = false;
+            }))
+                .subscribe((data) => {
+                this.onExecuteAction.emit({
+                    value: data.data,
+                    errors: [],
+                });
+                if (this.onSuccess) {
+                    this.onSuccess(this.config.name);
+                }
+            });
+        }
+        else {
+            this.markAllAsTouched(this.form);
+        }
+    }
+    markAllAsTouched(formGroup) {
+        Object.keys(formGroup.controls).forEach((key) => {
+            const control = formGroup.get(key);
+            if (control?.markAsTouched) {
+                control?.markAsTouched();
+            }
+        });
+    }
+    assignFormBuilder() {
+        const validators = this.config.steps.reduce((acc, data) => Object.assign(acc, this.mstateHelper.checkIsStep(data) === false &&
+            this.mstateHelper.checkIsHandledStep(data.fieldType)
+            ? {
+                [data?.field?.keyForAPI]: [
+                    data?.field.multiple ? [] : '',
+                    data?.field?.isRequired ? [Validators.required] : undefined,
+                ],
+            }
+            : {}), {});
+        this.form = this.fb.group(validators);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionFormComponent, deps: [{ token: i3.FormBuilder }, { token: MstateAngularService }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionFormComponent, isStandalone: true, selector: "lib-action-form", inputs: { token: "token", workflow: "workflow", config: "config", updateCustomFieldValue: "updateCustomFieldValue", instanceID: "instanceID", onSuccess: "onSuccess" }, outputs: { onExecuteAction: "onExecuteAction" }, providers: [MstateAngularService, MstateAngularHelper], ngImport: i0, template: "<div>\r\n  <p style=\"font-size: 2rem; text-align: center\">\r\n    {{ config.meta?.title ?? config.name }}\r\n  </p>\r\n\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"handleExecuteAction()\">\r\n    @for (step of config.steps; track $index) {\r\n      <mobi-office-input-selector [step]=\"step\" [mstateModel]=\"form\" />\r\n    }\r\n\r\n    <div style=\"margin-top: 10px\">\r\n      <mobi-office-button type=\"submit\">\r\n        @if (isLoading) {\r\n          <div style=\"height: 25px\">\r\n            <mobi-office-loader></mobi-office-loader>\r\n          </div>\r\n        } @else {\r\n          Submit\r\n        }\r\n      </mobi-office-button>\r\n    </div>\r\n  </form>\r\n</div>\r\n", styles: ["form{display:flex;flex-direction:column}label{margin-bottom:5px}\n"], dependencies: [{ kind: "component", type: InputSelectorComponent, selector: "mobi-office-input-selector", inputs: ["step", "mstateModel"] }, { kind: "component", type: ButtonComponent, selector: "mobi-office-button", inputs: ["type", "onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LoaderComponent, selector: "mobi-office-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-form', standalone: true, imports: [FormsModule, InputSelectorComponent, ButtonComponent], providers: [MstateAngularService, MstateAngularHelper], template: "<div>\r\n  <h4>{{ config.meta?.title ?? config.name }}</h4>\r\n\r\n  <form #userForm=\"ngForm\">\r\n    @for (step of config.steps; track $index) {\r\n      <mobi-office-input-selector [step]=\"step\" [mstateModel]=\"mstateModel\" />\r\n    }\r\n  </form>\r\n\r\n  <mobi-office-button (click)=\"handleExecuteAction()\"\r\n    >Submit</mobi-office-button\r\n  >\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { token: [{
+            args: [{ selector: 'lib-action-form', standalone: true, imports: [
+                        InputSelectorComponent,
+                        ButtonComponent,
+                        ReactiveFormsModule,
+                        LoaderComponent,
+                    ], providers: [MstateAngularService, MstateAngularHelper], template: "<div>\r\n  <p style=\"font-size: 2rem; text-align: center\">\r\n    {{ config.meta?.title ?? config.name }}\r\n  </p>\r\n\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"handleExecuteAction()\">\r\n    @for (step of config.steps; track $index) {\r\n      <mobi-office-input-selector [step]=\"step\" [mstateModel]=\"form\" />\r\n    }\r\n\r\n    <div style=\"margin-top: 10px\">\r\n      <mobi-office-button type=\"submit\">\r\n        @if (isLoading) {\r\n          <div style=\"height: 25px\">\r\n            <mobi-office-loader></mobi-office-loader>\r\n          </div>\r\n        } @else {\r\n          Submit\r\n        }\r\n      </mobi-office-button>\r\n    </div>\r\n  </form>\r\n</div>\r\n", styles: ["form{display:flex;flex-direction:column}label{margin-bottom:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i3.FormBuilder }, { type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { token: [{
                 type: Input,
                 args: [{ required: true }]
             }], workflow: [{
@@ -355,8 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input,
                 args: [{ required: true }]
             }], onExecuteAction: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Output
             }], updateCustomFieldValue: [{
                 type: Input
             }], instanceID: [{
@@ -367,31 +460,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class ActionCardComponent {
     constructor() {
-        this.retryEmitter = new EventEmitter();
+        this.executeAction = new EventEmitter();
     }
-    handleRetry() {
-        this.retryEmitter.emit(this.error);
+    triggerExecuteAction() {
+        this.executeAction.emit(this.config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCardComponent, isStandalone: true, selector: "mobi-office-action-card", inputs: { error: "error" }, outputs: { retryEmitter: "retryEmitter" }, ngImport: i0, template: "<p>action-card works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCardComponent, isStandalone: true, selector: "mobi-office-action-card", inputs: { config: "config" }, outputs: { executeAction: "executeAction" }, ngImport: i0, template: "<div class=\"card\" (click)=\"triggerExecuteAction()\">\r\n  <img\r\n    src=\"https://docs.mstate.ai/img/mymobioffice_logo.png\"\r\n    alt=\"Card Image\"\r\n    class=\"card-image\"\r\n  />\r\n  <div class=\"card-content\">\r\n    <h3 class=\"card-title\">\r\n      {{ config?.name }}\r\n    </h3>\r\n    <p class=\"card-description\">\r\n      {{ config?.meta?.desc ?? 'Click card to execute' }}\r\n    </p>\r\n  </div>\r\n  <div class=\"card-footer\">\r\n    <button class=\"card-button\">Execute</button>\r\n  </div>\r\n</div>\r\n", styles: [".card{width:240px;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0003}.card-image{width:auto;margin:5px;height:150px;display:block;margin-inline:auto;border-radius:10px}.card-content{padding:15px}.card-title{margin:0 0 10px;font-size:18px;font-weight:700;color:#333}.card-description{margin:0;font-size:14px;color:#666;line-height:1.5}.card-footer{padding:10px 15px;background-color:#f9f9f9;text-align:right}.card-button{background-color:#007bff;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .2s}.card-button:hover{background-color:#0056b3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-action-card', standalone: true, imports: [CommonModule], template: "<p>action-card works!</p>\n" }]
-        }], propDecorators: { error: [{
+            args: [{ selector: 'mobi-office-action-card', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"card\" (click)=\"triggerExecuteAction()\">\r\n  <img\r\n    src=\"https://docs.mstate.ai/img/mymobioffice_logo.png\"\r\n    alt=\"Card Image\"\r\n    class=\"card-image\"\r\n  />\r\n  <div class=\"card-content\">\r\n    <h3 class=\"card-title\">\r\n      {{ config?.name }}\r\n    </h3>\r\n    <p class=\"card-description\">\r\n      {{ config?.meta?.desc ?? 'Click card to execute' }}\r\n    </p>\r\n  </div>\r\n  <div class=\"card-footer\">\r\n    <button class=\"card-button\">Execute</button>\r\n  </div>\r\n</div>\r\n", styles: [".card{width:240px;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0003}.card-image{width:auto;margin:5px;height:150px;display:block;margin-inline:auto;border-radius:10px}.card-content{padding:15px}.card-title{margin:0 0 10px;font-size:18px;font-weight:700;color:#333}.card-description{margin:0;font-size:14px;color:#666;line-height:1.5}.card-footer{padding:10px 15px;background-color:#f9f9f9;text-align:right}.card-button{background-color:#007bff;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .2s}.card-button:hover{background-color:#0056b3}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
-            }], retryEmitter: [{
+            }], executeAction: [{
                 type: Output
             }] } });
 
-class LoaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoaderComponent, isStandalone: true, selector: "mobi-office-loader", ngImport: i0, template: "<p>Loading...</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ErrorCardComponent {
+    constructor() {
+        this.retry = new EventEmitter();
+    }
+    handleRetryError() {
+        this.retry.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ErrorCardComponent, isStandalone: true, selector: "lib-error-card", inputs: { errors: "errors" }, outputs: { retry: "retry" }, ngImport: i0, template: "<div class=\"error\">\r\n  <p style=\"font-size: 2rem; text-align: center\">Error</p>\r\n\r\n  @for (message of errors; track message) {\r\n    <p style=\"color: red; font-size: 1rem; text-align: center\">\r\n      {{ message }}\r\n    </p>\r\n  }\r\n  <mobi-office-button (click)=\"handleRetryError()\">Retry</mobi-office-button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "mobi-office-button", inputs: ["type", "onClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-error-card', standalone: true, imports: [ButtonComponent], template: "<div class=\"error\">\r\n  <p style=\"font-size: 2rem; text-align: center\">Error</p>\r\n\r\n  @for (message of errors; track message) {\r\n    <p style=\"color: red; font-size: 1rem; text-align: center\">\r\n      {{ message }}\r\n    </p>\r\n  }\r\n  <mobi-office-button (click)=\"handleRetryError()\">Retry</mobi-office-button>\r\n</div>\r\n" }]
+        }], propDecorators: { errors: [{
+                type: Input,
+                args: [{ required: true }]
+            }], retry: [{
+                type: Output
+            }] } });
+
+class WorkflowEndCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WorkflowEndCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WorkflowEndCardComponent, isStandalone: true, selector: "lib-workflow-end-card", ngImport: i0, template: "<p>Workflow Ended</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WorkflowEndCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mobi-office-loader', standalone: true, imports: [CommonModule], template: "<p>Loading...</p>\n" }]
+            args: [{ selector: 'lib-workflow-end-card', standalone: true, imports: [], template: "<p>Workflow Ended</p>\r\n" }]
         }] });
 
 class MstateAngularComponent {
@@ -408,7 +521,6 @@ class MstateAngularComponent {
         this.start = true;
         //#region Variables & Events
         this.isLoading = true;
-        this.triggerAgain = false;
         this.errors = [];
         this.errorMessages = [];
         this.allowedActions = [];
@@ -418,17 +530,10 @@ class MstateAngularComponent {
             this.setAllowedActions();
     }
     ngOnChanges(changes) {
-        if (this.mstateAngularHelper.detectChange(changes, [
-            Variable.START,
-            Variable.TRIGGER_AGAIN,
-        ])) {
+        if (this.mstateAngularHelper.detectChange(changes, [Variable.START])) {
             if (this.start)
                 this.setAllowedActions();
         }
-        if (this.mstateAngularHelper.detectChange(changes, [Variable.ERRORS])) {
-            console.log({ mstateErrors: this.errors });
-            this.errorMessages = this.errors.filter((e) => typeof e === 'string');
-        }
     }
     //#endregion
     //#region Handlers
@@ -441,7 +546,7 @@ class MstateAngularComponent {
                 token: this.token,
             })
                 .pipe(catchError((err) => {
-                console.log(err);
+                this.handleError({}, err.error?.errors);
                 throw err;
             }), finalize(() => {
                 this.isLoading = false;
@@ -457,7 +562,7 @@ class MstateAngularComponent {
                 token: this.token,
             })
                 .pipe(catchError((err) => {
-                console.log(err);
+                this.handleError({}, err.error?.errors);
                 throw err;
             }), finalize(() => {
                 this.isLoading = false;
@@ -467,13 +572,10 @@ class MstateAngularComponent {
             });
         }
     }
-    handleExecuteAction(value, errors) {
+    handleExecuteAction(response) {
+        const { value, errors = [] } = response;
         if (errors?.length) {
-            this.errors = errors;
-            value.instanceID = errors[0]
-                ?.split("instanceID='")
-                ?.pop()
-                ?.replace("'", '');
+            this.handleError(value, errors);
         }
         else {
             this.allowedActions = value.actions;
@@ -487,11 +589,32 @@ class MstateAngularComponent {
             }
         }
     }
-    handleError(config) {
+    handleActionExecution(config) {
         this.allowedActions = [config];
     }
+    handleRetryAction() {
+        if (this.allowedActions.length === 0) {
+            if (this.start)
+                this.setAllowedActions();
+        }
+        this.errors = [];
+        this.errorMessages = [];
+    }
+    handleError(value, errors) {
+        this.errors = errors;
+        value.instanceID = errors[0]
+            ?.split("instanceID='")
+            ?.pop()
+            ?.replace("'", '');
+        this.errorMessages = this.errors
+            .filter((e) => typeof e === 'string')
+            .map((msg) => msg.replace(/ instanceID='(.*)'/i, ''));
+        if (this.onError) {
+            this.onError(this.errors);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularComponent, deps: [{ token: MstateAngularHelper }, { token: MstateAngularService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MstateAngularComponent, isStandalone: true, selector: "mstate-angular", inputs: { token: "token", workflow: "workflow", instanceID: "instanceID", start: "start", theme: "theme", who: "who", onInstanceChange: "onInstanceChange", onSuccess: "onSuccess", onError: "onError", handleCustomField: "handleCustomField" }, providers: [MstateAngularHelper, MstateAngularService], usesOnChanges: true, ngImport: i0, template: "<div class=\"mstate-angular\">\n  <img\n    src=\"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0\"\n    alt=\"logo\"\n    width=\"100%\"\n    class=\"logo\" />\n\n  @if (isLoading) {\n    <mobi-office-loader></mobi-office-loader>\n  } @else if (errorMessages.length) {\n    @for (message of errorMessages; track message) {\n      <p>\n        {{ message }}\n      </p>\n    }\n  } @else {\n    @switch (allowedActions.length) {\n      @case (0) {\n        <h1>Workflow Ended</h1>\n      }\n      @case (1) {\n        <lib-action-form\n          [workflow]=\"workflow\"\n          [token]=\"token\"\n          [instanceID]=\"instanceID\"\n          [config]=\"allowedActions[0]\"\n          [onExecuteAction]=\"handleExecuteAction\"\n          [updateCustomFieldValue]=\"handleCustomField\"\n          [onSuccess]=\"onSuccess\"></lib-action-form>\n      }\n      @default {\n        @for (item of allowedActions; track $index) {\n          <mobi-office-action-card\n            [error]=\"item\"\n            (retryEmitter)=\"handleError($event)\"></mobi-office-action-card>\n        }\n      }\n    }\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.mstate-angular *{font-family:Poppins,serif}.mstate-angular ::ng-deep .ng-select{padding-bottom:1.25em}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container:after{border-bottom-color:#0000;background-image:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 33%,transparent 0%);background-size:4px 1px;background-repeat:repeat-x}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,.mstate-angular .ng-select.ng-select-disabled .ng-clear-wrapper{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:hover:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-value-container .ng-placeholder{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);color:#3f51b5}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow{color:#3f51b5}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-filtered .ng-select-container .ng-placeholder{display:initial}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-opened .ng-placeholder{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px)}.mstate-angular ::ng-deep .ng-select .ng-select-container{color:#000000de;align-items:baseline;min-height:51.5px}.mstate-angular ::ng-deep .ng-select .ng-select-container:after{border-bottom:thin solid rgba(0,0,0,.42);content:\"\";bottom:0;left:0;right:0;position:absolute;transition:border-color .3s cubic-bezier(.55,0,.55,.2)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline{padding:0 .5em;min-height:60px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after{border:solid 1px rgba(0,0,0,.12);border-radius:5px;height:calc(100% - .5em);pointer-events:none;transition:border-color .3s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after{border-color:#000000de;border-width:2px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-placeholder{padding:0 .25em;background-color:#fff;z-index:1}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value{padding-left:.25em}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:stretch;padding:.4375em 0;border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{position:absolute;color:#0000008a;transform-origin:left 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep [dir=rtl] .ng-select .ng-select-container .ng-value-container .ng-placeholder{transform-origin:right 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input{bottom:.4375em}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{bottom:17px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-clear-wrapper{bottom:14px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper{align-self:flex-end;bottom:9px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper{align-self:flex-end;bottom:7px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-select-container .ng-value-container .ng-value{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:hover:after{background-image:none;border:dotted 1px rgba(0,0,0,.12)}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-arrow-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-clear-wrapper{border-top:none}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{top:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-clear-wrapper{top:4px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#3f51b5;border-radius:2px;color:#fff;padding:2px 5px;margin:0 .4375em .4375em 0}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:0 0 .4375em .4375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:14px;font-weight:500}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:#ffffff8a;padding-right:5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{padding-left:5px;padding-right:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{color:#ffffffde}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{line-height:1.375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value{align-items:center}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{padding-bottom:0;padding-top:.1875em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-clear-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-arrow-wrapper{border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper{color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:hover{color:#000000de}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:focus{color:#000000de;outline:none}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper{bottom:2px}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px;color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-spinner-zone{top:3px}.mstate-angular ::ng-deep .ng-dropdown-panel{background:#fff;left:0}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:calc(100% - .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-right{left:100%;top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f;margin-left:4px}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:calc(100% - 1.25em);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-left{left:calc(-100% - 4px);top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.selected{background:#fff}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:pointer;line-height:3em;height:3em;padding:0 16px;color:#0000008a;font-weight:500}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{line-height:3em;min-height:3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px;text-decoration:none;position:relative;color:#000000de;text-align:left}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#0000000a;color:#000000de}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#00000061}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400;color:#00000061}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}.mstate-angular .logo{width:70%;margin:auto;max-width:300px;margin-block:12px}.mstate-angular .form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mstate-angular .form-group{margin-bottom:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ActionFormComponent, selector: "lib-action-form", inputs: ["token", "workflow", "config", "onExecuteAction", "updateCustomFieldValue", "instanceID", "onSuccess"] }, { kind: "component", type: ActionCardComponent, selector: "mobi-office-action-card", inputs: ["error"], outputs: ["retryEmitter"] }, { kind: "component", type: LoaderComponent, selector: "mobi-office-loader" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MstateAngularComponent, isStandalone: true, selector: "mstate-angular", inputs: { token: "token", workflow: "workflow", instanceID: "instanceID", start: "start", theme: "theme", who: "who", onInstanceChange: "onInstanceChange", onSuccess: "onSuccess", onError: "onError", handleCustomField: "handleCustomField" }, providers: [MstateAngularHelper, MstateAngularService], usesOnChanges: true, ngImport: i0, template: "<div class=\"mstate-angular\">\r\n  <img\r\n    src=\"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0\"\r\n    alt=\"logo\"\r\n    width=\"100%\"\r\n    class=\"logo\"\r\n  />\r\n\r\n  @if (isLoading) {\r\n    <div class=\"flex-container\">\r\n      <mobi-office-loader />\r\n    </div>\r\n  } @else if (errorMessages.length) {\r\n    <lib-error-card [errors]=\"errorMessages\" (retry)=\"handleRetryAction()\" />\r\n  } @else {\r\n    @switch (allowedActions.length) {\r\n      @case (0) {\r\n        <lib-workflow-end-card />\r\n      }\r\n      @case (1) {\r\n        <lib-action-form\r\n          [workflow]=\"workflow\"\r\n          [token]=\"token\"\r\n          [instanceID]=\"instanceID\"\r\n          [config]=\"allowedActions[0]\"\r\n          (onExecuteAction)=\"handleExecuteAction($event)\"\r\n          [updateCustomFieldValue]=\"handleCustomField\"\r\n          [onSuccess]=\"onSuccess\"\r\n        ></lib-action-form>\r\n      }\r\n      @default {\r\n        <div class=\"flex-container\">\r\n          @for (item of allowedActions; track $index) {\r\n            <mobi-office-action-card\r\n              [config]=\"item\"\r\n              (executeAction)=\"handleActionExecution($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.mstate-angular *{font-family:Poppins,serif}.mstate-angular ::ng-deep small{color:red}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container:after{background-image:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 33%,transparent 0%);background-size:4px 1px;background-repeat:repeat-x}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,.mstate-angular .ng-select.ng-select-disabled .ng-clear-wrapper{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:hover:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-value-container .ng-placeholder{display:none}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow{color:#3f51b5}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-filtered .ng-select-container .ng-placeholder{display:initial}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-opened .ng-placeholder{display:none}.mstate-angular ::ng-deep .ng-select .ng-select-container{color:#000000de;align-items:center;min-height:45px;padding-bottom:3px;padding-inline:.5rem}.mstate-angular ::ng-deep .ng-select .ng-select-container:after{content:\"\";bottom:0;left:0;right:0;position:absolute;transition:border-color .3s cubic-bezier(.55,0,.55,.2)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline{padding:0 .5em;min-height:60px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after{border:solid 1px rgba(0,0,0,.12);border-radius:5px;height:calc(100% - .5em);pointer-events:none;transition:border-color .3s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after{border-color:#000000de;border-width:2px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-placeholder{padding:0 .25em;background-color:#fff;z-index:1}.mstate-angular ::ng-deep .ng-select-container{border:1px solid #ced4da;border-radius:5px;padding-left:5px}.mstate-angular ::ng-deep .ng-input input{height:100%;font-size:14px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value{padding-left:.25em}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:stretch;padding:.4375em 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{position:absolute;color:#0000008a;transform-origin:left 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep [dir=rtl] .ng-select .ng-select-container .ng-value-container .ng-placeholder{transform-origin:right 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input{bottom:.4375em}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{bottom:17px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-clear-wrapper{bottom:14px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper{align-self:flex-end;bottom:9px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper{align-self:flex-end;bottom:7px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-select-container .ng-value-container .ng-value{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:hover:after{background-image:none;border:dotted 1px rgba(0,0,0,.12)}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-arrow-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-clear-wrapper{border-top:none}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{top:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-clear-wrapper{top:4px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#3f51b5;border-radius:2px;color:#fff;padding:2px .75em;margin:.4375em .4375em 5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:0 0 .4375em .4375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:14px;font-weight:500}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:#ffffff8a;padding-right:5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{padding-left:5px;padding-right:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{color:#ffffffde}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{line-height:1.375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value{align-items:center}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{padding-bottom:0;padding-top:.1875em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-clear-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-arrow-wrapper{border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper{color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:hover{color:#000000de}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:focus{color:#000000de;outline:none}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper{bottom:2px}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px;color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-spinner-zone{top:3px}.mstate-angular ::ng-deep .ng-dropdown-panel{background:#fff;left:0}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:calc(100% - .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-right{left:100%;top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f;margin-left:4px}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:100%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-left{left:calc(-100% - 4px);top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.selected{background:#fff}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-header{padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:pointer;line-height:3em;height:3em;padding:0 16px;color:#0000008a;font-weight:500}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{line-height:3em;min-height:3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px;text-decoration:none;position:relative;color:#000000de;text-align:left}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#0000000a;color:#000000de}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#00000061}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400;color:#00000061}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}.mstate-angular .logo{width:70%;margin:auto;max-width:300px;margin-block:12px;display:flex}.mstate-angular .flex-container{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center}.mstate-angular ::ng-deep .form-control{display:block;min-height:35px;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;outline:none;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mstate-angular ::ng-deep .form-group{padding-block:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ActionFormComponent, selector: "lib-action-form", inputs: ["token", "workflow", "config", "updateCustomFieldValue", "instanceID", "onSuccess"], outputs: ["onExecuteAction"] }, { kind: "component", type: ActionCardComponent, selector: "mobi-office-action-card", inputs: ["config"], outputs: ["executeAction"] }, { kind: "component", type: LoaderComponent, selector: "mobi-office-loader" }, { kind: "component", type: ErrorCardComponent, selector: "lib-error-card", inputs: ["errors"], outputs: ["retry"] }, { kind: "component", type: WorkflowEndCardComponent, selector: "lib-workflow-end-card" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularComponent, decorators: [{
             type: Component,
@@ -500,7 +623,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ActionFormComponent,
                         ActionCardComponent,
                         LoaderComponent,
-                    ], providers: [MstateAngularHelper, MstateAngularService], template: "<div class=\"mstate-angular\">\n  <img\n    src=\"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0\"\n    alt=\"logo\"\n    width=\"100%\"\n    class=\"logo\" />\n\n  @if (isLoading) {\n    <mobi-office-loader></mobi-office-loader>\n  } @else if (errorMessages.length) {\n    @for (message of errorMessages; track message) {\n      <p>\n        {{ message }}\n      </p>\n    }\n  } @else {\n    @switch (allowedActions.length) {\n      @case (0) {\n        <h1>Workflow Ended</h1>\n      }\n      @case (1) {\n        <lib-action-form\n          [workflow]=\"workflow\"\n          [token]=\"token\"\n          [instanceID]=\"instanceID\"\n          [config]=\"allowedActions[0]\"\n          [onExecuteAction]=\"handleExecuteAction\"\n          [updateCustomFieldValue]=\"handleCustomField\"\n          [onSuccess]=\"onSuccess\"></lib-action-form>\n      }\n      @default {\n        @for (item of allowedActions; track $index) {\n          <mobi-office-action-card\n            [error]=\"item\"\n            (retryEmitter)=\"handleError($event)\"></mobi-office-action-card>\n        }\n      }\n    }\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.mstate-angular *{font-family:Poppins,serif}.mstate-angular ::ng-deep .ng-select{padding-bottom:1.25em}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container:after{border-bottom-color:#0000;background-image:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 33%,transparent 0%);background-size:4px 1px;background-repeat:repeat-x}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,.mstate-angular .ng-select.ng-select-disabled .ng-clear-wrapper{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:hover:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-value-container .ng-placeholder{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);color:#3f51b5}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow{color:#3f51b5}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-filtered .ng-select-container .ng-placeholder{display:initial}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-opened .ng-placeholder{transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px)}.mstate-angular ::ng-deep .ng-select .ng-select-container{color:#000000de;align-items:baseline;min-height:51.5px}.mstate-angular ::ng-deep .ng-select .ng-select-container:after{border-bottom:thin solid rgba(0,0,0,.42);content:\"\";bottom:0;left:0;right:0;position:absolute;transition:border-color .3s cubic-bezier(.55,0,.55,.2)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline{padding:0 .5em;min-height:60px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after{border:solid 1px rgba(0,0,0,.12);border-radius:5px;height:calc(100% - .5em);pointer-events:none;transition:border-color .3s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after{border-color:#000000de;border-width:2px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-placeholder{padding:0 .25em;background-color:#fff;z-index:1}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value{padding-left:.25em}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:stretch;padding:.4375em 0;border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{position:absolute;color:#0000008a;transform-origin:left 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep [dir=rtl] .ng-select .ng-select-container .ng-value-container .ng-placeholder{transform-origin:right 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input{bottom:.4375em}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{bottom:17px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-clear-wrapper{bottom:14px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper{align-self:flex-end;bottom:9px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper{align-self:flex-end;bottom:7px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-select-container .ng-value-container .ng-value{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:hover:after{background-image:none;border:dotted 1px rgba(0,0,0,.12)}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-arrow-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-clear-wrapper{border-top:none}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{top:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-clear-wrapper{top:4px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#3f51b5;border-radius:2px;color:#fff;padding:2px 5px;margin:0 .4375em .4375em 0}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:0 0 .4375em .4375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:14px;font-weight:500}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:#ffffff8a;padding-right:5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{padding-left:5px;padding-right:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{color:#ffffffde}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{line-height:1.375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value{align-items:center}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{padding-bottom:0;padding-top:.1875em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-clear-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-arrow-wrapper{border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper{color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:hover{color:#000000de}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:focus{color:#000000de;outline:none}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper{bottom:2px}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px;color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-spinner-zone{top:3px}.mstate-angular ::ng-deep .ng-dropdown-panel{background:#fff;left:0}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:calc(100% - .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-right{left:100%;top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f;margin-left:4px}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:calc(100% - 1.25em);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-left{left:calc(-100% - 4px);top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.selected{background:#fff}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:pointer;line-height:3em;height:3em;padding:0 16px;color:#0000008a;font-weight:500}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{line-height:3em;min-height:3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px;text-decoration:none;position:relative;color:#000000de;text-align:left}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#0000000a;color:#000000de}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#00000061}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400;color:#00000061}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}.mstate-angular .logo{width:70%;margin:auto;max-width:300px;margin-block:12px}.mstate-angular .form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mstate-angular .form-group{margin-bottom:1rem}\n"] }]
+                        ErrorCardComponent,
+                        WorkflowEndCardComponent,
+                    ], providers: [MstateAngularHelper, MstateAngularService], template: "<div class=\"mstate-angular\">\r\n  <img\r\n    src=\"https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0\"\r\n    alt=\"logo\"\r\n    width=\"100%\"\r\n    class=\"logo\"\r\n  />\r\n\r\n  @if (isLoading) {\r\n    <div class=\"flex-container\">\r\n      <mobi-office-loader />\r\n    </div>\r\n  } @else if (errorMessages.length) {\r\n    <lib-error-card [errors]=\"errorMessages\" (retry)=\"handleRetryAction()\" />\r\n  } @else {\r\n    @switch (allowedActions.length) {\r\n      @case (0) {\r\n        <lib-workflow-end-card />\r\n      }\r\n      @case (1) {\r\n        <lib-action-form\r\n          [workflow]=\"workflow\"\r\n          [token]=\"token\"\r\n          [instanceID]=\"instanceID\"\r\n          [config]=\"allowedActions[0]\"\r\n          (onExecuteAction)=\"handleExecuteAction($event)\"\r\n          [updateCustomFieldValue]=\"handleCustomField\"\r\n          [onSuccess]=\"onSuccess\"\r\n        ></lib-action-form>\r\n      }\r\n      @default {\r\n        <div class=\"flex-container\">\r\n          @for (item of allowedActions; track $index) {\r\n            <mobi-office-action-card\r\n              [config]=\"item\"\r\n              (executeAction)=\"handleActionExecution($event)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.mstate-angular *{font-family:Poppins,serif}.mstate-angular ::ng-deep small{color:red}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container:after{background-image:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.42) 33%,transparent 0%);background-size:4px 1px;background-repeat:repeat-x}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,.mstate-angular .ng-select.ng-select-disabled .ng-clear-wrapper{color:#00000061}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:hover:after{border-color:#3f51b5;border-width:2px}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-value-container .ng-placeholder{display:none}.mstate-angular ::ng-deep .ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow{color:#3f51b5}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-filtered .ng-select-container .ng-placeholder{display:initial}.mstate-angular ::ng-deep .ng-select .ng-has-value .ng-placeholder,.mstate-angular .ng-select.ng-select-opened .ng-placeholder{display:none}.mstate-angular ::ng-deep .ng-select .ng-select-container{color:#000000de;align-items:center;min-height:45px;padding-bottom:3px;padding-inline:.5rem}.mstate-angular ::ng-deep .ng-select .ng-select-container:after{content:\"\";bottom:0;left:0;right:0;position:absolute;transition:border-color .3s cubic-bezier(.55,0,.55,.2)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline{padding:0 .5em;min-height:60px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after{border:solid 1px rgba(0,0,0,.12);border-radius:5px;height:calc(100% - .5em);pointer-events:none;transition:border-color .3s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after{border-color:#000000de;border-width:2px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-placeholder{padding:0 .25em;background-color:#fff;z-index:1}.mstate-angular ::ng-deep .ng-select-container{border:1px solid #ced4da;border-radius:5px;padding-left:5px}.mstate-angular ::ng-deep .ng-input input{height:100%;font-size:14px}.mstate-angular ::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value{padding-left:.25em}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:stretch;padding:.4375em 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{position:absolute;color:#0000008a;transform-origin:left 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1)}.mstate-angular ::ng-deep [dir=rtl] .ng-select .ng-select-container .ng-value-container .ng-placeholder{transform-origin:right 0}.mstate-angular ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input{bottom:.4375em}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{bottom:17px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container.ng-appearance-outline .ng-clear-wrapper{bottom:14px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper{align-self:flex-end;bottom:9px}.mstate-angular ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper{align-self:flex-end;bottom:7px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-select-container .ng-value-container .ng-value{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:after,.mstate-angular .ng-select.ng-select-multiple.ng-select-disabled .ng-appearance-outline:hover:after{background-image:none;border:dotted 1px rgba(0,0,0,.12)}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-arrow-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline.ng-has-value .ng-clear-wrapper{border-top:none}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-arrow-wrapper{top:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-appearance-outline .ng-clear-wrapper{top:4px}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#3f51b5;border-radius:2px;color:#fff;padding:2px .75em;margin:.4375em .4375em 5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin:0 0 .4375em .4375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#0000001f;color:#00000042}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:14px;font-weight:500}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:#ffffff8a;padding-right:5px}.mstate-angular ::ng-deep [dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{padding-left:5px;padding-right:0}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{color:#ffffffde}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{line-height:1.375em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value{align-items:center}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{padding-bottom:0;padding-top:.1875em}.mstate-angular ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-clear-wrapper,.mstate-angular .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-arrow-wrapper{border-top:.84375em solid rgba(0,0,0,0)}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper{color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:hover{color:#000000de}.mstate-angular ::ng-deep .ng-select .ng-clear-wrapper:focus{color:#000000de;outline:none}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper{bottom:2px}.mstate-angular ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px;color:#0000008a}.mstate-angular ::ng-deep .ng-select .ng-spinner-zone{top:3px}.mstate-angular ::ng-deep .ng-dropdown-panel{background:#fff;left:0}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-top{bottom:calc(100% - .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-right{left:100%;top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f;margin-left:4px}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-bottom{top:100%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.ng-select-left{left:calc(-100% - 4px);top:calc(0% + .84375em);box-shadow:0 -5px 5px -3px #0003,0 -8px 10px 1px #00000024,0 -3px 14px 2px #0000001f}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.selected{background:#fff}.mstate-angular ::ng-deep .ng-dropdown-panel.multiple .ng-option.marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-header{padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid rgba(0,0,0,.12);padding:0 16px;line-height:3em;min-height:3em}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:pointer;line-height:3em;height:3em;padding:0 16px;color:#0000008a;font-weight:500}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background:#0000000a}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{line-height:3em;min-height:3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px;text-decoration:none;position:relative;color:#000000de;text-align:left}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{text-align:right}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#0000000a;color:#000000de}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:#0000001f;color:#3f51b5}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#00000061}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:32px}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:32px;padding-left:0}.mstate-angular ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400;color:#00000061}.mstate-angular ::ng-deep [dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}.mstate-angular .logo{width:70%;margin:auto;max-width:300px;margin-block:12px;display:flex}.mstate-angular .flex-container{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center}.mstate-angular ::ng-deep .form-control{display:block;min-height:35px;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;outline:none;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.mstate-angular ::ng-deep .form-group{padding-block:8px}\n"] }]
         }], ctorParameters: () => [{ type: MstateAngularHelper }, { type: MstateAngularService }], propDecorators: { token: [{
                 type: Input,
                 args: [{ required: true }]
@@ -527,13 +652,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class MstateAngularModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, imports: [CommonModule, MstateAngularComponent], exports: [MstateAngularComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, imports: [CommonModule, MstateAngularComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, imports: [CommonModule, MstateAngularComponent, ReactiveFormsModule], exports: [MstateAngularComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, imports: [CommonModule, MstateAngularComponent, ReactiveFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, MstateAngularComponent], // Import other necessary modules like CommonModule
+                    imports: [CommonModule, MstateAngularComponent, ReactiveFormsModule], // Import other necessary modules like CommonModule
                     exports: [MstateAngularComponent], // Export the pipe so it can be used externally
                 }]
         }] });