@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition55.cjs

@@ -1,94 +1,151 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const textField$1 = require('./text-field2.cjs');
-const textField = require('./text-field.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
-const formElements = require('./form-elements.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
-const getStateClasses = ({
-  errorValidationMessage,
-  disabled,
-  value,
-  readOnly,
-  placeholder,
+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;
+};
+class Tag extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    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");
+    };
+  }
+  remove() {
+    if (!this.removable || this.selectable) {
+      return;
+    }
+    this.$emit("removed");
+    this.parentElement && this.parentElement.removeChild(this);
+  }
+  #select;
+  handleKeydown(e) {
+    if (e.key === "Enter") {
+      this.#select();
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.remove();
+    }
+    return true;
+  }
+  handleClick() {
+    this.#select();
+  }
+}
+__decorateClass([
+  vividElement.attr
+], Tag.prototype, "connotation");
+__decorateClass([
+  vividElement.attr
+], Tag.prototype, "shape");
+__decorateClass([
+  vividElement.attr
+], Tag.prototype, "appearance");
+__decorateClass([
+  vividElement.attr
+], Tag.prototype, "label");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tag.prototype, "removable");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tag.prototype, "disabled");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tag.prototype, "selectable");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tag.prototype, "selected");
+applyMixins.applyMixins(Tag, affix.AffixIcon);
+
+const styles = ".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{--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: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}";
+
+const getClasses = ({
+  connotation,
   appearance,
   shape,
-  label,
-  successText,
-  actionItemsSlottedContent,
-  leadingActionItemsSlottedContent,
-  icon,
-  scale
+  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)],
-  [`size-${scale}`, Boolean(scale)]
+  [`shape-${shape}`, Boolean(shape)]
 );
-function renderCharCount() {
+function renderDismissButton(iconTag) {
   return vividElement.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);
-  return vividElement.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>
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${slotted.slotted("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${formElements.getFeedbackTemplate(context)}
-		</div>
-		<slot name="_mirrored-helper-text"></slot>`;
+  const iconTag = context.tagFor(definition.Icon);
+  return vividElement.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) => vividElement.html`<span class="label">${x.label}</span>`
+  )}
+		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when.when(
+    (x) => x.selectable && x.selected,
+    vividElement.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+	</span>`;
 };
 
-const textFieldDefinition = vividElement.defineVividComponent(
-  "text-field",
-  textField$1.TextField,
-  TextfieldTemplate,
+const tagDefinition = vividElement.defineVividComponent(
+  "tag",
+  Tag,
+  tagTemplate,
   [definition.iconDefinition],
   {
-    styles: textField.styles,
+    styles,
     shadowOptions: {
       delegatesFocus: true
     }
   }
 );
-const registerTextField = vividElement.createRegisterFunction(textFieldDefinition);
+const registerTag = vividElement.createRegisterFunction(tagDefinition);
 
-exports.registerTextField = registerTextField;
-exports.textFieldDefinition = textFieldDefinition;
+exports.Tag = Tag;
+exports.registerTag = registerTag;
+exports.tagDefinition = tagDefinition;

package/shared/definition55.js

@@ -1,83 +1,139 @@
-import { i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { T as TextField } from './text-field2.js';
-import { s as styles } from './text-field.js';
-import { a as affixIconTemplateFactory } from './affix.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { g as getFeedbackTemplate } from './form-elements.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
-const getStateClasses = ({
-  errorValidationMessage,
-  disabled,
-  value,
-  readOnly,
-  placeholder,
+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;
+};
+class Tag extends VividElement {
+  constructor() {
+    super(...arguments);
+    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");
+    };
+  }
+  remove() {
+    if (!this.removable || this.selectable) {
+      return;
+    }
+    this.$emit("removed");
+    this.parentElement && this.parentElement.removeChild(this);
+  }
+  #select;
+  handleKeydown(e) {
+    if (e.key === "Enter") {
+      this.#select();
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.remove();
+    }
+    return true;
+  }
+  handleClick() {
+    this.#select();
+  }
+}
+__decorateClass([
+  attr
+], Tag.prototype, "connotation");
+__decorateClass([
+  attr
+], Tag.prototype, "shape");
+__decorateClass([
+  attr
+], Tag.prototype, "appearance");
+__decorateClass([
+  attr
+], Tag.prototype, "label");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "removable");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "disabled");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "selectable");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tag.prototype, "selected");
+applyMixins(Tag, AffixIcon);
+
+const styles = ".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{--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: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}";
+
+const getClasses = ({
+  connotation,
   appearance,
   shape,
-  label,
-  successText,
-  actionItemsSlottedContent,
-  leadingActionItemsSlottedContent,
-  icon,
-  scale
+  disabled,
+  selectable,
+  removable,
+  selected
 }) => 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)],
-  [`size-${scale}`, Boolean(scale)]
+  [`shape-${shape}`, Boolean(shape)]
 );
-function renderCharCount() {
+function renderDismissButton(iconTag) {
   return 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 = affixIconTemplateFactory(context);
-  return html` <div class="base ${getStateClasses}">
-			${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("leadingActionItemsSlottedContent")}
-					></slot>
-					${(x) => affixIconTemplate(x.icon)}
-				</div>
-
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${slotted("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${getFeedbackTemplate(context)}
-		</div>
-		<slot name="_mirrored-helper-text"></slot>`;
+  const iconTag = context.tagFor(Icon);
+  return 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, IconWrapper.Slot)}
+		${when(
+    (x) => x.label,
+    (x) => html`<span class="label">${x.label}</span>`
+  )}
+		${when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when(
+    (x) => x.selectable && x.selected,
+    html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+	</span>`;
 };
 
-const textFieldDefinition = defineVividComponent(
-  "text-field",
-  TextField,
-  TextfieldTemplate,
+const tagDefinition = defineVividComponent(
+  "tag",
+  Tag,
+  tagTemplate,
   [iconDefinition],
   {
     styles,
@@ -86,6 +142,6 @@ const textFieldDefinition = defineVividComponent(
     }
   }
 );
-const registerTextField = createRegisterFunction(textFieldDefinition);
+const registerTag = createRegisterFunction(tagDefinition);
 
-export { registerTextField as r, textFieldDefinition as t };
+export { Tag as T, registerTag as r, tagDefinition as t };