@bspk/ui-ngx 0.0.1 → 0.0.3

package/src/lib/link/link.scss

@@ -1,21 +0,0 @@
-[data-bspk='link'] {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-sizing-01);
-    font: var(--labels-base);
-
-    &[data-size='large'] {
-        font: var(--labels-large);
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-small);
-    }
-
-    svg {
-        width: var(--spacing-sizing-05);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/link/link.spec.ts

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UILinkDirective } from './link.directive';
-
-@Component({
-    selector: 'ui-host',
-    standalone: true,
-    imports: [UILinkDirective],
-    template: `<a [ui-link]="'#ok'">Hover me</a>`,
-})
-class HostComponent {}
-
-describe('UILinkDirective', () => {
-    let fixture: ComponentFixture<HostComponent>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
-        fixture = TestBed.createComponent(HostComponent);
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/list-item/example.ts

@@ -1,94 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { UIAvatar } from '../avatar';
-import { UIButton } from '../button';
-import { IconChevronRight } from '../icons/chevron-right';
-import { IconDelete } from '../icons/delete';
-import { IconFolder } from '../icons/folder';
-import { IconMoreVert } from '../icons/more-vert';
-import { UIListItem } from './list-item';
-
-@Component({
-    selector: 'ui-list-item-example',
-    standalone: true,
-    imports: [CommonModule, UIListItem, IconFolder, IconChevronRight, UIButton, IconMoreVert, UIAvatar],
-    template: `
-        <h2>List Item</h2>
-
-        <h3>Basic</h3>
-        <div style="width: 360px; display: grid; gap: 16px">
-            <ui-list-item
-                label="Death Star Plans"
-                subText="Last modified: May 25, 1977"
-                (onClick)="onClick('Downloading blueprints...')">
-            </ui-list-item>
-        </div>
-
-        <h3>Leading avatar and trailing delete (as="div")</h3>
-        <div style="width: 360px; display: grid; gap: 16px">
-            <ui-list-item as="div" label="File 13 nice" subText="Last modified: Jan 21, 2024">
-                <span data-leading>
-                    <ui-avatar name="John Doe" />
-                </span>
-                <span data-trailing>
-                    <ui-button
-                        variant="tertiary"
-                        size="small"
-                        (click)="onClick('Delete clicked')"
-                        [icon]="iconDelete"
-                        [iconOnly]="true"
-                        label="Delete file">
-                    </ui-button>
-                </span>
-            </ui-list-item>
-        </div>
-
-        <h3>As anchor (as="a") with href</h3>
-        <div style="width: 360px; display: grid; gap: 16px">
-            <ui-list-item
-                as="a"
-                href="/list-item/#example"
-                target="_blank"
-                rel="noopener"
-                label="Spec Document"
-                subText="View online">
-                <span data-leading><icon-folder /></span>
-                <span data-trailing><icon-chevron-right /></span>
-            </ui-list-item>
-        </div>
-
-        <h3>As button (as="button") with trailing icon</h3>
-        <div style="width: 360px; display: grid; gap: 16px">
-            <ui-list-item
-                as="button"
-                label="Project Report Q4"
-                subText="Edited: Nov 11, 2025"
-                (click)="onClick('Opening report options...')">
-                <span data-leading>
-                    <ui-avatar name="Paul Revere" initials="PR" />
-                </span>
-                <span data-trailing>
-                    <icon-more-vert />
-                </span>
-            </ui-list-item>
-        </div>
-
-        <h3>Trailing button</h3>
-        <div style="width: 360px; display: grid; gap: 16px">
-            <ui-list-item as="div" label="Design Assets" subText="Updated: Oct 03, 2025">
-                <span data-leading><icon-folder /></span>
-                <span data-trailing>
-                    <ui-button label="Rename" variant="tertiary" size="x-small" (click)="onClick('Rename clicked')" />
-                </span>
-            </ui-list-item>
-        </div>
-    `,
-})
-export class UIListItemExample {
-    iconDelete = IconDelete;
-
-    onClick(msg: string) {
-        sendSnackbar(msg);
-    }
-}

package/src/lib/list-item/index.ts

@@ -1 +0,0 @@
-export { UIListItem } from './list-item';

package/src/lib/list-item/list-item.scss

@@ -1,124 +0,0 @@
-[data-bspk='list-item'] {
-    display: flex;
-    user-select: none;
-    color: var(--foreground-neutral-on-surface);
-    background-color: var(--surface-neutral-t1-base);
-    height: 100%;
-    overflow: hidden;
-    min-height: var(--list-item-height);
-    flex-direction: row;
-    gap: var(--spacing-sizing-03);
-    padding: var(--spacing-sizing-02);
-    justify-items: stretch;
-    border: unset;
-    margin: unset;
-    text-decoration: unset;
-    width: 100%;
-
-    &[data-width='hug'] {
-        width: auto;
-        max-width: 100%;
-    }
-
-    [data-pseudo='focus'] &,
-    &:focus-visible,
-    &:has(*:focus-visible) {
-        outline: solid 2px var(--stroke-neutral-focus);
-        isolation: isolate;
-
-        [data-inner] {
-            border-color: transparent;
-        }
-    }
-
-    &:not([data-disabled], [data-readonly]) {
-        &[data-action],
-        &:is(label) {
-            &[data-active],
-            [data-pseudo='hover'] &,
-            &:hover {
-                background-color: var(--interactions-neutral-hover-opacity);
-            }
-
-            [data-pseudo='active'] &,
-        // pressed state
-        &:active {
-                background-color: var(--interactions-neutral-press-opacity);
-            }
-        }
-    }
-
-    [data-leading],
-    [data-item-label],
-    [data-trailing] {
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        flex: 1 1 0;
-        min-width: 0;
-
-        svg {
-            width: 24px;
-            max-width: unset;
-        }
-    }
-
-    [data-leading],
-    [data-trailing] {
-        width: fit-content;
-        flex: 0 0 auto;
-
-        &:empty {
-            display: none;
-        }
-    }
-
-    [data-item-label] {
-        text-align: left;
-
-        [data-text] {
-            width: 100%;
-            font: var(--labels-base);
-            color: var(--foreground-neutral-on-surface);
-        }
-
-        [data-sub-text] {
-            width: 100%;
-            font: var(--body-small);
-            color: var(--foreground-neutral-on-surface-variant-01);
-        }
-    }
-
-    [data-trailing]:has(input) {
-        pointer-events: none;
-    }
-
-    img {
-        height: 36px;
-        width: 36px;
-        max-width: unset;
-    }
-
-    &:is(label) {
-        [data-inner] {
-            border-bottom: 0;
-            gap: var(--spacing-sizing-02);
-        }
-    }
-
-    &[aria-selected='true'] {
-        background-color: var(--surface-brand-primary-highlight);
-    }
-
-    &[data-disabled],
-    &[data-readonly] {
-        [data-text],
-        [data-sub-text] {
-            color: var(--foreground-neutral-disabled-on-surface);
-            cursor: not-allowed;
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/list-item/list-item.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { componentTestProps } from '../../utils/test-props';
-import { UIListItem } from './list-item';
-
-describe('UIListItem', () => {
-    let fixture: ComponentFixture<UIListItem>;
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIListItem],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(
-            UIListItem,
-            componentTestProps<UIListItem>({
-                label: 'Test List Item',
-            }),
-        );
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/list-item/list-item.ts

@@ -1,225 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, Output, EventEmitter, ViewEncapsulation, input, computed } from '@angular/core';
-import { AsInputSignal, CommonProps } from '../../types/common';
-import { UITooltipDirective } from '../tooltip';
-
-export type ListItemProps = CommonProps<
-    | 'active'
-    | 'ariaDisabled'
-    | 'ariaLabel'
-    | 'ariaReadonly'
-    | 'ariaRole'
-    | 'ariaSelected'
-    | 'disabled'
-    | 'htmlFor'
-    | 'id'
-    | 'owner'
-    | 'readOnly'
-    | 'style'
-    | 'tabIndex'
-> & {
-    /**
-     * The element type to render as.
-     *
-     * @default div
-     */
-    as?: 'a' | 'button' | 'div' | 'label';
-    /**
-     * The label to display in the ListItem.
-     *
-     * @required
-     */
-    label: string;
-    /** The subtext to display in the ListItem. */
-    subText?: string;
-    /**
-     * The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the list item.
-     *
-     * If the href is provided, the ListItem will render as an anchor element (`<a>`).
-     */
-    href?: string;
-    /**
-     * Determines how the ListItem uses horizontal space.
-     *
-     * If set to 'fill', options expand to fill the container's width.
-     *
-     * If set to 'hug', options only take up as much space as the content requires.
-     *
-     * @default fill
-     */
-    width?: 'fill' | 'hug';
-};
-
-/**
- * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
- * navigation in most experiences.
- *
- * With its flexible and simple structure, the list item element is core and can meet the needs of many uses cases.
- *
- * The ListItem has three main elements: leading element, label, and trailing element.
- *
- * Leading elements should be one of the following Icon, Img, Avatar.
- *
- * Trailing elements should be one of the following Icon, Checkbox, Button, Radio, Switch, Tag, Txt.
- *
- * @name ListItem
- * @phase Dev
- */
-@Component({
-    selector: 'ui-list-item',
-    standalone: true,
-    imports: [NgTemplateOutlet, UITooltipDirective],
-    encapsulation: ViewEncapsulation.None,
-    styleUrls: ['./list-item.scss'],
-    template: `
-        <ng-template #inner>
-            <ng-content select="[data-leading]"></ng-content>
-            <span data-item-label>
-                <span data-text [ui-tooltip]="{ truncated: true }">
-                    {{ label() }}
-                </span>
-                @if (subText()) {
-                    <span data-sub-text>{{ subText() }}</span>
-                }
-            </span>
-            <ng-content select="[data-trailing]"></ng-content>
-        </ng-template>
-        @if (As === 'a') {
-            <a
-                [attr.aria-label]="ariaLabel() || undefined"
-                [attr.aria-selected]="ariaSelected()"
-                [attr.role]="role"
-                [attr.tabindex]="tabindex"
-                [attr.href]="href()"
-                [attr.data-action]="actionable() || undefined"
-                [attr.data-active]="active() || undefined"
-                data-bspk="list-item"
-                [attr.data-bspk-owner]="owner() || undefined"
-                [attr.data-disabled]="isDisabled || undefined"
-                [attr.data-readonly]="isReadonly || undefined"
-                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
-                [attr.id]="id()"
-                (click)="handleClick($event)"
-                (keydown.enter)="handleClick($event)">
-                <ng-container *ngTemplateOutlet="inner"></ng-container>
-            </a>
-        } @else if (As === 'button') {
-            <button
-                type="button"
-                [attr.aria-label]="ariaLabel() || undefined"
-                [attr.aria-selected]="ariaSelected()"
-                [attr.role]="role"
-                [attr.tabindex]="tabindex"
-                [attr.data-action]="actionable() || undefined"
-                [attr.data-active]="active() || undefined"
-                data-bspk="list-item"
-                [attr.data-bspk-owner]="owner() || undefined"
-                [attr.data-disabled]="isDisabled || undefined"
-                [attr.data-readonly]="isReadonly || undefined"
-                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
-                [attr.id]="id()"
-                (click)="handleClick($event)">
-                <ng-container *ngTemplateOutlet="inner"></ng-container>
-            </button>
-        } @else if (As === 'label') {
-            <label
-                [attr.aria-label]="ariaLabel() || undefined"
-                [attr.aria-selected]="ariaSelected()"
-                [attr.role]="role"
-                [attr.tabindex]="tabindex"
-                [attr.data-action]="actionable() || undefined"
-                [attr.data-active]="active() || undefined"
-                data-bspk="list-item"
-                [attr.data-bspk-owner]="owner() || undefined"
-                [attr.data-disabled]="isDisabled || undefined"
-                [attr.data-readonly]="isReadonly || undefined"
-                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
-                [attr.id]="id()"
-                [attr.for]="htmlFor()"
-                (click)="handleClick($event)"
-                (keydown.enter)="handleClick($event)">
-                <ng-container *ngTemplateOutlet="inner"></ng-container>
-            </label>
-        } @else {
-            <div
-                [attr.aria-label]="ariaLabel() || undefined"
-                [attr.aria-selected]="ariaSelected()"
-                [attr.role]="role"
-                [attr.tabindex]="tabindex"
-                [attr.data-action]="actionable() || undefined"
-                [attr.data-active]="active() || undefined"
-                data-bspk="list-item"
-                [attr.data-bspk-owner]="owner() || undefined"
-                [attr.data-disabled]="isDisabled || undefined"
-                [attr.data-readonly]="isReadonly || undefined"
-                [attr.data-width]="width() === 'hug' ? 'hug' : undefined"
-                [attr.id]="id()"
-                (click)="handleClick($event)"
-                (keydown.enter)="handleClick($event)">
-                <ng-container *ngTemplateOutlet="inner"></ng-container>
-            </div>
-        }
-    `,
-    host: {
-        style: 'display: contents;',
-        '[attr.id]': 'listItemId()',
-    },
-})
-export class UIListItem implements AsInputSignal<ListItemProps> {
-    @Output() onClick = new EventEmitter<Event>();
-
-    readonly active = input<ListItemProps['active']>();
-    readonly owner = input<ListItemProps['owner']>();
-    readonly ariaLabel = input<ListItemProps['ariaLabel']>();
-    readonly ariaSelected = input<ListItemProps['ariaSelected']>();
-    readonly ariaDisabled = input<ListItemProps['ariaDisabled']>();
-    readonly ariaReadonly = input<ListItemProps['ariaReadonly']>();
-    readonly htmlFor = input<ListItemProps['htmlFor']>();
-    readonly disabled = input<ListItemProps['disabled']>();
-    readonly readOnly = input<ListItemProps['readOnly']>();
-    readonly as = input<ListItemProps['as']>('div');
-    readonly href = input<ListItemProps['href']>();
-    readonly label = input.required<ListItemProps['label']>();
-    readonly subText = input<ListItemProps['subText']>();
-    readonly width = input<ListItemProps['width']>();
-    readonly tabIndex = input<ListItemProps['tabIndex']>();
-    readonly id = input<ListItemProps['id']>();
-    readonly listItemId = computed(() => (this.id() ? `list-item-${this.id()}` : undefined));
-    readonly actionable = computed(() => {
-        return (
-            !!(this.href() || this.as() === 'button' || this.onClick.observed || this.onClick.observed) &&
-            !this.isReadonly &&
-            !this.isDisabled
-        );
-    });
-
-    get tabindex() {
-        // allow explicit tabIndex to override actionable state
-        return this.tabIndex() !== undefined ? this.tabIndex() : this.actionable() ? 0 : -1;
-    }
-
-    get isReadonly() {
-        return !!(this.readOnly() || this.ariaReadonly());
-    }
-    get isDisabled() {
-        return !!(this.disabled() || this.ariaDisabled());
-    }
-
-    get As() {
-        const as = this.as();
-        if (as) return as;
-        if (this.href()) return 'a';
-        return 'div';
-    }
-
-    get role(): string | undefined {
-        if (!this.actionable()) return undefined;
-        if (this.as() === 'button') return undefined;
-        return 'button';
-    }
-
-    handleClick(event: Event) {
-        if (this.isReadonly || this.isDisabled) return;
-        this.onClick.emit(event);
-    }
-}

package/src/lib/match-parent-height/index.ts

@@ -1 +0,0 @@
-export * from './match-parent-height.directive';

package/src/lib/match-parent-height/match-parent-height.directive.ts

@@ -1,50 +0,0 @@
-import { Directive, ElementRef, OnDestroy, AfterViewInit, Renderer2, inject } from '@angular/core';
-
-/**
- * Sets the host element's height to match its parent element's clientHeight. Updates on window resize and orientation
- * changes.
- *
- * @example
- *     <div style="height: 400px">
- *     <div ui-match-parent-height>Content fits parent height</div>
- *     </div>
- *
- * @name MatchParentHeight
- * @phase Utility
- */
-@Directive({
-    selector: '[ui-match-parent-height]',
-    standalone: true,
-})
-export class UIMatchParentHeightDirective implements AfterViewInit, OnDestroy {
-    el = inject<ElementRef<HTMLElement>>(ElementRef);
-    renderer = inject(Renderer2);
-
-    private removeResize?: () => void;
-    private removeOrientation?: () => void;
-
-    ngAfterViewInit(): void {
-        this.updateHeight();
-        this.removeResize = this.renderer.listen('window', 'resize', () => this.updateHeight());
-        this.removeOrientation = this.renderer.listen('window', 'orientationchange', () => this.updateHeight());
-    }
-
-    ngOnDestroy(): void {
-        if (this.removeResize) this.removeResize();
-        if (this.removeOrientation) this.removeOrientation();
-    }
-
-    private updateHeight(): void {
-        const element = this.el.nativeElement;
-        const parent = element?.parentElement;
-        if (!element || !parent) return;
-
-        // Reset height to allow shrinking or growing
-        element.style.height = '';
-
-        // Apply new height on next frame
-        requestAnimationFrame(() => {
-            element.style.height = `${parent.clientHeight}px`;
-        });
-    }
-}

package/src/lib/menu/example.ts

@@ -1,100 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { ThemeService } from '../../services/theme';
-import { UIAvatar } from '../avatar/avatar';
-import { UICheckbox } from '../checkbox';
-import { UIDivider } from '../divider/divider';
-import {
-    IconSettings,
-    IconMenuBook,
-    IconHelp,
-    IconLicense,
-    IconLogout,
-    IconDarkMode,
-    IconDarkModeFill,
-} from '../icons';
-import { IconAccountCircle } from '../icons/account-circle';
-import { UIListItem } from '../list-item/list-item';
-import { UIMenu } from './menu';
-
-@Component({
-    selector: 'ui-menu-example',
-    standalone: true,
-    imports: [
-        CommonModule,
-        UIMenu,
-        UIListItem,
-        UIDivider,
-        UIAvatar,
-        IconAccountCircle,
-        IconSettings,
-        IconDarkModeFill,
-        IconDarkMode,
-        UICheckbox,
-        IconMenuBook,
-        IconHelp,
-        IconLicense,
-        IconLogout,
-    ],
-    template: `
-        <h3>Menu</h3>
-        <ui-menu [width]="'332px'" [owner]="'menu'" [style]="'padding: var(--spacing-sizing-02);'">
-            <ui-list-item [label]="'Michael Scott'" subText="michael.scott@email.com">
-                <span data-leading>
-                    <ui-avatar [image]="'/avatar-01.png'" [name]="'Michael Scott'"></ui-avatar>
-                </span>
-            </ui-list-item>
-            <ui-divider [inset]="2" [padding]="true"></ui-divider>
-            <ui-list-item as="a" href="/menu#/my-profile" label="My profile">
-                <span data-leading>
-                    <icon-account-circle></icon-account-circle>
-                </span>
-            </ui-list-item>
-            <ui-list-item [label]="'Settings'" as="a" href="/menu#/settings">
-                <span data-leading>
-                    <icon-settings />
-                </span>
-            </ui-list-item>
-            <ui-list-item as="label" [label]="'Dark mode'">
-                <span data-leading>
-                    @if (themeService.value() === 'light') {
-                        <icon-dark-mode></icon-dark-mode>
-                    } @else {
-                        <icon-dark-mode-fill></icon-dark-mode-fill>
-                    }
-                </span>
-                <span data-trailing>
-                    <ui-checkbox
-                        name="dark-mode"
-                        [checked]="themeService.value() === 'dark'"
-                        (checkedChange)="themeService.toggle()"></ui-checkbox>
-                </span>
-            </ui-list-item>
-            <ui-divider [inset]="2" [padding]="false"></ui-divider>
-            <ui-list-item [label]="'Guide and tutorial'" as="a" href="/menu#/guide-and-tutorial">
-                <span data-leading>
-                    <icon-menu-book></icon-menu-book>
-                </span>
-            </ui-list-item>
-            <ui-list-item [label]="'Help center'" as="a" href="/menu#/help-center">
-                <span data-leading>
-                    <icon-help></icon-help>
-                </span>
-            </ui-list-item>
-            <ui-divider [inset]="2" [padding]="true"></ui-divider>
-            <ui-list-item [label]="'Go premium'" as="a" href="/menu#/go-premium">
-                <span data-leading>
-                    <icon-license></icon-license>
-                </span>
-            </ui-list-item>
-            <ui-list-item [label]="'Log out'" as="a" href="/menu#/log-out">
-                <span data-leading>
-                    <icon-logout></icon-logout>
-                </span>
-            </ui-list-item>
-        </ui-menu>
-    `,
-})
-export class UIMenuExample {
-    protected readonly themeService = inject(ThemeService);
-}

package/src/lib/menu/index.ts

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