@nuralyui/collapse 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +280 -5
- package/collapse.component.d.ts +1 -1
- package/collapse.component.js +1 -1
- package/collapse.component.js.map +1 -1
- package/collapse.style.js +1 -1
- package/collapse.style.js.map +1 -1
- package/collapse.type.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -4,7 +4,228 @@ import{css as e,LitElement as o,html as t,nothing as n}from"lit";import{property
|
|
|
4
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
6
|
*/
|
|
7
|
-
const d=e
|
|
7
|
+
const d=e`
|
|
8
|
+
:host {
|
|
9
|
+
display: block;
|
|
10
|
+
width: 100%;
|
|
11
|
+
|
|
12
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
13
|
+
color: var(--nuraly-color-text);
|
|
14
|
+
background-color: var(--nuraly-color-background);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
18
|
+
:host([data-theme]) {
|
|
19
|
+
color: inherit;
|
|
20
|
+
background-color: inherit;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.collapse-container {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
gap: var(--nuraly-spacing-collapse-gap);
|
|
27
|
+
border: var(--nuraly-color-collapse-border);
|
|
28
|
+
border-radius: var(--nuraly-border-radius-collapse);
|
|
29
|
+
background-color: var(--nuraly-color-collapse-bordered-background);
|
|
30
|
+
overflow: visible;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.collapse-section {
|
|
34
|
+
position: relative;
|
|
35
|
+
border-bottom: 1px solid var(--nuraly-color-collapse-border);
|
|
36
|
+
transition: var(--nuraly-transition-collapse);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.collapse-section:last-child {
|
|
40
|
+
border-bottom: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.collapse-section--disabled {
|
|
44
|
+
opacity: var(--nuraly-opacity-collapse-disabled);
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.collapse-section--non-collapsible .collapse-header {
|
|
49
|
+
cursor: default;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.collapse-section--animating .collapse-content {
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Header Styles */
|
|
57
|
+
.collapse-header {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: space-between;
|
|
61
|
+
padding: var(--nuraly-spacing-collapse-padding);
|
|
62
|
+
background-color: var(--nuraly-color-collapse-header-background);
|
|
63
|
+
color: var(--nuraly-color-collapse-header-text);
|
|
64
|
+
font-weight: var(--nuraly-font-collapse-header-weight);
|
|
65
|
+
font-size: var(--nuraly-font-collapse-header-size);
|
|
66
|
+
line-height: var(--nuraly-font-collapse-header-line-height);
|
|
67
|
+
border: none;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
user-select: none;
|
|
70
|
+
transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
|
|
71
|
+
border-radius: var(--nuraly-border-radius-collapse-header);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.collapse-header--clickable:hover {
|
|
75
|
+
background-color: var(--nuraly-color-collapse-header-background-hover);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.collapse-header--clickable:active {
|
|
79
|
+
background-color: var(--nuraly-color-collapse-header-background-active);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.collapse-header--expanded {
|
|
83
|
+
background-color: var(--nuraly-color-collapse-header-background-expanded);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.collapse-header--disabled {
|
|
87
|
+
color: var(--nuraly-color-collapse-header-text-disabled);
|
|
88
|
+
cursor: not-allowed;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.collapse-header:focus-visible {
|
|
92
|
+
outline: 2px solid var(--nuraly-color-collapse-focus-outline);
|
|
93
|
+
outline-offset: 2px;
|
|
94
|
+
box-shadow: var(--nuraly-shadow-collapse-focus);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.collapse-header-text {
|
|
98
|
+
flex: 1;
|
|
99
|
+
text-align: left;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.collapse-header-right {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: var(--nuraly-spacing-collapse-header-right-gap, 0.5rem);
|
|
106
|
+
margin-left: var(--nuraly-spacing-collapse-header-right-margin, 0.75rem);
|
|
107
|
+
color: var(--nuraly-color-collapse-header-right-text, inherit);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.collapse-header-right > * {
|
|
111
|
+
flex-shrink: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Icon Styles */
|
|
115
|
+
.collapse-icon {
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
width: var(--nuraly-collapse-icon-size);
|
|
120
|
+
height: var(--nuraly-collapse-icon-size);
|
|
121
|
+
color: var(--nuraly-color-collapse-icon);
|
|
122
|
+
transition: var(--nuraly-collapse-icon-transition);
|
|
123
|
+
transform-origin: center;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.collapse-header--disabled .collapse-icon {
|
|
127
|
+
color: var(--nuraly-color-collapse-icon-disabled);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Content Styles */
|
|
131
|
+
.collapse-content {
|
|
132
|
+
background-color: var(--nuraly-color-collapse-content-background);
|
|
133
|
+
border-radius: var(--nuraly-border-radius-collapse-content);
|
|
134
|
+
transition: var(--nuraly-collapse-transition-duration) var(--nuraly-collapse-transition-easing);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.collapse-content-inner {
|
|
138
|
+
padding: var(--nuraly-spacing-collapse-content-padding);
|
|
139
|
+
color: var(--nuraly-color-collapse-content-text);
|
|
140
|
+
font-weight: var(--nuraly-font-collapse-content-weight);
|
|
141
|
+
font-size: var(--nuraly-font-collapse-content-size);
|
|
142
|
+
line-height: var(--nuraly-font-collapse-content-line-height);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Size Variants */
|
|
146
|
+
:host([size="small"]) .collapse-header {
|
|
147
|
+
padding: var(--nuraly-spacing-collapse-small-padding);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:host([size="small"]) .collapse-content-inner {
|
|
151
|
+
padding: var(--nuraly-spacing-collapse-small-content-padding);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:host([size="medium"]) .collapse-header {
|
|
155
|
+
padding: var(--nuraly-spacing-collapse-medium-padding);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([size="medium"]) .collapse-content-inner {
|
|
159
|
+
padding: var(--nuraly-spacing-collapse-medium-content-padding);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:host([size="large"]) .collapse-header {
|
|
163
|
+
padding: var(--nuraly-spacing-collapse-large-padding);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
:host([size="large"]) .collapse-content-inner {
|
|
167
|
+
padding: var(--nuraly-spacing-collapse-large-content-padding);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Variant Styles */
|
|
171
|
+
:host([variant="default"]) .collapse-container {
|
|
172
|
+
background-color: var(--nuraly-color-collapse-content-background);
|
|
173
|
+
border: 1px solid var(--nuraly-color-collapse-border);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:host([variant="bordered"]) .collapse-container {
|
|
177
|
+
background-color: var(--nuraly-color-collapse-bordered-background);
|
|
178
|
+
border: 2px solid var(--nuraly-color-collapse-bordered-border);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
:host([variant="ghost"]) .collapse-container {
|
|
182
|
+
background-color: var(--nuraly-color-collapse-ghost-background);
|
|
183
|
+
border: 1px solid var(--nuraly-color-collapse-ghost-border);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([variant="ghost"]) .collapse-header:hover {
|
|
187
|
+
background-color: var(--nuraly-color-collapse-ghost-hover);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* Accordion Mode */
|
|
191
|
+
:host([accordion]) .collapse-section {
|
|
192
|
+
border-bottom: 1px solid var(--nuraly-color-collapse-border);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* Shadow Variants */
|
|
196
|
+
:host(:not([variant="ghost"])) .collapse-container {
|
|
197
|
+
box-shadow: var(--nuraly-shadow-collapse);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
:host(:not([variant="ghost"])) .collapse-container:hover {
|
|
201
|
+
box-shadow: var(--nuraly-shadow-collapse-hover);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* Accessibility */
|
|
205
|
+
@media (prefers-reduced-motion: reduce) {
|
|
206
|
+
.collapse-header,
|
|
207
|
+
.collapse-icon,
|
|
208
|
+
.collapse-content,
|
|
209
|
+
.collapse-section {
|
|
210
|
+
transition: none;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.collapse-icon--expanded {
|
|
214
|
+
transform: none;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* High Contrast Mode */
|
|
219
|
+
@media (prefers-contrast: high) {
|
|
220
|
+
.collapse-header {
|
|
221
|
+
border: 2px solid var(--nuraly-color-collapse-border-focus);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.collapse-header:focus-visible {
|
|
225
|
+
outline: 3px solid var(--nuraly-color-collapse-focus-outline);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
`;
|
|
8
229
|
/**
|
|
9
230
|
* @license
|
|
10
231
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -15,19 +236,73 @@ const d=e`:host{display:block;width:100%;color:var(--nuraly-color-text);backgrou
|
|
|
15
236
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
16
237
|
* SPDX-License-Identifier: MIT
|
|
17
238
|
*/
|
|
18
|
-
class p{constructor(e){this.host=e,e.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}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((
|
|
239
|
+
class p{constructor(e){this.host=e,e.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}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)}}
|
|
19
240
|
/**
|
|
20
241
|
* @license
|
|
21
242
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
22
243
|
* SPDX-License-Identifier: MIT
|
|
23
|
-
*/var h=function(e,o,t,n){return new(t||(t=Promise))(
|
|
244
|
+
*/var h=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 u extends p{constructor(e){super(e),this.animatingSections=new Set,this.animationDuration=300}animateToggle(e,o){return h(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 h(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.offsetHeight,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 h(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.offsetHeight,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)}}
|
|
24
245
|
/**
|
|
25
246
|
* @license
|
|
26
247
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
27
248
|
* SPDX-License-Identifier: MIT
|
|
28
|
-
*/class v extends p{constructor(e){super(e)}handleSectionToggle(e,o){this.host.accordion&&o&&!this.host.allowMultiple&&this.closeOtherSections(e)}closeOtherSections(e){this.host.sections.forEach((
|
|
249
|
+
*/class v extends p{constructor(e){super(e)}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}}
|
|
29
250
|
/**
|
|
30
251
|
* @license
|
|
31
252
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
32
253
|
* SPDX-License-Identifier: MIT
|
|
33
|
-
*/var g=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},b=function(e,o,t,n){return new(t||(t=Promise))(
|
|
254
|
+
*/var g=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},b=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 y=class extends(l(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.animationController=new u(this),this.accordionController=new v(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 b(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 b(this,void 0,void 0,function*(){const o=this.sections[e];o&&!o.open&&(yield this.toggleSection(e))})}closeSection(e){return b(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`
|
|
255
|
+
<div class="collapse-container ${r({[`collapse-${this.size}`]:!0,[`collapse-${this.variant}`]:!0,"collapse-accordion":this.accordion,"collapse-disabled":this.disabled})}">
|
|
256
|
+
${s(this.sections,(e,o)=>this.renderSection(e,o))}
|
|
257
|
+
</div>
|
|
258
|
+
`}renderSection(e,o){const i=!!e.open,a=this.disabled||e.disabled,l=!1!==e.collapsible,s=this.isSectionAnimating(o);return t`
|
|
259
|
+
<div
|
|
260
|
+
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})}"
|
|
261
|
+
data-section-index="${o}"
|
|
262
|
+
>
|
|
263
|
+
<!-- Section Header -->
|
|
264
|
+
<div
|
|
265
|
+
class="collapse-header ${r({"collapse-header--expanded":i,"collapse-header--disabled":null!=a&&a,"collapse-header--clickable":l&&!a})}"
|
|
266
|
+
data-section-index="${o}"
|
|
267
|
+
role="button"
|
|
268
|
+
tabindex="${l&&!a?"0":"-1"}"
|
|
269
|
+
aria-expanded="${i}"
|
|
270
|
+
aria-controls="collapse-content-${o}"
|
|
271
|
+
aria-disabled="${c(a)}"
|
|
272
|
+
@click="${l&&!a?()=>this.toggleSection(o):n}"
|
|
273
|
+
>
|
|
274
|
+
${l?t`
|
|
275
|
+
<nr-icon
|
|
276
|
+
class="collapse-icon ${r({"collapse-icon--expanded":i})}"
|
|
277
|
+
name="${this.getSectionIcon(e)}"
|
|
278
|
+
aria-hidden="true"
|
|
279
|
+
></nr-icon>
|
|
280
|
+
`:n}
|
|
281
|
+
|
|
282
|
+
<span class="collapse-header-text">
|
|
283
|
+
${e.headerSlot?t`<slot name="${e.headerSlot}"></slot>`:t`<nr-label .size=${this.size}>${e.header}</nr-label>`}
|
|
284
|
+
</span>
|
|
285
|
+
|
|
286
|
+
${e.headerRight||e.headerRightSlot?t`
|
|
287
|
+
<div class="collapse-header-right" @click="${e=>e.stopPropagation()}">
|
|
288
|
+
${e.headerRightSlot?t`<slot name="${e.headerRightSlot}"></slot>`:e.headerRight}
|
|
289
|
+
</div>
|
|
290
|
+
`:n}
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<!-- Section Content -->
|
|
294
|
+
${i?t`
|
|
295
|
+
<div
|
|
296
|
+
id="collapse-content-${o}"
|
|
297
|
+
class="collapse-content"
|
|
298
|
+
data-section-index="${o}"
|
|
299
|
+
role="region"
|
|
300
|
+
aria-labelledby="collapse-header-${o}"
|
|
301
|
+
>
|
|
302
|
+
<div class="collapse-content-inner">
|
|
303
|
+
${e.contentSlot?t`<slot name="${e.contentSlot}"></slot>`:e.content}
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
`:n}
|
|
307
|
+
</div>
|
|
308
|
+
`}};y.styles=d,g([i({type:Array})],y.prototype,"sections",void 0),g([i({type:String})],y.prototype,"size",void 0),g([i({type:String})],y.prototype,"variant",void 0),g([i({type:String})],y.prototype,"animation",void 0),g([i({type:Boolean})],y.prototype,"accordion",void 0),g([i({type:Boolean,attribute:"allow-multiple"})],y.prototype,"allowMultiple",void 0),g([i({type:Boolean})],y.prototype,"disabled",void 0),g([i({type:String,attribute:"expand-icon"})],y.prototype,"expandIcon",void 0),g([i({type:String,attribute:"collapse-icon"})],y.prototype,"collapseIcon",void 0),y=g([a("nr-collapse")],y);export{y as HyCollapse};
|
package/collapse.component.d.ts
CHANGED
|
@@ -83,7 +83,7 @@ export declare class HyCollapse extends HyCollapse_base {
|
|
|
83
83
|
* Check if section is animating
|
|
84
84
|
*/
|
|
85
85
|
private isSectionAnimating;
|
|
86
|
-
render(): import("lit").TemplateResult<1>;
|
|
86
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
87
87
|
/**
|
|
88
88
|
* Render individual section
|
|
89
89
|
*/
|
package/collapse.component.js
CHANGED
|
@@ -259,7 +259,7 @@ let HyCollapse = class HyCollapse extends NuralyUIBaseMixin(LitElement) {
|
|
|
259
259
|
` : nothing}
|
|
260
260
|
|
|
261
261
|
<span class="collapse-header-text">
|
|
262
|
-
${section.headerSlot ? html `<slot name="${section.headerSlot}"></slot>` : section.header}
|
|
262
|
+
${section.headerSlot ? html `<slot name="${section.headerSlot}"></slot>` : html `<nr-label .size=${this.size}>${section.header}</nr-label>`}
|
|
263
263
|
</span>
|
|
264
264
|
|
|
265
265
|
${section.headerRight || section.headerRightSlot ? html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/collapse.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAOL,YAAY,EACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,qBAAqB;AACrB,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC5B,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAA7D;;QAEW,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1C,cAAc;QACN,wBAAmB,GAAG,IAAI,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC5D,wBAAmB,GAAG,IAAI,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAEpE,oBAAoB;QACO,aAAQ,GAAsB,EAAE,CAAC;QAChC,SAAI,sCAAqC;QACzC,YAAO,2CAA4C;QACnD,cAAS,yCAA8C;QACtD,cAAS,GAAG,KAAK,CAAC;QACW,kBAAa,GAAG,KAAK,CAAC;QACnD,aAAQ,GAAG,KAAK,CAAC;QACQ,eAAU,GAAG,eAAe,CAAC;QAC3B,iBAAY,GAAG,cAAc,CAAC;QAqItF;;WAEG;QACK,wBAAmB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;IA8GJ,CAAC;IAvPU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,8CAA8C;QAC9C,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,IAAI,CAAC,mBAAoC,CAAC,CAAC;IAC/F,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,0BAA0B,EAAE,IAAI,CAAC,mBAAoC,CAAC,CAAC;IAClG,CAAC;IAEQ,OAAO,CAAC,iBAAmC;QAClD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChF,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,CAAC;SACjD;IACH,CAAC;IAED;;OAEG;IACG,aAAa,CAAC,KAAa;;YAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,WAAW,KAAK,KAAK,EAAE;gBACjE,OAAO;aACR;YAED,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;YACvC,MAAM,UAAU,GAAG,CAAC,eAAe,CAAC;YAEpC,6CAA6C;YAC7C,MAAM,iBAAiB,GAA2C,IAAI,WAAW,CAA4B,uBAAuB,EAAE;gBACpI,MAAM,EAAE;oBACN,KAAK;oBACL,OAAO;oBACP,MAAM,EAAE,eAAe;oBACvB,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,EAAE;iBACzD;gBACD,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE;gBAC1C,OAAO,CAAC,sBAAsB;aAC/B;YAED,yBAAyB;YACzB,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YAEhE,uBAAuB;YACvB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAEhD,mBAAmB;YACnB,IAAI,IAAI,CAAC,SAAS,wCAA2B,EAAE;gBAC7C,MAAM,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;aACjE;YAED,wBAAwB;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA6B,gBAAgB,EAAE;gBAC/E,MAAM,EAAE;oBACN,KAAK;oBACL,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAC7B,MAAM,EAAE,UAAU;iBACnB;gBACD,OAAO,EAAE,IAAI;aACd,CAAC,CAAC,CAAC;QACN,CAAC;KAAA;IAED;;OAEG;IACG,WAAW,CAAC,KAAa;;YAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;gBAC5B,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aACjC;QACH,CAAC;KAAA;IAED;;OAEG;IACG,YAAY,CAAC,KAAa;;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,EAAE;gBAC3B,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aACjC;QACH,CAAC;KAAA;IAED;;OAEG;IACH,eAAe;QACb,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,KAAa,EAAE,OAAiC;QAC5D,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC9C,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAC/C,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAM,OAAO,GAAK,OAAO,EAAG,CAAC,CAAC,OAAO,CACnD,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,OAAoE;QACjF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;YAC/C,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;YAChD,OAAO,MAAM,CAAC,CAAC,iCAAM,OAAO,GAAK,MAAM,CAAC,OAAO,EAAG,CAAC,CAAC,OAAO,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC;IAUD;;OAEG;IACK,cAAc,CAAC,OAAwB;QAC7C,IAAI,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,YAAY,EAAE;YAC9C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;SACjE;QAED,IAAI,OAAO,CAAC,UAAU,EAAE;YACtB,OAAO,OAAO,CAAC,UAAU,CAAC;SAC3B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;IAC5D,CAAC;IAED;;OAEG;IACK,kBAAkB,CAAC,KAAa;QACtC,OAAO,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC;YACxC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAClC,oBAAoB,EAAE,IAAI,CAAC,SAAS;YACpC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,CAAC;UACE,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;KAE/E,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,OAAwB,EAAE,KAAa;QAC3D,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;QACrD,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,KAAK,KAAK,CAAC;QACpD,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;kCAEmB,QAAQ,CAAC;YACjC,wBAAwB,EAAE,MAAM;YAChC,4BAA4B,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK;YACjD,mCAAmC,EAAE,CAAC,aAAa;YACnD,6BAA6B,EAAE,WAAW;YAC1C,CAAC,OAAO,CAAC,SAAS,IAAI,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS;SACzD,CAAC;8BACoB,KAAK;;;;mCAIA,QAAQ,CAAC;YAChC,2BAA2B,EAAE,MAAM;YACnC,2BAA2B,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK;YAChD,4BAA4B,EAAE,aAAa,IAAI,CAAC,UAAU;SAC3D,CAAC;gCACoB,KAAK;;sBAEf,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;2BACpC,MAAM;4CACW,KAAK;2BACtB,SAAS,CAAC,UAAU,CAAC;oBAC5B,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO;;YAEhF,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA;;qCAEK,QAAQ,CAAC;YAC9B,yBAAyB,EAAE,MAAM;SAClC,CAAC;sBACM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;;;WAGvC,CAAC,CAAC,CAAC,OAAO;;;cAGP,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,UAAU,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM;;;YAGxF,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;yDACR,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;gBAC1E,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,eAAe,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;;WAE1G,CAAC,CAAC,CAAC,OAAO;;;;UAIX,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;mCAEY,KAAK;;kCAEN,KAAK;;+CAEQ,KAAK;;;gBAGpC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,WAAW,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO;;;SAGhG,CAAC,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF,CAAA;AAzQiB,iBAAM,GAAG,MAAO,CAAA;AAQL;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAkC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAA0C;AACzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwD;AACtD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACW;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;iDAAuB;AACnD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AACQ;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAA8B;AAC3B;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDAA+B;AAjB3E,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0QtB;SA1QY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n CollapseSection,\n CollapseSize,\n CollapseVariant,\n CollapseAnimation,\n CollapseSectionToggleEvent,\n CollapseBeforeToggleEvent,\n EMPTY_STRING\n} from './collapse.type.js';\nimport { styles } from './collapse.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n\n// Import controllers\nimport {\n CollapseAnimationController,\n CollapseAccordionController\n} from './controllers/index.js';\n\n/**\n * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.\n * \n * @example\n * ```html\n * <nr-collapse\n * .sections=\"${sections}\"\n * size=\"medium\"\n * variant=\"default\"\n * accordion\n * ></nr-collapse>\n * ```\n * \n * @element nr-collapse\n * @fires section-toggle - Fired when a section is toggled\n * @fires section-before-toggle - Fired before a section is toggled (cancellable)\n */\n@customElement('nr-collapse')\nexport class HyCollapse extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private animationController = new CollapseAnimationController(this);\n private accordionController = new CollapseAccordionController(this);\n\n // Public properties\n @property({ type: Array }) sections: CollapseSection[] = [];\n @property({ type: String }) size: CollapseSize = CollapseSize.Medium;\n @property({ type: String }) variant: CollapseVariant = CollapseVariant.Default;\n @property({ type: String }) animation: CollapseAnimation = CollapseAnimation.Slide;\n @property({ type: Boolean }) accordion = false;\n @property({ type: Boolean, attribute: 'allow-multiple' }) allowMultiple = false;\n @property({ type: Boolean }) disabled = false;\n @property({ type: String, attribute: 'expand-icon' }) expandIcon = 'chevron-right';\n @property({ type: String, attribute: 'collapse-icon' }) collapseIcon = 'chevron-down';\n\n override connectedCallback(): void {\n super.connectedCallback();\n \n // Listen for internal events from controllers\n this.addEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n }\n\n override updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n \n if (changedProperties.has('accordion') || changedProperties.has('allowMultiple')) {\n this.accordionController.enforceAccordionMode();\n }\n }\n\n /**\n * Toggle a section by index\n */\n async toggleSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (!section || section.disabled || section.collapsible === false) {\n return;\n }\n\n const isCurrentlyOpen = !!section.open;\n const willBeOpen = !isCurrentlyOpen;\n\n // Dispatch before-toggle event (cancellable)\n const beforeToggleEvent: CustomEvent<CollapseBeforeToggleEvent> = new CustomEvent<CollapseBeforeToggleEvent>('section-before-toggle', {\n detail: {\n index,\n section,\n isOpen: isCurrentlyOpen,\n preventDefault: () => beforeToggleEvent.preventDefault()\n },\n cancelable: true,\n bubbles: true\n });\n\n if (!this.dispatchEvent(beforeToggleEvent)) {\n return; // Event was cancelled\n }\n\n // Handle accordion logic\n this.accordionController.handleSectionToggle(index, willBeOpen);\n\n // Update section state\n this.updateSection(index, { open: willBeOpen });\n\n // Handle animation\n if (this.animation !== CollapseAnimation.None) {\n await this.animationController.animateToggle(index, willBeOpen);\n }\n\n // Dispatch toggle event\n this.dispatchEvent(new CustomEvent<CollapseSectionToggleEvent>('section-toggle', {\n detail: {\n index,\n section: this.sections[index],\n isOpen: willBeOpen\n },\n bubbles: true\n }));\n }\n\n /**\n * Open a specific section\n */\n async openSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (section && !section.open) {\n await this.toggleSection(index);\n }\n }\n\n /**\n * Close a specific section\n */\n async closeSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (section && section.open) {\n await this.toggleSection(index);\n }\n }\n\n /**\n * Open all sections (respects accordion mode)\n */\n openAllSections(): void {\n this.accordionController.openAllSections();\n }\n\n /**\n * Close all sections\n */\n closeAllSections(): void {\n this.accordionController.closeAllSections();\n }\n\n /**\n * Update a specific section (used by controllers and internal logic)\n */\n updateSection(index: number, updates: Partial<CollapseSection>): void {\n if (index < 0 || index >= this.sections.length) {\n return;\n }\n \n this.sections = this.sections.map((section, i) => \n i === index ? { ...section, ...updates } : section\n );\n }\n\n /**\n * Update multiple sections at once (used by controllers for batch operations)\n */\n updateSections(updates: Array<{ index: number; updates: Partial<CollapseSection> }>): void {\n if (updates.length === 0) {\n return;\n }\n \n this.sections = this.sections.map((section, i) => {\n const update = updates.find(u => u.index === i);\n return update ? { ...section, ...update.updates } : section;\n });\n }\n\n /**\n * Handle toggle request from keyboard controller\n */\n private handleToggleRequest = (event: CustomEvent): void => {\n const { index } = event.detail;\n this.toggleSection(index);\n };\n\n /**\n * Get icon for section state\n */\n private getSectionIcon(section: CollapseSection): string {\n if (section.expandIcon && section.collapseIcon) {\n return section.open ? section.collapseIcon : section.expandIcon;\n }\n \n if (section.headerIcon) {\n return section.headerIcon;\n }\n\n return section.open ? this.collapseIcon : this.expandIcon;\n }\n\n /**\n * Check if section is animating\n */\n private isSectionAnimating(index: number): boolean {\n return this.animationController.isAnimating(index);\n }\n\n override render() {\n return html`\n <div class=\"collapse-container ${classMap({\n [`collapse-${this.size}`]: true,\n [`collapse-${this.variant}`]: true,\n 'collapse-accordion': this.accordion,\n 'collapse-disabled': this.disabled\n })}\">\n ${map(this.sections, (section, index) => this.renderSection(section, index))}\n </div>\n `;\n }\n\n /**\n * Render individual section\n */\n private renderSection(section: CollapseSection, index: number) {\n const isOpen = !!section.open;\n const isDisabled = this.disabled || section.disabled;\n const isCollapsible = section.collapsible !== false;\n const isAnimating = this.isSectionAnimating(index);\n\n return html`\n <div \n class=\"collapse-section ${classMap({\n 'collapse-section--open': isOpen,\n 'collapse-section--disabled': isDisabled ?? false,\n 'collapse-section--non-collapsible': !isCollapsible,\n 'collapse-section--animating': isAnimating,\n [section.className || EMPTY_STRING]: !!section.className\n })}\"\n data-section-index=\"${index}\"\n >\n <!-- Section Header -->\n <div\n class=\"collapse-header ${classMap({\n 'collapse-header--expanded': isOpen,\n 'collapse-header--disabled': isDisabled ?? false,\n 'collapse-header--clickable': isCollapsible && !isDisabled\n })}\"\n data-section-index=\"${index}\"\n role=\"button\"\n tabindex=\"${isCollapsible && !isDisabled ? '0' : '-1'}\"\n aria-expanded=\"${isOpen}\"\n aria-controls=\"collapse-content-${index}\"\n aria-disabled=\"${ifDefined(isDisabled)}\"\n @click=\"${isCollapsible && !isDisabled ? () => this.toggleSection(index) : nothing}\"\n >\n ${isCollapsible ? html`\n <nr-icon\n class=\"collapse-icon ${classMap({\n 'collapse-icon--expanded': isOpen\n })}\"\n name=\"${this.getSectionIcon(section)}\"\n aria-hidden=\"true\"\n ></nr-icon>\n ` : nothing}\n \n <span class=\"collapse-header-text\">\n ${section.headerSlot ? html`<slot name=\"${section.headerSlot}\"></slot>` : section.header}\n </span>\n\n ${section.headerRight || section.headerRightSlot ? html`\n <div class=\"collapse-header-right\" @click=\"${(e: Event) => e.stopPropagation()}\">\n ${section.headerRightSlot ? html`<slot name=\"${section.headerRightSlot}\"></slot>` : section.headerRight}\n </div>\n ` : nothing}\n </div>\n\n <!-- Section Content -->\n ${isOpen ? html`\n <div\n id=\"collapse-content-${index}\"\n class=\"collapse-content\"\n data-section-index=\"${index}\"\n role=\"region\"\n aria-labelledby=\"collapse-header-${index}\"\n >\n <div class=\"collapse-content-inner\">\n ${section.contentSlot ? html`<slot name=\"${section.contentSlot}\"></slot>` : section.content}\n </div>\n </div>\n ` : nothing}\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"collapse.component.js","sourceRoot":"","sources":["../../../../src/components/collapse/collapse.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAOL,YAAY,EACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,qBAAqB;AACrB,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC5B,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAA7D;;QAEW,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1C,cAAc;QACN,wBAAmB,GAAG,IAAI,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAC5D,wBAAmB,GAAG,IAAI,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAEpE,oBAAoB;QACO,aAAQ,GAAsB,EAAE,CAAC;QAChC,SAAI,sCAAqC;QACzC,YAAO,2CAA4C;QACnD,cAAS,yCAA8C;QACtD,cAAS,GAAG,KAAK,CAAC;QACW,kBAAa,GAAG,KAAK,CAAC;QACnD,aAAQ,GAAG,KAAK,CAAC;QACQ,eAAU,GAAG,eAAe,CAAC;QAC3B,iBAAY,GAAG,cAAc,CAAC;QAqItF;;WAEG;QACK,wBAAmB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;IA8GJ,CAAC;IAvPU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,8CAA8C;QAC9C,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,IAAI,CAAC,mBAAoC,CAAC,CAAC;IAC/F,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,0BAA0B,EAAE,IAAI,CAAC,mBAAoC,CAAC,CAAC;IAClG,CAAC;IAEQ,OAAO,CAAC,iBAAmC;QAClD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChF,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,CAAC;SACjD;IACH,CAAC;IAED;;OAEG;IACG,aAAa,CAAC,KAAa;;YAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,WAAW,KAAK,KAAK,EAAE;gBACjE,OAAO;aACR;YAED,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;YACvC,MAAM,UAAU,GAAG,CAAC,eAAe,CAAC;YAEpC,6CAA6C;YAC7C,MAAM,iBAAiB,GAA2C,IAAI,WAAW,CAA4B,uBAAuB,EAAE;gBACpI,MAAM,EAAE;oBACN,KAAK;oBACL,OAAO;oBACP,MAAM,EAAE,eAAe;oBACvB,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,EAAE;iBACzD;gBACD,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE;gBAC1C,OAAO,CAAC,sBAAsB;aAC/B;YAED,yBAAyB;YACzB,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YAEhE,uBAAuB;YACvB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAEhD,mBAAmB;YACnB,IAAI,IAAI,CAAC,SAAS,wCAA2B,EAAE;gBAC7C,MAAM,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;aACjE;YAED,wBAAwB;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA6B,gBAAgB,EAAE;gBAC/E,MAAM,EAAE;oBACN,KAAK;oBACL,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAC7B,MAAM,EAAE,UAAU;iBACnB;gBACD,OAAO,EAAE,IAAI;aACd,CAAC,CAAC,CAAC;QACN,CAAC;KAAA;IAED;;OAEG;IACG,WAAW,CAAC,KAAa;;YAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;gBAC5B,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aACjC;QACH,CAAC;KAAA;IAED;;OAEG;IACG,YAAY,CAAC,KAAa;;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,EAAE;gBAC3B,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aACjC;QACH,CAAC;KAAA;IAED;;OAEG;IACH,eAAe;QACb,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,KAAa,EAAE,OAAiC;QAC5D,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC9C,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAC/C,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAM,OAAO,GAAK,OAAO,EAAG,CAAC,CAAC,OAAO,CACnD,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,OAAoE;QACjF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;YAC/C,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;YAChD,OAAO,MAAM,CAAC,CAAC,iCAAM,OAAO,GAAK,MAAM,CAAC,OAAO,EAAG,CAAC,CAAC,OAAO,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC;IAUD;;OAEG;IACK,cAAc,CAAC,OAAwB;QAC7C,IAAI,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,YAAY,EAAE;YAC9C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;SACjE;QAED,IAAI,OAAO,CAAC,UAAU,EAAE;YACtB,OAAO,OAAO,CAAC,UAAU,CAAC;SAC3B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;IAC5D,CAAC;IAED;;OAEG;IACK,kBAAkB,CAAC,KAAa;QACtC,OAAO,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;uCACwB,QAAQ,CAAC;YACxC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAClC,oBAAoB,EAAE,IAAI,CAAC,SAAS;YACpC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,CAAC;UACE,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;KAE/E,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa,CAAC,OAAwB,EAAE,KAAa;QAC3D,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC;QACrD,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,KAAK,KAAK,CAAC;QACpD,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;kCAEmB,QAAQ,CAAC;YACjC,wBAAwB,EAAE,MAAM;YAChC,4BAA4B,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK;YACjD,mCAAmC,EAAE,CAAC,aAAa;YACnD,6BAA6B,EAAE,WAAW;YAC1C,CAAC,OAAO,CAAC,SAAS,IAAI,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS;SACzD,CAAC;8BACoB,KAAK;;;;mCAIA,QAAQ,CAAC;YAChC,2BAA2B,EAAE,MAAM;YACnC,2BAA2B,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK;YAChD,4BAA4B,EAAE,aAAa,IAAI,CAAC,UAAU;SAC3D,CAAC;gCACoB,KAAK;;sBAEf,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;2BACpC,MAAM;4CACW,KAAK;2BACtB,SAAS,CAAC,UAAU,CAAC;oBAC5B,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO;;YAEhF,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA;;qCAEK,QAAQ,CAAC;YAC9B,yBAAyB,EAAE,MAAM;SAClC,CAAC;sBACM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;;;WAGvC,CAAC,CAAC,CAAC,OAAO;;;cAGP,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,UAAU,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,MAAM,aAAa;;;YAGzI,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;yDACR,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;gBAC1E,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,eAAe,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;;WAE1G,CAAC,CAAC,CAAC,OAAO;;;;UAIX,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;mCAEY,KAAK;;kCAEN,KAAK;;+CAEQ,KAAK;;;gBAGpC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,WAAW,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO;;;SAGhG,CAAC,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF,CAAA;AAzQiB,iBAAM,GAAG,MAAO,CAAA;AAQL;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAkC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAA0C;AACzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AACnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwD;AACtD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACW;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;iDAAuB;AACnD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AACQ;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAA8B;AAC3B;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDAA+B;AAjB3E,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0QtB;SA1QY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n CollapseSection,\n CollapseSize,\n CollapseVariant,\n CollapseAnimation,\n CollapseSectionToggleEvent,\n CollapseBeforeToggleEvent,\n EMPTY_STRING\n} from './collapse.type.js';\nimport { styles } from './collapse.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n\n// Import controllers\nimport {\n CollapseAnimationController,\n CollapseAccordionController\n} from './controllers/index.js';\n\n/**\n * Versatile collapse/accordion component with multiple variants, animations, and accessibility features.\n * \n * @example\n * ```html\n * <nr-collapse\n * .sections=\"${sections}\"\n * size=\"medium\"\n * variant=\"default\"\n * accordion\n * ></nr-collapse>\n * ```\n * \n * @element nr-collapse\n * @fires section-toggle - Fired when a section is toggled\n * @fires section-before-toggle - Fired before a section is toggled (cancellable)\n */\n@customElement('nr-collapse')\nexport class HyCollapse extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private animationController = new CollapseAnimationController(this);\n private accordionController = new CollapseAccordionController(this);\n\n // Public properties\n @property({ type: Array }) sections: CollapseSection[] = [];\n @property({ type: String }) size: CollapseSize = CollapseSize.Medium;\n @property({ type: String }) variant: CollapseVariant = CollapseVariant.Default;\n @property({ type: String }) animation: CollapseAnimation = CollapseAnimation.Slide;\n @property({ type: Boolean }) accordion = false;\n @property({ type: Boolean, attribute: 'allow-multiple' }) allowMultiple = false;\n @property({ type: Boolean }) disabled = false;\n @property({ type: String, attribute: 'expand-icon' }) expandIcon = 'chevron-right';\n @property({ type: String, attribute: 'collapse-icon' }) collapseIcon = 'chevron-down';\n\n override connectedCallback(): void {\n super.connectedCallback();\n \n // Listen for internal events from controllers\n this.addEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('section-toggle-requested', this.handleToggleRequest as EventListener);\n }\n\n override updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n \n if (changedProperties.has('accordion') || changedProperties.has('allowMultiple')) {\n this.accordionController.enforceAccordionMode();\n }\n }\n\n /**\n * Toggle a section by index\n */\n async toggleSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (!section || section.disabled || section.collapsible === false) {\n return;\n }\n\n const isCurrentlyOpen = !!section.open;\n const willBeOpen = !isCurrentlyOpen;\n\n // Dispatch before-toggle event (cancellable)\n const beforeToggleEvent: CustomEvent<CollapseBeforeToggleEvent> = new CustomEvent<CollapseBeforeToggleEvent>('section-before-toggle', {\n detail: {\n index,\n section,\n isOpen: isCurrentlyOpen,\n preventDefault: () => beforeToggleEvent.preventDefault()\n },\n cancelable: true,\n bubbles: true\n });\n\n if (!this.dispatchEvent(beforeToggleEvent)) {\n return; // Event was cancelled\n }\n\n // Handle accordion logic\n this.accordionController.handleSectionToggle(index, willBeOpen);\n\n // Update section state\n this.updateSection(index, { open: willBeOpen });\n\n // Handle animation\n if (this.animation !== CollapseAnimation.None) {\n await this.animationController.animateToggle(index, willBeOpen);\n }\n\n // Dispatch toggle event\n this.dispatchEvent(new CustomEvent<CollapseSectionToggleEvent>('section-toggle', {\n detail: {\n index,\n section: this.sections[index],\n isOpen: willBeOpen\n },\n bubbles: true\n }));\n }\n\n /**\n * Open a specific section\n */\n async openSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (section && !section.open) {\n await this.toggleSection(index);\n }\n }\n\n /**\n * Close a specific section\n */\n async closeSection(index: number): Promise<void> {\n const section = this.sections[index];\n if (section && section.open) {\n await this.toggleSection(index);\n }\n }\n\n /**\n * Open all sections (respects accordion mode)\n */\n openAllSections(): void {\n this.accordionController.openAllSections();\n }\n\n /**\n * Close all sections\n */\n closeAllSections(): void {\n this.accordionController.closeAllSections();\n }\n\n /**\n * Update a specific section (used by controllers and internal logic)\n */\n updateSection(index: number, updates: Partial<CollapseSection>): void {\n if (index < 0 || index >= this.sections.length) {\n return;\n }\n \n this.sections = this.sections.map((section, i) => \n i === index ? { ...section, ...updates } : section\n );\n }\n\n /**\n * Update multiple sections at once (used by controllers for batch operations)\n */\n updateSections(updates: Array<{ index: number; updates: Partial<CollapseSection> }>): void {\n if (updates.length === 0) {\n return;\n }\n \n this.sections = this.sections.map((section, i) => {\n const update = updates.find(u => u.index === i);\n return update ? { ...section, ...update.updates } : section;\n });\n }\n\n /**\n * Handle toggle request from keyboard controller\n */\n private handleToggleRequest = (event: CustomEvent): void => {\n const { index } = event.detail;\n this.toggleSection(index);\n };\n\n /**\n * Get icon for section state\n */\n private getSectionIcon(section: CollapseSection): string {\n if (section.expandIcon && section.collapseIcon) {\n return section.open ? section.collapseIcon : section.expandIcon;\n }\n \n if (section.headerIcon) {\n return section.headerIcon;\n }\n\n return section.open ? this.collapseIcon : this.expandIcon;\n }\n\n /**\n * Check if section is animating\n */\n private isSectionAnimating(index: number): boolean {\n return this.animationController.isAnimating(index);\n }\n\n override render() {\n return html`\n <div class=\"collapse-container ${classMap({\n [`collapse-${this.size}`]: true,\n [`collapse-${this.variant}`]: true,\n 'collapse-accordion': this.accordion,\n 'collapse-disabled': this.disabled\n })}\">\n ${map(this.sections, (section, index) => this.renderSection(section, index))}\n </div>\n `;\n }\n\n /**\n * Render individual section\n */\n private renderSection(section: CollapseSection, index: number) {\n const isOpen = !!section.open;\n const isDisabled = this.disabled || section.disabled;\n const isCollapsible = section.collapsible !== false;\n const isAnimating = this.isSectionAnimating(index);\n\n return html`\n <div \n class=\"collapse-section ${classMap({\n 'collapse-section--open': isOpen,\n 'collapse-section--disabled': isDisabled ?? false,\n 'collapse-section--non-collapsible': !isCollapsible,\n 'collapse-section--animating': isAnimating,\n [section.className || EMPTY_STRING]: !!section.className\n })}\"\n data-section-index=\"${index}\"\n >\n <!-- Section Header -->\n <div\n class=\"collapse-header ${classMap({\n 'collapse-header--expanded': isOpen,\n 'collapse-header--disabled': isDisabled ?? false,\n 'collapse-header--clickable': isCollapsible && !isDisabled\n })}\"\n data-section-index=\"${index}\"\n role=\"button\"\n tabindex=\"${isCollapsible && !isDisabled ? '0' : '-1'}\"\n aria-expanded=\"${isOpen}\"\n aria-controls=\"collapse-content-${index}\"\n aria-disabled=\"${ifDefined(isDisabled)}\"\n @click=\"${isCollapsible && !isDisabled ? () => this.toggleSection(index) : nothing}\"\n >\n ${isCollapsible ? html`\n <nr-icon\n class=\"collapse-icon ${classMap({\n 'collapse-icon--expanded': isOpen\n })}\"\n name=\"${this.getSectionIcon(section)}\"\n aria-hidden=\"true\"\n ></nr-icon>\n ` : nothing}\n \n <span class=\"collapse-header-text\">\n ${section.headerSlot ? html`<slot name=\"${section.headerSlot}\"></slot>` : html`<nr-label .size=${this.size}>${section.header}</nr-label>`}\n </span>\n\n ${section.headerRight || section.headerRightSlot ? html`\n <div class=\"collapse-header-right\" @click=\"${(e: Event) => e.stopPropagation()}\">\n ${section.headerRightSlot ? html`<slot name=\"${section.headerRightSlot}\"></slot>` : section.headerRight}\n </div>\n ` : nothing}\n </div>\n\n <!-- Section Content -->\n ${isOpen ? html`\n <div\n id=\"collapse-content-${index}\"\n class=\"collapse-content\"\n data-section-index=\"${index}\"\n role=\"region\"\n aria-labelledby=\"collapse-header-${index}\"\n >\n <div class=\"collapse-content-inner\">\n ${section.contentSlot ? html`<slot name=\"${section.contentSlot}\"></slot>` : section.content}\n </div>\n </div>\n ` : nothing}\n </div>\n `;\n }\n}\n"]}
|
package/collapse.style.js
CHANGED
|
@@ -31,7 +31,7 @@ export const styles = css `
|
|
|
31
31
|
border: var(--nuraly-color-collapse-border);
|
|
32
32
|
border-radius: var(--nuraly-border-radius-collapse);
|
|
33
33
|
background-color: var(--nuraly-color-collapse-bordered-background);
|
|
34
|
-
overflow:
|
|
34
|
+
overflow: visible;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.collapse-section {
|
package/collapse.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.style.js","sourceRoot":"","sources":["
|
|
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: visible;\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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.type.js","sourceRoot":"","sources":["
|
|
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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"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
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
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,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"]}
|