fds-vue-core 8.6.2 → 8.6.4

package/dist/components/Form/FdsSsn/FdsSsn.vue.d.ts

@@ -7,16 +7,19 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     blur: (ev: FocusEvent) => any;
     "update:modelValue": (...args: unknown[]) => any;
     valid: (value: boolean | null) => any;
+    clearInput: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onBlur?: ((ev: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
     onValid?: ((value: boolean | null) => any) | undefined;
+    onClearInput?: (() => any) | undefined;
 }>, {
     disabled: boolean;
     required: boolean;
     id: string;
     name: string;
     placeholder: string;
+    maxlength: number;
     dataTestid: string;
     label: string;
     meta: string;
@@ -25,6 +28,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     valid: boolean | null;
     optional: boolean;
     invalidMessage: string;
+    clearButton: boolean;
     autocomplete: string;
     readonly: boolean;
     allowCoordinationNumber: boolean;

package/dist/components/Form/FdsSsn/types.d.ts

@@ -1,10 +1,11 @@
 import { FdsInputProps } from '../FdsInput/types';
-type FdsSsnInputPassthroughProps = Pick<FdsInputProps, 'id' | 'autocomplete' | 'required' | 'placeholder' | 'name' | 'autofocus' | 'readonly' | 'inputClass'>;
+type FdsSsnInputPassthroughProps = Pick<FdsInputProps, 'id' | 'autocomplete' | 'required' | 'placeholder' | 'name' | 'autofocus' | 'readonly' | 'inputClass' | 'maxlength' | 'clearButton'>;
 export interface FdsSsnProps extends FdsSsnInputPassthroughProps {
     label?: string;
     meta?: string;
     optional?: boolean;
     valid?: boolean | null;
+    /** Error text when invalid. Omit for default; pass `""` to hide the message. */
     invalidMessage?: string;
     /** Personnummer as shown in the input (12 characters, no separator). */
     modelValue?: string;
@@ -14,11 +15,13 @@ export interface FdsSsnProps extends FdsSsnInputPassthroughProps {
     dataTestid?: string;
     onValid?: ((value: boolean | null) => void) | Array<(value: boolean | null) => void>;
     onBlur?: ((event: FocusEvent) => void) | Array<(event: FocusEvent) => void>;
+    onClearInput?: (() => void) | Array<() => void>;
     'onUpdate:modelValue'?: ((value: string) => void) | Array<(value: string) => void>;
 }
 export interface FdsSsnEmits {
     'update:modelValue': [value: string];
     valid: [value: boolean | null];
     blur: [ev: FocusEvent];
+    clearInput: [];
 }
 export {};

package/dist/fds-vue-core.cjs.js

@@ -90,7 +90,7 @@ const en = {
   "FdsPhonenumber.invalidPhone": "Enter a valid phone number",
   "FdsPhonenumber.noCountryResults": "No country matches your search",
   "FdsPhonenumber.phoneNumber": "Phone number",
-  "FdsSsn.invalidSsn": "Enter a valid personal identity number",
+  "FdsSsn.invalidSsn": "Enter a valid Swedish personal identity number or coordination number",
   "FdsSsn.label": "Personal identity number",
   "FdsSearchSelectPro.loadingMore": "Loading more...",
   "FdsSearchSelectPro.showMore": "Show more",
@@ -166,7 +166,7 @@ const sv = {
   "FdsPhonenumber.invalidPhone": "Ange ett giltigt telefonnummer",
   "FdsPhonenumber.noCountryResults": "Inget land matchar sökningen",
   "FdsPhonenumber.phoneNumber": "Telefonnummer",
-  "FdsSsn.invalidSsn": "Ange ett giltigt personnummer",
+  "FdsSsn.invalidSsn": "Ange ett giltigt personnummer eller samordningsnummer",
   "FdsSsn.label": "Personnummer",
   "FdsSearchSelectPro.loadingMore": "Hämtar fler...",
   "FdsSearchSelectPro.showMore": "Visa fler",
@@ -10223,7 +10223,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$l = ["for", "id"];
 const _hoisted_2$f = { class: "relative" };
-const _hoisted_3$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
+const _hoisted_3$f = ["type", "required", "disabled", "maxlength", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
 const _hoisted_4$e = {
   key: 0,
   class: "text-red-700 font-bold mt-1"
@@ -10372,7 +10372,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
       props.inputClass
     ]);
     const inputStyle = vue.computed(() => {
-      if (!maxlength.value) return void 0;
+      if (!maxlength.value || props.inputClass) return void 0;
       return {
         width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
         maxWidth: "100%"
@@ -10551,6 +10551,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 type: inputType.value === "password" ? showPassword.value ? "text" : "password" : inputType.value,
                 required: props.required,
                 disabled: props.disabled,
+                maxlength: vue.unref(maxlength),
                 tabindex: props.disabled ? -1 : void 0,
                 "aria-invalid": props.valid === false ? "true" : void 0,
                 class: inputClasses.value,
@@ -10586,7 +10587,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
                   key: 1,
                   name: "alert",
-                  class: "fill-red-700"
+                  class: "fill-red-600"
                 })) : vue.createCommentVNode("", true),
                 isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
                   key: 2,
@@ -19987,20 +19988,6 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SSN_MASK = "000000000000";
-const SSN_INTERIM_MASK = "XXXXXXXXXXXX";
-const SSN_INTERIM_MASK_OPTIONS = {
-  lazy: true,
-  definitions: {
-    X: /[0-9A-Za-z]/
-  }
-};
-function getSsnMask(allowInterimNumber) {
-  return allowInterimNumber ? SSN_INTERIM_MASK : SSN_MASK;
-}
-function getSsnMaskOptions(allowInterimNumber) {
-  return allowInterimNumber ? SSN_INTERIM_MASK_OPTIONS : { lazy: true };
-}
 var PersonnummerError = class extends Error {
   constructor() {
     super("Invalid swedish personal identity number");
@@ -20303,7 +20290,7 @@ const INVALID_RESULT = {
 };
 const DEFAULT_SSN_VALIDATION_OPTIONS = {
   allowCoordinationNumber: true,
-  allowInterimNumber: true
+  allowInterimNumber: false
 };
 function resolveSsnValidationOptions(options) {
   return {
@@ -20335,6 +20322,20 @@ function getSsnValidationState(value, options) {
   }
   return validateSsn(value, options);
 }
+const SSN_MASK = "000000000000";
+const SSN_INTERIM_MASK = "XXXXXXXXXXXX";
+const SSN_INTERIM_MASK_OPTIONS = {
+  lazy: true,
+  definitions: {
+    X: /[0-9A-Za-z]/
+  }
+};
+function getSsnMask(allowInterimNumber) {
+  return allowInterimNumber ? SSN_INTERIM_MASK : SSN_MASK;
+}
+function getSsnMaskOptions(allowInterimNumber) {
+  return allowInterimNumber ? SSN_INTERIM_MASK_OPTIONS : { lazy: true };
+}
 const _hoisted_1$4 = { class: "w-full" };
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -20354,6 +20355,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     dataTestid: { default: void 0 },
     onValid: {},
     onBlur: {},
+    onClearInput: {},
     "onUpdate:modelValue": {},
     id: { default: void 0 },
     autocomplete: { default: "off" },
@@ -20362,12 +20364,14 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     name: { default: void 0 },
     autofocus: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
-    inputClass: { default: void 0 }
+    inputClass: { default: void 0 },
+    maxlength: { default: void 0 },
+    clearButton: { type: Boolean, default: false }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "valid", "blur"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "valid", "blur", "clearInput"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const modelValue = vue.useModel(__props, "modelValue");
     const attrs = vue.useAttrs();
@@ -20375,9 +20379,12 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { t } = useFdsI18n();
     const inputAttrs = vue.computed(() => {
-      const { class: _class, style, ...rest } = attrs;
+      const { class: rawClass, style, ...rest } = attrs;
       return {
         ...rest,
+        ...rawClass == null ? {} : {
+          class: rawClass
+        },
         ...style == null ? {} : { style }
       };
     });
@@ -20389,8 +20396,11 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       name: props.name,
       autofocus: props.autofocus,
       readonly: props.readonly,
+      maxlength: props.maxlength,
+      clearButton: props.clearButton,
       inputmode: props.allowInterimNumber ? "text" : "numeric",
-      ...inputAttrs.value
+      ...inputAttrs.value,
+      inputClass: props.inputClass
     }));
     const validationOptions = vue.computed(
       () => ({
@@ -20434,6 +20444,11 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       runValidation();
       emit("blur", ev);
     }
+    function handleClearInput() {
+      committedValid.value = null;
+      emit("valid", null);
+      emit("clearInput");
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         vue.createVNode(_sfc_main$t, vue.mergeProps({
@@ -20448,9 +20463,12 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           optional: __props.optional,
           "invalid-message": resolvedInvalidMessage.value,
           ariaLabel: resolvedLabel.value,
-          "data-testid": __props.dataTestid,
-          class: __props.inputClass
-        }, forwardedInputProps.value, { onBlur: handleBlur }), null, 16, ["model-value", "mask", "mask-options", "label", "meta", "valid", "disabled", "optional", "invalid-message", "ariaLabel", "data-testid", "class"])
+          "data-testid": __props.dataTestid
+        }, forwardedInputProps.value, {
+          "input-class": __props.inputClass,
+          onBlur: handleBlur,
+          onClearInput: handleClearInput
+        }), null, 16, ["model-value", "mask", "mask-options", "label", "meta", "valid", "disabled", "optional", "invalid-message", "ariaLabel", "data-testid", "input-class"])
       ]);
     };
   }
@@ -20588,7 +20606,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
               size: 24,
               class: vue.normalizeClass({
                 "fill-gray-500": vue.unref(disabled),
-                "fill-red-500": isInvalid.value && !vue.unref(disabled),
+                "fill-red-600": isInvalid.value && !vue.unref(disabled),
                 "fill-blue-500": !vue.unref(disabled) && !isInvalid.value
               })
             }, null, 8, ["class"])