@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/collapse/controllers/base.controller.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { CollapseSection } from '../collapse.type.js';
+
+/**
+ * Base controller interface for collapse components
+ */
+export interface CollapseControllerHost extends ReactiveControllerHost {
+  sections: CollapseSection[];
+  accordion?: boolean;
+  allowMultiple?: boolean;
+  animation?: string;
+  requestUpdate(): void;
+  updateSection?(index: number, updates: Partial<CollapseSection>): void;
+  updateSections?(updates: Array<{ index: number; updates: Partial<CollapseSection> }>): void;
+}
+
+/**
+ * Base controller for collapse component functionality
+ */
+export abstract class BaseCollapseController implements ReactiveController {
+  protected host: CollapseControllerHost;
+
+  constructor(host: CollapseControllerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    // Base implementation - can be overridden by subclasses
+  }
+
+  hostDisconnected(): void {
+    // Base implementation - can be overridden by subclasses
+  }
+
+  hostUpdate(): void {
+    // Base implementation - can be overridden by subclasses
+  }
+
+  hostUpdated(): void {
+    // Base implementation - can be overridden by subclasses
+  }
+
+  /**
+   * Get section by index safely
+   */
+  protected getSection(index: number): CollapseSection | undefined {
+    return this.host.sections[index];
+  }
+
+  /**
+   * Update a specific section
+   */
+  protected updateSection(index: number, updates: Partial<CollapseSection>): void {
+    // Use the host's updateSection method if available (preferred for consistency)
+    if (this.host.updateSection) {
+      this.host.updateSection(index, updates);
+      return;
+    }
+    
+    // Fallback to direct update
+    const section = this.getSection(index);
+    if (section) {
+      // Create a new array with the updated section to trigger reactivity
+      const newSections = [...this.host.sections];
+      newSections[index] = { ...section, ...updates };
+      this.host.sections = newSections;
+      this.host.requestUpdate();
+    }
+  }
+
+  /**
+   * Update multiple sections at once (more efficient for batch operations)
+   */
+  protected updateSections(updates: Array<{ index: number; updates: Partial<CollapseSection> }>): void {
+    // Use the host's updateSections method if available (preferred for consistency)
+    if (this.host.updateSections) {
+      this.host.updateSections(updates);
+      return;
+    }
+    
+    // Fallback to direct batch update
+    const newSections = [...this.host.sections];
+    let hasChanges = false;
+
+    updates.forEach(({ index, updates: sectionUpdates }) => {
+      const section = this.getSection(index);
+      if (section) {
+        newSections[index] = { ...section, ...sectionUpdates };
+        hasChanges = true;
+      }
+    });
+
+    if (hasChanges) {
+      this.host.sections = newSections;
+      this.host.requestUpdate();
+    }
+  }
+
+  /**
+   * Get all open sections
+   */
+  protected getOpenSections(): number[] {
+    return this.host.sections
+      .map((section, index) => section.open ? index : -1)
+      .filter(index => index !== -1);
+  }
+}

package/components/ui/nuraly-ui/src/components/collapse/controllers/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+// Export all collapse controllers
+export { BaseCollapseController } from './base.controller.js';
+export { CollapseAnimationController } from './animation.controller.js';
+export { CollapseKeyboardController } from './keyboard.controller.js';
+export { CollapseAccordionController } from './accordion.controller.js';
+
+// Export controller host interfaces
+export type { CollapseControllerHost } from './base.controller.js';
+export type { CollapseAccordionHost } from './accordion.controller.js';

package/components/ui/nuraly-ui/src/components/collapse/controllers/keyboard.controller.ts

