@nuralyui/carousel 0.0.8 → 0.0.9
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/bundle.js +3 -3
- package/carousel.component.d.ts +1 -1
- package/carousel.component.js.map +1 -1
- package/carousel.style.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -62,7 +62,7 @@ import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
`;var d=function(t,o,s,e){for(var i,r=arguments.length,l=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,s):e,n=t.length-1;n>=0;n--)(i=t[n])&&(l=(r<3?i(l):r>3?i(o,s,l):i(o,s))||l);return r>3&&l&&Object.defineProperty(o,s,l),l};let h=class extends o{constructor(){super(...arguments),this.currentIndex=0,this.autoPlay=!1,this.autoplaySpeed=3e3,this.intervalId=null}firstUpdated(){this.displayedElements=this.slideElements.map((
|
|
65
|
+
`;var d=function(t,o,s,e){for(var i,r=arguments.length,l=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,s):e,n=t.length-1;n>=0;n--)(i=t[n])&&(l=(r<3?i(l):r>3?i(o,s,l):i(o,s))||l);return r>3&&l&&Object.defineProperty(o,s,l),l};let h=class extends o{constructor(){super(...arguments),this.currentIndex=0,this.autoPlay=!1,this.autoplaySpeed=3e3,this.intervalId=null}firstUpdated(){this.displayedElements=this.slideElements.map((t,o)=>(o!=this.currentIndex&&t.classList.add("carousel-item-hidden"),t)),this.autoPlay&&this.startAutoPlay()}startAutoPlay(){this.intervalId=window.setInterval(()=>{this.next()},this.autoplaySpeed)}stopAutoPlay(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}next(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.displayedElements.length-1==this.currentIndex?this.currentIndex=0:this.currentIndex++,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}prev(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),0==this.currentIndex?this.currentIndex=this.displayedElements.length-1:this.currentIndex--,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}goTo(t){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.currentIndex=t,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay()}render(){var t;return s`
|
|
66
66
|
<div class="carousel">
|
|
67
67
|
<slot></slot>
|
|
68
68
|
${this.autoPlay?e:s`
|
|
@@ -85,12 +85,12 @@ import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property
|
|
|
85
85
|
`}
|
|
86
86
|
|
|
87
87
|
<div class="dots">
|
|
88
|
-
${a(Array.from({length:null===(t=this.displayedElements)||void 0===t?void 0:t.length}),(
|
|
88
|
+
${a(Array.from({length:null===(t=this.displayedElements)||void 0===t?void 0:t.length}),(t,o)=>s`
|
|
89
89
|
<span
|
|
90
90
|
class="dot ${o===this.currentIndex?"active":""}"
|
|
91
91
|
@click="${()=>this.goTo(o)}"
|
|
92
92
|
></span>
|
|
93
|
-
`)
|
|
93
|
+
`)}
|
|
94
94
|
</div
|
|
95
95
|
</div>
|
|
96
96
|
`}};h.styles=c,d([i({type:Number})],h.prototype,"currentIndex",void 0),d([i({type:Boolean})],h.prototype,"autoPlay",void 0),d([i({type:Number})],h.prototype,"autoplaySpeed",void 0),d([r()],h.prototype,"slideElements",void 0),d([l()],h.prototype,"displayedElements",void 0),h=d([n("hy-carousel")],h);export{h as CarouselComponent};
|
package/carousel.component.d.ts
CHANGED
|
@@ -14,6 +14,6 @@ export declare class CarouselComponent extends LitElement {
|
|
|
14
14
|
prev(): void;
|
|
15
15
|
goTo(index: number): void;
|
|
16
16
|
disconnectedCallback(): void;
|
|
17
|
-
render(): import("lit").TemplateResult<1>;
|
|
17
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
18
18
|
}
|
|
19
19
|
//# sourceMappingURL=carousel.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"carousel.component.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { styles } from './carousel.style.js';\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\n@customElement('hy-carousel')\nexport class CarouselComponent extends LitElement {\n static override styles = styles;\n\n @property({ type: Number }) currentIndex = 0;\n @property({ type: Boolean }) autoPlay = false;\n @property({ type: Number }) autoplaySpeed = 3000;\n @queryAssignedElements()\n private slideElements!: HTMLElement[];\n @state()\n private displayedElements!: HTMLElement[];\n private intervalId: number | null = null;\n\n override firstUpdated() {\n this.displayedElements = this.slideElements.map((element, index) => {\n if (index != this.currentIndex) {\n element.classList.add('carousel-item-hidden');\n }\n return element;\n });\n if (this.autoPlay) {\n this.startAutoPlay();\n }\n }\n\n startAutoPlay() {\n this.intervalId = window.setInterval(() => {\n this.next();\n }, this.autoplaySpeed);\n }\n\n stopAutoPlay() {\n if (this.intervalId) {\n clearInterval(this.intervalId);\n this.intervalId = null;\n }\n }\n\n next() {\n this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');\n if (this.displayedElements.length - 1 == this.currentIndex) {\n this.currentIndex = 0;\n } else {\n this.currentIndex++;\n }\n this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');\n }\n\n prev() {\n this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');\n if (this.currentIndex == 0) {\n this.currentIndex = this.displayedElements.length - 1;\n } else {\n this.currentIndex--;\n }\n this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');\n }\n\n goTo(index: number) {\n this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');\n this.currentIndex = index;\n this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.stopAutoPlay();\n }\n\n override render() {\n return html`\n <div class=\"carousel\">\n <slot></slot>\n ${\n !this.autoPlay\n ? html`\n <div class=\"controls\">\n <nr-button\n @click=\"${this.prev}\"\n type=\"ghost\"\n size=\"small\"\n class=\"button-control\"\n .icon=\"${['chevron-left']}\"\n ></nr-button>\n <nr-button\n @click=\"${this.next}\"\n type=\"ghost\"\n size=\"small\"\n class=\"button-control\"\n .icon=\"${['chevron-right']}\"\n ></nr-button>\n </div>\n `\n : nothing\n }\n\n <div class=\"dots\">\n ${repeat(\n Array.from({length: this.displayedElements?.length}),\n (_, index) => html`\n <span\n class=\"dot ${index === this.currentIndex ? 'active' : ''}\"\n @click=\"${() => this.goTo(index)}\"\n ></span>\n `\n )}\n </div\n </div>\n `;\n }\n}\n"]}
|
package/carousel.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"carousel.style.js","sourceRoot":"","sources":["../../../../src/components/carousel/carousel.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst carouselStyles = css`\n :host {\n position: relative;\n }\n\n .carousel {\n width: 100%;\n display: flex;\n justify-content: center;\n flex-direction: column;\n align-items: center;\n }\n\n ::slotted(.carousel-item-hidden) {\n position: absolute;\n opacity: 0;\n }\n ::slotted(:not(.carousel-item-hidden)) {\n opacity: 1;\n transition: opacity 0.5s ease;\n }\n\n .controls {\n position: absolute;\n width: 100%;\n top: 50%;\n display: flex;\n justify-content: space-between;\n }\n .button-control {\n --nuraly-button-ghost-text-color: grey;\n --nuraly-button-ghost-active-border-color: transparent;\n --nuraly-button-ghost-hover-background-color: transparent;\n --nuraly-button-ghost-hover-border-color: transparent;\n }\n\n .dot {\n height: 8px;\n width: 8px;\n margin: 0 5px;\n background-color: var(--carousel-dot-background-color);\n display: inline-block;\n cursor: pointer;\n opacity: 0.4;\n }\n\n .dot.active {\n background-color: var(--carousel-dot-active-background-color);\n opacity: 0.9;\n }\n\n :host {\n --carousel-dot-background-color: #bebebe;\n --carousel-dot-active-background-color: gray;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --carousel-dot-background-color: gray;\n --carousel-dot-active-background-color: lightgray;\n .button-control {\n --nuraly-button-ghost-text-color: #ffffff;\n }\n }\n }\n`;\n\nexport const styles = carouselStyles;\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './carousel.component.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/carousel/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,cAAc;KAC5B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { CarouselComponent } from './carousel.component.js';\n\nexport const HyCarousel = createComponent({\n tagName: 'hy-carousel',\n elementClass: CarouselComponent,\n react: React,\n events: {\n slideChange: 'slide-change',\n },\n});\n"]}
|