@bspk/ui-ngx 0.0.1 → 0.0.3

package/src/lib/avatar/avatar.ts

@@ -1,200 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-    Component,
-    Output,
-    EventEmitter,
-    ViewEncapsulation,
-    input,
-    AfterViewInit,
-    Renderer2,
-    inject,
-    EnvironmentInjector,
-    ElementRef,
-} from '@angular/core';
-import { IconPerson } from '../icons/person';
-import { TooltipUtility } from '../tooltip/tooltip';
-
-export type SizeVariant =
-    | 'large'
-    | 'medium'
-    | 'small'
-    | 'x-large'
-    | 'x-small'
-    | 'xx-large'
-    | 'xxx-large'
-    | 'xxxx-large'
-    | 'xxxxx-large';
-
-/**
- * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
- *
- * @example
- *     import { Avatar } from '@bspk/ui/Avatar';
- *
- *     <Avatar
- *     color="blue"
- *     showIcon
- *     image="/avatar-01.png"
- *     initials="AR"
- *     name="Andre Giant"
- *     size="large"
- *     disabled={false}
- *     onClick={() => action('Launch avatar popover')}
- *     showIcon={false}
- *     hideTooltip={true}
- *     />;
- *
- * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
- *
- * @name Avatar
- * @phase Dev
- */
-@Component({
-    selector: 'ui-avatar',
-    standalone: true,
-    imports: [CommonModule, IconPerson],
-    template: ` @if (image()) {
-            <img [src]="image()" [alt]="name()" aria-hidden="true" />
-        } @else if (showIcon()) {
-            <span aria-hidden="true" data-icon>
-                <icon-person></icon-person>
-            </span>
-        } @else if (computedInitials) {
-            <span aria-hidden="true" data-initials>
-                {{ computedInitials }}
-            </span>
-        }`,
-    styleUrls: ['./avatar.scss'],
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'avatar',
-        '[attr.aria-label]': 'name()',
-        'aria-roledescription': 'person',
-        '[attr.aria-disabled]': 'disabled() || undefined',
-        '[attr.tabindex]': '!disabled() && onClick.observed ? 0 : undefined',
-        '[attr.role]': "onClick.observed ? 'button' : 'img'",
-        '[attr.data-color]': 'color()',
-        '[attr.data-size]': 'size()',
-        '(click)': 'handleOnClick($event)',
-        '(keydown)': 'handleKeyDown($event)',
-    },
-})
-export class UIAvatar implements AfterViewInit {
-    /** The function to call when the avatar is clicked. */
-    @Output() onClick = new EventEmitter<MouseEvent>();
-
-    /**
-     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
-     *
-     * @example
-     *     Andre Giant
-     *
-     * @required
-     */
-    readonly name = input.required<string>();
-
-    /**
-     * The size of the avatar.
-     *
-     * @default small
-     */
-    readonly size = input<SizeVariant>('small');
-
-    /**
-     * The color of the avatar.
-     *
-     * @default grey
-     */
-    readonly color = input('grey');
-
-    /**
-     * Customizable initials to display in the avatar limited to 2 characters.
-     *
-     * By default, initials are the first letters of the first two words in the name. For a single-word name, only one
-     * initial is shown. Names with three or more words, only the first two initials are used.
-     *
-     * @example
-     *     AG;
-     */
-    readonly initials = input<string>();
-
-    /**
-     * Whether to show the icon in the avatar instead of the initials.
-     *
-     * If an image is provided, the image will be shown instead of the icon.
-     *
-     * @default false
-     */
-    readonly showIcon = input(false);
-
-    /**
-     * The url to the image to display in the avatar.
-     *
-     * When provided the image will be displayed instead of the icon or initials.
-     *
-     * @example
-     *     /avatar-01.png
-     */
-    readonly image = input<string | undefined>();
-
-    /**
-     * Whether to hide the represented user's name as a tooltip.
-     *
-     * @default false
-     */
-    readonly hideTooltip = input(false);
-
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    readonly disabled = input(false);
-
-    private renderer = inject(Renderer2);
-    private env = inject(EnvironmentInjector);
-    private host = inject(ElementRef<HTMLElement>);
-
-    private tooltipUtility: TooltipUtility | undefined;
-
-    get computedInitials(): string | undefined {
-        const initials = this.initials();
-        if (initials) return initials.slice(0, 2).toUpperCase();
-        const name = this.name();
-        if (name) {
-            const parts = name.split(' ').filter(Boolean);
-            return parts
-                .map((w) => w[0])
-                .slice(0, 2)
-                .join('')
-                .toUpperCase();
-        }
-        return undefined;
-    }
-
-    ngAfterViewInit() {
-        if (!this.hideTooltip()) {
-            this.tooltipUtility = new TooltipUtility(this.renderer, this.env, {
-                label: this.name(),
-                reference: this.host.nativeElement,
-                placement: 'top',
-            });
-        }
-    }
-
-    onDestroy() {
-        this.tooltipUtility?.destroy();
-    }
-
-    handleOnClick(event: MouseEvent) {
-        if (!this.disabled()) {
-            this.onClick.emit(event);
-        }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-        if (!this.disabled() && event.key === 'Enter') {
-            this.onClick.emit();
-        }
-    }
-}

