@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-gauge-bar.mjs

@@ -0,0 +1,180 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var GaugeBar = class GaugeBar {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	max = input.required(...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	formattedValue = input.required(...ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []);
+	warningLabel = input.required(...ngDevMode ? [{ debugName: "warningLabel" }] : /* istanbul ignore next */ []);
+	criticalLabel = input.required(...ngDevMode ? [{ debugName: "criticalLabel" }] : /* istanbul ignore next */ []);
+	thresholds = input({
+		warning: 70,
+		critical: 90
+	}, ...ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []);
+	percentage = computed(() => {
+		const max = this.max();
+		if (max <= 0) return 0;
+		return Math.max(0, Math.min(100, this.value() / max * 100));
+	}, ...ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []);
+	severity = computed(() => {
+		const percentage = this.percentage();
+		const { warning, critical } = this.thresholds();
+		if (percentage >= critical) return "critical";
+		if (percentage >= warning) return "warning";
+		return null;
+	}, ...ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []);
+	severityLabel = computed(() => {
+		const severity = this.severity();
+		if (severity === "critical") return this.criticalLabel();
+		if (severity === "warning") return this.warningLabel();
+		return null;
+	}, ...ngDevMode ? [{ debugName: "severityLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GaugeBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: GaugeBar,
+		isStandalone: true,
+		selector: "gbt-gauge-bar",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			formattedValue: {
+				classPropertyName: "formattedValue",
+				publicName: "formattedValue",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			warningLabel: {
+				classPropertyName: "warningLabel",
+				publicName: "warningLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			criticalLabel: {
+				classPropertyName: "criticalLabel",
+				publicName: "criticalLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			thresholds: {
+				classPropertyName: "thresholds",
+				publicName: "thresholds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"gbt-gauge-bar\">\n  <div class=\"gbt-gauge-bar__header\">\n    <span class=\"gbt-gauge-bar__label\">{{ label() }}</span>\n    <span class=\"gbt-gauge-bar__value\">\n      {{ formattedValue() }}\n      @if (severityLabel(); as tierLabel) {\n        <span class=\"gbt-gauge-bar__tier\" [attr.data-tier]=\"severity()\">{{ tierLabel }}</span>\n      }\n    </span>\n  </div>\n  <div\n    class=\"gbt-gauge-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-valuenow]=\"percentage()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n  >\n    <div\n      class=\"gbt-gauge-bar__fill\"\n      [attr.data-tier]=\"severity()\"\n      [style.width.%]=\"percentage()\"\n    ></div>\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-gauge-bar__header{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.375rem;font-size:.875rem}.gbt-gauge-bar__label{color:var(--text-primary)}.gbt-gauge-bar__value{color:var(--text-secondary);font-variant-numeric:tabular-nums}.gbt-gauge-bar__tier{margin-left:.5rem}.gbt-gauge-bar__tier[data-tier=warning]{color:var(--color-warning-text)}.gbt-gauge-bar__tier[data-tier=critical]{color:var(--color-error-text)}.gbt-gauge-bar__track{height:.5rem;border-radius:var(--site-border-radius);background:var(--bg-hover);overflow:hidden}.gbt-gauge-bar__fill{height:100%;background:var(--color-success-base)}.gbt-gauge-bar__fill[data-tier=warning]{background:var(--color-warning-base)}.gbt-gauge-bar__fill[data-tier=critical]{background:var(--color-error-base)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GaugeBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-gauge-bar",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-gauge-bar\">\n  <div class=\"gbt-gauge-bar__header\">\n    <span class=\"gbt-gauge-bar__label\">{{ label() }}</span>\n    <span class=\"gbt-gauge-bar__value\">\n      {{ formattedValue() }}\n      @if (severityLabel(); as tierLabel) {\n        <span class=\"gbt-gauge-bar__tier\" [attr.data-tier]=\"severity()\">{{ tierLabel }}</span>\n      }\n    </span>\n  </div>\n  <div\n    class=\"gbt-gauge-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-valuenow]=\"percentage()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n  >\n    <div\n      class=\"gbt-gauge-bar__fill\"\n      [attr.data-tier]=\"severity()\"\n      [style.width.%]=\"percentage()\"\n    ></div>\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-gauge-bar__header{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.375rem;font-size:.875rem}.gbt-gauge-bar__label{color:var(--text-primary)}.gbt-gauge-bar__value{color:var(--text-secondary);font-variant-numeric:tabular-nums}.gbt-gauge-bar__tier{margin-left:.5rem}.gbt-gauge-bar__tier[data-tier=warning]{color:var(--color-warning-text)}.gbt-gauge-bar__tier[data-tier=critical]{color:var(--color-error-text)}.gbt-gauge-bar__track{height:.5rem;border-radius:var(--site-border-radius);background:var(--bg-hover);overflow:hidden}.gbt-gauge-bar__fill{height:100%;background:var(--color-success-base)}.gbt-gauge-bar__fill[data-tier=warning]{background:var(--color-warning-base)}.gbt-gauge-bar__fill[data-tier=critical]{background:var(--color-error-base)}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		formattedValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formattedValue",
+				required: true
+			}]
+		}],
+		warningLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "warningLabel",
+				required: true
+			}]
+		}],
+		criticalLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "criticalLabel",
+				required: true
+			}]
+		}],
+		thresholds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thresholds",
+				required: false
+			}]
+		}]
+	}
+});
+export { GaugeBar };
+
+//# sourceMappingURL=masmarino-gabarit-gauge-bar.mjs.map

