@bspk/ui-ngx 0.0.1 → 0.0.2

package/src/lib/input-field/example.ts

@@ -1,87 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
-import { UIInputField } from './input-field';
-
-@Component({
-    selector: 'ui-input-example',
-    standalone: true,
-    imports: [CommonModule, UIInputField],
-    template: `
-        <h2>Input Field</h2>
-
-        <h3>Default</h3>
-        <ui-input-field
-            [value]="values()['default']"
-            (valueChange)="update('default', $event)"
-            id="default-input"
-            name="default-input"
-            label="Input Label"
-            helperText="The value of the default input is: {{ values()['default'] || 'null' }}" />
-
-        <h3>Disabled</h3>
-        <ui-input-field name="disabled-input" label="Input Label" [disabled]="true" />
-
-        <h3>Invalid</h3>
-        <ui-input-field name="invalid-input" label="Input Label" [invalid]="true" />
-
-        <h3>Required</h3>
-        <ui-input-field name="required-input" label="Input Label" [required]="true" />
-
-        <h3>Read Only</h3>
-        <ui-input-field name="read-only-input" label="Input Label" [readOnly]="true" />
-
-        <h3>showClearButton = true</h3>
-        <ui-input-field name="show-clear-button-true" label="Input Label" [showClearButton]="true" />
-
-        <h3>showClearButton = false</h3>
-        <ui-input-field name="show-clear-button-false" label="Input Label" [showClearButton]="false" />
-
-        <h3>Placeholder</h3>
-        <ui-input-field name="placeholder-input" label="Input Label" placeholder="I am placeholder copy" />
-
-        <h3>size = small</h3>
-        <ui-input-field name="size-small" label="Input Label" size="small" />
-
-        <h3>size = medium</h3>
-        <ui-input-field name="size-medium" label="Input Label" size="medium" />
-
-        <h3>size = large</h3>
-        <ui-input-field name="size-large" label="Input Label" size="large" />
-
-        <h3>type: text</h3>
-        <ui-input-field name="type-text" label="Input Label" type="text" />
-
-        <h3>type: number</h3>
-        <ui-input-field name="type-number" label="Input Label" type="number" />
-
-        <h3>type: password</h3>
-        <ui-input-field name="type-password" label="Input Label" type="password" />
-
-        <h3>leading</h3>
-        <ui-input-field name="leading-example" label="Input Label" leading="$" />
-
-        <h3>trailing</h3>
-        <ui-input-field
-            ariaLabel="Input Label"
-            [value]="values()['trailing-example']"
-            (valueChange)="update('trailing-example', $event)"
-            name="trailing-example"
-            label="Input Label"
-            trailing="%" />
-    `,
-})
-export class UIInputFieldExample {
-    readonly values = signal<Record<string, string | undefined>>({
-        default: 'Default value example',
-        'value-example': 'I am an example value',
-    });
-
-    readonly defaultValue = signal<string | undefined>('Default value example');
-
-    update = (key: string, next: string | undefined) => {
-        this.values.update((current) => ({
-            ...current,
-            [key]: next,
-        }));
-    };
-}

package/src/lib/input-field/index.ts

@@ -1 +0,0 @@
-export * from './input-field';

package/src/lib/input-field/input-field.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UIInputField } from './input-field';
-
-describe('UIInputField', () => {
-    let fixture: ComponentFixture<UIInputField>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIInputField],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UIInputField);
-        fixture.componentRef.setInput('name', 'test-input');
-        fixture.componentRef.setInput('label', 'Test Input');
-
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/input-field/input-field.ts

