@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/create-modify-group-type/create-modify-group-type.component.ts

@@ -0,0 +1,602 @@
+import {
+  Component,
+  ComponentRef,
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, Validators } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { SharedService, LOV, FormUtilityService } from '@ieeesa-npm/shared';
+import {
+  AlignType,
+  CheckboxOption,
+  FieldConfig,
+  FormControlType,
+  FormGrid,
+  FormModel,
+  RadioOption,
+  CheckboxComponent,
+  DynamicFormComponent,
+} from '@ieeesa-npm/presentation';
+import { GroupRosterType, RoleType } from '@ieeesa-npm/groups';
+import { AlertType } from '@ieeesa-npm/utility';
+import * as screenTexts from '../../assets/constants.json';
+import { GroupTypeValidation } from '../../assets/tenant-validations';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import {
+  Settings,
+  RosterTypeLOVCode,
+} from '../../models/create-group-type-config.model';
+import { Role } from '../../models/roles-and-permissions.model';
+import { TenantFunctionType } from '../../models/tenant-function-type.model';
+import {
+  ViewGroupTypeResponse,
+  ViewGroupTypesConfiguration,
+} from '../../models/view-tenant-group-types.model';
+import {
+  ConfigFieldValue,
+  CreateGroupTypeRequestPayload,
+  CreateGroupTypeResponse,
+  CreatedOrModifiedGroupTypeInfo,
+  GetRosterTypeOrSettingsResponse,
+} from '../../models/create-group-type.model';
+import { FormStatus } from '../../models/form-status.model';
+
+/**
+ * CreateModifyGroupTypeComponent uses DynamicFormComponent to build create add group type form or edit group type form and implement the functionalities of submission of form and handling success and error scenarios.
+ * @class CreateModifyGroupTypeComponent
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+@Component({
+  selector: 'ieeesa-create-modify-group-type',
+  standalone: true,
+  imports: [CommonModule, DynamicFormComponent],
+  templateUrl: './create-modify-group-type.component.html',
+  styleUrls: ['./create-modify-group-type.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CreateModifyGroupTypeComponent implements OnInit, OnDestroy {
+  destroy$ = new Subject<boolean>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constants: any = screenTexts;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createGroupTypeScreenTexts: any = this.constants?.createGroupType;
+  leftButtonLabel = this.createGroupTypeScreenTexts?.label?.leftButtonLabel;
+  rightButtonLabel = this.createGroupTypeScreenTexts?.label?.rightButtonLabel;
+  colWidth: FormGrid = { xs: 12, xl: 12, sm: 12, md: 12, lg: 12 };
+  createGroupTypeFormGroup!: FormModel;
+  createModifyGroupTypeFormGroupRef!: FormGroup;
+  actionButtonAlign = AlignType.LEFT;
+  tenantFunctionType!: TenantFunctionType;
+  isRootGroupOptions = [
+    {
+      id: 1,
+      label: this.createGroupTypeScreenTexts?.isRootGroupOptions?.yes,
+      checked: false,
+    },
+    {
+      id: 2,
+      label: this.createGroupTypeScreenTexts?.isRootGroupOptions?.no,
+      checked: true,
+    },
+  ];
+  rosterTypeOptions: RadioOption[] = [];
+  settingOptions: CheckboxOption[] = [];
+  officerRolesOptions: CheckboxOption[] = [];
+  memberLevelOptions: CheckboxOption[] = [];
+  allowedSubGroupTypesOptions: CheckboxOption[] = [];
+  allowedSubGroupTypesFieldConfig!: FieldConfig;
+  appId!: string;
+  groupTypeDetails!: ViewGroupTypeResponse;
+  selectedGroupTypeInfo!: CreatedOrModifiedGroupTypeInfo;
+  @ViewChild(DynamicFormComponent)
+  dynamicFormComponent!: DynamicFormComponent;
+  @ViewChild(DynamicFormComponent, { read: ViewContainerRef })
+  dynamicFormComponentViewRef!: ViewContainerRef;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentRef!: ComponentRef<any>;
+  /**
+   * Event emitter for form submission response.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  @Output() submitFormResponse = new EventEmitter();
+  /**
+   * Event emitter for form cancel action.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  @Output() formCancel = new EventEmitter();
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    private tenantAppService: TenantApplicationsService,
+    // eslint-disable-next-line no-unused-vars
+    private sharedService: SharedService,
+    // eslint-disable-next-line no-unused-vars
+    private renderer: Renderer2,
+    // eslint-disable-next-line no-unused-vars
+    private elementRef: ElementRef,
+    // eslint-disable-next-line no-unused-vars
+    private formUtilityService: FormUtilityService // eslint-disable-next-line no-empty-function,
+  ) {}
+  /**
+   * Sets appId, tenantFunctionType and calls getGroupTypes() & getRosterTypes() to get group and roster types.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  ngOnInit(): void {
+    this.appId = this.tenantAppService.getSelectedTenantInformation()
+      ?.appId as string;
+    this.tenantFunctionType = this.tenantAppService?.getTenantFunctionType();
+    this.selectedGroupTypeInfo =
+      this.tenantAppService?.getNewlyCreatedGroupTypeInfo();
+    this.getGroupTypes();
+    this.getRosterTypes();
+  }
+  /**
+   * Gets the list of roster types and updates the form control.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  getRosterTypes(): void {
+    this.tenantAppService
+      .getRosterType()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetRosterTypeOrSettingsResponse) => {
+          if (response?.status) {
+            this.getSettings();
+            const rosterTypeList = response.body as LOV[];
+            rosterTypeList.map((rosterType: LOV) =>
+              this.rosterTypeOptions.push({
+                id: rosterType.lovId,
+                label: rosterType.lovDesc,
+                checked: rosterType.lovCode === RosterTypeLOVCode.INDIVIDUAL,
+              })
+            );
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createGroupTypeScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets the list of settings and updates the form control.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  getSettings(): void {
+    this.tenantAppService
+      .getGroupTypeSettings()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response: GetRosterTypeOrSettingsResponse) => {
+          if (response.status) {
+            this.getRoles();
+            const settingsList = response.body as LOV[];
+            settingsList.map((setting: LOV) => {
+              this.settingOptions.push({
+                id: setting.lovId,
+                name: setting.lovDesc,
+                checked: false,
+                disabled: false,
+              });
+            });
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createGroupTypeScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets the list of roles and updates the form control.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  getRoles(): void {
+    this.tenantAppService
+      .getRoles(this.appId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (response) => {
+          if (response?.status) {
+            const rolesList = response?.body as Role[];
+            rolesList.map((role: Role) => {
+              if (role.roleTypeName === RoleType.OFFICER) {
+                this.officerRolesOptions.push({
+                  id: role.roleId,
+                  name: role.roleName,
+                  checked: false,
+                  disabled: false,
+                });
+              } else if (role.roleTypeName === RoleType.MEMBER_LEVEL) {
+                this.memberLevelOptions.push({
+                  id: role.roleId,
+                  name: role.roleName,
+                  checked: false,
+                  disabled: false,
+                });
+              }
+            });
+            if (
+              this.memberLevelOptions.length === 0 ||
+              this.officerRolesOptions.length === 0
+            ) {
+              this.sharedService.showAlertMessage(
+                AlertType.ERROR,
+                this.createGroupTypeScreenTexts.errors['3019']
+              );
+            } else {
+              this.initializeCreateGroupTypeFormGroup();
+            }
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        error: (error: any) => {
+          this.sharedService.handleErrors(
+            error,
+            this.createGroupTypeScreenTexts.errors
+          );
+        },
+      });
+  }
+  /**
+   * Gets and filters non SYSTEM_USER group types, constructs allowed sub-group types options and form field config.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  getGroupTypes(): void {
+    this.groupTypeDetails = this.tenantAppService.getGroupTypeDetails();
+    this.groupTypeDetails?.body?.forEach(
+      (item: ViewGroupTypesConfiguration) => {
+        if (
+          item?.configFieldValue?.businessRule?.rosterType !==
+          GroupRosterType?.SYSTEM_USER
+        ) {
+          this.allowedSubGroupTypesOptions.push({
+            id: item?.configFieldId,
+            name: item?.configFieldValue?.name,
+            checked: false,
+            disabled: false,
+          });
+        }
+      }
+    );
+    this.allowedSubGroupTypesFieldConfig = {
+      type: FormControlType.CHECKBOX,
+      label: this.createGroupTypeScreenTexts?.label?.allowedSubGroupTypes,
+      controlName: 'allowedSubGroupTypes',
+      checkboxOptions: this.allowedSubGroupTypesOptions,
+      ariaLabel:
+        this.createGroupTypeScreenTexts?.label?.ariaLabel?.allowedSubGroupTypes,
+      ariaDescribedById:
+        this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+          ?.allowedSubGroupTypes,
+    };
+  }
+  /**
+   * Initialize the create/edit group type form group array.
+   * @param {*} [formValue]
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  initializeCreateGroupTypeFormGroup(): void {
+    this.createGroupTypeFormGroup = {
+      formGroup: [
+        {
+          legend: '',
+          controls: [
+            {
+              type: FormControlType?.INPUT,
+              label: this.createGroupTypeScreenTexts?.label?.groupType + '*',
+              controlName: 'groupType',
+              value: '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(GroupTypeValidation.groupTypeMaxLength),
+              ],
+              supportMessage:
+                this.createGroupTypeScreenTexts?.supportText?.groupType,
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              maxErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.limit
+                  ?.groupTypeMaxChars,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel?.groupType,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.groupType,
+            },
+            {
+              type: FormControlType?.TEXT_AREA,
+              label: this.createGroupTypeScreenTexts?.label?.description + '*',
+              controlName: 'description',
+              value: '',
+              validation: [
+                Validators.required,
+                Validators.maxLength(GroupTypeValidation.descriptionMaxLength),
+              ],
+              supportMessage:
+                this.createGroupTypeScreenTexts?.supportText?.description,
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              maxCharCount: GroupTypeValidation.descriptionMaxLength,
+              maxErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.limit
+                  ?.descriptionMaxChars,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel?.description,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.description,
+              ariaMultiline: true,
+              isResize: true,
+            },
+            {
+              type: FormControlType.RADIO,
+              label: this.createGroupTypeScreenTexts?.label?.rosterType + '*',
+              controlName: 'rosterType',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT_GROUP_TYPE
+                  ? this.selectedGroupTypeInfo.configFieldValue.businessRule
+                      .rosterType
+                  : this.rosterTypeOptions[0].label,
+              disabled:
+                this.tenantFunctionType === TenantFunctionType.EDIT_GROUP_TYPE,
+              radioOptions: this.rosterTypeOptions,
+              validation: [Validators.required],
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel?.rosterType,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.rosterType,
+            },
+            {
+              type: FormControlType.CHECKBOX,
+              label: this.createGroupTypeScreenTexts?.label?.settings + '*',
+              controlName: 'settings',
+              checkboxOptions: this.settingOptions,
+              minSelectionRequired: 1,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel?.settings,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.settings,
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              validation: [Validators.required],
+            },
+            {
+              type: FormControlType.CHECKBOX,
+              label:
+                this.createGroupTypeScreenTexts?.label?.appOfficerRoles + '*',
+              controlName: 'appOfficerRoles',
+              checkboxOptions: this.officerRolesOptions,
+              minSelectionRequired: 1,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel
+                  ?.appOfficerRoles,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.appOfficerRoles,
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              validation: [Validators.required],
+            },
+            {
+              type: FormControlType.CHECKBOX,
+              label:
+                this.createGroupTypeScreenTexts?.label?.appMemberLevel + '*',
+              controlName: 'appMemberLevel',
+              checkboxOptions: this.memberLevelOptions,
+              minSelectionRequired: 1,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel
+                  ?.appMemberLevel,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.appMemberLevel,
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              validation: [Validators.required],
+            },
+            {
+              type: FormControlType.RADIO,
+              label: this.createGroupTypeScreenTexts?.label?.isRootGroup + '*',
+              controlName: 'isRootGroup',
+              value:
+                this.tenantFunctionType === TenantFunctionType.EDIT_GROUP_TYPE
+                  ? this.selectedGroupTypeInfo.configFieldValue.businessRule
+                      .isRootGroup
+                    ? this.isRootGroupOptions[0].label
+                    : this.isRootGroupOptions[1].label
+                  : this.isRootGroupOptions[1].label,
+              disabled:
+                this.tenantFunctionType === TenantFunctionType.EDIT_GROUP_TYPE,
+              radioOptions: this.isRootGroupOptions,
+              validation: [Validators.required],
+              requiredErrorMessage:
+                this.createGroupTypeScreenTexts?.message?.error?.required,
+              ariaLabel:
+                this.createGroupTypeScreenTexts?.label?.ariaLabel?.isRootGroup,
+              ariaDescribedById:
+                this.createGroupTypeScreenTexts?.label?.ariaDescribedById
+                  ?.isRootGroup,
+            },
+          ],
+        },
+      ],
+    };
+  }
+  /**
+   * Add or removes allowed sub groups form control (checkbox group control and options) as when allow sub group selection and updates the form state.
+   * @param {*} selectedCheckbox
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  onCheckboxSelectionChange(selectedCheckbox: CheckboxOption): void {
+    if (selectedCheckbox.name === Settings.ALLOW_SUB_GROUPS) {
+      if (selectedCheckbox.checked) {
+        this.componentRef = this.formUtilityService.addFormControl(
+          this.dynamicFormComponentViewRef,
+          CheckboxComponent,
+          this.createModifyGroupTypeFormGroupRef,
+          this.allowedSubGroupTypesFieldConfig,
+          this.renderer,
+          this.elementRef,
+          'is-root-group',
+          this.dynamicFormComponent
+        );
+      } else {
+        this.allowedSubGroupTypesOptions.forEach(
+          (allowedSubGroupTypes: CheckboxOption) =>
+            (allowedSubGroupTypes.checked = false)
+        );
+        this.formUtilityService.removeFormControl(
+          this.createModifyGroupTypeFormGroupRef,
+          this.allowedSubGroupTypesFieldConfig,
+          this.componentRef,
+          this.renderer,
+          this.elementRef
+        );
+      }
+    }
+  }
+  /**
+   * Sets create/modify group type reactive form group reference.
+   * @param {FormGroup[]} form -The form group array containing the form to be referenced.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  getCreateModifyGroupTypeFormGroupRef(form: FormGroup[]): void {
+    this.createModifyGroupTypeFormGroupRef = form[0];
+  }
+  /**
+   * Find the provided setting name in setting option and return the boolean value.
+   * @param {string} settingName
+   * @return {*}  {boolean}
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  isSettingSelectedByName(settingName: string): boolean {
+    return this.settingOptions.find(
+      (setting: CheckboxOption) => setting.name === settingName
+    )?.checked as boolean;
+  }
+  /**
+   * Creates a new group type on form submission and the form is valid.
+   * @param {FormGroup[]} form
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  onCreateModifyGroupTypeFormSubmit(form: FormGroup[]): void {
+    form[0]?.markAllAsTouched();
+    if (form[0].status === FormStatus.VALID) {
+      const selectedGroupTypes = this.allowedSubGroupTypesOptions
+        .filter((subGroupType: CheckboxOption) => subGroupType.checked)
+        .map(
+          (selectedGroupType: CheckboxOption) => selectedGroupType.id as string
+        );
+      const selectedRoles = [
+        ...this.memberLevelOptions.filter(
+          (memberLevel: CheckboxOption) => memberLevel.checked
+        ),
+        ...this.officerRolesOptions.filter(
+          (officerRole: CheckboxOption) => officerRole.checked
+        ),
+      ].map((selectedRole: CheckboxOption) => {
+        return {
+          roleId: selectedRole.id as string,
+        };
+      });
+      const configFieldValue: ConfigFieldValue = {
+        name: form[0].get('groupType')?.value,
+        description: form[0].get('description')?.value,
+        businessRule: {
+          rosterType: form[0].get('rosterType')?.value,
+          allowEdit: this.isSettingSelectedByName(Settings.ALLOW_EDIT),
+          allowRoster: this.isSettingSelectedByName(Settings.ALLOW_ROSTERS),
+          allowAlternateVoting: this.isSettingSelectedByName(
+            Settings.ALLOW_ALTERNATE_VOTING
+          ),
+          allowDelete: this.isSettingSelectedByName(Settings.ALLOW_DELETE),
+          allowSubGroup: this.isSettingSelectedByName(
+            Settings.ALLOW_SUB_GROUPS
+          ),
+          hasClassification: this.isSettingSelectedByName(
+            Settings.HAS_CLASSIFICATION
+          ),
+          allowedGroupType: selectedGroupTypes,
+          isRootGroup:
+            form[0].get('isRootGroup')?.value ===
+            this.isRootGroupOptions[0].label,
+        },
+      };
+      if (
+        form[0].get('isRootGroup')?.value === this.isRootGroupOptions[0].label
+      )
+        configFieldValue.hierarchy = 0;
+      const createGroupTypePayload: CreateGroupTypeRequestPayload = {
+        payload: {
+          appId: this.appId,
+          roles: selectedRoles,
+          configFieldName: 'group_type',
+          configFieldValue: JSON.stringify(configFieldValue),
+        },
+      };
+      this.tenantAppService
+        .createGroupType(createGroupTypePayload)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (response: CreateGroupTypeResponse) => {
+            if (response.status) {
+              const { appId, roles, configFieldName } =
+                createGroupTypePayload.payload;
+              const configFieldValue = JSON.parse(
+                createGroupTypePayload.payload.configFieldValue
+              );
+              this.tenantAppService.setNewlyCreatedGroupTypeInfo({
+                appId,
+                roles,
+                configFieldName,
+                configFieldValue,
+              });
+              this.submitFormResponse.emit(response);
+            }
+          },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          error: (error: any) => {
+            this.sharedService.handleErrors(
+              error,
+              this.createGroupTypeScreenTexts.errors
+            );
+          },
+        });
+    }
+  }
+  /**
+   * Emits form cancel event.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  onFormCancel(): void {
+    this.formCancel.emit();
+  }
+  /**
+   * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+   * @memberof CreateModifyGroupTypeComponent
+   */
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+}

