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

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 { PepLayoutBuilderService } from '../layout-builder.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: PepLayoutBuilderService);
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib",
-  "version": "0.4.2-beta.62",
+  "version": "0.4.2-beta.63",
   "peerDependencies": {
     "@angular/animations": ">= 14.0.2",
     "@angular/cdk": ">= 14.0.2",
@@ -114,6 +114,14 @@
       "node": "./fesm2015/pepperi-addons-ngx-composite-lib-icon-picker.mjs",
       "default": "./fesm2020/pepperi-addons-ngx-composite-lib-icon-picker.mjs"
     },
+    "./layout-builder": {
+      "types": "./layout-builder/index.d.ts",
+      "esm2020": "./esm2020/layout-builder/pepperi-addons-ngx-composite-lib-layout-builder.mjs",
+      "es2020": "./fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs",
+      "es2015": "./fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs",
+      "node": "./fesm2015/pepperi-addons-ngx-composite-lib-layout-builder.mjs",
+      "default": "./fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs"
+    },
     "./manage-parameters": {
       "types": "./manage-parameters/index.d.ts",
       "esm2020": "./esm2020/manage-parameters/pepperi-addons-ngx-composite-lib-manage-parameters.mjs",

package/src/assets/i18n/en.ngx-composite-lib.json

@@ -59,7 +59,8 @@
         "RESET": "Reset",
         "CLOSE": "Close",
         "DELETE": "Delete",
-        "EDIT": "Edit"
+        "EDIT": "Edit",
+        "PREVIEW": "Preview"
     },
     "MESSAGES": {
         "DIALOG_INFO_TITLE": "Info",
@@ -104,6 +105,43 @@
         "MAIN_HEADER": "Icon",
         "SELECTED": "Selected",
         "CHOOSE_ICON_HEADER": "Choose icon"
+    },
+    "LAYOUT_BUILDER": {
+        "DEFAULT_TITLE": "Layout builder",
+        "NO_TITLE": "No title",
+        "VIEWPORT_WIDTH": "View port width",
+        "PREVIEW_TITLE": "Preview Mode",
+        "PREVIEW_CLICK_HERE": "Click here to edit",
+        "DESKTOP": "Desktop",
+        "TABLET": "Tablet",
+        "MOBILE": "Mobile",
+        "SECTION": "Section",
+        "SECTION_NAME_TITLE": "Section Name (kebab-case)",
+        "SUB_SECTION_TITLE": "Sub Section",
+        "COLLAPSE_ON_TABLET_TITLE": "Collapse on Tablet",
+        "COLLAPSE_ON_TABLET_DESCRIPTION": "Enable this will make the sub section collapse into one column on tablet view",
+        "FILL_HEIGHT_SECTION_TITLE": "Fill Height",
+        "FILL_HEIGHT_SECTION_DESCRIPTION": "Set Fill Height on to make the section to fill the relative screen size",
+        "SECTIONS_TITLE": "Sections",
+        "SPLIT_TITLE": "Split",
+        "ADD_SECTION": "Add Section",
+        "DELETE_SECTION_MSG": "This action will delete out of range content. This action is irreversible!",
+        "DELETE_SECTION_TITLE": "Caution",
+        "GENERAL": "General",
+        "DESIGN": "Design",
+        "BLOCKS_TITLE": "Blocks",
+        "FULL_WIDTH_TITLE": "Full Width",
+        "MAX_WIDTH_TITLE": "Max Width",
+        "AUTO_HEIGHT_TITLE": "Auto Height",
+        "MAX_HEIGHT_TITLE": "Max Height",
+        "HEIGHT_TITLE": "Height",
+        "SPACING_TITLE": "Spacing",
+        "SPACING_HORIZONTAL_TITLE": "Left & Right",
+        "SPACING_VERTICAL_TITLE": "Top & Bottom",
+        "GAPS_TITLE": "Gaps",
+        "SECTIONS_GAP_TITLE": "Gap size between sections",
+        "COLUMNS_GAP_TITLE": "Gap size between columns",
+        "ROUNDED_CORNERS_TITLE": "Rounded Corners",
+        "BORDER_RADIUS_TITLE": "Global border radius"
     }
-
 }