@nuralyui/collapse 0.0.7 → 0.0.8

package/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: hidden;
+  }
+
+  .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/collapse.style.js.map

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

package/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/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/collapse.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.type.js","sourceRoot":"","sources":["../../../src/components/collapse/collapse.type.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AAEH,YAAY;AACZ,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { TemplateResult } from 'lit';\n\n/**\n * Collapse component types and enums following NuralyUI architecture patterns\n */\n\n// Constants\nexport const EMPTY_STRING = '';\n\n// Enum for collapse sizes\nexport const enum CollapseSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n// Enum for collapse variant types\nexport const enum CollapseVariant {\n  Default = 'default',\n  Bordered = 'bordered',\n  Ghost = 'ghost'\n}\n\n// Enum for animation types\nexport const enum CollapseAnimation {\n  None = 'none',\n  Slide = 'slide',\n  Fade = 'fade'\n}\n\n// Enhanced section interface\nexport interface CollapseSection {\n  /** Unique identifier for the section */\n  id?: string;\n  /** Header content (text, HTML string, or TemplateResult) */\n  header: string | TemplateResult;\n  /** Content to display when expanded - supports plain text, HTML string, or TemplateResult */\n  content: string | TemplateResult;\n  /** Optional slot name for header content (alternative to header property) */\n  headerSlot?: string;\n  /** Optional slot name for content (alternative to content property) */\n  contentSlot?: string;\n  /** Optional content for the right side of the header (icons, menu, badges, etc.) */\n  headerRight?: string | TemplateResult;\n  /** Optional slot name for header right content (alternative to headerRight property) */\n  headerRightSlot?: string;\n  /** Whether the section is initially open */\n  open?: boolean;\n  /** Whether the section can be collapsed/expanded */\n  collapsible?: boolean;\n  /** Whether this section is disabled */\n  disabled?: boolean;\n  /** Custom CSS classes for the section */\n  className?: string;\n  /** Header icon configuration */\n  headerIcon?: string;\n  /** Custom expand/collapse icons */\n  expandIcon?: string;\n  collapseIcon?: string;\n}\n\n// Configuration for accordion behavior\nexport interface CollapseAccordionConfig {\n  /** Whether to allow multiple sections open at once */\n  allowMultiple?: boolean;\n  /** Whether to collapse others when one is opened */\n  collapsible?: boolean;\n}\n\n// Event detail interfaces\nexport interface CollapseSectionToggleEvent {\n  /** Index of the toggled section */\n  index: number;\n  /** Section data */\n  section: CollapseSection;\n  /** Whether the section is now open */\n  isOpen: boolean;\n}\n\nexport interface CollapseBeforeToggleEvent {\n  /** Index of the section about to be toggled */\n  index: number;\n  /** Section data */\n  section: CollapseSection;\n  /** Current open state */\n  isOpen: boolean;\n  /** Function to prevent the toggle */\n  preventDefault: () => void;\n}\n"]}

package/index.d.ts

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

package/index.js

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

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './hy-collapse.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './collapse.component.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/collapse",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "",
     "main": "index.js",
     "type": "module",
@@ -8,5 +8,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.d.ts

