@flusys/ng-auth 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-auth-user-form.component-CM9UYc0q.mjs

@@ -0,0 +1,1171 @@
+import { AUTH_USER_FORM_EXTENSION, AuthStateService, PasswordPolicyService, USER_FORM_FIELD_CONTEXT, UserApiService, UserPermissionApiService } from "./flusys-ng-auth.mjs";
+import { t as sortByOrder } from "./flusys-ng-auth-extension-order.util-2XWSLqii.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Injector, computed, effect, inject, signal } from "@angular/core";
+import { APP_CONFIG, isCompanyFeatureEnabled } from "@flusys/ng-core";
+import { finalize, firstValueFrom } from "rxjs";
+import { ActivatedRoute, Router } from "@angular/router";
+import { TranslatePipe, TranslateService } from "@flusys/ng-shared";
+import { NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import { CardComponent, CheckboxComponent, FButtonDirective, InputTextDirective, MessageService, PasswordComponent, SelectComponent, SkeletonComponent, TextareaDirective, UiIconComponent } from "@flusys/ng-ui";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { FormField, email, form, required } from "@angular/forms/signals";
+var UserFormComponent = class UserFormComponent {
+	destroyRef = inject(DestroyRef);
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	appConfig = inject(APP_CONFIG);
+	messageService = inject(MessageService);
+	userService = inject(UserApiService);
+	permissionService = inject(UserPermissionApiService);
+	authState = inject(AuthStateService);
+	passwordPolicy = inject(PasswordPolicyService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	userFormExtension = inject(AUTH_USER_FORM_EXTENSION, { optional: true });
+	parentInjector = inject(Injector);
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	routeParams = toSignal(this.route.paramMap);
+	userLoadTriggered = false;
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	existingUser = signal(null, ...ngDevMode ? [{ debugName: "existingUser" }] : /* istanbul ignore next */ []);
+	isEditMode = computed(() => !!this.existingUser(), ...ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []);
+	companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : /* istanbul ignore next */ []);
+	currentCompanyName = computed(() => this.authState.companyName(), ...ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []);
+	currentBranchName = computed(() => this.authState.branchName(), ...ngDevMode ? [{ debugName: "currentBranchName" }] : /* istanbul ignore next */ []);
+	formModel = signal({
+		name: "",
+		email: "",
+		password: "",
+		phone: "",
+		isActive: true,
+		emailVerified: false
+	}, ...ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []);
+	formTree = form(this.formModel, (f) => {
+		required(f.name, { message: this.translate("shared.name.required") });
+		required(f.email, { message: this.translate("auth.validation.email.required") });
+		email(f.email, { message: this.translate("shared.invalid.email") });
+	});
+	isLoadingExtraFields = signal(false, ...ngDevMode ? [{ debugName: "isLoadingExtraFields" }] : /* istanbul ignore next */ []);
+	extraFieldsModel = signal({}, ...ngDevMode ? [{ debugName: "extraFieldsModel" }] : /* istanbul ignore next */ []);
+	originalExtraFieldsModel = signal({}, ...ngDevMode ? [{ debugName: "originalExtraFieldsModel" }] : /* istanbul ignore next */ []);
+	extraFields = computed(() => {
+		if (!this.userFormExtension?.getExtraFields) return [];
+		return sortByOrder(this.userFormExtension.getExtraFields());
+	}, ...ngDevMode ? [{ debugName: "extraFields" }] : /* istanbul ignore next */ []);
+	hasExtraFields = computed(() => this.extraFields().length > 0, ...ngDevMode ? [{ debugName: "hasExtraFields" }] : /* istanbul ignore next */ []);
+	extraFieldsValidationError = computed(() => {
+		if (!this.userFormExtension?.validateExtraFields) return null;
+		return this.userFormExtension.validateExtraFields(this.extraFieldsModel());
+	}, ...ngDevMode ? [{ debugName: "extraFieldsValidationError" }] : /* istanbul ignore next */ []);
+	isExtraFieldsDirty = computed(() => {
+		const current = this.extraFieldsModel();
+		const original = this.originalExtraFieldsModel();
+		return JSON.stringify(current) !== JSON.stringify(original);
+	}, ...ngDevMode ? [{ debugName: "isExtraFieldsDirty" }] : /* istanbul ignore next */ []);
+	updateExtraField(key, value) {
+		this.extraFieldsModel.update((model) => ({
+			...model,
+			[key]: value
+		}));
+	}
+	getExtraFieldValue(key) {
+		return this.extraFieldsModel()[key];
+	}
+	getFieldTemplateContext(field) {
+		return {
+			field,
+			value: this.extraFieldsModel()[field.key],
+			updateValue: (value) => this.updateExtraField(field.key, value)
+		};
+	}
+	fieldInjectors = /* @__PURE__ */ new Map();
+	getFieldInjector(field) {
+		const cached = this.fieldInjectors.get(field.key);
+		if (cached) {
+			cached.setField(field);
+			return cached.injector;
+		}
+		let currentField = field;
+		const extraFieldsModel = this.extraFieldsModel;
+		const injector = Injector.create({
+			providers: [{
+				provide: USER_FORM_FIELD_CONTEXT,
+				useValue: {
+					get field() {
+						return currentField;
+					},
+					get value() {
+						return extraFieldsModel()[currentField.key];
+					},
+					updateValue: (value) => this.updateExtraField(currentField.key, value)
+				}
+			}],
+			parent: field.injector ?? this.parentInjector
+		});
+		this.fieldInjectors.set(field.key, {
+			injector,
+			setField: (next) => currentField = next
+		});
+		return injector;
+	}
+	passwordError = computed(() => this.passwordPolicy.validate(this.formModel().password), ...ngDevMode ? [{ debugName: "passwordError" }] : /* istanbul ignore next */ []);
+	isFormValid = computed(() => {
+		const model = this.formModel();
+		const isEdit = this.isEditMode();
+		const nameValid = model.name.trim().length > 0;
+		const emailValid = model.email.includes("@");
+		const passwordValid = model.password ? !this.passwordError() : isEdit;
+		return nameValid && emailValid && passwordValid;
+	}, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const params = this.routeParams();
+			if (!params || this.userLoadTriggered) return;
+			this.userLoadTriggered = true;
+			const id = params.get("id");
+			if (id && id !== "new") this.loadUser(id);
+		});
+	}
+	async loadUser(id) {
+		this.isLoading.set(true);
+		try {
+			const response = await this.userService.findById(id);
+			if (response.success && response.data) {
+				this.existingUser.set(response.data);
+				this.formModel.set(this.toFormModel(response.data));
+				this.loadExtraFields(id);
+			}
+		} catch {
+			this.router.navigate(["/administration/users"]);
+		} finally {
+			this.isLoading.set(false);
+		}
+	}
+	loadExtraFields(userId) {
+		if (!this.userFormExtension?.getExtraFieldValues) return;
+		this.isLoadingExtraFields.set(true);
+		this.userFormExtension.getExtraFieldValues(userId).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingExtraFields.set(false))).subscribe({
+			next: (values) => {
+				this.extraFieldsModel.set(values);
+				this.originalExtraFieldsModel.set(values);
+			},
+			error: () => {
+				const defaults = {};
+				for (const field of this.extraFields()) if (field.key) defaults[field.key] = void 0;
+				this.extraFieldsModel.set(defaults);
+				this.originalExtraFieldsModel.set(defaults);
+			}
+		});
+	}
+	toFormModel(user) {
+		return {
+			name: user.name,
+			email: user.email,
+			password: "",
+			phone: user.phone || "",
+			isActive: user.isActive,
+			emailVerified: user.emailVerified
+		};
+	}
+	onSubmit() {
+		if (!this.isFormValid()) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.validation.error"),
+				detail: this.translate("shared.fill.required.fields")
+			});
+			return;
+		}
+		this.isLoading.set(true);
+		if (this.isEditMode() && this.existingUser()) this.updateUser();
+		else this.createUser();
+	}
+	async updateUser() {
+		const model = this.formModel();
+		const userId = this.existingUser().id;
+		const updateData = {
+			id: userId,
+			name: model.name,
+			email: model.email,
+			phone: model.phone || void 0,
+			isActive: model.isActive,
+			emailVerified: model.emailVerified
+		};
+		if (model.password) updateData.password = model.password;
+		try {
+			const [userResponse] = await Promise.all([this.userService.update(updateData), this.isExtraFieldsDirty() && this.userFormExtension?.saveExtraFieldValues ? firstValueFrom(this.userFormExtension.saveExtraFieldValues(userId, this.extraFieldsModel())) : Promise.resolve(void 0)]);
+			this.onSaveSuccess(userResponse.messageKey ? this.translate(userResponse.messageKey, userResponse.messageVariables) : userResponse.message);
+		} finally {
+			this.isLoading.set(false);
+		}
+	}
+	async createUser() {
+		const model = this.formModel();
+		const createData = {
+			name: model.name,
+			email: model.email,
+			password: model.password,
+			phone: model.phone || void 0,
+			isActive: model.isActive,
+			emailVerified: model.emailVerified
+		};
+		try {
+			const response = await this.userService.insert(createData);
+			if (response.success && response.data) {
+				const userId = response.data.id;
+				if (this.companyFeatureEnabled()) this.assignUserToCompanyAndBranch(userId);
+				this.saveExtraFieldsForNewUser(userId);
+			}
+			this.onSaveSuccess(response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message);
+		} finally {
+			this.isLoading.set(false);
+		}
+	}
+	saveExtraFieldsForNewUser(userId) {
+		const extraFields = this.extraFieldsModel();
+		if (!(Object.keys(extraFields).length > 0 && Object.values(extraFields).some((v) => v !== void 0 && v !== "")) || !this.userFormExtension?.saveExtraFieldValues) return;
+		this.userFormExtension.saveExtraFieldValues(userId, extraFields).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({ error: () => {} });
+	}
+	onSaveSuccess(message) {
+		this.messageService.add({
+			severity: "success",
+			summary: this.translate("shared.success"),
+			detail: message
+		});
+		this.router.navigate(["/administration/users"]);
+	}
+	assignUserToCompanyAndBranch(userId) {
+		const company = this.authState.company();
+		const branch = this.authState.branch();
+		if (!company) return;
+		this.permissionService.assignUserToCompany(userId, company.id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => {
+				if (branch) this.permissionService.assignUserToBranch(userId, branch.id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({ error: () => {} });
+			},
+			error: () => {}
+		});
+	}
+	onCancel() {
+		this.router.navigate(["/administration/users"]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UserFormComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UserFormComponent,
+		isStandalone: true,
+		selector: "lib-user-form",
+		ngImport: i0,
+		template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('administrative.user.edit' | translate)
+                : ('administrative.user.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (ngSubmit)="onSubmit()"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'administrative.user.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="formTree.name"
+            [placeholder]="'administrative.user.name.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="email" class="font-medium"
+            >{{ 'administrative.email.label' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="email"
+            type="email"
+            [formField]="formTree.email"
+            [placeholder]="'auth.email.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="password" class="font-medium">
+            {{ 'administrative.user.password' | translate }}
+            {{
+              isEditMode()
+                ? ('administrative.user.password.optional' | translate)
+                : '*'
+            }}
+          </label>
+          <f-password
+            [inputId]="'password'"
+            [formField]="formTree.password"
+            [placeholder]="
+              'administrative.user.password.placeholder' | translate
+            "
+            autocomplete="new-password"
+          />
+          @if (passwordError()) {
+            <small class="text-danger">{{ passwordError() }}</small>
+          }
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="phone" class="font-medium">{{
+            'administrative.phone.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="phone"
+            [formField]="formTree.phone"
+            [placeholder]="'auth.phone.placeholder' | translate"
+          />
+        </div>
+
+        @if (hasExtraFields()) {
+          <div class="md:col-span-2 border-t border-surface pt-4 mt-2">
+            <div class="text-sm font-medium text-muted-color mb-4">
+              <ui-icon name="sliders-h" class="mr-2"></ui-icon
+              >{{ 'profile.additional.info' | translate }}
+            </div>
+            @if (isLoadingExtraFields()) {
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <f-skeleton height="2.5rem" />
+                <f-skeleton height="2.5rem" />
+              </div>
+            } @else {
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @for (field of extraFields(); track field.key) {
+                  <div class="flex flex-col gap-2">
+                    <label [for]="field.key" class="font-medium text-color">
+                      {{ field.labelKey | translate: null : field.label
+                      }}{{ field.required ? ' *' : '' }}
+                    </label>
+                    @if (field.component) {
+                      <ng-container
+                        [ngComponentOutlet]="field.component"
+                        [ngComponentOutletInjector]="getFieldInjector(field)"
+                      />
+                    } @else if (field.template) {
+                      <ng-container
+                        [ngTemplateOutlet]="field.template"
+                        [ngTemplateOutletContext]="
+                          getFieldTemplateContext(field)
+                        "
+                      />
+                    } @else {
+                      @switch (field.type) {
+                        @case ('text') {
+                          <input
+                            fInputText
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                        @case ('number') {
+                          <input
+                            fInputText
+                            type="number"
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).valueAsNumber
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                        @case ('textarea') {
+                          <textarea
+                            fTextarea
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                            rows="3"
+                          ></textarea>
+                        }
+                        @case ('select') {
+                          <f-select
+                            [id]="field.key"
+                            class="w-full"
+                            [options]="field.options ?? []"
+                            optionValue="value"
+                            [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                            [ngModelOptions]="{ standalone: true }"
+                            (ngModelChange)="
+                              updateExtraField(field.key, $event)
+                            "
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      ('shared.select' | translate)
+                            "
+                          >
+                            <ng-template #item let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                            <ng-template #selectedItem let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                          </f-select>
+                        }
+                        @case ('checkbox') {
+                          <f-checkbox
+                            [inputId]="field.key"
+                            [checked]="
+                              $any(getExtraFieldValue(field.key) ?? false)
+                            "
+                            (onChange)="
+                              updateExtraField(field.key, $event.checked)
+                            "
+                            [label]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      (field.labelKey
+                                        | translate: null : field.label)
+                            "
+                          />
+                        }
+                        @case ('date') {
+                          <input
+                            fInputText
+                            type="date"
+                            [id]="field.key"
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                      }
+                    }
+                  </div>
+                }
+              </div>
+              @if (extraFieldsValidationError()) {
+                <small class="text-danger block mt-2">{{
+                  extraFieldsValidationError()
+                }}</small>
+              }
+            }
+          </div>
+        }
+
+        <div class="flex items-center gap-6 md:col-span-2 pt-4">
+          <f-checkbox
+            [formField]="formTree.isActive"
+            [label]="'shared.active' | translate"
+          />
+          <f-checkbox
+            [formField]="formTree.emailVerified"
+            [label]="'administrative.user.email.verified' | translate"
+          />
+        </div>
+
+        @if (companyFeatureEnabled() && !isEditMode()) {
+          <div
+            class="md:col-span-2 p-3 bg-primary/10 rounded-lg border border-primary/20"
+          >
+            <div class="flex items-center gap-2 text-primary">
+              <ui-icon name="info-circle"></ui-icon>
+              <span class="text-sm">
+                {{ 'administrative.user.auto.assign.to' | translate }}
+                <strong>{{ currentCompanyName() }}</strong>
+                @if (currentBranchName()) {
+                  / <strong>{{ currentBranchName() }}</strong>
+                }
+              </span>
+            </div>
+          </div>
+        }
+
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+            }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CardComponent,
+				selector: "f-card",
+				inputs: [
+					"header",
+					"subheader",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: PasswordComponent,
+				selector: "f-password",
+				inputs: [
+					"toggleMask",
+					"feedback",
+					"disabled",
+					"placeholder",
+					"inputId",
+					"invalid",
+					"touched",
+					"inputStyleClass",
+					"styleClass",
+					"style",
+					"ariaDescribedby",
+					"autocomplete",
+					"variant",
+					"size",
+					"fluid",
+					"appendTo",
+					"promptLabel",
+					"weakLabel",
+					"mediumLabel",
+					"strongLabel",
+					"mediumRegex",
+					"strongRegex"
+				],
+				outputs: ["onBlur", "onFocus"]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: SkeletonComponent,
+				selector: "f-skeleton",
+				inputs: [
+					"width",
+					"height",
+					"size",
+					"borderRadius",
+					"shape",
+					"animation",
+					"styleClass"
+				]
+			},
+			{
+				kind: "directive",
+				type: TextareaDirective,
+				selector: "[fTextarea]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"fluid",
+					"autoResize"
+				],
+				outputs: ["onResize"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UserFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-user-form",
+			imports: [
+				CardComponent,
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				PasswordComponent,
+				SelectComponent,
+				SkeletonComponent,
+				TextareaDirective,
+				UiIconComponent,
+				FormsModule,
+				NgComponentOutlet,
+				NgTemplateOutlet,
+				FormField,
+				TranslatePipe
+			],
+			template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('administrative.user.edit' | translate)
+                : ('administrative.user.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (ngSubmit)="onSubmit()"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'administrative.user.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="formTree.name"
+            [placeholder]="'administrative.user.name.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="email" class="font-medium"
+            >{{ 'administrative.email.label' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="email"
+            type="email"
+            [formField]="formTree.email"
+            [placeholder]="'auth.email.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="password" class="font-medium">
+            {{ 'administrative.user.password' | translate }}
+            {{
+              isEditMode()
+                ? ('administrative.user.password.optional' | translate)
+                : '*'
+            }}
+          </label>
+          <f-password
+            [inputId]="'password'"
+            [formField]="formTree.password"
+            [placeholder]="
+              'administrative.user.password.placeholder' | translate
+            "
+            autocomplete="new-password"
+          />
+          @if (passwordError()) {
+            <small class="text-danger">{{ passwordError() }}</small>
+          }
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="phone" class="font-medium">{{
+            'administrative.phone.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="phone"
+            [formField]="formTree.phone"
+            [placeholder]="'auth.phone.placeholder' | translate"
+          />
+        </div>
+
+        @if (hasExtraFields()) {
+          <div class="md:col-span-2 border-t border-surface pt-4 mt-2">
+            <div class="text-sm font-medium text-muted-color mb-4">
+              <ui-icon name="sliders-h" class="mr-2"></ui-icon
+              >{{ 'profile.additional.info' | translate }}
+            </div>
+            @if (isLoadingExtraFields()) {
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <f-skeleton height="2.5rem" />
+                <f-skeleton height="2.5rem" />
+              </div>
+            } @else {
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @for (field of extraFields(); track field.key) {
+                  <div class="flex flex-col gap-2">
+                    <label [for]="field.key" class="font-medium text-color">
+                      {{ field.labelKey | translate: null : field.label
+                      }}{{ field.required ? ' *' : '' }}
+                    </label>
+                    @if (field.component) {
+                      <ng-container
+                        [ngComponentOutlet]="field.component"
+                        [ngComponentOutletInjector]="getFieldInjector(field)"
+                      />
+                    } @else if (field.template) {
+                      <ng-container
+                        [ngTemplateOutlet]="field.template"
+                        [ngTemplateOutletContext]="
+                          getFieldTemplateContext(field)
+                        "
+                      />
+                    } @else {
+                      @switch (field.type) {
+                        @case ('text') {
+                          <input
+                            fInputText
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                        @case ('number') {
+                          <input
+                            fInputText
+                            type="number"
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).valueAsNumber
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                        @case ('textarea') {
+                          <textarea
+                            fTextarea
+                            [id]="field.key"
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate: null : field.placeholder ?? ''
+                            "
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                            rows="3"
+                          ></textarea>
+                        }
+                        @case ('select') {
+                          <f-select
+                            [id]="field.key"
+                            class="w-full"
+                            [options]="field.options ?? []"
+                            optionValue="value"
+                            [ngModel]="getExtraFieldValue(field.key) ?? ''"
+                            [ngModelOptions]="{ standalone: true }"
+                            (ngModelChange)="
+                              updateExtraField(field.key, $event)
+                            "
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      ('shared.select' | translate)
+                            "
+                          >
+                            <ng-template #item let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                            <ng-template #selectedItem let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                          </f-select>
+                        }
+                        @case ('checkbox') {
+                          <f-checkbox
+                            [inputId]="field.key"
+                            [checked]="
+                              $any(getExtraFieldValue(field.key) ?? false)
+                            "
+                            (onChange)="
+                              updateExtraField(field.key, $event.checked)
+                            "
+                            [label]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      (field.labelKey
+                                        | translate: null : field.label)
+                            "
+                          />
+                        }
+                        @case ('date') {
+                          <input
+                            fInputText
+                            type="date"
+                            [id]="field.key"
+                            [value]="getExtraFieldValue(field.key) ?? ''"
+                            (input)="
+                              updateExtraField(
+                                field.key,
+                                $any($event.target).value
+                              )
+                            "
+                            class="w-full"
+                          />
+                        }
+                      }
+                    }
+                  </div>
+                }
+              </div>
+              @if (extraFieldsValidationError()) {
+                <small class="text-danger block mt-2">{{
+                  extraFieldsValidationError()
+                }}</small>
+              }
+            }
+          </div>
+        }
+
+        <div class="flex items-center gap-6 md:col-span-2 pt-4">
+          <f-checkbox
+            [formField]="formTree.isActive"
+            [label]="'shared.active' | translate"
+          />
+          <f-checkbox
+            [formField]="formTree.emailVerified"
+            [label]="'administrative.user.email.verified' | translate"
+          />
+        </div>
+
+        @if (companyFeatureEnabled() && !isEditMode()) {
+          <div
+            class="md:col-span-2 p-3 bg-primary/10 rounded-lg border border-primary/20"
+          >
+            <div class="flex items-center gap-2 text-primary">
+              <ui-icon name="info-circle"></ui-icon>
+              <span class="text-sm">
+                {{ 'administrative.user.auto.assign.to' | translate }}
+                <strong>{{ currentCompanyName() }}</strong>
+                @if (currentBranchName()) {
+                  / <strong>{{ currentBranchName() }}</strong>
+                }
+              </span>
+            </div>
+          </div>
+        }
+
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+            }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { UserFormComponent };
+
+//# sourceMappingURL=flusys-ng-auth-user-form.component-CM9UYc0q.mjs.map