@bspk/ui-ngx 0.0.1

package/src/lib/icons/zoom-out.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'icon-zoom-out',
+    template: `<svg
+        [attr.width]="width"
+        data-bspk-name="ZoomOut"
+        data-type="material"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 -960 960 960">
+        <path
+            d="M320-540q-17 0-28.5-11.5T280-580q0-17 11.5-28.5T320-620h120q17 0 28.5 11.5T480-580q0 17-11.5 28.5T440-540H320Zm60 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
+    </svg>`,
+    styles: ['icon-zoom-out { display: contents; }'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class IconZoomOut {
+    @Input() width?: string;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/inline-alert/example.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IconAdd } from '../icons/add';
+import { UIInlineAlert } from './inline-alert';
+
+@Component({
+    selector: 'ui-badge-example',
+    standalone: true,
+    imports: [CommonModule, UIInlineAlert],
+    template: `
+        <h2>InlineAlert</h2>
+        <h3>Default</h3>
+        <ui-inline-alert [label]="'Default alert content'"></ui-inline-alert>
+        <h3>variant="informational"</h3>
+        <ui-inline-alert variant="informational" [label]="'Informational alert content'"></ui-inline-alert>
+        <h3>variant="success"</h3>
+        <ui-inline-alert variant="success" [label]="'Success alert content'"></ui-inline-alert>
+        <h3>variant="error"</h3>
+        <ui-inline-alert variant="error" [label]="'Error alert content'"></ui-inline-alert>
+        <h3>variant="warning"</h3>
+        <ui-inline-alert variant="warning" [label]="'Warning alert content'"></ui-inline-alert>
+        <h3>with id</h3>
+        <ui-inline-alert id="custom-inline-alert-id" [label]="'Alert content with custom id'"></ui-inline-alert>
+        <h3>with owner</h3>
+        <ui-inline-alert owner="CustomOwnerComponent" [label]="'Alert content with custom owner'"></ui-inline-alert>
+    `,
+})
+export class UIInlineAlertExample {
+    protected readonly iconAdd = IconAdd;
+}

package/src/lib/inline-alert/index.ts

@@ -0,0 +1 @@
+export * from './inline-alert';

package/src/lib/inline-alert/inline-alert.scss

@@ -0,0 +1,52 @@
+[data-bspk='inline-alert'] {
+    display: flex;
+    align-items: start;
+    justify-content: start;
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+
+    [data-txt] {
+        flex: 1;
+    }
+
+    &[data-variant='error'] {
+        color: var(--status-error);
+
+        --first-tone: var(--status-error);
+        --second-tone: var(--status-on-information);
+    }
+
+    &[data-variant='success'] {
+        color: var(--status-success);
+
+        --first-tone: var(--status-success);
+        --second-tone: var(--status-on-success);
+    }
+
+    &[data-variant='warning'] {
+        color: var(--foreground-neutral-on-surface);
+
+        --first-tone: var(--status-warning);
+        --second-tone: var(--status-on-warning);
+    }
+
+    &[data-variant='informational'] {
+        color: var(--status-information);
+
+        --first-tone: var(--status-information);
+        --second-tone: var(--status-on-information);
+    }
+
+    svg {
+        color: var(--first-tone);
+        width: var(--spacing-sizing-05);
+        height: var(--spacing-sizing-05);
+        flex: 0 0 auto;
+
+        [data-second-tone] {
+            fill: var(--second-tone);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/inline-alert/inline-alert.spec.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UIInlineAlert } from './inline-alert';
+
+@Component({
+    imports: [UIInlineAlert],
+    template: `<ui-inline-alert [label]="'Test alert content'"></ui-inline-alert>`,
+})
+class TestHostComponent {}
+
+describe('InlineAlert', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIInlineAlert],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
+});

package/src/lib/inline-alert/inline-alert.ts

@@ -0,0 +1,56 @@
+import { Component, input, ViewEncapsulation } from '@angular/core';
+import { AlertVariant } from '../../types/common';
+import { IconCheckCircleFill, IconErrorFill, IconInfoFill } from '../icons';
+import { UITxtDirective } from '../txt/txt.directive';
+import { UIWarningTwoTone } from './warning-two-tone';
+
+/**
+ * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible
+ * alert messages.
+ *
+ * @name InlineAlert
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-inline-alert',
+    imports: [IconCheckCircleFill, IconErrorFill, IconInfoFill, UITxtDirective, UIWarningTwoTone],
+    template: `@if (variant() === 'error') {
+            <icon-error-fill />
+        } @else if (variant() === 'informational') {
+            <icon-info-fill />
+        } @else if (variant() === 'success') {
+            <icon-check-circle-fill />
+        } @else if (variant() === 'warning') {
+            <ui-warning-two-tone />
+        }
+        <div ui-txt="body-small">
+            {{ label() }}
+        </div>`,
+    styleUrl: './inline-alert.scss',
+    host: {
+        'data-bspk': 'inline-alert',
+        role: 'alert',
+        '[attr.data-variant]': 'variant()',
+        '[attr.id]': 'id()',
+        '[attr.data-bspk-owner]': 'owner()',
+    },
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIInlineAlert {
+    /**
+     * The alert message content.
+     *
+     * @required
+     */
+    readonly label = input.required<string>();
+    /**
+     * The color variant of the inline alert.
+     *
+     * @default informational
+     */
+    readonly variant = input<AlertVariant>('informational');
+    /** The id of the inline alert. */
+    readonly id = input<string | null>(null);
+    /** Identifies the parent component. Helps with styling, debugging, and/or testing purposes. */
+    readonly owner = input<string | null>(null);
+}