@@ -1,4 +1,4 @@
-import { HyCollapse } from './hy-collapse.component.js';
+import { HyCollapse } from './collapse.component.js';
 export declare const HyCollapseComponent: import("@lit-labs/react").ReactWebComponent<HyCollapse, {
     toggle: string;
     change: string;

package/react.js

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

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/collapse/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IACjD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyCollapse } from './hy-collapse.component.js';\n\nexport const HyCollapseComponent = createComponent({\n  tagName: 'hy-collapse',\n  elementClass: HyCollapse,\n  react: React,\n  events: {\n    toggle: 'toggle',\n    change: 'change',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/collapse/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IACjD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyCollapse } from './collapse.component.js';\n\nexport const HyCollapseComponent = createComponent({\n  tagName: 'nr-collapse',\n  elementClass: HyCollapse,\n  react: React,\n  events: {\n    toggle: 'toggle',\n    change: 'change',\n  },\n});\n"]}

package/demo/hy-collapse-demo.d.ts

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-import '../hy-collapse.component';
-import '../../icon/icon.component';
-import '../../select/demo/select-demo';
-export declare class HyCollapseDemo extends LitElement {
-    render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=hy-collapse-demo.d.ts.map

package/demo/hy-collapse-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-collapse-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/collapse/demo/hy-collapse-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,qBACa,cAAe,SAAQ,UAAU;IACnC,MAAM;CAqChB"}

package/demo/hy-collapse-demo.js

@@ -1,55 +0,0 @@
-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;
-};
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '../hy-collapse.component';
-import '../../icon/icon.component';
-import '../../select/demo/select-demo';
-let HyCollapseDemo = class HyCollapseDemo extends LitElement {
-    render() {
-        return html `
-      Default size
-      <hy-collapse
-        .sections=${[
-            {
-                header: 'Section 1',
-                content: html ` <hy-select-demo></hy-select-demo> `,
-                open: false,
-            },
-            { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
-            { header: 'Section 3', content: 'Content for section 3', open: false },
-            { header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true },
-        ]}
-      ></hy-collapse>
-
-      Small size
-      <hy-collapse
-        .size=${'small'}
-        .sections=${[
-            { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
-            { header: 'Section 3', content: 'Content for section 3', open: false },
-            { header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true },
-        ]}
-      ></hy-collapse>
-
-      Large size
-      <hy-collapse
-        .size=${'large'}
-        .sections=${[
-            { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
-            { header: 'Section 3', content: 'Content for section 3', open: false },
-            { header: 'Section 4', content: 'Content for section 4', collapsible: true },
-        ]}
-      ></hy-collapse>
-    `;
-    }
-};
-HyCollapseDemo = __decorate([
-    customElement('hy-collapse-demo')
-], HyCollapseDemo);
-export { HyCollapseDemo };
-//# sourceMappingURL=hy-collapse-demo.js.map

package/demo/hy-collapse-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-collapse-demo.js","sourceRoot":"","sources":["../../../../src/components/collapse/demo/hy-collapse-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAEvC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IACnC,MAAM;QACb,OAAO,IAAI,CAAA;;;oBAGK;YACV;gBACE,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,IAAI,CAAA,qCAAqC;gBAClD,IAAI,EAAE,KAAK;aACZ;YACD,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC;SACvF;;;;;gBAKO,OAAO;oBACH;YACV,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC;SACvF;;;;;gBAKO,OAAO;oBACH;YACV,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,IAAI,EAAC;SAC3E;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtCY,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsC1B;SAtCY,cAAc","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../hy-collapse.component';\nimport '../../icon/icon.component';\nimport '../../select/demo/select-demo';\n@customElement('hy-collapse-demo')\nexport class HyCollapseDemo extends LitElement {\n  override render() {\n    return html`\n      Default size\n      <hy-collapse\n        .sections=${[\n          {\n            header: 'Section 1',\n            content: html` <hy-select-demo></hy-select-demo> `,\n            open: false,\n          },\n          {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n          {header: 'Section 3', content: 'Content for section 3', open: false},\n          {header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true},\n        ]}\n      ></hy-collapse>\n\n      Small size\n      <hy-collapse\n        .size=${'small'}\n        .sections=${[\n          {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n          {header: 'Section 3', content: 'Content for section 3', open: false},\n          {header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true},\n        ]}\n      ></hy-collapse>\n\n      Large size\n      <hy-collapse\n        .size=${'large'}\n        .sections=${[\n          {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n          {header: 'Section 3', content: 'Content for section 3', open: false},\n          {header: 'Section 4', content: 'Content for section 4', collapsible: true},\n        ]}\n      ></hy-collapse>\n    `;\n  }\n}\n"]}

package/hy-collapse.component.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-import { CollapseSize, ISection } from './hy-collapse.type.js';
-export declare class HyCollapse extends LitElement {
-    static styles: import("lit").CSSResult;
-    sections: ISection[];
-    size: CollapseSize;
-    toggleSection(index: number): void;
-    render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=hy-collapse.component.d.ts.map

package/hy-collapse.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-collapse.component.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,YAAY,EAAE,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAI7D,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEP,QAAQ,EAAE,QAAQ,EAAE,CAAM;IACvC,IAAI,eAAwB;IAExC,aAAa,CAAC,KAAK,EAAE,MAAM;IAQlB,MAAM;CAqChB"}

package/hy-collapse.component.js

@@ -1,71 +0,0 @@
-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;
-};
-import { LitElement, html } from 'lit';
-import { styles } from './hy-collapse.style.js';
-import { customElement, property } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
-import { classMap } from 'lit/directives/class-map.js';
-let HyCollapse = class HyCollapse extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sections = [];
-        this.size = "default" /* CollapseSize.Default */;
-    }
-    toggleSection(index) {
-        const section = this.sections[index];
-        if (section.collapsible != false) {
-            this.sections = this.sections.map((section, i) => (i === index ? Object.assign(Object.assign({}, section), { open: !section.open }) : section));
-        }
-        this.dispatchEvent(new CustomEvent('section-toggled', { detail: { index } }));
-    }
-    render() {
-        return html `
-      ${map(this.sections, (section, index) => html `
-          <div
-            class="
-          collapse-section
-          ${classMap({
-            'collapse-small': this.size == "small" /* CollapseSize.Small */,
-            'collapse-large': this.size == "large" /* CollapseSize.Large */,
-        })}
-          "
-          >
-            <hy-label
-              class="
-              header
-              ${classMap({
-            'disabled-header': section.collapsible == false,
-            'collapsed-header': section.open == true,
-            'fold-header': section.open != true
-        })}
-                "
-              @mousedown="${() => this.toggleSection(index)}"
-            >
-              ${html `<hy-icon
-                class="collapse-icon"
-                name="${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}"
-              ></hy-icon>`}
-              ${section.header}
-            </hy-label>
-            ${section.open && section.collapsible != false ? html `<div class="content">${section.content}</div>` : ''}
-          </div>
-        `)}
-    `;
-    }
-};
-HyCollapse.styles = styles;
-__decorate([
-    property({ type: Array })
-], HyCollapse.prototype, "sections", void 0);
-__decorate([
-    property()
-], HyCollapse.prototype, "size", void 0);
-HyCollapse = __decorate([
-    customElement('hy-collapse')
-], HyCollapse);
-export { HyCollapse };
-//# sourceMappingURL=hy-collapse.component.js.map