package/fesm2022/masmarino-gabarit-gauge-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-gauge-bar.mjs","names":[],"sources":["../../../projects/gabarit/gauge-bar/gauge-bar.ts","../../../projects/gabarit/gauge-bar/gauge-bar.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'\n\n@Component({\n  selector: 'gbt-gauge-bar',\n  standalone: true,\n  imports: [],\n  templateUrl: './gauge-bar.html',\n  styleUrl: './gauge-bar.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GaugeBar {\n  value = input.required<number>()\n  max = input.required<number>()\n  label = input.required<string>()\n  formattedValue = input.required<string>()\n  warningLabel = input.required<string>()\n  criticalLabel = input.required<string>()\n  thresholds = input<{ warning: number; critical: number }>({ warning: 70, critical: 90 })\n\n  protected readonly percentage = computed(() => {\n    const max = this.max()\n\n    if (max <= 0) return 0\n    return Math.max(0, Math.min(100, (this.value() / max) * 100))\n  })\n\n  protected readonly severity = computed<'warning' | 'critical' | null>(() => {\n    const percentage = this.percentage()\n    const { warning, critical } = this.thresholds()\n    if (percentage >= critical) return 'critical'\n    if (percentage >= warning) return 'warning'\n    return null\n  })\n\n  protected readonly severityLabel = computed(() => {\n    const severity = this.severity()\n    if (severity === 'critical') return this.criticalLabel()\n    if (severity === 'warning') return this.warningLabel()\n    return null\n  })\n}\n","<div class=\"gbt-gauge-bar\">\n  <div class=\"gbt-gauge-bar__header\">\n    <span class=\"gbt-gauge-bar__label\">{{ label() }}</span>\n    <span class=\"gbt-gauge-bar__value\">\n      {{ formattedValue() }}\n      @if (severityLabel(); as tierLabel) {\n        <span class=\"gbt-gauge-bar__tier\" [attr.data-tier]=\"severity()\">{{ tierLabel }}</span>\n      }\n    </span>\n  </div>\n  <div\n    class=\"gbt-gauge-bar__track\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-valuenow]=\"percentage()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n  >\n    <div\n      class=\"gbt-gauge-bar__fill\"\n      [attr.data-tier]=\"severity()\"\n      [style.width.%]=\"percentage()\"\n    ></div>\n  </div>\n</div>\n"],"mappings":";;AAUA,IAAa,WAAb,MAAa,SAAQ;CACnB,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,MAAM,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAC9B,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,iBAAiB,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,eAAe,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,gBAAgB,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CACxC,aAAa,MAA6C;EAAE,SAAS;EAAI,UAAU;CAAE,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAErE,aAAa,eAAc;EAC5C,MAAM,MAAM,KAAK,IAAG;EAEpB,IAAI,OAAO,GAAG,OAAO;EACrB,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,KAAK,MAAK,IAAK,MAAO,GAAG,CAAC;CAC9D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,WAAW,eAA6C;EACzE,MAAM,aAAa,KAAK,WAAU;EAClC,MAAM,EAAE,SAAS,aAAa,KAAK,WAAU;EAC7C,IAAI,cAAc,UAAU,OAAO;EACnC,IAAI,cAAc,SAAS,OAAO;EAClC,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,gBAAgB,eAAc;EAC/C,MAAM,WAAW,KAAK,SAAQ;EAC9B,IAAI,aAAa,YAAY,OAAO,KAAK,cAAa;EACtD,IAAI,aAAa,WAAW,OAAO,KAAK,aAAY;EACpD,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CA7BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCVrB;EA0BA,QAAA,CAAA,4xBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADhBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EARpB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,4xBAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-git-field.mjs

