{"version":3,"file":"Toggle-C8MBvOaq.js","sources":["../../src/components/Basic/Toggle.vue"],"sourcesContent":["<template>\n  <label\n    class=\"toggle body-2-expanded\"\n    :class=\"classes\"\n    @keydown.enter.prevent=\"handleChange\"\n    @click.prevent=\"handleChange\"\n  >\n    <div class=\"toggle__content\">\n      <div class=\"toggle__switch\">\n        <input\n          v-bind=\"$attrs\"\n          :id=\"uid\"\n          class=\"toggle__input\"\n          type=\"checkbox\"\n          tabindex=\"-1\"\n          :name=\"$props.name\"\n          :value=\"model\"\n          :disabled=\"$props.disabled\"\n          :checked=\"model\"\n        />\n        <div\n          class=\"toggle__label\"\n          tabindex=\"0\"\n          @keydown=\"onKeyDown\"\n        >\n          <the-icon\n            class=\"toggle__icon--circle\"\n            art=\"solid\"\n            name=\"circle\"\n          />\n          <the-icon\n            class=\"toggle__icon--check\"\n            art=\"solid\"\n            name=\"check\"\n          />\n        </div>\n      </div>\n\n      <div\n        class=\"toggle__text\"\n        :class=\"['toggle--' + $props.placement]\"\n      >\n        <slot>\n          <span\n            v-if=\"$props.label\"\n            v-text=\"$props.label\"\n          />\n        </slot>\n      </div>\n    </div>\n  </label>\n</template>\n\n<script setup>\nimport { computed } from 'vue'\nimport { v4 as uuidv4 } from 'uuid'\n\n// INIT\nconst model = defineModel({ type: Boolean })\n\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true,\n  },\n\n  placement: {\n    type: String,\n    default: 'right',\n  },\n\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  label: {\n    type: String,\n    default: '',\n  },\n\n  size: {\n    validator(value) {\n      return ['sm', 'md'].includes(value)\n    },\n    default: 'sm',\n  },\n\n  v: {\n    type: Object,\n    default: () => {},\n  },\n})\n\n// COMPUTED\nconst classes = computed(() => {\n  return {\n    [`toggle--${props.size}`]: true,\n    'toggle--error': isInvalid.value,\n  }\n})\n\n// DATA\nconst uid = uuidv4()\n\n// COMPUTED\nconst isInvalid = computed(() => {\n  return props.v?.$invalid && props.v?.$error\n})\n\n// METHODS\nfunction handleChange() {\n  model.value = !model.value\n}\n\nfunction onKeyDown(event) {\n  if (event.keyCode === 32) {\n    handleChange()\n    event.preventDefault()\n  }\n}\n</script>\n\n<style scoped>\n.toggle__content {\n  display: flex;\n  flex-direction: row;\n  gap: var(--fixed-spacing-fix-03);\n  align-items: center;\n  cursor: pointer;\n}\n.toggle {\n  --toggle-animation: cubic-bezier(0, 0, 1, 1);\n\n  display: inline-block;\n\n  &--sm {\n    --toggle-off-width: 12px;\n    --toggle-off-height: 12px;\n    --toggle-off-top: 4px;\n    --toggle-off-left: 4px;\n\n    --toggle-hover-left: -8px;\n    --toggle-hover-top: -10px;\n\n    --toggle-active-width: 20px;\n    --toggle-active-height: 20px;\n    --toggle-active-top: 0;\n    --toggle-active-left: 0;\n\n    --toggle-checked-width: 18px;\n    --toggle-checked-height: 18px;\n    --toggle-checked-left: calc(100% - 1px);\n\n    --toggle-checked-icon-left: calc(100% - 15.5px);\n\n    --toggle-checked-hover-top: -10px;\n    --toggle-checked-hover-left: 8px;\n\n    --toggle-label-width: 42px;\n    --toggle-label-height: 24px;\n\n    --toggle-check-icon-width: 11px;\n    --toggle-check-icon-height: 12px;\n\n    --toggle-after-check-icon-top: 1px;\n  }\n\n  &--md {\n    --toggle-off-width: 16px;\n    --toggle-off-height: 16px;\n    --toggle-off-top: 6px;\n    --toggle-off-left: 6px;\n\n    --toggle-hover-left: -8px;\n    --toggle-hover-top: -6px;\n\n    --toggle-active-width: 28px;\n    --toggle-active-height: 28px;\n    --toggle-active-top: 0;\n    --toggle-active-left: 0;\n\n    --toggle-checked-width: 24px;\n    --toggle-checked-height: 24px;\n    --toggle-checked-left: calc(100% - 2px);\n\n    --toggle-checked-icon-left: calc(100% - 20.5px);\n\n    --toggle-checked-hover-top: -6px;\n    --toggle-checked-hover-left: 18px;\n\n    --toggle-label-width: 56px;\n    --toggle-label-height: 32px;\n\n    --toggle-check-icon-width: 14px;\n    --toggle-check-icon-height: 16px;\n\n    --toggle-after-check-icon-top: 2px;\n  }\n\n  &__label {\n    --toggle-check-left: 5px;\n    --toggle-check-top: 0;\n    --toggle-check-bottom: 0;\n\n    --toggle-after-top: 4px;\n    --toggle-after-width: 12px;\n    --toggle-after-height: 12px;\n    --toggle-after-border-radius: 90px;\n\n    border-width: 2px;\n    border-style: solid;\n  }\n\n  &__text {\n    color: var(--on-surface);\n    display: flex;\n    flex-direction: row;\n    column-gap: var(--fixed-spacing-fix-03);\n    align-items: center;\n  }\n\n  &__input {\n    --toggle-disabled-border: 2px solid var(--Interaction-States-disabled-default);\n    --toggle-disabled-background: var(--Interaction-States-disabled-default);\n  }\n\n  &--left {\n    order: -1;\n  }\n\n  &--right {\n    order: 1;\n  }\n\n  &__switch {\n    position: relative;\n    z-index: var(--dvp-stack-level-element);\n  }\n\n  &__input {\n    position: absolute;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n\n    &:checked + .toggle__label {\n      background-color: var(--Interaction-States-enabled-default);\n      border-color: var(--Interaction-States-enabled-default);\n\n      .toggle__icon--check {\n        left: var(--toggle-checked-icon-left);\n        opacity: 1;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        width: var(--toggle-checked-width);\n        height: var(--toggle-checked-height);\n        left: var(--toggle-checked-left);\n        background-color: var(--surface);\n        transform: translateX(-100%);\n      }\n    }\n\n    &:not(:checked) + .toggle__label {\n      border-color: var(--outline);\n\n      &::after {\n        content: '';\n        position: absolute;\n        width: var(--toggle-off-width);\n        height: var(--toggle-off-height);\n        top: var(--toggle-off-top);\n        left: var(--toggle-off-left);\n        background-color: var(--Interaction-States-enabled-off);\n        z-index: -1;\n      }\n    }\n  }\n\n  &__label {\n    cursor: pointer;\n    display: block;\n    border-radius: var(--radius-border-radius-full);\n    position: relative;\n    text-indent: -9999px;\n    width: var(--toggle-label-width);\n    height: var(--toggle-label-height);\n\n    &:focus-visible {\n      outline: 2px solid var(--on-surface);\n      outline-offset: var(--fixed-spacing-fix-01);\n      border-radius: var(--radius-border-radius-full);\n    }\n\n    .toggle__icon--check {\n      position: absolute;\n      width: var(--toggle-check-icon-width);\n      height: var(--toggle-check-icon-height);\n      left: var(--toggle-check-left);\n      top: var(--toggle-check-top);\n      bottom: var(--toggle-check-bottom);\n      margin: auto 0;\n      z-index: var(--dvp-stack-level-element);\n      opacity: 0;\n      color: var(--Interaction-States-enabled-default);\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: var(--toggle-after-check-icon-top);\n      width: var(--toggle-after-width);\n      height: var(--toggle-after-height);\n      border-radius: var(--toggle-after-border-radius);\n      transform: translateX(0);\n    }\n\n    .toggle__icon--circle {\n      position: absolute;\n      width: 40px;\n      height: 40px;\n      color: transparent;\n      z-index: -1;\n    }\n  }\n\n  &:hover {\n    .toggle__input:checked + .toggle__label {\n      background-color: var(--Interaction-States-hovered-default-a);\n      border-color: var(--Interaction-States-hovered-default-a);\n\n      .toggle__icon--check {\n        color: var(--Interaction-States-hovered-default-a);\n      }\n    }\n\n    .toggle__icon--circle {\n      color: var(--Interaction-States-hovered-default-b);\n    }\n  }\n\n  &:active {\n    .toggle__input:not(:checked) + .toggle__label::after {\n      width: var(--toggle-active-width);\n      height: var(--toggle-active-height);\n      top: var(--toggle-active-top);\n      left: var(--toggle-active-left);\n      transition: 0.1s var(--toggle-animation);\n    }\n\n    .toggle__icon--circle {\n      color: var(--Interaction-States-pressed-default-c);\n    }\n  }\n\n  &:has(input[disabled]) {\n    pointer-events: none;\n\n    .toggle__input {\n      &:not(:checked) + .toggle__label {\n        border-color: var(--Interaction-States-disabled-default);\n        &::after {\n          background-color: var(--Interaction-States-disabled-default);\n        }\n      }\n\n      &:checked + .toggle__label {\n        background-color: var(--Interaction-States-disabled-default);\n        border-color: var(--Interaction-States-disabled-default);\n\n        .toggle__icon--check {\n          color: var(--Interaction-States-disabled-default);\n        }\n\n        &::after {\n          background-color: var(--surface);\n        }\n      }\n    }\n  }\n\n  .toggle__input:checked + .toggle__label .toggle__icon--circle {\n    top: var(--toggle-checked-hover-top);\n    left: var(--toggle-checked-hover-left);\n  }\n\n  .toggle__input:not(:checked) + .toggle__label .toggle__icon--circle {\n    top: var(--toggle-hover-top);\n    left: var(--toggle-hover-left);\n  }\n}\n</style>\n"],"names":["model","_useModel","props","__props","classes","computed","isInvalid","uid","uuidv4","handleChange","onKeyDown","event"],"mappings":"uqBA0DA,MAAMA,EAAQC,gBAA6B,EAErCC,EAAQC,EAmCRC,EAAUC,EAAS,KAChB,CACL,CAAC,WAAWH,EAAM,IAAI,EAAE,EAAG,GAC3B,gBAAiBI,EAAU,KAC5B,EACF,EAGKC,EAAMC,EAAQ,EAGdF,EAAYD,EAAS,IAClBH,EAAM,GAAG,UAAYA,EAAM,GAAG,MACtC,EAGD,SAASO,GAAe,CACtBT,EAAM,MAAQ,CAACA,EAAM,KACvB,CAEA,SAASU,EAAUC,EAAO,CACpBA,EAAM,UAAY,KACpBF,EAAc,EACdE,EAAM,eAAgB,EAE1B"}