Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
import { ContentPageletView } from 'ish-core/models/content-view/content-view.model';
import { CMSComponent } from 'ish-shared/cms/models/cms-component/cms-component.model';
@Component({
selector: 'ish-cms-container',
templateUrl: './cms-container.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CMSContainerComponent implements CMSComponent, OnChanges {
@Input({ required: true }) pagelet: ContentPageletView;
contentSlotPagelets: string[] = [];
containerClasses = '';
ngOnChanges() {
let contentSlotPagelets = this.pagelet.slot('app_sf_base_cm:slot.container.content.pagelet2-Slot').pageletIDs;
Iif (this.pagelet.hasParam('UpperBound')) {
contentSlotPagelets = contentSlotPagelets.slice(0, this.pagelet.numberParam('UpperBound'));
}
this.contentSlotPagelets = contentSlotPagelets;
this.containerClasses = this.getGridCSS(this.pagelet.stringParam('Grid'));
this.containerClasses += this.pagelet.stringParam('CSSClass', '');
}
// eslint-disable-next-line complexity
private getGridCSS(grid: string): string {
let gridCSS = '';
if (grid) {
// transform an incoming string like "ExtraSmall:12,Small:6,Medium:4,Large:0" to a grid object
const gridObject = { ExtraSmall: 0, Small: 0, Medium: 0, Large: 0 };
grid.split(',').forEach(element => {
gridObject[element.split(':')[0] as keyof typeof gridObject] = Number(element.split(':')[1]);
});
// the 'hidden-__' classes replacement is not 100% compatible to Bootstrap 3
if (gridObject.ExtraSmall !== 0) {
gridCSS += gridObject.ExtraSmall !== -1 ? `col-${gridObject.ExtraSmall} ` : 'd-none d-md-block ';
}
if (gridObject.Small !== 0) {
gridCSS += gridObject.Small !== -1 ? `col-md-${gridObject.Small} ` : 'd-md-none d-lg-block ';
}
if (gridObject.Medium !== 0) {
gridCSS += gridObject.Medium !== -1 ? `col-lg-${gridObject.Medium} ` : 'd-lg-none d-xl-block ';
}
Iif (gridObject.Large !== 0) {
gridCSS += gridObject.Large !== -1 ? `col-xl-${gridObject.Large} ` : 'd-xl-none ';
}
// 'float-left' is added to get the similar styling as with Bootstrap 3
if (gridCSS !== '') {
gridCSS += 'float-left ';
}
}
return gridCSS;
}
}
|