fds-vue-core 2.3.0 → 2.3.2

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

@@ -247,10 +247,8 @@ const icons = {
         </g>
       </svg>`,
   edit: () => `
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <g fill-rule="nonzero">
-          <path d="M2.626 21.997c-.167 0-.323-.065-.441-.182-.181-.18-.235-.449-.136-.684l2.55-6.105L4.61 15c.01-.024.03-.06.056-.096l.026-.034c.014-.018.026-.032.04-.045l8.815-8.81c.007-.01.015-.019.022-.026l.037-.033 2.529-2.529c-.248-.116-.518-.176-.798-.176-.501 0-.97.193-1.323.545L11.36 6.45c-.118.118-.275.183-.441.183-.168 0-.325-.065-.443-.184-.243-.243-.243-.64.001-.884l2.655-2.652C13.719 2.324 14.503 2 15.34 2c.632 0 1.25.192 1.767.546.525-.35 1.149-.54 1.782-.54.634 0 1.25.186 1.78.539.69.49 1.143 1.212 1.284 2.036.14.824-.048 1.652-.531 2.332-.1.142-.214.275-.336.398L9.153 19.244c-.01.01-.024.021-.037.031-.052.045-.104.079-.162.103l-6.084 2.57c-.079.033-.16.049-.244.049zm1.167-1.796l3.82-1.614-2.22-2.219-1.6 3.833zm4.918-2.283l7.955-7.955-2.65-2.65-7.956 7.953 2.651 2.652zM17.55 9.08l2.652-2.652c.073-.074.14-.154.2-.238.6-.843.401-2.016-.442-2.615-.313-.208-.685-.32-1.07-.32-.535 0-1.054.222-1.425.61L14.9 6.429l2.65 2.65z" transform="translate(-257 -3428) translate(257 3428)"/>
-        </g>
+      <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M0.687694 22C0.506145 22 0.329181 21.9267 0.200813 21.7983C0.0302677 21.6278 -0.0385007 21.3757 0.0210986 21.142L1.64495 14.8121C1.65045 14.792 1.66329 14.7562 1.67246 14.7379C1.67337 14.7342 1.67979 14.7168 1.68804 14.6994C1.7238 14.6224 1.76598 14.5591 1.81733 14.5059C1.81916 14.5023 15.1428 1.18163 15.1428 1.18163C15.902 0.419851 16.9143 0 17.9926 0C19.0654 0 20.074 0.415267 20.8313 1.17063C20.8341 1.17338 20.8442 1.18438 20.8469 1.18622C22.4048 2.77945 22.3809 5.33706 20.7947 6.8872C20.7947 6.8872 7.50769 20.1712 7.50585 20.173C7.44534 20.2326 7.37657 20.2784 7.29405 20.3151C7.28854 20.3169 7.27662 20.3224 7.27112 20.3243C7.24912 20.3353 7.21978 20.3463 7.18952 20.3536L0.858239 21.9771C0.802308 21.9927 0.744542 22 0.687694 22ZM1.6422 20.3573L5.68578 19.3205L2.67831 16.3201L1.6422 20.3573ZM7.02264 18.7127L17.0417 8.69678L13.3072 4.96304L3.28531 14.9826L7.02264 18.7127ZM18.0137 7.72416L18.9608 6.7772L15.2263 3.04346L14.2791 3.99042L18.0137 7.72416ZM19.9318 5.80274C20.8763 4.77145 20.8616 3.16905 19.8759 2.16067C19.8732 2.15792 19.8631 2.14784 19.8603 2.14509C19.3615 1.64824 18.6977 1.37506 17.9917 1.37506C17.3205 1.37506 16.6887 1.62165 16.1991 2.07175L19.9318 5.80274Z" />
       </svg>`,
   email: () => `
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -580,7 +578,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
-        class: "inline-flex items-center justify-center align-middle",
+        class: "flex items-center justify-center align-middle",
         style: { width: pixelSize.value, height: pixelSize.value }
       }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$p);
     };
@@ -708,7 +706,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", null, [
             __props.label ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-4": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
