@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-drawer.mjs

@@ -0,0 +1,209 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, effect, input, output, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+const CLOSE_ANIMATION_MS = 200;
+var Drawer = class Drawer {
+	isOpen = input.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	edge = input("right", ...ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []);
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	closed = output();
+	rendered = signal(false, ...ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []);
+	panel = viewChild("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	previouslyFocused = null;
+	closeTimer = null;
+	constructor() {
+		effect(() => {
+			if (this.isOpen()) {
+				if (this.closeTimer !== null) {
+					clearTimeout(this.closeTimer);
+					this.closeTimer = null;
+				}
+				this.rendered.set(true);
+				this.previouslyFocused = document.activeElement;
+				queueMicrotask(() => this.panel()?.nativeElement.focus());
+			} else if (this.rendered()) this.closeTimer = setTimeout(() => {
+				this.closeTimer = null;
+				this.rendered.set(false);
+				if (this.previouslyFocused) {
+					const target = this.previouslyFocused;
+					this.previouslyFocused = null;
+					target.focus();
+				}
+			}, CLOSE_ANIMATION_MS);
+		});
+	}
+	ngOnDestroy() {
+		if (this.closeTimer !== null) clearTimeout(this.closeTimer);
+		this.previouslyFocused?.focus();
+	}
+	onEscape() {
+		if (this.isOpen()) this.closed.emit();
+	}
+	onBackdropClick(event) {
+		if (event.target === event.currentTarget) this.closed.emit();
+	}
+	onPanelKeydown(event) {
+		if (event.key !== "Tab") return;
+		const panel = this.panel()?.nativeElement;
+		if (!panel) return;
+		const focusable = panel.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
+		if (focusable.length === 0) return;
+		const first = focusable[0];
+		const last = focusable[focusable.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: Drawer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Drawer,
+		isStandalone: true,
+		selector: "gbt-drawer",
+		inputs: {
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			edge: {
+				classPropertyName: "edge",
+				publicName: "edge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { closed: "closed" },
+		host: { listeners: { "document:keydown.escape": "onEscape()" } },
+		viewQueries: [{
+			propertyName: "panel",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (rendered()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-drawer__backdrop\"\n    [class.gbt-drawer__backdrop--closing]=\"!isOpen()\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div\n      #panel\n      class=\"gbt-drawer__panel\"\n      [class.gbt-drawer__panel--closing]=\"!isOpen()\"\n      [attr.data-edge]=\"edge()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"heading() || null\"\n      tabindex=\"-1\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <header class=\"gbt-drawer__header\">\n        @switch (headingLevel()) {\n          @case (1) {\n            <h1 class=\"gbt-drawer__title\">{{ heading() }}</h1>\n          }\n          @case (3) {\n            <h3 class=\"gbt-drawer__title\">{{ heading() }}</h3>\n          }\n          @case (4) {\n            <h4 class=\"gbt-drawer__title\">{{ heading() }}</h4>\n          }\n          @case (5) {\n            <h5 class=\"gbt-drawer__title\">{{ heading() }}</h5>\n          }\n          @case (6) {\n            <h6 class=\"gbt-drawer__title\">{{ heading() }}</h6>\n          }\n          @default {\n            <h2 class=\"gbt-drawer__title\">{{ heading() }}</h2>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"gbt-drawer__close\"\n          (click)=\"closed.emit()\"\n          [attr.aria-label]=\"closeLabel()\"\n        >\n          <gbt-icon name=\"x\" aria-hidden=\"true\" />\n        </button>\n      </header>\n      <div class=\"gbt-drawer__body\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n",
+		styles: [".gbt-drawer__backdrop{position:fixed;inset:0;background:#0006;z-index:1200;animation:gbt-drawer-backdrop-in .2s ease-out}.gbt-drawer__backdrop--closing{animation:gbt-drawer-backdrop-out .2s ease-in forwards}.gbt-drawer__panel{position:fixed;display:flex;flex-direction:column;background:var(--bg-principal);box-shadow:var(--site-shadow-lg)}.gbt-drawer__panel:focus{outline:none}.gbt-drawer__panel:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-drawer__panel[data-edge=right]{top:0;right:0;bottom:0;width:min(90vw,400px);animation:gbt-drawer-slide-in-right .2s ease-out}.gbt-drawer__panel[data-edge=right].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-right .2s ease-in forwards}.gbt-drawer__panel[data-edge=left]{top:0;left:0;bottom:0;width:min(90vw,400px);animation:gbt-drawer-slide-in-left .2s ease-out}.gbt-drawer__panel[data-edge=left].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-left .2s ease-in forwards}.gbt-drawer__panel[data-edge=top]{top:0;left:0;right:0;height:min(90vh,400px);animation:gbt-drawer-slide-in-top .2s ease-out}.gbt-drawer__panel[data-edge=top].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-top .2s ease-in forwards}.gbt-drawer__panel[data-edge=bottom]{bottom:0;left:0;right:0;height:min(90vh,400px);animation:gbt-drawer-slide-in-bottom .2s ease-out}.gbt-drawer__panel[data-edge=bottom].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-bottom .2s ease-in forwards}.gbt-drawer__header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color)}.gbt-drawer__header .gbt-drawer__title{font-family:var(--gbt-font-display, var(--font-display));font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.gbt-drawer__close{position:relative;display:inline-flex;background:none;border:none;color:var(--text-discret);cursor:pointer}.gbt-drawer__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-drawer__body{flex:1;min-height:0;padding:1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}@keyframes gbt-drawer-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-drawer-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes gbt-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes gbt-drawer-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes gbt-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes gbt-drawer-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes gbt-drawer-slide-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes gbt-drawer-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes gbt-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes gbt-drawer-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.gbt-drawer__backdrop,.gbt-drawer__backdrop--closing,.gbt-drawer__panel,.gbt-drawer__panel--closing{animation: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: Drawer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-drawer",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (rendered()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-drawer__backdrop\"\n    [class.gbt-drawer__backdrop--closing]=\"!isOpen()\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div\n      #panel\n      class=\"gbt-drawer__panel\"\n      [class.gbt-drawer__panel--closing]=\"!isOpen()\"\n      [attr.data-edge]=\"edge()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"heading() || null\"\n      tabindex=\"-1\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <header class=\"gbt-drawer__header\">\n        @switch (headingLevel()) {\n          @case (1) {\n            <h1 class=\"gbt-drawer__title\">{{ heading() }}</h1>\n          }\n          @case (3) {\n            <h3 class=\"gbt-drawer__title\">{{ heading() }}</h3>\n          }\n          @case (4) {\n            <h4 class=\"gbt-drawer__title\">{{ heading() }}</h4>\n          }\n          @case (5) {\n            <h5 class=\"gbt-drawer__title\">{{ heading() }}</h5>\n          }\n          @case (6) {\n            <h6 class=\"gbt-drawer__title\">{{ heading() }}</h6>\n          }\n          @default {\n            <h2 class=\"gbt-drawer__title\">{{ heading() }}</h2>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"gbt-drawer__close\"\n          (click)=\"closed.emit()\"\n          [attr.aria-label]=\"closeLabel()\"\n        >\n          <gbt-icon name=\"x\" aria-hidden=\"true\" />\n        </button>\n      </header>\n      <div class=\"gbt-drawer__body\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n",
+			styles: [".gbt-drawer__backdrop{position:fixed;inset:0;background:#0006;z-index:1200;animation:gbt-drawer-backdrop-in .2s ease-out}.gbt-drawer__backdrop--closing{animation:gbt-drawer-backdrop-out .2s ease-in forwards}.gbt-drawer__panel{position:fixed;display:flex;flex-direction:column;background:var(--bg-principal);box-shadow:var(--site-shadow-lg)}.gbt-drawer__panel:focus{outline:none}.gbt-drawer__panel:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-drawer__panel[data-edge=right]{top:0;right:0;bottom:0;width:min(90vw,400px);animation:gbt-drawer-slide-in-right .2s ease-out}.gbt-drawer__panel[data-edge=right].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-right .2s ease-in forwards}.gbt-drawer__panel[data-edge=left]{top:0;left:0;bottom:0;width:min(90vw,400px);animation:gbt-drawer-slide-in-left .2s ease-out}.gbt-drawer__panel[data-edge=left].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-left .2s ease-in forwards}.gbt-drawer__panel[data-edge=top]{top:0;left:0;right:0;height:min(90vh,400px);animation:gbt-drawer-slide-in-top .2s ease-out}.gbt-drawer__panel[data-edge=top].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-top .2s ease-in forwards}.gbt-drawer__panel[data-edge=bottom]{bottom:0;left:0;right:0;height:min(90vh,400px);animation:gbt-drawer-slide-in-bottom .2s ease-out}.gbt-drawer__panel[data-edge=bottom].gbt-drawer__panel--closing{animation:gbt-drawer-slide-out-bottom .2s ease-in forwards}.gbt-drawer__header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color)}.gbt-drawer__header .gbt-drawer__title{font-family:var(--gbt-font-display, var(--font-display));font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.gbt-drawer__close{position:relative;display:inline-flex;background:none;border:none;color:var(--text-discret);cursor:pointer}.gbt-drawer__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-drawer__body{flex:1;min-height:0;padding:1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}@keyframes gbt-drawer-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-drawer-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes gbt-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes gbt-drawer-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes gbt-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes gbt-drawer-slide-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes gbt-drawer-slide-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes gbt-drawer-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes gbt-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes gbt-drawer-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.gbt-drawer__backdrop,.gbt-drawer__backdrop--closing,.gbt-drawer__panel,.gbt-drawer__panel--closing{animation:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: true
+			}]
+		}],
+		edge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "edge",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["document:keydown.escape"]
+		}]
+	}
+});
+export { Drawer };
+
+//# sourceMappingURL=masmarino-gabarit-drawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-drawer.mjs","names":[],"sources":["../../../projects/gabarit/drawer/drawer.ts","../../../projects/gabarit/drawer/drawer.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  OnDestroy,\n  effect,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type DrawerEdge = 'right' | 'left' | 'top' | 'bottom'\n\nconst CLOSE_ANIMATION_MS = 200\n\n@Component({\n  selector: 'gbt-drawer',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './drawer.html',\n  styleUrl: './drawer.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Drawer implements OnDestroy {\n  isOpen = input.required<boolean>()\n  edge = input<DrawerEdge>('right')\n  heading = input<string>('')\n  headingLevel = input<1 | 2 | 3 | 4 | 5 | 6>(2)\n  closeLabel = input<string>('Close')\n\n  closed = output<void>()\n\n  protected readonly rendered = signal(false)\n\n  private readonly panel = viewChild<ElementRef<HTMLElement>>('panel')\n\n  private previouslyFocused: HTMLElement | null = null\n  private closeTimer: ReturnType<typeof setTimeout> | null = null\n\n  constructor() {\n    effect(() => {\n      if (this.isOpen()) {\n        if (this.closeTimer !== null) {\n          clearTimeout(this.closeTimer)\n          this.closeTimer = null\n        }\n        this.rendered.set(true)\n        this.previouslyFocused = document.activeElement as HTMLElement | null\n        queueMicrotask(() => this.panel()?.nativeElement.focus())\n      } else if (this.rendered()) {\n        this.closeTimer = setTimeout(() => {\n          this.closeTimer = null\n          this.rendered.set(false)\n          if (this.previouslyFocused) {\n            const target = this.previouslyFocused\n            this.previouslyFocused = null\n            target.focus()\n          }\n        }, CLOSE_ANIMATION_MS)\n      }\n    })\n  }\n\n  ngOnDestroy(): void {\n    if (this.closeTimer !== null) {\n      clearTimeout(this.closeTimer)\n    }\n    this.previouslyFocused?.focus()\n  }\n\n  @HostListener('document:keydown.escape')\n  protected onEscape(): void {\n    if (this.isOpen()) {\n      this.closed.emit()\n    }\n  }\n\n  protected onBackdropClick(event: MouseEvent): void {\n    if (event.target === event.currentTarget) {\n      this.closed.emit()\n    }\n  }\n\n  protected onPanelKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Tab') {\n      return\n    }\n    const panel = this.panel()?.nativeElement\n    if (!panel) {\n      return\n    }\n    const focusable = panel.querySelectorAll<HTMLElement>(\n      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n    )\n    if (focusable.length === 0) {\n      return\n    }\n    const first = focusable[0]\n    const last = focusable[focusable.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","@if (rendered()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-drawer__backdrop\"\n    [class.gbt-drawer__backdrop--closing]=\"!isOpen()\"\n    (click)=\"onBackdropClick($event)\"\n  >\n    <div\n      #panel\n      class=\"gbt-drawer__panel\"\n      [class.gbt-drawer__panel--closing]=\"!isOpen()\"\n      [attr.data-edge]=\"edge()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"heading() || null\"\n      tabindex=\"-1\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <header class=\"gbt-drawer__header\">\n        @switch (headingLevel()) {\n          @case (1) {\n            <h1 class=\"gbt-drawer__title\">{{ heading() }}</h1>\n          }\n          @case (3) {\n            <h3 class=\"gbt-drawer__title\">{{ heading() }}</h3>\n          }\n          @case (4) {\n            <h4 class=\"gbt-drawer__title\">{{ heading() }}</h4>\n          }\n          @case (5) {\n            <h5 class=\"gbt-drawer__title\">{{ heading() }}</h5>\n          }\n          @case (6) {\n            <h6 class=\"gbt-drawer__title\">{{ heading() }}</h6>\n          }\n          @default {\n            <h2 class=\"gbt-drawer__title\">{{ heading() }}</h2>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"gbt-drawer__close\"\n          (click)=\"closed.emit()\"\n          [attr.aria-label]=\"closeLabel()\"\n        >\n          <gbt-icon name=\"x\" aria-hidden=\"true\" />\n        </button>\n      </header>\n      <div class=\"gbt-drawer__body\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-empty-state.mjs

@@ -0,0 +1,226 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { Icon } from "@masmarino/gabarit/icon";
+var EmptyState = class EmptyState {
+	illustration = input(null, ...ngDevMode ? [{ debugName: "illustration" }] : /* istanbul ignore next */ []);
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	headingLevel = input(null, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	headingId = input(null, ...ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []);
+	headingFocusable = input(false, {
+		...ngDevMode ? { debugName: "headingFocusable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	headingEl = viewChild("headingEl", ...ngDevMode ? [{ debugName: "headingEl" }] : /* istanbul ignore next */ []);
+	focusHeading() {
+		this.headingEl()?.nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: EmptyState,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: EmptyState,
+		isStandalone: true,
+		selector: "gbt-empty-state",
+		inputs: {
+			illustration: {
+				classPropertyName: "illustration",
+				publicName: "illustration",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingId: {
+				classPropertyName: "headingId",
+				publicName: "headingId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingFocusable: {
+				classPropertyName: "headingFocusable",
+				publicName: "headingFocusable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "headingEl",
+			first: true,
+			predicate: ["headingEl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n  class=\"gbt-empty-state\"\n  [attr.data-size]=\"size() === 'default' ? null : size()\"\n  [attr.data-tone]=\"tone() === 'default' ? null : tone()\"\n>\n  @if (illustration()) {\n    <div class=\"gbt-empty-state__illustration\" aria-hidden=\"true\">\n      @switch (illustration()) {\n        @case ('folder') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"16\" y=\"38\" width=\"64\" height=\"40\" rx=\"4\" />\n            <path d=\"M16 38 v-8a4 4 0 0 1 4-4h16l8 8h28a4 4 0 0 1 4 4\" />\n            <rect\n              x=\"34\"\n              y=\"14\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(-8 42 24)\"\n              opacity=\"0.55\"\n            />\n            <rect\n              x=\"50\"\n              y=\"16\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(6 58 26)\"\n              opacity=\"0.55\"\n            />\n          </svg>\n        }\n        @case ('star') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path\n              d=\"M48,18 L55.6,37.5 L76.5,38.7 L60.4,52 L65.6,72.3 L48,61 L30.4,72.3 L35.6,52 L19.5,38.7 L40.4,37.5 Z\"\n            />\n            <path d=\"M78,14 L81,20 L78,26 L75,20 Z\" opacity=\"0.55\" />\n            <path d=\"M16,64 L19,70 L16,76 L13,70 Z\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('checklist') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"24\" y=\"18\" width=\"48\" height=\"64\" rx=\"6\" />\n            <rect x=\"38\" y=\"12\" width=\"20\" height=\"10\" rx=\"3\" />\n            <line x1=\"34\" y1=\"38\" x2=\"62\" y2=\"38\" />\n            <path d=\"M32 50 l4 4 l8-8\" />\n            <line x1=\"46\" y1=\"52\" x2=\"62\" y2=\"52\" />\n            <line x1=\"34\" y1=\"66\" x2=\"62\" y2=\"66\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('merge') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"24\" cy=\"22\" r=\"7\" />\n            <circle cx=\"72\" cy=\"22\" r=\"7\" />\n            <circle cx=\"48\" cy=\"76\" r=\"8\" />\n            <path d=\"M24 29 V50 Q24 69 39 72\" />\n            <path d=\"M72 29 V50 Q72 69 57 72\" />\n          </svg>\n        }\n        @case ('pipeline') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"22\" cy=\"68\" r=\"12\" />\n            <path d=\"M17 60 L29 68 L17 76 Z\" fill=\"currentColor\" stroke=\"none\" />\n            <path d=\"M29 58 L44 38\" />\n            <circle cx=\"50\" cy=\"30\" r=\"10\" />\n            <path d=\"M56 38 L70 54\" />\n            <circle cx=\"76\" cy=\"62\" r=\"10\" />\n          </svg>\n        }\n        @case ('tag') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M18 20 H54 L82 48 L54 76 H18 Q14 76 14 72 V24 Q14 20 18 20 Z\" />\n            <circle cx=\"34\" cy=\"36\" r=\"5\" />\n          </svg>\n        }\n        @case ('book') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M48 26 Q34 16 16 20 V72 Q34 68 48 78 Q62 68 80 72 V20 Q62 16 48 26 Z\" />\n            <line x1=\"24\" y1=\"32\" x2=\"40\" y2=\"30\" />\n            <line x1=\"24\" y1=\"42\" x2=\"40\" y2=\"40\" />\n            <line x1=\"56\" y1=\"30\" x2=\"72\" y2=\"32\" />\n            <line x1=\"56\" y1=\"40\" x2=\"72\" y2=\"42\" />\n          </svg>\n        }\n        @case ('server') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"14\" y=\"16\" width=\"68\" height=\"26\" rx=\"5\" />\n            <rect x=\"14\" y=\"54\" width=\"68\" height=\"26\" rx=\"5\" />\n            <circle cx=\"26\" cy=\"29\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <circle cx=\"26\" cy=\"67\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <line x1=\"38\" y1=\"29\" x2=\"70\" y2=\"29\" opacity=\"0.55\" />\n            <line x1=\"38\" y1=\"67\" x2=\"70\" y2=\"67\" opacity=\"0.55\" />\n          </svg>\n        }\n      }\n    </div>\n  } @else if (icon()) {\n    <div class=\"gbt-empty-state__icon\" aria-hidden=\"true\"><gbt-icon [name]=\"icon()!\" /></div>\n  }\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h1>\n    }\n    @case (2) {\n      <h2\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h2>\n    }\n    @case (3) {\n      <h3\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h3>\n    }\n    @case (4) {\n      <h4\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h4>\n    }\n    @case (5) {\n      <h5\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h5>\n    }\n    @case (6) {\n      <h6\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h6>\n    }\n    @default {\n      <p\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </p>\n    }\n  }\n  @if (message()) {\n    <p class=\"gbt-empty-state__message\">{{ message() }}</p>\n  }\n  <div class=\"gbt-empty-state__action\">\n    <ng-content />\n  </div>\n</div>\n<ng-template #headingText>{{ heading() }}</ng-template>\n",
+		styles: [":host{display:block}.gbt-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:3rem 1.5rem}.gbt-empty-state__illustration{width:6rem;height:6rem;color:var(--text-discret)}.gbt-empty-state__illustration svg{width:100%;height:100%}.gbt-empty-state__heading{font-family:var(--gbt-font-display, var(--font-display));margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.gbt-empty-state__heading:focus{outline:none}.gbt-empty-state__message{margin:0;max-width:32rem;color:var(--text-secondary);font-size:.875rem}.gbt-empty-state__action:empty{display:none}.gbt-empty-state__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:3.25rem;height:3.25rem;border-radius:50%;background:color-mix(in srgb,var(--border-color) 18%,transparent);color:var(--text-secondary);font-size:1.375rem}.gbt-empty-state[data-size=compact]{gap:.25rem;padding:2rem 1.5rem 2.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__illustration{width:4rem;height:4rem;margin-bottom:.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__icon{width:2.5rem;height:2.5rem;margin-bottom:.5rem;font-size:.875rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__heading{font-size:.9375rem;line-height:1.5rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__message{max-width:28rem;font-size:.8125rem;line-height:1.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__action{margin-top:.5rem}.gbt-empty-state[data-tone=error] .gbt-empty-state__icon{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-empty-state[data-tone=error] .gbt-empty-state__illustration{color:var(--color-error-text)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: EmptyState,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-empty-state",
+			standalone: true,
+			imports: [Icon, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"gbt-empty-state\"\n  [attr.data-size]=\"size() === 'default' ? null : size()\"\n  [attr.data-tone]=\"tone() === 'default' ? null : tone()\"\n>\n  @if (illustration()) {\n    <div class=\"gbt-empty-state__illustration\" aria-hidden=\"true\">\n      @switch (illustration()) {\n        @case ('folder') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"16\" y=\"38\" width=\"64\" height=\"40\" rx=\"4\" />\n            <path d=\"M16 38 v-8a4 4 0 0 1 4-4h16l8 8h28a4 4 0 0 1 4 4\" />\n            <rect\n              x=\"34\"\n              y=\"14\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(-8 42 24)\"\n              opacity=\"0.55\"\n            />\n            <rect\n              x=\"50\"\n              y=\"16\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(6 58 26)\"\n              opacity=\"0.55\"\n            />\n          </svg>\n        }\n        @case ('star') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path\n              d=\"M48,18 L55.6,37.5 L76.5,38.7 L60.4,52 L65.6,72.3 L48,61 L30.4,72.3 L35.6,52 L19.5,38.7 L40.4,37.5 Z\"\n            />\n            <path d=\"M78,14 L81,20 L78,26 L75,20 Z\" opacity=\"0.55\" />\n            <path d=\"M16,64 L19,70 L16,76 L13,70 Z\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('checklist') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"24\" y=\"18\" width=\"48\" height=\"64\" rx=\"6\" />\n            <rect x=\"38\" y=\"12\" width=\"20\" height=\"10\" rx=\"3\" />\n            <line x1=\"34\" y1=\"38\" x2=\"62\" y2=\"38\" />\n            <path d=\"M32 50 l4 4 l8-8\" />\n            <line x1=\"46\" y1=\"52\" x2=\"62\" y2=\"52\" />\n            <line x1=\"34\" y1=\"66\" x2=\"62\" y2=\"66\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('merge') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"24\" cy=\"22\" r=\"7\" />\n            <circle cx=\"72\" cy=\"22\" r=\"7\" />\n            <circle cx=\"48\" cy=\"76\" r=\"8\" />\n            <path d=\"M24 29 V50 Q24 69 39 72\" />\n            <path d=\"M72 29 V50 Q72 69 57 72\" />\n          </svg>\n        }\n        @case ('pipeline') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"22\" cy=\"68\" r=\"12\" />\n            <path d=\"M17 60 L29 68 L17 76 Z\" fill=\"currentColor\" stroke=\"none\" />\n            <path d=\"M29 58 L44 38\" />\n            <circle cx=\"50\" cy=\"30\" r=\"10\" />\n            <path d=\"M56 38 L70 54\" />\n            <circle cx=\"76\" cy=\"62\" r=\"10\" />\n          </svg>\n        }\n        @case ('tag') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M18 20 H54 L82 48 L54 76 H18 Q14 76 14 72 V24 Q14 20 18 20 Z\" />\n            <circle cx=\"34\" cy=\"36\" r=\"5\" />\n          </svg>\n        }\n        @case ('book') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M48 26 Q34 16 16 20 V72 Q34 68 48 78 Q62 68 80 72 V20 Q62 16 48 26 Z\" />\n            <line x1=\"24\" y1=\"32\" x2=\"40\" y2=\"30\" />\n            <line x1=\"24\" y1=\"42\" x2=\"40\" y2=\"40\" />\n            <line x1=\"56\" y1=\"30\" x2=\"72\" y2=\"32\" />\n            <line x1=\"56\" y1=\"40\" x2=\"72\" y2=\"42\" />\n          </svg>\n        }\n        @case ('server') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"14\" y=\"16\" width=\"68\" height=\"26\" rx=\"5\" />\n            <rect x=\"14\" y=\"54\" width=\"68\" height=\"26\" rx=\"5\" />\n            <circle cx=\"26\" cy=\"29\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <circle cx=\"26\" cy=\"67\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <line x1=\"38\" y1=\"29\" x2=\"70\" y2=\"29\" opacity=\"0.55\" />\n            <line x1=\"38\" y1=\"67\" x2=\"70\" y2=\"67\" opacity=\"0.55\" />\n          </svg>\n        }\n      }\n    </div>\n  } @else if (icon()) {\n    <div class=\"gbt-empty-state__icon\" aria-hidden=\"true\"><gbt-icon [name]=\"icon()!\" /></div>\n  }\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h1>\n    }\n    @case (2) {\n      <h2\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h2>\n    }\n    @case (3) {\n      <h3\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h3>\n    }\n    @case (4) {\n      <h4\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h4>\n    }\n    @case (5) {\n      <h5\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h5>\n    }\n    @case (6) {\n      <h6\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h6>\n    }\n    @default {\n      <p\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </p>\n    }\n  }\n  @if (message()) {\n    <p class=\"gbt-empty-state__message\">{{ message() }}</p>\n  }\n  <div class=\"gbt-empty-state__action\">\n    <ng-content />\n  </div>\n</div>\n<ng-template #headingText>{{ heading() }}</ng-template>\n",
+			styles: [":host{display:block}.gbt-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:3rem 1.5rem}.gbt-empty-state__illustration{width:6rem;height:6rem;color:var(--text-discret)}.gbt-empty-state__illustration svg{width:100%;height:100%}.gbt-empty-state__heading{font-family:var(--gbt-font-display, var(--font-display));margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.gbt-empty-state__heading:focus{outline:none}.gbt-empty-state__message{margin:0;max-width:32rem;color:var(--text-secondary);font-size:.875rem}.gbt-empty-state__action:empty{display:none}.gbt-empty-state__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:3.25rem;height:3.25rem;border-radius:50%;background:color-mix(in srgb,var(--border-color) 18%,transparent);color:var(--text-secondary);font-size:1.375rem}.gbt-empty-state[data-size=compact]{gap:.25rem;padding:2rem 1.5rem 2.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__illustration{width:4rem;height:4rem;margin-bottom:.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__icon{width:2.5rem;height:2.5rem;margin-bottom:.5rem;font-size:.875rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__heading{font-size:.9375rem;line-height:1.5rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__message{max-width:28rem;font-size:.8125rem;line-height:1.25rem}.gbt-empty-state[data-size=compact] .gbt-empty-state__action{margin-top:.5rem}.gbt-empty-state[data-tone=error] .gbt-empty-state__icon{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-empty-state[data-tone=error] .gbt-empty-state__illustration{color:var(--color-error-text)}\n"]
+		}]
+	}],
+	propDecorators: {
+		illustration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "illustration",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		headingId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingId",
+				required: false
+			}]
+		}],
+		headingFocusable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingFocusable",
+				required: false
+			}]
+		}],
+		headingEl: [{
+			type: i0.ViewChild,
+			args: ["headingEl", { isSignal: true }]
+		}]
+	}
+});
+export { EmptyState };
+
+//# sourceMappingURL=masmarino-gabarit-empty-state.mjs.map

package/fesm2022/masmarino-gabarit-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-empty-state.mjs","names":[],"sources":["../../../projects/gabarit/empty-state/empty-state.ts","../../../projects/gabarit/empty-state/empty-state.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  input,\n  viewChild,\n} from '@angular/core'\nimport { NgTemplateOutlet } from '@angular/common'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type EmptyStateIllustration =\n  'folder' | 'star' | 'checklist' | 'merge' | 'pipeline' | 'tag' | 'book' | 'server'\n\nexport type EmptyStateSize = 'default' | 'compact'\nexport type EmptyStateTone = 'default' | 'error'\nexport type EmptyStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\n@Component({\n  selector: 'gbt-empty-state',\n  standalone: true,\n  imports: [Icon, NgTemplateOutlet],\n  templateUrl: './empty-state.html',\n  styleUrl: './empty-state.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyState {\n  illustration = input<EmptyStateIllustration | null | undefined>(null)\n  heading = input.required<string>()\n  message = input<string>('')\n\n  icon = input<string | null>(null)\n  size = input<EmptyStateSize>('default')\n  tone = input<EmptyStateTone>('default')\n  headingLevel = input<EmptyStateHeadingLevel | null>(null)\n  headingId = input<string | null>(null)\n  headingFocusable = input(false, { transform: booleanAttribute })\n\n  private readonly headingEl = viewChild<ElementRef<HTMLElement>>('headingEl')\n\n  focusHeading(): void {\n    this.headingEl()?.nativeElement.focus()\n  }\n}\n","<div\n  class=\"gbt-empty-state\"\n  [attr.data-size]=\"size() === 'default' ? null : size()\"\n  [attr.data-tone]=\"tone() === 'default' ? null : tone()\"\n>\n  @if (illustration()) {\n    <div class=\"gbt-empty-state__illustration\" aria-hidden=\"true\">\n      @switch (illustration()) {\n        @case ('folder') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"16\" y=\"38\" width=\"64\" height=\"40\" rx=\"4\" />\n            <path d=\"M16 38 v-8a4 4 0 0 1 4-4h16l8 8h28a4 4 0 0 1 4 4\" />\n            <rect\n              x=\"34\"\n              y=\"14\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(-8 42 24)\"\n              opacity=\"0.55\"\n            />\n            <rect\n              x=\"50\"\n              y=\"16\"\n              width=\"16\"\n              height=\"20\"\n              rx=\"2\"\n              transform=\"rotate(6 58 26)\"\n              opacity=\"0.55\"\n            />\n          </svg>\n        }\n        @case ('star') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path\n              d=\"M48,18 L55.6,37.5 L76.5,38.7 L60.4,52 L65.6,72.3 L48,61 L30.4,72.3 L35.6,52 L19.5,38.7 L40.4,37.5 Z\"\n            />\n            <path d=\"M78,14 L81,20 L78,26 L75,20 Z\" opacity=\"0.55\" />\n            <path d=\"M16,64 L19,70 L16,76 L13,70 Z\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('checklist') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"24\" y=\"18\" width=\"48\" height=\"64\" rx=\"6\" />\n            <rect x=\"38\" y=\"12\" width=\"20\" height=\"10\" rx=\"3\" />\n            <line x1=\"34\" y1=\"38\" x2=\"62\" y2=\"38\" />\n            <path d=\"M32 50 l4 4 l8-8\" />\n            <line x1=\"46\" y1=\"52\" x2=\"62\" y2=\"52\" />\n            <line x1=\"34\" y1=\"66\" x2=\"62\" y2=\"66\" opacity=\"0.55\" />\n          </svg>\n        }\n        @case ('merge') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"24\" cy=\"22\" r=\"7\" />\n            <circle cx=\"72\" cy=\"22\" r=\"7\" />\n            <circle cx=\"48\" cy=\"76\" r=\"8\" />\n            <path d=\"M24 29 V50 Q24 69 39 72\" />\n            <path d=\"M72 29 V50 Q72 69 57 72\" />\n          </svg>\n        }\n        @case ('pipeline') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <circle cx=\"22\" cy=\"68\" r=\"12\" />\n            <path d=\"M17 60 L29 68 L17 76 Z\" fill=\"currentColor\" stroke=\"none\" />\n            <path d=\"M29 58 L44 38\" />\n            <circle cx=\"50\" cy=\"30\" r=\"10\" />\n            <path d=\"M56 38 L70 54\" />\n            <circle cx=\"76\" cy=\"62\" r=\"10\" />\n          </svg>\n        }\n        @case ('tag') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M18 20 H54 L82 48 L54 76 H18 Q14 76 14 72 V24 Q14 20 18 20 Z\" />\n            <circle cx=\"34\" cy=\"36\" r=\"5\" />\n          </svg>\n        }\n        @case ('book') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M48 26 Q34 16 16 20 V72 Q34 68 48 78 Q62 68 80 72 V20 Q62 16 48 26 Z\" />\n            <line x1=\"24\" y1=\"32\" x2=\"40\" y2=\"30\" />\n            <line x1=\"24\" y1=\"42\" x2=\"40\" y2=\"40\" />\n            <line x1=\"56\" y1=\"30\" x2=\"72\" y2=\"32\" />\n            <line x1=\"56\" y1=\"40\" x2=\"72\" y2=\"42\" />\n          </svg>\n        }\n        @case ('server') {\n          <svg\n            viewBox=\"0 0 96 96\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"14\" y=\"16\" width=\"68\" height=\"26\" rx=\"5\" />\n            <rect x=\"14\" y=\"54\" width=\"68\" height=\"26\" rx=\"5\" />\n            <circle cx=\"26\" cy=\"29\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <circle cx=\"26\" cy=\"67\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n            <line x1=\"38\" y1=\"29\" x2=\"70\" y2=\"29\" opacity=\"0.55\" />\n            <line x1=\"38\" y1=\"67\" x2=\"70\" y2=\"67\" opacity=\"0.55\" />\n          </svg>\n        }\n      }\n    </div>\n  } @else if (icon()) {\n    <div class=\"gbt-empty-state__icon\" aria-hidden=\"true\"><gbt-icon [name]=\"icon()!\" /></div>\n  }\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h1>\n    }\n    @case (2) {\n      <h2\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h2>\n    }\n    @case (3) {\n      <h3\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h3>\n    }\n    @case (4) {\n      <h4\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h4>\n    }\n    @case (5) {\n      <h5\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h5>\n    }\n    @case (6) {\n      <h6\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </h6>\n    }\n    @default {\n      <p\n        #headingEl\n        class=\"gbt-empty-state__heading\"\n        [attr.id]=\"headingId()\"\n        [attr.tabindex]=\"headingFocusable() ? -1 : null\"\n      >\n        <ng-container *ngTemplateOutlet=\"headingText\" />\n      </p>\n    }\n  }\n  @if (message()) {\n    <p class=\"gbt-empty-state__message\">{{ message() }}</p>\n  }\n  <div class=\"gbt-empty-state__action\">\n    <ng-content />\n  </div>\n</div>\n<ng-template #headingText>{{ heading() }}</ng-template>\n"],"mappings":"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"}