@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-job-graph.mjs

@@ -0,0 +1,216 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, afterRenderEffect, inject, input, output, signal, viewChild } from "@angular/core";
+import { JobStatus } from "@masmarino/gabarit/job-status";
+function graphEdges(stages) {
+	const names = new Set(stages.flatMap((stage) => stage.jobs.map((job) => job.name)));
+	return stages.flatMap((stage) => stage.jobs.flatMap((job) => job.needs.filter((need) => names.has(need)).map((need) => ({
+		from: need,
+		to: job.name
+	}))));
+}
+const round = (value) => Math.round(value * 10) / 10;
+function linkPath(from, to) {
+	const x1 = from.left + from.width;
+	const y1 = from.top + from.height / 2;
+	const x2 = to.left;
+	const y2 = to.top + to.height / 2;
+	const dx = Math.max(24, (x2 - x1) / 2);
+	return `M ${round(x1)} ${round(y1)} C ${round(x1 + dx)} ${round(y1)}, ${round(x2 - dx)} ${round(y2)}, ${round(x2)} ${round(y2)}`;
+}
+const DEFAULT_STATUS_LABELS = {
+	pending: "Pending",
+	running: "Running",
+	success: "Succeeded",
+	failed: "Failed",
+	canceled: "Canceled"
+};
+var JobGraph = class JobGraph {
+	stages = input.required(...ngDevMode ? [{ debugName: "stages" }] : /* istanbul ignore next */ []);
+	selectedJobId = input(null, ...ngDevMode ? [{ debugName: "selectedJobId" }] : /* istanbul ignore next */ []);
+	statusLabels = input(DEFAULT_STATUS_LABELS, ...ngDevMode ? [{ debugName: "statusLabels" }] : /* istanbul ignore next */ []);
+	needsLabel = input("Needs", ...ngDevMode ? [{ debugName: "needsLabel" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Pipeline jobs", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	jobSelected = output();
+	links = signal([], ...ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []);
+	graph = viewChild("graph", ...ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []);
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		afterRenderEffect(() => {
+			this.stages();
+			this.measure();
+		});
+		afterNextRender(() => {
+			const root = this.graph()?.nativeElement;
+			if (!root || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.measure());
+			observer.observe(root);
+			this.destroyRef.onDestroy(() => observer.disconnect());
+		});
+	}
+	measure() {
+		const root = this.graph()?.nativeElement;
+		if (!root) return;
+		const origin = root.getBoundingClientRect();
+		const boxes = /* @__PURE__ */ new Map();
+		root.querySelectorAll("[data-job-name]").forEach((node) => {
+			const rect = node.getBoundingClientRect();
+			boxes.set(node.dataset["jobName"] ?? "", {
+				left: rect.left - origin.left + root.scrollLeft,
+				top: rect.top - origin.top + root.scrollTop,
+				width: rect.width,
+				height: rect.height
+			});
+		});
+		const statuses = new Map(this.stages().flatMap((s) => s.jobs.map((j) => [j.name, j.status])));
+		this.links.set(graphEdges(this.stages()).flatMap((edge) => {
+			const from = boxes.get(edge.from);
+			const to = boxes.get(edge.to);
+			return from && to ? [{
+				key: `${edge.from}->${edge.to}`,
+				d: linkPath(from, to),
+				done: statuses.get(edge.from) === "success"
+			}] : [];
+		}));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: JobGraph,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: JobGraph,
+		isStandalone: true,
+		selector: "gbt-job-graph",
+		inputs: {
+			stages: {
+				classPropertyName: "stages",
+				publicName: "stages",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			selectedJobId: {
+				classPropertyName: "selectedJobId",
+				publicName: "selectedJobId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusLabels: {
+				classPropertyName: "statusLabels",
+				publicName: "statusLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			needsLabel: {
+				classPropertyName: "needsLabel",
+				publicName: "needsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { jobSelected: "jobSelected" },
+		viewQueries: [{
+			propertyName: "graph",
+			first: true,
+			predicate: ["graph"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-job-graph\" #graph>\n  <ol class=\"gbt-job-graph__stages\" [attr.aria-label]=\"ariaLabel()\">\n    @for (stage of stages(); track stage.name) {\n      <li class=\"gbt-job-graph__stage\">\n        <h3 class=\"gbt-job-graph__stage-name\">{{ stage.name }}</h3>\n        <ul class=\"gbt-job-graph__jobs\">\n          @for (job of stage.jobs; track job.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"gbt-job-graph__node\"\n                [attr.data-job-name]=\"job.name\"\n                [attr.data-status]=\"job.status\"\n                [attr.aria-current]=\"job.id === selectedJobId() ? 'true' : null\"\n                (click)=\"jobSelected.emit(job.id)\"\n              >\n                <gbt-job-status class=\"gbt-job-graph__glyph\" data-glyph [status]=\"job.status\" />\n                <span class=\"gbt-job-graph__name\">{{ job.name }}</span>\n                @if (job.durationLabel) {\n                  <span class=\"gbt-job-graph__duration\">{{ job.durationLabel }}</span>\n                }\n                <!-- prettier-ignore -->\n                <span class=\"sr-only\">\n                  — {{ statusLabels()[job.status] }}@if (job.needs.length > 0) {. {{ needsLabel() }}: {{ job.needs.join(', ') }}}\n                </span>\n              </button>\n            </li>\n          }\n        </ul>\n      </li>\n    }\n  </ol>\n  <svg class=\"gbt-job-graph__links\" aria-hidden=\"true\" focusable=\"false\">\n    @for (link of links(); track link.key) {\n      <path [attr.d]=\"link.d\" [attr.data-done]=\"link.done ? '' : null\" />\n    }\n  </svg>\n</div>\n",
+		styles: [".gbt-job-graph{position:relative;overflow-x:auto}.gbt-job-graph__stages{position:relative;z-index:1;display:flex;gap:4rem;margin:0;padding:.5rem;list-style:none}.gbt-job-graph__stage-name{margin:0 0 .75rem;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.gbt-job-graph__jobs{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none}.gbt-job-graph__node{display:flex;align-items:center;gap:.5rem;min-width:13rem;padding:.5rem .75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--gbt-radius-tile, 4px);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}.gbt-job-graph__node:hover{border-color:var(--primary)}.gbt-job-graph__node:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-job-graph__node[aria-current=true]{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}.gbt-job-graph__glyph{display:inline-flex;flex-shrink:0}.gbt-job-graph__name{flex:1;font-weight:600}.gbt-job-graph__duration{font-size:12px;color:var(--text-secondary)}.gbt-job-graph__links{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}.gbt-job-graph__links path{fill:none;stroke:var(--border-color);stroke-width:2}.gbt-job-graph__links path[data-done]{stroke:var(--color-success-base)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"],
+		dependencies: [{
+			kind: "component",
+			type: JobStatus,
+			selector: "gbt-job-status",
+			inputs: ["status", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: JobGraph,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-job-graph",
+			standalone: true,
+			imports: [JobStatus],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-job-graph\" #graph>\n  <ol class=\"gbt-job-graph__stages\" [attr.aria-label]=\"ariaLabel()\">\n    @for (stage of stages(); track stage.name) {\n      <li class=\"gbt-job-graph__stage\">\n        <h3 class=\"gbt-job-graph__stage-name\">{{ stage.name }}</h3>\n        <ul class=\"gbt-job-graph__jobs\">\n          @for (job of stage.jobs; track job.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"gbt-job-graph__node\"\n                [attr.data-job-name]=\"job.name\"\n                [attr.data-status]=\"job.status\"\n                [attr.aria-current]=\"job.id === selectedJobId() ? 'true' : null\"\n                (click)=\"jobSelected.emit(job.id)\"\n              >\n                <gbt-job-status class=\"gbt-job-graph__glyph\" data-glyph [status]=\"job.status\" />\n                <span class=\"gbt-job-graph__name\">{{ job.name }}</span>\n                @if (job.durationLabel) {\n                  <span class=\"gbt-job-graph__duration\">{{ job.durationLabel }}</span>\n                }\n                <!-- prettier-ignore -->\n                <span class=\"sr-only\">\n                  — {{ statusLabels()[job.status] }}@if (job.needs.length > 0) {. {{ needsLabel() }}: {{ job.needs.join(', ') }}}\n                </span>\n              </button>\n            </li>\n          }\n        </ul>\n      </li>\n    }\n  </ol>\n  <svg class=\"gbt-job-graph__links\" aria-hidden=\"true\" focusable=\"false\">\n    @for (link of links(); track link.key) {\n      <path [attr.d]=\"link.d\" [attr.data-done]=\"link.done ? '' : null\" />\n    }\n  </svg>\n</div>\n",
+			styles: [".gbt-job-graph{position:relative;overflow-x:auto}.gbt-job-graph__stages{position:relative;z-index:1;display:flex;gap:4rem;margin:0;padding:.5rem;list-style:none}.gbt-job-graph__stage-name{margin:0 0 .75rem;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.gbt-job-graph__jobs{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none}.gbt-job-graph__node{display:flex;align-items:center;gap:.5rem;min-width:13rem;padding:.5rem .75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--gbt-radius-tile, 4px);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}.gbt-job-graph__node:hover{border-color:var(--primary)}.gbt-job-graph__node:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-job-graph__node[aria-current=true]{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}.gbt-job-graph__glyph{display:inline-flex;flex-shrink:0}.gbt-job-graph__name{flex:1;font-weight:600}.gbt-job-graph__duration{font-size:12px;color:var(--text-secondary)}.gbt-job-graph__links{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}.gbt-job-graph__links path{fill:none;stroke:var(--border-color);stroke-width:2}.gbt-job-graph__links path[data-done]{stroke:var(--color-success-base)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		stages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stages",
+				required: true
+			}]
+		}],
+		selectedJobId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedJobId",
+				required: false
+			}]
+		}],
+		statusLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusLabels",
+				required: false
+			}]
+		}],
+		needsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "needsLabel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		jobSelected: [{
+			type: i0.Output,
+			args: ["jobSelected"]
+		}],
+		graph: [{
+			type: i0.ViewChild,
+			args: ["graph", { isSignal: true }]
+		}]
+	}
+});
+export { JobGraph };
+
+//# sourceMappingURL=masmarino-gabarit-job-graph.mjs.map

