@pepperi-addons/ngx-composite-lib 0.4.2-beta.202 → 0.4.2-beta.203

package/esm2020/icon-picker/icon-picker.component.mjs

@@ -51,7 +51,7 @@ export class IconPickerComponent {
     }
 }
 IconPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IconPickerComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.PepAddonBlockLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: IconPickerComponent, selector: "pep-icon-picker", inputs: { disabled: "disabled", header: "header", preview_header: "preview_header", select_btn_header: "select_btn_header", dir: "dir", iconURL: "iconURL", useCheckBoxHeader: "useCheckBoxHeader", titleSize: "titleSize" }, outputs: { iconChange: "iconChange", iconDisableChange: "iconDisableChange" }, ngImport: i0, template: "<label *ngIf=\"!useCheckBoxHeader\" class=\"title-{{titleSize}} ellipsis\">{{header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)}}</label>\n<pep-checkbox *ngIf=\"useCheckBoxHeader\" \n        class=\"{{ titleSize === 'xl' ? 'checkbox-as-title' : 'checkbox-as-sub-title' }}\" \n        [value]=\"!disabled\" \n        [label]=\"header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)\" \n        [renderTitle]=\"false\" \n        (valueChange)=\"onUseIconChange($event)\">\n</pep-checkbox>\n<div class=\"main-cont\">\n    <div class=\"selected-cont\">\n        <pep-field-title [label]=\"preview_header !== '' ? preview_header : ('ICON_PICKER_BUTTON.SELECTED' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <!-- <pep-button\n            iconName=\"system_bolt\"\n            [disabled]=\"disabled\">\n           \n        </pep-button> -->\n        <div class=\"pep-button md weak\">\n            <img *ngIf=\"iconURL !== ''\" [src]=\"iconURL\"/>\n        </div>\n    </div>\n    <div class=\"choose-btn-cont\">\n        <pep-field-title [label]=\"select_btn_header !== '' ? select_btn_header : ('ICON_PICKER_BUTTON.CHOOSE_ICON_HEADER' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <pep-button\n            [value]=\"'ICON_PICKER_BUTTON.CHOOSE_ICON' | translate\" \n            styleType=\"regular\"\n            [disabled]=\"disabled\" (buttonClick)=\"openIconPickerDialog()\">\n        </pep-button>\n    </div>\n</div>", styles: [":host{width:100%}.main-cont{display:flex;gap:.5rem;width:100%}.main-cont .selected-cont{width:3.5rem;align-self:end;display:flex;flex-direction:column}.main-cont .selected-cont .pep-button{display:flex;align-items:center}.main-cont .selected-cont .pep-button img{max-height:1.5rem;max-width:1.5rem}.main-cont .choose-btn-cont{width:-webkit-fill-available;align-self:end;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i5.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: IconPickerComponent, selector: "pep-icon-picker", inputs: { disabled: "disabled", header: "header", preview_header: "preview_header", select_btn_header: "select_btn_header", dir: "dir", iconURL: "iconURL", useCheckBoxHeader: "useCheckBoxHeader", titleSize: "titleSize" }, outputs: { iconChange: "iconChange", iconDisableChange: "iconDisableChange" }, ngImport: i0, template: "<label *ngIf=\"!useCheckBoxHeader\" class=\"title-{{titleSize}} ellipsis\">{{header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)}}</label>\n<pep-checkbox *ngIf=\"useCheckBoxHeader\" \n        class=\"{{ titleSize === 'xl' ? 'checkbox-as-title' : 'checkbox-as-sub-title' }}\" \n        [value]=\"!disabled\" \n        [label]=\"header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)\" \n        [renderTitle]=\"false\" \n        (valueChange)=\"onUseIconChange($event)\">\n</pep-checkbox>\n<div class=\"main-cont\">\n    <div class=\"selected-cont\">\n        <pep-field-title [label]=\"preview_header !== '' ? preview_header : ('ICON_PICKER_BUTTON.SELECTED' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <!-- <pep-button\n            iconName=\"system_bolt\"\n            [disabled]=\"disabled\">\n           \n        </pep-button> -->\n        <div class=\"pep-button md weak\">\n            <img *ngIf=\"iconURL !== ''\" [src]=\"iconURL\"/>\n        </div>\n    </div>\n    <div class=\"choose-btn-cont\">\n        <pep-field-title [label]=\"select_btn_header !== '' ? select_btn_header : ('ICON_PICKER_BUTTON.CHOOSE_ICON_HEADER' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <pep-button\n            [value]=\"'ICON_PICKER_BUTTON.CHOOSE_ICON' | translate\" \n            styleType=\"regular\"\n            [disabled]=\"disabled\" (buttonClick)=\"openIconPickerDialog()\">\n        </pep-button>\n    </div>\n</div>", styles: [":host{width:100%}.main-cont{display:flex;gap:.5rem;width:100%}.main-cont .selected-cont{width:3.5rem;align-self:end;display:flex;flex-direction:column}.main-cont .selected-cont .pep-button{display:flex;align-items:center}.main-cont .selected-cont .pep-button img{max-height:1.5rem;max-width:1.5rem}.main-cont .choose-btn-cont{width:-webkit-fill-available;align-self:end;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i5.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "id", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: IconPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-icon-picker', template: "<label *ngIf=\"!useCheckBoxHeader\" class=\"title-{{titleSize}} ellipsis\">{{header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)}}</label>\n<pep-checkbox *ngIf=\"useCheckBoxHeader\" \n        class=\"{{ titleSize === 'xl' ? 'checkbox-as-title' : 'checkbox-as-sub-title' }}\" \n        [value]=\"!disabled\" \n        [label]=\"header !== '' ? header : ('ICON_PICKER_BUTTON.MAIN_HEADER' | translate)\" \n        [renderTitle]=\"false\" \n        (valueChange)=\"onUseIconChange($event)\">\n</pep-checkbox>\n<div class=\"main-cont\">\n    <div class=\"selected-cont\">\n        <pep-field-title [label]=\"preview_header !== '' ? preview_header : ('ICON_PICKER_BUTTON.SELECTED' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <!-- <pep-button\n            iconName=\"system_bolt\"\n            [disabled]=\"disabled\">\n           \n        </pep-button> -->\n        <div class=\"pep-button md weak\">\n            <img *ngIf=\"iconURL !== ''\" [src]=\"iconURL\"/>\n        </div>\n    </div>\n    <div class=\"choose-btn-cont\">\n        <pep-field-title [label]=\"select_btn_header !== '' ? select_btn_header : ('ICON_PICKER_BUTTON.CHOOSE_ICON_HEADER' | translate)\" \n                         [disabled]=\"disabled\" \n                         [xAlignment]=\"dir === 'rtl' ? 'right' : 'left'\">\n        </pep-field-title>\n        <pep-button\n            [value]=\"'ICON_PICKER_BUTTON.CHOOSE_ICON' | translate\" \n            styleType=\"regular\"\n            [disabled]=\"disabled\" (buttonClick)=\"openIconPickerDialog()\">\n        </pep-button>\n    </div>\n</div>", styles: [":host{width:100%}.main-cont{display:flex;gap:.5rem;width:100%}.main-cont .selected-cont{width:3.5rem;align-self:end;display:flex;flex-direction:column}.main-cont .selected-cont .pep-button{display:flex;align-items:center}.main-cont .selected-cont .pep-button img{max-height:1.5rem;max-width:1.5rem}.main-cont .choose-btn-cont{width:-webkit-fill-available;align-self:end;display:flex;flex-direction:column}\n"] }]

