mstate-angular 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/esm2022/lib/action-form/action-form.component.mjs +10 -8
  2. package/esm2022/lib/components/text-area/text-area.component.mjs +27 -0
  3. package/esm2022/lib/input-selector/input-selector.component.mjs +5 -3
  4. package/esm2022/lib/mstate-angular/mstate-angular.component.mjs +34 -12
  5. package/esm2022/lib/mstate-angular.helper.mjs +5 -3
  6. package/fesm2022/mstate-angular.mjs +75 -27
  7. package/fesm2022/mstate-angular.mjs.map +1 -1
  8. package/lib/action-form/action-form.component.d.ts +3 -3
  9. package/lib/components/action-card/action-card.component.d.ts +1 -1
  10. package/lib/components/text-area/text-area.component.d.ts +16 -0
  11. package/lib/mstate-angular/mstate-angular.component.d.ts +6 -6
  12. package/package.json +1 -1
package/fesm2022/mstate-angular.mjs CHANGED
@@ -5,7 +5,7 @@ import * as i1 from '@angular/common/http';
5
5
  import { HttpHeaders } from '@angular/common/http';
6
6
  import axios from 'axios';
7
7
  import { catchError, finalize } from 'rxjs';
8
- import * as i3 from '@angular/forms';
8
+ import * as i2 from '@angular/forms';
9
9
  import { ReactiveFormsModule, Validators } from '@angular/forms';
10
10
  import * as i4 from '@ng-select/ng-select';
11
11
  import { NgSelectModule } from '@ng-select/ng-select';
@@ -90,6 +90,7 @@ class MstateAngularHelper {
90
90
  case FieldType.CHECKBOX:
91
91
  case FieldType.DROP_DOWN:
92
92
  case FieldType.INPUT_FIELD:
93
+ case FieldType.TEXT_AREA:
93
94
  case FieldType.RADIO_LIST:
94
95
  return true;
95
96
  default:
@@ -97,8 +98,9 @@ class MstateAngularHelper {
97
98
  }
98
99
  }
99
100
  checkInputError(form, key) {
100
- switch ((form.controls[key].status === 'INVALID' && form.controls[key].touched) ||
101
- (form.controls[key].status === 'INVALID' && form.controls[key].dirty)) {
101
+ const formData = form.controls[key] ?? {};
102
+ switch ((formData.status === 'INVALID' && formData.touched) ||
103
+ (formData.status === 'INVALID' && formData.dirty)) {
102
104
  case true:
103
105
  return {
104
106
  isError: true,
@@ -171,7 +173,7 @@ class InputFieldComponent {
171
173
  return this.mstateHelper.checkInputError(form, key);
172
174
  }
173
175
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFieldComponent, deps: [{ token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
174
- 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"] }] }); }
176
+ 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
175
177
  }
176
178
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFieldComponent, decorators: [{
177
179
  type: Component,
@@ -211,7 +213,7 @@ class SelectComponent {
211
213
  return this.mstateHelper.checkInputError(form, key);
212
214
  }
213
215
  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 }); }
214
- 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 }] }); }
216
+ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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 }] }); }
215
217
  }
216
218
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
217
219
  type: Component,
@@ -251,7 +253,7 @@ class DropdownComponent {
251
253
  return this.mstateHelper.checkInputError(form, key);
252
254
  }
253
255
  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 }); }
254
- 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 }] }); }
256
+ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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 }] }); }
255
257
  }
256
258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
257
259
  type: Component,
@@ -264,6 +266,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
264
266
  args: [{ required: true }]
265
267
  }] } });
266
268
 
