@pepperi-addons/ngx-composite-lib 0.4.2-beta.194 → 0.4.2-beta.197

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

@@ -0,0 +1,43 @@
+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 declare type IPepLayoutBlockContainer = 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-builder2/layout-builder.module.d.ts

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

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

@@ -0,0 +1,24 @@
+import { DataViewScreenSize } from "@pepperi-addons/papi-sdk";
+import * as i0 from "@angular/core";
+export declare class PepLayoutBuilderService {
+    constructor();
+    getIsHidden(hideIn: DataViewScreenSize[] | undefined, currentScreenType: DataViewScreenSize): boolean;
+    /**
+     * Deprecated
+     */
+    getCurrentScreenType(): DataViewScreenSize;
+    /**
+     * Deprecated
+     */
+    getEditableState(): boolean;
+    /**
+     * Deprecated
+     */
+    showSkeleton(show: boolean): void;
+    /**
+     * Deprecated
+     */
+    lockScreen(lock: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutBuilderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PepLayoutBuilderService>;
+}

package/layout-builder2/layout-content.directive.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class PepLayoutContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PepLayoutContentDirective, "[layout-content]", never, {}, {}, never, never, false>;
+}

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

@@ -0,0 +1,52 @@
+import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
+import { ElementRef, Renderer2 } from '@angular/core';
+import { AfterViewChecked, EventEmitter, OnInit } 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 } from '../layout-builder-internal.service';
+import * as i0 from "@angular/core";
+export declare class MainEditorComponent extends BaseDestroyerDirective implements AfterViewChecked, OnInit {
+    private hostElement;
+    private renderer;
+    private layoutEditorTopHost?;
+    availableBlocksContainer: ElementRef;
+    availableBlocksForDrag: Array<IPepDraggableItem>;
+    sectionsColumnsDropList: never[];
+    private _layoutEditorTopElement;
+    set layoutEditorTopElement(value: HTMLElement | null);
+    get layoutEditorTopElement(): HTMLElement | null;
+    private _hostObject;
+    set hostObject(value: ILayoutEditor);
+    get hostObject(): ILayoutEditor;
+    hostObjectChange: EventEmitter<ILayoutEditor>;
+    addSectionClick: EventEmitter<void>;
+    onBlockDragStart: EventEmitter<CdkDragStart>;
+    onBlockDragEnd: EventEmitter<CdkDragEnd>;
+    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 showTopContent: boolean;
+    constructor(hostElement: ElementRef, renderer: Renderer2);
+    private mountLayoutEditorTopElement;
+    private updateHostObject;
+    ngOnInit(): void;
+    ngAfterViewChecked(): 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"; "sectionsColumnsDropList": "sectionsColumnsDropList"; "layoutEditorTopElement": "layoutEditorTopElement"; "hostObject": "hostObject"; }, { "hostObjectChange": "hostObjectChange"; "addSectionClick": "addSectionClick"; "onBlockDragStart": "onBlockDragStart"; "onBlockDragEnd": "onBlockDragEnd"; }, never, never, false>;
+}

package/layout-builder2/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-builder2/public-api.d.ts

@@ -0,0 +1,9 @@
+export * from './layout-builder.module';
+export * from './layout-builder.model';
+export * from './layout-builder.service';
+export * from './layout-builder.component';
+export * from './layout-content.directive';
+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-builder2/section/section.component.d.ts

@@ -0,0 +1,86 @@
+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 { PepPaddingSettings } from '@pepperi-addons/ngx-composite-lib/padding-settings';
+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;
+    blockTemplateRenderer: ((host: HTMLElement, blockKey: string) => void) | null;
+    blockTemplateUnmount: ((host: HTMLElement) => void) | null;
+    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 _padding;
+    set padding(value: PepPaddingSettings | undefined);
+    get padding(): PepPaddingSettings;
+    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;
+    protected isHorizontalView: boolean;
+    constructor(renderer: Renderer2, layoutBuilderInternalService: LayoutBuilderInternalService);
+    private calculateIfSectionContainsBlocks;
+    private setScreenType;
+    private setIfHideForCurrentScreenType;
+    private getCssGridColumn;
+    private setSectionColumnStyle;
+    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;
+    getPadding(): {
+        padding: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "section", never, { "blockTemplate": "blockTemplate"; "blockTemplateRenderer": "blockTemplateRenderer"; "blockTemplateUnmount": "blockTemplateUnmount"; "key": "key"; "name": "name"; "split": "split"; "height": "height"; "collapseOnTablet": "collapseOnTablet"; "padding": "padding"; "columns": "columns"; "hideIn": "hideIn"; "columnsGap": "columnsGap"; }, {}, never, never, false>;
+}