package/src/lib/inline-alert/warning-two-tone.ts

@@ -0,0 +1,19 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'ui-warning-two-tone',
+    standalone: true,
+    template: `<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M2.72503 21C2.5417 21 2.37503 20.9542 2.22503 20.8625C2.07503 20.7708 1.95837 20.65 1.87503 20.5C1.7917 20.35 1.74587 20.1875 1.73753 20.0125C1.7292 19.8375 1.77503 19.6667 1.87503 19.5L11.125 3.5C11.225 3.33333 11.3542 3.20833 11.5125 3.125C11.6709 3.04167 11.8334 3 12 3C12.1667 3 12.3292 3.04167 12.4875 3.125C12.6459 3.20833 12.775 3.33333 12.875 3.5L22.125 19.5C22.225 19.6667 22.2709 19.8375 22.2625 20.0125C22.2542 20.1875 22.2084 20.35 22.125 20.5C22.0417 20.65 21.925 20.7708 21.775 20.8625C21.625 20.9542 21.4584 21 21.275 21H2.72503ZM12 18C12.2834 18 12.5209 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5209 16.0958 12.2834 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0959 16.4792 11 16.7167 11 17C11 17.2833 11.0959 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM12 15C12.2834 15 12.5209 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14V11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5209 10.0958 12.2834 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0959 10.4792 11 10.7167 11 11V14C11 14.2833 11.0959 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15Z"
+            fill="currentColor" />
+        <path
+            d="M12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125Z"
+            data-second-tone />
+        <path
+            d="M12.7125 14.7125C12.5208 14.9042 12.2833 15 12 15C11.7167 15 11.4792 14.9042 11.2875 14.7125C11.0958 14.5208 11 14.2833 11 14V11C11 10.7167 11.0958 10.4792 11.2875 10.2875C11.4792 10.0958 11.7167 10 12 10C12.2833 10 12.5208 10.0958 12.7125 10.2875C12.9042 10.4792 13 10.7167 13 11V14C13 14.2833 12.9042 14.5208 12.7125 14.7125Z"
+            data-second-tone />
+    </svg>`,
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIWarningTwoTone {}