269
+ class TextAreaComponent {
270
+ constructor(mstateHelper) {
271
+ this.mstateHelper = mstateHelper;
272
+ }
273
+ checkInputError(form, key) {
274
+ return this.mstateHelper.checkInputError(form, key);
275
+ }
276
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
277
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextAreaComponent, isStandalone: true, selector: "lib-text-area", 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 <textarea\r\n style=\"flex: 1\"\r\n rows=\"3\"\r\n [required]=\"config.field.isRequired || false\"\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 ></textarea>\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
278
+ }
279
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
280
+ type: Component,
281
+ args: [{ selector: 'lib-text-area', 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 <textarea\r\n style=\"flex: 1\"\r\n rows=\"3\"\r\n [required]=\"config.field.isRequired || false\"\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 ></textarea>\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" }]
282
+ }], ctorParameters: () => [{ type: MstateAngularHelper }], propDecorators: { config: [{
283
+ type: Input,
284
+ args: [{ required: true }]
285
+ }], mstateModel: [{
286
+ type: Input,
287
+ args: [{ required: true }]
288
+ }] } });
289
+
267
290
  class InputSelectorComponent {
268
291
  constructor(mstateHelper) {
269
292
  this.mstateHelper = mstateHelper;
@@ -278,7 +301,7 @@ class InputSelectorComponent {
278
301
  return this.mstateHelper.checkInputError(form, key);
279
302
  }
280
303
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectorComponent, deps: [{ token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
281
- 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"] }] }); }
304
+ 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) {\r\n @case (FieldType.INPUT_FIELD) {\r\n <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.TEXT_AREA) {\r\n <lib-text-area [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.DROP_DOWN) {\r\n <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.RADIO_LIST) {\r\n <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.CHECKBOX) {\r\n <mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @default {}\r\n}\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"] }, { kind: "component", type: TextAreaComponent, selector: "lib-text-area", inputs: ["config", "mstateModel"] }] }); }
282
305
  }
283
306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectorComponent, decorators: [{
284
307
  type: Component,
@@ -287,7 +310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
287
310
  InputFieldComponent,
288
311
  SelectComponent,
289
312
  DropdownComponent,
290
- ], 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" }]
313
+ TextAreaComponent,
314
+ ], providers: [MstateAngularHelper, MstateAngularService], template: "@switch (config.fieldType) {\r\n @case (FieldType.INPUT_FIELD) {\r\n <mobi-office-input-field [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.TEXT_AREA) {\r\n <lib-text-area [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.DROP_DOWN) {\r\n <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.RADIO_LIST) {\r\n <mobi-office-dropdown [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @case (FieldType.CHECKBOX) {\r\n <mobi-office-select [config]=\"config\" [mstateModel]=\"mstateModel\" />\r\n }\r\n @default {}\r\n}\r\n" }]
291
315
  }], ctorParameters: () => [{ type: MstateAngularHelper }], propDecorators: { step: [{
292
316
  type: Input,
293
317
  args: [{ required: true }]
@@ -335,6 +359,8 @@ class ActionFormComponent {
335
359
  steps: [],
336
360
  };
337
361
  this.onExecuteAction = new EventEmitter();
362
+ this.updateCustomFieldValue = new EventEmitter();
363
+ this.onSuccess = new EventEmitter();
338
364
  this.isLoading = false;
339
365
  this.nonUserInputField = {};
340
366
  this.handleStepConfigFilter = () => {
@@ -345,7 +371,7 @@ class ActionFormComponent {
345
371
  case ManualStepModule.CUSTOM_FIELD: {
346
372
  if (this.updateCustomFieldValue) {
347
373
  this.nonUserInputField[step?.context?.as] =
348
- this.updateCustomFieldValue(step?.context?.key);
374
+ this.updateCustomFieldValue.emit(step?.context?.key);
349
375
  }
350
376
  return true;
351
377
  }
@@ -400,7 +426,7 @@ class ActionFormComponent {
400
426
  errors: [],
401
427
  });
402
428
  if (this.onSuccess) {
403
- this.onSuccess(this.config.name);
429
+ this.onSuccess.emit(this.config.name);
404
430
  }
405
431
  });
406
432
  }
@@ -421,15 +447,15 @@ class ActionFormComponent {
421
447
  this.mstateHelper.checkIsHandledStep(data.fieldType)
422
448
  ? {
423
449
  [data?.field?.keyForAPI]: [
424
- data?.field.multiple ? [] : '',
450
+ data?.field.multiple ? [] : null,
425
451
  data?.field?.isRequired ? [Validators.required] : undefined,
426
452
  ],
427
453
  }
428
454
  : {}), {});
429
455
  this.form = this.fb.group(validators);
430
456
  }
431
- 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 }); }
432
- 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" }] }); }
457
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionFormComponent, deps: [{ token: i2.FormBuilder }, { token: MstateAngularService }, { token: MstateAngularHelper }], target: i0.ɵɵFactoryTarget.Component }); }
458
+ 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", instanceID: "instanceID" }, outputs: { onExecuteAction: "onExecuteAction", updateCustomFieldValue: "updateCustomFieldValue", onSuccess: "onSuccess" }, 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=\"width: 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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LoaderComponent, selector: "mobi-office-loader" }] }); }
433
459
  }
434
460
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionFormComponent, decorators: [{
435
461
  type: Component,
@@ -438,8 +464,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
438
464
  ButtonComponent,
439
465
  ReactiveFormsModule,
440
466
  LoaderComponent,
441
- ], 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"] }]
442
- }], ctorParameters: () => [{ type: i3.FormBuilder }, { type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { token: [{
467
+ ], 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=\"width: 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"] }]
468
+ }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: MstateAngularService }, { type: MstateAngularHelper }], propDecorators: { token: [{
443
469
  type: Input,
444
470
  args: [{ required: true }]
445
471
  }], workflow: [{
@@ -451,11 +477,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
451
477
  }], onExecuteAction: [{
452
478
  type: Output
453
479
  }], updateCustomFieldValue: [{
454
- type: Input
480
+ type: Output
455
481
  }], instanceID: [{
456
482
  type: Input
457
483
  }], onSuccess: [{
458
- type: Input
484
+ type: Output
459
485
  }] } });