@@ -1,85 +0,0 @@
-import { Component, computed, input, output, ViewEncapsulation } from '@angular/core';
-import { AsInputSignal } from '../../types/common';
-import { uniqueId } from '../../utils/random';
-import { FieldProps, UIField, describedById, errorMessageId, labelledById } from '../field';
-import { UIInput } from '../input';
-
-/**
- * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
- * intended to be used directly but rather through the Input, and other components.
- *
- * @example
- *     <ui-input-field
- *     [value]="inputValue()"
- *     (valueChange)="updateInput($event)"
- *     id="default-input"
- *     name="default-input"
- *     label="Input Label "/>
- *
- * @name InputField
- * @phase UXReview
- */
-@Component({
-    selector: 'ui-input-field',
-    standalone: true,
-    imports: [UIField, UIInput],
-    template: `
-        <ui-field
-            [errorMessage]="errorMessage()"
-            [label]="label()"
-            [helperText]="helperText()"
-            [labelTrailing]="labelTrailing()"
-            [controlId]="controlId()"
-            [style]="style()"
-            [required]="required()">
-            <ui-input
-                [ariaLabelledBy]="labelledById()"
-                [ariaDescribedBy]="describedById()"
-                [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
-                [ariaLabel]="ariaLabel()"
-                [autoComplete]="autoComplete()"
-                [disabled]="disabled()"
-                [id]="controlId()"
-                [invalid]="invalid()"
-                [leading]="leading()"
-                [name]="name()"
-                [owner]="'input-field'"
-                [placeholder]="placeholder()"
-                [placeholder]="placeholder()"
-                [readOnly]="readOnly()"
-                [value]="value()"
-                [required]="required()"
-                [showClearButton]="showClearButton()"
-                [size]="size()"
-                [trailing]="trailing()"
-                [type]="type()" />
-        </ui-field>
-    `,
-    host: {
-        'data-bspk': 'input-field',
-        '[id]': 'controlId()+"-field"',
-    },
-    styleUrl: '../field/field.scss',
-    encapsulation: ViewEncapsulation.None,
-})
-export class UIInputField extends UIInput implements AsInputSignal<Omit<FieldProps, 'controlId' | 'label'>> {
-    readonly valueChange = output<string | undefined>();
-
-    readonly errorMessage = input<string | undefined>(undefined);
-    readonly label = input.required<string>();
-    readonly helperText = input<string | undefined>(undefined);
-    readonly labelTrailing = input<string | undefined>(undefined);
-    readonly style = input<string | undefined>(undefined);
-
-    readonly labelledById = computed(() => labelledById(this.controlId()));
-
-    readonly describedById = computed(
-        () => this.ariaDescribedBy() || (this.helperText() && describedById(this.controlId())) || undefined,
-    );
-    readonly errorMessageId = computed(
-        () => this.ariaErrorMessage() || (this.errorMessage() && errorMessageId(this.controlId())) || undefined,
-    );
-
-    readonly controlId = computed(() => this.id() || uniqueId('input-field-'));
-}

package/src/lib/key-navigation/example.ts

@@ -1,52 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { UIListItem } from '../list-item';
-import { KeyNavigationUtilityProps, UIKeyNavigationDirective } from './';
-
-@Component({
-    selector: 'ui-outside-click-example',
-    standalone: true,
-    imports: [CommonModule, UIKeyNavigationDirective, UIListItem],
-    template: `
-        <h2>Key Navigation (Directive)</h2>
-
-        <h3>Single Button with Key Navigation</h3>
-        <p>Click on an item below then use arrow keys to navigate between items in the menu.</p>
-        <ui-menu [tabIndex]="0" [ui-key-navigation]="keyNavigationProps">
-            @for (item of items; track item.id) {
-                <ui-list-item
-                    (onClick)="clickListItem(item)"
-                    [label]="item.label"
-                    [id]="item.id"
-                    [active]="item.id === activeElementId()"
-                    [tabIndex]="-1" />
-            }
-        </ui-menu>
-    `,
-})
-export class UIKeyNavigationExample {
-    items = [
-        { label: 'Item 1', id: 'item-1' },
-        { label: 'Item 2', id: 'item-2' },
-        { label: 'Item 3', id: 'item-3' },
-        { label: 'Item 4', id: 'item-4' },
-        { label: 'Item 5', id: 'item-5' },
-        { label: 'Item 6', id: 'item-6' },
-    ];
-
-    readonly activeElementId = signal<string | null>(null);
-
-    keyNavigationProps: KeyNavigationUtilityProps = {
-        activeElementId: this.activeElementId(),
-        ids: this.items.map((i) => i.id),
-        callback: ({ activeElementId }) => {
-            this.activeElementId.set(activeElementId);
-            return true;
-        },
-    };
-
-    clickListItem(item: { id: string; label: string }) {
-        sendSnackbar(`Clicked on ${item.label}`);
-    }
-}

