@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-app-shell.mjs

@@ -0,0 +1,378 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, computed, input, model, output, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextNavGroupId = 0;
+var AppShellNavGroup = class AppShellNavGroup {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	panelId = `gbt-app-shell-nav-group-${++nextNavGroupId}`;
+	toggle() {
+		this.expanded.update((value) => !value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AppShellNavGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AppShellNavGroup,
+		isStandalone: true,
+		selector: "gbt-app-shell-nav-group",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		ngImport: i0,
+		template: "<div class=\"gbt-app-shell-nav-group\" [attr.data-expanded]=\"expanded() ? '' : null\">\n  <button\n    type=\"button\"\n    class=\"gbt-app-shell__link gbt-app-shell-nav-group__toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"toggle()\"\n  >\n    @if (icon(); as name) {\n      <gbt-icon [name]=\"name\" />\n    }\n    <span>{{ label() }}</span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-app-shell-nav-group__chevron\" />\n  </button>\n  <div class=\"gbt-app-shell-nav-group__panel\" [id]=\"panelId\" [hidden]=\"!expanded()\">\n    <ng-content />\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-app-shell-nav-group__toggle{box-sizing:border-box;width:100%;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left}.gbt-app-shell-nav-group__toggle:hover{background:var(--bg-hover)}.gbt-app-shell-nav-group__chevron{margin-left:auto;transition:transform .15s ease}.gbt-app-shell-nav-group[data-expanded] .gbt-app-shell-nav-group__chevron{transform:rotate(180deg)}.gbt-app-shell-nav-group__panel{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.gbt-app-shell-nav-group__panel[hidden]{display:none}@media(min-width:769px){:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group[data-expanded]{border-radius:var(--site-border-radius-sm);box-shadow:inset 0 0 0 1px var(--gbt-hairline)}:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group__chevron{position:absolute;top:50%;right:.125rem;width:.625rem;height:.625rem;margin:0;transform:translateY(-50%)}:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group[data-expanded] .gbt-app-shell-nav-group__chevron{transform:translateY(-50%) rotate(180deg)}}@media(prefers-reduced-motion:reduce){.gbt-app-shell-nav-group__chevron{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AppShellNavGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-app-shell-nav-group",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-app-shell-nav-group\" [attr.data-expanded]=\"expanded() ? '' : null\">\n  <button\n    type=\"button\"\n    class=\"gbt-app-shell__link gbt-app-shell-nav-group__toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"toggle()\"\n  >\n    @if (icon(); as name) {\n      <gbt-icon [name]=\"name\" />\n    }\n    <span>{{ label() }}</span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-app-shell-nav-group__chevron\" />\n  </button>\n  <div class=\"gbt-app-shell-nav-group__panel\" [id]=\"panelId\" [hidden]=\"!expanded()\">\n    <ng-content />\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-app-shell-nav-group__toggle{box-sizing:border-box;width:100%;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left}.gbt-app-shell-nav-group__toggle:hover{background:var(--bg-hover)}.gbt-app-shell-nav-group__chevron{margin-left:auto;transition:transform .15s ease}.gbt-app-shell-nav-group[data-expanded] .gbt-app-shell-nav-group__chevron{transform:rotate(180deg)}.gbt-app-shell-nav-group__panel{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.gbt-app-shell-nav-group__panel[hidden]{display:none}@media(min-width:769px){:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group[data-expanded]{border-radius:var(--site-border-radius-sm);box-shadow:inset 0 0 0 1px var(--gbt-hairline)}:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group__chevron{position:absolute;top:50%;right:.125rem;width:.625rem;height:.625rem;margin:0;transform:translateY(-50%)}:host-context(.gbt-app-shell__nav--collapsed) .gbt-app-shell-nav-group[data-expanded] .gbt-app-shell-nav-group__chevron{transform:translateY(-50%) rotate(180deg)}}@media(prefers-reduced-motion:reduce){.gbt-app-shell-nav-group__chevron{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}]
+	}
+});
+let nextId = 0;
+var AppShell = class AppShell {
+	navLabel = input.required(...ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []);
+	skipLabel = input.required(...ngDevMode ? [{ debugName: "skipLabel" }] : /* istanbul ignore next */ []);
+	openMenuLabel = input.required(...ngDevMode ? [{ debugName: "openMenuLabel" }] : /* istanbul ignore next */ []);
+	closeMenuLabel = input.required(...ngDevMode ? [{ debugName: "closeMenuLabel" }] : /* istanbul ignore next */ []);
+	collapseLabel = input("", ...ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []);
+	expandLabel = input("", ...ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []);
+	versionLabel = input(null, ...ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []);
+	collapsed = input(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	collapsible = input(true, ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
+	collapsedChange = output();
+	id = ++nextId;
+	mainId = `gbt-app-shell-main-${this.id}`;
+	navId = `gbt-app-shell-nav-${this.id}`;
+	menuOpen = signal(false, ...ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []);
+	menuLabel = computed(() => this.menuOpen() ? this.closeMenuLabel() : this.openMenuLabel(), ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
+	toggleButton = viewChild("toggle", ...ngDevMode ? [{ debugName: "toggleButton" }] : /* istanbul ignore next */ []);
+	nav = viewChild("nav", ...ngDevMode ? [{ debugName: "nav" }] : /* istanbul ignore next */ []);
+	toggleMenu() {
+		if (this.menuOpen()) {
+			this.close();
+			return;
+		}
+		this.menuOpen.set(true);
+		queueMicrotask(() => this.nav()?.nativeElement.focus());
+	}
+	close() {
+		if (!this.menuOpen()) return;
+		this.menuOpen.set(false);
+		this.toggleButton()?.nativeElement.focus();
+	}
+	toggleCollapsed() {
+		this.collapsedChange.emit(!this.collapsed());
+	}
+	onEscape() {
+		this.close();
+	}
+	onNavKeydown(event) {
+		if (event.key !== "Tab" || !this.menuOpen()) return;
+		const nav = this.nav()?.nativeElement;
+		if (!nav) return;
+		const focusableElements = [...nav.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")].filter((element) => !element.closest("[hidden]") && element.checkVisibility?.() !== false);
+		if (focusableElements.length === 0) return;
+		const first = focusableElements[0];
+		const last = focusableElements[focusableElements.length - 1];
+		if (event.shiftKey && document.activeElement === first) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && document.activeElement === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AppShell,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AppShell,
+		isStandalone: true,
+		selector: "gbt-app-shell",
+		inputs: {
+			navLabel: {
+				classPropertyName: "navLabel",
+				publicName: "navLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			skipLabel: {
+				classPropertyName: "skipLabel",
+				publicName: "skipLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			openMenuLabel: {
+				classPropertyName: "openMenuLabel",
+				publicName: "openMenuLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			closeMenuLabel: {
+				classPropertyName: "closeMenuLabel",
+				publicName: "closeMenuLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			collapseLabel: {
+				classPropertyName: "collapseLabel",
+				publicName: "collapseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandLabel: {
+				classPropertyName: "expandLabel",
+				publicName: "expandLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			versionLabel: {
+				classPropertyName: "versionLabel",
+				publicName: "versionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { collapsedChange: "collapsedChange" },
+		host: { listeners: { "document:keydown.escape": "onEscape()" } },
+		viewQueries: [{
+			propertyName: "toggleButton",
+			first: true,
+			predicate: ["toggle"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "nav",
+			first: true,
+			predicate: ["nav"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-app-shell\">\n  <a class=\"gbt-app-shell__skip\" [href]=\"'#' + mainId\">{{ skipLabel() }}</a>\n\n  <nav\n    #nav\n    [id]=\"navId\"\n    class=\"gbt-app-shell__nav\"\n    [class.gbt-app-shell__nav--open]=\"menuOpen()\"\n    [class.gbt-app-shell__nav--collapsed]=\"collapsed()\"\n    [attr.aria-label]=\"navLabel()\"\n    tabindex=\"-1\"\n    (keydown)=\"onNavKeydown($event)\"\n  >\n    <div class=\"gbt-app-shell__brand\">\n      <ng-content select=\"[shell-brand]\" />\n    </div>\n    <ng-content select=\"[shell-nav]\" />\n    <div class=\"gbt-app-shell__bottom\">\n      @if (versionLabel()) {\n        @if (!collapsed()) {\n          <div class=\"gbt-app-shell__version\">v{{ versionLabel() }}</div>\n        }\n      }\n      @if (collapsible()) {\n        <button\n          type=\"button\"\n          class=\"gbt-app-shell__collapse-toggle\"\n          [class.gbt-app-shell__collapse-toggle--collapsed]=\"collapsed()\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <gbt-icon name=\"chevrons-left\" />\n        </button>\n      }\n    </div>\n  </nav>\n\n  @if (menuOpen()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div class=\"gbt-app-shell__scrim\" (click)=\"close()\"></div>\n  }\n\n  <div class=\"gbt-app-shell__body\">\n    <header class=\"gbt-app-shell__header\">\n      <button\n        #toggle\n        type=\"button\"\n        class=\"gbt-app-shell__toggle\"\n        [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"navId\"\n        [attr.aria-label]=\"menuLabel()\"\n        (click)=\"toggleMenu()\"\n      >\n        <span class=\"gbt-app-shell__burger\" aria-hidden=\"true\"></span>\n      </button>\n      <ng-content select=\"[shell-header]\" />\n    </header>\n\n    <main [id]=\"mainId\" class=\"gbt-app-shell__content\" tabindex=\"-1\">\n      <ng-content />\n    </main>\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--frame)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__nav{position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;height:100vh;height:100dvh;padding:1rem .75rem;--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, transparent);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;box-sizing:border-box;height:var(--gbt-shell-bar, 4rem);margin:-1rem -.75rem 1rem;padding:0 1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__nav--collapsed .gbt-app-shell__brand{justify-content:center;padding:0}.gbt-app-shell__bottom{position:sticky;bottom:0;margin-top:auto;padding-top:.25rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;background:inherit}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:sticky;top:0;z-index:1010;display:flex;align-items:center;gap:.75rem;box-sizing:border-box;height:var(--gbt-shell-bar, 4rem);padding:0 var(--gbt-shell-content-padding, clamp(1rem, .25rem + 2vw, 2rem));--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);background:var(--gbt-shell-header-bg, var(--bg-panel));border-bottom:1px solid var(--gbt-shell-border, transparent)}@media(min-width:769px){.gbt-app-shell__header:after{content:\"\";position:absolute;top:100%;left:0;width:var(--site-border-radius-lg);height:var(--site-border-radius-lg);background:radial-gradient(circle at 100% 100%,transparent calc(var(--site-border-radius-lg) - .5px),var(--frame) var(--site-border-radius-lg));pointer-events:none}}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, clamp(1rem, .25rem + 2vw, 2rem));background:var(--bg-panel);border-top-left-radius:var(--site-border-radius-lg)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}.gbt-app-shell__content{border-top-left-radius:0}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AppShell,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-app-shell",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-app-shell\">\n  <a class=\"gbt-app-shell__skip\" [href]=\"'#' + mainId\">{{ skipLabel() }}</a>\n\n  <nav\n    #nav\n    [id]=\"navId\"\n    class=\"gbt-app-shell__nav\"\n    [class.gbt-app-shell__nav--open]=\"menuOpen()\"\n    [class.gbt-app-shell__nav--collapsed]=\"collapsed()\"\n    [attr.aria-label]=\"navLabel()\"\n    tabindex=\"-1\"\n    (keydown)=\"onNavKeydown($event)\"\n  >\n    <div class=\"gbt-app-shell__brand\">\n      <ng-content select=\"[shell-brand]\" />\n    </div>\n    <ng-content select=\"[shell-nav]\" />\n    <div class=\"gbt-app-shell__bottom\">\n      @if (versionLabel()) {\n        @if (!collapsed()) {\n          <div class=\"gbt-app-shell__version\">v{{ versionLabel() }}</div>\n        }\n      }\n      @if (collapsible()) {\n        <button\n          type=\"button\"\n          class=\"gbt-app-shell__collapse-toggle\"\n          [class.gbt-app-shell__collapse-toggle--collapsed]=\"collapsed()\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <gbt-icon name=\"chevrons-left\" />\n        </button>\n      }\n    </div>\n  </nav>\n\n  @if (menuOpen()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div class=\"gbt-app-shell__scrim\" (click)=\"close()\"></div>\n  }\n\n  <div class=\"gbt-app-shell__body\">\n    <header class=\"gbt-app-shell__header\">\n      <button\n        #toggle\n        type=\"button\"\n        class=\"gbt-app-shell__toggle\"\n        [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"navId\"\n        [attr.aria-label]=\"menuLabel()\"\n        (click)=\"toggleMenu()\"\n      >\n        <span class=\"gbt-app-shell__burger\" aria-hidden=\"true\"></span>\n      </button>\n      <ng-content select=\"[shell-header]\" />\n    </header>\n\n    <main [id]=\"mainId\" class=\"gbt-app-shell__content\" tabindex=\"-1\">\n      <ng-content />\n    </main>\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--frame)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__nav{position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;height:100vh;height:100dvh;padding:1rem .75rem;--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, transparent);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;box-sizing:border-box;height:var(--gbt-shell-bar, 4rem);margin:-1rem -.75rem 1rem;padding:0 1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__nav--collapsed .gbt-app-shell__brand{justify-content:center;padding:0}.gbt-app-shell__bottom{position:sticky;bottom:0;margin-top:auto;padding-top:.25rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;background:inherit}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:sticky;top:0;z-index:1010;display:flex;align-items:center;gap:.75rem;box-sizing:border-box;height:var(--gbt-shell-bar, 4rem);padding:0 var(--gbt-shell-content-padding, clamp(1rem, .25rem + 2vw, 2rem));--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);background:var(--gbt-shell-header-bg, var(--bg-panel));border-bottom:1px solid var(--gbt-shell-border, transparent)}@media(min-width:769px){.gbt-app-shell__header:after{content:\"\";position:absolute;top:100%;left:0;width:var(--site-border-radius-lg);height:var(--site-border-radius-lg);background:radial-gradient(circle at 100% 100%,transparent calc(var(--site-border-radius-lg) - .5px),var(--frame) var(--site-border-radius-lg));pointer-events:none}}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, clamp(1rem, .25rem + 2vw, 2rem));background:var(--bg-panel);border-top-left-radius:var(--site-border-radius-lg)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}.gbt-app-shell__content{border-top-left-radius:0}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		navLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navLabel",
+				required: true
+			}]
+		}],
+		skipLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "skipLabel",
+				required: true
+			}]
+		}],
+		openMenuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openMenuLabel",
+				required: true
+			}]
+		}],
+		closeMenuLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeMenuLabel",
+				required: true
+			}]
+		}],
+		collapseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseLabel",
+				required: false
+			}]
+		}],
+		expandLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandLabel",
+				required: false
+			}]
+		}],
+		versionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "versionLabel",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		collapsedChange: [{
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		toggleButton: [{
+			type: i0.ViewChild,
+			args: ["toggle", { isSignal: true }]
+		}],
+		nav: [{
+			type: i0.ViewChild,
+			args: ["nav", { isSignal: true }]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["document:keydown.escape"]
+		}]
+	}
+});
+export { AppShell, AppShellNavGroup };
+
+//# sourceMappingURL=masmarino-gabarit-app-shell.mjs.map

