@joanroucoux/cairn-ui 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # Changelog
 
+## 0.8.0
+
+### Breaking
+
+- The package root `@joanroucoux/cairn-ui` no longer exports anything. Each component folder is now its own
+  entry point, imported as `@joanroucoux/cairn-ui/<folder>`. A consumer's bundler splits chunks per module: a
+  single bundle, or a root barrel re-exporting the entries, put every component in the initial chunk. Moving to
+  subpaths lets each lazy route pull in only the components it uses.
+- Migration: replace `import { UiButton } from '@joanroucoux/cairn-ui'` with
+  `import { UiButton } from '@joanroucoux/cairn-ui/button'`. The stylesheets under `@joanroucoux/cairn-ui/styles/*`
+  are unchanged.
+
+### Added
+
+- `@joanroucoux/cairn-ui/control` (`UI_CONTROL`, `UiControl`, `UiControlError`) and, from
+  `@joanroucoux/cairn-ui/input`, `CONTROL_BASE_CLASSES`, `CONTROL_SIZE_CLASSES` and `CONTROL_SURFACE_CLASSES` are now
+  exported, because `select`, `choice-chips` and `field` import them across entry points. Only `UiControlError` was
+  public before.
+
+### Subpaths
+
+Every symbol that was exported from the root now lives under exactly one subpath:
+
+- `@joanroucoux/cairn-ui/action-bar`: `UiActionBar`
+- `@joanroucoux/cairn-ui/alert`: `ALERT_VARIANTS`, `UiAlert`, `AlertVariant`
+- `@joanroucoux/cairn-ui/amount`: `AMOUNT_MASKINGS`, `AMOUNT_NUMERICS`, `UI_AMOUNT_MASKED`, `UiAmount`, `AmountMasking`, `AmountNumeric`, `AmountFormatOptions`, `formatAmount`
+- `@joanroucoux/cairn-ui/async`: `ASYNC_ALIGNS`, `ASYNC_STATES`, `ASYNC_VARIANTS`, `UiAsync`, `AsyncAlign`, `AsyncState`, `AsyncVariant`, `delayedState`
+- `@joanroucoux/cairn-ui/avatar`: `AVATAR_SIZES`, `UiAvatar`, `UiAvatarLink`, `AvatarSize`
+- `@joanroucoux/cairn-ui/back-link`: `BACK_LINK_SIZES`, `UiBackLink`, `BackLinkSize`
+- `@joanroucoux/cairn-ui/badge`: `BADGE_SIZES`, `BADGE_VARIANTS`, `UiBadge`, `BadgeSize`, `BadgeVariant`
+- `@joanroucoux/cairn-ui/button`: `BUTTON_SIZES`, `BUTTON_VARIANTS`, `UiButton`, `ButtonSize`, `ButtonVariant`
+- `@joanroucoux/cairn-ui/card`: `CARD_PADDINGS`, `CARD_SURFACES`, `CARD_VARIANTS`, `UiCard`, `CardPadding`, `CardSurface`, `CardVariant`
+- `@joanroucoux/cairn-ui/choice-chips`: `ChoiceChipOption`, `UiChoiceChips`
+- `@joanroucoux/cairn-ui/control`: `UiControlError`, `UI_CONTROL`, `UiControl`
+- `@joanroucoux/cairn-ui/delta`: `DELTA_EMPHASES`, `DELTA_SIZES`, `DELTA_WEIGHTS`, `UiDelta`, `DeltaEmphasis`, `DeltaSize`, `DeltaWeight`
+- `@joanroucoux/cairn-ui/dialog`: `DIALOG_CLOSE_REASONS`, `DIALOG_LAYOUTS`, `DIALOG_WIDTHS`, `UiDialog`, `DialogCloseReason`, `DialogLayout`, `DialogWidth`
+- `@joanroucoux/cairn-ui/donut`: `DonutSlice`, `UiDonut`
+- `@joanroucoux/cairn-ui/empty`: `UiEmpty`
+- `@joanroucoux/cairn-ui/external-link`: `UiExternalLink`
+- `@joanroucoux/cairn-ui/fact`: `FACT_SIZES`, `FACT_SUB_TONES`, `UiFact`, `UiFacts`, `FactSize`, `FactSubTone`
+- `@joanroucoux/cairn-ui/field`: `UiField`, `UiFieldLeading`, `UiFieldTrailing`
+- `@joanroucoux/cairn-ui/filter-chips`: `FilterChipOption`, `UiFilterChips`
+- `@joanroucoux/cairn-ui/input`: `CONTROL_SIZES`, `CONTROL_SURFACES`, `UiInput`, `UiTextarea`, `ControlSize`, `ControlSurface`, `CONTROL_BASE_CLASSES`, `CONTROL_SIZE_CLASSES`, `CONTROL_SURFACE_CLASSES`
+- `@joanroucoux/cairn-ui/line-chart`: `AxisTicks`, `ChartPoint`, `TooltipSize`, `UiLineChart`
+- `@joanroucoux/cairn-ui/menu`: `UiMenu`, `UiMenuItem`, `UiMenuTrigger`
+- `@joanroucoux/cairn-ui/meter`: `METER_SIZES`, `METER_TONES`, `UiMeter`, `MeterSize`, `MeterTone`
+- `@joanroucoux/cairn-ui/motion`: `UiFlipItem`, `UiFlipList`, `UiHighlight`, `injectReducedMotion`, `holdTransitionsUntilRendered`
+- `@joanroucoux/cairn-ui/nav-item`: `UiNavItem`
+- `@joanroucoux/cairn-ui/row`: `ROW_GAPS`, `ROW_PADDINGS`, `ROW_SIZES`, `UiListRow`, `UiRow`, `UiRowItem`, `UiRowTile`, `RowGap`, `RowPadding`, `RowSize`
+- `@joanroucoux/cairn-ui/segmented`: `SEGMENTED_SIZES`, `UiSegmented`, `SegmentedOption`, `SegmentedSize`
+- `@joanroucoux/cairn-ui/select`: `UiSelect`
+- `@joanroucoux/cairn-ui/skeleton`: `SKELETON_SHAPES`, `UiSkeleton`, `SkeletonShape`
+- `@joanroucoux/cairn-ui/stale-link`: `STALE_LINK_SIZES`, `UiStaleLink`, `StaleLinkSize`
+- `@joanroucoux/cairn-ui/stat`: `STAT_SIZES`, `UiStat`, `StatSize`
+- `@joanroucoux/cairn-ui/switch`: `UiSwitch`
+- `@joanroucoux/cairn-ui/tab-bar`: `UiTab`, `UiTabBar`
+- `@joanroucoux/cairn-ui/table`: `CELL_BREAKPOINTS`, `GROUP_SIZES`, `SUB_TONES`, `TABLE_ROWS`, `UiCellSub`, `UiGroup`, `UiGroupCell`, `UiRowAction`, `UiRowLink`, `UiTable`, `UiTd`, `UiTh`, `UiTr`, `CellBreakpoint`, `GroupSize`, `SubTone`, `TableRow`
+- `@joanroucoux/cairn-ui/toast`: `UiToaster`, `UiToasts`, `Toast`
+
 ## 0.7.2
 
 ### Added

