@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-stat-tile.mjs

@@ -0,0 +1,312 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, contentChild, inject, input } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+import { IconMarker } from "@masmarino/gabarit/icon-marker";
+import { StatGrid } from "@masmarino/gabarit/stat-grid";
+var StatTileLink = class StatTileLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StatTileLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: StatTileLink,
+		isStandalone: true,
+		selector: "a[gbtStatTileLink]",
+		host: { classAttribute: "gbt-stat-tile__link" },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{color:inherit;text-decoration:none}:host:hover{text-decoration:underline;text-underline-offset:.2em}:host:focus-visible{outline:none}:host:after{content:\"\";position:absolute;inset:0;border-radius:var(--site-border-radius)}:host:focus-visible:after{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StatTileLink,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[gbtStatTileLink]",
+			standalone: true,
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "gbt-stat-tile__link" },
+			styles: [":host{color:inherit;text-decoration:none}:host:hover{text-decoration:underline;text-underline-offset:.2em}:host:focus-visible{outline:none}:host:after{content:\"\";position:absolute;inset:0;border-radius:var(--site-border-radius)}:host:focus-visible:after{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}\n"]
+		}]
+	}]
+});
+var StatTile = class StatTile {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconTone = input("info", ...ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []);
+	hint = input(null, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	trend = input(null, ...ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []);
+	trendLabel = input(null, ...ngDevMode ? [{ debugName: "trendLabel" }] : /* istanbul ignore next */ []);
+	trendTone = input("neutral", ...ngDevMode ? [{ debugName: "trendTone" }] : /* istanbul ignore next */ []);
+	href = input(null, ...ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []);
+	muted = input(false, {
+		...ngDevMode ? { debugName: "muted" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	link = contentChild(StatTileLink, ...ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []);
+	grid = inject(StatGrid, { optional: true });
+	linked() {
+		return !!this.href() || !!this.link();
+	}
+	hasLink() {
+		return !!this.link();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StatTile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StatTile,
+		isStandalone: true,
+		selector: "gbt-stat-tile",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconTone: {
+				classPropertyName: "iconTone",
+				publicName: "iconTone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trend: {
+				classPropertyName: "trend",
+				publicName: "trend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trendLabel: {
+				classPropertyName: "trendLabel",
+				publicName: "trendLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trendTone: {
+				classPropertyName: "trendTone",
+				publicName: "trendTone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			href: {
+				classPropertyName: "href",
+				publicName: "href",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			muted: {
+				classPropertyName: "muted",
+				publicName: "muted",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.role": "grid ? \"listitem\" : null",
+			"attr.data-link": "linked() ? \"\" : null",
+			"attr.data-muted": "muted() ? \"\" : null"
+		} },
+		queries: [{
+			propertyName: "link",
+			first: true,
+			predicate: StatTileLink,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-stat-tile\">\n  <span class=\"gbt-stat-tile__label\">\n    <ng-content select=\"a[gbtStatTileLink]\" />\n    @if (!hasLink()) {\n      @if (href(); as target) {\n        <a gbtStatTileLink [attr.href]=\"target\">{{ label() }}</a>\n      } @else {\n        {{ label() }}\n      }\n    }\n  </span>\n  @if (icon(); as name) {\n    <gbt-icon-marker\n      class=\"gbt-stat-tile__icon\"\n      [icon]=\"name\"\n      [tone]=\"muted() ? 'neutral' : iconTone()\"\n      shape=\"tile\"\n    />\n  }\n  <span class=\"gbt-stat-tile__value\">{{ value() }}</span>\n  @if (hint() || trendLabel()) {\n    <span class=\"gbt-stat-tile__meta\">\n      @if (trendLabel(); as text) {\n        <span\n          class=\"gbt-stat-tile__trend\"\n          [attr.data-trend]=\"trend()\"\n          [attr.data-tone]=\"trendTone()\"\n        >\n          @if (trend() === 'up') {\n            <gbt-icon name=\"arrow-up\" />\n          } @else if (trend() === 'down') {\n            <gbt-icon name=\"arrow-down\" />\n          }\n          {{ text }}\n        </span>\n      }\n      @if (hint(); as text) {\n        <span class=\"gbt-stat-tile__hint\">{{ text }}</span>\n      }\n    </span>\n  }\n</div>\n",
+		styles: [":host{display:block;min-width:0;container:gbt-stat-tile/inline-size}.gbt-stat-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:\"value icon\" \"label label\" \"meta meta\";column-gap:.75rem;align-items:center;box-sizing:border-box;height:100%;min-width:0;padding:.875rem 1rem .9375rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius);background:var(--bg-principal);transition:border-color var(--site-transition-fast),box-shadow var(--site-transition-fast)}:host([data-link]) .gbt-stat-tile:hover{border-color:var(--border-color);box-shadow:var(--site-shadow-sm)}.gbt-stat-tile__label{grid-area:label;align-self:start;min-width:0;margin-top:.125rem;color:var(--text-secondary);font-size:.8125rem;font-weight:600;line-height:1.25rem;overflow-wrap:anywhere}.gbt-stat-tile__icon{grid-area:icon}.gbt-stat-tile__value{font-family:var(--gbt-font-display, var(--font-display));grid-area:value;min-width:0;overflow:hidden;color:var(--text-primary);font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}:host([data-muted]) .gbt-stat-tile__value{color:var(--text-secondary)}.gbt-stat-tile__meta{display:flex;flex-wrap:wrap;grid-area:meta;align-items:center;gap:.125rem .5rem;min-width:0;color:var(--text-secondary);font-size:.75rem;line-height:1rem}.gbt-stat-tile__trend{display:inline-flex;align-items:center;gap:.125rem;font-weight:600}.gbt-stat-tile__trend gbt-icon{flex:none;font-size:.6875rem}.gbt-stat-tile__trend[data-tone=success]{color:var(--color-success-text)}.gbt-stat-tile__trend[data-tone=error]{color:var(--color-error-text)}@container gbt-stat-tile (max-width: 11rem){.gbt-stat-tile{column-gap:.5rem;padding:.75rem .75rem .8125rem}.gbt-stat-tile__value{font-size:1.375rem;line-height:2rem}}@media(prefers-reduced-motion:reduce){.gbt-stat-tile{transition:none}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: Icon,
+				selector: "gbt-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: IconMarker,
+				selector: "gbt-icon-marker",
+				inputs: [
+					"icon",
+					"tone",
+					"size",
+					"shape",
+					"appearance",
+					"label"
+				]
+			},
+			{
+				kind: "component",
+				type: StatTileLink,
+				selector: "a[gbtStatTileLink]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StatTile,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-stat-tile",
+			standalone: true,
+			imports: [
+				Icon,
+				IconMarker,
+				StatTileLink
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.role]": "grid ? \"listitem\" : null",
+				"[attr.data-link]": "linked() ? \"\" : null",
+				"[attr.data-muted]": "muted() ? \"\" : null"
+			},
+			template: "<div class=\"gbt-stat-tile\">\n  <span class=\"gbt-stat-tile__label\">\n    <ng-content select=\"a[gbtStatTileLink]\" />\n    @if (!hasLink()) {\n      @if (href(); as target) {\n        <a gbtStatTileLink [attr.href]=\"target\">{{ label() }}</a>\n      } @else {\n        {{ label() }}\n      }\n    }\n  </span>\n  @if (icon(); as name) {\n    <gbt-icon-marker\n      class=\"gbt-stat-tile__icon\"\n      [icon]=\"name\"\n      [tone]=\"muted() ? 'neutral' : iconTone()\"\n      shape=\"tile\"\n    />\n  }\n  <span class=\"gbt-stat-tile__value\">{{ value() }}</span>\n  @if (hint() || trendLabel()) {\n    <span class=\"gbt-stat-tile__meta\">\n      @if (trendLabel(); as text) {\n        <span\n          class=\"gbt-stat-tile__trend\"\n          [attr.data-trend]=\"trend()\"\n          [attr.data-tone]=\"trendTone()\"\n        >\n          @if (trend() === 'up') {\n            <gbt-icon name=\"arrow-up\" />\n          } @else if (trend() === 'down') {\n            <gbt-icon name=\"arrow-down\" />\n          }\n          {{ text }}\n        </span>\n      }\n      @if (hint(); as text) {\n        <span class=\"gbt-stat-tile__hint\">{{ text }}</span>\n      }\n    </span>\n  }\n</div>\n",
+			styles: [":host{display:block;min-width:0;container:gbt-stat-tile/inline-size}.gbt-stat-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:\"value icon\" \"label label\" \"meta meta\";column-gap:.75rem;align-items:center;box-sizing:border-box;height:100%;min-width:0;padding:.875rem 1rem .9375rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius);background:var(--bg-principal);transition:border-color var(--site-transition-fast),box-shadow var(--site-transition-fast)}:host([data-link]) .gbt-stat-tile:hover{border-color:var(--border-color);box-shadow:var(--site-shadow-sm)}.gbt-stat-tile__label{grid-area:label;align-self:start;min-width:0;margin-top:.125rem;color:var(--text-secondary);font-size:.8125rem;font-weight:600;line-height:1.25rem;overflow-wrap:anywhere}.gbt-stat-tile__icon{grid-area:icon}.gbt-stat-tile__value{font-family:var(--gbt-font-display, var(--font-display));grid-area:value;min-width:0;overflow:hidden;color:var(--text-primary);font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}:host([data-muted]) .gbt-stat-tile__value{color:var(--text-secondary)}.gbt-stat-tile__meta{display:flex;flex-wrap:wrap;grid-area:meta;align-items:center;gap:.125rem .5rem;min-width:0;color:var(--text-secondary);font-size:.75rem;line-height:1rem}.gbt-stat-tile__trend{display:inline-flex;align-items:center;gap:.125rem;font-weight:600}.gbt-stat-tile__trend gbt-icon{flex:none;font-size:.6875rem}.gbt-stat-tile__trend[data-tone=success]{color:var(--color-success-text)}.gbt-stat-tile__trend[data-tone=error]{color:var(--color-error-text)}@container gbt-stat-tile (max-width: 11rem){.gbt-stat-tile{column-gap:.5rem;padding:.75rem .75rem .8125rem}.gbt-stat-tile__value{font-size:1.375rem;line-height:2rem}}@media(prefers-reduced-motion:reduce){.gbt-stat-tile{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconTone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconTone",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		trend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trend",
+				required: false
+			}]
+		}],
+		trendLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trendLabel",
+				required: false
+			}]
+		}],
+		trendTone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trendTone",
+				required: false
+			}]
+		}],
+		href: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "href",
+				required: false
+			}]
+		}],
+		muted: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "muted",
+				required: false
+			}]
+		}],
+		link: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StatTileLink), { isSignal: true }]
+		}]
+	}
+});
+export { StatTile, StatTileLink };
+
+//# sourceMappingURL=masmarino-gabarit-stat-tile.mjs.map

