@joanroucoux/cairn-ui 0.8.2 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-donut.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-donut.mjs","sources":["../../../projects/ui/donut/internal/donut-geometry.ts","../../../projects/ui/donut/internal/donut-slices.ts","../../../projects/ui/donut/donut.ts","../../../projects/ui/donut/joanroucoux-cairn-ui-donut.ts"],"sourcesContent":["import type { RankedSlice } from './donut-slices';\n\nexport type PositionedSlice = RankedSlice & { dash: string; offset: string };\n\nexport const RADIUS = 78;\nexport const RING_WIDTH = 30;\nexport const CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst GAP = 2;\n\nexport function positionSlices(slices: RankedSlice[]): PositionedSlice[] {\n  let travelled = 0;\n\n  return slices.map((slice) => {\n    const length = slice.share * CIRCUMFERENCE;\n    const drawn = Math.max(0, length - GAP);\n    const positioned = {\n      ...slice,\n      dash: `${drawn.toFixed(2)} ${(CIRCUMFERENCE - drawn).toFixed(2)}`,\n      offset: (-travelled).toFixed(2),\n    };\n    travelled += length;\n\n    return positioned;\n  });\n}\n","export type DonutSlice = {\n  id: string;\n  label: string;\n  value: number;\n  sublabel?: string;\n};\n\nexport type Ramp = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type SharedSlice = DonutSlice & { share: number };\n\nexport type RankedSlice = DonutSlice & { share: number; ramp: Ramp; members: string[] };\n\nconst MAX_RAMP = 6;\nconst OTHERS_ID = 'others';\n\nexport function shareSlices(slices: DonutSlice[]): SharedSlice[] {\n  const positive = slices.filter((slice) => slice.value > 0).sort((a, b) => b.value - a.value);\n  const total = positive.reduce((sum, slice) => sum + slice.value, 0);\n\n  return positive.map((slice) => ({ ...slice, share: slice.value / total }));\n}\n\nexport function rankSlices(slices: DonutSlice[], othersLabel: string): RankedSlice[] {\n  const shared = shareSlices(slices);\n\n  const toRanked = (slice: SharedSlice, ramp: Ramp, members: string[] = []): RankedSlice => ({\n    ...slice,\n    ramp,\n    members,\n  });\n\n  if (shared.length <= MAX_RAMP) {\n    return shared.map((slice, index) => toRanked(slice, (index + 1) as Ramp));\n  }\n\n  const kept = shared.slice(0, MAX_RAMP - 1);\n  const rest = shared.slice(MAX_RAMP - 1);\n  const othersValue = rest.reduce((sum, slice) => sum + slice.value, 0);\n  const othersShare = rest.reduce((sum, slice) => sum + slice.share, 0);\n\n  return [\n    ...kept.map((slice, index) => toRanked(slice, (index + 1) as Ramp)),\n    toRanked(\n      { id: OTHERS_ID, label: othersLabel, value: othersValue, share: othersShare },\n      MAX_RAMP,\n      rest.map((slice) => slice.label),\n    ),\n  ];\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, output, signal } from '@angular/core';\n\nimport { RADIUS, RING_WIDTH, positionSlices } from './internal/donut-geometry';\nimport { type DonutSlice, type Ramp, type RankedSlice, rankSlices, shareSlices } from './internal/donut-slices';\n\nexport type { DonutSlice };\n\nconst identityValue = (value: number): string => `${value}`;\nconst identityShare = (share: number): string => `${Math.round(share * 100)}%`;\n\nconst ROW_CLASSES =\n  'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst SLICE_CLASSES =\n  'cursor-pointer origin-center [transform-box:view-box] transition-[scale,opacity] duration-(--duration-fast) ease-out';\n\nconst RAMP_DOT_CLASSES: Record<Ramp, string> = {\n  1: 'bg-(--ramp-1)',\n  2: 'bg-(--ramp-2)',\n  3: 'bg-(--ramp-3)',\n  4: 'bg-(--ramp-4)',\n  5: 'bg-(--ramp-5)',\n  6: 'bg-(--ramp-6)',\n};\n\n/**\n * A ring chart with a legend: slices rank from largest to smallest on a grey ramp, and hovering,\n * focusing or activating a legend row highlights its slice and centres it in the ring.\n *\n * @example\n * <ui-donut [slices]=\"byAssetClass()\" label=\"Par classe d'actif\" othersLabel=\"Autres\" [valueFormat]=\"formatEur\" [shareFormat]=\"formatShare\" (sliceSelect)=\"goToHoldings($event)\" />\n */\n@Component({\n  selector: 'ui-donut',\n  template: `\n    <div class=\"relative size-[232px] flex-none sm:size-60\">\n      <svg class=\"block h-full w-full -rotate-90\" role=\"img\" viewBox=\"0 0 200 200\" [attr.aria-label]=\"ariaLabel()\">\n        <circle\n          class=\"stroke-(--muted)\"\n          cx=\"100\"\n          cy=\"100\"\n          fill=\"none\"\n          [attr.r]=\"radius\"\n          [attr.stroke-width]=\"ringWidth\"\n        />\n        @for (slice of positioned(); track slice.id) {\n          <circle\n            cx=\"100\"\n            cy=\"100\"\n            data-slice\n            fill=\"none\"\n            [attr.r]=\"radius\"\n            [attr.stroke-dasharray]=\"slice.dash\"\n            [attr.stroke-dashoffset]=\"slice.offset\"\n            [attr.stroke-width]=\"ringWidth\"\n            [class]=\"sliceClasses(slice)\"\n            [style.stroke]=\"strokeColor(slice)\"\n            (click)=\"select(slice)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          />\n        }\n      </svg>\n\n      @if (active(); as slice) {\n        <div\n          class=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-12 text-center\"\n          data-testid=\"donut-centre\"\n        >\n          <span class=\"text-label max-w-full truncate font-medium whitespace-nowrap text-(--muted-foreground)\">{{\n            slice.label\n          }}</span>\n          <span class=\"text-heading font-semibold tracking-(--tracking-display)\">{{ shareFormat()(slice.share) }}</span>\n          <span class=\"text-caption tracking-normal text-(--muted-foreground) [font-variant-numeric:var(--numeric)]\">{{\n            valueFormat()(slice.value)\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"flex w-full min-w-0 flex-1 flex-col sm:w-auto\" data-testid=\"donut-legend\">\n      @for (slice of ranked(); track slice.id) {\n        @if (hrefFor(slice.id); as href) {\n          <a\n            [attr.href]=\"href\"\n            [class]=\"rowClasses(slice)\"\n            (blur)=\"clearHighlight(slice.id)\"\n            (click)=\"follow($event, slice)\"\n            (focus)=\"highlight(slice.id)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: slice }\" />\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"rowClasses(slice)\"\n            (blur)=\"clearHighlight(slice.id)\"\n            (click)=\"select(slice)\"\n            (focus)=\"highlight(slice.id)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: slice }\" />\n          </button>\n        }\n      }\n    </div>\n\n    <ng-template #rowContent let-slice>\n      <span [class]=\"dotClasses(slice)\"></span>\n      <span class=\"flex min-w-0 flex-1 flex-col\">\n        <span class=\"text-body truncate font-medium\">{{ slice.label }}</span>\n        <span class=\"text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)\">{{\n          subLabel(slice)\n        }}</span>\n      </span>\n      <span class=\"flex flex-none flex-col items-end whitespace-nowrap\">\n        <span class=\"text-body font-medium\">{{ shareFormat()(slice.share) }}</span>\n        <span class=\"text-caption tracking-normal text-(--muted-foreground)\">{{ valueFormat()(slice.value) }}</span>\n      </span>\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet],\n  host: {\n    class: 'flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:gap-8',\n  },\n})\nexport class UiDonut {\n  readonly slices = input.required<DonutSlice[]>();\n  readonly label = input.required<string>();\n  readonly othersLabel = input.required<string>();\n  readonly valueFormat = input<(value: number) => string>(identityValue);\n  readonly shareFormat = input<(share: number) => string>(identityShare);\n\n  readonly legendHref = input<((id: string) => string | null) | undefined>();\n\n  readonly sliceSelect = output<DonutSlice['id']>();\n\n  protected readonly activeId = signal<string | null>(null);\n\n  protected readonly ranked = computed(() => rankSlices(this.slices(), this.othersLabel()));\n  protected readonly positioned = computed(() => positionSlices(this.ranked()));\n\n  protected readonly active = computed<RankedSlice | null>(() => {\n    const ranked = this.ranked();\n    const id = this.activeId();\n\n    return ranked.find((slice) => slice.id === id) ?? ranked[0] ?? null;\n  });\n\n  protected readonly ariaLabel = computed(() => {\n    const detail = shareSlices(this.slices())\n      .map((slice) => `${slice.label} ${this.shareFormat()(slice.share)}`)\n      .join(', ');\n\n    return detail ? `${this.label()} : ${detail}` : this.label();\n  });\n\n  protected readonly radius = RADIUS;\n  protected readonly ringWidth = RING_WIDTH;\n\n  protected strokeColor(slice: RankedSlice): string {\n    return `var(--ramp-${slice.ramp})`;\n  }\n\n  protected sliceClasses(slice: RankedSlice): string {\n    const id = this.activeId();\n    if (id === null) {\n      return SLICE_CLASSES;\n    }\n\n    return `${SLICE_CLASSES} ${id === slice.id ? 'scale-104 motion-reduce:scale-100' : 'opacity-50'}`;\n  }\n\n  protected dotClasses(slice: RankedSlice): string {\n    return `size-3 flex-none rounded-pill shadow-[inset_0_0_0_1px_var(--border)] ${RAMP_DOT_CLASSES[slice.ramp]}`;\n  }\n\n  protected rowClasses(slice: RankedSlice): string {\n    return `${ROW_CLASSES}${this.isActive(slice) ? ' bg-(--soft)' : ''}`;\n  }\n\n  protected subLabel(slice: RankedSlice): string {\n    return slice.members.length > 0 ? slice.members.join(', ') : (slice.sublabel ?? '');\n  }\n\n  protected isActive(slice: RankedSlice): boolean {\n    return this.active()?.id === slice.id;\n  }\n\n  protected highlight(id: string): void {\n    this.activeId.set(id);\n  }\n\n  protected clearHighlight(id: string): void {\n    if (this.activeId() === id) {\n      this.activeId.set(null);\n    }\n  }\n\n  protected hrefFor(id: string): string | null {\n    return this.legendHref()?.(id) ?? null;\n  }\n\n  protected follow(event: MouseEvent, slice: RankedSlice): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {\n      return;\n    }\n    event.preventDefault();\n    this.select(slice);\n  }\n\n  protected select(slice: RankedSlice): void {\n    this.activeId.set(slice.id);\n    this.sliceSelect.emit(slice.id);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-donut.mjs","names":[],"sources":["../../../projects/ui/donut/internal/donut-geometry.ts","../../../projects/ui/donut/internal/donut-slices.ts","../../../projects/ui/donut/donut.ts"],"sourcesContent":["import type { RankedSlice } from './donut-slices';\n\nexport type PositionedSlice = RankedSlice & { dash: string; offset: string };\n\nexport const RADIUS = 78;\nexport const RING_WIDTH = 30;\nexport const CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nconst GAP = 2;\n\nexport function positionSlices(slices: RankedSlice[]): PositionedSlice[] {\n  let travelled = 0;\n\n  return slices.map((slice) => {\n    const length = slice.share * CIRCUMFERENCE;\n    const drawn = Math.max(0, length - GAP);\n    const positioned = {\n      ...slice,\n      dash: `${drawn.toFixed(2)} ${(CIRCUMFERENCE - drawn).toFixed(2)}`,\n      offset: (-travelled).toFixed(2),\n    };\n    travelled += length;\n\n    return positioned;\n  });\n}\n","export type DonutSlice = {\n  id: string;\n  label: string;\n  value: number;\n  sublabel?: string;\n};\n\nexport type Ramp = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type SharedSlice = DonutSlice & { share: number };\n\nexport type RankedSlice = DonutSlice & { share: number; ramp: Ramp; members: string[] };\n\nconst MAX_RAMP = 6;\nconst OTHERS_ID = 'others';\n\nexport function shareSlices(slices: DonutSlice[]): SharedSlice[] {\n  const positive = slices.filter((slice) => slice.value > 0).sort((a, b) => b.value - a.value);\n  const total = positive.reduce((sum, slice) => sum + slice.value, 0);\n\n  return positive.map((slice) => ({ ...slice, share: slice.value / total }));\n}\n\nexport function rankSlices(slices: DonutSlice[], othersLabel: string): RankedSlice[] {\n  const shared = shareSlices(slices);\n\n  const toRanked = (slice: SharedSlice, ramp: Ramp, members: string[] = []): RankedSlice => ({\n    ...slice,\n    ramp,\n    members,\n  });\n\n  if (shared.length <= MAX_RAMP) {\n    return shared.map((slice, index) => toRanked(slice, (index + 1) as Ramp));\n  }\n\n  const kept = shared.slice(0, MAX_RAMP - 1);\n  const rest = shared.slice(MAX_RAMP - 1);\n  const othersValue = rest.reduce((sum, slice) => sum + slice.value, 0);\n  const othersShare = rest.reduce((sum, slice) => sum + slice.share, 0);\n\n  return [\n    ...kept.map((slice, index) => toRanked(slice, (index + 1) as Ramp)),\n    toRanked(\n      { id: OTHERS_ID, label: othersLabel, value: othersValue, share: othersShare },\n      MAX_RAMP,\n      rest.map((slice) => slice.label),\n    ),\n  ];\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, output, signal } from '@angular/core';\n\nimport { RADIUS, RING_WIDTH, positionSlices } from './internal/donut-geometry';\nimport { type DonutSlice, type Ramp, type RankedSlice, rankSlices, shareSlices } from './internal/donut-slices';\n\nexport type { DonutSlice };\n\nconst identityValue = (value: number): string => `${value}`;\nconst identityShare = (share: number): string => `${Math.round(share * 100)}%`;\n\nconst ROW_CLASSES =\n  'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst SLICE_CLASSES =\n  'cursor-pointer origin-center [transform-box:view-box] transition-[scale,opacity] duration-(--duration-fast) ease-out';\n\nconst RAMP_DOT_CLASSES: Record<Ramp, string> = {\n  1: 'bg-(--ramp-1)',\n  2: 'bg-(--ramp-2)',\n  3: 'bg-(--ramp-3)',\n  4: 'bg-(--ramp-4)',\n  5: 'bg-(--ramp-5)',\n  6: 'bg-(--ramp-6)',\n};\n\n/**\n * A ring chart with a legend: slices rank from largest to smallest, and hovering, focusing or\n * activating a legend row highlights its slice.\n *\n * @example\n * <ui-donut [slices]=\"byAssetClass()\" label=\"Par classe d'actif\" othersLabel=\"Autres\" [valueFormat]=\"formatEur\" [shareFormat]=\"formatShare\" (sliceSelect)=\"goToHoldings($event)\" />\n */\n@Component({\n  selector: 'ui-donut',\n  template: `\n    <div class=\"relative size-[232px] flex-none sm:size-60\">\n      <svg class=\"block h-full w-full -rotate-90\" role=\"img\" viewBox=\"0 0 200 200\" [attr.aria-label]=\"ariaLabel()\">\n        <circle\n          class=\"stroke-(--muted)\"\n          cx=\"100\"\n          cy=\"100\"\n          fill=\"none\"\n          [attr.r]=\"radius\"\n          [attr.stroke-width]=\"ringWidth\"\n        />\n        @for (slice of positioned(); track slice.id) {\n          <circle\n            cx=\"100\"\n            cy=\"100\"\n            data-slice\n            fill=\"none\"\n            [attr.r]=\"radius\"\n            [attr.stroke-dasharray]=\"slice.dash\"\n            [attr.stroke-dashoffset]=\"slice.offset\"\n            [attr.stroke-width]=\"ringWidth\"\n            [class]=\"sliceClasses(slice)\"\n            [style.stroke]=\"strokeColor(slice)\"\n            (click)=\"select(slice)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          />\n        }\n      </svg>\n\n      @if (active(); as slice) {\n        <div\n          class=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-12 text-center\"\n          data-testid=\"donut-centre\"\n        >\n          <span class=\"text-label max-w-full truncate font-medium whitespace-nowrap text-(--muted-foreground)\">{{\n            slice.label\n          }}</span>\n          <span class=\"text-heading font-semibold tracking-(--tracking-display)\">{{ shareFormat()(slice.share) }}</span>\n          <span class=\"text-caption tracking-normal text-(--muted-foreground) [font-variant-numeric:var(--numeric)]\">{{\n            valueFormat()(slice.value)\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"flex w-full min-w-0 flex-1 flex-col sm:w-auto\" data-testid=\"donut-legend\">\n      @for (slice of ranked(); track slice.id) {\n        @if (hrefFor(slice.id); as href) {\n          <a\n            [attr.href]=\"href\"\n            [class]=\"rowClasses(slice)\"\n            (blur)=\"clearHighlight(slice.id)\"\n            (click)=\"follow($event, slice)\"\n            (focus)=\"highlight(slice.id)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: slice }\" />\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"rowClasses(slice)\"\n            (blur)=\"clearHighlight(slice.id)\"\n            (click)=\"select(slice)\"\n            (focus)=\"highlight(slice.id)\"\n            (pointerenter)=\"highlight(slice.id)\"\n            (pointerleave)=\"clearHighlight(slice.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: slice }\" />\n          </button>\n        }\n      }\n    </div>\n\n    <ng-template #rowContent let-slice>\n      <span [class]=\"dotClasses(slice)\"></span>\n      <span class=\"flex min-w-0 flex-1 flex-col\">\n        <span class=\"text-body truncate font-medium\">{{ slice.label }}</span>\n        <span class=\"text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)\">{{\n          subLabel(slice)\n        }}</span>\n      </span>\n      <span class=\"flex flex-none flex-col items-end whitespace-nowrap\">\n        <span class=\"text-body font-medium\">{{ shareFormat()(slice.share) }}</span>\n        <span class=\"text-caption tracking-normal text-(--muted-foreground)\">{{ valueFormat()(slice.value) }}</span>\n      </span>\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet],\n  host: {\n    class: 'flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:gap-8',\n  },\n})\nexport class UiDonut {\n  readonly slices = input.required<DonutSlice[]>();\n  readonly label = input.required<string>();\n  readonly othersLabel = input.required<string>();\n  readonly valueFormat = input<(value: number) => string>(identityValue);\n  readonly shareFormat = input<(share: number) => string>(identityShare);\n\n  readonly legendHref = input<((id: string) => string | null) | undefined>();\n\n  readonly sliceSelect = output<DonutSlice['id']>();\n\n  protected readonly activeId = signal<string | null>(null);\n\n  protected readonly ranked = computed(() => rankSlices(this.slices(), this.othersLabel()));\n  protected readonly positioned = computed(() => positionSlices(this.ranked()));\n\n  protected readonly active = computed<RankedSlice | null>(() => {\n    const ranked = this.ranked();\n    const id = this.activeId();\n\n    return ranked.find((slice) => slice.id === id) ?? ranked[0] ?? null;\n  });\n\n  protected readonly ariaLabel = computed(() => {\n    const detail = shareSlices(this.slices())\n      .map((slice) => `${slice.label} ${this.shareFormat()(slice.share)}`)\n      .join(', ');\n\n    return detail ? `${this.label()} : ${detail}` : this.label();\n  });\n\n  protected readonly radius = RADIUS;\n  protected readonly ringWidth = RING_WIDTH;\n\n  protected strokeColor(slice: RankedSlice): string {\n    return `var(--ramp-${slice.ramp})`;\n  }\n\n  protected sliceClasses(slice: RankedSlice): string {\n    const id = this.activeId();\n    if (id === null) {\n      return SLICE_CLASSES;\n    }\n\n    return `${SLICE_CLASSES} ${id === slice.id ? 'scale-104 motion-reduce:scale-100' : 'opacity-50'}`;\n  }\n\n  protected dotClasses(slice: RankedSlice): string {\n    return `size-3 flex-none rounded-pill shadow-[inset_0_0_0_1px_var(--border)] ${RAMP_DOT_CLASSES[slice.ramp]}`;\n  }\n\n  protected rowClasses(slice: RankedSlice): string {\n    return `${ROW_CLASSES}${this.isActive(slice) ? ' bg-(--soft)' : ''}`;\n  }\n\n  protected subLabel(slice: RankedSlice): string {\n    return slice.members.length > 0 ? slice.members.join(', ') : (slice.sublabel ?? '');\n  }\n\n  protected isActive(slice: RankedSlice): boolean {\n    return this.active()?.id === slice.id;\n  }\n\n  protected highlight(id: string): void {\n    this.activeId.set(id);\n  }\n\n  protected clearHighlight(id: string): void {\n    if (this.activeId() === id) {\n      this.activeId.set(null);\n    }\n  }\n\n  protected hrefFor(id: string): string | null {\n    return this.legendHref()?.(id) ?? null;\n  }\n\n  protected follow(event: MouseEvent, slice: RankedSlice): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {\n      return;\n    }\n    event.preventDefault();\n    this.select(slice);\n  }\n\n  protected select(slice: RankedSlice): void {\n    this.activeId.set(slice.id);\n    this.sliceSelect.emit(slice.id);\n  }\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-drawer.mjs

@@ -0,0 +1,303 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, output } from "@angular/core";
+import { ModalClose } from "@joanroucoux/cairn-ui/dialog";
+const DRAWER_CLOSE_REASONS = [
+	"escape",
+	"backdrop",
+	"cross",
+	"programmatic"
+];
+const nextId = (() => {
+	let count = 0;
+	return () => `ui-drawer-${++count}`;
+})();
+var UiDrawer = class UiDrawer {
+	heading = input(...ngDevMode ? [void 0, { debugName: "heading" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	closeLabel = input(...ngDevMode ? [void 0, { debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	width = input("440px", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	open = input(false, {
+		...ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	busy = input(false, {
+		...ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissed = output();
+	closed = output();
+	headingId = nextId();
+	descriptionId = `${this.headingId}-description`;
+	describedBy = computed(() => this.heading() && this.description() ? this.descriptionId : null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	ariaLabel = computed(() => {
+		if (this.heading()) return null;
+		if (!this.label()) throw new Error("ui-drawer needs a heading or a label: without either it has no accessible name.");
+		return this.label();
+	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	modal = new ModalClose({
+		open: this.open,
+		busy: this.busy,
+		dismissed: this.dismissed,
+		closed: this.closed
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiDrawer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiDrawer,
+		isStandalone: true,
+		selector: "ui-drawer",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			dismissed: "dismissed",
+			closed: "closed"
+		},
+		host: { listeners: {
+			"pointerdown": "modal.onPointerDown($event)",
+			"click": "modal.onClick($event)",
+			"keydown": "modal.onKeydown($event)"
+		} },
+		ngImport: i0,
+		template: `
+    <dialog
+      class="fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] backdrop:bg-black/[0.36] open:flex"
+      [attr.aria-busy]="busy() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="heading() ? headingId : null"
+      [style.--drawer-width]="width()"
+      (cancel)="modal.onCancel($event)"
+      (close)="modal.onNativeClose()"
+    >
+      @if (heading()) {
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-0.5">
+            <h2 class="text-title font-semibold text-pretty" [id]="headingId">{{ heading() }}</h2>
+
+            @if (description()) {
+              <p class="text-label text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+            }
+          </div>
+
+          @if (closeLabel()) {
+            <button
+              class="rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40"
+              type="button"
+              [attr.aria-label]="closeLabel()"
+              [disabled]="busy()"
+              (click)="modal.close('cross')"
+            >
+              <svg
+                aria-hidden="true"
+                class="block size-5 fill-none stroke-current stroke-[1.75]"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          }
+        </div>
+      }
+
+      <ng-content />
+    </dialog>
+  `,
+		isInline: true,
+		styles: ["dialog{transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:none}dialog:not([open]){opacity:0;transform:translate(24px);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translate(24px)}}@media(prefers-reduced-motion:reduce){dialog:not([open]){transform:none}@starting-style{dialog[open]{transform:none}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiDrawer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-drawer",
+			host: {
+				"(pointerdown)": "modal.onPointerDown($event)",
+				"(click)": "modal.onClick($event)",
+				"(keydown)": "modal.onKeydown($event)"
+			},
+			template: `
+    <dialog
+      class="fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] backdrop:bg-black/[0.36] open:flex"
+      [attr.aria-busy]="busy() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="heading() ? headingId : null"
+      [style.--drawer-width]="width()"
+      (cancel)="modal.onCancel($event)"
+      (close)="modal.onNativeClose()"
+    >
+      @if (heading()) {
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-0.5">
+            <h2 class="text-title font-semibold text-pretty" [id]="headingId">{{ heading() }}</h2>
+
+            @if (description()) {
+              <p class="text-label text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+            }
+          </div>
+
+          @if (closeLabel()) {
+            <button
+              class="rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40"
+              type="button"
+              [attr.aria-label]="closeLabel()"
+              [disabled]="busy()"
+              (click)="modal.close('cross')"
+            >
+              <svg
+                aria-hidden="true"
+                class="block size-5 fill-none stroke-current stroke-[1.75]"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          }
+        </div>
+      }
+
+      <ng-content />
+    </dialog>
+  `,
+			styles: ["dialog{transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:none}dialog:not([open]){opacity:0;transform:translate(24px);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translate(24px)}}@media(prefers-reduced-motion:reduce){dialog:not([open]){transform:none}@starting-style{dialog[open]{transform:none}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { DRAWER_CLOSE_REASONS, UiDrawer };
+
+//# sourceMappingURL=joanroucoux-cairn-ui-drawer.mjs.map

package/fesm2022/joanroucoux-cairn-ui-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/internal/drawer-styles.ts","../../../projects/ui/drawer/drawer.ts"],"sourcesContent":["export const DRAWER_STYLES = `\ndialog {\n  transition:\n    opacity var(--duration-base) var(--ease-out),\n    transform var(--duration-base) var(--ease-out),\n    overlay var(--duration-base) allow-discrete,\n    display var(--duration-base) allow-discrete;\n  opacity: 1;\n  transform: none;\n}\n\ndialog:not([open]) {\n  opacity: 0;\n  transform: translateX(24px);\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open] {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog:not([open]) {\n    transform: none;\n  }\n\n  @starting-style {\n    dialog[open] {\n      transform: none;\n    }\n  }\n}\n\ndialog::backdrop {\n  transition: opacity var(--duration-base) var(--ease-out);\n  opacity: 1;\n}\n\ndialog:not([open])::backdrop {\n  opacity: 0;\n  transition-duration: var(--duration-exit);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n`;\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { ModalClose } from '@joanroucoux/cairn-ui/dialog';\n\nimport { DRAWER_STYLES } from './internal/drawer-styles';\n\n/** What started a close, as `closed` reports it. */\nexport const DRAWER_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'programmatic'] as const;\nexport type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-drawer-${++count}`;\n})();\n\n/**\n * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.\n *\n * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.\n *\n * @example\n * <ui-drawer heading=\"Northwind Monde\" closeLabel=\"Fermer le détail\" [open]=\"open()\" (dismissed)=\"open.set(false)\">\n *   <p>Body</p>\n * </ui-drawer>\n */\n@Component({\n  selector: 'ui-drawer',\n  host: {\n    '(pointerdown)': 'modal.onPointerDown($event)',\n    '(click)': 'modal.onClick($event)',\n    '(keydown)': 'modal.onKeydown($event)',\n  },\n  template: `\n    <dialog\n      class=\"fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none w-(--drawer-width) max-w-full [scrollbar-width:none] flex-col gap-6 overflow-y-auto overscroll-contain bg-(--card) p-6 text-(--foreground) shadow-[-1px_0_0_var(--border),-24px_0_48px_rgb(0_0_0/0.12)] backdrop:bg-black/[0.36] open:flex\"\n      [attr.aria-busy]=\"busy() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"heading() ? headingId : null\"\n      [style.--drawer-width]=\"width()\"\n      (cancel)=\"modal.onCancel($event)\"\n      (close)=\"modal.onNativeClose()\"\n    >\n      @if (heading()) {\n        <div class=\"flex items-start justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-title font-semibold text-pretty\" [id]=\"headingId\">{{ heading() }}</h2>\n\n            @if (description()) {\n              <p class=\"text-label text-(--muted-foreground)\" [id]=\"descriptionId\">{{ description() }}</p>\n            }\n          </div>\n\n          @if (closeLabel()) {\n            <button\n              class=\"rounded-control -mt-1 -mr-2 grid size-9 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale] duration-(--duration-press) ease-out outline-none hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-40\"\n              type=\"button\"\n              [attr.aria-label]=\"closeLabel()\"\n              [disabled]=\"busy()\"\n              (click)=\"modal.close('cross')\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                class=\"block size-5 fill-none stroke-current stroke-[1.75]\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <ng-content />\n    </dialog>\n  `,\n  styles: DRAWER_STYLES,\n})\nexport class UiDrawer {\n  readonly heading = input<string>();\n  readonly description = input<string>();\n  readonly closeLabel = input<string>();\n  readonly label = input<string>();\n  readonly width = input('440px');\n  readonly open = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly dismissed = output<void>();\n  readonly closed = output<DrawerCloseReason>();\n\n  protected readonly headingId = nextId();\n  protected readonly descriptionId = `${this.headingId}-description`;\n\n  protected readonly describedBy = computed(() => (this.heading() && this.description() ? this.descriptionId : null));\n\n  protected readonly ariaLabel = computed(() => {\n    if (this.heading()) {\n      return null;\n    }\n    if (!this.label()) {\n      throw new Error('ui-drawer needs a heading or a label: without either it has no accessible name.');\n    }\n    return this.label();\n  });\n\n  protected readonly modal = new ModalClose<DrawerCloseReason>({\n    open: this.open,\n    busy: this.busy,\n    dismissed: this.dismissed,\n    closed: this.closed,\n  });\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-empty.mjs

@@ -1,47 +1,88 @@
-import * as i0 from '@angular/core';
-import { input, Component } from '@angular/core';
-
-/**
- * Centred empty state: a title, a hint and an action slot, such as a catalogue search that matches
- * nothing. The padding is 24px, 48px from 64rem.
- *
- * @example
- * <ui-empty heading="Aucun instrument ne correspond à « zzz »" hint="La recherche porte sur le nom et l'ISIN.">
- *   <button ui-button variant="outline" size="md" type="button">Ajouter une ligne</button>
- * </ui-empty>
- */
-class UiEmpty {
-    heading = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    hint = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiEmpty, isStandalone: true, selector: "ui-empty", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12" }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, input } from "@angular/core";
+var UiEmpty = class UiEmpty {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiEmpty,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiEmpty,
+		isStandalone: true,
+		selector: "ui-empty",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12" },
+		ngImport: i0,
+		template: `
     <span class="text-body font-medium text-pretty">{{ heading() }}</span>
     @if (hint()) {
       <span class="text-label text-(--muted-foreground)">{{ hint() }}</span>
     }
     <div class="mt-2 empty:hidden"><ng-content /></div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiEmpty, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-empty',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiEmpty,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-empty",
+			template: `
     <span class="text-body font-medium text-pretty">{{ heading() }}</span>
     @if (hint()) {
       <span class="text-label text-(--muted-foreground)">{{ hint() }}</span>
     }
     <div class="mt-2 empty:hidden"><ng-content /></div>
   `,
-                    host: { class: 'flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12' },
-                }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: { class: "flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12" }
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}]
+	}
+});
 export { UiEmpty };
-//# sourceMappingURL=joanroucoux-cairn-ui-empty.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-empty.mjs.map

package/fesm2022/joanroucoux-cairn-ui-empty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-empty.mjs","sources":["../../../projects/ui/empty/empty.ts","../../../projects/ui/empty/joanroucoux-cairn-ui-empty.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n/**\n * Centred empty state: a title, a hint and an action slot, such as a catalogue search that matches\n * nothing. The padding is 24px, 48px from 64rem.\n *\n * @example\n * <ui-empty heading=\"Aucun instrument ne correspond à « zzz »\" hint=\"La recherche porte sur le nom et l'ISIN.\">\n *   <button ui-button variant=\"outline\" size=\"md\" type=\"button\">Ajouter une ligne</button>\n * </ui-empty>\n */\n@Component({\n  selector: 'ui-empty',\n  template: `\n    <span class=\"text-body font-medium text-pretty\">{{ heading() }}</span>\n    @if (hint()) {\n      <span class=\"text-label text-(--muted-foreground)\">{{ hint() }}</span>\n    }\n    <div class=\"mt-2 empty:hidden\"><ng-content /></div>\n  `,\n  host: { class: 'flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12' },\n})\nexport class UiEmpty {\n  readonly heading = input.required<string>();\n  readonly hint = input('');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;AAQG;MAYU,OAAO,CAAA;IACT,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAU;IAClC,IAAI,GAAG,KAAK,CAAC,EAAE;6EAAC;uGAFd,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,mEAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATR;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAGU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAXnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,mEAAmE,EAAE;AACrF,iBAAA;;;ACrBD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-empty.mjs","names":[],"sources":["../../../projects/ui/empty/empty.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n/**\n * Centred empty state: a title, a hint and an action slot, such as a search that matches nothing.\n *\n * @example\n * <ui-empty heading=\"Aucune ligne ne correspond à « zzz »\" hint=\"La recherche porte sur le nom et l'ISIN.\">\n *   <button ui-button variant=\"outline\" size=\"md\" type=\"button\">Ajouter une ligne</button>\n * </ui-empty>\n */\n@Component({\n  selector: 'ui-empty',\n  template: `\n    <span class=\"text-body font-medium text-pretty\">{{ heading() }}</span>\n    @if (hint()) {\n      <span class=\"text-label text-(--muted-foreground)\">{{ hint() }}</span>\n    }\n    <div class=\"mt-2 empty:hidden\"><ng-content /></div>\n  `,\n  host: { class: 'flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12' },\n})\nexport class UiEmpty {\n  readonly heading = input.required<string>();\n  readonly hint = input('');\n}\n"],"mappings":";;AAqBA,IAAa,UAAb,MAAa,QAAO;CACT,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,OAAO,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAFd,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oEAAA;EAAA,UAAA;EAAA,UATR;;;;;;;EAMT,UAAA;CAAA,CAAA;;AAGU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAXnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;GAOV,MAAM,EAAE,OAAO,oEAAmE;EACnF,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-external-link.mjs

@@ -1,16 +1,23 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-
-/**
- * Link to another site: the label followed by an external-link icon. A 44px target on touch,
- * an underline on hover with a mouse.
- *
- * @example
- * <a ui-external-link href="https://example.com" target="_blank" rel="noopener">Page on example.com</a>
- */
-class UiExternalLink {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiExternalLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiExternalLink, isStandalone: true, selector: "a[ui-external-link]", host: { classAttribute: "inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none" }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component } from "@angular/core";
+var UiExternalLink = class UiExternalLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiExternalLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiExternalLink,
+		isStandalone: true,
+		selector: "a[ui-external-link]",
+		host: { classAttribute: "inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none" },
+		ngImport: i0,
+		template: `
     <ng-content />
     <svg
       aria-hidden="true"
@@ -27,13 +34,20 @@ class UiExternalLink {
       <path d="M10 14 21 3" />
       <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
     </svg>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiExternalLink, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'a[ui-external-link]',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiExternalLink,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[ui-external-link]",
+			template: `
     <ng-content />
     <svg
       aria-hidden="true"
@@ -51,15 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
     </svg>
   `,
-                    host: {
-                        class: 'inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none',
-                    },
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: { class: "inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none" }
+		}]
+	}]
+});
 export { UiExternalLink };
-//# sourceMappingURL=joanroucoux-cairn-ui-external-link.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-external-link.mjs.map