@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-nav-tabs.mjs

@@ -0,0 +1,332 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, InjectionToken, afterEveryRender, afterRenderEffect, booleanAttribute, computed, contentChildren, inject, input, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+import { NgTemplateOutlet } from "@angular/common";
+const GBT_NAV_TABS = new InjectionToken("GBT_NAV_TABS");
+var NavTab = class NavTab {
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
+	nav = inject(GBT_NAV_TABS, { optional: true });
+	label = viewChild("label", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	orientation = computed(() => this.nav?.orientation() ?? "horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	hasBadge = computed(() => {
+		const badge = this.badge();
+		return badge !== null && badge !== void 0 && badge !== "";
+	}, ...ngDevMode ? [{ debugName: "hasBadge" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterEveryRender({ write: () => {
+			const label = this.label()?.nativeElement;
+			const text = label?.textContent?.trim() ?? "";
+			if (label && label.getAttribute("data-label") !== text) label.setAttribute("data-label", text);
+		} });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavTab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavTab,
+		isStandalone: true,
+		selector: "a[gbtNavTab]",
+		inputs: {
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badge: {
+				classPropertyName: "badge",
+				publicName: "badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.aria-current": "active() ? \"page\" : null",
+				"attr.data-active": "active() ? \"\" : null",
+				"attr.data-orientation": "orientation()"
+			},
+			classAttribute: "gbt-nav-tab"
+		},
+		viewQueries: [{
+			propertyName: "label",
+			first: true,
+			predicate: ["label"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (icon(); as name) {\n  <gbt-icon class=\"gbt-nav-tab__icon\" [name]=\"name\" />\n}\n<span #label class=\"gbt-nav-tab__label\"><ng-content /></span>\n@if (hasBadge()) {\n  &ngsp;<span class=\"gbt-nav-tab__badge\">{{ badge() }}</span>\n}\n",
+		styles: [":host{position:relative;display:flex;align-items:center;gap:.625rem;min-width:0;box-sizing:border-box;color:var(--text-secondary);font-size:.875rem;line-height:1.4;text-decoration:none;transition:background-color var(--site-transition-fast),border-color var(--site-transition-fast),color var(--site-transition-fast)}:host(:hover){color:var(--text-primary)}:host(:focus-visible){outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-nav-tab__icon{width:1rem;height:1rem;color:var(--text-secondary);transition:color var(--site-transition-fast)}:host(:hover) .gbt-nav-tab__icon{color:var(--text-primary)}:host([data-active]) .gbt-nav-tab__icon{color:var(--primary)}.gbt-nav-tab__label{min-width:0}.gbt-nav-tab__badge{flex:none;min-width:1.25rem;box-sizing:border-box;padding:0 .375rem;border-radius:var(--gbt-radius-badge, 3px);background:color-mix(in srgb,var(--border-color) 14%,transparent);box-shadow:inset 0 0 0 1px var(--gbt-hairline);color:var(--text-primary);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25rem;text-align:center}:host([data-active]) .gbt-nav-tab__badge{background:var(--primary);box-shadow:none;color:var(--text-on-primary)}:host([data-orientation=vertical]){flex:none;min-height:36px;padding:.4375rem .75rem;border-radius:var(--site-border-radius-sm);border-bottom:0;white-space:normal}:host([data-orientation=vertical]:hover){background:var(--bg-hover)}:host([data-orientation=vertical]) .gbt-nav-tab__label{flex:1;overflow-wrap:anywhere}:host([data-orientation=vertical][data-active]),:host([data-orientation=vertical][data-active]:hover){background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text-primary);font-weight:600}:host([data-orientation=vertical][data-active]):before{content:\"\";position:absolute;top:50%;left:0;width:3px;height:1.125rem;border-radius:0 3px 3px 0;background:var(--primary);transform:translateY(-50%)}:host([data-orientation=horizontal]){flex:none;gap:.5rem;min-height:40px;padding:.5rem .75rem;border-radius:0;border-bottom:2px solid transparent;background:none;font-weight:500;white-space:nowrap}:host([data-orientation=horizontal]:hover){border-bottom-color:var(--gbt-card-border);background:none}:host([data-orientation=horizontal]:focus-visible){border-radius:var(--site-border-radius-sm) var(--site-border-radius-sm) 0 0}:host([data-orientation=horizontal]) .gbt-nav-tab__label{flex:none;display:inline-flex;flex-direction:column;overflow-wrap:normal}:host([data-orientation=horizontal]) .gbt-nav-tab__label:after{content:attr(data-label);content:attr(data-label)/\"\";height:0;overflow:hidden;font-weight:600;visibility:hidden}:host([data-orientation=horizontal][data-active]),:host([data-orientation=horizontal][data-active]:hover){border-bottom-color:var(--primary);background:none;color:var(--text-primary);font-weight:600}:host([data-orientation=horizontal][data-active]):before{content:none}@container gbt-page-layout (max-width: 768px){:host([data-orientation=vertical]){flex:none;gap:.5rem;min-height:40px;padding:.5rem .75rem;border-radius:0;border-bottom:2px solid transparent;background:none;font-weight:500;white-space:nowrap}:host([data-orientation=vertical]:hover){border-bottom-color:var(--gbt-card-border);background:none}:host([data-orientation=vertical]:focus-visible){border-radius:var(--site-border-radius-sm) var(--site-border-radius-sm) 0 0}:host([data-orientation=vertical]) .gbt-nav-tab__label{flex:none;display:inline-flex;flex-direction:column;overflow-wrap:normal}:host([data-orientation=vertical]) .gbt-nav-tab__label:after{content:attr(data-label);content:attr(data-label)/\"\";height:0;overflow:hidden;font-weight:600;visibility:hidden}:host([data-orientation=vertical][data-active]),:host([data-orientation=vertical][data-active]:hover){border-bottom-color:var(--primary);background:none;color:var(--text-primary);font-weight:600}:host([data-orientation=vertical][data-active]):before{content:none}}@media(pointer:coarse){:host([data-orientation=vertical]),:host([data-orientation=horizontal]){min-height:44px}}@media(prefers-reduced-motion:reduce){:host,.gbt-nav-tab__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: NavTab,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[gbtNavTab]",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "gbt-nav-tab",
+				"[attr.aria-current]": "active() ? \"page\" : null",
+				"[attr.data-active]": "active() ? \"\" : null",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: "@if (icon(); as name) {\n  <gbt-icon class=\"gbt-nav-tab__icon\" [name]=\"name\" />\n}\n<span #label class=\"gbt-nav-tab__label\"><ng-content /></span>\n@if (hasBadge()) {\n  &ngsp;<span class=\"gbt-nav-tab__badge\">{{ badge() }}</span>\n}\n",
+			styles: [":host{position:relative;display:flex;align-items:center;gap:.625rem;min-width:0;box-sizing:border-box;color:var(--text-secondary);font-size:.875rem;line-height:1.4;text-decoration:none;transition:background-color var(--site-transition-fast),border-color var(--site-transition-fast),color var(--site-transition-fast)}:host(:hover){color:var(--text-primary)}:host(:focus-visible){outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-nav-tab__icon{width:1rem;height:1rem;color:var(--text-secondary);transition:color var(--site-transition-fast)}:host(:hover) .gbt-nav-tab__icon{color:var(--text-primary)}:host([data-active]) .gbt-nav-tab__icon{color:var(--primary)}.gbt-nav-tab__label{min-width:0}.gbt-nav-tab__badge{flex:none;min-width:1.25rem;box-sizing:border-box;padding:0 .375rem;border-radius:var(--gbt-radius-badge, 3px);background:color-mix(in srgb,var(--border-color) 14%,transparent);box-shadow:inset 0 0 0 1px var(--gbt-hairline);color:var(--text-primary);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25rem;text-align:center}:host([data-active]) .gbt-nav-tab__badge{background:var(--primary);box-shadow:none;color:var(--text-on-primary)}:host([data-orientation=vertical]){flex:none;min-height:36px;padding:.4375rem .75rem;border-radius:var(--site-border-radius-sm);border-bottom:0;white-space:normal}:host([data-orientation=vertical]:hover){background:var(--bg-hover)}:host([data-orientation=vertical]) .gbt-nav-tab__label{flex:1;overflow-wrap:anywhere}:host([data-orientation=vertical][data-active]),:host([data-orientation=vertical][data-active]:hover){background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--text-primary);font-weight:600}:host([data-orientation=vertical][data-active]):before{content:\"\";position:absolute;top:50%;left:0;width:3px;height:1.125rem;border-radius:0 3px 3px 0;background:var(--primary);transform:translateY(-50%)}:host([data-orientation=horizontal]){flex:none;gap:.5rem;min-height:40px;padding:.5rem .75rem;border-radius:0;border-bottom:2px solid transparent;background:none;font-weight:500;white-space:nowrap}:host([data-orientation=horizontal]:hover){border-bottom-color:var(--gbt-card-border);background:none}:host([data-orientation=horizontal]:focus-visible){border-radius:var(--site-border-radius-sm) var(--site-border-radius-sm) 0 0}:host([data-orientation=horizontal]) .gbt-nav-tab__label{flex:none;display:inline-flex;flex-direction:column;overflow-wrap:normal}:host([data-orientation=horizontal]) .gbt-nav-tab__label:after{content:attr(data-label);content:attr(data-label)/\"\";height:0;overflow:hidden;font-weight:600;visibility:hidden}:host([data-orientation=horizontal][data-active]),:host([data-orientation=horizontal][data-active]:hover){border-bottom-color:var(--primary);background:none;color:var(--text-primary);font-weight:600}:host([data-orientation=horizontal][data-active]):before{content:none}@container gbt-page-layout (max-width: 768px){:host([data-orientation=vertical]){flex:none;gap:.5rem;min-height:40px;padding:.5rem .75rem;border-radius:0;border-bottom:2px solid transparent;background:none;font-weight:500;white-space:nowrap}:host([data-orientation=vertical]:hover){border-bottom-color:var(--gbt-card-border);background:none}:host([data-orientation=vertical]:focus-visible){border-radius:var(--site-border-radius-sm) var(--site-border-radius-sm) 0 0}:host([data-orientation=vertical]) .gbt-nav-tab__label{flex:none;display:inline-flex;flex-direction:column;overflow-wrap:normal}:host([data-orientation=vertical]) .gbt-nav-tab__label:after{content:attr(data-label);content:attr(data-label)/\"\";height:0;overflow:hidden;font-weight:600;visibility:hidden}:host([data-orientation=vertical][data-active]),:host([data-orientation=vertical][data-active]:hover){border-bottom-color:var(--primary);background:none;color:var(--text-primary);font-weight:600}:host([data-orientation=vertical][data-active]):before{content:none}}@media(pointer:coarse){:host([data-orientation=vertical]),:host([data-orientation=horizontal]){min-height:44px}}@media(prefers-reduced-motion:reduce){:host,.gbt-nav-tab__icon{transition:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.ViewChild,
+			args: ["label", { isSignal: true }]
+		}]
+	}
+});
+var NavTabs = class NavTabs {
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	landmark = input(true, {
+		...ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	tabs = contentChildren(NavTab, {
+		...ngDevMode ? { debugName: "tabs" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	hiddenBefore = signal(false, ...ngDevMode ? [{ debugName: "hiddenBefore" }] : /* istanbul ignore next */ []);
+	hiddenAfter = signal(false, ...ngDevMode ? [{ debugName: "hiddenAfter" }] : /* istanbul ignore next */ []);
+	updateOverflow() {
+		const list = this.list()?.nativeElement;
+		if (!list) return;
+		const hidden = list.scrollWidth - list.clientWidth;
+		this.hiddenBefore.set(hidden > 1 && list.scrollLeft > 1);
+		this.hiddenAfter.set(hidden > 1 && list.scrollLeft < hidden - 1);
+	}
+	constructor() {
+		afterRenderEffect({ write: () => {
+			this.tabs().forEach((tab) => tab.active());
+			const list = this.list()?.nativeElement;
+			if (!list) return;
+			const active = list.querySelector("[aria-current=\"page\"]");
+			if (active && list.scrollWidth > list.clientWidth) {
+				const start = active.offsetLeft;
+				const end = start + active.offsetWidth;
+				const glimpse = 40;
+				if (start - glimpse < list.scrollLeft) list.scrollLeft = Math.max(0, start - glimpse);
+				else if (end + glimpse > list.scrollLeft + list.clientWidth) list.scrollLeft = end + glimpse - list.clientWidth;
+			}
+			this.updateOverflow();
+		} });
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver(() => this.updateOverflow());
+			const observed = /* @__PURE__ */ new Set();
+			afterRenderEffect({ write: () => {
+				this.tabs();
+				const list = this.list()?.nativeElement;
+				if (!list) return;
+				const wanted = /* @__PURE__ */ new Set([list, ...Array.from(list.children)]);
+				for (const element of observed) if (!wanted.has(element)) {
+					observer.unobserve(element);
+					observed.delete(element);
+				}
+				for (const element of wanted) if (!observed.has(element)) {
+					observer.observe(element);
+					observed.add(element);
+				}
+			} });
+			inject(DestroyRef).onDestroy(() => observer.disconnect());
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavTabs,
+		isStandalone: true,
+		selector: "gbt-nav-tabs",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			landmark: {
+				classPropertyName: "landmark",
+				publicName: "landmark",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: GBT_NAV_TABS,
+			useExisting: NavTabs
+		}],
+		queries: [{
+			propertyName: "tabs",
+			predicate: NavTab,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (landmark()) {\n  <nav\n    class=\"gbt-nav-tabs\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </nav>\n} @else {\n  <div class=\"gbt-nav-tabs\" [attr.data-orientation]=\"orientation()\">\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </div>\n}\n\n<ng-template #links>\n  <div\n    #list\n    class=\"gbt-nav-tabs__list\"\n    [attr.data-hidden-before]=\"hiddenBefore() ? '' : null\"\n    [attr.data-hidden-after]=\"hiddenAfter() ? '' : null\"\n    (scroll)=\"updateOverflow()\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n",
+		styles: [":host{display:block;min-width:0}.gbt-nav-tabs{min-width:0}.gbt-nav-tabs__list{position:relative;display:flex;margin:0;padding:0}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list{flex-direction:column;gap:2px}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list{flex-direction:row;gap:.25rem;overflow-x:auto;box-shadow:inset 0 -1px 0 var(--gbt-hairline);scrollbar-width:none}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-before]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);mask-image:linear-gradient(to right,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-after]{-webkit-mask-image:linear-gradient(to left,transparent,#000 2.5rem);mask-image:linear-gradient(to left,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-before][data-hidden-after]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}@container gbt-page-layout (max-width: 768px){.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list{flex-direction:row;gap:.25rem;overflow-x:auto;box-shadow:inset 0 -1px 0 var(--gbt-hairline);scrollbar-width:none}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-before]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);mask-image:linear-gradient(to right,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-after]{-webkit-mask-image:linear-gradient(to left,transparent,#000 2.5rem);mask-image:linear-gradient(to left,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-before][data-hidden-after]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}}\n"],
+		dependencies: [{
+			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: NavTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-nav-tabs",
+			standalone: true,
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: GBT_NAV_TABS,
+				useExisting: NavTabs
+			}],
+			template: "@if (landmark()) {\n  <nav\n    class=\"gbt-nav-tabs\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </nav>\n} @else {\n  <div class=\"gbt-nav-tabs\" [attr.data-orientation]=\"orientation()\">\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </div>\n}\n\n<ng-template #links>\n  <div\n    #list\n    class=\"gbt-nav-tabs__list\"\n    [attr.data-hidden-before]=\"hiddenBefore() ? '' : null\"\n    [attr.data-hidden-after]=\"hiddenAfter() ? '' : null\"\n    (scroll)=\"updateOverflow()\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n",
+			styles: [":host{display:block;min-width:0}.gbt-nav-tabs{min-width:0}.gbt-nav-tabs__list{position:relative;display:flex;margin:0;padding:0}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list{flex-direction:column;gap:2px}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list{flex-direction:row;gap:.25rem;overflow-x:auto;box-shadow:inset 0 -1px 0 var(--gbt-hairline);scrollbar-width:none}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-before]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);mask-image:linear-gradient(to right,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-after]{-webkit-mask-image:linear-gradient(to left,transparent,#000 2.5rem);mask-image:linear-gradient(to left,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=horizontal] .gbt-nav-tabs__list[data-hidden-before][data-hidden-after]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}@container gbt-page-layout (max-width: 768px){.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list{flex-direction:row;gap:.25rem;overflow-x:auto;box-shadow:inset 0 -1px 0 var(--gbt-hairline);scrollbar-width:none}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-before]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);mask-image:linear-gradient(to right,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-after]{-webkit-mask-image:linear-gradient(to left,transparent,#000 2.5rem);mask-image:linear-gradient(to left,transparent,#000 2.5rem)}.gbt-nav-tabs[data-orientation=vertical] .gbt-nav-tabs__list[data-hidden-before][data-hidden-after]{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		landmark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "landmark",
+				required: false
+			}]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}],
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => NavTab), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+export { NavTab, NavTabs };
+
+//# sourceMappingURL=masmarino-gabarit-nav-tabs.mjs.map

package/fesm2022/masmarino-gabarit-nav-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-nav-tabs.mjs","names":[],"sources":["../../../projects/gabarit/nav-tabs/nav-tabs.token.ts","../../../projects/gabarit/nav-tabs/nav-tab.ts","../../../projects/gabarit/nav-tabs/nav-tab.html","../../../projects/gabarit/nav-tabs/nav-tabs.ts","../../../projects/gabarit/nav-tabs/nav-tabs.html"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core'\n\nexport type NavTabsOrientation = 'horizontal' | 'vertical'\n\nexport interface NavTabsHost {\n  readonly orientation: Signal<NavTabsOrientation>\n}\n\nexport const GBT_NAV_TABS = new InjectionToken<NavTabsHost>('GBT_NAV_TABS')\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  afterEveryRender,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { GBT_NAV_TABS } from './nav-tabs.token'\n\n@Component({\n  selector: 'a[gbtNavTab]',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './nav-tab.html',\n  styleUrl: './nav-tab.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'gbt-nav-tab',\n    '[attr.aria-current]': 'active() ? \"page\" : null',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-orientation]': 'orientation()',\n  },\n})\nexport class NavTab {\n  active = input(false, { transform: booleanAttribute })\n  icon = input<string | null>(null)\n  badge = input<number | string | null>(null)\n\n  private readonly nav = inject(GBT_NAV_TABS, { optional: true })\n  private readonly label = viewChild<ElementRef<HTMLElement>>('label')\n\n  protected readonly orientation = computed(() => this.nav?.orientation() ?? 'horizontal')\n\n  protected readonly hasBadge = computed(() => {\n    const badge = this.badge()\n    return badge !== null && badge !== undefined && badge !== ''\n  })\n\n  constructor() {\n    afterEveryRender({\n      write: () => {\n        const label = this.label()?.nativeElement\n        const text = label?.textContent?.trim() ?? ''\n        if (label && label.getAttribute('data-label') !== text) {\n          label.setAttribute('data-label', text)\n        }\n      },\n    })\n  }\n}\n","@if (icon(); as name) {\n  <gbt-icon class=\"gbt-nav-tab__icon\" [name]=\"name\" />\n}\n<span #label class=\"gbt-nav-tab__label\"><ng-content /></span>\n@if (hasBadge()) {\n  &ngsp;<span class=\"gbt-nav-tab__badge\">{{ badge() }}</span>\n}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterRenderEffect,\n  booleanAttribute,\n  contentChildren,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { NavTab } from './nav-tab'\nimport { GBT_NAV_TABS, type NavTabsOrientation } from './nav-tabs.token'\n\nexport type { NavTabsOrientation } from './nav-tabs.token'\n\n@Component({\n  selector: 'gbt-nav-tabs',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  templateUrl: './nav-tabs.html',\n  styleUrl: './nav-tabs.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: GBT_NAV_TABS, useExisting: NavTabs }],\n})\nexport class NavTabs {\n  ariaLabel = input<string>('')\n  orientation = input<NavTabsOrientation>('horizontal')\n  landmark = input(true, { transform: booleanAttribute })\n\n  private readonly list = viewChild<ElementRef<HTMLElement>>('list')\n  private readonly tabs = contentChildren(NavTab, { descendants: true })\n\n  protected readonly hiddenBefore = signal(false)\n  protected readonly hiddenAfter = signal(false)\n\n  protected updateOverflow(): void {\n    const list = this.list()?.nativeElement\n    if (!list) return\n    const hidden = list.scrollWidth - list.clientWidth\n    this.hiddenBefore.set(hidden > 1 && list.scrollLeft > 1)\n    this.hiddenAfter.set(hidden > 1 && list.scrollLeft < hidden - 1)\n  }\n\n  constructor() {\n    afterRenderEffect({\n      write: () => {\n        this.tabs().forEach((tab) => tab.active())\n        const list = this.list()?.nativeElement\n        if (!list) return\n        const active = list.querySelector<HTMLElement>('[aria-current=\"page\"]')\n        if (active && list.scrollWidth > list.clientWidth) {\n          const start = active.offsetLeft\n          const end = start + active.offsetWidth\n          const glimpse = 40\n          if (start - glimpse < list.scrollLeft) {\n            list.scrollLeft = Math.max(0, start - glimpse)\n          } else if (end + glimpse > list.scrollLeft + list.clientWidth) {\n            list.scrollLeft = end + glimpse - list.clientWidth\n          }\n        }\n        this.updateOverflow()\n      },\n    })\n\n    if (typeof ResizeObserver !== 'undefined') {\n      const observer = new ResizeObserver(() => this.updateOverflow())\n      const observed = new Set<Element>()\n      afterRenderEffect({\n        write: () => {\n          this.tabs()\n          const list = this.list()?.nativeElement\n          if (!list) return\n          const wanted = new Set<Element>([list, ...Array.from(list.children)])\n          for (const element of observed) {\n            if (!wanted.has(element)) {\n              observer.unobserve(element)\n              observed.delete(element)\n            }\n          }\n          for (const element of wanted) {\n            if (!observed.has(element)) {\n              observer.observe(element)\n              observed.add(element)\n            }\n          }\n        },\n      })\n      inject(DestroyRef).onDestroy(() => observer.disconnect())\n    }\n  }\n}\n","@if (landmark()) {\n  <nav\n    class=\"gbt-nav-tabs\"\n    [attr.data-orientation]=\"orientation()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </nav>\n} @else {\n  <div class=\"gbt-nav-tabs\" [attr.data-orientation]=\"orientation()\">\n    <ng-container [ngTemplateOutlet]=\"links\" />\n  </div>\n}\n\n<ng-template #links>\n  <div\n    #list\n    class=\"gbt-nav-tabs__list\"\n    [attr.data-hidden-before]=\"hiddenBefore() ? '' : null\"\n    [attr.data-hidden-after]=\"hiddenAfter() ? '' : null\"\n    (scroll)=\"updateOverflow()\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-notification-dot.mjs

@@ -0,0 +1,119 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var NotificationDot = class NotificationDot {
+	count = input(null, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	max = input(99, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	variant = input("error", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	hidden = input(false, ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	showDot = computed(() => !this.hidden() && this.count() !== 0, ...ngDevMode ? [{ debugName: "showDot" }] : /* istanbul ignore next */ []);
+	displayValue = computed(() => {
+		const count = this.count();
+		if (count === null) return "";
+		const max = this.max();
+		return count > max ? `${max}+` : `${count}`;
+	}, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NotificationDot,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NotificationDot,
+		isStandalone: true,
+		selector: "gbt-notification-dot",
+		inputs: {
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hidden: {
+				classPropertyName: "hidden",
+				publicName: "hidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		exportAs: ["gbtNotificationDot"],
+		ngImport: i0,
+		template: "<span class=\"gbt-notification-dot__anchor\">\n  <ng-content></ng-content>\n</span>\n@if (showDot()) {\n  <span\n    class=\"gbt-notification-dot__badge\"\n    [class.gbt-notification-dot__badge--count]=\"count() !== null\"\n    [attr.data-variant]=\"variant()\"\n    aria-hidden=\"true\"\n    >{{ displayValue() }}</span\n  >\n}\n",
+		styles: [":host{position:relative;display:inline-flex}.gbt-notification-dot__anchor{display:inline-flex}.gbt-notification-dot__badge{box-sizing:border-box;position:absolute;top:-4px;right:-4px;display:flex;align-items:center;justify-content:center;min-width:8px;height:8px;padding:0;background:var(--color-error-base);border:2px solid var(--bg-principal);border-radius:999px}.gbt-notification-dot__badge[data-variant=warning]{background:var(--color-warning-base)}.gbt-notification-dot__badge[data-variant=success]{background:var(--color-success-base)}.gbt-notification-dot__badge[data-variant=info]{background:var(--color-info-vivid-base)}.gbt-notification-dot__badge--count{min-width:16px;height:16px;padding:0 4px;background:var(--color-error-bg);color:var(--color-error-bg-text);font-size:10px;font-weight:700;line-height:1}.gbt-notification-dot__badge--count[data-variant=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-notification-dot__badge--count[data-variant=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-notification-dot__badge--count[data-variant=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NotificationDot,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-notification-dot",
+			standalone: true,
+			exportAs: "gbtNotificationDot",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span class=\"gbt-notification-dot__anchor\">\n  <ng-content></ng-content>\n</span>\n@if (showDot()) {\n  <span\n    class=\"gbt-notification-dot__badge\"\n    [class.gbt-notification-dot__badge--count]=\"count() !== null\"\n    [attr.data-variant]=\"variant()\"\n    aria-hidden=\"true\"\n    >{{ displayValue() }}</span\n  >\n}\n",
+			styles: [":host{position:relative;display:inline-flex}.gbt-notification-dot__anchor{display:inline-flex}.gbt-notification-dot__badge{box-sizing:border-box;position:absolute;top:-4px;right:-4px;display:flex;align-items:center;justify-content:center;min-width:8px;height:8px;padding:0;background:var(--color-error-base);border:2px solid var(--bg-principal);border-radius:999px}.gbt-notification-dot__badge[data-variant=warning]{background:var(--color-warning-base)}.gbt-notification-dot__badge[data-variant=success]{background:var(--color-success-base)}.gbt-notification-dot__badge[data-variant=info]{background:var(--color-info-vivid-base)}.gbt-notification-dot__badge--count{min-width:16px;height:16px;padding:0 4px;background:var(--color-error-bg);color:var(--color-error-bg-text);font-size:10px;font-weight:700;line-height:1}.gbt-notification-dot__badge--count[data-variant=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-notification-dot__badge--count[data-variant=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-notification-dot__badge--count[data-variant=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}\n"]
+		}]
+	}],
+	propDecorators: {
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		hidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidden",
+				required: false
+			}]
+		}]
+	}
+});
+export { NotificationDot };
+
+//# sourceMappingURL=masmarino-gabarit-notification-dot.mjs.map

package/fesm2022/masmarino-gabarit-notification-dot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-notification-dot.mjs","names":[],"sources":["../../../projects/gabarit/notification-dot/notification-dot.ts","../../../projects/gabarit/notification-dot/notification-dot.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'\n\nexport type NotificationDotVariant = 'error' | 'warning' | 'success' | 'info'\n\n@Component({\n  selector: 'gbt-notification-dot',\n  standalone: true,\n  exportAs: 'gbtNotificationDot',\n  templateUrl: './notification-dot.html',\n  styleUrl: './notification-dot.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationDot {\n  count = input<number | null>(null)\n  max = input<number>(99)\n  variant = input<NotificationDotVariant>('error')\n  hidden = input(false)\n\n  protected readonly showDot = computed(() => !this.hidden() && this.count() !== 0)\n\n  protected readonly displayValue = computed(() => {\n    const count = this.count()\n    if (count === null) {\n      return ''\n    }\n    const max = this.max()\n    return count > max ? `${max}+` : `${count}`\n  })\n}\n","<span class=\"gbt-notification-dot__anchor\">\n  <ng-content></ng-content>\n</span>\n@if (showDot()) {\n  <span\n    class=\"gbt-notification-dot__badge\"\n    [class.gbt-notification-dot__badge--count]=\"count() !== null\"\n    [attr.data-variant]=\"variant()\"\n    aria-hidden=\"true\"\n    >{{ displayValue() }}</span\n  >\n}\n"],"mappings":";;AAYA,IAAa,kBAAb,MAAa,gBAAe;CAC1B,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,MAAM,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,UAAU,MAA8B,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAChD,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,UAAU,eAAe,CAAC,KAAK,OAAM,KAAM,KAAK,MAAK,MAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAE9D,eAAe,eAAc;EAC9C,MAAM,QAAQ,KAAK,MAAK;EACxB,IAAI,UAAU,MACZ,OAAO;EAET,MAAM,MAAM,KAAK,IAAG;EACpB,OAAO,QAAQ,MAAM,GAAG,IAAG,KAAM,GAAG;CACtC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAfS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA,CAAA,oBAAA;EAAA,UAAA;EAAA,UCZ5B;EAYA,QAAA,CAAA,4qCAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADAa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAR3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAsB,YACpB;GAAI,UACN;GAAoB,iBAGb,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,4qCAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-page-header.mjs

@@ -0,0 +1,78 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var PageHeader = class PageHeader {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	headingLevel = input(1, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PageHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: PageHeader,
+		isStandalone: true,
+		selector: "gbt-page-header",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<header class=\"gbt-page-header\">\n  <div class=\"gbt-page-header__main\">\n    <div class=\"gbt-page-header__title-row\">\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 class=\"gbt-page-header__title\">{{ heading() }}</h2>\n        }\n        @case (3) {\n          <h3 class=\"gbt-page-header__title\">{{ heading() }}</h3>\n        }\n        @default {\n          <h1 class=\"gbt-page-header__title\">{{ heading() }}</h1>\n        }\n      }\n      <ng-content select=\"[header-title]\" />\n      <div class=\"gbt-page-header__badges\"><ng-content select=\"[header-badges]\" /></div>\n    </div>\n    <div class=\"gbt-page-header__meta\"><ng-content select=\"[header-meta]\" /></div>\n  </div>\n  <div class=\"gbt-page-header__actions\"><ng-content select=\"[header-actions]\" /></div>\n</header>\n",
+		styles: [":host{display:block;margin-bottom:1.5rem}.gbt-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--gbt-hairline)}.gbt-page-header__main{flex:1 1 18rem;min-width:0}.gbt-page-header__title-row{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem;min-height:var(--gbt-control-height-md)}.gbt-page-header__title{font-family:var(--gbt-font-display, var(--font-display));min-width:0;margin:0;color:var(--text-primary);font-size:1.75rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}.gbt-page-header__badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem}.gbt-page-header__meta{margin-top:.25rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}.gbt-page-header__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:var(--gbt-control-height-md)}.gbt-page-header__badges:empty,.gbt-page-header__meta:empty,.gbt-page-header__actions:empty{display:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PageHeader,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-page-header",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<header class=\"gbt-page-header\">\n  <div class=\"gbt-page-header__main\">\n    <div class=\"gbt-page-header__title-row\">\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 class=\"gbt-page-header__title\">{{ heading() }}</h2>\n        }\n        @case (3) {\n          <h3 class=\"gbt-page-header__title\">{{ heading() }}</h3>\n        }\n        @default {\n          <h1 class=\"gbt-page-header__title\">{{ heading() }}</h1>\n        }\n      }\n      <ng-content select=\"[header-title]\" />\n      <div class=\"gbt-page-header__badges\"><ng-content select=\"[header-badges]\" /></div>\n    </div>\n    <div class=\"gbt-page-header__meta\"><ng-content select=\"[header-meta]\" /></div>\n  </div>\n  <div class=\"gbt-page-header__actions\"><ng-content select=\"[header-actions]\" /></div>\n</header>\n",
+			styles: [":host{display:block;margin-bottom:1.5rem}.gbt-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--gbt-hairline)}.gbt-page-header__main{flex:1 1 18rem;min-width:0}.gbt-page-header__title-row{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem;min-height:var(--gbt-control-height-md)}.gbt-page-header__title{font-family:var(--gbt-font-display, var(--font-display));min-width:0;margin:0;color:var(--text-primary);font-size:1.75rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}.gbt-page-header__badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem}.gbt-page-header__meta{margin-top:.25rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}.gbt-page-header__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:var(--gbt-control-height-md)}.gbt-page-header__badges:empty,.gbt-page-header__meta:empty,.gbt-page-header__actions:empty{display:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}]
+	}
+});
+export { PageHeader };
+
+//# sourceMappingURL=masmarino-gabarit-page-header.mjs.map

package/fesm2022/masmarino-gabarit-page-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-page-header.mjs","names":[],"sources":["../../../projects/gabarit/page-header/page-header.ts","../../../projects/gabarit/page-header/page-header.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\n\nexport type PageHeaderLevel = 1 | 2 | 3\n\n@Component({\n  selector: 'gbt-page-header',\n  standalone: true,\n  templateUrl: './page-header.html',\n  styleUrl: './page-header.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PageHeader {\n  heading = input.required<string>()\n  headingLevel = input<PageHeaderLevel>(1)\n}\n","<header class=\"gbt-page-header\">\n  <div class=\"gbt-page-header__main\">\n    <div class=\"gbt-page-header__title-row\">\n      @switch (headingLevel()) {\n        @case (2) {\n          <h2 class=\"gbt-page-header__title\">{{ heading() }}</h2>\n        }\n        @case (3) {\n          <h3 class=\"gbt-page-header__title\">{{ heading() }}</h3>\n        }\n        @default {\n          <h1 class=\"gbt-page-header__title\">{{ heading() }}</h1>\n        }\n      }\n      <ng-content select=\"[header-title]\" />\n      <div class=\"gbt-page-header__badges\"><ng-content select=\"[header-badges]\" /></div>\n    </div>\n    <div class=\"gbt-page-header__meta\"><ng-content select=\"[header-meta]\" /></div>\n  </div>\n  <div class=\"gbt-page-header__actions\"><ng-content select=\"[header-actions]\" /></div>\n</header>\n"],"mappings":";;AAWA,IAAa,aAAb,MAAa,WAAU;CACrB,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,eAAe,MAAuB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAF7B,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCXvB;EAqBA,QAAA,CAAA,siCAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADVa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAPtB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,siCAAA;EAAA,CAAA"}