@@ -0,0 +1,127 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+const W = 1600;
+const H = 560;
+const LANES = 7;
+const laneY = (lane) => 50 + lane * (460 / 6);
+const COLORS = [
+	"brand",
+	"indigo",
+	"patina",
+	"brand-2",
+	"indigo",
+	"patina",
+	"brand"
+];
+function random(seed) {
+	let state = seed;
+	return () => {
+		state = state + 1831565813 | 0;
+		let t = Math.imul(state ^ state >>> 15, 1 | state);
+		t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function draw() {
+	const next = random(20261004);
+	const lines = [];
+	const commits = [];
+	const pulses = [];
+	for (let lane = 0; lane < LANES; lane++) {
+		const y = laneY(lane);
+		const color = COLORS[lane];
+		lines.push({
+			d: `M0 ${y}H${W}`,
+			color
+		});
+		for (let x = 40 + next() * 120; x < 1570; x += 110 + next() * 170) commits.push({
+			x,
+			y,
+			color,
+			hollow: next() < .3,
+			delay: next() * 6
+		});
+		if (lane % 2 === 0) pulses.push({
+			d: `M0 ${y}H${W}`,
+			color,
+			duration: 7 + next() * 6,
+			delay: -next() * 10
+		});
+	}
+	for (let n = 0; n < 9; n++) {
+		const lane = Math.floor(next() * LANES);
+		const to = lane === 0 ? 1 : lane === 6 ? 5 : lane + (next() < .5 ? -1 : 1);
+		const x0 = 80 + next() * 1080;
+		const length = 140 + next() * 220;
+		const [y0, y1] = [laneY(lane), laneY(to)];
+		const color = COLORS[to];
+		lines.push({
+			d: `M${x0} ${y0}C${x0 + 50} ${y0} ${x0 + 40} ${y1} ${x0 + 90} ${y1}H${x0 + 90 + length}C${x0 + 140 + length} ${y1} ${x0 + 130 + length} ${y0} ${x0 + 180 + length} ${y0}`,
+			color
+		});
+		commits.push({
+			x: x0 + 90 + length / 2,
+			y: y1,
+			color,
+			hollow: false,
+			delay: next() * 6
+		});
+	}
+	return {
+		lines,
+		commits,
+		pulses
+	};
+}
+const DRAWING = draw();
+var GitField = class GitField {
+	width = W;
+	height = H;
+	tiles = [0, W];
+	drawing = DRAWING;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GitField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: GitField,
+		isStandalone: true,
+		selector: "gbt-git-field",
+		host: {
+			attributes: { "aria-hidden": "true" },
+			classAttribute: "gbt-git-field"
+		},
+		ngImport: i0,
+		template: "<div class=\"gbt-git-field__wash gbt-git-field__wash--a\"></div>\n<div class=\"gbt-git-field__wash gbt-git-field__wash--b\"></div>\n<svg\n  class=\"gbt-git-field__svg\"\n  [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"\n  preserveAspectRatio=\"xMaxYMid slice\"\n  focusable=\"false\"\n>\n  <g class=\"gbt-git-field__track\">\n    @for (offset of tiles; track offset) {\n      <g [attr.transform]=\"'translate(' + offset + ' 0)'\">\n        @for (line of drawing.lines; track $index) {\n          <path class=\"gbt-git-field__line\" [attr.data-color]=\"line.color\" [attr.d]=\"line.d\" />\n        }\n        @for (pulse of drawing.pulses; track $index) {\n          <path\n            class=\"gbt-git-field__pulse\"\n            [attr.data-color]=\"pulse.color\"\n            [attr.d]=\"pulse.d\"\n            pathLength=\"1000\"\n            [style.animation-duration.s]=\"pulse.duration\"\n            [style.animation-delay.s]=\"pulse.delay\"\n          />\n        }\n        @for (commit of drawing.commits; track $index) {\n          <circle\n            class=\"gbt-git-field__commit\"\n            [class.is-hollow]=\"commit.hollow\"\n            [attr.data-color]=\"commit.color\"\n            [attr.cx]=\"commit.x\"\n            [attr.cy]=\"commit.y\"\n            r=\"4.5\"\n            [style.animation-delay.s]=\"commit.delay\"\n          />\n        }\n      </g>\n    }\n  </g>\n</svg>\n",
+		styles: [":host{--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.gbt-git-field__svg{-webkit-mask-image:radial-gradient(ellipse 42% 55% at 50% 50%,transparent 0%,rgba(0,0,0,.25) 55%,#000 100%);mask-image:radial-gradient(ellipse 42% 55% at 50% 50%,transparent 0%,rgba(0,0,0,.25) 55%,#000 100%)}@media(max-width:47.99rem){:host{opacity:.5}}.gbt-git-field__wash{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}.gbt-git-field__wash--a{top:-30%;right:10%;background:var(--accent);animation:wash-a 26s ease-in-out infinite alternate}.gbt-git-field__wash--b{right:-20%;bottom:-45%;background:var(--color-info-vivid-base);animation:wash-b 32s ease-in-out infinite alternate}@keyframes wash-a{to{transform:translate3d(-18%,20%,0) scale(1.15)}}@keyframes wash-b{to{transform:translate3d(-25%,-15%,0) scale(.9)}}.gbt-git-field__svg{position:absolute;inset:0;width:100%;height:100%}.gbt-git-field__track{transform-box:fill-box;animation:field-pan 120s linear infinite}@keyframes field-pan{to{transform:translate3d(-50%,0,0)}}[data-color=brand]{--c: var(--accent)}[data-color=brand-2]{--c: var(--color-warning-vivid-base)}[data-color=indigo]{--c: var(--color-info-vivid-base)}[data-color=patina]{--c: var(--color-success-vivid-base)}.gbt-git-field__line{fill:none;stroke:var(--c);stroke-width:1.5;stroke-opacity:.45}.gbt-git-field__pulse{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:70 930;animation:pulse-run 10s linear infinite}@keyframes pulse-run{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}.gbt-git-field__commit{fill:var(--c);stroke:var(--c);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:.55;animation:commit-blink 6s ease-in-out infinite}.gbt-git-field__commit.is-hollow{fill:var(--bg-panel)}@keyframes commit-blink{0%,70%,to{opacity:.55;transform:none}80%{opacity:1;transform:scale(1.5)}}@media(prefers-reduced-motion:reduce){.gbt-git-field__wash,.gbt-git-field__track,.gbt-git-field__pulse,.gbt-git-field__commit{animation:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GitField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-git-field",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "gbt-git-field",
+				"aria-hidden": "true"
+			},
+			template: "<div class=\"gbt-git-field__wash gbt-git-field__wash--a\"></div>\n<div class=\"gbt-git-field__wash gbt-git-field__wash--b\"></div>\n<svg\n  class=\"gbt-git-field__svg\"\n  [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"\n  preserveAspectRatio=\"xMaxYMid slice\"\n  focusable=\"false\"\n>\n  <g class=\"gbt-git-field__track\">\n    @for (offset of tiles; track offset) {\n      <g [attr.transform]=\"'translate(' + offset + ' 0)'\">\n        @for (line of drawing.lines; track $index) {\n          <path class=\"gbt-git-field__line\" [attr.data-color]=\"line.color\" [attr.d]=\"line.d\" />\n        }\n        @for (pulse of drawing.pulses; track $index) {\n          <path\n            class=\"gbt-git-field__pulse\"\n            [attr.data-color]=\"pulse.color\"\n            [attr.d]=\"pulse.d\"\n            pathLength=\"1000\"\n            [style.animation-duration.s]=\"pulse.duration\"\n            [style.animation-delay.s]=\"pulse.delay\"\n          />\n        }\n        @for (commit of drawing.commits; track $index) {\n          <circle\n            class=\"gbt-git-field__commit\"\n            [class.is-hollow]=\"commit.hollow\"\n            [attr.data-color]=\"commit.color\"\n            [attr.cx]=\"commit.x\"\n            [attr.cy]=\"commit.y\"\n            r=\"4.5\"\n            [style.animation-delay.s]=\"commit.delay\"\n          />\n        }\n      </g>\n    }\n  </g>\n</svg>\n",
+			styles: [":host{--primary: var(--graphite-100);--primary-hover: #c0c5cb;--bg-principal: var(--graphite-850);--bg-panel: var(--graphite-900);--bg-hover: rgba(231, 235, 241, .07);--bg-track: var(--graphite-700);--bg-inverse: var(--graphite-100);--border-color: var(--graphite-500);--gbt-hairline: rgba(205, 215, 230, .12);--gbt-card-border: rgba(205, 215, 230, .12);--text-primary: var(--graphite-100);--text-secondary: var(--graphite-300);--text-discret: var(--graphite-400);--text-on-color: var(--graphite-1000);--text-on-primary: var(--graphite-1000);--text-on-error: var(--graphite-1000);--accent: var(--rust-400);--accent-text: var(--rust-300);--focus-ring: var(--rust-400);--color-success-base: var(--patina-400);--color-success-text: var(--patina-400);--color-success-hover: #61c8a7;--color-success-bg: rgba(63, 191, 149, .16);--color-success-bg-text: var(--patina-300);--color-success-vivid-base: var(--patina-400);--color-warning-base: var(--amber-400);--color-warning-text: var(--amber-400);--color-warning-hover: #f2bd61;--color-warning-bg: rgba(245, 177, 61, .14);--color-warning-bg-text: var(--amber-300);--color-warning-vivid-base: var(--amber-400);--color-error-base: var(--red-400);--color-error-fill: var(--red-400);--color-error-text: var(--red-300);--color-error-hover: #f09994;--color-error-bg: rgba(242, 133, 125, .16);--color-error-bg-text: var(--red-200);--color-error-vivid-base: var(--red-400);--color-info-bg: rgba(139, 155, 255, .16);--color-info-bg-text: var(--indigo-200);--color-info-vivid-base: var(--indigo-400);--chart-series-1-base: #e69f00;--chart-series-2-base: #009e73;--chart-series-3-base: #0072b2;--chart-series-4-base: #e2703a;--chart-series-5-base: #d691bd;--chart-series-6-base: #9d94e0;--chart-grid: rgba(205, 215, 230, .12);--site-shadow-sm: none;--site-shadow-md: 0 0 0 1px rgba(205, 215, 230, .26);--site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, .26), 0 12px 32px rgba(0, 0, 0, .4);--bg-panel: var(--graphite-950);--text-secondary: var(--graphite-200);color-scheme:dark;color:var(--text-primary);position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.gbt-git-field__svg{-webkit-mask-image:radial-gradient(ellipse 42% 55% at 50% 50%,transparent 0%,rgba(0,0,0,.25) 55%,#000 100%);mask-image:radial-gradient(ellipse 42% 55% at 50% 50%,transparent 0%,rgba(0,0,0,.25) 55%,#000 100%)}@media(max-width:47.99rem){:host{opacity:.5}}.gbt-git-field__wash{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}.gbt-git-field__wash--a{top:-30%;right:10%;background:var(--accent);animation:wash-a 26s ease-in-out infinite alternate}.gbt-git-field__wash--b{right:-20%;bottom:-45%;background:var(--color-info-vivid-base);animation:wash-b 32s ease-in-out infinite alternate}@keyframes wash-a{to{transform:translate3d(-18%,20%,0) scale(1.15)}}@keyframes wash-b{to{transform:translate3d(-25%,-15%,0) scale(.9)}}.gbt-git-field__svg{position:absolute;inset:0;width:100%;height:100%}.gbt-git-field__track{transform-box:fill-box;animation:field-pan 120s linear infinite}@keyframes field-pan{to{transform:translate3d(-50%,0,0)}}[data-color=brand]{--c: var(--accent)}[data-color=brand-2]{--c: var(--color-warning-vivid-base)}[data-color=indigo]{--c: var(--color-info-vivid-base)}[data-color=patina]{--c: var(--color-success-vivid-base)}.gbt-git-field__line{fill:none;stroke:var(--c);stroke-width:1.5;stroke-opacity:.45}.gbt-git-field__pulse{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:70 930;animation:pulse-run 10s linear infinite}@keyframes pulse-run{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}.gbt-git-field__commit{fill:var(--c);stroke:var(--c);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:.55;animation:commit-blink 6s ease-in-out infinite}.gbt-git-field__commit.is-hollow{fill:var(--bg-panel)}@keyframes commit-blink{0%,70%,to{opacity:.55;transform:none}80%{opacity:1;transform:scale(1.5)}}@media(prefers-reduced-motion:reduce){.gbt-git-field__wash,.gbt-git-field__track,.gbt-git-field__pulse,.gbt-git-field__commit{animation:none}}\n"]
+		}]
+	}]
+});
+export { GitField };
+
+//# sourceMappingURL=masmarino-gabarit-git-field.mjs.map

