@bspk/ui-ngx 0.0.1 → 0.0.2

package/src/types/common.ts

@@ -1,252 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,388 +0,0 @@
-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 */