@nuraly/lumenui 0.1.0

package/dist/src/components/collapse/collapse.component.js

@@ -0,0 +1,322 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { EMPTY_STRING } from './collapse.type.js';
+import { styles } from './collapse.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// Import controllers
+import { CollapseAnimationController, CollapseAccordionController } from './controllers/index.js';
+/**
+ * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.
+ *
+ * @example
+ * ```html
+ * <nr-collapse
+ *   .sections="${sections}"
+ *   size="medium"
+ *   variant="default"
+ *   accordion
+ * ></nr-collapse>
+ * ```
+ *
+ * @element nr-collapse
+ * @fires section-toggle - Fired when a section is toggled
+ * @fires section-before-toggle - Fired before a section is toggled (cancellable)
+ */
+let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        // Controllers
+        this.animationController = new CollapseAnimationController(this);
+        this.accordionController = new CollapseAccordionController(this);
+        // Public properties
+        this.sections = [];
+        this.size = "medium" /* CollapseSize.Medium */;
+        this.variant = "default" /* CollapseVariant.Default */;
+        this.animation = "slide" /* CollapseAnimation.Slide */;
+        this.accordion = false;
+        this.allowMultiple = false;
+        this.disabled = false;
+        this.expandIcon = 'chevron-right';
+        this.collapseIcon = 'chevron-down';
+        /**
+         * Handle toggle request from keyboard controller
+         */
+        this.handleToggleRequest = (event) => {
+            const { index } = event.detail;
+            this.toggleSection(index);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for internal events from controllers
+        this.addEventListener('section-toggle-requested', this.handleToggleRequest);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('section-toggle-requested', this.handleToggleRequest);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('accordion') || changedProperties.has('allowMultiple')) {
+            this.accordionController.enforceAccordionMode();
+        }
+    }
+    /**
+     * Toggle a section by index
+     */
+    toggleSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (!section || section.disabled || section.collapsible === false) {
+                return;
+            }
+            const isCurrentlyOpen = !!section.open;
+            const willBeOpen = !isCurrentlyOpen;
+            // Dispatch before-toggle event (cancellable)
+            const beforeToggleEvent = new CustomEvent('section-before-toggle', {
+                detail: {
+                    index,
+                    section,
+                    isOpen: isCurrentlyOpen,
+                    preventDefault: () => beforeToggleEvent.preventDefault()
+                },
+                cancelable: true,
+                bubbles: true
+            });
+            if (!this.dispatchEvent(beforeToggleEvent)) {
+                return; // Event was cancelled
+            }
+            // Handle accordion logic
+            this.accordionController.handleSectionToggle(index, willBeOpen);
+            // Update section state
+            this.updateSection(index, { open: willBeOpen });
+            // Handle animation
+            if (this.animation !== "none" /* CollapseAnimation.None */) {
+                yield this.animationController.animateToggle(index, willBeOpen);
+            }
+            // Dispatch toggle event
+            this.dispatchEvent(new CustomEvent('section-toggle', {
+                detail: {
+                    index,
+                    section: this.sections[index],
+                    isOpen: willBeOpen
+                },
+                bubbles: true
+            }));
+        });
+    }
+    /**
+     * Open a specific section
+     */
+    openSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (section && !section.open) {
+                yield this.toggleSection(index);
+            }
+        });
+    }
+    /**
+     * Close a specific section
+     */
+    closeSection(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const section = this.sections[index];
+            if (section && section.open) {
+                yield this.toggleSection(index);
+            }
+        });
+    }
+    /**
+     * Open all sections (respects accordion mode)
+     */
+    openAllSections() {
+        this.accordionController.openAllSections();
+    }
+    /**
+     * Close all sections
+     */
+    closeAllSections() {
+        this.accordionController.closeAllSections();
+    }
+    /**
+     * Update a specific section (used by controllers and internal logic)
+     */
+    updateSection(index, updates) {
+        if (index < 0 || index >= this.sections.length) {
+            return;
+        }
+        this.sections = this.sections.map((section, i) => i === index ? Object.assign(Object.assign({}, section), updates) : section);
+    }
+    /**
+     * Update multiple sections at once (used by controllers for batch operations)
+     */
+    updateSections(updates) {
+        if (updates.length === 0) {
+            return;
+        }
+        this.sections = this.sections.map((section, i) => {
+            const update = updates.find(u => u.index === i);
+            return update ? Object.assign(Object.assign({}, section), update.updates) : section;
+        });
+    }
+    /**
+     * Get icon for section state
+     */
+    getSectionIcon(section) {
+        if (section.expandIcon && section.collapseIcon) {
+            return section.open ? section.collapseIcon : section.expandIcon;
+        }
+        if (section.headerIcon) {
+            return section.headerIcon;
+        }
+        return section.open ? this.collapseIcon : this.expandIcon;
+    }
+    /**
+     * Check if section is animating
+     */
+    isSectionAnimating(index) {
+        return this.animationController.isAnimating(index);
+    }
+    render() {
+        return html `
+      <div class="collapse-container ${classMap({
+            [`collapse-${this.size}`]: true,
+            [`collapse-${this.variant}`]: true,
+            'collapse-accordion': this.accordion,
+            'collapse-disabled': this.disabled
+        })}">
+        ${map(this.sections, (section, index) => this.renderSection(section, index))}
+      </div>
+    `;
+    }
+    /**
+     * Render individual section
+     */
+    renderSection(section, index) {
+        const isOpen = !!section.open;
+        const isDisabled = this.disabled || section.disabled;
+        const isCollapsible = section.collapsible !== false;
+        const isAnimating = this.isSectionAnimating(index);
+        return html `
+      <div 
+        class="collapse-section ${classMap({
+            'collapse-section--open': isOpen,
+            'collapse-section--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+            'collapse-section--non-collapsible': !isCollapsible,
+            'collapse-section--animating': isAnimating,
+            [section.className || EMPTY_STRING]: !!section.className
+        })}"
+        data-section-index="${index}"
+      >
+        <!-- Section Header -->
+        <div
+          class="collapse-header ${classMap({
+            'collapse-header--expanded': isOpen,
+            'collapse-header--disabled': isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+            'collapse-header--clickable': isCollapsible && !isDisabled
+        })}"
+          data-section-index="${index}"
+          role="button"
+          tabindex="${isCollapsible && !isDisabled ? '0' : '-1'}"
+          aria-expanded="${isOpen}"
+          aria-controls="collapse-content-${index}"
+          aria-disabled="${ifDefined(isDisabled)}"
+          @click="${isCollapsible && !isDisabled ? () => this.toggleSection(index) : nothing}"
+        >
+          ${isCollapsible ? html `
+            <nr-icon
+              class="collapse-icon ${classMap({
+            'collapse-icon--expanded': isOpen
+        })}"
+              name="${this.getSectionIcon(section)}"
+              aria-hidden="true"
+            ></nr-icon>
+          ` : nothing}
+          
+          <span class="collapse-header-text">
+            ${section.headerSlot ? html `<slot name="${section.headerSlot}"></slot>` : html `<nr-label .size=${this.size}>${section.header}</nr-label>`}
+          </span>
+
+          ${section.headerRight || section.headerRightSlot ? html `
+            <div class="collapse-header-right" @click="${(e) => e.stopPropagation()}">
+              ${section.headerRightSlot ? html `<slot name="${section.headerRightSlot}"></slot>` : section.headerRight}
+            </div>
+          ` : nothing}
+        </div>
+
+        <!-- Section Content -->
+        ${isOpen ? html `
+          <div
+            id="collapse-content-${index}"
+            class="collapse-content"
+            data-section-index="${index}"
+            role="region"
+            aria-labelledby="collapse-header-${index}"
+          >
+            <div class="collapse-content-inner">
+              ${section.contentSlot ? html `<slot name="${section.contentSlot}"></slot>` : section.content}
+            </div>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+    }
+};
+HyCollapse.styles = styles;
+__decorate([
+    property({ type: Array })
+], HyCollapse.prototype, "sections", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], HyCollapse.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyCollapse.prototype, "accordion", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-multiple' })
+], HyCollapse.prototype, "allowMultiple", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyCollapse.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'expand-icon' })
+], HyCollapse.prototype, "expandIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapse-icon' })
+], HyCollapse.prototype, "collapseIcon", void 0);
+HyCollapse = __decorate([
+    customElement('nr-collapse')
+], HyCollapse);
+export { HyCollapse };
+//# sourceMappingURL=collapse.component.js.map

