@aurodesignsystem-dev/auro-slideshow 0.0.0-pr44.0 → 0.0.0-pr46.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.
|
@@ -3872,7 +3872,7 @@ class AuroIcon extends BaseIcon {
|
|
|
3872
3872
|
|
|
3873
3873
|
var iconVersion = "8.1.1";
|
|
3874
3874
|
|
|
3875
|
-
var styleCss = i$5`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size)}:host([fullBleed]) .slideshow-wrapper{overflow:visible}.embla{max-width:100%;margin:0;--slide-size: 100
|
|
3875
|
+
var styleCss = i$5`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size);box-sizing:border-box}:host([fullBleed]) .slideshow-wrapper{overflow:visible}.embla{max-width:100%;margin:0;--slide-size: 100%;--slide-spacing: 1rem}.embla__container{display:flex;gap:var(--slide-spacing)}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;filter:brightness(100%);transition:filter .7s ease-in-out}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-advanced-color-state-focused-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.active):not(.in-view){filter:brightness(65%)}:host([autoScroll]) .embla__slide{filter:unset}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev:not([disabled]),.slideshow-wrapper:hover .scroll-next:not([disabled]){display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px;padding-inline:var(--border-size);box-sizing:border-box}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;cursor:pointer;transition:all .3s ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all .3s ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}:host([loop]) .embla__container{gap:unset}:host([loop]) .embla__slide{margin-right:var(--slide-spacing)}
|
|
3876
3876
|
`;
|
|
3877
3877
|
|
|
3878
3878
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -57,7 +57,7 @@ import{LitElement as t,css as e,html as o,nothing as r}from"lit";import{unsafeSt
|
|
|
57
57
|
<slot></slot>
|
|
58
58
|
</div>
|
|
59
59
|
</div>
|
|
60
|
-
`}}var Rt=e`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size)}:host([fullBleed]) .slideshow-wrapper{overflow:visible}.embla{max-width:100%;margin:0;--slide-size: 100
|
|
60
|
+
`}}var Rt=e`:host{--border-size: 6px;--border-radius: 24px}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size);box-sizing:border-box}:host([fullBleed]) .slideshow-wrapper{overflow:visible}.embla{max-width:100%;margin:0;--slide-size: 100%;--slide-spacing: 1rem}.embla__container{display:flex;gap:var(--slide-spacing)}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;filter:brightness(100%);transition:filter .7s ease-in-out}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-advanced-color-state-focused-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.active):not(.in-view){filter:brightness(65%)}:host([autoScroll]) .embla__slide{filter:unset}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev:not([disabled]),.slideshow-wrapper:hover .scroll-next:not([disabled]){display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px;padding-inline:var(--border-size);box-sizing:border-box}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;cursor:pointer;transition:all .3s ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all .3s ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}:host([loop]) .embla__container{gap:unset}:host([loop]) .embla__slide{margin-right:var(--slide-spacing)}
|
|
61
61
|
`;class Pt extends t{constructor(){super(),this.autoplay=!1,this.delay=7e3,this.autoScroll=!1,this.scrollSpeed=.75,this.startDelay=1e3,this.playOnInit=!1,this.loop=!1,this.navigation=!1,this.pagination=!1,this.playLabel="Play slideshow",this.pauseLabel="Pause slideshow",this.playBtnLabel=this.playLabel,this.isPlaying=!1,this.embla=null,this.slides=[],this.isHovered=!1,this.isStopped=!0;const t=new tt;this.buttonTag=t.generateTag("auro-button","11.3.2",Bt),this.iconTag=t.generateTag("auro-icon","8.1.1",$t)}static register(t="auro-slideshow"){et.prototype.registerComponent(t,Pt)}static get styles(){return[Rt]}static get properties(){return{autoplay:{type:Boolean,reflect:!0},autoScroll:{type:Boolean,reflect:!0},playOnInit:{type:Boolean,reflect:!0},delay:{type:Number,reflect:!0},scrollSpeed:{type:Number,reflect:!0},startDelay:{type:Number,reflect:!0},playLabel:{type:String,reflect:!0},pauseLabel:{type:String,reflect:!0},loop:{type:Boolean,reflect:!0},navigation:{type:Boolean,reflect:!0},pagination:{type:Boolean,reflect:!0},isPlaying:{type:Boolean}}}get _slot(){return this.shadowRoot.querySelector("slot:not([name])")}get _playBtn(){return this.shadowRoot.querySelector(".play-pause")}get _prevBtn(){return this.shadowRoot.querySelector(".scroll-prev")}get _nextBtn(){return this.shadowRoot.querySelector(".scroll-next")}get _dotsNode(){return this.shadowRoot.querySelector(".embla__dots")}get _progressNode(){return this.shadowRoot.querySelector(".embla__progress")}play(){this.autoplay?this.embla?.plugins()?.autoplay.play():this.autoScroll&&this.embla?.plugins()?.autoScroll.play()}stop(){this.autoplay?this.embla?.plugins()?.autoplay.stop():this.autoScroll&&this.embla?.plugins()?.autoScroll.stop()}scrollPrev(){this.embla.scrollPrev()}scrollNext(){this.embla.scrollNext()}initializeEmbla(){const t=this.shadowRoot.querySelector(".embla"),e={loop:this.loop,align:"start"},o={playOnInit:this.playOnInit,delay:this.delay,stopOnLastSnap:!this.loop},r={playOnInit:this.playOnInit,speed:this.scrollSpeed,startDelay:this.startDelay},s=[J({snapped:"active",inView:"in-view",loop:"",draggable:"",dragging:""})];this.autoplay&&this.autoScroll&&(console.warn("Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled."),this.autoScroll=!1),this.autoplay&&s.push(X(o)),this.autoScroll&&!this.isTouchDevice()&&s.push(j(r)),this.embla=W(t,e,s),this.pagination&&this.addDotBtnsAndClickHandlers(this.embla,this._dotsNode,this.stopOnInteraction),this.navigation&&!this.isTouchDevice()&&this.embla.on("select",this.toggleNavBtnsState).on("init",this.toggleNavBtnsState).on("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.on("autoplay:stop",this.togglePlayButtonOnStop).on("autoplay:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.autoScroll&&!this.isTouchDevice()&&this.embla.on("autoScroll:stop",this.togglePlayButtonOnStop).on("autoScroll:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop)}updateSlides(){if(this._slot){this.slides=Array.from(this._slot.assignedElements()),this.slides.forEach(((t,e)=>{t.classList.add("embla__slide"),t.addEventListener("keydown",this.handleKeydown),0===e?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1")}));this.shadowRoot.querySelector(".embla__container").replaceChildren(...this.slides)}}toggleTabIndex=()=>{const t=this.slides[this.embla.selectedScrollSnap()];this.slides.forEach((t=>{t.setAttribute("tabindex","-1")})),t.setAttribute("tabindex","0")};togglePlayButtonOnStop=()=>{this.isPlaying=!1,this.playBtnLabel=this.playLabel};togglePlayButtonOnPlay=()=>{this.isPlaying=!0,this.playBtnLabel=this.pauseLabel};toggleNavBtnsState=()=>{this.embla.canScrollPrev()?this._prevBtn.removeAttribute("disabled"):this._prevBtn.setAttribute("disabled",""),this.embla.canScrollNext()?this._nextBtn.removeAttribute("disabled"):this._nextBtn.setAttribute("disabled","")};stopOnInteraction=()=>{this.isPlaying&&(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=!0)};isTouchDevice(){return window.matchMedia("(pointer: coarse)").matches}handleSlotChange(){this.updateSlides(),this.embla?this.embla.reInit():this.initializeEmbla(),this.embla.on("select",this.toggleTabIndex),(this.autoplay||this.autoScroll&&!this.isTouchDevice())&&(this.isPlaying=!0,this.playOnInit&&(this.isStopped=!1))}handleNavClick(t){"prev"===t&&this.scrollPrev(),"next"===t&&this.scrollNext(),this.stopOnInteraction()}handleKeydown=t=>{const e=()=>{setTimeout((()=>{this.slides[this.embla.selectedScrollSnap()].focus()}),200)};"ArrowLeft"===t.key?(t.preventDefault(),this.scrollPrev(),e()):"ArrowRight"===t.key&&(t.preventDefault(),this.scrollNext(),e())};handlePlayClick(){this.isPlaying?(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=!0):(this.play(),this.togglePlayButtonOnPlay(),this.isStopped=!1)}handleMouseEnter=()=>{this.isPlaying&&(this.stop(),this.isHovered=!0)};handleMouseLeave=()=>{this.isPlaying||this.isStopped||!this.isHovered||(this.play(),this.isHovered=!1)};addDotBtnsAndClickHandlers=(t,e)=>{let o=[];const r=()=>{const r=t.scrollSnapList().map(((e,o)=>{const r=document.createElement("button");return r.className="embla__dot",r.type="button",r.tabIndex=-1,r.setAttribute("aria-label",`Go to slide ${o+1}`),r.addEventListener("click",(()=>{t.scrollTo(o),this.stopOnInteraction()}),!1),r}));e.replaceChildren(...r),o=r},s=()=>{const e=t.selectedScrollSnap();o[e]&&o[e].classList.toggle("stopped",!this.isPlaying)},a=()=>{const e=t.previousScrollSnap(),r=t.selectedScrollSnap();if(this.autoplay){const a=document.createElement("div");a.className="embla__progress__bar",o[e]&&(o[e].className="embla__dot",o[e].replaceChildren()),o[r]&&(o[r].className="embla__progress",o[r].replaceChildren(a),this.isPlaying||o[r].classList.add("stopped")),this.addAutoplayProgressListeners(this.embla,this._progressNode),t.on("autoplay:play",s).on("autoplay:stop",s)}else o[e]&&o[e].classList.remove("embla__dot--selected"),o[r]&&o[r].classList.add("embla__dot--selected")};return t.on("init",r).on("reInit",r).on("init",a).on("reInit",a).on("select",a),()=>{e.replaceChildren()}};addAutoplayProgressListeners=(t,e)=>{const o=e.querySelector(".embla__progress__bar");let r="";const s=t=>{this._progressNode.classList.remove("embla__progress--paused");const e=t?.plugins()?.autoplay;if(!e)return;const s=e.timeUntilNext();if(null!==s){if(!r){const t=window.getComputedStyle(o);r=t.animationName}o.style.animationName="none",o.style.transform="translate3d(0,0,0)",window.requestAnimationFrame((()=>{window.setTimeout((()=>{o.style.animationName=r,o.style.animationDuration=`${s}ms`}),0)}))}},a=t=>{this._progressNode.classList.add("embla__progress--paused");t?.plugins()};return t.on("autoplay:timerset",s).on("autoplay:timerstopped",a).emit("autoplay:timerset"),()=>{t.off("autoplay:timerset",s).off("autoplay:timerstopped",a)}};disconnectedCallback(){super.disconnectedCallback(),this.embla&&(this.embla.off("select",this.toggleTabIndex),this.navigation&&!this.isTouchDevice()&&this.embla.off("select",this.toggleNavBtnsState).off("init",this.toggleNavBtnsState).off("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.off("autoplay:stop",this.togglePlayButtonOnStop).off("autoplay:play",this.togglePlayButtonOnPlay),this.autoScroll&&!this.isTouchDevice()&&this.embla.off("autoScroll:stop",this.togglePlayButtonOnStop).off("autoScroll:play",this.togglePlayButtonOnPlay),this.embla.destroy(),this.embla=null),this.slides.forEach((t=>{t.removeEventListener("keydown",this.handleKeydown)})),this.slides=[]}generateIconHtml(t,e){const o=(new DOMParser).parseFromString(t,"text/html").body.firstChild;return o.setAttribute("slot","svg"),i`<${this.iconTag} customColor customSvg ?hidden="${e}">${o}</${this.iconTag}>`}renderNavigationControls(){return i`
|
|
62
62
|
<${this.buttonTag}
|
|
63
63
|
aria-label="Previous slide"
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroSlideshow}from"./auro-slideshow-
|
|
1
|
+
export{A as AuroSlideshow}from"./auro-slideshow-GQppc2cY.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-slideshow-
|
|
1
|
+
import{A as i}from"./auro-slideshow-GQppc2cY.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-slideshow",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr46.0",
|
|
11
11
|
"description": "auro-slideshow HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|