@c8y/tutorial 1019.7.15 → 1019.8.1
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/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c8y/tutorial",
|
|
3
|
-
"version": "1019.
|
|
3
|
+
"version": "1019.8.1",
|
|
4
4
|
"description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@c8y/devkit": "1019.
|
|
7
|
-
"@c8y/style": "1019.
|
|
8
|
-
"@c8y/ngx-components": "1019.
|
|
9
|
-
"@c8y/client": "1019.
|
|
10
|
-
"@c8y/bootstrap": "1019.
|
|
6
|
+
"@c8y/devkit": "1019.8.1",
|
|
7
|
+
"@c8y/style": "1019.8.1",
|
|
8
|
+
"@c8y/ngx-components": "1019.8.1",
|
|
9
|
+
"@c8y/client": "1019.8.1",
|
|
10
|
+
"@c8y/bootstrap": "1019.8.1",
|
|
11
11
|
"@angular/cdk": "^16.2.11",
|
|
12
12
|
"ngx-bootstrap": "11.0.2",
|
|
13
13
|
"leaflet": "1.7.1",
|
|
@@ -5,22 +5,79 @@ import { CoreModule } from '@c8y/ngx-components';
|
|
|
5
5
|
selector: 'c8y-range-input-example',
|
|
6
6
|
template: `<c8y-title> Range Input examples </c8y-title>
|
|
7
7
|
<div class="p-t-24">
|
|
8
|
-
<div class="
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
</
|
|
21
|
-
</
|
|
22
|
-
<
|
|
23
|
-
|
|
8
|
+
<div class="row">
|
|
9
|
+
<div class="col-md-6">
|
|
10
|
+
<div class="form-group">
|
|
11
|
+
<label for="range1">valueDisplayMode inline (default) </label>
|
|
12
|
+
<c8y-range>
|
|
13
|
+
<input id="range1" type="range" min="0" max="100" steps="1" />
|
|
14
|
+
</c8y-range>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="form-group">
|
|
17
|
+
<label for="range2">valueDisplayMode start</label>
|
|
18
|
+
<c8y-range valueDisplayMode="start">
|
|
19
|
+
<input id="range2" type="range" min="0" max="100" steps="1" />
|
|
20
|
+
</c8y-range>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="form-group">
|
|
23
|
+
<label for="range3">valueDisplayMode end</label>
|
|
24
|
+
<c8y-range valueDisplayMode="end">
|
|
25
|
+
<input id="range3" type="range" min="0" max="100" steps="1" />
|
|
26
|
+
</c8y-range>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="form-group">
|
|
29
|
+
<label for="range4">valueDisplayMode pop</label>
|
|
30
|
+
<c8y-range valueDisplayMode="pop">
|
|
31
|
+
<input id="range4" type="range" min="0" max="100" steps="1" />
|
|
32
|
+
</c8y-range>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="col-md-6">
|
|
36
|
+
<div class="form-group">
|
|
37
|
+
<label for="range5">Custom label with valueDisplayMode inline (default)</label>
|
|
38
|
+
<c8y-range #range5>
|
|
39
|
+
<ng-template #c8yRangeValue>
|
|
40
|
+
<span>
|
|
41
|
+
<span>The <strong>Value</strong> is: {{ range5.value }}</span>
|
|
42
|
+
</span>
|
|
43
|
+
</ng-template>
|
|
44
|
+
<input id="range5" type="range" min="0" max="100" steps="1" />
|
|
45
|
+
</c8y-range>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="form-group">
|
|
48
|
+
<label for="range6">Custom label with valueDisplayMode start</label>
|
|
49
|
+
<c8y-range #range6 valueDisplayMode="start">
|
|
50
|
+
<ng-template #c8yRangeValue>
|
|
51
|
+
<span>
|
|
52
|
+
<span>The <strong>Value</strong> is: {{ range6.value }}</span>
|
|
53
|
+
</span>
|
|
54
|
+
</ng-template>
|
|
55
|
+
<input id="range6" type="range" min="0" max="100" steps="1" />
|
|
56
|
+
</c8y-range>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="form-group">
|
|
59
|
+
<label for="range7">Custom label with valueDisplayMode end</label>
|
|
60
|
+
<c8y-range #range7 valueDisplayMode="end">
|
|
61
|
+
<ng-template #c8yRangeValue>
|
|
62
|
+
<span>
|
|
63
|
+
<span>The <strong>Value</strong> is: {{ range7.value }}</span>
|
|
64
|
+
</span>
|
|
65
|
+
</ng-template>
|
|
66
|
+
<input id="range7" type="range" min="0" max="100" steps="1" />
|
|
67
|
+
</c8y-range>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="form-group">
|
|
70
|
+
<label for="range8">Custom label with valueDisplayMode pop</label>
|
|
71
|
+
<c8y-range #range8 valueDisplayMode="pop">
|
|
72
|
+
<ng-template #c8yRangeValue>
|
|
73
|
+
<span>
|
|
74
|
+
<span>The <strong>Value</strong> is: {{ range8.value }}</span>
|
|
75
|
+
</span>
|
|
76
|
+
</ng-template>
|
|
77
|
+
<input id="range8" type="range" min="0" max="100" steps="1" />
|
|
78
|
+
</c8y-range>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
24
81
|
</div>
|
|
25
82
|
</div>`,
|
|
26
83
|
standalone: true,
|