package/dist/src/components/collapse/collapse.style.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collapse component styles using theme variables
+ * Follows NuralyUI architecture with clean CSS variable usage
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=collapse.style.d.ts.map

package/dist/src/components/collapse/collapse.style.js

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Collapse component styles using theme variables
+ * Follows NuralyUI architecture with clean CSS variable usage
+ */
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  .collapse-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-spacing-collapse-gap);
+    border: var(--nuraly-color-collapse-border);
+    border-radius: var(--nuraly-border-radius-collapse);
+    background-color: var(--nuraly-color-collapse-bordered-background);
+    overflow: visible;
+  }
+
+  .collapse-section {
+    position: relative;
+    border-bottom: 1px solid var(--nuraly-color-collapse-border);
+    transition: var(--nuraly-transition-collapse);
+  }
+
+  .collapse-section:last-child {
+    border-bottom: none;
+  }
+
+  .collapse-section--disabled {
+    opacity: var(--nuraly-opacity-collapse-disabled);
+    pointer-events: none;
+  }
+
+  .collapse-section--non-collapsible .collapse-header {
+    cursor: default;
+  }
+
+  .collapse-section--animating .collapse-content {
+    overflow: hidden;
+  }
+
+  /* Header Styles */
+  .collapse-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nuraly-spacing-collapse-padding);
+    background-color: var(--nuraly-color-collapse-header-background);
+    color: var(--nuraly-color-collapse-header-text);
+    font-weight: var(--nuraly-font-collapse-header-weight);
+    font-size: var(--nuraly-font-collapse-header-size);
+    line-height: var(--nuraly-font-collapse-header-line-height);
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
+    border-radius: var(--nuraly-border-radius-collapse-header);
+  }
+
+  .collapse-header--clickable:hover {
+    background-color: var(--nuraly-color-collapse-header-background-hover);
+  }
+
+  .collapse-header--clickable:active {
+    background-color: var(--nuraly-color-collapse-header-background-active);
+  }
+
+  .collapse-header--expanded {
+    background-color: var(--nuraly-color-collapse-header-background-expanded);
+  }
+
+  .collapse-header--disabled {
+    color: var(--nuraly-color-collapse-header-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .collapse-header:focus-visible {
+    outline: 2px solid var(--nuraly-color-collapse-focus-outline);
+    outline-offset: 2px;
+    box-shadow: var(--nuraly-shadow-collapse-focus);
+  }
+
+  .collapse-header-text {
+    flex: 1;
+    text-align: left;
+  }
+
+  .collapse-header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-collapse-header-right-gap, 0.5rem);
+    margin-left: var(--nuraly-spacing-collapse-header-right-margin, 0.75rem);
+    color: var(--nuraly-color-collapse-header-right-text, inherit);
+  }
+
+  .collapse-header-right > * {
+    flex-shrink: 0;
+  }
+
+  /* Icon Styles */
+  .collapse-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nuraly-collapse-icon-size);
+    height: var(--nuraly-collapse-icon-size);
+    color: var(--nuraly-color-collapse-icon);
+    transition: var(--nuraly-collapse-icon-transition);
+    transform-origin: center;
+  }
+
+  .collapse-header--disabled .collapse-icon {
+    color: var(--nuraly-color-collapse-icon-disabled);
+  }
+
+  /* Content Styles */
+  .collapse-content {
+    background-color: var(--nuraly-color-collapse-content-background);
+    border-radius: var(--nuraly-border-radius-collapse-content);
+    transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
+  }
+
+  .collapse-content-inner {
+    padding: var(--nuraly-spacing-collapse-content-padding);
+    color: var(--nuraly-color-collapse-content-text);
+    font-weight: var(--nuraly-font-collapse-content-weight);
+    font-size: var(--nuraly-font-collapse-content-size);
+    line-height: var(--nuraly-font-collapse-content-line-height);
+  }
+
+  /* Size Variants */
+  :host([size="small"]) .collapse-header {
+    padding: var(--nuraly-spacing-collapse-small-padding);
+  }
+
+  :host([size="small"]) .collapse-content-inner {
+    padding: var(--nuraly-spacing-collapse-small-content-padding);
+  }
+
+  :host([size="medium"]) .collapse-header {
+    padding: var(--nuraly-spacing-collapse-medium-padding);
+  }
+
+  :host([size="medium"]) .collapse-content-inner {
+    padding: var(--nuraly-spacing-collapse-medium-content-padding);
+  }
+
+  :host([size="large"]) .collapse-header {
+    padding: var(--nuraly-spacing-collapse-large-padding);
+  }
+
+  :host([size="large"]) .collapse-content-inner {
+    padding: var(--nuraly-spacing-collapse-large-content-padding);
+  }
+
+  /* Variant Styles */
+  :host([variant="default"]) .collapse-container {
+    background-color: var(--nuraly-color-collapse-content-background);
+    border: 1px solid var(--nuraly-color-collapse-border);
+  }
+
+  :host([variant="bordered"]) .collapse-container {
+    background-color: var(--nuraly-color-collapse-bordered-background);
+    border: 2px solid var(--nuraly-color-collapse-bordered-border);
+  }
+
+  :host([variant="ghost"]) .collapse-container {
+    background-color: var(--nuraly-color-collapse-ghost-background);
+    border: 1px solid var(--nuraly-color-collapse-ghost-border);
+  }
+
+  :host([variant="ghost"]) .collapse-header:hover {
+    background-color: var(--nuraly-color-collapse-ghost-hover);
+  }
+
+  /* Accordion Mode */
+  :host([accordion]) .collapse-section {
+    border-bottom: 1px solid var(--nuraly-color-collapse-border);
+  }
+
+  /* Shadow Variants */
+  :host(:not([variant="ghost"])) .collapse-container {
+    box-shadow: var(--nuraly-shadow-collapse);
+  }
+
+  :host(:not([variant="ghost"])) .collapse-container:hover {
+    box-shadow: var(--nuraly-shadow-collapse-hover);
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .collapse-header,
+    .collapse-icon,
+    .collapse-content,
+    .collapse-section {
+      transition: none;
+    }
+    
+    .collapse-icon--expanded {
+      transform: none;
+    }
+  }
+
+  /* High Contrast Mode */
+  @media (prefers-contrast: high) {
+    .collapse-header {
+      border: 2px solid var(--nuraly-color-collapse-border-focus);
+    }
+    
+    .collapse-header:focus-visible {
+      outline: 3px solid var(--nuraly-color-collapse-focus-outline);
+    }
+  }
+`;
+// Export the styles for the collapse component
+//# sourceMappingURL=collapse.style.js.map

package/dist/src/components/collapse/collapse.type.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+/**
+ * Collapse component types and enums following NuralyUI architecture patterns
+ */
+export declare const EMPTY_STRING = "";
+export declare const enum CollapseSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export declare const enum CollapseVariant {
+    Default = "default",
+    Bordered = "bordered",
+    Ghost = "ghost"
+}
+export declare const enum CollapseAnimation {
+    None = "none",
+    Slide = "slide",
+    Fade = "fade"
+}
+export interface CollapseSection {
+    /** Unique identifier for the section */
+    id?: string;
+    /** Header content (text, HTML string, or TemplateResult) */
+    header: string | TemplateResult;
+    /** Content to display when expanded - supports plain text, HTML string, or TemplateResult */
+    content: string | TemplateResult;
+    /** Optional slot name for header content (alternative to header property) */
+    headerSlot?: string;
+    /** Optional slot name for content (alternative to content property) */
+    contentSlot?: string;
+    /** Optional content for the right side of the header (icons, menu, badges, etc.) */
+    headerRight?: string | TemplateResult;
+    /** Optional slot name for header right content (alternative to headerRight property) */
+    headerRightSlot?: string;
+    /** Whether the section is initially open */
+    open?: boolean;
+    /** Whether the section can be collapsed/expanded */
+    collapsible?: boolean;
+    /** Whether this section is disabled */
+    disabled?: boolean;
+    /** Custom CSS classes for the section */
+    className?: string;
+    /** Header icon configuration */
+    headerIcon?: string;
+    /** Custom expand/collapse icons */
+    expandIcon?: string;
+    collapseIcon?: string;
+}
+export interface CollapseAccordionConfig {
+    /** Whether to allow multiple sections open at once */
+    allowMultiple?: boolean;
+    /** Whether to collapse others when one is opened */
+    collapsible?: boolean;
+}
+export interface CollapseSectionToggleEvent {
+    /** Index of the toggled section */
+    index: number;
+    /** Section data */
+    section: CollapseSection;
+    /** Whether the section is now open */
+    isOpen: boolean;
+}
+export interface CollapseBeforeToggleEvent {
+    /** Index of the section about to be toggled */
+    index: number;
+    /** Section data */
+    section: CollapseSection;
+    /** Current open state */
+    isOpen: boolean;
+    /** Function to prevent the toggle */
+    preventDefault: () => void;
+}
+//# sourceMappingURL=collapse.type.d.ts.map

package/dist/src/components/collapse/collapse.type.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Collapse component types and enums following NuralyUI architecture patterns
+ */
+// Constants
+export const EMPTY_STRING = '';
+//# sourceMappingURL=collapse.type.js.map

package/dist/src/components/collapse/index.d.ts

@@ -0,0 +1,2 @@
+export * from './collapse.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/collapse/index.js

@@ -0,0 +1,2 @@
+export * from './collapse.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/collapse/react.d.ts

@@ -0,0 +1,6 @@
+import { HyCollapse } from './collapse.component.js';
+export declare const HyCollapseComponent: import("@lit-labs/react").ReactWebComponent<HyCollapse, {
+    toggle: string;
+    change: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/collapse/react.js

@@ -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',
+    },
+});
+//# sourceMappingURL=react.js.map