@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/layout/Chat/ChatHeader.svelte

@@ -1,172 +1,172 @@
-<script lang="ts">
-	import { clickOutsideAction, DropdownItem } from '../../index.js';
-	import { Avatar } from '../../ui/avatar/index.js';
-	import { IconifyIcon } from '../../ui/icons/index.js';
-	import { slide } from 'svelte/transition';
-	import type { ChatHeaderProps } from './index.js';
-
-	let {
-		caseTitle = '',
-		user = { name: '', profileImageUrl: '', initials: '' },
-		caseTypes = '',
-		assignedTo = '',
-		showAssignedTo = false,
-		showFollowCaseButton = false,
-		showBackArrow = false,
-		isFollowingCase = false,
-		overflowActionsList = [],
-		showOverflowActionButton = true,
-		caseStatus = '',
-		logoUrl = '',
-		showFollowOverflowAction = true,
-		showCloseOverflowAction = true,
-		onOverflowActionClicked,
-		onToggleFollowCase,
-		leadingWidget,
-		trailingWidget,
-		caseDetailsWidget,
-		onBackArrowClicked,
-		onCloseCase
-	}: ChatHeaderProps = $props();
-
-	let showMenu = $state(false);
-</script>
-
-<div class="flex items-center justify-between">
-	{#if caseDetailsWidget}
-		{@render caseDetailsWidget?.()}
-	{:else}
-		<div class="flex w-full items-center gap-1.5">
-			{@render leadingWidget?.()}
-			{#if showBackArrow}
-				<button aria-label="back" onclick={onBackArrowClicked}>
-					<IconifyIcon
-						icon="ep:back"
-						class="block rounded-full p-2 hover:bg-gray-200 lg:hidden"
-						style="font-size: 20px;"
-					/>
-				</button>
-			{/if}
-			<div class="flex items-center gap-3">
-				{#if user?.profileImageUrl}
-					<Avatar
-						src={user?.profileImageUrl}
-						alt="pic"
-						class="h-14 w-14 border text-lg font-medium"
-					/>
-				{:else if user?.initials}
-					<Avatar class="h-14 w-14 border bg-primary-500 text-lg font-medium text-white"
-						>{user.initials}</Avatar
-					>
-				{:else}
-					<Avatar src={logoUrl} alt="logo" class="h-14 w-14 border text-lg font-medium" />
-				{/if}
-				<div class="flex flex-col">
-					<div class="font-medium capitalize">{user.name}</div>
-					<div class="flex gap-2">
-						<div class="max-w-xs truncate text-sm text-gray-500 capitalize">
-							<span class=" font-medium text-black">Title:</span>
-							<span title={caseTitle}>
-								{caseTitle}
-							</span>
-						</div>
-						<div class="text-sm text-gray-500 capitalize">
-							<span class="font-medium text-black">status: </span>
-							{caseStatus}
-						</div>
-						<div class="text-sm" class:hidden={!showAssignedTo}>
-							<span>Assigned To :</span> <span class="text-gray-500">{assignedTo}</span>
-						</div>
-					</div>
-					<div class="flex gap-2">
-						<div class="max-w-xl truncate text-sm text-gray-500 capitalize">
-							{caseTypes}
-						</div>
-					</div>
-					{#if showFollowCaseButton}
-						<div class="">
-							<button
-								onclick={() => onToggleFollowCase?.(isFollowingCase ? 'unfollow' : 'follow')}
-								class="flex w-fit items-center gap-1 rounded bg-gray-200 px-2 py-0.5 text-xs hover:bg-gray-300"
-							>
-								<span>{isFollowingCase ? 'Unfollow' : 'Follow'}</span>
-								<IconifyIcon icon={isFollowingCase ? 'mdi:eye-off' : 'mdi:eye'} />
-							</button>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	{/if}
-	{@render trailingWidget?.()}
-	{#if showOverflowActionButton}
-		<div class="w-10"></div>
-	{/if}
-
-	{#if showOverflowActionButton}
-		<div
-			class="relative space-y-2"
-			use:clickOutsideAction
-			onclickoutside={() => (showMenu = false)}
-		>
-			<button
-				aria-label="toggle menu"
-				class="grid place-content-center rounded-full p-1 text-gray-600 hover:bg-gray-200"
-				onclick={() => (showMenu = !showMenu)}
-			>
-				<IconifyIcon icon="mdi:dots-vertical" style="font-size: 25px;" />
-			</button>
-			{#if showMenu}
-				<div
-					class="absolute right-3 z-10 flex w-44 flex-col divide-y rounded-md bg-white py-1 shadow-md shadow-gray-300"
-					transition:slide
-					use:clickOutsideAction
-				>
-					{#if showFollowOverflowAction}
-						{#if !isFollowingCase}
-							<DropdownItem
-								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
-								onclick={() => {
-									onToggleFollowCase?.('follow');
-									showMenu = false;
-								}}><IconifyIcon icon="mdi:eye" style="font-size: 20px;" /> Follow Case</DropdownItem
-							>
-						{:else}
-							<DropdownItem
-								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
-								onclick={() => {
-									onToggleFollowCase?.('unfollow');
-									showMenu = false;
-								}}
-								><IconifyIcon icon="mdi:eye-off" style="font-size: 20px;" /> Unfollow Case</DropdownItem
-							>
-						{/if}
-					{/if}
-					{#if overflowActionsList.length > 0}
-						{#each overflowActionsList as item}
-							<DropdownItem
-								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
-								onclick={() => {
-									onOverflowActionClicked?.(item);
-									showMenu = false;
-								}}
-								><IconifyIcon icon={item.icon} style="font-size: 20px;" />
-								{item.label}</DropdownItem
-							>
-						{/each}
-					{/if}
-					{#if showCloseOverflowAction}
-						<DropdownItem
-							class="flex w-full appearance-none items-center gap-1 whitespace-nowrap text-red-600 list-none"
-							onclick={() => {
-								onCloseCase?.();
-								showMenu = false;
-							}}
-							><IconifyIcon icon="tabler:message-2-x" style="font-size: 20px;" /> Close Case</DropdownItem
-						>
-					{/if}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
+<script lang="ts">
+	import { clickOutsideAction, DropdownItem } from '../../index.js';
+	import { Avatar } from '../../ui/avatar/index.js';
+	import { IconifyIcon } from '../../ui/icons/index.js';
+	import { slide } from 'svelte/transition';
+	import type { ChatHeaderProps } from './index.js';
+
+	let {
+		caseTitle = '',
+		user = { name: '', profileImageUrl: '', initials: '' },
+		caseTypes = '',
+		assignedTo = '',
+		showAssignedTo = false,
+		showFollowCaseButton = false,
+		showBackArrow = false,
+		isFollowingCase = false,
+		overflowActionsList = [],
+		showOverflowActionButton = true,
+		caseStatus = '',
+		logoUrl = '',
+		showFollowOverflowAction = true,
+		showCloseOverflowAction = true,
+		onOverflowActionClicked,
+		onToggleFollowCase,
+		leadingWidget,
+		trailingWidget,
+		caseDetailsWidget,
+		onBackArrowClicked,
+		onCloseCase
+	}: ChatHeaderProps = $props();
+
+	let showMenu = $state(false);
+</script>
+
+<div class="flex items-center justify-between">
+	{#if caseDetailsWidget}
+		{@render caseDetailsWidget?.()}
+	{:else}
+		<div class="flex w-full items-center gap-1.5">
+			{@render leadingWidget?.()}
+			{#if showBackArrow}
+				<button aria-label="back" onclick={onBackArrowClicked}>
+					<IconifyIcon
+						icon="ep:back"
+						class="block rounded-full p-2 hover:bg-gray-200 lg:hidden"
+						style="font-size: 20px;"
+					/>
+				</button>
+			{/if}
+			<div class="flex items-center gap-3">
+				{#if user?.profileImageUrl}
+					<Avatar
+						src={user?.profileImageUrl}
+						alt="pic"
+						class="h-14 w-14 border text-lg font-medium"
+					/>
+				{:else if user?.initials}
+					<Avatar class="h-14 w-14 border bg-primary-500 text-lg font-medium text-white"
+						>{user.initials}</Avatar
+					>
+				{:else}
+					<Avatar src={logoUrl} alt="logo" class="h-14 w-14 border text-lg font-medium" />
+				{/if}
+				<div class="flex flex-col">
+					<div class="font-medium capitalize">{user.name}</div>
+					<div class="flex gap-2">
+						<div class="max-w-xs truncate text-sm text-gray-500 capitalize">
+							<span class=" font-medium text-black">Title:</span>
+							<span title={caseTitle}>
+								{caseTitle}
+							</span>
+						</div>
+						<div class="text-sm text-gray-500 capitalize">
+							<span class="font-medium text-black">status: </span>
+							{caseStatus}
+						</div>
+						<div class="text-sm" class:hidden={!showAssignedTo}>
+							<span>Assigned To :</span> <span class="text-gray-500">{assignedTo}</span>
+						</div>
+					</div>
+					<div class="flex gap-2">
+						<div class="max-w-xl truncate text-sm text-gray-500 capitalize">
+							{caseTypes}
+						</div>
+					</div>
+					{#if showFollowCaseButton}
+						<div class="">
+							<button
+								onclick={() => onToggleFollowCase?.(isFollowingCase ? 'unfollow' : 'follow')}
+								class="flex w-fit items-center gap-1 rounded bg-gray-200 px-2 py-0.5 text-xs hover:bg-gray-300"
+							>
+								<span>{isFollowingCase ? 'Unfollow' : 'Follow'}</span>
+								<IconifyIcon icon={isFollowingCase ? 'mdi:eye-off' : 'mdi:eye'} />
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+	{@render trailingWidget?.()}
+	{#if showOverflowActionButton}
+		<div class="w-10"></div>
+	{/if}
+
+	{#if showOverflowActionButton}
+		<div
+			class="relative space-y-2"
+			use:clickOutsideAction
+			onclickoutside={() => (showMenu = false)}
+		>
+			<button
+				aria-label="toggle menu"
+				class="grid place-content-center rounded-full p-1 text-gray-600 hover:bg-gray-200"
+				onclick={() => (showMenu = !showMenu)}
+			>
+				<IconifyIcon icon="mdi:dots-vertical" style="font-size: 25px;" />
+			</button>
+			{#if showMenu}
+				<div
+					class="absolute right-3 z-10 flex w-44 flex-col divide-y rounded-md bg-white py-1 shadow-md shadow-gray-300"
+					transition:slide
+					use:clickOutsideAction
+				>
+					{#if showFollowOverflowAction}
+						{#if !isFollowingCase}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
+								onclick={() => {
+									onToggleFollowCase?.('follow');
+									showMenu = false;
+								}}><IconifyIcon icon="mdi:eye" style="font-size: 20px;" /> Follow Case</DropdownItem
+							>
+						{:else}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
+								onclick={() => {
+									onToggleFollowCase?.('unfollow');
+									showMenu = false;
+								}}
+								><IconifyIcon icon="mdi:eye-off" style="font-size: 20px;" /> Unfollow Case</DropdownItem
+							>
+						{/if}
+					{/if}
+					{#if overflowActionsList.length > 0}
+						{#each overflowActionsList as item}
+							<DropdownItem
+								class="flex w-full appearance-none items-center gap-1 whitespace-nowrap list-none"
+								onclick={() => {
+									onOverflowActionClicked?.(item);
+									showMenu = false;
+								}}
+								><IconifyIcon icon={item.icon} style="font-size: 20px;" />
+								{item.label}</DropdownItem
+							>
+						{/each}
+					{/if}
+					{#if showCloseOverflowAction}
+						<DropdownItem
+							class="flex w-full appearance-none items-center gap-1 whitespace-nowrap text-red-600 list-none"
+							onclick={() => {
+								onCloseCase?.();
+								showMenu = false;
+							}}
+							><IconifyIcon icon="tabler:message-2-x" style="font-size: 20px;" /> Close Case</DropdownItem
+						>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>