@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/button.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+const index = require('./index.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const formAssociated = require('./form-associated.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+
+class _Button extends index.FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedButton extends formAssociated.FormAssociated(_Button) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+let Button$1 = class Button extends FormAssociatedButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+         * @internal
+         */
+        this.handleClick = (e) => {
+            var _a;
+            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+                e.stopPropagation();
+            }
+        };
+        /**
+         * Submits the parent form
+         */
+        this.handleSubmission = () => {
+            if (!this.form) {
+                return;
+            }
+            const attached = this.proxy.isConnected;
+            if (!attached) {
+                this.attachProxy();
+            }
+            // Browser support for requestSubmit is not comprehensive
+            // so click the proxy if it isn't supported
+            typeof this.form.requestSubmit === "function"
+                ? this.form.requestSubmit(this.proxy)
+                : this.proxy.click();
+            if (!attached) {
+                this.detachProxy();
+            }
+        };
+        /**
+         * Resets the parent form
+         */
+        this.handleFormReset = () => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    formactionChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formAction = this.formaction;
+        }
+    }
+    formenctypeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formEnctype = this.formenctype;
+        }
+    }
+    formmethodChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formMethod = this.formmethod;
+        }
+    }
+    formnovalidateChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formNoValidate = this.formnovalidate;
+        }
+    }
+    formtargetChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formTarget = this.formtarget;
+        }
+    }
+    typeChanged(previous, next) {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+        }
+        next === "submit" && this.addEventListener("click", this.handleSubmission);
+        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+        next === "reset" && this.addEventListener("click", this.handleFormReset);
+        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.handleUnsupportedDelegatesFocus();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.addEventListener("click", this.handleClick);
+            });
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.removeEventListener("click", this.handleClick);
+            });
+        }
+    }
+};
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], Button$1.prototype, "autofocus", void 0);
+index.__decorate([
+    index.attr({ attribute: "form" })
+], Button$1.prototype, "formId", void 0);
+index.__decorate([
+    index.attr
+], Button$1.prototype, "formaction", void 0);
+index.__decorate([
+    index.attr
+], Button$1.prototype, "formenctype", void 0);
+index.__decorate([
+    index.attr
+], Button$1.prototype, "formmethod", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], Button$1.prototype, "formnovalidate", void 0);
+index.__decorate([
+    index.attr
+], Button$1.prototype, "formtarget", void 0);
+index.__decorate([
+    index.attr
+], Button$1.prototype, "type", void 0);
+index.__decorate([
+    index.observable
+], Button$1.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+class DelegatesARIAButton {
+}
+index.__decorate([
+    index.attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Button$1, startEnd.StartEnd, DelegatesARIAButton);
+
+exports.Button = Button$1;

package/shared/calendar-event.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class CalendarEvent extends index.FoundationElement {
+  // TODO should be converted to allowed range
+}
+__decorateClass([
+  index.attr
+], CalendarEvent.prototype, "heading", 2);
+__decorateClass([
+  index.attr
+], CalendarEvent.prototype, "description", 2);
+__decorateClass([
+  index.attr
+], CalendarEvent.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], CalendarEvent.prototype, "appearance", 2);
+__decorateClass([
+  index.attr({ converter: index.nullableNumberConverter, attribute: "overlap-count" })
+], CalendarEvent.prototype, "overlapCount", 2);
+__decorateClass([
+  index.attr({ converter: index.nullableNumberConverter })
+], CalendarEvent.prototype, "start", 2);
+__decorateClass([
+  index.attr({ converter: index.nullableNumberConverter })
+], CalendarEvent.prototype, "duration", 2);
+
+exports.CalendarEvent = CalendarEvent;

package/shared/children.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const index = require('./index.cjs');
+const slotted = require('./slotted.cjs');
+
+/**
+ * The runtime behavior for child node observation.
+ * @public
+ */
+class ChildrenBehavior extends slotted.NodeObservationBehavior {
+    /**
+     * Creates an instance of ChildrenBehavior.
+     * @param target - The element target to observe children on.
+     * @param options - The options to use when observing the element children.
+     */
+    constructor(target, options) {
+        super(target, options);
+        this.observer = null;
+        options.childList = true;
+    }
+    /**
+     * Begins observation of the nodes.
+     */
+    observe() {
+        if (this.observer === null) {
+            this.observer = new MutationObserver(this.handleEvent.bind(this));
+        }
+        this.observer.observe(this.target, this.options);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     */
+    disconnect() {
+        this.observer.disconnect();
+    }
+    /**
+     * Retrieves the nodes that should be assigned to the target.
+     */
+    getNodes() {
+        if ("subtree" in this.options) {
+            return Array.from(this.target.querySelectorAll(this.options.selector));
+        }
+        return Array.from(this.target.childNodes);
+    }
+}
+/**
+ * A directive that observes the `childNodes` of an element and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure child node observation.
+ * @public
+ */
+function children(propertyOrOptions) {
+    if (typeof propertyOrOptions === "string") {
+        propertyOrOptions = {
+            property: propertyOrOptions,
+        };
+    }
+    return new index.AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
+}
+
+exports.children = children;

package/shared/class-names.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+function classNames(...args) {
+    return args.reduce((accum, value) => {
+        const leadingChar = accum.length ? " " : "";
+        const normalizedValue = Array.isArray(value) && value[1]
+            ? classNames.call(null, value[0])
+            : typeof value === "function"
+                ? value()
+                : typeof value === "string"
+                    ? value
+                    : "";
+        return !normalizedValue.length ? accum : accum + leadingChar + normalizedValue;
+    }, "");
+}
+
+exports.classNames = classNames;

package/shared/definition.cjs

@@ -0,0 +1,165 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.cjs');
+const affix = require('./affix.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const startEnd = require('./start-end.cjs');
+const ref = require('./ref.cjs');
+const when = require('./when.cjs');
+
+/**
+ * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart expanded-icon - The expanded icon slot
+ * @csspart collapsed-icon - The collapsed icon
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
+ */
+let AccordionItem$1 = class AccordionItem extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+         * heading element.
+         *
+         * @defaultValue 2
+         * @public
+         * @remarks
+         * HTML attribute: heading-level
+         */
+        this.headinglevel = 2;
+        /**
+         * Expands or collapses the item.
+         *
+         * @public
+         * @remarks
+         * HTML attribute: expanded
+         */
+        this.expanded = false;
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            this.expanded = !this.expanded;
+            this.change();
+        };
+        this.change = () => {
+            this.$emit("change");
+        };
+    }
+};
+index.__decorate([
+    index.attr({
+        attribute: "heading-level",
+        mode: "fromView",
+        converter: index.nullableNumberConverter,
+    })
+], AccordionItem$1.prototype, "headinglevel", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], AccordionItem$1.prototype, "expanded", void 0);
+index.__decorate([
+    index.attr
+], AccordionItem$1.prototype, "id", void 0);
+applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
+
+const styles = ":host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100))}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class AccordionItem extends AccordionItem$1 {
+  constructor() {
+    super(...arguments);
+    this.noIndicator = false;
+  }
+}
+__decorateClass([
+  index.attr
+], AccordionItem.prototype, "heading", 2);
+__decorateClass([
+  index.attr({ mode: "boolean", attribute: "no-indicator" })
+], AccordionItem.prototype, "noIndicator", 2);
+__decorateClass([
+  index.attr
+], AccordionItem.prototype, "meta", 2);
+__decorateClass([
+  index.attr
+], AccordionItem.prototype, "size", 2);
+applyMixins.applyMixins(AccordionItem, affix.AffixIconWithTrailing);
+
+const header = (context, hTag) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return index.html`
+		<${hTag} class="heading-container">
+			<button
+				class="heading-button ${(x) => x.size ? `size-${x.size}` : ""}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
+				@click="${(x, c) => x.clickHandler(c.event)}"
+				${ref.ref("expandbutton")}
+			>
+
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, affix.IconWrapper.Slot) : null}
+
+				<span class="heading-content">${(x) => x.heading}</span>
+
+				${when.when((x) => x.meta, index.html`<span class="meta">${(x) => x.meta}</span>`)}
+
+				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? "chevron-up-solid" : "chevron-down-solid") : null}
+
+			</button>
+		</${hTag}>
+	`;
+};
+const AccordionItemTemplate = (context) => index.html`
+	${(x) => header(context, "h" + x.headinglevel)}
+	<div
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
+		role="region"
+		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`;
+
+const accordionItemDefinition = AccordionItem.compose({
+  baseName: "accordion-item",
+  template: AccordionItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const accordionItemRegistries = [accordionItemDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerAccordionItem = index.registerFactory(accordionItemRegistries);
+
+exports.AccordionItem = AccordionItem$1;
+exports.accordionItemDefinition = accordionItemDefinition;
+exports.accordionItemRegistries = accordionItemRegistries;
+exports.registerAccordionItem = registerAccordionItem;

package/shared/definition10.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+const index = require('./index.cjs');
+const slotted = require('./slotted.cjs');
+const breadcrumbItem = require('./breadcrumb-item.cjs');
+
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+let Breadcrumb$1 = class Breadcrumb extends index.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.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.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");
+        }
+    }
+};
+index.__decorate([
+    index.observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+
+const breadcrumbTemplate = () => index.html`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${slotted.slotted({
+  property: "slottedBreadcrumbItems",
+  filter: slotted.elements()
+})}
+      ></slot>
+    </div>
+	</nav>
+`;
+
+const styles = ".list{display:flex}\n";
+
+class Breadcrumb extends Breadcrumb$1 {
+}
+
+const breadcrumbDefinition = Breadcrumb.compose({
+  baseName: "breadcrumb",
+  template: breadcrumbTemplate,
+  styles
+});
+const breadcrumbRegistries = [breadcrumbDefinition()];
+const registerBreadcrumb = index.registerFactory(breadcrumbRegistries);
+
+exports.breadcrumbDefinition = breadcrumbDefinition;
+exports.breadcrumbRegistries = breadcrumbRegistries;
+exports.registerBreadcrumb = registerBreadcrumb;