package/src/lib/components/create-modify-role/create-modify-role.component.html

@@ -0,0 +1,15 @@
+<ieeesa-dynamic-form
+  *ngIf="createRoleFormGroup"
+  class="ieeesa-create-role-form"
+  [leftButtonLabel]="leftButtonLabel"
+  [rightButtonLabel]="rightButtonLabel"
+  [isLegendVisible]="false"
+  [colWidth]="colWidth"
+  [actionButtonAlign]="actionButtonAlign"
+  [formGroups]="createRoleFormGroup"
+  [isLeftButtonNeeded]="true"
+  (formSubmit)="onCreateModifyRoleFormSubmit($event)"
+  (formChange)="onCreateModifyRoleFormChange($event)"
+  (formLeftButtonClicked)="onFormCancel()"
+  (formGroupsReference)="getCreateModifyRoleFormGroupRef($event)"
+></ieeesa-dynamic-form>

package/src/lib/components/create-modify-role/create-modify-role.component.scss

@@ -0,0 +1,83 @@
+@import "styles.scss";
+$ieeesa-desktop-width90: 90%;
+$ieeesa-mobile-width: 100%;
+.ieeesa-modal-dialog.ieeesa-create-modify-role {
+  width: 40vw !important;
+  .mat-mdc-dialog-container {
+    box-shadow: none;
+  }
+  .mat-mdc-dialog-surface {
+    border-radius: 0;
+    margin: 1em 0 1em;
+  }
+  .ieeesa-modal {
+    box-shadow: $ieeesa-box-shadow-8;
+    padding-bottom: 0.5em;
+    .mat-mdc-dialog-content {
+      padding: 0.5em 1em 0.75em 1em !important;
+    }
+    .ieeesa-dynamic-form {
+      .mat-mdc-form-field {
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none !important;
+        }
+      }
+      &__actions {
+        flex-direction: row-reverse;
+        gap: 0.5em;
+        padding: 2em 1em 0.75em 1em;
+      }
+      &__form-field {
+        margin-bottom: 1em;
+        padding-top: 0 !important;
+        .ieeesa-select-field {
+          &__label-top {
+            min-height: 6.25em !important;
+          }
+        }
+        .ieeesa-select-field,
+        .ieeesa-input-field,
+        .ieeesa-text-area-field {
+          width: 70%;
+
+          .mat-mdc-form-field {
+            display: flex;
+            .mat-mdc-form-field-subscript-wrapper {
+              display: none !important;
+            }
+          }
+        }
+      }
+      .app-title,
+      .role-type {
+        &.ieeesa-dynamic-form {
+          &__form-field:has(.mat-mdc-input-element[readonly="true"]) {
+            padding-top: 0;
+            margin-bottom: 0;
+            @include textarea-readonly();
+          }
+        }
+      }
+    }
+  }
+  .ieeesa-input-field {
+    .mat-mdc-form-field {
+      display: flex;
+    }
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none !important;
+    }
+  }
+  @media (max-width: $ieeesa-mobile-min-width) {
+    .ieeesa-dynamic-form {
+      &__form-field {
+        width: $ieeesa-mobile-width;
+      }
+      .ieeesa-select-field,
+      .ieeesa-input-field,
+      .mat-mdc-form-field-flex {
+        width: $ieeesa-mobile-width !important;
+      }
+    }
+  }
+}