Skip to content

Commit 78cfa2f

Browse files
bmarkovbmarkov
committed
update editor demos
1 parent ae9453b commit 78cfa2f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+3405
-0
lines changed

‎demos/editor/content-filtering/angular.json‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"demo": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {},
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/demo",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "src/tsconfig.app.json",
21+
"assets": [
22+
"src/assets"
23+
],
24+
"styles": [
25+
"./node_modules/@smart-webcomponents-angular/multicomboinput/styles/smart.base.css",
26+
"./node_modules/@smart-webcomponents-angular/multicomboinput/styles/smart.multicomboinput.css",
27+
"./node_modules/@smart-webcomponents-angular/input/styles/smart.input.css",
28+
"./node_modules/@smart-webcomponents-angular/editor/styles/smart.editor.css",
29+
"./node_modules/@smart-webcomponents-angular/multicomboinput/styles/smart.common.css",
30+
"src/assets/fonts.css",
31+
"src/assets/styles.css"
32+
],
33+
"scripts": []
34+
},
35+
"configurations": {
36+
"production": {
37+
"fileReplacements": [
38+
{
39+
"replace": "src/environments/environment.ts",
40+
"with": "src/environments/environment.prod.ts"
41+
}
42+
],
43+
"optimization": false,
44+
"outputHashing": "all",
45+
"sourceMap": false,
46+
"extractCss": true,
47+
"namedChunks": false,
48+
"aot": true,
49+
"extractLicenses": true,
50+
"vendorChunk": false,
51+
"buildOptimizer": false
52+
}
53+
}
54+
},
55+
"serve": {
56+
"builder": "@angular-devkit/build-angular:dev-server",
57+
"options": {
58+
"browserTarget": "demo:build"
59+
},
60+
"configurations": {
61+
"production": {
62+
"browserTarget": "demo:build:production"
63+
}
64+
}
65+
},
66+
"extract-i18n": {
67+
"builder": "@angular-devkit/build-angular:extract-i18n",
68+
"options": {
69+
"browserTarget": "demo:build"
70+
}
71+
},
72+
"test": {
73+
"builder": "@angular-devkit/build-angular:karma",
74+
"options": {
75+
"main": "src/test.ts",
76+
"polyfills": "src/polyfills.ts",
77+
"tsConfig": "src/tsconfig.spec.json",
78+
"karmaConfig": "src/karma.conf.js",
79+
"styles": [
80+
"styles.css"
81+
],
82+
"scripts": [],
83+
"assets": [
84+
"src/favicon.ico",
85+
"src/assets"
86+
]
87+
}
88+
},
89+
"lint": {
90+
"builder": "@angular-devkit/build-angular:tslint",
91+
"options": {
92+
"tsConfig": [
93+
"src/tsconfig.app.json",
94+
"src/tsconfig.spec.json"
95+
],
96+
"exclude": [
97+
"**/node_modules/**"
98+
]
99+
}
100+
}
101+
}
102+
},
103+
"demo-e2e": {
104+
"root": "e2e/",
105+
"projectType": "application",
106+
"architect": {
107+
"e2e": {
108+
"builder": "@angular-devkit/build-angular:protractor",
109+
"options": {
110+
"protractorConfig": "e2e/protractor.conf.js",
111+
"devServerTarget": "demo:serve"
112+
}
113+
},
114+
"lint": {
115+
"builder": "@angular-devkit/build-angular:tslint",
116+
"options": {
117+
"tsConfig": "e2e/tsconfig.e2e.json",
118+
"exclude": [
119+
"**/node_modules/**"
120+
]
121+
}
122+
}
123+
}
124+
}
125+
},
126+
"defaultProject": "demo"
127+
}
128+

‎demos/editor/content-filtering/package.json‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "angular-editor-content-filtering",
3+
"description": "Angular editor content-filtering example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)",
4+
"version": "1.0.1",
5+
"homepage": "https://www.htmlelements.com/",
6+
"dependencies": {
7+
"@angular/animations": "^11.2.3",
8+
"@angular/elements": "^11.2.3",
9+
"@angular/common": "^11.2.3",
10+
"@angular/compiler": "^11.2.3",
11+
"@angular/core": "^11.2.3",
12+
"@angular/forms": "^11.2.3",
13+
"@angular/platform-browser": "^11.2.3",
14+
"@angular/platform-browser-dynamic": "^11.2.3",
15+
"@angular/router": "^11.2.3",
16+
"@types/jasmine": "^3.6.6",
17+
"@types/jasminewd2": "^2.0.8",
18+
"@types/node": "^14.14.31",
19+
"core-js": "3.9.1",
20+
"moment": "^2.29.1",
21+
"@smart-webcomponents-angular/multicomboinput": "9.4.1",
22+
"@smart-webcomponents-angular/input": "9.4.1",
23+
"@smart-webcomponents-angular/editor": "9.4.1",
24+
"rxjs": "^6.6.6",
25+
"zone.js": "^0.11.4"
26+
},
27+
"scripts": {
28+
"ng": "ng",
29+
"start": "ng serve",
30+
"build": "ng build",
31+
"test": "ng test",
32+
"lint": "ng lint",
33+
"e2e": "ng e2e"
34+
},
35+
"devDependencies": {
36+
"@angular-devkit/build-angular": "~0.901.1",
37+
"@angular/cli": "~11.2.3",
38+
"@angular/compiler-cli": "~11.2.3",
39+
"@angular/language-service": "~11.2.3",
40+
"@types/node": "^14.14.35",
41+
"codelyzer": "^5.1.2",
42+
"jasmine-core": "~3.5.0",
43+
"jasmine-spec-reporter": "~4.2.1",
44+
"karma": "~4.4.1",
45+
"karma-chrome-launcher": "~3.1.0",
46+
"karma-coverage-istanbul-reporter": "~2.1.0",
47+
"karma-jasmine": "~3.0.1",
48+
"karma-jasmine-html-reporter": "^1.4.2",
49+
"protractor": "~5.4.3",
50+
"ts-node": "~8.3.0",
51+
"tslint": "~6.1.0",
52+
"typescript": "~4.1.5"
53+
}
54+
}

