@ssv/ngx.ux 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -11,6 +11,19 @@
 - **viewport:** change `ViewportSizeType` and `UX_VIEWPORT_DEFAULT_BREAKPOINTS` has been changed (see readme)
 - **viewport:** remove `ViewportService.calculateItemsPerRow` function
 
+## [1.4.1](https://github.com/sketch7/ngx.ux/compare/1.4.0...1.4.1) (2023-04-13)
+
+### Features
+
+- **viewport:** `ViewportService` - add `resizeSnap$`, `sizeTypeSnap$`, `sizeSnap$` which are unthrottled
+- **viewport:** `ViewportDataService` `get$` add option to `throttle`
+
+## [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

@@ -125,6 +125,21 @@ 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>
+```
+
 ### Viewport Service
 
 ```ts

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

@@ -601,15 +601,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.) */
@@ -793,9 +798,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) {
@@ -856,6 +862,76 @@
         return ViewportDataPipe;
     }());
 
+    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: true,
+            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);
+        };
+        SsvViewportMatcherVarDirective.ctorParameters = function () { return [
+            { type: ViewportService },
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input(NAME_CAMEL + "When")
+        ], SsvViewportMatcherVarDirective.prototype, "condition", null);
+        SsvViewportMatcherVarDirective = __decorate([
+            core.Directive({
+                selector: "[" + NAME_CAMEL + "]",
+            })
+        ], SsvViewportMatcherVarDirective);
+        return SsvViewportMatcherVarDirective;
+    }());
+
     var SsvViewportMatcherContext = /** @class */ (function () {
         function SsvViewportMatcherContext() {
             this.sizeType = null;
@@ -864,10 +940,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;
@@ -879,44 +955,6 @@
             this._update$ = new rxjs.Subject();
             this._thenTemplateRef = templateRef;
         }
-        SsvViewportMatcherDirective.prototype.ngOnInit = function () {
-            // console.log("ssvViewportMatcher init");
-            var _this = this;
-            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 (_a) {
-                var _b = __read(_a, 2), prev = _b[0], curr = _b[1];
-                var _c;
-                var el = _this._thenViewRef
-                    ? _this._thenViewRef.rootNodes[0]
-                    : (_c = _this._elseViewRef) === null || _c === void 0 ? void 0 : _c.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)) {
@@ -960,22 +998,60 @@
             enumerable: true,
             configurable: true
         });
+        SsvViewportMatcherDirective.prototype.ngOnInit = function () {
+            // console.log("ssvViewportMatcher init");
+            var _this = this;
+            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 (_a) {
+                var _b = __read(_a, 2), prev = _b[0], curr = _b[1];
+                var _c;
+                var el = _this._thenViewRef
+                    ? _this._thenViewRef.rootNodes[0]
+                    : (_c = _this._elseViewRef) === null || _c === void 0 ? void 0 : _c.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);
                     }
                 }
             }
@@ -1009,6 +1085,7 @@
     var MODULE_CONFIG_DATA = new core.InjectionToken("@ssv/ngx.ux/configData");
     var components = [
         SsvViewportMatcherDirective,
+        SsvViewportMatcherVarDirective,
         ViewportDataPipe,
     ];
     // todo: create module for Viewport
@@ -1054,13 +1131,15 @@
         return {};
     }
 
-    var VERSION = "1.3.0";
+    var VERSION = "1.4.1";
 
     exports.COMPARISON_OPERATION_FUNC_MAPPING = COMPARISON_OPERATION_FUNC_MAPPING;
     exports.MODULE_CONFIG_DATA = MODULE_CONFIG_DATA;
     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;