ctt-puro 0.47.7 → 0.47.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/puro-info-table/puro-info-table.component.mjs +12 -9
- package/esm2022/lib/components/puro-info-table/puro-info-table.interface.mjs +1 -1
- package/esm2022/lib/services/mapper/mapper.service.mjs +19 -12
- package/fesm2022/ctt-puro.mjs +28 -18
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/lib/components/puro-info-table/puro-info-table.component.d.ts +10 -10
- package/lib/components/puro-info-table/puro-info-table.interface.d.ts +2 -3
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -5369,19 +5369,26 @@ class MapperService {
|
|
|
5369
5369
|
};
|
|
5370
5370
|
}
|
|
5371
5371
|
mapInfoTable(props) {
|
|
5372
|
-
|
|
5372
|
+
const lists = props?.Lists;
|
|
5373
|
+
if (!Array.isArray(lists)) {
|
|
5374
|
+
return undefined;
|
|
5375
|
+
}
|
|
5373
5376
|
return {
|
|
5374
|
-
title: props?.texts?.title,
|
|
5375
5377
|
pretitle: props?.texts?.pretitle,
|
|
5376
|
-
|
|
5377
|
-
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5378
|
+
title: props?.texts?.title,
|
|
5379
|
+
columns: lists.map((list) => {
|
|
5380
|
+
const items = list.items ?? [];
|
|
5381
|
+
const header = items[0]?.title ?? '';
|
|
5382
|
+
const columnItems = items.slice(1).map((item) => ({
|
|
5383
|
+
title: item.title,
|
|
5384
|
+
text: item.text,
|
|
5385
|
+
icon: item.icon,
|
|
5386
|
+
}));
|
|
5387
|
+
return {
|
|
5388
|
+
header,
|
|
5389
|
+
items: columnItems,
|
|
5390
|
+
};
|
|
5391
|
+
}),
|
|
5385
5392
|
infoItems: props?.infoItems,
|
|
5386
5393
|
};
|
|
5387
5394
|
}
|
|
@@ -7537,24 +7544,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7537
7544
|
|
|
7538
7545
|
class PuroInfoTableComponent {
|
|
7539
7546
|
constructor() {
|
|
7540
|
-
this.collapsed = [
|
|
7547
|
+
this.collapsed = [];
|
|
7548
|
+
}
|
|
7549
|
+
ngOnChanges(changes) {
|
|
7550
|
+
if (changes['columns']) {
|
|
7551
|
+
this.collapsed = this.columns?.map(() => true) ?? [];
|
|
7552
|
+
}
|
|
7541
7553
|
}
|
|
7542
7554
|
toggleCollapse(index) {
|
|
7543
7555
|
this.collapsed[index] = !this.collapsed[index];
|
|
7544
7556
|
}
|
|
7545
7557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoTableComponent, isStandalone: true, selector: "lib-puro-info-table", inputs: { pretitle: "pretitle", title: "title", tableItems: "tableItems", tableHeaders: "tableHeaders", infoItems: "infoItems" }, ngImport: i0, template: "<section class=\"info-table\">\n @if (pretitle) {\n <p class=\"info-table__pretitle\">{{ pretitle }}</p>\n }\n @if (title) {\n <h2 class=\"info-table__title\">{{ title }}</h2>\n }\n <div class=\"info-table__wrapper\">\n <ng-container [ngTemplateOutlet]=\"table\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"dropdowns\"></ng-container>\n @if (infoItems?.length){\n <ul class=\"info-table__list\">\n @for (item of infoItems || []; track $index) {\n <li>\n @if (item.label) {\n <a\n [href]=\"item.url\"\n [attr.aria-label]=\"item.label\"\n >\n {{ item.label }}\n </a>\n }@else {\n {{ item.text }}\n }\n </li>\n }\n </ul>\n }\n </div>\n</section>\n\n<ng-template #dropdowns>\n <div class=\"info-table__dropdowns\">\n @for (header of tableHeaders; let headerIndex = $index; track headerIndex) {\n @if (headerIndex === 0) {\n <div class=\"info-table__headItem info-table__headItem--first\">{{ header }}</div>\n }@else{\n @if (tableItems?.length){\n <div class=\"info-table__headItem\" (click)=\"toggleCollapse(headerIndex - 1)\">\n {{ header }}\n <i\n class=\"info-table__iconCollapse icon-91\"\n [ngClass]=\"{'info-table__iconCollapse--collapsed': !collapsed[headerIndex - 1],}\"\n ></i>\n </div>\n <div\n class=\"info-table__items\"\n [ngClass]=\"{ 'info-table__items--collapsed': collapsed[headerIndex - 1] }\"\n >\n @for (item of tableItems; track $index){\n <div class=\"info-table__item\">\n <p class=\"info-table__itemTitle\">\n {{ item.title }}\n <span class=\"info-table__itemSubtitle\">\n {{ item.subtitle}}\n </span>\n </p>\n @if (item.columns?.[headerIndex - 1]?.text){\n <span class=\"info-table__itemSubtitle\">\n {{ item.columns?.[headerIndex - 1]?.text }}\n </span>\n }@else if(item.columns?.[headerIndex - 1]?.icon){\n <span [class]=\"item.columns?.[headerIndex - 1]?.icon\"></span>\n }\n </div>\n }\n </div>\n }@else{\n <div class=\"info-table__headItem\">{{ header }}</div>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #table>\n <table class=\"info-table__table\">\n <tr class=\"info-table__row\">\n @for (header of tableHeaders; track $index) {\n <th class=\"info-table__headItem\">{{ header }}</th>\n }\n </tr>\n @for (item of tableItems; track $index) {\n <tr class=\"info-table__row\">\n <td class=\"info-table__item\">\n <p class=\"info-table__itemTitle\">\n {{ item.title}}\n </p>\n <span class=\"info-table__itemSubtitle\">\n {{ item.subtitle }}\n </span>\n </td>\n @for (column of item.columns; track $index) {\n <td class=\"info-table__item\">\n @if (column.text){\n {{ column.text }}\n }\n @else if(column.icon){\n <i [class]=\"'info-table__itemIcon ' + column.icon\"></i>\n }\n </td>\n }\n </tr>\n }\n </table>\n</ng-template>\n", styles: [".info-table{transition:all .5s;padding-block:3.5rem;padding-inline:4.5rem}@media (min-width: 768px){.info-table{padding-block:6.8rem 5.6rem}}@media (min-width: 1024px){.info-table{padding-block:4.8rem 4rem}}@media (min-width: 1680px){.info-table{padding-block:7rem 5.3rem}}.info-table__pretitle{width:100%;color:#b79955;font-weight:500;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem;text-align:center;margin-bottom:2.5rem}@media (min-width: 768px){.info-table__pretitle{font-size:1.8rem;line-height:1.2127777778;letter-spacing:.18rem}}@media (min-width: 1280px){.info-table__pretitle{margin-bottom:5rem}}@media (min-width: 1680px){.info-table__pretitle{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}.info-table__title{text-align:center;width:100%;color:#b79955;transition:all .5s;margin-bottom:2.5rem;font-size:2.8rem;line-height:1.3103571429;letter-spacing:.056rem}@media (min-width: 540px){.info-table__title{font-size:3.2rem;line-height:1.25;letter-spacing:.064rem}}@media (min-width: 768px){.info-table__title{font-size:4rem;line-height:1.25;letter-spacing:.08rem}}@media (min-width: 1280px){.info-table__title{margin-bottom:5rem}}@media (min-width: 1366px){.info-table__title{font-size:5.4rem;line-height:1.2888888889;letter-spacing:.108rem}}@media (min-width: 1680px){.info-table__title{font-size:6.4rem;line-height:.968;letter-spacing:.128rem}}.info-table__wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:38px}.info-table__table{border-spacing:28px;width:100%}@media (max-width: 1280px){.info-table__table{display:none}}.info-table__headItem,.info-table__item{padding:14px 32px;font-size:2rem;text-align:center;vertical-align:middle}@media (min-width: 1280px){.info-table__headItem,.info-table__item{padding:14px 42px}}.info-table__headItem:first-child,.info-table__item:first-child{text-align:left}.info-table__headItem{color:#616160;font-weight:700;line-height:24.18px;letter-spacing:.1em;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@media (max-width: 1280px){.info-table__headItem{display:flex;align-items:center;justify-content:space-between}}.info-table__headItem:not(.info-table__headItem:last-child,.info-table__headItem:nth-child(6)),.info-table__headItem--notCollapsed{margin-bottom:28px}.info-table__headItem:first-child{color:#b79955;background-color:#fff}.info-table__headItem:nth-child(2){background-color:#ceb57766}.info-table__headItem:nth-child(4){background-color:#ceb577b3}.info-table__headItem:nth-child(6){background-color:#ceb577}@media (min-width: 1280px){.info-table__headItem:first-child{color:#b79955;background-color:#fff}.info-table__headItem:not(:first-child){text-align:center}.info-table__headItem:nth-child(2){background-color:#ceb57766}.info-table__headItem:nth-child(3){background-color:#ceb577b3}.info-table__headItem:nth-child(4){background-color:#ceb577}}.info-table__iconCollapse{width:17px;height:33px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.info-table__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.info-table__items{interpolate-size:allow-keywords;transition:all .2s;height:auto;overflow:hidden;margin-bottom:28px}.info-table__items--collapsed{height:0;margin:0}.info-table__item{color:#616160}@media (max-width: 1280px){.info-table__item{display:flex;justify-content:space-between;align-items:center;min-height:71px;background-color:#fff}.info-table__item:not(.info-table__item:last-child){margin-bottom:20px}}@media (min-width: 1280px){.info-table__item:first-child{background-color:#ceb6774d}.info-table__item:nth-child(2),.info-table__item:nth-child(4){background-color:#fff}.info-table__item:nth-child(3){background-color:#ceb67725}}.info-table__itemTitle{font-size:1.6rem;line-height:1.6em;font-weight:400;letter-spacing:.03em;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@media (min-width: 768px){.info-table__itemTitle{font-size:2rem}}@media (max-width: 1280px){.info-table__itemTitle{display:flex;flex-direction:column}}.info-table__itemSubtitle{font-size:.9rem;font-weight:400;line-height:1.6rem;letter-spacing:.03em;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@media (min-width: 768px){.info-table__itemSubtitle{font-size:1.2rem}}.info-table__itemIcon{font-size:1.8rem;width:20px;height:20px;display:block;position:relative;left:50%;transform:translate(-50%)}.info-table__list{padding:0 42px}.info-table__list li{font-weight:400;font-size:2rem;line-height:34px;letter-spacing:3%;opacity:.6;color:#616160;position:relative}.info-table__list li:before{content:\"\";width:3px;height:3px;border-radius:100%;background-color:#616160;display:inline-block;vertical-align:middle;margin-right:10px}.info-table__list li ::ng-deep a{text-decoration:underline}.info-table__dropdowns{width:100%}@media (min-width: 1280px){.info-table__dropdowns{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
7558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoTableComponent, isStandalone: true, selector: "lib-puro-info-table", inputs: { pretitle: "pretitle", title: "title", columns: "columns", infoItems: "infoItems" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"info-table generalMargin\">\n @if (pretitle) {\n <p class=\"info-table__pretitle\">{{ pretitle }}</p>\n }\n\n @if (title) {\n <h2 class=\"info-table__title\">{{ title }}</h2>\n }\n\n <div class=\"info-table__wrapper\">\n <!-- ===== Desktop table ===== -->\n <ng-container [ngTemplateOutlet]=\"table\"></ng-container>\n\n <!-- ===== Mobile dropdowns ===== -->\n <ng-container [ngTemplateOutlet]=\"dropdowns\"></ng-container>\n\n @if (infoItems?.length) {\n <ul class=\"info-table__list\">\n @for (item of infoItems; track $index) {\n <li>\n @if (item.label) {\n <a [href]=\"item.url\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n {{ item.text }}\n }\n </li>\n }\n </ul>\n }\n </div>\n</section>\n\n<!-- ========================================================= -->\n<!-- ===================== MOBILE ============================ -->\n<!-- ========================================================= -->\n<ng-template #dropdowns>\n <div class=\"info-table__dropdowns\">\n @for (col of columns; let colIndex = $index; track colIndex) {\n <div\n class=\"info-table__headItem\"\n (click)=\"colIndex !== 0 && toggleCollapse(colIndex)\"\n >\n {{ col.header }}\n @if (colIndex !== 0) {\n <i\n class=\"info-table__iconCollapse icon-91\"\n [ngClass]=\"{\n 'info-table__iconCollapse--collapsed':\n !collapsed[colIndex],\n }\"\n ></i>\n }\n </div>\n\n <div\n class=\"info-table__items\"\n [ngClass]=\"{\n 'info-table__items--collapsed': collapsed[colIndex],\n }\"\n >\n @for (\n rowIndex of columns?.[0]?.items?.length\n ? [].constructor(columns?.[0]?.items?.length)\n : [];\n let i = $index;\n track i\n ) {\n <div class=\"info-table__item\">\n <!-- TITLE \u2192 SIEMPRE columna 0 -->\n <div class=\"info-table__itemLeft\">\n @if (columns?.[0]?.items?.[i]?.title) {\n <p class=\"info-table__itemTitle\">\n {{ columns?.[0]?.items?.[i]?.title }}\n </p>\n }\n @if (columns?.[0]?.items?.[i]?.text) {\n <span class=\"info-table__itemSubtitle\">\n {{ columns?.[0]?.items?.[i]?.text }}\n </span>\n }\n </div>\n\n <!-- VALUE \u2192 columna actual -->\n <div class=\"info-table__itemRight\">\n @if (\n columns?.[colIndex]?.items?.[i]?.title ===\n 'icon'\n ) {\n <div class=\"info-table__itemIcon\">\n <i\n class=\"icon-{{\n columns?.[colIndex]?.items?.[i]\n ?.icon\n }}\"\n ></i>\n </div>\n } @else if (\n columns?.[colIndex]?.items?.[i]?.title\n ) {\n <span class=\"info-table__itemTitle\">\n {{ columns?.[colIndex]?.items?.[i]?.title }}\n </span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<!-- ========================================================= -->\n<!-- ===================== DESKTOP =========================== -->\n<!-- ========================================================= -->\n<ng-template #table>\n <table class=\"info-table__table\">\n <!-- Headers -->\n <tr class=\"info-table__row\">\n @for (col of columns; track $index) {\n <th class=\"info-table__headItem\">\n {{ col.header }}\n </th>\n }\n </tr>\n\n <!-- Rows -->\n @for (\n rowIndex of columns?.[0]?.items?.length\n ? [].constructor(columns?.[0]?.items?.length)\n : [];\n let i = $index;\n track i\n ) {\n <tr class=\"info-table__row\">\n @for (col of columns; track $index) {\n <td class=\"info-table__item\">\n @if (col.items[i]?.title === 'icon') {\n <div class=\"info-table__itemIcon\">\n <i class=\"icon-{{ col.items[i]?.icon }}\"></i>\n </div>\n } @else if (col.items[i]?.title) {\n <p class=\"info-table__itemTitle\">\n {{ col.items[i]?.title }}\n </p>\n }\n\n @if (col.items[i]?.text) {\n <span class=\"info-table__itemSubtitle\">\n {{ col.items[i]?.text }}\n </span>\n }\n </td>\n }\n </tr>\n }\n </table>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
7547
7559
|
}
|
|
7548
7560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoTableComponent, decorators: [{
|
|
7549
7561
|
type: Component,
|
|
7550
|
-
args: [{ selector: 'lib-puro-info-table', standalone: true, imports: [CommonModule], template: "<section class=\"info-table\">\n @if (pretitle) {\n <p class=\"info-table__pretitle\">{{ pretitle }}</p>\n }\n @if (title) {\n <h2 class=\"info-table__title\">{{ title }}</h2>\n }\n <div class=\"info-table__wrapper\">\n <ng-container [ngTemplateOutlet]=\"table\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"dropdowns\"></ng-container>\n @if (infoItems?.length){\n <ul class=\"info-table__list\">\n @for (item of infoItems
|
|
7551
|
-
}],
|
|
7562
|
+
args: [{ selector: 'lib-puro-info-table', standalone: true, imports: [CommonModule], template: "<section class=\"info-table generalMargin\">\n @if (pretitle) {\n <p class=\"info-table__pretitle\">{{ pretitle }}</p>\n }\n\n @if (title) {\n <h2 class=\"info-table__title\">{{ title }}</h2>\n }\n\n <div class=\"info-table__wrapper\">\n <!-- ===== Desktop table ===== -->\n <ng-container [ngTemplateOutlet]=\"table\"></ng-container>\n\n <!-- ===== Mobile dropdowns ===== -->\n <ng-container [ngTemplateOutlet]=\"dropdowns\"></ng-container>\n\n @if (infoItems?.length) {\n <ul class=\"info-table__list\">\n @for (item of infoItems; track $index) {\n <li>\n @if (item.label) {\n <a [href]=\"item.url\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </a>\n } @else {\n {{ item.text }}\n }\n </li>\n }\n </ul>\n }\n </div>\n</section>\n\n<!-- ========================================================= -->\n<!-- ===================== MOBILE ============================ -->\n<!-- ========================================================= -->\n<ng-template #dropdowns>\n <div class=\"info-table__dropdowns\">\n @for (col of columns; let colIndex = $index; track colIndex) {\n <div\n class=\"info-table__headItem\"\n (click)=\"colIndex !== 0 && toggleCollapse(colIndex)\"\n >\n {{ col.header }}\n @if (colIndex !== 0) {\n <i\n class=\"info-table__iconCollapse icon-91\"\n [ngClass]=\"{\n 'info-table__iconCollapse--collapsed':\n !collapsed[colIndex],\n }\"\n ></i>\n }\n </div>\n\n <div\n class=\"info-table__items\"\n [ngClass]=\"{\n 'info-table__items--collapsed': collapsed[colIndex],\n }\"\n >\n @for (\n rowIndex of columns?.[0]?.items?.length\n ? [].constructor(columns?.[0]?.items?.length)\n : [];\n let i = $index;\n track i\n ) {\n <div class=\"info-table__item\">\n <!-- TITLE \u2192 SIEMPRE columna 0 -->\n <div class=\"info-table__itemLeft\">\n @if (columns?.[0]?.items?.[i]?.title) {\n <p class=\"info-table__itemTitle\">\n {{ columns?.[0]?.items?.[i]?.title }}\n </p>\n }\n @if (columns?.[0]?.items?.[i]?.text) {\n <span class=\"info-table__itemSubtitle\">\n {{ columns?.[0]?.items?.[i]?.text }}\n </span>\n }\n </div>\n\n <!-- VALUE \u2192 columna actual -->\n <div class=\"info-table__itemRight\">\n @if (\n columns?.[colIndex]?.items?.[i]?.title ===\n 'icon'\n ) {\n <div class=\"info-table__itemIcon\">\n <i\n class=\"icon-{{\n columns?.[colIndex]?.items?.[i]\n ?.icon\n }}\"\n ></i>\n </div>\n } @else if (\n columns?.[colIndex]?.items?.[i]?.title\n ) {\n <span class=\"info-table__itemTitle\">\n {{ columns?.[colIndex]?.items?.[i]?.title }}\n </span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<!-- ========================================================= -->\n<!-- ===================== DESKTOP =========================== -->\n<!-- ========================================================= -->\n<ng-template #table>\n <table class=\"info-table__table\">\n <!-- Headers -->\n <tr class=\"info-table__row\">\n @for (col of columns; track $index) {\n <th class=\"info-table__headItem\">\n {{ col.header }}\n </th>\n }\n </tr>\n\n <!-- Rows -->\n @for (\n rowIndex of columns?.[0]?.items?.length\n ? [].constructor(columns?.[0]?.items?.length)\n : [];\n let i = $index;\n track i\n ) {\n <tr class=\"info-table__row\">\n @for (col of columns; track $index) {\n <td class=\"info-table__item\">\n @if (col.items[i]?.title === 'icon') {\n <div class=\"info-table__itemIcon\">\n <i class=\"icon-{{ col.items[i]?.icon }}\"></i>\n </div>\n } @else if (col.items[i]?.title) {\n <p class=\"info-table__itemTitle\">\n {{ col.items[i]?.title }}\n </p>\n }\n\n @if (col.items[i]?.text) {\n <span class=\"info-table__itemSubtitle\">\n {{ col.items[i]?.text }}\n </span>\n }\n </td>\n }\n </tr>\n }\n </table>\n</ng-template>\n" }]
|
|
7563
|
+
}], propDecorators: { pretitle: [{
|
|
7552
7564
|
type: Input
|
|
7553
7565
|
}], title: [{
|
|
7554
7566
|
type: Input
|
|
7555
|
-
}],
|
|
7556
|
-
type: Input
|
|
7557
|
-
}], tableHeaders: [{
|
|
7567
|
+
}], columns: [{
|
|
7558
7568
|
type: Input
|
|
7559
7569
|
}], infoItems: [{
|
|
7560
7570
|
type: Input
|