@vonage/vivid 4.24.0 → 4.25.0

package/shared/foundation/listbox/listbox.d.ts

@@ -1,6 +1,6 @@
 import { type ListboxOption } from '../../../lib/option/option';
 import { VividElement } from '../vivid-element/vivid-element';
-export declare abstract class Listbox extends VividElement {
+export declare class Listbox extends VividElement {
     get length(): number;
     get options(): ListboxOption[];
     set options(value: ListboxOption[]);

package/shared/foundation/vivid-element/vivid-element.d.ts

@@ -329,6 +329,20 @@ declare const VividElement_base: {
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
     };
+} & {
+    new (...args: any[]): {
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
+        readonly $fastController: import("@microsoft/fast-element").Controller;
+        $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    };
 } & (new () => HTMLElement & FASTElement) & {
     from<TBase extends {
         new (): HTMLElement;

package/shared/host-semantics.js

@@ -1,4 +1,4 @@
-import { d as ariaAttributeName, f as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
+import { b as ariaAttributeName, c as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
 
 class HostSemanticsBehavior {

package/shared/key-codes.js

@@ -15,4 +15,4 @@ const keyPageUp = "PageUp";
 const keySpace = " ";
 const keyTab = "Tab";
 
-export { 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, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };
+export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/linkable.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+const delegatesAria = require('./delegates-aria.cjs');
+const vividElement = require('./vivid-element.cjs');
+const ref = require('./ref.cjs');
+
+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 Linkable = (Base) => {
+  class LinkableElement extends delegatesAria.DelegatesAria(Base) {
+    constructor() {
+      super(...arguments);
+      /**
+       * Helper function for rendering link elements
+       * @internal
+       */
+      this._renderLinkElement = (content, cssClass, boundAriaProperties) => {
+        return vividElement.html`<a
+				class="${cssClass}"
+				download="${(x) => x.download}"
+				href="${(x) => x.href}"
+				hreflang="${(x) => x.hreflang}"
+				ping="${(x) => x.ping}"
+				referrerpolicy="${(x) => x.referrerpolicy}"
+				rel="${(x) => x.rel}"
+				target="${(x) => x.target}"
+				type="${(x) => x.type}"
+				${ref.ref("control")}
+				${delegatesAria.delegateAria(boundAriaProperties)}
+			>
+				${content}
+			</a>`;
+      };
+    }
+  }
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "download");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "href");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "hreflang");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "ping");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "referrerpolicy");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "rel");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "target");
+  __decorateClass([
+    vividElement.attr
+  ], LinkableElement.prototype, "type");
+  return LinkableElement;
+};
+
+exports.Linkable = Linkable;

package/shared/linkable.js

@@ -0,0 +1,68 @@
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
+import { a as attr, h as html } from './vivid-element.js';
+import { r as ref } from './ref.js';
+
+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 Linkable = (Base) => {
+  class LinkableElement extends DelegatesAria(Base) {
+    constructor() {
+      super(...arguments);
+      /**
+       * Helper function for rendering link elements
+       * @internal
+       */
+      this._renderLinkElement = (content, cssClass, boundAriaProperties) => {
+        return html`<a
+				class="${cssClass}"
+				download="${(x) => x.download}"
+				href="${(x) => x.href}"
+				hreflang="${(x) => x.hreflang}"
+				ping="${(x) => x.ping}"
+				referrerpolicy="${(x) => x.referrerpolicy}"
+				rel="${(x) => x.rel}"
+				target="${(x) => x.target}"
+				type="${(x) => x.type}"
+				${ref("control")}
+				${delegateAria(boundAriaProperties)}
+			>
+				${content}
+			</a>`;
+      };
+    }
+  }
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "download");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "href");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "hreflang");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "ping");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "referrerpolicy");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "rel");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "target");
+  __decorateClass([
+    attr
+  ], LinkableElement.prototype, "type");
+  return LinkableElement;
+};
+
+export { Linkable as L };

package/shared/localization/Locale.d.ts

@@ -15,6 +15,14 @@ import type { SearchableSelectLocale } from '../../lib/searchable-select/locale'
 import type { PickerFieldLocale } from '../picker-field/locale';
 import type { DateTimePickerLocale } from '../../lib/date-time-picker/locale';
 import type { RichTextEditorLocale } from '../../lib/rich-text-editor/locale';
