mertani-web-toolkit 0.1.17 → 0.1.18

package/README.md

@@ -4,6 +4,8 @@ Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.c
 
 Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
+📘 **Documentation:** [storybook.mertani.com](https://storybook.mertani.com/)
+
 ## Creating a project
 
 If you're seeing this, you've probably already done this step. Congrats!

package/dist/icons/ChevronDown.svelte

@@ -0,0 +1,59 @@
+
+<script lang="ts">
+	type PresetDirection = 'down' | 'up' | 'left' | 'right';
+
+	const {
+		width = 12,
+		height = 8,
+		direction = 'down'
+	} = $props<{
+		width?: number | string;
+		height?: number | string;
+		direction?: PresetDirection | number | string;
+	}>();
+
+	const presets: Record<PresetDirection, string> = {
+		down: 'rotate(0deg)',
+		up: 'rotate(180deg)',
+		left: 'rotate(90deg)',
+		right: 'rotate(-90deg)'
+	};
+
+	function normalizeRotation(value: PresetDirection | number | string): string {
+		if (typeof value === 'string') {
+			const trimmed = value.trim().toLowerCase();
+			if (trimmed in presets) {
+				return presets[trimmed as PresetDirection];
+			}
+			if (/^-?\d+(\.\d+)?(deg|rad|turn)?$/.test(trimmed)) {
+				// Append deg if unit missing
+				const unit = /deg|rad|turn$/.test(trimmed) ? '' : 'deg';
+				return `rotate(${trimmed}${unit})`;
+			}
+		}
+
+		if (typeof value === 'number' && Number.isFinite(value)) {
+			return `rotate(${value}deg)`;
+		}
+
+		return presets.down;
+	}
+
+	const transform = $derived(normalizeRotation(direction));
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{width}
+	{height}
+	viewBox="0 0 12 8"
+	fill="currentColor"
+	style={`transform: ${transform}; transform-origin: center; transition: transform 0.2s ease;`}
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M0.4403 1.06506C0.48094 1.02431 0.529218 0.991987 0.58237 0.969932C0.635522 0.947876 0.692503 0.936523 0.75005 0.936523C0.807596 0.936523 0.864577 0.947876 0.917729 0.969932C0.970881 0.991987 1.01916 1.02431 1.0598 1.06506L6.00005 6.00618L10.9403 1.06506C10.981 1.02438 11.0293 0.992112 11.0824 0.970097C11.1356 0.948083 11.1925 0.936752 11.25 0.936752C11.3076 0.936752 11.3645 0.948083 11.4177 0.970097C11.4708 0.992112 11.5191 1.02438 11.5598 1.06506C11.6005 1.10573 11.6327 1.15402 11.6548 1.20717C11.6768 1.26032 11.6881 1.31728 11.6881 1.37481C11.6881 1.43233 11.6768 1.48929 11.6548 1.54244C11.6327 1.59559 11.6005 1.64388 11.5598 1.68456L6.3098 6.93456C6.26916 6.9753 6.22088 7.00762 6.16773 7.02968C6.11458 7.05173 6.0576 7.06309 6.00005 7.06309C5.9425 7.06309 5.88552 7.05173 5.83237 7.02968C5.77922 7.00762 5.73094 6.9753 5.6903 6.93456L0.4403 1.68456C0.399557 1.64392 0.367232 1.59564 0.345176 1.54248C0.323121 1.48933 0.311768 1.43235 0.311768 1.37481C0.311768 1.31726 0.323121 1.26028 0.345176 1.20713C0.367232 1.15397 0.399557 1.1057 0.4403 1.06506Z"
+		fill="currentColor"
+	/>
+</svg>

package/dist/icons/ChevronDown.svelte.d.ts

@@ -0,0 +1,9 @@
+type PresetDirection = 'down' | 'up' | 'left' | 'right';
+type $$ComponentProps = {
+    width?: number | string;
+    height?: number | string;
+    direction?: PresetDirection | number | string;
+};
+declare const ChevronDown: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChevronDown = ReturnType<typeof ChevronDown>;
+export default ChevronDown;

package/dist/icons/GearTwo.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	const { width = 16, height = 17, color = '#212529' } = $props();
+</script>
+
+<svg {width} {height} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_6267_47931)">
+		<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />
+		<path
+			d="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"
+			fill={color}
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_6267_47931">
+			<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+		</clipPath>
+	</defs>
+</svg>

