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

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

const t=t=>"function"==typeof t,e=t=>"object"==typeof t,{isArray:n}=Array;class r{constructor(t,e,n){this.message=e,this.target=t,this.value=n}}const i={true:1,"":1,1:1};function o(n,i,o,u,p){let{type:d,reflect:h,event:f,value:g,attr:y=s(i)}=e(o)&&null!=o?o:{type:o},m=!(d==Function||null==d);Object.defineProperty(n,i,{configurable:!0,set(e){let n=this[i],{error:o,value:s}=c(d,m&&t(e)?e(n):e);if(o&&null!=s)throw new r(this,`The value defined for prop '${i}' must be of type '${d.name}'`,s);n!=s&&(this.update({[i]:s}),f&&l(this,f),this.updated.then((()=>{h&&(this._ignoreAttr=y,a(this,d,y,this[i]),this._ignoreAttr=null)})))},get(){return this._props[i]}}),null!=g&&(p[i]=g),u[y]={prop:i,type:d}}const l=(t,{type:e,base:n=CustomEvent,...r})=>t.dispatchEvent(new n(e,r)),s=t=>t.replace(/([A-Z])/g,"-$1").toLowerCase(),a=(t,n,r,i)=>null==i||n==Boolean&&!i?t.removeAttribute(r):t.setAttribute(r,e(i)?JSON.stringify(i):n==Boolean?"":i),c=(t,e)=>null==t?{value:e}:t!=String&&""===e?{value:null}:{}.toString.call(e)==`[object ${t.name}]`?{value:e,error:t==Number&&Number.isNaN(e)}:{value:e,error:!0};let u,p;function d(t,e,n){return u.use(t,e,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},g={shadowDom:1,renderOnce:1,children:1,key:1},y={},m=[],b=document;class v extends Text{get nodeType(){return-1}}const w=Symbol(),x=Symbol(),k=Symbol();function S(t,e,...n){let r=e||y,{children:i}=r;i=null!=i?i:n.length?n:m;const o=!!t&&(t instanceof Node?1:t.prototype instanceof HTMLElement&&2);return{$$:w,type:t,props:r,children:i,key:r.key,shadow:r.shadowDom,once:r.renderOnce,raw:o,is:r.is}}function C(t,e,r=x,i,o){let l;if(e&&e[r]&&e[r].vnode==t||t.$$!=w)return e;if(t||!e){if(o=o||"svg"==t.type,l="host"!=t.type&&(e&&e[k]||(1==t.raw?e!=t.type:2==t.raw?!(e instanceof t.type):e?e.localName!=t.type:!e)),t.ref){t.ref[k]=!0;const e=t.ref.cloneNode(!0);return e[r]={vnode:t},e[k]=!0,e}l&&null!=t.type&&(t.ref=e=1==t.raw?t.type:2==t.raw?new t.type:o?b.createElementNS("http://www.w3.org/2000/svg",t.type):b.createElement(t.type,t.is?{is:t.is}:void 0))}let{vnode:s=y,cycle:a=0,fragment:c,handlers:u}=e[r]?e[r]:y,{children:p=m,props:d=y}=s;if(u=l?{}:u||{},t.once&&!l)return e;if(t.shadow&&!e.shadowRoot&&e.attachShadow({mode:"open"}),t.props!=d&&function(t,e,n,r,i){for(let o in e)o in n||$(t,o,e[o],null,i,r);for(let o in n)$(t,o,e[o],n[o],i,r)}(e,d,t.props,u,o),t.children!==p){let l=t.shadow?e.shadowRoot:e;c=function(t,e,r,i,o,l){t=null==t?null:n(t)?t:[t];let s,a=e||function(t,e){const n=new v(""),r=new v("");return t[e?"prepend":"append"](n),t.append(r),{markStart:n,markEnd:r}}(r,o),{markStart:c,markEnd:u,keyes:p}=a,d=p&&new Set,h=c;function f(t){let{length:e}=t;for(let a=0;a<e;a++){let e=t[a],c=typeof e;if(null==e||"boolean"==c||"function"==c)continue;if(n(e)){f(e);continue}if("object"==c&&e.$$!=w)continue;let g=e.$$&&e.key,y=p&&null!=g&&p.get(g);h!=u&&h===y?d.delete(h):h=h==u?u:h.nextSibling;let m=p?y:h,b=m;if(e.$$)b=C(e,m,i,o,l);else{let t=e+"";3!=b.nodeType?b=new Text(t):b.data!=t&&(b.data=t)}b!=h&&(p&&d.delete(b),!m||p?(r.insertBefore(b,h),p&&h!=u&&d.add(h)):m==u?r.insertBefore(b,u):(r.replaceChild(b,m),h=b)),null!=g&&(s=s||new Map,s.set(g,b))}}if(t&&f(t),h=h==u?u:h.nextSibling,e&&h!=u)for(;h!=u;){let t=h;h=h.nextSibling,t.remove()}return d&&d.forEach((t=>t.remove())),a.keyes=s,a}(t.children,c,l,r,!a&&i,(!o||"foreignObject"!=t.type)&&o)}return a++,e[r]={vnode:t,handlers:u,fragment:c,cycle:a},e}function $(n,r,i,o,l,s){if(i=null==i?null:i,o=null==o?null:o,(r="class"!=r||l?r:"className")in n&&h[r]&&(i=n[r]),o!==i&&!g[r]&&"_"!=r[0])if("o"==r[0]&&"n"==r[1]&&(t(o)||t(i)))!function(t,e,n,r){r.handleEvent||(r.handleEvent=e=>r[e.type].call(t,e));if(n){if(!r[e]){let i=n.capture||n.once||n.passive?Object.assign({},n):null;t.addEventListener(e,r,i)}r[e]=n}else r[e]&&(t.removeEventListener(e,r),delete r[e])}(n,r.slice(2),o,s);else if("ref"==r)o&&(o.current=n);else if("style"==r){let t=n.style;o=o||"";let r=e(i=i||""),l=e(o);if(r)for(let e in i){if(!l)break;e in o||E(t,e,null)}if(l)for(let e in o){let n=o[e];r&&i[e]===n||E(t,e,n)}else t.cssText=o}else{let s="$"==r[0]?r.slice(1):r;s===r&&(!l&&!f[r]&&r in n||t(o)||t(i))?n[r]=null==o?"":o:null==o?n.removeAttribute(s):n.setAttribute(s,e(o)?JSON.stringify(o):o)}}function E(t,e,n){let r="setProperty";null==n&&(r="removeProperty",n=null),~e.indexOf("-")?t[r](e,n):t[e]=n}const A=!!document.adoptedStyleSheets,N=null;let j=(M=2,(e,n)=>{let r=([n,r],i)=>{if(!i)return[n||e(r),r];t(n)&&n()};d((([e,r]=[])=>(!r&&r||(r&&function(t,e){let n=t.length;if(n!==e.length)return!1;for(let r=0;r<n;r++)if(t[r]!==e[r])return!1;return!0}(r,n)?e=e||!0:(t(e)&&e(),e=null)),[e,n])),1==M&&r,2==M&&r)});var M;function O(e){let n=u.update;return d(((r=[])=>(r[1]||(r[0]=t(e)?e():e,r[1]=e=>{(e=t(e)?e(r[0]):e)!=r[0]&&(r[0]=e,n())}),r)))}var _=function(t,e,n,r){var i;e[0]=0;for(var o=1;o<e.length;o++){var l=e[o++],s=e[o]?(e[0]|=l?1:2,n[e[o++]]):e[++o];3===l?r[0]=s:4===l?r[1]=Object.assign(r[1]||{},s):5===l?(r[1]=r[1]||{})[e[++o]]=s:6===l?r[1][e[++o]]+=s+"":l?(i=t.apply(s,_(t,s,n,["",null])),r.push(i),s[0]?e[0]|=2:(e[o-2]=0,e[o]=i)):r.push(s)}return r},T=new Map;(function(t){var e=T.get(this);return e||(e=new Map,T.set(this,e)),(e=_(this,e.get(t)||(e.set(t,e=function(t){for(var e,n,r=1,i="",o="",l=[0],s=function(t){1===r&&(t||(i=i.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?l.push(0,t,i):3===r&&(t||i)?(l.push(3,t,i),r=2):2===r&&"..."===i&&t?l.push(4,t,0):2===r&&i&&!t?l.push(5,0,!0,i):r>=5&&((i||!t&&5===r)&&(l.push(r,0,i,n),r=6),t&&(l.push(r,t,0,n),r=6)),i=""},a=0;a<t.length;a++){a&&(1===r&&s(),s(a));for(var c=0;c<t[a].length;c++)e=t[a][c],1===r?"<"===e?(s(),l=[l],r=3):i+=e:4===r?"--"===i&&">"===e?(r=1,i=""):i=e+i[0]:o?e===o?o="":i+=e:'"'===e||"'"===e?o=e:">"===e?(s(),r=1):r&&("="===e?(r=5,n=i,i=""):"/"===e&&(r<5||">"===t[a][c+1])?(s(),3===r&&(l=l[0]),r=l,(l=l[0]).push(2,0,r),r=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(s(),r=2):i+=e),3===r&&"!--"===i&&(r=4,l=l[0])}return s(),l}(t)),e),arguments,[])).length>1?e:e[0]}).bind(S);const L=t=>t.filter(Boolean).join(" ");function B(t){let e,n,r,i,o=this,l=0,s=[],a=0,c=[],u=0;s.root=!0;const p=(t,e=[],n)=>{let r=0;return(t=n||""!==t?t.replace(/\ue001/g,(t=>c[u++])):c[u++].slice(1,-1))?(t.replace(/\ue000/g,((n,i)=>(i&&e.push(t.slice(r,i)),r=i+1,e.push(arguments[++a])))),r<t.length&&e.push(t.slice(r)),e.length>1?e:e[0]):t},d=()=>{[s,i,...e]=s,s.push(o(i,...e))};return t.join("").replace(/<!--[^]*-->/g,"").replace(/<!\[CDATA\[[^]*\]\]>/g,"").replace(/('|")[^\1]*?\1/g,(t=>(c.push(t),""))).replace(/\s+/g," ").replace(/(?:^|>)([^<]*)(?:$|<)/g,((t,e,o,c)=>{let u,h;if(o&&c.slice(l,o).replace(/(\S)\/$/,"$1 /").split(" ").map(((t,e)=>{if("/"===t[0])u=h||t.slice(1)||1;else if(e){if(t){let e=s[2]||(s[2]={});"..."===t.slice(0,3)?Object.assign(e,arguments[++a]):([n,r]=t.split("="),e[p(n)]=!r||p(r))}}else{for(h=p(t);B.close[s[1]+h];)d();s=[s,h,null],B.empty[h]&&(u=h)}})),u)for(d();i!==u&&B.close[i];)d();l=o+t.length,e&&" "!==e&&p((i=0,e),s,!0)})),s.root||d(),s.length>1?s:s[0]}B.empty={},B.close={},"area base br col command embed hr img input keygen link meta param source track wbr ! !doctype ? ?xml".split(" ").map((t=>B.empty[t]=B.empty[t.toUpperCase()]=!0));let D={li:"",dt:"dd",dd:"dt",p:"address article aside blockquote details div dl fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr main menu nav ol pre section table",rt:"rp",rp:"rt",optgroup:"",option:"optgroup",caption:"tbody thead tfoot tr colgroup",colgroup:"thead tbody tfoot tr caption",thead:"tbody tfoot caption",tbody:"tfoot caption",tfoot:"caption",tr:"tbody tfoot",td:"th tr",th:"td tr tbody"};for(let t in D)[...D[t].split(" "),t].map((e=>{B.close[t]=B.close[t.toUpperCase()]=B.close[t+e]=B.close[t.toUpperCase()+e]=B.close[t+e.toUpperCase()]=B.close[t.toUpperCase()+e.toUpperCase()]=!0}));const H=B.bind(S);function U(t){P(t,I)}function P(t,e){!t|"function"!=typeof e||(3===t.nodeType?t.textContent=e(t.textContent):Array.from(t.childNodes).forEach((function(t){P(t,e)})))}function I(t){return t.replace(/'/gm,"’").replace(/(\s)"/gm,"$1“").replace(/"(\s)/gm,"”$1").replace(/"/gm,"”")}function W({id:t,height:e,minHeight:n,backgroundColor:r,fadeDuration:i,titleMaxWidth:o,contentMaxWidth:l}){const s=d(((t={current:a})=>t));var a;const c=function(t){const[e,n]=O([]);return j((()=>{const{current:e}=t;if(!e)return;const r=()=>n(e.assignedNodes().filter((t=>!(t instanceof v))));return r(),function(t,e,n,r){return t.addEventListener(e,n,r),()=>t.removeEventListener(e,n)}(e,"slotchange",r)}),[]),e}(s),u=c.filter((t=>t instanceof HTMLElement)),[p,h]=O(0),[f,g]=O(),[y,m]=O();function b(t){const e=t.target.getAttribute("data-index");"string"==typeof e&&h(parseInt(e))}return j((function(){const t=u.map(((t,e)=>{const n=t.getAttribute("title")||"Missing title",r=e===p;return S("button",{role:"tab",id:n,class:L(["title",r&&"active"]),part:L(["title",r&&"title-active"]),"data-index":e,"aria-selected":"false","aria-controls":`${n}-tab`,onclick:b,children:n})})),e=u.map(((t,e)=>{const n=t.getAttribute("title")||"Missing title",r=e===p;return U(t),S("div",{id:`${n}-tab`,class:L(["content",r&&"active"]),part:L(["content",r&&"content-active"]),"data-index":e,tabindex:r?0:void 0,role:"tabpanel","aria-labelledby":n,"aria-selected":r?"true":void 0,children:(i=t.innerHTML,H([i]))});var i}));g(t),m(e)}),[c,p]),S("host",{shadowDom:!0,style:{"--height":e,"--min-height":n,"--background-color":r,"--fade-duration":`${i}ms`,"--title-max-width":o,"--content-max-width":l},children:[S("slot",{ref:s}),S("div",{class:"titles",part:"titles",role:"tablist","aria-label":t,children:f}),S("div",{class:"contents",part:"contents",children:y}),S("style",{children:":host {\n  position: relative;\n  height: var(--height, auto);\n  min-height: var(--min-height, 300px);\n  display: grid;\n  grid-template-columns: minmax(auto, var(--title-max-width, auto)) minmax(auto, var(--content-max-width, 600px));\n  align-items: center;\n  justify-items: center;\n  justify-content: center;\n  column-gap: 48px;\n  padding: 16px;\n  background-color: var(--background-color, transparent);\n}\n\n::slotted(*) {\n  display: none;\n}\n\n.titles {\n  display: grid;\n  grid-auto-flow: row;\n}\n\n.title {\n  text-align: left;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  white-space: nowrap;\n  padding: 0;\n}\n\n.contents {\n  position: relative;\n  display: grid;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n.content {\n  position: absolute;\n  left: 0;\n  right: 0;\n  overflow-y: auto;\n  max-height: 100%;\n}\n\n.content.active {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s, opacity var(--fade-duration, 300ms);\n}\n\n.content:not(.active) {\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s linear var(--fade-duration, 300ms), opacity var(--fade-duration, 300ms);\n}"})]})}W.props={id:{type:String,value:"tabs"},height:{type:String,value:"auto"},minHeight:{type:String,value:"300px"},backgroundColor:{type:String,value:"transparent"},fadeDuration:{type:Number,value:300},titleMaxWidth:{type:String,value:"auto"},contentMaxWidth:{type:String,value:"600px"}},customElements.define("codecabana-tabs",function(t,e=HTMLElement){let r={},l={},{props:s,styles:a}=t;return class extends e{constructor(){super(),this._setup(),this._render=()=>t({...this._props});for(let t in l)this[t]=l[t]}static get styles(){return[super.styles,a]}async _setup(){if(this._props)return;this._props={},this.mounted=new Promise((t=>this.mount=t)),this.unmounted=new Promise((t=>this.unmount=t)),this.symbolId=this.symbolId||Symbol();let t,e=function(t,e){let n={},r={use:function(t,e,r){let i=p++;return n[i]=[t(n[i]?n[i][0]:void 0),e,r],n[i][0]},host:e,update:t};function i(t,e){for(let r in n){let i=n[r];i[t]&&(i[0]=i[t](i[0],e))}}return{load:function(t){let e;p=0,u=r;try{e=t()}finally{u=null}return e},cleanEffects:function(t){return i(1,t),()=>{i(2,t),t&&(n={})}}}}((()=>this.update()),this),r=!0,i="hydrate"in this.dataset;this.update=o=>{if(t||(t=!0,this.updated=(this.updated||this.mounted).then((()=>{try{return C(e.load(this._render),this,this.symbolId,r&&i),t=!1,r&&(r=!1,function(t){let{styles:e}=t.constructor,{shadowRoot:r}=t;r&&e.length&&(e=e.reduce((function t(e,r){return n(r)?r.reduce(t,e):r&&e.push(r),e}),[]),A?r.adoptedStyleSheets=[...e]:e.map((t=>r.appendChild(t.cloneNode(!0)))))}(this)),!N&&e.cleanEffects()}finally{t=!1}})).then((t=>{t&&t()}))),o)for(let t in o)this._props[t]=o[t];return this.updated},this.update(),await this.unmounted,e.cleanEffects(!0)()}connectedCallback(){this.mount(),super.connectedCallback&&super.connectedCallback()}async disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),await this.mounted,!this.isConnected&&this.unmount()}attributeChangedCallback(t,e,n){if(r[t]){if(t===this._ignoreAttr||e===n)return;let{prop:o,type:l}=r[t];this[o]=((t,e)=>t==Boolean?!!i[e]:t==Number?Number(e):t==Array||t==Object?JSON.parse(e):e)(l,n)}else super.attributeChangedCallback(t,e,n)}static get observedAttributes(){let t=super.observedAttributes||[];for(let t in s)o(this.prototype,t,s[t],r,l);return Object.keys(r).concat(t)}}}(W));