@aurodesignsystem-dev/auro-carousel 0.0.0-pr108.0 → 0.0.0-pr110.0

package/demo/auro-carousel.min.js

@@ -261,7 +261,7 @@ var iconVersion = '9.1.1';
 var colorCss = i$5`:host .gradient{background:var(--ds-auro-carousel-gradient-color-two)}:host .gradient--left{background:linear-gradient(to right,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}:host .gradient--right{background:linear-gradient(to left,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}
 `;
 
-var styleCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{position:relative;display:block}.carousel{overflow-x:scroll;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap}.carousel::-webkit-scrollbar{width:0;height:0}.carousel.carousel--scrolledToStart:after,.carousel.carousel--scrolledToStart:before,.carousel.carousel--scrolledToEnd:after,.carousel.carousel--scrolledToEnd:before{display:none}.container{display:flex}::slotted(*){flex:0 0 auto;margin-left:var(--ds-size-200, 1rem)}::slotted(:first-child){margin-left:auto}::slotted(:last-child){margin-right:auto}.breakpointDetector:before{display:none}@media screen and (min-width: 576px){.breakpointDetector:before{content:"sm"}}.button{position:absolute;top:50%;display:none;padding:0;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.button:hover,.button:active{border:none}.button--left{z-index:1;left:0}.button--right{right:0}@media screen and (min-width: 576px){.button{display:block}.carousel--scrolledToStart .button--left,.carousel--scrolledToStart .gradient--left,.carousel--scrolledToEnd .button--right,.carousel--scrolledToEnd .gradient--right{display:none}}[class^=gradient]{position:absolute;top:0;width:calc(var(--ds-size-1000, 5rem) + var(--ds-size-500, 2.5rem) + var(--ds-size-150, .75rem));height:100%;pointer-events:none}.gradient--left{left:0}.gradient--right{right:0}
+var styleCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{position:relative;display:block}.carousel{overflow-x:scroll;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap}.carousel::-webkit-scrollbar{width:0;height:0}.carousel.carousel--scrolledToStart:after,.carousel.carousel--scrolledToStart:before,.carousel.carousel--scrolledToEnd:after,.carousel.carousel--scrolledToEnd:before{display:none}.container{display:flex}::slotted(*){flex:0 0 auto;margin-left:var(--ds-size-200, 1rem)}::slotted(:first-child){margin-left:auto}::slotted(:last-child){margin-right:auto}.breakpointDetector:before{display:none}@media screen and (min-width:576px){.breakpointDetector:before{content:"sm"}}.button{position:absolute;top:50%;display:none;padding:0;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.button:hover,.button:active{border:none}.button--left{z-index:1;left:0}.button--right{right:0}@media screen and (min-width:576px){.button{display:block}.carousel--scrolledToStart .button--left,.carousel--scrolledToStart .gradient--left,.carousel--scrolledToEnd .button--right,.carousel--scrolledToEnd .gradient--right{display:none}}[class^=gradient]{position:absolute;top:0;width:calc(var(--ds-size-1000, 5rem) + var(--ds-size-500, 2.5rem) + var(--ds-size-150, .75rem));height:100%;pointer-events:none}.gradient--left{left:0}.gradient--right{right:0}
 `;
 
 var tokensCss = i$5`:host{--ds-auro-carousel-gradient-color-one: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-carousel-gradient-color-two: transparent}

package/dist/{auro-carousel-D1ntQpGY.js → auro-carousel-twMItRxb.js}

@@ -76,7 +76,7 @@ import{css as t,LitElement as e,html as o}from"lit";import{unsafeStatic as s,lit
         </div>
       </div>
     `}}var j=t`:host .gradient{background:var(--ds-auro-carousel-gradient-color-two)}:host .gradient--left{background:linear-gradient(to right,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}:host .gradient--right{background:linear-gradient(to left,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}
-`,G=t`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{position:relative;display:block}.carousel{overflow-x:scroll;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap}.carousel::-webkit-scrollbar{width:0;height:0}.carousel.carousel--scrolledToStart:after,.carousel.carousel--scrolledToStart:before,.carousel.carousel--scrolledToEnd:after,.carousel.carousel--scrolledToEnd:before{display:none}.container{display:flex}::slotted(*){flex:0 0 auto;margin-left:var(--ds-size-200, 1rem)}::slotted(:first-child){margin-left:auto}::slotted(:last-child){margin-right:auto}.breakpointDetector:before{display:none}@media screen and (min-width: 576px){.breakpointDetector:before{content:"sm"}}.button{position:absolute;top:50%;display:none;padding:0;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.button:hover,.button:active{border:none}.button--left{z-index:1;left:0}.button--right{right:0}@media screen and (min-width: 576px){.button{display:block}.carousel--scrolledToStart .button--left,.carousel--scrolledToStart .gradient--left,.carousel--scrolledToEnd .button--right,.carousel--scrolledToEnd .gradient--right{display:none}}[class^=gradient]{position:absolute;top:0;width:calc(var(--ds-size-1000, 5rem) + var(--ds-size-500, 2.5rem) + var(--ds-size-150, .75rem));height:100%;pointer-events:none}.gradient--left{left:0}.gradient--right{right:0}
+`,G=t`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{position:relative;display:block}.carousel{overflow-x:scroll;scroll-behavior:smooth;scrollbar-width:none;white-space:nowrap}.carousel::-webkit-scrollbar{width:0;height:0}.carousel.carousel--scrolledToStart:after,.carousel.carousel--scrolledToStart:before,.carousel.carousel--scrolledToEnd:after,.carousel.carousel--scrolledToEnd:before{display:none}.container{display:flex}::slotted(*){flex:0 0 auto;margin-left:var(--ds-size-200, 1rem)}::slotted(:first-child){margin-left:auto}::slotted(:last-child){margin-right:auto}.breakpointDetector:before{display:none}@media screen and (min-width:576px){.breakpointDetector:before{content:"sm"}}.button{position:absolute;top:50%;display:none;padding:0;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.button:hover,.button:active{border:none}.button--left{z-index:1;left:0}.button--right{right:0}@media screen and (min-width:576px){.button{display:block}.carousel--scrolledToStart .button--left,.carousel--scrolledToStart .gradient--left,.carousel--scrolledToEnd .button--right,.carousel--scrolledToEnd .gradient--right{display:none}}[class^=gradient]{position:absolute;top:0;width:calc(var(--ds-size-1000, 5rem) + var(--ds-size-500, 2.5rem) + var(--ds-size-150, .75rem));height:100%;pointer-events:none}.gradient--left{left:0}.gradient--right{right:0}
 `,P=t`:host{--ds-auro-carousel-gradient-color-one: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-carousel-gradient-color-two: transparent}
 `;class V extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.scrollDistance=300,this.runtimeUtils=new l;const t=new d;this.buttonTag=t.generateTag("auro-button","12.3.0",_),this.iconTag=t.generateTag("auro-icon","9.1.1",X),this.scrolledToStart=!1,this.scrolledToEnd=!1}static get properties(){return{centerSelected:{type:String,reflect:!0},displayArrows:{type:Boolean},label:{type:String},scrollDistance:{type:Number,reflect:!0}}}static get styles(){return[G,j,P]}static register(t="auro-carousel"){l.prototype.registerComponent(t,V)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-carousel"),this.carousel=this.renderRoot.querySelector(".carousel"),this.label||console.warn("Label should be provided to auro-carousel for carousel to be accessible"),this.setScrollFlags(!1),this.setUpIntersectionObserver(),this.setUpResizeObserver(),this.hasAttribute("centerSelected")&&(this.actionOnChildrenReady(),document.addEventListener("DOMContentLoaded",()=>{this.actionOnChildrenReady()}))}actionOnChildrenReady(){const t=[];[...this.children].forEach(e=>{t.push(e.updateComplete)}),Promise.all(t).then(()=>{this.scrollToSelected()})}scrollToSelected(){const t=[...this.children].find(t=>t.hasAttribute("selected"));t&&this.centerElement(t)}isSmallScreen(){const t=this.renderRoot.querySelector(".breakpointDetector");return"sm"!==window.getComputedStyle(t,":before").getPropertyValue("content").replace(/"/gu,"")}scrollCarousel(t){this.carousel.scrollLeft+=t}centerElement(t){if(!this.contains(t))throw new Error("Element is not a descendant of this carousel");const e=t.getBoundingClientRect().x-this.getBoundingClientRect().left-this.offsetWidth/2+t.offsetWidth/2;this.scrollCarousel(e)}setScrollFlags(t){const{scrollLeft:e,scrollWidth:o,clientWidth:s}=this.carousel;this.scrolledToStart=e<=0,this.scrolledToEnd=e>=o-s,t&&(this.scrolledToStart||this.scrolledToEnd)&&(this.scrolledToStart?this.firstElementChild.focus():this.lastElementChild.focus()),this.requestUpdate()}setUpIntersectionObserver(){const t={root:this.carousel,threshold:.8};if("IntersectionObserver"in window&&!this.isSmallScreen()){const e=t=>{t.forEach(t=>{t.isIntersecting?(t.target.removeAttribute("tabindex"),t.target.removeAttribute("aria-hidden")):(t.target.setAttribute("tabindex","-1"),t.target.setAttribute("aria-hidden",!0))})};this.intersectionObserver=new IntersectionObserver(e,t),this.observeChildren()}}setUpResizeObserver(){"ResizeObserver"in window&&(this.resizeObserver=new ResizeObserver(()=>this.setScrollFlags()),Array.from(this.children).forEach(t=>{this.resizeObserver.observe(t)}))}observeChildren(){Array.from(this.children).forEach(t=>{this.intersectionObserver.observe(t)})}handleSlotChange(){this.setScrollFlags(!1),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.observeChildren())}handleClick(t){let e=null;t?(this.scrollCarousel(this.scrollDistance),e=new CustomEvent("scrollRight",{bubbles:!0,composed:!0})):(this.scrollCarousel(-1*this.scrollDistance),e=new CustomEvent("scrollLeft",{bubbles:!0,composed:!0})),this.dispatchEvent(e)}render(){const t={wrapper:!0,carousel:!0,"carousel--scrolledToStart":this.scrolledToStart&&!this.displayArrows,"carousel--scrolledToEnd":this.scrolledToEnd&&!this.displayArrows};return r`
       <!-- Hidden slots for aria labels -->

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroCarousel}from"./auro-carousel-D1ntQpGY.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
+export{A as AuroCarousel}from"./auro-carousel-twMItRxb.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i}from"./auro-carousel-D1ntQpGY.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
+import{A as i}from"./auro-carousel-twMItRxb.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

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-carousel",
-  "version": "0.0.0-pr108.0",
+  "version": "0.0.0-pr110.0",
   "description": "auro-carousel HTML custom element",
   "repository": {
     "type": "git",