@reuters-graphics/graphics-components 0.1.2 → 0.1.4

package/dist/@types/components/SiteHeader/SiteHeader.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type SiteHeaderProps = typeof __propDef.props;
-export declare type SiteHeaderEvents = typeof __propDef.events;
-export declare type SiteHeaderSlots = typeof __propDef.slots;
+export type SiteHeaderProps = typeof __propDef.props;
+export type SiteHeaderEvents = typeof __propDef.events;
+export type SiteHeaderSlots = typeof __propDef.slots;
 /** `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteHeader--default) */
 export default class SiteHeader extends SvelteComponentTyped<SiteHeaderProps, SiteHeaderEvents, SiteHeaderSlots> {
 }

package/dist/@types/components/SiteHeader/svgs/Close.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  CloseProps */
 /** @typedef {typeof __propDef.events}  CloseEvents */
 /** @typedef {typeof __propDef.slots}  CloseSlots */
-export default class Close extends SvelteComponentTyped<{}, {
+export default class Close extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type CloseEvents = typeof __propDef.events;
 export type CloseSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/@types/components/SiteHeadline/SiteHeadline.svelte.d.ts

@@ -39,9 +39,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SiteHeadlineProps = typeof __propDef.props;
-export declare type SiteHeadlineEvents = typeof __propDef.events;
-export declare type SiteHeadlineSlots = typeof __propDef.slots;
+export type SiteHeadlineProps = typeof __propDef.props;
+export type SiteHeadlineEvents = typeof __propDef.events;
+export type SiteHeadlineSlots = typeof __propDef.slots;
 export default class SiteHeadline extends SvelteComponentTyped<SiteHeadlineProps, SiteHeadlineEvents, SiteHeadlineSlots> {
 }
 export {};

package/dist/@types/components/Spinner/Spinner.svelte.d.ts

@@ -20,9 +20,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SpinnerProps = typeof __propDef.props;
-export declare type SpinnerEvents = typeof __propDef.events;
-export declare type SpinnerSlots = typeof __propDef.slots;
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
 /** `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) */
 export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
 }

package/dist/@types/components/Table/LeftArrow.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  LeftArrowProps */
 /** @typedef {typeof __propDef.events}  LeftArrowEvents */
 /** @typedef {typeof __propDef.slots}  LeftArrowSlots */
-export default class LeftArrow extends SvelteComponentTyped<{}, {
+export default class LeftArrow extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type LeftArrowEvents = typeof __propDef.events;
 export type LeftArrowSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/@types/components/Table/Pagination.svelte.d.ts

@@ -23,9 +23,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PaginationProps = typeof __propDef.props;
-export declare type PaginationEvents = typeof __propDef.events;
-export declare type PaginationSlots = typeof __propDef.slots;
+export type PaginationProps = typeof __propDef.props;
+export type PaginationEvents = typeof __propDef.events;
+export type PaginationSlots = typeof __propDef.slots;
 export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
 }
 export {};

package/dist/@types/components/Table/RightArrow.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  RightArrowProps */
 /** @typedef {typeof __propDef.events}  RightArrowEvents */
 /** @typedef {typeof __propDef.slots}  RightArrowSlots */
-export default class RightArrow extends SvelteComponentTyped<{}, {
+export default class RightArrow extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type RightArrowEvents = typeof __propDef.events;
 export type RightArrowSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/@types/components/Table/Select.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SelectProps = typeof __propDef.props;
-export declare type SelectEvents = typeof __propDef.events;
-export declare type SelectSlots = typeof __propDef.slots;
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

package/dist/@types/components/Table/SortArrow.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SortArrowProps = typeof __propDef.props;
-export declare type SortArrowEvents = typeof __propDef.events;
-export declare type SortArrowSlots = typeof __propDef.slots;
+export type SortArrowProps = typeof __propDef.props;
+export type SortArrowEvents = typeof __propDef.events;
+export type SortArrowSlots = typeof __propDef.slots;
 export default class SortArrow extends SvelteComponentTyped<SortArrowProps, SortArrowEvents, SortArrowSlots> {
 }
 export {};

package/dist/@types/components/Table/Table.svelte.d.ts

@@ -84,9 +84,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type TableProps = typeof __propDef.props;
-export declare type TableEvents = typeof __propDef.events;
-export declare type TableSlots = typeof __propDef.slots;
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
 /** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) */
 export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
 }

