@acorex/cdk 22.1.8 → 22.2.0-next.0

package/fesm2022/acorex-cdk-viewport-guard.mjs

@@ -0,0 +1,616 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, ApplicationRef, EnvironmentInjector, DestroyRef, DOCUMENT, PLATFORM_ID, NgZone, signal, effect, untracked, createComponent, Injectable, ElementRef, afterNextRender, TemplateRef, Directive, contentChild, booleanAttribute } from '@angular/core';
+import { AXTranslationService } from '@acorex/core/translation';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class AXViewportGuardOverlayComponent {
+    constructor() {
+        this.guard = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "guard" }] : /* istanbul ignore next */ []));
+    }
+    context(view) {
+        const message = {
+            kind: view.kind,
+            orientation: view.orientation,
+            kicker: view.kicker,
+            title: view.title,
+            message: view.message,
+            hint: view.hint,
+        };
+        return { $implicit: message, message };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXViewportGuardOverlayComponent, isStandalone: true, selector: "ax-viewport-guard-overlay", inputs: { guard: { classPropertyName: "guard", publicName: "guard", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-vg-host" }, ngImport: i0, template: `
+    @if (guard(); as view) {
+      <div
+        class="ax-vg"
+        role="alertdialog"
+        aria-modal="true"
+        tabindex="0"
+        [attr.aria-labelledby]="view.template ? null : 'ax-vg-title'"
+        [attr.aria-describedby]="view.template ? null : 'ax-vg-message'"
+        [attr.aria-label]="view.template ? view.title : null"
+      >
+        @if (view.template; as template) {
+          <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context(view)" />
+        } @else {
+          <section class="ax-vg__card" [attr.data-kind]="view.kind">
+            <div
+              class="ax-vg__art"
+              [class.ax-vg__art--portrait]="view.kind === 'orientation' && view.orientation === 'portrait'"
+              [class.ax-vg__art--landscape]="view.kind === 'orientation' && view.orientation === 'landscape'"
+              aria-hidden="true"
+            >
+              @switch (view.kind) {
+                @case ('size') {
+                  <svg class="ax-vg__glyph" viewBox="0 0 64 64" fill="none">
+                    <rect x="18" y="18" width="28" height="28" rx="6" stroke="currentColor" stroke-width="2.25" />
+                    <path
+                      d="M10 18V10h8M54 18V10h-8M10 46v8h8M54 46v8h-8"
+                      stroke="currentColor"
+                      stroke-width="2.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                }
+                @case ('orientation') {
+                  <svg class="ax-vg__orbit" viewBox="0 0 64 64" fill="none">
+                    <path
+                      d="M32 54A22 22 0 1 1 48.4 17.3"
+                      stroke="currentColor"
+                      stroke-width="2.4"
+                      stroke-linecap="round"
+                    />
+                    <path d="M52.7 22.1 45 19.5 50.9 14.1Z" fill="currentColor" />
+                  </svg>
+                  <svg class="ax-vg__phone" viewBox="0 0 64 64" fill="none">
+                    <rect x="24" y="12" width="16" height="40" rx="4" stroke="currentColor" stroke-width="2.25" />
+                    <path d="M29 18h6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" />
+                    <circle cx="32" cy="45" r="1.35" fill="currentColor" />
+                  </svg>
+                }
+              }
+            </div>
+            <div class="ax-vg__copy">
+              <p class="ax-vg__kicker">{{ view.kicker }}</p>
+              <h2 id="ax-vg-title" class="ax-vg__title">{{ view.title }}</h2>
+              <p id="ax-vg-message" class="ax-vg__message">{{ view.message }}</p>
+              <p class="ax-vg__hint">{{ view.hint }}</p>
+            </div>
+          </section>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{position:fixed;inset:0;z-index:2147483000;display:block;overflow:auto;overscroll-behavior:none;color:#141414;color:rgba(var(--ax-sys-color-on-surface),1);background-color:#f4f4f5;background-image:radial-gradient(ellipse 90% 55% at 50% -12%,rgba(var(--ax-sys-color-warning-200),.7),transparent 58%),radial-gradient(ellipse 46% 38% at 100% 100%,rgba(var(--ax-sys-color-primary-200),.38),transparent 60%),linear-gradient(rgba(var(--ax-sys-color-surface),.94),rgba(var(--ax-sys-color-surface),.94));-webkit-font-smoothing:antialiased}.ax-vg{box-sizing:border-box;min-height:100%;display:grid;place-items:center;padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}.ax-vg:focus{outline:none}.ax-vg__card{box-sizing:border-box;width:min(26.5rem,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(.9rem,2.6vh,1.35rem);padding:clamp(1.35rem,4.2vw,2.15rem);border-radius:clamp(1.25rem,3vw,1.75rem);background:#ffffffeb;background:rgba(var(--ax-sys-color-lightest-surface),.92);border:1px solid rgba(226,226,226,.9);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),.95);box-shadow:inset 0 1px #ffffff8c,0 18px 50px #0a0a0a1f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:ax-viewport-guard-in .32s cubic-bezier(.2,.8,.2,1)}.ax-vg__art{position:relative;width:clamp(4.75rem,22vw,6.5rem);height:clamp(4.75rem,22vw,6.5rem);flex:none;display:grid;place-items:center;border-radius:1.5rem;color:#8a4b00;color:rgba(var(--ax-sys-color-warning-800),1);background:#fff4dc;background:radial-gradient(circle at 50% 38%,rgba(var(--ax-sys-color-warning-50),1),rgba(var(--ax-sys-color-warning-100),1));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-warning-200),.95)}.ax-vg__glyph{width:64%;height:64%;animation:ax-viewport-guard-pulse 2.6s ease-in-out infinite}.ax-vg__orbit,.ax-vg__phone{position:absolute;width:auto;height:auto}.ax-vg__orbit{inset:10%;opacity:.9}.ax-vg__phone{inset:27%;transform-origin:center}.ax-vg__art--portrait .ax-vg__phone{animation:ax-viewport-guard-to-portrait 2.6s ease-in-out infinite}.ax-vg__art--landscape .ax-vg__phone{animation:ax-viewport-guard-to-landscape 2.6s ease-in-out infinite}.ax-vg__copy{width:100%;min-width:0}.ax-vg__kicker{display:inline-flex;margin:0 0 .55rem;padding:.18rem .65rem;border-radius:999px;background:rgba(var(--ax-sys-color-warning-100),1);color:rgba(var(--ax-sys-color-warning-900),1);font-size:.75rem;font-weight:600;line-height:1.4}.ax-vg__title{margin:0;font-size:clamp(1.25rem,1.6vw + .85rem,1.7rem);font-weight:700;line-height:1.28;text-wrap:balance}.ax-vg__message{margin:.55rem 0 0;font-size:clamp(.9rem,.5vw + .78rem,1.02rem);line-height:1.6;color:#141414b8;color:rgba(var(--ax-sys-color-on-surface),.72);text-wrap:pretty}.ax-vg__hint{display:inline-flex;align-items:center;justify-content:center;margin:1rem 0 0;padding:.42rem .8rem;border-radius:999px;background:rgba(var(--ax-sys-color-warning-50),1);color:rgba(var(--ax-sys-color-warning-900),1);font-size:clamp(.75rem,.4vw + .68rem,.84rem);font-weight:600;line-height:1.3}@media(max-height:540px){.ax-vg__card{flex-direction:row;align-items:center;text-align:start;width:min(42rem,100%);gap:1rem;padding:1rem 1.15rem;border-radius:1.35rem}.ax-vg__art{width:4.15rem;height:4.15rem;border-radius:1.15rem}.ax-vg__copy{flex:1;width:auto}.ax-vg__kicker{margin-bottom:.35rem}.ax-vg__message{margin-top:.35rem}.ax-vg__hint{margin-top:.7rem}}@media(max-width:380px){.ax-vg{padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.ax-vg__card{padding:1.15rem 1rem;border-radius:1.2rem}}@media(max-height:540px)and (max-width:560px){.ax-vg__title{font-size:1.05rem}.ax-vg__message{font-size:.84rem;line-height:1.45}.ax-vg__hint{margin-top:.55rem;padding:.32rem .65rem}}@media(max-height:340px){.ax-vg__kicker{display:none}.ax-vg__art{width:3.25rem;height:3.25rem}}@media(prefers-reduced-motion:reduce){.ax-vg__card,.ax-vg__glyph,.ax-vg__phone{animation:none}.ax-vg__art--portrait .ax-vg__phone{transform:rotate(0)}.ax-vg__art--landscape .ax-vg__phone{transform:rotate(90deg)}}@keyframes ax-viewport-guard-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes ax-viewport-guard-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes ax-viewport-guard-to-portrait{0%,18%{transform:rotate(90deg)}46%,70%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes ax-viewport-guard-to-landscape{0%,18%{transform:rotate(0)}46%,70%{transform:rotate(90deg)}to{transform:rotate(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-viewport-guard-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'ax-vg-host',
+                    }, template: `
+    @if (guard(); as view) {
+      <div
+        class="ax-vg"
+        role="alertdialog"
+        aria-modal="true"
+        tabindex="0"
+        [attr.aria-labelledby]="view.template ? null : 'ax-vg-title'"
+        [attr.aria-describedby]="view.template ? null : 'ax-vg-message'"
+        [attr.aria-label]="view.template ? view.title : null"
+      >
+        @if (view.template; as template) {
+          <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context(view)" />
+        } @else {
+          <section class="ax-vg__card" [attr.data-kind]="view.kind">
+            <div
+              class="ax-vg__art"
+              [class.ax-vg__art--portrait]="view.kind === 'orientation' && view.orientation === 'portrait'"
+              [class.ax-vg__art--landscape]="view.kind === 'orientation' && view.orientation === 'landscape'"
+              aria-hidden="true"
+            >
+              @switch (view.kind) {
+                @case ('size') {
+                  <svg class="ax-vg__glyph" viewBox="0 0 64 64" fill="none">
+                    <rect x="18" y="18" width="28" height="28" rx="6" stroke="currentColor" stroke-width="2.25" />
+                    <path
+                      d="M10 18V10h8M54 18V10h-8M10 46v8h8M54 46v8h-8"
+                      stroke="currentColor"
+                      stroke-width="2.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                }
+                @case ('orientation') {
+                  <svg class="ax-vg__orbit" viewBox="0 0 64 64" fill="none">
+                    <path
+                      d="M32 54A22 22 0 1 1 48.4 17.3"
+                      stroke="currentColor"
+                      stroke-width="2.4"
+                      stroke-linecap="round"
+                    />
+                    <path d="M52.7 22.1 45 19.5 50.9 14.1Z" fill="currentColor" />
+                  </svg>
+                  <svg class="ax-vg__phone" viewBox="0 0 64 64" fill="none">
+                    <rect x="24" y="12" width="16" height="40" rx="4" stroke="currentColor" stroke-width="2.25" />
+                    <path d="M29 18h6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" />
+                    <circle cx="32" cy="45" r="1.35" fill="currentColor" />
+                  </svg>
+                }
+              }
+            </div>
+            <div class="ax-vg__copy">
+              <p class="ax-vg__kicker">{{ view.kicker }}</p>
+              <h2 id="ax-vg-title" class="ax-vg__title">{{ view.title }}</h2>
+              <p id="ax-vg-message" class="ax-vg__message">{{ view.message }}</p>
+              <p class="ax-vg__hint">{{ view.hint }}</p>
+            </div>
+          </section>
+        }
+      </div>
+    }
+  `, styles: [":host{position:fixed;inset:0;z-index:2147483000;display:block;overflow:auto;overscroll-behavior:none;color:#141414;color:rgba(var(--ax-sys-color-on-surface),1);background-color:#f4f4f5;background-image:radial-gradient(ellipse 90% 55% at 50% -12%,rgba(var(--ax-sys-color-warning-200),.7),transparent 58%),radial-gradient(ellipse 46% 38% at 100% 100%,rgba(var(--ax-sys-color-primary-200),.38),transparent 60%),linear-gradient(rgba(var(--ax-sys-color-surface),.94),rgba(var(--ax-sys-color-surface),.94));-webkit-font-smoothing:antialiased}.ax-vg{box-sizing:border-box;min-height:100%;display:grid;place-items:center;padding:max(1.25rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}.ax-vg:focus{outline:none}.ax-vg__card{box-sizing:border-box;width:min(26.5rem,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(.9rem,2.6vh,1.35rem);padding:clamp(1.35rem,4.2vw,2.15rem);border-radius:clamp(1.25rem,3vw,1.75rem);background:#ffffffeb;background:rgba(var(--ax-sys-color-lightest-surface),.92);border:1px solid rgba(226,226,226,.9);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),.95);box-shadow:inset 0 1px #ffffff8c,0 18px 50px #0a0a0a1f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:ax-viewport-guard-in .32s cubic-bezier(.2,.8,.2,1)}.ax-vg__art{position:relative;width:clamp(4.75rem,22vw,6.5rem);height:clamp(4.75rem,22vw,6.5rem);flex:none;display:grid;place-items:center;border-radius:1.5rem;color:#8a4b00;color:rgba(var(--ax-sys-color-warning-800),1);background:#fff4dc;background:radial-gradient(circle at 50% 38%,rgba(var(--ax-sys-color-warning-50),1),rgba(var(--ax-sys-color-warning-100),1));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-warning-200),.95)}.ax-vg__glyph{width:64%;height:64%;animation:ax-viewport-guard-pulse 2.6s ease-in-out infinite}.ax-vg__orbit,.ax-vg__phone{position:absolute;width:auto;height:auto}.ax-vg__orbit{inset:10%;opacity:.9}.ax-vg__phone{inset:27%;transform-origin:center}.ax-vg__art--portrait .ax-vg__phone{animation:ax-viewport-guard-to-portrait 2.6s ease-in-out infinite}.ax-vg__art--landscape .ax-vg__phone{animation:ax-viewport-guard-to-landscape 2.6s ease-in-out infinite}.ax-vg__copy{width:100%;min-width:0}.ax-vg__kicker{display:inline-flex;margin:0 0 .55rem;padding:.18rem .65rem;border-radius:999px;background:rgba(var(--ax-sys-color-warning-100),1);color:rgba(var(--ax-sys-color-warning-900),1);font-size:.75rem;font-weight:600;line-height:1.4}.ax-vg__title{margin:0;font-size:clamp(1.25rem,1.6vw + .85rem,1.7rem);font-weight:700;line-height:1.28;text-wrap:balance}.ax-vg__message{margin:.55rem 0 0;font-size:clamp(.9rem,.5vw + .78rem,1.02rem);line-height:1.6;color:#141414b8;color:rgba(var(--ax-sys-color-on-surface),.72);text-wrap:pretty}.ax-vg__hint{display:inline-flex;align-items:center;justify-content:center;margin:1rem 0 0;padding:.42rem .8rem;border-radius:999px;background:rgba(var(--ax-sys-color-warning-50),1);color:rgba(var(--ax-sys-color-warning-900),1);font-size:clamp(.75rem,.4vw + .68rem,.84rem);font-weight:600;line-height:1.3}@media(max-height:540px){.ax-vg__card{flex-direction:row;align-items:center;text-align:start;width:min(42rem,100%);gap:1rem;padding:1rem 1.15rem;border-radius:1.35rem}.ax-vg__art{width:4.15rem;height:4.15rem;border-radius:1.15rem}.ax-vg__copy{flex:1;width:auto}.ax-vg__kicker{margin-bottom:.35rem}.ax-vg__message{margin-top:.35rem}.ax-vg__hint{margin-top:.7rem}}@media(max-width:380px){.ax-vg{padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.ax-vg__card{padding:1.15rem 1rem;border-radius:1.2rem}}@media(max-height:540px)and (max-width:560px){.ax-vg__title{font-size:1.05rem}.ax-vg__message{font-size:.84rem;line-height:1.45}.ax-vg__hint{margin-top:.55rem;padding:.32rem .65rem}}@media(max-height:340px){.ax-vg__kicker{display:none}.ax-vg__art{width:3.25rem;height:3.25rem}}@media(prefers-reduced-motion:reduce){.ax-vg__card,.ax-vg__glyph,.ax-vg__phone{animation:none}.ax-vg__art--portrait .ax-vg__phone{transform:rotate(0)}.ax-vg__art--landscape .ax-vg__phone{transform:rotate(90deg)}}@keyframes ax-viewport-guard-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes ax-viewport-guard-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes ax-viewport-guard-to-portrait{0%,18%{transform:rotate(90deg)}46%,70%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes ax-viewport-guard-to-landscape{0%,18%{transform:rotate(0)}46%,70%{transform:rotate(90deg)}to{transform:rotate(0)}}\n"] }]
+        }], propDecorators: { guard: [{ type: i0.Input, args: [{ isSignal: true, alias: "guard", required: false }] }] } });
+
+const PHONE_SHORT_SIDE = 540;
+const EMPTY_SNAPSHOT = { width: 0, height: 0, portrait: true, phone: false, ready: false };
+class AXViewportGuardPresenter {
+    constructor() {
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.zone = inject(NgZone);
+        this.translation = inject(AXTranslationService);
+        this.requests = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requests" }] : /* istanbul ignore next */ []));
+        this.lang = signal(this.translation.getActiveLang(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []));
+        this.snapshot = signal(EMPTY_SNAPSHOT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+        this.viewRef = null;
+        this.listening = false;
+        this.bodyOverflow = null;
+        this.focusedKey = '';
+        this.translation.langChanges$.pipe(takeUntilDestroyed()).subscribe((lang) => this.lang.set(lang));
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        effect(() => {
+            const view = this.activeView();
+            untracked(() => this.sync(view));
+        });
+    }
+    ensureListening() {
+        if (this.listening || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const win = this.document.defaultView;
+        if (!win) {
+            return;
+        }
+        this.listening = true;
+        const portrait = win.matchMedia('(orientation: portrait)');
+        const publish = () => this.zone.run(() => this.snapshot.set(readViewport(win)));
+        const publishSoon = () => {
+            publish();
+            win.requestAnimationFrame(publish);
+        };
+        publish();
+        win.addEventListener('resize', publish, { passive: true });
+        win.visualViewport?.addEventListener('resize', publish);
+        win.addEventListener('orientationchange', publishSoon);
+        portrait.addEventListener('change', publishSoon);
+        this.destroyRef.onDestroy(() => {
+            win.removeEventListener('resize', publish);
+            win.visualViewport?.removeEventListener('resize', publish);
+            win.removeEventListener('orientationchange', publishSoon);
+            portrait.removeEventListener('change', publishSoon);
+        });
+    }
+    claim(id, request) {
+        this.requests.update((current) => {
+            const existing = current.get(id);
+            if (!request && !existing) {
+                return current;
+            }
+            if (request && existing && sameRequest(existing, request)) {
+                return current;
+            }
+            const next = new Map(current);
+            if (request) {
+                next.set(id, request);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    }
+    activeView() {
+        this.lang();
+        const request = pickRequest(this.requests());
+        if (!request) {
+            return null;
+        }
+        return request.kind === 'size' ? this.sizeView(request) : this.orientationView(request);
+    }
+    sizeView(request) {
+        const copy = request.message;
+        const width = request.minWidth > 0 ? String(request.minWidth) : '';
+        const height = request.minHeight != null && request.minHeight > 0 ? String(request.minHeight) : '';
+        const params = {
+            width: isolate(width),
+            height: isolate(height),
+            size: isolate(width && height ? `${width} × ${height}` : width || height),
+        };
+        const hintKey = width && height ? 'hint' : height ? 'hint-height' : 'hint-width';
+        return {
+            kind: 'size',
+            orientation: null,
+            kicker: this.part(copy?.kicker, 'viewport-guard.size.kicker'),
+            title: this.part(copy?.title, 'viewport-guard.size.title'),
+            message: this.part(copy?.message, 'viewport-guard.size.message'),
+            hint: this.part(copy?.hint, `viewport-guard.size.${hintKey}`, params),
+            template: request.template,
+        };
+    }
+    orientationView(request) {
+        const copy = request.message;
+        const mode = request.orientation;
+        return {
+            kind: 'orientation',
+            orientation: mode,
+            kicker: this.part(copy?.kicker, 'viewport-guard.orientation.kicker'),
+            title: this.part(copy?.title, `viewport-guard.orientation.title-${mode}`),
+            message: this.part(copy?.message, `viewport-guard.orientation.message-${mode}`),
+            hint: this.part(copy?.hint, `viewport-guard.orientation.hint-${mode}`),
+            template: request.template,
+        };
+    }
+    part(custom, key, params) {
+        const source = custom?.trim() || key;
+        return this.translation.translateSync(source, { scope: 'acorex', params });
+    }
+    sync(view) {
+        if (!view) {
+            this.teardown();
+            return;
+        }
+        this.lockScroll();
+        const ref = this.ensureView();
+        ref.setInput('guard', view);
+        ref.changeDetectorRef.detectChanges();
+        this.focus(view);
+    }
+    ensureView() {
+        if (this.viewRef) {
+            return this.viewRef;
+        }
+        const ref = createComponent(AXViewportGuardOverlayComponent, { environmentInjector: this.environmentInjector });
+        this.appRef.attachView(ref.hostView);
+        const host = ref.location.nativeElement;
+        const body = this.document.body;
+        const fontFamily = body ? this.document.defaultView?.getComputedStyle(body).fontFamily : '';
+        if (fontFamily) {
+            host.style.fontFamily = fontFamily;
+        }
+        this.document.documentElement.appendChild(host);
+        this.viewRef = ref;
+        return ref;
+    }
+    focus(view) {
+        const key = `${view.kind}|${view.orientation}|${view.title}|${view.message}|${view.hint}`;
+        if (key === this.focusedKey) {
+            return;
+        }
+        this.focusedKey = key;
+        queueMicrotask(() => {
+            const dialog = this.viewRef?.location.nativeElement.querySelector('[role="alertdialog"]');
+            dialog?.focus({ preventScroll: true });
+        });
+    }
+    lockScroll() {
+        const body = this.document.body;
+        if (!body || this.bodyOverflow !== null) {
+            return;
+        }
+        this.bodyOverflow = body.style.overflow;
+        body.style.overflow = 'hidden';
+    }
+    teardown() {
+        this.focusedKey = '';
+        const body = this.document.body;
+        if (body && this.bodyOverflow !== null) {
+            body.style.overflow = this.bodyOverflow;
+            this.bodyOverflow = null;
+        }
+        if (!this.viewRef) {
+            return;
+        }
+        this.appRef.detachView(this.viewRef.hostView);
+        this.viewRef.destroy();
+        this.viewRef = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardPresenter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardPresenter, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardPresenter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+let nextGuardId = 0;
+/** Wires a directive to the shared overlay. Call from the directive constructor. */
+function connectViewportGuard(prefix, active) {
+    const host = inject(ElementRef).nativeElement;
+    const presenter = inject(AXViewportGuardPresenter);
+    const platformId = inject(PLATFORM_ID);
+    const destroyRef = inject(DestroyRef);
+    const id = `${prefix}-${++nextGuardId}`;
+    if (!isPlatformBrowser(platformId)) {
+        return;
+    }
+    afterNextRender(() => presenter.ensureListening());
+    effect(() => {
+        const request = active();
+        untracked(() => {
+            presenter.claim(id, request);
+            if (request) {
+                lockHost(host, id);
+            }
+            else {
+                unlockHost(host, id);
+            }
+        });
+    });
+    destroyRef.onDestroy(() => {
+        presenter.claim(id, null);
+        unlockHost(host, id);
+    });
+}
+function readViewport(win) {
+    const coarse = win.matchMedia('(pointer: coarse)').matches;
+    const shortSide = Math.min(win.screen.width, win.screen.height);
+    const dpr = win.devicePixelRatio || 1;
+    const cssShortSide = shortSide > PHONE_SHORT_SIDE && dpr > 1 && shortSide / dpr <= PHONE_SHORT_SIDE ? shortSide / dpr : shortSide;
+    return {
+        width: Math.round(win.innerWidth),
+        height: Math.round(win.innerHeight),
+        portrait: win.matchMedia('(orientation: portrait)').matches,
+        phone: coarse && cssShortSide <= PHONE_SHORT_SIDE,
+        ready: true,
+    };
+}
+function pickRequest(requests) {
+    let size = null;
+    let orientation = null;
+    for (const request of requests.values()) {
+        if (request.kind === 'size') {
+            const wider = size != null && request.minWidth > size.minWidth;
+            const taller = size != null && request.minWidth === size.minWidth && (request.minHeight ?? 0) > (size.minHeight ?? 0);
+            if (!size || wider || taller) {
+                size = request;
+            }
+        }
+        else {
+            orientation ??= request;
+        }
+    }
+    return size ?? orientation;
+}
+function sameRequest(left, right) {
+    if (left.kind !== right.kind || left.template !== right.template || !sameMessage(left.message, right.message)) {
+        return false;
+    }
+    if (left.kind === 'size' && right.kind === 'size') {
+        return left.minWidth === right.minWidth && left.minHeight === right.minHeight;
+    }
+    return left.kind === 'orientation' && right.kind === 'orientation' && left.orientation === right.orientation;
+}
+function sameMessage(left, right) {
+    return (left?.kicker === right?.kicker &&
+        left?.title === right?.title &&
+        left?.message === right?.message &&
+        left?.hint === right?.hint);
+}
+function isolate(value) {
+    return value ? `\u2066${value}\u2069` : '';
+}
+const hostLocks = new WeakMap();
+function lockHost(element, token) {
+    let state = hostLocks.get(element);
+    if (!state) {
+        state = {
+            tokens: new Set(),
+            display: element.style.getPropertyValue('display'),
+            inert: element.hasAttribute('inert'),
+            ariaHidden: element.getAttribute('aria-hidden'),
+        };
+        hostLocks.set(element, state);
+    }
+    state.tokens.add(token);
+    element.style.setProperty('display', 'none', 'important');
+    element.setAttribute('inert', '');
+    element.setAttribute('aria-hidden', 'true');
+}
+function unlockHost(element, token) {
+    const state = hostLocks.get(element);
+    if (!state) {
+        return;
+    }
+    state.tokens.delete(token);
+    if (state.tokens.size > 0) {
+        return;
+    }
+    if (state.display) {
+        element.style.setProperty('display', state.display);
+    }
+    else {
+        element.style.removeProperty('display');
+    }
+    if (state.inert) {
+        element.setAttribute('inert', '');
+    }
+    else {
+        element.removeAttribute('inert');
+    }
+    if (state.ariaHidden == null) {
+        element.removeAttribute('aria-hidden');
+    }
+    else {
+        element.setAttribute('aria-hidden', state.ariaHidden);
+    }
+    hostLocks.delete(element);
+}
+
+/**
+ * Types an `ng-template` whose `let-message` is the resolved guard copy.
+ *
+ * ```html
+ * <ng-template #warning axViewportGuardTemplate let-message>
+ *   <h2>{{ message.title }}</h2>
+ *   <p>{{ message.message }}</p>
+ * </ng-template>
+ *
+ * <div axMinViewport="1024" [template]="warning"></div>
+ * ```
+ */
+class AXViewportGuardTemplateDirective {
+    constructor() {
+        this.template = inject((TemplateRef));
+    }
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXViewportGuardTemplateDirective, isStandalone: true, selector: "ng-template[axViewportGuardTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXViewportGuardTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[axViewportGuardTemplate]',
+                }]
+        }] });
+
+/**
+ * Hides the host when the viewport is smaller than the given size.
+ *
+ * ```html
+ * <div axMinViewport="1024" [minHeight]="640" [message]="copy" [template]="warning"></div>
+ * ```
+ */
+class AXMinViewportDirective {
+    constructor() {
+        /** Minimum viewport width in CSS pixels. */
+        this.minWidth = input(0, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), alias: 'axMinViewport', transform: pxInput });
+        /** Minimum viewport height in CSS pixels. Omitted heights are ignored. */
+        this.minHeight = input(null, { ...(ngDevMode ? { debugName: "minHeight" } : /* istanbul ignore next */ {}), transform: optionalPxInput });
+        /** Replaces any part of the default translated warning. */
+        this.message = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Custom warning. `let-message` receives the resolved copy. */
+        this.template = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+        this.presenter = inject(AXViewportGuardPresenter);
+        this.projectedTemplate = contentChild(AXViewportGuardTemplateDirective, { ...(ngDevMode ? { debugName: "projectedTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+        connectViewportGuard('size', () => this.request());
+    }
+    request() {
+        const message = this.message();
+        const template = this.template() ?? this.projectedTemplate()?.template ?? null;
+        const viewport = this.presenter.snapshot();
+        const minWidth = this.minWidth();
+        const minHeight = this.minHeight();
+        if (!viewport.ready) {
+            return null;
+        }
+        const blocked = (minWidth > 0 && viewport.width < minWidth) ||
+            (minHeight != null && minHeight > 0 && viewport.height < minHeight);
+        return blocked ? { kind: 'size', minWidth, minHeight, message, template } : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXMinViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: AXMinViewportDirective, isStandalone: true, selector: "[axMinViewport]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "axMinViewport", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: AXViewportGuardTemplateDirective, descendants: true, isSignal: true }], exportAs: ["axMinViewport"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXMinViewportDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axMinViewport]',
+                    exportAs: 'axMinViewport',
+                }]
+        }], ctorParameters: () => [], propDecorators: { minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "axMinViewport", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXViewportGuardTemplateDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+function pxInput(value) {
+    if (value == null || value === '') {
+        return 0;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function optionalPxInput(value) {
+    if (value == null || value === '') {
+        return null;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+/**
+ * On a phone, hides the host when the device is not in the required orientation.
+ *
+ * ```html
+ * <div axOrientationLock="landscape" [message]="copy" [template]="warning"></div>
+ * ```
+ */
+class AXOrientationLockDirective {
+    constructor() {
+        /** Orientation that keeps the page visible. */
+        this.orientation = input.required({ ...(ngDevMode ? { debugName: "orientation" } : /* istanbul ignore next */ {}), alias: 'axOrientationLock' });
+        /**
+         * Limits the guard to phones. Set to false to apply it on every device.
+         *
+         * @defaultValue true
+         */
+        this.phonesOnly = input(true, { ...(ngDevMode ? { debugName: "phonesOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Replaces any part of the default translated warning. */
+        this.message = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Custom warning. `let-message` receives the resolved copy. */
+        this.template = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+        this.presenter = inject(AXViewportGuardPresenter);
+        this.projectedTemplate = contentChild(AXViewportGuardTemplateDirective, { ...(ngDevMode ? { debugName: "projectedTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+        connectViewportGuard('orientation', () => this.request());
+    }
+    request() {
+        const orientation = this.orientation();
+        const message = this.message();
+        const template = this.template() ?? this.projectedTemplate()?.template ?? null;
+        const viewport = this.presenter.snapshot();
+        if ((orientation !== 'portrait' && orientation !== 'landscape') || !viewport.ready) {
+            return null;
+        }
+        if (this.phonesOnly() && !viewport.phone) {
+            return null;
+        }
+        const current = viewport.portrait ? 'portrait' : 'landscape';
+        return current === orientation ? null : { kind: 'orientation', orientation, message, template };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOrientationLockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: AXOrientationLockDirective, isStandalone: true, selector: "[axOrientationLock]", inputs: { orientation: { classPropertyName: "orientation", publicName: "axOrientationLock", isSignal: true, isRequired: true, transformFunction: null }, phonesOnly: { classPropertyName: "phonesOnly", publicName: "phonesOnly", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: AXViewportGuardTemplateDirective, descendants: true, isSignal: true }], exportAs: ["axOrientationLock"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOrientationLockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axOrientationLock]',
+                    exportAs: 'axOrientationLock',
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "axOrientationLock", required: true }] }], phonesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "phonesOnly", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXViewportGuardTemplateDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXMinViewportDirective, AXOrientationLockDirective, AXViewportGuardTemplateDirective };
+//# sourceMappingURL=acorex-cdk-viewport-guard.mjs.map