@rblabs-dev/axiom 1.2.2 → 1.2.4

package/README.md

@@ -13,6 +13,8 @@ This README covers installing the package and wiring it into an app.
 - Angular 21 or 22, with the matching `@angular/material` and `@angular/cdk`. The package also uses
   `@angular/forms`, `@angular/router` and `@angular/platform-browser`, which every Angular CLI app
   has.
+- rxjs 7.4 or later within 7.x (`^7.4.0`), the 7.x range Angular 21 and 22 accept. rxjs 6 is not
+  supported.
 - SCSS global styles: `"inlineStyleLanguage": "scss"` in `angular.json` and a `src/styles.scss`.
 - Browsers with `light-dark()` and `color-mix()`: Chrome and Edge 123, Firefox 120, Safari 17.5 or
   later.
@@ -73,6 +75,12 @@ Run these steps from the folder that holds the app's `angular.json`.
    of after the global stylesheet. Keep `crossorigin`: without it the browser does not reuse the
    preloaded file. `axiom verify-production-assets` fails the build when either step is missing.
 
+   The Inter names stay the same across releases, so the preload never needs updating. In return,
+   the app's server must not cache `/fonts/inter-*.woff2` as `immutable`: keep `immutable` for
+   content-hashed names only (Angular's build output, the icon subset) and serve the Inter files
+   with a short cache such as `Cache-Control: public, max-age=86400`. Avoid `no-cache` for them,
+   since a revalidation on every visit can make the browser miss the `optional` deadline.
+
 4. **Global styles.** Call the entry mixin once, at the top of `src/styles.scss`, with the subset's
    file name (later runs of `build:icon-font` update it):
 
@@ -152,6 +160,12 @@ each pull request needs.
 | `fonts/`                               | Inter Variable (Latin and Latin Extended WOFF2) and its license, served by the app at `/fonts/`                                          |
 | `brand/`, `material-symbols-icons.txt` | Brand templates and the kit's icon inventory, read by the commands                                                                       |
 
+Import the TypeScript API from `@rblabs-dev/axiom`. Inside the package, each component, shell and
+brand component is its own secondary entry point (`@rblabs-dev/axiom/panel`, …), so your bundler
+puts it, with the Material code it uses, in the lazy chunk of the routes that use it, and only
+`provideRbDesignSystem()` and the theme service join your initial bundle. Those entry points are
+how the package is laid out, not an API: a release may rename, merge or split them.
+
 ## The `axiom` command
 
 Each command reads the app's source root, `public/` folder and build output from `angular.json`.

package/app-shell/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-app-shell.mjs",
+  "typings": "../types/rblabs-dev-axiom-app-shell.d.ts"
+}

package/brand-lockup/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-brand-lockup.mjs",
+  "typings": "../types/rblabs-dev-axiom-brand-lockup.d.ts"
+}

package/central-sign-in/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-central-sign-in.mjs",
+  "typings": "../types/rblabs-dev-axiom-central-sign-in.d.ts"
+}

package/confirm-dialog/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-confirm-dialog.mjs",
+  "typings": "../types/rblabs-dev-axiom-confirm-dialog.d.ts"
+}

package/core/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-core.mjs",
+  "typings": "../types/rblabs-dev-axiom-core.d.ts"
+}

package/empty-state/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/rblabs-dev-axiom-empty-state.mjs",
+  "typings": "../types/rblabs-dev-axiom-empty-state.d.ts"
+}

package/fesm2022/rblabs-dev-axiom-app-shell.mjs

