UNPKG

ziko-ui

Version:

7 lines (6 loc) • 24.8 kB
1
2
3
4
5
6
7
/* Project: ziko-ui Author: Date : Wed Nov 20 2024 17:29:34 GMT+0100 (UTC+01:00) */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("ziko")):"function"==typeof define&&define.amd?define(["exports","ziko"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ZikoUI={},t.ziko)}(this,(function(t,e){"use strict";class i extends e.ZikoUIElement{constructor(t,i,s="😁",n=s){super("details","Collapsible"),Object.assign(this.cache,{icons:{open:s,close:n}}),this.summary=e.html("summary",t).style({fontSize:"1.1em",padding:"0.625rem",fontWeight:"bold",listStyleType:`"${s}"`,cursor:"pointer"}),this.summary[0].style({marginLeft:"0.5em"}),this.content=i.style({margin:"0.7em"}),this.element?.append(this.summary.element,this.content.element),this.style({marginBottom:"0.7em"}),e.watchAttr(this,(t=>{t.target.isOpen?(t.target.emit("open"),this?.parent?.isAccordion&&this.parent.cache.autoClose&&this.parent.closeExcept(this),this.summary.style({listStyleType:`"${this.cache.icons.close}"`})):(t.target.emit("close"),this.summary.style({listStyleType:`"${this.cache.icons.open}"`}))}))}get isCollapsible(){return!0}get isOpen(){return this.element.open}open(t=this){return this.element.open=!0,this.emit("open",t),this}close(){return this.element.open=!1,this}onOpen(t){return this.on("open",t),this}onClose(t){return this.on("close",t),this}toggle(){return this.element.open=!this.element.open,this}}class s extends e.ZikoUIContainerElement{constructor(...t){super("div","Accordion"),this.append(...t),Object.assign(this.cache,{autoClose:!0})}get isAccordion(){return!0}closeAll(){return this.items.forEach((t=>t.close())),this}closeExcept(...t){return this.items.filter((e=>!t.includes(e))).forEach((t=>t.close())),this}open(t){return t.isCollapsible?t.open():this.items[t].open(),this.closeExcept(t.isCollapsible?t:this.items[t]),this}enableAutoClose(){return this.cache.autoClose=!0,this}disableAutoClose(){return this.cache.autoClose=!1,this}toggleAutoClose(){this.cache.autoClose=!this.cache.autoClose}}class n extends e.ZikoUIFlex{constructor(...t){super(),this.style({position:"relative",overflow:"hidden",touchAction:"none",userSelect:"none"}),this.horizontal("space-around",0),this.track=e.Section(...t).style({display:"inline-flex"}),this.track.size(100*this.track.children.length+"vw"),this.track.setTarget(this),this.track.items.map((t=>t.style({pointerEvents:"none",margin:"auto 10px"}))),this.x0=null,this.tx=0,this.onPtrMove((t=>{if(t.isDown){let e=t.event.pageX-this.x0;this.track.st.translateX(this.tx+e,0)}})),this.onPtrDown((t=>{console.log(t.event),this.x0=t.event.pageX;const e=window.getComputedStyle(this.track.element).getPropertyValue("transform");"none"!==e&&(this.tx=+e.split(",")[4])})),this.onPtrUp((t=>console.log(t.isDown))),this.onPtrLeave((t=>{}))}get isCarousel(){return!0}}class r extends e.ZikoUIFlex{constructor(){super("section"),Object.assign(this.cache,{order:0,currentNote:null,currentNoteIndex:null}),this.vertical(0,0)}get isCodeNote(){return!0}setCurrentNote(t){return this.cache.currentNote=t,this.cache.currentNoteIndex=this.items.findIndex((e=>e===t)),t.focus(),this.items.forEach((t=>t.Input.style({border:"1px solid #ccc"}))),t.Input.style({border:"2px lightgreen solid"}),this}addNote(t=""){return this.append(h(t)),this}execute(){return this.cache.currentNote.execute(),this.incrementOrder(),this}incrementOrder(){return this.cache.order++,this.cache.currentNote.setOrder(this.cache.order),this}next(){return this.cache.currentNote===this.items.at(-1)?(this.addNote(),this.setCurrentNote(this.items.at(-1))):this.setCurrentNote(this.items[this.cache.currentNoteIndex+1]),this}previous(){return this.cache.currentNote!==this.items[0]&&this.setCurrentNote(this.items[this.cache.currentNoteIndex-1]),this}data(){return this.items.map((t=>t.cellData()))}serialize(){return JSON.stringify(this.data())}import(t=[]){return t.forEach(((e,i)=>this.addNote(t[i].input))),this}}const o={background:"none",width:"25px",height:"25px",fontSize:"1.2rem",cursor:"pointer"};class a extends e.ZikoUIFlex{constructor(t="",{type:i="js",order:s=null}={}){var n;super("section"),Object.assign(this.cache,{state:null,order:s,type:i,metadata:{created:Date.now(),updated:null}}),this.Input=((t="")=>e.html("code",t).style({width:"100%",height:"auto",padding:"10px",boxSizing:"border-box",border:"1px solid #ccc",outline:"none",fontSize:"1rem",fontFamily:"Lucida Console, Courier New, monospace",padding:"1rem 0.5rem",wordBreak:"break-all",background:"#f6f8fa",color:"#0062C3"}).setAttr("contenteditable",!0).setAttr("spellcheck",!1))(t),this.Output=e.html("output").style({width:"100%",height:"auto",padding:"5px 0"}),this.InOut=e.Flex(this.Input,this.Output).vertical().style({width:"100%",margin:"10px auto"}),this.RightControl=(n=this,e.Flex(e.text("▶️").style(o).onClick((t=>{n.parent instanceof r&&n.parent.setCurrentNote(n),n.execute(),globalThis.__Ziko__.__Config__.default.target=t.target.parent.parent[1][1]})),e.text("📋").style(o).onClick((()=>{navigator.clipboard.writeText(n.codeText)})),e.text("✖️").style(o).onClick((()=>n.remove())),e.text("✖️").style(o).onClick((()=>n.remove()))).style({width:"70px",height:"50px",margin:"10px 0"}).horizontal(0,0).wrap(!0)),this.LeftControl=e.Flex(e.text("[ ]")).style({width:"50px",height:"50px",margin:"10px 4px",padding:"5px",color:"darkblue",borderBottom:"4px solid gold"}).horizontal(0,0),this.append(this.LeftControl,this.InOut,this.RightControl),this.horizontal(-1,1).style({width:"95vw",margin:"0 auto",border:"1px darkblue dotted"});let a=this.Input.element.getElementsByClassName("cm-content")[0];a?a.addEventListener("keydown",(t=>{"Enter"===t.key&&t.shiftKey&&(t.preventDefault(),this.execute(this.cache.order))})):(this.Input.onKeyDown((t=>{"Enter"===t.kd&&t.event.shiftKey&&(t.event.preventDefault(),this.execute(this.cache.order)),this.cache.parent instanceof r&&("ArrowDown"===t.kd&&t.event.shiftKey&&this.cache.parent.next(),"ArrowUp"===t.kd&&t.event.shiftKey&&this.cache.parent.previous())})),this.Input.onFocus((()=>{this.cache.parent instanceof r&&(this.cache.parent.cache.currentNote=this,this.cache.parent.setCurrentNote(this))})),this.Input.onPaste((t=>{})))}get isCodeCell(){return!0}get codeText(){return this.Input.element.getElementsByClassName("cm-content")[0]?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim():this.Input.element.innerText.trim()}get codeHTML(){return this.Input.element.innerHTML}get outputHTML(){return this.Output.element.innerHTML}setValue(t){return this.Input[0].setValue(t),this}cellData(){return{input:this.codeText,output:this.outputHTML,order:this.cache.order,type:this.cache.type}}execute(t){return this.clearOutput(),this.evaluate(t),this.cache.metadata.updated=Date.now(),this}#t(t){try{this.LeftControl[0].setValue("pending"),this.cache.state="pending",globalThis.eval(this.codeText)}catch(t){console.log(t),text(`Error : ${t.message}`).style({color:"red",background:"gold",border:"2px red solid",padding:"10px",margin:"10px 0",display:"flex",justifyContent:"center"}),this.LeftControl[0].setValue("Err"),this.cache.state="Error"}finally{"pending"===this.cache.state&&(this.cache.state="success",this.setOrder(t),this.cache.parent instanceof r&&(this.cache.parent.incrementOrder(),this.cache.parent.next()))}}#e(){}#i(){}evaluate(t){if(globalThis.__Ziko__.__Config__.default.target=this.Output.element,"js"===this.cache.type)this.#t(t);return this}clearInput(){return this.Output.element.innerText="",this}clearOutput(){return this.Output.element.innerText="",this}setOrder(t,e=!0){return this.cache.order=t,e&&("number"==typeof t?this.LeftControl[0].setValue(`[${t}]`):this.LeftControl[0].setValue("[-]")),this}focus(){return this.Input.element.focus(),this}}const h=(t,{type:e,order:i}={})=>new a(t,{type:e,order:i});class l extends e.ZikoUIFlex{#s=0;constructor(t,i){super("div","Tabs"),Object.assign(this.cache,{config:{controllersPercent:.5}}),this.style({boxSizing:"border-box",backgroundColor:"blanchedalmond",border:"1px red solid",margin:"30px"}),this.controllersContainer=e.Flex().size("auto","auto").style({boxSizing:"border-box",justifyContent:"center",alignItems:"center",textAlign:"center",minWidth:"50px",minHeight:"50px",backgroundColor:"darkblue",border:"1px darkblue solid"}).setAttr("role","tablist"),this.contentContainer=e.Flex().style({boxSizing:"border-box",justifyContent:"center",alignItems:"center",textAlign:"center",width:"100%",height:"100%",backgroundColor:"darkslategrey"}),this.append(this.controllersContainer,this.contentContainer),t.length!==i.length?console.error(""):(this.controllersContainer.append(...t),this.contentContainer.append(...i)),this.init(),this.display(0),this.useVertical()}get isTabs(){return!0}init(){for(let t=0;t<this.controllersContainer.length;t++)this.controllersContainer[t].setAttr("role","tab").setAttr("aria-controls",`tab${t}`),this.contentContainer[t].setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${t}`).setAttr("tabindex",-1);return this.controllersContainer.forEach((t=>t.onClick((t=>{const e=t.target.element.getAttribute("aria-controls"),i=+e.slice(3);this.contentContainer.filter((t=>t.element.getAttribute("aria-labelledby")===e),(()=>{this.#s!==i&&this.display(i)}))})))),this}addPairs(t,e){this.controllersContainer.append(t),this.contentContainer.append(e);const i=this.controllersContainer.length;return this.controllersContainer.at(-1).setAttr("role","tab").setAttr("aria-controls","tab"+(i-1)),this.contentContainer.at(-1).setAttr("role","tabpanel").setAttr("aria-labelledby","tab"+(i-1)).setAttr("tabindex",-1),this}removePairs(t){}display(t){this.#s=t%this.contentContainer.length;const e=this.contentContainer.at(this.#s);return this.controllersContainer.forEach((t=>t.setAttr("tabindex",-1).setAttr("aria-selected",!1))),this.controllersContainer.at(this.#s).setAttr("tabindex",0).setAttr("aria-selected",!0),this.contentContainer.forEach((t=>t.st.hide())),e.st.translateX(100,0),e.setAttr("tabindex",0).st.show(),e.st.translateX(0,1e3),this}next(t=1){return this.display(this.#s+t),this}previous(t=1){return this.display(this.#s-t),this}useVertical(){return this.vertical(0,0),this.controllersContainer.horizontal(0,0),this.controllersContainer.style({width:"100%",height:100*this.cache.config.controllersPercent+"%"}),this.contentContainer.style({width:"100%",height:100*(1-this.cache.config.controllersPercent)+"%"}),this}useHorizontal(){return this.horizontal(0,0),this.controllersContainer.vertical(0,0),this.controllersContainer.style({height:"100%",width:100*this.cache.config.controllersPercent+"%"}),this.contentContainer.style({height:"100%",width:100*(1-this.cache.config.controllersPercent)+"%"}),this}}class c extends e.ZikoUIFlex{constructor(t,i,s){super(),this.title=e.h3(i),this.icon=e.text(palette[t].icon).style({display:"flex",justifyContent:"center",borderRadius:"50%",minWidth:"30px",minHeight:"30px"}),this.content=s,this.vertical().size("200px","auto").style({borderRadius:"10px",padding:"10px"}),this.append(e.Flex(this.title,this.icon).size("100%","40px").style({}).horizontal("space-between",0),this.content),this.useType(t)}get isAlert(){return!0}useType(t){return this.style({color:palette[t].color,background:palette[t].bgColor,border:"1px darkblue solid",borderLeft:`15px ${palette[t].borderColor} solid`}),this.title.style({color:palette[t].titleColor}),this.content.st.color(palette[t].titleColor),this.icon.setValue(palette[t].icon).style({border:`2px ${palette[t].borderColor} solid`,alignItems:"warning"===t?"flex-start":"center"}),this}useSuccess(){return this.useType("success"),this}useInfo(){return this.useType("info"),this}useWarning(){return this.useType("warning"),this}useDanger(){return this.useType("danger"),this}}class d extends e.ZikoUIElement{constructor(t,i,s){super("div","Splitter"),Object.assign(this.cache,{isResizing:!1,flexDirection:t,resizerCursor:i,resizerProp:s}),this.style({display:"flex",flexDirection:this.cache.flexDirection,border:"2px solid #333",overflow:"hidden"}),this.resizer=new e.ZikoUIElement("div","resizer").style({[this.cache.resizerProp]:"5px",backgroundColor:"gold",cursor:this.cache.resizerCursor,touchAction:"none"}),this.onPtrDown((t=>{this.cache.isResizing=!0,this.style({cursor:this.cache.resizerCursor}),this.resizer.element.setPointerCapture(t.event.pointerId)})),this.onPtrUp((t=>{this.cache.isResizing=!1,this.style({cursor:"default"}),this.resizer.element.releasePointerCapture(t.event.pointerId)})),this.onPtrCancel((()=>{this.cache.isResizing=!1,this.style({cursor:"default"})})),this.onPtrOut((()=>{this.cache.isResizing&&(this.cache.isResizing=!1,this.style({cursor:"default"}))}))}get isSplitter(){return!0}styleResizer(t={}){return this.resizer.style(t),this}}class u extends d{constructor(t,e){super("row","ew-resize","width"),this.leftPane=t.style({width:"50%",flexGrow:1,overflow:"hidden"}),this.rightPane=e.style({width:"50%",flexGrow:1,overflow:"hidden"}),this.element?.append(this.leftPane.element,this.resizer.element,this.rightPane.element),this.onPtrMove((t=>{if(!this.cache.isResizing)return;const e=this.element.getBoundingClientRect().width;let i=(t.event.clientX-this.element.getBoundingClientRect().x)/e*100,s=100-i;i<0&&(i=0),s<0&&(s=0),this.leftPane.element.style.width=`${i}%`,this.rightPane.element.style.width=`${s}%`}))}get isHorizontalSplitter(){return!0}}const p=(t,e)=>new u(t,e);class g extends d{constructor(t,e){super("column","ns-resize","height"),this.topPane=t.style({height:"50%",flexGrow:1,overflow:"hidden"}),this.bottomPane=e.style({height:"50%",flexGrow:1,overflow:"hidden"}),this.element?.append(this.topPane.element,this.resizer.element,this.bottomPane.element),this.onPtrMove((t=>{if(!this.cache.isResizing)return;const e=this.element.getBoundingClientRect().height;let i=(t.event.clientY-this.element.getBoundingClientRect().y)/e*100,s=100-i;i<0&&(i=0),s<0&&(s=0),this.topPane.element.style.height=`${i}%`,this.bottomPane.element.style.height=`${s}%`}))}get isHorizontalSplitter(){return!0}}const m=(t,e)=>new g(t,e);class f extends e.ZikoUIElement{constructor(...t){super("ul","Breadcrumbs"),Object.assign(this.cache,{separatorTextContent:"/"}),this.style({listStyle:"none",display:"flex",flexWrap:"wrap"}),this.list=e.html("li").style({display:"flex",flexWrap:"wrap"}),this.append(...t)}#n(t){["string","number","boolean"].includes(typeof t)&&(t=e.text(t));const i=e.html("li",t).style({display:"flex",alignItems:"center"});if(this.element.children.length>0){const t=e.text(this.cache.separatorTextContent).style({padding:"0 4px"});this.element?.append(t.element)}this.element?.append(i.element)}append(...t){return t.forEach((t=>this.#n(t))),this}configSeparator(t=this.cache.separator,e={}){this.cache.separatorTextContent=t;return[...this.element.children].filter((t=>"SPAN"===t.tagName)).forEach((i=>{i.textContent=t,Object.assign(i.style,e)})),this}}class x extends e.ZikoUIFlex{constructor(t,e){super("div","menu3d"),this.controller=t,this.content=e,this.cover=null,Object.assign(this.cache,{config:{useTransfo:!1,isOpen:!1,position:"left",threshold:40,angle:70,overlap:6,width:300,height:300,transitionDuration:"0.5s",transitionEasing:"ease",menuTransformOrigin:null,menuTransformClosed:null,menuTransformOpened:null,contentTransformOrigin:null,contentTransformClosed:null,contentTransformOpened:null}}),this.append(this.controller,this.content),this.update()}get isOpen(){return this.cache.config.isOpen}update(){this.controller.style({display:"none",padding:"20px",overflow:"auto",background:"darkblue",color:"#eee",webkitboxSizing:"border-box",mozBoxSizing:"border-box",boxSizing:"border-box"}),this.content.style({padding:"20px 40px",width:"100%",height:"100%",background:"gold",color:"#eee",webkitboxSizing:"border-box",mozBoxSizing:"border-box",boxSizing:"border-box",webkitOverflowScrolling:"touch",webkitTransformStyle:"preserve-3d"}),this.setupPositions(),this.setupWrapper(),this.setupCover(),this.setupMenu(),this.setupContent()}setupPositions(){this.cache.config.menuTransformOpened="",this.cache.config.contentTransformClosed="";let t=this.cache.config.angle,e=this.cache.config.angle/-2;switch(this.cache.config.position){case"top":this.cache.config.menuTransformOrigin="50% 0%",this.cache.config.menuTransformClosed=`rotateX(${t}deg) translateY(-100%) translateY(${this.cache.config.overlap}px)`,this.cache.config.contentTransformOrigin="50% 0",this.cache.config.contentTransformOpened=`translateY(${this.height/2}px) rotateX(${e}deg)`;break;case"right":this.cache.config.menuTransformOrigin="100% 50%",this.cache.config.menuTransformClosed="rotateY( "+t+"deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )",this.cache.config.contentTransformOrigin="100% 50%",this.cache.config.contentTransformOpened="translateX( -"+this.width/2+"px ) rotateY( "+e+"deg )";break;case"bottom":this.cache.config.menuTransformOrigin="50% 100%",this.cache.config.menuTransformClosed="rotateX( "+-t+"deg ) translateY( 100% ) translateY( -"+this.cache.config.overlap+"px )",this.cache.config.contentTransformOrigin="50% 100%",this.cache.config.contentTransformOpened="translateY( -"+this.height/2+"px ) rotateX( "+-e+"deg )";break;default:this.cache.config.menuTransformOrigin="100% 50%",this.cache.config.menuTransformClosed="translateX( -100% ) translateX( "+this.cache.config.overlap+"px ) scale( 1.01 ) rotateY( "+-t+"deg )",this.cache.config.contentTransformOrigin="0 50%",this.cache.config.contentTransformOpened="translateX( "+this.width/2+"px ) rotateY( "+-e+"deg )"}}setupWrapper(){this.style({perspective:"800px",perspectiveOrigin:this.cache.config.contentTransformOrigin})}setupCover(){this.cover&&this.cover.element.parentNode.removeChild(this.cover.element),this.cover=new e.ZikoUIElement("div","div").style({position:"absolute",display:"block",width:"100%",height:"100%",left:0,top:0,zIndex:1e3,visibility:"hidden",opacity:0,transition:`all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`}),this.content.element.appendChild(this.cover.element)}setupMenu(){switch(this.cache.config.position){case"top":this.controller.style({width:"100%",height:this.height/2+"px"});break;case"right":this.controller.style({right:0,width:this.width/2+"px",height:"100%"});break;case"bottom":this.controller.style({bottom:"0",width:"100%",height:this.height/2+"px"});break;case"left":this.controller.style({width:this.width/2+"px",height:"100%"})}this.controller.style({position:"fixed",display:"block",zIndex:1,transform:this.cache.config.menuTransformClosed,transformOrigin:this.cache.config.menuTransformOrigin,transition:"all "+this.cache.config.transitionDuration+" "+this.cache.config.transitionEasing})}setupContent(){this.content.style({transform:this.cache.config.contentTransformClosed,transformOrigin:this.cache.config.contentTransformOrigin,transition:`all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`})}open(){this.cache.config.isOpen||(this.cache.config.isOpen=!0,this.cover.style({height:this.content.element.scrollHeight+"px",visibility:"visible",opacity:1}),this.cache.config.useTransfo&&this.content.style({transform:this.cache.config.contentTransformOpened,userSelect:"default"}),this.controller.style({transform:this.cache.config.menuTransformOpened,useSelect:"none"}),this.emit("opened"))}close(){this.cache.config.isOpen&&(this.cache.config.isOpen=!1,this.cover.style({visibility:"hidden",opacity:0}),this.content.style({transform:this.cache.config.contentTransformClosed,useSelect:"default"}),this.controller.style({transform:this.cache.config.menuTransformClosed,userSelect:"none"})),this.emit("closed")}onOpen(t){return this.on("opened",t.bind(this)),this}onClose(t){return this.on("closed",t.bind(this)),this}#r(t){if(this.cache.config.position!==t){this.cache.config.position=t;const e=this.isOpen;this.close(),this.update(),e&&this.open()}}useRight(){return this.#r("left"),this}useRight(){return this.#r("right"),this}useTop(){return this.#r("top"),this}useBottom(){return this.#r("bottom"),this}}const b=(t,e)=>new x(t,e);globalThis.menu3d=b;class y extends e.ZikoUIContainerElement{constructor(...t){super("dialog","modal"),this.append(...t),Object.assign(this.cache,{config:{mode:"modal",useTransition:!0}}),this.style({display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",padding:"20px",border:"none",backgroundCcolor:"#f5f5f5",boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.1)",borderRadius:"8px"}),this.close()}open(){if(!this.element.open){if("modal"===this.cache.config.mode)this.element.showModal();else this.element.show();this.st.fadeIn(1e3),this.emit("modal:opened")}return this}close(){return this.st.fadeOut(1e3),this.element.open&&this.element.close(),this.emit("modal:closed"),this}closeAfter(t=1e3){return globalThis?.setTimeout((()=>this.close()),t),this}onOpen(t){return this.on("modal:opened",t.bind(this)),this}onClose(t){return this.on("modal:closed",t.bind(this)),this}useModal(){return this.cache.config.mode="modal",this}useDialog(){return this.cache.config.mode="dialog",this}useTransition(t=!0){return this.cache.config.useTransition=t,this}}class C extends e.ZikoUISection{constructor(){super("section",""),Object.assign(this.cache,{currentIndex:0,slideBuilder:null}),this.container=e.Flex().size("100%","100%").vertical(0,0).style({overflow:"hidden"}),this.container.setAttr({ariaRoledescription:"carousel",ariaLive:"polite",ariaLabel:"Content Slider"}),this.track=e.Section().size("100%","100%").style({transition:"transform 0.3s ease-in-out"}),this.bullets=e.Flex().style({gap:"10px",padding:"10px"}),this.container.append(this.track,this.bullets),this.append(this.container)}#o(){for(let t=0;t<this.track.items.length;t++)this.track[t].setAttr({ariaHidden:t!==this.cache.currentIndex})}goto(t=0){this.cache.currentIndex=t,this.__updatePos(),this.#o()}next(t=1){return this.cache.currentIndex+=t,this.__updatePos(),this.#o(),this}previous(t=1){return this.cache.currentIndex-=t,this.__updatePos(),this.#o(),this}#a(){const t=this.track.items.length;for(let e=0;e<t;e++)this.track.items[e].setAttr({ariaLabel:`Slide ${e+1} of ${t}`,dataSlideIndex:e}),this.bullets.items[e].setAttr({dataIndex:e,ariaLabel:`Go to slide ${e}`}),this.bullets[e].events.click?.destroy(),this.bullets[e].onClick((()=>this.goto(e)))}#h(t){this.track.append(this.cache.slideBuilder(t).setAttr({ariaRoledescription:"slide",role:"group",ariaLabel:""}));const e=text().size("15px","15px").style({borderRadius:"50%",cursor:"pointer",border:"3px solid blue",background:"white"}).setAttr({role:"button",tabIndex:0}).onPtrEnter((t=>t.target.st.background("gold").scale(1.2,1.2))).onPtrLeave((t=>t.target.st.background("white").scale(1,1)));return this.bullets.append(e),this}addSlides(...t){return t.forEach((t=>this.#h(t))),this.#a(),this.#o(),this}}class w extends C{constructor(...t){super("section","hSlider"),this.container.vertical(0,0),Object.assign(this.cache,{slideBuilder:t=>e.Flex(t).style({minWidth:"100%",width:"100%",height:"100%"}).vertical(0,0)}),this.track.size("100%","90%").style({display:"flex"}),this.addSlides(...t),this.bullets.horizontal(0,0).style({width:"100%",height:"10%"})}__updatePos(){const t=this.container.width;this.track.st.translateX(-this.cache.currentIndex*t)}}const v=(...t)=>new w(...t);class k extends C{constructor(...t){super("section","vSlider"),Object.assign(this.cache,{slideBuilder:t=>e.Flex(t).size("100%","100%").vertical(0,0)}),this.addSlides(...t),this.container.horizontal(0,0),this.track.size("90%","100%"),this.bullets.vertical(0,0).style({height:"100%",width:"10%"})}__updatePos(){const t=this.container.height;this.track.st.translateY(-this.cache.currentIndex*t)}}const T=(...t)=>new k(...t);t.Accordion=(...t)=>new s(...t),t.Breadcrumbs=(...t)=>new f(...t),t.Carousel=(...t)=>new n(...t),t.CodeCell=h,t.CodeNote=()=>new r,t.Collapsible=(t,e,s,n)=>new i(t,e,s,n),t.Modal=(...t)=>new y(...t),t.Slider=({orintation:t="horizontal",slides:e=[]})=>["v","vertical"].includes(t.toLowerCase())?T(...e):["h","horizontal"].includes(t.toLowerCase())?v(...e):void 0,t.Splitter=({orintation:t="horizontal",slides:e=[]})=>["v","vertical"].includes(t.toLowerCase())?m(...e):["h","horizontal"].includes(t.toLowerCase())?p(...e):void 0,t.Tabs=(t,e)=>new l(t,e),t.ZikoUIAccordion=s,t.ZikoUIBreadcrumbs=f,t.ZikoUICodeNote=r,t.ZikoUIHorizontalSlider=w,t.ZikoUIHorizontalSplitter=u,t.ZikoUIMenu3d=x,t.ZikoUIModal=y,t.ZikoUIVerticalSlider=k,t.ZikoUIVerticalSplitter=g,t.dangerAlert=(t,e)=>new c("danger",t,e),t.hSlider=v,t.hSplitter=p,t.infoAlert=(t,e)=>new c("info",t,e),t.menu3d=b,t.successAlert=(t,e)=>new c("success",t,e),t.vSlider=T,t.vSplitter=m,t.warningAlert=(t,e)=>new c("warning",t,e)}));