@pepperi-addons/ngx-composite-lib 0.4.2-beta.8 → 0.4.2-beta.81

package/layout-builder/layout-builder-internal.service.d.ts

@@ -0,0 +1,120 @@
+import { CdkDragDrop, CdkDragEnd, CdkDragStart } from "@angular/cdk/drag-drop";
+import { TranslateService } from "@ngx-translate/core";
+import { PepLayoutService, PepScreenSizeType } from "@pepperi-addons/ngx-lib";
+import { DataViewScreenSize, SplitType } from "@pepperi-addons/papi-sdk";
+import { Observable } from 'rxjs';
+import { PepLayoutEditorType, IPepLayoutBlockAddedEvent, IPepLayoutSection, IPepLayoutSectionColumn, IPepLayoutView, IPepLayoutBlockConfig, PepLayoutSizeType, IEditor } from "./layout-builder.model";
+import { PepDialogService } from "@pepperi-addons/ngx-lib/dialog";
+import * as i0 from "@angular/core";
+export interface ILayoutEditor {
+    maxWidth: number;
+    horizontalSpacing?: PepLayoutSizeType;
+    verticalSpacing?: PepLayoutSizeType;
+    sectionsGap?: PepLayoutSizeType;
+    columnsGap?: PepLayoutSizeType;
+    roundedCorners?: PepLayoutSizeType;
+}
+export interface ILayoutSectionEditor {
+    id: string;
+    sectionName: string;
+    split: SplitType | undefined;
+    height: number;
+    collapseOnTablet: boolean;
+    fillHeight: boolean;
+}
+export declare class LayoutBuilderInternalService {
+    protected translate: TranslateService;
+    protected dialogService: PepDialogService;
+    private layoutService;
+    static readonly AVAILABLE_BLOCKS_CONTAINER_ID = "availableBlocks";
+    static readonly MAIN_EDITOR_ID = "main";
+    private _defaultSectionTitle;
+    private _blocksLimitNumber;
+    private _navigateToEditorAfterBlockAdded;
+    private _getBlockTitle;
+    setBlocksConfig(value: IPepLayoutBlockConfig): void;
+    private _editorsBreadCrumb;
+    private _editMode;
+    get editMode(): boolean;
+    setEditMode(value: boolean): void;
+    private _editableState;
+    get editableState(): boolean;
+    private _screenSizeSubject;
+    get screenSizeChange$(): Observable<PepScreenSizeType | undefined>;
+    private _screenWidthSubject;
+    get screenWidthChange$(): Observable<string>;
+    private _editorSubject;
+    get editorChange$(): Observable<IEditor | null>;
+    private _sectionsColumnsDropListSubject;
+    get sectionsColumnsDropListChange$(): Observable<any[]>;
+    private _sectionsViewSubject;
+    get sectionsChange$(): Observable<IPepLayoutSection[]>;
+    private _layoutViewSubject;
+    get layoutViewChange$(): Observable<IPepLayoutView | null>;
+    private _draggingBlockKey;
+    get draggingBlockKey(): Observable<string>;
+    private _draggingSectionKey;
+    get draggingSectionKey(): Observable<string>;
+    private _lockScreenSubject;
+    get lockScreenChange$(): Observable<boolean>;
+    private _previewModeSubject;
+    get previewModeChange$(): Observable<boolean>;
+    private _blockAddedEventSubject;
+    get blockAddedEventSubject$(): Observable<IPepLayoutBlockAddedEvent | null>;
+    private _blocksRemovedEventSubject;
+    get blocksRemovedEventSubject$(): Observable<string[]>;
+    private _showSkeletonSubject;
+    get showSkeletonChange$(): Observable<boolean>;
+    constructor(translate: TranslateService, dialogService: PepDialogService, layoutService: PepLayoutService);
+    private setEditableState;
+    private notifyLayoutViewChange;
+    private notifyBlockAdded;
+    private notifyBlocksRemoved;
+    private notifyEditorChange;
+    private notifyPreviewModeChange;
+    private notifyLockScreen;
+    private notifySectionsColumnsDropListChange;
+    private notifyScreenSizeChange;
+    private updateLayoutEditorProperties;
+    private loadDefaultEditor;
+    private changeCurrentEditor;
+    private getEditorByType;
+    private getBlockEditor;
+    private getSectionEditorTitle;
+    private getSectionEditor;
+    private getSectionColumnByIdForEditor;
+    private getCssScreenWidh;
+    private getBlocksNumber;
+    private changeCursorOnDragStart;
+    private changeCursorOnDragEnd;
+    /***********************************************************************************************/
+    getBlockTitle(blockKey: string): string;
+    setSectionsColumnsDropListChange(sectionsColumnsDropList: any[]): void;
+    changePreviewMode(value: boolean): void;
+    getCurrentScreenType(): DataViewScreenSize;
+    getScreenType(size: PepScreenSizeType): DataViewScreenSize;
+    getSectionColumnKey(sectionKey?: string, index?: string): string;
+    getIsHidden(hideIn: DataViewScreenSize[] | undefined, currentScreenType: DataViewScreenSize): boolean;
+    navigateToEditor(editorType: PepLayoutEditorType, id: string, title?: string): boolean;
+    navigateBackFromEditor(): void;
+    updateLayoutFromEditor(editorData: ILayoutEditor): void;
+    updateSectionFromEditor(sectionData: ILayoutSectionEditor): void;
+    addSection(section?: IPepLayoutSection | null): void;
+    removeSection(sectionId: string): void;
+    hideSection(sectionId: string, hideIn: DataViewScreenSize[]): void;
+    onSectionDropped(event: CdkDragDrop<any[]>): void;
+    onSectionDragStart(event: CdkDragStart): void;
+    onSectionDragEnd(event: CdkDragEnd): void;
+    removeBlockFromSection(blockId: string): void;
+    hideBlock(sectionId: string, blockId: string, hideIn: DataViewScreenSize[]): void;
+    onBlockDropped(event: CdkDragDrop<IPepLayoutSectionColumn, any, any>, sectionId: string): void;
+    onBlockDragStart(event: CdkDragStart): void;
+    onBlockDragEnd(event: CdkDragEnd): void;
+    doesColumnContainBlock(sectionId: string, columnIndex: number): boolean;
+    setScreenWidth(screenType: DataViewScreenSize): void;
+    showSkeleton(show: boolean): void;
+    lockScreen(value: boolean): void;
+    loadLayoutBuilder(layoutView: IPepLayoutView): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutBuilderInternalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutBuilderInternalService>;
+}

