@bspk/ui-ngx 0.0.1 → 0.0.2

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

@@ -1,120 +0,0 @@
-import { Component, EventEmitter, Output, ViewEncapsulation, input } from '@angular/core';
-import { AlertVariant, AsInputSignal } from '../../types/common';
-import { UIButton } from '../button';
-import { IconCheckCircleFill, IconClose, IconErrorFill, IconInfoFill, IconWarningFill } from '../icons';
-
-export interface BannerAlertProps {
-    /**
-     * The color variant of the banner alert.
-     *
-     * @default informational
-     */
-    variant?: AlertVariant;
-    /**
-     * The header of the banner alert.
-     *
-     * @required
-     */
-    header: string;
-    /**
-     * The body of the banner alert.
-     *
-     * @type multiline
-     * @required
-     */
-    body: string;
-    /**
-     * This property may be undefined or an object containing required CallToActionButton properties.
-     *
-     * @type CallToActionButton
-     */
-    callToAction?: CallToActionButton;
-    /**
-     * Is the alert elevated. If true a drop shadow is added.
-     *
-     * @default false
-     */
-    elevated?: boolean;
-}
-
-export interface CallToActionButton {
-    /**
-     * The label of the call to action button.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The callback function for the call to action button.
-     *
-     * @required
-     */
-    onClick: () => void;
-}
-
-@Component({
-    selector: 'ui-banner-alert',
-    imports: [UIButton, IconErrorFill, IconInfoFill, IconCheckCircleFill, IconWarningFill],
-    template: `<div data-icon-bar>
-            @if (variant() === 'error') {
-                <icon-error-fill />
-            } @else if (variant() === 'informational') {
-                <icon-info-fill />
-            } @else if (variant() === 'success') {
-                <icon-check-circle-fill />
-            } @else if (variant() === 'warning') {
-                <icon-warning-fill />
-            }
-        </div>
-        <div data-content>
-            @if (header() || onClose.observed) {
-                <div data-header>
-                    <span>{{ header() }}</span>
-                    @if (onClose.observed) {
-                        <ui-button
-                            (click)="emitClose()"
-                            label="Close"
-                            [icon]="IconClose"
-                            [iconOnly]="true"
-                            [variant]="'tertiary'"
-                            [size]="'small'" />
-                    }
-                </div>
-            }
-            <div data-body>
-                <span>{{ body() }}</span>
-                @if (callToAction()) {
-                    <ui-button
-                        [label]="callToAction()!.label"
-                        (click)="callToAction()!.onClick()"
-                        [size]="'small'"
-                        [variant]="'tertiary'" />
-                }
-            </div>
-        </div>`,
-    styleUrl: './banner-alert.scss',
-    standalone: true,
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'banner-alert',
-        '[attr.data-elevated]': 'elevated() || undefined',
-        '[attr.data-variant]': 'variant()',
-        role: 'alert',
-    },
-})
-export class UIBannerAlert implements AsInputSignal<BannerAlertProps> {
-    /** Function to call when the banner alert is closed. */
-    @Output() onClose = new EventEmitter<void>();
-
-    readonly variant = input<BannerAlertProps['variant']>('informational');
-    readonly elevated = input<BannerAlertProps['elevated']>(false);
-    readonly header = input.required<BannerAlertProps['header']>();
-    readonly body = input.required<BannerAlertProps['body']>();
-    readonly callToAction = input<BannerAlertProps['callToAction']>();
-
-    IconClose = IconClose;
-
-    emitClose() {
-        this.onClose?.emit();
-    }
-}

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