package/dist/@types/components/Theme/Theme.svelte.d.ts

@@ -46,9 +46,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ThemeProps = typeof __propDef.props;
-export declare type ThemeEvents = typeof __propDef.events;
-export declare type ThemeSlots = typeof __propDef.slots;
+export type ThemeProps = typeof __propDef.props;
+export type ThemeEvents = typeof __propDef.events;
+export type ThemeSlots = typeof __propDef.slots;
 /** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) */
 export default class Theme extends SvelteComponentTyped<ThemeProps, ThemeEvents, ThemeSlots> {
 }

package/dist/@types/components/Theme/themes/light.d.ts

@@ -1,5 +1,5 @@
 declare namespace _default {
-    const colour: {
+    let colour: {
         background: string;
         'text-primary': string;
         'text-secondary': string;
@@ -8,7 +8,7 @@ declare namespace _default {
         'brand-rules': string;
         'brand-shadow': string;
     };
-    const font: {
+    let font: {
         'size-base': string;
         'family-serif': string;
         'family-sans-serif': string;

package/dist/@types/components/ToolsHeader/ToolsHeader.svelte.d.ts

@@ -30,9 +30,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ToolsHeaderProps = typeof __propDef.props;
-export declare type ToolsHeaderEvents = typeof __propDef.events;
-export declare type ToolsHeaderSlots = typeof __propDef.slots;
+export type ToolsHeaderProps = typeof __propDef.props;
+export type ToolsHeaderEvents = typeof __propDef.events;
+export type ToolsHeaderSlots = typeof __propDef.slots;
 /** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) */
 export default class ToolsHeader extends SvelteComponentTyped<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
 }

package/dist/@types/components/Video/Video.svelte.d.ts

@@ -38,9 +38,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type VideoProps = typeof __propDef.props;
-export declare type VideoEvents = typeof __propDef.events;
-export declare type VideoSlots = typeof __propDef.slots;
+export type VideoProps = typeof __propDef.props;
+export type VideoEvents = typeof __propDef.events;
+export type VideoSlots = typeof __propDef.slots;
 /** `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) */
 export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
 }

package/dist/@types/components/Visible/Visible.svelte.d.ts

@@ -21,9 +21,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type VisibleProps = typeof __propDef.props;
-export declare type VisibleEvents = typeof __propDef.events;
-export declare type VisibleSlots = typeof __propDef.slots;
+export type VisibleProps = typeof __propDef.props;
+export type VisibleEvents = typeof __propDef.events;
+export type VisibleSlots = typeof __propDef.slots;
 /** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) */
 export default class Visible extends SvelteComponentTyped<VisibleProps, VisibleEvents, VisibleSlots> {
 }

package/dist/components/@types/global.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=global.js.map

package/dist/components/Analytics/providers/chartbeat.js

@@ -21,7 +21,7 @@ export default (authors) => {
         useCanonical: true,
         useCanonicalDomain: true,
         sections: 'Graphics',
-        authors: authors.map((a) => (a === null || a === void 0 ? void 0 : a.name) || '').join(','),
+        authors: authors.map((a) => a?.name || '').join(','),
         ...(window._sf_async_config || {}),
     };
     try {
@@ -36,6 +36,7 @@ export const registerPageview = () => {
         return;
     window.pSUPERFLY({
         path: window.location.pathname,
-        title: document === null || document === void 0 ? void 0 : document.title,
+        title: document?.title,
     });
 };
+//# sourceMappingURL=chartbeat.js.map

package/dist/components/Analytics/providers/ga.js

@@ -39,6 +39,7 @@ export const registerPageview = () => {
         return;
     window.gtag('event', 'page_view', {
         page_location: window.location.origin + window.location.pathname,
-        page_title: document === null || document === void 0 ? void 0 : document.title,
+        page_title: document?.title,
     });
 };
+//# sourceMappingURL=ga.js.map

package/dist/components/Analytics/providers/index.js

@@ -1,2 +1,3 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
+//# sourceMappingURL=index.js.map

package/dist/components/BodyText/BodyText.svelte

@@ -129,10 +129,10 @@ import Block from '../Block/Block.svelte';
 }
 @media (max-width: 540px) {
   :global(div.article-block.body-text) :global(p) :global(a),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(a),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(a),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
+  :global(div.article-block.body-text) :global(ul) :global(li) :global(a),
+  :global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
+  :global(div.article-block.body-text) :global(ol) :global(li) :global(a),
+  :global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
     background-position: 0 1.1rem;
   }
 }

package/dist/components/PhotoPack/docProps.js

@@ -18,3 +18,4 @@ export const getPhotoPackPropsFromDoc = (docBlock, assetsPath = '') => {
         })),
     };
 };
