@shival99/z-ui 2.4.2 → 2.4.4

package/types/shival99-z-ui-components-z-media-player.d.ts

@@ -1,200 +1,130 @@
-import * as _angular_platform_browser from '@angular/platform-browser';
+import * as vidstack from 'vidstack';
+import { MediaPlayerProps, DefaultLayoutProps, PlyrLayoutProps, DefaultLayoutTranslations, PlyrLayoutTranslations } from 'vidstack';
 import * as _angular_core from '@angular/core';
-import { OnDestroy, ElementRef } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { ClassValue } from 'clsx';
+import { MediaPlayerElement } from 'vidstack/elements';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare const zMediaPlayerVariants: (props?: ({
-    zLayout?: "default" | "theater" | "fullscreen" | null | undefined;
+    zLayout?: "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ZMediaPlayerVariants = VariantProps<typeof zMediaPlayerVariants>;
-interface ZMediaPlayerSubtitleTrack {
-    label: string;
-    src: string;
-    srclang: string;
-    default?: boolean;
-}
+type ZMediaPlayerProviderKind = 'video' | 'audio' | 'hls' | 'dash' | 'youtube' | 'vimeo';
+type ZMediaPlayerSkin = 'default' | 'plyr';
 interface ZMediaPlayerSource {
     label: string;
+    kind: ZMediaPlayerProviderKind;
     src: string;
+    default?: boolean;
 }
-interface ZMediaPlayerPlaybackSpeed {
-    label: string;
-    value: number;
+/**
+ * Mirrors Vidstack's own `MediaPlayerElement` props (minus deprecated aliases and `src`, which
+ * this component derives from `zSources`), so every core player setting is configurable without
+ * a hand-maintained mapping layer that could drift from the real API.
+ */
+interface ZMediaPlayerConfig extends Partial<Omit<MediaPlayerProps, 'src' | 'autoplay' | 'crossorigin' | 'playsinline'>> {
+    subtitles?: ZMediaPlayerSubtitleTrack[];
+    thumbnailsVtt?: string;
+    chaptersVtt?: string;
 }
-interface ZWebkitHTMLVideoElement extends HTMLVideoElement {
-    webkitSupportsPresentationMode?(mode: 'inline' | 'picture-in-picture'): boolean;
-    webkitPresentationMode?: 'inline' | 'picture-in-picture';
-    webkitSetPresentationMode?(mode: 'inline' | 'picture-in-picture'): void;
+/** Mirrors Vidstack's `DefaultVideoLayout`/`DefaultAudioLayout` props (Default skin). */
+type ZMediaPlayerDefaultLayoutConfig = Partial<DefaultLayoutProps>;
+/** Mirrors Vidstack's `PlyrLayout` props (Plyr skin). */
+type ZMediaPlayerPlyrLayoutConfig = Partial<PlyrLayoutProps>;
+type ZMediaPlayerStateEvent = 'loaded' | 'play' | 'pause' | 'ended' | 'time-update' | 'volume-change' | 'rate-change' | 'fullscreen-change' | 'theater-change' | 'pip-change' | 'source-change' | 'subtitle-change' | 'waiting' | 'can-play';
+interface ZMediaPlayerSnapshot {
+    paused: boolean;
+    playing: boolean;
+    ended: boolean;
+    waiting: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    bufferedRatio: number;
+    fullscreen: boolean;
+    theaterMode: boolean;
+    pictureInPicture: boolean;
+    activeSourceLabel: string | null;
+    activeCaptionsLabel: string | null;
 }
-interface ZDocumentWithPiP extends Document {
-    pictureInPictureEnabled: boolean;
-    pictureInPictureElement: Element | null;
-    exitPictureInPicture(): Promise<void>;
+interface ZMediaPlayerStateChange {
+    event: ZMediaPlayerStateEvent;
+    state: ZMediaPlayerSnapshot;
 }
-type ZMediaPlayerSettingsPanel = 'main' | 'quality' | 'speed';
-/** One cue parsed from a WebVTT storyboard file (`00:00:00.000 --> 00:00:02.000` + `sprite.jpg#xywh=x,y,w,h`). */
-interface ZMediaPlayerThumbnailCue {
-    start: number;
-    end: number;
-    src: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
+interface ZMediaPlayerError {
+    message: string;
+    code?: string | number;
+    source: 'provider' | 'thumbnails-vtt' | 'chapters-vtt';
+    raw?: unknown;
 }
-/** Toggles which control bar groups are rendered. All default to `true`. */
-interface ZMediaPlayerControls {
-    play: boolean;
-    volume: boolean;
-    skip: boolean;
-    time: boolean;
-    timeline: boolean;
-    subtitles: boolean;
-    settings: boolean;
-    pip: boolean;
-    theater: boolean;
+interface ZMediaPlayerVidstackState {
+    paused: boolean;
+    playing: boolean;
+    ended: boolean;
+    waiting: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    bufferedEnd?: number;
+    buffered?: {
+        length: number;
+        end(index: number): number;
+    };
     fullscreen: boolean;
+    pictureInPicture: boolean;
+    textTrack?: {
+        label?: string;
+    } | null;
+}
+interface ZMediaPlayerSubtitleTrack {
+    label: string;
+    src: string;
+    srclang: string;
+    default?: boolean;
 }
 
-declare class ZMediaPlayerComponent implements OnDestroy {
-    private readonly _elementRef;
-    private readonly _ngZone;
-    private readonly _sanitizer;
+/**
+ * Video, audio, HLS, DASH, YouTube, and Vimeo use Vidstack's Default or Plyr Layout skin
+ * (`zSkin`). `zConfig` mirrors Vidstack's own `<media-player>` props; `zDefaultLayoutConfig` /
+ * `zPlyrLayoutConfig` mirror the props of the currently active skin.
+ */
+declare class ZMediaPlayerComponent {
+    private readonly _themeService;
+    private readonly _translateService;
     readonly class: _angular_core.InputSignal<ClassValue>;
-    readonly zSrc: _angular_core.InputSignal<string>;
     readonly zSources: _angular_core.InputSignal<ZMediaPlayerSource[]>;
-    readonly zPoster: _angular_core.InputSignal<string>;
-    readonly zAutoplay: _angular_core.InputSignal<boolean>;
-    readonly zLoop: _angular_core.InputSignal<boolean>;
-    readonly zMuted: _angular_core.InputSignal<boolean>;
-    readonly zVolume: _angular_core.InputSignal<number>;
-    readonly zSubtitles: _angular_core.InputSignal<ZMediaPlayerSubtitleTrack[]>;
-    /** URL to a WebVTT storyboard file powering the YouTube-style timeline hover preview. */
-    readonly zThumbnailsVtt: _angular_core.InputSignal<string>;
-    /** Toggles which control bar groups render. Unset groups default to visible. */
-    readonly zControls: _angular_core.InputSignal<Partial<ZMediaPlayerControls>>;
-    readonly zLoaded: _angular_core.OutputEmitterRef<void>;
-    readonly zError: _angular_core.OutputEmitterRef<Error | null>;
-    readonly zPlay: _angular_core.OutputEmitterRef<boolean>;
-    readonly zTimeUpdate: _angular_core.OutputEmitterRef<number>;
-    readonly zVolumeChange: _angular_core.OutputEmitterRef<number>;
-    readonly zFullscreenChange: _angular_core.OutputEmitterRef<boolean>;
-    readonly zTheaterModeChange: _angular_core.OutputEmitterRef<boolean>;
-    readonly zMiniplayerChange: _angular_core.OutputEmitterRef<boolean>;
-    readonly zQualityChange: _angular_core.OutputEmitterRef<ZMediaPlayerSource>;
-    readonly videoElement: _angular_core.Signal<ElementRef<HTMLVideoElement> | undefined>;
-    readonly timelineContainer: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
-    private readonly _settingsPopover;
-    protected readonly isPlaying: _angular_core.WritableSignal<boolean>;
-    protected readonly currentTime: _angular_core.WritableSignal<number>;
-    protected readonly duration: _angular_core.WritableSignal<number>;
-    protected readonly volume: _angular_core.WritableSignal<number>;
-    protected readonly isMuted: _angular_core.WritableSignal<boolean>;
-    protected readonly playbackSpeed: _angular_core.WritableSignal<number>;
-    protected readonly activeSourceSrc: _angular_core.WritableSignal<string | null>;
-    private readonly _activeQualitySourceLabel;
-    protected readonly showControls: _angular_core.WritableSignal<boolean>;
-    protected readonly isPointerOver: _angular_core.WritableSignal<boolean>;
-    protected readonly isBuffering: _angular_core.WritableSignal<boolean>;
-    protected readonly captionsEnabled: _angular_core.WritableSignal<boolean>;
-    protected readonly subtitleText: _angular_core.WritableSignal<string>;
-    protected readonly hasSubtitles: _angular_core.Signal<boolean>;
-    protected readonly isTheaterMode: _angular_core.WritableSignal<boolean>;
-    protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
-    protected readonly isMiniplayer: _angular_core.WritableSignal<boolean>;
-    protected readonly showSettings: _angular_core.WritableSignal<boolean>;
-    protected readonly settingsPanel: _angular_core.WritableSignal<ZMediaPlayerSettingsPanel>;
-    protected readonly isDragging: _angular_core.WritableSignal<boolean>;
-    protected readonly bufferedProgress: _angular_core.WritableSignal<number>;
-    protected readonly progress: _angular_core.WritableSignal<number>;
-    protected readonly playPauseFlash: _angular_core.WritableSignal<"play" | "pause" | null>;
-    protected readonly hoverTimeLabel: _angular_core.WritableSignal<string | null>;
-    protected readonly hoverTime: _angular_core.WritableSignal<number | null>;
-    protected readonly hoverX: _angular_core.WritableSignal<number>;
-    private readonly _thumbnailCues;
-    private readonly _positionedSubtitleTracks;
-    protected readonly skipOverlayDirection: _angular_core.WritableSignal<"left" | "right" | null>;
-    protected readonly skipOverlayValue: _angular_core.WritableSignal<number>;
-    protected readonly skipOverlayPulse: _angular_core.WritableSignal<number>;
-    protected readonly isPiPSupported: _angular_core.Signal<boolean>;
-    protected readonly playbackSpeeds: readonly ZMediaPlayerPlaybackSpeed[];
-    private _controlsTimeout;
-    private _flashTimeout;
-    private _skipOverlayTimeout;
-    private _bufferAnimationFrame;
-    private _playbackAnimationFrame;
-    private _mouseMoveCleanup;
-    private _lastMouseMoveAt;
-    private _bufferedTarget;
-    private _accumulatedSkip;
+    readonly zConfig: _angular_core.InputSignal<Partial<ZMediaPlayerConfig>>;
+    readonly zSkin: _angular_core.InputSignal<ZMediaPlayerSkin>;
+    readonly zDefaultLayoutConfig: _angular_core.InputSignal<Partial<vidstack.DefaultLayoutProps>>;
+    readonly zPlyrLayoutConfig: _angular_core.InputSignal<Partial<vidstack.PlyrLayoutProps>>;
+    readonly zStateChange: _angular_core.OutputEmitterRef<ZMediaPlayerStateChange>;
+    readonly zError: _angular_core.OutputEmitterRef<ZMediaPlayerError>;
+    protected readonly playerElement: _angular_core.Signal<ElementRef<MediaPlayerElement> | undefined>;
+    protected readonly layoutElement: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly activeSource: _angular_core.Signal<ZMediaPlayerSource | null>;
+    protected readonly isAudioSource: _angular_core.Signal<boolean>;
+    protected readonly isPlyrSkin: _angular_core.Signal<boolean>;
+    protected readonly colorScheme: _angular_core.Signal<"light" | "dark" | "system">;
+    private readonly _isVietnamese;
+    protected readonly defaultLayoutTranslations: _angular_core.Signal<Partial<DefaultLayoutTranslations> | null>;
+    protected readonly plyrLayoutTranslations: _angular_core.Signal<Partial<PlyrLayoutTranslations> | null>;
+    protected readonly state: _angular_core.WritableSignal<ZMediaPlayerSnapshot>;
     protected readonly zClasses: _angular_core.Signal<string>;
-    protected readonly currentTimeLabel: _angular_core.Signal<string>;
-    protected readonly durationLabel: _angular_core.Signal<string>;
-    protected readonly controls: _angular_core.Signal<ZMediaPlayerControls>;
-    protected readonly effectiveSrc: _angular_core.Signal<string>;
-    protected readonly qualitySources: _angular_core.Signal<ZMediaPlayerSource[]>;
-    protected readonly activeQualityLabel: _angular_core.Signal<string>;
-    protected readonly youtubeVideoId: _angular_core.Signal<string | null>;
-    protected readonly isYouTube: _angular_core.Signal<boolean>;
-    protected readonly youtubeEmbedUrl: _angular_core.Signal<_angular_platform_browser.SafeResourceUrl | null>;
-    protected readonly hoverThumbnailCue: _angular_core.Signal<ZMediaPlayerThumbnailCue | null>;
     constructor();
-    ngOnDestroy(): void;
-    private _initializeVideoState;
-    protected togglePlay(): void;
-    private _triggerFlashIcon;
-    protected toggleMute(): void;
-    protected onVolumeChange(val: number): void;
-    protected setPlaybackSpeed(speed: number): void;
-    protected openSettingsPanel(panel: ZMediaPlayerSettingsPanel): void;
-    protected closeSettingsPanel(): void;
-    protected onSettingsHidden(): void;
-    protected toggleInlineSettings(): void;
-    protected setQualitySource(source: ZMediaPlayerSource): void;
-    protected seekTo(time: number): void;
-    protected toggleTheaterMode(): void;
-    protected toggleFullscreen(): void;
-    protected onFullscreenStateChange(): void;
-    protected toggleMiniplayer(): Promise<void>;
-    protected onEnterPiP(): void;
-    protected onLeavePiP(): void;
-    protected onWebkitPresentationModeChanged(): void;
-    protected toggleSubtitles(): void;
-    private _positionSubtitleCues;
-    private _updateSubtitleText;
-    protected onPlayStateChange(playing: boolean): void;
-    protected onTimeUpdate(): void;
-    protected onDurationChange(): void;
-    protected onLoadedData(): void;
-    protected onVideoError(): void;
-    protected onSeeking(seeking: boolean): void;
-    protected updateBufferedProgress(): void;
-    private _setBufferedTarget;
-    private _startPlaybackProgressLoop;
-    private _stopPlaybackProgressLoop;
-    private _syncPlaybackProgress;
-    protected onTimelineDragStart(event: MouseEvent): void;
-    protected onTimelineHover(event: MouseEvent): void;
-    protected onTimelineHoverEnd(): void;
-    private _loadThumbnailVtt;
-    private _parseThumbnailVtt;
-    private _parseVttTimestamp;
-    private _updateTimeFromCoords;
-    protected onMouseMove(): void;
-    protected onMouseLeave(): void;
-    private _resetControlsTimer;
-    protected onVideoClick(): void;
-    protected triggerSkip(seconds: number, direction: 'left' | 'right'): void;
-    private _triggerSkipOverlay;
-    protected onKeyDown(event: KeyboardEvent): void;
-    protected toggleSettings(): void;
-    private _formatTime;
+    private _syncState;
+    private _emitStateChange;
+    private _emitError;
+    private _configureStreamingProvider;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZMediaPlayerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMediaPlayerComponent, "z-media-player", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zSrc": { "alias": "zSrc"; "required": true; "isSignal": true; }; "zSources": { "alias": "zSources"; "required": false; "isSignal": true; }; "zPoster": { "alias": "zPoster"; "required": false; "isSignal": true; }; "zAutoplay": { "alias": "zAutoplay"; "required": false; "isSignal": true; }; "zLoop": { "alias": "zLoop"; "required": false; "isSignal": true; }; "zMuted": { "alias": "zMuted"; "required": false; "isSignal": true; }; "zVolume": { "alias": "zVolume"; "required": false; "isSignal": true; }; "zSubtitles": { "alias": "zSubtitles"; "required": false; "isSignal": true; }; "zThumbnailsVtt": { "alias": "zThumbnailsVtt"; "required": false; "isSignal": true; }; "zControls": { "alias": "zControls"; "required": false; "isSignal": true; }; }, { "zLoaded": "zLoaded"; "zError": "zError"; "zPlay": "zPlay"; "zTimeUpdate": "zTimeUpdate"; "zVolumeChange": "zVolumeChange"; "zFullscreenChange": "zFullscreenChange"; "zTheaterModeChange": "zTheaterModeChange"; "zMiniplayerChange": "zMiniplayerChange"; "zQualityChange": "zQualityChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMediaPlayerComponent, "z-media-player", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zSources": { "alias": "zSources"; "required": true; "isSignal": true; }; "zConfig": { "alias": "zConfig"; "required": false; "isSignal": true; }; "zSkin": { "alias": "zSkin"; "required": false; "isSignal": true; }; "zDefaultLayoutConfig": { "alias": "zDefaultLayoutConfig"; "required": false; "isSignal": true; }; "zPlyrLayoutConfig": { "alias": "zPlyrLayoutConfig"; "required": false; "isSignal": true; }; }, { "zStateChange": "zStateChange"; "zError": "zError"; }, never, never, true, never>;
 }
 
 export { ZMediaPlayerComponent };
-export type { ZDocumentWithPiP, ZMediaPlayerControls, ZMediaPlayerPlaybackSpeed, ZMediaPlayerSettingsPanel, ZMediaPlayerSource, ZMediaPlayerSubtitleTrack, ZMediaPlayerThumbnailCue, ZMediaPlayerVariants, ZWebkitHTMLVideoElement };
+export type { ZMediaPlayerConfig, ZMediaPlayerDefaultLayoutConfig, ZMediaPlayerError, ZMediaPlayerPlyrLayoutConfig, ZMediaPlayerProviderKind, ZMediaPlayerSkin, ZMediaPlayerSnapshot, ZMediaPlayerSource, ZMediaPlayerStateChange, ZMediaPlayerStateEvent, ZMediaPlayerSubtitleTrack, ZMediaPlayerVariants, ZMediaPlayerVidstackState };

package/types/shival99-z-ui-components-z-metric-card.d.ts

@@ -1,8 +1,23 @@
 import * as _angular_core from '@angular/core';
 import { ZIcon } from '@shival99/z-ui/components/z-icon';
 import { ClassValue } from 'clsx';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const zMetricCardVariants: (props?: ({
+    zSize?: "sm" | "default" | "lg" | null | undefined;
+    zVariant?: "default" | "bordered" | "soft" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zMetricCardIconVariants: (props?: ({
+    zSize?: "sm" | "default" | "lg" | null | undefined;
+    zVariant?: "default" | "bordered" | "soft" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zMetricCardValueVariants: (props?: ({
+    zSize?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const zMetricCardTrendVariants: (props?: ({
+    zTrendDirection?: "up" | "down" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ZMetricCardSize = 'sm' | 'default' | 'lg';
 type ZMetricCardVariant = 'default' | 'bordered' | 'soft';
@@ -17,6 +32,9 @@ interface ZMetricCardAction {
     label: string;
     icon?: ZIcon;
 }
+type ZMetricCardVariants = VariantProps<typeof zMetricCardVariants>;
+type ZMetricCardIconVariants = VariantProps<typeof zMetricCardIconVariants>;
+type ZMetricCardTrendVariants = VariantProps<typeof zMetricCardTrendVariants>;
 
 declare class ZMetricCardComponent {
     readonly zActionClick: _angular_core.OutputEmitterRef<ZMetricCardAction>;
@@ -45,23 +63,5 @@ declare class ZMetricCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZMetricCardComponent, "z-metric-card", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTitle": { "alias": "zTitle"; "required": false; "isSignal": true; }; "zValue": { "alias": "zValue"; "required": false; "isSignal": true; }; "zDescription": { "alias": "zDescription"; "required": false; "isSignal": true; }; "zIcon": { "alias": "zIcon"; "required": false; "isSignal": true; }; "zTrend": { "alias": "zTrend"; "required": false; "isSignal": true; }; "zProgress": { "alias": "zProgress"; "required": false; "isSignal": true; }; "zAction": { "alias": "zAction"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zVariant": { "alias": "zVariant"; "required": false; "isSignal": true; }; "zDecor": { "alias": "zDecor"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; }, { "zActionClick": "zActionClick"; }, never, ["*"], true, never>;
 }
 
-declare const zMetricCardVariants: (props?: ({
-    zSize?: "sm" | "default" | "lg" | null | undefined;
-    zVariant?: "default" | "bordered" | "soft" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const zMetricCardIconVariants: (props?: ({
-    zSize?: "sm" | "default" | "lg" | null | undefined;
-    zVariant?: "default" | "bordered" | "soft" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const zMetricCardValueVariants: (props?: ({
-    zSize?: "sm" | "default" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const zMetricCardTrendVariants: (props?: ({
-    zTrendDirection?: "up" | "down" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ZMetricCardVariants = VariantProps<typeof zMetricCardVariants>;
-type ZMetricCardIconVariants = VariantProps<typeof zMetricCardIconVariants>;
-type ZMetricCardTrendVariants = VariantProps<typeof zMetricCardTrendVariants>;
-
 export { ZMetricCardComponent, zMetricCardIconVariants, zMetricCardTrendVariants, zMetricCardValueVariants, zMetricCardVariants };
 export type { ZMetricCardAction, ZMetricCardDecor, ZMetricCardIconVariants, ZMetricCardSize, ZMetricCardTrend, ZMetricCardTrendDirection, ZMetricCardTrendVariants, ZMetricCardVariant, ZMetricCardVariants };

package/types/shival99-z-ui-components-z-modal.d.ts

@@ -301,7 +301,7 @@ declare class ZModalService {
     private _attachModalContent;
     private _createInjector;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZModalService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ZModalService>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
 declare const Z_MODAL_DATA: InjectionToken<any>;

package/types/shival99-z-ui-components-z-number-ticker.d.ts

@@ -0,0 +1,110 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { ClassValue } from 'clsx';
+
+/**
+ * How the tweened value is rendered. Each maps onto `Intl.NumberFormat`, so grouping separators and
+ * decimal marks follow the locale rather than being assembled by hand.
+ *
+ * `percent` follows `Intl` semantics and multiplies by 100 — pass `0.42` to render `42%`.
+ */
+type ZNumberTickerFormat = 'decimal' | 'currency' | 'percent' | 'compact';
+/**
+ * Shape of the roll. `smooth` is an ease-out cubic; `spring` and `bounce` overshoot the target digit
+ * and settle back onto it, which a mechanical odometer does when it snaps into place.
+ */
+type ZNumberTickerEasing = 'linear' | 'smooth' | 'spring' | 'bounce';
+/** One rendered cell: either a rolling digit wheel at a decimal place, or fixed text between wheels. */
+interface ZNumberTickerCell {
+    /** Power of ten this wheel shows — `0` is the units digit, `-1` the first decimal. `null` for text. */
+    place: number | null;
+    /** A sign cell crossfades between `+` and `-` instead of holding one glyph. */
+    isSign: boolean;
+    text: string;
+}
+
+declare class ZNumberTickerComponent implements OnDestroy {
+    private readonly _zone;
+    private readonly _isServer;
+    readonly class: _angular_core.InputSignal<ClassValue>;
+    /** The value to count towards. Changing it re-runs the count from wherever the ticker currently is. */
+    readonly zValue: _angular_core.InputSignal<number>;
+    /** Where the first count starts. Later changes count from the displayed value, not from here. */
+    readonly zStart: _angular_core.InputSignal<number>;
+    /** How long the roll takes, in milliseconds. */
+    readonly zDuration: _angular_core.InputSignal<number>;
+    readonly zEasing: _angular_core.InputSignal<ZNumberTickerEasing>;
+    readonly zFormat: _angular_core.InputSignal<ZNumberTickerFormat>;
+    /** Locale for grouping separators and decimal marks; defaults to the browser's. */
+    readonly zLocale: _angular_core.InputSignal<string | undefined>;
+    /** Only read when `zFormat` is `'currency'`. */
+    readonly zCurrency: _angular_core.InputSignal<string>;
+    /** Zero-pads the integer part, e.g. `2` renders `07` — what a clock segment needs. */
+    readonly zMinimumIntegerDigits: _angular_core.InputSignal<number | undefined>;
+    /** Passed to `Intl`; `'always'` keeps a `+` on positive values, as a delta figure wants. */
+    readonly zSignDisplay: _angular_core.InputSignal<keyof Intl.NumberFormatOptionsSignDisplayRegistry | undefined>;
+    readonly zMinimumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    readonly zMaximumFractionDigits: _angular_core.InputSignal<number | undefined>;
+    /** Digits to roll through, plus a repeated `0` so a 9→0 wrap rolls on rather than snapping back. */
+    protected readonly wheelDigits: number[];
+    private readonly _progress;
+    private readonly _from;
+    private readonly _to;
+    private readonly _rolling;
+    private _frame?;
+    private _started;
+    /**
+     * Only what the roll needs structurally: an inline box, and tabular figures so a digit swap cannot
+     * change the width. Type scale, weight and colour are the consumer's — a ticker has no business
+     * deciding how big a number on someone's page should be.
+     */
+    protected readonly tickerClasses: _angular_core.Signal<string>;
+    /** Decimal places in the target value, which is what the count should render to. */
+    private readonly _targetDecimals;
+    /**
+     * Kept as one memoised formatter rather than calling `toLocaleString` per frame: constructing an
+     * `Intl.NumberFormat` is the expensive part, and the ticker formats on every animation frame.
+     */
+    private readonly _formatter;
+    /**
+     * The wheels stay mounted for the whole life of the component. Swapping to plain text between rolls
+     * changed the box width every time one finished, which read as the number twitching on the page.
+     * Static text is only for the cases where there is no roll at all: the server, and reduced motion.
+     */
+    protected readonly isRolling: _angular_core.Signal<boolean>;
+    protected readonly usesWheels: _angular_core.Signal<boolean>;
+    /** Layout is pinned to the endpoints, so wheels are neither added nor removed mid-count. */
+    protected readonly cells: _angular_core.Signal<ZNumberTickerCell[]>;
+    private readonly _magnitudes;
+    protected readonly wheelOffsets: _angular_core.Signal<number[]>;
+    /** A sign cell holds both glyphs and crossfades between them across the roll. */
+    protected readonly signFrom: _angular_core.Signal<string>;
+    protected readonly signTo: _angular_core.Signal<string>;
+    protected readonly signProgress: _angular_core.Signal<number>;
+    /**
+     * The outgoing glyph leaves to the left and the incoming one arrives from the right, both riding the
+     * roll's own easing. Distance is a custom property so a consumer can dial the travel down to a pure
+     * crossfade (`0`) or open it up.
+     */
+    protected signTransform(direction: 1 | -1): string;
+    /** The plain formatted number, used before the first roll and whenever motion is off. */
+    protected readonly formattedValue: _angular_core.Signal<string>;
+    constructor();
+    /** Where the count has actually reached, so a new target continues from there. */
+    private _currentValue;
+    protected wheelTransform(index: number): string;
+    ngOnDestroy(): void;
+    /**
+     * Runs the tween outside Angular: a per-frame `requestAnimationFrame` inside the zone would schedule
+     * a change-detection pass of its own on every frame. The signal write still schedules one, so the
+     * text updates — this only drops the duplicate.
+     */
+    private _animate;
+    private _cancel;
+    private _prefersReducedMotion;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZNumberTickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZNumberTickerComponent, "z-number-ticker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zValue": { "alias": "zValue"; "required": false; "isSignal": true; }; "zStart": { "alias": "zStart"; "required": false; "isSignal": true; }; "zDuration": { "alias": "zDuration"; "required": false; "isSignal": true; }; "zEasing": { "alias": "zEasing"; "required": false; "isSignal": true; }; "zFormat": { "alias": "zFormat"; "required": false; "isSignal": true; }; "zLocale": { "alias": "zLocale"; "required": false; "isSignal": true; }; "zCurrency": { "alias": "zCurrency"; "required": false; "isSignal": true; }; "zMinimumIntegerDigits": { "alias": "zMinimumIntegerDigits"; "required": false; "isSignal": true; }; "zSignDisplay": { "alias": "zSignDisplay"; "required": false; "isSignal": true; }; "zMinimumFractionDigits": { "alias": "zMinimumFractionDigits"; "required": false; "isSignal": true; }; "zMaximumFractionDigits": { "alias": "zMaximumFractionDigits"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ZNumberTickerComponent };
+export type { ZNumberTickerEasing, ZNumberTickerFormat };

package/types/shival99-z-ui-components-z-overlay.d.ts

@@ -97,7 +97,7 @@ declare class ZOverlayStackService {
      */
     isTopmost(entry: ZOverlayStackEntry): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayStackService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ZOverlayStackService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -165,7 +165,7 @@ declare class ZOverlayService {
     private _showHost;
     private _getContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ZOverlayService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 /**
@@ -193,7 +193,7 @@ declare class ZScrollLockService {
     lock(): void;
     unlock(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ZScrollLockService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ZScrollLockService>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
 export { ZOverlayRef, ZOverlayService, ZOverlayStackService, ZScrollLockService, Z_OVERLAY_CONTAINER_CLASS, Z_OVERLAY_DEFAULT_ARROW_EDGE_PADDING, Z_OVERLAY_DEFAULT_VIEWPORT_PADDING, Z_OVERLAY_FALLBACK_ORDER, Z_OVERLAY_HOST_CLASS, Z_OVERLAY_PLACEMENT_MAP, Z_OVERLAY_PLACEMENT_REVERSE_MAP, Z_OVERLAY_PREFERRED_SIDE_ORDER, Z_OVERLAY_SCROLLABLE_CLASS, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };

package/types/shival99-z-ui-components-z-popover.d.ts

@@ -1,11 +1,16 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, OnInit, OnDestroy, ElementRef } from '@angular/core';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const zPopoverVariants: (props?: ({
+    zPosition?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type ZPopoverTrigger = 'click' | 'hover' | 'manual';
 type ZPopoverPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
 type ZPopoverContent = TemplateRef<unknown>;
+type ZPopoverWidth = 'auto' | 'trigger' | number;
 type ZPopoverOverlaySize = {
     width?: number | string;
     minWidth?: number | string;
@@ -20,6 +25,7 @@ interface ZPopoverControl {
     isVisible: () => boolean;
     updatePosition: () => void;
 }
+type ZPopoverVariants = VariantProps<typeof zPopoverVariants>;
 
 declare class ZPopoverComponent implements OnInit, OnDestroy {
     private static readonly _openPopovers;
@@ -114,7 +120,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     readonly zHideDelay: _angular_core.InputSignal<number>;
     readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOffset: _angular_core.InputSignal<number>;
-    readonly zPopoverWidth: _angular_core.InputSignal<number | "trigger" | "auto">;
+    readonly zPopoverWidth: _angular_core.InputSignal<ZPopoverWidth>;
     readonly zTriggerRef: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | null>;
     readonly zManualClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zOutsideClickClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
@@ -193,10 +199,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ZPopoverDirective, "[z-popover]", ["zPopover"], { "zContent": { "alias": "zPopoverContent"; "required": false; "isSignal": true; }; "zPosition": { "alias": "zPosition"; "required": false; "isSignal": true; }; "zTrigger": { "alias": "zTrigger"; "required": false; "isSignal": true; }; "zPopoverTrigger": { "alias": "zPopoverTrigger"; "required": false; "isSignal": true; }; "zClass": { "alias": "zClass"; "required": false; "isSignal": true; }; "zShowDelay": { "alias": "zShowDelay"; "required": false; "isSignal": true; }; "zHideDelay": { "alias": "zHideDelay"; "required": false; "isSignal": true; }; "zDisabled": { "alias": "zDisabled"; "required": false; "isSignal": true; }; "zOffset": { "alias": "zOffset"; "required": false; "isSignal": true; }; "zPopoverWidth": { "alias": "zPopoverWidth"; "required": false; "isSignal": true; }; "zTriggerRef": { "alias": "zTriggerRef"; "required": false; "isSignal": true; }; "zManualClose": { "alias": "zManualClose"; "required": false; "isSignal": true; }; "zOutsideClickClose": { "alias": "zOutsideClickClose"; "required": false; "isSignal": true; }; "zScrollClose": { "alias": "zScrollClose"; "required": false; "isSignal": true; }; "zSticky": { "alias": "zSticky"; "required": false; "isSignal": true; }; "zShowArrow": { "alias": "zShowArrow"; "required": false; "isSignal": true; }; "zKeyboardSafe": { "alias": "zKeyboardSafe"; "required": false; "isSignal": true; }; }, { "zShow": "zShow"; "zHide": "zHide"; "zHideStart": "zHideStart"; "zControl": "zControl"; "zPositionChange": "zPositionChange"; "zOutsideClick": "zOutsideClick"; }, never, never, true, never>;
 }
 
-declare const zPopoverVariants: (props?: ({
-    zPosition?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ZPopoverVariants = VariantProps<typeof zPopoverVariants>;
+declare const Z_POPOVER_ANIMATION_DURATION = 200;
 
-export { ZPopoverComponent, ZPopoverDirective, zPopoverVariants };
-export type { ZPopoverContent, ZPopoverControl, ZPopoverOverlaySize, ZPopoverPaneStyles, ZPopoverPosition, ZPopoverTrigger, ZPopoverVariants };
+export { ZPopoverComponent, ZPopoverDirective, Z_POPOVER_ANIMATION_DURATION, zPopoverVariants };
+export type { ZPopoverContent, ZPopoverControl, ZPopoverOverlaySize, ZPopoverPaneStyles, ZPopoverPosition, ZPopoverTrigger, ZPopoverVariants, ZPopoverWidth };

package/types/shival99-z-ui-components-z-qrcode.d.ts

@@ -30,7 +30,7 @@ declare class ZQrCodeComponent {
     readonly zFrameText: _angular_core.InputSignal<string>;
     readonly zFrameColor: _angular_core.InputSignal<string>;
     readonly zFramePadding: _angular_core.InputSignal<number>;
-    readonly zFrameBorderRadius: _angular_core.InputSignal<number>;
+    readonly zFrameBorderRadius: _angular_core.InputSignal<number | undefined>;
     readonly zDownloadable: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zDownloadButton: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     readonly zShadow: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
@@ -38,6 +38,9 @@ declare class ZQrCodeComponent {
     private readonly _canvasRef;
     private readonly _platformId;
     protected readonly downloadText: _angular_core.WritableSignal<string>;
+    protected readonly frameBorderRadiusStyle: _angular_core.Signal<string>;
+    /** Resolves the frame radius to a px number for canvas drawing, reading the theme's --radius-lg when unset. */
+    private _resolveFrameBorderRadiusPx;
     constructor();
     /**
      * Renders the stylized QR code onto the canvas element