@cloudparker/moldex.js 0.0.68 → 0.0.69

package/dist/services/dialog/dialog-service.d.ts

@@ -26,7 +26,7 @@ export declare function openAlertDialog(params?: DialogProps & {
 export declare function openDeleteConfirmDialog(params?: DialogProps & {
     msg?: string;
 }): Promise<unknown>;
-export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }: DialogProps & PickerDialogProps): Promise<R>;
 export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;
@@ -52,6 +52,7 @@ export declare function openLoadingDialog({ msg, loadingDialogContainerClassName
     postData: (data: any) => void;
     setHeaderSnippet: (snippet: import("svelte").Snippet) => void;
     setFooterSnippet: (snippet: import("svelte").Snippet) => void;
+    setDialogTitle: (dialogTitle: string) => void;
 } & {
     $set?: any;
     $on?: any;

package/dist/services/dialog/dialog-service.js

@@ -70,7 +70,7 @@ export async function openDeleteConfirmDialog(params = {}) {
         footerOkButtonClassName: 'bg-red-500 hover:bg-red-700 focus:bg-red-700'
     });
 }
-export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, ...params }) {
+export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }) {
     if (hasArrow) {
         multiple = false;
         hasCheckbox = false;
@@ -83,13 +83,20 @@ export async function openPickerDialog({ items, value, multiple, hasCheckbox = t
             multiple,
             hasCheckbox,
             hasArrow,
+            maxlength,
+            maxlengthMsg,
+            identityFieldName,
+            titleFieldName,
+            searchFieldName,
+            subtitleFieldName,
         },
         hasHeader: true,
+        hasTitle: true,
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
         footerOkButtonLable: 'Select',
         footerClassName: 'border-t',
-        title: 'Picker',
+        title: 'Pick',
         ...params,
         hasFooter: multiple,
         hasFooterOkButton: multiple,

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

@@ -64,7 +64,8 @@ let dialogExports = {
   setOnOkClick,
   setOnData,
   setHeaderSnippet,
-  setFooterSnippet
+  setFooterSnippet,
+  setDialogTitle
 };
 let isPlaced = $state(false);
 let isOpened = $state(false);
@@ -87,6 +88,7 @@ let screenSizeClassNameMap = {
   xl: xlSizeClassName,
   full: fullSizeClassName
 };
+let customTitle = $state("");
 export function toggleDialog() {
   if (isOpened) {
     closeDialog();
@@ -138,6 +140,9 @@ export function setHeaderSnippet(snippet) {
 export function setFooterSnippet(snippet) {
   footerSnippet = snippet;
 }
+export function setDialogTitle(dialogTitle) {
+  customTitle = dialogTitle;
+}
 function handleBackdropClick() {
   if (cancelable) {
     closeDialog();
@@ -209,7 +214,7 @@ $effect(() => {
 					<div class="py-2 flex-grow">
 						{#if hasTitle}
 							<div class="text-xl text-base-800 dark:text-base-300 {titleClassName}">
-								{title || ''}
+								{@html customTitle || title || ''}
 							</div>
 						{/if}
 						{#if hasSubtitle}

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

@@ -63,6 +63,7 @@ export type DialogExports = {
     setOnData: (listener: (data: any) => void) => void;
     setHeaderSnippet: (snippet: Snippet) => void;
     setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (title: string) => void;
 };
 import { type Snippet } from 'svelte';
 import '../../../../../tailwind.css';
@@ -94,6 +95,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogProps, {
     postData: (data: any) => void;
     setHeaderSnippet: (snippet: Snippet) => void;
     setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (dialogTitle: string) => void;
 }, "">;
 type Dialog = InstanceType<typeof Dialog>;
 export default Dialog;

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

@@ -1,6 +1,7 @@
 <script lang="ts" module></script>
 
-<script lang="ts">import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
+<script lang="ts">import { showToast } from "../../../../../services";
+import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
 import ButtonSearch from "../../../button/components/button-search/button-search.svelte";
 let {
   value,
@@ -12,10 +13,13 @@ let {
   searchFieldName = "name",
   hasCheckbox,
   hasArrow,
+  maxlength = 0,
+  maxlengthMsg = "Selection limit reached!",
   closeDialog,
   setResult,
   setOnOkClick,
-  setHeaderSnippet
+  setHeaderSnippet,
+  setDialogTitle
 } = $props();
 let selected = $state({ items: {} });
 let searchText = $state("");
@@ -62,7 +66,18 @@ function handleItemClick(ev, item, index) {
     if (selected.items[itemId]) {
       delete selected.items[itemId];
     } else {
-      selected.items[itemId] = itemId;
+      let itemLength2 = Object.keys(selected.items).length;
+      if (maxlength > 0 && itemLength2 >= maxlength) {
+        showToast({ msg: maxlengthMsg });
+      } else {
+        selected.items[itemId] = itemId;
+      }
+    }
+    let itemLength = Object.keys(selected.items).length;
+    if (itemLength) {
+      setDialogTitle(`Selected (${itemLength})`);
+    } else {
+      setDialogTitle("");
     }
   }
 }

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

@@ -7,13 +7,9 @@ export type PickerDialogProps = {
     searchFieldName?: string;
     subtitleFieldName?: string;
     hasCheckbox?: boolean;
-    checkboxCheckIconPath?: string;
-    checkboxUncheckIconPath?: string;
-    checkboxCheckIconClassName?: string;
-    checkboxUncheckIconClassName?: string;
     hasArrow?: boolean;
-    arrowIconPath?: string;
-    arrowIconClassName?: string;
+    maxlength?: number;
+    maxlengthMsg?: string;
 };
 import type { DialogExports } 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> {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.68",
+    "version": "0.0.69",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [