@vonage/vivid 4.12.1 → 4.14.0

package/shared/form-associated2.js

@@ -0,0 +1,381 @@
+import { a as attr, o as observable, e as emptyArray, D as DOM } from './defineVividComponent.js';
+import { k as keyEnter } from './key-codes2.js';
+
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+/**
+ * @alpha
+ */
+const supportsElementInternals = ElementInternalsKey in window &&
+    "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = new WeakMap();
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @alpha
+ */
+function FormAssociated(BaseCtor) {
+    const C = class extends BaseCtor {
+        constructor(...args) {
+            super(...args);
+            /**
+             * Track whether the value has been changed from the initial value
+             */
+            this.dirtyValue = false;
+            /**
+             * Sets the element's disabled state. A disabled element will not be included during form submission.
+             *
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+            /**
+             * These are events that are still fired by the proxy
+             * element based on user / programmatic interaction.
+             *
+             * The proxy implementation should be transparent to
+             * the app author, so block these events from emitting.
+             */
+            this.proxyEventsToBlock = ["change", "click"];
+            this.proxyInitialized = false;
+            this.required = false;
+            this.initialValue = this.initialValue || "";
+            if (!this.elementInternals) {
+                // When elementInternals is not supported, formResetCallback is
+                // bound to an event listener, so ensure the handler's `this`
+                // context is correct.
+                this.formResetCallback = this.formResetCallback.bind(this);
+            }
+        }
+        /**
+         * Must evaluate to true to enable elementInternals.
+         * Feature detects API support and resolve respectively
+         *
+         * @internal
+         */
+        static get formAssociated() {
+            return supportsElementInternals;
+        }
+        /**
+         * Returns the validity state of the element
+         *
+         * @alpha
+         */
+        get validity() {
+            return this.elementInternals
+                ? this.elementInternals.validity
+                : this.proxy.validity;
+        }
+        /**
+         * Retrieve a reference to the associated form.
+         * Returns null if not associated to any form.
+         *
+         * @alpha
+         */
+        get form() {
+            return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+        }
+        /**
+         * Retrieve the localized validation message,
+         * or custom validation message if set.
+         *
+         * @alpha
+         */
+        get validationMessage() {
+            return this.elementInternals
+                ? this.elementInternals.validationMessage
+                : this.proxy.validationMessage;
+        }
+        /**
+         * Whether the element will be validated when the
+         * form is submitted
+         */
+        get willValidate() {
+            return this.elementInternals
+                ? this.elementInternals.willValidate
+                : this.proxy.willValidate;
+        }
+        /**
+         * A reference to all associated label elements
+         */
+        get labels() {
+            if (this.elementInternals) {
+                return Object.freeze(Array.from(this.elementInternals.labels));
+            }
+            else if (this.proxy instanceof HTMLElement &&
+                this.proxy.ownerDocument &&
+                this.id) {
+                // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
+                const parentLabels = this.proxy.labels;
+                // Labels associated using the `for` attribute
+                const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+                const labels = parentLabels
+                    ? forLabels.concat(Array.from(parentLabels))
+                    : forLabels;
+                return Object.freeze(labels);
+            }
+            else {
+                return emptyArray;
+            }
+        }
+        /**
+         * Invoked when the `value` property changes
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `valueChanged` method
+         * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        valueChanged(previous, next) {
+            this.dirtyValue = true;
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.value = this.value;
+            }
+            this.currentValue = this.value;
+            this.setFormValue(this.value);
+            this.validate();
+        }
+        currentValueChanged() {
+            this.value = this.currentValue;
+        }
+        /**
+         * Invoked when the `initialValue` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `initialValueChanged` method
+         * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        initialValueChanged(previous, next) {
+            // If the value is clean and the component is connected to the DOM
+            // then set value equal to the attribute value.
+            if (!this.dirtyValue) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+        }
+        /**
+         * Invoked when the `disabled` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `disabledChanged` method
+         * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        disabledChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.disabled = this.disabled;
+            }
+            DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+        }
+        /**
+         * Invoked when the `name` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `nameChanged` method
+         * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        nameChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.name = this.name;
+            }
+        }
+        /**
+         * Invoked when the `required` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `requiredChanged` method
+         * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        requiredChanged(prev, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.required = this.required;
+            }
+            DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            this.validate();
+        }
+        /**
+         * The element internals object. Will only exist
+         * in browsers supporting the attachInternals API
+         */
+        get elementInternals() {
+            if (!supportsElementInternals) {
+                return null;
+            }
+            let internals = InternalsMap.get(this);
+            if (!internals) {
+                internals = this.attachInternals();
+                InternalsMap.set(this, internals);
+            }
+            return internals;
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("keypress", this._keypressHandler);
+            if (!this.value) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+            if (!this.elementInternals) {
+                this.attachProxy();
+                if (this.form) {
+                    this.form.addEventListener("reset", this.formResetCallback);
+                }
+            }
+        }
+        /**
+         * @internal
+         */
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+            if (!this.elementInternals && this.form) {
+                this.form.removeEventListener("reset", this.formResetCallback);
+            }
+        }
+        /**
+         * Return the current validity of the element.
+         */
+        checkValidity() {
+            return this.elementInternals
+                ? this.elementInternals.checkValidity()
+                : this.proxy.checkValidity();
+        }
+        /**
+         * Return the current validity of the element.
+         * If false, fires an invalid event at the element.
+         */
+        reportValidity() {
+            return this.elementInternals
+                ? this.elementInternals.reportValidity()
+                : this.proxy.reportValidity();
+        }
+        /**
+         * Set the validity of the control. In cases when the elementInternals object is not
+         * available (and the proxy element is used to report validity), this function will
+         * do nothing unless a message is provided, at which point the setCustomValidity method
+         * of the proxy element will be invoked with the provided message.
+         * @param flags - Validity flags
+         * @param message - Optional message to supply
+         * @param anchor - Optional element used by UA to display an interactive validation UI
+         */
+        setValidity(flags, message, anchor) {
+            if (this.elementInternals) {
+                this.elementInternals.setValidity(flags, message, anchor);
+            }
+            else if (typeof message === "string") {
+                this.proxy.setCustomValidity(message);
+            }
+        }
+        /**
+         * Invoked when a connected component's form or fieldset has its disabled
+         * state changed.
+         * @param disabled - the disabled value of the form / fieldset
+         */
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+        formResetCallback() {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+        /**
+         * Attach the proxy element to the DOM
+         */
+        attachProxy() {
+            var _a;
+            if (!this.proxyInitialized) {
+                this.proxyInitialized = true;
+                this.proxy.style.display = "none";
+                this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+                // These are typically mapped to the proxy during
+                // property change callbacks, but during initialization
+                // on the initial call of the callback, the proxy is
+                // still undefined. We should find a better way to address this.
+                this.proxy.disabled = this.disabled;
+                this.proxy.required = this.required;
+                if (typeof this.name === "string") {
+                    this.proxy.name = this.name;
+                }
+                if (typeof this.value === "string") {
+                    this.proxy.value = this.value;
+                }
+                this.proxy.setAttribute("slot", proxySlotName);
+                this.proxySlot = document.createElement("slot");
+                this.proxySlot.setAttribute("name", proxySlotName);
+            }
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+            this.appendChild(this.proxy);
+        }
+        /**
+         * Detach the proxy element from the DOM
+         */
+        detachProxy() {
+            var _a;
+            this.removeChild(this.proxy);
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+        }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate(anchor) {
+            if (this.proxy instanceof HTMLElement) {
+                this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+            }
+        }
+        /**
+         * Associates the provided value (and optional state) with the parent form.
+         * @param value - The value to set
+         * @param state - The state object provided to during session restores and when autofilling.
+         */
+        setFormValue(value, state) {
+            if (this.elementInternals) {
+                this.elementInternals.setFormValue(value, state || value);
+            }
+        }
+        _keypressHandler(e) {
+            switch (e.key) {
+                case keyEnter:
+                    if (this.form instanceof HTMLFormElement) {
+                        // Implicit submission
+                        const defaultButton = this.form.querySelector("[type=submit]");
+                        defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+                    }
+                    break;
+            }
+        }
+        /**
+         * Used to stop propagation of proxy element events
+         * @param e - Event object
+         */
+        stopPropagation(e) {
+            e.stopPropagation();
+        }
+    };
+    attr({ mode: "boolean" })(C.prototype, "disabled");
+    attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    attr(C.prototype, "name");
+    attr({ mode: "boolean" })(C.prototype, "required");
+    observable(C.prototype, "value");
+    return C;
+}
+
+export { FormAssociated as F };

