@reuters-graphics/graphics-components 3.0.12 → 3.0.13

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/annotation2.svelte

@@ -0,0 +1,402 @@
+<script>
+  // @ts-ignore img
+  import chartXs from '../imgs/annotation2-xs.png';
+  // @ts-ignore img
+  import chartSm from '../imgs/annotation2-sm.png';
+  // @ts-ignore img
+  import chartMd from '../imgs/annotation2-md.png';
+  // @ts{width}mg
+  import chartLg from '../imgs/annotation2-md.png';
+  // @ts-ignore img
+  import chartXl from '../imgs/annotation2-xl.png';
+
+  let width = null;
+</script>
+
+<div id="g-annotation2-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-annotation2-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 187.8788% 0;"></div>
+      <div
+        id="g-annotation2-xs-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXs});`}
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:9.0284%;margin-top:-41px;left:17.9779%;width:219px;"
+      >
+        <p class="g-pstyle0">The wave at Teahupo'o is</p>
+        <p class="g-pstyle0">known to be very heavy</p>
+        <p class="g-pstyle0">with a thick lip that can</p>
+        <p class="g-pstyle0">easily knock a surfer off the</p>
+        <p class="g-pstyle0">wave and onto the reef below</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:68.8671%;margin-top:-25px;left:12.9181%;width:144px;"
+      >
+        <p class="g-pstyle0">Surfer speed is up</p>
+        <p class="g-pstyle0">to 35 km per hour</p>
+        <p class="g-pstyle0">(20 mph)</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:68.8671%;margin-top:-25px;left:62.8912%;width:149px;"
+      >
+        <p class="g-pstyle0">One cubic meter</p>
+        <p class="g-pstyle0">of water weighs</p>
+        <p class="g-pstyle0">1,000 kg. (2,200 lb)</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-text g-aiAbs"
+        style="top:78.7097%;left:17.9779%;width:59.0909%;"
+      >
+        <p>
+          A surfer will adjust speed to stay in the tube by dragging a hand to
+          slow, or pumping the board to speed up
+        </p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-annotation2-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 56.2745% 0;"></div>
+      <div
+        id="g-annotation2-sm-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartSm});`}
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-annotation2-md" class="g-artboard" style="">
+      <div style="padding: 0 0 56.3636% 0;"></div>
+      <div
+        id="g-annotation2-md-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartMd});`}
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:23.9183%;margin-top:-41px;left:67.1629%;width:219px;"
+      >
+        <p class="g-pstyle0">The wave at Teahupo'o is</p>
+        <p class="g-pstyle0">known to be very heavy</p>
+        <p class="g-pstyle0">with a thick lip that can</p>
+        <p class="g-pstyle0">easily knock a surfer off the</p>
+        <p class="g-pstyle0">wave and onto the reef below</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:65.585%;margin-top:-17px;left:51.2917%;width:189px;"
+      >
+        <p class="g-pstyle0">Surfer speed is up to</p>
+        <p class="g-pstyle0">35 km per hour (20 mph)</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:74.4559%;margin-top:-25px;left:5.9007%;width:263px;"
+      >
+        <p class="g-pstyle0">A surfer will adjust speed to stay in</p>
+        <p class="g-pstyle0">the tube by dragging a hand to slow,</p>
+        <p class="g-pstyle0">or pumping the board to speed up</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:79.5635%;margin-top:-17px;left:70.1381%;width:199px;"
+      >
+        <p class="g-pstyle0">One cubic meter of water</p>
+        <p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-annotation2-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 56.0215% 0;"></div>
+      <div
+        id="g-annotation2-lg-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartLg});`}
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:22.7846%;margin-top:-47.7px;left:73.261%;width:219px;"
+      >
+        <p class="g-pstyle0">The wave at Teahupo'o is</p>
+        <p class="g-pstyle0">known to be very heavy</p>
+        <p class="g-pstyle0">with a thick lip that can</p>
+        <p class="g-pstyle0">easily knock a surfer off the</p>
+        <p class="g-pstyle0">wave and onto the reef below</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:22.7846%;margin-top:-47.7px;left:73.261%;width:219px;"
+      >
+        <p class="g-pstyle0">The wave at Teahupo'o is</p>
+        <p class="g-pstyle0">known to be very heavy</p>
+        <p class="g-pstyle0">with a thick lip that can</p>
+        <p class="g-pstyle0">easily knock a surfer off the</p>
+        <p class="g-pstyle0">wave and onto the reef below</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:61.187%;margin-top:-19.8px;left:54.1451%;width:189px;"
+      >
+        <p class="g-pstyle0">Surfer speed is up to</p>
+        <p class="g-pstyle0">35 km per hour (20 mph)</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:61.187%;margin-top:-19.8px;left:54.1451%;width:189px;"
+      >
+        <p class="g-pstyle0">Surfer speed is up to</p>
+        <p class="g-pstyle0">35 km per hour (20 mph)</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:72.3786%;margin-top:-29.1px;left:22.2898%;width:263px;"
+      >
+        <p class="g-pstyle0">A surfer will adjust speed to stay in</p>
+        <p class="g-pstyle0">the tube by dragging a hand to slow,</p>
+        <p class="g-pstyle0">or pumping the board to speed up</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:72.3786%;margin-top:-29.1px;left:22.2898%;width:263px;"
+      >
+        <p class="g-pstyle0">A surfer will adjust speed to stay in</p>
+        <p class="g-pstyle0">the tube by dragging a hand to slow,</p>
+        <p class="g-pstyle0">or pumping the board to speed up</p>
+      </div>
+      <div
+        id="g-ai3-7"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:79.6131%;margin-top:-19.8px;left:76.246%;width:199px;"
+      >
+        <p class="g-pstyle0">One cubic meter of water</p>
+        <p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
+      </div>
+      <div
+        id="g-ai3-8"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:79.6131%;margin-top:-19.8px;left:76.246%;width:199px;"
+      >
+        <p class="g-pstyle0">One cubic meter of water</p>
+        <p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1200}
+    <div id="g-annotation2-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 51.6667% 0;"></div>
+      <div
+        id="g-annotation2-xl-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXl});`}
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:23.2613%;margin-top:-61.2px;left:79.2253%;width:268px;"
+      >
+        <p class="g-pstyle0">The wave at Teahupo'o is</p>
+        <p class="g-pstyle0">known to be very heavy</p>
+        <p class="g-pstyle0">with a thick lip that can</p>
+        <p class="g-pstyle0">easily knock a surfer off the</p>
+        <p class="g-pstyle0">wave and onto the reef below</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:65.3581%;margin-top:-25.2px;left:54.3241%;width:230px;"
+      >
+        <p class="g-pstyle0">Surfer speed is up to</p>
+        <p class="g-pstyle0">35 km per hour (20 mph)</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:76.3258%;margin-top:-37.2px;left:22.0662%;width:323px;"
+      >
+        <p class="g-pstyle0">A surfer will adjust speed to stay in</p>
+        <p class="g-pstyle0">the tube by dragging a hand to slow,</p>
+        <p class="g-pstyle0">or pumping the board to speed up</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:83.2613%;
+margin-top:-25.2px;left:81.2408%;width:243px;"
+      >
+        <p class="g-pstyle0">One cubic meter of water</p>
+        <p class="g-pstyle0">weighs 1,000 kg. (2,200 lb)</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2024-07-19 13:14 -->
+
+<!-- Generated by ai2html v0.100.0 - 2024-07-19 13:14 -->
+<!-- ai file: annotation2.ai -->
+<style>#g-annotation2-box,
+#g-annotation2-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-annotation2-box p {
+  margin: 0;
+}
+
+#g-annotation2-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-annotation2-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-annotation2-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-annotation2-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation2-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-annotation2-xs .g-pstyle0 {
+  height: 16px;
+}
+
+#g-annotation2-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation2-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation2-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-annotation2-md .g-pstyle0 {
+  height: 16px;
+}
+
+#g-annotation2-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation2-lg p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 19px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-annotation2-lg .g-pstyle0 {
+  height: 19px;
+}
+
+#g-annotation2-xl {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation2-xl p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 24px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 20px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-annotation2-xl .g-pstyle0 {
+  height: 24px;
+}
+
+/* Custom CSS */</style>

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/annotation2.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Annotation2;
+type Annotation2 = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Annotation2: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}