@vonage/vivid 4.12.1 → 4.14.0

package/shared/base-progress.js

@@ -1,70 +1,77 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
+import { F as FoundationElement } from './foundation-element.js';
+import { a as attr, n as nullableNumberConverter, o as observable } from './defineVividComponent.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
- */
+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 BaseProgress extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates progress in %
-         * @internal
-         */
-        this.percentComplete = 0;
+  constructor() {
+    super(...arguments);
+    this.percentComplete = 0;
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
     }
-    valueChanged() {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
+  }
+  /**
+   * @internal
+   */
+  minChanged() {
+    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);
+  }
+  /**
+   * @private
+   */
+  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);
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused");
+__decorateClass([
+  observable
+], BaseProgress.prototype, "percentComplete");
 
 export { BaseProgress as B };

package/shared/breadcrumb-item.cjs

@@ -1,60 +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);
+const defineVividComponent = require('./defineVividComponent.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -65,18 +14,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
+  defineVividComponent.attr
 ], BreadcrumbItem.prototype, "text");
 __decorateClass([
-  index.observable
+  defineVividComponent.observable
 ], BreadcrumbItem.prototype, "separator");
-applyMixins.applyMixins(BreadcrumbItem, Anchor);
+applyMixins.applyMixins(BreadcrumbItem, anchor.Anchor);
 
 exports.BreadcrumbItem = BreadcrumbItem;

package/shared/breadcrumb-item.js

@@ -1,58 +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 } 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);
+import { a as attr, o as observable } from './defineVividComponent.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -63,7 +12,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,178 @@
+'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');
+const defineVividComponent = require('./defineVividComponent.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([
+  defineVividComponent.attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "autofocus");
+__decorateClass([
+  defineVividComponent.attr({ attribute: "form" })
+], VividFoundationButton.prototype, "formId");
+__decorateClass([
+  defineVividComponent.attr
+], VividFoundationButton.prototype, "formaction");
+__decorateClass([
+  defineVividComponent.attr
+], VividFoundationButton.prototype, "formenctype");
+__decorateClass([
+  defineVividComponent.attr
+], VividFoundationButton.prototype, "formmethod");
+__decorateClass([
+  defineVividComponent.attr({ mode: "boolean" })
+], VividFoundationButton.prototype, "formnovalidate");
+__decorateClass([
+  defineVividComponent.attr
+], VividFoundationButton.prototype, "formtarget");
+__decorateClass([
+  defineVividComponent.attr
+], VividFoundationButton.prototype, "type");
+class DelegatesARIAButton {
+}
+__decorateClass([
+  defineVividComponent.attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded");
+__decorateClass([
+  defineVividComponent.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,176 @@
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './form-associated.js';
+import { V as VividElement } from './vivid-element.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { a as attr } from './defineVividComponent.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 };