package/layout-builder2/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-builder2/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-builder2/section-block/section-block.component.d.ts

@@ -0,0 +1,48 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnInit, SimpleChanges, 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, OnChanges, AfterViewInit {
+    private layoutBuilderInternalService;
+    blockTemplate: TemplateRef<any> | undefined;
+    blockTemplateRenderer: ((host: HTMLElement, blockKey: string) => void) | null;
+    blockTemplateUnmount: ((host: HTMLElement) => void) | null;
+    sectionKey: string;
+    sectionHeight: string;
+    isMainEditorState: boolean;
+    editable: boolean;
+    active: boolean;
+    private blockTemplateHost?;
+    private viewInitialized;
+    private _blockContainer;
+    set blockContainer(value: IPepLayoutBlockContainer | undefined);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private renderExternalTemplateIfNeeded;
+    private unmountExternalTemplate;
+    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;
+    private lastRenderedBlockKey;
+    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"; "blockTemplateRenderer": "blockTemplateRenderer"; "blockTemplateUnmount": "blockTemplateUnmount"; "sectionKey": "sectionKey"; "sectionHeight": "sectionHeight"; "isMainEditorState": "isMainEditorState"; "editable": "editable"; "active": "active"; "blockContainer": "blockContainer"; "screenType": "screenType"; }, { "dragExited": "dragExited"; "dragEntered": "dragEntered"; }, never, never, false>;
+}

package/layout-builder2/section-block/section-block.component.theme.scss

@@ -0,0 +1,13 @@
+@use '@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins' as ngx-mixins;
+
+.section-block-container {
+    &.editable-state {
+
+        // If the current block is not active (his editor after edit click)
+        &.block-hidden-state {
+            &:not(.active-block) {
+                @include ngx-mixins.pep-cross-hatch();
+            }
+        }
+    }
+}

package/layout-builder2/section-block/section-block.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./section-block.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 "@pepperi-addons/ngx-lib/draggable-items";
+export declare class SectionBlockModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionBlockModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SectionBlockModule, [typeof i1.SectionBlockComponent], [typeof i2.CommonModule, typeof i3.DragDropModule, typeof i4.PepButtonModule, typeof i5.PepDraggableItemsModule], [typeof i1.SectionBlockComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionBlockModule>;
+}