@@ -1,61 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { IconAdd } from '../icons/add';
-import { UIBannerAlert } from './banner-alert';
-
-@Component({
-    selector: 'ui-badge-example',
-    standalone: true,
-    imports: [CommonModule, UIBannerAlert],
-    template: `
-        <h2>BannerAlert</h2>
-
-        <h3>Default</h3>
-        <ui-banner-alert header="Example Header" body="Example body text"> </ui-banner-alert>
-
-        <h3>variant="informational"</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" variant="informational"> </ui-banner-alert>
-
-        <h3>variant="success"</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" variant="success"></ui-banner-alert>
-
-        <h3>variant="error"</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" variant="error"></ui-banner-alert>
-
-        <h3>variant="warning"</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" variant="warning"></ui-banner-alert>
-
-        <h3>Elevated</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" [elevated]="true"> </ui-banner-alert>
-
-        <h3>onClose</h3>
-        <ui-banner-alert header="Example Header" body="Example body text" (onClose)="onClose()"> </ui-banner-alert>
-
-        <h3>callToAction</h3>
-        <ui-banner-alert
-            header="Example Header"
-            body="Example body text"
-            [callToAction]="{ label: 'Click me', onClick: onCta }">
-        </ui-banner-alert>
-
-        <h3>onClose + callToAction</h3>
-        <ui-banner-alert
-            header="Example Header"
-            body="Example body text"
-            (onClose)="onClose()"
-            [callToAction]="{ label: 'Click me', onClick: onCta }">
-        </ui-banner-alert>
-    `,
-})
-export class UIBannerAlertExample {
-    protected readonly iconAdd = IconAdd;
-
-    onClose() {
-        sendSnackbar('Banner closed');
-    }
-
-    onCta() {
-        sendSnackbar('Call to action clicked');
-    }
-}

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

@@ -1 +0,0 @@
-export * from './banner-alert'

package/src/lib/breadcrumb/breadcrumb-dropdown.ts

