@bspk/ui-ngx 0.0.1

package/src/types/common.ts

@@ -0,0 +1,252 @@
+import { InputSignal, Signal } from '@angular/core';
+
+export type AsInputSignal<T> = {
+    [K in keyof T]: undefined extends T[K] ? InputSignal<T[K] | undefined> : InputSignal<NonNullable<T[K]>>;
+};
+
+export type AsSignal<T> = {
+    [K in keyof T]: undefined extends T[K] ? Signal<T[K] | undefined> : Signal<NonNullable<T[K]>>;
+};
+
+export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
+
+/** Sets a ref to the given element. */
+export type SetRef<T> = (instance: T | null) => void;
+
+export type DataProps = Record<`data-${string}`, string>;
+
+export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
+
+export interface CallToActionButton {
+    /**
+     * The label of the call to action button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The callback function for the call to action button.
+     *
+     * @required
+     */
+    onClick: () => void;
+    /** The size of the call to action button. */
+    size?: ButtonSize;
+}
+
+export interface CommonPropsLibrary {
+    /**
+     * Indicates that the element is in an invalid state and displays the error theme.
+     *
+     * If set to true, an accompanying error message should be provided.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /** The id of the element. If not provided one will be generated. */
+    id?: string;
+    /**
+     * Marks the element as active and displays active state theme.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The size of the element.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * Determines if the element is [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required).
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) of the control.
+     *
+     * @required
+     */
+    name: string;
+    /**
+     * The value of the control.
+     *
+     * @required
+     */
+    optionValue?: string;
+    /**
+     * The aria-label for the element.
+     *
+     * This is used to provide an accessible name for the element when a visible label is not present.
+     *
+     * Ensure this is provided when using the element in isolation to maintain accessibility.
+     */
+    ariaLabel?: string;
+    /** Identifies the parent component. Helps with styling, debugging, and/or testing purposes. */
+    owner?: string;
+    /**
+     * The ARIA role of the element.
+     *
+     * @type string
+     */
+    ariaRole?: AriaRole;
+    /**
+     * Inline styles to apply to the element.
+     *
+     * Allows for CSS variables to be passed in as well.
+     */
+    style?: string;
+    /*
+     * The aria-describedby attribute for the control.
+     */
+    ariaDescribedBy?: string;
+    /*
+     * The aria-errormessage attribute for the control.
+     */
+    ariaErrorMessage?: string;
+    /** The aria-labelledby attribute for the control. */
+    ariaLabelledBy?: string;
+    /**
+     * Indicates the current "selected" state of the list item when used in a selectable context, such as within a
+     * ListItemMenu.
+     */
+    ariaSelected?: boolean;
+    /** The aria-disabled attribute for the element. */
+    ariaDisabled?: boolean;
+    /** The aria-readonly attribute for the element. */
+    ariaReadonly?: boolean;
+    /** The htmlFor attribute for the element. */
+    htmlFor?: string;
+    /** Explicit tabIndex; defaults to 0 when actionable, otherwise -1. */
+    tabIndex?: number;
+}
+
+export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
+
+export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
+
+export type FieldControlProps<ValueType = string> = CommonProps<
+    | 'ariaDescribedBy'
+    | 'ariaErrorMessage'
+    | 'ariaLabel'
+    | 'ariaLabelledBy'
+    | 'disabled'
+    | 'id'
+    | 'invalid'
+    | 'name'
+    | 'readOnly'
+    | 'required'
+> & {
+    /**
+     * The value of the field control.
+     *
+     * @required
+     */
+    value: ValueType | undefined;
+};
+
+export type Brand =
+    | 'anywhere'
+    | 'better-homes-gardens'
+    | 'cartus'
+    | 'century-21'
+    | 'coldwell-banker'
+    | 'corcoran'
+    | 'denali-boss'
+    | 'era'
+    | 'sothebys';
+
+// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
+export type AriaRole =
+    | 'alert'
+    | 'alertdialog'
+    | 'application'
+    | 'article'
+    | 'banner'
+    | 'button'
+    | 'cell'
+    | 'checkbox'
+    | 'columnheader'
+    | 'combobox'
+    | 'complementary'
+    | 'contentinfo'
+    | 'definition'
+    | 'dialog'
+    | 'directory'
+    | 'document'
+    | 'feed'
+    | 'figure'
+    | 'form'
+    | 'grid'
+    | 'gridcell'
+    | 'group'
+    | 'heading'
+    | 'img'
+    | 'link'
+    | 'list'
+    | 'listbox'
+    | 'listitem'
+    | 'log'
+    | 'main'
+    | 'marquee'
+    | 'math'
+    | 'menu'
+    | 'menubar'
+    | 'menuitem'
+    | 'menuitemcheckbox'
+    | 'menuitemradio'
+    | 'navigation'
+    | 'none'
+    | 'note'
+    | 'option'
+    | 'presentation'
+    | 'progressbar'
+    | 'radio'
+    | 'radiogroup'
+    | 'region'
+    | 'row'
+    | 'rowgroup'
+    | 'rowheader'
+    | 'scrollbar'
+    | 'search'
+    | 'searchbox'
+    | 'separator'
+    | 'slider'
+    | 'spinbutton'
+    | 'status'
+    | 'switch'
+    | 'tab'
+    | 'table'
+    | 'tablist'
+    | 'tabpanel'
+    | 'term'
+    | 'textbox'
+    | 'timer'
+    | 'toolbar'
+    | 'tooltip'
+    | 'tree'
+    | 'treegrid'
+    | 'treeitem'
+    | (string & {});
+
+export interface UtilityBase<PropsType> {
+    props: Signal<PropsType>;
+    init(props: Partial<PropsType>): void;
+    destroy(): void;
+    updateProps(props: Partial<PropsType>): void;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/add-component.ts

@@ -0,0 +1,18 @@
+import { createComponent, EnvironmentInjector, Type } from '@angular/core';
+
+export function addComponent<T extends Type<any>>(
+    env: EnvironmentInjector,
+    component: T,
+    tagName: string,
+    hostElement?: HTMLElement,
+) {
+    if (typeof document === 'undefined') return null;
+
+    const componentElement = document.createElement(tagName);
+    (hostElement || document.body).appendChild(componentElement);
+
+    return createComponent(component, {
+        environmentInjector: env,
+        hostElement: componentElement,
+    });
+}

package/src/utils/breakpoint.service.ts

@@ -0,0 +1,40 @@
+import { Injectable, signal } from '@angular/core';
+
+export type BreakpointLabel = 'large' | 'medium' | 'small' | 'xLarge' | 'xxLarge';
+
+/** The max and min widths for each breakpoint label. */
+export const BREAKPOINTS: { label: BreakpointLabel; min: number; max: number }[] = [
+    { label: 'small', min: 0, max: 640 },
+    { label: 'medium', min: 641, max: 768 },
+    { label: 'large', min: 769, max: 1024 },
+    { label: 'xLarge', min: 1025, max: 1280 },
+    { label: 'xxLarge', min: 1281, max: 1536 },
+] as const;
+
+/** Service to provide reactive signals for responsive breakpoints and device orientation. */
+@Injectable({
+    providedIn: 'root',
+})
+export class UIBreakpointService {
+    // use signals to track current breakpoint
+    readonly currentBreakpointSignal = signal<BreakpointLabel>(this.currentBreakpoint);
+
+    // on service init, set up resize listener to update breakpoint signal
+    constructor() {
+        window.addEventListener('resize', () => {
+            this.currentBreakpointSignal.set(this.currentBreakpoint);
+        });
+    }
+
+    // return current breakpoint based on window width and set up resize listener to update on changes
+    get currentBreakpoint(): BreakpointLabel {
+        const width = window.innerWidth;
+        return BREAKPOINTS.find((breakpoint) => breakpoint.min <= width && breakpoint.max >= width)?.label || 'xxLarge';
+    }
+
+    onDestroy() {
+        window.removeEventListener('resize', () => {
+            this.currentBreakpointSignal.set(this.currentBreakpoint);
+        });
+    }
+}

package/src/utils/color-variants.ts

@@ -0,0 +1,23 @@
+/**
+ * This file is generated by the update-css script. Do not edit this file directly. Instead, edit the script and run it
+ * again.
+ */
+export const COLOR_VARIANTS = [
+    'grey',
+    'white',
+    'primary',
+    'secondary',
+    'blue',
+    'green',
+    'lime',
+    'magenta',
+    'orange',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'yellow',
+] as const;
+export type ColorVariant = (typeof COLOR_VARIANTS)[number];
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/keyboard.ts

@@ -0,0 +1,388 @@
+export type KeyboardEventKey =
+    | ' '
+    | '_'
+    | '-'
+    | ';'
+    | ':'
+    | '!'
+    | '?'
+    | '.'
+    | ''
+    | '"'
+    | '('
+    | ')'
+    | '['
+    | ']'
+    | '{'
+    | '}'
+    | '@'
+    | '*'
+    | '/'
+    | '\\'
+    | '&'
+    | '#'
+    | '%'
+    | '`'
+    | '^'
+    | '+'
+    | '<'
+    | '='
+    | '>'
+    | '|'
+    | '~'
+    | '$'
+    | '0'
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | 'A'
+    | 'a'
+    | 'Alt'
+    | 'ArrowDown'
+    | 'ArrowLeft'
+    | 'ArrowRight'
+    | 'ArrowUp'
+    | 'AudioVolumeDown'
+    | 'AudioVolumeMute'
+    | 'AudioVolumeUp'
+    | 'B'
+    | 'b'
+    | 'Backspace'
+    | 'C'
+    | 'c'
+    | 'CapsLock'
+    | 'ContextMenu'
+    | 'Control'
+    | 'D'
+    | 'd'
+    | 'Delete'
+    | 'E'
+    | 'e'
+    | 'End'
+    | 'Enter'
+    | 'Escape'
+    | 'F'
+    | 'f'
+    | 'F1'
+    | 'F2'
+    | 'F3'
+    | 'F4'
+    | 'F5'
+    | 'F6'
+    | 'F7'
+    | 'F8'
+    | 'F9'
+    | 'F10'
+    | 'F11'
+    | 'F12'
+    | 'G'
+    | 'g'
+    | 'H'
+    | 'h'
+    | 'Home'
+    | 'I'
+    | 'i'
+    | 'Insert'
+    | 'J'
+    | 'j'
+    | 'K'
+    | 'k'
+    | 'L'
+    | 'l'
+    | 'M'
+    | 'm'
+    | 'Meta'
+    | 'N'
+    | 'n'
+    | 'NumLock'
+    | 'O'
+    | 'o'
+    | 'P'
+    | 'p'
+    | 'PageDown'
+    | 'PageUp'
+    | 'Pause'
+    | 'PrintScreen'
+    | 'Q'
+    | 'q'
+    | 'R'
+    | 'r'
+    | 'S'
+    | 's'
+    | 'ScrollLock'
+    | 'Shift'
+    | 'T'
+    | 't'
+    | 'Tab'
+    | 'U'
+    | 'u'
+    | 'V'
+    | 'v'
+    | 'W'
+    | 'w'
+    | 'X'
+    | 'x'
+    | 'Y'
+    | 'y'
+    | 'Z'
+    | 'z'
+    | "'";
+
+export type KeyboardEventCodeCustom = 'Ctrl+Option+Space';
+
+export type KeyboardEventCodeShift = `Shift+${KeyboardEventCodeBase}`;
+
+export type KeyboardEventCode = KeyboardEventCodeBase | KeyboardEventCodeCustom | KeyboardEventCodeShift;
+
+export type KeyboardEventCodeBase =
+    | 'AltLeft'
+    | 'AltRight'
+    | 'ArrowDown'
+    | 'ArrowLeft'
+    | 'ArrowRight'
+    | 'ArrowUp'
+    | 'AudioVolumeDown'
+    | 'AudioVolumeMute'
+    | 'AudioVolumeUp'
+    | 'Backquote'
+    | 'Backslash'
+    | 'Backspace'
+    | 'BracketLeft'
+    | 'BracketRight'
+    | 'CapsLock'
+    | 'Comma'
+    | 'ContextMenu'
+    | 'ControlLeft'
+    | 'ControlRight'
+    | 'Delete'
+    | 'Digit0'
+    | 'Digit1'
+    | 'Digit2'
+    | 'Digit3'
+    | 'Digit4'
+    | 'Digit5'
+    | 'Digit6'
+    | 'Digit7'
+    | 'Digit8'
+    | 'Digit9'
+    | 'End'
+    | 'Enter'
+    | 'Equal'
+    | 'Escape'
+    | 'F1'
+    | 'F2'
+    | 'F3'
+    | 'F4'
+    | 'F5'
+    | 'F6'
+    | 'F7'
+    | 'F8'
+    | 'F9'
+    | 'F10'
+    | 'F11'
+    | 'F12'
+    | 'Home'
+    | 'Insert'
+    | 'KeyA'
+    | 'KeyB'
+    | 'KeyC'
+    | 'KeyD'
+    | 'KeyE'
+    | 'KeyF'
+    | 'KeyG'
+    | 'KeyH'
+    | 'KeyI'
+    | 'KeyJ'
+    | 'KeyK'
+    | 'KeyL'
+    | 'KeyM'
+    | 'KeyN'
+    | 'KeyO'
+    | 'KeyP'
+    | 'KeyQ'
+    | 'KeyR'
+    | 'KeyS'
+    | 'KeyT'
+    | 'KeyU'
+    | 'KeyV'
+    | 'KeyW'
+    | 'KeyX'
+    | 'KeyY'
+    | 'KeyZ'
+    | 'MetaLeft'
+    | 'MetaRight'
+    | 'Minus'
+    | 'NumLock'
+    | 'Numpad0'
+    | 'Numpad1'
+    | 'Numpad2'
+    | 'Numpad3'
+    | 'Numpad4'
+    | 'Numpad5'
+    | 'Numpad6'
+    | 'Numpad7'
+    | 'Numpad8'
+    | 'Numpad9'
+    | 'NumpadAdd'
+    | 'NumpadDecimal'
+    | 'NumpadDivide'
+    | 'NumpadMultiply'
+    | 'NumpadSubtract'
+    | 'PageDown'
+    | 'PageUp'
+    | 'Pause'
+    | 'Period'
+    | 'PrintScreen'
+    | 'Quote'
+    | 'ScrollLock'
+    | 'Semicolon'
+    | 'ShiftLeft'
+    | 'ShiftRight'
+    | 'Slash'
+    | 'Space'
+    | 'Tab';
+
+export const EVENT_KEY: Record<KeyboardEventKey, KeyboardEventKey> = {
+    Backspace: 'Backspace',
+    Tab: 'Tab',
+    Enter: 'Enter',
+    Shift: 'Shift',
+    Control: 'Control',
+    Alt: 'Alt',
+    Pause: 'Pause',
+    CapsLock: 'CapsLock',
+    Escape: 'Escape',
+    ' ': ' ',
+    PageUp: 'PageUp',
+    PageDown: 'PageDown',
+    End: 'End',
+    Home: 'Home',
+    ArrowLeft: 'ArrowLeft',
+    ArrowUp: 'ArrowUp',
+    ArrowRight: 'ArrowRight',
+    ArrowDown: 'ArrowDown',
+    PrintScreen: 'PrintScreen',
+    Insert: 'Insert',
+    Delete: 'Delete',
+    '0': '0',
+    '1': '1',
+    '2': '2',
+    '3': '3',
+    '4': '4',
+    '5': '5',
+    '6': '6',
+    '7': '7',
+    '8': '8',
+    '9': '9',
+    A: 'A',
+    B: 'B',
+    C: 'C',
+    D: 'D',
+    E: 'E',
+    F: 'F',
+    G: 'G',
+    H: 'H',
+    I: 'I',
+    J: 'J',
+    K: 'K',
+    L: 'L',
+    M: 'M',
+    N: 'N',
+    O: 'O',
+    P: 'P',
+    Q: 'Q',
+    R: 'R',
+    S: 'S',
+    T: 'T',
+    U: 'U',
+    V: 'V',
+    W: 'W',
+    X: 'X',
+    Y: 'Y',
+    Z: 'Z',
+    a: 'a',
+    b: 'b',
+    c: 'c',
+    d: 'd',
+    e: 'e',
+    f: 'f',
+    g: 'g',
+    h: 'h',
+    i: 'i',
+    j: 'j',
+    k: 'k',
+    l: 'l',
+    m: 'm',
+    n: 'n',
+    o: 'o',
+    p: 'p',
+    q: 'q',
+    r: 'r',
+    s: 's',
+    t: 't',
+    u: 'u',
+    v: 'v',
+    w: 'w',
+    x: 'x',
+    y: 'y',
+    z: 'z',
+    Meta: 'Meta',
+    ContextMenu: 'ContextMenu',
+    AudioVolumeMute: 'AudioVolumeMute',
+    AudioVolumeDown: 'AudioVolumeDown',
+    AudioVolumeUp: 'AudioVolumeUp',
+    F1: 'F1',
+    F2: 'F2',
+    F3: 'F3',
+    F4: 'F4',
+    F5: 'F5',
+    F6: 'F6',
+    F7: 'F7',
+    F8: 'F8',
+    F9: 'F9',
+    F10: 'F10',
+    F11: 'F11',
+    F12: 'F12',
+    NumLock: 'NumLock',
+    ScrollLock: 'ScrollLock',
+    ';': ';',
+    '=': '=',
+    '': '',
+    '-': '-',
+    '.': '.',
+    '/': '/',
+    '`': '`',
+    '[': '[',
+    '\\': '\\',
+    ']': ']',
+    "'": "'",
+    '~': '~',
+    '!': '!',
+    '@': '@',
+    '#': '#',
+    $: '$',
+    '%': '%',
+    '^': '^',
+    '&': '&',
+    '*': '*',
+    '(': '(',
+    ')': ')',
+    _: '_',
+    '+': '+',
+    '{': '{',
+    '}': '}',
+    '|': '|',
+    ':': ':',
+    '"': '"',
+    '<': '<',
+    '>': '>',
+    '?': '?',
+} as const;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */