@vonage/vivid 3.0.0-next.3 → 3.0.0-next.32

package/breadcrumb/index.js

@@ -1,142 +1,15 @@
-import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective, h as html, F as FoundationElement, _ as __decorate, o as observable, d as designSystem } from '../shared/index2.js';
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, d as designSystem } from '../shared/index.js';
+import { s as slotted, e as elements } from '../shared/slotted.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { B as BreadcrumbItem } from '../shared/breadcrumb-item.js';
-import '../shared/apply-mixins.js';
 import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
 
-/**
- * Creates a function that can be used to filter a Node array, selecting only elements.
- * @param selector - An optional selector to restrict the filter to.
- * @public
- */
-function elements(selector) {
-    if (selector) {
-        return function (value, index, array) {
-            return value.nodeType === 1 && value.matches(selector);
-        };
-    }
-    return function (value, index, array) {
-        return value.nodeType === 1;
-    };
-}
-/**
- * A base class for node observation.
- * @internal
- */
-class NodeObservationBehavior {
-    /**
-     * Creates an instance of NodeObservationBehavior.
-     * @param target - The target to assign the nodes property on.
-     * @param options - The options to use in configuring node observation.
-     */
-    constructor(target, options) {
-        this.target = target;
-        this.options = options;
-        this.source = null;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source) {
-        const name = this.options.property;
-        this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
-        this.source = source;
-        this.updateTarget(this.computeNodes());
-        if (this.shouldUpdate) {
-            this.observe();
-        }
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    unbind() {
-        this.updateTarget(emptyArray);
-        this.source = null;
-        if (this.shouldUpdate) {
-            this.disconnect();
-        }
-    }
-    /** @internal */
-    handleEvent() {
-        this.updateTarget(this.computeNodes());
-    }
-    computeNodes() {
-        let nodes = this.getNodes();
-        if (this.options.filter !== void 0) {
-            nodes = nodes.filter(this.options.filter);
-        }
-        return nodes;
-    }
-    updateTarget(value) {
-        this.source[this.options.property] = value;
-    }
-}
-
-/**
- * The runtime behavior for slotted node observation.
- * @public
- */
-class SlottedBehavior extends NodeObservationBehavior {
-    /**
-     * Creates an instance of SlottedBehavior.
-     * @param target - The slot element target to observe.
-     * @param options - The options to use when observing the slot.
-     */
-    constructor(target, options) {
-        super(target, options);
-    }
-    /**
-     * Begins observation of the nodes.
-     */
-    observe() {
-        this.target.addEventListener("slotchange", this);
-    }
-    /**
-     * Disconnects observation of the nodes.
-     */
-    disconnect() {
-        this.target.removeEventListener("slotchange", this);
-    }
-    /**
-     * Retrieves the nodes that should be assigned to the target.
-     */
-    getNodes() {
-        return this.target.assignedNodes(this.options);
-    }
-}
-/**
- * A directive that observes the `assignedNodes()` of a slot and updates a property
- * whenever they change.
- * @param propertyOrOptions - The options used to configure slotted node observation.
- * @public
- */
-function slotted(propertyOrOptions) {
-    if (typeof propertyOrOptions === "string") {
-        propertyOrOptions = { property: propertyOrOptions };
-    }
-    return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
-}
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.
- * @public
- */
-const breadcrumbTemplate = (context, definition) => html `
-    <template role="navigation">
-        <div role="list" class="list" part="list">
-            <slot
-                ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
-            ></slot>
-        </div>
-    </template>
-`;
-
 /**
  * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
  *
  * @public
  */
@@ -148,22 +21,19 @@ class Breadcrumb$1 extends FoundationElement {
                 return;
             }
             const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-            this.setItemSeparator(lastNode);
-            this.setLastItemAriaCurrent(lastNode);
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
         }
     }
-    setItemSeparator(lastNode) {
-        this.slottedBreadcrumbItems.forEach((item) => {
-            if (item instanceof BreadcrumbItem) {
-                item.separator = true;
-            }
-        });
-        if (lastNode instanceof BreadcrumbItem) {
-            lastNode.separator = false;
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem) {
+            item.separator = !isLastNode;
         }
     }
     /**
-     * @internal
      * Finds href on childnodes in the light DOM or shadow DOM.
      * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
      */
@@ -179,17 +49,23 @@ class Breadcrumb$1 extends FoundationElement {
             return null;
     }
     /**
-     *  If child node with an anchor tag and with href is found then apply aria-current to child node otherwise apply aria-current to the host element, with an href
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
      */
-    setLastItemAriaCurrent(lastNode) {
-        const childNodeWithHref = this.findChildWithHref(lastNode);
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
         if (childNodeWithHref === null &&
-            lastNode.hasAttribute("href") &&
-            lastNode instanceof BreadcrumbItem) {
-            lastNode.ariaCurrent = "page";
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
         }
         else if (childNodeWithHref !== null) {
-            childNodeWithHref.setAttribute("aria-current", "page");
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
         }
     }
 }
@@ -197,6 +73,21 @@ __decorate([
     observable
 ], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
+let _ = t => t,
+    _t;
+const breadcrumbTemplate = () => html(_t || (_t = _`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${0}
+      ></slot>
+    </div>
+	</nav>
+`), slotted({
+  property: 'slottedBreadcrumbItems',
+  filter: elements()
+}));
+
 var css_248z = ".list {\n  display: flex;\n}";
 styleInject(css_248z);
 

package/breadcrumb-item/index.js

@@ -1,21 +1,31 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { B as BreadcrumbItem$1 } from '../shared/breadcrumb-item.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
-import { w as when } from '../shared/index.js';
+import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/apply-mixins.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/focus.js';
 import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
+import '../shared/affix.js';
 import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/focus2.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-on-canvas);\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-on-canvas);\n}\n.base vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-70);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-70);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class BreadcrumbItem extends BreadcrumbItem$1 {
   constructor() {
     super();
-    this.text = '';
   }
 
 }
@@ -28,16 +38,16 @@ let _2 = t => t,
     _t3,
     _t4;
 
-const getClasses = _ => classNames('control', 'breadcrumb-item');
+const getClasses = _ => classNames('base');
 
 const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
-      <div roll="listitem" part="listitem" class="${0}">
+      <div role="listitem" class="${0}">
         ${0}
 
   ${0}
 
         ${0}
-      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate())), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-line"></vwc-icon>`))));
+      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-solid"></vwc-icon>`))));
 
 const vividBreadcrumbItem = BreadcrumbItem.compose({
   baseName: 'breadcrumb-item',