@syncfusion/ej2-angular-layouts 26.1.35 → 26.1.38-ngcc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@syncfusion/ej2-angular-layouts.es5.js +726 -0
- package/@syncfusion/ej2-angular-layouts.es5.js.map +1 -0
- package/@syncfusion/ej2-angular-layouts.js +663 -0
- package/@syncfusion/ej2-angular-layouts.js.map +1 -0
- package/dist/ej2-angular-layouts.umd.js +763 -0
- package/dist/ej2-angular-layouts.umd.js.map +1 -0
- package/dist/ej2-angular-layouts.umd.min.js +11 -0
- package/dist/ej2-angular-layouts.umd.min.js.map +1 -0
- package/ej2-angular-layouts.d.ts +7 -0
- package/ej2-angular-layouts.metadata.json +1 -0
- package/license +10 -0
- package/package.json +13 -27
- package/schematics/collection.json +0 -40
- package/src/dashboard-layout/dashboardlayout-all.module.d.ts +0 -6
- package/src/dashboard-layout/dashboardlayout.component.d.ts +0 -3
- package/src/dashboard-layout/dashboardlayout.module.d.ts +0 -7
- package/src/dashboard-layout/panels.directive.d.ts +0 -5
- package/src/splitter/panesettings.directive.d.ts +0 -5
- package/src/splitter/splitter-all.module.d.ts +0 -6
- package/src/splitter/splitter.component.d.ts +0 -3
- package/src/splitter/splitter.module.d.ts +0 -7
- package/src/timeline/items.directive.d.ts +0 -5
- package/src/timeline/timeline-all.module.d.ts +0 -6
- package/src/timeline/timeline.component.d.ts +0 -3
- package/src/timeline/timeline.module.d.ts +0 -7
- package/styles/avatar/fluent2.css +33 -30
- package/styles/card/fluent2.css +38 -33
- package/styles/dashboard-layout/fluent2.css +30 -30
- package/styles/fluent2.css +161 -153
- package/styles/splitter/fluent2.css +30 -30
- package/styles/timeline/fluent2.css +30 -30
- package/CHANGELOG.md +0 -612
- package/esm2020/public_api.mjs +0 -2
- package/esm2020/src/dashboard-layout/dashboardlayout-all.module.mjs +0 -23
- package/esm2020/src/dashboard-layout/dashboardlayout.component.mjs +0 -64
- package/esm2020/src/dashboard-layout/dashboardlayout.module.mjs +0 -34
- package/esm2020/src/dashboard-layout/panels.directive.mjs +0 -72
- package/esm2020/src/index.mjs +0 -14
- package/esm2020/src/splitter/panesettings.directive.mjs +0 -66
- package/esm2020/src/splitter/splitter-all.module.mjs +0 -23
- package/esm2020/src/splitter/splitter.component.mjs +0 -64
- package/esm2020/src/splitter/splitter.module.mjs +0 -34
- package/esm2020/src/timeline/items.directive.mjs +0 -58
- package/esm2020/src/timeline/timeline-all.module.mjs +0 -23
- package/esm2020/src/timeline/timeline.component.mjs +0 -83
- package/esm2020/src/timeline/timeline.module.mjs +0 -34
- package/esm2020/syncfusion-ej2-angular-layouts.mjs +0 -5
- package/fesm2015/syncfusion-ej2-angular-layouts.mjs +0 -530
- package/fesm2015/syncfusion-ej2-angular-layouts.mjs.map +0 -1
- package/fesm2020/syncfusion-ej2-angular-layouts.mjs +0 -530
- package/fesm2020/syncfusion-ej2-angular-layouts.mjs.map +0 -1
- package/schematics/generators/dashboardlayout-default/index.d.ts +0 -3
- package/schematics/generators/dashboardlayout-default/index.js +0 -8
- package/schematics/generators/dashboardlayout-default/index.ts +0 -8
- package/schematics/generators/dashboardlayout-default/sample-details.d.ts +0 -5
- package/schematics/generators/dashboardlayout-default/sample-details.js +0 -7
- package/schematics/generators/dashboardlayout-default/sample-details.ts +0 -5
- package/schematics/generators/dashboardlayout-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -14
- package/schematics/generators/dashboardlayout-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -4
- package/schematics/generators/dashboardlayout-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -22
- package/schematics/generators/dashboardlayout-default/schema.d.ts +0 -3
- package/schematics/generators/dashboardlayout-default/schema.js +0 -2
- package/schematics/generators/dashboardlayout-default/schema.json +0 -125
- package/schematics/generators/dashboardlayout-default/schema.ts +0 -3
- package/schematics/generators/dashboardlayout-dragging/index.d.ts +0 -3
- package/schematics/generators/dashboardlayout-dragging/index.js +0 -8
- package/schematics/generators/dashboardlayout-dragging/index.ts +0 -8
- package/schematics/generators/dashboardlayout-dragging/sample-details.d.ts +0 -5
- package/schematics/generators/dashboardlayout-dragging/sample-details.js +0 -7
- package/schematics/generators/dashboardlayout-dragging/sample-details.ts +0 -5
- package/schematics/generators/dashboardlayout-dragging/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -14
- package/schematics/generators/dashboardlayout-dragging/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -4
- package/schematics/generators/dashboardlayout-dragging/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -22
- package/schematics/generators/dashboardlayout-dragging/schema.d.ts +0 -3
- package/schematics/generators/dashboardlayout-dragging/schema.js +0 -2
- package/schematics/generators/dashboardlayout-dragging/schema.json +0 -125
- package/schematics/generators/dashboardlayout-dragging/schema.ts +0 -3
- package/schematics/generators/dashboardlayout-floating/index.d.ts +0 -3
- package/schematics/generators/dashboardlayout-floating/index.js +0 -8
- package/schematics/generators/dashboardlayout-floating/index.ts +0 -8
- package/schematics/generators/dashboardlayout-floating/sample-details.d.ts +0 -5
- package/schematics/generators/dashboardlayout-floating/sample-details.js +0 -7
- package/schematics/generators/dashboardlayout-floating/sample-details.ts +0 -5
- package/schematics/generators/dashboardlayout-floating/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -45
- package/schematics/generators/dashboardlayout-floating/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -4
- package/schematics/generators/dashboardlayout-floating/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -29
- package/schematics/generators/dashboardlayout-floating/schema.d.ts +0 -3
- package/schematics/generators/dashboardlayout-floating/schema.js +0 -2
- package/schematics/generators/dashboardlayout-floating/schema.json +0 -125
- package/schematics/generators/dashboardlayout-floating/schema.ts +0 -3
- package/schematics/generators/dashboardlayout-media-query/index.d.ts +0 -3
- package/schematics/generators/dashboardlayout-media-query/index.js +0 -8
- package/schematics/generators/dashboardlayout-media-query/index.ts +0 -8
- package/schematics/generators/dashboardlayout-media-query/sample-details.d.ts +0 -5
- package/schematics/generators/dashboardlayout-media-query/sample-details.js +0 -7
- package/schematics/generators/dashboardlayout-media-query/sample-details.ts +0 -5
- package/schematics/generators/dashboardlayout-media-query/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -14
- package/schematics/generators/dashboardlayout-media-query/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -4
- package/schematics/generators/dashboardlayout-media-query/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -23
- package/schematics/generators/dashboardlayout-media-query/schema.d.ts +0 -3
- package/schematics/generators/dashboardlayout-media-query/schema.js +0 -2
- package/schematics/generators/dashboardlayout-media-query/schema.json +0 -125
- package/schematics/generators/dashboardlayout-media-query/schema.ts +0 -3
- package/schematics/generators/dashboardlayout-resizing/index.d.ts +0 -3
- package/schematics/generators/dashboardlayout-resizing/index.js +0 -8
- package/schematics/generators/dashboardlayout-resizing/index.ts +0 -8
- package/schematics/generators/dashboardlayout-resizing/sample-details.d.ts +0 -5
- package/schematics/generators/dashboardlayout-resizing/sample-details.js +0 -7
- package/schematics/generators/dashboardlayout-resizing/sample-details.ts +0 -5
- package/schematics/generators/dashboardlayout-resizing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -14
- package/schematics/generators/dashboardlayout-resizing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -4
- package/schematics/generators/dashboardlayout-resizing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -22
- package/schematics/generators/dashboardlayout-resizing/schema.d.ts +0 -3
- package/schematics/generators/dashboardlayout-resizing/schema.js +0 -2
- package/schematics/generators/dashboardlayout-resizing/schema.json +0 -125
- package/schematics/generators/dashboardlayout-resizing/schema.ts +0 -3
- package/schematics/generators/splitter-horizontalsplitter/index.d.ts +0 -3
- package/schematics/generators/splitter-horizontalsplitter/index.js +0 -8
- package/schematics/generators/splitter-horizontalsplitter/index.ts +0 -8
- package/schematics/generators/splitter-horizontalsplitter/sample-details.d.ts +0 -5
- package/schematics/generators/splitter-horizontalsplitter/sample-details.js +0 -7
- package/schematics/generators/splitter-horizontalsplitter/sample-details.ts +0 -5
- package/schematics/generators/splitter-horizontalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -20
- package/schematics/generators/splitter-horizontalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -30
- package/schematics/generators/splitter-horizontalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -12
- package/schematics/generators/splitter-horizontalsplitter/schema.d.ts +0 -3
- package/schematics/generators/splitter-horizontalsplitter/schema.js +0 -2
- package/schematics/generators/splitter-horizontalsplitter/schema.json +0 -125
- package/schematics/generators/splitter-horizontalsplitter/schema.ts +0 -3
- package/schematics/generators/splitter-nestedsplitter/index.d.ts +0 -3
- package/schematics/generators/splitter-nestedsplitter/index.js +0 -8
- package/schematics/generators/splitter-nestedsplitter/index.ts +0 -8
- package/schematics/generators/splitter-nestedsplitter/sample-details.d.ts +0 -5
- package/schematics/generators/splitter-nestedsplitter/sample-details.js +0 -7
- package/schematics/generators/splitter-nestedsplitter/sample-details.ts +0 -5
- package/schematics/generators/splitter-nestedsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -29
- package/schematics/generators/splitter-nestedsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -17
- package/schematics/generators/splitter-nestedsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -38
- package/schematics/generators/splitter-nestedsplitter/schema.d.ts +0 -3
- package/schematics/generators/splitter-nestedsplitter/schema.js +0 -2
- package/schematics/generators/splitter-nestedsplitter/schema.json +0 -125
- package/schematics/generators/splitter-nestedsplitter/schema.ts +0 -3
- package/schematics/generators/splitter-verticalsplitter/index.d.ts +0 -3
- package/schematics/generators/splitter-verticalsplitter/index.js +0 -8
- package/schematics/generators/splitter-verticalsplitter/index.ts +0 -8
- package/schematics/generators/splitter-verticalsplitter/sample-details.d.ts +0 -5
- package/schematics/generators/splitter-verticalsplitter/sample-details.js +0 -7
- package/schematics/generators/splitter-verticalsplitter/sample-details.ts +0 -5
- package/schematics/generators/splitter-verticalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -20
- package/schematics/generators/splitter-verticalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -31
- package/schematics/generators/splitter-verticalsplitter/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +0 -12
- package/schematics/generators/splitter-verticalsplitter/schema.d.ts +0 -3
- package/schematics/generators/splitter-verticalsplitter/schema.js +0 -2
- package/schematics/generators/splitter-verticalsplitter/schema.json +0 -125
- package/schematics/generators/splitter-verticalsplitter/schema.ts +0 -3
- package/schematics/ng-add/index.d.ts +0 -3
- package/schematics/ng-add/index.js +0 -9
- package/schematics/ng-add/schema.d.ts +0 -13
- package/schematics/ng-add/schema.js +0 -2
- package/schematics/utils/lib-details.d.ts +0 -4
- package/schematics/utils/lib-details.js +0 -6
- package/syncfusion-ej2-angular-layouts.d.ts +0 -5
@@ -1,20 +0,0 @@
|
|
1
|
-
#pane-heading {
|
2
|
-
font-size: 16px;
|
3
|
-
margin-bottom: 10px;
|
4
|
-
}
|
5
|
-
.pane1 {
|
6
|
-
margin: 20px auto;
|
7
|
-
max-width: 440px;
|
8
|
-
}
|
9
|
-
.control-section {
|
10
|
-
min-height: 370px;
|
11
|
-
margin-bottom: 15px;
|
12
|
-
margin-top: 10px;
|
13
|
-
}
|
14
|
-
.horizontal-splitter .content {
|
15
|
-
text-align: center;
|
16
|
-
align-items: center;
|
17
|
-
justify-content: center;
|
18
|
-
display: grid;
|
19
|
-
height: 100%;
|
20
|
-
}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
<div id="target" class="control-section horizontal-splitter">
|
2
|
-
<div class="pane1">
|
3
|
-
<div id="pane-heading">Horizontal Splitter</div>
|
4
|
-
<ejs-splitter #horizontal height='200px' width='100%' >
|
5
|
-
<e-panes>
|
6
|
-
<e-pane size='25%' min='60px'>
|
7
|
-
<ng-template #content>
|
8
|
-
<div class="content">
|
9
|
-
<div>Left pane</div>
|
10
|
-
</div>
|
11
|
-
</ng-template>
|
12
|
-
</e-pane>
|
13
|
-
<e-pane size='50%' min='60px'>
|
14
|
-
<ng-template #content>
|
15
|
-
<div class="content">
|
16
|
-
<span>Middle pane</span>
|
17
|
-
</div>
|
18
|
-
</ng-template>
|
19
|
-
</e-pane>
|
20
|
-
<e-pane size='25%' min='60px'>
|
21
|
-
<ng-template #content>
|
22
|
-
<div class="content">
|
23
|
-
<span>Right pane</span>
|
24
|
-
</div>
|
25
|
-
</ng-template>
|
26
|
-
</e-pane>
|
27
|
-
</e-panes>
|
28
|
-
</ejs-splitter>
|
29
|
-
</div>
|
30
|
-
</div>
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { Component, ViewEncapsulation } from '@angular/core';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Horizontal Splitter sample
|
5
|
-
*/
|
6
|
-
@Component({
|
7
|
-
selector: '<%=dasherize(selector)%>',
|
8
|
-
templateUrl: '<%=dasherize(name)%>.component.html',
|
9
|
-
styleUrls: ['<%=dasherize(name)%>.component.css'],
|
10
|
-
encapsulation: ViewEncapsulation.None
|
11
|
-
})
|
12
|
-
export class <%= classify(name) %>Component { }
|
@@ -1,125 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "http://json-schema.org/schema",
|
3
|
-
"$id": "EJ2SchemaTemplateID",
|
4
|
-
"title": "splitter-horizontalsplitter",
|
5
|
-
"type": "object",
|
6
|
-
"properties": {
|
7
|
-
"path": {
|
8
|
-
"type": "string",
|
9
|
-
"format": "path",
|
10
|
-
"description": "The path to create the component.",
|
11
|
-
"visible": false
|
12
|
-
},
|
13
|
-
"project": {
|
14
|
-
"type": "string",
|
15
|
-
"description": "The name of the project.",
|
16
|
-
"$default": {
|
17
|
-
"$source": "projectName"
|
18
|
-
}
|
19
|
-
},
|
20
|
-
"name": {
|
21
|
-
"type": "string",
|
22
|
-
"description": "The name of the component.",
|
23
|
-
"$default": {
|
24
|
-
"$source": "argv",
|
25
|
-
"index": 0
|
26
|
-
}
|
27
|
-
},
|
28
|
-
"inlineStyle": {
|
29
|
-
"description": "Specifies if the style will be in the ts file.",
|
30
|
-
"type": "boolean",
|
31
|
-
"default": false,
|
32
|
-
"alias": "s"
|
33
|
-
},
|
34
|
-
"inlineTemplate": {
|
35
|
-
"description": "Specifies if the template will be in the ts file.",
|
36
|
-
"type": "boolean",
|
37
|
-
"default": false,
|
38
|
-
"alias": "t"
|
39
|
-
},
|
40
|
-
"viewEncapsulation": {
|
41
|
-
"description": "Specifies the view encapsulation strategy.",
|
42
|
-
"enum": [
|
43
|
-
"Emulated",
|
44
|
-
"Native",
|
45
|
-
"None",
|
46
|
-
"ShadowDom"
|
47
|
-
],
|
48
|
-
"type": "string",
|
49
|
-
"alias": "v"
|
50
|
-
},
|
51
|
-
"changeDetection": {
|
52
|
-
"description": "Specifies the change detection strategy.",
|
53
|
-
"enum": [
|
54
|
-
"Default",
|
55
|
-
"OnPush"
|
56
|
-
],
|
57
|
-
"type": "string",
|
58
|
-
"default": "Default",
|
59
|
-
"alias": "c"
|
60
|
-
},
|
61
|
-
"prefix": {
|
62
|
-
"type": "string",
|
63
|
-
"description": "The prefix to apply to generated selectors.",
|
64
|
-
"alias": "p",
|
65
|
-
"oneOf": [
|
66
|
-
{
|
67
|
-
"maxLength": 0
|
68
|
-
},
|
69
|
-
{
|
70
|
-
"minLength": 1,
|
71
|
-
"format": "html-selector"
|
72
|
-
}
|
73
|
-
]
|
74
|
-
},
|
75
|
-
"styleext": {
|
76
|
-
"description": "The file extension to be used for style files.",
|
77
|
-
"type": "string",
|
78
|
-
"default": "css"
|
79
|
-
},
|
80
|
-
"spec": {
|
81
|
-
"type": "boolean",
|
82
|
-
"description": "Specifies if a spec file is generated.",
|
83
|
-
"default": true
|
84
|
-
},
|
85
|
-
"flat": {
|
86
|
-
"type": "boolean",
|
87
|
-
"description": "Flag to indicate if a dir is created.",
|
88
|
-
"default": false
|
89
|
-
},
|
90
|
-
"skipImport": {
|
91
|
-
"type": "boolean",
|
92
|
-
"description": "Flag to skip the module import.",
|
93
|
-
"default": false
|
94
|
-
},
|
95
|
-
"selector": {
|
96
|
-
"type": "string",
|
97
|
-
"format": "html-selector",
|
98
|
-
"description": "The selector to use for the component."
|
99
|
-
},
|
100
|
-
"module": {
|
101
|
-
"type": "string",
|
102
|
-
"description": "Allows specification of the declaring module.",
|
103
|
-
"alias": "m"
|
104
|
-
},
|
105
|
-
"export": {
|
106
|
-
"type": "boolean",
|
107
|
-
"default": false,
|
108
|
-
"description": "Specifies if declaring module exports the component."
|
109
|
-
},
|
110
|
-
"entryComponent": {
|
111
|
-
"type": "boolean",
|
112
|
-
"default": false,
|
113
|
-
"description": "Specifies if the component is an entry component of declaring module."
|
114
|
-
},
|
115
|
-
"lintFix": {
|
116
|
-
"type": "boolean",
|
117
|
-
"default": false,
|
118
|
-
"description": "Specifies whether to apply lint fixes after generating the component."
|
119
|
-
}
|
120
|
-
},
|
121
|
-
"required": [
|
122
|
-
"name"
|
123
|
-
],
|
124
|
-
"id": "splitter-horizontalsplitter"
|
125
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
|
4
|
-
const sampleDetails = require("./sample-details");
|
5
|
-
function default_1(options) {
|
6
|
-
return schematics_1.componentBuilder(options, sampleDetails);
|
7
|
-
}
|
8
|
-
exports.default = default_1;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Rule } from '@angular-devkit/schematics';
|
2
|
-
import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
|
3
|
-
import { Schema } from './schema';
|
4
|
-
import * as sampleDetails from './sample-details';
|
5
|
-
|
6
|
-
export default function (options: Schema): Rule {
|
7
|
-
return componentBuilder(options, sampleDetails);
|
8
|
-
}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.componentName = 'splitter';
|
4
|
-
exports.sampleName = 'nestedsplitter';
|
5
|
-
exports.diModules = null;
|
6
|
-
exports.packageName = '@syncfusion/ej2-angular-layouts';
|
7
|
-
exports.libModules = 'SplitterModule';
|
@@ -1,29 +0,0 @@
|
|
1
|
-
.code-editor #code-text {
|
2
|
-
margin-left: 5px;
|
3
|
-
}
|
4
|
-
.code-editor .code-preview {
|
5
|
-
margin-top: 15px;
|
6
|
-
font-size: 12px;
|
7
|
-
}
|
8
|
-
.code-editor#target {
|
9
|
-
margin: 20px auto;
|
10
|
-
max-width: 740px;
|
11
|
-
}
|
12
|
-
.code-editor.control-section{
|
13
|
-
min-height: 370px;
|
14
|
-
margin-bottom: 15px;
|
15
|
-
margin-top: 10px;
|
16
|
-
}
|
17
|
-
.code-editor .h3 {
|
18
|
-
font-size: 14px;
|
19
|
-
margin: 4px;
|
20
|
-
}
|
21
|
-
.code-editor .content {
|
22
|
-
padding: 12px;
|
23
|
-
}
|
24
|
-
.code-editor .splitter-image {
|
25
|
-
margin: 0 auto;
|
26
|
-
display: flex;
|
27
|
-
height: 115px;
|
28
|
-
margin-top: 10px;
|
29
|
-
}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
<div id="target" class="control-section code-editor">
|
2
|
-
<ejs-splitter #splitterInstance id="outerSplitter" (created)='onCreated()' orientation='Vertical' height='450px' width='100%'>
|
3
|
-
<e-panes>
|
4
|
-
<e-pane size='53%' min='30%'></e-pane>
|
5
|
-
<e-pane>
|
6
|
-
<ng-template #content>
|
7
|
-
<div class="content">
|
8
|
-
<h3 class="h3">Preview of sample</h3>
|
9
|
-
<div class="splitter-image">
|
10
|
-
<img class="img1" src= "https://ej2.syncfusion.com/angular/demos/src/listview/images/albert.png" style="width: 20%;margin: 0 auto;">
|
11
|
-
</div>
|
12
|
-
</div>
|
13
|
-
</ng-template>
|
14
|
-
</e-pane>
|
15
|
-
</e-panes>
|
16
|
-
</ejs-splitter>
|
17
|
-
</div>
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import { Component, ViewChild , ViewEncapsulation } from '@angular/core';
|
2
|
-
import { SplitterComponent} from '@syncfusion/ej2-angular-layouts';
|
3
|
-
import { Splitter } from '@syncfusion/ej2-layouts';
|
4
|
-
/**
|
5
|
-
* Nested Splitter sample
|
6
|
-
*/
|
7
|
-
@Component({
|
8
|
-
selector: '<%=dasherize(selector)%>',
|
9
|
-
templateUrl: '<%=dasherize(name)%>.component.html',
|
10
|
-
styleUrls: ['<%=dasherize(name)%>.component.css'],
|
11
|
-
encapsulation: ViewEncapsulation.None
|
12
|
-
})
|
13
|
-
export class <%= classify(name) %>Component {
|
14
|
-
@ViewChild('splitterInstance') splitterObj: SplitterComponent;
|
15
|
-
|
16
|
-
public HTMLcontent: string = '<div><div class="content"><h3 class="h3">HTML</h3><div class="code-preview"><<span>!DOCTYPE html></span><div><<span>html></span></div>' +
|
17
|
-
'<div><<span>body></span></div><<span>div</span> id="custom-image"><div style="margin-left: 5px"><<span>img</span> src="https://ej2.syncfusion.com/angular/demos/src/albert.png"></div>' +
|
18
|
-
"<div><<span>div</span>></div><div><<span>/body></span></div><div><<span>/html></span></div></div></div></div>";
|
19
|
-
public CSScontent: string = '<div><div class="content"><h3 class="h3">CSS</h3><div class="code-preview"><span>img {</span><div id="code-text">margin:<span>0 auto;</span></div>' +
|
20
|
-
'<div id="code-text">display:<span>flex;</span></div><div id="code-text">height:<span>70px;</span></div><span>}</span></div></div></div>';
|
21
|
-
public javascriptContent: string = '<div><div class="content"><h3 class="h3">JavaScript</h3><div class="code-preview"><span>var </span>'
|
22
|
-
+ 'image = document.getElementById("custom-image");<div>image.addEventListener("click", function() {</div>'
|
23
|
-
+ '<div style="padding-left: 20px;">// Code block for click action</div><span> }</span></div></div></div>';
|
24
|
-
|
25
|
-
public onCreated () {
|
26
|
-
document.getElementById('outerSplitter').querySelector('.e-pane-vertical').setAttribute('id', 'Innersplitter');
|
27
|
-
let splitterObj = new Splitter({
|
28
|
-
height: '220px',
|
29
|
-
paneSettings: [
|
30
|
-
{ size: '50%', min: '23%', content: this.HTMLcontent },
|
31
|
-
{ size: '20%', min: '15%', content: this.CSScontent },
|
32
|
-
{ size: '30%', min: '25%', content: this.javascriptContent }
|
33
|
-
],
|
34
|
-
width: '100%'
|
35
|
-
});
|
36
|
-
splitterObj.appendTo('#Innersplitter');
|
37
|
-
}
|
38
|
-
}
|
@@ -1,125 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "http://json-schema.org/schema",
|
3
|
-
"$id": "EJ2SchemaTemplateID",
|
4
|
-
"title": "splitter-nestedsplitter",
|
5
|
-
"type": "object",
|
6
|
-
"properties": {
|
7
|
-
"path": {
|
8
|
-
"type": "string",
|
9
|
-
"format": "path",
|
10
|
-
"description": "The path to create the component.",
|
11
|
-
"visible": false
|
12
|
-
},
|
13
|
-
"project": {
|
14
|
-
"type": "string",
|
15
|
-
"description": "The name of the project.",
|
16
|
-
"$default": {
|
17
|
-
"$source": "projectName"
|
18
|
-
}
|
19
|
-
},
|
20
|
-
"name": {
|
21
|
-
"type": "string",
|
22
|
-
"description": "The name of the component.",
|
23
|
-
"$default": {
|
24
|
-
"$source": "argv",
|
25
|
-
"index": 0
|
26
|
-
}
|
27
|
-
},
|
28
|
-
"inlineStyle": {
|
29
|
-
"description": "Specifies if the style will be in the ts file.",
|
30
|
-
"type": "boolean",
|
31
|
-
"default": false,
|
32
|
-
"alias": "s"
|
33
|
-
},
|
34
|
-
"inlineTemplate": {
|
35
|
-
"description": "Specifies if the template will be in the ts file.",
|
36
|
-
"type": "boolean",
|
37
|
-
"default": false,
|
38
|
-
"alias": "t"
|
39
|
-
},
|
40
|
-
"viewEncapsulation": {
|
41
|
-
"description": "Specifies the view encapsulation strategy.",
|
42
|
-
"enum": [
|
43
|
-
"Emulated",
|
44
|
-
"Native",
|
45
|
-
"None",
|
46
|
-
"ShadowDom"
|
47
|
-
],
|
48
|
-
"type": "string",
|
49
|
-
"alias": "v"
|
50
|
-
},
|
51
|
-
"changeDetection": {
|
52
|
-
"description": "Specifies the change detection strategy.",
|
53
|
-
"enum": [
|
54
|
-
"Default",
|
55
|
-
"OnPush"
|
56
|
-
],
|
57
|
-
"type": "string",
|
58
|
-
"default": "Default",
|
59
|
-
"alias": "c"
|
60
|
-
},
|
61
|
-
"prefix": {
|
62
|
-
"type": "string",
|
63
|
-
"description": "The prefix to apply to generated selectors.",
|
64
|
-
"alias": "p",
|
65
|
-
"oneOf": [
|
66
|
-
{
|
67
|
-
"maxLength": 0
|
68
|
-
},
|
69
|
-
{
|
70
|
-
"minLength": 1,
|
71
|
-
"format": "html-selector"
|
72
|
-
}
|
73
|
-
]
|
74
|
-
},
|
75
|
-
"styleext": {
|
76
|
-
"description": "The file extension to be used for style files.",
|
77
|
-
"type": "string",
|
78
|
-
"default": "css"
|
79
|
-
},
|
80
|
-
"spec": {
|
81
|
-
"type": "boolean",
|
82
|
-
"description": "Specifies if a spec file is generated.",
|
83
|
-
"default": true
|
84
|
-
},
|
85
|
-
"flat": {
|
86
|
-
"type": "boolean",
|
87
|
-
"description": "Flag to indicate if a dir is created.",
|
88
|
-
"default": false
|
89
|
-
},
|
90
|
-
"skipImport": {
|
91
|
-
"type": "boolean",
|
92
|
-
"description": "Flag to skip the module import.",
|
93
|
-
"default": false
|
94
|
-
},
|
95
|
-
"selector": {
|
96
|
-
"type": "string",
|
97
|
-
"format": "html-selector",
|
98
|
-
"description": "The selector to use for the component."
|
99
|
-
},
|
100
|
-
"module": {
|
101
|
-
"type": "string",
|
102
|
-
"description": "Allows specification of the declaring module.",
|
103
|
-
"alias": "m"
|
104
|
-
},
|
105
|
-
"export": {
|
106
|
-
"type": "boolean",
|
107
|
-
"default": false,
|
108
|
-
"description": "Specifies if declaring module exports the component."
|
109
|
-
},
|
110
|
-
"entryComponent": {
|
111
|
-
"type": "boolean",
|
112
|
-
"default": false,
|
113
|
-
"description": "Specifies if the component is an entry component of declaring module."
|
114
|
-
},
|
115
|
-
"lintFix": {
|
116
|
-
"type": "boolean",
|
117
|
-
"default": false,
|
118
|
-
"description": "Specifies whether to apply lint fixes after generating the component."
|
119
|
-
}
|
120
|
-
},
|
121
|
-
"required": [
|
122
|
-
"name"
|
123
|
-
],
|
124
|
-
"id": "splitter-nestedsplitter"
|
125
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
|
4
|
-
const sampleDetails = require("./sample-details");
|
5
|
-
function default_1(options) {
|
6
|
-
return schematics_1.componentBuilder(options, sampleDetails);
|
7
|
-
}
|
8
|
-
exports.default = default_1;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Rule } from '@angular-devkit/schematics';
|
2
|
-
import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
|
3
|
-
import { Schema } from './schema';
|
4
|
-
import * as sampleDetails from './sample-details';
|
5
|
-
|
6
|
-
export default function (options: Schema): Rule {
|
7
|
-
return componentBuilder(options, sampleDetails);
|
8
|
-
}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.componentName = 'splitter';
|
4
|
-
exports.sampleName = 'verticalsplitter';
|
5
|
-
exports.diModules = null;
|
6
|
-
exports.packageName = '@syncfusion/ej2-angular-layouts';
|
7
|
-
exports.libModules = 'SplitterModule';
|
@@ -1,20 +0,0 @@
|
|
1
|
-
#pane-heading {
|
2
|
-
font-size: 16px;
|
3
|
-
margin-bottom: 10px;
|
4
|
-
}
|
5
|
-
.pane1 {
|
6
|
-
margin: 20px auto;
|
7
|
-
max-width: 440px;
|
8
|
-
}
|
9
|
-
.control-section {
|
10
|
-
min-height: 370px;
|
11
|
-
margin-bottom: 15px;
|
12
|
-
margin-top: 10px;
|
13
|
-
}
|
14
|
-
.vertical-splitter .content {
|
15
|
-
text-align: center;
|
16
|
-
align-items: center;
|
17
|
-
justify-content: center;
|
18
|
-
display: grid;
|
19
|
-
height: 100%;
|
20
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
<div id="target" class="control-section vertical-splitter">
|
2
|
-
<div class="pane1">
|
3
|
-
<div id="pane-heading">Vertical Splitter</div>
|
4
|
-
<ejs-splitter #vertical height='250px' orientation='Vertical' width='100%' >
|
5
|
-
<e-panes>
|
6
|
-
<e-pane size='25%' min='60px'>
|
7
|
-
<ng-template #content>
|
8
|
-
<div class="content">
|
9
|
-
<div>Top pane</div>
|
10
|
-
</div>
|
11
|
-
</ng-template>
|
12
|
-
</e-pane>
|
13
|
-
<e-pane size='50%' min='60px'>
|
14
|
-
<ng-template #content>
|
15
|
-
<div class="content">
|
16
|
-
<span>Middle pane</span>
|
17
|
-
</div>
|
18
|
-
</ng-template>
|
19
|
-
</e-pane>
|
20
|
-
<e-pane size='25%' min='60px'>
|
21
|
-
<ng-template #content>
|
22
|
-
<div class="content">
|
23
|
-
<span>Bottom pane</span>
|
24
|
-
</div>
|
25
|
-
</ng-template>
|
26
|
-
</e-pane>
|
27
|
-
|
28
|
-
</e-panes>
|
29
|
-
</ejs-splitter>
|
30
|
-
</div>
|
31
|
-
</div>
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { Component, ViewEncapsulation } from '@angular/core';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Vertical Splitter sample
|
5
|
-
*/
|
6
|
-
@Component({
|
7
|
-
selector: '<%=dasherize(selector)%>',
|
8
|
-
templateUrl: '<%=dasherize(name)%>.component.html',
|
9
|
-
styleUrls: ['<%=dasherize(name)%>.component.css'],
|
10
|
-
encapsulation: ViewEncapsulation.None
|
11
|
-
})
|
12
|
-
export class <%= classify(name) %>Component { }
|