@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/mixins.cjs

@@ -1,181 +1,161 @@
-'use strict';
-
-const fastElement = require('@microsoft/fast-element');
-const uuid = require('uuid');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('./vivid-element.cjs');
-const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
-const localized = require('./localized.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;
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
+const require_definition$1 = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+let uuid = require("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 require_localized.Localized(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "none";
+	}
 };
-class FeedbackMessage extends localized.Localized(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.type = "none";
-  }
-}
-__decorateClass$1([
-  fastElement.attr
-], FeedbackMessage.prototype, "type");
+require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
 function iconTemplate(context, icon, textI18nKey) {
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+	const iconTag = context.tagFor(require_definition$1.Icon);
+	return _microsoft_fast_element.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 fastElement.html`${(x) => iconTemplateForType[x.type]}`;
+	const iconTemplateForType = {
+		none: "",
+		helper: "",
+		error: iconTemplate(context, "info-line", "errorIconText"),
+		success: iconTemplate(context, "check-circle-line", "successIconText")
+	};
+	return _microsoft_fast_element.html`${(x) => iconTemplateForType[x.type]}`;
 }
-const shouldAnnounce = (type) => type === "error";
-const FeedbackMessageTemplate = (ctx) => {
-  const message = fastElement.html`<div
-		class="${(x) => fastWebUtilities.classNames("message", `${x.type}-message`)}"
+var shouldAnnounce = (type) => type === "error";
+var FeedbackMessageTemplate = (ctx) => {
+	const message = _microsoft_fast_element.html`<div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("message", `${x.type}-message`)}"
 	>
 		${iconForType(ctx)}<slot></slot>
 	</div>`;
-  return fastElement.html`${fastElement.when((x) => !shouldAnnounce(x.type), message)}
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => !shouldAnnounce(x.type), message)}
 		<span class="announcement" role="status" aria-live="polite">
-			${fastElement.when((x) => shouldAnnounce(x.type), message)}
+			${(0, _microsoft_fast_element.when)((x) => shouldAnnounce(x.type), message)}
 		</span>`;
 };
-const feedbackMessageDefinition = vividElement.defineVividComponent(
-  "feedback-message",
-  FeedbackMessage,
-  FeedbackMessageTemplate,
-  [icon_definition.iconDefinition, visuallyHidden_definition.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) {
-    /* 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);
-  }
-}
-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 fastElement.Markup.comment(add(this));
-  }
-  createBehavior() {
-    return new RenderInLightDomBehaviour(this);
-  }
-}
-fastElement.HTMLDirective.define(RenderInLightDomDirective);
+var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition$1.iconDefinition, require_definition.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 _microsoft_fast_element.Markup.comment(add(this));
+	}
+	createBehavior() {
+		return new RenderInLightDomBehaviour(this);
+	}
+};
+_microsoft_fast_element.HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = fastElement.normalizeBinding(templateOrTemplateBinding);
-  return new RenderInLightDomDirective(templateBinding);
+	return new RenderInLightDomDirective((0, _microsoft_fast_element.normalizeBinding)(templateOrTemplateBinding));
 }
-
-const generateRandomId = () => uuid.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 fastElement.html`
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => (0, uuid.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 _microsoft_fast_element.html`
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
 				</${feedbackTag}>
@@ -183,57 +163,51 @@ const WithFeedback = (Base) => {
 					id="slotted-helper-text-feedback"
 					:type="${(x) => x._slottedHelperTextFeedbackType()}"
 				>
-					<slot name="helper-text" ${fastElement.slotted("_helperTextSlottedContent")}></slot>
+					<slot name="helper-text" ${(0, _microsoft_fast_element.slotted)("_helperTextSlottedContent")}></slot>
 				</${feedbackTag}>
 			`;
-    }
-  }
-  __decorateClass([
-    fastElement.attr({ attribute: "helper-text" })
-  ], ElementWithFeedback.prototype, "helperText");
-  __decorateClass([
-    fastElement.observable
-  ], ElementWithFeedback.prototype, "_helperTextSlottedContent");
-  return ElementWithFeedback;
+		}
+	}
+	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "helper-text" })], ElementWithFeedback.prototype, "helperText", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.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) {
-        /* 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 fastElement.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 _microsoft_fast_element.html`
 				<slot name="_feedback"></slot>
-				${renderInLightDOM(fastElement.html`<${feedbackTag}
+				${renderInLightDOM(_microsoft_fast_element.html`<${feedbackTag}
 					slot="_feedback"
 					id="${(x) => x._feedbackId}"
 					:type="${(x) => x._internalFeedback().type}"
@@ -243,20 +217,43 @@ const WithLightDOMFeedback = (Base) => {
 				<${feedbackTag} :type="${(x) => x._slottedHelperTextFeedbackType()}">
 					<slot
 						name="helper-text"
-						${fastElement.slotted("_helperTextSlottedContent")}
+						${(0, _microsoft_fast_element.slotted)("_helperTextSlottedContent")}
 					></slot>
 				</${feedbackTag}>
 			`;
-    }
-  }
-  __decorateClass([
-    fastElement.observable
-  ], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds");
-  return ElementWithLightDOMFeedback;
+		}
+	}
+	require_decorate.__decorate([_microsoft_fast_element.observable], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds", void 0);
+	return ElementWithLightDOMFeedback;
 };
-
-exports.WithFeedback = WithFeedback;
-exports.WithLightDOMFeedback = WithLightDOMFeedback;
-exports.feedbackMessageDefinition = feedbackMessageDefinition;
-exports.generateRandomId = generateRandomId;
-exports.renderInLightDOM = renderInLightDOM;
+//#endregion
+Object.defineProperty(exports, "WithFeedback", {
+	enumerable: true,
+	get: function() {
+		return WithFeedback;
+	}
+});
+Object.defineProperty(exports, "WithLightDOMFeedback", {
+	enumerable: true,
+	get: function() {
+		return WithLightDOMFeedback;
+	}
+});
+Object.defineProperty(exports, "feedbackMessageDefinition", {
+	enumerable: true,
+	get: function() {
+		return feedbackMessageDefinition;
+	}
+});
+Object.defineProperty(exports, "generateRandomId", {
+	enumerable: true,
+	get: function() {
+		return generateRandomId;
+	}
+});
+Object.defineProperty(exports, "renderInLightDOM", {
+	enumerable: true,
+	get: function() {
+		return renderInLightDOM;
+	}
+});