scb-wc 0.1.82 → 0.1.84
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/icons.json +178 -178
- package/mvc/components/scb-collapse/scb-collapse.js +6 -7
- package/mvc/scb-logo.svg +20 -20
- package/mvc/scb.svg +13 -13
- package/package.json +2 -2
- package/scb-collapse/scb-collapse.js +4 -11
- package/scb-wc.bundle.js +4 -11
package/icons.json
CHANGED
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
[
|
|
2
|
-
"add",
|
|
3
|
-
"remove",
|
|
4
|
-
"add_circle",
|
|
5
|
-
"remove_circle",
|
|
6
|
-
"expand_more",
|
|
7
|
-
"expand_less",
|
|
8
|
-
"chevron_right",
|
|
9
|
-
"chevron_left",
|
|
10
|
-
"unfold_more",
|
|
11
|
-
"unfold_less",
|
|
12
|
-
"info",
|
|
13
|
-
"warning",
|
|
14
|
-
"menu",
|
|
15
|
-
"code",
|
|
16
|
-
"more_horiz",
|
|
17
|
-
"more_vert",
|
|
18
|
-
"check_circle",
|
|
19
|
-
"check",
|
|
20
|
-
"check_small",
|
|
21
|
-
"close",
|
|
22
|
-
"border_color",
|
|
23
|
-
"error",
|
|
24
|
-
"edit",
|
|
25
|
-
"edit_square",
|
|
26
|
-
"refresh",
|
|
27
|
-
"print",
|
|
28
|
-
"group",
|
|
29
|
-
"person_add",
|
|
30
|
-
"person",
|
|
31
|
-
"download",
|
|
32
|
-
"mobile_arrow_down",
|
|
33
|
-
"upload",
|
|
34
|
-
"mail",
|
|
35
|
-
"calendar_month",
|
|
36
|
-
"calendar_today",
|
|
37
|
-
"volume_up",
|
|
38
|
-
"description",
|
|
39
|
-
"folder",
|
|
40
|
-
"play_arrow",
|
|
41
|
-
"grain",
|
|
42
|
-
"check_box",
|
|
43
|
-
"help",
|
|
44
|
-
"check_box_outline_blank",
|
|
45
|
-
"indeterminate_check_box",
|
|
46
|
-
"radio_button_checked",
|
|
47
|
-
"radio_button_unchecked",
|
|
48
|
-
"face",
|
|
49
|
-
"male",
|
|
50
|
-
"female",
|
|
51
|
-
"grid_on",
|
|
52
|
-
"label",
|
|
53
|
-
"delete",
|
|
54
|
-
"pin",
|
|
55
|
-
"location_on",
|
|
56
|
-
"straighten",
|
|
57
|
-
"compare_arrows",
|
|
58
|
-
"swap_horiz",
|
|
59
|
-
"filter_vintage",
|
|
60
|
-
"deceased",
|
|
61
|
-
"apartment",
|
|
62
|
-
"eco",
|
|
63
|
-
"texture",
|
|
64
|
-
"table_chart",
|
|
65
|
-
"bar_chart",
|
|
66
|
-
"bid_landscape",
|
|
67
|
-
"show_chart",
|
|
68
|
-
"ssid_chart",
|
|
69
|
-
"bubble_chart",
|
|
70
|
-
"touch_app",
|
|
71
|
-
"near_me",
|
|
72
|
-
"toggle_off",
|
|
73
|
-
"toggle_on",
|
|
74
|
-
"cancel",
|
|
75
|
-
"book",
|
|
76
|
-
"public",
|
|
77
|
-
"style",
|
|
78
|
-
"restore",
|
|
79
|
-
"payment",
|
|
80
|
-
"shopping_cart",
|
|
81
|
-
"list",
|
|
82
|
-
"ballot",
|
|
83
|
-
"list_alt",
|
|
84
|
-
"view_list",
|
|
85
|
-
"format_list_bulleted",
|
|
86
|
-
"database",
|
|
87
|
-
"database_search",
|
|
88
|
-
"data_table",
|
|
89
|
-
"share",
|
|
90
|
-
"home",
|
|
91
|
-
"arrow_back",
|
|
92
|
-
"arrow_forward",
|
|
93
|
-
"arrow_upward",
|
|
94
|
-
"arrow_downward",
|
|
95
|
-
"arrow_outward",
|
|
96
|
-
"call_made",
|
|
97
|
-
"arrow_back_ios",
|
|
98
|
-
"arrow_forward_ios",
|
|
99
|
-
"favorite",
|
|
100
|
-
"filter_list",
|
|
101
|
-
"sort",
|
|
102
|
-
"view_module",
|
|
103
|
-
"hearing",
|
|
104
|
-
"event_note",
|
|
105
|
-
"image",
|
|
106
|
-
"language",
|
|
107
|
-
"repeat",
|
|
108
|
-
"insert_chart",
|
|
109
|
-
"insert_chart_filled",
|
|
110
|
-
"leaderboard",
|
|
111
|
-
"article",
|
|
112
|
-
"reorder",
|
|
113
|
-
"subject",
|
|
114
|
-
"visibility",
|
|
115
|
-
"visibility_off",
|
|
116
|
-
"arrow_right",
|
|
117
|
-
"arrow_drop_down",
|
|
118
|
-
"tune",
|
|
119
|
-
"settings",
|
|
120
|
-
"manufacturing",
|
|
121
|
-
"preview",
|
|
122
|
-
"mic",
|
|
123
|
-
"laptop_windows",
|
|
124
|
-
"mobile",
|
|
125
|
-
"tablet",
|
|
126
|
-
"table",
|
|
127
|
-
"sell",
|
|
128
|
-
"shoppingmode",
|
|
129
|
-
"lightbulb",
|
|
130
|
-
"content_copy",
|
|
131
|
-
"colors",
|
|
132
|
-
"link",
|
|
133
|
-
"format_bold",
|
|
134
|
-
"format_color_text",
|
|
135
|
-
"format_align_left",
|
|
136
|
-
"fiber_manual_record",
|
|
137
|
-
"breaking_news",
|
|
138
|
-
"release_alert",
|
|
139
|
-
"person_play",
|
|
140
|
-
"comment",
|
|
141
|
-
"mode_comment",
|
|
142
|
-
"fullscreen",
|
|
143
|
-
"fullscreen_exit",
|
|
144
|
-
"filter_alt",
|
|
145
|
-
"open_in_new",
|
|
146
|
-
"search",
|
|
147
|
-
"support",
|
|
148
|
-
"location_searching",
|
|
149
|
-
"explore",
|
|
150
|
-
"assistant_direction",
|
|
151
|
-
"mouse",
|
|
152
|
-
"thumb_up",
|
|
153
|
-
"checklist",
|
|
154
|
-
"progress_activity",
|
|
155
|
-
"reply",
|
|
156
|
-
"percent",
|
|
157
|
-
"space_bar",
|
|
158
|
-
"graph_7",
|
|
159
|
-
"verified",
|
|
160
|
-
"deployed_code",
|
|
161
|
-
"build",
|
|
162
|
-
"code_blocks",
|
|
163
|
-
"inventory",
|
|
164
|
-
"save",
|
|
165
|
-
"data_info_alert",
|
|
166
|
-
"auto_stories",
|
|
167
|
-
"menu_book",
|
|
168
|
-
"book_2",
|
|
169
|
-
"import_contacts",
|
|
170
|
-
"nature",
|
|
171
|
-
"spa",
|
|
172
|
-
"contact_support",
|
|
173
|
-
"work",
|
|
174
|
-
"person_4",
|
|
175
|
-
"price_change",
|
|
176
|
-
"keyboard_arrow_down",
|
|
177
|
-
"keyboard_arrow_up"
|
|
178
|
-
]
|
|
1
|
+
[
|
|
2
|
+
"add",
|
|
3
|
+
"remove",
|
|
4
|
+
"add_circle",
|
|
5
|
+
"remove_circle",
|
|
6
|
+
"expand_more",
|
|
7
|
+
"expand_less",
|
|
8
|
+
"chevron_right",
|
|
9
|
+
"chevron_left",
|
|
10
|
+
"unfold_more",
|
|
11
|
+
"unfold_less",
|
|
12
|
+
"info",
|
|
13
|
+
"warning",
|
|
14
|
+
"menu",
|
|
15
|
+
"code",
|
|
16
|
+
"more_horiz",
|
|
17
|
+
"more_vert",
|
|
18
|
+
"check_circle",
|
|
19
|
+
"check",
|
|
20
|
+
"check_small",
|
|
21
|
+
"close",
|
|
22
|
+
"border_color",
|
|
23
|
+
"error",
|
|
24
|
+
"edit",
|
|
25
|
+
"edit_square",
|
|
26
|
+
"refresh",
|
|
27
|
+
"print",
|
|
28
|
+
"group",
|
|
29
|
+
"person_add",
|
|
30
|
+
"person",
|
|
31
|
+
"download",
|
|
32
|
+
"mobile_arrow_down",
|
|
33
|
+
"upload",
|
|
34
|
+
"mail",
|
|
35
|
+
"calendar_month",
|
|
36
|
+
"calendar_today",
|
|
37
|
+
"volume_up",
|
|
38
|
+
"description",
|
|
39
|
+
"folder",
|
|
40
|
+
"play_arrow",
|
|
41
|
+
"grain",
|
|
42
|
+
"check_box",
|
|
43
|
+
"help",
|
|
44
|
+
"check_box_outline_blank",
|
|
45
|
+
"indeterminate_check_box",
|
|
46
|
+
"radio_button_checked",
|
|
47
|
+
"radio_button_unchecked",
|
|
48
|
+
"face",
|
|
49
|
+
"male",
|
|
50
|
+
"female",
|
|
51
|
+
"grid_on",
|
|
52
|
+
"label",
|
|
53
|
+
"delete",
|
|
54
|
+
"pin",
|
|
55
|
+
"location_on",
|
|
56
|
+
"straighten",
|
|
57
|
+
"compare_arrows",
|
|
58
|
+
"swap_horiz",
|
|
59
|
+
"filter_vintage",
|
|
60
|
+
"deceased",
|
|
61
|
+
"apartment",
|
|
62
|
+
"eco",
|
|
63
|
+
"texture",
|
|
64
|
+
"table_chart",
|
|
65
|
+
"bar_chart",
|
|
66
|
+
"bid_landscape",
|
|
67
|
+
"show_chart",
|
|
68
|
+
"ssid_chart",
|
|
69
|
+
"bubble_chart",
|
|
70
|
+
"touch_app",
|
|
71
|
+
"near_me",
|
|
72
|
+
"toggle_off",
|
|
73
|
+
"toggle_on",
|
|
74
|
+
"cancel",
|
|
75
|
+
"book",
|
|
76
|
+
"public",
|
|
77
|
+
"style",
|
|
78
|
+
"restore",
|
|
79
|
+
"payment",
|
|
80
|
+
"shopping_cart",
|
|
81
|
+
"list",
|
|
82
|
+
"ballot",
|
|
83
|
+
"list_alt",
|
|
84
|
+
"view_list",
|
|
85
|
+
"format_list_bulleted",
|
|
86
|
+
"database",
|
|
87
|
+
"database_search",
|
|
88
|
+
"data_table",
|
|
89
|
+
"share",
|
|
90
|
+
"home",
|
|
91
|
+
"arrow_back",
|
|
92
|
+
"arrow_forward",
|
|
93
|
+
"arrow_upward",
|
|
94
|
+
"arrow_downward",
|
|
95
|
+
"arrow_outward",
|
|
96
|
+
"call_made",
|
|
97
|
+
"arrow_back_ios",
|
|
98
|
+
"arrow_forward_ios",
|
|
99
|
+
"favorite",
|
|
100
|
+
"filter_list",
|
|
101
|
+
"sort",
|
|
102
|
+
"view_module",
|
|
103
|
+
"hearing",
|
|
104
|
+
"event_note",
|
|
105
|
+
"image",
|
|
106
|
+
"language",
|
|
107
|
+
"repeat",
|
|
108
|
+
"insert_chart",
|
|
109
|
+
"insert_chart_filled",
|
|
110
|
+
"leaderboard",
|
|
111
|
+
"article",
|
|
112
|
+
"reorder",
|
|
113
|
+
"subject",
|
|
114
|
+
"visibility",
|
|
115
|
+
"visibility_off",
|
|
116
|
+
"arrow_right",
|
|
117
|
+
"arrow_drop_down",
|
|
118
|
+
"tune",
|
|
119
|
+
"settings",
|
|
120
|
+
"manufacturing",
|
|
121
|
+
"preview",
|
|
122
|
+
"mic",
|
|
123
|
+
"laptop_windows",
|
|
124
|
+
"mobile",
|
|
125
|
+
"tablet",
|
|
126
|
+
"table",
|
|
127
|
+
"sell",
|
|
128
|
+
"shoppingmode",
|
|
129
|
+
"lightbulb",
|
|
130
|
+
"content_copy",
|
|
131
|
+
"colors",
|
|
132
|
+
"link",
|
|
133
|
+
"format_bold",
|
|
134
|
+
"format_color_text",
|
|
135
|
+
"format_align_left",
|
|
136
|
+
"fiber_manual_record",
|
|
137
|
+
"breaking_news",
|
|
138
|
+
"release_alert",
|
|
139
|
+
"person_play",
|
|
140
|
+
"comment",
|
|
141
|
+
"mode_comment",
|
|
142
|
+
"fullscreen",
|
|
143
|
+
"fullscreen_exit",
|
|
144
|
+
"filter_alt",
|
|
145
|
+
"open_in_new",
|
|
146
|
+
"search",
|
|
147
|
+
"support",
|
|
148
|
+
"location_searching",
|
|
149
|
+
"explore",
|
|
150
|
+
"assistant_direction",
|
|
151
|
+
"mouse",
|
|
152
|
+
"thumb_up",
|
|
153
|
+
"checklist",
|
|
154
|
+
"progress_activity",
|
|
155
|
+
"reply",
|
|
156
|
+
"percent",
|
|
157
|
+
"space_bar",
|
|
158
|
+
"graph_7",
|
|
159
|
+
"verified",
|
|
160
|
+
"deployed_code",
|
|
161
|
+
"build",
|
|
162
|
+
"code_blocks",
|
|
163
|
+
"inventory",
|
|
164
|
+
"save",
|
|
165
|
+
"data_info_alert",
|
|
166
|
+
"auto_stories",
|
|
167
|
+
"menu_book",
|
|
168
|
+
"book_2",
|
|
169
|
+
"import_contacts",
|
|
170
|
+
"nature",
|
|
171
|
+
"spa",
|
|
172
|
+
"contact_support",
|
|
173
|
+
"work",
|
|
174
|
+
"person_4",
|
|
175
|
+
"price_change",
|
|
176
|
+
"keyboard_arrow_down",
|
|
177
|
+
"keyboard_arrow_up"
|
|
178
|
+
]
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import{h as q,m as A,p as d,v as
|
|
1
|
+
import{h as q,m as A,p as d,v as S,y as I}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as p}from"../../vendor/decorate.js";import{n as F,t as n}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";import{n as l,r as f,t as r}from"../../vendor/classPrivateFieldGet2.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,a,o){try{customElements.get(i)||t(i,a,o)}catch(g){var h=String(g||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var s,b,m,y,v,u,_,x,H,c=(s=new WeakSet,b=new WeakMap,m=new WeakMap,y=new WeakMap,v=new WeakMap,u=new WeakMap,_=new WeakMap,x=new WeakMap,H=class extends q{constructor(...t){super(...t),F(this,s),f(this,b,void 0),f(this,m,void 0),f(this,y,void 0),f(this,v,void 0),f(this,u,void 0),f(this,_,void 0),f(this,x,void 0),this._contentId=`scb-collapse-content-${Math.random().toString(36).substr(2,9)}`,this.variant="elements",this.collapsedHeight=40,this.visibleElements=1,this.expanded=!1,this._elementCount=0,this.expandButtonLabel="Mer",this.collapseButtonLabel="Mindre",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.itemsGap=void 0,this._contentHeight=0,l(m,this,0),l(y,this,0),l(u,this,0),l(_,this,0)}get _regionLabel(){return`${this.expanded?this.collapseButtonLabel:this.expandButtonLabel} – ${this._contentId}`}toggle(){this.expanded=!this.expanded}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}willUpdate(t){t.has("expanded")&&this.variant==="height"&&n(s,this,P).call(this,!!t.get("expanded"),this.expanded),t.has("variant")&&(this._measureContent(!1),this._countElements(!1))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements(),n(s,this,E).call(this),n(s,this,w).call(this)});const t=this.shadowRoot?.querySelector("slot");t&&t.addEventListener("slotchange",()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),n(s,this,E).call(this),n(s,this,w).call(this)})}),n(s,this,M).call(this),n(s,this,E).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&n(s,this,M).call(this),t.has("itemsGap")&&(n(s,this,E).call(this),this._measureContent()),this.variant==="elements"&&!t.has("expanded")&&(t.has("variant")||t.has("visibleElements")||t.has("itemsGap"))&&(this._countElements(),n(s,this,w).call(this)),t.has("expanded")&&(n(s,this,E).call(this),this.variant==="height"?n(s,this,W).call(this):this.variant==="elements"&&n(s,this,O).call(this,!!t.get("expanded"),this.expanded),this.dispatchEvent(new CustomEvent("expandedchange",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_measureContent(t=!0){if(this.variant==="height"){const i=this.shadowRoot?.querySelector(".collapse-content"),a=this.shadowRoot?.querySelector("slot");if(i){const o=i.scrollHeight;o!==this._contentHeight&&(this._contentHeight=o,t&&this.requestUpdate())}else if(a){const o=a.assignedNodes({flatten:!0});let h=0;o.forEach(L=>{if(L.nodeType===Node.ELEMENT_NODE){const T=L;h+=T.offsetHeight||T.scrollHeight||0}});const g=h;g!==this._contentHeight&&(this._contentHeight=g,t&&this.requestUpdate())}}}_countElements(t=!0){if(this.variant==="elements"){const i=this.shadowRoot?.querySelector("slot");if(i){const a=i.assignedNodes({flatten:!0}).filter(o=>o.nodeType===Node.ELEMENT_NODE).length;a!==this._elementCount&&(this._elementCount=a,t&&this.requestUpdate())}}}render(){if(this.variant==="height"){const t=this.expanded?"none":`${this.collapsedHeight}px`,i=this._contentHeight>this.collapsedHeight;return S`
|
|
2
2
|
<div
|
|
3
|
-
class="collapse-content collapse-content--height ${this.expanded?"expanded":""}"
|
|
3
|
+
class="collapse-content collapse-content--height ${this.expanded?"expanded":""} ${i&&!this.expanded?"has-fade":""}"
|
|
4
4
|
id="${this._contentId}"
|
|
5
5
|
style="max-height: ${t};"
|
|
6
6
|
role="region"
|
|
7
7
|
aria-label="${this._regionLabel}"
|
|
8
8
|
>
|
|
9
9
|
<slot></slot>
|
|
10
|
-
${i&&!this.expanded?E`<div class="collapse-gradient-overlay"></div>`:""}
|
|
11
10
|
</div>
|
|
12
|
-
${i?
|
|
11
|
+
${i?S`
|
|
13
12
|
<scb-button
|
|
14
13
|
id="${this._contentId}-button"
|
|
15
14
|
@click="${this.toggle}"
|
|
@@ -21,7 +20,7 @@ import{h as q,m as A,p as d,v as E,y as I}from"../../vendor/vendor.js";import"..
|
|
|
21
20
|
>
|
|
22
21
|
</scb-button>
|
|
23
22
|
`:""}
|
|
24
|
-
`}else{const t=n(s,this,N).call(this),i=this._elementCount>t;return
|
|
23
|
+
`}else{const t=n(s,this,N).call(this),i=this._elementCount>t;return S`
|
|
25
24
|
<div
|
|
26
25
|
class="collapse-content collapse-content--elements ${this.expanded?"expanded":""}"
|
|
27
26
|
id="${this._contentId}"
|
|
@@ -30,7 +29,7 @@ import{h as q,m as A,p as d,v as E,y as I}from"../../vendor/vendor.js";import"..
|
|
|
30
29
|
>
|
|
31
30
|
<slot></slot>
|
|
32
31
|
</div>
|
|
33
|
-
${i?
|
|
32
|
+
${i?S`
|
|
34
33
|
<scb-button
|
|
35
34
|
id="${this._contentId}-button"
|
|
36
35
|
@click="${this.toggle}"
|
|
@@ -42,4 +41,4 @@ import{h as q,m as A,p as d,v as E,y as I}from"../../vendor/vendor.js";import"..
|
|
|
42
41
|
>
|
|
43
42
|
</scb-button>
|
|
44
43
|
`:""}
|
|
45
|
-
`}}},H.styles=I`:host{display:block;box-sizing:border-box;margin-block-start:var(--scb-collapse-spacing-block-start, 0);margin-block-end:var(--scb-collapse-spacing-block-end, 0);margin-inline-start:var(--scb-collapse-spacing-inline-start, 0);margin-inline-end:var(--scb-collapse-spacing-inline-end, 0)}.collapse-content{overflow:hidden;display:flow-root;position:relative;transition:max-height var(--motion-duration-medium) var(--motion-easing-standard)}.collapse-content--elements,.collapse-content--height{transition:height var(--motion-duration-medium) var(--motion-easing-standard)}.collapse-content.expanded{max-height:none;overflow:visible}.collapse-content.animating{overflow:hidden}.collapse-
|
|
44
|
+
`}}},H.styles=I`:host{display:block;box-sizing:border-box;margin-block-start:var(--scb-collapse-spacing-block-start, 0);margin-block-end:var(--scb-collapse-spacing-block-end, 0);margin-inline-start:var(--scb-collapse-spacing-inline-start, 0);margin-inline-end:var(--scb-collapse-spacing-inline-end, 0)}.collapse-content{overflow:hidden;display:flow-root;position:relative;transition:max-height var(--motion-duration-medium) var(--motion-easing-standard)}.collapse-content--elements,.collapse-content--height{transition:height var(--motion-duration-medium) var(--motion-easing-standard)}.collapse-content.expanded{max-height:none;overflow:visible}.collapse-content.animating{overflow:hidden}.collapse-content--height.has-fade{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--scb-collapse-fade-height, 48px)),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--scb-collapse-fade-height, 48px)),transparent 100%)}scb-button{margin-top:8px}::slotted(.scb-collapsed-hidden){display:none!important}`,H);function M(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,i=this.mapSpacingToken(this.spacingBottom)??e,a=this.mapSpacingToken(this.spacingLeft),o=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-collapse-spacing-block-start",t):this.style.removeProperty("--scb-collapse-spacing-block-start"),i?this.style.setProperty("--scb-collapse-spacing-block-end",i):this.style.removeProperty("--scb-collapse-spacing-block-end"),a?this.style.setProperty("--scb-collapse-spacing-inline-start",a):this.style.removeProperty("--scb-collapse-spacing-inline-start"),o?this.style.setProperty("--scb-collapse-spacing-inline-end",o):this.style.removeProperty("--scb-collapse-spacing-inline-end")}function E(){const e=this.mapSpacingToken(this.itemsGap);e?this.style.setProperty("--scb-collapse-items-gap",e):this.style.removeProperty("--scb-collapse-items-gap");const t=this.shadowRoot?.querySelector("slot");t&&t.assignedNodes({flatten:!0}).filter(i=>i.nodeType===Node.ELEMENT_NODE).forEach((i,a)=>{const o=i;a===0||!e?o.style.removeProperty("margin-block-start"):o.style.setProperty("margin-block-start","var(--scb-collapse-items-gap)")})}function P(e,t){if(e===t){l(b,this,void 0);return}const i=this.shadowRoot?.querySelector(".collapse-content");if(!i){l(b,this,void 0);return}const a=i.getBoundingClientRect().height,o=Math.max(i.scrollHeight,this._contentHeight,a),h=t?o:Math.min(this.collapsedHeight,o);l(b,this,{startHeight:a,endHeight:h,expanded:t})}function B(e){r(m,this)&&(cancelAnimationFrame(r(m,this)),l(m,this,0)),r(y,this)&&(window.clearTimeout(r(y,this)),l(y,this,0));const t=e??this.shadowRoot?.querySelector(".collapse-content");t&&r(v,this)&&t.removeEventListener("transitionend",r(v,this)),l(v,this,void 0)}function k(e,t){n(s,this,B).call(this,e),e.classList.remove("animating"),e.style.removeProperty("height"),e.style.removeProperty("transition"),e.style.setProperty("max-height",t?"none":`${this.collapsedHeight}px`)}function W(){const e=this.shadowRoot?.querySelector(".collapse-content"),t=r(b,this);if(l(b,this,void 0),!e||!t)return;const i=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;if(n(s,this,B).call(this,e),i||Math.abs(t.startHeight-t.endHeight)<1){n(s,this,k).call(this,e,t.expanded);return}e.classList.add("animating"),e.style.transition="none",e.style.setProperty("max-height","none"),e.style.height=`${t.startHeight}px`,e.getBoundingClientRect(),l(v,this,a=>{a.target===e&&a.propertyName==="height"&&n(s,this,k).call(this,e,t.expanded)}),e.addEventListener("transitionend",r(v,this)),l(m,this,requestAnimationFrame(()=>{l(m,this,0),e.style.removeProperty("transition"),e.style.height=`${t.endHeight}px`})),l(y,this,window.setTimeout(()=>{n(s,this,k).call(this,e,t.expanded)},700))}function N(){const e=typeof this.visibleElements=="string"?parseInt(this.visibleElements,10):this.visibleElements;return Number.isFinite(e)?Math.max(0,Math.floor(e)):0}function C(){const e=this.shadowRoot?.querySelector("slot");return e?e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE):[]}function w(e=this.expanded){if(this.variant!=="elements")return;const t=n(s,this,N).call(this);n(s,this,C).call(this).forEach((i,a)=>{i.classList.toggle("scb-collapsed-hidden",!e&&a>=t)})}function G(e){const t=this.shadowRoot?.querySelector(".collapse-content");if(!t)return 0;const i=n(s,this,C).call(this),a=i.map(h=>h.classList.contains("scb-collapsed-hidden"));n(s,this,w).call(this,e);const o=t.scrollHeight;return i.forEach((h,g)=>{h.classList.toggle("scb-collapsed-hidden",a[g])}),o}function R(e){r(u,this)&&(cancelAnimationFrame(r(u,this)),l(u,this,0)),r(_,this)&&(window.clearTimeout(r(_,this)),l(_,this,0));const t=e??this.shadowRoot?.querySelector(".collapse-content");t&&r(x,this)&&t.removeEventListener("transitionend",r(x,this)),l(x,this,void 0)}function $(e,t){n(s,this,R).call(this,e),n(s,this,w).call(this,t),e.classList.remove("animating"),e.style.removeProperty("height"),e.style.removeProperty("transition")}function O(e,t){const i=this.shadowRoot?.querySelector(".collapse-content");if(!i||e===t){n(s,this,w).call(this,t);return}const a=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1,o=i.getBoundingClientRect().height,h=n(s,this,G).call(this,t);if(n(s,this,R).call(this,i),a||Math.abs(o-h)<1){n(s,this,$).call(this,i,t);return}i.classList.add("animating"),i.style.transition="none",i.style.height=`${o}px`,t&&n(s,this,w).call(this,!0),i.getBoundingClientRect(),l(x,this,g=>{g.target===i&&g.propertyName==="height"&&n(s,this,$).call(this,i,t)}),i.addEventListener("transitionend",r(x,this)),l(u,this,requestAnimationFrame(()=>{l(u,this,0),i.style.removeProperty("transition"),i.style.height=`${h}px`})),l(_,this,window.setTimeout(()=>{n(s,this,$).call(this,i,t)},700))}p([d({type:String})],c.prototype,"variant",void 0);p([d({type:Number,attribute:"collapsed-height",reflect:!0})],c.prototype,"collapsedHeight",void 0);p([d({type:Number,attribute:"visible-elements",reflect:!0})],c.prototype,"visibleElements",void 0);p([d({type:Boolean,reflect:!0})],c.prototype,"expanded",void 0);p([d({type:String,attribute:"expand-button-label",reflect:!0})],c.prototype,"expandButtonLabel",void 0);p([d({type:String,attribute:"collapse-button-label",reflect:!0})],c.prototype,"collapseButtonLabel",void 0);p([d({type:String,reflect:!0})],c.prototype,"spacing",void 0);p([d({type:String,attribute:"spacing-top",reflect:!0})],c.prototype,"spacingTop",void 0);p([d({type:String,attribute:"spacing-bottom",reflect:!0})],c.prototype,"spacingBottom",void 0);p([d({type:String,attribute:"spacing-left",reflect:!0})],c.prototype,"spacingLeft",void 0);p([d({type:String,attribute:"spacing-right",reflect:!0})],c.prototype,"spacingRight",void 0);p([d({type:String,attribute:"items-gap",reflect:!0})],c.prototype,"itemsGap",void 0);c=p([A("scb-collapse")],c);
|
package/mvc/scb-logo.svg
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<defs>
|
|
4
|
-
<style type="text/css">
|
|
5
|
-
g {
|
|
6
|
-
fill: #100f0d;
|
|
7
|
-
}
|
|
8
|
-
g:target {
|
|
9
|
-
fill: #fff;
|
|
10
|
-
}
|
|
11
|
-
</style>
|
|
12
|
-
</defs>
|
|
13
|
-
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
-
<g transform="scale(0.1)" id="inverted">
|
|
15
|
-
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
-
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
-
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
-
</g>
|
|
19
|
-
</g>
|
|
20
|
-
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<defs>
|
|
4
|
+
<style type="text/css">
|
|
5
|
+
g {
|
|
6
|
+
fill: #100f0d;
|
|
7
|
+
}
|
|
8
|
+
g:target {
|
|
9
|
+
fill: #fff;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</defs>
|
|
13
|
+
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
+
<g transform="scale(0.1)" id="inverted">
|
|
15
|
+
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
+
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
+
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
21
21
|
</svg>
|
package/mvc/scb.svg
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
-
aria-hidden="true"
|
|
5
|
-
role="img"
|
|
6
|
-
width="48"
|
|
7
|
-
height="48"
|
|
8
|
-
preserveAspectRatio="xMidYMid meet"
|
|
9
|
-
viewBox="0 0 1300 1300"
|
|
10
|
-
>
|
|
11
|
-
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
-
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
-
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
role="img"
|
|
6
|
+
width="48"
|
|
7
|
+
height="48"
|
|
8
|
+
preserveAspectRatio="xMidYMid meet"
|
|
9
|
+
viewBox="0 0 1300 1300"
|
|
10
|
+
>
|
|
11
|
+
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
+
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
+
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
14
14
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.84",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -460,5 +460,5 @@
|
|
|
460
460
|
},
|
|
461
461
|
"./mvc/*": "./mvc/*"
|
|
462
462
|
},
|
|
463
|
-
"buildHash": "
|
|
463
|
+
"buildHash": "7E0A3EA2430B08C40D8103A73CB1A9CE009E5EB17F2F79CDF407B982E9CA52F5"
|
|
464
464
|
}
|
|
@@ -37,15 +37,9 @@ var o = class extends t {
|
|
|
37
37
|
.collapse-content.animating {
|
|
38
38
|
overflow: hidden;
|
|
39
39
|
}
|
|
40
|
-
.collapse-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
right: 0;
|
|
44
|
-
bottom: 0;
|
|
45
|
-
height: 48px;
|
|
46
|
-
pointer-events: none;
|
|
47
|
-
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
|
|
48
|
-
z-index: 1;
|
|
40
|
+
.collapse-content--height.has-fade {
|
|
41
|
+
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--scb-collapse-fade-height, 48px)), transparent 100%);
|
|
42
|
+
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--scb-collapse-fade-height, 48px)), transparent 100%);
|
|
49
43
|
}
|
|
50
44
|
scb-button {
|
|
51
45
|
margin-top: 8px;
|
|
@@ -230,14 +224,13 @@ var o = class extends t {
|
|
|
230
224
|
let e = this.expanded ? "none" : `${this.collapsedHeight}px`, t = this._contentHeight > this.collapsedHeight;
|
|
231
225
|
return r`
|
|
232
226
|
<div
|
|
233
|
-
class="collapse-content collapse-content--height ${this.expanded ? "expanded" : ""}"
|
|
227
|
+
class="collapse-content collapse-content--height ${this.expanded ? "expanded" : ""} ${t && !this.expanded ? "has-fade" : ""}"
|
|
234
228
|
id="${this._contentId}"
|
|
235
229
|
style="max-height: ${e};"
|
|
236
230
|
role="region"
|
|
237
231
|
aria-label="${this._regionLabel}"
|
|
238
232
|
>
|
|
239
233
|
<slot></slot>
|
|
240
|
-
${t && !this.expanded ? r`<div class="collapse-gradient-overlay"></div>` : ""}
|
|
241
234
|
</div>
|
|
242
235
|
${t ? r`
|
|
243
236
|
<scb-button
|
package/scb-wc.bundle.js
CHANGED
|
@@ -6220,15 +6220,9 @@
|
|
|
6220
6220
|
.collapse-content.animating {
|
|
6221
6221
|
overflow: hidden;
|
|
6222
6222
|
}
|
|
6223
|
-
.collapse-
|
|
6224
|
-
|
|
6225
|
-
|
|
6226
|
-
right: 0;
|
|
6227
|
-
bottom: 0;
|
|
6228
|
-
height: 48px;
|
|
6229
|
-
pointer-events: none;
|
|
6230
|
-
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
|
|
6231
|
-
z-index: 1;
|
|
6223
|
+
.collapse-content--height.has-fade {
|
|
6224
|
+
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--scb-collapse-fade-height, 48px)), transparent 100%);
|
|
6225
|
+
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--scb-collapse-fade-height, 48px)), transparent 100%);
|
|
6232
6226
|
}
|
|
6233
6227
|
scb-button {
|
|
6234
6228
|
margin-top: 8px;
|
|
@@ -6238,14 +6232,13 @@
|
|
|
6238
6232
|
}
|
|
6239
6233
|
`}toggle(){this.expanded=!this.expanded}mapSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}#e(){let e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,n=this.mapSpacingToken(this.spacingBottom)??e,r=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-collapse-spacing-block-start`,t):this.style.removeProperty(`--scb-collapse-spacing-block-start`),n?this.style.setProperty(`--scb-collapse-spacing-block-end`,n):this.style.removeProperty(`--scb-collapse-spacing-block-end`),r?this.style.setProperty(`--scb-collapse-spacing-inline-start`,r):this.style.removeProperty(`--scb-collapse-spacing-inline-start`),i?this.style.setProperty(`--scb-collapse-spacing-inline-end`,i):this.style.removeProperty(`--scb-collapse-spacing-inline-end`)}#t(){let e=this.mapSpacingToken(this.itemsGap);e?this.style.setProperty(`--scb-collapse-items-gap`,e):this.style.removeProperty(`--scb-collapse-items-gap`);let t=this.shadowRoot?.querySelector(`slot`);t&&t.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).forEach((t,n)=>{let r=t;n===0||!e?r.style.removeProperty(`margin-block-start`):r.style.setProperty(`margin-block-start`,`var(--scb-collapse-items-gap)`)})}#n;#r;#i;#a;#o;#s;#c;willUpdate(e){e.has(`expanded`)&&this.variant===`height`&&this.#l(!!e.get(`expanded`),this.expanded),e.has(`variant`)&&(this._measureContent(!1),this._countElements(!1))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements(),this.#t(),this.#h()});let e=this.shadowRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),this.#t(),this.#h()})}),this.#e(),this.#t()}updated(e){(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this.#e(),e.has(`itemsGap`)&&(this.#t(),this._measureContent()),this.variant===`elements`&&!e.has(`expanded`)&&(e.has(`variant`)||e.has(`visibleElements`)||e.has(`itemsGap`))&&(this._countElements(),this.#h()),e.has(`expanded`)&&(this.#t(),this.variant===`height`?this.#f():this.variant===`elements`&&this.#y(!!e.get(`expanded`),this.expanded),this.dispatchEvent(new CustomEvent(`expandedchange`,{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}#l(e,t){if(e===t){this.#n=void 0;return}let n=this.shadowRoot?.querySelector(`.collapse-content`);if(!n){this.#n=void 0;return}let r=n.getBoundingClientRect().height,i=Math.max(n.scrollHeight,this._contentHeight,r),a=t?i:Math.min(this.collapsedHeight,i);this.#n={startHeight:r,endHeight:a,expanded:t}}#u(e){this.#r&&=(cancelAnimationFrame(this.#r),0),this.#i&&=(window.clearTimeout(this.#i),0);let t=e??this.shadowRoot?.querySelector(`.collapse-content`);t&&this.#a&&t.removeEventListener(`transitionend`,this.#a),this.#a=void 0}#d(e,t){this.#u(e),e.classList.remove(`animating`),e.style.removeProperty(`height`),e.style.removeProperty(`transition`),e.style.setProperty(`max-height`,t?`none`:`${this.collapsedHeight}px`)}#f(){let e=this.shadowRoot?.querySelector(`.collapse-content`),t=this.#n;if(this.#n=void 0,!e||!t)return;let n=window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches??!1;if(this.#u(e),n||Math.abs(t.startHeight-t.endHeight)<1){this.#d(e,t.expanded);return}e.classList.add(`animating`),e.style.transition=`none`,e.style.setProperty(`max-height`,`none`),e.style.height=`${t.startHeight}px`,e.getBoundingClientRect(),this.#a=n=>{n.target===e&&n.propertyName===`height`&&this.#d(e,t.expanded)},e.addEventListener(`transitionend`,this.#a),this.#r=requestAnimationFrame(()=>{this.#r=0,e.style.removeProperty(`transition`),e.style.height=`${t.endHeight}px`}),this.#i=window.setTimeout(()=>{this.#d(e,t.expanded)},700)}#p(){let e=typeof this.visibleElements==`string`?parseInt(this.visibleElements,10):this.visibleElements;return Number.isFinite(e)?Math.max(0,Math.floor(e)):0}#m(){let e=this.shadowRoot?.querySelector(`slot`);return e?e.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE):[]}#h(e=this.expanded){if(this.variant!==`elements`)return;let t=this.#p();this.#m().forEach((n,r)=>{n.classList.toggle(`scb-collapsed-hidden`,!e&&r>=t)})}#g(e){let t=this.shadowRoot?.querySelector(`.collapse-content`);if(!t)return 0;let n=this.#m(),r=n.map(e=>e.classList.contains(`scb-collapsed-hidden`));this.#h(e);let i=t.scrollHeight;return n.forEach((e,t)=>{e.classList.toggle(`scb-collapsed-hidden`,r[t])}),i}#_(e){this.#o&&=(cancelAnimationFrame(this.#o),0),this.#s&&=(window.clearTimeout(this.#s),0);let t=e??this.shadowRoot?.querySelector(`.collapse-content`);t&&this.#c&&t.removeEventListener(`transitionend`,this.#c),this.#c=void 0}#v(e,t){this.#_(e),this.#h(t),e.classList.remove(`animating`),e.style.removeProperty(`height`),e.style.removeProperty(`transition`)}#y(e,t){let n=this.shadowRoot?.querySelector(`.collapse-content`);if(!n||e===t){this.#h(t);return}let r=window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches??!1,i=n.getBoundingClientRect().height,a=this.#g(t);if(this.#_(n),r||Math.abs(i-a)<1){this.#v(n,t);return}n.classList.add(`animating`),n.style.transition=`none`,n.style.height=`${i}px`,t&&this.#h(!0),n.getBoundingClientRect(),this.#c=e=>{e.target===n&&e.propertyName===`height`&&this.#v(n,t)},n.addEventListener(`transitionend`,this.#c),this.#o=requestAnimationFrame(()=>{this.#o=0,n.style.removeProperty(`transition`),n.style.height=`${a}px`}),this.#s=window.setTimeout(()=>{this.#v(n,t)},700)}_measureContent(e=!0){if(this.variant===`height`){let t=this.shadowRoot?.querySelector(`.collapse-content`),n=this.shadowRoot?.querySelector(`slot`);if(t){let n=t.scrollHeight;n!==this._contentHeight&&(this._contentHeight=n,e&&this.requestUpdate())}else if(n){let t=n.assignedNodes({flatten:!0}),r=0;t.forEach(e=>{if(e.nodeType===Node.ELEMENT_NODE){let t=e;r+=t.offsetHeight||t.scrollHeight||0}});let i=r;i!==this._contentHeight&&(this._contentHeight=i,e&&this.requestUpdate())}}}_countElements(e=!0){if(this.variant===`elements`){let t=this.shadowRoot?.querySelector(`slot`);if(t){let n=t.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).length;n!==this._elementCount&&(this._elementCount=n,e&&this.requestUpdate())}}}render(){if(this.variant===`height`){let e=this.expanded?`none`:`${this.collapsedHeight}px`,t=this._contentHeight>this.collapsedHeight;return x`
|
|
6240
6234
|
<div
|
|
6241
|
-
class="collapse-content collapse-content--height ${this.expanded?`expanded`:``}"
|
|
6235
|
+
class="collapse-content collapse-content--height ${this.expanded?`expanded`:``} ${t&&!this.expanded?`has-fade`:``}"
|
|
6242
6236
|
id="${this._contentId}"
|
|
6243
6237
|
style="max-height: ${e};"
|
|
6244
6238
|
role="region"
|
|
6245
6239
|
aria-label="${this._regionLabel}"
|
|
6246
6240
|
>
|
|
6247
6241
|
<slot></slot>
|
|
6248
|
-
${t&&!this.expanded?x`<div class="collapse-gradient-overlay"></div>`:``}
|
|
6249
6242
|
</div>
|
|
6250
6243
|
${t?x`
|
|
6251
6244
|
<scb-button
|