@vonage/vivid 3.47.0 → 3.49.0-preview.0

package/pagination/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const definition = require('../shared/definition36.cjs');
+require('../shared/definition11.cjs');
+require('../shared/index.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/definition37.cjs');
+require('../shared/base-progress.cjs');
+require('../shared/affix.cjs');
+require('../shared/slotted.cjs');
+require('../shared/button.cjs');
+require('../shared/apply-mixins.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/aria-global.cjs');
+require('../shared/start-end.cjs');
+require('../shared/ref.cjs');
+require('../shared/enums.cjs');
+require('../shared/children.cjs');
+require('../shared/repeat.cjs');
+
+definition.registerPagination();

package/pagination/index.js

@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/children.js';
 import '../shared/repeat.js';

package/popup/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const definition = require('../shared/definition60.cjs');
+require('../shared/index.cjs');
+require('../shared/definition11.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/definition37.cjs');
+require('../shared/base-progress.cjs');
+require('../shared/affix.cjs');
+require('../shared/slotted.cjs');
+require('../shared/button.cjs');
+require('../shared/apply-mixins.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/aria-global.cjs');
+require('../shared/start-end.cjs');
+require('../shared/ref.cjs');
+require('../shared/enums.cjs');
+require('../shared/definition59.cjs');
+
+definition.registerPopup();

package/popup/index.js

@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 

package/progress/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const definition = require('../shared/definition38.cjs');
+require('../shared/index.cjs');
+require('../shared/base-progress.cjs');
+require('../shared/when.cjs');
+require('../shared/class-names.cjs');
+
+definition.registerProgress();

package/progress-ring/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const definition = require('../shared/definition37.cjs');
+require('../shared/index.cjs');
+require('../shared/base-progress.cjs');
+require('../shared/when.cjs');
+require('../shared/class-names.cjs');
+
+definition.registerProgressRing();

package/radio/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const definition = require('../shared/definition40.cjs');
+require('../shared/index.cjs');
+require('../shared/definition58.cjs');
+require('../shared/focus.cjs');
+require('../shared/radio.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/focus2.cjs');
+require('../shared/when.cjs');
+require('../shared/class-names.cjs');
+
+definition.registerRadio();

package/radio-group/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const definition = require('../shared/definition39.cjs');
+require('../shared/index.cjs');
+require('../shared/direction.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/aria.cjs');
+require('../shared/radio.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/slotted.cjs');
+require('../shared/when.cjs');
+require('../shared/aria2.cjs');
+
+definition.registerRadioGroup();

package/select/index.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const definition = require('../shared/definition41.cjs');
+require('../shared/index.cjs');
+require('../shared/definition58.cjs');
+require('../shared/focus.cjs');
+require('../shared/definition60.cjs');
+require('../shared/definition11.cjs');
+require('../shared/definition26.cjs');
+require('../shared/icon.cjs');
+require('../shared/_has.cjs');
+require('../shared/class-names.cjs');
+require('../shared/when.cjs');
+require('../shared/definition37.cjs');
+require('../shared/base-progress.cjs');
+require('../shared/affix.cjs');
+require('../shared/slotted.cjs');
+require('../shared/button.cjs');
+require('../shared/apply-mixins.cjs');
+require('../shared/form-associated.cjs');
+require('../shared/key-codes.cjs');
+require('../shared/aria-global.cjs');
+require('../shared/start-end.cjs');
+require('../shared/ref.cjs');
+require('../shared/enums.cjs');
+require('../shared/definition59.cjs');
+require('../shared/definition35.cjs');
+require('../shared/dom.cjs');
+require('../shared/focus2.cjs');
+require('../shared/index2.cjs');
+require('../locales/en-US.cjs');
+require('../shared/listbox.cjs');
+require('../shared/key-codes2.cjs');
+require('../shared/strings.cjs');
+require('../shared/numbers.cjs');
+require('../shared/select.options.cjs');
+
+definition.registerSelect();

package/select/index.js

@@ -20,11 +20,11 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 import '../shared/definition35.js';
 import '../shared/dom.js';
+import '../shared/focus2.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/listbox.js';

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;