@syncfusion/ej2-layouts 30.1.37 → 30.2.4

package/styles/splitter/bootstrap.css

@@ -85,6 +85,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/bootstrap4.css

@@ -83,6 +83,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/bootstrap5-dark.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/bootstrap5.3.css

@@ -81,6 +81,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/bootstrap5.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/fabric-dark.css

@@ -85,6 +85,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/fabric.css

@@ -85,6 +85,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/fluent-dark.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/fluent.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/fluent2.css

@@ -83,6 +83,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/highcontrast-light.css

@@ -85,6 +85,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/highcontrast.css

@@ -85,6 +85,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/material-dark.css

@@ -83,6 +83,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/material.css

@@ -84,6 +84,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/material3-dark.css

@@ -79,6 +79,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/material3.css

@@ -81,6 +81,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/tailwind-dark.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/tailwind.css

@@ -77,6 +77,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/splitter/tailwind3.css

@@ -81,6 +81,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind-dark-lite.css

@@ -562,6 +562,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind-dark.css

@@ -697,6 +697,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind-lite.css

@@ -562,6 +562,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind.css

@@ -697,6 +697,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind3-lite.css

@@ -561,6 +561,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/styles/tailwind3.css

@@ -690,6 +690,12 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.e-splitter.e-splitter-vertical.e-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
   overflow: hidden;
 }

package/dist/ts/dashboard-layout/dashboard-layout-model.d.ts