package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs

@@ -0,0 +1,54 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, afterNextRender, Component } from '@angular/core';
+
+const HEIGHT_PROPERTY = '--action-bar-height';
+/**
+ * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
+ * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and
+ * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
+ * width equally. While it is on the page it publishes its height as `--action-bar-height` on the
+ * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.
+ *
+ * @example
+ * <ui-action-bar>
+ *   <button ui-button variant="outline" size="tall">Sell</button>
+ *   <button ui-button size="tall">Buy</button>
+ * </ui-action-bar>
+ */
+class UiActionBar {
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        const root = inject(DOCUMENT).documentElement;
+        const destroyRef = inject(DestroyRef);
+        const publish = () => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);
+        afterNextRender(() => {
+            publish();
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(publish);
+                observer.observe(host);
+                destroyRef.onDestroy(() => observer.disconnect());
+            }
+        });
+        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-action-bar',
+                    template: '<ng-content />',
+                    host: {
+                        class: 'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiActionBar };
+//# sourceMappingURL=joanroucoux-cairn-ui-action-bar.mjs.map

package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-action-bar.mjs","sources":["../../../projects/ui/action-bar/action-bar.ts","../../../projects/ui/action-bar/joanroucoux-cairn-ui-action-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, ElementRef, afterNextRender, inject } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--action-bar-height';\n\n/**\n * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within\n * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and\n * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the\n * width equally. While it is on the page it publishes its height as `--action-bar-height` on the\n * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.\n *\n * @example\n * <ui-action-bar>\n *   <button ui-button variant=\"outline\" size=\"tall\">Sell</button>\n *   <button ui-button size=\"tall\">Buy</button>\n * </ui-action-bar>\n */\n@Component({\n  selector: 'ui-action-bar',\n  template: '<ng-content />',\n  host: {\n    class:\n      'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',\n  },\n})\nexport class UiActionBar {\n  constructor() {\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const root = inject(DOCUMENT).documentElement;\n    const destroyRef = inject(DestroyRef);\n    const publish = (): void => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);\n\n    afterNextRender(() => {\n      publish();\n\n      if (typeof ResizeObserver !== 'undefined') {\n        const observer = new ResizeObserver(publish);\n        observer.observe(host);\n        destroyRef.onDestroy(() => observer.disconnect());\n      }\n    });\n\n    destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,GAAG,qBAAqB;AAE7C;;;;;;;;;;;;AAYG;MASU,WAAW,CAAA;AACtB,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;QACtE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe;AAC7C,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AACrC,QAAA,MAAM,OAAO,GAAG,MAAY,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,CAAA,EAAG,IAAI,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC;QAE7F,eAAe,CAAC,MAAK;AACnB,YAAA,OAAO,EAAE;AAET,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AACzC,gBAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC;AAC5C,gBAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;gBACtB,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;YACnD;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACxE;uGAlBW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,wTANZ,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMf,WAAW,EAAA,UAAA,EAAA,CAAA;kBARvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,mNAAmN;AACtN,qBAAA;AACF,iBAAA;;;ACzBD;;AAEG;;;;"}

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

