@syncfusion/ej2-layouts - npm Package Compare versions

Comparing version 17.1.1-beta to 17.1.32-beta

CHANGELOG.md

@@ -5,2 +5,38 @@ # Changelog
 
+### Splitter
+
+#### Bug Fixes
+
+- The issue with not able to set null value value for `cssClass` API has been fixed
+
+#### New Features
+
+- **Expand and Collapse**: This feature allows you configure and interact with the expand and collapse functionality of splitter.
+
+## 16.4.55 (2019-02-27)
+
+### Splitter
+
+#### Bug Fixes
+
+- The issue with dynamic update of `paneSettings` has been fixed.
+
+## 16.4.54 (2019-02-19)
+
+### Splitter
+
+#### Bug Fixes
+
+- Issue with dynamic update of pane content has been fixed
+
+## 16.4.53 (2019-02-13)
+
+### Card
+
+#### Bug Fixes
+
+- The issue with white background for the Card control has been fixed in Material theme.
+
+## 17.1.1-beta (2019-01-29)
+
 ### DashboardLayout
@@ -7,0 +43,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.1-beta
+*  version : 17.1.32-beta
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-layouts",
-  "version": "17.1.1-beta",
+  "version": "17.1.32-beta",
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -8,10 +8,5 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.1-beta"
+    "@syncfusion/ej2-base": "~17.1.32-beta"
   },
-  "devDependencies": {
-    "@types/chai": "^3.4.28",
-    "@types/jasmine": "2.8.9",
-    "@types/jasmine-ajax": "^3.1.27",
-    "@types/requirejs": "^2.1.26"
-  },
+  "devDependencies": {},
   "keywords": [
@@ -18,0 +13,0 @@ "ej2",

README.md

 # ej2-layouts
 
-The layout package contains cards, avatars, and splitter controls. The card is a small container in which user can
-show defined content in specific structure. The avatars are icons, initials or figures representing a particular
-person, used in popular media formats like images, SVG, font icons, and letters.
-The splitter is container control which used to construct different layouts using multiple and nested panes.
+The layout package contains cards, avatars, splitter and Dashboard Layout controls.
 
+* The `card` is a small container in which user can show defined content in specific structure.
+
+* The `avatars` are icons, initials or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters.
+
+* The `splitter` is container control which used to construct different layouts using multiple and nested panes.
+
+* The `DashboardLayout` is a grid structured layout control that helps to create a dashboard with panels. Panels hold the UI components and allow resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.
+
 ![Layout](https://ej2.syncfusion.com/products/images/layout/readme.png)
@@ -41,2 +46,7 @@
 
+* Dashboard Layout - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
+  * [Getting Started](https://ej2.syncfusion.com/documentation/dashboard-layout/getting-started/?utm_source=npm&utm_campaign=layout)
+  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/default.html)
+  * [Product Page](https://www.syncfusion.com/javascript-ui-controls/dashboard-layout/?utm_source=npm&utm_campaign=layout)
+
 ## Use Case samples
@@ -51,2 +61,3 @@
 * Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/card.html))
+* SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/analytics-dashboard.html))
 
@@ -86,2 +97,12 @@ ## Key Features
 
+ * Dashboard Layout
+
+   * [Drag and Drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.
+
+   * [Floating](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/properties.html) - Floats the panels upward when the dragging option is enabled.
+
+   * [Resizing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/properties.html) - Support to resize the panels in any direction as per the requirement.
+
+   * [MediaQuery](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/default.html) - Allows the panels to be stacked when the specified resolution is met.
+
 ## Support
@@ -88,0 +109,0 @@

src/dashboardlayout/dashboardlayout-model.d.ts

@@ -96,2 +96,10 @@ import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, isUndefined } from '@syncfusion/ej2-base';import { Collection, Draggable, isNullOrUndefined, DragEventArgs, append } from '@syncfusion/ej2-base';import { EmitType, Event, formatUnit, ChildProperty, compile } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, addClass, detach, removeClass, EventHandler } from '@syncfusion/ej2-base';
 
+    /**
+     * Specifies the z-index of the panel
+     * *
+     * @default 1000
+     * @aspType int
+     */
+    zIndex?: number;
+
 }
