@vonage/vivid 5.15.0 → 5.16.0

package/README.md

@@ -2,4 +2,4 @@
 
 The component library of the Vivid design system, provided as a set of web components.
 
-[View Documentation](https://vivid.deno.dev/)
+[View Documentation](https://vivid.vonage.com/)

package/accordion/definition.cjs

@@ -1,212 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const accordionItem_definition = require('../accordion-item/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const AccordionExpandMode$1 = {
-  /**
-   * Designates only a single AccordionItem can be open a time.
-   */
-  single: "single",
-  /**
-   * Designates multiple AccordionItems can be open simultaneously.
-   */
-  multi: "multi"
-};
-class Accordion extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    /* eslint-disable-next-line @repo/repo/no-attribute-default-value */
-    this.expandmode = AccordionExpandMode$1.single;
-    this.activeItemIndex = 0;
-    this.change = () => {
-      this.$emit("change", this.activeid);
-    };
-    this.setItems = () => {
-      if (this.accordionItems.length === 0) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      this.activeid = this.accordionIds[this.activeItemIndex];
-      this.accordionItems.forEach((item, index) => {
-        /* v8 ignore else -- @preserve */
-        if (item instanceof accordionItem_definition.VwcAccordionItemElement) {
-          item.addEventListener("change", this.activeItemChange);
-          /* v8 ignore else -- @preserve */
-          if (this.isSingleExpandMode()) {
-            const expandedItem = this.findExpandedItem();
-            if (expandedItem === null && index === 0) {
-              item.expanded = true;
-            } else {
-              item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
-            }
-          }
-        }
-        const itemId = this.accordionIds[index];
-        item.setAttribute(
-          "id",
-          typeof itemId !== "string" ? `accordion-${index + 1}` : itemId
-        );
-        item.addEventListener("keydown", this.handleItemKeyDown);
-      });
-      /* v8 ignore else -- @preserve */
-      if (this.isSingleExpandMode()) {
-        const expandedItem = this.findExpandedItem() ?? this.accordionItems[0];
-        expandedItem.setAttribute("aria-disabled", "true");
-      }
-    };
-    this.removeItemListeners = (oldValue) => {
-      oldValue.forEach((item) => {
-        item.removeEventListener("change", this.activeItemChange);
-        item.removeEventListener("keydown", this.handleItemKeyDown);
-      });
-    };
-    this.activeItemChange = (event) => {
-      if (event.defaultPrevented || event.target !== event.currentTarget) {
-        return;
-      }
-      event.preventDefault();
-      const selectedItem = event.target;
-      this.activeid = selectedItem.getAttribute("id");
-      if (this.isSingleExpandMode()) {
-        this.resetItems();
-        selectedItem.expanded = true;
-        selectedItem.setAttribute("aria-disabled", "true");
-        this.accordionItems.forEach((item) => {
-          if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
-            item.removeAttribute("aria-disabled");
-          }
-        });
-      }
-      this.activeItemIndex = Array.from(this.accordionItems).indexOf(
-        selectedItem
-      );
-      this.change();
-    };
-    this.handleItemKeyDown = (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      switch (event.key) {
-        case fastWebUtilities.keyArrowUp:
-          event.preventDefault();
-          this.adjust(event.target, -1);
-          break;
-        case fastWebUtilities.keyArrowDown:
-          event.preventDefault();
-          this.adjust(event.target, 1);
-          break;
-        case fastWebUtilities.keyHome:
-          this.focusItem(0);
-          break;
-        case fastWebUtilities.keyEnd:
-          this.focusItem(this.accordionItems.length - 1);
-          break;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  accordionItemsChanged(oldValue) {
-    if (this.$fastController.isConnected) {
-      this.removeItemListeners(oldValue);
-      this.setItems();
-    }
-  }
-  findExpandedItem() {
-    for (let item = 0; item < this.accordionItems.length; item++) {
-      if (this.accordionItems[item].hasAttribute("expanded") === true) {
-        return this.accordionItems[item];
-      }
-    }
-    return null;
-  }
-  resetItems() {
-    this.accordionItems.forEach((item) => {
-      item.expanded = false;
-    });
-  }
-  getItemIds() {
-    return this.accordionItems.map((accordionItem) => {
-      return accordionItem.getAttribute("id");
-    });
-  }
-  isSingleExpandMode() {
-    return this.expandmode !== AccordionExpandMode$1.multi;
-  }
-  adjust(item, adjustment) {
-    this.focusItem(
-      fastWebUtilities.wrapInBounds(
-        0,
-        this.accordionItems.length - 1,
-        this.accordionItems.indexOf(item) + adjustment
-      )
-    );
-  }
-  focusItem(index) {
-    const element = this.accordionItems[index];
-    /* v8 ignore else -- @preserve */
-    if (element instanceof accordionItem_definition.VwcAccordionItemElement) {
-      element.expandbutton.focus();
-    }
-  }
-  closeAll() {
-    /* v8 ignore else -- @preserve */
-    if (this.expandmode === AccordionExpandMode$1.multi) {
-      this.accordionItems.forEach((item) => {
-        item.expanded = false;
-      });
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr({ attribute: "expand-mode" })
-], Accordion.prototype, "expandmode");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.observable
-], Accordion.prototype, "accordionItems");
-
-const getClasses = (_) => fastWebUtilities.classNames("base");
-const AccordionTemplate = fastElement.html`
-	<div class="${getClasses}">
-		<slot ${fastElement.slotted({ property: "accordionItems", filter: fastElement.elements() })}></slot>
-	</div>
-`;
-
-const AccordionExpandMode = {
-  single: "single",
-  multi: "multi"
-};
-const accordionDefinition = vividElement.defineVividComponent(
-  "accordion",
-  Accordion,
-  AccordionTemplate,
-  [accordionItem_definition.accordionItemDefinition],
-  {
-    styles
-  }
-);
-const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
-
-exports.AccordionExpandMode = AccordionExpandMode;
-exports.VwcAccordionElement = Accordion;
-exports.accordionDefinition = accordionDefinition;
-exports.registerAccordion = registerAccordion;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition4.cjs");
+exports.AccordionExpandMode = require_definition$1.AccordionExpandMode;
+exports.VwcAccordionElement = require_definition$1.Accordion;
+exports.accordionDefinition = require_definition$1.accordionDefinition;
+exports.registerAccordion = require_definition$1.registerAccordion;

package/accordion/definition.js

@@ -1,205 +1,3 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { VwcAccordionItemElement as AccordionItem, accordionItemDefinition } from '../accordion-item/definition.js';
-import { attr, observable, slotted, elements, html } from '@microsoft/fast-element';
-import { keyEnd, keyHome, keyArrowDown, keyArrowUp, wrapInBounds, classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const AccordionExpandMode$1 = {
-  /**
-   * Designates only a single AccordionItem can be open a time.
-   */
-  single: "single",
-  /**
-   * Designates multiple AccordionItems can be open simultaneously.
-   */
-  multi: "multi"
-};
-class Accordion extends VividElement {
-  constructor() {
-    super(...arguments);
-    /* eslint-disable-next-line @repo/repo/no-attribute-default-value */
-    this.expandmode = AccordionExpandMode$1.single;
-    this.activeItemIndex = 0;
-    this.change = () => {
-      this.$emit("change", this.activeid);
-    };
-    this.setItems = () => {
-      if (this.accordionItems.length === 0) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      this.activeid = this.accordionIds[this.activeItemIndex];
-      this.accordionItems.forEach((item, index) => {
-        /* v8 ignore else -- @preserve */
-        if (item instanceof AccordionItem) {
-          item.addEventListener("change", this.activeItemChange);
-          /* v8 ignore else -- @preserve */
-          if (this.isSingleExpandMode()) {
-            const expandedItem = this.findExpandedItem();
-            if (expandedItem === null && index === 0) {
-              item.expanded = true;
-            } else {
-              item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
-            }
-          }
-        }
-        const itemId = this.accordionIds[index];
-        item.setAttribute(
-          "id",
-          typeof itemId !== "string" ? `accordion-${index + 1}` : itemId
-        );
-        item.addEventListener("keydown", this.handleItemKeyDown);
-      });
-      /* v8 ignore else -- @preserve */
-      if (this.isSingleExpandMode()) {
-        const expandedItem = this.findExpandedItem() ?? this.accordionItems[0];
-        expandedItem.setAttribute("aria-disabled", "true");
-      }
-    };
-    this.removeItemListeners = (oldValue) => {
-      oldValue.forEach((item) => {
-        item.removeEventListener("change", this.activeItemChange);
-        item.removeEventListener("keydown", this.handleItemKeyDown);
-      });
-    };
-    this.activeItemChange = (event) => {
-      if (event.defaultPrevented || event.target !== event.currentTarget) {
-        return;
-      }
-      event.preventDefault();
-      const selectedItem = event.target;
-      this.activeid = selectedItem.getAttribute("id");
-      if (this.isSingleExpandMode()) {
-        this.resetItems();
-        selectedItem.expanded = true;
-        selectedItem.setAttribute("aria-disabled", "true");
-        this.accordionItems.forEach((item) => {
-          if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
-            item.removeAttribute("aria-disabled");
-          }
-        });
-      }
-      this.activeItemIndex = Array.from(this.accordionItems).indexOf(
-        selectedItem
-      );
-      this.change();
-    };
-    this.handleItemKeyDown = (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      switch (event.key) {
-        case keyArrowUp:
-          event.preventDefault();
-          this.adjust(event.target, -1);
-          break;
-        case keyArrowDown:
-          event.preventDefault();
-          this.adjust(event.target, 1);
-          break;
-        case keyHome:
-          this.focusItem(0);
-          break;
-        case keyEnd:
-          this.focusItem(this.accordionItems.length - 1);
-          break;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  accordionItemsChanged(oldValue) {
-    if (this.$fastController.isConnected) {
-      this.removeItemListeners(oldValue);
-      this.setItems();
-    }
-  }
-  findExpandedItem() {
-    for (let item = 0; item < this.accordionItems.length; item++) {
-      if (this.accordionItems[item].hasAttribute("expanded") === true) {
-        return this.accordionItems[item];
-      }
-    }
-    return null;
-  }
-  resetItems() {
-    this.accordionItems.forEach((item) => {
-      item.expanded = false;
-    });
-  }
-  getItemIds() {
-    return this.accordionItems.map((accordionItem) => {
-      return accordionItem.getAttribute("id");
-    });
-  }
-  isSingleExpandMode() {
-    return this.expandmode !== AccordionExpandMode$1.multi;
-  }
-  adjust(item, adjustment) {
-    this.focusItem(
-      wrapInBounds(
-        0,
-        this.accordionItems.length - 1,
-        this.accordionItems.indexOf(item) + adjustment
-      )
-    );
-  }
-  focusItem(index) {
-    const element = this.accordionItems[index];
-    /* v8 ignore else -- @preserve */
-    if (element instanceof AccordionItem) {
-      element.expandbutton.focus();
-    }
-  }
-  closeAll() {
-    /* v8 ignore else -- @preserve */
-    if (this.expandmode === AccordionExpandMode$1.multi) {
-      this.accordionItems.forEach((item) => {
-        item.expanded = false;
-      });
-    }
-  }
-}
-__decorateClass([
-  attr({ attribute: "expand-mode" })
-], Accordion.prototype, "expandmode");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], Accordion.prototype, "accordionItems");
-
-const getClasses = (_) => classNames("base");
-const AccordionTemplate = html`
-	<div class="${getClasses}">
-		<slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
-	</div>
-`;
-
-const AccordionExpandMode = {
-  single: "single",
-  multi: "multi"
-};
-const accordionDefinition = defineVividComponent(
-  "accordion",
-  Accordion,
-  AccordionTemplate,
-  [accordionItemDefinition],
-  {
-    styles
-  }
-);
-const registerAccordion = createRegisterFunction(accordionDefinition);
-
+import "../unbundled/definition2.js";
+import { i as Accordion, n as accordionDefinition, r as registerAccordion, t as AccordionExpandMode } from "../unbundled/definition4.js";
 export { AccordionExpandMode, Accordion as VwcAccordionElement, accordionDefinition, registerAccordion };

package/accordion/index.cjs

@@ -1,5 +1,5 @@
-"use strict";const n=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition.cjs"),r=require("../bundled/key-codes.cjs"),u=require("../bundled/numbers.cjs"),l=require("../bundled/slotted.cjs"),f=require("../bundled/class-names.cjs"),p=".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";var g=Object.defineProperty,I=(o,e,t,i)=>{for(var s=void 0,d=o.length-1,m;d>=0;d--)(m=o[d])&&(s=m(e,t,s)||s);return s&&g(e,t,s),s};const a={single:"single",multi:"multi"};class h extends n.VividElement{constructor(){super(...arguments),this.expandmode=a.single,this.activeItemIndex=0,this.change=()=>{this.$emit("change",this.activeid)},this.setItems=()=>{if(this.accordionItems.length===0)return;this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{/* v8 ignore else -- @preserve */if(e instanceof c.AccordionItem){e.addEventListener("change",this.activeItemChange);/* v8 ignore else -- @preserve */this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0?e.expanded=!0:e!==this.findExpandedItem()?e.expanded=!1:e.expanded=!0)}const i=this.accordionIds[t];e.setAttribute("id",typeof i!="string"?`accordion-${t+1}`:i),e.addEventListener("keydown",this.handleItemKeyDown)});/* v8 ignore else -- @preserve */this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute("aria-disabled","true")},this.removeItemListeners=e=>{e.forEach(t=>{t.removeEventListener("change",this.activeItemChange),t.removeEventListener("keydown",this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();const t=e.target;this.activeid=t.getAttribute("id"),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute("aria-disabled","true"),this.accordionItems.forEach(i=>{!i.hasAttribute("disabled")&&i.id!==this.activeid&&i.removeAttribute("aria-disabled")})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case r.keyArrowUp:e.preventDefault(),this.adjust(e.target,-1);break;case r.keyArrowDown:e.preventDefault(),this.adjust(e.target,1);break;case r.keyHome:this.focusItem(0);break;case r.keyEnd:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute("expanded")===!0)return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute("id"))}isSingleExpandMode(){return this.expandmode!==a.multi}adjust(e,t){this.focusItem(u.wrapInBounds(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){const t=this.accordionItems[e];/* v8 ignore else -- @preserve */t instanceof c.AccordionItem&&t.expandbutton.focus()}closeAll(){/* v8 ignore else -- @preserve */this.expandmode===a.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}}I([n.attr({attribute:"expand-mode"})],h.prototype,"expandmode");I([n.observable],h.prototype,"accordionItems");const x=o=>f.classNames("base"),b=n.html`
-	<div class="${x}">
-		<slot ${l.slotted({property:"accordionItems",filter:l.elements()})}></slot>
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/key-codes.cjs`),a=require(`../bundled/numbers.cjs`),o=require(`../bundled/definition4.cjs`);var s=`.base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}`,c={single:`single`,multi:`multi`},l=class extends e.t{constructor(...e){super(...e),this.expandmode=c.single,this.activeItemIndex=0,this.change=()=>{this.$emit(`change`,this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof o.r&&(e.addEventListener(`change`,this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0||e===this.findExpandedItem()?e.expanded=!0:e.expanded=!1));let n=this.accordionIds[t];e.setAttribute(`id`,typeof n==`string`?n:`accordion-${t+1}`),e.addEventListener(`keydown`,this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute(`aria-disabled`,`true`))},this.removeItemListeners=e=>{e.forEach(e=>{e.removeEventListener(`change`,this.activeItemChange),e.removeEventListener(`keydown`,this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();let t=e.target;this.activeid=t.getAttribute(`id`),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute(`aria-disabled`,`true`),this.accordionItems.forEach(e=>{!e.hasAttribute(`disabled`)&&e.id!==this.activeid&&e.removeAttribute(`aria-disabled`)})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case i.i:e.preventDefault(),this.adjust(e.target,-1);break;case i.t:e.preventDefault(),this.adjust(e.target,1);break;case i.s:this.focusItem(0);break;case`End`:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute(`expanded`)===!0)return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute(`id`))}isSingleExpandMode(){return this.expandmode!==c.multi}adjust(e,t){this.focusItem(a.r(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){let t=this.accordionItems[e];t instanceof o.r&&t.expandbutton.focus()}closeAll(){this.expandmode===c.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}};n.t([e.l({attribute:`expand-mode`})],l.prototype,`expandmode`,void 0),n.t([e.T],l.prototype,`accordionItems`,void 0);var u=e.d`
+	<div class="${e=>r.t(`base`)}">
+		<slot ${t.t({property:`accordionItems`,filter:t.r()})}></slot>
 	</div>
-`,v=n.defineVividComponent("accordion",h,b,[c.accordionItemDefinition],{styles:p}),E=n.createRegisterFunction(v);E();
+`,d=e.o(`accordion`,l,u,[o.t],{styles:s});e.s(d)();