ca-web-components
Version:
web components for Clínica Alemana
76 lines (74 loc) • 2.57 kB
JavaScript
var s=Object.defineProperty;var o=(e,t,i)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;var n=(e,t,i)=>o(e,typeof t!="symbol"?t+"":t,i);import{i as c,r,x as d}from"../assets/unsafe-html-DS3AO1W7.js";const l=c`
:host {
display: flex;
justify-content: center;
color: #203442;
}
section {
display: flex;
background-color: rgba(242, 245, 249, 0.5);
border-radius: 10px;
align-items: center;
max-width: 1200px;
//gap: 32px;
}
.text-content {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 32px;
}
:host([variant="column"]) .text-content {
flex-direction: column;
align-items: initial;
}
.image {
position: relative;
max-width: 245px;
overflow: hidden;
padding: 16px;
}
:host([fullImage]) .image {
padding: 0;
border-radius: 10px 0 0 10px;
}
.image img {
width: 100%;
}
cas-button {
white-space: nowrap;
}
a {
text-decoration: none;
}
(max-width: 768px) {
section {
flex-direction: column;
}
.image {
border-radius: initial;
}
.text-content {
flex-direction: column;
align-items: initial;
}
}
`;class a extends r{constructor(){super(),this.textButton="text button",this.head="head",this.text="text",this.description="description"}static get properties(){return{textButton:{type:String},urlButton:{type:String},image:{type:String},head:{type:String},text:{type:String},description:{type:String}}}connectedCallback(){super.connectedCallback(),window.addEventListener("scroll",this.handleScroll.bind(this))}disconnectedCallback(){window.removeEventListener("scroll",this.handleScroll.bind(this)),super.disconnectedCallback()}handleScroll(){}render(){const t=window.innerWidth<768;return d`
<section>
<div class="image">
<img src=${this.image} alt="imagen" />
</div>
<div class="text-content">
<div class="group">
<cas-text variant="headline5">${this.head}</cas-text>
<cas-text variant="headline2">${this.text}</cas-text>
<cas-text variant="body1">${this.description}</cas-text>
</div>
<a href="${this.urlButton}">
<cas-button text=${this.textButton} variant="outline1" fullWidth=${t}></cas-button>
</a>
</div>
</section>
`}}n(a,"styles",l);customElements.define("caf-card",a);