@flusys/ng-auth 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-auth-user-list.component-Bew7gz-H.mjs

@@ -0,0 +1,1046 @@
+import { AUTH_USER_DETAIL_CONFIG, AUTH_USER_LIST_EXTENSION, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent } 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, computed, inject, signal } from "@angular/core";
+import { APP_CONFIG, isCompanyFeatureEnabled } from "@flusys/ng-core";
+import { Router } from "@angular/router";
+import { HasPermissionDirective, TranslatePipe, TranslateService, USER_PERMISSIONS } from "@flusys/ng-shared";
+import { NgTemplateOutlet } from "@angular/common";
+import { CardComponent, ConfirmationService, DialogComponent, FButtonDirective, IconFieldComponent, InputIconComponent, InputTextDirective, MessageService, TableComponent, TagComponent, TooltipDirective, UiIconComponent } from "@flusys/ng-ui";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+var UserListComponent = class UserListComponent {
+	USER_PERMISSIONS = USER_PERMISSIONS;
+	router = inject(Router);
+	appConfig = inject(APP_CONFIG);
+	messageService = inject(MessageService);
+	confirmationService = inject(ConfirmationService);
+	userService = inject(UserApiService);
+	userListExtension = inject(AUTH_USER_LIST_EXTENSION, { optional: true });
+	userDetailConfig = inject(AUTH_USER_DETAIL_CONFIG, { optional: true });
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	users = this.userService.data;
+	isLoading = this.userService.isLoading;
+	total = this.userService.total;
+	companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : /* istanbul ignore next */ []);
+	extraColumns = computed(() => {
+		if (!this.userListExtension) return [];
+		return sortByOrder(this.userListExtension.getExtraColumns());
+	}, ...ngDevMode ? [{ debugName: "extraColumns" }] : /* istanbul ignore next */ []);
+	extraActions = computed(() => {
+		if (!this.userListExtension) return [];
+		return sortByOrder(this.userListExtension.getExtraActions());
+	}, ...ngDevMode ? [{ debugName: "extraActions" }] : /* istanbul ignore next */ []);
+	hasUserDetailView = computed(() => !!this.userDetailConfig, ...ngDevMode ? [{ debugName: "hasUserDetailView" }] : /* istanbul ignore next */ []);
+	tableColspan = computed(() => 6 + this.extraColumns().length, ...ngDevMode ? [{ debugName: "tableColspan" }] : /* istanbul ignore next */ []);
+	showCompanyDialog = signal(false, ...ngDevMode ? [{ debugName: "showCompanyDialog" }] : /* istanbul ignore next */ []);
+	showBranchDialog = signal(false, ...ngDevMode ? [{ debugName: "showBranchDialog" }] : /* istanbul ignore next */ []);
+	showUserDetailDialog = signal(false, ...ngDevMode ? [{ debugName: "showUserDetailDialog" }] : /* istanbul ignore next */ []);
+	selectedUser = signal(null, ...ngDevMode ? [{ debugName: "selectedUser" }] : /* istanbul ignore next */ []);
+	_searchTerm = signal("", ...ngDevMode ? [{ debugName: "_searchTerm" }] : /* istanbul ignore next */ []);
+	searchTerm = this._searchTerm.asReadonly();
+	getFieldValue(user, field) {
+		const parts = field.split(".");
+		let value = user;
+		for (const part of parts) {
+			if (value === null || value === void 0) return void 0;
+			value = value[part];
+		}
+		return value;
+	}
+	isActionVisible(action, user) {
+		return action.isVisible ? action.isVisible(user) : true;
+	}
+	isActionDisabled(action, user) {
+		return action.isDisabled ? action.isDisabled(user) : false;
+	}
+	onExtraAction(action, user) {
+		action.onClick(user);
+	}
+	onViewDetails(user) {
+		if (!this.userDetailConfig) return;
+		if (this.userDetailConfig.viewMode === "page") this.router.navigate(["/administration/users", user.id]);
+		else {
+			this.selectedUser.set(user);
+			this.showUserDetailDialog.set(true);
+		}
+	}
+	closeUserDetailDialog() {
+		this.showUserDetailDialog.set(false);
+		this.selectedUser.set(null);
+	}
+	loadUsers(page = 0, pageSize = 10) {
+		this.userService.fetchList(this._searchTerm(), { pagination: {
+			currentPage: page,
+			pageSize
+		} });
+	}
+	onLazyLoad(event) {
+		const first = event.first ?? 0;
+		const rows = event.rows ?? 10;
+		const page = Math.floor(first / rows);
+		this.loadUsers(page, rows);
+	}
+	onSearchChange(value) {
+		this._searchTerm.set(value);
+		this.loadUsers(0);
+	}
+	onCreate() {
+		this.router.navigate(["/administration/users/new"]);
+	}
+	onEdit(user) {
+		this.router.navigate(["/administration/users", user.id]);
+	}
+	onManageCompanyPermissions(user) {
+		this.openPermissionDialog(user, this.showCompanyDialog);
+	}
+	onManageBranchPermissions(user) {
+		this.openPermissionDialog(user, this.showBranchDialog);
+	}
+	openPermissionDialog(user, dialogSignal) {
+		this.selectedUser.set(user);
+		dialogSignal.set(true);
+	}
+	onDelete(user) {
+		this.confirmationService.confirm({
+			message: this.translate("shared.confirm.delete.item", { name: user.name }),
+			header: this.translate("administrative.user.delete.title"),
+			icon: "exclamation-triangle",
+			acceptButtonStyleClass: "p-button-danger",
+			accept: async () => {
+				try {
+					const response = await this.userService.delete({
+						id: user.id,
+						type: "delete"
+					});
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message
+					});
+					this.userService.reload();
+				} catch {}
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UserListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UserListComponent,
+		isStandalone: true,
+		selector: "lib-user-list",
+		ngImport: i0,
+		template: `
+    <f-card>
+      <ng-template #header>
+        <div
+          class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4"
+        >
+          <h2 class="text-xl font-semibold m-0">
+            {{ 'administrative.user.title' | translate }}
+          </h2>
+          <div class="flex items-center gap-3 w-full sm:w-auto">
+            <f-iconfield class="w-full sm:w-64">
+              <f-inputicon icon="search" />
+              <input
+                fInputText
+                type="text"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchChange($event)"
+                [placeholder]="'shared.search' | translate"
+              />
+            </f-iconfield>
+            <button
+              fButton
+              *hasPermission="USER_PERMISSIONS.CREATE"
+              (click)="onCreate()"
+            >
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+              <span pButtonLabel>{{ 'administrative.user.add' | translate }}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <div class="overflow-x-auto">
+        <f-table
+          [value]="users()"
+          [loading]="isLoading()"
+          [paginator]="total() > 0"
+          [rows]="10"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          [totalRecords]="total()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [scrollable]="true"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'administrative.user.name' | translate }}</th>
+              <th>{{ 'administrative.email.label' | translate }}</th>
+              <th>{{ 'administrative.phone.label' | translate }}</th>
+              <th>{{ 'administrative.user.email.verified' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              @for (col of extraColumns(); track col.key) {
+                <th
+                  [class]="col.styleClass ?? ''"
+                  [style.width]="col.width ?? 'auto'"
+                >
+                  {{ col.headerKey | translate: null : col.header }}
+                </th>
+              }
+              <th class="w-[180px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-user>
+            <tr>
+              <td>{{ user.name }}</td>
+              <td>{{ user.email }}</td>
+              <td>{{ user.phone || '-' }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    user.emailVerified
+                      ? ('shared.verified' | translate)
+                      : ('shared.unverified' | translate)
+                  "
+                  [severity]="user.emailVerified ? 'success' : 'warn'"
+                />
+              </td>
+              <td>
+                <f-tag
+                  [value]="
+                    user.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="user.isActive ? 'success' : 'danger'"
+                />
+              </td>
+              @for (col of extraColumns(); track col.key) {
+                <td [class]="col.styleClass ?? ''">
+                  @if (col.template) {
+                    <ng-container
+                      [ngTemplateOutlet]="col.template"
+                      [ngTemplateOutletContext]="{ $implicit: user }"
+                    />
+                  } @else if (col.field) {
+                    {{ getFieldValue(user, col.field) ?? '-' }}
+                  }
+                </td>
+              }
+              <td>
+                <div class="flex gap-1 flex-wrap">
+                  @if (hasUserDetailView()) {
+                    <button
+                      fButton
+                      [rounded]="true"
+                      [text]="true"
+                      severity="info"
+                      [fTooltip]="'shared.view.details' | translate"
+                      (click)="onViewDetails(user)"
+                    >
+                      <ui-icon pButtonIcon name="eye"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.UPDATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(user)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  @if (companyFeatureEnabled()) {
+                    <button
+                      fButton
+                      *hasPermission="USER_PERMISSIONS.UPDATE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="secondary"
+                      [fTooltip]="
+                        'administrative.permission.company.permissions'
+                          | translate
+                      "
+                      (click)="onManageCompanyPermissions(user)"
+                    >
+                      <ui-icon pButtonIcon name="building"></ui-icon>
+                    </button>
+                    <button
+                      fButton
+                      *hasPermission="USER_PERMISSIONS.UPDATE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="secondary"
+                      [fTooltip]="
+                        'administrative.permission.branch.permissions'
+                          | translate
+                      "
+                      (click)="onManageBranchPermissions(user)"
+                    >
+                      <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                    </button>
+                  }
+                  @for (action of extraActions(); track action.key) {
+                    @if (isActionVisible(action, user)) {
+                      <button
+                        fButton
+                        [rounded]="true"
+                        [text]="true"
+                        [severity]="action.severity ?? 'secondary'"
+                        [fTooltip]="
+                          action.labelKey | translate: null : action.label
+                        "
+                        [disabled]="isActionDisabled(action, user)"
+                        (click)="onExtraAction(action, user)"
+                      >
+                        <ui-icon pButtonIcon [name]="action.icon"></ui-icon>
+                      </button>
+                    }
+                  }
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.DELETE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="danger"
+                    [fTooltip]="'shared.delete' | translate"
+                    (click)="onDelete(user)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td [attr.colspan]="tableColspan()" class="text-center py-8">
+                {{ 'administrative.user.no.users' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </f-card>
+
+    @if (companyFeatureEnabled()) {
+      <lib-user-company-permission-dialog
+        [visible]="showCompanyDialog()"
+        [user]="selectedUser()"
+        (closed)="showCompanyDialog.set(false)"
+        (permissionsChanged)="loadUsers()"
+      />
+
+      <lib-user-branch-permission-dialog
+        [visible]="showBranchDialog()"
+        [user]="selectedUser()"
+        (closed)="showBranchDialog.set(false)"
+        (permissionsChanged)="loadUsers()"
+      />
+    }
+
+    @if (hasUserDetailView() && showUserDetailDialog()) {
+      <f-dialog
+        [header]="'administrative.user.details' | translate"
+        [visible]="showUserDetailDialog()"
+        [modal]="true"
+        [style]="{ width: userDetailConfig?.width ?? '600px' }"
+        [draggable]="false"
+        [resizable]="false"
+        (onHide)="closeUserDetailDialog()"
+      >
+        @if (selectedUser(); as user) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.user.name' | translate
+              }}</label>
+              <span class="text-color">{{ user.name }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.email.label' | translate
+              }}</label>
+              <span class="text-color">{{ user.email }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.phone.label' | translate
+              }}</label>
+              <span class="text-color">{{ user.phone || '-' }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'shared.status' | translate
+              }}</label>
+              <f-tag
+                [value]="
+                  user.isActive
+                    ? ('shared.active' | translate)
+                    : ('shared.inactive' | translate)
+                "
+                [severity]="user.isActive ? 'success' : 'danger'"
+              />
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.user.email.verified' | translate
+              }}</label>
+              <f-tag
+                [value]="
+                  user.emailVerified
+                    ? ('shared.verified' | translate)
+                    : ('shared.unverified' | translate)
+                "
+                [severity]="user.emailVerified ? 'success' : 'warn'"
+              />
+            </div>
+            @for (col of extraColumns(); track col.key) {
+              <div class="flex flex-col gap-2">
+                <label class="font-medium text-muted-color">{{
+                  col.headerKey | translate: null : col.header
+                }}</label>
+                <span class="text-color">{{
+                  getFieldValue(user, col.field ?? col.key) ?? '-'
+                }}</span>
+              </div>
+            }
+          </div>
+          <div class="flex justify-end gap-2 mt-6">
+            @if (userDetailConfig?.allowEdit) {
+              <button
+                fButton
+                (click)="onEdit(user); closeUserDetailDialog()"
+              >
+                <ui-icon pButtonIcon name="pencil"></ui-icon>
+                <span pButtonLabel>{{ 'shared.edit' | translate }}</span>
+              </button>
+            }
+            <button
+              fButton
+              severity="secondary"
+              [outlined]="true"
+              (click)="closeUserDetailDialog()"
+            >
+              <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+            </button>
+          </div>
+        }
+      </f-dialog>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: CardComponent,
+				selector: "f-card",
+				inputs: [
+					"header",
+					"subheader",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "component",
+				type: DialogComponent,
+				selector: "f-dialog",
+				inputs: [
+					"header",
+					"visible",
+					"modal",
+					"closable",
+					"closeOnEscape",
+					"dismissableMask",
+					"resizable",
+					"draggable",
+					"maximizable",
+					"blockScroll",
+					"returnFocusOnClose",
+					"position",
+					"style",
+					"styleClass",
+					"breakpoints"
+				],
+				outputs: [
+					"visibleChange",
+					"onShow",
+					"onHide",
+					"onMaximize"
+				]
+			},
+			{
+				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: "component",
+				type: IconFieldComponent,
+				selector: "f-iconfield",
+				inputs: ["iconPosition", "styleClass"]
+			},
+			{
+				kind: "component",
+				type: InputIconComponent,
+				selector: "f-inputicon",
+				inputs: [
+					"icon",
+					"position",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: TableComponent,
+				selector: "f-table",
+				inputs: [
+					"value",
+					"lazy",
+					"loading",
+					"rows",
+					"totalRecords",
+					"rowHover",
+					"dataKey",
+					"scrollable",
+					"scrollHeight",
+					"paginator",
+					"first",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"tableStyle",
+					"styleClass",
+					"globalFilterFields",
+					"filterDelay",
+					"responsiveLayout",
+					"selectionMode",
+					"sortMode",
+					"rowExpandMode",
+					"resizableColumns",
+					"rowStyleClass",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"expandedRowKeys",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"expandedRowKeysChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onRowSelect",
+					"onRowUnselect",
+					"onSelectAllChange",
+					"onRowExpand",
+					"onRowCollapse",
+					"onColResize",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "component",
+				type: UserCompanyPermissionDialogComponent,
+				selector: "lib-user-company-permission-dialog",
+				inputs: ["visible", "user"],
+				outputs: ["closed", "permissionsChanged"]
+			},
+			{
+				kind: "component",
+				type: UserBranchPermissionDialogComponent,
+				selector: "lib-user-branch-permission-dialog",
+				inputs: ["visible", "user"],
+				outputs: ["closed", "permissionsChanged"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UserListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-user-list",
+			imports: [
+				NgTemplateOutlet,
+				FormsModule,
+				CardComponent,
+				DialogComponent,
+				FButtonDirective,
+				IconFieldComponent,
+				InputIconComponent,
+				InputTextDirective,
+				TableComponent,
+				TagComponent,
+				TooltipDirective,
+				UiIconComponent,
+				HasPermissionDirective,
+				TranslatePipe,
+				UserCompanyPermissionDialogComponent,
+				UserBranchPermissionDialogComponent
+			],
+			template: `
+    <f-card>
+      <ng-template #header>
+        <div
+          class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4"
+        >
+          <h2 class="text-xl font-semibold m-0">
+            {{ 'administrative.user.title' | translate }}
+          </h2>
+          <div class="flex items-center gap-3 w-full sm:w-auto">
+            <f-iconfield class="w-full sm:w-64">
+              <f-inputicon icon="search" />
+              <input
+                fInputText
+                type="text"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchChange($event)"
+                [placeholder]="'shared.search' | translate"
+              />
+            </f-iconfield>
+            <button
+              fButton
+              *hasPermission="USER_PERMISSIONS.CREATE"
+              (click)="onCreate()"
+            >
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+              <span pButtonLabel>{{ 'administrative.user.add' | translate }}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <div class="overflow-x-auto">
+        <f-table
+          [value]="users()"
+          [loading]="isLoading()"
+          [paginator]="total() > 0"
+          [rows]="10"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          [totalRecords]="total()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [scrollable]="true"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'administrative.user.name' | translate }}</th>
+              <th>{{ 'administrative.email.label' | translate }}</th>
+              <th>{{ 'administrative.phone.label' | translate }}</th>
+              <th>{{ 'administrative.user.email.verified' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              @for (col of extraColumns(); track col.key) {
+                <th
+                  [class]="col.styleClass ?? ''"
+                  [style.width]="col.width ?? 'auto'"
+                >
+                  {{ col.headerKey | translate: null : col.header }}
+                </th>
+              }
+              <th class="w-[180px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-user>
+            <tr>
+              <td>{{ user.name }}</td>
+              <td>{{ user.email }}</td>
+              <td>{{ user.phone || '-' }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    user.emailVerified
+                      ? ('shared.verified' | translate)
+                      : ('shared.unverified' | translate)
+                  "
+                  [severity]="user.emailVerified ? 'success' : 'warn'"
+                />
+              </td>
+              <td>
+                <f-tag
+                  [value]="
+                    user.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="user.isActive ? 'success' : 'danger'"
+                />
+              </td>
+              @for (col of extraColumns(); track col.key) {
+                <td [class]="col.styleClass ?? ''">
+                  @if (col.template) {
+                    <ng-container
+                      [ngTemplateOutlet]="col.template"
+                      [ngTemplateOutletContext]="{ $implicit: user }"
+                    />
+                  } @else if (col.field) {
+                    {{ getFieldValue(user, col.field) ?? '-' }}
+                  }
+                </td>
+              }
+              <td>
+                <div class="flex gap-1 flex-wrap">
+                  @if (hasUserDetailView()) {
+                    <button
+                      fButton
+                      [rounded]="true"
+                      [text]="true"
+                      severity="info"
+                      [fTooltip]="'shared.view.details' | translate"
+                      (click)="onViewDetails(user)"
+                    >
+                      <ui-icon pButtonIcon name="eye"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.UPDATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(user)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  @if (companyFeatureEnabled()) {
+                    <button
+                      fButton
+                      *hasPermission="USER_PERMISSIONS.UPDATE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="secondary"
+                      [fTooltip]="
+                        'administrative.permission.company.permissions'
+                          | translate
+                      "
+                      (click)="onManageCompanyPermissions(user)"
+                    >
+                      <ui-icon pButtonIcon name="building"></ui-icon>
+                    </button>
+                    <button
+                      fButton
+                      *hasPermission="USER_PERMISSIONS.UPDATE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="secondary"
+                      [fTooltip]="
+                        'administrative.permission.branch.permissions'
+                          | translate
+                      "
+                      (click)="onManageBranchPermissions(user)"
+                    >
+                      <ui-icon pButtonIcon name="sitemap"></ui-icon>
+                    </button>
+                  }
+                  @for (action of extraActions(); track action.key) {
+                    @if (isActionVisible(action, user)) {
+                      <button
+                        fButton
+                        [rounded]="true"
+                        [text]="true"
+                        [severity]="action.severity ?? 'secondary'"
+                        [fTooltip]="
+                          action.labelKey | translate: null : action.label
+                        "
+                        [disabled]="isActionDisabled(action, user)"
+                        (click)="onExtraAction(action, user)"
+                      >
+                        <ui-icon pButtonIcon [name]="action.icon"></ui-icon>
+                      </button>
+                    }
+                  }
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.DELETE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="danger"
+                    [fTooltip]="'shared.delete' | translate"
+                    (click)="onDelete(user)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td [attr.colspan]="tableColspan()" class="text-center py-8">
+                {{ 'administrative.user.no.users' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </f-card>
+
+    @if (companyFeatureEnabled()) {
+      <lib-user-company-permission-dialog
+        [visible]="showCompanyDialog()"
+        [user]="selectedUser()"
+        (closed)="showCompanyDialog.set(false)"
+        (permissionsChanged)="loadUsers()"
+      />
+
+      <lib-user-branch-permission-dialog
+        [visible]="showBranchDialog()"
+        [user]="selectedUser()"
+        (closed)="showBranchDialog.set(false)"
+        (permissionsChanged)="loadUsers()"
+      />
+    }
+
+    @if (hasUserDetailView() && showUserDetailDialog()) {
+      <f-dialog
+        [header]="'administrative.user.details' | translate"
+        [visible]="showUserDetailDialog()"
+        [modal]="true"
+        [style]="{ width: userDetailConfig?.width ?? '600px' }"
+        [draggable]="false"
+        [resizable]="false"
+        (onHide)="closeUserDetailDialog()"
+      >
+        @if (selectedUser(); as user) {
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.user.name' | translate
+              }}</label>
+              <span class="text-color">{{ user.name }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.email.label' | translate
+              }}</label>
+              <span class="text-color">{{ user.email }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.phone.label' | translate
+              }}</label>
+              <span class="text-color">{{ user.phone || '-' }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'shared.status' | translate
+              }}</label>
+              <f-tag
+                [value]="
+                  user.isActive
+                    ? ('shared.active' | translate)
+                    : ('shared.inactive' | translate)
+                "
+                [severity]="user.isActive ? 'success' : 'danger'"
+              />
+            </div>
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-muted-color">{{
+                'administrative.user.email.verified' | translate
+              }}</label>
+              <f-tag
+                [value]="
+                  user.emailVerified
+                    ? ('shared.verified' | translate)
+                    : ('shared.unverified' | translate)
+                "
+                [severity]="user.emailVerified ? 'success' : 'warn'"
+              />
+            </div>
+            @for (col of extraColumns(); track col.key) {
+              <div class="flex flex-col gap-2">
+                <label class="font-medium text-muted-color">{{
+                  col.headerKey | translate: null : col.header
+                }}</label>
+                <span class="text-color">{{
+                  getFieldValue(user, col.field ?? col.key) ?? '-'
+                }}</span>
+              </div>
+            }
+          </div>
+          <div class="flex justify-end gap-2 mt-6">
+            @if (userDetailConfig?.allowEdit) {
+              <button
+                fButton
+                (click)="onEdit(user); closeUserDetailDialog()"
+              >
+                <ui-icon pButtonIcon name="pencil"></ui-icon>
+                <span pButtonLabel>{{ 'shared.edit' | translate }}</span>
+              </button>
+            }
+            <button
+              fButton
+              severity="secondary"
+              [outlined]="true"
+              (click)="closeUserDetailDialog()"
+            >
+              <span pButtonLabel>{{ 'shared.close' | translate }}</span>
+            </button>
+          </div>
+        }
+      </f-dialog>
+    }
+  `
+		}]
+	}]
+});
+export { UserListComponent };
+
+//# sourceMappingURL=flusys-ng-auth-user-list.component-Bew7gz-H.mjs.map