@@ -0,0 +1,375 @@
+import { BreakpointObserver } from "@angular/cdk/layout";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, computed, inject, input, signal, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { MatIconButton } from "@angular/material/button";
+import { MatIcon } from "@angular/material/icon";
+import { MatSidenav, MatSidenavContainer, MatSidenavContent } from "@angular/material/sidenav";
+import { MatTooltip } from "@angular/material/tooltip";
+import { NavigationEnd, Router } from "@angular/router";
+import { RbBrandLockupComponent } from "@rblabs-dev/axiom/brand-lockup";
+import { RB_BREAKPOINTS } from "@rblabs-dev/axiom/core";
+import { RbShellFooterComponent } from "@rblabs-dev/axiom/shell-footer";
+import { RbThemeToggleComponent } from "@rblabs-dev/axiom/theme-toggle";
+import { filter } from "rxjs";
+var RbAppShellComponent = class RbAppShellComponent {
+	appName = input.required(...ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []);
+	homeLink = input("/", ...ngDevMode ? [{ debugName: "homeLink" }] : /* istanbul ignore next */ []);
+	navigation = input("none", ...ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []);
+	hasSidenav = computed(() => this.navigation() === "sidenav", ...ngDevMode ? [{ debugName: "hasSidenav" }] : /* istanbul ignore next */ []);
+	breakpointObserver = inject(BreakpointObserver);
+	isDrawer = signal(this.breakpointObserver.isMatched(RB_BREAKPOINTS.belowLg), ...ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []);
+	drawerOpen = signal(false, ...ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []);
+	main = viewChild.required("main", ...ngDevMode ? [{ debugName: "main" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		this.breakpointObserver.observe(RB_BREAKPOINTS.belowLg).pipe(takeUntilDestroyed(destroyRef)).subscribe(({ matches }) => {
+			this.isDrawer.set(matches);
+			if (!matches) this.drawerOpen.set(false);
+		});
+		inject(Router).events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(destroyRef)).subscribe(() => this.drawerOpen.set(false));
+	}
+	toggleDrawer() {
+		this.drawerOpen.update((open) => !open);
+	}
+	skipToMain(event) {
+		event.preventDefault();
+		this.main().nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RbAppShellComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RbAppShellComponent,
+		isStandalone: true,
+		selector: "rb-app-shell",
+		inputs: {
+			appName: {
+				classPropertyName: "appName",
+				publicName: "appName",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			homeLink: {
+				classPropertyName: "homeLink",
+				publicName: "homeLink",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigation: {
+				classPropertyName: "navigation",
+				publicName: "navigation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-navigation": "navigation()",
+				"attr.data-drawer": "isDrawer() ? \"\" : null"
+			},
+			classAttribute: "rb-app-shell"
+		},
+		viewQueries: [{
+			propertyName: "main",
+			first: true,
+			predicate: ["main"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <a class="rb-skip-link" href="#main-content" (click)="skipToMain($event)"
+      >Skip to main content</a
+    >
+
+    <header class="rb-app-shell__topbar">
+      @if (hasSidenav() && isDrawer()) {
+        <button
+          matIconButton
+          type="button"
+          class="rb-app-shell__menu"
+          aria-label="Navigation"
+          matTooltip="Navigation"
+          aria-controls="rb-app-shell-sidenav"
+          [attr.aria-expanded]="drawerOpen()"
+          (click)="toggleDrawer()"
+        >
+          <mat-icon fontSet="material-symbols-outlined" aria-hidden="true">menu</mat-icon>
+        </button>
+      }
+      <rb-brand-lockup [appName]="appName()" [link]="homeLink()" compact="below-sm" />
+      <div class="rb-app-shell__title"><ng-content select="[rbShellTitle]" /></div>
+      <div class="rb-app-shell__actions">
+        <ng-content select="[rbShellActions]" />
+        <rb-theme-toggle />
+      </div>
+    </header>
+
+    @if (hasSidenav()) {
+      <mat-sidenav-container class="rb-app-shell__container">
+        <mat-sidenav
+          id="rb-app-shell-sidenav"
+          class="rb-app-shell__sidenav"
+          [mode]="isDrawer() ? 'over' : 'side'"
+          [opened]="!isDrawer() || drawerOpen()"
+          (closedStart)="drawerOpen.set(false)"
+        >
+          <ng-content select="[rbShellSidenav]" />
+        </mat-sidenav>
+        <mat-sidenav-content class="rb-app-shell__scroller">
+          <ng-container [ngTemplateOutlet]="body" />
+        </mat-sidenav-content>
+      </mat-sidenav-container>
+    } @else {
+      <ng-container [ngTemplateOutlet]="body" />
+    }
+
+    <ng-template #body>
+      <div class="rb-app-shell__body">
+        @if (navigation() === 'modules') {
+          <div class="rb-app-shell__module-nav"><ng-content select="[rbShellModuleNav]" /></div>
+        }
+        <main #main class="rb-app-shell__main" id="main-content" tabindex="-1">
+          <ng-content />
+        </main>
+      </div>
+      <rb-shell-footer [appName]="appName()"
+        ><ng-content select="[rbShellFooter]"
+      /></rb-shell-footer>
+    </ng-template>
+  `,
+		isInline: true,
+		styles: ["html:has(rb-app-shell:not([data-navigation=sidenav])){scroll-padding-block-start:calc(var(--rb-size-shell-topbar) + var(--rb-space-4))}rb-app-shell{display:flex;flex-direction:column;min-block-size:100dvh}rb-app-shell[data-navigation=sidenav]{block-size:100dvh}rb-app-shell .rb-app-shell__topbar{position:sticky;inset-block-start:0;z-index:var(--rb-z-sticky);display:flex;flex:none;gap:var(--rb-space-3);align-items:center;block-size:var(--rb-size-shell-topbar);padding-inline:var(--rb-space-page);border-block-end:1px solid var(--rb-color-border);background-color:var(--rb-color-glass);box-shadow:var(--rb-elevation-1);-webkit-backdrop-filter:blur(var(--rb-space-4));backdrop-filter:blur(var(--rb-space-4))}rb-app-shell .rb-app-shell__menu{flex:none;margin-inline-start:calc(-1 * var(--rb-space-2))}rb-app-shell .rb-app-shell__title{display:flex;flex:1 1 auto;min-width:0;align-items:center;padding-inline-start:var(--rb-space-3);border-inline-start:1px solid var(--rb-color-border);overflow:hidden;color:var(--rb-color-text-muted);font:var(--rb-type-label-large);text-overflow:ellipsis;white-space:nowrap}@media(width<40rem){rb-app-shell .rb-app-shell__title{visibility:hidden;border-inline-start:0}}rb-app-shell .rb-app-shell__title:empty{border-inline-start:0}rb-app-shell .rb-app-shell__actions{display:flex;flex:none;gap:var(--rb-space-2);align-items:center}rb-app-shell .rb-app-shell__container{flex:1 1 auto;min-block-size:0;background-color:transparent}rb-app-shell .rb-app-shell__sidenav{inline-size:var(--rb-size-shell-nav);border-inline-end:1px solid var(--rb-color-border);border-radius:0;background-color:var(--rb-color-surface-nav);color:var(--rb-color-text)}rb-app-shell[data-drawer] .rb-app-shell__sidenav{box-shadow:var(--rb-elevation-3)}rb-app-shell .rb-app-shell__scroller{display:flex;flex-direction:column}rb-app-shell [rbShellSidenav]{display:grid;gap:var(--rb-space-1);align-content:start;padding:var(--rb-space-4) var(--rb-space-3)}rb-app-shell .rb-app-shell__body{display:grid;flex:1 0 auto;gap:var(--rb-space-6);align-content:start;inline-size:min(100%,var(--rb-size-content-max));margin-inline:auto;padding:var(--rb-space-page)}rb-app-shell[data-navigation=modules] .rb-app-shell__body{grid-template-columns:var(--rb-size-shell-module-nav) minmax(0,1fr);align-items:start}@media(width<60rem){rb-app-shell[data-navigation=modules] .rb-app-shell__body{grid-template-columns:minmax(0,1fr);gap:var(--rb-space-4)}}rb-app-shell .rb-app-shell__module-nav{position:sticky;inset-block-start:calc(var(--rb-size-shell-topbar) + var(--rb-space-page));min-width:0}@media(width<60rem){rb-app-shell .rb-app-shell__module-nav{position:static}}rb-app-shell [rbShellModuleNav]{display:flex;flex-direction:column;gap:var(--rb-space-1);padding:var(--rb-space-2);border:1px solid var(--rb-color-border);border-radius:var(--rb-radius-lg);background-color:var(--rb-color-surface);box-shadow:var(--rb-elevation-1)}@media(width<60rem){rb-app-shell [rbShellModuleNav]{flex-flow:row wrap}}@media(width<40rem){rb-app-shell [rbShellModuleNav]{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding:var(--rb-space-1)}}rb-app-shell .rb-app-shell__main{min-width:0}rb-app-shell .rb-app-shell__main:focus{outline:none}rb-app-shell rb-shell-footer{flex:none}rb-app-shell .rb-shell-nav-heading{margin:var(--rb-space-4) 0 var(--rb-space-1);padding-inline:var(--rb-space-3);color:var(--rb-color-text-subtle);font:var(--rb-type-label-small);letter-spacing:var(--rb-type-label-small-tracking);text-transform:uppercase}rb-app-shell .rb-shell-nav-heading:first-child{margin-block-start:0}rb-app-shell .rb-shell-nav-link{display:flex;gap:var(--rb-space-3);align-items:center;min-block-size:var(--rb-size-control-height);padding:var(--rb-space-2) var(--rb-space-3);border-radius:var(--rb-radius-sm);color:var(--rb-color-text-muted);font:var(--rb-type-label-large);text-decoration:none;transition:background-color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard),color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard)}@media(pointer:coarse){rb-app-shell .rb-shell-nav-link{min-block-size:var(--rb-size-touch-target)}}rb-app-shell .rb-shell-nav-link mat-icon{flex:none;inline-size:var(--rb-size-icon-md);block-size:var(--rb-size-icon-md);font-size:var(--rb-size-icon-md)}rb-app-shell .rb-shell-nav-link:hover{background-color:var(--rb-color-overlay-hover);color:var(--rb-color-text-strong)}rb-app-shell .rb-shell-nav-link[aria-current=page]{background-color:var(--rb-color-primary-soft);color:var(--rb-color-on-primary-soft)}@media(width<40rem){rb-app-shell [rbShellModuleNav] .rb-shell-nav-link{flex-direction:column;gap:var(--rb-space-1);justify-content:center;min-block-size:var(--rb-space-12);padding-inline:var(--rb-space-1);font:var(--rb-type-label-medium);text-align:center;overflow-wrap:anywhere}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "component",
+				type: MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: MatSidenav,
+				selector: "mat-sidenav",
+				inputs: [
+					"fixedInViewport",
+					"fixedTopGap",
+					"fixedBottomGap"
+				],
+				exportAs: ["matSidenav"]
+			},
+			{
+				kind: "component",
+				type: MatSidenavContainer,
+				selector: "mat-sidenav-container",
+				exportAs: ["matSidenavContainer"]
+			},
+			{
+				kind: "component",
+				type: MatSidenavContent,
+				selector: "mat-sidenav-content"
+			},
+			{
+				kind: "directive",
+				type: MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: RbBrandLockupComponent,
+				selector: "rb-brand-lockup",
+				inputs: [
+					"appName",
+					"link",
+					"compact"
+				]
+			},
+			{
+				kind: "component",
+				type: RbShellFooterComponent,
+				selector: "rb-shell-footer",
+				inputs: ["appName"]
+			},
+			{
+				kind: "component",
+				type: RbThemeToggleComponent,
+				selector: "rb-theme-toggle"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RbAppShellComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rb-app-shell",
+			imports: [
+				MatIcon,
+				MatIconButton,
+				MatSidenav,
+				MatSidenavContainer,
+				MatSidenavContent,
+				MatTooltip,
+				NgTemplateOutlet,
+				RbBrandLockupComponent,
+				RbShellFooterComponent,
+				RbThemeToggleComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "rb-app-shell",
+				"[attr.data-navigation]": "navigation()",
+				"[attr.data-drawer]": "isDrawer() ? \"\" : null"
+			},
+			template: `
+    <a class="rb-skip-link" href="#main-content" (click)="skipToMain($event)"
+      >Skip to main content</a
+    >
+
+    <header class="rb-app-shell__topbar">
+      @if (hasSidenav() && isDrawer()) {
+        <button
+          matIconButton
+          type="button"
+          class="rb-app-shell__menu"
+          aria-label="Navigation"
+          matTooltip="Navigation"
+          aria-controls="rb-app-shell-sidenav"
+          [attr.aria-expanded]="drawerOpen()"
+          (click)="toggleDrawer()"
+        >
+          <mat-icon fontSet="material-symbols-outlined" aria-hidden="true">menu</mat-icon>
+        </button>
+      }
+      <rb-brand-lockup [appName]="appName()" [link]="homeLink()" compact="below-sm" />
+      <div class="rb-app-shell__title"><ng-content select="[rbShellTitle]" /></div>
+      <div class="rb-app-shell__actions">
+        <ng-content select="[rbShellActions]" />
+        <rb-theme-toggle />
+      </div>
+    </header>
+
+    @if (hasSidenav()) {
+      <mat-sidenav-container class="rb-app-shell__container">
+        <mat-sidenav
+          id="rb-app-shell-sidenav"
+          class="rb-app-shell__sidenav"
+          [mode]="isDrawer() ? 'over' : 'side'"
+          [opened]="!isDrawer() || drawerOpen()"
+          (closedStart)="drawerOpen.set(false)"
+        >
+          <ng-content select="[rbShellSidenav]" />
+        </mat-sidenav>
+        <mat-sidenav-content class="rb-app-shell__scroller">
+          <ng-container [ngTemplateOutlet]="body" />
+        </mat-sidenav-content>
+      </mat-sidenav-container>
+    } @else {
+      <ng-container [ngTemplateOutlet]="body" />
+    }
+
+    <ng-template #body>
+      <div class="rb-app-shell__body">
+        @if (navigation() === 'modules') {
+          <div class="rb-app-shell__module-nav"><ng-content select="[rbShellModuleNav]" /></div>
+        }
+        <main #main class="rb-app-shell__main" id="main-content" tabindex="-1">
+          <ng-content />
+        </main>
+      </div>
+      <rb-shell-footer [appName]="appName()"
+        ><ng-content select="[rbShellFooter]"
+      /></rb-shell-footer>
+    </ng-template>
+  `,
+			styles: ["html:has(rb-app-shell:not([data-navigation=sidenav])){scroll-padding-block-start:calc(var(--rb-size-shell-topbar) + var(--rb-space-4))}rb-app-shell{display:flex;flex-direction:column;min-block-size:100dvh}rb-app-shell[data-navigation=sidenav]{block-size:100dvh}rb-app-shell .rb-app-shell__topbar{position:sticky;inset-block-start:0;z-index:var(--rb-z-sticky);display:flex;flex:none;gap:var(--rb-space-3);align-items:center;block-size:var(--rb-size-shell-topbar);padding-inline:var(--rb-space-page);border-block-end:1px solid var(--rb-color-border);background-color:var(--rb-color-glass);box-shadow:var(--rb-elevation-1);-webkit-backdrop-filter:blur(var(--rb-space-4));backdrop-filter:blur(var(--rb-space-4))}rb-app-shell .rb-app-shell__menu{flex:none;margin-inline-start:calc(-1 * var(--rb-space-2))}rb-app-shell .rb-app-shell__title{display:flex;flex:1 1 auto;min-width:0;align-items:center;padding-inline-start:var(--rb-space-3);border-inline-start:1px solid var(--rb-color-border);overflow:hidden;color:var(--rb-color-text-muted);font:var(--rb-type-label-large);text-overflow:ellipsis;white-space:nowrap}@media(width<40rem){rb-app-shell .rb-app-shell__title{visibility:hidden;border-inline-start:0}}rb-app-shell .rb-app-shell__title:empty{border-inline-start:0}rb-app-shell .rb-app-shell__actions{display:flex;flex:none;gap:var(--rb-space-2);align-items:center}rb-app-shell .rb-app-shell__container{flex:1 1 auto;min-block-size:0;background-color:transparent}rb-app-shell .rb-app-shell__sidenav{inline-size:var(--rb-size-shell-nav);border-inline-end:1px solid var(--rb-color-border);border-radius:0;background-color:var(--rb-color-surface-nav);color:var(--rb-color-text)}rb-app-shell[data-drawer] .rb-app-shell__sidenav{box-shadow:var(--rb-elevation-3)}rb-app-shell .rb-app-shell__scroller{display:flex;flex-direction:column}rb-app-shell [rbShellSidenav]{display:grid;gap:var(--rb-space-1);align-content:start;padding:var(--rb-space-4) var(--rb-space-3)}rb-app-shell .rb-app-shell__body{display:grid;flex:1 0 auto;gap:var(--rb-space-6);align-content:start;inline-size:min(100%,var(--rb-size-content-max));margin-inline:auto;padding:var(--rb-space-page)}rb-app-shell[data-navigation=modules] .rb-app-shell__body{grid-template-columns:var(--rb-size-shell-module-nav) minmax(0,1fr);align-items:start}@media(width<60rem){rb-app-shell[data-navigation=modules] .rb-app-shell__body{grid-template-columns:minmax(0,1fr);gap:var(--rb-space-4)}}rb-app-shell .rb-app-shell__module-nav{position:sticky;inset-block-start:calc(var(--rb-size-shell-topbar) + var(--rb-space-page));min-width:0}@media(width<60rem){rb-app-shell .rb-app-shell__module-nav{position:static}}rb-app-shell [rbShellModuleNav]{display:flex;flex-direction:column;gap:var(--rb-space-1);padding:var(--rb-space-2);border:1px solid var(--rb-color-border);border-radius:var(--rb-radius-lg);background-color:var(--rb-color-surface);box-shadow:var(--rb-elevation-1)}@media(width<60rem){rb-app-shell [rbShellModuleNav]{flex-flow:row wrap}}@media(width<40rem){rb-app-shell [rbShellModuleNav]{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding:var(--rb-space-1)}}rb-app-shell .rb-app-shell__main{min-width:0}rb-app-shell .rb-app-shell__main:focus{outline:none}rb-app-shell rb-shell-footer{flex:none}rb-app-shell .rb-shell-nav-heading{margin:var(--rb-space-4) 0 var(--rb-space-1);padding-inline:var(--rb-space-3);color:var(--rb-color-text-subtle);font:var(--rb-type-label-small);letter-spacing:var(--rb-type-label-small-tracking);text-transform:uppercase}rb-app-shell .rb-shell-nav-heading:first-child{margin-block-start:0}rb-app-shell .rb-shell-nav-link{display:flex;gap:var(--rb-space-3);align-items:center;min-block-size:var(--rb-size-control-height);padding:var(--rb-space-2) var(--rb-space-3);border-radius:var(--rb-radius-sm);color:var(--rb-color-text-muted);font:var(--rb-type-label-large);text-decoration:none;transition:background-color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard),color var(--rb-motion-duration-fast) var(--rb-motion-easing-standard)}@media(pointer:coarse){rb-app-shell .rb-shell-nav-link{min-block-size:var(--rb-size-touch-target)}}rb-app-shell .rb-shell-nav-link mat-icon{flex:none;inline-size:var(--rb-size-icon-md);block-size:var(--rb-size-icon-md);font-size:var(--rb-size-icon-md)}rb-app-shell .rb-shell-nav-link:hover{background-color:var(--rb-color-overlay-hover);color:var(--rb-color-text-strong)}rb-app-shell .rb-shell-nav-link[aria-current=page]{background-color:var(--rb-color-primary-soft);color:var(--rb-color-on-primary-soft)}@media(width<40rem){rb-app-shell [rbShellModuleNav] .rb-shell-nav-link{flex-direction:column;gap:var(--rb-space-1);justify-content:center;min-block-size:var(--rb-space-12);padding-inline:var(--rb-space-1);font:var(--rb-type-label-medium);text-align:center;overflow-wrap:anywhere}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appName",
+				required: true
+			}]
+		}],
+		homeLink: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "homeLink",
+				required: false
+			}]
+		}],
+		navigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigation",
+				required: false
+			}]
+		}],
+		main: [{
+			type: i0.ViewChild,
+			args: ["main", { isSignal: true }]
+		}]
+	}
+});
+export { RbAppShellComponent };
+
+//# sourceMappingURL=rblabs-dev-axiom-app-shell.mjs.map

package/fesm2022/rblabs-dev-axiom-app-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rblabs-dev-axiom-app-shell.mjs","names":[],"sources":["../../../projects/axiom/app-shell/src/app-shell.ts"],"sourcesContent":["import { BreakpointObserver } from '@angular/cdk/layout';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatSidenav, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { RbBrandLockupComponent } from '@rblabs-dev/axiom/brand-lockup';\nimport { RB_BREAKPOINTS } from '@rblabs-dev/axiom/core';\nimport { RbShellFooterComponent } from '@rblabs-dev/axiom/shell-footer';\nimport { RbThemeToggleComponent } from '@rblabs-dev/axiom/theme-toggle';\nimport { filter } from 'rxjs';\n\n/**\n * `sidenav`: a navigation rail beside the content that becomes a drawer below `lg`.\n * `modules`: a short list of sections beside the content that becomes a row, then a tab bar.\n * `none`: top-level links, if any, go in the `[rbShellActions]` slot.\n */\nexport type RbAppShellNavigation = 'none' | 'sidenav' | 'modules';\n\n/**\n * Frame for authenticated and operational areas (docs/design-system.md, section 16.1): skip link,\n * top bar with the brand lockup, title, actions and theme toggle, optional navigation, the content\n * column and the standard footer.\n */\n@Component({\n  selector: 'rb-app-shell',\n  imports: [\n    MatIcon,\n    MatIconButton,\n    MatSidenav,\n    MatSidenavContainer,\n    MatSidenavContent,\n    MatTooltip,\n    NgTemplateOutlet,\n    RbBrandLockupComponent,\n    RbShellFooterComponent,\n    RbThemeToggleComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'rb-app-shell',\n    '[attr.data-navigation]': 'navigation()',\n    '[attr.data-drawer]': 'isDrawer() ? \"\" : null',\n  },\n  template: `\n    <a class=\"rb-skip-link\" href=\"#main-content\" (click)=\"skipToMain($event)\"\n      >Skip to main content</a\n    >\n\n    <header class=\"rb-app-shell__topbar\">\n      @if (hasSidenav() && isDrawer()) {\n        <button\n          matIconButton\n          type=\"button\"\n          class=\"rb-app-shell__menu\"\n          aria-label=\"Navigation\"\n          matTooltip=\"Navigation\"\n          aria-controls=\"rb-app-shell-sidenav\"\n          [attr.aria-expanded]=\"drawerOpen()\"\n          (click)=\"toggleDrawer()\"\n        >\n          <mat-icon fontSet=\"material-symbols-outlined\" aria-hidden=\"true\">menu</mat-icon>\n        </button>\n      }\n      <rb-brand-lockup [appName]=\"appName()\" [link]=\"homeLink()\" compact=\"below-sm\" />\n      <div class=\"rb-app-shell__title\"><ng-content select=\"[rbShellTitle]\" /></div>\n      <div class=\"rb-app-shell__actions\">\n        <ng-content select=\"[rbShellActions]\" />\n        <rb-theme-toggle />\n      </div>\n    </header>\n\n    @if (hasSidenav()) {\n      <mat-sidenav-container class=\"rb-app-shell__container\">\n        <mat-sidenav\n          id=\"rb-app-shell-sidenav\"\n          class=\"rb-app-shell__sidenav\"\n          [mode]=\"isDrawer() ? 'over' : 'side'\"\n          [opened]=\"!isDrawer() || drawerOpen()\"\n          (closedStart)=\"drawerOpen.set(false)\"\n        >\n          <ng-content select=\"[rbShellSidenav]\" />\n        </mat-sidenav>\n        <mat-sidenav-content class=\"rb-app-shell__scroller\">\n          <ng-container [ngTemplateOutlet]=\"body\" />\n        </mat-sidenav-content>\n      </mat-sidenav-container>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    }\n\n    <ng-template #body>\n      <div class=\"rb-app-shell__body\">\n        @if (navigation() === 'modules') {\n          <div class=\"rb-app-shell__module-nav\"><ng-content select=\"[rbShellModuleNav]\" /></div>\n        }\n        <main #main class=\"rb-app-shell__main\" id=\"main-content\" tabindex=\"-1\">\n          <ng-content />\n        </main>\n      </div>\n      <rb-shell-footer [appName]=\"appName()\"\n        ><ng-content select=\"[rbShellFooter]\"\n      /></rb-shell-footer>\n    </ng-template>\n  `,\n  styleUrl: './app-shell.scss',\n})\nexport class RbAppShellComponent {\n  /** Shown in the lockup and the footer: `Admin`, `Auth`, `Rover`, `Photogrammetry`… */\n  readonly appName = input.required<string>();\n  /** The lockup's link target, as a `routerLink` value. */\n  readonly homeLink = input<string | readonly unknown[]>('/');\n  readonly navigation = input<RbAppShellNavigation>('none');\n\n  protected readonly hasSidenav = computed(() => this.navigation() === 'sidenav');\n\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  /** Below `lg` the sidenav is an overlay drawer (section 8.1). */\n  readonly isDrawer = signal(this.breakpointObserver.isMatched(RB_BREAKPOINTS.belowLg));\n  readonly drawerOpen = signal(false);\n\n  private readonly main = viewChild.required<ElementRef<HTMLElement>>('main');\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    this.breakpointObserver\n      .observe(RB_BREAKPOINTS.belowLg)\n      .pipe(takeUntilDestroyed(destroyRef))\n      .subscribe(({ matches }) => {\n        this.isDrawer.set(matches);\n        if (!matches) this.drawerOpen.set(false);\n      });\n\n    inject(Router)\n      .events.pipe(\n        filter((event) => event instanceof NavigationEnd),\n        takeUntilDestroyed(destroyRef),\n      )\n      .subscribe(() => this.drawerOpen.set(false));\n  }\n\n  toggleDrawer(): void {\n    this.drawerOpen.update((open) => !open);\n  }\n\n  /**\n   * Moves focus to `<main>` without changing the URL: with `<base href=\"/\">` a bare `#main-content`\n   * link would resolve to the root route instead of the current page.\n   */\n  protected skipToMain(event: Event): void {\n    event.preventDefault();\n    this.main().nativeElement.focus();\n  }\n}\n"],"mappings":"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"}

package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs

@@ -0,0 +1,154 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { RbMonogramComponent } from "@rblabs-dev/axiom/monogram";
+var RbBrandLockupComponent = class RbBrandLockupComponent {
+	appName = input.required(...ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []);
+	link = input("/", ...ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []);
+	compact = input(false, {
+		...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
+		transform: (value) => value === "" ? true : value
+	});
+	accessibleName = computed(() => `RB Labs ${this.appName()} home`, ...ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []);
+	compactAttribute = computed(() => {
+		const compact = this.compact();
+		return compact === true ? "always" : compact || null;
+	}, ...ngDevMode ? [{ debugName: "compactAttribute" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RbBrandLockupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: RbBrandLockupComponent,
+		isStandalone: true,
+		selector: "rb-brand-lockup",
+		inputs: {
+			appName: {
+				classPropertyName: "appName",
+				publicName: "appName",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			link: {
+				classPropertyName: "link",
+				publicName: "link",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-compact": "compactAttribute()" },
+			classAttribute: "rb-brand-lockup"
+		},
+		ngImport: i0,
+		template: `
+    <a class="rb-brand-lockup__link" [routerLink]="link()" [attr.aria-label]="accessibleName()">
+      <rb-monogram class="rb-brand-lockup__mark" />
+      <span class="rb-brand-lockup__wordmark">
+        <span class="rb-brand-lockup__brand">RB Labs</span>
+        <span class="rb-brand-lockup__app"><span aria-hidden="true">·</span> {{ appName() }}</span>
+      </span>
+    </a>
+  `,
+		isInline: true,
+		styles: ["rb-brand-lockup{display:inline-flex;min-width:0}rb-brand-lockup .rb-brand-lockup__link{display:inline-flex;min-width:0;gap:var(--rb-space-3);align-items:center;border-radius:var(--rb-radius-sm);color:inherit;text-decoration:none}rb-brand-lockup .rb-brand-lockup__wordmark{display:inline-flex;min-width:0;gap:var(--rb-space-1);align-items:baseline;font:var(--rb-type-title-small);white-space:nowrap}rb-brand-lockup .rb-brand-lockup__brand{color:var(--rb-color-text-strong)}rb-brand-lockup .rb-brand-lockup__app{overflow:hidden;color:var(--rb-color-text-muted);font-weight:var(--rb-font-weight-medium);text-overflow:ellipsis}rb-brand-lockup[data-compact=always] .rb-brand-lockup__mark{inline-size:var(--rb-size-monogram-sm)}rb-brand-lockup[data-compact=always] .rb-brand-lockup__wordmark{display:none}@media(width<40rem){rb-brand-lockup[data-compact=below-sm] .rb-brand-lockup__mark{inline-size:var(--rb-size-monogram-sm)}rb-brand-lockup[data-compact=below-sm] .rb-brand-lockup__wordmark{display:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: RbMonogramComponent,
+			selector: "rb-monogram"
+		}, {
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RbBrandLockupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rb-brand-lockup",
+			imports: [RbMonogramComponent, RouterLink],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "rb-brand-lockup",
+				"[attr.data-compact]": "compactAttribute()"
+			},
+			template: `
+    <a class="rb-brand-lockup__link" [routerLink]="link()" [attr.aria-label]="accessibleName()">
+      <rb-monogram class="rb-brand-lockup__mark" />
+      <span class="rb-brand-lockup__wordmark">
+        <span class="rb-brand-lockup__brand">RB Labs</span>
+        <span class="rb-brand-lockup__app"><span aria-hidden="true">·</span> {{ appName() }}</span>
+      </span>
+    </a>
+  `,
+			styles: ["rb-brand-lockup{display:inline-flex;min-width:0}rb-brand-lockup .rb-brand-lockup__link{display:inline-flex;min-width:0;gap:var(--rb-space-3);align-items:center;border-radius:var(--rb-radius-sm);color:inherit;text-decoration:none}rb-brand-lockup .rb-brand-lockup__wordmark{display:inline-flex;min-width:0;gap:var(--rb-space-1);align-items:baseline;font:var(--rb-type-title-small);white-space:nowrap}rb-brand-lockup .rb-brand-lockup__brand{color:var(--rb-color-text-strong)}rb-brand-lockup .rb-brand-lockup__app{overflow:hidden;color:var(--rb-color-text-muted);font-weight:var(--rb-font-weight-medium);text-overflow:ellipsis}rb-brand-lockup[data-compact=always] .rb-brand-lockup__mark{inline-size:var(--rb-size-monogram-sm)}rb-brand-lockup[data-compact=always] .rb-brand-lockup__wordmark{display:none}@media(width<40rem){rb-brand-lockup[data-compact=below-sm] .rb-brand-lockup__mark{inline-size:var(--rb-size-monogram-sm)}rb-brand-lockup[data-compact=below-sm] .rb-brand-lockup__wordmark{display:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		appName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appName",
+				required: true
+			}]
+		}],
+		link: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "link",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+export { RbBrandLockupComponent };
+
+//# sourceMappingURL=rblabs-dev-axiom-brand-lockup.mjs.map

package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rblabs-dev-axiom-brand-lockup.mjs","names":[],"sources":["../../../projects/axiom/brand-lockup/src/brand-lockup.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { RbMonogramComponent } from '@rblabs-dev/axiom/monogram';\n\n/** `true` shows only the monogram; `'below-sm'` does so only below the `sm` breakpoint. */\nexport type RbBrandLockupCompact = boolean | 'below-sm';\n\n/**\n * The RB monogram followed by \"RB Labs · <App name>\", as a link to the app's home\n * (docs/design-system.md, section 12.2). The accessible name stays \"RB Labs <App name> home\" in\n * every variant.\n */\n@Component({\n  selector: 'rb-brand-lockup',\n  imports: [RbMonogramComponent, RouterLink],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'rb-brand-lockup',\n    '[attr.data-compact]': 'compactAttribute()',\n  },\n  template: `\n    <a class=\"rb-brand-lockup__link\" [routerLink]=\"link()\" [attr.aria-label]=\"accessibleName()\">\n      <rb-monogram class=\"rb-brand-lockup__mark\" />\n      <span class=\"rb-brand-lockup__wordmark\">\n        <span class=\"rb-brand-lockup__brand\">RB Labs</span>\n        <span class=\"rb-brand-lockup__app\"><span aria-hidden=\"true\">·</span> {{ appName() }}</span>\n      </span>\n    </a>\n  `,\n  styleUrl: './brand-lockup.scss',\n})\nexport class RbBrandLockupComponent {\n  /** `Admin`, `Auth`, `Rover`, `Photogrammetry` or a new app's name. */\n  readonly appName = input.required<string>();\n  /** The app's home, as a `routerLink` value. */\n  readonly link = input<string | readonly unknown[]>('/');\n  readonly compact = input<RbBrandLockupCompact, RbBrandLockupCompact | ''>(false, {\n    transform: (value) => (value === '' ? true : value),\n  });\n\n  protected readonly accessibleName = computed(() => `RB Labs ${this.appName()} home`);\n  protected readonly compactAttribute = computed(() => {\n    const compact = this.compact();\n    return compact === true ? 'always' : compact || null;\n  });\n}\n"],"mappings":";;;;AAsCA,IAAa,yBAAb,MAAa,uBAAsB;CAExB,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAElC,OAAO,MAAmC,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,UAAU,MAAuD,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAC7E,YAAY,UAAW,UAAU,KAAK,OAAO;CAAM,CAAA;CAGlC,iBAAiB,eAAe,WAAW,KAAK,QAAO,EAAE,QAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CACjE,mBAAmB,eAAc;EAClD,MAAM,UAAU,KAAK,QAAO;EAC5B,OAAO,YAAY,OAAO,WAAW,WAAW;CAClD,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAbS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,qBAAA,qBAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAXvB;;;;;;;;;EAQT,UAAA;EAAA,QAAA,CAAA,4+BAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAfS;GAAmB,UAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAU,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAkB9B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EApBlC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,SAClB,CAAC,qBAAqB,UAAU;GAAC,iBACzB,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,MAC/B;IACJ,OAAO;IACP,uBAAuB;GACxB;GAAA,UACS;;;;;;;;;GAQT,QAAA,CAAA,4+BAAA;EAAA,CAAA"}