@vonage/vivid 4.4.0 → 4.6.0

package/shared/index2.cjs

@@ -1,261 +1,11 @@
 'use strict';
 
-const icon = require('./icon.cjs');
-const index = require('./index.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const locales_enUS = require('../locales/en-US.cjs');
-
-const messageStyles = ".sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.message{display:none;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message--visible{display:flex}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}";
-
-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 FormElementHelperText {
-}
-__decorateClass$1([
-  index.attr({ attribute: "helper-text" })
-], FormElementHelperText.prototype, "helperText");
-__decorateClass$1([
-  index.observable
-], FormElementHelperText.prototype, "_helperTextSlottedContent");
-class FormElementSuccessText {
-}
-__decorateClass$1([
-  index.attr({ attribute: "success-text" })
-], FormElementSuccessText.prototype, "successText");
-class FormElementCharCount {
-  constructor() {
-    this.charCount = false;
-  }
-}
-__decorateClass$1([
-  index.attr({
-    attribute: "char-count",
-    mode: "boolean"
-  })
-], FormElementCharCount.prototype, "charCount");
-function formElements(constructor) {
-  let currentPrototype = constructor.prototype;
-  while (currentPrototype) {
-    const parentPrototype = Object.getPrototypeOf(currentPrototype);
-    if (currentPrototype.validate && !parentPrototype.validate) {
-      currentPrototype.validate = function(anchor) {
-        if (this.proxy instanceof HTMLElement && this.elementInternals) {
-          const isValid = this.proxy.validity.valid;
-          const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
-          if (isValid && controlIsInvalidDueToMinOrMaxLength) {
-            this.setValidity(
-              this.control.validity,
-              this.control.validationMessage,
-              anchor
-            );
-          } else {
-            this.setValidity(
-              this.proxy.validity,
-              this.proxy.validationMessage,
-              anchor
-            );
-          }
-        }
-      };
-      break;
-    }
-    currentPrototype = parentPrototype;
-  }
-  class Decorated extends constructor {
-    constructor(...args) {
-      super(...args);
-      this.errorValidationMessage = "";
-      this.#forceErrorDisplay = false;
-      this.#hasBeenTouched = false;
-      this.#handleInvalidEvent = () => {
-        this.#forceErrorDisplay = true;
-        this.validate();
-      };
-      this.validate = () => {
-        super.validate();
-        const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
-        this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
-      };
-      this.addEventListener("blur", () => {
-        this.#hasBeenTouched = true;
-        this.#forceErrorDisplay = false;
-        this.validate();
-      });
-      this.addEventListener("focus", () => {
-        this.#hasBeenTouched = false;
-      });
-      this.addEventListener("invalid", () => {
-        this.proxy.dispatchEvent(new Event("invalid"));
-      });
-    }
-    #forceErrorDisplay;
-    #hasBeenTouched;
-    connectedCallback() {
-      super.connectedCallback();
-      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
-    }
-    #handleInvalidEvent;
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
-    }
-    formResetCallback() {
-      this.#forceErrorDisplay = false;
-      super.formResetCallback();
-      this.validate();
-    }
-  }
-  __decorateClass$1([
-    index.attr
-  ], Decorated.prototype, "label");
-  __decorateClass$1([
-    index.observable
-  ], Decorated.prototype, "errorValidationMessage");
-  return Decorated;
-}
-const feedback = {
-  helper: {
-    messageProperty: "helperText",
-    className: "helper",
-    slot: {
-      name: "helper-text",
-      slottedContentProperty: "_helperTextSlottedContent"
-    },
-    role: "none"
-  },
-  error: {
-    messageProperty: "errorValidationMessage",
-    className: "error",
-    iconType: "info-line",
-    role: "status"
-  },
-  success: {
-    messageProperty: "successText",
-    className: "success",
-    iconType: "check-circle-line",
-    role: "none"
-  }
-};
-const isFeedbackAvailable = (config, x) => Boolean(
-  x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
-);
-function getFeedbackTemplate(context) {
-  return index.html`
-		<style>
-			${messageStyles}
-		</style>
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.helper,
-    (x) => isFeedbackAvailable(feedback.helper, x) && !isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.error,
-    (x) => isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.success,
-    (x) => isFeedbackAvailable(feedback.success, x)
-  )}
-	`;
-}
-function getFeedbackTypeTemplate(context, config, shouldShow) {
-  const iconTag = context.tagFor(icon.Icon);
-  const messageTemplate = index.html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? index.html`<slot
-				name="${config.slot.name}"
-				${slotted.slotted(config.slot.slottedContentProperty)}
-				>${messageTemplate}</slot
-		  >` : messageTemplate;
-  return index.html`<div
-		class="${(x) => classNames.classNames(
-    "message",
-    `${config.className}-message`,
-    ["message--visible", config.role === "status" || shouldShow(x)],
-    ["sr-only", !shouldShow(x)]
-  )}"
-		role="${config.role}"
-		aria-atomic="false"
-	>
-		${when.when(
-    (x) => shouldShow(x) && config.iconType,
-    index.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
-  )}
-		<span class="message-text">${innerTemplate}</span>
-	</div>`;
-}
-function errorText(constructor) {
-  class Decorated extends constructor {
-    #blockValidateCalls = false;
-    constructor(...args) {
-      super(...args);
-      this._validate = this.validate;
-      this.validate = () => {
-        if (!this.#blockValidateCalls) this._validate();
-      };
-    }
-    errorTextChanged(_, newErrorText) {
-      if (newErrorText) {
-        this.#forceCustomError(newErrorText);
-      } else {
-        this.#clearCustomErrorAndRevalidate();
-      }
-    }
-    #forceCustomError(errorMessage) {
-      this.setValidity({ customError: true }, errorMessage, this.control);
-      this.errorValidationMessage = errorMessage;
-      this.#blockValidateCalls = true;
-    }
-    #clearCustomErrorAndRevalidate() {
-      this.setValidity({}, "", this.control);
-      this.#blockValidateCalls = false;
-      this.validate();
-    }
-  }
-  __decorateClass$1([
-    index.attr({ attribute: "error-text" })
-  ], Decorated.prototype, "errorText");
-  return Decorated;
-}
-
-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 CurrentLocale {
-  constructor() {
-    this.locale = locales_enUS;
+function handleEscapeKeyAndStopPropogation(event) {
+  if (event.key === "Escape") {
+    event.stopPropagation();
+    return true;
   }
+  return false;
 }
-__decorateClass([
-  index.observable
-], CurrentLocale.prototype, "locale");
-const currentLocale = new CurrentLocale();
-const setLocale = (locale) => {
-  currentLocale.locale = locale;
-};
 
-exports.FormElementCharCount = FormElementCharCount;
-exports.FormElementHelperText = FormElementHelperText;
-exports.FormElementSuccessText = FormElementSuccessText;
-exports.currentLocale = currentLocale;
-exports.errorText = errorText;
-exports.formElements = formElements;
-exports.getFeedbackTemplate = getFeedbackTemplate;
-exports.setLocale = setLocale;
+exports.handleEscapeKeyAndStopPropogation = handleEscapeKeyAndStopPropogation;

package/shared/index2.js

@@ -1,252 +1,9 @@
-import { I as Icon } from './icon.js';
-import { a as attr, o as observable, h as html } from './index.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
-import enUS from '../locales/en-US.js';
-
-const messageStyles = ".sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.message{display:none;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message--visible{display:flex}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}";
-
-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 FormElementHelperText {
-}
-__decorateClass$1([
-  attr({ attribute: "helper-text" })
-], FormElementHelperText.prototype, "helperText");
-__decorateClass$1([
-  observable
-], FormElementHelperText.prototype, "_helperTextSlottedContent");
-class FormElementSuccessText {
-}
-__decorateClass$1([
-  attr({ attribute: "success-text" })
-], FormElementSuccessText.prototype, "successText");
-class FormElementCharCount {
-  constructor() {
-    this.charCount = false;
-  }
-}
-__decorateClass$1([
-  attr({
-    attribute: "char-count",
-    mode: "boolean"
-  })
-], FormElementCharCount.prototype, "charCount");
-function formElements(constructor) {
-  let currentPrototype = constructor.prototype;
-  while (currentPrototype) {
-    const parentPrototype = Object.getPrototypeOf(currentPrototype);
-    if (currentPrototype.validate && !parentPrototype.validate) {
-      currentPrototype.validate = function(anchor) {
-        if (this.proxy instanceof HTMLElement && this.elementInternals) {
-          const isValid = this.proxy.validity.valid;
-          const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
-          if (isValid && controlIsInvalidDueToMinOrMaxLength) {
-            this.setValidity(
-              this.control.validity,
-              this.control.validationMessage,
-              anchor
-            );
-          } else {
-            this.setValidity(
-              this.proxy.validity,
-              this.proxy.validationMessage,
-              anchor
-            );
-          }
-        }
-      };
-      break;
-    }
-    currentPrototype = parentPrototype;
-  }
-  class Decorated extends constructor {
-    constructor(...args) {
-      super(...args);
-      this.errorValidationMessage = "";
-      this.#forceErrorDisplay = false;
-      this.#hasBeenTouched = false;
-      this.#handleInvalidEvent = () => {
-        this.#forceErrorDisplay = true;
-        this.validate();
-      };
-      this.validate = () => {
-        super.validate();
-        const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
-        this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
-      };
-      this.addEventListener("blur", () => {
-        this.#hasBeenTouched = true;
-        this.#forceErrorDisplay = false;
-        this.validate();
-      });
-      this.addEventListener("focus", () => {
-        this.#hasBeenTouched = false;
-      });
-      this.addEventListener("invalid", () => {
-        this.proxy.dispatchEvent(new Event("invalid"));
-      });
-    }
-    #forceErrorDisplay;
-    #hasBeenTouched;
-    connectedCallback() {
-      super.connectedCallback();
-      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
-    }
-    #handleInvalidEvent;
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
-    }
-    formResetCallback() {
-      this.#forceErrorDisplay = false;
-      super.formResetCallback();
-      this.validate();
-    }
-  }
-  __decorateClass$1([
-    attr
-  ], Decorated.prototype, "label");
-  __decorateClass$1([
-    observable
-  ], Decorated.prototype, "errorValidationMessage");
-  return Decorated;
-}
-const feedback = {
-  helper: {
-    messageProperty: "helperText",
-    className: "helper",
-    slot: {
-      name: "helper-text",
-      slottedContentProperty: "_helperTextSlottedContent"
-    },
-    role: "none"
-  },
-  error: {
-    messageProperty: "errorValidationMessage",
-    className: "error",
-    iconType: "info-line",
-    role: "status"
-  },
-  success: {
-    messageProperty: "successText",
-    className: "success",
-    iconType: "check-circle-line",
-    role: "none"
-  }
-};
-const isFeedbackAvailable = (config, x) => Boolean(
-  x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
-);
-function getFeedbackTemplate(context) {
-  return html`
-		<style>
-			${messageStyles}
-		</style>
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.helper,
-    (x) => isFeedbackAvailable(feedback.helper, x) && !isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.error,
-    (x) => isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.success,
-    (x) => isFeedbackAvailable(feedback.success, x)
-  )}
-	`;
-}
-function getFeedbackTypeTemplate(context, config, shouldShow) {
-  const iconTag = context.tagFor(Icon);
-  const messageTemplate = html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? html`<slot
-				name="${config.slot.name}"
-				${slotted(config.slot.slottedContentProperty)}
-				>${messageTemplate}</slot
-		  >` : messageTemplate;
-  return html`<div
-		class="${(x) => classNames(
-    "message",
-    `${config.className}-message`,
-    ["message--visible", config.role === "status" || shouldShow(x)],
-    ["sr-only", !shouldShow(x)]
-  )}"
-		role="${config.role}"
-		aria-atomic="false"
-	>
-		${when(
-    (x) => shouldShow(x) && config.iconType,
-    html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
-  )}
-		<span class="message-text">${innerTemplate}</span>
-	</div>`;
-}
-function errorText(constructor) {
-  class Decorated extends constructor {
-    #blockValidateCalls = false;
-    constructor(...args) {
-      super(...args);
-      this._validate = this.validate;
-      this.validate = () => {
-        if (!this.#blockValidateCalls) this._validate();
-      };
-    }
-    errorTextChanged(_, newErrorText) {
-      if (newErrorText) {
-        this.#forceCustomError(newErrorText);
-      } else {
-        this.#clearCustomErrorAndRevalidate();
-      }
-    }
-    #forceCustomError(errorMessage) {
-      this.setValidity({ customError: true }, errorMessage, this.control);
-      this.errorValidationMessage = errorMessage;
-      this.#blockValidateCalls = true;
-    }
-    #clearCustomErrorAndRevalidate() {
-      this.setValidity({}, "", this.control);
-      this.#blockValidateCalls = false;
-      this.validate();
-    }
-  }
-  __decorateClass$1([
-    attr({ attribute: "error-text" })
-  ], Decorated.prototype, "errorText");
-  return Decorated;
-}
-
-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 CurrentLocale {
-  constructor() {
-    this.locale = enUS;
+function handleEscapeKeyAndStopPropogation(event) {
+  if (event.key === "Escape") {
+    event.stopPropagation();
+    return true;
   }
+  return false;
 }
-__decorateClass([
-  observable
-], CurrentLocale.prototype, "locale");
-const currentLocale = new CurrentLocale();
-const setLocale = (locale) => {
-  currentLocale.locale = locale;
-};
 
-export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, currentLocale as c, errorText as e, formElements as f, getFeedbackTemplate as g, setLocale as s };
+export { handleEscapeKeyAndStopPropogation as h };