package/src/lib/key-navigation/index.ts

@@ -1,2 +0,0 @@
-export * from './key-navigation';
-export * from './key-navigation.directive';

package/src/lib/key-navigation/key-navigation.directive.ts

@@ -1,39 +0,0 @@
-import { Directive, input, AfterViewInit, inject, ElementRef, OnDestroy } from '@angular/core';
-import { KeyNavigationUtility, KeyNavigationUtilityProps } from './key-navigation';
-
-/**
- * A directive to enable key navigation on an element.
- *
- * @name UIKeyNavigationDirective
- * @phase Utility
- */
-@Directive({
-    selector: '[ui-key-navigation]',
-    host: {
-        '(keydown)': 'handleKeydown($event)',
-    },
-})
-export class UIKeyNavigationDirective implements AfterViewInit, OnDestroy {
-    host = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);
-
-    readonly props = input<KeyNavigationUtilityProps>(
-        {
-            activeElementId: null,
-        },
-        { alias: 'ui-key-navigation' },
-    );
-
-    private keyNavigation = new KeyNavigationUtility();
-
-    handleKeydown(event: KeyboardEvent) {
-        this.keyNavigation.handleKeydown(event);
-    }
-
-    ngAfterViewInit(): void {
-        this.keyNavigation.init(this.props());
-    }
-
-    ngOnDestroy(): void {
-        this.keyNavigation.destroy();
-    }
-}

package/src/lib/key-navigation/key-navigation.ts

