scb-wc-test 0.1.148 → 0.1.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as m,n as d,e as
|
|
1
|
+
import{a as m,n as d,e as h,i as f,x as b,t as _}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../scb-menu/scb-menu.js";import"../../vendor/vendor-material.js";import"../scb-menu/scb-menu-item.js";import"../scb-divider/scb-divider.js";import"../scb-menu/scb-sub-menu.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(n,s,i){try{customElements.get(n)||t(n,s,i)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,a=(e,t,n,s)=>{for(var i=s>1?void 0:s?g(t,n):t,l=e.length-1,p;l>=0;l--)(p=e[l])&&(i=(s?p(t,n,i):p(i))||i);return s&&i&&y(t,n,i),i};let r=class extends f{constructor(){super(...arguments),this.label="Dropdown",this.variant="filled",this.open=!1,this.disabled=!1,this.menuGap="3",this.width=null,this.maxWidth=null,this._slottedMenuEl=null,this._openSettledTimer=null,this._menuCloseTimer=null,this._panelResizeObserver=null,this._panelHeightSyncRaf=null,this._onDocumentClickBound=e=>{!this.open||e.composedPath().includes(this)||(this.open=!1)},this._onDocumentKeydownBound=e=>{this.open&&e.key==="Escape"&&(this.open=!1)},this._onSlottedMenuOpen=()=>{this.open||(this.open=!0)},this._onSlottedMenuClose=()=>{this.open&&(this.open=!1)},this._onSlotChange=()=>{this._syncSlottedMenu(),this._applyPanelSizing(),this._applyInertByOpen(),this.requestUpdate()},this._onTriggerClick=e=>{e.stopPropagation(),!this.disabled&&(this.open=!this.open)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._onDocumentClickBound),document.addEventListener("keydown",this._onDocumentKeydownBound)}disconnectedCallback(){document.removeEventListener("click",this._onDocumentClickBound),document.removeEventListener("keydown",this._onDocumentKeydownBound),this._detachSlottedMenuListeners(),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._panelHeightSyncRaf!==null&&(window.cancelAnimationFrame(this._panelHeightSyncRaf),this._panelHeightSyncRaf=null),this._openSettledTimer!==null&&(window.clearTimeout(this._openSettledTimer),this._openSettledTimer=null),this._menuCloseTimer!==null&&(window.clearTimeout(this._menuCloseTimer),this._menuCloseTimer=null),super.disconnectedCallback()}firstUpdated(e){super.firstUpdated(e),this._syncSlottedMenu(),this._applyPanelVars(),this._applyPanelSizing(),this._applyChevronState(),this._applyInertByOpen(),this._setupPanelResizeObserver(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen()}updated(e){super.updated(e),e.has("menuGap")&&this._applyPanelVars(),(e.has("width")||e.has("maxWidth"))&&this._applyPanelSizing(),e.has("open")&&(this.open||this._closeAllSubMenus(),this._syncSlottedMenuOpen(),this._applyChevronState(),this._applyInertByOpen(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen())}_applyPanelVars(){if(this.menuGap==null||String(this.menuGap).trim()===""){this.style.removeProperty("--scb-dropdown-panel-gap");return}this.style.setProperty("--scb-dropdown-panel-gap",this._mapSpacingToken(this.menuGap))}_applyPanelSizing(){const e=this.renderRoot.querySelector(".panel-surface");e&&(this.width&&String(this.width).trim()!==""?e.style.inlineSize=this.width:e.style.removeProperty("inline-size"),this.maxWidth&&String(this.maxWidth).trim()!==""?e.style.maxInlineSize=this.maxWidth:e.style.removeProperty("max-inline-size")),this._slottedMenuEl&&(this.width&&String(this.width).trim()!==""?this._slottedMenuEl.style.inlineSize=this.width:this._slottedMenuEl.style.removeProperty("inline-size"),this.maxWidth&&String(this.maxWidth).trim()!==""?this._slottedMenuEl.style.maxInlineSize=this.maxWidth:this._slottedMenuEl.style.removeProperty("max-inline-size")),this._schedulePanelHeightSync()}_setupPanelResizeObserver(){if(this._panelResizeObserver||typeof ResizeObserver>"u")return;const e=this._panelInnerEl;e&&(this._panelResizeObserver=new ResizeObserver(()=>{this._schedulePanelHeightSync()}),this._panelResizeObserver.observe(e))}_schedulePanelHeightSync(){this._panelHeightSyncRaf===null&&(this._panelHeightSyncRaf=window.requestAnimationFrame(()=>{this._panelHeightSyncRaf=null,this._syncPanelMaxHeightByOpen()}))}_syncPanelMaxHeightByOpen(){const e=this._panelSurfaceEl;if(!e)return;if(this._slottedMenuEl){e.style.removeProperty("--scb-dropdown-panel-current-max-height");return}if(!this.open){e.style.setProperty("--scb-dropdown-panel-current-max-height","0px");return}const t=this._panelInnerEl;if(!t)return;const n=`${Math.ceil(t.scrollHeight)}px`;e.style.getPropertyValue("--scb-dropdown-panel-current-max-height").trim()!==n&&e.style.setProperty("--scb-dropdown-panel-current-max-height",n)}_mapSpacingToken(e){const t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_syncSlottedMenu(){const t=(this._slotEl?.assignedElements({flatten:!0})??[]).find(n=>n.tagName.toLowerCase()==="scb-menu");if(t===this._slottedMenuEl){this._syncSlottedMenuOpen();return}this._detachSlottedMenuListeners(),this._slottedMenuEl=t??null,this._slottedMenuEl&&(this._slottedMenuEl.addEventListener("open",this._onSlottedMenuOpen),this._slottedMenuEl.addEventListener("close",this._onSlottedMenuClose),this._syncSlottedMenuOpen())}_detachSlottedMenuListeners(){this._slottedMenuEl&&(this._slottedMenuEl.removeEventListener("open",this._onSlottedMenuOpen),this._slottedMenuEl.removeEventListener("close",this._onSlottedMenuClose))}_syncSlottedMenuOpen(){if(!this._slottedMenuEl)return;if(this._menuCloseTimer!==null&&(window.clearTimeout(this._menuCloseTimer),this._menuCloseTimer=null),this.open){this._slottedMenuEl.open=!0;return}const e=this._getPanelTransitionMs();if(e<=0){this._slottedMenuEl.open=!1;return}this._menuCloseTimer=window.setTimeout(()=>{this._menuCloseTimer=null,!this.open&&this._slottedMenuEl&&(this._slottedMenuEl.open=!1)},e)}_syncOverflowVisibilityByOpen(){if(this._openSettledTimer!==null&&(window.clearTimeout(this._openSettledTimer),this._openSettledTimer=null),this.removeAttribute("data-open-settled"),!this.open)return;const e=this.renderRoot.querySelector(".panel-surface");if(!e){this.setAttribute("data-open-settled","");return}const t=this._getTransitionMs(e);if(t<=0){this.setAttribute("data-open-settled","");return}this._openSettledTimer=window.setTimeout(()=>{this._openSettledTimer=null,this.open&&this.setAttribute("data-open-settled","")},t)}_getPanelTransitionMs(){const e=this.renderRoot.querySelector(".panel-surface");return e?this._getTransitionMs(e):0}_getTransitionMs(e){const t=getComputedStyle(e),n=t.transitionDuration.split(",").map(o=>o.trim()),s=t.transitionDelay.split(",").map(o=>o.trim()),i=o=>{const u=parseFloat(o);return Number.isFinite(u)?o.endsWith("ms")?u:o.endsWith("s")?u*1e3:u:0},l=Math.max(n.length,s.length);let p=0;for(let o=0;o<l;o+=1){const u=i(n[o]??n[n.length-1]??"0s"),c=i(s[o]??s[s.length-1]??"0s");p=Math.max(p,u+c)}return Math.ceil(p)}_applyInertByOpen(){const e=this.renderRoot.querySelector(".panel");e&&(this.open?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false"),this._restoreTabIndexesIfNeeded()):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true"),this._removeTabIndexesIfNeeded()))}_supportsInert(){return"inert"in HTMLElement.prototype}_collectFocusableFromSlot(){const e=this._slotEl;if(!e)return[];const t=e.assignedElements({flatten:!0}),n=[],s=i=>{i instanceof HTMLElement&&i.matches("a,button,input,select,textarea,[tabindex]")&&n.push(i)};return t.forEach(i=>{s(i),i.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(l=>s(l))}),n}_removeTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const n=t.getAttribute("tabindex");n!==null&&t.setAttribute("data-scb-prev-tabindex",n),t.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){if(this._supportsInert())return;this._collectFocusableFromSlot().forEach(t=>{const n=t.getAttribute("data-scb-prev-tabindex");n!==null?(t.setAttribute("tabindex",n),t.removeAttribute("data-scb-prev-tabindex")):t.removeAttribute("tabindex")})}_closeAllSubMenus(){const e=this.querySelectorAll("scb-sub-menu");for(const t of e)t.removeAttribute("open")}_applyChevronState(){const e=this._getChevronIconEl();e&&(e.style.transition="transform var(--motion-duration-medium, 200ms) var(--motion-easing-standard, ease)",e.style.transformOrigin="center",e.style.transform=this.open?"rotate(180deg)":"rotate(0deg)")}_getChevronIconEl(){const t=this._triggerEl?.shadowRoot;return t?t.querySelector('md-icon[slot="icon"]')??t.querySelector("md-icon"):null}render(){const e=!!this._slottedMenuEl;return b`
|
|
2
2
|
<scb-button
|
|
3
3
|
label=${this.label}
|
|
4
4
|
variant=${this.variant}
|
|
@@ -56,7 +56,8 @@ import{a as m,n as d,e as u,i as f,x as b,t as _}from"../../vendor/vendor.js";im
|
|
|
56
56
|
max-width: var(--scb-dropdown-panel-max-width, 600px);
|
|
57
57
|
background: var(--md-sys-color-surface, #ffffff);
|
|
58
58
|
box-shadow: var(--elevation-2, 0px 2px 10px rgba(0, 0, 0, 0.12));
|
|
59
|
-
|
|
59
|
+
padding-right: var(--spacing-4, 12px);
|
|
60
|
+
padding-left: var(--spacing-4, 12px);
|
|
60
61
|
opacity: 0;
|
|
61
62
|
max-height: var(--scb-dropdown-panel-current-max-height, 0px);
|
|
62
63
|
transition:
|
|
@@ -169,20 +170,8 @@ import{a as m,n as d,e as u,i as f,x as b,t as _}from"../../vendor/vendor.js";im
|
|
|
169
170
|
width: fit-content;
|
|
170
171
|
}
|
|
171
172
|
|
|
172
|
-
::slotted(scb-checkbox) {
|
|
173
|
-
display: block;
|
|
174
|
-
padding-right: var(--spacing-4, 12px);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
::slotted(scb-button) {
|
|
178
|
-
|
|
179
|
-
padding-right: var(--spacing-4, 12px);
|
|
180
|
-
padding-left: var(--spacing-4, 12px);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
173
|
::slotted(scb-drawer) {
|
|
184
|
-
|
|
185
|
-
padding-right: var(--spacing-4, 12px);
|
|
174
|
+
padding: 0;
|
|
186
175
|
}
|
|
187
176
|
|
|
188
177
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -190,4 +179,4 @@ import{a as m,n as d,e as u,i as f,x as b,t as _}from"../../vendor/vendor.js";im
|
|
|
190
179
|
transition: none;
|
|
191
180
|
}
|
|
192
181
|
}
|
|
193
|
-
`;a([d({type:String})],r.prototype,"label",2);a([d({type:String})],r.prototype,"variant",2);a([d({type:Boolean,reflect:!0})],r.prototype,"open",2);a([d({type:Boolean,reflect:!0})],r.prototype,"disabled",2);a([d({type:String,attribute:"menu-gap"})],r.prototype,"menuGap",2);a([d({type:String})],r.prototype,"width",2);a([d({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([
|
|
182
|
+
`;a([d({type:String})],r.prototype,"label",2);a([d({type:String})],r.prototype,"variant",2);a([d({type:Boolean,reflect:!0})],r.prototype,"open",2);a([d({type:Boolean,reflect:!0})],r.prototype,"disabled",2);a([d({type:String,attribute:"menu-gap"})],r.prototype,"menuGap",2);a([d({type:String})],r.prototype,"width",2);a([d({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([h("scb-button")],r.prototype,"_triggerEl",2);a([h("slot")],r.prototype,"_slotEl",2);a([h(".panel-surface")],r.prototype,"_panelSurfaceEl",2);a([h(".panel-inner")],r.prototype,"_panelInnerEl",2);r=a([_("scb-dropdown")],r);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.149",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -369,5 +369,5 @@
|
|
|
369
369
|
},
|
|
370
370
|
"./mvc/*": "./mvc/*"
|
|
371
371
|
},
|
|
372
|
-
"buildHash": "
|
|
372
|
+
"buildHash": "0F3668A5F59CA2F3124411973DB660088CB541B265C1799A2C4DC631007CF597"
|
|
373
373
|
}
|
|
@@ -2,10 +2,10 @@ import { css as m, LitElement as f, html as b } from "lit";
|
|
|
2
2
|
import { property as d, query as u, customElement as y } from "lit/decorators.js";
|
|
3
3
|
import "../scb-button/scb-button.js";
|
|
4
4
|
import "../scb-menu/scb-menu.js";
|
|
5
|
-
var _ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, n,
|
|
6
|
-
for (var
|
|
7
|
-
(l = e[p]) && (
|
|
8
|
-
return
|
|
5
|
+
var _ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, n, s) => {
|
|
6
|
+
for (var i = s > 1 ? void 0 : s ? v(t, n) : t, p = e.length - 1, l; p >= 0; p--)
|
|
7
|
+
(l = e[p]) && (i = (s ? l(t, n, i) : l(i)) || i);
|
|
8
|
+
return s && i && _(t, n, i), i;
|
|
9
9
|
};
|
|
10
10
|
let r = class extends f {
|
|
11
11
|
constructor() {
|
|
@@ -80,7 +80,7 @@ let r = class extends f {
|
|
|
80
80
|
}
|
|
81
81
|
_syncSlottedMenu() {
|
|
82
82
|
var n;
|
|
83
|
-
const t = (((n = this._slotEl) == null ? void 0 : n.assignedElements({ flatten: !0 })) ?? []).find((
|
|
83
|
+
const t = (((n = this._slotEl) == null ? void 0 : n.assignedElements({ flatten: !0 })) ?? []).find((s) => s.tagName.toLowerCase() === "scb-menu");
|
|
84
84
|
if (t === this._slottedMenuEl) {
|
|
85
85
|
this._syncSlottedMenuOpen();
|
|
86
86
|
return;
|
|
@@ -126,13 +126,13 @@ let r = class extends f {
|
|
|
126
126
|
return e ? this._getTransitionMs(e) : 0;
|
|
127
127
|
}
|
|
128
128
|
_getTransitionMs(e) {
|
|
129
|
-
const t = getComputedStyle(e), n = t.transitionDuration.split(",").map((o) => o.trim()),
|
|
129
|
+
const t = getComputedStyle(e), n = t.transitionDuration.split(",").map((o) => o.trim()), s = t.transitionDelay.split(",").map((o) => o.trim()), i = (o) => {
|
|
130
130
|
const h = parseFloat(o);
|
|
131
131
|
return Number.isFinite(h) ? o.endsWith("ms") ? h : o.endsWith("s") ? h * 1e3 : h : 0;
|
|
132
|
-
}, p = Math.max(n.length,
|
|
132
|
+
}, p = Math.max(n.length, s.length);
|
|
133
133
|
let l = 0;
|
|
134
134
|
for (let o = 0; o < p; o += 1) {
|
|
135
|
-
const h =
|
|
135
|
+
const h = i(n[o] ?? n[n.length - 1] ?? "0s"), c = i(s[o] ?? s[s.length - 1] ?? "0s");
|
|
136
136
|
l = Math.max(l, h + c);
|
|
137
137
|
}
|
|
138
138
|
return Math.ceil(l);
|
|
@@ -147,12 +147,12 @@ let r = class extends f {
|
|
|
147
147
|
_collectFocusableFromSlot() {
|
|
148
148
|
const e = this._slotEl;
|
|
149
149
|
if (!e) return [];
|
|
150
|
-
const t = e.assignedElements({ flatten: !0 }), n = [],
|
|
151
|
-
|
|
150
|
+
const t = e.assignedElements({ flatten: !0 }), n = [], s = (i) => {
|
|
151
|
+
i instanceof HTMLElement && i.matches("a,button,input,select,textarea,[tabindex]") && n.push(i);
|
|
152
152
|
};
|
|
153
|
-
return t.forEach((
|
|
153
|
+
return t.forEach((i) => {
|
|
154
154
|
var p;
|
|
155
|
-
i
|
|
155
|
+
s(i), (p = i.querySelectorAll) == null || p.call(i, "a,button,input,select,textarea,[tabindex]").forEach((l) => s(l));
|
|
156
156
|
}), n;
|
|
157
157
|
}
|
|
158
158
|
_removeTabIndexesIfNeeded() {
|
|
@@ -245,7 +245,8 @@ r.styles = m`
|
|
|
245
245
|
max-width: var(--scb-dropdown-panel-max-width, 600px);
|
|
246
246
|
background: var(--md-sys-color-surface, #ffffff);
|
|
247
247
|
box-shadow: var(--elevation-2, 0px 2px 10px rgba(0, 0, 0, 0.12));
|
|
248
|
-
|
|
248
|
+
padding-right: var(--spacing-4, 12px);
|
|
249
|
+
padding-left: var(--spacing-4, 12px);
|
|
249
250
|
opacity: 0;
|
|
250
251
|
max-height: var(--scb-dropdown-panel-current-max-height, 0px);
|
|
251
252
|
transition:
|
|
@@ -358,20 +359,8 @@ r.styles = m`
|
|
|
358
359
|
width: fit-content;
|
|
359
360
|
}
|
|
360
361
|
|
|
361
|
-
::slotted(scb-checkbox) {
|
|
362
|
-
display: block;
|
|
363
|
-
padding-right: var(--spacing-4, 12px);
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
::slotted(scb-button) {
|
|
367
|
-
|
|
368
|
-
padding-right: var(--spacing-4, 12px);
|
|
369
|
-
padding-left: var(--spacing-4, 12px);
|
|
370
|
-
}
|
|
371
|
-
|
|
372
362
|
::slotted(scb-drawer) {
|
|
373
|
-
|
|
374
|
-
padding-right: var(--spacing-4, 12px);
|
|
363
|
+
padding: 0;
|
|
375
364
|
}
|
|
376
365
|
|
|
377
366
|
@media (prefers-reduced-motion: reduce) {
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -5973,7 +5973,8 @@ ${this.value}</textarea
|
|
|
5973
5973
|
max-width: var(--scb-dropdown-panel-max-width, 600px);
|
|
5974
5974
|
background: var(--md-sys-color-surface, #ffffff);
|
|
5975
5975
|
box-shadow: var(--elevation-2, 0px 2px 10px rgba(0, 0, 0, 0.12));
|
|
5976
|
-
|
|
5976
|
+
padding-right: var(--spacing-4, 12px);
|
|
5977
|
+
padding-left: var(--spacing-4, 12px);
|
|
5977
5978
|
opacity: 0;
|
|
5978
5979
|
max-height: var(--scb-dropdown-panel-current-max-height, 0px);
|
|
5979
5980
|
transition:
|
|
@@ -6086,20 +6087,8 @@ ${this.value}</textarea
|
|
|
6086
6087
|
width: fit-content;
|
|
6087
6088
|
}
|
|
6088
6089
|
|
|
6089
|
-
::slotted(scb-checkbox) {
|
|
6090
|
-
display: block;
|
|
6091
|
-
padding-right: var(--spacing-4, 12px);
|
|
6092
|
-
}
|
|
6093
|
-
|
|
6094
|
-
::slotted(scb-button) {
|
|
6095
|
-
|
|
6096
|
-
padding-right: var(--spacing-4, 12px);
|
|
6097
|
-
padding-left: var(--spacing-4, 12px);
|
|
6098
|
-
}
|
|
6099
|
-
|
|
6100
6090
|
::slotted(scb-drawer) {
|
|
6101
|
-
|
|
6102
|
-
padding-right: var(--spacing-4, 12px);
|
|
6091
|
+
padding: 0;
|
|
6103
6092
|
}
|
|
6104
6093
|
|
|
6105
6094
|
@media (prefers-reduced-motion: reduce) {
|