@krumio/trailhand-ui 1.5.0 → 1.7.0

package/dist/components/toggle-switch/toggle-switch.stories.js

@@ -1,408 +0,0 @@
-import './toggle-switch.ts';
-/**
- * The ToggleSwitch component is a reusable boolean toggle that can be used
- * for any on/off, enabled/disabled, or true/false functionality.
- */
-export default {
-    title: 'Components/ToggleSwitch',
-    tags: ['autodocs'],
-    render: (args) => {
-        const toggle = document.createElement('toggle-switch');
-        if (args.onLabel)
-            toggle.onLabel = args.onLabel;
-        if (args.offLabel)
-            toggle.offLabel = args.offLabel;
-        if (args.checked !== undefined)
-            toggle.checked = args.checked;
-        if (args.storageKey)
-            toggle.storageKey = args.storageKey;
-        if (args.name)
-            toggle.name = args.name;
-        toggle.addEventListener('toggle-change', (e) => {
-            console.log('Toggle changed:', e.detail);
-        });
-        return toggle;
-    },
-    argTypes: {
-        checked: {
-            control: 'boolean',
-            description: 'Whether the toggle is checked (on)',
-            defaultValue: false,
-        },
-        onLabel: {
-            control: 'text',
-            description: 'Label shown when toggle is on',
-            defaultValue: 'On',
-        },
-        offLabel: {
-            control: 'text',
-            description: 'Label shown when toggle is off',
-            defaultValue: 'Off',
-        },
-        storageKey: {
-            control: 'text',
-            description: 'Optional localStorage key for persisting toggle state',
-        },
-        name: {
-            control: 'text',
-            description: 'Optional name for syncing multiple toggle instances',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `
-  A generic, reusable toggle switch component for boolean values.
-
-  **Features:**
-  - Works for any on/off, enabled/disabled, or true/false functionality
-  - Optional localStorage persistence with \`storageKey\` prop
-  - Sync multiple instances with the same \`name\` prop
-  - Dispatches \`toggle-change\` events with checked state
-  - Fully customizable labels
-        `.trim(),
-            },
-        },
-    },
-};
-/**
- * Default toggle with standard "On/Off" labels
- */
-export const Default = {
-    args: {
-        checked: false,
-        onLabel: 'On',
-        offLabel: 'Off',
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: '<toggle-switch></toggle-switch>',
-            },
-        },
-    },
-};
-/**
- * Custom labels for different use cases
- */
-export const CustomLabels = {
-    args: {
-        checked: false,
-        onLabel: 'Enabled',
-        offLabel: 'Disabled',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Customize labels to match your use case.',
-            },
-            source: {
-                code: '<toggle-switch onLabel="Enabled" offLabel="Disabled"></toggle-switch>',
-            },
-        },
-    },
-};
-/**
- * Icon-only labels for compact appearance
- */
-export const IconLabels = {
-    args: {
-        checked: false,
-        onLabel: '✓',
-        offLabel: '✗',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Use icons or symbols for a minimal appearance.',
-            },
-            source: {
-                code: '<toggle-switch onLabel="✓" offLabel="✗"></toggle-switch>',
-            },
-        },
-    },
-};
-/**
- * Toggle that starts in the checked state
- */
-export const InitiallyChecked = {
-    args: {
-        checked: true,
-        onLabel: 'Active',
-        offLabel: 'Inactive',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Toggle can be initialized in the checked state.',
-            },
-            source: {
-                code: '<toggle-switch checked onLabel="Active" offLabel="Inactive"></toggle-switch>',
-            },
-        },
-    },
-};
-/**
- * Toggle with localStorage persistence
- */
-export const WithPersistence = {
-    args: {
-        checked: false,
-        onLabel: 'On',
-        offLabel: 'Off',
-        storageKey: 'demo-toggle-state',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Toggle state persists across page reloads using localStorage. Try toggling and refreshing the page.',
-            },
-            source: {
-                code: '<toggle-switch storageKey="my-setting"></toggle-switch>',
-            },
-        },
-    },
-};
-/**
- * Multiple synced toggles
- */
-export const SyncedToggles = {
-    render: () => {
-        const container = document.createElement('div');
-        container.style.cssText =
-            'display: flex; flex-direction: column; gap: 20px;';
-        const description = document.createElement('p');
-        description.textContent =
-            'These toggles share the same name, so toggling one updates all others:';
-        container.appendChild(description);
-        for (let i = 1; i <= 3; i++) {
-            const wrapper = document.createElement('div');
-            wrapper.style.cssText =
-                'padding: 12px; background: var(--color-grey-100, #FAFAFA); border-radius: 4px;';
-            const label = document.createElement('span');
-            label.textContent = `Toggle ${i}: `;
-            label.style.marginRight = '10px';
-            const toggle = document.createElement('toggle-switch');
-            toggle.name = 'synced-demo';
-            toggle.onLabel = 'Yes';
-            toggle.offLabel = 'No';
-            wrapper.appendChild(label);
-            wrapper.appendChild(toggle);
-            container.appendChild(wrapper);
-        }
-        return container;
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Multiple toggle instances with the same `name` prop stay synchronized.',
-            },
-            source: {
-                code: `<toggle-switch name="synced-demo" onLabel="Yes" offLabel="No"></toggle-switch>
-<toggle-switch name="synced-demo" onLabel="Yes" offLabel="No"></toggle-switch>
-<toggle-switch name="synced-demo" onLabel="Yes" offLabel="No"></toggle-switch>`,
-            },
-        },
-    },
-};
-/**
- * Theme switching example
- */
-export const ThemeSwitching = {
-    render: () => {
-        const container = document.createElement('div');
-        // Initialize theme from system preference or localStorage
-        const initializeTheme = () => {
-            const savedTheme = localStorage.getItem('user-theme-preference');
-            if (savedTheme === 'dark' || savedTheme === 'light') {
-                applyTheme(savedTheme);
-                return savedTheme === 'dark';
-            }
-            else {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                return prefersDark;
-            }
-        };
-        const applyTheme = (theme) => {
-            document.body.classList.remove('theme-dark', 'theme-light');
-            document.body.classList.add(`theme-${theme}`);
-        };
-        const toggle = document.createElement('toggle-switch');
-        toggle.checked = initializeTheme();
-        toggle.onLabel = '🌙 Dark';
-        toggle.offLabel = '☀️ Light';
-        toggle.name = 'theme-demo';
-        toggle.addEventListener('toggle-change', (e) => {
-            const theme = e.detail.checked ? 'dark' : 'light';
-            localStorage.setItem('user-theme-preference', theme);
-            applyTheme(theme);
-        });
-        const header = document.createElement('div');
-        header.style.cssText =
-            'display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;';
-        header.innerHTML = '<h2 style="margin: 0;">Theme Switching Demo</h2>';
-        header.appendChild(toggle);
-        const intro = document.createElement('p');
-        intro.textContent =
-            'Toggle the switch to see the theme change in real-time. Notice how the background, text, and card colors all update smoothly.';
-        const card1 = document.createElement('div');
-        card1.className = 'theme-demo-card';
-        card1.innerHTML = `
-      <h3>How it works</h3>
-      <ul>
-        <li>CSS uses <code>@media (prefers-color-scheme: dark)</code> for system preference</li>
-        <li>Toggling adds <code>.theme-light</code> or <code>.theme-dark</code> class to body</li>
-        <li>Body classes override the media query (higher specificity)</li>
-        <li>Your choice is saved to localStorage</li>
-      </ul>
-    `;
-        const card2 = document.createElement('div');
-        card2.className = 'theme-demo-card';
-        card2.innerHTML = `
-      <h3>Features</h3>
-      <p>✨ Smooth transitions between themes</p>
-      <p>💾 Automatic localStorage persistence</p>
-      <p>🎨 System preference detection</p>
-      <p>🔔 Custom events for integration</p>
-    `;
-        container.appendChild(header);
-        container.appendChild(intro);
-        container.appendChild(card1);
-        container.appendChild(card2);
-        return container;
-    },
-    decorators: [
-        (story) => {
-            const style = document.createElement('style');
-            style.textContent = `
-        :root {
-          --demo-bg: var(--color-white, #FFFFFF);
-          --demo-text: var(--color-text-primary, #212121);
-          --demo-card-bg: var(--color-grey-100, #FAFAFA);
-          --demo-border: var(--color-grey-200, #EBEBEB);
-        }
-
-        @media (prefers-color-scheme: dark) {
-          :root {
-            --demo-bg: var(--color-grey-800, #212121);
-            --demo-text: var(--color-grey-200, #EBEBEB);
-            --demo-card-bg: var(--color-grey-700, #303131);
-            --demo-border: var(--color-grey-600, #636363);
-          }
-        }
-
-        body.theme-light {
-          --demo-bg: var(--color-white, #FFFFFF) !important;
-          --demo-text: var(--color-text-primary, #212121) !important;
-          --demo-card-bg: var(--color-grey-100, #FAFAFA) !important;
-          --demo-border: var(--color-grey-200, #EBEBEB) !important;
-        }
-
-        body.theme-dark {
-          --demo-bg: var(--color-grey-800, #212121) !important;
-          --demo-text: var(--color-grey-200, #EBEBEB) !important;
-          --demo-card-bg: var(--color-grey-700, #303131) !important;
-          --demo-border: var(--color-grey-600, #636363) !important;
-        }
-
-        body {
-          background-color: var(--demo-bg) !important;
-          transition: background-color 0.3s ease !important;
-        }
-
-        .theme-demo-card {
-          background-color: var(--demo-card-bg) !important;
-          border: 1px solid var(--demo-border) !important;
-          color: var(--demo-text) !important;
-          padding: 1.5rem;
-          border-radius: 8px;
-          margin-top: 1rem;
-        }
-
-        #storybook-root,
-        #storybook-root *:not(toggle-switch):not(toggle-switch *) {
-          color: var(--demo-text) !important;
-        }
-      `;
-            const wrapper = document.createElement('div');
-            wrapper.appendChild(style);
-            wrapper.appendChild(story());
-            return wrapper;
-        },
-    ],
-    parameters: {
-        docs: {
-            description: {
-                story: 'Using toggle-switch for theme management. Detects system preference and allows user override with localStorage persistence.',
-            },
-            source: {
-                code: `<toggle-switch
-  onLabel="🌙 Dark"
-  offLabel="☀️ Light"
-  storageKey="user-theme-preference">
-</toggle-switch>
-
-<script>
-  const toggle = document.querySelector('toggle-switch');
-
-  // Initialize from system preference
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  toggle.checked = prefersDark;
-
-  // Handle theme changes
-  toggle.addEventListener('toggle-change', (e) => {
-    const theme = e.detail.checked ? 'dark' : 'light';
-    document.body.classList.remove('theme-dark', 'theme-light');
-    document.body.classList.add(\`theme-\${theme}\`);
-  });
-</script>`,
-            },
-        },
-    },
-};
-/**
- * Various use case examples
- */
-export const UseCaseExamples = {
-    render: () => {
-        const container = document.createElement('div');
-        container.style.cssText =
-            'display: flex; flex-direction: column; gap: 16px;';
-        const useCases = [
-            { label: 'Notifications:', onLabel: 'On', offLabel: 'Off' },
-            { label: 'Email alerts:', onLabel: 'Enabled', offLabel: 'Disabled' },
-            { label: 'Auto-save:', onLabel: 'Active', offLabel: 'Inactive' },
-            { label: 'Public profile:', onLabel: 'Visible', offLabel: 'Hidden' },
-            { label: 'Two-factor auth:', onLabel: '🔒 On', offLabel: '🔓 Off' },
-        ];
-        useCases.forEach(({ label, onLabel, offLabel }) => {
-            const row = document.createElement('div');
-            row.style.cssText = 'display: flex; align-items: center; padding: 8px;';
-            const labelEl = document.createElement('span');
-            labelEl.textContent = label;
-            labelEl.style.cssText = 'min-width: 150px; font-weight: 500;';
-            const toggle = document.createElement('toggle-switch');
-            toggle.onLabel = onLabel;
-            toggle.offLabel = offLabel;
-            row.appendChild(labelEl);
-            row.appendChild(toggle);
-            container.appendChild(row);
-        });
-        return container;
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Examples of how toggle-switch can be used in different contexts.',
-            },
-            source: {
-                code: `<toggle-switch onLabel="On" offLabel="Off"></toggle-switch>
-<toggle-switch onLabel="Enabled" offLabel="Disabled"></toggle-switch>
-<toggle-switch onLabel="Active" offLabel="Inactive"></toggle-switch>
-<toggle-switch onLabel="Visible" offLabel="Hidden"></toggle-switch>
-<toggle-switch onLabel="🔒 On" offLabel="🔓 Off"></toggle-switch>`,
-            },
-        },
-    },
-};
-//# sourceMappingURL=toggle-switch.stories.js.map

