@cloudparker/moldex.js 0.0.28 → 0.0.30

package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { ButtonListItem } from '../../..';
+	import ButtonBack from '../../../button/components/button-back/button-back.svelte';
+	import ButtonCloseIcon from '../../../button/components/button-close-icon/button-close-icon.svelte';
+	import ButtonClose from '../../../button/components/button-close/button-close.svelte';
+	import type { ListItemType } from '../../../button/components/button-list-item/button-list-item.svelte';
+	import ButtonOk from '../../../button/components/button-ok/button-ok.svelte';
+	import SearchField from '../../../input/components/search-field/search-field.svelte';
+	import type { Snippet } from 'svelte';
+	import type { DialogExportsType } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		value?: any | any[];
+		multiple?: boolean;
+		items?: any[];
+		itemSnippet?: Snippet<[any, number]>;
+		itemTitle?: string;
+		itemSubtitle?: string;
+		search?: string;
+		identity?: string;
+		iconPath?: string;
+		hasCheckbox?: boolean;
+		hasArrow?: boolean;
+		itemTitleClassName?: string;
+		itemSubtitleClassName?: string;
+		okButtonLable?: string;
+		okButtonClassName?: string;
+		closeButtonLabel?: string;
+		closeButtonClassName?: string;
+	};
+
+	let {
+		value,
+		multiple = false,
+		items,
+		itemTitle,
+		itemSubtitle,
+		hasCheckbox,
+		hasArrow,
+		search,
+		identity,
+		itemTitleClassName,
+		itemSubtitleClassName,
+		okButtonLable = 'Select',
+		okButtonClassName = '',
+		closeButtonLabel = 'Close',
+		closeButtonClassName = '',
+		itemSnippet,
+		closeDialog,
+		setResult
+	}: PropsType &
+		DialogExportsType & {
+			items?: any[];
+			itemSnippet?: Snippet<[any, number]>;
+		} = $props();
+
+	let searchText: string = $state('');
+
+	let idField = Symbol('_id');
+	let searchField = Symbol('_search');
+
+	type CustomListItemType = ListItemType & { [key: symbol]: string };
+
+	let selectedItemsSet: Set<any> = $derived.by(() => {
+		let set = new Set<any>();
+		if (value != null) {
+			if (Array.isArray(value)) {
+				value.forEach((v) => set.add(v));
+			} else {
+				set.add(value);
+			}
+		}
+		return set;
+	});
+
+	let preparedItems: any[] = $derived.by(() => {
+		return (items || []).map((item: any, index) => {
+			let res: CustomListItemType = {
+				[idField]: identity && item.hasOwnProperty(identity) ? item[identity] : index
+			};
+			if (itemTitle) {
+				res.title = item.hasOwnProperty(itemTitle) ? item[itemTitle] : itemTitle;
+			}
+			if (itemSubtitle) {
+				res.subtitle = item.hasOwnProperty(itemSubtitle) ? item[itemSubtitle] : itemSubtitle;
+			}
+			if (search) {
+				res[searchField] = (item[search] || '').trim().toLowerCase();
+			} else {
+				res[searchField] = `${res.title || ''} ${res.subtitle || ''}`.trim().toLowerCase();
+			}
+			if (selectedItemsSet.has(res[idField])) {
+				res.isChecked = true;
+			} else {
+				res.isChecked = false;
+			}
+
+			return res;
+		});
+	});
+
+	let filteredItems: any[] = $derived.by(() => {
+		if (searchText) {
+			return preparedItems.filter((item: any) => {
+				return item[searchField].indexOf(searchText) >= 0;
+			});
+		} else {
+			return [...preparedItems];
+		}
+	});
+
+	function handleSearch(text: string) {
+		searchText = text;
+	}
+
+	function handleItemSelected(ev: MouseEvent, item: CustomListItemType, index: number) {
+		let id = item[idField];
+		if (multiple) {
+			if (selectedItemsSet.has(id)) {
+				selectedItemsSet.delete(id);
+			} else {
+				selectedItemsSet.add(id);
+			}
+		} else {
+			selectedItemsSet.clear();
+			selectedItemsSet.add(id);
+		}
+
+		items = [...(items || [])];
+
+		if (!multiple) {
+			if (selectedItemsSet.size) {
+				setTimeout(() => {
+					setResult(Array.from(selectedItemsSet)[0]);
+					closeDialog();
+				}, 300);
+			}
+		}
+	}
+
+	function handleClose() {
+		closeDialog();
+	}
+
+	function handleOk() {
+		setResult(Array.from(selectedItemsSet));
+		closeDialog();
+	}
+
+	$effect(() => {
+		setResult(null);
+	});
+</script>
+
+<div class="flex gap-3 p-3">
+	<ButtonBack onlyMobile onClick={handleClose} />
+	<div class="flex-grow">
+		<SearchField
+			name="search"
+			className="rounded-full"
+			onSearch={handleSearch}
+			placeholder="Search..."
+		/>
+	</div>
+	<ButtonCloseIcon onlyWeb onClick={handleClose} />
+</div>
+<div class="flex-grow overflow-y-auto">
+	{#each filteredItems as item, index}
+		<div>
+			<ButtonListItem
+				{item}
+				id="list"
+				{index}
+				titleClassName={itemTitleClassName}
+				subtitleClassName={itemSubtitleClassName}
+				{hasArrow}
+				{hasCheckbox}
+				onClick={(ev) => handleItemSelected(ev, item, index)}
+				className="px-4"
+			/>
+		</div>
+	{/each}
+</div>
+{#if multiple}
+	<div class="flex items-center justify-end gap-3 p-4">
+		<ButtonOk label={okButtonLable} className={okButtonClassName} onClick={handleOk} />
+		<ButtonClose label={closeButtonLabel} className={closeButtonClassName} onClick={handleClose} />
+	</div>
+{/if}

package/dist/views/core/dialog/components/list-dialog/list-picker-dialog.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { DialogExportsType } from '../dialog/dialog.svelte';
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ListPickerDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: any | any[];
+    multiple?: boolean;
+    items?: any[];
+    itemSnippet?: Snippet<[any, number]>;
+    itemTitle?: string;
+    itemSubtitle?: string;
+    search?: string;
+    identity?: string;
+    iconPath?: string;
+    hasCheckbox?: boolean;
+    hasArrow?: boolean;
+    itemTitleClassName?: string;
+    itemSubtitleClassName?: string;
+    okButtonLable?: string;
+    okButtonClassName?: string;
+    closeButtonLabel?: string;
+    closeButtonClassName?: string;
+} & DialogExportsType & {
+    items?: any[];
+    itemSnippet?: Snippet<[any, number]>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ListPickerDialog = InstanceType<typeof ListPickerDialog>;
+export default ListPickerDialog;

package/dist/views/core/dialog/components/msg-dialog/msg-dialog.svelte

@@ -1,16 +1,25 @@
-<script lang="ts">let {
-  className,
-  msg,
-  setOnOkClick,
-  setResult,
-  closeDialog
-} = $props();
-$effect(() => {
-  setOnOkClick(() => {
-    setResult(true);
-    closeDialog();
-  });
-});
+<script lang="ts">
+	import type { DialogExportsType } from '../dialog/dialog.svelte';
+
+	type PropsType = {
+		className?: string;
+		msg?: string;
+	};
+
+	let {
+		className,
+		msg,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+	}: PropsType & DialogExportsType = $props();
+
+	$effect(() => {
+		setOnOkClick(() => {
+			setResult(true);
+			closeDialog();
+		});
+	});
 </script>
 
 <div class="p-6 {className}">

package/dist/views/core/dialog/index.d.ts

@@ -1,3 +1,5 @@
+import type { DialogExportsType, DialogPropsType, DialogSizeType } from './components/dialog/dialog.svelte';
+import Dialog from './components/dialog/dialog.svelte';
 import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-import Dialog, { type DialogExportsType, type DialogPropsType, DialogSizeEnum } from './components/dialog/dialog.svelte';
-export { Dialog, DialogSizeEnum, MsgDialog, type DialogExportsType, type DialogPropsType, };
+export { Dialog, MsgDialog };
+export type { DialogExportsType, DialogPropsType, DialogSizeType };

package/dist/views/core/dialog/index.js

@@ -1,3 +1,3 @@
+import Dialog from './components/dialog/dialog.svelte';
 import MsgDialog from "./components/msg-dialog/msg-dialog.svelte";
-import Dialog, { DialogSizeEnum } from './components/dialog/dialog.svelte';
-export { Dialog, DialogSizeEnum, MsgDialog, };
+export { Dialog, MsgDialog };

package/dist/views/core/drawer/components/drawer/drawer.svelte

@@ -1,37 +1,55 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let {
-  id = "",
-  children,
-  backdropClassName = "",
-  className = "bg-indigo-600 text-white",
-  containerClassName = "",
-  drawerContainerClassName = "",
-  drawerClassName = ""
-} = $props();
-let isPlaced = $state(false);
-let isOpened = $state(false);
-function handelBackdropClick() {
-  toggleDrawer();
-}
-export function toggleDrawer() {
-  if (!isPlaced) {
-    openDrawer();
-  } else {
-    closeDrawer();
-  }
-}
-export function openDrawer() {
-  isPlaced = true;
-  setTimeout(() => {
-    isOpened = true;
-  }, 0);
-}
-export function closeDrawer() {
-  isOpened = false;
-  setTimeout(() => {
-    isPlaced = false;
-  }, 300);
-}
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import '../../../../../tailwind.css';
+
+	type PropsType = {
+		children?: Snippet;
+		id?: string;
+		backdropClassName?: string;
+		className?: string;
+		containerClassName?: string;
+		drawerContainerClassName?: string;
+		drawerClassName?: string;
+	};
+
+	let {
+		id = '',
+		children,
+		backdropClassName = '',
+		className = 'bg-indigo-600 text-white',
+		containerClassName = '',
+		drawerContainerClassName = '',
+		drawerClassName = ''
+	}: PropsType = $props();
+
+	let isPlaced: boolean = $state(false);
+	let isOpened: boolean = $state(false);
+
+	function handelBackdropClick() {
+		toggleDrawer();
+	}
+
+	export function toggleDrawer() {
+		if (!isPlaced) {
+			openDrawer();
+		} else {
+			closeDrawer();
+		}
+	}
+
+	export function openDrawer() {
+		isPlaced = true;
+		setTimeout(() => {
+			isOpened = true;
+		}, 0);
+	}
+
+	export function closeDrawer() {
+		isOpened = false;
+		setTimeout(() => {
+			isPlaced = false;
+		}, 300);
+	}
 </script>
 
 {#if isPlaced}

package/dist/views/core/icon/components/icon/icon.svelte

@@ -1,16 +1,29 @@
-<script lang="ts">import "../../../../../tailwind.css";
-let {
-  path,
-  className = "",
-  size = 24,
-  fill = "currentColor",
-  viewBox = ""
-} = $props();
-$effect(() => {
-  viewBox = viewBox || `0 0 ${size} ${size}`;
-});
+<script lang="ts">
+	import ColorField from '../../../input/components/color-field/color-field.svelte';
+	import '../../../../../tailwind.css';
+	type IconPropsType = {
+		path: string;
+		className?: string;
+		size?: number;
+		fill?: string;
+		viewBox?: string;
+		color?: string;
+	};
+
+	let {
+		path,
+		className = '',
+		size = 24,
+		fill = 'currentColor',
+		viewBox = '',
+		color
+	}: IconPropsType = $props();
+
+	$effect(() => {
+		viewBox = viewBox || `0 0 ${size} ${size}`;
+	});
 </script>
 
-<svg class="w-6 h-6 align-middle {className}" {viewBox} fill="currentColor">
+<svg class="w-6 h-6 align-middle {className}" {viewBox} fill={color || fill}>
 	<path d={path} />
 </svg>

package/dist/views/core/icon/components/icon/icon.svelte.d.ts

@@ -18,6 +18,7 @@ declare const Icon: $$__sveltets_2_IsomorphicComponent<{
     size?: number;
     fill?: string;
     viewBox?: string;
+    color?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/views/core/icon/services/icon-path-service.d.ts

@@ -1,4 +1,5 @@
 export declare const mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
+export declare const mdiAttachment = "M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z";
 export declare const mdiBellOutline = "M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z";
 export declare const mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
 export declare const mdiCheckCircleOutline = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z";
@@ -8,8 +9,13 @@ export declare const mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,1
 export declare const mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 export declare const mdiContentCopy = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z";
 export declare const mdiEmailOutline = "M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z";
+export declare const mdiEyeOffOutline = "M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z";
+export declare const mdiEyeOutline = "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z";
 export declare const mdiFlowerTulip = "M3,13A9,9 0 0,0 12,22A9,9 0 0,0 3,13M12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,22M18,3V8A6,6 0 0,1 12,14A6,6 0 0,1 6,8V3C6.74,3 7.47,3.12 8.16,3.39C8.71,3.62 9.2,3.96 9.61,4.39L12,2L14.39,4.39C14.8,3.96 15.29,3.62 15.84,3.39C16.53,3.12 17.26,3 18,3Z";
+export declare const mdiMagnify = "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z";
 export declare const mdiMenu = "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z";
 export declare const mdiPageFirst = "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z";
 export declare const mdiPageLast = "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z";
 export declare const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z";
+export declare const mdiSquare = "M3,3V21H21V3";
+export declare const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";

package/dist/views/core/icon/services/icon-path-service.js

@@ -1,5 +1,6 @@
 // MDI
 export const mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
+export const mdiAttachment = "M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z";
 export const mdiBellOutline = 'M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z';
 export const mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
 export const mdiCheckCircleOutline = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z";
@@ -9,8 +10,13 @@ export const mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L
 export const mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 export const mdiContentCopy = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z";
 export const mdiEmailOutline = "M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z";
+export const mdiEyeOffOutline = "M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z";
+export const mdiEyeOutline = "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z";
 export const mdiFlowerTulip = "M3,13A9,9 0 0,0 12,22A9,9 0 0,0 3,13M12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,22M18,3V8A6,6 0 0,1 12,14A6,6 0 0,1 6,8V3C6.74,3 7.47,3.12 8.16,3.39C8.71,3.62 9.2,3.96 9.61,4.39L12,2L14.39,4.39C14.8,3.96 15.29,3.62 15.84,3.39C16.53,3.12 17.26,3 18,3Z";
+export const mdiMagnify = "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z";
 export const mdiMenu = "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z";
 export const mdiPageFirst = "M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z";
 export const mdiPageLast = "M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z";
 export const mdiPhone = "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z";
+export const mdiSquare = "M3,3V21H21V3";
+export const mdiUnfoldMoreHorizontal = "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z";

package/dist/views/core/index.d.ts

@@ -11,3 +11,5 @@ export * from './text/index.js';
 export * from './toast/index.js';
 export * from './screen-detector/index.js';
 export * from './referrer/index.js';
+export * from './input/index.js';
+export * from './no-data/index.js';

package/dist/views/core/index.js

@@ -11,3 +11,5 @@ export * from './text/index.js';
 export * from './toast/index.js';
 export * from './screen-detector/index.js';
 export * from './referrer/index.js';
+export * from './input/index.js';
+export * from './no-data/index.js';

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { colorToHex, isValidHexColor } from '../../../../../services';
+	import { mdiSquare } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		size,
+		appearance,
+		value = $bindable('#000000'),
+		...props
+	}: InputFieldPropsType & { value?: string } = $props();
+
+	let colorRef: HTMLInputElement;
+	let btnIconSizeClassName: string = $state('');
+	let btnRoundedClassName: string = $state('');
+	let colorValue: string = $state('#000000');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	function handleColorBtnClick() {
+		if (colorRef) {
+			colorRef.click();
+		}
+	}
+
+	function handleColorPickerChange(ev: any) {
+		let input: HTMLInputElement = ev?.target;
+		if (input) {
+			value = input.value;
+		}
+	}
+
+	$effect(() => {
+		if (isValidHexColor(value)) {
+			colorValue = value;
+			if (colorRef) {
+				colorRef.value = colorToHex(value);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					btnIconSizeClassName = '!h-7 !w-7';
+					break;
+				case 'md':
+					btnIconSizeClassName = '!h-6 !w-6';
+					break;
+				case 'sm':
+					btnIconSizeClassName = '!h-5 !w-5';
+					break;
+				case 'xs':
+					btnIconSizeClassName = '!h-4 !w-4';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (!appearance || appearance == 'normal') {
+			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
+		}
+	});
+</script>
+
+{#snippet colorButton()}
+	<button
+		class="px-2 h-full hover:bg-gray-100 {btnRoundedClassName}"
+		use:ripple
+		onclick={handleColorBtnClick}
+	>
+		<Icon path={mdiSquare} color={colorValue} className=" {btnIconSizeClassName} " />
+	</button>
+{/snippet}
+
+<div class="relative">
+	<InputField
+		{...props}
+		type="text"
+		bind:value
+		bind:this={inputFieldRef}
+		className="pr-8 {props?.className}"
+		rightSnippet={colorButton}
+		maxlength={9}
+	/>
+
+	<input
+		class="color-input"
+		type="color"
+		placeholder=" "
+		bind:this={colorRef}
+		tabindex={-1}
+		oninput={handleColorPickerChange}
+	/>
+</div>
+
+<style>
+	.color-input {
+		position: absolute;
+		opacity: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 1px;
+	}
+</style>

package/dist/views/core/input/components/color-field/color-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "value">;
+type ColorField = InstanceType<typeof ColorField>;
+export default ColorField;