@bspk/ui-ngx 0.0.1

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

@@ -0,0 +1,89 @@
+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));
+        }
+    }
+}

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

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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]="selectedBasic" (valueChange)="onBasicValueChange($event)">
+        </ui-checkbox-group>
+        <div>Selected: {{ selectedBasic | json }}</div>
+
+        <h2>Checkbox Group Example with Select All</h2>
+        <ui-checkbox-group
+            [options]="options"
+            [value]="selectedAll"
+            (valueChange)="onAllValueChange($event)"
+            [selectAll]="true"
+            [selectAllProps]="{ label: 'Select All', description: 'Select all options' }">
+        </ui-checkbox-group>
+        <div>Selected: {{ selectedAll | json }}</div>
+    `,
+})
+export class UICheckboxGroupExample {
+    options = [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' },
+    ];
+
+    selectedBasic: string[] = [];
+    selectedAll: string[] = [];
+
+    onBasicValueChange(newValue: string[]) {
+        this.selectedBasic = newValue;
+    }
+
+    onAllValueChange(newValue: string[]) {
+        this.selectedAll = newValue;
+    }
+}

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

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

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

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
+import { UICheckboxOption } from './checkbox-option';
+
+@Component({
+    template: `
+        <ui-checkbox-option
+            [label]="'Test Label'"
+            [name]="'test-name'"
+            [value]="'test-value'"
+            [description]="'This is description for Test Label'"
+            [id]="'checkbox-option-example-0'"
+            [checked]="checked"
+            [ariaLabel]="'Test Label - This is description for Test Label'"
+            (checkedChange)="onCheckedChange(0, $event)" />
+    `,
+    imports: [UICheckboxOption],
+})
+class TestHostComponent {
+    checked = false;
+
+    onCheckedChange(idx: number, checked: boolean) {
+        this.checked = checked;
+        // Optionally, you can add assertions or side effects here
+    }
+}
+
+describe('UICheckboxOption', () => {
+    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-option/checkbox-option.ts

@@ -0,0 +1,57 @@
+import { Component, input } from '@angular/core';
+import { UICheckbox } from '../checkbox/checkbox';
+import { UIListItem } from '../list-item';
+
+/**
+ * A control that allows users to choose one or more items from a list or turn a feature on or off.
+ *
+ * If only a checkbox button is needed, consider using the Checkbox component directly.
+ *
+ * @name CheckboxOption
+ * @phase Utility
+ */
+@Component({
+    selector: 'ui-checkbox-option',
+    imports: [UICheckbox, UIListItem],
+    standalone: true,
+    template: `<ui-list-item
+        [label]="label() || ''"
+        [subText]="description()"
+        [disabled]="disabled()"
+        data-bspk="checkbox-option"
+        [attr.aria-disabled]="disabled() ? true : null"
+        as="label">
+        <span data-leading>
+            <ui-checkbox
+                [id]="id()"
+                [name]="name()"
+                [value]="value()"
+                [checked]="checked()"
+                [indeterminate]="indeterminate()"
+                [disabled]="disabled()"
+                [required]="required()"
+                [invalid]="invalid()"
+                [ariaLabel]="ariaLabel()"
+                (checkedChange)="checkedChange.emit($event)"
+                #input>
+            </ui-checkbox>
+        </span>
+    </ui-list-item>`,
+    host: {
+        'data-bspk': 'checkbox-option',
+    },
+})
+export class UICheckboxOption extends UICheckbox {
+    /** The label of the option. Also used as the aria-label of the control. */
+    readonly label = input<string>();
+
+    /** The description of the option. */
+    readonly description = input<string | undefined>(undefined);
+
+    /** The aria-label for the radio element. Combines label and description if both are present. */
+    override readonly ariaLabel = input<string | undefined>(this.computedAriaLabel());
+
+    computedAriaLabel(): string | undefined {
+        return this.description() ? `${this.label()} - ${this.description()}` : this.label();
+    }
+}

package/src/lib/checkbox-option/example.ts

@@ -0,0 +1,96 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { UICheckboxOption } from './checkbox-option';
+
+@Component({
+    selector: 'ui-checkbox-option-example',
+    standalone: true,
+    imports: [CommonModule, UICheckboxOption],
+    template: `
+        <h2>Checkbox Option</h2>
+        @for (ex of examples; track $index) {
+            <h3>{{ ex.label }}</h3>
+            <ui-checkbox-option
+                [label]="'This is ' + (ex.label ?? '')"
+                [description]="'This is description for ' + (ex.label ?? '')"
+                [id]="ex.id"
+                [name]="ex.name ?? 'example-checkbox-group'"
+                [value]="ex.value ?? ex.label ?? 'option' + $index"
+                [checked]="ex.checked ?? false"
+                [disabled]="ex.disabled ?? false"
+                [invalid]="ex.invalid ?? false"
+                [required]="ex.required ?? false"
+                [ariaLabel]="ex.ariaLabel ?? undefined"
+                (checkedChange)="onCheckedChange($index, $event)" />
+        }
+    `,
+})
+export class UICheckboxOptionExample {
+    examples: (Partial<{
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+        checked: boolean;
+        disabled: boolean;
+        invalid: boolean;
+        required: boolean;
+        ariaLabel: string;
+    }> & { id: string })[] = [
+        {
+            label: 'basic',
+        },
+        {
+            label: 'checked = true',
+            checked: true,
+        },
+        {
+            label: 'checked = true, disabled = true',
+            checked: true,
+            disabled: true,
+        },
+        {
+            label: 'disabled = true',
+            disabled: true,
+        },
+        {
+            label: 'checked = true, invalid = true',
+            checked: true,
+            invalid: true,
+        },
+        {
+            label: 'invalid = true',
+            invalid: true,
+        },
+        {
+            label: 'required = true',
+            required: true,
+        },
+        {
+            label: 'required = false',
+            required: false,
+        },
+        {
+            label: 'disabled = true, invalid = true',
+            invalid: true,
+            disabled: true,
+        },
+        {
+            label: 'checked = true, disabled = true, invalid = true',
+            invalid: true,
+            disabled: true,
+            checked: true,
+        },
+    ].map((config, idx) => ({
+        id: `checkbox-option-example-${idx}`,
+        name: `example-checkbox-group-${idx}`,
+        value: `option-${idx}`,
+        ...config,
+    }));
+
+    onCheckedChange(idx: number, checked: boolean) {
+        this.examples[idx].checked = checked;
+        sendSnackbar(`Checkbox ${idx} checked: ${checked}`);
+    }
+}

package/src/lib/checkbox-option/index.ts

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

package/src/lib/chip/chip.scss

@@ -0,0 +1,59 @@
+[data-bspk='chip'] {
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+    height: var(--spacing-sizing-08);
+    text-wrap: nowrap;
+    font: var(--labels-small);
+    color: var(--foreground-neutral-on-surface-variant-01);
+    background-color: var(--surface-neutral-t1-base);
+    border: 1px solid var(--stroke-neutral-low);
+    border-radius: var(--radius-sm);
+    padding: 0 var(--spacing-sizing-03);
+
+    [data-touch-target] {
+        min-width: var(--spacing-sizing-12);
+        min-height: var(--spacing-sizing-12);
+    }
+
+    &:not([data-flat]) {
+        box-shadow: var(--drop-shadow-raise);
+    }
+
+    &[data-variant='filter'] {
+        cursor: pointer;
+    }
+
+    &[data-disabled] {
+        color: var(--foreground-neutral-disabled-on-surface);
+        cursor: not-allowed;
+        border-color: var(--stroke-neutral-disabled-light);
+        background-color: var(--interactions-disabled-opacity);
+    }
+
+    &:not([data-disabled]) {
+        &:hover {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+
+        &:active {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+
+        &:focus {
+            outline: 1px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+        }
+    }
+
+    &[data-selected] {
+        background-color: var(--surface-brand-primary-highlight);
+        border-color: var(--stroke-brand-primary);
+    }
+
+    [data-chip-icon] {
+        display: flex;
+        align-items: center;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/chip/chip.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { componentTestProps } from '../../utils/test-props';
+import { UIChip } from './chip';
+
+describe('UIChip', () => {
+    let component: UIChip;
+    let fixture: ComponentFixture<UIChip>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIChip],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(
+            UIChip,
+            componentTestProps<UIChip>({
+                label: 'Test Chip',
+                // Add any input properties here if needed
+            }),
+        );
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/chip/chip.ts

@@ -0,0 +1,138 @@
+import { Component, Output, EventEmitter, input, computed } from '@angular/core';
+import { BspkIcon } from '../../types/bspk-icon';
+import { BadgeProps, UIBadge } from '../badge';
+import { UIIcon } from '../icon';
+
+export interface ChipProps {
+    disabled?: boolean;
+    flat?: boolean;
+    label: string;
+    selected?: boolean;
+    leadingIcon?: BspkIcon;
+    trailingIcon?: BspkIcon;
+    trailingBadge?: BadgeProps;
+    click?: (event: Event) => void;
+}
+
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { Chip } from '@bspk/ui/Chip';
+ *
+ *     <Chip label="Label" click={() => sendSnackbar('Chip clicked!')}>
+ *     Example Chip
+ *     </Chip>;
+ *
+ * @name Chip
+ * @phase Dev
+ */
+@Component({
+    selector: 'ui-chip',
+    standalone: true,
+    imports: [UIBadge, UIIcon],
+    template: `<button
+        data-bspk="chip"
+        [attr.data-disabled]="disabled() || undefined"
+        [attr.data-flat]="flat() || undefined"
+        [attr.data-selected]="selected() || undefined"
+        data-touch-target-parent
+        [disabled]="disabled()"
+        (click)="handleOnClick($event)">
+        @if (leadingIcon()) {
+            <span [attr.aria-hidden]="true" data-chip-icon>
+                <ui-icon [icon]="leadingIcon()!"></ui-icon>
+            </span>
+        }
+
+        <span>{{ label() }}</span>
+
+        @if (trailingIcon()) {
+            <span [attr.aria-hidden]="true" data-chip-icon>
+                <ui-icon [icon]="trailingIcon()!"></ui-icon>
+            </span>
+        }
+
+        @if (trailingBadge() && !trailingIcon()) {
+            <ui-badge
+                [count]="trailingBadge()!.count"
+                [size]="trailingBadgeSize()"
+                [surfaceBorder]="trailingBadge()!.surfaceBorder ?? false"></ui-badge>
+        }
+        <span data-touch-target></span>
+    </button>`,
+    styleUrls: ['./chip.scss'],
+    host: {
+        style: 'display: contents;',
+    },
+})
+export class UIChip {
+    /** The function to call when the chip is clicked. */
+    @Output() onClick = new EventEmitter<Event>();
+
+    readonly trailingBadgeSize = computed(() => {
+        const size = this.trailingBadge()!.size!;
+        return size === 'small' || size === 'x-small' ? size : 'small';
+    });
+
+    /**
+     * Is the chip disabled.
+     *
+     * @default false
+     */
+    readonly disabled = input(false);
+
+    /**
+     * Is the chip elevated or flat. If flat the drop shadow is removed.
+     *
+     * @default false
+     */
+    readonly flat = input(false);
+
+    /**
+     * The label of the chip.
+     *
+     * @example
+     *     Hello I am Chip
+     *
+     * @required
+     */
+    readonly label = input.required<string>();
+
+    /**
+     * Visual indication of whether the chip is currently selected.
+     *
+     * @default false
+     */
+    readonly selected = input(false);
+
+    /**
+     * The leading icon of the chip.
+     *
+     * @type BspkIcon
+     */
+    readonly leadingIcon = input<BspkIcon>();
+
+    /**
+     * The trailing icon of the chip.
+     *
+     * You can only have one of the trailing options, trailingIcon **or** trailingBadge. If both are present the
+     * trailingIcon will be visible.
+     *
+     * @type BspkIcon
+     */
+    readonly trailingIcon = input<BspkIcon>();
+
+    /**
+     * The trailing Badge for use in the ChipFilter.
+     *
+     * If a trailingIcon is provided the Badge will **not** be visible.
+     */
+    readonly trailingBadge = input<BadgeProps>();
+
+    handleOnClick(event: MouseEvent) {
+        if (!this.disabled()) {
+            this.onClick.emit(event);
+        }
+    }
+}

package/src/lib/chip/example.ts

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { sendSnackbar } from '../../utils/send-snackbar';
+import { IconAdd } from '../icons/add';
+import { IconIcecream } from '../icons/icecream';
+import { UIChip } from './chip';
+
+@Component({
+    selector: 'ui-chip-example',
+    standalone: true,
+    imports: [CommonModule, UIChip],
+    template: `
+        <h2>Chip</h2>
+
+        <h3>Default with label and click</h3>
+        <ui-chip label="Hello I'm Chip" (click)="handleClick('Default with label and click')" />
+
+        <h3>flat = true</h3>
+        <ui-chip [flat]="true" label="Hello I'm Chip" (click)="handleClick('flat = true')" />
+
+        <h3>Leading Icon</h3>
+        <ui-chip label="Hello I'm Chip" [leadingIcon]="iconAdd" (click)="handleClick('Leading Icon')" />
+
+        <h3>Trailing Icon</h3>
+        <ui-chip label="Hello I'm Chip" [trailingIcon]="iconIcecream" (click)="handleClick('Trailing Icon')" />
+
+        <h3>Both Icons</h3>
+        <ui-chip
+            label="Hello I'm Chip"
+            [leadingIcon]="iconAdd"
+            [trailingIcon]="iconAdd"
+            (click)="handleClick('Both Icons')" />
+
+        <h3>Badge</h3>
+        <ui-chip label="Hello I'm Chip" [trailingBadge]="{ count: 3 }" (click)="handleClick('Badge')" />
+
+        <h3>Badge & Trailing Icon</h3>
+        <p>When both are provided the icon will be visible. You cannot have both trailing items.</p>
+        <ui-chip
+            label="Hello I'm Chip"
+            [trailingBadge]="{ count: 3 }"
+            [trailingIcon]="iconAdd"
+            (click)="handleClick('Badge & Trailing Icon')" />
+
+        <h3>Disabled = true</h3>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+            <ui-chip [disabled]="true" label="Hello I'm Chip" />
+            <ui-chip [flat]="true" [disabled]="true" label="Hello I'm Chip" />
+            <ui-chip
+                [disabled]="true"
+                label="Hello I'm Chip"
+                [leadingIcon]="iconAdd"
+                [trailingIcon]="iconAdd"
+                (click)="handleClick('Disabled with both icons')" />
+            <ui-chip
+                [disabled]="true"
+                label="Hello I'm Chip"
+                [trailingBadge]="{ count: 3 }"
+                (click)="handleClick('Disabled with badge')" />
+        </div>
+
+        <h3>Selected = true</h3>
+        <ui-chip [selected]="true" label="Hello I'm Chip" (click)="handleClick('Selected = true')" />
+    `,
+})
+export class UIChipExample {
+    protected readonly iconAdd = IconAdd;
+    protected readonly iconIcecream = IconIcecream;
+
+    protected handleClick(name: string): void {
+        sendSnackbar(`${name} Chip clicked`);
+    }
+}

package/src/lib/chip/index.ts

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

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

@@ -0,0 +1,18 @@
+[data-bspk='chip-group'] {
+    display: flex;
+    gap: var(--spacing-sizing-02);
+    width: 100%;
+    flex-flow: row wrap;
+    padding-bottom: var(--spacing-sizing-01);
+
+    &:empty {
+        display: none;
+    }
+
+    &[data-scroll] {
+        overflow: auto;
+        flex-wrap: nowrap;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UIChipGroup } from './chip-group';
+
+describe('UIChipGroup', () => {
+    let component: UIChipGroup;
+    let fixture: ComponentFixture<UIChipGroup>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [UIChipGroup],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(UIChipGroup);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});