‎demos/editor/content-filtering/src/app/app.component.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html,
2+
body {
3+
width: 100%;
4+
height: 100%;
5+
margin: 0 auto;
6+
}
7+
8+
.smart-editor {
9+
width: calc(100% - 300px);
10+
height: 100%;
11+
}
12+
13+
@media (max-width: 750px) {
14+
.smart-editor {
15+
width: 100%;
16+
}
17+
}
18+
19+
.options {
20+
padding: 20px;
21+
background-color: rgba(191, 191, 191, .15);
22+
position: absolute;
23+
right: 0;
24+
top: 0;
25+
bottom: 0;
26+
width: 260px
27+
}
28+
29+
@media (max-width: 750px) {
30+
.options {
31+
position: relative;
32+
top: 30px;
33+
width: 240px;
34+
margin: 0 auto;
35+
}
36+
}
37+
38+
.options smart-input {
39+
margin-bottom: 10px;
40+
}
41+
42+
.smart-editor .section {
43+
display: grid;
44+
grid-template-columns: minmax(0, 1fr) auto;
45+
grid-column-gap: 20px;
46+
}
47+
48+
.smart-editor .section img {
49+
border: 1px dashed var(--smart-border);
50+
padding: 10px;
51+
}
52+
53+
.smart-editor .section table {
54+
table-layout: initial;
55+
}
56+
57+
.smart-editor .section table img {
58+
padding: initial;
59+
border: initial;
60+
}

‎demos/editor/content-filtering/src/app/app.component.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<smart-editor #editor id="editor" [contentFiltering]="contentFiltering"></smart-editor>
2+
<div #options class="options">
3+
<div class="description">
4+
<h4>Content Filtering</h4>
5+
<p><b>Smart.Editor</b> allows to filter out elements, element attributes or
6+
element style attributes via it's <b>contentFiltering</b> property.</p>
7+
<p>Making changes to the editor below will automatically refresh the content
8+
of the Editor based on the new settings.</p>
9+
</div>
10+
<div class="option">
11+
<h4>Tag Filter Settings:</h4>
12+
<smart-input #input id="tagFilterMode" [dropDownButtonPosition]="inputProps.dropDownButtonPosition"
13+
[readonly]="inputProps.readonly" [dataSource]="inputProps.dataSource" [value]="inputValue"></smart-input>
14+
<smart-multi-combo-input #multicomboinput id="tags" [dropDownButtonPosition]="dropDownButtonPosition"
15+
[dataSource]="tags" [value]="tags.toString()"></smart-multi-combo-input>
16+
</div>
17+
<div class="option">
18+
<h4>Attribute Filter Settings:</h4>
19+
<smart-input #input2 id="attributeFilterMode" [dropDownButtonPosition]="inputProps.dropDownButtonPosition"
20+
[readonly]="inputProps.readonly" [dataSource]="inputProps.dataSource"
21+
[value]="inputValue2"></smart-input>
22+
<smart-multi-combo-input #multicomboinput2 id="attributes" [dropDownButtonPosition]="dropDownButtonPosition"
23+
[dataSource]="attributes" [value]="attributes.toString()"></smart-multi-combo-input>
24+
</div>
25+
<div class="option">
26+
<h4>Style Attribute Filter Settings:</h4>
27+
<smart-input #input3 id="styleAttributeFilterMode" [dropDownButtonPosition]="inputProps.dropDownButtonPosition"
28+
[readonly]="inputProps.readonly" [dataSource]="inputProps.dataSource"
29+
[value]="inputValue3"></smart-input>
30+
<smart-multi-combo-input #multicomboinput3 id="styleAttributes"
31+
[dropDownButtonPosition]="dropDownButtonPosition" [dataSource]="styleAttributes"
32+
[value]="styleAttributes.toString()"></smart-multi-combo-input>
33+
</div>
34+
</div>

0 commit comments

Comments
 (0)