@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition53.cjs

@@ -1,87 +1,13 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$1 = require('./definition61.cjs');
-const definition = require('./definition26.cjs');
+const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const Reflector = require('./Reflector.cjs');
-const icon = require('./icon.cjs');
-const textField = require('./text-field2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const textField$1 = require('./text-field.cjs');
-const focus = require('./focus2.cjs');
+const icon = require('./icon.cjs');
 const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
-const generateRandomId = () => v4();
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -93,217 +19,132 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const getSafariWorkaroundStyleSheet = icon.memoizeWith(() => "", () => {
-  const styleSheet = new CSSStyleSheet();
-  const supportsReplaceSync = "replaceSync" in styleSheet;
-  if (supportsReplaceSync) {
-    styleSheet.replaceSync(`
-.${safariWorkaroundClassName}::placeholder {
-	opacity: 1 !important;
-	-webkit-text-fill-color: var(--_low-ink-color) !important;
-}`);
-  }
-  return styleSheet;
-});
-const installSafariWorkaroundStyle = (forElement) => {
-  const root = forElement.getRootNode();
-  const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
-  const supportsAdoptedStyleSheets = "adoptedStyleSheets" in root;
-  if (!supportsAdoptedStyleSheets) {
-    return;
-  }
-  if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
-    root.adoptedStyleSheets = [...root.adoptedStyleSheets, workaroundStyleSheet];
-  }
-};
-exports.TextField = class TextField extends textField.TextField {
+class Tag extends index.FoundationElement {
   constructor() {
     super(...arguments);
-    /**
-     * @internal
-     */
-    this._labelEl = null;
+    this.removable = false;
+    this.disabled = false;
+    this.selectable = false;
+    this.selected = false;
+    this.#select = () => {
+      if (!this.selectable || this.disabled) {
+        return;
+      }
+      this.selected = !this.selected;
+      this.$emit("selected-change");
+    };
   }
-  /**
-   * @internal
-   */
-  labelChanged() {
-    if (this._labelEl) {
-      this.#handleLabelChange(this._labelEl);
+  remove() {
+    if (!this.removable || this.selectable) {
+      return;
     }
+    this.$emit("removed");
+    this.parentElement && this.parentElement.removeChild(this);
   }
-  #handleLabelChange(labelEl) {
-    if (!this.label) {
-      labelEl.remove();
-    } else {
-      labelEl.textContent = this.label;
-      if (!labelEl.isConnected) {
-        this.appendChild(labelEl);
-      }
+  #select;
+  handleKeydown(e) {
+    if (e.key === "Enter") {
+      this.#select();
     }
-  }
-  #reflectToInput;
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.control) {
-      const uniqueId = this.id || generateRandomId();
-      const controlId = `vvd-text-field-control-${uniqueId}`;
-      const input = document.createElement("input");
-      input.slot = "_control";
-      input.id = controlId;
-      input.className = safariWorkaroundClassName;
-      this.control = input;
-      this.#reflectToInput = new Reflector.Reflector(this, input);
-      this.#reflectToInput.booleanAttribute("autofocus", "autofocus");
-      this.#reflectToInput.booleanAttribute("disabled", "disabled");
-      this.#reflectToInput.booleanAttribute("readOnly", "readonly");
-      this.#reflectToInput.booleanAttribute("required", "required");
-      this.#reflectToInput.booleanAttribute("spellcheck", "spellcheck");
-      this.#reflectToInput.attribute("list", "list");
-      this.#reflectToInput.attribute("maxlength", "maxlength");
-      this.#reflectToInput.attribute("minlength", "minlength");
-      this.#reflectToInput.attribute("pattern", "pattern");
-      this.#reflectToInput.attribute("placeholder", "placeholder");
-      this.#reflectToInput.attribute("size", "size");
-      this.#reflectToInput.attribute("autoComplete", "autocomplete");
-      this.#reflectToInput.attribute("type", "type");
-      this.#reflectToInput.attribute("ariaAtomic", "aria-atomic");
-      this.#reflectToInput.attribute("ariaBusy", "aria-busy");
-      this.#reflectToInput.attribute("ariaCurrent", "aria-current");
-      this.#reflectToInput.attribute("ariaDetails", "aria-details");
-      this.#reflectToInput.attribute("ariaDisabled", "aria-disabled");
-      this.#reflectToInput.attribute("ariaHaspopup", "aria-haspopup");
-      this.#reflectToInput.attribute("ariaHidden", "aria-hidden");
-      this.#reflectToInput.attribute("ariaInvalid", "aria-invalid");
-      this.#reflectToInput.attribute("ariaKeyshortcuts", "aria-keyshortcuts");
-      this.#reflectToInput.attribute("ariaLabel", "aria-label");
-      this.#reflectToInput.attribute("ariaLive", "aria-live");
-      this.#reflectToInput.attribute("ariaRelevant", "aria-relevant");
-      this.#reflectToInput.attribute("ariaRoledescription", "aria-roledescription");
-      this.#reflectToInput.property("value", "value", true);
-      input.addEventListener("input", () => {
-        this.handleTextInput();
-      });
-      input.addEventListener("change", () => {
-        this.handleChange();
-      });
-      input.addEventListener("blur", () => {
-        this.$emit("blur", void 0, { bubbles: false });
-      });
-      input.addEventListener("focus", () => {
-        this.$emit("focus", void 0, { bubbles: false });
-      });
-      this.appendChild(input);
-      const label = document.createElement("label");
-      label.slot = "_label";
-      label.htmlFor = controlId;
-      this._labelEl = label;
-      this.#handleLabelChange(label);
-      installSafariWorkaroundStyle(this);
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.remove();
     }
+    return true;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#reflectToInput.destroy();
-  }
-  focus() {
-    this.control?.focus();
+  handleClick() {
+    this.#select();
   }
-};
+}
+__decorateClass([
+  index.attr
+], Tag.prototype, "connotation", 2);
 __decorateClass([
   index.attr
-], exports.TextField.prototype, "appearance", 2);
+], Tag.prototype, "shape", 2);
 __decorateClass([
   index.attr
-], exports.TextField.prototype, "shape", 2);
+], Tag.prototype, "appearance", 2);
 __decorateClass([
   index.attr
-], exports.TextField.prototype, "autoComplete", 2);
+], Tag.prototype, "label", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "removable", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "disabled", 2);
 __decorateClass([
-  index.observable
-], exports.TextField.prototype, "actionItemsSlottedContent", 2);
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selectable", 2);
 __decorateClass([
-  index.observable
-], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
-exports.TextField = __decorateClass([
-  index$1.errorText,
-  index$1.formElements
-], exports.TextField);
-applyMixins.applyMixins(exports.TextField, affix.AffixIcon, index$1.FormElementCharCount, index$1.FormElementHelperText, index$1.FormElementSuccessText);
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selected", 2);
+applyMixins.applyMixins(Tag, affix.AffixIcon);
 
-const getStateClasses = ({
-  errorValidationMessage,
-  disabled,
-  value,
-  readOnly,
-  placeholder,
+const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}\n";
+
+const getClasses = ({
+  connotation,
   appearance,
   shape,
-  label,
-  successText,
-  actionItemsSlottedContent,
-  leadingActionItemsSlottedContent,
-  icon
+  disabled,
+  selectable,
+  removable,
+  selected
 }) => classNames.classNames(
-  ["error", Boolean(errorValidationMessage)],
+  "base",
   ["disabled", disabled],
-  ["has-value", Boolean(value)],
-  ["readonly", readOnly],
-  ["placeholder", Boolean(placeholder)],
+  ["selectable", selectable],
+  ["selected", selectable && selected],
+  ["removable", removable && !selectable],
+  [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["no-label", !label],
-  ["has-icon", !!icon],
-  ["success", Boolean(successText)],
-  ["action-items", !!actionItemsSlottedContent?.length],
-  ["leading-action-items", !!leadingActionItemsSlottedContent?.length],
-  ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)]
+  [`shape-${shape}`, Boolean(shape)]
 );
-function renderCharCount() {
+function renderDismissButton(iconTag) {
   return index.html`
-		<span class="char-count">${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span>
-	`;
+	<span
+		aria-hidden="true"
+		class="dismiss-button"
+		@click="${(x) => x.remove()}">
+		<${iconTag} name="close-line"></${iconTag}>
+	</span>`;
 }
-const TextfieldTemplate = (context) => {
+const tagTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const focusTemplate = focus.focusTemplateFactory(context);
-  return index.html`
-	<div class="base ${getStateClasses}">
-    ${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
-    <slot class="label" name="_label"></slot>
-    <div class="fieldset">
-			<div class="leading-items-wrapper">
-				<slot name="leading-action-items"  ${slotted.slotted("leadingActionItemsSlottedContent")}></slot>
-				${(x) => affixIconTemplate(x.icon)}
-			</div>
-
-			<div class="wrapper">
-				<slot class="control" name="_control"></slot>
-				${() => focusTemplate}
-			</div>
-			<div class="action-items-wrapper">
-				<slot name="action-items"  ${slotted.slotted("actionItemsSlottedContent")}></slot>
-			</div>
-
-    </div>
-	  ${when.when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, index$1.getFeedbackTemplate("helper", context))}
-	  ${when.when((x) => !x.successText && x.errorValidationMessage, index$1.getFeedbackTemplate("error", context))}
-	  ${when.when((x) => x.successText, index$1.getFeedbackTemplate("success", context))}
-	</div>`;
+  const iconTag = context.tagFor(icon.Icon);
+  return index.html` <span
+		class="${getClasses}"
+		role="option"
+		aria-disabled="${(x) => x.disabled}"
+		aria-selected="${(x) => x.selectable}"
+		tabindex="${(x) => x.disabled ? null : 0}"
+		@keydown="${(x, c) => x.handleKeydown(c.event)}"
+		@click="${(x) => x.handleClick()}"
+	>
+		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+		${when.when(
+    (x) => x.label,
+    (x) => index.html`<span class="label">${x.label}</span>`
+  )}
+		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when.when(
+    (x) => x.selectable && x.selected,
+    index.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+	</span>`;
 };
 
-const textFieldDefinition = exports.TextField.compose({
-  baseName: "text-field",
-  template: TextfieldTemplate,
-  styles: textField$1.styles,
+const tagDefinition = Tag.compose({
+  baseName: "tag",
+  template: tagTemplate,
+  styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const textFieldRegistries = [textFieldDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
-const registerTextField = index.registerFactory(textFieldRegistries);
+const tagRegistries = [tagDefinition(), ...definition.iconRegistries];
+const registerTag = index.registerFactory(tagRegistries);
 
-exports.registerTextField = registerTextField;
-exports.textFieldDefinition = textFieldDefinition;
-exports.textFieldRegistries = textFieldRegistries;
+exports.registerTag = registerTag;
+exports.tagDefinition = tagDefinition;