@@ -144,3 +152,3 @@
      * *
-     * @default [0,0]
+     * @default [5,5]
      */
@@ -156,2 +164,9 @@ cellSpacing?: number[];
     /**
+     * 
+     * *
+     * @default false
+     */
+    showGridLines?: boolean;
+
+    /**
      * Defines the draggable handle selector which will act as dragging handler for the panels.
@@ -194,4 +209,4 @@ * *
      * Defines the resizing handles directions used for resizing the panels.
-     * @default null
-     * @private
+     * @default 'e-south-east'
+     * 
      */
@@ -242,2 +257,14 @@ resizableHandles?: string[];
 
+    /**
+     * Triggers when Dashboard Layout is created.
+     * @event 
+     */
+    created?: EmitType<Object>;
+
+    /**
+     * Triggers when Dashboard Layout is destroyed.
+     * @event 
+     */
+    destroyed?: EmitType<Object>;
+
 }

src/dashboardlayout/dashboardlayout.d.ts

@@ -83,2 +83,9 @@ import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
     maxSizeX: number;
+    /**
+     * Specifies the z-index of the panel
+     * *
+     * @default 1000
+     * @aspType int
+     */
+    zIndex: number;
 }
@@ -124,3 +131,8 @@ /**
     protected shadowEle: HTMLElement;
-    protected elementRef: ElementRefArgs;
+    protected elementRef: {
+        top: string;
+        left: string;
+        height: string;
+        width: string;
+    };
     protected allItems: HTMLElement[];
@@ -181,2 +193,3 @@ protected dimensions: (string | number)[];
     protected cellSize: number[] | string[];
+    protected table: HTMLElement;
     protected cloneObject: {
@@ -189,2 +202,3 @@ [key: string]: {
     private panelsInitialModel;
+    protected isRenderComplete: boolean;
     /**
@@ -225,3 +239,3 @@ * If allowDragging is set to true, then the DashboardLayout allows you to drag and reorder the panels.
      * *
-     * @default [0,0]
+     * @default [5,5]
      */
@@ -235,2 +249,8 @@ cellSpacing: number[];
     /**
+     *
+     * *
+     * @default false
+     */
+    showGridLines: boolean;
+    /**
      * Defines the draggable handle selector which will act as dragging handler for the panels.
@@ -268,6 +288,6 @@ * *
      * Defines the resizing handles directions used for resizing the panels.
-     * @default null
-     * @private
+     * @default 'e-south-east'
+     *
      */
