Merge pull request #58 from umbraco/bugfix/breadcrumbs

Bugfix/Breadcrumbs

Author: madsrasmussen

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts

@@ -20,11 +20,6 @@ export class UUIBreadcrumbItemElement extends LitElement {
         color: currentColor;
       }
 
-      :host(:last-of-type) [part='separator'],
-      :host([last-item]) [part='separator'] {
-        display: none;
-      }
-
       [part='separator']::after {
         content: '/';
         speak: never;
@@ -71,10 +66,18 @@ export class UUIBreadcrumbItemElement extends LitElement {
   @property({ type: Boolean, attribute: 'last-item' })
   lastItem = false;
 
+  renderLinkAndSeparator() {
+    return html`<a id="link" href=${this.href}><slot></slot></a
+      ><span part="separator"></span>`;
+  }
+
+  renderCurrent() {
+    return html`<span id="last-item"><slot></slot></span>`;
+  }
+
   render() {
     return html`${this.lastItem
-        ? html`<span id="last-item"><slot></slot></span>`
-        : html`<a id="link" href=${this.href}><slot></slot></a>`}<span
-        part="separator"></span>`;
+      ? this.renderCurrent()
+      : this.renderLinkAndSeparator()}`;
   }
 }

packages/uui-breadcrumbs/lib/uui-breadcrumbs.element.ts

@@ -1,5 +1,4 @@
 import { css, html, LitElement } from 'lit';
-import { queryAssignedNodes } from 'lit/decorators.js';
 import { UUIBreadcrumbItemElement } from './uui-breadcrumb-item.element';
 
 /**
@@ -26,28 +25,27 @@ export class UUIBreadcrumbsElement extends LitElement {
     `,
   ];
 
-  @queryAssignedNodes(undefined, true, 'uui-breadcrumb-item')
-  _breadcrumbs?: UUIBreadcrumbItemElement[];
-
-  private _setLastItem() {
-    if (this._breadcrumbs) {
-      this._breadcrumbs[this._breadcrumbs.length - 1].lastItem = true;
-      this._breadcrumbs[this._breadcrumbs.length - 1].setAttribute(
-        'aria-current',
-        'page'
-      );
-    }
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('aria-label', 'breadcrumb');
     this.setAttribute('role', 'navigation');
   }
 
+  handleSlotChange() {
+    const breadcrumbNodes = this.querySelectorAll('uui-breadcrumb-item');
+    const breadcrumbs = Array.from(
+      breadcrumbNodes
+    ) as UUIBreadcrumbItemElement[];
+
+    if (breadcrumbs?.length > 0) {
+      breadcrumbs[breadcrumbs.length - 1].lastItem = true;
+      breadcrumbs[breadcrumbs.length - 1].setAttribute('aria-current', 'page');
+    }
+  }
+
   render() {
     return html`<ol id="breadcrumbs-list">
-      <slot @slotchange=${this._setLastItem}></slot>
+      <slot @slotchange=${this.handleSlotChange}></slot>
     </ol>`;
   }
 }