+//# sourceMappingURL=docProps.js.map

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -45,9 +45,9 @@ onMount(async () => {
                 }),
             }));
         const articles = (await response.json()).result.articles
-            .filter((a) => { var _a; return (_a = a === null || a === void 0 ? void 0 : a.kicker) === null || _a === void 0 ? void 0 : _a.name; })
-            .filter((a) => { var _a, _b, _c; return (_c = (_b = (_a = a === null || a === void 0 ? void 0 : a.thumbnail) === null || _a === void 0 ? void 0 : _a.renditions) === null || _b === void 0 ? void 0 : _b.landscape) === null || _c === void 0 ? void 0 : _c['240w']; })
-            .filter((a) => { var _a; return !((_a = a === null || a === void 0 ? void 0 : a.content) === null || _a === void 0 ? void 0 : _a.third_party); })
+            .filter((a) => a?.kicker?.name)
+            .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
+            .filter((a) => !a?.content?.third_party)
             .slice(0, number);
         referrals.set(articles);
     }

package/dist/components/SEO/SEO.svelte

@@ -74,7 +74,7 @@ const getOrigin = (baseUrl) => {
     }
 };
 $: origin = getOrigin(baseUrl);
-$: canonicalUrl = origin + pageUrl.pathname;
+$: canonicalUrl = (origin + pageUrl.pathname).replace(/index\.html\/$/, '');
 const orgLdJson = {
     '@context': 'http://schema.org',
     '@type': 'NewsMediaOrganization',

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -147,10 +147,10 @@ div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
 }
 @media (max-width: 540px) {
   div.embedded-foreground :global(p) :global(a),
-div.embedded-foreground :global(ul) :global(li) :global(a),
-div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
-div.embedded-foreground :global(ol) :global(li) :global(a),
-div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
+  div.embedded-foreground :global(ul) :global(li) :global(a),
+  div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
+  div.embedded-foreground :global(ol) :global(li) :global(a),
+  div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
     background-position: 0 1.1rem;
   }
 }

package/dist/components/Scroller/docProps.js

@@ -13,3 +13,4 @@ export const getScrollerPropsFromDoc = (docBlock, aiCharts, assetsPath = '') =>
         })),
     };
 };
+//# sourceMappingURL=docProps.js.map

package/dist/components/SearchInput/SearchInput.svelte

@@ -20,7 +20,7 @@ function clear() {
 }
 </script>
 
-<div class="search" class:active>
+<div class="search" class:active="{active}">
   <div class="search--icon">
     <MagnifyingGlass />
   </div>
