@cas-smartdesign/tab-bar 4.1.2 → 4.1.3
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.
|
@@ -31,13 +31,13 @@ var window;(window||={})["@cas-smartdesign/tab-bar"]=(()=>{var Ue=Object.defineP
|
|
|
31
31
|
${o?W` <div class="${e}-icon" style="background-image:url('${o}')" aria-hidden="true"></div> `:w}
|
|
32
32
|
${this.contentMode==="html"?ao(t):t}
|
|
33
33
|
</div>
|
|
34
|
-
`:w}updated(e){super.updated(e),e.has("selected")&&this.setAttribute("aria-selected",String(this.selected))}get missingWidthForTexts(){let e=this.enableLineClamp;this.removeAttribute("enable-line-clamp");let t=0,i=this.shadowRoot.querySelector(".caption");i&&(t+=i.scrollWidth-i.clientWidth);let o=this.shadowRoot.querySelector(".description");return o&&(t=Math.max(t,o.scrollWidth-o.clientWidth)),t>0&&t++,e&&this.setAttribute("enable-line-clamp",""),t}handleIconClick(e){!this.disabled&&!this.dispatchEvent(new PointerEvent("list-item-icon-click",e))&&e.preventDefault()}getLevelIndicators(){return this.level?Array(Number(this.level)).fill(null):[]}},Dt.ID="sd-list-item",Dt.ensureDefined=()=>{customElements.get(Dt.ID)||customElements.define(Dt.ID,Dt)},Dt);U([u({type:String})],N.prototype,"caption");U([u({type:String})],N.prototype,"description");U([u({type:String})],N.prototype,"descriptionIcon");U([u({type:Boolean})],N.prototype,"selected");U([u({type:String})],N.prototype,"icon");U([u({type:String})],N.prototype,"iconBackgroundColor");U([u({type:String})],N.prototype,"iconPlaceholder");U([u({type:Number})],N.prototype,"level");U([u()],N.prototype,"contentMode");U([u({type:Boolean,reflect:!0,attribute:"enable-line-clamp"})],N.prototype,"enableLineClamp");U([u({converter:{fromAttribute:e=>e=="true",toAttribute:e=>e},reflect:!0,attribute:"aria-disabled"})],N.prototype,"disabled");U([u({type:String,attribute:"icon-attr-aria-label"})],N.prototype,"iconAttrAriaLabel");U([u({type:String,reflect:!0})],N.prototype,"role");U([u({type:String,attribute:"caption-attr-title"})],N.prototype,"captionAttrTitle");U([u({type:String,attribute:"description-attr-title"})],N.prototype,"descriptionAttrTitle");U([u({type:String,attribute:"icon-attr-title"})],N.prototype,"iconAttrTitle");var kt=N,uo=(e,t)=>{let i=document.createElement(kt.ID);if(e){if(i.caption=e.caption,i.description=e.description,i.descriptionIcon=e.descriptionIcon,i.icon=e.icon,i.iconBackgroundColor=e.iconBackgroundColor,i.iconPlaceholder=e.iconPlaceholder,i.level=e.level,i.disabled=e.disabled,e.contentMode&&(i.contentMode=e.contentMode),e.leftContentGenerator){let o=e.leftContentGenerator(e,i);o&&(o.slot="left-content",i.appendChild(o))}if(e.rightContentGenerator){let o=e.rightContentGenerator(e,i);o&&(o.slot="right-content",i.appendChild(o))}}return i};kt.ensureDefined();var pi=class{getOffsetForIndexAndAlignment(t,i,o,r,s,n){let l=Math.max(0,n*r),a=Math.min(l,t*r),d=Math.max(0,t*r-s+r);switch(i){case"start":return a;case"end":return d;case"center":{let c=Math.round(d+(a-d)/2);return c<Math.ceil(s/2)?0:c>l+Math.floor(s/2)?l:c}case"auto":default:return o>=d&&o<=a?o:o<d?d:a}}debounce(t){let i;return(...o)=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame(()=>{t(...o),i=null})}}},Cr=new pi,ke=class{constructor(t=100,i=5){this.pageSize=t,this.preloadedItemsCount=i,this._finalSizeIsKnown=!1,this._itemCache=[],this._lastRequestedFirstIndex=0,this._lastRequestedLastIndex=0,this._lastLoadedIndex=0,this.handleListDataRequest=o=>{let{startIndex:r,stopIndex:s}=o.detail;this._lastRequestedFirstIndex=r,this._lastRequestedLastIndex=s,this._list.items=this._itemCache.slice(r,s+1),!this.finalSizeIsKnown&&this._lastLoadedIndex<s+this.preloadedItemsCount&&this.requestData()},this.itemCount=t}get currentPage(){return this.items.length==0&&this.finalSizeIsKnown?0:Math.floor((this.items.length-1)/this.pageSize)}get finalSizeIsKnown(){return this._finalSizeIsKnown}set finalSizeIsKnown(t){this._finalSizeIsKnown=t,t&&(this.itemCount=this._itemCache.length),this._list&&(this._list.finalSizeIsKnown=t)}get itemCount(){return this._itemCount}set itemCount(t){this._itemCount=t,this._list&&(this._list.itemCount=t)}get items(){return this._itemCache}set items(t){this._itemCache=t,this.onItemsChange()}addItems(t){this._itemCache=this._itemCache.concat(t),this.onItemsChange()}connectList(t){this._list&&this._list.removeEventListener("data-request",this.handleListDataRequest),this._list=t,t.itemCount=this.itemCount,t.addEventListener("data-request",this.handleListDataRequest),t.finalSizeIsKnown=this._finalSizeIsKnown}onItemsChange(){this._pendingDataRequest=!1,this._lastLoadedIndex=this._itemCache.length-1,this.finalSizeIsKnown?this.itemCount=this._itemCache.length:this._lastLoadedIndex>this.itemCount&&(this.itemCount=this._lastLoadedIndex),this._list&&(this._list.items=this._itemCache.slice(this._lastRequestedFirstIndex,this._lastRequestedLastIndex+1))}requestData(){if(!this._pendingDataRequest)if(this.onDataRequest)this._pendingDataRequest=!0,this.onDataRequest(this.currentPage+1),this._lastLoadedIndex+=this.pageSize-1,this._lastLoadedIndex>this.itemCount&&(this.itemCount=this._lastLoadedIndex);else throw Error("The final size is not yet known and the list would require item data from index "+this._lastRequestedFirstIndex+". to "+this._lastRequestedLastIndex+". which is not possible to load without a configured onDataRequest")}},Ir=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}",Or=Object.defineProperty,Pr=Object.getOwnPropertyDescriptor,mt=(e,t,i,o)=>{for(var r=o>1?void 0:o?Pr(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Or(t,i,r),r},ui=(e=>(e.TriggerOnly="trigger-only",e.Single="single",e.Multi="multi",e))(ui||{}),Lr=0,ft,ct=(ft=class extends q{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=ft.ID+"_"+Lr++,this.role="listbox",this.itemGenerator=uo,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;let e=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(e)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"Down":case"ArrowDown":this.focusIndex=(this.focusIndex+1)%this.itemCount;break;case"Up":case"ArrowUp":this.focusIndex>0?this.focusIndex--:this.finalSizeIsKnown&&(this.focusIndex=this.itemCount-1);break;case"Enter":this.handleSelection(this.focusIndex,e
|
|
34
|
+
`:w}updated(e){super.updated(e),e.has("selected")&&this.setAttribute("aria-selected",String(this.selected))}get missingWidthForTexts(){let e=this.enableLineClamp;this.removeAttribute("enable-line-clamp");let t=0,i=this.shadowRoot.querySelector(".caption");i&&(t+=i.scrollWidth-i.clientWidth);let o=this.shadowRoot.querySelector(".description");return o&&(t=Math.max(t,o.scrollWidth-o.clientWidth)),t>0&&t++,e&&this.setAttribute("enable-line-clamp",""),t}handleIconClick(e){!this.disabled&&!this.dispatchEvent(new PointerEvent("list-item-icon-click",e))&&e.preventDefault()}getLevelIndicators(){return this.level?Array(Number(this.level)).fill(null):[]}},Dt.ID="sd-list-item",Dt.ensureDefined=()=>{customElements.get(Dt.ID)||customElements.define(Dt.ID,Dt)},Dt);U([u({type:String})],N.prototype,"caption");U([u({type:String})],N.prototype,"description");U([u({type:String})],N.prototype,"descriptionIcon");U([u({type:Boolean})],N.prototype,"selected");U([u({type:String})],N.prototype,"icon");U([u({type:String})],N.prototype,"iconBackgroundColor");U([u({type:String})],N.prototype,"iconPlaceholder");U([u({type:Number})],N.prototype,"level");U([u()],N.prototype,"contentMode");U([u({type:Boolean,reflect:!0,attribute:"enable-line-clamp"})],N.prototype,"enableLineClamp");U([u({converter:{fromAttribute:e=>e=="true",toAttribute:e=>e},reflect:!0,attribute:"aria-disabled"})],N.prototype,"disabled");U([u({type:String,attribute:"icon-attr-aria-label"})],N.prototype,"iconAttrAriaLabel");U([u({type:String,reflect:!0})],N.prototype,"role");U([u({type:String,attribute:"caption-attr-title"})],N.prototype,"captionAttrTitle");U([u({type:String,attribute:"description-attr-title"})],N.prototype,"descriptionAttrTitle");U([u({type:String,attribute:"icon-attr-title"})],N.prototype,"iconAttrTitle");var kt=N,uo=(e,t)=>{let i=document.createElement(kt.ID);if(e){if(i.caption=e.caption,i.description=e.description,i.descriptionIcon=e.descriptionIcon,i.icon=e.icon,i.iconBackgroundColor=e.iconBackgroundColor,i.iconPlaceholder=e.iconPlaceholder,i.level=e.level,i.disabled=e.disabled,e.contentMode&&(i.contentMode=e.contentMode),e.leftContentGenerator){let o=e.leftContentGenerator(e,i);o&&(o.slot="left-content",i.appendChild(o))}if(e.rightContentGenerator){let o=e.rightContentGenerator(e,i);o&&(o.slot="right-content",i.appendChild(o))}}return i};kt.ensureDefined();var pi=class{getOffsetForIndexAndAlignment(t,i,o,r,s,n){let l=Math.max(0,n*r),a=Math.min(l,t*r),d=Math.max(0,t*r-s+r);switch(i){case"start":return a;case"end":return d;case"center":{let c=Math.round(d+(a-d)/2);return c<Math.ceil(s/2)?0:c>l+Math.floor(s/2)?l:c}case"auto":default:return o>=d&&o<=a?o:o<d?d:a}}debounce(t){let i;return(...o)=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame(()=>{t(...o),i=null})}}},Cr=new pi,ke=class{constructor(t=100,i=5){this.pageSize=t,this.preloadedItemsCount=i,this._finalSizeIsKnown=!1,this._itemCache=[],this._lastRequestedFirstIndex=0,this._lastRequestedLastIndex=0,this._lastLoadedIndex=0,this.handleListDataRequest=o=>{let{startIndex:r,stopIndex:s}=o.detail;this._lastRequestedFirstIndex=r,this._lastRequestedLastIndex=s,this._list.items=this._itemCache.slice(r,s+1),!this.finalSizeIsKnown&&this._lastLoadedIndex<s+this.preloadedItemsCount&&this.requestData()},this.itemCount=t}get currentPage(){return this.items.length==0&&this.finalSizeIsKnown?0:Math.floor((this.items.length-1)/this.pageSize)}get finalSizeIsKnown(){return this._finalSizeIsKnown}set finalSizeIsKnown(t){this._finalSizeIsKnown=t,t&&(this.itemCount=this._itemCache.length),this._list&&(this._list.finalSizeIsKnown=t)}get itemCount(){return this._itemCount}set itemCount(t){this._itemCount=t,this._list&&(this._list.itemCount=t)}get items(){return this._itemCache}set items(t){this._itemCache=t,this.onItemsChange()}addItems(t){this._itemCache=this._itemCache.concat(t),this.onItemsChange()}connectList(t){this._list&&this._list.removeEventListener("data-request",this.handleListDataRequest),this._list=t,t.itemCount=this.itemCount,t.addEventListener("data-request",this.handleListDataRequest),t.finalSizeIsKnown=this._finalSizeIsKnown}onItemsChange(){this._pendingDataRequest=!1,this._lastLoadedIndex=this._itemCache.length-1,this.finalSizeIsKnown?this.itemCount=this._itemCache.length:this._lastLoadedIndex>this.itemCount&&(this.itemCount=this._lastLoadedIndex),this._list&&(this._list.items=this._itemCache.slice(this._lastRequestedFirstIndex,this._lastRequestedLastIndex+1))}requestData(){if(!this._pendingDataRequest)if(this.onDataRequest)this._pendingDataRequest=!0,this.onDataRequest(this.currentPage+1),this._lastLoadedIndex+=this.pageSize-1,this._lastLoadedIndex>this.itemCount&&(this.itemCount=this._lastLoadedIndex);else throw Error("The final size is not yet known and the list would require item data from index "+this._lastRequestedFirstIndex+". to "+this._lastRequestedLastIndex+". which is not possible to load without a configured onDataRequest")}},Ir=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}",Or=Object.defineProperty,Pr=Object.getOwnPropertyDescriptor,mt=(e,t,i,o)=>{for(var r=o>1?void 0:o?Pr(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Or(t,i,r),r},ui=(e=>(e.TriggerOnly="trigger-only",e.Single="single",e.Multi="multi",e))(ui||{}),Lr=0,ft,ct=(ft=class extends q{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=ft.ID+"_"+Lr++,this.role="listbox",this.itemGenerator=uo,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;let e=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(e)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"Down":case"ArrowDown":this.focusIndex=(this.focusIndex+1)%this.itemCount;break;case"Up":case"ArrowUp":this.focusIndex>0?this.focusIndex--:this.finalSizeIsKnown&&(this.focusIndex=this.itemCount-1);break;case"Enter":this.handleSelection(this.focusIndex,e);break;case"End":this.focusIndex=this.itemCount-1;break;case"PageDown":this.focusIndex=this.normalizeIndex(this.focusIndex+this._visibleItemsNum-1);break;case"Home":this.focusIndex=0;break;case"PageUp":this.focusIndex=this.normalizeIndex(this.focusIndex-this._visibleItemsNum+1);break;default:t=!1;break}t&&(e.preventDefault(),e.stopPropagation())},this._resizeObserver=new ResizeObserver(()=>{this._lastKnownHeight!==this.offsetHeight&&(this._lastKnownHeight=this.offsetHeight,this.requestUpdate())})}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}get focusIndex(){return this._focusIndex}set focusIndex(e){if(e>=-1&&e<this.itemCount){let t=this._focusIndex;this._focusIndex=e,(e<=this._firstVisibleIndex||this._lastVisibleIndex<=e)&&this.scrollToItem(e),t!=e&&(e==-1&&this.removeAttribute("aria-activedescendant"),this.requestUpdate("focusIndex",t))}}get selectedIndices(){return this._selectedIndices}set selectedIndices(e){e?this._selectedIndices=e.map(t=>Number(t)):this._selectedIndices=[],this.requestUpdate("selectedIndices")}scrollToItem(e,t="auto"){this.scrollTop=Cr.getOffsetForIndexAndAlignment(this.normalizeIndex(e),t,this.scrollTop,this.itemHeight,this.height,this.itemCount),this._lastKnownScrollTop=this.scrollTop}getListItem(e){return!this.shadowRoot||e<this._firstVisibleIndex||this._lastVisibleIndex<e?null:this.querySelector(`[item-index="${e}"]`)}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),this.scrollTop!==this._lastKnownScrollTop&&(this.scrollTop=this._lastKnownScrollTop,this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("scroll",this.onScroll),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.addEventListener("mousedown",t=>{t.button==1&&t.preventDefault()}),this.addEventListener("auxclick",this.handleClick),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndices&&(this.focusIndex=this.selectedIndices[0]),this.focusIndex==-1&&this.itemCount>0&&(this.focusIndex=0)):this.updateFocusedItemAttributes())}),this.addEventListener("blur",()=>{this.focusIndex!=-1&&this.updateFocusedItemAttributes()}),this.selectedIndices.length>0&&this.scrollToItem(this.selectedIndices[0],"center")}updateFocusedItemAttributes(){let e=this.getListItem(this.focusIndex);e&&(this.focusTarget||document.activeElement==this?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id)):(e.removeAttribute("focused"),this.removeAttribute("aria-activedescendant")))}static get styles(){return[ht`
|
|
35
35
|
${it(Ir)}
|
|
36
36
|
`]}render(){return this.updateItemsRenderData(),W`
|
|
37
37
|
<div class="container" style="height: ${this.itemCount*this.itemHeight}px">
|
|
38
38
|
<slot name="items"></slot>
|
|
39
39
|
</div>
|
|
40
|
-
`}updated(e){if(super.updated(e),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{let t=new MutationObserver(()=>{this.adjustWidthIfNeeded(),t.disconnect()});t.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{let e=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(e==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;let t=[...this.querySelectorAll("[item-index]")].map(o=>{if(o instanceof kt){o.enableLineClamp=!1;let r=o.missingWidthForTexts;return r>e&&(o.enableLineClamp=!0),r}}),i=Math.max(...t);i>0&&(this.style.width=`${this.offsetWidth+i}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(e=>{e instanceof kt&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){let e=[...this.querySelectorAll("[item-index]")],t=new Map,i=document.createDocumentFragment();for(let o of this._itemsRenderData){let r=this.renderItem(o);r.parentElement||i.appendChild(r),t.set(o.dataHash,r);let s=e.indexOf(r);s!==-1&&e.splice(s,1)}this.appendChild(i);for(let o of e)o instanceof kt&&(o.enableLineClamp=!1),this.removeChild(o);t.forEach((o,r)=>{this._elementCache.set(r,o)})}renderItem({index:e,top:t,dataHash:i,data:o}){let r;return o?this._elementCache.has(i)?(r=this._elementCache.get(i),this._elementCache.delete(i)):(r=this.itemGenerator(o,e),r.setAttribute("slot","items")):(r=document.createElement("div"),r.setAttribute("placeholder-item",""),r.setAttribute("slot","items")),Object.assign(r.style,{transform:`translateY(${t}px)`,height:`${this.itemHeight}px`}),r.setAttribute("item-index",e.toString()),r.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),r.setAttribute("aria-posinset",String(e+1)),(!r.id||r.id.startsWith(this.id+"_item_"))&&(r.id=this.id+"_item_"+e),this.itemCount-1==e?r.setAttribute("last",""):r.removeAttribute("last"),this.updateSelectedAttribute(e,r),this.updateFocusedAttribute(e,r),r}updateFocusedAttribute(e,t){this.focusIndex==e&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id)):t.removeAttribute("focused")}updateSelectedAttribute(e,t){let i=this.selectedIndices.indexOf(e)!==-1;i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);let e=this.normalizeIndex(this._firstVisibleIndex-2),t=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(e,t);for(let i=e;i<=t;i++){let o=i-e,r=this.items[o],s;r?s=JSON.stringify(r):s=`placeholder-${o}`,this._itemsRenderData.push({index:i,top:this.itemHeight*i,physicalIndex:o,dataHash:s,data:r})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(e){return Math.max(0,Math.min(e,this.itemCount-1))}get height(){return this.offsetHeight}requestData(e,t){!Number.isNaN(e)&&!Number.isNaN(t)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:e,stopIndex:t}}))}handleSelection(e,t){if(e<0||this.itemCount<=e)return;let i=this.getListItem(e);if(i.getAttribute("aria-disabled")=="true"||i.hasAttribute("disabled"))return;let o=!0;if(this.selectionType!=="trigger-only"){let r=this.selectedIndices.indexOf(e);o=r==-1,o?this.selectionType==="single"?this.selectedIndices=[e]:this.selectedIndices.push(e):this.selectedIndices.splice(r,1),this.requestUpdate("selectedIndices")}this.focusIndex=e,this.dispatchSelectionEvent(e,o,t)}dispatchSelectionEvent(e,t,i){this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:t,
|
|
40
|
+
`}updated(e){if(super.updated(e),this._lastRenderedScrollTop=this._lastKnownScrollTop,this.updateItems(),(this._increaseWidthOnNextRenderIfNeeded||this._reachedMaxWidth)&&this._firstVisibleIndex<this._lastVisibleIndex)if(this.querySelector("[item-index]"))this.adjustWidthIfNeeded();else{let t=new MutationObserver(()=>{this.adjustWidthIfNeeded(),t.disconnect()});t.observe(this)}}adjustWidthIfNeeded(){this._increaseWidthOnNextRenderIfNeeded?(this._increaseWidthOnNextRenderIfNeeded=!1,window.requestAnimationFrame(()=>{let e=Number.parseInt(getComputedStyle(this).maxWidth)-this.offsetWidth;if(e==0)this._reachedMaxWidth=!0,this.enableLineClampOnItemsIfNeeded();else{this._reachedMaxWidth=!1;let t=[...this.querySelectorAll("[item-index]")].map(o=>{if(o instanceof kt){o.enableLineClamp=!1;let r=o.missingWidthForTexts;return r>e&&(o.enableLineClamp=!0),r}}),i=Math.max(...t);i>0&&(this.style.width=`${this.offsetWidth+i}px`)}})):this._reachedMaxWidth&&this.enableLineClampOnItemsIfNeeded()}enableLineClampOnItemsIfNeeded(){this.querySelectorAll("[item-index]").forEach(e=>{e instanceof kt&&(e.enableLineClamp=e.enableLineClamp||e.missingWidthForTexts>0)})}increaseWidthOnNextRenderIfNeeded(){this._increaseWidthOnNextRenderIfNeeded=!0}updateItems(){let e=[...this.querySelectorAll("[item-index]")],t=new Map,i=document.createDocumentFragment();for(let o of this._itemsRenderData){let r=this.renderItem(o);r.parentElement||i.appendChild(r),t.set(o.dataHash,r);let s=e.indexOf(r);s!==-1&&e.splice(s,1)}this.appendChild(i);for(let o of e)o instanceof kt&&(o.enableLineClamp=!1),this.removeChild(o);t.forEach((o,r)=>{this._elementCache.set(r,o)})}renderItem({index:e,top:t,dataHash:i,data:o}){let r;return o?this._elementCache.has(i)?(r=this._elementCache.get(i),this._elementCache.delete(i)):(r=this.itemGenerator(o,e),r.setAttribute("slot","items")):(r=document.createElement("div"),r.setAttribute("placeholder-item",""),r.setAttribute("slot","items")),Object.assign(r.style,{transform:`translateY(${t}px)`,height:`${this.itemHeight}px`}),r.setAttribute("item-index",e.toString()),r.setAttribute("aria-setsize",String(this.finalSizeIsKnown?this.itemCount:-1)),r.setAttribute("aria-posinset",String(e+1)),(!r.id||r.id.startsWith(this.id+"_item_"))&&(r.id=this.id+"_item_"+e),this.itemCount-1==e?r.setAttribute("last",""):r.removeAttribute("last"),this.updateSelectedAttribute(e,r),this.updateFocusedAttribute(e,r),r}updateFocusedAttribute(e,t){this.focusIndex==e&&(this.focusTarget||document.activeElement==this)?(t.setAttribute("focused",""),this.setAttribute("aria-activedescendant",t.id)):t.removeAttribute("focused")}updateSelectedAttribute(e,t){let i=this.selectedIndices.indexOf(e)!==-1;i?t.setAttribute("selected",""):t.removeAttribute("selected"),t.setAttribute("aria-selected",String(i))}updateItemsRenderData(){if(this._itemsRenderData=[],this._visibleItemsNum=Math.min(Math.ceil(this.height/this.itemHeight),this.itemCount),this._visibleItemsNum>0){this._firstVisibleIndex=this.normalizeIndex(Math.floor(this._lastKnownScrollTop/this.itemHeight)),this._lastVisibleIndex=this.normalizeIndex(this._firstVisibleIndex+this._visibleItemsNum);let e=this.normalizeIndex(this._firstVisibleIndex-2),t=this.normalizeIndex(this._lastVisibleIndex+2);this.requestData(e,t);for(let i=e;i<=t;i++){let o=i-e,r=this.items[o],s;r?s=JSON.stringify(r):s=`placeholder-${o}`,this._itemsRenderData.push({index:i,top:this.itemHeight*i,physicalIndex:o,dataHash:s,data:r})}}else this._firstVisibleIndex=0,this._lastVisibleIndex=0}normalizeIndex(e){return Math.max(0,Math.min(e,this.itemCount-1))}get height(){return this.offsetHeight}requestData(e,t){!Number.isNaN(e)&&!Number.isNaN(t)&&this.dispatchEvent(new CustomEvent("data-request",{detail:{startIndex:e,stopIndex:t}}))}handleSelection(e,t){if(e<0||this.itemCount<=e)return;let i=this.getListItem(e);if(i.getAttribute("aria-disabled")=="true"||i.hasAttribute("disabled"))return;let o=!0;if(this.selectionType!=="trigger-only"){let r=this.selectedIndices.indexOf(e);o=r==-1,o?this.selectionType==="single"?this.selectedIndices=[e]:this.selectedIndices.push(e):this.selectedIndices.splice(r,1),this.requestUpdate("selectedIndices")}this.focusIndex=e,this.dispatchSelectionEvent(e,o,t)}dispatchSelectionEvent(e,t,i){this.dispatchEvent(new CustomEvent("selection",{detail:{index:e,selected:t,originalEvent:i}}))}handleClick(e){let t=e.composedPath().find(i=>i.hasAttribute&&i.hasAttribute("item-index"));if(t){let i=parseInt(t.getAttribute("item-index"));Number.isInteger(i)&&((e.button==0||e.button==1)&&this.handleSelection(i,e),this.focusIndex=i)}}},ft.ID="sd-virtual-list",ft.ensureDefined=()=>{kt.ensureDefined(),customElements.get(ft.ID)||customElements.define(ft.ID,ft)},ft);mt([u({type:Number,attribute:"item-height",reflect:!0})],ct.prototype,"itemHeight",2);mt([u({type:Number})],ct.prototype,"itemCount",2);mt([u({type:Array,attribute:!1})],ct.prototype,"items",2);mt([u({type:String,attribute:"selection-type",reflect:!0,noAccessor:!0})],ct.prototype,"selectionType",2);mt([u({type:String,attribute:!0,reflect:!0})],ct.prototype,"id",2);mt([u({type:String,reflect:!0})],ct.prototype,"role",2);mt([u({type:Number,attribute:"focus-index",reflect:!0})],ct.prototype,"focusIndex",1);mt([u({type:Array,attribute:!1})],ct.prototype,"selectedIndices",1);var Me=ct;Me.ensureDefined();var Tr=":host{contain:content;outline:none}:host(:not([selected])) .text{opacity:.8}:host(:hover),:host(:focus),:host([anchors-shown]){background-color:var(--sd-tab-bar-hover-color, #e7f1fa);cursor:pointer}:host(:focus-visible){box-shadow:0 0 0 1px var(--sd-tab-bar-focus-color, #1467ba) inset}.root{position:relative;overflow:hidden;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:var(--sd-tab-bar-padding, 8px) calc(2 * var(--sd-tab-bar-padding, 8px));box-sizing:border-box}.counter{text-align:center;background-color:#d9d9d9;min-width:24px;height:24px;line-height:24px;margin-left:calc(-.5 * var(--sd-tab-bar-padding, 8px));margin-right:var(--sd-tab-bar-padding, 8px)}:host([selected]) .counter{color:var(--sd-tab-bar-selected-counter-color, white);background-color:var(--sd-tab-bar-selected-counter-background-color, #3b85d1)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1}.down-arrow{padding-left:calc(1.5 * var(--sd-tab-bar-padding, 8px));margin-right:calc(-1 * var(--sd-tab-bar-padding, 8px));outline:none;fill:var(--sd-tab-bar-color, #1467ba);flex:0 0 auto}.ripple{position:absolute;background:var(--sd-tab-bar-color, #1467ba);border-radius:50%;width:5px;height:5px;animation:rippleEffect .88s 1;opacity:0}@keyframes rippleEffect{0%{transform:scale(1);opacity:.4}to{transform:scale(100);opacity:0}}",Rr=Object.defineProperty,he=(e,t,i,o)=>{for(var r=void 0,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=n(t,i,r)||r);return r&&Rr(t,i,r),r},fo=navigator.userAgent.indexOf("Trident")!==-1,vo=class extends q{constructor(){super(...arguments),this.minimumOverlayWidth=150,this.handleKeyDown=t=>{this.hasAnchors?(this.vertical?["Left","ArrowLeft","Right","ArrowRight","Enter"]:["Down","ArrowDown","Up","ArrowUp","Enter"]).indexOf(t.key)===-1?(this.hideAnchors(),this.focus()):(this.anchorsShown||(this.showAnchors(),window.requestAnimationFrame(()=>{this.list.focusIndex=0,this.list.focus(),this.updateDropdownSizes()})),t.preventDefault(),t.stopPropagation()):t.key==="Enter"&&(this.dispatchSelectionEvent(),t.preventDefault(),t.stopPropagation())},this.handleListSelection=t=>{this.hideAnchors(),t.stopPropagation(),this.dispatchSelectionEvent(this.anchors[t.detail.index]),this.focus()},this.handlePointerLeave=t=>{(fo||this.list&&!this.list.contains(t.target))&&window.addEventListener("pointermove",this.handlePointerMove)},this.handlePointerMove=t=>{!this.isPointerAbove(t,this)&&!this.isPointerAbove(t,this.list)&&(this.hideAnchors(),window.removeEventListener("pointermove",this.handlePointerMove))}}get selected(){return this.hasAttribute("selected")}set selected(t){if(t)this.setAttribute("selected",""),this.setAttribute("aria-selected","true");else if(this.removeAttribute("selected"),this.setAttribute("aria-selected","false"),this.shadowRoot&&this.showRipple){let i=this.shadowRoot.querySelector(".ripple");i.style.display="none",this.showRipple=!1}}firstUpdated(t){super.firstUpdated(t);let i=window.CSS&&window.CSS.supports;this._cssMathMaxSupported=i&&CSS.supports("max-width","max(50vw)");let o=this.ownerDocument;o.adoptedStyleSheets&&(this.shadowRoot.adoptedStyleSheets=[...this.shadowRoot.adoptedStyleSheets,...o.adoptedStyleSheets]),this.addEventListener("pointerdown",r=>{if(!this.noInk&&!this.showRipple){this.showRipple=!0;let s=this.getBoundingClientRect(),n=this.shadowRoot.querySelector(".ripple");n.style.left=`${r.clientX-s.left}px`,n.style.top=`${r.clientY-s.top}px`,n.style.display="",n.addEventListener("animationend",()=>{n.style.display="none",this.showRipple=!1},{once:!0})}}),this.addEventListener("click",r=>{r.composedPath().indexOf(this.list)===-1&&(this.dispatchSelectionEvent(),r.preventDefault(),r.stopPropagation())}),this.addEventListener("keydown",this.handleKeyDown),this.setAttribute("tabindex","-1"),this.role="tab"}disconnectedCallback(){super.disconnectedCallback(),this.hideAnchors()}static get styles(){return[ht`
|
|
41
41
|
${it(Tr)}
|
|
42
42
|
`]}render(){return W`
|
|
43
43
|
<div class="root" @pointerover=${this.showAnchors} @pointerdown=${this.showAnchors}>
|