@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-format.mjs

@@ -0,0 +1,345 @@
+import * as i0 from "@angular/core";
+import { LOCALE_ID, Pipe, inject } from "@angular/core";
+const MAX_ENTRIES = 100;
+const cache = /* @__PURE__ */ new Map();
+function cachedIntl(kind, locale, options, create) {
+	const key = `${kind}|${locale}|${options === void 0 ? "" : JSON.stringify(options)}`;
+	const hit = cache.get(key);
+	if (hit !== void 0) return hit;
+	if (cache.size >= MAX_ENTRIES) cache.clear();
+	const created = create();
+	cache.set(key, created);
+	return created;
+}
+const NBSP = "\xA0";
+const UNITS = [
+	"byte",
+	"kilobyte",
+	"megabyte",
+	"gigabyte",
+	"terabyte",
+	"petabyte"
+];
+function siLabels(locale) {
+	return cachedIntl("bytes-labels", locale, void 0, () => UNITS.map((unit) => {
+		return new Intl.NumberFormat(locale, {
+			style: "unit",
+			unit,
+			unitDisplay: "narrow"
+		}).formatToParts(1).find((part) => part.type === "unit")?.value ?? unit;
+	}));
+}
+const IEC_SYMBOLS = [
+	"B",
+	"KiB",
+	"MiB",
+	"GiB",
+	"TiB",
+	"PiB"
+];
+function label(locale, rank, options) {
+	const si = siLabels(locale)[rank];
+	if (rank === 0 || options.base === 1e3) return si;
+	const capital = si.charAt(0).toUpperCase();
+	if (options.binaryUnits === "legacy") return capital + si.slice(1);
+	return /^\p{Script=Latin}/u.test(si) ? `${capital}i${si.slice(1)}` : IEC_SYMBOLS[rank];
+}
+function round(value, decimals) {
+	const factor = 10 ** decimals;
+	return Math.round(value * factor) / factor;
+}
+function formatBytes(bytes, locale, options = {}) {
+	if (!Number.isFinite(bytes)) return "—";
+	const base = options.base === 1e3 ? 1e3 : 1024;
+	const requested = Math.trunc(options.decimals ?? 1);
+	const decimals = Number.isFinite(requested) ? Math.max(0, Math.min(20, requested)) : 1;
+	const last = UNITS.length - 1;
+	let value = Math.abs(bytes);
+	let rank = 0;
+	while (value >= base && rank < last) {
+		value /= base;
+		rank++;
+	}
+	let shown = round(value, rank === 0 ? 0 : decimals);
+	if (shown >= base && rank < last) {
+		shown = round(shown / base, decimals);
+		rank++;
+	}
+	const signed = bytes < 0 && shown !== 0 ? -shown : shown;
+	return `${cachedIntl("bytes-number", locale, { decimals: rank === 0 ? 0 : decimals }, () => new Intl.NumberFormat(locale, {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: rank === 0 ? 0 : decimals
+	})).format(signed)}${NBSP}${label(locale, rank, {
+		...options,
+		base
+	})}`;
+}
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const RANKS = [
+	[
+		"second",
+		SECOND,
+		MINUTE
+	],
+	[
+		"minute",
+		MINUTE,
+		HOUR
+	],
+	[
+		"hour",
+		HOUR,
+		DAY
+	],
+	[
+		"day",
+		DAY,
+		WEEK
+	],
+	[
+		"week",
+		WEEK,
+		MONTH
+	],
+	[
+		"month",
+		MONTH,
+		YEAR
+	],
+	[
+		"year",
+		YEAR,
+		Infinity
+	]
+];
+const NOW_WINDOW = 10 * SECOND;
+function toTime(value) {
+	return value instanceof Date ? value.getTime() : new Date(value).getTime();
+}
+function relativeFormat(locale, style, numeric) {
+	return cachedIntl("relative", locale, {
+		style,
+		numeric
+	}, () => new Intl.RelativeTimeFormat(locale, {
+		style,
+		numeric
+	}));
+}
+function formatRelativeTime(date, locale, now = Date.now(), options = {}) {
+	if (date === null || date === void 0) return "";
+	const time = toTime(date);
+	const reference = toTime(now);
+	if (Number.isNaN(time) || Number.isNaN(reference)) return "—";
+	const diff = time - reference;
+	const gap = Math.abs(diff);
+	const sign = diff < 0 ? -1 : 1;
+	const style = options.style ?? "long";
+	if (options.absoluteAfterDays !== void 0 && gap >= options.absoluteAfterDays * DAY) return formatDateTime(time, locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		...options.timeZone ? { timeZone: options.timeZone } : {}
+	});
+	if (gap < NOW_WINDOW) return relativeFormat(locale, style, "auto").format(0, "second");
+	const rtf = relativeFormat(locale, style, options.numeric ?? "auto");
+	for (const [unit, size, below] of RANKS) if (gap < below || unit === options.maxUnit) return rtf.format(sign * Math.trunc(gap / size), unit);
+	return rtf.format(sign * Math.trunc(gap / YEAR), "year");
+}
+const FIELD_OPTIONS = [
+	"dateStyle",
+	"timeStyle",
+	"weekday",
+	"era",
+	"year",
+	"month",
+	"day",
+	"dayPeriod",
+	"hour",
+	"minute",
+	"second",
+	"fractionalSecondDigits",
+	"timeZoneName"
+];
+function selectsFields(options) {
+	return options !== void 0 && FIELD_OPTIONS.some((field) => options[field] !== void 0);
+}
+function formatDateTime(date, locale, options) {
+	if (date === null || date === void 0) return "";
+	const time = toTime(date);
+	if (Number.isNaN(time)) return "—";
+	const resolved = selectsFields(options) ? options : {
+		dateStyle: "medium",
+		timeStyle: "short",
+		...options
+	};
+	return cachedIntl("datetime", locale, resolved, () => new Intl.DateTimeFormat(locale, resolved)).format(time);
+}
+var GbtRelativeTimePipe = class GbtRelativeTimePipe {
+	localeId = inject(LOCALE_ID);
+	transform(value, options = {}) {
+		const { locale, now, ...rest } = options;
+		return formatRelativeTime(value, locale ?? this.localeId, now, rest);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtRelativeTimePipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtRelativeTimePipe,
+		isStandalone: true,
+		name: "gbtRelativeTime"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GbtRelativeTimePipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "gbtRelativeTime",
+			standalone: true
+		}]
+	}]
+});
+var GbtBytesPipe = class GbtBytesPipe {
+	localeId = inject(LOCALE_ID);
+	transform(value, options = {}) {
+		if (value === null || value === void 0) return "";
+		const { locale, ...rest } = options;
+		return formatBytes(value, locale ?? this.localeId, rest);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtBytesPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtBytesPipe,
+		isStandalone: true,
+		name: "gbtBytes"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GbtBytesPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "gbtBytes",
+			standalone: true
+		}]
+	}]
+});
+var GbtDateTimePipe = class GbtDateTimePipe {
+	localeId = inject(LOCALE_ID);
+	transform(value, options) {
+		const { locale, ...rest } = options ?? {};
+		return formatDateTime(value, locale ?? this.localeId, rest);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtDateTimePipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtDateTimePipe,
+		isStandalone: true,
+		name: "gbtDateTime"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GbtDateTimePipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "gbtDateTime",
+			standalone: true
+		}]
+	}]
+});
+function formatNumber(value, locale, decimals) {
+	return new Intl.NumberFormat(locale, {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	}).format(value);
+}
+function formatCompact(value, locale) {
+	return new Intl.NumberFormat(locale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value);
+}
+function dayLabel(locale) {
+	return cachedIntl("day-label", locale, void 0, () => {
+		return new Intl.NumberFormat(locale, {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "narrow"
+		}).formatToParts(1).find((part) => part.type === "unit")?.value ?? "d";
+	});
+}
+function formatDuration(ms, locale, options = {}) {
+	if (ms < 1e3) return `${formatNumber(Math.round(ms), locale)} ms`;
+	const totalSeconds = Math.round(ms / 1e3);
+	const num = (value) => formatNumber(value, locale);
+	if (options.days && totalSeconds >= 86400) {
+		const days = Math.floor(totalSeconds / 86400);
+		const hours = Math.floor(totalSeconds % 86400 / 3600);
+		const unit = dayLabel(locale);
+		return hours > 0 ? `${num(days)} ${unit} ${num(hours)} h` : `${num(days)} ${unit}`;
+	}
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor(totalSeconds % 3600 / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return minutes > 0 ? `${num(hours)} h ${num(minutes)} min` : `${num(hours)} h`;
+	if (minutes > 0) return seconds > 0 ? `${num(minutes)} min ${num(seconds)} s` : `${num(minutes)} min`;
+	return `${num(seconds)} s`;
+}
+function formatPercent(ratio, locale, decimals = 0) {
+	return new Intl.NumberFormat(locale, {
+		style: "percent",
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	}).format(ratio);
+}
+function computeInitials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "";
+	if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+	return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+export { GbtBytesPipe, GbtDateTimePipe, GbtRelativeTimePipe, cachedIntl, computeInitials, formatBytes, formatCompact, formatDateTime, formatDuration, formatNumber, formatPercent, formatRelativeTime };
+
+//# sourceMappingURL=masmarino-gabarit-format.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-format.mjs","names":[],"sources":["../../../projects/gabarit/format/intl-cache.ts","../../../projects/gabarit/format/no-value.ts","../../../projects/gabarit/format/format-bytes.ts","../../../projects/gabarit/format/format-time.ts","../../../projects/gabarit/format/format.pipes.ts","../../../projects/gabarit/format/format.ts","../../../projects/gabarit/format/initials.ts"],"sourcesContent":["const MAX_ENTRIES = 100\nconst cache = new Map<string, unknown>()\n\nexport function cachedIntl<T>(\n  kind: string,\n  locale: string,\n  options: object | undefined,\n  create: () => T,\n): T {\n  const key = `${kind}|${locale}|${options === undefined ? '' : JSON.stringify(options)}`\n  const hit = cache.get(key)\n  if (hit !== undefined) return hit as T\n  if (cache.size >= MAX_ENTRIES) cache.clear()\n  const created = create()\n  cache.set(key, created)\n  return created\n}\n","export const NO_VALUE = '—'\n","import { cachedIntl } from './intl-cache'\nimport { NO_VALUE } from './no-value'\n\nexport interface FormatBytesOptions {\n  base?: 1000 | 1024\n  decimals?: number\n  binaryUnits?: 'iec' | 'legacy'\n}\n\nconst NBSP = '\\u00a0'\n\nconst UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte'] as const\n\nfunction siLabels(locale: string): string[] {\n  return cachedIntl('bytes-labels', locale, undefined, () =>\n    UNITS.map((unit) => {\n      const parts = new Intl.NumberFormat(locale, {\n        style: 'unit',\n        unit,\n        unitDisplay: 'narrow',\n      }).formatToParts(1)\n      return parts.find((part) => part.type === 'unit')?.value ?? unit\n    }),\n  )\n}\n\nconst IEC_SYMBOLS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']\n\nfunction label(locale: string, rank: number, options: FormatBytesOptions): string {\n  const si = siLabels(locale)[rank]\n  if (rank === 0 || options.base === 1000) return si\n  const capital = si.charAt(0).toUpperCase()\n  if (options.binaryUnits === 'legacy') return capital + si.slice(1)\n  return /^\\p{Script=Latin}/u.test(si) ? `${capital}i${si.slice(1)}` : IEC_SYMBOLS[rank]\n}\n\nfunction round(value: number, decimals: number): number {\n  const factor = 10 ** decimals\n  return Math.round(value * factor) / factor\n}\n\nexport function formatBytes(\n  bytes: number,\n  locale: string,\n  options: FormatBytesOptions = {},\n): string {\n  if (!Number.isFinite(bytes)) return NO_VALUE\n  const base = options.base === 1000 ? 1000 : 1024\n  const requested = Math.trunc(options.decimals ?? 1)\n  const decimals = Number.isFinite(requested) ? Math.max(0, Math.min(20, requested)) : 1\n  const last = UNITS.length - 1\n\n  let value = Math.abs(bytes)\n  let rank = 0\n  while (value >= base && rank < last) {\n    value /= base\n    rank++\n  }\n  let shown = round(value, rank === 0 ? 0 : decimals)\n  if (shown >= base && rank < last) {\n    shown = round(shown / base, decimals)\n    rank++\n  }\n\n  const signed = bytes < 0 && shown !== 0 ? -shown : shown\n  const number = cachedIntl(\n    'bytes-number',\n    locale,\n    { decimals: rank === 0 ? 0 : decimals },\n    () =>\n      new Intl.NumberFormat(locale, {\n        minimumFractionDigits: 0,\n        maximumFractionDigits: rank === 0 ? 0 : decimals,\n      }),\n  ).format(signed)\n  return `${number}${NBSP}${label(locale, rank, { ...options, base })}`\n}\n","import { cachedIntl } from './intl-cache'\nimport { NO_VALUE } from './no-value'\n\nexport type DateInput = Date | string | number\n\nexport interface FormatRelativeTimeOptions {\n  style?: 'long' | 'short' | 'narrow'\n  numeric?: 'auto' | 'always'\n  maxUnit?: 'hour' | 'day' | 'week' | 'month'\n  absoluteAfterDays?: number\n  timeZone?: string\n}\n\nconst SECOND = 1000\nconst MINUTE = 60 * SECOND\nconst HOUR = 60 * MINUTE\nconst DAY = 24 * HOUR\nconst WEEK = 7 * DAY\nconst MONTH = 30 * DAY\nconst YEAR = 365 * DAY\n\nconst RANKS: [Intl.RelativeTimeFormatUnit, number, number][] = [\n  ['second', SECOND, MINUTE],\n  ['minute', MINUTE, HOUR],\n  ['hour', HOUR, DAY],\n  ['day', DAY, WEEK],\n  ['week', WEEK, MONTH],\n  ['month', MONTH, YEAR],\n  ['year', YEAR, Infinity],\n]\n\nconst NOW_WINDOW = 10 * SECOND\n\nfunction toTime(value: DateInput): number {\n  return value instanceof Date ? value.getTime() : new Date(value).getTime()\n}\n\nfunction relativeFormat(locale: string, style: string, numeric: string): Intl.RelativeTimeFormat {\n  return cachedIntl(\n    'relative',\n    locale,\n    { style, numeric },\n    () =>\n      new Intl.RelativeTimeFormat(locale, {\n        style: style as Intl.RelativeTimeFormatStyle,\n        numeric: numeric as Intl.RelativeTimeFormatNumeric,\n      }),\n  )\n}\n\nexport function formatRelativeTime(\n  date: DateInput | null | undefined,\n  locale: string,\n  now: DateInput = Date.now(),\n  options: FormatRelativeTimeOptions = {},\n): string {\n  if (date === null || date === undefined) return ''\n  const time = toTime(date)\n  const reference = toTime(now)\n  if (Number.isNaN(time) || Number.isNaN(reference)) return NO_VALUE\n\n  const diff = time - reference\n  const gap = Math.abs(diff)\n  const sign = diff < 0 ? -1 : 1\n  const style = options.style ?? 'long'\n\n  if (options.absoluteAfterDays !== undefined && gap >= options.absoluteAfterDays * DAY) {\n    return formatDateTime(time, locale, {\n      day: '2-digit',\n      month: '2-digit',\n      year: 'numeric',\n      ...(options.timeZone ? { timeZone: options.timeZone } : {}),\n    })\n  }\n\n  if (gap < NOW_WINDOW) return relativeFormat(locale, style, 'auto').format(0, 'second')\n\n  const numeric = options.numeric ?? 'auto'\n  const rtf = relativeFormat(locale, style, numeric)\n  for (const [unit, size, below] of RANKS) {\n    if (gap < below || unit === options.maxUnit) {\n      return rtf.format(sign * Math.trunc(gap / size), unit)\n    }\n  }\n  return rtf.format(sign * Math.trunc(gap / YEAR), 'year')\n}\n\nconst FIELD_OPTIONS = [\n  'dateStyle',\n  'timeStyle',\n  'weekday',\n  'era',\n  'year',\n  'month',\n  'day',\n  'dayPeriod',\n  'hour',\n  'minute',\n  'second',\n  'fractionalSecondDigits',\n  'timeZoneName',\n] as const\n\nfunction selectsFields(options: Intl.DateTimeFormatOptions | undefined): boolean {\n  return options !== undefined && FIELD_OPTIONS.some((field) => options[field] !== undefined)\n}\n\nexport function formatDateTime(\n  date: DateInput | null | undefined,\n  locale: string,\n  options?: Intl.DateTimeFormatOptions,\n): string {\n  if (date === null || date === undefined) return ''\n  const time = toTime(date)\n  if (Number.isNaN(time)) return NO_VALUE\n  const resolved: Intl.DateTimeFormatOptions = selectsFields(options)\n    ? (options as Intl.DateTimeFormatOptions)\n    : { dateStyle: 'medium' as const, timeStyle: 'short' as const, ...options }\n  return cachedIntl(\n    'datetime',\n    locale,\n    resolved,\n    () => new Intl.DateTimeFormat(locale, resolved),\n  ).format(time)\n}\n","import { inject, LOCALE_ID, Pipe, type PipeTransform } from '@angular/core'\nimport { formatBytes, type FormatBytesOptions } from './format-bytes'\nimport {\n  formatDateTime,\n  formatRelativeTime,\n  type DateInput,\n  type FormatRelativeTimeOptions,\n} from './format-time'\n\nexport interface GbtPipeLocale {\n  locale?: string\n}\n\nexport type GbtRelativeTimePipeOptions = FormatRelativeTimeOptions &\n  GbtPipeLocale & {\n    now?: DateInput\n  }\n\nexport type GbtBytesPipeOptions = FormatBytesOptions & GbtPipeLocale\n\nexport type GbtDateTimePipeOptions = Intl.DateTimeFormatOptions & GbtPipeLocale\n\n@Pipe({ name: 'gbtRelativeTime', standalone: true })\nexport class GbtRelativeTimePipe implements PipeTransform {\n  private readonly localeId = inject(LOCALE_ID)\n\n  transform(value: DateInput | null | undefined, options: GbtRelativeTimePipeOptions = {}): string {\n    const { locale, now, ...rest } = options\n    return formatRelativeTime(value, locale ?? this.localeId, now, rest)\n  }\n}\n\n@Pipe({ name: 'gbtBytes', standalone: true })\nexport class GbtBytesPipe implements PipeTransform {\n  private readonly localeId = inject(LOCALE_ID)\n\n  transform(value: number | null | undefined, options: GbtBytesPipeOptions = {}): string {\n    if (value === null || value === undefined) return ''\n    const { locale, ...rest } = options\n    return formatBytes(value, locale ?? this.localeId, rest)\n  }\n}\n\n@Pipe({ name: 'gbtDateTime', standalone: true })\nexport class GbtDateTimePipe implements PipeTransform {\n  private readonly localeId = inject(LOCALE_ID)\n\n  transform(value: DateInput | null | undefined, options?: GbtDateTimePipeOptions): string {\n    const { locale, ...rest } = options ?? {}\n    return formatDateTime(value, locale ?? this.localeId, rest)\n  }\n}\n","import { cachedIntl } from './intl-cache'\n\nexport function formatNumber(value: number, locale: string, decimals?: number): string {\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  }).format(value)\n}\n\nexport function formatCompact(value: number, locale: string): string {\n  return new Intl.NumberFormat(locale, {\n    notation: 'compact',\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nexport interface FormatDurationOptions {\n  days?: boolean\n}\n\nfunction dayLabel(locale: string): string {\n  return cachedIntl('day-label', locale, undefined, () => {\n    const parts = new Intl.NumberFormat(locale, {\n      style: 'unit',\n      unit: 'day',\n      unitDisplay: 'narrow',\n    }).formatToParts(1)\n    return parts.find((part) => part.type === 'unit')?.value ?? 'd'\n  })\n}\n\nexport function formatDuration(\n  ms: number,\n  locale: string,\n  options: FormatDurationOptions = {},\n): string {\n  if (ms < 1000) return `${formatNumber(Math.round(ms), locale)} ms`\n\n  const totalSeconds = Math.round(ms / 1000)\n  const num = (value: number) => formatNumber(value, locale)\n\n  if (options.days && totalSeconds >= 86400) {\n    const days = Math.floor(totalSeconds / 86400)\n    const hours = Math.floor((totalSeconds % 86400) / 3600)\n    const unit = dayLabel(locale)\n    return hours > 0 ? `${num(days)} ${unit} ${num(hours)} h` : `${num(days)} ${unit}`\n  }\n\n  const hours = Math.floor(totalSeconds / 3600)\n  const minutes = Math.floor((totalSeconds % 3600) / 60)\n  const seconds = totalSeconds % 60\n\n  if (hours > 0) return minutes > 0 ? `${num(hours)} h ${num(minutes)} min` : `${num(hours)} h`\n  if (minutes > 0)\n    return seconds > 0 ? `${num(minutes)} min ${num(seconds)} s` : `${num(minutes)} min`\n  return `${num(seconds)} s`\n}\n\nexport function formatPercent(ratio: number, locale: string, decimals = 0): string {\n  return new Intl.NumberFormat(locale, {\n    style: 'percent',\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n  }).format(ratio)\n}\n","export function computeInitials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  if (words.length === 0) return ''\n  if (words.length === 1) return words[0].slice(0, 2).toUpperCase()\n  return (words[0][0] + words[words.length - 1][0]).toUpperCase()\n}\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-funnel-chart.mjs

@@ -0,0 +1,247 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, signal } from "@angular/core";
+import { ChartEmpty, ChartTable } from "@masmarino/gabarit/chart";
+import { formatNumber, formatPercent } from "@masmarino/gabarit/format";
+var FunnelChart = class FunnelChart {
+	steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	locale = input.required(...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	emptyMessage = input.required(...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	tableCaption = input.required(...ngDevMode ? [{ debugName: "tableCaption" }] : /* istanbul ignore next */ []);
+	stepColumn = input.required(...ngDevMode ? [{ debugName: "stepColumn" }] : /* istanbul ignore next */ []);
+	valueColumn = input.required(...ngDevMode ? [{ debugName: "valueColumn" }] : /* istanbul ignore next */ []);
+	conversionColumn = input.required(...ngDevMode ? [{ debugName: "conversionColumn" }] : /* istanbul ignore next */ []);
+	stepAnnouncement = input.required(...ngDevMode ? [{ debugName: "stepAnnouncement" }] : /* istanbul ignore next */ []);
+	reference = computed(() => this.steps()[0]?.value ?? 0, ...ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	onMouseLeave(event) {
+		const target = event.currentTarget;
+		if (target.ownerDocument.activeElement === target) return;
+		this.activeIndex.set(null);
+	}
+	renderedSteps = computed(() => {
+		const reference = this.reference();
+		const steps = this.steps();
+		return steps.map((step, index) => {
+			const previousValue = index === 0 ? step.value : steps[index - 1].value;
+			return {
+				label: step.label,
+				formattedValue: formatNumber(step.value, this.locale()),
+				part: reference <= 0 ? 0 : step.value / reference * 100,
+				conversionFromPrevious: formatPercent(previousValue <= 0 ? 0 : step.value / previousValue, this.locale())
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "renderedSteps" }] : /* istanbul ignore next */ []);
+	activeStep = computed(() => {
+		const index = this.activeIndex();
+		if (index === null) return null;
+		return this.renderedSteps()[index] ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []);
+	columns = computed(() => [
+		this.stepColumn(),
+		this.valueColumn(),
+		this.conversionColumn()
+	], ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	tableRows = computed(() => {
+		const reference = this.reference();
+		return this.steps().map((step) => [
+			step.label,
+			formatNumber(step.value, this.locale()),
+			formatPercent(reference <= 0 ? 0 : step.value / reference, this.locale())
+		]);
+	}, ...ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FunnelChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: FunnelChart,
+		isStandalone: true,
+		selector: "gbt-funnel-chart",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tableCaption: {
+				classPropertyName: "tableCaption",
+				publicName: "tableCaption",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			stepColumn: {
+				classPropertyName: "stepColumn",
+				publicName: "stepColumn",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			valueColumn: {
+				classPropertyName: "valueColumn",
+				publicName: "valueColumn",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			conversionColumn: {
+				classPropertyName: "conversionColumn",
+				publicName: "conversionColumn",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			stepAnnouncement: {
+				classPropertyName: "stepAnnouncement",
+				publicName: "stepAnnouncement",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "@if (renderedSteps().length > 0) {\n  <ol class=\"gbt-funnel-chart\" [attr.aria-label]=\"label()\">\n    @for (step of renderedSteps(); track $index) {\n      <li\n        class=\"gbt-funnel-chart__step\"\n        [attr.data-active]=\"$index === activeIndex() ? '' : null\"\n        tabindex=\"0\"\n        (mouseenter)=\"activeIndex.set($index)\"\n        (mouseleave)=\"onMouseLeave($event)\"\n        (focus)=\"activeIndex.set($index)\"\n        (blur)=\"activeIndex.set(null)\"\n      >\n        <div class=\"gbt-funnel-chart__bar\" [style.width.%]=\"step.part\" aria-hidden=\"true\"></div>\n        <span class=\"gbt-funnel-chart__label\">{{ step.label }}</span>\n        <span class=\"gbt-funnel-chart__value\">{{ step.formattedValue }}</span>\n        @if ($index === activeIndex()) {\n          <span class=\"gbt-funnel-chart__tip\" aria-hidden=\"true\">{{\n            step.conversionFromPrevious\n          }}</span>\n        }\n      </li>\n    }\n  </ol>\n  <div class=\"gbt-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (activeStep(); as step) {\n      {{ stepAnnouncement()(step.label, step.conversionFromPrevious) }}\n    }\n  </div>\n  <gbt-chart-table [caption]=\"tableCaption()\" [columns]=\"columns()\" [rows]=\"tableRows()\" />\n} @else {\n  <gbt-chart-empty [message]=\"emptyMessage()\" />\n}\n",
+		styles: [":host{display:block}.gbt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-funnel-chart{margin:0;padding:0;list-style:none}.gbt-funnel-chart__step{position:relative;display:flex;justify-content:space-between;gap:.75rem;padding:.625rem .75rem;font-size:.875rem;color:var(--text-primary)}.gbt-funnel-chart__step+.gbt-funnel-chart__step{margin-top:.25rem}.gbt-funnel-chart__step[data-active]{background:var(--bg-hover)}.gbt-funnel-chart__step:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-funnel-chart__bar{position:absolute;inset:0 auto 0 0;background:var(--chart-series-2-base);opacity:.14;border-radius:var(--site-border-radius)}.gbt-funnel-chart__label,.gbt-funnel-chart__value,.gbt-funnel-chart__tip{position:relative}.gbt-funnel-chart__value{font-variant-numeric:tabular-nums;color:var(--text-secondary)}.gbt-funnel-chart__tip{margin-left:.5rem;font-variant-numeric:tabular-nums;color:var(--text-secondary)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: ChartTable,
+			selector: "gbt-chart-table",
+			inputs: [
+				"caption",
+				"columns",
+				"rows"
+			]
+		}, {
+			kind: "component",
+			type: ChartEmpty,
+			selector: "gbt-chart-empty",
+			inputs: ["message", "actionLabel"],
+			outputs: ["action"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FunnelChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-funnel-chart",
+			standalone: true,
+			imports: [ChartTable, ChartEmpty],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (renderedSteps().length > 0) {\n  <ol class=\"gbt-funnel-chart\" [attr.aria-label]=\"label()\">\n    @for (step of renderedSteps(); track $index) {\n      <li\n        class=\"gbt-funnel-chart__step\"\n        [attr.data-active]=\"$index === activeIndex() ? '' : null\"\n        tabindex=\"0\"\n        (mouseenter)=\"activeIndex.set($index)\"\n        (mouseleave)=\"onMouseLeave($event)\"\n        (focus)=\"activeIndex.set($index)\"\n        (blur)=\"activeIndex.set(null)\"\n      >\n        <div class=\"gbt-funnel-chart__bar\" [style.width.%]=\"step.part\" aria-hidden=\"true\"></div>\n        <span class=\"gbt-funnel-chart__label\">{{ step.label }}</span>\n        <span class=\"gbt-funnel-chart__value\">{{ step.formattedValue }}</span>\n        @if ($index === activeIndex()) {\n          <span class=\"gbt-funnel-chart__tip\" aria-hidden=\"true\">{{\n            step.conversionFromPrevious\n          }}</span>\n        }\n      </li>\n    }\n  </ol>\n  <div class=\"gbt-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (activeStep(); as step) {\n      {{ stepAnnouncement()(step.label, step.conversionFromPrevious) }}\n    }\n  </div>\n  <gbt-chart-table [caption]=\"tableCaption()\" [columns]=\"columns()\" [rows]=\"tableRows()\" />\n} @else {\n  <gbt-chart-empty [message]=\"emptyMessage()\" />\n}\n",
+			styles: [":host{display:block}.gbt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-funnel-chart{margin:0;padding:0;list-style:none}.gbt-funnel-chart__step{position:relative;display:flex;justify-content:space-between;gap:.75rem;padding:.625rem .75rem;font-size:.875rem;color:var(--text-primary)}.gbt-funnel-chart__step+.gbt-funnel-chart__step{margin-top:.25rem}.gbt-funnel-chart__step[data-active]{background:var(--bg-hover)}.gbt-funnel-chart__step:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-funnel-chart__bar{position:absolute;inset:0 auto 0 0;background:var(--chart-series-2-base);opacity:.14;border-radius:var(--site-border-radius)}.gbt-funnel-chart__label,.gbt-funnel-chart__value,.gbt-funnel-chart__tip{position:relative}.gbt-funnel-chart__value{font-variant-numeric:tabular-nums;color:var(--text-secondary)}.gbt-funnel-chart__tip{margin-left:.5rem;font-variant-numeric:tabular-nums;color:var(--text-secondary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: true
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: true
+			}]
+		}],
+		tableCaption: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tableCaption",
+				required: true
+			}]
+		}],
+		stepColumn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepColumn",
+				required: true
+			}]
+		}],
+		valueColumn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueColumn",
+				required: true
+			}]
+		}],
+		conversionColumn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "conversionColumn",
+				required: true
+			}]
+		}],
+		stepAnnouncement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepAnnouncement",
+				required: true
+			}]
+		}]
+	}
+});
+export { FunnelChart };
+
+//# sourceMappingURL=masmarino-gabarit-funnel-chart.mjs.map

