@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-sort.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-sort.mjs","sources":["../../../projects/ngx-tw/sort/sort.ts","../../../projects/ngx-tw/sort/sort-header.ts","../../../projects/ngx-tw/sort/sort-header.html","../../../projects/ngx-tw/sort/cdevhub-ngx-tw-sort.ts"],"sourcesContent":["import {\n  Directive,\n  input,\n  isDevMode,\n  model,\n  output,\n} from '@angular/core';\nimport { TW_SORT_HANDLE } from '@cdevhub/ngx-tw/core';\n\n/** Sort direction. `null` represents the cleared (unsorted) state. */\nexport type SortDirection = 'asc' | 'desc' | null;\n\n/** Shape that `SortHeaderComponent` implements when registering with a parent `SortDirective`. */\nexport interface TwSortable {\n  /** Unique id identifying the column or field this header sorts. */\n  readonly id: string;\n  /** Header-level starting direction. `undefined` falls back to the parent directive's `start`. */\n  readonly start: 'asc' | 'desc' | undefined;\n  /** Header-level override for disabling the cleared state in the cycle. `undefined` falls back to the parent directive's `disableClear`. */\n  readonly disableClear: boolean | undefined;\n  /** Whether this header is disabled. */\n  readonly disabled: boolean;\n}\n\n/** Payload emitted by `SortDirective.sortChange` whenever a user interaction changes the sort state. */\nexport interface TwSortEvent {\n  /** The new active header id, or `null` when the sort was cleared. */\n  active: string | null;\n  /** The new sort direction. */\n  direction: SortDirection;\n  /** Snapshot of the previous state, before this change. */\n  previous: {\n    /** Previous active header id. */\n    active: string | null;\n    /** Previous sort direction. */\n    direction: SortDirection;\n  };\n}\n\n/**\n * Returns the direction cycle for a given starting direction and disable-clear flag.\n * @internal Exported for unit tests; not part of the public API.\n */\nexport function getSortDirectionCycle(\n  start: 'asc' | 'desc',\n  disableClear: boolean,\n): SortDirection[] {\n  const cycle: SortDirection[] = start === 'desc' ? ['desc', 'asc'] : ['asc', 'desc'];\n  if (!disableClear) cycle.push(null);\n  return cycle;\n}\n\n/**\n * Container directive that holds the current sort state (`active` id + `direction`) and\n * coordinates with child `SortHeaderComponent` instances. Compose with any rendering layer —\n * tables, lists, custom grids — by placing child headers inside an element marked `[twSort]`.\n *\n * @remarks\n * **`tw*` input/output aliases.** Every `input()` / `output()` / `model()` on this directive\n * carries a `tw*` alias (e.g. `'twSortActive'`, `'twSortDirection'`, `'twSortChange'`). The\n * aliases namespace bindings under the directive selector so they cannot collide with\n * attributes the host element already owns (a `<table>` consumer binding `[active]` would\n * otherwise be ambiguous). This mirrors Angular Material's `mat*` aliasing precedent on\n * `MatSort`. Compodoc surfaces both the field name and the alias; consumer templates MUST\n * bind via the aliased name (`[twSortActive]`, `(twSortChange)`, …). Removing an alias is a\n * breaking API change requiring a major version bump.\n */\n@Directive({\n  selector: '[twSort]',\n  exportAs: 'twSort',\n  host: {\n    'class': 'tw-sort',\n  },\n  providers: [{ provide: TW_SORT_HANDLE, useExisting: SortDirective }],\n})\nexport class SortDirective {\n  /** The id of the currently sorted header, or `null` when nothing is sorted. Two-way bindable via `[(twSortActive)]`. Defaults to `null`. */\n  readonly active = model<string | null>(null, { alias: 'twSortActive' });\n\n  /** Current sort direction. `null` represents the cleared state. Two-way bindable via `[(twSortDirection)]`. Defaults to `null`. */\n  readonly direction = model<SortDirection>(null, { alias: 'twSortDirection' });\n\n  /** Starting direction used when a header becomes active for the first time. Per-header `start` overrides this. Defaults to `'asc'`. */\n  readonly start = input<'asc' | 'desc'>('asc', { alias: 'twSortStart' });\n\n  /** When true, the direction cycle skips the cleared (`null`) state — headers toggle between `'asc'` and `'desc'` only. Per-header `disableClear` overrides this. Defaults to `false`. */\n  readonly disableClear = input<boolean>(false, { alias: 'twSortDisableClear' });\n\n  /** When true, all child sort headers are disabled. Defaults to `false`. */\n  readonly disabled = input<boolean>(false, { alias: 'twSortDisabled' });\n\n  /** Fires whenever the user changes `active` or `direction` by interacting with a header. Programmatic writes to `[(twSortActive)]` / `[(twSortDirection)]` do NOT emit. */\n  readonly sortChange = output<TwSortEvent>({ alias: 'twSortChange' });\n\n  private readonly sortableIds = new Set<string>();\n\n  /** Registers a header id so duplicates can be detected. Called by `SortHeaderComponent` on init. Throws in dev mode if another header with the same id is already registered. */\n  register(id: string): void {\n    if (isDevMode()) {\n      if (!id) {\n        throw new Error('tw-sort-header must be provided with a unique id.');\n      }\n      if (this.sortableIds.has(id)) {\n        throw new Error(\n          `Cannot have two tw-sort-header elements with the same id (${id}).`,\n        );\n      }\n    }\n    this.sortableIds.add(id);\n  }\n\n  /** Deregisters a header id. Called on destroy. */\n  deregister(id: string): void {\n    this.sortableIds.delete(id);\n  }\n\n  /** Cycles the direction for the given header and emits `sortChange`. No-op when the directive or the header is disabled. */\n  sort(sortable: TwSortable): void {\n    if (this.disabled() || sortable.disabled) return;\n\n    const previousActive = this.active();\n    const previousDirection = this.direction();\n\n    let nextActive: string | null;\n    let nextDirection: SortDirection;\n\n    if (previousActive !== sortable.id) {\n      nextActive = sortable.id;\n      nextDirection = sortable.start ?? this.start();\n    } else {\n      nextDirection = this.getNextSortDirection(sortable);\n      nextActive = nextDirection === null ? null : sortable.id;\n    }\n\n    this.active.set(nextActive);\n    this.direction.set(nextDirection);\n\n    this.sortChange.emit({\n      active: nextActive,\n      direction: nextDirection,\n      previous: {\n        active: previousActive,\n        direction: previousDirection,\n      },\n    });\n  }\n\n  /** Returns the next direction in the cycle for the given header, based on the current state and header/parent overrides. */\n  getNextSortDirection(sortable: TwSortable): SortDirection {\n    const start = sortable.start ?? this.start();\n    const disableClear = sortable.disableClear ?? this.disableClear();\n    const cycle = getSortDirectionCycle(start, disableClear);\n\n    // If the header is not currently active, the next direction is the starting one.\n    if (this.active() !== sortable.id) {\n      return start;\n    }\n\n    const currentIndex = cycle.indexOf(this.direction());\n    if (currentIndex < 0) {\n      return start;\n    }\n    return cycle[(currentIndex + 1) % cycle.length] as SortDirection;\n  }\n}\n","import {\n  type AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  type ElementRef,\n  inject,\n  input,\n  isDevMode,\n  type OnDestroy,\n  type OnInit,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor, TwSize } from '@cdevhub/ngx-tw/core';\nimport { SortDirective, type SortDirection, type TwSortable } from './sort';\n\nfunction snapshot(self: SortHeaderComponent): TwSortable {\n  return {\n    id: self.id(),\n    start: self.start(),\n    disableClear: self.disableClear(),\n    disabled: self.isDisabled(),\n  };\n}\n\n/** Position of the sort arrow relative to the header label. */\nexport type TwSortArrowPosition = 'before' | 'after';\n\n// ── Static per-color maps (Tailwind v4 requires literal class strings for its JIT scanner). ──\n\nconst ARROW_ACTIVE_COLOR: Record<TwColor, string> = {\n  primary: 'text-primary-600',\n  secondary: 'text-secondary-600',\n  accent: 'text-accent-600',\n  neutral: 'text-fg',\n  info: 'text-info-600',\n  success: 'text-success-600',\n  warning: 'text-warning-600',\n  error: 'text-error-600',\n};\n\n// ── tv() config ──\n\nconst sortHeaderVariants = tv(\n  {\n    slots: {\n      host: 'group select-none',\n      container:\n        'inline-flex items-center gap-1.5 cursor-pointer rounded-md font-medium text-fg transition-colors duration-normal motion-reduce:transition-none hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',\n      label: 'min-w-0',\n      arrow:\n        'inline-flex shrink-0 items-center justify-center transition-opacity duration-normal motion-reduce:transition-none',\n      arrowIcon:\n        'shrink-0 transition-transform duration-normal motion-reduce:transition-none',\n    },\n    variants: {\n      size: {\n        xs: {\n          container: 'px-2 py-1 text-xs',\n          // `size-3.5` half-step: only icon size aligning with text-xs without\n          // dominating it; codified per CLAUDE.md.\n          arrowIcon: 'size-3.5',\n        },\n        sm: {\n          container: 'px-2.5 py-1.5 text-sm',\n          arrowIcon: 'size-4',\n        },\n        md: {\n          container: 'px-3 py-2 text-sm',\n          arrowIcon: 'size-4',\n        },\n        lg: {\n          container: 'px-4 py-2.5 text-base',\n          arrowIcon: 'size-5',\n        },\n        xl: {\n          container: 'px-5 py-3 text-base',\n          arrowIcon: 'size-5',\n        },\n      },\n      active: {\n        true: {\n          container: 'text-fg',\n          arrow: 'opacity-100',\n        },\n        false: {\n          container: 'text-fg-muted',\n          arrow:\n            'opacity-0 group-hover:opacity-50 group-focus-within:opacity-50',\n        },\n      },\n      direction: {\n        asc: { arrowIcon: 'rotate-180' },\n        desc: { arrowIcon: 'rotate-0' },\n        none: { arrowIcon: 'rotate-0' },\n      },\n      disabled: {\n        true: {\n          host: 'opacity-50 pointer-events-none',\n          container: 'cursor-not-allowed',\n        },\n        false: {},\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      active: false,\n      direction: 'none',\n      disabled: false,\n    },\n  },\n  { twMerge: true },\n);\n\n/**\n * Turns any element (e.g., `<th>`, `<div>`, `<button>`) into a sortable header under a parent\n * `SortDirective`. Renders the projected label plus an arrow that reflects the current direction.\n * Triggers a sort cycle on click or Enter/Space.\n */\n@Component({\n  selector: '[tw-sort-header]',\n  exportAs: 'twSortHeader',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet],\n  templateUrl: './sort-header.html',\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.aria-sort]': 'ariaSort()',\n    '[attr.aria-disabled]': 'isDisabled() ? \"true\" : null',\n    '(click)': 'handleClick()',\n    '(keydown)': 'handleKeydown($event)',\n  },\n})\nexport class SortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {\n  /** Unique id for this header. Required — identifies the field/column this header sorts. */\n  readonly id = input.required<string>();\n\n  /** Overrides the parent directive's `start` for this header only. `undefined` inherits from the parent. */\n  readonly start = input<'asc' | 'desc' | undefined>(undefined);\n\n  /** Overrides the parent directive's `disableClear` for this header only. `undefined` inherits from the parent. */\n  readonly disableClear = input<boolean | undefined>(undefined);\n\n  /** When true, this header is disabled — clicks and keyboard activation are ignored. Defaults to `false`. */\n  readonly headerDisabled = input<boolean>(false, { alias: 'disabled' });\n\n  /** Whether the sort arrow renders `'before'` or `'after'` the projected label. Defaults to `'after'`. */\n  readonly arrowPosition = input<TwSortArrowPosition>('after');\n\n  /** Semantic color used to tint the arrow when this header is active. Defaults to `'primary'`. */\n  readonly color = input<TwColor>('primary');\n\n  /** Controls padding and font size. Uses the shared `TwSize` scale. Defaults to `'md'`. */\n  readonly size = input<TwSize>('md');\n\n  /** Accessible description applied via `AriaDescriber` so screen readers announce the sort action alongside the header text. Defaults to `'Sort'`. */\n  readonly sortActionDescription = input<string>('Sort');\n\n  private readonly parent = inject(SortDirective, { optional: true });\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly ariaDescriber = inject(AriaDescriber, { optional: true });\n\n  private readonly containerRef =\n    viewChild<ElementRef<HTMLElement>>('container');\n\n  private _describedBy: string | null = null;\n\n  constructor() {\n    if (!this.parent && isDevMode()) {\n      throw new Error(\n        'tw-sort-header must be placed within a parent element with the twSort directive.',\n      );\n    }\n\n    // Reactive: re-tags the host whenever `sortActionDescription` (a public\n    // signal input) changes; consumers may swap the description at runtime for\n    // i18n / state-driven copy. Cleanup runs in `ngOnDestroy`. Not a one-shot\n    // `afterNextRender`: that would freeze the description at first render and\n    // silently ignore subsequent rebinds.\n    effect(() => {\n      const description = this.sortActionDescription();\n      const el = this.containerRef()?.nativeElement;\n      if (!el || !this.ariaDescriber) return;\n      if (this._describedBy) {\n        this.ariaDescriber.removeDescription(el, this._describedBy);\n      }\n      this.ariaDescriber.describe(el, description);\n      this._describedBy = description;\n    });\n  }\n\n  // ── Derived signals ──\n\n  /** Whether this header is currently the active (sorted) header. */\n  readonly isActive = computed(\n    () => this.parent?.active() === this.id(),\n  );\n\n  /** Whether this header is disabled via its own input or the parent directive's `disabled`. */\n  readonly isDisabled = computed(\n    () => this.headerDisabled() || (this.parent?.disabled() ?? false),\n  );\n\n  /** Active direction for *this* header (null when not active). */\n  readonly effectiveDirection = computed<SortDirection>(() =>\n    this.isActive() ? (this.parent?.direction() ?? null) : null,\n  );\n\n  /** `aria-sort` value: `'ascending' | 'descending' | 'none'`. */\n  readonly ariaSort = computed(() => {\n    const d = this.effectiveDirection();\n    if (d === 'asc') return 'ascending';\n    if (d === 'desc') return 'descending';\n    return 'none';\n  });\n\n  /** Whether the arrow element should render. Active headers always render; inactive render when not disabled so hover reveals the affordance. */\n  readonly renderArrow = computed(() => this.isActive() || !this.isDisabled());\n\n  // ── Variant class computation ──\n\n  private readonly variantResult = computed(() =>\n    sortHeaderVariants({\n      size: this.size(),\n      active: this.isActive(),\n      direction: this.effectiveDirection() ?? 'none',\n      disabled: this.isDisabled(),\n    }),\n  );\n\n  /** @internal */\n  readonly hostClasses = computed(() => this.variantResult().host());\n\n  /** @internal */\n  readonly containerClasses = computed(() => this.variantResult().container());\n\n  /** @internal */\n  readonly labelClasses = computed(() => this.variantResult().label());\n\n  /** @internal */\n  readonly arrowClasses = computed(() => {\n    const base = this.variantResult().arrow();\n    if (!this.isActive()) return base;\n    return `${base} ${ARROW_ACTIVE_COLOR[this.color()]}`;\n  });\n\n  /** @internal */\n  readonly arrowIconClasses = computed(() => this.variantResult().arrowIcon());\n\n  // ── Lifecycle ──\n\n  ngOnInit(): void {\n    this.parent?.register(this.id());\n  }\n\n  ngAfterViewInit(): void {\n    const el = this.containerRef()?.nativeElement;\n    if (el) {\n      this.focusMonitor.monitor(el, true);\n    }\n  }\n\n  ngOnDestroy(): void {\n    const el = this.containerRef()?.nativeElement;\n    if (el) {\n      this.focusMonitor.stopMonitoring(el);\n      if (this._describedBy && this.ariaDescriber) {\n        this.ariaDescriber.removeDescription(el, this._describedBy);\n      }\n    }\n    this.parent?.deregister(this.id());\n  }\n\n  // ── Event handlers ──\n\n  /** @internal */\n  handleClick(): void {\n    if (this.isDisabled()) return;\n    this.parent?.sort(snapshot(this));\n  }\n\n  /** @internal */\n  handleKeydown(event: KeyboardEvent): void {\n    if (this.isDisabled()) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.parent?.sort(snapshot(this));\n    }\n  }\n}\n","<div\n  #container\n  [class]=\"containerClasses()\"\n  [attr.role]=\"isDisabled() ? null : 'button'\"\n  [attr.tabindex]=\"isDisabled() ? null : 0\"\n>\n  @if (arrowPosition() === 'before' && renderArrow()) {\n    <ng-container *ngTemplateOutlet=\"arrow\" />\n  }\n  <span [class]=\"labelClasses()\"><ng-content /></span>\n  @if (arrowPosition() === 'after' && renderArrow()) {\n    <ng-container *ngTemplateOutlet=\"arrow\" />\n  }\n</div>\n\n<ng-template #arrow>\n  <span [class]=\"arrowClasses()\" data-tw-sort-arrow>\n    <ng-content select=\"[twSortHeaderIcon]\">\n      <svg\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        [class]=\"arrowIconClasses()\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </ng-content>\n  </span>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,186 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { tv } from 'tailwind-variants';
+
+const spinnerVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center justify-center shrink-0 align-middle',
+        svg: 'size-full animate-spin motion-reduce:animate-none',
+        track: '',
+        stroke: '',
+        dots: 'inline-flex items-center justify-center gap-1 size-full',
+        bars: 'inline-flex items-end justify-center gap-1 size-full',
+        bar: 'tw-spinner-bar',
+        dot: 'tw-spinner-dot',
+        srLabel: 'sr-only',
+    },
+    variants: {
+        color: {
+            current: {},
+            primary: { root: 'text-primary-500' },
+            secondary: { root: 'text-secondary-500' },
+            accent: { root: 'text-accent-500' },
+            neutral: { root: 'text-fg-muted' },
+            info: { root: 'text-info-500' },
+            success: { root: 'text-success-500' },
+            warning: { root: 'text-warning-500' },
+            error: { root: 'text-error-500' },
+        },
+        size: {
+            xs: { root: 'size-3' },
+            sm: { root: 'size-4' },
+            md: { root: 'size-5' },
+            lg: { root: 'size-6' },
+            xl: { root: 'size-8' },
+            inherit: { root: 'size-[1em]' },
+        },
+    },
+    defaultVariants: {
+        color: 'current',
+        size: 'md',
+    },
+}, {
+    twMerge: true,
+});
+/**
+ * Indeterminate loading indicator.
+ *
+ * Designed to compose inside other ngx-tw components:
+ * - Inside `<button twButton [loading]="true">` — inherits the button's text color via `color="current"`.
+ * - Inside `<tw-form-field>` as `twSuffix` — indicates async validation / pending load.
+ * - Inline with text using `size="inherit"` — scales with the surrounding font.
+ * - Centered inside cards or overlay wrappers for region-level loading states.
+ *
+ * @example
+ * ```html
+ * <tw-spinner />
+ * <tw-spinner color="success" size="lg" />
+ * <tw-spinner twSuffix size="sm" label="Validating email" />
+ * ```
+ */
+class SpinnerComponent {
+    /** Controls the visual style of the spinner. Defaults to `'circular'`. */
+    variant = input('circular', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic color. `'current'` inherits the surrounding text color — required for composition inside buttons and form-field prefix/suffix slots. Defaults to `'current'`. */
+    color = input('current', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Sets the spinner dimensions. `'inherit'` sizes the spinner to `1em` so it matches the surrounding font size (useful for inline text indicators). Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, renders a subtle ring behind the rotating stroke. Without the track ring the spinner reads as a partial arc, not a loading indicator. Only applies to the `'circular'` variant. Defaults to `true`. */
+    track = input(true, ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    /** Accessible label announced by assistive technology. Rendered in a visually hidden span. Defaults to `'Loading'`. */
+    label = input('Loading', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => spinnerVariants({ color: this.color(), size: this.size() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    svgClasses = computed(() => this.variantResult().svg(), ...(ngDevMode ? [{ debugName: "svgClasses" }] : /* istanbul ignore next */ []));
+    dotsClasses = computed(() => this.variantResult().dots(), ...(ngDevMode ? [{ debugName: "dotsClasses" }] : /* istanbul ignore next */ []));
+    dotClasses = computed(() => this.variantResult().dot(), ...(ngDevMode ? [{ debugName: "dotClasses" }] : /* istanbul ignore next */ []));
+    barsClasses = computed(() => this.variantResult().bars(), ...(ngDevMode ? [{ debugName: "barsClasses" }] : /* istanbul ignore next */ []));
+    barClasses = computed(() => this.variantResult().bar(), ...(ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []));
+    srLabelClasses = computed(() => this.variantResult().srLabel(), ...(ngDevMode ? [{ debugName: "srLabelClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SpinnerComponent, isStandalone: true, selector: "tw-spinner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "rootClasses()" } }, ngImport: i0, template: `
+    @switch (variant()) {
+      @case ('circular') {
+        <svg [class]="svgClasses()" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          @if (track()) {
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="3"
+              opacity="0.2"
+            />
+          }
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray="60"
+            stroke-dashoffset="40"
+          />
+        </svg>
+      }
+      @case ('dots') {
+        <span [class]="dotsClasses()" aria-hidden="true">
+          <span [class]="dotClasses()" style="animation-delay: -0.3s"></span>
+          <span [class]="dotClasses()" style="animation-delay: -0.15s"></span>
+          <span [class]="dotClasses()"></span>
+        </span>
+      }
+      @case ('bars') {
+        <span [class]="barsClasses()" aria-hidden="true">
+          <span [class]="barClasses()" style="animation-delay: -0.4s"></span>
+          <span [class]="barClasses()" style="animation-delay: -0.2s"></span>
+          <span [class]="barClasses()"></span>
+        </span>
+      }
+    }
+    <span [class]="srLabelClasses()">{{ label() }}</span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-spinner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'status',
+                        'aria-live': 'polite',
+                        '[class]': 'rootClasses()',
+                    },
+                    template: `
+    @switch (variant()) {
+      @case ('circular') {
+        <svg [class]="svgClasses()" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          @if (track()) {
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="3"
+              opacity="0.2"
+            />
+          }
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray="60"
+            stroke-dashoffset="40"
+          />
+        </svg>
+      }
+      @case ('dots') {
+        <span [class]="dotsClasses()" aria-hidden="true">
+          <span [class]="dotClasses()" style="animation-delay: -0.3s"></span>
+          <span [class]="dotClasses()" style="animation-delay: -0.15s"></span>
+          <span [class]="dotClasses()"></span>
+        </span>
+      }
+      @case ('bars') {
+        <span [class]="barsClasses()" aria-hidden="true">
+          <span [class]="barClasses()" style="animation-delay: -0.4s"></span>
+          <span [class]="barClasses()" style="animation-delay: -0.2s"></span>
+          <span [class]="barClasses()"></span>
+        </span>
+      }
+    }
+    <span [class]="srLabelClasses()">{{ label() }}</span>
+  `,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpinnerComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-spinner.mjs.map

package/fesm2022/cdevhub-ngx-tw-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-spinner.mjs","sources":["../../../projects/ngx-tw/spinner/spinner.ts","../../../projects/ngx-tw/spinner/cdevhub-ngx-tw-spinner.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor, TwSize } from '@cdevhub/ngx-tw/core';\n\n/** Visual style of the spinner. */\nexport type SpinnerVariant = 'circular' | 'dots' | 'bars';\n\n/** Semantic color for the spinner. `'current'` inherits from parent `currentColor`. */\nexport type SpinnerColor = TwColor | 'current';\n\n/** Size of the spinner. `'inherit'` sizes the spinner to `1em` so it scales with the surrounding font. */\nexport type SpinnerSize = TwSize | 'inherit';\n\nconst spinnerVariants = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 align-middle',\n    svg: 'size-full animate-spin motion-reduce:animate-none',\n    track: '',\n    stroke: '',\n    dots: 'inline-flex items-center justify-center gap-1 size-full',\n    bars: 'inline-flex items-end justify-center gap-1 size-full',\n    bar: 'tw-spinner-bar',\n    dot: 'tw-spinner-dot',\n    srLabel: 'sr-only',\n  },\n  variants: {\n    color: {\n      current: {},\n      primary: { root: 'text-primary-500' },\n      secondary: { root: 'text-secondary-500' },\n      accent: { root: 'text-accent-500' },\n      neutral: { root: 'text-fg-muted' },\n      info: { root: 'text-info-500' },\n      success: { root: 'text-success-500' },\n      warning: { root: 'text-warning-500' },\n      error: { root: 'text-error-500' },\n    },\n    size: {\n      xs: { root: 'size-3' },\n      sm: { root: 'size-4' },\n      md: { root: 'size-5' },\n      lg: { root: 'size-6' },\n      xl: { root: 'size-8' },\n      inherit: { root: 'size-[1em]' },\n    },\n  },\n  defaultVariants: {\n    color: 'current',\n    size: 'md',\n  },\n}, {\n  twMerge: true,\n});\n\n/**\n * Indeterminate loading indicator.\n *\n * Designed to compose inside other ngx-tw components:\n * - Inside `<button twButton [loading]=\"true\">` — inherits the button's text color via `color=\"current\"`.\n * - Inside `<tw-form-field>` as `twSuffix` — indicates async validation / pending load.\n * - Inline with text using `size=\"inherit\"` — scales with the surrounding font.\n * - Centered inside cards or overlay wrappers for region-level loading states.\n *\n * @example\n * ```html\n * <tw-spinner />\n * <tw-spinner color=\"success\" size=\"lg\" />\n * <tw-spinner twSuffix size=\"sm\" label=\"Validating email\" />\n * ```\n */\n@Component({\n  selector: 'tw-spinner',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'role': 'status',\n    'aria-live': 'polite',\n    '[class]': 'rootClasses()',\n  },\n  template: `\n    @switch (variant()) {\n      @case ('circular') {\n        <svg [class]=\"svgClasses()\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          @if (track()) {\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              opacity=\"0.2\"\n            />\n          }\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"60\"\n            stroke-dashoffset=\"40\"\n          />\n        </svg>\n      }\n      @case ('dots') {\n        <span [class]=\"dotsClasses()\" aria-hidden=\"true\">\n          <span [class]=\"dotClasses()\" style=\"animation-delay: -0.3s\"></span>\n          <span [class]=\"dotClasses()\" style=\"animation-delay: -0.15s\"></span>\n          <span [class]=\"dotClasses()\"></span>\n        </span>\n      }\n      @case ('bars') {\n        <span [class]=\"barsClasses()\" aria-hidden=\"true\">\n          <span [class]=\"barClasses()\" style=\"animation-delay: -0.4s\"></span>\n          <span [class]=\"barClasses()\" style=\"animation-delay: -0.2s\"></span>\n          <span [class]=\"barClasses()\"></span>\n        </span>\n      }\n    }\n    <span [class]=\"srLabelClasses()\">{{ label() }}</span>\n  `,\n})\nexport class SpinnerComponent {\n  /** Controls the visual style of the spinner. Defaults to `'circular'`. */\n  readonly variant = input<SpinnerVariant>('circular');\n\n  /** Semantic color. `'current'` inherits the surrounding text color — required for composition inside buttons and form-field prefix/suffix slots. Defaults to `'current'`. */\n  readonly color = input<SpinnerColor>('current');\n\n  /** Sets the spinner dimensions. `'inherit'` sizes the spinner to `1em` so it matches the surrounding font size (useful for inline text indicators). Defaults to `'md'`. */\n  readonly size = input<SpinnerSize>('md');\n\n  /** When true, renders a subtle ring behind the rotating stroke. Without the track ring the spinner reads as a partial arc, not a loading indicator. Only applies to the `'circular'` variant. Defaults to `true`. */\n  readonly track = input(true);\n\n  /** Accessible label announced by assistive technology. Rendered in a visually hidden span. Defaults to `'Loading'`. */\n  readonly label = input('Loading');\n\n  private readonly variantResult = computed(() =>\n    spinnerVariants({ color: this.color(), size: this.size() }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly svgClasses = computed(() => this.variantResult().svg());\n  readonly dotsClasses = computed(() => this.variantResult().dots());\n  readonly dotClasses = computed(() => this.variantResult().dot());\n  readonly barsClasses = computed(() => this.variantResult().bars());\n  readonly barClasses = computed(() => this.variantResult().bar());\n  readonly srLabelClasses = computed(() => this.variantResult().srLabel());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}