scb-wc 0.1.32 → 0.1.34
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/mvc/components/scb-card/scb-card.js +1 -1
- package/mvc/components/scb-collapse/scb-collapse.js +7 -18
- package/package.json +2 -2
- package/scb-card/scb-card.js +0 -1
- package/scb-collapse/scb-collapse.js +54 -30
- package/scb-components/scb-collapse/scb-collapse.d.ts +2 -0
- package/scb-wc.bundle.js +65 -76
|
@@ -854,4 +854,4 @@ import"../../vendor/vendor-material.js";import{_ as lt,b as dt,g as $,h as a,v a
|
|
|
854
854
|
.scb-card.filled-alternative .content.list ::slotted(scb-list) {
|
|
855
855
|
--scb-list-bg: var(--md-sys-color-surface-container, #EEF3FF);
|
|
856
856
|
}
|
|
857
|
-
`,_);function T(){return this.cardTitle||this.title}function V(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,r=this.mapSpacingToken(this.spacingLeft),d=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),e?this.style.setProperty("--scb-card-spacing-block-end",e):this.style.removeProperty("--scb-card-spacing-block-end"),r?this.style.setProperty("--scb-card-spacing-inline-start",r):this.style.removeProperty("--scb-card-spacing-inline-start"),d?this.style.setProperty("--scb-card-spacing-inline-end",d):this.style.removeProperty("--scb-card-spacing-inline-end")}function j(){const l=this.mapSpacingToken(this.innerPadding),t=this.mapSpacingToken(this.paddingTop)??l,e=this.mapSpacingToken(this.paddingBottom)??l,r=this.mapSpacingToken(this.paddingLeft)??l,d=this.mapSpacingToken(this.paddingRight)??l;t?this.style.setProperty("--scb-card-content-padding-block-start",t):this.style.removeProperty("--scb-card-content-padding-block-start"),e?this.style.setProperty("--scb-card-content-padding-block-end",e):this.style.removeProperty("--scb-card-content-padding-block-end"),r?this.style.setProperty("--scb-card-content-padding-inline-start",r):this.style.removeProperty("--scb-card-content-padding-inline-start"),d?this.style.setProperty("--scb-card-content-padding-inline-end",d):this.style.removeProperty("--scb-card-content-padding-inline-end")}s([a({type:String,reflect:!0,converter:c})],i.prototype,"type",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"variant",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"direction",void 0);s([a({type:String,reflect:!0})],i.prototype,"size",void 0);s([a({type:String,attribute:"media-type"})],i.prototype,"mediaType",void 0);s([a({type:String,attribute:"media-href"})],i.prototype,"mediaHref",void 0);s([a({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",void 0);s([a({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",void 0);s([a({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",void 0);s([a({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",void 0);s([a({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",void 0);s([a({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",void 0);s([a({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",void 0);s([a({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",void 0);s([a({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",void 0);s([a({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",void 0);s([a({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",void 0);s([a({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",void 0);s([a({type:String,attribute:"card-href",reflect:!0,converter:c})],i.prototype,"cardHref",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"href",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"title",void 0);s([a({type:String,attribute:"card-title",reflect:!0,converter:c})],i.prototype,"cardTitle",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"subtitle",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"vignette",void 0);s([a({type:String,attribute:"vignette-variant",
|
|
857
|
+
`,_);function T(){return this.cardTitle||this.title}function V(){const l=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??l,e=this.mapSpacingToken(this.spacingBottom)??l,r=this.mapSpacingToken(this.spacingLeft),d=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),e?this.style.setProperty("--scb-card-spacing-block-end",e):this.style.removeProperty("--scb-card-spacing-block-end"),r?this.style.setProperty("--scb-card-spacing-inline-start",r):this.style.removeProperty("--scb-card-spacing-inline-start"),d?this.style.setProperty("--scb-card-spacing-inline-end",d):this.style.removeProperty("--scb-card-spacing-inline-end")}function j(){const l=this.mapSpacingToken(this.innerPadding),t=this.mapSpacingToken(this.paddingTop)??l,e=this.mapSpacingToken(this.paddingBottom)??l,r=this.mapSpacingToken(this.paddingLeft)??l,d=this.mapSpacingToken(this.paddingRight)??l;t?this.style.setProperty("--scb-card-content-padding-block-start",t):this.style.removeProperty("--scb-card-content-padding-block-start"),e?this.style.setProperty("--scb-card-content-padding-block-end",e):this.style.removeProperty("--scb-card-content-padding-block-end"),r?this.style.setProperty("--scb-card-content-padding-inline-start",r):this.style.removeProperty("--scb-card-content-padding-inline-start"),d?this.style.setProperty("--scb-card-content-padding-inline-end",d):this.style.removeProperty("--scb-card-content-padding-inline-end")}s([a({type:String,reflect:!0,converter:c})],i.prototype,"type",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"variant",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"direction",void 0);s([a({type:String,reflect:!0})],i.prototype,"size",void 0);s([a({type:String,attribute:"media-type"})],i.prototype,"mediaType",void 0);s([a({type:String,attribute:"media-href"})],i.prototype,"mediaHref",void 0);s([a({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",void 0);s([a({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",void 0);s([a({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",void 0);s([a({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",void 0);s([a({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",void 0);s([a({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",void 0);s([a({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",void 0);s([a({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",void 0);s([a({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",void 0);s([a({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",void 0);s([a({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",void 0);s([a({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",void 0);s([a({type:String,attribute:"card-href",reflect:!0,converter:c})],i.prototype,"cardHref",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"href",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"title",void 0);s([a({type:String,attribute:"card-title",reflect:!0,converter:c})],i.prototype,"cardTitle",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"subtitle",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"vignette",void 0);s([a({type:String,attribute:"vignette-variant",converter:c})],i.prototype,"vignetteVariant",void 0);s([a({type:String,attribute:"vignette-spacing",reflect:!0,converter:c})],i.prototype,"vignetteSpacing",void 0);s([a({type:String,attribute:"vignette-spacing-top",reflect:!0,converter:c})],i.prototype,"vignetteSpacingTop",void 0);s([a({type:String,attribute:"vignette-spacing-bottom",reflect:!0,converter:c})],i.prototype,"vignetteSpacingBottom",void 0);s([a({type:String,attribute:"vignette-spacing-left",reflect:!0,converter:c})],i.prototype,"vignetteSpacingLeft",void 0);s([a({type:String,attribute:"vignette-spacing-right",reflect:!0,converter:c})],i.prototype,"vignetteSpacingRight",void 0);s([a({type:String,attribute:"supporting-text",reflect:!0,converter:c})],i.prototype,"supportingText",void 0);s([a({type:Date,reflect:!0})],i.prototype,"date",void 0);s([a({type:String,attribute:"social-comments-text"})],i.prototype,"commentsText",void 0);s([a({type:Number,attribute:"social-comments"})],i.prototype,"comments",void 0);s([a({type:Boolean,attribute:"social-comments-disabled"})],i.prototype,"commentsDisabled",void 0);s([a({type:String,attribute:"social-comments-href"})],i.prototype,"commentsHref",void 0);s([a({type:String,attribute:"social-likes-text"})],i.prototype,"likesText",void 0);s([a({type:Number,attribute:"social-likes"})],i.prototype,"likes",void 0);s([a({type:Boolean,attribute:"social-likes-disabled"})],i.prototype,"likesDisabled",void 0);s([a({type:String,attribute:"social-likes-hover-content"})],i.prototype,"likesHoverContent",void 0);s([a({type:Boolean,attribute:"social-has-liked"})],i.prototype,"hasLiked",void 0);s([a({type:Boolean,attribute:"social-likes-interactive"})],i.prototype,"likesInteractive",void 0);s([a({type:Boolean,attribute:"social-author"})],i.prototype,"author",void 0);s([a({type:String,attribute:"social-author-text"})],i.prototype,"authorText",void 0);s([a({type:String,attribute:"social-author-href"})],i.prototype,"authorHref",void 0);s([a({type:Boolean,attribute:"social-reply-enabled"})],i.prototype,"replyEnabled",void 0);s([a({type:Boolean,attribute:"social-edit-enabled"})],i.prototype,"editEnabled",void 0);s([a({type:Boolean,attribute:"social-delete-enabled"})],i.prototype,"deleteEnabled",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"sizing",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"width",void 0);s([a({type:String,reflect:!0,attribute:"max-width",converter:c})],i.prototype,"maxWidth",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"height",void 0);s([a({type:String,reflect:!0,attribute:"max-height",converter:c})],i.prototype,"maxHeight",void 0);s([a({type:String,reflect:!0,converter:c})],i.prototype,"spacing",void 0);s([a({type:String,attribute:"spacing-top",reflect:!0,converter:c})],i.prototype,"spacingTop",void 0);s([a({type:String,attribute:"spacing-bottom",reflect:!0,converter:c})],i.prototype,"spacingBottom",void 0);s([a({type:String,attribute:"spacing-left",reflect:!0,converter:c})],i.prototype,"spacingLeft",void 0);s([a({type:String,attribute:"spacing-right",reflect:!0,converter:c})],i.prototype,"spacingRight",void 0);s([a({type:String,attribute:"padding",reflect:!0,converter:c})],i.prototype,"innerPadding",void 0);s([a({type:String,attribute:"padding-top",reflect:!0,converter:c})],i.prototype,"paddingTop",void 0);s([a({type:String,attribute:"padding-bottom",reflect:!0,converter:c})],i.prototype,"paddingBottom",void 0);s([a({type:String,attribute:"padding-left",reflect:!0,converter:c})],i.prototype,"paddingLeft",void 0);s([a({type:String,attribute:"padding-right",reflect:!0,converter:c})],i.prototype,"paddingRight",void 0);i=S=s([$("scb-card")],i);var O=class extends i{constructor(){super(),this.type="list"}get cardType(){return"list"}};O=s([$("scb-list-card")],O);var K=class extends i{constructor(){super(),this.type="link"}get cardType(){return"link"}};K=s([$("scb-link-card")],K);var q=class extends i{constructor(){super(),this.type="action"}get cardType(){return"action"}};q=s([$("scb-action-card")],q);var G=class extends i{constructor(){super(),this.type="social"}get cardType(){return"social"}};G=s([$("scb-social-card")],G);var X=class extends i{constructor(){super(),this.type="container"}get cardType(){return"container"}};X=s([$("scb-container-card")],X);export{q as ScbActionCard,X as ScbContainerCard,K as ScbLinkCard,O as ScbListCard,G as ScbSocialCard};
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as y,b as _,g as E,h as c,y as u}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as l}from"../../vendor/decorate.js";import{n as A,t as r}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,s,a){try{customElements.get(t)||e(t,s,a)}catch(p){var h=String(p||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var n,b,d,o=(n=new WeakSet,b=class extends y{constructor(...e){super(...e),A(this,n),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(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}willUpdate(e){e.has("variant")&&(this._measureContent(!1),this._countElements(!1),r(n,this,m).call(this))}firstUpdated(){requestAnimationFrame(()=>{this._measureContent(),this._countElements(),r(n,this,m).call(this)});const e=this.shadowRoot?.querySelector("slot");e&&e.addEventListener("slotchange",()=>{requestAnimationFrame(()=>{this._measureContent(),this._countElements(),r(n,this,g).call(this),r(n,this,m).call(this)})}),r(n,this,x).call(this),r(n,this,g).call(this)}updated(e){(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&r(n,this,x).call(this),e.has("itemsGap")&&(r(n,this,g).call(this),this._measureContent()),e.has("expanded")&&(r(n,this,g).call(this),r(n,this,m).call(this),this.dispatchEvent(new CustomEvent("expandedchange",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_measureContent(e=!0){if(this.variant==="height"){const t=this.shadowRoot?.querySelector("slot");if(t){const s=t.assignedNodes({flatten:!0});let a=0;s.forEach(p=>{if(p.nodeType===Node.ELEMENT_NODE){const v=p;a+=v.offsetHeight||v.scrollHeight||0}});const h=a;h!==this._contentHeight&&(this._contentHeight=h,e&&this.requestUpdate())}}}_countElements(e=!0){if(this.variant==="elements"){const t=this.shadowRoot?.querySelector("slot");if(t){const s=t.assignedNodes({flatten:!0}).filter(a=>a.nodeType===Node.ELEMENT_NODE).length;s!==this._elementCount&&(this._elementCount=s,e&&this.requestUpdate())}}}render(){if(this.variant==="height"){const e=this.expanded?`${this._contentHeight}px`:`${this.collapsedHeight}px`,t=this._contentHeight>this.collapsedHeight;return u`
|
|
2
2
|
<div
|
|
3
3
|
class="collapse-content ${this.expanded?"expanded":""}"
|
|
4
4
|
id="${this._contentId}"
|
|
5
|
-
style="max-height: ${
|
|
5
|
+
style="max-height: ${e};"
|
|
6
6
|
role="region"
|
|
7
7
|
aria-label="${this._regionLabel}"
|
|
8
8
|
>
|
|
9
9
|
<slot></slot>
|
|
10
|
-
${e&&!this.expanded?h`<div class="collapse-gradient-overlay"></div>`:""}
|
|
11
10
|
</div>
|
|
12
|
-
${
|
|
11
|
+
${t?u`
|
|
13
12
|
<scb-button
|
|
14
13
|
id="${this._contentId}-button"
|
|
15
14
|
@click="${this.toggle}"
|
|
@@ -21,7 +20,7 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
21
20
|
>
|
|
22
21
|
</scb-button>
|
|
23
22
|
`:""}
|
|
24
|
-
`}else{const
|
|
23
|
+
`}else{const e=typeof this.visibleElements=="string"?parseInt(this.visibleElements,10):this.visibleElements,t=this._elementCount>e;return setTimeout(()=>{const s=this.shadowRoot?.querySelector("slot");s&&s.assignedNodes({flatten:!0}).filter(a=>a.nodeType===Node.ELEMENT_NODE).forEach((a,h)=>{const p=a;!this.expanded&&h>=e?(p.classList.add("scb-collapsed-hidden"),r(n,this,f).call(this,p,!0)):(p.classList.remove("scb-collapsed-hidden"),r(n,this,f).call(this,p,!1))})},0),u`
|
|
25
24
|
<div
|
|
26
25
|
class="collapse-content ${this.expanded?"expanded":""}"
|
|
27
26
|
id="${this._contentId}"
|
|
@@ -30,7 +29,7 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
30
29
|
>
|
|
31
30
|
<slot></slot>
|
|
32
31
|
</div>
|
|
33
|
-
${
|
|
32
|
+
${t?u`
|
|
34
33
|
<scb-button
|
|
35
34
|
id="${this._contentId}-button"
|
|
36
35
|
@click="${this.toggle}"
|
|
@@ -42,7 +41,7 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
42
41
|
>
|
|
43
42
|
</scb-button>
|
|
44
43
|
`:""}
|
|
45
|
-
`}}},
|
|
44
|
+
`}}},d=b,b._focusableSelector="a[href], area[href], button, input, select, textarea, iframe, object, embed, [contenteditable], [tabindex]",b._savedTabindexAttr="data-scb-collapse-prev-tabindex",b.styles=_`
|
|
46
45
|
:host {
|
|
47
46
|
display: block;
|
|
48
47
|
box-sizing: border-box;
|
|
@@ -58,16 +57,6 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
58
57
|
.collapse-content.expanded {
|
|
59
58
|
overflow: visible;
|
|
60
59
|
}
|
|
61
|
-
.collapse-gradient-overlay {
|
|
62
|
-
position: absolute;
|
|
63
|
-
left: 0;
|
|
64
|
-
right: 0;
|
|
65
|
-
bottom: 0;
|
|
66
|
-
height: 48px;
|
|
67
|
-
pointer-events: none;
|
|
68
|
-
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
|
|
69
|
-
z-index: 1;
|
|
70
|
-
}
|
|
71
60
|
.collapse-content {
|
|
72
61
|
position: relative;
|
|
73
62
|
}
|
|
@@ -89,4 +78,4 @@ import{_ as f,b as v,g as y,h as a,y as h}from"../../vendor/vendor.js";import"..
|
|
|
89
78
|
overflow: visible;
|
|
90
79
|
display: block;
|
|
91
80
|
}
|
|
92
|
-
`,
|
|
81
|
+
`,b);function x(){const i=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??i,t=this.mapSpacingToken(this.spacingBottom)??i,s=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-collapse-spacing-block-start",e):this.style.removeProperty("--scb-collapse-spacing-block-start"),t?this.style.setProperty("--scb-collapse-spacing-block-end",t):this.style.removeProperty("--scb-collapse-spacing-block-end"),s?this.style.setProperty("--scb-collapse-spacing-inline-start",s):this.style.removeProperty("--scb-collapse-spacing-inline-start"),a?this.style.setProperty("--scb-collapse-spacing-inline-end",a):this.style.removeProperty("--scb-collapse-spacing-inline-end")}function g(){const i=this.mapSpacingToken(this.itemsGap);i?this.style.setProperty("--scb-collapse-items-gap",i):this.style.removeProperty("--scb-collapse-items-gap");const e=this.shadowRoot?.querySelector("slot");e&&e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE).forEach((t,s)=>{const a=t;s===0||!i?a.style.removeProperty("margin-block-start"):a.style.setProperty("margin-block-start","var(--scb-collapse-items-gap)")})}function f(i,e){if(e)i.setAttribute("aria-hidden","true"),i.setAttribute("inert",""),i.hasAttribute("tabindex")&&i.setAttribute(d._savedTabindexAttr,i.getAttribute("tabindex")??""),i.setAttribute("tabindex","-1");else if(i.removeAttribute("aria-hidden"),i.removeAttribute("inert"),i.hasAttribute(d._savedTabindexAttr)){const t=i.getAttribute(d._savedTabindexAttr)??"";t===""?i.removeAttribute("tabindex"):i.setAttribute("tabindex",t),i.removeAttribute(d._savedTabindexAttr)}else i.getAttribute("tabindex")==="-1"&&i.removeAttribute("tabindex");Array.from(i.querySelectorAll(d._focusableSelector)).forEach(t=>{if(e)t.hasAttribute("tabindex")&&t.setAttribute(d._savedTabindexAttr,t.getAttribute("tabindex")??""),t.setAttribute("tabindex","-1");else if(t.hasAttribute(d._savedTabindexAttr)){const s=t.getAttribute(d._savedTabindexAttr)??"";s===""?t.removeAttribute("tabindex"):t.setAttribute("tabindex",s),t.removeAttribute(d._savedTabindexAttr)}else t.getAttribute("tabindex")==="-1"&&t.removeAttribute("tabindex")})}function m(){if(this.variant==="height"){const i=this.shadowRoot?.querySelector(".collapse-content");if(!i)return;this.expanded?i.removeAttribute("aria-hidden"):i.setAttribute("aria-hidden","true");const e=this.shadowRoot?.querySelector("slot");if(!e)return;e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE).forEach(t=>{r(n,this,f).call(this,t,!this.expanded)})}}l([c({type:String})],o.prototype,"variant",void 0);l([c({type:Number,attribute:"collapsed-height",reflect:!0})],o.prototype,"collapsedHeight",void 0);l([c({type:Number,attribute:"visible-elements",reflect:!0})],o.prototype,"visibleElements",void 0);l([c({type:Boolean,reflect:!0})],o.prototype,"expanded",void 0);l([c({type:String,attribute:"expand-button-label",reflect:!0})],o.prototype,"expandButtonLabel",void 0);l([c({type:String,attribute:"collapse-button-label",reflect:!0})],o.prototype,"collapseButtonLabel",void 0);l([c({type:String,reflect:!0})],o.prototype,"spacing",void 0);l([c({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);l([c({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);l([c({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);l([c({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);l([c({type:String,attribute:"items-gap",reflect:!0})],o.prototype,"itemsGap",void 0);o=d=l([E("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.34",
|
|
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": "49D0DFB003F759AA6AECD5A0ABE46899FCAECE9F8F7C03E31CA029C90452DB82"
|
|
441
441
|
}
|
package/scb-card/scb-card.js
CHANGED
|
@@ -3,10 +3,19 @@ import "../scb-button/scb-button.js";
|
|
|
3
3
|
import { LitElement as t, css as n, html as r } from "lit";
|
|
4
4
|
import { customElement as i, property as a } from "lit/decorators.js";
|
|
5
5
|
//#region src/scb-components/scb-collapse/scb-collapse.ts
|
|
6
|
-
var o = class extends t {
|
|
6
|
+
var o, s = class extends t {
|
|
7
|
+
static {
|
|
8
|
+
o = this;
|
|
9
|
+
}
|
|
7
10
|
constructor(...e) {
|
|
8
11
|
super(...e), 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;
|
|
9
12
|
}
|
|
13
|
+
static {
|
|
14
|
+
this._focusableSelector = "a[href], area[href], button, input, select, textarea, iframe, object, embed, [contenteditable], [tabindex]";
|
|
15
|
+
}
|
|
16
|
+
static {
|
|
17
|
+
this._savedTabindexAttr = "data-scb-collapse-prev-tabindex";
|
|
18
|
+
}
|
|
10
19
|
get _regionLabel() {
|
|
11
20
|
return `${this.expanded ? this.collapseButtonLabel : this.expandButtonLabel} – ${this._contentId}`;
|
|
12
21
|
}
|
|
@@ -27,16 +36,6 @@ var o = class extends t {
|
|
|
27
36
|
.collapse-content.expanded {
|
|
28
37
|
overflow: visible;
|
|
29
38
|
}
|
|
30
|
-
.collapse-gradient-overlay {
|
|
31
|
-
position: absolute;
|
|
32
|
-
left: 0;
|
|
33
|
-
right: 0;
|
|
34
|
-
bottom: 0;
|
|
35
|
-
height: 48px;
|
|
36
|
-
pointer-events: none;
|
|
37
|
-
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--md-sys-color-surface) 100%);
|
|
38
|
-
z-index: 1;
|
|
39
|
-
}
|
|
40
39
|
.collapse-content {
|
|
41
40
|
position: relative;
|
|
42
41
|
}
|
|
@@ -82,26 +81,52 @@ var o = class extends t {
|
|
|
82
81
|
});
|
|
83
82
|
}
|
|
84
83
|
willUpdate(e) {
|
|
85
|
-
e.has("variant") && (this._measureContent(!1), this._countElements(!1));
|
|
84
|
+
e.has("variant") && (this._measureContent(!1), this._countElements(!1), this.#r());
|
|
86
85
|
}
|
|
87
86
|
firstUpdated() {
|
|
88
87
|
requestAnimationFrame(() => {
|
|
89
|
-
this._measureContent(), this._countElements();
|
|
88
|
+
this._measureContent(), this._countElements(), this.#r();
|
|
90
89
|
});
|
|
91
90
|
let e = this.shadowRoot?.querySelector("slot");
|
|
92
91
|
e && e.addEventListener("slotchange", () => {
|
|
93
92
|
requestAnimationFrame(() => {
|
|
94
|
-
this._measureContent(), this._countElements(), this.#t();
|
|
93
|
+
this._measureContent(), this._countElements(), this.#t(), this.#r();
|
|
95
94
|
});
|
|
96
95
|
}), this.#e(), this.#t();
|
|
97
96
|
}
|
|
98
97
|
updated(e) {
|
|
99
|
-
(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", {
|
|
98
|
+
(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.#r(), this.dispatchEvent(new CustomEvent("expandedchange", {
|
|
100
99
|
detail: { expanded: this.expanded },
|
|
101
100
|
bubbles: !0,
|
|
102
101
|
composed: !0
|
|
103
102
|
})));
|
|
104
103
|
}
|
|
104
|
+
#n(e, t) {
|
|
105
|
+
if (t) e.setAttribute("aria-hidden", "true"), e.setAttribute("inert", ""), e.hasAttribute("tabindex") && e.setAttribute(o._savedTabindexAttr, e.getAttribute("tabindex") ?? ""), e.setAttribute("tabindex", "-1");
|
|
106
|
+
else if (e.removeAttribute("aria-hidden"), e.removeAttribute("inert"), e.hasAttribute(o._savedTabindexAttr)) {
|
|
107
|
+
let t = e.getAttribute(o._savedTabindexAttr) ?? "";
|
|
108
|
+
t === "" ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", t), e.removeAttribute(o._savedTabindexAttr);
|
|
109
|
+
} else e.getAttribute("tabindex") === "-1" && e.removeAttribute("tabindex");
|
|
110
|
+
Array.from(e.querySelectorAll(o._focusableSelector)).forEach((e) => {
|
|
111
|
+
if (t) e.hasAttribute("tabindex") && e.setAttribute(o._savedTabindexAttr, e.getAttribute("tabindex") ?? ""), e.setAttribute("tabindex", "-1");
|
|
112
|
+
else if (e.hasAttribute(o._savedTabindexAttr)) {
|
|
113
|
+
let t = e.getAttribute(o._savedTabindexAttr) ?? "";
|
|
114
|
+
t === "" ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", t), e.removeAttribute(o._savedTabindexAttr);
|
|
115
|
+
} else e.getAttribute("tabindex") === "-1" && e.removeAttribute("tabindex");
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
#r() {
|
|
119
|
+
if (this.variant === "height") {
|
|
120
|
+
let e = this.shadowRoot?.querySelector(".collapse-content");
|
|
121
|
+
if (!e) return;
|
|
122
|
+
this.expanded ? e.removeAttribute("aria-hidden") : e.setAttribute("aria-hidden", "true");
|
|
123
|
+
let t = this.shadowRoot?.querySelector("slot");
|
|
124
|
+
if (!t) return;
|
|
125
|
+
t.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE).forEach((e) => {
|
|
126
|
+
this.#n(e, !this.expanded);
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
}
|
|
105
130
|
_measureContent(e = !0) {
|
|
106
131
|
if (this.variant === "height") {
|
|
107
132
|
let t = this.shadowRoot?.querySelector("slot");
|
|
@@ -139,7 +164,6 @@ var o = class extends t {
|
|
|
139
164
|
aria-label="${this._regionLabel}"
|
|
140
165
|
>
|
|
141
166
|
<slot></slot>
|
|
142
|
-
${t && !this.expanded ? r`<div class="collapse-gradient-overlay"></div>` : ""}
|
|
143
167
|
</div>
|
|
144
168
|
${t ? r`
|
|
145
169
|
<scb-button
|
|
@@ -160,7 +184,7 @@ var o = class extends t {
|
|
|
160
184
|
let t = this.shadowRoot?.querySelector("slot");
|
|
161
185
|
t && t.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE).forEach((t, n) => {
|
|
162
186
|
let r = t;
|
|
163
|
-
!this.expanded && n >= e ? r.classList.add("scb-collapsed-hidden") : r.classList.remove("scb-collapsed-hidden");
|
|
187
|
+
!this.expanded && n >= e ? (r.classList.add("scb-collapsed-hidden"), this.#n(r, !0)) : (r.classList.remove("scb-collapsed-hidden"), this.#n(r, !1));
|
|
164
188
|
});
|
|
165
189
|
}, 0), r`
|
|
166
190
|
<div
|
|
@@ -187,48 +211,48 @@ var o = class extends t {
|
|
|
187
211
|
}
|
|
188
212
|
}
|
|
189
213
|
};
|
|
190
|
-
e([a({ type: String })],
|
|
214
|
+
e([a({ type: String })], s.prototype, "variant", void 0), e([a({
|
|
191
215
|
type: Number,
|
|
192
216
|
attribute: "collapsed-height",
|
|
193
217
|
reflect: !0
|
|
194
|
-
})],
|
|
218
|
+
})], s.prototype, "collapsedHeight", void 0), e([a({
|
|
195
219
|
type: Number,
|
|
196
220
|
attribute: "visible-elements",
|
|
197
221
|
reflect: !0
|
|
198
|
-
})],
|
|
222
|
+
})], s.prototype, "visibleElements", void 0), e([a({
|
|
199
223
|
type: Boolean,
|
|
200
224
|
reflect: !0
|
|
201
|
-
})],
|
|
225
|
+
})], s.prototype, "expanded", void 0), e([a({
|
|
202
226
|
type: String,
|
|
203
227
|
attribute: "expand-button-label",
|
|
204
228
|
reflect: !0
|
|
205
|
-
})],
|
|
229
|
+
})], s.prototype, "expandButtonLabel", void 0), e([a({
|
|
206
230
|
type: String,
|
|
207
231
|
attribute: "collapse-button-label",
|
|
208
232
|
reflect: !0
|
|
209
|
-
})],
|
|
233
|
+
})], s.prototype, "collapseButtonLabel", void 0), e([a({
|
|
210
234
|
type: String,
|
|
211
235
|
reflect: !0
|
|
212
|
-
})],
|
|
236
|
+
})], s.prototype, "spacing", void 0), e([a({
|
|
213
237
|
type: String,
|
|
214
238
|
attribute: "spacing-top",
|
|
215
239
|
reflect: !0
|
|
216
|
-
})],
|
|
240
|
+
})], s.prototype, "spacingTop", void 0), e([a({
|
|
217
241
|
type: String,
|
|
218
242
|
attribute: "spacing-bottom",
|
|
219
243
|
reflect: !0
|
|
220
|
-
})],
|
|
244
|
+
})], s.prototype, "spacingBottom", void 0), e([a({
|
|
221
245
|
type: String,
|
|
222
246
|
attribute: "spacing-left",
|
|
223
247
|
reflect: !0
|
|
224
|
-
})],
|
|
248
|
+
})], s.prototype, "spacingLeft", void 0), e([a({
|
|
225
249
|
type: String,
|
|
226
250
|
attribute: "spacing-right",
|
|
227
251
|
reflect: !0
|
|
228
|
-
})],
|
|
252
|
+
})], s.prototype, "spacingRight", void 0), e([a({
|
|
229
253
|
type: String,
|
|
230
254
|
attribute: "items-gap",
|
|
231
255
|
reflect: !0
|
|
232
|
-
})],
|
|
256
|
+
})], s.prototype, "itemsGap", void 0), s = o = e([i("scb-collapse")], s);
|
|
233
257
|
//#endregion
|
|
234
|
-
export {
|
|
258
|
+
export { s as ScbCollapse };
|
|
@@ -2,6 +2,8 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
export declare class ScbCollapse extends LitElement {
|
|
3
3
|
#private;
|
|
4
4
|
private _contentId;
|
|
5
|
+
private static readonly _focusableSelector;
|
|
6
|
+
private static readonly _savedTabindexAttr;
|
|
5
7
|
private get _regionLabel();
|
|
6
8
|
variant: 'height' | 'elements';
|
|
7
9
|
collapsedHeight: number;
|