package/src/lib/avatar/example.ts

@@ -1,76 +0,0 @@
-/* eslint-disable no-console */
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UIAvatar } from './avatar';
-
-@Component({
-    selector: 'ui-avatar-example',
-    standalone: true,
-    imports: [CommonModule, UIAvatar],
-    template: `
-        <h2>Avatar</h2>
-
-        <h3>Basic Usage with color</h3>
-        <ui-avatar color="blue" initials="JD" name="John Doe" size="xxxxx-large" />
-        <ui-avatar color="teal" initials="KA" name="Kate Anders" size="xxxxx-large" />
-        <ui-avatar color="green" initials="AB" name="Ali Bogs" size="xxxx-large" />
-        <ui-avatar color="lime" initials="BH" name="Bea Hopkins" size="xxxx-large" />
-        <ui-avatar color="yellow" initials="TM" name="Tim Meadows" size="xxx-large" />
-        <ui-avatar color="orange" name="Andre Giant" size="xxx-large" />
-        <ui-avatar color="red" name="Megan Jetson" size="xx-large" />
-        <ui-avatar color="pink" name="Tom South" size="xx-large" />
-        <ui-avatar color="magenta" name="Cal North" size="x-large" />
-        <ui-avatar color="purple" name="Dan West" size="large" />
-        <ui-avatar color="grey" name="Kel East" size="medium" />
-        <ui-avatar color="primary" name="Sasha Lee" size="small" />
-        <ui-avatar color="secondary" name="Nan Polo" size="x-small" />
-
-        <h3>[showIcon]="false" with color</h3>
-        <ui-avatar color="blue" [showIcon]="false" name="John Doe" size="xxxxx-large" />
-        <ui-avatar color="teal" [showIcon]="false" name="Kate Anders" size="xxxxx-large" />
-        <ui-avatar color="green" [showIcon]="false" name="Ali Bogs" size="xxxx-large" />
-        <ui-avatar color="lime" [showIcon]="false" name="Bea Hopkins" size="xxxx-large" />
-        <ui-avatar color="yellow" [showIcon]="false" name="Tim Meadows" size="xxx-large" />
-        <ui-avatar color="orange" [showIcon]="false" name="Andre Giant" size="xxx-large" />
-        <ui-avatar color="red" [showIcon]="false" name="Megan Jetson" size="xx-large" />
-        <ui-avatar color="pink" [showIcon]="false" name="Tom South" size="xx-large" />
-        <ui-avatar color="magenta" [showIcon]="false" name="Cal North" size="x-large" />
-        <ui-avatar color="purple" [showIcon]="false" name="Dan West" size="large" />
-        <ui-avatar color="grey" [showIcon]="false" name="Kel East" size="medium" />
-        <ui-avatar color="primary" [showIcon]="false" name="Sasha Lee" size="small" />
-        <ui-avatar color="secondary" [showIcon]="false" name="Nan Polo" size="x-small" />
-
-        <h3>with image</h3>
-        <ui-avatar image="./avatar-01.png" name="Tim Meadows" size="xxxxx-large" />
-        <ui-avatar image="./avatar-02.png" name="Andre Giant" size="xxxx-large" />
-        <ui-avatar image="./avatar-03.png" name="Megan Jetson" size="xxx-large" />
-        <ui-avatar image="./avatar-04.png" name="Tom South" size="xx-large" />
-        <ui-avatar image="./avatar-05.png" name="Cal North" size="x-large" />
-        <ui-avatar image="./avatar-06.png" name="Dan West" size="large" />
-        <ui-avatar image="./avatar-07.png" name="Kel East" size="medium" />
-        <ui-avatar image="./avatar-08.png" name="Sasha Lee" size="small" />
-        <ui-avatar image="./avatar-09.png" name="Nan Polo" size="x-small" />
-
-        <h3>with different initials and [showIcon]="false"</h3>
-        <ui-avatar initials="MM" name="Tim Meadows" [showIcon]="false" size="xxxxx-large" />
-
-        <h3>[hideTooltip]="true"</h3>
-        <ui-avatar initials="TM" name="Tim Meadows" [hideTooltip]="true" size="xxxxx-large" />
-
-        <h3>[disabled]="true"</h3>
-        <ui-avatar name="Andre Giant" [disabled]="true" size="xxxx-large" />
-
-        <h3>with click prop set</h3>
-        <p>when inspecting the element role should be button, not img</p>
-        <ui-avatar name="Jane Smith" size="xxxxx-large" (click)="handleClick()" />
-
-        <h3>with click prop set, disabled = true</h3>
-        <p>when inspecting the element role should be button, not img</p>
-        <ui-avatar name="Jane Smith" size="xxxxx-large" (click)="handleClick()" [disabled]="true" />
-    `,
-})
-export class UIAvatarExample {
-    protected handleClick(): void {
-        console.log('Avatar clicked');
-    }
-}