package/fesm2022/masmarino-gabarit-stat-tile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-stat-tile.mjs","names":[],"sources":["../../../projects/gabarit/stat-tile/stat-tile-link.ts","../../../projects/gabarit/stat-tile/stat-tile.ts","../../../projects/gabarit/stat-tile/stat-tile.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: 'a[gbtStatTileLink]',\n  standalone: true,\n  template: '<ng-content />',\n  styleUrl: './stat-tile-link.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'gbt-stat-tile__link' },\n})\nexport class StatTileLink {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  contentChild,\n  inject,\n  input,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { IconMarker, IconMarkerTone } from '@masmarino/gabarit/icon-marker'\nimport { StatGrid } from '@masmarino/gabarit/stat-grid'\nimport { StatTileLink } from './stat-tile-link'\n\nexport type StatTileTrend = 'up' | 'down' | 'flat'\nexport type StatTileTrendTone = 'neutral' | 'success' | 'error'\n\n@Component({\n  selector: 'gbt-stat-tile',\n  standalone: true,\n  imports: [Icon, IconMarker, StatTileLink],\n  templateUrl: './stat-tile.html',\n  styleUrl: './stat-tile.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.role]': 'grid ? \"listitem\" : null',\n    '[attr.data-link]': 'linked() ? \"\" : null',\n    '[attr.data-muted]': 'muted() ? \"\" : null',\n  },\n})\nexport class StatTile {\n  label = input('')\n  value = input.required<string | number>()\n  icon = input<string | null>(null)\n  iconTone = input<IconMarkerTone>('info')\n  hint = input<string | null>(null)\n  trend = input<StatTileTrend | null>(null)\n  trendLabel = input<string | null>(null)\n  trendTone = input<StatTileTrendTone>('neutral')\n  href = input<string | null>(null)\n  muted = input(false, { transform: booleanAttribute })\n\n  private readonly link = contentChild(StatTileLink)\n  protected readonly grid = inject(StatGrid, { optional: true })\n\n  protected linked(): boolean {\n    return !!this.href() || !!this.link()\n  }\n\n  protected hasLink(): boolean {\n    return !!this.link()\n  }\n}\n","<div class=\"gbt-stat-tile\">\n  <span class=\"gbt-stat-tile__label\">\n    <ng-content select=\"a[gbtStatTileLink]\" />\n    @if (!hasLink()) {\n      @if (href(); as target) {\n        <a gbtStatTileLink [attr.href]=\"target\">{{ label() }}</a>\n      } @else {\n        {{ label() }}\n      }\n    }\n  </span>\n  @if (icon(); as name) {\n    <gbt-icon-marker\n      class=\"gbt-stat-tile__icon\"\n      [icon]=\"name\"\n      [tone]=\"muted() ? 'neutral' : iconTone()\"\n      shape=\"tile\"\n    />\n  }\n  <span class=\"gbt-stat-tile__value\">{{ value() }}</span>\n  @if (hint() || trendLabel()) {\n    <span class=\"gbt-stat-tile__meta\">\n      @if (trendLabel(); as text) {\n        <span\n          class=\"gbt-stat-tile__trend\"\n          [attr.data-trend]=\"trend()\"\n          [attr.data-tone]=\"trendTone()\"\n        >\n          @if (trend() === 'up') {\n            <gbt-icon name=\"arrow-up\" />\n          } @else if (trend() === 'down') {\n            <gbt-icon name=\"arrow-down\" />\n          }\n          {{ text }}\n        </span>\n      }\n      @if (hint(); as text) {\n        <span class=\"gbt-stat-tile__hint\">{{ text }}</span>\n      }\n    </span>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-stepper.mjs

