scb-wc 0.1.170 → 0.1.172
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{d as b,g as
|
|
1
|
+
import{d as b,g as z,h as O,m as I,p as d,v as f,y as L}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import{ensureFocusRingOnFocusVisible as $}from"../shared/lazy-focus-ring.js";import{t as H}from"../../vendor/component-defaults.js";import{t as l}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";import"../scb-button/scb-button.js";import{closeManualPopover as M,closeManualPopoverAfterAnimations as W,isManualPopoverOpen as E,openManualPopover as B}from"../shared/manual-popover.js";import"../scb-options-menu/scb-options-menu.js";(function(){try{var u=typeof globalThis<"u"?globalThis:window;if(!u.__scb_ce_guard_installed__){u.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,s,i){try{customElements.get(t)||e(t,s,i)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var y,F=()=>{if(typeof window>"u"||typeof document>"u"||!("customElements"in window)||document.head.querySelector("style[data-scb-dropdown-pre-upgrade]"))return;const u=document.createElement("style");u.setAttribute("data-scb-dropdown-pre-upgrade",""),u.textContent=`
|
|
2
2
|
scb-dropdown:not(:defined) {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
position: relative;
|
|
@@ -34,8 +34,8 @@ import{d as b,g as _,h as E,m as P,p,v as g,y as k}from"../../vendor/vendor.js";
|
|
|
34
34
|
scb-dropdown:not(:defined) > * {
|
|
35
35
|
display: none;
|
|
36
36
|
}
|
|
37
|
-
`,document.head.appendChild(h);const e=n=>{const o=String(n??"").trim();if(o)return/^\d+$/.test(o)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(o,10)))})`:o},t=n=>{const o=e(n.getAttribute("spacing")),d=e(n.getAttribute("spacing-top"))??o,r=e(n.getAttribute("spacing-bottom"))??o,c=e(n.getAttribute("spacing-left")),u=e(n.getAttribute("spacing-right"));d?n.style.setProperty("--scb-dropdown-spacing-block-start",d):n.style.removeProperty("--scb-dropdown-spacing-block-start"),r?n.style.setProperty("--scb-dropdown-spacing-block-end",r):n.style.removeProperty("--scb-dropdown-spacing-block-end"),c?n.style.setProperty("--scb-dropdown-spacing-inline-start",c):n.style.removeProperty("--scb-dropdown-spacing-inline-start"),u?n.style.setProperty("--scb-dropdown-spacing-inline-end",u):n.style.removeProperty("--scb-dropdown-spacing-inline-end")};document.querySelectorAll("scb-dropdown").forEach(t);const i=new MutationObserver(n=>{for(const o of n){if(o.type==="attributes"){const d=o.target;d instanceof HTMLElement&&d.tagName.toLowerCase()==="scb-dropdown"&&t(d);continue}if(o.type==="childList"){const d=[...Array.from(o.addedNodes),...Array.from(o.removedNodes)];for(const r of d)if(r instanceof HTMLElement){if(r.tagName.toLowerCase()==="scb-dropdown"){t(r);continue}r.querySelectorAll?.("scb-dropdown").forEach(c=>{c instanceof HTMLElement&&t(c)})}}}});i.observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["spacing","spacing-top","spacing-bottom","spacing-left","spacing-right"]}),customElements.whenDefined("scb-dropdown").then(()=>{i.disconnect()})};O();var a=(f=class extends E{constructor(...e){super(...e),this.label="Dropdown",this.variant="filled",this.size=C["scb-dropdown"].size,this.open=!1,this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.menuGap="3",this.width=null,this.minWidth=null,this.maxWidth=null,this.dataIndex=null,this.ariaCurrent=null,this._slottedMenuEl=null,this._openSettledTimer=null,this._menuCloseTimer=null,this._panelResizeObserver=null,this._panelHeightSyncRaf=null,this._panelPlacementRaf=null,this._onViewportChange=()=>{this.open&&this._schedulePanelPlacement()},this._onDocumentClickBound=t=>{if(!this.open)return;const s=t.composedPath(),i=s.find(n=>n instanceof HTMLElement&&n.tagName.toLowerCase()==="scb-dropdown");if(i&&i!==this){this.open=!1;return}s.includes(this)||(this.open=!1)},this._onDocumentKeydownBound=t=>{this.open&&t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),this.open=!1,this.updateComplete.then(()=>this.focus({preventScroll:!0})))},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=t=>{this.hasAttribute("as-tab")||t.stopPropagation(),!this.disabled&&(this.open=!this.open)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._onDocumentClickBound,!0),document.addEventListener("keydown",this._onDocumentKeydownBound),window.addEventListener("resize",this._onViewportChange,{passive:!0}),window.addEventListener("scroll",this._onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener("click",this._onDocumentClickBound,!0),document.removeEventListener("keydown",this._onDocumentKeydownBound),window.removeEventListener("resize",this._onViewportChange),window.removeEventListener("scroll",this._onViewportChange,!0),this._detachSlottedMenuListeners(),x(this.renderRoot.querySelector(".panel")),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._panelHeightSyncRaf!==null&&(window.cancelAnimationFrame(this._panelHeightSyncRaf),this._panelHeightSyncRaf=null),this._panelPlacementRaf!==null&&(window.cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=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(),this._syncPanelPopover()}updated(e){super.updated(e),e.has("menuGap")&&this._applyPanelVars(),(e.has("width")||e.has("minWidth")||e.has("maxWidth"))&&this._applyPanelSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing(),e.has("open")&&(this.open||this._closeAllSubMenus(),this._syncSlottedMenuOpen(),this._applyChevronState(),this._applyInertByOpen(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen(),this._syncPanelPopover(),this.dispatchEvent(new CustomEvent("openchange",{bubbles:!0,composed:!0,detail:{open:this.open}})))}_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.minWidth&&String(this.minWidth).trim()!==""?e.style.minInlineSize=this.minWidth:e.style.removeProperty("min-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.minWidth&&String(this.minWidth).trim()!==""?this._slottedMenuEl.style.minInlineSize=this.minWidth:this._slottedMenuEl.style.removeProperty("min-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()}))}_schedulePanelPlacement(){this._panelPlacementRaf===null&&(this._panelPlacementRaf=window.requestAnimationFrame(()=>{this._panelPlacementRaf=null,this._positionPanelInViewport()}))}_syncPanelPopover(){const e=this.renderRoot.querySelector(".panel");if(!e)return;if(this.open){R(e)&&this._schedulePanelPlacement();return}const t=()=>{this._panelSurfaceEl?.style.removeProperty("--scb-dropdown-panel-viewport-max-height"),e.style.removeProperty("position"),e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("top"),e.style.removeProperty("bottom"),e.style.removeProperty("width")};S(e)?A(e,t,this._panelSurfaceEl??e):(x(e),t())}_positionPanelInViewport(){const e=this.renderRoot.querySelector(".panel"),t=this._triggerEl;if(!e||!t||!S(e))return;const s=this._panelSurfaceEl,i=t.getBoundingClientRect(),n=s?.getBoundingClientRect(),o=8,d=Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-dropdown-panel-gap")),r=Number.isFinite(d)?d:8,c=Math.max(0,window.innerWidth-o*2),u=n?.width||s?.scrollWidth||i.width,v=Math.min(Math.max(i.width,u),c),z=Math.min(Math.max(i.left,o),window.innerWidth-o-v);e.style.position="fixed",e.style.left=`${Math.round(z)}px`,e.style.right="auto",e.style.width=`${Math.round(v)}px`;const m=window.innerHeight-i.bottom-r-o,y=i.top-r-o,w=(s?.scrollHeight||n?.height||0)>m&&y>m,M=Math.max(0,w?y:m);s?.style.setProperty("--scb-dropdown-panel-viewport-max-height",`${Math.floor(M)}px`),w?(e.style.top="auto",e.style.bottom=`${Math.round(window.innerHeight-i.top+r)}px`):(e.style.top=`${Math.round(i.bottom+r)}px`,e.style.bottom="auto")}_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 s=getComputedStyle(e),i=(Number.parseFloat(s.paddingTop)||0)+(Number.parseFloat(s.paddingBottom)||0),n=`${Math.ceil(t.scrollHeight+i)}px`;e.style.getPropertyValue("--scb-dropdown-panel-current-max-height").trim()!==n&&(e.style.setProperty("--scb-dropdown-panel-current-max-height",n),this._schedulePanelPlacement())}_mapSpacingToken(e){const t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_mapHostSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){const e=this._mapHostSpacingToken(this.spacing),t=this._mapHostSpacingToken(this.spacingTop)??e,s=this._mapHostSpacingToken(this.spacingBottom)??e,i=this._mapHostSpacingToken(this.spacingLeft),n=this._mapHostSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-dropdown-spacing-block-start",t):this.style.removeProperty("--scb-dropdown-spacing-block-start"),s?this.style.setProperty("--scb-dropdown-spacing-block-end",s):this.style.removeProperty("--scb-dropdown-spacing-block-end"),i?this.style.setProperty("--scb-dropdown-spacing-inline-start",i):this.style.removeProperty("--scb-dropdown-spacing-inline-start"),n?this.style.setProperty("--scb-dropdown-spacing-inline-end",n):this.style.removeProperty("--scb-dropdown-spacing-inline-end")}_syncSlottedMenu(){const e=(this._slotEl?.assignedElements({flatten:!0})??[]).find(t=>t.tagName.toLowerCase()==="scb-options-menu");if(e===this._slottedMenuEl){this._syncSlottedMenuOpen();return}this._detachSlottedMenuListeners(),this._slottedMenuEl=e??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),s=t.transitionDuration.split(",").map(r=>r.trim()),i=t.transitionDelay.split(",").map(r=>r.trim()),n=r=>{const c=parseFloat(r);return Number.isFinite(c)?r.endsWith("ms")?c:r.endsWith("s")?c*1e3:c:0},o=Math.max(s.length,i.length);let d=0;for(let r=0;r<o;r+=1){const c=n(s[r]??s[s.length-1]??"0s"),u=n(i[r]??i[i.length-1]??"0s");d=Math.max(d,c+u)}return Math.ceil(d)}_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}),s=[],i=n=>{n instanceof HTMLElement&&n.matches("a,button,input,select,textarea,[tabindex]")&&s.push(n)};return t.forEach(n=>{i(n),n.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(o=>i(o))}),s}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{const t=e.getAttribute("tabindex");t!==null&&e.setAttribute("data-scb-prev-tabindex",t),e.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{const t=e.getAttribute("data-scb-prev-tabindex");t!==null?(e.setAttribute("tabindex",t),e.removeAttribute("data-scb-prev-tabindex")):e.removeAttribute("tabindex")})}_closeAllSubMenus(){const e=this.querySelectorAll("scb-options-sub-menu");for(const t of e)t.removeAttribute("open")}focus(e){const t=this._triggerEl;if(t?.focus){t.focus(e);return}super.focus(e)}_applyChevronState(){if(this.hasAttribute("as-tab"))return;const e=this._ensureTriggerChevronEl();e&&(e.open=this.open)}_ensureTriggerChevronEl(){const e=this._triggerEl;if(e?.tagName?.toLowerCase?.()!=="scb-button")return null;const t=e?.shadowRoot;if(!t)return null;const s=t.querySelector('scb-chevron[slot="icon"]');if(s)return s;const i=t.querySelector('md-icon[slot="icon"]')??t.querySelector("md-icon");if(!i)return null;const n=document.createElement("scb-chevron");n.setAttribute("slot","icon"),n.setAttribute("aria-hidden","true"),n.classList.add("chevron");const o=getComputedStyle(i).fontSize;return o&&n.style.setProperty("--scb-chevron-size",o),i.replaceWith(n),n}render(){const e=!!this._slottedMenuEl,t=this.hasAttribute("as-tab"),s=this.dataIndex,i=this.ariaCurrent==="page"?"page":_;return g`
|
|
38
|
-
${t?
|
|
37
|
+
`,document.head.appendChild(u);const e=n=>{const o=String(n??"").trim();if(o)return/^\d+$/.test(o)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(o,10)))})`:o},t=n=>{const o=e(n.getAttribute("spacing")),p=e(n.getAttribute("spacing-top"))??o,r=e(n.getAttribute("spacing-bottom"))??o,c=e(n.getAttribute("spacing-left")),h=e(n.getAttribute("spacing-right"));p?n.style.setProperty("--scb-dropdown-spacing-block-start",p):n.style.removeProperty("--scb-dropdown-spacing-block-start"),r?n.style.setProperty("--scb-dropdown-spacing-block-end",r):n.style.removeProperty("--scb-dropdown-spacing-block-end"),c?n.style.setProperty("--scb-dropdown-spacing-inline-start",c):n.style.removeProperty("--scb-dropdown-spacing-inline-start"),h?n.style.setProperty("--scb-dropdown-spacing-inline-end",h):n.style.removeProperty("--scb-dropdown-spacing-inline-end")};document.querySelectorAll("scb-dropdown").forEach(t);const i=new MutationObserver(n=>{for(const o of n){if(o.type==="attributes"){const p=o.target;p instanceof HTMLElement&&p.tagName.toLowerCase()==="scb-dropdown"&&t(p);continue}if(o.type==="childList"){const p=[...Array.from(o.addedNodes),...Array.from(o.removedNodes)];for(const r of p)if(r instanceof HTMLElement){if(r.tagName.toLowerCase()==="scb-dropdown"){t(r);continue}r.querySelectorAll?.("scb-dropdown").forEach(c=>{c instanceof HTMLElement&&t(c)})}}}});i.observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["spacing","spacing-top","spacing-bottom","spacing-left","spacing-right"]}),customElements.whenDefined("scb-dropdown").then(()=>{i.disconnect()})};F();var a=(y=class extends O{constructor(...e){super(...e),this.label="Dropdown",this.variant="filled",this.size=H["scb-dropdown"].size,this.open=!1,this.disabled=!1,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.menuGap="3",this.width=null,this.minWidth=null,this.maxWidth=null,this.dataIndex=null,this.ariaCurrent=null,this._slottedMenuEl=null,this._openSettledTimer=null,this._menuCloseTimer=null,this._panelResizeObserver=null,this._panelHeightSyncRaf=null,this._panelPlacementRaf=null,this._onViewportChange=()=>{this.open&&this._schedulePanelPlacement()},this._onDocumentClickBound=t=>{if(!this.open)return;const s=t.composedPath(),i=s.find(n=>n instanceof HTMLElement&&n.tagName.toLowerCase()==="scb-dropdown");if(i&&i!==this){this.open=!1;return}s.includes(this)||(this.open=!1)},this._onDocumentKeydownBound=t=>{this.open&&t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),this.open=!1,this.updateComplete.then(()=>this.focus({preventScroll:!0})))},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=t=>{this.hasAttribute("as-tab")||t.stopPropagation(),!this.disabled&&(this.open=!this.open)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._onDocumentClickBound,!0),document.addEventListener("keydown",this._onDocumentKeydownBound),window.addEventListener("resize",this._onViewportChange,{passive:!0}),window.addEventListener("scroll",this._onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener("click",this._onDocumentClickBound,!0),document.removeEventListener("keydown",this._onDocumentKeydownBound),window.removeEventListener("resize",this._onViewportChange),window.removeEventListener("scroll",this._onViewportChange,!0),this._detachSlottedMenuListeners(),M(this.renderRoot.querySelector(".panel")),this._panelResizeObserver&&(this._panelResizeObserver.disconnect(),this._panelResizeObserver=null),this._panelHeightSyncRaf!==null&&(window.cancelAnimationFrame(this._panelHeightSyncRaf),this._panelHeightSyncRaf=null),this._panelPlacementRaf!==null&&(window.cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=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(),this._syncPanelPopover()}updated(e){super.updated(e),e.has("menuGap")&&this._applyPanelVars(),(e.has("width")||e.has("minWidth")||e.has("maxWidth"))&&this._applyPanelSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing(),e.has("open")&&(this.open||this._closeAllSubMenus(),this._syncSlottedMenuOpen(),this._applyChevronState(),this._applyInertByOpen(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen(),this._syncPanelPopover(),this.dispatchEvent(new CustomEvent("openchange",{bubbles:!0,composed:!0,detail:{open:this.open}})))}_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.minWidth&&String(this.minWidth).trim()!==""?e.style.minInlineSize=this.minWidth:e.style.removeProperty("min-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.minWidth&&String(this.minWidth).trim()!==""?this._slottedMenuEl.style.minInlineSize=this.minWidth:this._slottedMenuEl.style.removeProperty("min-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()}))}_schedulePanelPlacement(){this._panelPlacementRaf===null&&(this._panelPlacementRaf=window.requestAnimationFrame(()=>{this._panelPlacementRaf=null,this._positionPanelInViewport()}))}_syncPanelPopover(){const e=this.renderRoot.querySelector(".panel");if(!e)return;if(this.open){B(e)&&this._schedulePanelPlacement();return}const t=()=>{this._panelSurfaceEl?.style.removeProperty("--scb-dropdown-panel-viewport-max-height"),e.style.removeProperty("position"),e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("top"),e.style.removeProperty("bottom"),e.style.removeProperty("width")};E(e)?W(e,t,this._panelSurfaceEl??e):(M(e),t())}_positionPanelInViewport(){const e=this.renderRoot.querySelector(".panel"),t=this._triggerEl;if(!e||!t||!E(e))return;const s=this._panelSurfaceEl,i=t.getBoundingClientRect(),n=s?.getBoundingClientRect(),o=8,p=Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-dropdown-panel-gap")),r=Number.isFinite(p)?p:8,c=Math.max(0,window.innerWidth-o*2),h=s?getComputedStyle(s):null,P=h?[h.paddingInlineStart,h.paddingInlineEnd].map(g=>Number.parseFloat(g)).filter(Number.isFinite).reduce((g,R)=>g+R,0):0,v=(this._panelInnerEl?.scrollWidth||0)+P,w=Number.parseFloat(h?.maxWidth??""),k=this.width?0:Math.min(v,Number.isFinite(w)?w:v),T=Math.max(n?.width||0,s?.scrollWidth||0,k,i.width),_=Math.min(Math.max(i.width,T),c),C=Math.min(Math.max(i.left,o),window.innerWidth-o-_);e.style.position="fixed",e.style.left=`${Math.round(C)}px`,e.style.right="auto",e.style.width=`${Math.round(_)}px`;const m=window.innerHeight-i.bottom-r-o,x=i.top-r-o,S=(s?.scrollHeight||n?.height||0)>m&&x>m,A=Math.max(0,S?x:m);s?.style.setProperty("--scb-dropdown-panel-viewport-max-height",`${Math.floor(A)}px`),S?(e.style.top="auto",e.style.bottom=`${Math.round(window.innerHeight-i.top+r)}px`):(e.style.top=`${Math.round(i.bottom+r)}px`,e.style.bottom="auto")}_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 s=getComputedStyle(e),i=(Number.parseFloat(s.paddingTop)||0)+(Number.parseFloat(s.paddingBottom)||0),n=`${Math.ceil(t.scrollHeight+i)}px`;e.style.getPropertyValue("--scb-dropdown-panel-current-max-height").trim()!==n&&(e.style.setProperty("--scb-dropdown-panel-current-max-height",n),this._schedulePanelPlacement())}_mapSpacingToken(e){const t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_mapHostSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){const e=this._mapHostSpacingToken(this.spacing),t=this._mapHostSpacingToken(this.spacingTop)??e,s=this._mapHostSpacingToken(this.spacingBottom)??e,i=this._mapHostSpacingToken(this.spacingLeft),n=this._mapHostSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-dropdown-spacing-block-start",t):this.style.removeProperty("--scb-dropdown-spacing-block-start"),s?this.style.setProperty("--scb-dropdown-spacing-block-end",s):this.style.removeProperty("--scb-dropdown-spacing-block-end"),i?this.style.setProperty("--scb-dropdown-spacing-inline-start",i):this.style.removeProperty("--scb-dropdown-spacing-inline-start"),n?this.style.setProperty("--scb-dropdown-spacing-inline-end",n):this.style.removeProperty("--scb-dropdown-spacing-inline-end")}_syncSlottedMenu(){const e=(this._slotEl?.assignedElements({flatten:!0})??[]).find(t=>t.tagName.toLowerCase()==="scb-options-menu");if(e===this._slottedMenuEl){this._syncSlottedMenuOpen();return}this._detachSlottedMenuListeners(),this._slottedMenuEl=e??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),s=t.transitionDuration.split(",").map(r=>r.trim()),i=t.transitionDelay.split(",").map(r=>r.trim()),n=r=>{const c=parseFloat(r);return Number.isFinite(c)?r.endsWith("ms")?c:r.endsWith("s")?c*1e3:c:0},o=Math.max(s.length,i.length);let p=0;for(let r=0;r<o;r+=1){const c=n(s[r]??s[s.length-1]??"0s"),h=n(i[r]??i[i.length-1]??"0s");p=Math.max(p,c+h)}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}),s=[],i=n=>{n instanceof HTMLElement&&n.matches("a,button,input,select,textarea,[tabindex]")&&s.push(n)};return t.forEach(n=>{i(n),n.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(o=>i(o))}),s}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{const t=e.getAttribute("tabindex");t!==null&&e.setAttribute("data-scb-prev-tabindex",t),e.setAttribute("tabindex","-1")})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{const t=e.getAttribute("data-scb-prev-tabindex");t!==null?(e.setAttribute("tabindex",t),e.removeAttribute("data-scb-prev-tabindex")):e.removeAttribute("tabindex")})}_closeAllSubMenus(){const e=this.querySelectorAll("scb-options-sub-menu");for(const t of e)t.removeAttribute("open")}focus(e){const t=this._triggerEl;if(t?.focus){t.focus(e);return}super.focus(e)}_applyChevronState(){if(this.hasAttribute("as-tab"))return;const e=this._ensureTriggerChevronEl();e&&(e.open=this.open)}_ensureTriggerChevronEl(){const e=this._triggerEl;if(e?.tagName?.toLowerCase?.()!=="scb-button")return null;const t=e?.shadowRoot;if(!t)return null;const s=t.querySelector('scb-chevron[slot="icon"]');if(s)return s;const i=t.querySelector('md-icon[slot="icon"]')??t.querySelector("md-icon");if(!i)return null;const n=document.createElement("scb-chevron");n.setAttribute("slot","icon"),n.setAttribute("aria-hidden","true"),n.classList.add("chevron");const o=getComputedStyle(i).fontSize;return o&&n.style.setProperty("--scb-chevron-size",o),i.replaceWith(n),n}render(){const e=!!this._slottedMenuEl,t=this.hasAttribute("as-tab"),s=this.dataIndex,i=this.ariaCurrent==="page"?"page":z;return f`
|
|
38
|
+
${t?f`
|
|
39
39
|
<div class="tab-wrap">
|
|
40
40
|
<button
|
|
41
41
|
type="button"
|
|
@@ -44,17 +44,17 @@ import{d as b,g as _,h as E,m as P,p,v as g,y as k}from"../../vendor/vendor.js";
|
|
|
44
44
|
?disabled=${this.disabled}
|
|
45
45
|
aria-haspopup="menu"
|
|
46
46
|
aria-expanded=${String(this.open)}
|
|
47
|
-
data-index=${s??
|
|
47
|
+
data-index=${s??z}
|
|
48
48
|
aria-current=${i}
|
|
49
49
|
@click=${this._onTriggerClick}
|
|
50
|
-
@focusin=${
|
|
50
|
+
@focusin=${$}
|
|
51
51
|
>
|
|
52
52
|
${this.label}
|
|
53
53
|
<scb-chevron class="chevron" .open=${this.open}></scb-chevron>
|
|
54
54
|
</button>
|
|
55
55
|
<md-focus-ring></md-focus-ring>
|
|
56
56
|
</div>
|
|
57
|
-
`:
|
|
57
|
+
`:f`
|
|
58
58
|
<scb-button
|
|
59
59
|
data-scb-dropdown-trigger
|
|
60
60
|
label=${this.label}
|
|
@@ -80,7 +80,7 @@ import{d as b,g as _,h as E,m as P,p,v as g,y as k}from"../../vendor/vendor.js";
|
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
</div>
|
|
83
|
-
`}},
|
|
83
|
+
`}},y.styles=L`:host{display:inline-block;position:relative;overflow:visible;margin-block-start:var(--scb-dropdown-spacing-block-start, 0);margin-block-end:var(--scb-dropdown-spacing-block-end, 0);margin-inline-start:var(--scb-dropdown-spacing-inline-start, 0);margin-inline-end:var(--scb-dropdown-spacing-inline-end, 0);--scb-dropdown-transition-duration:var(--motion-duration-short, 150ms);--scb-dropdown-transition-easing:var(
|
|
84
84
|
--motion-easing-emphasized-accelerate,
|
|
85
85
|
var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
|
|
86
86
|
);--scb-dropdown-panel-radius:var(--scb-dropdown-panel-radius-medium, var(--radius-extra-small, 4px))}:host([size='extra-small']){--scb-dropdown-panel-radius:var(--scb-dropdown-panel-radius-extra-small, var(--radius-extra-small, 4px))}:host([size='small']){--scb-dropdown-panel-radius:var(--scb-dropdown-panel-radius-small, var(--radius-extra-small, 4px))}:host([size='large']){--scb-dropdown-panel-radius:var(--scb-dropdown-panel-radius-large, var(--radius-extra-small, 4px))}:host([open]){--scb-dropdown-transition-easing:var(
|
|
@@ -120,4 +120,4 @@ import{d as b,g as _,h as E,m as P,p,v as g,y as k}from"../../vendor/vendor.js";
|
|
|
120
120
|
var(--icon-size-small, 20px)
|
|
121
121
|
);height:var(--scb-dropdown-tab-icon-size,
|
|
122
122
|
var(--icon-size-small, 20px)
|
|
123
|
-
)}:host([open]) .panel-surface{opacity:1}.panel-inner{overflow:hidden}:host([open][data-open-settled]) .panel-surface{overflow-x:hidden;overflow-y:auto}:host([open][data-open-settled]) .panel-inner{overflow:visible}.panel.has-menu .panel-surface{background:0 0;box-shadow:none;padding:0;max-height:none;opacity:1;transition:none;overflow:visible}.panel.has-menu .panel-inner{overflow:visible}::slotted(scb-options-menu){position:static!important;transform:none!important;width:fit-content}::slotted(scb-menu){padding:0;background:var(--md-sys-color-surface-container-lowest)}::slotted(scb-checkbox),::slotted(scb-radio-button){display:block;padding-right:var(--spacing-4, 12px)}@media (prefers-reduced-motion:reduce){.panel-surface{transition:none}}`,
|
|
123
|
+
)}:host([open]) .panel-surface{opacity:1}.panel-inner{overflow:hidden}:host([open][data-open-settled]) .panel-surface{overflow-x:hidden;overflow-y:auto}:host([open][data-open-settled]) .panel-inner{overflow:visible}.panel.has-menu .panel-surface{background:0 0;box-shadow:none;padding:0;max-height:none;opacity:1;transition:none;overflow:visible}.panel.has-menu .panel-inner{overflow:visible}::slotted(scb-options-menu){position:static!important;transform:none!important;width:fit-content}::slotted(scb-menu){padding:0;background:var(--md-sys-color-surface-container-lowest)}::slotted(scb-checkbox),::slotted(scb-radio-button){display:block;padding-right:var(--spacing-4, 12px)}@media (prefers-reduced-motion:reduce){.panel-surface{transition:none}}`,y);l([d({type:String})],a.prototype,"label",void 0);l([d({type:String})],a.prototype,"variant",void 0);l([d({type:String,reflect:!0})],a.prototype,"size",void 0);l([d({type:Boolean,reflect:!0})],a.prototype,"open",void 0);l([d({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0);l([d({type:String,reflect:!0})],a.prototype,"spacing",void 0);l([d({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);l([d({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);l([d({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);l([d({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);l([d({type:String,attribute:"menu-gap"})],a.prototype,"menuGap",void 0);l([d({type:String})],a.prototype,"width",void 0);l([d({type:String,attribute:"min-width"})],a.prototype,"minWidth",void 0);l([d({type:String,attribute:"max-width"})],a.prototype,"maxWidth",void 0);l([d({type:String,attribute:"data-index"})],a.prototype,"dataIndex",void 0);l([d({type:String,attribute:"aria-current"})],a.prototype,"ariaCurrent",void 0);l([b("[data-scb-dropdown-trigger]")],a.prototype,"_triggerEl",void 0);l([b("slot")],a.prototype,"_slotEl",void 0);l([b(".panel-surface")],a.prototype,"_panelSurfaceEl",void 0);l([b(".panel-inner")],a.prototype,"_panelInnerEl",void 0);a=l([I("scb-dropdown")],a);export{a as ScbDropdown};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.172",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -474,5 +474,5 @@
|
|
|
474
474
|
},
|
|
475
475
|
"./mvc/*": "./mvc/*"
|
|
476
476
|
},
|
|
477
|
-
"buildHash": "
|
|
477
|
+
"buildHash": "78A2DFA4BCBA8BDF748542A8D42F1BC92A55C776748469CBC0FFB1D28745A754"
|
|
478
478
|
}
|
|
@@ -421,10 +421,10 @@ var m = class extends s {
|
|
|
421
421
|
_positionPanelInViewport() {
|
|
422
422
|
let e = this.renderRoot.querySelector(".panel"), t = this._triggerEl;
|
|
423
423
|
if (!e || !t || !a(e)) return;
|
|
424
|
-
let n = this._panelSurfaceEl, r = t.getBoundingClientRect(), i = n?.getBoundingClientRect(), o = Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-dropdown-panel-gap")), s = Number.isFinite(o) ? o : 8, c = Math.max(0, window.innerWidth - 16), l = i?.width || n?.scrollWidth || r.width,
|
|
425
|
-
e.style.position = "fixed", e.style.left = `${Math.round(
|
|
426
|
-
let
|
|
427
|
-
n?.style.setProperty("--scb-dropdown-panel-viewport-max-height", `${Math.floor(
|
|
424
|
+
let n = this._panelSurfaceEl, r = t.getBoundingClientRect(), i = n?.getBoundingClientRect(), o = Number.parseFloat(getComputedStyle(this).getPropertyValue("--scb-dropdown-panel-gap")), s = Number.isFinite(o) ? o : 8, c = Math.max(0, window.innerWidth - 16), l = n ? getComputedStyle(n) : null, u = l ? [l.paddingInlineStart, l.paddingInlineEnd].map((e) => Number.parseFloat(e)).filter(Number.isFinite).reduce((e, t) => e + t, 0) : 0, d = (this._panelInnerEl?.scrollWidth || 0) + u, f = Number.parseFloat(l?.maxWidth ?? ""), p = this.width ? 0 : Math.min(d, Number.isFinite(f) ? f : d), m = Math.max(i?.width || 0, n?.scrollWidth || 0, p, r.width), h = Math.min(Math.max(r.width, m), c), g = Math.min(Math.max(r.left, 8), window.innerWidth - 8 - h);
|
|
425
|
+
e.style.position = "fixed", e.style.left = `${Math.round(g)}px`, e.style.right = "auto", e.style.width = `${Math.round(h)}px`;
|
|
426
|
+
let _ = window.innerHeight - r.bottom - s - 8, v = r.top - s - 8, y = (n?.scrollHeight || i?.height || 0) > _ && v > _, b = Math.max(0, y ? v : _);
|
|
427
|
+
n?.style.setProperty("--scb-dropdown-panel-viewport-max-height", `${Math.floor(b)}px`), y ? (e.style.top = "auto", e.style.bottom = `${Math.round(window.innerHeight - r.top + s)}px`) : (e.style.top = `${Math.round(r.bottom + s)}px`, e.style.bottom = "auto");
|
|
428
428
|
}
|
|
429
429
|
_syncPanelMaxHeightByOpen() {
|
|
430
430
|
let e = this._panelSurfaceEl;
|
package/scb-wc.bundle.js
CHANGED
|
@@ -9414,7 +9414,7 @@
|
|
|
9414
9414
|
transition: none;
|
|
9415
9415
|
}
|
|
9416
9416
|
}
|
|
9417
|
-
`}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._onDocumentClickBound,!0),document.addEventListener(`keydown`,this._onDocumentKeydownBound),window.addEventListener(`resize`,this._onViewportChange,{passive:!0}),window.addEventListener(`scroll`,this._onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener(`click`,this._onDocumentClickBound,!0),document.removeEventListener(`keydown`,this._onDocumentKeydownBound),window.removeEventListener(`resize`,this._onViewportChange),window.removeEventListener(`scroll`,this._onViewportChange,!0),this._detachSlottedMenuListeners(),z(this.renderRoot.querySelector(`.panel`)),this._panelResizeObserver&&=(this._panelResizeObserver.disconnect(),null),this._panelHeightSyncRaf!==null&&(window.cancelAnimationFrame(this._panelHeightSyncRaf),this._panelHeightSyncRaf=null),this._panelPlacementRaf!==null&&(window.cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=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(),this._syncPanelPopover()}updated(e){super.updated(e),e.has(`menuGap`)&&this._applyPanelVars(),(e.has(`width`)||e.has(`minWidth`)||e.has(`maxWidth`))&&this._applyPanelSizing(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this._applySpacing(),e.has(`open`)&&(this.open||this._closeAllSubMenus(),this._syncSlottedMenuOpen(),this._applyChevronState(),this._applyInertByOpen(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen(),this._syncPanelPopover(),this.dispatchEvent(new CustomEvent(`openchange`,{bubbles:!0,composed:!0,detail:{open:this.open}})))}_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(){let e=this.renderRoot.querySelector(`.panel-surface`);e&&(this.width&&String(this.width).trim()!==``?e.style.inlineSize=this.width:e.style.removeProperty(`inline-size`),this.minWidth&&String(this.minWidth).trim()!==``?e.style.minInlineSize=this.minWidth:e.style.removeProperty(`min-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.minWidth&&String(this.minWidth).trim()!==``?this._slottedMenuEl.style.minInlineSize=this.minWidth:this._slottedMenuEl.style.removeProperty(`min-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;let 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()}))}_schedulePanelPlacement(){this._panelPlacementRaf===null&&(this._panelPlacementRaf=window.requestAnimationFrame(()=>{this._panelPlacementRaf=null,this._positionPanelInViewport()}))}_syncPanelPopover(){let e=this.renderRoot.querySelector(`.panel`);if(!e)return;if(this.open){_l(e)&&this._schedulePanelPlacement();return}let t=()=>{this._panelSurfaceEl?.style.removeProperty(`--scb-dropdown-panel-viewport-max-height`),e.style.removeProperty(`position`),e.style.removeProperty(`left`),e.style.removeProperty(`right`),e.style.removeProperty(`top`),e.style.removeProperty(`bottom`),e.style.removeProperty(`width`)};yl(e)?vl(e,t,this._panelSurfaceEl??e):(z(e),t())}_positionPanelInViewport(){let e=this.renderRoot.querySelector(`.panel`),t=this._triggerEl;if(!e||!t||!yl(e))return;let n=this._panelSurfaceEl,r=t.getBoundingClientRect(),i=n?.getBoundingClientRect(),a=Number.parseFloat(getComputedStyle(this).getPropertyValue(`--scb-dropdown-panel-gap`)),o=Number.isFinite(a)?a:8,s=Math.max(0,window.innerWidth-16),c=i?.width||n?.scrollWidth||r.width,l=Math.min(Math.max(r.width,c),s),u=Math.min(Math.max(r.left,8),window.innerWidth-8-l);e.style.position=`fixed`,e.style.left=`${Math.round(u)}px`,e.style.right=`auto`,e.style.width=`${Math.round(l)}px`;let d=window.innerHeight-r.bottom-o-8,f=r.top-o-8,p=(n?.scrollHeight||i?.height||0)>d&&f>d,m=Math.max(0,p?f:d);n?.style.setProperty(`--scb-dropdown-panel-viewport-max-height`,`${Math.floor(m)}px`),p?(e.style.top=`auto`,e.style.bottom=`${Math.round(window.innerHeight-r.top+o)}px`):(e.style.top=`${Math.round(r.bottom+o)}px`,e.style.bottom=`auto`)}_syncPanelMaxHeightByOpen(){let 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}let t=this._panelInnerEl;if(!t)return;let n=getComputedStyle(e),r=(Number.parseFloat(n.paddingTop)||0)+(Number.parseFloat(n.paddingBottom)||0),i=`${Math.ceil(t.scrollHeight+r)}px`;e.style.getPropertyValue(`--scb-dropdown-panel-current-max-height`).trim()!==i&&(e.style.setProperty(`--scb-dropdown-panel-current-max-height`,i),this._schedulePanelPlacement())}_mapSpacingToken(e){let t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_mapHostSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){let e=this._mapHostSpacingToken(this.spacing),t=this._mapHostSpacingToken(this.spacingTop)??e,n=this._mapHostSpacingToken(this.spacingBottom)??e,r=this._mapHostSpacingToken(this.spacingLeft),i=this._mapHostSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-dropdown-spacing-block-start`,t):this.style.removeProperty(`--scb-dropdown-spacing-block-start`),n?this.style.setProperty(`--scb-dropdown-spacing-block-end`,n):this.style.removeProperty(`--scb-dropdown-spacing-block-end`),r?this.style.setProperty(`--scb-dropdown-spacing-inline-start`,r):this.style.removeProperty(`--scb-dropdown-spacing-inline-start`),i?this.style.setProperty(`--scb-dropdown-spacing-inline-end`,i):this.style.removeProperty(`--scb-dropdown-spacing-inline-end`)}_syncSlottedMenu(){let e=(this._slotEl?.assignedElements({flatten:!0})??[]).find(e=>e.tagName.toLowerCase()===`scb-options-menu`);if(e===this._slottedMenuEl){this._syncSlottedMenuOpen();return}this._detachSlottedMenuListeners(),this._slottedMenuEl=e??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}let 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;let e=this.renderRoot.querySelector(`.panel-surface`);if(!e){this.setAttribute(`data-open-settled`,``);return}let 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(){let e=this.renderRoot.querySelector(`.panel-surface`);return e?this._getTransitionMs(e):0}_getTransitionMs(e){let t=getComputedStyle(e),n=t.transitionDuration.split(`,`).map(e=>e.trim()),r=t.transitionDelay.split(`,`).map(e=>e.trim()),i=e=>{let t=parseFloat(e);return Number.isFinite(t)?e.endsWith(`ms`)?t:e.endsWith(`s`)?t*1e3:t:0},a=Math.max(n.length,r.length),o=0;for(let e=0;e<a;e+=1){let t=i(n[e]??n[n.length-1]??`0s`),a=i(r[e]??r[r.length-1]??`0s`);o=Math.max(o,t+a)}return Math.ceil(o)}_applyInertByOpen(){let 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(){let e=this._slotEl;if(!e)return[];let t=e.assignedElements({flatten:!0}),n=[],r=e=>{e instanceof HTMLElement&&e.matches(`a,button,input,select,textarea,[tabindex]`)&&n.push(e)};return t.forEach(e=>{r(e),e.querySelectorAll?.(`a,button,input,select,textarea,[tabindex]`).forEach(e=>r(e))}),n}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`tabindex`);t!==null&&e.setAttribute(`data-scb-prev-tabindex`,t),e.setAttribute(`tabindex`,`-1`)})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`data-scb-prev-tabindex`);t===null?e.removeAttribute(`tabindex`):(e.setAttribute(`tabindex`,t),e.removeAttribute(`data-scb-prev-tabindex`))})}_closeAllSubMenus(){let e=this.querySelectorAll(`scb-options-sub-menu`);for(let t of e)t.removeAttribute(`open`)}focus(e){let t=this._triggerEl;if(t?.focus){t.focus(e);return}super.focus(e)}_applyChevronState(){if(this.hasAttribute(`as-tab`))return;let e=this._ensureTriggerChevronEl();e&&(e.open=this.open)}_ensureTriggerChevronEl(){let e=this._triggerEl;if(e?.tagName?.toLowerCase?.()!==`scb-button`)return null;let t=e?.shadowRoot;if(!t)return null;let n=t.querySelector(`scb-chevron[slot="icon"]`);if(n)return n;let r=t.querySelector(`md-icon[slot="icon"]`)??t.querySelector(`md-icon`);if(!r)return null;let i=document.createElement(`scb-chevron`);i.setAttribute(`slot`,`icon`),i.setAttribute(`aria-hidden`,`true`),i.classList.add(`chevron`);let a=getComputedStyle(r).fontSize;return a&&i.style.setProperty(`--scb-chevron-size`,a),r.replaceWith(i),i}render(){let e=!!this._slottedMenuEl,t=this.hasAttribute(`as-tab`),n=this.dataIndex,r=this.ariaCurrent===`page`?`page`:S;return x`
|
|
9417
|
+
`}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._onDocumentClickBound,!0),document.addEventListener(`keydown`,this._onDocumentKeydownBound),window.addEventListener(`resize`,this._onViewportChange,{passive:!0}),window.addEventListener(`scroll`,this._onViewportChange,{passive:!0,capture:!0})}disconnectedCallback(){document.removeEventListener(`click`,this._onDocumentClickBound,!0),document.removeEventListener(`keydown`,this._onDocumentKeydownBound),window.removeEventListener(`resize`,this._onViewportChange),window.removeEventListener(`scroll`,this._onViewportChange,!0),this._detachSlottedMenuListeners(),z(this.renderRoot.querySelector(`.panel`)),this._panelResizeObserver&&=(this._panelResizeObserver.disconnect(),null),this._panelHeightSyncRaf!==null&&(window.cancelAnimationFrame(this._panelHeightSyncRaf),this._panelHeightSyncRaf=null),this._panelPlacementRaf!==null&&(window.cancelAnimationFrame(this._panelPlacementRaf),this._panelPlacementRaf=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(),this._syncPanelPopover()}updated(e){super.updated(e),e.has(`menuGap`)&&this._applyPanelVars(),(e.has(`width`)||e.has(`minWidth`)||e.has(`maxWidth`))&&this._applyPanelSizing(),(e.has(`spacing`)||e.has(`spacingTop`)||e.has(`spacingBottom`)||e.has(`spacingLeft`)||e.has(`spacingRight`))&&this._applySpacing(),e.has(`open`)&&(this.open||this._closeAllSubMenus(),this._syncSlottedMenuOpen(),this._applyChevronState(),this._applyInertByOpen(),this._syncPanelMaxHeightByOpen(),this._syncOverflowVisibilityByOpen(),this._syncPanelPopover(),this.dispatchEvent(new CustomEvent(`openchange`,{bubbles:!0,composed:!0,detail:{open:this.open}})))}_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(){let e=this.renderRoot.querySelector(`.panel-surface`);e&&(this.width&&String(this.width).trim()!==``?e.style.inlineSize=this.width:e.style.removeProperty(`inline-size`),this.minWidth&&String(this.minWidth).trim()!==``?e.style.minInlineSize=this.minWidth:e.style.removeProperty(`min-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.minWidth&&String(this.minWidth).trim()!==``?this._slottedMenuEl.style.minInlineSize=this.minWidth:this._slottedMenuEl.style.removeProperty(`min-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;let 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()}))}_schedulePanelPlacement(){this._panelPlacementRaf===null&&(this._panelPlacementRaf=window.requestAnimationFrame(()=>{this._panelPlacementRaf=null,this._positionPanelInViewport()}))}_syncPanelPopover(){let e=this.renderRoot.querySelector(`.panel`);if(!e)return;if(this.open){_l(e)&&this._schedulePanelPlacement();return}let t=()=>{this._panelSurfaceEl?.style.removeProperty(`--scb-dropdown-panel-viewport-max-height`),e.style.removeProperty(`position`),e.style.removeProperty(`left`),e.style.removeProperty(`right`),e.style.removeProperty(`top`),e.style.removeProperty(`bottom`),e.style.removeProperty(`width`)};yl(e)?vl(e,t,this._panelSurfaceEl??e):(z(e),t())}_positionPanelInViewport(){let e=this.renderRoot.querySelector(`.panel`),t=this._triggerEl;if(!e||!t||!yl(e))return;let n=this._panelSurfaceEl,r=t.getBoundingClientRect(),i=n?.getBoundingClientRect(),a=Number.parseFloat(getComputedStyle(this).getPropertyValue(`--scb-dropdown-panel-gap`)),o=Number.isFinite(a)?a:8,s=Math.max(0,window.innerWidth-16),c=n?getComputedStyle(n):null,l=c?[c.paddingInlineStart,c.paddingInlineEnd].map(e=>Number.parseFloat(e)).filter(Number.isFinite).reduce((e,t)=>e+t,0):0,u=(this._panelInnerEl?.scrollWidth||0)+l,d=Number.parseFloat(c?.maxWidth??``),f=this.width?0:Math.min(u,Number.isFinite(d)?d:u),p=Math.max(i?.width||0,n?.scrollWidth||0,f,r.width),m=Math.min(Math.max(r.width,p),s),h=Math.min(Math.max(r.left,8),window.innerWidth-8-m);e.style.position=`fixed`,e.style.left=`${Math.round(h)}px`,e.style.right=`auto`,e.style.width=`${Math.round(m)}px`;let g=window.innerHeight-r.bottom-o-8,ee=r.top-o-8,te=(n?.scrollHeight||i?.height||0)>g&&ee>g,ne=Math.max(0,te?ee:g);n?.style.setProperty(`--scb-dropdown-panel-viewport-max-height`,`${Math.floor(ne)}px`),te?(e.style.top=`auto`,e.style.bottom=`${Math.round(window.innerHeight-r.top+o)}px`):(e.style.top=`${Math.round(r.bottom+o)}px`,e.style.bottom=`auto`)}_syncPanelMaxHeightByOpen(){let 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}let t=this._panelInnerEl;if(!t)return;let n=getComputedStyle(e),r=(Number.parseFloat(n.paddingTop)||0)+(Number.parseFloat(n.paddingBottom)||0),i=`${Math.ceil(t.scrollHeight+r)}px`;e.style.getPropertyValue(`--scb-dropdown-panel-current-max-height`).trim()!==i&&(e.style.setProperty(`--scb-dropdown-panel-current-max-height`,i),this._schedulePanelPlacement())}_mapSpacingToken(e){let t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_mapHostSpacingToken(e){if(!e)return;let t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_applySpacing(){let e=this._mapHostSpacingToken(this.spacing),t=this._mapHostSpacingToken(this.spacingTop)??e,n=this._mapHostSpacingToken(this.spacingBottom)??e,r=this._mapHostSpacingToken(this.spacingLeft),i=this._mapHostSpacingToken(this.spacingRight);t?this.style.setProperty(`--scb-dropdown-spacing-block-start`,t):this.style.removeProperty(`--scb-dropdown-spacing-block-start`),n?this.style.setProperty(`--scb-dropdown-spacing-block-end`,n):this.style.removeProperty(`--scb-dropdown-spacing-block-end`),r?this.style.setProperty(`--scb-dropdown-spacing-inline-start`,r):this.style.removeProperty(`--scb-dropdown-spacing-inline-start`),i?this.style.setProperty(`--scb-dropdown-spacing-inline-end`,i):this.style.removeProperty(`--scb-dropdown-spacing-inline-end`)}_syncSlottedMenu(){let e=(this._slotEl?.assignedElements({flatten:!0})??[]).find(e=>e.tagName.toLowerCase()===`scb-options-menu`);if(e===this._slottedMenuEl){this._syncSlottedMenuOpen();return}this._detachSlottedMenuListeners(),this._slottedMenuEl=e??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}let 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;let e=this.renderRoot.querySelector(`.panel-surface`);if(!e){this.setAttribute(`data-open-settled`,``);return}let 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(){let e=this.renderRoot.querySelector(`.panel-surface`);return e?this._getTransitionMs(e):0}_getTransitionMs(e){let t=getComputedStyle(e),n=t.transitionDuration.split(`,`).map(e=>e.trim()),r=t.transitionDelay.split(`,`).map(e=>e.trim()),i=e=>{let t=parseFloat(e);return Number.isFinite(t)?e.endsWith(`ms`)?t:e.endsWith(`s`)?t*1e3:t:0},a=Math.max(n.length,r.length),o=0;for(let e=0;e<a;e+=1){let t=i(n[e]??n[n.length-1]??`0s`),a=i(r[e]??r[r.length-1]??`0s`);o=Math.max(o,t+a)}return Math.ceil(o)}_applyInertByOpen(){let 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(){let e=this._slotEl;if(!e)return[];let t=e.assignedElements({flatten:!0}),n=[],r=e=>{e instanceof HTMLElement&&e.matches(`a,button,input,select,textarea,[tabindex]`)&&n.push(e)};return t.forEach(e=>{r(e),e.querySelectorAll?.(`a,button,input,select,textarea,[tabindex]`).forEach(e=>r(e))}),n}_removeTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`tabindex`);t!==null&&e.setAttribute(`data-scb-prev-tabindex`,t),e.setAttribute(`tabindex`,`-1`)})}_restoreTabIndexesIfNeeded(){this._supportsInert()||this._collectFocusableFromSlot().forEach(e=>{let t=e.getAttribute(`data-scb-prev-tabindex`);t===null?e.removeAttribute(`tabindex`):(e.setAttribute(`tabindex`,t),e.removeAttribute(`data-scb-prev-tabindex`))})}_closeAllSubMenus(){let e=this.querySelectorAll(`scb-options-sub-menu`);for(let t of e)t.removeAttribute(`open`)}focus(e){let t=this._triggerEl;if(t?.focus){t.focus(e);return}super.focus(e)}_applyChevronState(){if(this.hasAttribute(`as-tab`))return;let e=this._ensureTriggerChevronEl();e&&(e.open=this.open)}_ensureTriggerChevronEl(){let e=this._triggerEl;if(e?.tagName?.toLowerCase?.()!==`scb-button`)return null;let t=e?.shadowRoot;if(!t)return null;let n=t.querySelector(`scb-chevron[slot="icon"]`);if(n)return n;let r=t.querySelector(`md-icon[slot="icon"]`)??t.querySelector(`md-icon`);if(!r)return null;let i=document.createElement(`scb-chevron`);i.setAttribute(`slot`,`icon`),i.setAttribute(`aria-hidden`,`true`),i.classList.add(`chevron`);let a=getComputedStyle(r).fontSize;return a&&i.style.setProperty(`--scb-chevron-size`,a),r.replaceWith(i),i}render(){let e=!!this._slottedMenuEl,t=this.hasAttribute(`as-tab`),n=this.dataIndex,r=this.ariaCurrent===`page`?`page`:S;return x`
|
|
9418
9418
|
${t?x`
|
|
9419
9419
|
<div class="tab-wrap">
|
|
9420
9420
|
<button
|