@cloudparker/moldex.js 0.0.27 → 0.0.29

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,104 @@
+<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, {} from "../input-field/input-field.svelte";
+let {
+  size,
+  appearance,
+  value = $bindable("#000000"),
+  ...props
+} = $props();
+let colorRef;
+let btnIconSizeClassName = $state("");
+let btnRoundedClassName = $state("");
+let colorValue = $state("#000000");
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+function handleColorBtnClick() {
+  if (colorRef) {
+    colorRef.click();
+  }
+}
+function handleColorPickerChange(ev) {
+  let input = 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;

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

@@ -0,0 +1,385 @@
+<script lang="ts">import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
+import Button from "../../../button/components/button/button.svelte";
+import { mdiUnfoldMoreHorizontal } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import NoData from "../../../no-data/components/no-data/no-data.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+import SearchField from "../search-field/search-field.svelte";
+let {
+  appearance,
+  chipClassName,
+  className,
+  comboboxIconClassName,
+  comboboxIconPath = mdiUnfoldMoreHorizontal,
+  contentSnippet,
+  createButtonClassName,
+  createButtonLabel = "Add",
+  displayClassName,
+  displayFieldName,
+  displayItemsCount,
+  dropdownBodyClassName,
+  dropdownBodySnippet,
+  dropdownClassName,
+  dropdownFooterClassName,
+  dropdownFooterSnippet,
+  dropdownHeaderClassName,
+  dropdownHeaderSnippet,
+  emptyMessage = "No items exists!",
+  emptyMessageSnippet,
+  hasComboboxIcon = true,
+  hasDropdownFooter,
+  hasDropdownFooterCreateButton,
+  hasDropdownHeader,
+  hasDropdownHeaderSearch,
+  hasItemsCheckbox,
+  hasPrimitiveData,
+  iconPathClassName,
+  iconPathFieldName,
+  id,
+  identityFieldName,
+  itemClassName,
+  items,
+  multiple,
+  name,
+  onCreateButtonClick,
+  onSearch,
+  searchClassName,
+  searchFieldName,
+  searchPlaceholder = "Search...",
+  showChip,
+  size,
+  itemSubtitleClassName,
+  itemSubtitleFieldName,
+  itemTitleClassName,
+  itemTitleFieldName,
+  value = $bindable(),
+  ...props
+} = $props();
+let idFieldSymbol = Symbol("_id");
+let searchFieldSymbol = Symbol("_search");
+let searchFieldRef = $state(null);
+let comboboxIconSizeClassName = $state("");
+let isPlaced = $state(false);
+let searchText = $state("");
+let itemsIdentityMap = {};
+let _value = $derived.by(() => {
+  return selectedItemsSet?.size ? "&nbsp;" : "";
+});
+let displayItems = $derived.by(() => {
+  let array = Array.from(selectedItemsSet);
+  let results = array.map((id2) => {
+    if (hasPrimitiveData) {
+      return [id2];
+    } else {
+      let item = itemsIdentityMap[id2];
+      if (item) {
+        if (displayFieldName && item.hasOwnProperty(displayFieldName)) {
+          return item[displayFieldName];
+        }
+      }
+    }
+  });
+  return results;
+});
+let displayItemsTitle = $derived(displayItems.join(", "));
+let displayText = $derived.by(() => {
+  let results = displayItems;
+  if (!showChip) {
+    if (results?.length) {
+      if (multiple) {
+        let res = results.join(", ");
+        if (displayItemsCount != null && displayItemsCount > 1) {
+          res = results.slice(0, displayItemsCount).join(", ");
+          if (results.length > displayItemsCount) {
+            res += `<span class="text-gray-400 px-2">+ ${results.length - displayItemsCount} </span>`;
+          }
+        }
+        return res;
+      } else {
+        return results[0] || "";
+      }
+    }
+  }
+  return "";
+});
+let selectedItemsSet = $derived.by(() => {
+  let set = /* @__PURE__ */ new Set();
+  if (value != null) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => set.add(v));
+    } else if (value) {
+      set.add(value);
+    }
+  }
+  return set;
+});
+let preparedItems = $derived.by(() => {
+  return (items || []).map((item, index) => {
+    let res = {};
+    if (hasPrimitiveData) {
+      res.title = item;
+      res[idFieldSymbol] = item;
+      res[searchFieldSymbol] = ("" + item).toLowerCase().trim();
+    } else {
+      if (identityFieldName && item.hasOwnProperty(identityFieldName)) {
+        res[idFieldSymbol] = item[identityFieldName];
+      } else {
+        res[idFieldSymbol] = index;
+      }
+      itemsIdentityMap[res[idFieldSymbol]] = item;
+      if (itemTitleFieldName && item.hasOwnProperty(itemTitleFieldName)) {
+        res.title = item[itemTitleFieldName];
+      }
+      if (itemSubtitleFieldName && item.hasOwnProperty(itemSubtitleFieldName)) {
+        res.subtitle = item[itemSubtitleFieldName];
+      }
+      if (searchFieldName) {
+        if (item.hasOwnProperty(searchFieldName)) {
+          res[searchFieldSymbol] = (item[searchFieldName] || "").toLowerCase().trim();
+        }
+      } else {
+        res[searchFieldSymbol] = `${item.title || ""} ${item.subtitle || ""}`;
+      }
+    }
+    if (selectedItemsSet.has(res[idFieldSymbol])) {
+      res.isChecked = true;
+    } else {
+      res.isChecked = false;
+    }
+    return res;
+  });
+});
+let filteredItems = $derived.by(() => {
+  if (searchText) {
+    return preparedItems.filter((item) => {
+      return item[searchFieldSymbol].indexOf(searchText) >= 0;
+    });
+  } else {
+    return [...preparedItems];
+  }
+});
+$effect(() => {
+  if (size) {
+    switch (size) {
+      case "lg":
+        comboboxIconSizeClassName = "!h-7 !w-7";
+        break;
+      case "md":
+        comboboxIconSizeClassName = "!h-6 !w-6";
+        break;
+      case "sm":
+        comboboxIconSizeClassName = "!h-5 !w-5";
+        break;
+      case "xs":
+        comboboxIconSizeClassName = "!h-4 !w-4";
+        break;
+    }
+  }
+});
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+function toggleDropdown() {
+  if (isPlaced) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+}
+function closeDropdown() {
+  searchText = "";
+  isPlaced = false;
+  focus();
+}
+function openDropdown() {
+  isPlaced = true;
+}
+function handleInputClick() {
+  toggleDropdown();
+}
+function handleBackdropClick() {
+  toggleDropdown();
+}
+function handleKeyDown(event) {
+  if (event.key === "Escape") {
+    closeDropdown();
+  } else if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggleDropdown();
+  } else if (/^[a-zA-Z0-9]$/.test(event.key)) {
+    searchFieldRef && searchFieldRef.focus();
+  } else if (event.key === "Backspace" || event.key === "Delete") {
+    event.preventDefault();
+    selectedItemsSet.clear();
+    value = null;
+  }
+}
+function handleDropdownKeyDown(event) {
+  if (event.key === "Escape") {
+    closeDropdown();
+  }
+}
+function handleSearch(value2) {
+  searchText = value2;
+}
+function handleItemSelected(ev, item, index) {
+  let id2 = item[idFieldSymbol];
+  if (multiple) {
+    if (selectedItemsSet.has(id2)) {
+      selectedItemsSet.delete(id2);
+    } else {
+      selectedItemsSet.add(id2);
+    }
+  } else {
+    selectedItemsSet.clear();
+    selectedItemsSet.add(id2);
+  }
+  items = [...items || []];
+  let array = Array.from(selectedItemsSet);
+  if (array.length) {
+    value = multiple ? array : array[0];
+  } else {
+    value = null;
+  }
+  if (!multiple) {
+    closeDropdown();
+  }
+}
+</script>
+
+{#snippet rightIcon()}
+	<div class="px-1">
+		{#if hasComboboxIcon}
+			<Icon
+				path={comboboxIconPath}
+				className=" text-gray-500 {comboboxIconSizeClassName} {comboboxIconClassName}"
+			/>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet comboboxContentSnippet()}
+	{#if contentSnippet}
+		{@render contentSnippet()}
+	{:else if showChip}
+		<div class="flex items-center {displayClassName}" title={displayItemsTitle}>
+			{#each displayItems?.slice(0, displayItemsCount) as item, index}
+				<div
+					class="inline-flex items-center bg-gray-200 text-gray-700 text-sm font-medium px-2 mx-1 rounded-full text-nowrap {chipClassName}"
+				>
+					{item}
+				</div>
+			{/each}
+			{#if displayItemsCount && displayItems?.length > (displayItemsCount || 1)}
+				<div class="px-2 text-gray-400">+ {displayItems?.length - (displayItemsCount || 1)}</div>
+			{/if}
+		</div>
+	{:else}
+		<div class="flex items-center {displayClassName}" title={displayItemsTitle}>
+			{@html displayText}
+		</div>
+	{/if}
+{/snippet}
+
+<div class="relative">
+	<InputField
+		bind:this={inputFieldRef}
+		{...props}
+		value={_value}
+		type="text"
+		role="combobox"
+		onclick={handleInputClick}
+		className="pr-8 text-transparent {className}"
+		rightSnippet={rightIcon}
+		rightSnippetContainerClassName="pointer-events-none"
+		readonly
+		{id}
+		{name}
+		{size}
+		{appearance}
+		ariaControls="options"
+		ariaExpanded={isPlaced}
+		onkeydown={handleKeyDown}
+		contentSnippet={comboboxContentSnippet}
+		title={displayItemsTitle || ''}
+	/>
+	{#if isPlaced}
+		<button id="backdrop" class="fixed inset-0 z-10" onclick={handleBackdropClick} tabindex="-1"
+		></button>
+		<!-- svelte-ignore a11y_interactive_supports_focus -->
+		<div
+			class="absolute z-10 mt-1 max-h-80 w-full flex flex-col rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm {hasDropdownHeader
+				? ''
+				: 'pt-1'} {hasDropdownFooter ? '' : 'pb-1'} {dropdownClassName}"
+			id="options"
+			role="listbox"
+			onkeydown={handleDropdownKeyDown}
+		>
+			{#if hasDropdownHeader}
+				<div
+					id="dropdown-header"
+					class=" flex items-center p-2 px-3 my-1 w-full {dropdownHeaderClassName}"
+				>
+					{#if dropdownHeaderSnippet}
+						{@render dropdownHeaderSnippet()}
+					{:else if hasDropdownHeaderSearch}
+						<SearchField
+							bind:this={searchFieldRef}
+							value={searchText}
+							name="search"
+							placeholder={searchPlaceholder}
+							className="w-full {searchClassName}"
+							onSearch={handleSearch}
+						/>
+					{/if}
+				</div>
+			{/if}
+			<div id="dropdown-body" class="flex-grow overflow-y-auto max-h-full {dropdownBodyClassName}">
+				{#if dropdownBodySnippet}
+					{@render dropdownBodySnippet()}
+				{:else if filteredItems?.length}
+					<ul>
+						{#each filteredItems as item, index}
+							<li
+								class="select-none"
+								id="item-{index}"
+								role="option"
+								tabindex="-1"
+								aria-selected={item.isChecked}
+							>
+								<ButtonListItem
+									{item}
+									{index}
+									hasCheckbox={hasItemsCheckbox}
+									className=" {itemClassName}"
+									titleClassName=" {itemTitleClassName}"
+									subtitleClassName=" {itemSubtitleClassName}"
+									onClick={(ev) => handleItemSelected(ev, item, index)}
+								/>
+							</li>
+						{/each}
+					</ul>
+				{:else if emptyMessageSnippet}
+					{@render emptyMessageSnippet()}
+				{:else}
+					<NoData message={emptyMessage} />
+				{/if}
+			</div>
+
+			{#if hasDropdownFooter}
+				<div id="dropdown-footer" class="flex justify-end gap-3 p-2 px-3 {dropdownFooterClassName}">
+					{#if dropdownFooterSnippet}
+						{@render dropdownFooterSnippet()}
+					{:else if hasDropdownFooterCreateButton}
+						<Button
+							label={createButtonLabel}
+							className="px-3 py-1 {createButtonClassName}"
+							onClick={onCreateButtonClick}
+						></Button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+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 ComboboxField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    chipClassName?: string;
+    comboboxIconClassName?: string;
+    comboboxIconPath?: string;
+    createButtonClassName?: string;
+    createButtonLabel?: string;
+    displayClassName?: string;
+    displayFieldName?: string;
+    displayItemsCount?: number;
+    dropdownBodyClassName?: string;
+    dropdownBodySnippet?: Snippet;
+    dropdownClassName?: string;
+    dropdownFooterClassName?: string;
+    dropdownFooterSnippet?: Snippet;
+    dropdownHeaderClassName?: string;
+    dropdownHeaderSnippet?: Snippet;
+    emptyMessage?: string;
+    emptyMessageSnippet?: Snippet;
+    hasComboboxIcon?: boolean;
+    hasDropdownFooter?: boolean;
+    hasDropdownFooterCreateButton?: boolean;
+    hasDropdownHeader?: boolean;
+    hasDropdownHeaderSearch?: boolean;
+    hasItemsCheckbox?: boolean;
+    hasPrimitiveData?: boolean;
+    iconPathClassName?: string;
+    iconPathFieldName?: string;
+    identityFieldName?: string;
+    itemClassName?: string;
+    items?: any[];
+    multiple?: boolean;
+    onCreateButtonClick?: (ev: MouseEvent) => void;
+    onSearch?: (value: string) => void;
+    searchClassName?: string;
+    searchFieldName?: string;
+    searchPlaceholder?: string;
+    showChip?: boolean;
+    itemSubtitleClassName?: string;
+    itemSubtitleFieldName?: string;
+    itemTitleClassName?: string;
+    itemTitleFieldName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "value">;
+type ComboboxField = InstanceType<typeof ComboboxField>;
+export default ComboboxField;

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

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="date" />

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

@@ -0,0 +1,21 @@
+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 DateField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type DateField = InstanceType<typeof DateField>;
+export default DateField;

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

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="datetime-local"  />

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

@@ -0,0 +1,21 @@
+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 DatetimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type DatetimeField = InstanceType<typeof DatetimeField>;
+export default DatetimeField;

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

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="email" maxlength={props?.maxlength || 80} />