@vonage/vivid 2.26.0 → 3.0.0-next.2

package/package.json

@@ -1,321 +1,14 @@
 {
   "name": "@vonage/vivid",
-  "version": "2.26.0",
-  "description": "A bundled version of all Vivid components",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "sideEffects": false,
-  "keywords": [
-    "Vivid",
-    "Components",
-    "All"
-  ],
-  "license": "ISC",
+  "version": "3.0.0-next.2",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
+  "typings": "./index.d.ts",
   "dependencies": {
-    "@vonage/vwc-icon-button-toggle": "2.26.0",
-    "@vonage/vwc-notched-outline": "2.26.0",
-    "@vonage/vwc-scheme-select": "2.26.0",
-    "@vonage/vwc-top-app-bar-fixed": "2.26.0",
-    "@vonage/vwc-audio": "2.26.0",
-    "@vonage/vwc-button-toggle-group": "2.26.0",
-    "@vonage/vwc-card": "2.26.0",
-    "@vonage/vwc-checkbox": "2.26.0",
-    "@vonage/vwc-circular-progress": "2.26.0",
-    "@vonage/vwc-datepicker": "2.26.0",
-    "@vonage/vwc-dialog": "2.26.0",
-    "@vonage/vwc-dropdown": "2.26.0",
-    "@vonage/vwc-elevation": "2.26.0",
-    "@vonage/vwc-fab": "2.26.0",
-    "@vonage/vwc-file-picker": "2.26.0",
-    "@vonage/vwc-formfield": "2.26.0",
-    "@vonage/vwc-helper-message": "2.26.0",
-    "@vonage/vwc-icon-button": "2.26.0",
-    "@vonage/vwc-icon": "2.26.0",
-    "@vonage/vwc-keypad": "2.26.0",
-    "@vonage/vwc-layout": "2.26.0",
-    "@vonage/vwc-linear-progress": "2.26.0",
-    "@vonage/vwc-menu": "2.26.0",
-    "@vonage/vwc-note": "2.26.0",
-    "@vonage/vwc-pagination": "2.26.0",
-    "@vonage/vwc-radio": "2.26.0",
-    "@vonage/vwc-slider": "2.26.0",
-    "@vonage/vwc-snackbar": "2.26.0",
-    "@vonage/vwc-surface": "2.26.0",
-    "@vonage/vwc-switch": "2.26.0",
-    "@vonage/vwc-textarea": "2.26.0",
-    "@vonage/vwc-theme-switch": "2.26.0",
-    "@vonage/vwc-top-app-bar": "2.26.0",
-    "@vonage/vwc-accordion": "2.26.0",
-    "@vonage/vwc-badge": "2.26.0",
-    "@vonage/vwc-drawer": "2.26.0",
-    "@vonage/vwc-empty-state": "2.26.0",
-    "@vonage/vwc-popup": "2.26.0",
-    "@vonage/vwc-select": "2.26.0",
-    "@vonage/vwc-side-drawer": "2.26.0",
-    "@vonage/vwc-tags": "2.26.0",
-    "@vonage/vwc-text": "2.26.0",
-    "@vonage/vwc-tooltip": "2.26.0",
-    "@vonage/vwc-banner": "2.26.0",
-    "@vonage/vwc-button": "2.26.0",
-    "@vonage/vwc-expansion-panel": "2.26.0",
-    "@vonage/vwc-media-controller": "2.26.0",
-    "@vonage/vwc-carousel": "2.26.0",
-    "@vonage/vwc-tab-bar": "2.26.0",
-    "@vonage/vwc-data-grid": "2.26.0",
-    "@vonage/vwc-textfield": "2.26.0",
-    "@vonage/vwc-calendar": "2.26.0",
-    "@vonage/vwc-list": "2.26.0",
-    "@vonage/vvd-core": "2.26.0",
-    "@vonage/vvd-context": "2.26.0"
+    "@microsoft/fast-element": "^1.7.0",
+    "@microsoft/fast-foundation": "^2.33.3",
+    "@microsoft/fast-web-utilities": "^5.1.0",
+    "ramda": "^0.27.2"
   },
-  "com_vonage": {
-    "components": [
-      {
-        "component_name": "vwc-icon-button-toggle",
-        "export_name": "VWCIconButtonToggle"
-      },
-      {
-        "component_name": "vwc-notched-outline",
-        "export_name": "VWCNotchedOutline"
-      },
-      {
-        "component_name": "vwc-scheme-select",
-        "export_name": "VWCSchemeSelect"
-      },
-      {
-        "component_name": "vwc-top-app-bar-fixed",
-        "export_name": "VWCTopAppBarFixed"
-      },
-      {
-        "component_name": "vwc-audio",
-        "export_name": "VWCAudio"
-      },
-      {
-        "component_name": "vwc-button-toggle-group",
-        "export_name": "VWCButtonToggleGroup"
-      },
-      {
-        "component_name": "vwc-card",
-        "export_name": "VWCCard"
-      },
-      {
-        "component_name": "vwc-checkbox",
-        "export_name": "VWCCheckbox"
-      },
-      {
-        "component_name": "vwc-circular-progress",
-        "export_name": "VWCCircularProgress"
-      },
-      {
-        "component_name": "vwc-datepicker",
-        "export_name": "VWCDatepicker"
-      },
-      {
-        "component_name": "vwc-dialog",
-        "export_name": "VWCDialog"
-      },
-      {
-        "component_name": "vwc-dropdown",
-        "export_name": "VWCDropdown"
-      },
-      {
-        "component_name": "vwc-elevation",
-        "export_name": "VWCElevation"
-      },
-      {
-        "component_name": "vwc-fab",
-        "export_name": "VWCFab"
-      },
-      {
-        "component_name": "vwc-file-picker",
-        "export_name": "VWCFilePicker"
-      },
-      {
-        "component_name": "vwc-formfield",
-        "export_name": "VWCFormfield"
-      },
-      {
-        "component_name": "vwc-helper-message",
-        "export_name": "VWCHelperMessage"
-      },
-      {
-        "component_name": "vwc-icon-button",
-        "export_name": "VWCIconButton"
-      },
-      {
-        "component_name": "vwc-icon",
-        "export_name": "VWCIcon"
-      },
-      {
-        "component_name": "vwc-keypad",
-        "export_name": "VWCKeypad"
-      },
-      {
-        "component_name": "vwc-layout",
-        "export_name": "VWCLayout"
-      },
-      {
-        "component_name": "vwc-linear-progress",
-        "export_name": "VWCLinearProgress"
-      },
-      {
-        "component_name": "vwc-menu",
-        "export_name": "VWCMenu"
-      },
-      {
-        "component_name": "vwc-note",
-        "export_name": "VWCNote"
-      },
-      {
-        "component_name": "vwc-pagination",
-        "export_name": "VWCPagination"
-      },
-      {
-        "component_name": "vwc-radio",
-        "export_name": "VWCRadio"
-      },
-      {
-        "component_name": "vwc-slider",
-        "export_name": "VWCSlider"
-      },
-      {
-        "component_name": "vwc-snackbar",
-        "export_name": "VWCSnackbar"
-      },
-      {
-        "component_name": "vwc-surface",
-        "export_name": "VWCSurface"
-      },
-      {
-        "component_name": "vwc-switch",
-        "export_name": "VWCSwitch"
-      },
-      {
-        "component_name": "vwc-textarea",
-        "export_name": "VWCTextarea"
-      },
-      {
-        "component_name": "vwc-theme-switch",
-        "export_name": "VWCThemeSwitch"
-      },
-      {
-        "component_name": "vwc-top-app-bar",
-        "export_name": "VWCTopAppBar"
-      },
-      {
-        "component_name": "vwc-accordion",
-        "export_name": "VWCAccordion"
-      },
-      {
-        "component_name": "vwc-badge",
-        "export_name": "VWCBadge"
-      },
-      {
-        "component_name": "vwc-drawer",
-        "export_name": "VWCDrawer"
-      },
-      {
-        "component_name": "vwc-empty-state",
-        "export_name": "VWCEmptyState"
-      },
-      {
-        "component_name": "vwc-popup",
-        "export_name": "VWCPopup"
-      },
-      {
-        "component_name": "vwc-select",
-        "export_name": "VWCSelect"
-      },
-      {
-        "component_name": "vwc-side-drawer",
-        "export_name": "VWCSideDrawer"
-      },
-      {
-        "component_name": "vwc-tag",
-        "export_name": "VWCTag"
-      },
-      {
-        "component_name": "vwc-text",
-        "export_name": "VWCText"
-      },
-      {
-        "component_name": "vwc-tooltip",
-        "export_name": "VWCTooltip"
-      },
-      {
-        "component_name": "vwc-banner",
-        "export_name": "VWCBanner"
-      },
-      {
-        "component_name": "vwc-button",
-        "export_name": "VWCButton"
-      },
-      {
-        "component_name": "vwc-expansion-panel",
-        "export_name": "VWCExpansionPanel"
-      },
-      {
-        "component_name": "vwc-media-controller",
-        "export_name": "VWCMediaController"
-      },
-      {
-        "component_name": "vwc-scrub-bar",
-        "export_name": "VWCScrubBar"
-      },
-      {
-        "component_name": "vwc-carousel-item",
-        "export_name": "VWCCarouselItem"
-      },
-      {
-        "component_name": "vwc-carousel",
-        "export_name": "VWCCarousel"
-      },
-      {
-        "component_name": "vwc-tab-bar",
-        "export_name": "VWCTabBar"
-      },
-      {
-        "component_name": "vwc-tab",
-        "export_name": "VWCTab"
-      },
-      {
-        "component_name": "vwc-data-grid",
-        "export_name": "VWCDataGrid"
-      },
-      {
-        "component_name": "vwc-textfield",
-        "export_name": "VWCTextfield"
-      },
-      {
-        "component_name": "vwc-calendar-event",
-        "export_name": "VWCCalendarEvent"
-      },
-      {
-        "component_name": "vwc-calendar",
-        "export_name": "VWCCalendar"
-      },
-      {
-        "component_name": "vwc-check-list-item",
-        "export_name": "VWCCheckListItem"
-      },
-      {
-        "component_name": "vwc-list-expansion-panel",
-        "export_name": "VWCListExpansionPanel"
-      },
-      {
-        "component_name": "vwc-list-item",
-        "export_name": "VWCListItem"
-      },
-      {
-        "component_name": "vwc-list",
-        "export_name": "VWCList"
-      },
-      {
-        "component_name": "vwc-radio-list-item",
-        "export_name": "VWCRadioListItem"
-      }
-    ]
-  }
-}
+  "peerDependencies": {}
+}

package/shared/affix.js

@@ -0,0 +1,44 @@
+import './web.dom-collections.iterator.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html } from './index2.js';
+import { I as Icon } from './index.js';
+import { c as classNames } from './class-names.js';
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4;
+class Prefix {}
+
+__decorate([attr, __metadata("design:type", String)], Prefix.prototype, "icon", void 0);
+
+class PrefixOrSuffix extends Prefix {
+  constructor() {
+    super(...arguments);
+    this.iconTrailing = false;
+  }
+
+}
+
+__decorate([attr({
+  mode: 'boolean',
+  attribute: 'icon-trailing'
+}), __metadata("design:type", Object)], PrefixOrSuffix.prototype, "iconTrailing", void 0);
+
+const prefixTemplate = context => {
+  const iconTag = context.tagFor(Icon);
+  const iconTemplate = html(_t || (_t = _`<span class="icon"><${0} :type="${0}"></${0}></span>`), iconTag, x => x.icon, iconTag);
+  return html(_t2 || (_t2 = _`${0}`), x => x.icon ? iconTemplate : '');
+};
+const prefixOrSuffixTemplate = context => {
+  const iconTag = context.tagFor(Icon);
+
+  const classes = ({
+    iconTrailing
+  }) => classNames('icon', ['icon-trailing', iconTrailing]);
+
+  const iconTemplate = html(_t3 || (_t3 = _`<span class="${0}"><${0} :type="${0}"></${0}></span>`), classes, iconTag, x => x.icon, iconTag);
+  return html(_t4 || (_t4 = _`${0}`), x => x.icon ? iconTemplate : '');
+};
+
+export { PrefixOrSuffix as P, Prefix as a, prefixTemplate as b, prefixOrSuffixTemplate as p };