@@ -1,292 +0,0 @@
-import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, isUndefined } from '@syncfusion/ej2-base';import { Collection, Draggable, isNullOrUndefined, DragEventArgs, append, setValue } from '@syncfusion/ej2-base';import { EmitType, Event, formatUnit, ChildProperty, compile, closest, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, addClass, detach, removeClass, EventHandler, Browser, extend } from '@syncfusion/ej2-base';
-import {ChangeEventArgs,DragStartArgs,DraggedEventArgs,DragStopArgs,ResizeArgs} from "./dashboard-layout";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class Panel
- */
-export interface PanelModel {
-
-    /**
-     * Defines the id of the panel.
-     *
-     * @default ''
-     */
-    id?: string;
-
-    /**
-     * Defines the CSS class name that can be appended with each panel element.
-     *
-     * @default ''
-     */
-    cssClass?: string;
-
-    /**
-     * Defines the template value that should be displayed as the panel's header.
-     *
-     * @aspType string
-     */
-    header?: string | HTMLElement | Function;
-
-    /**
-     * Defines the template value that should be displayed as the panel's content.
-     *
-     * @aspType string
-     */
-
-    content?: string | HTMLElement | Function;
-
-    /**
-     * Defines whether to the panel should be enabled or not.
-     *
-     * @default true
-     */
-    enabled?: boolean;
-
-    /**
-     * Defines a row value where the panel should be placed.
-     *
-     * @default 0
-     * @aspType int
-     */
-    row?: number;
-
-    /**
-     * Defines the column value where the panel to be placed.
-     *
-     * @default 0
-     * @aspType int
-     */
-    col?: number;
-
-    /**
-     * Specifies the width of the panel in the layout in cells count.
-     *
-     * @default 1
-     */
-    sizeX?: number;
-
-    /**
-     * Specifies the height of the panel in the layout in cells count.
-     *
-     * @default 1
-     */
-    sizeY?: number;
-
-    /**
-     * Specifies the minimum height of the panel in cells count.
-     *
-     * @default 1
-     */
-    minSizeY?: number;
-
-    /**
-     * Specifies the minimum width of the panel in cells count.
-     *
-     * @default 1
-     */
-    minSizeX?: number;
-
-    /**
-     * Specifies the maximum height of the panel in cells count.
-     *
-     * @default null
-     * @aspType int
-     *
-     */
-    maxSizeY?: number;
-
-    /**
-     * Specifies the maximum width of the panel in cells count.
-     *
-     * @default null
-     * @aspType int
-     */
-    maxSizeX?: number;
-
-    /**
-     * Specifies the z-index of the panel
-     *
-     * @default 1000
-     * @aspType double
-     */
-    zIndex?: number;
-
-}
-
-/**
- * Interface for a class DashboardLayout
- */
-export interface DashboardLayoutModel extends ComponentModel{
-
-    /**
-     * If allowDragging is set to true, then the DashboardLayout allows you to drag and reorder the panels.
-     *
-     * @default true
-     */
-    allowDragging?: boolean;
-
-    /**
-     * If allowResizing is set to true, then the DashboardLayout allows you to resize the panels.
-     *
-     * @default false
-     */
-    allowResizing?: boolean;
-
-    /**
-     * If pushing is set to true, then the DashboardLayout allow to push the panels when panels collide
-     * while dragging or resizing the panels.
-     *
-     * @default true
-     * @private
-     */
-    allowPushing?: boolean;
-
-    /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
-     * @default true
-     */
-    enableHtmlSanitizer?: boolean;
-
-    /**
-     * If allowFloating is set to true, then the DashboardLayout automatically move the panels upwards to fill the empty available
-     * cells while dragging or resizing the panels.
-     *
-     * @default true
-     */
-    allowFloating?: boolean;
-
-    /**
-     * Defines the cell aspect ratio of the panel.
-     *
-     * @default 1
-     */
-    cellAspectRatio?: number;
-
-    /**
-     * Defines the spacing between the panels.
-     *
-     * @default [5,5]
-     */
-    cellSpacing?: number[];
-
-    /**
-     * Defines the number of columns to be created in the DashboardLayout.
-     *
-     * @default 1
-     */
-    columns?: number;
-
-    /**
-     * Enables or disables the grid lines for the Dashboard Layout panels.
-     *
-     * @default false
-     */
-    showGridLines?: boolean;
-
-    /**
-     * Defines the draggable handle selector which will act as dragging handler for the panels.
-     *
-     * @default null
-     */
-    draggableHandle?: string;
-
-    /**
-     * Locale property.
-     * This is not a dashboard layout property.
-     *
-     * @default 'en-US'
-     * @private
-     */
-    locale?: string;
-
-    /**
-     * Defines the media query value where the dashboardlayout becomes stacked layout when the resolution meets.
-     *
-     * @default 'max-width:600px'
-     */
-    mediaQuery?: string;
-
-    /**
-     *
-     * Defines the panels property of the DashboardLayout component.
-     *
-     * @default null
-     */
-    panels?: PanelModel[];
-
-    /**
-     * Defines the resizing handles directions used for resizing the panels.
-     *
-     * @default 'e-south-east'
-     *
-     */
-    resizableHandles?: string[];
-
-    /**
-     * Triggers whenever the panels positions are changed.
-     *
-     * @event 'object'
-     */
-    change?: EmitType<ChangeEventArgs>;
-
-    /**
-     * Triggers when a panel is about to drag.
-     *
-     * @event 'object'
-     */
-    dragStart?: EmitType<DragStartArgs>;
-
-    /**
-     * Triggers while a panel is dragged continuously.
-     *
-     * @event 'object'
-     */
-    drag?: EmitType<DraggedEventArgs>;
-
-    /**
-     * Triggers when a dragged panel is dropped.
-     *
-     * @event 'object'
-     */
-    dragStop?: EmitType<DragStopArgs>;
-
-    /**
-     * Triggers when a panel is about to resize.
-     *
-     * @event 'object'
-     */
-    resizeStart?: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when a panel is being resized continuously.
-     *
-     * @event 'object'
-     */
-    resize?: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when a panel resize ends.
-     *
-     * @event 'object'
-     */
-    resizeStop?: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when Dashboard Layout is created.
-     *
-     * @event 'object'
-     */
-
-    created?: EmitType<Object>;
-
-    /**
-     * Triggers when Dashboard Layout is destroyed.
-     *
-     * @event 'object'
-     */
-
-    destroyed?: EmitType<Object>;
-
-}