ca-web-components/lib/components/ca-talks-workshops.js

web components for Clínica Alemana

var x=Object.defineProperty;var u=(i,o,t)=>o in i?x(i,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[o]=t;var r=(i,o,t)=>u(i,typeof o!="symbol"?o+"":o,t);import{i as g,r as l,x as p}from"../assets/unsafe-html-DS3AO1W7.js";const f=[{title:"Talleres de Mindfulness",description:"Sesiones para experimentar una nueva forma de enfrentar el dolor crónico y vivir plenamente.",tag:"Presencial con costo",url:"https://www.clinicaalemana.cl/centro-de-extension/talleres-mindfulness",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/charlas-telleres/image3.png?sfvrsn=4ecdbe36_2"},{title:"Taller: hermanos de pacientes con TEA",description:"Queremos entregar herramientas para comprender y enfrentar de mejor forma este desafío.",tag:"Presencial con costo",url:"https://www.clinicaalemana.cl/centro-de-extension/taller-hermanos-de-pacientes-con-tea/",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/art%C3%ADculos/ni%C3%B1osc92daafee9bb4431aafb54becc85c91d.png?sfvrsn=7496eed2_0"}],m=g`
  .card {
    text-align: initial;
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: 1fr 105px;
    border-radius: 10px;
    width: 352px;
    min-width: 352px;
    border: 1px solid var(--background-background-2, #F2F5F9);
    color: #364855;
    background: var(--background-background, #FFF);
    box-shadow: 0px 30px 40px 0px rgba(200, 200, 200, 0.25);
    transition: all 200ms ease-in-out;
  }
  .card:hover {
    border-radius: 10px;
    background: var(--secondary-secondary-7, #978EE6);
    box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.10);
    color: #ffffff;
  }
  .card__image {
    position: relative;
    border-radius: 0 10px 10px 0;
    height: 184px;
    overflow: hidden;
  }
  .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card__content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: start;
    gap: 24px;
    padding: 20px 10px 20px 20px;
    
  }
  .card__content__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .card__content .tag {
    background: var(--secondary-secondary-3, #EEECFB);
    color: #5143D5;
    padding: 4px;
  }
  .card__link {
    margin-top: 8px;
    display: flex;
    justify-content: start;
  }
  .card__link .button {
    display: flex;
    border-radius: 20px;
    border: 1px solid var(--tertiary-tertiary-1, #203442);
    background: var(--background-background, #FFF);
    padding: 4px 16px;
  }
  a {
    text-decoration: none;
    color: currentColor;
  }
  .list {
    display: flex;
    gap: 16px;
    padding: 32px 32px 86px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .actions {
    display: none;
    justify-content: end;
    gap: 12px;
    padding: 0 16px;
    margin-top: -42px;
  }

  .actions button {
    background-color: #4DBFB8;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    --eloisa-ds-icon-color: currentColor;
    color: #FFF;
  }

  .actions button:disabled {
    background-color: #E9EBEC;
    color: #909AA1;
    cursor: initial;
  }

  @media (max-width: 768px) {
    .list {
      padding: 32px 16px 52px;
    }
    .card {
      width: calc(100vw - 36px);
      min-width: calc(100vw - 36px);
    }
    .card__image {
      height: initial;
    }
  }
`;class c extends l{constructor(){super();r(this,"handleScroll",(t,e,a)=>{const s=t.target.scrollLeft,n=t.target.scrollWidth,d=t.target.clientWidth,h=n-s-d;s>0?e.disabled=!1:e.disabled=!0,h>0?a.disabled=!1:a.disabled=!0});r(this,"handlePrev",()=>{const t=this.shadowRoot.querySelector(".list");t.scrollLeft-=200});r(this,"handleNext",()=>{const t=this.shadowRoot.querySelector(".list");t.scrollLeft+=200});this.name="",this.value="",this.data=[]}updated(t){if(t.has("data")){const e=this.shadowRoot.querySelector(".list"),a=this.shadowRoot.querySelector(".actions"),s=e.scrollWidth>e.clientWidth,n=window.innerWidth<768;(s||n)&&(a.style.display="flex")}}firstUpdated(){this.data=f,this.requestUpdate();const t=this.shadowRoot.querySelector(".list"),e=this.shadowRoot.querySelector(".prev"),a=this.shadowRoot.querySelector(".next");t.addEventListener("scroll",s=>this.handleScroll(s,e,a)),e.addEventListener("click",this.handlePrev),a.addEventListener("click",this.handleNext)}render(){const t=({tag:e,title:a,description:s,image:n,url:d})=>p`
        <a href="${d}" target="_blank" class="card">
          <div class="card__content">
            <div class="card__content__text">
                <cas-text variant="body2">${a}</cas-text>
                <cas-text variant="caption2">${s}</cas-text>
            </div>
            <div class="tag">
                <cas-text variant="caption1">${e}</cas-text>    
            </div>
          </div>
          <div class="card__image">
              <img src="${n}" alt="${a}">
          </div>
        </a>
      `;return p`
      <section class="container">
        <div class="list">${this.data.map(e=>t(e))}</div>
        <div class="actions">
          <button class="prev" disabled>
            <cas-icon
              disabled
              variant="flat"
              name="flat-arrowLeft"
              size="16"
            ></cas-icon>
          </button>
          <button class="next">
            <cas-icon
              disabled
              variant="flat"
              name="flat-arrowRight"
              size="16"
            ></cas-icon>
          </button>
        </div>
      </section>
    `}}r(c,"styles",m),r(c,"shadowRootOptions",{...l.shadowRootOptions,mode:"open"}),r(c,"properties",{name:{type:String},value:{type:String},data:{type:Array}});customElements.get("ca-talks-workshops")||customElements.define("ca-talks-workshops",c);