@brytdesigns/web-component-keen-slider-navigation-arrows 1.0.22 → 1.1.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
 import html from 'solid-js/html';
-import { createMemo, createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
-import { addPlugin } from '@brytdesigns/web-component-keen-slider';
+import { createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
+import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -63,21 +63,6 @@ var Component = (props, { element }) => {
     return console.warn(
       `${Name}: Needs a proper target in order to properly extend a keen slider.`
     );
-  const target = createMemo(() => {
-    let targetEl = element;
-    if (props.target) targetEl = document.querySelector(props.target);
-    if (!targetEl)
-      return console.warn(
-        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
-      );
-    if (targetEl.tagName !== "KEEN-SLIDER")
-      targetEl = targetEl.querySelector("keen-slider");
-    if (!targetEl)
-      return console.warn(
-        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
-      );
-    return targetEl;
-  });
   const [slider, setSlider] = createSignal();
   const leftArrowTmpl = element.querySelector(
     "template[prev-arrow]"
@@ -131,33 +116,25 @@ var Component = (props, { element }) => {
       addHiddenStyles(element);
     })
   );
-  createEffect(() => {
-    const t = target();
-    if (!t) return;
-    if (props.debug)
-      console.log(`${Name}: Target found, adding plugin`, t, element);
-    const controller = new AbortController();
-    function plugin(slider2) {
-      if (props.debug)
-        console.log(
-          `${Name}: Keen slider navigation arrows plugin added`,
-          slider2,
-          element
-        );
-      setSlider(slider2);
+  withKeenSliderElementContext(
+    () => {
+      const selector = props.target;
+      return () => {
+        let targetEl = element;
+        if (props.target) targetEl = document.querySelector(selector);
+        if (targetEl?.tagName !== "KEEN-SLIDER")
+          targetEl = targetEl.querySelector("keen-slider");
+        return targetEl;
+      };
+    },
+    () => null,
+    ([_, { addPlugin }]) => {
+      addPlugin((slider2) => {
+        setSlider(slider2);
+        slider2.on("destroyed", () => setSlider());
+      });
     }
-    addPlugin({
-      target: t,
-      plugin,
-      controller
-    });
-    return onCleanup(() => {
-      if (props.debug)
-        console.log(`${Name}: Something changed, cleaning up`, element);
-      controller.abort();
-      setSlider(void 0);
-    });
-  });
+  );
   function handlePrev(event) {
     event.preventDefault();
     const s = slider();
@@ -170,6 +147,7 @@ var Component = (props, { element }) => {
     if (!s) return;
     s.next();
   }
+  element.replaceChildren(...[]);
   return html`
     <button
       class="keen-arrow keen-arrow--left"

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/keen-slider-navigation-arrows.ts","../../src/utils.ts","../../src/index.ts"],"names":["slider"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  on,\n  onCleanup,\n  Show,\n} from \"solid-js\";\nimport {\n  addPlugin,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\nimport {\n  isFirstSlide,\n  updateArrows,\n  hasMoreSlides,\n  addVisibleStyles,\n  addHiddenStyles,\n  isLastSlide,\n  srOnly,\n} from \"../utils.js\";\n\nexport type Props = {\n  target: string;\n  class: string;\n  debug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const target = createMemo(() => {\n    let targetEl: HTMLElement | null = element;\n    if (props.target) targetEl = document.querySelector(props.target);\n    if (!targetEl)\n      return console.warn(\n        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n      );\n    if (targetEl.tagName !== \"KEEN-SLIDER\")\n      targetEl = targetEl.querySelector(\"keen-slider\");\n    if (!targetEl)\n      return console.warn(\n        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n      );\n\n    return targetEl;\n  });\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n  const leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[prev-arrow]\",\n  );\n  const rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[next-arrow]\",\n  );\n\n  let leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      if (props.debug) console.log(`${Name}: Slider instantiated`, slider);\n\n      const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n      function hideAddIfDisabled(slider: KeenSliderInstance) {\n        if (slider.options?.disabled)\n          return element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n        return element.removeAttribute(\"data-keen-slider-disabled\");\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (props.debug)\n          console.log(`${Name}: Updating navigation arrows`, element);\n        hideAddIfDisabled(slider);\n        handleArrowsUpdate(slider);\n        if (!hasMoreSlides(slider)) {\n          if (props.debug)\n            console.log(`${Name}: Hiding navigation arrows`, element);\n          addHiddenStyles(element);\n        } else {\n          if (props.debug)\n            console.log(`${Name}: Showing navigation arrows`, element);\n          addVisibleStyles(element);\n        }\n      }\n\n      slider.on(\"created\", handleUpdate);\n      slider.on(\"slideChanged\", handleUpdate);\n      slider.on(\"optionsChanged\", handleUpdate);\n      slider.on(\"destroyed\", handleUpdate);\n\n      return onCleanup(() => {\n        slider.on(\"created\", handleUpdate, true);\n        slider.on(\"slideChanged\", handleUpdate, true);\n        slider.on(\"optionsChanged\", handleUpdate, true);\n        slider.on(\"destroyed\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n      if (props.debug)\n        console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n      addHiddenStyles(element);\n    }),\n  );\n\n  createEffect(() => {\n    const t = target();\n    if (!t) return;\n    if (props.debug)\n      console.log(`${Name}: Target found, adding plugin`, t, element);\n\n    const controller = new AbortController();\n\n    function plugin(slider: KeenSliderInstance) {\n      if (props.debug)\n        console.log(\n          `${Name}: Keen slider navigation arrows plugin added`,\n          slider,\n          element,\n        );\n      setSlider(slider);\n    }\n\n    addPlugin({\n      target: t,\n      plugin,\n      controller,\n    });\n\n    return onCleanup(() => {\n      if (props.debug)\n        console.log(`${Name}: Something changed, cleaning up`, element);\n      controller.abort();\n      setSlider(undefined);\n    });\n  });\n\n  function handlePrev(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n    if (!s) return;\n\n    s.prev();\n  }\n\n  function handleNext(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n\n    if (!s) return;\n    s.next();\n  }\n\n  return html`\n    <button\n      class=\"keen-arrow keen-arrow--left\"\n      disabled=${() => slider() && isFirstSlide(slider()!)}\n      ref=${(el: HTMLElement) => (leftArrow = el)}\n      onClick=${(e: Event) => handlePrev(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Previous slide</span>\n      <${Show} when=${() => leftArrowTmpl}>\n        ${() => leftArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n    <button\n      class=\"keen-arrow keen-arrow--right\"\n      ref=${(el: HTMLElement) => (rightArrow = el)}\n      disabled=${() => slider() && isLastSlide(slider()!)}\n      onClick=${(e: Event) => handleNext(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Next slide</span>\n      <${Show} when=${() => rightArrowTmpl}>\n        ${() => rightArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n  `;\n};\n","import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function hasMoreSlides(slider: KeenSliderInstance) {\n  return slider.track.details.maxIdx > 0;\n}\n\nexport function updateArrows(leftArrow: HTMLElement, rightArrow: HTMLElement) {\n  return function (slider: KeenSliderInstance) {\n    if (!leftArrow || !rightArrow) return;\n    const isFirst = isFirstSlide(slider),\n      isLast = isLastSlide(slider);\n\n    isFirst\n      ? leftArrow.classList.add(\"keen-arrow--disabled\")\n      : leftArrow.classList.remove(\"keen-arrow--disabled\");\n    isFirst\n      ? leftArrow.setAttribute(\"disabled\", \"true\")\n      : leftArrow.removeAttribute(\"disabled\");\n    isLast\n      ? rightArrow.classList.add(\"keen-arrow--disabled\")\n      : rightArrow.classList.remove(\"keen-arrow--disabled\");\n    isLast\n      ? rightArrow.setAttribute(\"disabled\", \"true\")\n      : rightArrow.removeAttribute(\"disabled\");\n  };\n}\n\nexport function isFirstSlide(slider: KeenSliderInstance) {\n  return slider.track.details.rel === 0 && !slider.options?.loop;\n}\n\nexport function isLastSlide(slider: KeenSliderInstance) {\n  return (\n    slider.track.details.rel === slider.track.details.maxIdx &&\n    !slider.options?.loop\n  );\n}\n\nexport function addHiddenStyles(element: HTMLElement) {\n  element.style.setProperty(\"visibility\", \"hidden\", \"important\");\n  element.style.setProperty(\"opacity\", \"0\", \"important\");\n}\n\nexport function addVisibleStyles(element: HTMLElement) {\n  //@ts-ignore\n  element.style.display = null;\n  //@ts-ignore\n  element.style.visibility = null;\n  //@ts-ignore\n  element.style.opacity = null;\n}\n\ntype Options = {\n  element: HTMLElement & ICustomElement;\n};\n\nexport function initializeClasses<Props>(\n  ComponentType = (props: Props, options: Options) => { },\n) {\n  return (props: Props, options: Options) => {\n    const { element } = options;\n    element.classList.add(\"keen-arrows\");\n    addHiddenStyles(element);\n    return ComponentType(props, options);\n  };\n}\n","import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\ncustomShadowlessElement(\n  KeenSliderNavigationArrows.Name,\n  {\n    class: \"\",\n    target: \"\",\n    debug: false,\n  },\n  correctElementType(KeenSliderNavigationArrows.Component),\n  //@ts-ignore\n  initializeClasses,\n);\n"]}
+{"version":3,"sources":["../../src/components/keen-slider-navigation-arrows.ts","../../src/utils.ts","../../src/index.ts"],"names":["slider"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport { createEffect, createSignal, on, onCleanup, Show } from \"solid-js\";\nimport {\n  withKeenSliderElementContext,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\nimport {\n  isFirstSlide,\n  updateArrows,\n  hasMoreSlides,\n  addVisibleStyles,\n  addHiddenStyles,\n  isLastSlide,\n  srOnly,\n} from \"../utils.js\";\n\nexport type Props = {\n  target: string;\n  class: string;\n  debug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n  const leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[prev-arrow]\",\n  );\n  const rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[next-arrow]\",\n  );\n\n  let leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      if (props.debug) console.log(`${Name}: Slider instantiated`, slider);\n\n      const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n      function hideAddIfDisabled(slider: KeenSliderInstance) {\n        if (slider.options?.disabled)\n          return element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n        return element.removeAttribute(\"data-keen-slider-disabled\");\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (props.debug)\n          console.log(`${Name}: Updating navigation arrows`, element);\n        hideAddIfDisabled(slider);\n        handleArrowsUpdate(slider);\n        if (!hasMoreSlides(slider)) {\n          if (props.debug)\n            console.log(`${Name}: Hiding navigation arrows`, element);\n          addHiddenStyles(element);\n        } else {\n          if (props.debug)\n            console.log(`${Name}: Showing navigation arrows`, element);\n          addVisibleStyles(element);\n        }\n      }\n\n      slider.on(\"created\", handleUpdate);\n      slider.on(\"slideChanged\", handleUpdate);\n      slider.on(\"optionsChanged\", handleUpdate);\n      slider.on(\"destroyed\", handleUpdate);\n\n      return onCleanup(() => {\n        slider.on(\"created\", handleUpdate, true);\n        slider.on(\"slideChanged\", handleUpdate, true);\n        slider.on(\"optionsChanged\", handleUpdate, true);\n        slider.on(\"destroyed\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n      if (props.debug)\n        console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n      addHiddenStyles(element);\n    }),\n  );\n\n  withKeenSliderElementContext(\n    () => {\n      const selector = props.target;\n      return () => {\n        let targetEl: Element | null = element;\n        if (props.target) targetEl = document.querySelector(selector);\n        if (targetEl?.tagName !== \"KEEN-SLIDER\")\n          targetEl = targetEl!.querySelector(\"keen-slider\");\n        return targetEl!;\n      };\n    },\n    () => null,\n    ([_, { addPlugin }]) => {\n      addPlugin((slider) => {\n        setSlider(slider);\n        slider.on(\"destroyed\", () => setSlider());\n      });\n    },\n  );\n\n  function handlePrev(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n    if (!s) return;\n\n    s.prev();\n  }\n\n  function handleNext(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n\n    if (!s) return;\n    s.next();\n  }\n\n  element.replaceChildren(...[]);\n\n  return html`\n    <button\n      class=\"keen-arrow keen-arrow--left\"\n      disabled=${() => slider() && isFirstSlide(slider()!)}\n      ref=${(el: HTMLElement) => (leftArrow = el)}\n      onClick=${(e: Event) => handlePrev(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Previous slide</span>\n      <${Show} when=${() => leftArrowTmpl}>\n        ${() => leftArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n    <button\n      class=\"keen-arrow keen-arrow--right\"\n      ref=${(el: HTMLElement) => (rightArrow = el)}\n      disabled=${() => slider() && isLastSlide(slider()!)}\n      onClick=${(e: Event) => handleNext(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Next slide</span>\n      <${Show} when=${() => rightArrowTmpl}>\n        ${() => rightArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n  `;\n};\n","import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function hasMoreSlides(slider: KeenSliderInstance) {\n  return slider.track.details.maxIdx > 0;\n}\n\nexport function updateArrows(leftArrow: HTMLElement, rightArrow: HTMLElement) {\n  return function (slider: KeenSliderInstance) {\n    if (!leftArrow || !rightArrow) return;\n    const isFirst = isFirstSlide(slider),\n      isLast = isLastSlide(slider);\n\n    isFirst\n      ? leftArrow.classList.add(\"keen-arrow--disabled\")\n      : leftArrow.classList.remove(\"keen-arrow--disabled\");\n    isFirst\n      ? leftArrow.setAttribute(\"disabled\", \"true\")\n      : leftArrow.removeAttribute(\"disabled\");\n    isLast\n      ? rightArrow.classList.add(\"keen-arrow--disabled\")\n      : rightArrow.classList.remove(\"keen-arrow--disabled\");\n    isLast\n      ? rightArrow.setAttribute(\"disabled\", \"true\")\n      : rightArrow.removeAttribute(\"disabled\");\n  };\n}\n\nexport function isFirstSlide(slider: KeenSliderInstance) {\n  return slider.track.details.rel === 0 && !slider.options?.loop;\n}\n\nexport function isLastSlide(slider: KeenSliderInstance) {\n  return (\n    slider.track.details.rel === slider.track.details.maxIdx &&\n    !slider.options?.loop\n  );\n}\n\nexport function addHiddenStyles(element: HTMLElement) {\n  element.style.setProperty(\"visibility\", \"hidden\", \"important\");\n  element.style.setProperty(\"opacity\", \"0\", \"important\");\n}\n\nexport function addVisibleStyles(element: HTMLElement) {\n  //@ts-ignore\n  element.style.display = null;\n  //@ts-ignore\n  element.style.visibility = null;\n  //@ts-ignore\n  element.style.opacity = null;\n}\n\ntype Options = {\n  element: HTMLElement & ICustomElement;\n};\n\nexport function initializeClasses<Props>(\n  ComponentType = (props: Props, options: Options) => { },\n) {\n  return (props: Props, options: Options) => {\n    const { element } = options;\n    element.classList.add(\"keen-arrows\");\n    addHiddenStyles(element);\n    return ComponentType(props, options);\n  };\n}\n","import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\ncustomShadowlessElement(\n  KeenSliderNavigationArrows.Name,\n  {\n    class: \"\",\n    target: \"\",\n    debug: false,\n  },\n  correctElementType(KeenSliderNavigationArrows.Component),\n  //@ts-ignore\n  initializeClasses,\n);\n"]}

package/dist/main/components/keen-slider-navigation-arrows.js

@@ -1,6 +1,6 @@
 import html from 'solid-js/html';
-import { createMemo, createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
-import { addPlugin } from '@brytdesigns/web-component-keen-slider';
+import { createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
+import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
 import { updateArrows, hasMoreSlides, addVisibleStyles, addHiddenStyles, isFirstSlide, srOnly, isLastSlide } from '../utils.js';
 
 const Name = `keen-slider-navigation-arrows`;
@@ -9,21 +9,6 @@ const Component = (props, { element }) => {
     return console.warn(
       `${Name}: Needs a proper target in order to properly extend a keen slider.`
     );
-  const target = createMemo(() => {
-    let targetEl = element;
-    if (props.target) targetEl = document.querySelector(props.target);
-    if (!targetEl)
-      return console.warn(
-        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
-      );
-    if (targetEl.tagName !== "KEEN-SLIDER")
-      targetEl = targetEl.querySelector("keen-slider");
-    if (!targetEl)
-      return console.warn(
-        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
-      );
-    return targetEl;
-  });
   const [slider, setSlider] = createSignal();
   const leftArrowTmpl = element.querySelector(
     "template[prev-arrow]"
@@ -77,33 +62,25 @@ const Component = (props, { element }) => {
       addHiddenStyles(element);
     })
   );
-  createEffect(() => {
-    const t = target();
-    if (!t) return;
-    if (props.debug)
-      console.log(`${Name}: Target found, adding plugin`, t, element);
-    const controller = new AbortController();
-    function plugin(slider2) {
-      if (props.debug)
-        console.log(
-          `${Name}: Keen slider navigation arrows plugin added`,
-          slider2,
-          element
-        );
-      setSlider(slider2);
+  withKeenSliderElementContext(
+    () => {
+      const selector = props.target;
+      return () => {
+        let targetEl = element;
+        if (props.target) targetEl = document.querySelector(selector);
+        if (targetEl?.tagName !== "KEEN-SLIDER")
+          targetEl = targetEl.querySelector("keen-slider");
+        return targetEl;
+      };
+    },
+    () => null,
+    ([_, { addPlugin }]) => {
+      addPlugin((slider2) => {
+        setSlider(slider2);
+        slider2.on("destroyed", () => setSlider());
+      });
     }
-    addPlugin({
-      target: t,
-      plugin,
-      controller
-    });
-    return onCleanup(() => {
-      if (props.debug)
-        console.log(`${Name}: Something changed, cleaning up`, element);
-      controller.abort();
-      setSlider(void 0);
-    });
-  });
+  );
   function handlePrev(event) {
     event.preventDefault();
     const s = slider();
@@ -116,6 +93,7 @@ const Component = (props, { element }) => {
     if (!s) return;
     s.next();
   }
+  element.replaceChildren(...[]);
   return html`
     <button
       class="keen-arrow keen-arrow--left"

package/dist/main/components/keen-slider-navigation-arrows.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/keen-slider-navigation-arrows.ts"],"names":["slider"],"mappings":"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","file":"keen-slider-navigation-arrows.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  on,\n  onCleanup,\n  Show,\n} from \"solid-js\";\nimport {\n  addPlugin,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\nimport {\n  isFirstSlide,\n  updateArrows,\n  hasMoreSlides,\n  addVisibleStyles,\n  addHiddenStyles,\n  isLastSlide,\n  srOnly,\n} from \"../utils.js\";\n\nexport type Props = {\n  target: string;\n  class: string;\n  debug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const target = createMemo(() => {\n    let targetEl: HTMLElement | null = element;\n    if (props.target) targetEl = document.querySelector(props.target);\n    if (!targetEl)\n      return console.warn(\n        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n      );\n    if (targetEl.tagName !== \"KEEN-SLIDER\")\n      targetEl = targetEl.querySelector(\"keen-slider\");\n    if (!targetEl)\n      return console.warn(\n        `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n      );\n\n    return targetEl;\n  });\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n  const leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[prev-arrow]\",\n  );\n  const rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[next-arrow]\",\n  );\n\n  let leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      if (props.debug) console.log(`${Name}: Slider instantiated`, slider);\n\n      const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n      function hideAddIfDisabled(slider: KeenSliderInstance) {\n        if (slider.options?.disabled)\n          return element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n        return element.removeAttribute(\"data-keen-slider-disabled\");\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (props.debug)\n          console.log(`${Name}: Updating navigation arrows`, element);\n        hideAddIfDisabled(slider);\n        handleArrowsUpdate(slider);\n        if (!hasMoreSlides(slider)) {\n          if (props.debug)\n            console.log(`${Name}: Hiding navigation arrows`, element);\n          addHiddenStyles(element);\n        } else {\n          if (props.debug)\n            console.log(`${Name}: Showing navigation arrows`, element);\n          addVisibleStyles(element);\n        }\n      }\n\n      slider.on(\"created\", handleUpdate);\n      slider.on(\"slideChanged\", handleUpdate);\n      slider.on(\"optionsChanged\", handleUpdate);\n      slider.on(\"destroyed\", handleUpdate);\n\n      return onCleanup(() => {\n        slider.on(\"created\", handleUpdate, true);\n        slider.on(\"slideChanged\", handleUpdate, true);\n        slider.on(\"optionsChanged\", handleUpdate, true);\n        slider.on(\"destroyed\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n      if (props.debug)\n        console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n      addHiddenStyles(element);\n    }),\n  );\n\n  createEffect(() => {\n    const t = target();\n    if (!t) return;\n    if (props.debug)\n      console.log(`${Name}: Target found, adding plugin`, t, element);\n\n    const controller = new AbortController();\n\n    function plugin(slider: KeenSliderInstance) {\n      if (props.debug)\n        console.log(\n          `${Name}: Keen slider navigation arrows plugin added`,\n          slider,\n          element,\n        );\n      setSlider(slider);\n    }\n\n    addPlugin({\n      target: t,\n      plugin,\n      controller,\n    });\n\n    return onCleanup(() => {\n      if (props.debug)\n        console.log(`${Name}: Something changed, cleaning up`, element);\n      controller.abort();\n      setSlider(undefined);\n    });\n  });\n\n  function handlePrev(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n    if (!s) return;\n\n    s.prev();\n  }\n\n  function handleNext(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n\n    if (!s) return;\n    s.next();\n  }\n\n  return html`\n    <button\n      class=\"keen-arrow keen-arrow--left\"\n      disabled=${() => slider() && isFirstSlide(slider()!)}\n      ref=${(el: HTMLElement) => (leftArrow = el)}\n      onClick=${(e: Event) => handlePrev(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Previous slide</span>\n      <${Show} when=${() => leftArrowTmpl}>\n        ${() => leftArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n    <button\n      class=\"keen-arrow keen-arrow--right\"\n      ref=${(el: HTMLElement) => (rightArrow = el)}\n      disabled=${() => slider() && isLastSlide(slider()!)}\n      onClick=${(e: Event) => handleNext(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Next slide</span>\n      <${Show} when=${() => rightArrowTmpl}>\n        ${() => rightArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n  `;\n};\n"]}
+{"version":3,"sources":["../../../src/components/keen-slider-navigation-arrows.ts"],"names":["slider"],"mappings":"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","file":"keen-slider-navigation-arrows.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport { createEffect, createSignal, on, onCleanup, Show } from \"solid-js\";\nimport {\n  withKeenSliderElementContext,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\nimport {\n  isFirstSlide,\n  updateArrows,\n  hasMoreSlides,\n  addVisibleStyles,\n  addHiddenStyles,\n  isLastSlide,\n  srOnly,\n} from \"../utils.js\";\n\nexport type Props = {\n  target: string;\n  class: string;\n  debug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n    );\n\n  const [slider, setSlider] = createSignal<KeenSliderInstance>();\n  const leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[prev-arrow]\",\n  );\n  const rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n    \"template[next-arrow]\",\n  );\n\n  let leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n  createEffect(\n    on(slider, (slider) => {\n      if (!slider) return;\n      if (props.debug) console.log(`${Name}: Slider instantiated`, slider);\n\n      const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n      function hideAddIfDisabled(slider: KeenSliderInstance) {\n        if (slider.options?.disabled)\n          return element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n        return element.removeAttribute(\"data-keen-slider-disabled\");\n      }\n\n      function handleUpdate(slider: KeenSliderInstance) {\n        if (props.debug)\n          console.log(`${Name}: Updating navigation arrows`, element);\n        hideAddIfDisabled(slider);\n        handleArrowsUpdate(slider);\n        if (!hasMoreSlides(slider)) {\n          if (props.debug)\n            console.log(`${Name}: Hiding navigation arrows`, element);\n          addHiddenStyles(element);\n        } else {\n          if (props.debug)\n            console.log(`${Name}: Showing navigation arrows`, element);\n          addVisibleStyles(element);\n        }\n      }\n\n      slider.on(\"created\", handleUpdate);\n      slider.on(\"slideChanged\", handleUpdate);\n      slider.on(\"optionsChanged\", handleUpdate);\n      slider.on(\"destroyed\", handleUpdate);\n\n      return onCleanup(() => {\n        slider.on(\"created\", handleUpdate, true);\n        slider.on(\"slideChanged\", handleUpdate, true);\n        slider.on(\"optionsChanged\", handleUpdate, true);\n        slider.on(\"destroyed\", handleUpdate, true);\n      });\n    }),\n  );\n\n  createEffect(\n    on(slider, (slider) => {\n      if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n      if (props.debug)\n        console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n      addHiddenStyles(element);\n    }),\n  );\n\n  withKeenSliderElementContext(\n    () => {\n      const selector = props.target;\n      return () => {\n        let targetEl: Element | null = element;\n        if (props.target) targetEl = document.querySelector(selector);\n        if (targetEl?.tagName !== \"KEEN-SLIDER\")\n          targetEl = targetEl!.querySelector(\"keen-slider\");\n        return targetEl!;\n      };\n    },\n    () => null,\n    ([_, { addPlugin }]) => {\n      addPlugin((slider) => {\n        setSlider(slider);\n        slider.on(\"destroyed\", () => setSlider());\n      });\n    },\n  );\n\n  function handlePrev(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n    if (!s) return;\n\n    s.prev();\n  }\n\n  function handleNext(event: Event) {\n    event.preventDefault();\n\n    const s = slider();\n\n    if (!s) return;\n    s.next();\n  }\n\n  element.replaceChildren(...[]);\n\n  return html`\n    <button\n      class=\"keen-arrow keen-arrow--left\"\n      disabled=${() => slider() && isFirstSlide(slider()!)}\n      ref=${(el: HTMLElement) => (leftArrow = el)}\n      onClick=${(e: Event) => handlePrev(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Previous slide</span>\n      <${Show} when=${() => leftArrowTmpl}>\n        ${() => leftArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n    <button\n      class=\"keen-arrow keen-arrow--right\"\n      ref=${(el: HTMLElement) => (rightArrow = el)}\n      disabled=${() => slider() && isLastSlide(slider()!)}\n      onClick=${(e: Event) => handleNext(e)}\n      type=\"button\"\n    >\n      <span style=${srOnly}>Next slide</span>\n      <${Show} when=${() => rightArrowTmpl}>\n        ${() => rightArrowTmpl?.content.cloneNode(true)}\n      <//>\n    </button>\n  `;\n};\n"]}

