@vonage/vivid 3.0.0 → 3.1.0

package/shared/calendar-event.js

@@ -0,0 +1,19 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, n as nullableNumberConverter } from './index.js';
+
+class CalendarEvent extends FoundationElement {}
+__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "heading", void 0);
+__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "description", void 0);
+__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "appearance", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter,
+  attribute: 'overlap-count'
+}), __metadata("design:type", Number)], CalendarEvent.prototype, "overlapCount", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+}), __metadata("design:type", Number)], CalendarEvent.prototype, "start", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+}), __metadata("design:type", Number)], CalendarEvent.prototype, "duration", void 0);
+
+export { CalendarEvent as C };

package/shared/definition.js

@@ -0,0 +1,225 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { A as AccordionItem, a as accordionItemRegistries } from './definition2.js';
+import { k as keyEnd, a as keyHome, b as keyArrowDown, c as keyArrowUp } from './key-codes.js';
+import { w as wrapInBounds } from './numbers.js';
+import { s as slotted, e as elements } from './slotted.js';
+import { c as classNames } from './class-names.js';
+
+/**
+ * Expand mode for {@link Accordion}
+ * @public
+ */
+const AccordionExpandMode = {
+    /**
+     * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
+     */
+    single: "single",
+    /**
+     * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+     */
+    multi: "multi",
+};
+/**
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
+ * @public
+ *
+ * @remarks
+ * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.
+ */
+class Accordion$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls the expand mode of the Accordion, either allowing
+         * single or multiple item expansion.
+         * @public
+         *
+         * @remarks
+         * HTML attribute: expand-mode
+         */
+        this.expandmode = AccordionExpandMode.multi;
+        this.activeItemIndex = 0;
+        this.change = () => {
+            this.$emit("change", this.activeid);
+        };
+        this.setItems = () => {
+            var _a;
+            if (this.accordionItems.length === 0) {
+                return;
+            }
+            this.accordionIds = this.getItemIds();
+            this.accordionItems.forEach((item, index) => {
+                if (item instanceof AccordionItem) {
+                    item.addEventListener("change", this.activeItemChange);
+                    if (this.isSingleExpandMode()) {
+                        this.activeItemIndex !== index
+                            ? (item.expanded = false)
+                            : (item.expanded = true);
+                    }
+                }
+                const itemId = this.accordionIds[index];
+                item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+                this.activeid = this.accordionIds[this.activeItemIndex];
+                item.addEventListener("keydown", this.handleItemKeyDown);
+                item.addEventListener("focus", this.handleItemFocus);
+            });
+            if (this.isSingleExpandMode()) {
+                const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
+                expandedItem.setAttribute("aria-disabled", "true");
+            }
+        };
+        this.removeItemListeners = (oldValue) => {
+            oldValue.forEach((item, index) => {
+                item.removeEventListener("change", this.activeItemChange);
+                item.removeEventListener("keydown", this.handleItemKeyDown);
+                item.removeEventListener("focus", this.handleItemFocus);
+            });
+        };
+        this.activeItemChange = (event) => {
+            if (event.defaultPrevented || event.target !== event.currentTarget) {
+                return;
+            }
+            event.preventDefault();
+            const selectedItem = event.target;
+            this.activeid = selectedItem.getAttribute("id");
+            if (this.isSingleExpandMode()) {
+                this.resetItems();
+                selectedItem.expanded = true;
+                selectedItem.setAttribute("aria-disabled", "true");
+                this.accordionItems.forEach((item) => {
+                    if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
+                        item.removeAttribute("aria-disabled");
+                    }
+                });
+            }
+            this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
+            this.change();
+        };
+        this.handleItemKeyDown = (event) => {
+            // only handle the keydown if the event target is the accordion item
+            // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
+            if (event.target !== event.currentTarget) {
+                return;
+            }
+            this.accordionIds = this.getItemIds();
+            switch (event.key) {
+                case keyArrowUp:
+                    event.preventDefault();
+                    this.adjust(-1);
+                    break;
+                case keyArrowDown:
+                    event.preventDefault();
+                    this.adjust(1);
+                    break;
+                case keyHome:
+                    this.activeItemIndex = 0;
+                    this.focusItem();
+                    break;
+                case keyEnd:
+                    this.activeItemIndex = this.accordionItems.length - 1;
+                    this.focusItem();
+                    break;
+            }
+        };
+        this.handleItemFocus = (event) => {
+            // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
+            // only do so if the focus is actually on the accordion item and not on any of its children
+            if (event.target === event.currentTarget) {
+                const focusedItem = event.target;
+                const focusedIndex = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
+                if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
+                    this.activeItemIndex = focusedIndex;
+                    this.activeid = this.accordionIds[this.activeItemIndex];
+                }
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    accordionItemsChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.removeItemListeners(oldValue);
+            this.setItems();
+        }
+    }
+    findExpandedItem() {
+        for (let item = 0; item < this.accordionItems.length; item++) {
+            if (this.accordionItems[item].getAttribute("expanded") === "true") {
+                return this.accordionItems[item];
+            }
+        }
+        return null;
+    }
+    resetItems() {
+        this.accordionItems.forEach((item, index) => {
+            item.expanded = false;
+        });
+    }
+    getItemIds() {
+        return this.accordionItems.map((accordionItem) => {
+            return accordionItem.getAttribute("id");
+        });
+    }
+    isSingleExpandMode() {
+        return this.expandmode === AccordionExpandMode.single;
+    }
+    adjust(adjustment) {
+        this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
+        this.focusItem();
+    }
+    focusItem() {
+        const element = this.accordionItems[this.activeItemIndex];
+        if (element instanceof AccordionItem) {
+            element.expandbutton.focus();
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "expand-mode" })
+], Accordion$1.prototype, "expandmode", void 0);
+__decorate([
+    observable
+], Accordion$1.prototype, "accordionItems", void 0);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 03 Feb 2023 15:57:56 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+
+class Accordion extends Accordion$1 {
+  constructor() {
+    super(...arguments);
+    this.expandmode = AccordionExpandMode.single;
+  }
+  closeAll() {
+    if (this.expandmode === AccordionExpandMode.multi) {
+      this.accordionItems.forEach(item => {
+        item.expanded = false;
+      });
+    }
+  }
+}
+
+let _2 = t => t,
+  _t;
+const getClasses = _ => classNames('base');
+const AccordionTemplate = () => html(_t || (_t = _2`
+	<div class="${0}">
+		<slot ${0}></slot>
+	</div>
+`), getClasses, slotted({
+  property: 'accordionItems',
+  filter: elements()
+}));
+
+const accordionDefinition = Accordion.compose({
+  baseName: 'accordion',
+  template: AccordionTemplate,
+  styles: css_248z
+});
+const accordionRegistries = [accordionDefinition(), ...accordionItemRegistries];
+const registerAccordion = registerFactory(accordionRegistries);
+
+export { accordionDefinition as a, accordionRegistries as b, registerAccordion as r };