package/shared/anchor.js

@@ -0,0 +1,78 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @public
+ */
+class Anchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+__decorate([
+    attr
+], Anchor.prototype, "download", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "href", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "target", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "type", void 0);
+__decorate([
+    observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: "aria-expanded", mode: "fromView" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(Anchor, StartEnd, DelegatesARIALink);
+
+export { Anchor as A };

package/shared/apply-mixins.js

@@ -0,0 +1,22 @@
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            if (name !== "constructor") {
+                Object.defineProperty(derivedCtor.prototype, name, 
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+            }
+        });
+        if (baseCtor.attributes) {
+            const existing = derivedCtor.attributes || [];
+            derivedCtor.attributes = existing.concat(baseCtor.attributes);
+        }
+    });
+}
+
+export { applyMixins as a };

package/shared/aria-global.js

@@ -0,0 +1,156 @@
+import { A as AttachedBehaviorHTMLDirective, h as html, _ as __decorate, a as attr } from './index2.js';
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefBehavior {
+    /**
+     * Creates an instance of RefBehavior.
+     * @param target - The element to reference.
+     * @param propertyName - The name of the property to assign the reference to.
+     */
+    constructor(target, propertyName) {
+        this.target = target;
+        this.propertyName = propertyName;
+    }
+    /**
+     * 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) {
+        source[this.propertyName] = this.target;
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+    unbind() { }
+}
+/**
+ * A directive that observes the updates a property with a reference to the element.
+ * @param propertyName - The name of the property to assign the reference to.
+ * @public
+ */
+function ref(propertyName) {
+    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+}
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: "aria-atomic", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: "aria-busy", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: "aria-controls", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: "aria-current", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-details", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: "aria-disabled", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: "aria-errormessage", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: "aria-flowto", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: "aria-haspopup", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: "aria-invalid", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: "aria-keyshortcuts", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: "aria-label", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-live", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: "aria-owns", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: "aria-relevant", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: "aria-roledescription", mode: "fromView" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+
+export { ARIAGlobalStatesAndProperties as A, StartEnd as S, ref as r };

package/shared/class-names.js

@@ -0,0 +1,15 @@
+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;
+    }, "");
+}
+
+export { classNames as c };

package/shared/design-system/index.d.ts

@@ -0,0 +1,3 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+export declare function provideVividDesignSystem(element?: HTMLElement): DesignSystem;
+export declare const designSystem: DesignSystem;