@bspk/ui-ngx 0.0.1 → 0.0.2

package/src/lib/card/card.ts

@@ -1,42 +0,0 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-
-export type CardVariant = 'elevated' | 'outlined';
-
-/**
- * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
- * elements.
- *
- * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
- * details.
- *
- * @example
- *     import { Card } from '@bspk/ui/card';
- *
- *     <Card variant="elevated" style={{ padding: 'var(--spacing-sizing-04)', maxWidth: '100%', width: '400px' }}>
- *     <h3>Card Title</h3>
- *     <p>This is some content inside the card.</p>
- *     </Card>;
- *
- * @name Card
- * @phase Dev
- */
-@Component({
-    selector: 'ui-card',
-    standalone: true,
-    imports: [],
-    template: `<ng-content></ng-content>`,
-    styleUrl: './card.scss',
-    host: {
-        'data-bspk': 'card',
-        '[attr.data-variant]': 'variant()',
-    },
-    encapsulation: ViewEncapsulation.None,
-})
-export class UICard {
-    /**
-     * Determines how the card border will appear.
-     *
-     * @default elevated
-     */
-    readonly variant = input<CardVariant>('elevated');
-}

package/src/lib/card/example.ts

@@ -1,37 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UICard } from './card';
-
-@Component({
-    selector: 'ui-card-example',
-    standalone: true,
-    imports: [CommonModule, UICard],
-    template: `
-        <h2>Card</h2>
-
-        <h3>Default</h3>
-
-        <div style="width: 300px">
-            <ui-card>
-                <p>Card works! <br />no props set</p>
-            </ui-card>
-        </div>
-
-        <h3>Outlined Variant</h3>
-
-        <div style="width: 300px">
-            <ui-card variant="outlined">
-                <p>Card works! <br />(variant="outlined")</p>
-            </ui-card>
-        </div>
-
-        <h3>Elevated Variant</h3>
-
-        <div style="width: 300px">
-            <ui-card variant="elevated">
-                <p>Card works! <br />(variant="elevated")</p>
-            </ui-card>
-        </div>
-    `,
-})
-export class UICardExample {}

package/src/lib/card/index.ts

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

package/src/lib/checkbox/checkbox.scss

