@pepperi-addons/ngx-composite-lib 0.4.2-beta.80 → 0.4.2-beta.82

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.
Files changed (13) hide show
  1. package/esm2020/group-buttons-settings/public-api.mjs +2 -2
  2. package/esm2020/layout-builder/hide-in/hide-in.component.mjs +3 -3
  3. package/esm2020/layout-builder/section/section.component.mjs +3 -3
  4. package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs +1 -1
  5. package/fesm2015/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs.map +1 -1
  6. package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs +4 -4
  7. package/fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
  8. package/fesm2020/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs +1 -1
  9. package/fesm2020/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs.map +1 -1
  10. package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs +4 -4
  11. package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/src/assets/i18n/en.ngx-composite-lib.json +4 -1
package/fesm2020/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs CHANGED
@@ -204,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
204
204
  }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
205
205
 
206
206
  /*
207
- * Public API Surface of ngx-composite-lib/shadow-settings
207
+ * Public API Surface of ngx-composite-lib/group-buttons-settings
208
208
  */
209
209
 
210
210
  /**
package/fesm2020/pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs","sources":["../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.ts","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.html","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.module.ts","../../../projects/ngx-composite-lib/group-buttons-settings/public-api.ts","../../../projects/ngx-composite-lib/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\nimport { IPepButtonClickEvent, PepButton } from '@pepperi-addons/ngx-lib/button';\nimport { PepGroupbuttonsTypes } from './group-buttons-settings.model';\n\n@Component({\n selector: 'pep-group-buttons-settings',\n templateUrl: './group-buttons-settings.component.html',\n styleUrls: ['./group-buttons-settings.component.scss']\n})\nexport class GroupButtonsSettingsComponent implements OnInit {\n\n @Input() header = '';\n @Input() subHeader = '';\n\n @Input() groupType: PepGroupbuttonsTypes = 'sizes'; \n @Input() btnsArray: Array<PepButton> = [];\n @Input() excludeKeys: Array<string> = []; // for example ['xs','xl']\n\n @Input() useNone = false;\n @Input() disabled = false;\n @Input() dir: 'rtl' | 'ltr' = 'ltr';\n @Input() titleSize: PepSizeType = 'xl';\n @Input() bold = true;\n\n private _btnKey: any;\n @Input()\n set btnKey(value: any) {\n if (!value) {\n this._btnKey = '';\n } else {\n this._btnKey = value;\n }\n }\n get btnKey(): any {\n return this._btnKey;\n }\n\n @Output()\n btnkeyChange: EventEmitter<string> = new EventEmitter<string>();\n \n \n none: PepButton = {key: 'none'};\n \n sizes: Array<PepButton> = [];\n defaultCallback = (event: IPepButtonClickEvent) => this.onKeyChange(event);\n\n // pepB: PepSizeType | 'none' = \"xs\";\n\n constructor(\n private translate: TranslateService,\n ) {\n }\n\n ngOnInit(): void { \n // Get the first translation for load all translations.\n this.translate.get('GENERAL.NONE').subscribe((res) => {\n this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };\n \n this.arrayMerge();\n });\n }\n\n arrayMerge(){\n\n this.btnsArray = this.getButtonsArray();\n \n // check if need to remove items from the buttons array\n if(this.excludeKeys){\n this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));\n }\n // check if need to add the None button\n if(this.useNone){\n this.btnsArray = [this.none].concat(this.btnsArray);\n }\n }\n\n onKeyChange(event: IPepButtonClickEvent | null) {\n this.btnKey = event?.source?.key || 'none';\n this.btnkeyChange.emit(this.btnKey);\n }\n\n getButtonsArray() {\n switch(this.groupType){\n case 'custom':{\n // Set default callback if not exist.\n for (let index = 0; index < this.btnsArray.length; index++) {\n const btn = this.btnsArray[index];\n \n if (!btn.callback) {\n btn.callback = this.defaultCallback;\n }\n }\n\n return this.btnsArray;\n }\n case 'sizes':{\n return [\n { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: this.defaultCallback },\n { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: this.defaultCallback },\n { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: this.defaultCallback },\n { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: this.defaultCallback },\n { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: this.defaultCallback },\n { key: '2xl', value: this.translate.instant('GENERAL.XXL'), callback: this.defaultCallback }\n ];\n }\n case 'vertical-align':{\n return [\n { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: this.defaultCallback },\n { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: this.defaultCallback },\n { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: this.defaultCallback }\n ];\n }\n case 'left-right-arrows':{\n return [\n { key: 'left', iconName: 'arrow_left_alt', callback: this.defaultCallback },\n { key: 'right', iconName: 'arrow_right_alt', callback: this.defaultCallback }\n ];\n }\n case 'horizontal-align': {\n return [\n { key: 'left', iconName: 'text_align_right', callback: this.defaultCallback },\n { key: 'center', iconName: 'text_align_center', callback: this.defaultCallback },\n { key: 'right', iconName: 'text_align_left', callback: this.defaultCallback },\n ];\n }\n case 'font-weight':{\n return [\n { key: 'regular', value: this.translate.instant('GENERAL.FONT_WEIGHT.REGULAR'), callback: this.defaultCallback },\n { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: this.defaultCallback },\n { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: this.defaultCallback }\n ]\n }\n case 'width-sizes':{\n return [\n { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: this.defaultCallback },\n { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: this.defaultCallback },\n { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: this.defaultCallback }\n ];\n }\n case 'boolean':{\n return [\n { key: 'true', value: this.translate.instant('GENERAL.BOOLEAN.TRUE'), callback: this.defaultCallback },\n { key: 'false', value: this.translate.instant('GENERAL.BOOLEAN.FALSE'), callback: this.defaultCallback }\n ];\n }\n\n default: {\n return [];\n }\n }\n }\n}\n","<label *ngIf=\"header != ''\" class=\"body-{{titleSize}} {{bold ? 'bold' : ''}} ellipsis\" style=\"display: block;\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n [selectedButtonKey]=\"btnKey\" \n [stretch]=\"true\" \n buttonsClass=\"md regular\" \n [buttonsDisabled]=\"disabled\" \n viewType=\"toggle\">\n</pep-group-buttons>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GroupButtonsSettingsComponent } from './group-buttons-settings.component';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\nimport { pepIconArrowLeftAlt, pepIconArrowRightAlt, PepIconModule, PepIconRegistry, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight } from '@pepperi-addons/ngx-lib/icon';\n\nconst pepIcons = [\n pepIconTextAlignCenter, \n pepIconTextAlignLeft, \n pepIconTextAlignRight,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt\n]\n\n@NgModule({\n declarations: [\n GroupButtonsSettingsComponent\n ],\n imports: [\n CommonModule,\n PepNgxLibModule,\n PepFieldTitleModule,\n PepGroupButtonsModule,\n PepIconModule\n ],\n exports: [GroupButtonsSettingsComponent]\n})\nexport class PepGroupButtonsSettingsModule { \n constructor(\n private pepIconRegistry: PepIconRegistry,\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/shadow-settings\n */\nexport * from './group-buttons-settings.module';\nexport * from './group-buttons-settings.component';\nexport * from './group-buttons-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-composite-lib-group-buttons-settings.mjs","sources":["../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.ts","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.component.html","../../../projects/ngx-composite-lib/group-buttons-settings/group-buttons-settings.module.ts","../../../projects/ngx-composite-lib/group-buttons-settings/public-api.ts","../../../projects/ngx-composite-lib/group-buttons-settings/pepperi-addons-ngx-composite-lib-group-buttons-settings.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\nimport { IPepButtonClickEvent, PepButton } from '@pepperi-addons/ngx-lib/button';\nimport { PepGroupbuttonsTypes } from './group-buttons-settings.model';\n\n@Component({\n selector: 'pep-group-buttons-settings',\n templateUrl: './group-buttons-settings.component.html',\n styleUrls: ['./group-buttons-settings.component.scss']\n})\nexport class GroupButtonsSettingsComponent implements OnInit {\n\n @Input() header = '';\n @Input() subHeader = '';\n\n @Input() groupType: PepGroupbuttonsTypes = 'sizes'; \n @Input() btnsArray: Array<PepButton> = [];\n @Input() excludeKeys: Array<string> = []; // for example ['xs','xl']\n\n @Input() useNone = false;\n @Input() disabled = false;\n @Input() dir: 'rtl' | 'ltr' = 'ltr';\n @Input() titleSize: PepSizeType = 'xl';\n @Input() bold = true;\n\n private _btnKey: any;\n @Input()\n set btnKey(value: any) {\n if (!value) {\n this._btnKey = '';\n } else {\n this._btnKey = value;\n }\n }\n get btnKey(): any {\n return this._btnKey;\n }\n\n @Output()\n btnkeyChange: EventEmitter<string> = new EventEmitter<string>();\n \n \n none: PepButton = {key: 'none'};\n \n sizes: Array<PepButton> = [];\n defaultCallback = (event: IPepButtonClickEvent) => this.onKeyChange(event);\n\n // pepB: PepSizeType | 'none' = \"xs\";\n\n constructor(\n private translate: TranslateService,\n ) {\n }\n\n ngOnInit(): void { \n // Get the first translation for load all translations.\n this.translate.get('GENERAL.NONE').subscribe((res) => {\n this.none = { key: 'none', value: this.translate.instant('GENERAL.NONE'), callback: () => this.onKeyChange(null) };\n \n this.arrayMerge();\n });\n }\n\n arrayMerge(){\n\n this.btnsArray = this.getButtonsArray();\n \n // check if need to remove items from the buttons array\n if(this.excludeKeys){\n this.btnsArray = this.btnsArray.filter(i => !this.excludeKeys.find(f => f === i.key));\n }\n // check if need to add the None button\n if(this.useNone){\n this.btnsArray = [this.none].concat(this.btnsArray);\n }\n }\n\n onKeyChange(event: IPepButtonClickEvent | null) {\n this.btnKey = event?.source?.key || 'none';\n this.btnkeyChange.emit(this.btnKey);\n }\n\n getButtonsArray() {\n switch(this.groupType){\n case 'custom':{\n // Set default callback if not exist.\n for (let index = 0; index < this.btnsArray.length; index++) {\n const btn = this.btnsArray[index];\n \n if (!btn.callback) {\n btn.callback = this.defaultCallback;\n }\n }\n\n return this.btnsArray;\n }\n case 'sizes':{\n return [\n { key: 'xs', value: this.translate.instant('GENERAL.XS'), callback: this.defaultCallback },\n { key: 'sm', value: this.translate.instant('GENERAL.SM'), callback: this.defaultCallback },\n { key: 'md', value: this.translate.instant('GENERAL.MD'), callback: this.defaultCallback },\n { key: 'lg', value: this.translate.instant('GENERAL.LG'), callback: this.defaultCallback },\n { key: 'xl', value: this.translate.instant('GENERAL.XL'), callback: this.defaultCallback },\n { key: '2xl', value: this.translate.instant('GENERAL.XXL'), callback: this.defaultCallback }\n ];\n }\n case 'vertical-align':{\n return [\n { key: 'start', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.TOP'), callback: this.defaultCallback },\n { key: 'middle', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.MIDDLE'), callback: this.defaultCallback },\n { key: 'end', value: this.translate.instant('GENERAL.VERTICAL_ALIGN.BOTTOM'), callback: this.defaultCallback }\n ];\n }\n case 'left-right-arrows':{\n return [\n { key: 'left', iconName: 'arrow_left_alt', callback: this.defaultCallback },\n { key: 'right', iconName: 'arrow_right_alt', callback: this.defaultCallback }\n ];\n }\n case 'horizontal-align': {\n return [\n { key: 'left', iconName: 'text_align_right', callback: this.defaultCallback },\n { key: 'center', iconName: 'text_align_center', callback: this.defaultCallback },\n { key: 'right', iconName: 'text_align_left', callback: this.defaultCallback },\n ];\n }\n case 'font-weight':{\n return [\n { key: 'regular', value: this.translate.instant('GENERAL.FONT_WEIGHT.REGULAR'), callback: this.defaultCallback },\n { key: 'bold', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLD'), callback: this.defaultCallback },\n { key: 'bolder', value: this.translate.instant('GENERAL.FONT_WEIGHT.BOLDER'), callback: this.defaultCallback }\n ]\n }\n case 'width-sizes':{\n return [\n { key: 'narrow', value: this.translate.instant('GENERAL.WIDTH_SIZE.NARROW'), callback: this.defaultCallback },\n { key: 'regular', value: this.translate.instant('GENERAL.WIDTH_SIZE.REGULAR'), callback: this.defaultCallback },\n { key: 'wide', value: this.translate.instant('GENERAL.WIDTH_SIZE.WIDE'), callback: this.defaultCallback }\n ];\n }\n case 'boolean':{\n return [\n { key: 'true', value: this.translate.instant('GENERAL.BOOLEAN.TRUE'), callback: this.defaultCallback },\n { key: 'false', value: this.translate.instant('GENERAL.BOOLEAN.FALSE'), callback: this.defaultCallback }\n ];\n }\n\n default: {\n return [];\n }\n }\n }\n}\n","<label *ngIf=\"header != ''\" class=\"body-{{titleSize}} {{bold ? 'bold' : ''}} ellipsis\" style=\"display: block;\">{{header}}</label>\n<pep-field-title *ngIf=\"subHeader !=''\" [label]=\"subHeader\" [disabled]=\"disabled\" [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\"></pep-field-title>\n<pep-group-buttons [buttons]=\"btnsArray\" \n [selectedButtonKey]=\"btnKey\" \n [stretch]=\"true\" \n buttonsClass=\"md regular\" \n [buttonsDisabled]=\"disabled\" \n viewType=\"toggle\">\n</pep-group-buttons>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { GroupButtonsSettingsComponent } from './group-buttons-settings.component';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\nimport { pepIconArrowLeftAlt, pepIconArrowRightAlt, PepIconModule, PepIconRegistry, pepIconTextAlignCenter, pepIconTextAlignLeft, pepIconTextAlignRight } from '@pepperi-addons/ngx-lib/icon';\n\nconst pepIcons = [\n pepIconTextAlignCenter, \n pepIconTextAlignLeft, \n pepIconTextAlignRight,\n pepIconArrowRightAlt,\n pepIconArrowLeftAlt\n]\n\n@NgModule({\n declarations: [\n GroupButtonsSettingsComponent\n ],\n imports: [\n CommonModule,\n PepNgxLibModule,\n PepFieldTitleModule,\n PepGroupButtonsModule,\n PepIconModule\n ],\n exports: [GroupButtonsSettingsComponent]\n})\nexport class PepGroupButtonsSettingsModule { \n constructor(\n private pepIconRegistry: PepIconRegistry,\n ) {\n this.pepIconRegistry.registerIcons(pepIcons);\n }\n}\n","/*\n * Public API Surface of ngx-composite-lib/group-buttons-settings\n */\nexport * from './group-buttons-settings.module';\nexport * from './group-buttons-settings.component';\nexport * from './group-buttons-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}
package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs CHANGED
@@ -86,10 +86,10 @@ class HideInComponent {
86
86
  }
