@ni/nimble-components 34.3.0 → 34.3.1

package/dist/esm/breadcrumb/breadcrumb.foundation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/breadcrumb/breadcrumb.foundation.spec.js

@@ -0,0 +1,109 @@
+import { breadcrumbItemTemplate } from '@ni/fast-foundation';
+import { DOM } from '@ni/fast-element';
+import { Breadcrumb } from '.';
+import { breadcrumbTemplate as template } from './template';
+import { fixture } from '../utilities/tests/fixture';
+import { BreadcrumbItem } from '../breadcrumb-item';
+const fastBreadcrumb = Breadcrumb.compose({
+    baseName: 'breadcrumb',
+    template
+});
+const fastBreadcrumbItem = BreadcrumbItem.compose({
+    baseName: 'breadcrumb-item',
+    breadcrumbItemTemplate
+});
+async function setup() {
+    const { element, connect, disconnect } = await fixture([
+        fastBreadcrumb(),
+        fastBreadcrumbItem()
+    ]);
+    const item1 = document.createElement('fast-breadcrumb-item');
+    const item2 = document.createElement('fast-breadcrumb-item');
+    const item3 = document.createElement('fast-breadcrumb-item');
+    element.appendChild(item1);
+    element.appendChild(item2);
+    element.appendChild(item3);
+    return { element, connect, disconnect, item1, item2, item3 };
+}
+describe('Breadcrumb', () => {
+    it('should include a `role` of `navigation`', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        expect(element.getAttribute('role')).toEqual('navigation');
+        await disconnect();
+    });
+    it('should include a `role` of `list`', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        expect(element.shadowRoot?.querySelector("[role='list']")).not.toEqual(null);
+        await disconnect();
+    });
+    it('should not render a separator on last item', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        const items = element.querySelectorAll('fast-breadcrumb-item');
+        const lastItem = items[items.length - 1];
+        expect(lastItem?.separator).toEqual(false);
+        await disconnect();
+    });
+    it('should set the `aria-current` on the internal, last node, anchor when `href` is passed', async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+        const anchor1 = document.createElement('a');
+        anchor1.href = '#';
+        const anchor2 = document.createElement('a');
+        anchor2.href = '#';
+        const anchor3 = document.createElement('a');
+        anchor3.href = '#';
+        item1.appendChild(anchor1);
+        item2.appendChild(anchor2);
+        item3.appendChild(anchor3);
+        await connect();
+        expect(element.querySelectorAll('a[href]')[2]?.getAttribute('aria-current')).toEqual('page');
+        await disconnect();
+    });
+    it('should remove aria-current from any prior Breadcrumb Item children with hrefs when a new node is appended', async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+        item1.setAttribute('href', '#');
+        item2.setAttribute('href', '#');
+        item3.setAttribute('href', '#');
+        await connect();
+        expect(element
+            .querySelectorAll('fast-breadcrumb-item')[2]
+            ?.getAttribute('aria-current')).toEqual('page');
+        const item4 = document.createElement('fast-breadcrumb-item');
+        item4.setAttribute('href', '#');
+        element.appendChild(item4);
+        await DOM.nextUpdate();
+        expect(element
+            .querySelectorAll('fast-breadcrumb-item')[2]
+            ?.hasAttribute('aria-current')).toEqual(false);
+        expect(element
+            .querySelectorAll('fast-breadcrumb-item')[3]
+            ?.getAttribute('aria-current')).toEqual('page');
+        await disconnect();
+    });
+    it('should remove aria-current from any prior Breadcrumb Item children with child anchors when a new node is appended', async () => {
+        const { element, connect, disconnect, item1, item2, item3 } = await setup();
+        const anchor1 = document.createElement('a');
+        anchor1.href = '#';
+        const anchor2 = document.createElement('a');
+        anchor2.href = '#';
+        const anchor3 = document.createElement('a');
+        anchor3.href = '#';
+        item1.appendChild(anchor1);
+        item2.appendChild(anchor2);
+        item3.appendChild(anchor3);
+        await connect();
+        expect(element.querySelectorAll('a[href]')[2]?.getAttribute('aria-current')).toEqual('page');
+        const item4 = document.createElement('fast-breadcrumb-item');
+        const anchor4 = document.createElement('a');
+        anchor4.href = '#';
+        item4.appendChild(anchor4);
+        element.appendChild(item4);
+        await DOM.nextUpdate();
+        expect(element.querySelectorAll('a[href]')[2]?.hasAttribute('aria-current')).toEqual(false);
+        expect(element.querySelectorAll('a[href]')[3]?.getAttribute('aria-current')).toEqual('page');
+        await disconnect();
+    });
+});
+//# sourceMappingURL=breadcrumb.foundation.spec.js.map

