@bspk/ui-ngx 0.0.1 → 0.0.3

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

@@ -1,94 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { ChipProps } from '../chip';
-import { IconAccessible } from '../icons/accessible';
-import { IconAdd } from '../icons/add';
-import { IconBakeryDining } from '../icons/bakery-dining';
-import { IconBlock } from '../icons/block';
-import { IconCloud } from '../icons/cloud';
-import { IconDarkMode } from '../icons/dark-mode';
-import { IconEgg } from '../icons/egg';
-import { IconGarage } from '../icons/garage';
-import { IconIcecream } from '../icons/icecream';
-import { IconLightMode } from '../icons/light-mode';
-import { IconModeCool } from '../icons/mode-cool';
-import { IconPets } from '../icons/pets';
-import { IconPlayPause } from '../icons/play-pause';
-import { IconRemove } from '../icons/remove';
-import { IconReplay } from '../icons/replay';
-import { UIChipGroup } from './chip-group';
-
-@Component({
-    selector: 'ui-chip-group-example',
-    standalone: true,
-    imports: [CommonModule, UIChipGroup],
-    template: `
-        <h2>Chip Group</h2>
-
-        <h3>Basic</h3>
-        <div style="width: 500px">
-            <ui-chip-group [items]="basicChips" />
-        </div>
-
-        <h3>Scroll</h3>
-        <div style="width: 500px">
-            <ui-chip-group
-                overflow="scroll"
-                [items]="[
-                    { label: 'Chip 1', trailingIcon: iconRemove },
-                    { label: 'Chip 2', trailingIcon: iconAdd },
-                    { label: 'Chip 3', trailingBadge: { count: 2 } },
-                    { label: 'Chip 4', trailingIcon: iconReplay },
-                    { label: 'Chip 5 selected = true', trailingIcon: iconPlayPause, selected: true },
-                    { label: 'Chip 6 disabled = true', trailingIcon: iconBlock, disabled: true },
-                ]">
-            </ui-chip-group>
-        </div>
-
-        <h3>Scroll & Flat</h3>
-        <div style="width: 500px">
-            <ui-chip-group
-                overflow="scroll"
-                [items]="[
-                    { label: 'Chip 1', leadingIcon: iconModeCool, flat: true },
-                    { label: 'Chip 2', leadingIcon: iconLightMode, flat: true },
-                    { label: 'Chip 3', leadingIcon: iconCloud, trailingBadge: { count: 2 }, flat: true },
-                    { label: 'Chip 4', leadingIcon: iconAdd, flat: true },
-                    { label: 'Chip 5 selected = true', leadingIcon: iconDarkMode, selected: true, flat: true },
-                    { label: 'Chip 6 disabled = true', leadingIcon: iconEgg, disabled: true, flat: true },
-                ]">
-            </ui-chip-group>
-        </div>
-    `,
-})
-export class UIChipGroupExample {
-    protected readonly basicChips: ChipProps[] = [
-        {
-            label: 'Chip 1',
-            leadingIcon: IconIcecream,
-            click: () => sendSnackbar('Chip 1 clicked'),
-        },
-        { label: 'Chip 2', leadingIcon: IconAccessible },
-        { label: 'Chip 3', leadingIcon: IconAdd, trailingBadge: { count: 2 } },
-        { label: 'Chip 4', leadingIcon: IconGarage },
-        { label: 'Chip 5 selected = true', leadingIcon: IconBakeryDining, selected: true },
-        { label: 'Chip 6 disabled = true', leadingIcon: IconPets, disabled: true },
-    ];
-
-    protected readonly iconIcecream = IconIcecream;
-    protected readonly iconAccessible = IconAccessible;
-    protected readonly iconAdd = IconAdd;
-    protected readonly iconGarage = IconGarage;
-    protected readonly iconBakeryDining = IconBakeryDining;
-    protected readonly iconPets = IconPets;
-    protected readonly iconRemove = IconRemove;
-    protected readonly iconReplay = IconReplay;
-    protected readonly iconPlayPause = IconPlayPause;
-    protected readonly iconBlock = IconBlock;
-    protected readonly iconModeCool = IconModeCool;
-    protected readonly iconLightMode = IconLightMode;
-    protected readonly iconCloud = IconCloud;
-    protected readonly iconDarkMode = IconDarkMode;
-    protected readonly iconEgg = IconEgg;
-}

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

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

