@codecabana/web-components
Version:
Web components designed to infiltrate no-code platforms via script tags
2 lines (1 loc) • 11.4 kB
JavaScript
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 s={true:1,"":1,1:1};function o(n,s,o,c,p){let{type:d,reflect:h,event:f,value:m,attr:y=l(s)}=t(o)&&null!=o?o:{type:o},b=!(d==Function||null==d);Object.defineProperty(n,s,{configurable:!0,set(t){let n=this[s],{error:o,value:l}=u(d,b&&e(t)?t(n):t);if(o&&null!=l)throw new r(this,`The value defined for prop '${s}' must be of type '${d.name}'`,l);n!=l&&(this.update({[s]:l}),f&&a(this,f),this.updated.then((()=>{h&&(this._ignoreAttr=y,i(this,d,y,this[s]),this._ignoreAttr=null)})))},get(){return this._props[s]}}),null!=m&&(p[s]=m),c[y]={prop:s,type:d}}const a=(e,{type:t,base:n=CustomEvent,...r})=>e.dispatchEvent(new n(t,r)),l=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),i=(e,n,r,s)=>null==s||n==Boolean&&!s?e.removeAttribute(r):e.setAttribute(r,t(s)?JSON.stringify(s):n==Boolean?"":s),u=(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,p;function d(e,t,n){return c.use(e,t,n)}const h={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},m={shadowDom:1,renderOnce:1,children:1,key:1},y={},b=[],v=document;class g extends Text{get nodeType(){return-1}}const k=Symbol(),w=Symbol(),S=Symbol();function N(e,t,...n){let r=t||y,{children:s}=r;s=null!=s?s:n.length?n:b;const o=!!e&&(e instanceof Node?1:e.prototype instanceof HTMLElement&&2);return{$$:k,type:e,props:r,children:s,key:r.key,shadow:r.shadowDom,once:r.renderOnce,raw:o,is:r.is}}function E(e,t,r=w,s,o){let a;if(t&&t[r]&&t[r].vnode==e||e.$$!=k)return t;if(e||!t){if(o=o||"svg"==e.type,a="host"!=e.type&&(t&&t[S]||(1==e.raw?t!=e.type:2==e.raw?!(t instanceof e.type):t?t.localName!=e.type:!t)),e.ref){e.ref[S]=!0;const t=e.ref.cloneNode(!0);return t[r]={vnode:e},t[S]=!0,t}a&&null!=e.type&&(e.ref=t=1==e.raw?e.type:2==e.raw?new e.type:o?v.createElementNS("http://www.w3.org/2000/svg",e.type):v.createElement(e.type,e.is?{is:e.is}:void 0))}let{vnode:l=y,cycle:i=0,fragment:u,handlers:c}=t[r]?t[r]:y,{children:p=b,props:d=y}=l;if(c=a?{}:c||{},e.once&&!a)return t;if(e.shadow&&!t.shadowRoot&&t.attachShadow({mode:"open"}),e.props!=d&&function(e,t,n,r,s){for(let o in t)o in n||C(e,o,t[o],null,s,r);for(let o in n)C(e,o,t[o],n[o],s,r)}(t,d,e.props,c,o),e.children!==p){let a=e.shadow?t.shadowRoot:t;u=function(e,t,r,s,o,a){e=null==e?null:n(e)?e:[e];let l,i=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,o),{markStart:u,markEnd:c,keyes:p}=i,d=p&&new Set,h=u;function f(e){let{length:t}=e;for(let i=0;i<t;i++){let t=e[i],u=typeof t;if(null==t||"boolean"==u||"function"==u)continue;if(n(t)){f(t);continue}if("object"==u&&t.$$!=k)continue;let m=t.$$&&t.key,y=p&&null!=m&&p.get(m);h!=c&&h===y?d.delete(h):h=h==c?c:h.nextSibling;let b=p?y:h,v=b;if(t.$$)v=E(t,b,s,o,a);else{let e=t+"";3!=v.nodeType?v=new Text(e):v.data!=e&&(v.data=e)}v!=h&&(p&&d.delete(v),!b||p?(r.insertBefore(v,h),p&&h!=c&&d.add(h)):b==c?r.insertBefore(v,c):(r.replaceChild(v,b),h=v)),null!=m&&(l=l||new Map,l.set(m,v))}}if(e&&f(e),h=h==c?c:h.nextSibling,t&&h!=c)for(;h!=c;){let e=h;h=h.nextSibling,e.remove()}return d&&d.forEach((e=>e.remove())),i.keyes=l,i}(e.children,u,a,r,!i&&s,(!o||"foreignObject"!=e.type)&&o)}return i++,t[r]={vnode:e,handlers:c,fragment:u,cycle:i},t}function C(n,r,s,o,a,l){if(s=null==s?null:s,o=null==o?null:o,(r="class"!=r||a?r:"className")in n&&h[r]&&(s=n[r]),o!==s&&!m[r]&&"_"!=r[0])if("o"==r[0]&&"n"==r[1]&&(e(o)||e(s)))!function(e,t,n,r){r.handleEvent||(r.handleEvent=t=>r[t.type].call(e,t));if(n){if(!r[t]){let s=n.capture||n.once||n.passive?Object.assign({},n):null;e.addEventListener(t,r,s)}r[t]=n}else r[t]&&(e.removeEventListener(t,r),delete r[t])}(n,r.slice(2),o,l);else if("ref"==r)o&&(o.current=n);else if("style"==r){let e=n.style;o=o||"";let r=t(s=s||""),a=t(o);if(r)for(let t in s){if(!a)break;t in o||$(e,t,null)}if(a)for(let t in o){let n=o[t];r&&s[t]===n||$(e,t,n)}else e.cssText=o}else{let l="$"==r[0]?r.slice(1):r;l===r&&(!a&&!f[r]&&r in n||e(o)||e(s))?n[r]=null==o?"":o:null==o?n.removeAttribute(l):n.setAttribute(l,t(o)?JSON.stringify(o):o)}}function $(e,t,n){let r="setProperty";null==n&&(r="removeProperty",n=null),~t.indexOf("-")?e[r](t,n):e[t]=n}const A=!!document.adoptedStyleSheets,_=null;let x=(B=2,(t,n)=>{let r=([n,r],s)=>{if(!s)return[n||t(r),r];e(n)&&n()};d((([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==B&&r,2==B&&r)});var B;function O(t){let n=c.update;return d(((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 T=function(e,t,n,r){var s;t[0]=0;for(var o=1;o<t.length;o++){var a=t[o++],l=t[o]?(t[0]|=a?1:2,n[t[o++]]):t[++o];3===a?r[0]=l:4===a?r[1]=Object.assign(r[1]||{},l):5===a?(r[1]=r[1]||{})[t[++o]]=l:6===a?r[1][t[++o]]+=l+"":a?(s=e.apply(l,T(e,l,n,["",null])),r.push(s),l[0]?t[0]|=2:(t[o-2]=0,t[o]=s)):r.push(l)}return r},j=new Map;(function(e){var t=j.get(this);return t||(t=new Map,j.set(this,t)),(t=T(this,t.get(e)||(t.set(e,t=function(e){for(var t,n,r=1,s="",o="",a=[0],l=function(e){1===r&&(e||(s=s.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?a.push(0,e,s):3===r&&(e||s)?(a.push(3,e,s),r=2):2===r&&"..."===s&&e?a.push(4,e,0):2===r&&s&&!e?a.push(5,0,!0,s):r>=5&&((s||!e&&5===r)&&(a.push(r,0,s,n),r=6),e&&(a.push(r,e,0,n),r=6)),s=""},i=0;i<e.length;i++){i&&(1===r&&l(),l(i));for(var u=0;u<e[i].length;u++)t=e[i][u],1===r?"<"===t?(l(),a=[a],r=3):s+=t:4===r?"--"===s&&">"===t?(r=1,s=""):s=t+s[0]:o?t===o?o="":s+=t:'"'===t||"'"===t?o=t:">"===t?(l(),r=1):r&&("="===t?(r=5,n=s,s=""):"/"===t&&(r<5||">"===e[i][u+1])?(l(),3===r&&(a=a[0]),r=a,(a=a[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(l(),r=2):s+=t),3===r&&"!--"===s&&(r=4,a=a[0])}return l(),a}(e)),t),arguments,[])).length>1?t:t[0]}).bind(N);function P({duration:e,backspaceDuration:t,constantSpeed:n,pause:r,backspacePause:s,cursor:o,cursorStyle:a,cursorBlinkSpeed:l,cursorBlinkFade:i,cursorColor:u}){const c=d(((e={current:p})=>e));var p;const h=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}(c),f=h.filter((e=>e instanceof HTMLElement)),[m,y]=O([]),[b,v]=O(0),[k,w]=O(0),[S,E]=O(1),[C,$]=O(!1),[A,_]=O(0),{text:B,duration:T,backspaceDuration:j,pause:P,backspacePause:I}=m[b]||{},D=t>0?t:e,L=1===S?parseInt(T)||e:parseInt(j)||D,M=1===S?parseInt(P)||r:parseInt(I)||s,F=B&&B.substring(0,k),H=F&&F.length>0&&F,J=n?L:B&&L/B.length,R=o?void 0:a;return x((function(){const e=f.map((e=>({text:e.innerText,pause:e.dataset.pause,duration:e.dataset.duration,backspaceDuration:e.dataset.backspaceDuration,backspacePause:e.dataset.backspacePause})));return y(e),()=>y([])}),[h]),x((function(){const e=setInterval((()=>{_((e=>{const t=e+1;return t>10?0:t}))}),J);return()=>clearInterval(e)}),[h,J]),x((function(){if(B&&!C){if(!(k>=B.length&&1===S))return k<=0&&-1===S?(M<=0?E(-1):($(!0),setTimeout((()=>{E(1),$(!1)}),M)),void v((e=>(e+1)%m.length))):void w((e=>e+S));M<=0?E(-1):($(!0),setTimeout((()=>{E(-1),$(!1)}),M))}}),[A,J]),N("host",{shadowDom:!0,style:{"--cursor-blink-speed":`${l}ms`,"--cursor-blink-anim":i?"soft":"hard","--cursor-color":u},children:[N("slot",{ref:c}),N("p",{class:"message",part:"message",children:[H||!o&&N("span",{children:""}),N("div",{class:(X=["cursor",R],X.filter(Boolean).join(" ")),part:"cursor",children:o})]}),N("style",{children:'::slotted(*) {\n display: none;\n}\n\n.message {\n position: relative;\n}\n\n.cursor {\n display: inline-block;\n animation: var(--cursor-blink-anim, soft) var(--cursor-blink-speed, 1s) linear infinite;\n color: var(--cursor-color, black);\n}\n\n.vertical-bar {\n position: absolute;\n width: 0.1em;\n height: 1em;\n background: var(--cursor-color, black);\n margin-left: 0.1em;\n}\n\n.i-beam {\n position: absolute;\n width: 0.05em;\n height: 1em;\n background: var(--cursor-color, black);\n margin-left: 0.2em;\n margin-top: 0.05em;\n}\n\n.i-beam::before {\n content: "";\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0.4em;\n height: 0.025em;\n background: var(--cursor-color, black);\n}\n\n.i-beam::after {\n content: "";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0.4em;\n height: 0.025em;\n background: var(--cursor-color, black);\n}\n\n@keyframes soft {\n 50% {\n opacity: 0;\n }\n}\n@keyframes hard {\n 0% {\n opacity: 1;\n }\n 49% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}'})]});var X}P.props={duration:{type:Number,value:500},backspaceDuration:{type:Number,value:-1},constantSpeed:{type:Boolean,value:!1},pause:{type:Number,value:1e3},backspacePause:{type:Number,value:50},cursor:{type:String,value:""},cursorStyle:{type:String,value:"vertical-bar"},cursorBlinkSpeed:{type:Number,value:500},cursorBlinkFade:{type:Boolean,value:!1},cursorColor:{type:String,value:"#000000"}},customElements.define("codecabana-typewriter",function(e,t=HTMLElement){let r={},a={},{props:l,styles:i}=e;return class extends t{constructor(){super(),this._setup(),this._render=()=>e({...this._props});for(let e in a)this[e]=a[e]}static get styles(){return[super.styles,i]}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 s=p++;return n[s]=[e(n[s]?n[s][0]:void 0),t,r],n[s][0]},host:t,update:e};function s(e,t){for(let r in n){let s=n[r];s[e]&&(s[0]=s[e](s[0],t))}}return{load:function(e){let t;p=0,c=r;try{t=e()}finally{c=null}return t},cleanEffects:function(e){return s(1,e),()=>{s(2,e),e&&(n={})}}}}((()=>this.update()),this),r=!0,s="hydrate"in this.dataset;this.update=o=>{if(e||(e=!0,this.updated=(this.updated||this.mounted).then((()=>{try{return E(t.load(this._render),this,this.symbolId,r&&s),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}),[]),A?r.adoptedStyleSheets=[...t]:t.map((e=>r.appendChild(e.cloneNode(!0)))))}(this)),!_&&t.cleanEffects()}finally{e=!1}})).then((e=>{e&&e()}))),o)for(let e in o)this._props[e]=o[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:o,type:a}=r[e];this[o]=((e,t)=>e==Boolean?!!s[t]:e==Number?Number(t):e==Array||e==Object?JSON.parse(t):t)(a,n)}else super.attributeChangedCallback(e,t,n)}static get observedAttributes(){let e=super.observedAttributes||[];for(let e in l)o(this.prototype,e,l[e],r,a);return Object.keys(r).concat(e)}}}(P));