intelliwaketssveltekitv25 1.0.81 → 1.0.82

package/dist/DropDown.stories.js

@@ -0,0 +1,192 @@
+import DropDown from './DropDown.svelte';
+import { faEdit, faTrash, faCopy, faDownload, faFile } from '@fortawesome/free-solid-svg-icons';
+const meta = {
+    title: 'Components/DropDown',
+    component: DropDown,
+    tags: ['autodocs'],
+    argTypes: {
+        show: {
+            control: 'boolean',
+            description: 'Control dropdown open/closed state'
+        },
+        ddActions: {
+            control: 'object',
+            description: 'Array of menu items/actions (IDDAction[])'
+        },
+        buttonTitle: {
+            control: 'text',
+            description: 'Button text (if not using button snippet)'
+        },
+        noCaret: {
+            control: 'boolean',
+            description: 'Hide the dropdown arrow icon'
+        },
+        buttonClass: {
+            control: 'text',
+            description: 'CSS classes for the button'
+        },
+        inputControl: {
+            control: 'boolean',
+            description: 'Style button as input control'
+        },
+        fullBlock: {
+            control: 'boolean',
+            description: 'Make button full width'
+        },
+        sameSize: {
+            control: 'boolean',
+            description: 'Make dropdown menu same width as button'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the dropdown'
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Hide the dropdown'
+        }
+    }
+};
+export default meta;
+const basicActions = [
+    { title: 'Edit', faProps: { icon: faEdit }, action: () => alert('Edit clicked') },
+    { title: 'Copy', faProps: { icon: faCopy }, action: () => alert('Copy clicked') },
+    { divider: true },
+    { title: 'Delete', faProps: { icon: faTrash }, action: () => alert('Delete clicked') }
+];
+export const Default = {
+    args: {
+        buttonTitle: 'Actions',
+        ddActions: basicActions
+    }
+};
+export const WithActiveItem = {
+    args: {
+        buttonTitle: 'Option 2',
+        inputControl: true,
+        ddActions: [
+            { title: 'Option 1', action: () => { } },
+            { title: 'Option 2', active: true, action: () => { } },
+            { title: 'Option 3', action: () => { } }
+        ]
+    }
+};
+export const WithDisabledItems = {
+    args: {
+        buttonTitle: 'Actions',
+        ddActions: [
+            { title: 'Available Action', action: () => { } },
+            { title: 'Disabled Action', disabled: true, action: () => { } },
+            { title: 'Another Action', action: () => { } }
+        ]
+    }
+};
+export const WithHeaders = {
+    args: {
+        buttonTitle: 'Options',
+        ddActions: [
+            { title: 'File Operations', header: true },
+            { title: 'Open', action: () => { } },
+            { title: 'Save', action: () => { } },
+            { divider: true },
+            { title: 'Edit Operations', header: true },
+            { title: 'Cut', action: () => { } },
+            { title: 'Copy', action: () => { } }
+        ]
+    }
+};
+export const WithGrouping = {
+    args: {
+        buttonTitle: 'Grouped',
+        ddActions: [
+            { title: 'Item 1', headerGroup: 'Group A', action: () => { } },
+            { title: 'Item 2', headerGroup: 'Group A', action: () => { } },
+            { title: 'Item 3', headerGroup: 'Group B', action: () => { } },
+            { title: 'Item 4', headerGroup: 'Group B', action: () => { } }
+        ]
+    }
+};
+export const WithNavigation = {
+    args: {
+        buttonTitle: 'Navigate',
+        ddActions: [
+            { title: 'Dashboard', href: '/dashboard' },
+            { title: 'Settings', href: '/settings' },
+            { divider: true },
+            { title: 'Logout', href: '/logout', hrefReplace: true }
+        ]
+    }
+};
+export const WithDownloads = {
+    args: {
+        buttonTitle: 'Export',
+        ddActions: [
+            {
+                title: 'Export as CSV',
+                faProps: { icon: faFile },
+                hrefDownload: '/api/export?format=csv',
+                hrefDownloadFilename: 'data.csv'
+            },
+            {
+                title: 'Export as PDF',
+                faProps: { icon: faFile },
+                hrefDownload: '/api/export?format=pdf',
+                hrefDownloadFilename: 'data.pdf'
+            }
+        ]
+    }
+};
+export const WithAlternateActions = {
+    args: {
+        buttonTitle: 'Files',
+        ddActions: [
+            {
+                title: 'document.pdf',
+                faProps: { icon: faFile },
+                action: () => alert('Open document'),
+                alternateAction: () => alert('Download document'),
+                alternateFAProps: { icon: faDownload }
+            }
+        ]
+    }
+};
+export const AsSelectReplacement = {
+    args: {
+        buttonTitle: 'Medium',
+        inputControl: true,
+        fullBlock: true,
+        sameSize: true,
+        ddActions: [
+            { title: 'Small', action: () => { } },
+            { title: 'Medium', active: true, action: () => { } },
+            { title: 'Large', action: () => { } },
+            { title: 'X-Large', action: () => { } }
+        ]
+    }
+};
+export const Disabled = {
+    args: {
+        buttonTitle: 'Actions',
+        disabled: true,
+        ddActions: basicActions
+    }
+};
+export const NoCaret = {
+    args: {
+        buttonTitle: 'Menu',
+        noCaret: true,
+        ddActions: basicActions
+    }
+};
+export const FullWidth = {
+    args: {
+        buttonTitle: 'Select Option',
+        fullBlock: true,
+        inputControl: true,
+        ddActions: [
+            { title: 'Option 1', action: () => { } },
+            { title: 'Option 2', action: () => { } },
+            { title: 'Option 3', action: () => { } }
+        ]
+    }
+};

