@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Standalone analog clock component rendered entirely in SVG.

    Displays a classic clock face with hour, minute, and (optionally) second hands. When no time input is provided the clock ticks in real time using a one-second interval driven by plain setInterval (zoneless-safe).

    <ui-analog-clock />
    
    <ui-analog-clock [time]="fixedDate" [showSeconds]="false" />
    
    <ui-analog-clock [size]="120" [showNumbers]="false" />
    

    Implements

    • OnInit
    Index

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the clock region.

    clockTime: Signal<ClockTime> = ...

    Current clock-hand positions resolved from the time input or the internal live signal.

    dayIcon: InputSignal<string> = ...

    SVG inner content for the daytime indicator icon. Accepts any valid SVG inner markup on a 24 × 24 grid. Defaults to UIIcons.Lucide.Weather.Sun.

    dayIconColor: InputSignal<string> = ...

    Stroke colour for the daytime indicator icon. Defaults to a warm amber (#f59e0b).

    hourAngle: Signal<number> = ...

    Hour-hand rotation in degrees (0–360).

    hourNumbers: Signal<{ hour: number; x: number; y: number }[]> = ...

    Array of hour-number descriptors for the template.

    indicatorColor: Signal<string> = ...

    Stroke colour of the currently active day/night icon.

    indicatorSvg: Signal<SafeHtml> = ...

    Sanitised SVG inner content of the currently active day/night icon.

    isLive: Signal<boolean> = ...

    Whether the clock is ticking on its own (no fixed time provided).

    isNight: Signal<boolean> = ...

    Whether the current clock time represents nighttime (6 PM – 6 AM).

    minuteAngle: Signal<number> = ...

    Minute-hand rotation in degrees (0–360).

    nightIcon: InputSignal<string> = ...

    SVG inner content for the nighttime indicator icon. Accepts any valid SVG inner markup on a 24 × 24 grid. Defaults to UIIcons.Lucide.Weather.MoonStar.

    nightIconColor: InputSignal<string> = ...

    Stroke colour for the nighttime indicator icon. Defaults to a soft gold (#e8e0c0).

    secondAngle: Signal<number> = ...

    Second-hand rotation in degrees (0–360).

    showNumbers: InputSignal<boolean> = ...

    Whether to render hour numbers (1–12) on the face.

    showSeconds: InputSignal<boolean> = ...

    Whether to render the second hand.

    showTickMarks: InputSignal<boolean> = ...

    Whether to render minute tick marks around the rim.

    size: InputSignal<number> = ...

    Diameter of the clock in CSS pixels.

    tickMarks: Signal<
        { isHour: boolean; x1: number; x2: number; y1: number; y2: number }[],
    > = ...

    Array of tick-mark descriptors for the template.

    time: InputSignal<Date | null> = ...

    Fixed time to display. When omitted the clock auto-ticks every second. Passing null or undefined also triggers live mode.

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void