{"version":3,"file":"ButtonWrapper.6cf1b1db.js","sources":["../../../resources/js/Components/Buttons/ButtonWrapper.vue"],"sourcesContent":["<template>\n    <button\n        class=\"relative flex justify-center items-center\"\n        :class=\"[buttonClasses, textClasses]\"\n        :disabled=\"disabled || processing\"\n    >\n        <slot />\n        <div\n            v-if=\"processing\"\n            class=\"absolute flex w-full h-full items-center justify-center\"\n            :class=\"[buttonClasses, textClasses]\"\n        >\n            <LoadingIcon class=\"w-5 h-5 mr-2\" />\n            {{ $t(\"generic.ls_generic_loading\") }}\n        </div>\n        <PromoTag v-if=\"hasPromoTag\" />\n    </button>\n</template>\n\n<script setup>\nimport LoadingIcon from \"@/Components/Icons/LoadingIcon.vue\";\nimport PromoTag from \"@/Components/Tags/PromoTag.vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps({\n    size: {\n        type: String,\n        validator(value) {\n            return [\"s\", \"m\", \"l\"].includes(value);\n        },\n        default: \"m\",\n    },\n    color: {\n        type: String,\n        validator(value) {\n            return [\n                \"red\",\n                \"dark-red\",\n                \"green\",\n                \"lemon-green\",\n                \"white\",\n                \"dark-gray\",\n                \"transparent\",\n                \"alert\",\n                \"premium\",\n                \"promo\",\n            ].includes(value);\n        },\n        default: \"red\",\n    },\n    block: {\n        type: Boolean,\n        default: false,\n    },\n    text: {\n        type: Boolean,\n        default: false,\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n    selected: {\n        type: Boolean,\n        default: false,\n    },\n    icon: {\n        type: Boolean,\n        default: false,\n    },\n    roundedClass: {\n        type: String,\n        default: \"rounded-lg\",\n    },\n    setup: {\n        type: Boolean,\n        default: false,\n    },\n    question: {\n        type: Boolean,\n        default: false,\n    },\n    onboarding: {\n        type: Boolean,\n        default: false,\n    },\n    textClasses: {\n        type: [String, Object],\n        default: \"font-semibold text-button\",\n    },\n    padding: {\n        type: String,\n        default: \"\",\n    },\n    processing: {\n        type: Boolean,\n        default: false,\n    },\n    hasPromoTag: {\n        type: Boolean,\n        default: false,\n    },\n});\n\nconst buttonClasses = computed(() => {\n    const padding = computed(() => {\n        if (props.padding != \"\") {\n            return props.padding;\n        }\n\n        if (props.icon) {\n            return props.size === \"s\" ? 1.5 : 2.5;\n        }\n\n        if (props.size === \"s\") {\n            return \"px-4 py-2\";\n        }\n\n        if (props.size === \"m\") {\n            return \"px-6 py-3.5\";\n        }\n\n        if (props.size === \"l\") {\n            return \"px-8 py-4\";\n        }\n\n        return \"px-6 py-3.5\";\n    });\n\n    const base = [\n        props.icon ? `p-${padding.value}` : padding.value,\n        props.roundedClass,\n        { \"text-button-s\": props.size === \"s\" },\n        { \"text-button\": props.size === \"m\" },\n        { \"text-button-l\": props.size === \"l\" },\n        { \"w-full\": props.block },\n    ];\n\n    if (props.selected) {\n        return [\n            ...base,\n            \"shadow-inner rounded-lg\",\n            {\n                \"bg-gray-840  hover:shadow-md text-white\":\n                    props.setup && !props.question,\n                \"bg-gray-100 text-gray-800\": props.question,\n                \"bg-lemon-green hover:bg-lemon-green-light active:bg-lemon-green-dark text-white\":\n                    !props.disabled && !props.setup && !props.question,\n                \"bg-lemon-green-light hover:bg-lemon-green-light active:bg-lemon-green-dark text-white\":\n                    props.disabled && !props.setup && !props.question,\n            },\n        ];\n    }\n\n    return [\n        {\n            \"shadow-button\": props.color !== \"transparent\",\n        },\n        {\n            \"hover:shadow-button-hover active:shadow-button-active\":\n                !props.disabled && props.color !== \"transparent\",\n            \"hover:shadow-button cursor-default\":\n                props.disabled && props.color !== \"transparent\",\n        },\n        {\n            \"text-white\": props.color === \"red\",\n            \"bg-blend-multiply bg-gradient-to-b from-button-gradient-from to-button-gradient-to bg-red  active:bg-red-dark\":\n                !props.disabled && props.color === \"red\",\n            \"bg-gray-250\": props.disabled && props.color === \"red\",\n        },\n        {\n            \"text-white active:bg-red-dark\": props.color === \"dark-red\",\n            \"bg-blend-multiply bg-red-gradient-shadowy\":\n                !props.disabled && props.color === \"dark-red\",\n            \"bg-red-lighter\": props.disabled && props.color === \"dark-red\",\n        },\n        {\n            \"bg-blend-multiply bg-gradient-to-b from-button-gradient-from to-button-gradient-to bg-green-dark text-white\":\n                !props.disabled && props.color === \"green\",\n        },\n        {\n            \"text-white active:bg-red-600\": props.color === \"alert\",\n            \"bg-blend-multiply bg-gradient-to-b from-button-gradient-from to-button-gradient-to bg-alert\":\n                !props.disabled && props.color === \"alert\",\n            \"bg-red-300\": props.disabled && props.color === \"alert\",\n        },\n        {\n            \"text-white active:bg-gray-900\": props.color === \"dark-gray\",\n            \"bg-gray-840 hover:bg-gray-900\":\n                props.color === \"dark-gray\" && !props.disabled,\n            \"bg-gray-250\": props.color === \"dark-gray\" && props.disabled,\n        },\n        {\n            \"bg-blend-multiply bg-gradient-to-b from-button-gradient-from to-button-gradient-to bg-lemon-green text-white\":\n                !props.disabled && props.color === \"lemon-green\",\n            \"text-gray-600 bg-white\":\n                props.disabled && props.color === \"lemon-green\",\n        },\n        {\n            \"bg-premium-button-gradient text-white\":\n                !props.disabled && props.color === \"premium\",\n            \"text-gray-600 bg-white\":\n                props.disabled && props.color === \"premium\",\n        },\n        {\n            \"bg-white active:bg-none active:bg-gray-100 hover:bg-gray-100\":\n                props.color === \"white\" && !props.setup,\n            \"bg-white active:bg-none active:bg-gray-100 hover:bg-white\":\n                props.color === \"white\" && props.setup,\n            \"text-gray-600\": props.disabled && props.color === \"white\",\n            \"text-gray-800\": !props.disabled && props.color === \"white\",\n        },\n        {\n            \"text-white\": props.color === \"promo\",\n            \"bg-gradient-red-discount active:bg-gradient-red-discount\":\n                !props.disabled && props.color === \"promo\",\n            \"bg-gray-250\": props.disabled && props.color === \"promo\",\n        },\n        props.text\n            ? \"underline text-gray-800\"\n            : [\n                  ...base,\n                  {\n                      \"bg-transparent hover:bg-gray-100 active:bg-gray-100 text-gray-550 hover:text-black active:bg-none active:bg-gray-100 shadow-none\":\n                          props.color === \"transparent\" && !props.onboarding,\n                      \"bg-transparent hover:bg-gray-100 active:bg-gray-100 text-gray-800 hover:text-black active:bg-none active:bg-gray-100 shadow-none\":\n                          props.color === \"transparent\" && props.onboarding,\n                      \"text-gray-600\":\n                          props.disabled && props.color === \"transparent\",\n                      \"text-gray-800\":\n                          !props.disabled && props.color === \"white\",\n                  },\n              ],\n    ];\n});\n</script>\n"],"names":["props","__props","buttonClasses","computed","padding","base"],"mappings":"k0CAwBA,MAAMA,EAAQC,EAgFRC,EAAgBC,EAAS,IAAM,CACjC,MAAMC,EAAUD,EAAS,IACjBH,EAAM,SAAW,GACVA,EAAM,QAGbA,EAAM,KACCA,EAAM,OAAS,IAAM,IAAM,IAGlCA,EAAM,OAAS,IACR,YAGPA,EAAM,OAAS,IACR,cAGPA,EAAM,OAAS,IACR,YAGJ,aACV,EAEKK,EAAO,CACTL,EAAM,KAAO,KAAKI,EAAQ,QAAUA,EAAQ,MAC5CJ,EAAM,aACN,CAAE,gBAAiBA,EAAM,OAAS,GAAK,EACvC,CAAE,cAAeA,EAAM,OAAS,GAAK,EACrC,CAAE,gBAAiBA,EAAM,OAAS,GAAK,EACvC,CAAE,SAAUA,EAAM,KAAO,CACjC,EAEI,OAAIA,EAAM,SACC,CACH,GAAGK,EACH,0BACA,CACI,0CACIL,EAAM,OAAS,CAACA,EAAM,SAC1B,4BAA6BA,EAAM,SACnC,kFACI,CAACA,EAAM,UAAY,CAACA,EAAM,OAAS,CAACA,EAAM,SAC9C,wFACIA,EAAM,UAAY,CAACA,EAAM,OAAS,CAACA,EAAM,QAChD,CACb,EAGW,CACH,CACI,gBAAiBA,EAAM,QAAU,aACpC,EACD,CACI,wDACI,CAACA,EAAM,UAAYA,EAAM,QAAU,cACvC,qCACIA,EAAM,UAAYA,EAAM,QAAU,aACzC,EACD,CACI,aAAcA,EAAM,QAAU,MAC9B,gHACI,CAACA,EAAM,UAAYA,EAAM,QAAU,MACvC,cAAeA,EAAM,UAAYA,EAAM,QAAU,KACpD,EACD,CACI,gCAAiCA,EAAM,QAAU,WACjD,4CACI,CAACA,EAAM,UAAYA,EAAM,QAAU,WACvC,iBAAkBA,EAAM,UAAYA,EAAM,QAAU,UACvD,EACD,CACI,8GACI,CAACA,EAAM,UAAYA,EAAM,QAAU,OAC1C,EACD,CACI,+BAAgCA,EAAM,QAAU,QAChD,8FACI,CAACA,EAAM,UAAYA,EAAM,QAAU,QACvC,aAAcA,EAAM,UAAYA,EAAM,QAAU,OACnD,EACD,CACI,gCAAiCA,EAAM,QAAU,YACjD,gCACIA,EAAM,QAAU,aAAe,CAACA,EAAM,SAC1C,cAAeA,EAAM,QAAU,aAAeA,EAAM,QACvD,EACD,CACI,+GACI,CAACA,EAAM,UAAYA,EAAM,QAAU,cACvC,yBACIA,EAAM,UAAYA,EAAM,QAAU,aACzC,EACD,CACI,wCACI,CAACA,EAAM,UAAYA,EAAM,QAAU,UACvC,yBACIA,EAAM,UAAYA,EAAM,QAAU,SACzC,EACD,CACI,+DACIA,EAAM,QAAU,SAAW,CAACA,EAAM,MACtC,4DACIA,EAAM,QAAU,SAAWA,EAAM,MACrC,gBAAiBA,EAAM,UAAYA,EAAM,QAAU,QACnD,gBAAiB,CAACA,EAAM,UAAYA,EAAM,QAAU,OACvD,EACD,CACI,aAAcA,EAAM,QAAU,QAC9B,2DACI,CAACA,EAAM,UAAYA,EAAM,QAAU,QACvC,cAAeA,EAAM,UAAYA,EAAM,QAAU,OACpD,EACDA,EAAM,KACA,0BACA,CACI,GAAGK,EACH,CACI,mIACIL,EAAM,QAAU,eAAiB,CAACA,EAAM,WAC5C,mIACIA,EAAM,QAAU,eAAiBA,EAAM,WAC3C,gBACIA,EAAM,UAAYA,EAAM,QAAU,cACtC,gBACI,CAACA,EAAM,UAAYA,EAAM,QAAU,OAC1C,CACJ,CACf,CACA,CAAC"}