package/layout-builder/layout-builder.component.d.ts

@@ -0,0 +1,50 @@
+import { ElementRef, Renderer2, OnInit, EventEmitter } from '@angular/core';
+import { BaseDestroyerDirective, PepAddonService } from '@pepperi-addons/ngx-lib';
+import { DataViewScreenSize } from '@pepperi-addons/papi-sdk';
+import { TranslateService } from '@ngx-translate/core';
+import { PepButton } from '@pepperi-addons/ngx-lib/button';
+import { IPepSideBarStateChangeEvent } from '@pepperi-addons/ngx-lib/side-bar';
+import { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';
+import { IPepLayoutBlockAddedEvent, IPepLayoutBlockConfig, IEditor } from './layout-builder.model';
+import { ILayoutEditor, ILayoutSectionEditor, LayoutBuilderInternalService } from './layout-builder-internal.service';
+import * as i0 from "@angular/core";
+export declare class PepLayoutBuilderComponent extends BaseDestroyerDirective implements OnInit {
+    private renderer;
+    private hostElement;
+    private translate;
+    private layoutBuilderInternalService;
+    private pepAddonService;
+    layoutBuilderWrapper: ElementRef;
+    private sideBarComponent;
+    private _availableBlocksForDrag;
+    set availableBlocksForDrag(value: Array<IPepDraggableItem>);
+    get availableBlocksForDrag(): Array<IPepDraggableItem>;
+    private _blocksLayoutConfig;
+    set blocksLayoutConfig(value: IPepLayoutBlockConfig);
+    private _layoutEditorTitle;
+    set layoutEditorTitle(value: string);
+    get layoutEditorTitle(): string;
+    backClick: EventEmitter<void>;
+    editorChange: EventEmitter<IEditor>;
+    blockAdded: EventEmitter<IPepLayoutBlockAddedEvent>;
+    blocksRemoved: EventEmitter<string[]>;
+    protected lockScreen: boolean;
+    protected previewMode: boolean;
+    protected currentEditor: IEditor | null;
+    protected viewportWidth: number;
+    protected screenTypes: Array<PepButton>;
+    protected selectedScreenType: DataViewScreenSize;
+    constructor(renderer: Renderer2, hostElement: ElementRef, translate: TranslateService, layoutBuilderInternalService: LayoutBuilderInternalService, pepAddonService: PepAddonService);
+    private setScreenWidth;
+    private updateViewportWidth;
+    private subscribeEvents;
+    ngOnInit(): void;
+    onResize(event: any): void;
+    togglePreviewMode(): void;
+    onSidebarStateChange(event: IPepSideBarStateChangeEvent): void;
+    onLayoutEditorObjectChange(pageEditor: ILayoutEditor): void;
+    onSectionEditorObjectChange(sectionEditor: ILayoutSectionEditor): void;
+    onNavigateBackFromEditor(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutBuilderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepLayoutBuilderComponent, "pep-layout-builder", never, { "availableBlocksForDrag": "availableBlocksForDrag"; "blocksLayoutConfig": "blocksLayoutConfig"; "layoutEditorTitle": "layoutEditorTitle"; }, { "backClick": "backClick"; "editorChange": "editorChange"; "blockAdded": "blockAdded"; "blocksRemoved": "blocksRemoved"; }, never, ["[layout-editor-top-content]", "[block-editor-content]", "[header-end-content]", "[layout-content]"], false>;
+}

package/layout-builder/layout-builder.component.theme.scss

@@ -0,0 +1,57 @@
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins' as ngx-mixins;
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/functions' as ngx-functions;
+
+// set mat tab as fixed tab just on the editors
+.layout-builder-editor-wrapper {
+    ::ng-deep {
+        .page-builder-editor-tabs,
+        .layout-builder-editor-tabs {
+            .mat-tab-header {
+                background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+            }
+        }
+    }
+}
+
+.main-area-container {
+    background: ngx-functions.get-pep-color(color-system-primary, color-tran-10);
+
+    .header-container {
+        background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+        box-shadow: ngx-functions.get-pep-shadow(shadow-sm, regular);
+
+        .header-title {
+            color: ngx-functions.get-pep-color(color-text, color-dimmed);
+        }
+
+        .size-limit-container {
+            @include ngx-mixins.state-weak-default();
+        }
+    }
+
+    &.preview-mode {
+        .header-container {
+            background: unset;
+            // box-shadow: unset;
+            background-color: ngx-functions.get-pep-color(color-text, color-caution);
+            
+            .preview-title,
+            .color-link {
+                color: ngx-functions.get-pep-color(color-text, color-invert);
+            }
+        }
+
+        .layout-builder-wrapper {
+            overflow: auto;
+        }
+    }
+
+    .layout-builder-wrapper {
+        background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+        box-shadow: ngx-functions.get-pep-shadow(shadow-md, regular);
+
+        .backdrop {
+            background: ngx-functions.get-pep-color(color-system-primary, color-tran-70);
+        }
+    }
+}

package/layout-builder/layout-builder.model.d.ts

@@ -0,0 +1,44 @@
+import { PageBlockContainer, PageLayout, PageSection, PageSectionColumn, PageSizeType } from "@pepperi-addons/papi-sdk";
+import { IPepDraggableItem } from "@pepperi-addons/ngx-lib/draggable-items";
+import { TemplateRef } from "@angular/core";
+export declare type PepLayoutSizeType = PageSizeType;
+export interface IPepLayoutView {
+    Layout: IPepLayout;
+}
+export interface IPepLayout extends PageLayout {
+    Sections: IPepLayoutSection[];
+    VerticalSpacing?: PepLayoutSizeType;
+    HorizontalSpacing?: PepLayoutSizeType;
+    SectionsGap?: PepLayoutSizeType;
+    ColumnsGap?: PepLayoutSizeType;
+}
+export interface IPepLayoutSection extends PageSection {
+    Columns: IPepLayoutSectionColumn[];
+    ColumnsGap?: PepLayoutSizeType;
+}
+export interface IPepLayoutSectionColumn extends PageSectionColumn {
+    BlockContainer?: IPepLayoutBlockContainer;
+}
+export interface IPepLayoutBlockContainer extends PageBlockContainer {
+}
+export interface IPepLayoutBlockConfig {
+    navigateToEditorAfterBlockAdded?: boolean;
+    blocksLimitNumber?: number;
+    getBlockTitle?: (blockKey: string) => string;
+}
+export interface IPepLayoutBlockAddedEvent {
+    BlockKey: string;
+    DraggableItem: IPepDraggableItem;
+}
+export interface IEditor {
+    id: string;
+    title: string;
+    type: PepLayoutEditorType;
+    hostObject?: any;
+}
+export declare type PepLayoutEditorType = 'layout-builder' | 'section' | 'block';
+export interface IPepEditorTab {
+    key: string;
+    title: string;
+    templateRef: TemplateRef<any> | undefined;
+}

package/layout-builder/layout-builder.module.d.ts

@@ -0,0 +1,32 @@
+import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
+import * as i0 from "@angular/core";
+import * as i1 from "./layout-builder.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/drag-drop";
+import * as i4 from "@angular/material/core";
+import * as i5 from "@angular/material/tabs";
+import * as i6 from "@pepperi-addons/ngx-lib";
+import * as i7 from "@pepperi-addons/ngx-lib/dialog";
+import * as i8 from "@pepperi-addons/ngx-lib/icon";
+import * as i9 from "@pepperi-addons/ngx-lib/page-layout";
+import * as i10 from "@pepperi-addons/ngx-lib/side-bar";
+import * as i11 from "@pepperi-addons/ngx-lib/button";
+import * as i12 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i13 from "@pepperi-addons/ngx-lib/textbox";
+import * as i14 from "@pepperi-addons/ngx-lib/select";
+import * as i15 from "@pepperi-addons/ngx-lib/size-detector";
+import * as i16 from "@pepperi-addons/ngx-lib/group-buttons";
+import * as i17 from "@pepperi-addons/ngx-lib/draggable-items";
+import * as i18 from "@pepperi-addons/ngx-composite-lib/group-buttons-settings";
+import * as i19 from "./hide-in/hide-in.module";
+import * as i20 from "./layout/layout.module";
+import * as i21 from "./main-editor/main-editor.module";
+import * as i22 from "./section-editor/section-editor.module";
+import * as i23 from "./layout-builder-editor/layout-builder-editor.module";
+export declare class PepLayoutBuilderModule {
+    private pepIconRegistry;
+    constructor(pepIconRegistry: PepIconRegistry);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutBuilderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepLayoutBuilderModule, [typeof i1.PepLayoutBuilderComponent], [typeof i2.CommonModule, typeof i3.DragDropModule, typeof i4.MatCommonModule, typeof i5.MatTabsModule, typeof i6.PepNgxLibModule, typeof i7.PepDialogModule, typeof i8.PepIconModule, typeof i9.PepPageLayoutModule, typeof i10.PepSideBarModule, typeof i11.PepButtonModule, typeof i12.PepCheckboxModule, typeof i13.PepTextboxModule, typeof i14.PepSelectModule, typeof i15.PepSizeDetectorModule, typeof i16.PepGroupButtonsModule, typeof i17.PepDraggableItemsModule, typeof i18.PepGroupButtonsSettingsModule, typeof i19.HideInModule, typeof i20.PepLayoutModule, typeof i21.MainEditorModule, typeof i22.SectionEditorModule, typeof i23.PepLayoutBuilderEditorModule], [typeof i1.PepLayoutBuilderComponent, typeof i20.PepLayoutModule, typeof i23.PepLayoutBuilderEditorModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepLayoutBuilderModule>;
+}

package/layout-builder/layout-builder.service.d.ts

@@ -0,0 +1,15 @@
+import { DataViewScreenSize } from "@pepperi-addons/papi-sdk";
+import { LayoutBuilderInternalService } from "./layout-builder-internal.service";
+import * as i0 from "@angular/core";
+export declare class PepLayoutBuilderService {
+    private layoutBuilderInternalService;
+    get editMode(): boolean;
+    get editableState(): boolean;
+    constructor(layoutBuilderInternalService: LayoutBuilderInternalService);
+    getCurrentScreenType(): DataViewScreenSize;
+    getIsHidden(hideIn: DataViewScreenSize[] | undefined, currentScreenType: DataViewScreenSize): boolean;
+    showSkeleton(show: boolean): void;
+    lockScreen(lock: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutBuilderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PepLayoutBuilderService>;
+}

package/layout-builder/main-editor/main-editor.component.d.ts

@@ -0,0 +1,46 @@
+import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
+import { AfterContentInit, ElementRef, Renderer2 } from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import { BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';
+import { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';
+import { PepLayoutSizeType } from '../layout-builder.model';
+import { ILayoutEditor, LayoutBuilderInternalService } from '../layout-builder-internal.service';
+import * as i0 from "@angular/core";
+export declare class MainEditorComponent extends BaseDestroyerDirective implements OnInit, AfterContentInit {
+    private layoutBuilderInternalService;
+    private hostElement;
+    private renderer;
+    _topContentRef: ElementRef;
+    availableBlocksContainer: ElementRef;
+    availableBlocksForDrag: Array<IPepDraggableItem>;
+    private _hostObject;
+    set hostObject(value: ILayoutEditor);
+    get hostObject(): ILayoutEditor;
+    hostObjectChange: EventEmitter<ILayoutEditor>;
+    protected isFullWidth: boolean;
+    protected maxWidth: number;
+    protected horizontalSpacing: PepLayoutSizeType;
+    protected verticalSpacing: PepLayoutSizeType;
+    protected sectionsGap: PepLayoutSizeType;
+    protected columnsGap: PepLayoutSizeType;
+    protected roundedCorners: PepLayoutSizeType;
+    protected availableBlocksContainerId: string;
+    protected sectionsColumnsDropList: never[];
+    protected showTopContent: boolean;
+    constructor(layoutBuilderInternalService: LayoutBuilderInternalService, hostElement: ElementRef, renderer: Renderer2);
+    private updateHostObject;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    onAddSectionClick(event: any): void;
+    isFullWidthChange(isChecked: boolean): void;
+    onMaxWidthChange(maxWidth: string): void;
+    setColumnsHorizntalGap(key: string): void;
+    setColumnsVerticalGap(key: string): void;
+    setSectionGap(key: string): void;
+    setColumnsGap(key: string): void;
+    setRoundedCorners(key: string): void;
+    onDragStart(event: CdkDragStart): void;
+    onDragEnd(event: CdkDragEnd): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MainEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainEditorComponent, "main-editor", never, { "availableBlocksForDrag": "availableBlocksForDrag"; "hostObject": "hostObject"; }, { "hostObjectChange": "hostObjectChange"; }, never, ["[layout-editor-top-content]"], false>;
+}

package/layout-builder/main-editor/main-editor.module.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./main-editor.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/common/http";
+import * as i4 from "@angular/cdk/drag-drop";
+import * as i5 from "@angular/cdk/overlay";
+import * as i6 from "@angular/material/tabs";
+import * as i7 from "@angular/material/slider";
+import * as i8 from "@pepperi-addons/ngx-lib";
+import * as i9 from "@pepperi-addons/ngx-lib/select";
+import * as i10 from "@pepperi-addons/ngx-lib/textbox";
+import * as i11 from "@pepperi-addons/ngx-lib/button";
+import * as i12 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i13 from "@pepperi-addons/ngx-lib/group-buttons";
+import * as i14 from "@pepperi-addons/ngx-lib/color";
+import * as i15 from "@pepperi-addons/ngx-lib/image";
+import * as i16 from "@pepperi-addons/ngx-composite-lib/group-buttons-settings";
+import * as i17 from "@pepperi-addons/ngx-lib/draggable-items";
+import * as i18 from "@pepperi-addons/ngx-lib/dialog";
+import * as i19 from "../layout-builder-editor/layout-builder-editor.module";
+import * as i20 from "@ngx-translate/core";
+export declare class MainEditorModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<MainEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MainEditorModule, [typeof i1.MainEditorComponent], [typeof i2.CommonModule, typeof i3.HttpClientModule, typeof i4.DragDropModule, typeof i5.OverlayModule, typeof i6.MatTabsModule, typeof i7.MatSliderModule, typeof i8.PepNgxLibModule, typeof i9.PepSelectModule, typeof i10.PepTextboxModule, typeof i11.PepButtonModule, typeof i12.PepCheckboxModule, typeof i13.PepGroupButtonsModule, typeof i14.PepColorModule, typeof i15.PepImageModule, typeof i16.PepGroupButtonsSettingsModule, typeof i17.PepDraggableItemsModule, typeof i18.PepDialogModule, typeof i19.PepLayoutBuilderEditorModule, typeof i20.TranslateModule], [typeof i1.MainEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MainEditorModule>;
+}

package/layout-builder/public-api.d.ts

@@ -0,0 +1,8 @@
+export * from './layout-builder.module';
+export * from './layout-builder.model';
+export * from './layout-builder.service';
+export * from './layout-builder.component';
+export * from './layout-builder-editor/layout-builder-editor.module';
+export * from './layout-builder-editor/layout-builder-editor.component';
+export * from './layout/layout.module';
+export * from './layout/layout.component';

package/layout-builder/section/section.component.d.ts

@@ -0,0 +1,75 @@
+import { ElementRef, OnInit, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragEnter, CdkDragExit, CdkDragStart, CdkDropList } from '@angular/cdk/drag-drop';
+import { DataViewScreenSize, SplitType } from '@pepperi-addons/papi-sdk';
+import { BaseDestroyerDirective, PepScreenSizeType } from '@pepperi-addons/ngx-lib';
+import { LayoutBuilderInternalService } from '../layout-builder-internal.service';
+import { IPepLayoutSectionColumn, PepLayoutSizeType } from '../layout-builder.model';
+import * as i0 from "@angular/core";
+export declare class SectionComponent extends BaseDestroyerDirective implements OnInit {
+    private renderer;
+    private layoutBuilderInternalService;
+    sectionContainerRef: ElementRef;
+    columnsElementRef: QueryList<ElementRef>;
+    blockTemplate: TemplateRef<any> | undefined;
+    key: string;
+    name: string;
+    private _split;
+    set split(value: SplitType | undefined);
+    get split(): SplitType | undefined;
+    private _height;
+    set height(value: number | undefined);
+    get height(): number | undefined;
+    private _collapseOnTablet;
+    set collapseOnTablet(value: boolean);
+    get collapseOnTablet(): boolean;
+    private _columns;
+    set columns(value: Array<IPepLayoutSectionColumn>);
+    get columns(): Array<IPepLayoutSectionColumn>;
+    private _hideIn;
+    set hideIn(value: DataViewScreenSize[]);
+    get hideIn(): DataViewScreenSize[];
+    columnsGap: PepLayoutSizeType;
+    styleMaxHeight: string;
+    styleHeight: string;
+    protected sectionsColumnsDropList: string[];
+    protected get editable(): boolean;
+    private _screenSize;
+    protected set screenSize(value: PepScreenSizeType);
+    protected get screenSize(): PepScreenSizeType;
+    protected sectionColumnKeyPrefix: string;
+    protected isMainEditorState: boolean;
+    protected isEditing: boolean;
+    protected selectedSectionKey: string;
+    protected selectedBlockKey: string;
+    protected containsBlocks: boolean;
+    protected shouldSetDefaultHeight: boolean;
+    protected pepScreenSizeToFlipToVertical: PepScreenSizeType;
+    protected screenType: DataViewScreenSize;
+    protected hideForCurrentScreenType: boolean;
+    protected draggingBlockKey: string;
+    protected draggingSectionKey: string;
+    protected hoverState: boolean;
+    constructor(renderer: Renderer2, layoutBuilderInternalService: LayoutBuilderInternalService);
+    private calculateIfSectionContainsBlocks;
+    private setScreenType;
+    private setIfHideForCurrentScreenType;
+    private getCssSplitString;
+    private refreshSplit;
+    private setStyleHeight;
+    getIsDragging(): boolean;
+    getIsHidden(hideIn: DataViewScreenSize[] | undefined, currentScreenType: DataViewScreenSize): boolean;
+    ngOnInit(): void;
+    onEditSectionClick(): void;
+    onRemoveSectionClick(): void;
+    onHideSectionChange(hideIn: DataViewScreenSize[]): void;
+    onHideInMenuOpened(): void;
+    onHideInMenuClosed(): void;
+    onBlockDropped(event: CdkDragDrop<IPepLayoutSectionColumn, any, any>): void;
+    canDropPredicate(columnIndex: number): (drag: CdkDrag, drop: CdkDropList) => boolean;
+    onDragStart(event: CdkDragStart): void;
+    onDragEnd(event: CdkDragEnd): void;
+    onSectionBlockDragExited(event: CdkDragExit): void;
+    onSectionBlockDragEntered(event: CdkDragEnter): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "section", never, { "blockTemplate": "blockTemplate"; "key": "key"; "name": "name"; "split": "split"; "height": "height"; "collapseOnTablet": "collapseOnTablet"; "columns": "columns"; "hideIn": "hideIn"; "columnsGap": "columnsGap"; }, {}, never, never, false>;
+}

package/layout-builder/section/section.component.theme.scss

@@ -0,0 +1,115 @@
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins' as ngx-mixins;
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/functions' as ngx-functions;
+
+@use '../mixins.scss' as mix;
+
+.section-container {
+    // background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+    background: transparent;
+
+    // This css is only for edit mode.
+    &.editable-state {
+        $color-caution: ngx-functions.get-pep-color(color-text, color-caution);
+        $color-system-primary: ngx-functions.get-pep-color(color-system-primary, color-base);
+        
+        &.active-section {
+            background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+            @include ngx-mixins.focus();
+
+            .columns-wrapper {
+                background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+            }
+        }
+
+        // For section hidden state
+        &.section-hidden-state {
+            // If the current section is not active (his editor after edit click)
+            &:not(.active-section) {
+                @include ngx-mixins.pep-cross-hatch();
+            }
+        }
+        
+        // Only in main editor state show focus colors.
+        &.main-editor-state {
+            &.cdk-drag-preview {
+                @include ngx-mixins.focus(false, $color-caution, mix.$border-width);
+            }
+            
+            &.cdk-drag-placeholder {
+                @include ngx-mixins.focus();
+
+                &:hover,
+                &.show-hover-state {
+                    @include ngx-mixins.focus(true);
+                }
+            }
+
+            &:hover,
+            &.show-hover-state {
+                &:not(.section-is-dragging) {
+                    @include ngx-mixins.focus(false, $color-caution, mix.$border-width);
+                }
+            }
+
+            .section-toolbar {
+                ::ng-deep.pep-draggable-item-container {
+                    @include ngx-mixins.focus(false, $color-caution, mix.$border-width);
+                }
+            }
+        }
+        
+        .section-background {
+            .back-template {
+                background-color: #BEC3E5;
+                @include mix.dash-border(border-right, mix.$border-width, $color-system-primary);
+            }
+        }
+
+        .columns-wrapper {
+            .section-column {
+                @include mix.dash-border(border, mix.$border-width, $color-system-primary);
+
+                &.active-column {
+                    background: ngx-functions.get-pep-color(color-system-primary-invert, color-base);
+                }
+
+                // &.cdk-drop-list-receivin - can recive block
+                // &.cdk-drop-list-dragging - the block is dragging on this area.
+                &.cdk-drop-list-dragging {
+                    @include ngx-mixins.focus();
+                }
+                
+                // When section column already contains block show on hover caution focus.
+                &.already-contains-block {
+                    &:hover {
+                        @include ngx-mixins.focus(false, $color-caution);
+                    }
+                }
+            }
+
+            // Only if there is no gap remove the double border.
+            &.gap-none {
+                .section-column {
+                    // Remove the border for no dupplicate.
+                    &:not(&:first-of-type) {
+                        &.horizontal {
+                            border-left: unset;
+                            
+                            &.cdk-drop-list-dragging {
+                                @include mix.dash-border(border-left, mix.$border-width, $color-system-primary);
+                            }
+                        }
+
+                        &.vertical {
+                            border-top: unset;
+                            
+                            &.cdk-drop-list-dragging {
+                                @include mix.dash-border(border-top, mix.$border-width, $color-system-primary);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/layout-builder/section/section.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./section.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/drag-drop";
+import * as i4 from "@pepperi-addons/ngx-lib/button";
+import * as i5 from "../section-block/section-block.module";
+import * as i6 from "../hide-in/hide-in.module";
+import * as i7 from "@pepperi-addons/ngx-lib/draggable-items";
+import * as i8 from "@ngx-translate/core";
+export declare class SectionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SectionModule, [typeof i1.SectionComponent], [typeof i2.CommonModule, typeof i3.DragDropModule, typeof i4.PepButtonModule, typeof i5.SectionBlockModule, typeof i6.HideInModule, typeof i7.PepDraggableItemsModule, typeof i8.TranslateModule], [typeof i1.SectionComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionModule>;
+}

package/layout-builder/section-block/section-block.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { CdkDragEnd, CdkDragEnter, CdkDragExit, CdkDragStart } from '@angular/cdk/drag-drop';
+import { DataViewScreenSize } from '@pepperi-addons/papi-sdk';
+import { BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';
+import { LayoutBuilderInternalService } from '../layout-builder-internal.service';
+import { IPepLayoutBlockContainer } from '../layout-builder.model';
+import * as i0 from "@angular/core";
+export declare class SectionBlockComponent extends BaseDestroyerDirective implements OnInit {
+    private layoutBuilderInternalService;
+    blockTemplate: TemplateRef<any> | undefined;
+    sectionKey: string;
+    sectionHeight: string;
+    isMainEditorState: boolean;
+    editable: boolean;
+    active: boolean;
+    private _blockContainer;
+    set blockContainer(value: IPepLayoutBlockContainer | undefined);
+    get blockContainer(): IPepLayoutBlockContainer | undefined;
+    private _screenType;
+    set screenType(value: DataViewScreenSize);
+    get screenType(): DataViewScreenSize;
+    dragExited: EventEmitter<CdkDragExit>;
+    dragEntered: EventEmitter<CdkDragEnter>;
+    protected hideForCurrentScreenType: boolean;
+    protected blockTitle: string;
+    constructor(layoutBuilderInternalService: LayoutBuilderInternalService);
+    private setIfHideForCurrentScreenType;
+    ngOnInit(): void;
+    onEditBlockClick(): void;
+    onRemoveBlockClick(): void;
+    onHideBlockChange(hideIn: DataViewScreenSize[]): void;
+    onDragStart(event: CdkDragStart): void;
+    onDragEnd(event: CdkDragEnd): void;
+    onDragExited(event: CdkDragExit): void;
+    onDragEntered(event: CdkDragEnter): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionBlockComponent, "section-block", never, { "blockTemplate": "blockTemplate"; "sectionKey": "sectionKey"; "sectionHeight": "sectionHeight"; "isMainEditorState": "isMainEditorState"; "editable": "editable"; "active": "active"; "blockContainer": "blockContainer"; "screenType": "screenType"; }, { "dragExited": "dragExited"; "dragEntered": "dragEntered"; }, never, never, false>;
+}