package/dist/components/toggle-switch/toggle-switch.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-switch.stories.js","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.stories.js"],"names":[],"mappings":"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"}

package/dist/data-table.d.ts

@@ -1,191 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import './action-menu';
-import 'iconify-icon';
-/**
- * Type definition for formatter functions
- */
-type FormatterFunction = (value: any) => string;
-/**
- * Type definition for sort functions
- */
-type SortFunction = (a: RowData, b: RowData, direction: 'asc' | 'desc') => number;
-/**
- * Type definition for link functions
- */
-type LinkFunction = (row: RowData) => string;
-/**
- * Type definition for row data
- */
-interface RowData {
-    [key: string]: any;
-}
-/**
- * Type definition for column configuration
- */
-export interface DataTableColumn {
-    field: string;
-    label: string;
-    width?: string;
-    sortable?: boolean;
-    searchable?: boolean;
-    formatter?: string | ((value: any, row: RowData) => any);
-    sortFn?: SortFunction;
-    link?: string | LinkFunction;
-    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
-}
-/**
- * Data table formatters for common column types
- */
-export declare const dataTableFormatters: Record<string, FormatterFunction>;
-/**
- * A feature-rich data table component with sorting, filtering, and pagination.
- * Supports custom cell rendering, row actions, and various formatters.
- */
-export declare class DataTable extends LitElement {
-    columns: DataTableColumn[];
-    rows: RowData[];
-    rowsPerPage: number;
-    searchable: boolean;
-    sortable: boolean;
-    paginated: boolean;
-    loading: boolean;
-    keyField: string;
-    rowActions: boolean;
-    rowActionsWidth: number;
-    emptyMessage: string;
-    noResultsMessage: string;
-    private _searchQuery;
-    private _currentPage;
-    private _sortColumn;
-    private _sortDirection;
-    static styles: import("lit").CSSResult;
-    /**
-     * Get nested value from object using dot notation
-     * @param obj - The object to extract value from
-     * @param path - The path (e.g., 'user.name')
-     * @returns The value at the path
-     * @private
-     */
-    private _getNestedValue;
-    /**
-     * Format a cell value using column formatter
-     * @param row - The row data
-     * @param column - The column definition
-     * @returns The formatted value
-     * @private
-     */
-    private _formatValue;
-    /**
-     * Get link URL for a cell if column has link property
-     * @param row - The row data
-     * @param column - The column definition
-     * @returns The link URL or null
-     * @private
-     */
-    private _getLinkUrl;
-    /**
-     * Render cell content with optional link
-     * @param row - The row data
-     * @param column - The column definition
-     * @returns The rendered cell content
-     * @private
-     */
-    private _renderCellContent;
-    /**
-     * Handle link click - emit navigation event instead of following link
-     * @param event - The click event
-     * @param url - The URL to navigate to
-     * @param row - The row data
-     * @private
-     */
-    private _handleLinkClick;
-    /**
-     * Get filtered rows based on search query
-     * @returns Filtered rows
-     * @private
-     */
-    private get _filteredRows();
-    /**
-     * Get sorted rows
-     * @returns Sorted rows
-     * @private
-     */
-    private get _sortedRows();
-    /**
-     * Get paginated rows
-     * @returns Paginated rows
-     * @private
-     */
-    private get _paginatedRows();
-    /**
-     * Get total number of pages
-     * @returns Total pages
-     * @private
-     */
-    private get _totalPages();
-    /**
-     * Get pagination info
-     * @returns Pagination info
-     * @private
-     */
-    private get _paginationInfo();
-    /**
-     * Handle search input
-     * @param e - The input event
-     * @private
-     */
-    private _handleSearch;
-    /**
-     * Handle column sort
-     * @param columnField - The column field to sort by
-     * @private
-     */
-    private _handleSort;
-    /**
-     * Navigate to a specific page
-     * @param page - The page number
-     */
-    goToPage(page: number): void;
-    /**
-     * Navigate to the next page
-     */
-    nextPage(): void;
-    /**
-     * Navigate to the previous page
-     */
-    prevPage(): void;
-    /**
-     * Reset search query
-     */
-    resetSearch(): void;
-    /**
-     * Reset sort to default state
-     */
-    resetSort(): void;
-    /**
-     * Render sort icon
-     * @param column - The column definition
-     * @returns TemplateResult
-     * @private
-     */
-    private _renderSortIcon;
-    /**
-     * Render chevron left icon
-     * @returns TemplateResult
-     * @private
-     */
-    private _renderChevronLeft;
-    /**
-     * Render chevron right icon
-     * @returns TemplateResult
-     * @private
-     */
-    private _renderChevronRight;
-    /**
-     * Render the component
-     * @returns TemplateResult
-     */
-    render(): TemplateResult;
-}
-export {};
-//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../Components/data-table.ts"],"names":[],"mappings":"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"}