@vonage/vivid 4.13.0 → 4.14.1

package/shared/breadcrumb-item.cjs

@@ -1,61 +1,9 @@
 'use strict';
 
-const ariaGlobal = require('./aria-global2.cjs');
-const index = require('./index.cjs');
+const anchor = require('./anchor.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-class Anchor {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "download");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "href");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "hreflang");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "ping");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "referrerpolicy");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "rel");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "target");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr
-], Anchor.prototype, "type");
-class DelegatesARIALink {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  index.attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded");
-applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Anchor, DelegatesARIALink);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -65,18 +13,18 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends index.FoundationElement {
+class BreadcrumbItem extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.separator = true;
   }
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], BreadcrumbItem.prototype, "text");
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], BreadcrumbItem.prototype, "separator");
-applyMixins.applyMixins(BreadcrumbItem, Anchor);
+applyMixins.applyMixins(BreadcrumbItem, anchor.Anchor);
 
 exports.BreadcrumbItem = BreadcrumbItem;

package/shared/breadcrumb-item.js

@@ -1,59 +1,7 @@
-import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
-import { a as attr, F as FoundationElement, o as observable } from './index.js';
+import { A as Anchor } from './anchor.js';
+import { V as VividElement, a as attr, o as observable } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-class Anchor {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "download");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "href");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "hreflang");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "ping");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "referrerpolicy");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "rel");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "target");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr
-], Anchor.prototype, "type");
-class DelegatesARIALink {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass$1([
-  attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded");
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(Anchor, DelegatesARIALink);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -63,7 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends FoundationElement {
+class BreadcrumbItem extends VividElement {
   constructor() {
     super(...arguments);
     this.separator = true;

package/shared/button.cjs

@@ -0,0 +1,177 @@
+'use strict';
+
+const applyMixins = require('./apply-mixins.cjs');
+const formAssociated = require('./form-associated.cjs');
+const vividElement = require('./vivid-element.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+
+class _FoundationButton extends vividElement.VividElement {
+}
+class FormAssociatedButton extends formAssociated.FormAssociated(_FoundationButton) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class VividFoundationButton extends FormAssociatedButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Prevent events to propagate if disabled
+     * @internal
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+      }
+    };
+    /**
+     * Submits the parent form
+     */
+    this.handleSubmission = () => {
+      if (!this.form) {
+        return;
+      }
+      this.attachProxy();
+      this.form.requestSubmit(this.proxy);
+      this.detachProxy();
+    };
+    /**
+     * Resets the parent form
+     */
+    this.handleFormReset = () => {
+      this.form?.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 = () => {
+      if (this.$fastController.definition.shadowOptions) {
+        if (window.ShadowRoot && /* eslint-disable-next-line */
+        !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
+          this.focus = () => {
+            this.control.focus();
+          };
+        }
+      }
+    };
+  }
+  // @ts-expect-error Function is delcared but not used
+  formactionChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formAction = this.formaction;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formenctypeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formEnctype = this.formenctype;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formmethodChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formMethod = this.formmethod;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formnovalidateChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formNoValidate = this.formnovalidate;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formtargetChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formTarget = this.formtarget;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  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() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    this.handleUnsupportedDelegatesFocus();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.addEventListener("click", this.handleClick);
+      });
+    }
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.removeEventListener("click", this.handleClick);
+      });
+    }
+  }
+}
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "autofocus");
+__decorateClass([
+  vividElement.attr({ attribute: "form" })
+], VividFoundationButton.prototype, "formId");
+__decorateClass([
+  vividElement.attr
+], VividFoundationButton.prototype, "formaction");
+__decorateClass([
+  vividElement.attr
+], VividFoundationButton.prototype, "formenctype");
+__decorateClass([
+  vividElement.attr
+], VividFoundationButton.prototype, "formmethod");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "formnovalidate");
+__decorateClass([
+  vividElement.attr
+], VividFoundationButton.prototype, "formtarget");
+__decorateClass([
+  vividElement.attr
+], VividFoundationButton.prototype, "type");
+class DelegatesARIAButton {
+}
+__decorateClass([
+  vividElement.attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded");
+__decorateClass([
+  vividElement.attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed");
+applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(VividFoundationButton, DelegatesARIAButton);
+
+exports.VividFoundationButton = VividFoundationButton;

package/shared/button.js

@@ -0,0 +1,175 @@
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './form-associated.js';
+import { V as VividElement, a as attr } from './vivid-element.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+
+class _FoundationButton extends VividElement {
+}
+class FormAssociatedButton extends FormAssociated(_FoundationButton) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class VividFoundationButton extends FormAssociatedButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Prevent events to propagate if disabled
+     * @internal
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+      }
+    };
+    /**
+     * Submits the parent form
+     */
+    this.handleSubmission = () => {
+      if (!this.form) {
+        return;
+      }
+      this.attachProxy();
+      this.form.requestSubmit(this.proxy);
+      this.detachProxy();
+    };
+    /**
+     * Resets the parent form
+     */
+    this.handleFormReset = () => {
+      this.form?.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 = () => {
+      if (this.$fastController.definition.shadowOptions) {
+        if (window.ShadowRoot && /* eslint-disable-next-line */
+        !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) {
+          this.focus = () => {
+            this.control.focus();
+          };
+        }
+      }
+    };
+  }
+  // @ts-expect-error Function is delcared but not used
+  formactionChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formAction = this.formaction;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formenctypeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formEnctype = this.formenctype;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formmethodChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formMethod = this.formmethod;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formnovalidateChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formNoValidate = this.formnovalidate;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  formtargetChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.formTarget = this.formtarget;
+    }
+  }
+  // @ts-expect-error Function is delcared but not used
+  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() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    this.handleUnsupportedDelegatesFocus();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.addEventListener("click", this.handleClick);
+      });
+    }
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const elements = Array.from(this.control.children);
+    if (elements) {
+      elements.forEach((span) => {
+        span.removeEventListener("click", this.handleClick);
+      });
+    }
+  }
+}
+__decorateClass([
+  attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "autofocus");
+__decorateClass([
+  attr({ attribute: "form" })
+], VividFoundationButton.prototype, "formId");
+__decorateClass([
+  attr
+], VividFoundationButton.prototype, "formaction");
+__decorateClass([
+  attr
+], VividFoundationButton.prototype, "formenctype");
+__decorateClass([
+  attr
+], VividFoundationButton.prototype, "formmethod");
+__decorateClass([
+  attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "formnovalidate");
+__decorateClass([
+  attr
+], VividFoundationButton.prototype, "formtarget");
+__decorateClass([
+  attr
+], VividFoundationButton.prototype, "type");
+class DelegatesARIAButton {
+}
+__decorateClass([
+  attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded");
+__decorateClass([
+  attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed");
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(VividFoundationButton, DelegatesARIAButton);
+
+export { VividFoundationButton as V };

package/shared/calendar-event.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -11,29 +11,29 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class CalendarEvent extends index.FoundationElement {
+class CalendarEvent extends vividElement.VividElement {
   // TODO should be converted to allowed range
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], CalendarEvent.prototype, "heading");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], CalendarEvent.prototype, "description");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], CalendarEvent.prototype, "connotation");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], CalendarEvent.prototype, "appearance");
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter, attribute: "overlap-count" })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "overlap-count" })
 ], CalendarEvent.prototype, "overlapCount");
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], CalendarEvent.prototype, "start");
 __decorateClass([
-  index.attr({ converter: index.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], CalendarEvent.prototype, "duration");
 
 exports.CalendarEvent = CalendarEvent;

package/shared/calendar-event.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, a as attr, n as nullableNumberConverter } from './index.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -9,7 +9,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class CalendarEvent extends FoundationElement {
+class CalendarEvent extends VividElement {
   // TODO should be converted to allowed range
 }
 __decorateClass([

package/shared/children.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const slotted = require('./slotted.cjs');
 
 /**
@@ -55,7 +55,7 @@ function children(propertyOrOptions) {
             property: propertyOrOptions,
         };
     }
-    return new index.AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
 }
 
 exports.children = children;

package/shared/children.js

@@ -1,4 +1,4 @@
-import { b as AttachedBehaviorHTMLDirective } from './index.js';
+import { b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 import { N as NodeObservationBehavior } from './slotted.js';
 
 /**

package/shared/date-picker/date-picker-base.form-associated.d.ts

@@ -1,5 +1,6 @@
-import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
-declare class _DatePickerBase extends FoundationElement {
+import { FormAssociated } from '../foundation/form-associated/form-associated';
+import { VividElement } from '../foundation/vivid-element/vivid-element';
+declare class _DatePickerBase extends VividElement {
 }
 interface _DatePickerBase extends FormAssociated {
 }

package/shared/date-picker/date-picker-base.template.d.ts

@@ -1,4 +1,3 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../design-system/defineVividComponent';
 import type { DatePickerBase } from './date-picker-base';
-export declare const DatePickerBaseTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<DatePickerBase>;
+export declare const DatePickerBaseTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<DatePickerBase, any>;