@ssv/ngx.ux 2.0.2 → 2.1.0-dev.9
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/LICENSE +21 -21
- package/README.md +297 -297
- package/config.d.ts +7 -7
- package/esm2020/config.mjs +7 -7
- package/esm2020/index.mjs +5 -5
- package/esm2020/internal/internal.model.mjs +2 -2
- package/esm2020/module.mjs +65 -65
- package/esm2020/platform/window.mjs +30 -30
- package/esm2020/ssv-ngx.ux.mjs +4 -4
- package/esm2020/version.mjs +2 -2
- package/esm2020/viewport/index.mjs +9 -9
- package/esm2020/viewport/viewport-data/index.mjs +4 -4
- package/esm2020/viewport/viewport-data/viewport-data-matcher.mjs +108 -108
- package/esm2020/viewport/viewport-data/viewport-data.pipe.mjs +43 -43
- package/esm2020/viewport/viewport-data/viewport-data.service.mjs +37 -37
- package/esm2020/viewport/viewport-data/viewport-data.utils.mjs +100 -100
- package/esm2020/viewport/viewport-matcher-var.directive.mjs +63 -63
- package/esm2020/viewport/viewport-matcher.directive.mjs +131 -131
- package/esm2020/viewport/viewport-server-size.service.mjs +43 -43
- package/esm2020/viewport/viewport.const.mjs +18 -18
- package/esm2020/viewport/viewport.model.mjs +31 -31
- package/esm2020/viewport/viewport.service.mjs +66 -67
- package/esm2020/viewport/viewport.util.mjs +117 -117
- package/fesm2015/ssv-ngx.ux.mjs +789 -790
- package/fesm2015/ssv-ngx.ux.mjs.map +1 -1
- package/fesm2020/ssv-ngx.ux.mjs +783 -784
- package/fesm2020/ssv-ngx.ux.mjs.map +1 -1
- package/index.d.ts +4 -4
- package/internal/internal.model.d.ts +9 -9
- package/module.d.ts +19 -19
- package/package.json +1 -1
- package/platform/window.d.ts +13 -13
- package/version.d.ts +1 -1
- package/viewport/index.d.ts +8 -8
- package/viewport/viewport-data/index.d.ts +3 -3
- package/viewport/viewport-data/viewport-data-matcher.d.ts +32 -32
- package/viewport/viewport-data/viewport-data.pipe.d.ts +18 -18
- package/viewport/viewport-data/viewport-data.service.d.ts +20 -20
- package/viewport/viewport-data/viewport-data.utils.d.ts +21 -21
- package/viewport/viewport-matcher-var.directive.d.ts +25 -25
- package/viewport/viewport-matcher.directive.d.ts +33 -33
- package/viewport/viewport-server-size.service.d.ts +12 -12
- package/viewport/viewport.const.d.ts +5 -5
- package/viewport/viewport.model.d.ts +57 -57
- package/viewport/viewport.service.d.ts +37 -37
- package/viewport/viewport.util.d.ts +25 -25
- package/CHANGELOG.md +0 -149
- package/bundles/ssv-ngx.ux.umd.js +0 -1219
- package/bundles/ssv-ngx.ux.umd.js.map +0 -1
- package/bundles/ssv-ngx.ux.umd.min.js +0 -16
- package/bundles/ssv-ngx.ux.umd.min.js.map +0 -1
- package/esm2015/config.js +0 -7
- package/esm2015/index.js +0 -5
- package/esm2015/internal/internal.model.js +0 -2
- package/esm2015/module.js +0 -50
- package/esm2015/platform/window.js +0 -28
- package/esm2015/ssv-ngx.ux.js +0 -7
- package/esm2015/version.js +0 -2
- package/esm2015/viewport/index.js +0 -9
- package/esm2015/viewport/viewport-data/index.js +0 -4
- package/esm2015/viewport/viewport-data/viewport-data-matcher.js +0 -108
- package/esm2015/viewport/viewport-data/viewport-data.pipe.js +0 -43
- package/esm2015/viewport/viewport-data/viewport-data.service.js +0 -38
- package/esm2015/viewport/viewport-data/viewport-data.utils.js +0 -100
- package/esm2015/viewport/viewport-matcher-var.directive.js +0 -64
- package/esm2015/viewport/viewport-matcher.directive.js +0 -134
- package/esm2015/viewport/viewport-server-size.service.js +0 -38
- package/esm2015/viewport/viewport.const.js +0 -18
- package/esm2015/viewport/viewport.model.js +0 -31
- package/esm2015/viewport/viewport.service.js +0 -69
- package/esm2015/viewport/viewport.util.js +0 -117
- package/fesm2015/ssv-ngx.ux.js +0 -807
- package/fesm2015/ssv-ngx.ux.js.map +0 -1
- package/ssv-ngx.ux.d.ts +0 -6
- package/ssv-ngx.ux.metadata.json +0 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2016
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2016
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,298 +1,298 @@
|
|
|
1
|
-
[projectUri]: https://github.com/sketch7/ngx.ux
|
|
2
|
-
[changeLog]: ./CHANGELOG.md
|
|
3
|
-
[releaseWorkflowWiki]: ./docs/RELEASE-WORKFLOW.md
|
|
4
|
-
|
|
5
|
-
[npm]: https://www.npmjs.com
|
|
6
|
-
|
|
7
|
-
# @ssv/ngx.ux
|
|
8
|
-
[](https://badge.fury.io/js/%40ssv%2Fngx.ux)
|
|
10
|
-
|
|
11
|
-
UX essentials for building apps, utilities which enables you writing richer apps easier.
|
|
12
|
-
|
|
13
|
-
**Quick links**
|
|
14
|
-
|
|
15
|
-
[Change logs][changeLog] | [Project Repository][projectUri]
|
|
16
|
-
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
Get library via [npm]
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install @ssv/ngx.ux
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Choose the version corresponding to your Angular version:
|
|
26
|
-
|
|
27
|
-
| Angular | library |
|
|
28
|
-
| ------- | ------- |
|
|
29
|
-
|
|
|
30
|
-
| 4 to 9 | 1.x+ |
|
|
31
|
-
|
|
32
|
-
## Features
|
|
33
|
-
- Viewport (see below)
|
|
34
|
-
- [Viewport Data](./src/viewport/viewport-data/README.md)
|
|
35
|
-
|
|
36
|
-
# Usage
|
|
37
|
-
|
|
38
|
-
## Register module
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
import { SsvUxModule } from "@ssv/ngx.ux";
|
|
42
|
-
|
|
43
|
-
@NgModule({
|
|
44
|
-
imports: [
|
|
45
|
-
SsvUxModule
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
export class AppModule {
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Viewport
|
|
53
|
-
Provides utilities to handle responsiveness easier based on the viewport (view size)
|
|
54
|
-
|
|
55
|
-
### Comparison Operands
|
|
56
|
-
| Operand | Description |
|
|
57
|
-
| ------- | --------------------- |
|
|
58
|
-
| = | Equals |
|
|
59
|
-
| <> | Not equals |
|
|
60
|
-
| < | Less than |
|
|
61
|
-
| <= | Less than or equal |
|
|
62
|
-
| > | Greater than |
|
|
63
|
-
| >= | Greater Than or equal |
|
|
64
|
-
|
|
65
|
-
<br>
|
|
66
|
-
|
|
67
|
-
### Size Types
|
|
68
|
-
These are the defaults, but they are configurable.
|
|
69
|
-
|
|
70
|
-
| Size Type | Size Range |
|
|
71
|
-
| --------- | ---------- |
|
|
72
|
-
| xsmall | <=450 |
|
|
73
|
-
| small | 451-767 |
|
|
74
|
-
| medium | 768-992 |
|
|
75
|
-
| large | 993-1280 |
|
|
76
|
-
| fhd | 1281-1920 |
|
|
77
|
-
| qhd | 1921-2560 |
|
|
78
|
-
| uhd4k | 2561-3840 |
|
|
79
|
-
| uhd8k | >=3841 |
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
### Viewport Matcher Attribute (directive)
|
|
83
|
-
Structural directive which loads components based on a viewport sizing condition e.g. show ONLY if viewport is greater than xlarge.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
#### Examples
|
|
87
|
-
|
|
88
|
-
```html
|
|
89
|
-
<!-- simple -->
|
|
90
|
-
<div *ssvViewportMatcher="'large'">
|
|
91
|
-
show only when large
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<!-- expression based - tuple (shorthand) *recommended usage* -->
|
|
95
|
-
<div *ssvViewportMatcher="['>=', 'xlarge']"> (see all operands and sizes)
|
|
96
|
-
show when >= xlarge
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
<!-- expression based - object -->
|
|
100
|
-
<div *ssvViewportMatcher="{size: 'xlarge', operation: '<='}"> (see all operands and sizes)
|
|
101
|
-
show when >= xlarge
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
<!-- includes -->
|
|
105
|
-
<div *ssvViewportMatcher="['large', 'xlarge']">
|
|
106
|
-
show only when large, xlarge
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<!-- excludes -->
|
|
110
|
-
<div *ssvViewportMatcher="''; exclude ['xsmall', 'small']">
|
|
111
|
-
hide only when xsmall, small
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<!-- match/else -->
|
|
115
|
-
<div *ssvViewportMatcher="['>=', 'xlarge']; else otherwise">
|
|
116
|
-
show when >= xlarge
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
<ng-template #otherwise>
|
|
120
|
-
show when expression is falsy (< xlarge)
|
|
121
|
-
</ng-template>
|
|
122
|
-
|
|
123
|
-
<!-- non structure syntax -->
|
|
124
|
-
<ng-template ssvViewportMatcher [ssvViewportMatcherExclude]="'xsmall'">
|
|
125
|
-
(exclude xsmall)
|
|
126
|
-
</ng-template>
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Viewport Matcher Var (directive)
|
|
130
|
-
Structural directive which provides the condition var whether it matches or not (params are similar to `ssvViewportMatcher`).
|
|
131
|
-
|
|
132
|
-
```html
|
|
133
|
-
<!-- simple -->
|
|
134
|
-
<div *ssvViewportMatcherVar="let isLarge when 'large'">
|
|
135
|
-
isLarge={{isLarge}}
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
<!-- expression based - tuple (shorthand) *recommended usage* -->
|
|
139
|
-
<div *ssvViewportMatcherVar="let isMediumDown when ['<=', 'medium']">
|
|
140
|
-
isMediumDown={{isMediumDown}}
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<!-- includes/or -->
|
|
144
|
-
<div *ssvViewportMatcherVar="let isLargeOrSmall when ['small', 'large']">
|
|
145
|
-
isLargeOrSmall={{isLargeOrSmall}}
|
|
146
|
-
</div>
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
### Viewport Service
|
|
150
|
-
|
|
151
|
-
```ts
|
|
152
|
-
// get size type
|
|
153
|
-
this.viewport.sizeType$.pipe(
|
|
154
|
-
tap(x => console.log("Viewport - sizeType changed", x)), // { type: 4, name: "xlarge", widthThreshold: 1500 }
|
|
155
|
-
).subscribe();
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### Viewport for SSR
|
|
159
|
-
Since in SSR there is no way to know the client viewport size, we should at least determine device type and handle provide
|
|
160
|
-
3 different sizes based on device type e.g. `mobile`, `tablet` or `desktop` so the initial rendering will be closer based on device type.
|
|
161
|
-
|
|
162
|
-
The basic implementation allows to provide a device type `mobile`, `tablet` or `desktop` and there are static sizes for those.
|
|
163
|
-
|
|
164
|
-
```ts
|
|
165
|
-
import { UX_VIEWPORT_SSR_DEVICE } from "@ssv/ngx.ux";
|
|
166
|
-
|
|
167
|
-
const deviceType = deviceTypeFromServer;
|
|
168
|
-
{ provide: UX_VIEWPORT_SSR_DEVICE, useValue: deviceType },
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
The default implementation can also be replaced by implementing a small class as following:
|
|
172
|
-
|
|
173
|
-
```ts
|
|
174
|
-
|
|
175
|
-
export class SuperViewportServerSizeService {
|
|
176
|
-
get(): ViewportSize {
|
|
177
|
-
// do your magic..
|
|
178
|
-
return size;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
import { ViewportServerSizeService } from "@ssv/ngx.ux";
|
|
183
|
-
|
|
184
|
-
@NgModule( {
|
|
185
|
-
providers: [
|
|
186
|
-
{ provide: ViewportServerSizeService, useClass: SuperViewportServerSizeService }
|
|
187
|
-
]
|
|
188
|
-
}) export class AppModule {
|
|
189
|
-
}
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
## Configure
|
|
194
|
-
You can configure the existing resize polling speed and as well as provide your custom breakpoints.
|
|
195
|
-
|
|
196
|
-
### Custom Breakpoints
|
|
197
|
-
```ts
|
|
198
|
-
import { SsvUxModule, generateViewportSizeType } from "@ssv/ngx.ux";
|
|
199
|
-
|
|
200
|
-
const breakpoints = { // custom breakpoints - key/width
|
|
201
|
-
smallest: 500,
|
|
202
|
-
small: 700,
|
|
203
|
-
medium: 1000,
|
|
204
|
-
large: 1400,
|
|
205
|
-
extralarge: 1600,
|
|
206
|
-
xxlarge: 1800,
|
|
207
|
-
fhd: 1920,
|
|
208
|
-
uhd: 3840
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
imports: [
|
|
212
|
-
SsvUxModule.forRoot({
|
|
213
|
-
viewport: {
|
|
214
|
-
resizePollingSpeed: 66, // optional - defaults to 33
|
|
215
|
-
breakpoints // provide the custom breakpoints
|
|
216
|
-
}
|
|
217
|
-
}),
|
|
218
|
-
],
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
### Override existing Breakpoints
|
|
222
|
-
```ts
|
|
223
|
-
import { SsvUxModule, UX_VIEWPORT_DEFAULT_BREAKPOINTS } from "@ssv/ngx.ux";
|
|
224
|
-
|
|
225
|
-
imports: [
|
|
226
|
-
SsvUxModule.forRoot({
|
|
227
|
-
viewport: {
|
|
228
|
-
breakpoints: {
|
|
229
|
-
...UX_VIEWPORT_DEFAULT_BREAKPOINTS, // use breakpoints provided with library
|
|
230
|
-
xxlarge1: 2000, // override xxlarge1
|
|
231
|
-
uhd: 3840 // add new breakpoint
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
}),
|
|
235
|
-
],
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
## Getting Started
|
|
240
|
-
|
|
241
|
-
### Setup Machine for Development
|
|
242
|
-
Install/setup the following:
|
|
243
|
-
|
|
244
|
-
- NodeJS v10+
|
|
245
|
-
- Visual Studio Code or similar code editor
|
|
246
|
-
- TypeScript 3.1+
|
|
247
|
-
- Git + SourceTree, SmartGit or similar (optional)
|
|
248
|
-
- Ensure to install **global NPM modules** using the following:
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
```bash
|
|
252
|
-
npm install -g git gulp devtool
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
### Project Setup
|
|
257
|
-
The following process need to be executed in order to get started.
|
|
258
|
-
|
|
259
|
-
```bash
|
|
260
|
-
npm install
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
### Building the code
|
|
265
|
-
|
|
266
|
-
```bash
|
|
267
|
-
npm run build
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
### Running the tests
|
|
271
|
-
|
|
272
|
-
```bash
|
|
273
|
-
npm test
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
#### Watch
|
|
277
|
-
Handles compiling of changes.
|
|
278
|
-
|
|
279
|
-
```bash
|
|
280
|
-
npm start
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
#### Running Continuous Tests
|
|
285
|
-
Spawns test runner and keep watching for changes.
|
|
286
|
-
|
|
287
|
-
```bash
|
|
288
|
-
npm run tdd
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
### Preparation for Release
|
|
293
|
-
|
|
294
|
-
- Update changelogs
|
|
295
|
-
- bump version
|
|
296
|
-
|
|
297
|
-
|
|
1
|
+
[projectUri]: https://github.com/sketch7/ngx.ux
|
|
2
|
+
[changeLog]: ./CHANGELOG.md
|
|
3
|
+
[releaseWorkflowWiki]: ./docs/RELEASE-WORKFLOW.md
|
|
4
|
+
|
|
5
|
+
[npm]: https://www.npmjs.com
|
|
6
|
+
|
|
7
|
+
# @ssv/ngx.ux
|
|
8
|
+
[](https://github.com/sketch7/ngx.ux/actions/workflows/ci.yml)
|
|
9
|
+
[](https://badge.fury.io/js/%40ssv%2Fngx.ux)
|
|
10
|
+
|
|
11
|
+
UX essentials for building apps, utilities which enables you writing richer apps easier.
|
|
12
|
+
|
|
13
|
+
**Quick links**
|
|
14
|
+
|
|
15
|
+
[Change logs][changeLog] | [Project Repository][projectUri]
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
Get library via [npm]
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @ssv/ngx.ux
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Choose the version corresponding to your Angular version:
|
|
26
|
+
|
|
27
|
+
| Angular | library |
|
|
28
|
+
| ------- | ------- |
|
|
29
|
+
| 15 | 2.x+ |
|
|
30
|
+
| 4 to 9 | 1.x+ |
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
- Viewport (see below)
|
|
34
|
+
- [Viewport Data](./src/viewport/viewport-data/README.md)
|
|
35
|
+
|
|
36
|
+
# Usage
|
|
37
|
+
|
|
38
|
+
## Register module
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import { SsvUxModule } from "@ssv/ngx.ux";
|
|
42
|
+
|
|
43
|
+
@NgModule({
|
|
44
|
+
imports: [
|
|
45
|
+
SsvUxModule
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
export class AppModule {
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Viewport
|
|
53
|
+
Provides utilities to handle responsiveness easier based on the viewport (view size)
|
|
54
|
+
|
|
55
|
+
### Comparison Operands
|
|
56
|
+
| Operand | Description |
|
|
57
|
+
| ------- | --------------------- |
|
|
58
|
+
| = | Equals |
|
|
59
|
+
| <> | Not equals |
|
|
60
|
+
| < | Less than |
|
|
61
|
+
| <= | Less than or equal |
|
|
62
|
+
| > | Greater than |
|
|
63
|
+
| >= | Greater Than or equal |
|
|
64
|
+
|
|
65
|
+
<br>
|
|
66
|
+
|
|
67
|
+
### Size Types
|
|
68
|
+
These are the defaults, but they are configurable.
|
|
69
|
+
|
|
70
|
+
| Size Type | Size Range |
|
|
71
|
+
| --------- | ---------- |
|
|
72
|
+
| xsmall | <=450 |
|
|
73
|
+
| small | 451-767 |
|
|
74
|
+
| medium | 768-992 |
|
|
75
|
+
| large | 993-1280 |
|
|
76
|
+
| fhd | 1281-1920 |
|
|
77
|
+
| qhd | 1921-2560 |
|
|
78
|
+
| uhd4k | 2561-3840 |
|
|
79
|
+
| uhd8k | >=3841 |
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
### Viewport Matcher Attribute (directive)
|
|
83
|
+
Structural directive which loads components based on a viewport sizing condition e.g. show ONLY if viewport is greater than xlarge.
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
#### Examples
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<!-- simple -->
|
|
90
|
+
<div *ssvViewportMatcher="'large'">
|
|
91
|
+
show only when large
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<!-- expression based - tuple (shorthand) *recommended usage* -->
|
|
95
|
+
<div *ssvViewportMatcher="['>=', 'xlarge']"> (see all operands and sizes)
|
|
96
|
+
show when >= xlarge
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<!-- expression based - object -->
|
|
100
|
+
<div *ssvViewportMatcher="{size: 'xlarge', operation: '<='}"> (see all operands and sizes)
|
|
101
|
+
show when >= xlarge
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<!-- includes -->
|
|
105
|
+
<div *ssvViewportMatcher="['large', 'xlarge']">
|
|
106
|
+
show only when large, xlarge
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<!-- excludes -->
|
|
110
|
+
<div *ssvViewportMatcher="''; exclude ['xsmall', 'small']">
|
|
111
|
+
hide only when xsmall, small
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<!-- match/else -->
|
|
115
|
+
<div *ssvViewportMatcher="['>=', 'xlarge']; else otherwise">
|
|
116
|
+
show when >= xlarge
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<ng-template #otherwise>
|
|
120
|
+
show when expression is falsy (< xlarge)
|
|
121
|
+
</ng-template>
|
|
122
|
+
|
|
123
|
+
<!-- non structure syntax -->
|
|
124
|
+
<ng-template ssvViewportMatcher [ssvViewportMatcherExclude]="'xsmall'">
|
|
125
|
+
(exclude xsmall)
|
|
126
|
+
</ng-template>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Viewport Matcher Var (directive)
|
|
130
|
+
Structural directive which provides the condition var whether it matches or not (params are similar to `ssvViewportMatcher`).
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<!-- simple -->
|
|
134
|
+
<div *ssvViewportMatcherVar="let isLarge when 'large'">
|
|
135
|
+
isLarge={{isLarge}}
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<!-- expression based - tuple (shorthand) *recommended usage* -->
|
|
139
|
+
<div *ssvViewportMatcherVar="let isMediumDown when ['<=', 'medium']">
|
|
140
|
+
isMediumDown={{isMediumDown}}
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<!-- includes/or -->
|
|
144
|
+
<div *ssvViewportMatcherVar="let isLargeOrSmall when ['small', 'large']">
|
|
145
|
+
isLargeOrSmall={{isLargeOrSmall}}
|
|
146
|
+
</div>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Viewport Service
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
// get size type
|
|
153
|
+
this.viewport.sizeType$.pipe(
|
|
154
|
+
tap(x => console.log("Viewport - sizeType changed", x)), // { type: 4, name: "xlarge", widthThreshold: 1500 }
|
|
155
|
+
).subscribe();
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Viewport for SSR
|
|
159
|
+
Since in SSR there is no way to know the client viewport size, we should at least determine device type and handle provide
|
|
160
|
+
3 different sizes based on device type e.g. `mobile`, `tablet` or `desktop` so the initial rendering will be closer based on device type.
|
|
161
|
+
|
|
162
|
+
The basic implementation allows to provide a device type `mobile`, `tablet` or `desktop` and there are static sizes for those.
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import { UX_VIEWPORT_SSR_DEVICE } from "@ssv/ngx.ux";
|
|
166
|
+
|
|
167
|
+
const deviceType = deviceTypeFromServer;
|
|
168
|
+
{ provide: UX_VIEWPORT_SSR_DEVICE, useValue: deviceType },
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
The default implementation can also be replaced by implementing a small class as following:
|
|
172
|
+
|
|
173
|
+
```ts
|
|
174
|
+
|
|
175
|
+
export class SuperViewportServerSizeService {
|
|
176
|
+
get(): ViewportSize {
|
|
177
|
+
// do your magic..
|
|
178
|
+
return size;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
import { ViewportServerSizeService } from "@ssv/ngx.ux";
|
|
183
|
+
|
|
184
|
+
@NgModule( {
|
|
185
|
+
providers: [
|
|
186
|
+
{ provide: ViewportServerSizeService, useClass: SuperViewportServerSizeService }
|
|
187
|
+
]
|
|
188
|
+
}) export class AppModule {
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
## Configure
|
|
194
|
+
You can configure the existing resize polling speed and as well as provide your custom breakpoints.
|
|
195
|
+
|
|
196
|
+
### Custom Breakpoints
|
|
197
|
+
```ts
|
|
198
|
+
import { SsvUxModule, generateViewportSizeType } from "@ssv/ngx.ux";
|
|
199
|
+
|
|
200
|
+
const breakpoints = { // custom breakpoints - key/width
|
|
201
|
+
smallest: 500,
|
|
202
|
+
small: 700,
|
|
203
|
+
medium: 1000,
|
|
204
|
+
large: 1400,
|
|
205
|
+
extralarge: 1600,
|
|
206
|
+
xxlarge: 1800,
|
|
207
|
+
fhd: 1920,
|
|
208
|
+
uhd: 3840
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
imports: [
|
|
212
|
+
SsvUxModule.forRoot({
|
|
213
|
+
viewport: {
|
|
214
|
+
resizePollingSpeed: 66, // optional - defaults to 33
|
|
215
|
+
breakpoints // provide the custom breakpoints
|
|
216
|
+
}
|
|
217
|
+
}),
|
|
218
|
+
],
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Override existing Breakpoints
|
|
222
|
+
```ts
|
|
223
|
+
import { SsvUxModule, UX_VIEWPORT_DEFAULT_BREAKPOINTS } from "@ssv/ngx.ux";
|
|
224
|
+
|
|
225
|
+
imports: [
|
|
226
|
+
SsvUxModule.forRoot({
|
|
227
|
+
viewport: {
|
|
228
|
+
breakpoints: {
|
|
229
|
+
...UX_VIEWPORT_DEFAULT_BREAKPOINTS, // use breakpoints provided with library
|
|
230
|
+
xxlarge1: 2000, // override xxlarge1
|
|
231
|
+
uhd: 3840 // add new breakpoint
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}),
|
|
235
|
+
],
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
## Getting Started
|
|
240
|
+
|
|
241
|
+
### Setup Machine for Development
|
|
242
|
+
Install/setup the following:
|
|
243
|
+
|
|
244
|
+
- NodeJS v10+
|
|
245
|
+
- Visual Studio Code or similar code editor
|
|
246
|
+
- TypeScript 3.1+
|
|
247
|
+
- Git + SourceTree, SmartGit or similar (optional)
|
|
248
|
+
- Ensure to install **global NPM modules** using the following:
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
```bash
|
|
252
|
+
npm install -g git gulp devtool
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
### Project Setup
|
|
257
|
+
The following process need to be executed in order to get started.
|
|
258
|
+
|
|
259
|
+
```bash
|
|
260
|
+
npm install
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
### Building the code
|
|
265
|
+
|
|
266
|
+
```bash
|
|
267
|
+
npm run build
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
### Running the tests
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
npm test
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
#### Watch
|
|
277
|
+
Handles compiling of changes.
|
|
278
|
+
|
|
279
|
+
```bash
|
|
280
|
+
npm start
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
#### Running Continuous Tests
|
|
285
|
+
Spawns test runner and keep watching for changes.
|
|
286
|
+
|
|
287
|
+
```bash
|
|
288
|
+
npm run tdd
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
### Preparation for Release
|
|
293
|
+
|
|
294
|
+
- Update changelogs
|
|
295
|
+
- bump version
|
|
296
|
+
|
|
297
|
+
|
|
298
298
|
Check out the [release workflow guide][releaseWorkflowWiki] in order to guide you creating a release and publishing it.
|
package/config.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { InjectionToken } from "@angular/core";
|
|
2
|
-
import { UxViewportOptions } from "./viewport/viewport.model";
|
|
3
|
-
export interface UxOptions {
|
|
4
|
-
viewport: UxViewportOptions;
|
|
5
|
-
}
|
|
6
|
-
export declare const UX_DEFAULT_CONFIG: UxOptions;
|
|
7
|
-
export declare const UX_CONFIG: InjectionToken<UxOptions>;
|
|
1
|
+
import { InjectionToken } from "@angular/core";
|
|
2
|
+
import { UxViewportOptions } from "./viewport/viewport.model";
|
|
3
|
+
export interface UxOptions {
|
|
4
|
+
viewport: UxViewportOptions;
|
|
5
|
+
}
|
|
6
|
+
export declare const UX_DEFAULT_CONFIG: UxOptions;
|
|
7
|
+
export declare const UX_CONFIG: InjectionToken<UxOptions>;
|
package/esm2020/config.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { InjectionToken } from "@angular/core";
|
|
2
|
-
import { UX_VIEWPORT_DEFAULT_CONFIG } from "./viewport/viewport.const";
|
|
3
|
-
export const UX_DEFAULT_CONFIG = {
|
|
4
|
-
viewport: UX_VIEWPORT_DEFAULT_CONFIG,
|
|
5
|
-
};
|
|
6
|
-
export const UX_CONFIG = new InjectionToken("@ssv/ngx.ux-config");
|
|
7
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { InjectionToken } from "@angular/core";
|
|
2
|
+
import { UX_VIEWPORT_DEFAULT_CONFIG } from "./viewport/viewport.const";
|
|
3
|
+
export const UX_DEFAULT_CONFIG = {
|
|
4
|
+
viewport: UX_VIEWPORT_DEFAULT_CONFIG,
|
|
5
|
+
};
|
|
6
|
+
export const UX_CONFIG = new InjectionToken("@ssv/ngx.ux-config");
|
|
7
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2NvbmZpZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBT3ZFLE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFjO0lBQzNDLFFBQVEsRUFBRSwwQkFBMEI7Q0FDcEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxJQUFJLGNBQWMsQ0FBWSxvQkFBb0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0aW9uVG9rZW4gfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgVVhfVklFV1BPUlRfREVGQVVMVF9DT05GSUcgfSBmcm9tIFwiLi92aWV3cG9ydC92aWV3cG9ydC5jb25zdFwiO1xuaW1wb3J0IHsgVXhWaWV3cG9ydE9wdGlvbnMgfSBmcm9tIFwiLi92aWV3cG9ydC92aWV3cG9ydC5tb2RlbFwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIFV4T3B0aW9ucyB7XG5cdHZpZXdwb3J0OiBVeFZpZXdwb3J0T3B0aW9ucztcbn1cblxuZXhwb3J0IGNvbnN0IFVYX0RFRkFVTFRfQ09ORklHOiBVeE9wdGlvbnMgPSB7XG5cdHZpZXdwb3J0OiBVWF9WSUVXUE9SVF9ERUZBVUxUX0NPTkZJRyxcbn07XG5cbmV4cG9ydCBjb25zdCBVWF9DT05GSUcgPSBuZXcgSW5qZWN0aW9uVG9rZW48VXhPcHRpb25zPihcIkBzc3Yvbmd4LnV4LWNvbmZpZ1wiKTtcbiJdfQ==
|