@cdevhub/ngx-tw 0.4.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-transfer.mjs

@@ -1,14 +1,13 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, input, output, contentChild, ElementRef, Injector, DestroyRef, signal, computed, linkedSignal, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { wireErrorState } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { CheckboxComponent } from '@cdevhub/ngx-tw/checkbox';
 import { InputDirective } from '@cdevhub/ngx-tw/input';
@@ -65,6 +64,12 @@ const DISPLAY_DEFAULTS = {
 };
 /** Replaces `{name}` tokens in a template with values from `vars`. */
 function formatLabel(template, vars) {
+    // Defence in depth. `resolvedLabels()` already filters explicitly-undefined
+    // consumer keys, so a non-string cannot reach here through the public
+    // `labels` input today. The guard exists so a future regression in that
+    // merge degrades to a missing label instead of throwing.
+    if (typeof template !== 'string')
+        return '';
     return template.replace(/\{(\w+)\}/g, (match, key) => key in vars ? String(vars[key]) : match);
 }
 // ── tv() config ───────────────────────────────────────────────────────
@@ -97,6 +102,13 @@ const transferVariants = tv({
         // size; not the [twButton] directive (its size padding would fight a square
         // override across two class bindings).
         moveButton: 'inline-flex items-center justify-center shrink-0 rounded-md border border-border bg-surface text-fg-muted cursor-pointer transition-colors duration-200 motion-reduce:transition-none hover:bg-surface-muted hover:text-fg hover:border-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed',
+        // Glyph inside the square move button. Glyph sub-scale saturating at
+        // `lg`: 3 / 4 / 5 / 6 / 6, matching `optionCheck`. Previously 4/4/5/5/5,
+        // which left three of the five advertised steps dead. `xl` stops at
+        // 24px rather than the scale's 32px because the glyph lives inside a
+        // 36px `moveButton` (the square-interactive scale saturates at `lg`
+        // too, per CLAUDE.md) — a 32px glyph in a 36px target leaves no optical
+        // padding. Raising one means raising the other.
         moveIcon: 'shrink-0',
         empty: 'flex items-center justify-center p-4 text-sm text-fg-subtle text-center',
     },
@@ -106,9 +118,9 @@ const transferVariants = tv({
                 panelHeader: 'px-2 py-1',
                 search: 'px-2 py-1',
                 option: 'px-2 py-1 text-xs gap-1.5',
-                optionCheck: 'size-4',
+                optionCheck: 'size-3',
                 moveButton: 'size-6',
-                moveIcon: 'size-4',
+                moveIcon: 'size-3',
                 empty: 'text-xs',
             },
             sm: {
@@ -131,17 +143,17 @@ const transferVariants = tv({
                 panelHeader: 'px-5 py-2.5',
                 search: 'px-4 py-2.5',
                 option: 'px-4 py-2.5 text-base',
-                optionCheck: 'size-5',
+                optionCheck: 'size-6',
                 moveButton: 'size-9',
-                moveIcon: 'size-5',
+                moveIcon: 'size-6',
             },
             xl: {
                 panelHeader: 'px-6 py-3',
                 search: 'px-4 py-3',
                 option: 'px-4 py-3 text-base',
-                optionCheck: 'size-5',
+                optionCheck: 'size-6',
                 moveButton: 'size-9',
-                moveIcon: 'size-5',
+                moveIcon: 'size-6',
             },
         },
         checked: {
@@ -233,13 +245,13 @@ class TransferComponent extends FormFieldControl {
     /** Reserved for control identification (e.g. analytics, future native-submission parity). The transfer has no single native value element, so it is not currently reflected to the DOM. Defaults to `undefined`. */
     name = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    /** Id on the host element. Auto-generated as `tw-transfer-N` when unset. Used by the form-field's `<label for>` association. */
+    /** Id on the host element. Auto-generated as `tw-transfer-N` when unset. Used by the form-field's `<label for>` association. Alias: `id`. */
     idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
     /** Accessible name applied to the control when no visible label is wired. Mirrored to `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the control. The form-field merges its hint / error ids alongside. Defaults to `undefined`. */
+    /** ID of an external element that describes the control. The form-field merges its hint / error ids alongside. Defaults to `undefined`. Alias: `aria-describedby`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, uses the `TW_ERROR_STATE_MATCHER` token's value. Defaults to `undefined`. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
@@ -260,9 +272,6 @@ class TransferComponent extends FormFieldControl {
     focusMonitor = inject(FocusMonitor);
     liveAnnouncer = inject(LiveAnnouncer);
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     platform = inject(Platform);
     // ── Identity ──
     uid = nextId++;
@@ -283,10 +292,13 @@ class TransferComponent extends FormFieldControl {
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     _focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+        track: [() => this._focused()],
+    });
     describedByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
     labelledByIdsSignal = signal([], /* @ts-ignore */
@@ -296,16 +308,32 @@ class TransferComponent extends FormFieldControl {
     /** @internal Stable comparator for `[cdkListboxCompareWith]`. Keys are identity-comparable. */
     compareKeys = (a, b) => Object.is(a, b);
     // ── Resolved config ──
-    /** @internal */
-    resolvedLabels = computed(() => ({
-        ...LABELS_DEFAULTS,
-        ...this.labels(),
-    }), /* @ts-ignore */
+    /**
+     * @internal Resolved label record.
+     *
+     * Explicitly-undefined keys are dropped before merging. Root `tsconfig.json`
+     * does not set `exactOptionalPropertyTypes`, so
+     * `[labels]="{ moveAnnouncement: i18n.moved }"` type-checks even when the
+     * i18n bundle has no such key — and a plain spread would then overwrite the
+     * default with `undefined`, which reaches `formatLabel()` and throws
+     * `Cannot read properties of undefined (reading 'replace')`. Same filter
+     * `table.ts` and `timeline.ts` already use; the `Required<>` annotation only
+     * tells the truth once the filter is in place.
+     */
+    resolvedLabels = computed(() => {
+        const overrides = Object.fromEntries(Object.entries(this.labels() ?? {}).filter(([, value]) => value !== undefined));
+        return { ...LABELS_DEFAULTS, ...overrides };
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
-    resolvedDisplay = computed(() => ({
-        ...DISPLAY_DEFAULTS,
-        ...this.display(),
-    }), /* @ts-ignore */
+    /**
+     * @internal Resolved display config. Same explicitly-undefined filter as
+     * `resolvedLabels` — a plain spread let `[display]="{ listHeight: undefined }"`
+     * reach the list's inline `height` as `undefined`, collapsing the panes.
+     */
+    resolvedDisplay = computed(() => {
+        const overrides = Object.fromEntries(Object.entries(this.display() ?? {}).filter(([, value]) => value !== undefined));
+        return { ...DISPLAY_DEFAULTS, ...overrides };
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedDisplay" }] : /* istanbul ignore next */ []));
     // Behaviour is resolved inline (not via a `Required<>` const) because `filterFn`
     // is legitimately optional and both predicates are generic over `T`.
@@ -701,30 +729,11 @@ class TransferComponent extends FormFieldControl {
     disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** @internal */
-    required = computed(() => {
-        this._ngControlRev();
-        if (this.requiredInput())
-            return true;
-        return !!this.ngControl?.control?.hasValidator(Validators.required);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    required = this.errorWiring.required;
     /** @internal */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        this._focused();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     /** @internal Active validation errors from the bound control, for `[twError match="…"]` filtering. */
-    errors = computed(() => {
-        this._ngControlRev();
-        return this.ngControl?.control?.errors ?? null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errors = this.errorWiring.errors;
     /** @internal */
     controlType = 'transfer';
     /** @internal */
@@ -804,29 +813,15 @@ class TransferComponent extends FormFieldControl {
             this._focused.set(!!origin);
             if (wasFocused && !origin) {
                 this.onTouched();
-                this._ngControlRev.update((n) => n + 1);
+                this.errorWiring.bump();
             }
         });
         this.destroyRef.onDestroy(() => this.focusMonitor.stopMonitoring(this.elementRef));
         // React to status/value changes on the bound control so errorState recomputes.
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TransferComponent, isStandalone: true, selector: "tw-transfer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, keyFn: { classPropertyName: "keyFn", publicName: "keyFn", isSignal: true, isRequired: true, transformFunction: null }, labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", moved: "moved" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "resolvedLabelledBy() || null", "attr.aria-describedby": "resolvedDescribedBy() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-focused": "focused() || null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TransferComponent, isStandalone: true, selector: "tw-transfer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, keyFn: { classPropertyName: "keyFn", publicName: "keyFn", isSignal: true, isRequired: true, transformFunction: null }, labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", moved: "moved" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "resolvedLabelledBy() || null", "attr.aria-describedby": "resolvedDescribedBy() || null", "attr.aria-disabled": "disabled() || null", "attr.data-focused": "focused() || null" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TransferComponent),
@@ -878,6 +873,7 @@ class TransferComponent extends FormFieldControl {
             [class]="listClasses()"
             [style.height.px]="listHeightPx()"
             [attr.aria-labelledby]="panel.titleId"
+            [attr.aria-invalid]="panel.side === 'target' && errorState() ? 'true' : null"
             (cdkListboxValueChange)="onCheckedChange(panel.side, $event)"
           >
             @for (row of panel.rows; track row.key) {
@@ -911,7 +907,16 @@ class TransferComponent extends FormFieldControl {
             }
           </div>
         } @else {
-          <div [class]="emptyClasses()" [style.height.px]="listHeightPx()">{{ panel.emptyText }}</div>
+          <!--
+            Also carries aria-invalid: an empty target is exactly when a required
+            transfer is invalid, and the listbox above does not exist to carry it
+            (an empty role=listbox would violate aria-required-children).
+          -->
+          <div
+            [class]="emptyClasses()"
+            [style.height.px]="listHeightPx()"
+            [attr.aria-invalid]="panel.side === 'target' && errorState() ? 'true' : null"
+          >{{ panel.emptyText }}</div>
         }
       </div>
     </ng-template>
@@ -984,7 +989,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-labelledby]': 'resolvedLabelledBy() || null',
                         '[attr.aria-describedby]': 'resolvedDescribedBy() || null',
                         '[attr.aria-disabled]': 'disabled() || null',
-                        '[attr.aria-invalid]': 'errorState() || null',
+                        // NOTE: no `aria-invalid` here. ARIA 1.2 does not allow it on `role="group"`
+                        // (axe: critical `aria-allowed-attr`). It is carried by the target panel's
+                        // content region instead — `value` is `targetKeys`, so that panel is the one
+                        // holding the value. `tags-input` and `file-upload` were corrected the same
+                        // way in an earlier pass; this component was missed.
                         '[attr.data-focused]': 'focused() || null',
                     },
                     template: `
@@ -1034,6 +1043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             [class]="listClasses()"
             [style.height.px]="listHeightPx()"
             [attr.aria-labelledby]="panel.titleId"
+            [attr.aria-invalid]="panel.side === 'target' && errorState() ? 'true' : null"
             (cdkListboxValueChange)="onCheckedChange(panel.side, $event)"
           >
             @for (row of panel.rows; track row.key) {
@@ -1067,7 +1077,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             }
           </div>
         } @else {
-          <div [class]="emptyClasses()" [style.height.px]="listHeightPx()">{{ panel.emptyText }}</div>
+          <!--
+            Also carries aria-invalid: an empty target is exactly when a required
+            transfer is invalid, and the listbox above does not exist to carry it
+            (an empty role=listbox would violate aria-required-children).
+          -->
+          <div
+            [class]="emptyClasses()"
+            [style.height.px]="listHeightPx()"
+            [attr.aria-invalid]="panel.side === 'target' && errorState() ? 'true' : null"
+          >{{ panel.emptyText }}</div>
         }
       </div>
     </ng-template>