460
486
 
461
487
  class ActionCardComponent {
@@ -519,6 +545,30 @@ class MstateAngularComponent {
519
545
  * @description Trigger if to start workflow.
520
546
  */
521
547
  this.start = true;
548
+ /**
549
+ * Triggers whenever your current workflow moved to other.
550
+ * @param {string} newInstanceID - The new instance ID on which your current workflow moved.
551
+ * @returns {void}.
552
+ */
553
+ this.onInstanceChange = new EventEmitter();
554
+ /**
555
+ * Triggers when The Action execution is completed.
556
+ * @param {string} actionName - action name which you have executed at this moment.
557
+ * @returns {void}.
558
+ */
559
+ this.onSuccess = new EventEmitter();
560
+ /**
561
+ * Triggers when Error occurs while performing any action.
562
+ * @param {unknown[]} errors - Error response from the api call done by Mstate.
563
+ * @returns {void}.
564
+ */
565
+ this.onError = new EventEmitter();
566
+ /**
567
+ * Handles your steps which contain Custom field module.
568
+ * @param {string} key - Which key you expect for getting the value.
569
+ * @returns {any} - whatever value you want to save in that custom field.
570
+ */
571
+ this.handleCustomField = new EventEmitter();
522
572
  //#region Variables & Events
523
573
  this.isLoading = true;
524
574
  this.errors = [];
@@ -584,9 +634,7 @@ class MstateAngularComponent {
584
634
  value?.instanceID !== this.instanceID &&
585
635
  !errors?.length) {
586
636
  this.instanceID = value?.instanceID;
587
- if (this.onInstanceChange) {
588
- this.onInstanceChange(value?.instanceID);
589
- }
637
+ this.onInstanceChange.emit(value?.instanceID);
590
638
  }
591
639
  }
592
640
  handleActionExecution(config) {
@@ -610,11 +658,11 @@ class MstateAngularComponent {
610
658
  .filter((e) => typeof e === 'string')
611
659
  .map((msg) => msg.replace(/ instanceID='(.*)'/i, ''));
612
660
  if (this.onError) {
613
- this.onError(this.errors);
661
+ this.onError.emit(this.errors);
614
662
  }
615
663
  }
616
664
  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 }); }
617
- 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", 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 <mobi-office-loader class=\"flex-container\" />\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{overflow:auto}.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;padding-left:10px}.mstate-angular ::ng-deep .ng-input{padding-left:10px}.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" }] }); }
665
+ 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", who: "who" }, outputs: { 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 <mobi-office-loader class=\"flex-container\" />\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.emit($event)\"\r\n (onSuccess)=\"onSuccess.emit($event)\"\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:49px;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;padding-left:10px}.mstate-angular ::ng-deep .ng-input{padding-left:10px}.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 [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:.65em}.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", "instanceID"], outputs: ["onExecuteAction", "updateCustomFieldValue", "onSuccess"] }, { 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" }] }); }
618
666
  }
619
667
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MstateAngularComponent, decorators: [{
620
668
  type: Component,
@@ -625,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
625
673
  LoaderComponent,
626
674
  ErrorCardComponent,
627
675
  WorkflowEndCardComponent,
628
- ], 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 <mobi-office-loader class=\"flex-container\" />\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{overflow:auto}.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;padding-left:10px}.mstate-angular ::ng-deep .ng-input{padding-left:10px}.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"] }]
676
+ ], 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 <mobi-office-loader class=\"flex-container\" />\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.emit($event)\"\r\n (onSuccess)=\"onSuccess.emit($event)\"\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:49px;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;padding-left:10px}.mstate-angular ::ng-deep .ng-input{padding-left:10px}.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 [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:.65em}.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"] }]
629
677
  }], ctorParameters: () => [{ type: MstateAngularHelper }, { type: MstateAngularService }], propDecorators: { token: [{
630
678
  type: Input,
631
679
  args: [{ required: true }]
@@ -639,13 +687,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
639
687
  }], who: [{
640
688
  type: Input
641
689
  }], onInstanceChange: [{
642
- type: Input
690
+ type: Output
643
691
  }], onSuccess: [{
644
- type: Input
692
+ type: Output
645
693
  }], onError: [{
646
- type: Input
694
+ type: Output
647
695
  }], handleCustomField: [{
648
- type: Input
696
+ type: Output
649
697
  }] } });
650
698
 
651
699
  class MstateAngularModule {