ca-web-components/lib/components/ca-actions-bar.js

web components for Clínica Alemana

import{r as u,i as h,x as c}from"../assets/unsafe-html-DS3AO1W7.js";class p extends u{constructor(){super(),this.options=["Option 1","Option 2","Option 3"],this._selectedOptionIndex=0,this.initialPosition=0}static get properties(){return{options:{type:Array},initialPosition:{type:Number}}}static get styles(){return h`
      .horizontal-bar {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--column-count), 1fr);
        align-items: center;
        justify-items: center;
        width: 100%;
        background: #F2F5F9;
        border: 1px solid #E9EBEC;
        box-shadow: 0 34px 44px rgba(0, 0, 0, 0.06);
        border-radius: 100px;
        height: 40px;
      }

      .option,
      .floating-element {
        background-color: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        height: 100%;
      }

      .floating-element {
        background-color: #4DBFB8;
        color: #FFFFFF;
        border-radius: 100px;
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        z-index: 1;
        height: 100%;
        width: calc(100% / var(--column-count));
        transition: 200ms ease;
        box-shadow: 0 2px 5px rgba(201, 207, 227, 0.75);
      }
    `}_emitEvent(t){const e=new CustomEvent("change",{detail:{index:t,option:this.options[t]},bubbles:!0,composed:!0});this.dispatchEvent(e)}_selectOption(t){const e=this.shadowRoot.querySelectorAll(".option")[t],o=this.shadowRoot.querySelector(".floating-element"),n=e.getBoundingClientRect(),s=this.shadowRoot.querySelector(".horizontal-bar").getBoundingClientRect();o.style.left=`${n.left-s.left}px`,o.innerHTML=`<cas-text variant="body2">${e.textContent}</cas-text>`,this._selectedOptionIndex=t,this._emitEvent(t)}_initializeDraggable(t){let e={x:0},o={x:0};const n=i=>{i.preventDefault(),e={x:i.clientX-o.x},document.addEventListener("mousemove",s),document.addEventListener("mouseup",r)},s=i=>{i.preventDefault(),o={x:i.clientX-e.x};const a=this.shadowRoot.querySelector(".horizontal-bar").getBoundingClientRect(),d=t.getBoundingClientRect();o.x>=0&&o.x+d.width<=a.width&&(t.style.transition="none",t.style.left=`${o.x}px`)},r=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",r),this._adjustFloatingElementPosition()};t.addEventListener("mousedown",n)}_adjustFloatingElementPosition(){const t=this.shadowRoot.querySelector(".floating-element"),e=this.shadowRoot.querySelectorAll(".option"),o=t.getBoundingClientRect();let n=e[0],s=1/0;e.forEach(i=>{const l=i.getBoundingClientRect(),a=Math.abs(l.left-o.left);a<s&&(s=a,n=i)});const r=Array.from(e).indexOf(n);this._selectOption(r)}firstUpdated(){const t=this.shadowRoot.querySelector(".floating-element");this._initializeDraggable(t);const e=this.shadowRoot.querySelectorAll(".option")[this.initialPosition],o=e.getBoundingClientRect(),n=this.shadowRoot.querySelector(".horizontal-bar").getBoundingClientRect();t.style.left=`${o.left-n.left}px`,t.innerHTML=`<cas-text variant="body2">${e.textContent}</cas-text>`}render(){return c`
      <style> 
        .horizontal-bar { 
          --column-count: ${this.options.length}; 
        } 
      </style>
      <div class="horizontal-bar" data-current="${this._selectedOptionIndex}"> 
        <div class="floating-element">
          <cas-text variant="body2">${this.options[0]}</cas-text> 
        </div>
        ${this.options.map((t,e)=>c`
          <button class="option" @click="${()=>this._selectOption(e)}"><cas-text variant="body1">${t}</cas-text></button>
        `)}
      </div>
    `}}customElements.define("ca-actions-bar",p);