+              class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
             }, [
               vue.createElementVNode("div", _hoisted_1$o, [
                 vue.createElementVNode("div", _hoisted_2$j, [
@@ -867,18 +865,17 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "w-full flex justify-between items-start" };
-const _hoisted_2$h = { class: "inline-flex items-center" };
-const _hoisted_3$a = {
+const _hoisted_1$m = { class: "leading-6 w-full flex justify-between gap-4" };
+const _hoisted_2$h = {
   key: 0,
   class: "flex items-center mr-4"
 };
-const _hoisted_4$9 = { class: "inline-flex items-center" };
-const _hoisted_5$8 = {
+const _hoisted_3$a = { class: "inline-flex items-center" };
+const _hoisted_4$9 = {
   key: 0,
   class: "w-full flex mt-2"
 };
-const _hoisted_6$5 = ["aria-hidden"];
+const _hoisted_5$8 = ["aria-hidden"];
 const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -951,20 +948,22 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(buttonRowClasses.value)
           }, [
             vue.createElementVNode("span", _hoisted_1$m, [
-              vue.createElementVNode("span", _hoisted_2$h, [
-                __props.preIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$a, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass({ "inline-flex items-start": __props.preIcon })
+              }, [
+                __props.preIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$h, [
                   vue.createVNode(_sfc_main$y, {
                     name: __props.preIcon,
                     size: 24,
                     class: vue.normalizeClass(["fill-blue-500", { "fill-gray-500": __props.disabled }])
                   }, null, 8, ["name", "class"])
                 ])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", _hoisted_4$9, [
+                vue.createElementVNode("span", _hoisted_3$a, [
                   vue.createElementVNode("span", {
                     class: vue.normalizeClass(["font-bold font-heading text-lg leading-md", { "text-gray-700": __props.disabled }])
                   }, vue.toDisplayString(__props.label), 3)
                 ])
-              ]),
+              ], 2),
               vue.createElementVNode("span", null, [
                 __props.stickerText && __props.stickerColor ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                   key: 0,
@@ -978,12 +977,12 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_sfc_main$y, {
                   name: "arrowDown",
                   size: 24,
-                  class: vue.normalizeClass(["ml-4 transition-transform duration-200 fill-blue-500 min-w-6 min-h-6", { "rotate-180": isOpen.value, "fill-gray-500": __props.disabled }])
+                  class: vue.normalizeClass(["transition-transform duration-200 fill-blue-500 min-w-6 min-h-6", { "rotate-180": isOpen.value, "fill-gray-500": __props.disabled }])
                 }, null, 8, ["class"])
               ])
             ])
           ], 2),
-          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$8, [
+          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$9, [
             vue.renderSlot(_ctx.$slots, "extra-row")
           ])) : vue.createCommentVNode("", true)
         ], 16),
@@ -992,7 +991,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
           class: "mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white"
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6$5), [
+        ], 8, _hoisted_5$8), [
           [vue.vShow, isOpen.value]
         ])
       ], 16);
