@codecabana/web-components/dist/es/slideshow.js

Web components designed to infiltrate no-code platforms via script tags

const e=e=>"function"==typeof e,t=e=>"object"==typeof e,{isArray:n}=Array;class r{constructor(e,t,n){this.message=t,this.target=e,this.value=n}}const i={true:1,"":1,1:1};function s(n,i,s,c,d){let{type:h,reflect:p,event:f,value:y,attr:b=l(i)}=t(s)&&null!=s?s:{type:s},v=!(h==Function||null==h);Object.defineProperty(n,i,{configurable:!0,set(t){let n=this[i],{error:s,value:l}=a(h,v&&e(t)?t(n):t);if(s&&null!=l)throw new r(this,`The value defined for prop '${i}' must be of type '${h.name}'`,l);n!=l&&(this.update({[i]:l}),f&&o(this,f),this.updated.then((()=>{p&&(this._ignoreAttr=b,u(this,h,b,this[i]),this._ignoreAttr=null)})))},get(){return this._props[i]}}),null!=y&&(d[i]=y),c[b]={prop:i,type:h}}const o=(e,{type:t,base:n=CustomEvent,...r})=>e.dispatchEvent(new n(t,r)),l=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),u=(e,n,r,i)=>null==i||n==Boolean&&!i?e.removeAttribute(r):e.setAttribute(r,t(i)?JSON.stringify(i):n==Boolean?"":i),a=(e,t)=>null==e?{value:t}:e!=String&&""===t?{value:null}:{}.toString.call(t)==`[object ${e.name}]`?{value:t,error:e==Number&&Number.isNaN(t)}:{value:t,error:!0};let c,d;function h(e,t,n){return c.use(e,t,n)}const p={id:1,className:1,checked:1,value:1,selected:1},f={list:1,type:1,size:1,form:1,width:1,height:1,src:1,href:1,slot:1},y={shadowDom:1,renderOnce:1,children:1,key:1},b={},v=[],m=document;class g extends Text{get nodeType(){return-1}}const w=Symbol(),S=Symbol(),k=Symbol();function E(e,t,...n){let r=t||b,{children:i}=r;i=null!=i?i:n.length?n:v;const s=!!e&&(e instanceof Node?1:e.prototype instanceof HTMLElement&&2);return{$$:w,type:e,props:r,children:i,key:r.key,shadow:r.shadowDom,once:r.renderOnce,raw:s,is:r.is}}function j(e,t,r=S,i,s){let o;if(t&&t[r]&&t[r].vnode==e||e.$$!=w)return t;if(e||!t){if(s=s||"svg"==e.type,o="host"!=e.type&&(t&&t[k]||(1==e.raw?t!=e.type:2==e.raw?!(t instanceof e.type):t?t.localName!=e.type:!t)),e.ref){e.ref[k]=!0;const t=e.ref.cloneNode(!0);return t[r]={vnode:e},t[k]=!0,t}o&&null!=e.type&&(e.ref=t=1==e.raw?e.type:2==e.raw?new e.type:s?m.createElementNS("http://www.w3.org/2000/svg",e.type):m.createElement(e.type,e.is?{is:e.is}:void 0))}let{vnode:l=b,cycle:u=0,fragment:a,handlers:c}=t[r]?t[r]:b,{children:d=v,props:h=b}=l;if(c=o?{}:c||{},e.once&&!o)return t;if(e.shadow&&!t.shadowRoot&&t.attachShadow({mode:"open"}),e.props!=h&&function(e,t,n,r,i){for(let s in t)s in n||A(e,s,t[s],null,i,r);for(let s in n)A(e,s,t[s],n[s],i,r)}(t,h,e.props,c,s),e.children!==d){let o=e.shadow?t.shadowRoot:t;a=function(e,t,r,i,s,o){e=null==e?null:n(e)?e:[e];let l,u=t||function(e,t){const n=new g(""),r=new g("");return e[t?"prepend":"append"](n),e.append(r),{markStart:n,markEnd:r}}(r,s),{markStart:a,markEnd:c,keyes:d}=u,h=d&&new Set,p=a;function f(e){let{length:t}=e;for(let u=0;u<t;u++){let t=e[u],a=typeof t;if(null==t||"boolean"==a||"function"==a)continue;if(n(t)){f(t);continue}if("object"==a&&t.$$!=w)continue;let y=t.$$&&t.key,b=d&&null!=y&&d.get(y);p!=c&&p===b?h.delete(p):p=p==c?c:p.nextSibling;let v=d?b:p,m=v;if(t.$$)m=j(t,v,i,s,o);else{let e=t+"";3!=m.nodeType?m=new Text(e):m.data!=e&&(m.data=e)}m!=p&&(d&&h.delete(m),!v||d?(r.insertBefore(m,p),d&&p!=c&&h.add(p)):v==c?r.insertBefore(m,c):(r.replaceChild(m,v),p=m)),null!=y&&(l=l||new Map,l.set(y,m))}}if(e&&f(e),p=p==c?c:p.nextSibling,t&&p!=c)for(;p!=c;){let e=p;p=p.nextSibling,e.remove()}return h&&h.forEach((e=>e.remove())),u.keyes=l,u}(e.children,a,o,r,!u&&i,(!s||"foreignObject"!=e.type)&&s)}return u++,t[r]={vnode:e,handlers:c,fragment:a,cycle:u},t}function A(n,r,i,s,o,l){if(i=null==i?null:i,s=null==s?null:s,(r="class"!=r||o?r:"className")in n&&p[r]&&(i=n[r]),s!==i&&!y[r]&&"_"!=r[0])if("o"==r[0]&&"n"==r[1]&&(e(s)||e(i)))!function(e,t,n,r){r.handleEvent||(r.handleEvent=t=>r[t.type].call(e,t));if(n){if(!r[t]){let i=n.capture||n.once||n.passive?Object.assign({},n):null;e.addEventListener(t,r,i)}r[t]=n}else r[t]&&(e.removeEventListener(t,r),delete r[t])}(n,r.slice(2),s,l);else if("ref"==r)s&&(s.current=n);else if("style"==r){let e=n.style;s=s||"";let r=t(i=i||""),o=t(s);if(r)for(let t in i){if(!o)break;t in s||N(e,t,null)}if(o)for(let t in s){let n=s[t];r&&i[t]===n||N(e,t,n)}else e.cssText=s}else{let l="$"==r[0]?r.slice(1):r;l===r&&(!o&&!f[r]&&r in n||e(s)||e(i))?n[r]=null==s?"":s:null==s?n.removeAttribute(l):n.setAttribute(l,t(s)?JSON.stringify(s):s)}}function N(e,t,n){let r="setProperty";null==n&&(r="removeProperty",n=null),~t.indexOf("-")?e[r](t,n):e[t]=n}const $=!!document.adoptedStyleSheets,C=null;let x=(_=2,(t,n)=>{let r=([n,r],i)=>{if(!i)return[n||t(r),r];e(n)&&n()};h((([t,r]=[])=>(!r&&r||(r&&function(e,t){let n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,n)?t=t||!0:(e(t)&&t(),t=null)),[t,n])),1==_&&r,2==_&&r)});var _;function O(t){let n=c.update;return h(((r=[])=>(r[1]||(r[0]=e(t)?t():t,r[1]=t=>{(t=e(t)?t(r[0]):t)!=r[0]&&(r[0]=t,n())}),r)))}var L=function(e,t,n,r){var i;t[0]=0;for(var s=1;s<t.length;s++){var o=t[s++],l=t[s]?(t[0]|=o?1:2,n[t[s++]]):t[++s];3===o?r[0]=l:4===o?r[1]=Object.assign(r[1]||{},l):5===o?(r[1]=r[1]||{})[t[++s]]=l:6===o?r[1][t[++s]]+=l+"":o?(i=e.apply(l,L(e,l,n,["",null])),r.push(i),l[0]?t[0]|=2:(t[s-2]=0,t[s]=i)):r.push(l)}return r},T=new Map;(function(e){var t=T.get(this);return t||(t=new Map,T.set(this,t)),(t=L(this,t.get(e)||(t.set(e,t=function(e){for(var t,n,r=1,i="",s="",o=[0],l=function(e){1===r&&(e||(i=i.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.push(0,e,i):3===r&&(e||i)?(o.push(3,e,i),r=2):2===r&&"..."===i&&e?o.push(4,e,0):2===r&&i&&!e?o.push(5,0,!0,i):r>=5&&((i||!e&&5===r)&&(o.push(r,0,i,n),r=6),e&&(o.push(r,e,0,n),r=6)),i=""},u=0;u<e.length;u++){u&&(1===r&&l(),l(u));for(var a=0;a<e[u].length;a++)t=e[u][a],1===r?"<"===t?(l(),o=[o],r=3):i+=t:4===r?"--"===i&&">"===t?(r=1,i=""):i=t+i[0]:s?t===s?s="":i+=t:'"'===t||"'"===t?s=t:">"===t?(l(),r=1):r&&("="===t?(r=5,n=i,i=""):"/"===t&&(r<5||">"===e[u][a+1])?(l(),3===r&&(o=o[0]),r=o,(o=o[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(l(),r=2):i+=t),3===r&&"!--"===i&&(r=4,o=o[0])}return l(),o}(e)),t),arguments,[])).length>1?t:t[0]}).bind(E);function M({width:e,height:t,duration:n,objectFit:r,objectPosition:i}){const[s,o]=O(0),l=h(((e={current:u})=>e));var u;const a=function(e){const[t,n]=O([]);return x((()=>{const{current:t}=e;if(!t)return;const r=()=>n(t.assignedNodes().filter((e=>!(e instanceof g))));return r(),function(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n)}(t,"slotchange",r)}),[]),t}(l),c=a.filter((e=>e instanceof HTMLElement)),d=Math.max(100,n);return x((()=>{c.forEach(((e,t)=>{const n=t===s;n?e.setAttribute("visible",""):e.removeAttribute("visible"),e.setAttribute("aria-hidden",(!n).toString()),e.setAttribute("part","item"),e.setAttribute("alt",""),e.classList.add("item")}))}),[s,c]),x((()=>{const e=setInterval((()=>{o((e=>(e+1)%c.length))}),d);return()=>clearInterval(e)}),[c]),E("host",{shadowDom:!0,children:E("div",{class:"viewport",part:"viewport",style:{"--width":e,"--height":t,"--duration":d,"--object-fit":r,"--object-position":i},children:[E("slot",{ref:l}),E("style",{children:".viewport {\n  position: relative;\n  width: var(--width, 500px);\n  height: var(--height, 500px);\n}\n\n::slotted(.item) {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--object-fit, cover);\n  object-position: var(--object-position, center);\n}\n\n::slotted(.item:not([visible])) {\n  visibility: hidden;\n}"})]})})}M.props={width:{type:String,value:"500px"},height:{type:String,value:"500px"},duration:{type:Number,value:2e3},objectFit:{type:String,value:"cover"},objectPosition:{type:String,value:"center"}},customElements.define("codecabana-slideshow",function(e,t=HTMLElement){let r={},o={},{props:l,styles:u}=e;return class extends t{constructor(){super(),this._setup(),this._render=()=>e({...this._props});for(let e in o)this[e]=o[e]}static get styles(){return[super.styles,u]}async _setup(){if(this._props)return;this._props={},this.mounted=new Promise((e=>this.mount=e)),this.unmounted=new Promise((e=>this.unmount=e)),this.symbolId=this.symbolId||Symbol();let e,t=function(e,t){let n={},r={use:function(e,t,r){let i=d++;return n[i]=[e(n[i]?n[i][0]:void 0),t,r],n[i][0]},host:t,update:e};function i(e,t){for(let r in n){let i=n[r];i[e]&&(i[0]=i[e](i[0],t))}}return{load:function(e){let t;d=0,c=r;try{t=e()}finally{c=null}return t},cleanEffects:function(e){return i(1,e),()=>{i(2,e),e&&(n={})}}}}((()=>this.update()),this),r=!0,i="hydrate"in this.dataset;this.update=s=>{if(e||(e=!0,this.updated=(this.updated||this.mounted).then((()=>{try{return j(t.load(this._render),this,this.symbolId,r&&i),e=!1,r&&(r=!1,function(e){let{styles:t}=e.constructor,{shadowRoot:r}=e;r&&t.length&&(t=t.reduce((function e(t,r){return n(r)?r.reduce(e,t):r&&t.push(r),t}),[]),$?r.adoptedStyleSheets=[...t]:t.map((e=>r.appendChild(e.cloneNode(!0)))))}(this)),!C&&t.cleanEffects()}finally{e=!1}})).then((e=>{e&&e()}))),s)for(let e in s)this._props[e]=s[e];return this.updated},this.update(),await this.unmounted,t.cleanEffects(!0)()}connectedCallback(){this.mount(),super.connectedCallback&&super.connectedCallback()}async disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),await this.mounted,!this.isConnected&&this.unmount()}attributeChangedCallback(e,t,n){if(r[e]){if(e===this._ignoreAttr||t===n)return;let{prop:s,type:o}=r[e];this[s]=((e,t)=>e==Boolean?!!i[t]:e==Number?Number(t):e==Array||e==Object?JSON.parse(t):t)(o,n)}else super.attributeChangedCallback(e,t,n)}static get observedAttributes(){let e=super.observedAttributes||[];for(let e in l)s(this.prototype,e,l[e],r,o);return Object.keys(r).concat(e)}}}(M));