@vonage/vivid 3.0.0-next.71 → 3.0.0-next.73

package/shared/index4.js

@@ -1,83 +1,36 @@
-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 { a as applyMixins } from './apply-mixins.js';
-import { g as keyArrowLeft, h 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 { F as FoundationElement, _ as __decorate, a as attr, h as html, d as designSystem } from './index.js';
 import { c as classNames } from './class-names.js';
 
 /**
- * Expose ltr and rtl strings
+ * Standard orientation values
  */
-var Direction;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * a method to determine the current localization direction of the view
- * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
- * @public
- */
-const getDirection = (rootNode) => {
-    const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
 };
 
 /**
- * Menu items roles.
+ * Divider roles
  * @public
  */
-const MenuItemRole = {
+const DividerRole = {
     /**
-     * The menu item has a "menuitem" role
+     * The divider semantically separates content
      */
-    menuitem: "menuitem",
+    separator: "separator",
     /**
-     * The menu item has a "menuitemcheckbox" role
+     * The divider has no semantic value and is for visual presentation only.
      */
-    menuitemcheckbox: "menuitemcheckbox",
-    /**
-     * The menu item has a "menuitemradio" role
-     */
-    menuitemradio: "menuitemradio",
-};
-/**
- * @internal
- */
-const roleForMenuItem = {
-    [MenuItemRole.menuitem]: "menuitem",
-    [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
-    [MenuItemRole.menuitemradio]: "menuitemradio",
+    presentation: "presentation",
 };
 
 /**
- * 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
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
  *
  * @public
  */
-class MenuItem$1 extends FoundationElement {
+class Divider$1 extends FoundationElement {
     constructor() {
         super(...arguments);
         /**
@@ -87,285 +40,47 @@ class MenuItem$1 extends FoundationElement {
          * @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;
+        this.role = DividerRole.separator;
         /**
-         * @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
+         * The orientation of the divider.
          *
-         * @internal
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
          */
-        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"));
+        this.orientation = Orientation.horizontal;
     }
 }
-__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);
+], Divider$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 Thu, 06 Oct 2022 14:03:46 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: 40px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-font-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: transaprent;\n  --_appearance-color-outline: transaprent;\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: transaprent;\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: transaprent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\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 {}
+    attr
+], Divider$1.prototype, "orientation", void 0);
 
-__decorate([attr, __metadata("design:type", String)], MenuItem.prototype, "text", void 0);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 12 Oct 2022 06:56:20 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
 
-applyMixins(MenuItem, AffixIcon);
+class Divider extends Divider$1 {}
 
 let _ = t => t,
-    _t,
-    _t2,
-    _t3,
-    _t4,
-    _t5;
+    _t;
 
 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,
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
+
+const vividDivider = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
   styles: css_248z
 });
-designSystem.register(vividMenuItem());
+designSystem.register(vividDivider());
 
-export { MenuItem$1 as M, MenuItemRole as a, roleForMenuItem as r, vividMenuItem as v };
+export { Divider as D, vividDivider as v };