fix(NO-TICKET): fix error in slider-element, cause by missing items c…

.github/workflows/npm-run-test.yml

@@ -14,11 +14,11 @@ jobs:
         with:
           node-version: 12
           registry-url: https://npm.pkg.github.com/
-          scope: "@webtides"
+          scope: '@webtides'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

.github/workflows/publish-npm.yaml

@@ -17,11 +17,11 @@ jobs:
         with:
           node-version: 12
           registry-url: https://npm.pkg.github.com/
-          scope: "@webtides"
+          scope: '@webtides'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -42,11 +42,11 @@ jobs:
         with:
           node-version: 12
           registry-url: https://npm.pkg.github.com/
-          scope: "@webtides"
+          scope: '@webtides'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

packages/interactions/slider-element/CHANGELOG.md

@@ -15,6 +15,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## [0.4.16] - 2025-11-25
+
+-       fix error in slider-element, cause by missing items check
+
 ## [0.4.15] - 2022-07-21
 
 ### Changed

packages/interactions/slider-element/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/slider-element",
-	"version": "0.4.15",
+	"version": "0.4.16",
 	"description": "A slider element that lets you slide child elements",
 	"author": "@webtides",
 	"homepage": "https://github.com/webtides/element-library",

packages/interactions/slider-element/src/slider-element.js

@@ -12,21 +12,6 @@ export default class SliderElement extends TemplateElement {
 		super({ shadowRender: true, deferUpdate: true, adoptGlobalStyles: false, styles: [style], ...options });
 	}
 
-	properties() {
-		return {
-			itemSelector: '.item',
-			itemsToShow: 1,
-			itemsToScroll: 1,
-			rewind: false,
-			selectedIndex: 0,
-			autoSelect: false,
-			dots: true,
-			arrows: true,
-			setIndexAfterResize: true,
-			manualScrollEndDelay: 200,
-		};
-	}
-
 	get canSlide() {
 		if (!this.$refs.scroller) {
 			return false;
@@ -42,6 +27,21 @@ export default class SliderElement extends TemplateElement {
 		return this.selectedIndex < this.itemsCount;
 	}
 
+	properties() {
+		return {
+			itemSelector: '.item',
+			itemsToShow: 1,
+			itemsToScroll: 1,
+			rewind: false,
+			selectedIndex: 0,
+			autoSelect: false,
+			dots: true,
+			arrows: true,
+			setIndexAfterResize: true,
+			manualScrollEndDelay: 200,
+		};
+	}
+
 	connected() {
 		this.indexItems();
 		this.requestUpdate().then(() => {
@@ -96,13 +96,15 @@ export default class SliderElement extends TemplateElement {
 		if (this.autoSelect && this.canSlide) {
 			//check if element is already visible
 			const target = this.items[this.selectedIndex];
-			const parent = this.$refs.scroller;
-			const { marginLeft, marginRight } = getComputedStyle(target);
-			const targetWidth = target.offsetWidth + parseInt(marginLeft) + parseInt(marginRight);
-			if (target.offsetLeft + targetWidth < parent.scrollLeft + parent.offsetWidth) {
-				// means is in bounds
-				this.next();
-				return;
+			if (target) {
+				const parent = this.$refs.scroller;
+				const { marginLeft, marginRight } = getComputedStyle(target);
+				const targetWidth = target.offsetWidth + parseInt(marginLeft) + parseInt(marginRight);
+				if (target.offsetLeft + targetWidth < parent.scrollLeft + parent.offsetWidth) {
+					// means is in bounds
+					this.next();
+					return;
+				}
 			}
 		}
 		this.scrollToIndex();
@@ -115,15 +117,16 @@ export default class SliderElement extends TemplateElement {
 		if (this.autoSelect && this.canSlide) {
 			//check if element is already visible
 			const target = this.items[this.selectedIndex];
-			const { marginLeft } = getComputedStyle(target);
-			const parent = this.$refs.scroller;
-			if (target.offsetLeft - parseInt(marginLeft) > parent.scrollLeft) {
-				// means is still in viewport
-				this.previous();
-				return;
+			if (target) {
+				const { marginLeft } = getComputedStyle(target);
+				const parent = this.$refs.scroller;
+				if (target.offsetLeft - parseInt(marginLeft) > parent.scrollLeft) {
+					// means is still in viewport
+					this.previous();
+					return;
+				}
 			}
 		}
-
 		this.scrollToIndex();
 	}
 
@@ -150,6 +153,8 @@ export default class SliderElement extends TemplateElement {
 			this.startScrollEndTimer();
 		}
 		const target = this.items[this.selectedIndex];
+		if (!target) return;
+
 		const parent = this.$refs.scroller;
 		const parentWidth = parent.offsetWidth;
 

packages/interactions/slider-element/stories/slider-element.stories.js

@@ -145,6 +145,10 @@ export const variableWidthEdgeFocusVariant = () => html`
 	</slider-element>
 `;
 
+export const noItemsVariant = () => html`
+	<slider-element arrows="false"></slider-element>
+`;
+
 class RenderingElement extends TemplateElement {
 	constructor() {
 		super({ shadowRender: false, deferUpdate: true });