@ssv/ngx.ux 2.0.0-dev160 → 2.0.1-dev198

package/CHANGELOG.md

@@ -11,6 +11,12 @@
 - **viewport:** change `ViewportSizeType` and `UX_VIEWPORT_DEFAULT_BREAKPOINTS` has been changed (see readme)
 - **viewport:** remove `ViewportService.calculateItemsPerRow` function
 
+## [1.4.0](https://github.com/sketch7/ngx.ux/compare/1.3.0...1.4.0) (2020-11-25)
+
+### Features
+
+- **viewport:** implement `ssvViewportMatcherVar` directive
+
 ## [1.3.0](https://github.com/sketch7/ngx.ux/compare/1.2.2...1.3.0) (2020-11-11)
 
 ### Features

package/README.md

@@ -126,6 +126,26 @@ Structural directive which loads components based on a viewport sizing condition
 </ng-template>
 ```
 
+### Viewport Matcher Var (directive)
+Structural directive which provides the condition var whether it matches or not (params are similar to `ssvViewportMatcher`).
+
+```html
+<!-- simple -->
+<div *ssvViewportMatcherVar="let isLarge when 'large'">
+  isLarge={{isLarge}}
+</div>
+
+<!-- expression based - tuple (shorthand) *recommended usage* -->
+<div *ssvViewportMatcherVar="let isMediumDown when ['<=', 'medium']">
+  isMediumDown={{isMediumDown}}
+</div>
+
+<!-- includes/or -->
+<div *ssvViewportMatcherVar="let isLargeOrSmall when ['small', 'large']">
+  isLargeOrSmall={{isLargeOrSmall}}
+</div>
+```
+
 ### Viewport Service
 
 ```ts

package/bundles/ssv-ngx.ux.umd.js

@@ -679,15 +679,20 @@
             this._sizeTypes = generateViewportSizeTypeInfoList(config.viewport.breakpoints);
             this._sizeTypeMap = generateViewportSizeTypeInfoRefs(this._sizeTypes);
             if (windowRef.hasNative) {
-                this.resize$ = rxjs.fromEvent(window, "resize").pipe(operators.map(function () { return _this.getViewportSize(); }), operators.auditTime(config.viewport.resizePollingSpeed), operators.share());
+                this.resizeSnap$ = rxjs.fromEvent(window, "resize").pipe(operators.map(function () { return _this.getViewportSize(); }), operators.share());
+                this.resize$ = this.resizeSnap$.pipe(operators.auditTime(config.viewport.resizePollingSpeed), operators.share());
             }
             else {
-                this.resize$ = rxjs.of(viewportServerSize.get());
+                this.resizeSnap$ = this.resize$ = rxjs.of(viewportServerSize.get());
             }
             var size = this.getViewportSize();
             this._sizeTypeSnapshot = getSizeTypeInfo(size.width, this.sizeTypes);
