@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/layout/mailing/MailToolBar.svelte

@@ -1,174 +1,174 @@
-<script lang="ts">
-	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
-	import { scale, slide } from 'svelte/transition';
-	import type { MailToolBarProps } from './index.js';
-	import { Input } from '../../forms/input/index.js';
-	import MailPaginator from './MailPaginator.svelte';
-	import { Tooltip } from '../../ui/tooltip/index.js';
-
-	let {
-		onBackClick,
-		onRefreshClick,
-		onComposeClick,
-		selectedMails = [],
-		showComposeButton = true,
-		showBackButton = true,
-		pageInfo = {
-			currentPage: 0,
-			pageSize: 0,
-			totalCount: 0,
-			hasNextPage: false,
-			hasPreviousPage: false
-		},
-		showPagination = true,
-		showSearch = true,
-		customFilterComponent,
-		onsearchChange,
-		onNextPageClick,
-		onPrevPageClick,
-		showArchiveButton = true,
-		onArchiveClick,
-		showDeleteButton = true,
-		onDeleteClick,
-		showMarkReadButton = true,
-		onToggleMarkReadClick,
-		isReadActive = false,
-		showFavoriteButton = true,
-		onToggleFavoriteClick,
-		showMarkAsSpamButton = true,
-		onMarkAsSpamClick,
-		isFavoriteActive = true
-	}: MailToolBarProps = $props();
-
-	let openFilter = $state(false);
-</script>
-
-<div class="flex h-full w-full items-center justify-between">
-	<div class="flex items-center">
-		<div class="flex items-center">
-			<div class:hidden={!showBackButton} class="ml-3 flex items-center">
-				<button
-					onclick={onBackClick}
-					class="grid h-8 w-8 place-content-center rounded-full border border-gray-300 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="ic:round-arrow-back-ios-new" class="flex h-5 w-5 justify-center" />
-				</button>
-				<Tooltip placement="bottom">Back</Tooltip>
-			</div>
-			<div class="ml-3 flex items-center">
-				<button
-					onclick={onRefreshClick}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="mdi:refresh" class="flex h-5 w-5 justify-center" />
-				</button>
-				<Tooltip placement="bottom">Refresh</Tooltip>
-			</div>
-			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
-			></span>
-			<div class="flex items-center space-x-2" class:hidden={selectedMails.length === 0} in:scale>
-				<button
-					onclick={() => onArchiveClick?.()}
-					class:hidden={!showArchiveButton}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="mdi:archive-arrow-down-outline" class="flex h-5 w-5 justify-center" />
-				</button>
-				<Tooltip placement="bottom">Archive</Tooltip>
-
-				<button
-					class:hidden={!showMarkAsSpamButton}
-					onclick={() => onMarkAsSpamClick?.()}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="solar:danger-triangle-outline" class="flex h-5 w-5 justify-center" />
-				</button>
-				<Tooltip placement="bottom">Mark As Spam</Tooltip>
-
-				<button
-					class:hidden={!showDeleteButton}
-					onclick={() => onDeleteClick?.()}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="mdi:delete-outline" class="flex h-5 w-5 justify-center" />
-				</button>
-				<Tooltip placement="bottom">Delete</Tooltip>
-			</div>
-			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
-			></span>
-			<div class:hidden={selectedMails.length === 0} in:scale class="flex items-center space-x-2">
-				<button
-					class:hidden={!showMarkReadButton}
-					onclick={() => onToggleMarkReadClick?.(isReadActive ? 'unread' : 'read')}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon
-						icon={isReadActive ? 'mdi:email-outline' : 'mdi:email-open-outline'}
-						class="flex h-5 w-5 justify-center"
-					/>
-				</button>
-				<Tooltip placement="bottom">{isReadActive ? 'Mark As Unread' : 'Mark As Read'}</Tooltip>
-
-				<button
-					class:hidden={!showFavoriteButton}
-					onclick={() => onToggleFavoriteClick?.(isFavoriteActive ? 'unfavorite' : 'favorite')}
-					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon
-						icon={isFavoriteActive ? 'mdi:star' : 'mdi:star-outline'}
-						class="flex h-5 w-5 justify-center"
-					/>
-				</button>
-				<Tooltip placement="bottom">{isFavoriteActive ? 'Unfavorite' : 'Favorite'}</Tooltip>
-			</div>
-			<span class:hidden={!showSearch} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
-			<div
-				class:hidden={!showSearch}
-				class="flex items-center justify-center rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100"
-			>
-				<IconifyIcon icon="iconamoon:search-thin" style="font-size: 16px;" />
-				<Input
-					type="search"
-					class="h-5 w-44 border-none text-xs outline-none placeholder:text-xs focus:ring-0"
-					placeholder="Search..."
-					oninput={(e) => onsearchChange?.((e.target as HTMLInputElement).value)}
-				/>
-			</div>
-			<div class:hidden={!customFilterComponent} class="relative pl-2">
-				<button
-					onclick={() => (openFilter = !openFilter)}
-					class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-				>
-					<IconifyIcon icon="mage:filter" />
-					<span>Filters</span>
-				</button>
-				{#if openFilter}
-					<div transition:slide class="absolute z-20 mt-2 w-80 rounded-md bg-white shadow">
-						{@render customFilterComponent?.()}
-					</div>
-				{/if}
-			</div>
-			<span class:hidden={!showComposeButton} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
-			<div class:hidden={!showComposeButton} class="flex h-8 items-center">
-				<button
-					onclick={() => onComposeClick?.()}
-					class="flex items-center justify-center space-x-2 rounded bg-blue-600 px-6 py-1.5 text-gray-100 transition duration-150 hover:bg-blue-700"
-				>
-					<IconifyIcon icon="ic:round-add" style="font-size: 16px;" />
-					<span class="text-sm">Compose</span>
-				</button>
-			</div>
-		</div>
-	</div>
-	<div class:hidden={!showPagination}>
-		<MailPaginator
-			currentPage={pageInfo.currentPage}
-			totalCount={pageInfo.totalCount}
-			pageSize={pageInfo.pageSize}
-			hasNextPage={pageInfo.hasNextPage}
-			hasPreviousPage={pageInfo.hasPreviousPage}
-			onNextClick={() => onNextPageClick?.()}
-			onPreviousClick={() => onPrevPageClick?.()}
-		/>
-	</div>
-</div>
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import { scale, slide } from 'svelte/transition';
+	import type { MailToolBarProps } from './index.js';
+	import { Input } from '../../forms/input/index.js';
+	import MailPaginator from './MailPaginator.svelte';
+	import { Tooltip } from '../../ui/tooltip/index.js';
+
+	let {
+		onBackClick,
+		onRefreshClick,
+		onComposeClick,
+		selectedMails = [],
+		showComposeButton = true,
+		showBackButton = true,
+		pageInfo = {
+			currentPage: 0,
+			pageSize: 0,
+			totalCount: 0,
+			hasNextPage: false,
+			hasPreviousPage: false
+		},
+		showPagination = true,
+		showSearch = true,
+		customFilterComponent,
+		onsearchChange,
+		onNextPageClick,
+		onPrevPageClick,
+		showArchiveButton = true,
+		onArchiveClick,
+		showDeleteButton = true,
+		onDeleteClick,
+		showMarkReadButton = true,
+		onToggleMarkReadClick,
+		isReadActive = false,
+		showFavoriteButton = true,
+		onToggleFavoriteClick,
+		showMarkAsSpamButton = true,
+		onMarkAsSpamClick,
+		isFavoriteActive = true
+	}: MailToolBarProps = $props();
+
+	let openFilter = $state(false);
+</script>
+
+<div class="flex h-full w-full items-center justify-between">
+	<div class="flex items-center">
+		<div class="flex items-center">
+			<div class:hidden={!showBackButton} class="ml-3 flex items-center">
+				<button
+					onclick={onBackClick}
+					class="grid h-8 w-8 place-content-center rounded-full border border-gray-300 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="ic:round-arrow-back-ios-new" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Back</Tooltip>
+			</div>
+			<div class="ml-3 flex items-center">
+				<button
+					onclick={onRefreshClick}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:refresh" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Refresh</Tooltip>
+			</div>
+			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
+			></span>
+			<div class="flex items-center space-x-2" class:hidden={selectedMails.length === 0} in:scale>
+				<button
+					onclick={() => onArchiveClick?.()}
+					class:hidden={!showArchiveButton}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:archive-arrow-down-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Archive</Tooltip>
+
+				<button
+					class:hidden={!showMarkAsSpamButton}
+					onclick={() => onMarkAsSpamClick?.()}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="solar:danger-triangle-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Mark As Spam</Tooltip>
+
+				<button
+					class:hidden={!showDeleteButton}
+					onclick={() => onDeleteClick?.()}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:delete-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Delete</Tooltip>
+			</div>
+			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
+			></span>
+			<div class:hidden={selectedMails.length === 0} in:scale class="flex items-center space-x-2">
+				<button
+					class:hidden={!showMarkReadButton}
+					onclick={() => onToggleMarkReadClick?.(isReadActive ? 'unread' : 'read')}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon
+						icon={isReadActive ? 'mdi:email-outline' : 'mdi:email-open-outline'}
+						class="flex h-5 w-5 justify-center"
+					/>
+				</button>
+				<Tooltip placement="bottom">{isReadActive ? 'Mark As Unread' : 'Mark As Read'}</Tooltip>
+
+				<button
+					class:hidden={!showFavoriteButton}
+					onclick={() => onToggleFavoriteClick?.(isFavoriteActive ? 'unfavorite' : 'favorite')}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon
+						icon={isFavoriteActive ? 'mdi:star' : 'mdi:star-outline'}
+						class="flex h-5 w-5 justify-center"
+					/>
+				</button>
+				<Tooltip placement="bottom">{isFavoriteActive ? 'Unfavorite' : 'Favorite'}</Tooltip>
+			</div>
+			<span class:hidden={!showSearch} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
+			<div
+				class:hidden={!showSearch}
+				class="flex items-center justify-center rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100"
+			>
+				<IconifyIcon icon="iconamoon:search-thin" style="font-size: 16px;" />
+				<Input
+					type="search"
+					class="h-5 w-44 border-none text-xs outline-none placeholder:text-xs focus:ring-0"
+					placeholder="Search..."
+					oninput={(e) => onsearchChange?.((e.target as HTMLInputElement).value)}
+				/>
+			</div>
+			<div class:hidden={!customFilterComponent} class="relative pl-2">
+				<button
+					onclick={() => (openFilter = !openFilter)}
+					class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mage:filter" />
+					<span>Filters</span>
+				</button>
+				{#if openFilter}
+					<div transition:slide class="absolute z-20 mt-2 w-80 rounded-md bg-white shadow">
+						{@render customFilterComponent?.()}
+					</div>
+				{/if}
+			</div>
+			<span class:hidden={!showComposeButton} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
+			<div class:hidden={!showComposeButton} class="flex h-8 items-center">
+				<button
+					onclick={() => onComposeClick?.()}
+					class="flex items-center justify-center space-x-2 rounded bg-blue-600 px-6 py-1.5 text-gray-100 transition duration-150 hover:bg-blue-700"
+				>
+					<IconifyIcon icon="ic:round-add" style="font-size: 16px;" />
+					<span class="text-sm">Compose</span>
+				</button>
+			</div>
+		</div>
+	</div>
+	<div class:hidden={!showPagination}>
+		<MailPaginator
+			currentPage={pageInfo.currentPage}
+			totalCount={pageInfo.totalCount}
+			pageSize={pageInfo.pageSize}
+			hasNextPage={pageInfo.hasNextPage}
+			hasPreviousPage={pageInfo.hasPreviousPage}
+			onNextClick={() => onNextPageClick?.()}
+			onPreviousClick={() => onPrevPageClick?.()}
+		/>
+	</div>
+</div>

package/dist/layout/mailing/MailingContent.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-	interface Props {
-		content: any;
-	}
-	let { content }: Props = $props();
-</script>
-
-<div class="h-full w-full">
-	{@html content}
-</div>
+<script lang="ts">
+	interface Props {
+		content: any;
+	}
+	let { content }: Props = $props();
+</script>
+
+<div class="h-full w-full">
+	{@html content}
+</div>

package/dist/layout/mailing/MailingHeader.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-	import { Avatar } from '../../ui/avatar/index.js';
-	import DropdownDivider from '../../ui/dropdown/DropdownDivider.svelte';
-	import { IconifyIcon } from '../../ui/icons/index.js';
-	import type { MailingHeaderProps } from './types.js';
-
-	let { data, replyType = $bindable(undefined), showReplies }: MailingHeaderProps = $props();
-</script>
-
-<div class=" w-full bg-white p-4">
-	<div class="flex h-full w-full flex-col">
-		<p class="text-xl font-light">{data?.subject}</p>
-		<DropdownDivider />
-		<div class="flex justify-between pt-3">
-			<div class="flex items-center gap-2">
-				<Avatar class="h-10 w-10 bg-blue-600 text-white">{data?.user?.initials}</Avatar>
-				<div>
-					<p class="text-sm">
-						{`${data?.user?.firstName} ${data?.user?.surname} - ${data?.user?.staffNumber}`}
-					</p>
-					<div class="flex items-center gap-1">
-						<p class="text-xs text-gray-500 antialiased">to {data?.to}</p>
-						<button class="grid place-content-center rounded-full p-1.5 hover:bg-gray-200">
-							<IconifyIcon icon="solar:alt-arrow-down-bold" style="font-size: 14px;" />
-						</button>
-					</div>
-				</div>
-			</div>
-			<div class="flex items-center gap-3" class:hidden={!showReplies}>
-				<button
-					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-					onclick={() => (replyType = 'reply')}
-				>
-					<IconifyIcon icon="bi:reply" style="font-size: 17px;" />
-					Reply
-				</button>
-				<button
-					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-					onclick={() => (replyType = 'reply-all')}
-				>
-					<IconifyIcon icon="ri:reply-all-line" style="font-size: 17px;" />
-					Reply all
-				</button>
-				<button
-					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
-					onclick={() => (replyType = 'forward')}
-				>
-					<IconifyIcon icon="mdi:forward-outline" style="font-size: 17px;" />
-					Forward
-				</button>
-			</div>
-		</div>
-		<!-- <Divider morePadding={false} /> -->
-	</div>
-</div>
+<script lang="ts">
+	import { Avatar } from '../../ui/avatar/index.js';
+	import DropdownDivider from '../../ui/dropdown/DropdownDivider.svelte';
+	import { IconifyIcon } from '../../ui/icons/index.js';
+	import type { MailingHeaderProps } from './types.js';
+
+	let { data, replyType = $bindable(undefined), showReplies }: MailingHeaderProps = $props();
+</script>
+
+<div class=" w-full bg-white p-4">
+	<div class="flex h-full w-full flex-col">
+		<p class="text-xl font-light">{data?.subject}</p>
+		<DropdownDivider />
+		<div class="flex justify-between pt-3">
+			<div class="flex items-center gap-2">
+				<Avatar class="h-10 w-10 bg-blue-600 text-white">{data?.user?.initials}</Avatar>
+				<div>
+					<p class="text-sm">
+						{`${data?.user?.firstName} ${data?.user?.surname} - ${data?.user?.staffNumber}`}
+					</p>
+					<div class="flex items-center gap-1">
+						<p class="text-xs text-gray-500 antialiased">to {data?.to}</p>
+						<button class="grid place-content-center rounded-full p-1.5 hover:bg-gray-200">
+							<IconifyIcon icon="solar:alt-arrow-down-bold" style="font-size: 14px;" />
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="flex items-center gap-3" class:hidden={!showReplies}>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'reply')}
+				>
+					<IconifyIcon icon="bi:reply" style="font-size: 17px;" />
+					Reply
+				</button>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'reply-all')}
+				>
+					<IconifyIcon icon="ri:reply-all-line" style="font-size: 17px;" />
+					Reply all
+				</button>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'forward')}
+				>
+					<IconifyIcon icon="mdi:forward-outline" style="font-size: 17px;" />
+					Forward
+				</button>
+			</div>
+		</div>
+		<!-- <Divider morePadding={false} /> -->
+	</div>
+</div>