@@ -0,0 +1,212 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+
+/**
+ * Keyboard navigation controller for collapse component
+ * Handles keyboard accessibility
+ */
+export class CollapseKeyboardController extends BaseCollapseController {
+  private currentFocusIndex = -1;
+
+  constructor(host: CollapseControllerHost) {
+    super(host);
+  }
+
+  override hostConnected(): void {
+    super.hostConnected();
+    this.addKeyboardListeners();
+  }
+
+  override hostDisconnected(): void {
+    super.hostDisconnected();
+    this.removeKeyboardListeners();
+  }
+
+  /**
+   * Add keyboard event listeners
+   */
+  private addKeyboardListeners(): void {
+    const hostElement = this.host as unknown as HTMLElement;
+    hostElement.addEventListener('keydown', this.handleKeyDown);
+    hostElement.addEventListener('focus', this.handleFocus, true);
+  }
+
+  /**
+   * Remove keyboard event listeners
+   */
+  private removeKeyboardListeners(): void {
+    const hostElement = this.host as unknown as HTMLElement;
+    hostElement.removeEventListener('keydown', this.handleKeyDown);
+    hostElement.removeEventListener('focus', this.handleFocus, true);
+  }
+
+  /**
+   * Handle keydown events
+   */
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    const target = event.target as HTMLElement;
+    const headerElement = target.closest('.collapse-header');
+    
+    if (!headerElement) return;
+
+    const sectionIndex = this.getSectionIndex(headerElement);
+    if (sectionIndex === -1) return;
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        this.toggleSection(sectionIndex);
+        break;
+      
+      case 'ArrowDown':
+        event.preventDefault();
+        this.focusNextSection(sectionIndex);
+        break;
+      
+      case 'ArrowUp':
+        event.preventDefault();
+        this.focusPreviousSection(sectionIndex);
+        break;
+      
+      case 'Home':
+        event.preventDefault();
+        this.focusFirstSection();
+        break;
+      
+      case 'End':
+        event.preventDefault();
+        this.focusLastSection();
+        break;
+    }
+  };
+
+  /**
+   * Handle focus events
+   */
+  private handleFocus = (event: FocusEvent): void => {
+    const target = event.target as HTMLElement;
+    const headerElement = target.closest('.collapse-header');
+    
+    if (headerElement) {
+      const sectionIndex = this.getSectionIndex(headerElement);
+      this.currentFocusIndex = sectionIndex;
+    }
+  };
+
+  /**
+   * Toggle section
+   */
+  private toggleSection(index: number): void {
+    const section = this.getSection(index);
+    if (section && section.collapsible !== false && !section.disabled) {
+      // Dispatch toggle event - the main component will handle the actual toggle
+      const hostElement = this.host as unknown as HTMLElement;
+      hostElement.dispatchEvent(new CustomEvent('section-toggle-requested', {
+        detail: { index },
+        bubbles: false
+      }));
+    }
+  }
+
+  /**
+   * Focus next section
+   */
+  private focusNextSection(currentIndex: number): void {
+    const nextIndex = this.findNextFocusableSection(currentIndex);
+    if (nextIndex !== -1) {
+      this.focusSection(nextIndex);
+    }
+  }
+
+  /**
+   * Focus previous section
+   */
+  private focusPreviousSection(currentIndex: number): void {
+    const prevIndex = this.findPreviousFocusableSection(currentIndex);
+    if (prevIndex !== -1) {
+      this.focusSection(prevIndex);
+    }
+  }
+
+  /**
+   * Focus first section
+   */
+  private focusFirstSection(): void {
+    const firstIndex = this.findNextFocusableSection(-1);
+    if (firstIndex !== -1) {
+      this.focusSection(firstIndex);
+    }
+  }
+
+  /**
+   * Focus last section
+   */
+  private focusLastSection(): void {
+    const lastIndex = this.findPreviousFocusableSection(this.host.sections.length);
+    if (lastIndex !== -1) {
+      this.focusSection(lastIndex);
+    }
+  }
+
+  /**
+   * Focus specific section
+   */
+  private focusSection(index: number): void {
+    const hostElement = this.host as unknown as HTMLElement;
+    const headerElement = hostElement.shadowRoot?.querySelector(
+      `.collapse-header[data-section-index="${index}"]`
+    ) as HTMLElement;
+    
+    if (headerElement) {
+      headerElement.focus();
+      this.currentFocusIndex = index;
+    }
+  }
+
+  /**
+   * Find next focusable section
+   */
+  private findNextFocusableSection(currentIndex: number): number {
+    for (let i = currentIndex + 1; i < this.host.sections.length; i++) {
+      const section = this.host.sections[i];
+      if (section.collapsible !== false && !section.disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  /**
+   * Find previous focusable section
+   */
+  private findPreviousFocusableSection(currentIndex: number): number {
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      const section = this.host.sections[i];
+      if (section.collapsible !== false && !section.disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  /**
+   * Get section index from header element
+   */
+  private getSectionIndex(headerElement: Element): number {
+    const indexAttr = headerElement.getAttribute('data-section-index');
+    return indexAttr ? parseInt(indexAttr, 10) : -1;
+  }
+
+  /**
+   * Get current focus index
+   */
+  getCurrentFocusIndex(): number {
+    return this.currentFocusIndex;
+  }
+}

package/components/ui/nuraly-ui/src/components/collapse/index.ts

@@ -0,0 +1 @@
+export * from './collapse.component.js';

package/components/ui/nuraly-ui/src/components/collapse/react.ts

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyCollapse } from './collapse.component.js';
+
+export const HyCollapseComponent = createComponent({
+  tagName: 'nr-collapse',
+  elementClass: HyCollapse,
+  react: React,
+  events: {
+    toggle: 'toggle',
+    change: 'change',
+  },
+});

package/components/ui/nuraly-ui/src/components/colorpicker/color-holder.component.ts

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './color-holder.style.js';
+import { ColorPickerSize } from './color-picker.types.js';
+
+/**
+ * Color holder box component for displaying a color swatch.
+ * 
+ * Renders a colored box that can be used as a color indicator or trigger.
+ * Supports various sizes and can be disabled.
+ * 
+ * @example
+ * ```html
+ * <nr-colorholder-box color="#3498db"></nr-colorholder-box>
+ * <nr-colorholder-box color="rgb(52, 152, 219)" size="large"></nr-colorholder-box>
+ * <nr-colorholder-box color="#e74c3c" disabled></nr-colorholder-box>
+ * ```
+ * 
+ * @cssproperty --color-holder-size - Size of the color box
+ * @cssproperty --color-holder-border - Border style
+ * @cssproperty --color-holder-border-radius - Border radius
+ * @cssproperty --color-holder-cursor - Cursor style
+ */
+@customElement('nr-colorholder-box')
+export class ColorHolderBox extends LitElement {
+  static override styles = styles;
+
+  /** The color value to display */
+  @property({ type: String })
+  color = '#3498db';
+
+  /** Size variant (small, default, large) */
+  @property({ type: String, reflect: true })
+  size: ColorPickerSize = ColorPickerSize.Default;
+
+  /** Whether the color holder is disabled */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Show a checkered background for transparent colors */
+  @property({ type: Boolean, attribute: 'show-transparency-grid' })
+  showTransparencyGrid = true;
+
+  /** Border width in pixels */
+  @property({ type: Number, attribute: 'border-width' })
+  borderWidth = 2;
+
+  /** Whether to show a border */
+  @property({ type: Boolean, attribute: 'show-border' })
+  showBorder = true;
+
+  /**
+   * Validates if the color is valid CSS color
+   */
+  private isValidColor(): boolean {
+    try {
+      return CSS.supports('color', this.color);
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Checks if the color is transparent or has transparency
+   */
+  private isTransparent(): boolean {
+    return this.color === 'transparent' || 
+           this.color.toLowerCase().includes('rgba') ||
+           this.color.toLowerCase().includes('hsla');
+  }
+
+  override render() {
+    const containerClasses = {
+      'color-holder-container': true,
+      'color-holder-container--disabled': this.disabled,
+      'color-holder-container--invalid': !this.isValidColor(),
+      'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,
+      [`color-holder-container--${this.size}`]: true,
+    };
+
+    const containerStyles = {
+      backgroundColor: this.isValidColor() ? this.color : '#ffffff',
+      borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',
+    };
+
+    return html`
+      <div 
+        class="${classMap(containerClasses)}" 
+        style="${styleMap(containerStyles)}"
+        role="img"
+        aria-label="Color swatch: ${this.color}"
+        title="${this.color}"
+      ></div>
+    `;
+  }
+}

package/components/ui/nuraly-ui/src/components/colorpicker/color-holder.style.ts

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+
+/**
+ * Color Holder component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+const colorHolderStyles = css`
+  :host {
+    display: inline-block;
+    cursor: pointer;
+    
+    /* Ensure clean state transitions */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  .color-holder-container {
+    width: var(--nuraly-size-colorpicker-default, 30px);
+    height: var(--nuraly-size-colorpicker-default-height, 25px);
+    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
+    box-sizing: border-box;
+    border-radius: var(--nuraly-border-radius-small, 2px);
+  }
+  
+  :host([size='small']) .color-holder-container {
+    width: var(--nuraly-size-colorpicker-small, 20px);
+    height: var(--nuraly-size-colorpicker-small-height, 15px);
+  }
+  
+  :host([size='large']) .color-holder-container {
+    width: var(--nuraly-size-colorpicker-large, 35px);
+    height: var(--nuraly-size-colorpicker-large-height, 30px);
+  }
+  
+  .color-holder-container--disabled {
+    opacity: var(--nuraly-opacity-disabled, 0.5);
+    cursor: not-allowed;
+  }
+  
+  :host(:hover:not([disabled])) .color-holder-container {
+    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
+  }
+`;
+
+export const styles = colorHolderStyles;