@joanroucoux/cairn-ui 0.6.3 → 0.6.5

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -506,21 +506,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
- * glow on hover and the press scale. The avatar itself keeps its own size.
+ * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
+ * sets through `ariaCurrentWhenActive`) it holds a soft halo. The avatar itself keeps its own size.
  *
  * @example
  * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
  */
 class UiAvatarLink {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[uiAvatarLink], button[uiAvatarLink]',
                     host: {
-                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
+                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
                     },
                 }]
         }] });
@@ -2317,6 +2318,33 @@ const isCoreTick = (index, count) => {
     const middle = Math.floor((count - 1) / 2);
     return index === 0 || index === count - 1 || index === middle;
 };
+const firstOfEachRun = (labels, included) => {
+    let previous = null;
+    return labels.map((text, index) => {
+        if (!included(index)) {
+            return false;
+        }
+        const distinct = text !== previous;
+        previous = text;
+        return distinct;
+    });
+};
+const tickLabels = (ticks, format, mode) => {
+    const labels = ticks.map((tick) => format(tick.t));
+    const count = labels.length;
+    const core = (index) => isCoreTick(index, count);
+    const everyTick = firstOfEachRun(labels, () => true);
+    const coreTicks = firstOfEachRun(labels, core);
+    return labels.map((text, index) => {
+        const wide = mode === 3 ? coreTicks[index] : everyTick[index];
+        const narrow = coreTicks[index];
+        if (!wide && !narrow) {
+            return null;
+        }
+        const classes = mode === 'auto' ? `${narrow ? '' : 'max-sm:hidden'} ${wide ? '' : 'sm:hidden'}`.trim() : wide ? '' : 'hidden';
+        return { text, classes };
+    });
+};
 
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const nearestPointIndex = (points, x) => {
@@ -2543,6 +2571,11 @@ const wideViewport = () => {
 /**
  * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
  *
+ * Axis labels are never repeated: a tick whose `axisFormat` text equals the previous drawn label is
+ * not rendered. The first tick always is, so only the last edge label can drop. With `axisTicks="3"`
+ * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
+ * three core ticks below it. Tick positions are unchanged.
+ *
  * @example
  * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
  */
@@ -2579,7 +2612,6 @@ class UiLineChart {
     #frame = null;
     #hasRenderedOnce = false;
     #previousGeometry = null;
-    isCoreTick = isCoreTick;
     svgRef = viewChild.required('svgRef', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
     activeIndex = signal(null, /* @ts-ignore */
@@ -2607,6 +2639,8 @@ class UiLineChart {
     ...(ngDevMode ? [{ debugName: "displayLine" }] : /* istanbul ignore next */ []));
     ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickTexts" }] : /* istanbul ignore next */ []));
     active = computed(() => {
         const geometry = this.geometry();
         const index = this.activeIndex();
@@ -2776,25 +2810,19 @@ class UiLineChart {
               [attr.cy]="geometry.end.y"
             />
 
-            @for (
-              tick of ticks();
-              track tick.t;
-              let index = $index;
-              let count = $count;
-              let first = $first;
-              let last = $last
-            ) {
-              <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
-                data-chart-axis-tick
-                [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
-                [attr.x]="tick.x"
-                [attr.y]="effectiveHeight() - 4"
-                [class.hidden]="axisTicks() === 3 && !isCoreTick(index, count)"
-                [class.max-sm:hidden]="axisTicks() === 'auto' && !isCoreTick(index, count)"
-              >
-                {{ axisFormat()(tick.t) }}
-              </text>
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
             }
 
             @if (active(); as point) {
@@ -2924,25 +2952,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               [attr.cy]="geometry.end.y"
             />
 
-            @for (
-              tick of ticks();
-              track tick.t;
-              let index = $index;
-              let count = $count;
-              let first = $first;
-              let last = $last
-            ) {
-              <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
-                data-chart-axis-tick
-                [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
-                [attr.x]="tick.x"
-                [attr.y]="effectiveHeight() - 4"
-                [class.hidden]="axisTicks() === 3 && !isCoreTick(index, count)"
-                [class.max-sm:hidden]="axisTicks() === 'auto' && !isCoreTick(index, count)"
-              >
-                {{ axisFormat()(tick.t) }}
-              </text>
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
             }
 
             @if (active(); as point) {