package/shared/form-elements.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const icon = require('./icon.cjs');
-const index = require('./index.cjs');
+const definition = require('./definition27.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -20,15 +20,15 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FormElementHelperText {
 }
 __decorateClass([
-  index.attr({ attribute: "helper-text" })
+  defineVividComponent.attr({ attribute: "helper-text" })
 ], FormElementHelperText.prototype, "helperText");
 __decorateClass([
-  index.observable
+  defineVividComponent.observable
 ], FormElementHelperText.prototype, "_helperTextSlottedContent");
 class FormElementSuccessText {
 }
 __decorateClass([
-  index.attr({ attribute: "success-text" })
+  defineVividComponent.attr({ attribute: "success-text" })
 ], FormElementSuccessText.prototype, "successText");
 class FormElementCharCount {
   constructor() {
@@ -36,39 +36,12 @@ class FormElementCharCount {
   }
 }
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     attribute: "char-count",
     mode: "boolean"
   })
 ], FormElementCharCount.prototype, "charCount");
 function formElements(constructor) {
-  let currentPrototype = constructor.prototype;
-  while (currentPrototype) {
-    const parentPrototype = Object.getPrototypeOf(currentPrototype);
-    if (currentPrototype.validate && !parentPrototype.validate) {
-      currentPrototype.validate = function(anchor) {
-        if (this.proxy instanceof HTMLElement && this.elementInternals) {
-          const isValid = this.proxy.validity.valid;
-          const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
-          if (isValid && controlIsInvalidDueToMinOrMaxLength) {
-            this.setValidity(
-              this.control.validity,
-              this.control.validationMessage,
-              anchor
-            );
-          } else {
-            this.setValidity(
-              this.proxy.validity,
-              this.proxy.validationMessage,
-              anchor
-            );
-          }
-        }
-      };
-      break;
-    }
-    currentPrototype = parentPrototype;
-  }
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);
@@ -114,10 +87,10 @@ function formElements(constructor) {
     }
   }
   __decorateClass([
-    index.attr
+    defineVividComponent.attr
   ], Decorated.prototype, "label");
   __decorateClass([
-    index.observable
+    defineVividComponent.observable
   ], Decorated.prototype, "errorValidationMessage");
   return Decorated;
 }
@@ -148,7 +121,7 @@ const isFeedbackAvailable = (config, x) => Boolean(
   x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
 );
 function getFeedbackTemplate(context) {
-  return index.html`
+  return defineVividComponent.html`
 		<style>
 			${messageStyles}
 		</style>
@@ -170,14 +143,14 @@ function getFeedbackTemplate(context) {
 	`;
 }
 function getFeedbackTypeTemplate(context, config, shouldShow) {
-  const iconTag = context.tagFor(icon.Icon);
-  const messageTemplate = index.html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? index.html`<slot
+  const iconTag = context.tagFor(definition.Icon);
+  const messageTemplate = defineVividComponent.html`${(x) => x[config.messageProperty]}`;
+  const innerTemplate = config.slot ? defineVividComponent.html`<slot
 				name="${config.slot.name}"
 				${slotted.slotted(config.slot.slottedContentProperty)}
 				>${messageTemplate}</slot
 		  >` : messageTemplate;
-  return index.html`<div
+  return defineVividComponent.html`<div
 		class="${(x) => classNames.classNames(
     "message",
     `${config.className}-message`,
@@ -189,7 +162,7 @@ function getFeedbackTypeTemplate(context, config, shouldShow) {
 	>
 		${when.when(
     (x) => shouldShow(x) && config.iconType,
-    index.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
+    defineVividComponent.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
   )}
 		<span class="message-text">${innerTemplate}</span>
 	</div>`;
@@ -223,7 +196,7 @@ function errorText(constructor) {
     }
   }
   __decorateClass([
-    index.attr({ attribute: "error-text" })
+    defineVividComponent.attr({ attribute: "error-text" })
   ], Decorated.prototype, "errorText");
   return Decorated;
 }

package/shared/form-elements.js

@@ -1,5 +1,5 @@
-import { I as Icon } from './icon.js';
-import { a as attr, o as observable, h as html } from './index.js';
+import { I as Icon } from './definition27.js';
+import { a as attr, o as observable, h as html } from './defineVividComponent.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -40,33 +40,6 @@ __decorateClass([
   })
 ], FormElementCharCount.prototype, "charCount");
 function formElements(constructor) {
-  let currentPrototype = constructor.prototype;
-  while (currentPrototype) {
-    const parentPrototype = Object.getPrototypeOf(currentPrototype);
-    if (currentPrototype.validate && !parentPrototype.validate) {
-      currentPrototype.validate = function(anchor) {
-        if (this.proxy instanceof HTMLElement && this.elementInternals) {
-          const isValid = this.proxy.validity.valid;
-          const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
-          if (isValid && controlIsInvalidDueToMinOrMaxLength) {
-            this.setValidity(
-              this.control.validity,
-              this.control.validationMessage,
-              anchor
-            );
-          } else {
-            this.setValidity(
-              this.proxy.validity,
-              this.proxy.validationMessage,
-              anchor
-            );
-          }
-        }
-      };
-      break;
-    }
-    currentPrototype = parentPrototype;
-  }
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);

package/shared/foundation/anchor/anchor.d.ts

@@ -8,6 +8,7 @@ export declare class Anchor {
     rel: string;
     target: '_self' | '_blank' | '_parent' | '_top';
     type: string;
+    control: HTMLAnchorElement | undefined;
 }
 export declare class DelegatesARIALink {
     ariaExpanded: 'true' | 'false' | string | null;

package/shared/foundation/button/button.d.ts

@@ -1,6 +1,6 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividComponentDefinition } from '../../design-system/defineVividComponent';
 import { FormAssociatedButton } from './button.form-associated';
-export type ButtonOptions = FoundationElementDefinition;
+export type ButtonOptions = VividComponentDefinition;
 export declare class VividFoundationButton extends FormAssociatedButton {
     autofocus: boolean;
     formId: string;
@@ -20,6 +20,7 @@ export declare class VividFoundationButton extends FormAssociatedButton {
     private handleSubmission;
     private handleFormReset;
     control: HTMLButtonElement;
+    private handleUnsupportedDelegatesFocus;
 }
 export declare class DelegatesARIAButton {
     ariaExpanded: 'true' | 'false' | string | null;

package/shared/foundation/button/button.template.d.ts

@@ -1,4 +1,2 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
-import type { ButtonOptions, VividFoundationButton } from './button';
-export declare const buttonTemplate: FoundationElementTemplate<ViewTemplate<VividFoundationButton>, ButtonOptions>;
+import type { VividFoundationButton } from './button';
+export declare const buttonTemplate: import("@microsoft/fast-element").ViewTemplate<VividFoundationButton, any>;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -0,0 +1,51 @@
+import type { Constructable, FASTElement } from '@microsoft/fast-element';
+export declare const supportsElementInternals: boolean;
+export interface FormAssociated extends Omit<ElementInternals, 'labels'> {
+    dirtyValue: boolean;
+    disabled: boolean;
+    readonly elementInternals: ElementInternals | null;
+    readonly formAssociated: boolean;
+    initialValue: string;
+    readonly labels: ReadonlyArray<Node[]>;
+    name: string;
+    required: boolean;
+    value: string;
+    currentValue: string;
+    attachProxy(): void;
+    detachProxy(): void;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+    requiredChanged(prev: boolean, next: boolean): void;
+    stopPropagation(e: Event): void;
+    validate(anchor?: HTMLElement): void;
+    valueChanged(previous: string, next: string): void;
+}
+export interface CheckableFormAssociated extends FormAssociated {
+    currentChecked: boolean;
+    dirtyChecked: boolean;
+    checkedAttribute: boolean;
+    defaultChecked: boolean;
+    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+    checked: boolean;
+    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+}
+export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
+export interface FormAssociatedProxy {
+    proxy: ProxyElement;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback?(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    valueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+}
+export type FormAssociatedElement = FormAssociated & FASTElement & HTMLElement & FormAssociatedProxy;
+export type CheckableFormAssociatedElement = FormAssociatedElement & CheckableFormAssociated & {
+    proxy: HTMLInputElement;
+};
+export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
+export declare function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+export declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;

package/shared/foundation/listbox/listbox.d.ts

@@ -0,0 +1,22 @@
+import { type ListboxOption } from '../../../lib/option/option';
+import { ARIAGlobalStatesAndProperties } from '../patterns';
+import { VividElement } from '../vivid-element/vivid-element';
+export declare abstract class Listbox extends VividElement {
+    get length(): number;
+    get options(): ListboxOption[];
+    set options(value: ListboxOption[]);
+    disabled: boolean;
+    selectedIndex: number;
+    selectedOptions: ListboxOption[];
+    static slottedOptionFilter: (n: HTMLElement) => boolean;
+    selectFirstOption(): void;
+    protected setSelectedOptions(): void;
+}
+export declare class DelegatesARIAListbox {
+    ariaActiveDescendant: string | null;
+    ariaDisabled: 'true' | 'false' | string | null;
+    ariaExpanded: 'true' | 'false' | string | null;
+    ariaMultiSelectable: 'true' | 'false' | string | null;
+}
+export interface DelegatesARIAListbox extends ARIAGlobalStatesAndProperties {
+}

package/shared/foundation/progress/base-progress.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class BaseProgress extends FoundationElement {
+    value: number | null;
+    min: number;
+    max: number;
+    maxChanged(): void;
+    paused: boolean;
+    private updatePercentComplete;
+}

package/shared/foundation/utilities/apply-mixins.d.ts

@@ -0,0 +1 @@
+export declare function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;

package/shared/foundation/vivid-element/vivid-element.d.ts

@@ -0,0 +1,3 @@
+import { FASTElement } from '@microsoft/fast-element';
+export declare class VividElement extends FASTElement {
+}