package/dist/DropDown.svelte

@@ -1,3 +1,35 @@
+<!--
+  @component
+  Rich dropdown menu with keyboard navigation, icons, search, and action handling.
+  Replaces native <select> elements and provides context menus, action lists, and navigation dropdowns.
+
+  @example
+  ```svelte
+  <script>
+    import { DropDown } from 'intelliwaketssveltekitv25';
+    import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+
+    const actions = [
+      { title: 'Edit', faProps: { icon: faEdit }, action: () => editItem() },
+      { title: 'Delete', faProps: { icon: faTrash }, action: () => deleteItem() }
+    ];
+  </script>
+
+  <DropDown buttonTitle="Actions" ddActions={actions} />
+  ```
+
+  @remarks
+  - Keyboard navigation: Arrow keys, Enter, Tab, type-to-search
+  - Supports icons (FontAwesome), dividers, headers, and grouping
+  - Action handlers, href navigation, and download links
+  - Auto-positioning based on viewport space
+  - Active item highlighting for selection scenarios
+  - Alternate actions (two buttons per row)
+
+  @see DropDownControl - Lower-level dropdown control (used internally)
+  @see MultiSelect - For selecting multiple options from a list
+-->
+
 <script lang='ts'>
 	import DropDownControl from './DropDownControl.svelte'
 	import { type Snippet, tick } from 'svelte'

package/dist/DropDown.svelte.d.ts

@@ -23,6 +23,36 @@ type $$ComponentProps = {
     dataColor?: TDefaultColorPalate;
     clientWidth?: number;
 };
+/**
+ * Rich dropdown menu with keyboard navigation, icons, search, and action handling.
+ * Replaces native <select> elements and provides context menus, action lists, and navigation dropdowns.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { DropDown } from 'intelliwaketssveltekitv25';
+ *   import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+ *
+ *   const actions = [
+ *     { title: 'Edit', faProps: { icon: faEdit }, action: () => editItem() },
+ *     { title: 'Delete', faProps: { icon: faTrash }, action: () => deleteItem() }
+ *   ];
+ * </script>
+ *
+ * <DropDown buttonTitle="Actions" ddActions={actions} />
+ * ```
+ *
+ * @remarks
+ * - Keyboard navigation: Arrow keys, Enter, Tab, type-to-search
+ * - Supports icons (FontAwesome), dividers, headers, and grouping
+ * - Action handlers, href navigation, and download links
+ * - Auto-positioning based on viewport space
+ * - Active item highlighting for selection scenarios
+ * - Alternate actions (two buttons per row)
+ *
+ * @see DropDownControl - Lower-level dropdown control (used internally)
+ * @see MultiSelect - For selecting multiple options from a list
+ */
 declare const DropDown: import("svelte").Component<$$ComponentProps, {}, "show" | "clientWidth">;
 type DropDown = ReturnType<typeof DropDown>;
 export default DropDown;

package/dist/InputNumber.stories.d.ts

@@ -0,0 +1,122 @@
+import type { StoryObj } from '@storybook/svelte';
+type InputNumberProps = {
+    value?: number | null;
+    currency?: boolean;
+    percent?: boolean;
+    fixedDecimals?: number;
+    minDecimals?: number;
+    maxDecimals?: number;
+    min?: number;
+    max?: number;
+    allowNegative?: boolean;
+    zeroBlank?: boolean;
+    zeroDash?: boolean;
+    prefix?: string;
+    suffix?: string;
+    delayChange?: boolean | number | 'blur';
+    widthNumbers?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<import("./Functions").TInputNumberAttributes, {}, "value" | "thisRef">;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: "number";
+            description: string;
+        };
+        currency: {
+            control: "boolean";
+            description: string;
+        };
+        percent: {
+            control: "boolean";
+            description: string;
+        };
+        fixedDecimals: {
+            control: "number";
+            description: string;
+        };
+        minDecimals: {
+            control: "number";
+            description: string;
+        };
+        maxDecimals: {
+            control: "number";
+            description: string;
+        };
+        min: {
+            control: "number";
+            description: string;
+        };
+        max: {
+            control: "number";
+            description: string;
+        };
+        allowNegative: {
+            control: "boolean";
+            description: string;
+        };
+        zeroBlank: {
+            control: "boolean";
+            description: string;
+        };
+        zeroDash: {
+            control: "boolean";
+            description: string;
+        };
+        prefix: {
+            control: "text";
+            description: string;
+        };
+        suffix: {
+            control: "text";
+            description: string;
+        };
+        delayChange: {
+            control: "boolean";
+            description: string;
+        };
+        widthNumbers: {
+            control: "number";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        readonly: {
+            control: "boolean";
+            description: string;
+        };
+        required: {
+            control: "boolean";
+            description: string;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<InputNumberProps>;
+export declare const Default: Story;
+export declare const Currency: Story;
+export declare const Percentage: Story;
+export declare const IntegerOnly: Story;
+export declare const WithMinMax: Story;
+export declare const AllowNegative: Story;
+export declare const ZeroBlank: Story;
+export declare const ZeroDash: Story;
+export declare const CustomSuffix: Story;
+export declare const CustomPrefix: Story;
+export declare const Disabled: Story;
+export declare const Readonly: Story;
+export declare const WithDelayChange: Story;
+export declare const WithWidth: Story;
+export declare const Required: Story;

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;