-    private resizableHandles;
+    resizableHandles: string[];
     /**
@@ -309,2 +329,12 @@ * Triggers whenever the panels positions are changed.
     /**
+     * Triggers when Dashboard Layout is created.
+     * @event
+     */
+    created: EmitType<Object>;
+    /**
+     * Triggers when Dashboard Layout is destroyed.
+     * @event
+     */
+    destroyed: EmitType<Object>;
+    /**
      * Initialize the event handler
@@ -314,3 +344,4 @@ * @private
     protected preRender(): void;
-    protected createPanelElement(cssClass: string, idValue: string, className: string): HTMLElement;
+    protected setOldRowCol(): void;
+    protected createPanelElement(cssClass: string, idValue: string): HTMLElement;
     /**
@@ -322,2 +353,5 @@ * To Initialize the control rendering.
     protected render(): void;
+    private initGridLines;
+    private initialize;
+    protected checkMediaQuery(): boolean;
     protected calculateCellSize(): void;
@@ -350,5 +384,8 @@ protected maxRow(): number;
     protected onResize(): void;
+    protected updateGridLines(): void;
     protected checkDragging(dragCollection: Draggable[]): void;
+    protected sortPanels(): PanelModel[];
     protected checkMediaQuerySizing(): void;
     protected panelResponsiveUpdate(): void;
+    protected updateRowHeight(): void;
     protected setHeightWidth(): void;
@@ -360,5 +397,5 @@ protected setHeightAndWidth(panelElement: HTMLElement, panelModel: PanelModel): void;
     protected setMinMaxValues(panel: PanelModel): void;
-    protected calculateMaxColumnValue(panels: PanelModel[]): void;
+    protected panelPropertyChange(panel: PanelModel, value: IChangePanel): void;
     protected renderDashBoardCells(cells: PanelModel[]): void;
-    protected collisionItems(row: number, col: number, sizeX: number, sizeY: number, ignore: HTMLElement[] | HTMLElement): HTMLElement[];
+    protected collisions(row: number, col: number, sizeX: number, sizeY: number, ignore: HTMLElement[] | HTMLElement): HTMLElement[];
     protected rightWardsSpaceChecking(rowElements: HTMLElement[], col: number, ele: HTMLElement): number[];
@@ -373,3 +410,2 @@ protected getOccupiedColumns(element: HTMLElement, type: string): number[];
     protected replacable(spacing: number[], sizeX: number, row: number, sizeY: number, ele: HTMLElement): boolean;
-    protected getColumnValues(element: HTMLElement): number[];
     protected sortCollisionItems(collisionItems: HTMLElement[]): HTMLElement[];
@@ -388,3 +424,3 @@ protected updatedModels(collisionItems: HTMLElement[], panelModel: PanelModel, ele: HTMLElement): HTMLElement[];
     protected setClasses(panelCollection: HTMLElement[]): void;
-    protected setResizingClass(ele: HTMLElement, container: HTMLElement): void;
+    protected setResizingClass(ele?: HTMLElement, container?: HTMLElement): void;
     protected setXYAttributes(element: HTMLElement, panelModel: PanelModel): void;
@@ -394,2 +430,3 @@ protected setXYDimensions(panelModel: PanelModel): (string | number)[];
     protected enableDraggingContent(collections: HTMLElement[]): void;
+    protected updatePanels(): void;
     private onDraggingStart;
@@ -399,3 +436,2 @@ private cloneModels;
     protected getPanelBase(args: HTMLElement | DragEventArgs | String): HTMLElement;
-    protected getItems(row: number, column: number, sizeX: number, sizeY: number, elements: HTMLElement[] | HTMLElement): HTMLElement[];
     protected getPanel(row: number, column: number, excludeItems: HTMLElement[] | HTMLElement): PanelModel;
@@ -408,2 +444,3 @@ protected setHolderPosition(args: DragEventArgs): void;
     addPanel(panel: PanelModel): void;
+    protected updateCloneArrayObject(): void;
     /**
@@ -426,2 +463,3 @@ * Returns the panels object of the DashboardLayout.
     movePanel(id: string, row: number, col: number): void;
+    protected setAttributes(value: IAttributes, ele: HTMLElement): void;
     /**
@@ -521,11 +559,25 @@ * Resize the panel in the DashboardLayout.
 }
-/**
- * Defines the holder position.
- */
-interface ElementRefArgs {
-    top: string;
-    left: string;
-    height: string;
-    width: string;
+interface IAttributes {
+    [key: string]: {
+        sizeX?: string | number;
+        sizeY?: string | number;
+        minSizeX?: string | number;
+        minSizeY?: string | number;
+        maxSizeX?: string | number;
+        maxSizeY?: string | number;
+        row?: string | number;
+        col?: string | number;
+    };
 }
+interface IChangePanel {
+    sizeX?: number;
+    sizeY?: number;
+    minSizeX?: number;
+    minSizeY?: number;
+    maxSizeX?: number;
+    maxSizeY?: number;
+    row?: number;
+    col?: number;
+    id?: string;
+}
 export {};

src/splitter/splitter-model.d.ts

 import { Component, Property, setStyleAttribute, ChildProperty, compile } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, addClass, Collection, isNullOrUndefined, append } from '@syncfusion/ej2-base';import { Event, EmitType, EventHandler, selectAll, removeClass, select, Browser, detach, formatUnit } from '@syncfusion/ej2-base';
