{"version":3,"file":"MhxggbNK.js","sources":["../../../../src/complib/formFields/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div class=\"toggle\" :class=\"{ disabled }\">\n    <FormKit\n      :id=\"id\"\n      v-model=\"value\"\n      type=\"checkbox\"\n      :name=\"name ?? id\"\n      inner-class=\"w-[60px] h-[22px] rounded-[18px] relative innerToggle overflow-hidden cursor-pointer\"\n      :input-class=\"\n        disabled && hasWhiteBg\n          ? 'bg-background-base, cursor-no-drop'\n          : '!hidden'\n      \"\n      decorator-class=\"w-[18px] h-[18px] rounded-[100%] absolute top-[2px] bottom-[2px] thumb\"\n      :disabled=\"disabled\"\n    >\n      <template #label>\n        <FormLabel :label=\"label\" />\n      </template>\n      <template #decoratorIcon>\n        <div\n          class=\"w-[98px] h-[22px] flex flex-row relative top-[-2px] left-[-40px] thumb-content\"\n        >\n          <div\n            class=\"w-[40px] font-roboto text-[12px] text-white flex justify-center items-center select-none font-bold pl-[2px]\"\n          >\n            {{ t('formFields.toggle.yes') }}\n          </div>\n          <div\n            class=\"relative flex items-center justify-center w-[18px] h-[18px] bg-white z-10 rounded-[100%] top-[2px]\"\n          >\n            <Icon\n              icon-class=\"fas fa-check\"\n              class=\"absolute checkIcon text-primary-base\"\n            />\n            <Icon\n              icon-class=\"fas xmark\"\n              class=\"absolute xIcon text-border-light\"\n            />\n          </div>\n          <div\n            class=\"w-[40px] font-roboto text-[12px] text-white flex justify-center items-center select-none font-bold pr-[2px]\"\n          >\n            {{ t('formFields.toggle.no') }}\n          </div>\n        </div>\n      </template>\n    </FormKit>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { FormLabel, Icon } from '@/complib';\nimport { FormKit } from '@formkit/vue';\n\ndefineProps({\n  label: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  id: {\n    type: String,\n    required: true,\n  },\n  name: {\n    type: String,\n    default: '',\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  hasWhiteBg: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst value = defineModel<boolean>();\nconst { t } = useTrans();\n</script>\n<style lang=\"postcss\" scoped>\n.toggle.disabled {\n  @apply opacity-50;\n  * {\n    cursor: no-drop;\n  }\n}\n.toggle :deep(.innerToggle) {\n  .thumb {\n    transition: all 0.2s ease-in-out;\n    left: 2px;\n\n    .checkIcon {\n      @apply opacity-0;\n      transition: all 0.2s ease-in-out;\n    }\n    .xIcon {\n      @apply opacity-100;\n      transition: all 0.2s ease-in-out;\n    }\n\n    .thumb-content {\n      @apply bg-border-light;\n      transition: all 0.2s ease-in-out;\n    }\n  }\n\n  input:checked + .thumb {\n    left: 40px;\n    .checkIcon {\n      @apply opacity-100;\n    }\n    .xIcon {\n      @apply opacity-0;\n    }\n    .thumb-content {\n      @apply bg-primary-base;\n    }\n  }\n}\n</style>\n"],"names":["value","_useModel","__props","t","useTrans"],"mappings":"s9BA8EM,MAAAA,EAAQC,EAAqBC,EAAA,YAAA,EAC7B,CAAE,EAAAC,GAAMC"}