package/dist/esm/breadcrumb/breadcrumb.foundation.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.foundation.spec.js","sourceRoot":"","sources":["../../../src/breadcrumb/breadcrumb.foundation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { breadcrumbItemTemplate } from '@ni/fast-foundation';\nimport { DOM } from '@ni/fast-element';\nimport { Breadcrumb } from '.';\nimport { breadcrumbTemplate as template } from './template';\nimport { fixture } from '../utilities/tests/fixture';\nimport { BreadcrumbItem } from '../breadcrumb-item';\n\nconst fastBreadcrumb = Breadcrumb.compose({\n    baseName: 'breadcrumb',\n    template\n});\n\nconst fastBreadcrumbItem = BreadcrumbItem.compose({\n    baseName: 'breadcrumb-item',\n    breadcrumbItemTemplate\n});\n\ninterface BreadcrumbTestSetup {\n    element: Breadcrumb;\n    connect: () => Promise<void>;\n    disconnect: () => Promise<void>;\n    item1: BreadcrumbItem;\n    item2: BreadcrumbItem;\n    item3: BreadcrumbItem;\n}\n\nasync function setup(): Promise<BreadcrumbTestSetup> {\n    const { element, connect, disconnect } = await fixture<Breadcrumb>([\n        fastBreadcrumb(),\n        fastBreadcrumbItem()\n    ]);\n\n    const item1 = document.createElement(\n        'fast-breadcrumb-item'\n    ) as BreadcrumbItem;\n    const item2 = document.createElement(\n        'fast-breadcrumb-item'\n    ) as BreadcrumbItem;\n    const item3 = document.createElement(\n        'fast-breadcrumb-item'\n    ) as BreadcrumbItem;\n\n    element.appendChild(item1);\n    element.appendChild(item2);\n    element.appendChild(item3);\n\n    return { element, connect, disconnect, item1, item2, item3 };\n}\n\ndescribe('Breadcrumb', () => {\n    it('should include a `role` of `navigation`', async () => {\n        const { element, connect, disconnect } = await setup();\n\n        await connect();\n\n        expect(element.getAttribute('role')).toEqual('navigation');\n\n        await disconnect();\n    });\n\n    it('should include a `role` of `list`', async () => {\n        const { element, connect, disconnect } = await setup();\n\n        await connect();\n\n        expect(element.shadowRoot?.querySelector(\"[role='list']\")).not.toEqual(\n            null\n        );\n\n        await disconnect();\n    });\n\n    it('should not render a separator on last item', async () => {\n        const { element, connect, disconnect } = await setup();\n\n        await connect();\n\n        const items: NodeListOf<BreadcrumbItem> = element.querySelectorAll(\n            'fast-breadcrumb-item'\n        );\n\n        const lastItem: BreadcrumbItem | undefined = items[items.length - 1];\n\n        expect(lastItem?.separator).toEqual(false);\n\n        await disconnect();\n    });\n\n    it('should set the `aria-current` on the internal, last node, anchor when `href` is passed', async () => {\n        const { element, connect, disconnect, item1, item2, item3 } = await setup();\n\n        const anchor1 = document.createElement('a');\n        anchor1.href = '#';\n\n        const anchor2 = document.createElement('a');\n        anchor2.href = '#';\n\n        const anchor3 = document.createElement('a');\n        anchor3.href = '#';\n\n        item1.appendChild(anchor1);\n        item2.appendChild(anchor2);\n        item3.appendChild(anchor3);\n\n        await connect();\n\n        expect(\n            element.querySelectorAll('a[href]')[2]?.getAttribute('aria-current')\n        ).toEqual('page');\n\n        await disconnect();\n    });\n\n    it('should remove aria-current from any prior Breadcrumb Item children with hrefs when a new node is appended', async () => {\n        const { element, connect, disconnect, item1, item2, item3 } = await setup();\n\n        item1.setAttribute('href', '#');\n        item2.setAttribute('href', '#');\n        item3.setAttribute('href', '#');\n\n        await connect();\n\n        expect(\n            element\n                .querySelectorAll('fast-breadcrumb-item')[2]\n                ?.getAttribute('aria-current')\n        ).toEqual('page');\n\n        const item4 = document.createElement('fast-breadcrumb-item');\n        (item4 as BreadcrumbItem).setAttribute('href', '#');\n        element.appendChild(item4);\n\n        await DOM.nextUpdate();\n\n        expect(\n            element\n                .querySelectorAll('fast-breadcrumb-item')[2]\n                ?.hasAttribute('aria-current')\n        ).toEqual(false);\n\n        expect(\n            element\n                .querySelectorAll('fast-breadcrumb-item')[3]\n                ?.getAttribute('aria-current')\n        ).toEqual('page');\n\n        await disconnect();\n    });\n\n    it('should remove aria-current from any prior Breadcrumb Item children with child anchors when a new node is appended', async () => {\n        const { element, connect, disconnect, item1, item2, item3 } = await setup();\n\n        const anchor1 = document.createElement('a');\n        anchor1.href = '#';\n\n        const anchor2 = document.createElement('a');\n        anchor2.href = '#';\n\n        const anchor3 = document.createElement('a');\n        anchor3.href = '#';\n\n        item1.appendChild(anchor1);\n        item2.appendChild(anchor2);\n        item3.appendChild(anchor3);\n\n        await connect();\n\n        expect(\n            element.querySelectorAll('a[href]')[2]?.getAttribute('aria-current')\n        ).toEqual('page');\n\n        const item4 = document.createElement('fast-breadcrumb-item');\n        const anchor4 = document.createElement('a');\n        anchor4.href = '#';\n\n        item4.appendChild(anchor4);\n        element.appendChild(item4);\n\n        await DOM.nextUpdate();\n\n        expect(\n            element.querySelectorAll('a[href]')[2]?.hasAttribute('aria-current')\n        ).toEqual(false);\n\n        expect(\n            element.querySelectorAll('a[href]')[3]?.getAttribute('aria-current')\n        ).toEqual('page');\n\n        await disconnect();\n    });\n});\n"]}

package/dist/esm/breadcrumb/index.d.ts

@@ -10,5 +10,36 @@ declare global {
  */
 export declare class Breadcrumb extends FoundationBreadcrumb {
     appearance: BreadcrumbAppearance;
+    /**
+     * @internal
+     */
+    showScrollButtons: boolean;
+    /**
+     * A reference to the list div
+     * @internal
+     */
+    list: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly leftScrollButton?: HTMLElement;
+    private readonly listResizeObserver;
+    constructor();
+    /**
+     * @internal
+     */
+    onScrollLeftClick(): void;
+    /**
+     * @internal
+     */
+    onScrollRightClick(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
 }
 export declare const breadcrumbTag = "nimble-breadcrumb";

package/dist/esm/breadcrumb/index.js

@@ -1,15 +1,69 @@
 import { __decorate } from "tslib";
-import { attr } from '@ni/fast-element';
-import { DesignSystem, Breadcrumb as FoundationBreadcrumb, breadcrumbTemplate as template } from '@ni/fast-foundation';
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem, Breadcrumb as FoundationBreadcrumb } from '@ni/fast-foundation';
+import { breadcrumbTemplate as template } from './template';
 import { styles } from './styles';
 /**
  * A nimble-styled breadcrumb
  */
 export class Breadcrumb extends FoundationBreadcrumb {
+    constructor() {
+        super();
+        /**
+         * @internal
+         */
+        this.showScrollButtons = false;
+        this.listResizeObserver = new ResizeObserver(entries => {
+            let listVisibleWidth = entries[0]?.contentRect.width;
+            if (listVisibleWidth !== undefined) {
+                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                listVisibleWidth = Math.ceil(listVisibleWidth);
+                if (this.showScrollButtons) {
+                    listVisibleWidth += buttonWidth * 2;
+                }
+                this.showScrollButtons = listVisibleWidth < this.list.scrollWidth;
+            }
+        });
+    }
+    /**
+     * @internal
+     */
+    onScrollLeftClick() {
+        this.list.scrollBy({
+            left: -this.list.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+    /**
+     * @internal
+     */
+    onScrollRightClick() {
+        this.list.scrollBy({
+            left: this.list.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.listResizeObserver.observe(this.list);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.listResizeObserver.disconnect();
+    }
 }
 __decorate([
     attr
 ], Breadcrumb.prototype, "appearance", void 0);
+__decorate([
+    observable
+], Breadcrumb.prototype, "showScrollButtons", void 0);
 const nimbleBreadcrumb = Breadcrumb.compose({
     baseName: 'breadcrumb',
     baseClass: FoundationBreadcrumb,

package/dist/esm/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACH,YAAY,EACZ,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EACjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAGnD;AADU;IADN,IAAI;8CACmC;AAG5C,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    Breadcrumb as FoundationBreadcrumb,\n    breadcrumbTemplate as template\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport type { BreadcrumbAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-breadcrumb': Breadcrumb;\n    }\n}\n\n/**\n * A nimble-styled breadcrumb\n */\nexport class Breadcrumb extends FoundationBreadcrumb {\n    @attr\n    public appearance: BreadcrumbAppearance;\n}\n\nconst nimbleBreadcrumb = Breadcrumb.compose({\n    baseName: 'breadcrumb',\n    baseClass: FoundationBreadcrumb,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());\nexport const breadcrumbTag = 'nimble-breadcrumb';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,YAAY,EACZ,UAAU,IAAI,oBAAoB,EACrC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;IAsBhD;QACI,KAAK,EAAE,CAAC;QAnBZ;;WAEG;QAEI,sBAAiB,GAAG,KAAK,CAAC;QAgB7B,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACnD,IAAI,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;YACrD,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;gBACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,IAAI,CAAC,CAAC;gBAC5D,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAC/C,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACzB,gBAAgB,IAAI,WAAW,GAAG,CAAC,CAAC;gBACxC,CAAC;gBACD,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;YACtE,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACI,iBAAiB;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YACf,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW;YAC5B,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACI,kBAAkB;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW;YAC3B,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED;;OAEG;IACa,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,CAAC;IACzC,CAAC;CACJ;AAtEU;IADN,IAAI;8CACmC;AAMjC;IADN,UAAU;qDACsB;AAkErC,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    Breadcrumb as FoundationBreadcrumb\n} from '@ni/fast-foundation';\nimport { breadcrumbTemplate as template } from './template';\nimport { styles } from './styles';\nimport type { BreadcrumbAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-breadcrumb': Breadcrumb;\n    }\n}\n\n/**\n * A nimble-styled breadcrumb\n */\nexport class Breadcrumb extends FoundationBreadcrumb {\n    @attr\n    public appearance: BreadcrumbAppearance;\n\n    /**\n     * @internal\n     */\n    @observable\n    public showScrollButtons = false;\n\n    /**\n     * A reference to the list div\n     * @internal\n     */\n    public list!: HTMLElement;\n    /**\n     * @internal\n     */\n    public readonly leftScrollButton?: HTMLElement;\n\n    private readonly listResizeObserver: ResizeObserver;\n\n    public constructor() {\n        super();\n        this.listResizeObserver = new ResizeObserver(entries => {\n            let listVisibleWidth = entries[0]?.contentRect.width;\n            if (listVisibleWidth !== undefined) {\n                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;\n                listVisibleWidth = Math.ceil(listVisibleWidth);\n                if (this.showScrollButtons) {\n                    listVisibleWidth += buttonWidth * 2;\n                }\n                this.showScrollButtons = listVisibleWidth < this.list.scrollWidth;\n            }\n        });\n    }\n\n    /**\n     * @internal\n     */\n    public onScrollLeftClick(): void {\n        this.list.scrollBy({\n            left: -this.list.clientWidth,\n            behavior: 'smooth'\n        });\n    }\n\n    /**\n     * @internal\n     */\n    public onScrollRightClick(): void {\n        this.list.scrollBy({\n            left: this.list.clientWidth,\n            behavior: 'smooth'\n        });\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.listResizeObserver.observe(this.list);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.listResizeObserver.disconnect();\n    }\n}\n\nconst nimbleBreadcrumb = Breadcrumb.compose({\n    baseName: 'breadcrumb',\n    baseClass: FoundationBreadcrumb,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());\nexport const breadcrumbTag = 'nimble-breadcrumb';\n"]}

package/dist/esm/breadcrumb/styles.js

@@ -1,12 +1,33 @@
 import { css } from '@ni/fast-element';
 import { display } from '../utilities/style/display';
-import { bodyEmphasizedFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
+import { bodyEmphasizedFont, linkFontColor, linkProminentFontColor, smallPadding } from '../theme-provider/design-tokens';
 export const styles = css `
-    ${display('inline-block')}
+    ${display('inline-flex')}
+
+    :host {
+        flex-direction: row;
+    }
+
+    .scroll-button.left {
+        margin-right: ${smallPadding};
+    }
 
     .list {
-        display: flex;
-        flex-wrap: wrap;
+        display: inline-flex;
+        max-width: 100%;
+        width: max-content;
+        align-self: end;
+        overflow-x: scroll;
+        scrollbar-width: none;
+    }
+
+    .scroll-button.right {
+        margin-left: ${smallPadding};
+    }
+
+    ::slotted(*) {
+        flex-shrink: 0;
+        white-space: nowrap;
     }
 
     ::slotted(:last-child) {

package/dist/esm/breadcrumb/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;;;;;gBAQb,kBAAkB;iBACjB,aAAa;;;;iBAIb,sBAAsB;;CAEtC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyEmphasizedFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    .list {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    ::slotted(:last-child) {\n        font: ${bodyEmphasizedFont};\n        color: ${linkFontColor};\n    }\n\n    :host([appearance='prominent']) ::slotted(:last-child) {\n        color: ${linkProminentFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;wBAOJ,YAAY;;;;;;;;;;;;;uBAab,YAAY;;;;;;;;;gBASnB,kBAAkB;iBACjB,aAAa;;;;iBAIb,sBAAsB;;CAEtC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyEmphasizedFont,\n    linkFontColor,\n    linkProminentFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        flex-direction: row;\n    }\n\n    .scroll-button.left {\n        margin-right: ${smallPadding};\n    }\n\n    .list {\n        display: inline-flex;\n        max-width: 100%;\n        width: max-content;\n        align-self: end;\n        overflow-x: scroll;\n        scrollbar-width: none;\n    }\n\n    .scroll-button.right {\n        margin-left: ${smallPadding};\n    }\n\n    ::slotted(*) {\n        flex-shrink: 0;\n        white-space: nowrap;\n    }\n\n    ::slotted(:last-child) {\n        font: ${bodyEmphasizedFont};\n        color: ${linkFontColor};\n    }\n\n    :host([appearance='prominent']) ::slotted(:last-child) {\n        color: ${linkProminentFontColor};\n    }\n`;\n"]}

package/dist/esm/breadcrumb/template.d.ts

@@ -0,0 +1,8 @@
+import type { ViewTemplate } from '@ni/fast-element';
+import type { FoundationElementTemplate } from '@ni/fast-foundation';
+import type { Breadcrumb } from '.';
+/**
+ * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
+ * @public
+ */
+export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;

package/dist/esm/breadcrumb/template.js

@@ -0,0 +1,44 @@
+import { elements, html, ref, slotted, when } from '@ni/fast-element';
+import { buttonTag } from '../button';
+import { ButtonAppearance } from '../button/types';
+import { scrollBackwardLabel, scrollForwardLabel } from '../label-provider/core/label-tokens';
+import { iconArrowExpanderLeftTag } from '../icons/arrow-expander-left';
+import { iconArrowExpanderRightTag } from '../icons/arrow-expander-right';
+/**
+ * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
+ * @public
+ */
+// prettier-ignore
+export const breadcrumbTemplate = (_context, _definition) => html `
+    <template role="navigation">
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag} 
+                content-hidden
+                class="scroll-button left"
+                appearance="${ButtonAppearance.ghost}"
+                @click="${x => x.onScrollLeftClick()}"
+                ${ref('leftScrollButton')}
+            >
+                ${x => scrollForwardLabel.getValueFor(x)}
+                <${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>
+            </${buttonTag}>
+        `)}
+        <div ${ref('list')} role="list" class="list" part="list" tabindex="-1">
+            <slot
+                ${slotted({ property: 'slottedBreadcrumbItems', filter: elements() })}
+            ></slot>
+        </div>
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag}
+                content-hidden
+                class="scroll-button right"
+                appearance="${ButtonAppearance.ghost}"
+                @click="${x => x.onScrollRightClick()}"
+            >
+                ${x => scrollBackwardLabel.getValueFor(x)}
+                <${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        `)}
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/breadcrumb/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/breadcrumb/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAItE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACH,mBAAmB,EACnB,kBAAkB,EACrB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE1E;;;GAGG;AACH,kBAAkB;AAClB,MAAM,CAAC,MAAM,kBAAkB,GAAwD,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,CAAC,IAAI,CAAA;;UAE5G,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAY;eAC1C,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;0BAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;kBAClC,GAAG,CAAC,kBAAkB,CAAC;;kBAEvB,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;mBACrC,wBAAwB,mBAAmB,wBAAwB;gBACtE,SAAS;SAChB,CAAC;eACK,GAAG,CAAC,MAAM,CAAC;;kBAER,OAAO,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;;UAG3E,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAY;eAC1C,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;0BAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;kBAEnC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;mBACtC,yBAAyB,mBAAmB,yBAAyB;gBACxE,SAAS;SAChB,CAAC;;CAET,CAAC","sourcesContent":["import { elements, html, ref, slotted, when } from '@ni/fast-element';\nimport type { ViewTemplate } from '@ni/fast-element';\nimport type { FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { Breadcrumb } from '.';\nimport { buttonTag } from '../button';\nimport { ButtonAppearance } from '../button/types';\nimport {\n    scrollBackwardLabel,\n    scrollForwardLabel\n} from '../label-provider/core/label-tokens';\nimport { iconArrowExpanderLeftTag } from '../icons/arrow-expander-left';\nimport { iconArrowExpanderRightTag } from '../icons/arrow-expander-right';\n\n/**\n * The template for the {@link @ni/fast-foundation#Breadcrumb} component.\n * @public\n */\n// prettier-ignore\nexport const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>> = (_context, _definition) => html`\n    <template role=\"navigation\">\n        ${when(x => x.showScrollButtons, html<Breadcrumb>`\n            <${buttonTag} \n                content-hidden\n                class=\"scroll-button left\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                @click=\"${x => x.onScrollLeftClick()}\"\n                ${ref('leftScrollButton')}\n            >\n                ${x => scrollForwardLabel.getValueFor(x)}\n                <${iconArrowExpanderLeftTag} slot=\"start\"></${iconArrowExpanderLeftTag}>\n            </${buttonTag}>\n        `)}\n        <div ${ref('list')} role=\"list\" class=\"list\" part=\"list\" tabindex=\"-1\">\n            <slot\n                ${slotted({ property: 'slottedBreadcrumbItems', filter: elements() })}\n            ></slot>\n        </div>\n        ${when(x => x.showScrollButtons, html<Breadcrumb>`\n            <${buttonTag}\n                content-hidden\n                class=\"scroll-button right\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                @click=\"${x => x.onScrollRightClick()}\"\n            >\n                ${x => scrollBackwardLabel.getValueFor(x)}\n                <${iconArrowExpanderRightTag} slot=\"start\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        `)}\n    </template>\n`;\n"]}

package/dist/esm/breadcrumb/testing/breadcrumb.pageobject.d.ts

@@ -0,0 +1,19 @@
+import { type Breadcrumb } from '..';
+/**
+ * Page object for the `nimble-breadcrumb`
+ */
+export declare class BreadcrumbPageObject {
+    protected readonly breadcrumbElement: Breadcrumb;
+    constructor(breadcrumbElement: Breadcrumb);
+    clickBreadcrumb(index: number): Promise<void>;
+    pressKeyOnBreadcrumb(index: number, key: string): Promise<void>;
+    setBreadcrumbWidth(width: number): Promise<void>;
+    clickScrollLeftButton(): Promise<void>;
+    clickScrollRightButton(): Promise<void>;
+    areScrollButtonsVisible(): boolean;
+    addBreadcrumbItem(label: string): Promise<void>;
+    removeBreadcrumbItemByIndex(index: number): Promise<void>;
+    updateBreadcrumbItemLabel(index: number, label: string): Promise<void>;
+    scrollBreadcrumbItemIntoViewByIndex(index: number): Promise<void>;
+    getBreadcrumbViewScrollOffset(): number;
+}

package/dist/esm/breadcrumb/testing/breadcrumb.pageobject.js

@@ -0,0 +1,89 @@
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { waitTimeout } from '../../utilities/testing/component';
+import {} from '..';
+import { breadcrumbItemTag } from '../../breadcrumb-item';
+/**
+ * Page object for the `nimble-breadcrumb`
+ */
+export class BreadcrumbPageObject {
+    constructor(breadcrumbElement) {
+        this.breadcrumbElement = breadcrumbElement;
+    }
+    async clickBreadcrumb(index) {
+        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {
+            throw new Error(`Breadcrumb with index ${index} not found`);
+        }
+        this.breadcrumbElement.slottedBreadcrumbItems[index].click();
+        await waitForUpdatesAsync();
+    }
+    async pressKeyOnBreadcrumb(index, key) {
+        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {
+            throw new Error(`Breadcrumb with index ${index} not found`);
+        }
+        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index];
+        breadcrumb.dispatchEvent(new KeyboardEvent('keydown', { key }));
+        await waitForUpdatesAsync();
+    }
+    async setBreadcrumbWidth(width) {
+        this.breadcrumbElement.style.width = `${width}px`;
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for the resize observer to fire
+    }
+    async clickScrollLeftButton() {
+        const leftButton = this.breadcrumbElement.shadowRoot.querySelector('.scroll-button.left');
+        if (!leftButton) {
+            throw new Error('Scroll left button not found');
+        }
+        leftButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    async clickScrollRightButton() {
+        const rightButton = this.breadcrumbElement.shadowRoot.querySelector('.scroll-button.right');
+        if (!rightButton) {
+            throw new Error('Scroll right button not found');
+        }
+        rightButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    areScrollButtonsVisible() {
+        return (this.breadcrumbElement.shadowRoot.querySelectorAll('.scroll-button').length > 0);
+    }
+    async addBreadcrumbItem(label) {
+        const breadcrumbItem = document.createElement(breadcrumbItemTag);
+        breadcrumbItem.textContent = label;
+        const lastBreadcrumbItem = this.breadcrumbElement.querySelector(`${breadcrumbItemTag}:last-of-type`);
+        lastBreadcrumbItem.insertAdjacentElement('afterend', breadcrumbItem);
+        await waitForUpdatesAsync();
+    }
+    async removeBreadcrumbItemByIndex(index) {
+        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {
+            throw new Error(`Breadcrumb item with index ${index} not found`);
+        }
+        const breadcrumbItemToRemove = this.breadcrumbElement.slottedBreadcrumbItems[index];
+        breadcrumbItemToRemove?.remove();
+        await waitForUpdatesAsync();
+    }
+    async updateBreadcrumbItemLabel(index, label) {
+        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {
+            throw new Error(`Breadcrumb item with index ${index} not found`);
+        }
+        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index];
+        breadcrumb.textContent = label;
+        await waitForUpdatesAsync();
+    }
+    async scrollBreadcrumbItemIntoViewByIndex(index) {
+        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {
+            throw new Error(`Breadcrumb item with index ${index} not found`);
+        }
+        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index];
+        breadcrumb.scrollIntoView();
+        await waitForUpdatesAsync();
+    }
+    getBreadcrumbViewScrollOffset() {
+        return this.breadcrumbElement.shadowRoot.querySelector('.list')
+            .scrollLeft;
+    }
+}
+//# sourceMappingURL=breadcrumb.pageobject.js.map

package/dist/esm/breadcrumb/testing/breadcrumb.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.pageobject.js","sourceRoot":"","sources":["../../../../src/breadcrumb/testing/breadcrumb.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Button } from '../../button';\nimport { waitForUpdatesAsync } from '../../testing/async-helpers';\nimport { waitTimeout } from '../../utilities/testing/component';\nimport { type Breadcrumb } from '..';\nimport { breadcrumbItemTag } from '../../breadcrumb-item';\n\n/**\n * Page object for the `nimble-breadcrumb`\n */\nexport class BreadcrumbPageObject {\n    public constructor(protected readonly breadcrumbElement: Breadcrumb) {}\n\n    public async clickBreadcrumb(index: number): Promise<void> {\n        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {\n            throw new Error(`Breadcrumb with index ${index} not found`);\n        }\n        this.breadcrumbElement.slottedBreadcrumbItems[index]!.click();\n        await waitForUpdatesAsync();\n    }\n\n    public async pressKeyOnBreadcrumb(\n        index: number,\n        key: string\n    ): Promise<void> {\n        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {\n            throw new Error(`Breadcrumb with index ${index} not found`);\n        }\n        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index]!;\n        breadcrumb.dispatchEvent(new KeyboardEvent('keydown', { key }));\n        await waitForUpdatesAsync();\n    }\n\n    public async setBreadcrumbWidth(width: number): Promise<void> {\n        this.breadcrumbElement.style.width = `${width}px`;\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync(); // wait for the resize observer to fire\n    }\n\n    public async clickScrollLeftButton(): Promise<void> {\n        const leftButton = this.breadcrumbElement.shadowRoot!.querySelector<Button>(\n            '.scroll-button.left'\n        );\n        if (!leftButton) {\n            throw new Error('Scroll left button not found');\n        }\n        leftButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public async clickScrollRightButton(): Promise<void> {\n        const rightButton = this.breadcrumbElement.shadowRoot!.querySelector<Button>(\n            '.scroll-button.right'\n        );\n        if (!rightButton) {\n            throw new Error('Scroll right button not found');\n        }\n        rightButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public areScrollButtonsVisible(): boolean {\n        return (\n            this.breadcrumbElement.shadowRoot!.querySelectorAll(\n                '.scroll-button'\n            ).length > 0\n        );\n    }\n\n    public async addBreadcrumbItem(label: string): Promise<void> {\n        const breadcrumbItem = document.createElement(breadcrumbItemTag);\n        breadcrumbItem.textContent = label;\n        const lastBreadcrumbItem = this.breadcrumbElement.querySelector(\n            `${breadcrumbItemTag}:last-of-type`\n        )!;\n        lastBreadcrumbItem.insertAdjacentElement('afterend', breadcrumbItem);\n        await waitForUpdatesAsync();\n    }\n\n    public async removeBreadcrumbItemByIndex(index: number): Promise<void> {\n        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {\n            throw new Error(`Breadcrumb item with index ${index} not found`);\n        }\n        const breadcrumbItemToRemove = this.breadcrumbElement.slottedBreadcrumbItems[index];\n        breadcrumbItemToRemove?.remove();\n        await waitForUpdatesAsync();\n    }\n\n    public async updateBreadcrumbItemLabel(\n        index: number,\n        label: string\n    ): Promise<void> {\n        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {\n            throw new Error(`Breadcrumb item with index ${index} not found`);\n        }\n        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index]!;\n        breadcrumb.textContent = label;\n        await waitForUpdatesAsync();\n    }\n\n    public async scrollBreadcrumbItemIntoViewByIndex(\n        index: number\n    ): Promise<void> {\n        if (index >= this.breadcrumbElement.slottedBreadcrumbItems.length) {\n            throw new Error(`Breadcrumb item with index ${index} not found`);\n        }\n        const breadcrumb = this.breadcrumbElement.slottedBreadcrumbItems[index]!;\n        breadcrumb.scrollIntoView();\n        await waitForUpdatesAsync();\n    }\n\n    public getBreadcrumbViewScrollOffset(): number {\n        return this.breadcrumbElement.shadowRoot!.querySelector('.list')!\n            .scrollLeft;\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "34.3.0",
+  "version": "34.3.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
@@ -102,6 +102,7 @@
   },
   "devDependencies": {
     "@ni-private/eslint-config-nimble": "*",
+    "@ni-private/jasmine-extensions": "^0.0.1",
     "@ni/jasmine-parameterized": "^1.0.1",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",