@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/selectable-box/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+const definition = require('../shared/definition42.cjs');
+require('../shared/index.cjs');
+require('../shared/definition15.cjs');
+require('../shared/definition26.cjs');
+require('../shared/icon.cjs');
+require('../shared/_has.cjs');
+require('../shared/class-names.cjs');
+require('../shared/when.cjs');
+require('../shared/definition58.cjs');
+require('../shared/focus.cjs');
+require('../shared/affix.cjs');
+require('../shared/slotted.cjs');
+require('../shared/index2.cjs');
+require('../locales/en-US.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/apply-mixins.cjs');
+require('../shared/focus2.cjs');
+require('../shared/definition40.cjs');
+require('../shared/radio.cjs');
+require('../shared/enums.cjs');
+
+definition.registerSelectableBox();

package/shared/Reflector.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+class Reflector {
+  #reflectedProperties = /* @__PURE__ */ new Map();
+  #source;
+  #target;
+  constructor(source, target) {
+    this.#source = source;
+    this.#target = target;
+  }
+  attribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "attribute",
+      destination: attributeName
+    });
+  }
+  booleanAttribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "boolean-attribute",
+      destination: attributeName
+    });
+  }
+  property(propertyName, targetProperty, skipIfEqual = false) {
+    this.#addReflectedProperty(propertyName, {
+      type: "property",
+      destination: targetProperty,
+      skipIfEqual
+    });
+  }
+  destroy() {
+    const notifier = index.Observable.getNotifier(this.#source);
+    for (const prop of this.#reflectedProperties.keys()) {
+      notifier.unsubscribe(this.#propertyChangeHandler, prop);
+    }
+    this.#reflectedProperties.clear();
+  }
+  #addReflectedProperty(name, reflected) {
+    this.#reflectedProperties.set(name, reflected);
+    const notifier = index.Observable.getNotifier(this.#source);
+    notifier.subscribe(this.#propertyChangeHandler, name);
+    this.#propertyChangeHandler.handleChange(this.#source, name);
+  }
+  #propertyChangeHandler = {
+    handleChange: (source, propertyName) => {
+      const reflectedProperty = this.#reflectedProperties.get(propertyName);
+      const value = source[propertyName];
+      switch (reflectedProperty.type) {
+        case "boolean-attribute":
+          index.DOM.setBooleanAttribute(this.#target, reflectedProperty.destination, Boolean(value));
+          break;
+        case "attribute":
+          index.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          break;
+        case "property":
+          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
+            return;
+          }
+          this.#target[reflectedProperty.destination] = value;
+          break;
+      }
+    }
+  };
+}
+
+exports.Reflector = Reflector;

package/shared/_has.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+function _isPlaceholder(a) {
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+}
+
+/**
+ * Optimized internal one-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry1(fn) {
+  return function f1(a) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
+      return f1;
+    } else {
+      return fn.apply(this, arguments);
+    }
+  };
+}
+
+/**
+ * Optimized internal two-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry2(fn) {
+  return function f2(a, b) {
+    switch (arguments.length) {
+      case 0:
+        return f2;
+
+      case 1:
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
+          return fn(a, _b);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b);
+        }) : fn(a, b);
+    }
+  };
+}
+
+function _has(prop, obj) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+exports._curry1 = _curry1;
+exports._curry2 = _curry2;
+exports._has = _has;

package/shared/affix.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+const icon = require('./icon.cjs');
+const index = require('./index.cjs');
+const slotted = require('./slotted.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class AffixIcon {
+}
+__decorateClass([
+  index.attr
+], AffixIcon.prototype, "icon", 2);
+__decorateClass([
+  index.attr({ mode: "fromView" })
+], AffixIcon.prototype, "iconSlottedContent", 2);
+class AffixIconWithTrailing extends AffixIcon {
+  constructor() {
+    super(...arguments);
+    this.iconTrailing = false;
+  }
+}
+__decorateClass([
+  index.attr({
+    mode: "boolean",
+    attribute: "icon-trailing"
+  })
+], AffixIconWithTrailing.prototype, "iconTrailing", 2);
+const IconWrapper = {
+  Slot: false,
+  Span: true
+};
+const IconAriaHidden = {
+  Hidden: "true",
+  Visible: "false"
+};
+const affixIconTemplateFactory = (context) => {
+  const iconTag = context.tagFor(icon.Icon);
+  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Visible) => {
+    if (!icon && !slottedState) {
+      return index.html`<slot name="icon" aria-hidden="${() => ariaHidden}" ${slotted.slotted("iconSlottedContent")}></slot>`;
+    }
+    if (!icon && slottedState) {
+      return null;
+    }
+    const iconTemplate = index.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
+    return slottedState ? index.html`<span class="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</span>` : index.html`<slot name="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</slot>`;
+  };
+};
+
+exports.AffixIcon = AffixIcon;
+exports.AffixIconWithTrailing = AffixIconWithTrailing;
+exports.IconAriaHidden = IconAriaHidden;
+exports.IconWrapper = IconWrapper;
+exports.affixIconTemplateFactory = affixIconTemplateFactory;

package/shared/affix.js

@@ -37,18 +37,22 @@ const IconWrapper = {
   Slot: false,
   Span: true
 };
+const IconAriaHidden = {
+  Hidden: "true",
+  Visible: "false"
+};
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);
-  return (icon, slottedState = IconWrapper.Span) => {
+  return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Visible) => {
     if (!icon && !slottedState) {
-      return html`<slot name="icon" ${slotted("iconSlottedContent")}></slot>`;
+      return html`<slot name="icon" aria-hidden="${() => ariaHidden}" ${slotted("iconSlottedContent")}></slot>`;
     }
     if (!icon && slottedState) {
       return null;
     }
     const iconTemplate = html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? html`<span class="icon">${iconTemplate}</span>` : html`<slot name="icon">${iconTemplate}</slot>`;
+    return slottedState ? html`<span class="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</span>` : html`<slot name="icon" aria-hidden="${() => ariaHidden}">${iconTemplate}</slot>`;
   };
 };
 
-export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b };
+export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b, IconAriaHidden as c };

package/shared/anchor.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+const index = require('./index.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends index.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 = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+index.__decorate([
+    index.attr
+], Anchor.prototype, "download", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "href", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "hreflang", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "ping", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "referrerpolicy", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "rel", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "target", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "type", void 0);
+index.__decorate([
+    index.observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+index.__decorate([
+    index.attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
+
+exports.Anchor = Anchor;
+exports.DelegatesARIALink = DelegatesARIALink;

package/shared/anchored.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+function anchored(constructor) {
+  class Decorated extends constructor {
+    constructor() {
+      super(...arguments);
+      this.#updateAnchorEl = () => {
+        if (!this.isConnected) {
+          this._anchorEl = void 0;
+          return;
+        }
+        this.#cleanupObserverIfNeeded();
+        let newAnchor = void 0;
+        if (this.anchor instanceof HTMLElement) {
+          newAnchor = this.anchor;
+        } else if (typeof this.anchor === "string") {
+          newAnchor = document.getElementById(this.anchor) ?? void 0;
+          if (!newAnchor) {
+            this.#observeMissingAnchor(this.anchor);
+          }
+        }
+        this._anchorEl = newAnchor;
+      };
+      this.#observeMissingAnchor = (anchorId) => {
+        this.#observer = new MutationObserver(() => {
+          const anchor = document.getElementById(anchorId);
+          if (anchor) {
+            this._anchorEl = anchor;
+            this.#cleanupObserverIfNeeded();
+          }
+        });
+        this.#observer.observe(document.body, { childList: true, subtree: true });
+      };
+      this.#cleanupObserverIfNeeded = () => {
+        this.#observer?.disconnect();
+        this.#observer = void 0;
+      };
+    }
+    anchorChanged() {
+      this.#updateAnchorEl();
+    }
+    #updateAnchorEl;
+    #observer;
+    #observeMissingAnchor;
+    #cleanupObserverIfNeeded;
+    connectedCallback() {
+      super.connectedCallback();
+      this.#updateAnchorEl();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.#cleanupObserverIfNeeded();
+      this._anchorEl = void 0;
+    }
+  }
+  __decorateClass([
+    index.attr
+  ], Decorated.prototype, "anchor", 2);
+  __decorateClass([
+    index.observable
+  ], Decorated.prototype, "_anchorEl", 2);
+  return Decorated;
+}
+
+exports.anchored = anchored;

package/shared/apply-mixins.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+    const derivedAttributes = index.AttributeConfiguration.locate(derivedCtor);
+    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));
+            }
+        });
+        const baseAttributes = index.AttributeConfiguration.locate(baseCtor);
+        baseAttributes.forEach(x => derivedAttributes.push(x));
+    });
+}
+
+exports.applyMixins = applyMixins;

package/shared/aria-global.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+/**
+ * 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 {
+}
+index.__decorate([
+    index.attr({ attribute: "aria-atomic" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+index.__decorate([
+    index.attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+
+exports.ARIAGlobalStatesAndProperties = ARIAGlobalStatesAndProperties;

package/shared/aria.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+exports.Orientation = Orientation;

package/shared/aria2.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+exports.Orientation = Orientation;

package/shared/base-progress.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+/**
+ * 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 index.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);
+    }
+}
+index.__decorate([
+    index.attr({ converter: index.nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+index.__decorate([
+    index.attr({ converter: index.nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+index.__decorate([
+    index.attr({ converter: index.nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused", void 0);
+index.__decorate([
+    index.observable
+], BaseProgress.prototype, "percentComplete", void 0);
+
+exports.BaseProgress = BaseProgress;

package/shared/breadcrumb-item.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const index = require('./index.cjs');
+const anchor = require('./anchor.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const startEnd = require('./start-end.cjs');
+
+/**
+ * A Breadcrumb Item Custom HTML Element.
+ *
+ * @public
+ */
+let BreadcrumbItem$1 = class BreadcrumbItem extends anchor.Anchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.separator = true;
+    }
+};
+index.__decorate([
+    index.observable
+], BreadcrumbItem$1.prototype, "separator", void 0);
+applyMixins.applyMixins(BreadcrumbItem$1, startEnd.StartEnd, anchor.DelegatesARIALink);
+
+exports.BreadcrumbItem = BreadcrumbItem$1;