@rblabs-dev/axiom 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +39 -13
  2. package/app-shell/package.json +4 -0
  3. package/brand-lockup/package.json +4 -0
  4. package/central-sign-in/package.json +4 -0
  5. package/cli/build-brand-assets.mjs +12 -18
  6. package/cli/project.mjs +6 -0
  7. package/cli/verify-production-assets.mjs +71 -6
  8. package/confirm-dialog/package.json +4 -0
  9. package/core/package.json +4 -0
  10. package/empty-state/package.json +4 -0
  11. package/fesm2022/rblabs-dev-axiom-app-shell.mjs +375 -0
  12. package/fesm2022/rblabs-dev-axiom-app-shell.mjs.map +1 -0
  13. package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs +154 -0
  14. package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs.map +1 -0
  15. package/fesm2022/rblabs-dev-axiom-central-sign-in.mjs +375 -0
  16. package/fesm2022/rblabs-dev-axiom-central-sign-in.mjs.map +1 -0
  17. package/fesm2022/rblabs-dev-axiom-confirm-dialog.mjs +329 -0
  18. package/fesm2022/rblabs-dev-axiom-confirm-dialog.mjs.map +1 -0
  19. package/fesm2022/rblabs-dev-axiom-core.mjs +181 -0
  20. package/fesm2022/rblabs-dev-axiom-core.mjs.map +1 -0
  21. package/fesm2022/rblabs-dev-axiom-empty-state.mjs +252 -0
  22. package/fesm2022/rblabs-dev-axiom-empty-state.mjs.map +1 -0
  23. package/fesm2022/rblabs-dev-axiom-message.mjs +194 -0
  24. package/fesm2022/rblabs-dev-axiom-message.mjs.map +1 -0
  25. package/fesm2022/rblabs-dev-axiom-monogram.mjs +102 -0
  26. package/fesm2022/rblabs-dev-axiom-monogram.mjs.map +1 -0
  27. package/fesm2022/rblabs-dev-axiom-page-header.mjs +199 -0
  28. package/fesm2022/rblabs-dev-axiom-page-header.mjs.map +1 -0
  29. package/fesm2022/rblabs-dev-axiom-panel.mjs +207 -0
  30. package/fesm2022/rblabs-dev-axiom-panel.mjs.map +1 -0
  31. package/fesm2022/rblabs-dev-axiom-public-shell.mjs +165 -0
  32. package/fesm2022/rblabs-dev-axiom-public-shell.mjs.map +1 -0
  33. package/fesm2022/rblabs-dev-axiom-shell-footer.mjs +73 -0
  34. package/fesm2022/rblabs-dev-axiom-shell-footer.mjs.map +1 -0
  35. package/fesm2022/rblabs-dev-axiom-status-chip.mjs +161 -0
  36. package/fesm2022/rblabs-dev-axiom-status-chip.mjs.map +1 -0
  37. package/fesm2022/rblabs-dev-axiom-technical-value.mjs +173 -0
  38. package/fesm2022/rblabs-dev-axiom-technical-value.mjs.map +1 -0
  39. package/fesm2022/rblabs-dev-axiom-theme-toggle.mjs +117 -0
  40. package/fesm2022/rblabs-dev-axiom-theme-toggle.mjs.map +1 -0
  41. package/fesm2022/rblabs-dev-axiom.mjs +15 -2955
  42. package/fonts/LICENSE +93 -0
  43. package/fonts/inter-latin-ext-wght-normal.woff2 +0 -0
  44. package/fonts/inter-latin-wght-normal.woff2 +0 -0
  45. package/message/package.json +4 -0
  46. package/monogram/package.json +4 -0
  47. package/package.json +77 -2
  48. package/page-header/package.json +4 -0
  49. package/panel/package.json +4 -0
  50. package/public-shell/package.json +4 -0
  51. package/shell-footer/package.json +4 -0
  52. package/status-chip/package.json +4 -0
  53. package/styles/_fonts.scss +7 -7
  54. package/styles/_index.scss +1 -1
  55. package/technical-value/package.json +4 -0
  56. package/theme-toggle/package.json +4 -0
  57. package/types/rblabs-dev-axiom-app-shell.d.ts +50 -0
  58. package/types/rblabs-dev-axiom-brand-lockup.d.ts +35 -0
  59. package/types/rblabs-dev-axiom-central-sign-in.d.ts +82 -0
  60. package/types/rblabs-dev-axiom-confirm-dialog.d.ts +76 -0
  61. package/types/rblabs-dev-axiom-core.d.ts +116 -0
  62. package/types/rblabs-dev-axiom-empty-state.d.ts +55 -0
  63. package/types/rblabs-dev-axiom-message.d.ts +48 -0
  64. package/types/rblabs-dev-axiom-monogram.d.ts +12 -0
  65. package/types/rblabs-dev-axiom-page-header.d.ts +44 -0
  66. package/types/rblabs-dev-axiom-panel.d.ts +44 -0
  67. package/types/rblabs-dev-axiom-public-shell.d.ts +28 -0
  68. package/types/rblabs-dev-axiom-shell-footer.d.ts +17 -0
  69. package/types/rblabs-dev-axiom-status-chip.d.ts +40 -0
  70. package/types/rblabs-dev-axiom-technical-value.d.ts +35 -0
  71. package/types/rblabs-dev-axiom-theme-toggle.d.ts +12 -0
  72. package/types/rblabs-dev-axiom.d.ts +15 -675
  73. package/fesm2022/rblabs-dev-axiom.mjs.map +0 -1
