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

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

@@ -1,4 +1,4 @@
-declare const WarpSelect_base: {
+declare const WarpSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
     new (): {
         [x: string]: any;
     };
@@ -42,9 +42,19 @@ export class WarpSelect extends WarpSelect_base {
         _options: {
             state: boolean;
         };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
-    static styles: any[];
+    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
     _options: any;
+    _setValue: (value: any) => void;
+    value: any;
     firstUpdated(): void;
     handleKeyDown(event: any): void;
     onChange({ target }: {

package/dist/packages/select/index.js

@@ -1032,7 +1032,7 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
 // node_modules/.pnpm/@lingui+message-utils@5.2.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
@@ -1354,7 +1354,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1762,7 +1762,292 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// 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]",
@@ -2021,9 +2306,7 @@ import { when } from "lit/directives/when.js";
 var supportedLocales = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale2 = "en";
 var getSupportedLocale = (usedLocale) => {
-  return supportedLocales.find(
-    (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale2;
+  return supportedLocales.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) || defaultLocale2;
 };
 function detectLocale() {
   if (typeof window === "undefined") {
@@ -2084,7 +2367,7 @@ var messages4 = JSON.parse('{"select.label.optional":["(valgfritt)"]}');
 // packages/select/locales/sv/messages.mjs
 var messages5 = JSON.parse('{"select.label.optional":["(valfritt)"]}');
 
-// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-p_f73b1d3c5bd9121d6f30248535f1f172/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.chevron-down":["Nedoverpil"]}');
@@ -2180,23 +2463,33 @@ if (!customElements.get("w-icon-chevron-down-16")) {
 
 // packages/select/index.js
 var _WarpSelect_instances, classes_get, helpTextClasses_get, chevronClasses_get, id_get, helpId_get;
-var WarpSelect = class extends kebabCaseAttributes(WarpElement) {
+var WarpSelect = class extends FormControlMixin(kebabCaseAttributes(WarpElement)) {
   constructor() {
     super();
     __privateAdd(this, _WarpSelect_instances);
+    __publicField(this, "_setValue", (value) => {
+      this.value = value;
+      this.setValue(value);
+    });
     activateI18n(messages2, messages4, messages3, messages, messages5);
     this._options = this.innerHTML;
   }
   firstUpdated() {
-    this.autoFocus && this.shadowRoot.querySelector("select").focus();
+    if (this.autoFocus) this.shadowRoot.querySelector("select").focus();
+    Array.from(this.children).map((child) => {
+      if (child.selected) {
+        this._setValue(child.value);
+      }
+    });
   }
   handleKeyDown(event) {
     if (this.readOnly && (event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp")) {
       event.preventDefault();
     }
   }
-  // Fire a custom 'change' event, used when the dropdown changes state.
+  // // Fire a custom 'change' event, used when the dropdown changes state.
   onChange({ target }) {
+    this._setValue(target.value);
     const event = new CustomEvent("change", { detail: target.value });
     this.dispatchEvent(event);
   }
@@ -2277,7 +2570,9 @@ __publicField(WarpSelect, "properties", {
   disabled: { type: Boolean, reflect: true },
   // Renders the field in a readonly state.
   readOnly: { type: Boolean, relfect: true },
-  _options: { state: true }
+  _options: { state: true },
+  name: { type: String, reflect: true },
+  value: { type: String, reflect: true }
 });
 __publicField(WarpSelect, "styles", [WarpElement.styles]);
 if (!customElements.get("w-select")) {