@@ -30,7 +30,7 @@ function clear() {
     type="text"
     placeholder="{searchPlaceholder}"
     on:input="{input}"
-    bind:value
+    bind:value="{value}"
   />
   <div class="search--x" class:invisible="{!active}" on:click="{clear}">
     <X />

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -110,7 +110,7 @@
 }
 @media (max-width: 1023px) {
   .company .content-container .company-info,
-.company .content-container .social {
+  .company .content-container .social {
     grid-column: 1/span 4;
     grid-row: auto;
   }

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -139,29 +139,21 @@
 }
 @media (max-width: 1023px) {
   .legal .content-container .ad-links,
-.legal .content-container .misc-links,
-.legal .content-container .disclaimer,
-.legal .content-container .copyright {
+  .legal .content-container .misc-links,
+  .legal .content-container .disclaimer,
+  .legal .content-container .copyright {
     grid-column: 1/span 4;
     justify-self: start;
   }
-}
-@media (max-width: 1023px) {
   .legal .content-container .ad-links {
     grid-row: 1;
   }
-}
-@media (max-width: 1023px) {
   .legal .content-container .disclaimer {
     grid-row: 2;
   }
-}
-@media (max-width: 1023px) {
   .legal .content-container .misc-links {
     grid-row: 3;
   }
-}
-@media (max-width: 1023px) {
   .legal .content-container .copyright {
     grid-row: 4;
   }

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -75,7 +75,6 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 1;

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte

@@ -4,12 +4,7 @@
   </div>
 </div>
 
-<style>@-webkit-keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes spinner {
+<style>@keyframes spinner {
   to {
     transform: rotate(360deg);
   }
@@ -30,8 +25,7 @@
   border-radius: 50%;
   border: 4px solid transparent;
   border-top-color: currentColor;
-  -webkit-animation: spinner 0.6s linear infinite;
-          animation: spinner 0.6s linear infinite;
+  animation: spinner 0.6s linear infinite;
   box-sizing: border-box;
 }
 .spinner::before {

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -223,8 +223,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 
 .story-item {
   padding-bottom: 20px;
-  -webkit-animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
-          animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
+  animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
 }
 .story-item:nth-child(1), .story-item:nth-child(2) {
   border-bottom: 1px solid var(--nav-rules, #d0d0d0);
@@ -249,15 +248,6 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   left: 50%;
 }
 
-@-webkit-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes fadein {
   from {
     opacity: 0;

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -116,7 +116,6 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   pointer-events: none;
 }
 .scroll-container .inner {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   background: var(--nav-background, #fff);

package/dist/components/Spinner/Spinner.svelte

@@ -41,12 +41,7 @@ export let containerPadding = 10;
   </div>
 </div>
 
-<style>@-webkit-keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes spinner {
+<style>@keyframes spinner {
   to {
     transform: rotate(360deg);
   }
@@ -73,8 +68,7 @@ export let containerPadding = 10;
   border-radius: 50%;
   border: var(--spinner-ring-width, 6px) solid transparent;
   border-top-color: currentColor;
-  -webkit-animation: spinner var(--spinner-speed, 0.8s) linear infinite;
-          animation: spinner var(--spinner-speed, 0.8s) linear infinite;
+  animation: spinner var(--spinner-speed, 0.8s) linear infinite;
   box-sizing: border-box;
 }
 .spinner::before {

package/dist/components/Table/Table.svelte

@@ -199,7 +199,7 @@ onMount(() => {
             {#if searchable}
               <div class="table--header--search">
                 <SearchInput
-                  bind:searchPlaceholder
+                  bind:searchPlaceholder="{searchPlaceholder}"
                   on:search="{handleSearchInput}"
                 />
               </div>
@@ -210,7 +210,7 @@ onMount(() => {
     {/if}
     <section class="table">
       <table
-        class:paginated
+        class:paginated="{paginated}"
         class:truncated="{truncated &&
           !showAll &&
           data.length > truncateLength}"
@@ -235,7 +235,7 @@ onMount(() => {
                 {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow avoid-clicks">
                     <SortArrow
-                      bind:sortDirection
+                      bind:sortDirection="{sortDirection}"
                       active="{sortField === field}"
                     />
                   </div>
@@ -292,8 +292,8 @@ onMount(() => {
     {/if}
     {#if paginated}
       <Pagination
-        bind:pageNumber
-        bind:pageSize
+        bind:pageNumber="{pageNumber}"
+        bind:pageSize="{pageSize}"
         bind:pageLength="{currentPageData.length}"
         bind:n="{sortedData.length}"
       />{/if}

package/dist/components/Theme/@types/component.js

@@ -1,3 +1,4 @@
 ;
 ;
 export {};
+//# sourceMappingURL=component.js.map

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -50,7 +50,6 @@ import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svel
   gap: 15px;
 }
 header.sticky {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }