intelliwaketssveltekitv25 0.1.56 → 0.1.57

package/dist/AccordianSelect.svelte.d.ts

@@ -21,7 +21,7 @@ declare class __sveltets_Render<T> {
     };
     events(): {};
     slots(): {};
-    bindings(): "show" | "value";
+    bindings(): "value" | "show";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Definitions.d.ts

@@ -93,6 +93,11 @@ export type TListGroupItem = {
     bigIcon?: boolean;
     itemClass?: string;
 };
+export type TMasterDetailListGroupItem = Omit<TListGroupItem, 'subs'> & {
+    subs?: TMasterDetailListGroupItem[];
+    roundedDetailFormatted?: boolean;
+    detailShowHeader?: boolean;
+};
 export declare const MasterDetailSubItemBuild: (item: TListGroupItem, items: TListGroupItem[], collapsedValues: (string | null | undefined)[], options?: {
     start_date?: string | null;
     end_date?: string | null;

package/dist/MasterDetailLayout.svelte

@@ -4,10 +4,11 @@
 	import { quintOut } from 'svelte/easing'
 	import { fly } from 'svelte/transition'
 	import { browser } from '$app/environment'
-	import type { TListGroupItem } from './Definitions'
-	import type { TFindIsActive } from '@solidbasisventures/intelliwaketsfoundation'
+	import type { TMasterDetailListGroupItem } from './Definitions'
+	import { type TFindIsActive, ToPascalCase } from '@solidbasisventures/intelliwaketsfoundation'
 	import { PathAnalyzer } from './PathAnalyzer'
 	import type { Snippet } from 'svelte'
+	import { Icon } from './index'
 
 	let {
 		pageRoute,
@@ -24,6 +25,9 @@
 		ellipses = false,
 		noLinkReplace = false,
 		rounded = false,
+		roundedDetailFormatted = true,
+		detailShowHeader = false,
+		showDetailOnNoSelection = true,
 		showAllPrint = false,
 		smallScreenWidth = 767, // 1024
 		empty: emptySlot = undefined,
@@ -33,7 +37,7 @@
 		detail
 	}: {
 		pageRoute: string
-		listItems?: TListGroupItem[] | null
+		listItems?: TMasterDetailListGroupItem[] | null
 		emptyListMessage?: string | null
 		masterXVisible?: boolean
 		active?: TFindIsActive
@@ -46,6 +50,9 @@
 		ellipses?: boolean
 		noLinkReplace?: boolean
 		rounded?: boolean
+		roundedDetailFormatted?: boolean
+		detailShowHeader?: boolean
+		showDetailOnNoSelection?: boolean
 		showAllPrint?: boolean
 		smallScreenWidth?: number
 		empty?: Snippet
@@ -57,6 +64,17 @@
 
 	let pathAnalyzer = $derived(browser ? new PathAnalyzer(page, pageRoute) : null)
 
+	function pathFromItem(modalItem: TMasterDetailListGroupItem): string {
+		return modalItem.href ??
+			(ToPascalCase((modalItem.title ?? '').toString()) + (modalItem.value ? `:${modalItem.value}` : ''))
+	}
+
+	let openItem = $derived((listItems ?? []).find(listItem => !!pathAnalyzer?.isOpen(pathFromItem(listItem))))
+
+	let showRoundedDetailFormatted = $derived(rounded && (openItem?.roundedDetailFormatted ?? roundedDetailFormatted))
+
+	let showDetailShowHeader = $derived(!!openItem && (openItem?.detailShowHeader ?? detailShowHeader))
+
 	let innerWidth = $state<number | undefined>(undefined)
 
 	type TScreenSize = 'small' | 'medium' | 'large'
@@ -69,9 +87,10 @@
 <svelte:window bind:innerWidth={innerWidth} />
 
 {#if pathAnalyzer && innerWidth}
-	<div class='masterDetail absolute inset-0 print:relative grid grid-cols-1 md:grid-cols-[auto_1fr] print:md:block {mdClass}'
-	class:gap-3={rounded}
-	class:p-3={rounded}>
+	<div
+		class='masterDetail absolute inset-0 print:relative grid grid-cols-1 md:grid-cols-[auto_1fr] print:md:block {mdClass}'
+		class:gap-3={rounded}
+		class:p-3={rounded}>
 		{#if !smallScreen || !pathAnalyzer.activePageSlug}
 			{#if mdHideMaster && !smallScreen}
 				<div class='w-0'></div>
@@ -128,15 +147,29 @@
 		{/if}
 
 		{#if !smallScreen || !!pathAnalyzer.activePageSlug}
-			<div
-				class='masterDetailMaster relative grid grid-rows-1 md:relative overflow-hidden print:overflow-visible max-md:h-full max-md:w-full {detailClass}'
-				class:bg-white={rounded}
-				class:dark:bg-slate-700={rounded}
-				class:rounded-lg={rounded}
-				class:drop-shadow={rounded}
-				transition:fly|local={!animate ? undefined : {duration: 300, x: 100, opacity: 0, easing: quintOut}}>
-				{#if detail}
-					{@render detail()}
+			<div class="grid grid-rows-[auto_1fr] overflow-hidden">
+				<div>
+					{#if showDetailShowHeader}
+						<h3 class="text-center">
+							{#if !!openItem?.faProps}
+								<Icon {...openItem.faProps} fw />
+							{/if}
+							{openItem?.title ?? ''}
+						</h3>
+					{/if}
+				</div>
+				{#if showDetailOnNoSelection || !!openItem}
+					<div
+						class='masterDetailMaster relative grid grid-rows-1 md:relative overflow-hidden print:overflow-visible max-md:h-full max-md:w-full {detailClass}'
+						class:bg-white={showRoundedDetailFormatted}
+						class:dark:bg-slate-700={showRoundedDetailFormatted}
+						class:rounded-lg={showRoundedDetailFormatted}
+						class:drop-shadow={showRoundedDetailFormatted}
+						transition:fly|local={!animate ? undefined : {duration: 300, x: 100, opacity: 0, easing: quintOut}}>
+						{#if detail}
+							{@render detail()}
+						{/if}
+					</div>
 				{/if}
 			</div>
 		{/if}

package/dist/MasterDetailLayout.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { TListGroupItem } from './Definitions';
-import type { TFindIsActive } from '@solidbasisventures/intelliwaketsfoundation';
+import type { TMasterDetailListGroupItem } from './Definitions';
+import { type TFindIsActive } from '@solidbasisventures/intelliwaketsfoundation';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     pageRoute: string;
-    listItems?: TListGroupItem[] | null;
+    listItems?: TMasterDetailListGroupItem[] | null;
     emptyListMessage?: string | null;
     masterXVisible?: boolean;
     active?: TFindIsActive;
@@ -16,6 +16,9 @@ type $$ComponentProps = {
     ellipses?: boolean;
     noLinkReplace?: boolean;
     rounded?: boolean;
+    roundedDetailFormatted?: boolean;
+    detailShowHeader?: boolean;
+    showDetailOnNoSelection?: boolean;
     showAllPrint?: boolean;
     smallScreenWidth?: number;
     empty?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelliwaketssveltekitv25",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",