@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/index2.cjs

@@ -0,0 +1,231 @@
+'use strict';
+
+const icon = require('./icon.cjs');
+const index = require('./index.cjs');
+const when = require('./when.cjs');
+const locales_enUS = require('../locales/en-US.cjs');
+
+const messageStyles = ".message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.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)}\n";
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+class FormElementHelperText {
+}
+__decorateClass$1([
+  index.attr({ attribute: "helper-text" })
+], FormElementHelperText.prototype, "helperText", 2);
+class FormElementSuccessText {
+}
+__decorateClass$1([
+  index.attr({ attribute: "success-text" })
+], FormElementSuccessText.prototype, "successText", 2);
+class FormElementCharCount {
+  constructor() {
+    this.charCount = false;
+  }
+}
+__decorateClass$1([
+  index.attr({
+    attribute: "char-count",
+    mode: "boolean"
+  })
+], FormElementCharCount.prototype, "charCount", 2);
+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) {
+          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", 2);
+  __decorateClass$1([
+    index.observable
+  ], Decorated.prototype, "errorValidationMessage", 2);
+  return Decorated;
+}
+function getFeedbackTemplate(messageType, context) {
+  const MessageTypeMap = {
+    helper: {
+      messageProperty: "helperText",
+      className: "helper",
+      iconType: ""
+    },
+    error: {
+      messageProperty: "errorValidationMessage",
+      className: "error",
+      iconType: "info-line"
+    },
+    success: {
+      messageProperty: "successText",
+      className: "success",
+      iconType: "check-circle-line"
+    }
+  };
+  const iconTag = context.tagFor(icon.Icon);
+  const messageTypeConfig = MessageTypeMap[messageType];
+  const iconType = messageTypeConfig.iconType;
+  return index.html` <style>
+			${messageStyles}
+		</style>
+		<div class="message ${MessageTypeMap[messageType].className}-message">
+			${when.when(
+    () => iconType,
+    index.html`
+					  <${iconTag} class="message-icon" name="${iconType}"></${iconTag}>`
+  )}
+			${feedbackMessage({
+    messageProperty: MessageTypeMap[messageType].messageProperty
+  })}
+		</div>`;
+}
+function feedbackMessage({
+  messageProperty
+}) {
+  return index.html`
+		<span class="message-text">${(x) => x[messageProperty]}</span>
+	`;
+}
+function errorText(constructor) {
+  class Decorated extends constructor {
+    constructor(...args) {
+      super(...args);
+      this.#blockValidateCalls = false;
+      this._validate = this.validate;
+      this.validate = () => {
+        if (!this.#blockValidateCalls)
+          this._validate();
+      };
+    }
+    #blockValidateCalls;
+    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({ customError: false }, "", this.control);
+      this.#blockValidateCalls = false;
+      this.validate();
+    }
+  }
+  __decorateClass$1([
+    index.attr({ attribute: "error-text" })
+  ], Decorated.prototype, "errorText", 2);
+  return Decorated;
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class CurrentLocale {
+  constructor() {
+    this.locale = locales_enUS;
+  }
+}
+__decorateClass([
+  index.observable
+], CurrentLocale.prototype, "locale", 2);
+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;

package/shared/key-codes.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowDown = "ArrowDown";
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+const keyArrowUp = "ArrowUp";
+const keyEnter = "Enter";
+const keyEscape = "Escape";
+const keyHome = "Home";
+const keyEnd = "End";
+const keyFunction2 = "F2";
+const keyPageDown = "PageDown";
+const keyPageUp = "PageUp";
+const keySpace = " ";
+const keyTab = "Tab";
+const ArrowKeys = {
+    ArrowDown: keyArrowDown,
+    ArrowLeft: keyArrowLeft,
+    ArrowRight: keyArrowRight,
+    ArrowUp: keyArrowUp,
+};
+
+exports.ArrowKeys = ArrowKeys;
+exports.keyArrowDown = keyArrowDown;
+exports.keyArrowLeft = keyArrowLeft;
+exports.keyArrowRight = keyArrowRight;
+exports.keyArrowUp = keyArrowUp;
+exports.keyEnd = keyEnd;
+exports.keyEnter = keyEnter;
+exports.keyEscape = keyEscape;
+exports.keyFunction2 = keyFunction2;
+exports.keyHome = keyHome;
+exports.keyPageDown = keyPageDown;
+exports.keyPageUp = keyPageUp;
+exports.keySpace = keySpace;
+exports.keyTab = keyTab;

package/shared/key-codes2.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+const keyEnter = "Enter";
+const keySpace = " ";
+
+exports.keyArrowLeft = keyArrowLeft;
+exports.keyArrowRight = keyArrowRight;
+exports.keyEnter = keyEnter;
+exports.keySpace = keySpace;