ca-web-components/lib/index.js

web components for Clínica Alemana

var $=Object.defineProperty;var E=(s,t,i)=>t in s?$(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var p=(s,t,i)=>E(s,typeof t!="symbol"?t+"":t,i);import"./components/ca-actions-bar.js";import"./components/ca-actions-nav.js";import"./components/ca-awards.js";import"./components/ca-cta.js";import"./components/ca-dai.js";import"./components/ca-preventiva.js";import"./components/ca-salud.js";import"./components/ca-services.js";import"./components/ca-sostenibilidad.js";import"./components/ca-youtube.js";import"./components/ca-share.js";import"./components/caf-card.js.js";import"./components/ca-talks-workshops.js";import"./components/ca-speech-text.js";import{r as u,i as b,x as o,o as C}from"./assets/unsafe-html-DS3AO1W7.js";import{V as S}from"./version.js";import"./components/ca-radio.js";import"./components/ca-banners-cta.js";import"./assets/class-map-CGvDrqc9.js";class x extends u{constructor(){super(),this.columns=[],this.data=[],this.selected=[],this.allSelected=!1,this.sortColumn="",this.sortOrder="asc",this.checkable=!1,this.paginationConfig={pageSize:5},this.currentPage=1,this.totalPages=Math.ceil(this.data.length/this.paginationConfig.pageSize),this.size="medium"}changePage(t){this.currentPage=t,this.requestUpdate()}toggleSelection(t){this.selected.indexOf(t)>-1?this.selected=this.selected.filter(n=>n!==t):this.selected=[...this.selected,t],this.allSelected=this.selected.length===this.data.length,this.requestUpdate(),this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected}}))}toggleAllSelection(){this.allSelected?this.selected=[]:this.selected=this.data.map(t=>t.id),this.allSelected=!this.allSelected,this.requestUpdate(),this.dispatchEvent(new CustomEvent("change",{detail:{selected:this.selected}}))}updated(t){(t.has("data")||t.has("paginationConfig"))&&(this.totalPages=Math.ceil(this.data.length/this.paginationConfig.pageSize))}render(){const t=(this.currentPage-1)*this.paginationConfig.pageSize,i=t+this.paginationConfig.pageSize,n=this.data.slice(t,i),r=e=>typeof e=="string"?C(e):e,h=e=>typeof e=="number"?e+"px":e;return o`
    <section class="content ${this.size}"> 
    <div class="table-container">
      <table>
        <thead>
          <tr>
            ${this.checkable?o`<th style="width: 40px; min-width: 40px">
              <label class="checkbox-custom">
                <input
                  type="checkbox"
                  .checked=${this.allSelected}
                  @change=${this.toggleAllSelection}
                >
                <span class="checkbox-mark"></span>
              </label>
            </th>`:""}
            ${this.columns.map(e=>o`
              <th class="sortable" @click=${()=>this.sortData(e.field)} style="width: ${e.width}px;">
                ${e.headerName}
              </th>
            `)}
          </tr>
        </thead>
        <tbody>
          ${n.map(e=>o`
            <tr class=${this.selected.includes(e.id)?"selected":""}>
              ${this.checkable?o`
                <td>
                  <label class="checkbox-custom">
                    <input
                      type="checkbox"
                      .checked=${this.selected.includes(e.id)}
                      @change=${()=>this.toggleSelection(e.id)}
                    >
                    <span class="checkbox-mark"></span>
                  </label>
                </td>`:""}
              ${this.columns.map(c=>o`
                <td style="width: ${h(c.width)}; max-width: ${h(c.width)}; min-width: ${h(c.width)};">
                  ${r(e[c.field])}
                </td>
              `)}
            </tr>
          `)}
        </tbody>
      </table>
      ${n.length>0?"":o`<p>No hay datos que mostrar</p>`}
    </div>
    ${this.totalPages>1?o`
      <div class="pagination">
        <button class="page-button arrow" ?disabled=${this.currentPage===1} @click=${()=>this.changePage(this.currentPage-1)}>
            <cas-icon name="flat-chevronLeft" size="20"></cas-icon>
        </button>
        ${Array.from({length:this.totalPages},(e,c)=>c+1).map(e=>o`
          <button class="page-button ${e===this.currentPage&&"current"}" ?disabled=${e===this.currentPage} @click=${()=>this.changePage(e)}>${e}</button>
        `)}
        <button class="page-button arrow" ?disabled=${this.currentPage===this.totalPages} @click=${()=>this.changePage(this.currentPage+1)}>
            <cas-icon name="flat-chevronRight" size="20"></cas-icon>
        </button>
      </div>
    `:""}
    </section>
  `}}p(x,"styles",b`
    .content {
    }
    .table-container {
      max-height: 80vh;
      overflow-X: auto;
      background-color: #FFF;
      font-family: 'Rubik', system-ui;
      //border: 1px solid #ddd;
      //border-radius: 8px;
      //filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.20));
    }
    table {
      border-collapse: collapse;
      width: 100%;
      color: #203442;
      font-size: 14px;
    }
    th, td {
      padding: 12px 10px 10px;
      cursor: pointer;
      text-align: left;
      //white-space: nowrap;
    }
    .small th, .small td {
      padding: 6px 4px 4px;
    }
    tr {
      position: relative;
      border-bottom: 1px solid #D9D5EC;
    }
    tr.selected {
      background-color: #EEECFB;
    }
    tr.selected::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: 6px;
      height: 100%;
      background-color: #857BE2;
    }
    //tr:nth-child(even) {
    //  background-color: #f2f2f2;
    //}
    th {
      background-color: #F2F5F9;
      font-weight: 500;
      font-size: 16px;
    }
    .sortable:hover {
      background-color: #857BE2;
      color: #FFFFFF;
    }
    .pagination {
      display: flex;
      justify-content: end;
      background-color: #F2F5F9;
      padding: 14px 120px;
      gap: 5px;
    }
    .page-button {
      cursor: pointer;
      color: #857BE2;
      background-color: #FFFFFF;
      font-size: 12px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: none;
    }
    .page-button.arrow {
      width: 30px;
      background-color: transparent;
      color: #4D5D68;
    }
    .page-button[disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
    .page-button.current {
      background-color: #857BE2;
      color: #FFFFFF;
      opacity: 1;
    }
    .checkbox-custom {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background-color: #FFFFFF;
      border-radius: 4px;
      border: 2px solid #BCC2C6;
      cursor: pointer;
      margin-left: 12px;
    }

    .checkbox-custom input[type="checkbox"] {
      visibility: hidden;
    }

    .checkbox-custom input[type="checkbox"]:checked + .checkbox-mark {
      background-color: #857BE2;
      border-color: #857BE2;
    }

    .checkbox-custom .checkbox-mark {
      position: absolute;
      top: -1px;
      left: -1px;
      width: 18px;
      height: 18px;
      background-color: transparent;
      border-radius: 3px;
      border: 1px solid transparent;
      content: '';
      transition: all 0.2s;
    }

    .checkbox-custom input[type="checkbox"]:checked + .checkbox-mark::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 1px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

  `),p(x,"properties",{data:{type:Array},selected:{type:Array},allSelected:{type:Boolean},sortColumn:{type:String},sortOrder:{type:String},columns:{type:Array},checkable:{type:Boolean},paginationConfig:{type:Object},currentPage:{type:Number},totalPages:{type:Number},size:{type:String}});customElements.define("cas-table",x);class g extends u{constructor(){super(),this.value="",this.label="",this.placeholder=""}_onChange(t){this.value=t.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}render(){return o`
      <div class="input-wrapper">
        ${this.label?o`<label for="input">${this.label}</label>`:""}
        <input
          id="input"
          type="text"
          .value=${this.value}
          @input=${this._onChange}
          placeholder=${this.placeholder}
        />
      </div>
    `}}p(g,"styles",b`
    /* Estilos básicos para el input y la etiqueta */
    .input-wrapper {
      display: flex;
      flex-direction: column;
    }

    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    label {
      margin-bottom: 4px;
    }
  `),p(g,"properties",{value:{type:String},label:{type:String},placeholder:{type:String}});customElements.define("io-input",g);const P=b`
  :host {
    display: block;
    background-color: rgba(242, 245, 249, 0.23);
    transition: all .3s ease-in-out;
    --eloisa-ds-icon-color: currentColor;
  }

  [data-theme="dark"] {
    background-color: #364855;
    color: #FFFFFF;
  }

  section {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #203442;
  }

  .inner-container {
    max-width: 1264px;
    padding: 90px 32px 90px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
    
    > .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    
  }
  
  
  .content {
    display: grid;
    align-items: start;
    grid-template-columns: 768px 1fr;
    gap: 24px;
  }
  
  .content section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .content .slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .content section > cas-text {
    color: #392F95;
  }
  
  [data-theme="dark"] .content section > cas-text {
    color: #FFFFFF;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--Background-Background, #FFF);
    box-shadow: 0px 30px 44px 0px rgba(200, 200, 200, 0.25);
    padding: 16px;
    text-decoration: none;
    color: currentColor;
    transition: all 200ms ease-in-out;
    &:hover {
      box-shadow: 0px 30px 44px 0px #C8C8C8;
      .image {
        .tag {
          background: #5143D5;
          color: #ffffff;
        }
      }
    }
    .image {
      position: relative;
      width: 100%;
      height: 229px;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      .tag{
        position: absolute;
        border-radius: 16px;
        background: var(--Primary-Primary_3, #EEECFB);
        padding: 8px 12px;
        color: #392F95;
        right: 8px;
        top: 8px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease-in-out;
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid #D2D6D9;
    }
  }
  
  [data-theme="dark"] .card {
    background: #4D5D68;
    color: #FFFFFF;
    box-shadow: none;
    &:hover {
      color: #364855;
      background: #FFFFFF;
    }
    .image {
      .tag {
        background: #FFFFFF;
        color: #364855;
      }
    }
  }
  
  .card-row {
    display: flex;
    gap: 24px;
    text-decoration: none;
    color: currentColor;
    padding: 16px 8px;
    border-bottom: 1px solid #E9EBEC;
    background: transparent;
    border-radius: 0;
    transition: all 200ms ease-in-out;
    &:hover {
      border-radius: 8px;
      background: rgba(238, 236, 251, 0.90);
    }
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 60px;
      min-width: 60px;
      width: 60px;
      img {
        width: 100%;
      }
    }
    .arrow {
      display: none;
    }
    &:last-child {
      border-bottom: none;
    }
  }
  
  [data-theme="dark"] .card-row {
    color: #FFFFFF;
    &:hover {
      background: #FFFFFF;
      color: #364855;
      .icon {
        img {
          filter: invert(0%) brightness(100%) saturate(0%);
        }
      }
    }
    
    .icon {
      img {
        filter: invert(100%) brightness(200%);
      }
    }
  }
  
  .list-cards {
    border-radius: 16px;
    background: var(--Background-Background_2, #F2F5F9);
    box-shadow: 0px 30px 44px 0px rgba(200, 200, 200, 0.25);
    padding: 8px;
  }
  
  [data-theme="dark"] .list-cards {
    background: #4D5D68;
    box-shadow: none;
  }


  @media (max-width: 1024px) {
    [data-theme="dark"] {
      background: #4D5D68;
    }
    .inner-container {
      display: flex;
      flex-direction: column;
      padding: 50px 16px 40px;
      gap: 16px;
    }
    
    .content {
      grid-template-columns: 1fr;
    }
    
    .text {
      max-width: 260px;
      .description {
        display: none;
      }
    }
    
    .content .slider {
      overflow: auto;
    }
    
    .card {
      padding: 0;
      box-shadow: none;
      background: none;
      width: 260px;
      &:hover {
        box-shadow: none;
      }
      .image {
        height: 141px;
        .tag {
          display: none;
        }
        
      }
      .text {
        border-bottom: none;
      
      }
    }
    .list-cards {
      padding: 0 0 0 8px;
    }
    .card-row {
      padding: 16px 0;
      gap: 16px;
      &:hover {
        box-shadow: none;
      }
      .icon {
        width: 42px;
        min-width: 42px;
        img {
          width: 100%;
        }
      }
      .arrow {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

  }
`;class w extends u{constructor(){super()}static get properties(){return{theme:{type:String},text:{type:String},description:{type:String}}}shuffle(t=[]){let i=t.length,n;for(;i>0;)n=Math.floor(Math.random()*i),i--,[t[i],t[n]]=[t[n],t[i]];return t}render(){var m,f,F,v,k,y;const t=this.shuffle(window==null?void 0:window.medicina),i=this.shuffle(window==null?void 0:window.vanguardia),n=this.shuffle(window==null?void 0:window.sostenibilidad),r=window==null?void 0:window.config,h=(m=t==null?void 0:t.slice(0,1))==null?void 0:m.map(a=>{var l,d;return o`<a class="card" href="${(l=a.linkUrl[0])==null?void 0:l.href}" target="${(d=a.linkUrl[0])==null?void 0:d.target}">
          <div class="image">
              <span class="tag">
                  <cas-text variant="caption1">${a.tag}</cas-text>
              </span>
              <img src="${a.image}" alt="Experienacia Medicina">
          </div>
          <div class="text">
              <cas-text variant="headline3" mobileVariant="m-caption1">${a.text}</cas-text>
              <cas-text variant="footnote2" mobileVariant="m-caption2">${a.date}  ${a.timeRead}</cas-text>
          </div>
        </a>`}),e=(f=i==null?void 0:i.slice(0,1))==null?void 0:f.map(a=>{var l,d;return o`<a class="card" href="${(l=a.linkUrl[0])==null?void 0:l.href}" target="${(d=a.linkUrl[0])==null?void 0:d.target}">
          <div class="image">
              <span class="tag">
                  <cas-text variant="caption1">${a.tag}</cas-text>
              </span>
              <img src="${a.image}" alt="Experienacia Vanguardia">
          </div>
          <div class="text">
              <cas-text variant="headline3" mobileVariant="m-caption1">${a.title}</cas-text>
              <cas-text variant="footnote2" mobileVariant="m-caption2">${a.date}  ${a.timeRead}</cas-text>
          </div>
        </a>`}),c=(F=n==null?void 0:n.slice(0,4))==null?void 0:F.map(a=>{var l,d;return o`<a class="card-row" href="${(l=a.linkUrl[0])==null?void 0:l.href}" target="${(d=a.linkUrl[0])==null?void 0:d.target}">
             <div class="icon">
                      <img src="${a.image}" alt="Experienacia Sostenibilidad">
                  </div>
                  <div class="text">
                      <cas-text variant="footnote1" mobileVariant="m-footnote2">${a.title}</cas-text>
                  </div>
            <div class="arrow">
                <cas-icon variant="flat" name="flat-chevronRight" size="24" ></cas-icon>
            </div>
            
          </a>`});return o`
        <section data-theme="${this.theme}" data-test="io">
            <div class="inner-container">
                <div class="text">
                    <cas-text variant="display1" mobileVariant="m-headline1">${this.text}</cas-text>
                    <cas-text class="description" variant="headline4">${this.description}</cas-text>
                </div>
                <div class="content">
                    <div class="slider">
                        <section>
                            <cas-text variant="body2" mobileVariant="m-headline3">${r?(v=r[0])==null?void 0:v.col1:""}</cas-text>
                            ${h}
                        </section>
                        <section>
                            <cas-text variant="body2" mobileVariant="m-headline3">${r?(k=r[0])==null?void 0:k.col2:""}</cas-text>
                            ${e}
                        </section>
                    </div>
                    <section>
                        <cas-text variant="body2" mobileVariant="m-headline3"a>${r?(y=r[0])==null?void 0:y.colList:""}</cas-text>
                        <div class="list-cards">
                            ${c}    
                        </div>
                    </section>
                </div>
            </div>
        </section>
    `}}p(w,"styles",P);customElements.get("ca-experience")||customElements.define("ca-experience",w);console.log("home-components",S);