@scrippsproduct/networks-ui-library 1.0.15

package/dist/components/CarouselSlide/slide-layouts/Figure/Figure.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import { classes as s } from "../../../../utils/helpers.js";
+import '../../../../assets/Figure.css';const r = {
+  "figure-slide": "_figure-slide_6uaj0_1",
+  "figure-slide__figure": "_figure-slide__figure_6uaj0_9",
+  "figure-slide--captioned-image": "_figure-slide--captioned-image_6uaj0_36"
+};
+function n({ images: l = [{ url: "", altText: "", caption: "" }], imagesPerSlide: t = 1 }) {
+  return /* @__PURE__ */ i("div", { className: r["figure-slide"], children: l.map((e, u) => /* @__PURE__ */ i(
+    "figure",
+    {
+      className: s([
+        r["figure-slide__figure"],
+        e != null && e.caption ? r["figure-slide--captioned-image"] : ""
+      ]),
+      style: {
+        backgroundImage: `url(${e.url})`,
+        flexBasis: `${100 / t}%`
+      },
+      title: e.altText !== "" ? e.altText : "",
+      children: (e == null ? void 0 : e.caption) && /* @__PURE__ */ i("figcaption", { children: e.caption })
+    },
+    `figure-${u}`
+  )) });
+}
+export {
+  n as FigureSlide,
+  n as default
+};

package/dist/components/CarouselSlide/slide-layouts/Figure/Figure.stories.d.ts

