ca-web-components
Version:
web components for Clínica Alemana
198 lines (193 loc) • 10.6 kB
JavaScript
var g=Object.defineProperty;var f=(o,e,t)=>e in o?g(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var l=(o,e,t)=>f(o,typeof e!="symbol"?e+"":e,t);import{i as c,r as d,x as n}from"../assets/unsafe-html-DS3AO1W7.js";import{e as v}from"../assets/class-map-CGvDrqc9.js";const x=[{name:"Acreditación Joint Commission International",text:"Promovemos una mejora continua de la seguridad y calidad en la prevención y cuidado de la salud.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/enterprise.png?sfvrsn=3561b685_2"},{name:"Acreditación de Prestadores Institucionales de salud",text:"Cumplimos con un conjunto de estándares de calidad fijados y normados por el Ministerio de Salud.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/salud.png?sfvrsn=a54e449f_2"},{name:"World´s Best Hospitals",text:"Por segundo año consecutivo, nos encontramos entre los 250 mejores hospitales del mundo.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/world.png"},{name:"Merco Salud 2025",text:"Obtuvimos distinción máxima y el primer lugar en el sector clínicas.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/merco-salud.png"},{name:"Merco Responsabilidad ESG",text:"Primer lugar en el sector clínicas, donde nos destacamos entre 6 instituciones de Santiago.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/merco-esg.png"},{name:"Merco Talento 2025",text:"Obtuvimos distinción máxima y el primer lugar en el sector clínicas.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/merco-talento.png"},{name:"Premio Nacional de Satisfacción de Clientes",text:"Obtuvimos distinción máxima y el primer lugar en el sector clínicas.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/procalidad.png?sfvrsn=6a6328d8_2"},{name:"Ranking PXI – Praxis Xperience Index",text:"Lideramos el sector clínicas, donde nos destacamos entre 6 instituciones de Santiago.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/pxi.png?sfvrsn=2f8477a_2"},{name:"Premio Lealtad del Consumidor Sector Clínicas",text:"Máximo reconocimiento entre empresas con altos niveles de lealtad y buenas experiencias de clientes.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/lealtad.png?sfvrsn=8d40e7c2_2"},{name:"Ranking Most Innovative Companies – Clínicas y Hospitales",text:"Por tercer año consecutivo, logramos el primer lugar del Ranking Most Innovatives Companies en la categoría Clínicas y Hospitales.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/most.png"},{name:"Circular Awards 2025",text:"Lideramos la categoría Desafío Agua por la implementación de un sistema que recupera el agua utilizada en procesos de enfriamiento.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/circular.png"},{name:"Premio Iniciativas Sustentables Hub La Tercera-Pulso",text:"Nuestro programa “Más salud, menos espera”, lideró la categoría Alianza para alcanzar los Objetivos de Desarrollo Sostenible. ",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/hub.png"},{name:"Ranking de Sostenibilidad Empresarial 2025",text:"Lideramos en Iniciativa Ambiental, en Gestión de Recursos Hídricos.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/premios/ranking.png"}],b=c`
:host {
display: block;
overflow: hidden;
--eloisa-ds-icon-color: currentColor;
}
section {
position: relative;
transition: all .3s ease-in-out;
}
[data-theme="dark"] {
background-color: #364855;
color: #fff;
}
.inner-wrapped {
position: relative;
max-width: 1140px;
margin: 90px auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32px;
}
.carousel-wrapper {
position: relative;
width: 100%;
margin-top: 40px;
}
.list {
width: 100%;
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 10px;
}
.list::-webkit-scrollbar {
width: 0;
height: 4px;
}
.list::-webkit-scrollbar-track {
background-color: #F2F5F9;
border-radius: 5px;
}
.list::-webkit-scrollbar-thumb {
background-color: #D2D6D9;
border-radius: 5px;
}
.list::-webkit-scrollbar-thumb:hover {
background-color: #5143D5;
}
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background-color: #4DBFB8;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: background-color 0.2s ease, opacity 0.2s ease;
}
.nav-arrow:hover {
background-color: #3da89f;
}
.nav-arrow.disabled {
background-color: #E9EBEC;
color: #909AA1;
pointer-events: none;
opacity: 0.6;
}
.nav-arrow--left {
left: -12px;
}
.nav-arrow--right {
right: -12px;
}
.action {
margin-top: 24px;
}
[data-theme="dark"] .action {
color: #364855;
}
(max-width: 768px) {
.inner-wrapped {
align-items: initial;
margin: 90px 0;
padding: 0 16px;
}
.list {
padding: 10px 16px;
}
.nav-arrow--left {
left: -4px;
}
.nav-arrow--right {
right: -4px;
}
.isDesktop {
display: none;
}
}
`;class p extends d{constructor(){super(),this.data=[],this.disabledLeft=!0,this.disabledRight=!1,this._autoScrollTimer=null,this._autoScrollDelay=2e3}static get properties(){return{theme:{type:String},disabledLeft:{type:Boolean},disabledRight:{type:Boolean}}}firstUpdated(){const e=this.shadowRoot.querySelector("ca-nav");e.addEventListener("clickLeft",()=>{this.handleNav({direction:"prev"})}),e.addEventListener("clickRight",()=>{this.handleNav({direction:"next"})}),this._startAutoScroll();const t=this.shadowRoot.querySelector(".carousel-wrapper");t.addEventListener("mouseenter",()=>this._stopAutoScroll()),t.addEventListener("mouseleave",()=>this._startAutoScroll())}disconnectedCallback(){super.disconnectedCallback(),this._stopAutoScroll()}_startAutoScroll(){this._stopAutoScroll(),this._autoScrollTimer=setInterval(()=>{const e=this.shadowRoot.querySelector(".list");if(!e)return;const t=e.scrollWidth-e.clientWidth;e.scrollLeft>=t-5?(e.scrollLeft=0,this.disabledLeft=!0,this.disabledRight=!1,this.requestUpdate()):this.handleNav({direction:"next"})},this._autoScrollDelay)}_stopAutoScroll(){this._autoScrollTimer&&(clearInterval(this._autoScrollTimer),this._autoScrollTimer=null)}handleNav({direction:e}){const t=this.shadowRoot.querySelector(".list"),i=180,a=t.scrollLeft,s=t.scrollWidth-t.clientWidth;e==="next"&&(t.scrollLeft=a+i<s?a+i:s,this.disableButton({direction:e,scroll:a,maxScroll:s,move:i})),e==="prev"&&(t.scrollLeft=a-i>0?a-i:0,this.disableButton({direction:e,scroll:a,maxScroll:s,move:i}))}disableButton({direction:e,scroll:t,maxScroll:i,move:a}){const s=e==="prev"?!0:t+a<i,r=e==="prev"?t-a>0:!0;s&&(this.disabledRight=!1),r&&(this.disabledLeft=!1),s||(this.disabledRight=!0),r||(this.disabledLeft=!0),this.requestUpdate()}render(){const e=this.disabledLeft?"nav-arrow nav-arrow--left disabled":"nav-arrow nav-arrow--left",t=this.disabledRight?"nav-arrow nav-arrow--right disabled":"nav-arrow nav-arrow--right",i=a=>n`
<div class="carousel-wrapper">
<button class="isDesktop ${e}" ="${()=>this.handleNav({direction:"prev"})}" aria-label="Anterior">
<cas-icon name="flat-chevronLeft" size="16"></cas-icon>
</button>
<div class="list">
${a.map(s=>{const{name:r,text:h,image:u}=s;return n`<ca-awards-card theme="${this.theme}" name="${r}" text="${h}" image="${u}"></ca-awards-card>`})}
</div>
<button class="isDesktop ${t}" ="${()=>this.handleNav({direction:"next"})}" aria-label="Siguiente">
<cas-icon name="flat-chevronRight" size="16"></cas-icon>
</button>
</div>
`;return n`
<section data-theme="${this.theme}">
<div class="inner-wrapped">
<cas-text variant="display1" mobilevariant="m-headline1"><slot name="title"></slot></cas-text>
${i(x)}
<div class="action">
<ca-nav disabledLeft="${this.disabledLeft}" disabledRight="${this.disabledRight}" urlAction="https://www.clinicaalemana.cl/nuestra-clinica/premios-y-reconocimientos"></ca-nav>
</div>
</div>
</section>
`}}l(p,"styles",b);const w=c`
article {
box-shadow: 0 0 0 1px rgba(51, 68, 99, 0.06);
border-radius: 5px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 24px;
max-width: 174px;
flex: 1;
scroll-snap-align: center;
background-color: #fff;
color: #364855;
}
.image {
position: relative;
aspect-ratio: 2 / 1;
height: 90px;
filter: saturate(0);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.inner-text {
display: none;
flex-direction: column;
gap: 12px;
}
.open .inner-text {
display: flex;
}
.action {
display: flex;
justify-content: center;
cursor: pointer;
transition: .2s ease;
}
.open .image {
filter: saturate(1);
}
.open .action {
transform: rotate(180deg);
flex: 1;
}
`;class m extends d{static get properties(){return{name:{type:String},text:{type:String},image:{type:String},open:{type:Boolean}}}constructor(){super(),this.name="Awards",this.text="Texto",this.image="",this.open=!1}handleToggle(){this.open=!this.open,this.requestUpdate()}render(){const{name:e,text:t,image:i,open:a}=this,s=v({open:a});return n`
<article class="${s}" ="${this.handleToggle}">
<div class="image">
<img src="${i}" alt="${e}" loading="lazy">
</div>
<div class="inner-text">
<cas-text variant="caption1">${e}</cas-text>
<cas-text variant="caption2">${t}</cas-text>
</div>
<div class="action">
<cas-icon name="flat-chevronDown" size="12"></cas-icon>
</div>
</article>
`}}l(m,"styles",w);customElements.get("ca-awards-card")||customElements.define("ca-awards-card",m);customElements.get("ca-awards")||customElements.define("ca-awards",p);