@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/mixins.js

@@ -1,178 +1,160 @@
-import { attr, html, when, normalizeBinding, Markup, HTMLDirective, observable, slotted } from '@microsoft/fast-element';
-import { v4 } from 'uuid';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { iconDefinition, VwcIconElement as Icon } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
-import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { L as Localized } from './localized.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;
+import { o as defineVividComponent, t as VividElement } from "./vivid-element.js";
+import { n as visuallyHiddenDefinition } from "./definition.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { t as Localized } from "./localized.js";
+import { HTMLDirective, Markup, attr, html, normalizeBinding, observable, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+import { v4 } from "uuid";
+//#region src/shared/feedback/feedback-message.scss?inline
+var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.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}";
+//#endregion
+//#region src/shared/feedback/feedback-message.ts
+/**
+* Renders a feedback message of the given type. When type='none', nothing is rendered.
+*/
+var FeedbackMessage = class extends Localized(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "none";
+	}
 };
-class FeedbackMessage extends Localized(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.type = "none";
-  }
-}
-__decorateClass$1([
-  attr
-], FeedbackMessage.prototype, "type");
+__decorate([attr], FeedbackMessage.prototype, "type", void 0);
 function iconTemplate(context, icon, textI18nKey) {
-  const iconTag = context.tagFor(Icon);
-  return html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+	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 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
+var shouldAnnounce = (type) => type === "error";
+var 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)}
+	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(directive) {
-    this.source = null;
-    this.templateBindingObserver = directive.templateBinding.createObserver(
-      this,
-      directive
-    );
-  }
-  bind(controller) {
-    this.source = controller.source;
-    this.context = controller.context;
-    this.controller = controller;
-    if (!this.insertionPoint) {
-      this.insertionPoint = document.createComment("");
-      this.source.appendChild(this.insertionPoint);
-    }
-    this.templateBindingObserver.bind(controller);
-    this.handleChange(this.source, this.templateBindingObserver);
-  }
-  // unbind(): void {
-  // 	this.source = null;
-  // 	if (this.view) {
-  // 		this.view.unbind();
-  // 	}
-  // 	// The observer will be automatically cleaned up when the behavior is destroyed
-  // }
-  /**
-   * Handles change of the template itself.
-   */
-  handleChange(source, args) {
-    if (args === this.templateBindingObserver) {
-      const template = this.templateBindingObserver.bind(this.controller);
-      this.instantiateTemplate(template);
-    }
-  }
-  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 {
-  constructor(templateBinding) {
-    /**
-     * The structural id of the DOM node to which the created behavior will apply.
-     */
-    this.targetNodeId = "";
-    this.templateBinding = templateBinding;
-    this.dataBinding = templateBinding;
-  }
-  createHTML(add) {
-    return Markup.comment(add(this));
-  }
-  createBehavior() {
-    return new RenderInLightDomBehaviour(this);
-  }
-}
+var feedbackMessageDefinition = defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: feedback_message_default });
+//#endregion
+//#region src/shared/templating/render-in-light-dom.ts
+var RenderInLightDomBehaviour = class {
+	constructor(directive) {
+		this.source = null;
+		this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
+	}
+	bind(controller) {
+		this.source = controller.source;
+		this.context = controller.context;
+		this.controller = controller;
+		if (!this.insertionPoint) {
+			this.insertionPoint = document.createComment("");
+			this.source.appendChild(this.insertionPoint);
+		}
+		this.templateBindingObserver.bind(controller);
+		this.handleChange(this.source, this.templateBindingObserver);
+	}
+	/**
+	* Handles change of the template itself.
+	*/
+	handleChange(source, args) {
+		/* v8 ignore else -- @preserve */
+		if (args === this.templateBindingObserver) {
+			const template = this.templateBindingObserver.bind(this.controller);
+			this.instantiateTemplate(template);
+		}
+	}
+	instantiateTemplate(template) {
+		if (this.view) this.view.dispose();
+		this.view = template.create();
+		this.view.bind(this.source, this.context);
+		this.view.insertBefore(this.insertionPoint);
+	}
+};
+var RenderInLightDomDirective = class {
+	constructor(templateBinding) {
+		this.targetNodeId = "";
+		this.templateBinding = templateBinding;
+		this.dataBinding = templateBinding;
+	}
+	createHTML(add) {
+		return Markup.comment(add(this));
+	}
+	createBehavior() {
+		return new RenderInLightDomBehaviour(this);
+	}
+};
 HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = normalizeBinding(templateOrTemplateBinding);
-  return new RenderInLightDomDirective(templateBinding);
+	return new RenderInLightDomDirective(normalizeBinding(templateOrTemplateBinding));
 }
-
-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`
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => v4();
+//#endregion
+//#region src/shared/feedback/mixins.ts
+/**
+* Mixin for elements that display a feedback message.
+*/
+var 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() {
+			return this._internalFeedback().type === "none" && this._helperTextSlottedContent?.length ? "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}>
@@ -183,51 +165,46 @@ const WithFeedback = (Base) => {
 					<slot name="helper-text" ${slotted("_helperTextSlottedContent")}></slot>
 				</${feedbackTag}>
 			`;
-    }
-  }
-  __decorateClass([
-    attr({ attribute: "helper-text" })
-  ], ElementWithFeedback.prototype, "helperText");
-  __decorateClass([
-    observable
-  ], ElementWithFeedback.prototype, "_helperTextSlottedContent");
-  return ElementWithFeedback;
+		}
+	}
+	__decorate([attr({ attribute: "helper-text" })], ElementWithFeedback.prototype, "helperText", void 0);
+	__decorate([observable], ElementWithFeedback.prototype, "_helperTextSlottedContent", void 0);
+	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`
+/**
+* Like WithFeedback but renders the feedback message in light DOM.
+* This is needed if the control is in light DOM so that the describedby relation works.
+*/
+var WithLightDOMFeedback = (Base) => {
+	const randomFeedbackId = () => `vvd-feedback-${generateRandomId()}`;
+	const randomSlottedContentId = () => `vvd-slotted-feedback-${generateRandomId()}`;
+	class ElementWithLightDOMFeedback extends WithFeedback(Base) {
+		constructor(..._args) {
+			super(..._args);
+			this._slottedHelperTextIds = [];
+			this._feedbackId = randomFeedbackId();
+		}
+		/**
+		* @internal
+		*/
+		_helperTextSlottedContentChanged(_, newContent) {
+			for (const el of newContent)
+ /* v8 ignore else -- @preserve */
+			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"
@@ -243,12 +220,10 @@ const WithLightDOMFeedback = (Base) => {
 					></slot>
 				</${feedbackTag}>
 			`;
-    }
-  }
-  __decorateClass([
-    observable
-  ], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds");
-  return ElementWithLightDOMFeedback;
+		}
+	}
+	__decorate([observable], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds", void 0);
+	return ElementWithLightDOMFeedback;
 };
-
-export { WithLightDOMFeedback as W, WithFeedback as a, feedbackMessageDefinition as f, generateRandomId as g, renderInLightDOM as r };
+//#endregion
+export { feedbackMessageDefinition as a, renderInLightDOM as i, WithLightDOMFeedback as n, generateRandomId as r, WithFeedback as t };