@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-toaster.mjs

@@ -0,0 +1,220 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Injectable, computed, effect, inject, input, output, signal } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextToastId = 0;
+var GbtToastService = class GbtToastService {
+	items = signal([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	timers = /* @__PURE__ */ new Map();
+	toasts = this.items.asReadonly();
+	defaultDuration = signal(5e3, ...ngDevMode ? [{ debugName: "defaultDuration" }] : /* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.clearTimers());
+	}
+	show(message, kind = "success", options = {}) {
+		const id = `gbt-toast-${++nextToastId}`;
+		const duration = options.duration ?? this.defaultDuration();
+		this.items.update((current) => [...current, {
+			id,
+			variant: kind,
+			message,
+			duration
+		}]);
+		if (Number.isFinite(duration) && duration > 0) this.timers.set(id, setTimeout(() => this.dismiss(id), duration));
+		return id;
+	}
+	dismiss(id) {
+		const timer = this.timers.get(id);
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			this.timers.delete(id);
+		}
+		this.items.update((current) => {
+			const next = current.filter((toast) => toast.id !== id);
+			return next.length === current.length ? current : next;
+		});
+	}
+	clear() {
+		this.clearTimers();
+		this.items.set([]);
+	}
+	clearTimers() {
+		for (const timer of this.timers.values()) clearTimeout(timer);
+		this.timers.clear();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtToastService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtToastService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GbtToastService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const DEFAULT_DURATION_MS = 5e3;
+const ASSERTIVE_VARIANTS = /* @__PURE__ */ new Set(["warning", "error"]);
+const VARIANT_ICONS = {
+	success: "check-circle",
+	error: "alert-circle",
+	warning: "alert-triangle",
+	info: "info"
+};
+var Toaster = class Toaster {
+	toasts = input(void 0, ...ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []);
+	position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	service = inject(GbtToastService);
+	timers = /* @__PURE__ */ new Map();
+	items = computed(() => this.toasts() ?? this.service.toasts(), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const list = this.toasts() ?? [];
+			const currentIds = new Set(list.map((toast) => toast.id));
+			for (const [id, timer] of this.timers) if (!currentIds.has(id)) {
+				clearTimeout(timer);
+				this.timers.delete(id);
+			}
+			for (const toast of list) {
+				if (this.timers.has(toast.id)) continue;
+				const duration = toast.duration ?? DEFAULT_DURATION_MS;
+				if (!Number.isFinite(duration) || duration <= 0) continue;
+				this.timers.set(toast.id, setTimeout(() => {
+					this.timers.delete(toast.id);
+					this.dismissed.emit(toast.id);
+				}, duration));
+			}
+		});
+	}
+	ngOnDestroy() {
+		for (const timer of this.timers.values()) clearTimeout(timer);
+		this.timers.clear();
+	}
+	close(id) {
+		this.dismissed.emit(id);
+		if (this.toasts() === void 0) this.service.dismiss(id);
+	}
+	roleFor(variant) {
+		return ASSERTIVE_VARIANTS.has(variant) ? "alert" : "status";
+	}
+	iconFor(variant) {
+		return VARIANT_ICONS[variant];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Toaster,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Toaster,
+		isStandalone: true,
+		selector: "gbt-toaster",
+		inputs: {
+			toasts: {
+				classPropertyName: "toasts",
+				publicName: "toasts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		ngImport: i0,
+		template: "<div class=\"gbt-toaster\" [attr.data-position]=\"position()\">\n  @for (toast of items(); track toast.id) {\n    <div\n      class=\"gbt-toaster__item\"\n      [attr.data-variant]=\"toast.variant\"\n      [attr.role]=\"roleFor(toast.variant)\"\n      aria-atomic=\"true\"\n    >\n      <span class=\"gbt-toaster__icon\">\n        <gbt-icon [name]=\"iconFor(toast.variant)\" aria-hidden=\"true\" />\n      </span>\n      <p class=\"gbt-toaster__message\">{{ toast.message }}</p>\n      <button\n        type=\"button\"\n        class=\"gbt-toaster__close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close(toast.id)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  }\n</div>\n",
+		styles: [".gbt-toaster{position:fixed;z-index:1300;display:flex;flex-direction:column;gap:.5rem;max-width:min(90vw,360px);pointer-events:none}.gbt-toaster[data-position=top-right]{top:1rem;right:1rem;align-items:flex-end}.gbt-toaster[data-position=top-left]{top:1rem;left:1rem;align-items:flex-start}.gbt-toaster[data-position=top-center]{top:1rem;left:50%;align-items:center;transform:translate(-50%)}.gbt-toaster[data-position=bottom-right]{right:1rem;bottom:1rem;flex-direction:column-reverse;align-items:flex-end}.gbt-toaster[data-position=bottom-left]{bottom:1rem;left:1rem;flex-direction:column-reverse;align-items:flex-start}.gbt-toaster[data-position=bottom-center]{bottom:1rem;left:50%;flex-direction:column-reverse;align-items:center;transform:translate(-50%)}.gbt-toaster__item{box-sizing:border-box;display:flex;align-items:flex-start;gap:.625rem;width:100%;padding:.75rem 1rem;pointer-events:auto;background:var(--bg-inverse);border:none;border-radius:var(--site-border-radius);box-shadow:var(--site-shadow-lg);animation:gbt-toaster-in var(--site-transition-base)}.gbt-toaster__item[data-variant=success] .gbt-toaster__icon{background:var(--color-success-vivid-base)}.gbt-toaster__item[data-variant=warning] .gbt-toaster__icon{background:var(--color-warning-vivid-base)}.gbt-toaster__item[data-variant=error] .gbt-toaster__icon{background:var(--color-error-vivid-base)}.gbt-toaster__item[data-variant=info] .gbt-toaster__icon{background:var(--color-info-vivid-base)}.gbt-toaster__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;margin-top:.0625rem;color:var(--text-on-color);border-radius:50%}.gbt-toaster__icon gbt-icon{width:1.125em;height:1.125em}.gbt-toaster__message{flex:1 1 auto;margin:.3125rem 0;color:var(--text-on-color);font-size:.875rem;line-height:1.4}.gbt-toaster__close{position:relative;display:inline-flex;flex:none;align-self:flex-start;margin-top:.3125rem;background:none;border:none;border-radius:50%;color:var(--text-on-color);opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-toaster__close:hover,.gbt-toaster__close:focus-visible{opacity:1}.gbt-toaster__close:focus-visible{outline:2px solid var(--text-on-color);outline-offset:2px}.gbt-toaster__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}@keyframes gbt-toaster-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\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: Toaster,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-toaster",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-toaster\" [attr.data-position]=\"position()\">\n  @for (toast of items(); track toast.id) {\n    <div\n      class=\"gbt-toaster__item\"\n      [attr.data-variant]=\"toast.variant\"\n      [attr.role]=\"roleFor(toast.variant)\"\n      aria-atomic=\"true\"\n    >\n      <span class=\"gbt-toaster__icon\">\n        <gbt-icon [name]=\"iconFor(toast.variant)\" aria-hidden=\"true\" />\n      </span>\n      <p class=\"gbt-toaster__message\">{{ toast.message }}</p>\n      <button\n        type=\"button\"\n        class=\"gbt-toaster__close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close(toast.id)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  }\n</div>\n",
+			styles: [".gbt-toaster{position:fixed;z-index:1300;display:flex;flex-direction:column;gap:.5rem;max-width:min(90vw,360px);pointer-events:none}.gbt-toaster[data-position=top-right]{top:1rem;right:1rem;align-items:flex-end}.gbt-toaster[data-position=top-left]{top:1rem;left:1rem;align-items:flex-start}.gbt-toaster[data-position=top-center]{top:1rem;left:50%;align-items:center;transform:translate(-50%)}.gbt-toaster[data-position=bottom-right]{right:1rem;bottom:1rem;flex-direction:column-reverse;align-items:flex-end}.gbt-toaster[data-position=bottom-left]{bottom:1rem;left:1rem;flex-direction:column-reverse;align-items:flex-start}.gbt-toaster[data-position=bottom-center]{bottom:1rem;left:50%;flex-direction:column-reverse;align-items:center;transform:translate(-50%)}.gbt-toaster__item{box-sizing:border-box;display:flex;align-items:flex-start;gap:.625rem;width:100%;padding:.75rem 1rem;pointer-events:auto;background:var(--bg-inverse);border:none;border-radius:var(--site-border-radius);box-shadow:var(--site-shadow-lg);animation:gbt-toaster-in var(--site-transition-base)}.gbt-toaster__item[data-variant=success] .gbt-toaster__icon{background:var(--color-success-vivid-base)}.gbt-toaster__item[data-variant=warning] .gbt-toaster__icon{background:var(--color-warning-vivid-base)}.gbt-toaster__item[data-variant=error] .gbt-toaster__icon{background:var(--color-error-vivid-base)}.gbt-toaster__item[data-variant=info] .gbt-toaster__icon{background:var(--color-info-vivid-base)}.gbt-toaster__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;margin-top:.0625rem;color:var(--text-on-color);border-radius:50%}.gbt-toaster__icon gbt-icon{width:1.125em;height:1.125em}.gbt-toaster__message{flex:1 1 auto;margin:.3125rem 0;color:var(--text-on-color);font-size:.875rem;line-height:1.4}.gbt-toaster__close{position:relative;display:inline-flex;flex:none;align-self:flex-start;margin-top:.3125rem;background:none;border:none;border-radius:50%;color:var(--text-on-color);opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-toaster__close:hover,.gbt-toaster__close:focus-visible{opacity:1}.gbt-toaster__close:focus-visible{outline:2px solid var(--text-on-color);outline-offset:2px}.gbt-toaster__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}@keyframes gbt-toaster-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toasts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toasts",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+export { GbtToastService, Toaster };
+
+//# sourceMappingURL=masmarino-gabarit-toaster.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-toaster.mjs","names":[],"sources":["../../../projects/gabarit/toaster/toast.service.ts","../../../projects/gabarit/toaster/toaster.ts","../../../projects/gabarit/toaster/toaster.html"],"sourcesContent":["import { DestroyRef, Injectable, inject, signal } from '@angular/core'\nimport type { ToastItem, ToastVariant } from './toaster'\n\nexport type GbtToastKind = ToastVariant\n\nexport interface GbtToastOptions {\n  duration?: number\n}\n\nlet nextToastId = 0\n\n@Injectable({ providedIn: 'root' })\nexport class GbtToastService {\n  private readonly items = signal<ToastItem[]>([])\n  private readonly timers = new Map<string, ReturnType<typeof setTimeout>>()\n\n  readonly toasts = this.items.asReadonly()\n\n  readonly defaultDuration = signal(5000)\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => this.clearTimers())\n  }\n\n  show(message: string, kind: GbtToastKind = 'success', options: GbtToastOptions = {}): string {\n    const id = `gbt-toast-${++nextToastId}`\n    const duration = options.duration ?? this.defaultDuration()\n    this.items.update((current) => [...current, { id, variant: kind, message, duration }])\n\n    if (Number.isFinite(duration) && duration > 0) {\n      this.timers.set(\n        id,\n        setTimeout(() => this.dismiss(id), duration),\n      )\n    }\n    return id\n  }\n\n  dismiss(id: string): void {\n    const timer = this.timers.get(id)\n    if (timer !== undefined) {\n      clearTimeout(timer)\n      this.timers.delete(id)\n    }\n    this.items.update((current) => {\n      const next = current.filter((toast) => toast.id !== id)\n      return next.length === current.length ? current : next\n    })\n  }\n\n  clear(): void {\n    this.clearTimers()\n    this.items.set([])\n  }\n\n  private clearTimers(): void {\n    for (const timer of this.timers.values()) {\n      clearTimeout(timer)\n    }\n    this.timers.clear()\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  OnDestroy,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { GbtToastService } from './toast.service'\n\nconst DEFAULT_DURATION_MS = 5000\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info'\n\nexport type ToasterPosition =\n  'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'\n\nexport interface ToastItem {\n  id: string\n  variant: ToastVariant\n  message: string\n  duration?: number\n}\n\nconst ASSERTIVE_VARIANTS: ReadonlySet<ToastVariant> = new Set(['warning', 'error'])\n\nconst VARIANT_ICONS: Record<ToastVariant, string> = {\n  success: 'check-circle',\n  error: 'alert-circle',\n  warning: 'alert-triangle',\n  info: 'info',\n}\n\n@Component({\n  selector: 'gbt-toaster',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './toaster.html',\n  styleUrl: './toaster.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Toaster implements OnDestroy {\n  toasts = input<ToastItem[] | undefined>(undefined)\n  position = input<ToasterPosition>('bottom-right')\n  closeLabel = input<string>('Close')\n\n  dismissed = output<string>()\n\n  private readonly service = inject(GbtToastService)\n  private readonly timers = new Map<string, ReturnType<typeof setTimeout>>()\n\n  protected readonly items = computed(() => this.toasts() ?? this.service.toasts())\n\n  constructor() {\n    effect(() => {\n      const explicit = this.toasts()\n      const list = explicit ?? []\n      const currentIds = new Set(list.map((toast) => toast.id))\n\n      for (const [id, timer] of this.timers) {\n        if (!currentIds.has(id)) {\n          clearTimeout(timer)\n          this.timers.delete(id)\n        }\n      }\n\n      for (const toast of list) {\n        if (this.timers.has(toast.id)) {\n          continue\n        }\n        const duration = toast.duration ?? DEFAULT_DURATION_MS\n        if (!Number.isFinite(duration) || duration <= 0) {\n          continue\n        }\n        this.timers.set(\n          toast.id,\n          setTimeout(() => {\n            this.timers.delete(toast.id)\n            this.dismissed.emit(toast.id)\n          }, duration),\n        )\n      }\n    })\n  }\n\n  ngOnDestroy(): void {\n    for (const timer of this.timers.values()) {\n      clearTimeout(timer)\n    }\n    this.timers.clear()\n  }\n\n  protected close(id: string): void {\n    this.dismissed.emit(id)\n    if (this.toasts() === undefined) {\n      this.service.dismiss(id)\n    }\n  }\n\n  protected roleFor(variant: ToastVariant): 'alert' | 'status' {\n    return ASSERTIVE_VARIANTS.has(variant) ? 'alert' : 'status'\n  }\n\n  protected iconFor(variant: ToastVariant): string {\n    return VARIANT_ICONS[variant]\n  }\n}\n","<div class=\"gbt-toaster\" [attr.data-position]=\"position()\">\n  @for (toast of items(); track toast.id) {\n    <div\n      class=\"gbt-toaster__item\"\n      [attr.data-variant]=\"toast.variant\"\n      [attr.role]=\"roleFor(toast.variant)\"\n      aria-atomic=\"true\"\n    >\n      <span class=\"gbt-toaster__icon\">\n        <gbt-icon [name]=\"iconFor(toast.variant)\" aria-hidden=\"true\" />\n      </span>\n      <p class=\"gbt-toaster__message\">{{ toast.message }}</p>\n      <button\n        type=\"button\"\n        class=\"gbt-toaster__close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close(toast.id)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-tooltip.mjs

@@ -0,0 +1,185 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input, signal } from "@angular/core";
+import { followPageScroll } from "@masmarino/gabarit/floating-panel";
+const SHOW_DELAY_MS = 400;
+const FADE_MS = 120;
+const GAP_PX = 8;
+let nextId = 0;
+var Tooltip = class Tooltip {
+	elementRef = inject(ElementRef);
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	position = input("top", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	tooltipId = `gbt-tooltip-${++nextId}`;
+	visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	closing = signal(false, ...ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []);
+	coords = signal(null, ...ngDevMode ? [{ debugName: "coords" }] : /* istanbul ignore next */ []);
+	showTimer = null;
+	hideTimer = null;
+	onMouseEnter() {
+		this.showTimer = setTimeout(() => {
+			this.showTimer = null;
+			this.show();
+		}, SHOW_DELAY_MS);
+	}
+	onFocusIn() {
+		this.show();
+	}
+	show() {
+		if (this.hideTimer !== null) {
+			clearTimeout(this.hideTimer);
+			this.hideTimer = null;
+		}
+		this.closing.set(false);
+		this.updatePosition();
+		this.visible.set(true);
+	}
+	constructor() {
+		followPageScroll(() => this.updatePosition());
+	}
+	updatePosition() {
+		const rect = this.elementRef.nativeElement.getBoundingClientRect();
+		switch (this.position()) {
+			case "top":
+				this.coords.set({
+					top: rect.top - GAP_PX,
+					left: rect.left + rect.width / 2
+				});
+				break;
+			case "bottom":
+				this.coords.set({
+					top: rect.bottom + GAP_PX,
+					left: rect.left + rect.width / 2
+				});
+				break;
+			case "left":
+				this.coords.set({
+					top: rect.top + rect.height / 2,
+					left: rect.left - GAP_PX
+				});
+				break;
+			case "right": this.coords.set({
+				top: rect.top + rect.height / 2,
+				left: rect.right + GAP_PX
+			});
+		}
+	}
+	hide() {
+		if (this.showTimer !== null) {
+			clearTimeout(this.showTimer);
+			this.showTimer = null;
+		}
+		if (!this.visible() || this.closing()) return;
+		this.closing.set(true);
+		this.hideTimer = setTimeout(() => {
+			this.hideTimer = null;
+			this.closing.set(false);
+			this.visible.set(false);
+		}, FADE_MS);
+	}
+	ngOnDestroy() {
+		if (this.showTimer !== null) {
+			clearTimeout(this.showTimer);
+			this.showTimer = null;
+		}
+		if (this.hideTimer !== null) {
+			clearTimeout(this.hideTimer);
+			this.hideTimer = null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Tooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Tooltip,
+		isStandalone: true,
+		selector: "gbt-tooltip",
+		inputs: {
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"mouseenter": "onMouseEnter()",
+				"mouseleave": "hide()",
+				"focusin": "onFocusIn()",
+				"focusout": "hide()",
+				"keydown.escape": "hide()",
+				"window:resize": "updatePosition()"
+			},
+			classAttribute: "gbt-tooltip-host"
+		},
+		exportAs: ["gbtTooltip"],
+		ngImport: i0,
+		template: "<ng-content />\n@if (visible() && coords(); as pos) {\n  <span\n    class=\"gbt-tooltip__bubble\"\n    [class.gbt-tooltip__bubble--leaving]=\"closing()\"\n    role=\"tooltip\"\n    [id]=\"tooltipId\"\n    [attr.data-position]=\"position()\"\n    [style.top.px]=\"pos.top\"\n    [style.left.px]=\"pos.left\"\n  >\n    {{ text() }}\n  </span>\n}\n",
+		styles: [".gbt-tooltip-host{display:inline-block}.gbt-tooltip__bubble{position:fixed;z-index:1100;max-width:240px;padding:.375rem .625rem;background:var(--bg-inverse);color:var(--text-on-color);text-align:center;white-space:normal;border:1px solid rgba(255,255,255,.15);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-md);font-size:.8125rem;line-height:1.3;pointer-events:none}.gbt-tooltip__bubble[data-position=top]{transform:translate(-50%,-100%)}.gbt-tooltip__bubble[data-position=bottom]{transform:translate(-50%)}.gbt-tooltip__bubble[data-position=left]{transform:translate(-100%,-50%)}.gbt-tooltip__bubble[data-position=right]{transform:translateY(-50%)}.gbt-tooltip__bubble{animation:gbt-tooltip-fade-in .12s ease-out}.gbt-tooltip__bubble.gbt-tooltip__bubble--leaving{animation:gbt-tooltip-fade-out .12s ease-in forwards}@keyframes gbt-tooltip-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-tooltip-fade-out{0%{opacity:1}to{opacity:0}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Tooltip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tooltip",
+			standalone: true,
+			exportAs: "gbtTooltip",
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "gbt-tooltip-host",
+				"(mouseenter)": "onMouseEnter()",
+				"(mouseleave)": "hide()",
+				"(focusin)": "onFocusIn()",
+				"(focusout)": "hide()",
+				"(keydown.escape)": "hide()",
+				"(window:resize)": "updatePosition()"
+			},
+			template: "<ng-content />\n@if (visible() && coords(); as pos) {\n  <span\n    class=\"gbt-tooltip__bubble\"\n    [class.gbt-tooltip__bubble--leaving]=\"closing()\"\n    role=\"tooltip\"\n    [id]=\"tooltipId\"\n    [attr.data-position]=\"position()\"\n    [style.top.px]=\"pos.top\"\n    [style.left.px]=\"pos.left\"\n  >\n    {{ text() }}\n  </span>\n}\n",
+			styles: [".gbt-tooltip-host{display:inline-block}.gbt-tooltip__bubble{position:fixed;z-index:1100;max-width:240px;padding:.375rem .625rem;background:var(--bg-inverse);color:var(--text-on-color);text-align:center;white-space:normal;border:1px solid rgba(255,255,255,.15);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-md);font-size:.8125rem;line-height:1.3;pointer-events:none}.gbt-tooltip__bubble[data-position=top]{transform:translate(-50%,-100%)}.gbt-tooltip__bubble[data-position=bottom]{transform:translate(-50%)}.gbt-tooltip__bubble[data-position=left]{transform:translate(-100%,-50%)}.gbt-tooltip__bubble[data-position=right]{transform:translateY(-50%)}.gbt-tooltip__bubble{animation:gbt-tooltip-fade-in .12s ease-out}.gbt-tooltip__bubble.gbt-tooltip__bubble--leaving{animation:gbt-tooltip-fade-out .12s ease-in forwards}@keyframes gbt-tooltip-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-tooltip-fade-out{0%{opacity:1}to{opacity:0}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}]
+	}
+});
+export { Tooltip };
+
+//# sourceMappingURL=masmarino-gabarit-tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-tooltip.mjs","names":[],"sources":["../../../projects/gabarit/tooltip/tooltip.ts","../../../projects/gabarit/tooltip/tooltip.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  inject,\n  input,\n  signal,\n} from '@angular/core'\nimport { followPageScroll } from '@masmarino/gabarit/floating-panel'\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\ninterface TooltipCoords {\n  top: number\n  left: number\n}\n\nconst SHOW_DELAY_MS = 400\nconst FADE_MS = 120\nconst GAP_PX = 8\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-tooltip',\n  standalone: true,\n  exportAs: 'gbtTooltip',\n  imports: [],\n  templateUrl: './tooltip.html',\n  styleUrl: './tooltip.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'gbt-tooltip-host',\n    '(mouseenter)': 'onMouseEnter()',\n    '(mouseleave)': 'hide()',\n    '(focusin)': 'onFocusIn()',\n    '(focusout)': 'hide()',\n    '(keydown.escape)': 'hide()',\n    '(window:resize)': 'updatePosition()',\n  },\n})\nexport class Tooltip implements OnDestroy {\n  private readonly elementRef = inject(ElementRef<HTMLElement>)\n\n  text = input.required<string>()\n  position = input<TooltipPosition>('top')\n\n  readonly tooltipId = `gbt-tooltip-${++nextId}`\n\n  protected readonly visible = signal(false)\n  protected readonly closing = signal(false)\n  protected readonly coords = signal<TooltipCoords | null>(null)\n\n  private showTimer: ReturnType<typeof setTimeout> | null = null\n  private hideTimer: ReturnType<typeof setTimeout> | null = null\n\n  protected onMouseEnter(): void {\n    this.showTimer = setTimeout(() => {\n      this.showTimer = null\n      this.show()\n    }, SHOW_DELAY_MS)\n  }\n\n  protected onFocusIn(): void {\n    this.show()\n  }\n\n  private show(): void {\n    if (this.hideTimer !== null) {\n      clearTimeout(this.hideTimer)\n      this.hideTimer = null\n    }\n    this.closing.set(false)\n    this.updatePosition()\n    this.visible.set(true)\n  }\n\n  constructor() {\n    followPageScroll(() => this.updatePosition())\n  }\n\n  protected updatePosition(): void {\n    const rect = this.elementRef.nativeElement.getBoundingClientRect()\n    switch (this.position()) {\n      case 'top':\n        this.coords.set({ top: rect.top - GAP_PX, left: rect.left + rect.width / 2 })\n        break\n      case 'bottom':\n        this.coords.set({ top: rect.bottom + GAP_PX, left: rect.left + rect.width / 2 })\n        break\n      case 'left':\n        this.coords.set({ top: rect.top + rect.height / 2, left: rect.left - GAP_PX })\n        break\n      case 'right':\n        this.coords.set({ top: rect.top + rect.height / 2, left: rect.right + GAP_PX })\n        break\n    }\n  }\n\n  protected hide(): void {\n    if (this.showTimer !== null) {\n      clearTimeout(this.showTimer)\n      this.showTimer = null\n    }\n    if (!this.visible() || this.closing()) return\n    this.closing.set(true)\n    this.hideTimer = setTimeout(() => {\n      this.hideTimer = null\n      this.closing.set(false)\n      this.visible.set(false)\n    }, FADE_MS)\n  }\n\n  ngOnDestroy(): void {\n    if (this.showTimer !== null) {\n      clearTimeout(this.showTimer)\n      this.showTimer = null\n    }\n    if (this.hideTimer !== null) {\n      clearTimeout(this.hideTimer)\n      this.hideTimer = null\n    }\n  }\n}\n","<ng-content />\n@if (visible() && coords(); as pos) {\n  <span\n    class=\"gbt-tooltip__bubble\"\n    [class.gbt-tooltip__bubble--leaving]=\"closing()\"\n    role=\"tooltip\"\n    [id]=\"tooltipId\"\n    [attr.data-position]=\"position()\"\n    [style.top.px]=\"pos.top\"\n    [style.left.px]=\"pos.left\"\n  >\n    {{ text() }}\n  </span>\n}\n"],"mappings":"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"}