@@ -1,165 +0,0 @@
-import { computed, effect, signal } from '@angular/core';
-import { UtilityBase } from '../../types/common';
-import { KeyboardEventCode } from '../../utils/keyboard';
-import { keydownHandler, KeysCallback } from '../../utils/keydown-handler';
-
-export type ArrowKeyNames = Extract<KeyboardEventCode, `Arrow${string}`>;
-
-const ARROW_KEYS: ArrowKeyNames[] = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-
-const DEFAULT_INCREMENTS: Record<ArrowKeyNames, number> = {
-    ArrowLeft: -1,
-    ArrowRight: 1,
-    ArrowUp: -1,
-    ArrowDown: 1,
-};
-
-export interface KeyNavigationUtilityProps {
-    /**
-     * An array of string IDs representing the navigable elements. These IDs should correspond to the `id` attributes of
-     * the elements in the DOM. Ensure the elements are not disabled.
-     */
-    ids?: string[];
-    /**
-     * An optional callback function that is invoked when an arrow key is pressed. This function receives the key name,
-     * the keyboard event, and the next active element ID. If the function returns `true`, the default navigation
-     * behavior is prevented; if it returns `false` or is not provided, the default behavior proceeds.
-     */
-    callback?: (params: ArrowKeyNavigationCallbackParams) => boolean;
-    /** Optional configuration to set navigation direction increments. */
-    increments?: Record<ArrowKeyNames, number>;
-    /**
-     * The ID of the element that should be active by default. If not provided, the first ID in the `ids` array will be
-     * used.
-     */
-    defaultActiveId?: string;
-    /** The ID of the currently active element. */
-    activeElementId: string | null;
-}
-
-export type ArrowKeyNavigationCallbackParams = Pick<KeyNavigationUtilityProps, 'activeElementId'> & {
-    increment: number;
-    key: ArrowKeyNames;
-    event: KeyboardEvent;
-};
-
-/**
- * A hook to manage arrow key navigation for a list of elements.
- *
- * Should be used in components that require keyboard navigation via arrow keys.
- */
-export class KeyNavigationUtility implements UtilityBase<KeyNavigationUtilityProps> {
-    readonly props = signal<KeyNavigationUtilityProps>({
-        ids: [],
-        activeElementId: null,
-        defaultActiveId: undefined,
-        increments: DEFAULT_INCREMENTS,
-        callback: undefined,
-    });
-
-    readonly arrowKeyCallbacks = computed(() => {
-        return Object.fromEntries(
-            ARROW_KEYS.map((key) => [
-                key,
-                (event: KeyboardEvent) => {
-                    const { ids, increments, callback, activeElementId } = this.props();
-
-                    if (!ids || !increments) return;
-
-                    let nextIndex = 0;
-                    let currentIndex = 0;
-                    let nextId = ids[nextIndex];
-                    const increment = increments[key];
-
-                    if (activeElementId) {
-                        currentIndex = ids.indexOf(activeElementId);
-                        nextIndex = (currentIndex + increment + ids.length) % ids.length;
-                        nextId = ids[nextIndex];
-                    }
-
-                    if (
-                        typeof callback === 'function' &&
-                        callback({ key, event, activeElementId: nextId, increment }) === false
-                    )
-                        return;
-                    event.preventDefault();
-                    this.setActiveElementId(nextId);
-                },
-            ]),
-        ) as KeysCallback;
-    });
-
-    constructor() {
-        effect(() => {
-            const { ids, activeElementId } = this.props();
-
-            // If the active element is not in the list, reset the first ID as active
-            if (ids && activeElementId && !ids.includes(activeElementId)) {
-                this.setActiveElementId(ids[0] || null);
-            }
-        });
-    }
-
-    get activeElementId() {
-        return this.props().activeElementId;
-    }
-
-    get activeElement(): HTMLElement | null {
-        return (this.activeElementId && document.querySelector(`[id="${this.activeElementId}"]`)) || null;
-    }
-
-    /**
-     * Cleans up the utility by resetting its properties.
-     *
-     * Should be called in ngOnDestroy.
-     */
-    destroy() {
-        this.props.set({
-            ids: [],
-            activeElementId: null,
-            defaultActiveId: undefined,
-            callback: undefined,
-        });
-    }
-
-    setActiveElementId(id: string | null) {
-        this.updateProps({ activeElementId: id });
-
-        if (id)
-            document.querySelector(`[id="${id}"]`)?.scrollIntoView({
-                block: 'nearest',
-                behavior: 'smooth',
-                inline: 'nearest',
-            });
-    }
-
-    updateProps(props: Partial<KeyNavigationUtilityProps>) {
-        this.props.set({
-            ...this.props(),
-            ...props,
-        });
-    }
-
-    /**
-     * Initializes the key navigation utility with the provided properties.
-     *
-     * Should be called in ngAfterViewInit.
-     */
-    init(props: Partial<KeyNavigationUtilityProps>) {
-        this.updateProps(props);
-    }
-
-    /**
-     * Handles keyboard events for arrow key navigation.
-     *
-     * Should be called within a keyboard event listener.
-     *
-     * Additional callbacks for specific keys can be provided via the `callbacks` parameter.
-     */
-    handleKeydown(event: KeyboardEvent, callbacks?: KeysCallback) {
-        keydownHandler([this.arrowKeyCallbacks(), callbacks || {}], {
-            preventDefault: true,
-            stopPropagation: true,
-        })(event);
-    }
-}

package/src/lib/link/example.ts

@@ -1,77 +0,0 @@
-import { Component } from '@angular/core';
-import { UITxtDirective } from '../txt';
-import { LinkProps, UILinkDirective } from './link.directive';
-
-@Component({
-    selector: 'ui-link-example',
-    standalone: true,
-    imports: [UILinkDirective, UITxtDirective],
-    template: `
-        <h2>Link</h2>
-
-        <h3>Sizes</h3>
-        <p>
-            <a ui-link href="#" size="small">Small Link</a>
-        </p>
-        <p>
-            <a ui-link href="#" size="base">Base Link</a>
-        </p>
-        <p>
-            <a ui-link href="#" size="large">Large Link</a>
-        </p>
-
-        <h3>With External Icon</h3>
-        <a ui-link href="https://anywhere.re" trailingIcon="external">External Link</a>
-
-        <h3>With Chevron Icon</h3>
-        <a ui-link href="#" trailingIcon="chevron">Chevron Link</a>
-
-        <h3>With Link Icon</h3>
-        <a ui-link href="#" trailingIcon="link">Link Icon</a>
-
-        <h3>Variants</h3>
-        <div data-links-grid>
-            <div></div>
-            <span ui-txt="labels-large">Default</span>
-            <span ui-txt="labels-large">Hover</span>
-            <span ui-txt="labels-large">Active</span>
-            <span ui-txt="labels-large">Disabled</span>
-            <span ui-txt="labels-large">Visited</span>
-            <span ui-txt="labels-large">Focus</span>
-            @for (kind of this.kinds; track kind) {
-                <div ui-txt="labels-large">{{ kind }}</div>
-                @for (state of ['default', 'hover', 'active', 'disabled', 'visited', 'focus']; track state) {
-                    <div [attr.data-kind]="kind">
-                        @if (state === 'disabled') {
-                            <a
-                                ui-link
-                                href="https://bspk.dev/fake-link/{{ kind }}+{{ state }}"
-                                [variant]="kind"
-                                [disabled]="true"
-                                >Link</a
-                            >
-                        } @else {
-                            <a
-                                ui-link
-                                href="https://bspk.dev/fake-link/{{ kind }}+{{ state }}"
-                                [variant]="kind"
-                                [attr.data-pseudo]="state !== 'default' ? state : null">
-                                Link
-                            </a>
-                        }
-                    </div>
-                }
-            }
-        </div>
-
-        <h3>Without directive</h3>
-        <a href="https://bspk.dev">Default Link</a>
-        <p>
-            Anchor tags without the <code>ui-link</code> directive will have the link styles applied if the body has the
-            <code>data-bspk</code> attribute and the anchor itself does not have the <code>data-bspk</code> attribute.
-        </p>
-    `,
-})
-export class UILinkExample {
-    kinds: Exclude<LinkProps['variant'], undefined>[] = ['default', 'subtle', 'subtle-inverse'];
-}

package/src/lib/link/index.ts

@@ -1 +0,0 @@
-export * from './link.directive';

package/src/lib/link/link.directive.ts

@@ -1,141 +0,0 @@
-import {
-    Directive,
-    ElementRef,
-    Renderer2,
-    inject,
-    input,
-    OnDestroy,
-    effect,
-    EffectRef,
-    ViewContainerRef,
-    EnvironmentInjector,
-} from '@angular/core';
-import { AsInputSignal } from '../../types/common';
-
-export interface LinkProps {
-    /** The variant of the link. Controls the icon that is displayed and link target. */
-    trailingIcon?: 'chevron' | 'external' | 'link';
-    /**
-     * The href of the link.
-     *
-     * @example
-     *     https://bspk.dev
-     */
-    href: string | null | undefined;
-    /**
-     * The size of the link.
-     *
-     * @default base
-     */
-    size?: 'base' | 'large' | 'small';
-    /**
-     * Change the color of the link to a subtle color. This is useful for links that are not primary actions, for
-     * example footer menus.
-     *
-     * @default default
-     */
-    variant?: 'default' | 'subtle-inverse' | 'subtle';
-    /**
-     * The target of the link. If the `trailingIcon` is set to `external`, this will default to `_blank`.
-     *
-     * @default _self
-     */
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    /** Determines if the element is disabled. */
-    disabled?: boolean;
-}
-
-/**
- * This is the standalone link directive. Apply to an `a` element.
- *
- * @example
- *     <a ui-link href="https://anywhere.re" [label]="'Example label'" trailingIcon="external"></a>
- *
- * @name Link
- * @phase Stable
- */
-@Directive({
-    selector: 'a[ui-link]',
-})
-export class UILinkDirective implements AsInputSignal<LinkProps>, OnDestroy {
-    readonly trailingIcon = input<LinkProps['trailingIcon']>();
-    readonly href = input<LinkProps['href']>();
-    readonly size = input<LinkProps['size']>('base');
-    readonly variant = input<LinkProps['variant']>('default');
-    readonly target = input<LinkProps['target']>('_self');
-    readonly disabled = input<LinkProps['disabled']>(false);
-
-    private readonly host = inject<ElementRef<HTMLAnchorElement>>(ElementRef);
-    private readonly renderer = inject(Renderer2);
-    private env = inject(EnvironmentInjector);
-
-    private labelSpan: HTMLSpanElement | null = null;
-    private teardown: EffectRef | null = null;
-
-    constructor(private viewContainerRef: ViewContainerRef) {
-        this.teardown = effect(async () => {
-            const el = this.host.nativeElement;
-
-            // Set base attributes
-            this.renderer.setAttribute(el, 'data-bspk', 'link');
-            this.renderer.setAttribute(el, 'data-size', this.size() || 'base');
-            this.renderer.setAttribute(el, 'data-trailing-icon', this.trailingIcon() || '');
-
-            // Subtle variants
-            const v = this.variant();
-            if (v === 'subtle') {
-                this.renderer.setAttribute(el, 'data-subtle', 'true');
-                this.renderer.removeAttribute(el, 'data-subtle-inverse');
-            } else if (v === 'subtle-inverse') {
-                this.renderer.setAttribute(el, 'data-subtle-inverse', 'true');
-                this.renderer.removeAttribute(el, 'data-subtle');
-            } else {
-                this.renderer.removeAttribute(el, 'data-subtle');
-                this.renderer.removeAttribute(el, 'data-subtle-inverse');
-            }
-
-            // href, disabled, target
-            const hrefVal = this.href();
-            if (hrefVal) this.renderer.setAttribute(el, 'href', hrefVal);
-            else this.renderer.removeAttribute(el, 'href');
-
-            const disabledVal = this.disabled();
-            if (disabledVal) this.renderer.setAttribute(el, 'disabled', 'true');
-            else this.renderer.removeAttribute(el, 'disabled');
-
-            const tIcon = this.trailingIcon();
-            const tgt = tIcon === 'external' ? '_blank' : this.target() || '_self';
-            this.renderer.setAttribute(el, 'target', tgt);
-
-            // wrap text content in span
-            if (!this.labelSpan) {
-                const span = this.renderer.createElement('span') as HTMLSpanElement;
-                span.textContent = el.textContent;
-                this.renderer.setProperty(el, 'textContent', '');
-                this.renderer.appendChild(el, span);
-                this.labelSpan = span;
-            }
-
-            const iconComponent = await this.iconComponent();
-            if (iconComponent) {
-                const icon = this.viewContainerRef.createComponent(iconComponent);
-                this.renderer.appendChild(el, icon.location.nativeElement);
-            }
-        });
-    }
-
-    iconComponent() {
-        const tIcon = this.trailingIcon();
-        if (tIcon === 'external') return import('../icons/open-in-new').then((m) => m.IconOpenInNew);
-        if (tIcon === 'chevron') return import('../icons/chevron-right').then((m) => m.IconChevronRight);
-        if (tIcon === 'link') return import('../icons/link').then((m) => m.IconLink);
-        return null;
-    }
-
-    ngOnDestroy(): void {
-        if (this.teardown) this.teardown.destroy();
-        this.labelSpan = null;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */