@henriquepetrelli/hp-design-system 1.1.13 → 1.1.14

package/dist/hp-design-system.es.js

@@ -361,7 +361,10 @@ var ButtonIconSize = /* @__PURE__ */ ((ButtonIconSize2) => {
 })(ButtonIconSize || {});
 
 const convertHexToRgb = (color) => {
-  if (color.startsWith("var(--")) return "120, 120, 120";
+  if (!color) return "";
+  if (color.startsWith("var(")) {
+    return color;
+  }
   if (color.startsWith("#")) {
     const hex = color.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16);
@@ -369,10 +372,10 @@ const convertHexToRgb = (color) => {
     const b = parseInt(hex.substring(4, 6), 16);
     return `${r}, ${g}, ${b}`;
   }
-  if (color.includes("rgb(")) {
+  if (color.startsWith("rgb")) {
     return color.replace(/rgba?\(|\s|\)/g, "").split(",").slice(0, 3).join(", ");
   }
-  return "0, 0, 0";
+  return "";
 };
 
 const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
@@ -427,7 +430,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
     const computedIconColor = computed(() => {
       if (props.backgroundColor || props.hasBackground)
-        return props.iconColor || "#fff";
+        return props.iconColor || "#000000";
       else return props.iconColor || "var(--color-primary)";
     });
     const computedBackgroundColor = computed(() => {
@@ -461,7 +464,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         }, null, 8, ["name", "size", "color"])) : (openBlock(), createBlock(unref(_sfc_main$b), {
           key: 1,
           type: "circle1",
-          color: computedIconColor.value || "var(--color-primary)",
+          color: computedIconColor.value || "#000",
           secondaryColor: computedBackgroundColor.value,
           size: __props.size,
           speed: 0.8
@@ -471,7 +474,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-32ab443d"]]);
+const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8cf8a123"]]);
 
 var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
   ButtonLetterSize2["SMALL"] = "sm";
@@ -480,7 +483,7 @@ var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
   return ButtonLetterSize2;
 })(ButtonLetterSize || {});
 
-const _hoisted_1$b = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+const _hoisted_1$b = ["aria-label", "aria-disabled", "disabled", "tabindex"];
 const _hoisted_2$b = { key: 0 };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ButtonLetter",
@@ -515,7 +518,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     },
     isLoading: {
       type: Boolean,
-      defualt: false
+      default: false
     },
     size: {
       type: String,
@@ -527,25 +530,32 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const handleClick = (event) => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.isLoading) {
         emit("action:click", event);
       }
     };
     const computedLetterColor = computed(() => {
-      if (props.backgroundColor || props.hasBackground)
-        return props.letterColor || "#fff";
-      else return props.letterColor || "var(--color-primary)";
+      if (props.hasBackground || props.backgroundColor) {
+        return props.letterColor || "#000000";
+      }
+      return props.letterColor || "var(--color-primary)";
     });
     const computedBackgroundColor = computed(() => {
       if (props.backgroundColor) return props.backgroundColor;
       if (props.hasBackground) return "var(--color-primary)";
       return "transparent";
     });
+    const letterColorRgb = computed(() => {
+      const color = computedLetterColor.value;
+      return color ? convertHexToRgb(color) : "";
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         onClick: handleClick,
         "aria-label": __props.label,
-        tabindex: __props.tabindex,
+        "aria-disabled": __props.disabled || __props.isLoading,
+        disabled: __props.disabled || __props.isLoading,
+        tabindex: __props.disabled ? -1 : 0,
         class: normalizeClass(["button-letter", {
           "button-letter--sm": __props.size === unref(ButtonLetterSize).SMALL,
           "button-letter--lg": __props.size === unref(ButtonLetterSize).LARGE,
@@ -554,10 +564,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         }]),
         style: normalizeStyle({
           "--background-color": computedBackgroundColor.value,
-          "--letter-color": unref(convertHexToRgb)(computedLetterColor.value)
-        }),
-        "aria-disabled": __props.disabled || __props.isLoading,
-        disabled: __props.disabled || __props.isLoading
+          "--letter-color-rgb": letterColorRgb.value,
+          color: computedLetterColor.value
+        })
       }, [
         !__props.isLoading ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(__props.letter), 1)) : (openBlock(), createBlock(unref(_sfc_main$b), {
           key: 1,
@@ -572,7 +581,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4df7cc96"]]);
+const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-13b75270"]]);
 
 var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["WARNING"] = "warning";