@@ -0,0 +1,375 @@
1
+ import { BreakpointObserver } from "@angular/cdk/layout";
2
+ import { NgTemplateOutlet } from "@angular/common";
3
+ import * as i0 from "@angular/core";
4
+ import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, computed, inject, input, signal, viewChild } from "@angular/core";
5
+ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
6
+ import { MatIconButton } from "@angular/material/button";
7
+ import { MatIcon } from "@angular/material/icon";
8
+ import { MatSidenav, MatSidenavContainer, MatSidenavContent } from "@angular/material/sidenav";
9
+ import { MatTooltip } from "@angular/material/tooltip";
10
+ import { NavigationEnd, Router } from "@angular/router";
11
+ import { RbBrandLockupComponent } from "@rblabs-dev/axiom/brand-lockup";
12
+ import { RB_BREAKPOINTS } from "@rblabs-dev/axiom/core";
13
+ import { RbShellFooterComponent } from "@rblabs-dev/axiom/shell-footer";
14
+ import { RbThemeToggleComponent } from "@rblabs-dev/axiom/theme-toggle";
15
+ import { filter } from "rxjs";
16
+ var RbAppShellComponent = class RbAppShellComponent {
17
+ appName = input.required(...ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []);
18
+ homeLink = input("/", ...ngDevMode ? [{ debugName: "homeLink" }] : /* istanbul ignore next */ []);
19
+ navigation = input("none", ...ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []);
20
+ hasSidenav = computed(() => this.navigation() === "sidenav", ...ngDevMode ? [{ debugName: "hasSidenav" }] : /* istanbul ignore next */ []);
21
+ breakpointObserver = inject(BreakpointObserver);
22
+ isDrawer = signal(this.breakpointObserver.isMatched(RB_BREAKPOINTS.belowLg), ...ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []);
23
+ drawerOpen = signal(false, ...ngDevMode ? [{ debugName: "drawerOpen" }] : /* istanbul ignore next */ []);
24
+ main = viewChild.required("main", ...ngDevMode ? [{ debugName: "main" }] : /* istanbul ignore next */ []);
25
+ constructor() {
26
+ const destroyRef = inject(DestroyRef);
27
+ this.breakpointObserver.observe(RB_BREAKPOINTS.belowLg).pipe(takeUntilDestroyed(destroyRef)).subscribe(({ matches }) => {
28
+ this.isDrawer.set(matches);
29
+ if (!matches) this.drawerOpen.set(false);
30
+ });
31
+ inject(Router).events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(destroyRef)).subscribe(() => this.drawerOpen.set(false));
32
+ }
33
+ toggleDrawer() {
34
+ this.drawerOpen.update((open) => !open);
35
+ }
36
+ skipToMain(event) {
37
+ event.preventDefault();
38
+ this.main().nativeElement.focus();
39
+ }
40
+ static ɵfac = i0.ɵɵngDeclareFactory({
41
+ minVersion: "12.0.0",
42
+ version: "22.2.3",
43
+ ngImport: i0,
44
+ type: RbAppShellComponent,
45
+ deps: [],
46
+ target: i0.ɵɵFactoryTarget.Component
47
+ });
48
+ static ɵcmp = i0.ɵɵngDeclareComponent({
49
+ minVersion: "17.0.0",
50
+ version: "22.2.3",
51
+ type: RbAppShellComponent,
52
+ isStandalone: true,
53
+ selector: "rb-app-shell",
54
+ inputs: {
55
+ appName: {
56
+ classPropertyName: "appName",
57
+ publicName: "appName",
58
+ isSignal: true,
59
+ isRequired: true,
60
+ transformFunction: null
61
+ },
62
+ homeLink: {
63
+ classPropertyName: "homeLink",
64
+ publicName: "homeLink",
65
+ isSignal: true,
66
+ isRequired: false,
67
+ transformFunction: null
68
+ },
69
+ navigation: {
70
+ classPropertyName: "navigation",
71
+ publicName: "navigation",
72
+ isSignal: true,
73
+ isRequired: false,
74
+ transformFunction: null
75
+ }
76
+ },
77
+ host: {
78
+ properties: {
79
+ "attr.data-navigation": "navigation()",
80
+ "attr.data-drawer": "isDrawer() ? \"\" : null"
81
+ },
82
+ classAttribute: "rb-app-shell"
83
+ },
84
+ viewQueries: [{
85
+ propertyName: "main",
86
+ first: true,
87
+ predicate: ["main"],
88
+ descendants: true,
89
+ isSignal: true
90
+ }],
91
+ ngImport: i0,
92
+ template: `
93
+ <a class="rb-skip-link" href="#main-content" (click)="skipToMain($event)"
94
+ >Skip to main content</a
95
+ >
96
+
97
+ <header class="rb-app-shell__topbar">
98
+ @if (hasSidenav() && isDrawer()) {
99
+ <button
100
+ matIconButton
101
+ type="button"
102
+ class="rb-app-shell__menu"
103
+ aria-label="Navigation"
104
+ matTooltip="Navigation"
105
+ aria-controls="rb-app-shell-sidenav"
106
+ [attr.aria-expanded]="drawerOpen()"
107
+ (click)="toggleDrawer()"
108
+ >
109
+ <mat-icon fontSet="material-symbols-outlined" aria-hidden="true">menu</mat-icon>
110
+ </button>
111
+ }
112
+ <rb-brand-lockup [appName]="appName()" [link]="homeLink()" compact="below-sm" />
113
+ <div class="rb-app-shell__title"><ng-content select="[rbShellTitle]" /></div>
114
+ <div class="rb-app-shell__actions">
115
+ <ng-content select="[rbShellActions]" />
116
+ <rb-theme-toggle />
117
+ </div>
118
+ </header>
119
+
120
+ @if (hasSidenav()) {
121
+ <mat-sidenav-container class="rb-app-shell__container">
122
+ <mat-sidenav
123
+ id="rb-app-shell-sidenav"
124
+ class="rb-app-shell__sidenav"
125
+ [mode]="isDrawer() ? 'over' : 'side'"
126
+ [opened]="!isDrawer() || drawerOpen()"
127
+ (closedStart)="drawerOpen.set(false)"
128
+ >
129
+ <ng-content select="[rbShellSidenav]" />
130
+ </mat-sidenav>
131
+ <mat-sidenav-content class="rb-app-shell__scroller">
132
+ <ng-container [ngTemplateOutlet]="body" />
133
+ </mat-sidenav-content>
134
+ </mat-sidenav-container>
135
+ } @else {
136
+ <ng-container [ngTemplateOutlet]="body" />
137
+ }
138
+
139
+ <ng-template #body>
140
+ <div class="rb-app-shell__body">
141
+ @if (navigation() === 'modules') {
142
+ <div class="rb-app-shell__module-nav"><ng-content select="[rbShellModuleNav]" /></div>
143
+ }
144
+ <main #main class="rb-app-shell__main" id="main-content" tabindex="-1">
145
+ <ng-content />
146
+ </main>
147
+ </div>
148
+ <rb-shell-footer [appName]="appName()"
149
+ ><ng-content select="[rbShellFooter]"
150
+ /></rb-shell-footer>
151
+ </ng-template>
152
+ `,
153
+ isInline: true,
154
+ 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"],
155
+ dependencies: [
156
+ {
157
+ kind: "component",
158
+ type: MatIcon,
159
+ selector: "mat-icon",
160
+ inputs: [
161
+ "color",
162
+ "inline",
163
+ "svgIcon",
164
+ "fontSet",
165
+ "fontIcon"
166
+ ],
167
+ exportAs: ["matIcon"]
168
+ },
169
+ {
170
+ kind: "component",
171
+ type: MatIconButton,
172
+ selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
173
+ exportAs: ["matButton", "matAnchor"]
174
+ },
175
+ {
176
+ kind: "component",
177
+ type: MatSidenav,
178
+ selector: "mat-sidenav",
179
+ inputs: [
180
+ "fixedInViewport",
181
+ "fixedTopGap",
182
+ "fixedBottomGap"
183
+ ],
184
+ exportAs: ["matSidenav"]
185
+ },
186
+ {
187
+ kind: "component",
188
+ type: MatSidenavContainer,
189
+ selector: "mat-sidenav-container",
190
+ exportAs: ["matSidenavContainer"]
191
+ },
192
+ {
193
+ kind: "component",
194
+ type: MatSidenavContent,
195
+ selector: "mat-sidenav-content"
196
+ },
197
+ {
198
+ kind: "directive",
199
+ type: MatTooltip,
200
+ selector: "[matTooltip]",
201
+ inputs: [
202
+ "matTooltipPosition",
203
+ "matTooltipPositionAtOrigin",
204
+ "matTooltipDisabled",
205
+ "matTooltipShowDelay",
206
+ "matTooltipHideDelay",
207
+ "matTooltipTouchGestures",
208
+ "matTooltip",
209
+ "matTooltipClass"
210
+ ],
211
+ exportAs: ["matTooltip"]
212
+ },
213
+ {
214
+ kind: "directive",
215
+ type: NgTemplateOutlet,
216
+ selector: "[ngTemplateOutlet]",
217
+ inputs: [
218
+ "ngTemplateOutletContext",
219
+ "ngTemplateOutlet",
220
+ "ngTemplateOutletInjector"
221
+ ]
222
+ },
223
+ {
224
+ kind: "component",
225
+ type: RbBrandLockupComponent,
226
+ selector: "rb-brand-lockup",
227
+ inputs: [
228
+ "appName",
229
+ "link",
230
+ "compact"
231
+ ]
232
+ },
233
+ {
234
+ kind: "component",
235
+ type: RbShellFooterComponent,
236
+ selector: "rb-shell-footer",
237
+ inputs: ["appName"]
238
+ },
239
+ {
240
+ kind: "component",
241
+ type: RbThemeToggleComponent,
242
+ selector: "rb-theme-toggle"
243
+ }
244
+ ],
245
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
246
+ encapsulation: i0.ViewEncapsulation.None
247
+ });
248
+ };
249
+ i0.ɵɵngDeclareClassMetadata({
250
+ minVersion: "12.0.0",
251
+ version: "22.2.3",
252
+ ngImport: i0,
253
+ type: RbAppShellComponent,
254
+ decorators: [{
255
+ type: Component,
256
+ args: [{
257
+ selector: "rb-app-shell",
258
+ imports: [
259
+ MatIcon,
260
+ MatIconButton,
261
+ MatSidenav,
262
+ MatSidenavContainer,
263
+ MatSidenavContent,
264
+ MatTooltip,
265
+ NgTemplateOutlet,
266
+ RbBrandLockupComponent,
267
+ RbShellFooterComponent,
268
+ RbThemeToggleComponent
269
+ ],
270
+ changeDetection: ChangeDetectionStrategy.OnPush,
271
+ encapsulation: ViewEncapsulation.None,
272
+ host: {
273
+ class: "rb-app-shell",
274
+ "[attr.data-navigation]": "navigation()",
275
+ "[attr.data-drawer]": "isDrawer() ? \"\" : null"
276
+ },
277
+ template: `
278
+ <a class="rb-skip-link" href="#main-content" (click)="skipToMain($event)"
279
+ >Skip to main content</a
280
+ >
281
+
282
+ <header class="rb-app-shell__topbar">
283
+ @if (hasSidenav() && isDrawer()) {
284
+ <button
285
+ matIconButton
286
+ type="button"
287
+ class="rb-app-shell__menu"
288
+ aria-label="Navigation"
289
+ matTooltip="Navigation"
290
+ aria-controls="rb-app-shell-sidenav"
291
+ [attr.aria-expanded]="drawerOpen()"
292
+ (click)="toggleDrawer()"
293
+ >
294
+ <mat-icon fontSet="material-symbols-outlined" aria-hidden="true">menu</mat-icon>
295
+ </button>
296
+ }
297
+ <rb-brand-lockup [appName]="appName()" [link]="homeLink()" compact="below-sm" />
298
+ <div class="rb-app-shell__title"><ng-content select="[rbShellTitle]" /></div>
299
+ <div class="rb-app-shell__actions">
300
+ <ng-content select="[rbShellActions]" />
301
+ <rb-theme-toggle />
302
+ </div>
303
+ </header>
304
+
305
+ @if (hasSidenav()) {
306
+ <mat-sidenav-container class="rb-app-shell__container">
307
+ <mat-sidenav
308
+ id="rb-app-shell-sidenav"
309
+ class="rb-app-shell__sidenav"
310
+ [mode]="isDrawer() ? 'over' : 'side'"
311
+ [opened]="!isDrawer() || drawerOpen()"
312
+ (closedStart)="drawerOpen.set(false)"
313
+ >
314
+ <ng-content select="[rbShellSidenav]" />
315
+ </mat-sidenav>
316
+ <mat-sidenav-content class="rb-app-shell__scroller">
317
+ <ng-container [ngTemplateOutlet]="body" />
318
+ </mat-sidenav-content>
319
+ </mat-sidenav-container>
320
+ } @else {
321
+ <ng-container [ngTemplateOutlet]="body" />
322
+ }
323
+
324
+ <ng-template #body>
325
+ <div class="rb-app-shell__body">
326
+ @if (navigation() === 'modules') {
327
+ <div class="rb-app-shell__module-nav"><ng-content select="[rbShellModuleNav]" /></div>
328
+ }
329
+ <main #main class="rb-app-shell__main" id="main-content" tabindex="-1">
330
+ <ng-content />
331
+ </main>
332
+ </div>
333
+ <rb-shell-footer [appName]="appName()"
334
+ ><ng-content select="[rbShellFooter]"
335
+ /></rb-shell-footer>
336
+ </ng-template>
337
+ `,
338
+ 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"]
339
+ }]
340
+ }],
341
+ ctorParameters: () => [],
342
+ propDecorators: {
343
+ appName: [{
344
+ type: i0.Input,
345
+ args: [{
346
+ isSignal: true,
347
+ alias: "appName",
348
+ required: true
349
+ }]
350
+ }],
351
+ homeLink: [{
352
+ type: i0.Input,
353
+ args: [{
354
+ isSignal: true,
355
+ alias: "homeLink",
356
+ required: false
357
+ }]
358
+ }],
359
+ navigation: [{
360
+ type: i0.Input,
361
+ args: [{
362
+ isSignal: true,
363
+ alias: "navigation",
364
+ required: false
365
+ }]
366
+ }],
367
+ main: [{
368
+ type: i0.ViewChild,
369
+ args: ["main", { isSignal: true }]
370
+ }]
371
+ }
372
+ });
373
+ export { RbAppShellComponent };
374
+
375
+ //# sourceMappingURL=rblabs-dev-axiom-app-shell.mjs.map
@@ -0,0 +1 @@
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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"}
@@ -0,0 +1,154 @@
1
+ import * as i0 from "@angular/core";
2
+ import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
3
+ import { RouterLink } from "@angular/router";
4
+ import { RbMonogramComponent } from "@rblabs-dev/axiom/monogram";
5
+ var RbBrandLockupComponent = class RbBrandLockupComponent {
6
+ appName = input.required(...ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []);
7
+ link = input("/", ...ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []);
8
+ compact = input(false, {
9
+ ...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
10
+ transform: (value) => value === "" ? true : value
11
+ });
12
+ accessibleName = computed(() => `RB Labs ${this.appName()} home`, ...ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []);
13
+ compactAttribute = computed(() => {
14
+ const compact = this.compact();
15
+ return compact === true ? "always" : compact || null;
16
+ }, ...ngDevMode ? [{ debugName: "compactAttribute" }] : /* istanbul ignore next */ []);
17
+ static ɵfac = i0.ɵɵngDeclareFactory({
18
+ minVersion: "12.0.0",
19
+ version: "22.2.3",
20
+ ngImport: i0,
21
+ type: RbBrandLockupComponent,
22
+ deps: [],
23
+ target: i0.ɵɵFactoryTarget.Component
24
+ });
25
+ static ɵcmp = i0.ɵɵngDeclareComponent({
26
+ minVersion: "17.1.0",
27
+ version: "22.2.3",
28
+ type: RbBrandLockupComponent,
29
+ isStandalone: true,
30
+ selector: "rb-brand-lockup",
31
+ inputs: {
32
+ appName: {
33
+ classPropertyName: "appName",
34
+ publicName: "appName",
35
+ isSignal: true,
36
+ isRequired: true,
37
+ transformFunction: null
38
+ },
39
+ link: {
40
+ classPropertyName: "link",
41
+ publicName: "link",
42
+ isSignal: true,
43
+ isRequired: false,
44
+ transformFunction: null
45
+ },
46
+ compact: {
47
+ classPropertyName: "compact",
48
+ publicName: "compact",
49
+ isSignal: true,
50
+ isRequired: false,
51
+ transformFunction: null
52
+ }
53
+ },
54
+ host: {
55
+ properties: { "attr.data-compact": "compactAttribute()" },
56
+ classAttribute: "rb-brand-lockup"
57
+ },
58
+ ngImport: i0,
59
+ template: `
60
+ <a class="rb-brand-lockup__link" [routerLink]="link()" [attr.aria-label]="accessibleName()">
61
+ <rb-monogram class="rb-brand-lockup__mark" />
62
+ <span class="rb-brand-lockup__wordmark">
63
+ <span class="rb-brand-lockup__brand">RB Labs</span>
64
+ <span class="rb-brand-lockup__app"><span aria-hidden="true">·</span> {{ appName() }}</span>
65
+ </span>
66
+ </a>
67
+ `,
68
+ isInline: true,
69
+ 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"],
70
+ dependencies: [{
71
+ kind: "component",
72
+ type: RbMonogramComponent,
73
+ selector: "rb-monogram"
74
+ }, {
75
+ kind: "directive",
76
+ type: RouterLink,
77
+ selector: "[routerLink]",
78
+ inputs: [
79
+ "target",
80
+ "queryParams",
81
+ "fragment",
82
+ "queryParamsHandling",
83
+ "state",
84
+ "info",
85
+ "relativeTo",
86
+ "preserveFragment",
87
+ "skipLocationChange",
88
+ "replaceUrl",
89
+ "browserUrl",
90
+ "routerLink"
91
+ ]
92
+ }],
93
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
94
+ encapsulation: i0.ViewEncapsulation.None
95
+ });
96
+ };
97
+ i0.ɵɵngDeclareClassMetadata({
98
+ minVersion: "12.0.0",
99
+ version: "22.2.3",
100
+ ngImport: i0,
101
+ type: RbBrandLockupComponent,
102
+ decorators: [{
103
+ type: Component,
104
+ args: [{
105
+ selector: "rb-brand-lockup",
106
+ imports: [RbMonogramComponent, RouterLink],
107
+ changeDetection: ChangeDetectionStrategy.OnPush,
108
+ encapsulation: ViewEncapsulation.None,
109
+ host: {
110
+ class: "rb-brand-lockup",
111
+ "[attr.data-compact]": "compactAttribute()"
112
+ },
113
+ template: `
114
+ <a class="rb-brand-lockup__link" [routerLink]="link()" [attr.aria-label]="accessibleName()">
115
+ <rb-monogram class="rb-brand-lockup__mark" />
116
+ <span class="rb-brand-lockup__wordmark">
117
+ <span class="rb-brand-lockup__brand">RB Labs</span>
118
+ <span class="rb-brand-lockup__app"><span aria-hidden="true">·</span> {{ appName() }}</span>
119
+ </span>
120
+ </a>
121
+ `,
122
+ 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"]
123
+ }]
124
+ }],
125
+ propDecorators: {
126
+ appName: [{
127
+ type: i0.Input,
128
+ args: [{
129
+ isSignal: true,
130
+ alias: "appName",
131
+ required: true
132
+ }]
133
+ }],
134
+ link: [{
135
+ type: i0.Input,
136
+ args: [{
137
+ isSignal: true,
138
+ alias: "link",
139
+ required: false
140
+ }]
141
+ }],
142
+ compact: [{
143
+ type: i0.Input,
144
+ args: [{
145
+ isSignal: true,
146
+ alias: "compact",
147
+ required: false
148
+ }]
149
+ }]
150
+ }
151
+ });
152
+ export { RbBrandLockupComponent };
153
+
154
+ //# sourceMappingURL=rblabs-dev-axiom-brand-lockup.mjs.map
@@ -0,0 +1 @@
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"}