scb-wc 0.1.27 → 0.1.28
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as n}from"../../vendor/decorate.js";import{n as _,t as d}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,i,s){try{customElements.get(e)||t(e,i,s)}catch(r){var p=String(r||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var c,u,o=(c=new WeakSet,u=class extends f{constructor(...t){super(...t),_(this,c),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}get _regionLabel(){return`${this.expanded?this.collapseButtonLabel:this.expandButtonLabel} – ${this._contentId}`}toggle(){this.expanded=!this.expanded}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}willUpdate(t){t.has("variant")&&(this._measureContent(!1),this._countElements(!1))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements()});const t=this.shadowRoot?.querySelector("slot");t&&t.addEventListener("slotchange",()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),d(c,this,g).call(this)})}),d(c,this,b).call(this),d(c,this,g).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&d(c,this,b).call(this),t.has("itemsGap")&&(d(c,this,g).call(this),this._measureContent()),t.has("expanded")&&(d(c,this,g).call(this),this.dispatchEvent(new CustomEvent("expandedchange",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_measureContent(t=!0){if(this.variant==="height"){const e=this.shadowRoot?.querySelector("slot");if(e){const i=e.assignedNodes({flatten:!0});let s=0;i.forEach(r=>{if(r.nodeType===Node.ELEMENT_NODE){const m=r;s+=m.offsetHeight||m.scrollHeight||0}});const p=s;p!==this._contentHeight&&(this._contentHeight=p,t&&this.requestUpdate())}}}_countElements(t=!0){if(this.variant==="elements"){const e=this.shadowRoot?.querySelector("slot");if(e){const i=e.assignedNodes({flatten:!0}).filter(s=>s.nodeType===Node.ELEMENT_NODE).length;i!==this._elementCount&&(this._elementCount=i,t&&this.requestUpdate())}}}render(){if(this.variant==="height"){const t=this.expanded?`${this._contentHeight}px`:`${this.collapsedHeight}px`,e=this._contentHeight>this.collapsedHeight;return h`
|
|
2
2
|
<div
|
|
3
|
-
class="collapse-content"
|
|
3
|
+
class="collapse-content ${this.expanded?"expanded":""}"
|
|
4
4
|
id="${this._contentId}"
|
|
5
5
|
style="max-height: ${t};"
|
|
6
6
|
role="region"
|
|
@@ -23,7 +23,7 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
23
23
|
`:""}
|
|
24
24
|
`}else{const t=typeof this.visibleElements=="string"?parseInt(this.visibleElements,10):this.visibleElements,e=this._elementCount>t;return setTimeout(()=>{const i=this.shadowRoot?.querySelector("slot");i&&i.assignedNodes({flatten:!0}).filter(s=>s.nodeType===Node.ELEMENT_NODE).forEach((s,p)=>{const r=s;!this.expanded&&p>=t?r.classList.add("scb-collapsed-hidden"):r.classList.remove("scb-collapsed-hidden")})},0),h`
|
|
25
25
|
<div
|
|
26
|
-
class="collapse-content"
|
|
26
|
+
class="collapse-content ${this.expanded?"expanded":""}"
|
|
27
27
|
id="${this._contentId}"
|
|
28
28
|
role="region"
|
|
29
29
|
aria-label="${this._regionLabel}"
|
|
@@ -55,6 +55,9 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
55
55
|
overflow: hidden;
|
|
56
56
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard);
|
|
57
57
|
}
|
|
58
|
+
.collapse-content.expanded {
|
|
59
|
+
overflow: visible;
|
|
60
|
+
}
|
|
58
61
|
.collapse-gradient-overlay {
|
|
59
62
|
position: absolute;
|
|
60
63
|
left: 0;
|
|
@@ -83,7 +86,7 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
83
86
|
::slotted(*) {
|
|
84
87
|
max-height: 1000px;
|
|
85
88
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
|
|
86
|
-
overflow:
|
|
89
|
+
overflow: visible;
|
|
87
90
|
display: block;
|
|
88
91
|
}
|
|
89
92
|
`,u);function b(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,i=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-collapse-spacing-block-start",t):this.style.removeProperty("--scb-collapse-spacing-block-start"),e?this.style.setProperty("--scb-collapse-spacing-block-end",e):this.style.removeProperty("--scb-collapse-spacing-block-end"),i?this.style.setProperty("--scb-collapse-spacing-inline-start",i):this.style.removeProperty("--scb-collapse-spacing-inline-start"),s?this.style.setProperty("--scb-collapse-spacing-inline-end",s):this.style.removeProperty("--scb-collapse-spacing-inline-end")}function g(){const l=this.mapSpacingToken(this.itemsGap);l?this.style.setProperty("--scb-collapse-items-gap",l):this.style.removeProperty("--scb-collapse-items-gap");const t=this.shadowRoot?.querySelector("slot");t&&t.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).forEach((e,i)=>{const s=e;i===0||!l?s.style.removeProperty("margin-block-start"):s.style.setProperty("margin-block-start","var(--scb-collapse-items-gap)")})}n([a({type:String})],o.prototype,"variant",void 0);n([a({type:Number,attribute:"collapsed-height",reflect:!0})],o.prototype,"collapsedHeight",void 0);n([a({type:Number,attribute:"visible-elements",reflect:!0})],o.prototype,"visibleElements",void 0);n([a({type:Boolean,reflect:!0})],o.prototype,"expanded",void 0);n([a({type:String,attribute:"expand-button-label",reflect:!0})],o.prototype,"expandButtonLabel",void 0);n([a({type:String,attribute:"collapse-button-label",reflect:!0})],o.prototype,"collapseButtonLabel",void 0);n([a({type:String,reflect:!0})],o.prototype,"spacing",void 0);n([a({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);n([a({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);n([a({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);n([a({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);n([a({type:String,attribute:"items-gap",reflect:!0})],o.prototype,"itemsGap",void 0);o=n([y("scb-collapse")],o);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.28",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -437,5 +437,5 @@
|
|
|
437
437
|
},
|
|
438
438
|
"./mvc/*": "./mvc/*"
|
|
439
439
|
},
|
|
440
|
-
"buildHash": "
|
|
440
|
+
"buildHash": "AFBF8ABA1D36B04FB900ADC00638A36226C11847C595CD90A8922792E50DE4D7"
|
|
441
441
|
}
|
|
@@ -24,6 +24,9 @@ var o = class extends t {
|
|
|
24
24
|
overflow: hidden;
|
|
25
25
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard);
|
|
26
26
|
}
|
|
27
|
+
.collapse-content.expanded {
|
|
28
|
+
overflow: visible;
|
|
29
|
+
}
|
|
27
30
|
.collapse-gradient-overlay {
|
|
28
31
|
position: absolute;
|
|
29
32
|
left: 0;
|
|
@@ -52,7 +55,7 @@ var o = class extends t {
|
|
|
52
55
|
::slotted(*) {
|
|
53
56
|
max-height: 1000px;
|
|
54
57
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
|
|
55
|
-
overflow:
|
|
58
|
+
overflow: visible;
|
|
56
59
|
display: block;
|
|
57
60
|
}
|
|
58
61
|
`;
|
|
@@ -129,7 +132,7 @@ var o = class extends t {
|
|
|
129
132
|
let e = this.expanded ? `${this._contentHeight}px` : `${this.collapsedHeight}px`, t = this._contentHeight > this.collapsedHeight;
|
|
130
133
|
return r`
|
|
131
134
|
<div
|
|
132
|
-
class="collapse-content"
|
|
135
|
+
class="collapse-content ${this.expanded ? "expanded" : ""}"
|
|
133
136
|
id="${this._contentId}"
|
|
134
137
|
style="max-height: ${e};"
|
|
135
138
|
role="region"
|
|
@@ -161,7 +164,7 @@ var o = class extends t {
|
|
|
161
164
|
});
|
|
162
165
|
}, 0), r`
|
|
163
166
|
<div
|
|
164
|
-
class="collapse-content"
|
|
167
|
+
class="collapse-content ${this.expanded ? "expanded" : ""}"
|
|
165
168
|
id="${this._contentId}"
|
|
166
169
|
role="region"
|
|
167
170
|
aria-label="${this._regionLabel}"
|
package/scb-wc.bundle.js
CHANGED
|
@@ -5879,6 +5879,9 @@
|
|
|
5879
5879
|
overflow: hidden;
|
|
5880
5880
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard);
|
|
5881
5881
|
}
|
|
5882
|
+
.collapse-content.expanded {
|
|
5883
|
+
overflow: visible;
|
|
5884
|
+
}
|
|
5882
5885
|
.collapse-gradient-overlay {
|
|
5883
5886
|
position: absolute;
|
|
5884
5887
|
left: 0;
|
|
@@ -5907,12 +5910,12 @@
|
|
|
5907
5910
|
::slotted(*) {
|
|
5908
5911
|
max-height: 1000px;
|
|
5909
5912
|
transition: max-height var(--motion-duration-medium) var(--motion-easing-standard), opacity var(--motion-duration-medium) var(--motion-easing-standard);
|
|
5910
|
-
overflow:
|
|
5913
|
+
overflow: visible;
|
|
5911
5914
|
display: block;
|
|
5912
5915
|
}
|
|
5913
5916
|
`}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)`)})}willUpdate(e){e.has(`variant`)&&(this._measureContent(!1),this._countElements(!1))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements()});let e=this.shadowRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),this.#t()})}),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()),e.has(`expanded`)&&(this.#t(),this.dispatchEvent(new CustomEvent(`expandedchange`,{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_measureContent(e=!0){if(this.variant===`height`){let t=this.shadowRoot?.querySelector(`slot`);if(t){let n=t.assignedNodes({flatten:!0}),r=0;n.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?`${this._contentHeight}px`:`${this.collapsedHeight}px`,t=this._contentHeight>this.collapsedHeight;return b`
|
|
5914
5917
|
<div
|
|
5915
|
-
class="collapse-content"
|
|
5918
|
+
class="collapse-content ${this.expanded?`expanded`:``}"
|
|
5916
5919
|
id="${this._contentId}"
|
|
5917
5920
|
style="max-height: ${e};"
|
|
5918
5921
|
role="region"
|
|
@@ -5935,7 +5938,7 @@
|
|
|
5935
5938
|
`:``}
|
|
5936
5939
|
`}else{let e=typeof this.visibleElements==`string`?parseInt(this.visibleElements,10):this.visibleElements,t=this._elementCount>e;return setTimeout(()=>{let t=this.shadowRoot?.querySelector(`slot`);t&&t.assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).forEach((t,n)=>{let r=t;!this.expanded&&n>=e?r.classList.add(`scb-collapsed-hidden`):r.classList.remove(`scb-collapsed-hidden`)})},0),b`
|
|
5937
5940
|
<div
|
|
5938
|
-
class="collapse-content"
|
|
5941
|
+
class="collapse-content ${this.expanded?`expanded`:``}"
|
|
5939
5942
|
id="${this._contentId}"
|
|
5940
5943
|
role="region"
|
|
5941
5944
|
aria-label="${this._regionLabel}"
|