{
    "name": "Layouts",
    "description": "Layout Components",
    "keywords": {
        "common": ["splitter", "split-panes", "split-layout", "split-view", "split-area", "resizable-splitter", "split-container","dashboardlayout","panels"],
        "angular": ["angular-splitter", "ng-splitter", "angular-split-panes", "ng-split-panes", "angular-split-area", "angular-split-layout", "angular-split-view","angular-dashboardlayout"],
        "react": ["react-splitter", "react-split-panes", "react-split-area", "react-split-view", "react-split-layout","react-dashboardlayout"],
        "vue": ["vue-splitter", "vue-split-panes", "vue-split-area", "vue-split-view", "vue-split-layout", "vue-dashboardlayout"]
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/syncfusion/ej2-angular-layouts"
  },
  "eventInterfaces": ["CreatedEventArgs", "ResizeEventArgs", "ResizingEventArgs", "BeforeExpandEventArgs", "ExpandedEventArgs", "ChangeEventArgs", "DragStartArgs", "DraggedEventArgs", "DragStopArgs", "ResizeArgs"],
    "components": [ {
            "baseClass": "Splitter",
            "directoryName": "splitter",
            "type": "container",
            "contentSelect": "div",
            "preferredTag":"div",
            "defaultTag": "<div id='ej2Splitter'></div>",
            "twoWays": [],
            "blazorPlaceholder": "splitter",
            "comment": [
                "/**",
                " * Represents the Angular Splitter Component",
                " * ```html",
                " * <ejs-splitter></ejs-splitter>",
                " * ```",
                " */"
            ],
            "reactComment": [
                "/**",
                " * Represents the React Splitter Component",
                " * ```html",
                " * <Splitter></Splitter>",
                " * ```",
                " */"
            ],
            "vueComment": [
                "/**",
                " * Represents the VueJS Splitter component",
                " * ```html",
                " * <ejs-splitter></ejs-splitter>",
                " * ```",
                " */"
            ],
            "tagDirective": [
                {
                    "arrayDirectiveClassName": "panes",
                    "directiveClassName": "pane",
                    "propertyName": "paneSettings",
                    "parentName": "paneSettings",
                    "directoryName": "splitter",
                    "baseClass": "PaneProperties",
                    "comment": [
                        "/**",
                        " * 'e-panesettings' directive represent a panes of angular splitter ",
                        " * It must be contained in a Splitter component(`ejs-splitter`). ",
                        " * ```html",
                        " * <ejs-splitter id='splitter' > ",
                        " *   <e-panes>",
                        " *    <e-pane size ='150px'></e-pane>",
                        " *    <e-pane size = '20%'></e-pane>",
                        " *   </e-panes>",
                        " * </ejs-splitter>",
                        " * ```",
                        " */"
                    ],
                    "reactComment": [
                        "/**",
                        " * PanesDirective` represent a panes of the react splitter. ",
                        " * It must be contained in a Splitter component(`SplitterComponent`). ",
                        " * ```tsx",
                        " * <SplitterComponent> ",
                        " *   <PaneSettingsDirective>",
                        " *     <PaneDirective size={this.Pane1Size}></PaneDirective>",
                        " *     <PaneDirective size={this.Pane2Size}></PaneDirective>",
                        " *   <PaneSettingsDirective>",
                        " * </SplitterComponent>",
                        " * ```",
                        " */"
                    ],
                    "vueComment": [
                        "/**",
                        " * 'e-pane' directive represent a pane of Vue Splitter ",
                        " * It must be contained in a Splitter component(`ejs-splitter`). ",
                        " * ```html",
                        " * <ejs-splitter id='splitter'> ",
                        " *   <e-panes>",
                        " *    <e-pane size='150px'></e-pane>",
                        " *    <e-pane size='150px'></e-pane>",
                        " *   </e-panes>",
                        " * </ejs-splitter>",
                        " * ```",
                        " */"
                    ],
                    "templateProperties": [
                        "content"
                    ],
                    "blazorContainerTemplates": [ "content:contentTemplate" ]
                }
            ]
        },
        {
            "baseClass": "DashboardLayout",
            "directoryName": "dashboard-layout",
            "type": "container",
            "contentSelect": "div",
            "defaultTag": "<div id='layout'></div>",
            "preferredTag": "div",
            "skipEventPropagation": true,
            "twoWays": [],
            "blazorPlaceholder": "dashboardlayout",
            "comment": [
                "/**",
                " * Represents the Essential JS 2 Angular DashboardLayout Component.",
                " * ```html",
                " * <ejs-dashboardlayout></ejs-dashboardlayout>",
                " * ```",
                " */"
            ],
            "reactComment": [
                "/**",
                " * Represents the Essential JS 2 React DashboardLayout Component.",
                " * ```ts",
                " * <DashBoardLayoutComponent></DashBoardLayoutComponent>",
                " * ```",
                " */"
            ],
            "vueComment": [
                "/**",
                " * Represents the Essential JS 2 VueJS DashboardLayout Component.",
                " * ```html",
                " * <ejs-dashboardlayout></ejs-dashboardlayout>",
                " * ```",
                " */"
            ],
            "tagDirective": [
                {
                    "arrayDirectiveClassName": "panels",
                    "directiveClassName": "panel",
                    "arrayDirectiveSelector": "ejs-dashboardlayout>e-panels",
                    "directiveSelector": "e-panels>e-panel",
                    "propertyName": "panels",
                    "directoryName": "dashboard-layout",
                    "baseClass": "Panel",
                    "comment": [
                        "/**",
                        " * 'e-panels' directive represent a panels of angular dashboardlayout ",
                        " * It must be contained in a dashboardlayout component(`ej-dashboardlayout`). ",
                        " * ```html",
                        " * <ejs-dashboardlayout> ",
                        " *   <e-panels>",
                        " *    <e-panel></e-panel>",
                        " *    <e-panel></e-panel>",
                        " *   </e-panels>",
                        " * </ejs-dashboardlayout>",
                        " * ```",
                        " */"
                    ],
                    "reactComment": [
                        "/**",
                        " * `PanelsDirective` represent a presets of the react dashboardlayout. ",
                        " * It must be contained in a dashboardlayout component(`DashBoardLayoutComponent`). ",
                        " * ```tsx",
                        " * <DashBoardLayoutComponent> ",
                        " * <PanelsDirective>",
                        " * <PanelDirective></PanelDirective>",
                        " * <PanelDirective></PanelDirective>",
                        " * </PanelsDirective>",
                        " * </DashBoardLayoutComponent>",
                        " * ```",
                        " */"
                    ],
                    "vueComment": [
                        "/**",
                        " * 'e-panels' directive represent a presets of VueJS dashboardlayout component ",
                        " * It must be contained in a dashboardlayout component(`ejs-dashboardlayout`). ",
                        " * ```html",
                        " * <ejs-dashboardlayout>",
                        " *   <e-panels>",
                        " *   <e-panel></e-panel>",
                        " *   <e-panel></e-panel>",
                        " *   </e-panels>",
                        " * </ejs-dashboardlayout>",
                        " * ```",
                        " */"
                    ],
                    "templateProperties": [
                        "header",
                        "content"
                    ],
                    "blazorContainerTemplates": [
                        "header:headerTemplate",
                        "content:contentTemplate"
                    ]
                }
            ]
        }
    ]
}