-import {Orientation,CreatedEventArgs,ResizeEventArgs,ResizingEventArgs} from "./splitter";
+import {Orientation,CreatedEventArgs,ResizeEventArgs,ResizingEventArgs,BeforeExpandEventArgs,ExpandedEventArgs} from "./splitter";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -17,2 +17,14 @@
     /**
+     * Specifies whether a pane is collapsible or not collapsible.
+     * @default false
+     */
+    collapsible?: boolean;
+
+    /**
+     * Specifies whether a pane is collapsed or not collapsed at the initial rendering of splitter.
+     * @default false
+     */
+    collapsed?: boolean;
+
+    /**
      * Specifies the value whether a pane is resizable. By default, the Splitter is resizable in all panes.
@@ -40,3 +52,3 @@ * You can disable this for any specific panes using this property.
      */
-    content?: string;
+    content?: string | HTMLElement;
 
@@ -73,3 +85,3 @@ }
      *  * Set the orientation property as "Vertical" to create a vertical splitter that aligns the panes top-to-bottom.
-     * @default Horizontal 
+     * @default Horizontal
      */
@@ -110,3 +122,3 @@ orientation?: Orientation;
      * Triggers after creating the splitter component with its panes.
-     * @event 
+     * @event
      */
@@ -117,3 +129,3 @@ created?: EmitType<CreatedEventArgs>;
      * Triggers when the split pane is started to resize.
-     * @event 
+     * @event
      */
@@ -124,3 +136,3 @@ resizeStart?: EmitType<ResizeEventArgs>;
      * Triggers when a split pane is being resized.
-     * @event 
+     * @event
      */
@@ -131,6 +143,30 @@ resizing?: EmitType<ResizingEventArgs>;
      * Triggers when the resizing of split pane is stopped.
-     * @event 
+     * @event
      */
     resizeStop?: EmitType<ResizingEventArgs>;
 
+    /**
+     * Triggers when before panes get collapsed.
+     * @event 
+     */
+    beforeCollapse?: EmitType<BeforeExpandEventArgs>;
+
+    /**
+     * Triggers when before panes get expanded.
+     * @event 
+     */
+    beforeExpand?: EmitType<BeforeExpandEventArgs>;
+
+    /**
+     * Triggers when after panes get collapsed.
+     * @event 
+     */
+    collapsed?: EmitType<ExpandedEventArgs>;
+
+    /**
+     * Triggers when after panes get expanded.
+     * @event 
+     */
+    expanded?: EmitType<ExpandedEventArgs>;
+
 }

src/splitter/splitter.d.ts

@@ -5,3 +5,3 @@ import { Component, ChildProperty } from '@syncfusion/ej2-base';
 /**
- * Interface to configure pane properties such as its content, size, min, max, and resizable.
+ * Interface to configure pane properties such as its content, size, min, max, resizable, collapsed and collapsible.
  */
@@ -15,2 +15,12 @@ export declare class PaneProperties extends ChildProperty<PaneProperties> {
     /**
+     * Specifies whether a pane is collapsible or not collapsible.
+     * @default false
+     */
+    collapsible: boolean;
+    /**
+     * Specifies whether a pane is collapsed or not collapsed at the initial rendering of splitter.
+     * @default false
+     */
+    collapsed: boolean;
+    /**
      * Specifies the value whether a pane is resizable. By default, the Splitter is resizable in all panes.
@@ -35,3 +45,3 @@ * You can disable this for any specific panes using this property.
      */
-    content: string;
+    content: string | HTMLElement;
 }
@@ -62,3 +72,3 @@ /**
  */