package/dist/main/index.js

@@ -1,4 +1,4 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
 import { KeenSliderNavigationArrows } from './components/index.js';
 import { initializeClasses } from './utils.js';
 

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAOA,uBAAA;AAAA,EACE,0BAA2B,CAAA,IAAA;AAAA,EAC3B;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,MAAQ,EAAA,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,kBAAA,CAAmB,2BAA2B,SAAS,CAAA;AAAA;AAAA,EAEvD;AACF,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\ncustomShadowlessElement(\n  KeenSliderNavigationArrows.Name,\n  {\n    class: \"\",\n    target: \"\",\n    debug: false,\n  },\n  correctElementType(KeenSliderNavigationArrows.Component),\n  //@ts-ignore\n  initializeClasses,\n);\n"]}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAOA,uBAAA;AAAA,EACE,0BAA2B,CAAA,IAAA;AAAA,EAC3B;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,MAAQ,EAAA,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,GACT;AAAA,EACA,kBAAA,CAAmB,2BAA2B,SAAS,CAAA;AAAA;AAAA,EAEvD;AACF,CAAA","file":"index.js","sourcesContent":["import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\ncustomShadowlessElement(\n  KeenSliderNavigationArrows.Name,\n  {\n    class: \"\",\n    target: \"\",\n    debug: false,\n  },\n  correctElementType(KeenSliderNavigationArrows.Component),\n  //@ts-ignore\n  initializeClasses,\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-keen-slider-navigation-arrows",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "Keen slider navigation arrows web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -22,8 +22,8 @@
     "component-register": "^0.8.7",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.7",
-    "@brytdesigns/web-component-keen-slider": "1.0.14",
-    "@brytdesigns/web-component-utils": "0.1.14"
+    "@brytdesigns/web-component-keen-slider": "1.1.0",
+    "@brytdesigns/web-component-core": "1.1.2"
   },
   "devDependencies": {
     "dts-bundle-generator": "^9.5.1",