@nuralyui/collapse 0.0.11 → 0.0.12
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 +277 -2
- package/package.json +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: hidden;
|
|
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
|
|
@@ -30,4 +251,58 @@ class p{constructor(e){this.host=e,e.addController(this)}hostConnected(){}hostDi
|
|
|
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))((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
|
|
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>`:e.header}
|
|
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};
|