npm - @solid-design-system/components - Versions diffs - 3.13.0 → 3.14.1 - Mend

@solid-design-system/components 3.13.0 → 3.14.1

Files changed (148) hide show

package/dist/components/es/carousel.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import"./icon.js";import{AutoplayController as e}from"./autoplay-controller.js";import{S as t,L as i,x as s,t as o,r as a,c as r,i as l,n,e as d,a as c}from"./solid-components2.js";import{p as h}from"./animate.js";import{r as p}from"./state.js";import{ScrollController as u}from"./scroll-controller.js";import{w as g}from"./watch.js";import{I as v}from"./interactive.js";import b from"./carousel-item.js";var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var o,a=s>1?void 0:s?y(t,i):t,r=e.length-1;r>=0;r--)(o=e[r])&&(a=(s?o(t,i,a):o(a))||a);return s&&a&&m(t,i,a),a};let w=class extends t{constructor(){super(...arguments),this.variant="number",this.inverted=!1,this.loop=!1,this.autoplay=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.activeSlide=0,this.pausedAutoplay=!1,this.autoplayController=new e(this,(()=>this.next())),this.scrollController=new u(this),this.slides=this.getElementsByTagName("sd-carousel-item"),this.intersectionObserverEntries=new Map,this.localize=new i(this),this.handleSlotChange=e=>{e.some((e=>[...e.addedNodes,...e.removedNodes].some((e=>b.isCarouselItem(e)&&!e.hasAttribute("data-clone")))))&&this.initializeSlides(),this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-label",this.localize.term("carousel"));const e=new IntersectionObserver((e=>{e.forEach((e=>{this.intersectionObserverEntries.set(e.target,e);const t=e.target;t.toggleAttribute("inert",!e.isIntersecting),t.classList.toggle("--in-view",e.isIntersecting),t.setAttribute("aria-hidden",e.isIntersecting?"false":"true")}))}),{root:this,threshold:.6});this.intersectionObserver=e,e.takeRecords().forEach((e=>{this.intersectionObserverEntries.set(e.target,e)}))}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(){this.initializeSlides(),this.mutationObserver=new MutationObserver(this.handleSlotChange),this.mutationObserver.observe(this,{childList:!0,subtree:!1})}getPageCount(){return Math.ceil(this.getSlides().length/this.slidesPerPage)}getCurrentPage(){return Math.ceil(this.activeSlide/this.slidesPerPage)}getSlides({excludeClones:e=!0}={}){return[...this.slides].filter((t=>!e||!t.hasAttribute("data-clone")))}handleKeyDown(e){if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=e.target,i="rtl"===this.localize.dir(),s=null!==t.closest('[part~="pagination-item"]'),o="ArrowDown"===e.key||!i&&"ArrowRight"===e.key||i&&"ArrowLeft"===e.key,a="ArrowUp"===e.key||!i&&"ArrowLeft"===e.key||i&&"ArrowRight"===e.key;e.preventDefault(),a&&this.previous(),o&&this.next(),"Home"===e.key&&this.goToSlide(0),"End"===e.key&&this.goToSlide(this.getSlides().length-1),s&&this.updateComplete.then((()=>{var e;const t=null==(e=this.shadowRoot)?void 0:e.querySelector('[part~="pagination-item--active"]');t&&t.focus()}))}}handleScrollEnd(){const e=this.getSlides(),t=[...this.intersectionObserverEntries.values()].find((e=>e.isIntersecting));if(this.loop&&null!=t&&t.target.hasAttribute("data-clone")){const e=Number(t.target.getAttribute("data-clone"));this.goToSlide(e,"auto")}else t&&(this.activeSlide=e.indexOf(t.target))}handlePausedAutoplay(){this.pausedAutoplay?this.autoplayController.controlledPause():this.autoplay&&this.autoplayController.controlledResume()}initializeSlides(){const e=this.getSlides(),t=this.intersectionObserver;if(this.intersectionObserverEntries.clear(),this.getSlides({excludeClones:!1}).forEach(((e,i)=>{t.unobserve(e),e.classList.remove("--in-view"),e.classList.remove("--is-active"),e.setAttribute("aria-label",this.localize.term("slideNum",i+1)),e.hasAttribute("data-clone")&&e.remove()})),this.loop){const t=this.slidesPerPage,i=e.slice(-t),s=e.slice(0,t);i.reverse().forEach(((t,i)=>{const s=t.cloneNode(!0);s.setAttribute("data-clone",String(e.length-i-1)),this.prepend(s)})),s.forEach(((e,t)=>{const i=e.cloneNode(!0);i.setAttribute("data-clone",String(t)),this.append(i)}))}this.getSlides({excludeClones:!1}).forEach((e=>{t.observe(e)})),this.goToSlide(this.activeSlide,"auto")}handelSlideChange(){const e=this.getSlides();e.forEach(((e,t)=>{e.classList.toggle("--is-active",t===this.activeSlide)})),this.hasUpdated&&this.emit("sd-slide-change",{detail:{index:this.activeSlide,slide:e[this.activeSlide]}})}handleSlidesPerMoveChange(){const e=this.getSlides({excludeClones:!1}),t=this.slidesPerMove;e.forEach(((e,i)=>{Math.abs(i-t)%t==0?e.style.removeProperty("scroll-snap-align"):e.style.setProperty("scroll-snap-align","none")}))}handleAutoplayChange(){this.autoplayController.stop(),this.autoplay&&!this.pausedAutoplay&&this.autoplayController.start(3e3)}previous(e="smooth"){let t=this.activeSlide||this.activeSlide-this.slidesPerMove,i=!1;for(;!i&&t>0;)t-=1,i=Math.abs(t-this.slidesPerMove)%this.slidesPerMove==0;this.goToSlide(t,e)}next(e="smooth"){this.goToSlide(this.activeSlide+this.slidesPerMove,e)}goToSlide(e,t="smooth"){const{slidesPerPage:i,loop:s,scrollContainer:o}=this,a=this.getSlides(),r=this.getSlides({excludeClones:!1}),l=(e+a.length)%a.length;this.activeSlide=l;const n=function(e,t,i){return(e=>Object.is(e,-0)?0:e)(e<0?0:e>i?i:e)}
+import"./icon.js";import{AutoplayController as e}from"./autoplay-controller.js";import{S as t,L as i,x as s,t as o,r,c as a,i as l,n,e as d,a as c}from"./solid-components2.js";import{p as h}from"./animate.js";import{r as p}from"./state.js";import{ScrollController as u}from"./scroll-controller.js";import{w as g}from"./watch.js";import{I as v}from"./interactive.js";import b from"./carousel-item.js";var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var o,r=s>1?void 0:s?y(t,i):t,a=e.length-1;a>=0;a--)(o=e[a])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&m(t,i,r),r};let P=class extends t{constructor(){super(...arguments),this.variant="number",this.inverted=!1,this.loop=!1,this.autoplay=!1,this.slidesPerPage=1,this.slidesPerMove=1,this.activeSlide=0,this.currentPage=1,this.pausedAutoplay=!1,this.autoplayController=new e(this,(()=>this.next())),this.scrollController=new u(this),this.slides=this.getElementsByTagName("sd-carousel-item"),this.intersectionObserverEntries=new Map,this.localize=new i(this),this.handleSlotChange=e=>{e.some((e=>[...e.addedNodes,...e.removedNodes].some((e=>b.isCarouselItem(e)&&!e.hasAttribute("data-clone")))))&&this.initializeSlides(),this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-label",this.localize.term("carousel"));const e=new IntersectionObserver((e=>{e.forEach((e=>{this.intersectionObserverEntries.set(e.target,e);const t=e.target;t.toggleAttribute("inert",!e.isIntersecting),t.classList.toggle("--in-view",e.isIntersecting),t.setAttribute("aria-hidden",e.isIntersecting?"false":"true")}))}),{root:this,threshold:.6});this.intersectionObserver=e,e.takeRecords().forEach((e=>{this.intersectionObserverEntries.set(e.target,e)}))}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(){this.initializeSlides(),this.mutationObserver=new MutationObserver(this.handleSlotChange),this.mutationObserver.observe(this,{childList:!0,subtree:!1})}static getPageCount(e,t,i){return Math.ceil((e-t)/i)+1>0?Math.ceil((e-t)/i)+1:1}static getCurrentPage(e,t,i,s){return Math.ceil((e-i)/s)-Math.ceil((e-i-t)/s)+1}getSlides({excludeClones:e=!0}={}){return[...this.slides].filter((t=>!e||!t.hasAttribute("data-clone")))}handleKeyDown(e){if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=e.target,i="rtl"===this.localize.dir(),s=null!==t.closest('[part~="pagination-item"]'),o="ArrowDown"===e.key||!i&&"ArrowRight"===e.key||i&&"ArrowLeft"===e.key,r="ArrowUp"===e.key||!i&&"ArrowLeft"===e.key||i&&"ArrowRight"===e.key;e.preventDefault(),r&&this.previous(),o&&this.next(),"Home"===e.key&&this.goToSlide(0),"End"===e.key&&this.goToSlide(this.getSlides().length-1),s&&this.updateComplete.then((()=>{var e;const t=null==(e=this.shadowRoot)?void 0:e.querySelector('[part~="pagination-item--active"]');t&&t.focus()}))}}handleScrollEnd(){const e=this.getSlides(),t=[...this.intersectionObserverEntries.values()].find((e=>e.isIntersecting));if(this.loop&&null!=t&&t.target.hasAttribute("data-clone")){const e=Number(t.target.getAttribute("data-clone"));this.goToSlide(e,"auto")}else t&&(this.activeSlide=e.indexOf(t.target))}handlePausedAutoplay(){this.pausedAutoplay?this.autoplayController.controlledPause():this.autoplay&&this.autoplayController.controlledResume()}initializeSlides(){const e=this.getSlides(),t=this.intersectionObserver;if(this.intersectionObserverEntries.clear(),this.getSlides({excludeClones:!1}).forEach(((e,i)=>{t.unobserve(e),e.classList.remove("--in-view"),e.classList.remove("--is-active"),e.setAttribute("aria-label",this.localize.term("slideNum",i+1)),e.hasAttribute("data-clone")&&e.remove()})),this.loop){const t=this.slidesPerPage,i=e.slice(-t),s=e.slice(0,t);i.reverse().forEach(((t,i)=>{const s=t.cloneNode(!0);s.setAttribute("data-clone",String(e.length-i-1)),this.prepend(s)})),s.forEach(((e,t)=>{const i=e.cloneNode(!0);i.setAttribute("data-clone",String(t)),this.append(i)}))}this.getSlides({excludeClones:!1}).forEach((e=>{t.observe(e)})),this.goToSlide(this.activeSlide,"auto")}handelSlideChange(){this.currentPage=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove);const e=this.getSlides();e.forEach(((e,t)=>{e.classList.toggle("--is-active",t===this.activeSlide)})),this.hasUpdated&&this.emit("sd-slide-change",{detail:{index:this.activeSlide,slide:e[this.activeSlide]}}),this.currentPage>P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove)&&this.nextTillFirst()}handleSlidesPerMoveChange(){const e=this.getSlides({excludeClones:!1}),t=this.slidesPerMove;e.forEach(((e,i)=>{Math.abs(i-t)%t==0?e.style.removeProperty("scroll-snap-align"):e.style.setProperty("scroll-snap-align","none")}))}handleAutoplayChange(){this.autoplayController.stop(),this.autoplay&&!this.pausedAutoplay&&this.autoplayController.start(3e3)}previous(e="smooth"){let t=this.activeSlide||this.activeSlide-this.slidesPerMove,i=!1;for(;!i&&t>0;)t-=1,i=Math.abs(t-this.slidesPerMove)%this.slidesPerMove==0;this.currentPage-1==0&&this.loop?this.goToSlide(this.activeSlide-this.slidesPerPage,e):this.goToSlide(t,e)}next(e="smooth"){this.currentPage+1>P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove)&&this.loop?this.nextTillFirst(e):this.goToSlide(this.activeSlide+this.slidesPerMove,e)}nextTillFirst(e="smooth"){for(;0!==this.activeSlide;)this.goToSlide(this.activeSlide+1,e);this.currentPage=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove)}goToSlide(e,t="smooth"){const{slidesPerPage:i,loop:s,scrollContainer:o}=this,r=this.getSlides(),a=this.getSlides({excludeClones:!1}),l=(e+r.length)%r.length;this.activeSlide=l;const n=function(e,t,i){return(e=>Object.is(e,-0)?0:e)(e<0?0:e>i?i:e)}
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */(e+(s?i:0),0,r.length-1),d=r[n],c=o.getBoundingClientRect(),p=d.getBoundingClientRect();o.scrollTo({left:p.left-c.left+o.scrollLeft,top:p.top-c.top+o.scrollTop,behavior:h()?"auto":t})}render(){const{scrollController:e,slidesPerPage:t}=this,i=this.getPageCount(),a=this.getCurrentPage(),r=this.loop||a>0,l=this.loop||a<i-1,n="ltr"===this.localize.dir();return s`<div part="base" class="${o("carousel h-full w-full")}"><div id="scroll-container" part="scroll-container" class="${o("carousel__slides mb-6\n            grid max-h-full w-full items-center justify-items-center overflow-auto",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline","overscroll-x-contain grid-flow-col auto-rows-[100%]\n            snap-x snap-mandatory overflow-y-hidden")}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${e.scrolling?"true":"false"}" aria-atomic="true" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}"><slot></slot></div><div part="controls" class="${o("w-full flex items-center justify-center relative")}"><div part="navigation" class="${o("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!r}" class="${o("!mr-6 !rounded-sm sd-interactive",!r&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${r?"false":"true"}" @click="${r?()=>this.previous():null}"><slot name="previous-icon"><sd-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-down":"chevron-up"}"></sd-icon></slot></button> ${"dot"===this.variant?s`<div part="pagination-dot" role="tablist" class="${o("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${function*(e,t){if(void 0!==e){let i=0;for(const s of e)yield t(s,i++)}}
+ */(e+(s?i:0),0,a.length+1),d=a[n],c=o.getBoundingClientRect(),p=d.getBoundingClientRect();o.scrollTo({left:p.left-c.left+o.scrollLeft,top:p.top-c.top+o.scrollTop,behavior:h()?"auto":t})}render(){const{scrollController:e,slidesPerPage:t}=this,i=P.getPageCount(this.getSlides().length,this.slidesPerPage,this.slidesPerMove),r=P.getCurrentPage(this.getSlides().length,this.activeSlide,this.slidesPerPage,this.slidesPerMove),a=this.loop||r>1,l=this.loop||r<i,n="ltr"===this.localize.dir();return s`<div part="base" class="${o("carousel h-full w-full")}"><div id="scroll-container" part="scroll-container" class="${o("carousel__slides mb-6\n            grid max-h-full w-full items-center justify-items-center overflow-auto",this.inverted?"focus-visible:focus-outline-inverted":"focus-visible:focus-outline","overscroll-x-contain grid-flow-col auto-rows-[100%]\n            snap-x snap-mandatory overflow-y-hidden")}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${e.scrolling?"true":"false"}" aria-atomic="true" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}"><slot></slot></div><div part="controls" class="${o("w-full flex items-center justify-center relative")}"><div part="navigation" class="${o("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!a}" class="${o("!mr-6 !rounded-sm sd-interactive",!a&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${a?"false":"true"}" @click="${a?()=>this.previous():null}"><slot name="previous-icon"><sd-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-down":"chevron-up"}"></sd-icon></slot></button> ${"dot"===this.variant?s`<div part="pagination-dot" role="tablist" class="${o("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${function*(e,t){if(void 0!==e){let i=0;for(const s of e)yield t(s,i++)}}
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */(function*(e,t,i=1){const s=void 0===t?0:e;t??(t=e);for(let e=s;i>0?e<t:t<e;e+=i)yield e}(i),(e=>{const r=e===a;return s`<button part="pagination-item ${r?"pagination-item--active":""}" class="${o("carousel__pagination-item","block cursor-pointer bg-none border-0 rounded-full",r?"bg-accent":"",this.inverted?"focus-within:focus-outline-inverted":"focus-within:focus-outline")}" role="tab" tabindex="0" aria-selected="${r?"true":"false"}" aria-label="${this.localize.term("goToSlide",e+1,i)}" @click="${()=>this.goToSlide(e*t)}" @keydown="${this.handleKeyDown}"><span class="${o("h-4 w-4 block border hover:border-primary-500 rounded-full",this.inverted?"border-white hover:border-primary-500":"border-primary",r&&"bg-accent border-none",r?this.inverted?"hover:bg-accent-300":"hover:bg-accent-550":"")}"></span></button>`}))}</div>`:s`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${o("w-5 text-center border-b-2 border-accent",this.inverted?"text-white":"text-black")}">${a+1}</span> <span part="pagination-divider" class="${o("scale-y-[1.5]","text-center",this.inverted?"text-white":"text-black")}">/</span> <span part="pagination-item" class="${o("w-5 text-center",this.inverted?"text-white":"text-black")}">${i}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!l}" class="${o("!ml-6 !rounded-sm sd-interactive ",!l&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${l?"false":"true"}" @click="${l?()=>{console.log("click-next"),this.next()}:null}"><slot name="next-icon"><sd-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-up":"chevron-down"}"></sd-icon></slot></button></div><button class="${o("ml-6 !rounded-sm","!absolute !right-0 sd-interactive",this.inverted?"sd-interactive--inverted":"sd-interactive--reset",!this.autoplay&&"!hidden")}" part="autoplay-controls" @click="${()=>this.pausedAutoplay=!this.pausedAutoplay}"><slot name="autoplay-start" class="${o(this.pausedAutoplay?"":"hidden")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-icon></slot><slot name="autoplay-pause" class="${o(this.pausedAutoplay?"hidden":"")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-icon></slot></button></div></div>`}};w.styles=[t.styles,a(v),r,l`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`],f([n({type:String,reflect:!0})],w.prototype,"variant",2),f([n({type:Boolean,reflect:!0})],w.prototype,"inverted",2),f([n({type:Boolean,reflect:!0})],w.prototype,"loop",2),f([n({type:Boolean,reflect:!0})],w.prototype,"autoplay",2),f([n({type:Number,attribute:"slides-per-page"})],w.prototype,"slidesPerPage",2),f([n({type:Number,attribute:"slides-per-move"})],w.prototype,"slidesPerMove",2),f([d("slot:not([name])")],w.prototype,"defaultSlot",2),f([d(".carousel__slides")],w.prototype,"scrollContainer",2),f([d(".carousel__pagination")],w.prototype,"paginationContainer",2),f([p()],w.prototype,"activeSlide",2),f([p()],w.prototype,"pausedAutoplay",2),f([g("pausedAutoplay")],w.prototype,"handlePausedAutoplay",1),f([g("loop",{waitUntilFirstUpdate:!0}),g("slidesPerPage",{waitUntilFirstUpdate:!0})],w.prototype,"initializeSlides",1),f([g("activeSlide")],w.prototype,"handelSlideChange",1),f([g("slidesPerMove")],w.prototype,"handleSlidesPerMoveChange",1),f([g("autoplay")],w.prototype,"handleAutoplayChange",1),w=f([c("sd-carousel")],w);export{w as default};
+ */(function*(e,t,i=1){const s=void 0===t?0:e;t??(t=e);for(let e=s;i>0?e<t:t<e;e+=i)yield e}(i),(e=>{const a=e+1===r;return s`<button part="pagination-item ${a?"pagination-item--active":""}" class="${o("carousel__pagination-item","block cursor-pointer bg-none border-0 rounded-full",a?"bg-accent":"",this.inverted?"focus-within:focus-outline-inverted":"focus-within:focus-outline")}" role="tab" tabindex="0" aria-selected="${a?"true":"false"}" aria-label="${this.localize.term("goToSlide",e+1,i)}" @click="${()=>this.goToSlide(e*t)}" @keydown="${this.handleKeyDown}"><span class="${o("h-4 w-4 block border hover:border-primary-500 rounded-full",this.inverted?"border-white hover:border-primary-500":"border-primary",a&&"bg-accent border-none",a?this.inverted?"hover:bg-accent-300":"hover:bg-accent-550":"")}"></span></button>`}))}</div>`:s`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${o("w-5 text-center border-b-2 border-accent",this.inverted?"text-white":"text-black")}">${r}</span> <span part="pagination-divider" class="${o("scale-y-[1.5]","text-center",this.inverted?"text-white":"text-black")}">/</span> <span part="pagination-item" class="${o("w-5 text-center",this.inverted?"text-white":"text-black")}">${i}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!l}" class="${o("!ml-6 !rounded-sm sd-interactive ",!l&&"sd-interactive--disabled",this.inverted?"sd-interactive--inverted":"sd-interactive--reset")}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${l?"false":"true"}" @click="${l?()=>{this.next()}:null}"><slot name="next-icon"><sd-icon class="${o("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${n?"chevron-up":"chevron-down"}"></sd-icon></slot></button></div><button class="${o("ml-6 !rounded-sm","!absolute !right-0 sd-interactive",this.inverted?"sd-interactive--inverted":"sd-interactive--reset",!this.autoplay&&"!hidden")}" part="autoplay-controls" @click="${()=>this.pausedAutoplay=!this.pausedAutoplay}"><slot name="autoplay-start" class="${o(this.pausedAutoplay?"":"hidden")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-icon></slot><slot name="autoplay-pause" class="${o(this.pausedAutoplay?"hidden":"")}"><sd-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-icon></slot></button></div></div>`}};P.styles=[t.styles,r(v),a,l`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`],f([n({type:String,reflect:!0})],P.prototype,"variant",2),f([n({type:Boolean,reflect:!0})],P.prototype,"inverted",2),f([n({type:Boolean,reflect:!0})],P.prototype,"loop",2),f([n({type:Boolean,reflect:!0})],P.prototype,"autoplay",2),f([n({type:Number,attribute:"slides-per-page"})],P.prototype,"slidesPerPage",2),f([n({type:Number,attribute:"slides-per-move"})],P.prototype,"slidesPerMove",2),f([d("slot:not([name])")],P.prototype,"defaultSlot",2),f([d(".carousel__slides")],P.prototype,"scrollContainer",2),f([d(".carousel__pagination")],P.prototype,"paginationContainer",2),f([p()],P.prototype,"activeSlide",2),f([p()],P.prototype,"currentPage",2),f([p()],P.prototype,"pausedAutoplay",2),f([g("pausedAutoplay")],P.prototype,"handlePausedAutoplay",1),f([g("loop",{waitUntilFirstUpdate:!0}),g("slidesPerPage",{waitUntilFirstUpdate:!0})],P.prototype,"initializeSlides",1),f([g("activeSlide")],P.prototype,"handelSlideChange",1),f([g("slidesPerMove")],P.prototype,"handleSlidesPerMoveChange",1),f([g("autoplay")],P.prototype,"handleAutoplayChange",1),P=f([c("sd-carousel")],P);export{P as default};

package/dist/components/es/navigation-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{S as t,t as e,c as i,i as s,n as r,a as o}from"./solid-components2.js";import{H as l}from"./slot.js";import{s as a,n}from"./static.js";import{o as d}from"./if-defined.js";var h=Object.defineProperty,c=Object.getOwnPropertyDescriptor,p=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?c(e,i):e,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(s?r(e,i,o):r(o))\|\|o);return s&&o&&h(e,i,o),o};let u=class extends t{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","description","children"),this.current=!1,this.disabled=!1,this.size="base",this.vertical=!1,this.chevron=!1,this.indented=!1,this.relaxed=!1,this.divider=!1,this.open=!1}isButton(){return!this.href&&!this.hasSlotController.test("children")}isLink(){return!!this.href}isAccordion(){return!this.href&&this.hasSlotController.test("children")}handleClickButton(t){this.disabled&&(t.preventDefault(),t.stopPropagation())}handleClickSummary(t){t.preventDefault(),t.stopPropagation(),this.disabled\|\|(this.open?this.hideDetails():this.showDetails())}hideDetails(){this.open=!1,this.emit("sd-hide",{cancelable:!0})}showDetails(){this.open=!0,this.emit("sd-show",{cancelable:!0})}calculatePaddingX(){return this.relaxed&&this.indented?"pl-8 pr-4":this.relaxed?"px-4":this.indented?"pl-4":""}render(){const t=this.~~isLink()~~,i=this.~~isButton()~~,s=this.~~isAccordion()~~,r=(this.hasSlotController.test("[default]"),this.hasSlotController.test("main"),this.hasSlotController.test("description")),o=this.hasSlotController.test("children"),l=~~t?a`a`:s?a`summary`:a`button`,h=~~this.vertical?"pb-3":"pb-2",c=n`<${l} part="base" class="${e("~~px-4 hover:bg-neutral-200 group transition-all min-h-[48px]~~ cursor-pointer relative focus-visible:focus-outline",{base:"text-base",lg:"text-lg",sm:"text-[14px]"}[this.size],this.disabled?"text-neutral-500 pointer-events-none":"text-primary",s?"flex flex-col":"inline-block w-full",this.divider&&this.vertical&&"mt-0.25",!this.vertical&&"inline-flex items-center")}" aria-controls="${d(s?"navigation-item-details":void 0)}" aria-current="${d(this.current?"page":void 0)}" aria-disabled="${this.disabled}" ?disabled="${d(i?this.disabled:void 0)}" href="${d(t?this.href:void 0)}" target="${d(t?this.target:void 0)}" download="${d(t?this.download:void 0)}" rel="${d(t&&this.target?"noreferrer noopener":void 0)}" role="${t?"link":"button"}" tabindex="${this.disabled?"-1":"0"}" @click="${s?this.handleClickSummary:i?this.handleClickButton:void 0}"><div part="current-indicator" class="${e("absolute left-0 pointer-events-none transition-all duration-150",this.vertical?"w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0":"h-1 w-full bottom-0",this.current?"bg-accent":"bg-transparent",this.disabled&&"bg-neutral-500")}"></div><span part="content-area" class="${e("relative pt-3 inline-flex justify-between items-center",s?"grow":"w-full",r?"pb-1":h,this.calculatePaddingX())}">${this.divider&&this.vertical?n`<sd-divider part="divider" class="${e("w-full transition-all absolute -top-0.25 left-0",this.calculatePaddingX())}"></sd-divider>`:""} <span part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron\|\|o)&&this.vertical?n`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("h-6 w-6 ml-2 transition-all",s?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon>`:""} </span>${r&&this.vertical?n`<slot name="description" part="description" class="${e("inline-block text-sm text-left text-black",s?"grow":"w-full",h,this.calculatePaddingX())}"></slot>`:""}</${l}>`;return s?n`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${c}<slot name="children"></slot></details>`:n`${c}`}};u.styles=[i,t.styles,s`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`],p([r({reflect:!0})],u.prototype,"href",2),p([r()],u.prototype,"target",2),p([r()],u.prototype,"download",2),p([r({type:Boolean,reflect:!0})],u.prototype,"current",2),p([r({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([r({reflect:!0})],u.prototype,"size",2),p([r({type:Boolean,reflect:!0})],u.prototype,"vertical",2),p([r({type:Boolean,reflect:!0})],u.prototype,"chevron",2),p([r({type:Boolean,reflect:!0})],u.prototype,"indented",2),p([r({type:Boolean,reflect:!0})],u.prototype,"relaxed",2),p([r({type:Boolean,reflect:!0})],u.prototype,"divider",2),p([r({type:Boolean,reflect:!0})],u.prototype,"open",2),~~u=p~~([o("sd-navigation-item")],u);export{u as default};
1	+ import{S as t,t as e,c as i,r as s,i as r,n as o,a}from"./solid-components2.js";import{H as l}from"./slot.js";import{s as n,n as d}from"./static.js";import{o as h}from"./if-defined.js";import{I as c}from"./interactive.js";var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,v=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?u(e,i):e,a=t.length-1;a>=0;a--)(r=t[a])&&(o=(s?r(e,i,o):r(o))\|\|o);return s&&o&&p(e,i,o),o};let f=class extends t{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","description","children"),this.current=!1,this.disabled=!1,this.size="base",this.vertical=!1,this.chevron=!1,this.indented=!1,this.relaxed=!1,this.divider=!1,this.open=!1,this.separated=!1}get isButton(){return!this.href&&!this.hasSlotController.test("children")}get isLink(){return!!this.href}get isAccordion(){return!this.href&&this.hasSlotController.test("children")}handleClickButton(t){this.disabled&&(t.preventDefault(),t.stopPropagation())}handleClickSummary(t){t.preventDefault(),t.stopPropagation(),this.disabled\|\|(this.open?this.hideDetails():this.showDetails())}hideDetails(){this.open=!1,this.emit("sd-hide",{cancelable:!0})}showDetails(){this.open=!0,this.emit("sd-show",{cancelable:!0})}get calculatePaddingX(){return this.relaxed&&this.indented?"pl-8 pr-4":this.relaxed?"px-4":this.indented?"pl-4":""}get tag(){return this.isAccordion&&!this.isLink?n`summary`:this.separated?n`div`:this.isLink?n`a`:n`button`}render(){const t=this.tag,i=this.isLink,s=this.isButton,r=this.isAccordion,o=(this.hasSlotController.test("[default]"),this.hasSlotController.test("main"),this.hasSlotController.test("description")),a=this.hasSlotController.test("children"),l=this.vertical?"pb-3":"pb-2",n=d`<${t} part="base" class="${e("cursor-pointer relative focus-visible:focus-outline",{base:"text-base",lg:"text-lg",sm:"text-[14px]"}[this.size],this.disabled?"text-neutral-500 pointer-events-none":"text-primary",r?"flex flex-col":"inline-block w-full",this.divider&&this.vertical&&"mt-0.25",!this.vertical&&"inline-flex items-center",!this.separated&&"hover:bg-neutral-200 group transition-all min-h-[48px] px-4")}" aria-controls="${h(r?"navigation-item-details":void 0)}" aria-current="${h(this.current?"page":void 0)}" aria-disabled="${this.disabled}" ?disabled="${h(s?this.disabled:void 0)}" href="${h(i?this.href:void 0)}" target="${h(i?this.target:void 0)}" download="${h(i?this.download:void 0)}" rel="${h(i&&this.target?"noreferrer noopener":void 0)}" role="${i?"link":"button"}" tabindex="${this.disabled\|\|this.separated?"-1":"0"}" @click="${this.separated?void 0:r?this.handleClickSummary:s?this.handleClickButton:void 0}"><div part="current-indicator" class="${e("absolute left-0 pointer-events-none transition-all duration-150",this.vertical?"w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0":"h-1 w-full bottom-0",this.current?"bg-accent":"bg-transparent",this.disabled&&"bg-neutral-500")}"></div><span part="content-area" class="${e("relative pt-3 inline-flex justify-between items-center",r?"grow":"w-full",o\|\|this.separated?"pb-1":l,this.calculatePaddingX)}">${this.divider&&this.vertical?d`<sd-divider part="divider" class="${e("w-full transition-all absolute -top-0.25 left-0",this.calculatePaddingX)}"></sd-divider>`:""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated?d`<a class="${e("mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",!o&&"py-4")}" href="${h(i?this.href:void 0)}" target="${h(i?this.target:void 0)}" download="${h(i?this.download:void 0)}"><slot part="content" class="inline"></slot></a>`:d`<slot part="content" class="inline"></slot>`} </span>${(this.chevron\|\|a)&&this.vertical?this.separated?d`<button type="button" title="chevron-down-button" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("mr-4 h-6 w-6 transition-all",r\|\|this.separated?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon></button>`:d`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("h-6 w-6 ml-2 transition-all",r?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon>`:""} </span>${o&&this.vertical?d`<slot name="description" part="description" class="${e("inline-block text-sm text-left text-black",r\|\|this.separated?"grow":"w-full",this.separated?"px-4":this.calculatePaddingX,l)}"></slot>`:""}</${t}>`;return r?d`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${n}<slot name="children"></slot></details>`:this.separated?d`<div part="details" id="navigation-item-details" class="relative flex flex-col">${n}${this.open?d`<slot name="children"></slot>`:""}</div>`:d`${n}`}};f.styles=[i,t.styles,s(c),r`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`],v([o({reflect:!0})],f.prototype,"href",2),v([o()],f.prototype,"target",2),v([o()],f.prototype,"download",2),v([o({type:Boolean,reflect:!0})],f.prototype,"current",2),v([o({type:Boolean,reflect:!0})],f.prototype,"disabled",2),v([o({reflect:!0})],f.prototype,"size",2),v([o({type:Boolean,reflect:!0})],f.prototype,"vertical",2),v([o({type:Boolean,reflect:!0})],f.prototype,"chevron",2),v([o({type:Boolean,reflect:!0})],f.prototype,"indented",2),v([o({type:Boolean,reflect:!0})],f.prototype,"relaxed",2),v([o({type:Boolean,reflect:!0})],f.prototype,"divider",2),v([o({type:Boolean,reflect:!0})],f.prototype,"open",2),v([o({type:Boolean,reflect:!0})],f.prototype,"separated",2),f=v([a("sd-navigation-item")],f);export{f as default};