@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.4

package/dist/packages/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const reset: import("lit").CSSResult;
+export declare const components: import("lit").CSSResult;

package/dist/packages/textfield/index.d.ts

@@ -1,4 +1,4 @@
-declare const WarpTextField_base: {
+declare const WarpTextField_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
     new (): {
         [x: string]: any;
     };
@@ -37,9 +37,6 @@ export class WarpTextField extends WarpTextField_base {
         maxLength: {
             type: NumberConstructor;
         };
-        name: {
-            type: StringConstructor;
-        };
         pattern: {
             type: StringConstructor;
         };
@@ -58,6 +55,9 @@ export class WarpTextField extends WarpTextField_base {
         value: {
             type: StringConstructor;
         };
+        name: {
+            type: StringConstructor;
+        };
         _hasPrefix: {
             state: boolean;
         };
@@ -65,7 +65,7 @@ export class WarpTextField extends WarpTextField_base {
             state: boolean;
         };
     };
-    static styles: any[];
+    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
     type: string;
     get _inputStyles(): string;
     get _helpTextStyles(): string;
@@ -74,9 +74,9 @@ export class WarpTextField extends WarpTextField_base {
     get _id(): string;
     get _error(): string;
     handler(e: any): void;
-    prefixSlotChange(e: any): void;
+    prefixSlotChange(): void;
     _hasPrefix: boolean;
-    suffixSlotChange(e: any): void;
+    suffixSlotChange(): void;
     _hasSuffix: boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/packages/textfield/index.js

@@ -15,7 +15,292 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@open-wc+form-control@1.0.0/node_modules/@open-wc/form-control/src/FormControlMixin.js
+var __classPrivateFieldGet = function(receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
+function FormControlMixin(SuperClass) {
+  var _FormControl_instances, _FormControl_focused, _FormControl_forceError, _FormControl_touched, _FormControl_abortController, _FormControl_previousAbortController, _FormControl_awaitingValidationTarget, _FormControl_formValidationGroup_get, _FormControl_value, _FormControl_onFocus, _FormControl_onBlur, _FormControl_onInvalid, _FormControl_validationCompleteResolver, _FormControl_isValidationPending, _FormControl_validationComplete, _FormControl_shouldShowError, _FormControl_runValidators, _FormControl_setValidityWithOptionalTarget, _FormControl_getValidatorMessageForValue;
+  class FormControl extends SuperClass {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    constructor(...args) {
+      var _a, _b, _c;
+      super(...args);
+      _FormControl_instances.add(this);
+      this.internals = this.attachInternals();
+      _FormControl_focused.set(this, false);
+      _FormControl_forceError.set(this, false);
+      _FormControl_touched.set(this, false);
+      _FormControl_abortController.set(this, void 0);
+      _FormControl_previousAbortController.set(this, void 0);
+      _FormControl_awaitingValidationTarget.set(this, true);
+      _FormControl_value.set(this, "");
+      _FormControl_onFocus.set(this, () => {
+        __classPrivateFieldSet(this, _FormControl_touched, true, "f");
+        __classPrivateFieldSet(this, _FormControl_focused, true, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+      });
+      _FormControl_onBlur.set(this, () => {
+        __classPrivateFieldSet(this, _FormControl_focused, false, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_runValidators).call(this, this.shouldFormValueUpdate() ? __classPrivateFieldGet(this, _FormControl_value, "f") : "");
+        if (!this.validity.valid && __classPrivateFieldGet(this, _FormControl_touched, "f")) {
+          __classPrivateFieldSet(this, _FormControl_forceError, true, "f");
+        }
+        const showError = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+        if (this.validationMessageCallback) {
+          this.validationMessageCallback(showError ? this.internals.validationMessage : "");
+        }
+      });
+      _FormControl_onInvalid.set(this, () => {
+        var _a2;
+        if (__classPrivateFieldGet(this, _FormControl_awaitingValidationTarget, "f") && this.validationTarget) {
+          this.internals.setValidity(this.validity, this.validationMessage, this.validationTarget);
+          __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, false, "f");
+        }
+        __classPrivateFieldSet(this, _FormControl_touched, true, "f");
+        __classPrivateFieldSet(this, _FormControl_forceError, true, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+        (_a2 = this === null || this === void 0 ? void 0 : this.validationMessageCallback) === null || _a2 === void 0 ? void 0 : _a2.call(this, this.showError ? this.internals.validationMessage : "");
+      });
+      _FormControl_validationCompleteResolver.set(this, void 0);
+      _FormControl_isValidationPending.set(this, false);
+      _FormControl_validationComplete.set(this, Promise.resolve());
+      (_a = this.addEventListener) === null || _a === void 0 ? void 0 : _a.call(this, "focus", __classPrivateFieldGet(this, _FormControl_onFocus, "f"));
+      (_b = this.addEventListener) === null || _b === void 0 ? void 0 : _b.call(this, "blur", __classPrivateFieldGet(this, _FormControl_onBlur, "f"));
+      (_c = this.addEventListener) === null || _c === void 0 ? void 0 : _c.call(this, "invalid", __classPrivateFieldGet(this, _FormControl_onInvalid, "f"));
+      this.setValue(null);
+    }
+    /** Wires up control instances to be form associated */
+    static get formAssociated() {
+      return true;
+    }
+    static get validators() {
+      return this.formControlValidators || [];
+    }
+    /**
+     * Allows the FormControl instance to respond to Validator attributes.
+     * For instance, if a given Validator has a `required` attribute, that
+     * validator will be evaluated whenever the host's required attribute
+     * is updated.
+     */
+    static get observedAttributes() {
+      const validatorAttributes = this.validators.map((validator) => validator.attribute).flat();
+      const observedAttributes = super.observedAttributes || [];
+      const attributeSet = /* @__PURE__ */ new Set([...observedAttributes, ...validatorAttributes]);
+      return [...attributeSet];
+    }
+    /**
+     * Return the validator associated with a given attribute. If no
+     * Validator is associated with the attribute, it will return null.
+     */
+    static getValidator(attribute) {
+      return this.validators.find((validator) => validator.attribute === attribute) || null;
+    }
+    /**
+     * Get all validators that are set to react to a given attribute
+     * @param {string} attribute - The attribute that has changed
+     * @returns {Validator[]}
+     */
+    static getValidators(attribute) {
+      return this.validators.filter((validator) => {
+        var _a;
+        if (validator.attribute === attribute || ((_a = validator.attribute) === null || _a === void 0 ? void 0 : _a.includes(attribute))) {
+          return true;
+        }
+      });
+    }
+    /** Return a reference to the control's form */
+    get form() {
+      return this.internals.form;
+    }
+    /**
+     * Will return true if it is recommended that the control shows an internal
+     * error. If using this property, it is wise to listen for 'invalid' events
+     * on the element host and call preventDefault on the event. Doing this will
+     * prevent browsers from showing a validation popup.
+     */
+    get showError() {
+      return __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+    }
+    /**
+     * Forward the internals checkValidity method
+     * will return the valid state of the control.
+     */
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    /** The element's validity state */
+    get validity() {
+      return this.internals.validity;
+    }
+    /**
+     * The validation message shown by a given Validator object. If the control
+     * is in a valid state this should be falsy.
+     */
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      var _a;
+      (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, name, oldValue, newValue);
+      const proto = this.constructor;
+      const validators = proto.getValidators(name);
+      if ((validators === null || validators === void 0 ? void 0 : validators.length) && this.validationTarget) {
+        this.setValue(__classPrivateFieldGet(this, _FormControl_value, "f"));
+      }
+    }
+    /** PUBLIC LIFECYCLE METHODS */
+    /**
+     * Sets the control's form value if the call to `shouldFormValueUpdate`
+     * returns `true`.
+     * @param value {FormValue} - The value to pass to the form
+     */
+    setValue(value) {
+      var _a;
+      __classPrivateFieldSet(this, _FormControl_forceError, false, "f");
+      (_a = this.validationMessageCallback) === null || _a === void 0 ? void 0 : _a.call(this, "");
+      __classPrivateFieldSet(this, _FormControl_value, value, "f");
+      const valueShouldUpdate = this.shouldFormValueUpdate();
+      const valueToUpdate = valueShouldUpdate ? value : null;
+      this.internals.setFormValue(valueToUpdate);
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_runValidators).call(this, valueToUpdate);
+      if (this.valueChangedCallback) {
+        this.valueChangedCallback(valueToUpdate);
+      }
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+    }
+    /**
+     * This method can be overridden to determine if the control's form value
+     * should be set on a call to `setValue`. An example of when a user might want
+     * to skip this step is when implementing checkbox-like behavior, first checking
+     * to see if `this.checked` is set to a truthy value. By default this returns
+     * `true`.
+     */
+    shouldFormValueUpdate() {
+      return true;
+    }
+    /** A promise that will resolve when all pending validations are complete */
+    get validationComplete() {
+      return new Promise((resolve) => resolve(__classPrivateFieldGet(this, _FormControl_validationComplete, "f")));
+    }
+    /** Reset control state when the form is reset */
+    formResetCallback() {
+      var _a, _b;
+      __classPrivateFieldSet(this, _FormControl_touched, false, "f");
+      __classPrivateFieldSet(this, _FormControl_forceError, false, "f");
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+      (_a = this.resetFormControl) === null || _a === void 0 ? void 0 : _a.call(this);
+      (_b = this.validationMessageCallback) === null || _b === void 0 ? void 0 : _b.call(this, __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this) ? this.validationMessage : "");
+    }
+  }
+  _FormControl_focused = /* @__PURE__ */ new WeakMap(), _FormControl_forceError = /* @__PURE__ */ new WeakMap(), _FormControl_touched = /* @__PURE__ */ new WeakMap(), _FormControl_abortController = /* @__PURE__ */ new WeakMap(), _FormControl_previousAbortController = /* @__PURE__ */ new WeakMap(), _FormControl_awaitingValidationTarget = /* @__PURE__ */ new WeakMap(), _FormControl_value = /* @__PURE__ */ new WeakMap(), _FormControl_onFocus = /* @__PURE__ */ new WeakMap(), _FormControl_onBlur = /* @__PURE__ */ new WeakMap(), _FormControl_onInvalid = /* @__PURE__ */ new WeakMap(), _FormControl_validationCompleteResolver = /* @__PURE__ */ new WeakMap(), _FormControl_isValidationPending = /* @__PURE__ */ new WeakMap(), _FormControl_validationComplete = /* @__PURE__ */ new WeakMap(), _FormControl_instances = /* @__PURE__ */ new WeakSet(), _FormControl_formValidationGroup_get = function _FormControl_formValidationGroup_get2() {
+    const rootNode = this.getRootNode();
+    const selector = `${this.localName}[name="${this.getAttribute("name")}"]`;
+    return rootNode.querySelectorAll(selector);
+  }, _FormControl_shouldShowError = function _FormControl_shouldShowError2() {
+    if (this.hasAttribute("disabled")) {
+      return false;
+    }
+    const showError = __classPrivateFieldGet(this, _FormControl_forceError, "f") || __classPrivateFieldGet(this, _FormControl_touched, "f") && !this.validity.valid && !__classPrivateFieldGet(this, _FormControl_focused, "f");
+    if (showError && this.internals.states) {
+      this.internals.states.add("--show-error");
+    } else if (this.internals.states) {
+      this.internals.states.delete("--show-error");
+    }
+    return showError;
+  }, _FormControl_runValidators = function _FormControl_runValidators2(value) {
+    const proto = this.constructor;
+    const validity = {};
+    const validators = proto.validators;
+    const asyncValidators = [];
+    const hasAsyncValidators = validators.some((validator) => validator.isValid instanceof Promise);
+    if (!__classPrivateFieldGet(this, _FormControl_isValidationPending, "f")) {
+      __classPrivateFieldSet(this, _FormControl_validationComplete, new Promise((resolve) => {
+        __classPrivateFieldSet(this, _FormControl_validationCompleteResolver, resolve, "f");
+      }), "f");
+      __classPrivateFieldSet(this, _FormControl_isValidationPending, true, "f");
+    }
+    if (__classPrivateFieldGet(this, _FormControl_abortController, "f")) {
+      __classPrivateFieldGet(this, _FormControl_abortController, "f").abort();
+      __classPrivateFieldSet(this, _FormControl_previousAbortController, __classPrivateFieldGet(this, _FormControl_abortController, "f"), "f");
+    }
+    const abortController = new AbortController();
+    __classPrivateFieldSet(this, _FormControl_abortController, abortController, "f");
+    let validationMessage = void 0;
+    let hasChange = false;
+    if (!validators.length) {
+      return;
+    }
+    validators.forEach((validator) => {
+      const key = validator.key || "customError";
+      const isValid = validator.isValid(this, value, abortController.signal);
+      const isAsyncValidator = isValid instanceof Promise;
+      if (isAsyncValidator) {
+        asyncValidators.push(isValid);
+        isValid.then((isValidatorValid) => {
+          if (isValidatorValid === void 0 || isValidatorValid === null) {
+            return;
+          }
+          validity[key] = !isValidatorValid;
+          validationMessage = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_getValidatorMessageForValue).call(this, validator, value);
+          __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_setValidityWithOptionalTarget).call(this, validity, validationMessage);
+        });
+      } else {
+        validity[key] = !isValid;
+        if (this.validity[key] !== !isValid) {
+          hasChange = true;
+        }
+        if (!isValid && !validationMessage) {
+          validationMessage = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_getValidatorMessageForValue).call(this, validator, value);
+        }
+      }
+    });
+    Promise.allSettled(asyncValidators).then(() => {
+      var _a;
+      if (!(abortController === null || abortController === void 0 ? void 0 : abortController.signal.aborted)) {
+        __classPrivateFieldSet(this, _FormControl_isValidationPending, false, "f");
+        (_a = __classPrivateFieldGet(this, _FormControl_validationCompleteResolver, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+      }
+    });
+    if (hasChange || !hasAsyncValidators) {
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_setValidityWithOptionalTarget).call(this, validity, validationMessage);
+    }
+  }, _FormControl_setValidityWithOptionalTarget = function _FormControl_setValidityWithOptionalTarget2(validity, validationMessage) {
+    if (this.validationTarget) {
+      this.internals.setValidity(validity, validationMessage, this.validationTarget);
+      __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, false, "f");
+    } else {
+      this.internals.setValidity(validity, validationMessage);
+      if (this.internals.validity.valid) {
+        return;
+      }
+      __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, true, "f");
+    }
+  }, _FormControl_getValidatorMessageForValue = function _FormControl_getValidatorMessageForValue2(validator, value) {
+    if (this.validityCallback) {
+      const message = this.validityCallback(validator.key || "customError");
+      if (message) {
+        return message;
+      }
+    }
+    if (validator.message instanceof Function) {
+      return validator.message(this, value);
+    } else {
+      return validator.message;
+    }
+  };
+  return FormControl;
+}
+
+// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
@@ -295,7 +580,7 @@ function kebabCaseAttributes(constructor) {
 }
 
 // packages/textfield/index.js