@@ -0,0 +1,34 @@
+import { default as Figure } from './Figure';
+declare namespace _default {
+    export let title: string;
+    export { Figure as component };
+    export let tags: string[];
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export function Default(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace Default {
+    namespace args {
+        let images: {
+            url: string;
+            altText: string;
+            caption: string;
+        }[];
+        let imagesPerSlide: number;
+    }
+}
+export function TwoUp(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace TwoUp {
+    let args_1: any;
+    export { args_1 as args };
+}
+export function ThreeUp(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace ThreeUp {
+    let args_2: any;
+    export { args_2 as args };
+}
+export function FourUp(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace FourUp {
+    let args_3: any;
+    export { args_3 as args };
+}

package/dist/components/CarouselSlide/slide-layouts/Figure/Figure.stories.js

@@ -0,0 +1,105 @@
+import { jsx as l } from "react/jsx-runtime";
+import "react";
+import { FigureSlide as o } from "./Figure.js";
+const d = {
+  title: "Slide Layouts/Figure",
+  component: o,
+  tags: ["autodocs"],
+  decorators: [
+    (e) => /* @__PURE__ */ l(
+      "div",
+      {
+        style: {
+          width: "60%",
+          "--_cell-aspect-ratio": "4/2",
+          "--_slide-gap": "1rem",
+          border: "1px solid #000"
+        },
+        children: /* @__PURE__ */ l(e, {})
+      }
+    )
+  ]
+}, t = (e) => /* @__PURE__ */ l(o, { ...e }), a = t.bind({});
+a.args = {
+  images: [
+    {
+      url: "https://placehold.co/500x300",
+      altText: "A random image from Unsplash (https://unsplash.com)",
+      caption: "Image 1"
+    }
+  ],
+  imagesPerSlide: 1
+};
+const s = t.bind({});
+s.args = {
+  ...a.args,
+  images: [
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 1"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 2"
+    }
+  ],
+  imagesPerSlide: 2
+};
+const p = t.bind({});
+p.args = {
+  ...a.args,
+  images: [
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 1"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 2"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 3"
+    }
+  ],
+  imagesPerSlide: 3
+};
+const c = t.bind({});
+c.args = {
+  ...a.args,
+  images: [
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 1"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "Blue ocean with a large wave",
+      caption: "Image 2"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 3"
+    },
+    {
+      url: "https://placehold.co/500x300",
+      altText: "",
+      caption: "Image 4"
+    }
+  ],
+  imagesPerSlide: 4
+};
+export {
+  a as Default,
+  c as FourUp,
+  p as ThreeUp,
+  s as TwoUp,
+  d as default
+};

package/dist/components/CarouselSlide/slide-layouts/Figure/index.d.ts

@@ -0,0 +1 @@
+export { FigureSlide, FigureSlide as default } from './Figure';

package/dist/components/CarouselSlide/slide-layouts/Figure/index.js

@@ -0,0 +1,5 @@
+import { FigureSlide as r, FigureSlide as d } from "./Figure.js";
+export {
+  r as FigureSlide,
+  d as default
+};

package/dist/components/CarouselSlide/slide-layouts/ImageCard/ImageCard.d.ts

@@ -0,0 +1,2 @@
+export function ImageCardSlide(props: any): import("react/jsx-runtime").JSX.Element;
+export default ImageCardSlide;

package/dist/components/CarouselSlide/slide-layouts/ImageCard/ImageCard.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { ImageCard as e } from "../../../ImageCard/ImageCard.js";
+function o(a) {
+  return /* @__PURE__ */ r("div", { className: "image-card-slide", children: /* @__PURE__ */ r(e, { ...a }) });
+}
+export {
+  o as ImageCardSlide,
+  o as default
+};

package/dist/components/CarouselSlide/slide-layouts/ImageCard/index.d.ts

@@ -0,0 +1 @@
+export { ImageCardSlide, ImageCardSlide as default } from './ImageCard';

package/dist/components/CarouselSlide/slide-layouts/ImageCard/index.js

@@ -0,0 +1,5 @@
+import { ImageCardSlide as d, ImageCardSlide as r } from "./ImageCard.js";
+export {
+  d as ImageCardSlide,
+  r as default
+};

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/NetworkCalloutSlide.d.ts

@@ -0,0 +1,4 @@
+export function NetworkCalloutSlide({ network }: {
+    network: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default NetworkCalloutSlide;

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/NetworkCalloutSlide.js

@@ -0,0 +1,27 @@
+import { jsx as l } from "react/jsx-runtime";
+import "react";
+import { TwoColumnSlide as o } from "../TwoColumn/TwoColumnSlide.js";
+import { CtaBlock as e } from "../../../CtaBlock/CtaBlock.js";
+function m({ network: t }) {
+  return /* @__PURE__ */ l("network-callout-slide", { children: /* @__PURE__ */ l(
+    o,
+    {
+      columnOneContent: /* @__PURE__ */ l(
+        e,
+        {
+          title: t.name,
+          content: t.tagline,
+          titleImageUrl: t.images.logo.url,
+          type: "external-link",
+          btnGradientStartColor: "#191919",
+          btnGradientEndColor: "#565656"
+        }
+      ),
+      columnTwoContent: `<img src="${t.images.callout.url}" />`
+    }
+  ) });
+}
+export {
+  m as NetworkCalloutSlide,
+  m as default
+};

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/NetworkCalloutSlide.stories.d.ts

@@ -0,0 +1,28 @@
+import { default as NetworkCalloutSlide } from './NetworkCalloutSlide';
+declare namespace _default {
+    export let title: string;
+    export { NetworkCalloutSlide as component };
+    export let tags: string[];
+    export let args: {};
+}
+export default _default;
+export function Generic(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace Generic {
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace args_1 {
+        namespace network {
+            let name: string;
+            let tagline: string;
+            namespace images {
+                namespace logo {
+                    let url: string;
+                }
+                namespace callout {
+                    let url_1: string;
+                    export { url_1 as url };
+                }
+            }
+        }
+    }
+    export { args_1 as args };
+}

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/NetworkCalloutSlide.stories.js

@@ -0,0 +1,42 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { NetworkCalloutSlide as e } from "./NetworkCalloutSlide.js";
+const n = {
+  title: "Slide Layouts/Network Callout Slide",
+  component: e,
+  tags: ["autodocs"],
+  args: {}
+}, s = (o) => /* @__PURE__ */ t(e, { ...o }), l = s.bind({});
+l.decorators = [
+  (o) => /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        width: "90%",
+        aspectRatio: 1710 / 850,
+        backgroundColor: "#F49019"
+      },
+      className: "slide",
+      inert: null,
+      children: /* @__PURE__ */ t(o, {})
+    }
+  )
+];
+l.args = {
+  network: {
+    name: "ION Mystery",
+    tagline: "Television's most Binge-worthy thrillers, docuseries and originals",
+    images: {
+      logo: {
+        url: "https://iontelevision.com/static/global/ION-Mystery_Logo-White.svg"
+      },
+      callout: {
+        url: "https://placehold.co/547x303"
+      }
+    }
+  }
+};
+export {
+  l as Generic,
+  n as default
+};

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/index.d.ts

@@ -0,0 +1 @@
+export { NetworkCalloutSlide, NetworkCalloutSlide as default } from './NetworkCalloutSlide';

package/dist/components/CarouselSlide/slide-layouts/NetworkCallout/index.js

@@ -0,0 +1,5 @@
+import { NetworkCalloutSlide as o, NetworkCalloutSlide as t } from "./NetworkCalloutSlide.js";
+export {
+  o as NetworkCalloutSlide,
+  t as default
+};

package/dist/components/CarouselSlide/slide-layouts/Show/ShowSlide.d.ts

@@ -0,0 +1,17 @@
+export function ShowSlide({ series, nextAirdate, titlePosition, titleColor, fullSizeImagePosition, mobileImagePosition, lazyLoad, fetchPriority, decoding, hasSeriesPages, handleClicks, altText, SCHEDULE_ENDPOINT, NETWORK }: {
+    series: any;
+    nextAirdate?: null | undefined;
+    titlePosition?: string | undefined;
+    titleColor?: string | undefined;
+    fullSizeImagePosition?: number[] | undefined;
+    mobileImagePosition?: number[] | undefined;
+    lazyLoad?: boolean | undefined;
+    fetchPriority?: null | undefined;
+    decoding?: string | undefined;
+    hasSeriesPages?: boolean | undefined;
+    handleClicks?: (() => boolean) | undefined;
+    altText?: string | undefined;
+    SCHEDULE_ENDPOINT?: string | undefined;
+    NETWORK?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export default ShowSlide;

package/dist/components/CarouselSlide/slide-layouts/Show/ShowSlide.js

@@ -0,0 +1,116 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { ImageCard as E } from "../../../ImageCard/ImageCard.js";
+import { AirDateFormatter as H } from "../../../AirDateFormatter/AirDateFormatter.js";
+import { GetAirdateWrapper as J } from "../../../GetAirdateWrapper/GetAirdateWrapper.js";
+import { Concat as _ } from "../../../Concat/Concat.js";
+import { classes as K } from "../../../../utils/helpers.js";
+import '../../../../assets/ShowSlide.css';const L = {
+  "show-slide": "_show-slide_mt0c3_1"
+}, Q = (t, l) => t ? l.preventDetailPage ? {
+  href: "",
+  type: "unknown",
+  relatedResourceType: "unknown"
+} : l.programType === "film" ? {
+  href: `movie/${l.slug}`,
+  type: "internal-link",
+  relatedResourceType: "film"
+} : {
+  href: `show/${l.slug}`,
+  type: "internal-link",
+  relatedResourceType: "series"
+} : l.seriesPrefix ? {
+  href: "",
+  type: "show-modal",
+  relatedSourceId: l.seriesPrefix,
+  relatedResourceType: "series"
+} : l.titleCode ? {
+  href: "",
+  type: "show-modal",
+  relatedResourceId: l.titleCode,
+  relatedResourceType: "film"
+} : {
+  href: "",
+  type: "unknown",
+  relatedResourceId: "",
+  relatedResourceType: "unknown"
+};
+function ot({
+  series: t,
+  nextAirdate: l = null,
+  titlePosition: U = "left",
+  titleColor: D = "#fff",
+  fullSizeImagePosition: S = [50, 50],
+  mobileImagePosition: M = [50, 50],
+  lazyLoad: O = !0,
+  fetchPriority: j = null,
+  decoding: z = "async",
+  hasSeriesPages: a = !0,
+  handleClicks: A = () => !0,
+  altText: n = "",
+  SCHEDULE_ENDPOINT: F = "",
+  NETWORK: G = ""
+}) {
+  var p, d, u, c, r, g, f, e, h, y, i, w, I, C, b, T, R, v, k, $, x, P;
+  const N = {
+    url: ((d = (p = t == null ? void 0 : t.images) == null ? void 0 : p.slide) == null ? void 0 : d.url) ?? ((c = (u = t == null ? void 0 : t.bannerImage) == null ? void 0 : u.image) == null ? void 0 : c.publicUrl),
+    altText: n,
+    aspectRatio: 2.011764705882353,
+    sources: ((g = (r = t == null ? void 0 : t.images) == null ? void 0 : r.slide) == null ? void 0 : g.url) ?? ((e = (f = t == null ? void 0 : t.bannerImage) == null ? void 0 : f.image) == null ? void 0 : e.sources)
+  }, W = (y = (h = t == null ? void 0 : t.bannerMobileImage) == null ? void 0 : h.image) != null && y.publicUrl ? {
+    url: (w = (i = t == null ? void 0 : t.bannerMobileImage) == null ? void 0 : i.image) == null ? void 0 : w.publicUrl,
+    altText: n,
+    aspectRatio: 388 / 594
+  } : {
+    url: ""
+  }, m = (C = (I = t.logoImage) == null ? void 0 : I.image) != null && C.publicUrl ? `<div class="show-slide__logo-wrapper show-slide--display"><img src="${(v = (R = (T = (b = t.logoImage) == null ? void 0 : b.image) == null ? void 0 : T.sizes) == null ? void 0 : R[0].srcSets) == null ? void 0 : v[0].src}" alt="${t.title}"/></div><h1 class="display-none">${t.title}</h1>` : `<h1>${t.title}</h1>`, q = l === null ? /* @__PURE__ */ o(
+    _,
+    {
+      list: [
+        m,
+        /* @__PURE__ */ o(
+          J,
+          {
+            programId: (t == null ? void 0 : t.seriesPrefix) ?? (t == null ? void 0 : t.titleCode),
+            programType: t != null && t.titleCode ? "film" : "series",
+            separatorType: "pipe",
+            SCHEDULE_ENDPOINT: F,
+            NETWORK: G
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ o(_, { list: [m, /* @__PURE__ */ o(H, { airdateStr: l, separatorType: "pipe" })] }), B = Q(a, t);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: K([L["show-slide"], "show-slide"]),
+      style: {
+        "--show-slide-logo-ratio": (($ = (k = t.logoImage) == null ? void 0 : k.image) == null ? void 0 : $.width) / ((P = (x = t.logoImage) == null ? void 0 : x.image) == null ? void 0 : P.height)
+      },
+      children: /* @__PURE__ */ o(
+        E,
+        {
+          image: N,
+          mobileImage: W,
+          fullSizeImagePosition: S,
+          mobileImagePosition: M,
+          lazyLoad: O,
+          fetchPriority: j,
+          decoding: z,
+          overlayContent: q,
+          overlayPosition: U,
+          overlayTextColor: D,
+          fullCardClickable: !(t != null && t.preventDetailPage),
+          cta: B,
+          handleClicks: a ? () => !0 : A,
+          relatedResourceId: a ? "" : (t == null ? void 0 : t.programType) === "film" ? t == null ? void 0 : t.titleCode : t == null ? void 0 : t.seriesPrefix
+        }
+      )
+    }
+  );
+}
+export {
+  ot as ShowSlide,
+  ot as default
+};

package/dist/components/CarouselSlide/slide-layouts/Show/ShowSlide.stories.d.ts

@@ -0,0 +1,170 @@
+import { default as ShowSlide } from './ShowSlide';
+declare namespace _default {
+    export let title: string;
+    export { ShowSlide as component };
+    export let tags: string[];
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export function Default(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace Default {
+    namespace args {
+        namespace series {
+            let title_1: string;
+            export { title_1 as title };
+            export namespace bannerImage {
+                namespace image {
+                    let publicUrl: string;
+                    let sources: {
+                        srcsets: string[];
+                        media: string;
+                    }[];
+                }
+            }
+            export namespace bannerMobileImage {
+                export namespace image_1 {
+                    let publicUrl_1: string;
+                    export { publicUrl_1 as publicUrl };
+                }
+                export { image_1 as image };
+            }
+            export namespace logoImage {
+                export namespace image_2 {
+                    let publicUrl_2: string;
+                    export { publicUrl_2 as publicUrl };
+                    export let sizes: {
+                        srcSets: {
+                            src: string;
+                        }[];
+                    }[];
+                }
+                export { image_2 as image };
+            }
+            export let slug: string;
+            export let seriesPrefix: string;
+            export let preventDetailPage: boolean;
+        }
+        let nextAirdate: string;
+        let titlePosition: string;
+        let titleColor: string;
+        let fullSizeImagePosition: number[];
+        let mobileImagePosition: number[];
+        let lazyLoad: boolean;
+        let fetchPriority: string;
+        let hasSeriesPages: boolean;
+        function handleClicks(): boolean;
+        let altText: string;
+        let SCHEDULE_ENDPOINT: any;
+        let NETWORK: any;
+    }
+}
+export function FetchAirdate(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace FetchAirdate {
+    export namespace args_1 {
+        export namespace series_1 {
+            let title_2: string;
+            export { title_2 as title };
+            export namespace bannerImage_1 {
+                export namespace image_3 {
+                    let publicUrl_3: string;
+                    export { publicUrl_3 as publicUrl };
+                }
+                export { image_3 as image };
+            }
+            export { bannerImage_1 as bannerImage };
+            export namespace bannerMobileImage_1 {
+                export namespace image_4 {
+                    let publicUrl_4: string;
+                    export { publicUrl_4 as publicUrl };
+                }
+                export { image_4 as image };
+            }
+            export { bannerMobileImage_1 as bannerMobileImage };
+            let slug_1: string;
+            export { slug_1 as slug };
+            let seriesPrefix_1: string;
+            export { seriesPrefix_1 as seriesPrefix };
+        }
+        export { series_1 as series };
+        let nextAirdate_1: null;
+        export { nextAirdate_1 as nextAirdate };
+        let titlePosition_1: string;
+        export { titlePosition_1 as titlePosition };
+        let titleColor_1: string;
+        export { titleColor_1 as titleColor };
+        let fullSizeImagePosition_1: number[];
+        export { fullSizeImagePosition_1 as fullSizeImagePosition };
+        let mobileImagePosition_1: number[];
+        export { mobileImagePosition_1 as mobileImagePosition };
+        let lazyLoad_1: boolean;
+        export { lazyLoad_1 as lazyLoad };
+        let fetchPriority_1: string;
+        export { fetchPriority_1 as fetchPriority };
+        let hasSeriesPages_1: boolean;
+        export { hasSeriesPages_1 as hasSeriesPages };
+        export function handleClicks_1(): boolean;
+        export { handleClicks_1 as handleClicks };
+        let altText_1: string;
+        export { altText_1 as altText };
+        let SCHEDULE_ENDPOINT_1: any;
+        export { SCHEDULE_ENDPOINT_1 as SCHEDULE_ENDPOINT };
+        let NETWORK_1: any;
+        export { NETWORK_1 as NETWORK };
+    }
+    export { args_1 as args };
+}
+export function PreventDetailPage(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace PreventDetailPage {
+    export namespace args_2 {
+        export namespace series_2 {
+            let title_3: string;
+            export { title_3 as title };
+            export namespace bannerImage_2 {
+                export namespace image_5 {
+                    let publicUrl_5: string;
+                    export { publicUrl_5 as publicUrl };
+                }
+                export { image_5 as image };
+            }
+            export { bannerImage_2 as bannerImage };
+            export namespace bannerMobileImage_2 {
+                export namespace image_6 {
+                    let publicUrl_6: string;
+                    export { publicUrl_6 as publicUrl };
+                }
+                export { image_6 as image };
+            }
+            export { bannerMobileImage_2 as bannerMobileImage };
+            let slug_2: string;
+            export { slug_2 as slug };
+            let seriesPrefix_2: string;
+            export { seriesPrefix_2 as seriesPrefix };
+            let preventDetailPage_1: boolean;
+            export { preventDetailPage_1 as preventDetailPage };
+        }
+        export { series_2 as series };
+        let titlePosition_2: string;
+        export { titlePosition_2 as titlePosition };
+        let titleColor_2: string;
+        export { titleColor_2 as titleColor };
+        let fullSizeImagePosition_2: number[];
+        export { fullSizeImagePosition_2 as fullSizeImagePosition };
+        let mobileImagePosition_2: number[];
+        export { mobileImagePosition_2 as mobileImagePosition };
+        let lazyLoad_2: boolean;
+        export { lazyLoad_2 as lazyLoad };
+        let fetchPriority_2: string;
+        export { fetchPriority_2 as fetchPriority };
+        let hasSeriesPages_2: boolean;
+        export { hasSeriesPages_2 as hasSeriesPages };
+        export function handleClicks_2(): boolean;
+        export { handleClicks_2 as handleClicks };
+        let altText_2: string;
+        export { altText_2 as altText };
+        let SCHEDULE_ENDPOINT_2: any;
+        export { SCHEDULE_ENDPOINT_2 as SCHEDULE_ENDPOINT };
+        let NETWORK_2: any;
+        export { NETWORK_2 as NETWORK };
+    }
+    export { args_2 as args };
+}