package/layout-builder2/section-editor/section-editor.component.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { IPepOption } from '@pepperi-addons/ngx-lib';
+import { SplitType } from '@pepperi-addons/papi-sdk';
+import { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';
+import { ILayoutSectionEditor } from '../layout-builder-internal.service';
+import { PepPaddingSettings } from '@pepperi-addons/ngx-composite-lib/padding-settings';
+import * as i0 from "@angular/core";
+export interface ISplitOption {
+    key: SplitType;
+    value: string;
+}
+export interface IAllSplitOption {
+    key: string;
+    value: Array<ISplitOption>;
+}
+export declare class SectionEditorComponent implements OnInit {
+    private translate;
+    private dialog;
+    readonly MIN_HEIGHT = 40;
+    private _hostObject;
+    set hostObject(value: ILayoutSectionEditor);
+    get hostObject(): ILayoutSectionEditor;
+    sectionName: string;
+    private _split;
+    set split(value: SplitType | undefined);
+    get split(): SplitType | undefined;
+    isAutoHeight: boolean;
+    height: number;
+    hostObjectChange: EventEmitter<ILayoutSectionEditor>;
+    collapseOnTablet: boolean;
+    fillHeight: boolean;
+    subSections: boolean;
+    partsNumber: string;
+    partsNumberOptions: IPepOption[];
+    splitOptions: ISplitOption[];
+    allSplitOptions: IAllSplitOption[];
+    padding: PepPaddingSettings;
+    constructor(translate: TranslateService, dialog: PepDialogService);
+    private initData;
+    private loadSplitOptions;
+    private updateHostObject;
+    ngOnInit(): void;
+    isAutoHeightChange(isChecked: boolean): void;
+    onHeightChange(height: number): void;
+    onSectionNameChange(value: string): void;
+    onCollapseOnTabletChange(value: boolean): void;
+    onFillHeightChange(value: boolean): void;
+    onPaddingChange(value: PepPaddingSettings): void;
+    onSubSectionsChange(value: boolean): void;
+    onPartsNumberChange(key: string): void;
+    showDeleteSectionMsg(continueCB: () => void, cancelCB: () => void): void;
+    onSplitChange(key: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionEditorComponent, "section-editor", never, { "hostObject": "hostObject"; }, { "hostObjectChange": "hostObjectChange"; }, never, never, false>;
+}

package/layout-builder2/section-editor/section-editor.module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./section-editor.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@pepperi-addons/ngx-lib/button";
+import * as i4 from "@pepperi-addons/ngx-lib/textbox";
+import * as i5 from "@pepperi-addons/ngx-lib/select";
+import * as i6 from "@pepperi-addons/ngx-lib/checkbox";
+import * as i7 from "../layout-builder-editor/layout-builder-editor.module";
+import * as i8 from "@pepperi-addons/ngx-composite-lib/padding-settings";
+import * as i9 from "@ngx-translate/core";
+export declare class SectionEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SectionEditorModule, [typeof i1.SectionEditorComponent], [typeof i2.CommonModule, typeof i3.PepButtonModule, typeof i4.PepTextboxModule, typeof i5.PepSelectModule, typeof i6.PepCheckboxModule, typeof i7.PepLayoutBuilderEditorModule, typeof i8.PepPaddingSettingsModule, typeof i9.TranslateModule], [typeof i1.SectionEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionEditorModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib",
-  "version": "0.4.2-beta.194",
+  "version": "0.4.2-beta.197",
   "peerDependencies": {
     "@angular/animations": ">= 14.0.2",
     "@angular/cdk": ">= 14.0.2",
@@ -13,7 +13,7 @@
     "@angular/platform-browser-dynamic": ">= 14.0.2",
     "@ngx-translate/core": ">= ^14.0.0",
     "@ngx-translate/http-loader": ">= ^7.0.0",
-    "@pepperi-addons/ngx-lib": ">= ^0.4.2-beta.261",
+    "@pepperi-addons/ngx-lib": ">=0.4.2-beta.302",
     "@pepperi-addons/papi-sdk": ">= 1.81.25",
     "ngx-translate-multi-http-loader": ">= ^3.0.0",
     "rxjs": ">= 6.5.5"
@@ -139,6 +139,14 @@
       "node": "./fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs",
       "default": "./fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs"
     },
+    "./layout-builder2": {
+      "types": "./layout-builder2/index.d.ts",
+      "esm2020": "./esm2020/layout-builder2/pepperi-addons-ngx-composite-lib-layout-builder2.mjs",
+      "es2020": "./fesm2020/pepperi-addons-ngx-composite-lib-layout-builder2.mjs",
+      "es2015": "./fesm2015/pepperi-addons-ngx-composite-lib-layout-builder2.mjs",
+      "node": "./fesm2015/pepperi-addons-ngx-composite-lib-layout-builder2.mjs",
+      "default": "./fesm2020/pepperi-addons-ngx-composite-lib-layout-builder2.mjs"
+    },
     "./manage-parameters": {
       "types": "./manage-parameters/index.d.ts",
       "esm2020": "./esm2020/manage-parameters/pepperi-addons-ngx-composite-lib-manage-parameters.mjs",