intelliwaketssveltekitv25 1.0.80 → 1.0.82

package/dist/InputNumber.stories.js

@@ -0,0 +1,186 @@
+import InputNumber from './InputNumber.svelte';
+const meta = {
+    title: 'Components/InputNumber',
+    component: InputNumber,
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'number',
+            description: 'Current numeric value (two-way bindable)'
+        },
+        currency: {
+            control: 'boolean',
+            description: 'Format as currency (adds $ prefix, 2 decimals)'
+        },
+        percent: {
+            control: 'boolean',
+            description: 'Format as percentage (adds % suffix, stores as decimal 0-1, displays as 0-100)'
+        },
+        fixedDecimals: {
+            control: 'number',
+            description: 'Force exact number of decimal places'
+        },
+        minDecimals: {
+            control: 'number',
+            description: 'Minimum decimal places to show'
+        },
+        maxDecimals: {
+            control: 'number',
+            description: 'Maximum decimal places allowed'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum allowed value'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum allowed value'
+        },
+        allowNegative: {
+            control: 'boolean',
+            description: 'Allow negative numbers'
+        },
+        zeroBlank: {
+            control: 'boolean',
+            description: 'Display empty string instead of 0'
+        },
+        zeroDash: {
+            control: 'boolean',
+            description: 'Display "-" instead of 0'
+        },
+        prefix: {
+            control: 'text',
+            description: 'Custom prefix (overrides currency $)'
+        },
+        suffix: {
+            control: 'text',
+            description: 'Custom suffix (overrides percent %)'
+        },
+        delayChange: {
+            control: 'boolean',
+            description: 'Delay before updating value: true=1500ms, number=custom ms, "blur"=only on blur'
+        },
+        widthNumbers: {
+            control: 'number',
+            description: 'Set input width based on number of digits'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the input'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Make input readonly'
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark as required field'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 0
+    }
+};
+export const Currency = {
+    args: {
+        value: 29.99,
+        currency: true
+    }
+};
+export const Percentage = {
+    args: {
+        value: 0.08, // Stored as 0.08, displays as 8%
+        percent: true
+    }
+};
+export const IntegerOnly = {
+    args: {
+        value: 42,
+        fixedDecimals: 0
+    }
+};
+export const WithMinMax = {
+    args: {
+        value: 5,
+        min: 1,
+        max: 10
+    }
+};
+export const AllowNegative = {
+    args: {
+        value: -50,
+        currency: true,
+        allowNegative: true
+    }
+};
+export const ZeroBlank = {
+    args: {
+        value: 0,
+        currency: true,
+        zeroBlank: true
+    }
+};
+export const ZeroDash = {
+    args: {
+        value: 0,
+        currency: true,
+        zeroDash: true
+    }
+};
+export const CustomSuffix = {
+    args: {
+        value: 72.5,
+        suffix: 'kg',
+        maxDecimals: 2
+    }
+};
+export const CustomPrefix = {
+    args: {
+        value: 100,
+        prefix: '€',
+        fixedDecimals: 2
+    }
+};
+export const Disabled = {
+    args: {
+        value: 99.99,
+        currency: true,
+        disabled: true
+    }
+};
+export const Readonly = {
+    args: {
+        value: 1234.56,
+        currency: true,
+        readonly: true
+    }
+};
+export const WithDelayChange = {
+    args: {
+        value: 100,
+        currency: true,
+        delayChange: true
+    }
+};
+export const WithWidth = {
+    args: {
+        value: 12345,
+        widthNumbers: 5,
+        fixedDecimals: 0
+    }
+};
+export const Required = {
+    args: {
+        value: null,
+        currency: true,
+        required: true,
+        placeholder: 'Enter amount'
+    }
+};

package/dist/InputNumber.svelte

