intelliwaketssveltekitv25 1.0.80 → 1.0.82

package/dist/ButtonGroup.stories.js

@@ -0,0 +1,127 @@
+import ButtonGroup from './ButtonGroup.svelte';
+const meta = {
+    title: 'Components/ButtonGroup',
+    component: ButtonGroup,
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Currently selected value'
+        },
+        options: {
+            control: 'object',
+            description: 'Array of options (strings or objects with key, name, disabled, hidden)'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        },
+        name: {
+            control: 'text',
+            description: 'Name for hidden input field'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Makes the button group readonly'
+        },
+        dataColor: {
+            control: 'select',
+            options: ['primary', 'secondary', 'danger', 'warning', 'gray'],
+            description: 'Color palette for the buttons'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 'option2',
+        options: ['option1', 'option2', 'option3']
+    }
+};
+export const WithObjectOptions = {
+    args: {
+        value: 'two',
+        options: [
+            { key: 'one', name: 'First Option' },
+            { key: 'two', name: 'Second Option' },
+            { key: 'three', name: 'Third Option' }
+        ]
+    }
+};
+export const WithDisabledOption = {
+    args: {
+        value: 'medium',
+        options: [
+            { key: 'small', name: 'Small' },
+            { key: 'medium', name: 'Medium' },
+            { key: 'large', name: 'Large', disabled: true },
+            { key: 'xlarge', name: 'X-Large' }
+        ]
+    }
+};
+export const WithHiddenOption = {
+    args: {
+        value: 'visible1',
+        options: [
+            { key: 'visible1', name: 'Visible 1' },
+            { key: 'hidden', name: 'Hidden Option', hidden: true },
+            { key: 'visible2', name: 'Visible 2' }
+        ]
+    }
+};
+export const Readonly = {
+    args: {
+        value: 'selected',
+        options: ['option1', 'selected', 'option3'],
+        readonly: true
+    }
+};
+export const WithPrimaryColor = {
+    args: {
+        value: 'option2',
+        options: ['option1', 'option2', 'option3'],
+        dataColor: 'primary'
+    }
+};
+export const WithSecondaryColor = {
+    args: {
+        value: 'option2',
+        options: ['option1', 'option2', 'option3'],
+        dataColor: 'secondary'
+    }
+};
+export const WithDangerColor = {
+    args: {
+        value: 'delete',
+        options: [
+            { key: 'save', name: 'Save' },
+            { key: 'delete', name: 'Delete' },
+            { key: 'cancel', name: 'Cancel' }
+        ],
+        dataColor: 'danger'
+    }
+};
+export const ManyOptions = {
+    args: {
+        value: '5',
+        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+    }
+};
+export const WithFormName = {
+    args: {
+        value: 'option2',
+        options: ['option1', 'option2', 'option3'],
+        name: 'buttonGroupField'
+    }
+};
+export const CustomClass = {
+    args: {
+        value: 'center',
+        options: [
+            { key: 'left', name: 'Left' },
+            { key: 'center', name: 'Center' },
+            { key: 'right', name: 'Right' }
+        ],
+        class: 'shadow-lg'
+    }
+};

package/dist/DropDown.stories.d.ts

@@ -0,0 +1,96 @@
+import type { StoryObj } from '@storybook/svelte';
+type DropDownProps = {
+    show?: boolean;
+    ddActions?: any[];
+    buttonTitle?: string | null;
+    noCaret?: boolean;
+    buttonClass?: string;
+    inputControl?: boolean;
+    fullBlock?: boolean;
+    sameSize?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        show?: boolean;
+        position?: import("./Definitions").TDropDownControlPosition;
+        ddActions?: import("./Definitions").IDDAction[];
+        noCaret?: boolean;
+        buttonTitle?: string | null;
+        buttonClass?: string;
+        controlClass?: string;
+        toggleClass?: string;
+        inputControl?: boolean;
+        fullBlock?: boolean;
+        bodyClass?: string;
+        sameSize?: boolean;
+        zIndex?: number;
+        disabled?: boolean;
+        hidden?: boolean;
+        hideEmptyDDActions?: boolean;
+        button?: import("svelte").Snippet;
+        verbose?: boolean;
+        actions?: import("svelte").Snippet;
+        dataColor?: TDefaultColorPalate;
+        clientWidth?: number;
+    }, {}, "show" | "clientWidth">;
+    tags: string[];
+    argTypes: {
+        show: {
+            control: "boolean";
+            description: string;
+        };
+        ddActions: {
+            control: "object";
+            description: string;
+        };
+        buttonTitle: {
+            control: "text";
+            description: string;
+        };
+        noCaret: {
+            control: "boolean";
+            description: string;
+        };
+        buttonClass: {
+            control: "text";
+            description: string;
+        };
+        inputControl: {
+            control: "boolean";
+            description: string;
+        };
+        fullBlock: {
+            control: "boolean";
+            description: string;
+        };
+        sameSize: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        hidden: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<DropDownProps>;
+export declare const Default: Story;
+export declare const WithActiveItem: Story;
+export declare const WithDisabledItems: Story;
+export declare const WithHeaders: Story;
+export declare const WithGrouping: Story;
+export declare const WithNavigation: Story;
+export declare const WithDownloads: Story;
+export declare const WithAlternateActions: Story;
+export declare const AsSelectReplacement: Story;
+export declare const Disabled: Story;
+export declare const NoCaret: Story;
+export declare const FullWidth: Story;

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/Functions.d.ts

@@ -69,6 +69,7 @@ export type TUpDownArrowOptions = {
     list?: ({
         id: number;
     } & Record<string, any>)[];
+    enterDown?: boolean;
 };
 /**
  * The `upDownArrows` function adds an event listener to an HTMLInputElement that responds to arrow key presses.

package/dist/Functions.js

@@ -368,7 +368,8 @@ export function upDownArrows(el, prePost) {
                     e.preventDefault();
                     break;
                 case KEY_STRING_DOWN_ARROW:
-                    {
+                case KEY_STRING_ENTER:
+                    if (prePost?.enterDown || e.key === KEY_STRING_DOWN_ARROW) {
                         const components = e.target.id?.split('_');
                         const currentID = CleanNumberNull(components.shift());
                         if (currentID !== null && components.length) {
@@ -389,8 +390,8 @@ export function upDownArrows(el, prePost) {
                                 element?.focus();
                             }
                         }
+                        e.preventDefault();
                     }
-                    e.preventDefault();
                     break;
             }
         }

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;