mithril-materialized 1.4.2 → 2.0.0-beta.1

package/dist/index.esm.js

@@ -1,2 +1,4211 @@
-import e from"mithril";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},t.apply(this,arguments)}function n(e,t){if(null==e)return{};var n,i,a={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(n=o[i])>=0||(a[n]=e[n]);return a}var i,a=function(){return"idxxxxxxxx".replace(/[x]/g,function(){return(16*Math.random()|0).toString(16)})},o=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)})},r=function(e){return!isNaN(parseFloat(e))&&isFinite(e)},l=function(e,t,n){return void 0===t&&(t=2),void 0===n&&(n="0"),String(e).padStart(t,n)},c=["label","id","isMandatory","isActive","className"],s={view:function(t){return e("span.mandatory",t.attrs,"*")}},d=function(){return{view:function(i){var a=i.attrs,o=a.label,r=a.id,l=a.isMandatory,d=a.isActive,u=a.className,p=n(a,c);return o?e("label",t({},p,{className:[u,d?"active":""].filter(Boolean).join(" ").trim(),for:r}),[e.trust(o),l?e(s):void 0]):void 0}}},u=function(){return{view:function(t){var n=t.attrs,i=n.helperText,a=n.dataError,o=n.dataSuccess;return i||a||o?e("span.helper-text.left",{className:n.className,"data-error":a,"data-success":o},i?e.trust(i):""):void 0}}},p=["label","helperText","initialValue","onchange","newRow","className","style","iconName","isMandatory"],f=function(){var i={id:a()};return{view:function(a){var o=a.attrs,r=o.id||i.id,l=o.label,c=o.helperText,s=o.initialValue,f=o.onchange,m=o.newRow,v=o.className,h=void 0===v?"col s12":v,g=o.style,b=o.iconName,y=o.isMandatory,w=n(o,p);return e(".input-field"+(m?".clear":""),{className:m?h+" clear":h,style:g},[b?e("i.material-icons.prefix",b):"",e("input",t({},w,{className:"autocomplete",type:"text",tabindex:0,id:r,oncreate:function(e){M.Autocomplete.init(e.dom,o)},onchange:f?function(e){e.target&&e.target.value&&f(e.target.value)}:void 0,value:s})),e(d,{label:l,id:r,isMandatory:y,isActive:s}),e(u,{helperText:c})])}}},m=["iconName"],v=function(){return{view:function(t){var i=t.attrs,a=i.iconName,o=n(i,m);return e("i.material-icons",o,a)}}},h=["modalId","tooltip","tooltipPostion","iconName","iconClass","label","className","attr"],g=function(i,a,o){return void 0===o&&(o=""),function(){return{view:function(r){var l=r.attrs,c=l.modalId,s=l.tooltip,d=l.tooltipPostion,u=l.iconName,p=l.iconClass,f=l.label,m=l.className,g=l.attr,b=n(l,h),y=[c?"modal-trigger":"",s?"tooltipped":"",a,m].filter(Boolean).join(" ").trim();return e(i,t({},b,g,{className:y,href:c?"#"+c:void 0,"data-position":s?d||"top":void 0,"data-tooltip":s||void 0,type:o}),u?e(v,{iconName:u,className:p||"left"}):void 0,f||void 0)}}}},b=g("a","waves-effect waves-light btn","button"),y=g("a","waves-effect waves-light btn-large","button"),w=g("a","waves-effect waves-light btn-small","button"),x=g("a","waves-effect waves-teal btn-flat","button"),k=g("button","btn-floating btn-large waves-effect waves-light","button"),N=g("button","btn waves-effect waves-light","submit"),I=["href","src","alt"],A=function(){return{view:function(i){var a=i.attrs,o=a.href,r=a.src,l=a.alt,c=n(a,I);return e("a.carousel-item",t({},c,{href:o}),e("img",{src:r,alt:l}))}}},C=function(){return{view:function(t){var n=t.attrs,i=n.items;return i&&i.length>0?e(".carousel",{oncreate:function(e){M.Carousel.init(e.dom,n)}},i.map(function(t){return e(A,t)})):void 0}}},T=function(){var t={chipsData:[],selectedChip:null,focused:!1,inputValue:"",inputId:a(),autocompleteItems:[],selectedAutocompleteIndex:-1,showAutocomplete:!1},n=null,i=function(){var e;if(null!=(e=n)&&null!=(e=e.attrs.autocompleteOptions)&&e.data){var i=n.attrs.autocompleteOptions,a=i.data,o=i.minLength,r=void 0===o?1:o,l=t.inputValue.toLowerCase();if(l.length<r)return t.autocompleteItems=[],void(t.showAutocomplete=!1);var c=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}})}(a),s=c.filter(function(e){return e.tag.toLowerCase().includes(l)});t.autocompleteItems=s.slice(0,n.attrs.autocompleteOptions.limit||Infinity),t.showAutocomplete=t.autocompleteItems.length>0,t.selectedAutocompleteIndex=-1}else t.autocompleteItems=[]},o=function(e){r({tag:e.tag,image:e.image,alt:e.alt}),t.inputValue="",t.showAutocomplete=!1,t.selectedAutocompleteIndex=-1},r=function(e){if(n){var i=n.attrs,a=i.limit,o=void 0===a?Infinity:a,r=i.onChipAdd,l=i.onchange;!function(e,t){return!(!e.tag||""===e.tag.trim()||t.some(function(t){return t.tag===e.tag}))}(e,t.chipsData)||t.chipsData.length>=o||(t.chipsData=[].concat(t.chipsData,[e]),t.inputValue="",r&&r(e),l&&l(t.chipsData))}},l=function(e){if(n){var i=n.attrs,a=i.onChipDelete,o=i.onchange,r=t.chipsData[e];t.chipsData=t.chipsData.filter(function(t,n){return n!==e}),t.selectedChip=null,a&&a(r),o&&o(t.chipsData)}},c=function(e){if(n){var i=n.attrs.onChipSelect;t.selectedChip=e,i&&t.chipsData[e]&&i(t.chipsData[e])}},s=function(i){var a=i.target;if(t.showAutocomplete){if("ArrowDown"===i.key){var s;i.preventDefault(),t.selectedAutocompleteIndex=Math.min(t.selectedAutocompleteIndex+1,t.autocompleteItems.length-1);var d=null==(s=n)?void 0:s.dom.querySelector(".autocomplete-item.selected");return d&&d.scrollIntoView({block:"nearest"}),void e.redraw()}if("ArrowUp"===i.key){var u;i.preventDefault(),t.selectedAutocompleteIndex=Math.max(t.selectedAutocompleteIndex-1,-1);var p=null==(u=n)?void 0:u.dom.querySelector(".autocomplete-item.selected");return p&&p.scrollIntoView({block:"nearest"}),void e.redraw()}if("Enter"===i.key&&t.selectedAutocompleteIndex>=0)return i.preventDefault(),void o(t.autocompleteItems[t.selectedAutocompleteIndex])}"Enter"===i.key&&a.value.trim()?(i.preventDefault(),r({tag:a.value.trim()})):"Backspace"===i.key&&!a.value&&t.chipsData.length>0?(i.preventDefault(),l(t.chipsData.length-1)):"ArrowLeft"===i.key&&!a.value&&t.chipsData.length&&(i.preventDefault(),c(t.chipsData.length-1))};return{oninit:function(e){t.chipsData=e.attrs.data||[]},oncreate:function(e){n=e},onremove:function(){n=null},view:function(a){var r=a.attrs,p=r.isMandatory,f=void 0===p?r.required:p,m=r.className,v=r.label,h=r.helperText,g=r.placeholder,b=r.secondaryPlaceholder;return e(".input-field",{id:r.id,className:void 0===m?"col s12":m},[e(".chips.chips-initial",{class:"chips-container "+(t.focused?"focused":"")+" "+(g?"chips-placeholder":"")},[t.chipsData.map(function(i,a){return e(".chip",{key:i.tag+"-"+a,tabindex:0,class:t.selectedChip===a?"selected":"",onkeydown:function(e){return function(e,i){if("Backspace"===e.key||"Delete"===e.key){e.preventDefault(),l(i);var a=Math.max(i-1,0);t.chipsData.length&&c(a)}else if("ArrowLeft"===e.key&&i>0)c(i-1);else if("ArrowRight"===e.key)if(i<t.chipsData.length-1)c(i+1);else{var o,r=null==(o=n)?void 0:o.dom.querySelector(".chips-input");r&&r.focus()}}(e,a)}},[i.image&&e("img",{src:i.image,alt:i.alt||i.tag}),i.tag,e("i.material-icons.close",{onclick:function(e){e.stopPropagation(),l(a)}},"close")])}),e("input.chips-input.input",{id:t.inputId,title:"label",value:t.inputValue,placeholder:!t.chipsData.length&&g?g:t.chipsData.length&&b?b:"",oninput:function(e){t.inputValue=e.target.value,i()},onfocus:function(){t.focused=!0,t.selectedChip=null,i()},onblur:function(){t.focused=!1,setTimeout(function(){t.showAutocomplete=!1,t.selectedChip=null,e.redraw()},150)},onkeydown:s}),t.showAutocomplete&&e("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)"}},t.autocompleteItems.map(function(n,i){return e("li.autocomplete-item",{key:n.tag,class:t.selectedAutocompleteIndex===i?"selected":"",style:{padding:"12px 16px",cursor:"pointer",backgroundColor:t.selectedAutocompleteIndex===i?"#eee":"transparent"},onmousedown:function(e){e.preventDefault(),o(n)},onmouseover:function(){t.selectedAutocompleteIndex=i}},[n.image&&e("img.autocomplete-item-image",{src:n.image,alt:n.alt||n.tag,style:{width:"24px",height:"24px",marginRight:"8px",verticalAlign:"middle"}}),e("span.autocomplete-item-text",n.tag)])}))]),v&&e(d,{label:v,id:t.inputId,isMandatory:f,isActive:!!(t.focused||t.chipsData.length||g)}),h&&e(u,{helperText:h})])}}},D=["newRow","code","language","className"],V=function(){return{view:function(i){var a=i.attrs,o=a.newRow,r=a.code,l=a.language,c=a.className,s=n(a,D),d=l||"lang-TypeScript",u=d.replace("lang-",""),p=r instanceof Array?r.join("\n"):r,f=[o?"clear":"",d,c].filter(Boolean).join(" ").trim();return e("pre.codeblock"+(o?".clear":""),a,[e("div",e("label",u)),e("code",t({},s,{className:f}),p)])}}},O=function(){return{view:function(t){var n=t.attrs,i=n.header,a=n.body,o=n.iconName;return e(n.active?"li.active":"li",[i||o?e(".collapsible-header",[o?e("i.material-icons",o):void 0,i?"string"==typeof i?e("span",i):i:void 0]):void 0,a?e(".collapsible-body",a):void 0])}}},S=function(){return{oncreate:function(e){M.Collapsible.init(e.dom,e.attrs)},view:function(t){var n=t.attrs,i=n.items;return i&&i.length>0?e("ul.collapsible",{class:n.class||n.className,style:n.style,id:n.id},i.map(function(t){return e(O,t)})):void 0}}},R=["header","items","mode"],L=["title","active","href"],j=["items","header"],B=["items","header","mode"];!function(e){e[e.BASIC=0]="BASIC",e[e.LINKS=1]="LINKS",e[e.AVATAR=2]="AVATAR"}(i||(i={}));var E=function(e){return e&&/https?:\/\//.test(e)},F=function(){return{view:function(t){var n=t.attrs,i=n.href,a=n.iconName,o=void 0===a?"send":a,r=n.onclick,l=n.style,c={href:i,style:void 0===l?{cursor:"pointer"}:l,className:"secondary-content",onclick:r?function(){return r(n)}:void 0};return E(i)||!i?e("a[target=_]",c,e(v,{iconName:o})):e(e.route.Link,c,e(v,{iconName:o}))}}},K=function(e){return void 0===e&&(e=""),/\./.test(e)},P=function(){return{view:function(t){var n=t.attrs,a=n.item,o=a.title,r=a.content,l=void 0===r?"":r,c=a.active,s=a.iconName,d=a.avatar,u=a.className,p=a.onclick;return n.mode===i.AVATAR?e("li.collection-item.avatar",{className:c?"active":"",onclick:p?function(){return p(a)}:void 0},[K(d)?e("img.circle",{src:d}):e("i.material-icons.circle",{className:u},d),e("span.title",o),e("p",e.trust(l)),e(F,a)]):e("li.collection-item",{className:c?"active":""},s?e("div",[o,e(F,a)]):o)}}},_=function(){return{view:function(t){var a=t.attrs,o=a.header,r=a.items,l=a.mode,c=void 0===l?i.BASIC:l,s=n(a,R),d=r.map(function(t){return e(P,{key:t.id,item:t,mode:c})});return o?e("ul.collection.with-header",s,[e("li.collection-header",e("h4",o)),d]):e("ul.collection",s,d)}}},z=function(){return{view:function(i){var a=i.attrs.item,o=a.title,r=a.active,l=a.href,c=t({},n(a,L),{className:"collection-item "+(r?"active":""),href:l});return E(l)||!l?e("a[target=_]",c,o):e(e.route.Link,c,o)}}},H=function(){return{view:function(t){var i=t.attrs,a=i.items,o=i.header,r=n(i,j);return o?e(".collection.with-header",r,[e(".collection-header",e("h4",o)),a.map(function(t){return e(z,{key:t.id,item:t})})]):e(".collection",r,a.map(function(t){return e(z,{key:t.id,item:t})}))}}},U=function(){return{view:function(a){var o=a.attrs,r=o.items,l=o.header,c=o.mode,s=void 0===c?i.BASIC:c,d=n(o,B);return l||r&&r.length>0?s===i.LINKS?e(H,t({header:l,items:r},d)):e(_,t({header:l,items:r,mode:s},d)):void 0}}},q=["key","label","onchange","disabled","items","iconName","helperText","style","className"],W=function(){var t={};return{oninit:function(e){var n=e.attrs,i=n.id,o=void 0===i?a():i,r=n.initialValue,l=n.checkedId;t.id=o,t.initialValue=r||l},view:function(i){var a=i.attrs,o=a.key,r=a.label,l=a.onchange,c=a.disabled,s=void 0!==c&&c,d=a.items,p=a.iconName,f=a.helperText,m=a.style,v=a.className,h=void 0===v?"col s12":v,g=n(a,q),b=t.id,y=t.initialValue,w=y?d.filter(function(e){return e.id?e.id===y:e.label===y}).shift():void 0,x=w?w.label:r||"Select";return e(".input-field",{className:h,key:o,style:m},[p?e("i.material-icons.prefix",p):void 0,e(u,{helperText:f}),e("a.dropdown-trigger.btn.truncate[href=#]",{"data-target":b,disabled:s,className:"col s12",style:m||(p?"margin: 0.2em 0 0 3em;":void 0),oncreate:function(e){M.Dropdown.init(e.dom,g)}},x),e("ul.dropdown-content",{id:b},d.map(function(n){return e("li[tabindex=-1]",{className:n.divider?"divider":""},n.divider?void 0:e("a",{onclick:l?function(){t.initialValue=n.id||n.label,l(t.initialValue)}:void 0},[n.iconName?e("i.material-icons",n.iconName):void 0,n.label]))}))])}}},Y=["className","iconName","iconClass","position","style","buttons"],$=function(){return{view:function(t){var i=t.attrs,a=i.className,o=i.iconName,r=i.iconClass,l=void 0===r?"large":r,c=i.position,s=i.style,d=void 0===s?"left"===c||"inline-left"===c?"position: absolute; display: inline-block; left: 24px;":"right"===c||"inline-right"===c?"position: absolute; display: inline-block; right: 24px;":void 0:s,u=i.buttons,p=n(i,Y),f=e(".fixed-action-btn",{style:d,oncreate:function(e){return M.FloatingActionButton.init(e.dom,p)}},[e("a.btn-floating.btn-large",{className:a},e("i.material-icons",{classNames:l},o)),u?e("ul",u.map(function(t){return e("li",e("a.btn-floating",{className:t.className,onclick:function(e){return t.onClick&&t.onClick(e)}},e("i.material-icons",{className:t.iconClass},t.iconName)))})):void 0]);return"inline-right"===c||"inline-left"===c?e("div",{style:"position: relative; height: 70px;"},f):f}}},X=["className","helperText","iconName","id","initialValue","isMandatory","label","onchange","onkeydown","onkeypress","onkeyup","onblur","style"],G=["className","dataError","dataSuccess","helperText","iconName","id","initialValue","isMandatory","label","maxLength","newRow","onchange","onkeydown","onkeypress","onkeyup","onblur","style","validate"],J=function(){var i={id:a()};return{view:function(a){var o=a.attrs,r=o.className,l=void 0===r?"col s12":r,c=o.helperText,s=o.iconName,p=o.id,f=void 0===p?i.id:p,m=o.initialValue,v=o.isMandatory,h=o.label,g=o.onchange,b=o.onkeydown,y=o.onkeypress,w=o.onkeyup,x=o.onblur,k=o.style,N=n(o,X);return e(".input-field",{className:l,style:k},[s?e("i.material-icons.prefix",s):"",e("textarea.materialize-textarea",t({},N,{id:f,tabindex:0,oncreate:function(e){var t=e.dom;M.textareaAutoResize(t),o.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})),e(d,{label:h,id:f,isMandatory:v,isActive:m||o.placeholder}),e(u,{helperText:c})])}}},Q=function(i,o){return void 0===o&&(o=""),function(){var r={id:a()},l=function(e){var t=e.value;return!t||"number"!==i&&"range"!==i?t:+t},c=function(e,t){e.setCustomValidity("boolean"==typeof t?t?"":"Custom validation failed":t)};return{view:function(a){var s=a.attrs,p=s.className,f=void 0===p?"col s12":p,m=s.dataError,v=s.dataSuccess,h=s.helperText,g=s.iconName,b=s.id,y=void 0===b?r.id:b,w=s.initialValue,x=s.isMandatory,k=s.label,N=s.maxLength,I=s.newRow,A=s.onchange,C=s.onkeydown,T=s.onkeypress,D=s.onkeyup,V=s.onblur,O=s.style,S=s.validate,R=n(s,G),L=[I?"clear":"",o,f].filter(Boolean).join(" ").trim();return e(".input-field",{className:L,style:O},[g?e("i.material-icons.prefix",g):void 0,e("input.validate",t({},R,{type:i,tabindex:0,id:y,oncreate:function(e){var t,n=e.dom;(t=s.autofocus)&&("boolean"==typeof t?t:t())&&n.focus(),N&&M.CharacterCounter.init(n),"range"===i&&M.Range.init(n)},onkeyup:D?function(e){D(e,l(e.target))}:void 0,onkeydown:C?function(e){C(e,l(e.target))}:void 0,onkeypress:T?function(e){T(e,l(e.target))}:void 0,onblur:V,onupdate:S?function(e){var t=e.dom;c(t,S(l(t),t))}:void 0,onchange:function(e){var t=e.target;if(t){var n=l(t);A&&A(n),S&&c(t,S(n,t))}},value:w})),e(d,{label:k,id:y,isMandatory:x,isActive:!(void 0===w&&!s.placeholder&&"number"!==i&&"color"!==i&&"range"!==i)}),e(u,{helperText:h,dataError:m,dataSuccess:v})])}}}},Z=Q("text"),ee=Q("password"),te=Q("number"),ne=Q("url"),ie=Q("color"),ae=Q("range",".range-field"),oe=Q("email"),re=function(){var t,n=!1;return{view:function(i){var a=i.attrs,o=a.multiple,r=a.disabled,l=a.initialValue,c=a.placeholder,s=a.onchange,d=a.className,u=void 0===d?"col s12":d,p=a.accept,f=a.label,m=void 0===f?"File":f,v=p?p instanceof Array?p.join(", "):p:void 0;return e(".file-field.input-field",{className:a.class||u},[e(".btn",[e("span",m),e("input[type=file]",{title:m,accept:v,multiple:o,disabled:r,onchange:s?function(e){var t=e.target;t&&t.files&&s&&(n=!0,s(t.files))}:void 0})]),e(".file-path-wrapper",e("input.file-path.validate[type=text]",{placeholder:c,oncreate:function(e){t=e.dom,l&&(t.value=l)}})),(n||l)&&e("a.waves-effect.waves-teal.btn-flat",{style:{float:"right",position:"relative",top:"-3rem",padding:0},onclick:function(){n=!1,t.value="",s&&s({})}},e("i.material-icons","clear"))])}}},le=function(){return{view:function(t){var n=t.attrs,i=n.className,a=n.onchange,o=n.label,r=n.description;return e("div",{className:void 0===i?"col s12":i,style:n.style},e("label",[e("input[type=checkbox][tabindex=0]",{checked:n.checked,disabled:n.disabled,onclick:a?function(e){e.target&&void 0!==e.target.checked&&a(e.target.checked)}:void 0}),o?"string"==typeof o?e("span",o):o:void 0]),r&&e(u,{className:"input-checkbox-desc",helperText:r}))}}},ce=function(){var t={},n=function(e){return t.checkedIds.indexOf(e)>=0};return{oninit:function(e){var n=e.attrs,i=n.checkedId,a=i||n.initialValue;t.checkedId=i,t.checkedIds=a?a instanceof Array?[].concat(a):[a]:[]},view:function(i){var a=i.attrs,o=a.label,r=a.id,l=a.options,c=a.checkedId,s=a.description,p=a.className,f=void 0===p?"col s12":p,m=a.style,v=a.disabled,h=a.checkboxClass,g=a.newRow,b=a.isMandatory,y=a.onchange;c&&t.checkedId!==c&&(t.checkedId=c,t.checkedIds=c instanceof Array?c:[c]);var w=y?function(e,n){var i=t.checkedIds.filter(function(t){return t!==e});n&&i.push(e),t.checkedIds=i,y(i)}:void 0,x=[g?"clear":"",f].filter(Boolean).join(" ").trim();return e("div",{className:x,style:m},[e("div",{className:"input-field options"},e(d,{id:r,label:o,isMandatory:b})),e(u,{helperText:s})].concat(l.map(function(t){return e(le,{disabled:v||t.disabled,label:t.label,onchange:w?function(e){return w(t.id,e)}:void 0,className:t.className||h,checked:n(t.id),description:t.description})})))}}},se=function(){var t=function(e){return n.curKey=n.id=e},n={elementId:a(),id:"",curKey:"",kvc:function(t,n,i){var a=i.keyClass,o=void 0===a?".col.s4":a,r=i.valueClass,l=void 0===r?".col.s8":r,c=n instanceof Array?n.join(", "):"boolean"==typeof n?e(le,{label:" ",checked:n,disabled:!0,className:"checkbox-in-collection"}):n.toString();return{title:e(".row",{style:"margin-bottom: 0"},[e(o,e("b",t)),e(l,c)])}}},o=function(){n.id="",n.curKey=""};return{oninit:function(e){var t=e.attrs,i=t.keyValueConverter,a=t.id;i&&(n.kvc=i),a&&(n.elementId=a)},view:function(a){var r=a.attrs,l=r.className,c=void 0===l?"col s12":l,s=r.disabled,u=r.disallowArrays,p=r.header,f=r.iconName,m=r.iconNameKey,v=void 0===m?f?"label":void 0:m,h=r.isMandatory,g=r.label,b=r.labelKey,y=void 0===b?"Key":b,w=r.labelValue,k=void 0===w?"Value":w,N=r.properties,I=r.onchange,A=r.falsy,C=void 0===A?["false"]:A,M=r.truthy,T=void 0===M?["true"]:M,D=function(){return I?I(N):void 0},V=function(e,i){return Object.keys(e).map(function(t){return{key:t,value:e[t]}}).map(function(e){return function(e,i){var a=i.onclick;return i.id=i.id||e,i.active=e===n.curKey,i.onclick=a?function(){return t(e)&&a(i)}:function(){return t(e)},i}(e.key,n.kvc(e.key,e.value,{keyClass:i.keyClass,valueClass:i.valueClass}))})}(N,{keyClass:r.keyClass,valueClass:r.valueClass}),O=n.curKey,S=N[O],R="boolean"==typeof S||"number"==typeof S?S:S?S instanceof Array?"["+S.join(", ")+"]":S:"",L=n.elementId;return[e(".map-editor",e(".input-field",{className:c,style:"min-height: 1.5em;"},[f?e("i.material-icons.prefix",f):"",e(d,{label:g,isMandatory:h,isActive:V.length>0}),e(U,{id:L,items:V,mode:i.LINKS,header:p})])),s?void 0:[e(Z,{label:y,iconName:v,className:"col s5",initialValue:O,onchange:function(e){n.curKey=e,n.id&&(delete N[n.id],N[e]=S,n.id=e),D()}}),"string"==typeof R?e(J,{label:k,initialValue:R,className:"col s7",onchange:function(e){var t=function(e,t,n){return t.indexOf(e)>=0||!(n.indexOf(e)>=0)&&void 0}(e,T,C),n=void 0===t&&/^\s*\d+\s*$/i.test(e)?+e:void 0;N[O]="boolean"==typeof t?t:"number"==typeof n?n:function(e,t){if(void 0===t&&(t=!1),t)return e;if(e){var n=/\s*\[(.*)\]\s*/gi.exec(e);if(n&&2===n.length)return n[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?e(te,{label:k,initialValue:R,className:"col s7",onchange:function(e){N[O]=e,D()}}):e(le,{label:k,checked:R,className:"input-field col s7",onchange:function(e){N[O]=e,D()}}),e(".col.s12.right-align",[e(x,{iconName:"add",onclick:o}),e(x,{iconName:"delete",disabled:!O,onclick:function(){delete N[O],o(),D()}})])]]}}},de=function(){return{oncreate:function(e){M.Materialbox.init(e.dom,e.attrs)},view:function(t){return e("img.materialboxed",t.attrs)}}},ue=function(){return{oncreate:function(e){var t=e.attrs,n=t.onCreate,i=M.Modal.init(e.dom,t.options);n&&n(i)},view:function(n){var i=n.attrs,a=i.id,o=i.title,r=i.description,l=i.buttons,c=i.richContent,s=[i.className,i.fixedFooter?"modal-fixed-footer":"",i.bottomSheet?"bottom-sheet":""].filter(Boolean).join(" ").trim();return e(".modal",{id:a,className:s},[e(".modal-content",[e("h4",o),c&&"string"==typeof r?e.trust(r||""):"string"==typeof r?e("p",r):r]),l?e(".modal-footer",l.map(function(n){return e(x,t({},n,{className:"modal-close"}))})):void 0])}}},pe=function(){return{view:function(t){var n=t.attrs,i=n.title;return e("li",{className:n.active?"active":n.disabled?"disabled":"waves-effect"},"number"==typeof i?e(e.route.Link,{href:n.href},i):i)}}},fe=function(){var n={pagIndex:0};return{view:function(i){var a=i.attrs,o=a.items,r=a.curPage,l=void 0===r?1:r,c=a.size,s=void 0===c?Math.min(9,o.length):c,d=n.pagIndex,u=d*s,p=u+s,f=d>0,m=p<o.length,v=[{title:e("a",{onclick:function(){return f&&n.pagIndex--}},e("i.material-icons","chevron_left")),disabled:!f}].concat(o.filter(function(e,t){return u<=t&&t<p}),[{title:e("a",{onclick:function(){return m&&n.pagIndex++}},e("i.material-icons","chevron_right")),disabled:!m}]);return e("ul.pagination",v.map(function(n,i){return e(pe,t({title:u+i},n,{active:u+i===l}))}))}}},me=function(){return{oncreate:function(e){M.Parallax.init(e.dom,e.attrs)},view:function(t){var n=t.attrs.src;return n?e(".parallax-container",e(".parallax",e("img",{src:n}))):void 0}}},ve=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],he=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],ge=function(){var i={id:a()};return{view:function(a){var o=a.attrs,r=o.label,l=o.helperText,c=o.initialValue,s=o.newRow,p=o.className,f=void 0===p?"col s12":p,m=o.iconName,v=o.isMandatory,h=o.onchange,g=o.disabled,b=n(o,ve),y=i.id,w=h?function(){return i.dp&&h(i.dp.date)}:void 0,x=[s?"clear":"",f].filter(Boolean).join(" ").trim();return e(".input-field",{className:x,onremove:function(){return i.dp&&i.dp.destroy()}},[m?e("i.material-icons.prefix",m):"",e("input",t({},b,{type:"text",tabindex:0,className:"datepicker",id:y,disabled:g,oncreate:function(e){i.dp=M.Datepicker.init(e.dom,t({format:"yyyy/mm/dd",showClearBtn:!0,setDefaultDate:!0,defaultDate:c?new Date(c):new Date},b,{onClose:w}))}})),e(d,{label:r,id:y,isMandatory:v,isActive:!!c}),e(u,{helperText:l})])}}},be=function(){var i={id:a()};return{view:function(a){var o=a.attrs,r=o.label,l=o.helperText,c=o.initialValue,s=o.newRow,p=o.className,f=void 0===p?"col s12":p,m=o.iconName,v=o.isMandatory,h=o.onchange,g=o.disabled,b=n(o,he),y=i.id,w=new Date,x=h?function(){return i.tp&&h(i.tp.time||c||w.getHours()+":"+w.getMinutes())}:void 0,k=["input-field","timepicker",s?"clear":"",f].filter(Boolean).join(" ").trim();return e("div",{className:k,onremove:function(){return i.tp&&i.tp.destroy()}},[m?e("i.material-icons.prefix",m):"",e("input",t({},b,{type:"text",tabindex:0,id:y,disabled:g,value:c,oncreate:function(e){i.tp=M.Timepicker.init(e.dom,t({twelveHour:!1,showClearBtn:!0,defaultTime:c},b,{onCloseEnd:x}))}})),e(d,{label:r,id:y,isMandatory:v,isActive:c}),e(u,{helperText:l})])}}},ye=function(){return{view:function(t){var n=t.attrs,i=n.id,a=n.label,o=n.onchange,r=n.className;return e("div",{className:void 0===r?"col s12":r},e("label",[e("input[type=radio][tabindex=0]",{name:n.groupId,disabled:n.disabled,checked:n.checked,onclick:o?function(){return o(i)}:void 0}),e("span",e.trust(a))]))}}},we=function(){var n={groupId:a()};return{oninit:function(e){var t=e.attrs,i=t.checkedId,a=t.initialValue;n.oldCheckedId=i,n.checkedId=i||a},view:function(i){var a=i.attrs,o=a.id,r=a.checkedId,l=a.newRow,c=a.className,s=void 0===c?"col s12":c,u=a.label,p=void 0===u?"":u,f=a.disabled,m=a.description,v=a.options,h=a.isMandatory,g=a.checkboxClass,b=a.onchange;n.oldCheckedId!==r&&(n.oldCheckedId=n.checkedId=r);var y=n.groupId,w=n.checkedId,x=function(e){n.checkedId=e,b&&b(e)};return l&&(s+=" clear"),e("div",{id:o,className:s},[e("div",{className:"input-field options"},e(d,{id:o,label:p,isMandatory:h})),m?e("p.helper-text",e.trust(m)):""].concat(v.map(function(n){return e(ye,t({},n,{onchange:x,groupId:y,disabled:f,className:g,checked:n.id===w}))})))}}},xe=function(){var t={},n=function(e){return e.map(function(e){return e.id}).join("")},i=function(e,t,n){return void 0===n&&(n=!1),n||(t instanceof Array&&(e||"number"==typeof e)?t.indexOf(e)>=0:t===e)};return{oninit:function(e){var i=e.attrs,a=i.checkedId,o=i.initialValue;t.ids=n(i.options);var r=a||o;t.checkedId=a instanceof Array?[].concat(a):a,t.initialValue=null!=r?r instanceof Array?r.filter(function(e){return null!=e}):[r]:[]},view:function(a){var o=a.attrs,l=o.id,c=o.newRow,s=o.className,p=void 0===s?"col s12":s,f=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,A=void 0===I?"":I,C=o.dropdownOptions,T=o.onchange;t.checkedId!==f&&(t.initialValue=f?f instanceof Array?f:[f]:void 0);var D=t.initialValue,V=T?h?function(){var e=t.instance&&t.instance.getSelectedValues(),n=e?e.length>0&&r(e[0])?e.map(function(e){return+e}):e.filter(function(e){return null!==e||void 0!==e}):void 0;t.initialValue=n||[],T(t.initialValue)}:function(e){if(e&&e.currentTarget){var n=e.currentTarget,i=r(n.value)?+n.value:n.value;t.initialValue=void 0!==typeof i?[i]:[]}t.initialValue&&T(t.initialValue)}:void 0;c&&(p+=" clear");var O=!v.some(function(e){return i(e.id,D)}),S=v.reduce(function(e,t){return t.group&&e.indexOf(t.group)<0&&e.push(t.group),e},[]);return e(".input-field.select-space",{className:p,key:m,oncreate:h?function(e){return t.wrapper=e.dom}:void 0},[k&&e("i.material-icons.prefix",k),e("select",{id:l,title:g,disabled:N,multiple:h,oncreate:function(e){t.instance=M.FormSelect.init(e.dom,{classes:A,dropdownOptions:C})},onupdate:function(e){var i=e.dom;if(h){var a=k?1:0;!t.inputEl&&t.wrapper&&t.wrapper.childNodes&&t.wrapper.childNodes.length>0&&t.wrapper.childNodes[a].childNodes&&t.wrapper.childNodes[a].childNodes[0]&&(t.inputEl=t.wrapper.childNodes[a].childNodes[0]),t.inputEl&&t.inputEl.value&&t.inputEl.value.startsWith(w+", ")&&(t.inputEl.value=t.inputEl.value.replace(w+", ",""))}var o=n(v),r=f&&t.checkedId!==f.toString();t.ids!==o&&(t.ids=o,r=!0),(t.checkedId instanceof Array&&f instanceof Array?t.checkedId.join()!==f.join():t.checkedId!==f)&&(t.checkedId=f,r=!0),r&&(t.instance=M.FormSelect.init(i,{classes:A,dropdownOptions:C}))},onchange:V},e("option",{value:"",disabled:!0,selected:!!O||void 0},w),0===S.length?v.map(function(t,n){var a;return e("option",{value:t.id,title:t.title||void 0,disabled:t.disabled?"true":void 0,"data-icon":t.img||void 0,selected:i(t.id,D,0===n&&O&&!w)},null==(a=t.label)?void 0:a.replace("&amp;","&"))}):S.map(function(t){return e("optgroup",{label:t},v.filter(function(e){return e.group===t}).map(function(t,n){var a;return e("option",{value:t.id,title:t.title||void 0,disabled:t.disabled?"true":void 0,"data-icon":t.img||void 0,selected:i(t.id,D,0===n&&O&&!w)},null==(a=t.label)?void 0:a.replace("&amp;","&"))}))})),e(d,{label:g,isMandatory:x}),b&&e(u,{helperText:b})])}}},ke=["label","left","right","disabled","newRow","onchange","checked","isMandatory","className"],Ne=function(){var t={id:a()};return{view:function(i){var a=i.attrs,o=a.id||t.id,r=a.label,l=a.left,c=a.right,s=a.disabled,u=a.newRow,p=a.onchange,f=a.checked,m=a.isMandatory,v=a.className,h=void 0===v?"col s12":v,g=n(a,ke),b=["input-field",u?"clear":"",h].filter(Boolean).join(" ").trim();return e("div",{className:b},[r?e(d,{label:r||"",id:o,isMandatory:m,className:"active"}):void 0,e(".switch",g,e("label",[l||"Off",e("input[type=checkbox]",{id:o,disabled:s,checked:f,onclick:p?function(e){e.target&&void 0!==e.target.checked&&p(e.target.checked)}:void 0}),e("span.lever"),c||"On"]))])}}},Ie=function(){var t={},n=function(e,t){return t||e.replace(/ /g,"").toLowerCase()};return{view:function(i){var a=i.attrs,o=a.tabWidth,r=a.selectedTabId,l=a.tabs,c=a.className,s=a.style,d=a.duration,u=a.onShow,p=a.swipeable,f=a.responsiveThreshold,m=l.filter(function(e){return e.active}).shift(),v=r||(m?n(m.title,m.id):""),h=["fill"===o?"tabs-fixed-width":"",c].filter(Boolean).join(" ").trim();return e(".row",[e(".col.s12",e("ul.tabs",{className:h,style:s,oncreate:function(e){t.instance=M.Tabs.init(e.dom,{duration:d,onShow:u,responsiveThreshold:f,swipeable:p})},onupdate:function(){if(v){var e=document.getElementById("tab_"+v);e&&e.click()}},onremove:function(){return t.instance.destroy()}},l.map(function(t){var i=t.className,a=t.title,r=t.id,c=t.active,s=t.disabled,d=t.target,u=t.href,p=["fixed"===o?"col s"+Math.floor(12/l.length):"",i].filter(Boolean).join(" ").trim(),f=n(a,r);return e("li.tab",{className:p,disabled:s},e("a",{id:"tab_"+f,className:c?"active":"",target:d,href:u||"#"+f},a))}))),l.filter(function(e){return void 0===e.href}).map(function(t){var i=t.vnode,a=t.contentClass;return e(".col.s12",{id:n(t.title,t.id),className:a},i)})])}}},Ae=function(){return{view:function(t){var n=t.attrs,i=n.id,a=n.title,o=n.datetime,r=n.active,l=n.content,c=n.iconName,s=n.timeFormatter,d=n.onSelect;return e("li",{id:i,className:r?"active":void 0,onclick:d?function(){return d({id:i,title:a,datetime:o,active:r,content:l})}:void 0,style:d?"cursor: pointer;":void 0},[e(".mm_time",{datetime:o},[e("span",(0,n.dateFormatter)(o)),e("span",s(o))]),c?e(".mm_icon",e("i.material-icons",c)):void 0,e(".mm_label",[a?"string"==typeof a?e("h5",a):a:void 0,l?"string"==typeof l?e("p",l):l:void 0])])}}},Ce=function(){var n=function(e){return e.getUTCDate()+"/"+(e.getUTCMonth()+1)+"/"+e.getUTCFullYear()},i=function(e){return l(e.getUTCHours())+":"+l(e.getUTCMinutes())};return{view:function(a){var o=a.attrs,r=o.onSelect,l=o.timeFormatter,c=void 0===l?i:l,s=o.dateFormatter,d=void 0===s?n:s;return e("ul.mm_timeline",o.items.map(function(n){return e(Ae,t({onSelect:r,dateFormatter:d,timeFormatter:c},n))}))}}},Me=function(){var t={isOpen:!1,selectedOptions:[],searchTerm:"",options:[],inputRef:null,dropdownRef:null,focusedIndex:-1,onchange:null},n=function(n){var i=n.target;t.inputRef&&t.inputRef.contains(i)?(t.isOpen=!t.isOpen,e.redraw()):t.dropdownRef&&!t.dropdownRef.contains(i)&&(t.isOpen=!1,e.redraw())},i=function(n){if(t.isOpen){var i=t.options.filter(function(e){return(e.label||e.id.toString()).toLowerCase().includes((t.searchTerm||"").toLowerCase())&&!t.selectedOptions.some(function(t){return t.id===e.id})});switch(n.key){case"ArrowDown":n.preventDefault(),t.focusedIndex=Math.min(t.focusedIndex+1,i.length-1),e.redraw();break;case"ArrowUp":n.preventDefault(),t.focusedIndex=Math.max(t.focusedIndex-1,-1),e.redraw();break;case"Enter":n.preventDefault(),t.focusedIndex>=0&&t.focusedIndex<i.length&&a(i[t.focusedIndex]);break;case"Escape":n.preventDefault(),t.isOpen=!1,t.focusedIndex=-1,e.redraw()}}},a=function(n){n.disabled||(t.selectedOptions=t.selectedOptions.some(function(e){return e.id===n.id})?t.selectedOptions.filter(function(e){return e.id!==n.id}):[].concat(t.selectedOptions,[n]),t.searchTerm="",t.focusedIndex=-1,t.onchange&&t.onchange(t.selectedOptions.map(function(e){return e.id})),e.redraw())};return{oninit:function(e){var n=e.attrs,i=n.options,a=void 0===i?[]:i,o=n.initialValue,r=void 0===o?[]:o,l=n.onchange;t.options=a,t.selectedOptions=a.filter(function(e){return r.includes(e.id)}),t.onchange=l},oncreate:function(){document.addEventListener("click",n),document.addEventListener("keydown",i)},onremove:function(){document.removeEventListener("click",n),document.removeEventListener("keydown",i)},view:function(n){var i=n.attrs,o=i.oncreateNewOption,r=i.className,l=i.placeholder,c=i.searchPlaceholder,s=void 0===c?"Search options...":c,d=i.noOptionsFound,u=void 0===d?"No options found":d,p=i.label,f=i.maxHeight,m=void 0===f?"25rem":f,v=t.options.filter(function(e){return(e.label||e.id.toString()).toLowerCase().includes((t.searchTerm||"").toLowerCase())&&!t.selectedOptions.some(function(t){return t.id===e.id})}),h=o&&t.searchTerm&&!v.some(function(e){return(e.label||e.id.toString()).toLowerCase()===t.searchTerm.toLowerCase()});return e(".multi-select-dropdown.input-field",{className:r},[e("label",{class:l||t.selectedOptions.length>0?"active":""},p),e(".dropdown-trigger",{oncreate:function(e){t.inputRef=e.dom},style:{borderBottom:"2px solid #d1d5db",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer"}},[e(".selected-options",{style:{display:"flex",flexWrap:"wrap",minHeight:"50px",paddingTop:"12px"}},0===t.selectedOptions.length?[e("span",l)]:t.selectedOptions.map(function(n){return e(".chip",[n.label||n.id.toString(),e("button",{onclick:function(i){i.stopPropagation(),function(n){t.selectedOptions=t.selectedOptions.filter(function(e){return e.id!==n.id}),t.onchange&&t.onchange(t.selectedOptions.map(function(e){return e.id})),e.redraw()}(n)},style:{marginLeft:"0.25rem",background:"none",border:"none",cursor:"pointer"}},"×")])})),e("svg.caret",{class:"caret",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{d:"M7 10l5 5 5-5z"}),e("path",{d:"M0 0h24v24H0z",fill:"none"})])]),t.isOpen&&e(".dropdown-menu",{oncreate:function(e){t.dropdownRef=e.dom},onremove:function(){t.dropdownRef=null},style:{position:"absolute",width:"98%",marginTop:"0.4rem",zIndex:1e3}},[e("ul.dropdown-content.select-dropdown",{style:{maxHeight:m,opacity:1,display:"block",width:"100%"}},[e("li",{class:"search-wrapper",style:{padding:"0 16px",position:"relative"}},[e("input",{type:"text",placeholder:s,value:t.searchTerm||"",oninput:function(n){t.searchTerm=n.target.value,t.focusedIndex=-1,e.redraw()},style:{width:"100%",outline:"none",fontSize:"0.875rem"}})])].concat(0!==v.length||h?[]:[e("li",{style:{padding:"0.5rem",textAlign:"center",color:"#9ca3af"}},u)],h?[e("li",{onclick:function(){try{return Promise.resolve(o(t.searchTerm)).then(function(e){a(e)})}catch(e){return Promise.reject(e)}},style:{display:"flex",alignItems:"center",cursor:"pointer",background:t.focusedIndex===v.length?"#f3f4f6":""}},[e("span",'+ "'+t.searchTerm+'"')])]:[],v.map(function(n,i){return e("li",{onclick:function(){return a(n)},class:n.disabled?"disabled":void 0,style:{display:"flex",alignItems:"center",cursor:n.disabled?"not-allowed":"pointer",background:t.focusedIndex===i?"#f3f4f6":""}},e("span",[e("input",{type:"checkbox",checked:t.selectedOptions.some(function(e){return e.id===n.id}),style:{marginRight:"0.5rem"}}),n.label||n.id.toString()]))})))])])}}};export{z as AnchorItem,f as Autocomplete,b as Button,g as ButtonFactory,C as Carousel,A as CarouselItem,T as Chips,V as CodeBlock,S as Collapsible,O as CollapsibleItem,U as Collection,i as CollectionMode,ie as ColorInput,ge as DatePicker,W as Dropdown,oe as EmailInput,re as FileInput,x as FlatButton,$ as FloatingActionButton,u as HelperText,v as Icon,le as InputCheckbox,d as Label,y as LargeButton,P as ListItem,s as Mandatory,se as MapEditor,de as MaterialBox,ue as ModalPanel,te as NumberInput,ce as Options,fe as Pagination,me as Parallax,ee as PasswordInput,ye as RadioButton,we as RadioButtons,ae as RangeInput,k as RoundIconButton,Me as SearchSelect,F as SecondaryContent,xe as Select,w as SmallButton,N as SubmitButton,Ne as Switch,Ie as Tabs,J as TextArea,Z as TextInput,be as TimePicker,Ce as Timeline,ne as UrlInput,r as isNumeric,l as padLeft,a as uniqueId,o as uuid4};
-//# sourceMappingURL=index.esm.js.map
+import m from 'mithril';
+
+/******************************************************************************
+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;
+        },
+    };
+};
+
+var CollectionMode;
+(function (CollectionMode) {
+    CollectionMode[CollectionMode["BASIC"] = 0] = "BASIC";
+    CollectionMode[CollectionMode["LINKS"] = 1] = "LINKS";
+    CollectionMode[CollectionMode["AVATAR"] = 2] = "AVATAR";
+})(CollectionMode || (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 === 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 = 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 = CollectionMode.BASIC } = _b, params = __rest(_b, ["items", "header", "mode"]);
+            return header || (items && items.length > 0)
+                ? mode === 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(),
+                        ]))),
+                    ]),
+            ]);
+        },
+    };
+};
+
+export { AnchorItem, Autocomplete, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DatePicker, Dropdown, EmailInput, FileInput, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, Parallax, PasswordInput, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, SmallButton, SubmitButton, Switch, Tabs, TextArea, TextInput, TimePicker, UrlInput, getDropdownStyles, isNumeric, padLeft, range, uniqueId, uuid4 };