@pepperi-addons/ngx-composite-lib 0.4.2-beta.61 → 0.4.2-beta.63

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

@@ -0,0 +1,49 @@
+import { ElementRef, Renderer2, OnInit, EventEmitter, TemplateRef } from '@angular/core';
+import { CdkDragDrop, CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
+import { BaseDestroyerDirective, PepCustomizationService, PepLayoutService } from '@pepperi-addons/ngx-lib';
+import { PepLayoutBuilderService } from '../layout-builder.service';
+import { IPepLayoutSection, IPepLayoutView, PepLayoutSizeType } from '../layout-builder.model';
+import { Observable } from 'rxjs';
+import { DataViewScreenSize } from '@pepperi-addons/papi-sdk';
+import * as i0 from "@angular/core";
+export declare class PepLayoutComponent extends BaseDestroyerDirective implements OnInit {
+    customizationService: PepCustomizationService;
+    layoutService: PepLayoutService;
+    layoutBuilderService: PepLayoutBuilderService;
+    private hostElement;
+    private renderer;
+    skeletonContainer: ElementRef;
+    sectionsContainer: ElementRef;
+    private _layoutView;
+    set layoutView(value: IPepLayoutView);
+    get layoutView(): IPepLayoutView;
+    blockTemplate: TemplateRef<any> | undefined;
+    private _showSkeleton;
+    set showSkeleton(value: boolean);
+    get showSkeleton(): boolean;
+    layoutViewChange: EventEmitter<IPepLayoutView>;
+    private _horizontalSpacing;
+    set horizontalSpacing(value: PepLayoutSizeType | undefined);
+    get horizontalSpacing(): PepLayoutSizeType | undefined;
+    private _verticalSpacing;
+    set verticalSpacing(value: PepLayoutSizeType | undefined);
+    get verticalSpacing(): PepLayoutSizeType | undefined;
+    protected paddingInline: string;
+    protected sectionsGap: PepLayoutSizeType;
+    protected columnsGap: PepLayoutSizeType;
+    protected previewMode: boolean;
+    private _sectionsSubject;
+    protected get sections$(): Observable<IPepLayoutSection[]>;
+    protected screenType: DataViewScreenSize;
+    constructor(customizationService: PepCustomizationService, layoutService: PepLayoutService, layoutBuilderService: PepLayoutBuilderService, hostElement: ElementRef, renderer: Renderer2);
+    private convertLayoutSizeType;
+    private animateSkeleton;
+    private setLayoutDataProperties;
+    ngOnInit(): void;
+    getSectionsTemplateRows(): string;
+    onSectionDropped(event: CdkDragDrop<any[]>): void;
+    onDragStart(event: CdkDragStart): void;
+    onDragEnd(event: CdkDragEnd): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepLayoutComponent, "pep-layout", never, { "layoutView": "layoutView"; "blockTemplate": "blockTemplate"; "showSkeleton": "showSkeleton"; }, { "layoutViewChange": "layoutViewChange"; }, never, never, false>;
+}

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

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./layout.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/skeleton-loader";
+import * as i6 from "@pepperi-addons/ngx-lib/remote-loader";
+import * as i7 from "@pepperi-addons/ngx-lib/size-detector";
+import * as i8 from "@pepperi-addons/ngx-lib/dialog";
+import * as i9 from "@angular/cdk/drag-drop";
+import * as i10 from "../section/section.module";
+import * as i11 from "@ngx-translate/core";
+export declare class PepLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepLayoutModule, [typeof i1.PepLayoutComponent], [typeof i2.CommonModule, typeof i3.HttpClientModule, typeof i4.PepNgxLibModule, typeof i5.PepSkeletonLoaderModule, typeof i6.PepRemoteLoaderModule, typeof i7.PepSizeDetectorModule, typeof i8.PepDialogModule, typeof i9.DragDropModule, typeof i10.SectionModule, typeof i11.TranslateModule], [typeof i1.PepLayoutComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepLayoutModule>;
+}

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

@@ -0,0 +1,45 @@
+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 { PepLayoutBuilderService } from './layout-builder.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>;
+    backClick: EventEmitter<void>;
+    blockEditorChange: EventEmitter<string>;
+    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: PepLayoutBuilderService, 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"; }, { "backClick": "backClick"; "blockEditorChange": "blockEditorChange"; "blockAdded": "blockAdded"; "blocksRemoved": "blocksRemoved"; }, never, ["[layout-editor-top-content]", "[layout-editor-bottom-content]", "[block-editor-content]", "[header-end-content]", "pep-layout"], 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,96 @@
+import { CdkDragDrop, CdkDragEnd, CdkDragStart } from "@angular/cdk/drag-drop";
+import { TranslateService } from "@ngx-translate/core";
+import { PepScreenSizeType } from "@pepperi-addons/ngx-lib";
+import { IPepDraggableItem } from "@pepperi-addons/ngx-lib/draggable-items";
+import { DataViewScreenSize } from "@pepperi-addons/papi-sdk";
+import { Observable } from 'rxjs';
+import { LayoutEditorType, IEditor, IPepLayoutBlockAddedEvent, ILayoutEditor, IPepLayoutSection, IPepLayoutSectionColumn, IPepLayoutView, ILayoutSectionEditor } from "./layout-builder.model";
+import * as i0 from "@angular/core";
+export declare class PepLayoutBuilderService {
+    private translate;
+    static readonly AVAILABLE_BLOCKS_CONTAINER_ID = "availableBlocks";
+    static readonly MAIN_EDITOR_ID = "main";
+    private _defaultSectionTitle;
+    set defaultSectionTitle(value: string);
+    private _editorsBreadCrumb;
+    isEditMode: boolean;
+    private _screenSizeSubject;
+    get screenSizeChange$(): Observable<PepScreenSizeType>;
+    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>;
+    private _availableBlocksForDragMap;
+    get availableBlocksForDragMap(): ReadonlyMap<string, IPepDraggableItem>;
+    private _availableBlocksForDragMapSubject;
+    get availableBlocksForDragMapChange$(): Observable<ReadonlyMap<string, IPepDraggableItem>>;
+    isOffline: boolean;
+    constructor(translate: TranslateService);
+    private notifyLayoutViewChange;
+    private notifyBlockAdded;
+    private notifyBlocksRemoved;
+    private notifyEditorChange;
+    private notifyAvailableBlocksForDragMapChange;
+    private updateLayoutEditorProperties;
+    private loadDefaultEditor;
+    private changeCurrentEditor;
+    private getEditor;
+    private getSectionEditorTitle;
+    private getSectionEditor;
+    private getSectionColumnByIdForEditor;
+    private setSectionsColumnsGap;
+    private getCssScreenWidh;
+    private getBlockContainerByBlockKey;
+    private changeCursorOnDragStart;
+    private changeCursorOnDragEnd;
+    /***********************************************************************************************/
+    notifySectionsColumnsDropListChange(sectionsColumnsDropList: any[]): void;
+    notifyPreviewModeChange(value: boolean): void;
+    notifyLockScreen(value: boolean): void;
+    setAvailableBlocksToDrag(availableBlocksForDrag: Array<IPepDraggableItem>): void;
+    getBlockEditor(blockKey: string): IEditor;
+    getScreenType(size: PepScreenSizeType): DataViewScreenSize;
+    getSectionColumnKey(sectionKey?: string, index?: string): string;
+    getIsHidden(hideIn: DataViewScreenSize[] | undefined, currentScreenType: DataViewScreenSize): boolean;
+    navigateToEditor(editorType: LayoutEditorType, id: 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;
+    loadLayoutBuilder(layoutView: IPepLayoutView): 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 { PepLayoutBuilderService } from '../layout-builder.service';
+import * as i0 from "@angular/core";
+export declare class PepLayoutEditorComponent extends BaseDestroyerDirective implements OnInit, AfterViewInit {
+    customizationService: PepCustomizationService;
+    layoutBuilderService: PepLayoutBuilderService;
+    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: PepLayoutBuilderService, 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,78 @@
+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 { PepLayoutBuilderService } from '../layout-builder.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[];
+    private _editable;
+    protected set editable(value: boolean);
+    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: PepLayoutBuilderService, 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>;
+}