@isoftdata/svelte-user-configuration 1.0.0

package/README.md

@@ -0,0 +1,29 @@
+# Svelte UserConfiguration
+
+## Install
+
+```sh
+npm i @isoftdata/svelte-user-configuration
+```
+
+## Props
+| Name | Type | Description | Default Value |
+|------|------|-------------|---------------|
+|      |      |             |               |
+|      |      |             |               |
+|      |      |             |               |
+
+## Slots
+* default - A brief description of the slot, if there is one
+
+## Events
+* exampleEvent - A brief description of the event, if there are any
+
+## Example
+```svelte
+<script lang="ts">
+	import UserConfiguration from '@isoftdata/svelte-user-configuration'
+</script>
+
+<UserConfiguration prop='foo' />
+```

package/dist/DeactivateUserModal.svelte

@@ -0,0 +1,46 @@
+<script>import { getContext, tick } from "svelte";
+import { klona } from "klona";
+import Modal from "@isoftdata/svelte-modal";
+import TextArea from "@isoftdata/svelte-textarea";
+let show = false;
+let userAccount;
+let lockNotes;
+let textarea;
+export let deactivateUser = void 0;
+export async function open(userAccountCtx) {
+  userAccount = klona(userAccountCtx);
+  lockNotes = userAccount.lockNotes;
+  await tick();
+  show = true;
+  await tick();
+  textarea?.select();
+}
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+</script>
+
+<Modal
+	title={translate('common:deactivate', 'Deactivate {{userName}}', { userName: userAccount?.name })}
+	confirmButtonText={translate('common:deactivate', 'Deactivate')}
+	confirmButtonColor="danger"
+	cancelButtonText={translate('common:close', 'Close')}
+	confirmButtonType="submit"
+	confirmButtonFormId="deactivateUserModalForm"
+	on:close={() => (show = false)}
+	bind:show
+>
+	<form
+		id="deactivateUserModalForm"
+		on:submit={e => {
+			e.preventDefault()
+			userAccount && deactivateUser ? deactivateUser({ id: userAccount.id, lockNotes }) : undefined
+		}}
+	>
+		<TextArea
+			bind:textarea
+			label={translate('configuration.user.accountInfo.lockNote', 'Lock Notes')}
+			labelClass="py-0 mb-2"
+			style="min-height:83px;"
+			bind:value={lockNotes}
+		/>
+	</form>
+</Modal>

