@vonage/vivid 2.36.3 → 3.0.0-next.100

package/shared/aria-global.js

@@ -0,0 +1,72 @@
+import { _ as __decorate, a as attr } from './index.js';
+
+/**
+ * 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" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+
+export { ARIAGlobalStatesAndProperties as A };

package/shared/aria.js

@@ -0,0 +1,9 @@
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+export { Orientation as O };

package/shared/base-progress.js

@@ -0,0 +1,70 @@
+import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
+ * @public
+ */
+class BaseProgress extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates progress in %
+         * @internal
+         */
+        this.percentComplete = 0;
+    }
+    valueChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    minChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    maxChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updatePercentComplete();
+    }
+    updatePercentComplete() {
+        const min = typeof this.min === "number" ? this.min : 0;
+        const max = typeof this.max === "number" ? this.max : 100;
+        const value = typeof this.value === "number" ? this.value : 0;
+        const range = max - min;
+        this.percentComplete =
+            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused", void 0);
+__decorate([
+    observable
+], BaseProgress.prototype, "percentComplete", void 0);
+
+export { BaseProgress as B };

package/shared/breadcrumb-item.js

@@ -0,0 +1,25 @@
+import { _ as __decorate, o as observable } from './index.js';
+import { A as Anchor, D as DelegatesARIALink } from './anchor.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { S as StartEnd } from './start-end.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/button.js

@@ -0,0 +1,200 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './form-associated.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+
+class _Button extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedButton extends 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
+ */
+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);
+            });
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button.prototype, "type", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+class DelegatesARIAButton {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+__decorate([
+    attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(Button, StartEnd, DelegatesARIAButton);
+
+export { Button as B };

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/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;