scb-wc-test 0.1.178 → 0.1.180
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-icon-button/scb-icon-button.js +101 -27
- package/mvc/components/scb-search/scb-search.js +1 -1
- package/mvc/components/scb-table-advanced/scb-table-advanced.js +44 -6
- package/package.json +2 -2
- package/scb-icon-button/scb-icon-button.d.ts +6 -0
- package/scb-icon-button/scb-icon-button.js +197 -117
- package/scb-search/scb-search.js +1 -1
- package/scb-table-advanced/scb-table-advanced.d.ts +6 -0
- package/scb-table-advanced/scb-table-advanced.js +170 -84
- package/scb-wc-test.bundle.js +788 -676
|
@@ -1,65 +1,65 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as
|
|
2
|
+
import{_ as u}from"../../vendor/preload-helper.js";import{a as m,n as s,i as _,x as l,E as e,t as v}from"../../vendor/vendor.js";import"../scb-tooltip/scb-tooltip.js";import"../../vendor/vendor-material.js";import"../scb-button/scb-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(a,c,r){try{customElements.get(a)||i(a,c,r)}catch(h){var d=String(h||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var y=Object.defineProperty,$=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},o=(t,i,a,c)=>{for(var r=c>1?void 0:c?$(i,a):i,d=t.length-1,h;d>=0;d--)(h=t[d])&&(r=(c?h(i,a,r):h(r))||r);return c&&r&&y(i,a,r),r},z=(t,i,a)=>i.has(t)||f("Cannot "+a),S=(t,i,a)=>i.has(t)?f("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(t):i.set(t,a),g=(t,i,a)=>(z(t,i,"access private method"),a),p,b;let n=class extends _{constructor(){super(...arguments),S(this,p),this.icon="home",this.filled=!1,this.iconFilled=!1,this.tooltip="",this.ariaLabel="",this.variant="standard",this.size="medium",this.shape="round",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.href="",this.target="",this.rel="",this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const i=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=i),this.dispatchEvent(new CustomEvent("change",{detail:{selected:i},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),g(this,p,b).call(this)}updated(t){if(super.updated(t),t.has("iconFilled")?this.filled!==this.iconFilled&&(this.filled=this.iconFilled):t.has("filled")&&this.iconFilled!==this.filled&&(this.iconFilled=this.filled),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&g(this,p,b).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("tooltip")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await u(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await u(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await u(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;default:await u(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await u(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const i=this.tooltip,a=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),c=this.getAttribute("aria-controls"),r=this.getAttribute("aria-expanded"),d=a||i||this.icon.trim()||void 0;d?t.setAttribute("aria-label",d):t.removeAttribute("aria-label"),c!==null?t.setAttribute("aria-controls",c):t.removeAttribute("aria-controls"),r!==null?t.setAttribute("aria-expanded",r):t.removeAttribute("aria-expanded")}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}__renderToggleIcons(){return l`
|
|
3
3
|
<md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.toggleofficon}</md-icon>
|
|
4
4
|
<md-icon ?filled=${this.iconFilled||this.filled} slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
|
|
5
|
-
`}__renderSingleIcon(){return
|
|
5
|
+
`}__renderSingleIcon(){return l`<md-icon ?filled=${this.iconFilled||this.filled} aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return l`
|
|
6
6
|
<md-filled-icon-button
|
|
7
7
|
toggle
|
|
8
8
|
?selected=${this.selected}
|
|
9
9
|
?disabled=${this.disabled}
|
|
10
|
-
href=${this.href||
|
|
11
|
-
target=${this.target||
|
|
12
|
-
rel=${this.rel||
|
|
10
|
+
href=${this.href||e}
|
|
11
|
+
target=${this.target||e}
|
|
12
|
+
rel=${this.rel||e}
|
|
13
13
|
>
|
|
14
14
|
${t}
|
|
15
15
|
</md-filled-icon-button>
|
|
16
|
-
`;case"outlined":return
|
|
16
|
+
`;case"outlined":return l`
|
|
17
17
|
<md-outlined-icon-button
|
|
18
18
|
toggle
|
|
19
19
|
?selected=${this.selected}
|
|
20
20
|
?disabled=${this.disabled}
|
|
21
|
-
href=${this.href||
|
|
22
|
-
target=${this.target||
|
|
23
|
-
rel=${this.rel||
|
|
21
|
+
href=${this.href||e}
|
|
22
|
+
target=${this.target||e}
|
|
23
|
+
rel=${this.rel||e}
|
|
24
24
|
>
|
|
25
25
|
${t}
|
|
26
26
|
</md-outlined-icon-button>
|
|
27
|
-
`;case"filled-tonal":return
|
|
27
|
+
`;case"filled-tonal":return l`
|
|
28
28
|
<md-filled-tonal-icon-button
|
|
29
29
|
toggle
|
|
30
30
|
?selected=${this.selected}
|
|
31
31
|
?disabled=${this.disabled}
|
|
32
|
-
href=${this.href||
|
|
33
|
-
target=${this.target||
|
|
34
|
-
rel=${this.rel||
|
|
32
|
+
href=${this.href||e}
|
|
33
|
+
target=${this.target||e}
|
|
34
|
+
rel=${this.rel||e}
|
|
35
35
|
>
|
|
36
36
|
${t}
|
|
37
37
|
</md-filled-tonal-icon-button>
|
|
38
|
-
`;default:return
|
|
39
|
-
<md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href||
|
|
38
|
+
`;default:return l`
|
|
39
|
+
<md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href||e} target=${this.target||e} rel=${this.rel||e}>
|
|
40
40
|
${t}
|
|
41
41
|
</md-icon-button>
|
|
42
|
-
`}switch(this.variant){case"filled":return
|
|
43
|
-
<md-filled-icon-button ?disabled=${this.disabled} href=${this.href||
|
|
42
|
+
`}switch(this.variant){case"filled":return l`
|
|
43
|
+
<md-filled-icon-button ?disabled=${this.disabled} href=${this.href||e} target=${this.target||e} rel=${this.rel||e}>
|
|
44
44
|
${t}
|
|
45
45
|
</md-filled-icon-button>
|
|
46
|
-
`;case"outlined":return
|
|
47
|
-
<md-outlined-icon-button ?disabled=${this.disabled} href=${this.href||
|
|
46
|
+
`;case"outlined":return l`
|
|
47
|
+
<md-outlined-icon-button ?disabled=${this.disabled} href=${this.href||e} target=${this.target||e} rel=${this.rel||e}>
|
|
48
48
|
${t}
|
|
49
49
|
</md-outlined-icon-button>
|
|
50
|
-
`;case"filled-tonal":return
|
|
51
|
-
<md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href||
|
|
50
|
+
`;case"filled-tonal":return l`
|
|
51
|
+
<md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href||e} target=${this.target||e} rel=${this.rel||e}>
|
|
52
52
|
${t}
|
|
53
53
|
</md-filled-tonal-icon-button>
|
|
54
|
-
`;default:return
|
|
55
|
-
<md-icon-button ?disabled=${this.disabled} href=${this.href||
|
|
54
|
+
`;default:return l`
|
|
55
|
+
<md-icon-button ?disabled=${this.disabled} href=${this.href||e} target=${this.target||e} rel=${this.rel||e}>
|
|
56
56
|
${t}
|
|
57
57
|
</md-icon-button>
|
|
58
|
-
`}}render(){if(this.tooltip&&this.tooltip.trim()){const
|
|
59
|
-
<scb-tooltip variant="${
|
|
58
|
+
`}}render(){if(this.tooltip&&this.tooltip.trim()){const i=/<[^>]+>/.test(this.tooltip)?"rich":"plain";return l`
|
|
59
|
+
<scb-tooltip variant="${i}" supporting-text="${this.tooltip}">
|
|
60
60
|
${this.__renderMd()}
|
|
61
61
|
</scb-tooltip>
|
|
62
|
-
`}return this.__renderMd()}};
|
|
62
|
+
`}return this.__renderMd()}};p=new WeakSet;b=function(){const t=this.mapSpacingToken(this.spacing),i=this.mapSpacingToken(this.spacingTop)??t,a=this.mapSpacingToken(this.spacingBottom)??t,c=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight);i?this.style.setProperty("--scb-icon-button-spacing-block-start",i):this.style.removeProperty("--scb-icon-button-spacing-block-start"),a?this.style.setProperty("--scb-icon-button-spacing-block-end",a):this.style.removeProperty("--scb-icon-button-spacing-block-end"),c?this.style.setProperty("--scb-icon-button-spacing-inline-start",c):this.style.removeProperty("--scb-icon-button-spacing-inline-start"),r?this.style.setProperty("--scb-icon-button-spacing-inline-end",r):this.style.removeProperty("--scb-icon-button-spacing-inline-end")};n.styles=m`
|
|
63
63
|
:host {
|
|
64
64
|
display: inline-flex;
|
|
65
65
|
margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
|
|
@@ -67,6 +67,39 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as b,n as r,i as m,x
|
|
|
67
67
|
margin-inline-start: var(--scb-icon-button-spacing-inline-start, 0);
|
|
68
68
|
margin-inline-end: var(--scb-icon-button-spacing-inline-end, 0);
|
|
69
69
|
--scb-icon-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
70
|
+
--scb-icon-button-shape-radius: var(--radius-full, 1000px);
|
|
71
|
+
|
|
72
|
+
--scb-icon-button-shape-square-radius: var(--radius-m, 12px);
|
|
73
|
+
--scb-icon-button-shape-square-radius-large: var(--radius-l, 16px);
|
|
74
|
+
|
|
75
|
+
--scb-icon-button-icon-size: var(--icon-size-medium, 24px);
|
|
76
|
+
--scb-icon-button-padding: var(--spacing-3);
|
|
77
|
+
--scb-icon-button-container-size: calc(
|
|
78
|
+
var(--scb-icon-button-icon-size) + (var(--scb-icon-button-padding) * 2)
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:host([size="small"]) {
|
|
83
|
+
--scb-icon-button-icon-size: var(--icon-size-small, 20px);
|
|
84
|
+
--scb-icon-button-padding: calc(var(--spacing-3) - var(--spacing-1));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:host([size="medium"]) {
|
|
88
|
+
--scb-icon-button-icon-size: var(--icon-size-medium, 24px);
|
|
89
|
+
--scb-icon-button-padding: var(--spacing-3);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:host([size="large"]) {
|
|
93
|
+
--scb-icon-button-icon-size: var(--icon-size-medium, 24px);
|
|
94
|
+
--scb-icon-button-padding: var(--spacing-5);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([shape="square"]) {
|
|
98
|
+
--scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([shape="square"][size="large"]) {
|
|
102
|
+
--scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius-large);
|
|
70
103
|
}
|
|
71
104
|
|
|
72
105
|
:host([filled]),
|
|
@@ -75,14 +108,55 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as b,n as r,i as m,x
|
|
|
75
108
|
}
|
|
76
109
|
|
|
77
110
|
md-icon {
|
|
111
|
+
--md-icon-size: var(--scb-icon-button-icon-size);
|
|
112
|
+
font-size: var(--scb-icon-button-icon-size) !important;
|
|
78
113
|
--md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
|
|
79
114
|
font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
|
|
80
115
|
}
|
|
81
116
|
|
|
117
|
+
md-icon-button {
|
|
118
|
+
--md-icon-button-icon-size: var(--scb-icon-button-icon-size);
|
|
119
|
+
--md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
|
|
120
|
+
padding: var(--scb-icon-button-padding) !important;
|
|
121
|
+
inline-size: auto !important;
|
|
122
|
+
block-size: auto !important;
|
|
123
|
+
border-radius: var(--scb-icon-button-shape-radius) !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
md-filled-icon-button {
|
|
127
|
+
--md-filled-icon-button-icon-size: var(--scb-icon-button-icon-size);
|
|
128
|
+
--md-filled-icon-button-container-width: var(--scb-icon-button-container-size);
|
|
129
|
+
--md-filled-icon-button-container-height: var(--scb-icon-button-container-size);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
md-filled-tonal-icon-button {
|
|
133
|
+
--md-filled-tonal-icon-button-icon-size: var(--scb-icon-button-icon-size);
|
|
134
|
+
--md-filled-tonal-icon-button-container-width: var(--scb-icon-button-container-size);
|
|
135
|
+
--md-filled-tonal-icon-button-container-height: var(--scb-icon-button-container-size);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
md-outlined-icon-button {
|
|
139
|
+
--md-outlined-icon-button-icon-size: var(--scb-icon-button-icon-size);
|
|
140
|
+
--md-outlined-icon-button-container-width: var(--scb-icon-button-container-size);
|
|
141
|
+
--md-outlined-icon-button-container-height: var(--scb-icon-button-container-size);
|
|
142
|
+
}
|
|
143
|
+
|
|
82
144
|
md-icon-button,
|
|
83
145
|
md-filled-icon-button,
|
|
84
146
|
md-outlined-icon-button,
|
|
85
147
|
md-filled-tonal-icon-button {
|
|
148
|
+
--md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
|
|
149
|
+
--md-filled-icon-button-container-shape: var(--scb-icon-button-shape-radius);
|
|
150
|
+
--md-outlined-icon-button-container-shape: var(--scb-icon-button-shape-radius);
|
|
151
|
+
--md-filled-tonal-icon-button-container-shape: var(--scb-icon-button-shape-radius);
|
|
86
152
|
--md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings);
|
|
153
|
+
border-radius: var(--scb-icon-button-shape-radius) !important;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
md-icon-button::part(button),
|
|
157
|
+
md-filled-icon-button::part(button),
|
|
158
|
+
md-outlined-icon-button::part(button),
|
|
159
|
+
md-filled-tonal-icon-button::part(button) {
|
|
160
|
+
border-radius: var(--scb-icon-button-shape-radius) !important;
|
|
87
161
|
}
|
|
88
|
-
|
|
162
|
+
`;o([s({type:String})],n.prototype,"icon",2);o([s({type:Boolean,reflect:!0})],n.prototype,"filled",2);o([s({type:Boolean,attribute:"icon-filled",reflect:!0})],n.prototype,"iconFilled",2);o([s({type:String})],n.prototype,"tooltip",2);o([s({type:String,attribute:"aria-label"})],n.prototype,"ariaLabel",2);o([s({type:String})],n.prototype,"variant",2);o([s({type:String,reflect:!0})],n.prototype,"size",2);o([s({type:String,reflect:!0})],n.prototype,"shape",2);o([s({type:Boolean,reflect:!0})],n.prototype,"toggle",2);o([s({type:Boolean,reflect:!0})],n.prototype,"selected",2);o([s({type:String})],n.prototype,"toggleofficon",2);o([s({type:String})],n.prototype,"toggleonicon",2);o([s({type:Boolean,reflect:!0})],n.prototype,"disabled",2);o([s({type:String,reflect:!0})],n.prototype,"spacing",2);o([s({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",2);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",2);o([s({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",2);o([s({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",2);o([s({type:String})],n.prototype,"href",2);o([s({type:String})],n.prototype,"target",2);o([s({type:String})],n.prototype,"rel",2);n=o([v("scb-icon-button")],n);export{n as ScbIconButton};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as y,n as c,i as x,E as b,x as p,t as w}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,r,i){try{customElements.get(s)||e(s,r,i)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var S=Object.defineProperty,A=Object.getOwnPropertyDescriptor,l=(t,e,s,r)=>{for(var i=r>1?void 0:r?A(e,s):e,n=t.length-1,o;n>=0;n--)(o=t[n])&&(i=(r?o(e,s,i):o(i))||i);return r&&i&&S(e,s,i),i};let k=0,a=class extends x{constructor(){super(),this._internals=null,this.supportingText="
|
|
1
|
+
import{a as y,n as c,i as x,E as b,x as p,t as w}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,r,i){try{customElements.get(s)||e(s,r,i)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var S=Object.defineProperty,A=Object.getOwnPropertyDescriptor,l=(t,e,s,r)=>{for(var i=r>1?void 0:r?A(e,s):e,n=t.length-1,o;n>=0;n--)(o=t[n])&&(i=(r?o(e,s,i):o(i))||i);return r&&i&&S(e,s,i),i};let k=0,a=class extends x{constructor(){super(),this._internals=null,this.supportingText="",this.value="",this.name="",this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.size="default",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++k}`,this._kbMode=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&this._updateInputRingVisibility())},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&this._updateInputRingVisibility()},this._form=null,this._formResetHandler=null,this._initialValue="",this._listScrollHandler=()=>{const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._onWindowResize=this._onWindowResize.bind(this),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0),this._initialValue=this.value??"",this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue;const t=this._inputEl();t&&(t.value=this._initialValue),this._syncFormValue(),this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y()},this._form.addEventListener("reset",this._formResetHandler,!0)),this._syncFormValue()}disconnectedCallback(){const t=this._inputEl();t&&this._boundNativeKeydown&&t.removeEventListener("keydown",this._boundNativeKeydown,!0),this._detachListScrollListener(),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0),this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const t=this._inputEl();t&&(this._boundNativeKeydown=e=>this._handleKey(e),t.addEventListener("keydown",this._boundNativeKeydown,!0),t.disabled=this.disabled),this.applySpacing()}updated(t){if(super.updated(t),this._ensureListboxA11y(),this._updateComboboxA11y(),this._attachListScrollListener(),(t.has("value")||t.has("disabled"))&&this._syncFormValue(),t.has("disabled")){this.toggleAttribute("aria-disabled",this.disabled);const e=this._inputEl();e&&(e.disabled=this.disabled)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing()}render(){const t=(this.value??"").trim().length>0,e=this._inputFocused&&t&&this._hasSuggestions;return p`
|
|
2
2
|
<div class="ripple-wrapper">
|
|
3
3
|
<md-icon class="leading">${t?"arrow_back":"search"}</md-icon>
|
|
4
4
|
|
|
@@ -1,7 +1,19 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
|
|
1
|
+
import{a as w,n as g,i as v,x as b,t as E}from"../../vendor/vendor.js";import"../scb-pagination/scb-pagination.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(a,n,i){try{customElements.get(a)||r(a,n,i)}catch(s){var t=String(s||"");if(t.indexOf("already been used")===-1&&t.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var T=Object.defineProperty,N=Object.getOwnPropertyDescriptor,u=(e,r,a,n)=>{for(var i=n>1?void 0:n?N(r,a):r,t=e.length-1,s;t>=0;t--)(s=e[t])&&(i=(n?s(r,a,i):s(i))||i);return n&&i&&T(r,a,i),i};let p=class extends v{constructor(){super(...arguments),this.searchTerm="",this.pagination=!1,this.filteringSearch=!1,this.noScroll=!1,this.pageSize=10,this.currentPage=1,this.totalRows=0,this._sortedColumn=null,this._sortDirection="asc",this._filteredRows=null,this._onSlotChange=()=>{this.filteringSearch?this._filterTable():this.pagination&&(this._updateTotalRows(),this._paginateTable())},this._onPaginationChange=e=>{const r=e.detail;r&&typeof r.page=="number"&&this._changePage(r.page)}}render(){const e=Math.ceil(this.totalRows/this.pageSize);return b`
|
|
2
|
+
${this.filteringSearch?b`
|
|
3
|
+
<div style="margin-bottom: 12px;">
|
|
4
|
+
<scb-search
|
|
5
|
+
value=${this.searchTerm}
|
|
6
|
+
@input=${r=>this._onSearchInput(r)}
|
|
7
|
+
/>
|
|
8
|
+
</div>
|
|
9
|
+
`:""}
|
|
10
|
+
${this.noScroll?b`<slot @slotchange=${this._onSlotChange}></slot>`:b`
|
|
11
|
+
<div class="scb-table-scroll-wrapper">
|
|
12
|
+
<slot @slotchange=${this._onSlotChange}></slot>
|
|
13
|
+
</div>
|
|
14
|
+
`}
|
|
3
15
|
<div class="pagination">
|
|
4
|
-
${this.pagination&&e>1?
|
|
16
|
+
${this.pagination&&e>1?b`
|
|
5
17
|
<scb-pagination
|
|
6
18
|
.page=${this.currentPage}
|
|
7
19
|
.totalPages=${e}
|
|
@@ -10,17 +22,43 @@ import{a as E,n as u,i as v,x as _,t as N}from"../../vendor/vendor.js";import"..
|
|
|
10
22
|
></scb-pagination>
|
|
11
23
|
`:""}
|
|
12
24
|
</div>
|
|
13
|
-
`}firstUpdated(){const e=this.shadowRoot.querySelector("slot");e&&(e.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}_attachThListeners(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const
|
|
25
|
+
`}_onSearchInput(e){const r=e.target.value;this.searchTerm=r,this._filterTable()}_filterTable(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let a=null;if(r.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const o=s.querySelector("tbody");o&&(a=o)}}),!a)return;const n=a,i=Array.from(n.querySelectorAll("tr")),t=this.searchTerm.trim().toLowerCase();if(!t)this._filteredRows=null,i.forEach(s=>s.style.display=""),this._updateTotalRows(),this.pagination&&this._paginateTable(),this._sortedColumn!==null&&this._sortTable(this._sortedColumn,this._sortDirection);else{this._filteredRows=i.filter(o=>(o.textContent?.toLowerCase()??"").includes(t)),i.forEach(o=>o.style.display="none");let s=this._filteredRows;this._sortedColumn!==null&&(s=[...s],s.sort((o,l)=>{const c=o.children[this._sortedColumn]?.textContent?.trim()??"",h=l.children[this._sortedColumn]?.textContent?.trim()??"",d=Date.parse(c.replace(/\s+/g," ")),f=Date.parse(h.replace(/\s+/g," "));if(!isNaN(d)&&!isNaN(f))return this._sortDirection==="asc"?d-f:f-d;const y=parseFloat(c.replace(",",".")),m=parseFloat(h.replace(",","."));if(!isNaN(y)&&!isNaN(m))return this._sortDirection==="asc"?y-m:m-y;const _=c.localeCompare(h,"sv");return this._sortDirection==="asc"?_:-_}),this._filteredRows=s),this.totalRows=this._filteredRows.length,this.pagination?this._paginateTable():this._filteredRows.forEach(o=>o.style.display="")}}firstUpdated(){const e=this.shadowRoot.querySelector("slot");e&&(e.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}_attachThListeners(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0}),a=[],n=[],i=[];r.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&(a.push(...t.querySelectorAll("th")),n.push(...t.querySelectorAll("td")),i.push(...t.querySelectorAll("tr")))}),a.forEach((t,s)=>{t.style.textAlign="left",t.style.padding="16px 0px 16px 32px",t.style.position="relative",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-label-medium-font)",t.style.fontSize="var(--md-sys-typescale-label-medium-size)",t.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-label-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)";const o=t.firstChild;if(o&&o.nodeType===Node.TEXT_NODE&&o.textContent?.trim()||o&&o.nodeType===Node.ELEMENT_NODE&&o.tagName.toLowerCase()!=="p"){const c=document.createElement("p");c.textContent=o.textContent?o.textContent.trim():"",c.style.margin="0",t.replaceChild(c,o),t.querySelectorAll("scb-icon-button.scb-sort-icon").forEach(d=>d.remove());const h=document.createElement("scb-icon-button");h.className="scb-sort-icon",h.onclick=()=>this._onThClick(s),h.setAttribute("variant","standard"),this._sortedColumn===s?(h.setAttribute("variant","filled-tonal"),h.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(h.setAttribute("icon","swap_horiz"),h.style.transform+=" rotate(90deg)");var l=document.createElement("div");l.style.display="flex",l.style.gap="8px",l.style.flexWrap="nowrap",l.style.alignItems="center",l.appendChild(c),l.appendChild(h),t.appendChild(l)}}),n.forEach(t=>{t.style.padding="16px 0px 16px 32px",t.style.textAlign="left",t.style.borderTop="1px solid var(--md-sys-color-outline-variant)",t.style.verticalAlign="text-top",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-body-medium-font)",t.style.fontSize="var(--md-sys-typescale-body-medium-size)",t.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)"}),i.forEach(t=>{const s=t.querySelectorAll("th");s.length>0&&s.forEach((l,c)=>{c===0&&(l.style.paddingLeft="24px"),c===s.length-1?l.style.paddingRight="24px":l.style.paddingRight=""});const o=t.querySelectorAll("td");o.length>0&&o.forEach((l,c)=>{c===0&&(l.style.paddingLeft="24px"),c===o.length-1?l.style.paddingRight="24px":l.style.paddingRight=""})}),this.pagination&&this._paginateTable()}_onThClick(e){this._sortedColumn===e?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=e,this._sortDirection="asc"),this._sortTable(e,this._sortDirection),this._attachThListeners()}_sortTable(e,r){const a=this.shadowRoot.querySelector("slot");if(!a)return;const n=a.assignedNodes({flatten:!0});let i=null;if(n.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const o=s.querySelector("tbody");o&&(i=o)}}),!i)return;let t;this._filteredRows?t=[...this._filteredRows]:t=Array.from(i.querySelectorAll("tr")),t.sort((s,o)=>{const l=s.children[e]?.textContent?.trim()??"",c=o.children[e]?.textContent?.trim()??"",h=Date.parse(l.replace(/\s+/g," ")),d=Date.parse(c.replace(/\s+/g," "));if(!isNaN(h)&&!isNaN(d))return r==="asc"?h-d:d-h;const f=parseFloat(l.replace(",",".")),y=parseFloat(c.replace(",","."));if(!isNaN(f)&&!isNaN(y))return r==="asc"?f-y:y-f;const m=l.localeCompare(c,"sv");return r==="asc"?m:-m}),t.forEach(s=>i.appendChild(s)),this._filteredRows&&(this._filteredRows=t,this.totalRows=this._filteredRows.length),this.pagination&&this._paginateTable()}_updateTotalRows(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let a=null;r.forEach(n=>{if(n.nodeType===Node.ELEMENT_NODE){const i=n.querySelector("tbody");i&&(a=i)}}),a&&(this.totalRows=a.querySelectorAll("tr").length)}_paginateTable(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const r=e.assignedNodes({flatten:!0});let a=null;if(r.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const o=s.querySelector("tbody");o&&(a=o)}}),!a)return;let n;this._filteredRows?n=this._filteredRows:n=Array.from(a.querySelectorAll("tr")),Array.from(a.querySelectorAll("tr")).forEach(s=>s.style.display="none");const i=(this.currentPage-1)*this.pageSize,t=i+this.pageSize;n.slice(i,t).forEach(s=>s.style.display="")}_changePage(e){const r=Math.ceil(this.totalRows/this.pageSize);e<1||e>r||(this.currentPage=e,this._paginateTable(),this.requestUpdate())}};p.styles=w`
|
|
14
26
|
:host {
|
|
15
27
|
display: block;
|
|
16
28
|
color: var(--md-sys-color-on-surface);
|
|
17
29
|
font-family: var(--brand, Inter);
|
|
18
30
|
}
|
|
31
|
+
scb-search{
|
|
32
|
+
max-width: 400px;
|
|
33
|
+
}
|
|
34
|
+
.scb-table-scroll-wrapper {
|
|
35
|
+
width: 100%;
|
|
36
|
+
overflow-x: auto;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
max-width: 100%;
|
|
39
|
+
/* Optional: set max-height if you want vertical scroll */
|
|
40
|
+
}
|
|
41
|
+
.scb-table-scroll-wrapper::-webkit-scrollbar {
|
|
42
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
43
|
+
height: 8px;
|
|
44
|
+
width: 10px;
|
|
45
|
+
}
|
|
46
|
+
.scb-table-scroll-wrapper::-webkit-scrollbar-thumb {
|
|
47
|
+
background: var(--md-sys-color-on-surface);
|
|
48
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
}
|
|
51
|
+
.scb-table-scroll-wrapper::-webkit-scrollbar-track {
|
|
52
|
+
background: var(--md-sys-color-secondary-container);
|
|
53
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
54
|
+
}
|
|
19
55
|
::slotted(table) {
|
|
20
56
|
border-collapse: collapse;
|
|
21
57
|
border-spacing: 0;
|
|
22
58
|
border-radius: 24px;
|
|
23
|
-
|
|
59
|
+
min-width: 100%;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
/* Remove overflow: hidden to allow scroll */
|
|
24
62
|
}
|
|
25
63
|
.pagination {
|
|
26
64
|
margin-top: 16px;
|
|
@@ -33,4 +71,4 @@ import{a as E,n as u,i as v,x as _,t as N}from"../../vendor/vendor.js";import"..
|
|
|
33
71
|
::slotted(th:hover) .scb-sort-icon {
|
|
34
72
|
pointer-events: auto;
|
|
35
73
|
}
|
|
36
|
-
`;
|
|
74
|
+
`;u([g({type:String})],p.prototype,"searchTerm",2);u([g({type:Boolean,attribute:"with-pagination"})],p.prototype,"pagination",2);u([g({type:Boolean,attribute:"with-filtering-search"})],p.prototype,"filteringSearch",2);u([g({type:Boolean,attribute:"no-scroll"})],p.prototype,"noScroll",2);u([g({type:Number,attribute:"page-size"})],p.prototype,"pageSize",2);u([g({type:Number})],p.prototype,"currentPage",2);u([g({type:Number})],p.prototype,"totalRows",2);p=u([E("scb-table-advanced")],p);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.180",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -373,5 +373,5 @@
|
|
|
373
373
|
},
|
|
374
374
|
"./mvc/*": "./mvc/*"
|
|
375
375
|
},
|
|
376
|
-
"buildHash": "
|
|
376
|
+
"buildHash": "3576E06B64640AA52DF7AAE289386472C21BA73A7FB8853637D630F4BBB0F5E5"
|
|
377
377
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { LitElement, TemplateResult, PropertyValues } from 'lit';
|
|
2
2
|
type IconVariant = 'filled' | 'outlined' | 'filled-tonal' | 'standard';
|
|
3
|
+
type IconButtonSize = 'small' | 'medium' | 'large';
|
|
4
|
+
type IconButtonShape = 'round' | 'square';
|
|
3
5
|
export declare class ScbIconButton extends LitElement {
|
|
4
6
|
#private;
|
|
5
7
|
/** Visuell ikon. */
|
|
@@ -14,6 +16,10 @@ export declare class ScbIconButton extends LitElement {
|
|
|
14
16
|
ariaLabel: string;
|
|
15
17
|
/** Variant enligt Material. */
|
|
16
18
|
variant: IconVariant;
|
|
19
|
+
/** Storlek på ikonknappen. */
|
|
20
|
+
size: IconButtonSize;
|
|
21
|
+
/** Form på ikonknappen. */
|
|
22
|
+
shape: IconButtonShape;
|
|
17
23
|
/** Toggle-läge. */
|
|
18
24
|
toggle: boolean;
|
|
19
25
|
/** Om komponenten är vald i toggle-läge. */
|