@@ -1078,7 +1077,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$3, [
           __props.heading ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: vue.normalizeClass({ "mb-4": vue.unref(hasSlot) })
+            class: vue.normalizeClass({ "mb-2": vue.unref(hasSlot) })
           }, [
             vue.createElementVNode("header", _hoisted_10$2, [
               vue.createElementVNode("div", _hoisted_11$2, [
@@ -4354,7 +4353,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$e = ["aria-disabled"];
 const _hoisted_2$c = { key: 2 };
 const elBase = "box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
-const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:border-blue-600 active:bg-blue-600 active:border-blue-600 active:text-white";
+const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600";
 const iconFillClass = "fill-blue-500";
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -4400,7 +4399,8 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       blockElClasses.value,
       props.textSelection && "select-text",
       (props.icon || props.text) && "gap-2",
-      disabled.value ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
+      props.loading && "bg-blue_t-200!",
+      disabled.value ? "cursor-not-allowed" : "cursor-pointer"
     ]);
     const onClick = (ev) => {
       if (disabled.value || props.loading) {
@@ -8616,7 +8616,7 @@ try {
 }
 const _hoisted_1$b = ["for"];
 const _hoisted_2$9 = { class: "relative" };
-const _hoisted_3$7 = ["type", "required", "value", "disabled", "tabindex", "aria-invalid", "aria-label", "autocomplete", "pattern"];
+const _hoisted_3$7 = ["type", "required", "value", "disabled", "tabindex", "aria-invalid", "aria-label", "autocomplete", "pattern", "searchIcon"];
 const _hoisted_4$6 = {
   key: 0,
   class: "text-red-600 font-bold mt-1"
@@ -8650,6 +8650,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     readonly: { type: Boolean },
     ariaLabel: { default: void 0 },
     pattern: { default: void 0 },
+    searchIcon: { type: Boolean },
     onClearInput: {},
     maskOptions: { default: void 0 },
     modelModifiers: { default: () => ({}) },
@@ -8717,6 +8718,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       let count = 0;
       if (showValidationIcon.value) count++;
       if (showClearButton.value) count++;
+      if (props.searchIcon) count++;
       if (showPasswordToggle.value) count += 3;
       return count;
     });
@@ -8879,7 +8881,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                 style: inputStyle.value,
                 "aria-label": props.ariaLabel,
                 autocomplete: props.autocomplete,
-                pattern: props.pattern
+                pattern: props.pattern,
+                searchIcon: props.searchIcon
               }, inputAttrs.value, {
                 onInput: handleInputChange,
                 onChange: handleInputChange,
@@ -8901,12 +8904,18 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                   key: 1,
                   name: "bigSuccess"
                 })) : vue.createCommentVNode("", true),
-                showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, vue.mergeProps({
+                props.searchIcon ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: 2,
+                  name: "search",
+                  size: 24,
+                  class: "fill-blue-500"
+                })) : vue.createCommentVNode("", true),
+                showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, vue.mergeProps({
+                  key: 3,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, { onClick: onClear }), null, 16)) : vue.createCommentVNode("", true),
                 showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
-                  key: 3,
+                  key: 4,
                   icon: showPassword.value ? "viewOff" : "viewOn",
                   text: showPassword.value ? passwordButtonHideLabel.value : passwordButtonShowLabel.value,
                   onClick: toggleShowPassword
@@ -9240,7 +9249,9 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
     const uncheckAllRadios = () => {
       if (!dropdownRef.value) return;
-      const checkedRadio = dropdownRef.value.querySelector('input[name="search-select-radio-group"]:checked');
+      const checkedRadio = dropdownRef.value.querySelector(
+        'input[name="search-select-radio-group"]:checked'
+      );
       if (checkedRadio) {
         checkedRadio.checked = false;
       }
@@ -9529,7 +9540,9 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     });
     const activeDescendantId = vue.computed(() => {
       if (!dropdownVisible.value || !dropdownRef.value) return null;
-      const checkedRadio = dropdownRef.value.querySelector('input[name="search-select-radio-group"]:checked');
+      const checkedRadio = dropdownRef.value.querySelector(
+        'input[name="search-select-radio-group"]:checked'
+      );
       return checkedRadio?.id || null;
     });
     const inputAriaAttrs = vue.computed(() => {
@@ -9574,15 +9587,10 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
                 mask: pidMask.value,
                 maskOptions: { lazy: true }
               }, inputAriaAttrs.value, {
+                searchIcon: !__props.disabled && !hasInputValue.value,
                 onInput: handleInput,
                 onClearInput: handleClear
-              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "locale", "value", "clearButton", "mask"]),
-              !__props.disabled && !hasInputValue.value ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
-                key: 0,
-                name: "search",
-                size: 24,
-                class: "absolute right-3 bottom-6 translate-y-1/2 fill-blue-500"
-              })) : vue.createCommentVNode("", true)
+              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "locale", "value", "clearButton", "mask", "searchIcon"])
             ])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
             vue.createElementVNode("div", _hoisted_5$4, vue.toDisplayString(__props.singleItemLabel), 1),