package/dist/icons/GearTwo.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const GearTwo: import("svelte").Component<{
+    width?: number;
+    height?: number;
+    color?: string;
+}, {}, "">;
+type GearTwo = ReturnType<typeof GearTwo>;
+export default GearTwo;

package/dist/icons/Logout.svelte

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6" stroke="#3F4047" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/icons/Logout.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Logout;
+type Logout = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Logout: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/User.svelte

@@ -0,0 +1,11 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2167_105141)">
+<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01"/>
+<path d="M8 8.49902C8.79565 8.49902 9.55871 8.18295 10.1213 7.62034C10.6839 7.05773 11 6.29467 11 5.49902C11 4.70337 10.6839 3.94031 10.1213 3.3777C9.55871 2.81509 8.79565 2.49902 8 2.49902C7.20435 2.49902 6.44129 2.81509 5.87868 3.3777C5.31607 3.94031 5 4.70337 5 5.49902C5 6.29467 5.31607 7.05773 5.87868 7.62034C6.44129 8.18295 7.20435 8.49902 8 8.49902ZM10 5.49902C10 6.02946 9.78929 6.53816 9.41421 6.91324C9.03914 7.28831 8.53043 7.49902 8 7.49902C7.46957 7.49902 6.96086 7.28831 6.58579 6.91324C6.21071 6.53816 6 6.02946 6 5.49902C6 4.96859 6.21071 4.45988 6.58579 4.08481C6.96086 3.70974 7.46957 3.49902 8 3.49902C8.53043 3.49902 9.03914 3.70974 9.41421 4.08481C9.78929 4.45988 10 4.96859 10 5.49902ZM14 13.499C14 14.499 13 14.499 13 14.499H3C3 14.499 2 14.499 2 13.499C2 12.499 3 9.49902 8 9.49902C13 9.49902 14 12.499 14 13.499ZM13 13.495C12.999 13.249 12.846 12.509 12.168 11.831C11.516 11.179 10.289 10.499 8 10.499C5.71 10.499 4.484 11.179 3.832 11.831C3.154 12.509 3.002 13.249 3 13.495H13Z" fill="#212529"/>
+</g>
+<defs>
+<clipPath id="clip0_2167_105141">
+<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/icons/User.svelte.d.ts

@@ -0,0 +1,26 @@
+export default User;
+type User = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const User: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/Window.svelte

@@ -0,0 +1,10 @@
+<script>
+	const { width = 16, height = 16, color = '#000', rotate = false } = $props();
+</script>
+
+<svg {width} {height} style={rotate ? 'transform: rotate(180deg)' : ''} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M16.5 3C16.5 1.89543 15.6046 1 14.5 1H2.5C1.39543 1 0.5 1.89543 0.5 3V13C0.5 14.1046 1.39543 15 2.5 15H14.5C15.6046 15 16.5 14.1046 16.5 13V3ZM11.5 2V14H2.5C1.94771 14 1.5 13.5523 1.5 13V3C1.5 2.44772 1.94772 2 2.5 2H11.5ZM12.5 2H14.5C15.0523 2 15.5 2.44772 15.5 3V13C15.5 13.5523 15.0523 14 14.5 14H12.5V2Z"
+		fill={color}
+	/>
+</svg>

package/dist/icons/Window.svelte.d.ts

@@ -0,0 +1,17 @@
+export default Window;
+type Window = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Window: import("svelte").Component<{
+    width?: number;
+    height?: number;
+    color?: string;
+    rotate?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    width?: number;
+    height?: number;
+    color?: string;
+    rotate?: boolean;
+};