@@ -1,91 +0,0 @@
-[data-bspk='checkbox'] {
-    display: block;
-    position: relative;
-    width: var(--spacing-sizing-06);
-    aspect-ratio: 1/1;
-    padding: 2px;
-
-    input[type='checkbox'] {
-        position: absolute;
-        opacity: 0;
-        z-index: 2;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-    }
-
-    span {
-        --stroke: var(--stroke-neutral-base);
-        --inner: none;
-        --background: none;
-        --color: var(--foreground-brand-on-primary);
-
-        display: flex;
-        width: 20px;
-        aspect-ratio: 1/1;
-        cursor: pointer;
-        border-radius: 2px;
-        border: 2px solid var(--stroke);
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        position: relative;
-        background: var(--background);
-
-        svg[data-checked] {
-            width: 14px;
-        }
-
-        svg[data-indeterminate] {
-            width: 12px;
-        }
-
-        color: var(--color);
-    }
-
-    input[type='checkbox']:not(:checked, :indeterminate, [disabled], [readOnly]) {
-        &:hover + span {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
-
-        &:active + span {
-            background-color: var(--interactions-neutral-press-opacity);
-        }
-    }
-
-    input[type='checkbox']:checked + span,
-    input[type='checkbox']:indeterminate + span {
-        --stroke: var(--stroke-brand-primary);
-        --background: var(--surface-brand-primary);
-    }
-
-    input[type='checkbox'][disabled],
-    input[type='checkbox'][readOnly] {
-        cursor: not-allowed;
-
-        & + span {
-            --stroke: var(--stroke-neutral-interactions-disabled-light);
-        }
-
-        &:is(:checked, :indeterminate) + span {
-            --stroke: transparent;
-            --background: var(--interactions-disabled-opacity);
-            --color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    input[type='checkbox'][aria-invalid]:not([disabled], [readOnly]) {
-        &:checked + span,
-        &:indeterminate + span {
-            --background: var(--status-error);
-        }
-
-        & + span {
-            --stroke: var(--status-error);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/checkbox/checkbox.spec.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UICheckbox } from './checkbox';
-
-@Component({
-    template: `<ui-checkbox label="Test Label" name="test-name" value="test-value" ariaLabel="Test label" />`,
-    standalone: true,
-    imports: [UICheckbox],
-})
-class TestHostComponent {}
-
-describe('UICheckbox', () => {
-    let fixture: ComponentFixture<TestHostComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [TestHostComponent],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(TestHostComponent);
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(fixture.componentInstance).toBeTruthy();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/checkbox/checkbox.ts

@@ -1,126 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation,
-    input,
-    booleanAttribute,
-    ElementRef,
-    output,
-    viewChild,
-    effect,
-} from '@angular/core';
-import { uniqueId } from '../../utils/random';
-
-/**
- * A control that allows users to choose one or more items from a list or turn a feature on or off. This is the base
- * element and if used directly you must wrap it with a label. More often used in CheckboxOption or CheckboxGroup.
- *
- * @example
- *     <label>
- *     <ui-checkbox
- *     [checked]="checked"
- *     [indeterminate]="indeterminate"
- *     [id]="'sample-checkbox'"
- *     [name]="'sample-checkbox'"
- *     (checkedChange)="checked = $event"
- *     [value]="'sample'"
- *     aria-label="Sample"
- *     />
- *     Checkbox Label
- *     </label>
- *
- * @element
- * @name Checkbox
- * @phase Dev
- */
-@Component({
-    selector: 'ui-checkbox',
-    standalone: true,
-    template: `
-        <input
-            [attr.aria-describedby]="ariaDescribedBy() || undefined"
-            [attr.aria-errormessage]="ariaErrorMessage() || undefined"
-            [attr.aria-invalid]="invalid() || undefined"
-            [attr.aria-label]="ariaLabel()"
-            [checked]="checked()"
-            [attr.data-indeterminate]="indeterminate() || undefined"
-            [disabled]="disabled()"
-            [id]="id()"
-            [name]="name()"
-            [required]="required()"
-            [value]="value()"
-            type="checkbox"
-            (change)="onInputChange()"
-            #input />
-        <span aria-hidden="true">
-            @if (indeterminate()) {
-                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
-                        fill="currentColor" />
-                </svg>
-            } @else if (checked()) {
-                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
-                        fill="currentColor" />
-                </svg>
-            }
-        </span>
-    `,
-    styleUrl: './checkbox.scss',
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'checkbox',
-    },
-})
-export class UICheckbox {
-    /** Emits the new checked state (true or false) */
-    checkedChange = output<boolean>();
-
-    /** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) of the control. */
-    readonly name = input.required<string>();
-
-    /** The value of the field control. */
-    readonly value = input<string | undefined>(undefined);
-
-    /** The aria-label for the element. */
-    readonly ariaLabel = input<string | undefined>(undefined);
-
-    /** The id of the element. If not provided one will be generated. */
-    readonly id = input<string>(uniqueId('checkbox'));
-
-    /** Marks the checkbox as checked. @default false */
-    readonly checked = input(false, { transform: booleanAttribute });
-
-    /** If the checkbox is indeterminate. @default false */
-    readonly indeterminate = input(false, { transform: booleanAttribute });
-
-    /** Determines if the element is disabled. @default false */
-    readonly disabled = input(false, { transform: booleanAttribute });
-
-    /** Indicates that the element is in an invalid state. @default false */
-    readonly invalid = input(false, { transform: booleanAttribute });
-
-    /** Determines if the element is required. @default false */
-    readonly required = input(false, { transform: booleanAttribute });
-
-    /** The `aria-describedby` attribute for the checkbox. */
-    readonly ariaDescribedBy = input<string | undefined>(undefined);
-
-    /** The `aria-errormessage` attribute for the checkbox. */
-    readonly ariaErrorMessage = input<string | undefined>(undefined);
-
-    private readonly inputEl = viewChild.required<ElementRef<HTMLInputElement>>('input');
-
-    constructor() {
-        effect(() => {
-            // Update indeterminate property on the native input
-            const nativeInput: HTMLInputElement | null = this.inputEl().nativeElement;
-            if (nativeInput) nativeInput.indeterminate = this.indeterminate();
-        });
-    }
-
-    onInputChange() {
-        this.checkedChange.emit(this.inputEl().nativeElement.checked);
-    }
-}

package/src/lib/checkbox/example.ts

@@ -1,185 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { UICheckbox } from './checkbox';
-
-@Component({
-    selector: 'ui-checkbox-example',
-    standalone: true,
-    imports: [CommonModule, UICheckbox],
-    template: `
-        <h2>Checkbox</h2>
-
-        <h3>Basic with id</h3>
-        <ui-checkbox
-            id="test-id"
-            name="checkbox-0"
-            ariaLabel="Option 0"
-            value="Option 0"
-            [checked]="checked['checkbox-0']"
-            (checkedChange)="setChecked('checkbox-0', $event)" />
-
-        <h3>checked = {{ checked['checkbox-1'] }}</h3>
-        <ui-checkbox
-            name="checkbox-1"
-            ariaLabel="Option 1"
-            value="Option 1"
-            [checked]="checked['checkbox-1']"
-            (checkedChange)="setChecked('checkbox-1', $event)" />
-
-        <h3>checked = {{ checked['checkbox-2'] }}</h3>
-        <ui-checkbox
-            name="checkbox-2"
-            ariaLabel="Option 2"
-            value="Option 2"
-            [checked]="checked['checkbox-2']"
-            (checkedChange)="setChecked('checkbox-2', $event)" />
-
-        <h3>checked = {{ checked['checkbox-3'] }}, disabled = true</h3>
-        <ui-checkbox
-            name="checkbox-3"
-            ariaLabel="Option 3"
-            value="Option 3"
-            [disabled]="true"
-            [checked]="checked['checkbox-3']"
-            (checkedChange)="setChecked('checkbox-3', $event)" />
-
-        <h3>checked = {{ checked['checkbox-4'] }}, disabled = true</h3>
-        <ui-checkbox
-            name="checkbox-4"
-            ariaLabel="Option 4"
-            value="Option 4"
-            [disabled]="true"
-            [checked]="checked['checkbox-4']"
-            (checkedChange)="setChecked('checkbox-4', $event)" />
-
-        <h3>checked = {{ checked['checkbox-5'] }}, invalid = true</h3>
-        <ui-checkbox
-            name="checkbox-5"
-            ariaLabel="Option 5"
-            value="Option 5"
-            [invalid]="true"
-            [checked]="checked['checkbox-5']"
-            (checkedChange)="setChecked('checkbox-5', $event)" />
-
-        <h3>checked = {{ checked['checkbox-6'] }} , invalid = true</h3>
-        <ui-checkbox
-            name="checkbox-6"
-            ariaLabel="Option 6"
-            value="Option 6"
-            [invalid]="true"
-            [checked]="checked['checkbox-6']"
-            (checkedChange)="setChecked('checkbox-6', $event)" />
-
-        <h3>checked = {{ checked['checkbox-7'] }}, required = true</h3>
-        <ui-checkbox
-            name="checkbox-7"
-            ariaLabel="Option 7"
-            value="Option 7"
-            [required]="true"
-            [checked]="checked['checkbox-7']"
-            (checkedChange)="setChecked('checkbox-7', $event)" />
-
-        <h3>checked = {{ checked['checkbox-8'] }}, required = true</h3>
-        <ui-checkbox
-            name="checkbox-8"
-            ariaLabel="Option 8"
-            value="Option 8"
-            [required]="true"
-            [checked]="checked['checkbox-8']"
-            (checkedChange)="setChecked('checkbox-8', $event)" />
-
-        <h3>
-            indeterminate =
-            <button
-                style="font: inherit; border: none; padding: 0; cursor: pointer;"
-                (click)="toggleIndeterminate('checkbox-9')">
-                {{ indeterminate['checkbox-9'] }}</button
-            >, checked = {{ checked['checkbox-9'] }}
-        </h3>
-        <ui-checkbox
-            name="checkbox-9"
-            ariaLabel="Option 9"
-            value="Option 9"
-            [indeterminate]="indeterminate['checkbox-9']"
-            [checked]="checked['checkbox-9']"
-            (checkedChange)="setChecked('checkbox-9', $event)" />
-
-        <h3>
-            checked = {{ checked['checkbox-10'] }}, indeterminate =
-            <button
-                style="font: inherit; border: none; padding: 0; cursor: pointer;"
-                (click)="toggleIndeterminate('checkbox-10')">
-                {{ indeterminate['checkbox-10'] }}
-            </button>
-        </h3>
-        <ui-checkbox
-            name="checkbox-10"
-            ariaLabel="Option 10"
-            value="Option 10"
-            [indeterminate]="indeterminate['checkbox-10']"
-            [checked]="checked['checkbox-10']"
-            (checkedChange)="setChecked('checkbox-10', $event)" />
-
-        <h3>
-            disabled = true, indeterminate =
-            <button
-                style="font: inherit; border: none; padding: 0; cursor: pointer;"
-                (click)="toggleIndeterminate('checkbox-11')">
-                {{ indeterminate['checkbox-11'] }}
-            </button>
-        </h3>
-        <ui-checkbox
-            name="checkbox-11"
-            ariaLabel="Option 11"
-            value="Option 11"
-            [disabled]="true"
-            [indeterminate]="indeterminate['checkbox-11']"
-            [checked]="checked['checkbox-11']"
-            (checkedChange)="setChecked('checkbox-11', $event)" />
-
-        <h3>aria-describedby and aria-errormessage</h3>
-        <div id="desc">This describes the checkbox</div>
-        <div id="err">This is an error message</div>
-        <ui-checkbox
-            name="checkbox-12"
-            ariaLabel="Option 12"
-            value="Option 12"
-            [ariaDescribedBy]="'desc'"
-            [ariaErrorMessage]="'err'"
-            [checked]="checked['checkbox-12']"
-            (checkedChange)="setChecked('checkbox-12', $event)" />
-    `,
-})
-export class UICheckboxExample {
-    checked: Record<string, boolean> = {
-        'checkbox-0': false,
-        'checkbox-1': true,
-        'checkbox-2': false,
-        'checkbox-3': true,
-        'checkbox-4': false,
-        'checkbox-5': true,
-        'checkbox-6': false,
-        'checkbox-7': true,
-        'checkbox-8': false,
-        'checkbox-9': false,
-        'checkbox-10': true,
-        'checkbox-11': false,
-        'checkbox-12': false,
-    };
-
-    indeterminate: Record<string, boolean> = {
-        'checkbox-9': true,
-        'checkbox-10': true,
-        'checkbox-11': true,
-    };
-
-    setChecked(name: string, checked: boolean) {
-        this.checked[name] = checked;
-        sendSnackbar(`Checkbox "${name}" checked: ${checked}`);
-    }
-
-    toggleIndeterminate(name: string) {
-        this.indeterminate[name] = !this.indeterminate[name];
-    }
-}

package/src/lib/checkbox/index.ts

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

package/src/lib/checkbox-group/checkbox-group.scss

@@ -1,10 +0,0 @@
-[data-bspk='checkbox-group'] {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    max-width: 100%;
-
-    --list-item-height: 'auto';
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/checkbox-group/checkbox-group.spec.ts

@@ -1,50 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UICheckboxGroup } from './checkbox-group';
-
-@Component({
-    selector: 'ui-checkbox-group-example',
-    standalone: true,
-    imports: [CommonModule, UICheckboxGroup],
-    template: `
-        <h2>Checkbox Group Example</h2>
-        <ui-checkbox-group
-            [options]="options"
-            [value]="selected"
-            (valueChange)="onValueChange($event)"
-            [name]="'user-checkbox-group'"
-            [selectAll]="true"
-            [selectAllProps]="{ label: 'Select All', description: 'Select all options' }">
-        </ui-checkbox-group>
-        <div>Selected: {{ selected | json }}</div>
-    `,
-})
-class TestHostComponent {
-    options = [
-        { label: 'Option 1', value: 'option1' },
-        { label: 'Option 2', value: 'option2' },
-        { label: 'Option 3', value: 'option3' },
-    ];
-    selected: string[] = [];
-
-    onValueChange(newValue: string[]) {
-        this.selected = newValue;
-    }
-}
-
-describe('UICheckboxGroup', () => {
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [TestHostComponent],
-        }).compileComponents();
-    });
-
-    it('should create', () => {
-        expect(TestHostComponent).toBeTruthy();
-    });
-
-    it('should have no basic a11y issues', async () =>
-        await hasNoBasicA11yIssues(TestBed.createComponent(TestHostComponent)));
-});

package/src/lib/checkbox-group/checkbox-group.ts

@@ -1,89 +0,0 @@
-import { Component, ViewEncapsulation, input, Output, EventEmitter } from '@angular/core';
-import { UICheckboxOption } from '../checkbox-option';
-
-export interface CheckboxGroupOption {
-    value: string;
-    label: string;
-    description?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    ariaLabel?: string;
-}
-
-@Component({
-    selector: 'ui-checkbox-group',
-    standalone: true,
-    imports: [UICheckboxOption],
-    encapsulation: ViewEncapsulation.None,
-    template: `
-        <div role="group">
-            @if (selectAll()) {
-                <ui-checkbox-option
-                    name="select-all"
-                    [label]="selectAllProps()?.label ?? selectAllLabel"
-                    [ariaLabel]="selectAllProps()?.ariaLabel ?? selectAllLabel"
-                    [description]="selectAllProps()?.description"
-                    [checked]="allChecked()"
-                    [indeterminate]="someChecked() && !allChecked()"
-                    [disabled]="disabled()"
-                    [invalid]="invalid()"
-                    [value]="'all'"
-                    (checkedChange)="onSelectAllChange($event)">
-                </ui-checkbox-option>
-            }
-            @for (option of options(); track option.value) {
-                <ui-checkbox-option
-                    name="checkbox-group-option-{{ option.value }}"
-                    [label]="option.label"
-                    [value]="option.value"
-                    [checked]="isChecked(option.value)"
-                    [description]="option.description"
-                    [disabled]="disabled() || option.disabled"
-                    [invalid]="invalid()"
-                    (checkedChange)="onOptionChange(option.value, $event)">
-                </ui-checkbox-option>
-            }
-        </div>
-    `,
-})
-export class UICheckboxGroup {
-    @Output() valueChange = new EventEmitter<string[]>();
-    readonly options = input<CheckboxGroupOption[]>([]);
-    readonly value = input<string[]>([]);
-    readonly selectAll = input<boolean>(false);
-    readonly selectAllProps = input<Partial<CheckboxGroupOption> | undefined>(undefined);
-    readonly disabled = input<boolean>(false);
-    readonly invalid = input<boolean>(false);
-    selectAllLabel = 'All';
-
-    isChecked(optionValue: string): boolean {
-        const value = this.value();
-        return Array.isArray(value) ? value.includes(optionValue) : false;
-    }
-    availableOptions() {
-        return this.options().filter((o) => !o.disabled);
-    }
-    allChecked() {
-        const opts = this.availableOptions();
-        const val = this.value();
-        return opts.length > 0 && Array.isArray(val) && opts.every((o) => val.includes(o.value));
-    }
-    someChecked() {
-        const opts = this.availableOptions();
-        const val = this.value();
-        return Array.isArray(val) && opts.some((o) => val.includes(o.value));
-    }
-    onSelectAllChange(checked: boolean) {
-        const opts = this.availableOptions();
-        this.valueChange.emit(checked ? opts.map((o) => o.value) : []);
-    }
-    onOptionChange(optionValue: string, checked: boolean) {
-        const value = this.value();
-        const current: string[] = Array.isArray(value) ? value : [];
-        if (checked) {
-            this.valueChange.emit([...current, optionValue]);
-        } else {
-            this.valueChange.emit(current.filter((v) => v !== optionValue));
-        }
-    }
-}