package/esm2020/layout-builder/main-editor/main-editor.component.mjs

@@ -113,7 +113,7 @@ export class MainEditorComponent extends BaseDestroyerDirective {
     }
 }
 MainEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", sectionsColumnsDropList: "sectionsColumnsDropList", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange", addSectionClick: "addSectionClick", onBlockDragStart: "onBlockDragStart", onBlockDragEnd: "onBlockDragEnd" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i6.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: i7.PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+MainEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: MainEditorComponent, selector: "main-editor", inputs: { availableBlocksForDrag: "availableBlocksForDrag", sectionsColumnsDropList: "sectionsColumnsDropList", hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange", addSectionClick: "addSectionClick", onBlockDragStart: "onBlockDragStart", onBlockDragEnd: "onBlockDragEnd" }, viewQueries: [{ propertyName: "_topContentRef", first: true, predicate: ["topContentRef"], descendants: true, static: true }, { propertyName: "availableBlocksContainer", first: true, predicate: ["availableBlocksContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i3.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i4.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "id", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.GroupButtonsSettingsComponent, selector: "pep-group-buttons-settings", inputs: ["header", "subHeader", "groupType", "btnsArray", "excludeKeys", "useNone", "disabled", "dir", "titleSize", "bold", "btnKey"], outputs: ["btnkeyChange"] }, { kind: "component", type: i6.PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: ["containerId", "showSearch", "title", "titleType", "titleSizeType", "itemPlaceholderType", "dropAreaIds", "items"], outputs: ["itemDragStarted", "itemDragEnded"] }, { kind: "component", type: i7.PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: MainEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'main-editor', template: "<pep-layout-builder-editor [editorTabs]=\"[\n    {key: '1', title: 'LAYOUT_BUILDER.GENERAL', templateRef: firstTabTemplate}, \n    {key: '2', title: 'LAYOUT_BUILDER.DESIGN', templateRef: secondTabTemplate}]\">\n</pep-layout-builder-editor>\n\n<ng-template #firstTabTemplate let-tabKey=\"tabKey\">\n    <div #topContentRef class=\"layout-builder-editor-group\">\n        <ng-content select=\"[layout-editor-top-content]\"></ng-content>\n        <div *ngIf=\"showTopContent\" class=\"editor-separator\"></div>\n    </div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.SECTIONS_TITLE' | translate}}</label>\n        <pep-button class=\"add-section-button\" value=\"{{'LAYOUT_BUILDER.ADD_SECTION' | translate}}\" styleType=\"regular\" iconName=\"number_plus\" iconPosition=\"end\"\n            (buttonClick)=\"onAddSectionClick($event)\"></pep-button>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-draggable-items class=\"available-blocks\" [containerId]=\"availableBlocksContainerId\" [items]=\"availableBlocksForDrag\" [title]=\"'LAYOUT_BUILDER.BLOCKS_TITLE' | translate\"\n        titleSizeType=\"xl\" titleType=\"with-bottom-border\" [showSearch]=\"true\" [dropAreaIds]=\"sectionsColumnsDropList\" (itemDragStarted)=\"onDragStart($event)\" (itemDragEnded)=\"onDragEnd($event)\">\n    </pep-draggable-items>\n    <!-- <div #bottomContentRef class=\"layout-builder-editor-group\">\n        <div *ngIf=\"showBottomContent\" class=\"editor-separator\"></div>\n        <ng-content select=\"[layout-editor-bottom-content]\"></ng-content>\n    </div> -->\n</ng-template>\n\n<ng-template #secondTabTemplate let-tabKey=\"tabKey\">\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isFullWidth\" [label]=\"'LAYOUT_BUILDER.FULL_WIDTH_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isFullWidthChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.MAX_WIDTH_TITLE' | translate\" type=\"int\" [disabled]=\"isFullWidth\" [value]=\"maxWidth.toString()\" (valueChange)=\"onMaxWidthChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <!-- Spacing -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.SPACING_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SPACING_HORIZONTAL_TITLE' | translate\"\n                                [btnKey]=\"horizontalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsHorizntalGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.SPACING_VERTICAL_TITLE' | translate\"\n                                [btnKey]=\"verticalSpacing.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsVerticalGap($event)\">\n    </pep-group-buttons-settings>\n    <div class=\"editor-separator\"></div>\n    <!-- Gaps -->\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [header]=\"'LAYOUT_BUILDER.GAPS_TITLE' | translate\" [subHeader]=\"'LAYOUT_BUILDER.SECTIONS_GAP_TITLE' | translate\"\n                                [btnKey]=\"sectionsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setSectionGap($event)\">\n    </pep-group-buttons-settings>\n    <pep-group-buttons-settings [groupType]=\"'sizes'\" \n                                [subHeader]=\"'LAYOUT_BUILDER.COLUMNS_GAP_TITLE' | translate\"\n                                [btnKey]=\"columnsGap.toLowerCase()\" [excludeKeys]=\"['xs','xl','2xl']\" [useNone]=\"true\"\n                                (btnkeyChange)=\"setColumnsGap($event)\">\n    </pep-group-buttons-settings>\n    <!-- Rounded Corners -->\n    <!--\n    <div class=\"editor-separator\"></div>\n    <label class=\"editor-title\">{{'LAYOUT_BUILDER.ROUNDED_CORNERS_TITLE' | translate}}</label><br>\n    <label class=\"body-xs ellipsis\">{{'LAYOUT_BUILDER.BORDER_RADIUS_TITLE' | translate}}</label>\n    <pep-group-buttons [buttons]=\"sizesGroupButtons\" [selectedButtonKey]=\"roundedCorners\" buttonsClass=\"ms regular\" viewType=\"toggle\"\n        (buttonClick)=\"setRoundedCorners($event)\"></pep-group-buttons> -->\n</ng-template>\n", styles: [":host pep-draggable-items ::ng-deep .draggable-items-overflow{padding-bottom:0!important}\n"] }]

