{"version":3,"file":"ToolbarButton.vue_vue_type_script_setup_true_lang-Co9VzHDj.js","sources":["../../Vue/src/components/SheetMusic/Toolbar/ToolbarButtonDropdownHeader.vue","../../Vue/src/components/SheetMusic/Toolbar/ToolbarButtonDropdownItem.vue","../../Vue/src/stores/FullScreenStore.ts","../../Vue/src/components/SheetMusic/Toolbar/ToolbarButtonDropdown.vue","../../Vue/src/components/SheetMusic/Toolbar/ToolbarButton.vue"],"sourcesContent":["<script lang=\"ts\" setup></script>\r\n\r\n<template>\r\n  <li>\r\n    <div class=\"dropdown-header\"><slot></slot></div>\r\n  </li>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.dropdown-header {\r\n  @apply pointer-events-none px-1 py-1 text-gray-700 font-bold text-xs;\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\ndefineProps<{\r\n  id?: string;\r\n  icon?: string;\r\n  active?: boolean;\r\n  disabled?: boolean;\r\n}>();\r\nconst emit = defineEmits<{\r\n  (e: \"click\", event: Event): void;\r\n}>();\r\n\r\nfunction onClick(e: Event) {\r\n  emit(\"click\", e);\r\n}\r\nconst textDiv = ref<HTMLDivElement>();\r\n</script>\r\n\r\n<template>\r\n  <li class=\"flex w-full flex-row flex-nowrap items-center justify-between\">\r\n    <button\r\n      :id=\"id\"\r\n      :class=\"{ active: active, disabled: disabled }\"\r\n      type=\"button\"\r\n      class=\"dropdown-item toolbar-button-dropdown-item flex-1\"\r\n      @click=\"onClick\"\r\n    >\r\n      <FAIcon\r\n        v-if=\"icon\"\r\n        :class=\"`fa-light ${icon} fa-fw`\"\r\n      />\r\n      <div\r\n        ref=\"textDiv\"\r\n        class=\"text\"\r\n        :title=\"textDiv?.innerText\"\r\n      >\r\n        <slot />\r\n      </div>\r\n      <FAIcon\r\n        v-if=\"active\"\r\n        class=\"fa-light fa-check fa-fw ml-auto\"\r\n      />\r\n    </button>\r\n    <slot\r\n      v-if=\"!disabled\"\r\n      name=\"end\"\r\n    >\r\n    </slot>\r\n  </li>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n/* .active-toolbar-button {\r\n   @apply bg-primary text-white whitespace-nowrap;\r\n }*/\r\n.text {\r\n  @apply line-clamp-1;\r\n}\r\n.dropdown-item {\r\n  i,\r\n  svg {\r\n    @apply text-primary;\r\n  }\r\n}\r\n</style>\r\n","import { WatchHandle } from \"vue\";\r\n\r\nexport const useFullScreenStore = defineStore(\"full-screen\", () => {\r\n  let elementRef: Element | null = null;\r\n  const fullScreenEnabled = ref(false);\r\n  const { t } = useI18n();\r\n  const manualFullScreenEnabled = ref(false);\r\n  const mockFullScreenElement = ref<HTMLElement | null>(null);\r\n  let mockFullScreenEnabledParent: HTMLElement | null = null;\r\n  let mockFullScreenEnabledNextSibling: HTMLElement | null = null;\r\n\r\n  function onFullScreenChange() {\r\n    const fullscreenElement =\r\n      document.fullscreenElement ||\r\n      (document as any).mozFullScreenElement ||\r\n      (document as any).webkitFullscreenElement ||\r\n      (document as any).msFullscreenElement ||\r\n      manualFullScreenEnabled.value ||\r\n      mockFullScreenElement.value ||\r\n      null;\r\n\r\n    fullScreenEnabled.value = fullscreenElement != null;\r\n  }\r\n\r\n  document.addEventListener(\"fullscreenchange\", onFullScreenChange);\r\n  document.addEventListener(\"webkitfullscreenchange\", onFullScreenChange);\r\n  watch(mockFullScreenElement, onFullScreenChange);\r\n\r\n  async function setElement(element: Element) {\r\n    elementRef = element;\r\n  }\r\n\r\n  async function exitFullScreen() {\r\n    if (mockFullScreenElement.value) {\r\n      exitMockFullScreen();\r\n      return;\r\n    }\r\n    try {\r\n      if (document.exitFullscreen) {\r\n        await document.exitFullscreen();\r\n      } else if ((document as any).webkitExitFullscreen) {\r\n        await (document as any).webkitExitFullscreen();\r\n      } else {\r\n        manualFullScreenEnabled.value = false;\r\n        fullScreenEnabled.value = false;\r\n      }\r\n    } catch (err) {\r\n      if (\r\n        !(err as Error).message\r\n          .toLowerCase()\r\n          .includes(\"pending operation cancelled by\")\r\n      ) {\r\n        throw err;\r\n      }\r\n    }\r\n  }\r\n\r\n  const { escape } = useMagicKeys();\r\n  let watchEscapeHandle: WatchHandle | null = null;\r\n\r\n  function enterMockFullScreen(e: HTMLElement) {\r\n    mockFullScreenElement.value = e;\r\n    mockFullScreenEnabledParent = e.parentElement;\r\n    mockFullScreenEnabledNextSibling = (e.nextSibling as HTMLElement) || null;\r\n    document.body.appendChild(e);\r\n    e.classList.add(\"mock-full-screen\");\r\n\r\n    watchEscapeHandle = watch(escape, exitMockFullScreen);\r\n  }\r\n\r\n  function exitMockFullScreen() {\r\n    if (!mockFullScreenElement.value) {\r\n      return;\r\n    }\r\n    if (watchEscapeHandle) {\r\n      watchEscapeHandle();\r\n      watchEscapeHandle = null;\r\n    }\r\n    mockFullScreenElement.value.classList.remove(\"mock-full-screen\");\r\n    mockFullScreenElement.value = null;\r\n    if (mockFullScreenEnabledParent && mockFullScreenEnabledNextSibling) {\r\n      mockFullScreenEnabledParent.insertBefore(\r\n        elementRef as HTMLElement,\r\n        mockFullScreenEnabledNextSibling,\r\n      );\r\n    } else if (mockFullScreenEnabledParent) {\r\n      mockFullScreenEnabledParent.appendChild(elementRef as HTMLElement);\r\n    }\r\n  }\r\n\r\n  async function enterFullScreen(e: Event) {\r\n    if (!elementRef) {\r\n      return;\r\n    }\r\n\r\n    try {\r\n      if (elementRef.requestFullscreen) {\r\n        await elementRef.requestFullscreen();\r\n      } else if ((elementRef as any).webkitRequestFullscreen) {\r\n        /* Safari */\r\n        await (elementRef as any).webkitRequestFullscreen();\r\n      } else if ((elementRef as any).msRequestFullscreen) {\r\n        /* IE11 */\r\n        await (elementRef as any)?.msRequestFullscreen();\r\n      } else {\r\n        enterMockFullScreen(elementRef as HTMLElement);\r\n        // throw new Error(\"Error in going to full screen\");\r\n      }\r\n    } catch (e) {\r\n      //toast.errorToast(t(\"SV.MES_FullScreenError\"));\r\n      console.error(\"Error in going to full screen\", e);\r\n      enterMockFullScreen(elementRef as HTMLElement);\r\n      //throw e;\r\n    }\r\n  }\r\n\r\n  return {\r\n    fullScreenEnabled,\r\n    enterFullScreen,\r\n    exitFullScreen,\r\n    setElement,\r\n    manualFullScreenEnabled,\r\n  };\r\n});\r\n","<script setup lang=\"ts\">\r\nimport Dropdown from \"@/components/Dropdown/Dropdown.vue\";\r\n\r\nconst props = defineProps<{\r\n  id?: string;\r\n  icon?: string;\r\n  icons?: string[];\r\n  active?: boolean;\r\n  showLabel?: boolean;\r\n  label: string;\r\n  showBusy?: boolean;\r\n  htmlOnly?: boolean;\r\n  disabled?: boolean;\r\n  outsideAutoClose?: boolean;\r\n  placement?:\r\n    | \"top-end\"\r\n    | \"top-start\"\r\n    | \"top\"\r\n    | \"bottom-end\"\r\n    | \"bottom-start\"\r\n    | \"bottom\";\r\n  disableContentAutoClose?: boolean;\r\n  forcedContentWidth?: string;\r\n  disableCaret?: boolean;\r\n}>();\r\n\r\nconst fs = useFullScreenStore();\r\n\r\nconst iconClasses = computed(() => {\r\n  let classes = props.showBusy ? \"fa-spin fa-spinner-third\" : props.icon;\r\n\r\n  if (!props.icon && !props.showBusy) {\r\n    return \"\";\r\n  }\r\n\r\n  if (!props.icon?.includes(\"fa-kit\")) {\r\n    classes += \" fa-light\";\r\n  }\r\n  return classes;\r\n});\r\ndefineEmits<{\r\n  (e: \"open\"): void;\r\n  (e: \"close\"): void;\r\n}>();\r\n\r\nconst dropdown = ref<InstanceType<typeof Dropdown>>();\r\n\r\ndefineExpose({\r\n  dropdown,\r\n});\r\n</script>\r\n\r\n<template>\r\n  <Dropdown\r\n    ref=\"dropdown\"\r\n    class=\"toolbar-button-dropdown inline\"\r\n    :disabled=\"disabled || showBusy\"\r\n    :title=\"label\"\r\n    :disable-content-dropdown-toggle=\"disableContentAutoClose\"\r\n    :class=\"{ active: active }\"\r\n    :forced-content-width=\"forcedContentWidth\"\r\n    :placement=\"placement\"\r\n    :disable-teleport=\"fs.fullScreenEnabled\"\r\n    @open=\"$emit('open')\"\r\n    @close=\"$emit('close')\"\r\n  >\r\n    <template #btn-label>\r\n      <FAIcon\r\n        v-if=\"iconClasses\"\r\n        :class=\"iconClasses\"\r\n        class=\"fa-fw btn-icon\"\r\n      />\r\n\r\n      <template v-else>\r\n        <FAIcon\r\n          v-for=\"i of icons\"\r\n          :key=\"i\"\r\n          :class=\"`fa-light ${i}`\"\r\n        />\r\n      </template>\r\n\r\n      <span\r\n        v-if=\"showLabel\"\r\n        class=\"btn-label\"\r\n        >{{ label }}</span\r\n      >\r\n\r\n      <slot name=\"label\" />\r\n      <FAIcon\r\n        v-if=\"!disableCaret\"\r\n        class=\"fa-solid fa-caret-down caret-icon\"\r\n      />\r\n    </template>\r\n    <slot />\r\n  </Dropdown>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n:deep {\r\n  .btn {\r\n    @apply min-h-fit flex-nowrap gap-1 whitespace-nowrap rounded border-none bg-transparent px-2 py-3 text-gray-500 shadow-none;\r\n    font-size: 1.25em;\r\n    font-weight: 400;\r\n    text-transform: unset;\r\n  }\r\n}\r\n.caret-icon {\r\n  font-size: 0.55em;\r\n  @apply text-primary;\r\n}\r\n.btn-label {\r\n  @apply max-md:hidden;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst song = useSongStore();\r\nconst props = defineProps<{\r\n  id?: string;\r\n  icon: string;\r\n  active?: boolean;\r\n  showLabel?: boolean;\r\n  label: string;\r\n  showBusy?: boolean;\r\n  disabled?: boolean;\r\n}>();\r\n\r\nconst iconClasses = computed(() => {\r\n  let classes = props.showBusy ? \"fa-spin fa-spinner-third\" : props.icon;\r\n\r\n  classes += \" fa-fw fa-light\";\r\n  return classes;\r\n});\r\n</script>\r\n\r\n<template>\r\n  <button\r\n    :id=\"id\"\r\n    type=\"button\"\r\n    :class=\"{ active: active || showBusy }\"\r\n    :title=\"label\"\r\n    class=\"toolbar-button\"\r\n    :disabled=\"disabled || showBusy\"\r\n  >\r\n    <FAIcon\r\n      :class=\"iconClasses\"\r\n      class=\"fa-fw\"\r\n    />\r\n    <span v-if=\"showLabel\">{{ label }}</span>\r\n  </button>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n"],"names":["_cache","_openBlock","_createElementBlock","_hoisted_1","emit","__emit","onClick","e","textDiv","ref","useFullScreenStore","defineStore","elementRef","fullScreenEnabled","useI18n","manualFullScreenEnabled","mockFullScreenElement","mockFullScreenEnabledParent","mockFullScreenEnabledNextSibling","onFullScreenChange","fullscreenElement","watch","setElement","element","exitFullScreen","exitMockFullScreen","err","escape","useMagicKeys","watchEscapeHandle","enterMockFullScreen","enterFullScreen","props","__props","fs","iconClasses","computed","classes","_a","dropdown","__expose","useSongStore"],"mappings":"0WAKOA,EAAA,CADH,OAAAC,EAAA,EAAgDC,EAAA,KAAA,KAAA,GAAN,MAAAC,EAAA,kVCG9C,MAAMC,EAAOC,EAIb,SAASC,EAAQC,EAAU,CACzBH,EAAK,QAASG,CAAC,CACjB,CACA,MAAMC,EAAUC,wmBCZHC,EAAqBC,EAAY,cAAe,IAAM,CACjE,IAAIC,EAA6B,KAC3B,MAAAC,EAAoBJ,EAAI,EAAK,EACrBK,UAAQ,EAChB,MAAAC,EAA0BN,EAAI,EAAK,EACnCO,EAAwBP,EAAwB,IAAI,EAC1D,IAAIQ,EAAkD,KAClDC,EAAuD,KAE3D,SAASC,GAAqB,CAC5B,MAAMC,EACJ,SAAS,mBACR,SAAiB,sBACjB,SAAiB,yBACjB,SAAiB,qBAClBL,EAAwB,OACxBC,EAAsB,OACtB,KAEFH,EAAkB,MAAQO,GAAqB,IACjD,CAES,SAAA,iBAAiB,mBAAoBD,CAAkB,EACvD,SAAA,iBAAiB,yBAA0BA,CAAkB,EACtEE,EAAML,EAAuBG,CAAkB,EAE/C,eAAeG,EAAWC,EAAkB,CAC7BX,EAAAW,CACf,CAEA,eAAeC,GAAiB,CAC9B,GAAIR,EAAsB,MAAO,CACZS,IACnB,MACF,CACI,GAAA,CACE,SAAS,eACX,MAAM,SAAS,iBACL,SAAiB,qBAC3B,MAAO,SAAiB,wBAExBV,EAAwB,MAAQ,GAChCF,EAAkB,MAAQ,UAErBa,EAAK,CACZ,GACE,CAAEA,EAAc,QACb,cACA,SAAS,gCAAgC,EAEtC,MAAAA,CAEV,CACF,CAEM,KAAA,CAAE,OAAAC,GAAWC,IACnB,IAAIC,EAAwC,KAE5C,SAASC,EAAoBvB,EAAgB,CAC3CS,EAAsB,MAAQT,EAC9BU,EAA8BV,EAAE,cAChCW,EAAoCX,EAAE,aAA+B,KAC5D,SAAA,KAAK,YAAYA,CAAC,EACzBA,EAAA,UAAU,IAAI,kBAAkB,EAEdsB,EAAAR,EAAMM,EAAQF,CAAkB,CACtD,CAEA,SAASA,GAAqB,CACvBT,EAAsB,QAGvBa,IACgBA,IACEA,EAAA,MAEAb,EAAA,MAAM,UAAU,OAAO,kBAAkB,EAC/DA,EAAsB,MAAQ,KAC1BC,GAA+BC,EACLD,EAAA,aAC1BL,EACAM,CAAA,EAEOD,GACTA,EAA4B,YAAYL,CAAyB,EAErE,CAEA,eAAemB,EAAgBxB,EAAU,CACvC,GAAKK,EAID,GAAA,CACEA,EAAW,kBACb,MAAMA,EAAW,oBACPA,EAAmB,wBAE7B,MAAOA,EAAmB,0BAChBA,EAAmB,oBAE7B,MAAOA,GAAA,YAAAA,EAAoB,uBAE3BkB,EAAoBlB,CAAyB,QAGxCL,EAAG,CAEF,QAAA,MAAM,gCAAiCA,CAAC,EAChDuB,EAAoBlB,CAAyB,CAE/C,CACF,CAEO,MAAA,CACL,kBAAAC,EACA,gBAAAkB,EACA,eAAAP,EACA,WAAAF,EACA,wBAAAP,CAAA,CAEJ,CAAC,kZCxHD,MAAMiB,EAAQC,EAuBRC,EAAKxB,IAELyB,EAAcC,EAAS,IAAM,OACjC,IAAIC,EAAUL,EAAM,SAAW,2BAA6BA,EAAM,KAElE,MAAI,CAACA,EAAM,MAAQ,CAACA,EAAM,SACjB,KAGJM,EAAAN,EAAM,OAAN,MAAAM,EAAY,SAAS,YACbD,GAAA,aAENA,EAAA,CACR,EAMKE,EAAW9B,IAEJ,OAAA+B,EAAA,CACX,SAAAD,CAAA,CACD,+rCChDYE,EAAa,EAC1B,MAAMT,EAAQC,EAURE,EAAcC,EAAS,IAAM,CACjC,IAAIC,EAAUL,EAAM,SAAW,2BAA6BA,EAAM,KAEvD,OAAAK,GAAA,kBACJA,CAAA,CACR"}