@bexis2/bexis2-core-ui 0.2.11 → 0.2.13

package/dist/components/page/menu/Menu.svelte

@@ -1,35 +1,61 @@
 <script>import { onMount } from "svelte";
-import { get } from "svelte/store";
 import { getMenuItems } from "./MenuDataCaller";
 import { menuStore } from "../../../stores/pageStores";
 import MenuBar from "./MenuBar.svelte";
 import SettingsBar from "./SettingsBar.svelte";
+import Fa from "svelte-fa/src/fa.svelte";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { Accordion } from "@skeletonlabs/skeleton";
 onMount(async () => {
   let m = await getMenuItems();
   menuStore.set(m);
 });
+let hamburger = true;
 </script>
-{#if $menuStore!== undefined}
 
-<div class="flex flex-row md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md">
 
- <div class="basis-8">
- {#if $menuStore.Logo}
-   <img src='data:{$menuStore.Logo.Mime};charset=utf-8;base64, {$menuStore.Logo.Data}' alt='{$menuStore.Logo.Name}' style='height:40px;' />
- {/if}
- </div>
+{#if $menuStore !== undefined}
+	<div
+		class="sm:flex h-min flex-row w-full justify-between items-center md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md"
+	>
+		<div class="flex justify-between gap-5">
+			<div class="basis-8">
+				{#if $menuStore.Logo}
+					<img
+						src="data:{$menuStore.Logo.Mime};charset=utf-8;base64, {$menuStore.Logo.Data}"
+						alt={$menuStore.Logo.Name}
+						style="height:40px;"
+					/>
+				{/if}
+			</div>
+			<button
+				class="w-min h-min variant-ghost-surface aspect-square p-3 rounded-lg sm:hidden justify-end btn"
+				on:click|preventDefault={() => (hamburger = !hamburger)}
+			>
+				<Fa icon={faBars} />
+			</button>
+		</div>
 
-
-  <div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
-    <MenuBar menuBar={$menuStore.MenuBar} />
-    <MenuBar menuBar={$menuStore.Extended} />
-  </div>
-  <div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
-    <MenuBar menuBar={$menuStore.AccountBar} />
-    <MenuBar menuBar={$menuStore.LaunchBar} />
-    <SettingsBar menuBar={$menuStore.Settings} />
-  </div>
-
-</div>
-
-{/if}
+		<div class="sm:flex w-full h-full sm:h-10" class:hidden={hamburger}>
+			<div class="sm:flex justify-between w-full">
+				<Accordion>
+					<div class="sm:flex w-full justify-between">
+						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-start gap-2 py-0"> -->
+						<MenuBar menuBar={$menuStore.MenuBar} />
+						<MenuBar menuBar={$menuStore.Extended} />
+						<!-- </div> -->
+						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
+						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
+							<MenuBar menuBar={$menuStore.AccountBar} />
+							<MenuBar menuBar={$menuStore.LaunchBar} />
+							<SettingsBar menuBar={$menuStore.Settings} />
+							<!-- </div> -->
+						</div>
+					</div>
+				</Accordion>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="placeholder h-14 bg-tertiary-50 shadow-md" />
+{/if}

package/dist/components/page/menu/MenuBar.svelte

@@ -1,21 +1,15 @@
-
 <script>import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Item from "./MenuItem.svelte";
 export let menuBar;
 let comboboxValue;
-let radomNumber = Math.floor(Math.random() * 100);
 </script>
- 
- 
- {#if menuBar}
- {#each menuBar as menubarItem}
- 
- <Item {menubarItem}{comboboxValue}/>
- 
- {/each}
- {/if}
- 
- 
- 
+
+{#if menuBar}
+	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
+		{#each menuBar as menubarItem}
+			<Item {menubarItem} {comboboxValue} />
+		{/each}
+	</div>
+{/if}

package/dist/components/page/menu/MenuBar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { MenuItem } from './menu';
 declare const __propDef: {
     props: {
         menuBar: MenuItem[];

package/dist/components/page/menu/MenuDataCaller.js

@@ -1,11 +1,10 @@
-import {Api} from "../../../services/Api";
-
-
-export const getMenuItems = async () => {
-    try {
-      const response = await Api.get('/menu');
-      return response.data;
-    } catch (error) {
-      console.error(error);
-    }
-  };
+import { Api } from '../../../services/Api';
+
+export const getMenuItems = async () => {
+	try {
+		const response = await Api.get('/menu');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/dist/components/page/menu/MenuItem.svelte

@@ -1,4 +1,4 @@
-<script>import { popup } from "@skeletonlabs/skeleton";
+<script>import { Accordion, AccordionItem, popup } from "@skeletonlabs/skeleton";
 import MenuSublist from "./MenuSublist.svelte";
 import { goTo } from "../../../services/BaseCaller";
 export let menubarItem;
@@ -7,25 +7,38 @@ let id = Math.floor(Math.random() * 100).toString();
 let popupCombobox = {
   event: "click",
   target: id,
-  placement: "bottom",
+  placement: "bottom-start",
   // Close the popup when the item is clicked
   closeQuery: ".listbox-item"
 };
 </script>
-{#if menubarItem.Items.length<1} 
-
-<button use:popup={popupCombobox} on:click={()=> goTo(menubarItem.Url)}>
-<span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
-</button>
 
+{#if menubarItem.Items.length < 1}
+	<div class="p-2">
+		<button class="grid" use:popup={popupCombobox} on:click={() => goTo(menubarItem.Url)}>
+			<span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
+		</button>
+	</div>
 {:else}
+	<div class="sm:hidden block">
+		<AccordionItem padding="p-2">
+			<svelte:fragment slot="summary"
+				><button class="flex items-center gap-x-1">
+					<span class="capitalize">{menubarItem.Title}</span>
+				</button></svelte:fragment
+			>
+			<svelte:fragment slot="content"
+				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
+			></AccordionItem
+		>
+	</div>
+	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
+		<button class="flex items-center gap-x-1 px-2">
+			<span class="capitalize">{menubarItem.Title}▾</span>
+		</button>
 
-
-<button class="flex items-center gap-x-1 " use:popup={popupCombobox}>
-<span class="capitalize">{menubarItem.Title}</span>
-<div class="before:content-['▾']"></div>
-</button>
-
-<MenuSublist {id} items={menubarItem.Items} />
-
+		<div class="z-50 w-max" data-popup={id}>
+			<MenuSublist {id} items={menubarItem.Items} />
+		</div>
+	</div>
 {/if}

package/dist/components/page/menu/MenuItem.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        menubarItem: MenuItem;
+        menubarItem: menuItemType;
         comboboxValue: any;
     };
     events: {

package/dist/components/page/menu/MenuSublist.svelte

@@ -1,6 +1,5 @@
 <script>import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
 import { goTo } from "../../../services/BaseCaller";
-export let id;
 export let items;
 let lastModule = "";
 let first = true;
@@ -18,18 +17,17 @@ function isNewModule(module) {
 }
 </script>
 
-<div class="z-50 w-max" data-popup={id}>
- <ListBox class="bg-white border-solid border border-surface-500">
-  {#each items as item}
-   {#if isNewModule(item.Module) }<hr class="text-surface-800">{/if}
-   <ListBoxItem class="bg-white text-sm text-surface-800 py-1 hover:bg-surface-100 hover:text-secondary-500" 
-      bind:group={item.Title} 
-      name="medium" 
-      value={item.Title}
-      on:click={()=> goTo(item.Url)}
-      >
-    {item.Title}
-   </ListBoxItem>
-   {/each}
- </ListBox>
-</div> 
+<ListBox class="sm:bg-white sm:border">
+	{#each items as item}
+		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+		<ListBoxItem
+			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
+			bind:group={item.Title}
+			name="medium"
+			value={item.Title}
+			on:click={() => goTo(item.Url)}
+		>
+			{item.Title}
+		</ListBoxItem>
+	{/each}
+</ListBox>

package/dist/components/page/menu/MenuSublist.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        id: any;
-        items: MenuItem[];
+        items: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/menu/SettingsBar.svelte

@@ -1,8 +1,7 @@
 <script>import { popup } from "@skeletonlabs/skeleton";
-import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+import { AccordionItem } from "@skeletonlabs/skeleton";
 import Fa from "svelte-fa/src/fa.svelte";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
-import { goTo } from "../../../services/BaseCaller";
 export let menuBar;
 import MenuSublist from "./MenuSublist.svelte";
 let popupCombobox = {
@@ -13,16 +12,25 @@ let popupCombobox = {
   closeQuery: ".listbox-item"
 };
 </script>
- 
- {#if menuBar}
- <button class="flex items-center gap-x-1 text-sm text-surface-800" use:popup={popupCombobox}>
- <span class="capitalize"><Fa icon={faCog} /></span>
- 
- </button>
 
- <MenuSublist id="settings" items={menuBar} />
- 
-
- {/if}
- 
- 
+{#if menuBar}
+	<div class="sm:hidden">
+		<AccordionItem padding="p-2">
+			<svelte:fragment slot="summary"
+				><button class="flex items-center gap-x-1 text-sm text-surface-800 w-5 h-full">
+					<span class="capitalize"><Fa icon={faCog} /></span>
+				</button></svelte:fragment
+			>
+			<svelte:fragment slot="content"><MenuSublist items={menuBar} /></svelte:fragment>
+		</AccordionItem>
+	</div>
+	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
+		<button class="flex items-center gap-x-1">
+			<div class="hidden sm:block" />
+			<span class="capitalize"><Fa icon={faCog} /></span>
+		</button>
+		<div class="z-50 w-max" data-popup="settings">
+			<MenuSublist items={menuBar} />
+		</div>
+	</div>
+{/if}

package/dist/components/page/menu/SettingsBar.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        menuBar: MenuItem[];
+        menuBar: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/css/core.ui.postcss

@@ -1,14 +1,17 @@
 /*place global styles here */
-html, body { @apply h-full}
+html,
+body {
+	@apply h-full;
+}
 
-h1{
- @apply text-primary-500;
+h1 {
+	@apply text-primary-500;
 }
 
 :root {
-	--background:rgb(var(--color-surface-200))
- }
+	--background: rgb(var(--color-surface-200));
+}
 
-	[type='text']:focus{
-	--tw-ring-color:#00000;
+[type='text']:focus {
+	--tw-ring-color: #00000;
 }

package/dist/css/themes/theme-bexis2.css

@@ -82,16 +82,15 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-/* surface | #c7c7c7 */
---color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
---color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
---color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
---color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
---color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
---color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
---color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
---color-surface-700: 149 149 149; /* ⬅ #959595 */
---color-surface-800: 119 119 119; /* ⬅ #777777 */
---color-surface-900: 98 98 98; /* ⬅ #626262 */
-
-}
+	/* surface | #c7c7c7 */
+	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+	--color-surface-700: 149 149 149; /* ⬅ #959595 */
+	--color-surface-800: 119 119 119; /* ⬅ #777777 */
+	--color-surface-900: 98 98 98; /* ⬅ #626262 */
+}

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import ListView from './components/ListView.svelte';
-import TableView from './TableView.svelte';
 import FileIcon from './components/file/FileIcon.svelte';
 import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
@@ -23,12 +21,12 @@ import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
-export { ListView, TableView, Spinner, Page, Alert, Menu, ErrorMessage };
+export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.js';
+export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
-export { positionType, pageContentLayoutType } from './models/Enums';
+export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -1,6 +1,6 @@
 // Reexport your entry components here
-import ListView from './components/ListView.svelte';
-import TableView from './TableView.svelte';
+// import ListView from './components/ListView.svelte';
+// import TableView from './TableView.svelte';
 import FileIcon from './components/file/FileIcon.svelte';
 import FileInfo from './components/file/FileInfo.svelte';
 import FileUploader from './components/file/FileUploader.svelte';
@@ -10,7 +10,7 @@ import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 import Menu from './components/page/menu/Menu.svelte';
 import ErrorMessage from './components/page/ErrorMessage.svelte';
-// input 
+// input
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
@@ -29,13 +29,13 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiS
 //File
 export { FileInfo, FileIcon, FileUploader };
 //others
-export { ListView, TableView, Spinner, Page, Alert, Menu, ErrorMessage };
+export { Spinner, Page, Alert, Menu, ErrorMessage };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
 //help
 export { helpStore } from './stores/pageStores';
 //enum
-export { positionType, pageContentLayoutType } from './models/Enums';
+export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/dist/models/Enums.d.ts

@@ -7,3 +7,21 @@ export declare enum pageContentLayoutType {
     full = "full",
     center = "center"
 }
+export declare enum decimalCharacterType {
+    point = 0,
+    comma = 1
+}
+export declare enum orientationType {
+    columnwise = 0,
+    rowwise = 1
+}
+export declare enum textSeperatorType {
+    tab = 9,
+    comma = 44,
+    semicolon = 59,
+    space = 32
+}
+export declare enum textMarkerType {
+    quotes = 0,
+    doubleQuotes = 1
+}

package/dist/models/Enums.js

@@ -9,3 +9,25 @@ export var pageContentLayoutType;
     pageContentLayoutType["full"] = "full";
     pageContentLayoutType["center"] = "center";
 })(pageContentLayoutType || (pageContentLayoutType = {}));
+export var decimalCharacterType;
+(function (decimalCharacterType) {
+    decimalCharacterType[decimalCharacterType["point"] = 0] = "point";
+    decimalCharacterType[decimalCharacterType["comma"] = 1] = "comma";
+})(decimalCharacterType || (decimalCharacterType = {}));
+export var orientationType;
+(function (orientationType) {
+    orientationType[orientationType["columnwise"] = 0] = "columnwise";
+    orientationType[orientationType["rowwise"] = 1] = "rowwise";
+})(orientationType || (orientationType = {}));
+export var textSeperatorType;
+(function (textSeperatorType) {
+    textSeperatorType[textSeperatorType["tab"] = 9] = "tab";
+    textSeperatorType[textSeperatorType["comma"] = 44] = "comma";
+    textSeperatorType[textSeperatorType["semicolon"] = 59] = "semicolon";
+    textSeperatorType[textSeperatorType["space"] = 32] = "space";
+})(textSeperatorType || (textSeperatorType = {}));
+export var textMarkerType;
+(function (textMarkerType) {
+    textMarkerType[textMarkerType["quotes"] = 0] = "quotes";
+    textMarkerType[textMarkerType["doubleQuotes"] = 1] = "doubleQuotes";
+})(textMarkerType || (textMarkerType = {}));

package/dist/models/Models.d.ts

@@ -1,6 +1,7 @@
 import type { SvelteComponent } from 'svelte';
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
+import { decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './Enums';
 export interface linkType {
     label: string;
     url: string;
@@ -28,6 +29,23 @@ export interface fileUploaderModel {
     multiple: boolean;
     maxSize: number;
     lastModification: Date;
+    allFilesReadable: boolean;
+    asciiFileReaderInfo: asciiFileReaderInfoType;
+}
+export interface asciiFileReaderInfoType extends fileReaderInfoType {
+    cells: boolean[];
+    seperator: textSeperatorType;
+    textMarker: textMarkerType;
+}
+export interface fileReaderInfoType {
+    decimal: decimalCharacterType;
+    orientation: orientationType;
+    offset: number;
+    variables: number;
+    data: number;
+    unit: number;
+    description: number;
+    dateformat: string;
 }
 export interface filesType {
     accepted: Blob[];

package/dist/models/Models.js

@@ -1,2 +1 @@
-;
-export {};
+import { decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './Enums';

package/dist/models/Page.d.ts

@@ -0,0 +1,31 @@
+/********************************** */
+export interface breadcrumbItemType {
+    label: string;
+    link: string;
+}
+export declare class BreadcrumbModel {
+    items: breadcrumbItemType[];
+    constructor();
+}
+/********************************** */
+export declare class MenuModel {
+    Logo: logoType;
+    LaunchBar: menuItemType[];
+    MenuBar: menuItemType[];
+    AccountBar: menuItemType[];
+    Settings: menuItemType[];
+    Extended: menuItemType[];
+}
+export interface menuItemType {
+    Title: string;
+    Url: string;
+    Target: string;
+    Module: string;
+    Items: menuItemType[];
+}
+export interface logoType {
+    Mime: string;
+    Name: string;
+    Data: string;
+    Height: number;
+}

package/dist/services/BaseCaller.js

@@ -1,21 +1,16 @@
-// Implementations for all the calls for the pokemon endpoints.
-//import Api from "./Api";
-import { host } from "../stores/apiStores";
-
-// go to a internal action
-export const goTo = async (url,intern=true) => {
-  if(intern == true) // go to inside bexis2
-  {
-    if(window!=null && host != null && url!=null){
-      window.open(host+url,"_self")?.focus()
-    }
-  }
-  else // go to a external page
-  {
-    window.open(url,"_blank")?.focus()
-  }
-};
-
-
-
-
+// Implementations for all the calls for the pokemon endpoints.
+//import Api from "./Api";
+import { host } from '../stores/apiStores';
+
+// go to a internal action
+export const goTo = async (url, intern = true) => {
+	if (intern == true) {
+		// go to inside bexis2
+		if (window != null && host != null && url != null) {
+			window.open(host + url, '_self')?.focus();
+		}
+	} // go to a external page
+	else {
+		window.open(url, '_blank')?.focus();
+	}
+};

package/dist/stores/pageStores.d.ts

@@ -1,6 +1,6 @@
-import type { helpItemType, helpStoreType } from "../models/Models";
-import type { breadcrumbItemType } from "../models/Page";
-import { BreadcrumbModel } from "../models/Page";
+import type { helpItemType, helpStoreType } from '../models/Models';
+import type { MenuModel, breadcrumbItemType } from '../models/Page';
+import { BreadcrumbModel } from '../models/Page';
 export declare const helpStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<helpStoreType>, invalidate?: ((value?: helpStoreType | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: helpStoreType) => void;
@@ -15,7 +15,7 @@ export declare const helpStore: {
     reset: () => void;
     clear: () => void;
 };
-export declare const menuStore: import("svelte/store").Writable<Menu>;
+export declare const menuStore: import("svelte/store").Writable<MenuModel>;
 export declare const breadcrumbStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<BreadcrumbModel>, invalidate?: ((value?: BreadcrumbModel | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: BreadcrumbModel) => void;