package/dist/DeactivateUserModal.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { UserAccount } from './';
+declare const __propDef: {
+    props: {
+        deactivateUser?: ((user: {
+            id: UserAccount["id"];
+            lockNotes: UserAccount["lockNotes"];
+        }) => void | Promise<void>) | undefined;
+        open?: (userAccountCtx: UserAccount) => Promise<void>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeactivateUserModalProps = typeof __propDef.props;
+export type DeactivateUserModalEvents = typeof __propDef.events;
+export type DeactivateUserModalSlots = typeof __propDef.slots;
+export default class DeactivateUserModal extends SvelteComponent<DeactivateUserModalProps, DeactivateUserModalEvents, DeactivateUserModalSlots> {
+    get open(): (userAccountCtx: UserAccount) => Promise<void>;
+}
+export {};

package/dist/PasswordRecoveryModal.svelte

@@ -0,0 +1,58 @@
+<script>import { getContext } from "svelte";
+import Modal from "@isoftdata/svelte-modal";
+import Input from "@isoftdata/svelte-input";
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+export let sendPasswordRecoveryToken = void 0;
+let resetDate = void 0;
+let email = void 0;
+let show = false;
+export function open(passwordRecoveryEmail, lastResetDate) {
+  email = passwordRecoveryEmail;
+  resetDate = lastResetDate;
+  show = true;
+}
+</script>
+
+<Modal
+	bind:show
+	title={translate('configuration.user.accountInfo.passwordRecovery.header', 'Password Recovery')}
+	confirmButtonText={translate('configuration.user.accountInfo.passwordManagementModal.requestResetToken', 'Request Reset Token')}
+	confirmButtonIcon="check"
+	confirmButtonDisabled={!email}
+	on:close={() => (show = false)}
+	confirmButtonType="submit"
+	confirmButtonFormId="passwordRecoveryForm"
+>
+	<form
+		id="passwordRecoveryForm"
+		on:submit={async event => {
+			event.preventDefault()
+			try {
+				await sendPasswordRecoveryToken?.(email)
+				show = false
+			} catch (err) {
+				console.error(err)
+			}
+		}}
+	>
+		<div class="form-row">
+			<Input
+				label={translate('configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate', 'Last Password Set Date')}
+				value={resetDate?.toLocaleString() ?? ''}
+				labelParentClass="col-12 col-md-6 form-group mb-0"
+				readonly
+			/>
+			<Input
+				label={translate('configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail', 'Password Recovery Email')}
+				value={email ?? ''}
+				labelParentClass="col-12 col-md-6 form-group mb-0"
+				readonly
+			/>
+			{#if !email}
+				<div class="alert alert-danger mt-3 mb-0">
+					{translate('configuration.user.accountInfo.passwordRecovery.noRecoveryEmail', 'No recovery email has been set for this user.')}
+				</div>
+			{/if}
+		</div>
+	</form>
+</Modal>

package/dist/PasswordRecoveryModal.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        sendPasswordRecoveryToken?: ((email: string | undefined) => void | Promise<void>) | undefined;
+        open?: (passwordRecoveryEmail: string | undefined, lastResetDate: Date | undefined) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PasswordRecoveryModalProps = typeof __propDef.props;
+export type PasswordRecoveryModalEvents = typeof __propDef.events;
+export type PasswordRecoveryModalSlots = typeof __propDef.slots;
+export default class PasswordRecoveryModal extends SvelteComponent<PasswordRecoveryModalProps, PasswordRecoveryModalEvents, PasswordRecoveryModalSlots> {
+    get open(): (passwordRecoveryEmail: string | undefined, lastResetDate: Date | undefined) => void;
+}
+export {};

package/dist/PasswordSetModal.svelte

@@ -0,0 +1,78 @@
+<script>import { tick, getContext } from "svelte";
+import Input from "@isoftdata/svelte-input";
+import Modal from "@isoftdata/svelte-modal";
+import PasswordFields from "@isoftdata/svelte-password-fields";
+import { klona } from "klona";
+let show = false;
+let newPassword = "";
+let confirmPassword = "";
+let passwordMismatch = false;
+let lastResetDate = void 0;
+let input = void 0;
+let passwordRecoveryEmail = void 0;
+let error = void 0;
+export let confirmPasswordSet = void 0;
+export async function open(userAccount) {
+  error = void 0;
+  newPassword = "";
+  confirmPassword = "";
+  lastResetDate = klona(userAccount?.lastPasswordResetDate);
+  passwordRecoveryEmail = userAccount?.recoveryEmail;
+  show = true;
+  await tick();
+  input?.focus();
+}
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+</script>
+
+<Modal
+	bind:show
+	modalSize="sm"
+	title={translate('configuration.user.accountInfo.setPasswordModal.header', 'Set Password')}
+	confirmButtonText={translate('configuration.user.accountInfo.passwordManagementModal.setPassword', 'Set Password')}
+	confirmButtonIcon="check"
+	confirmButtonDisabled={passwordMismatch || !newPassword || !confirmPassword}
+	on:close={() => (show = false)}
+	confirmButtonType="submit"
+	confirmButtonFormId="setPasswordForm"
+>
+	<form
+		id="setPasswordForm"
+		on:submit={async e => {
+			e.preventDefault()
+			if (!passwordMismatch && confirmPasswordSet) {
+				try {
+					await confirmPasswordSet({ password: newPassword })
+					show = false
+				} catch (err) {
+					console.error(err)
+					if (err instanceof Error) {
+						error = err
+					}
+				}
+			}
+		}}
+	>
+		<Input
+			label={translate('configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate', 'Last Password Set Date')}
+			tabindex={-1}
+			value={lastResetDate ? lastResetDate.toLocaleString() : ''}
+			labelParentClass="form-group mb-0"
+			readonly
+		/>
+		<PasswordFields
+			bind:password={newPassword}
+			bind:confirmPassword
+			bind:passwordMismatch
+			bind:passwordInput={input}
+			columnClass="col-12"
+			passwordLabel={translate('configuration.user.accountInfo.passwordManagementModal.newPassword', 'New Password')}
+			confirmPasswordLabel={translate('configuration.user.accountInfo.passwordManagementModal.confirmNewPassword', 'Confirm New Password')}
+		/>
+		{#if !passwordRecoveryEmail}
+			<div class="alert alert-danger mt-3 mb-0">
+				{translate('configuration.user.accountInfo.passwordRecovery.noRecoveryEmail', 'No recovery email has been set for this user.')}
+			</div>
+		{/if}
+	</form>
+</Modal>

package/dist/PasswordSetModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { UserAccount } from './';
+declare const __propDef: {
+    props: {
+        confirmPasswordSet?: ((ctx: {
+            password: string;
+        }) => void | Promise<void>) | undefined;
+        open?: (userAccount?: UserAccount) => Promise<void>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PasswordSetModalProps = typeof __propDef.props;
+export type PasswordSetModalEvents = typeof __propDef.events;
+export type PasswordSetModalSlots = typeof __propDef.slots;
+export default class PasswordSetModal extends SvelteComponent<PasswordSetModalProps, PasswordSetModalEvents, PasswordSetModalSlots> {
+    get open(): (userAccount?: UserAccount) => Promise<void>;
+}
+export {};

package/dist/PermissionList.svelte

@@ -0,0 +1,199 @@
+<script>import { getContext } from "svelte";
+import camelCase from "just-camel-case";
+import Icon from "@isoftdata/svelte-icon";
+import Button from "@isoftdata/svelte-button";
+import Select from "@isoftdata/svelte-select";
+import { getEventValue } from "@isoftdata/browser-event";
+import { Table, Td } from "@isoftdata/svelte-table";
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+export let permissions;
+export let siteLabel = "Site";
+export let permissionValueChange = void 0;
+export let icon = "user-lock";
+export let cardHeaderTitle = translate("common:permissions", "Permissions");
+let computedPermissions = [];
+let selectedPermissionIds = /* @__PURE__ */ new Set();
+let selectedPermissionValue = null;
+const permissionColumns = getColumns(permissions);
+const permissionValueList = {
+  NONE: { label: translate("common:permissionLevel.none", "None"), value: "NONE", color: "danger" },
+  SITE: { label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel), value: "SITE", color: "primary" },
+  GLOBAL: { label: translate("common:permissionLevel.global", "Global"), value: "GLOBAL", color: "success" }
+};
+function getColumns(permissions2) {
+  const hasGroupValue = permissions2.every((permission) => !!permission.groupValue);
+  let columns = [
+    { property: "value", name: hasGroupValue ? translate("common:user", "User") : translate("common:permission", "Permission"), width: "1rem" },
+    { property: "category", name: translate("common:category", "Category") },
+    { property: "displayName", name: translate("common:name", "Name") }
+  ];
+  if (hasGroupValue) {
+    columns.splice(
+      1,
+      0,
+      { property: "groupValue", name: translate("common:group", "Group"), align: "center", width: "1rem", minWidth: "25%" },
+      { property: "computedValue", name: translate("common:access", "Access"), align: "center", width: "1rem", minWidth: "25%" }
+    );
+  }
+  return columns;
+}
+function selectPermissions(permissionId) {
+  selectedPermissionIds.has(permissionId) ? selectedPermissionIds.delete(permissionId) : selectedPermissionIds.add(permissionId);
+  selectedPermissionIds = selectedPermissionIds;
+}
+function selectAndDeselectAllPermissions() {
+  if (selectedPermissionIds.size === computedPermissions.length) {
+    selectedPermissionIds.clear();
+    selectedPermissionValue = null;
+  } else {
+    selectedPermissionIds = new Set(permissions.map((permission) => permission.id));
+  }
+  selectedPermissionIds = selectedPermissionIds;
+}
+const getButtonColor = (optionValue, permissionValue) => optionValue === permissionValue ? permissionValueList[optionValue].color : "outline-secondary";
+const isValidPermissionValue = (value) => Object.keys(permissionValueList).includes(value);
+async function updatePermissionValues(event, permissionIds) {
+  const newValue = getEventValue(event);
+  if (isValidPermissionValue(newValue)) {
+    for (const permission of permissions) {
+      if (permissionIds.has(permission.id)) {
+        permission.value = newValue;
+      }
+    }
+    permissions = permissions;
+    await permissionValueChange?.({
+      value: newValue,
+      permissionIds: Array.from(permissionIds)
+    });
+  }
+}
+function getComputedPermissions(permissions2) {
+  return permissions2.map((permission) => {
+    const { value, groupValue } = permission;
+    let computedValue = value === "NONE" && groupValue || value === siteLabel.toUpperCase() && groupValue === "GLOBAL" ? groupValue : value;
+    return {
+      ...permission,
+      displayName: translate(`permissions:${camelCase(permission.codeName)}.displayName`, permission.displayName),
+      category: translate(`permissions:categories.${camelCase(permission.category)}`, permission.category),
+      computedValue
+    };
+  });
+}
+$: computedPermissions = getComputedPermissions(permissions);
+</script>
+
+<div
+	class="card"
+	{...$$restProps}
+>
+	<div class="card-header">
+		<h5 class="mb-0">
+			<Icon
+				{icon}
+				class="mr-1"
+			/>
+			{cardHeaderTitle}
+		</h5>
+	</div>
+	<div class="card-body">
+		<Table
+			class="mb-0"
+			parentClass="mh-60vh overflow-y-auto"
+			filterPlaceholder={translate('common:filterPermissions', 'Filter Permissions')}
+			filterColumnClass="col-6 col-lg-4 align-self-end"
+			rows={computedPermissions}
+			columns={permissionColumns}
+			responsive
+			filterEnabled
+			let:row={permission}
+		>
+			<tr
+				on:click={() => selectPermissions(permission.id)}
+				class:table-primary={selectedPermissionIds.has(permission.id)}
+				class="cursor-pointer"
+			>
+				<Td property="value">
+					<div
+						class="btn-group btn-group-toggle"
+						data-toggle="buttons"
+					>
+						{#each Object.values(permissionValueList) as permissionValue}
+							<label class="btn btn-sm btn-{getButtonColor(permissionValue.value, permission.value)} cursor-pointer">
+								<input
+									type="radio"
+									autocomplete="off"
+									name={permission.value}
+									value={permissionValue.value}
+									on:change={e => updatePermissionValues(e, new Set([permission.id]))}
+								/>
+								{permissionValue.label}
+							</label>
+						{/each}
+					</div>
+				</Td>
+				{#if permission.groupValue && permission.computedValue}
+					<Td
+						property="groupValue"
+						class="px-4"
+					>
+						<span
+							style="width: 5em;"
+							class="badge badge-pill badge-{permissionValueList[permission.groupValue].color}">{permissionValueList[permission.groupValue].label}</span
+						>
+					</Td>
+					<Td
+						property="computedValue"
+						class="px-4"
+					>
+						<span
+							style="width: 5em;"
+							class="badge badge-pill badge-{permissionValueList[permission.computedValue].color}">{permissionValueList[permission.computedValue].label}</span
+						>
+					</Td>
+				{/if}
+				<Td property="category">{permission.category}</Td>
+				<Td property="displayName">{permission.displayName}</Td>
+			</tr>
+		</Table>
+		<slot></slot>
+	</div>
+	<div class="card-footer">
+		<div class="d-flex justify-content-between align-items-end">
+			<Select
+				label="{translate('common:setSelectedTo', 'Set Selected To')}:"
+				bind:value={selectedPermissionValue}
+				showEmptyOption={selectedPermissionValue === null}
+				emptyValue={null}
+				emptyText={translate('common:selectValue', 'Select a Value')}
+				labelParentClass="form-inline mr-2"
+				labelClass="mr-2 p-0"
+				disabled={selectedPermissionIds.size === 0}
+				on:change={e => {
+					updatePermissionValues(e, selectedPermissionIds)
+					selectedPermissionIds = new Set() //clear the Set and trigger reactivity
+					selectedPermissionValue = null
+				}}
+			>
+				{#each Object.values(permissionValueList) as permission}
+					<option value={permission.value}>{permission.label}</option>
+				{/each}
+			</Select>
+			<Button
+				class="mb-1"
+				outline
+				size="sm"
+				iconClass="check-double"
+				on:click={selectAndDeselectAllPermissions}
+			>
+				<span class:d-none={selectedPermissionIds.size !== computedPermissions.length}>{translate('common:deselectAll', 'Deselect All')}</span>
+				<span class:d-none={selectedPermissionIds.size === computedPermissions.length}>{translate('common:selectAll', 'Select All')}</span>
+			</Button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.cursor-pointer {
+		cursor: pointer;
+	}
+</style>

package/dist/PermissionList.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+import type { IconName, SiteLabel, HTMLDivAttributes } from './';
+declare const __propDef: {
+    props: HTMLDivAttributes & {
+        permissions: Array<{
+            id: number;
+            displayName: string;
+            category: string;
+            value: "NONE" | "SITE" | "GLOBAL";
+            /** Ractive version of this component didn't require `codeName`, but the translation key for permissions requires it, so we can't translate without it.*/
+            codeName: string;
+            /** Providing this value will cause the Group and Access columns to be rendered*/
+            groupValue?: "NONE" | "SITE" | "GLOBAL";
+        }>;
+        siteLabel?: SiteLabel;
+        permissionValueChange?: ((change: {
+            value: "NONE" | "SITE" | "GLOBAL";
+            permissionIds: Array<number>;
+        }) => void | Promise<void>) | undefined;
+        icon?: IconName;
+        cardHeaderTitle?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PermissionListProps = typeof __propDef.props;
+export type PermissionListEvents = typeof __propDef.events;
+export type PermissionListSlots = typeof __propDef.slots;
+export default class PermissionList extends SvelteComponent<PermissionListProps, PermissionListEvents, PermissionListSlots> {
+}
+export {};

package/dist/UserAccountInfo.svelte

@@ -0,0 +1,268 @@
+<script>import { getContext } from "svelte";
+import Icon from "@isoftdata/svelte-icon";
+import Input from "@isoftdata/svelte-input";
+import Button from "@isoftdata/svelte-button";
+import TextArea from "@isoftdata/svelte-textarea";
+import PasswordSetModal from "./PasswordSetModal.svelte";
+import PasswordFields from "@isoftdata/svelte-password-fields";
+import DeactivateUserModal from "./DeactivateUserModal.svelte";
+import PasswordRecoveryModal from "./PasswordRecoveryModal.svelte";
+export let userAccount;
+export let icon = "user";
+export let canToggleActive = true;
+export let canEditAccountInfo = true;
+export let isCreatingNewUser = false;
+export let deactivateUser = void 0;
+export let hasPermissionToChangePassword = false;
+export let confirmPasswordSet = void 0;
+export let accountInfoChanged = void 0;
+export let error = void 0;
+export let success = void 0;
+export let sendPasswordRecoveryToken = void 0;
+export let generateNewActivationPIN = () => Promise.resolve();
+let isLoading = false;
+let passwordSetModal;
+let activationPINExpiration = "";
+let deactivateUserModal;
+let passwordRecoveryModal;
+let activationPINInput;
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+async function getNewActivationPIN(sendEmail = false) {
+  let confirmationMessage = sendEmail ? translate("configuration.user.permissions.sendNewActivationPINMessage", "Are you sure you want to send a new activation PIN? The user will receive an email with the new activation PIN.") : translate("configuration.user.permissions.generateNewActivationPINMessage", "Are you sure you want to generate a new activation PIN?");
+  if (confirm(confirmationMessage)) {
+    try {
+      isLoading = true;
+      await generateNewActivationPIN(userAccount.name, !!userAccount.workEmail);
+      let successMessage = sendEmail ? translate("configuration.user.permissions.activationPINSent", "Email with new activation PIN has been sent successfully.") : translate("configuration.user.permissions.activationPINGenerated", "Activation PIN generated successfully.");
+      let successHeading = sendEmail ? translate("configuration.messageHeading.activationPINSent", "New Activation PIN Sent!") : translate("configuration.messageHeading.activationPINGenerated", "New Activation PIN Generated!");
+      await success?.({ heading: successHeading, message: successMessage });
+      isLoading = false;
+      await accountInfoChanged?.();
+    } catch (err) {
+      console.log(err);
+      if (err instanceof Error) {
+        await error?.({ heading: translate("configuration.messageHeading.failedToGenerateNewPIN", "Failed To Generate New PIN"), message: err.message });
+      }
+    }
+  }
+}
+async function copyTextToClipboard() {
+  if (activationPINInput) {
+    navigator.clipboard.writeText(activationPINInput.value);
+    await success?.({
+      heading: translate("configuration.messageHeading.activationPINCopied", "Activation PIN Copied!"),
+      message: translate("configuration.user.permissions.activationPINCopied", "Activation PIN copied to clipboard successfully.")
+    });
+  }
+}
+async function reactivateUserAccount() {
+  if (confirm(translate("configuration.user.permissions.reactivateUserConfirmation", "Are you sure you want to reactivate this user?"))) {
+    userAccount.status = "ACTIVE";
+    userAccount.lockNotes = null;
+    await accountInfoChanged?.();
+  }
+}
+async function deactivateUserAccount(lockNotes) {
+  userAccount.status = "DEACTIVATED";
+  userAccount.lockNotes = lockNotes;
+  await accountInfoChanged?.();
+}
+$: workEmail = userAccount.workEmail;
+$: status = userAccount.status;
+$: activationPIN = userAccount.activationPIN;
+</script>
+
+<div
+	class="card"
+	{...$$restProps}
+>
+	<fieldset disabled={!canEditAccountInfo}>
+		<div class="card-header">
+			<div class="d-flex justify-content-between align-items-center">
+				<h5 class="mb-0">
+					<Icon
+						{icon}
+						class="mr-1"
+					/>
+					{isCreatingNewUser ? translate('configuration.user.creatingNewAccountInfoHeader', 'New Account') : translate('configuration.user.accountInfoHeader', 'Account')}
+				</h5>
+				{#if status === 'ACTIVE'}
+					<Button
+						size="xs"
+						outline
+						color="danger"
+						iconClass="xmark"
+						on:click={() => deactivateUserModal.open(userAccount)}
+						disabled={!canEditAccountInfo || !canToggleActive}
+					>
+						<span>{translate('common:deactivate', 'Deactivate')}</span>
+					</Button>
+				{:else if status === 'DEACTIVATED' || status === 'LOCKED'}
+					<Button
+						size="sm"
+						outline
+						color="success"
+						iconClass="check"
+						on:click={() => reactivateUserAccount()}
+						disabled={!canEditAccountInfo || !canToggleActive}
+					>
+						<span>{translate('common:activate', 'Activate')}</span>
+					</Button>
+				{/if}
+			</div>
+		</div>
+		<div class="card-body">
+			<div class="form-row">
+				{#if !isCreatingNewUser}
+					{#if status === 'PENDING_ACTIVATION'}
+						<div class="col-12">
+							{#if activationPIN && workEmail}
+								<div class="alert alert-info mb-0">
+									{translate('configuration.user.accountInfo.activationPINSent', 'An activation PIN has been sent to {{email}}.', { email: workEmail })}
+								</div>
+							{:else}
+								<label for="activationPIN">{translate('configuration.user.activationPIN', 'Activation PIN')}</label>
+								<div class="input-group input-group-sm">
+									<input
+										bind:this={activationPINInput}
+										type="text"
+										class="form-control"
+										placeholder="###-###"
+										value={activationPIN}
+										readonly
+									/>
+									<div class="input-group-append">
+										<!-- When this button is hit, the function will call an API endpoint that will write the new PIN into the db -->
+										<!-- Therefore, this button will ignore the save function, as we need the new PIN to display it here -->
+										<Button
+											size="sm"
+											outline
+											{isLoading}
+											iconClass="refresh"
+											on:click={() => getNewActivationPIN()}
+											title={translate('configuration.user.generateNewActivationPIN', 'Generate New PIN')}
+										/>
+										<Button
+											size="sm"
+											outline
+											iconClass="copy"
+											on:click={() => copyTextToClipboard()}
+											disabled={!activationPIN}
+											title={translate('configuration.user.copyActivationPIN', 'Copy Activation PIN')}
+										/>
+									</div>
+								</div>
+							{/if}
+							{#if activationPIN}
+								<small class="text-danger">{translate('configuratioin.user.activationPINExpireText', 'Activation PIN expires on')} {activationPINExpiration}</small>
+							{/if}
+						</div>
+					{:else}
+						<div class="col-12">
+							<Button
+								size="sm"
+								outline
+								iconClass="paper-plane"
+								on:click={() => passwordRecoveryModal.open(userAccount.recoveryEmail, userAccount.lastPasswordResetDate)}
+							>
+								{translate('configuration.user.sendResetToken', 'Send Reset Token')}...
+							</Button>
+							{#if hasPermissionToChangePassword}
+								<Button
+									size="sm"
+									outline
+									iconClass="key"
+									on:click={() => passwordSetModal.open(userAccount)}
+								>
+									{translate('configuration.user.setPassword', 'Set Password')}...
+								</Button>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+				<div class="col-12">
+					<Input
+						id="usernameInput"
+						label={translate('configuration.user.accountInfo.username', 'Username')}
+						bind:value={userAccount.name}
+						maxlength={320}
+						required={isCreatingNewUser}
+						validation={{
+							validator: value => {
+								return value.length > 320 ? 'Username must be less than 320 characters.' : true
+							},
+						}}
+					/>
+				</div>
+				<div class="col-6">
+					<Input
+						label={translate('configuration.user.accountInfo.firstName', 'First Name')}
+						bind:value={userAccount.firstName}
+						maxlength={100}
+					/>
+				</div>
+				<div class="col-6">
+					<Input
+						label={translate('configuration.user.accountInfo.lastName', 'Last Name')}
+						bind:value={userAccount.lastName}
+						maxlength={100}
+					/>
+				</div>
+				<div class="col-12">
+					<Input
+						label={translate('configuration.user.accountInfo.workEmail', 'Work Email')}
+						bind:value={userAccount.workEmail}
+						autocomplete="email"
+						type="email"
+						inputmode="email"
+					/>
+					{#if workEmail && !isCreatingNewUser && status === 'PENDING_ACTIVATION'}
+						<Button
+							size="sm"
+							outline
+							iconClass="paper-plane"
+							on:click={() => getNewActivationPIN(true)}
+						>
+							{translate('configuration.user.sendNewActivationPIN', 'Send New Activation PIN')}
+						</Button>
+					{/if}
+				</div>
+				<div class="col-12">
+					{#if !isCreatingNewUser}
+						<TextArea
+							label={translate('configuration.user.accountInfo.lockNote', 'Lock Note')}
+							labelClass="py-0 mb-2"
+							style="min-height:83px;"
+							bind:value={userAccount.lockNotes}
+							readonly
+						/>
+					{:else if hasPermissionToChangePassword}
+						<!-- TODO: When we migrate to Svelte 5, switch this and the other usage of PasswordFields to use a snippet-->
+						<PasswordFields
+							bind:password={userAccount.newPassword}
+							columnClass="col-12"
+							passwordLabel={translate('configuration.user.accountInfo.passwordManagementModal.newPassword', 'New Password')}
+							confirmPasswordLabel={translate('configuration.user.accountInfo.passwordManagementModal.confirmNewPassword', 'Confirm New Password')}
+						/>
+					{/if}
+				</div>
+			</div>
+			<slot></slot>
+		</div>
+	</fieldset>
+</div>
+
+<PasswordRecoveryModal
+	bind:this={passwordRecoveryModal}
+	{sendPasswordRecoveryToken}
+/>
+
+<DeactivateUserModal
+	bind:this={deactivateUserModal}
+	{deactivateUser}
+/>
+
+<PasswordSetModal
+	bind:this={passwordSetModal}
+	{confirmPasswordSet}
+/>

package/dist/UserAccountInfo.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import type { UserAccount, ConfirmPasswordSetFn, DeactivateUserFn, HTMLDivAttributes, IconName } from './';
+declare const __propDef: {
+    props: HTMLDivAttributes & {
+        userAccount: UserAccount;
+        canEditAccountInfo?: boolean;
+        canToggleActive?: boolean;
+        isCreatingNewUser?: boolean;
+        hasPermissionToChangePassword?: boolean;
+        generateNewActivationPIN?: (userName: string, hasWorkEmail: boolean) => Promise<void>;
+        confirmPasswordSet?: ConfirmPasswordSetFn;
+        deactivateUser?: DeactivateUserFn;
+        success?: ((info: {
+            heading: string;
+            message: string;
+        }) => void | Promise<void>) | undefined;
+        error?: ((info: {
+            heading: string;
+            message: string;
+        }) => void | Promise<void>) | undefined;
+        accountInfoChanged?: (() => void | Promise<void>) | undefined;
+        sendPasswordRecoveryToken?: ((email: string | undefined) => void | Promise<void>) | undefined;
+        icon?: IconName;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserAccountInfoProps = typeof __propDef.props;
+export type UserAccountInfoEvents = typeof __propDef.events;
+export type UserAccountInfoSlots = typeof __propDef.slots;
+export default class UserAccountInfo extends SvelteComponent<UserAccountInfoProps, UserAccountInfoEvents, UserAccountInfoSlots> {
+}
+export {};

package/dist/UserConfiguration.svelte

@@ -0,0 +1,87 @@
+<script>import UserSiteAccess from "../lib/UserSiteAccess.svelte";
+import PermissionList from "../lib/PermissionList.svelte";
+import UserAccountInfo from "../lib/UserAccountInfo.svelte";
+import UserGroupMembership from "../lib/UserGroupMembership.svelte";
+export let siteLabel = "Site";
+export let userAccountInfoIcon = "user";
+export let groupMembershipIcon = "users";
+export let permissionListIcon = "user-lock";
+export let userSiteAccessIcon = "industry-windows";
+export let permissionListCardHeaderTitle = "Permissions";
+export let userAccount;
+export let canToggleActive = true;
+export let isCreatingNewUser = false;
+export let canEditAccountInfo = true;
+export let hasPermissionToChangePassword = false;
+export let error = void 0;
+export let success = void 0;
+export let deactivateUser = void 0;
+export let confirmPasswordSet = void 0;
+export let accountInfoChanged = void 0;
+export let sendPasswordRecoveryToken = void 0;
+export let generateNewActivationPIN = () => Promise.resolve();
+export let userSites;
+export let canEditSiteAccess = true;
+export let siteAccessChange = void 0;
+export let groupMembership;
+export let canEditGroupMembership = true;
+export let groupMembershipChange = void 0;
+export let permissions;
+export let permissionValueChange = void 0;
+</script>
+
+<div class="form-row">
+	<div class="col-12 col-lg-4 mb-2">
+		<UserAccountInfo
+			{userAccount}
+			{canToggleActive}
+			{canEditAccountInfo}
+			{isCreatingNewUser}
+			{hasPermissionToChangePassword}
+			{error}
+			{success}
+			{deactivateUser}
+			{accountInfoChanged}
+			{confirmPasswordSet}
+			{sendPasswordRecoveryToken}
+			{generateNewActivationPIN}
+			icon={userAccountInfoIcon}
+			style="height: 500px;"
+		/>
+	</div>
+	<div class="col-12 col-lg-4 mb-2">
+		<UserSiteAccess
+			{siteLabel}
+			{userSites}
+			{canEditSiteAccess}
+			{siteAccessChange}
+			icon={userSiteAccessIcon}
+			style="height: 500px;"
+		>
+			<slot name="siteAccess"></slot>
+		</UserSiteAccess>
+	</div>
+	<div class="col-12 col-lg-4 mb-2">
+		<UserGroupMembership
+			{groupMembership}
+			{canEditGroupMembership}
+			{groupMembershipChange}
+			icon={groupMembershipIcon}
+			style="height: 500px;"
+		>
+			<slot name="userGroupMembership"></slot>
+		</UserGroupMembership>
+	</div>
+</div>
+<div class="form-row">
+	<div class="col-12">
+		<PermissionList
+			{permissions}
+			{permissionValueChange}
+			icon={permissionListIcon}
+			cardHeaderTitle={permissionListCardHeaderTitle}
+		>
+			<slot name="permissionList"></slot>
+		</PermissionList>
+	</div>
+</div>

package/dist/UserConfiguration.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponent } from "svelte";
+import type { ErrorFn, IconName, UserSites, SuccessFn, SiteLabel, UserAccount, Permissions, GroupMembership, CanToggleActive, DeactivateUserFn, CanEditSiteAccess, IsCreatingNewUser, SiteAccessChangeFn, CanEditAccountInfo, ConfirmPasswordSetFn, AccountInfoChangedFn, CanEditGroupMembership, GroupMembershipChangeFn, PermissionValueChangeFn, GenerateNewActivationPINFn, SendPasswordRecoveryTokenFn, HasPermissionToChangePassword, PermissionListCardHeaderTitle } from '../lib/util';
+declare const __propDef: {
+    props: {
+        siteLabel?: SiteLabel;
+        userAccountInfoIcon?: IconName;
+        groupMembershipIcon?: IconName;
+        permissionListIcon?: IconName;
+        userSiteAccessIcon?: IconName;
+        permissionListCardHeaderTitle?: PermissionListCardHeaderTitle;
+        userAccount: UserAccount;
+        canToggleActive?: CanToggleActive;
+        isCreatingNewUser?: IsCreatingNewUser;
+        canEditAccountInfo?: CanEditAccountInfo;
+        hasPermissionToChangePassword?: HasPermissionToChangePassword;
+        error?: ErrorFn;
+        success?: SuccessFn;
+        deactivateUser?: DeactivateUserFn;
+        confirmPasswordSet?: ConfirmPasswordSetFn;
+        accountInfoChanged?: AccountInfoChangedFn;
+        sendPasswordRecoveryToken?: SendPasswordRecoveryTokenFn;
+        generateNewActivationPIN?: GenerateNewActivationPINFn;
+        userSites: UserSites;
+        canEditSiteAccess?: CanEditSiteAccess;
+        siteAccessChange?: SiteAccessChangeFn;
+        groupMembership: GroupMembership;
+        canEditGroupMembership?: CanEditGroupMembership;
+        groupMembershipChange?: GroupMembershipChangeFn;
+        permissions: Permissions;
+        permissionValueChange?: PermissionValueChangeFn;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        siteAccess: {};
+        userGroupMembership: {};
+        permissionList: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserConfigurationProps = typeof __propDef.props;
+export type UserConfigurationEvents = typeof __propDef.events;
+export type UserConfigurationSlots = typeof __propDef.slots;
+export default class UserConfiguration extends SvelteComponent<UserConfigurationProps, UserConfigurationEvents, UserConfigurationSlots> {
+}
+export {};

package/dist/UserGroupMembership.svelte

@@ -0,0 +1,39 @@
+<script>import { getContext } from "svelte";
+import Icon from "@isoftdata/svelte-icon";
+import Checkbox from "@isoftdata/svelte-checkbox";
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+export let groupMembership;
+export let canEditGroupMembership = true;
+export let groupMembershipChange = void 0;
+export let icon = "users";
+</script>
+
+<div
+	class="card"
+	{...$$restProps}
+>
+	<div class="card-header">
+		<h5 class="mb-0">
+			<Icon {icon} />
+			{translate('configuration.user.groupMembership', 'Group Membership')}
+		</h5>
+	</div>
+	<ul
+		class="list-group list-group-flush h-100"
+		style="overflow-y: auto;"
+	>
+		{#each groupMembership as { name, isMember }, i}
+			<li class="list-group-item">
+				<Checkbox
+					label={name}
+					bind:checked={isMember}
+					disabled={!canEditGroupMembership}
+					on:change={async () => {
+						await groupMembershipChange?.({ id: i, name, isMember })
+					}}
+				/>
+			</li>
+		{/each}
+	</ul>
+	<slot></slot>
+</div>

package/dist/UserGroupMembership.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { IconName, HTMLDivAttributes } from './';
+declare const __propDef: {
+    props: HTMLDivAttributes & {
+        groupMembership: Array<{
+            id: number;
+            name: string;
+            isMember: boolean;
+        }>;
+        canEditGroupMembership?: boolean;
+        groupMembershipChange?: ((groupMembership: {
+            id: number;
+            name: string;
+            isMember: boolean;
+        }) => void | Promise<void>) | undefined;
+        icon?: IconName;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserGroupMembershipProps = typeof __propDef.props;
+export type UserGroupMembershipEvents = typeof __propDef.events;
+export type UserGroupMembershipSlots = typeof __propDef.slots;
+export default class UserGroupMembership extends SvelteComponent<UserGroupMembershipProps, UserGroupMembershipEvents, UserGroupMembershipSlots> {
+}
+export {};

package/dist/UserSiteAccess.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from "svelte";
+import Checkbox from "@isoftdata/svelte-checkbox";
+import Icon from "@isoftdata/svelte-icon";
+const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+export let userSites;
+export let siteLabel = "Site";
+export let canEditSiteAccess = true;
+export let siteAccessChange = void 0;
+export let icon = "industry-windows";
+</script>
+
+<div
+	class="card"
+	{...$$restProps}
+>
+	<div class="card-header">
+		<h5 class="mb-0"><Icon {icon} /> {translate(`user.configuration.${siteLabel}Access`, `${siteLabel} Access`)}</h5>
+	</div>
+	<ul
+		class="list-group list-group-flush h-100"
+		style="overflow-y: auto"
+	>
+		{#each userSites as { code, name }, i}
+			<li class="list-group-item">
+				<Checkbox
+					label="{code} - {name}"
+					bind:checked={userSites[i].isAuthorized}
+					disabled={!canEditSiteAccess}
+					on:change={async () => {
+						await siteAccessChange?.(userSites[i])
+					}}
+				/>
+			</li>
+		{/each}
+	</ul>
+	<slot></slot>
+</div>

package/dist/UserSiteAccess.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { IconName, HTMLDivAttributes, SiteLabel } from './';
+declare const __propDef: {
+    props: HTMLDivAttributes & {
+        userSites: Array<{
+            code: string;
+            name: string;
+            isAuthorized: boolean;
+        }>;
+        siteLabel?: SiteLabel;
+        canEditSiteAccess?: boolean;
+        siteAccessChange?: ((siteAccess: {
+            code: string;
+            name: string;
+            isAuthorized: boolean;
+        }) => void | Promise<void>) | undefined;
+        icon?: IconName;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserSiteAccessProps = typeof __propDef.props;
+export type UserSiteAccessEvents = typeof __propDef.events;
+export type UserSiteAccessSlots = typeof __propDef.slots;
+export default class UserSiteAccess extends SvelteComponent<UserSiteAccessProps, UserSiteAccessEvents, UserSiteAccessSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as default, default as UserConfiguration } from './UserConfiguration.svelte';
+export { default as UserAccountInfo } from './UserAccountInfo.svelte';
+export { default as UserGroupMembership } from './UserGroupMembership.svelte';
+export { default as PermissionList } from './PermissionList.svelte';
+export { default as UserSiteAccess } from './UserSiteAccess.svelte';
+export * from './util';
+export type * from './util';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { default as default, default as UserConfiguration } from './UserConfiguration.svelte';
+export { default as UserAccountInfo } from './UserAccountInfo.svelte';
+export { default as UserGroupMembership } from './UserGroupMembership.svelte';
+export { default as PermissionList } from './PermissionList.svelte';
+export { default as UserSiteAccess } from './UserSiteAccess.svelte';
+export * from './util';

package/dist/util.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import DeactivateUserModal from './DeactivateUserModal.svelte';
+import PasswordSetModal from './PasswordSetModal.svelte';
+import UserAccountInfo from './UserAccountInfo.svelte';
+import UserSiteAccess from './UserSiteAccess.svelte';
+import UserGroupMembership from './UserGroupMembership.svelte';
+import type PermissionList from './PermissionList.svelte';
+export interface UserAccount {
+    id: number;
+    name: string;
+    workEmail: string;
+    firstName: string;
+    lastName: string;
+    lockNotes: string | null;
+    recoveryEmail: string;
+    activationPIN: string;
+    status: 'ACTIVE' | 'DEACTIVATED' | 'LOCKED' | 'PENDING_ACTIVATION';
+    newPassword?: string;
+    lastPasswordResetDate?: Date;
+    lastAccessDate?: Date;
+}
+export type { IconName } from '@fortawesome/fontawesome-common-types';
+export type HTMLDivAttributes = HTMLAttributes<HTMLDivElement>;
+export type SiteLabel = string;
+export type GenerateNewActivationPINFn = ComponentProps<UserAccountInfo>['generateNewActivationPIN'];
+export type SuccessFn = ComponentProps<UserAccountInfo>['success'];
+export type ErrorFn = ComponentProps<UserAccountInfo>['error'];
+export type AccountInfoChangedFn = ComponentProps<UserAccountInfo>['accountInfoChanged'];
+export type SendPasswordRecoveryTokenFn = ComponentProps<UserAccountInfo>['sendPasswordRecoveryToken'];
+export type CanEditAccountInfo = ComponentProps<UserAccountInfo>['canEditAccountInfo'];
+export type CanToggleActive = ComponentProps<UserAccountInfo>['canToggleActive'];
+export type IsCreatingNewUser = ComponentProps<UserAccountInfo>['isCreatingNewUser'];
+export type HasPermissionToChangePassword = ComponentProps<UserAccountInfo>['hasPermissionToChangePassword'];
+export type ConfirmPasswordSetFn = ComponentProps<PasswordSetModal>['confirmPasswordSet'];
+export type DeactivateUserFn = ComponentProps<DeactivateUserModal>['deactivateUser'];
+export type UserSites = ComponentProps<UserSiteAccess>['userSites'];
+export type CanEditSiteAccess = ComponentProps<UserSiteAccess>['canEditSiteAccess'];
+export type SiteAccessChangeFn = ComponentProps<UserSiteAccess>['siteAccessChange'];
+export type GroupMembership = ComponentProps<UserGroupMembership>['groupMembership'];
+export type GroupMembershipChangeFn = ComponentProps<UserGroupMembership>['groupMembershipChange'];
+export type CanEditGroupMembership = ComponentProps<UserGroupMembership>['canEditGroupMembership'];
+export type Permissions = ComponentProps<PermissionList>['permissions'];
+export type PermissionValueChangeFn = ComponentProps<PermissionList>['permissionValueChange'];
+export type PermissionListCardHeaderTitle = ComponentProps<PermissionList>['cardHeaderTitle'];

package/dist/util.js

@@ -0,0 +1,5 @@
+import DeactivateUserModal from './DeactivateUserModal.svelte';
+import PasswordSetModal from './PasswordSetModal.svelte';
+import UserAccountInfo from './UserAccountInfo.svelte';
+import UserSiteAccess from './UserSiteAccess.svelte';
+import UserGroupMembership from './UserGroupMembership.svelte';

package/package.json

@@ -0,0 +1,72 @@
+{
+	"name": "@isoftdata/svelte-user-configuration",
+	"version": "1.0.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0 || ^5.16.3"
+	},
+	"devDependencies": {
+		"@fortawesome/fontawesome-common-types": "^6.7.2",
+		"@isoftdata/prettier-config": "^1.0.3",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^9.6.0",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"i18next": "^24.2.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.2.0",
+		"svelte": "^4.2.7",
+		"svelte-check": "^4.0.0",
+		"type-fest": "^4.33.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.11"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"prettier": "@isoftdata/prettier-config",
+	"dependencies": {
+		"@isoftdata/browser-event": "^2.3.2",
+		"@isoftdata/svelte-button": "^1.4.1",
+		"@isoftdata/svelte-checkbox": "^1.5.1",
+		"@isoftdata/svelte-input": "^1.6.0",
+		"@isoftdata/svelte-modal": "^1.3.1",
+		"@isoftdata/svelte-password-fields": "^1.3.0",
+		"@isoftdata/svelte-select": "^1.5.0",
+		"@isoftdata/svelte-table": "^1.16.0",
+		"@isoftdata/svelte-textarea": "^1.2.0",
+		"just-camel-case": "^6.2.0",
+		"klona": "^2.0.6"
+	}
+}