gis_app/library/arcgis/4.30/esri/chunks/tab-nav.js

// All material copyright Esri, All Rights Reserved, unless otherwise specified.
// See https://js.arcgis.com/4.30/esri/copyright.txt for details.
//>>built
define("exports ./componentsUtils ./core ./dom ./observers ./locale ./t9n ./button ./icon ./loader".split(" "),function(r,h,n,l,t,u,m,x,y,z){function v(){"undefined"!==typeof customElements&&["calcite-tab-nav","calcite-button","calcite-icon","calcite-loader"].forEach(a=>{switch(a){case "calcite-tab-nav":customElements.get(a)||customElements.define(a,w);break;case "calcite-button":customElements.get(a)||x.defineCustomElement();break;case "calcite-icon":customElements.get(a)||y.defineCustomElement();
break;case "calcite-loader":customElements.get(a)||z.defineCustomElement()}})}const w=h.proxyCustomElement(class extends h.H{constructor(){super();this.__registerHost();this.__attachShadow();this.calciteTabChange=h.createEvent(this,"calciteTabChange",6);this.calciteInternalTabChange=h.createEvent(this,"calciteInternalTabChange",6);this.effectiveDir="ltr";this.lastScrollWheelAxis="x";this.resizeObserver=t.createObserver("resize",()=>{this.updateScrollingState();this.activeIndicatorEl&&this.updateActiveIndicator()});
this.onTabTitleWheel=a=>{a.preventDefault();const {deltaX:b,deltaY:c}=a;var d=Math.abs(b);const g=Math.abs(c);d===g?d="x"===this.lastScrollWheelAxis?b:c:d>g?(d=b,this.lastScrollWheelAxis="x"):(d=c,this.lastScrollWheelAxis="y");a.currentTarget.scrollBy(("rtl"===this.effectiveDir?-1:1)*d,0);requestAnimationFrame(()=>this.updateActiveIndicator())};this.onSlotChange=a=>{this.intersectionObserver?.disconnect();a.target.assignedElements().forEach(b=>{this.intersectionObserver?.observe(b)})};this.storeContainerRef=
a=>this.containerEl=a;this.storeTabTitleWrapperRef=a=>{this.tabTitleContainerEl=a;this.intersectionObserver=t.createObserver("intersection",()=>this.updateScrollingState(),{root:a,threshold:[0,.5,1]})};this.scrollToTabTitles=a=>{h.readTask(()=>{const b=this.tabTitleContainerEl,c=b.getBoundingClientRect();var d=Array.from(this.el.querySelectorAll("calcite-tab-title"));const {effectiveDir:g}=this;"forward"===a&&d.reverse();let f=null;d.forEach(e=>{const k=e.getBoundingClientRect(),p=c.x+c.width,q=k.x+
k.width;"forward"===a&&"ltr"===g||"backward"===a&&"rtl"===g?k.x>p?f=e:q>p&&k.x>c.x&&(f=e):q<c.x?f=e:q<p&&k.x<c.x&&(f=e)});f&&({scrollerButtonWidth:d}=this,b.scrollTo({left:f.offsetLeft+("forward"===a&&"ltr"===g||"backward"===a&&"rtl"===g?-d:f.offsetWidth-b.clientWidth+d),behavior:"smooth"}))})};this.scrollToNextTabTitles=()=>this.scrollToTabTitles("forward");this.scrollToPreviousTabTitles=()=>this.scrollToTabTitles("backward");this.handleTabFocus=(a,b,c)=>{b=l.focusElementInGroup(this.enabledTabTitles,
b,c);this.scrollTabTitleIntoView(b,"instant");a.stopPropagation()};this.onTabTitleScroll=()=>{this.updateActiveIndicator();this.updateScrollingState()};this.renderScrollButton=a=>{const {bordered:b,messages:c,hasOverflowingStartTabTitle:d,hasOverflowingEndTabTitle:g,scale:f}=this,e="end"===a;return h.h("div",{class:{["scroll-button-container"]:!0,["scroll-button-container--backward"]:!e,["scroll-button-container--forward"]:e},hidden:e&&!g||!e&&!d,key:a},h.h("calcite-button",{appearance:b?"outline-fill":
"transparent","aria-label":e?c.nextTabTitles:c.previousTabTitles,class:{["scroll-button"]:!0},iconFlipRtl:"both",iconStart:e?"chevron-right":"chevron-left",kind:"neutral",onClick:e?this.scrollToNextTabTitles:this.scrollToPreviousTabTitles,scale:f,tabIndex:-1}))};this.syncId=this.storageId=void 0;this.selectedTitle=null;this.scale="m";this.layout="inline";this.position="bottom";this.bordered=!1;this.defaultMessages=this.messageOverrides=this.messages=this.indicatorWidth=this.indicatorOffset=void 0;
this.effectiveLocale="";this.hasOverflowingEndTabTitle=this.hasOverflowingStartTabTitle=!1;this.selectedTabId=void 0}onMessagesChange(){}async selectedTabIdChanged(){localStorage&&this.storageId&&void 0!==this.selectedTabId&&null!==this.selectedTabId&&localStorage.setItem(`calcite-tab-nav-${this.storageId}`,JSON.stringify(this.selectedTabId));this.calciteInternalTabChange.emit({tab:this.selectedTabId});this.selectedTitle=await this.getTabTitleById(this.selectedTabId)}selectedTitleChanged(){this.updateActiveIndicator()}connectedCallback(){this.parentTabsEl=
this.el.closest("calcite-tabs");this.resizeObserver?.observe(this.el);u.connectLocalized(this);m.connectMessages(this)}async componentWillLoad(){const a=`calcite-tab-nav-${this.storageId}`;localStorage&&this.storageId&&localStorage.getItem(a)&&(this.selectedTabId=JSON.parse(localStorage.getItem(a)));await m.setUpMessages(this)}componentDidLoad(){this.scrollTabTitleIntoView(this.selectedTitle,"instant")}componentWillRender(){const {parentTabsEl:a}=this;this.layout=a?.layout;this.bordered=a?.bordered;
this.effectiveDir=l.getElementDir(this.el);this.selectedTitle&&this.updateActiveIndicator()}componentDidRender(){this.tabTitles.length&&this.tabTitles.every(a=>!a.selected)&&!this.selectedTabId&&this.tabTitles[0].getTabIdentifier().then(a=>{this.calciteInternalTabChange.emit({tab:a})})}disconnectedCallback(){this.resizeObserver?.disconnect();u.disconnectLocalized(this);m.disconnectMessages(this)}render(){var a=`${this.indicatorWidth}px`;const b=`${this.indicatorOffset}px`;a="rtl"!==this.effectiveDir?
{width:a,left:b}:{width:a,right:b};return h.h(h.Host,{key:"0824dd4470393b0e186b0fdf238420454fed396c",role:"tablist"},h.h("div",{key:"205551441feaaa61e2b4b603a7b37ce3d18bdba8",class:{["tab-nav"]:!0,["tab-nav--start-overflow"]:!!this.hasOverflowingStartTabTitle,["tab-nav--end-overflow"]:!!this.hasOverflowingEndTabTitle,[`scale-${this.scale}`]:!0,[`position-${this.position}`]:!0,[h.CSS_UTILITY.rtl]:"rtl"===this.effectiveDir},ref:this.storeContainerRef},this.renderScrollButton("start"),h.h("div",{key:"64844ffd05363fe55e2ae9d4d820dc5113da57d8",
class:{["tab-titles-slot-wrapper"]:!0},onScroll:this.onTabTitleScroll,onWheel:this.onTabTitleWheel,ref:this.storeTabTitleWrapperRef},h.h("slot",{key:"a77b898cac87d4fa190ad717a3c0ca4474a962fe",onSlotchange:this.onSlotChange})),h.h("div",{key:"0bf812fe39d07fbddd54ddb515e2eb31adea9a74",class:{["tab-nav-active-indicator-container"]:!0},ref:c=>this.activeIndicatorContainerEl=c},h.h("div",{key:"e1624e7b9845ea37eea06ca7a85816d782530c79",class:"tab-nav-active-indicator",style:a,ref:c=>this.activeIndicatorEl=
c})),this.renderScrollButton("end")))}focusPreviousTabHandler(a){this.handleTabFocus(a,a.target,"previous")}focusNextTabHandler(a){this.handleTabFocus(a,a.target,"next")}focusFirstTabHandler(a){this.handleTabFocus(a,a.target,"first")}focusLastTabHandler(a){this.handleTabFocus(a,a.target,"last")}internalActivateTabHandler(a){const b=a.target;this.selectedTabId=a.detail.tab?a.detail.tab:this.getIndexOfTabTitle(b);a.stopPropagation();this.scrollTabTitleIntoView(b)}scrollTabTitleIntoView(a,b="smooth"){a&&
h.readTask(()=>{const c="ltr"===this.effectiveDir,d=this.tabTitleContainerEl,g=d.getBoundingClientRect(),f=a.getBoundingClientRect(),e=d.scrollLeft,k=c?this.hasOverflowingEndTabTitle:this.hasOverflowingStartTabTitle;f.left<g.left+((c?this.hasOverflowingStartTabTitle:this.hasOverflowingEndTabTitle)?this.scrollerButtonWidth:0)?d.scrollTo({left:e+(f.left-g.left)-this.scrollerButtonWidth,behavior:b}):f.right>g.right-(k?this.scrollerButtonWidth:0)&&d.scrollTo({left:e+(f.right-g.right)+this.scrollerButtonWidth,
behavior:b})})}activateTabHandler(a){this.calciteTabChange.emit();a.stopPropagation()}internalCloseTabHandler(a){this.handleTabTitleClose(a.target);a.stopPropagation()}updateTabTitles(a){a.target.selected&&(this.selectedTabId=a.detail)}globalInternalTabChangeHandler(a){this.syncId&&a.target!==this.el&&a.target.syncId===this.syncId&&this.selectedTabId!==a.detail.tab&&(this.selectedTabId=a.detail.tab);a.stopPropagation()}iconStartChangeHandler(){this.updateActiveIndicator()}effectiveLocaleChange(){m.updateMessages(this,
this.effectiveLocale)}get scrollerButtonWidth(){const {scale:a}=this;return parseInt("s"===a?n.calciteSize24:"m"===a?n.calciteSize32:n.calciteSize44)}updateActiveIndicator(){const a=this.activeIndicatorContainerEl?.offsetWidth,b=this.selectedTitle?.offsetLeft,c=this.selectedTitle?.offsetWidth;this.indicatorOffset=("ltr"===this.effectiveDir?b:a-b-c)+("ltr"===this.effectiveDir?-1:1)*(this.containerEl?.scrollLeft+this.tabTitleContainerEl?.scrollLeft);this.indicatorWidth=this.selectedTitle?.offsetWidth}updateScrollingState(){var a=
this.tabTitleContainerEl;if(a){var b=a.scrollLeft;var c=a.clientWidth,d=a.scrollWidth;"ltr"===this.effectiveDir?(a=0<b,b=b+c<d):(a=0>b,b=b!==-(d-c));this.hasOverflowingStartTabTitle=a;this.hasOverflowingEndTabTitle=b}}getIndexOfTabTitle(a,b=this.tabTitles){return b.indexOf(a)}async getTabTitleById(a){return Promise.all(this.tabTitles.map(b=>b.getTabIdentifier())).then(b=>this.tabTitles[b.indexOf(a)])}get tabTitles(){return l.filterDirectChildren(this.el,"calcite-tab-title")}get enabledTabTitles(){return l.filterDirectChildren(this.el,
"calcite-tab-title:not([disabled])").filter(a=>!a.closed)}handleTabTitleClose(a){const {tabTitles:b}=this;var c=a.selected;const d=b.reduce((f,e,k)=>e.closed?f:[...f,k],[]),g=d.length;if(1===g&&b[d[0]].closable)b[d[0]].closable=!1,this.selectedTabId=d[0],c&&b[d[0]].activateTab();else if(1<g){const f=b.findIndex(e=>e===a);c=d.find(e=>e>f);this.selectedTabId===f&&(this.selectedTabId=c?c:g-1,b[this.selectedTabId].activateTab())}requestAnimationFrame(()=>{this.updateActiveIndicator();b[this.selectedTabId].focus()})}static get assetsDirs(){return["assets"]}get el(){return this}static get watchers(){return{messageOverrides:["onMessagesChange"],
selectedTabId:["selectedTabIdChanged"],selectedTitle:["selectedTitleChanged"],effectiveLocale:["effectiveLocaleChange"]}}static get style(){return':host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout\x3dcenter]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout\x3dcenter]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout\x3dcenter]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}'}},
[1,"calcite-tab-nav",{storageId:[513,"storage-id"],syncId:[513,"sync-id"],selectedTitle:[1040],scale:[1],layout:[1537],position:[1],bordered:[1540],indicatorOffset:[1026,"indicator-offset"],indicatorWidth:[1026,"indicator-width"],messages:[1040],messageOverrides:[1040],defaultMessages:[32],effectiveLocale:[32],hasOverflowingStartTabTitle:[32],hasOverflowingEndTabTitle:[32],selectedTabId:[32]},[[0,"calciteInternalTabsFocusPrevious","focusPreviousTabHandler"],[0,"calciteInternalTabsFocusNext","focusNextTabHandler"],
[0,"calciteInternalTabsFocusFirst","focusFirstTabHandler"],[0,"calciteInternalTabsFocusLast","focusLastTabHandler"],[0,"calciteInternalTabsActivate","internalActivateTabHandler"],[0,"calciteTabsActivate","activateTabHandler"],[0,"calciteInternalTabsClose","internalCloseTabHandler"],[0,"calciteInternalTabTitleRegister","updateTabTitles"],[16,"calciteInternalTabChange","globalInternalTabChangeHandler"],[0,"calciteInternalTabIconChanged","iconStartChangeHandler"]],{messageOverrides:["onMessagesChange"],
selectedTabId:["selectedTabIdChanged"],selectedTitle:["selectedTitleChanged"],effectiveLocale:["effectiveLocaleChange"]}]);v();r.TabNav=w;r.defineCustomElement=v});