mithril-materialized 1.4.2 → 2.0.0-beta.2

package/dist/index.umd.js

@@ -1,2 +1,4269 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("mithril")):"function"==typeof define&&define.amd?define(["exports","mithril"],t):t((e||self).mithrilMaterialized={},e.mithril)}(this,function(e,t){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/a(t);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i.apply(this,arguments)}function o(e,t){if(null==e)return{};var a,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(a=o[n])>=0||(i[a]=e[a]);return i}var l,r=function(){return"idxxxxxxxx".replace(/[x]/g,function(){return(16*Math.random()|0).toString(16)})},d=function(e){return!isNaN(parseFloat(e))&&isFinite(e)},c=function(e,t,a){return void 0===t&&(t=2),void 0===a&&(a="0"),String(e).padStart(t,a)},u=["label","id","isMandatory","isActive","className"],s={view:function(e){return n.default("span.mandatory",e.attrs,"*")}},f=function(){return{view:function(e){var t=e.attrs,a=t.label,l=t.id,r=t.isMandatory,d=t.isActive,c=t.className,f=o(t,u);return a?n.default("label",i({},f,{className:[c,d?"active":""].filter(Boolean).join(" ").trim(),for:l}),[n.default.trust(a),r?n.default(s):void 0]):void 0}}},p=function(){return{view:function(e){var t=e.attrs,a=t.helperText,i=t.dataError,o=t.dataSuccess;return a||i||o?n.default("span.helper-text.left",{className:t.className,"data-error":i,"data-success":o},a?n.default.trust(a):""):void 0}}},m=["label","helperText","initialValue","onchange","newRow","className","style","iconName","isMandatory"],v=["iconName"],h=function(){return{view:function(e){var t=e.attrs,a=t.iconName,i=o(t,v);return n.default("i.material-icons",i,a)}}},g=["modalId","tooltip","tooltipPostion","iconName","iconClass","label","className","attr"],b=function(e,t,a){return void 0===a&&(a=""),function(){return{view:function(l){var r=l.attrs,d=r.modalId,c=r.tooltip,u=r.tooltipPostion,s=r.iconName,f=r.iconClass,p=r.label,m=r.className,v=r.attr,b=o(r,g),y=[d?"modal-trigger":"",c?"tooltipped":"",t,m].filter(Boolean).join(" ").trim();return n.default(e,i({},b,v,{className:y,href:d?"#"+d:void 0,"data-position":c?u||"top":void 0,"data-tooltip":c||void 0,type:a}),s?n.default(h,{iconName:s,className:f||"left"}):void 0,p||void 0)}}}},y=b("a","waves-effect waves-light btn","button"),w=b("a","waves-effect waves-light btn-large","button"),x=b("a","waves-effect waves-light btn-small","button"),k=b("a","waves-effect waves-teal btn-flat","button"),N=b("button","btn-floating btn-large waves-effect waves-light","button"),I=b("button","btn waves-effect waves-light","submit"),C=["href","src","alt"],A=function(){return{view:function(e){var t=e.attrs,a=t.href,l=t.src,r=t.alt,d=o(t,C);return n.default("a.carousel-item",i({},d,{href:a}),n.default("img",{src:l,alt:r}))}}},T=["newRow","code","language","className"],D=function(){return{view:function(e){var t=e.attrs,a=t.header,i=t.body,o=t.iconName;return n.default(t.active?"li.active":"li",[a||o?n.default(".collapsible-header",[o?n.default("i.material-icons",o):void 0,a?"string"==typeof a?n.default("span",a):a:void 0]):void 0,i?n.default(".collapsible-body",i):void 0])}}},S=["header","items","mode"],O=["title","active","href"],V=["items","header"],R=["items","header","mode"];e.CollectionMode=void 0,(l=e.CollectionMode||(e.CollectionMode={}))[l.BASIC=0]="BASIC",l[l.LINKS=1]="LINKS",l[l.AVATAR=2]="AVATAR";var B=function(e){return e&&/https?:\/\//.test(e)},L=function(){return{view:function(e){var t=e.attrs,a=t.href,i=t.iconName,o=void 0===i?"send":i,l=t.onclick,r=t.style,d={href:a,style:void 0===r?{cursor:"pointer"}:r,className:"secondary-content",onclick:l?function(){return l(t)}:void 0};return B(a)||!a?n.default("a[target=_]",d,n.default(h,{iconName:o})):n.default(n.default.route.Link,d,n.default(h,{iconName:o}))}}},j=function(e){return void 0===e&&(e=""),/\./.test(e)},E=function(){return{view:function(t){var a=t.attrs,i=a.item,o=i.title,l=i.content,r=void 0===l?"":l,d=i.active,c=i.iconName,u=i.avatar,s=i.className,f=i.onclick;return a.mode===e.CollectionMode.AVATAR?n.default("li.collection-item.avatar",{className:d?"active":"",onclick:f?function(){return f(i)}:void 0},[j(u)?n.default("img.circle",{src:u}):n.default("i.material-icons.circle",{className:s},u),n.default("span.title",o),n.default("p",n.default.trust(r)),n.default(L,i)]):n.default("li.collection-item",{className:d?"active":""},c?n.default("div",[o,n.default(L,i)]):o)}}},F=function(){return{view:function(t){var a=t.attrs,i=a.header,l=a.items,r=a.mode,d=void 0===r?e.CollectionMode.BASIC:r,c=o(a,S),u=l.map(function(e){return n.default(E,{key:e.id,item:e,mode:d})});return i?n.default("ul.collection.with-header",c,[n.default("li.collection-header",n.default("h4",i)),u]):n.default("ul.collection",c,u)}}},P=function(){return{view:function(e){var t=e.attrs.item,a=t.title,l=t.active,r=t.href,d=i({},o(t,O),{className:"collection-item "+(l?"active":""),href:r});return B(r)||!r?n.default("a[target=_]",d,a):n.default(n.default.route.Link,d,a)}}},K=function(){return{view:function(e){var t=e.attrs,a=t.items,i=t.header,l=o(t,V);return i?n.default(".collection.with-header",l,[n.default(".collection-header",n.default("h4",i)),a.map(function(e){return n.default(P,{key:e.id,item:e})})]):n.default(".collection",l,a.map(function(e){return n.default(P,{key:e.id,item:e})}))}}},_=function(){return{view:function(t){var a=t.attrs,l=a.items,r=a.header,d=a.mode,c=void 0===d?e.CollectionMode.BASIC:d,u=o(a,R);return r||l&&l.length>0?c===e.CollectionMode.LINKS?n.default(K,i({header:r,items:l},u)):n.default(F,i({header:r,items:l,mode:c},u)):void 0}}},z=["key","label","onchange","disabled","items","iconName","helperText","style","className"],H=["className","iconName","iconClass","position","style","buttons"],U=["className","helperText","iconName","id","initialValue","isMandatory","label","onchange","onkeydown","onkeypress","onkeyup","onblur","style"],q=["className","dataError","dataSuccess","helperText","iconName","id","initialValue","isMandatory","label","maxLength","newRow","onchange","onkeydown","onkeypress","onkeyup","onblur","style","validate"],W=function(){var e={id:r()};return{view:function(t){var a=t.attrs,l=a.className,r=void 0===l?"col s12":l,d=a.helperText,c=a.iconName,u=a.id,s=void 0===u?e.id:u,m=a.initialValue,v=a.isMandatory,h=a.label,g=a.onchange,b=a.onkeydown,y=a.onkeypress,w=a.onkeyup,x=a.onblur,k=a.style,N=o(a,U);return n.default(".input-field",{className:r,style:k},[c?n.default("i.material-icons.prefix",c):"",n.default("textarea.materialize-textarea",i({},N,{id:s,tabindex:0,oncreate:function(e){var t=e.dom;M.textareaAutoResize(t),a.maxLength&&M.CharacterCounter.init(t)},onchange:g?function(e){var t=e.target;g(t&&"string"==typeof t.value?t.value:"")}:void 0,value:m,onkeyup:w?function(e){w(e,e.target.value)}:void 0,onkeydown:b?function(e){b(e,e.target.value)}:void 0,onkeypress:y?function(e){y(e,e.target.value)}:void 0,onblur:x})),n.default(f,{label:h,id:s,isMandatory:v,isActive:m||a.placeholder}),n.default(p,{helperText:d})])}}},Y=function(e,t){return void 0===t&&(t=""),function(){var a={id:r()},l=function(t){var a=t.value;return!a||"number"!==e&&"range"!==e?a:+a},d=function(e,t){e.setCustomValidity("boolean"==typeof t?t?"":"Custom validation failed":t)};return{view:function(r){var c=r.attrs,u=c.className,s=void 0===u?"col s12":u,m=c.dataError,v=c.dataSuccess,h=c.helperText,g=c.iconName,b=c.id,y=void 0===b?a.id:b,w=c.initialValue,x=c.isMandatory,k=c.label,N=c.maxLength,I=c.newRow,C=c.onchange,A=c.onkeydown,T=c.onkeypress,D=c.onkeyup,S=c.onblur,O=c.style,V=c.validate,R=o(c,q),B=[I?"clear":"",t,s].filter(Boolean).join(" ").trim();return n.default(".input-field",{className:B,style:O},[g?n.default("i.material-icons.prefix",g):void 0,n.default("input.validate",i({},R,{type:e,tabindex:0,id:y,oncreate:function(t){var a,n=t.dom;(a=c.autofocus)&&("boolean"==typeof a?a:a())&&n.focus(),N&&M.CharacterCounter.init(n),"range"===e&&M.Range.init(n)},onkeyup:D?function(e){D(e,l(e.target))}:void 0,onkeydown:A?function(e){A(e,l(e.target))}:void 0,onkeypress:T?function(e){T(e,l(e.target))}:void 0,onblur:S,onupdate:V?function(e){var t=e.dom;d(t,V(l(t),t))}:void 0,onchange:function(e){var t=e.target;if(t){var a=l(t);C&&C(a),V&&d(t,V(a,t))}},value:w})),n.default(f,{label:k,id:y,isMandatory:x,isActive:!(void 0===w&&!c.placeholder&&"number"!==e&&"color"!==e&&"range"!==e)}),n.default(p,{helperText:h,dataError:m,dataSuccess:v})])}}}},$=Y("text"),X=Y("password"),G=Y("number"),J=Y("url"),Q=Y("color"),Z=Y("range",".range-field"),ee=Y("email"),te=function(){return{view:function(e){var t=e.attrs,a=t.className,i=t.onchange,o=t.label,l=t.description;return n.default("div",{className:void 0===a?"col s12":a,style:t.style},n.default("label",[n.default("input[type=checkbox][tabindex=0]",{checked:t.checked,disabled:t.disabled,onclick:i?function(e){e.target&&void 0!==e.target.checked&&i(e.target.checked)}:void 0}),o?"string"==typeof o?n.default("span",o):o:void 0]),l&&n.default(p,{className:"input-checkbox-desc",helperText:l}))}}},ae=function(){return{view:function(e){var t=e.attrs,a=t.title;return n.default("li",{className:t.active?"active":t.disabled?"disabled":"waves-effect"},"number"==typeof a?n.default(n.default.route.Link,{href:t.href},a):a)}}},ne=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],ie=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],oe=function(){return{view:function(e){var t=e.attrs,a=t.id,i=t.label,o=t.onchange,l=t.className;return n.default("div",{className:void 0===l?"col s12":l},n.default("label",[n.default("input[type=radio][tabindex=0]",{name:t.groupId,disabled:t.disabled,checked:t.checked,onclick:o?function(){return o(a)}:void 0}),n.default("span",n.default.trust(i))]))}}},le=["label","left","right","disabled","newRow","onchange","checked","isMandatory","className"],re=function(){return{view:function(e){var t=e.attrs,a=t.id,i=t.title,o=t.datetime,l=t.active,r=t.content,d=t.iconName,c=t.timeFormatter,u=t.onSelect;return n.default("li",{id:a,className:l?"active":void 0,onclick:u?function(){return u({id:a,title:i,datetime:o,active:l,content:r})}:void 0,style:u?"cursor: pointer;":void 0},[n.default(".mm_time",{datetime:o},[n.default("span",(0,t.dateFormatter)(o)),n.default("span",c(o))]),d?n.default(".mm_icon",n.default("i.material-icons",d)):void 0,n.default(".mm_label",[i?"string"==typeof i?n.default("h5",i):i:void 0,r?"string"==typeof r?n.default("p",r):r:void 0])])}}};e.AnchorItem=P,e.Autocomplete=function(){var e={id:r()};return{view:function(t){var a=t.attrs,l=a.id||e.id,r=a.label,d=a.helperText,c=a.initialValue,u=a.onchange,s=a.newRow,v=a.className,h=void 0===v?"col s12":v,g=a.style,b=a.iconName,y=a.isMandatory,w=o(a,m);return n.default(".input-field"+(s?".clear":""),{className:s?h+" clear":h,style:g},[b?n.default("i.material-icons.prefix",b):"",n.default("input",i({},w,{className:"autocomplete",type:"text",tabindex:0,id:l,oncreate:function(e){M.Autocomplete.init(e.dom,a)},onchange:u?function(e){e.target&&e.target.value&&u(e.target.value)}:void 0,value:c})),n.default(f,{label:r,id:l,isMandatory:y,isActive:c}),n.default(p,{helperText:d})])}}},e.Button=y,e.ButtonFactory=b,e.Carousel=function(){return{view:function(e){var t=e.attrs,a=t.items;return a&&a.length>0?n.default(".carousel",{oncreate:function(e){M.Carousel.init(e.dom,t)}},a.map(function(e){return n.default(A,e)})):void 0}}},e.CarouselItem=A,e.Chips=function(){var e={chipsData:[],selectedChip:null,focused:!1,inputValue:"",inputId:r(),autocompleteItems:[],selectedAutocompleteIndex:-1,showAutocomplete:!1},t=null,a=function(){var a;if(null!=(a=t)&&null!=(a=a.attrs.autocompleteOptions)&&a.data){var n=t.attrs.autocompleteOptions,i=n.data,o=n.minLength,l=void 0===o?1:o,r=e.inputValue.toLowerCase();if(r.length<l)return e.autocompleteItems=[],void(e.showAutocomplete=!1);var d=function(e){return Array.isArray(e)?e.map(function(e){return"string"==typeof e?{tag:e}:e}):Object.entries(e).map(function(e){var t=e[0];return{tag:t,value:e[1]||t}})}(i),c=d.filter(function(e){return e.tag.toLowerCase().includes(r)});e.autocompleteItems=c.slice(0,t.attrs.autocompleteOptions.limit||Infinity),e.showAutocomplete=e.autocompleteItems.length>0,e.selectedAutocompleteIndex=-1}else e.autocompleteItems=[]},i=function(t){o({tag:t.tag,image:t.image,alt:t.alt}),e.inputValue="",e.showAutocomplete=!1,e.selectedAutocompleteIndex=-1},o=function(a){if(t){var n=t.attrs,i=n.limit,o=void 0===i?Infinity:i,l=n.onChipAdd,r=n.onchange;!function(e,t){return!(!e.tag||""===e.tag.trim()||t.some(function(t){return t.tag===e.tag}))}(a,e.chipsData)||e.chipsData.length>=o||(e.chipsData=[].concat(e.chipsData,[a]),e.inputValue="",l&&l(a),r&&r(e.chipsData))}},l=function(a){if(t){var n=t.attrs,i=n.onChipDelete,o=n.onchange,l=e.chipsData[a];e.chipsData=e.chipsData.filter(function(e,t){return t!==a}),e.selectedChip=null,i&&i(l),o&&o(e.chipsData)}},d=function(a){if(t){var n=t.attrs.onChipSelect;e.selectedChip=a,n&&e.chipsData[a]&&n(e.chipsData[a])}},c=function(a){var r=a.target;if(e.showAutocomplete){if("ArrowDown"===a.key){var c;a.preventDefault(),e.selectedAutocompleteIndex=Math.min(e.selectedAutocompleteIndex+1,e.autocompleteItems.length-1);var u=null==(c=t)?void 0:c.dom.querySelector(".autocomplete-item.selected");return u&&u.scrollIntoView({block:"nearest"}),void n.default.redraw()}if("ArrowUp"===a.key){var s;a.preventDefault(),e.selectedAutocompleteIndex=Math.max(e.selectedAutocompleteIndex-1,-1);var f=null==(s=t)?void 0:s.dom.querySelector(".autocomplete-item.selected");return f&&f.scrollIntoView({block:"nearest"}),void n.default.redraw()}if("Enter"===a.key&&e.selectedAutocompleteIndex>=0)return a.preventDefault(),void i(e.autocompleteItems[e.selectedAutocompleteIndex])}"Enter"===a.key&&r.value.trim()?(a.preventDefault(),o({tag:r.value.trim()})):"Backspace"===a.key&&!r.value&&e.chipsData.length>0?(a.preventDefault(),l(e.chipsData.length-1)):"ArrowLeft"===a.key&&!r.value&&e.chipsData.length&&(a.preventDefault(),d(e.chipsData.length-1))};return{oninit:function(t){e.chipsData=t.attrs.data||[]},oncreate:function(e){t=e},onremove:function(){t=null},view:function(o){var r=o.attrs,u=r.isMandatory,s=void 0===u?r.required:u,m=r.className,v=r.label,h=r.helperText,g=r.placeholder,b=r.secondaryPlaceholder;return n.default(".input-field",{id:r.id,className:void 0===m?"col s12":m},[n.default(".chips.chips-initial",{class:"chips-container "+(e.focused?"focused":"")+" "+(g?"chips-placeholder":"")},[e.chipsData.map(function(a,i){return n.default(".chip",{key:a.tag+"-"+i,tabindex:0,class:e.selectedChip===i?"selected":"",onkeydown:function(a){return function(a,n){if("Backspace"===a.key||"Delete"===a.key){a.preventDefault(),l(n);var i=Math.max(n-1,0);e.chipsData.length&&d(i)}else if("ArrowLeft"===a.key&&n>0)d(n-1);else if("ArrowRight"===a.key)if(n<e.chipsData.length-1)d(n+1);else{var o,r=null==(o=t)?void 0:o.dom.querySelector(".chips-input");r&&r.focus()}}(a,i)}},[a.image&&n.default("img",{src:a.image,alt:a.alt||a.tag}),a.tag,n.default("i.material-icons.close",{onclick:function(e){e.stopPropagation(),l(i)}},"close")])}),n.default("input.chips-input.input",{id:e.inputId,title:"label",value:e.inputValue,placeholder:!e.chipsData.length&&g?g:e.chipsData.length&&b?b:"",oninput:function(t){e.inputValue=t.target.value,a()},onfocus:function(){e.focused=!0,e.selectedChip=null,a()},onblur:function(){e.focused=!1,setTimeout(function(){e.showAutocomplete=!1,e.selectedChip=null,n.default.redraw()},150)},onkeydown:c}),e.showAutocomplete&&n.default("ul.autocomplete-content.dropdown-content",{style:{display:"block",opacity:1,transform:"scaleX(1) scaleY(1)",position:"absolute",width:"100%",left:0,top:"100%",maxHeight:"200px",overflow:"auto",zIndex:1e3,backgroundColor:"#fff",boxShadow:"0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)"}},e.autocompleteItems.map(function(t,a){return n.default("li.autocomplete-item",{key:t.tag,class:e.selectedAutocompleteIndex===a?"selected":"",style:{padding:"12px 16px",cursor:"pointer",backgroundColor:e.selectedAutocompleteIndex===a?"#eee":"transparent"},onmousedown:function(e){e.preventDefault(),i(t)},onmouseover:function(){e.selectedAutocompleteIndex=a}},[t.image&&n.default("img.autocomplete-item-image",{src:t.image,alt:t.alt||t.tag,style:{width:"24px",height:"24px",marginRight:"8px",verticalAlign:"middle"}}),n.default("span.autocomplete-item-text",t.tag)])}))]),v&&n.default(f,{label:v,id:e.inputId,isMandatory:s,isActive:!!(e.focused||e.chipsData.length||g)}),h&&n.default(p,{helperText:h})])}}},e.CodeBlock=function(){return{view:function(e){var t=e.attrs,a=t.newRow,l=t.code,r=t.language,d=t.className,c=o(t,T),u=r||"lang-TypeScript",s=u.replace("lang-",""),f=l instanceof Array?l.join("\n"):l,p=[a?"clear":"",u,d].filter(Boolean).join(" ").trim();return n.default("pre.codeblock"+(a?".clear":""),t,[n.default("div",n.default("label",s)),n.default("code",i({},c,{className:p}),f)])}}},e.Collapsible=function(){return{oncreate:function(e){M.Collapsible.init(e.dom,e.attrs)},view:function(e){var t=e.attrs,a=t.items;return a&&a.length>0?n.default("ul.collapsible",{class:t.class||t.className,style:t.style,id:t.id},a.map(function(e){return n.default(D,e)})):void 0}}},e.CollapsibleItem=D,e.Collection=_,e.ColorInput=Q,e.DatePicker=function(){var e={id:r()};return{view:function(t){var a=t.attrs,l=a.label,r=a.helperText,d=a.initialValue,c=a.newRow,u=a.className,s=void 0===u?"col s12":u,m=a.iconName,v=a.isMandatory,h=a.onchange,g=a.disabled,b=o(a,ne),y=e.id,w=h?function(){return e.dp&&h(e.dp.date)}:void 0,x=[c?"clear":"",s].filter(Boolean).join(" ").trim();return n.default(".input-field",{className:x,onremove:function(){return e.dp&&e.dp.destroy()}},[m?n.default("i.material-icons.prefix",m):"",n.default("input",i({},b,{type:"text",tabindex:0,className:"datepicker",id:y,disabled:g,oncreate:function(t){e.dp=M.Datepicker.init(t.dom,i({format:"yyyy/mm/dd",showClearBtn:!0,setDefaultDate:!0,defaultDate:d?new Date(d):new Date},b,{onClose:w}))}})),n.default(f,{label:l,id:y,isMandatory:v,isActive:!!d}),n.default(p,{helperText:r})])}}},e.Dropdown=function(){var e={};return{oninit:function(t){var a=t.attrs,n=a.id,i=void 0===n?r():n,o=a.initialValue,l=a.checkedId;e.id=i,e.initialValue=o||l},view:function(t){var a=t.attrs,i=a.key,l=a.label,r=a.onchange,d=a.disabled,c=void 0!==d&&d,u=a.items,s=a.iconName,f=a.helperText,m=a.style,v=a.className,h=void 0===v?"col s12":v,g=o(a,z),b=e.id,y=e.initialValue,w=y?u.filter(function(e){return e.id?e.id===y:e.label===y}).shift():void 0,x=w?w.label:l||"Select";return n.default(".input-field",{className:h,key:i,style:m},[s?n.default("i.material-icons.prefix",s):void 0,n.default(p,{helperText:f}),n.default("a.dropdown-trigger.btn.truncate[href=#]",{"data-target":b,disabled:c,className:"col s12",style:m||(s?"margin: 0.2em 0 0 3em;":void 0),oncreate:function(e){M.Dropdown.init(e.dom,g)}},x),n.default("ul.dropdown-content",{id:b},u.map(function(t){return n.default("li[tabindex=-1]",{className:t.divider?"divider":""},t.divider?void 0:n.default("a",{onclick:r?function(){e.initialValue=t.id||t.label,r(e.initialValue)}:void 0},[t.iconName?n.default("i.material-icons",t.iconName):void 0,t.label]))}))])}}},e.EmailInput=ee,e.FileInput=function(){var e,t=!1;return{view:function(a){var i=a.attrs,o=i.multiple,l=i.disabled,r=i.initialValue,d=i.placeholder,c=i.onchange,u=i.className,s=void 0===u?"col s12":u,f=i.accept,p=i.label,m=void 0===p?"File":p,v=f?f instanceof Array?f.join(", "):f:void 0;return n.default(".file-field.input-field",{className:i.class||s},[n.default(".btn",[n.default("span",m),n.default("input[type=file]",{title:m,accept:v,multiple:o,disabled:l,onchange:c?function(e){var a=e.target;a&&a.files&&c&&(t=!0,c(a.files))}:void 0})]),n.default(".file-path-wrapper",n.default("input.file-path.validate[type=text]",{placeholder:d,oncreate:function(t){e=t.dom,r&&(e.value=r)}})),(t||r)&&n.default("a.waves-effect.waves-teal.btn-flat",{style:{float:"right",position:"relative",top:"-3rem",padding:0},onclick:function(){t=!1,e.value="",c&&c({})}},n.default("i.material-icons","clear"))])}}},e.FlatButton=k,e.FloatingActionButton=function(){return{view:function(e){var t=e.attrs,a=t.className,i=t.iconName,l=t.iconClass,r=void 0===l?"large":l,d=t.position,c=t.style,u=void 0===c?"left"===d||"inline-left"===d?"position: absolute; display: inline-block; left: 24px;":"right"===d||"inline-right"===d?"position: absolute; display: inline-block; right: 24px;":void 0:c,s=t.buttons,f=o(t,H),p=n.default(".fixed-action-btn",{style:u,oncreate:function(e){return M.FloatingActionButton.init(e.dom,f)}},[n.default("a.btn-floating.btn-large",{className:a},n.default("i.material-icons",{classNames:r},i)),s?n.default("ul",s.map(function(e){return n.default("li",n.default("a.btn-floating",{className:e.className,onclick:function(t){return e.onClick&&e.onClick(t)}},n.default("i.material-icons",{className:e.iconClass},e.iconName)))})):void 0]);return"inline-right"===d||"inline-left"===d?n.default("div",{style:"position: relative; height: 70px;"},p):p}}},e.HelperText=p,e.Icon=h,e.InputCheckbox=te,e.Label=f,e.LargeButton=w,e.ListItem=E,e.Mandatory=s,e.MapEditor=function(){var t=function(e){return a.curKey=a.id=e},a={elementId:r(),id:"",curKey:"",kvc:function(e,t,a){var i=a.keyClass,o=void 0===i?".col.s4":i,l=a.valueClass,r=void 0===l?".col.s8":l,d=t instanceof Array?t.join(", "):"boolean"==typeof t?n.default(te,{label:" ",checked:t,disabled:!0,className:"checkbox-in-collection"}):t.toString();return{title:n.default(".row",{style:"margin-bottom: 0"},[n.default(o,n.default("b",e)),n.default(r,d)])}}},i=function(){a.id="",a.curKey=""};return{oninit:function(e){var t=e.attrs,n=t.keyValueConverter,i=t.id;n&&(a.kvc=n),i&&(a.elementId=i)},view:function(o){var l=o.attrs,r=l.className,d=void 0===r?"col s12":r,c=l.disabled,u=l.disallowArrays,s=l.header,p=l.iconName,m=l.iconNameKey,v=void 0===m?p?"label":void 0:m,h=l.isMandatory,g=l.label,b=l.labelKey,y=void 0===b?"Key":b,w=l.labelValue,x=void 0===w?"Value":w,N=l.properties,I=l.onchange,C=l.falsy,M=void 0===C?["false"]:C,A=l.truthy,T=void 0===A?["true"]:A,D=function(){return I?I(N):void 0},S=function(e,n){return Object.keys(e).map(function(t){return{key:t,value:e[t]}}).map(function(e){return function(e,n){var i=n.onclick;return n.id=n.id||e,n.active=e===a.curKey,n.onclick=i?function(){return t(e)&&i(n)}:function(){return t(e)},n}(e.key,a.kvc(e.key,e.value,{keyClass:n.keyClass,valueClass:n.valueClass}))})}(N,{keyClass:l.keyClass,valueClass:l.valueClass}),O=a.curKey,V=N[O],R="boolean"==typeof V||"number"==typeof V?V:V?V instanceof Array?"["+V.join(", ")+"]":V:"",B=a.elementId;return[n.default(".map-editor",n.default(".input-field",{className:d,style:"min-height: 1.5em;"},[p?n.default("i.material-icons.prefix",p):"",n.default(f,{label:g,isMandatory:h,isActive:S.length>0}),n.default(_,{id:B,items:S,mode:e.CollectionMode.LINKS,header:s})])),c?void 0:[n.default($,{label:y,iconName:v,className:"col s5",initialValue:O,onchange:function(e){a.curKey=e,a.id&&(delete N[a.id],N[e]=V,a.id=e),D()}}),"string"==typeof R?n.default(W,{label:x,initialValue:R,className:"col s7",onchange:function(e){var t=function(e,t,a){return t.indexOf(e)>=0||!(a.indexOf(e)>=0)&&void 0}(e,T,M),a=void 0===t&&/^\s*\d+\s*$/i.test(e)?+e:void 0;N[O]="boolean"==typeof t?t:"number"==typeof a?a:function(e,t){if(void 0===t&&(t=!1),t)return e;if(e){var a=/\s*\[(.*)\]\s*/gi.exec(e);if(a&&2===a.length)return a[1].split(",").map(function(e){return e.trim()}).map(function(e){return/^\d+$/g.test(e)?+e:e})}}(e,u)||e,D()}}):"number"==typeof R?n.default(G,{label:x,initialValue:R,className:"col s7",onchange:function(e){N[O]=e,D()}}):n.default(te,{label:x,checked:R,className:"input-field col s7",onchange:function(e){N[O]=e,D()}}),n.default(".col.s12.right-align",[n.default(k,{iconName:"add",onclick:i}),n.default(k,{iconName:"delete",disabled:!O,onclick:function(){delete N[O],i(),D()}})])]]}}},e.MaterialBox=function(){return{oncreate:function(e){M.Materialbox.init(e.dom,e.attrs)},view:function(e){return n.default("img.materialboxed",e.attrs)}}},e.ModalPanel=function(){return{oncreate:function(e){var t=e.attrs,a=t.onCreate,n=M.Modal.init(e.dom,t.options);a&&a(n)},view:function(e){var t=e.attrs,a=t.id,o=t.title,l=t.description,r=t.buttons,d=t.richContent,c=[t.className,t.fixedFooter?"modal-fixed-footer":"",t.bottomSheet?"bottom-sheet":""].filter(Boolean).join(" ").trim();return n.default(".modal",{id:a,className:c},[n.default(".modal-content",[n.default("h4",o),d&&"string"==typeof l?n.default.trust(l||""):"string"==typeof l?n.default("p",l):l]),r?n.default(".modal-footer",r.map(function(e){return n.default(k,i({},e,{className:"modal-close"}))})):void 0])}}},e.NumberInput=G,e.Options=function(){var e={},t=function(t){return e.checkedIds.indexOf(t)>=0};return{oninit:function(t){var a=t.attrs,n=a.checkedId,i=n||a.initialValue;e.checkedId=n,e.checkedIds=i?i instanceof Array?[].concat(i):[i]:[]},view:function(a){var i=a.attrs,o=i.label,l=i.id,r=i.options,d=i.checkedId,c=i.description,u=i.className,s=void 0===u?"col s12":u,m=i.style,v=i.disabled,h=i.checkboxClass,g=i.newRow,b=i.isMandatory,y=i.onchange;d&&e.checkedId!==d&&(e.checkedId=d,e.checkedIds=d instanceof Array?d:[d]);var w=y?function(t,a){var n=e.checkedIds.filter(function(e){return e!==t});a&&n.push(t),e.checkedIds=n,y(n)}:void 0,x=[g?"clear":"",s].filter(Boolean).join(" ").trim();return n.default("div",{className:x,style:m},[n.default("div",{className:"input-field options"},n.default(f,{id:l,label:o,isMandatory:b})),n.default(p,{helperText:c})].concat(r.map(function(e){return n.default(te,{disabled:v||e.disabled,label:e.label,onchange:w?function(t){return w(e.id,t)}:void 0,className:e.className||h,checked:t(e.id),description:e.description})})))}}},e.Pagination=function(){var e={pagIndex:0};return{view:function(t){var a=t.attrs,o=a.items,l=a.curPage,r=void 0===l?1:l,d=a.size,c=void 0===d?Math.min(9,o.length):d,u=e.pagIndex,s=u*c,f=s+c,p=u>0,m=f<o.length,v=[{title:n.default("a",{onclick:function(){return p&&e.pagIndex--}},n.default("i.material-icons","chevron_left")),disabled:!p}].concat(o.filter(function(e,t){return s<=t&&t<f}),[{title:n.default("a",{onclick:function(){return m&&e.pagIndex++}},n.default("i.material-icons","chevron_right")),disabled:!m}]);return n.default("ul.pagination",v.map(function(e,t){return n.default(ae,i({title:s+t},e,{active:s+t===r}))}))}}},e.Parallax=function(){return{oncreate:function(e){M.Parallax.init(e.dom,e.attrs)},view:function(e){var t=e.attrs.src;return t?n.default(".parallax-container",n.default(".parallax",n.default("img",{src:t}))):void 0}}},e.PasswordInput=X,e.RadioButton=oe,e.RadioButtons=function(){var e={groupId:r()};return{oninit:function(t){var a=t.attrs,n=a.checkedId,i=a.initialValue;e.oldCheckedId=n,e.checkedId=n||i},view:function(t){var a=t.attrs,o=a.id,l=a.checkedId,r=a.newRow,d=a.className,c=void 0===d?"col s12":d,u=a.label,s=void 0===u?"":u,p=a.disabled,m=a.description,v=a.options,h=a.isMandatory,g=a.checkboxClass,b=a.onchange;e.oldCheckedId!==l&&(e.oldCheckedId=e.checkedId=l);var y=e.groupId,w=e.checkedId,x=function(t){e.checkedId=t,b&&b(t)};return r&&(c+=" clear"),n.default("div",{id:o,className:c},[n.default("div",{className:"input-field options"},n.default(f,{id:o,label:s,isMandatory:h})),m?n.default("p.helper-text",n.default.trust(m)):""].concat(v.map(function(e){return n.default(oe,i({},e,{onchange:x,groupId:y,disabled:p,className:g,checked:e.id===w}))})))}}},e.RangeInput=Z,e.RoundIconButton=N,e.SearchSelect=function(){var e={isOpen:!1,selectedOptions:[],searchTerm:"",options:[],inputRef:null,dropdownRef:null,focusedIndex:-1,onchange:null},t=function(t){var a=t.target;e.inputRef&&e.inputRef.contains(a)?(e.isOpen=!e.isOpen,n.default.redraw()):e.dropdownRef&&!e.dropdownRef.contains(a)&&(e.isOpen=!1,n.default.redraw())},a=function(t){if(e.isOpen){var a=e.options.filter(function(t){return(t.label||t.id.toString()).toLowerCase().includes((e.searchTerm||"").toLowerCase())&&!e.selectedOptions.some(function(e){return e.id===t.id})});switch(t.key){case"ArrowDown":t.preventDefault(),e.focusedIndex=Math.min(e.focusedIndex+1,a.length-1),n.default.redraw();break;case"ArrowUp":t.preventDefault(),e.focusedIndex=Math.max(e.focusedIndex-1,-1),n.default.redraw();break;case"Enter":t.preventDefault(),e.focusedIndex>=0&&e.focusedIndex<a.length&&i(a[e.focusedIndex]);break;case"Escape":t.preventDefault(),e.isOpen=!1,e.focusedIndex=-1,n.default.redraw()}}},i=function(t){t.disabled||(e.selectedOptions=e.selectedOptions.some(function(e){return e.id===t.id})?e.selectedOptions.filter(function(e){return e.id!==t.id}):[].concat(e.selectedOptions,[t]),e.searchTerm="",e.focusedIndex=-1,e.onchange&&e.onchange(e.selectedOptions.map(function(e){return e.id})),n.default.redraw())};return{oninit:function(t){var a=t.attrs,n=a.options,i=void 0===n?[]:n,o=a.initialValue,l=void 0===o?[]:o,r=a.onchange;e.options=i,e.selectedOptions=i.filter(function(e){return l.includes(e.id)}),e.onchange=r},oncreate:function(){document.addEventListener("click",t),document.addEventListener("keydown",a)},onremove:function(){document.removeEventListener("click",t),document.removeEventListener("keydown",a)},view:function(t){var a=t.attrs,o=a.oncreateNewOption,l=a.className,r=a.placeholder,d=a.searchPlaceholder,c=void 0===d?"Search options...":d,u=a.noOptionsFound,s=void 0===u?"No options found":u,f=a.label,p=a.maxHeight,m=void 0===p?"25rem":p,v=e.options.filter(function(t){return(t.label||t.id.toString()).toLowerCase().includes((e.searchTerm||"").toLowerCase())&&!e.selectedOptions.some(function(e){return e.id===t.id})}),h=o&&e.searchTerm&&!v.some(function(t){return(t.label||t.id.toString()).toLowerCase()===e.searchTerm.toLowerCase()});return n.default(".multi-select-dropdown.input-field",{className:l},[n.default("label",{class:r||e.selectedOptions.length>0?"active":""},f),n.default(".dropdown-trigger",{oncreate:function(t){e.inputRef=t.dom},style:{borderBottom:"2px solid #d1d5db",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer"}},[n.default(".selected-options",{style:{display:"flex",flexWrap:"wrap",minHeight:"50px",paddingTop:"12px"}},0===e.selectedOptions.length?[n.default("span",r)]:e.selectedOptions.map(function(t){return n.default(".chip",[t.label||t.id.toString(),n.default("button",{onclick:function(a){a.stopPropagation(),function(t){e.selectedOptions=e.selectedOptions.filter(function(e){return e.id!==t.id}),e.onchange&&e.onchange(e.selectedOptions.map(function(e){return e.id})),n.default.redraw()}(t)},style:{marginLeft:"0.25rem",background:"none",border:"none",cursor:"pointer"}},"×")])})),n.default("svg.caret",{class:"caret",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg"},[n.default("path",{d:"M7 10l5 5 5-5z"}),n.default("path",{d:"M0 0h24v24H0z",fill:"none"})])]),e.isOpen&&n.default(".dropdown-menu",{oncreate:function(t){e.dropdownRef=t.dom},onremove:function(){e.dropdownRef=null},style:{position:"absolute",width:"98%",marginTop:"0.4rem",zIndex:1e3}},[n.default("ul.dropdown-content.select-dropdown",{style:{maxHeight:m,opacity:1,display:"block",width:"100%"}},[n.default("li",{class:"search-wrapper",style:{padding:"0 16px",position:"relative"}},[n.default("input",{type:"text",placeholder:c,value:e.searchTerm||"",oninput:function(t){e.searchTerm=t.target.value,e.focusedIndex=-1,n.default.redraw()},style:{width:"100%",outline:"none",fontSize:"0.875rem"}})])].concat(0!==v.length||h?[]:[n.default("li",{style:{padding:"0.5rem",textAlign:"center",color:"#9ca3af"}},s)],h?[n.default("li",{onclick:function(){try{return Promise.resolve(o(e.searchTerm)).then(function(e){i(e)})}catch(e){return Promise.reject(e)}},style:{display:"flex",alignItems:"center",cursor:"pointer",background:e.focusedIndex===v.length?"#f3f4f6":""}},[n.default("span",'+ "'+e.searchTerm+'"')])]:[],v.map(function(t,a){return n.default("li",{onclick:function(){return i(t)},class:t.disabled?"disabled":void 0,style:{display:"flex",alignItems:"center",cursor:t.disabled?"not-allowed":"pointer",background:e.focusedIndex===a?"#f3f4f6":""}},n.default("span",[n.default("input",{type:"checkbox",checked:e.selectedOptions.some(function(e){return e.id===t.id}),style:{marginRight:"0.5rem"}}),t.label||t.id.toString()]))})))])])}}},e.SecondaryContent=L,e.Select=function(){var e={},t=function(e){return e.map(function(e){return e.id}).join("")},a=function(e,t,a){return void 0===a&&(a=!1),a||(t instanceof Array&&(e||"number"==typeof e)?t.indexOf(e)>=0:t===e)};return{oninit:function(a){var n=a.attrs,i=n.checkedId,o=n.initialValue;e.ids=t(n.options);var l=i||o;e.checkedId=i instanceof Array?[].concat(i):i,e.initialValue=null!=l?l instanceof Array?l.filter(function(e){return null!=e}):[l]:[]},view:function(i){var o=i.attrs,l=o.id,r=o.newRow,c=o.className,u=void 0===c?"col s12":c,s=o.checkedId,m=o.key,v=o.options,h=o.multiple,g=o.label,b=o.helperText,y=o.placeholder,w=void 0===y?"":y,x=o.isMandatory,k=o.iconName,N=o.disabled,I=o.classes,C=void 0===I?"":I,A=o.dropdownOptions,T=o.onchange;e.checkedId!==s&&(e.initialValue=s?s instanceof Array?s:[s]:void 0);var D=e.initialValue,S=T?h?function(){var t=e.instance&&e.instance.getSelectedValues(),a=t?t.length>0&&d(t[0])?t.map(function(e){return+e}):t.filter(function(e){return null!==e||void 0!==e}):void 0;e.initialValue=a||[],T(e.initialValue)}:function(t){if(t&&t.currentTarget){var a=t.currentTarget,n=d(a.value)?+a.value:a.value;e.initialValue=void 0!==typeof n?[n]:[]}e.initialValue&&T(e.initialValue)}:void 0;r&&(u+=" clear");var O=!v.some(function(e){return a(e.id,D)}),V=v.reduce(function(e,t){return t.group&&e.indexOf(t.group)<0&&e.push(t.group),e},[]);return n.default(".input-field.select-space",{className:u,key:m,oncreate:h?function(t){return e.wrapper=t.dom}:void 0},[k&&n.default("i.material-icons.prefix",k),n.default("select",{id:l,title:g,disabled:N,multiple:h,oncreate:function(t){e.instance=M.FormSelect.init(t.dom,{classes:C,dropdownOptions:A})},onupdate:function(a){var n=a.dom;if(h){var i=k?1:0;!e.inputEl&&e.wrapper&&e.wrapper.childNodes&&e.wrapper.childNodes.length>0&&e.wrapper.childNodes[i].childNodes&&e.wrapper.childNodes[i].childNodes[0]&&(e.inputEl=e.wrapper.childNodes[i].childNodes[0]),e.inputEl&&e.inputEl.value&&e.inputEl.value.startsWith(w+", ")&&(e.inputEl.value=e.inputEl.value.replace(w+", ",""))}var o=t(v),l=s&&e.checkedId!==s.toString();e.ids!==o&&(e.ids=o,l=!0),(e.checkedId instanceof Array&&s instanceof Array?e.checkedId.join()!==s.join():e.checkedId!==s)&&(e.checkedId=s,l=!0),l&&(e.instance=M.FormSelect.init(n,{classes:C,dropdownOptions:A}))},onchange:S},n.default("option",{value:"",disabled:!0,selected:!!O||void 0},w),0===V.length?v.map(function(e,t){var i;return n.default("option",{value:e.id,title:e.title||void 0,disabled:e.disabled?"true":void 0,"data-icon":e.img||void 0,selected:a(e.id,D,0===t&&O&&!w)},null==(i=e.label)?void 0:i.replace("&amp;","&"))}):V.map(function(e){return n.default("optgroup",{label:e},v.filter(function(t){return t.group===e}).map(function(e,t){var i;return n.default("option",{value:e.id,title:e.title||void 0,disabled:e.disabled?"true":void 0,"data-icon":e.img||void 0,selected:a(e.id,D,0===t&&O&&!w)},null==(i=e.label)?void 0:i.replace("&amp;","&"))}))})),n.default(f,{label:g,isMandatory:x}),b&&n.default(p,{helperText:b})])}}},e.SmallButton=x,e.SubmitButton=I,e.Switch=function(){var e={id:r()};return{view:function(t){var a=t.attrs,i=a.id||e.id,l=a.label,r=a.left,d=a.right,c=a.disabled,u=a.newRow,s=a.onchange,p=a.checked,m=a.isMandatory,v=a.className,h=void 0===v?"col s12":v,g=o(a,le),b=["input-field",u?"clear":"",h].filter(Boolean).join(" ").trim();return n.default("div",{className:b},[l?n.default(f,{label:l||"",id:i,isMandatory:m,className:"active"}):void 0,n.default(".switch",g,n.default("label",[r||"Off",n.default("input[type=checkbox]",{id:i,disabled:c,checked:p,onclick:s?function(e){e.target&&void 0!==e.target.checked&&s(e.target.checked)}:void 0}),n.default("span.lever"),d||"On"]))])}}},e.Tabs=function(){var e={},t=function(e,t){return t||e.replace(/ /g,"").toLowerCase()};return{view:function(a){var i=a.attrs,o=i.tabWidth,l=i.selectedTabId,r=i.tabs,d=i.className,c=i.style,u=i.duration,s=i.onShow,f=i.swipeable,p=i.responsiveThreshold,m=r.filter(function(e){return e.active}).shift(),v=l||(m?t(m.title,m.id):""),h=["fill"===o?"tabs-fixed-width":"",d].filter(Boolean).join(" ").trim();return n.default(".row",[n.default(".col.s12",n.default("ul.tabs",{className:h,style:c,oncreate:function(t){e.instance=M.Tabs.init(t.dom,{duration:u,onShow:s,responsiveThreshold:p,swipeable:f})},onupdate:function(){if(v){var e=document.getElementById("tab_"+v);e&&e.click()}},onremove:function(){return e.instance.destroy()}},r.map(function(e){var a=e.className,i=e.title,l=e.id,d=e.active,c=e.disabled,u=e.target,s=e.href,f=["fixed"===o?"col s"+Math.floor(12/r.length):"",a].filter(Boolean).join(" ").trim(),p=t(i,l);return n.default("li.tab",{className:f,disabled:c},n.default("a",{id:"tab_"+p,className:d?"active":"",target:u,href:s||"#"+p},i))}))),r.filter(function(e){return void 0===e.href}).map(function(e){var a=e.vnode,i=e.contentClass;return n.default(".col.s12",{id:t(e.title,e.id),className:i},a)})])}}},e.TextArea=W,e.TextInput=$,e.TimePicker=function(){var e={id:r()};return{view:function(t){var a=t.attrs,l=a.label,r=a.helperText,d=a.initialValue,c=a.newRow,u=a.className,s=void 0===u?"col s12":u,m=a.iconName,v=a.isMandatory,h=a.onchange,g=a.disabled,b=o(a,ie),y=e.id,w=new Date,x=h?function(){return e.tp&&h(e.tp.time||d||w.getHours()+":"+w.getMinutes())}:void 0,k=["input-field","timepicker",c?"clear":"",s].filter(Boolean).join(" ").trim();return n.default("div",{className:k,onremove:function(){return e.tp&&e.tp.destroy()}},[m?n.default("i.material-icons.prefix",m):"",n.default("input",i({},b,{type:"text",tabindex:0,id:y,disabled:g,value:d,oncreate:function(t){e.tp=M.Timepicker.init(t.dom,i({twelveHour:!1,showClearBtn:!0,defaultTime:d},b,{onCloseEnd:x}))}})),n.default(f,{label:l,id:y,isMandatory:v,isActive:d}),n.default(p,{helperText:r})])}}},e.Timeline=function(){var e=function(e){return e.getUTCDate()+"/"+(e.getUTCMonth()+1)+"/"+e.getUTCFullYear()},t=function(e){return c(e.getUTCHours())+":"+c(e.getUTCMinutes())};return{view:function(a){var o=a.attrs,l=o.onSelect,r=o.timeFormatter,d=void 0===r?t:r,c=o.dateFormatter,u=void 0===c?e:c;return n.default("ul.mm_timeline",o.items.map(function(e){return n.default(re,i({onSelect:l,dateFormatter:u,timeFormatter:d},e))}))}}},e.UrlInput=J,e.isNumeric=d,e.padLeft=c,e.uniqueId=r,e.uuid4=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})}});
-//# sourceMappingURL=index.umd.js.map
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mithril')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'mithril'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mithril-materialized"] = {}, global.m));
+})(this, (function (exports, m) { 'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    /**
+     * Create a unique ID
+     * @see https://stackoverflow.com/a/2117523/319711
+     *
+     * @returns id followed by 8 hexadecimal characters.
+     */
+    const uniqueId = () => {
+        // tslint:disable-next-line:no-bitwise
+        return 'idxxxxxxxx'.replace(/[x]/g, () => ((Math.random() * 16) | 0).toString(16));
+    };
+    /**
+     * Create a GUID
+     * @see https://stackoverflow.com/a/2117523/319711
+     *
+     * @returns RFC4122 version 4 compliant GUID
+     */
+    const uuid4 = () => {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            // tslint:disable-next-line:no-bitwise
+            const r = (Math.random() * 16) | 0;
+            // tslint:disable-next-line:no-bitwise
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    };
+    /** Check if a string or number is numeric. @see https://stackoverflow.com/a/9716488/319711 */
+    const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
+    /**
+     * Pad left, default width 2 with a '0'
+     *
+     * @see http://stackoverflow.com/a/10073788/319711
+     * @param {(string | number)} n
+     * @param {number} [width=2]
+     * @param {string} [z='0']
+     * @returns
+     */
+    const padLeft = (n, width = 2, z = '0') => String(n).padStart(width, z);
+    // Keep only essential dropdown positioning styles
+    const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = false) => {
+        if (!inputRef) {
+            return {
+                display: 'block',
+                opacity: 1,
+                position: 'absolute',
+                top: overlap ? 0 : '100%',
+                left: '0',
+                zIndex: 1000,
+                width: '100%',
+            };
+        }
+        const rect = inputRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        // Calculate dropdown height based on options
+        let estimatedHeight = 200; // Default fallback
+        const itemHeight = 52; // Standard height for dropdown items
+        if (options) {
+            const groupHeaderHeight = 52; // Height for group headers
+            // Count groups and total options
+            const groups = new Set();
+            let totalOptions = 0;
+            options
+                .filter((o) => !o.divider)
+                .forEach((option) => {
+                totalOptions++;
+                if (option.group) {
+                    groups.add(option.group);
+                }
+            });
+            // Calculate total height: options + group headers + padding
+            estimatedHeight = totalOptions * itemHeight + groups.size * groupHeaderHeight;
+        }
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // If there's not enough space below and more space above, position dropdown above
+        const shouldPositionAbove = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+        // Calculate available space and whether scrolling is needed
+        const availableSpace = shouldPositionAbove ? spaceAbove : spaceBelow;
+        // When positioning above, we need to consider the actual space from viewport top to input
+        let effectiveAvailableSpace = availableSpace;
+        if (shouldPositionAbove) {
+            effectiveAvailableSpace = rect.top - 10; // Space from viewport top to input, minus margin
+        }
+        const needsScrolling = estimatedHeight > effectiveAvailableSpace;
+        // Calculate the actual height the dropdown will take
+        const actualHeight = needsScrolling ? effectiveAvailableSpace : estimatedHeight;
+        // Calculate positioning when dropdown should appear above
+        let topOffset;
+        if (shouldPositionAbove) {
+            // Calculate how much space we actually have from top of viewport to top of input
+            const availableSpaceFromViewportTop = rect.top;
+            // If dropdown fits comfortably above input, use normal positioning
+            if (actualHeight <= availableSpaceFromViewportTop) {
+                topOffset = 12 - actualHeight + (isDropDown ? itemHeight : 0); // Bottom of dropdown aligns with top of input
+            }
+            else {
+                // If dropdown is too tall, position it at the very top of viewport
+                // This makes the dropdown use all available space from viewport top to input top
+                topOffset = -availableSpaceFromViewportTop + 5; // 5px margin from viewport top
+            }
+        }
+        else {
+            topOffset = overlap ? 0 : '100%';
+        }
+        const styles = {
+            display: 'block',
+            opacity: 1,
+            position: 'absolute',
+            top: typeof topOffset === 'number' ? `${topOffset}px` : topOffset,
+            left: '0',
+            zIndex: 1000,
+            width: `${rect.width}px`,
+        };
+        // Only add scrolling constraints when necessary
+        if (needsScrolling) {
+            styles.maxHeight = `${actualHeight}px`;
+            styles.overflowY = 'auto';
+        }
+        return styles;
+    };
+    /**
+     * Generate a range of numbers from a to and including b, i.e. [a, b]
+     * @example: console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]
+     */
+    const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
+
+    // import './styles/input.css';
+    const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
+    /** Simple label element, used for most components. */
+    const Label = () => {
+        return {
+            view: (_a) => {
+                var _b = _a.attrs, { label, id, isMandatory, isActive, className } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className"]);
+                return label
+                    ? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
+                    : undefined;
+            },
+        };
+    };
+    /** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
+    const HelperText = () => {
+        return {
+            view: ({ attrs: { helperText, dataError, dataSuccess, className } }) => {
+                return helperText || dataError || dataSuccess
+                    ? m('span.helper-text.left', { className, 'data-error': dataError, 'data-success': dataSuccess }, dataError ? m.trust(dataError) : dataSuccess ? m.trust(dataSuccess) : helperText ? m.trust(helperText) : '')
+                    : undefined;
+            },
+        };
+    };
+
+    /** Component to auto complete your text input - Pure Mithril implementation */
+    const Autocomplete = () => {
+        const state = {
+            id: uniqueId(),
+            isActive: false,
+            inputValue: '',
+            isOpen: false,
+            suggestions: [],
+            selectedIndex: -1,
+            inputElement: null,
+        };
+        const filterSuggestions = (input, data, limit, minLength) => {
+            if (!input || input.length < minLength) {
+                return [];
+            }
+            const filtered = Object.entries(data || {})
+                .filter(([key]) => key.toLowerCase().includes(input.toLowerCase()))
+                .map(([key, value]) => ({ key, value }))
+                .slice(0, limit);
+            return filtered;
+        };
+        const selectSuggestion = (suggestion, attrs) => {
+            state.inputValue = suggestion.key;
+            state.isOpen = false;
+            state.selectedIndex = -1;
+            if (attrs.onchange) {
+                attrs.onchange(suggestion.key);
+            }
+            if (attrs.onAutocomplete) {
+                attrs.onAutocomplete(suggestion.key);
+            }
+            // Force redraw to update label state
+            m.redraw();
+        };
+        const handleKeydown = (e, attrs) => {
+            if (!state.isOpen)
+                return;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    state.selectedIndex = Math.min(state.selectedIndex + 1, state.suggestions.length - 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    state.selectedIndex = Math.max(state.selectedIndex - 1, -1);
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (state.selectedIndex >= 0 && state.suggestions[state.selectedIndex]) {
+                        state.isOpen = false;
+                        selectSuggestion(state.suggestions[state.selectedIndex], attrs);
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.selectedIndex = -1;
+                    break;
+            }
+        };
+        const closeDropdown = (e) => {
+            const target = e.target;
+            const autocompleteWrapper = target.closest('.autocomplete-wrapper');
+            const dropdownContent = target.closest('.autocomplete-content');
+            // Close if clicking outside both the input wrapper and dropdown content
+            if (!autocompleteWrapper && !dropdownContent) {
+                state.isOpen = false;
+                state.selectedIndex = -1;
+            }
+        };
+        const getDropdownStyles = () => {
+            if (!state.inputElement) {
+                return {
+                    display: 'block',
+                    width: '100%',
+                    height: `${state.suggestions.length * 50}px`,
+                    transformOrigin: '0px 0px',
+                    opacity: state.isOpen ? 1 : 0,
+                    transform: 'scaleX(1) scaleY(1)',
+                };
+            }
+            const rect = state.inputElement.getBoundingClientRect();
+            const inputWidth = rect.width;
+            return {
+                display: 'block',
+                width: `${inputWidth}px`,
+                height: `${state.suggestions.length * 50}px`,
+                transformOrigin: '0px 0px',
+                opacity: state.isOpen ? 1 : 0,
+                transform: 'scaleX(1) scaleY(1)',
+                position: 'absolute',
+                top: '100%',
+                left: '0',
+                zIndex: 1000,
+            };
+        };
+        return {
+            oninit: ({ attrs }) => {
+                state.inputValue = attrs.initialValue || '';
+                document.addEventListener('click', closeDropdown);
+            },
+            onremove: () => {
+                document.removeEventListener('click', closeDropdown);
+            },
+            view: ({ attrs }) => {
+                const id = attrs.id || state.id;
+                const { label, helperText, onchange, newRow, className = 'col s12', style, iconName, isMandatory, data = {}, limit = Infinity, minLength = 1 } = attrs, params = __rest(attrs, ["label", "helperText", "onchange", "newRow", "className", "style", "iconName", "isMandatory", "data", "limit", "minLength"]);
+                const cn = newRow ? className + ' clear' : className;
+                // Update suggestions when input changes
+                state.suggestions = filterSuggestions(state.inputValue, data, limit, minLength);
+                // Check if there's a perfect match (exact key match, case-insensitive)
+                const hasExactMatch = state.inputValue.length >= minLength &&
+                    Object.keys(data).some((key) => key.toLowerCase() === state.inputValue.toLowerCase());
+                // Only open dropdown if there are suggestions and no perfect match
+                state.isOpen = state.suggestions.length > 0 && state.inputValue.length >= minLength && !hasExactMatch;
+                const replacer = new RegExp(`(${state.inputValue})`, 'i');
+                return m('.input-field.autocomplete-wrapper', {
+                    className: cn,
+                    style,
+                }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : '',
+                    m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: state.inputValue, oncreate: (vnode) => {
+                            state.inputElement = vnode.dom;
+                        }, oninput: (e) => {
+                            const target = e.target;
+                            state.inputValue = target.value;
+                            state.selectedIndex = -1;
+                            if (onchange) {
+                                onchange(target.value);
+                            }
+                        }, onkeydown: (e) => {
+                            handleKeydown(e, attrs);
+                            // Call original onkeydown if provided
+                            if (attrs.onkeydown) {
+                                attrs.onkeydown(e, state.inputValue);
+                            }
+                        }, onfocus: () => {
+                            state.isActive = true;
+                            if (state.inputValue.length >= minLength) {
+                                // Check for perfect match on focus too
+                                const hasExactMatch = Object.keys(data).some((key) => key.toLowerCase() === state.inputValue.toLowerCase());
+                                state.isOpen = state.suggestions.length > 0 && !hasExactMatch;
+                            }
+                        }, onblur: (e) => {
+                            state.isActive = false;
+                            // Delay closing to allow clicks on suggestions
+                            setTimeout(() => {
+                                if (!e.relatedTarget || !e.relatedTarget.closest('.autocomplete-content')) {
+                                    state.isOpen = false;
+                                    state.selectedIndex = -1;
+                                    m.redraw();
+                                }
+                            }, 150);
+                        } })),
+                    // Autocomplete dropdown
+                    state.isOpen &&
+                        m('ul.autocomplete-content.dropdown-content', {
+                            style: getDropdownStyles(),
+                        }, state.suggestions.map((suggestion, index) => m('li', {
+                            key: suggestion.key,
+                            class: state.selectedIndex === index ? 'active' : '',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                selectSuggestion(suggestion, attrs);
+                            },
+                            onmouseover: () => {
+                                state.selectedIndex = index;
+                                m.redraw();
+                            },
+                        }, [
+                            // Check if value contains image URL or icon
+                            suggestion.value && suggestion.value.includes('http')
+                                ? m('img', {
+                                    src: suggestion.value,
+                                    class: 'right circle',
+                                    onerror: (e) => {
+                                        // Hide image if it fails to load
+                                        e.target.style.display = 'none';
+                                    },
+                                })
+                                : suggestion.value && suggestion.value.startsWith('icon:')
+                                    ? m('i.material-icons', {
+                                        style: {
+                                            fontSize: '24px',
+                                            color: 'var(--md-grey-600)',
+                                        },
+                                    }, suggestion.value.replace('icon:', ''))
+                                    : null,
+                            m('span', suggestion.key
+                                ? m.trust(suggestion.key.replace(replacer, (i) => `<span class="highlight">${i}</span>`))
+                                : ''),
+                        ]))),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: state.isActive || state.inputValue.length > 0 || !!attrs.placeholder || !!attrs.initialValue,
+                    }),
+                    m(HelperText, { helperText }),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * A simple material icon, defined by its icon name.
+     *
+     * @example m(Icon, { className: 'small' }, 'create') renders a small 'create' icon
+     * @example m(Icon, { className: 'prefix' }, iconName) renders the icon as a prefix
+     */
+    const Icon = () => ({
+        view: (_a) => {
+            var _b = _a.attrs, { iconName } = _b, passThrough = __rest(_b, ["iconName"]);
+            return m('i.material-icons', passThrough, iconName);
+        },
+    });
+
+    /**
+     * A factory to create new buttons.
+     *
+     * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
+     */
+    const ButtonFactory = (element, defaultClassNames, type = '') => {
+        return () => {
+            return {
+                view: ({ attrs }) => {
+                    const { modalId, tooltip, tooltipPostion, iconName, iconClass, label, className, attr } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr"]);
+                    const cn = [modalId ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                        .filter(Boolean)
+                        .join(' ')
+                        .trim();
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalId ? `#${modalId}` : undefined, 'data-position': tooltip ? tooltipPostion || 'top' : undefined, 'data-tooltip': tooltip || undefined, type }), 
+                    // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
+                    //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
+                    // }${toAttributeString(attr)}`, {}
+                    iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                },
+            };
+        };
+    };
+    const Button = ButtonFactory('a', 'waves-effect waves-light btn', 'button');
+    const LargeButton = ButtonFactory('a', 'waves-effect waves-light btn-large', 'button');
+    const SmallButton = ButtonFactory('a', 'waves-effect waves-light btn-small', 'button');
+    const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'button');
+    const RoundIconButton = ButtonFactory('button', 'btn-floating btn-large waves-effect waves-light', 'button');
+    const SubmitButton = ButtonFactory('button', 'btn waves-effect waves-light', 'submit');
+
+    /**
+     * Materialize CSS Carousel component with dynamic positioning
+     * Port of the original MaterializeCSS carousel logic
+     */
+    const Carousel = () => {
+        // Default options based on original Materialize CSS
+        const defaults = {
+            duration: 200, // ms
+            dist: -100, // zoom scale
+            shift: 0, // spacing for center image
+            padding: 0, // Padding between non center items
+            numVisible: 5, // Number of visible items in carousel
+            fullWidth: false, // Change to full width styles
+            indicators: false, // Toggle indicators
+            noWrap: false, // Don't wrap around and cycle through items
+        };
+        const state = {
+            // Carousel state
+            hasMultipleSlides: false,
+            showIndicators: false,
+            noWrap: false,
+            pressed: false,
+            dragged: false,
+            verticalDragged: false,
+            offset: 0,
+            target: 0,
+            center: 0,
+            // Touch/drag state
+            reference: 0,
+            referenceY: 0,
+            velocity: 0,
+            amplitude: 0,
+            frame: 0,
+            timestamp: 0,
+            // Item measurements
+            itemWidth: 0,
+            itemHeight: 0,
+            dim: 1, // Make sure dim is non zero for divisions
+            // Animation
+            ticker: null,
+            scrollingTimeout: null};
+        // Utility functions
+        const xpos = (e) => {
+            // Touch event
+            if ('targetTouches' in e && e.targetTouches && e.targetTouches.length >= 1) {
+                return e.targetTouches[0].clientX;
+            }
+            // Mouse event
+            return e.clientX;
+        };
+        const ypos = (e) => {
+            // Touch event
+            if ('targetTouches' in e && e.targetTouches && e.targetTouches.length >= 1) {
+                return e.targetTouches[0].clientY;
+            }
+            // Mouse event
+            return e.clientY;
+        };
+        const wrap = (x, count) => {
+            return x >= count ? x % count : x < 0 ? wrap(count + (x % count), count) : x;
+        };
+        const track = () => {
+            const now = Date.now();
+            const elapsed = now - state.timestamp;
+            state.timestamp = now;
+            const delta = state.offset - state.frame;
+            state.frame = state.offset;
+            const v = (1000 * delta) / (1 + elapsed);
+            state.velocity = 0.8 * v + 0.2 * state.velocity;
+        };
+        const autoScroll = () => {
+            if (state.amplitude) {
+                const elapsed = Date.now() - state.timestamp;
+                const delta = state.amplitude * Math.exp(-elapsed / defaults.duration);
+                if (delta > 2 || delta < -2) {
+                    scroll(state.target - delta);
+                    requestAnimationFrame(autoScroll);
+                }
+                else {
+                    scroll(state.target);
+                }
+            }
+        };
+        const updateItemStyle = (el, opacity, zIndex, transform) => {
+            el.style.transform = transform;
+            el.style.zIndex = zIndex.toString();
+            el.style.opacity = opacity.toString();
+            el.style.visibility = 'visible';
+        };
+        const scroll = (x, attrs) => {
+            const carouselEl = document.querySelector('.carousel');
+            if (!carouselEl)
+                return;
+            // Track scrolling state
+            if (!carouselEl.classList.contains('scrolling')) {
+                carouselEl.classList.add('scrolling');
+            }
+            if (state.scrollingTimeout != null) {
+                window.clearTimeout(state.scrollingTimeout);
+            }
+            state.scrollingTimeout = window.setTimeout(() => {
+                carouselEl.classList.remove('scrolling');
+            }, defaults.duration);
+            // Start actual scroll
+            const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
+            const count = items.length;
+            if (count === 0)
+                return;
+            const lastCenter = state.center;
+            const numVisibleOffset = 1 / defaults.numVisible;
+            state.offset = typeof x === 'number' ? x : state.offset;
+            state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
+            const delta = state.offset - state.center * state.dim;
+            const dir = delta < 0 ? 1 : -1;
+            const tween = (-dir * delta * 2) / state.dim;
+            const half = count >> 1;
+            let alignment;
+            let centerTweenedOpacity;
+            if (defaults.fullWidth) {
+                alignment = 'translateX(0)';
+                centerTweenedOpacity = 1;
+            }
+            else {
+                alignment = `translateX(${(carouselEl.clientWidth - state.itemWidth) / 2}px) `;
+                alignment += `translateY(${(carouselEl.clientHeight - state.itemHeight) / 2}px)`;
+                centerTweenedOpacity = 1 - numVisibleOffset * tween;
+            }
+            // Set indicator active
+            if (state.showIndicators) {
+                const diff = state.center % count;
+                const indicators = carouselEl.querySelectorAll('.indicator-item');
+                indicators.forEach((indicator, index) => {
+                    indicator.classList.toggle('active', index === diff);
+                });
+            }
+            // Center item
+            if (!state.noWrap || (state.center >= 0 && state.center < count)) {
+                const el = items[wrap(state.center, count)];
+                // Add active class to center item
+                items.forEach((item) => item.classList.remove('active'));
+                el.classList.add('active');
+                const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * defaults.shift * tween}px) translateZ(${defaults.dist * tween}px)`;
+                updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+            }
+            // Side items
+            for (let i = 1; i <= half; ++i) {
+                let zTranslation;
+                let tweenedOpacity;
+                // Right side
+                if (defaults.fullWidth) {
+                    zTranslation = defaults.dist;
+                    tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+                }
+                else {
+                    zTranslation = defaults.dist * (i * 2 + tween * dir);
+                    tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+                }
+                if (!state.noWrap || state.center + i < count) {
+                    const el = items[wrap(state.center + i, count)];
+                    const transformString = `${alignment} translateX(${defaults.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    updateItemStyle(el, tweenedOpacity, -i, transformString);
+                }
+                // Left side
+                if (defaults.fullWidth) {
+                    zTranslation = defaults.dist;
+                    tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+                }
+                else {
+                    zTranslation = defaults.dist * (i * 2 - tween * dir);
+                    tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+                }
+                if (!state.noWrap || state.center - i >= 0) {
+                    const el = items[wrap(state.center - i, count)];
+                    const transformString = `${alignment} translateX(${-defaults.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                    updateItemStyle(el, tweenedOpacity, -i, transformString);
+                }
+            }
+            // onCycleTo callback
+            if (lastCenter !== state.center && attrs && attrs.onCycleTo) {
+                const currItem = items[wrap(state.center, count)];
+                if (currItem) {
+                    const itemIndex = Array.from(items).indexOf(currItem);
+                    attrs.onCycleTo(attrs.items[itemIndex], itemIndex, state.dragged);
+                }
+            }
+        };
+        const cycleTo = (n, callback, _attrs) => {
+            const items = document.querySelectorAll('.carousel-item');
+            const count = items.length;
+            if (count === 0)
+                return;
+            let diff = (state.center % count) - n;
+            // Account for wraparound
+            if (!state.noWrap) {
+                if (diff < 0) {
+                    if (Math.abs(diff + count) < Math.abs(diff)) {
+                        diff += count;
+                    }
+                }
+                else if (diff > 0) {
+                    if (Math.abs(diff - count) < diff) {
+                        diff -= count;
+                    }
+                }
+            }
+            state.target = state.dim * Math.round(state.offset / state.dim);
+            if (diff < 0) {
+                state.target += state.dim * Math.abs(diff);
+            }
+            else if (diff > 0) {
+                state.target -= state.dim * diff;
+            }
+            // Scroll
+            if (state.offset !== state.target) {
+                state.amplitude = state.target - state.offset;
+                state.timestamp = Date.now();
+                requestAnimationFrame(autoScroll);
+            }
+        };
+        // Event handlers
+        const handleCarouselTap = (e) => {
+            // Fixes firefox draggable image bug
+            if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
+                e.preventDefault();
+            }
+            state.pressed = true;
+            state.dragged = false;
+            state.verticalDragged = false;
+            state.reference = xpos(e);
+            state.referenceY = ypos(e);
+            state.velocity = state.amplitude = 0;
+            state.frame = state.offset;
+            state.timestamp = Date.now();
+            if (state.ticker)
+                clearInterval(state.ticker);
+            state.ticker = setInterval(track, 100);
+        };
+        const handleCarouselDrag = (e, attrs) => {
+            if (state.pressed) {
+                const x = xpos(e);
+                const y = ypos(e);
+                const delta = state.reference - x;
+                const deltaY = Math.abs(state.referenceY - y);
+                if (deltaY < 30 && !state.verticalDragged) {
+                    if (delta > 2 || delta < -2) {
+                        state.dragged = true;
+                        state.reference = x;
+                        scroll(state.offset + delta, attrs);
+                    }
+                }
+                else if (state.dragged) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return false;
+                }
+                else {
+                    state.verticalDragged = true;
+                }
+            }
+            if (state.dragged) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            return true;
+        };
+        const handleCarouselRelease = (e, _attrs) => {
+            if (state.pressed) {
+                state.pressed = false;
+            }
+            else {
+                return;
+            }
+            if (state.ticker)
+                clearInterval(state.ticker);
+            state.target = state.offset;
+            if (state.velocity > 10 || state.velocity < -10) {
+                state.amplitude = 0.9 * state.velocity;
+                state.target = state.offset + state.amplitude;
+            }
+            state.target = Math.round(state.target / state.dim) * state.dim;
+            // No wrap of items
+            if (state.noWrap) {
+                const items = document.querySelectorAll('.carousel-item');
+                if (state.target >= state.dim * (items.length - 1)) {
+                    state.target = state.dim * (items.length - 1);
+                }
+                else if (state.target < 0) {
+                    state.target = 0;
+                }
+            }
+            state.amplitude = state.target - state.offset;
+            state.timestamp = Date.now();
+            requestAnimationFrame(autoScroll);
+            if (state.dragged) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            return false;
+        };
+        const handleCarouselClick = (e, attrs) => {
+            if (state.dragged) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+            else if (!defaults.fullWidth) {
+                const target = e.target.closest('.carousel-item');
+                if (target) {
+                    const items = Array.from(document.querySelectorAll('.carousel-item'));
+                    const clickedIndex = items.indexOf(target);
+                    const diff = wrap(state.center, items.length) - clickedIndex;
+                    if (diff !== 0) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                    cycleTo(clickedIndex);
+                }
+            }
+            return true;
+        };
+        const handleIndicatorClick = (e, attrs) => {
+            e.stopPropagation();
+            const indicator = e.target.closest('.indicator-item');
+            if (indicator) {
+                const indicators = Array.from(document.querySelectorAll('.indicator-item'));
+                const index = indicators.indexOf(indicator);
+                cycleTo(index);
+            }
+        };
+        return {
+            view: ({ attrs }) => {
+                const { items, indicators = false } = attrs;
+                if (!items || items.length === 0)
+                    return undefined;
+                // Merge options
+                Object.assign(defaults, attrs);
+                const supportTouch = typeof window.ontouchstart !== 'undefined';
+                return m('.carousel', {
+                    oncreate: ({ attrs, dom }) => {
+                        const carouselEl = dom;
+                        const items = carouselEl.querySelectorAll('.carousel-item');
+                        state.hasMultipleSlides = items.length > 1;
+                        state.showIndicators = defaults.indicators && state.hasMultipleSlides;
+                        state.noWrap = defaults.noWrap || !state.hasMultipleSlides;
+                        if (items.length > 0) {
+                            const firstItem = items[0];
+                            state.itemWidth = firstItem.offsetWidth;
+                            state.itemHeight = firstItem.offsetHeight;
+                            state.dim = state.itemWidth * 2 + defaults.padding || 1;
+                        }
+                        // Cap numVisible at count
+                        defaults.numVisible = Math.min(items.length, defaults.numVisible);
+                        // Initial scroll
+                        scroll(state.offset, attrs);
+                    },
+                    onmousedown: (e) => handleCarouselTap(e),
+                    onmousemove: (e) => handleCarouselDrag(e, attrs),
+                    onmouseup: (e) => handleCarouselRelease(e),
+                    onmouseleave: (e) => handleCarouselRelease(e),
+                    onclick: (e) => handleCarouselClick(e),
+                    ontouchstart: supportTouch ? (e) => handleCarouselTap(e) : undefined,
+                    ontouchmove: supportTouch ? (e) => handleCarouselDrag(e, attrs) : undefined,
+                    ontouchend: supportTouch ? (e) => handleCarouselRelease(e) : undefined,
+                }, [
+                    // Carousel items
+                    ...items.map((item) => m('a.carousel-item', {
+                        // key: index,
+                        href: item.href,
+                        style: 'visibility: hidden;', // Initially hidden, will be shown by scroll
+                    }, m('img', { src: item.src, alt: item.alt }))),
+                    // Indicators
+                    indicators &&
+                        items.length > 1 &&
+                        m('ul.indicators', items.map((_, index) => m('li.indicator-item', {
+                            key: `indicator-${index}`,
+                            className: index === 0 ? 'active' : '',
+                            onclick: (e) => handleIndicatorClick(e),
+                        }))),
+                ]);
+            },
+        };
+    };
+
+    const iconPaths = {
+        caret: [
+            'M7 10l5 5 5-5z', // arrow
+            'M0 0h24v24H0z', // background
+        ],
+        close: [
+            'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
+            'M0 0h24v24H0z',
+        ],
+    };
+    const MaterialIcon = () => {
+        return {
+            view: ({ attrs }) => {
+                var _a;
+                const { name, direction = 'down', style } = attrs, props = __rest(attrs, ["name", "direction", "style"]);
+                const rotationMap = {
+                    down: 0,
+                    up: 180,
+                    left: -90,
+                    right: 90,
+                };
+                const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
+                const transform = rotation ? `rotate(${rotation}deg)` : undefined;
+                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '1lh', width: '24', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
+                    d,
+                    fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
+                })));
+            },
+        };
+    };
+
+    const Chips = () => {
+        const state = {
+            chipsData: [],
+            selectedChip: null,
+            focused: false,
+            inputValue: '',
+            inputId: uniqueId(),
+            autocompleteItems: [],
+            selectedAutocompleteIndex: -1,
+            showAutocomplete: false,
+        };
+        let currentVnode = null;
+        const processAutocompleteData = (data) => {
+            if (Array.isArray(data)) {
+                return data.map((item) => {
+                    if (typeof item === 'string') {
+                        return { tag: item };
+                    }
+                    return item;
+                });
+            }
+            return Object.entries(data).map(([text, value]) => ({
+                tag: text,
+                value: value || text,
+            }));
+        };
+        const updateAutocomplete = () => {
+            var _a;
+            if (!((_a = currentVnode === null || currentVnode === void 0 ? void 0 : currentVnode.attrs.autocompleteOptions) === null || _a === void 0 ? void 0 : _a.data)) {
+                state.autocompleteItems = [];
+                return;
+            }
+            const { data, minLength = 1 } = currentVnode.attrs.autocompleteOptions;
+            const input = state.inputValue.toLowerCase();
+            if (input.length < minLength) {
+                state.autocompleteItems = [];
+                state.showAutocomplete = false;
+                return;
+            }
+            const allOptions = processAutocompleteData(data);
+            const filtered = allOptions.filter((option) => option.tag.toLowerCase().includes(input));
+            const limit = currentVnode.attrs.autocompleteOptions.limit || Infinity;
+            state.autocompleteItems = filtered.slice(0, limit);
+            state.showAutocomplete = state.autocompleteItems.length > 0;
+            state.selectedAutocompleteIndex = -1;
+        };
+        const selectAutocompleteItem = (item) => {
+            addChip({
+                tag: item.tag,
+                image: item.image,
+                alt: item.alt, // Preserve alt text when converting to chip
+            });
+            state.inputValue = '';
+            state.showAutocomplete = false;
+            state.selectedAutocompleteIndex = -1;
+        };
+        const isValid = (chip, currentChips) => {
+            if (!chip.tag || chip.tag.trim() === '')
+                return false;
+            return !currentChips.some((c) => c.tag === chip.tag);
+        };
+        const addChip = (chip) => {
+            if (!currentVnode)
+                return;
+            const { limit = Infinity, onChipAdd, onchange } = currentVnode.attrs;
+            if (!isValid(chip, state.chipsData) || state.chipsData.length >= limit) {
+                return;
+            }
+            state.chipsData = [...state.chipsData, chip];
+            state.inputValue = '';
+            if (onChipAdd)
+                onChipAdd(chip);
+            if (onchange)
+                onchange(state.chipsData);
+        };
+        const deleteChip = (index) => {
+            if (!currentVnode)
+                return;
+            const { onChipDelete, onchange } = currentVnode.attrs;
+            const chip = state.chipsData[index];
+            state.chipsData = state.chipsData.filter((_, i) => i !== index);
+            state.selectedChip = null;
+            if (onChipDelete)
+                onChipDelete(chip);
+            if (onchange)
+                onchange(state.chipsData);
+        };
+        const selectChip = (index) => {
+            if (!currentVnode)
+                return;
+            const { onChipSelect } = currentVnode.attrs;
+            state.selectedChip = index;
+            if (onChipSelect && state.chipsData[index]) {
+                onChipSelect(state.chipsData[index]);
+            }
+        };
+        const handleKeydown = (e) => {
+            const target = e.target;
+            if (state.showAutocomplete) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    state.selectedAutocompleteIndex = Math.min(state.selectedAutocompleteIndex + 1, state.autocompleteItems.length - 1);
+                    const selectedItem = currentVnode === null || currentVnode === void 0 ? void 0 : currentVnode.dom.querySelector('.autocomplete-item.selected');
+                    if (selectedItem) {
+                        selectedItem.scrollIntoView({ block: 'nearest' });
+                    }
+                    return;
+                }
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    state.selectedAutocompleteIndex = Math.max(state.selectedAutocompleteIndex - 1, -1);
+                    const selectedItem = currentVnode === null || currentVnode === void 0 ? void 0 : currentVnode.dom.querySelector('.autocomplete-item.selected');
+                    if (selectedItem) {
+                        selectedItem.scrollIntoView({ block: 'nearest' });
+                    }
+                    return;
+                }
+                if (e.key === 'Enter' && state.selectedAutocompleteIndex >= 0) {
+                    e.preventDefault();
+                    selectAutocompleteItem(state.autocompleteItems[state.selectedAutocompleteIndex]);
+                    return;
+                }
+            }
+            if (e.key === 'Enter' && target.value.trim()) {
+                e.preventDefault();
+                addChip({ tag: target.value.trim() });
+            }
+            else if (e.key === 'Backspace' && !target.value && state.chipsData.length > 0) {
+                e.preventDefault();
+                // Delete the last chip immediately when backspace is pressed in an empty input
+                deleteChip(state.chipsData.length - 1);
+            }
+            else if (e.key === 'ArrowLeft' && !target.value && state.chipsData.length) {
+                e.preventDefault();
+                selectChip(state.chipsData.length - 1);
+            }
+        };
+        const handleChipKeydown = (e, index) => {
+            if (e.key === 'Backspace' || e.key === 'Delete') {
+                e.preventDefault();
+                deleteChip(index);
+                const newIndex = Math.max(index - 1, 0);
+                if (state.chipsData.length)
+                    selectChip(newIndex);
+            }
+            else if (e.key === 'ArrowLeft' && index > 0) {
+                selectChip(index - 1);
+            }
+            else if (e.key === 'ArrowRight') {
+                if (index < state.chipsData.length - 1) {
+                    selectChip(index + 1);
+                }
+                else {
+                    const input = currentVnode === null || currentVnode === void 0 ? void 0 : currentVnode.dom.querySelector('.chips-input');
+                    if (input)
+                        input.focus();
+                }
+            }
+        };
+        return {
+            oninit: ({ attrs }) => {
+                state.chipsData = attrs.data || [];
+            },
+            oncreate: (vnode) => {
+                currentVnode = vnode;
+            },
+            onremove: () => {
+                currentVnode = null;
+            },
+            view: ({ attrs }) => {
+                const { id, required, isMandatory = required, className = 'col s12', label, helperText, placeholder, secondaryPlaceholder, } = attrs;
+                const getPlaceholder = () => {
+                    if (!state.chipsData.length && placeholder) {
+                        return placeholder;
+                    }
+                    if (state.chipsData.length && secondaryPlaceholder) {
+                        return secondaryPlaceholder;
+                    }
+                    return '';
+                };
+                return m('.input-field', { id, className }, [
+                    m('.chips.chips-initial', {
+                        class: `chips-container${state.focused ? ' focused' : ''}${placeholder ? ' chips-placeholder' : ''}`,
+                    }, [
+                        // Chips
+                        state.chipsData.map((chip, index) => m('.chip', {
+                            key: `${chip.tag}-${index}`,
+                            tabindex: 0,
+                            class: state.selectedChip === index ? 'selected' : undefined,
+                            onkeydown: (e) => handleChipKeydown(e, index),
+                        }, [
+                            chip.image &&
+                                m('img', {
+                                    src: chip.image,
+                                    alt: chip.alt || chip.tag,
+                                }),
+                            chip.tag,
+                            m(MaterialIcon, {
+                                name: 'close',
+                                className: 'close',
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    deleteChip(index);
+                                },
+                            }),
+                        ])),
+                        // Input
+                        m('input[type=text].chips-input.input.browser-default', {
+                            id: state.inputId,
+                            title: 'label',
+                            value: state.inputValue,
+                            placeholder: getPlaceholder(),
+                            oninput: (e) => {
+                                state.inputValue = e.target.value;
+                                updateAutocomplete();
+                            },
+                            onfocus: () => {
+                                state.focused = true;
+                                state.selectedChip = null;
+                                updateAutocomplete();
+                            },
+                            onblur: () => {
+                                state.focused = false;
+                                setTimeout(() => {
+                                    state.showAutocomplete = false;
+                                    state.selectedChip = null;
+                                }, 150);
+                            },
+                            onkeydown: handleKeydown,
+                        }),
+                        state.showAutocomplete &&
+                            m('ul.autocomplete-content.dropdown-content', {
+                                style: {
+                                    display: 'block',
+                                    opacity: 1,
+                                    transform: 'scaleX(1) scaleY(1)',
+                                    position: 'absolute',
+                                    width: '100%',
+                                    left: 0,
+                                    top: '100%',
+                                    maxHeight: '200px',
+                                    overflow: 'auto',
+                                    zIndex: 1000,
+                                    backgroundColor: '#fff',
+                                    boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                                },
+                            }, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
+                                key: item.tag,
+                                class: state.selectedAutocompleteIndex === index ? 'selected' : '',
+                                style: {
+                                    padding: '12px 16px',
+                                    cursor: 'pointer',
+                                    backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
+                                },
+                                onmousedown: (e) => {
+                                    e.preventDefault();
+                                    selectAutocompleteItem(item);
+                                },
+                                onmouseover: () => {
+                                    state.selectedAutocompleteIndex = index;
+                                },
+                            }, [
+                                item.image &&
+                                    m('img.autocomplete-item-image', {
+                                        src: item.image,
+                                        alt: item.alt || item.tag,
+                                        style: {
+                                            width: '24px',
+                                            height: '24px',
+                                            marginRight: '8px',
+                                            verticalAlign: 'middle',
+                                        },
+                                    }),
+                                m('span.autocomplete-item-text', item.tag),
+                            ]))),
+                    ]),
+                    label &&
+                        m(Label, {
+                            label,
+                            id: state.inputId,
+                            isMandatory,
+                            isActive: state.focused || state.chipsData.length || placeholder ? true : false,
+                        }),
+                    helperText && m(HelperText, { helperText }),
+                ]);
+            },
+        };
+    };
+
+    /** A simple code block without syntax high-lighting */
+    const CodeBlock = () => ({
+        view: ({ attrs }) => {
+            const { newRow, code, language, className } = attrs, params = __rest(attrs, ["newRow", "code", "language", "className"]);
+            const lang = language || 'lang-TypeScript';
+            const label = lang.replace('lang-', '');
+            const cb = code instanceof Array ? code.join('\n') : code;
+            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim();
+            return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
+                m('div', m('label', label)),
+                m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
+            ]);
+        },
+    });
+
+    const CollapsibleItem = () => {
+        return {
+            view: ({ attrs: { header, body, iconName, isActive, onToggle } }) => {
+                return m('li', { className: isActive ? 'active' : '' }, [
+                    header || iconName
+                        ? m('.collapsible-header', {
+                            onclick: onToggle,
+                            style: {
+                                cursor: 'pointer',
+                                padding: '1rem',
+                                backgroundColor: '#fff',
+                                borderBottom: '1px solid #ddd',
+                                display: 'flex',
+                                alignItems: 'center',
+                                transition: 'background-color 0.2s ease',
+                            },
+                            onmouseover: (e) => {
+                                e.target.style.backgroundColor = '#f5f5f5';
+                            },
+                            onmouseleave: (e) => {
+                                e.target.style.backgroundColor = '#fff';
+                            },
+                        }, [
+                            iconName ? m('i.material-icons', { style: { marginRight: '1rem' } }, iconName) : undefined,
+                            header ? (typeof header === 'string' ? m('span', header) : header) : undefined,
+                        ])
+                        : undefined,
+                    m('.collapsible-body', {
+                        style: {
+                            display: isActive ? 'block' : 'none',
+                            transition: 'display 0.3s ease',
+                        },
+                    }, [
+                        m('.collapsible-body-content', {
+                            style: { padding: '2rem' },
+                        }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
+                    ]),
+                ]);
+            },
+        };
+    };
+    /**
+     * Creates a collabsible or accordion component with pure CSS/Mithril implementation.
+     * No MaterializeCSS JavaScript dependencies.
+     */
+    const Collapsible = () => {
+        const state = {
+            activeItems: new Set(),
+        };
+        return {
+            oninit: ({ attrs }) => {
+                // Initialize active items from the items array
+                attrs.items.forEach((item, index) => {
+                    if (item.active) {
+                        state.activeItems.add(index);
+                    }
+                });
+            },
+            view: ({ attrs }) => {
+                const { items, accordion = true, class: c, className, style, id } = attrs;
+                const toggleItem = (index) => {
+                    if (accordion) {
+                        // Accordion mode: only one item can be active
+                        if (state.activeItems.has(index)) {
+                            state.activeItems.clear();
+                        }
+                        else {
+                            state.activeItems.clear();
+                            state.activeItems.add(index);
+                        }
+                    }
+                    else {
+                        // Expandable mode: multiple items can be active
+                        if (state.activeItems.has(index)) {
+                            state.activeItems.delete(index);
+                        }
+                        else {
+                            state.activeItems.add(index);
+                        }
+                    }
+                };
+                return items && items.length > 0
+                    ? m('ul.collapsible', {
+                        class: c || className,
+                        style: Object.assign({ border: '1px solid #ddd', borderRadius: '2px', margin: '0.5rem 0 1rem 0' }, style),
+                        id,
+                    }, items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) }))))
+                    : undefined;
+            },
+        };
+    };
+
+    exports.CollectionMode = void 0;
+    (function (CollectionMode) {
+        CollectionMode[CollectionMode["BASIC"] = 0] = "BASIC";
+        CollectionMode[CollectionMode["LINKS"] = 1] = "LINKS";
+        CollectionMode[CollectionMode["AVATAR"] = 2] = "AVATAR";
+    })(exports.CollectionMode || (exports.CollectionMode = {}));
+    const isNonLocalRoute = (url) => url && /https?:\/\//.test(url);
+    const SecondaryContent = () => {
+        return {
+            view: ({ attrs }) => {
+                const { href, iconName = 'send', onclick, style = { cursor: 'pointer' } } = attrs;
+                const props = {
+                    href,
+                    style,
+                    className: 'secondary-content',
+                    onclick: onclick ? () => onclick(attrs) : undefined,
+                };
+                return isNonLocalRoute(href) || !href
+                    ? m('a[target=_]', props, m(Icon, { iconName }))
+                    : m(m.route.Link, props, m(Icon, { iconName }));
+            },
+        };
+    };
+    const avatarIsImage = (avatar = '') => /\./.test(avatar);
+    const ListItem = () => {
+        return {
+            view: ({ attrs: { item, mode } }) => {
+                const { title, content = '', active, iconName, avatar, className, onclick } = item;
+                return mode === exports.CollectionMode.AVATAR
+                    ? m('li.collection-item.avatar', {
+                        className: active ? 'active' : '',
+                        onclick: onclick ? () => onclick(item) : undefined,
+                    }, [
+                        avatarIsImage(avatar)
+                            ? m('img.circle', { src: avatar })
+                            : m('i.material-icons.circle', { className }, avatar),
+                        m('span.title', title),
+                        m('p', m.trust(content)),
+                        m(SecondaryContent, item),
+                    ])
+                    : m('li.collection-item', {
+                        className: active ? 'active' : '',
+                    }, iconName ? m('div', [title, m(SecondaryContent, item)]) : title);
+            },
+        };
+    };
+    const BasicCollection = () => {
+        return {
+            view: (_a) => {
+                var _b = _a.attrs, { header, items, mode = exports.CollectionMode.BASIC } = _b, params = __rest(_b, ["header", "items", "mode"]);
+                const collectionItems = items.map((item) => m(ListItem, { key: item.id, item, mode }));
+                return header
+                    ? m('ul.collection.with-header', params, [m('li.collection-header', m('h4', header)), collectionItems])
+                    : m('ul.collection', params, collectionItems);
+            },
+        };
+    };
+    const AnchorItem = () => {
+        return {
+            view: ({ attrs: { item } }) => {
+                const { title, active, href } = item, params = __rest(item, ["title", "active", "href"]);
+                const props = Object.assign(Object.assign({}, params), { className: `collection-item ${active ? 'active' : ''}`, href });
+                return isNonLocalRoute(href) || !href
+                    ? m('a[target=_]', props, title)
+                    : m(m.route.Link, props, title);
+            },
+        };
+    };
+    const LinksCollection = () => {
+        return {
+            view: (_a) => {
+                var _b = _a.attrs, { items, header } = _b, params = __rest(_b, ["items", "header"]);
+                return header
+                    ? m('.collection.with-header', params, [
+                        m('.collection-header', m('h4', header)),
+                        items.map((item) => m(AnchorItem, { key: item.id, item })),
+                    ])
+                    : m('.collection', params, items.map((item) => m(AnchorItem, { key: item.id, item })));
+            },
+        };
+    };
+    /**
+     * Creates a Collection of items, optionally containing links, headers, secondary content or avatars.
+     * @see https://materializecss.com/collections.html
+     */
+    const Collection = () => {
+        return {
+            view: (_a) => {
+                var _b = _a.attrs, { items, header, mode = exports.CollectionMode.BASIC } = _b, params = __rest(_b, ["items", "header", "mode"]);
+                return header || (items && items.length > 0)
+                    ? mode === exports.CollectionMode.LINKS
+                        ? m(LinksCollection, Object.assign({ header, items }, params))
+                        : m(BasicCollection, Object.assign({ header, items, mode }, params))
+                    : undefined;
+            },
+        };
+    };
+
+    /** Pure TypeScript Dropdown component - no Materialize dependencies */
+    const Dropdown = () => {
+        const state = {
+            isOpen: false,
+            initialValue: undefined,
+            id: '',
+            focusedIndex: -1,
+            inputRef: null,
+            dropdownRef: null,
+        };
+        const handleKeyDown = (e, items, onchange) => {
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    else {
+                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (state.isOpen) {
+                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
+                        const selectedItem = availableItems[state.focusedIndex];
+                        const value = (selectedItem.id || selectedItem.label);
+                        state.initialValue = value;
+                        state.isOpen = false;
+                        state.focusedIndex = -1;
+                        if (onchange)
+                            onchange(value);
+                    }
+                    else if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    break;
+            }
+        };
+        return {
+            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
+                state.id = id;
+                state.initialValue = initialValue || checkedId;
+                // Mithril will handle click events through the component structure
+            },
+            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
+                const { initialValue } = state;
+                const selectedItem = initialValue
+                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+                    : undefined;
+                const title = selectedItem ? selectedItem.label : label || 'Select';
+                const availableItems = items.filter((item) => !item.divider && !item.disabled);
+                return m('.dropdown-wrapper.input-field', { className, key, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                    m(HelperText, { helperText }),
+                    m('.select-wrapper', {
+                        onclick: disabled
+                            ? undefined
+                            : () => {
+                                state.isOpen = !state.isOpen;
+                                state.focusedIndex = state.isOpen ? 0 : -1;
+                            },
+                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                        tabindex: disabled ? -1 : 0,
+                        'aria-expanded': state.isOpen ? 'true' : 'false',
+                        'aria-haspopup': 'listbox',
+                        role: 'combobox',
+                    }, [
+                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                            id: state.id,
+                            value: title,
+                            oncreate: ({ dom }) => {
+                                state.inputRef = dom;
+                            },
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (!disabled) {
+                                    state.isOpen = !state.isOpen;
+                                    state.focusedIndex = state.isOpen ? 0 : -1;
+                                }
+                            },
+                        }),
+                        // Dropdown Menu using Select component's positioning logic
+                        state.isOpen &&
+                            m('ul.dropdown-content.select-dropdown', {
+                                tabindex: 0,
+                                role: 'listbox',
+                                'aria-labelledby': state.id,
+                                oncreate: ({ dom }) => {
+                                    state.dropdownRef = dom;
+                                },
+                                onremove: () => {
+                                    state.dropdownRef = null;
+                                },
+                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
+                                    // Convert dropdown items to format expected by getDropdownStyles
+                                    group: undefined }))), true),
+                            }, items.map((item, index) => {
+                                if (item.divider) {
+                                    return m('li.divider', {
+                                        key: `divider-${index}`,
+                                    });
+                                }
+                                const itemIndex = availableItems.indexOf(item);
+                                const isFocused = itemIndex === state.focusedIndex;
+                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
+                                        item.disabled ? 'disabled' : '',
+                                        isFocused ? 'focused' : '',
+                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' ') }, (item.disabled
+                                    ? {}
+                                    : {
+                                        onclick: (e) => {
+                                            e.stopPropagation();
+                                            const value = (item.id || item.label);
+                                            state.initialValue = value;
+                                            state.isOpen = false;
+                                            state.focusedIndex = -1;
+                                            if (onchange)
+                                                onchange(value);
+                                        },
+                                    })), m('span', {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: '14px 16px',
+                                    },
+                                }, [
+                                    item.iconName
+                                        ? m('i.material-icons', {
+                                            style: { marginRight: '32px' },
+                                        }, item.iconName)
+                                        : undefined,
+                                    item.label,
+                                ]));
+                            })),
+                        m(MaterialIcon, {
+                            name: 'caret',
+                            direction: 'down',
+                        }),
+                    ]),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Floating Action Button
+     */
+    const FloatingActionButton = () => {
+        const state = {
+            isOpen: false,
+        };
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest('.fixed-action-btn')) {
+                state.isOpen = false;
+            }
+        };
+        return {
+            oncreate: () => {
+                document.addEventListener('click', handleClickOutside);
+            },
+            onremove: () => {
+                document.removeEventListener('click', handleClickOutside);
+            },
+            view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
+                ? 'position: absolute; display: inline-block; left: 24px;'
+                : position === 'right' || position === 'inline-right'
+                    ? 'position: absolute; display: inline-block; right: 24px;'
+                    : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
+                const fabClasses = [
+                    'fixed-action-btn',
+                    direction ? `direction-${direction}` : '',
+                    state.isOpen ? 'active' : '',
+                    // hoverEnabled ? 'hover-enabled' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                return m('div', {
+                    style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
+                }, m(`.${fabClasses}`, {
+                    style,
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        if (buttons && buttons.length > 0) {
+                            state.isOpen = !state.isOpen;
+                        }
+                    },
+                    onmouseover: hoverEnabled
+                        ? () => {
+                            if (buttons && buttons.length > 0) {
+                                state.isOpen = true;
+                            }
+                        }
+                        : undefined,
+                    onmouseleave: hoverEnabled
+                        ? () => {
+                            state.isOpen = false;
+                        }
+                        : undefined,
+                }, [
+                    m('a.btn-floating.btn-large', {
+                        className,
+                    }, m('i.material-icons', { className: iconClass }, iconName)),
+                    buttons &&
+                        buttons.length > 0 &&
+                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                            style: {
+                                opacity: state.isOpen ? '1' : '0',
+                                transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
+                                transition: `all 0.3s ease ${index * 40}ms`,
+                            },
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                if (button.onClick)
+                                    button.onClick(e);
+                            },
+                        }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
+                ]));
+            },
+        };
+    };
+
+    /** Character counter component that tracks text length against maxLength */
+    const CharacterCounter = () => {
+        return {
+            view: ({ attrs }) => {
+                const { currentLength, maxLength, show } = attrs;
+                if (!show)
+                    return null;
+                const isOverLimit = currentLength > maxLength;
+                return m('span.character-counter', {
+                    style: {
+                        color: isOverLimit ? '#F44336' : '#9e9e9e',
+                        fontSize: '12px',
+                        display: 'block',
+                        textAlign: 'right',
+                        marginTop: '8px',
+                    },
+                }, `${currentLength}/${maxLength}`);
+            },
+        };
+    };
+    /** Create a TextArea */
+    const TextArea = () => {
+        const state = {
+            id: uniqueId(),
+            currentLength: 0,
+            hasInteracted: false,
+            height: undefined,
+            active: false,
+            textarea: undefined,
+        };
+        const updateHeight = (textarea) => {
+            textarea.style.height = 'auto';
+            const newHeight = textarea.scrollHeight + 'px';
+            state.height = textarea.value.length === 0 ? undefined : newHeight;
+        };
+        return {
+            onremove: () => {
+            },
+            view: ({ attrs }) => {
+                var _a;
+                const { className = 'col s12', helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
+                // const attributes = toAttrs(params);
+                return m('.input-field', { className, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : '',
+                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, style: {
+                            height: state.height,
+                        }, oncreate: ({ dom }) => {
+                            const textarea = (state.textarea = dom);
+                            // Set initial value and height if provided
+                            if (initialValue !== undefined) {
+                                textarea.value = String(initialValue);
+                                updateHeight(textarea);
+                                // } else {
+                                // updateHeight(textarea);
+                            }
+                            // Update character count state for counter component
+                            if (maxLength) {
+                                state.currentLength = textarea.value.length; // Initial count
+                                m.redraw();
+                            }
+                        }, onupdate: ({ dom }) => {
+                            const textarea = dom;
+                            if (state.height)
+                                textarea.style.height = state.height;
+                        }, onfocus: () => {
+                            state.active = true;
+                        }, oninput: (e) => {
+                            state.active = true;
+                            state.hasInteracted = false;
+                            const target = e.target;
+                            // Update height for auto-resize
+                            updateHeight(target);
+                            // Update character count
+                            if (maxLength) {
+                                state.currentLength = target.value.length;
+                                state.hasInteracted = target.value.length > 0;
+                            }
+                            // Call onchange handler
+                            if (oninput) {
+                                oninput(target.value);
+                            }
+                        }, onblur: (e) => {
+                            state.active = false;
+                            // const target = e.target as HTMLTextAreaElement;
+                            state.hasInteracted = true;
+                            // Call original onblur if provided
+                            if (onblur) {
+                                onblur(e);
+                            }
+                            if (onchange && state.textarea) {
+                                onchange(state.textarea.value);
+                            }
+                        }, value: initialValue, onkeyup: onkeyup
+                            ? (ev) => {
+                                onkeyup(ev, ev.target.value);
+                            }
+                            : undefined, onkeydown: onkeydown
+                            ? (ev) => {
+                                onkeydown(ev, ev.target.value);
+                            }
+                            : undefined, onkeypress: onkeypress
+                            ? (ev) => {
+                                onkeypress(ev, ev.target.value);
+                            }
+                            : undefined })),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || initialValue || placeholder || state.active,
+                    }),
+                    m(HelperText, {
+                        helperText,
+                        dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                        dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    }),
+                    maxLength
+                        ? m(CharacterCounter, {
+                            currentLength: state.currentLength,
+                            maxLength,
+                            show: state.currentLength > 0,
+                        })
+                        : undefined,
+                ]);
+            },
+        };
+    };
+    /** Default component for all kinds of input fields. */
+    const InputField = (type, defaultClass = '') => () => {
+        const state = {
+            id: uniqueId(),
+            currentLength: 0,
+            hasInteracted: false,
+            isValid: true,
+            active: false,
+            inputElement: null,
+        };
+        // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
+        // let lengthUpdateHandler: (() => void) | null = null;
+        // let inputElement: HTMLInputElement | null = null;
+        const getValue = (target) => {
+            const val = target.value;
+            return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
+        };
+        const setValidity = (target, validationResult) => {
+            if (typeof validationResult === 'boolean') {
+                target.setCustomValidity(validationResult ? '' : 'Custom validation failed');
+            }
+            else {
+                target.setCustomValidity(validationResult);
+            }
+        };
+        const focus = ({ autofocus }) => autofocus ? (typeof autofocus === 'boolean' ? autofocus : autofocus()) : false;
+        const lengthUpdateHandler = () => {
+            var _a;
+            const length = (_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value.length;
+            if (length) {
+                state.currentLength = length;
+                state.hasInteracted = length > 0;
+            }
+        };
+        return {
+            view: ({ attrs }) => {
+                var _a;
+                const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
+                // const attributes = toAttrs(params);
+                const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+                return m('.input-field', { className: cn, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
+                        // attributes,
+                        oncreate: ({ dom }) => {
+                            const input = (state.inputElement = dom);
+                            if (focus(attrs)) {
+                                input.focus();
+                            }
+                            // Set initial value if provided
+                            if (initialValue !== undefined) {
+                                input.value = String(initialValue);
+                            }
+                            // Update character count state for counter component
+                            if (maxLength) {
+                                state.currentLength = input.value.length; // Initial count
+                            }
+                            // Range input functionality
+                            if (type === 'range') {
+                                const updateThumb = () => {
+                                    const value = input.value;
+                                    const min = input.min || '0';
+                                    const max = input.max || '100';
+                                    const percentage = ((parseFloat(value) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))) * 100;
+                                    input.style.setProperty('--range-progress', `${percentage}%`);
+                                };
+                                input.addEventListener('input', updateThumb);
+                                updateThumb(); // Initial position
+                            }
+                        }, onkeyup: onkeyup
+                            ? (ev) => {
+                                onkeyup(ev, getValue(ev.target));
+                            }
+                            : undefined, onkeydown: onkeydown
+                            ? (ev) => {
+                                onkeydown(ev, getValue(ev.target));
+                            }
+                            : undefined, onkeypress: onkeypress
+                            ? (ev) => {
+                                onkeypress(ev, getValue(ev.target));
+                            }
+                            : undefined, onupdate: validate
+                            ? ({ dom }) => {
+                                const target = dom;
+                                setValidity(target, validate(getValue(target), target));
+                            }
+                            : undefined, oninput: (e) => {
+                            state.active = true;
+                            const target = e.target;
+                            // Handle original oninput logic
+                            const value = getValue(target);
+                            if (oninput) {
+                                oninput(value);
+                            }
+                            if (maxLength) {
+                                lengthUpdateHandler();
+                            }
+                            // Don't validate on input, only clear error states if user is typing
+                            if (validate && target.classList.contains('invalid') && target.value.length > 0) {
+                                const validationResult = validate(value, target);
+                                if (typeof validationResult === 'boolean' && validationResult) {
+                                    target.classList.remove('invalid');
+                                    target.classList.add('valid');
+                                    state.isValid = true;
+                                }
+                                else if (typeof validationResult === 'string' && validationResult === '') {
+                                    target.classList.remove('invalid');
+                                    target.classList.add('valid');
+                                    state.isValid = true;
+                                }
+                            }
+                        }, onfocus: () => {
+                            state.active = true;
+                        }, onblur: (e) => {
+                            state.active = false;
+                            const target = e.target;
+                            state.hasInteracted = true;
+                            if (target && validate) {
+                                const value = getValue(target);
+                                // Only validate if user has entered some text
+                                if (value && String(value).length > 0) {
+                                    const validationResult = validate(value, target);
+                                    state.isValid = typeof validationResult === 'boolean' ? validationResult : false;
+                                    setValidity(target, validationResult);
+                                    // Update visual validation state
+                                    if (typeof validationResult === 'boolean') {
+                                        if (validationResult) {
+                                            target.classList.remove('invalid');
+                                            target.classList.add('valid');
+                                        }
+                                        else {
+                                            target.classList.remove('valid');
+                                            target.classList.add('invalid');
+                                        }
+                                    }
+                                    else if (typeof validationResult === 'string') {
+                                        target.classList.remove('valid');
+                                        target.classList.add('invalid');
+                                        state.isValid = false;
+                                    }
+                                }
+                                else {
+                                    // Clear validation state if no text
+                                    target.classList.remove('valid', 'invalid');
+                                    state.isValid = true;
+                                }
+                            }
+                            // Also call the original onblur handler if provided
+                            if (attrs.onblur) {
+                                attrs.onblur(e);
+                            }
+                            if (onchange && state.inputElement) {
+                                onchange(getValue(state.inputElement));
+                            }
+                        }, value: initialValue })),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: state.active ||
+                            ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) ||
+                            initialValue ||
+                            placeholder ||
+                            type === 'number' ||
+                            type === 'color' ||
+                            type === 'range'
+                            ? true
+                            : false,
+                    }),
+                    m(HelperText, {
+                        helperText,
+                        dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
+                        dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
+                    }),
+                    maxLength
+                        ? m(CharacterCounter, {
+                            currentLength: state.currentLength,
+                            maxLength,
+                            show: state.currentLength > 0,
+                        })
+                        : undefined,
+                ]);
+            },
+        };
+    };
+    /** Component for entering some text */
+    const TextInput = InputField('text');
+    /** Component for entering a password */
+    const PasswordInput = InputField('password');
+    /** Component for entering a number */
+    const NumberInput = InputField('number');
+    /** Component for entering a URL */
+    const UrlInput = InputField('url');
+    /** Component for entering a color */
+    const ColorInput = InputField('color');
+    /** Component for entering a range */
+    const RangeInput = InputField('range', '.range-field');
+    /** Component for entering an email */
+    const EmailInput = InputField('email');
+    /** Component for uploading a file */
+    const FileInput = () => {
+        let canClear = false;
+        let i;
+        return {
+            view: ({ attrs }) => {
+                const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
+                const accept = acceptedFiles
+                    ? acceptedFiles instanceof Array
+                        ? acceptedFiles.join(', ')
+                        : acceptedFiles
+                    : undefined;
+                return m('.file-field.input-field', {
+                    className: attrs.class || className,
+                }, [
+                    m('.btn', [
+                        m('span', label),
+                        m('input[type=file]', {
+                            title: label,
+                            accept,
+                            multiple,
+                            disabled,
+                            onchange: onchange
+                                ? (e) => {
+                                    const i = e.target;
+                                    if (i && i.files && onchange) {
+                                        canClear = true;
+                                        onchange(i.files);
+                                    }
+                                }
+                                : undefined,
+                        }),
+                    ]),
+                    m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
+                        placeholder,
+                        oncreate: ({ dom }) => {
+                            i = dom;
+                            if (initialValue)
+                                i.value = initialValue;
+                        },
+                    })),
+                    (canClear || initialValue) &&
+                        m('a.waves-effect.waves-teal.btn-flat', {
+                            style: {
+                                float: 'right',
+                                position: 'relative',
+                                top: '-3rem',
+                                padding: 0,
+                            },
+                            onclick: () => {
+                                canClear = false;
+                                i.value = '';
+                                onchange && onchange({});
+                            },
+                        }, m(MaterialIcon, {
+                            name: 'close',
+                            className: 'close',
+                        })),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
+     * No MaterializeCSS dependencies
+     */
+    const MaterialBox = () => {
+        const state = {
+            isOpen: false,
+            originalImage: null,
+            overlay: null,
+            overlayImage: null,
+        };
+        const openBox = (img, attrs) => {
+            if (state.isOpen)
+                return;
+            state.isOpen = true;
+            state.originalImage = img;
+            if (attrs.onOpenStart)
+                attrs.onOpenStart();
+            // Create overlay
+            const overlay = document.createElement('div');
+            overlay.className = 'materialbox-overlay';
+            overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.85);
+      z-index: 1000;
+      opacity: 0;
+      transition: opacity ${attrs.inDuration || 275}ms ease;
+      cursor: zoom-out;
+    `;
+            // Create enlarged image
+            const enlargedImg = document.createElement('img');
+            enlargedImg.src = img.src;
+            enlargedImg.alt = img.alt || '';
+            enlargedImg.className = 'materialbox-image';
+            // Get original image dimensions and position
+            const imgRect = img.getBoundingClientRect();
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            // Calculate final size maintaining aspect ratio
+            const aspectRatio = img.naturalWidth / img.naturalHeight;
+            const maxWidth = windowWidth * 0.9;
+            const maxHeight = windowHeight * 0.9;
+            let finalWidth = maxWidth;
+            let finalHeight = maxWidth / aspectRatio;
+            if (finalHeight > maxHeight) {
+                finalHeight = maxHeight;
+                finalWidth = maxHeight * aspectRatio;
+            }
+            // Set initial position and size (same as original image)
+            enlargedImg.style.cssText = `
+      position: fixed;
+      top: ${imgRect.top}px;
+      left: ${imgRect.left}px;
+      width: ${imgRect.width}px;
+      height: ${imgRect.height}px;
+      transition: all ${attrs.inDuration || 275}ms ease;
+      cursor: zoom-out;
+      max-width: none;
+      z-index: 1001;
+    `;
+            // Add caption if provided
+            let caption = null;
+            if (attrs.caption) {
+                caption = document.createElement('div');
+                caption.className = 'materialbox-caption';
+                caption.textContent = attrs.caption;
+                caption.style.cssText = `
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: white;
+        font-size: 16px;
+        text-align: center;
+        opacity: 0;
+        transition: opacity ${attrs.inDuration || 275}ms ease ${attrs.inDuration || 275}ms;
+        z-index: 1002;
+        pointer-events: none;
+      `;
+            }
+            // Add to DOM
+            document.body.appendChild(overlay);
+            document.body.appendChild(enlargedImg);
+            if (caption)
+                document.body.appendChild(caption);
+            // Store references
+            state.overlay = overlay;
+            state.overlayImage = enlargedImg;
+            // Prevent body scrolling
+            document.body.style.overflow = 'hidden';
+            // Trigger animations
+            requestAnimationFrame(() => {
+                overlay.style.opacity = '1';
+                enlargedImg.style.top = `${(windowHeight - finalHeight) / 2}px`;
+                enlargedImg.style.left = `${(windowWidth - finalWidth) / 2}px`;
+                enlargedImg.style.width = `${finalWidth}px`;
+                enlargedImg.style.height = `${finalHeight}px`;
+                if (caption) {
+                    caption.style.opacity = '1';
+                }
+            });
+            // Add close handlers
+            const closeHandler = () => closeBox(attrs);
+            overlay.addEventListener('click', closeHandler);
+            enlargedImg.addEventListener('click', closeHandler);
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape')
+                    closeHandler();
+            });
+            // Call onOpenEnd after animation
+            setTimeout(() => {
+                if (attrs.onOpenEnd)
+                    attrs.onOpenEnd();
+            }, attrs.inDuration || 275);
+        };
+        const closeBox = (attrs) => {
+            if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
+                return;
+            if (attrs.onCloseStart)
+                attrs.onCloseStart();
+            const originalRect = state.originalImage.getBoundingClientRect();
+            // Animate back to original position
+            state.overlay.style.opacity = '0';
+            state.overlayImage.style.top = `${originalRect.top}px`;
+            state.overlayImage.style.left = `${originalRect.left}px`;
+            state.overlayImage.style.width = `${originalRect.width}px`;
+            state.overlayImage.style.height = `${originalRect.height}px`;
+            // Hide caption
+            const caption = document.querySelector('.materialbox-caption');
+            if (caption) {
+                caption.style.opacity = '0';
+            }
+            // Clean up after animation
+            setTimeout(() => {
+                if (state.overlay) {
+                    document.body.removeChild(state.overlay);
+                    state.overlay = null;
+                }
+                if (state.overlayImage) {
+                    document.body.removeChild(state.overlayImage);
+                    state.overlayImage = null;
+                }
+                if (caption) {
+                    document.body.removeChild(caption);
+                }
+                // Restore body scroll
+                document.body.style.overflow = '';
+                state.isOpen = false;
+                state.originalImage = null;
+                if (attrs.onCloseEnd)
+                    attrs.onCloseEnd();
+            }, attrs.outDuration || 200);
+        };
+        return {
+            onremove: () => {
+                // Clean up if component is removed while open
+                if (state.isOpen) {
+                    if (state.overlay)
+                        document.body.removeChild(state.overlay);
+                    if (state.overlayImage)
+                        document.body.removeChild(state.overlayImage);
+                    const caption = document.querySelector('.materialbox-caption');
+                    if (caption)
+                        document.body.removeChild(caption);
+                    document.body.style.overflow = '';
+                }
+            },
+            view: ({ attrs }) => {
+                const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
+                return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
+                    height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                        e.preventDefault();
+                        openBox(e.target, attrs);
+                    } }));
+            },
+        };
+    };
+
+    /**
+     * CSS-only Modal Panel component - no JavaScript dependencies
+     * Uses modern CSS techniques for modal functionality
+     */
+    const ModalPanel = () => {
+        const state = {
+            isOpen: false,
+            id: '',
+        };
+        let keydownHandler = null;
+        const closeModal = (attrs) => {
+            state.isOpen = false;
+            if (attrs.onToggle)
+                attrs.onToggle(false);
+            if (attrs.onClose)
+                attrs.onClose();
+            // Remove keyboard listener
+            if (keydownHandler) {
+                document.removeEventListener('keydown', keydownHandler);
+                keydownHandler = null;
+            }
+            // Restore body scroll
+            document.body.style.overflow = '';
+        };
+        const openModal = (attrs) => {
+            state.isOpen = true;
+            if (attrs.onToggle)
+                attrs.onToggle(true);
+            // Add keyboard listener
+            keydownHandler = (e) => {
+                if (e.key === 'Escape' && attrs.closeOnEsc !== false && state.isOpen) {
+                    closeModal(attrs);
+                }
+            };
+            document.addEventListener('keydown', keydownHandler);
+            // Prevent body scroll
+            document.body.style.overflow = 'hidden';
+        };
+        return {
+            oninit: ({ attrs }) => {
+                state.id = attrs.id;
+                if (attrs.isOpen) {
+                    openModal(attrs);
+                }
+            },
+            onremove: () => {
+                // Cleanup on component removal
+                if (keydownHandler) {
+                    document.removeEventListener('keydown', keydownHandler);
+                    keydownHandler = null;
+                }
+                document.body.style.overflow = '';
+            },
+            view: ({ attrs }) => {
+                // Sync external isOpen prop with internal state - do this in view for immediate response
+                if (attrs.isOpen !== undefined && attrs.isOpen !== state.isOpen) {
+                    if (attrs.isOpen) {
+                        openModal(attrs);
+                    }
+                    else {
+                        closeModal(attrs);
+                    }
+                }
+                const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, } = attrs;
+                const modalClasses = [
+                    'modal',
+                    className || '',
+                    fixedFooter ? 'modal-fixed-footer' : '',
+                    bottomSheet ? 'bottom-sheet' : '',
+                    state.isOpen ? 'active' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')
+                    .trim();
+                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+                return m('div', { className: 'modal-container' }, [
+                    // Modal overlay
+                    m('div', {
+                        className: overlayClasses,
+                        onclick: closeOnBackdropClick ? () => closeModal(attrs) : undefined,
+                        style: {
+                            display: state.isOpen ? 'block' : 'none',
+                            position: 'fixed',
+                            top: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                            zIndex: '1002',
+                        },
+                    }),
+                    // Modal content
+                    m('div', {
+                        id,
+                        className: modalClasses,
+                        'aria-hidden': state.isOpen ? 'false' : 'true',
+                        role: 'dialog',
+                        'aria-labelledby': `${id}-title`,
+                        'aria-describedby': description ? `${id}-desc` : undefined,
+                        style: {
+                            display: state.isOpen ? 'block' : 'none',
+                            position: 'fixed',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            backgroundColor: '#fff',
+                            borderRadius: '4px',
+                            maxWidth: '75%',
+                            maxHeight: '85%',
+                            overflow: 'auto',
+                            zIndex: '1003',
+                            padding: '0',
+                            boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
+                        },
+                        onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
+                    }, [
+                        // Close button
+                        showCloseButton &&
+                            m('button', {
+                                className: 'modal-close btn-flat',
+                                style: {
+                                    position: 'absolute',
+                                    top: '8px',
+                                    right: '8px',
+                                    padding: '8px',
+                                    minWidth: 'auto',
+                                    lineHeight: 1,
+                                },
+                                onclick: () => closeModal(attrs),
+                                'aria-label': 'Close modal',
+                            }, '×'),
+                        // Modal content
+                        m('.modal-content', {
+                            style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                        }, [
+                            m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
+                            description &&
+                                m('div', Object.assign({ id: `${id}-desc` }, (richContent && typeof description === 'string' ? { innerHTML: description } : {})), richContent && typeof description === 'string' ? undefined : description),
+                        ]),
+                        // Modal footer with buttons
+                        buttons &&
+                            buttons.length > 0 &&
+                            m('.modal-footer', {
+                                style: {
+                                    padding: '4px 6px',
+                                    borderTop: '1px solid rgba(160,160,160,0.2)',
+                                    textAlign: 'right',
+                                },
+                            }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
+                                    if (buttonProps.onclick)
+                                        buttonProps.onclick(e);
+                                    closeModal(attrs);
+                                } })))),
+                    ]),
+                ]);
+            },
+        };
+    };
+
+    /** Component to show a check box */
+    const InputCheckbox = () => {
+        return {
+            view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
+                const checkboxId = inputId || uniqueId();
+                return m(`p`, { className, style }, m('label', { for: checkboxId }, [
+                    m('input[type=checkbox][tabindex=0]', {
+                        id: checkboxId,
+                        checked,
+                        disabled,
+                        onclick: onchange
+                            ? (e) => {
+                                if (e.target && typeof e.target.checked !== 'undefined') {
+                                    onchange(e.target.checked);
+                                }
+                            }
+                            : undefined,
+                    }),
+                    label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
+                ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
+            },
+        };
+    };
+    /** A list of checkboxes */
+    const Options = () => {
+        const state = {};
+        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
+        const selectAll = (options, callback) => {
+            const allIds = options.map((option) => option.id);
+            state.checkedIds = [...allIds];
+            if (callback)
+                callback(allIds);
+        };
+        const selectNone = (callback) => {
+            state.checkedIds = [];
+            if (callback)
+                callback([]);
+        };
+        return {
+            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
+                const iv = checkedId || initialValue;
+                state.checkedId = checkedId;
+                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
+                state.componentId = id || uniqueId();
+            },
+            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
+                const onchange = callback
+                    ? (propId, checked) => {
+                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
+                        if (checked) {
+                            checkedIds.push(propId);
+                        }
+                        state.checkedIds = checkedIds;
+                        callback(checkedIds);
+                    }
+                    : undefined;
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const optionsContent = layout === 'horizontal'
+                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    })))
+                    : options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    }));
+                return m('div', { id: state.componentId, className: cn, style }, [
+                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                    showSelectAll &&
+                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectAll(options, callback);
+                                },
+                                style: 'margin-right: 15px;',
+                            }, 'Select All'),
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectNone(callback);
+                                },
+                            }, 'Select None'),
+                        ]),
+                    description && m(HelperText, { helperText: description }),
+                    m('form', { action: '#' }, optionsContent),
+                ]);
+            },
+        };
+    };
+
+    const PaginationItem = () => ({
+        view: ({ attrs: { title, href, active, disabled } }) => m('li', { className: active ? 'active' : disabled ? 'disabled' : 'waves-effect' }, typeof title === 'number' ? m(m.route.Link, { href }, title) : title),
+    });
+    const Pagination = () => {
+        const state = {
+            pagIndex: 0,
+        };
+        return {
+            view: ({ attrs: { items, curPage = 1, size = Math.min(9, items.length) } }) => {
+                const { pagIndex } = state;
+                const startPage = pagIndex * size;
+                const endPage = startPage + size;
+                const canGoBack = pagIndex > 0;
+                const canGoForward = endPage < items.length;
+                const displayedItems = [
+                    {
+                        title: m('a', {
+                            onclick: () => canGoBack && state.pagIndex--,
+                        }, m('i.material-icons', 'chevron_left')),
+                        disabled: !canGoBack,
+                    },
+                    ...items.filter((_, i) => startPage <= i && i < endPage),
+                    {
+                        title: m('a', {
+                            onclick: () => canGoForward && state.pagIndex++,
+                        }, m('i.material-icons', 'chevron_right')),
+                        disabled: !canGoForward,
+                    },
+                ];
+                return m('ul.pagination', displayedItems.map((item, i) => m(PaginationItem, Object.assign(Object.assign({ title: startPage + i }, item), { active: startPage + i === curPage }))));
+            },
+        };
+    };
+
+    /**
+     * MaterializeCSS Parallax component with dynamic positioning
+     * Port of the original MaterializeCSS parallax logic
+     */
+    const Parallax = () => {
+        let containerEl = null;
+        let imgEl = null;
+        let scrollThrottle = null;
+        let lastScrollTop = -1;
+        // MaterializeCSS parallax logic - exact port from original source
+        const updateParallax = () => {
+            var _a;
+            if (!containerEl || !imgEl)
+                return;
+            const containerHeight = containerEl.offsetHeight > 0 ? containerEl.offsetHeight : ((_a = containerEl.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 1;
+            const imgHeight = imgEl.offsetHeight;
+            const parallaxDist = imgHeight - containerHeight;
+            const bottom = containerEl.offsetTop + containerHeight;
+            const top = containerEl.offsetTop;
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+            const windowHeight = window.innerHeight;
+            const windowBottom = scrollTop + windowHeight;
+            const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+            // MaterializeCSS formula: start at negative parallaxDist/2, move toward positive parallaxDist/2
+            const parallax = Math.round(parallaxDist * percentScrolled - parallaxDist / 2);
+            // Only update if we're in the viewport and scroll position changed
+            if (bottom > scrollTop && top < windowBottom && scrollTop !== lastScrollTop) {
+                // Match MaterializeCSS transform format: translate3d(-50%, Ypx, 0px) with opacity
+                imgEl.style.transform = `translate3d(-50%, ${parallax}px, 0px)`;
+                imgEl.style.opacity = '1';
+                lastScrollTop = scrollTop;
+            }
+        };
+        const handleScroll = () => {
+            if (scrollThrottle)
+                return;
+            scrollThrottle = requestAnimationFrame(() => {
+                updateParallax();
+                scrollThrottle = null;
+            });
+        };
+        const handleResize = () => {
+            updateParallax();
+        };
+        const setupParallax = (containerElement, responsiveThreshold) => {
+            containerEl = containerElement;
+            imgEl = containerElement.querySelector('.parallax img');
+            if (!imgEl)
+                return;
+            // Check if we should enable parallax based on screen size
+            const shouldEnableParallax = window.innerWidth >= responsiveThreshold;
+            if (shouldEnableParallax) {
+                // Set initial MaterializeCSS styles on the image
+                imgEl.style.transform = 'translate3d(-50%, 0px, 0px)';
+                imgEl.style.opacity = '1';
+                // Wait for image to load before calculating parallax
+                if (imgEl.complete) {
+                    updateParallax();
+                }
+                else {
+                    imgEl.onload = () => updateParallax();
+                }
+                // Add event listeners
+                window.addEventListener('scroll', handleScroll, { passive: true });
+                window.addEventListener('resize', handleResize, { passive: true });
+                // Store cleanup function
+                containerEl._parallaxCleanup = () => {
+                    window.removeEventListener('scroll', handleScroll);
+                    window.removeEventListener('resize', handleResize);
+                    if (scrollThrottle) {
+                        cancelAnimationFrame(scrollThrottle);
+                        scrollThrottle = null;
+                    }
+                };
+            }
+        };
+        const cleanup = () => {
+            if (containerEl && containerEl._parallaxCleanup) {
+                containerEl._parallaxCleanup();
+            }
+            containerEl = null;
+            imgEl = null;
+            if (scrollThrottle) {
+                cancelAnimationFrame(scrollThrottle);
+                scrollThrottle = null;
+            }
+            lastScrollTop = -1;
+        };
+        return {
+            oncreate: ({ dom, attrs }) => {
+                const { responsiveThreshold = 768 } = attrs;
+                setupParallax(dom, responsiveThreshold);
+            },
+            onremove: () => {
+                cleanup();
+            },
+            view: ({ attrs }) => {
+                const { src, alt = '' } = attrs;
+                if (!src)
+                    return undefined;
+                return m('.parallax-container', [
+                    m('.parallax', [
+                        m('img', {
+                            src,
+                            alt,
+                            onerror: (e) => {
+                                console.warn('Parallax image failed to load:', src);
+                                const img = e.target;
+                                img.style.backgroundColor = '#ddd';
+                                img.alt = 'Image failed to load';
+                            },
+                        }),
+                    ]),
+                ]);
+            },
+        };
+    };
+
+    const defaultI18n = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+        previousMonth: '\u2039',
+        nextMonth: '\u203a',
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ],
+        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    };
+    // Utility functions based on Materialize CSS implementation
+    const isDate = (obj) => {
+        return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+    };
+    const isWeekend = (date) => {
+        const day = date.getDay();
+        return day === 0 || day === 6;
+    };
+    const setToStartOfDay = (date) => {
+        if (isDate(date))
+            date.setHours(0, 0, 0, 0);
+    };
+    const getDaysInMonth = (year, month) => {
+        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+    };
+    const isLeapYear = (year) => {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    };
+    const compareDates = (a, b) => {
+        return a.getTime() === b.getTime();
+    };
+    /**
+     * Enhanced DatePicker component based on Materialize CSS datepicker
+     */
+    const DatePicker = () => {
+        let state;
+        const mergeOptions = (attrs) => {
+            // Handle HTML attributes
+            let yearRange = 10;
+            if (attrs.yearrange) {
+                const parts = attrs.yearrange.split(',');
+                if (parts.length === 2) {
+                    yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
+                }
+            }
+            else if (attrs.yearRange) {
+                yearRange = attrs.yearRange;
+            }
+            // Handle format - priority: format attribute > displayFormat > default
+            let finalFormat = 'mmm dd, yyyy';
+            if (attrs.format) {
+                finalFormat = attrs.format;
+            }
+            else if (attrs.displayFormat) {
+                finalFormat = attrs.displayFormat;
+            }
+            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+            // Merge i18n properly
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+            return merged;
+        };
+        const toString = (date, format) => {
+            if (!date || !isDate(date)) {
+                return '';
+            }
+            // Split format into tokens - match longer patterns first
+            const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
+            let result = format;
+            // Replace all format tokens with actual values
+            result = result.replace(formatTokens, (match) => {
+                if (state.formats[match]) {
+                    return String(state.formats[match]());
+                }
+                return match;
+            });
+            return result;
+        };
+        const setDate = (date, preventOnSelect = false, options) => {
+            if (!date) {
+                state.date = null;
+                return;
+            }
+            if (typeof date === 'string') {
+                date = new Date(Date.parse(date));
+            }
+            if (!isDate(date)) {
+                return;
+            }
+            const min = options.minDate;
+            const max = options.maxDate;
+            if (isDate(min) && date < min) {
+                date = min;
+            }
+            else if (isDate(max) && date > max) {
+                date = max;
+            }
+            state.date = new Date(date.getTime());
+            setToStartOfDay(state.date);
+            gotoDate(state.date);
+            if (!preventOnSelect && options.onSelect) {
+                options.onSelect(state.date);
+            }
+        };
+        const gotoDate = (date) => {
+            if (!isDate(date)) {
+                return;
+            }
+            state.calendars = [
+                {
+                    month: date.getMonth(),
+                    year: date.getFullYear(),
+                },
+            ];
+        };
+        const nextMonth = () => {
+            state.calendars[0].month++;
+            adjustCalendars();
+        };
+        const prevMonth = () => {
+            state.calendars[0].month--;
+            adjustCalendars();
+        };
+        const adjustCalendars = () => {
+            state.calendars[0] = adjustCalendar(state.calendars[0]);
+        };
+        const adjustCalendar = (calendar) => {
+            if (calendar.month < 0) {
+                calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+                calendar.month += 12;
+            }
+            if (calendar.month > 11) {
+                calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+                calendar.month -= 12;
+            }
+            return calendar;
+        };
+        const renderDay = (opts, options) => {
+            const arr = [];
+            let ariaSelected = 'false';
+            if (opts.isEmpty) {
+                {
+                    return m('td.is-empty');
+                }
+            }
+            if (opts.isDisabled) {
+                arr.push('is-disabled');
+            }
+            if (opts.isToday) {
+                arr.push('is-today');
+            }
+            if (opts.isSelected) {
+                arr.push('is-selected');
+                ariaSelected = 'true';
+            }
+            return m('td', {
+                'data-day': opts.day,
+                class: arr.join(' '),
+                'aria-selected': ariaSelected,
+            }, [
+                m('button.datepicker-day-button', {
+                    type: 'button',
+                    'data-year': opts.year,
+                    'data-month': opts.month,
+                    'data-day': opts.day,
+                    onclick: (e) => {
+                        const target = e.target;
+                        if (!opts.isDisabled) {
+                            const year = parseInt(target.getAttribute('data-year') || '0', 10);
+                            const month = parseInt(target.getAttribute('data-month') || '0', 10);
+                            const day = parseInt(target.getAttribute('data-day') || '0', 10);
+                            const selectedDate = new Date(year, month, day);
+                            setDate(selectedDate, false, options);
+                            if (options.autoClose) {
+                                state.isOpen = false;
+                            }
+                        }
+                    },
+                }, opts.day),
+            ]);
+        };
+        const renderCalendar = (year, month, options, randId) => {
+            const now = new Date();
+            const days = getDaysInMonth(year, month);
+            let before = new Date(year, month, 1).getDay();
+            const data = [];
+            let row = [];
+            setToStartOfDay(now);
+            if (options.firstDay > 0) {
+                before -= options.firstDay;
+                if (before < 0) {
+                    before += 7;
+                }
+            }
+            const previousMonth = month === 0 ? 11 : month - 1;
+            const nextMonth = month === 11 ? 0 : month + 1;
+            const yearOfPreviousMonth = month === 0 ? year - 1 : year;
+            const yearOfNextMonth = month === 11 ? year + 1 : year;
+            const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+            let cells = days + before;
+            let after = cells;
+            while (after > 7) {
+                after -= 7;
+            }
+            cells += 7 - after;
+            for (let i = 0, r = 0; i < cells; i++) {
+                const day = new Date(year, month, 1 + (i - before));
+                const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
+                const isToday = compareDates(day, now);
+                const isEmpty = i < before || i >= days + before;
+                let dayNumber = 1 + (i - before);
+                let monthNumber = month;
+                let yearNumber = year;
+                if (isEmpty) {
+                    if (i < before) {
+                        dayNumber = daysInPreviousMonth + dayNumber;
+                        monthNumber = previousMonth;
+                        yearNumber = yearOfPreviousMonth;
+                    }
+                    else {
+                        dayNumber = dayNumber - days;
+                        monthNumber = nextMonth;
+                        yearNumber = yearOfNextMonth;
+                    }
+                }
+                const isDisabled = (options.minDate && day < options.minDate) ||
+                    (options.maxDate && day > options.maxDate) ||
+                    (options.disableWeekends && isWeekend(day)) ||
+                    (options.disableDayFn && options.disableDayFn(day));
+                const dayConfig = {
+                    day: dayNumber,
+                    month: monthNumber,
+                    year: yearNumber,
+                    isSelected: isSelected,
+                    isToday: isToday,
+                    isDisabled: isDisabled,
+                    isEmpty: isEmpty};
+                row.push(renderDay(dayConfig, options));
+                if (++r === 7) {
+                    data.push(m('tr.datepicker-row', row));
+                    row = [];
+                    r = 0;
+                }
+            }
+            const weekdayHeaders = [];
+            for (let i = 0; i < 7; i++) {
+                let day = i + options.firstDay;
+                while (day >= 7) {
+                    day -= 7;
+                }
+                weekdayHeaders.push(m('th', { scope: 'col' }, [
+                    m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
+                ]));
+            }
+            return m('.datepicker-table-wrapper', [
+                m('table.datepicker-table', {
+                    cellpadding: '0',
+                    cellspacing: '0',
+                    role: 'grid',
+                    'aria-labelledby': 'datepicker-controls',
+                }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
+            ]);
+        };
+        const renderDateDisplay = (options) => {
+            const displayDate = isDate(state.date) ? state.date : new Date();
+            const day = options.i18n.weekdaysShort[displayDate.getDay()];
+            const month = options.i18n.monthsShort[displayDate.getMonth()];
+            const date = displayDate.getDate();
+            return m('.datepicker-date-display', [
+                m('span.year-text', displayDate.getFullYear()),
+                m('span.date-text', `${day}, ${month} ${date}`),
+            ]);
+        };
+        const renderControls = (options, randId) => {
+            const calendar = state.calendars[0];
+            const year = calendar.year;
+            const month = calendar.month;
+            // Month options
+            const monthOptions = [];
+            for (let i = 0; i < 12; i++) {
+                monthOptions.push(m('option', {
+                    value: i,
+                    selected: i === month ? 'selected' : undefined,
+                }, options.i18n.months[i]));
+            }
+            // Year options
+            const yearOptions = [];
+            let yearStart, yearEnd;
+            if (Array.isArray(options.yearRange)) {
+                yearStart = options.yearRange[0];
+                yearEnd = options.yearRange[1];
+            }
+            else {
+                yearStart = year - options.yearRange;
+                yearEnd = year + options.yearRange;
+            }
+            for (let i = yearStart; i <= yearEnd; i++) {
+                yearOptions.push(m('option', {
+                    value: i,
+                    selected: i === year ? 'selected' : undefined,
+                }, i));
+            }
+            return m('.datepicker-controls', {
+                id: randId,
+                role: 'heading',
+                'aria-live': 'assertive',
+            }, [
+                m('button.month-prev', {
+                    type: 'button',
+                    onclick: (e) => {
+                        e.preventDefault();
+                        prevMonth();
+                    },
+                }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                    m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
+                    m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
+                ])),
+                m('.selects-container', [
+                    // Month select wrapper
+                    m('.select-wrapper.select-month', [
+                        m('input.select-dropdown.dropdown-trigger', {
+                            type: 'text',
+                            readonly: true,
+                            value: options.i18n.months[month],
+                            onclick: (e) => {
+                                e.preventDefault();
+                                state.monthDropdownOpen = !state.monthDropdownOpen;
+                                state.yearDropdownOpen = false; // Close year dropdown
+                            },
+                        }),
+                        // Custom dropdown menu
+                        state.monthDropdownOpen &&
+                            m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
+                                key: index,
+                                class: index === month ? 'selected' : '',
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    gotoMonth(index);
+                                    state.monthDropdownOpen = false;
+                                },
+                            }, monthName))),
+                    ]),
+                    // Year select wrapper
+                    m('.select-wrapper.select-year', [
+                        m('input.select-dropdown.dropdown-trigger', {
+                            type: 'text',
+                            readonly: true,
+                            value: year.toString(),
+                            onclick: (e) => {
+                                e.preventDefault();
+                                state.yearDropdownOpen = !state.yearDropdownOpen;
+                                state.monthDropdownOpen = false; // Close month dropdown
+                            },
+                        }),
+                        // Custom dropdown menu
+                        state.yearDropdownOpen &&
+                            m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
+                                key: i,
+                                class: i === year ? 'selected' : '',
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    gotoYear(i);
+                                    state.yearDropdownOpen = false;
+                                },
+                            }, i))),
+                    ]),
+                ]),
+                m('button.month-next', {
+                    type: 'button',
+                    onclick: (e) => {
+                        e.preventDefault();
+                        nextMonth();
+                    },
+                }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                    m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
+                    m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
+                ])),
+            ]);
+        };
+        const gotoMonth = (month) => {
+            if (!isNaN(month)) {
+                state.calendars[0].month = month;
+                adjustCalendars();
+            }
+        };
+        const gotoYear = (year) => {
+            if (!isNaN(year)) {
+                state.calendars[0].year = year;
+                adjustCalendars();
+            }
+        };
+        const handleDocumentClick = (e) => {
+            const target = e.target;
+            if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                state.monthDropdownOpen = false;
+                state.yearDropdownOpen = false;
+            }
+        };
+        return {
+            oninit: (vnode) => {
+                const attrs = vnode.attrs;
+                const options = mergeOptions(attrs);
+                state = {
+                    id: uniqueId(),
+                    isOpen: false,
+                    date: null,
+                    calendars: [{ month: 0, year: 0 }],
+                    monthDropdownOpen: false,
+                    yearDropdownOpen: false,
+                    formats: {
+                        d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
+                        dd: () => {
+                            var _a;
+                            const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
+                            return (d < 10 ? '0' : '') + d;
+                        },
+                        ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                        dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                        m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
+                        mm: () => {
+                            var _a;
+                            const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
+                            return (m < 10 ? '0' : '') + m;
+                        },
+                        mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                        mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                        yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
+                        yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
+                    },
+                };
+                // Initialize date
+                let defaultDate = attrs.defaultDate;
+                if (!defaultDate && attrs.initialValue) {
+                    defaultDate = new Date(attrs.initialValue);
+                }
+                if (isDate(defaultDate)) {
+                    // Always set the date if we have initialValue or defaultDate
+                    setDate(defaultDate, true, options);
+                }
+                else {
+                    gotoDate(new Date());
+                }
+                // Add document click listener to close dropdowns
+                document.addEventListener('click', handleDocumentClick);
+            },
+            onremove: () => {
+                // Clean up event listener
+                document.removeEventListener('click', handleDocumentClick);
+            },
+            view: (vnode) => {
+                const attrs = vnode.attrs;
+                const options = mergeOptions(attrs);
+                const { id = state.id, label, dateLabel, placeholder, disabled, required, className, style, helperText, iconName, newRow, } = attrs;
+                // Use dateLabel if label is not provided (backward compatibility)
+                const finalLabel = label || dateLabel;
+                const finalClassName = newRow ? `${className || ''} clear` : className;
+                return m('.input-field', {
+                    className: finalClassName,
+                    style,
+                }, [
+                    // Icon prefix
+                    iconName && m('i.material-icons.prefix', iconName),
+                    // Main date input
+                    m('input.datepicker', {
+                        id,
+                        type: 'text',
+                        value: toString(state.date, options.format),
+                        placeholder,
+                        disabled,
+                        required,
+                        readonly: true,
+                        format: attrs.format,
+                        yearrange: attrs.yearrange,
+                        tabindex: '0',
+                        onclick: () => {
+                            if (!disabled) {
+                                state.isOpen = true;
+                                if (options.onOpen)
+                                    options.onOpen();
+                            }
+                        },
+                    }),
+                    // Label
+                    finalLabel &&
+                        m('label', {
+                            for: id,
+                            class: state.date || placeholder ? 'active' : '',
+                        }, finalLabel),
+                    // Helper text
+                    helperText && m('span.helper-text', helperText),
+                    // Modal datepicker
+                    state.isOpen && [
+                        m('.modal.datepicker-modal.open', {
+                            id: `modal-${state.id}`,
+                            tabindex: 0,
+                            style: {
+                                zIndex: 1003,
+                                display: 'block',
+                                opacity: 1,
+                                top: '10%',
+                                transform: 'scaleX(1) scaleY(1)',
+                            },
+                        }, [
+                            m('.modal-content.datepicker-container', {
+                                onclick: (e) => {
+                                    // Close dropdowns when clicking anywhere in the modal content
+                                    const target = e.target;
+                                    if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                                        state.monthDropdownOpen = false;
+                                        state.yearDropdownOpen = false;
+                                    }
+                                },
+                            }, [
+                                renderDateDisplay(options),
+                                m('.datepicker-calendar-container', [
+                                    m('.datepicker-calendar', [
+                                        renderControls(options, `datepicker-title-${Math.random().toString(36).slice(2)}`),
+                                        renderCalendar(state.calendars[0].year, state.calendars[0].month, options),
+                                    ]),
+                                    m('.datepicker-footer', [
+                                        options.showClearBtn &&
+                                            m('button.btn-flat.datepicker-clear.waves-effect', {
+                                                type: 'button',
+                                                style: '',
+                                                onclick: () => {
+                                                    setDate(null, false, options);
+                                                    state.isOpen = false;
+                                                },
+                                            }, options.i18n.clear),
+                                        m('.confirmation-btns', [
+                                            m('button.btn-flat.datepicker-cancel.waves-effect', {
+                                                type: 'button',
+                                                onclick: () => {
+                                                    state.isOpen = false;
+                                                    if (options.onClose)
+                                                        options.onClose();
+                                                },
+                                            }, options.i18n.cancel),
+                                            m('button.btn-flat.datepicker-done.waves-effect', {
+                                                type: 'button',
+                                                onclick: () => {
+                                                    if (attrs.onchange && state.date) {
+                                                        attrs.onchange(state.date.toISOString().split('T')[0]);
+                                                    }
+                                                    state.isOpen = false;
+                                                    if (options.onClose)
+                                                        options.onClose();
+                                                },
+                                            }, options.i18n.done),
+                                        ]),
+                                    ]),
+                                ]),
+                            ]),
+                        ]),
+                        // Modal overlay
+                        m('.modal-overlay', {
+                            style: {
+                                zIndex: 1002,
+                                display: 'block',
+                                opacity: 0.5,
+                            },
+                            onclick: () => {
+                                state.isOpen = false;
+                                if (options.onClose)
+                                    options.onClose();
+                            },
+                        }),
+                    ],
+                ]);
+            },
+        };
+    };
+    /**
+     * Enhanced TimePicker component with i18n support and improved functionality.
+     *
+     * Usage:
+     * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
+     * - Use `defaultTime` only if you need a fallback when the field is cleared
+     * - The component accepts and outputs 24-hour format strings ("HH:MM")
+     * - Display format (12h/24h) is controlled by the `twelveHour` property
+     */
+    const TimePicker = () => {
+        const state = {
+            id: uniqueId(),
+            isOpen: false,
+            hours: 12,
+            minutes: 0,
+            ampm: 'AM',
+            use12Hour: false,
+            time: ''};
+        const parseTime = (timeString) => {
+            if (!timeString)
+                return { hours: 12, minutes: 0, ampm: 'AM' };
+            const [time, ampm] = timeString.split(' ');
+            const [hoursStr, minutesStr] = time.split(':');
+            let hours = parseInt(hoursStr, 10) || 0;
+            const minutes = parseInt(minutesStr, 10) || 0;
+            if (ampm) {
+                // 12-hour format
+                if (ampm.toUpperCase() === 'PM' && hours !== 12)
+                    hours += 12;
+                if (ampm.toUpperCase() === 'AM' && hours === 12)
+                    hours = 0;
+                return { hours, minutes, ampm: ampm.toUpperCase() };
+            }
+            else {
+                // 24-hour format
+                const displayAmpm = hours >= 12 ? 'PM' : 'AM';
+                return { hours, minutes, ampm: displayAmpm };
+            }
+        };
+        const formatTime = (hours, minutes, use12Hour) => {
+            if (use12Hour) {
+                const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+                const ampm = hours >= 12 ? 'PM' : 'AM';
+                return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+            }
+            else {
+                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+            }
+        };
+        const setTime = (timeString, attrs) => {
+            const parsed = parseTime(timeString);
+            state.hours = parsed.hours;
+            state.minutes = parsed.minutes;
+            state.ampm = parsed.ampm;
+            state.time = timeString;
+            if (attrs.onchange) {
+                // Always output 24-hour format for consistency
+                const output24h = `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`;
+                attrs.onchange(output24h);
+            }
+            if (attrs.oninput) {
+                attrs.oninput(timeString);
+            }
+            if (attrs.onSelect) {
+                attrs.onSelect(state.hours, state.minutes);
+            }
+        };
+        return {
+            oninit: (vnode) => {
+                const { initialValue, defaultTime, twelveHour = false } = vnode.attrs;
+                state.use12Hour = twelveHour;
+                const timeValue = initialValue || defaultTime || '';
+                if (timeValue) {
+                    const parsed = parseTime(timeValue);
+                    state.hours = parsed.hours;
+                    state.minutes = parsed.minutes;
+                    state.ampm = parsed.ampm;
+                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                }
+            },
+            view: (vnode) => {
+                const attrs = vnode.attrs;
+                const { id = state.id, label = 'Time', placeholder = 'Select time', disabled, readonly, required, className, style, helperText, iconName = 'access_time', newRow, twelveHour = false, timeLabel = 'Time', nowLabel = 'Now', clearLabel = 'Clear', closeLabel = 'Close', amLabel = 'AM', pmLabel = 'PM', showClearBtn = false, showNowBtn = false, useModal = true, } = attrs;
+                state.use12Hour = twelveHour;
+                const finalClassName = newRow ? `${className || ''} clear` : className;
+                const displayValue = state.time ? formatTime(state.hours, state.minutes, state.use12Hour) : '';
+                return m('.input-field', {
+                    className: finalClassName,
+                    style,
+                }, [
+                    // Icon prefix
+                    iconName && m('i.material-icons.prefix', iconName),
+                    // Time input field
+                    m('input.timepicker', {
+                        id,
+                        type: 'text',
+                        value: displayValue,
+                        placeholder,
+                        disabled,
+                        readonly,
+                        required,
+                        onclick: () => {
+                            if (!disabled && !readonly && useModal) {
+                                state.isOpen = true;
+                                if (attrs.onOpen)
+                                    attrs.onOpen();
+                            }
+                        },
+                    }),
+                    // Label
+                    label &&
+                        m('label', {
+                            for: id,
+                            class: displayValue || placeholder ? 'active' : '',
+                        }, label),
+                    // Helper text
+                    helperText && m('span.helper-text', helperText),
+                    // Time picker modal (simplified version)
+                    useModal &&
+                        state.isOpen &&
+                        m('.timepicker-modal', {
+                            style: {
+                                position: 'fixed',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                backgroundColor: 'white',
+                                padding: '20px',
+                                borderRadius: '4px',
+                                boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
+                                zIndex: 1000,
+                            },
+                        }, [
+                            m('h4', timeLabel),
+                            m('.time-inputs', {
+                                style: { display: 'flex', alignItems: 'center', gap: '10px', margin: '20px 0' },
+                            }, [
+                                // Hours input
+                                m('input', {
+                                    type: 'number',
+                                    min: state.use12Hour ? 1 : 0,
+                                    max: state.use12Hour ? 12 : 23,
+                                    value: state.use12Hour
+                                        ? state.hours === 0
+                                            ? 12
+                                            : state.hours > 12
+                                                ? state.hours - 12
+                                                : state.hours
+                                        : state.hours,
+                                    style: { width: '60px', textAlign: 'center', padding: '8px' },
+                                    onchange: (e) => {
+                                        const target = e.target;
+                                        let hours = parseInt(target.value) || 0;
+                                        if (state.use12Hour) {
+                                            if (state.ampm === 'PM' && hours !== 12)
+                                                hours += 12;
+                                            if (state.ampm === 'AM' && hours === 12)
+                                                hours = 0;
+                                        }
+                                        state.hours = hours;
+                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                    },
+                                }),
+                                m('span', ':'),
+                                // Minutes input
+                                m('input', {
+                                    type: 'number',
+                                    min: 0,
+                                    max: 59,
+                                    value: state.minutes,
+                                    style: { width: '60px', textAlign: 'center', padding: '8px' },
+                                    onchange: (e) => {
+                                        const target = e.target;
+                                        state.minutes = parseInt(target.value) || 0;
+                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                    },
+                                }),
+                                // AM/PM toggle for 12-hour format
+                                state.use12Hour &&
+                                    m('select', {
+                                        value: state.ampm,
+                                        style: { padding: '8px' },
+                                        onchange: (e) => {
+                                            const target = e.target;
+                                            const oldAmpm = state.ampm;
+                                            state.ampm = target.value;
+                                            // Adjust hours when switching AM/PM
+                                            if (oldAmpm !== state.ampm) {
+                                                if (state.ampm === 'PM' && state.hours < 12) {
+                                                    state.hours += 12;
+                                                }
+                                                else if (state.ampm === 'AM' && state.hours >= 12) {
+                                                    state.hours -= 12;
+                                                }
+                                            }
+                                            state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                        },
+                                    }, [m('option', { value: 'AM' }, amLabel), m('option', { value: 'PM' }, pmLabel)]),
+                            ]),
+                            // Action buttons
+                            m('.timepicker-actions', {
+                                style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' },
+                            }, [
+                                showClearBtn &&
+                                    m('button.btn-flat', {
+                                        onclick: () => {
+                                            setTime('', attrs);
+                                            state.isOpen = false;
+                                        },
+                                    }, clearLabel),
+                                showNowBtn &&
+                                    m('button.btn-flat', {
+                                        onclick: () => {
+                                            const now = new Date();
+                                            state.hours = now.getHours();
+                                            state.minutes = now.getMinutes();
+                                            state.ampm = state.hours >= 12 ? 'PM' : 'AM';
+                                            state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                        },
+                                    }, nowLabel),
+                                m('button.btn-flat', {
+                                    onclick: () => {
+                                        state.isOpen = false;
+                                        if (attrs.onClose)
+                                            attrs.onClose();
+                                    },
+                                }, closeLabel),
+                                m('button.btn-flat', {
+                                    onclick: () => {
+                                        setTime(state.time, attrs);
+                                        state.isOpen = false;
+                                        if (attrs.onClose)
+                                            attrs.onClose();
+                                    },
+                                }, 'OK'),
+                            ]),
+                        ]),
+                    // Modal backdrop
+                    useModal &&
+                        state.isOpen &&
+                        m('.modal-backdrop', {
+                            style: {
+                                position: 'fixed',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: '100%',
+                                backgroundColor: 'rgba(0,0,0,0.5)',
+                                zIndex: 999,
+                            },
+                            onclick: () => {
+                                state.isOpen = false;
+                                if (attrs.onClose)
+                                    attrs.onClose();
+                            },
+                        }),
+                ]);
+            },
+        };
+    };
+
+    const RadioButton = () => ({
+        view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId } }) => {
+            const radioId = inputId || `${groupId}-${id}`;
+            return m('p', { className }, m('label', { for: radioId }, [
+                m('input[type=radio][tabindex=0]', {
+                    id: radioId,
+                    name: groupId,
+                    disabled,
+                    checked,
+                    onclick: onchange ? () => onchange(id) : undefined,
+                }),
+                m('span', m.trust(label)),
+            ]));
+        },
+    });
+    /** Component to show a list of radio buttons, from which you can choose one. */
+    // export const RadioButtons: FactoryComponent<IRadioButtons<T>> = () => {
+    const RadioButtons = () => {
+        const state = { groupId: uniqueId() };
+        return {
+            oninit: ({ attrs: { checkedId, initialValue, id } }) => {
+                state.oldCheckedId = checkedId;
+                state.checkedId = checkedId || initialValue;
+                state.componentId = id || uniqueId();
+            },
+            view: ({ attrs: { checkedId: cid, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange: callback, }, }) => {
+                if (state.oldCheckedId !== cid) {
+                    state.oldCheckedId = state.checkedId = cid;
+                }
+                const { groupId, checkedId, componentId } = state;
+                const onchange = (propId) => {
+                    state.checkedId = propId;
+                    if (callback) {
+                        callback(propId);
+                    }
+                };
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const optionsContent = layout === 'horizontal'
+                    ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
+                        groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
+                    : options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
+                        groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` })));
+                return m('div', { id: componentId, className: cn }, [
+                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                    description && m('p.helper-text', m.trust(description)),
+                    m('form', { action: '#' }, optionsContent),
+                ]);
+            },
+        };
+    };
+
+    /** Select component */
+    const Select = () => {
+        const state = {
+            id: '',
+            isOpen: false,
+            selectedIds: [],
+            focusedIndex: -1,
+            inputRef: null,
+            dropdownRef: null,
+        };
+        const isSelected = (id, selectedIds) => {
+            return selectedIds.some((selectedId) => selectedId === id);
+        };
+        const toggleOption = (id, multiple, attrs) => {
+            if (multiple) {
+                const newIds = state.selectedIds.includes(id)
+                    ? // isSelected(id, state.selectedIds)
+                        state.selectedIds.filter((selectedId) => selectedId !== id)
+                    : [...state.selectedIds, id];
+                state.selectedIds = newIds;
+                attrs.onchange(newIds);
+                console.log(newIds);
+                // Keep dropdown open for multiple select
+            }
+            else {
+                state.selectedIds = [id];
+                // Close dropdown for single select
+                state.isOpen = false;
+                attrs.onchange([id]);
+            }
+        };
+        const handleKeyDown = (e, attrs) => {
+            const { options } = attrs;
+            const selectableOptions = options.filter((opt) => !opt.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    else {
+                        const currentSelectableIndex = selectableOptions.findIndex((opt) => opt === options[state.focusedIndex]);
+                        const nextSelectableIndex = Math.min(currentSelectableIndex + 1, selectableOptions.length - 1);
+                        const nextOption = selectableOptions[nextSelectableIndex];
+                        state.focusedIndex = options.findIndex((opt) => opt === nextOption);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (state.isOpen) {
+                        const currentSelectableIndex = selectableOptions.findIndex((opt) => opt === options[state.focusedIndex]);
+                        const prevSelectableIndex = Math.max(currentSelectableIndex - 1, 0);
+                        const prevOption = selectableOptions[prevSelectableIndex];
+                        state.focusedIndex = options.findIndex((opt) => opt === prevOption);
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < options.length) {
+                        const option = options[state.focusedIndex];
+                        if (option && !option.disabled) {
+                            toggleOption(option.id, attrs.multiple || false, attrs);
+                        }
+                    }
+                    else if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    break;
+            }
+        };
+        const closeDropdown = (e) => {
+            const target = e.target;
+            if (!target.closest('.select-wrapper-container')) {
+                state.isOpen = false;
+                m.redraw();
+            }
+        };
+        const renderGroupedOptions = (options, multiple, attrs) => {
+            const groupedOptions = {};
+            const ungroupedOptions = [];
+            // Group options by their group property
+            options.forEach((option) => {
+                if (option.group) {
+                    if (!groupedOptions[option.group]) {
+                        groupedOptions[option.group] = [];
+                    }
+                    groupedOptions[option.group].push(option);
+                }
+                else {
+                    ungroupedOptions.push(option);
+                }
+            });
+            const renderElements = [];
+            // Render ungrouped options first
+            ungroupedOptions.forEach((option) => {
+                renderElements.push(m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === options.indexOf(option) ? 'focused' : '' }, (option.disabled
+                    ? {}
+                    : {
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            toggleOption(option.id, multiple, attrs);
+                        },
+                    })), m('span', multiple
+                    ? m('label', { for: option.id }, m('input', {
+                        id: option.id,
+                        type: 'checkbox',
+                        checked: state.selectedIds.includes(option.id),
+                        disabled: option.disabled ? true : undefined,
+                        onclick: (e) => {
+                            e.stopPropagation();
+                        },
+                    }), m('span', option.label))
+                    : option.label)));
+            });
+            // Render grouped options
+            Object.keys(groupedOptions).forEach((groupName) => {
+                // Add group header
+                renderElements.push(m('li.optgroup', { tabindex: 0 }, m('span', groupName)));
+                // Add group options
+                groupedOptions[groupName].forEach((option) => {
+                    renderElements.push(m('li', Object.assign({ class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, state.selectedIds) ? ' selected' : ''}${state.focusedIndex === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
+                        ? {}
+                        : {
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                toggleOption(option.id, multiple, attrs);
+                            },
+                        })), m('span', multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: state.selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : option.label)));
+                });
+            });
+            return renderElements;
+        };
+        return {
+            oninit: ({ attrs }) => {
+                const { checkedId, initialValue, id } = attrs;
+                state.id = id || uniqueId();
+                const iv = checkedId || initialValue;
+                if (iv !== null && typeof iv !== 'undefined') {
+                    if (iv instanceof Array) {
+                        state.selectedIds = [...iv];
+                    }
+                    else {
+                        state.selectedIds = [iv];
+                    }
+                }
+                // Add global click listener to close dropdown
+                document.addEventListener('click', closeDropdown);
+            },
+            onremove: () => {
+                // Cleanup global listener
+                document.removeEventListener('click', closeDropdown);
+            },
+            view: ({ attrs }) => {
+                // Sync external checkedId prop with internal state - do this in view for immediate response
+                const { checkedId } = attrs;
+                if (checkedId !== undefined) {
+                    const newIds = checkedId instanceof Array ? checkedId : [checkedId];
+                    if (JSON.stringify(newIds) !== JSON.stringify(state.selectedIds)) {
+                        state.selectedIds = newIds;
+                    }
+                }
+                const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
+                const finalClassName = newRow ? `${className} clear` : className;
+                const selectedOptions = options.filter((opt) => isSelected(opt.id, state.selectedIds));
+                return m('.input-field.select-space', {
+                    className: finalClassName,
+                    key,
+                    style,
+                }, [
+                    // Icon prefix
+                    iconName && m('i.material-icons.prefix', iconName),
+                    m('.select-wrapper', {
+                        onclick: disabled
+                            ? undefined
+                            : () => {
+                                state.isOpen = !state.isOpen;
+                            },
+                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, attrs),
+                        tabindex: disabled ? -1 : 0,
+                        'aria-expanded': state.isOpen ? 'true' : 'false',
+                        'aria-haspopup': 'listbox',
+                        role: 'combobox',
+                    }, [
+                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                            id: state.id,
+                            value: selectedOptions.length > 0 ? selectedOptions.map((o) => o.label || o.id).join(', ') : placeholder,
+                            oncreate: ({ dom }) => {
+                                state.inputRef = dom;
+                            },
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                state.isOpen = !state.isOpen;
+                            },
+                        }),
+                        // Dropdown Menu
+                        state.isOpen &&
+                            m('ul.dropdown-content.select-dropdown', {
+                                tabindex: 0,
+                                oncreate: ({ dom }) => {
+                                    state.dropdownRef = dom;
+                                },
+                                onremove: () => {
+                                    state.dropdownRef = null;
+                                },
+                                style: getDropdownStyles(state.inputRef, true, options),
+                            }, [
+                                placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+                                ...renderGroupedOptions(options, multiple, attrs),
+                            ]),
+                        m(MaterialIcon, {
+                            name: 'caret',
+                            direction: 'down',
+                        }),
+                    ]),
+                    // Label
+                    label &&
+                        m(Label, {
+                            id: state.id,
+                            label,
+                            isMandatory,
+                        }),
+                    // Helper text
+                    helperText && m(HelperText, { helperText }),
+                ]);
+            },
+        };
+    };
+
+    /** Component to display a switch with two values. */
+    const Switch = () => {
+        const state = { id: uniqueId(), checked: false };
+        return {
+            oninit: ({ attrs: { checked } }) => {
+                state.checked = checked || false;
+            },
+            view: ({ attrs }) => {
+                const id = attrs.id || state.id;
+                const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
+                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                return m('div', {
+                    className: cn,
+                    onclick: (e) => {
+                        state.checked = !state.checked;
+                        onchange && onchange(state.checked);
+                        e.preventDefault();
+                    },
+                }, [
+                    label && m(Label, { label: label || '', id, isMandatory, className: 'active' }),
+                    m('.switch', params, m('label', {
+                        style: { cursor: 'pointer' },
+                    }, [
+                        m('span', left || 'Off'),
+                        m('input[type=checkbox]', {
+                            id,
+                            disabled,
+                            checked: state.checked,
+                        }),
+                        m('span.lever'),
+                        m('span', right || 'On'),
+                    ])),
+                ]);
+            },
+        };
+    };
+
+    /** CSS-only Tabs component - no MaterializeCSS dependencies */
+    const Tabs = () => {
+        const toAnchored = () => {
+            let activeTabFound = false;
+            return (tab) => {
+                const active = activeTabFound ? false : tab.active;
+                if (active)
+                    activeTabFound = true;
+                const tabId = createId(tab.title, tab.id);
+                return Object.assign(Object.assign({}, tab), { active, tabId, anchorId: `anchor-${tabId}` });
+            };
+        };
+        const state = {
+            activeTabId: '',
+            isDragging: false,
+            startX: 0,
+            translateX: 0,
+            indicatorStyle: {
+                left: '0px',
+                width: '0px',
+            }};
+        const createId = (title, id) => (id ? id : title.replace(/ /g, '').toLowerCase());
+        const updateIndicator = () => {
+            const tabElement = document.getElementById(state.activeTabId);
+            if (tabElement) {
+                const tabsContainer = tabElement.closest('.tabs');
+                if (tabsContainer) {
+                    const containerRect = tabsContainer.getBoundingClientRect();
+                    const tabRect = tabElement.getBoundingClientRect();
+                    const newLeft = `${tabRect.left - containerRect.left}px`;
+                    const newWidth = `${tabRect.width}px`;
+                    // Only update if values actually changed - NO m.redraw()!
+                    if (state.indicatorStyle.left !== newLeft || state.indicatorStyle.width !== newWidth) {
+                        state.indicatorStyle = {
+                            left: newLeft,
+                            width: newWidth,
+                        };
+                    }
+                }
+            }
+        };
+        const handleTabClick = (tabId, tabElement, attrs) => {
+            if (state.activeTabId === tabId)
+                return;
+            state.activeTabId = tabId;
+            // Call onShow callback if provided
+            if (attrs.onShow) {
+                attrs.onShow(tabElement);
+            }
+            // Call onTabChange callback if provided
+            if (attrs.onTabChange) {
+                attrs.onTabChange(tabId);
+            }
+        };
+        // Touch/swipe support for mobile
+        const handleTouchStart = (e) => {
+            if (!e.touches || e.touches.length === 0)
+                return;
+            state.isDragging = true;
+            state.startX = e.touches[0].clientX;
+        };
+        const handleTouchEnd = (e, attrs) => {
+            if (!state.isDragging || !e.changedTouches || e.changedTouches.length === 0)
+                return;
+            const endX = e.changedTouches[0].clientX;
+            const deltaX = endX - state.startX;
+            const threshold = 50; // Minimum swipe distance
+            if (Math.abs(deltaX) > threshold) {
+                const currentIndex = attrs.tabs.findIndex((tab) => createId(tab.title, tab.id) === state.activeTabId);
+                if (deltaX > 0 && currentIndex > 0) {
+                    // Swipe right - go to previous tab
+                    const prevTab = attrs.tabs[currentIndex - 1];
+                    if (!prevTab.disabled && !prevTab.href) {
+                        const newTabId = createId(prevTab.title, prevTab.id);
+                        state.activeTabId = newTabId;
+                        if (attrs.onTabChange) {
+                            attrs.onTabChange(newTabId);
+                        }
+                    }
+                }
+                else if (deltaX < 0 && currentIndex < attrs.tabs.length - 1) {
+                    // Swipe left - go to next tab
+                    const nextTab = attrs.tabs[currentIndex + 1];
+                    if (!nextTab.disabled && !nextTab.href) {
+                        const newTabId = createId(nextTab.title, nextTab.id);
+                        state.activeTabId = newTabId;
+                        if (attrs.onTabChange) {
+                            attrs.onTabChange(newTabId);
+                        }
+                    }
+                }
+            }
+            state.isDragging = false;
+            state.translateX = 0;
+            // m.redraw();
+        };
+        /** Initialize active tab - selectedTabId takes precedence, next active property or first available tab */
+        const setActiveTabId = (anchoredTabs, selectedTabId) => {
+            const selectedTab = selectedTabId ? anchoredTabs.find((a) => a.tabId === selectedTabId) : undefined;
+            if (selectedTab) {
+                state.activeTabId = selectedTab.tabId;
+                selectedTab.active = true;
+                return selectedTab;
+            }
+            const activeTab = anchoredTabs.find((t) => t.active);
+            if (activeTab) {
+                // Active tab property takes precedence over selectedTabId
+                state.activeTabId = activeTab.tabId;
+                return activeTab;
+            }
+            // Default to first non-disabled tab
+            const firstAvailableTab = anchoredTabs.find((t) => !t.disabled && !t.href);
+            if (firstAvailableTab) {
+                state.activeTabId = firstAvailableTab.tabId;
+                firstAvailableTab.active = true;
+                return firstAvailableTab;
+            }
+            return undefined;
+        };
+        return {
+            oninit: ({ attrs }) => {
+                const anchoredTabs = attrs.tabs.map(toAnchored());
+                setActiveTabId(anchoredTabs, attrs.selectedTabId);
+            },
+            oncreate: () => {
+                updateIndicator();
+                m.redraw();
+            },
+            view: ({ attrs }) => {
+                const { tabWidth, tabs, className, style, swipeable = false } = attrs;
+                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+                const anchoredTabs = tabs.map(toAnchored());
+                const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
+                updateIndicator();
+                return m('.row', [
+                    // Tab headers
+                    m('.col.s12', m('ul.tabs', {
+                        className: cn,
+                        style,
+                    }, [
+                        ...anchoredTabs.map((tab) => {
+                            const { className: tabClassName, title, anchorId, tabId, disabled, target, href } = tab;
+                            const cn = ['tab', tabWidth === 'fixed' ? `col s${Math.floor(12 / tabs.length)}` : '', tabClassName]
+                                .filter(Boolean)
+                                .join(' ')
+                                .trim();
+                            return m('li', {
+                                key: tabId,
+                                id: tabId,
+                                className: cn,
+                                disabled,
+                            }, m('a', {
+                                id: anchorId,
+                                className: tab.active ? 'active' : undefined,
+                                target,
+                                href: href || `#${anchorId}`,
+                                onclick: disabled || href
+                                    ? undefined
+                                    : (e) => {
+                                        e.preventDefault();
+                                        handleTabClick(tabId, e.target, attrs);
+                                    },
+                                style: disabled ? { opacity: '0.6', cursor: 'not-allowed' } : undefined,
+                            }, title));
+                        }),
+                        // Add the indicator element
+                        m('li.indicator', {
+                            key: 'indicator',
+                            style: {
+                                display: state.activeTabId ? 'block' : 'none',
+                                left: state.indicatorStyle.left,
+                                width: state.indicatorStyle.width,
+                                transition: 'left 0.35s ease, width 0.35s ease',
+                            },
+                        }),
+                    ]), activeTab &&
+                        m('.col.s12', {
+                            ontouchstart: swipeable ? handleTouchStart : undefined,
+                            ontouchend: swipeable ? (e) => handleTouchEnd(e, attrs) : undefined,
+                            style: swipeable ? { touchAction: 'pan-y' } : undefined,
+                        }, m('.tab-content', {
+                            className: activeTab.contentClass,
+                        }, activeTab.vnode))),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Mithril Factory Component for Multi-Select Dropdown with search
+     */
+    const SearchSelect = () => {
+        //  (): <T extends string | number>(): Component<SearchSelectAttrs<T>, SearchSelectState<T>> => {
+        // State initialization
+        const state = {
+            isOpen: false,
+            selectedOptions: [], //options.filter((o) => iv.includes(o.id)),
+            searchTerm: '',
+            options: [],
+            inputRef: null,
+            dropdownRef: null,
+            focusedIndex: -1,
+            onchange: null,
+        };
+        const componentId = uniqueId();
+        const searchInputId = `${componentId}-search`;
+        // Handle click outside
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (state.dropdownRef && state.dropdownRef.contains(target)) {
+                // Click inside dropdown, do nothing
+                return;
+            }
+            if (state.inputRef && state.inputRef.contains(target)) {
+                // Click on trigger handled by onclick event
+                return;
+            }
+            else {
+                // Click outside, close dropdown
+                state.isOpen = false;
+                m.redraw();
+            }
+        };
+        // Handle keyboard navigation
+        const handleKeyDown = (e, filteredOptions, showAddNew) => {
+            if (!state.isOpen)
+                return;
+            const totalOptions = filteredOptions.length + (showAddNew ? 1 : 0);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    state.focusedIndex = Math.min(state.focusedIndex + 1, totalOptions - 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    state.focusedIndex = Math.max(state.focusedIndex - 1, -1);
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (state.focusedIndex >= 0) {
+                        if (showAddNew && state.focusedIndex === filteredOptions.length) {
+                            // Handle add new option
+                            return 'addNew';
+                        }
+                        else if (state.focusedIndex < filteredOptions.length) {
+                            toggleOption(filteredOptions[state.focusedIndex]);
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    break;
+            }
+            return null;
+        };
+        // Toggle option selection
+        const toggleOption = (option) => {
+            if (option.disabled)
+                return;
+            state.selectedOptions = state.selectedOptions.some((item) => item.id === option.id)
+                ? state.selectedOptions.filter((item) => item.id !== option.id)
+                : [...state.selectedOptions, option];
+            state.searchTerm = '';
+            state.focusedIndex = -1;
+            state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+        };
+        // Remove a selected option
+        const removeOption = (option) => {
+            state.selectedOptions = state.selectedOptions.filter((item) => item.id !== option.id);
+            state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+        };
+        return {
+            oninit: ({ attrs: { options = [], initialValue = [], onchange } }) => {
+                state.options = options;
+                state.selectedOptions = options.filter((o) => initialValue.includes(o.id));
+                state.onchange = onchange;
+            },
+            oncreate() {
+                document.addEventListener('click', handleClickOutside);
+            },
+            onremove() {
+                document.removeEventListener('click', handleClickOutside);
+            },
+            view({ attrs: { 
+            // onchange,
+            oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label,
+            // maxHeight = '25rem',
+             }, }) {
+                // Safely filter options
+                const filteredOptions = state.options.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
+                    !state.selectedOptions.some((selected) => selected.id === option.id));
+                // Check if we should show the "add new option" element
+                const showAddNew = oncreateNewOption &&
+                    state.searchTerm &&
+                    !filteredOptions.some((o) => (o.label || o.id.toString()).toLowerCase() === state.searchTerm.toLowerCase());
+                // Render the dropdown
+                return m('.input-field.multi-select-dropdown', { className }, [
+                    m('.chips.chips-initial.chips-container', {
+                        oncreate: ({ dom }) => {
+                            state.inputRef = dom;
+                        },
+                        onclick: (e) => {
+                            // console.log('SearchSelect clicked', state.isOpen, e); // Debug log
+                            e.preventDefault();
+                            e.stopPropagation();
+                            state.isOpen = !state.isOpen;
+                            // console.log('SearchSelect state changed to', state.isOpen); // Debug log
+                        },
+                        style: {
+                            display: 'flex',
+                            alignItems: 'end',
+                            flexWrap: 'wrap',
+                            cursor: 'pointer',
+                            position: 'relative',
+                        },
+                    }, [
+                        // TODO FIXME Add to existing input
+                        // Hidden input for label association and accessibility
+                        m('input', {
+                            type: 'text',
+                            id: componentId,
+                            value: state.selectedOptions.map((o) => o.label || o.id.toString()).join(', '),
+                            readonly: true,
+                            style: { position: 'absolute', left: '-9999px', opacity: 0 },
+                        }),
+                        // Selected Options (chips)
+                        ...state.selectedOptions.map((option) => m('.chip', [
+                            option.label || option.id.toString(),
+                            m(MaterialIcon, {
+                                name: 'close',
+                                className: 'close',
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    removeOption(option);
+                                },
+                            }),
+                        ])),
+                        // Placeholder when no options selected
+                        state.selectedOptions.length === 0 &&
+                            placeholder &&
+                            m('span.placeholder', {
+                                style: {
+                                    color: '#9e9e9e',
+                                    flexGrow: 1,
+                                    padding: '8px 0',
+                                },
+                            }, placeholder),
+                        // Spacer to push caret to the right
+                        m('span.spacer', { style: { flexGrow: 1 } }),
+                        m(MaterialIcon, {
+                            name: 'caret',
+                            direction: state.isOpen ? 'up' : 'down',
+                            style: { marginLeft: 'auto', cursor: 'pointer' },
+                        }),
+                    ]),
+                    // Label
+                    label &&
+                        m('label', {
+                            for: componentId,
+                            class: placeholder || state.selectedOptions.length > 0 ? 'active' : '',
+                        }, label),
+                    // Dropdown Menu
+                    state.isOpen &&
+                        m('ul.dropdown-content.select-dropdown', {
+                            oncreate: ({ dom }) => {
+                                state.dropdownRef = dom;
+                            },
+                            onremove: () => {
+                                state.dropdownRef = null;
+                            },
+                            style: getDropdownStyles(state.inputRef),
+                        }, [
+                            m('li', // Search Input
+                            {
+                                class: 'search-wrapper',
+                                style: { padding: '0 16px', position: 'relative' },
+                            }, [
+                                m('input', {
+                                    type: 'text',
+                                    id: searchInputId,
+                                    placeholder: searchPlaceholder,
+                                    value: state.searchTerm || '',
+                                    oncreate: ({ dom }) => {
+                                        // Auto-focus the search input when dropdown opens
+                                        dom.focus();
+                                    },
+                                    oninput: (e) => {
+                                        state.searchTerm = e.target.value;
+                                        state.focusedIndex = -1; // Reset focus when typing
+                                    },
+                                    onkeydown: async (e) => {
+                                        const result = handleKeyDown(e, filteredOptions, !!showAddNew);
+                                        if (result === 'addNew' && oncreateNewOption) {
+                                            const option = await oncreateNewOption(state.searchTerm);
+                                            toggleOption(option);
+                                        }
+                                    },
+                                    style: {
+                                        width: '100%',
+                                        outline: 'none',
+                                        fontSize: '0.875rem',
+                                        border: 'none',
+                                        padding: '8px 0',
+                                        borderBottom: '1px solid #9e9e9e',
+                                    },
+                                }),
+                            ]),
+                            // No options found message or list of options
+                            ...(filteredOptions.length === 0 && !showAddNew
+                                ? [
+                                    m('li', 
+                                    // {
+                                    //   style: getNoOptionsStyles(),
+                                    // },
+                                    noOptionsFound),
+                                ]
+                                : []),
+                            // Add new option item
+                            ...(showAddNew
+                                ? [
+                                    m('li', {
+                                        onclick: async () => {
+                                            const option = await oncreateNewOption(state.searchTerm);
+                                            toggleOption(option);
+                                        },
+                                        class: state.focusedIndex === filteredOptions.length ? 'active' : '',
+                                        onmouseover: () => {
+                                            state.focusedIndex = filteredOptions.length;
+                                        },
+                                    }, [m('span', `+ "${state.searchTerm}"`)]),
+                                ]
+                                : []),
+                            // List of filtered options
+                            ...filteredOptions.map((option, index) => m('li', {
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    toggleOption(option);
+                                },
+                                class: `${option.disabled ? 'disabled' : ''} ${state.focusedIndex === index ? 'active' : ''}`.trim(),
+                                onmouseover: () => {
+                                    if (!option.disabled) {
+                                        state.focusedIndex = index;
+                                    }
+                                },
+                            }, m('span', [
+                                m('input', {
+                                    type: 'checkbox',
+                                    checked: state.selectedOptions.some((selected) => selected.id === option.id),
+                                }),
+                                option.label || option.id.toString(),
+                            ]))),
+                        ]),
+                ]);
+            },
+        };
+    };
+
+    exports.AnchorItem = AnchorItem;
+    exports.Autocomplete = Autocomplete;
+    exports.Button = Button;
+    exports.ButtonFactory = ButtonFactory;
+    exports.Carousel = Carousel;
+    exports.CharacterCounter = CharacterCounter;
+    exports.Chips = Chips;
+    exports.CodeBlock = CodeBlock;
+    exports.Collapsible = Collapsible;
+    exports.CollapsibleItem = CollapsibleItem;
+    exports.Collection = Collection;
+    exports.ColorInput = ColorInput;
+    exports.DatePicker = DatePicker;
+    exports.Dropdown = Dropdown;
+    exports.EmailInput = EmailInput;
+    exports.FileInput = FileInput;
+    exports.FlatButton = FlatButton;
+    exports.FloatingActionButton = FloatingActionButton;
+    exports.HelperText = HelperText;
+    exports.Icon = Icon;
+    exports.InputCheckbox = InputCheckbox;
+    exports.Label = Label;
+    exports.LargeButton = LargeButton;
+    exports.ListItem = ListItem;
+    exports.Mandatory = Mandatory;
+    exports.MaterialBox = MaterialBox;
+    exports.ModalPanel = ModalPanel;
+    exports.NumberInput = NumberInput;
+    exports.Options = Options;
+    exports.Pagination = Pagination;
+    exports.Parallax = Parallax;
+    exports.PasswordInput = PasswordInput;
+    exports.RadioButton = RadioButton;
+    exports.RadioButtons = RadioButtons;
+    exports.RangeInput = RangeInput;
+    exports.RoundIconButton = RoundIconButton;
+    exports.SearchSelect = SearchSelect;
+    exports.SecondaryContent = SecondaryContent;
+    exports.Select = Select;
+    exports.SmallButton = SmallButton;
+    exports.SubmitButton = SubmitButton;
+    exports.Switch = Switch;
+    exports.Tabs = Tabs;
+    exports.TextArea = TextArea;
+    exports.TextInput = TextInput;
+    exports.TimePicker = TimePicker;
+    exports.UrlInput = UrlInput;
+    exports.getDropdownStyles = getDropdownStyles;
+    exports.isNumeric = isNumeric;
+    exports.padLeft = padLeft;
+    exports.range = range;
+    exports.uniqueId = uniqueId;
+    exports.uuid4 = uuid4;
+
+}));