@@ -1,3 +1,32 @@
+<!--
+  @component
+  Formatted numeric input with automatic currency, percentage, and decimal handling.
+  Replaces native <input type="number"> for all numeric data entry.
+
+  @example
+  ```svelte
+  <script>
+    import { InputNumber } from 'intelliwaketssveltekitv25';
+    let price = $state(29.99);
+    let taxRate = $state(0.08); // Stored as decimal, displays as 8%
+  </script>
+
+  <InputNumber bind:value={price} currency />
+  <InputNumber bind:value={taxRate} percent />
+  ```
+
+  @remarks
+  - Uses Svelte 5 $bindable rune for two-way binding of value
+  - Percent mode: stores as decimal (0-1), displays as whole number (0-100)
+  - Supports delayed updates via delayChange for performance optimization
+  - Automatically enforces min/max constraints
+  - Handles prefix ($) and suffix (%) with proper spacing
+  - Configurable decimal precision (fixed, min, max)
+
+  @see InputNumberScroll - Numeric input with scroll wheel support
+  @see NumberFormat - Display-only formatted number component
+-->
+
 <script lang="ts">
 	import {
 		CleanNumber,
@@ -10,28 +39,51 @@
 	import { useActions } from './useActions'
 
 	let {
+		/** Current numeric value (two-way bindable) */
 		value = $bindable(),
+		/** Additional CSS classes for wrapper div */
 		class: clazz = '',
+		/** CSS classes for input element */
 		inputClass = '',
+		/** Callback when value changes */
 		onchange,
+		/** Format as currency (adds $ prefix, 2 decimals) */
 		currency,
+		/** Format as percentage (adds % suffix, stores as decimal 0-1, displays as 0-100) */
 		percent,
+		/** Force exact number of decimal places */
 		fixedDecimals,
+		/** Minimum decimal places to show */
 		minDecimals,
+		/** Maximum decimal places allowed */
 		maxDecimals,
+		/** Display empty string instead of 0 */
 		zeroBlank,
+		/** Display "-" instead of 0 */
 		zeroDash,
+		/** Display empty string for null values */
 		nullBlank,
+		/** Display "-" for null values */
 		nullDash,
+		/** Custom prefix (overrides currency $) */
 		prefix,
+		/** Custom suffix (overrides percent %) */
 		suffix,
+		/** Minimum allowed value */
 		min,
+		/** Maximum allowed value */
 		max,
+		/** Allow negative numbers */
 		allowNegative,
+		/** Delay before updating value: true=1500ms, number=custom ms, 'blur'=only on blur */
 		delayChange = false,
+		/** Svelte actions array */
 		use = [],
+		/** Reference to input element (bindable) */
 		thisRef = $bindable<HTMLInputElement>(),
+		/** Set input width based on number of digits */
 		widthNumbers,
+		/** Standard HTML input attributes (disabled, readonly, required, name, placeholder, etc.) */
 		...otherProps
 	}: TInputNumberAttributes = $props()
 

package/dist/InputNumber.svelte.d.ts

@@ -1,4 +1,31 @@
 import { type TInputNumberAttributes } from './Functions';
+/**
+ * Formatted numeric input with automatic currency, percentage, and decimal handling.
+ * Replaces native <input type="number"> for all numeric data entry.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { InputNumber } from 'intelliwaketssveltekitv25';
+ *   let price = $state(29.99);
+ *   let taxRate = $state(0.08); // Stored as decimal, displays as 8%
+ * </script>
+ *
+ * <InputNumber bind:value={price} currency />
+ * <InputNumber bind:value={taxRate} percent />
+ * ```
+ *
+ * @remarks
+ * - Uses Svelte 5 $bindable rune for two-way binding of value
+ * - Percent mode: stores as decimal (0-1), displays as whole number (0-100)
+ * - Supports delayed updates via delayChange for performance optimization
+ * - Automatically enforces min/max constraints
+ * - Handles prefix ($) and suffix (%) with proper spacing
+ * - Configurable decimal precision (fixed, min, max)
+ *
+ * @see InputNumberScroll - Numeric input with scroll wheel support
+ * @see NumberFormat - Display-only formatted number component
+ */
 declare const InputNumber: import("svelte").Component<TInputNumberAttributes, {}, "value" | "thisRef">;
 type InputNumber = ReturnType<typeof InputNumber>;
 export default InputNumber;

package/dist/Modal.stories.d.ts

@@ -0,0 +1,114 @@
+import type { StoryObj } from '@storybook/svelte';
+type ModalProps = {
+    show: unknown;
+    noShowValue?: unknown;
+    width?: string;
+    cancelButton?: string | false;
+    okButton?: string | false;
+    okDisabled?: boolean;
+    noCloseOnOK?: boolean;
+    disable?: boolean;
+    okType?: 'submit' | 'button';
+    overflowY?: 'auto' | 'visible' | 'hidden';
+    borderFooter?: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        header?: import("svelte").Snippet;
+        body?: import("svelte").Snippet;
+        leftFooter?: import("svelte").Snippet;
+        centerFooter?: import("svelte").Snippet;
+        rightFooter?: import("svelte").Snippet;
+        show: unknown;
+        noShowValue?: unknown;
+        forceNoShow?: boolean;
+        width?: string;
+        cancelButton?: string | false;
+        okButton?: string | false;
+        okFAProps?: import("./Definitions").IFAProps;
+        okActionNotOnEnter?: boolean;
+        okDisabled?: boolean;
+        noCloseOnOK?: boolean;
+        overflowY?: "auto" | "visible" | "hidden";
+        disable?: boolean;
+        okType?: "submit" | "button";
+        marginForStickyHeader?: boolean;
+        okButtonWrap?: boolean;
+        class?: string;
+        okColor?: TDefaultColorPalate | null;
+        color?: TDefaultColorPalate | null;
+        classHeader?: string;
+        classBody?: string;
+        classFooter?: string;
+        classButton?: string;
+        borderFooter?: boolean;
+        onOK?: () => void;
+        onOKPromise?: () => Promise<unknown>;
+        onCancel?: () => void;
+        onClose?: () => void;
+    }, {}, "show">;
+    tags: string[];
+    argTypes: {
+        show: {
+            control: "boolean";
+            description: string;
+        };
+        noShowValue: {
+            control: "text";
+            description: string;
+        };
+        width: {
+            control: "text";
+            description: string;
+        };
+        cancelButton: {
+            control: "text";
+            description: string;
+        };
+        okButton: {
+            control: "text";
+            description: string;
+        };
+        okDisabled: {
+            control: "boolean";
+            description: string;
+        };
+        noCloseOnOK: {
+            control: "boolean";
+            description: string;
+        };
+        disable: {
+            control: "boolean";
+            description: string;
+        };
+        okType: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        overflowY: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        borderFooter: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ModalProps>;
+export declare const Default: Story;
+export declare const WideModal: Story;
+export declare const NarrowModal: Story;
+export declare const OnlyOKButton: Story;
+export declare const OnlyCancelButton: Story;
+export declare const NoButtons: Story;
+export declare const OKDisabled: Story;
+export declare const NoCloseOnOK: Story;
+export declare const WithActivityOverlay: Story;
+export declare const FormSubmitType: Story;
+export declare const NoBorderFooter: Story;
+export declare const OverflowVisible: Story;

package/dist/Modal.stories.js

@@ -0,0 +1,139 @@
+import Modal from './Modal.svelte';
+const meta = {
+    title: 'Components/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+    argTypes: {
+        show: {
+            control: 'boolean',
+            description: 'Control visibility: value equal to noShowValue hides modal, any other value shows it'
+        },
+        noShowValue: {
+            control: 'text',
+            description: 'The value to compare against show to determine if modal should be hidden'
+        },
+        width: {
+            control: 'text',
+            description: 'Modal width (CSS value like "40em", "500px", "80%")'
+        },
+        cancelButton: {
+            control: 'text',
+            description: 'Cancel button text, or false to hide'
+        },
+        okButton: {
+            control: 'text',
+            description: 'OK button text, or false to hide'
+        },
+        okDisabled: {
+            control: 'boolean',
+            description: 'Disable the OK button'
+        },
+        noCloseOnOK: {
+            control: 'boolean',
+            description: 'Keep modal open after OK click (useful for form validation)'
+        },
+        disable: {
+            control: 'boolean',
+            description: 'Disable all interactions (shows activity overlay)'
+        },
+        okType: {
+            control: 'select',
+            options: ['submit', 'button'],
+            description: 'Button type for form integration'
+        },
+        overflowY: {
+            control: 'select',
+            options: ['auto', 'visible', 'hidden'],
+            description: 'Body overflow behavior'
+        },
+        borderFooter: {
+            control: 'boolean',
+            description: 'Show border above footer'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        show: true,
+        cancelButton: 'Cancel',
+        okButton: 'OK'
+    }
+};
+export const WideModal = {
+    args: {
+        show: true,
+        width: '80%',
+        cancelButton: 'Cancel',
+        okButton: 'Save'
+    }
+};
+export const NarrowModal = {
+    args: {
+        show: true,
+        width: '30em',
+        cancelButton: 'Cancel',
+        okButton: 'Confirm'
+    }
+};
+export const OnlyOKButton = {
+    args: {
+        show: true,
+        cancelButton: false,
+        okButton: 'Close'
+    }
+};
+export const OnlyCancelButton = {
+    args: {
+        show: true,
+        cancelButton: 'Close',
+        okButton: false
+    }
+};
+export const NoButtons = {
+    args: {
+        show: true,
+        cancelButton: false,
+        okButton: false
+    }
+};
+export const OKDisabled = {
+    args: {
+        show: true,
+        okButton: 'Save',
+        okDisabled: true
+    }
+};
+export const NoCloseOnOK = {
+    args: {
+        show: true,
+        okButton: 'Validate',
+        noCloseOnOK: true
+    }
+};
+export const WithActivityOverlay = {
+    args: {
+        show: true,
+        okButton: 'Processing...',
+        disable: true
+    }
+};
+export const FormSubmitType = {
+    args: {
+        show: true,
+        okButton: 'Submit',
+        okType: 'submit'
+    }
+};
+export const NoBorderFooter = {
+    args: {
+        show: true,
+        borderFooter: false
+    }
+};
+export const OverflowVisible = {
+    args: {
+        show: true,
+        overflowY: 'visible'
+    }
+};

package/dist/Modal.svelte

@@ -1,9 +1,40 @@
 <!--
   @component
+  Full-featured modal dialog with draggable header, keyboard shortcuts, and flexible content slots.
+  Replaces native <dialog> element or custom div overlays.
 
-  This component presents a modal window using the HTML5 dialog element
-  @param {any} show A property that determines if the modal should be shown or not
-  @param {any} noShowValue A property that, if equal to the show property, will hide the modal, otherwise show the modal
+  @example
+  ```svelte
+  <script>
+    import { Modal } from 'intelliwaketssveltekitv25';
+    let showModal = $state(false);
+  </script>
+
+  <Modal
+    bind:show={showModal}
+    okButton="Save"
+    cancelButton="Cancel"
+  >
+    {#snippet header()}
+      Edit Settings
+    {/snippet}
+    {#snippet body()}
+      <p>Modal content...</p>
+    {/snippet}
+  </Modal>
+  ```
+
+  @remarks
+  - Uses Svelte 5 $bindable rune for two-way binding of show state
+  - Draggable: click and drag header to reposition modal
+  - Keyboard shortcuts: Enter triggers OK, Escape cancels
+  - Backdrop click closes modal (triggers cancel action)
+  - Activity overlay support for async operations
+  - Multiple Snippet slots for flexible layouts (header, body, leftFooter, centerFooter, rightFooter)
+
+  @see ModalFormAction - Specialized modal for SvelteKit form actions
+  @see ModalPromptControl - Modal with prompt/confirmation patterns
+  @see ActivityOverlay - Loading overlay component (used internally)
 -->
 
 <script lang='ts'>

package/dist/Modal.svelte.d.ts

@@ -37,9 +37,41 @@ type $$ComponentProps = {
     onClose?: () => void;
 };
 /**
- * This component presents a modal window using the HTML5 dialog element
- * @param {any} show A property that determines if the modal should be shown or not
- * @param {any} noShowValue A property that, if equal to the show property, will hide the modal, otherwise show the modal
+ * Full-featured modal dialog with draggable header, keyboard shortcuts, and flexible content slots.
+ * Replaces native <dialog> element or custom div overlays.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Modal } from 'intelliwaketssveltekitv25';
+ *   let showModal = $state(false);
+ * </script>
+ *
+ * <Modal
+ *   bind:show={showModal}
+ *   okButton="Save"
+ *   cancelButton="Cancel"
+ * >
+ *   {#snippet header()}
+ *     Edit Settings
+ *   {/snippet}
+ *   {#snippet body()}
+ *     <p>Modal content...</p>
+ *   {/snippet}
+ * </Modal>
+ * ```
+ *
+ * @remarks
+ * - Uses Svelte 5 $bindable rune for two-way binding of show state
+ * - Draggable: click and drag header to reposition modal
+ * - Keyboard shortcuts: Enter triggers OK, Escape cancels
+ * - Backdrop click closes modal (triggers cancel action)
+ * - Activity overlay support for async operations
+ * - Multiple Snippet slots for flexible layouts (header, body, leftFooter, centerFooter, rightFooter)
+ *
+ * @see ModalFormAction - Specialized modal for SvelteKit form actions
+ * @see ModalPromptControl - Modal with prompt/confirmation patterns
+ * @see ActivityOverlay - Loading overlay component (used internally)
  */
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "show">;
 type Modal = ReturnType<typeof Modal>;