-export declare class Splitter extends Component<HTMLDivElement> {
+export declare class Splitter extends Component<HTMLElement> {
     private allPanes;
@@ -93,2 +103,9 @@ private paneOrder;
     private validElementAttributes;
+    private arrow;
+    private currentBarIndex;
+    private prevBar;
+    private nextBar;
+    private splitInstance;
+    private leftArrow;
+    private rightArrow;
     /**
@@ -164,2 +181,22 @@ * Specifies the height of the Splitter component that accepts both string and number values.
     /**
+     * Triggers when before panes get collapsed.
+     * @event
+     */
+    beforeCollapse: EmitType<BeforeExpandEventArgs>;
+    /**
+     * Triggers when before panes get expanded.
+     * @event
+     */
+    beforeExpand: EmitType<BeforeExpandEventArgs>;
+    /**
+     * Triggers when after panes get collapsed.
+     * @event
+     */
+    collapsed: EmitType<ExpandedEventArgs>;
+    /**
+     * Triggers when after panes get expanded.
+     * @event
+     */
+    expanded: EmitType<ExpandedEventArgs>;
+    /**
      * Initializes a new instance of the Splitter class.
@@ -169,3 +206,3 @@ * @param options  - Specifies Splitter model properties as options.
      */
-    constructor(options?: SplitterModel, element?: string | HTMLDivElement);
+    constructor(options?: SplitterModel, element?: string | HTMLElement);
     /**
@@ -192,3 +229,7 @@ * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
     render(): void;
+    private onDocumentClick;
     private checkDataAttributes;
+    private destroyPaneSettings;
+    private setPaneSettings;
+    private checkArrow;
     private removeDataPrefix;
@@ -201,2 +242,9 @@ private setRTL;
     private showResizer;
+    private resizableModel;
+    private collapsibleModelUpdate;
+    private collapseArrow;
+    private updateIsCollapsed;
+    private isCollapsed;
+    private targetArrows;
+    private collapsedOnchange;
     private isEnabled;
@@ -211,3 +259,5 @@ private setSeparatorSize;
     private setDimension;
+    private updateCollapseIcons;
     private createSeparator;
+    private updateResizablePanes;
     private addSeparator;
@@ -224,2 +274,20 @@ private isResizable;
     private unwireResizeEvents;
+    private wireClickEvents;
+    private clickHandler;
+    private expandAction;
+    private hideTargetBarIcon;
+    private showTargetBarIcon;
+    private updateIconsOnCollapse;
+    private collapseAction;
+    private beforeAction;
+    private splitterProperty;
+    private showCurrentBarIcon;
+    private updateIconsOnExpand;
+    private afterAction;
+    private currentIndex;
+    private getSeparatorIndex;
+    private getPrevBar;
+    private getNextBar;
+    private updateBars;
+    private splitterDetails;
     private onMouseDown;
@@ -238,3 +306,2 @@ private updatePaneFlexBasis;
     private getPaneHeight;
-    private boundingRectValues;
     private isValidSize;
@@ -256,4 +323,17 @@ private getPaneDimensions;
     private setTemplate;
+    private paneCollapsible;
     private createSplitPane;
     /**
+     * expands corresponding pane based on the index is passed.
+     * @param { number } index - Specifies the index value of the corresponding pane to be expanded at initial rendering of splitter.
+     * @returns void
+     */
+    expand(index: number): void;
+    /**
+     * collapses corresponding pane based on the index is passed.
+     * @param { number } index - Specifies the index value of the corresponding pane to be collapsed at initial rendering of splitter.
+     * @returns void
+     */
+    collapse(index: number): void;
+    /**
      * Removes the control from the DOM and also removes all its related events.
@@ -319,1 +399,49 @@ * @returns void
 }
+export interface BeforeExpandEventArgs {
+    /**
+     * To access root element after control created
+     */
+    element?: HTMLElement;
+    /**
+     * default event arguments
+     */
+    event?: Event;
+    /**
+     * To get pane elements
+     */
+    pane?: HTMLElement[];
+    /**
+     * Index of pane
+     */
+    index?: number[];
+    /**
+     * Respective split-bar element
+     */
+    separator?: HTMLElement;
+    /**
+     * cancel argument
+     */
+    cancel?: boolean;
+}
+export interface ExpandedEventArgs {
+    /**
+     * To access root element after control created
+     */
+    element?: HTMLElement;
+    /**
+     * default event arguments
+     */
+    event?: Event;
+    /**
+     * To get pane elements
+     */
+    pane?: HTMLElement[];
+    /**
+     * Index of pane
+     */
+    index?: number[];
+    /**
+     * Respective split-bar element
+     */
+    separator?: HTMLElement;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2861821

increased by21.67%

Dev dependency count

0

decreased by-100%

Number of package files

179

increased by5.92%

Lines of code

34555

increased by22.51%

Number of lines in readme file

122

increased by20.79%

Dependency changes

• Updated@syncfusion/ej2-base@~17.1.32-beta