@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,308 @@
+import{css as e,LitElement as o,html as t,nothing as n}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{map as s}from"lit/directives/map.js";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{BaseComponentController as d}from"@nuralyui/common/controllers";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const p=e`
+  :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);
+    }
+  }
+`;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+class h extends d{getSection(e){return this.host.sections[e]}updateSection(e,o){if(this.host.updateSection)return void this.host.updateSection(e,o);const t=this.getSection(e);if(t){const n=[...this.host.sections];n[e]=Object.assign(Object.assign({},t),o),this.host.sections=n,this.host.requestUpdate()}}updateSections(e){if(this.host.updateSections)return void this.host.updateSections(e);const o=[...this.host.sections];let t=!1;e.forEach(({index:e,updates:n})=>{const i=this.getSection(e);i&&(o[e]=Object.assign(Object.assign({},i),n),t=!0)}),t&&(this.host.sections=o,this.host.requestUpdate())}getOpenSections(){return this.host.sections.map((e,o)=>e.open?o:-1).filter(e=>-1!==e)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var u=function(e,o,t,n){return new(t||(t=Promise))(function(i,a){function l(e){try{r(n.next(e))}catch(e){a(e)}}function s(e){try{r(n.throw(e))}catch(e){a(e)}}function r(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t(function(e){e(o)})).then(l,s)}r((n=n.apply(e,o||[])).next())})};class v extends h{constructor(e){super(e),this.animatingSections=new Set,this.animationDuration=300}animateToggle(e,o){return u(this,void 0,void 0,function*(){if(this.getSection(e)&&!this.animatingSections.has(e)){this.animatingSections.add(e);try{const t=this.getContentElement(e);if(!t)return;o?yield this.animateExpand(t):yield this.animateCollapse(t)}finally{this.animatingSections.delete(e)}}})}animateExpand(e){return u(this,void 0,void 0,function*(){const o=e.scrollHeight;return e.style.height="0px",e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height=`${o}px`,new Promise(o=>{const t=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",t),o()};e.addEventListener("transitionend",t),setTimeout(t,this.animationDuration+50)})})}animateCollapse(e){return u(this,void 0,void 0,function*(){const o=e.scrollHeight;return e.style.height=`${o}px`,e.style.overflow="hidden",e.style.transition=`height ${this.animationDuration}ms ease-out`,e.getAnimations(),e.style.height="0px",new Promise(o=>{const t=()=>{e.style.height="",e.style.overflow="",e.style.transition="",e.removeEventListener("transitionend",t),o()};e.addEventListener("transitionend",t),setTimeout(t,this.animationDuration+50)})})}getContentElement(e){var o;return(null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(`.collapse-content[data-section-index="${e}"]`))||null}isAnimating(e){return this.animatingSections.has(e)}setAnimationDuration(e){this.animationDuration=Math.max(0,e)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class g extends h{handleSectionToggle(e,o){this.host.accordion&&o&&!this.host.allowMultiple&&this.closeOtherSections(e)}closeOtherSections(e){this.host.sections.forEach((o,t)=>{t!==e&&o.open&&!1!==o.collapsible&&this.updateSection(t,{open:!1})})}enforceAccordionMode(){if(!this.host.accordion||this.host.allowMultiple)return;const e=this.getOpenSections();if(e.length>1){const o=e.slice(1).map(e=>({index:e,updates:{open:!1}}));this.updateSections(o)}}openSection(e){const o=this.getSection(e);o&&!o.disabled&&!1!==o.collapsible&&(this.host.accordion&&!this.host.allowMultiple&&this.closeOtherSections(e),this.updateSection(e,{open:!0}))}closeSection(e){const o=this.getSection(e);o&&!o.disabled&&!1!==o.collapsible&&this.updateSection(e,{open:!1})}closeAllSections(){const e=this.host.sections.map((e,o)=>({section:e,index:o})).filter(({section:e})=>e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!1}}));e.length>0&&this.updateSections(e)}openAllSections(){if(this.host.accordion&&!this.host.allowMultiple){const e=this.host.sections.findIndex(e=>!1!==e.collapsible&&!e.disabled);return void(-1!==e&&this.openSection(e))}const e=this.host.sections.map((e,o)=>({section:e,index:o})).filter(({section:e})=>!e.open&&!1!==e.collapsible&&!e.disabled).map(({index:e})=>({index:e,updates:{open:!0}}));e.length>0&&this.updateSections(e)}getActiveSectionIndex(){if(!this.host.accordion)return-1;const e=this.getOpenSections();return e.length>0?e[0]:-1}isAccordionMode(){return!!this.host.accordion}allowsMultiple(){return!!this.host.allowMultiple}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var b=function(e,o,t,n){for(var i,a=arguments.length,l=a<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,t):n,s=e.length-1;s>=0;s--)(i=e[s])&&(l=(a<3?i(l):a>3?i(o,t,l):i(o,t))||l);return a>3&&l&&Object.defineProperty(o,t,l),l},y=function(e,o,t,n){return new(t||(t=Promise))(function(i,a){function l(e){try{r(n.next(e))}catch(e){a(e)}}function s(e){try{r(n.throw(e))}catch(e){a(e)}}function r(e){var o;e.done?i(e.value):(o=e.value,o instanceof t?o:new t(function(e){e(o)})).then(l,s)}r((n=n.apply(e,o||[])).next())})};let f=class extends(l(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.animationController=new v(this),this.accordionController=new g(this),this.sections=[],this.size="medium",this.variant="default",this.animation="slide",this.accordion=!1,this.allowMultiple=!1,this.disabled=!1,this.expandIcon="chevron-right",this.collapseIcon="chevron-down",this.handleToggleRequest=e=>{const{index:o}=e.detail;this.toggleSection(o)}}connectedCallback(){super.connectedCallback(),this.addEventListener("section-toggle-requested",this.handleToggleRequest)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("section-toggle-requested",this.handleToggleRequest)}updated(e){super.updated(e),(e.has("accordion")||e.has("allowMultiple"))&&this.accordionController.enforceAccordionMode()}toggleSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];if(!o||o.disabled||!1===o.collapsible)return;const t=!!o.open,n=!t,i=new CustomEvent("section-before-toggle",{detail:{index:e,section:o,isOpen:t,preventDefault:()=>i.preventDefault()},cancelable:!0,bubbles:!0});this.dispatchEvent(i)&&(this.accordionController.handleSectionToggle(e,n),this.updateSection(e,{open:n}),"none"!==this.animation&&(yield this.animationController.animateToggle(e,n)),this.dispatchEvent(new CustomEvent("section-toggle",{detail:{index:e,section:this.sections[e],isOpen:n},bubbles:!0})))})}openSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];o&&!o.open&&(yield this.toggleSection(e))})}closeSection(e){return y(this,void 0,void 0,function*(){const o=this.sections[e];o&&o.open&&(yield this.toggleSection(e))})}openAllSections(){this.accordionController.openAllSections()}closeAllSections(){this.accordionController.closeAllSections()}updateSection(e,o){e<0||e>=this.sections.length||(this.sections=this.sections.map((t,n)=>n===e?Object.assign(Object.assign({},t),o):t))}updateSections(e){0!==e.length&&(this.sections=this.sections.map((o,t)=>{const n=e.find(e=>e.index===t);return n?Object.assign(Object.assign({},o),n.updates):o}))}getSectionIcon(e){return e.expandIcon&&e.collapseIcon?e.open?e.collapseIcon:e.expandIcon:e.headerIcon?e.headerIcon:e.open?this.collapseIcon:this.expandIcon}isSectionAnimating(e){return this.animationController.isAnimating(e)}render(){return t`
+      <div class="collapse-container ${r({[`collapse-${this.size}`]:!0,[`collapse-${this.variant}`]:!0,"collapse-accordion":this.accordion,"collapse-disabled":this.disabled})}">
+        ${s(this.sections,(e,o)=>this.renderSection(e,o))}
+      </div>
+    `}renderSection(e,o){const i=!!e.open,a=this.disabled||e.disabled,l=!1!==e.collapsible,s=this.isSectionAnimating(o);return t`
+      <div 
+        class="collapse-section ${r({"collapse-section--open":i,"collapse-section--disabled":null!=a&&a,"collapse-section--non-collapsible":!l,"collapse-section--animating":s,[e.className||""]:!!e.className})}"
+        data-section-index="${o}"
+      >
+        <!-- Section Header -->
+        <div
+          class="collapse-header ${r({"collapse-header--expanded":i,"collapse-header--disabled":null!=a&&a,"collapse-header--clickable":l&&!a})}"
+          data-section-index="${o}"
+          role="button"
+          tabindex="${l&&!a?"0":"-1"}"
+          aria-expanded="${i}"
+          aria-controls="collapse-content-${o}"
+          aria-disabled="${c(a)}"
+          @click="${l&&!a?()=>this.toggleSection(o):n}"
+        >
+          ${l?t`
+            <nr-icon
+              class="collapse-icon ${r({"collapse-icon--expanded":i})}"
+              name="${this.getSectionIcon(e)}"
+              aria-hidden="true"
+            ></nr-icon>
+          `:n}
+          
+          <span class="collapse-header-text">
+            ${e.headerSlot?t`<slot name="${e.headerSlot}"></slot>`:t`<nr-label .size=${this.size}>${e.header}</nr-label>`}
+          </span>
+
+          ${e.headerRight||e.headerRightSlot?t`
+            <div class="collapse-header-right" @click="${e=>e.stopPropagation()}">
+              ${e.headerRightSlot?t`<slot name="${e.headerRightSlot}"></slot>`:e.headerRight}
+            </div>
+          `:n}
+        </div>
+
+        <!-- Section Content -->
+        ${i?t`
+          <div
+            id="collapse-content-${o}"
+            class="collapse-content"
+            data-section-index="${o}"
+            role="region"
+            aria-labelledby="collapse-header-${o}"
+          >
+            <div class="collapse-content-inner">
+              ${e.contentSlot?t`<slot name="${e.contentSlot}"></slot>`:e.content}
+            </div>
+          </div>
+        `:n}
+      </div>
+    `}};f.styles=p,b([i({type:Array})],f.prototype,"sections",void 0),b([i({type:String})],f.prototype,"size",void 0),b([i({type:String})],f.prototype,"variant",void 0),b([i({type:String})],f.prototype,"animation",void 0),b([i({type:Boolean})],f.prototype,"accordion",void 0),b([i({type:Boolean,attribute:"allow-multiple"})],f.prototype,"allowMultiple",void 0),b([i({type:Boolean})],f.prototype,"disabled",void 0),b([i({type:String,attribute:"expand-icon"})],f.prototype,"expandIcon",void 0),b([i({type:String,attribute:"collapse-icon"})],f.prototype,"collapseIcon",void 0),f=b([a("nr-collapse")],f);export{f as HyCollapse};

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

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { CollapseSection, CollapseSize, CollapseVariant, CollapseAnimation } from './collapse.type.js';
+declare const HyCollapse_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * 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)
+ */
+export declare class HyCollapse extends HyCollapse_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    private animationController;
+    private accordionController;
+    sections: CollapseSection[];
+    size: CollapseSize;
+    variant: CollapseVariant;
+    animation: CollapseAnimation;
+    accordion: boolean;
+    allowMultiple: boolean;
+    disabled: boolean;
+    expandIcon: string;
+    collapseIcon: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * Toggle a section by index
+     */
+    toggleSection(index: number): Promise<void>;
+    /**
+     * Open a specific section
+     */
+    openSection(index: number): Promise<void>;
+    /**
+     * Close a specific section
+     */
+    closeSection(index: number): Promise<void>;
+    /**
+     * Open all sections (respects accordion mode)
+     */
+    openAllSections(): void;
+    /**
+     * Close all sections
+     */
+    closeAllSections(): void;
+    /**
+     * Update a specific section (used by controllers and internal logic)
+     */
+    updateSection(index: number, updates: Partial<CollapseSection>): void;
+    /**
+     * Update multiple sections at once (used by controllers for batch operations)
+     */
+    updateSections(updates: Array<{
+        index: number;
+        updates: Partial<CollapseSection>;
+    }>): void;
+    /**
+     * Handle toggle request from keyboard controller
+     */
+    private handleToggleRequest;
+    /**
+     * Get icon for section state
+     */
+    private getSectionIcon;
+    /**
+     * Check if section is animating
+     */
+    private isSectionAnimating;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Render individual section
+     */
+    private renderSection;
+}
+export {};
+//# sourceMappingURL=collapse.component.d.ts.map