@reuters-graphics/graphics-components 3.0.12 → 3.0.13

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/ai-chart.svelte

@@ -0,0 +1,631 @@
+<script lang="ts">
+  // For demo purposes only, hard-wiring img paths from Vite
+  // @ts-ignore img
+  import chartXs from '../imgs/ai-chart-xs.png';
+  // @ts-ignore img
+  import chartSm from '../imgs/ai-chart-sm.png';
+  // @ts-ignore img
+  import chartMd from '../imgs/ai-chart-md.png';
+
+  let width = $state<number>();
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-29 12:37 -->
+
+<div id="g-_ai-chart-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-_ai-chart-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 91.7004% 0;"></div>
+      <div
+        id="g-_ai-chart-xs-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXs});`}
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:3.216%;margin-top:-7.7px;left:0.5952%;width:99px;"
+      >
+        <p class="g-pstyle0">Shake intensity</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:9.8251%;margin-top:-7.7px;left:4.9821%;width:47px;"
+      >
+        <p class="g-pstyle0">Light</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:15.7733%;margin-top:-7.7px;left:4.9821%;width:69px;"
+      >
+        <p class="g-pstyle0">Moderate</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:16.4343%;margin-top:-7.7px;left:79.0675%;width:82px;"
+      >
+        <p class="g-pstyle0">Cap-Haitien</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:21.7216%;margin-top:-7.7px;left:4.9821%;width:55px;"
+      >
+        <p class="g-pstyle0">Strong</p>
+      </div>
+      <div
+        id="g-ai0-6"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:28.0002%;margin-top:-7.7px;left:4.9821%;width:78px;"
+      >
+        <p class="g-pstyle0">Very strong</p>
+      </div>
+      <div
+        id="g-ai0-7"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:28.9916%;margin-top:-7.7px;left:62.2348%;width:68px;"
+      >
+        <p class="g-pstyle0">Gonaïves</p>
+      </div>
+      <div
+        id="g-ai0-8"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:39.9449%;margin-top:-14.9px;left:28.714%;margin-left:-36.5px;width:73px;"
+      >
+        <p class="g-pstyle1">Caribbean</p>
+        <p class="g-pstyle1">Sea</p>
+      </div>
+      <div
+        id="g-ai0-9"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:42.6579%;margin-top:-10.1px;left:68.5061%;width:77px;"
+      >
+        <p class="g-pstyle2">HAITI</p>
+      </div>
+      <div
+        id="g-ai0-10"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:59.0632%;margin-top:-7.7px;left:11.2526%;width:63px;"
+      >
+        <p class="g-pstyle0">Jeremie</p>
+      </div>
+      <div
+        id="g-ai0-11"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:61.1155%;margin-top:-8.9px;left:70.5455%;width:106px;"
+      >
+        <p class="g-pstyle3">Port-au-Prince</p>
+      </div>
+      <div
+        id="g-ai0-12"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:62.1069%;margin-top:-8.9px;left:32.6015%;width:77px;"
+      >
+        <p class="g-pstyle3">Epicenter</p>
+      </div>
+      <div
+        id="g-ai0-13"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:78.8906%;margin-top:-7.7px;left:63.9138%;width:58px;"
+      >
+        <p class="g-pstyle0">Jacmel</p>
+      </div>
+      <div
+        id="g-ai0-14"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:80.2124%;margin-top:-7.7px;left:22.5649%;width:71px;"
+      >
+        <p class="g-pstyle0">Les Cayes</p>
+      </div>
+      <div
+        id="g-ai0-15"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:87.8129%;margin-top:-7.7px;left:0.6179%;width:49px;"
+      >
+        <p class="g-pstyle0">50 mi</p>
+      </div>
+      <div
+        id="g-ai0-16"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:91.0202%;margin-top:-11.4px;right:10.4418%;width:70px;"
+      >
+        <p class="g-pstyle4">Dominican</p>
+        <p class="g-pstyle4">Republic</p>
+      </div>
+      <div
+        id="g-ai0-17"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:93.7611%;margin-top:-7.7px;left:0.6179%;width:52px;"
+      >
+        <p class="g-pstyle0">50 km</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-_ai-chart-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 82.703% 0;"></div>
+      <div
+        id="g-_ai-chart-sm-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartSm});`}
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:3.8773%;margin-top:-9.4px;left:0.3278%;width:111px;"
+      >
+        <p class="g-pstyle0">Shake intensity</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:9.0933%;margin-top:-9.4px;left:3.0258%;width:52px;"
+      >
+        <p class="g-pstyle0">Light</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:13.5979%;margin-top:-9.4px;left:3.0259%;width:77px;"
+      >
+        <p class="g-pstyle0">Moderate</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:16.6801%;margin-top:-9.4px;left:70.3255%;width:92px;"
+      >
+        <p class="g-pstyle0">Cap-Haitien</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:18.3397%;margin-top:-9.4px;left:3.0258%;width:61px;"
+      >
+        <p class="g-pstyle0">Strong</p>
+      </div>
+      <div
+        id="g-ai1-6"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:22.6073%;margin-top:-9.4px;left:3.0258%;width:88px;"
+      >
+        <p class="g-pstyle0">Very strong</p>
+      </div>
+      <div
+        id="g-ai1-7"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:28.5344%;margin-top:-9.4px;left:55.9181%;width:76px;"
+      >
+        <p class="g-pstyle0">Gonaïves</p>
+      </div>
+      <div
+        id="g-ai1-8"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:38.8091%;margin-top:-17.7px;left:27.2818%;margin-left:-41px;width:82px;"
+      >
+        <p class="g-pstyle1">Caribbean</p>
+        <p class="g-pstyle1">Sea</p>
+      </div>
+      <div
+        id="g-ai1-9"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:39.9724%;margin-top:-8.6px;left:61.2858%;width:67px;"
+      >
+        <p class="g-pstyle2">HAITI</p>
+      </div>
+      <div
+        id="g-ai1-10"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:56.985%;margin-top:-9.4px;left:12.2815%;width:69px;"
+      >
+        <p class="g-pstyle0">Jeremie</p>
+      </div>
+      <div
+        id="g-ai1-11"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:59.1569%;margin-top:-9.5px;left:63.0314%;width:112px;"
+      >
+        <p class="g-pstyle3">Port-au-Prince</p>
+      </div>
+      <div
+        id="g-ai1-12"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:60.1053%;margin-top:-9.5px;left:30.5543%;width:81px;"
+      >
+        <p class="g-pstyle3">Epicenter</p>
+      </div>
+      <div
+        id="g-ai1-13"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:62.7194%;margin-top:-16.5px;left:91.2282%;margin-left:-57px;width:114px;"
+      >
+        <p class="g-pstyle4">Dominican</p>
+        <p class="g-pstyle4">Republic</p>
+      </div>
+      <div
+        id="g-ai1-14"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:75.4778%;margin-top:-9.4px;left:57.3552%;width:64px;"
+      >
+        <p class="g-pstyle0">Jacmel</p>
+      </div>
+      <div
+        id="g-ai1-15"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:76.6632%;margin-top:-9.4px;left:21.9639%;width:79px;"
+      >
+        <p class="g-pstyle0">Les Cayes</p>
+      </div>
+      <div
+        id="g-ai1-16"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:85.5251%;margin-top:-7.7px;left:0.1344%;width:49px;"
+      >
+        <p class="g-pstyle5">50 mi</p>
+      </div>
+      <div
+        id="g-ai1-17"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:90.0297%;margin-top:-7.7px;left:0.1344%;width:52px;"
+      >
+        <p class="g-pstyle5">50 km</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660}
+    <div id="g-_ai-chart-md" class="g-artboard" style="">
+      <div style="padding: 0 0 79.6009% 0;"></div>
+      <div
+        id="g-_ai-chart-md-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartMd});`}
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:2.3515%;margin-top:-9.4px;left:0.3608%;width:111px;"
+      >
+        <p class="g-pstyle0">Shake intensity</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:7.6811%;margin-top:-9.4px;left:2.6603%;width:52px;"
+      >
+        <p class="g-pstyle0">Light</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:12.2494%;margin-top:-9.4px;left:2.6604%;width:77px;"
+      >
+        <p class="g-pstyle0">Moderate</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:15.4852%;margin-top:-9.4px;left:70.3606%;width:92px;"
+      >
+        <p class="g-pstyle0">Cap-Haitien</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:17.1983%;margin-top:-9.4px;left:2.6603%;width:61px;"
+      >
+        <p class="g-pstyle0">Strong</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-legend g-aiAbs g-aiPointText"
+        style="top:21.7666%;margin-top:-9.4px;left:2.6603%;width:88px;"
+      >
+        <p class="g-pstyle0">Very strong</p>
+      </div>
+      <div
+        id="g-ai2-7"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:27.6672%;margin-top:-9.4px;left:55.993%;width:76px;"
+      >
+        <p class="g-pstyle0">Gonaïves</p>
+      </div>
+      <div
+        id="g-ai2-8"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:38.0099%;margin-top:-17.7px;left:27.2388%;margin-left:-41px;width:82px;"
+      >
+        <p class="g-pstyle1">Caribbean</p>
+        <p class="g-pstyle1">Sea</p>
+      </div>
+      <div
+        id="g-ai2-9"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:42.7626%;margin-top:-10.7px;left:62.8914%;width:80px;"
+      >
+        <p class="g-pstyle2">HAITI</p>
+      </div>
+      <div
+        id="g-ai2-10"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:50.0029%;margin-top:-17.7px;left:92.295%;margin-left:-60.5px;width:121px;"
+      >
+        <p class="g-pstyle3">Dominican</p>
+        <p class="g-pstyle3">Republic</p>
+      </div>
+      <div
+        id="g-ai2-11"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:57.3608%;margin-top:-9.4px;left:12.2815%;width:69px;"
+      >
+        <p class="g-pstyle0">Jeremie</p>
+      </div>
+      <div
+        id="g-ai2-12"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:60.2742%;margin-top:-10.7px;left:30.6995%;width:89px;"
+      >
+        <p class="g-pstyle4">Epicenter</p>
+      </div>
+      <div
+        id="g-ai2-13"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:62.5583%;margin-top:-10.7px;left:66.3403%;width:125px;"
+      >
+        <p class="g-pstyle4">Port-au-Prince</p>
+      </div>
+      <div
+        id="g-ai2-14"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:75.6338%;margin-top:-9.4px;left:57.8174%;width:64px;"
+      >
+        <p class="g-pstyle0">Jacmel</p>
+      </div>
+      <div
+        id="g-ai2-15"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:77.3469%;margin-top:-9.4px;left:22.5239%;width:79px;"
+      >
+        <p class="g-pstyle0">Les Cayes</p>
+      </div>
+      <div
+        id="g-ai2-16"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:86.936%;margin-top:-7.7px;left:0.1678%;width:49px;"
+      >
+        <p class="g-pstyle5">50 mi</p>
+      </div>
+      <div
+        id="g-ai2-17"
+        class="g-map-labels g-aiAbs g-aiPointText"
+        style="top:91.5043%;margin-top:-7.7px;left:0.1678%;width:52px;"
+      >
+        <p class="g-pstyle5">50 km</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-29 12:37 -->
+
+<!-- ai file: _ai-chart.ai -->
+<style>#g-_ai-chart-box,
+#g-_ai-chart-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-_ai-chart-box p {
+  margin: 0;
+}
+
+#g-_ai-chart-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-_ai-chart-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-_ai-chart-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-_ai-chart-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-_ai-chart-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 14px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 12px;
+  text-align: left;
+  color: rgb(51, 51, 51);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-_ai-chart-xs .g-pstyle0 {
+  height: 14px;
+}
+
+#g-_ai-chart-xs .g-pstyle1 {
+  font-style: italic;
+  height: 14px;
+  text-align: center;
+  color: rgb(113, 115, 117);
+}
+
+#g-_ai-chart-xs .g-pstyle2 {
+  font-weight: 700;
+  line-height: 18px;
+  height: 18px;
+  letter-spacing: 0.25em;
+  font-size: 15px;
+}
+
+#g-_ai-chart-xs .g-pstyle3 {
+  font-weight: 700;
+  line-height: 16px;
+  height: 16px;
+  font-size: 13px;
+}
+
+#g-_ai-chart-xs .g-pstyle4 {
+  line-height: 11px;
+  height: 11px;
+  font-size: 11px;
+  text-align: right;
+}
+
+#g-_ai-chart-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-_ai-chart-sm p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 17px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 14px;
+  text-align: left;
+  color: rgb(51, 51, 51);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-_ai-chart-sm .g-pstyle0 {
+  height: 17px;
+}
+
+#g-_ai-chart-sm .g-pstyle1 {
+  font-style: italic;
+  height: 17px;
+  text-align: center;
+  color: rgb(113, 115, 117);
+}
+
+#g-_ai-chart-sm .g-pstyle2 {
+  font-weight: 700;
+  line-height: 15px;
+  height: 15px;
+  letter-spacing: 0.25em;
+  font-size: 12px;
+}
+
+#g-_ai-chart-sm .g-pstyle3 {
+  font-weight: 700;
+  height: 17px;
+}
+
+#g-_ai-chart-sm .g-pstyle4 {
+  font-weight: 300;
+  line-height: 16px;
+  height: 16px;
+  letter-spacing: 0.25em;
+  font-size: 13px;
+  text-align: center;
+  text-transform: uppercase;
+  color: rgb(134, 136, 139);
+}
+
+#g-_ai-chart-sm .g-pstyle5 {
+  line-height: 14px;
+  height: 14px;
+  font-size: 12px;
+}
+
+#g-_ai-chart-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-_ai-chart-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 17px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 14px;
+  text-align: left;
+  color: rgb(51, 51, 51);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-_ai-chart-md .g-pstyle0 {
+  height: 17px;
+}
+
+#g-_ai-chart-md .g-pstyle1 {
+  font-style: italic;
+  height: 17px;
+  text-align: center;
+  color: rgb(113, 115, 117);
+}
+
+#g-_ai-chart-md .g-pstyle2 {
+  font-weight: 700;
+  line-height: 19px;
+  height: 19px;
+  letter-spacing: 0.25em;
+  font-size: 16px;
+}
+
+#g-_ai-chart-md .g-pstyle3 {
+  font-weight: 300;
+  height: 17px;
+  letter-spacing: 0.25em;
+  text-align: center;
+  text-transform: uppercase;
+  color: rgb(134, 136, 139);
+}
+
+#g-_ai-chart-md .g-pstyle4 {
+  font-weight: 700;
+  line-height: 19px;
+  height: 19px;
+  font-size: 16px;
+}
+
+#g-_ai-chart-md .g-pstyle5 {
+  line-height: 14px;
+  height: 14px;
+  font-size: 12px;
+}
+
+/* Custom CSS */
+* {
+  color: white !important;
+}</style>

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/ai-chart.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AiChart: import("svelte").Component<Record<string, never>, {}, "">;
+type AiChart = ReturnType<typeof AiChart>;
+export default AiChart;