import{r as t,c as i,h as s,H as e,g as n}from"./p-9f1da77e.js";const o=class{constructor(s){t(this,s),this.animating=!1,this.size="md",this.border=!1,this.center=!1,this.color="primary",this.options=[],this.linePosition={left:0,width:0},this.handleOptionClick=t=>()=>{const i=this._options[t];i.disabled||this.animating||(this.updateOptions(t),this.changeOption.emit(i.value))},this.changeOption=i(this,"changeOption",7)}setOptions(t,i){JSON.stringify(t)!==JSON.stringify(i)&&(this._options=t)}animateFromToTab(t){if(0===this.linePosition.left&&0===this.linePosition.width)return;const i=t.findIndex(t=>!!t.active),s=this.wrapTabs.querySelectorAll(".tabLine__button")[i].getBoundingClientRect(),e=this.el.getBoundingClientRect(),n=s.left-e.left,o=this.calculateLinePosition({prevLeft:this.linePosition.left,nextWidth:s.width,nextLeft:n,side:this.linePosition.left<n?"toRight":"toLeft"});this.animating=!0,this.linePosition=o.firstStep,setTimeout(()=>{this.linePosition=o.secondStep,this.animating=!1},300)}animateDefaultLine(){const t=this._options.findIndex(t=>!!t.active);if(t<0)return;const i=this.wrapTabs.querySelectorAll(".tabLine__button")[t].getBoundingClientRect(),s=this.el.getBoundingClientRect();this.linePosition={left:i.left-s.left,width:i.width}}calculateLinePosition(t){return{firstStep:{left:"toRight"===t.side?t.prevLeft:t.nextLeft,width:"toRight"===t.side?t.nextLeft-t.prevLeft+t.nextWidth:t.prevLeft-t.nextLeft+t.nextWidth},secondStep:{left:t.nextLeft,width:t.nextWidth}}}updateOptions(t){const i=[...this._options].map(t=>Object.assign(Object.assign({},t),{active:!1}));i[t].active=!0,this._options=i}componentWillLoad(){this._options=this.options}componentDidLoad(){this.animateDefaultLine();var t={root:document.documentElement};new IntersectionObserver(t=>{t.forEach(()=>{this.animateDefaultLine()})},t).observe(this.el)}render(){return s(e,null,s("div",{class:{tabLine:!0,"tabLine--border":this.border,"tabLine--center":this.center},ref:t=>this.wrapTabs=t},this._options.map((t,i)=>{var e;return s("div",{class:"tabLine__buttonWrapper",key:`tabItem_${i}`},s("button",{class:{tabLine__button:!0,"tabLine__button--secondary":"secondary"===this.color,"tabLine__button--sm":"sm"===this.size,"tabLine__button--active":t.active,"tabLine__button--disabled":t.disabled},onClick:this.handleOptionClick(i)},t.text),t.tag&&s("div",{class:{tabLine__tag:!0,"tabLine__tag--tabCenter":this.center},style:t.tag.color?{borderColor:t.tag.color,color:t.tag.color}:void 0},null===(e=t.tag)||void 0===e?void 0:e.text))}),s("div",{class:{tabLine__underline:!0,"tabLine__underline--secondary":"secondary"===this.color},style:{left:`${this.linePosition.left}px`,width:`${this.linePosition.width}px`}})))}get el(){return n(this)}static get watchers(){return{options:["setOptions"],_options:["animateFromToTab"]}}static get style(){return":host{display:block}.tabLine{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.tabLine__button{-webkit-appearance:button;padding:0;margin:0;font-family:inherit;cursor:pointer;background-color:transparent;background-image:none;color:inherit;border:none;font-size:100%;outline:0;margin-top:1.2rem;margin-bottom:1.2rem;margin-left:2.4rem;margin-right:2.4rem;font-size:1.4rem;font-weight:900;line-height:2.4rem}.tabLine__button--sm{font-size:1.1rem;line-height:1.6rem}.tabLine__button--disabled{color:var(--disabled-text);cursor:not-allowed}.tabLine__button--active{color:var(--primary)}.tabLine__button--active.tabLine__button--secondary{color:var(--secondary)}.tabLine__buttonWrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tabLine__tag{font-weight:900;font-size:1.2rem;padding-left:.4rem;padding-right:.4rem;border-color:var(--neutral-01);color:var(--neutral-01);border-radius:.4rem;margin-right:2.4rem;margin-left:-1.2rem;border-width:.2rem;border-style:solid;line-height:2rem}.tabLine__tag--tabCenter{margin-right:auto}.tabLine__underline{position:absolute;background-color:var(--primary);bottom:0;border-radius:2.4rem;-webkit-transition:all .3s ease;transition:all .3s ease;height:.3rem}.tabLine__underline--secondary{background-color:var(--secondary)}.tabLine--center{-ms-flex-pack:distribute;justify-content:space-around}.tabLine--border{border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--neutral-01)}"}};export{o as cc_tabs_underline};