+import type { ButtonLocale } from '../../lib/button/locale';
+import type { FeedbackMessageLocale } from '../feedback/locale';
+import type { CharCountLocale } from '../patterns/char-count/locale';
+import type { DataGridLocale } from '../../lib/data-grid/locale';
+import type { Connotation } from '../../lib/enums';
+type ConnotationAnnoncementLocale = {
+    [key in Connotation as `${key}Icon`]: string;
+};
 export interface Locale {
     lang: string;
     common: {
@@ -37,4 +45,10 @@ export interface Locale {
     tab: TabLocale;
     searchableSelect: SearchableSelectLocale;
     richTextEditor: RichTextEditorLocale;
+    button: ButtonLocale;
+    feedbackMessage: FeedbackMessageLocale;
+    connotationAnnoncement: ConnotationAnnoncementLocale;
+    charCount: CharCountLocale;
+    dataGrid: DataGridLocale;
 }
+export {};

package/shared/mixins.cjs

@@ -0,0 +1,306 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const definition = require('./definition28.cjs');
+const definition$1 = require('./definition66.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
+const localized = require('./localized.cjs');
+const slotted = require('./slotted.cjs');
+
+const styles = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (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$1(target, key, result);
+  return result;
+};
+class FeedbackMessage extends localized.Localized(vividElement.VividElement) {
+  constructor() {
+    super(...arguments);
+    this.type = "none";
+  }
+}
+__decorateClass$1([
+  vividElement.attr
+], FeedbackMessage.prototype, "type");
+function iconTemplate(context, icon, textI18nKey) {
+  const iconTag = context.tagFor(definition.Icon);
+  return vividElement.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+}
+function iconForType(context) {
+  const iconTemplateForType = {
+    none: "",
+    helper: "",
+    error: iconTemplate(context, "info-line", "errorIconText"),
+    success: iconTemplate(context, "check-circle-line", "successIconText")
+  };
+  return vividElement.html`${(x) => iconTemplateForType[x.type]}`;
+}
+const shouldAnnounce = (type) => type === "error";
+const FeedbackMessageTemplate = (ctx) => {
+  const message = vividElement.html`<div
+		class="${(x) => classNames.classNames("message", `${x.type}-message`)}"
+	>
+		${iconForType(ctx)}<slot></slot>
+	</div>`;
+  return vividElement.html`${when.when((x) => !shouldAnnounce(x.type), message)}
+		<span class="announcement" role="status" aria-live="polite">
+			${when.when((x) => shouldAnnounce(x.type), message)}
+		</span>`;
+};
+const feedbackMessageDefinition = vividElement.defineVividComponent(
+  "feedback-message",
+  FeedbackMessage,
+  FeedbackMessageTemplate,
+  [definition.iconDefinition, definition$1.visuallyHiddenDefinition],
+  {
+    styles
+  }
+);
+
+class RenderInLightDomBehaviour {
+  constructor(templateBinding, isTemplateBindingVolatile) {
+    this.source = null;
+    this.templateBindingObserver = vividElement.Observable.binding(
+      templateBinding,
+      this,
+      isTemplateBindingVolatile
+    );
+  }
+  bind(source, context) {
+    this.source = source;
+    this.context = context;
+    if (!this.insertionPoint) {
+      this.insertionPoint = document.createComment("");
+      source.appendChild(this.insertionPoint);
+    }
+    this.handleChange();
+  }
+  unbind() {
+    this.source = null;
+    this.view.unbind();
+    this.templateBindingObserver.disconnect();
+  }
+  /**
+   * Handles change of the template itself.
+   */
+  handleChange() {
+    this.instantiateTemplate(
+      this.templateBindingObserver.observe(this.source, this.context)
+    );
+  }
+  instantiateTemplate(template) {
+    if (this.view) {
+      this.view.dispose();
+    }
+    this.view = template.create();
+    this.view.bind(this.source, this.context);
+    this.view.insertBefore(this.insertionPoint);
+  }
+}
+class RenderInLightDomDirective extends vividElement.HTMLDirective {
+  constructor(templateBinding) {
+    super();
+    this.templateBinding = templateBinding;
+    this.createPlaceholder = vividElement.DOM.createBlockPlaceholder;
+    this.isTemplateBindingVolatile = vividElement.Observable.isVolatileBinding(templateBinding);
+  }
+  createBehavior() {
+    return new RenderInLightDomBehaviour(
+      this.templateBinding,
+      this.isTemplateBindingVolatile
+    );
+  }
+}
+function renderInLightDOM(templateOrTemplateBinding) {
+  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  return new RenderInLightDomDirective(templateBinding);
+}
+
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+    byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+    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]]).toLowerCase();
+}
+
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+    if (!getRandomValues) {
+        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        }
+        getRandomValues = crypto.getRandomValues.bind(crypto);
+    }
+    return getRandomValues(rnds8);
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+
+function v4(options, buf, offset) {
+    if (native.randomUUID && true && !options) {
+        return native.randomUUID();
+    }
+    options = options || {};
+    const rnds = options.random ?? options.rng?.() ?? rng();
+    if (rnds.length < 16) {
+        throw new Error('Random bytes length must be >= 16');
+    }
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    return unsafeStringify(rnds);
+}
+
+const generateRandomId = () => v4();
+
+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 WithFeedback = (Base) => {
+  class ElementWithFeedback extends Base {
+    /**
+     * Ids of the feedback content that the control should use for aria-describedby.
+     *
+     * @internal
+     */
+    get _feedbackDescribedBy() {
+      return "feedback slotted-helper-text-feedback";
+    }
+    /**
+     * @internal
+     */
+    _internalFeedback() {
+      const helperText = this._helperTextSlottedContent?.length ? "" : this.helperText;
+      const errorText = this.errorValidationMessage;
+      const successText = this.successText;
+      if (successText) return { type: "success", message: successText };
+      if (errorText) return { type: "error", message: errorText };
+      if (helperText) return { type: "helper", message: helperText };
+      return { type: "none", message: "" };
+    }
+    /**
+     * @internal
+     */
+    _slottedHelperTextFeedbackType() {
+      const shouldShowSlottedHelperText = this._internalFeedback().type === "none" && this._helperTextSlottedContent?.length;
+      return shouldShowSlottedHelperText ? "helper" : "none";
+    }
+    /**
+     * @internal
+     */
+    _getFeedbackTemplate(ctx) {
+      const feedbackTag = ctx.tagFor(FeedbackMessage);
+      return vividElement.html`
+				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
+					${(x) => x._internalFeedback().message}
+				</${feedbackTag}>
+				<${feedbackTag} id="slotted-helper-text-feedback" :type="${(x) => x._slottedHelperTextFeedbackType()}">
+					<slot name="helper-text" ${slotted.slotted("_helperTextSlottedContent")}></slot>
+				</${feedbackTag}>
+			`;
+    }
+  }
+  __decorateClass([
+    vividElement.attr({ attribute: "helper-text" })
+  ], ElementWithFeedback.prototype, "helperText");
+  __decorateClass([
+    vividElement.observable
+  ], ElementWithFeedback.prototype, "_helperTextSlottedContent");
+  return ElementWithFeedback;
+};
+const WithLightDOMFeedback = (Base) => {
+  const randomFeedbackId = () => `vvd-feedback-${generateRandomId()}`;
+  const randomSlottedContentId = () => `vvd-slotted-feedback-${generateRandomId()}`;
+  class ElementWithLightDOMFeedback extends WithFeedback(Base) {
+    constructor() {
+      super(...arguments);
+      this._slottedHelperTextIds = [];
+      /**
+       * @internal
+       */
+      this._feedbackId = randomFeedbackId();
+    }
+    /**
+     * @internal
+     */
+    _helperTextSlottedContentChanged(_, newContent) {
+      for (const el of newContent) {
+        if (!el.id) {
+          el.id = randomSlottedContentId();
+        }
+      }
+      this._slottedHelperTextIds = newContent.map((el) => el.id);
+    }
+    /**
+     * @internal
+     */
+    get _feedbackDescribedBy() {
+      return [this._feedbackId, ...this._slottedHelperTextIds].join(" ");
+    }
+    /**
+     * @internal
+     */
+    _getFeedbackTemplate(ctx) {
+      const feedbackTag = ctx.tagFor(FeedbackMessage);
+      return vividElement.html`
+				<slot name="_feedback"></slot>
+				${renderInLightDOM(vividElement.html`<${feedbackTag}
+					slot="_feedback"
+					id="${(x) => x._feedbackId}"
+					:type="${(x) => x._internalFeedback().type}"
+				>
+					${(x) => x._internalFeedback().message}
+				</${feedbackTag}>`)}
+				<${feedbackTag} :type="${(x) => x._slottedHelperTextFeedbackType()}">
+					<slot
+						name="helper-text"
+						${slotted.slotted("_helperTextSlottedContent")}
+					></slot>
+				</${feedbackTag}>
+			`;
+    }
+  }
+  __decorateClass([
+    vividElement.observable
+  ], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds");
+  return ElementWithLightDOMFeedback;
+};
+
+exports.WithFeedback = WithFeedback;
+exports.WithLightDOMFeedback = WithLightDOMFeedback;
+exports.feedbackMessageDefinition = feedbackMessageDefinition;
+exports.generateRandomId = generateRandomId;
+exports.renderInLightDOM = renderInLightDOM;