@bspk/ui-ngx 0.0.1 → 0.0.2

package/src/lib/tag/example.ts

@@ -1,233 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UITag } from './tag';
-
-@Component({
-    selector: 'ui-tag-example',
-    standalone: true,
-    imports: [CommonModule, UITag],
-    template: `
-        <h2>Tag</h2>
-
-        <h3>Default</h3>
-        <ui-tag label="basic tag" />
-
-        <h3>variant = flat</h3>
-        <ui-tag label="flat tag" variant="flat" />
-
-        <h3>variant = corner-wrap</h3>
-        <ui-tag label="corner-wrap" variant="corner-wrap" />
-
-        <h3>variant = pill</h3>
-        <ui-tag label="pill tag" variant="pill" />
-
-        <h3>size = small</h3>
-        <ui-tag label="small tag" size="small" />
-
-        <h3>size = x-small</h3>
-        <ui-tag label="x-small tag" size="x-small" />
-
-        <h3>size = x-small; variant = corner-wrap</h3>
-        <ui-tag label="basic tag" size="x-small" variant="corner-wrap" />
-
-        <h3>size = x-small; variant = pill</h3>
-        <ui-tag label="basic tag" size="x-small" variant="pill" />
-
-        <h3>Color: blue</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="blue" label="basic tag" />
-                <ui-tag color="blue" label="basic pill" variant="pill" />
-                <ui-tag color="blue" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="blue" label="basic tag" size="x-small" />
-                <ui-tag color="blue" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="blue" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: green</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="green" label="basic tag" />
-                <ui-tag color="green" label="basic pill" variant="pill" />
-                <ui-tag color="green" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="green" label="basic tag" size="x-small" />
-                <ui-tag color="green" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="green" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: lime</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="lime" label="basic tag" />
-                <ui-tag color="lime" label="basic pill" variant="pill" />
-                <ui-tag color="lime" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="lime" label="basic tag" size="x-small" />
-                <ui-tag color="lime" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="lime" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: magenta</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="magenta" label="basic tag" />
-                <ui-tag color="magenta" label="basic pill" variant="pill" />
-                <ui-tag color="magenta" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="magenta" label="basic tag" size="x-small" />
-                <ui-tag color="magenta" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="magenta" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: orange</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="orange" label="basic tag" />
-                <ui-tag color="orange" label="basic pill" variant="pill" />
-                <ui-tag color="orange" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="orange" label="basic tag" size="x-small" />
-                <ui-tag color="orange" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="orange" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: pink</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="pink" label="basic tag" />
-                <ui-tag color="pink" label="basic pill" variant="pill" />
-                <ui-tag color="pink" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="pink" label="basic tag" size="x-small" />
-                <ui-tag color="pink" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="pink" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: purple</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="purple" label="basic tag" />
-                <ui-tag color="purple" label="basic pill" variant="pill" />
-                <ui-tag color="purple" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="purple" label="basic tag" size="x-small" />
-                <ui-tag color="purple" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="purple" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: red</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="red" label="basic tag" />
-                <ui-tag color="red" label="basic pill" variant="pill" />
-                <ui-tag color="red" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="red" label="basic tag" size="x-small" />
-                <ui-tag color="red" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="red" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: teal</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="teal" label="basic tag" />
-                <ui-tag color="teal" label="basic pill" variant="pill" />
-                <ui-tag color="teal" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="teal" label="basic tag" size="x-small" />
-                <ui-tag color="teal" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="teal" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: yellow</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="yellow" label="basic tag" />
-                <ui-tag color="yellow" label="basic pill" variant="pill" />
-                <ui-tag color="yellow" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="yellow" label="basic tag" size="x-small" />
-                <ui-tag color="yellow" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="yellow" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: grey</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="grey" label="basic tag" />
-                <ui-tag color="grey" label="basic pill" variant="pill" />
-                <ui-tag color="grey" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="grey" label="basic tag" size="x-small" />
-                <ui-tag color="grey" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="grey" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: white</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="white" label="basic tag" />
-                <ui-tag color="white" label="basic pill" variant="pill" />
-                <ui-tag color="white" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="white" label="basic tag" size="x-small" />
-                <ui-tag color="white" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="white" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: primary</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="primary" label="basic tag" />
-                <ui-tag color="primary" label="basic pill" variant="pill" />
-                <ui-tag color="primary" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="primary" label="basic tag" size="x-small" />
-                <ui-tag color="primary" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="primary" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-
-        <h3>Color: secondary</h3>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="secondary" label="basic tag" />
-                <ui-tag color="secondary" label="basic pill" variant="pill" />
-                <ui-tag color="secondary" label="corner wrap" variant="corner-wrap" />
-            </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                <ui-tag color="secondary" label="basic tag" size="x-small" />
-                <ui-tag color="secondary" label="basic pill" variant="pill" size="x-small" />
-                <ui-tag color="secondary" label="corner wrap" variant="corner-wrap" size="x-small" />
-            </div>
-        </div>
-    `,
-})
-export class UITagExample {}

