ca-web-components
Version:
web components for Clínica Alemana
421 lines (415 loc) • 17.5 kB
JavaScript
var g=Object.defineProperty;var b=(o,n,e)=>n in o?g(o,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[n]=e;var d=(o,n,e)=>b(o,typeof n!="symbol"?n+"":n,e);import{i as v,r as F,x as r,o as l}from"../assets/unsafe-html-DS3AO1W7.js";const p=[{id:1,section:"Transparencia",icon:"flat-sms",description:"Impulsamos prácticas que fortalezcan la credibilidad y confianza, y fomentamos el comportamiento organizacional ético, basado en principios de buen gobierno. Somos la única clínica que reporta de forma ininterrumpida desde 2015.",image:"https://d51h1y0hva8v.cloudfront.net/docs/default-source/idigital/new-home/transparencia-bg.png?sfvrsn=71763b94_1",symbol:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/transparencia.png?sfvrsn=fd5b3066_2",type:"transparencia",url:"https://www.clinicaalemana.cl/sostenibilidad/transparencia",cta:"https://d51h1y0hva8v.cloudfront.net/docs/default-source/sostenibilidad-2024/reporte_sostenibilidad_cas_2024.pdf"},{id:2,section:"Comunidad",icon:"flat-heart",description:"Nuestro compromiso es brindar soluciones concretas de salud, prevención y bienestar a la comunidad. Trabajamos con los más altos estándares profesionales y contribuimos con operativos médicos y otras iniciativas para ayudar a quienes lo necesiten. ",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/comunidadee495ec6b4bb499e820f2c9bc275efb7.png?sfvrsn=76f217ef_2",symbol:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/comunidad.png?sfvrsn=759f659_2",type:"comunidad",url:"https://www.clinicaalemana.cl/sostenibilidad/comunidad"},{id:3,section:"Huella ambiental",icon:"flat-environmental",description:"Estamos comprometidos con enfrentar los efectos del cambio climático y, como parte de este trabajo, hemos recibido las certificaciones de <b>Mitigación y Reducción</b> de Gases de Efecto Invernadero (GEI) del Programa Huella Chile, del Ministerio de Medio Ambiente.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/huella.png?sfvrsn=6083fea6_2",symbol:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/huella-ambiental.png?sfvrsn=a58b21b4_2",type:"huellaambiental",url:"https://www.clinicaalemana.cl/sostenibilidad/huella-ambiental"},{id:4,section:"Diversidad e inclusión",icon:"flat-sex",description:"Promovemos el respeto, la diversidad e inclusión en la conformación de los equipos y en la cultura organizacional, procurando generar un ambiente laboral donde todos puedan desarrollarse y desempeñarse.",image:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/diversidadbcf10522aa0f41ff95dafbb1641b1719.png?sfvrsn=edfe44c4_2",symbol:"https://d51h1y0hva8v.cloudfront.net/images/default-source/home/desafio-alemana/diversidad.png?sfvrsn=6372c8ec_2",type:"diversidadeinclusion",url:"https://www.clinicaalemana.cl/sostenibilidad/diversidad-e-inclusion"}],y=[{titulo:"Política de sostenibilidad",icono:"flat-download",descripcion:"Conoce en <a href='https://io.io' target='_blank'>test link</a>detalle los principios, estrategias y lineamientos de carácter social, ambiental y organizacional que rigen nuestro compromiso sostenible.",link:"#",tipo:"transparencia",orden:"2"},{titulo:"Saber más sobre el proceso de cumplimiento",icono:"flat-ticket",descripcion:"En la clínica seguimos un cuidadoso análisis de nuestros diferentes ámbitos de acción.",link:"#",tipo:"transparencia",orden:"3"},{titulo:"Conoce gobierno corporativo",icono:"flat-check",descripcion:"Clínica Alemana de Santiago S.A. fue creada como filial de la Sociedad de Beneficencia Hospital Alemán, corporación de derecho privado sin fines de lucro.",link:"#",tipo:"transparencia",orden:"1"}],w=window.desafioAlemana||y,C=v`
:host {
display: block;
}
.container {
display: flex;
justify-content: center;
width: 100%;
background: #FFFFFF;
color: #203442;
}
.container[data-theme=dark] {
background: #364855;
color: #FFFFFF;
}
.container[data-theme=dark] .innerContainer .content .nav ul li {
color: #4D5D68;
}
.container[data-theme=dark] .innerContainer .content .nav ul li.active {
background: transparent;
color: #FFFFFF;
}
.container .innerContainer {
max-width: 1264px;
padding: 90px 32px;
flex: 1;
}
.container .innerContainer ul, .container .innerContainer li {
list-style: none;
margin: 0;
padding: 0;
}
.container .innerContainer .top {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
margin-bottom: 100px;
}
.container .innerContainer .content {
display: flex;
}
.container .innerContainer .content .nav {
padding: 12px 32px;
border-right: 1px solid #F2F5F9;
}
.container .innerContainer .content .nav ul {
width: 250px;
display: flex;
flex-direction: column;
gap: 12px;
}
.container .innerContainer .content .nav ul li {
background: #FFFFFF;
border: 1px solid #E9EBEC;
border-radius: 20px;
padding: 0 16px;
height: 44px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
--eloisa-ds-icon-color: currentColor;
transition: 200ms ease-in-out;
}
.container .innerContainer .content .nav ul li.active {
background: #857BE2;
color: #FFFFFF;
}
.container .innerContainer .content .main {
padding: 12px 32px;
}
.container .innerContainer .content .main .info {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 470px;
}
.container .innerContainer .content .main .info.has-video {
align-items: center;
}
.video {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.btn {
background: #FFFFFF;
border: 1px solid #203442;
border-radius: 20px;
height: 32px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
color: currentColor;
text-decoration: none;
}
[data-theme=dark] .btn {
background: transparent;
border: 1px solid #FFFFFF;
}
iframe {
aspect-ratio: 16/9;
width: 100%;
border-radius: 10px;
}
.container .innerContainer .content .main .info .left {
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: start;
}
.container .innerContainer .content .main .info .left .icon {
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
background: #857BE2;
display: flex;
align-items: center;
justify-content: center;
--eloisa-ds-icon-color: #FFFFFF;
}
.container .innerContainer .content .main .info .left .icon img {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: high-quality;
}
.container .innerContainer .content .main .info .graph {
display: flex;
align-items: center;
}
.container .innerContainer .content .main .info .graph .image {
display: flex;
position: relative;
width: 100%;
height: 360px;
margin: 28px 28px 0 0;
}
.container .innerContainer .content .main .info .graph .image:after {
z-index: 0;
content: "";
position: absolute;
top: -18px;
left: 26px;
width: 100%;
height: 120%;
border: 1px solid #DCD9F7;
border-radius: 0 300px 300px 300px;
}
.container .innerContainer .content .main .info .graph .image img {
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 300px 300px 300px;
}
.container .innerContainer .content .main .actions {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.container .innerContainer .content .main .actions .wrappedList {
box-shadow: 0 5.91133px 28.8515px rgba(0, 0, 0, 0.0278145), 0px 2.53302px 19.9272px rgba(0, 0, 0, 0.0221855), 0px 0.80216px 13.4997px rgba(0, 0, 0, 0.0155009);
border-radius: 8px;
max-width: 856px;
display: grid;
grid-template-columns: 1fr 74px;
}
.container .innerContainer .content .main .actions .wrappedList .buttons {
background: transparent;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #F2F5F9;
}
.container .innerContainer .content .main .actions .list {
position: relative;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.card {
display: flex;
gap: 12px;
padding: 24px;
border-right: 1px solid #F2F5F9;
min-width: 391px;
scroll-snap-align: start;
cursor: pointer;
background: #FFFFFF;
transition: 200ms ease-in-out;
}
.card:last-child {
border-right: none;
}
.card:hover {
background: #EEECFB;
}
.card:active {
background: #DCD9F7;
}
.card .icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
background: #857BE2;
display: flex;
align-items: center;
justify-content: center;
--eloisa-ds-icon-color: #FFFFFF;
color: #FFFFFF;
}
.card .textContent {
display: flex;
flex-direction: column;
gap: 4px;
}
.card {
color: currentColor;
text-decoration: none;
}
.button {
width: 48px;
height: 48px;
background-color: #FFFFFF;
box-shadow: 0 14px 20px rgba(227, 229, 232, 0.6);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
--eloisa-ds-icon-color: currentColor;
cursor: pointer;
}
[data-theme=dark] .card {
background: #364855;
color: #FFFFFF;
}
[data-theme=dark] .card:hover {
background: #4D5D68;
}
[data-theme=dark] .button {
background-color: #4D5D68;
box-shadow: initial;
color: #FFFFFF;
--eloisa-ds-icon-color: #FFFFFF;
}
@media (max-width: 1024px) {
.container .innerContainer {
padding: 32px 16px;
}
.container .innerContainer .top {
text-align: initial;
margin: 16px 0;
align-items: start;
max-width: calc(100vw - 32px);
}
.container .innerContainer .content {
flex-direction: column;
gap: 40px;
}
.container .innerContainer .content .nav {
padding: 0;
border-right: initial;
}
.container .innerContainer .content .nav ul {
width: 100%;
display: flex;
flex-direction: initial;
flex-wrap: wrap;
}
.container .innerContainer .content .main {
padding: 0;
}
.container .innerContainer .content .main .info {
gap: 40px;
min-height: initial;
}
.container .innerContainer .content .main .info .left {
padding: 24px;
}
.container .innerContainer .content .main .info .graph svg {
max-width: 86%;
height: 380px;
}
.container .innerContainer .content .main .info .graph .image {
width: 96%;
height: 300px;
margin: 24px 0 0 0;
}
.container .innerContainer .content .main .actions {
margin-top: 24px;
}
.container .innerContainer .content .main .actions .wrappedList {
width: calc(100vw - 32px);
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: initial;
max-width: initial;
}
.container .innerContainer .content .main .actions .wrappedList .list {
box-shadow: 0 5.91133px 28.8515px rgba(0, 0, 0, 0.0278145), 0px 2.53302px 19.9272px rgba(0, 0, 0, 0.0221855), 0px 0.80216px 13.4997px rgba(0, 0, 0, 0.0155009);
}
.container .innerContainer .content .main .actions .wrappedList .buttons {
justify-content: end;
gap: 12px;
border-left: initial;
}
.button {
width: 32px;
height: 32px;
}
}
@media (max-width: 768px) {
.container .innerContainer .content .main .info {
grid-template-columns: 1fr;
gap: 0;
}
.container .innerContainer .content .main .info .left {
padding: 16px 0;
}
.container .innerContainer .content .main .wrappedList .list {
margin-bottom: 16px;
}
.container .innerContainer .content .main .wrappedList .buttons {
display: none !important;
}
.card {
min-width: 100%;
}
}
`;class m extends F{constructor(){super(),this.selected=0,this.data=p[0],this.items=[],this.disabledPrev=!0,this.disabledNext=!1,this.order="[1, 2, 3, 4]",this.dataOrder=[]}static get properties(){return{theme:{type:String},order:{type:String}}}handleSelect(n){this.selected=n,this.data=this.dataOrder.find(e=>e.id===n),this.handleItems()}handleItems(){const n=w.filter(e=>e.tipo===this.data.type)||[];this.items=n.sort((e,a)=>Number(e.orden)-Number(a.orden)),this.requestUpdate()}handleOrder(){const n=JSON.parse(this.order),e=[];n.forEach(a=>{e.push(p.find(i=>i.id===a))}),this.dataOrder=e,this.selected=n[0],this.data=e[0],this.handleItems()}firstUpdated(){this.handleOrder();const n=this.shadowRoot.querySelector(".list"),e=this.shadowRoot.querySelector("ca-nav"),a=this.shadowRoot.querySelector("#buttonAR");n.addEventListener("scroll",()=>{const{scrollLeft:i,scrollWidth:s,clientWidth:c}=n;this.disabledPrev=i===0,this.disabledNext=i+c>=s,this.requestUpdate()}),a.addEventListener("click",()=>{n.scrollLeft+=400}),e.addEventListener("clickLeft",()=>{const{scrollLeft:i}=n;n.scrollTo({left:i-200,behavior:"smooth"})}),e.addEventListener("clickRight",()=>{const{scrollLeft:i}=n;n.scrollTo({left:i+200,behavior:"smooth"})})}render(){const{data:n,dataOrder:e,items:a,theme:i,disabledPrev:s,disabledNext:c}=this,h=e.map(({id:t,icon:x,section:f})=>r`
<li data-key="${t}" class=${this.selected===t?"active":""} @click=${()=>this.handleSelect(t)}>
<cas-icon name=${x} size="20"></cas-icon>
<cas-text variant="body2">${f}</cas-text>
</li>`),u=a.map(t=>r`
<a href="${t.link}" target="_blank" class="card">
<div class="icon">
<cas-icon name="${t.icono}" size="24"></cas-icon>
</div>
<div class="textContent">
<cas-text variant="body2">${t.titulo}</cas-text>
<cas-text variant="caption2">${l(t.descripcion)}</cas-text>
</div>
</a>
`);return r`
<section class="container" data-theme=${i}>
<div class="innerContainer">
<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="content">
<aside class="nav">
<ul>
${h}
</ul>
</aside>
<div class="main">
<div class="info ${n.videoId&&"has-video"}">
<div class="left">
<div class="icon">
<img src="${n.symbol}"
alt=${n.section} loading="lazy"/>
</div>
<cas-text variant="headline2">${n.section}</cas-text>
<cas-text variant="headline5">${l(n.description)}</cas-text>
<a href="${n==null?void 0:n.url}" target="_blank" class="btn">
<cas-text variant="footnote1">Conocer más</cas-text>
</a>
</div>
${n!=null&&n.videoId?r`
<div class="video">
<ca-youtube videoid="${n.videoId}"></ca-youtube>
<a href="${n==null?void 0:n.cta}" target="_blank" class="btn">
<cas-text variant="footnote1">Revisar reporte</cas-text>
</a>
</div>
`:r`
<div class="graph">
<div class="image">
<img src="${n.image}"
alt=${n.section} loading="lazy"/>
</div>
</div>
`}
</div>
<div class="actions">
<cas-text variant="headline3">Nuestras acciones:</cas-text>
<div class="wrappedList">
<div class="list">
${u}
</div>
<div class="buttons">
<button class="button next" id="buttonAR">
<cas-icon name="flat-arrowRight" size="20"/>
</button>
</div>
</div>
</div>
<ca-nav disabledLeft=${s} disabledRight=${c}></ca-nav>
</div>
</div>
</div>
</section>
`}}d(m,"styles",C);customElements.define("ca-sostenibilidad",m);