fds-vue-core 2.1.52 → 2.1.53

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

@@ -7939,10 +7939,28 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const showPasswordToggle = vue.computed(
       () => inputType.value === "password" && internalValue.value !== void 0 && internalValue.value !== null && String(internalValue.value).length > 0
     );
+    const showClearButton = vue.computed(() => props.clearButton && !!internalValue.value && !props.disabled);
+    const showValidationIcon = vue.computed(() => isInvalid.value || isValid.value);
+    const rightIconCount = vue.computed(() => {
+      let count = 0;
+      if (showValidationIcon.value) count++;
+      if (showClearButton.value) count++;
+      if (showPasswordToggle.value) count += 3;
+      return count;
+    });
+    const inputPaddingRight = vue.computed(() => {
+      if (rightIconCount.value === 0) return "";
+      if (rightIconCount.value === 1) return "pr-12";
+      if (rightIconCount.value === 2) return "pr-20";
+      if (rightIconCount.value === 3) return "pr-24";
+      if (rightIconCount.value === 4) return "pr-32";
+      return "pr-40";
+    });
     const externalClass = vue.computed(() => props.class ?? attrs.class);
     const inputClasses = vue.computed(() => [
       "block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]",
       maxlength.value ? "" : "w-full",
+      inputPaddingRight.value,
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
       props.disabled ? "text-gray-600 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
       isInvalid.value && "outline-2 outline-red-600"
@@ -7956,7 +7974,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       }
       return {};
     });
-    const validationIconClasses = vue.computed(() => [
+    const rightIconsContainerClasses = vue.computed(() => [
       "absolute flex gap-2 right-4 top-1/2 -translate-y-1/2 flex items-center justify-end"
     ]);
     const internalValue = vue.computed({
@@ -8098,7 +8116,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 })
               }), null, 16, _hoisted_3$7),
               vue.createElementVNode("div", {
-                class: vue.normalizeClass(validationIconClasses.value)
+                class: vue.normalizeClass(rightIconsContainerClasses.value)
               }, [
                 isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
                   key: 0,
@@ -8109,7 +8127,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   key: 1,
                   name: "bigSuccess"
                 })) : vue.createCommentVNode("", true),
-                props.clearButton && !!internalValue.value && !props.disabled ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
+                showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
                   key: 2,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, { onClick: onClear }), null, 16)) : vue.createCommentVNode("", true),