package/src/lib/tag/index.ts

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

package/src/lib/tag/tag.scss

@@ -1,50 +0,0 @@
-[data-bspk='tag'] {
-    display: inline-flex;
-    align-items: center;
-    position: relative;
-    padding: 0 var(--spacing-sizing-03);
-    border-radius: var(--radius-sm);
-    color: var(--foreground) !important;
-    background: var(--background);
-    font: unset;
-    max-width: 200px;
-    flex-shrink: 0;
-    flex-grow: 0;
-    width: fit-content;
-
-    &[data-variant='pill'] {
-        border-radius: var(--radius-full);
-    }
-
-    &[data-variant='corner-wrap'] {
-        border-bottom-right-radius: 0;
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-small);
-        height: var(--spacing-sizing-08);
-    }
-
-    &[data-size='x-small'] {
-        font: var(--labels-x-small);
-        height: var(--spacing-sizing-06);
-    }
-
-    &[data-color='white'] {
-        box-shadow: var(--drop-shadow-south);
-    }
-
-    [data-triangle] {
-        position: absolute;
-        bottom: -12px;
-        right: 0;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 12px 12px 0 0;
-        border-color: var(--foreground) transparent transparent transparent;
-        transform: rotate(0deg);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/tag/tag.spec.ts

@@ -1,28 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { componentTestProps } from '../../utils/test-props';
-
-import { UITag } from './tag';
-
-describe('UITag', () => {
-    let component: UITag;
-    let fixture: ComponentFixture<UITag>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UITag],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(
-            UITag,
-            componentTestProps<UITag>({
-                label: 'Test Tag',
-            }),
-        );
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

package/src/lib/tag/tag.ts

@@ -1,49 +0,0 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-import { ColorVariant } from '../../utils/color-variants';
-
-@Component({
-    selector: 'ui-tag',
-    standalone: true,
-    imports: [],
-    template: `<span class="truncated">{{ label() }}</span>
-        @if (variant() === 'corner-wrap') {
-            <div data-triangle></div>
-        }`,
-    styleUrls: ['./tag.scss'],
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        'data-bspk': 'tag',
-        '[attr.data-color]': 'color()',
-        '[attr.data-size]': 'size()',
-        '[attr.data-variant]': 'variant()',
-    },
-})
-export class UITag {
-    /**
-     * The label of the tag.
-     *
-     * @required
-     */
-    readonly label = input.required<string>();
-
-    /**
-     * The size of the tag.
-     *
-     * @default small
-     */
-    readonly size = input<'small' | 'x-small'>('small');
-
-    /**
-     * The color of the tag.
-     *
-     * @default grey
-     */
-    readonly color = input<ColorVariant>('grey');
-
-    /**
-     * The display variant of the tag.
-     *
-     * @default flat
-     */
-    readonly variant = input<'corner-wrap' | 'flat' | 'pill'>('flat');
-}

package/src/lib/textarea/example.ts

@@ -1,55 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { UITextarea } from './textarea';
-
-@Component({
-    selector: 'ui-textarea-example',
-    standalone: true,
-    imports: [CommonModule, UITextarea],
-    template: `
-        <h2>Textarea</h2>
-
-        <h3>Default</h3>
-        <ui-textarea name="default" ariaLabel="Textarea" />
-
-        <h3>Disabled</h3>
-        <ui-textarea name="disabled" ariaLabel="Textarea" [disabled]="true" />
-
-        <h3>Invalid</h3>
-        <ui-textarea name="invalid" ariaLabel="Textarea" [invalid]="true" />
-
-        <h3>Required</h3>
-        <ui-textarea name="required" ariaLabel="Textarea" [required]="true" />
-
-        <h3>Read Only</h3>
-        <ui-textarea name="readonly" ariaLabel="Textarea" [readOnly]="true" />
-
-        <h3>Placeholder</h3>
-        <ui-textarea name="placeholder" ariaLabel="Textarea" placeholder="Type here..." />
-
-        <h3>size = small</h3>
-        <ui-textarea name="small" ariaLabel="Textarea" size="small" />
-
-        <h3>size = medium</h3>
-        <ui-textarea name="medium" ariaLabel="Textarea" size="medium" />
-
-        <h3>size = large</h3>
-        <ui-textarea name="large" ariaLabel="Textarea" size="large" />
-
-        <h3>maxLength</h3>
-        <ui-textarea name="maxlength" ariaLabel="Textarea" [maxLength]="120" placeholder="Max 120 chars" />
-
-        <h3>minRows (2) / maxRows (4)</h3>
-        <ui-textarea
-            name="minmaxrows"
-            ariaLabel="Textarea"
-            [minRows]="2"
-            [maxRows]="4"
-            value="Line 1
-Line 2
-Line 3
-Line 4" />
-        <p>The minimum value for minRows is 3 so setting it to 2 will default to 3.</p>
-    `,
-})
-export class UITextareaExample {}

package/src/lib/textarea/index.ts

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

package/src/lib/textarea/textarea.scss

@@ -1,118 +0,0 @@
-[data-bspk='textarea'] {
-    /*! 
-    --min-rows: is set via inline style 
-    --max-rows: is set via inline style
-    */
-
-    display: grid;
-    width: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    color: var(--foreground-neutral-on-surface);
-    background-color: var(--surface-neutral-t1-base);
-
-    --border-color: var(--stroke-neutral-base);
-
-    // &[data-size='medium']
-    --font: var(--body-base);
-    --line-height: 20px;
-    --padding: var(--spacing-sizing-03);
-
-    &[data-size='small'] {
-        --font: var(--body-small);
-        --line-height: 20px;
-        --padding: var(--spacing-sizing-02);
-    }
-
-    &[data-size='large'] {
-        --font: var(--body-large);
-        --line-height: 24px;
-        --padding: var(--spacing-sizing-03);
-    }
-
-    &:has(textarea:focus-within) {
-        --border-color: var(--stroke-neutral-focus);
-    }
-
-    &:has(textarea[aria-invalid]) {
-        --border-color: var(--status-error);
-    }
-
-    [data-replicated-value] {
-        white-space: pre-wrap;
-        visibility: hidden;
-        overflow-y: hidden;
-    }
-
-    textarea,
-    [data-replicated-value] {
-        width: 100%;
-        font: var(--font);
-        padding: var(--padding);
-        border: none;
-        background: transparent;
-        grid-area: 1 / 1 / 2 / 2;
-        min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));
-        max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));
-        max-width: 100%;
-    }
-
-    textarea {
-        text-wrap: break-word;
-
-        &::placeholder {
-            color: var(--foreground-neutral-on-surface-variant-03);
-        }
-
-        resize: none;
-        color: inherit;
-        background-color: inherit;
-        outline: none;
-    }
-
-    &:hover:not(:focus-within) {
-        background:
-            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &:active:not(:focus-within) {
-        background:
-            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &[data-readonly] {
-        --border-color: var(--stroke-neutral-disabled-light);
-
-        background:
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &[data-disabled],
-    &:has([data-main-input][disabled]) {
-        --border-color: var(--stroke-neutral-disabled-light);
-
-        background:
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-
-        & > * {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    &[data-invalid] {
-        --border-color: var(--status-error);
-    }
-
-    &:focus-within {
-        --border-color: var(--stroke-neutral-focus);
-
-        outline: 1px solid var(--stroke-neutral-focus);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/textarea/textarea.spec.ts

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