@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.
- package/README.md +39 -13
- package/app-shell/package.json +4 -0
- package/brand-lockup/package.json +4 -0
- package/central-sign-in/package.json +4 -0
- package/cli/build-brand-assets.mjs +12 -18
- package/cli/project.mjs +6 -0
- package/cli/verify-production-assets.mjs +71 -6
- package/confirm-dialog/package.json +4 -0
- package/core/package.json +4 -0
- package/empty-state/package.json +4 -0
- package/fesm2022/rblabs-dev-axiom-app-shell.mjs +375 -0
- package/fesm2022/rblabs-dev-axiom-app-shell.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs +154 -0
- package/fesm2022/rblabs-dev-axiom-brand-lockup.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-central-sign-in.mjs +375 -0
- package/fesm2022/rblabs-dev-axiom-central-sign-in.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-confirm-dialog.mjs +329 -0
- package/fesm2022/rblabs-dev-axiom-confirm-dialog.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-core.mjs +181 -0
- package/fesm2022/rblabs-dev-axiom-core.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-empty-state.mjs +252 -0
- package/fesm2022/rblabs-dev-axiom-empty-state.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-message.mjs +194 -0
- package/fesm2022/rblabs-dev-axiom-message.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-monogram.mjs +102 -0
- package/fesm2022/rblabs-dev-axiom-monogram.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-page-header.mjs +199 -0
- package/fesm2022/rblabs-dev-axiom-page-header.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-panel.mjs +207 -0
- package/fesm2022/rblabs-dev-axiom-panel.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-public-shell.mjs +165 -0
- package/fesm2022/rblabs-dev-axiom-public-shell.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-shell-footer.mjs +73 -0
- package/fesm2022/rblabs-dev-axiom-shell-footer.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-status-chip.mjs +161 -0
- package/fesm2022/rblabs-dev-axiom-status-chip.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-technical-value.mjs +173 -0
- package/fesm2022/rblabs-dev-axiom-technical-value.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom-theme-toggle.mjs +117 -0
- package/fesm2022/rblabs-dev-axiom-theme-toggle.mjs.map +1 -0
- package/fesm2022/rblabs-dev-axiom.mjs +15 -2955
- package/fonts/LICENSE +93 -0
- package/fonts/inter-latin-ext-wght-normal.woff2 +0 -0
- package/fonts/inter-latin-wght-normal.woff2 +0 -0
- package/message/package.json +4 -0
- package/monogram/package.json +4 -0
- package/package.json +77 -2
- package/page-header/package.json +4 -0
- package/panel/package.json +4 -0
- package/public-shell/package.json +4 -0
- package/shell-footer/package.json +4 -0
- package/status-chip/package.json +4 -0
- package/styles/_fonts.scss +7 -7
- package/styles/_index.scss +1 -1
- package/technical-value/package.json +4 -0
- package/theme-toggle/package.json +4 -0
- package/types/rblabs-dev-axiom-app-shell.d.ts +50 -0
- package/types/rblabs-dev-axiom-brand-lockup.d.ts +35 -0
- package/types/rblabs-dev-axiom-central-sign-in.d.ts +82 -0
- package/types/rblabs-dev-axiom-confirm-dialog.d.ts +76 -0
- package/types/rblabs-dev-axiom-core.d.ts +116 -0
- package/types/rblabs-dev-axiom-empty-state.d.ts +55 -0
- package/types/rblabs-dev-axiom-message.d.ts +48 -0
- package/types/rblabs-dev-axiom-monogram.d.ts +12 -0
- package/types/rblabs-dev-axiom-page-header.d.ts +44 -0
- package/types/rblabs-dev-axiom-panel.d.ts +44 -0
- package/types/rblabs-dev-axiom-public-shell.d.ts +28 -0
- package/types/rblabs-dev-axiom-shell-footer.d.ts +17 -0
- package/types/rblabs-dev-axiom-status-chip.d.ts +40 -0
- package/types/rblabs-dev-axiom-technical-value.d.ts +35 -0
- package/types/rblabs-dev-axiom-theme-toggle.d.ts +12 -0
- package/types/rblabs-dev-axiom.d.ts +15 -675
- 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"}
|