@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-alert.mjs

@@ -0,0 +1,208 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input, output } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+const ASSERTIVE_VARIANTS = /* @__PURE__ */ new Set(["warning", "error"]);
+const VARIANT_ICONS = {
+	success: "check-circle",
+	error: "alert-circle",
+	warning: "alert-triangle",
+	info: "info",
+	neutral: "info"
+};
+var Alert = class Alert {
+	variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, {
+		...ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input("Dismiss", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	live = input("auto", ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	appearance = input("default", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	iconAlign = input("auto", ...ngDevMode ? [{ debugName: "iconAlign" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	role = computed(() => {
+		switch (this.live()) {
+			case "assertive": return "alert";
+			case "polite": return "status";
+			case "off": return null;
+			default: return ASSERTIVE_VARIANTS.has(this.variant()) ? "alert" : "status";
+		}
+	}, ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	icon = computed(() => VARIANT_ICONS[this.variant()], ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Alert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Alert,
+		isStandalone: true,
+		selector: "gbt-alert",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconAlign: {
+				classPropertyName: "iconAlign",
+				publicName: "iconAlign",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		ngImport: i0,
+		template: "<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n",
+		styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;max-width:100%;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}@media(max-width:599px){.gbt-alert__actions{--gbt-control-height-sm: 2.75rem;--gbt-control-height-md: 2.75rem}}\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: Alert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-alert",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n",
+			styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;max-width:100%;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}@media(max-width:599px){.gbt-alert__actions{--gbt-control-height-sm: 2.75rem;--gbt-control-height-md: 2.75rem}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		iconAlign: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconAlign",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+export { Alert };
+
+//# sourceMappingURL=masmarino-gabarit-alert.mjs.map

package/fesm2022/masmarino-gabarit-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-alert.mjs","names":[],"sources":["../../../projects/gabarit/alert/alert.ts","../../../projects/gabarit/alert/alert.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  input,\n  output,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'\n\nexport type AlertLive = 'auto' | 'assertive' | 'polite' | 'off'\nexport type AlertSize = 'md' | 'sm'\nexport type AlertAppearance = 'default' | 'subtle'\nexport type AlertIconAlign = 'auto' | 'center' | 'start'\n\nconst ASSERTIVE_VARIANTS: ReadonlySet<AlertVariant> = new Set(['warning', 'error'])\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  success: 'check-circle',\n  error: 'alert-circle',\n  warning: 'alert-triangle',\n  info: 'info',\n  neutral: 'info',\n}\n\n@Component({\n  selector: 'gbt-alert',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './alert.html',\n  styleUrl: './alert.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Alert {\n  variant = input<AlertVariant>('info')\n  dismissible = input(false, { transform: booleanAttribute })\n  closeLabel = input<string>('Dismiss')\n\n  live = input<AlertLive>('auto')\n  heading = input<string>('')\n  size = input<AlertSize>('md')\n  appearance = input<AlertAppearance>('default')\n  iconAlign = input<AlertIconAlign>('auto')\n\n  dismissed = output<void>()\n\n  protected readonly role = computed(() => {\n    switch (this.live()) {\n      case 'assertive':\n        return 'alert'\n      case 'polite':\n        return 'status'\n      case 'off':\n        return null\n      default:\n        return ASSERTIVE_VARIANTS.has(this.variant()) ? 'alert' : 'status'\n    }\n  })\n\n  protected readonly icon = computed(() => VARIANT_ICONS[this.variant()])\n}\n","<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n"],"mappings":";;;AAiBA,MAAM,qCAAgD,IAAI,IAAI,CAAC,WAAW,OAAO,CAAC;AAElF,MAAM,gBAA8C;CAClD,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;AACV;AAUD,IAAa,QAAb,MAAa,MAAK;CAChB,UAAU,MAAoB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACrC,cAAc,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACxD,aAAa,MAAc,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAErC,OAAO,MAAiB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,UAAU,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,OAAO,MAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,aAAa,MAAuB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,YAAY,MAAsB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEzC,YAAY,OAAM;CAEC,OAAO,eAAc;EACtC,QAAQ,KAAK,KAAI,GAAjB;GACE,KAAK,aACH,OAAO;GACT,KAAK,UACH,OAAO;GACT,KAAK,OACH,OAAO;GACT,SACE,OAAO,mBAAmB,IAAI,KAAK,QAAO,CAAE,IAAI,UAAU;EAC9D;CACF,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,OAAO,eAAe,cAAc,KAAK,QAAO,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CA1B5D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAK,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAL,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAK,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;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;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UCnClB;EAiCA,QAAA,CAAA,8tJAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDHY;GAAI,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKH,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAK,YAAA,CAAA;EARjB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,SACP,CAAC,IAAI;GAAC,iBAGE,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,8tJAAA;EAAA,CAAA"}

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)}@media(min-width:769px){.gbt-app-shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}}@media print{.gbt-app-shell{height:auto;overflow:visible}}.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)}.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)}@media(min-width:769px){.gbt-app-shell__content{min-height:0;overflow-y:auto}}@media print{.gbt-app-shell__content{overflow:visible}}.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)}@media(min-width:769px){.gbt-app-shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}}@media print{.gbt-app-shell{height:auto;overflow:visible}}.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)}.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)}@media(min-width:769px){.gbt-app-shell__content{min-height:0;overflow-y:auto}}@media print{.gbt-app-shell__content{overflow:visible}}.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