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

package/breadcrumb/index.js

@@ -0,0 +1,212 @@
+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 { 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/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.
+ *
+ * @public
+ */
+class Breadcrumb$1 extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.setItemSeparator(lastNode);
+            this.setLastItemAriaCurrent(lastNode);
+        }
+    }
+    setItemSeparator(lastNode) {
+        this.slottedBreadcrumbItems.forEach((item) => {
+            if (item instanceof BreadcrumbItem) {
+                item.separator = true;
+            }
+        });
+        if (lastNode instanceof BreadcrumbItem) {
+            lastNode.separator = false;
+        }
+    }
+    /**
+     * @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.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            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
+     */
+    setLastItemAriaCurrent(lastNode) {
+        const childNodeWithHref = this.findChildWithHref(lastNode);
+        if (childNodeWithHref === null &&
+            lastNode.hasAttribute("href") &&
+            lastNode instanceof BreadcrumbItem) {
+            lastNode.ariaCurrent = "page";
+        }
+        else if (childNodeWithHref !== null) {
+            childNodeWithHref.setAttribute("aria-current", "page");
+        }
+    }
+}
+__decorate([
+    observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+
+var css_248z = ".list {\n  display: flex;\n}";
+styleInject(css_248z);
+
+class Breadcrumb extends Breadcrumb$1 {}
+
+const vividBreadcrumb = Breadcrumb.compose({
+  baseName: 'breadcrumb',
+  template: breadcrumbTemplate,
+  styles: css_248z
+});
+designSystem.register(vividBreadcrumb());
+
+export { vividBreadcrumb };

package/breadcrumb-item/index.js

@@ -1,25 +1,26 @@
-import { _ as __decorate, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
-import { T as TextAnchor, t as textAnchorTemplate } from '../shared/text-anchor.template.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 { c as classNames } from '../shared/class-names.js';
-import '../shared/web.dom-collections.iterator.js';
-import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
+import '../shared/anchor.js';
 import '../shared/aria-global.js';
+import '../shared/web.dom-collections.iterator.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}";
 styleInject(css_248z);
 
-class BreadcrumbItem extends TextAnchor {
+class BreadcrumbItem extends BreadcrumbItem$1 {
   constructor() {
     super();
-    this.separator = true;
+    this.text = '';
   }
 
 }
 
-__decorate([observable, __metadata("design:type", Boolean)], BreadcrumbItem.prototype, "separator", void 0);
+__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
 
 let _2 = t => t,
     _t,

package/index.js

@@ -5,12 +5,15 @@ export { V as VIVIDFocus } from './shared/index3.js';
 export { v as vividIcon } from './shared/index.js';
 export { VIVIDLayout } from './layout/index.js';
 export { VIVIDElevation } from './elevation/index.js';
+export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+export { vividBreadcrumb } from './breadcrumb/index.js';
 import './shared/index2.js';
-import './shared/text-anchor.template.js';
 import './shared/web.dom-collections.iterator.js';
 import './shared/anchor.js';
 import './shared/apply-mixins.js';
 import './shared/aria-global.js';
+import './shared/text-anchor.template.js';
 import './shared/class-names.js';
 import './shared/affix.js';
 import './shared/style-inject.es.js';
+import './shared/breadcrumb-item.js';

package/lib/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
+export declare class Breadcrumb extends FoundationElement {
+}

package/lib/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
-import { TextAnchor } from '../text-anchor/text-anchor';
-export declare class BreadcrumbItem extends TextAnchor {
-    separator: boolean;
+import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
+export declare class BreadcrumbItem extends FastBreadcrumbItem {
+    text: string;
     constructor();
 }

package/lib/components.d.ts

@@ -5,3 +5,5 @@ export * from './focus';
 export * from './icon';
 export * from './layout';
 export * from './elevation';
+export * from './breadcrumb-item';
+export * from './breadcrumb';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.3",
   "main": "./index.umd.js",
   "module": "./index.esm.js",
   "typings": "./index.d.ts",

package/shared/anchor.js

@@ -75,4 +75,4 @@ __decorate([
 applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
 applyMixins(Anchor, StartEnd, DelegatesARIALink);
 
-export { Anchor as A };
+export { Anchor as A, DelegatesARIALink as D };

package/shared/breadcrumb-item.js

@@ -0,0 +1,25 @@
+import { _ as __decorate, o as observable } from './index2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { A as Anchor, D as DelegatesARIALink } from './anchor.js';
+import { S as StartEnd } from './aria-global.js';
+
+/**
+ * A Breadcrumb Item Custom HTML Element.
+ *
+ * @public
+ */
+class BreadcrumbItem extends Anchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.separator = true;
+    }
+}
+__decorate([
+    observable
+], BreadcrumbItem.prototype, "separator", void 0);
+applyMixins(BreadcrumbItem, StartEnd, DelegatesARIALink);
+
+export { BreadcrumbItem as B };

package/shared/index2.js

@@ -4908,4 +4908,4 @@ function provideVividDesignSystem(element) {
 }
 const designSystem = provideVividDesignSystem();
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, __decorate as _, attr as a, __metadata as b, designSystem as d, emptyArray as e, html as h, observable as o };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, Observable as O, __decorate as _, attr as a, __metadata as b, designSystem as d, emptyArray as e, html as h, observable as o };

package/shared/text-anchor.template.js

@@ -1,19 +1,7 @@
-import './web.dom-collections.iterator.js';
-import { _ as __decorate, a as attr, b as __metadata, h as html } from './index2.js';
-import { A as Anchor } from './anchor.js';
+import { h as html } from './index2.js';
 import { r as ref } from './aria-global.js';
 import { c as classNames } from './class-names.js';
 
-class TextAnchor extends Anchor {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
-
-__decorate([attr, __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
-
 let _2 = t => t,
     _t;
 
@@ -56,4 +44,4 @@ const textAnchorTemplate = () => html(_t || (_t = _2`
     </a>
 `), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), x => x.text);
 
-export { TextAnchor as T, textAnchorTemplate as t };
+export { textAnchorTemplate as t };

package/text-anchor/index.js

@@ -1,11 +1,21 @@
-import { d as designSystem } from '../shared/index2.js';
-import { T as TextAnchor, t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import { _ as __decorate, a as attr, b as __metadata, d as designSystem } from '../shared/index2.js';
 import '../shared/web.dom-collections.iterator.js';
-import '../shared/anchor.js';
+import { A as Anchor } from '../shared/anchor.js';
+import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
 import '../shared/class-names.js';
 
+class TextAnchor extends Anchor {
+  constructor() {
+    super(...arguments);
+    this.text = '';
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
+
 const vividTextAnchor = TextAnchor.compose({
   baseName: 'text-anchor',
   template: textAnchorTemplate