package/hy-collapse.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG2B,aAAQ,GAAe,EAAE,CAAC;QACvC,SAAI,wCAAwB;IA+C1C,CAAC;IA7CC,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,IAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,GAAG,CACH,IAAI,CAAC,QAAQ,EACb,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;YAIpB,QAAQ,CAAC;YACP,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;YACjD,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;SAClD,CAAC;;;;;;gBAME,QAAQ,CAAC;YACT,iBAAiB,EAAE,OAAO,CAAC,WAAW,IAAI,KAAK;YAC/C,kBAAkB,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;YACxC,aAAa,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;SACpC,CAAC;;4BAEY,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;gBAE3C,IAAI,CAAA;;wBAEI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;0BAC7E;gBACV,OAAO,CAAC,MAAM;;cAEhB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAE5G,CACF;KACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlDiB,iBAAM,GAAG,MAAO,CAAA;AAEP;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;4CAA2B;AACvC;IAAX,QAAQ,EAAE;wCAA6B;AAJ7B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmDtB;SAnDY,UAAU","sourcesContent":["import {LitElement, html} from 'lit';\nimport {styles} from './hy-collapse.style.js';\nimport {customElement, property} from 'lit/decorators.js';\nimport {CollapseSize, ISection} from './hy-collapse.type.js';\nimport {map} from 'lit/directives/map.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('hy-collapse')\nexport class HyCollapse extends LitElement {\n  static override styles = styles;\n\n  @property({type: Array}) sections: ISection[] = [];\n  @property() size = CollapseSize.Default;\n\n  toggleSection(index: number) {\n    const section = this.sections[index];\n    if (section.collapsible != false) {\n      this.sections = this.sections.map((section, i) => (i === index ? {...section, open: !section.open} : section));\n    }\n    this.dispatchEvent(new CustomEvent('section-toggled', {detail: {index}}));\n  }\n\n  override render() {\n    return html`\n      ${map(\n        this.sections,\n        (section, index) => html`\n          <div\n            class=\"\n          collapse-section\n          ${classMap({\n              'collapse-small': this.size == CollapseSize.Small,\n              'collapse-large': this.size == CollapseSize.Large,\n            })}\n          \"\n          >\n            <hy-label\n              class=\"\n              header\n              ${classMap({\n                'disabled-header': section.collapsible == false,\n                'collapsed-header': section.open == true,\n                'fold-header': section.open != true\n              })}\n                \"\n              @mousedown=\"${() => this.toggleSection(index)}\"\n            >\n              ${html`<hy-icon\n                class=\"collapse-icon\"\n                name=\"${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}\"\n              ></hy-icon>`}\n              ${section.header}\n            </hy-label>\n            ${section.open && section.collapsible != false ? html`<div class=\"content\">${section.content}</div>` : ''}\n          </div>\n        `\n      )}\n    `;\n  }\n}\n"]}

package/hy-collapse.style.d.ts

@@ -1,2 +0,0 @@
-export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=hy-collapse.style.d.ts.map

package/hy-collapse.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-collapse.style.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AAwHA,eAAO,MAAM,MAAM,yBAAiB,CAAC"}