package/shared/definition10.js

@@ -0,0 +1,99 @@
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
+import { s as slotted, e as elements } from './slotted.js';
+import { B as BreadcrumbItem } from './breadcrumb-item.js';
+
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @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.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * 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;
+    }
+    /**
+     *  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
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
+}
+__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}";
+
+class Breadcrumb extends Breadcrumb$1 {}
+
+const breadcrumbDefinition = Breadcrumb.compose({
+  baseName: 'breadcrumb',
+  template: breadcrumbTemplate,
+  styles: css_248z
+});
+const breadcrumbRegistries = [breadcrumbDefinition()];
+const registerBreadcrumb = registerFactory(breadcrumbRegistries);
+
+export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };

package/shared/definition11.js

@@ -0,0 +1,48 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { i as iconRegistries } from './definition3.js';
+import { f as focusRegistries } from './definition4.js';
+import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { t as textAnchorTemplate } from './text-anchor.template.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 03 Feb 2023 15:57:56 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\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-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+
+class BreadcrumbItem extends BreadcrumbItem$1 {
+  constructor() {
+    super();
+  }
+}
+__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const getClasses = _ => classNames('base');
+const BreadcrumbItemTemplate = (context, definition) => {
+  const iconTag = context.tagFor(Icon);
+  return html(_t || (_t = _2`
+	<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(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<${0} class="separator" name="chevron-right-solid"></${0}>`), iconTag, iconTag)));
+};
+
+const breadcrumbItemDefinition = BreadcrumbItem.compose({
+  baseName: 'breadcrumb-item',
+  template: BreadcrumbItemTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
+
+export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };