ca-web-components
Version:
web components for Clínica Alemana
229 lines (221 loc) • 8.86 kB
JavaScript
var g=Object.defineProperty;var b=(o,t,a)=>t in o?g(o,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):o[t]=a;var r=(o,t,a)=>b(o,typeof t!="symbol"?t+"":t,a);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 h,i as p,x as i,o as x}from"./assets/unsafe-html-DS3AO1W7.js";import{V as m}from"./version.js";import"./components/ca-radio.js";import"./components/ca-banners-cta.js";import"./assets/class-map-CGvDrqc9.js";class c extends h{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(l=>l!==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,a=t+this.paginationConfig.pageSize,l=this.data.slice(t,a),u=e=>typeof e=="string"?x(e):e,n=e=>typeof e=="number"?e+"px":e;return i`
<section class="content ${this.size}">
<div class="table-container">
<table>
<thead>
<tr>
${this.checkable?i`<th style="width: 40px; min-width: 40px">
<label class="checkbox-custom">
<input
type="checkbox"
.checked=${this.allSelected}
=${this.toggleAllSelection}
>
<span class="checkbox-mark"></span>
</label>
</th>`:""}
${this.columns.map(e=>i`
<th class="sortable" =${()=>this.sortData(e.field)} style="width: ${e.width}px;">
${e.headerName}
</th>
`)}
</tr>
</thead>
<tbody>
${l.map(e=>i`
<tr class=${this.selected.includes(e.id)?"selected":""}>
${this.checkable?i`
<td>
<label class="checkbox-custom">
<input
type="checkbox"
.checked=${this.selected.includes(e.id)}
=${()=>this.toggleSelection(e.id)}
>
<span class="checkbox-mark"></span>
</label>
</td>`:""}
${this.columns.map(s=>i`
<td style="width: ${n(s.width)}; max-width: ${n(s.width)}; min-width: ${n(s.width)};">
${u(e[s.field])}
</td>
`)}
</tr>
`)}
</tbody>
</table>
${l.length>0?"":i`<p>No hay datos que mostrar</p>`}
</div>
${this.totalPages>1?i`
<div class="pagination">
<button class="page-button arrow" ?disabled=${this.currentPage===1} =${()=>this.changePage(this.currentPage-1)}>
<cas-icon name="flat-chevronLeft" size="20"></cas-icon>
</button>
${Array.from({length:this.totalPages},(e,s)=>s+1).map(e=>i`
<button class="page-button ${e===this.currentPage&&"current"}" ?disabled=${e===this.currentPage} =${()=>this.changePage(e)}>${e}</button>
`)}
<button class="page-button arrow" ?disabled=${this.currentPage===this.totalPages} =${()=>this.changePage(this.currentPage+1)}>
<cas-icon name="flat-chevronRight" size="20"></cas-icon>
</button>
</div>
`:""}
</section>
`}}r(c,"styles",p`
.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);
}
`),r(c,"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",c);class d extends h{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 i`
<div class="input-wrapper">
${this.label?i`<label for="input">${this.label}</label>`:""}
<input
id="input"
type="text"
.value=${this.value}
=${this._onChange}
placeholder=${this.placeholder}
/>
</div>
`}}r(d,"styles",p`
/* 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;
}
`),r(d,"properties",{value:{type:String},label:{type:String},placeholder:{type:String}});customElements.define("io-input",d);console.log("home-components",m);