@esri/calcite-components/dist/calcite/NUDXMIVB.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{b as $}from"./ESHROPVK.js";import"./VAHSXLFS.js";import{a as x}from"./YXZ62PQO.js";import{a as v}from"./M7EAHGE3.js";import{d as T}from"./CKRTMNFR.js";import{b}from"./5RDOSP2E.js";import{e as y}from"./3ADX47DD.js";import{a as k}from"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as m,F as a,R as f,c as g,d as r,q as u}from"./BJZTU5BQ.js";var i={header:"header",heading:"heading",close:"close",container:"container",tipContainer:"tip-container",tipContainerAdvancing:"tip-container--advancing",tipContainerRetreating:"tip-container--retreating",pagination:"pagination",pagePosition:"page-position",pageNext:"page-next",pagePrevious:"page-previous"},s={chevronLeft:"chevron-left",chevronRight:"chevron-right",close:"x"},C=g`:host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);--calcite-tip-manager-height: 19vh}:host *{box-sizing:border-box}:host([closed]){display:none}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline-end:0px;padding-inline-start:1rem}.header .heading{padding:0;font-size:var(--calcite-font-size-1);line-height:1.5rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.container{position:relative;overflow:hidden;outline-color:transparent;min-block-size:150px}.container:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.tip-container{margin-block-start:1px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem;outline-color:transparent;animation-name:none;animation-duration:var(--calcite-animation-timing);block-size:var(--calcite-tip-manager-height)}.tip-container:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}::slotted(calcite-tip){margin:0;border-style:none;max-inline-size:var(--calcite-tip-max-width)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding-inline:0px;padding-block:.75rem .5rem}.page-position{margin-block:0px;margin-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px,0,0) scale(.99)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px,0,0) scale(.99)}to{opacity:1;transform:translateZ(0) scale(1)}}:host([hidden]){display:none}[hidden]{display:none}`,h=class extends m{constructor(){super(...arguments),this.messages=T(),this.mutationObserver=v("mutation",()=>this.setUpTips()),this.closed=!1,this.calciteTipManagerClose=u({cancelable:!1})}static{this.properties={direction:[16,{},{state:!0}],groupTitle:[16,{},{state:!0}],selectedIndex:[16,{},{state:!0}],tips:[16,{},{state:!0}],total:[16,{},{state:!0}],closed:[7,{},{reflect:!0,type:Boolean}],headingLevel:[11,{},{type:Number,reflect:!0}],messageOverrides:[0,{},{attribute:!1}]}}static{this.styles=C}async nextTip(){this.direction="advancing";let e=this.selectedIndex+1;this.selectedIndex=(e+this.total)%this.total}async previousTip(){this.direction="retreating";let e=this.selectedIndex-1;this.selectedIndex=(e+this.total)%this.total}connectedCallback(){super.connectedCallback(),this.setUpTips(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}async load(){k.deprecated("component",{name:"tip-manager",removalVersion:4,suggested:"carousel"})}willUpdate(e){e.has("closed")&&(this.hasUpdated||this.closed!==!1)&&(this.direction=null),e.has("selectedIndex")&&this.selectedChangeHandler(),e.has("messages")&&this.updateGroupTitle()}loaded(){this.updateGroupTitle()}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}selectedChangeHandler(){this.showSelectedTip(),this.updateGroupTitle()}setUpTips(){let e=Array.from(this.el.querySelectorAll("calcite-tip"));if(this.total=e.length,this.total===0)return;let t=this.el.querySelector("calcite-tip[selected]");this.tips=e,this.selectedIndex=t?e.indexOf(t):0,e.forEach(n=>{n.closeDisabled=!0}),this.showSelectedTip()}hideTipManager(){this.closed=!0,this.calciteTipManagerClose.emit()}showSelectedTip(){this.tips.forEach((e,t)=>{let n=this.selectedIndex===t;e.selected=n,e.hidden=!n})}updateGroupTitle(){if(this.tips){let t=this.tips[this.selectedIndex].closest("calcite-tip-group");this.groupTitle=t?.groupTitle||this.messages?.defaultGroupTitle}}previousClicked(){this.previousTip()}nextClicked(){this.nextTip()}tipManagerKeyDownHandler(e){if(e.target===this.container)switch(e.key){case"ArrowRight":e.preventDefault(),this.nextTip();break;case"ArrowLeft":e.preventDefault(),this.previousTip();break;case"Home":e.preventDefault(),this.selectedIndex=0;break;case"End":e.preventDefault(),this.selectedIndex=this.total-1;break}}storeContainerRef(e){this.container=e}renderPagination(){let e=y(this.el),{selectedIndex:t,tips:n,total:c,messages:o}=this,l=o.next,d=o.previous,p=o.defaultPaginationLabel;return n.length>1?r`<footer class=${a(i.pagination)}><calcite-action class=${a(i.pagePrevious)} .icon=${e==="ltr"?s.chevronLeft:s.chevronRight} @click=${this.previousClicked} scale=m .text=${d}></calcite-action><span class=${a(i.pagePosition)}>${`${p} ${t+1}/${c}`}</span><calcite-action class=${a(i.pageNext)} .icon=${e==="ltr"?s.chevronRight:s.chevronLeft} @click=${this.nextClicked} scale=m .text=${l}></calcite-action></footer>`:null}render(){let{closed:e,direction:t,headingLevel:n,groupTitle:c,selectedIndex:o,messages:l,total:d}=this,p=l.close;return d===0?null:r`<section .ariaHidden=${e} class=${a(i.container)} .hidden=${e} @keydown=${this.tipManagerKeyDownHandler} tabindex=0 ${b(this.storeContainerRef)}><header class=${a(i.header)}>${$({class:i.heading,level:n,children:c})}<calcite-action class=${a(i.close)} @click=${this.hideTipManager} scale=m .text=${p}><calcite-icon .icon=${s.close} scale=m></calcite-icon></calcite-action></header>${x(o,r`<div class=${a({[i.tipContainer]:!0,[i.tipContainerAdvancing]:!e&&t==="advancing",[i.tipContainerRetreating]:!e&&t==="retreating"})} tabindex=0><slot></slot></div>`)}${this.renderPagination()}</section>`}};f("calcite-tip-manager",h);export{h as TipManager};