@vonage/vivid 4.12.1 → 4.14.0

package/shared/slider.template.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const numbers = require('./numbers.cjs');
-const definition = require('./definition64.cjs');
-const index = require('./index.cjs');
+const definition = require('./definition63.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const ref = require('./ref.cjs');
 const aria = require('./aria.cjs');
 const when = require('./when.cjs');
@@ -35,7 +35,7 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
 const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return index.html` <div
+  return defineVividComponent.html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -45,7 +45,7 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 };
 const SliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
-  return index.html`<template
+  return defineVividComponent.html`<template
 		role="${(x) => x.ariaLabel ? "presentation" : null}"
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
@@ -77,7 +77,7 @@ const SliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    index.html`<${popupTag}
+    defineVividComponent.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate

package/shared/slider.template.js

@@ -1,6 +1,6 @@
 import { l as limit } from './numbers.js';
-import { P as Popup, a as PlacementStrategy } from './definition64.js';
-import { h as html } from './index.js';
+import { P as Popup, a as PlacementStrategy } from './definition63.js';
+import { h as html } from './defineVividComponent.js';
 import { r as ref } from './ref.js';
 import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';

package/shared/slotted.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -39,7 +39,7 @@ class NodeObservationBehavior {
      */
     bind(source) {
         const name = this.options.property;
-        this.shouldUpdate = index.Observable.getAccessors(source).some((x) => x.name === name);
+        this.shouldUpdate = defineVividComponent.Observable.getAccessors(source).some((x) => x.name === name);
         this.source = source;
         this.updateTarget(this.computeNodes());
         if (this.shouldUpdate) {
@@ -51,7 +51,7 @@ class NodeObservationBehavior {
      * @param source - The source to unbind from.
      */
     unbind() {
-        this.updateTarget(index.emptyArray);
+        this.updateTarget(defineVividComponent.emptyArray);
         this.source = null;
         if (this.shouldUpdate) {
             this.disconnect();
@@ -115,7 +115,7 @@ function slotted(propertyOrOptions) {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = { property: propertyOrOptions };
     }
-    return new index.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+    return new defineVividComponent.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
 }
 
 exports.NodeObservationBehavior = NodeObservationBehavior;

package/shared/slotted.js

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './index.js';
+import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './defineVividComponent.js';
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/shared/strings.cjs

@@ -1,29 +1,5 @@
 'use strict';
 
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-    return Math.min(Math.max(value, min), max);
-}
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
-
 let uniqueIdCounter = 0;
 /**
  * Generates a unique ID based on incrementing a counter.
@@ -32,6 +8,4 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
-exports.inRange = inRange;
-exports.limit = limit;
 exports.uniqueId = uniqueId;

package/shared/strings.js

@@ -1,27 +1,3 @@
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-    return Math.min(Math.max(value, min), max);
-}
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
-
 let uniqueIdCounter = 0;
 /**
  * Generates a unique ID based on incrementing a counter.
@@ -30,4 +6,4 @@ function uniqueId(prefix = "") {
     return `${prefix}${uniqueIdCounter++}`;
 }
 
-export { inRange as i, limit as l, uniqueId as u };
+export { uniqueId as u };

package/shared/strings2.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+exports.inRange = inRange;
+exports.limit = limit;
+exports.uniqueId = uniqueId;

package/shared/strings2.js

@@ -0,0 +1,33 @@
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
+export { inRange as i, limit as l, uniqueId as u };

package/shared/text-anchor.cjs

@@ -1,91 +1,10 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-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);
+const anchor = require('./anchor.cjs');
+const foundationElement = require('./foundation-element.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -96,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends Anchor {
+class TextAnchor extends foundationElement.FoundationElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -106,14 +25,14 @@ class TextAnchor extends Anchor {
   }
 }
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], TextAnchor.prototype, "text");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], TextAnchor.prototype, "connotation");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], TextAnchor.prototype, "appearance");
-applyMixins.applyMixins(TextAnchor, affix.AffixIcon);
+applyMixins.applyMixins(TextAnchor, affix.AffixIcon, anchor.Anchor);
 
 exports.TextAnchor = TextAnchor;

package/shared/text-anchor.js

@@ -1,89 +1,8 @@
 import { A as AffixIcon } from './affix.js';
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { S as StartEnd } from './start-end.js';
-
-/**
- * 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 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();
-    }
-}
-__decorate([
-    attr
-], Anchor.prototype, "download", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "href", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "hreflang", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "ping", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "referrerpolicy", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "rel", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "target", void 0);
-__decorate([
-    attr
-], Anchor.prototype, "type", void 0);
-__decorate([
-    observable
-], Anchor.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-class DelegatesARIALink {
-}
-__decorate([
-    attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(Anchor, StartEnd, DelegatesARIALink);
+import { A as Anchor } from './anchor.js';
+import { F as FoundationElement } from './foundation-element.js';
+import { a as attr } from './defineVividComponent.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -94,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends Anchor {
+class TextAnchor extends FoundationElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -112,6 +31,6 @@ __decorateClass([
 __decorateClass([
   attr
 ], TextAnchor.prototype, "appearance");
-applyMixins(TextAnchor, AffixIcon);
+applyMixins(TextAnchor, AffixIcon, Anchor);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -13,7 +13,7 @@ const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
 );
 const textAnchorTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`<a
+  return defineVividComponent.html`<a
 		class="${getClasses}"
 		download="${(x) => x.download}"
 		href="${(x) => x.href}"

package/shared/text-anchor.template.js

@@ -1,5 +1,5 @@
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as html } from './index.js';
+import { h as html } from './defineVividComponent.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';