package/dist/layouts/IMS/IMSLayout@1/IMSLayout@1.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'tailwindcss/theme';
+@import 'tailwindcss/utilities';

package/dist/layouts/IMS/IMSLayout@1/IMSLayout@1.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import './IMSLayout@1.css';
+	import ImsHeader from './components/ImsHeader.svelte';
+	import ImsSidebar from './components/ImsSidebar.svelte';
+	import type { IImsLayout } from './types/IImsLayout.js';
+
+	const { children, appName, header, sidebar, pageInfo }: IImsLayout = $props();
+
+	let showSidebar = $state(true);
+
+	function onToggleSidebar() {
+		showSidebar = !showSidebar;
+	}
+</script>
+
+<svelte:head>
+	<title>{appName}</title>
+</svelte:head>
+
+<div class="flex h-screen flex-col bg-[#F5F5F5]">
+	<div class="flex flex-1 overflow-hidden">
+		<ImsSidebar bind:show={showSidebar} {pageInfo} sidebar={sidebar || {}} />
+		<main class="flex-1 overflow-auto bg-[#f6f8fa]">
+			<ImsHeader {showSidebar} version={header?.version} {onToggleSidebar} />
+		</main>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+</style>

package/dist/layouts/IMS/IMSLayout@1/IMSLayout@1.svelte.d.ts

@@ -0,0 +1,5 @@
+import './IMSLayout@1.css';
+import type { IImsLayout } from './types/IImsLayout.js';
+declare const IMSLayout1: import("svelte").Component<IImsLayout, {}, "">;
+type IMSLayout1 = ReturnType<typeof IMSLayout1>;
+export default IMSLayout1;

package/dist/layouts/IMS/IMSLayout@1/components/ImsHeader.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Window from '../../../../icons/Window.svelte';
+
+	const {
+		version = 'v1.0.0',
+		showSidebar,
+		onToggleSidebar
+	} = $props<{ version?: string; showSidebar: boolean; onToggleSidebar: () => void }>();
+</script>
+
+<header
+	class="sticky top-0 z-20 flex h-[60px] items-center justify-between border-b border-[#e0e0e0] bg-white p-4"
+>
+	<button
+		type="button"
+		title="Toggle sidebar"
+		onclick={onToggleSidebar}
+		class="grid h-10 w-10 place-items-center rounded-lg border border-transparent text-[#495057] transition hover:border-[#e0e0e0] hover:bg-[#f5f5f5]"
+	>
+		<Window color={'currentColor'} width={20} height={20} rotate={showSidebar ? true : false} />
+	</button>
+	<span class="text-sm font-medium">Versi {version}</span>
+</header>

package/dist/layouts/IMS/IMSLayout@1/components/ImsHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    version?: string;
+    showSidebar: boolean;
+    onToggleSidebar: () => void;
+};
+declare const ImsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImsHeader = ReturnType<typeof ImsHeader>;
+export default ImsHeader;

package/dist/layouts/IMS/IMSLayout@1/components/ImsSidebar.svelte