-var WarpTextField = class extends kebabCaseAttributes(WarpElement) {
+var WarpTextField = class extends FormControlMixin(kebabCaseAttributes(WarpElement)) {
   constructor() {
     super();
     this.type = "text";
@@ -318,18 +603,22 @@ var WarpTextField = class extends kebabCaseAttributes(WarpElement) {
     if (this.label) {
       return html`<label for="${this._id}" class=${label.base}>${this.label}</label>`;
     }
+    return void 0;
   }
   get _helpId() {
     if (this.helpText) return `${this._id}__hint`;
+    return void 0;
   }
   get _id() {
     return "textfield";
   }
   get _error() {
     if (this.invalid && this._helpId) return this._helpId;
+    return void 0;
   }
   handler(e) {
     const { name, value } = e.target;
+    this.setValue(value);
     const event = new CustomEvent(e.type, {
       detail: {
         name,
@@ -339,12 +628,12 @@ var WarpTextField = class extends kebabCaseAttributes(WarpElement) {
     });
     this.dispatchEvent(event);
   }
-  prefixSlotChange(e) {
+  prefixSlotChange() {
     const el = this.renderRoot.querySelector("slot[name=prefix]");
     const affixes = el.assignedElements();
     if (affixes.length) this._hasPrefix = true;
   }
-  suffixSlotChange(e) {
+  suffixSlotChange() {
     const el = this.renderRoot.querySelector("slot[name=suffix]");
     const affixes = el.assignedElements();
     if (affixes.length) this._hasSuffix = true;
@@ -393,13 +682,13 @@ __publicField(WarpTextField, "properties", {
   min: { type: Number },
   minLength: { type: Number },
   maxLength: { type: Number },
-  name: { type: String },
   pattern: { type: String },
   placeholder: { type: String },
   readOnly: { type: Boolean },
   required: { type: Boolean },
   type: { type: String },
   value: { type: String },
+  name: { type: String },
   _hasPrefix: { state: true },
   _hasSuffix: { state: true }
 });