package/src/lib/avatar/index.ts

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

package/src/lib/badge/badge.scss

@@ -1,44 +0,0 @@
-[data-bspk='badge'] {
-    --size: var(--spacing-sizing-06);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-full);
-    height: var(--size);
-    width: fit-content;
-    min-width: var(--size);
-    font: var(--labels-x-small);
-    padding: 0 var(--spacing-sizing-02);
-    background-color: var(--background);
-    color: var(--foreground);
-
-    &[data-color='primary'] {
-        --foreground: var(--foreground-brand-on-primary);
-        --background: var(--foreground-brand-primary);
-    }
-
-    &[data-color='secondary'] {
-        --foreground: var(--foreground-brand-on-secondary);
-        --background: var(--foreground-brand-secondary);
-    }
-
-    &[data-size='x-small'] {
-        --size: var(--spacing-sizing-05);
-
-        padding: 2px var(--spacing-sizing-01);
-    }
-
-    &[data-variant='notification'] {
-        --size: 6px;
-
-        padding: 0;
-        display: block;
-    }
-
-    &[data-surface-border] {
-        border: 2px solid var(--surface-neutral-t1-base);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/badge/badge.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UIBadge } from './badge';
-
-describe('UIBadge', () => {
-    let component: UIBadge;
-    let fixture: ComponentFixture<UIBadge>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIBadge],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UIBadge);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/badge/badge.ts

@@ -1,94 +0,0 @@
-import { Component, ElementRef, ViewEncapsulation, input, viewChild } from '@angular/core';
-
-export interface BadgeProps {
-    count?: number;
-    size?: string;
-    color?: string;
-    surfaceBorder?: boolean;
-}
-
-/**
- * Visual indicator for new items within a parent page represented with a numerical count of new items.
- *
- * @example
- *     import { Badge } from '@bspk/ui/Badge';
- *
- *     <Badge count={5} size="small" color="primary" surfaceBorder={true} />;
- *
- * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
- *
- * @name Badge
- * @phase Dev
- */
-
-@Component({
-    selector: 'ui-badge',
-    standalone: true,
-    template: `<span #contentWrapper><ng-content></ng-content></span>
-        <sup
-            data-bspk="badge"
-            [attr.data-color]="color()"
-            [attr.data-size]="size()"
-            [attr.data-surface-border]="surfaceBorder() ? true : undefined"
-            [attr.data-attachment]="hasProjectedContent ? true : undefined">
-            {{ typeof count() === 'number' && count()! > 99 ? '99+' : count() }}
-        </sup>`,
-    styleUrls: ['./badge.scss'],
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'badge-wrapper',
-        'data-attachment-wrapper': '',
-    },
-})
-export class UIBadge {
-    /**
-     * The context for which the badge is applied.
-     *
-     * Could be a button, link, or any other element that the badge is associated with.
-     */
-    readonly contentWrapper = viewChild.required<ElementRef<HTMLElement>>('contentWrapper');
-
-    /**
-     * The content of the badge. If larger than 99, the badge will display '99+'.
-     *
-     * @example
-     *     5;
-     *
-     * @default 1
-     */
-    readonly count = input<number | undefined>(1);
-
-    /**
-     * The size of the badge.
-     *
-     * @default small
-     */
-    readonly size = input<'small' | 'x-small'>('small');
-
-    /**
-     * The color variant of the badge.
-     *
-     * @default primary
-     */
-    readonly color = input<'primary' | 'secondary'>('primary');
-
-    /**
-     * Whether the badge should have a border that matches the surface color.
-     *
-     * @default false
-     */
-    readonly surfaceBorder = input(false);
-
-    /**
-     * Indicates whether the badge has projected (custom) content.
-     *
-     * This is set to `true` if any content is projected into the badge component (for example,
-     * <ui-badge>New</ui-badge>), and `false` if only the `count` input is used. Used internally to determine whether to
-     * display the projected content or the count.
-     *
-     * @internal
-     */
-    get hasProjectedContent() {
-        return !!this.contentWrapper().nativeElement?.childNodes.length;
-    }
-}

