{"version":3,"file":"order_shipment_transition_state-8fb090bc.js","sources":["../../../app/javascript/src/shared/vue_components/common/k_step_progress/indicator-bar.vue","../../../app/javascript/src/shared/vue_components/common/k-step-progress.vue","../../../app/javascript/src/shared/vue_components/order_shipment/common/step-progress-bar.vue","../../../app/javascript/src/shared/resource_models/order_shipment_transition_state.js"],"sourcesContent":["<template lang=\"pug\">\n//- This component is used at order progress\n\n//- TODO: Child points should be nested inside the `.point` elements\n//- TODO: The height should automatically adjust its growth instead of using absolute positioning\n//- TODO: Position default can be removed\n.vc-k-step-progress-indicator-bar(:class=\"containerClass\")\n  .bar(:style=\"`--bar-width: ${barWidth}%`\")\n  .points\n    .point.start-point\n\n    template(v-for=\"(step, index) in steps\")\n      .point.value-point(\n        :style=\"`--point-position: ${step.position}%;`\"\n        :class=\"{ 'passed-point': index < value, 'current-point': index === value, 'unreached-point': index > value }\"\n      )\n        .label-wrapper\n          .label(v-if=\"step.label\") {{ step.label }}\n          slot(\n            name=\"label\"\n            :step=\"step.step\"\n          )\n\n      //- for child points\n      .child-points-wrapper(\n        v-if=\"step.substeps.length > 0\"\n        :style=\"childPointsStyleFor(step, index)\"\n        :class=\"{ 'passed-point': index < value, 'current-point': index === value, 'unreached-point': index > value }\"\n      )\n        .child-bar(\n          :style=\"`--child-bar-width: ${step.substeps[step.substeps.length - 1].position}%`\"\n        )\n        .child-point(\n          v-for=\"(substep, subindex) in step.substeps\"\n          :key=\"subindex\"\n          :style=\"`--child-point-position: ${substep.position}%`\"\n        )\n          .label-wrapper\n            .label(v-if=\"substep.label\") {{ substep.label }}\n            slot(\n              name=\"sublabel\"\n              :step=\"step.step\"\n              :substep=\"substep.step\"\n            )\n</template>\n\n<script setup>\nimport { computed, onMounted } from 'vue'\nimport { useInstance } from 'skid-composables'\nconst COLOR_TYPE_MAP = {\n  'is-ci': 'is-ci',\n  'is-black': 'is-black'\n}\n\nconst props = defineProps({\n  value: { type: [Number, String], required: true },\n  steps: { type: Array, required: true },\n  options: {\n    type: Object,\n    default: () => {\n      return {\n        colorType: null,\n        isPassedStepVisible: false,\n        isUnreachedStepVisible: false\n      }\n    }\n  }\n})\n\nconst emit = defineEmits(['input'])\n\nconst convertedOptions = computed(() => {\n  return {\n    isPassedStepVisible: props.options.isPassedStepVisible || false,\n    isUnreachedStepVisible: props.options.isUnreachedStepVisible || false,\n    colorType: props.options.colorType || 'is-ci'\n  }\n})\n\nconst containerClass = computed(() => {\n  return [\n    convertedOptions.value.isPassedStepVisible ? 'passed-step-visible' : null,\n    convertedOptions.value.isUnreachedStepVisible\n      ? 'unreached-step-visible'\n      : null,\n    COLOR_TYPE_MAP[convertedOptions.value.colorType]\n  ]\n    .filter(Boolean)\n    .join(' ')\n})\n\nconst barWidth = computed(() => {\n  const selectedStep = props.steps.find((step, index) => {\n    return props.value === index\n  })\n\n  return selectedStep.position\n})\n\nfunction childPointsStyleFor(point, index) {\n  const nextPoint = props.steps[index + 1]\n\n  if (!nextPoint) return ''\n\n  return [\n    `--child-points-position: ${point.position}%;`,\n    nextPoint\n      ? `--child-points-width: ${nextPoint.position - point.position}%`\n      : null\n  ]\n    .filter(Boolean)\n    .join(' ')\n}\n</script>\n\n<style lang=\"sass\">\n@use '@shared/css/utils'\n@use '@shared/css/abstracts/font.sass'\n@use '@shared/css/abstracts/color.sass'\n@use '@shared/css/abstracts/size.sass'\n\n.vc-k-step-progress-indicator-bar\n  --point-width: 20px\n  --point-border-width: 3px\n  --child-point-width: 10px\n  --child-point-border-width: 1px\n\n  position: relative\n  width: 100%\n  height: 4rem\n\n  &.is-ci\n    --bar-color: #{color.$ci}\n    --point-color: #{color.$ci}\n  &.is-black\n    --bar-color: #{color.$black}\n    --point-color: #{color.$black}\n\n  > .bar\n    position: relative\n    z-index: 1\n    top: calc(var(--point-width) * 0.5 + var(--point-border-width))\n    width: var(--bar-width)\n    height: 5px\n    background-color: var(--bar-color)\n    transition: all 1s ease-out\n  > .points\n    position: relative\n    width: calc(100% - var(--point-width))\n    left: calc(var(--point-width) * 0.5)\n    > .point\n      top: 0\n      position: absolute\n      z-index: 3\n      width: var(--point-width)\n      height: var(--point-width)\n      border-radius: var(--point-width)\n      transform: translate(-50%, 0)\n      &.passed-point, &.unreached-point\n        visibility: hidden\n      &.current-point\n        visibility: visible\n      &.start-point\n        left: 0\n        background-color: white\n        border: var(--point-border-width) solid color.$dark\n      &.value-point\n        left: var(--point-position)\n        background-color: var(--point-color)\n        box-shadow: 0 0 5px rgba(10, 10, 10, 0.5)\n        border: var(--point-border-width) solid color.$white\n      > .label-wrapper\n        position: relative\n        top: 1.5rem\n        display: flex\n        justify-content: center\n\n    > .child-points-wrapper\n      position: absolute\n      z-index: 2\n      left: var(--child-points-position)\n      width: var(--child-points-width)\n      &.passed-point, &.unreached-point\n        visibility: hidden\n      &.current-point\n        visibility: visible\n\n      > .child-bar\n        position: absolute\n        left: 0\n        top: calc(var(--point-width) * 0.5)\n        transform: translate(0, -50%)\n        width: var(--child-bar-width)\n        height: 3px\n        color: var(--bar-color)\n        background-color: var(--bar-color)\n\n      > .child-point\n        position: absolute\n        background: color.$ci\n        left: var(--child-point-position)\n        top: calc(var(--point-width) * 0.5)\n        transform: translate(0, -50%)\n        width: var(--child-point-width)\n        height: var(--child-point-width)\n        border-radius: var(--child-point-width)\n\n        > .label-wrapper\n          position: relative\n          top: 1.5rem\n          display: flex\n          justify-content: center\n          .label\n            font-size: font.$size-7\n\n  &.passed-step-visible .point.passed-point\n    visibility: visible\n\n  &.unreached-step-visible .point.unreached-point\n    visibility: visible\n</style>\n","<template lang=\"pug\">\n.k-step-progress(\n  :is=\"component\"\n  :value=\"value\"\n  :steps=\"convertedSteps\"\n  :options=\"options\"\n)\n  template(\n    v-if=\"$scopedSlots.label\"\n    #label=\"props\"\n  )\n    slot(\n      name=\"label\"\n      :step=\"props.step\"\n    )\n  template(\n    v-if=\"$scopedSlots.sublabel\"\n    #sublabel=\"props\"\n  )\n    slot(\n      name=\"sublabel\"\n      :step=\"props.step\"\n      :substep=\"props.substep\"\n    )\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue'\nimport IndicatorBar from './k_step_progress/indicator-bar.vue'\n\nconst STYLE_TYPE_MAP = {\n  'indicator-bar': IndicatorBar\n}\n\nconst props = defineProps({\n  styleType: { type: String },\n  value: { type: [Number, String], required: true },\n  steps: {\n    type: Array,\n    required: true,\n    validator: (value) => {\n      return value.every((step) => {\n        if (step.position == undefined) return false\n        if (!(step.position >= 0 && step.position <= 100)) return false\n\n        return true\n      })\n    }\n  },\n  options: { type: Object }\n})\n\nconst emit = defineEmits(['input'])\n\nconst component = computed(() => {\n  return STYLE_TYPE_MAP[props.styleType]\n})\n\nconst convertedSteps = computed(() => {\n  return props.steps.map((step, index) => {\n    return {\n      label: step.label,\n      position: step.position,\n      step: step.step || index,\n      substeps: (step.substeps || []).map((substep, subindex) => {\n        return {\n          label: substep.label,\n          position: substep.position,\n          step: substep.step || subindex\n        }\n      })\n    }\n  })\n})\n</script>\n","<template lang=\"pug\">\nk-step-progress(\n  style-type=\"indicator-bar\"\n  :value=\"value\"\n  :steps=\"steps\"\n  :options=\"{ colorType: props.orderShipment.state === 'canceled' ? 'is-black' : 'is-ci' }\"\n)\n  template(#label=\"props\")\n    label.label(v-if=\"props.step === stateFor('ready')\")\n      span.tag.is-warning {{ aasmStateLocaleText('order/shipment', 'state', 'ready') }}\n    label.label(v-if=\"props.step === stateFor('tallying')\")\n      span.tag.is-info {{ aasmStateLocaleText('order/shipment', 'state', 'tallying') }}\n    label.label(v-if=\"props.step === stateFor('shipped')\")\n      span.tag.is-success {{ aasmStateLocaleText('order/shipment', 'state', 'shipped') }}\n    label.label(v-if=\"props.step === stateFor('canceled')\")\n      span.tag.is-danger {{ aasmStateLocaleText('order/shipment', 'state', 'canceled') }}\n  template(#sublabel=\"props\")\n    template(v-if=\"props.step === stateFor('tallying')\")\n      span.tag.is-info.is-light\n        | {{ transitionStateFor(orderShipment.transition_state_ids[props.substep]).name }}\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue'\nimport { useStore } from 'skid-composables'\nimport KStepProgress from '@sharedComponents/common/k-step-progress.vue'\n\nconst STATE_MAP = {\n  ready: 0,\n  tallying: 1,\n  shipped: 2,\n  canceled: 3\n}\n\nconst props = defineProps({\n  orderShipment: { type: Object }\n})\n\nconst store = useStore()\n\nconst stateFor = (state) => {\n  return STATE_MAP[state]\n}\n\nconst value = computed(() => {\n  return STATE_MAP[props.orderShipment.state]\n})\n\nconst steps = computed(() => {\n  return [\n    { position: 33.33, step: stateFor('ready') },\n    {\n      position: 66.67,\n      step: stateFor('tallying'),\n      substeps: props.orderShipment.transition_state_ids.map((id, index) => {\n        const position =\n          Math.round(\n            100 / (props.orderShipment.transition_state_ids.length + 1)\n          ) *\n          (index + 1)\n\n        return {\n          step: index,\n          position: position\n        }\n      })\n    },\n\n    { position: 100, step: stateFor('shipped') },\n    { position: 100, step: stateFor('canceled') }\n  ]\n})\n\nfunction transitionStateFor(id) {\n  return store.getters['orderShipmentTransitionStates/find'](id)\n}\n</script>\n","import ResourceModelBase from 'odd-resource_model'\n\nconst OPTIONS = {\n  apiPath: '/api',\n  apiVersion: 'v1',\n  scope: 'web',\n  resourceType: 'order_shipment_transition_states',\n  attributes: ['id', 'name', 'created_at', 'updated_at'],\n  editableAttributes: ['name']\n}\n\nexport default class OrderShipmentTransitionState extends ResourceModelBase {\n  constructor(attributes = {}) {\n    super(OPTIONS, attributes)\n  }\n\n  // extra methods or helpers here...\n}\n"],"names":["COLOR_TYPE_MAP","convertedOptions","computed","props","containerClass","barWidth","step","index","childPointsStyleFor","point","nextPoint","STYLE_TYPE_MAP","IndicatorBar","component","convertedSteps","substep","subindex","STATE_MAP","store","useStore","stateFor","state","value","steps","id","position","transitionStateFor","OPTIONS","OrderShipmentTransitionState","ResourceModelBase","attributes"],"mappings":"6jDAiDMA,EAAiB,CACrB,QAAS,QACT,WAAY,UACd,EAmBMC,EAAmBC,EAAS,KACzB,CACL,oBAAqBC,EAAM,QAAQ,qBAAuB,GAC1D,uBAAwBA,EAAM,QAAQ,wBAA0B,GAChE,UAAWA,EAAM,QAAQ,WAAa,OACvC,EACF,EAEKC,EAAiBF,EAAS,IACvB,CACLD,EAAiB,MAAM,oBAAsB,sBAAwB,KACrEA,EAAiB,MAAM,uBACnB,yBACA,KACJD,EAAeC,EAAiB,MAAM,SAAS,CAChD,EACE,OAAO,OAAO,EACd,KAAK,GAAG,CACZ,EAEKI,EAAWH,EAAS,IACHC,EAAM,MAAM,KAAK,CAACG,EAAMC,IACpCJ,EAAM,QAAUI,CACxB,EAEmB,QACrB,EAED,SAASC,EAAoBC,EAAOF,EAAO,CACzC,MAAMG,EAAYP,EAAM,MAAMI,EAAQ,CAAC,EAEvC,OAAKG,EAEE,CACL,4BAA4BD,EAAM,QAAQ,KAC1CC,EACI,yBAAyBA,EAAU,SAAWD,EAAM,QAAQ,IAC5D,IACL,EACE,OAAO,OAAO,EACd,KAAK,GAAG,EATY,EAUzB,+6BClFME,EAAiB,CACrB,gBAAiBC,CACnB,EAsBMC,EAAYX,EAAS,IAClBS,EAAeR,EAAM,SAAS,CACtC,EAEKW,EAAiBZ,EAAS,IACvBC,EAAM,MAAM,IAAI,CAACG,EAAMC,KACrB,CACL,MAAOD,EAAK,MACZ,SAAUA,EAAK,SACf,KAAMA,EAAK,MAAQC,EACnB,UAAWD,EAAK,UAAY,CAAE,GAAE,IAAI,CAACS,EAASC,KACrC,CACL,MAAOD,EAAQ,MACf,SAAUA,EAAQ,SAClB,KAAMA,EAAQ,MAAQC,CACvB,EACF,CACF,EACF,CACF,++CC9CKC,EAAY,CAChB,MAAO,EACP,SAAU,EACV,QAAS,EACT,SAAU,CACZ,EAMMC,EAAQC,EAAU,EAElBC,EAAYC,GACTJ,EAAUI,CAAK,EAGlBC,EAAQpB,EAAS,IACde,EAAUd,EAAM,cAAc,KAAK,CAC3C,EAEKoB,EAAQrB,EAAS,IACd,CACL,CAAE,SAAU,MAAO,KAAMkB,EAAS,OAAO,CAAG,EAC5C,CACE,SAAU,MACV,KAAMA,EAAS,UAAU,EACzB,SAAUjB,EAAM,cAAc,qBAAqB,IAAI,CAACqB,EAAIjB,IAAU,CACpE,MAAMkB,EACJ,KAAK,MACH,KAAOtB,EAAM,cAAc,qBAAqB,OAAS,EAC1D,GACAI,EAAQ,GAEX,MAAO,CACL,KAAMA,EACN,SAAUkB,CACX,CACT,CAAO,CACF,EAED,CAAE,SAAU,IAAK,KAAML,EAAS,SAAS,CAAG,EAC5C,CAAE,SAAU,IAAK,KAAMA,EAAS,UAAU,CAAG,CAC9C,CACF,EAED,SAASM,EAAmBF,EAAI,CAC9B,OAAON,EAAM,QAAQ,oCAAoC,EAAEM,CAAE,CAC/D,gNCzEMG,EAAU,CACd,QAAS,OACT,WAAY,KACZ,MAAO,MACP,aAAc,mCACd,WAAY,CAAC,KAAM,OAAQ,aAAc,YAAY,EACrD,mBAAoB,CAAC,MAAM,CAC7B,EAEe,MAAMC,UAAqCC,CAAkB,CAC1E,YAAYC,EAAa,GAAI,CAC3B,MAAMH,EAASG,CAAU,CAC1B,CAGH"}