@@ -1,169 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-    Component,
-    ChangeDetectionStrategy,
-    ViewEncapsulation,
-    input,
-    computed,
-    signal,
-    viewChild,
-    AfterViewInit,
-    OnDestroy,
-} from '@angular/core';
-import { AsInputSignal } from '../../types/common';
-import { keydownHandler } from '../../utils/keydown-handler';
-import { uniqueId } from '../../utils/random';
-import { scrollLimitStyle, ScrollLimitStyleProps } from '../../utils/scroll-limit-style';
-import { UIButton } from '../button';
-import { UIFloatingDirective } from '../floating';
-import { IconChevronRight } from '../icons/chevron-right';
-import { IconMoreHoriz } from '../icons/more-horiz';
-import { KeyNavigationUtility } from '../key-navigation';
-import { UIListItem } from '../list-item';
-import { UIMenu } from '../menu';
-import { UIOutsideClickDirective } from '../outside-click';
-import { BreadcrumbItem } from './utils';
-
-export type BreadcrumbDropdownProps = ScrollLimitStyleProps & {
-    items: BreadcrumbItem[];
-    id?: string;
-};
-
-/**
- * The BreadcrumbDropdown component is used to display a dropdown menu within a breadcrumb navigation.
- *
- * @name BreadcrumbDropdown
- * @parent Breadcrumb
- */
-@Component({
-    selector: 'ui-breadcrumb-dropdown',
-    imports: [
-        CommonModule,
-        UIButton,
-        UIListItem,
-        UIMenu,
-        IconChevronRight,
-        UIFloatingDirective,
-        UIOutsideClickDirective,
-    ],
-    template: `
-        <ui-button
-            [icon]="iconMoreHoriz"
-            [label]="'Access to ' + items().length + ' pages'"
-            [iconOnly]="true"
-            variant="tertiary"
-            size="small"
-            [attr.aria-expanded]="!!open() || null"
-            [attr.aria-haspopup]="'listbox'"
-            [attr.aria-controls]="open() ? menuId() : null"
-            (onClick)="toggleMenu()"
-            #reference
-            (keydown)="handleKeydown($event)"
-            [id]="safeId() + '-reference'" />
-        @if (open()) {
-            <ui-menu
-                [ui-outside-click]="{ callback: handleOutsideClick.bind(this) }"
-                [ui-floating]="{ reference: referenceEl }"
-                [id]="menuId()"
-                label="Expanded breadcrumb"
-                owner="Breadcrumb"
-                ariaRole="listbox"
-                [ngStyle]="ngMenuStyle()">
-                @for (item of menuItems(); track item.href) {
-                    <ui-list-item
-                        as="a"
-                        [tabIndex]="-1"
-                        [id]="item.id"
-                        [label]="item.label"
-                        [href]="item.href"
-                        [active]="keyNavigation.activeElementId === item.id" />
-                }
-            </ui-menu>
-        }
-        <icon-chevron-right aria-hidden="true" width="24" />
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        style: 'display: contents;',
-    },
-})
-export class UIBreadcrumbDropdown implements AsInputSignal<BreadcrumbDropdownProps>, AfterViewInit, OnDestroy {
-    readonly iconChevronRight = IconChevronRight;
-    readonly iconMoreHoriz = IconMoreHoriz;
-
-    keyNavigation = new KeyNavigationUtility();
-
-    readonly reference = viewChild<UIButton>('reference');
-
-    readonly id = input<BreadcrumbDropdownProps['id']>(uniqueId('dropdown'));
-    readonly safeId = computed(() => this.id() || uniqueId('dropdown'));
-    readonly menuId = computed(() => `${this.safeId()}-menu`);
-    readonly scrollLimit = input<BreadcrumbDropdownProps['scrollLimit']>();
-    readonly open = signal<boolean>(false);
-    readonly items = input.required<BreadcrumbDropdownProps['items']>();
-    readonly menuItems = computed(() =>
-        this.items().map((item, index) => ({
-            ...item,
-            id: `${this.safeId()}-item-${index}`,
-        })),
-    );
-    readonly ids = computed(() => this.menuItems().map((item) => item.id));
-
-    readonly ngMenuStyle = computed(() => {
-        return {
-            ...scrollLimitStyle(this.scrollLimit(), this.items().length),
-            width: 'fit-content',
-            maxWidth: '300px',
-            minWidth: '150px',
-        };
-    });
-
-    get referenceEl() {
-        return this.reference()!.nativeElement as HTMLElement;
-    }
-
-    handleOutsideClick = (): void => {
-        this.open.set(false);
-    };
-
-    handleKeydown(event: KeyboardEvent): void {
-        if (!this.open()) {
-            keydownHandler({
-                ArrowDown: () => this.toggleMenu(true),
-                'Ctrl+Option+Space': () => this.toggleMenu(true),
-                Space: () => this.toggleMenu(true),
-                Enter: () => this.toggleMenu(true),
-            })(event);
-            return;
-        }
-
-        const SpaceEnter = () => this.keyNavigation.activeElement?.click();
-
-        // all key events run through keyNavigation utility when menu is open
-        this.keyNavigation.handleKeydown(event, {
-            'Ctrl+Option+Space': SpaceEnter,
-            Space: SpaceEnter,
-            Enter: SpaceEnter,
-            Escape: () => {
-                if (this.open()) this.toggleMenu(false);
-            },
-        });
-    }
-
-    ngAfterViewInit(): void {
-        this.keyNavigation.init({ ids: this.ids() });
-    }
-
-    ngOnDestroy(): void {
-        this.keyNavigation.destroy();
-    }
-
-    toggleMenu(force?: boolean) {
-        if (force !== undefined) {
-            this.open.set(force);
-            return;
-        }
-        this.open.update((o) => !o);
-    }
-}

package/src/lib/breadcrumb/breadcrumb.scss

@@ -1,16 +0,0 @@
-[data-bspk='breadcrumb'] {
-    width: 100%;
-
-    ol {
-        display: flex;
-        align-items: center;
-        flex-flow: row wrap;
-        list-style: none;
-        gap: var(--spacing-sizing-02);
-
-        li {
-            display: flex;
-            gap: var(--spacing-sizing-02);
-        }
-    }
-}

package/src/lib/breadcrumb/breadcrumb.spec.ts

@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UIBreadcrumb } from './breadcrumb';
-
-describe('Breadcrumb', () => {
-    let fixture: ComponentFixture<UIBreadcrumb>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIBreadcrumb],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UIBreadcrumb);
-        fixture.componentRef.setInput('items', [
-            { label: 'Item 1', href: '#link-1' },
-            { label: 'Item 2', href: '#link-2' },
-            { label: 'Item 3', href: '#link-3' },
-            { label: 'Item 4', href: '#link-4' },
-            { label: 'Item 5', href: '#link-5' },
-        ]);
-
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/breadcrumb/breadcrumb.ts

@@ -1,111 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';
-
-import { AsInputSignal, CommonProps } from '../../types/common';
-import { uniqueId } from '../../utils/random';
-import { ScrollLimitStyleProps } from '../../utils/scroll-limit-style';
-import { IconChevronRight } from '../icons/chevron-right';
-import { UILinkDirective } from '../link';
-import { UITxtDirective } from '../txt';
-import { UIBreadcrumbDropdown } from './breadcrumb-dropdown';
-import { BreadcrumbItem } from './utils';
-
-export type BreadcrumbProps = CommonProps<'id'> &
-    ScrollLimitStyleProps & {
-        /**
-         * The array of breadcrumb items.
-         *
-         * If **less than 2** items are provided, the component will not render.
-         *
-         * @example
-         *     [
-         *         { label: 'Level 1', href: '#level-1' },
-         *         { label: 'Level 2', href: '#level-2' },
-         *         { label: 'Level 3', href: '#level-3' },
-         *         { label: 'Level 4', href: '#level-4' },
-         *         { label: 'Level 5', href: '#level-5' },
-         *         { label: 'Level 6', href: '#level-6' },
-         *         { label: 'Level 7', href: '#level-7' },
-         *         { label: 'Level 8', href: '#level-8' },
-         *         { label: 'Level 9', href: '#level-9' },
-         *         { label: 'Level 10', href: '#level-10' },
-         *     ];
-         *
-         * @type Array<BreadcrumbItem>
-         * @required
-         */
-        items: BreadcrumbItem[];
-    };
-
-/**
- * Used to indicate the current page's location within a navigational hierarchy.
- *
- * @example
- *     ```html
- *     <ui-breadcrumb
- *         [items]="[
- *             { label: 'Brioche', href: '#brioche' },
- *             { label: 'Whole Wheat', href: '#whole-wheat' },
- *             { label: 'Sourdough', href: '#sourdough' },
- *             { label: 'Rye', href: '#rye' },
- *             { label: 'Multigrain', href: '#multigrain' },
- *             { label: 'Baguette', href: '#baguette' },
- *             { label: 'Focaccia', href: '#focaccia' },
- *             { label: 'Ciabatta', href: '#ciabatta' },
- *             { label: 'Pita', href: '#pita' },
- *             { label: 'Naan', href: '#naan' },
- *             { label: 'Flatbread', href: '#flatbread' }
- *         ]"
- *         [scrollLimit]="5">
- *     </ui-breadcrumb>
- *     ```;
- *
- * @name Breadcrumb
- * @phase Dev
- */
-@Component({
-    selector: 'ui-breadcrumb',
-    template: `@if (shouldRender()) {
-        <nav aria-label="Breadcrumb" [attr.data-bspk]="'breadcrumb'" [attr.id]="id()">
-            <ol>
-                <li>
-                    <a ui-link [href]="firstItem().href">{{ firstItem().label }}</a>
-                    <icon-chevron-right aria-hidden="true" width="24" />
-                </li>
-                @if (items().length > 5) {
-                    <li>
-                        <ui-breadcrumb-dropdown [items]="middleItems()" [id]="id()!" [scrollLimit]="scrollLimit()" />
-                    </li>
-                } @else {
-                    @for (item of middleItems(); track item.href) {
-                        <li>
-                            <a ui-link [href]="item.href">{{ item.label }}</a>
-                            <icon-chevron-right aria-hidden="true" width="24" />
-                        </li>
-                    }
-                }
-                <li [attr.aria-current]="'page'" [ui-txt]="'body-base'">
-                    {{ lastItem().label }}
-                </li>
-            </ol>
-        </nav>
-    }`,
-    styleUrls: ['./breadcrumb.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [CommonModule, UITxtDirective, UIBreadcrumbDropdown, IconChevronRight, UILinkDirective],
-    encapsulation: ViewEncapsulation.None,
-})
-export class UIBreadcrumb implements AsInputSignal<BreadcrumbProps> {
-    readonly items = input.required<BreadcrumbProps['items']>();
-    readonly id = input<BreadcrumbProps['id']>(uniqueId('breadcrumb-'));
-    readonly scrollLimit = input<BreadcrumbProps['scrollLimit']>();
-
-    readonly shouldRender = computed(() => this.items().length >= 2);
-    readonly firstItem = computed(() => this.items()[0]);
-    readonly lastItem = computed(() => this.items()[this.items().length - 1]);
-    readonly middleItems = computed(() =>
-        this.items().length > 2 ? this.items().slice(1, this.items().length - 1) : [],
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/breadcrumb/example.ts

@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UIBreadcrumb, BreadcrumbItem } from './';
-
-@Component({
-    selector: 'ui-breadcrumb-example',
-    standalone: true,
-    imports: [CommonModule, UIBreadcrumb],
-    template: `
-        <h2>Breadcrumb</h2>
-
-        <h3>Minimum (2 Items)</h3>
-        <p>The breadcrumb component requires at least 2 items to display</p>
-        <ui-breadcrumb [items]="minimumItems" />
-
-        <h3>5 Items</h3>
-        <p>Standard breadcrumb with 5 items</p>
-        <ui-breadcrumb [items]="fiveItems" />
-
-        <h3>With Dropdown (6+ Items)</h3>
-        <p>When more than 5 items are provided, the middle items collapse into a dropdown menu</p>
-        <ui-breadcrumb [items]="manyItems" [scrollLimit]="5" />
-
-        <h3>15 Items with Dropdown and Scroll</h3>
-        <p>The dropdown menu becomes scrollable when there are many items</p>
-        <ui-breadcrumb [items]="manyItemsExtended" [scrollLimit]="5" />
-    `,
-})
-export class UIBreadcrumbExample {
-    readonly minimumItems: BreadcrumbItem[] = [
-        { label: 'Item 1', href: 'breadcrumb/#link-1' },
-        { label: 'Item 2', href: 'breadcrumb/#link-2' },
-    ];
-
-    readonly fiveItems: BreadcrumbItem[] = [
-        { label: 'Item 1', href: 'breadcrumb/#link-1' },
-        { label: 'Item 2', href: 'breadcrumb/#link-2' },
-        { label: 'Item 3', href: 'breadcrumb/#link-3' },
-        { label: 'Item 4', href: 'breadcrumb/#link-4' },
-        { label: 'Item 5', href: 'breadcrumb/#link-5' },
-    ];
-
-    readonly manyItems: BreadcrumbItem[] = [
-        { label: 'Item 1', href: 'breadcrumb/#link-1' },
-        { label: 'Item 2', href: 'breadcrumb/#link-2' },
-        { label: 'Item 3', href: 'breadcrumb/#link-3' },
-        { label: 'Item 4', href: 'breadcrumb/#link-4' },
-        { label: 'Item 5', href: 'breadcrumb/#link-5' },
-        { label: 'Item 6', href: 'breadcrumb/#link-6' },
-    ];
-
-    readonly manyItemsExtended: BreadcrumbItem[] = [
-        { label: 'Brioche', href: 'breadcrumb/#brioche' },
-        { label: 'Whole Wheat', href: 'breadcrumb/#whole-wheat' },
-        { label: 'Sourdough', href: 'breadcrumb/#sourdough' },
-        { label: 'Rye', href: 'breadcrumb/#rye' },
-        { label: 'Multigrain', href: 'breadcrumb/#multigrain' },
-        { label: 'Baguette', href: 'breadcrumb/#baguette' },
-        { label: 'Focaccia', href: 'breadcrumb/#focaccia' },
-        { label: 'Ciabatta', href: 'breadcrumb/#ciabatta' },
-        { label: 'Pita', href: 'breadcrumb/#pita' },
-        { label: 'Naan', href: 'breadcrumb/#naan' },
-        { label: 'Flatbread', href: 'breadcrumb/#flatbread' },
-        { label: 'Pumpernickel', href: 'breadcrumb/#pumpernickel' },
-        { label: 'Cornbread', href: 'breadcrumb/#cornbread' },
-        { label: 'Indian Bread', href: 'breadcrumb/#indian-bread' },
-        { label: 'Tortilla', href: 'breadcrumb/#tortilla' },
-    ];
-}

package/src/lib/breadcrumb/index.ts

@@ -1,2 +0,0 @@
-export * from './breadcrumb';
-export * from './utils';

package/src/lib/breadcrumb/utils.ts

@@ -1,22 +0,0 @@
-import { ListItemProps } from '../list-item/list-item';
-
-export interface BreadcrumbItem extends ListItemProps {
-    /**
-     * The label of the breadcrumb item.
-     *
-     * @example
-     *     'Page 1';
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The href of the breadcrumb item.
-     *
-     * @example
-     *     'https://bspk.anywhere.re';
-     *
-     * @required
-     */
-    href: string;
-}