package/fesm2022/masmarino-gabarit-app-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-app-shell.mjs","names":[],"sources":["../../../projects/gabarit/app-shell/app-shell-nav-group/app-shell-nav-group.ts","../../../projects/gabarit/app-shell/app-shell-nav-group/app-shell-nav-group.html","../../../projects/gabarit/app-shell/app-shell.ts","../../../projects/gabarit/app-shell/app-shell.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nlet nextNavGroupId = 0\n\n@Component({\n  selector: 'gbt-app-shell-nav-group',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './app-shell-nav-group.html',\n  styleUrl: './app-shell-nav-group.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppShellNavGroup {\n  label = input.required<string>()\n  icon = input<string | null>(null)\n  expanded = model(false)\n\n  protected readonly panelId = `gbt-app-shell-nav-group-${++nextNavGroupId}`\n\n  protected toggle(): void {\n    this.expanded.update((value) => !value)\n  }\n}\n","<div class=\"gbt-app-shell-nav-group\" [attr.data-expanded]=\"expanded() ? '' : null\">\n  <button\n    type=\"button\"\n    class=\"gbt-app-shell__link gbt-app-shell-nav-group__toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"panelId\"\n    (click)=\"toggle()\"\n  >\n    @if (icon(); as name) {\n      <gbt-icon [name]=\"name\" />\n    }\n    <span>{{ label() }}</span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-app-shell-nav-group__chevron\" />\n  </button>\n  <div class=\"gbt-app-shell-nav-group__panel\" [id]=\"panelId\" [hidden]=\"!expanded()\">\n    <ng-content />\n  </div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  computed,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-app-shell',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './app-shell.html',\n  styleUrl: './app-shell.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppShell {\n  navLabel = input.required<string>()\n  skipLabel = input.required<string>()\n  openMenuLabel = input.required<string>()\n  closeMenuLabel = input.required<string>()\n  collapseLabel = input<string>('')\n  expandLabel = input<string>('')\n  versionLabel = input<string | null>(null)\n  collapsed = input<boolean>(false)\n  collapsible = input<boolean>(true)\n  collapsedChange = output<boolean>()\n\n  private readonly id = ++nextId\n  protected readonly mainId = `gbt-app-shell-main-${this.id}`\n  protected readonly navId = `gbt-app-shell-nav-${this.id}`\n\n  protected readonly menuOpen = signal(false)\n\n  protected readonly menuLabel = computed(() =>\n    this.menuOpen() ? this.closeMenuLabel() : this.openMenuLabel(),\n  )\n\n  private readonly toggleButton = viewChild<ElementRef<HTMLButtonElement>>('toggle')\n  private readonly nav = viewChild<ElementRef<HTMLElement>>('nav')\n\n  protected toggleMenu(): void {\n    if (this.menuOpen()) {\n      this.close()\n      return\n    }\n    this.menuOpen.set(true)\n    queueMicrotask(() => this.nav()?.nativeElement.focus())\n  }\n\n  protected close(): void {\n    if (!this.menuOpen()) return\n    this.menuOpen.set(false)\n    this.toggleButton()?.nativeElement.focus()\n  }\n\n  protected toggleCollapsed(): void {\n    this.collapsedChange.emit(!this.collapsed())\n  }\n\n  @HostListener('document:keydown.escape')\n  protected onEscape(): void {\n    this.close()\n  }\n\n  protected onNavKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Tab' || !this.menuOpen()) return\n    const nav = this.nav()?.nativeElement\n    if (!nav) return\n\n    const focusableElements = [\n      ...nav.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ].filter((element) => !element.closest('[hidden]') && element.checkVisibility?.() !== false)\n    if (focusableElements.length === 0) return\n\n    const first = focusableElements[0]\n    const last = focusableElements[focusableElements.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n}\n","<div class=\"gbt-app-shell\">\n  <a class=\"gbt-app-shell__skip\" [href]=\"'#' + mainId\">{{ skipLabel() }}</a>\n\n  <nav\n    #nav\n    [id]=\"navId\"\n    class=\"gbt-app-shell__nav\"\n    [class.gbt-app-shell__nav--open]=\"menuOpen()\"\n    [class.gbt-app-shell__nav--collapsed]=\"collapsed()\"\n    [attr.aria-label]=\"navLabel()\"\n    tabindex=\"-1\"\n    (keydown)=\"onNavKeydown($event)\"\n  >\n    <div class=\"gbt-app-shell__brand\">\n      <ng-content select=\"[shell-brand]\" />\n    </div>\n    <ng-content select=\"[shell-nav]\" />\n    <div class=\"gbt-app-shell__bottom\">\n      @if (versionLabel()) {\n        @if (!collapsed()) {\n          <div class=\"gbt-app-shell__version\">v{{ versionLabel() }}</div>\n        }\n      }\n      @if (collapsible()) {\n        <button\n          type=\"button\"\n          class=\"gbt-app-shell__collapse-toggle\"\n          [class.gbt-app-shell__collapse-toggle--collapsed]=\"collapsed()\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <gbt-icon name=\"chevrons-left\" />\n        </button>\n      }\n    </div>\n  </nav>\n\n  @if (menuOpen()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div class=\"gbt-app-shell__scrim\" (click)=\"close()\"></div>\n  }\n\n  <div class=\"gbt-app-shell__body\">\n    <header class=\"gbt-app-shell__header\">\n      <button\n        #toggle\n        type=\"button\"\n        class=\"gbt-app-shell__toggle\"\n        [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"navId\"\n        [attr.aria-label]=\"menuLabel()\"\n        (click)=\"toggleMenu()\"\n      >\n        <span class=\"gbt-app-shell__burger\" aria-hidden=\"true\"></span>\n      </button>\n      <ng-content select=\"[shell-header]\" />\n    </header>\n\n    <main [id]=\"mainId\" class=\"gbt-app-shell__content\" tabindex=\"-1\">\n      <ng-content />\n    </main>\n  </div>\n</div>\n"],"mappings":"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"}