package/fesm2022/masmarino-gabarit-git-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-git-field.mjs","names":[],"sources":["../../../projects/gabarit/git-field/git-field.ts","../../../projects/gabarit/git-field/git-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n/** Width and height of one tile of the drawing; two tiles side by side scroll by one width and loop without a seam. */\nconst W = 1600\nconst H = 560\nconst LANES = 7\nconst laneY = (lane: number) => 50 + lane * ((H - 100) / (LANES - 1))\n\n// Each lane has a colour of the family: the rust accent, the amber, the indigo and the patina green.\nconst COLORS = ['brand', 'indigo', 'patina', 'brand-2', 'indigo', 'patina', 'brand'] as const\ntype Color = (typeof COLORS)[number]\n\ninterface Line {\n  d: string\n  color: Color\n}\n\ninterface Commit {\n  x: number\n  y: number\n  color: Color\n  hollow: boolean\n  /** Seconds of delay of its blink, so that the commits do not all light up together. */\n  delay: number\n}\n\ninterface Pulse {\n  d: string\n  color: Color\n  duration: number\n  delay: number\n}\n\n/** A small seeded generator: the drawing is the same on the server and in the browser, so hydration keeps it. */\nfunction random(seed: number): () => number {\n  let state = seed\n  return () => {\n    state = (state + 0x6d2b79f5) | 0\n    let t = Math.imul(state ^ (state >>> 15), 1 | state)\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296\n  }\n}\n\n/**\n * A commit graph drawn across the tile: one straight line per lane, branches that leave a lane for the next one and\n * merge back, commits along them. Every line is straight at both edges, so the second tile carries on the first.\n */\nfunction draw(): { lines: Line[]; commits: Commit[]; pulses: Pulse[] } {\n  const next = random(20261004)\n  const lines: Line[] = []\n  const commits: Commit[] = []\n  const pulses: Pulse[] = []\n\n  for (let lane = 0; lane < LANES; lane++) {\n    const y = laneY(lane)\n    const color = COLORS[lane]\n    lines.push({ d: `M0 ${y}H${W}`, color })\n    for (let x = 40 + next() * 120; x < W - 30; x += 110 + next() * 170) {\n      commits.push({ x, y, color, hollow: next() < 0.3, delay: next() * 6 })\n    }\n    if (lane % 2 === 0) {\n      pulses.push({\n        d: `M0 ${y}H${W}`,\n        color,\n        duration: 7 + next() * 6,\n        delay: -next() * 10,\n      })\n    }\n  }\n\n  // Branches: from a lane to its neighbour and back, never crossing the tile's edges.\n  for (let n = 0; n < 9; n++) {\n    const lane = Math.floor(next() * LANES)\n    const to = lane === 0 ? 1 : lane === LANES - 1 ? LANES - 2 : lane + (next() < 0.5 ? -1 : 1)\n    const x0 = 80 + next() * (W - 520)\n    const length = 140 + next() * 220\n    const [y0, y1] = [laneY(lane), laneY(to)]\n    const color = COLORS[to]\n    lines.push({\n      d: `M${x0} ${y0}C${x0 + 50} ${y0} ${x0 + 40} ${y1} ${x0 + 90} ${y1}H${x0 + 90 + length}C${x0 + 140 + length} ${y1} ${x0 + 130 + length} ${y0} ${x0 + 180 + length} ${y0}`,\n      color,\n    })\n    commits.push({\n      x: x0 + 90 + length / 2,\n      y: y1,\n      color,\n      hollow: false,\n      delay: next() * 6,\n    })\n  }\n  return { lines, commits, pulses }\n}\n\nconst DRAWING = draw()\n\n/**\n * An animated commit graph on the graphite frame, behind a centred panel (the `[auth-backdrop]` slot of the sign-in\n * pages) or a dark band: lanes that drift slowly sideways, their commits blinking in turn and pushes running along\n * some of them, over two soft fields of colour. Decoration only: hidden from assistive technology, under the content,\n * and still when reduced motion is asked for. It fills its nearest positioned ancestor.\n */\n@Component({\n  selector: 'gbt-git-field',\n  templateUrl: './git-field.html',\n  styleUrl: './git-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'gbt-git-field',\n    'aria-hidden': 'true',\n  },\n})\nexport class GitField {\n  protected readonly width = W\n  protected readonly height = H\n  protected readonly tiles = [0, W]\n  protected readonly drawing = DRAWING\n}\n","<div class=\"gbt-git-field__wash gbt-git-field__wash--a\"></div>\n<div class=\"gbt-git-field__wash gbt-git-field__wash--b\"></div>\n<svg\n  class=\"gbt-git-field__svg\"\n  [attr.viewBox]=\"'0 0 ' + width + ' ' + height\"\n  preserveAspectRatio=\"xMaxYMid slice\"\n  focusable=\"false\"\n>\n  <g class=\"gbt-git-field__track\">\n    @for (offset of tiles; track offset) {\n      <g [attr.transform]=\"'translate(' + offset + ' 0)'\">\n        @for (line of drawing.lines; track $index) {\n          <path class=\"gbt-git-field__line\" [attr.data-color]=\"line.color\" [attr.d]=\"line.d\" />\n        }\n        @for (pulse of drawing.pulses; track $index) {\n          <path\n            class=\"gbt-git-field__pulse\"\n            [attr.data-color]=\"pulse.color\"\n            [attr.d]=\"pulse.d\"\n            pathLength=\"1000\"\n            [style.animation-duration.s]=\"pulse.duration\"\n            [style.animation-delay.s]=\"pulse.delay\"\n          />\n        }\n        @for (commit of drawing.commits; track $index) {\n          <circle\n            class=\"gbt-git-field__commit\"\n            [class.is-hollow]=\"commit.hollow\"\n            [attr.data-color]=\"commit.color\"\n            [attr.cx]=\"commit.x\"\n            [attr.cy]=\"commit.y\"\n            r=\"4.5\"\n            [style.animation-delay.s]=\"commit.delay\"\n          />\n        }\n      </g>\n    }\n  </g>\n</svg>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-icon-marker.mjs

