@lukfel/ng-scaffold 22.1.3 → 22.1.4

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -1,6 +1,6 @@
+import { MediaMatcher, BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, DOCUMENT, signal, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild, computed, model, afterNextRender, linkedSignal, TemplateRef, Directive, contentChild } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { inject, PLATFORM_ID, REQUEST, Injectable, InjectionToken, makeEnvironmentProviders, DOCUMENT, signal, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild, computed, model, afterNextRender, linkedSignal, TemplateRef, Directive, contentChild } from '@angular/core';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, KeyValuePipe } from '@angular/common';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/router';
@@ -45,9 +45,89 @@ import { MatRippleModule } from '@angular/material/core';
 import * as i8 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 
+/**
+ * Viewports assumed during SSR. A request reveals a device class, never an actual viewport, and
+ * CDK exposes only query strings, so these are plausible device sizes rather than derived values.
+ * They have to keep landing in `Breakpoints.XSmall` and `Breakpoints.Large`, which the spec asserts.
+ */
+const SSR_MOBILE_VIEWPORT = { width: 390, height: 844 };
+const SSR_DESKTOP_VIEWPORT = { width: 1280, height: 800 };
+const MOBILE_USER_AGENT_REGEX = /Android|iPhone|iPod|Windows Phone|IEMobile|BlackBerry|Opera Mini/i;
+/**
+ * Answers media queries during SSR from the incoming request rather than matching nothing, so
+ * breakpoint driven markup is server rendered for the requesting device class instead of always
+ * falling back to desktop. On the browser it defers to the platform implementation.
+ *
+ * Opt in with `provideScaffold({ ssrBreakpoints: true })`. Doing so makes the SSR response depend
+ * on the request, so whatever serves it must `Vary` on `Sec-CH-UA-Mobile` and `User-Agent` or a
+ * cached mobile render will be handed to a desktop client.
+ */
+class ScaffoldMediaMatcher extends MediaMatcher {
+    constructor() {
+        super(...arguments);
+        this.platformId = inject(PLATFORM_ID);
+        this.request = inject(REQUEST, { optional: true });
+    }
+    matchMedia(query) {
+        if (isPlatformBrowser(this.platformId))
+            return super.matchMedia(query);
+        const { width, height } = this.isMobileRequest() ? SSR_MOBILE_VIEWPORT : SSR_DESKTOP_VIEWPORT;
+        return {
+            matches: matchesMediaQuery(query, width, height),
+            media: query,
+            onchange: null,
+            addListener: () => { },
+            removeListener: () => { },
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => false,
+        };
+    }
+    // Sec-CH-UA-Mobile needs no Accept-CH opt in on Chromium; other browsers only give a User-Agent
+    isMobileRequest() {
+        const headers = this.request?.headers;
+        if (!headers)
+            return false;
+        const hint = headers.get('sec-ch-ua-mobile');
+        if (hint)
+            return hint.includes('?1');
+        return MOBILE_USER_AGENT_REGEX.test(headers.get('user-agent') ?? '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldMediaMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldMediaMatcher }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldMediaMatcher, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Evaluates the width and orientation parts of a media query against an assumed viewport.
+ * Conditions a request cannot answer, such as `prefers-color-scheme`, never match.
+ */
+function matchesMediaQuery(query, width, height) {
+    // A comma separated query matches when any of its branches matches
+    return query.split(',').some((branch) => branch.split(' and ').every((condition) => {
+        const min = condition.match(/min-width:\s*([\d.]+)px/);
+        if (min)
+            return width >= parseFloat(min[1]);
+        const max = condition.match(/max-width:\s*([\d.]+)px/);
+        if (max)
+            return width <= parseFloat(max[1]);
+        if (/orientation:\s*portrait/.test(condition))
+            return height >= width;
+        if (/orientation:\s*landscape/.test(condition))
+            return width > height;
+        return false;
+    }));
+}
+
 const CONFIG = new InjectionToken('config');
 function provideScaffold(config = {}) {
-    return makeEnvironmentProviders([{ provide: CONFIG, useValue: config }]);
+    const providers = [{ provide: CONFIG, useValue: config }];
+    // Opt in, because it makes the SSR response depend on the request and therefore on Vary
+    if (config.ssrBreakpoints) {
+        providers.push({ provide: MediaMatcher, useClass: ScaffoldMediaMatcher });
+    }
+    return makeEnvironmentProviders(providers);
 }
 
 class BreakpointService {
@@ -1845,5 +1925,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreakpointService, CONFIG, ColorPickerComponent, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, NotificationComponent, OverlayService, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldService, SeoService, SnackbarService, ThemeService, TranslationService, provideScaffold };
+export { BreakpointService, CONFIG, ColorPickerComponent, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, NotificationComponent, OverlayService, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldMediaMatcher, ScaffoldService, SeoService, SnackbarService, ThemeService, TranslationService, matchesMediaQuery, provideScaffold };
 //# sourceMappingURL=lukfel-ng-scaffold.mjs.map