@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/dropdown.controller.js

@@ -1,341 +0,0 @@
-/**
- * Shared dropdown controller for components that need dropdown functionality
- * Based on the select component's dropdown controller but generalized for reuse
- */
-export class SharedDropdownController {
-    constructor(host) {
-        this._isOpen = false;
-        this._position = { top: 0, left: 0, width: 0, placement: 'bottom' };
-        this._dropdownElement = null;
-        this._triggerElement = null;
-        /**
-         * Handle window resize to recalculate position
-         */
-        this.handleResize = () => {
-            if (this._isOpen) {
-                this.calculatePosition();
-            }
-        };
-        /**
-         * Handle scroll to manage dropdown visibility
-         */
-        this.handleScroll = () => {
-            var _a;
-            if (this._isOpen && this._triggerElement) {
-                const triggerRect = this._triggerElement.getBoundingClientRect();
-                const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
-                // Close dropdown if trigger is scrolled out of view
-                if (triggerRect.bottom < 0 || triggerRect.top > viewportHeight) {
-                    this.close();
-                }
-                // With absolute positioning, the dropdown moves with the trigger automatically
-                // so no need to recalculate position on scroll
-            }
-        };
-        this._host = host;
-        this._host.addController(this);
-    }
-    hostConnected() {
-        window.addEventListener('resize', this.handleResize);
-        window.addEventListener('scroll', this.handleScroll, true);
-    }
-    hostDisconnected() {
-        this.close();
-        window.removeEventListener('resize', this.handleResize);
-        window.removeEventListener('scroll', this.handleScroll, true);
-    }
-    /**
-     * Check if dropdown is open
-     */
-    get isOpen() {
-        return this._isOpen;
-    }
-    /**
-     * Get current dropdown position
-     */
-    get position() {
-        return Object.assign({}, this._position);
-    }
-    /**
-     * Open the dropdown
-     */
-    open() {
-        try {
-            if (!this._isOpen) {
-                this._isOpen = true;
-                this._host.show = true;
-                this._host.requestUpdate();
-                // Always refresh elements before calculating position
-                this.findElements();
-                // Calculate position after DOM update
-                setTimeout(() => {
-                    this.calculatePosition();
-                }, 0);
-                // Notify host to setup event listeners if available
-                if (this._host && typeof this._host.setupEventListeners === 'function') {
-                    setTimeout(() => {
-                        this._host.setupEventListeners();
-                    }, 0);
-                }
-                this._host.dispatchEvent(new CustomEvent('dropdown-open', {
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        }
-        catch (error) {
-            this.handleError(error, 'open');
-        }
-    }
-    /**
-     * Close the dropdown
-     */
-    close() {
-        try {
-            if (this._isOpen) {
-                this._isOpen = false;
-                this._host.show = false;
-                this.resetPosition();
-                this._host.requestUpdate();
-                // Notify host to remove event listeners if available
-                if (this._host && typeof this._host.removeEventListeners === 'function') {
-                    this._host.removeEventListeners();
-                }
-                this._host.dispatchEvent(new CustomEvent('dropdown-close', {
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        }
-        catch (error) {
-            this.handleError(error, 'close');
-        }
-    }
-    /**
-     * Toggle dropdown visibility
-     */
-    toggle() {
-        if (this._isOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    /**
-     * Calculate optimal dropdown placement
-     */
-    calculatePosition() {
-        var _a;
-        try {
-            if (!this._dropdownElement || !this._triggerElement) {
-                this.findElements();
-            }
-            if (!this._dropdownElement || !this._triggerElement) {
-                return;
-            }
-            const triggerRect = this._triggerElement.getBoundingClientRect();
-            const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
-            // Calculate available space for determining placement
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            // Get the actual height of the dropdown element for accurate placement calculation
-            let dropdownHeight = 200; // fallback
-            if (this._dropdownElement) {
-                // Temporarily make it visible to measure height
-                const originalDisplay = this._dropdownElement.style.display;
-                const originalVisibility = this._dropdownElement.style.visibility;
-                const originalPosition = this._dropdownElement.style.position;
-                this._dropdownElement.style.visibility = 'hidden';
-                this._dropdownElement.style.display = 'block';
-                this._dropdownElement.style.position = 'absolute';
-                dropdownHeight = this._dropdownElement.offsetHeight || this._dropdownElement.scrollHeight || 200;
-                // Restore original styles
-                this._dropdownElement.style.display = originalDisplay;
-                this._dropdownElement.style.visibility = originalVisibility;
-                this._dropdownElement.style.position = originalPosition;
-            }
-            const placement = this.determineOptimalPlacement(dropdownHeight, spaceAbove, spaceBelow);
-            // Store the placement for applyPosition to use
-            this._position = {
-                left: 0,
-                width: 0,
-                placement,
-                top: 0 // Not used with absolute positioning
-            };
-            this.applyPosition();
-        }
-        catch (error) {
-            this.handleError(error, 'calculatePosition');
-        }
-    }
-    /**
-     * Reset dropdown position
-     */
-    resetPosition() {
-        try {
-            if (this._dropdownElement) {
-                this._dropdownElement.style.removeProperty('position');
-                this._dropdownElement.style.removeProperty('top');
-                this._dropdownElement.style.removeProperty('left');
-                this._dropdownElement.style.removeProperty('width');
-                this._dropdownElement.style.removeProperty('max-height');
-                this._dropdownElement.style.removeProperty('min-height');
-                this._dropdownElement.style.removeProperty('height');
-                this._dropdownElement.style.removeProperty('overflow-y');
-                this._dropdownElement.style.removeProperty('transform');
-                this._dropdownElement.style.removeProperty('display');
-                this._dropdownElement.style.removeProperty('opacity');
-                this._dropdownElement.style.removeProperty('visibility');
-                this._dropdownElement.style.removeProperty('z-index');
-                this._dropdownElement.classList.remove('placement-top', 'placement-bottom');
-            }
-        }
-        catch (error) {
-            this.handleError(error, 'resetPosition');
-        }
-    }
-    /**
-     * Set dropdown and trigger element references
-     */
-    setElements(dropdownElement, triggerElement) {
-        this._dropdownElement = dropdownElement;
-        this._triggerElement = triggerElement;
-    }
-    /**
-     * Find dropdown and trigger elements
-     */
-    findElements() {
-        try {
-            // If elements are already set via setElements(), don't override them
-            if (this._dropdownElement && this._triggerElement) {
-                return;
-            }
-            const hostElement = this._host;
-            // First priority: use the elements that were explicitly set via setElements()
-            // This ensures each instance gets its own elements
-            if (hostElement.optionsElement && hostElement.wrapper) {
-                this._dropdownElement = hostElement.optionsElement;
-                this._triggerElement = hostElement.wrapper;
-                return;
-            }
-            // Fallback: try to find from shadow DOM (but this can be problematic with multiple instances)
-            if (hostElement.shadowRoot) {
-                this._dropdownElement = hostElement.shadowRoot.querySelector('.calendar-container, .month-dropdown, .year-dropdown');
-                this._triggerElement = hostElement.shadowRoot.querySelector('.datepicker-input, .toggle-month-view, .toggle-year-view');
-            }
-        }
-        catch (error) {
-            this.handleError(error, 'findElements');
-        }
-    }
-    /**
-     * Determine optimal dropdown placement
-     */
-    determineOptimalPlacement(dropdownHeight, spaceAbove, spaceBelow) {
-        // If there's enough space below, use bottom
-        if (spaceBelow >= dropdownHeight) {
-            return 'bottom';
-        }
-        // If there's enough space above, use top
-        if (spaceAbove >= dropdownHeight) {
-            return 'top';
-        }
-        // If neither has enough space, choose the side with more space
-        // This ensures the dropdown appears even in constrained spaces
-        return spaceAbove > spaceBelow ? 'top' : 'bottom';
-    }
-    /**
-     * Apply calculated position to dropdown element
-     */
-    applyPosition() {
-        var _a;
-        try {
-            if (!this._dropdownElement || !this._triggerElement) {
-                return;
-            }
-            const { placement } = this._position;
-            // Get the exact wrapper width including borders
-            const triggerBounds = this._triggerElement.getBoundingClientRect();
-            const wrapperWidth = triggerBounds.width;
-            // Use absolute positioning relative to the trigger element (combobox)
-            this._dropdownElement.style.position = 'absolute';
-            this._dropdownElement.style.left = '0';
-            this._dropdownElement.style.right = 'auto';
-            this._dropdownElement.style.width = `${wrapperWidth}px`; // Exact wrapper width in pixels
-            this._dropdownElement.style.zIndex = '1000';
-            this._dropdownElement.style.height = 'auto';
-            this._dropdownElement.style.maxHeight = 'none';
-            this._dropdownElement.style.minHeight = 'auto';
-            // Set position based on placement
-            console.log(`Applying ${placement} placement to dropdown`);
-            if (placement === 'bottom') {
-                this._dropdownElement.style.top = '100%';
-                this._dropdownElement.style.bottom = 'auto';
-                console.log('Applied bottom placement: top=100%, bottom=auto');
-            }
-            else {
-                this._dropdownElement.style.top = 'auto';
-                this._dropdownElement.style.bottom = '100%';
-                console.log('Applied top placement: top=auto, bottom=100%');
-            }
-            // Force a layout to get the natural content height
-            const naturalHeight = this._dropdownElement.scrollHeight;
-            // Now calculate available space for constraining
-            const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
-            let availableSpace;
-            // Calculate available space using bounds we already calculated
-            if (placement === 'bottom') {
-                // For bottom placement, available space is from trigger bottom to viewport bottom
-                availableSpace = viewportHeight - triggerBounds.bottom - 10; // 10px margin from bottom
-            }
-            else {
-                // For top placement, available space is from viewport top to trigger top
-                availableSpace = triggerBounds.top - 10; // 10px margin from top
-            }
-            // Apply the calculated constraints
-            if (naturalHeight > availableSpace) {
-                // Content is larger than available space, so constrain and add scrolling
-                this._dropdownElement.style.maxHeight = `${availableSpace}px`;
-                this._dropdownElement.style.overflowY = 'auto';
-            }
-            else {
-                // Content fits, so use natural height with auto overflow for consistency
-                this._dropdownElement.style.maxHeight = `${naturalHeight}px`;
-                this._dropdownElement.style.overflowY = 'auto';
-            }
-            // Add placement class for styling
-            this._dropdownElement.classList.remove('placement-top', 'placement-bottom');
-            this._dropdownElement.classList.add(`placement-${placement}`);
-            // Position and constraints applied successfully
-        }
-        catch (error) {
-            this.handleError(error, 'applyPosition');
-        }
-    }
-    /**
-     * Calculate available space around trigger
-     */
-    getAvailableSpace() {
-        var _a, _b;
-        if (!this._triggerElement) {
-            return { above: 0, below: 0, left: 0, right: 0 };
-        }
-        const triggerRect = this._triggerElement.getBoundingClientRect();
-        const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
-        const viewportWidth = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
-        return {
-            above: triggerRect.top,
-            below: viewportHeight - triggerRect.bottom,
-            left: triggerRect.left,
-            right: viewportWidth - triggerRect.right,
-        };
-    }
-    /**
-     * Handle errors with fallback
-     */
-    handleError(error, context) {
-        console.warn(`SharedDropdownController [${context}]:`, error);
-    }
-}
-//# sourceMappingURL=dropdown.controller.js.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/dropdown.interface.d.ts

@@ -1,37 +0,0 @@
-/**
- * Shared dropdown controller interface
- */
-export interface DropdownPosition {
-    top: number;
-    left: number;
-    width: number;
-    placement: 'bottom' | 'top';
-}
-export interface DropdownSpace {
-    above: number;
-    below: number;
-    left: number;
-    right: number;
-}
-/**
- * Host interface for components using dropdown functionality
- */
-export interface DropdownHost {
-    requestUpdate(): void;
-    dispatchEvent(event: Event): boolean;
-}
-/**
- * Dropdown controller interface
- */
-export interface DropdownController {
-    readonly isOpen: boolean;
-    readonly position: DropdownPosition;
-    open(): void;
-    close(): void;
-    toggle(): void;
-    calculatePosition(): void;
-    resetPosition(): void;
-    setElements(dropdownElement: HTMLElement, triggerElement: HTMLElement): void;
-    getAvailableSpace(): DropdownSpace;
-}
-//# sourceMappingURL=dropdown.interface.d.ts.map

package/components/ui/nuraly-ui/packages/common/dist/shared/controllers/dropdown.interface.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=dropdown.interface.js.map

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

@@ -1,4 +0,0 @@
-export * from './dropdown.interface.js';
-export * from './dropdown.controller.js';
-export * from './theme.controller.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +0,0 @@
-export * from './dropdown.interface.js';
-export * from './dropdown.controller.js';
-export * from './theme.controller.js';
-//# sourceMappingURL=index.js.map

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

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { ThemeVariant } from '../themes.js';
-/**
- * Theme controller that observes and reacts to theme changes on the host element or its parents
- * This controller watches for data-theme attribute changes and triggers re-renders
- */
-export declare class ThemeController implements ReactiveController {
-    private host;
-    private observer?;
-    private _currentTheme;
-    constructor(host: ReactiveControllerHost & HTMLElement);
-    /**
-     * Get the current theme variant
-     */
-    get currentTheme(): ThemeVariant | null;
-    /**
-     * Check if the current theme is a dark variant
-     */
-    get isDark(): boolean;
-    /**
-     * Check if the current theme is a light variant
-     */
-    get isLight(): boolean;
-    /**
-     * Get the theme system (default, carbon)
-     */
-    get themeSystem(): string;
-    hostConnected(): void;
-    hostDisconnected(): void;
-    private updateTheme;
-    private setupObserver;
-    private cleanup;
-    /**
-     * Apply a theme to the closest themed ancestor or the host element
-     * @param theme - The theme variant to apply
-     */
-    applyTheme(theme: ThemeVariant): void;
-    /**
-     * Toggle between light and dark variants of the current theme
-     */
-    toggleVariant(): void;
-}
-//# sourceMappingURL=theme.controller.d.ts.map

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

@@ -1,133 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { getCurrentTheme } from '../themes.js';
-/**
- * Theme controller that observes and reacts to theme changes on the host element or its parents
- * This controller watches for data-theme attribute changes and triggers re-renders
- */
-export class ThemeController {
-    constructor(host) {
-        this._currentTheme = null;
-        this.host = host;
-        host.addController(this);
-    }
-    /**
-     * Get the current theme variant
-     */
-    get currentTheme() {
-        return this._currentTheme;
-    }
-    /**
-     * Check if the current theme is a dark variant
-     */
-    get isDark() {
-        var _a, _b;
-        return (_b = (_a = this._currentTheme) === null || _a === void 0 ? void 0 : _a.includes('dark')) !== null && _b !== void 0 ? _b : false;
-    }
-    /**
-     * Check if the current theme is a light variant
-     */
-    get isLight() {
-        var _a, _b;
-        return (_b = (_a = this._currentTheme) === null || _a === void 0 ? void 0 : _a.includes('light')) !== null && _b !== void 0 ? _b : true;
-    }
-    /**
-     * Get the theme system (default, carbon)
-     */
-    get themeSystem() {
-        if (!this._currentTheme)
-            return 'default';
-        if (this._currentTheme.startsWith('carbon'))
-            return 'carbon';
-        return 'default';
-    }
-    hostConnected() {
-        this.updateTheme();
-        this.setupObserver();
-    }
-    hostDisconnected() {
-        this.cleanup();
-    }
-    updateTheme() {
-        const newTheme = getCurrentTheme(this.host);
-        if (newTheme !== this._currentTheme) {
-            this._currentTheme = newTheme;
-            this.host.requestUpdate();
-        }
-    }
-    setupObserver() {
-        this.cleanup();
-        // Create a mutation observer to watch for theme changes
-        this.observer = new MutationObserver((mutations) => {
-            let shouldUpdate = false;
-            mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' &&
-                    mutation.attributeName === 'data-theme') {
-                    shouldUpdate = true;
-                }
-            });
-            if (shouldUpdate) {
-                this.updateTheme();
-            }
-        });
-        // Start observing the host element and its ancestors
-        let element = this.host;
-        while (element) {
-            this.observer.observe(element, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-            element = element.parentElement;
-        }
-        // Also observe the document.body for theme changes
-        if (typeof document !== 'undefined' && document.body) {
-            this.observer.observe(document.body, {
-                attributes: true,
-                attributeFilter: ['data-theme']
-            });
-        }
-    }
-    cleanup() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = undefined;
-        }
-    }
-    /**
-     * Apply a theme to the closest themed ancestor or the host element
-     * @param theme - The theme variant to apply
-     */
-    applyTheme(theme) {
-        // Find the closest element with a data-theme attribute, or use the host
-        let targetElement = this.host;
-        while (targetElement && !targetElement.hasAttribute('data-theme')) {
-            targetElement = targetElement.parentElement;
-        }
-        if (!targetElement) {
-            targetElement = this.host;
-        }
-        targetElement.setAttribute('data-theme', theme);
-    }
-    /**
-     * Toggle between light and dark variants of the current theme
-     */
-    toggleVariant() {
-        const currentTheme = this._currentTheme || 'default-light';
-        const toggleMap = {
-            'default-light': 'default-dark',
-            'default-dark': 'default-light',
-            'carbon-light': 'carbon-dark',
-            'carbon-dark': 'carbon-light',
-            'light': 'dark',
-            'dark': 'light'
-        };
-        const newTheme = toggleMap[currentTheme];
-        if (newTheme) {
-            this.applyTheme(newTheme);
-        }
-    }
-}
-//# sourceMappingURL=theme.controller.js.map

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

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-/**
- * Interface for components that need dependency validation
- */
-export interface DependencyAware {
-    requiredComponents: string[];
-    validateDependencies(): void;
-    isComponentAvailable(componentName: string): boolean;
-}
-declare type Constructor<T = {}> = new (...args: any[]) => T;
-/**
- * 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 declare const DependencyValidationMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DependencyAware> & T;
-export {};
-//# sourceMappingURL=dependency-mixin.d.ts.map