package/src/lib/dialog/dialog.scss

@@ -1,204 +0,0 @@
-[data-bspk='dialog'] {
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-index-dialog);
-    display: flex;
-    pointer-events: none; // makes scrim clickable
-
-    --height: 100vh;
-    --width: 100vw;
-
-    [data-dialog-box] {
-        pointer-events: all; // allow pointer events on the dialog box
-        text-align: start;
-        position: absolute;
-        box-shadow: var(--drop-shadow-float);
-        background: var(--surface-neutral-t1-base);
-        color: var(--foreground-neutral-on-surface);
-        max-height: calc(var(--height) - var(--spacing-sizing-24));
-        z-index: 2;
-        width: calc(100% - var(--spacing-sizing-08));
-        animation-name: var(--box-animation-name);
-        animation-duration: 0.5s;
-        animation-iteration-count: 1;
-        animation-fill-mode: forwards;
-        animation-delay: 0;
-
-        > :first-of-type {
-            margin-top: 0;
-        }
-
-        > :last-child {
-            margin-bottom: 0;
-        }
-
-        // we make the width responsive to the viewport
-        @media (width >= 640px) {
-            width: 90%;
-        }
-
-        @media (width >= 768px) {
-            width: 80%;
-        }
-
-        @media (width >= 1024px) {
-            width: 60%;
-        }
-
-        @media (width >= 1280px) {
-            width: 50%;
-        }
-    }
-
-    &[data-placement='center'] {
-        --box-animation-name: fade-in;
-
-        justify-content: center;
-        align-items: center;
-
-        [data-dialog-box] {
-            border-radius: var(--radius-lg);
-        }
-    }
-
-    &[data-placement='bottom'] {
-        --box-animation-name: placement-bottom;
-
-        justify-content: center;
-        align-items: end;
-
-        [data-dialog-box] {
-            border-top-left-radius: var(--radius-lg);
-            border-top-right-radius: var(--radius-lg);
-        }
-    }
-
-    &[data-placement='top'] {
-        --box-animation-name: placement-top;
-
-        justify-content: center;
-        align-items: start;
-
-        [data-dialog-box] {
-            border-bottom-left-radius: var(--radius-lg);
-            border-bottom-right-radius: var(--radius-lg);
-        }
-    }
-
-    &[data-placement='left'] {
-        --box-animation-name: placement-left;
-
-        justify-content: flex-start;
-
-        [data-dialog-box] {
-            max-height: unset;
-            width: 280px;
-            height: var(--height);
-            border-bottom-right-radius: var(--radius-lg);
-            border-top-right-radius: var(--radius-lg);
-        }
-    }
-
-    &[data-placement='right'] {
-        --box-animation-name: placement-right;
-
-        justify-content: flex-end;
-
-        [data-dialog-box] {
-            max-height: unset;
-            width: 280px;
-            height: var(--height);
-            border-bottom-left-radius: var(--radius-lg);
-            border-top-left-radius: var(--radius-lg);
-        }
-    }
-
-    [data-width-full='true'] {
-        width: 100%;
-    }
-
-    &[data-contained] {
-        position: absolute;
-
-        --height: 100%;
-        --width: 100%;
-    }
-
-    @keyframes fade-in {
-        0% {
-            opacity: 0;
-            transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
-        }
-
-        100% {
-            opacity: 1;
-            transform: translate(0, 0);
-        }
-    }
-
-    @keyframes placement-left {
-        0% {
-            opacity: 0;
-        }
-
-        1% {
-            transform: translateX(calc(-1 * var(--width, 100vw)));
-            opacity: 1;
-        }
-
-        100% {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes placement-right {
-        0% {
-            opacity: 0;
-        }
-
-        1% {
-            opacity: 1;
-            transform: translateX(var(--width, 100vw));
-        }
-
-        100% {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-
-    @keyframes placement-top {
-        0% {
-            opacity: 0;
-        }
-
-        1% {
-            opacity: 1;
-            transform: translateY(calc(-1 * var(--height, 100vh)));
-        }
-
-        100% {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes placement-bottom {
-        0% {
-            opacity: 0;
-        }
-
-        1% {
-            opacity: 1;
-            transform: translateY(var(--height, 100vh));
-        }
-
-        100% {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/dialog/dialog.spec.ts

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

package/src/lib/dialog/dialog.ts

@@ -1,148 +0,0 @@
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    Output,
-    ViewEncapsulation,
-    input,
-    signal,
-    OnChanges,
-    OnDestroy,
-    viewChild,
-} from '@angular/core';
-import { UIFocusTrapDirective } from '../focus-trap';
-import { UIPortalDirective } from '../portal';
-import { UIScrim } from '../scrim/scrim';
-
-export type Placement = 'bottom' | 'center' | 'left' | 'right' | 'top';
-
-/**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and may block
- * further interactions until an action is selected.
- *
- * The Modal component is a higher-level component built on top of Dialog that includes standard dialog UI and behavior.
- *
- * Also known as: Tray, Drawer, Flyout, Sheet
- *
- * @example
- *     <ui-dialog [open]="open" (onClose)="open=false">
- *     <div style="padding: var(--spacing-sizing-04)">
- *     <h4>Dialog Title</h4>
- *     <p>This is the content of the dialog.</p>
- *     </div>
- *     </ui-dialog>
- *
- * @name Dialog
- * @phase Dev
- */
-@Component({
-    selector: 'ui-dialog',
-    standalone: true,
-    imports: [UIPortalDirective, UIScrim, UIFocusTrapDirective],
-    template: `
-        @if (open()) {
-            <div
-                [ui-portal]="container()"
-                [attr.data-bspk]="'dialog'"
-                [attr.data-bspk-owner]="owner() || null"
-                [attr.data-contained]="container() ? true : null"
-                [attr.data-placement]="placement()"
-                [attr.id]="id() || null"
-                [attr.aria-label]="ariaLabel() || null"
-                [attr.aria-description]="ariaDescription() || null"
-                role="presentation">
-                <div
-                    data-dialog-box
-                    [ui-focus-trap]="!disableFocusTrap()"
-                    [attr.data-width-full]="widthFull()"
-                    #box
-                    tabindex="-1">
-                    <ng-content></ng-content>
-                </div>
-            </div>
-            <ui-scrim
-                [ui-portal]="container()"
-                [contained]="container() ? true : undefined"
-                owner="dialog"
-                [visible]="showScrim() !== false"
-                (click)="handleClose()" />
-        }
-    `,
-    styleUrl: './dialog.scss',
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        style: 'display: contents;',
-    },
-})
-export class UIDialog implements OnChanges, OnDestroy {
-    /** Function to call when the dialog is closed. */
-    @Output() onClose = new EventEmitter<void>();
-
-    readonly box = viewChild('box', { read: ElementRef });
-
-    /** A ref to the dialog element. */
-    readonly innerRef = input<(el: HTMLDivElement | null) => void>();
-
-    /** If the dialog should appear. */
-    readonly open = input<boolean>(false);
-
-    /** The placement of the dialog on the screen. */
-    readonly placement = input<Placement>('center');
-
-    /** Whether the dialog should have a scrim behind it. */
-    readonly showScrim = input<boolean>(true);
-
-    /** If the dialog should take the full width of the screen. */
-    readonly widthFull = input<boolean>(false);
-
-    /** Owner tag for theming/analytics parity. */
-    readonly owner = input<string | undefined>(undefined);
-
-    /** Element id. */
-    readonly id = input<string | undefined>(undefined);
-
-    /** Portal container element to contain dialog within. */
-    readonly container = input<HTMLElement | undefined>(undefined);
-
-    /** Disable focus trap (not implemented here; Angular users can manage focus as needed). */
-    readonly disableFocusTrap = input<boolean>(false);
-
-    /** Accessible label for the dialog container. */
-    readonly ariaLabel = input<string | undefined>(undefined);
-
-    /** Accessible description for the dialog container. */
-    readonly ariaDescription = input<string | undefined>(undefined);
-
-    private readonly keydownBound = signal(false);
-
-    ngOnChanges() {
-        const isOpen = this.open();
-        // Lock page scroll when open (like React)
-        document.documentElement.style.overflow = isOpen ? 'hidden' : '';
-        if (isOpen && !this.keydownBound()) {
-            window.addEventListener('keydown', this._onKeydown);
-            this.keydownBound.set(true);
-        } else if (!isOpen && this.keydownBound()) {
-            window.removeEventListener('keydown', this._onKeydown);
-            this.keydownBound.set(false);
-        }
-    }
-
-    ngOnDestroy() {
-        document.documentElement.style.overflow = '';
-        if (this.keydownBound()) {
-            window.removeEventListener('keydown', this._onKeydown);
-            this.keydownBound.set(false);
-        }
-    }
-
-    handleClose() {
-        this.onClose.emit();
-    }
-
-    private _onKeydown = (e: KeyboardEvent) => {
-        if (this.open() && e.key === 'Escape') {
-            this.handleClose();
-        }
-    };
-}

package/src/lib/dialog/example.ts

@@ -1,139 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UIButton } from '../button/button';
-import { UIFlexDirective } from '../flex/flex.directive';
-import { IconClose } from '../icons';
-import { Placement, UIDialog } from './dialog';
-
-@Component({
-    selector: 'ui-dialog-example',
-    standalone: true,
-    imports: [CommonModule, UIDialog, UIButton, UIFlexDirective],
-    template: `
-        <h2>Dialog</h2>
-
-        <ui-button label="Open Dialog" (click)="open = true"></ui-button>
-
-        <ui-dialog [open]="open" (onClose)="open = false" placement="center">
-            <div style="padding: var(--spacing-sizing-04)">
-                <div ui-flex direction="row" justify="between" style="margin-bottom: var(--spacing-sizing-04)">
-                    <h4>Dialog Title</h4>
-                    <ui-button
-                        label="Close"
-                        variant="tertiary"
-                        (click)="open = false"
-                        [icon]="iconClose"
-                        [iconOnly]="true" />
-                </div>
-                <p>This is the content of the dialog.</p>
-                <ui-button label="Cancel" variant="secondary" (click)="open = false"></ui-button>
-            </div>
-        </ui-dialog>
-
-        <h3>Contained Dialog (Right, no Scrim)</h3>
-        <div
-            #container
-            style="border: 1px solid var(--stroke-neutral-base); padding: var(--spacing-sizing-04); min-height: 200px; position: relative; overflow: hidden;">
-            <ui-button label="Open Contained" (click)="openContained = true"></ui-button>
-            <ui-dialog
-                [open]="openContained"
-                (onClose)="openContained = false"
-                [showScrim]="false"
-                [container]="container"
-                placement="right">
-                <div style="padding: var(--spacing-sizing-04)">
-                    <div ui-flex align="baseline" justify="between" style="margin-bottom: var(--spacing-sizing-04)">
-                        <h4>Contained</h4>
-                        <ui-button
-                            label="Close"
-                            variant="tertiary"
-                            (click)="openContained = false"
-                            [icon]="iconClose"
-                            [iconOnly]="true" />
-                    </div>
-                    <p>Hello, I am a contained dialog!</p>
-                </div>
-            </ui-dialog>
-        </div>
-
-        @for (placement of placements; track placement) {
-            <h3>Dialog {{ placement }}</h3>
-            <ui-button label="Open {{ placement }} Dialog" (click)="openPlacement[placement] = true"></ui-button>
-
-            <ui-dialog
-                [open]="openPlacement[placement]"
-                (onClose)="openPlacement[placement] = false"
-                [placement]="placement">
-                <div style="padding: var(--spacing-sizing-04)">
-                    <div ui-flex align="baseline" justify="between" style="margin-bottom: var(--spacing-sizing-04)">
-                        <h4>Dialog Title</h4>
-                        <ui-button
-                            label="Close"
-                            variant="tertiary"
-                            (click)="openPlacement[placement] = false"
-                            [icon]="iconClose"
-                            [iconOnly]="true" />
-                    </div>
-                    <p>This is the content of the {{ placement }} dialog.</p>
-                    <ui-button
-                        label="Cancel"
-                        variant="secondary"
-                        (click)="openPlacement[placement] = false"></ui-button>
-                </div>
-            </ui-dialog>
-        }
-
-        <h3>Dialog no scrim</h3>
-        <ui-button label="Open Dialog No Scrim" (click)="openNoScrim = true"></ui-button>
-
-        <ui-dialog [open]="openNoScrim" (onClose)="openNoScrim = false" placement="center" [showScrim]="false">
-            <div style="padding: var(--spacing-sizing-04)">
-                <div ui-flex align="baseline" justify="between" style="margin-bottom: var(--spacing-sizing-04)">
-                    <h4>Dialog Title</h4>
-                    <ui-button
-                        label="Close"
-                        variant="tertiary"
-                        (click)="openNoScrim = false"
-                        [icon]="iconClose"
-                        [iconOnly]="true" />
-                </div>
-                <p>This is the content of the dialog without a scrim.</p>
-                <ui-button label="Cancel" variant="secondary" (click)="openNoScrim = false"></ui-button>
-            </div>
-        </ui-dialog>
-
-        <h3>Dialog width full</h3>
-        <ui-button label="Open Full Width Dialog" (click)="openWidthFull = true"></ui-button>
-
-        <ui-dialog [open]="openWidthFull" (onClose)="openWidthFull = false" placement="center" [widthFull]="true">
-            <div style="padding: var(--spacing-sizing-04)">
-                <div ui-flex align="baseline" justify="between" style="margin-bottom: var(--spacing-sizing-04)">
-                    <h4>Dialog Title</h4>
-                    <ui-button
-                        label="Close"
-                        variant="tertiary"
-                        (click)="openWidthFull = false"
-                        [icon]="iconClose"
-                        [iconOnly]="true" />
-                </div>
-                <p>This is the content of the full width dialog.</p>
-                <ui-button label="Cancel" variant="secondary" (click)="openWidthFull = false"></ui-button>
-            </div>
-        </ui-dialog>
-    `,
-})
-export class UIDialogExample {
-    open = false;
-    openContained = false;
-    openNoScrim = false;
-    openWidthFull = false;
-    openPlacement: Record<(typeof this.placements)[number], boolean> = {
-        top: false,
-        bottom: false,
-        left: false,
-        right: false,
-    };
-    placements: Exclude<Placement, 'center'>[] = ['top', 'bottom', 'left', 'right'];
-
-    iconClose = IconClose;
-}

package/src/lib/dialog/index.ts

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

package/src/lib/divider/divider.scss

@@ -1,45 +0,0 @@
-[data-bspk='divider'] {
-    /*! --inset: is set via inline style */
-
-    display: flex;
-    background-color: var(--stroke-neutral-low);
-    align-self: stretch;
-    place-content: stretch stretch;
-    margin: 0;
-    padding: 0;
-    content: '';
-
-    --length: calc(100% - var(--inset) * 2);
-
-    &,
-    &[data-thickness='light'] {
-        --line-thickness: 1px;
-        --padding: var(--spacing-sizing-02);
-    }
-
-    &[data-thickness='heavy'] {
-        --line-thickness: 2px;
-        --padding: var(--spacing-sizing-04);
-
-        border-radius: var(--radius-full);
-    }
-
-    &, // default
-  &[data-orientation='horizontal'] {
-        min-height: var(--line-thickness);
-        min-width: var(--length);
-        margin: var(--padding) var(--inset);
-    }
-
-    &[data-orientation='vertical'] {
-        min-width: var(--line-thickness);
-        min-height: var(--length);
-        margin: var(--inset) var(--padding);
-    }
-
-    &[data-hide-padding] {
-        --padding: 0;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/divider/divider.spec.ts

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