ca-web-components/lib/components/ca-salud.js

web components for Clínica Alemana

var v=Object.defineProperty;var w=(o,e,r)=>e in o?v(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r;var h=(o,e,r)=>w(o,typeof e!="symbol"?e+"":e,r);import{i as g,r as f,x as d,o as y}from"../assets/unsafe-html-DS3AO1W7.js";import{e as k}from"../assets/class-map-CGvDrqc9.js";const F=g`
  :host {
    display: block;
  }
  .cas-news {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    color: #203442;
    transition: all .3s ease-in-out;
  }
  [data-theme="dark"] {
    background-color: #364855;
    color: #ffffff;
  }
  .inner-wrapped {
    max-width: 1200px;
    padding: 90px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .top {
    padding-bottom: 42px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wrapped-filters {
    position: relative;
  }
  .filters {
    position: relative;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    max-width: calc(100vw - 64px);
    padding-bottom: 12px;
  }
  //.filters::-webkit-scrollbar {
  //  height: 6px;
  //}
  .hasPrev {
    display: none;
    width: 100px;
    height: 40px;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }
  [data-theme="dark"] .hasPrev {
    background: linear-gradient(90deg, #364855 0%, rgba(54, 72, 85, 0) 100%);
  }
  .hasNext {
    display: none;
    width: 100px;
    height: 40px;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
  }
  [data-theme="dark"] .hasNext {
    background: linear-gradient(270deg, #364855 0%, rgba(54, 72, 85, 0) 100%);
  }
  .prev .hasPrev {
    display: block;
  }
  .next .hasNext {
    display: block;
  }
  .tag {
    background: #ffffff;
    border: 1px solid #dcd9f7;
    border-radius: 100px;
    padding: 8px 12px;
    color: #5143d5;
    cursor: pointer;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  [data-theme="dark"] .tag {
    background: transparent;
    color: #FFFFFF;
  }
  .tag.active {
    background: #857be2;
    color: #ffffff;
  }
  [data-theme="dark"] .tag.active {
    background: #ffffff;
    color: #364855
  }
  .head {
    display: none;
  }
  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .actions {
    display: none
  }
  
  @media (max-width: 1024px) {
    .cas-news {
      border-bottom: 1px solid #f2f2f2;
    }
    .inner-wrapped {
      padding: 32px 0;
      max-width: 100%;
    }
    .top {
      text-align: initial;
      gap: 4px;
      padding: 0 16px;
    }
    .filters {
      max-width: 100vw;
      padding: 0 16px;
      gap: 8px 12px;
      margin-top: 20px;
      margin-bottom: 4px;
    }
    .head {
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      gap: 32px;
    }
    .head a{
      color: currentColor;
    }
    .list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      gap: 24px;
      width: calc(100vw - 32px);
      padding: 0 16px 16px;
    }
  }
  @media (max-width: 768px) {
    .filters {
      margin-top: 16px;
      margin-bottom: 28px;
    }
    .actions {
      display: block;
      padding: 0 16px;
    }
    .hasPrev, .hasNext {
      height: 100%;
    }
  }
`;class x extends f{static get properties(){return{theme:{type:String},news:{type:Array}}}constructor(){super(),this.filters=[],this.data=[],this.selected={},this.list=[],this.disabledLeft=!0,this.disabledRight=!1,this.hasNextFilter=!1,this.hasPrevFilter=!1}firstUpdated(){fetch("https://portal-backend.clinicaalemana.cl/news",{method:"GET",headers:{"Content-Type":"application/json"}}).then(i=>i.json()).then(i=>{const s=i.sort((l,t)=>{const n=new Date(l.publicationDate.split("/").reverse().join("-"));return new Date(t.publicationDate.split("/").reverse().join("-"))-n});this.news=s,this.handleList(this.news)}).catch(i=>console.log("error",i));const e=this.shadowRoot.querySelector(".list"),r=this.shadowRoot.querySelector("ca-nav");r.addEventListener("clickLeft",()=>e.scrollLeft-=300),r.addEventListener("clickRight",()=>e.scrollLeft+=300),e.addEventListener("scroll",i=>{const{scrollLeft:s,scrollWidth:l,clientWidth:t}=i.target,n=l-t;s>0&&(this.disabledLeft=!1),s===0&&(this.disabledLeft=!0),s<n&&(this.disabledRight=!1),s===n&&(this.disabledRight=!0),this.requestUpdate()});const a=this.shadowRoot.querySelector(".filters");a.addEventListener("scroll",()=>{const{scrollLeft:i,scrollWidth:s,clientWidth:l}=a,t=s-l;i>0&&(this.hasPrevFilter=!0),i===0&&(this.hasPrevFilter=!1),i<t&&(this.hasNextFilter=!0),i===t&&(this.hasNextFilter=!1),i===0&&i===t&&(this.hasPrevFilter=!1,this.hasNextFilter=!1),this.requestUpdate()})}handleList(e){const r=e==null?void 0:e.map(s=>{const{title:l,summary:t,publicationDate:n,navigateUrl:c,readingTime:p,photo:m,categories:b}=s;return{image:`${m}`,tags:b,title:l,datePublished:n,readingTime:p,description:t,url:c}});this.data=r;const a=[];r.forEach(s=>{s.tags.forEach(l=>{a.find(n=>n.title===l.title)||a.push(l)})});const i={title:"Últimas agregadas",url:"https://www.clinicaalemana.cl/articulos/todas-las-noticias"};a.unshift(i),this.filters=a,this.handleFilterClick(a[0])}handleFilterClick(e){if(this.selected=e,e.title==="Últimas agregadas"){this.list=this.data.slice(0,6),this.requestUpdate();return}const r=this.data.filter(a=>a.tags.find(s=>s.title===e.title));this.list=r,this.requestUpdate()}render(){const{filters:e,list:r,selected:a}=this,i=k({"wrapped-filters":!0,prev:this.hasPrevFilter,next:this.hasNextFilter}),s=e.map(t=>d`<button
        class="tag ${t.title===this.selected.title?"active":""}"
        title="${t.title}"
        @click="${()=>this.handleFilterClick(t)}"
      >
        <cas-text variant="caption1">${t.title}</cas-text>
      </button> `),l=r.slice(0,3).map(t=>d`<ca-salud-card
            title="${t.title}"
            description="${t.description}"
            image="${t.image}"
            tags="${JSON.stringify(t.tags)}"
            datePublished="${t.datePublished}"
            readingTime="${t.readingTime}"
            url="${t.url}"
            theme="${this.theme}"
          ></ca-salud-card>`);return d`
      <section class="cas-news" data-theme="${this.theme}">
        <div class="inner-wrapped">
          <div class="top">
            <cas-text variant="display1" mobilevariant="m-headline1"><slot name="title"></slot></cas-text>
            <cas-text variant="headline4" mobilevariant="m-body1"><slot name="subtitle"></slot></cas-text>
          </div>
          <div class="${i}">
            <div class="hasPrev"></div>
            <div class="filters">${s}</div>
            <div class="hasNext"></div>
          </div>
          <div class="head">
            <cas-text variant="footnote1">${a==null?void 0:a.title}</cas-text>
            <a href="${a==null?void 0:a.url}">
              <cas-text variant="footnote2-link">Ver todas</cas-text>
            </a>
          </div>
          <div class="list">${l}</div>
          <div class="actions">
            <ca-nav urlAction="${a==null?void 0:a.url}" disabledLeft="${this.disabledLeft}" disabledRight="${this.disabledRight}"></ca-nav>
          </div>
        </div>
      </section>
    `}}h(x,"styles",F);const $=g`
  :host {
    display: flex;
  }
  .news-card {
    flex: 1;
    background: #ffffff;
    box-shadow: 0 30px 44px rgba(200, 200, 200, 0.25);
    border-radius: 20px;
    padding: 24px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
  }
  :host([theme="dark"]) .news-card {
    background: #4D5D68;
    box-shadow: none;
  }
  .image {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }
  .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .tag {
    background: #E6F6F5;
    padding: 8px 12px;
    color: #4DBFB8;
    cursor: pointer;
    border: none;
  }
  
  :host([theme="dark"]) .tag {
    background: transparent;
    color: #FFFFFF;
  }
  .tag.active {
    background: #857be2;
    color: #ffffff;
  }
  a {
    color: currentColor;
  }

  @media (max-width: 1024px) {
    .news-card {
      padding: 0;
      box-shadow: initial;
      min-width: 270px;
      border-radius: 0;
      gap: 8px;
      scroll-snap-align: center;
    }
    :host([theme="dark"]) .news-card {
      background: transparent;
    }
    .image {
      aspect-ratio: 16 / 9;
    }
    .tags {
      display: none;
    }
    .content {
      gap: 8px;
    }
    .description {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .news-card {
      min-width: 260px;
    }
  }
`;class u extends f{static get properties(){return{image:{type:String},tags:{type:Array},title:{type:String},datePublished:{type:String},readingTime:{type:String},description:{type:String},url:{type:String}}}constructor(){super(),this.title="",this.description="",this.image="",this.tags=[],this.datePublished="2020-01-01",this.readingTime="5"}render(){const{title:e,description:r,image:a,tags:i,datePublished:s,readingTime:l,url:t}=this,n=i.slice(0,9).map(p=>d`<button class="tag">
        <cas-text variant="caption1">${p.title}</cas-text>
      </button> `),c=y(r);return d`
      <a class="news-card" href="${t}" target="_blank">
        <div class="image">
          <img src="${a}" alt="${e}" loading="lazy"/>
        </div>
        <div class="content">
          <div class="tags">${n}</div>
          <cas-text variant="headline2" mobileVariant="m-caption1" class="title">${e}</cas-text>
          <cas-text variant="footnote2" mobileVariant="m-caption2">${s} | ${l} min lectura</cas-text>
        </div>
        <cas-text class="description" variant="footnote2">${c}</cas-text>
      </a>
    `}}h(u,"styles",$);customElements.get("ca-salud")||customElements.define("ca-salud",x);customElements.get("ca-salud-card")||customElements.define("ca-salud-card",u);