@solid-design-system/components 3.24.0 → 4.0.0-next.0

package/dist/components/es/utils.js

@@ -1 +0,0 @@
-const e=e=>Array.from(e.assignedElements({flatten:!0})),o=e=>"sd-option"===e.tagName.toLocaleLowerCase()?e:Array.from(e.querySelectorAll(":scope > sd-option")),t=e=>"sd-optgroup"===e.tagName.toLocaleLowerCase(),s=e=>e.map(o),a=e=>e.filter(t),r=e=>e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase();export{a as filterOnlyOptgroups,s as getAllOptions,e as getAssignedElementsForSlot,o as getOptionOrNestedOptions,t as isOptgroup,r as normalizeString};

package/dist/components/es/video.js

@@ -1 +0,0 @@
-import{S as t,x as e,t as s,i as o,e as i,n as a,a as l}from"./solid-components2.js";import{H as r}from"./slot.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var i,a=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(o?i(e,s,a):i(a))||a);return o&&a&&n(e,s,a),a};let h=class extends t{constructor(){super(...arguments),this.playing=!1,this.overlay=!1,this.isBelowBreakpoint=!1,this.hasSlotController=new r(this,"[default]","play-icon","poster")}get poster(){const t=this.shadowRoot.querySelector("slot[name=poster]");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}get video(){return this.querySelector("video")}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}setVideoInert(t){var e,s;t?null==(e=this.video)||e.setAttribute("inert",""):null==(s=this.video)||s.removeAttribute("inert")}play(){var t;this.emit("sd-play"),this.playing=!0,null==(t=this.video)||t.play(),this.fadeoutPoster(),this.setVideoInert(!1)}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.video)||t.focus()})))}handleButtonResize(){this.hostEl.clientWidth<=414&&!this.isBelowBreakpoint&&(this.isBelowBreakpoint=!0),this.hostEl.clientWidth>414&&this.isBelowBreakpoint&&(this.isBelowBreakpoint=!1)}connectedCallback(){super.connectedCallback(),this.setVideoInert(!0),this.resizeObserver=new ResizeObserver((()=>this.handleButtonResize())),this.updateComplete.then((()=>{this.resizeObserver.observe(this.hostEl)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.hostEl)}render(){return e`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${s(this.playing&&"pointer-events-none","group w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline")}"><div part="play-button-bg" class="${s(this.playing?"opacity-0":"opacity-100",this.isBelowBreakpoint?"w-[48px] h-[48px]":"w-[96px] h-[96px]","absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster")?e`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>`:null}<div part="overlay" id="overlay" role="presentation" class="${s(this.overlay&&!this.playing?"opacity-100":"opacity-0","bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition")}"></div><slot></slot></div>`}};h.styles=[t.styles,o`:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){transition-property:opacity;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){position:absolute;left:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:10;width:100%}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}`],d([i("[part=base]")],h.prototype,"hostEl",2),d([a({type:Boolean,reflect:!0})],h.prototype,"playing",2),d([a({type:Boolean,reflect:!0})],h.prototype,"overlay",2),d([a({type:Boolean})],h.prototype,"isBelowBreakpoint",2),h=d([l("sd-video")],h);export{h as default};

package/dist/components/es/watch.js

@@ -1 +0,0 @@
-function t(t,a){const i={waitUntilFirstUpdate:!1,...a};return(a,s)=>{const{update:n}=a,r=Array.isArray(t)?t:[t];a.update=function(t){r.forEach((a=>{const n=a;if(t.has(n)){const a=t.get(n),r=this[n];a!==r&&(!i.waitUntilFirstUpdate||this.hasUpdated)&&this[s](a,r)}})),n.call(this,t)}}}export{t as w};

package/dist/components/es/wave.js

@@ -1 +0,0 @@
-class t{constructor(t){this.fixedEnd=!0,this.fixedStart=!0,this.gradient=!1,this.outline=!1,this.map=(t,i,s,h,e)=>(t-i)*(e-h)/(s-i)+h,this.damp=(t,i,s)=>2*(1-i/t)*(i/t)*s,this.canvas=t.canvas,this.frequency=t.frequency,this.phase=t.phase,this.amplitude=t.amplitude,this.color=t.color,this.shift=t.shift,this.lineWidth=2,this.damping=t.damping,this.context=this.canvas.getContext("2d"),this.paused=!0,this.playbackSpeed=1,this.origin={x:0,y:this.canvas.height}}drawPoint(t,i,s){if(!this.context)return;const h=this.lineWidth/2;if(this.context.beginPath(),this.outline&&(this.context.fillStyle=s,this.context.lineWidth=2,this.context.arc(t,i,h,0,2*Math.PI),this.context.fill()),this.gradient){const t=this.context.createLinearGradient(0,0,0,this.canvas.height);t.addColorStop(.1,s),t.addColorStop(1,"transparent"),this.context.fillStyle=t}else this.context.fillStyle=s;this.context.fillRect(t-h,i-h,h,this.canvas.height-i+h)}buildSine(t,i,s,h,e){for(let a=this.origin.x,n=this.origin.x+t;a<n;a+=1){const t=h*Math.sin(e*(a+i));this.fixedStart&&this.fixedEnd?this.drawPoint(a,this.origin.y+this.damp(n,a,this.damping)*t,s):this.fixedStart?this.drawPoint(a,this.origin.y+this.map(a,this.origin.x,n,0,this.damping)*t,s):this.fixedEnd?this.drawPoint(a,this.origin.y+(this.damping-this.map(a,this.origin.x,n,0,this.damping))*t,s):this.drawPoint(a,this.origin.y+t,s)}}redraw(){this.phase+=this.shift*(this.paused?1:2*this.playbackSpeed),this.buildSine(this.canvas.width,this.phase,this.color,this.amplitude,this.frequency)}setPlay(){this.paused=!1}setPause(){this.paused=!0}setPlaybackSpeed(t){this.playbackSpeed=t}}export{t as Wave};