package/esm2020/layout-builder/section-editor/section-editor.component.mjs

@@ -189,7 +189,7 @@ export class SectionEditorComponent {
     }
 }
 SectionEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
-SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.LAYOUT' | translate}}</label>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-padding-settings \n    [padding]=\"padding\" (paddingChange)=\"onPaddingChange($event)\">\n</pep-padding-settings>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "component", type: i7.PaddingSettingsComponent, selector: "pep-padding-settings", inputs: ["padding"], outputs: ["paddingChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+SectionEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SectionEditorComponent, selector: "section-editor", inputs: { hostObject: "hostObject" }, outputs: { hostObjectChange: "hostObjectChange" }, ngImport: i0, template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.LAYOUT' | translate}}</label>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-padding-settings \n    [padding]=\"padding\" (paddingChange)=\"onPaddingChange($event)\">\n</pep-padding-settings>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "component", type: i3.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "id", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepLayoutBuilderEditorComponent, selector: "pep-layout-builder-editor", inputs: ["editorTabs"] }, { kind: "component", type: i7.PaddingSettingsComponent, selector: "pep-padding-settings", inputs: ["padding"], outputs: ["paddingChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SectionEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section-editor', template: "<pep-layout-builder-editor class=\"section-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <!-- \n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"isAutoHeight\" [label]=\"'LAYOUT_BUILDER.AUTO_HEIGHT_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"isAutoHeightChange($event)\"></pep-checkbox>\n        <pep-textbox [label]=\"'LAYOUT_BUILDER.HEIGHT_TITLE' | translate\" type=\"int\" [minValue]=\"MIN_HEIGHT\" [disabled]=\"isAutoHeight\" [value]=\"height\" (valueChange)=\"onHeightChange($event)\"></pep-textbox> \n    </div>\n    -->\n    <div class=\"editor-separator\"></div>\n    <div>\n        <label class=\"editor-title\">{{'LAYOUT_BUILDER.LAYOUT' | translate}}</label>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-sub-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <pep-padding-settings \n    [padding]=\"padding\" (paddingChange)=\"onPaddingChange($event)\">\n</pep-padding-settings>\n</pep-layout-builder-editor>\n\n<!-- <div class=\"section-editor-container layout-builder-editor-container\">\n    <div>\n        <pep-textbox [value]=\"sectionName\" [label]=\"'LAYOUT_BUILDER.SECTION_NAME_TITLE' | translate\" (valueChange)=\"onSectionNameChange($event)\"></pep-textbox>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"subSections\" [label]=\"'LAYOUT_BUILDER.SUB_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onSubSectionsChange($event)\"></pep-checkbox>\n        <div class=\"split-area\">\n            <pep-select [label]=\"'LAYOUT_BUILDER.SECTIONS_TITLE' | translate\" [value]=\"partsNumber\" [options]=\"partsNumberOptions\" \n                (valueChange)=\"onPartsNumberChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n            <pep-select [label]=\"'LAYOUT_BUILDER.SPLIT_TITLE' | translate\" [value]=\"split || ''\" [options]=\"splitOptions\"\n                (valueChange)=\"onSplitChange($event)\" [emptyOption]=\"false\" [disabled]=\"!subSections\"></pep-select>\n        </div>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"collapseOnTablet\" [label]=\"'LAYOUT_BUILDER.COLLAPSE_ON_TABLET_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onCollapseOnTabletChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.COLLAPSE_ON_TABLET_DESCRIPTION' | translate)}}</span>\n    </div>\n    <div class=\"editor-separator\"></div>\n    <div>\n        <pep-checkbox class=\"checkbox-as-title\" [value]=\"fillHeight\" [label]=\"'LAYOUT_BUILDER.FILL_HEIGHT_SECTION_TITLE' | translate\" [renderTitle]=\"false\" (valueChange)=\"onFillHeightChange($event)\"></pep-checkbox>\n        <span class=\"header-title body-xs\">{{('LAYOUT_BUILDER.FILL_HEIGHT_SECTION_DESCRIPTION' | translate)}}</span>\n    </div>\n</div> -->\n", styles: [".section-editor-container .split-area{display:grid;grid-template-columns:1fr 1fr;gap:var(--pep-spacing-lg, 1rem)}\n"] }]