-            this.size$ = this.resize$.pipe(operators.startWith(size), operators.distinctUntilChanged(function (a, b) { return a.width === b.width && a.height === b.height; }), operators.shareReplay(1));
-            this.sizeType$ = this.size$.pipe(operators.distinctUntilChanged(function (a, b) { return a.width === b.width; }), operators.map(function (x) { return getSizeTypeInfo(x.width, _this.sizeTypes); }), operators.distinctUntilChanged(), operators.tap(function (x) { return _this._sizeTypeSnapshot = x; }), operators.shareReplay(1));
+            var sizeFn = function (obs$) { return obs$.pipe(operators.startWith(size), operators.distinctUntilChanged(function (a, b) { return a.width === b.width && a.height === b.height; }), operators.shareReplay(1)); };
+            this.sizeSnap$ = sizeFn(this.resizeSnap$);
+            this.size$ = sizeFn(this.resize$);
+            var sizeTypeFn = function (obs$) { return obs$.pipe(operators.distinctUntilChanged(function (a, b) { return a.width === b.width; }), operators.map(function (x) { return getSizeTypeInfo(x.width, _this.sizeTypes); }), operators.distinctUntilChanged(), operators.tap(function (x) { return _this._sizeTypeSnapshot = x; }), operators.shareReplay(1)); };
+            this.sizeType$ = sizeTypeFn(this.size$);
+            this.sizeTypeSnap$ = sizeTypeFn(this.sizeSnap$);
         }
         Object.defineProperty(ViewportService.prototype, "sizeTypeSnapshot", {
             /** Viewport size type snapshot of the last value. (Prefer use `sizeType$` observable when possible.) */
@@ -854,9 +859,10 @@
             return matchViewportData(dataConfig, sizeType, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
         };
         /** Get data for match as observable. */
-        ViewportDataService.prototype.get$ = function (dataConfig, strategy) {
+        ViewportDataService.prototype.get$ = function (dataConfig, strategy, throttle) {
             var _this = this;
-            return this.viewport.sizeType$.pipe(operators.map(function (sizeType) { return _this.get(dataConfig, strategy, sizeType); }), operators.distinctUntilChanged());
+            if (throttle === void 0) { throttle = true; }
+            return (throttle ? this.viewport.sizeType$ : this.viewport.sizeTypeSnap$).pipe(operators.map(function (sizeType) { return _this.get(dataConfig, strategy, sizeType); }), operators.distinctUntilChanged());
         };
         /** Generate rules based on strategies for data. */
         ViewportDataService.prototype.generateRules = function (dataConfig, strategy) {
@@ -916,6 +922,76 @@
         { type: i0.ChangeDetectorRef }
     ]; };
 
+    var NAME_CAMEL = "ssvViewportMatcherVar";
+    var SsvViewportMatcherVarContext = /** @class */ (function () {
+        function SsvViewportMatcherVarContext($implicit) {
+            if ($implicit === void 0) { $implicit = false; }
+            this.$implicit = $implicit;
+        }
+        return SsvViewportMatcherVarContext;
+    }());
+    var SsvViewportMatcherVarDirective = /** @class */ (function () {
+        function SsvViewportMatcherVarDirective(viewport, viewContainer, templateRef) {
+            this.viewport = viewport;
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this._matchConditions = {};
+            this._context = new SsvViewportMatcherVarContext();
+            this._destroy$ = new rxjs.Subject();
+            this._update$ = new rxjs.ReplaySubject(1);
+        }
+        Object.defineProperty(SsvViewportMatcherVarDirective.prototype, "condition", {
+            set: function (value) {
+                if (isViewportSizeMatcherExpression(value)) {
+                    this._matchConditions.expression = value;
+                }
+                else if (isViewportSizeMatcherTupleExpression(value)) {
+                    var _a = __read(value, 2), op = _a[0], size = _a[1];
+                    this._matchConditions.expression = {
+                        operation: op,
+                        size: size
+                    };
+                }
+                else {
+                    this._matchConditions.sizeType = value;
+                }
+                this._update$.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SsvViewportMatcherVarDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            this.updateView();
+            rxjs.combineLatest([this.viewport.sizeType$, this._update$]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 1), sizeType = _b[0];
+                return isViewportConditionMatch(sizeType, _this._matchConditions, _this.viewport.sizeTypeMap);
+            }), operators.tap(function (x) { return _this._context.$implicit = x; }), operators.tap(function () { return _this._viewRef.markForCheck(); }), operators.takeUntil(this._destroy$)).subscribe();
+        };
+        SsvViewportMatcherVarDirective.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        SsvViewportMatcherVarDirective.prototype.updateView = function () {
+            this.viewContainer.clear();
+            this._viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this._context);
+        };
+        return SsvViewportMatcherVarDirective;
+    }());
+    SsvViewportMatcherVarDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[" + NAME_CAMEL + "]",
+                },] }
+    ];
+    SsvViewportMatcherVarDirective.ctorParameters = function () { return [
+        { type: ViewportService },
+        { type: i0.ViewContainerRef },
+        { type: i0.TemplateRef }
+    ]; };
+    SsvViewportMatcherVarDirective.propDecorators = {
+        condition: [{ type: i0.Input, args: [NAME_CAMEL + "When",] }]
+    };
+
     var SsvViewportMatcherContext = /** @class */ (function () {
         function SsvViewportMatcherContext() {
             this.sizeType = null;
@@ -924,10 +1000,10 @@
         return SsvViewportMatcherContext;
     }());
     var SsvViewportMatcherDirective = /** @class */ (function () {
-        function SsvViewportMatcherDirective(viewport, renderer, _viewContainer, cdr, templateRef) {
+        function SsvViewportMatcherDirective(viewport, renderer, viewContainer, cdr, templateRef) {
             this.viewport = viewport;
             this.renderer = renderer;
-            this._viewContainer = _viewContainer;
+            this.viewContainer = viewContainer;
             this.cdr = cdr;
             this._context = new SsvViewportMatcherContext();
             this._thenTemplateRef = null;
@@ -939,44 +1015,6 @@
             this._update$ = new rxjs.Subject();
             this._thenTemplateRef = templateRef;
         }
-        SsvViewportMatcherDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            // console.log("ssvViewportMatcher init");
-            this._update$
-                .pipe(
-            // tap(x => console.log(">>> ssvViewportMatcher - update triggered", x)),
-            operators.filter(function () { return !!_this.sizeInfo; }), 
-            // tap(x => console.log(">>> ssvViewportMatcher - updating...", x)),
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            operators.tap(function () { return _this._updateView(_this.sizeInfo); }), operators.tap(function () { return _this.cdr.markForCheck(); }))
-                .subscribe();
-            this.sizeType$$ = this.viewport.sizeType$
-                .pipe(
-            // tap(x => console.log("ssvViewportMatcher - sizeType changed", x)),
-            operators.tap(function (x) { return _this.sizeInfo = x; }), operators.tap(function () { return _this._update$.next(_this._context); }))
-                .subscribe();
-            this.cssClass$$ = this.viewport.sizeType$
-                .pipe(operators.startWith(undefined), operators.filter(function () { return !!(_this._thenViewRef || _this._elseViewRef); }), operators.pairwise(), operators.tap(function (_b) {
-                var _c = __read(_b, 2), prev = _c[0], curr = _c[1];
-                var _a;
-                var el = _this._thenViewRef
-                    ? _this._thenViewRef.rootNodes[0]
-                    : (_a = _this._elseViewRef) === null || _a === void 0 ? void 0 : _a.rootNodes[0];
-                if (!el.classList) {
-                    return;
-                }
-                if (prev) {
-                    _this.renderer.removeClass(el, "ssv-vp-size--" + prev.name);
-                }
-                _this.renderer.addClass(el, "ssv-vp-size--" + (curr === null || curr === void 0 ? void 0 : curr.name));
-            }))
-                .subscribe();
-        };
-        SsvViewportMatcherDirective.prototype.ngOnDestroy = function () {
-            this.cssClass$$.unsubscribe();
-            this.sizeType$$.unsubscribe();
-            this._update$.complete();
-        };
         Object.defineProperty(SsvViewportMatcherDirective.prototype, "ssvViewportMatcher", {
             set: function (value) {
                 if (isViewportSizeMatcherExpression(value)) {
@@ -1020,22 +1058,60 @@
             enumerable: false,
             configurable: true
         });
+        SsvViewportMatcherDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            // console.log("ssvViewportMatcher init");
+            this._update$
+                .pipe(
+            // tap(x => console.log(">>> ssvViewportMatcher - update triggered", x)),
+            operators.filter(function () { return !!_this.sizeInfo; }), 
+            // tap(x => console.log(">>> ssvViewportMatcher - updating...", x)),
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            operators.tap(function () { return _this._updateView(_this.sizeInfo); }), operators.tap(function () { return _this.cdr.markForCheck(); }))
+                .subscribe();
+            this.sizeType$$ = this.viewport.sizeType$
+                .pipe(
+            // tap(x => console.log("ssvViewportMatcher - sizeType changed", x)),
+            operators.tap(function (x) { return _this.sizeInfo = x; }), operators.tap(function () { return _this._update$.next(_this._context); }))
+                .subscribe();
+            this.cssClass$$ = this.viewport.sizeType$
+                .pipe(operators.startWith(undefined), operators.filter(function () { return !!(_this._thenViewRef || _this._elseViewRef); }), operators.pairwise(), operators.tap(function (_b) {
+                var _c = __read(_b, 2), prev = _c[0], curr = _c[1];
+                var _a;
+                var el = _this._thenViewRef
+                    ? _this._thenViewRef.rootNodes[0]
+                    : (_a = _this._elseViewRef) === null || _a === void 0 ? void 0 : _a.rootNodes[0];
+                if (!el.classList) {
+                    return;
+                }
+                if (prev) {
+                    _this.renderer.removeClass(el, "ssv-vp-size--" + prev.name);
+                }
+                _this.renderer.addClass(el, "ssv-vp-size--" + (curr === null || curr === void 0 ? void 0 : curr.name));
+            }))
+                .subscribe();
+        };
+        SsvViewportMatcherDirective.prototype.ngOnDestroy = function () {
+            this.cssClass$$.unsubscribe();
+            this.sizeType$$.unsubscribe();
+            this._update$.complete();
+        };
         SsvViewportMatcherDirective.prototype._updateView = function (sizeInfo) {
             if (isViewportConditionMatch(sizeInfo, this._context, this.viewport.sizeTypeMap)) {
                 if (!this._thenViewRef) {
-                    this._viewContainer.clear();
+                    this.viewContainer.clear();
                     this._elseViewRef = null;
                     if (this._thenTemplateRef) {
-                        this._thenViewRef = this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
+                        this._thenViewRef = this.viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);
                     }
                 }
             }
             else {
                 if (!this._elseViewRef) {
-                    this._viewContainer.clear();
+                    this.viewContainer.clear();
                     this._thenViewRef = null;
                     if (this._elseTemplateRef) {
-                        this._elseViewRef = this._viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
+                        this._elseViewRef = this.viewContainer.createEmbeddedView(this._elseTemplateRef, this._context);
                     }
                 }
             }
@@ -1065,6 +1141,7 @@
     var MODULE_CONFIG_DATA = new i0.InjectionToken("@ssv/ngx.ux/configData");
     var components = [
         SsvViewportMatcherDirective,
+        SsvViewportMatcherVarDirective,
         ViewportDataPipe,
     ];
     // todo: create module for Viewport
@@ -1108,7 +1185,7 @@
         return {};
     }
 
-    var VERSION = "2.0.0-dev160";
+    var VERSION = "2.0.1-dev198";
 
     /**
      * Generated bundle index. Do not edit.
@@ -1118,6 +1195,8 @@
     exports.SsvUxModule = SsvUxModule;
     exports.SsvViewportMatcherContext = SsvViewportMatcherContext;
     exports.SsvViewportMatcherDirective = SsvViewportMatcherDirective;
+    exports.SsvViewportMatcherVarContext = SsvViewportMatcherVarContext;
+    exports.SsvViewportMatcherVarDirective = SsvViewportMatcherVarDirective;
     exports.UX_CONFIG = UX_CONFIG;
     exports.UX_DEFAULT_CONFIG = UX_DEFAULT_CONFIG;
     exports.UX_VIEWPORT_DEFAULT_BREAKPOINTS = UX_VIEWPORT_DEFAULT_BREAKPOINTS;