@vonage/vivid 4.24.0 → 4.25.0

package/shared/mixins.js

@@ -0,0 +1,300 @@
+import { f as defineVividComponent, h as html, V as VividElement, a as attr, H as HTMLDirective, D as DOM, O as Observable, o as observable } from './vivid-element.js';
+import { i as iconDefinition, I as Icon } from './definition28.js';
+import { v as visuallyHiddenDefinition } from './definition66.js';
+import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
+import { L as Localized } from './localized.js';
+import { s as slotted } from './slotted.js';
+
+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(VividElement) {
+  constructor() {
+    super(...arguments);
+    this.type = "none";
+  }
+}
+__decorateClass$1([
+  attr
+], FeedbackMessage.prototype, "type");
+function iconTemplate(context, icon, textI18nKey) {
+  const iconTag = context.tagFor(Icon);
+  return 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 html`${(x) => iconTemplateForType[x.type]}`;
+}
+const shouldAnnounce = (type) => type === "error";
+const FeedbackMessageTemplate = (ctx) => {
+  const message = html`<div
+		class="${(x) => classNames("message", `${x.type}-message`)}"
+	>
+		${iconForType(ctx)}<slot></slot>
+	</div>`;
+  return html`${when((x) => !shouldAnnounce(x.type), message)}
+		<span class="announcement" role="status" aria-live="polite">
+			${when((x) => shouldAnnounce(x.type), message)}
+		</span>`;
+};
+const feedbackMessageDefinition = defineVividComponent(
+  "feedback-message",
+  FeedbackMessage,
+  FeedbackMessageTemplate,
+  [iconDefinition, visuallyHiddenDefinition],
+  {
+    styles
+  }
+);
+
+class RenderInLightDomBehaviour {
+  constructor(templateBinding, isTemplateBindingVolatile) {
+    this.source = null;
+    this.templateBindingObserver = 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 HTMLDirective {
+  constructor(templateBinding) {
+    super();
+    this.templateBinding = templateBinding;
+    this.createPlaceholder = DOM.createBlockPlaceholder;
+    this.isTemplateBindingVolatile = 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 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("_helperTextSlottedContent")}></slot>
+				</${feedbackTag}>
+			`;
+    }
+  }
+  __decorateClass([
+    attr({ attribute: "helper-text" })
+  ], ElementWithFeedback.prototype, "helperText");
+  __decorateClass([
+    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 html`
+				<slot name="_feedback"></slot>
+				${renderInLightDOM(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("_helperTextSlottedContent")}
+					></slot>
+				</${feedbackTag}>
+			`;
+    }
+  }
+  __decorateClass([
+    observable
+  ], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds");
+  return ElementWithLightDOMFeedback;
+};
+
+export { WithLightDOMFeedback as W, WithFeedback as a, feedbackMessageDefinition as f, generateRandomId as g, renderInLightDOM as r };

package/shared/patterns/affix.d.ts

@@ -333,6 +333,12 @@ export declare const AffixIcon: <T extends Constructor<VividElement>>(Base: T) =
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
     };
 } & T;
 export type AffixIconElement = MixinType<typeof AffixIcon>;
@@ -668,6 +674,12 @@ export declare const AffixIconWithTrailing: <T extends Constructor<VividElement>
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
     };
 } & T;
 export declare const IconWrapper: {
@@ -678,6 +690,9 @@ export declare const IconAriaHidden: {
     Hidden: string;
     Visible: string;
 };
-type affixIconTemplateFactoryReturnType = (context: VividElementDefinitionContext) => (icon?: string, slottedState?: boolean, ariaHidden?: string) => ViewTemplate<AffixIconElement> | null;
+type affixIconTemplateFactoryReturnType = (context: VividElementDefinitionContext) => (icon?: string, slottedState?: boolean, ariaHidden?: string, announcement?: {
+    label: string;
+    announceOnUpdate?: boolean;
+}) => ViewTemplate<AffixIconElement> | null;
 export declare const affixIconTemplateFactory: affixIconTemplateFactoryReturnType;
 export {};

package/shared/patterns/anchored.d.ts

@@ -8,10 +8,10 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#7@#updateAnchorEl": () => void;
-        "__#7@#observer"?: MutationObserver | undefined;
-        "__#7@#observeMissingAnchor": (anchorId: string) => void;
-        "__#7@#cleanupObserverIfNeeded": () => void;
+        "__#9@#updateAnchorEl": () => void;
+        "__#9@#observer"?: MutationObserver | undefined;
+        "__#9@#observeMissingAnchor": (anchorId: string) => void;
+        "__#9@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
         specialHandling: boolean;
@@ -339,6 +339,12 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         ariaDescription: string | null;
         ariaRowIndexText: string | null;
         ariaRelevant: string | null;
+        "__#1@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
     };
 } & T;
 export type AnchoredElement = MixinType<typeof Anchored>;
@@ -348,10 +354,10 @@ export declare const anchorSlotTemplateFactory: () => import("@microsoft/fast-el
     _slottedAnchor?: HTMLElement[] | undefined;
     _slottedAnchorChanged(): void;
     _anchorEl?: HTMLElement | undefined;
-    "__#7@#updateAnchorEl": () => void;
-    "__#7@#observer"?: MutationObserver | undefined;
-    "__#7@#observeMissingAnchor": (anchorId: string) => void;
-    "__#7@#cleanupObserverIfNeeded": () => void;
+    "__#9@#updateAnchorEl": () => void;
+    "__#9@#observer"?: MutationObserver | undefined;
+    "__#9@#observeMissingAnchor": (anchorId: string) => void;
+    "__#9@#cleanupObserverIfNeeded": () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     specialHandling: boolean;
@@ -679,5 +685,11 @@ export declare const anchorSlotTemplateFactory: () => import("@microsoft/fast-el
     ariaDescription: string | null;
     ariaRowIndexText: string | null;
     ariaRelevant: string | null;
+    "__#1@#handleReplacedProp"(replacedProp: {
+        newPropertyName: string;
+        deprecatedPropertyName: string;
+        fromDeprecated: (v: any) => any;
+        toDeprecated?: ((v: any) => any) | undefined;
+    }): void;
 } & VividElement, any>;
 export {};