{"version":3,"file":"ClassicSelect-BaY2yvwP.mjs","names":[],"sources":["../src/components/form/ClassicSelect.vue","../src/components/form/ClassicSelect.vue"],"sourcesContent":["<template>\n  <div class=\"classic-select\" :class=\"{ 'form-margin': displayLabel }\">\n    <label v-show=\"displayLabel\" :for=\"idSelect\" :class=\"classLabel\">\n      {{ label }}\n      <AsteriskIcon v-if=\"displayRequired\" :size=\"10\" class=\"ms-1 mb-2\" :title=\"t('Mandatory input')\"/>\n      <slot name=\"after-label\" />\n    </label>\n\n    <select\n      :id=\"idSelect\"\n      :value=\"textInit\"\n      :disabled=\"isDisabled\"\n      class=\"c-hand w-100\"\n      :class=\"transparent ? 'transparent' : ''\"\n      :style=\"getFontFamily\"\n      :aria-label=\"label\"\n      :required=\"displayRequired\"\n      @change=\"onChange($event.target.value)\"\n    >\n      <option\n        v-if=\"placeholder\"\n        value=\"\"\n        disabled\n        selected\n      >\n        {{ placeholder }}\n      </option>\n      <option\n        v-for=\"option in optionsOrder\"\n        :key=\"option.title\"\n        :value=\"option.value\"\n        :data-selenium=\"'select-option-' + option.value\"\n        :style=\"option.fontFamily ? 'font-family:' + option.fontFamily : ''\"\n      >\n        <slot name=\"option\" :option=\"option\">\n          {{ option.title }}\n        </slot>\n      </option>\n    </select>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\nexport interface SelectOption<T = number|string|undefined> {\n  title: string;\n  value: T;\n  fontFamily?: string;\n}\n\n//Props \nconst props = defineProps({\n  idSelect: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  displayLabel: { default: true, type: Boolean },\n  transparent: { default: false, type: Boolean },\n  isDisabled: { default: false, type: Boolean },\n  options: {\n    default: () => [],\n    type: Array as () => Array<SelectOption>,\n  },\n  /** Option displayed at the top of list */\n  topOption: { default: undefined,type: Object as () => SelectOption },\n  textInit: { default: undefined, type: [String, Number] },\n  classLabel: { default: \"form-label\", type: String },\n  orderOptions: { default: true, type: Boolean},\n  placeholder: { default: undefined, type: String},\n  displayRequired: { default: false, type: Boolean },\n})\n\n\n//Emits\nconst emit = defineEmits([\"update:textInit\"]);\n\n//Composables\nconst { t } = useI18n();\n\n\n//Computed\nconst getFontFamily = computed(() => {\n  const item = props.options.find((x) => {\n    return props.textInit === x.value;\n  });\n  if (item?.fontFamily) {\n    return \"font-family:\" + item.fontFamily;\n  }\n  return \"\";\n});\nconst optionsOrder = computed(() => {\n  const optionsOrdered = Array.from(props.options);\n  if(props.orderOptions){\n    optionsOrdered.sort((a,b) => {\n      if(a.title > b.title){\n        return 1;\n      }\n      return (b.title > a.title) ? -1 : 0\n  }); \n  }\n  if(props.topOption){\n    optionsOrdered.unshift(props.topOption);\n  }\n  return optionsOrdered;\n});\n\n//Methods\nfunction onChange(value:string){\n  emit('update:textInit', value)\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  select option:is(:checked, :hover){\n    box-shadow: 0 0 10px 100px var(--octopus-secondary) inset;\n  }\n\n  select:focus > option:checked {\n    background: var(--octopus-secondary) !important;\n  }\n\n  select.transparent {\n    background: transparent !important;\n    outline-color: transparent !important;\n    padding: 0;\n    border: 0;\n    height: unset;\n    appearance: auto !important;\n  }\n}\n</style>\n","<template>\n  <div class=\"classic-select\" :class=\"{ 'form-margin': displayLabel }\">\n    <label v-show=\"displayLabel\" :for=\"idSelect\" :class=\"classLabel\">\n      {{ label }}\n      <AsteriskIcon v-if=\"displayRequired\" :size=\"10\" class=\"ms-1 mb-2\" :title=\"t('Mandatory input')\"/>\n      <slot name=\"after-label\" />\n    </label>\n\n    <select\n      :id=\"idSelect\"\n      :value=\"textInit\"\n      :disabled=\"isDisabled\"\n      class=\"c-hand w-100\"\n      :class=\"transparent ? 'transparent' : ''\"\n      :style=\"getFontFamily\"\n      :aria-label=\"label\"\n      :required=\"displayRequired\"\n      @change=\"onChange($event.target.value)\"\n    >\n      <option\n        v-if=\"placeholder\"\n        value=\"\"\n        disabled\n        selected\n      >\n        {{ placeholder }}\n      </option>\n      <option\n        v-for=\"option in optionsOrder\"\n        :key=\"option.title\"\n        :value=\"option.value\"\n        :data-selenium=\"'select-option-' + option.value\"\n        :style=\"option.fontFamily ? 'font-family:' + option.fontFamily : ''\"\n      >\n        <slot name=\"option\" :option=\"option\">\n          {{ option.title }}\n        </slot>\n      </option>\n    </select>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\nexport interface SelectOption<T = number|string|undefined> {\n  title: string;\n  value: T;\n  fontFamily?: string;\n}\n\n//Props \nconst props = defineProps({\n  idSelect: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  displayLabel: { default: true, type: Boolean },\n  transparent: { default: false, type: Boolean },\n  isDisabled: { default: false, type: Boolean },\n  options: {\n    default: () => [],\n    type: Array as () => Array<SelectOption>,\n  },\n  /** Option displayed at the top of list */\n  topOption: { default: undefined,type: Object as () => SelectOption },\n  textInit: { default: undefined, type: [String, Number] },\n  classLabel: { default: \"form-label\", type: String },\n  orderOptions: { default: true, type: Boolean},\n  placeholder: { default: undefined, type: String},\n  displayRequired: { default: false, type: Boolean },\n})\n\n\n//Emits\nconst emit = defineEmits([\"update:textInit\"]);\n\n//Composables\nconst { t } = useI18n();\n\n\n//Computed\nconst getFontFamily = computed(() => {\n  const item = props.options.find((x) => {\n    return props.textInit === x.value;\n  });\n  if (item?.fontFamily) {\n    return \"font-family:\" + item.fontFamily;\n  }\n  return \"\";\n});\nconst optionsOrder = computed(() => {\n  const optionsOrdered = Array.from(props.options);\n  if(props.orderOptions){\n    optionsOrdered.sort((a,b) => {\n      if(a.title > b.title){\n        return 1;\n      }\n      return (b.title > a.title) ? -1 : 0\n  }); \n  }\n  if(props.topOption){\n    optionsOrdered.unshift(props.topOption);\n  }\n  return optionsOrdered;\n});\n\n//Methods\nfunction onChange(value:string){\n  emit('update:textInit', value)\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  select option:is(:checked, :hover){\n    box-shadow: 0 0 10px 100px var(--octopus-secondary) inset;\n  }\n\n  select:focus > option:checked {\n    background: var(--octopus-secondary) !important;\n  }\n\n  select.transparent {\n    background: transparent !important;\n    outline-color: transparent !important;\n    padding: 0;\n    border: 0;\n    height: unset;\n    appearance: auto !important;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,QAAQ;EAqBd,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAItB,MAAM,gBAAgB,eAAe;GACnC,MAAM,OAAO,MAAM,QAAQ,MAAM,MAAM;IACrC,OAAO,MAAM,aAAa,EAAE;GAC9B,CAAC;GACD,IAAI,MAAM,YACR,OAAO,iBAAiB,KAAK;GAE/B,OAAO;EACT,CAAC;EACD,MAAM,eAAe,eAAe;GAClC,MAAM,iBAAiB,MAAM,KAAK,MAAM,OAAO;GAC/C,IAAG,MAAM,cACP,eAAe,MAAM,GAAE,MAAM;IAC3B,IAAG,EAAE,QAAQ,EAAE,OACb,OAAO;IAET,OAAQ,EAAE,QAAQ,EAAE,QAAS,KAAK;GACtC,CAAC;GAED,IAAG,MAAM,WACP,eAAe,QAAQ,MAAM,SAAS;GAExC,OAAO;EACT,CAAC;EAGD,SAAS,SAAS,OAAa;GAC7B,KAAK,mBAAmB,KAAK;EAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CCzFQ,OAAM;CACN,UAAA;CACA,UAAA;;;;qBAtBN,mBAsCM,OAAA,EAtCD,OAAK,eAAA,CAAC,kBAAgB,EAAA,eAA0B,OAAA,aAAY,CAAA,CAAA,EAAA,GAAA,CAAA,eAC/D,mBAIQ,SAAA;EAJsB,KAAK,OAAA;EAAW,OAAK,eAAE,OAAA,UAAU;;kCAC1D,OAAA,KAAK,IAAG,KACX,CAAA;EAAoB,OAAA,mBAAA,UAAA,GAApB,YAAiG,OAAA,iBAAA;;GAA3D,MAAM;GAAI,OAAM;GAAa,OAAO,OAAA,EAAC,iBAAA;;EAC3E,WAA2B,KAAA,QAAA,aAAA;8BAHd,OAAA,YAAY,CAAA,CAAA,GAM3B,mBA8BS,UAAA;EA7BN,IAAI,OAAA;EACJ,OAAO,OAAA;EACP,UAAU,OAAA;EACX,OAAK,eAAA,CAAC,gBACE,OAAA,cAAW,gBAAA,EAAA,CAAA;EAClB,OAAK,eAAE,OAAA,aAAa;EACpB,cAAY,OAAA;EACZ,UAAU,OAAA;EACV,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,SAAS,OAAO,OAAO,KAAK;KAG7B,OAAA,eAAA,UAAA,GADR,mBAOS,UAPT,YAOS,gBADJ,OAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,IAAA,UAAA,IAAA,GAEhB,mBAUS,UAAA,MAAA,WATU,OAAA,eAAV,WAAM;sBADf,mBAUS,UAAA;GARN,KAAK,OAAO;GACZ,OAAO,OAAO;GACd,iBAAa,mBAAqB,OAAO;GACzC,OAAK,eAAE,OAAO,aAAU,iBAAoB,OAAO,aAAU,EAAA;MAE9D,WAEO,KAAA,QAAA,UAAA,EAFsB,OAAM,SAE5B,CAAA,gBAAA,gBADF,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}