@ssv/ngx.ux 2.0.1-dev198 → 2.0.2-dev.7
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/README.md +2 -2
- package/esm2020/config.mjs +7 -0
- package/esm2020/index.mjs +5 -0
- package/esm2020/internal/internal.model.mjs +2 -0
- package/esm2020/module.mjs +65 -0
- package/esm2020/platform/window.mjs +30 -0
- package/esm2020/ssv-ngx.ux.mjs +5 -0
- package/esm2020/version.mjs +2 -0
- package/esm2020/viewport/index.mjs +9 -0
- package/esm2020/viewport/viewport-data/index.mjs +4 -0
- package/esm2020/viewport/viewport-data/viewport-data-matcher.mjs +108 -0
- package/esm2020/viewport/viewport-data/viewport-data.pipe.mjs +43 -0
- package/esm2020/viewport/viewport-data/viewport-data.service.mjs +37 -0
- package/esm2020/viewport/viewport-data/viewport-data.utils.mjs +100 -0
- package/esm2020/viewport/viewport-matcher-var.directive.mjs +63 -0
- package/esm2020/viewport/viewport-matcher.directive.mjs +131 -0
- package/esm2020/viewport/viewport-server-size.service.mjs +43 -0
- package/esm2020/viewport/viewport.const.mjs +18 -0
- package/esm2020/viewport/viewport.model.mjs +31 -0
- package/esm2020/viewport/viewport.service.mjs +66 -0
- package/esm2020/viewport/viewport.util.mjs +117 -0
- package/fesm2015/{ssv-ngx.ux.js → ssv-ngx.ux.mjs} +254 -233
- package/fesm2015/ssv-ngx.ux.mjs.map +1 -0
- package/fesm2020/ssv-ngx.ux.mjs +822 -0
- package/fesm2020/ssv-ngx.ux.mjs.map +1 -0
- package/module.d.ts +7 -0
- package/package.json +21 -9
- package/platform/window.d.ts +3 -0
- package/version.d.ts +1 -1
- package/viewport/viewport-data/viewport-data.pipe.d.ts +3 -0
- package/viewport/viewport-data/viewport-data.service.d.ts +3 -0
- package/viewport/viewport-matcher-var.directive.d.ts +3 -0
- package/viewport/viewport-matcher.directive.d.ts +3 -0
- package/viewport/viewport-server-size.service.d.ts +3 -0
- package/viewport/viewport.service.d.ts +3 -0
- package/CHANGELOG.md +0 -142
- 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.map +0 -1
- package/ssv-ngx.ux.d.ts +0 -6
- package/ssv-ngx.ux.metadata.json +0 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, Injectable, Inject, Optional, Pipe, Directive, Input, NgModule } from '@angular/core';
|
|
2
3
|
import { map, share, auditTime, startWith, distinctUntilChanged, shareReplay, tap, takeUntil, filter, pairwise } from 'rxjs/operators';
|
|
3
4
|
import { fromEvent, of, Subscription, Subject, ReplaySubject, combineLatest } from 'rxjs';
|
|
4
5
|
|
|
@@ -26,7 +27,7 @@ var ViewportDataMatchStrategy;
|
|
|
26
27
|
* @returns Returns the matched data value.
|
|
27
28
|
*/
|
|
28
29
|
function matchViewportData(dataConfig, sizeType, strategy, sizeTypes, sizeTypeMap) {
|
|
29
|
-
const matchFn = matchStrategyHandlerMap[strategy];
|
|
30
|
+
const matchFn = matchStrategyHandlerMap$1[strategy];
|
|
30
31
|
if (!matchFn) {
|
|
31
32
|
throw Error(`matchViewportData: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
|
|
32
33
|
}
|
|
@@ -36,7 +37,7 @@ function matchViewportData(dataConfig, sizeType, strategy, sizeTypes, sizeTypeMa
|
|
|
36
37
|
}
|
|
37
38
|
return dataConfig.default;
|
|
38
39
|
}
|
|
39
|
-
const matchStrategyHandlerMap = {
|
|
40
|
+
const matchStrategyHandlerMap$1 = {
|
|
40
41
|
[ViewportDataMatchStrategy.exact]: matchWithExact,
|
|
41
42
|
[ViewportDataMatchStrategy.larger]: matchWithLargerMatch,
|
|
42
43
|
[ViewportDataMatchStrategy.smaller]: matchWithSmallerMatch,
|
|
@@ -132,31 +133,104 @@ const UX_DEFAULT_CONFIG = {
|
|
|
132
133
|
};
|
|
133
134
|
const UX_CONFIG = new InjectionToken("@ssv/ngx.ux-config");
|
|
134
135
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
136
|
+
/**
|
|
137
|
+
* Utility function to generate rules based on strategies.
|
|
138
|
+
*
|
|
139
|
+
* @param dataConfig Data config to generate rules based on.
|
|
140
|
+
* @param strategy Strategy to use when building rules.
|
|
141
|
+
* @param sizeTypes Available size types ordered by index type. (Can be obtained from `ViewportService`)
|
|
142
|
+
* @param sizeTypeMap Available size type map. (Can be obtained from `ViewportService`)
|
|
143
|
+
* @returns Returns a collection of rules (ordered).
|
|
144
|
+
*/
|
|
145
|
+
function generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, sizeTypes, sizeTypeMap) {
|
|
146
|
+
const ruleBuilderFn = matchStrategyHandlerMap[strategy];
|
|
147
|
+
if (!ruleBuilderFn) {
|
|
148
|
+
throw Error(`generateViewportRulesRangeFromDataMatcher: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
|
|
141
149
|
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
150
|
+
let dataSizes = [];
|
|
151
|
+
for (const key in dataConfig) {
|
|
152
|
+
if (Object.prototype.hasOwnProperty.call(dataConfig, key)) {
|
|
153
|
+
const data = dataConfig[key];
|
|
154
|
+
if (data === undefined) {
|
|
155
|
+
continue;
|
|
156
|
+
}
|
|
157
|
+
const size = sizeTypeMap[key];
|
|
158
|
+
if (size) {
|
|
159
|
+
dataSizes.push(size);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
145
162
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
163
|
+
dataSizes = dataSizes.sort(({ type: typeA }, { type: typeB }) => typeA - typeB);
|
|
164
|
+
const rules = [];
|
|
165
|
+
if (dataConfig.default) {
|
|
166
|
+
rules.push({ value: dataConfig.default, min: undefined, max: undefined });
|
|
167
|
+
}
|
|
168
|
+
let prevRule;
|
|
169
|
+
for (let index = 0; index < dataSizes.length; index++) {
|
|
170
|
+
const prevDataSize = dataSizes[index - 1];
|
|
171
|
+
const nextDataSize = dataSizes[index + 1];
|
|
172
|
+
const dataSize = dataSizes[index];
|
|
173
|
+
const prevSize = sizeTypes[dataSize.type - 1];
|
|
174
|
+
// const nextSize = sizeTypes[dataSize.type + 1];
|
|
175
|
+
const data = dataConfig[dataSize.name];
|
|
176
|
+
const rule = {
|
|
177
|
+
value: data,
|
|
178
|
+
min: undefined,
|
|
179
|
+
max: undefined,
|
|
180
|
+
};
|
|
181
|
+
ruleBuilderFn(rule, dataSize, nextDataSize, prevDataSize, prevSize, prevRule, sizeTypes);
|
|
182
|
+
prevRule = rule;
|
|
183
|
+
rules.push(rule);
|
|
149
184
|
}
|
|
185
|
+
return rules;
|
|
186
|
+
}
|
|
187
|
+
const matchStrategyHandlerMap = {
|
|
188
|
+
[ViewportDataMatchStrategy.exact]: (rule, dataSize, _nextDataSize, _prevDataSize, prevSize) => {
|
|
189
|
+
rule.max = dataSize.widthThreshold;
|
|
190
|
+
if (prevSize) {
|
|
191
|
+
rule.min = prevSize.widthThreshold + 1;
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
[ViewportDataMatchStrategy.smaller]: (rule, dataSize, nextDataSize, _prevDataSize, prevSize) => {
|
|
195
|
+
if (nextDataSize) {
|
|
196
|
+
rule.max = dataSize.widthThreshold;
|
|
197
|
+
}
|
|
198
|
+
if (prevSize) {
|
|
199
|
+
rule.min = prevSize.widthThreshold + 1;
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
[ViewportDataMatchStrategy.larger]: (rule, dataSize, _nextDataSize, prevDataSize) => {
|
|
203
|
+
if (dataSize) {
|
|
204
|
+
rule.max = dataSize.widthThreshold;
|
|
205
|
+
}
|
|
206
|
+
if (prevDataSize) {
|
|
207
|
+
rule.min = prevDataSize.widthThreshold + 1;
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
[ViewportDataMatchStrategy.closestSmallerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
|
|
211
|
+
if (nextDataSize) {
|
|
212
|
+
rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, true);
|
|
213
|
+
}
|
|
214
|
+
if (prevRule === null || prevRule === void 0 ? void 0 : prevRule.max) {
|
|
215
|
+
rule.min = prevRule.max + 1;
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
[ViewportDataMatchStrategy.closestLargerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
|
|
219
|
+
if (nextDataSize) {
|
|
220
|
+
rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, false);
|
|
221
|
+
}
|
|
222
|
+
if (prevRule === null || prevRule === void 0 ? void 0 : prevRule.max) {
|
|
223
|
+
rule.min = prevRule.max + 1;
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
};
|
|
227
|
+
function calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, isSmallerPreferred) {
|
|
228
|
+
const fn = isSmallerPreferred ? Math.ceil : Math.floor;
|
|
229
|
+
// get closest between curr and next
|
|
230
|
+
const diffIndex = fn((nextDataSize.type - dataSize.type - 1) / 2);
|
|
231
|
+
const diffNextSize = sizeTypes[dataSize.type + diffIndex];
|
|
232
|
+
return (diffNextSize || dataSize).widthThreshold;
|
|
150
233
|
}
|
|
151
|
-
WindowRef.ɵprov = ɵɵdefineInjectable({ factory: function WindowRef_Factory() { return new WindowRef(ɵɵinject(WINDOW)); }, token: WindowRef, providedIn: "root" });
|
|
152
|
-
WindowRef.decorators = [
|
|
153
|
-
{ type: Injectable, args: [{
|
|
154
|
-
providedIn: "root",
|
|
155
|
-
},] }
|
|
156
|
-
];
|
|
157
|
-
WindowRef.ctorParameters = () => [
|
|
158
|
-
{ type: undefined, decorators: [{ type: Inject, args: [WINDOW,] }] }
|
|
159
|
-
];
|
|
160
234
|
|
|
161
235
|
/**
|
|
162
236
|
* The indices of each breakpoint provided based on the `UX_VIEWPORT_DEFAULT_BREAKPOINTS`.
|
|
@@ -189,41 +263,6 @@ var DeviceType;
|
|
|
189
263
|
DeviceType["tablet"] = "tablet";
|
|
190
264
|
})(DeviceType || (DeviceType = {}));
|
|
191
265
|
|
|
192
|
-
// todo: make this configurable
|
|
193
|
-
/** Viewport size for SSR. */
|
|
194
|
-
const viewportSizeSSR = {
|
|
195
|
-
[DeviceType.desktop]: {
|
|
196
|
-
width: 1366,
|
|
197
|
-
height: 768,
|
|
198
|
-
},
|
|
199
|
-
[DeviceType.tablet]: {
|
|
200
|
-
width: 768,
|
|
201
|
-
height: 1024,
|
|
202
|
-
},
|
|
203
|
-
[DeviceType.mobile]: {
|
|
204
|
-
width: 414,
|
|
205
|
-
height: 736,
|
|
206
|
-
},
|
|
207
|
-
};
|
|
208
|
-
const UX_VIEWPORT_SSR_DEVICE = new InjectionToken("@ssv/ngx.ux-config/viewport/ssr-device");
|
|
209
|
-
class ViewportServerSizeService {
|
|
210
|
-
constructor(deviceType) {
|
|
211
|
-
this.deviceType = deviceType;
|
|
212
|
-
}
|
|
213
|
-
get() {
|
|
214
|
-
return viewportSizeSSR[this.deviceType] || viewportSizeSSR[DeviceType.desktop];
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
ViewportServerSizeService.ɵprov = ɵɵdefineInjectable({ factory: function ViewportServerSizeService_Factory() { return new ViewportServerSizeService(ɵɵinject(UX_VIEWPORT_SSR_DEVICE, 8)); }, token: ViewportServerSizeService, providedIn: "root" });
|
|
218
|
-
ViewportServerSizeService.decorators = [
|
|
219
|
-
{ type: Injectable, args: [{
|
|
220
|
-
providedIn: "root",
|
|
221
|
-
},] }
|
|
222
|
-
];
|
|
223
|
-
ViewportServerSizeService.ctorParameters = () => [
|
|
224
|
-
{ type: DeviceType, decorators: [{ type: Optional }, { type: Inject, args: [UX_VIEWPORT_SSR_DEVICE,] }] }
|
|
225
|
-
];
|
|
226
|
-
|
|
227
266
|
function isViewportSizeMatcherExpression(value) {
|
|
228
267
|
if (typeof value !== "object" || !value) {
|
|
229
268
|
return false;
|
|
@@ -340,6 +379,77 @@ function generateViewportSizeTypeInfoRefs(breakpointList) {
|
|
|
340
379
|
}, {}));
|
|
341
380
|
}
|
|
342
381
|
|
|
382
|
+
const WINDOW = new InjectionToken("Window");
|
|
383
|
+
class WindowRef {
|
|
384
|
+
constructor(
|
|
385
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
|
|
386
|
+
window) {
|
|
387
|
+
this.window = window;
|
|
388
|
+
}
|
|
389
|
+
/** Window underlying native object. */
|
|
390
|
+
get native() {
|
|
391
|
+
return this.window;
|
|
392
|
+
}
|
|
393
|
+
/** Determines whether native element is supported or not. Generally `false` when executing in SSR. */
|
|
394
|
+
get hasNative() {
|
|
395
|
+
return !!this.native.window;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
WindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, deps: [{ token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
399
|
+
WindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, providedIn: "root" });
|
|
400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRef, decorators: [{
|
|
401
|
+
type: Injectable,
|
|
402
|
+
args: [{
|
|
403
|
+
providedIn: "root",
|
|
404
|
+
}]
|
|
405
|
+
}], ctorParameters: function () {
|
|
406
|
+
return [{ type: undefined, decorators: [{
|
|
407
|
+
type: Inject,
|
|
408
|
+
args: [WINDOW]
|
|
409
|
+
}] }];
|
|
410
|
+
} });
|
|
411
|
+
|
|
412
|
+
// todo: make this configurable
|
|
413
|
+
/** Viewport size for SSR. */
|
|
414
|
+
const viewportSizeSSR = {
|
|
415
|
+
[DeviceType.desktop]: {
|
|
416
|
+
width: 1366,
|
|
417
|
+
height: 768,
|
|
418
|
+
},
|
|
419
|
+
[DeviceType.tablet]: {
|
|
420
|
+
width: 768,
|
|
421
|
+
height: 1024,
|
|
422
|
+
},
|
|
423
|
+
[DeviceType.mobile]: {
|
|
424
|
+
width: 414,
|
|
425
|
+
height: 736,
|
|
426
|
+
},
|
|
427
|
+
};
|
|
428
|
+
const UX_VIEWPORT_SSR_DEVICE = new InjectionToken("@ssv/ngx.ux-config/viewport/ssr-device");
|
|
429
|
+
class ViewportServerSizeService {
|
|
430
|
+
constructor(deviceType) {
|
|
431
|
+
this.deviceType = deviceType;
|
|
432
|
+
}
|
|
433
|
+
get() {
|
|
434
|
+
return viewportSizeSSR[this.deviceType] || viewportSizeSSR[DeviceType.desktop];
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
ViewportServerSizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, deps: [{ token: UX_VIEWPORT_SSR_DEVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
438
|
+
ViewportServerSizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, providedIn: "root" });
|
|
439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportServerSizeService, decorators: [{
|
|
440
|
+
type: Injectable,
|
|
441
|
+
args: [{
|
|
442
|
+
providedIn: "root",
|
|
443
|
+
}]
|
|
444
|
+
}], ctorParameters: function () {
|
|
445
|
+
return [{ type: DeviceType, decorators: [{
|
|
446
|
+
type: Optional
|
|
447
|
+
}, {
|
|
448
|
+
type: Inject,
|
|
449
|
+
args: [UX_VIEWPORT_SSR_DEVICE]
|
|
450
|
+
}] }];
|
|
451
|
+
} });
|
|
452
|
+
|
|
343
453
|
class ViewportService {
|
|
344
454
|
constructor(windowRef, viewportServerSize, config) {
|
|
345
455
|
this.windowRef = windowRef;
|
|
@@ -386,116 +496,19 @@ class ViewportService {
|
|
|
386
496
|
};
|
|
387
497
|
}
|
|
388
498
|
}
|
|
389
|
-
ViewportService.ɵ
|
|
390
|
-
ViewportService
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
]
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
* Utility function to generate rules based on strategies.
|
|
403
|
-
*
|
|
404
|
-
* @param dataConfig Data config to generate rules based on.
|
|
405
|
-
* @param strategy Strategy to use when building rules.
|
|
406
|
-
* @param sizeTypes Available size types ordered by index type. (Can be obtained from `ViewportService`)
|
|
407
|
-
* @param sizeTypeMap Available size type map. (Can be obtained from `ViewportService`)
|
|
408
|
-
* @returns Returns a collection of rules (ordered).
|
|
409
|
-
*/
|
|
410
|
-
function generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, sizeTypes, sizeTypeMap) {
|
|
411
|
-
const ruleBuilderFn = matchStrategyHandlerMap$1[strategy];
|
|
412
|
-
if (!ruleBuilderFn) {
|
|
413
|
-
throw Error(`generateViewportRulesRangeFromDataMatcher: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
|
|
414
|
-
}
|
|
415
|
-
let dataSizes = [];
|
|
416
|
-
for (const key in dataConfig) {
|
|
417
|
-
if (Object.prototype.hasOwnProperty.call(dataConfig, key)) {
|
|
418
|
-
const data = dataConfig[key];
|
|
419
|
-
if (data === undefined) {
|
|
420
|
-
continue;
|
|
421
|
-
}
|
|
422
|
-
const size = sizeTypeMap[key];
|
|
423
|
-
if (size) {
|
|
424
|
-
dataSizes.push(size);
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
dataSizes = dataSizes.sort(({ type: typeA }, { type: typeB }) => typeA - typeB);
|
|
429
|
-
const rules = [];
|
|
430
|
-
if (dataConfig.default) {
|
|
431
|
-
rules.push({ value: dataConfig.default, min: undefined, max: undefined });
|
|
432
|
-
}
|
|
433
|
-
let prevRule;
|
|
434
|
-
for (let index = 0; index < dataSizes.length; index++) {
|
|
435
|
-
const prevDataSize = dataSizes[index - 1];
|
|
436
|
-
const nextDataSize = dataSizes[index + 1];
|
|
437
|
-
const dataSize = dataSizes[index];
|
|
438
|
-
const prevSize = sizeTypes[dataSize.type - 1];
|
|
439
|
-
// const nextSize = sizeTypes[dataSize.type + 1];
|
|
440
|
-
const data = dataConfig[dataSize.name];
|
|
441
|
-
const rule = {
|
|
442
|
-
value: data,
|
|
443
|
-
min: undefined,
|
|
444
|
-
max: undefined,
|
|
445
|
-
};
|
|
446
|
-
ruleBuilderFn(rule, dataSize, nextDataSize, prevDataSize, prevSize, prevRule, sizeTypes);
|
|
447
|
-
prevRule = rule;
|
|
448
|
-
rules.push(rule);
|
|
449
|
-
}
|
|
450
|
-
return rules;
|
|
451
|
-
}
|
|
452
|
-
const matchStrategyHandlerMap$1 = {
|
|
453
|
-
[ViewportDataMatchStrategy.exact]: (rule, dataSize, _nextDataSize, _prevDataSize, prevSize) => {
|
|
454
|
-
rule.max = dataSize.widthThreshold;
|
|
455
|
-
if (prevSize) {
|
|
456
|
-
rule.min = prevSize.widthThreshold + 1;
|
|
457
|
-
}
|
|
458
|
-
},
|
|
459
|
-
[ViewportDataMatchStrategy.smaller]: (rule, dataSize, nextDataSize, _prevDataSize, prevSize) => {
|
|
460
|
-
if (nextDataSize) {
|
|
461
|
-
rule.max = dataSize.widthThreshold;
|
|
462
|
-
}
|
|
463
|
-
if (prevSize) {
|
|
464
|
-
rule.min = prevSize.widthThreshold + 1;
|
|
465
|
-
}
|
|
466
|
-
},
|
|
467
|
-
[ViewportDataMatchStrategy.larger]: (rule, dataSize, _nextDataSize, prevDataSize) => {
|
|
468
|
-
if (dataSize) {
|
|
469
|
-
rule.max = dataSize.widthThreshold;
|
|
470
|
-
}
|
|
471
|
-
if (prevDataSize) {
|
|
472
|
-
rule.min = prevDataSize.widthThreshold + 1;
|
|
473
|
-
}
|
|
474
|
-
},
|
|
475
|
-
[ViewportDataMatchStrategy.closestSmallerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
|
|
476
|
-
if (nextDataSize) {
|
|
477
|
-
rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, true);
|
|
478
|
-
}
|
|
479
|
-
if (prevRule === null || prevRule === void 0 ? void 0 : prevRule.max) {
|
|
480
|
-
rule.min = prevRule.max + 1;
|
|
481
|
-
}
|
|
482
|
-
},
|
|
483
|
-
[ViewportDataMatchStrategy.closestLargerFirst]: (rule, dataSize, nextDataSize, _prevDataSize, _prevSize, prevRule, sizeTypes) => {
|
|
484
|
-
if (nextDataSize) {
|
|
485
|
-
rule.max = calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, false);
|
|
486
|
-
}
|
|
487
|
-
if (prevRule === null || prevRule === void 0 ? void 0 : prevRule.max) {
|
|
488
|
-
rule.min = prevRule.max + 1;
|
|
489
|
-
}
|
|
490
|
-
},
|
|
491
|
-
};
|
|
492
|
-
function calculateClosestWidthThreshold(nextDataSize, dataSize, sizeTypes, isSmallerPreferred) {
|
|
493
|
-
const fn = isSmallerPreferred ? Math.ceil : Math.floor;
|
|
494
|
-
// get closest between curr and next
|
|
495
|
-
const diffIndex = fn((nextDataSize.type - dataSize.type - 1) / 2);
|
|
496
|
-
const diffNextSize = sizeTypes[dataSize.type + diffIndex];
|
|
497
|
-
return (diffNextSize || dataSize).widthThreshold;
|
|
498
|
-
}
|
|
499
|
+
ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, deps: [{ token: WindowRef }, { token: ViewportServerSizeService }, { token: UX_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
500
|
+
ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, providedIn: "root" });
|
|
501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportService, decorators: [{
|
|
502
|
+
type: Injectable,
|
|
503
|
+
args: [{
|
|
504
|
+
providedIn: "root",
|
|
505
|
+
}]
|
|
506
|
+
}], ctorParameters: function () {
|
|
507
|
+
return [{ type: WindowRef }, { type: ViewportServerSizeService }, { type: undefined, decorators: [{
|
|
508
|
+
type: Inject,
|
|
509
|
+
args: [UX_CONFIG]
|
|
510
|
+
}] }];
|
|
511
|
+
} });
|
|
499
512
|
|
|
500
513
|
class ViewportDataService {
|
|
501
514
|
constructor(viewport, config) {
|
|
@@ -515,16 +528,19 @@ class ViewportDataService {
|
|
|
515
528
|
return generateViewportRulesRangeFromDataMatcher(dataConfig, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
|
|
516
529
|
}
|
|
517
530
|
}
|
|
518
|
-
ViewportDataService.ɵ
|
|
519
|
-
ViewportDataService
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
531
|
+
ViewportDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, deps: [{ token: ViewportService }, { token: UX_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
532
|
+
ViewportDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, providedIn: "root" });
|
|
533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataService, decorators: [{
|
|
534
|
+
type: Injectable,
|
|
535
|
+
args: [{
|
|
536
|
+
providedIn: "root",
|
|
537
|
+
}]
|
|
538
|
+
}], ctorParameters: function () {
|
|
539
|
+
return [{ type: ViewportService }, { type: undefined, decorators: [{
|
|
540
|
+
type: Inject,
|
|
541
|
+
args: [UX_CONFIG]
|
|
542
|
+
}] }];
|
|
543
|
+
} });
|
|
528
544
|
|
|
529
545
|
/* eslint-disable @angular-eslint/no-pipe-impure */
|
|
530
546
|
class ViewportDataPipe {
|
|
@@ -553,16 +569,15 @@ class ViewportDataPipe {
|
|
|
553
569
|
this.data$$.unsubscribe();
|
|
554
570
|
}
|
|
555
571
|
}
|
|
556
|
-
ViewportDataPipe
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
];
|
|
572
|
+
ViewportDataPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, deps: [{ token: ViewportDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
573
|
+
ViewportDataPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, name: "ssvViewportData", pure: false });
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewportDataPipe, decorators: [{
|
|
575
|
+
type: Pipe,
|
|
576
|
+
args: [{
|
|
577
|
+
name: "ssvViewportData",
|
|
578
|
+
pure: false
|
|
579
|
+
}]
|
|
580
|
+
}], ctorParameters: function () { return [{ type: ViewportDataService }, { type: i0.ChangeDetectorRef }]; } });
|
|
566
581
|
|
|
567
582
|
const NAME_CAMEL = "ssvViewportMatcherVar";
|
|
568
583
|
class SsvViewportMatcherVarContext {
|
|
@@ -609,19 +624,17 @@ class SsvViewportMatcherVarDirective {
|
|
|
609
624
|
this._viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this._context);
|
|
610
625
|
}
|
|
611
626
|
}
|
|
612
|
-
SsvViewportMatcherVarDirective
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
]
|
|
622
|
-
|
|
623
|
-
condition: [{ type: Input, args: [`${NAME_CAMEL}When`,] }]
|
|
624
|
-
};
|
|
627
|
+
SsvViewportMatcherVarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, deps: [{ token: ViewportService }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
628
|
+
SsvViewportMatcherVarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SsvViewportMatcherVarDirective, selector: "[ssvViewportMatcherVar]", inputs: { condition: ["ssvViewportMatcherVarWhen", "condition"] }, ngImport: i0 });
|
|
629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherVarDirective, decorators: [{
|
|
630
|
+
type: Directive,
|
|
631
|
+
args: [{
|
|
632
|
+
selector: `[${NAME_CAMEL}]`,
|
|
633
|
+
}]
|
|
634
|
+
}], ctorParameters: function () { return [{ type: ViewportService }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { condition: [{
|
|
635
|
+
type: Input,
|
|
636
|
+
args: [`${NAME_CAMEL}When`]
|
|
637
|
+
}] } });
|
|
625
638
|
|
|
626
639
|
class SsvViewportMatcherContext {
|
|
627
640
|
constructor() {
|
|
@@ -733,24 +746,21 @@ class SsvViewportMatcherDirective {
|
|
|
733
746
|
}
|
|
734
747
|
}
|
|
735
748
|
}
|
|
736
|
-
SsvViewportMatcherDirective
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
]
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
]
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
ssvViewportMatcherExclude: [{ type: Input }],
|
|
752
|
-
ssvViewportMatcherElse: [{ type: Input }]
|
|
753
|
-
};
|
|
749
|
+
SsvViewportMatcherDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherDirective, deps: [{ token: ViewportService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
750
|
+
SsvViewportMatcherDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SsvViewportMatcherDirective, selector: "[ssvViewportMatcher]", inputs: { ssvViewportMatcher: "ssvViewportMatcher", ssvViewportMatcherExclude: "ssvViewportMatcherExclude", ssvViewportMatcherElse: "ssvViewportMatcherElse" }, exportAs: ["ssvViewportMatcher"], ngImport: i0 });
|
|
751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvViewportMatcherDirective, decorators: [{
|
|
752
|
+
type: Directive,
|
|
753
|
+
args: [{
|
|
754
|
+
selector: "[ssvViewportMatcher]",
|
|
755
|
+
exportAs: "ssvViewportMatcher",
|
|
756
|
+
}]
|
|
757
|
+
}], ctorParameters: function () { return [{ type: ViewportService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.TemplateRef }]; }, propDecorators: { ssvViewportMatcher: [{
|
|
758
|
+
type: Input
|
|
759
|
+
}], ssvViewportMatcherExclude: [{
|
|
760
|
+
type: Input
|
|
761
|
+
}], ssvViewportMatcherElse: [{
|
|
762
|
+
type: Input
|
|
763
|
+
}] } });
|
|
754
764
|
|
|
755
765
|
/** @internal */
|
|
756
766
|
const MODULE_CONFIG_DATA = new InjectionToken("@ssv/ngx.ux/configData");
|
|
@@ -770,16 +780,27 @@ class SsvUxModule {
|
|
|
770
780
|
};
|
|
771
781
|
}
|
|
772
782
|
}
|
|
773
|
-
SsvUxModule
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
];
|
|
783
|
+
SsvUxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
784
|
+
SsvUxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, declarations: [SsvViewportMatcherDirective,
|
|
785
|
+
SsvViewportMatcherVarDirective,
|
|
786
|
+
ViewportDataPipe], exports: [SsvViewportMatcherDirective,
|
|
787
|
+
SsvViewportMatcherVarDirective,
|
|
788
|
+
ViewportDataPipe] });
|
|
789
|
+
SsvUxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, providers: [
|
|
790
|
+
{ provide: UX_CONFIG, useFactory: _moduleConfigFactory, deps: [[MODULE_CONFIG_DATA, new Optional()]] },
|
|
791
|
+
{ provide: WINDOW, useFactory: _window },
|
|
792
|
+
] });
|
|
793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SsvUxModule, decorators: [{
|
|
794
|
+
type: NgModule,
|
|
795
|
+
args: [{
|
|
796
|
+
declarations: [components],
|
|
797
|
+
providers: [
|
|
798
|
+
{ provide: UX_CONFIG, useFactory: _moduleConfigFactory, deps: [[MODULE_CONFIG_DATA, new Optional()]] },
|
|
799
|
+
{ provide: WINDOW, useFactory: _window },
|
|
800
|
+
],
|
|
801
|
+
exports: [...components],
|
|
802
|
+
}]
|
|
803
|
+
}] });
|
|
783
804
|
/** @internal */
|
|
784
805
|
function _moduleConfigFactory(config) {
|
|
785
806
|
if (!config) {
|
|
@@ -797,11 +818,11 @@ function _window() {
|
|
|
797
818
|
return {};
|
|
798
819
|
}
|
|
799
820
|
|
|
800
|
-
const VERSION = "
|
|
821
|
+
const VERSION = "0.0.0-PLACEHOLDER";
|
|
801
822
|
|
|
802
823
|
/**
|
|
803
824
|
* Generated bundle index. Do not edit.
|
|
804
825
|
*/
|
|
805
826
|
|
|
806
|
-
export { ComparisonOperation, DeviceType, MODULE_CONFIG_DATA, SsvUxModule, SsvViewportMatcherContext, SsvViewportMatcherDirective, SsvViewportMatcherVarContext, SsvViewportMatcherVarDirective, UX_CONFIG, UX_DEFAULT_CONFIG, UX_VIEWPORT_DEFAULT_BREAKPOINTS, UX_VIEWPORT_SSR_DEVICE, VERSION, ViewportDataMatchStrategy, ViewportDataPipe, ViewportDataService, ViewportServerSizeService, ViewportService, ViewportSizeType, _moduleConfigFactory, _window, generateViewportSizeType
|
|
807
|
-
//# sourceMappingURL=ssv-ngx.ux.
|
|
827
|
+
export { ComparisonOperation, DeviceType, MODULE_CONFIG_DATA, SsvUxModule, SsvViewportMatcherContext, SsvViewportMatcherDirective, SsvViewportMatcherVarContext, SsvViewportMatcherVarDirective, UX_CONFIG, UX_DEFAULT_CONFIG, UX_VIEWPORT_DEFAULT_BREAKPOINTS, UX_VIEWPORT_SSR_DEVICE, VERSION, ViewportDataMatchStrategy, ViewportDataPipe, ViewportDataService, ViewportServerSizeService, ViewportService, ViewportSizeType, _moduleConfigFactory, _window, generateViewportSizeType };
|
|
828
|
+
//# sourceMappingURL=ssv-ngx.ux.mjs.map
|