@@ -0,0 +1,129 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+
+const ALERT_VARIANTS = ['error', 'warning'];
+const BASE_CLASSES = 'flex items-start gap-2.5 text-left text-label';
+const VARIANT_CLASSES = {
+    error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',
+    warning: 'text-(--foreground)',
+};
+/**
+ * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
+ * It fades in when it appears; set `[fadeIn]="false"` on an alert that is part of the page as it
+ * opens (an error state after a load), which shows without motion.
+ *
+ * @example
+ * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
+ */
+class UiAlert {
+    variant = input('error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
+    fadeIn = input(true, { ...(ngDevMode ? { debugName: "fadeIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAlert, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.leave": "ui-leave-fade" }, properties: { "class": "classes()", "attr.role": "variant() === 'warning' ? 'status' : 'alert'" } }, ngImport: i0, template: `
+    @if (variant() === 'warning') {
+      <svg
+        aria-hidden="true"
+        class="mt-px block flex-none stroke-(--negative)"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+      >
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+        <path d="M12 9v4" />
+        <path d="M12 17h.01" />
+      </svg>
+    } @else {
+      <svg
+        aria-hidden="true"
+        class="block flex-none stroke-(--negative)"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+        [class.mt-px]="heading()"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" x2="12" y1="8" y2="12" />
+        <line x1="12" x2="12.01" y1="16" y2="16" />
+      </svg>
+    }
+    <div class="flex flex-col gap-0.5">
+      @if (heading()) {
+        <span class="font-medium">{{ heading() }}</span>
+      }
+      <span class="text-pretty" [class.text-(--muted-foreground)]="heading()"><ng-content /></span>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAlert, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-alert',
+                    template: `
+    @if (variant() === 'warning') {
+      <svg
+        aria-hidden="true"
+        class="mt-px block flex-none stroke-(--negative)"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+      >
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+        <path d="M12 9v4" />
+        <path d="M12 17h.01" />
+      </svg>
+    } @else {
+      <svg
+        aria-hidden="true"
+        class="block flex-none stroke-(--negative)"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+        [class.mt-px]="heading()"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" x2="12" y1="8" y2="12" />
+        <line x1="12" x2="12.01" y1="16" y2="16" />
+      </svg>
+    }
+    <div class="flex flex-col gap-0.5">
+      @if (heading()) {
+        <span class="font-medium">{{ heading() }}</span>
+      }
+      <span class="text-pretty" [class.text-(--muted-foreground)]="heading()"><ng-content /></span>
+    </div>
+  `,
+                    host: {
+                        'animate.leave': 'ui-leave-fade',
+                        '[class]': 'classes()',
+                        '[attr.role]': "variant() === 'warning' ? 'status' : 'alert'",
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], fadeIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeIn", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALERT_VARIANTS, UiAlert };
+//# sourceMappingURL=joanroucoux-cairn-ui-alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-alert.mjs","sources":["../../../projects/ui/alert/alert.ts","../../../projects/ui/alert/joanroucoux-cairn-ui-alert.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\nexport const ALERT_VARIANTS = ['error', 'warning'] as const;\nexport type AlertVariant = (typeof ALERT_VARIANTS)[number];\n\nconst BASE_CLASSES = 'flex items-start gap-2.5 text-left text-label';\n\nconst VARIANT_CLASSES: Record<AlertVariant, string> = {\n  error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',\n  warning: 'text-(--foreground)',\n};\n\n/**\n * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.\n * It fades in when it appears; set `[fadeIn]=\"false\"` on an alert that is part of the page as it\n * opens (an error state after a load), which shows without motion.\n *\n * @example\n * <ui-alert heading=\"Sign-in failed\">Try again.</ui-alert>\n */\n@Component({\n  selector: 'ui-alert',\n  template: `\n    @if (variant() === 'warning') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"mt-px block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n      >\n        <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    } @else {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n        [class.mt-px]=\"heading()\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" />\n        <line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />\n      </svg>\n    }\n    <div class=\"flex flex-col gap-0.5\">\n      @if (heading()) {\n        <span class=\"font-medium\">{{ heading() }}</span>\n      }\n      <span class=\"text-pretty\" [class.text-(--muted-foreground)]=\"heading()\"><ng-content /></span>\n    </div>\n  `,\n  host: {\n    'animate.leave': 'ui-leave-fade',\n    '[class]': 'classes()',\n    '[attr.role]': \"variant() === 'warning' ? 'status' : 'alert'\",\n  },\n})\nexport class UiAlert {\n  readonly variant = input<AlertVariant>('error');\n  readonly heading = input<string>();\n  readonly fadeIn = input(true, { transform: booleanAttribute });\n\n  protected readonly classes = computed(\n    () => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,cAAc,GAAG,CAAC,OAAO,EAAE,SAAS;AAGjD,MAAM,YAAY,GAAG,+CAA+C;AAEpE,MAAM,eAAe,GAAiC;AACpD,IAAA,KAAK,EAAE,gFAAgF;AACvF,IAAA,OAAO,EAAE,qBAAqB;CAC/B;AAED;;;;;;;AAOG;MAmDU,OAAO,CAAA;IACT,OAAO,GAAG,KAAK,CAAe,OAAO;gFAAC;AACtC,IAAA,OAAO,GAAG,KAAK;2FAAU;IACzB,MAAM,GAAG,KAAK,CAAC,IAAI,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE3C,IAAA,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,GAAG,gBAAgB,GAAG,EAAE,CAAA,CAAE;gFACnG;uGAPU,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhDR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAOU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAlDnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,eAAe,EAAE,eAAe;AAChC,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,8CAA8C;AAC9D,qBAAA;AACF,iBAAA;;;ACrED;;AAEG;;;;"}

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

@@ -0,0 +1,114 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, input, inject, LOCALE_ID, booleanAttribute, computed, Component } from '@angular/core';
+
+const MINUS = '−';
+const EM_DASH = '—';
+const BULLETS = '••••';
+/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
+function formatAmount(value, options, masked = false) {
+    if (value === null || value === undefined || Number.isNaN(value)) {
+        return EM_DASH;
+    }
+    const digits = options.fractionDigits ?? 2;
+    const format = new Intl.NumberFormat(options.locale, {
+        ...(options.currency ? { style: 'currency', currency: options.currency } : {}),
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    });
+    const magnitude = Math.abs(value);
+    const parts = format.formatToParts(magnitude);
+    if (masked) {
+        let replaced = false;
+        return parts
+            .map((part) => {
+            if (['integer', 'group', 'decimal', 'fraction'].includes(part.type)) {
+                if (replaced) {
+                    return '';
+                }
+                replaced = true;
+                return BULLETS;
+            }
+            return part.value;
+        })
+            .join('');
+    }
+    const text = parts.map((part) => part.value).join('');
+    const isZero = Number(format.format(magnitude).replace(/[^\d]/g, '')) === 0;
+    if (!options.signed || isZero) {
+        return value < 0 && !isZero ? `${MINUS}${text}` : text;
+    }
+    return `${value > 0 ? '+' : MINUS}${text}`;
+}
+
+/** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
+const UI_AMOUNT_MASKED = new InjectionToken('UI_AMOUNT_MASKED', {
+    providedIn: 'root',
+    factory: () => signal(false),
+});
+/** Available figure styles. `AmountNumeric` is derived from this tuple. */
+const AMOUNT_NUMERICS = ['tabular', 'proportional'];
+/** Available masking behaviors. `AmountMasking` is derived from this tuple. */
+const AMOUNT_MASKINGS = ['dots', 'hide'];
+/**
+ * A number or an amount of money, formatted for the locale and masked when the app hides amounts.
+ *
+ * @example
+ * <ui-amount [value]="total" currency="EUR" numeric="proportional" />
+ * <ui-amount [value]="dayChange" currency="EUR" signed whenMasked="hide" />
+ */
+class UiAmount {
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    currency = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "currency" }] : /* istanbul ignore next */ []));
+    locale = input(inject(LOCALE_ID), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    signed = input(false, { ...(ngDevMode ? { debugName: "signed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fractionDigits = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionDigits" }] : /* istanbul ignore next */ []));
+    numeric = input('tabular', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numeric" }] : /* istanbul ignore next */ []));
+    whenMasked = input('dots', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "whenMasked" }] : /* istanbul ignore next */ []));
+    #masked = inject(UI_AMOUNT_MASKED);
+    hidden = computed(() => this.#masked() && this.whenMasked() === 'hide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    text = computed(() => formatAmount(this.value(), {
+        locale: this.locale(),
+        currency: this.currency(),
+        signed: this.signed(),
+        fractionDigits: this.fractionDigits(),
+    }, this.#masked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const missing = this.value() === null || this.value() === undefined;
+        return [
+            'whitespace-nowrap',
+            this.numeric() === 'tabular' ? 'tabular-nums' : '',
+            missing ? 'text-(--subtle-foreground)' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAmount, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiAmount, isStandalone: true, selector: "ui-amount", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, signed: { classPropertyName: "signed", publicName: "signed", isSignal: true, isRequired: false, transformFunction: null }, fractionDigits: { classPropertyName: "fractionDigits", publicName: "fractionDigits", isSignal: true, isRequired: false, transformFunction: null }, numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, whenMasked: { classPropertyName: "whenMasked", publicName: "whenMasked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: '{{ text() }}', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAmount, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-amount',
+                    template: '{{ text() }}',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.hidden]': 'hidden() || null',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], signed: [{ type: i0.Input, args: [{ isSignal: true, alias: "signed", required: false }] }], fractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "fractionDigits", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], whenMasked: [{ type: i0.Input, args: [{ isSignal: true, alias: "whenMasked", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, UI_AMOUNT_MASKED, UiAmount, formatAmount };
+//# sourceMappingURL=joanroucoux-cairn-ui-amount.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-amount.mjs","sources":["../../../projects/ui/amount/format-amount.ts","../../../projects/ui/amount/amount.ts","../../../projects/ui/amount/joanroucoux-cairn-ui-amount.ts"],"sourcesContent":["const MINUS = '−';\nconst EM_DASH = '—';\nconst BULLETS = '••••';\n\nexport type AmountFormatOptions = {\n  locale: string;\n  currency?: string;\n  signed?: boolean;\n  fractionDigits?: number;\n};\n\n/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */\nexport function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked = false): string {\n  if (value === null || value === undefined || Number.isNaN(value)) {\n    return EM_DASH;\n  }\n  const digits = options.fractionDigits ?? 2;\n  const format = new Intl.NumberFormat(options.locale, {\n    ...(options.currency ? { style: 'currency', currency: options.currency } : {}),\n    minimumFractionDigits: digits,\n    maximumFractionDigits: digits,\n  });\n  const magnitude = Math.abs(value);\n  const parts = format.formatToParts(magnitude);\n\n  if (masked) {\n    let replaced = false;\n    return parts\n      .map((part) => {\n        if (['integer', 'group', 'decimal', 'fraction'].includes(part.type)) {\n          if (replaced) {\n            return '';\n          }\n          replaced = true;\n          return BULLETS;\n        }\n        return part.value;\n      })\n      .join('');\n  }\n\n  const text = parts.map((part) => part.value).join('');\n  const isZero = Number(format.format(magnitude).replace(/[^\\d]/g, '')) === 0;\n  if (!options.signed || isZero) {\n    return value < 0 && !isZero ? `${MINUS}${text}` : text;\n  }\n  return `${value > 0 ? '+' : MINUS}${text}`;\n}\n","import {\n  Component,\n  InjectionToken,\n  LOCALE_ID,\n  type Signal,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { formatAmount } from './format-amount';\n\n/** App-wide \"amounts are hidden\" state. Defaults to never masked; the app overrides it. */\nexport const UI_AMOUNT_MASKED = new InjectionToken<Signal<boolean>>('UI_AMOUNT_MASKED', {\n  providedIn: 'root',\n  factory: () => signal(false),\n});\n\n/** Available figure styles. `AmountNumeric` is derived from this tuple. */\nexport const AMOUNT_NUMERICS = ['tabular', 'proportional'] as const;\nexport type AmountNumeric = (typeof AMOUNT_NUMERICS)[number];\n\n/** Available masking behaviors. `AmountMasking` is derived from this tuple. */\nexport const AMOUNT_MASKINGS = ['dots', 'hide'] as const;\nexport type AmountMasking = (typeof AMOUNT_MASKINGS)[number];\n\n/**\n * A number or an amount of money, formatted for the locale and masked when the app hides amounts.\n *\n * @example\n * <ui-amount [value]=\"total\" currency=\"EUR\" numeric=\"proportional\" />\n * <ui-amount [value]=\"dayChange\" currency=\"EUR\" signed whenMasked=\"hide\" />\n */\n@Component({\n  selector: 'ui-amount',\n  template: '{{ text() }}',\n  host: {\n    '[class]': 'classes()',\n    '[attr.hidden]': 'hidden() || null',\n  },\n})\nexport class UiAmount {\n  readonly value = input<number | null | undefined>();\n  readonly currency = input<string>();\n  readonly locale = input<string>(inject(LOCALE_ID));\n  readonly signed = input(false, { transform: booleanAttribute });\n  readonly fractionDigits = input(2);\n  readonly numeric = input<AmountNumeric>('tabular');\n  readonly whenMasked = input<AmountMasking>('dots');\n\n  readonly #masked = inject(UI_AMOUNT_MASKED);\n\n  protected readonly hidden = computed(() => this.#masked() && this.whenMasked() === 'hide');\n\n  protected readonly text = computed(() =>\n    formatAmount(\n      this.value(),\n      {\n        locale: this.locale(),\n        currency: this.currency(),\n        signed: this.signed(),\n        fractionDigits: this.fractionDigits(),\n      },\n      this.#masked(),\n    ),\n  );\n\n  protected readonly classes = computed(() => {\n    const missing = this.value() === null || this.value() === undefined;\n\n    return [\n      'whitespace-nowrap',\n      this.numeric() === 'tabular' ? 'tabular-nums' : '',\n      missing ? 'text-(--subtle-foreground)' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}