package/fesm2022/masmarino-gabarit-funnel-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-funnel-chart.mjs","names":[],"sources":["../../../projects/gabarit/funnel-chart/funnel-chart.ts","../../../projects/gabarit/funnel-chart/funnel-chart.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core'\nimport { ChartEmpty } from '@masmarino/gabarit/chart'\nimport { ChartTable } from '@masmarino/gabarit/chart'\nimport { formatNumber, formatPercent } from '@masmarino/gabarit/format'\n\nexport interface FunnelStep {\n  label: string\n  value: number\n}\n\ninterface RenderedStep {\n  label: string\n  formattedValue: string\n\n  part: number\n\n  conversionFromPrevious: string\n}\n\n@Component({\n  selector: 'gbt-funnel-chart',\n  standalone: true,\n  imports: [ChartTable, ChartEmpty],\n  templateUrl: './funnel-chart.html',\n  styleUrl: './funnel-chart.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FunnelChart {\n  steps = input.required<FunnelStep[]>()\n  label = input.required<string>()\n  locale = input.required<string>()\n  emptyMessage = input.required<string>()\n  tableCaption = input.required<string>()\n  stepColumn = input.required<string>()\n  valueColumn = input.required<string>()\n  conversionColumn = input.required<string>()\n  stepAnnouncement = input.required<(label: string, conversion: string) => string>()\n\n  private readonly reference = computed(() => this.steps()[0]?.value ?? 0)\n\n  protected readonly activeIndex = signal<number | null>(null)\n\n  protected onMouseLeave(event: MouseEvent): void {\n    const target = event.currentTarget as HTMLElement\n    if (target.ownerDocument.activeElement === target) return\n    this.activeIndex.set(null)\n  }\n\n  protected readonly renderedSteps = computed<RenderedStep[]>(() => {\n    const reference = this.reference()\n    const steps = this.steps()\n    return steps.map((step, index) => {\n      const previousValue = index === 0 ? step.value : steps[index - 1].value\n      return {\n        label: step.label,\n        formattedValue: formatNumber(step.value, this.locale()),\n\n        part: reference <= 0 ? 0 : (step.value / reference) * 100,\n        conversionFromPrevious: formatPercent(\n          previousValue <= 0 ? 0 : step.value / previousValue,\n          this.locale(),\n        ),\n      }\n    })\n  })\n\n  protected readonly activeStep = computed<RenderedStep | null>(() => {\n    const index = this.activeIndex()\n    if (index === null) return null\n    return this.renderedSteps()[index] ?? null\n  })\n\n  protected readonly columns = computed(() => [\n    this.stepColumn(),\n    this.valueColumn(),\n    this.conversionColumn(),\n  ])\n\n  protected readonly tableRows = computed<(string | number)[][]>(() => {\n    const reference = this.reference()\n    return this.steps().map((step) => [\n      step.label,\n      formatNumber(step.value, this.locale()),\n      formatPercent(reference <= 0 ? 0 : step.value / reference, this.locale()),\n    ])\n  })\n}\n","@if (renderedSteps().length > 0) {\n  <ol class=\"gbt-funnel-chart\" [attr.aria-label]=\"label()\">\n    @for (step of renderedSteps(); track $index) {\n      <li\n        class=\"gbt-funnel-chart__step\"\n        [attr.data-active]=\"$index === activeIndex() ? '' : null\"\n        tabindex=\"0\"\n        (mouseenter)=\"activeIndex.set($index)\"\n        (mouseleave)=\"onMouseLeave($event)\"\n        (focus)=\"activeIndex.set($index)\"\n        (blur)=\"activeIndex.set(null)\"\n      >\n        <div class=\"gbt-funnel-chart__bar\" [style.width.%]=\"step.part\" aria-hidden=\"true\"></div>\n        <span class=\"gbt-funnel-chart__label\">{{ step.label }}</span>\n        <span class=\"gbt-funnel-chart__value\">{{ step.formattedValue }}</span>\n        @if ($index === activeIndex()) {\n          <span class=\"gbt-funnel-chart__tip\" aria-hidden=\"true\">{{\n            step.conversionFromPrevious\n          }}</span>\n        }\n      </li>\n    }\n  </ol>\n  <div class=\"gbt-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (activeStep(); as step) {\n      {{ stepAnnouncement()(step.label, step.conversionFromPrevious) }}\n    }\n  </div>\n  <gbt-chart-table [caption]=\"tableCaption()\" [columns]=\"columns()\" [rows]=\"tableRows()\" />\n} @else {\n  <gbt-chart-empty [message]=\"emptyMessage()\" />\n}\n"],"mappings":"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"}