@@ -0,0 +1,150 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+var IconMarker = class IconMarker {
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	tone = input("neutral", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	shape = input("disc", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+	appearance = input("soft", ...ngDevMode ? [{ debugName: "appearance" }] : /* 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: IconMarker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: IconMarker,
+		isStandalone: true,
+		selector: "gbt-icon-marker",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shape: {
+				classPropertyName: "shape",
+				publicName: "shape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<span\n  class=\"gbt-icon-marker\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-size]=\"size()\"\n  [attr.data-shape]=\"shape() === 'tile' ? 'tile' : null\"\n  [attr.data-appearance]=\"appearance() === 'outline' ? 'outline' : null\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n>\n  <gbt-icon [name]=\"icon()\" />\n</span>\n",
+		styles: [":host{display:inline-flex;flex:none}.gbt-icon-marker{--gbt-marker-size: 2rem;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-marker-size);height:var(--gbt-marker-size);border-radius:50%;background:color-mix(in srgb,var(--border-color) 18%,transparent);color:var(--text-secondary);font-size:.9375rem}.gbt-icon-marker[data-size=sm]{--gbt-marker-size: 1.5rem;font-size:.75rem}.gbt-icon-marker[data-size=lg]{--gbt-marker-size: 2.5rem;font-size:1.125rem}.gbt-icon-marker[data-size=xl]{--gbt-marker-size: 3.25rem;font-size:1.375rem}.gbt-icon-marker[data-shape=tile]{border-radius:var(--gbt-radius-tile, 4px)}.gbt-icon-marker[data-tone=primary]{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}.gbt-icon-marker[data-tone=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-icon-marker[data-tone=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-icon-marker[data-tone=error]{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-icon-marker[data-tone=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-icon-marker[data-appearance=outline]{border:1px solid var(--gbt-card-border);background:var(--bg-principal);color:var(--text-secondary)}.gbt-icon-marker[data-appearance=outline][data-tone=primary]{color:var(--primary)}.gbt-icon-marker[data-appearance=outline][data-tone=success]{color:var(--color-success-text)}.gbt-icon-marker[data-appearance=outline][data-tone=warning]{color:var(--color-warning-text)}.gbt-icon-marker[data-appearance=outline][data-tone=error]{color:var(--color-error-text)}.gbt-icon-marker[data-appearance=outline][data-tone=info]{color:var(--color-info-bg-text)}\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: IconMarker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-icon-marker",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span\n  class=\"gbt-icon-marker\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-size]=\"size()\"\n  [attr.data-shape]=\"shape() === 'tile' ? 'tile' : null\"\n  [attr.data-appearance]=\"appearance() === 'outline' ? 'outline' : null\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n>\n  <gbt-icon [name]=\"icon()\" />\n</span>\n",
+			styles: [":host{display:inline-flex;flex:none}.gbt-icon-marker{--gbt-marker-size: 2rem;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-marker-size);height:var(--gbt-marker-size);border-radius:50%;background:color-mix(in srgb,var(--border-color) 18%,transparent);color:var(--text-secondary);font-size:.9375rem}.gbt-icon-marker[data-size=sm]{--gbt-marker-size: 1.5rem;font-size:.75rem}.gbt-icon-marker[data-size=lg]{--gbt-marker-size: 2.5rem;font-size:1.125rem}.gbt-icon-marker[data-size=xl]{--gbt-marker-size: 3.25rem;font-size:1.375rem}.gbt-icon-marker[data-shape=tile]{border-radius:var(--gbt-radius-tile, 4px)}.gbt-icon-marker[data-tone=primary]{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}.gbt-icon-marker[data-tone=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-icon-marker[data-tone=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-icon-marker[data-tone=error]{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-icon-marker[data-tone=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-icon-marker[data-appearance=outline]{border:1px solid var(--gbt-card-border);background:var(--bg-principal);color:var(--text-secondary)}.gbt-icon-marker[data-appearance=outline][data-tone=primary]{color:var(--primary)}.gbt-icon-marker[data-appearance=outline][data-tone=success]{color:var(--color-success-text)}.gbt-icon-marker[data-appearance=outline][data-tone=warning]{color:var(--color-warning-text)}.gbt-icon-marker[data-appearance=outline][data-tone=error]{color:var(--color-error-text)}.gbt-icon-marker[data-appearance=outline][data-tone=info]{color:var(--color-info-bg-text)}\n"]
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		shape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shape",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { IconMarker };
+
+//# sourceMappingURL=masmarino-gabarit-icon-marker.mjs.map

package/fesm2022/masmarino-gabarit-icon-marker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-icon-marker.mjs","names":[],"sources":["../../../projects/gabarit/icon-marker/icon-marker.ts","../../../projects/gabarit/icon-marker/icon-marker.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type IconMarkerTone = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type IconMarkerSize = 'sm' | 'md' | 'lg' | 'xl'\nexport type IconMarkerShape = 'disc' | 'tile'\nexport type IconMarkerAppearance = 'soft' | 'outline'\n\n@Component({\n  selector: 'gbt-icon-marker',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './icon-marker.html',\n  styleUrl: './icon-marker.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconMarker {\n  icon = input.required<string>()\n  tone = input<IconMarkerTone>('neutral')\n  size = input<IconMarkerSize>('md')\n  shape = input<IconMarkerShape>('disc')\n  appearance = input<IconMarkerAppearance>('soft')\n  label = input<string | null>(null)\n}\n","<span\n  class=\"gbt-icon-marker\"\n  [attr.data-tone]=\"tone()\"\n  [attr.data-size]=\"size()\"\n  [attr.data-shape]=\"shape() === 'tile' ? 'tile' : null\"\n  [attr.data-appearance]=\"appearance() === 'outline' ? 'outline' : null\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n>\n  <gbt-icon [name]=\"icon()\" />\n</span>\n"],"mappings":";;;AAgBA,IAAa,aAAb,MAAa,WAAU;CACrB,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,OAAO,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,OAAO,MAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,QAAQ,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,aAAa,MAA4B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAChD,QAAQ,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CANvB,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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;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,UAAA;EAAA,UChBvB;EAYA,QAAA,CAAA,uvDAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDDY;GAAI,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKH,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EARtB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,IAAI;GAAC,iBAGE,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,uvDAAA;EAAA,CAAA"}