@@ -0,0 +1,335 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import ChevronDown from '../../../../icons/ChevronDown.svelte';
+	import GearTwo from '../../../../icons/GearTwo.svelte';
+	import User from '../../../../icons/User.svelte';
+	import Logout from '../../../../icons/Logout.svelte';
+	import type { ISidebarData } from '../types/IImsLayout.js';
+	import { USER_ROLE_ADMIN, UserStore } from '../../../../stores/UserStore.js';
+	import { deleteCookie, USER_TOKEN } from '../../../../utils/Cookie.js';
+
+	const {
+		show = $bindable(true),
+		pageInfo,
+		sidebar
+	} = $props<{ show?: boolean; pageInfo: any; sidebar: ISidebarData }>();
+
+	let selectedDropdownId = $state(pageInfo.namespace || sidebar.dropdownData?.[0]?.id);
+	let areaDropdownOpen = $state(false);
+	let userMenuOpen = $state(false);
+	let openGroups = $state<Record<string, boolean>>({});
+
+	let dropdownRef: HTMLDivElement | undefined;
+	const user = sidebar.user ?? { name: '', role: '', initials: '' };
+	const isAdmin = user?.role === USER_ROLE_ADMIN;
+
+	const navItems = $derived(sidebar.nav ?? []);
+	const selectedDropdownLabel = $derived(
+		sidebar.dropdownData?.find((item: any) => item.id === selectedDropdownId)?.name ?? ''
+	);
+
+	onMount(() => {
+		const handleDocumentClick = (event: MouseEvent) => {
+			if (!dropdownRef) return;
+			const target = event.target as Node | null;
+			if (!target || dropdownRef.contains(target)) return;
+			areaDropdownOpen = false;
+		};
+
+		document.addEventListener('click', handleDocumentClick);
+		return () => document.removeEventListener('click', handleDocumentClick);
+	});
+
+	function toggleAreaDropdown() {
+		areaDropdownOpen = !areaDropdownOpen;
+	}
+
+	function closeAreaDropdown() {
+		areaDropdownOpen = false;
+	}
+
+	function toggleUserMenu() {
+		userMenuOpen = !userMenuOpen;
+	}
+
+	function handleLogout() {
+		toggleUserMenu();
+		UserStore.set(null);
+		deleteCookie(USER_TOKEN);
+		sessionStorage.removeItem('organization_detail');
+		goto('/');
+	}
+
+	function handleProfileClick() {
+		goto('/user/profile');
+	}
+
+	function selectArea(areaId: string) {
+		selectedDropdownId = areaId;
+		closeAreaDropdown();
+
+		// Split the current pathname and find if any segment matches an area id
+		const pathSegments = page.url.pathname.split('/').filter(Boolean);
+		const areaIndex = pathSegments.findIndex((segment) =>
+			sidebar.dropdownData?.some((item: any) => item.id === segment)
+		);
+
+		if (areaIndex !== -1) {
+			// Replace the matched area id with the newly selected areaId
+			pathSegments[areaIndex] = areaId;
+			const newPath = '/' + pathSegments.join('/');
+			goto(newPath);
+		}
+	}
+
+	function gotoSlug(slug: string) {
+		if (!slug) return;
+		const segments = page.url.pathname.split('/').filter(Boolean);
+		const areaIndex = segments.findIndex((segment) =>
+			sidebar.dropdownData?.some((item: any) => item.id === segment)
+		);
+		const baseSegments = areaIndex !== -1 ? segments.slice(0, areaIndex + 1) : segments;
+		const targetPath = '/' + [...baseSegments, slug].join('/');
+		if (targetPath !== page.url.pathname) {
+			goto(targetPath);
+		}
+	}
+
+	function handleAreaButtonKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+			event.preventDefault();
+			if (!areaDropdownOpen) {
+				areaDropdownOpen = true;
+			}
+		}
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			closeAreaDropdown();
+		}
+	}
+
+	function toggleGroup(title: string) {
+		openGroups = { ...openGroups, [title]: !openGroups[title] };
+	}
+
+	$effect(() => {
+		if (typeof window === 'undefined') {
+			return;
+		}
+
+		const pathname = page.url.pathname;
+		const items = navItems;
+		if (!items.length) {
+			return;
+		}
+
+		const hasMatch = items.some((item: any) => {
+			if (item.children && item.children.length) {
+				return item.children.some((child: any) => pathname.split('/').includes(child.slug));
+			}
+			return pathname.split('/').includes(item.slug);
+		});
+		if (hasMatch) {
+			return;
+		}
+
+		const fallbackItem = items[0];
+		const targetSlug = fallbackItem.children?.[0]?.slug ?? fallbackItem.slug;
+
+		//TODO: buat dinamis untuk White list path
+		const pathSegments = pathname.split('/');
+		if (pathSegments.includes('kelola-sub-daerah-irigasi')) {
+			if (sidebar?.user?.role === USER_ROLE_ADMIN) {
+				return;
+			} else {
+				goto('/404');
+				return;
+			}
+		}
+		if (targetSlug && !pathSegments.includes(targetSlug)) {
+			gotoSlug(targetSlug);
+		}
+	});
+
+	$effect(() => {
+		if (!show) {
+			areaDropdownOpen = false;
+			userMenuOpen = false;
+		}
+	});
+</script>
+
+<aside
+	class={`shrink-0 overflow-visible border-r border-[#e0e0e0] bg-white transition-all duration-200 ease-in-out ${
+		show ? 'w-[250px]' : 'w-0'
+	}`}
+>
+	<div class="flex h-full flex-col bg-white">
+		<div class="flex h-[60px] items-center border-b border-[#EAECF0] px-4 py-2.5">
+			<img src={sidebar.logoUrl} alt={'Logo'} class="h-10 w-10 object-contain" />
+		</div>
+
+		<div class="flex flex-col gap-1 border-b border-[#EAECF0] px-4 py-4" bind:this={dropdownRef}>
+			<div class="text-sm font-medium text-[#2C2C30]">
+				{sidebar.dropdownLabel || 'Pilih Sub Daerah Irigasi'}
+			</div>
+			<div class="flex items-center rounded-sm border border-[#CED4DA]">
+				{#if show}
+					<div class="relative flex-1">
+						<button
+							type="button"
+							class="flex w-full items-center justify-between rounded-sm bg-white p-2 text-left text-sm text-[#2C2C30]"
+							onclick={toggleAreaDropdown}
+							onkeydown={handleAreaButtonKeydown}
+						>
+							<span class="truncate">{selectedDropdownLabel || 'Pilih'}</span>
+							<ChevronDown direction={areaDropdownOpen ? 'up' : 'down'} />
+						</button>
+						{#if areaDropdownOpen}
+							<div
+								class="absolute top-full right-0 left-0 z-20 mt-2 overflow-hidden rounded-md bg-white shadow-lg"
+							>
+								<div class="max-h-56 overflow-y-auto py-1">
+									{#if sidebar.dropdownData.length}
+										{#each sidebar.dropdownData as area}
+											<button
+												type="button"
+												class={`flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs transition ${
+													area.id === selectedDropdownId
+														? 'text-[#F79B09]'
+														: 'text-[#212529] hover:bg-[#F5F5F5]'
+												}`}
+												onclick={() => selectArea(area.id)}
+											>
+												<span class="truncate">{area.name}</span>
+											</button>
+										{/each}
+									{:else}
+										<div class="px-3 py-2 text-xs text-slate-400">Tidak ada hasil</div>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/if}
+				{#if isAdmin}
+					<button
+						type="button"
+						onclick={() => gotoSlug('kelola-sub-daerah-irigasi')}
+						class="flex size-9 items-center justify-center rounded-r-sm border-l border-[#CED4DA] bg-[#E9ECEF] text-[#2C2C30]"
+					>
+						<GearTwo />
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		<nav class="flex flex-1 flex-col gap-2 overflow-y-auto p-4">
+			{#each sidebar.nav as item}
+				<div>
+					{#if item.children?.length}
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5]"
+							onclick={() => toggleGroup(item.title)}
+						>
+							<span class="flex items-center gap-2">
+								{#if item.icon}
+									<span class="text-[#495057]">{@html item.icon}</span>
+								{/if}
+								<span>{item.title}</span>
+							</span>
+							<ChevronDown direction={openGroups[item.title] ? 'up' : 'down'} />
+						</button>
+						{#if openGroups[item.title]}
+							<div class="mt-1 ml-6 flex flex-col gap-1">
+								{#each item.children as child}
+									<button
+										onclick={() => gotoSlug(child.slug)}
+										class={`flex items-center gap-2 rounded-md px-2.5 py-2 text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5] ${page.url.pathname.split('/').includes(child.slug) ? 'bg-[#FFF2C6]' : ''}`}
+									>
+										{#if child.icon}
+											<span class="text-[#495057]">{@html child.icon}</span>
+										{/if}
+										<span class="text-left">{child.title}</span>
+									</button>
+								{/each}
+							</div>
+						{/if}
+					{:else}
+						<button
+							onclick={() => gotoSlug(item.slug)}
+							class={`flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5] ${page.url.pathname.split('/').includes(item.slug) ? 'bg-[#FFF2C6]' : ''}`}
+						>
+							<span class="flex items-center gap-2">
+								{#if item.icon}
+									<span class="text-[#495057]">{@html item.icon}</span>
+								{/if}
+								<span>{item.title}</span>
+							</span>
+						</button>
+					{/if}
+				</div>
+			{/each}
+		</nav>
+
+		<div class="relative border-t border-[#EAECF0] p-4">
+			<button
+				type="button"
+				class="flex w-full items-center gap-2 text-left"
+				onclick={toggleUserMenu}
+			>
+				<div class="grid size-9 place-items-center">
+					<img src={user.avatarUrl} alt="avatar" class="size-full rounded-full object-cover" />
+				</div>
+				<div class="min-w-0 flex-1">
+					<div class="truncate text-[12px] font-medium text-[#495057]">{user.name}</div>
+					<div class="truncate text-[10px] text-[#ADB5BD]">{user.role}</div>
+				</div>
+				<ChevronDown direction={'right'} />
+			</button>
+			{#if userMenuOpen}
+				<div
+					class="absolute bottom-0 left-[calc(100%+12px)] z-30 w-[216px] rounded-xl border border-[#EAECF0] bg-white p-4 text-left shadow-[0px_12px_32px_rgba(15,23,42,0.12)]"
+				>
+					<div class="flex flex-col gap-3">
+						<!-- <div>
+							<div class="text-xs font-semibold text-[#2C2C30]">Ubah Role</div>
+							<div class="mt-2">
+								<select
+									class="w-full rounded-md border border-[#CED4DA] bg-white px-3 py-2 text-xs text-[#2C2C30] focus:outline-none focus:ring-2 focus:ring-[#F79B09]/40"
+								>
+								</select>
+							</div>
+							<div class="mt-1 text-[10px] text-[#ADB5BD]">Lihat view dari role lainnya</div>
+						</div>
+
+						<hr class="border-[#EAECF0]" /> -->
+
+						<button
+							type="button"
+							class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium text-[#2C2C30] transition hover:bg-[#F5F5F5]"
+							onclick={handleProfileClick}
+						>
+							<User />
+							<span>Profil Akun</span>
+						</button>
+
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs font-semibold text-[#D14343] transition hover:bg-[#FFF5F0]"
+							onclick={handleLogout}
+						>
+							<span>Keluar / Log Out</span>
+							<span class="flex items-center gap-1 text-[#D14343]">
+								<Logout />
+							</span>
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</aside>

package/dist/layouts/IMS/IMSLayout@1/components/ImsSidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ISidebarData } from '../types/IImsLayout.js';
+type $$ComponentProps = {
+    show?: boolean;
+    pageInfo: any;
+    sidebar: ISidebarData;
+};
+declare const ImsSidebar: import("svelte").Component<$$ComponentProps, {}, "show">;
+type ImsSidebar = ReturnType<typeof ImsSidebar>;
+export default ImsSidebar;

package/dist/layouts/IMS/IMSLayout@1/types/IImsLayout.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+export interface IImsLayoutHeader {
+    title?: string;
+    version?: string;
+}
+export interface ISidebarDropdown {
+    id: string;
+    name: string;
+}
+export interface ISidebarNavChild {
+    title: string;
+    slug: string;
+    icon?: string;
+    widget?: string;
+}
+export interface ISidebarNavItem {
+    title: string;
+    slug?: string;
+    icon?: string;
+    children?: ISidebarNavChild[];
+}
+export interface ISidebarUser {
+    name?: string;
+    role?: string;
+    avatarUrl?: string;
+    roleOptions?: Array<unknown>;
+}
+export interface ISidebarData {
+    logoUrl?: string;
+    dropdownLabel?: string;
+    dropdownData?: ISidebarDropdown[];
+    nav?: ISidebarNavItem[];
+    user?: ISidebarUser;
+}
+export interface IImsLayout {
+    type: string;
+    appName?: string;
+    header?: IImsLayoutHeader;
+    sidebar?: ISidebarData;
+    children?: Snippet;
+    pageInfo: {
+        type: string;
+        organization: string;
+        namespace: string;
+        pageLvl1: string;
+    };
+}

package/dist/layouts/IMS/IMSLayout@1/types/IImsLayout.js

@@ -0,0 +1 @@
+export {};

package/dist/mocks/IMS/index.d.ts

@@ -0,0 +1,42 @@
+export declare const IImsLayout: {
+    appName: string;
+    header: {
+        title: string;
+        version: string;
+    };
+    sidebar: {
+        logoUrl: string;
+        nav: ({
+            icon: string;
+            slug: string;
+            title: string;
+            children?: undefined;
+        } | {
+            children: {
+                icon: string;
+                slug: string;
+                title: string;
+            }[];
+            icon: string;
+            title: string;
+            slug?: undefined;
+        })[];
+        user: {
+            avatarUrl: string;
+            name: string;
+            role: string;
+        };
+        dropdownData: {
+            id: string;
+            name: string;
+        }[];
+    };
+    pageInfo: {
+        type: string;
+        organization: string;
+        namespace: string;
+        pageLvl1: string;
+        pageLvl2: string;
+    };
+    type: string;
+};

package/dist/mocks/IMS/index.js

@@ -0,0 +1,98 @@
+export const IImsLayout = {
+    appName: 'Saddang Irrigation Monitoring System',
+    header: {
+        title: 'Saddang Irrigation Monitoring System',
+        version: '1.2.0'
+    },
+    sidebar: {
+        logoUrl: '/assets/images/logo.png',
+        nav: [
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'beranda',
+                title: 'Beranda'
+            },
+            {
+                children: [
+                    {
+                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                        slug: 'profil-daerah-irigasi',
+                        title: 'Profil Daerah Irigasi'
+                    },
+                    {
+                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                        slug: 'infrastruktur-irigasi',
+                        title: 'Infrastruktur Irigasi'
+                    },
+                    {
+                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                        slug: 'skema-jaringan-irigasi',
+                        title: 'Skema Jaringan Irigasi'
+                    }
+                ],
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                title: 'Daerah Irigasi'
+            },
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'debit-klimatologi',
+                title: 'Debit & Klimatologi'
+            },
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'rencana-pola-tanam',
+                title: 'Rencana Pola Tanam'
+            },
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'laporan',
+                title: 'Laporan'
+            },
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'monitoring',
+                title: 'Monitoring'
+            },
+            {
+                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
+                slug: 'pengaturan',
+                title: 'Pengaturan'
+            }
+        ],
+        user: {
+            avatarUrl: 'https://storage.mertani.my.id/user-photo-10ca5eb5-5e49-45bc-abc4-59c99657a859',
+            name: 'You rooot',
+            role: 'admin-mertani'
+        },
+        dropdownData: [
+            {
+                id: '1efbafdf-f83f-42ba-a710-29f875598895',
+                name: 'pekkaabata'
+            },
+            {
+                id: 'addf69ef-3b04-4847-8e38-4755bb208242',
+                name: 'test 40'
+            },
+            {
+                id: 'd98e6173-fd7b-46fb-a0f9-c27c5cffdf6e',
+                name: 'Namespace v1.2 zzzz'
+            },
+            {
+                id: 'bf3974aa-f898-48d0-a890-09dce1d98e70',
+                name: 'test 5'
+            },
+            {
+                id: '5fa1932e-dbca-442d-b06b-a675c5f390bd',
+                name: 'Saddang'
+            }
+        ]
+    },
+    pageInfo: {
+        type: 'dashboard',
+        organization: 'ims-saddang',
+        namespace: '5fa1932e-dbca-442d-b06b-a675c5f390bd',
+        pageLvl1: 'infrastruktur-irigasi',
+        pageLvl2: 'detail-saluran_af91ba98-05ed-47f2-aeab-8d44293768c5'
+    },
+    type: 'ims-layout@1'
+};

package/dist/stores/UserStore.d.ts

@@ -0,0 +1,7 @@
+import type { User } from '../types/UserModel.js';
+export interface UserStoreModel {
+    user: User;
+    organizationIdx: number;
+}
+export declare const UserStore: import("svelte/store").Writable<UserStoreModel | null>;
+export declare const USER_ROLE_ADMIN = "admin-mertani";

package/dist/stores/UserStore.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+export const UserStore = writable(null);
+export const USER_ROLE_ADMIN = 'admin-mertani';

package/dist/types/UserModel.d.ts

@@ -0,0 +1,14 @@
+export interface User {
+    address: string;
+    created_at: string;
+    email: string;
+    is_blocked: boolean;
+    is_verified: boolean;
+    name: string;
+    organization_ids: string[];
+    phone_number: string;
+    photo: string;
+    role: string;
+    updated_at: string;
+    user_id: string;
+}

package/dist/types/UserModel.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/Cookie.d.ts

@@ -0,0 +1,4 @@
+export declare const USER_TOKEN = "user-token";
+export declare function setCookie(name: string, value: unknown, d: Date): void;
+export declare function getCookie(name: string): string;
+export declare function deleteCookie(name: string): void;

package/dist/utils/Cookie.js

@@ -0,0 +1,21 @@
+export const USER_TOKEN = 'user-token';
+export function setCookie(name, value, d) {
+    const expires = `expires=${d.toUTCString()}`;
+    document.cookie = `${name}=${value}; ${expires}; path=/;Lax`;
+}
+export function getCookie(name) {
+    const nameEq = `${name}=`;
+    const cookies = document.cookie.split(';');
+    for (let c of cookies) {
+        while (c.charAt(0) === ' ')
+            c = c.substring(1);
+        if (c.indexOf(nameEq) === 0)
+            return c.substring(nameEq.length, c.length);
+    }
+    return '';
+}
+export function deleteCookie(name) {
+    const d = new Date();
+    d.setTime(d.getTime() + -1 * 24 * 60 * 60 * 1000);
+    setCookie(name, '', d);
+}

package/package.json

@@ -1,75 +1,76 @@
-{
-	"name": "mertani-web-toolkit",
-	"version": "0.1.17",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:e2e": "playwright test",
-		"test": "npm run test:e2e",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@chromatic-com/storybook": "^4.1.1",
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.22.0",
-		"@playwright/test": "^1.49.1",
-		"@storybook/addon-a11y": "^9.1.8",
-		"@storybook/addon-docs": "^9.1.8",
-		"@storybook/addon-svelte-csf": "^5.0.8",
-		"@storybook/addon-vitest": "^9.1.8",
-		"@storybook/sveltekit": "^9.1.8",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/vite": "^4.0.0",
-		"@types/node": "^22",
-		"eslint": "^9.22.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-storybook": "^9.1.8",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.2",
-		"storybook": "^9.1.8",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4"
-	},
-	"keywords": [
-		"svelte"
-	]
-}
+{
+	"name": "mertani-web-toolkit",
+	"version": "0.1.18",
+	"homepage": "https://storybook.mertani.com/",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:e2e": "playwright test",
+		"test": "npm run test:e2e",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.1.1",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.22.0",
+		"@playwright/test": "^1.49.1",
+		"@storybook/addon-a11y": "^9.1.8",
+		"@storybook/addon-docs": "^9.1.8",
+		"@storybook/addon-svelte-csf": "^5.0.8",
+		"@storybook/addon-vitest": "^9.1.8",
+		"@storybook/sveltekit": "^9.1.8",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"@types/node": "^22",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-storybook": "^9.1.8",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"storybook": "^9.1.8",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^7.0.4"
+	},
+	"keywords": [
+		"svelte"
+	]
+}