ProWatermark

<ax-pro-watermark> is a small, unobtrusive PRO badge shown only when the app has no valid Pro license; it renders nothing when licensed. Every Pro component drops this in, so the whole tier self-gates with a one-liner. The component has no inputs or outputs — license state comes from AxProLicenseService / provideAxProLicense().

Import

import {
  AxProWatermarkComponent,
  AxProLicenseService,
  provideAxProLicense,
  isValidProKey,
  type AxProLicenseConfig,
} from '@axisui-ng/pro';

Usage

<!-- inside a Pro component's template (host should be position: relative) -->
<div class="relative">
  …
  <ax-pro-watermark />
</div>

Provide a license at the app root to clear all watermarks:

import { provideAxProLicense } from '@axisui-ng/pro';

bootstrapApplication(AppComponent, {
  providers: [
    provideAxProLicense({ key: 'UILIB-XXXX-XXXX' }),
  ],
});

AxProLicenseConfig is { key: string | null; upsellUrl?: string }. A valid key matches /^UILIB-[A-Z0-9]{4,}$/i (isValidProKey). Validation is local (no network) — a v1 placeholder.

AxProLicenseService exposes a reactive licensed() signal, upsellUrl, and setKey() for runtime toggling (demos / dynamic activation). Unlicensed use emits a one-time console.warn via warnOnce().

Accessibility

The badge is aria-hidden — it’s a licensing cue, not content, so it never affects the accessible tree of the component it sits on. The host is [hidden] when licensed.

Storybook

See Pro / Gating in Storybook for licensed vs unlicensed previews. Run pnpm storybook to explore them.