package/fesm2022/masmarino-gabarit-job-graph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-job-graph.mjs","names":[],"sources":["../../../projects/gabarit/job-graph/job-graph-layout.ts","../../../projects/gabarit/job-graph/job-graph.ts","../../../projects/gabarit/job-graph/job-graph.html"],"sourcesContent":["import type { JobGraphStage } from './job-graph.types'\n\nexport interface GraphEdge {\n  from: string\n  to: string\n}\n\nexport interface Box {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport function graphEdges(stages: JobGraphStage[]): GraphEdge[] {\n  const names = new Set(stages.flatMap((stage) => stage.jobs.map((job) => job.name)))\n  return stages.flatMap((stage) =>\n    stage.jobs.flatMap((job) =>\n      job.needs.filter((need) => names.has(need)).map((need) => ({ from: need, to: job.name })),\n    ),\n  )\n}\n\nconst round = (value: number): number => Math.round(value * 10) / 10\n\nexport function linkPath(from: Box, to: Box): string {\n  const x1 = from.left + from.width\n  const y1 = from.top + from.height / 2\n  const x2 = to.left\n  const y2 = to.top + to.height / 2\n  const dx = Math.max(24, (x2 - x1) / 2)\n  return `M ${round(x1)} ${round(y1)} C ${round(x1 + dx)} ${round(y1)}, ${round(x2 - dx)} ${round(y2)}, ${round(x2)} ${round(y2)}`\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  afterRenderEffect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { JobStatus } from '@masmarino/gabarit/job-status'\nimport { graphEdges, linkPath } from './job-graph-layout'\nimport type { JobGraphStage, JobGraphStatus } from './job-graph.types'\n\nexport type { JobGraphJob, JobGraphStage, JobGraphStatus } from './job-graph.types'\n\ninterface GraphLink {\n  key: string\n  d: string\n  done: boolean\n}\n\nconst DEFAULT_STATUS_LABELS: Record<JobGraphStatus, string> = {\n  pending: 'Pending',\n  running: 'Running',\n  success: 'Succeeded',\n  failed: 'Failed',\n  canceled: 'Canceled',\n}\n\n@Component({\n  selector: 'gbt-job-graph',\n  standalone: true,\n  imports: [JobStatus],\n  templateUrl: './job-graph.html',\n  styleUrl: './job-graph.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class JobGraph {\n  stages = input.required<JobGraphStage[]>()\n  selectedJobId = input<string | null>(null)\n  statusLabels = input<Record<JobGraphStatus, string>>(DEFAULT_STATUS_LABELS)\n  needsLabel = input<string>('Needs')\n  ariaLabel = input<string>('Pipeline jobs')\n  jobSelected = output<string>()\n\n  protected readonly links = signal<GraphLink[]>([])\n\n  private readonly graph = viewChild<ElementRef<HTMLElement>>('graph')\n  private readonly destroyRef = inject(DestroyRef)\n\n  constructor() {\n    afterRenderEffect(() => {\n      this.stages()\n      this.measure()\n    })\n    afterNextRender(() => {\n      const root = this.graph()?.nativeElement\n      if (!root || typeof ResizeObserver === 'undefined') {\n        return\n      }\n      const observer = new ResizeObserver(() => this.measure())\n      observer.observe(root)\n      this.destroyRef.onDestroy(() => observer.disconnect())\n    })\n  }\n\n  private measure(): void {\n    const root = this.graph()?.nativeElement\n    if (!root) {\n      return\n    }\n    const origin = root.getBoundingClientRect()\n    const boxes = new Map<string, { left: number; top: number; width: number; height: number }>()\n    root.querySelectorAll<HTMLElement>('[data-job-name]').forEach((node) => {\n      const rect = node.getBoundingClientRect()\n      boxes.set(node.dataset['jobName'] ?? '', {\n        left: rect.left - origin.left + root.scrollLeft,\n        top: rect.top - origin.top + root.scrollTop,\n        width: rect.width,\n        height: rect.height,\n      })\n    })\n    const statuses = new Map(\n      this.stages().flatMap((s) => s.jobs.map((j) => [j.name, j.status] as const)),\n    )\n    this.links.set(\n      graphEdges(this.stages()).flatMap((edge) => {\n        const from = boxes.get(edge.from)\n        const to = boxes.get(edge.to)\n        return from && to\n          ? [\n              {\n                key: `${edge.from}->${edge.to}`,\n                d: linkPath(from, to),\n                done: statuses.get(edge.from) === 'success',\n              },\n            ]\n          : []\n      }),\n    )\n  }\n}\n","<div class=\"gbt-job-graph\" #graph>\n  <ol class=\"gbt-job-graph__stages\" [attr.aria-label]=\"ariaLabel()\">\n    @for (stage of stages(); track stage.name) {\n      <li class=\"gbt-job-graph__stage\">\n        <h3 class=\"gbt-job-graph__stage-name\">{{ stage.name }}</h3>\n        <ul class=\"gbt-job-graph__jobs\">\n          @for (job of stage.jobs; track job.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"gbt-job-graph__node\"\n                [attr.data-job-name]=\"job.name\"\n                [attr.data-status]=\"job.status\"\n                [attr.aria-current]=\"job.id === selectedJobId() ? 'true' : null\"\n                (click)=\"jobSelected.emit(job.id)\"\n              >\n                <gbt-job-status class=\"gbt-job-graph__glyph\" data-glyph [status]=\"job.status\" />\n                <span class=\"gbt-job-graph__name\">{{ job.name }}</span>\n                @if (job.durationLabel) {\n                  <span class=\"gbt-job-graph__duration\">{{ job.durationLabel }}</span>\n                }\n                <!-- prettier-ignore -->\n                <span class=\"sr-only\">\n                  — {{ statusLabels()[job.status] }}@if (job.needs.length > 0) {. {{ needsLabel() }}: {{ job.needs.join(', ') }}}\n                </span>\n              </button>\n            </li>\n          }\n        </ul>\n      </li>\n    }\n  </ol>\n  <svg class=\"gbt-job-graph__links\" aria-hidden=\"true\" focusable=\"false\">\n    @for (link of links(); track link.key) {\n      <path [attr.d]=\"link.d\" [attr.data-done]=\"link.done ? '' : null\" />\n    }\n  </svg>\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-job-status.mjs

@@ -0,0 +1,104 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+var JobStatus = class JobStatus {
+	status = input.required(...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: JobStatus,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: JobStatus,
+		isStandalone: true,
+		selector: "gbt-job-status",
+		inputs: {
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.data-status": "status()",
+			"attr.aria-hidden": "label() ? null : \"true\""
+		} },
+		ngImport: i0,
+		template: "<ng-template #glyph>\n  @switch (status()) {\n    @case ('success') {\n      <gbt-icon name=\"check-circle\" />\n    }\n    @case ('failed') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n    @case ('canceled') {\n      <gbt-icon name=\"x\" />\n    }\n    @default {\n      <span class=\"gbt-job-status__dot\"></span>\n    }\n  }\n</ng-template>\n@if (label(); as text) {\n  <span class=\"gbt-job-status__glyph\" aria-hidden=\"true\">\n    <ng-container *ngTemplateOutlet=\"glyph\" />\n  </span>\n  <span class=\"sr-only\">{{ text }}</span>\n} @else {\n  <ng-container *ngTemplateOutlet=\"glyph\" />\n}\n",
+		styles: [":host{display:inline-flex;flex-shrink:0}:host[data-status=success]{color:var(--color-success-text)}:host[data-status=failed]{color:var(--color-error-text)}:host[data-status=canceled]{color:var(--text-secondary)}.gbt-job-status__glyph{display:inline-flex;flex-shrink:0}.gbt-job-status__dot{box-sizing:border-box;width:16px;height:16px;border:2px solid var(--border-color);border-radius:50%}:host([data-status=running]) .gbt-job-status__dot{border-color:var(--primary);border-top-color:transparent;animation:gbt-job-status-spin .9s linear infinite}@media(prefers-reduced-motion:reduce){:host([data-status=running]) .gbt-job-status__dot{animation:none;border-top-color:var(--primary);background:var(--primary)}}@keyframes gbt-job-status-spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\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: JobStatus,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-job-status",
+			standalone: true,
+			imports: [Icon, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.data-status]": "status()",
+				"[attr.aria-hidden]": "label() ? null : \"true\""
+			},
+			template: "<ng-template #glyph>\n  @switch (status()) {\n    @case ('success') {\n      <gbt-icon name=\"check-circle\" />\n    }\n    @case ('failed') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n    @case ('canceled') {\n      <gbt-icon name=\"x\" />\n    }\n    @default {\n      <span class=\"gbt-job-status__dot\"></span>\n    }\n  }\n</ng-template>\n@if (label(); as text) {\n  <span class=\"gbt-job-status__glyph\" aria-hidden=\"true\">\n    <ng-container *ngTemplateOutlet=\"glyph\" />\n  </span>\n  <span class=\"sr-only\">{{ text }}</span>\n} @else {\n  <ng-container *ngTemplateOutlet=\"glyph\" />\n}\n",
+			styles: [":host{display:inline-flex;flex-shrink:0}:host[data-status=success]{color:var(--color-success-text)}:host[data-status=failed]{color:var(--color-error-text)}:host[data-status=canceled]{color:var(--text-secondary)}.gbt-job-status__glyph{display:inline-flex;flex-shrink:0}.gbt-job-status__dot{box-sizing:border-box;width:16px;height:16px;border:2px solid var(--border-color);border-radius:50%}:host([data-status=running]) .gbt-job-status__dot{border-color:var(--primary);border-top-color:transparent;animation:gbt-job-status-spin .9s linear infinite}@media(prefers-reduced-motion:reduce){:host([data-status=running]) .gbt-job-status__dot{animation:none;border-top-color:var(--primary);background:var(--primary)}}@keyframes gbt-job-status-spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { JobStatus };
+
+//# sourceMappingURL=masmarino-gabarit-job-status.mjs.map

package/fesm2022/masmarino-gabarit-job-status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-job-status.mjs","names":[],"sources":["../../../projects/gabarit/job-status/job-status.ts","../../../projects/gabarit/job-status/job-status.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type JobStatusValue = 'pending' | 'running' | 'success' | 'failed' | 'canceled'\n\n@Component({\n  selector: 'gbt-job-status',\n  standalone: true,\n  imports: [Icon, NgTemplateOutlet],\n  templateUrl: './job-status.html',\n  styleUrl: './job-status.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-status]': 'status()',\n    '[attr.aria-hidden]': 'label() ? null : \"true\"',\n  },\n})\nexport class JobStatus {\n  status = input.required<JobStatusValue>()\n  label = input<string | null>(null)\n}\n","<ng-template #glyph>\n  @switch (status()) {\n    @case ('success') {\n      <gbt-icon name=\"check-circle\" />\n    }\n    @case ('failed') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n    @case ('canceled') {\n      <gbt-icon name=\"x\" />\n    }\n    @default {\n      <span class=\"gbt-job-status__dot\"></span>\n    }\n  }\n</ng-template>\n@if (label(); as text) {\n  <span class=\"gbt-job-status__glyph\" aria-hidden=\"true\">\n    <ng-container *ngTemplateOutlet=\"glyph\" />\n  </span>\n  <span class=\"sr-only\">{{ text }}</span>\n} @else {\n  <ng-container *ngTemplateOutlet=\"glyph\" />\n}\n"],"mappings":";;;;AAkBA,IAAa,YAAb,MAAa,UAAS;CACpB,SAAS,MAAM,SAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAFvB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,oBAAA;GAAA,oBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UClBtB;EAwBA,QAAA,CAAA,24BAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDfY;GAAI,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AASrB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAZrB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,MAAM,gBAAgB;GAAC,iBAGhB,wBAAwB;GAAM,MACzC;IACJ,sBAAsB;IACtB,sBAAsB;GACvB;GAAA,UAAA;GAAA,QAAA,CAAA,24BAAA;EAAA,CAAA"}