blue-chestnut-solar-expert 0.0.67 → 0.0.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/cjs/eraser-icon_19.cjs.entry.js +1 -1
  2. package/dist/cjs/{lerc-v64rYVDy.js → lerc-Bdx5y-yw.js} +3 -3
  3. package/dist/cjs/{lerc-v64rYVDy.js.map → lerc-Bdx5y-yw.js.map} +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/loading-widget.cjs.entry.js +1 -1
  6. package/dist/cjs/stencil-library.cjs.js +1 -1
  7. package/dist/collection/components/map-draw/map-draw.js +54 -25
  8. package/dist/collection/components/map-draw/map-draw.js.map +1 -1
  9. package/dist/collection/components/map-draw/map-selector.js +3 -3
  10. package/dist/collection/components/map-draw/polygon-buttons.js +1 -1
  11. package/dist/collection/components/map-draw/polygon-information.js +2 -2
  12. package/dist/collection/components/map-draw/tool-box.js +3 -3
  13. package/dist/collection/components/map-draw/tutorial-component.js +72 -4
  14. package/dist/collection/components/map-draw/tutorial-component.js.map +1 -1
  15. package/dist/collection/components/settings/settings.js +8 -8
  16. package/dist/collection/components/solar-expert/solar-expert.js +1 -1
  17. package/dist/collection/components/solar-system-form/solar-system-form.js +57 -36
  18. package/dist/collection/components/solar-system-form/solar-system-form.js.map +1 -1
  19. package/dist/collection/components/widgets/loading-widget.js +1 -1
  20. package/dist/collection/types/lang.js.map +1 -1
  21. package/dist/collection/utils/api.js +3 -2
  22. package/dist/collection/utils/api.js.map +1 -1
  23. package/dist/collection/utils/lang/english.js +7 -0
  24. package/dist/collection/utils/lang/english.js.map +1 -1
  25. package/dist/collection/utils/lang/german.js +7 -0
  26. package/dist/collection/utils/lang/german.js.map +1 -1
  27. package/dist/collection/utils/lang/spanish.js +7 -0
  28. package/dist/collection/utils/lang/spanish.js.map +1 -1
  29. package/dist/collection/utils/solar.js +0 -1
  30. package/dist/collection/utils/solar.js.map +1 -1
  31. package/dist/components/loading-widget.js +1 -1
  32. package/dist/components/map-draw.js +1 -1
  33. package/dist/components/map-selector.js +1 -1
  34. package/dist/components/{p-i1uLweD0.js → p-26DHwbCE.js} +4 -4
  35. package/dist/components/{p-i1uLweD0.js.map → p-26DHwbCE.js.map} +1 -1
  36. package/dist/components/{p-DlNHVTGB.js → p-BOe-Z8rz.js} +1462 -1088
  37. package/dist/components/p-BOe-Z8rz.js.map +1 -0
  38. package/dist/components/{p-Bopprtc7.js → p-Bduzzygj.js} +6 -6
  39. package/dist/components/{p-Bopprtc7.js.map → p-Bduzzygj.js.map} +1 -1
  40. package/dist/components/p-C3ZXE525.js +855 -0
  41. package/dist/components/p-C3ZXE525.js.map +1 -0
  42. package/dist/components/{p-DWirjxpO.js → p-Cx7fffWb.js} +6 -6
  43. package/dist/components/{p-DWirjxpO.js.map → p-Cx7fffWb.js.map} +1 -1
  44. package/dist/components/{p-Dzl6kfPI.js → p-D2AHNjbG.js} +39 -7
  45. package/dist/components/p-D2AHNjbG.js.map +1 -0
  46. package/dist/components/{p-BcVa4_YP.js → p-DLWzgdrw.js} +3 -3
  47. package/dist/components/{p-BcVa4_YP.js.map → p-DLWzgdrw.js.map} +1 -1
  48. package/dist/components/{p-B4X-RCW0.js → p-Ddk3b30j.js} +11 -11
  49. package/dist/components/{p-B4X-RCW0.js.map → p-Ddk3b30j.js.map} +1 -1
  50. package/dist/components/{p-eDwaXClX.js → p-DfzSejIb.js} +23 -2
  51. package/dist/components/p-DfzSejIb.js.map +1 -0
  52. package/dist/components/{p-BFJHTJPM.js → p-OxUYjaAL.js} +6 -6
  53. package/dist/components/{p-BFJHTJPM.js.map → p-OxUYjaAL.js.map} +1 -1
  54. package/dist/components/polygon-buttons.js +1 -1
  55. package/dist/components/polygon-information.js +1 -1
  56. package/dist/components/settings-modal.js +1 -1
  57. package/dist/components/solar-expert.js +10 -10
  58. package/dist/components/solar-system-form.js +1 -1
  59. package/dist/components/tool-box.js +1 -1
  60. package/dist/components/tutorial-component.js +1 -1
  61. package/dist/esm/eraser-icon_19.entry.js +1 -1
  62. package/dist/esm/{lerc-CAiDQjTu.js → lerc-DF5Lrv5A.js} +3 -3
  63. package/dist/esm/{lerc-CAiDQjTu.js.map → lerc-DF5Lrv5A.js.map} +1 -1
  64. package/dist/esm/loader.js +1 -1
  65. package/dist/esm/loading-widget.entry.js +1 -1
  66. package/dist/esm/stencil-library.js +1 -1
  67. package/dist/stencil-library/assets/tutorial4.mp4 +0 -0
  68. package/dist/stencil-library/{p-ab0f2031.entry.js → p-9b4e52c3.entry.js} +2 -2
  69. package/dist/stencil-library/p-CymYGBJH.js +2 -0
  70. package/dist/stencil-library/p-CymYGBJH.js.map +1 -0
  71. package/dist/stencil-library/{p-cAuhy_jT.js → p-DHgjDQwz.js} +4 -4
  72. package/dist/stencil-library/{p-cAuhy_jT.js.map → p-DHgjDQwz.js.map} +1 -1
  73. package/dist/stencil-library/{p-e7b94dbb.entry.js → p-ba64c5e4.entry.js} +2 -2
  74. package/dist/stencil-library/stencil-library.esm.js +1 -1
  75. package/dist/types/components/map-draw/map-draw.d.ts +5 -0
  76. package/dist/types/components/map-draw/tutorial-component.d.ts +7 -0
  77. package/dist/types/components/solar-system-form/solar-system-form.d.ts +1 -0
  78. package/dist/types/components.d.ts +6 -0
  79. package/dist/types/types/lang.d.ts +7 -0
  80. package/dist/types/utils/api.d.ts +1 -0
  81. package/package.json +1 -1
  82. package/dist/components/p-DlNHVTGB.js.map +0 -1
  83. package/dist/components/p-Dzl6kfPI.js.map +0 -1
  84. package/dist/components/p-PkMjF2if.js +0 -1985
  85. package/dist/components/p-PkMjF2if.js.map +0 -1
  86. package/dist/components/p-eDwaXClX.js.map +0 -1
  87. package/dist/stencil-library/p-BBtmpSUK.js +0 -2
  88. package/dist/stencil-library/p-BBtmpSUK.js.map +0 -1
  89. /package/dist/stencil-library/{p-ab0f2031.entry.js.map → p-9b4e52c3.entry.js.map} +0 -0
  90. /package/dist/stencil-library/{p-e7b94dbb.entry.js.map → p-ba64c5e4.entry.js.map} +0 -0
package/dist/components/{p-Dzl6kfPI.js → p-D2AHNjbG.js} RENAMED
@@ -1,7 +1,7 @@
1
1
 
2
2
  if (typeof global === "undefined") { var global = globalThis || window || self; }
3
3
  import { p as proxyCustomElement, H, h } from './index.js';
4
- import { g as getLanguageStrings, s as state } from './p-eDwaXClX.js';
4
+ import { s as state, g as getLanguageStrings } from './p-DfzSejIb.js';
5
5
 
6
6
  const outputCss = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-100: oklch(93.6% 0.032 17.717);\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-2xl: 42rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-lg: 0.5rem;\n --radius-4xl: 2rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-auto {\n margin: auto;\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-64 {\n height: calc(var(--spacing) * 64);\n }\n .h-\\[400px\\] {\n height: 400px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-full {\n max-height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .flex-1 {\n flex: 1;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-2 {\n --tw-translate-y: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-95 {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .resize {\n resize: both;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-4xl {\n border-radius: var(--radius-4xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-current {\n border-color: currentcolor;\n }\n .border-error\\/20 {\n border-color: color-mix(in srgb, hsl(0 100% 50%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-error) 20%, transparent);\n }\n }\n .border-info\\/20 {\n border-color: color-mix(in srgb, hsl(221 83% 53%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-info) 20%, transparent);\n }\n }\n .border-red-300 {\n border-color: var(--color-red-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .border-success\\/20 {\n border-color: color-mix(in srgb, hsl(142 76% 36%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-success) 20%, transparent);\n }\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-error\\/10 {\n background-color: color-mix(in srgb, hsl(0 100% 50%) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-error) 10%, transparent);\n }\n }\n .bg-error\\/90 {\n background-color: color-mix(in srgb, hsl(0 100% 50%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-error) 90%, transparent);\n }\n }\n .bg-info\\/90 {\n background-color: color-mix(in srgb, hsl(221 83% 53%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-info) 90%, transparent);\n }\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-success\\/10 {\n background-color: color-mix(in srgb, hsl(142 76% 36%) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-success) 10%, transparent);\n }\n }\n .bg-success\\/90 {\n background-color: color-mix(in srgb, hsl(142 76% 36%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-success) 90%, transparent);\n }\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-tertiary {\n background-color: var(--color-tertiary);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .object-contain {\n object-fit: contain;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-7 {\n padding-top: calc(var(--spacing) * 7);\n }\n .pr-3 {\n padding-right: calc(var(--spacing) * 3);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-3 {\n padding-left: calc(var(--spacing) * 3);\n }\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n .pl-10 {\n padding-left: calc(var(--spacing) * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-error {\n color: var(--color-error);\n }\n .text-error-foreground {\n color: var(--color-error-foreground);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-700 {\n color: var(--color-red-700);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .text-white {\n color: var(--color-white);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .hover\\:bg-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-tertiary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 29%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-tertiary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .focus\\:border-2 {\n &:focus {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n }\n .focus\\:border-secondary {\n &:focus {\n border-color: var(--color-secondary);\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .sm\\:mt-0 {\n @media (width >= 40rem) {\n margin-top: calc(var(--spacing) * 0);\n }\n }\n .sm\\:flex-3 {\n @media (width >= 40rem) {\n flex: 3;\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .sm\\:items-center {\n @media (width >= 40rem) {\n align-items: center;\n }\n }\n .sm\\:gap-4 {\n @media (width >= 40rem) {\n gap: calc(var(--spacing) * 4);\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:pl-2 {\n @media (width >= 48rem) {\n padding-left: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n &::-webkit-slider-runnable-track {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n &::-webkit-slider-runnable-track {\n background-color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n &::-webkit-slider-thumb {\n height: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n &::-webkit-slider-thumb {\n width: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n &::-webkit-slider-thumb {\n appearance: none;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n &::-webkit-slider-thumb {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n";
7
7
 
@@ -11,17 +11,25 @@ const TutorialComponent = /*@__PURE__*/ proxyCustomElement(class TutorialCompone
11
11
  this.__registerHost();
12
12
  }
13
13
  onClose;
14
+ onSkip;
15
+ showSkipButton = false;
14
16
  title;
15
17
  description;
16
18
  videoSource;
17
19
  isLoading = true;
18
20
  dotCount = 0;
21
+ isVideoPlaying = false;
19
22
  dotInterval;
20
23
  handleCloseTutorial = () => {
21
24
  if (this.onClose) {
22
25
  this.onClose();
23
26
  }
24
27
  };
28
+ handleSkipTutorial = () => {
29
+ if (this.onSkip) {
30
+ this.onSkip();
31
+ }
32
+ };
25
33
  handleVideoLoadStart = () => {
26
34
  this.isLoading = true;
27
35
  };
@@ -29,6 +37,25 @@ const TutorialComponent = /*@__PURE__*/ proxyCustomElement(class TutorialCompone
29
37
  this.isLoading = false;
30
38
  this.stopDotAnimation();
31
39
  };
40
+ handleVideoPlay = () => {
41
+ this.isVideoPlaying = true;
42
+ };
43
+ handleVideoPause = () => {
44
+ this.isVideoPlaying = false;
45
+ };
46
+ handleVideoClick = () => {
47
+ if (state.isMobile) {
48
+ const video = document.querySelector("video");
49
+ if (video) {
50
+ if (video.paused) {
51
+ video.play();
52
+ }
53
+ else {
54
+ video.pause();
55
+ }
56
+ }
57
+ }
58
+ };
32
59
  componentWillLoad() {
33
60
  this.startDotAnimation();
34
61
  }
@@ -53,20 +80,25 @@ const TutorialComponent = /*@__PURE__*/ proxyCustomElement(class TutorialCompone
53
80
  const tutorialDescription = this.description ||
54
81
  t.mapDraw.tutorial.description;
55
82
  const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
56
- return (h("div", { key: '4d8eadf62e91dedb62771ea581da55e41fef8ba6', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: 'f98a839567a9ea9fd9e4583b129904a544b5815a', class: "absolute inset-0", style: {
83
+ return (h("div", { key: '2f9134a303787f3f1bef384971812aebb664ef44', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '98d065ba7e264dfe3317defec98dda11dac51315', class: "absolute inset-0", style: {
57
84
  backgroundColor: "rgba(0, 0, 0, 0.5)",
58
- } }), h("div", { key: 'e454645b2f39aec48b001bc0347ef7043116b59a', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: '346bc5df81beb2c52ae52e8d08f91f572549ed99', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ea42d2e74d6c366f020a0278f4c2db4946f91082', class: "w-full text-center space-y-4" }, h("h2", { key: 'a333c82a5893b1ca389486b9b2406ab61bd040b3', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: '1f93f58abb1fed9576f12184cb21c7b5879f5f86', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '67a59580d90d5e1371d6077e31e283b4aa78e7b6', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '0b323406964ed2a2363d9d5eb06c8739fc49c979', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: '5d7db35fd3798ddf92e6a7d35cd69c9d1fd9ecb0', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '34d8524c3ec0a8c7ea90baa2cb0848d6ad649c21', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '9d936982efbfe0be018b29b3f14c235841847b5d', class: "w-full h-full object-contain rounded-4xl pointer-events-none", autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, style: {
85
+ } }), h("div", { key: 'cf65eb0cf7a7663fa9e199089e115117dbcf3ee7', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'df0111b1ab74a04b5141eed9f44c2a7a25c2d363', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ce343c8ce4216038e523a86ea64233177d4da27d', class: "w-full text-center space-y-4" }, h("h2", { key: 'fbedfae3afbd578e20a2b42bcafbed33636d4206', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: 'd13ab83f9278cd645a0bb03010d7c703b930ad23', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '46a5cd8d8dc850b4eeda9eaa6066d1de1bae98d2', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: 'd2ece90512af28d8fa078be7a0a9e354ce3c4cf0', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: 'd9d72623a1947f094fa60fd2fdfeaa95297b7849', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '4b18decb7ac66203d7a227d48c70ff91c9ec6824', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '19ceccc0a48869f3fc1c5b0de0a8bbf6786e5d0e', class: `w-full h-full object-contain rounded-4xl ${state.isMobile
86
+ ? "cursor-pointer"
87
+ : "pointer-events-none"}`, autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, onPlay: this.handleVideoPlay, onPause: this.handleVideoPause, onClick: this.handleVideoClick, style: {
59
88
  aspectRatio: "1/1",
60
- } }, h("source", { key: '4c7a97c3cbf02eefb40aa05da6fa0abd716fa6ab', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: 'ebad42931128c694d7ddfbd9908dc5ef27e7e649', class: "w-full flex justify-center" }, h("button", { key: 'ec11a758e0ff9bd6ae728a857d03a8bbba77bbcd', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
89
+ } }, h("source", { key: '3652b2397c4397578049cec441a50f0dcb02ad7d', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), state.isMobile && !this.isVideoPlaying && (h("div", { key: '41e7cebeb19caa36e6e89df1dc042314b069892e', class: "text-center" }, h("p", { key: '970fbbe47bec2c4beecd966179d3d8693326aa8d', class: "text-sm text-text-secondary" }, t.mapDraw.tutorial.mobileInstruction))), h("div", { key: '206ec33205f1353533edcb5598b523892ed9c80d', class: "w-full flex justify-center gap-4" }, this.showSkipButton && (h("button", { key: 'd849283abdb80d41f39d5a0b0ec5f116d9e498a5', onClick: this.handleSkipTutorial, class: "px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0" }, t.mapDraw.tutorial.obstacle.skip)), h("button", { key: 'e4fcd08b350da47dc2849eec3ff72b682d89fb83', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
61
90
  }
62
91
  static get style() { return outputCss; }
63
92
  }, [0, "tutorial-component", {
64
93
  "onClose": [16, "on-close"],
94
+ "onSkip": [16, "on-skip"],
95
+ "showSkipButton": [4, "show-skip-button"],
65
96
  "title": [1],
66
97
  "description": [1],
67
98
  "videoSource": [1, "video-source"],
68
99
  "isLoading": [32],
69
- "dotCount": [32]
100
+ "dotCount": [32],
101
+ "isVideoPlaying": [32]
70
102
  }]);
71
103
  function defineCustomElement() {
72
104
  if (typeof customElements === "undefined") {
@@ -84,6 +116,6 @@ function defineCustomElement() {
84
116
  defineCustomElement();
85
117
 
86
118
  export { TutorialComponent as T, defineCustomElement as d };
87
- //# sourceMappingURL=p-Dzl6kfPI.js.map
119
+ //# sourceMappingURL=p-D2AHNjbG.js.map
88
120
 
89
- //# sourceMappingURL=p-Dzl6kfPI.js.map
121
+ //# sourceMappingURL=p-D2AHNjbG.js.map
package/dist/components/p-D2AHNjbG.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-D2AHNjbG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/output.css?tag=tutorial-component","src/components/map-draw/tutorial-component.tsx"],"sourcesContent":["/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-100: oklch(93.6% 0.032 17.717);\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-700: oklch(50.5% 0.213 27.518);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-2xl: 42rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-lg: 0.5rem;\n --radius-4xl: 2rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-auto {\n margin: auto;\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-64 {\n height: calc(var(--spacing) * 64);\n }\n .h-\\[400px\\] {\n height: 400px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-full {\n max-height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .flex-1 {\n flex: 1;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-y-2 {\n --tw-translate-y: calc(var(--spacing) * 2);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-95 {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .scale-100 {\n --tw-scale-x: 100%;\n --tw-scale-y: 100%;\n --tw-scale-z: 100%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .resize {\n resize: both;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-4xl {\n border-radius: var(--radius-4xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-current {\n border-color: currentcolor;\n }\n .border-error\\/20 {\n border-color: color-mix(in srgb, hsl(0 100% 50%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-error) 20%, transparent);\n }\n }\n .border-info\\/20 {\n border-color: color-mix(in srgb, hsl(221 83% 53%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-info) 20%, transparent);\n }\n }\n .border-red-300 {\n border-color: var(--color-red-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .border-success\\/20 {\n border-color: color-mix(in srgb, hsl(142 76% 36%) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-success) 20%, transparent);\n }\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-error\\/10 {\n background-color: color-mix(in srgb, hsl(0 100% 50%) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-error) 10%, transparent);\n }\n }\n .bg-error\\/90 {\n background-color: color-mix(in srgb, hsl(0 100% 50%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-error) 90%, transparent);\n }\n }\n .bg-info\\/90 {\n background-color: color-mix(in srgb, hsl(221 83% 53%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-info) 90%, transparent);\n }\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-success\\/10 {\n background-color: color-mix(in srgb, hsl(142 76% 36%) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-success) 10%, transparent);\n }\n }\n .bg-success\\/90 {\n background-color: color-mix(in srgb, hsl(142 76% 36%) 90%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-success) 90%, transparent);\n }\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-tertiary {\n background-color: var(--color-tertiary);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .object-contain {\n object-fit: contain;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-7 {\n padding-top: calc(var(--spacing) * 7);\n }\n .pr-3 {\n padding-right: calc(var(--spacing) * 3);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-3 {\n padding-left: calc(var(--spacing) * 3);\n }\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n .pl-10 {\n padding-left: calc(var(--spacing) * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-error {\n color: var(--color-error);\n }\n .text-error-foreground {\n color: var(--color-error-foreground);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-700 {\n color: var(--color-red-700);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .text-white {\n color: var(--color-white);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .hover\\:bg-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-tertiary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 29%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-tertiary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .focus\\:border-2 {\n &:focus {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n }\n .focus\\:border-secondary {\n &:focus {\n border-color: var(--color-secondary);\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .sm\\:mt-0 {\n @media (width >= 40rem) {\n margin-top: calc(var(--spacing) * 0);\n }\n }\n .sm\\:flex-3 {\n @media (width >= 40rem) {\n flex: 3;\n }\n }\n .sm\\:flex-row {\n @media (width >= 40rem) {\n flex-direction: row;\n }\n }\n .sm\\:items-center {\n @media (width >= 40rem) {\n align-items: center;\n }\n }\n .sm\\:gap-4 {\n @media (width >= 40rem) {\n gap: calc(var(--spacing) * 4);\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:pl-2 {\n @media (width >= 48rem) {\n padding-left: calc(var(--spacing) * 2);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n &::-webkit-slider-runnable-track {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n &::-webkit-slider-runnable-track {\n background-color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n &::-webkit-slider-thumb {\n height: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n &::-webkit-slider-thumb {\n width: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n &::-webkit-slider-thumb {\n appearance: none;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n &::-webkit-slider-thumb {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n","import { Component, h, Prop, State } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n tag: \"tutorial-component\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n @Prop()\r\n onClose: () => void;\r\n @Prop()\r\n onSkip?: () => void;\r\n @Prop()\r\n showSkipButton?: boolean = false;\r\n @Prop()\r\n title?: string;\r\n @Prop()\r\n description?: string;\r\n @Prop()\r\n videoSource?: string;\r\n\r\n @State()\r\n private isLoading = true;\r\n @State()\r\n private dotCount = 0;\r\n @State()\r\n private isVideoPlaying = false;\r\n\r\n private dotInterval: number;\r\n\r\n private handleCloseTutorial = () => {\r\n if (this.onClose) {\r\n this.onClose();\r\n }\r\n };\r\n\r\n private handleSkipTutorial = () => {\r\n if (this.onSkip) {\r\n this.onSkip();\r\n }\r\n };\r\n\r\n private handleVideoLoadStart = () => {\r\n this.isLoading = true;\r\n };\r\n\r\n private handleVideoCanPlay = () => {\r\n this.isLoading = false;\r\n this.stopDotAnimation();\r\n };\r\n\r\n private handleVideoPlay = () => {\r\n this.isVideoPlaying = true;\r\n };\r\n\r\n private handleVideoPause = () => {\r\n this.isVideoPlaying = false;\r\n };\r\n\r\n private handleVideoClick = () => {\r\n if (state.isMobile) {\r\n const video = document.querySelector(\"video\") as HTMLVideoElement;\r\n if (video) {\r\n if (video.paused) {\r\n video.play();\r\n } else {\r\n video.pause();\r\n }\r\n }\r\n }\r\n };\r\n\r\n componentWillLoad() {\r\n this.startDotAnimation();\r\n }\r\n\r\n componentWillUnload() {\r\n this.stopDotAnimation();\r\n }\r\n\r\n private startDotAnimation() {\r\n this.dotInterval = window.setInterval(() => {\r\n this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)\r\n }, 500); // Change every 500ms\r\n }\r\n\r\n private stopDotAnimation() {\r\n if (this.dotInterval) {\r\n clearInterval(this.dotInterval);\r\n this.dotInterval = null;\r\n }\r\n }\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n\r\n // Use provided props or fall back to default values\r\n const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n const tutorialDescription = this.description ||\r\n t.mapDraw.tutorial.description;\r\n const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n return (\r\n <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n {/* Backdrop */}\r\n <div\r\n class=\"absolute inset-0\"\r\n style={{\r\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n }}\r\n />\r\n\r\n {/* Scrollable content container */}\r\n <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n {/* Title and Description */}\r\n <div class=\"w-full text-center space-y-4\">\r\n <h2 class=\"text-2xl font-bold text-secondary\">\r\n {tutorialTitle}\r\n </h2>\r\n <p class=\"text-text-secondary\">\r\n {tutorialDescription}\r\n </p>\r\n </div>\r\n\r\n {/* Tutorial Video Container */}\r\n <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n {/* Loading Spinner */}\r\n {this.isLoading && (\r\n <div class=\"absolute inset-0 flex items-center justify-center z-10\">\r\n <span class=\"text-text-secondary\">\r\n {t.mapDraw.loading}\r\n {\".\".repeat(this.dotCount)}\r\n </span>\r\n </div>\r\n )}\r\n\r\n <video\r\n class={`w-full h-full object-contain rounded-4xl ${\r\n state.isMobile\r\n ? \"cursor-pointer\"\r\n : \"pointer-events-none\"\r\n }`}\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n onLoadStart={this.handleVideoLoadStart}\r\n onCanPlay={this.handleVideoCanPlay}\r\n onPlay={this.handleVideoPlay}\r\n onPause={this.handleVideoPause}\r\n onClick={this.handleVideoClick}\r\n style={{\r\n aspectRatio: \"1/1\",\r\n }}\r\n >\r\n <source\r\n src={videoSrc}\r\n type=\"video/mp4\"\r\n />\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n\r\n {/* Mobile Instruction Text */}\r\n {state.isMobile && !this.isVideoPlaying && (\r\n <div class=\"text-center\">\r\n <p class=\"text-sm text-text-secondary\">\r\n {t.mapDraw.tutorial.mobileInstruction}\r\n </p>\r\n </div>\r\n )}\r\n\r\n {/* Close Button */}\r\n <div class=\"w-full flex justify-center gap-4\">\r\n {this.showSkipButton && (\r\n <button\r\n onClick={this.handleSkipTutorial}\r\n class=\"px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0\"\r\n >\r\n {t.mapDraw.tutorial.obstacle.skip}\r\n </button>\r\n )}\r\n <button\r\n onClick={this.handleCloseTutorial}\r\n class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n >\r\n {t.mapDraw.tutorial.understood}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
package/dist/components/{p-BcVa4_YP.js → p-DLWzgdrw.js} RENAMED
@@ -1,7 +1,7 @@
1
1
 
2
2
  if (typeof global === "undefined") { var global = globalThis || window || self; }
3
3
  import { i as inflate_1 } from './p-B5WTRCh8.js';
4
- import { g as global, L as LercParameters, a as LercAddCompression } from './p-DlNHVTGB.js';
4
+ import { g as global, L as LercParameters, a as LercAddCompression } from './p-BOe-Z8rz.js';
5
5
  import { B as BaseDecoder } from './p-j-vOrhhh.js';
6
6
 
7
7
  var lookup = [];
@@ -4418,6 +4418,6 @@ class LercDecoder extends BaseDecoder {
4418
4418
  }
4419
4419
 
4420
4420
  export { LercDecoder as default, zstd };
4421
- //# sourceMappingURL=p-BcVa4_YP.js.map
4421
+ //# sourceMappingURL=p-DLWzgdrw.js.map
4422
4422
 
4423
- //# sourceMappingURL=p-BcVa4_YP.js.map
4423
+ //# sourceMappingURL=p-DLWzgdrw.js.map