zextra/dist/zextra-ui.min.js

***Zextra*** stands for "Ziko Extra" is an extension package that enhances [ZikoJS](https://github.com/zakarialaoui10/ziko.js) by providing additional utilities and UI elements. It expands ZikoJS with extra features, making it easier to work with custom U

/*
  Project: zextra
  Author: 
  Date : Sat Feb 15 2025 14:52:10 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).Zextra={},t.Ziko)}(this,(function(t,e){"use strict";class i extends e.ZikoUIElement{constructor(t,i,s="😁",n=s){super("details","Collapsible",{useDefaultStyle:!0}),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.ZikoUIElement{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 o extends e.ZikoUIFlex{#t=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.#t!==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.#t=t%this.contentContainer.length;const e=this.contentContainer.at(this.#t);return this.controllersContainer.forEach((t=>t.setAttr("tabindex",-1).setAttr("aria-selected",!1))),this.controllersContainer.at(this.#t).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.#t+t),this}previous(t=1){return this.display(this.#t-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}}const r={success:{titleColor:"green",contentColor:"#35495e",bgColor:"#d4edda",bgColor:"linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)",borderColor:"#28a745",icon:"✅"},info:{titleColor:"blue",contentColor:"#00204a",bgColor:"#93deff",bgColor:"radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%)",borderColor:"#005689",icon:"ℹ️"},warning:{titleColor:"#e4663a",contentColor:"#45171d",bgColor:"#fdffcd",bgColor:"radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%)",borderColor:"#efd510",icon:"⚠️"},danger:{titleColor:"red",contentColor:"#721c24",bgColor:"#f8d7da",bgColor:"linear-gradient(90deg, rgb(255, 157, 129) 24.3%, rgb(255, 138, 138) 78.3%)",borderColor:"#c50000",icon:"❌"},tips:{titleColor:null,contentColor:null,bgColor:null,borderColor:null,icon:"💡"},important:{titleColor:null,contentColor:null,bgColor:null,borderColor:null,icon:"📌"}};class l extends e.ZikoUIFlex{constructor(t,i,s){super(),this.title=e.h3(i),this.icon=e.text(r[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:r[t].color,background:r[t].bgColor,border:"1px darkblue solid",borderLeft:`15px ${r[t].borderColor} solid`}),this.title.style({color:r[t].titleColor}),this.content.st.color(r[t].titleColor),this.icon.setValue(r[t].icon).style({border:`2px ${r[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 a 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 h extends a{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 c=(t,e)=>new h(t,e);class d extends a{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 u=(t,e)=>new d(t,e);class p 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)}#e(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.#e(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 g 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}#i(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.#i("left"),this}useRight(){return this.#i("right"),this}useTop(){return this.#i("top"),this}useBottom(){return this.#i("bottom"),this}}const f=(t,e)=>new g(t,e);globalThis.menu3d=f;class m extends e.ZikoUIElement{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 b 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)}#s(){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.#s()}next(t=1){return this.cache.currentIndex+=t,this.__updatePos(),this.#s(),this}previous(t=1){return this.cache.currentIndex-=t,this.__updatePos(),this.#s(),this}#n(){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)))}#o(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.#o(t))),this.#n(),this.#s(),this}}class x extends b{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 C=(...t)=>new x(...t);class y extends b{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 w=(...t)=>new y(...t);t.Accordion=(...t)=>new s(...t),t.Breadcrumbs=(...t)=>new p(...t),t.Carousel=(...t)=>new n(...t),t.Collapsible=(t,e,s,n)=>new i(t,e,s,n),t.Modal=(...t)=>new m(...t),t.Slider=({orintation:t="horizontal",slides:e=[]})=>["v","vertical"].includes(t.toLowerCase())?w(...e):["h","horizontal"].includes(t.toLowerCase())?C(...e):void 0,t.Splitter=({orintation:t="horizontal",slides:e=[]})=>["v","vertical"].includes(t.toLowerCase())?u(...e):["h","horizontal"].includes(t.toLowerCase())?c(...e):void 0,t.Tabs=(t,e)=>new o(t,e),t.ZikoUIAccordion=s,t.ZikoUIBreadcrumbs=p,t.ZikoUIHorizontalSlider=x,t.ZikoUIHorizontalSplitter=h,t.ZikoUIMenu3d=g,t.ZikoUIModal=m,t.ZikoUIVerticalSlider=y,t.ZikoUIVerticalSplitter=d,t.dangerAlert=(t,e)=>new l("danger",t,e),t.hSlider=C,t.hSplitter=c,t.infoAlert=(t,e)=>new l("info",t,e),t.menu3d=f,t.successAlert=(t,e)=>new l("success",t,e),t.vSlider=w,t.vSplitter=u,t.warningAlert=(t,e)=>new l("warning",t,e)}));