mithril-materialized 1.4.1 → 2.0.0-beta.1

package/dist/index.js

@@ -1,2 +1,4265 @@
-function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=/*#__PURE__*/e(require("mithril"));function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},a.apply(this,arguments)}function n(e,t){if(null==e)return{};var a,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(a=o[n])>=0||(i[a]=e[a]);return i}var i,o=function(){return"idxxxxxxxx".replace(/[x]/g,function(){return(16*Math.random()|0).toString(16)})},l=function(e){return!isNaN(parseFloat(e))&&isFinite(e)},r=function(e,t,a){return void 0===t&&(t=2),void 0===a&&(a="0"),String(e).padStart(t,a)},d=["label","id","isMandatory","isActive","className"],c={view:function(e){return t.default("span.mandatory",e.attrs,"*")}},u=function(){return{view:function(e){var i=e.attrs,o=i.label,l=i.id,r=i.isMandatory,u=i.isActive,s=i.className,f=n(i,d);return o?t.default("label",a({},f,{className:[s,u?"active":""].filter(Boolean).join(" ").trim(),for:l}),[t.default.trust(o),r?t.default(c):void 0]):void 0}}},s=function(){return{view:function(e){var a=e.attrs,n=a.helperText,i=a.dataError,o=a.dataSuccess;return n||i||o?t.default("span.helper-text.left",{className:a.className,"data-error":i,"data-success":o},n?t.default.trust(n):""):void 0}}},f=["label","helperText","initialValue","onchange","newRow","className","style","iconName","isMandatory"],p=["iconName"],m=function(){return{view:function(e){var a=e.attrs,i=a.iconName,o=n(a,p);return t.default("i.material-icons",o,i)}}},v=["modalId","tooltip","tooltipPostion","iconName","iconClass","label","className","attr"],h=function(e,i,o){return void 0===o&&(o=""),function(){return{view:function(l){var r=l.attrs,d=r.modalId,c=r.tooltip,u=r.tooltipPostion,s=r.iconName,f=r.iconClass,p=r.label,h=r.className,g=r.attr,x=n(r,v),b=[d?"modal-trigger":"",c?"tooltipped":"",i,h].filter(Boolean).join(" ").trim();return t.default(e,a({},x,g,{className:b,href:d?"#"+d:void 0,"data-position":c?u||"top":void 0,"data-tooltip":c||void 0,type:o}),s?t.default(m,{iconName:s,className:f||"left"}):void 0,p||void 0)}}}},g=h("a","waves-effect waves-light btn","button"),x=h("a","waves-effect waves-light btn-large","button"),b=h("a","waves-effect waves-light btn-small","button"),y=h("a","waves-effect waves-teal btn-flat","button"),w=h("button","btn-floating btn-large waves-effect waves-light","button"),k=h("button","btn waves-effect waves-light","submit"),N=["href","src","alt"],I=function(){return{view:function(e){var i=e.attrs,o=i.href,l=i.src,r=i.alt,d=n(i,N);return t.default("a.carousel-item",a({},d,{href:o}),t.default("img",{src:l,alt:r}))}}},C=["newRow","code","language","className"],A=function(){return{view:function(e){var a=e.attrs,n=a.header,i=a.body,o=a.iconName;return t.default(a.active?"li.active":"li",[n||o?t.default(".collapsible-header",[o?t.default("i.material-icons",o):void 0,n?"string"==typeof n?t.default("span",n):n:void 0]):void 0,i?t.default(".collapsible-body",i):void 0])}}},T=["header","items","mode"],D=["title","active","href"],O=["items","header"],S=["items","header","mode"];exports.CollectionMode=void 0,(i=exports.CollectionMode||(exports.CollectionMode={}))[i.BASIC=0]="BASIC",i[i.LINKS=1]="LINKS",i[i.AVATAR=2]="AVATAR";var V=function(e){return e&&/https?:\/\//.test(e)},R=function(){return{view:function(e){var a=e.attrs,n=a.href,i=a.iconName,o=void 0===i?"send":i,l=a.onclick,r=a.style,d={href:n,style:void 0===r?{cursor:"pointer"}:r,className:"secondary-content",onclick:l?function(){return l(a)}:void 0};return V(n)||!n?t.default("a[target=_]",d,t.default(m,{iconName:o})):t.default(t.default.route.Link,d,t.default(m,{iconName:o}))}}},B=function(e){return void 0===e&&(e=""),/\./.test(e)},L=function(){return{view:function(e){var a=e.attrs,n=a.item,i=n.title,o=n.content,l=void 0===o?"":o,r=n.active,d=n.iconName,c=n.avatar,u=n.className,s=n.onclick;return a.mode===exports.CollectionMode.AVATAR?t.default("li.collection-item.avatar",{className:r?"active":"",onclick:s?function(){return s(n)}:void 0},[B(c)?t.default("img.circle",{src:c}):t.default("i.material-icons.circle",{className:u},c),t.default("span.title",i),t.default("p",t.default.trust(l)),t.default(R,n)]):t.default("li.collection-item",{className:r?"active":""},d?t.default("div",[i,t.default(R,n)]):i)}}},j=function(){return{view:function(e){var a=e.attrs,i=a.header,o=a.items,l=a.mode,r=void 0===l?exports.CollectionMode.BASIC:l,d=n(a,T),c=o.map(function(e){return t.default(L,{key:e.id,item:e,mode:r})});return i?t.default("ul.collection.with-header",d,[t.default("li.collection-header",t.default("h4",i)),c]):t.default("ul.collection",d,c)}}},E=function(){return{view:function(e){var i=e.attrs.item,o=i.title,l=i.active,r=i.href,d=a({},n(i,D),{className:"collection-item "+(l?"active":""),href:r});return V(r)||!r?t.default("a[target=_]",d,o):t.default(t.default.route.Link,d,o)}}},F=function(){return{view:function(e){var a=e.attrs,i=a.items,o=a.header,l=n(a,O);return o?t.default(".collection.with-header",l,[t.default(".collection-header",t.default("h4",o)),i.map(function(e){return t.default(E,{key:e.id,item:e})})]):t.default(".collection",l,i.map(function(e){return t.default(E,{key:e.id,item:e})}))}}},P=function(){return{view:function(e){var i=e.attrs,o=i.items,l=i.header,r=i.mode,d=void 0===r?exports.CollectionMode.BASIC:r,c=n(i,S);return l||o&&o.length>0?d===exports.CollectionMode.LINKS?t.default(F,a({header:l,items:o},c)):t.default(j,a({header:l,items:o,mode:d},c)):void 0}}},K=["key","label","onchange","disabled","items","iconName","helperText","style","className"],_=["className","iconName","iconClass","position","style","buttons"],H=["className","helperText","iconName","id","initialValue","isMandatory","label","onchange","onkeydown","onkeypress","onkeyup","onblur","style"],z=["className","dataError","dataSuccess","helperText","iconName","id","initialValue","isMandatory","label","maxLength","newRow","onchange","onkeydown","onkeypress","onkeyup","onblur","style","validate"],U=function(){var e={id:o()};return{view:function(i){var o=i.attrs,l=o.className,r=void 0===l?"col s12":l,d=o.helperText,c=o.iconName,f=o.id,p=void 0===f?e.id:f,m=o.initialValue,v=o.isMandatory,h=o.label,g=o.onchange,x=o.onkeydown,b=o.onkeypress,y=o.onkeyup,w=o.onblur,k=o.style,N=n(o,H);return t.default(".input-field",{className:r,style:k},[c?t.default("i.material-icons.prefix",c):"",t.default("textarea.materialize-textarea",a({},N,{id:p,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:y?function(e){y(e,e.target.value)}:void 0,onkeydown:x?function(e){x(e,e.target.value)}:void 0,onkeypress:b?function(e){b(e,e.target.value)}:void 0,onblur:w})),t.default(u,{label:h,id:p,isMandatory:v,isActive:m||o.placeholder}),t.default(s,{helperText:d})])}}},q=function(e,i){return void 0===i&&(i=""),function(){var l={id:o()},r=function(t){var a=t.value;return!a||"number"!==e&&"range"!==e?a:+a},d=function(e,t){e.setCustomValidity("boolean"==typeof t?t?"":"Custom validation failed":t)};return{view:function(o){var c=o.attrs,f=c.className,p=void 0===f?"col s12":f,m=c.dataError,v=c.dataSuccess,h=c.helperText,g=c.iconName,x=c.id,b=void 0===x?l.id:x,y=c.initialValue,w=c.isMandatory,k=c.label,N=c.maxLength,I=c.newRow,C=c.onchange,A=c.onkeydown,T=c.onkeypress,D=c.onkeyup,O=c.onblur,S=c.style,V=c.validate,R=n(c,z),B=[I?"clear":"",i,p].filter(Boolean).join(" ").trim();return t.default(".input-field",{className:B,style:S},[g?t.default("i.material-icons.prefix",g):void 0,t.default("input.validate",a({},R,{type:e,tabindex:0,id:b,oncreate:function(t){var a,n=t.dom;(a=c.autofocus)&&("boolean"==typeof a?a:a())&&n.focus(),N&&M.CharacterCounter.init(n),"range"===e&&M.Range.init(n)},onkeyup:D?function(e){D(e,r(e.target))}:void 0,onkeydown:A?function(e){A(e,r(e.target))}:void 0,onkeypress:T?function(e){T(e,r(e.target))}:void 0,onblur:O,onupdate:V?function(e){var t=e.dom;d(t,V(r(t),t))}:void 0,onchange:function(e){var t=e.target;if(t){var a=r(t);C&&C(a),V&&d(t,V(a,t))}},value:y})),t.default(u,{label:k,id:b,isMandatory:w,isActive:!(void 0===y&&!c.placeholder&&"number"!==e&&"color"!==e&&"range"!==e)}),t.default(s,{helperText:h,dataError:m,dataSuccess:v})])}}}},W=q("text"),Y=q("password"),$=q("number"),X=q("url"),G=q("color"),J=q("range",".range-field"),Q=q("email"),Z=function(){return{view:function(e){var a=e.attrs,n=a.className,i=a.onchange,o=a.label,l=a.description;return t.default("div",{className:void 0===n?"col s12":n,style:a.style},t.default("label",[t.default("input[type=checkbox][tabindex=0]",{checked:a.checked,disabled:a.disabled,onclick:i?function(e){e.target&&void 0!==e.target.checked&&i(e.target.checked)}:void 0}),o?"string"==typeof o?t.default("span",o):o:void 0]),l&&t.default(s,{className:"input-checkbox-desc",helperText:l}))}}},ee=function(){return{view:function(e){var a=e.attrs,n=a.title;return t.default("li",{className:a.active?"active":a.disabled?"disabled":"waves-effect"},"number"==typeof n?t.default(t.default.route.Link,{href:a.href},n):n)}}},te=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],ae=["label","helperText","initialValue","newRow","className","iconName","isMandatory","onchange","disabled"],ne=function(){return{view:function(e){var a=e.attrs,n=a.id,i=a.label,o=a.onchange,l=a.className;return t.default("div",{className:void 0===l?"col s12":l},t.default("label",[t.default("input[type=radio][tabindex=0]",{name:a.groupId,disabled:a.disabled,checked:a.checked,onclick:o?function(){return o(n)}:void 0}),t.default("span",t.default.trust(i))]))}}},ie=["label","left","right","disabled","newRow","onchange","checked","isMandatory","className"],oe=function(){return{view:function(e){var a=e.attrs,n=a.id,i=a.title,o=a.datetime,l=a.active,r=a.content,d=a.iconName,c=a.timeFormatter,u=a.onSelect;return t.default("li",{id:n,className:l?"active":void 0,onclick:u?function(){return u({id:n,title:i,datetime:o,active:l,content:r})}:void 0,style:u?"cursor: pointer;":void 0},[t.default(".mm_time",{datetime:o},[t.default("span",(0,a.dateFormatter)(o)),t.default("span",c(o))]),d?t.default(".mm_icon",t.default("i.material-icons",d)):void 0,t.default(".mm_label",[i?"string"==typeof i?t.default("h5",i):i:void 0,r?"string"==typeof r?t.default("p",r):r:void 0])])}}};exports.AnchorItem=E,exports.Autocomplete=function(){var e={id:o()};return{view:function(i){var o=i.attrs,l=o.id||e.id,r=o.label,d=o.helperText,c=o.initialValue,p=o.onchange,m=o.newRow,v=o.className,h=void 0===v?"col s12":v,g=o.style,x=o.iconName,b=o.isMandatory,y=n(o,f);return t.default(".input-field"+(m?".clear":""),{className:m?h+" clear":h,style:g},[x?t.default("i.material-icons.prefix",x):"",t.default("input",a({},y,{className:"autocomplete",type:"text",tabindex:0,id:l,oncreate:function(e){M.Autocomplete.init(e.dom,o)},onchange:p?function(e){e.target&&e.target.value&&p(e.target.value)}:void 0,value:c})),t.default(u,{label:r,id:l,isMandatory:b,isActive:c}),t.default(s,{helperText:d})])}}},exports.Button=g,exports.ButtonFactory=h,exports.Carousel=function(){return{view:function(e){var a=e.attrs,n=a.items;return n&&n.length>0?t.default(".carousel",{oncreate:function(e){M.Carousel.init(e.dom,a)}},n.map(function(e){return t.default(I,e)})):void 0}}},exports.CarouselItem=I,exports.Chips=function(){var e={chipsData:[],selectedChip:null,focused:!1,inputValue:"",inputId:o(),autocompleteItems:[],selectedAutocompleteIndex:-1,showAutocomplete:!1},a=null,n=function(){var t;if(null!=(t=a)&&null!=(t=t.attrs.autocompleteOptions)&&t.data){var n=a.attrs.autocompleteOptions,i=n.data,o=n.minLength,l=void 0===o?1:o,r=e.inputValue.toLowerCase();if(r.length<l)return e.autocompleteItems=[],void(e.showAutocomplete=!1);var d=function(e){return Array.isArray(e)?e.map(function(e){return"string"==typeof e?{tag:e}:e}):Object.entries(e).map(function(e){var t=e[0];return{tag:t,value:e[1]||t}})}(i),c=d.filter(function(e){return e.tag.toLowerCase().includes(r)});e.autocompleteItems=c.slice(0,a.attrs.autocompleteOptions.limit||Infinity),e.showAutocomplete=e.autocompleteItems.length>0,e.selectedAutocompleteIndex=-1}else e.autocompleteItems=[]},i=function(t){l({tag:t.tag,image:t.image,alt:t.alt}),e.inputValue="",e.showAutocomplete=!1,e.selectedAutocompleteIndex=-1},l=function(t){if(a){var n=a.attrs,i=n.limit,o=void 0===i?Infinity:i,l=n.onChipAdd,r=n.onchange;!function(e,t){return!(!e.tag||""===e.tag.trim()||t.some(function(t){return t.tag===e.tag}))}(t,e.chipsData)||e.chipsData.length>=o||(e.chipsData=[].concat(e.chipsData,[t]),e.inputValue="",l&&l(t),r&&r(e.chipsData))}},r=function(t){if(a){var n=a.attrs,i=n.onChipDelete,o=n.onchange,l=e.chipsData[t];e.chipsData=e.chipsData.filter(function(e,a){return a!==t}),e.selectedChip=null,i&&i(l),o&&o(e.chipsData)}},d=function(t){if(a){var n=a.attrs.onChipSelect;e.selectedChip=t,n&&e.chipsData[t]&&n(e.chipsData[t])}},c=function(n){var o=n.target;if(e.showAutocomplete){if("ArrowDown"===n.key){var c;n.preventDefault(),e.selectedAutocompleteIndex=Math.min(e.selectedAutocompleteIndex+1,e.autocompleteItems.length-1);var u=null==(c=a)?void 0:c.dom.querySelector(".autocomplete-item.selected");return u&&u.scrollIntoView({block:"nearest"}),void t.default.redraw()}if("ArrowUp"===n.key){var s;n.preventDefault(),e.selectedAutocompleteIndex=Math.max(e.selectedAutocompleteIndex-1,-1);var f=null==(s=a)?void 0:s.dom.querySelector(".autocomplete-item.selected");return f&&f.scrollIntoView({block:"nearest"}),void t.default.redraw()}if("Enter"===n.key&&e.selectedAutocompleteIndex>=0)return n.preventDefault(),void i(e.autocompleteItems[e.selectedAutocompleteIndex])}"Enter"===n.key&&o.value.trim()?(n.preventDefault(),l({tag:o.value.trim()})):"Backspace"===n.key&&!o.value&&e.chipsData.length>0?(n.preventDefault(),r(e.chipsData.length-1)):"ArrowLeft"===n.key&&!o.value&&e.chipsData.length&&(n.preventDefault(),d(e.chipsData.length-1))};return{oninit:function(t){e.chipsData=t.attrs.data||[]},oncreate:function(e){a=e},onremove:function(){a=null},view:function(o){var l=o.attrs,f=l.isMandatory,p=void 0===f?l.required:f,m=l.className,v=l.label,h=l.helperText,g=l.placeholder,x=l.secondaryPlaceholder;return t.default(".input-field",{id:l.id,className:void 0===m?"col s12":m},[t.default(".chips.chips-initial",{class:"chips-container "+(e.focused?"focused":"")+" "+(g?"chips-placeholder":"")},[e.chipsData.map(function(n,i){return t.default(".chip",{key:n.tag+"-"+i,tabindex:0,class:e.selectedChip===i?"selected":"",onkeydown:function(t){return function(t,n){if("Backspace"===t.key||"Delete"===t.key){t.preventDefault(),r(n);var i=Math.max(n-1,0);e.chipsData.length&&d(i)}else if("ArrowLeft"===t.key&&n>0)d(n-1);else if("ArrowRight"===t.key)if(n<e.chipsData.length-1)d(n+1);else{var o,l=null==(o=a)?void 0:o.dom.querySelector(".chips-input");l&&l.focus()}}(t,i)}},[n.image&&t.default("img",{src:n.image,alt:n.alt||n.tag}),n.tag,t.default("i.material-icons.close",{onclick:function(e){e.stopPropagation(),r(i)}},"close")])}),t.default("input.chips-input.input",{id:e.inputId,title:"label",value:e.inputValue,placeholder:!e.chipsData.length&&g?g:e.chipsData.length&&x?x:"",oninput:function(t){e.inputValue=t.target.value,n()},onfocus:function(){e.focused=!0,e.selectedChip=null,n()},onblur:function(){e.focused=!1,setTimeout(function(){e.showAutocomplete=!1,e.selectedChip=null,t.default.redraw()},150)},onkeydown:c}),e.showAutocomplete&&t.default("ul.autocomplete-content.dropdown-content",{style:{display:"block",opacity:1,transform:"scaleX(1) scaleY(1)",position:"absolute",width:"100%",left:0,top:"100%",maxHeight:"200px",overflow:"auto",zIndex:1e3,backgroundColor:"#fff",boxShadow:"0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)"}},e.autocompleteItems.map(function(a,n){return t.default("li.autocomplete-item",{key:a.tag,class:e.selectedAutocompleteIndex===n?"selected":"",style:{padding:"12px 16px",cursor:"pointer",backgroundColor:e.selectedAutocompleteIndex===n?"#eee":"transparent"},onmousedown:function(e){e.preventDefault(),i(a)},onmouseover:function(){e.selectedAutocompleteIndex=n}},[a.image&&t.default("img.autocomplete-item-image",{src:a.image,alt:a.alt||a.tag,style:{width:"24px",height:"24px",marginRight:"8px",verticalAlign:"middle"}}),t.default("span.autocomplete-item-text",a.tag)])}))]),v&&t.default(u,{label:v,id:e.inputId,isMandatory:p,isActive:!!(e.focused||e.chipsData.length||g)}),h&&t.default(s,{helperText:h})])}}},exports.CodeBlock=function(){return{view:function(e){var i=e.attrs,o=i.newRow,l=i.code,r=i.language,d=i.className,c=n(i,C),u=r||"lang-TypeScript",s=u.replace("lang-",""),f=l instanceof Array?l.join("\n"):l,p=[o?"clear":"",u,d].filter(Boolean).join(" ").trim();return t.default("pre.codeblock"+(o?".clear":""),i,[t.default("div",t.default("label",s)),t.default("code",a({},c,{className:p}),f)])}}},exports.Collapsible=function(){return{oncreate:function(e){M.Collapsible.init(e.dom,e.attrs)},view:function(e){var a=e.attrs,n=a.items;return n&&n.length>0?t.default("ul.collapsible",{class:a.class||a.className,style:a.style,id:a.id},n.map(function(e){return t.default(A,e)})):void 0}}},exports.CollapsibleItem=A,exports.Collection=P,exports.ColorInput=G,exports.DatePicker=function(){var e={id:o()};return{view:function(i){var o=i.attrs,l=o.label,r=o.helperText,d=o.initialValue,c=o.newRow,f=o.className,p=void 0===f?"col s12":f,m=o.iconName,v=o.isMandatory,h=o.onchange,g=o.disabled,x=n(o,te),b=e.id,y=h?function(){return e.dp&&h(e.dp.date)}:void 0,w=[c?"clear":"",p].filter(Boolean).join(" ").trim();return t.default(".input-field",{className:w,onremove:function(){return e.dp&&e.dp.destroy()}},[m?t.default("i.material-icons.prefix",m):"",t.default("input",a({},x,{type:"text",tabindex:0,className:"datepicker",id:b,disabled:g,oncreate:function(t){e.dp=M.Datepicker.init(t.dom,a({format:"yyyy/mm/dd",showClearBtn:!0,setDefaultDate:!0,defaultDate:d?new Date(d):new Date},x,{onClose:y}))}})),t.default(u,{label:l,id:b,isMandatory:v,isActive:!!d}),t.default(s,{helperText:r})])}}},exports.Dropdown=function(){var e={};return{oninit:function(t){var a=t.attrs,n=a.id,i=void 0===n?o():n,l=a.initialValue,r=a.checkedId;e.id=i,e.initialValue=l||r},view:function(a){var i=a.attrs,o=i.key,l=i.label,r=i.onchange,d=i.disabled,c=void 0!==d&&d,u=i.items,f=i.iconName,p=i.helperText,m=i.style,v=i.className,h=void 0===v?"col s12":v,g=n(i,K),x=e.id,b=e.initialValue,y=b?u.filter(function(e){return e.id?e.id===b:e.label===b}).shift():void 0,w=y?y.label:l||"Select";return t.default(".input-field",{className:h,key:o,style:m},[f?t.default("i.material-icons.prefix",f):void 0,t.default(s,{helperText:p}),t.default("a.dropdown-trigger.btn.truncate[href=#]",{"data-target":x,disabled:c,className:"col s12",style:m||(f?"margin: 0.2em 0 0 3em;":void 0),oncreate:function(e){M.Dropdown.init(e.dom,g)}},w),t.default("ul.dropdown-content",{id:x},u.map(function(a){return t.default("li[tabindex=-1]",{className:a.divider?"divider":""},a.divider?void 0:t.default("a",{onclick:r?function(){e.initialValue=a.id||a.label,r(e.initialValue)}:void 0},[a.iconName?t.default("i.material-icons",a.iconName):void 0,a.label]))}))])}}},exports.EmailInput=Q,exports.FileInput=function(){var e,a=!1;return{view:function(n){var i=n.attrs,o=i.multiple,l=i.disabled,r=i.initialValue,d=i.placeholder,c=i.onchange,u=i.className,s=void 0===u?"col s12":u,f=i.accept,p=i.label,m=void 0===p?"File":p,v=f?f instanceof Array?f.join(", "):f:void 0;return t.default(".file-field.input-field",{className:i.class||s},[t.default(".btn",[t.default("span",m),t.default("input[type=file]",{title:m,accept:v,multiple:o,disabled:l,onchange:c?function(e){var t=e.target;t&&t.files&&c&&(a=!0,c(t.files))}:void 0})]),t.default(".file-path-wrapper",t.default("input.file-path.validate[type=text]",{placeholder:d,oncreate:function(t){e=t.dom,r&&(e.value=r)}})),(a||r)&&t.default("a.waves-effect.waves-teal.btn-flat",{style:{float:"right",position:"relative",top:"-3rem",padding:0},onclick:function(){a=!1,e.value="",c&&c({})}},t.default("i.material-icons","clear"))])}}},exports.FlatButton=y,exports.FloatingActionButton=function(){return{view:function(e){var a=e.attrs,i=a.className,o=a.iconName,l=a.iconClass,r=void 0===l?"large":l,d=a.position,c=a.style,u=void 0===c?"left"===d||"inline-left"===d?"position: absolute; display: inline-block; left: 24px;":"right"===d||"inline-right"===d?"position: absolute; display: inline-block; right: 24px;":void 0:c,s=a.buttons,f=n(a,_),p=t.default(".fixed-action-btn",{style:u,oncreate:function(e){return M.FloatingActionButton.init(e.dom,f)}},[t.default("a.btn-floating.btn-large",{className:i},t.default("i.material-icons",{classNames:r},o)),s?t.default("ul",s.map(function(e){return t.default("li",t.default("a.btn-floating",{className:e.className,onclick:function(t){return e.onClick&&e.onClick(t)}},t.default("i.material-icons",{className:e.iconClass},e.iconName)))})):void 0]);return"inline-right"===d||"inline-left"===d?t.default("div",{style:"position: relative; height: 70px;"},p):p}}},exports.HelperText=s,exports.Icon=m,exports.InputCheckbox=Z,exports.Label=u,exports.LargeButton=x,exports.ListItem=L,exports.Mandatory=c,exports.MapEditor=function(){var e=function(e){return a.curKey=a.id=e},a={elementId:o(),id:"",curKey:"",kvc:function(e,a,n){var i=n.keyClass,o=void 0===i?".col.s4":i,l=n.valueClass,r=void 0===l?".col.s8":l,d=a instanceof Array?a.join(", "):"boolean"==typeof a?t.default(Z,{label:" ",checked:a,disabled:!0,className:"checkbox-in-collection"}):a.toString();return{title:t.default(".row",{style:"margin-bottom: 0"},[t.default(o,t.default("b",e)),t.default(r,d)])}}},n=function(){a.id="",a.curKey=""};return{oninit:function(e){var t=e.attrs,n=t.keyValueConverter,i=t.id;n&&(a.kvc=n),i&&(a.elementId=i)},view:function(i){var o=i.attrs,l=o.className,r=void 0===l?"col s12":l,d=o.disabled,c=o.disallowArrays,s=o.header,f=o.iconName,p=o.iconNameKey,m=void 0===p?f?"label":void 0:p,v=o.isMandatory,h=o.label,g=o.labelKey,x=void 0===g?"Key":g,b=o.labelValue,w=void 0===b?"Value":b,k=o.properties,N=o.onchange,I=o.falsy,C=void 0===I?["false"]:I,M=o.truthy,A=void 0===M?["true"]:M,T=function(){return N?N(k):void 0},D=function(t,n){return Object.keys(t).map(function(e){return{key:e,value:t[e]}}).map(function(t){return function(t,n){var i=n.onclick;return n.id=n.id||t,n.active=t===a.curKey,n.onclick=i?function(){return e(t)&&i(n)}:function(){return e(t)},n}(t.key,a.kvc(t.key,t.value,{keyClass:n.keyClass,valueClass:n.valueClass}))})}(k,{keyClass:o.keyClass,valueClass:o.valueClass}),O=a.curKey,S=k[O],V="boolean"==typeof S||"number"==typeof S?S:S?S instanceof Array?"["+S.join(", ")+"]":S:"",R=a.elementId;return[t.default(".map-editor",t.default(".input-field",{className:r,style:"min-height: 1.5em;"},[f?t.default("i.material-icons.prefix",f):"",t.default(u,{label:h,isMandatory:v,isActive:D.length>0}),t.default(P,{id:R,items:D,mode:exports.CollectionMode.LINKS,header:s})])),d?void 0:[t.default(W,{label:x,iconName:m,className:"col s5",initialValue:O,onchange:function(e){a.curKey=e,a.id&&(delete k[a.id],k[e]=S,a.id=e),T()}}),"string"==typeof V?t.default(U,{label:w,initialValue:V,className:"col s7",onchange:function(e){var t=function(e,t,a){return t.indexOf(e)>=0||!(a.indexOf(e)>=0)&&void 0}(e,A,C),a=void 0===t&&/^\s*\d+\s*$/i.test(e)?+e:void 0;k[O]="boolean"==typeof t?t:"number"==typeof a?a:function(e,t){if(void 0===t&&(t=!1),t)return e;if(e){var a=/\s*\[(.*)\]\s*/gi.exec(e);if(a&&2===a.length)return a[1].split(",").map(function(e){return e.trim()}).map(function(e){return/^\d+$/g.test(e)?+e:e})}}(e,c)||e,T()}}):"number"==typeof V?t.default($,{label:w,initialValue:V,className:"col s7",onchange:function(e){k[O]=e,T()}}):t.default(Z,{label:w,checked:V,className:"input-field col s7",onchange:function(e){k[O]=e,T()}}),t.default(".col.s12.right-align",[t.default(y,{iconName:"add",onclick:n}),t.default(y,{iconName:"delete",disabled:!O,onclick:function(){delete k[O],n(),T()}})])]]}}},exports.MaterialBox=function(){return{oncreate:function(e){M.Materialbox.init(e.dom,e.attrs)},view:function(e){return t.default("img.materialboxed",e.attrs)}}},exports.ModalPanel=function(){return{oncreate:function(e){var t=e.attrs,a=t.onCreate,n=M.Modal.init(e.dom,t.options);a&&a(n)},view:function(e){var n=e.attrs,i=n.id,o=n.title,l=n.description,r=n.buttons,d=n.richContent,c=[n.className,n.fixedFooter?"modal-fixed-footer":"",n.bottomSheet?"bottom-sheet":""].filter(Boolean).join(" ").trim();return t.default(".modal",{id:i,className:c},[t.default(".modal-content",[t.default("h4",o),d&&"string"==typeof l?t.default.trust(l||""):"string"==typeof l?t.default("p",l):l]),r?t.default(".modal-footer",r.map(function(e){return t.default(y,a({},e,{className:"modal-close"}))})):void 0])}}},exports.NumberInput=$,exports.Options=function(){var e={},a=function(t){return e.checkedIds.indexOf(t)>=0};return{oninit:function(t){var a=t.attrs,n=a.checkedId,i=n||a.initialValue;e.checkedId=n,e.checkedIds=i?i instanceof Array?[].concat(i):[i]:[]},view:function(n){var i=n.attrs,o=i.label,l=i.id,r=i.options,d=i.checkedId,c=i.description,f=i.className,p=void 0===f?"col s12":f,m=i.style,v=i.disabled,h=i.checkboxClass,g=i.newRow,x=i.isMandatory,b=i.onchange;d&&e.checkedId!==d&&(e.checkedId=d,e.checkedIds=d instanceof Array?d:[d]);var y=b?function(t,a){var n=e.checkedIds.filter(function(e){return e!==t});a&&n.push(t),e.checkedIds=n,b(n)}:void 0,w=[g?"clear":"",p].filter(Boolean).join(" ").trim();return t.default("div",{className:w,style:m},[t.default("div",{className:"input-field options"},t.default(u,{id:l,label:o,isMandatory:x})),t.default(s,{helperText:c})].concat(r.map(function(e){return t.default(Z,{disabled:v||e.disabled,label:e.label,onchange:y?function(t){return y(e.id,t)}:void 0,className:e.className||h,checked:a(e.id),description:e.description})})))}}},exports.Pagination=function(){var e={pagIndex:0};return{view:function(n){var i=n.attrs,o=i.items,l=i.curPage,r=void 0===l?1:l,d=i.size,c=void 0===d?Math.min(9,o.length):d,u=e.pagIndex,s=u*c,f=s+c,p=u>0,m=f<o.length,v=[{title:t.default("a",{onclick:function(){return p&&e.pagIndex--}},t.default("i.material-icons","chevron_left")),disabled:!p}].concat(o.filter(function(e,t){return s<=t&&t<f}),[{title:t.default("a",{onclick:function(){return m&&e.pagIndex++}},t.default("i.material-icons","chevron_right")),disabled:!m}]);return t.default("ul.pagination",v.map(function(e,n){return t.default(ee,a({title:s+n},e,{active:s+n===r}))}))}}},exports.Parallax=function(){return{oncreate:function(e){M.Parallax.init(e.dom,e.attrs)},view:function(e){var a=e.attrs.src;return a?t.default(".parallax-container",t.default(".parallax",t.default("img",{src:a}))):void 0}}},exports.PasswordInput=Y,exports.RadioButton=ne,exports.RadioButtons=function(){var e={groupId:o()};return{oninit:function(t){var a=t.attrs,n=a.checkedId,i=a.initialValue;e.oldCheckedId=n,e.checkedId=n||i},view:function(n){var i=n.attrs,o=i.id,l=i.checkedId,r=i.newRow,d=i.className,c=void 0===d?"col s12":d,s=i.label,f=void 0===s?"":s,p=i.disabled,m=i.description,v=i.options,h=i.isMandatory,g=i.checkboxClass,x=i.onchange;e.oldCheckedId!==l&&(e.oldCheckedId=e.checkedId=l);var b=e.groupId,y=e.checkedId,w=function(t){e.checkedId=t,x&&x(t)};return r&&(c+=" clear"),t.default("div",{id:o,className:c},[t.default("div",{className:"input-field options"},t.default(u,{id:o,label:f,isMandatory:h})),m?t.default("p.helper-text",t.default.trust(m)):""].concat(v.map(function(e){return t.default(ne,a({},e,{onchange:w,groupId:b,disabled:p,className:g,checked:e.id===y}))})))}}},exports.RangeInput=J,exports.RoundIconButton=w,exports.SearchSelect=function(){var e={isOpen:!1,selectedOptions:[],searchTerm:"",options:[],inputRef:null,dropdownRef:null,focusedIndex:-1,onchange:null},a=function(a){var n=a.target;e.inputRef&&e.inputRef.contains(n)?(e.isOpen=!e.isOpen,t.default.redraw()):e.dropdownRef&&!e.dropdownRef.contains(n)&&(e.isOpen=!1,t.default.redraw())},n=function(a){if(e.isOpen){var n=e.options.filter(function(t){return(t.label||t.id.toString()).toLowerCase().includes((e.searchTerm||"").toLowerCase())&&!e.selectedOptions.some(function(e){return e.id===t.id})});switch(a.key){case"ArrowDown":a.preventDefault(),e.focusedIndex=Math.min(e.focusedIndex+1,n.length-1),t.default.redraw();break;case"ArrowUp":a.preventDefault(),e.focusedIndex=Math.max(e.focusedIndex-1,-1),t.default.redraw();break;case"Enter":a.preventDefault(),e.focusedIndex>=0&&e.focusedIndex<n.length&&i(n[e.focusedIndex]);break;case"Escape":a.preventDefault(),e.isOpen=!1,e.focusedIndex=-1,t.default.redraw()}}},i=function(a){a.disabled||(e.selectedOptions=e.selectedOptions.some(function(e){return e.id===a.id})?e.selectedOptions.filter(function(e){return e.id!==a.id}):[].concat(e.selectedOptions,[a]),e.searchTerm="",e.focusedIndex=-1,e.onchange&&e.onchange(e.selectedOptions.map(function(e){return e.id})),t.default.redraw())};return{oninit:function(t){var a=t.attrs,n=a.options,i=void 0===n?[]:n,o=a.initialValue,l=void 0===o?[]:o,r=a.onchange;e.options=i,e.selectedOptions=i.filter(function(e){return l.includes(e.id)}),e.onchange=r},oncreate:function(){document.addEventListener("click",a),document.addEventListener("keydown",n)},onremove:function(){document.removeEventListener("click",a),document.removeEventListener("keydown",n)},view:function(a){var n=a.attrs,o=n.oncreateNewOption,l=n.className,r=n.placeholder,d=n.searchPlaceholder,c=void 0===d?"Search options...":d,u=n.noOptionsFound,s=void 0===u?"No options found":u,f=n.label,p=n.maxHeight,m=void 0===p?"25rem":p,v=e.options.filter(function(t){return(t.label||t.id.toString()).toLowerCase().includes((e.searchTerm||"").toLowerCase())&&!e.selectedOptions.some(function(e){return e.id===t.id})}),h=o&&e.searchTerm&&!v.some(function(t){return(t.label||t.id.toString()).toLowerCase()===e.searchTerm.toLowerCase()});return t.default(".multi-select-dropdown.input-field",{className:l},[t.default("label",{class:r||e.selectedOptions.length>0?"active":""},f),t.default(".dropdown-trigger",{oncreate:function(t){e.inputRef=t.dom},style:{borderBottom:"2px solid #d1d5db",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer"}},[t.default(".selected-options",{style:{display:"flex",flexWrap:"wrap",minHeight:"50px",paddingTop:"12px"}},0===e.selectedOptions.length?[t.default("span",r)]:e.selectedOptions.map(function(a){return t.default(".chip",[a.label||a.id.toString(),t.default("button",{onclick:function(n){n.stopPropagation(),function(a){e.selectedOptions=e.selectedOptions.filter(function(e){return e.id!==a.id}),e.onchange&&e.onchange(e.selectedOptions.map(function(e){return e.id})),t.default.redraw()}(a)},style:{marginLeft:"0.25rem",background:"none",border:"none",cursor:"pointer"}},"×")])})),t.default("svg.caret",{class:"caret",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg"},[t.default("path",{d:"M7 10l5 5 5-5z"}),t.default("path",{d:"M0 0h24v24H0z",fill:"none"})])]),e.isOpen&&t.default(".dropdown-menu",{oncreate:function(t){e.dropdownRef=t.dom},onremove:function(){e.dropdownRef=null},style:{position:"absolute",width:"98%",marginTop:"0.4rem",zIndex:1e3}},[t.default("ul.dropdown-content.select-dropdown",{style:{maxHeight:m,opacity:1,display:"block",width:"100%"}},[t.default("li",{class:"search-wrapper",style:{padding:"0 16px",position:"relative"}},[t.default("input",{type:"text",placeholder:c,value:e.searchTerm||"",oninput:function(a){e.searchTerm=a.target.value,e.focusedIndex=-1,t.default.redraw()},style:{width:"100%",outline:"none",fontSize:"0.875rem"}})])].concat(0!==v.length||h?[]:[t.default("li",{style:{padding:"0.5rem",textAlign:"center",color:"#9ca3af"}},s)],h?[t.default("li",{onclick:function(){try{return Promise.resolve(o(e.searchTerm)).then(function(t){e.selectedOptions.push(t),i(t)})}catch(e){return Promise.reject(e)}},style:{display:"flex",alignItems:"center",cursor:"pointer",background:e.focusedIndex===v.length?"#f3f4f6":""}},[t.default("span",'+ "'+e.searchTerm+'"')])]:[],v.map(function(a,n){return t.default("li",{onclick:function(){return i(a)},class:a.disabled?"disabled":void 0,style:{display:"flex",alignItems:"center",cursor:a.disabled?"not-allowed":"pointer",background:e.focusedIndex===n?"#f3f4f6":""}},t.default("span",[t.default("input",{type:"checkbox",checked:e.selectedOptions.some(function(e){return e.id===a.id}),style:{marginRight:"0.5rem"}}),a.label||a.id.toString()]))})))])])}}},exports.SecondaryContent=R,exports.Select=function(){var e={},a=function(e){return e.map(function(e){return e.id}).join("")},n=function(e,t,a){return void 0===a&&(a=!1),a||(t instanceof Array&&(e||"number"==typeof e)?t.indexOf(e)>=0:t===e)};return{oninit:function(t){var n=t.attrs,i=n.checkedId,o=n.initialValue;e.ids=a(n.options);var l=i||o;e.checkedId=i instanceof Array?[].concat(i):i,e.initialValue=null!=l?l instanceof Array?l.filter(function(e){return null!=e}):[l]:[]},view:function(i){var o=i.attrs,r=o.id,d=o.newRow,c=o.className,f=void 0===c?"col s12":c,p=o.checkedId,m=o.key,v=o.options,h=o.multiple,g=o.label,x=o.helperText,b=o.placeholder,y=void 0===b?"":b,w=o.isMandatory,k=o.iconName,N=o.disabled,I=o.classes,C=void 0===I?"":I,A=o.dropdownOptions,T=o.onchange;e.checkedId!==p&&(e.initialValue=p?p instanceof Array?p:[p]:void 0);var D=e.initialValue,O=T?h?function(){var t=e.instance&&e.instance.getSelectedValues(),a=t?t.length>0&&l(t[0])?t.map(function(e){return+e}):t.filter(function(e){return null!==e||void 0!==e}):void 0;e.initialValue=a||[],T(e.initialValue)}:function(t){if(t&&t.currentTarget){var a=t.currentTarget,n=l(a.value)?+a.value:a.value;e.initialValue=void 0!==typeof n?[n]:[]}e.initialValue&&T(e.initialValue)}:void 0;d&&(f+=" clear");var S=!v.some(function(e){return n(e.id,D)}),V=v.reduce(function(e,t){return t.group&&e.indexOf(t.group)<0&&e.push(t.group),e},[]);return t.default(".input-field.select-space",{className:f,key:m,oncreate:h?function(t){return e.wrapper=t.dom}:void 0},[k&&t.default("i.material-icons.prefix",k),t.default("select",{id:r,title:g,disabled:N,multiple:h,oncreate:function(t){e.instance=M.FormSelect.init(t.dom,{classes:C,dropdownOptions:A})},onupdate:function(t){var n=t.dom;if(h){var i=k?1:0;!e.inputEl&&e.wrapper&&e.wrapper.childNodes&&e.wrapper.childNodes.length>0&&e.wrapper.childNodes[i].childNodes&&e.wrapper.childNodes[i].childNodes[0]&&(e.inputEl=e.wrapper.childNodes[i].childNodes[0]),e.inputEl&&e.inputEl.value&&e.inputEl.value.startsWith(y+", ")&&(e.inputEl.value=e.inputEl.value.replace(y+", ",""))}var o=a(v),l=p&&e.checkedId!==p.toString();e.ids!==o&&(e.ids=o,l=!0),(e.checkedId instanceof Array&&p instanceof Array?e.checkedId.join()!==p.join():e.checkedId!==p)&&(e.checkedId=p,l=!0),l&&(e.instance=M.FormSelect.init(n,{classes:C,dropdownOptions:A}))},onchange:O},t.default("option",{value:"",disabled:!0,selected:!!S||void 0},y),0===V.length?v.map(function(e,a){var i;return t.default("option",{value:e.id,title:e.title||void 0,disabled:e.disabled?"true":void 0,"data-icon":e.img||void 0,selected:n(e.id,D,0===a&&S&&!y)},null==(i=e.label)?void 0:i.replace("&amp;","&"))}):V.map(function(e){return t.default("optgroup",{label:e},v.filter(function(t){return t.group===e}).map(function(e,a){var i;return t.default("option",{value:e.id,title:e.title||void 0,disabled:e.disabled?"true":void 0,"data-icon":e.img||void 0,selected:n(e.id,D,0===a&&S&&!y)},null==(i=e.label)?void 0:i.replace("&amp;","&"))}))})),t.default(u,{label:g,isMandatory:w}),x&&t.default(s,{helperText:x})])}}},exports.SmallButton=b,exports.SubmitButton=k,exports.Switch=function(){var e={id:o()};return{view:function(a){var i=a.attrs,o=i.id||e.id,l=i.label,r=i.left,d=i.right,c=i.disabled,s=i.newRow,f=i.onchange,p=i.checked,m=i.isMandatory,v=i.className,h=void 0===v?"col s12":v,g=n(i,ie),x=["input-field",s?"clear":"",h].filter(Boolean).join(" ").trim();return t.default("div",{className:x},[l?t.default(u,{label:l||"",id:o,isMandatory:m,className:"active"}):void 0,t.default(".switch",g,t.default("label",[r||"Off",t.default("input[type=checkbox]",{id:o,disabled:c,checked:p,onclick:f?function(e){e.target&&void 0!==e.target.checked&&f(e.target.checked)}:void 0}),t.default("span.lever"),d||"On"]))])}}},exports.Tabs=function(){var e={},a=function(e,t){return t||e.replace(/ /g,"").toLowerCase()};return{view:function(n){var i=n.attrs,o=i.tabWidth,l=i.selectedTabId,r=i.tabs,d=i.className,c=i.style,u=i.duration,s=i.onShow,f=i.swipeable,p=i.responsiveThreshold,m=r.filter(function(e){return e.active}).shift(),v=l||(m?a(m.title,m.id):""),h=["fill"===o?"tabs-fixed-width":"",d].filter(Boolean).join(" ").trim();return t.default(".row",[t.default(".col.s12",t.default("ul.tabs",{className:h,style:c,oncreate:function(t){e.instance=M.Tabs.init(t.dom,{duration:u,onShow:s,responsiveThreshold:p,swipeable:f})},onupdate:function(){if(v){var e=document.getElementById("tab_"+v);e&&e.click()}},onremove:function(){return e.instance.destroy()}},r.map(function(e){var n=e.className,i=e.title,l=e.id,d=e.active,c=e.disabled,u=e.target,s=e.href,f=["fixed"===o?"col s"+Math.floor(12/r.length):"",n].filter(Boolean).join(" ").trim(),p=a(i,l);return t.default("li.tab",{className:f,disabled:c},t.default("a",{id:"tab_"+p,className:d?"active":"",target:u,href:s||"#"+p},i))}))),r.filter(function(e){return void 0===e.href}).map(function(e){var n=e.vnode,i=e.contentClass;return t.default(".col.s12",{id:a(e.title,e.id),className:i},n)})])}}},exports.TextArea=U,exports.TextInput=W,exports.TimePicker=function(){var e={id:o()};return{view:function(i){var o=i.attrs,l=o.label,r=o.helperText,d=o.initialValue,c=o.newRow,f=o.className,p=void 0===f?"col s12":f,m=o.iconName,v=o.isMandatory,h=o.onchange,g=o.disabled,x=n(o,ae),b=e.id,y=new Date,w=h?function(){return e.tp&&h(e.tp.time||d||y.getHours()+":"+y.getMinutes())}:void 0,k=["input-field","timepicker",c?"clear":"",p].filter(Boolean).join(" ").trim();return t.default("div",{className:k,onremove:function(){return e.tp&&e.tp.destroy()}},[m?t.default("i.material-icons.prefix",m):"",t.default("input",a({},x,{type:"text",tabindex:0,id:b,disabled:g,value:d,oncreate:function(t){e.tp=M.Timepicker.init(t.dom,a({twelveHour:!1,showClearBtn:!0,defaultTime:d},x,{onCloseEnd:w}))}})),t.default(u,{label:l,id:b,isMandatory:v,isActive:d}),t.default(s,{helperText:r})])}}},exports.Timeline=function(){var e=function(e){return e.getUTCDate()+"/"+(e.getUTCMonth()+1)+"/"+e.getUTCFullYear()},n=function(e){return r(e.getUTCHours())+":"+r(e.getUTCMinutes())};return{view:function(i){var o=i.attrs,l=o.onSelect,r=o.timeFormatter,d=void 0===r?n:r,c=o.dateFormatter,u=void 0===c?e:c;return t.default("ul.mm_timeline",o.items.map(function(e){return t.default(oe,a({onSelect:l,dateFormatter:u,timeFormatter:d},e))}))}}},exports.UrlInput=X,exports.isNumeric=l,exports.padLeft=r,exports.uniqueId=o,exports.uuid4=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})};
-//# sourceMappingURL=index.js.map
+'use strict';
+
+var m = require('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;
+        },
+    };
+};
+
+exports.CollectionMode = void 0;
+(function (CollectionMode) {
+    CollectionMode[CollectionMode["BASIC"] = 0] = "BASIC";
+    CollectionMode[CollectionMode["LINKS"] = 1] = "LINKS";
+    CollectionMode[CollectionMode["AVATAR"] = 2] = "AVATAR";
+})(exports.CollectionMode || (exports.CollectionMode = {}));
+const isNonLocalRoute = (url) => url && /https?:\/\//.test(url);
+const SecondaryContent = () => {
+    return {
+        view: ({ attrs }) => {
+            const { href, iconName = 'send', onclick, style = { cursor: 'pointer' } } = attrs;
+            const props = {
+                href,
+                style,
+                className: 'secondary-content',
+                onclick: onclick ? () => onclick(attrs) : undefined,
+            };
+            return isNonLocalRoute(href) || !href
+                ? m('a[target=_]', props, m(Icon, { iconName }))
+                : m(m.route.Link, props, m(Icon, { iconName }));
+        },
+    };
+};
+const avatarIsImage = (avatar = '') => /\./.test(avatar);
+const ListItem = () => {
+    return {
+        view: ({ attrs: { item, mode } }) => {
+            const { title, content = '', active, iconName, avatar, className, onclick } = item;
+            return mode === exports.CollectionMode.AVATAR
+                ? m('li.collection-item.avatar', {
+                    className: active ? 'active' : '',
+                    onclick: onclick ? () => onclick(item) : undefined,
+                }, [
+                    avatarIsImage(avatar)
+                        ? m('img.circle', { src: avatar })
+                        : m('i.material-icons.circle', { className }, avatar),
+                    m('span.title', title),
+                    m('p', m.trust(content)),
+                    m(SecondaryContent, item),
+                ])
+                : m('li.collection-item', {
+                    className: active ? 'active' : '',
+                }, iconName ? m('div', [title, m(SecondaryContent, item)]) : title);
+        },
+    };
+};
+const BasicCollection = () => {
+    return {
+        view: (_a) => {
+            var _b = _a.attrs, { header, items, mode = exports.CollectionMode.BASIC } = _b, params = __rest(_b, ["header", "items", "mode"]);
+            const collectionItems = items.map((item) => m(ListItem, { key: item.id, item, mode }));
+            return header
+                ? m('ul.collection.with-header', params, [m('li.collection-header', m('h4', header)), collectionItems])
+                : m('ul.collection', params, collectionItems);
+        },
+    };
+};
+const AnchorItem = () => {
+    return {
+        view: ({ attrs: { item } }) => {
+            const { title, active, href } = item, params = __rest(item, ["title", "active", "href"]);
+            const props = Object.assign(Object.assign({}, params), { className: `collection-item ${active ? 'active' : ''}`, href });
+            return isNonLocalRoute(href) || !href
+                ? m('a[target=_]', props, title)
+                : m(m.route.Link, props, title);
+        },
+    };
+};
+const LinksCollection = () => {
+    return {
+        view: (_a) => {
+            var _b = _a.attrs, { items, header } = _b, params = __rest(_b, ["items", "header"]);
+            return header
+                ? m('.collection.with-header', params, [
+                    m('.collection-header', m('h4', header)),
+                    items.map((item) => m(AnchorItem, { key: item.id, item })),
+                ])
+                : m('.collection', params, items.map((item) => m(AnchorItem, { key: item.id, item })));
+        },
+    };
+};
+/**
+ * Creates a Collection of items, optionally containing links, headers, secondary content or avatars.
+ * @see https://materializecss.com/collections.html
+ */
+const Collection = () => {
+    return {
+        view: (_a) => {
+            var _b = _a.attrs, { items, header, mode = exports.CollectionMode.BASIC } = _b, params = __rest(_b, ["items", "header", "mode"]);
+            return header || (items && items.length > 0)
+                ? mode === exports.CollectionMode.LINKS
+                    ? m(LinksCollection, Object.assign({ header, items }, params))
+                    : m(BasicCollection, Object.assign({ header, items, mode }, params))
+                : undefined;
+        },
+    };
+};
+
+/** Pure TypeScript Dropdown component - no Materialize dependencies */
+const Dropdown = () => {
+    const state = {
+        isOpen: false,
+        initialValue: undefined,
+        id: '',
+        focusedIndex: -1,
+        inputRef: null,
+        dropdownRef: null,
+    };
+    const handleKeyDown = (e, items, onchange) => {
+        const availableItems = items.filter((item) => !item.divider && !item.disabled);
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                else {
+                    state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (state.isOpen) {
+                    state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
+                    const selectedItem = availableItems[state.focusedIndex];
+                    const value = (selectedItem.id || selectedItem.label);
+                    state.initialValue = value;
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    if (onchange)
+                        onchange(value);
+                }
+                else if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                state.isOpen = false;
+                state.focusedIndex = -1;
+                break;
+        }
+    };
+    return {
+        oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
+            state.id = id;
+            state.initialValue = initialValue || checkedId;
+            // Mithril will handle click events through the component structure
+        },
+        view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
+            const { initialValue } = state;
+            const selectedItem = initialValue
+                ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+                : undefined;
+            const title = selectedItem ? selectedItem.label : label || 'Select';
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            return m('.dropdown-wrapper.input-field', { className, key, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                m(HelperText, { helperText }),
+                m('.select-wrapper', {
+                    onclick: disabled
+                        ? undefined
+                        : () => {
+                            state.isOpen = !state.isOpen;
+                            state.focusedIndex = state.isOpen ? 0 : -1;
+                        },
+                    onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                    tabindex: disabled ? -1 : 0,
+                    'aria-expanded': state.isOpen ? 'true' : 'false',
+                    'aria-haspopup': 'listbox',
+                    role: 'combobox',
+                }, [
+                    m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                        id: state.id,
+                        value: title,
+                        oncreate: ({ dom }) => {
+                            state.inputRef = dom;
+                        },
+                        onclick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (!disabled) {
+                                state.isOpen = !state.isOpen;
+                                state.focusedIndex = state.isOpen ? 0 : -1;
+                            }
+                        },
+                    }),
+                    // Dropdown Menu using Select component's positioning logic
+                    state.isOpen &&
+                        m('ul.dropdown-content.select-dropdown', {
+                            tabindex: 0,
+                            role: 'listbox',
+                            'aria-labelledby': state.id,
+                            oncreate: ({ dom }) => {
+                                state.dropdownRef = dom;
+                            },
+                            onremove: () => {
+                                state.dropdownRef = null;
+                            },
+                            style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
+                                // Convert dropdown items to format expected by getDropdownStyles
+                                group: undefined }))), true),
+                        }, items.map((item, index) => {
+                            if (item.divider) {
+                                return m('li.divider', {
+                                    key: `divider-${index}`,
+                                });
+                            }
+                            const itemIndex = availableItems.indexOf(item);
+                            const isFocused = itemIndex === state.focusedIndex;
+                            return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
+                                    item.disabled ? 'disabled' : '',
+                                    isFocused ? 'focused' : '',
+                                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') }, (item.disabled
+                                ? {}
+                                : {
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        const value = (item.id || item.label);
+                                        state.initialValue = value;
+                                        state.isOpen = false;
+                                        state.focusedIndex = -1;
+                                        if (onchange)
+                                            onchange(value);
+                                    },
+                                })), m('span', {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: '14px 16px',
+                                },
+                            }, [
+                                item.iconName
+                                    ? m('i.material-icons', {
+                                        style: { marginRight: '32px' },
+                                    }, item.iconName)
+                                    : undefined,
+                                item.label,
+                            ]));
+                        })),
+                    m(MaterialIcon, {
+                        name: 'caret',
+                        direction: 'down',
+                    }),
+                ]),
+            ]);
+        },
+    };
+};
+
+/**
+ * Floating Action Button
+ */
+const FloatingActionButton = () => {
+    const state = {
+        isOpen: false,
+    };
+    const handleClickOutside = (e) => {
+        const target = e.target;
+        if (!target.closest('.fixed-action-btn')) {
+            state.isOpen = false;
+        }
+    };
+    return {
+        oncreate: () => {
+            document.addEventListener('click', handleClickOutside);
+        },
+        onremove: () => {
+            document.removeEventListener('click', handleClickOutside);
+        },
+        view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
+            ? 'position: absolute; display: inline-block; left: 24px;'
+            : position === 'right' || position === 'inline-right'
+                ? 'position: absolute; display: inline-block; right: 24px;'
+                : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
+            const fabClasses = [
+                'fixed-action-btn',
+                direction ? `direction-${direction}` : '',
+                state.isOpen ? 'active' : '',
+                // hoverEnabled ? 'hover-enabled' : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return m('div', {
+                style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
+            }, m(`.${fabClasses}`, {
+                style,
+                onclick: (e) => {
+                    e.stopPropagation();
+                    if (buttons && buttons.length > 0) {
+                        state.isOpen = !state.isOpen;
+                    }
+                },
+                onmouseover: hoverEnabled
+                    ? () => {
+                        if (buttons && buttons.length > 0) {
+                            state.isOpen = true;
+                        }
+                    }
+                    : undefined,
+                onmouseleave: hoverEnabled
+                    ? () => {
+                        state.isOpen = false;
+                    }
+                    : undefined,
+            }, [
+                m('a.btn-floating.btn-large', {
+                    className,
+                }, m('i.material-icons', { className: iconClass }, iconName)),
+                buttons &&
+                    buttons.length > 0 &&
+                    m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                        style: {
+                            opacity: state.isOpen ? '1' : '0',
+                            transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
+                            transition: `all 0.3s ease ${index * 40}ms`,
+                        },
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            if (button.onClick)
+                                button.onClick(e);
+                        },
+                    }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
+            ]));
+        },
+    };
+};
+
+/** Character counter component that tracks text length against maxLength */
+const CharacterCounter = () => {
+    return {
+        view: ({ attrs }) => {
+            const { currentLength, maxLength, show } = attrs;
+            if (!show)
+                return null;
+            const isOverLimit = currentLength > maxLength;
+            return m('span.character-counter', {
+                style: {
+                    color: isOverLimit ? '#F44336' : '#9e9e9e',
+                    fontSize: '12px',
+                    display: 'block',
+                    textAlign: 'right',
+                    marginTop: '8px',
+                },
+            }, `${currentLength}/${maxLength}`);
+        },
+    };
+};
+/** Create a TextArea */
+const TextArea = () => {
+    const state = {
+        id: uniqueId(),
+        currentLength: 0,
+        hasInteracted: false,
+        height: undefined,
+        active: false,
+        textarea: undefined,
+    };
+    const updateHeight = (textarea) => {
+        textarea.style.height = 'auto';
+        const newHeight = textarea.scrollHeight + 'px';
+        state.height = textarea.value.length === 0 ? undefined : newHeight;
+    };
+    return {
+        onremove: () => {
+        },
+        view: ({ attrs }) => {
+            var _a;
+            const { className = 'col s12', helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
+            // const attributes = toAttrs(params);
+            return m('.input-field', { className, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : '',
+                m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, style: {
+                        height: state.height,
+                    }, oncreate: ({ dom }) => {
+                        const textarea = (state.textarea = dom);
+                        // Set initial value and height if provided
+                        if (initialValue !== undefined) {
+                            textarea.value = String(initialValue);
+                            updateHeight(textarea);
+                            // } else {
+                            // updateHeight(textarea);
+                        }
+                        // Update character count state for counter component
+                        if (maxLength) {
+                            state.currentLength = textarea.value.length; // Initial count
+                            m.redraw();
+                        }
+                    }, onupdate: ({ dom }) => {
+                        const textarea = dom;
+                        if (state.height)
+                            textarea.style.height = state.height;
+                    }, onfocus: () => {
+                        state.active = true;
+                    }, oninput: (e) => {
+                        state.active = true;
+                        state.hasInteracted = false;
+                        const target = e.target;
+                        // Update height for auto-resize
+                        updateHeight(target);
+                        // Update character count
+                        if (maxLength) {
+                            state.currentLength = target.value.length;
+                            state.hasInteracted = target.value.length > 0;
+                        }
+                        // Call onchange handler
+                        if (oninput) {
+                            oninput(target.value);
+                        }
+                    }, onblur: (e) => {
+                        state.active = false;
+                        // const target = e.target as HTMLTextAreaElement;
+                        state.hasInteracted = true;
+                        // Call original onblur if provided
+                        if (onblur) {
+                            onblur(e);
+                        }
+                        if (onchange && state.textarea) {
+                            onchange(state.textarea.value);
+                        }
+                    }, value: initialValue, onkeyup: onkeyup
+                        ? (ev) => {
+                            onkeyup(ev, ev.target.value);
+                        }
+                        : undefined, onkeydown: onkeydown
+                        ? (ev) => {
+                            onkeydown(ev, ev.target.value);
+                        }
+                        : undefined, onkeypress: onkeypress
+                        ? (ev) => {
+                            onkeypress(ev, ev.target.value);
+                        }
+                        : undefined })),
+                m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || initialValue || placeholder || state.active,
+                }),
+                m(HelperText, {
+                    helperText,
+                    dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                    dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                }),
+                maxLength
+                    ? m(CharacterCounter, {
+                        currentLength: state.currentLength,
+                        maxLength,
+                        show: state.currentLength > 0,
+                    })
+                    : undefined,
+            ]);
+        },
+    };
+};
+/** Default component for all kinds of input fields. */
+const InputField = (type, defaultClass = '') => () => {
+    const state = {
+        id: uniqueId(),
+        currentLength: 0,
+        hasInteracted: false,
+        isValid: true,
+        active: false,
+        inputElement: null,
+    };
+    // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
+    // let lengthUpdateHandler: (() => void) | null = null;
+    // let inputElement: HTMLInputElement | null = null;
+    const getValue = (target) => {
+        const val = target.value;
+        return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
+    };
+    const setValidity = (target, validationResult) => {
+        if (typeof validationResult === 'boolean') {
+            target.setCustomValidity(validationResult ? '' : 'Custom validation failed');
+        }
+        else {
+            target.setCustomValidity(validationResult);
+        }
+    };
+    const focus = ({ autofocus }) => autofocus ? (typeof autofocus === 'boolean' ? autofocus : autofocus()) : false;
+    const lengthUpdateHandler = () => {
+        var _a;
+        const length = (_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value.length;
+        if (length) {
+            state.currentLength = length;
+            state.hasInteracted = length > 0;
+        }
+    };
+    return {
+        view: ({ attrs }) => {
+            var _a;
+            const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
+            // const attributes = toAttrs(params);
+            const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+            return m('.input-field', { className: cn, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
+                    // attributes,
+                    oncreate: ({ dom }) => {
+                        const input = (state.inputElement = dom);
+                        if (focus(attrs)) {
+                            input.focus();
+                        }
+                        // Set initial value if provided
+                        if (initialValue !== undefined) {
+                            input.value = String(initialValue);
+                        }
+                        // Update character count state for counter component
+                        if (maxLength) {
+                            state.currentLength = input.value.length; // Initial count
+                        }
+                        // Range input functionality
+                        if (type === 'range') {
+                            const updateThumb = () => {
+                                const value = input.value;
+                                const min = input.min || '0';
+                                const max = input.max || '100';
+                                const percentage = ((parseFloat(value) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))) * 100;
+                                input.style.setProperty('--range-progress', `${percentage}%`);
+                            };
+                            input.addEventListener('input', updateThumb);
+                            updateThumb(); // Initial position
+                        }
+                    }, onkeyup: onkeyup
+                        ? (ev) => {
+                            onkeyup(ev, getValue(ev.target));
+                        }
+                        : undefined, onkeydown: onkeydown
+                        ? (ev) => {
+                            onkeydown(ev, getValue(ev.target));
+                        }
+                        : undefined, onkeypress: onkeypress
+                        ? (ev) => {
+                            onkeypress(ev, getValue(ev.target));
+                        }
+                        : undefined, onupdate: validate
+                        ? ({ dom }) => {
+                            const target = dom;
+                            setValidity(target, validate(getValue(target), target));
+                        }
+                        : undefined, oninput: (e) => {
+                        state.active = true;
+                        const target = e.target;
+                        // Handle original oninput logic
+                        const value = getValue(target);
+                        if (oninput) {
+                            oninput(value);
+                        }
+                        if (maxLength) {
+                            lengthUpdateHandler();
+                        }
+                        // Don't validate on input, only clear error states if user is typing
+                        if (validate && target.classList.contains('invalid') && target.value.length > 0) {
+                            const validationResult = validate(value, target);
+                            if (typeof validationResult === 'boolean' && validationResult) {
+                                target.classList.remove('invalid');
+                                target.classList.add('valid');
+                                state.isValid = true;
+                            }
+                            else if (typeof validationResult === 'string' && validationResult === '') {
+                                target.classList.remove('invalid');
+                                target.classList.add('valid');
+                                state.isValid = true;
+                            }
+                        }
+                    }, onfocus: () => {
+                        state.active = true;
+                    }, onblur: (e) => {
+                        state.active = false;
+                        const target = e.target;
+                        state.hasInteracted = true;
+                        if (target && validate) {
+                            const value = getValue(target);
+                            // Only validate if user has entered some text
+                            if (value && String(value).length > 0) {
+                                const validationResult = validate(value, target);
+                                state.isValid = typeof validationResult === 'boolean' ? validationResult : false;
+                                setValidity(target, validationResult);
+                                // Update visual validation state
+                                if (typeof validationResult === 'boolean') {
+                                    if (validationResult) {
+                                        target.classList.remove('invalid');
+                                        target.classList.add('valid');
+                                    }
+                                    else {
+                                        target.classList.remove('valid');
+                                        target.classList.add('invalid');
+                                    }
+                                }
+                                else if (typeof validationResult === 'string') {
+                                    target.classList.remove('valid');
+                                    target.classList.add('invalid');
+                                    state.isValid = false;
+                                }
+                            }
+                            else {
+                                // Clear validation state if no text
+                                target.classList.remove('valid', 'invalid');
+                                state.isValid = true;
+                            }
+                        }
+                        // Also call the original onblur handler if provided
+                        if (attrs.onblur) {
+                            attrs.onblur(e);
+                        }
+                        if (onchange && state.inputElement) {
+                            onchange(getValue(state.inputElement));
+                        }
+                    }, value: initialValue })),
+                m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: state.active ||
+                        ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) ||
+                        initialValue ||
+                        placeholder ||
+                        type === 'number' ||
+                        type === 'color' ||
+                        type === 'range'
+                        ? true
+                        : false,
+                }),
+                m(HelperText, {
+                    helperText,
+                    dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
+                    dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
+                }),
+                maxLength
+                    ? m(CharacterCounter, {
+                        currentLength: state.currentLength,
+                        maxLength,
+                        show: state.currentLength > 0,
+                    })
+                    : undefined,
+            ]);
+        },
+    };
+};
+/** Component for entering some text */
+const TextInput = InputField('text');
+/** Component for entering a password */
+const PasswordInput = InputField('password');
+/** Component for entering a number */
+const NumberInput = InputField('number');
+/** Component for entering a URL */
+const UrlInput = InputField('url');
+/** Component for entering a color */
+const ColorInput = InputField('color');
+/** Component for entering a range */
+const RangeInput = InputField('range', '.range-field');
+/** Component for entering an email */
+const EmailInput = InputField('email');
+/** Component for uploading a file */
+const FileInput = () => {
+    let canClear = false;
+    let i;
+    return {
+        view: ({ attrs }) => {
+            const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
+            const accept = acceptedFiles
+                ? acceptedFiles instanceof Array
+                    ? acceptedFiles.join(', ')
+                    : acceptedFiles
+                : undefined;
+            return m('.file-field.input-field', {
+                className: attrs.class || className,
+            }, [
+                m('.btn', [
+                    m('span', label),
+                    m('input[type=file]', {
+                        title: label,
+                        accept,
+                        multiple,
+                        disabled,
+                        onchange: onchange
+                            ? (e) => {
+                                const i = e.target;
+                                if (i && i.files && onchange) {
+                                    canClear = true;
+                                    onchange(i.files);
+                                }
+                            }
+                            : undefined,
+                    }),
+                ]),
+                m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
+                    placeholder,
+                    oncreate: ({ dom }) => {
+                        i = dom;
+                        if (initialValue)
+                            i.value = initialValue;
+                    },
+                })),
+                (canClear || initialValue) &&
+                    m('a.waves-effect.waves-teal.btn-flat', {
+                        style: {
+                            float: 'right',
+                            position: 'relative',
+                            top: '-3rem',
+                            padding: 0,
+                        },
+                        onclick: () => {
+                            canClear = false;
+                            i.value = '';
+                            onchange && onchange({});
+                        },
+                    }, m(MaterialIcon, {
+                        name: 'close',
+                        className: 'close',
+                    })),
+            ]);
+        },
+    };
+};
+
+/**
+ * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
+ * No MaterializeCSS dependencies
+ */
+const MaterialBox = () => {
+    const state = {
+        isOpen: false,
+        originalImage: null,
+        overlay: null,
+        overlayImage: null,
+    };
+    const openBox = (img, attrs) => {
+        if (state.isOpen)
+            return;
+        state.isOpen = true;
+        state.originalImage = img;
+        if (attrs.onOpenStart)
+            attrs.onOpenStart();
+        // Create overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'materialbox-overlay';
+        overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.85);
+      z-index: 1000;
+      opacity: 0;
+      transition: opacity ${attrs.inDuration || 275}ms ease;
+      cursor: zoom-out;
+    `;
+        // Create enlarged image
+        const enlargedImg = document.createElement('img');
+        enlargedImg.src = img.src;
+        enlargedImg.alt = img.alt || '';
+        enlargedImg.className = 'materialbox-image';
+        // Get original image dimensions and position
+        const imgRect = img.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        // Calculate final size maintaining aspect ratio
+        const aspectRatio = img.naturalWidth / img.naturalHeight;
+        const maxWidth = windowWidth * 0.9;
+        const maxHeight = windowHeight * 0.9;
+        let finalWidth = maxWidth;
+        let finalHeight = maxWidth / aspectRatio;
+        if (finalHeight > maxHeight) {
+            finalHeight = maxHeight;
+            finalWidth = maxHeight * aspectRatio;
+        }
+        // Set initial position and size (same as original image)
+        enlargedImg.style.cssText = `
+      position: fixed;
+      top: ${imgRect.top}px;
+      left: ${imgRect.left}px;
+      width: ${imgRect.width}px;
+      height: ${imgRect.height}px;
+      transition: all ${attrs.inDuration || 275}ms ease;
+      cursor: zoom-out;
+      max-width: none;
+      z-index: 1001;
+    `;
+        // Add caption if provided
+        let caption = null;
+        if (attrs.caption) {
+            caption = document.createElement('div');
+            caption.className = 'materialbox-caption';
+            caption.textContent = attrs.caption;
+            caption.style.cssText = `
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: white;
+        font-size: 16px;
+        text-align: center;
+        opacity: 0;
+        transition: opacity ${attrs.inDuration || 275}ms ease ${attrs.inDuration || 275}ms;
+        z-index: 1002;
+        pointer-events: none;
+      `;
+        }
+        // Add to DOM
+        document.body.appendChild(overlay);
+        document.body.appendChild(enlargedImg);
+        if (caption)
+            document.body.appendChild(caption);
+        // Store references
+        state.overlay = overlay;
+        state.overlayImage = enlargedImg;
+        // Prevent body scrolling
+        document.body.style.overflow = 'hidden';
+        // Trigger animations
+        requestAnimationFrame(() => {
+            overlay.style.opacity = '1';
+            enlargedImg.style.top = `${(windowHeight - finalHeight) / 2}px`;
+            enlargedImg.style.left = `${(windowWidth - finalWidth) / 2}px`;
+            enlargedImg.style.width = `${finalWidth}px`;
+            enlargedImg.style.height = `${finalHeight}px`;
+            if (caption) {
+                caption.style.opacity = '1';
+            }
+        });
+        // Add close handlers
+        const closeHandler = () => closeBox(attrs);
+        overlay.addEventListener('click', closeHandler);
+        enlargedImg.addEventListener('click', closeHandler);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape')
+                closeHandler();
+        });
+        // Call onOpenEnd after animation
+        setTimeout(() => {
+            if (attrs.onOpenEnd)
+                attrs.onOpenEnd();
+        }, attrs.inDuration || 275);
+    };
+    const closeBox = (attrs) => {
+        if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
+            return;
+        if (attrs.onCloseStart)
+            attrs.onCloseStart();
+        const originalRect = state.originalImage.getBoundingClientRect();
+        // Animate back to original position
+        state.overlay.style.opacity = '0';
+        state.overlayImage.style.top = `${originalRect.top}px`;
+        state.overlayImage.style.left = `${originalRect.left}px`;
+        state.overlayImage.style.width = `${originalRect.width}px`;
+        state.overlayImage.style.height = `${originalRect.height}px`;
+        // Hide caption
+        const caption = document.querySelector('.materialbox-caption');
+        if (caption) {
+            caption.style.opacity = '0';
+        }
+        // Clean up after animation
+        setTimeout(() => {
+            if (state.overlay) {
+                document.body.removeChild(state.overlay);
+                state.overlay = null;
+            }
+            if (state.overlayImage) {
+                document.body.removeChild(state.overlayImage);
+                state.overlayImage = null;
+            }
+            if (caption) {
+                document.body.removeChild(caption);
+            }
+            // Restore body scroll
+            document.body.style.overflow = '';
+            state.isOpen = false;
+            state.originalImage = null;
+            if (attrs.onCloseEnd)
+                attrs.onCloseEnd();
+        }, attrs.outDuration || 200);
+    };
+    return {
+        onremove: () => {
+            // Clean up if component is removed while open
+            if (state.isOpen) {
+                if (state.overlay)
+                    document.body.removeChild(state.overlay);
+                if (state.overlayImage)
+                    document.body.removeChild(state.overlayImage);
+                const caption = document.querySelector('.materialbox-caption');
+                if (caption)
+                    document.body.removeChild(caption);
+                document.body.style.overflow = '';
+            }
+        },
+        view: ({ attrs }) => {
+            const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
+            return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
+                height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                    e.preventDefault();
+                    openBox(e.target, attrs);
+                } }));
+        },
+    };
+};
+
+/**
+ * CSS-only Modal Panel component - no JavaScript dependencies
+ * Uses modern CSS techniques for modal functionality
+ */
+const ModalPanel = () => {
+    const state = {
+        isOpen: false,
+        id: '',
+    };
+    let keydownHandler = null;
+    const closeModal = (attrs) => {
+        state.isOpen = false;
+        if (attrs.onToggle)
+            attrs.onToggle(false);
+        if (attrs.onClose)
+            attrs.onClose();
+        // Remove keyboard listener
+        if (keydownHandler) {
+            document.removeEventListener('keydown', keydownHandler);
+            keydownHandler = null;
+        }
+        // Restore body scroll
+        document.body.style.overflow = '';
+    };
+    const openModal = (attrs) => {
+        state.isOpen = true;
+        if (attrs.onToggle)
+            attrs.onToggle(true);
+        // Add keyboard listener
+        keydownHandler = (e) => {
+            if (e.key === 'Escape' && attrs.closeOnEsc !== false && state.isOpen) {
+                closeModal(attrs);
+            }
+        };
+        document.addEventListener('keydown', keydownHandler);
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+    };
+    return {
+        oninit: ({ attrs }) => {
+            state.id = attrs.id;
+            if (attrs.isOpen) {
+                openModal(attrs);
+            }
+        },
+        onremove: () => {
+            // Cleanup on component removal
+            if (keydownHandler) {
+                document.removeEventListener('keydown', keydownHandler);
+                keydownHandler = null;
+            }
+            document.body.style.overflow = '';
+        },
+        view: ({ attrs }) => {
+            // Sync external isOpen prop with internal state - do this in view for immediate response
+            if (attrs.isOpen !== undefined && attrs.isOpen !== state.isOpen) {
+                if (attrs.isOpen) {
+                    openModal(attrs);
+                }
+                else {
+                    closeModal(attrs);
+                }
+            }
+            const { id, title, description, fixedFooter, bottomSheet, buttons, richContent, className, showCloseButton = true, closeOnBackdropClick = true, } = attrs;
+            const modalClasses = [
+                'modal',
+                className || '',
+                fixedFooter ? 'modal-fixed-footer' : '',
+                bottomSheet ? 'bottom-sheet' : '',
+                state.isOpen ? 'active' : '',
+            ]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+            const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+            return m('div', { className: 'modal-container' }, [
+                // Modal overlay
+                m('div', {
+                    className: overlayClasses,
+                    onclick: closeOnBackdropClick ? () => closeModal(attrs) : undefined,
+                    style: {
+                        display: state.isOpen ? 'block' : 'none',
+                        position: 'fixed',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        zIndex: '1002',
+                    },
+                }),
+                // Modal content
+                m('div', {
+                    id,
+                    className: modalClasses,
+                    'aria-hidden': state.isOpen ? 'false' : 'true',
+                    role: 'dialog',
+                    'aria-labelledby': `${id}-title`,
+                    'aria-describedby': description ? `${id}-desc` : undefined,
+                    style: {
+                        display: state.isOpen ? 'block' : 'none',
+                        position: 'fixed',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        backgroundColor: '#fff',
+                        borderRadius: '4px',
+                        maxWidth: '75%',
+                        maxHeight: '85%',
+                        overflow: 'auto',
+                        zIndex: '1003',
+                        padding: '0',
+                        boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
+                    },
+                    onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
+                }, [
+                    // Close button
+                    showCloseButton &&
+                        m('button', {
+                            className: 'modal-close btn-flat',
+                            style: {
+                                position: 'absolute',
+                                top: '8px',
+                                right: '8px',
+                                padding: '8px',
+                                minWidth: 'auto',
+                                lineHeight: 1,
+                            },
+                            onclick: () => closeModal(attrs),
+                            'aria-label': 'Close modal',
+                        }, '×'),
+                    // Modal content
+                    m('.modal-content', {
+                        style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                    }, [
+                        m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
+                        description &&
+                            m('div', Object.assign({ id: `${id}-desc` }, (richContent && typeof description === 'string' ? { innerHTML: description } : {})), richContent && typeof description === 'string' ? undefined : description),
+                    ]),
+                    // Modal footer with buttons
+                    buttons &&
+                        buttons.length > 0 &&
+                        m('.modal-footer', {
+                            style: {
+                                padding: '4px 6px',
+                                borderTop: '1px solid rgba(160,160,160,0.2)',
+                                textAlign: 'right',
+                            },
+                        }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
+                                if (buttonProps.onclick)
+                                    buttonProps.onclick(e);
+                                closeModal(attrs);
+                            } })))),
+                ]),
+            ]);
+        },
+    };
+};
+
+/** Component to show a check box */
+const InputCheckbox = () => {
+    return {
+        view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
+            const checkboxId = inputId || uniqueId();
+            return m(`p`, { className, style }, m('label', { for: checkboxId }, [
+                m('input[type=checkbox][tabindex=0]', {
+                    id: checkboxId,
+                    checked,
+                    disabled,
+                    onclick: onchange
+                        ? (e) => {
+                            if (e.target && typeof e.target.checked !== 'undefined') {
+                                onchange(e.target.checked);
+                            }
+                        }
+                        : undefined,
+                }),
+                label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
+            ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
+        },
+    };
+};
+/** A list of checkboxes */
+const Options = () => {
+    const state = {};
+    const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
+    const selectAll = (options, callback) => {
+        const allIds = options.map((option) => option.id);
+        state.checkedIds = [...allIds];
+        if (callback)
+            callback(allIds);
+    };
+    const selectNone = (callback) => {
+        state.checkedIds = [];
+        if (callback)
+            callback([]);
+    };
+    return {
+        oninit: ({ attrs: { initialValue, checkedId, id } }) => {
+            const iv = checkedId || initialValue;
+            state.checkedId = checkedId;
+            state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
+            state.componentId = id || uniqueId();
+        },
+        view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
+            const onchange = callback
+                ? (propId, checked) => {
+                    const checkedIds = state.checkedIds.filter((i) => i !== propId);
+                    if (checked) {
+                        checkedIds.push(propId);
+                    }
+                    state.checkedIds = checkedIds;
+                    callback(checkedIds);
+                }
+                : undefined;
+            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const optionsContent = layout === 'horizontal'
+                ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
+                    disabled: disabled || option.disabled,
+                    label: option.label,
+                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                    className: option.className || checkboxClass,
+                    checked: isChecked(option.id),
+                    description: option.description,
+                    inputId: `${state.componentId}-${option.id}`,
+                })))
+                : options.map((option) => m(InputCheckbox, {
+                    disabled: disabled || option.disabled,
+                    label: option.label,
+                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                    className: option.className || checkboxClass,
+                    checked: isChecked(option.id),
+                    description: option.description,
+                    inputId: `${state.componentId}-${option.id}`,
+                }));
+            return m('div', { id: state.componentId, className: cn, style }, [
+                label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                showSelectAll &&
+                    m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                        m('a', {
+                            href: '#',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                selectAll(options, callback);
+                            },
+                            style: 'margin-right: 15px;',
+                        }, 'Select All'),
+                        m('a', {
+                            href: '#',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                selectNone(callback);
+                            },
+                        }, 'Select None'),
+                    ]),
+                description && m(HelperText, { helperText: description }),
+                m('form', { action: '#' }, optionsContent),
+            ]);
+        },
+    };
+};
+
+const PaginationItem = () => ({
+    view: ({ attrs: { title, href, active, disabled } }) => m('li', { className: active ? 'active' : disabled ? 'disabled' : 'waves-effect' }, typeof title === 'number' ? m(m.route.Link, { href }, title) : title),
+});
+const Pagination = () => {
+    const state = {
+        pagIndex: 0,
+    };
+    return {
+        view: ({ attrs: { items, curPage = 1, size = Math.min(9, items.length) } }) => {
+            const { pagIndex } = state;
+            const startPage = pagIndex * size;
+            const endPage = startPage + size;
+            const canGoBack = pagIndex > 0;
+            const canGoForward = endPage < items.length;
+            const displayedItems = [
+                {
+                    title: m('a', {
+                        onclick: () => canGoBack && state.pagIndex--,
+                    }, m('i.material-icons', 'chevron_left')),
+                    disabled: !canGoBack,
+                },
+                ...items.filter((_, i) => startPage <= i && i < endPage),
+                {
+                    title: m('a', {
+                        onclick: () => canGoForward && state.pagIndex++,
+                    }, m('i.material-icons', 'chevron_right')),
+                    disabled: !canGoForward,
+                },
+            ];
+            return m('ul.pagination', displayedItems.map((item, i) => m(PaginationItem, Object.assign(Object.assign({ title: startPage + i }, item), { active: startPage + i === curPage }))));
+        },
+    };
+};
+
+/**
+ * MaterializeCSS Parallax component with dynamic positioning
+ * Port of the original MaterializeCSS parallax logic
+ */
+const Parallax = () => {
+    let containerEl = null;
+    let imgEl = null;
+    let scrollThrottle = null;
+    let lastScrollTop = -1;
+    // MaterializeCSS parallax logic - exact port from original source
+    const updateParallax = () => {
+        var _a;
+        if (!containerEl || !imgEl)
+            return;
+        const containerHeight = containerEl.offsetHeight > 0 ? containerEl.offsetHeight : ((_a = containerEl.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 1;
+        const imgHeight = imgEl.offsetHeight;
+        const parallaxDist = imgHeight - containerHeight;
+        const bottom = containerEl.offsetTop + containerHeight;
+        const top = containerEl.offsetTop;
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        const windowHeight = window.innerHeight;
+        const windowBottom = scrollTop + windowHeight;
+        const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+        // MaterializeCSS formula: start at negative parallaxDist/2, move toward positive parallaxDist/2
+        const parallax = Math.round(parallaxDist * percentScrolled - parallaxDist / 2);
+        // Only update if we're in the viewport and scroll position changed
+        if (bottom > scrollTop && top < windowBottom && scrollTop !== lastScrollTop) {
+            // Match MaterializeCSS transform format: translate3d(-50%, Ypx, 0px) with opacity
+            imgEl.style.transform = `translate3d(-50%, ${parallax}px, 0px)`;
+            imgEl.style.opacity = '1';
+            lastScrollTop = scrollTop;
+        }
+    };
+    const handleScroll = () => {
+        if (scrollThrottle)
+            return;
+        scrollThrottle = requestAnimationFrame(() => {
+            updateParallax();
+            scrollThrottle = null;
+        });
+    };
+    const handleResize = () => {
+        updateParallax();
+    };
+    const setupParallax = (containerElement, responsiveThreshold) => {
+        containerEl = containerElement;
+        imgEl = containerElement.querySelector('.parallax img');
+        if (!imgEl)
+            return;
+        // Check if we should enable parallax based on screen size
+        const shouldEnableParallax = window.innerWidth >= responsiveThreshold;
+        if (shouldEnableParallax) {
+            // Set initial MaterializeCSS styles on the image
+            imgEl.style.transform = 'translate3d(-50%, 0px, 0px)';
+            imgEl.style.opacity = '1';
+            // Wait for image to load before calculating parallax
+            if (imgEl.complete) {
+                updateParallax();
+            }
+            else {
+                imgEl.onload = () => updateParallax();
+            }
+            // Add event listeners
+            window.addEventListener('scroll', handleScroll, { passive: true });
+            window.addEventListener('resize', handleResize, { passive: true });
+            // Store cleanup function
+            containerEl._parallaxCleanup = () => {
+                window.removeEventListener('scroll', handleScroll);
+                window.removeEventListener('resize', handleResize);
+                if (scrollThrottle) {
+                    cancelAnimationFrame(scrollThrottle);
+                    scrollThrottle = null;
+                }
+            };
+        }
+    };
+    const cleanup = () => {
+        if (containerEl && containerEl._parallaxCleanup) {
+            containerEl._parallaxCleanup();
+        }
+        containerEl = null;
+        imgEl = null;
+        if (scrollThrottle) {
+            cancelAnimationFrame(scrollThrottle);
+            scrollThrottle = null;
+        }
+        lastScrollTop = -1;
+    };
+    return {
+        oncreate: ({ dom, attrs }) => {
+            const { responsiveThreshold = 768 } = attrs;
+            setupParallax(dom, responsiveThreshold);
+        },
+        onremove: () => {
+            cleanup();
+        },
+        view: ({ attrs }) => {
+            const { src, alt = '' } = attrs;
+            if (!src)
+                return undefined;
+            return m('.parallax-container', [
+                m('.parallax', [
+                    m('img', {
+                        src,
+                        alt,
+                        onerror: (e) => {
+                            console.warn('Parallax image failed to load:', src);
+                            const img = e.target;
+                            img.style.backgroundColor = '#ddd';
+                            img.alt = 'Image failed to load';
+                        },
+                    }),
+                ]),
+            ]);
+        },
+    };
+};
+
+const defaultI18n = {
+    cancel: 'Cancel',
+    clear: 'Clear',
+    done: 'Ok',
+    previousMonth: '\u2039',
+    nextMonth: '\u203a',
+    months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+};
+// Utility functions based on Materialize CSS implementation
+const isDate = (obj) => {
+    return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+};
+const isWeekend = (date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+};
+const setToStartOfDay = (date) => {
+    if (isDate(date))
+        date.setHours(0, 0, 0, 0);
+};
+const getDaysInMonth = (year, month) => {
+    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+};
+const isLeapYear = (year) => {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+};
+const compareDates = (a, b) => {
+    return a.getTime() === b.getTime();
+};
+/**
+ * Enhanced DatePicker component based on Materialize CSS datepicker
+ */
+const DatePicker = () => {
+    let state;
+    const mergeOptions = (attrs) => {
+        // Handle HTML attributes
+        let yearRange = 10;
+        if (attrs.yearrange) {
+            const parts = attrs.yearrange.split(',');
+            if (parts.length === 2) {
+                yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
+            }
+        }
+        else if (attrs.yearRange) {
+            yearRange = attrs.yearRange;
+        }
+        // Handle format - priority: format attribute > displayFormat > default
+        let finalFormat = 'mmm dd, yyyy';
+        if (attrs.format) {
+            finalFormat = attrs.format;
+        }
+        else if (attrs.displayFormat) {
+            finalFormat = attrs.displayFormat;
+        }
+        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+        // Merge i18n properly
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+        return merged;
+    };
+    const toString = (date, format) => {
+        if (!date || !isDate(date)) {
+            return '';
+        }
+        // Split format into tokens - match longer patterns first
+        const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
+        let result = format;
+        // Replace all format tokens with actual values
+        result = result.replace(formatTokens, (match) => {
+            if (state.formats[match]) {
+                return String(state.formats[match]());
+            }
+            return match;
+        });
+        return result;
+    };
+    const setDate = (date, preventOnSelect = false, options) => {
+        if (!date) {
+            state.date = null;
+            return;
+        }
+        if (typeof date === 'string') {
+            date = new Date(Date.parse(date));
+        }
+        if (!isDate(date)) {
+            return;
+        }
+        const min = options.minDate;
+        const max = options.maxDate;
+        if (isDate(min) && date < min) {
+            date = min;
+        }
+        else if (isDate(max) && date > max) {
+            date = max;
+        }
+        state.date = new Date(date.getTime());
+        setToStartOfDay(state.date);
+        gotoDate(state.date);
+        if (!preventOnSelect && options.onSelect) {
+            options.onSelect(state.date);
+        }
+    };
+    const gotoDate = (date) => {
+        if (!isDate(date)) {
+            return;
+        }
+        state.calendars = [
+            {
+                month: date.getMonth(),
+                year: date.getFullYear(),
+            },
+        ];
+    };
+    const nextMonth = () => {
+        state.calendars[0].month++;
+        adjustCalendars();
+    };
+    const prevMonth = () => {
+        state.calendars[0].month--;
+        adjustCalendars();
+    };
+    const adjustCalendars = () => {
+        state.calendars[0] = adjustCalendar(state.calendars[0]);
+    };
+    const adjustCalendar = (calendar) => {
+        if (calendar.month < 0) {
+            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+            calendar.month += 12;
+        }
+        if (calendar.month > 11) {
+            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+            calendar.month -= 12;
+        }
+        return calendar;
+    };
+    const renderDay = (opts, options) => {
+        const arr = [];
+        let ariaSelected = 'false';
+        if (opts.isEmpty) {
+            {
+                return m('td.is-empty');
+            }
+        }
+        if (opts.isDisabled) {
+            arr.push('is-disabled');
+        }
+        if (opts.isToday) {
+            arr.push('is-today');
+        }
+        if (opts.isSelected) {
+            arr.push('is-selected');
+            ariaSelected = 'true';
+        }
+        return m('td', {
+            'data-day': opts.day,
+            class: arr.join(' '),
+            'aria-selected': ariaSelected,
+        }, [
+            m('button.datepicker-day-button', {
+                type: 'button',
+                'data-year': opts.year,
+                'data-month': opts.month,
+                'data-day': opts.day,
+                onclick: (e) => {
+                    const target = e.target;
+                    if (!opts.isDisabled) {
+                        const year = parseInt(target.getAttribute('data-year') || '0', 10);
+                        const month = parseInt(target.getAttribute('data-month') || '0', 10);
+                        const day = parseInt(target.getAttribute('data-day') || '0', 10);
+                        const selectedDate = new Date(year, month, day);
+                        setDate(selectedDate, false, options);
+                        if (options.autoClose) {
+                            state.isOpen = false;
+                        }
+                    }
+                },
+            }, opts.day),
+        ]);
+    };
+    const renderCalendar = (year, month, options, randId) => {
+        const now = new Date();
+        const days = getDaysInMonth(year, month);
+        let before = new Date(year, month, 1).getDay();
+        const data = [];
+        let row = [];
+        setToStartOfDay(now);
+        if (options.firstDay > 0) {
+            before -= options.firstDay;
+            if (before < 0) {
+                before += 7;
+            }
+        }
+        const previousMonth = month === 0 ? 11 : month - 1;
+        const nextMonth = month === 11 ? 0 : month + 1;
+        const yearOfPreviousMonth = month === 0 ? year - 1 : year;
+        const yearOfNextMonth = month === 11 ? year + 1 : year;
+        const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+        let cells = days + before;
+        let after = cells;
+        while (after > 7) {
+            after -= 7;
+        }
+        cells += 7 - after;
+        for (let i = 0, r = 0; i < cells; i++) {
+            const day = new Date(year, month, 1 + (i - before));
+            const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
+            const isToday = compareDates(day, now);
+            const isEmpty = i < before || i >= days + before;
+            let dayNumber = 1 + (i - before);
+            let monthNumber = month;
+            let yearNumber = year;
+            if (isEmpty) {
+                if (i < before) {
+                    dayNumber = daysInPreviousMonth + dayNumber;
+                    monthNumber = previousMonth;
+                    yearNumber = yearOfPreviousMonth;
+                }
+                else {
+                    dayNumber = dayNumber - days;
+                    monthNumber = nextMonth;
+                    yearNumber = yearOfNextMonth;
+                }
+            }
+            const isDisabled = (options.minDate && day < options.minDate) ||
+                (options.maxDate && day > options.maxDate) ||
+                (options.disableWeekends && isWeekend(day)) ||
+                (options.disableDayFn && options.disableDayFn(day));
+            const dayConfig = {
+                day: dayNumber,
+                month: monthNumber,
+                year: yearNumber,
+                isSelected: isSelected,
+                isToday: isToday,
+                isDisabled: isDisabled,
+                isEmpty: isEmpty};
+            row.push(renderDay(dayConfig, options));
+            if (++r === 7) {
+                data.push(m('tr.datepicker-row', row));
+                row = [];
+                r = 0;
+            }
+        }
+        const weekdayHeaders = [];
+        for (let i = 0; i < 7; i++) {
+            let day = i + options.firstDay;
+            while (day >= 7) {
+                day -= 7;
+            }
+            weekdayHeaders.push(m('th', { scope: 'col' }, [
+                m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
+            ]));
+        }
+        return m('.datepicker-table-wrapper', [
+            m('table.datepicker-table', {
+                cellpadding: '0',
+                cellspacing: '0',
+                role: 'grid',
+                'aria-labelledby': 'datepicker-controls',
+            }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
+        ]);
+    };
+    const renderDateDisplay = (options) => {
+        const displayDate = isDate(state.date) ? state.date : new Date();
+        const day = options.i18n.weekdaysShort[displayDate.getDay()];
+        const month = options.i18n.monthsShort[displayDate.getMonth()];
+        const date = displayDate.getDate();
+        return m('.datepicker-date-display', [
+            m('span.year-text', displayDate.getFullYear()),
+            m('span.date-text', `${day}, ${month} ${date}`),
+        ]);
+    };
+    const renderControls = (options, randId) => {
+        const calendar = state.calendars[0];
+        const year = calendar.year;
+        const month = calendar.month;
+        // Month options
+        const monthOptions = [];
+        for (let i = 0; i < 12; i++) {
+            monthOptions.push(m('option', {
+                value: i,
+                selected: i === month ? 'selected' : undefined,
+            }, options.i18n.months[i]));
+        }
+        // Year options
+        const yearOptions = [];
+        let yearStart, yearEnd;
+        if (Array.isArray(options.yearRange)) {
+            yearStart = options.yearRange[0];
+            yearEnd = options.yearRange[1];
+        }
+        else {
+            yearStart = year - options.yearRange;
+            yearEnd = year + options.yearRange;
+        }
+        for (let i = yearStart; i <= yearEnd; i++) {
+            yearOptions.push(m('option', {
+                value: i,
+                selected: i === year ? 'selected' : undefined,
+            }, i));
+        }
+        return m('.datepicker-controls', {
+            id: randId,
+            role: 'heading',
+            'aria-live': 'assertive',
+        }, [
+            m('button.month-prev', {
+                type: 'button',
+                onclick: (e) => {
+                    e.preventDefault();
+                    prevMonth();
+                },
+            }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
+                m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
+            ])),
+            m('.selects-container', [
+                // Month select wrapper
+                m('.select-wrapper.select-month', [
+                    m('input.select-dropdown.dropdown-trigger', {
+                        type: 'text',
+                        readonly: true,
+                        value: options.i18n.months[month],
+                        onclick: (e) => {
+                            e.preventDefault();
+                            state.monthDropdownOpen = !state.monthDropdownOpen;
+                            state.yearDropdownOpen = false; // Close year dropdown
+                        },
+                    }),
+                    // Custom dropdown menu
+                    state.monthDropdownOpen &&
+                        m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
+                            key: index,
+                            class: index === month ? 'selected' : '',
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                gotoMonth(index);
+                                state.monthDropdownOpen = false;
+                            },
+                        }, monthName))),
+                ]),
+                // Year select wrapper
+                m('.select-wrapper.select-year', [
+                    m('input.select-dropdown.dropdown-trigger', {
+                        type: 'text',
+                        readonly: true,
+                        value: year.toString(),
+                        onclick: (e) => {
+                            e.preventDefault();
+                            state.yearDropdownOpen = !state.yearDropdownOpen;
+                            state.monthDropdownOpen = false; // Close month dropdown
+                        },
+                    }),
+                    // Custom dropdown menu
+                    state.yearDropdownOpen &&
+                        m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
+                            key: i,
+                            class: i === year ? 'selected' : '',
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                gotoYear(i);
+                                state.yearDropdownOpen = false;
+                            },
+                        }, i))),
+                ]),
+            ]),
+            m('button.month-next', {
+                type: 'button',
+                onclick: (e) => {
+                    e.preventDefault();
+                    nextMonth();
+                },
+            }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
+                m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
+            ])),
+        ]);
+    };
+    const gotoMonth = (month) => {
+        if (!isNaN(month)) {
+            state.calendars[0].month = month;
+            adjustCalendars();
+        }
+    };
+    const gotoYear = (year) => {
+        if (!isNaN(year)) {
+            state.calendars[0].year = year;
+            adjustCalendars();
+        }
+    };
+    const handleDocumentClick = (e) => {
+        const target = e.target;
+        if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+            state.monthDropdownOpen = false;
+            state.yearDropdownOpen = false;
+        }
+    };
+    return {
+        oninit: (vnode) => {
+            const attrs = vnode.attrs;
+            const options = mergeOptions(attrs);
+            state = {
+                id: uniqueId(),
+                isOpen: false,
+                date: null,
+                calendars: [{ month: 0, year: 0 }],
+                monthDropdownOpen: false,
+                yearDropdownOpen: false,
+                formats: {
+                    d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
+                    dd: () => {
+                        var _a;
+                        const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
+                        return (d < 10 ? '0' : '') + d;
+                    },
+                    ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                    dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                    m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
+                    mm: () => {
+                        var _a;
+                        const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
+                        return (m < 10 ? '0' : '') + m;
+                    },
+                    mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                    mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                    yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
+                    yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
+                },
+            };
+            // Initialize date
+            let defaultDate = attrs.defaultDate;
+            if (!defaultDate && attrs.initialValue) {
+                defaultDate = new Date(attrs.initialValue);
+            }
+            if (isDate(defaultDate)) {
+                // Always set the date if we have initialValue or defaultDate
+                setDate(defaultDate, true, options);
+            }
+            else {
+                gotoDate(new Date());
+            }
+            // Add document click listener to close dropdowns
+            document.addEventListener('click', handleDocumentClick);
+        },
+        onremove: () => {
+            // Clean up event listener
+            document.removeEventListener('click', handleDocumentClick);
+        },
+        view: (vnode) => {
+            const attrs = vnode.attrs;
+            const options = mergeOptions(attrs);
+            const { id = state.id, label, dateLabel, placeholder, disabled, required, className, style, helperText, iconName, newRow, } = attrs;
+            // Use dateLabel if label is not provided (backward compatibility)
+            const finalLabel = label || dateLabel;
+            const finalClassName = newRow ? `${className || ''} clear` : className;
+            return m('.input-field', {
+                className: finalClassName,
+                style,
+            }, [
+                // Icon prefix
+                iconName && m('i.material-icons.prefix', iconName),
+                // Main date input
+                m('input.datepicker', {
+                    id,
+                    type: 'text',
+                    value: toString(state.date, options.format),
+                    placeholder,
+                    disabled,
+                    required,
+                    readonly: true,
+                    format: attrs.format,
+                    yearrange: attrs.yearrange,
+                    tabindex: '0',
+                    onclick: () => {
+                        if (!disabled) {
+                            state.isOpen = true;
+                            if (options.onOpen)
+                                options.onOpen();
+                        }
+                    },
+                }),
+                // Label
+                finalLabel &&
+                    m('label', {
+                        for: id,
+                        class: state.date || placeholder ? 'active' : '',
+                    }, finalLabel),
+                // Helper text
+                helperText && m('span.helper-text', helperText),
+                // Modal datepicker
+                state.isOpen && [
+                    m('.modal.datepicker-modal.open', {
+                        id: `modal-${state.id}`,
+                        tabindex: 0,
+                        style: {
+                            zIndex: 1003,
+                            display: 'block',
+                            opacity: 1,
+                            top: '10%',
+                            transform: 'scaleX(1) scaleY(1)',
+                        },
+                    }, [
+                        m('.modal-content.datepicker-container', {
+                            onclick: (e) => {
+                                // Close dropdowns when clicking anywhere in the modal content
+                                const target = e.target;
+                                if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                                    state.monthDropdownOpen = false;
+                                    state.yearDropdownOpen = false;
+                                }
+                            },
+                        }, [
+                            renderDateDisplay(options),
+                            m('.datepicker-calendar-container', [
+                                m('.datepicker-calendar', [
+                                    renderControls(options, `datepicker-title-${Math.random().toString(36).slice(2)}`),
+                                    renderCalendar(state.calendars[0].year, state.calendars[0].month, options),
+                                ]),
+                                m('.datepicker-footer', [
+                                    options.showClearBtn &&
+                                        m('button.btn-flat.datepicker-clear.waves-effect', {
+                                            type: 'button',
+                                            style: '',
+                                            onclick: () => {
+                                                setDate(null, false, options);
+                                                state.isOpen = false;
+                                            },
+                                        }, options.i18n.clear),
+                                    m('.confirmation-btns', [
+                                        m('button.btn-flat.datepicker-cancel.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                state.isOpen = false;
+                                                if (options.onClose)
+                                                    options.onClose();
+                                            },
+                                        }, options.i18n.cancel),
+                                        m('button.btn-flat.datepicker-done.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                if (attrs.onchange && state.date) {
+                                                    attrs.onchange(state.date.toISOString().split('T')[0]);
+                                                }
+                                                state.isOpen = false;
+                                                if (options.onClose)
+                                                    options.onClose();
+                                            },
+                                        }, options.i18n.done),
+                                    ]),
+                                ]),
+                            ]),
+                        ]),
+                    ]),
+                    // Modal overlay
+                    m('.modal-overlay', {
+                        style: {
+                            zIndex: 1002,
+                            display: 'block',
+                            opacity: 0.5,
+                        },
+                        onclick: () => {
+                            state.isOpen = false;
+                            if (options.onClose)
+                                options.onClose();
+                        },
+                    }),
+                ],
+            ]);
+        },
+    };
+};
+/**
+ * Enhanced TimePicker component with i18n support and improved functionality.
+ *
+ * Usage:
+ * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
+ * - Use `defaultTime` only if you need a fallback when the field is cleared
+ * - The component accepts and outputs 24-hour format strings ("HH:MM")
+ * - Display format (12h/24h) is controlled by the `twelveHour` property
+ */
+const TimePicker = () => {
+    const state = {
+        id: uniqueId(),
+        isOpen: false,
+        hours: 12,
+        minutes: 0,
+        ampm: 'AM',
+        use12Hour: false,
+        time: ''};
+    const parseTime = (timeString) => {
+        if (!timeString)
+            return { hours: 12, minutes: 0, ampm: 'AM' };
+        const [time, ampm] = timeString.split(' ');
+        const [hoursStr, minutesStr] = time.split(':');
+        let hours = parseInt(hoursStr, 10) || 0;
+        const minutes = parseInt(minutesStr, 10) || 0;
+        if (ampm) {
+            // 12-hour format
+            if (ampm.toUpperCase() === 'PM' && hours !== 12)
+                hours += 12;
+            if (ampm.toUpperCase() === 'AM' && hours === 12)
+                hours = 0;
+            return { hours, minutes, ampm: ampm.toUpperCase() };
+        }
+        else {
+            // 24-hour format
+            const displayAmpm = hours >= 12 ? 'PM' : 'AM';
+            return { hours, minutes, ampm: displayAmpm };
+        }
+    };
+    const formatTime = (hours, minutes, use12Hour) => {
+        if (use12Hour) {
+            const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+        }
+        else {
+            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+        }
+    };
+    const setTime = (timeString, attrs) => {
+        const parsed = parseTime(timeString);
+        state.hours = parsed.hours;
+        state.minutes = parsed.minutes;
+        state.ampm = parsed.ampm;
+        state.time = timeString;
+        if (attrs.onchange) {
+            // Always output 24-hour format for consistency
+            const output24h = `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`;
+            attrs.onchange(output24h);
+        }
+        if (attrs.oninput) {
+            attrs.oninput(timeString);
+        }
+        if (attrs.onSelect) {
+            attrs.onSelect(state.hours, state.minutes);
+        }
+    };
+    return {
+        oninit: (vnode) => {
+            const { initialValue, defaultTime, twelveHour = false } = vnode.attrs;
+            state.use12Hour = twelveHour;
+            const timeValue = initialValue || defaultTime || '';
+            if (timeValue) {
+                const parsed = parseTime(timeValue);
+                state.hours = parsed.hours;
+                state.minutes = parsed.minutes;
+                state.ampm = parsed.ampm;
+                state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+            }
+        },
+        view: (vnode) => {
+            const attrs = vnode.attrs;
+            const { id = state.id, label = 'Time', placeholder = 'Select time', disabled, readonly, required, className, style, helperText, iconName = 'access_time', newRow, twelveHour = false, timeLabel = 'Time', nowLabel = 'Now', clearLabel = 'Clear', closeLabel = 'Close', amLabel = 'AM', pmLabel = 'PM', showClearBtn = false, showNowBtn = false, useModal = true, } = attrs;
+            state.use12Hour = twelveHour;
+            const finalClassName = newRow ? `${className || ''} clear` : className;
+            const displayValue = state.time ? formatTime(state.hours, state.minutes, state.use12Hour) : '';
+            return m('.input-field', {
+                className: finalClassName,
+                style,
+            }, [
+                // Icon prefix
+                iconName && m('i.material-icons.prefix', iconName),
+                // Time input field
+                m('input.timepicker', {
+                    id,
+                    type: 'text',
+                    value: displayValue,
+                    placeholder,
+                    disabled,
+                    readonly,
+                    required,
+                    onclick: () => {
+                        if (!disabled && !readonly && useModal) {
+                            state.isOpen = true;
+                            if (attrs.onOpen)
+                                attrs.onOpen();
+                        }
+                    },
+                }),
+                // Label
+                label &&
+                    m('label', {
+                        for: id,
+                        class: displayValue || placeholder ? 'active' : '',
+                    }, label),
+                // Helper text
+                helperText && m('span.helper-text', helperText),
+                // Time picker modal (simplified version)
+                useModal &&
+                    state.isOpen &&
+                    m('.timepicker-modal', {
+                        style: {
+                            position: 'fixed',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            backgroundColor: 'white',
+                            padding: '20px',
+                            borderRadius: '4px',
+                            boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
+                            zIndex: 1000,
+                        },
+                    }, [
+                        m('h4', timeLabel),
+                        m('.time-inputs', {
+                            style: { display: 'flex', alignItems: 'center', gap: '10px', margin: '20px 0' },
+                        }, [
+                            // Hours input
+                            m('input', {
+                                type: 'number',
+                                min: state.use12Hour ? 1 : 0,
+                                max: state.use12Hour ? 12 : 23,
+                                value: state.use12Hour
+                                    ? state.hours === 0
+                                        ? 12
+                                        : state.hours > 12
+                                            ? state.hours - 12
+                                            : state.hours
+                                    : state.hours,
+                                style: { width: '60px', textAlign: 'center', padding: '8px' },
+                                onchange: (e) => {
+                                    const target = e.target;
+                                    let hours = parseInt(target.value) || 0;
+                                    if (state.use12Hour) {
+                                        if (state.ampm === 'PM' && hours !== 12)
+                                            hours += 12;
+                                        if (state.ampm === 'AM' && hours === 12)
+                                            hours = 0;
+                                    }
+                                    state.hours = hours;
+                                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                },
+                            }),
+                            m('span', ':'),
+                            // Minutes input
+                            m('input', {
+                                type: 'number',
+                                min: 0,
+                                max: 59,
+                                value: state.minutes,
+                                style: { width: '60px', textAlign: 'center', padding: '8px' },
+                                onchange: (e) => {
+                                    const target = e.target;
+                                    state.minutes = parseInt(target.value) || 0;
+                                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                },
+                            }),
+                            // AM/PM toggle for 12-hour format
+                            state.use12Hour &&
+                                m('select', {
+                                    value: state.ampm,
+                                    style: { padding: '8px' },
+                                    onchange: (e) => {
+                                        const target = e.target;
+                                        const oldAmpm = state.ampm;
+                                        state.ampm = target.value;
+                                        // Adjust hours when switching AM/PM
+                                        if (oldAmpm !== state.ampm) {
+                                            if (state.ampm === 'PM' && state.hours < 12) {
+                                                state.hours += 12;
+                                            }
+                                            else if (state.ampm === 'AM' && state.hours >= 12) {
+                                                state.hours -= 12;
+                                            }
+                                        }
+                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                    },
+                                }, [m('option', { value: 'AM' }, amLabel), m('option', { value: 'PM' }, pmLabel)]),
+                        ]),
+                        // Action buttons
+                        m('.timepicker-actions', {
+                            style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' },
+                        }, [
+                            showClearBtn &&
+                                m('button.btn-flat', {
+                                    onclick: () => {
+                                        setTime('', attrs);
+                                        state.isOpen = false;
+                                    },
+                                }, clearLabel),
+                            showNowBtn &&
+                                m('button.btn-flat', {
+                                    onclick: () => {
+                                        const now = new Date();
+                                        state.hours = now.getHours();
+                                        state.minutes = now.getMinutes();
+                                        state.ampm = state.hours >= 12 ? 'PM' : 'AM';
+                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                                    },
+                                }, nowLabel),
+                            m('button.btn-flat', {
+                                onclick: () => {
+                                    state.isOpen = false;
+                                    if (attrs.onClose)
+                                        attrs.onClose();
+                                },
+                            }, closeLabel),
+                            m('button.btn-flat', {
+                                onclick: () => {
+                                    setTime(state.time, attrs);
+                                    state.isOpen = false;
+                                    if (attrs.onClose)
+                                        attrs.onClose();
+                                },
+                            }, 'OK'),
+                        ]),
+                    ]),
+                // Modal backdrop
+                useModal &&
+                    state.isOpen &&
+                    m('.modal-backdrop', {
+                        style: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: 'rgba(0,0,0,0.5)',
+                            zIndex: 999,
+                        },
+                        onclick: () => {
+                            state.isOpen = false;
+                            if (attrs.onClose)
+                                attrs.onClose();
+                        },
+                    }),
+            ]);
+        },
+    };
+};
+
+const RadioButton = () => ({
+    view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId } }) => {
+        const radioId = inputId || `${groupId}-${id}`;
+        return m('p', { className }, m('label', { for: radioId }, [
+            m('input[type=radio][tabindex=0]', {
+                id: radioId,
+                name: groupId,
+                disabled,
+                checked,
+                onclick: onchange ? () => onchange(id) : undefined,
+            }),
+            m('span', m.trust(label)),
+        ]));
+    },
+});
+/** Component to show a list of radio buttons, from which you can choose one. */
+// export const RadioButtons: FactoryComponent<IRadioButtons<T>> = () => {
+const RadioButtons = () => {
+    const state = { groupId: uniqueId() };
+    return {
+        oninit: ({ attrs: { checkedId, initialValue, id } }) => {
+            state.oldCheckedId = checkedId;
+            state.checkedId = checkedId || initialValue;
+            state.componentId = id || uniqueId();
+        },
+        view: ({ attrs: { checkedId: cid, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange: callback, }, }) => {
+            if (state.oldCheckedId !== cid) {
+                state.oldCheckedId = state.checkedId = cid;
+            }
+            const { groupId, checkedId, componentId } = state;
+            const onchange = (propId) => {
+                state.checkedId = propId;
+                if (callback) {
+                    callback(propId);
+                }
+            };
+            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const optionsContent = layout === 'horizontal'
+                ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
+                    groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
+                : options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
+                    groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` })));
+            return m('div', { id: componentId, className: cn }, [
+                label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                description && m('p.helper-text', m.trust(description)),
+                m('form', { action: '#' }, optionsContent),
+            ]);
+        },
+    };
+};
+
+/** Select component */
+const Select = () => {
+    const state = {
+        id: '',
+        isOpen: false,
+        selectedIds: [],
+        focusedIndex: -1,
+        inputRef: null,
+        dropdownRef: null,
+    };
+    const isSelected = (id, selectedIds) => {
+        return selectedIds.some((selectedId) => selectedId === id);
+    };
+    const toggleOption = (id, multiple, attrs) => {
+        if (multiple) {
+            const newIds = state.selectedIds.includes(id)
+                ? // isSelected(id, state.selectedIds)
+                    state.selectedIds.filter((selectedId) => selectedId !== id)
+                : [...state.selectedIds, id];
+            state.selectedIds = newIds;
+            attrs.onchange(newIds);
+            console.log(newIds);
+            // Keep dropdown open for multiple select
+        }
+        else {
+            state.selectedIds = [id];
+            // Close dropdown for single select
+            state.isOpen = false;
+            attrs.onchange([id]);
+        }
+    };
+    const handleKeyDown = (e, attrs) => {
+        const { options } = attrs;
+        const selectableOptions = options.filter((opt) => !opt.disabled);
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                else {
+                    const currentSelectableIndex = selectableOptions.findIndex((opt) => opt === options[state.focusedIndex]);
+                    const nextSelectableIndex = Math.min(currentSelectableIndex + 1, selectableOptions.length - 1);
+                    const nextOption = selectableOptions[nextSelectableIndex];
+                    state.focusedIndex = options.findIndex((opt) => opt === nextOption);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (state.isOpen) {
+                    const currentSelectableIndex = selectableOptions.findIndex((opt) => opt === options[state.focusedIndex]);
+                    const prevSelectableIndex = Math.max(currentSelectableIndex - 1, 0);
+                    const prevOption = selectableOptions[prevSelectableIndex];
+                    state.focusedIndex = options.findIndex((opt) => opt === prevOption);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < options.length) {
+                    const option = options[state.focusedIndex];
+                    if (option && !option.disabled) {
+                        toggleOption(option.id, attrs.multiple || false, attrs);
+                    }
+                }
+                else if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                state.isOpen = false;
+                state.focusedIndex = -1;
+                break;
+        }
+    };
+    const closeDropdown = (e) => {
+        const target = e.target;
+        if (!target.closest('.select-wrapper-container')) {
+            state.isOpen = false;
+            m.redraw();
+        }
+    };
+    const renderGroupedOptions = (options, multiple, attrs) => {
+        const groupedOptions = {};
+        const ungroupedOptions = [];
+        // Group options by their group property
+        options.forEach((option) => {
+            if (option.group) {
+                if (!groupedOptions[option.group]) {
+                    groupedOptions[option.group] = [];
+                }
+                groupedOptions[option.group].push(option);
+            }
+            else {
+                ungroupedOptions.push(option);
+            }
+        });
+        const renderElements = [];
+        // Render ungrouped options first
+        ungroupedOptions.forEach((option) => {
+            renderElements.push(m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === options.indexOf(option) ? 'focused' : '' }, (option.disabled
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), m('span', multiple
+                ? m('label', { for: option.id }, m('input', {
+                    id: option.id,
+                    type: 'checkbox',
+                    checked: state.selectedIds.includes(option.id),
+                    disabled: option.disabled ? true : undefined,
+                    onclick: (e) => {
+                        e.stopPropagation();
+                    },
+                }), m('span', option.label))
+                : option.label)));
+        });
+        // Render grouped options
+        Object.keys(groupedOptions).forEach((groupName) => {
+            // Add group header
+            renderElements.push(m('li.optgroup', { tabindex: 0 }, m('span', groupName)));
+            // Add group options
+            groupedOptions[groupName].forEach((option) => {
+                renderElements.push(m('li', Object.assign({ class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, state.selectedIds) ? ' selected' : ''}${state.focusedIndex === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
+                    ? {}
+                    : {
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            toggleOption(option.id, multiple, attrs);
+                        },
+                    })), m('span', multiple
+                    ? m('label', { for: option.id }, m('input', {
+                        id: option.id,
+                        type: 'checkbox',
+                        checked: state.selectedIds.includes(option.id),
+                        disabled: option.disabled ? true : undefined,
+                        onclick: (e) => {
+                            e.stopPropagation();
+                        },
+                    }), m('span', option.label))
+                    : option.label)));
+            });
+        });
+        return renderElements;
+    };
+    return {
+        oninit: ({ attrs }) => {
+            const { checkedId, initialValue, id } = attrs;
+            state.id = id || uniqueId();
+            const iv = checkedId || initialValue;
+            if (iv !== null && typeof iv !== 'undefined') {
+                if (iv instanceof Array) {
+                    state.selectedIds = [...iv];
+                }
+                else {
+                    state.selectedIds = [iv];
+                }
+            }
+            // Add global click listener to close dropdown
+            document.addEventListener('click', closeDropdown);
+        },
+        onremove: () => {
+            // Cleanup global listener
+            document.removeEventListener('click', closeDropdown);
+        },
+        view: ({ attrs }) => {
+            // Sync external checkedId prop with internal state - do this in view for immediate response
+            const { checkedId } = attrs;
+            if (checkedId !== undefined) {
+                const newIds = checkedId instanceof Array ? checkedId : [checkedId];
+                if (JSON.stringify(newIds) !== JSON.stringify(state.selectedIds)) {
+                    state.selectedIds = newIds;
+                }
+            }
+            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
+            const finalClassName = newRow ? `${className} clear` : className;
+            const selectedOptions = options.filter((opt) => isSelected(opt.id, state.selectedIds));
+            return m('.input-field.select-space', {
+                className: finalClassName,
+                key,
+                style,
+            }, [
+                // Icon prefix
+                iconName && m('i.material-icons.prefix', iconName),
+                m('.select-wrapper', {
+                    onclick: disabled
+                        ? undefined
+                        : () => {
+                            state.isOpen = !state.isOpen;
+                        },
+                    onkeydown: disabled ? undefined : (e) => handleKeyDown(e, attrs),
+                    tabindex: disabled ? -1 : 0,
+                    'aria-expanded': state.isOpen ? 'true' : 'false',
+                    'aria-haspopup': 'listbox',
+                    role: 'combobox',
+                }, [
+                    m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                        id: state.id,
+                        value: selectedOptions.length > 0 ? selectedOptions.map((o) => o.label || o.id).join(', ') : placeholder,
+                        oncreate: ({ dom }) => {
+                            state.inputRef = dom;
+                        },
+                        onclick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            state.isOpen = !state.isOpen;
+                        },
+                    }),
+                    // Dropdown Menu
+                    state.isOpen &&
+                        m('ul.dropdown-content.select-dropdown', {
+                            tabindex: 0,
+                            oncreate: ({ dom }) => {
+                                state.dropdownRef = dom;
+                            },
+                            onremove: () => {
+                                state.dropdownRef = null;
+                            },
+                            style: getDropdownStyles(state.inputRef, true, options),
+                        }, [
+                            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+                            ...renderGroupedOptions(options, multiple, attrs),
+                        ]),
+                    m(MaterialIcon, {
+                        name: 'caret',
+                        direction: 'down',
+                    }),
+                ]),
+                // Label
+                label &&
+                    m(Label, {
+                        id: state.id,
+                        label,
+                        isMandatory,
+                    }),
+                // Helper text
+                helperText && m(HelperText, { helperText }),
+            ]);
+        },
+    };
+};
+
+/** Component to display a switch with two values. */
+const Switch = () => {
+    const state = { id: uniqueId(), checked: false };
+    return {
+        oninit: ({ attrs: { checked } }) => {
+            state.checked = checked || false;
+        },
+        view: ({ attrs }) => {
+            const id = attrs.id || state.id;
+            const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
+            const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            return m('div', {
+                className: cn,
+                onclick: (e) => {
+                    state.checked = !state.checked;
+                    onchange && onchange(state.checked);
+                    e.preventDefault();
+                },
+            }, [
+                label && m(Label, { label: label || '', id, isMandatory, className: 'active' }),
+                m('.switch', params, m('label', {
+                    style: { cursor: 'pointer' },
+                }, [
+                    m('span', left || 'Off'),
+                    m('input[type=checkbox]', {
+                        id,
+                        disabled,
+                        checked: state.checked,
+                    }),
+                    m('span.lever'),
+                    m('span', right || 'On'),
+                ])),
+            ]);
+        },
+    };
+};
+
+/** CSS-only Tabs component - no MaterializeCSS dependencies */
+const Tabs = () => {
+    const toAnchored = () => {
+        let activeTabFound = false;
+        return (tab) => {
+            const active = activeTabFound ? false : tab.active;
+            if (active)
+                activeTabFound = true;
+            const tabId = createId(tab.title, tab.id);
+            return Object.assign(Object.assign({}, tab), { active, tabId, anchorId: `anchor-${tabId}` });
+        };
+    };
+    const state = {
+        activeTabId: '',
+        isDragging: false,
+        startX: 0,
+        translateX: 0,
+        indicatorStyle: {
+            left: '0px',
+            width: '0px',
+        }};
+    const createId = (title, id) => (id ? id : title.replace(/ /g, '').toLowerCase());
+    const updateIndicator = () => {
+        const tabElement = document.getElementById(state.activeTabId);
+        if (tabElement) {
+            const tabsContainer = tabElement.closest('.tabs');
+            if (tabsContainer) {
+                const containerRect = tabsContainer.getBoundingClientRect();
+                const tabRect = tabElement.getBoundingClientRect();
+                const newLeft = `${tabRect.left - containerRect.left}px`;
+                const newWidth = `${tabRect.width}px`;
+                // Only update if values actually changed - NO m.redraw()!
+                if (state.indicatorStyle.left !== newLeft || state.indicatorStyle.width !== newWidth) {
+                    state.indicatorStyle = {
+                        left: newLeft,
+                        width: newWidth,
+                    };
+                }
+            }
+        }
+    };
+    const handleTabClick = (tabId, tabElement, attrs) => {
+        if (state.activeTabId === tabId)
+            return;
+        state.activeTabId = tabId;
+        // Call onShow callback if provided
+        if (attrs.onShow) {
+            attrs.onShow(tabElement);
+        }
+        // Call onTabChange callback if provided
+        if (attrs.onTabChange) {
+            attrs.onTabChange(tabId);
+        }
+    };
+    // Touch/swipe support for mobile
+    const handleTouchStart = (e) => {
+        if (!e.touches || e.touches.length === 0)
+            return;
+        state.isDragging = true;
+        state.startX = e.touches[0].clientX;
+    };
+    const handleTouchEnd = (e, attrs) => {
+        if (!state.isDragging || !e.changedTouches || e.changedTouches.length === 0)
+            return;
+        const endX = e.changedTouches[0].clientX;
+        const deltaX = endX - state.startX;
+        const threshold = 50; // Minimum swipe distance
+        if (Math.abs(deltaX) > threshold) {
+            const currentIndex = attrs.tabs.findIndex((tab) => createId(tab.title, tab.id) === state.activeTabId);
+            if (deltaX > 0 && currentIndex > 0) {
+                // Swipe right - go to previous tab
+                const prevTab = attrs.tabs[currentIndex - 1];
+                if (!prevTab.disabled && !prevTab.href) {
+                    const newTabId = createId(prevTab.title, prevTab.id);
+                    state.activeTabId = newTabId;
+                    if (attrs.onTabChange) {
+                        attrs.onTabChange(newTabId);
+                    }
+                }
+            }
+            else if (deltaX < 0 && currentIndex < attrs.tabs.length - 1) {
+                // Swipe left - go to next tab
+                const nextTab = attrs.tabs[currentIndex + 1];
+                if (!nextTab.disabled && !nextTab.href) {
+                    const newTabId = createId(nextTab.title, nextTab.id);
+                    state.activeTabId = newTabId;
+                    if (attrs.onTabChange) {
+                        attrs.onTabChange(newTabId);
+                    }
+                }
+            }
+        }
+        state.isDragging = false;
+        state.translateX = 0;
+        // m.redraw();
+    };
+    /** Initialize active tab - selectedTabId takes precedence, next active property or first available tab */
+    const setActiveTabId = (anchoredTabs, selectedTabId) => {
+        const selectedTab = selectedTabId ? anchoredTabs.find((a) => a.tabId === selectedTabId) : undefined;
+        if (selectedTab) {
+            state.activeTabId = selectedTab.tabId;
+            selectedTab.active = true;
+            return selectedTab;
+        }
+        const activeTab = anchoredTabs.find((t) => t.active);
+        if (activeTab) {
+            // Active tab property takes precedence over selectedTabId
+            state.activeTabId = activeTab.tabId;
+            return activeTab;
+        }
+        // Default to first non-disabled tab
+        const firstAvailableTab = anchoredTabs.find((t) => !t.disabled && !t.href);
+        if (firstAvailableTab) {
+            state.activeTabId = firstAvailableTab.tabId;
+            firstAvailableTab.active = true;
+            return firstAvailableTab;
+        }
+        return undefined;
+    };
+    return {
+        oninit: ({ attrs }) => {
+            const anchoredTabs = attrs.tabs.map(toAnchored());
+            setActiveTabId(anchoredTabs, attrs.selectedTabId);
+        },
+        oncreate: () => {
+            updateIndicator();
+            m.redraw();
+        },
+        view: ({ attrs }) => {
+            const { tabWidth, tabs, className, style, swipeable = false } = attrs;
+            const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+            const anchoredTabs = tabs.map(toAnchored());
+            const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
+            updateIndicator();
+            return m('.row', [
+                // Tab headers
+                m('.col.s12', m('ul.tabs', {
+                    className: cn,
+                    style,
+                }, [
+                    ...anchoredTabs.map((tab) => {
+                        const { className: tabClassName, title, anchorId, tabId, disabled, target, href } = tab;
+                        const cn = ['tab', tabWidth === 'fixed' ? `col s${Math.floor(12 / tabs.length)}` : '', tabClassName]
+                            .filter(Boolean)
+                            .join(' ')
+                            .trim();
+                        return m('li', {
+                            key: tabId,
+                            id: tabId,
+                            className: cn,
+                            disabled,
+                        }, m('a', {
+                            id: anchorId,
+                            className: tab.active ? 'active' : undefined,
+                            target,
+                            href: href || `#${anchorId}`,
+                            onclick: disabled || href
+                                ? undefined
+                                : (e) => {
+                                    e.preventDefault();
+                                    handleTabClick(tabId, e.target, attrs);
+                                },
+                            style: disabled ? { opacity: '0.6', cursor: 'not-allowed' } : undefined,
+                        }, title));
+                    }),
+                    // Add the indicator element
+                    m('li.indicator', {
+                        key: 'indicator',
+                        style: {
+                            display: state.activeTabId ? 'block' : 'none',
+                            left: state.indicatorStyle.left,
+                            width: state.indicatorStyle.width,
+                            transition: 'left 0.35s ease, width 0.35s ease',
+                        },
+                    }),
+                ]), activeTab &&
+                    m('.col.s12', {
+                        ontouchstart: swipeable ? handleTouchStart : undefined,
+                        ontouchend: swipeable ? (e) => handleTouchEnd(e, attrs) : undefined,
+                        style: swipeable ? { touchAction: 'pan-y' } : undefined,
+                    }, m('.tab-content', {
+                        className: activeTab.contentClass,
+                    }, activeTab.vnode))),
+            ]);
+        },
+    };
+};
+
+/**
+ * Mithril Factory Component for Multi-Select Dropdown with search
+ */
+const SearchSelect = () => {
+    //  (): <T extends string | number>(): Component<SearchSelectAttrs<T>, SearchSelectState<T>> => {
+    // State initialization
+    const state = {
+        isOpen: false,
+        selectedOptions: [], //options.filter((o) => iv.includes(o.id)),
+        searchTerm: '',
+        options: [],
+        inputRef: null,
+        dropdownRef: null,
+        focusedIndex: -1,
+        onchange: null,
+    };
+    const componentId = uniqueId();
+    const searchInputId = `${componentId}-search`;
+    // Handle click outside
+    const handleClickOutside = (e) => {
+        const target = e.target;
+        if (state.dropdownRef && state.dropdownRef.contains(target)) {
+            // Click inside dropdown, do nothing
+            return;
+        }
+        if (state.inputRef && state.inputRef.contains(target)) {
+            // Click on trigger handled by onclick event
+            return;
+        }
+        else {
+            // Click outside, close dropdown
+            state.isOpen = false;
+            m.redraw();
+        }
+    };
+    // Handle keyboard navigation
+    const handleKeyDown = (e, filteredOptions, showAddNew) => {
+        if (!state.isOpen)
+            return;
+        const totalOptions = filteredOptions.length + (showAddNew ? 1 : 0);
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                state.focusedIndex = Math.min(state.focusedIndex + 1, totalOptions - 1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                state.focusedIndex = Math.max(state.focusedIndex - 1, -1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (state.focusedIndex >= 0) {
+                    if (showAddNew && state.focusedIndex === filteredOptions.length) {
+                        // Handle add new option
+                        return 'addNew';
+                    }
+                    else if (state.focusedIndex < filteredOptions.length) {
+                        toggleOption(filteredOptions[state.focusedIndex]);
+                    }
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                state.isOpen = false;
+                state.focusedIndex = -1;
+                break;
+        }
+        return null;
+    };
+    // Toggle option selection
+    const toggleOption = (option) => {
+        if (option.disabled)
+            return;
+        state.selectedOptions = state.selectedOptions.some((item) => item.id === option.id)
+            ? state.selectedOptions.filter((item) => item.id !== option.id)
+            : [...state.selectedOptions, option];
+        state.searchTerm = '';
+        state.focusedIndex = -1;
+        state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+    };
+    // Remove a selected option
+    const removeOption = (option) => {
+        state.selectedOptions = state.selectedOptions.filter((item) => item.id !== option.id);
+        state.onchange && state.onchange(state.selectedOptions.map((o) => o.id));
+    };
+    return {
+        oninit: ({ attrs: { options = [], initialValue = [], onchange } }) => {
+            state.options = options;
+            state.selectedOptions = options.filter((o) => initialValue.includes(o.id));
+            state.onchange = onchange;
+        },
+        oncreate() {
+            document.addEventListener('click', handleClickOutside);
+        },
+        onremove() {
+            document.removeEventListener('click', handleClickOutside);
+        },
+        view({ attrs: { 
+        // onchange,
+        oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label,
+        // maxHeight = '25rem',
+         }, }) {
+            // Safely filter options
+            const filteredOptions = state.options.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
+                !state.selectedOptions.some((selected) => selected.id === option.id));
+            // Check if we should show the "add new option" element
+            const showAddNew = oncreateNewOption &&
+                state.searchTerm &&
+                !filteredOptions.some((o) => (o.label || o.id.toString()).toLowerCase() === state.searchTerm.toLowerCase());
+            // Render the dropdown
+            return m('.input-field.multi-select-dropdown', { className }, [
+                m('.chips.chips-initial.chips-container', {
+                    oncreate: ({ dom }) => {
+                        state.inputRef = dom;
+                    },
+                    onclick: (e) => {
+                        // console.log('SearchSelect clicked', state.isOpen, e); // Debug log
+                        e.preventDefault();
+                        e.stopPropagation();
+                        state.isOpen = !state.isOpen;
+                        // console.log('SearchSelect state changed to', state.isOpen); // Debug log
+                    },
+                    style: {
+                        display: 'flex',
+                        alignItems: 'end',
+                        flexWrap: 'wrap',
+                        cursor: 'pointer',
+                        position: 'relative',
+                    },
+                }, [
+                    // TODO FIXME Add to existing input
+                    // Hidden input for label association and accessibility
+                    m('input', {
+                        type: 'text',
+                        id: componentId,
+                        value: state.selectedOptions.map((o) => o.label || o.id.toString()).join(', '),
+                        readonly: true,
+                        style: { position: 'absolute', left: '-9999px', opacity: 0 },
+                    }),
+                    // Selected Options (chips)
+                    ...state.selectedOptions.map((option) => m('.chip', [
+                        option.label || option.id.toString(),
+                        m(MaterialIcon, {
+                            name: 'close',
+                            className: 'close',
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                removeOption(option);
+                            },
+                        }),
+                    ])),
+                    // Placeholder when no options selected
+                    state.selectedOptions.length === 0 &&
+                        placeholder &&
+                        m('span.placeholder', {
+                            style: {
+                                color: '#9e9e9e',
+                                flexGrow: 1,
+                                padding: '8px 0',
+                            },
+                        }, placeholder),
+                    // Spacer to push caret to the right
+                    m('span.spacer', { style: { flexGrow: 1 } }),
+                    m(MaterialIcon, {
+                        name: 'caret',
+                        direction: state.isOpen ? 'up' : 'down',
+                        style: { marginLeft: 'auto', cursor: 'pointer' },
+                    }),
+                ]),
+                // Label
+                label &&
+                    m('label', {
+                        for: componentId,
+                        class: placeholder || state.selectedOptions.length > 0 ? 'active' : '',
+                    }, label),
+                // Dropdown Menu
+                state.isOpen &&
+                    m('ul.dropdown-content.select-dropdown', {
+                        oncreate: ({ dom }) => {
+                            state.dropdownRef = dom;
+                        },
+                        onremove: () => {
+                            state.dropdownRef = null;
+                        },
+                        style: getDropdownStyles(state.inputRef),
+                    }, [
+                        m('li', // Search Input
+                        {
+                            class: 'search-wrapper',
+                            style: { padding: '0 16px', position: 'relative' },
+                        }, [
+                            m('input', {
+                                type: 'text',
+                                id: searchInputId,
+                                placeholder: searchPlaceholder,
+                                value: state.searchTerm || '',
+                                oncreate: ({ dom }) => {
+                                    // Auto-focus the search input when dropdown opens
+                                    dom.focus();
+                                },
+                                oninput: (e) => {
+                                    state.searchTerm = e.target.value;
+                                    state.focusedIndex = -1; // Reset focus when typing
+                                },
+                                onkeydown: async (e) => {
+                                    const result = handleKeyDown(e, filteredOptions, !!showAddNew);
+                                    if (result === 'addNew' && oncreateNewOption) {
+                                        const option = await oncreateNewOption(state.searchTerm);
+                                        toggleOption(option);
+                                    }
+                                },
+                                style: {
+                                    width: '100%',
+                                    outline: 'none',
+                                    fontSize: '0.875rem',
+                                    border: 'none',
+                                    padding: '8px 0',
+                                    borderBottom: '1px solid #9e9e9e',
+                                },
+                            }),
+                        ]),
+                        // No options found message or list of options
+                        ...(filteredOptions.length === 0 && !showAddNew
+                            ? [
+                                m('li', 
+                                // {
+                                //   style: getNoOptionsStyles(),
+                                // },
+                                noOptionsFound),
+                            ]
+                            : []),
+                        // Add new option item
+                        ...(showAddNew
+                            ? [
+                                m('li', {
+                                    onclick: async () => {
+                                        const option = await oncreateNewOption(state.searchTerm);
+                                        toggleOption(option);
+                                    },
+                                    class: state.focusedIndex === filteredOptions.length ? 'active' : '',
+                                    onmouseover: () => {
+                                        state.focusedIndex = filteredOptions.length;
+                                    },
+                                }, [m('span', `+ "${state.searchTerm}"`)]),
+                            ]
+                            : []),
+                        // List of filtered options
+                        ...filteredOptions.map((option, index) => m('li', {
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                toggleOption(option);
+                            },
+                            class: `${option.disabled ? 'disabled' : ''} ${state.focusedIndex === index ? 'active' : ''}`.trim(),
+                            onmouseover: () => {
+                                if (!option.disabled) {
+                                    state.focusedIndex = index;
+                                }
+                            },
+                        }, m('span', [
+                            m('input', {
+                                type: 'checkbox',
+                                checked: state.selectedOptions.some((selected) => selected.id === option.id),
+                            }),
+                            option.label || option.id.toString(),
+                        ]))),
+                    ]),
+            ]);
+        },
+    };
+};
+
+exports.AnchorItem = AnchorItem;
+exports.Autocomplete = Autocomplete;
+exports.Button = Button;
+exports.ButtonFactory = ButtonFactory;
+exports.Carousel = Carousel;
+exports.CharacterCounter = CharacterCounter;
+exports.Chips = Chips;
+exports.CodeBlock = CodeBlock;
+exports.Collapsible = Collapsible;
+exports.CollapsibleItem = CollapsibleItem;
+exports.Collection = Collection;
+exports.ColorInput = ColorInput;
+exports.DatePicker = DatePicker;
+exports.Dropdown = Dropdown;
+exports.EmailInput = EmailInput;
+exports.FileInput = FileInput;
+exports.FlatButton = FlatButton;
+exports.FloatingActionButton = FloatingActionButton;
+exports.HelperText = HelperText;
+exports.Icon = Icon;
+exports.InputCheckbox = InputCheckbox;
+exports.Label = Label;
+exports.LargeButton = LargeButton;
+exports.ListItem = ListItem;
+exports.Mandatory = Mandatory;
+exports.MaterialBox = MaterialBox;
+exports.ModalPanel = ModalPanel;
+exports.NumberInput = NumberInput;
+exports.Options = Options;
+exports.Pagination = Pagination;
+exports.Parallax = Parallax;
+exports.PasswordInput = PasswordInput;
+exports.RadioButton = RadioButton;
+exports.RadioButtons = RadioButtons;
+exports.RangeInput = RangeInput;
+exports.RoundIconButton = RoundIconButton;
+exports.SearchSelect = SearchSelect;
+exports.SecondaryContent = SecondaryContent;
+exports.Select = Select;
+exports.SmallButton = SmallButton;
+exports.SubmitButton = SubmitButton;
+exports.Switch = Switch;
+exports.Tabs = Tabs;
+exports.TextArea = TextArea;
+exports.TextInput = TextInput;
+exports.TimePicker = TimePicker;
+exports.UrlInput = UrlInput;
+exports.getDropdownStyles = getDropdownStyles;
+exports.isNumeric = isNumeric;
+exports.padLeft = padLeft;
+exports.range = range;
+exports.uniqueId = uniqueId;
+exports.uuid4 = uuid4;