scb-wc-test 0.1.262 → 0.1.263
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-select/scb-select-option.js +38 -18
- package/mvc/components/scb-select/scb-select.js +17 -15
- package/mvc/components/scb-table/scb-table.js +2 -2
- package/package.json +2 -2
- package/scb-select/scb-select-option.js +57 -37
- package/scb-select/scb-select.js +21 -19
- package/scb-table/scb-table.js +76 -76
- package/scb-wc-test.bundle.js +53 -31
|
@@ -1,12 +1,30 @@
|
|
|
1
|
-
import{a as h,n,i as p,x as d,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import{a as h,n as l,i as p,x as d,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var n=typeof globalThis<"u"?globalThis:window;if(!n.__scb_ce_guard_installed__){n.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(o,c,e){try{customElements.get(o)||s(o,c,e)}catch(r){var a=String(r||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,i=(n,s,o,c)=>{for(var e=c>1?void 0:c?m(s,o):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(e=(c?r(s,o,e):r(e))||e);return c&&e&&u(s,o,e),e};let t=class extends p{constructor(){super(...arguments),this.value="",this.disabled=!1,this.showCheckbox=!1,this.checked=!1,this.showRadio=!1,this.label=""}render(){return d`
|
|
2
|
+
<div class="item ${this.checked?"checked":""}" ?aria-disabled=${this.disabled}>
|
|
3
|
+
<md-ripple></md-ripple>
|
|
4
|
+
${this.showCheckbox?d`<md-icon class="${this.checked?"checkbox-checked":""}" aria-hidden="true">${this.checked?"check_box":"check_box_outline_blank"}</md-icon>`:null}
|
|
5
|
+
${this.showRadio?d`<md-icon class="${this.checked?"radio-checked":""}" aria-hidden="true">${this.checked?"radio_button_checked":"radio_button_unchecked"}</md-icon>`:null}
|
|
6
|
+
<div class="label">${this.label?this.label:d`<slot></slot>`}</div>
|
|
7
|
+
<md-focus-ring inward></md-focus-ring>
|
|
8
8
|
</div>
|
|
9
|
-
|
|
9
|
+
`}};t.styles=h`
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
outline: none;
|
|
13
|
+
}
|
|
14
|
+
:host([hidden]) {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
:host([disabled]) {
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
opacity: 0.38;
|
|
20
|
+
}
|
|
21
|
+
:host(:focus-visible) .item {
|
|
22
|
+
outline: 2px solid var(--md-sys-color-primary);
|
|
23
|
+
outline-offset: -2px;
|
|
24
|
+
}
|
|
25
|
+
:host([data-focused]) .item {
|
|
26
|
+
background-color: var(--md-sys-color-surface-container);
|
|
27
|
+
}
|
|
10
28
|
.item {
|
|
11
29
|
display: flex;
|
|
12
30
|
align-items: center;
|
|
@@ -16,23 +34,25 @@ import{a as h,n,i as p,x as d,t as b}from"../../vendor/vendor.js";import"../../v
|
|
|
16
34
|
min-height: var(--scb-select-option-min-height, 40px);
|
|
17
35
|
position: relative;
|
|
18
36
|
font-size: var(--scb-select-option-font-size, var(--md-sys-typescale-body-large-size));
|
|
19
|
-
|
|
20
|
-
|
|
37
|
+
line-height: var(--scb-select-option-line-height, var(--md-sys-typescale-body-large-line-height));
|
|
38
|
+
letter-spacing: var(--scb-select-option-letter-spacing, var(--md-sys-typescale-body-large-tracking));
|
|
21
39
|
}
|
|
22
|
-
.
|
|
23
|
-
|
|
40
|
+
.label {
|
|
41
|
+
min-width: 0;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
}
|
|
44
|
+
md-icon {
|
|
45
|
+
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
46
|
+
line-height: 1;
|
|
47
|
+
flex: 0 0 auto;
|
|
24
48
|
}
|
|
25
|
-
md-icon {
|
|
26
|
-
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
27
|
-
line-height: 1;
|
|
28
|
-
}
|
|
29
49
|
md-focus-ring {
|
|
30
50
|
border-radius: var(--md-sys-shape-corner-small);
|
|
31
51
|
}
|
|
32
52
|
.item.checked {
|
|
33
53
|
background-color: var(--md-sys-color-secondary-container);
|
|
34
54
|
}
|
|
35
|
-
md-icon.radio-checked{
|
|
55
|
+
md-icon.radio-checked {
|
|
36
56
|
color: var(--md-sys-color-primary);
|
|
37
57
|
}
|
|
38
|
-
|
|
58
|
+
`;i([l({type:String})],t.prototype,"value",2);i([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2);i([l({type:Boolean})],t.prototype,"showCheckbox",2);i([l({type:Boolean})],t.prototype,"checked",2);i([l({type:Boolean})],t.prototype,"showRadio",2);i([l({type:String})],t.prototype,"label",2);t=i([b("scb-select-option")],t);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as d,n,i as h,j as u,x as p,t as
|
|
1
|
+
import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"./scb-select-option.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(t,i,a){try{customElements.get(t)||s(t,i,a)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,o=(e,s,t,i)=>{for(var a=i>1?void 0:i?g(s,t):s,r=e.length-1,c;r>=0;r--)(c=e[r])&&(a=(i?c(s,t,a):c(a))||a);return i&&a&&b(s,t,a),a};let l=class extends h{constructor(){super(),this._optionsObserver=null,this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.withRadiobuttons=!1,this.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.zIndex=void 0,this._onDocumentClick=e=>{if(!this.open)return;e.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=e=>{const s=this.shadowRoot?.querySelector("slot");if(!s)return;const t=s.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option"),i=e.composedPath(),a=t.find(r=>i.includes(r));a&&(this._selectOption(a),e.stopPropagation())},this._onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();const s=this.shadowRoot?.querySelector("slot");if(!s)return;const t=s.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option"),i=e.composedPath(),a=t.find(r=>i.includes(r));a&&this._selectOption(a)}},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick),this._optionsObserver=new MutationObserver(()=>{this.requestUpdate()}),this._optionsObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","value","disabled"]})}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),this._optionsObserver?.disconnect(),this._optionsObserver=null,super.disconnectedCallback()}_getMultiValues(){return Array.isArray(this.values)&&this.values.length>0?this.values:this.value?this.value.split(",").map(e=>e.trim()).filter(Boolean):[]}_mapSpacingToken(e){if(!e)return;const s=String(e).trim();if(s)return/^\d+$/.test(s)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(s,10)))})`:s}_applySpacing(){const e=this._mapSpacingToken(this.spacing),s=this._mapSpacingToken(this.spacingTop)??e,t=this._mapSpacingToken(this.spacingBottom)??e,i=this._mapSpacingToken(this.spacingLeft),a=this._mapSpacingToken(this.spacingRight);s?this.style.setProperty("--scb-select-spacing-block-start",s):this.style.removeProperty("--scb-select-spacing-block-start"),t?this.style.setProperty("--scb-select-spacing-block-end",t):this.style.removeProperty("--scb-select-spacing-block-end"),i?this.style.setProperty("--scb-select-spacing-inline-start",i):this.style.removeProperty("--scb-select-spacing-inline-start"),a?this.style.setProperty("--scb-select-spacing-inline-end",a):this.style.removeProperty("--scb-select-spacing-inline-end")}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(e){if(!e.disabled){if(this.variant==="multi-select"){const s=this._getMultiValues();s.indexOf(e.value)>-1?this.values=s.filter(i=>i!==e.value):this.values=[...s,e.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))}else this.variant==="single-select"&&this.withRadiobuttons?(this.value=e.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=e.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})));this._updateOptionsChecked(),this.requestUpdate()}}_getSelectedLabel(){const e=this.shadowRoot?.querySelector("slot");if(!e)return"";const s=e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const t=this._getMultiValues(),i=s.filter(a=>t.includes(a.value));return i&&i.length>0?i.map(a=>a.label).join(", "):""}else{const t=s.find(i=>i.value===this.value);return t?t.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value),this._applySpacing()}updated(e){this._updateOptionsChecked(),this._internals&&(this.variant==="multi-select"?this._internals.setFormValue(this._getMultiValues().join(",")):this._internals.setFormValue(this.value)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing()}_updateOptionsChecked(){const e=this.shadowRoot?.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option").forEach(t=>{if(this.variant==="multi-select"){const i=this._getMultiValues();t.showCheckbox=!0,t.checked=i.includes(t.value),t.showRadio=!1}else t.showCheckbox=!1,t.checked=this.value===t.value,this.withRadiobuttons&&(t.showRadio=!0)})}render(){return p`
|
|
2
2
|
${this.label||this.supportingText?p`
|
|
3
3
|
<label class="select-label" id="scb-select-label-${this.name}">
|
|
4
4
|
${this.label?p`
|
|
@@ -136,16 +136,15 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
136
136
|
}
|
|
137
137
|
.select-label{
|
|
138
138
|
display: block;
|
|
139
|
-
font-size: var(--md-sys-typescale-label-
|
|
139
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
140
140
|
font-weight: var(--weight-semibold);
|
|
141
|
-
line-height: var(--md-sys-typescale-label-
|
|
142
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
143
|
-
margin-bottom: var(--spacing-3);
|
|
141
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
142
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
144
143
|
}
|
|
145
144
|
:host([size='medium']) .select-label {
|
|
146
|
-
font-size: var(--md-sys-typescale-label-
|
|
147
|
-
line-height: var(--md-sys-typescale-label-
|
|
148
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
145
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
146
|
+
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
147
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
149
148
|
}
|
|
150
149
|
:host([size='small']) .select-label {
|
|
151
150
|
font-size: var(--md-sys-typescale-label-small-size);
|
|
@@ -158,15 +157,18 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
158
157
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
159
158
|
}
|
|
160
159
|
.select-sub-label{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
160
|
+
display: block;
|
|
161
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
162
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
163
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
164
164
|
font-weight: var(--weight-regular);
|
|
165
|
+
margin-bottom: var(--spacing-3);
|
|
166
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
165
167
|
}
|
|
166
168
|
:host([size='medium']) .select-sub-label {
|
|
167
|
-
font-size: var(--md-sys-typescale-body-
|
|
168
|
-
line-height: var(--md-sys-typescale-body-
|
|
169
|
-
letter-spacing: var(--md-sys-typescale-body-
|
|
169
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
170
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
171
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
170
172
|
}
|
|
171
173
|
:host([size='small']) .select-sub-label {
|
|
172
174
|
font-size: var(--md-sys-typescale-body-small-size);
|
|
@@ -250,4 +252,4 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
250
252
|
padding: var(--spacing-3) 44px var(--spacing-3) var(--spacing-3);
|
|
251
253
|
}
|
|
252
254
|
|
|
253
|
-
`;o([n({type:String})],l.prototype,"variant",2);o([n({type:String})],l.prototype,"value",2);o([n({type:Array})],l.prototype,"values",2);o([n({type:Boolean})],l.prototype,"disabled",2);o([n({type:Boolean,reflect:!0})],l.prototype,"open",2);o([n({type:String})],l.prototype,"label",2);o([n({type:String})],l.prototype,"name",2);o([n({type:String})],l.prototype,"placeholder",2);o([n({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);o([n({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);o([n({type:String,reflect:!0})],l.prototype,"size",2);o([n({type:String,reflect:!0})],l.prototype,"spacing",2);o([n({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);o([n({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);o([n({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);o([n({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);o([n({type:String,attribute:"z-index"})],l.prototype,"zIndex",2);l=o([
|
|
255
|
+
`;o([n({type:String})],l.prototype,"variant",2);o([n({type:String})],l.prototype,"value",2);o([n({type:Array})],l.prototype,"values",2);o([n({type:Boolean})],l.prototype,"disabled",2);o([n({type:Boolean,reflect:!0})],l.prototype,"open",2);o([n({type:String})],l.prototype,"label",2);o([n({type:String})],l.prototype,"name",2);o([n({type:String})],l.prototype,"placeholder",2);o([n({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);o([n({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);o([n({type:String,reflect:!0})],l.prototype,"size",2);o([n({type:String,reflect:!0})],l.prototype,"spacing",2);o([n({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);o([n({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);o([n({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);o([n({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);o([n({type:String,attribute:"z-index"})],l.prototype,"zIndex",2);l=o([m("scb-select")],l);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{a as f,n as p,i as b,x as g,t as _}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var
|
|
1
|
+
import{a as f,n as p,i as b,x as g,t as _}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(r,t,l){try{customElements.get(r)||s(r,t,l)}catch(a){var i=String(a||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,y=(o,s,r,t)=>{for(var l=t>1?void 0:t?w(s,r):s,i=o.length-1,a;i>=0;i--)(a=o[i])&&(l=(t?a(s,r,l):a(l))||l);return t&&l&&v(s,r,l),l};let m=class extends b{constructor(){super(...arguments),this.dataSorting=!1,this.columnWidthMode="auto",this._sortedColumn=null,this._sortDirection="asc",this._columnWidthFrame=null,this._onSlotChange=()=>{this._attachThListeners()}}render(){return g`
|
|
2
2
|
<div class="scb-table-scroll-wrapper">
|
|
3
3
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}firstUpdated(){const o=this.shadowRoot?.querySelector("slot");o&&(o.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(o){o.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),o.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){const o=this.shadowRoot?.querySelector("slot");if(!o)return null;const
|
|
5
|
+
`}firstUpdated(){const o=this.shadowRoot?.querySelector("slot");o&&(o.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(o){o.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),o.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){const o=this.shadowRoot?.querySelector("slot");if(!o)return null;const s=o.assignedNodes({flatten:!0});for(const r of s)if(r.nodeType===Node.ELEMENT_NODE){const t=r,l=t.tagName.toLowerCase()==="tbody"?t:t.querySelector("tbody");if(l)return l}return null}_getTables(){const o=this.shadowRoot?.querySelector("slot");if(!o)return[];const s=o.assignedNodes({flatten:!0}),r=[];return s.forEach(t=>{if(t.nodeType===Node.ELEMENT_NODE){const l=t;l.tagName.toLowerCase()==="table"&&r.push(l),r.push(...Array.from(l.querySelectorAll("table")))}}),r}_attachThListeners(){const o=this.shadowRoot?.querySelector("slot");if(!o)return;const s=o.assignedNodes({flatten:!0}),r=[],t=[],l=[],i=[];s.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&(r.push(...e.querySelectorAll("thead")),t.push(...e.querySelectorAll("th")),l.push(...e.querySelectorAll("td")),i.push(...e.querySelectorAll("tr")))}),r.forEach(e=>{e.style.borderTop="1px solid var(--md-sys-color-on-surface)"}),t.forEach((e,c)=>{e.style.textAlign="left",e.style.padding="12px",e.style.position="relative",e.style.backgroundColor="var(--md-sys-color-surface)",e.style.fontFamily="var(--md-sys-typescale-label-medium-font)",e.style.fontSize="var(--md-sys-typescale-label-medium-size)",e.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",e.style.fontWeight=" var(--weight-bold)",e.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",e.style.verticalAlign="bottom",e.style.borderRight="1px solid var(--md-sys-color-on-surface)",e.style.borderBottom="1px solid var(--md-sys-color-on-surface)";const h=(e.textContent??"").replace(/\s+/g," ").trim();for(;e.firstChild;)e.removeChild(e.firstChild);const d=document.createElement("p");if(d.textContent=h,d.style.margin="0",this.dataSorting){const n=document.createElement("scb-icon-button");n.className="scb-sort-icon",n.onclick=()=>this._onThClick(c),n.setAttribute("variant","standard"),n.setAttribute("size","small"),n.style.alignSelf="end",this._sortedColumn===c?(n.setAttribute("variant","filled-tonal"),n.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(n.setAttribute("icon","swap_horiz"),n.style.transform+=" rotate(90deg)");const u=document.createElement("div");u.style.display="flex",u.style.gap="8px",u.style.flexWrap="nowrap",u.style.alignItems="center",u.appendChild(d),u.appendChild(n),e.appendChild(u)}else e.appendChild(d)}),l.forEach(e=>{e.style.padding="12px",e.style.textAlign="left",e.style.borderTop="1px solid var(--md-sys-color-outline-variant)",e.style.verticalAlign="text-top",e.style.backgroundColor="var(--md-sys-color-surface)",e.style.fontFamily="var(--md-sys-typescale-body-medium-font)",e.style.fontSize="var(--md-sys-typescale-body-medium-size)",e.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",e.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",e.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)",e.style.borderRight="1px solid var(--md-sys-color-on-surface)",e.style.borderBottom="1px solid var(--md-sys-color-on-surface)"}),i.forEach(e=>{const c=e.querySelectorAll("th");c.length>0&&c.forEach((d,n)=>{n===c.length-1&&(d.style.borderRight="none")});const h=e.querySelectorAll("td");h.length>0&&h.forEach((d,n)=>{n===h.length-1&&(d.style.borderRight="none")})});const a=this._getTbody();a&&Array.from(a.querySelectorAll("tr")).forEach((c,h)=>{const d=h%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)";c.querySelectorAll("td").forEach(n=>{n.style.backgroundColor=d})}),this._queueColumnWidthUpdate()}_queueColumnWidthUpdate(){this._columnWidthFrame!==null&&cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=requestAnimationFrame(()=>{this._columnWidthFrame=null,this._applyColumnWidthMode()})}_applyColumnWidthMode(){this._getTables().forEach(s=>{if(this._removeGeneratedColGroup(s),s.style.tableLayout="",s.style.width="",s.style.minWidth="",s.style.maxWidth="",this.columnWidthMode!=="header")return;const r=Array.from(s.querySelectorAll("thead tr")),t=r[r.length-1];if(!t)return;const i=Array.from(t.cells).map(e=>`${Math.ceil(this._measureCellContentWidth(e))}px`),a=i.reduce((e,c)=>e+parseFloat(c),0);this._applyGeneratedColGroup(s,i),s.style.tableLayout="fixed",s.style.width=`${Math.ceil(a)}px`,s.style.minWidth=`${Math.ceil(a)}px`,s.style.maxWidth="none"})}_applyGeneratedColGroup(o,s){const r=document.createElement("colgroup");r.setAttribute("data-scb-generated-column-widths","true"),s.forEach(t=>{const l=document.createElement("col");l.style.width=t,l.style.minWidth=t,r.appendChild(l)}),o.insertBefore(r,o.firstChild)}_removeGeneratedColGroup(o){o.querySelector('colgroup[data-scb-generated-column-widths="true"]')?.remove()}_measureCellContentWidth(o){const s=o.firstElementChild?.cloneNode(!0)??document.createElement("span");o.firstElementChild||(s.textContent=o.textContent??"");const r=window.getComputedStyle(o),t=document.createElement("div");t.style.position="absolute",t.style.left="-99999px",t.style.top="0",t.style.visibility="hidden",t.style.pointerEvents="none",t.style.width="max-content",t.style.maxWidth="none",t.style.whiteSpace="nowrap",t.style.fontFamily=r.fontFamily,t.style.fontSize=r.fontSize,t.style.fontWeight=r.fontWeight,t.style.lineHeight=r.lineHeight,t.style.letterSpacing=r.letterSpacing,s instanceof HTMLElement&&(s.style.width="max-content",s.style.maxWidth="none",s.style.whiteSpace="nowrap"),t.appendChild(s),document.body.appendChild(t);const l=parseFloat(r.paddingLeft||"0"),i=parseFloat(r.paddingRight||"0"),a=t.getBoundingClientRect().width+l+i;return document.body.removeChild(t),a}_onThClick(o){this.dataSorting&&(this._sortedColumn===o?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=o,this._sortDirection="asc"),this._sortTable(o,this._sortDirection),this._attachThListeners())}_sortTable(o,s){const r=this._getTbody();if(!r)return;const t=Array.from(r.querySelectorAll("tr"));t.sort((l,i)=>{const a=l.children[o]?.textContent?.trim()??"",e=i.children[o]?.textContent?.trim()??"",c=Date.parse(a.replace(/\s+/g," ")),h=Date.parse(e.replace(/\s+/g," "));if(!isNaN(c)&&!isNaN(h))return s==="asc"?c-h:h-c;const d=parseFloat(a.replace(",",".")),n=parseFloat(e.replace(",","."));if(!isNaN(d)&&!isNaN(n))return s==="asc"?d-n:n-d;const u=a.localeCompare(e,"sv");return s==="asc"?u:-u}),t.forEach(l=>r.appendChild(l))}};m.styles=f`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
8
|
color: var(--md-sys-color-on-surface);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.263",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -386,5 +386,5 @@
|
|
|
386
386
|
},
|
|
387
387
|
"./mvc/*": "./mvc/*"
|
|
388
388
|
},
|
|
389
|
-
"buildHash": "
|
|
389
|
+
"buildHash": "A3E86A2CC0D54F221489FD769AE13CBFBDC4B7280901F9E4A21E0A8AC3955E4D"
|
|
390
390
|
}
|
|
@@ -1,30 +1,48 @@
|
|
|
1
|
-
import { css as p, LitElement as h, html as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as p, LitElement as h, html as r } from "lit";
|
|
2
|
+
import { property as s, customElement as m } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/ripple/ripple.js";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var b = Object.defineProperty,
|
|
7
|
-
for (var
|
|
8
|
-
(
|
|
9
|
-
return c &&
|
|
6
|
+
var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (d, i, a, c) => {
|
|
7
|
+
for (var o = c > 1 ? void 0 : c ? y(i, a) : i, l = d.length - 1, n; l >= 0; l--)
|
|
8
|
+
(n = d[l]) && (o = (c ? n(i, a, o) : n(o)) || o);
|
|
9
|
+
return c && o && b(i, a, o), o;
|
|
10
10
|
};
|
|
11
11
|
let e = class extends h {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1, this.label = "";
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return
|
|
17
|
-
<div
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
return r`
|
|
17
|
+
<div class="item ${this.checked ? "checked" : ""}" ?aria-disabled=${this.disabled}>
|
|
18
|
+
<md-ripple></md-ripple>
|
|
19
|
+
${this.showCheckbox ? r`<md-icon class="${this.checked ? "checkbox-checked" : ""}" aria-hidden="true">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
|
|
20
|
+
${this.showRadio ? r`<md-icon class="${this.checked ? "radio-checked" : ""}" aria-hidden="true">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
|
|
21
|
+
<div class="label">${this.label ? this.label : r`<slot></slot>`}</div>
|
|
22
|
+
<md-focus-ring inward></md-focus-ring>
|
|
23
23
|
</div>
|
|
24
|
-
|
|
24
|
+
`;
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
e.styles = p`
|
|
28
|
+
:host {
|
|
29
|
+
display: block;
|
|
30
|
+
outline: none;
|
|
31
|
+
}
|
|
32
|
+
:host([hidden]) {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
:host([disabled]) {
|
|
36
|
+
pointer-events: none;
|
|
37
|
+
opacity: 0.38;
|
|
38
|
+
}
|
|
39
|
+
:host(:focus-visible) .item {
|
|
40
|
+
outline: 2px solid var(--md-sys-color-primary);
|
|
41
|
+
outline-offset: -2px;
|
|
42
|
+
}
|
|
43
|
+
:host([data-focused]) .item {
|
|
44
|
+
background-color: var(--md-sys-color-surface-container);
|
|
45
|
+
}
|
|
28
46
|
.item {
|
|
29
47
|
display: flex;
|
|
30
48
|
align-items: center;
|
|
@@ -34,45 +52,47 @@ e.styles = p`
|
|
|
34
52
|
min-height: var(--scb-select-option-min-height, 40px);
|
|
35
53
|
position: relative;
|
|
36
54
|
font-size: var(--scb-select-option-font-size, var(--md-sys-typescale-body-large-size));
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
line-height: var(--scb-select-option-line-height, var(--md-sys-typescale-body-large-line-height));
|
|
56
|
+
letter-spacing: var(--scb-select-option-letter-spacing, var(--md-sys-typescale-body-large-tracking));
|
|
39
57
|
}
|
|
40
|
-
.
|
|
41
|
-
|
|
58
|
+
.label {
|
|
59
|
+
min-width: 0;
|
|
60
|
+
flex: 1 1 auto;
|
|
61
|
+
}
|
|
62
|
+
md-icon {
|
|
63
|
+
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
64
|
+
line-height: 1;
|
|
65
|
+
flex: 0 0 auto;
|
|
42
66
|
}
|
|
43
|
-
md-icon {
|
|
44
|
-
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
45
|
-
line-height: 1;
|
|
46
|
-
}
|
|
47
67
|
md-focus-ring {
|
|
48
68
|
border-radius: var(--md-sys-shape-corner-small);
|
|
49
69
|
}
|
|
50
70
|
.item.checked {
|
|
51
71
|
background-color: var(--md-sys-color-secondary-container);
|
|
52
72
|
}
|
|
53
|
-
md-icon.radio-checked{
|
|
73
|
+
md-icon.radio-checked {
|
|
54
74
|
color: var(--md-sys-color-primary);
|
|
55
75
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
76
|
+
`;
|
|
77
|
+
t([
|
|
78
|
+
s({ type: String })
|
|
59
79
|
], e.prototype, "value", 2);
|
|
60
|
-
|
|
61
|
-
|
|
80
|
+
t([
|
|
81
|
+
s({ type: Boolean, reflect: !0 })
|
|
62
82
|
], e.prototype, "disabled", 2);
|
|
63
|
-
|
|
64
|
-
|
|
83
|
+
t([
|
|
84
|
+
s({ type: Boolean })
|
|
65
85
|
], e.prototype, "showCheckbox", 2);
|
|
66
|
-
|
|
67
|
-
|
|
86
|
+
t([
|
|
87
|
+
s({ type: Boolean })
|
|
68
88
|
], e.prototype, "checked", 2);
|
|
69
|
-
|
|
70
|
-
|
|
89
|
+
t([
|
|
90
|
+
s({ type: Boolean })
|
|
71
91
|
], e.prototype, "showRadio", 2);
|
|
72
|
-
|
|
73
|
-
|
|
92
|
+
t([
|
|
93
|
+
s({ type: String })
|
|
74
94
|
], e.prototype, "label", 2);
|
|
75
|
-
e =
|
|
95
|
+
e = t([
|
|
76
96
|
m("scb-select-option")
|
|
77
97
|
], e);
|
|
78
98
|
export {
|
package/scb-select/scb-select.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { css as d, LitElement as h, html as p } from "lit";
|
|
2
|
-
import { ifDefined as
|
|
3
|
-
import { property as n, customElement as
|
|
2
|
+
import { ifDefined as m } from "lit/directives/if-defined.js";
|
|
3
|
+
import { property as n, customElement as u } from "lit/decorators.js";
|
|
4
4
|
import "./scb-select-option.js";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var
|
|
6
|
+
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, s, l, t) => {
|
|
7
7
|
for (var i = t > 1 ? void 0 : t ? b(s, l) : s, r = e.length - 1, c; r >= 0; r--)
|
|
8
8
|
(c = e[r]) && (i = (t ? c(s, l, i) : c(i)) || i);
|
|
9
|
-
return t && i &&
|
|
9
|
+
return t && i && y(s, l, i), i;
|
|
10
10
|
};
|
|
11
11
|
let a = class extends h {
|
|
12
12
|
constructor() {
|
|
@@ -134,7 +134,7 @@ let a = class extends h {
|
|
|
134
134
|
<md-icon>${this.open ? "keyboard_arrow_up" : "keyboard_arrow_down"}</md-icon>
|
|
135
135
|
</span>
|
|
136
136
|
</div>
|
|
137
|
-
<div class="options" style=${
|
|
137
|
+
<div class="options" style=${m(this.zIndex ? `z-index: ${this.zIndex};` : void 0)} @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
138
138
|
<slot @slotchange="${() => {
|
|
139
139
|
this.requestUpdate();
|
|
140
140
|
}}"></slot>
|
|
@@ -247,16 +247,15 @@ a.styles = d`
|
|
|
247
247
|
}
|
|
248
248
|
.select-label{
|
|
249
249
|
display: block;
|
|
250
|
-
font-size: var(--md-sys-typescale-label-
|
|
250
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
251
251
|
font-weight: var(--weight-semibold);
|
|
252
|
-
line-height: var(--md-sys-typescale-label-
|
|
253
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
254
|
-
margin-bottom: var(--spacing-3);
|
|
252
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
253
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
255
254
|
}
|
|
256
255
|
:host([size='medium']) .select-label {
|
|
257
|
-
font-size: var(--md-sys-typescale-label-
|
|
258
|
-
line-height: var(--md-sys-typescale-label-
|
|
259
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
256
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
257
|
+
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
258
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
260
259
|
}
|
|
261
260
|
:host([size='small']) .select-label {
|
|
262
261
|
font-size: var(--md-sys-typescale-label-small-size);
|
|
@@ -269,15 +268,18 @@ a.styles = d`
|
|
|
269
268
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
270
269
|
}
|
|
271
270
|
.select-sub-label{
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
271
|
+
display: block;
|
|
272
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
273
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
274
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
275
275
|
font-weight: var(--weight-regular);
|
|
276
|
+
margin-bottom: var(--spacing-3);
|
|
277
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
276
278
|
}
|
|
277
279
|
:host([size='medium']) .select-sub-label {
|
|
278
|
-
font-size: var(--md-sys-typescale-body-
|
|
279
|
-
line-height: var(--md-sys-typescale-body-
|
|
280
|
-
letter-spacing: var(--md-sys-typescale-body-
|
|
280
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
281
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
282
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
281
283
|
}
|
|
282
284
|
:host([size='small']) .select-sub-label {
|
|
283
285
|
font-size: var(--md-sys-typescale-body-small-size);
|
|
@@ -414,7 +416,7 @@ o([
|
|
|
414
416
|
n({ type: String, attribute: "z-index" })
|
|
415
417
|
], a.prototype, "zIndex", 2);
|
|
416
418
|
a = o([
|
|
417
|
-
|
|
419
|
+
u("scb-select")
|
|
418
420
|
], a);
|
|
419
421
|
export {
|
|
420
422
|
a as ScbSelect
|
package/scb-table/scb-table.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { css as v, LitElement as C, html as w } from "lit";
|
|
2
2
|
import { property as _, customElement as E } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
|
-
var S = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (
|
|
5
|
-
for (var l =
|
|
6
|
-
(i =
|
|
7
|
-
return
|
|
4
|
+
var S = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (s, t, r, o) => {
|
|
5
|
+
for (var l = o > 1 ? void 0 : o ? x(t, r) : t, n = s.length - 1, i; n >= 0; n--)
|
|
6
|
+
(i = s[n]) && (l = (o ? i(t, r, l) : i(l)) || l);
|
|
7
|
+
return o && l && S(t, r, l), l;
|
|
8
8
|
};
|
|
9
9
|
let y = class extends C {
|
|
10
10
|
constructor() {
|
|
@@ -20,35 +20,35 @@ let y = class extends C {
|
|
|
20
20
|
`;
|
|
21
21
|
}
|
|
22
22
|
firstUpdated() {
|
|
23
|
-
var
|
|
24
|
-
const
|
|
25
|
-
|
|
23
|
+
var t;
|
|
24
|
+
const s = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
|
|
25
|
+
s && (s.addEventListener("slotchange", () => this._attachThListeners()), this._attachThListeners());
|
|
26
26
|
}
|
|
27
|
-
updated(
|
|
28
|
-
|
|
27
|
+
updated(s) {
|
|
28
|
+
s.has("dataSorting") && (this.dataSorting || (this._sortedColumn = null, this._sortDirection = "asc"), this._attachThListeners()), s.has("columnWidthMode") && this._queueColumnWidthUpdate();
|
|
29
29
|
}
|
|
30
30
|
disconnectedCallback() {
|
|
31
31
|
super.disconnectedCallback(), this._columnWidthFrame !== null && (cancelAnimationFrame(this._columnWidthFrame), this._columnWidthFrame = null);
|
|
32
32
|
}
|
|
33
33
|
_getTbody() {
|
|
34
34
|
var r;
|
|
35
|
-
const
|
|
36
|
-
if (!
|
|
37
|
-
const
|
|
38
|
-
for (const
|
|
39
|
-
if (
|
|
40
|
-
const l =
|
|
35
|
+
const s = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
|
|
36
|
+
if (!s) return null;
|
|
37
|
+
const t = s.assignedNodes({ flatten: !0 });
|
|
38
|
+
for (const o of t)
|
|
39
|
+
if (o.nodeType === Node.ELEMENT_NODE) {
|
|
40
|
+
const l = o, n = l.tagName.toLowerCase() === "tbody" ? l : l.querySelector("tbody");
|
|
41
41
|
if (n)
|
|
42
42
|
return n;
|
|
43
43
|
}
|
|
44
44
|
return null;
|
|
45
45
|
}
|
|
46
46
|
_getTables() {
|
|
47
|
-
var
|
|
48
|
-
const
|
|
49
|
-
if (!
|
|
50
|
-
const
|
|
51
|
-
return
|
|
47
|
+
var o;
|
|
48
|
+
const s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
|
|
49
|
+
if (!s) return [];
|
|
50
|
+
const t = s.assignedNodes({ flatten: !0 }), r = [];
|
|
51
|
+
return t.forEach((l) => {
|
|
52
52
|
if (l.nodeType === Node.ELEMENT_NODE) {
|
|
53
53
|
const n = l;
|
|
54
54
|
n.tagName.toLowerCase() === "table" && r.push(n), r.push(...Array.from(n.querySelectorAll("table")));
|
|
@@ -56,43 +56,43 @@ let y = class extends C {
|
|
|
56
56
|
}), r;
|
|
57
57
|
}
|
|
58
58
|
_attachThListeners() {
|
|
59
|
-
var
|
|
60
|
-
const
|
|
61
|
-
if (!
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
e.nodeType === Node.ELEMENT_NODE && (r.push(...e.querySelectorAll("thead")),
|
|
59
|
+
var d;
|
|
60
|
+
const s = (d = this.shadowRoot) == null ? void 0 : d.querySelector("slot");
|
|
61
|
+
if (!s) return;
|
|
62
|
+
const t = s.assignedNodes({ flatten: !0 }), r = [], o = [], l = [], n = [];
|
|
63
|
+
t.forEach((e) => {
|
|
64
|
+
e.nodeType === Node.ELEMENT_NODE && (r.push(...e.querySelectorAll("thead")), o.push(...e.querySelectorAll("th")), l.push(...e.querySelectorAll("td")), n.push(...e.querySelectorAll("tr")));
|
|
65
65
|
}), r.forEach((e) => {
|
|
66
66
|
e.style.borderTop = "1px solid var(--md-sys-color-on-surface)";
|
|
67
|
-
}),
|
|
67
|
+
}), o.forEach((e, h) => {
|
|
68
68
|
e.style.textAlign = "left", e.style.padding = "12px", e.style.position = "relative", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-label-medium-font)", e.style.fontSize = "var(--md-sys-typescale-label-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-label-medium-line-height)", e.style.fontWeight = " var(--weight-bold)", e.style.letterSpacing = "var(--md-sys-typescale-label-medium-tracking)", e.style.verticalAlign = "bottom", e.style.borderRight = "1px solid var(--md-sys-color-on-surface)", e.style.borderBottom = "1px solid var(--md-sys-color-on-surface)";
|
|
69
|
-
const
|
|
69
|
+
const u = (e.textContent ?? "").replace(/\s+/g, " ").trim();
|
|
70
70
|
for (; e.firstChild; )
|
|
71
71
|
e.removeChild(e.firstChild);
|
|
72
72
|
const c = document.createElement("p");
|
|
73
|
-
if (c.textContent =
|
|
73
|
+
if (c.textContent = u, c.style.margin = "0", this.dataSorting) {
|
|
74
74
|
const a = document.createElement("scb-icon-button");
|
|
75
|
-
a.className = "scb-sort-icon", a.onclick = () => this._onThClick(
|
|
76
|
-
const
|
|
77
|
-
|
|
75
|
+
a.className = "scb-sort-icon", a.onclick = () => this._onThClick(h), a.setAttribute("variant", "standard"), a.setAttribute("size", "small"), a.style.alignSelf = "end", this._sortedColumn === h ? (a.setAttribute("variant", "filled-tonal"), a.setAttribute("icon", this._sortDirection === "asc" ? "arrow_downward" : "arrow_upward")) : (a.setAttribute("icon", "swap_horiz"), a.style.transform += " rotate(90deg)");
|
|
76
|
+
const m = document.createElement("div");
|
|
77
|
+
m.style.display = "flex", m.style.gap = "8px", m.style.flexWrap = "nowrap", m.style.alignItems = "center", m.appendChild(c), m.appendChild(a), e.appendChild(m);
|
|
78
78
|
} else
|
|
79
79
|
e.appendChild(c);
|
|
80
80
|
}), l.forEach((e) => {
|
|
81
81
|
e.style.padding = "12px", e.style.textAlign = "left", e.style.borderTop = "1px solid var(--md-sys-color-outline-variant)", e.style.verticalAlign = "text-top", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-body-medium-font)", e.style.fontSize = "var(--md-sys-typescale-body-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-body-medium-line-height)", e.style.fontWeight = "var(--md-sys-typescale-body-medium-weight)", e.style.letterSpacing = "var(--md-sys-typescale-body-medium-tracking)", e.style.borderRight = "1px solid var(--md-sys-color-on-surface)", e.style.borderBottom = "1px solid var(--md-sys-color-on-surface)";
|
|
82
82
|
}), n.forEach((e) => {
|
|
83
|
-
const
|
|
84
|
-
d.length > 0 && d.forEach((c, a) => {
|
|
85
|
-
a === d.length - 1 && (c.style.borderRight = "none");
|
|
86
|
-
});
|
|
87
|
-
const h = e.querySelectorAll("td");
|
|
83
|
+
const h = e.querySelectorAll("th");
|
|
88
84
|
h.length > 0 && h.forEach((c, a) => {
|
|
89
85
|
a === h.length - 1 && (c.style.borderRight = "none");
|
|
90
86
|
});
|
|
87
|
+
const u = e.querySelectorAll("td");
|
|
88
|
+
u.length > 0 && u.forEach((c, a) => {
|
|
89
|
+
a === u.length - 1 && (c.style.borderRight = "none");
|
|
90
|
+
});
|
|
91
91
|
});
|
|
92
92
|
const i = this._getTbody();
|
|
93
|
-
i && Array.from(i.querySelectorAll("tr")).forEach((
|
|
94
|
-
const c =
|
|
95
|
-
|
|
93
|
+
i && Array.from(i.querySelectorAll("tr")).forEach((h, u) => {
|
|
94
|
+
const c = u % 2 === 0 ? "var(--md-sys-color-surface-container)" : "var(--md-sys-color-surface)";
|
|
95
|
+
h.querySelectorAll("td").forEach((a) => {
|
|
96
96
|
a.style.backgroundColor = c;
|
|
97
97
|
});
|
|
98
98
|
}), this._queueColumnWidthUpdate();
|
|
@@ -103,54 +103,54 @@ let y = class extends C {
|
|
|
103
103
|
});
|
|
104
104
|
}
|
|
105
105
|
_applyColumnWidthMode() {
|
|
106
|
-
this._getTables().forEach((
|
|
107
|
-
if (this._removeGeneratedColGroup(
|
|
106
|
+
this._getTables().forEach((t) => {
|
|
107
|
+
if (this._removeGeneratedColGroup(t), t.style.tableLayout = "", t.style.width = "", t.style.minWidth = "", t.style.maxWidth = "", this.columnWidthMode !== "header")
|
|
108
108
|
return;
|
|
109
|
-
const r = Array.from(
|
|
110
|
-
if (!
|
|
109
|
+
const r = Array.from(t.querySelectorAll("thead tr")), o = r[r.length - 1];
|
|
110
|
+
if (!o)
|
|
111
111
|
return;
|
|
112
|
-
const n = Array.from(
|
|
113
|
-
this._applyGeneratedColGroup(
|
|
112
|
+
const n = Array.from(o.cells).map((d) => `${Math.ceil(this._measureCellContentWidth(d))}px`), i = n.reduce((d, e) => d + parseFloat(e), 0);
|
|
113
|
+
this._applyGeneratedColGroup(t, n), t.style.tableLayout = "fixed", t.style.width = `${Math.ceil(i)}px`, t.style.minWidth = `${Math.ceil(i)}px`, t.style.maxWidth = "none";
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
|
-
_applyGeneratedColGroup(
|
|
116
|
+
_applyGeneratedColGroup(s, t) {
|
|
117
117
|
const r = document.createElement("colgroup");
|
|
118
|
-
r.setAttribute("data-scb-generated-column-widths", "true"),
|
|
118
|
+
r.setAttribute("data-scb-generated-column-widths", "true"), t.forEach((o) => {
|
|
119
119
|
const l = document.createElement("col");
|
|
120
|
-
l.style.width =
|
|
121
|
-
}),
|
|
120
|
+
l.style.width = o, l.style.minWidth = o, r.appendChild(l);
|
|
121
|
+
}), s.insertBefore(r, s.firstChild);
|
|
122
122
|
}
|
|
123
|
-
_removeGeneratedColGroup(
|
|
124
|
-
var
|
|
125
|
-
(
|
|
123
|
+
_removeGeneratedColGroup(s) {
|
|
124
|
+
var t;
|
|
125
|
+
(t = s.querySelector('colgroup[data-scb-generated-column-widths="true"]')) == null || t.remove();
|
|
126
126
|
}
|
|
127
|
-
_measureCellContentWidth(
|
|
128
|
-
var
|
|
129
|
-
const
|
|
130
|
-
|
|
131
|
-
const r = window.getComputedStyle(
|
|
132
|
-
|
|
133
|
-
const l = parseFloat(r.paddingLeft || "0"), n = parseFloat(r.paddingRight || "0"), i =
|
|
134
|
-
return document.body.removeChild(
|
|
127
|
+
_measureCellContentWidth(s) {
|
|
128
|
+
var d;
|
|
129
|
+
const t = ((d = s.firstElementChild) == null ? void 0 : d.cloneNode(!0)) ?? document.createElement("span");
|
|
130
|
+
s.firstElementChild || (t.textContent = s.textContent ?? "");
|
|
131
|
+
const r = window.getComputedStyle(s), o = document.createElement("div");
|
|
132
|
+
o.style.position = "absolute", o.style.left = "-99999px", o.style.top = "0", o.style.visibility = "hidden", o.style.pointerEvents = "none", o.style.width = "max-content", o.style.maxWidth = "none", o.style.whiteSpace = "nowrap", o.style.fontFamily = r.fontFamily, o.style.fontSize = r.fontSize, o.style.fontWeight = r.fontWeight, o.style.lineHeight = r.lineHeight, o.style.letterSpacing = r.letterSpacing, t instanceof HTMLElement && (t.style.width = "max-content", t.style.maxWidth = "none", t.style.whiteSpace = "nowrap"), o.appendChild(t), document.body.appendChild(o);
|
|
133
|
+
const l = parseFloat(r.paddingLeft || "0"), n = parseFloat(r.paddingRight || "0"), i = o.getBoundingClientRect().width + l + n;
|
|
134
|
+
return document.body.removeChild(o), i;
|
|
135
135
|
}
|
|
136
|
-
_onThClick(
|
|
137
|
-
this.dataSorting && (this._sortedColumn ===
|
|
136
|
+
_onThClick(s) {
|
|
137
|
+
this.dataSorting && (this._sortedColumn === s ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortedColumn = s, this._sortDirection = "asc"), this._sortTable(s, this._sortDirection), this._attachThListeners());
|
|
138
138
|
}
|
|
139
|
-
_sortTable(
|
|
139
|
+
_sortTable(s, t) {
|
|
140
140
|
const r = this._getTbody();
|
|
141
141
|
if (!r) return;
|
|
142
|
-
const
|
|
143
|
-
|
|
144
|
-
var
|
|
145
|
-
const i = ((f = (
|
|
146
|
-
if (!isNaN(e) && !isNaN(
|
|
147
|
-
return
|
|
148
|
-
const
|
|
149
|
-
if (!isNaN(
|
|
150
|
-
return
|
|
151
|
-
const a = i.localeCompare(
|
|
152
|
-
return
|
|
153
|
-
}),
|
|
142
|
+
const o = Array.from(r.querySelectorAll("tr"));
|
|
143
|
+
o.sort((l, n) => {
|
|
144
|
+
var m, f, b, g;
|
|
145
|
+
const i = ((f = (m = l.children[s]) == null ? void 0 : m.textContent) == null ? void 0 : f.trim()) ?? "", d = ((g = (b = n.children[s]) == null ? void 0 : b.textContent) == null ? void 0 : g.trim()) ?? "", e = Date.parse(i.replace(/\s+/g, " ")), h = Date.parse(d.replace(/\s+/g, " "));
|
|
146
|
+
if (!isNaN(e) && !isNaN(h))
|
|
147
|
+
return t === "asc" ? e - h : h - e;
|
|
148
|
+
const u = parseFloat(i.replace(",", ".")), c = parseFloat(d.replace(",", "."));
|
|
149
|
+
if (!isNaN(u) && !isNaN(c))
|
|
150
|
+
return t === "asc" ? u - c : c - u;
|
|
151
|
+
const a = i.localeCompare(d, "sv");
|
|
152
|
+
return t === "asc" ? a : -a;
|
|
153
|
+
}), o.forEach((l) => r.appendChild(l));
|
|
154
154
|
}
|
|
155
155
|
};
|
|
156
156
|
y.styles = v`
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -10820,14 +10820,32 @@
|
|
|
10820
10820
|
border-left: 1px solid var(--md-sys-color-outline);
|
|
10821
10821
|
}
|
|
10822
10822
|
`,ci([o({type:String,reflect:!0})],vt.prototype,"variant",2),ci([o({type:String,reflect:!0})],vt.prototype,"value",2),ci([o({type:Array})],vt.prototype,"values",2),ci([o({type:Boolean,reflect:!0})],vt.prototype,"disabled",2),ci([o({type:String,reflect:!0})],vt.prototype,"name",2),ci([o({type:String,reflect:!0})],vt.prototype,"spacing",2),ci([o({type:String,attribute:"spacing-top",reflect:!0})],vt.prototype,"spacingTop",2),ci([o({type:String,attribute:"spacing-bottom",reflect:!0})],vt.prototype,"spacingBottom",2),ci([o({type:String,attribute:"spacing-left",reflect:!0})],vt.prototype,"spacingLeft",2),ci([o({type:String,attribute:"spacing-right",reflect:!0})],vt.prototype,"spacingRight",2),vt=ci([y("scb-segmented-button")],vt);var pg=Object.defineProperty,hg=Object.getOwnPropertyDescriptor,Rr=(t,e,i,r)=>{for(var s=r>1?void 0:r?hg(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&pg(e,i,s),s};let Yi=class extends _{constructor(){super(...arguments),this.value="",this.disabled=!1,this.showCheckbox=!1,this.checked=!1,this.showRadio=!1,this.label=""}render(){return c`
|
|
10823
|
-
<div
|
|
10824
|
-
|
|
10825
|
-
|
|
10826
|
-
|
|
10827
|
-
|
|
10828
|
-
|
|
10823
|
+
<div class="item ${this.checked?"checked":""}" ?aria-disabled=${this.disabled}>
|
|
10824
|
+
<md-ripple></md-ripple>
|
|
10825
|
+
${this.showCheckbox?c`<md-icon class="${this.checked?"checkbox-checked":""}" aria-hidden="true">${this.checked?"check_box":"check_box_outline_blank"}</md-icon>`:null}
|
|
10826
|
+
${this.showRadio?c`<md-icon class="${this.checked?"radio-checked":""}" aria-hidden="true">${this.checked?"radio_button_checked":"radio_button_unchecked"}</md-icon>`:null}
|
|
10827
|
+
<div class="label">${this.label?this.label:c`<slot></slot>`}</div>
|
|
10828
|
+
<md-focus-ring inward></md-focus-ring>
|
|
10829
10829
|
</div>
|
|
10830
|
-
|
|
10830
|
+
`}};Yi.styles=f`
|
|
10831
|
+
:host {
|
|
10832
|
+
display: block;
|
|
10833
|
+
outline: none;
|
|
10834
|
+
}
|
|
10835
|
+
:host([hidden]) {
|
|
10836
|
+
display: none;
|
|
10837
|
+
}
|
|
10838
|
+
:host([disabled]) {
|
|
10839
|
+
pointer-events: none;
|
|
10840
|
+
opacity: 0.38;
|
|
10841
|
+
}
|
|
10842
|
+
:host(:focus-visible) .item {
|
|
10843
|
+
outline: 2px solid var(--md-sys-color-primary);
|
|
10844
|
+
outline-offset: -2px;
|
|
10845
|
+
}
|
|
10846
|
+
:host([data-focused]) .item {
|
|
10847
|
+
background-color: var(--md-sys-color-surface-container);
|
|
10848
|
+
}
|
|
10831
10849
|
.item {
|
|
10832
10850
|
display: flex;
|
|
10833
10851
|
align-items: center;
|
|
@@ -10837,26 +10855,28 @@
|
|
|
10837
10855
|
min-height: var(--scb-select-option-min-height, 40px);
|
|
10838
10856
|
position: relative;
|
|
10839
10857
|
font-size: var(--scb-select-option-font-size, var(--md-sys-typescale-body-large-size));
|
|
10840
|
-
|
|
10841
|
-
|
|
10858
|
+
line-height: var(--scb-select-option-line-height, var(--md-sys-typescale-body-large-line-height));
|
|
10859
|
+
letter-spacing: var(--scb-select-option-letter-spacing, var(--md-sys-typescale-body-large-tracking));
|
|
10842
10860
|
}
|
|
10843
|
-
.
|
|
10844
|
-
|
|
10861
|
+
.label {
|
|
10862
|
+
min-width: 0;
|
|
10863
|
+
flex: 1 1 auto;
|
|
10864
|
+
}
|
|
10865
|
+
md-icon {
|
|
10866
|
+
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
10867
|
+
line-height: 1;
|
|
10868
|
+
flex: 0 0 auto;
|
|
10845
10869
|
}
|
|
10846
|
-
md-icon {
|
|
10847
|
-
font-size: var(--scb-select-option-icon-size, var(--icon-size-medium, 24px));
|
|
10848
|
-
line-height: 1;
|
|
10849
|
-
}
|
|
10850
10870
|
md-focus-ring {
|
|
10851
10871
|
border-radius: var(--md-sys-shape-corner-small);
|
|
10852
10872
|
}
|
|
10853
10873
|
.item.checked {
|
|
10854
10874
|
background-color: var(--md-sys-color-secondary-container);
|
|
10855
10875
|
}
|
|
10856
|
-
md-icon.radio-checked{
|
|
10876
|
+
md-icon.radio-checked {
|
|
10857
10877
|
color: var(--md-sys-color-primary);
|
|
10858
10878
|
}
|
|
10859
|
-
|
|
10879
|
+
`,Rr([o({type:String})],Yi.prototype,"value",2),Rr([o({type:Boolean,reflect:!0})],Yi.prototype,"disabled",2),Rr([o({type:Boolean})],Yi.prototype,"showCheckbox",2),Rr([o({type:Boolean})],Yi.prototype,"checked",2),Rr([o({type:Boolean})],Yi.prototype,"showRadio",2),Rr([o({type:String})],Yi.prototype,"label",2),Yi=Rr([y("scb-select-option")],Yi);var ug=Object.defineProperty,bg=Object.getOwnPropertyDescriptor,Pe=(t,e,i,r)=>{for(var s=r>1?void 0:r?bg(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&ug(e,i,s),s};let ve=class extends _{constructor(){super(),this._optionsObserver=null,this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.withRadiobuttons=!1,this.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.zIndex=void 0,this._onDocumentClick=t=>{if(!this.open)return;t.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=t=>{var a;const e=(a=this.shadowRoot)==null?void 0:a.querySelector("slot");if(!e)return;const i=e.assignedElements({flatten:!0}).filter(n=>n.tagName.toLowerCase()==="scb-select-option"),r=t.composedPath(),s=i.find(n=>r.includes(n));s&&(this._selectOption(s),t.stopPropagation())},this._onKeyDown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=t=>{var e;if(t.key==="Enter"||t.key===" "){t.preventDefault();const i=(e=this.shadowRoot)==null?void 0:e.querySelector("slot");if(!i)return;const r=i.assignedElements({flatten:!0}).filter(n=>n.tagName.toLowerCase()==="scb-select-option"),s=t.composedPath(),a=r.find(n=>s.includes(n));a&&this._selectOption(a)}},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick),this._optionsObserver=new MutationObserver(()=>{this.requestUpdate()}),this._optionsObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","value","disabled"]})}disconnectedCallback(){var t;document.removeEventListener("mousedown",this._onDocumentClick),(t=this._optionsObserver)==null||t.disconnect(),this._optionsObserver=null,super.disconnectedCallback()}_getMultiValues(){return Array.isArray(this.values)&&this.values.length>0?this.values:this.value?this.value.split(",").map(t=>t.trim()).filter(Boolean):[]}_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}_applySpacing(){const t=this._mapSpacingToken(this.spacing),e=this._mapSpacingToken(this.spacingTop)??t,i=this._mapSpacingToken(this.spacingBottom)??t,r=this._mapSpacingToken(this.spacingLeft),s=this._mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-select-spacing-block-start",e):this.style.removeProperty("--scb-select-spacing-block-start"),i?this.style.setProperty("--scb-select-spacing-block-end",i):this.style.removeProperty("--scb-select-spacing-block-end"),r?this.style.setProperty("--scb-select-spacing-inline-start",r):this.style.removeProperty("--scb-select-spacing-inline-start"),s?this.style.setProperty("--scb-select-spacing-inline-end",s):this.style.removeProperty("--scb-select-spacing-inline-end")}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(t){if(!t.disabled){if(this.variant==="multi-select"){const e=this._getMultiValues();e.indexOf(t.value)>-1?this.values=e.filter(r=>r!==t.value):this.values=[...e,t.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))}else this.variant==="single-select"&&this.withRadiobuttons?(this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=t.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})));this._updateOptionsChecked(),this.requestUpdate()}}_getSelectedLabel(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("slot");if(!t)return"";const e=t.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const r=this._getMultiValues(),s=e.filter(a=>r.includes(a.value));return s&&s.length>0?s.map(a=>a.label).join(", "):""}else{const r=e.find(s=>s.value===this.value);return r?r.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value),this._applySpacing()}updated(t){this._updateOptionsChecked(),this._internals&&(this.variant==="multi-select"?this._internals.setFormValue(this._getMultiValues().join(",")):this._internals.setFormValue(this.value)),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this._applySpacing()}_updateOptionsChecked(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("slot");if(!t)return;t.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option").forEach(r=>{if(this.variant==="multi-select"){const s=this._getMultiValues();r.showCheckbox=!0,r.checked=s.includes(r.value),r.showRadio=!1}else r.showCheckbox=!1,r.checked=this.value===r.value,this.withRadiobuttons&&(r.showRadio=!0)})}render(){return c`
|
|
10860
10880
|
${this.label||this.supportingText?c`
|
|
10861
10881
|
<label class="select-label" id="scb-select-label-${this.name}">
|
|
10862
10882
|
${this.label?c`
|
|
@@ -10994,16 +11014,15 @@
|
|
|
10994
11014
|
}
|
|
10995
11015
|
.select-label{
|
|
10996
11016
|
display: block;
|
|
10997
|
-
font-size: var(--md-sys-typescale-label-
|
|
11017
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
10998
11018
|
font-weight: var(--weight-semibold);
|
|
10999
|
-
line-height: var(--md-sys-typescale-label-
|
|
11000
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
11001
|
-
margin-bottom: var(--spacing-3);
|
|
11019
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
11020
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
11002
11021
|
}
|
|
11003
11022
|
:host([size='medium']) .select-label {
|
|
11004
|
-
font-size: var(--md-sys-typescale-label-
|
|
11005
|
-
line-height: var(--md-sys-typescale-label-
|
|
11006
|
-
letter-spacing: var(--md-sys-typescale-label-
|
|
11023
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
11024
|
+
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
11025
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
11007
11026
|
}
|
|
11008
11027
|
:host([size='small']) .select-label {
|
|
11009
11028
|
font-size: var(--md-sys-typescale-label-small-size);
|
|
@@ -11016,15 +11035,18 @@
|
|
|
11016
11035
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
11017
11036
|
}
|
|
11018
11037
|
.select-sub-label{
|
|
11019
|
-
|
|
11020
|
-
|
|
11021
|
-
|
|
11038
|
+
display: block;
|
|
11039
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
11040
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
11041
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
11022
11042
|
font-weight: var(--weight-regular);
|
|
11043
|
+
margin-bottom: var(--spacing-3);
|
|
11044
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
11023
11045
|
}
|
|
11024
11046
|
:host([size='medium']) .select-sub-label {
|
|
11025
|
-
font-size: var(--md-sys-typescale-body-
|
|
11026
|
-
line-height: var(--md-sys-typescale-body-
|
|
11027
|
-
letter-spacing: var(--md-sys-typescale-body-
|
|
11047
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
11048
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
11049
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
11028
11050
|
}
|
|
11029
11051
|
:host([size='small']) .select-sub-label {
|
|
11030
11052
|
font-size: var(--md-sys-typescale-body-small-size);
|
|
@@ -11668,7 +11690,7 @@
|
|
|
11668
11690
|
<div class="scb-table-scroll-wrapper">
|
|
11669
11691
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
11670
11692
|
</div>
|
|
11671
|
-
`}firstUpdated(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("slot");t&&(t.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(t){t.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),t.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("slot");if(!t)return null;const e=t.assignedNodes({flatten:!0});for(const r of e)if(r.nodeType===Node.ELEMENT_NODE){const s=r,a=s.tagName.toLowerCase()==="tbody"?s:s.querySelector("tbody");if(a)return a}return null}_getTables(){var r;const t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");if(!t)return[];const e=t.assignedNodes({flatten:!0}),i=[];return e.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const a=s;a.tagName.toLowerCase()==="table"&&i.push(a),i.push(...Array.from(a.querySelectorAll("table")))}}),i}_attachThListeners(){var l;const t=(l=this.shadowRoot)==null?void 0:l.querySelector("slot");if(!t)return;const e=t.assignedNodes({flatten:!0}),i=[],r=[],s=[],a=[];e.forEach(d=>{d.nodeType===Node.ELEMENT_NODE&&(i.push(...d.querySelectorAll("thead")),r.push(...d.querySelectorAll("th")),s.push(...d.querySelectorAll("td")),a.push(...d.querySelectorAll("tr")))}),i.forEach(d=>{d.style.borderTop="1px solid var(--md-sys-color-on-surface)"}),r.forEach((d,h)=>{d.style.textAlign="left",d.style.padding="12px",d.style.position="relative",d.style.backgroundColor="var(--md-sys-color-surface)",d.style.fontFamily="var(--md-sys-typescale-label-medium-font)",d.style.fontSize="var(--md-sys-typescale-label-medium-size)",d.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",d.style.fontWeight=" var(--weight-bold)",d.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",d.style.verticalAlign="bottom",d.style.borderRight="1px solid var(--md-sys-color-on-surface)",d.style.borderBottom="1px solid var(--md-sys-color-on-surface)";const b=(d.textContent??"").replace(/\s+/g," ").trim();for(;d.firstChild;)d.removeChild(d.firstChild);const v=document.createElement("p");if(v.textContent=b,v.style.margin="0",this.dataSorting){const m=document.createElement("scb-icon-button");m.className="scb-sort-icon",m.onclick=()=>this._onThClick(h),m.setAttribute("variant","standard"),m.setAttribute("size","small"),m.style.alignSelf="end",this._sortedColumn===h?(m.setAttribute("variant","filled-tonal"),m.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(m.setAttribute("icon","swap_horiz"),m.style.transform+=" rotate(90deg)");const g=document.createElement("div");g.style.display="flex",g.style.gap="8px",g.style.flexWrap="nowrap",g.style.alignItems="center",g.appendChild(v),g.appendChild(m),d.appendChild(g)}else d.appendChild(v)}),s.forEach(d=>{d.style.padding="12px",d.style.textAlign="left",d.style.borderTop="1px solid var(--md-sys-color-outline-variant)",d.style.verticalAlign="text-top",d.style.backgroundColor="var(--md-sys-color-surface)",d.style.fontFamily="var(--md-sys-typescale-body-medium-font)",d.style.fontSize="var(--md-sys-typescale-body-medium-size)",d.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",d.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",d.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)",d.style.borderRight="1px solid var(--md-sys-color-on-surface)",d.style.borderBottom="1px solid var(--md-sys-color-on-surface)"}),a.forEach(d=>{const h=d.querySelectorAll("th");h.length>0&&h.forEach((v,m)=>{m===h.length-1&&(v.style.borderRight="none")});const b=d.querySelectorAll("td");b.length>0&&b.forEach((v,m)=>{m===b.length-1&&(v.style.borderRight="none")})});const n=this._getTbody();n&&Array.from(n.querySelectorAll("tr")).forEach((h,b)=>{const v=b%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)";h.querySelectorAll("td").forEach(m=>{m.style.backgroundColor=v})}),this._queueColumnWidthUpdate()}_queueColumnWidthUpdate(){this._columnWidthFrame!==null&&cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=requestAnimationFrame(()=>{this._columnWidthFrame=null,this._applyColumnWidthMode()})}_applyColumnWidthMode(){this._getTables().forEach(e=>{if(this._removeGeneratedColGroup(e),e.style.tableLayout="",this.columnWidthMode!=="header")return;const i=Array.from(e.querySelectorAll("thead tr")),r=i[i.length-1];if(!r)return;const a=Array.from(r.cells).map(
|
|
11693
|
+
`}firstUpdated(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("slot");t&&(t.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(t){t.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),t.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector("slot");if(!t)return null;const e=t.assignedNodes({flatten:!0});for(const r of e)if(r.nodeType===Node.ELEMENT_NODE){const s=r,a=s.tagName.toLowerCase()==="tbody"?s:s.querySelector("tbody");if(a)return a}return null}_getTables(){var r;const t=(r=this.shadowRoot)==null?void 0:r.querySelector("slot");if(!t)return[];const e=t.assignedNodes({flatten:!0}),i=[];return e.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const a=s;a.tagName.toLowerCase()==="table"&&i.push(a),i.push(...Array.from(a.querySelectorAll("table")))}}),i}_attachThListeners(){var l;const t=(l=this.shadowRoot)==null?void 0:l.querySelector("slot");if(!t)return;const e=t.assignedNodes({flatten:!0}),i=[],r=[],s=[],a=[];e.forEach(d=>{d.nodeType===Node.ELEMENT_NODE&&(i.push(...d.querySelectorAll("thead")),r.push(...d.querySelectorAll("th")),s.push(...d.querySelectorAll("td")),a.push(...d.querySelectorAll("tr")))}),i.forEach(d=>{d.style.borderTop="1px solid var(--md-sys-color-on-surface)"}),r.forEach((d,h)=>{d.style.textAlign="left",d.style.padding="12px",d.style.position="relative",d.style.backgroundColor="var(--md-sys-color-surface)",d.style.fontFamily="var(--md-sys-typescale-label-medium-font)",d.style.fontSize="var(--md-sys-typescale-label-medium-size)",d.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",d.style.fontWeight=" var(--weight-bold)",d.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",d.style.verticalAlign="bottom",d.style.borderRight="1px solid var(--md-sys-color-on-surface)",d.style.borderBottom="1px solid var(--md-sys-color-on-surface)";const b=(d.textContent??"").replace(/\s+/g," ").trim();for(;d.firstChild;)d.removeChild(d.firstChild);const v=document.createElement("p");if(v.textContent=b,v.style.margin="0",this.dataSorting){const m=document.createElement("scb-icon-button");m.className="scb-sort-icon",m.onclick=()=>this._onThClick(h),m.setAttribute("variant","standard"),m.setAttribute("size","small"),m.style.alignSelf="end",this._sortedColumn===h?(m.setAttribute("variant","filled-tonal"),m.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(m.setAttribute("icon","swap_horiz"),m.style.transform+=" rotate(90deg)");const g=document.createElement("div");g.style.display="flex",g.style.gap="8px",g.style.flexWrap="nowrap",g.style.alignItems="center",g.appendChild(v),g.appendChild(m),d.appendChild(g)}else d.appendChild(v)}),s.forEach(d=>{d.style.padding="12px",d.style.textAlign="left",d.style.borderTop="1px solid var(--md-sys-color-outline-variant)",d.style.verticalAlign="text-top",d.style.backgroundColor="var(--md-sys-color-surface)",d.style.fontFamily="var(--md-sys-typescale-body-medium-font)",d.style.fontSize="var(--md-sys-typescale-body-medium-size)",d.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",d.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",d.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)",d.style.borderRight="1px solid var(--md-sys-color-on-surface)",d.style.borderBottom="1px solid var(--md-sys-color-on-surface)"}),a.forEach(d=>{const h=d.querySelectorAll("th");h.length>0&&h.forEach((v,m)=>{m===h.length-1&&(v.style.borderRight="none")});const b=d.querySelectorAll("td");b.length>0&&b.forEach((v,m)=>{m===b.length-1&&(v.style.borderRight="none")})});const n=this._getTbody();n&&Array.from(n.querySelectorAll("tr")).forEach((h,b)=>{const v=b%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)";h.querySelectorAll("td").forEach(m=>{m.style.backgroundColor=v})}),this._queueColumnWidthUpdate()}_queueColumnWidthUpdate(){this._columnWidthFrame!==null&&cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=requestAnimationFrame(()=>{this._columnWidthFrame=null,this._applyColumnWidthMode()})}_applyColumnWidthMode(){this._getTables().forEach(e=>{if(this._removeGeneratedColGroup(e),e.style.tableLayout="",e.style.width="",e.style.minWidth="",e.style.maxWidth="",this.columnWidthMode!=="header")return;const i=Array.from(e.querySelectorAll("thead tr")),r=i[i.length-1];if(!r)return;const a=Array.from(r.cells).map(l=>`${Math.ceil(this._measureCellContentWidth(l))}px`),n=a.reduce((l,d)=>l+parseFloat(d),0);this._applyGeneratedColGroup(e,a),e.style.tableLayout="fixed",e.style.width=`${Math.ceil(n)}px`,e.style.minWidth=`${Math.ceil(n)}px`,e.style.maxWidth="none"})}_applyGeneratedColGroup(t,e){const i=document.createElement("colgroup");i.setAttribute("data-scb-generated-column-widths","true"),e.forEach(r=>{const s=document.createElement("col");s.style.width=r,s.style.minWidth=r,i.appendChild(s)}),t.insertBefore(i,t.firstChild)}_removeGeneratedColGroup(t){var e;(e=t.querySelector('colgroup[data-scb-generated-column-widths="true"]'))==null||e.remove()}_measureCellContentWidth(t){var l;const e=((l=t.firstElementChild)==null?void 0:l.cloneNode(!0))??document.createElement("span");t.firstElementChild||(e.textContent=t.textContent??"");const i=window.getComputedStyle(t),r=document.createElement("div");r.style.position="absolute",r.style.left="-99999px",r.style.top="0",r.style.visibility="hidden",r.style.pointerEvents="none",r.style.width="max-content",r.style.maxWidth="none",r.style.whiteSpace="nowrap",r.style.fontFamily=i.fontFamily,r.style.fontSize=i.fontSize,r.style.fontWeight=i.fontWeight,r.style.lineHeight=i.lineHeight,r.style.letterSpacing=i.letterSpacing,e instanceof HTMLElement&&(e.style.width="max-content",e.style.maxWidth="none",e.style.whiteSpace="nowrap"),r.appendChild(e),document.body.appendChild(r);const s=parseFloat(i.paddingLeft||"0"),a=parseFloat(i.paddingRight||"0"),n=r.getBoundingClientRect().width+s+a;return document.body.removeChild(r),n}_onThClick(t){this.dataSorting&&(this._sortedColumn===t?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=t,this._sortDirection="asc"),this._sortTable(t,this._sortDirection),this._attachThListeners())}_sortTable(t,e){const i=this._getTbody();if(!i)return;const r=Array.from(i.querySelectorAll("tr"));r.sort((s,a)=>{var g,x,w,k;const n=((x=(g=s.children[t])==null?void 0:g.textContent)==null?void 0:x.trim())??"",l=((k=(w=a.children[t])==null?void 0:w.textContent)==null?void 0:k.trim())??"",d=Date.parse(n.replace(/\s+/g," ")),h=Date.parse(l.replace(/\s+/g," "));if(!isNaN(d)&&!isNaN(h))return e==="asc"?d-h:h-d;const b=parseFloat(n.replace(",",".")),v=parseFloat(l.replace(",","."));if(!isNaN(b)&&!isNaN(v))return e==="asc"?b-v:v-b;const m=n.localeCompare(l,"sv");return e==="asc"?m:-m}),r.forEach(s=>i.appendChild(s))}};ca.styles=f`
|
|
11672
11694
|
:host {
|
|
11673
11695
|
display: block;
|
|
11674
11696
|
color: var(--md-sys-color-on-surface);
|