@@ -0,0 +1,219 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+var Stepper = class Stepper {
+	steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	activeIndex = model(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	completedLabel = input("Completed", ...ngDevMode ? [{ debugName: "completedLabel" }] : /* istanbul ignore next */ []);
+	errorLabel = input("Error", ...ngDevMode ? [{ debugName: "errorLabel" }] : /* istanbul ignore next */ []);
+	interactive = input(false, {
+		...ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectedIndex = model(null, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
+	selectedLabel = input("Selected", ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	select(index) {
+		this.selectedIndex.set(index);
+	}
+	isSelected(index) {
+		return this.interactive() && this.selectedIndex() === index;
+	}
+	statusOf(index) {
+		const step = this.steps()[index];
+		const active = this.activeIndex();
+		if (step.hasError && index <= active) return "error";
+		if (index < active) return "completed";
+		if (index === active) return "current";
+		return "upcoming";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Stepper,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Stepper,
+		isStandalone: true,
+		selector: "gbt-stepper",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			completedLabel: {
+				classPropertyName: "completedLabel",
+				publicName: "completedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorLabel: {
+				classPropertyName: "errorLabel",
+				publicName: "errorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			interactive: {
+				classPropertyName: "interactive",
+				publicName: "interactive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedIndex: {
+				classPropertyName: "selectedIndex",
+				publicName: "selectedIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedLabel: {
+				classPropertyName: "selectedLabel",
+				publicName: "selectedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			activeIndex: "activeIndexChange",
+			selectedIndex: "selectedIndexChange"
+		},
+		ngImport: i0,
+		template: "<ng-template #content let-index=\"index\" let-step=\"step\">\n  <span class=\"gbt-stepper__indicator\">\n    @switch (statusOf(index)) {\n      @case ('completed') {\n        <gbt-icon name=\"check\" aria-hidden=\"true\" />\n      }\n      @case ('error') {\n        <gbt-icon name=\"alert-triangle\" aria-hidden=\"true\" />\n      }\n      @default {\n        {{ index + 1 }}\n      }\n    }\n  </span>\n  <span class=\"gbt-stepper__label\">\n    {{ step.label }}\n    @if (statusOf(index) === 'completed') {\n      <span class=\"sr-only\"> — {{ completedLabel() }}</span>\n    } @else if (statusOf(index) === 'error') {\n      <span class=\"sr-only\"> — {{ errorLabel() }}</span>\n    }\n    @if (isSelected(index)) {\n      <span class=\"sr-only\"> — {{ selectedLabel() }}</span>\n    }\n  </span>\n</ng-template>\n\n<ol class=\"gbt-stepper\" [attr.data-orientation]=\"orientation()\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"gbt-stepper__step\"\n      [attr.data-status]=\"statusOf($index)\"\n      [attr.data-selected]=\"isSelected($index) ? '' : null\"\n      [attr.aria-current]=\"statusOf($index) === 'current' ? 'step' : null\"\n    >\n      @if (interactive()) {\n        <button type=\"button\" class=\"gbt-stepper__button\" (click)=\"select($index)\">\n          <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n        </button>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n      }\n    </li>\n  }\n</ol>\n",
+		styles: [".gbt-stepper{display:flex;margin:0;padding:0;list-style:none}.gbt-stepper[data-orientation=horizontal]{flex-direction:row}.gbt-stepper[data-orientation=vertical]{flex-direction:column;gap:.5rem}.gbt-stepper__step{position:relative;display:flex;flex:1;align-items:center;gap:.5rem}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step{flex-direction:column}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step:not(:first-child):before{content:\"\";position:absolute;top:15px;right:calc(50% + 16px);left:calc(-50% + 16px);height:2px;background:var(--border-color)}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step[data-status=completed]:not(:first-child):before{background:var(--primary)}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step{flex:none;flex-direction:row}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step:not(:last-child):before{content:\"\";position:absolute;top:32px;bottom:-8px;left:15px;width:2px;background:var(--border-color)}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step[data-status=completed]:not(:last-child):before{background:var(--primary)}.gbt-stepper__indicator{position:relative;z-index:1;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-principal);border:2px solid var(--border-color);border-radius:50%;color:var(--text-secondary);font-size:13px;font-weight:600}.gbt-stepper__step[data-status=current] .gbt-stepper__indicator{border-color:var(--primary);color:var(--primary)}.gbt-stepper__step[data-status=completed] .gbt-stepper__indicator{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}.gbt-stepper__step[data-status=error] .gbt-stepper__indicator{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-stepper__label{font-size:13px;font-weight:600;color:var(--text-secondary);text-align:center}.gbt-stepper[data-orientation=vertical] .gbt-stepper__label{text-align:left}.gbt-stepper__step[data-status=current] .gbt-stepper__label{color:var(--text-primary)}.gbt-stepper__step[data-status=error] .gbt-stepper__label{color:var(--color-error-text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-stepper__button{display:flex;align-items:center;gap:.5rem;padding:0;background:none;border:0;border-radius:4px;font:inherit;color:inherit;cursor:pointer}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__button{flex-direction:column}.gbt-stepper[data-orientation=vertical] .gbt-stepper__button{flex-direction:row}.gbt-stepper__button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:4px}.gbt-stepper__step[data-selected] .gbt-stepper__indicator{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}.gbt-stepper__step[data-selected] .gbt-stepper__label{text-decoration:underline;text-underline-offset:4px}\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: Stepper,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-stepper",
+			standalone: true,
+			imports: [Icon, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-template #content let-index=\"index\" let-step=\"step\">\n  <span class=\"gbt-stepper__indicator\">\n    @switch (statusOf(index)) {\n      @case ('completed') {\n        <gbt-icon name=\"check\" aria-hidden=\"true\" />\n      }\n      @case ('error') {\n        <gbt-icon name=\"alert-triangle\" aria-hidden=\"true\" />\n      }\n      @default {\n        {{ index + 1 }}\n      }\n    }\n  </span>\n  <span class=\"gbt-stepper__label\">\n    {{ step.label }}\n    @if (statusOf(index) === 'completed') {\n      <span class=\"sr-only\"> — {{ completedLabel() }}</span>\n    } @else if (statusOf(index) === 'error') {\n      <span class=\"sr-only\"> — {{ errorLabel() }}</span>\n    }\n    @if (isSelected(index)) {\n      <span class=\"sr-only\"> — {{ selectedLabel() }}</span>\n    }\n  </span>\n</ng-template>\n\n<ol class=\"gbt-stepper\" [attr.data-orientation]=\"orientation()\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"gbt-stepper__step\"\n      [attr.data-status]=\"statusOf($index)\"\n      [attr.data-selected]=\"isSelected($index) ? '' : null\"\n      [attr.aria-current]=\"statusOf($index) === 'current' ? 'step' : null\"\n    >\n      @if (interactive()) {\n        <button type=\"button\" class=\"gbt-stepper__button\" (click)=\"select($index)\">\n          <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n        </button>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n      }\n    </li>\n  }\n</ol>\n",
+			styles: [".gbt-stepper{display:flex;margin:0;padding:0;list-style:none}.gbt-stepper[data-orientation=horizontal]{flex-direction:row}.gbt-stepper[data-orientation=vertical]{flex-direction:column;gap:.5rem}.gbt-stepper__step{position:relative;display:flex;flex:1;align-items:center;gap:.5rem}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step{flex-direction:column}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step:not(:first-child):before{content:\"\";position:absolute;top:15px;right:calc(50% + 16px);left:calc(-50% + 16px);height:2px;background:var(--border-color)}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__step[data-status=completed]:not(:first-child):before{background:var(--primary)}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step{flex:none;flex-direction:row}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step:not(:last-child):before{content:\"\";position:absolute;top:32px;bottom:-8px;left:15px;width:2px;background:var(--border-color)}.gbt-stepper[data-orientation=vertical] .gbt-stepper__step[data-status=completed]:not(:last-child):before{background:var(--primary)}.gbt-stepper__indicator{position:relative;z-index:1;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-principal);border:2px solid var(--border-color);border-radius:50%;color:var(--text-secondary);font-size:13px;font-weight:600}.gbt-stepper__step[data-status=current] .gbt-stepper__indicator{border-color:var(--primary);color:var(--primary)}.gbt-stepper__step[data-status=completed] .gbt-stepper__indicator{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}.gbt-stepper__step[data-status=error] .gbt-stepper__indicator{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-stepper__label{font-size:13px;font-weight:600;color:var(--text-secondary);text-align:center}.gbt-stepper[data-orientation=vertical] .gbt-stepper__label{text-align:left}.gbt-stepper__step[data-status=current] .gbt-stepper__label{color:var(--text-primary)}.gbt-stepper__step[data-status=error] .gbt-stepper__label{color:var(--color-error-text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-stepper__button{display:flex;align-items:center;gap:.5rem;padding:0;background:none;border:0;border-radius:4px;font:inherit;color:inherit;cursor:pointer}.gbt-stepper[data-orientation=horizontal] .gbt-stepper__button{flex-direction:column}.gbt-stepper[data-orientation=vertical] .gbt-stepper__button{flex-direction:row}.gbt-stepper__button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:4px}.gbt-stepper__step[data-selected] .gbt-stepper__indicator{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}.gbt-stepper__step[data-selected] .gbt-stepper__label{text-decoration:underline;text-underline-offset:4px}\n"]
+		}]
+	}],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		completedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "completedLabel",
+				required: false
+			}]
+		}],
+		errorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorLabel",
+				required: false
+			}]
+		}],
+		interactive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "interactive",
+				required: false
+			}]
+		}],
+		selectedIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedIndexChange"]
+		}],
+		selectedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { Stepper };
+
+//# sourceMappingURL=masmarino-gabarit-stepper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-stepper.mjs","names":[],"sources":["../../../projects/gabarit/stepper/stepper.ts","../../../projects/gabarit/stepper/stepper.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type StepperStatus = 'upcoming' | 'current' | 'completed' | 'error'\nexport type StepperOrientation = 'horizontal' | 'vertical'\n\nexport interface StepperStep {\n  label: string\n  hasError?: boolean\n}\n\n@Component({\n  selector: 'gbt-stepper',\n  standalone: true,\n  imports: [Icon, NgTemplateOutlet],\n  templateUrl: './stepper.html',\n  styleUrl: './stepper.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Stepper {\n  steps = input.required<StepperStep[]>()\n  activeIndex = model(0)\n  orientation = input<StepperOrientation>('horizontal')\n  completedLabel = input<string>('Completed')\n  errorLabel = input<string>('Error')\n  interactive = input(false, { transform: booleanAttribute })\n  selectedIndex = model<number | null>(null)\n  selectedLabel = input<string>('Selected')\n\n  protected select(index: number): void {\n    this.selectedIndex.set(index)\n  }\n\n  protected isSelected(index: number): boolean {\n    return this.interactive() && this.selectedIndex() === index\n  }\n\n  protected statusOf(index: number): StepperStatus {\n    const step = this.steps()[index]\n    const active = this.activeIndex()\n    if (step.hasError && index <= active) {\n      return 'error'\n    }\n    if (index < active) {\n      return 'completed'\n    }\n    if (index === active) {\n      return 'current'\n    }\n    return 'upcoming'\n  }\n}\n","<ng-template #content let-index=\"index\" let-step=\"step\">\n  <span class=\"gbt-stepper__indicator\">\n    @switch (statusOf(index)) {\n      @case ('completed') {\n        <gbt-icon name=\"check\" aria-hidden=\"true\" />\n      }\n      @case ('error') {\n        <gbt-icon name=\"alert-triangle\" aria-hidden=\"true\" />\n      }\n      @default {\n        {{ index + 1 }}\n      }\n    }\n  </span>\n  <span class=\"gbt-stepper__label\">\n    {{ step.label }}\n    @if (statusOf(index) === 'completed') {\n      <span class=\"sr-only\"> — {{ completedLabel() }}</span>\n    } @else if (statusOf(index) === 'error') {\n      <span class=\"sr-only\"> — {{ errorLabel() }}</span>\n    }\n    @if (isSelected(index)) {\n      <span class=\"sr-only\"> — {{ selectedLabel() }}</span>\n    }\n  </span>\n</ng-template>\n\n<ol class=\"gbt-stepper\" [attr.data-orientation]=\"orientation()\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"gbt-stepper__step\"\n      [attr.data-status]=\"statusOf($index)\"\n      [attr.data-selected]=\"isSelected($index) ? '' : null\"\n      [attr.aria-current]=\"statusOf($index) === 'current' ? 'step' : null\"\n    >\n      @if (interactive()) {\n        <button type=\"button\" class=\"gbt-stepper__button\" (click)=\"select($index)\">\n          <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n        </button>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"content; context: { index: $index, step: step }\" />\n      }\n    </li>\n  }\n</ol>\n"],"mappings":"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"}