ca-web-components
Version:
web components for Clínica Alemana
142 lines (138 loc) • 6.27 kB
JavaScript
var h=Object.defineProperty;var u=(n,e,t)=>e in n?h(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var d=(n,e,t)=>u(n,typeof e!="symbol"?e+"":e,t);import{i as l,r as c,x as r}from"../assets/unsafe-html-DS3AO1W7.js";import{e as g}from"../assets/class-map-CGvDrqc9.js";const x=[{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 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:"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:"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"}],f=l`
:host {
display: block;
overflow: hidden;
}
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;
}
.list {
width: 100%;
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-top: 40px;
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;
}
.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;
}
}
`;class p extends c{constructor(){super(),this.data=[],this.disabledLeft=!0,this.disabledRight=!1}static get properties(){return{theme:{type:String}}}firstUpdated(){const e=this.shadowRoot.querySelector("ca-nav");e.addEventListener("clickLeft",()=>{this.handleNav({direction:"prev"})}),e.addEventListener("clickRight",()=>{this.handleNav({direction:"next"})})}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,o=e==="prev"?t-a>0:!0;s&&(this.disabledRight=!1),o&&(this.disabledLeft=!1),s||(this.disabledRight=!0),o||(this.disabledLeft=!0),this.requestUpdate()}render(){const e=t=>r`
<div class="list">
${t.map(i=>{const{name:a,text:s,image:o}=i;return r`<ca-awards-card theme="${this.theme}" name="${a}" text="${s}" image="${o}"></ca-awards-card>`})}
</div>
`;return r`
<section data-theme="${this.theme}">
<div class="inner-wrapped">
<cas-text variant="display1" mobilevariant="m-headline1"><slot name="title"></slot></cas-text>
${e(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>
`}}d(p,"styles",f);const v=l`
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 c{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=g({open:a});return r`
<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>
`}}d(m,"styles",v);customElements.get("ca-awards-card")||customElements.define("ca-awards-card",m);customElements.get("ca-awards")||customElements.define("ca-awards",p);