package/src/lib/badge/example.ts

@@ -1,38 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UIButton } from '../button';
-import { IconAdd } from '../icons/add';
-import { UIBadge } from './badge';
-
-@Component({
-    selector: 'ui-badge-example',
-    standalone: true,
-    imports: [CommonModule, UIBadge, UIButton],
-    template: `
-        <h2>Badge</h2>
-
-        <h3>Basic Usage</h3>
-
-        <div>
-            <ui-badge [count]="5" />
-        </div>
-        <div>
-            <ui-badge [count]="100" />
-        </div>
-
-        <h3>Badge with Button</h3>
-
-        <ui-badge [count]="44">
-            <ui-button label="Label test" size="large" variant="secondary" [icon]="iconAdd"></ui-button>
-        </ui-badge>
-
-        <h3>Badge with Border Surface</h3>
-
-        <ui-badge [count]="101" [surfaceBorder]="true">
-            <ui-button label="Label test" size="large" variant="primary" [icon]="iconAdd"></ui-button>
-        </ui-badge>
-    `,
-})
-export class UIBadgeExample {
-    protected readonly iconAdd = IconAdd;
-}

package/src/lib/badge/index.ts

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

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

@@ -1,86 +0,0 @@
-[data-bspk='banner-alert'] {
-    --color: var(--status-information);
-    --on-color: var(--status-on-information);
-
-    display: flex;
-    flex-direction: row;
-    border: 2px solid var(--color);
-    border-radius: var(--radius-md);
-    background-color: var(--surface-neutral-t1-base);
-    width: 100%;
-
-    &[data-variant='error'] {
-        --color: var(--status-error);
-        --on-color: var(--status-on-error);
-    }
-
-    &[data-variant='success'] {
-        --color: var(--status-success);
-        --on-color: var(--status-on-success);
-    }
-
-    &[data-variant='warning'] {
-        --color: var(--status-warning);
-        --on-color: var(--status-on-warning);
-    }
-
-    &[data-elevated] {
-        box-shadow: var(--drop-shadow-raise);
-    }
-
-    [data-icon-bar] {
-        flex: 1;
-        padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
-        background: var(--color);
-        color: var(--on-color);
-
-        svg {
-            width: var(--spacing-sizing-06);
-            height: var(--spacing-sizing-06);
-        }
-    }
-
-    [data-content] {
-        flex: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
-
-        [data-header] {
-            display: flex;
-            flex-direction: row;
-            gap: var(--spacing-sizing-03);
-            height: var(--spacing-sizing-12);
-            align-items: center;
-
-            span {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                color: var(--foreground-neutral-on-surface);
-                font: var(--heading-h6);
-
-                @media (any-pointer: coarse) {
-                    font: var(--heading-h6);
-                }
-            }
-        }
-
-        [data-body] {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sizing-02);
-            padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
-
-            span {
-                font: var(--body-base);
-            }
-
-            button {
-                margin-left: auto;
-            }
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,19 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UIBannerAlertExample } from './example';
-
-describe('UIBannerAlert', () => {
-    let fixture: ComponentFixture<UIBannerAlertExample>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIBannerAlertExample],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UIBannerAlertExample);
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});