@bspk/ui-ngx 0.0.1 → 0.0.3

package/src/lib/tooltip/tooltip.scss

@@ -1,65 +0,0 @@
-[data-bspk='tooltip'] {
-    position: fixed;
-    pointer-events: none;
-    z-index: var(--z-index-tooltip-popover);
-
-    [data-text] {
-        display: block;
-        z-index: 2;
-        position: relative;
-        background-color: var(--surface-neutral-inverse);
-        border-radius: var(--radius-sm);
-        color: var(--foreground-neutral-on-inverse-surface);
-        box-shadow: var(--drop-shadow-float);
-        font: var(--labels-small);
-        padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
-        border: none;
-        transition: opacity 0.2s ease-in-out;
-        max-width: 300px;
-        word-wrap: break-word;
-    }
-
-    --arrow-size: var(--spacing-sizing-01);
-    --arrow-offset: calc(var(--arrow-size) * -2);
-    --arrow-color: var(--surface-neutral-inverse);
-
-    [data-arrow] {
-        display: block;
-        z-index: 1;
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
-        border-color: transparent;
-    }
-
-    &[data-placement='bottom'] {
-        [data-arrow] {
-            top: var(--arrow-offset);
-            border-bottom-color: var(--arrow-color);
-        }
-    }
-
-    &[data-placement='top'] {
-        [data-arrow] {
-            border-top-color: var(--arrow-color);
-        }
-    }
-
-    &[data-placement='right'] {
-        [data-arrow] {
-            margin-left: var(--arrow-offset);
-            border-right-color: var(--arrow-color);
-        }
-    }
-
-    &[data-placement='left'] {
-        [data-arrow] {
-            right: var(--arrow-offset);
-            border-left-color: var(--arrow-color);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/tooltip/tooltip.spec.ts

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UITooltipDirective } from './tooltip.directive';
-
-@Component({
-    selector: 'ui-host',
-    standalone: true,
-    imports: [UITooltipDirective],
-    template: `<span [ui-tooltip]="'Hello tooltip'">Hover me</span>`,
-})
-class HostComponent {}
-
-describe('UITooltipDirective', () => {
-    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/tooltip/tooltip.ts

@@ -1,137 +0,0 @@
-import { ComponentRef, Renderer2, signal } from '@angular/core';
-
-import { addComponent } from '../../utils/add-component';
-import { uniqueId } from '../../utils/random';
-import { FloatingUtility } from '../floating/floating';
-import { TooltipProps, TooltipPlacement, UITooltip } from './';
-
-export type TooltipUtilityProps = TooltipProps & { reference?: HTMLElement };
-
-/**
- * Utility to manage tooltip properties and behavior.
- *
- * Should be used in components that require tooltip functionality.
- */
-export class TooltipUtility {
-    readonly props = signal<TooltipUtilityProps>({});
-
-    readonly tooltipId = uniqueId('tooltip');
-
-    private floating: FloatingUtility | undefined;
-    private readonly computedPlacement = signal<TooltipPlacement | null>(null);
-    private tooltipComponent?: ComponentRef<UITooltip> | null;
-
-    constructor(
-        private renderer: Renderer2,
-        private env: any,
-        props: Partial<TooltipUtilityProps>,
-    ) {
-        this.updateProps(props);
-
-        const host = props.reference;
-
-        this.floating = new FloatingUtility(this.renderer);
-
-        if (typeof document === 'undefined' || !host) return;
-
-        host.addEventListener('mouseenter', this.handleOpenEvent.bind(this));
-        host.addEventListener('mouseleave', this.handleCloseEvent.bind(this));
-        host.addEventListener('focusin', this.handleOpenEvent.bind(this));
-        host.addEventListener('blur', this.handleCloseEvent.bind(this));
-
-        if (!this.referenceEl || !this.props().label) return;
-
-        this.renderer.setAttribute(this.referenceEl, 'aria-labelledby', this.tooltipId);
-
-        this.addComponent(this.props());
-    }
-
-    get referenceEl() {
-        return this.props().reference || null;
-    }
-
-    get tooltipEl() {
-        return this.tooltipComponent?.location.nativeElement as HTMLElement;
-    }
-
-    get arrowEl() {
-        return this.tooltipComponent?.instance.arrowElement as HTMLElement;
-    }
-
-    updateProps(next: Partial<TooltipUtilityProps>) {
-        const props = {
-            ...this.props(),
-            ...next,
-        };
-
-        this.props.set(props);
-
-        if (this.tooltipComponent) {
-            this.tooltipComponent.instance.props.set({
-                ...props,
-
-                // ensure placement is always up to date
-                placement: this.computedPlacement() || props.placement,
-            });
-            this.tooltipComponent.changeDetectorRef.detectChanges();
-        }
-    }
-
-    destroy() {
-        const host = this.props().reference;
-
-        if (typeof document === 'undefined' || !host) return;
-
-        host.removeEventListener('mouseenter', this.handleOpenEvent.bind(this));
-        host.removeEventListener('mouseleave', this.handleCloseEvent.bind(this));
-        host.removeEventListener('focusin', this.handleOpenEvent.bind(this));
-        host.removeEventListener('blur', this.handleCloseEvent.bind(this));
-    }
-
-    addComponent(props = this.props()): boolean {
-        if (
-            // if we can't render or already rendered or disabled or no label we can't show
-            typeof document === 'undefined' ||
-            !this.referenceEl ||
-            !props.label
-        ) {
-            return false;
-        }
-
-        this.tooltipComponent = addComponent(this.env, UITooltip, 'ui-tooltip')!;
-
-        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'none');
-        this.tooltipComponent.instance.id.set(this.tooltipId);
-        this.updateProps(props);
-        return true;
-    }
-
-    handleOpenEvent(event: Event) {
-        const props = this.props();
-
-        if (!props.label || event.target !== this.referenceEl || props.disabled || !this.floating) return;
-
-        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'block');
-
-        this.floating
-            .compute({
-                placement: this.props()?.placement || 'top',
-                reference: this.referenceEl,
-                floating: this.tooltipEl,
-                arrow: this.arrowEl,
-                offsetOptions: this.arrowEl ? 8 : 4,
-                refWidth: false,
-            })
-            .then(({ placement }) => {
-                if (this.tooltipEl && placement !== this.props()?.placement)
-                    this.computedPlacement.set(placement as TooltipPlacement);
-            });
-    }
-
-    handleCloseEvent() {
-        const { label } = this.props();
-        if (!label) return;
-
-        if (this.tooltipEl) this.renderer.setStyle(this.tooltipEl, 'display', 'none');
-    }
-}

package/src/lib/txt/example.ts

@@ -1,39 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UITxtDirective } from './txt.directive';
-
-@Component({
-    selector: 'ui-txt-example',
-    standalone: true,
-    imports: [CommonModule, UITxtDirective],
-    template: `
-        <h2>Txt Directive</h2>
-
-        <div ui-txt="body-base">body-base</div>
-        <div ui-txt="body-large">body-large</div>
-        <div ui-txt="body-small">body-small</div>
-        <div ui-txt="body-x-small">body-x-small</div>
-        <div ui-txt="display-regular-large">display-regular-large</div>
-        <div ui-txt="display-regular-medium">display-regular-medium</div>
-        <div ui-txt="display-regular-small">display-regular-small</div>
-        <div ui-txt="display-semibold-large">display-semibold-large</div>
-        <div ui-txt="display-semibold-medium">display-semibold-medium</div>
-        <div ui-txt="display-semibold-small">display-semibold-small</div>
-        <div ui-txt="heading-h2">heading-h2</div>
-        <div ui-txt="heading-h2">heading-h2</div>
-        <div ui-txt="heading-h3">heading-h3</div>
-        <div ui-txt="heading-h4">heading-h4</div>
-        <div ui-txt="heading-h5">heading-h5</div>
-        <div ui-txt="heading-h6">heading-h6</div>
-        <div ui-txt="labels-base">labels-base</div>
-        <div ui-txt="labels-large">labels-large</div>
-        <div ui-txt="labels-small">labels-small</div>
-        <div ui-txt="labels-x-small">labels-x-small</div>
-        <div ui-txt="subheader-large">subheader-large</div>
-        <div ui-txt="subheader-medium">subheader-medium</div>
-        <div ui-txt="subheader-x-large">subheader-x-large</div>
-        <div ui-txt="subheader-xx-large">subheader-xx-large</div>
-        <div ui-txt="subheader-xxx-large">subheader-xxx-large</div>
-    `,
-})
-export class UITxtExample {}

package/src/lib/txt/index.ts

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

package/src/lib/txt/txt.directive.ts

@@ -1,40 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-
-export type TxtVariant =
-    | 'body-base'
-    | 'body-large'
-    | 'body-small'
-    | 'body-x-small'
-    | 'display-regular-large'
-    | 'display-regular-medium'
-    | 'display-regular-small'
-    | 'display-semibold-large'
-    | 'display-semibold-medium'
-    | 'display-semibold-small'
-    | 'heading-h1'
-    | 'heading-h2'
-    | 'heading-h3'
-    | 'heading-h4'
-    | 'heading-h5'
-    | 'heading-h6'
-    | 'labels-base'
-    | 'labels-large'
-    | 'labels-small'
-    | 'labels-x-small'
-    | 'subheader-large'
-    | 'subheader-medium'
-    | 'subheader-x-large'
-    | 'subheader-xx-large'
-    | 'subheader-xxx-large';
-
-@Directive({
-    selector: '[ui-txt]',
-    host: {
-        '[attr.data-txt]': 'variant()',
-        '[style.font]': 'font()',
-    },
-})
-export class UITxtDirective {
-    readonly variant = input<TxtVariant | ''>('body-base', { alias: 'ui-txt' });
-    readonly font = computed(() => `var(--${this.variant() || 'body-base'})`);
-}

package/src/services/theme.ts

@@ -1,28 +0,0 @@
-// create an angular service to manage theme setting and getting
-import { DOCUMENT, effect, inject, Injectable, signal } from '@angular/core';
-
-export type Theme = 'dark' | 'light';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class ThemeService {
-    document = inject(DOCUMENT);
-
-    readonly value = signal<Theme>('light');
-
-    private readonly themeKey = 'theme-preference';
-
-    constructor() {
-        effect(() => {
-            const theme = this.value();
-            this.document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem(this.themeKey, theme);
-        });
-    }
-
-    toggle(): void {
-        const newTheme: Theme = this.value() === 'dark' ? 'light' : 'dark';
-        this.value.set(newTheme);
-    }
-}

package/src/testutils/hasNoBasicA11yIssues.ts

@@ -1,16 +0,0 @@
-import { ComponentFixture } from '@angular/core/testing';
-import { axe } from 'jest-axe';
-
-/**
- * A utility function to test for basic accessibility issues using jest-axe.
- *
- * @example
- *
- * @param ComponentFixture - A component fixture representing the component to be tested.
- * @returns An async function that performs the accessibility test.
- */
-export const hasNoBasicA11yIssues = async (fixture: ComponentFixture<unknown>) => {
-    const results = await axe(fixture.nativeElement);
-
-    return expect(results).toHaveNoViolations();
-};