@scrippsproduct/networks-ui-library 1.1.0-alpha.0 → 1.1.0-alpha.2

package/dist/components/ChannelSearch/ChannelSearch.js

@@ -1,31 +1,29 @@
 import { jsxs as o, jsx as a, Fragment as I } from "react/jsx-runtime";
-import { useRef as C, useState as R, useEffect as x } from "react";
-import { statesForCustomList as T } from "../../data-resources/FakeDataResource.js";
+import { useRef as v, useState as C, useEffect as x } from "react";
+import { statesForCustomList as S } from "../../data-resources/FakeDataResource.js";
 import { publish as V } from "../../utils/events.js";
-import { classes as n } from "../../utils/helpers.js";
+import { classes as l } from "../../utils/helpers.js";
 import { Input as j } from "../Input/Input.js";
 import { CustomDataList as z } from "../CustomDataList/CustomDataList.js";
-import { ActionButton as A } from "../ActionButton/ActionButton.js";
-import { ResultsTable as K } from "../ResultsTable/ResultsTable.js";
+import { ActionButton as K } from "../ActionButton/ActionButton.js";
+import { ResultsTable as A } from "../ResultsTable/ResultsTable.js";
 import { AdBlock as F } from "../AdBlock/AdBlock.js";
-import '../../assets/ChannelSearch.css';const r = {
-  "channel-search": "_channel-search_11pkr_6",
-  "channel-search__inputs": "_channel-search__inputs_11pkr_19",
-  "ad-wrapper": "_ad-wrapper_11pkr_42",
-  "results-table__header": "_results-table__header_11pkr_46",
-  "results-table__header--compact": "_results-table__header--compact_11pkr_53",
-  "channel-search__submit-btn": "_channel-search__submit-btn_11pkr_87",
-  "channel-search__label": "_channel-search__label_11pkr_90"
+import '../../assets/ChannelSearch.css';const n = {
+  "channel-search": "_channel-search_1kyd9_6",
+  "channel-search__inputs": "_channel-search__inputs_1kyd9_19",
+  "ad-wrapper": "_ad-wrapper_1kyd9_42",
+  "results-table__header": "_results-table__header_1kyd9_46",
+  "results-table__header--compact": "_results-table__header--compact_1kyd9_53",
+  "channel-search__submit-btn": "_channel-search__submit-btn_1kyd9_87",
+  "channel-search__label": "_channel-search__label_1kyd9_90"
 };
-function J({
-  network: l,
-  baseApiUrl: $,
-  authApiUrl: Y,
-  ct: E,
-  allowZipcodeSearch: u = !0,
-  allowStateSearch: _ = !0,
-  compactLayout: m = !1,
-  allowAutoScroll: S = !0,
+function M({
+  network: c,
+  baseApiUrl: T,
+  allowZipcodeSearch: _ = !0,
+  allowStateSearch: m = !0,
+  compactLayout: d = !1,
+  allowAutoScroll: $ = !0,
   autoScrollOffset: k = 25,
   ad: i = {
     campaign: "",
@@ -34,9 +32,9 @@ function J({
     content: ""
   }
 }) {
-  const y = C(""), h = async (c = { type: "", term: "" }) => {
-    const f = async () => {
-      const e = `${$}/${l.slug}?${c.type}=${c.term}`;
+  const g = v(""), h = async (r = { type: "", term: "" }) => {
+    const y = async () => {
+      const e = `${T}/${c.slug}?${r.type}=${r.term}`;
       try {
         const t = await fetch(e);
         return t.ok ? (await t.json()).map((s) => ({
@@ -49,23 +47,24 @@ function J({
         return console.error(t), [];
       }
     };
-    return c.term === "" ? [] : await f();
-  }, N = async (c) => {
-    c.preventDefault();
-    const f = new FormData(document.getElementById("channel-search"));
+    return r.term === "" ? [] : await y();
+  }, N = async (r) => {
+    r.preventDefault();
+    const y = new FormData(document.getElementById("channel-search"));
     let e = {};
-    for (let [t, p] of f.entries())
+    for (let [t, p] of y.entries())
       e = {
         ...e,
         [t]: p
       };
-    if (e.zipcode && (e == null ? void 0 : e.zipcode) !== "")
-      d(await h({ type: "zip", term: e.zipcode })), b(!0);
-    else if (e.state && (e == null ? void 0 : e.state) !== "") {
-      const t = T.find((p) => Number.parseInt(p.id, 10) === Number.parseInt(e.state, 10));
-      y.current = t.label, d(await h({ type: "state", term: t.value })), b(!0);
+    if (e.zipcode && (e == null ? void 0 : e.zipcode) !== "") {
+      const t = await h({ type: "zip", term: e.zipcode });
+      u(t.length === 0 ? [] : t), b(!0);
+    } else if (e.state && (e == null ? void 0 : e.state) !== "") {
+      const t = S.find((p) => Number.parseInt(p.id, 10) === Number.parseInt(e.state, 10));
+      g.current = t === void 0 ? "" : t.label, u(await h({ type: "state", term: t == null ? void 0 : t.value })), b(!0);
     } else
-      d(await h()), b(!1);
+      u(await h()), b(!1);
     setTimeout(() => {
       V("scripps:action:completed");
     }, 250);
@@ -86,62 +85,80 @@ function J({
       title: "Cable/Satellite",
       resultKey: "provider"
     }
-  ], [g, d] = R(h()), [w, b] = R(!1), v = C();
+  ], [w, u] = C([]), [R, b] = C(!1), f = v(null);
   return x(() => {
-    w && S && setTimeout(() => {
-      window.scroll({
+    R && $ && setTimeout(() => {
+      f.current !== null && window.scroll({
         left: 0,
-        top: v.current.getBoundingClientRect().y + window.pageYOffset - k,
+        top: f.current.getBoundingClientRect().y + window.pageYOffset - k,
         behavior: "smooth"
       });
-    }, 100);
+    }, 100), (async () => {
+      u(await h());
+    })();
   }), /* @__PURE__ */ o("channel-search__wrapper", { children: [
     /* @__PURE__ */ o(
       "form",
       {
-        className: n([
-          r["channel-search"],
+        className: l([
+          n["channel-search"],
           "channel-search"
         ]),
         id: "channel-search",
         children: [
-          /* @__PURE__ */ o("span", { className: n([r["channel-search__label"], "channel-search__label"]), children: [
-            l.brand_name,
+          /* @__PURE__ */ o("span", { className: l([n["channel-search__label"], "channel-search__label"]), children: [
+            c.brand_name,
             " Channel Search:"
           ] }),
-          /* @__PURE__ */ o("span", { className: n([r["channel-search__inputs"], "channel-search__inputs"]), children: [
-            u && /* @__PURE__ */ a(j, { name: "zipcode", placeholder: "Enter ZIP Code", showValidation: !1 }),
-            u && _ && "or",
-            _ && /* @__PURE__ */ a(z, { name: "state", options: T, placeholder: "Select Your State", showValidation: !1 })
+          /* @__PURE__ */ o("span", { className: l([n["channel-search__inputs"], "channel-search__inputs"]), children: [
+            _ && /* @__PURE__ */ a(j, { name: "zipcode", placeholder: "Enter ZIP Code", showValidation: !1 }),
+            _ && m && "or",
+            m && /* @__PURE__ */ a(
+              z,
+              {
+                name: "state",
+                options: S,
+                placeholder: "Select Your State",
+                showValidation: !1
+              }
+            )
           ] }),
-          /* @__PURE__ */ a(A, { label: "Submit", type: "submit", onClick: N, classname: n(["channel-search__submit-btn", r["channel-search__submit-btn"]]) })
+          /* @__PURE__ */ a(
+            K,
+            {
+              classname: l(["channel-search__submit-btn", n["channel-search__submit-btn"]]),
+              label: "Submit",
+              type: "submit",
+              onClick: N
+            }
+          )
         ]
       }
     ),
-    w && /* @__PURE__ */ o(I, { children: [
+    R && /* @__PURE__ */ o(I, { children: [
       /* @__PURE__ */ a(
         "div",
         {
-          className: n([
-            r["results-table__header"],
+          className: l([
+            n["results-table__header"],
             "search-results-header",
-            m ? r["results-table__header--compact"] : ""
+            d ? n["results-table__header--compact"] : ""
           ]),
-          ref: v,
-          children: g.length > 1 ? `${_ && !u ? y.current : "Your"} ${l.brand_name} Channels` : `Your ${l.brand_name} Channel`
+          ref: f,
+          children: w.length > 1 ? `${m && !_ ? g.current : "Your"} ${c.brand_name} Channels` : `Your ${c.brand_name} Channel`
         }
       ),
       /* @__PURE__ */ a(
-        K,
+        A,
         {
           columns: B,
-          results: g,
-          noResultsMsg: `Sorry there are no channels carrying ${l.brand_name} in your area at this time.`,
-          compactLayout: m
+          compactLayout: d,
+          noResultsMsg: `Sorry there are no channels carrying ${c.brand_name} in your area at this time.`,
+          results: w
         }
       )
     ] }),
-    !m && /* @__PURE__ */ a("div", { className: n([r["ad-wrapper"], "ad-wrapper"]), children: /* @__PURE__ */ a(
+    !d && /* @__PURE__ */ a("div", { className: l([n["ad-wrapper"], "ad-wrapper"]), children: /* @__PURE__ */ a(
       F,
       {
         ad: {
@@ -166,6 +183,6 @@ function J({
   ] });
 }
 export {
-  J as ChannelSearch,
-  J as default
+  M as ChannelSearch,
+  M as default
 };

package/dist/components/ChannelSearch/index.d.ts

@@ -1 +1,2 @@
-export { ChannelSearch, ChannelSearch as default } from './ChannelSearch';
+export { ChannelSearch } from './ChannelSearch';
+export { ChannelSearch as default } from './ChannelSearch';

package/dist/components/ChoicesItem/ChoicesItem.d.ts

@@ -1,5 +1,8 @@
-export function ChoicesItem({ item, handleOnClick }: {
-    item: any;
-    handleOnClick: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { Choice } from '../../types';
+type ChoicesItemProps = {
+    item: Choice;
+    handleOnClick: (id: string) => void;
+    disabled?: boolean;
+};
+export declare function ChoicesItem({ item, handleOnClick }: ChoicesItemProps): JSX.Element;
 export default ChoicesItem;

package/dist/components/ChoicesItem/ChoicesItem.js

@@ -1,8 +1,7 @@
 import "react/jsx-runtime";
-import "react";
 import "../../utils/helpers.js";
-import { C as i, C as p } from "../../ChoicesItem-CGIr6Qga.mjs";
+import { C as r, C as a } from "../../ChoicesItem-CT9fXB0I.mjs";
 export {
-  i as ChoicesItem,
-  p as default
+  r as ChoicesItem,
+  a as default
 };

package/dist/components/ChoicesItem/index.d.ts

@@ -1 +1,2 @@
-export { ChoicesItem, ChoicesItem as default } from './ChoicesItem';
+export { ChoicesItem } from './ChoicesItem';
+export { ChoicesItem as default } from './ChoicesItem';

package/dist/components/ChoicesItem/index.js

@@ -1,4 +1,4 @@
-import { C as o, C as s } from "../../ChoicesItem-CGIr6Qga.mjs";
+import { C as o, C as s } from "../../ChoicesItem-CT9fXB0I.mjs";
 export {
   o as ChoicesItem,
   s as default

package/dist/components/ChoicesList/ChoicesList.d.ts

@@ -1,4 +1,5 @@
-export function ChoicesList({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+type ChoicesListProps = {
+    children: JSX.Element[] | null;
+};
+export declare function ChoicesList({ children }: ChoicesListProps): JSX.Element;
 export default ChoicesList;

package/dist/components/ChoicesList/ChoicesList.js

@@ -1,9 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
-function o({ children: t }) {
+function n({ children: t }) {
   return t === null ? /* @__PURE__ */ r("ul", {}) : /* @__PURE__ */ r("ul", { children: t.length && t.map((u) => u) });
 }
 export {
-  o as ChoicesList,
-  o as default
+  n as ChoicesList,
+  n as default
 };

package/dist/components/ChoicesList/index.d.ts

@@ -1 +1,2 @@
-export { ChoicesList, ChoicesList as default } from './ChoicesList';
+export { ChoicesList } from './ChoicesList';
+export { ChoicesList as default } from './ChoicesList';

package/dist/components/Concat/Concat.d.ts

@@ -1,4 +1,5 @@
-export function Concat({ list }: {
-    list: any;
-}): import("react/jsx-runtime").JSX.Element;
+type ConcatProps = {
+    list: Array<string | JSX.Element | null>;
+};
+export declare function Concat({ list }: ConcatProps): JSX.Element;
 export default Concat;

package/dist/components/Concat/Concat.js

@@ -1,10 +1,10 @@
 import { jsx as a, Fragment as n } from "react/jsx-runtime";
-import o from "react";
+import { Fragment as o } from "react";
 import { p as e } from "../../index-VjANCDXC.mjs";
-function c({ list: t }) {
-  return /* @__PURE__ */ a(n, { children: t.map((r) => /* @__PURE__ */ a(o.Fragment, { children: typeof r == "string" && r !== "" ? e(r) : r }, `react-frag-${Math.round(Math.random() * 1e7)}`)) });
+function s({ list: t }) {
+  return /* @__PURE__ */ a(n, { children: t.map((r) => /* @__PURE__ */ a(o, { children: typeof r == "string" && r !== "" ? e(r) : r }, `react-frag-${Math.round(Math.random() * 1e7)}`)) });
 }
 export {
-  c as Concat,
-  c as default
+  s as Concat,
+  s as default
 };

package/dist/components/Concat/index.d.ts

@@ -1 +1,2 @@
-export { Concat, Concat as default } from './Concat';
+export { Concat } from './Concat';
+export { Concat as default } from './Concat';

package/dist/components/CreateChoiceList/CreateChoiceList.d.ts

@@ -1,6 +1,8 @@
-export function CreateChoiceList({ list, initialItem, handleOnClick }: {
-    list: any;
-    initialItem?: null | undefined;
-    handleOnClick: any;
-}): import("react/jsx-runtime").JSX.Element;
+import { Choice } from '../../types';
+type CreateChoiceListProps = {
+    list: Choice[];
+    initialItem?: Choice | null;
+    handleOnClick: (id: string) => void;
+};
+export declare function CreateChoiceList({ list, initialItem, handleOnClick }: CreateChoiceListProps): JSX.Element;
 export default CreateChoiceList;

package/dist/components/CreateChoiceList/CreateChoiceList.js

@@ -1,14 +1,43 @@
-import { jsxs as c, Fragment as f, jsx as o } from "react/jsx-runtime";
-import "react";
-import { ChoicesList as p } from "../ChoicesList/ChoicesList.js";
-import { C as e } from "../../ChoicesItem-CGIr6Qga.mjs";
-function b({ list: u, initialItem: s = null, handleOnClick: d }) {
+import { jsxs as c, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { ChoicesList as t } from "../ChoicesList/ChoicesList.js";
+import { C as d } from "../../ChoicesItem-CT9fXB0I.mjs";
+function a({ list: o, initialItem: r = null, handleOnClick: u }) {
   return /* @__PURE__ */ c(f, { children: [
-    s && (s == null ? void 0 : s.status) !== "filtered" && /* @__PURE__ */ o(e, { item: s, handleOnClick: d, disabled: (s == null ? void 0 : s.status) === "selected" }, s.id),
-    /* @__PURE__ */ o(p, { children: u.map((r) => r.subcategories.length ? /* @__PURE__ */ o(b, { list: r.subcategories, initialItem: r, handleOnClick: d }, `list-${r.id}`) : r.status !== "filtered" ? /* @__PURE__ */ o(e, { item: r, handleOnClick: d, disabled: r.status === "selected" }, r.id) : "") })
+    r && (r == null ? void 0 : r.status) !== "filtered" && /* @__PURE__ */ e(
+      d,
+      {
+        disabled: (r == null ? void 0 : r.status) === "selected",
+        handleOnClick: u,
+        item: r
+      },
+      r.id
+    ),
+    /* @__PURE__ */ e(t, { children: o.map((s) => s.subcategories.length ? /* @__PURE__ */ e(
+      a,
+      {
+        handleOnClick: u,
+        initialItem: s,
+        list: s.subcategories
+      },
+      `list-${s.id}`
+    ) : s.status === "filtered" ? null : /* @__PURE__ */ e(
+      d,
+      {
+        disabled: s.status === "selected",
+        handleOnClick: u,
+        item: {
+          id: s.id,
+          parent_id: s.parent_id,
+          label: s.label,
+          subcategories: s.subcategories,
+          status: s.status
+        }
+      },
+      s.id
+    )).filter((s) => s !== null) })
   ] });
 }
 export {
-  b as CreateChoiceList,
-  b as default
+  a as CreateChoiceList,
+  a as default
 };

package/dist/components/CreateChoiceList/index.d.ts

@@ -1 +1,2 @@
-export { CreateChoiceList, CreateChoiceList as default } from './CreateChoiceList';
+export { CreateChoiceList } from './CreateChoiceList';
+export { CreateChoiceList as default } from './CreateChoiceList';

package/dist/components/CtaBlock/CtaBlock.d.ts

@@ -1,16 +1,13 @@
-export function CtaBlock({ title, titleImageUrl, content, type, cta, ctaButtonStyle, btnGradientStartColor, btnGradientEndColor, btnFlatColors }: {
-    title?: string | undefined;
-    titleImageUrl?: string | undefined;
-    content?: string | undefined;
-    type?: string | undefined;
-    cta?: {
-        label: string;
-        href: string;
-        type: string;
-    } | undefined;
-    ctaButtonStyle?: string | undefined;
-    btnGradientStartColor?: string | undefined;
-    btnGradientEndColor?: string | undefined;
+import { CTA } from '../../types';
+type CtaBlockProps = {
+    title?: string;
+    titleImageUrl?: string;
+    content?: string | JSX.Element;
+    type?: 'play-video' | 'internal-link' | 'external-link';
+    cta?: CTA;
+    ctaButtonStyle?: 'gradient' | 'flat';
+    btnGradientStartColor?: string;
+    btnGradientEndColor?: string;
     btnFlatColors?: {
         bgColor: string;
         bgHoverColor: string;
@@ -18,6 +15,7 @@ export function CtaBlock({ title, titleImageUrl, content, type, cta, ctaButtonSt
         hoverColor: string;
         borderColor: string;
         borderHoverColor: string;
-    } | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare function CtaBlock({ title, titleImageUrl, content, type, cta, ctaButtonStyle, btnGradientStartColor, btnGradientEndColor, btnFlatColors, }: CtaBlockProps): JSX.Element;
 export default CtaBlock;

package/dist/components/CtaBlock/CtaBlock.js

@@ -1,13 +1,14 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import "react";
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import { p as s } from "../../index-VjANCDXC.mjs";
-import { classes as b } from "../../utils/helpers.js";
-import { GradientButton as h } from "../GradientButton/GradientButton.js";
-import { Button as u } from "../Button/Button.js";
+import { classes as m } from "../../utils/helpers.js";
+import { l as b } from "../../logger-C0N7U0YY.mjs";
+import { GradientButton as u } from "../GradientButton/GradientButton.js";
+import { Button as v } from "../Button/Button.js";
 import '../../assets/CtaBlock.css';const c = {
-  "cta-block__title-img": "_cta-block__title-img_1ia8j_5"
+  "cta-block__title-img": "_cta-block__title-img_8isca_5"
 };
-function A({
+b.setComponent("CtaBlock");
+function N({
   title: o = "",
   titleImageUrl: a = "",
   content: r = "",
@@ -15,8 +16,8 @@ function A({
   cta: e = { label: "", href: "", type: "" },
   ctaButtonStyle: i = "gradient",
   btnGradientStartColor: d = "",
-  btnGradientEndColor: m = "",
-  btnFlatColors: _ = {
+  btnGradientEndColor: g = "",
+  btnFlatColors: p = {
     bgColor: "",
     bgHoverColor: "",
     color: "",
@@ -25,11 +26,11 @@ function A({
     borderHoverColor: ""
   }
 }) {
-  const g = i === "gradient" ? h : u, p = i === "gradient" ? {
+  const _ = i === "gradient" ? u : v, k = i === "gradient" ? {
     gradientStartColor: d,
-    gradientEndColor: m
+    gradientEndColor: g
   } : {
-    customColors: _
+    customColors: p
   }, n = {
     "play-video": {
       label: "View Promo",
@@ -46,10 +47,10 @@ function A({
       target: "_blank",
       rel: "noreferrer"
     }
-  }, k = (C) => {
-    console.log("cta clicked", C);
+  }, C = (f) => {
+    b.log("cta clicked", f);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ h(
     "cta-block",
     {
       style: {
@@ -59,7 +60,7 @@ function A({
         o !== "" && /* @__PURE__ */ l(
           "h1",
           {
-            className: b([
+            className: m([
               "h2",
               a ? c["cta-block__title-img"] : null
             ]),
@@ -68,15 +69,15 @@ function A({
         ),
         r !== "" && /* @__PURE__ */ l("div", { className: c["cta-block__content"], children: typeof r == "string" ? s(r) : r }),
         /* @__PURE__ */ l("cta-wrapper", { children: /* @__PURE__ */ l(
-          g,
+          _,
           {
-            classname: b([c["cta-block__cta"], "cta-block__cta"]),
+            classname: m([c["cta-block__cta"], "cta-block__cta"]),
             href: e.href,
             label: e.label ? e.label : n[t].label,
-            onClick: e.type === "play-video" ? k : () => !0,
             rel: n[t].rel,
             target: n[t].target,
-            ...p
+            onClick: e.type === "play-video" ? C : () => !0,
+            ...k
           }
         ) })
       ]
@@ -84,6 +85,6 @@ function A({
   );
 }
 export {
-  A as CtaBlock,
-  A as default
+  N as CtaBlock,
+  N as default
 };

package/dist/components/CtaBlock/index.d.ts

@@ -1 +1,2 @@
-export { CtaBlock, CtaBlock as default } from './CtaBlock';
+export { CtaBlock } from './CtaBlock';
+export { CtaBlock as default } from './CtaBlock';

package/dist/components/CustomDataList/CustomDataList.d.ts

@@ -1,11 +1,13 @@
-export function CustomDataList({ name, options, label, placeholder, width, multiple, showValidation, ...attributes }: {
-    [x: string]: any;
-    name: any;
-    options: any;
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    width?: number | undefined;
-    multiple?: boolean | undefined;
-    showValidation?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { ChoiceList } from '../../types';
+type CustomDataListProps = {
+    name: string;
+    options: ChoiceList;
+    label?: string;
+    placeholder?: string;
+    width?: number;
+    multiple?: boolean;
+    showValidation?: boolean;
+    [key: string]: unknown;
+};
+export declare function CustomDataList({ name, options, label, placeholder, width, multiple, showValidation, ...attributes }: CustomDataListProps): JSX.Element;
 export default CustomDataList;