package/src/lib/input/example.ts

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { UIInput } from './input';
+
+@Component({
+    selector: 'ui-input-example',
+    standalone: true,
+    imports: [CommonModule, UIInput],
+    template: `
+        <h2>Input</h2>
+
+        <h3>Default</h3>
+        <ui-input
+            [value]="values()['default']"
+            (valueChange)="update('default', $event)"
+            id="default-input"
+            name="default-input"
+            ariaLabel="Input Label" />
+        <p>The value of the default input is: {{ values()['default'] || 'null' }}</p>
+
+        <h3>Disabled</h3>
+        <ui-input name="disabled-input" ariaLabel="Input Label" [disabled]="true" />
+
+        <h3>Invalid</h3>
+        <ui-input name="invalid-input" ariaLabel="Input Label" [invalid]="true" />
+
+        <h3>Required</h3>
+        <ui-input name="required-input" ariaLabel="Input Label" [required]="true" />
+
+        <h3>Read Only</h3>
+        <ui-input name="read-only-input" ariaLabel="Input Label" [readOnly]="true" />
+
+        <h3>showClearButton = true</h3>
+        <ui-input name="show-clear-button-true" ariaLabel="Input Label" [showClearButton]="true" />
+
+        <h3>showClearButton = false</h3>
+        <ui-input name="show-clear-button-false" ariaLabel="Input Label" [showClearButton]="false" />
+
+        <h3>Placeholder</h3>
+        <ui-input name="placeholder-input" ariaLabel="Input Label" placeholder="I am placeholder copy" />
+
+        <h3>size = small</h3>
+        <ui-input name="size-small" ariaLabel="Input Label" size="small" />
+
+        <h3>size = medium</h3>
+        <ui-input name="size-medium" ariaLabel="Input Label" size="medium" />
+
+        <h3>size = large</h3>
+        <ui-input name="size-large" ariaLabel="Input Label" size="large" />
+
+        <h3>type: text</h3>
+        <ui-input name="type-text" ariaLabel="Input Label" type="text" />
+
+        <h3>type: number</h3>
+        <ui-input name="type-number" ariaLabel="Input Label" type="number" />
+
+        <h3>type: password</h3>
+        <ui-input name="type-password" ariaLabel="Input Label" type="password" />
+
+        <h3>leading</h3>
+        <ui-input name="leading-example" ariaLabel="Input Label" leading="$" />
+
+        <h3>trailing</h3>
+        <ui-input
+            [value]="values()['trailing-example']"
+            (valueChange)="update('trailing-example', $event)"
+            name="trailing-example"
+            ariaLabel="Input Label"
+            trailing="%" />
+    `,
+})
+export class UIInputExample {
+    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/index.ts

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

package/src/lib/input/input.scss

@@ -0,0 +1,133 @@
+[data-bspk='input'] {
+    --border-color: var(--stroke-neutral-base);
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--surface-neutral-t1-base);
+    border: solid 1px var(--border-color);
+    height: var(--field-height);
+    border-radius: var(--radius-sm);
+    padding: 0 var(--field-padding);
+    gap: var(--spacing-sizing-01);
+    width: 100%;
+
+    &[data-show-clear-button]:focus-within {
+        padding-right: 0;
+    }
+
+    & > * {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: var(--field-height);
+        font: var(--field-font);
+        color: var(--foreground-neutral-on-surface);
+        min-width: 0;
+    }
+
+    &:hover:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &:active:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-readonly] {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-disabled],
+    &:has([data-main-input][disabled]) {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        & > * {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    &[data-invalid] {
+        --border-color: var(--status-error);
+    }
+
+    &:not(:focus-within) {
+        [data-clear-button] {
+            display: none;
+        }
+    }
+
+    &:focus-within {
+        --border-color: var(--stroke-neutral-focus);
+
+        outline: 1px solid var(--stroke-neutral-focus);
+    }
+
+    &[data-size='small'] {
+        --field-padding: var(--spacing-sizing-02);
+        --field-height: var(--spacing-sizing-08);
+        --field-font: var(--body-small);
+        --field-icon-width: var(--spacing-sizing-04);
+        --field-clear-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='medium'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-10);
+        --field-font: var(--body-base);
+        --field-icon-width: var(--spacing-sizing-05);
+        --field-clear-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='large'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-12);
+        --field-font: var(--body-large);
+        --field-icon-width: var(--spacing-sizing-06);
+        --field-clear-width: var(--spacing-sizing-06);
+    }
+
+    [data-leading],
+    [data-trailing] {
+        position: relative;
+
+        svg {
+            width: var(--field-icon-width);
+        }
+    }
+
+    label {
+        font: var(--labels-small);
+        color: var(--foreground-neutral-on-surface-variant-01);
+    }
+
+    [data-main-input] {
+        flex: 1;
+        background-color: transparent !important;
+        border: none;
+        outline: none;
+        padding: 0;
+        pointer-events: all;
+        text-overflow: ellipsis;
+
+        &[type='number']::-webkit-inner-spin-button,
+        &[type='number']::-webkit-outer-spin-button {
+            display: none;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

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

package/src/lib/input/input.ts

@@ -0,0 +1,148 @@
+import { Component, computed, ElementRef, input, model, viewChild, ViewEncapsulation } from '@angular/core';
+import { AsInputSignal, ButtonSize, CommonProps, FieldControlProps } from '../../types/common';
+import { UIButton } from '../button/button';
+import { IconCancel } from '../icons/cancel';
+
+export type InputProps = CommonProps<'owner' | 'size'> &
+    FieldControlProps & {
+        /** The trailing element to display in the field. */
+        trailing?: string;
+        /** The leading element to display in the field. */
+        leading?: string;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /**
+         * The type of the input.
+         *
+         * @default text
+         */
+        type?: 'number' | 'password' | 'text';
+        /**
+         * Specifies if user agent has any permission to provide automated assistance in filling out form field values
+         *
+         * @default off
+         */
+        autoComplete?: 'off' | 'on';
+        /**
+         * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
+         *
+         * @default true
+         */
+        showClearButton?: boolean;
+    };
+
+/**
+ * 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
+ *     [value]="inputValue()"
+ *     (valueChange)="updateInput($event)"
+ *     id="default-input"
+ *     name="default-input"
+ *     ariaLabel="Input Label "/>
+ *
+ * @name Input
+ * @phase UXReview
+ */
+@Component({
+    selector: 'ui-input',
+    imports: [UIButton],
+    template: `<ng-content select="[data-leading]">
+            @if (leading()) {
+                <span data-leading>{{ leading() }}</span>
+            }
+        </ng-content>
+
+        <input
+            data-main-input
+            [attr.aria-labelledby]="ariaLabelledBy() || null"
+            [attr.aria-describedby]="ariaDescribedBy() || null"
+            [attr.ariaErrorMessage]="ariaErrorMessage() || null"
+            [attr.aria-label]="ariaLabel() || null"
+            [attr.aria-invalid]="invalid() || null"
+            [attr.data-invalid]="invalid() || null"
+            [disabled]="this.disabled()"
+            [attr.id]="id() || null"
+            [attr.placeholder]="placeholder() || null"
+            [attr.name]="name() || null"
+            [attr.autocomplete]="autoComplete() || null"
+            [readOnly]="readOnly() || null"
+            [required]="required() || null"
+            [type]="type()"
+            [value]="value() || ''"
+            (input)="handleInput($event)"
+            #inputEl />
+        <ng-content select="[data-trailing]">
+            @if (trailing()) {
+                <span data-trailing>{{ trailing() }}</span>
+            }
+        </ng-content>
+        @if (displayClearButton()) {
+            <ui-button
+                data-clear-button
+                label="Clear input"
+                variant="tertiary"
+                [size]="buttonSize()"
+                (click)="clearInput()"
+                [icon]="IconCancel"
+                [iconOnly]="true" />
+        }`,
+    styleUrl: './input.scss',
+    providers: [],
+    host: {
+        'data-bspk': 'input',
+        '[attr.data-size]': 'size()',
+        '[attr.data-invalid]': 'invalid() || null',
+        '[attr.data-show-clear-button]': 'displayClearButton() || null',
+    },
+    encapsulation: ViewEncapsulation.None,
+})
+export class UIInput implements AsInputSignal<InputProps> {
+    public IconCancel = IconCancel;
+
+    readonly inputEl = viewChild.required<ElementRef<HTMLInputElement>>('inputEl');
+
+    // this method to ensures the returned value is of type ButtonSize
+    readonly buttonSize = computed<ButtonSize>(() => {
+        const validSizes: ButtonSize[] = ['small', 'medium', 'large'];
+        const sizeValue = this.size();
+        return validSizes.includes(sizeValue as ButtonSize) ? (sizeValue as ButtonSize) : 'medium';
+    });
+
+    readonly value = model<InputProps['value']>('');
+    readonly name = input.required<InputProps['name']>();
+
+    readonly showClearButton = input<InputProps['showClearButton']>(true);
+    readonly disabled = input<InputProps['disabled']>(false);
+    readonly invalid = input<InputProps['invalid']>(false);
+    readonly placeholder = input<InputProps['placeholder']>(undefined);
+    readonly readOnly = input<InputProps['readOnly']>(false);
+    readonly required = input<InputProps['required']>(false);
+    readonly type = input<InputProps['type']>('text');
+    readonly size = input<InputProps['size']>('medium');
+    readonly leading = input<InputProps['leading']>(undefined);
+    readonly trailing = input<InputProps['trailing']>(undefined);
+    readonly autoComplete = input<InputProps['autoComplete']>(undefined);
+    readonly id = input<InputProps['id']>(undefined);
+    readonly owner = input<InputProps['owner']>(undefined);
+    readonly ariaLabel = input<InputProps['ariaLabel']>(undefined);
+
+    readonly ariaLabelledBy = input<InputProps['ariaLabelledBy']>(undefined);
+    readonly ariaDescribedBy = input<InputProps['ariaDescribedBy']>(undefined);
+    readonly ariaErrorMessage = input<InputProps['ariaErrorMessage']>(undefined);
+
+    readonly displayClearButton = computed<boolean>(() => {
+        return this.showClearButton() !== false && !this.readOnly() && !this.disabled() && !!this.value();
+    });
+
+    clearInput() {
+        this.value.set('');
+        this.inputEl().nativeElement.focus();
+    }
+
+    handleInput(event: Event) {
+        this.value.set((event.target as HTMLInputElement).value);
+    }
+}