@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/nuraly-ui/packages/common/dist/shared/dependency-mixin.js

@@ -1,141 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-/**
- * Checks if the current environment is development mode using Lit's development detection
- * @returns boolean indicating if we're in development mode
- */
-const isDevelopmentMode = () => {
-    var _a;
-    // Use Lit's built-in development detection
-    // Check for Lit development mode indicators
-    return (
-    // Check if Lit development version is loaded (litElementVersions exists in dev)
-    globalThis.litElementVersions !== undefined ||
-        // Standard NODE_ENV check
-        (typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'development') ||
-        // Fallback: check for localhost
-        (typeof window !== 'undefined' && (window.location.hostname === 'localhost' ||
-            window.location.hostname === '127.0.0.1')));
-};
-/**
- * Mixin that adds dependency validation functionality to LitElement components
- *
- * @param superClass - The base class to extend (typically LitElement)
- * @returns Enhanced class with dependency validation capabilities
- *
- * @example
- * ```typescript
- * @customElement('my-component')
- * export class MyComponent extends DependencyValidationMixin(LitElement) {
- *   requiredComponents = ['nr-icon', 'hy-tooltip'];
- *
- *   override connectedCallback() {
- *     super.connectedCallback();
- *     this.validateDependencies();
- *   }
- * }
- * ```
- */
-export const DependencyValidationMixin = (superClass) => {
-    class DependencyValidationClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Array of required component names that must be registered
-             * This should be set by the implementing component
-             */
-            this.requiredComponents = [];
-        }
-        /**
-         * Validates that all required component dependencies are available
-         * Only runs in development mode for performance
-         * @throws {Error} When required components are not registered
-         */
-        validateDependencies() {
-            // Only validate dependencies in development mode
-            if (!isDevelopmentMode()) {
-                return;
-            }
-            for (const componentName of this.requiredComponents) {
-                if (!this.isComponentAvailable(componentName)) {
-                    throw new Error(`Required component "${componentName}" is not registered. ` +
-                        `Please import and register the component before using ${this.tagName.toLowerCase()}. ` +
-                        `Example: import '@nuralyui/${componentName}';`);
-                }
-            }
-        }
-        /**
-         * Validates dependencies with custom error handling
-         * Only runs in development mode for performance
-         * @param onError - Custom error handler function
-         * @returns boolean indicating if all dependencies are available
-         */
-        validateDependenciesWithHandler(onError) {
-            // Only validate dependencies in development mode
-            if (!isDevelopmentMode()) {
-                return true; // Assume all dependencies are available in production
-            }
-            let allAvailable = true;
-            for (const componentName of this.requiredComponents) {
-                if (!this.isComponentAvailable(componentName)) {
-                    allAvailable = false;
-                    const error = new Error(`Required component "${componentName}" is not registered. ` +
-                        `Please import and register the component before using ${this.tagName.toLowerCase()}.`);
-                    if (onError) {
-                        onError(componentName, error);
-                    }
-                    else {
-                        console.error(error.message);
-                    }
-                }
-            }
-            return allAvailable;
-        }
-        /**
-         * Checks if a specific component is available
-         * @param componentName - The name of the component to check
-         * @returns boolean indicating if component is registered
-         */
-        isComponentAvailable(componentName) {
-            return !!customElements.get(componentName);
-        }
-        /**
-         * Gets a list of missing dependencies
-         * @returns Array of component names that are not registered
-         */
-        getMissingDependencies() {
-            return this.requiredComponents.filter(componentName => !this.isComponentAvailable(componentName));
-        }
-        /**
-         * Checks if all dependencies are available without throwing errors
-         * @returns boolean indicating if all dependencies are available
-         */
-        areDependenciesAvailable() {
-            return this.requiredComponents.every(componentName => this.isComponentAvailable(componentName));
-        }
-        /**
-         * Adds a required component to the dependency list
-         * @param componentName - The component name to add
-         */
-        addRequiredComponent(componentName) {
-            if (!this.requiredComponents.includes(componentName)) {
-                this.requiredComponents.push(componentName);
-            }
-        }
-        /**
-         * Removes a required component from the dependency list
-         * @param componentName - The component name to remove
-         */
-        removeRequiredComponent(componentName) {
-            const index = this.requiredComponents.indexOf(componentName);
-            if (index > -1) {
-                this.requiredComponents.splice(index, 1);
-            }
-        }
-    }
-    return DependencyValidationClass;
-};
-//# sourceMappingURL=dependency-mixin.js.map

package/components/ui/nuraly-ui/packages/common/dist/shared/event-handler-mixin.d.ts

@@ -1,64 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-declare type Constructor<T = {}> = new (...args: any[]) => T;
-/**
- * Interface for components that support event handling operations
- */
-export interface EventHandlerCapable {
-    /**
-     * Dispatch a custom event with consistent structure
-     * @param eventName - The name of the event
-     * @param detail - The event detail object
-     */
-    dispatchCustomEvent(eventName: string, detail: any): void;
-    /**
-     * Dispatch events with metadata
-     */
-    dispatchEventWithMetadata(eventName: string, detail: any): void;
-    /**
-     * Dispatch input-related events
-     */
-    dispatchInputEvent(eventName: string, detail: any): void;
-    /**
-     * Dispatch focus-related events
-     */
-    dispatchFocusEvent(eventName: string, detail: any): void;
-    /**
-     * Dispatch validation events
-     */
-    dispatchValidationEvent(eventName: string, detail: any): void;
-    /**
-     * Dispatch action events
-     */
-    dispatchActionEvent(eventName: string, detail: any): void;
-    /**
-     * Check if a key is allowed when component is readonly
-     */
-    isReadonlyKeyAllowed(keyDownEvent: KeyboardEvent): boolean;
-    /**
-     * Check if key is an activation key (Enter/Space)
-     */
-    isActivationKey(keyDownEvent: KeyboardEvent): boolean;
-}
-/**
- * Mixin that provides standardized event handling capabilities
- *
- * @param superClass - The base class to extend
- * @returns Enhanced class with event handling capabilities
- *
- * @example
- * ```typescript
- * export class MyComponent extends EventHandlerMixin(LitElement) {
- *   handleClick() {
- *     this.dispatchCustomEvent('my-click', { value: 'test' });
- *   }
- * }
- * ```
- */
-export declare const EventHandlerMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<EventHandlerCapable> & T;
-export {};
-//# sourceMappingURL=event-handler-mixin.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/event-handler-mixin.js

@@ -1,95 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-/**
- * Mixin that provides standardized event handling capabilities
- *
- * @param superClass - The base class to extend
- * @returns Enhanced class with event handling capabilities
- *
- * @example
- * ```typescript
- * export class MyComponent extends EventHandlerMixin(LitElement) {
- *   handleClick() {
- *     this.dispatchCustomEvent('my-click', { value: 'test' });
- *   }
- * }
- * ```
- */
-export const EventHandlerMixin = (superClass) => {
-    class EventHandlerMixinClass extends superClass {
-        /**
-         * Dispatch a custom event with consistent structure and bubbling
-         */
-        dispatchCustomEvent(eventName, detail) {
-            this.dispatchEvent(new CustomEvent(eventName, {
-                detail,
-                bubbles: true,
-                composed: true
-            }));
-        }
-        /**
-         * Event dispatcher with additional metadata
-         * Adds common properties like timestamp and component info
-         */
-        dispatchEventWithMetadata(eventName, detail) {
-            var _a;
-            const eventDetail = Object.assign(Object.assign({}, detail), { timestamp: Date.now(), componentName: ((_a = this.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || 'unknown' });
-            this.dispatchCustomEvent(eventName, eventDetail);
-        }
-        /**
-         * Dispatch input-related events with consistent structure
-         * Common pattern for form components
-         */
-        dispatchInputEvent(eventName, detail) {
-            const inputDetail = Object.assign({ target: detail.target || this, value: detail.value, originalEvent: detail.originalEvent }, detail);
-            this.dispatchCustomEvent(eventName, inputDetail);
-        }
-        /**
-         * Dispatch focus-related events with cursor and selection info
-         */
-        dispatchFocusEvent(eventName, detail) {
-            const focusDetail = Object.assign({ target: detail.target || this, value: detail.value, focused: detail.focused, cursorPosition: detail.cursorPosition, selectedText: detail.selectedText }, detail);
-            this.dispatchCustomEvent(eventName, focusDetail);
-        }
-        /**
-         * Dispatch validation events with error information
-         */
-        dispatchValidationEvent(eventName, detail) {
-            var _a;
-            const validationDetail = Object.assign({ target: detail.target || this, value: detail.value, isValid: (_a = detail.isValid) !== null && _a !== void 0 ? _a : false, error: detail.error }, detail);
-            this.dispatchCustomEvent(eventName, validationDetail);
-        }
-        /**
-         * Dispatch action events (copy, clear, etc.)
-         */
-        dispatchActionEvent(eventName, detail) {
-            const actionDetail = Object.assign({ target: detail.target || this, action: detail.action, previousValue: detail.previousValue, newValue: detail.newValue }, detail);
-            this.dispatchCustomEvent(eventName, actionDetail);
-        }
-        /**
-         * Standard readonly key filtering - reusable across components
-         */
-        isReadonlyKeyAllowed(keyDownEvent) {
-            const allowedReadonlyKeys = [
-                'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
-                'Home', 'End', 'PageUp', 'PageDown'
-            ];
-            if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
-                const allowedCombinations = ['KeyA', 'KeyC'];
-                return allowedCombinations.includes(keyDownEvent.code);
-            }
-            return allowedReadonlyKeys.includes(keyDownEvent.key);
-        }
-        /**
-         * Handle common activation keys (Enter/Space)
-         */
-        isActivationKey(keyDownEvent) {
-            return keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ';
-        }
-    }
-    return EventHandlerMixinClass;
-};
-//# sourceMappingURL=event-handler-mixin.js.map

package/components/ui/nuraly-ui/packages/common/dist/shared/index.d.ts

@@ -1,13 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-export { NuralyUIBaseMixin, BaseMixin, type NuralyUIBaseElement } from './base-mixin.js';
-export { ThemeAwareMixin, type ThemeAware } from './theme-mixin.js';
-export { DependencyValidationMixin, type DependencyAware } from './dependency-mixin.js';
-export { EventHandlerMixin, type EventHandlerCapable } from './event-handler-mixin.js';
-export { throttle, debounce, rafThrottle } from './utils.js';
-export * from './controllers/index.js';
-export * from './validation.types.js';
-//# sourceMappingURL=index.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/index.js

@@ -1,17 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-// Export all shared mixins and utilities
-export { NuralyUIBaseMixin, BaseMixin } from './base-mixin.js';
-export { ThemeAwareMixin } from './theme-mixin.js';
-export { DependencyValidationMixin } from './dependency-mixin.js';
-export { EventHandlerMixin } from './event-handler-mixin.js';
-// Export utility functions
-export { throttle, debounce, rafThrottle } from './utils.js';
-// Export shared controllers
-export * from './controllers/index.js';
-// Export shared validation types
-export * from './validation.types.js';
-//# sourceMappingURL=index.js.map

package/components/ui/nuraly-ui/packages/common/dist/shared/theme-mixin.d.ts

@@ -1,78 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-/**
- * Theme detection and management mixin for Lit components
- * Provides data-theme attribute detection with system fallback
- * Supports multiple design systems (Carbon, Polaris, etc.)
- */
-export interface ThemeAware {
-    currentTheme: string;
-    currentDesignSystem: 'carbon' | 'default';
-}
-declare type Constructor<T = {}> = new (...args: any[]) => T;
-/**
- * Mixin that adds theme management functionality to LitElement components
- *
- * @param superClass - The base class to extend (typically LitElement)
- * @returns Enhanced class with theme management capabilities
- *
- * @example
- * ```typescript
- * @customElement('my-component')
- * export class MyComponent extends ThemeAwareMixin(LitElement) {
- *   render() {
- *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
- *   }
- * }
- * ```
- */
-export declare const ThemeAwareMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ThemeAware> & T;
-/**
- * Standalone theme detection utility function
- * For components that don't want to use the mixin approach
- *
- * @param element - The element to start theme detection from
- * @returns The detected theme ('light' or 'dark')
- */
-export declare function detectTheme(element: Element): 'light' | 'dark';
-/**
- * Standalone design system detection utility function
- * For components that don't want to use the mixin approach
- *
- * @param element - The element to start detection from
- * @returns The detected design system
- */
-export declare function detectDesignSystem(element: Element): 'carbon' | 'default';
-/**
- * CSS template literal helper for theme-aware styles
- * Generates CSS with both data-theme selectors and system fallback
- *
- * @param lightThemeVars - CSS custom properties for light theme
- * @param darkThemeVars - CSS custom properties for dark theme
- * @returns CSS template literal
- *
- * @example
- * ```typescript
- * import { css } from 'lit';
- * import { createThemeStyles } from '../shared/theme-mixin.js';
- *
- * const styles = css`
- *   ${createThemeStyles(
- *     css`--color: black; --bg: white;`,
- *     css`--color: white; --bg: black;`
- *   )}
- *
- *   .content {
- *     color: var(--color);
- *     background: var(--bg);
- *   }
- * `;
- * ```
- */
-export declare function createThemeStyles(lightThemeVars: any, darkThemeVars: any): string;
-export {};
-//# sourceMappingURL=theme-mixin.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/theme-mixin.js

@@ -1,194 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-/**
- * Mixin that adds theme management functionality to LitElement components
- *
- * @param superClass - The base class to extend (typically LitElement)
- * @returns Enhanced class with theme management capabilities
- *
- * @example
- * ```typescript
- * @customElement('my-component')
- * export class MyComponent extends ThemeAwareMixin(LitElement) {
- *   render() {
- *     return html`<div data-theme="${this.currentTheme}">Content</div>`;
- *   }
- * }
- * ```
- */
-export const ThemeAwareMixin = (superClass) => {
-    class ThemeAwareClass extends superClass {
-        constructor() {
-            super(...arguments);
-            this.handleSystemThemeChange = () => {
-                // Only trigger update if no explicit data-theme is set
-                if (!this.closest('[data-theme]') && !document.documentElement.hasAttribute('data-theme')) {
-                    this.requestUpdate();
-                }
-            };
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.setupThemeObserver();
-            this.setupDesignSystemObserver();
-            this.setupSystemThemeListener();
-        }
-        disconnectedCallback() {
-            var _a, _b, _c;
-            super.disconnectedCallback();
-            (_a = this.themeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-            (_b = this.designSystemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-            (_c = this.mediaQuery) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.handleSystemThemeChange);
-        }
-        /**
-         * Gets the current theme by checking data-theme attribute in DOM hierarchy
-         * Falls back to system preference if no data-theme is found
-         * Now supports all theme variants: light, dark, carbon-light, carbon-dark, default, default-dark
-         */
-        get currentTheme() {
-            var _a, _b;
-            // Check for data-theme attribute starting from this element and going up
-            const dataTheme = ((_a = this.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) ||
-                document.documentElement.getAttribute('data-theme');
-            if (dataTheme) {
-                return dataTheme;
-            }
-            // Fallback to system preference
-            if ((_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)').matches) {
-                return 'dark';
-            }
-            return 'light';
-        }
-        /**
-         * Gets the current design system by checking design-system attribute in DOM hierarchy
-         * Falls back to 'carbon' as default
-         */
-        get currentDesignSystem() {
-            var _a;
-            // Check for design-system attribute starting from this element and going up
-            const designSystem = ((_a = this.closest('[design-system]')) === null || _a === void 0 ? void 0 : _a.getAttribute('design-system')) ||
-                document.documentElement.getAttribute('design-system');
-            if (designSystem === 'carbon') {
-                return designSystem;
-            }
-            return 'default';
-        }
-        setupThemeObserver() {
-            // Watch for data-theme changes on document
-            this.themeObserver = new MutationObserver(() => {
-                this.requestUpdate();
-            });
-            // Observe document element for data-theme changes
-            this.themeObserver.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-        }
-        setupDesignSystemObserver() {
-            // Watch for design-system changes on document
-            this.designSystemObserver = new MutationObserver(() => {
-                this.requestUpdate();
-            });
-            // Observe document element for design-system changes
-            this.designSystemObserver.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['design-system']
-            });
-        }
-        setupSystemThemeListener() {
-            if (window.matchMedia) {
-                this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-                this.mediaQuery.addEventListener('change', this.handleSystemThemeChange);
-            }
-        }
-    }
-    return ThemeAwareClass;
-};
-/**
- * Standalone theme detection utility function
- * For components that don't want to use the mixin approach
- *
- * @param element - The element to start theme detection from
- * @returns The detected theme ('light' or 'dark')
- */
-export function detectTheme(element) {
-    var _a, _b;
-    // Check for data-theme attribute starting from this element and going up
-    const dataTheme = ((_a = element.closest('[data-theme]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) ||
-        document.documentElement.getAttribute('data-theme');
-    if (dataTheme === 'dark' || dataTheme === 'light') {
-        return dataTheme;
-    }
-    // Fallback to system preference
-    if ((_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)').matches) {
-        return 'dark';
-    }
-    return 'light';
-}
-/**
- * Standalone design system detection utility function
- * For components that don't want to use the mixin approach
- *
- * @param element - The element to start detection from
- * @returns The detected design system
- */
-export function detectDesignSystem(element) {
-    var _a;
-    // Check for design-system attribute starting from this element and going up
-    const designSystem = ((_a = element.closest('[design-system]')) === null || _a === void 0 ? void 0 : _a.getAttribute('design-system')) ||
-        document.documentElement.getAttribute('design-system');
-    if (designSystem === 'carbon') {
-        return designSystem;
-    }
-    return 'default';
-}
-/**
- * CSS template literal helper for theme-aware styles
- * Generates CSS with both data-theme selectors and system fallback
- *
- * @param lightThemeVars - CSS custom properties for light theme
- * @param darkThemeVars - CSS custom properties for dark theme
- * @returns CSS template literal
- *
- * @example
- * ```typescript
- * import { css } from 'lit';
- * import { createThemeStyles } from '../shared/theme-mixin.js';
- *
- * const styles = css`
- *   ${createThemeStyles(
- *     css`--color: black; --bg: white;`,
- *     css`--color: white; --bg: black;`
- *   )}
- *
- *   .content {
- *     color: var(--color);
- *     background: var(--bg);
- *   }
- * `;
- * ```
- */
-export function createThemeStyles(lightThemeVars, darkThemeVars) {
-    return `
-    /* Light theme (default) */
-    :host {
-      ${lightThemeVars}
-    }
-    
-    /* Dark theme using data-theme attribute */
-    :host([data-theme="dark"]) {
-      ${darkThemeVars}
-    }
-    
-    /* System theme fallback for dark preference */
-    @media (prefers-color-scheme: dark) {
-      :host(:not([data-theme])) {
-        ${darkThemeVars}
-      }
-    }
-  `;
-}
-//# sourceMappingURL=theme-mixin.js.map

package/components/ui/nuraly-ui/packages/common/dist/shared/themes.d.ts

@@ -1,44 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: BSD-3-Clause
- */
-/**
- * Theme utilities and type definitions
- *
- * NOTE: CSS theme files are in the @nuralyui/themes package
- * This file only contains TypeScript utilities and types
- */
-export declare const THEME_VARIANTS: {
-    readonly 'default-light': "Default Light";
-    readonly 'default-dark': "Default Dark";
-    readonly 'carbon-light': "Carbon Light";
-    readonly 'carbon-dark': "Carbon Dark";
-    readonly light: "Default Light";
-    readonly dark: "Default Dark";
-};
-export declare type ThemeVariant = keyof typeof THEME_VARIANTS;
-/**
- * Utility function to apply theme to an element
- * @param element - The element to apply the theme to
- * @param theme - The theme variant to apply
- */
-export declare function applyTheme(element: HTMLElement, theme: ThemeVariant): void;
-/**
- * Utility function to get current theme from an element or its parents
- * @param element - The element to check for theme
- * @returns The current theme variant or null if not found
- */
-export declare function getCurrentTheme(element: HTMLElement): ThemeVariant | null;
-/**
- * Utility function to toggle between light and dark variants of the same theme
- * @param element - The element to toggle theme on
- */
-export declare function toggleThemeVariant(element: HTMLElement): void;
-/**
- * Get the theme system name from a theme variant
- * @param theme - The theme variant
- * @returns The theme system name ('carbon' or 'default')
- */
-export declare function getThemeSystem(theme: ThemeVariant | null): 'carbon' | 'default';
-//# sourceMappingURL=themes.d.ts.map