87
87
  }
88
88
  HideInComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
89
- HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
89
+ HideInComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HideInComponent, selector: "hide-in", inputs: { hideIn: "hideIn" }, outputs: { hideInChange: "hideInChange", menuOpened: "menuOpened", menuClosed: "menuClosed" }, ngImport: i0, template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
90
90
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HideInComponent, decorators: [{
91
91
  type: Component,
92
- args: [{ selector: 'hide-in', template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"] }]
92
+ args: [{ selector: 'hide-in', template: "\n<pep-button sizeType=\"xs\" iconName=\"system_view\" [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\"\n class=\"badge-button\" [ngClass]=\"{ 'none': !hideIn || hideIn.length === 0}\"\n matBadge=\"{{ hideIn?.length }}\" matBadgePosition=\"after\" matBadgeSize=\"small\" \n></pep-button>\n\n<mat-menu #menu=\"matMenu\" class=\"hide-in-menu\">\n <div mat-menu-item class=\"title\" disabled>\n <span>{{('LAYOUT_BUILDER.HIDE_IN.HIDE_IN_TITLE' | translate)}}</span>\n </div>\n <div mat-menu-item class=\"splitter\"></div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <button mat-menu-item (click)=\"onItemClick($event, menuItem)\" title=\"{{ menuItem.text }}\">\n <mat-checkbox type=\"checkbox\" title=\"{{ menuItem.text }}\" class=\"md\"\n (change)=\"onItemClick($event, menuItem)\" [checked]=\"menuItem.selected\">\n <span class=\"pull-left flip title ellipsis\">{{ menuItem.text }}</span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n", styles: [".hide-in-menu .mat-menu-item.splitter{margin-inline:var(--pep-spacing-sm, .5rem)}.mat-menu-item ::ng-deep .mat-checkbox-layout .mat-checkbox-inner-container{margin-inline-end:var(--pep-spacing-xs, .25rem)!important}.badge-button .mat-badge-content{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));background-color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important;box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.badge-button .mat-badge-content .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button .mat-badge-content .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.badge-button.none ::ng-deep .mat-badge-content{display:none}.badge-button ::ng-deep .mat-badge-content{z-index:1;right:-4px!important}\n", ".hide-in-menu .mat-menu-item.title{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}\n"] }]
93
93
  }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { hideIn: [{
94
94
  type: Input
95
95
  }], hideInChange: [{
@@ -1137,10 +1137,10 @@ class SectionComponent extends BaseDestroyerDirective {
1137
1137
  }
1138
1138
  }
1139
1139
  SectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, deps: [{ token: i0.Renderer2 }, { token: LayoutBuilderInternalService }], target: i0.ɵɵFactoryTarget.Component });
1140
- SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionComponent, selector: "section", inputs: { blockTemplate: "blockTemplate", key: "key", name: "name", split: "split", height: "height", collapseOnTablet: "collapseOnTablet", columns: "columns", hideIn: "hideIn", columnsGap: "columnsGap" }, host: { properties: { "style.max-height": "this.styleMaxHeight", "style.height": "this.styleHeight" } }, viewQueries: [{ propertyName: "sectionContainerRef", first: true, predicate: ["sectionContainer"], descendants: true }, { propertyName: "columnsElementRef", predicate: ["columnsWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n [ngClass]=\"{ \n 'mobile': screenType === 'Phablet',\n 'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n 'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n >\n <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n\n <div *ngIf=\"editable\" class=\"section-background\">\n <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n </div>\n <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'}}\"\n [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n 'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n 'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n cdkDropList\n [cdkDropListData]=\"column\"\n [cdkDropListOrientation]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n </div>\n </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit;min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state.section-hidden-state:not(.active-section){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i7.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
1140
+ SectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionComponent, selector: "section", inputs: { blockTemplate: "blockTemplate", key: "key", name: "name", split: "split", height: "height", collapseOnTablet: "collapseOnTablet", columns: "columns", hideIn: "hideIn", columnsGap: "columnsGap" }, host: { properties: { "style.max-height": "this.styleMaxHeight", "style.height": "this.styleHeight" } }, viewQueries: [{ propertyName: "sectionContainerRef", first: true, predicate: ["sectionContainer"], descendants: true }, { propertyName: "columnsElementRef", predicate: ["columnsWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n [ngClass]=\"{ \n 'mobile': screenType === 'Phablet',\n 'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n 'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n >\n <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n\n <div *ngIf=\"editable\" class=\"section-background\">\n <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n </div>\n <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n <ng-container *ngFor=\"let column of columns; let i=index;\">\n <div *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\" \n [id]=\"sectionColumnKeyPrefix + i\" \n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'}}\"\n [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n 'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n 'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n cdkDropList\n [cdkDropListData]=\"column\"\n [cdkDropListOrientation]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit;min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state.section-hidden-state:not(.active-section){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: SectionBlockComponent, selector: "section-block", inputs: ["blockTemplate", "sectionKey", "sectionHeight", "isMainEditorState", "editable", "active", "blockContainer", "screenType"], outputs: ["dragExited", "dragEntered"] }, { kind: "component", type: HideInComponent, selector: "hide-in", inputs: ["hideIn"], outputs: ["hideInChange", "menuOpened", "menuClosed"] }, { kind: "component", type: i7.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }] });
1141
1141
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionComponent, decorators: [{
1142
1142
  type: Component,
1143
- args: [{ selector: 'section', template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n [ngClass]=\"{ \n 'mobile': screenType === 'Phablet',\n 'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n 'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n >\n <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n\n <div *ngIf=\"editable\" class=\"section-background\">\n <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n </div>\n <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n <div [id]=\"sectionColumnKeyPrefix + i\" \n *ngFor=\"let column of columns; let i=index;\"\n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'}}\"\n [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n 'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n 'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n cdkDropList\n [cdkDropListData]=\"column\"\n [cdkDropListOrientation]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n </div>\n </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit;min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state.section-hidden-state:not(.active-section){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"] }]
1143
+ args: [{ selector: 'section', template: "<div #sectionContainer *ngIf=\"editable || (containsBlocks && !hideForCurrentScreenType)\" class=\"section-container \"\n [ngClass]=\"{ \n 'mobile': screenType === 'Phablet',\n 'editable-state': editable, 'main-editor-state': isMainEditorState, 'default-height': shouldSetDefaultHeight, 'active-section': isEditing,\n 'section-hidden-state': hideForCurrentScreenType, 'section-is-dragging': draggingSectionKey !== '', 'show-hover-state': hoverState }\" \n cdkDragBoundary=\".layout-builder-wrapper\" cdkDrag [cdkDragData]=\"key\" [cdkDragDisabled]=\"!editable || selectedSectionKey.length > 0 || selectedBlockKey.length > 0\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\" \n >\n <pep-draggable-item *ngIf=\"editable && isMainEditorState && draggingSectionKey === ''\" cdkDragHandle style=\"cursor: grab;\"\n class=\"section-toolbar\" [ngClass]=\"{ 'hide-toolbar': !hoverState }\" [title]=\"name\">\n <ng-container pep-actions>\n <pep-button classNames=\"caution\" sizeType=\"xs\" iconName=\"system_bin\" (buttonClick)=\"onRemoveSectionClick();\"></pep-button>\n <hide-in [hideIn]=\"hideIn\" (hideInChange)=\"onHideSectionChange($event)\" (menuClosed)=\"onHideInMenuClosed()\" (menuOpened)=\"onHideInMenuOpened()\"></hide-in>\n <pep-button sizeType=\"xs\" iconName=\"system_edit\" (buttonClick)=\"onEditSectionClick();\"></pep-button>\n </ng-container>\n </pep-draggable-item>\n\n <div *ngIf=\"editable\" class=\"section-background\">\n <div class=\"back-template\" *ngFor=\"let number of [0,1,2,3,4,5,6,7,8,9,10,11]\"></div>\n </div>\n <div #columnsWrapper class=\"columns-wrapper gap-{{ columnsGap }}\" \n [ngClass]=\"{ 'mobile': screenType === 'Phablet', 'is-dragging': editable && getIsDragging }\">\n <ng-container *ngFor=\"let column of columns; let i=index;\">\n <div *ngIf=\"editable || (column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && !getIsHidden(column?.BlockContainer?.Hide, screenType))\" \n [id]=\"sectionColumnKeyPrefix + i\" \n class=\"section-column {{screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'}}\"\n [ngClass]=\"{ 'active-column': selectedBlockKey === column.BlockContainer?.BlockKey, \n 'is-hidden': getIsHidden(column?.BlockContainer?.Hide, screenType),\n 'already-contains-block': editable && column.BlockContainer && column.BlockContainer.BlockKey && column.BlockContainer.BlockKey.length > 0 && \n draggingBlockKey && draggingBlockKey.length > 0 && column.BlockContainer.BlockKey !== draggingBlockKey }\"\n cdkDropList\n [cdkDropListData]=\"column\"\n [cdkDropListOrientation]=\"screenSize <= pepScreenSizeToFlipToVertical ? 'horizontal' : 'vertical'\" \n [cdkDropListConnectedTo]=\"sectionsColumnsDropList\"\n (cdkDropListDropped)=\"onBlockDropped($event)\"\n [cdkDropListEnterPredicate]=\"canDropPredicate(i)\"\n >\n <section-block *ngIf=\"column.BlockContainer?.BlockKey\" class=\"section-block\" [sectionKey]=\"key\" [blockTemplate]=\"blockTemplate\"\n [blockContainer]=\"column.BlockContainer\" [editable]=\"editable\" [isMainEditorState]=\"isMainEditorState\" [sectionHeight]=\"styleHeight\"\n [active]=\"selectedBlockKey === column.BlockContainer?.BlockKey\" [screenType]=\"screenType\"\n (dragExited)=\"onSectionBlockDragExited($event)\" (dragEntered)=\"onSectionBlockDragEntered($event)\"></section-block>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [".section-container{position:relative;display:grid;height:100%;max-height:inherit;min-height:2.5rem}.section-container.editable-state.default-height{min-height:16rem}.section-container.editable-state.active-section{z-index:11}.section-container.editable-state.active-section .columns-wrapper{z-index:1}.section-container.editable-state.active-section ::ng-deep .block-template-wrapper .block-template{pointer-events:unset!important;opacity:unset!important}.section-container.editable-state.cdk-drag-placeholder{opacity:.5}.section-container.editable-state:not(.cdk-drag-placeholder):hover .section-toolbar,.section-container.editable-state:not(.cdk-drag-placeholder).show-hover-state .section-toolbar{display:block!important}.section-container.editable-state:not(.cdk-drag-preview) .hide-toolbar{display:none}.section-container.editable-state.main-editor-state .mobile .is-hidden{display:none}.section-container.editable-state .mobile .is-hidden{display:block}.section-container.editable-state .section-toolbar{position:absolute;top:0;height:2.625rem;z-index:11}.section-container.editable-state .section-toolbar ::ng-deep .pep-draggable-item-container{border-radius:0 0 var(--pep-border-radius-md, .25rem) 0}.section-container.editable-state .section-background{position:absolute;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(12,1fr)}.section-container.editable-state .section-background .back-template{opacity:.1}.section-container.editable-state .section-background .back-template:last-of-type{border-right:0 none}.section-container .columns-wrapper{display:grid;grid-auto-flow:column;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper.is-dragging{overflow:unset}.section-container .columns-wrapper.gap-none{gap:0}.section-container .columns-wrapper.gap-sm{gap:var(--pep-spacing-sm, .5rem)}.section-container .columns-wrapper.gap-md{gap:var(--pep-spacing-lg, 1rem)}.section-container .columns-wrapper.gap-lg{gap:var(--pep-spacing-2xl, 2rem)}.section-container .columns-wrapper .section-column{position:relative;height:inherit;max-height:inherit;overflow:inherit}.section-container .columns-wrapper .section-column .section-block{height:inherit;max-height:inherit}\n", ".section-container{background:transparent}.section-container.editable-state.active-section{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.active-section .columns-wrapper{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state.section-hidden-state:not(.active-section){background:repeating-linear-gradient(45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem),repeating-linear-gradient(-45deg,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0),hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),0) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .65rem,hsla(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%),.32) .8rem)}.section-container.editable-state.main-editor-state.cdk-drag-preview{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state.cdk-drag-placeholder{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state.main-editor-state.cdk-drag-placeholder:hover,.section-container.editable-state.main-editor-state.cdk-drag-placeholder.show-hover-state{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)!important}.section-container.editable-state.main-editor-state:hover:not(.section-is-dragging),.section-container.editable-state.main-editor-state.show-hover-state:not(.section-is-dragging){box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state.main-editor-state .section-toolbar ::ng-deep .pep-draggable-item-container{box-shadow:0 0 0 .125rem hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .section-background .back-template{background-color:#bec3e5;border-right:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column{border:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper .section-column.active-column{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.section-container.editable-state .columns-wrapper .section-column.cdk-drop-list-dragging{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.section-container.editable-state .columns-wrapper .section-column.already-contains-block:hover{box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsl(var(--pep-color-system-caution-h, 360),var(--pep-color-system-caution-s, 100%),var(--pep-color-system-caution-l, 45%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal{border-left:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).horizontal.cdk-drop-list-dragging{border-left:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical{border-top:unset}.section-container.editable-state .columns-wrapper.gap-none .section-column:not(.section-container.editable-state .columns-wrapper.gap-none .section-column:first-of-type).vertical.cdk-drop-list-dragging{border-top:.125rem dashed hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}\n"] }]
1144
1144
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: LayoutBuilderInternalService }]; }, propDecorators: { sectionContainerRef: [{
1145
1145
  type: ViewChild,
1146
1146
  args: ['sectionContainer']