@pepperi-addons/ngx-composite-lib 0.4.2-beta.7 → 0.4.2-beta.70

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

@@ -0,0 +1,51 @@
+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 { IEditor, ILayoutEditor, ILayoutSectionEditor, IPepLayoutBlockAddedEvent } from './layout-builder.model';
+import { 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 layoutBuilderService;
+    private pepAddonService;
+    layoutBuilderWrapper: ElementRef;
+    private sideBarComponent;
+    private _availableBlocksForDrag;
+    set availableBlocksForDrag(value: Array<IPepDraggableItem>);
+    get availableBlocksForDrag(): Array<IPepDraggableItem>;
+    private _blocksLimitNumber;
+    set blocksLimitNumber(value: number);
+    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, layoutBuilderService: LayoutBuilderInternalService, pepAddonService: PepAddonService);
+    private setScreenWidth;
+    private updateViewportWidth;
+    private setLayoutEditorTitle;
+    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"; "blocksLimitNumber": "blocksLimitNumber"; "layoutEditorTitle": "layoutEditorTitle"; }, { "backClick": "backClick"; "editorChange": "editorChange"; "blockAdded": "blockAdded"; "blocksRemoved": "blocksRemoved"; }, never, ["[layout-editor-top-content]", "[layout-editor-bottom-content]", "[block-editor-content]", "[header-end-content]", "[layout-content]"], false>;
+}

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

@@ -0,0 +1,56 @@
+@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 {
+        .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,51 @@
+import { PageBlockContainer, PageLayout, PageSection, PageSectionColumn, PageSizeType, SplitType } from "@pepperi-addons/papi-sdk";
+import { IPepDraggableItem } from "@pepperi-addons/ngx-lib/draggable-items";
+export declare type PepLayoutSizeType = PageSizeType;
+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 {
+    DraggableItemKey: string;
+}
+export interface IPepLayoutBlockAddedEvent {
+    BlockKey: string;
+    DraggableItem: IPepDraggableItem;
+}
+export interface IPepLayoutView {
+    Title: string;
+    Layout: IPepLayout;
+}
+export declare type LayoutEditorType = 'layout-builder' | 'section' | 'block';
+export interface IEditor {
+    id: string;
+    title: string;
+    type: LayoutEditorType;
+    hostObject?: any;
+}
+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;
+}

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/skeleton-loader";
+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 "./layout-editor/layout-editor.module";
+import * as i23 from "./section-editor/section-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.PepSkeletonLoaderModule, typeof i18.PepDraggableItemsModule, typeof i19.PepGroupButtonsSettingsModule, typeof i20.PepHideInModule, typeof i21.PepLayoutModule, typeof i22.PepLayoutEditorModule, typeof i23.SectionEditorModule], [typeof i1.PepLayoutBuilderComponent, typeof i21.PepLayoutModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepLayoutBuilderModule>;
+}

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

@@ -0,0 +1,14 @@
+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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutBuilderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PepLayoutBuilderService>;
+}

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

@@ -0,0 +1,49 @@
+import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
+import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import { BaseDestroyerDirective, PepCustomizationService } from '@pepperi-addons/ngx-lib';
+import { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';
+import { ILayoutEditor, PepLayoutSizeType } from '../layout-builder.model';
+import { LayoutBuilderInternalService } from '../layout-builder-internal.service';
+import * as i0 from "@angular/core";
+export declare class PepLayoutEditorComponent extends BaseDestroyerDirective implements OnInit, AfterViewInit {
+    customizationService: PepCustomizationService;
+    layoutBuilderService: LayoutBuilderInternalService;
+    private hostElement;
+    private renderer;
+    _topContentRef: ElementRef;
+    _bottomContentRef: 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;
+    protected showBottomContent: boolean;
+    constructor(customizationService: PepCustomizationService, layoutBuilderService: LayoutBuilderInternalService, hostElement: ElementRef, renderer: Renderer2);
+    private updateHostObject;
+    ngOnInit(): void;
+    ngAfterViewInit(): 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<PepLayoutEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepLayoutEditorComponent, "pep-layout-editor", never, { "availableBlocksForDrag": "availableBlocksForDrag"; "hostObject": "hostObject"; }, { "hostObjectChange": "hostObjectChange"; }, never, ["[layout-editor-top-content]", "[layout-editor-bottom-content]"], false>;
+}

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

@@ -0,0 +1,28 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./layout-editor.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/common/http";
+import * as i4 from "@pepperi-addons/ngx-lib";
+import * as i5 from "@pepperi-addons/ngx-lib/remote-loader";
+import * as i6 from "@pepperi-addons/ngx-lib/select";
+import * as i7 from "@pepperi-addons/ngx-lib/textbox";
+import * as i8 from "@angular/cdk/drag-drop";
+import * as i9 from "@angular/cdk/overlay";
+import * as i10 from "@angular/material/tabs";
+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 "@angular/material/slider";
+import * as i20 from "@pepperi-addons/ngx-lib/textarea";
+import * as i21 from "../section-editor/section-editor.module";
+export declare class PepLayoutEditorModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepLayoutEditorModule, [typeof i1.PepLayoutEditorComponent], [typeof i2.CommonModule, typeof i3.HttpClientModule, typeof i4.PepNgxLibModule, typeof i5.PepRemoteLoaderModule, typeof i6.PepSelectModule, typeof i7.PepTextboxModule, typeof i8.DragDropModule, typeof i9.OverlayModule, typeof i10.MatTabsModule, 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.MatSliderModule, typeof i20.PepTextareaModule, typeof i21.SectionEditorModule], [typeof i1.PepLayoutEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepLayoutEditorModule>;
+}

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

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

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

@@ -0,0 +1,76 @@
+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, PepLayoutService, 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 layoutBuilderService;
+    private layoutService;
+    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, layoutBuilderService: LayoutBuilderInternalService, layoutService: PepLayoutService);
+    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 "@pepperi-addons/ngx-lib/remote-loader";
+import * as i6 from "../section-block/section-block.module";
+import * as i7 from "../hide-in/hide-in.module";
+import * as i8 from "@pepperi-addons/ngx-lib/draggable-items";
+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.PepRemoteLoaderModule, typeof i6.SectionBlockModule, typeof i7.PepHideInModule, typeof i8.PepDraggableItemsModule], [typeof i1.SectionComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionModule>;
+}

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

@@ -0,0 +1,39 @@
+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 { IPepDraggableItem } from '@pepperi-addons/ngx-lib/draggable-items';
+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 layoutBuilderService;
+    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 availableBlock: IPepDraggableItem | undefined;
+    constructor(layoutBuilderService: 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>;
+}

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

@@ -0,0 +1,13 @@
+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/skeleton-loader";
+import * as i6 from "@pepperi-addons/ngx-lib/remote-loader";
+import * as i7 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.PepSkeletonLoaderModule, typeof i6.PepRemoteLoaderModule, typeof i7.PepDraggableItemsModule], [typeof i1.SectionBlockComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionBlockModule>;
+}

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

@@ -0,0 +1,53 @@
+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.model';
+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[];
+    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;
+    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-builder/section-editor/section-editor.module.d.ts

@@ -0,0 +1,13 @@
+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 "@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.TranslateModule], [typeof i1.SectionEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SectionEditorModule>;
+}

package/manage-parameters/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@pepperi-addons/ngx-composite-lib/manage-parameters" />
+export * from './public-api';