@aquera/nile-elements 1.4.3-beta-1.0 → 1.4.4-beta-1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/demo/index.html +65 -25
- package/dist/index.js +28 -50
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +1 -1
- package/dist/nile-carousel/carousel-helpers.cjs.js +1 -1
- package/dist/nile-carousel/carousel-helpers.cjs.js.map +1 -1
- package/dist/nile-carousel/carousel-helpers.esm.js +1 -1
- package/dist/nile-carousel/index.cjs.js +1 -1
- package/dist/nile-carousel/index.esm.js +1 -1
- package/dist/nile-carousel/nile-carousel.cjs.js +1 -1
- package/dist/nile-carousel/nile-carousel.cjs.js.map +1 -1
- package/dist/nile-carousel/nile-carousel.css.cjs.js +1 -1
- package/dist/nile-carousel/nile-carousel.css.cjs.js.map +1 -1
- package/dist/nile-carousel/nile-carousel.css.esm.js +10 -40
- package/dist/nile-carousel/nile-carousel.esm.js +27 -19
- package/dist/src/nile-auto-complete/nile-auto-complete.js +1 -1
- package/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -1
- package/dist/src/nile-carousel/carousel-helpers.d.ts +3 -3
- package/dist/src/nile-carousel/carousel-helpers.js +21 -6
- package/dist/src/nile-carousel/carousel-helpers.js.map +1 -1
- package/dist/src/nile-carousel/nile-carousel.css.js +8 -38
- package/dist/src/nile-carousel/nile-carousel.css.js.map +1 -1
- package/dist/src/nile-carousel/nile-carousel.d.ts +3 -0
- package/dist/src/nile-carousel/nile-carousel.js +45 -11
- package/dist/src/nile-carousel/nile-carousel.js.map +1 -1
- package/dist/src/version.js +2 -2
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.ts +1 -1
- package/src/nile-carousel/carousel-helpers.ts +23 -6
- package/src/nile-carousel/nile-carousel.css.ts +8 -38
- package/src/nile-carousel/nile-carousel.ts +40 -11
- package/vscode-html-custom-data.json +18 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel-helpers.js","sourceRoot":"","sources":["../../../src/nile-carousel/carousel-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,MAAM,UAAU,cAAc,CAAC,OAAoB;IACjD,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAA0B,EAC1B,eAA4B;IAE5B,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QACvC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;IACpE,IAAI,gBAAgB,GAA4B,IAAI,CAAC;IACrD,IAAI,cAAc,GAAG,CAAC,CAAC;IAEvB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAC1G,CAAC;QAEF,IAAI,YAAY,GAAG,cAAc,EAAE,CAAC;YAClC,cAAc,GAAG,YAAY,CAAC;YAC9B,gBAAgB,GAAG,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,WAAmB,EAAE,aAAqB,EAAE,aAAqB;IAC5F,MAAM,KAAK,GAAG,CAAC,WAAW,GAAG,aAAa,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;IAChE,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,WAAmB,EAAE,aAAqB;IACvE,OAAO,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"carousel-helpers.js","sourceRoot":"","sources":["../../../src/nile-carousel/carousel-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,MAAM,UAAU,cAAc,CAAC,OAAoB;IACjD,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAA0B,EAC1B,eAA4B;IAE5B,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QACvC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;IACpE,IAAI,gBAAgB,GAA4B,IAAI,CAAC;IACrD,IAAI,cAAc,GAAG,CAAC,CAAC;IAEvB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAC1G,CAAC;QAEF,IAAI,YAAY,GAAG,cAAc,EAAE,CAAC;YAClC,cAAc,GAAG,YAAY,CAAC;YAC9B,gBAAgB,GAAG,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,WAAmB,EAAE,aAAqB,EAAE,aAAqB;IAC5F,MAAM,KAAK,GAAG,CAAC,WAAW,GAAG,aAAa,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;IAChE,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,WAAmB,EAAE,aAAqB;IACvE,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,WAAmB,EAAE,SAAiB,EAAE,OAAgB,KAAK;IACzF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,WAAmB,EAAE,OAAgB,KAAK;IACtE,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,WAAW,GAAG,CAAC,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,UAAkB,EAAE,aAAqB;IACzE,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC,GAAG,aAAa,KAAK,CAAC,CAAC;AAC5D,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,SAAkB,EAClB,aAAsB,EACtB,mBAA2B,EAC3B,kBAA0B;IAE1B,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;IACrD,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;IAElD,OAAO;QACL,IAAI,EAAE,QAAQ,GAAG,mBAAmB;QACpC,GAAG,EAAE,OAAO,GAAG,kBAAkB;KAClC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,KAAkB,EAClB,eAA4B,EAC5B,WAA2B,QAAQ,EACnC,qBAA+C;IAE/C,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;QACpE,MAAM,aAAa,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAEpD,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;QAC/D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,GAAG,mBAAmB,CAAC,GAAG,CAAC;QAE5D,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,MAAM,cAAc,GAAG,uBAAuB,CAC5C,aAAa,EACb,mBAAmB,EACnB,eAAe,CAAC,UAAU,EAC1B,eAAe,CAAC,SAAS,CAC1B,CAAC;YAEF,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,eAAe,CAAC,QAAQ,CAAC;gBACvB,IAAI,EAAE,cAAc,CAAC,IAAI;gBACzB,GAAG,EAAE,cAAc,CAAC,GAAG;gBACvB,QAAQ;aACT,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,SAAS,CACvB,KAAa,EACb,MAAqB,EACrB,aAAqB,EACrB,WAA2B,QAAQ,EACnC,OAAgB,KAAK;IAErB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,cAAsB,CAAC;IAC3B,IAAI,cAAsB,CAAC;IAE3B,IAAI,IAAI,EAAE,CAAC;QACT,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC;QAClC,cAAc,GAAG,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,WAAW,CAAC,GAAG,WAAW,CAAC;QACrE,cAAc,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC;IAC3E,CAAC;SAAM,CAAC;QACN,cAAc,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC;QAChE,cAAc,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEzC,OAAO;QACL,cAAc;QACd,aAAa,EAAE,SAAS;KACzB,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport type NileCarouselItem from './nile-carousel-item/nile-carousel-item';\nimport { clamp } from '../internal/math';\nimport { prefersReducedMotion } from '../internal/animate';\n\nexport function isCarouselItem(element: HTMLElement): boolean {\n return element.tagName.toLowerCase() === 'nile-carousel-item';\n}\n\nexport function findMostVisibleSlide(\n slides: NileCarouselItem[],\n scrollContainer: HTMLElement\n): NileCarouselItem | null {\n if (!slides.length || !scrollContainer) {\n return null;\n }\n\n const scrollContainerRect = scrollContainer.getBoundingClientRect();\n let mostVisibleSlide: NileCarouselItem | null = null;\n let maxVisibleArea = 0;\n\n slides.forEach((slide) => {\n const slideRect = slide.getBoundingClientRect();\n const visibleWidth = Math.max(\n 0,\n Math.min(slideRect.right, scrollContainerRect.right) - Math.max(slideRect.left, scrollContainerRect.left)\n );\n\n if (visibleWidth > maxVisibleArea) {\n maxVisibleArea = visibleWidth;\n mostVisibleSlide = slide;\n }\n });\n\n return mostVisibleSlide;\n}\n\nexport function getPageCount(slidesCount: number, slidesPerPage: number, slidesPerMove: number): number {\n const pages = (slidesCount - slidesPerPage) / slidesPerMove + 1;\n return Math.ceil(pages);\n}\n\nexport function getCurrentPage(activeSlide: number, slidesPerMove: number): number {\n return Math.floor(activeSlide / slidesPerMove);\n}\n\nexport function canScrollNext(currentPage: number, pageCount: number, loop: boolean = false): boolean {\n if (loop) {\n return true;\n }\n return currentPage < pageCount - 1;\n}\n\nexport function canScrollPrev(currentPage: number, loop: boolean = false): boolean {\n if (loop) {\n return true;\n }\n return currentPage > 0;\n}\n\nexport function shouldSnapToSlide(slideIndex: number, slidesPerMove: number): boolean {\n return (slideIndex + slidesPerMove) % slidesPerMove === 0;\n}\n\nexport function calculateScrollPosition(\n slideRect: DOMRect,\n containerRect: DOMRect,\n containerScrollLeft: number,\n containerScrollTop: number\n): { left: number; top: number } {\n const nextLeft = slideRect.left - containerRect.left;\n const nextTop = slideRect.top - containerRect.top;\n\n return {\n left: nextLeft + containerScrollLeft,\n top: nextTop + containerScrollTop\n };\n}\n\nexport function scrollToSlide(\n slide: HTMLElement,\n scrollContainer: HTMLElement,\n behavior: ScrollBehavior = 'smooth',\n setPendingSlideChange: (value: boolean) => void\n): void {\n setPendingSlideChange(true);\n window.requestAnimationFrame(() => {\n if (!scrollContainer) {\n return;\n }\n\n const scrollContainerRect = scrollContainer.getBoundingClientRect();\n const nextSlideRect = slide.getBoundingClientRect();\n\n const nextLeft = nextSlideRect.left - scrollContainerRect.left;\n const nextTop = nextSlideRect.top - scrollContainerRect.top;\n\n if (nextLeft || nextTop) {\n const scrollPosition = calculateScrollPosition(\n nextSlideRect,\n scrollContainerRect,\n scrollContainer.scrollLeft,\n scrollContainer.scrollTop\n );\n\n setPendingSlideChange(true);\n scrollContainer.scrollTo({\n left: scrollPosition.left,\n top: scrollPosition.top,\n behavior\n });\n } else {\n setPendingSlideChange(false);\n }\n });\n}\n\nexport function goToSlide(\n index: number,\n slides: HTMLElement[],\n slidesPerPage: number,\n behavior: ScrollBehavior = 'smooth',\n loop: boolean = false\n): { newActiveSlide: number; slideToScroll: HTMLElement } | null {\n if (!slides.length) {\n return null;\n }\n\n let newActiveSlide: number;\n let nextSlideIndex: number;\n\n if (loop) {\n const totalSlides = slides.length;\n nextSlideIndex = ((index % totalSlides) + totalSlides) % totalSlides;\n newActiveSlide = clamp(nextSlideIndex, 0, slides.length - slidesPerPage);\n } else {\n newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);\n nextSlideIndex = clamp(index, 0, slides.length - 1);\n }\n\n const nextSlide = slides[nextSlideIndex];\n\n return {\n newActiveSlide,\n slideToScroll: nextSlide\n };\n}\n\n"]}
|
|
@@ -26,6 +26,14 @@ export const styles = css `
|
|
|
26
26
|
align-items: center;
|
|
27
27
|
gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
|
|
28
28
|
width: 100%;
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.carousel__navigation-wrapper--top-right {
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: flex-end;
|
|
35
|
+
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
36
|
+
margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
.carousel__slides {
|
|
@@ -61,50 +69,12 @@ export const styles = css `
|
|
|
61
69
|
min-width: 0;
|
|
62
70
|
}
|
|
63
71
|
|
|
64
|
-
.carousel__navigation-button {
|
|
65
|
-
display: inline-flex;
|
|
66
|
-
align-items: center;
|
|
67
|
-
justify-content: center;
|
|
68
|
-
width: 2.5rem;
|
|
69
|
-
height: 2.5rem;
|
|
70
|
-
padding: 0;
|
|
71
|
-
background: rgba(255, 255, 255, 0.9);
|
|
72
|
-
border: 1px solid var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
|
|
73
|
-
border-radius: 50%;
|
|
74
|
-
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
|
|
78
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.carousel__navigation-button:hover:not(.carousel__navigation-button--disabled) {
|
|
82
|
-
background: rgba(255, 255, 255, 1);
|
|
83
|
-
border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));
|
|
84
|
-
transform: scale(1.1);
|
|
85
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.carousel__navigation-button:active:not(.carousel__navigation-button--disabled) {
|
|
89
|
-
background: rgba(255, 255, 255, 1);
|
|
90
|
-
transform: scale(0.95);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
72
|
.carousel__navigation-button--disabled {
|
|
94
73
|
opacity: 0.4;
|
|
95
74
|
cursor: not-allowed;
|
|
96
75
|
pointer-events: none;
|
|
97
76
|
}
|
|
98
77
|
|
|
99
|
-
.carousel__navigation-button:focus {
|
|
100
|
-
outline: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.carousel__navigation-button:focus-visible {
|
|
104
|
-
outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
|
|
105
|
-
outline-offset: 2px;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
78
|
.carousel__pagination {
|
|
109
79
|
display: flex;
|
|
110
80
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-carousel.css.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-carousel.css.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Carousel CSS\n */\nexport const styles = css`\n :host {\n --slide-gap: var(--nile-spacing-md, var(--ng-spacing-md));\n display: block;\n position: relative;\n }\n\n .carousel {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n .carousel__content-wrapper {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n width: 100%;\n position: relative;\n }\n\n .carousel__navigation-wrapper--top-right {\n display: flex;\n justify-content: flex-end;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .carousel__slides {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n gap: var(--slide-gap);\n padding: 0;\n scrollbar-width: none;\n -ms-overflow-style: none;\n flex: 1;\n min-width: 0;\n }\n\n .carousel__slides::-webkit-scrollbar {\n display: none;\n }\n\n .carousel__slides:focus {\n outline: none;\n }\n\n .carousel__slides:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n outline-offset: 2px;\n }\n\n ::slotted(nile-carousel-item) {\n flex: 0 0 calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));\n min-width: 0;\n }\n\n .carousel__navigation-button--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .carousel__pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n margin-top: var(--nile-spacing-md, var(--ng-spacing-md));\n position: relative;\n z-index: 2;\n }\n\n .carousel__pagination-item {\n width: 0.75rem;\n height: 0.75rem;\n padding: 0;\n background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border: 2px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.1s ease, transform 0.1s ease, border-color 0.1s ease, width 0.1s ease, height 0.1s ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n }\n\n .carousel__pagination-item:hover {\n background: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));\n transform: scale(1.15);\n border-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));\n }\n\n .carousel__pagination-item--active {\n width: 0.875rem;\n height: 0.875rem;\n background: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n }\n\n .carousel__pagination-item:focus {\n outline: none;\n }\n\n .carousel__pagination-item:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n outline-offset: 2px;\n }\n\n :host([hidden]) {\n display: none;\n }\n`;\n\nexport default [styles];\n\n"]}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import '../nile-icon';
|
|
8
|
+
import '../nile-button';
|
|
8
9
|
import './nile-carousel-item/nile-carousel-item';
|
|
9
10
|
import { CSSResultArray, TemplateResult } from 'lit';
|
|
10
11
|
import NileElement from '../internal/nile-element';
|
|
@@ -13,6 +14,8 @@ export declare class NileCarousel extends NileElement {
|
|
|
13
14
|
static styles: CSSResultArray;
|
|
14
15
|
navigation: boolean;
|
|
15
16
|
pagination: boolean;
|
|
17
|
+
loop: boolean;
|
|
18
|
+
navigationPosition: 'sides' | 'top-right';
|
|
16
19
|
slidesPerPage: number;
|
|
17
20
|
slidesPerMove: number;
|
|
18
21
|
scrollContainer: HTMLElement;
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { __decorate } from "tslib";
|
|
8
8
|
import '../nile-icon';
|
|
9
|
+
import '../nile-button';
|
|
9
10
|
import './nile-carousel-item/nile-carousel-item';
|
|
10
11
|
import { html } from 'lit';
|
|
11
12
|
import { classMap } from 'lit/directives/class-map.js';
|
|
@@ -22,6 +23,8 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
22
23
|
super(...arguments);
|
|
23
24
|
this.navigation = false;
|
|
24
25
|
this.pagination = false;
|
|
26
|
+
this.loop = false;
|
|
27
|
+
this.navigationPosition = 'sides';
|
|
25
28
|
this.slidesPerPage = 1;
|
|
26
29
|
this.slidesPerMove = 1;
|
|
27
30
|
this.activeSlide = 0;
|
|
@@ -92,10 +95,10 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
92
95
|
return getCurrentPage(this.activeSlide, this.slidesPerMove);
|
|
93
96
|
}
|
|
94
97
|
canScrollNext() {
|
|
95
|
-
return canScrollNext(this.getCurrentPage(), this.getPageCount());
|
|
98
|
+
return canScrollNext(this.getCurrentPage(), this.getPageCount(), this.loop);
|
|
96
99
|
}
|
|
97
100
|
canScrollPrev() {
|
|
98
|
-
return canScrollPrev(this.getCurrentPage());
|
|
101
|
+
return canScrollPrev(this.getCurrentPage(), this.loop);
|
|
99
102
|
}
|
|
100
103
|
getSlides() {
|
|
101
104
|
return [...this.children].filter((el) => isCarouselItem(el));
|
|
@@ -166,15 +169,28 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
166
169
|
});
|
|
167
170
|
}
|
|
168
171
|
previous(behavior = 'smooth') {
|
|
169
|
-
|
|
172
|
+
const slides = this.getSlides();
|
|
173
|
+
if (this.loop && this.activeSlide === 0) {
|
|
174
|
+
this.goToSlide(slides.length - this.slidesPerMove, behavior);
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
|
|
178
|
+
}
|
|
170
179
|
}
|
|
171
180
|
next(behavior = 'smooth') {
|
|
172
|
-
|
|
181
|
+
const slides = this.getSlides();
|
|
182
|
+
const maxIndex = slides.length - this.slidesPerPage;
|
|
183
|
+
if (this.loop && this.activeSlide >= maxIndex) {
|
|
184
|
+
this.goToSlide(0, behavior);
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
|
|
188
|
+
}
|
|
173
189
|
}
|
|
174
190
|
goToSlide(index, behavior = 'smooth') {
|
|
175
191
|
const { slidesPerPage } = this;
|
|
176
192
|
const slides = this.getSlides();
|
|
177
|
-
const result = goToSlideHelper(index, slides, slidesPerPage, behavior);
|
|
193
|
+
const result = goToSlideHelper(index, slides, slidesPerPage, behavior, this.loop);
|
|
178
194
|
if (!result || !this.scrollContainer) {
|
|
179
195
|
return;
|
|
180
196
|
}
|
|
@@ -186,21 +202,26 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
186
202
|
}
|
|
187
203
|
renderNavigationButton(direction, enabled, onClick) {
|
|
188
204
|
const isPrevious = direction === 'previous';
|
|
189
|
-
const iconName = isPrevious
|
|
205
|
+
const iconName = isPrevious
|
|
206
|
+
? 'var(--nile-icon-arrow-left, var(--ng-icon-arrow-narrow-left))'
|
|
207
|
+
: 'var(--nile-icon-arrow-right, var(--ng-icon-arrow-narrow-right))';
|
|
190
208
|
const slotName = isPrevious ? 'previous-icon' : 'next-icon';
|
|
191
209
|
const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';
|
|
192
210
|
const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';
|
|
211
|
+
const isTopRight = this.navigationPosition === 'top-right';
|
|
193
212
|
return html `
|
|
194
|
-
<button
|
|
213
|
+
<nile-button
|
|
195
214
|
part="navigation-button ${partName}"
|
|
196
215
|
class="${classMap({
|
|
197
216
|
'carousel__navigation-button': true,
|
|
198
217
|
[`carousel__navigation-button--${direction}`]: true,
|
|
199
218
|
'carousel__navigation-button--disabled': !enabled
|
|
200
219
|
})}"
|
|
220
|
+
?circle=${!isTopRight}
|
|
221
|
+
variant="tertiary"
|
|
222
|
+
?disabled=${!enabled}
|
|
201
223
|
aria-label="${ariaLabel}"
|
|
202
224
|
aria-controls="scroll-container"
|
|
203
|
-
aria-disabled="${enabled ? 'false' : 'true'}"
|
|
204
225
|
@click=${enabled ? onClick : null}
|
|
205
226
|
>
|
|
206
227
|
<slot name="${slotName}">
|
|
@@ -209,7 +230,7 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
209
230
|
name="${iconName}"
|
|
210
231
|
></nile-icon>
|
|
211
232
|
</slot>
|
|
212
|
-
</button>
|
|
233
|
+
</nile-button>
|
|
213
234
|
`;
|
|
214
235
|
}
|
|
215
236
|
renderScrollContainer() {
|
|
@@ -268,12 +289,19 @@ let NileCarousel = class NileCarousel extends NileElement {
|
|
|
268
289
|
render() {
|
|
269
290
|
const prevEnabled = this.canScrollPrev();
|
|
270
291
|
const nextEnabled = this.canScrollNext();
|
|
292
|
+
const isTopRight = this.navigationPosition === 'top-right';
|
|
271
293
|
return html `
|
|
272
294
|
<div part="base" class="carousel">
|
|
295
|
+
${isTopRight && this.navigation ? html `
|
|
296
|
+
<div class="carousel__navigation-wrapper--top-right">
|
|
297
|
+
${this.renderNavigationButton('previous', prevEnabled, () => this.previous())}
|
|
298
|
+
${this.renderNavigationButton('next', nextEnabled, () => this.next())}
|
|
299
|
+
</div>
|
|
300
|
+
` : ''}
|
|
273
301
|
<div class="carousel__content-wrapper">
|
|
274
|
-
${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
|
|
302
|
+
${!isTopRight && this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
|
|
275
303
|
${this.renderScrollContainer()}
|
|
276
|
-
${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
|
|
304
|
+
${!isTopRight && this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
|
|
277
305
|
</div>
|
|
278
306
|
${this.renderPagination()}
|
|
279
307
|
</div>
|
|
@@ -287,6 +315,12 @@ __decorate([
|
|
|
287
315
|
__decorate([
|
|
288
316
|
property({ type: Boolean, reflect: true })
|
|
289
317
|
], NileCarousel.prototype, "pagination", void 0);
|
|
318
|
+
__decorate([
|
|
319
|
+
property({ type: Boolean, reflect: true })
|
|
320
|
+
], NileCarousel.prototype, "loop", void 0);
|
|
321
|
+
__decorate([
|
|
322
|
+
property({ type: String, attribute: 'navigation-position' })
|
|
323
|
+
], NileCarousel.prototype, "navigationPosition", void 0);
|
|
290
324
|
__decorate([
|
|
291
325
|
property({ type: Number, attribute: 'slides-per-page' })
|
|
292
326
|
], NileCarousel.prototype, "slidesPerPage", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-carousel.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport '../nile-icon';\nimport './nile-carousel-item/nile-carousel-item';\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nimport { prefersReducedMotion } from '../internal/animate';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-carousel.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport type NileCarouselItem from './nile-carousel-item/nile-carousel-item';\nimport {\n isCarouselItem,\n findMostVisibleSlide,\n getPageCount,\n getCurrentPage,\n canScrollNext,\n canScrollPrev,\n shouldSnapToSlide,\n scrollToSlide as scrollToSlideHelper,\n goToSlide as goToSlideHelper\n} from './carousel-helpers';\n\n@customElement('nile-carousel')\nexport class NileCarousel extends NileElement {\n static styles: CSSResultArray = [styles];\n\n @property({ type: Boolean, reflect: true }) navigation = false;\n\n @property({ type: Boolean, reflect: true }) pagination = false;\n\n @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;\n\n @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;\n\n @query('.carousel__slides') scrollContainer: HTMLElement;\n @query('.carousel__pagination') paginationContainer: HTMLElement;\n\n @state() activeSlide = 0;\n\n @state() scrolling = false;\n\n private mutationObserver: MutationObserver;\n private pendingSlideChange = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'region');\n this.setAttribute('aria-label', 'carousel');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.mutationObserver?.disconnect();\n }\n\n protected firstUpdated(): void {\n this.initializeSlides();\n this.mutationObserver = new MutationObserver(this.handleSlotChange);\n this.mutationObserver.observe(this, {\n childList: true,\n subtree: true\n });\n }\n\n protected willUpdate(changedProperties: PropertyValueMap<NileCarousel> | Map<PropertyKey, unknown>): void {\n if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {\n this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);\n }\n }\n\n private getPageCount() {\n const slidesCount = this.getSlides().length;\n return getPageCount(slidesCount, this.slidesPerPage, this.slidesPerMove);\n }\n\n private getCurrentPage() {\n return getCurrentPage(this.activeSlide, this.slidesPerMove);\n }\n\n private canScrollNext(): boolean {\n return canScrollNext(this.getCurrentPage(), this.getPageCount());\n }\n\n private canScrollPrev(): boolean {\n return canScrollPrev(this.getCurrentPage());\n }\n\n private getSlides() {\n return [...this.children].filter(\n (el: HTMLElement) => isCarouselItem(el)\n ) as NileCarouselItem[];\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const target = event.target as HTMLElement;\n const isFocusInPagination = target.closest('.carousel__pagination-item') !== null;\n const isNext =\n event.key === 'ArrowDown' || event.key === 'ArrowRight';\n const isPrevious =\n event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n event.preventDefault();\n\n if (isPrevious) {\n this.previous();\n }\n\n if (isNext) {\n this.next();\n }\n\n if (event.key === 'Home') {\n this.goToSlide(0);\n }\n\n if (event.key === 'End') {\n this.goToSlide(this.getSlides().length - 1);\n }\n\n if (isFocusInPagination) {\n this.updateComplete.then(() => {\n const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(\n '.carousel__pagination-item--active'\n );\n\n if (activePaginationItem) {\n activePaginationItem.focus();\n }\n });\n }\n }\n }\n\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n this.scrolling = true;\n\n if (this.pendingSlideChange) {\n return;\n }\n\n const slides = this.getSlides();\n const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);\n\n if (mostVisibleSlide) {\n const newActiveIndex = slides.indexOf(mostVisibleSlide);\n if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {\n this.activeSlide = newActiveIndex;\n }\n }\n };\n\n private handleScrollEnd = () => {\n this.scrolling = false;\n this.pendingSlideChange = false;\n \n if (this.scrollContainer) {\n const slides = this.getSlides();\n const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);\n \n if (mostVisibleSlide) {\n const newActiveIndex = slides.indexOf(mostVisibleSlide);\n if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {\n this.activeSlide = newActiveIndex;\n }\n }\n }\n };\n\n private handleSlotChange = () => {\n this.initializeSlides();\n };\n\n private initializeSlides() {\n const slides = this.getSlides();\n if (!slides.length) {\n return;\n }\n\n slides.forEach((slide, i) => {\n slide.classList.toggle('--is-active', i === this.activeSlide);\n });\n\n this.updateSlidesSnap();\n }\n\n @watch('activeSlide')\n handleSlideChange() {\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n slide.classList.toggle('--is-active', i === this.activeSlide);\n });\n\n if (this.hasUpdated) {\n this.emit('nile-slide-change', {\n detail: {\n index: this.activeSlide,\n slide: slides[this.activeSlide]\n }\n });\n }\n }\n\n @watch('slidesPerMove')\n updateSlidesSnap() {\n const slides = this.getSlides();\n const slidesPerMove = this.slidesPerMove;\n\n slides.forEach((slide, i) => {\n if (shouldSnapToSlide(i, slidesPerMove)) {\n slide.style.removeProperty('scroll-snap-align');\n } else {\n slide.style.setProperty('scroll-snap-align', 'none');\n }\n });\n }\n\n previous(behavior: ScrollBehavior = 'smooth') {\n this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);\n }\n\n next(behavior: ScrollBehavior = 'smooth') {\n this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);\n }\n\n goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {\n const { slidesPerPage } = this;\n const slides = this.getSlides();\n\n const result = goToSlideHelper(index, slides, slidesPerPage, behavior);\n if (!result || !this.scrollContainer) {\n return;\n }\n\n this.activeSlide = result.newActiveSlide;\n const scrollBehavior = prefersReducedMotion() ? 'auto' : behavior;\n scrollToSlideHelper(\n result.slideToScroll,\n this.scrollContainer,\n scrollBehavior,\n (value: boolean) => {\n this.pendingSlideChange = value;\n }\n );\n }\n\n private renderNavigationButton(\n direction: 'previous' | 'next',\n enabled: boolean,\n onClick: () => void\n ): TemplateResult {\n const isPrevious = direction === 'previous';\n const iconName = isPrevious ? 'arrowleft' : 'arrowright';\n const slotName = isPrevious ? 'previous-icon' : 'next-icon';\n const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';\n const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';\n\n return html`\n <button\n part=\"navigation-button ${partName}\"\n class=\"${classMap({\n 'carousel__navigation-button': true,\n [`carousel__navigation-button--${direction}`]: true,\n 'carousel__navigation-button--disabled': !enabled\n })}\"\n aria-label=\"${ariaLabel}\"\n aria-controls=\"scroll-container\"\n aria-disabled=\"${enabled ? 'false' : 'true'}\"\n @click=${enabled ? onClick : null}\n >\n <slot name=\"${slotName}\">\n <nile-icon\n library=\"system\"\n name=\"${iconName}\"\n ></nile-icon>\n </slot>\n </button>\n `;\n }\n\n private renderScrollContainer(): TemplateResult {\n return html`\n <div\n id=\"scroll-container\"\n part=\"scroll-container\"\n class=\"carousel__slides\"\n style=\"--slides-per-page: ${this.slidesPerPage};\"\n aria-busy=\"${this.scrolling ? 'true' : 'false'}\"\n aria-atomic=\"true\"\n tabindex=\"0\"\n @keydown=${this.handleKeyDown}\n @scroll=\"${this.handleScroll}\"\n @scrollend=${this.handleScrollEnd}\n >\n <slot></slot>\n </div>\n `;\n }\n\n private renderPaginationItem(index: number, pagesCount: number, currentPage: number, slidesPerMove: number): TemplateResult {\n const isActive = index === currentPage;\n return html`\n <button\n part=\"pagination-item ${isActive ? 'pagination-item--active' : ''}\"\n class=\"${classMap({\n 'carousel__pagination-item': true,\n 'carousel__pagination-item--active': isActive\n })}\"\n role=\"tab\"\n id=\"tab-${index + 1}\"\n aria-controls=\"slide-${index + 1}\"\n aria-selected=\"${isActive ? 'true' : 'false'}\"\n aria-label=\"${isActive\n ? `Slide ${index + 1}`\n : `Go to slide ${index + 1} of ${pagesCount}`}\"\n tabindex=${isActive ? '0' : '-1'}\n @click=${() => this.goToSlide(index * slidesPerMove)}\n @keydown=${this.handleKeyDown}\n ></button>\n `;\n }\n\n private renderPagination(): TemplateResult {\n if (!this.pagination) {\n return html``;\n }\n\n const pagesCount = this.getPageCount();\n const currentPage = this.getCurrentPage();\n const slidesPerMove = this.slidesPerMove;\n\n return html`\n <div part=\"pagination\" role=\"tablist\" class=\"carousel__pagination\">\n ${map(range(pagesCount), index => this.renderPaginationItem(index, pagesCount, currentPage, slidesPerMove))}\n </div>\n `;\n }\n\n render() {\n const prevEnabled = this.canScrollPrev();\n const nextEnabled = this.canScrollNext();\n\n return html`\n <div part=\"base\" class=\"carousel\">\n <div class=\"carousel__content-wrapper\">\n ${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}\n ${this.renderScrollContainer()}\n ${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}\n </div>\n ${this.renderPagination()}\n </div>\n `;\n }\n}\n\nexport default NileCarousel;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-carousel': NileCarousel;\n }\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"nile-carousel.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport '../nile-icon';\nimport '../nile-button';\nimport './nile-carousel-item/nile-carousel-item';\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nimport { prefersReducedMotion } from '../internal/animate';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-carousel.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport type NileCarouselItem from './nile-carousel-item/nile-carousel-item';\nimport {\n isCarouselItem,\n findMostVisibleSlide,\n getPageCount,\n getCurrentPage,\n canScrollNext,\n canScrollPrev,\n shouldSnapToSlide,\n scrollToSlide as scrollToSlideHelper,\n goToSlide as goToSlideHelper\n} from './carousel-helpers';\n\n@customElement('nile-carousel')\nexport class NileCarousel extends NileElement {\n static styles: CSSResultArray = [styles];\n\n @property({ type: Boolean, reflect: true }) navigation = false;\n\n @property({ type: Boolean, reflect: true }) pagination = false;\n\n @property({ type: Boolean, reflect: true }) loop = false;\n\n @property({ type: String, attribute: 'navigation-position' }) navigationPosition: 'sides' | 'top-right' = 'sides';\n\n @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;\n\n @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;\n\n @query('.carousel__slides') scrollContainer: HTMLElement;\n @query('.carousel__pagination') paginationContainer: HTMLElement;\n\n @state() activeSlide = 0;\n\n @state() scrolling = false;\n\n private mutationObserver: MutationObserver;\n private pendingSlideChange = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'region');\n this.setAttribute('aria-label', 'carousel');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.mutationObserver?.disconnect();\n }\n\n protected firstUpdated(): void {\n this.initializeSlides();\n this.mutationObserver = new MutationObserver(this.handleSlotChange);\n this.mutationObserver.observe(this, {\n childList: true,\n subtree: true\n });\n }\n\n protected willUpdate(changedProperties: PropertyValueMap<NileCarousel> | Map<PropertyKey, unknown>): void {\n if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {\n this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);\n }\n }\n\n private getPageCount() {\n const slidesCount = this.getSlides().length;\n return getPageCount(slidesCount, this.slidesPerPage, this.slidesPerMove);\n }\n\n private getCurrentPage() {\n return getCurrentPage(this.activeSlide, this.slidesPerMove);\n }\n\n private canScrollNext(): boolean {\n return canScrollNext(this.getCurrentPage(), this.getPageCount(), this.loop);\n }\n\n private canScrollPrev(): boolean {\n return canScrollPrev(this.getCurrentPage(), this.loop);\n }\n\n private getSlides() {\n return [...this.children].filter(\n (el: HTMLElement) => isCarouselItem(el)\n ) as NileCarouselItem[];\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const target = event.target as HTMLElement;\n const isFocusInPagination = target.closest('.carousel__pagination-item') !== null;\n const isNext =\n event.key === 'ArrowDown' || event.key === 'ArrowRight';\n const isPrevious =\n event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n event.preventDefault();\n\n if (isPrevious) {\n this.previous();\n }\n\n if (isNext) {\n this.next();\n }\n\n if (event.key === 'Home') {\n this.goToSlide(0);\n }\n\n if (event.key === 'End') {\n this.goToSlide(this.getSlides().length - 1);\n }\n\n if (isFocusInPagination) {\n this.updateComplete.then(() => {\n const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(\n '.carousel__pagination-item--active'\n );\n\n if (activePaginationItem) {\n activePaginationItem.focus();\n }\n });\n }\n }\n }\n\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n this.scrolling = true;\n\n if (this.pendingSlideChange) {\n return;\n }\n\n const slides = this.getSlides();\n const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);\n\n if (mostVisibleSlide) {\n const newActiveIndex = slides.indexOf(mostVisibleSlide);\n if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {\n this.activeSlide = newActiveIndex;\n }\n }\n };\n\n private handleScrollEnd = () => {\n this.scrolling = false;\n this.pendingSlideChange = false;\n \n if (this.scrollContainer) {\n const slides = this.getSlides();\n const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer);\n \n if (mostVisibleSlide) {\n const newActiveIndex = slides.indexOf(mostVisibleSlide);\n if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {\n this.activeSlide = newActiveIndex;\n }\n }\n }\n };\n\n private handleSlotChange = () => {\n this.initializeSlides();\n };\n\n private initializeSlides() {\n const slides = this.getSlides();\n if (!slides.length) {\n return;\n }\n\n slides.forEach((slide, i) => {\n slide.classList.toggle('--is-active', i === this.activeSlide);\n });\n\n this.updateSlidesSnap();\n }\n\n @watch('activeSlide')\n handleSlideChange() {\n const slides = this.getSlides();\n slides.forEach((slide, i) => {\n slide.classList.toggle('--is-active', i === this.activeSlide);\n });\n\n if (this.hasUpdated) {\n this.emit('nile-slide-change', {\n detail: {\n index: this.activeSlide,\n slide: slides[this.activeSlide]\n }\n });\n }\n }\n\n @watch('slidesPerMove')\n updateSlidesSnap() {\n const slides = this.getSlides();\n const slidesPerMove = this.slidesPerMove;\n\n slides.forEach((slide, i) => {\n if (shouldSnapToSlide(i, slidesPerMove)) {\n slide.style.removeProperty('scroll-snap-align');\n } else {\n slide.style.setProperty('scroll-snap-align', 'none');\n }\n });\n }\n\n previous(behavior: ScrollBehavior = 'smooth') {\n const slides = this.getSlides();\n if (this.loop && this.activeSlide === 0) {\n this.goToSlide(slides.length - this.slidesPerMove, behavior);\n } else {\n this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);\n }\n }\n\n next(behavior: ScrollBehavior = 'smooth') {\n const slides = this.getSlides();\n const maxIndex = slides.length - this.slidesPerPage;\n \n if (this.loop && this.activeSlide >= maxIndex) {\n this.goToSlide(0, behavior);\n } else {\n this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);\n }\n }\n\n goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {\n const { slidesPerPage } = this;\n const slides = this.getSlides();\n\n const result = goToSlideHelper(index, slides, slidesPerPage, behavior, this.loop);\n if (!result || !this.scrollContainer) {\n return;\n }\n\n this.activeSlide = result.newActiveSlide;\n const scrollBehavior = prefersReducedMotion() ? 'auto' : behavior;\n scrollToSlideHelper(\n result.slideToScroll,\n this.scrollContainer,\n scrollBehavior,\n (value: boolean) => {\n this.pendingSlideChange = value;\n }\n );\n }\n\n private renderNavigationButton(\n direction: 'previous' | 'next',\n enabled: boolean,\n onClick: () => void\n ): TemplateResult {\n const isPrevious = direction === 'previous';\n const iconName = isPrevious \n ? 'var(--nile-icon-arrow-left, var(--ng-icon-arrow-narrow-left))' \n : 'var(--nile-icon-arrow-right, var(--ng-icon-arrow-narrow-right))';\n const slotName = isPrevious ? 'previous-icon' : 'next-icon';\n const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';\n const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';\n const isTopRight = this.navigationPosition === 'top-right';\n\n return html`\n <nile-button\n part=\"navigation-button ${partName}\"\n class=\"${classMap({\n 'carousel__navigation-button': true,\n [`carousel__navigation-button--${direction}`]: true,\n 'carousel__navigation-button--disabled': !enabled\n })}\"\n ?circle=${!isTopRight}\n variant=\"tertiary\"\n ?disabled=${!enabled}\n aria-label=\"${ariaLabel}\"\n aria-controls=\"scroll-container\"\n @click=${enabled ? onClick : null}\n >\n <slot name=\"${slotName}\">\n <nile-icon\n library=\"system\"\n name=\"${iconName}\"\n ></nile-icon>\n </slot>\n </nile-button>\n `;\n }\n\n private renderScrollContainer(): TemplateResult {\n return html`\n <div\n id=\"scroll-container\"\n part=\"scroll-container\"\n class=\"carousel__slides\"\n style=\"--slides-per-page: ${this.slidesPerPage};\"\n aria-busy=\"${this.scrolling ? 'true' : 'false'}\"\n aria-atomic=\"true\"\n tabindex=\"0\"\n @keydown=${this.handleKeyDown}\n @scroll=\"${this.handleScroll}\"\n @scrollend=${this.handleScrollEnd}\n >\n <slot></slot>\n </div>\n `;\n }\n\n private renderPaginationItem(index: number, pagesCount: number, currentPage: number, slidesPerMove: number): TemplateResult {\n const isActive = index === currentPage;\n return html`\n <button\n part=\"pagination-item ${isActive ? 'pagination-item--active' : ''}\"\n class=\"${classMap({\n 'carousel__pagination-item': true,\n 'carousel__pagination-item--active': isActive\n })}\"\n role=\"tab\"\n id=\"tab-${index + 1}\"\n aria-controls=\"slide-${index + 1}\"\n aria-selected=\"${isActive ? 'true' : 'false'}\"\n aria-label=\"${isActive\n ? `Slide ${index + 1}`\n : `Go to slide ${index + 1} of ${pagesCount}`}\"\n tabindex=${isActive ? '0' : '-1'}\n @click=${() => this.goToSlide(index * slidesPerMove)}\n @keydown=${this.handleKeyDown}\n ></button>\n `;\n }\n\n private renderPagination(): TemplateResult {\n if (!this.pagination) {\n return html``;\n }\n\n const pagesCount = this.getPageCount();\n const currentPage = this.getCurrentPage();\n const slidesPerMove = this.slidesPerMove;\n\n return html`\n <div part=\"pagination\" role=\"tablist\" class=\"carousel__pagination\">\n ${map(range(pagesCount), index => this.renderPaginationItem(index, pagesCount, currentPage, slidesPerMove))}\n </div>\n `;\n }\n\n render() {\n const prevEnabled = this.canScrollPrev();\n const nextEnabled = this.canScrollNext();\n const isTopRight = this.navigationPosition === 'top-right';\n\n return html`\n <div part=\"base\" class=\"carousel\">\n ${isTopRight && this.navigation ? html`\n <div class=\"carousel__navigation-wrapper--top-right\">\n ${this.renderNavigationButton('previous', prevEnabled, () => this.previous())}\n ${this.renderNavigationButton('next', nextEnabled, () => this.next())}\n </div>\n ` : ''}\n <div class=\"carousel__content-wrapper\">\n ${!isTopRight && this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}\n ${this.renderScrollContainer()}\n ${!isTopRight && this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}\n </div>\n ${this.renderPagination()}\n </div>\n `;\n }\n}\n\nexport default NileCarousel;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-carousel': NileCarousel;\n }\n}\n\n"]}
|
package/dist/src/version.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Version utility - placeholders will be replaced during build
|
|
2
|
-
export const NILE_ELEMENTS_VERSION = '1.4.
|
|
3
|
-
export const NILE_VERSION = '1.1.
|
|
2
|
+
export const NILE_ELEMENTS_VERSION = '1.4.4-beta-1.0';
|
|
3
|
+
export const NILE_VERSION = '1.1.5';
|
|
4
4
|
// Set global versions for runtime access
|
|
5
5
|
if (typeof window !== 'undefined') {
|
|
6
6
|
window.nileElementsVersion = NILE_ELEMENTS_VERSION;
|
package/dist/src/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.4.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.4.4-beta-1.0';\nexport const NILE_VERSION = '1.1.5';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
|