@vonage/vivid 3.0.0-next.92 → 3.0.0-next.94

package/shared/index7.js

@@ -0,0 +1,349 @@
+import '../icon/index.js';
+import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from './index.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { S as StartEnd } from './start-end.js';
+import { D as Direction, g as getDirection } from './direction.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
+
+/**
+ * Menu items roles.
+ * @public
+ */
+const MenuItemRole = {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    menuitem: "menuitem",
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    menuitemcheckbox: "menuitemcheckbox",
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    menuitemradio: "menuitemradio",
+};
+/**
+ * @internal
+ */
+const roleForMenuItem = {
+    [MenuItemRole.menuitem]: "menuitem",
+    [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+    [MenuItemRole.menuitemradio]: "menuitemradio",
+};
+
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+class MenuItem$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = MenuItemRole.menuitem;
+        /**
+         * @internal
+         */
+        this.hasSubmenu = false;
+        /**
+         * Track current direction to pass to the anchored region
+         *
+         * @internal
+         */
+        this.currentDirection = Direction.ltr;
+        this.focusSubmenuOnLoad = false;
+        /**
+         * @internal
+         */
+        this.handleMenuItemKeyDown = (e) => {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            switch (e.key) {
+                case keyEnter:
+                case keySpace:
+                    this.invoke();
+                    return false;
+                case keyArrowRight:
+                    //open/focus on submenu
+                    this.expandAndFocus();
+                    return false;
+                case keyArrowLeft:
+                    //close submenu
+                    if (this.expanded) {
+                        this.expanded = false;
+                        this.focus();
+                        return false;
+                    }
+            }
+            return true;
+        };
+        /**
+         * @internal
+         */
+        this.handleMenuItemClick = (e) => {
+            if (e.defaultPrevented || this.disabled) {
+                return false;
+            }
+            this.invoke();
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.submenuLoaded = () => {
+            if (!this.focusSubmenuOnLoad) {
+                return;
+            }
+            this.focusSubmenuOnLoad = false;
+            if (this.hasSubmenu) {
+                this.submenu.focus();
+                this.setAttribute("tabindex", "-1");
+            }
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOver = (e) => {
+            if (this.disabled || !this.hasSubmenu || this.expanded) {
+                return false;
+            }
+            this.expanded = true;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.handleMouseOut = (e) => {
+            if (!this.expanded || this.contains(document.activeElement)) {
+                return false;
+            }
+            this.expanded = false;
+            return false;
+        };
+        /**
+         * @internal
+         */
+        this.expandAndFocus = () => {
+            if (!this.hasSubmenu) {
+                return;
+            }
+            this.focusSubmenuOnLoad = true;
+            this.expanded = true;
+        };
+        /**
+         * @internal
+         */
+        this.invoke = () => {
+            if (this.disabled) {
+                return;
+            }
+            switch (this.role) {
+                case MenuItemRole.menuitemcheckbox:
+                    this.checked = !this.checked;
+                    break;
+                case MenuItemRole.menuitem:
+                    // update submenu
+                    this.updateSubmenu();
+                    if (this.hasSubmenu) {
+                        this.expandAndFocus();
+                    }
+                    else {
+                        this.$emit("change");
+                    }
+                    break;
+                case MenuItemRole.menuitemradio:
+                    if (!this.checked) {
+                        this.checked = true;
+                    }
+                    break;
+            }
+        };
+        /**
+         * Gets the submenu element if any
+         *
+         * @internal
+         */
+        this.updateSubmenu = () => {
+            this.submenu = this.domChildren().find((element) => {
+                return element.getAttribute("role") === "menu";
+            });
+            this.hasSubmenu = this.submenu === undefined ? false : true;
+        };
+    }
+    expandedChanged(oldValue) {
+        if (this.$fastController.isConnected) {
+            if (this.submenu === undefined) {
+                return;
+            }
+            if (this.expanded === false) {
+                this.submenu.collapseExpandedItem();
+            }
+            else {
+                this.currentDirection = getDirection(this);
+            }
+            this.$emit("expanded-change", this, { bubbles: false });
+        }
+    }
+    checkedChanged(oldValue, newValue) {
+        if (this.$fastController.isConnected) {
+            this.$emit("change");
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        DOM.queueUpdate(() => {
+            this.updateSubmenu();
+        });
+        if (!this.startColumnCount) {
+            this.startColumnCount = 1;
+        }
+        this.observer = new MutationObserver(this.updateSubmenu);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.submenu = undefined;
+        if (this.observer !== undefined) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+    }
+    /**
+     * get an array of valid DOM children
+     */
+    domChildren() {
+        return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "expanded", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "startColumnCount", void 0);
+__decorate([
+    attr
+], MenuItem$1.prototype, "role", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], MenuItem$1.prototype, "checked", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "submenuRegion", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "hasSubmenu", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "currentDirection", void 0);
+__decorate([
+    observable
+], MenuItem$1.prototype, "submenu", void 0);
+applyMixins(MenuItem$1, StartEnd);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\n  }\n}\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  padding-inline: 8px;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.focus-indicator {\n  border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n.base:not(.item-checkbox, .item-radio) .icon {\n  color: var(--vvd-color-neutral-600);\n}\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
+
+class MenuItem extends MenuItem$1 {}
+__decorate([attr, __metadata("design:type", String)], MenuItem.prototype, "text", void 0);
+applyMixins(MenuItem, AffixIcon);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5;
+const getClasses = ({
+  disabled,
+  checked,
+  expanded,
+  role
+}) => classNames('base', ['disabled', Boolean(disabled)], ['selected', role !== MenuItemRole.menuitem && Boolean(checked)], ['expanded', Boolean(expanded)], ['item-checkbox', role === MenuItemRole.menuitemcheckbox], ['item-radio', role === MenuItemRole.menuitemradio]);
+const MenuItemTemplate = (context, definition) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+	<template
+		aria-checked="${0}"
+		aria-disabled="${0}"
+		aria-expanded="${0}"
+		@keydown="${0}"
+		@click="${0}"
+		@mouseover="${0}"
+		@mouseout="${0}"
+	>
+		<div class="${0}">
+
+				${0}
+			${0}
+
+			${0}
+
+			${0}
+
+			${0}
+
+			<span class="text">
+				${0}
+			</span>
+		</div>
+	</template>
+	`), x => x.role !== MenuItemRole.menuitem ? x.checked : void 0, x => x.disabled, x => x.expanded, (x, c) => x.handleMenuItemKeyDown(c.event), (x, c) => x.handleMenuItemClick(c.event), (x, c) => x.handleMouseOver(c.event), (x, c) => x.handleMouseOut(c.event), getClasses, when(x => x.hasSubmenu, html(_t2 || (_t2 = _`
+								<div
+										class="expand-collapse-glyph-container"
+								>
+										<span class="expand-collapse">
+												<slot name="expand-collapse-indicator">
+														${0}
+												</slot>
+										</span>
+								</div>
+						`), definition.expandCollapseGlyph || '')), () => focusTemplate, when(x => x.role === MenuItemRole.menuitemcheckbox, html(_t3 || (_t3 = _`${0}`), x => affixIconTemplate(x.checked ? 'checkbox-checked-line' : 'checkbox-unchecked-line'))), when(x => x.role === MenuItemRole.menuitemradio, html(_t4 || (_t4 = _`${0}`), x => affixIconTemplate(x.checked ? 'radio-checked-line' : 'radio-unchecked-line'))), when(x => x.role === MenuItemRole.menuitem && x.icon, html(_t5 || (_t5 = _`${0}`), x => affixIconTemplate(x.icon))), x => x.text);
+};
+
+const vividMenuItem = MenuItem.compose({
+  baseName: 'menu-item',
+  template: MenuItemTemplate,
+  styles: css_248z
+});
+designSystem.register(vividMenuItem());
+
+export { MenuItem$1 as M, MenuItemRole as a, roleForMenuItem as r, vividMenuItem as v };

package/shared/key-codes.js

@@ -86,6 +86,7 @@ const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
 const keySpace = " ";
+const keyTab = "Tab";
 const ArrowKeys = {
     ArrowDown: keyArrowDown,
     ArrowLeft: keyArrowLeft,
@@ -93,4 +94,4 @@ const ArrowKeys = {
     ArrowUp: keyArrowUp,
 };
 
-export { ArrowKeys as A, keySpace as a, keyHome as b, keyEnd as c, keyArrowUp as d, keyArrowDown as e, keyEscape as f, keyArrowLeft as g, keyArrowRight as h, keyEnter as k };
+export { ArrowKeys as A, keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowLeft as h, keyArrowRight as i, keyEnter as k };

package/shared/numbers.js

@@ -0,0 +1,25 @@
+/**
+ * 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;
+}
+
+export { inRange as i, limit as l };

package/shared/object-keys.js

@@ -1,4 +1,4 @@
-import { M as objectKeysInternal, H as enumBugKeys$1 } from './export.js';
+import { M as objectKeysInternal, G as enumBugKeys$1 } from './export.js';
 
 var internalObjectKeys = objectKeysInternal;
 var enumBugKeys = enumBugKeys$1;

package/shared/patterns/form-elements/form-elements.d.ts

@@ -18,7 +18,7 @@ export declare function formElements<T extends {
         successText?: string | undefined;
         charCount: boolean;
         userValid: boolean;
-        "__#6608@#blurred": boolean;
+        "__#6895@#blurred": boolean;
         readonly errorValidationMessage: any;
         validate: () => void;
     };

package/shared/string-trim.js

@@ -0,0 +1,40 @@
+import { f as functionUncurryThis, L as requireObjectCoercible$1 } from './export.js';
+import { t as toString$1 } from './to-string.js';
+
+// a string of all valid unicode whitespaces
+var whitespaces$1 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis = functionUncurryThis;
+var requireObjectCoercible = requireObjectCoercible$1;
+var toString = toString$1;
+var whitespaces = whitespaces$1;
+
+var replace = uncurryThis(''.replace);
+var whitespace = '[' + whitespaces + ']';
+var ltrim = RegExp('^' + whitespace + whitespace + '*');
+var rtrim = RegExp(whitespace + whitespace + '*$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod = function (TYPE) {
+  return function ($this) {
+    var string = toString(requireObjectCoercible($this));
+    if (TYPE & 1) string = replace(string, ltrim, '');
+    if (TYPE & 2) string = replace(string, rtrim, '');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod(3)
+};
+
+export { stringTrim as s, whitespaces$1 as w };

package/shared/web.dom-collections.iterator.js

@@ -1,4 +1,4 @@
-import { d as descriptors, E as v8PrototypeDefineBug, o as objectDefineProperty, j as anObject$2, F as toIndexedObject$2, G as sharedKey$2, H as enumBugKeys$1, I as hiddenKeys$1, p as documentCreateElement$2, w as wellKnownSymbol$4, e as fails$2, q as hasOwnProperty_1, i as isCallable$3, J as toObject$1, z as isObject$1, v as defineBuiltIn$2, K as createPropertyDescriptor$1, _ as _export, L as createNonEnumerableProperty$2, x as functionCall, D as functionName, y as internalState, g as global$1 } from './export.js';
+import { d as descriptors, D as v8PrototypeDefineBug, o as objectDefineProperty, j as anObject$2, E as toIndexedObject$2, F as sharedKey$2, G as enumBugKeys$1, H as hiddenKeys$1, p as documentCreateElement$2, w as wellKnownSymbol$4, e as fails$2, q as hasOwnProperty_1, i as isCallable$3, I as toObject$1, z as isObject$1, v as defineBuiltIn$2, J as createPropertyDescriptor$1, _ as _export, K as createNonEnumerableProperty$2, x as functionCall, C as functionName, y as internalState, g as global$1 } from './export.js';
 import { o as objectKeys$1 } from './object-keys.js';
 import { h as html$1, s as setToStringTag$2, i as iterators, o as objectSetPrototypeOf } from './iterators.js';
 

package/side-drawer/index.js

@@ -44,7 +44,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 06 Nov 2022 10:46:17 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
   _t,