@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-flip-card.mjs

@@ -0,0 +1,289 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, inject, DestroyRef, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { tv } from 'tailwind-variants';
+
+// ── tv() config ──
+const flipCardVariants = tv({
+    slots: {
+        root: 'relative block rounded-lg transition-shadow duration-normal motion-reduce:transition-none tw-flip-perspective',
+        inner: 'relative h-full w-full tw-flip-inner transition-transform duration-300 ease-in-out motion-reduce:transition-none',
+        face: 'absolute inset-0 h-full w-full rounded-lg overflow-hidden tw-flip-face',
+        front: '',
+        back: 'tw-flip-back-face',
+    },
+    variants: {
+        variant: {
+            outlined: {
+                face: 'bg-surface border border-border text-fg',
+            },
+            elevated: {
+                face: 'bg-surface-raised shadow text-fg',
+                root: 'hover:shadow-md',
+            },
+            ghost: {
+                face: 'bg-transparent text-fg',
+            },
+        },
+        direction: {
+            horizontal: {
+                inner: 'tw-flip-axis-y',
+                back: 'tw-flip-back-y',
+            },
+            vertical: {
+                inner: 'tw-flip-axis-x',
+                back: 'tw-flip-back-x',
+            },
+        },
+        flipped: {
+            true: { inner: 'tw-flip-rotated' },
+            false: {},
+        },
+        interactive: {
+            true: {
+                root: 'cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+            },
+            false: {},
+        },
+        disabled: {
+            true: { root: 'opacity-50 cursor-not-allowed' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        variant: 'outlined',
+        direction: 'horizontal',
+        flipped: false,
+        interactive: true,
+        disabled: false,
+    },
+}, { twMerge: true });
+/**
+ * Two-faced card with a CSS 3D-perspective flip animation.
+ *
+ * @remarks
+ * **Hard theme dependency.** The flip animation is driven by helper classes
+ * (`tw-flip-perspective`, `tw-flip-inner`, `tw-flip-face`, `tw-flip-back-face`,
+ * `tw-flip-axis-x`, `tw-flip-axis-y`, `tw-flip-rotated`, `tw-flip-back-x`,
+ * `tw-flip-back-y`) declared in `projects/ngx-tw/theme/_base.css` and re-exported
+ * via `ngx-tw/theme/default.css`. Consumers MUST import the theme stylesheet —
+ * without it the card renders as two stacked faces with no perspective and no
+ * rotation, and there is no run-time fallback. `prefers-reduced-motion: reduce`
+ * is handled in the theme CSS, not here.
+ */
+class FlipCardComponent {
+    /**
+     * Visual style of the card chrome. Mirrors `tw-card`'s variant vocabulary.
+     * Defaults to `'outlined'` (vs `tw-card`'s `'elevated'` default) so the flip
+     * animation reads more clearly without a baseline shadow underneath.
+     */
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Axis of rotation. `'horizontal'` rotates around the Y axis (left/right flip); `'vertical'` rotates around the X axis (top/bottom flip). Defaults to `'horizontal'`. */
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Which user action flips the card. `'both'` enables click and hover. `'manual'` disables all triggers and defers control to the `flipped` model. Defaults to `'both'`. */
+    trigger = input('both', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /** When true, all triggers and keyboard handling are disabled; the current face stays visible. Defaults to `false`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the back face is currently visible. Two-way bindable via `[(flipped)]`. Defaults to `false`. The `flippedChange` event fires on every toggle. */
+    flipped = model(false, ...(ngDevMode ? [{ debugName: "flipped" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the host element. Required when `trigger` is
+     * `'manual'` (the host renders as `role="region"`, which AXE requires to
+     * have an accessible name); a default of `'Flip card'` is used in that
+     * mode if no value is provided. In interactive modes the host's accessible
+     * name is normally derived from the visible face's content — set this
+     * input to override.
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    liveAnnouncer = inject(LiveAnnouncer);
+    destroyRef = inject(DestroyRef);
+    backWrapper = viewChild('backWrapper', ...(ngDevMode ? [{ debugName: "backWrapper" }] : /* istanbul ignore next */ []));
+    _hasBack = signal(false, ...(ngDevMode ? [{ debugName: "_hasBack" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasBack = this._hasBack.asReadonly();
+    /** @internal */
+    interactive = computed(() => this.trigger() !== 'manual' && !this.disabled() && this.hasBack(), ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hostRole = computed(() => this.trigger() === 'manual' ? 'region' : 'button', ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hostTabindex = computed(() => (this.interactive() ? 0 : null), ...(ngDevMode ? [{ debugName: "hostTabindex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    ariaPressed = computed(() => this.interactive() ? String(this.flipped()) : null, ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    ariaLive = computed(() => this.trigger() === 'manual' ? 'polite' : null, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    ariaDisabled = computed(() => this.disabled() ? 'true' : null, ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hostAriaLabel = computed(() => {
+        const explicit = this.ariaLabel();
+        if (explicit !== undefined && explicit !== '')
+            return explicit;
+        return this.trigger() === 'manual' ? 'Flip card' : null;
+    }, ...(ngDevMode ? [{ debugName: "hostAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    frontAriaHidden = computed(() => this.hasBack() && this.flipped() ? 'true' : null, ...(ngDevMode ? [{ debugName: "frontAriaHidden" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    backAriaHidden = computed(() => !this.hasBack() || !this.flipped() ? 'true' : null, ...(ngDevMode ? [{ debugName: "backAriaHidden" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    frontInert = computed(() => this.hasBack() && this.flipped() ? '' : null, ...(ngDevMode ? [{ debugName: "frontInert" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    backInert = computed(() => !this.hasBack() || !this.flipped() ? '' : null, ...(ngDevMode ? [{ debugName: "backInert" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => flipCardVariants({
+        variant: this.variant(),
+        direction: this.direction(),
+        flipped: this.flipped(),
+        interactive: this.interactive(),
+        disabled: this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => this.variantResult().inner(), ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    frontClasses = computed(() => `${this.variantResult().face()} ${this.variantResult().front()}`, ...(ngDevMode ? [{ debugName: "frontClasses" }] : /* istanbul ignore next */ []));
+    backClasses = computed(() => `${this.variantResult().face()} ${this.variantResult().back()}`, ...(ngDevMode ? [{ debugName: "backClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // `MutationObserver` (not `contentChild`) because the spec exercises
+        // *dynamic* projection toggled by an `@if` in the host template
+        // (see `DynamicBackHost` in flip-card.spec.ts). `contentChild` resolves
+        // the parent's own content children — it does NOT see elements projected
+        // *through* the host via `<ng-content select="[slot='back']" />`. The
+        // observer is single-target and listens only for `childList` on the back
+        // wrapper, so the cost is bounded and the disconnect runs on destroy.
+        afterNextRender(() => {
+            const el = this.backWrapper()?.nativeElement;
+            if (!el)
+                return;
+            const update = () => this._hasBack.set(el.childElementCount > 0);
+            update();
+            const observer = new MutationObserver(update);
+            observer.observe(el, { childList: true });
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+        let firstRun = true;
+        effect(() => {
+            const isFlipped = this.flipped();
+            if (firstRun) {
+                firstRun = false;
+                return;
+            }
+            // Announce in any mode that exposes a flippable back face. Manual mode
+            // historically owned this because it sets `aria-live='polite'` on the
+            // host; interactive modes (hover, click, both) still need an explicit
+            // `LiveAnnouncer.announce` so screen-reader users hear the transition
+            // when triggering the card via keyboard or pointer.
+            if (this.hasBack()) {
+                this.liveAnnouncer.announce(isFlipped ? 'Back face visible' : 'Front face visible');
+            }
+        });
+    }
+    /** @internal */
+    onClick() {
+        if (this.disabled() || !this.hasBack())
+            return;
+        const t = this.trigger();
+        if (t === 'manual')
+            return;
+        this.toggle();
+    }
+    /** @internal */
+    onKeydown(event) {
+        if (!this.interactive())
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    /** @internal */
+    onMouseEnter() {
+        if (this.disabled() || !this.hasBack())
+            return;
+        const t = this.trigger();
+        if (t !== 'hover' && t !== 'both')
+            return;
+        this.setFlipped(true);
+    }
+    /** @internal */
+    onMouseLeave() {
+        if (this.disabled() || !this.hasBack())
+            return;
+        const t = this.trigger();
+        if (t !== 'hover' && t !== 'both')
+            return;
+        this.setFlipped(false);
+    }
+    toggle() {
+        this.setFlipped(!this.flipped());
+    }
+    setFlipped(next) {
+        if (this.flipped() === next)
+            return;
+        this.flipped.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FlipCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: FlipCardComponent, isStandalone: true, selector: "tw-flip-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, flipped: { classPropertyName: "flipped", publicName: "flipped", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flipped: "flippedChange" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "rootClasses()", "attr.role": "hostRole()", "attr.tabindex": "hostTabindex()", "attr.aria-pressed": "ariaPressed()", "attr.aria-live": "ariaLive()", "attr.aria-disabled": "ariaDisabled()", "attr.aria-label": "hostAriaLabel()" } }, viewQueries: [{ propertyName: "backWrapper", first: true, predicate: ["backWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="innerClasses()">
+      <div
+        [class]="frontClasses()"
+        [attr.aria-hidden]="frontAriaHidden()"
+        [attr.inert]="frontInert()"
+      >
+        <ng-content select="[slot='front']" />
+      </div>
+      <div
+        #backWrapper
+        [class]="backClasses()"
+        [class.hidden]="!hasBack()"
+        [attr.aria-hidden]="backAriaHidden()"
+        [attr.inert]="backInert()"
+      >
+        <ng-content select="[slot='back']" />
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FlipCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-flip-card',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'rootClasses()',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.tabindex]': 'hostTabindex()',
+                        '[attr.aria-pressed]': 'ariaPressed()',
+                        '[attr.aria-live]': 'ariaLive()',
+                        '[attr.aria-disabled]': 'ariaDisabled()',
+                        '[attr.aria-label]': 'hostAriaLabel()',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                    template: `
+    <div [class]="innerClasses()">
+      <div
+        [class]="frontClasses()"
+        [attr.aria-hidden]="frontAriaHidden()"
+        [attr.inert]="frontInert()"
+      >
+        <ng-content select="[slot='front']" />
+      </div>
+      <div
+        #backWrapper
+        [class]="backClasses()"
+        [class.hidden]="!hasBack()"
+        [attr.aria-hidden]="backAriaHidden()"
+        [attr.inert]="backInert()"
+      >
+        <ng-content select="[slot='back']" />
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], flipped: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipped", required: false }] }, { type: i0.Output, args: ["flippedChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], backWrapper: [{ type: i0.ViewChild, args: ['backWrapper', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlipCardComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-flip-card.mjs.map

package/fesm2022/cdevhub-ngx-tw-flip-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-flip-card.mjs","sources":["../../../projects/ngx-tw/flip-card/flip-card.ts","../../../projects/ngx-tw/flip-card/cdevhub-ngx-tw-flip-card.ts"],"sourcesContent":["import {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  type ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { tv } from 'tailwind-variants';\n\n/** Visual style of the flip card chrome. Mirrors `tw-card`. */\nexport type FlipCardVariant = 'outlined' | 'elevated' | 'ghost';\n\n/** Axis of rotation for the flip animation. */\nexport type FlipCardDirection = 'horizontal' | 'vertical';\n\n/** Which user interaction flips the card. */\nexport type FlipCardTrigger = 'hover' | 'click' | 'manual' | 'both';\n\n// ── tv() config ──\n\nconst flipCardVariants = tv(\n  {\n    slots: {\n      root:\n        'relative block rounded-lg transition-shadow duration-normal motion-reduce:transition-none tw-flip-perspective',\n      inner:\n        'relative h-full w-full tw-flip-inner transition-transform duration-300 ease-in-out motion-reduce:transition-none',\n      face:\n        'absolute inset-0 h-full w-full rounded-lg overflow-hidden tw-flip-face',\n      front: '',\n      back: 'tw-flip-back-face',\n    },\n    variants: {\n      variant: {\n        outlined: {\n          face: 'bg-surface border border-border text-fg',\n        },\n        elevated: {\n          face: 'bg-surface-raised shadow text-fg',\n          root: 'hover:shadow-md',\n        },\n        ghost: {\n          face: 'bg-transparent text-fg',\n        },\n      },\n      direction: {\n        horizontal: {\n          inner: 'tw-flip-axis-y',\n          back: 'tw-flip-back-y',\n        },\n        vertical: {\n          inner: 'tw-flip-axis-x',\n          back: 'tw-flip-back-x',\n        },\n      },\n      flipped: {\n        true: { inner: 'tw-flip-rotated' },\n        false: {},\n      },\n      interactive: {\n        true: {\n          root:\n            'cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',\n        },\n        false: {},\n      },\n      disabled: {\n        true: { root: 'opacity-50 cursor-not-allowed' },\n        false: {},\n      },\n    },\n    defaultVariants: {\n      variant: 'outlined',\n      direction: 'horizontal',\n      flipped: false,\n      interactive: true,\n      disabled: false,\n    },\n  },\n  { twMerge: true },\n);\n\n/**\n * Two-faced card with a CSS 3D-perspective flip animation.\n *\n * @remarks\n * **Hard theme dependency.** The flip animation is driven by helper classes\n * (`tw-flip-perspective`, `tw-flip-inner`, `tw-flip-face`, `tw-flip-back-face`,\n * `tw-flip-axis-x`, `tw-flip-axis-y`, `tw-flip-rotated`, `tw-flip-back-x`,\n * `tw-flip-back-y`) declared in `projects/ngx-tw/theme/_base.css` and re-exported\n * via `ngx-tw/theme/default.css`. Consumers MUST import the theme stylesheet —\n * without it the card renders as two stacked faces with no perspective and no\n * rotation, and there is no run-time fallback. `prefers-reduced-motion: reduce`\n * is handled in the theme CSS, not here.\n */\n@Component({\n  selector: 'tw-flip-card',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'rootClasses()',\n    '[attr.role]': 'hostRole()',\n    '[attr.tabindex]': 'hostTabindex()',\n    '[attr.aria-pressed]': 'ariaPressed()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-disabled]': 'ariaDisabled()',\n    '[attr.aria-label]': 'hostAriaLabel()',\n    '(click)': 'onClick()',\n    '(keydown)': 'onKeydown($event)',\n    '(mouseenter)': 'onMouseEnter()',\n    '(mouseleave)': 'onMouseLeave()',\n  },\n  template: `\n    <div [class]=\"innerClasses()\">\n      <div\n        [class]=\"frontClasses()\"\n        [attr.aria-hidden]=\"frontAriaHidden()\"\n        [attr.inert]=\"frontInert()\"\n      >\n        <ng-content select=\"[slot='front']\" />\n      </div>\n      <div\n        #backWrapper\n        [class]=\"backClasses()\"\n        [class.hidden]=\"!hasBack()\"\n        [attr.aria-hidden]=\"backAriaHidden()\"\n        [attr.inert]=\"backInert()\"\n      >\n        <ng-content select=\"[slot='back']\" />\n      </div>\n    </div>\n  `,\n})\nexport class FlipCardComponent {\n  /**\n   * Visual style of the card chrome. Mirrors `tw-card`'s variant vocabulary.\n   * Defaults to `'outlined'` (vs `tw-card`'s `'elevated'` default) so the flip\n   * animation reads more clearly without a baseline shadow underneath.\n   */\n  readonly variant = input<FlipCardVariant>('outlined');\n\n  /** Axis of rotation. `'horizontal'` rotates around the Y axis (left/right flip); `'vertical'` rotates around the X axis (top/bottom flip). Defaults to `'horizontal'`. */\n  readonly direction = input<FlipCardDirection>('horizontal');\n\n  /** Which user action flips the card. `'both'` enables click and hover. `'manual'` disables all triggers and defers control to the `flipped` model. Defaults to `'both'`. */\n  readonly trigger = input<FlipCardTrigger>('both');\n\n  /** When true, all triggers and keyboard handling are disabled; the current face stays visible. Defaults to `false`. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  /** Whether the back face is currently visible. Two-way bindable via `[(flipped)]`. Defaults to `false`. The `flippedChange` event fires on every toggle. */\n  readonly flipped = model(false);\n\n  /**\n   * Accessible name for the host element. Required when `trigger` is\n   * `'manual'` (the host renders as `role=\"region\"`, which AXE requires to\n   * have an accessible name); a default of `'Flip card'` is used in that\n   * mode if no value is provided. In interactive modes the host's accessible\n   * name is normally derived from the visible face's content — set this\n   * input to override.\n   */\n  readonly ariaLabel = input<string | undefined>(undefined);\n\n  private readonly liveAnnouncer = inject(LiveAnnouncer);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly backWrapper = viewChild<ElementRef<HTMLElement>>('backWrapper');\n\n  private readonly _hasBack = signal(false);\n  /** @internal */\n  readonly hasBack = this._hasBack.asReadonly();\n\n  /** @internal */\n  readonly interactive = computed(\n    () => this.trigger() !== 'manual' && !this.disabled() && this.hasBack(),\n  );\n\n  /** @internal */\n  readonly hostRole = computed(() =>\n    this.trigger() === 'manual' ? 'region' : 'button',\n  );\n\n  /** @internal */\n  readonly hostTabindex = computed(() => (this.interactive() ? 0 : null));\n\n  /** @internal */\n  readonly ariaPressed = computed(() =>\n    this.interactive() ? String(this.flipped()) : null,\n  );\n\n  /** @internal */\n  readonly ariaLive = computed(() =>\n    this.trigger() === 'manual' ? 'polite' : null,\n  );\n\n  /** @internal */\n  readonly ariaDisabled = computed(() =>\n    this.disabled() ? 'true' : null,\n  );\n\n  /** @internal */\n  readonly hostAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit !== undefined && explicit !== '') return explicit;\n    return this.trigger() === 'manual' ? 'Flip card' : null;\n  });\n\n  /** @internal */\n  readonly frontAriaHidden = computed(() =>\n    this.hasBack() && this.flipped() ? 'true' : null,\n  );\n\n  /** @internal */\n  readonly backAriaHidden = computed(() =>\n    !this.hasBack() || !this.flipped() ? 'true' : null,\n  );\n\n  /** @internal */\n  readonly frontInert = computed(() =>\n    this.hasBack() && this.flipped() ? '' : null,\n  );\n\n  /** @internal */\n  readonly backInert = computed(() =>\n    !this.hasBack() || !this.flipped() ? '' : null,\n  );\n\n  private readonly variantResult = computed(() =>\n    flipCardVariants({\n      variant: this.variant(),\n      direction: this.direction(),\n      flipped: this.flipped(),\n      interactive: this.interactive(),\n      disabled: this.disabled(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly innerClasses = computed(() => this.variantResult().inner());\n  readonly frontClasses = computed(\n    () => `${this.variantResult().face()} ${this.variantResult().front()}`,\n  );\n  readonly backClasses = computed(\n    () => `${this.variantResult().face()} ${this.variantResult().back()}`,\n  );\n\n  constructor() {\n    // `MutationObserver` (not `contentChild`) because the spec exercises\n    // *dynamic* projection toggled by an `@if` in the host template\n    // (see `DynamicBackHost` in flip-card.spec.ts). `contentChild` resolves\n    // the parent's own content children — it does NOT see elements projected\n    // *through* the host via `<ng-content select=\"[slot='back']\" />`. The\n    // observer is single-target and listens only for `childList` on the back\n    // wrapper, so the cost is bounded and the disconnect runs on destroy.\n    afterNextRender(() => {\n      const el = this.backWrapper()?.nativeElement;\n      if (!el) return;\n      const update = () => this._hasBack.set(el.childElementCount > 0);\n      update();\n      const observer = new MutationObserver(update);\n      observer.observe(el, { childList: true });\n      this.destroyRef.onDestroy(() => observer.disconnect());\n    });\n\n    let firstRun = true;\n    effect(() => {\n      const isFlipped = this.flipped();\n      if (firstRun) {\n        firstRun = false;\n        return;\n      }\n      // Announce in any mode that exposes a flippable back face. Manual mode\n      // historically owned this because it sets `aria-live='polite'` on the\n      // host; interactive modes (hover, click, both) still need an explicit\n      // `LiveAnnouncer.announce` so screen-reader users hear the transition\n      // when triggering the card via keyboard or pointer.\n      if (this.hasBack()) {\n        this.liveAnnouncer.announce(\n          isFlipped ? 'Back face visible' : 'Front face visible',\n        );\n      }\n    });\n  }\n\n  /** @internal */\n  onClick(): void {\n    if (this.disabled() || !this.hasBack()) return;\n    const t = this.trigger();\n    if (t === 'manual') return;\n    this.toggle();\n  }\n\n  /** @internal */\n  onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /** @internal */\n  onMouseEnter(): void {\n    if (this.disabled() || !this.hasBack()) return;\n    const t = this.trigger();\n    if (t !== 'hover' && t !== 'both') return;\n    this.setFlipped(true);\n  }\n\n  /** @internal */\n  onMouseLeave(): void {\n    if (this.disabled() || !this.hasBack()) return;\n    const t = this.trigger();\n    if (t !== 'hover' && t !== 'both') return;\n    this.setFlipped(false);\n  }\n\n  private toggle(): void {\n    this.setFlipped(!this.flipped());\n  }\n\n  private setFlipped(next: boolean): void {\n    if (this.flipped() === next) return;\n    this.flipped.set(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}