@bspk/ui-ngx 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

package/src/lib/chip/chip.scss

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

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

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

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-import { UIChip, ChipProps } from '../chip/chip';
-
-export type Overflow = 'scroll' | 'wrap';
-
-@Component({
-    selector: 'ui-chip-group',
-    standalone: true,
-    imports: [UIChip],
-    template: `@for (item of items(); track item) {
-        <ui-chip
-            [label]="item.label"
-            [disabled]="item.disabled ?? false"
-            [flat]="item.flat ?? false"
-            [selected]="item.selected ?? false"
-            [leadingIcon]="item.leadingIcon"
-            [trailingIcon]="item.trailingIcon"
-            [trailingBadge]="item.trailingBadge"
-            (click)="item.click?.($event)" />
-    }`,
-    styleUrl: './chip-group.scss',
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'chip-group',
-        '[attr.data-scroll]': "overflow() === 'scroll' ? true : null",
-    },
-})
-export class UIChipGroup {
-    /** To allow chips to scroll. If set to false chips will wrap. */
-    readonly overflow = input<Overflow>('wrap');
-
-    /** Only Chip components should be used as children. */
-    readonly items = input<ChipProps[]>();
-}