@vonage/vivid 3.0.0-test.0 → 3.0.1

package/shared/form-elements.js

@@ -0,0 +1,127 @@
+import { _ as __decorate, a as attr, b as __metadata, o as observable, a6 as volatile, h as html, U as __classPrivateFieldGet, a5 as __classPrivateFieldSet } from './index.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 30 Jan 2023 11:28:31 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const ElementInternalsKey = 'ElementInternals';
+const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
+class FormElementHelperText {}
+__decorate([attr({
+  attribute: 'helper-text'
+}), __metadata("design:type", String)], FormElementHelperText.prototype, "helperText", void 0);
+class FormElementSuccessText {}
+__decorate([attr({
+  attribute: 'success-text'
+}), __metadata("design:type", String)], FormElementSuccessText.prototype, "successText", void 0);
+class FormElementCharCount {
+  constructor() {
+    this.charCount = false;
+  }
+}
+__decorate([attr({
+  attribute: 'char-count',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], FormElementCharCount.prototype, "charCount", void 0);
+function formElements(constructor) {
+  var _Decorated_blurred, _Decorated_handleInvalidEvent;
+  class Decorated extends constructor {
+    constructor(...args) {
+      super(...args);
+      this.userValid = true;
+      _Decorated_blurred.set(this, false);
+      _Decorated_handleInvalidEvent.set(this, () => {
+        if (__classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue) return;
+        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
+        this.dirtyValue = true;
+        this.validate();
+      });
+      this.validate = () => {
+        if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
+          this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
+        } else {
+          super.validate();
+        }
+        this.userValid = !this.userValid;
+        if (this.proxy instanceof HTMLElement) {
+          this.userValid = __classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
+        }
+      };
+      this.addEventListener('blur', () => {
+        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
+        this.validate();
+      });
+      this.addEventListener('focus', () => {
+        __classPrivateFieldSet(this, _Decorated_blurred, false, "f");
+      });
+      this.addEventListener('invalid', () => {
+        this.proxy.dispatchEvent(new Event('invalid'));
+      });
+    }
+    get errorValidationMessage() {
+      return this.userValid ? '' : this.validationMessage;
+    }
+    connectedCallback() {
+      var _a;
+      (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+      this.proxy.addEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
+    }
+    disconnectedCallback() {
+      var _a;
+      (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+      this.proxy.removeEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
+    }
+  }
+  _Decorated_blurred = new WeakMap(), _Decorated_handleInvalidEvent = new WeakMap();
+  __decorate([attr, __metadata("design:type", String)], Decorated.prototype, "label", void 0);
+  __decorate([observable, __metadata("design:type", Object)], Decorated.prototype, "userValid", void 0);
+  __decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Decorated.prototype, "errorValidationMessage", null);
+  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);
+  const messageTypeConfig = MessageTypeMap[messageType];
+  const iconType = messageTypeConfig.iconType;
+  return html(_t || (_t = _`
+			<style>
+				${0}
+
+			</style>
+			<div class="message ${0}-message">
+		  	${0}
+				${0}
+			</div>`), css_248z, MessageTypeMap[messageType].className, when(() => iconType, html(_t2 || (_t2 = _`
+					  <${0} class="message-icon" name="${0}"></${0}>`), iconTag, iconType, iconTag)), feedbackMessage({
+    messageProperty: MessageTypeMap[messageType].messageProperty
+  }));
+}
+function feedbackMessage({
+  messageProperty
+}) {
+  return html(_t3 || (_t3 = _`
+	  <span class="message-text">${0}</span>
+	`), x => x[messageProperty]);
+}
+
+export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, formElements as f, getFeedbackTemplate as g };