material - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

dist/demo-bundle.js

@@ -1,2 +0,2 @@
-!function(){"use strict";function t(t,e){return!(!t||!e)&&!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}function e(e,i){if(e&&i){let o=i.split(" ");for(var n=0;n<o.length;n++){var s=o[n];t(e,s)||e.classList.add(s)}return e}}function i(t,e){if(t&&e)return t.classList.remove(e),t}function n(n,s){return t(n,s)?i(n,s):e(n,s),n}function s(t,e){if(F.add(t,e.prefix+"-"+e.class),e.name&&F.add(t,e.class+"-"+e.name),e.type&&(F.add(t,e.class+"-"+e.type),F.add(t,"type-"+e.type)),e.color&&F.add(t,e.color+"-color"),e.css&&F.add(t,e.css),e.name&&(t.dataset.name=e.name),e.label&&(t.title=e.label),e.style)for(var i=e.style.split(" "),n=0;n<i.length;n++)F.add(t,"style-"+i[n]);e.theme&&t.classList.add(e.theme+"-theme")}function o(t){var e=document.createElement(t.tag||"div");return s(e,t),e}function r(t,e){t=t||"div";var i=document.createElement(t);return F.add(i,e),i}function h(t,e){return t.appendChild(e),e}function a(t,e){return t.insertBefore(e,t.firstChild)}function l(t,e){return t.parentNode.insertBefore(e,t.nextSibling)}function c(t,e){return t.insertBefore(e,t)}function u(t,e){return t.parentNode.replaceChild(e,t)}function p(t){return t.parentNode.removeChild(t)}function d(t){var e=t;return e.parentNode?e.parentNode.removeChild(e):e}function f(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function m(t){return t.parentNode.removeChild(t)}function b(t,e,i){if(t&&e){t=t.root||t,e=e.root||e,i=i||"bottom";var n=["prepend","append","after","before"],s=["top","bottom","after","before"].indexOf(i);if(-1!==s)return R[n[s]](e,t),t}}function v(t){return"[object Array]"===Object.prototype.toString.call(t)}function g(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function y(t){return g(t)||v(t)||"object"==typeof t&&null!==t&&void 0!==t.length}function x(t,e){if(v(t)||"object"==typeof t&&void 0!==t.length)for(var i=0,n=t.length;i<n;i++)e.apply(t[i],[t[i],i]);else if(g(t))for(var s in t)e.apply(t[s],[t[s],s])}function k(t,e){if(v(e)){var i={};for(var n in list)i[list[n]]=this.get(t,list[n]);return i}var s;return s="function"==typeof window.getComputedStyle?window.getComputedStyle(t):void 0!==typeof document.currentStyle?t.currentStyle:t.style,e?s[e]:s}function w(t,e){if(y(t)&&g(e))return x(t,function(t){w(t,e)}),t;if(g(e)){for(var i in e)t.style[i]=e[i];return e}return!1}function O(t,e){var i=t.getBoundingClientRect(),n={top:Math.round(i.top),right:Math.round(i.right),bottom:Math.round(i.bottom),left:Math.round(i.left),width:i.width?Math.round(i.width):Math.round(t.offsetWidth),height:i.height?Math.round(i.height):Math.round(t.offsetHeight)};return n.width<=0&&(n.width=parseFloat(K.get(t,"width"))),n.height<=0&&(n.height=parseFloat(K.get(t,"height"))),e?n[e]:n}function C(t){t.on("built",t=>{j(t)})}function j(t){t.addEventListener("mousedown",t=>{z(t)})}function z(t){var e=t.target,i=O(e);let n=r("div","material-ripple"),s=L(i),o={left:(t.offsetX||i.width/2)+"px",top:(t.offsetY||i.height/2)+"px"};n.style.left=o.left,n.style.top=o.top,n.style.opacity=Y.opacity[1],n.style.transition=Y.transition,b(n,e,"top"),setTimeout(()=>{n.style.left=s.left;n.style.top=s.top;n.style.width=s.size;n.style.height=s.size;n.style.opacity=Y.opacity[1]},1),document.body.onmouseup=(()=>{A(n)})}function A(t){t.parentNode&&(t.style.opacity="0"),document.body.onmouseup=null,setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},1e3)}function L(t){var e=t.width,i=-t.height/2;return t.width>t.height?(e=t.width,i=-(t.width-t.height/2)):t.width<t.height&&(e=t.height,i=(t.width-t.height)/2),{size:2*e+"px",top:i+"px",left:e/-2+"px"}}function E(t,e){if(e){if("function"==typeof e)return e;if(!e.match(/\./))return t[e];for(var i,n=e.split("."),s=0,o=n.length;s<o;s++){var r=n[s];i=(i=i||t)[r]}return i}}function _(t,e){if(!e)return t;if(!e.match(/\./))return t[e];for(var i,n,s={},o=e.split("."),r=0,h=o.length;r<h;r++){var a=o[r];i=(i=i||t)[a],r===o.length-2&&(n=i)}return s.element=n,s.name=o[o.length-1],s}function M(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function T(t,e,i){e=e||null;var n=r("label",(i.class||i.prefix)+"-label");return n.textContent=e,n.setAttribute("for",i.name),b(n,t),n}function $(t,e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i]);return t}function S(t,e,i){return t.setAttribute(e,""+i)}function P(t,e){return t.getAttribute(e)||null}function N(t,e){return t.removeAttribute(e)}function H(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function V(t){const e=t.match(/^[\w-]+/),i=t.match(/#([\w-]+)/),n=t.match(/\.[\w-]+/g),s=t.match(/\$([\w-]+)/),o={tag:e?e[0]:"div"};return i&&(o.id=i[1]),s&&(o.name=s[1]),n&&(o.class=n.join(" ").replace(/\./g,"")),o}function X(t,e,i,n){let s;i=i||{};for(var o=0;o<t.length;o++)if("string"==typeof t[o]){var h=V(t[o]);b(s=r(h.tag,h.class),e),h.name&&(i[h.name]=s)}else H(t[o])?at.init(s,t[o]):Array.isArray(t[o])&&X(t[o],s,i,n);return i}function B(t){return D(t),dt.register(t),t}function D(t){for(var e=t.options.modules,i=0;i<e.length;i++)"function"==typeof e[i]?e[i](t):Object.assign(t,e[i])}var F={has:t,add:e,remove:i,toggle:n},R={append:h,prepend:a,after:l,before:c,replace:u,remove:p,destroy:m,empty:f,dispose:d};const I={ENTER:13,SPACE:32};var W={toggle(){if(!this.disabled)return this.focus(),this.checked?this.check(!1):this.check(!0),this},check(t){return t?(F.add(this.root,"is-checked"),this.element.input.checked=!0,this.checked=!0,this.emit("change",this.checked)):(F.remove(this.root,"is-checked"),this.element.input.checked=!1,this.checked=!1,this.emit("change",this.checked)),this},label(t){t&&(this.element=this.element||{},this.element.label||(this.element.label=r("label",this.options.class+"-label")),this.element.label.textContent=t,b(this.element.label,this.root))},icon(t){if(t){var e="top";"text-icon"===this.options.type&&(e="bottom"),this.element=this.element||{},this.element.icon=r("i",this.options.class+"-icon"),b(this.element.icon,this.root,e),this.element.icon.innerHTML=t}},error(t){if(t=t||this.options.error,null!==this.options.error){let t=this.options.error||this.options.text;this.element.error||(this.element.error=r("error",this.options.class+"-error")),t&&(this.element.error.textContent=t),b(this.element.error,this.root,"bottom")}},disable(){return this.disabled=!0,this.element.input.setAttribute("disabled","disabled"),F.add(this.root,"is-disabled"),this},enable(){return this.disabled=!1,this.element.input.removeAttribute("disabled"),F.remove(this.root,"is-disabled"),this},keydown(t){if(!t.altKey)switch(t.keyCode){case I.ENTER:case I.SPACE:t.preventDefault(),this.toggle(t)}},focus(){return!0===this.disabled?this:(F.add(this.root,"is-focused"),this.element.input!==document.activeElement&&this.element.input.focus(),this)},blur(){return F.remove(this.root,"is-focused"),this}},K={get:k,set:w};const Y={transition:".5s cubic-bezier(0.4, 0.0, 0.2, 1)",opacity:["1",".3"]};var Z={on(t,e){return this.event=this.event||{},this.event[t]=this.event[t]||[],this.event[t].push(e),this},off(t,e){if(this.event=this.event||{},t in this.event!=!1)return this.event[t].splice(this.event[t].indexOf(e),1),this},emit(t){if(this.event=this.event||{},t in this.event!=!1){for(var e=0;e<this.event[t].length;e++)this.event[t][e].apply(this,Array.prototype.slice.call(arguments,1));return this}}},q={e:_,f:E},G={attach:function(t){if(t=t||this.options.events){var e=this;return t.map(t=>{var i=q.e(e,t[0]);var n=q.f(e,t[1]);i.element.addEventListener(i.name,n.bind(this))}),this}}};const J={prefix:"material",class:"button",tag:"button",events:[["root.click","_clickHandler"]]};class Q{constructor(t){return this.init(t),this.build(),this.setup(),this.attach(),this.emit("ready"),this}init(t){this.options=Object.assign({},J,t||{}),Object.assign(this,W,Z,G,C),this.element=this.element||{},C(this),this.emit("init")}build(){return this.element={},this.root=o(this.options),this.options.label=this.options.label||this.options.text,this.root.setAttribute("aria-label",this.options.label||this.options.name),this.label(this.options.label),this.icon(this.options.icon),this.options.container&&b(this.root,this.options.container),this.emit("built",this.root),this}insert(t,e){return b(this.root,t,e),this}setup(){this.element.input=this.root,this.options.name&&(this.root.dataset.name=this.options.name),this.options.content&&(this.root.innerHTML=this.options.content)}set(t,e){switch(t){case"disabled":this.disable(e);break;case"value":this.setValue(e);break;case"label":this.setLabel(e);break;default:this.setValue(t)}return this}_clickHandler(t){if(t.preventDefault(),!0!==this.disabled&&!this.options.upload)return this.emit("click",t),this}}var U={insert(t,e){var i=this.root;return this.insertElement(i,t,e),this},insertElement(t,e,i){e&&e.root&&(e=e.root),this.container=e,i=i||"bottom";var n=["prepend","append","after","before"],s=["top","bottom","after","before"].indexOf(i);if(-1!==s)return R[n[s]](e,t),t}};class tt{constructor(t,e){return this.component=this.create(t,e),this}create(t,e,i,n){n=n||0,n++,i=i||{};let s;for(var o=0;o<t.length;o++){var r,h={};t[o]instanceof Object&&"function"==typeof t[o]?(M(t[o+2])&&(h=t[o+2]),"string"==typeof t[o+1]&&(r=t[o+1],h.name=r),s=new t[o](h),r&&(i[r]=s),s&&(this.display(s.root,h),this.style(s,h)),s&&e&&(s.insert?s.insert(e):b(s,e))):Array.isArray(t[o])&&this.create(t[o],s,i,n)}return i}display(t,e){var i=e.display,n=e.direction||"horizontal";t&&i&&("horizontal"===n?t.className+=" flex-row":"vertical"===n&&(t.className+=" flex-column"))}style(t){var e=t.options||{};if(e.flex)F.add(t.root,"flex-"+e.flex);else{var i=e.size;e.size&&e.width?t.root.width=i+"px":e.size&&e.height&&(t.root.height=i+"px")}e.hide&&(t.root.display="none"),e.theme&&F.add(t.root,"theme-"+e.theme)}get(t){return t?this.component[t]:this.component}}let et={prefix:"material",class:"card",tag:"div"};class it{constructor(t){this.init(t),this.build()}init(t){this.options=Object.assign({},et,t||{}),Object.assign(this,U)}build(){this.root=o(this.options),this.options.layout&&(this.layout=new tt(this.options.layout,this.root))}}var nt={addEvent(t,e){function i(t){var i=e.apply(this,arguments);return!1===i&&(t.stopPropagation(),t.preventDefault()),i}function n(){var t=e.call(s,window.event);return!1===t&&(window.event.returnValue=!1,window.event.cancelBubble=!0),t}var s=this.root;return s.addEventListener?s.addEventListener(t,i,!1):s.attachEvent("on"+t,n),this},removeEvent(t,e){var i=this.root;return i.removeEventListener?i.removeEventListener(t,e,!1):i.detachEvent?(i.detachEvent("on"+t,i[e.toString()+t]),i[e.toString()+t]=null):i["on"+t]=function(){},this}};const st={prefix:"material",class:"component",tag:"span"};class ot{constructor(t){return this.init(t),this.build(),this}init(t){return this.options=Object.assign({},st,t||{}),Object.assign(this,Z,nt,U),this}build(){return this.root=o(this.options),this.options.container&&this.insert(this.options.container),this}}const rt={prefix:"material",class:"container",tag:"div"};class ht{constructor(t){return this.init(t),this.build(),this}init(t){return this.options=Object.assign({},rt,t||{}),Object.assign(this,Z),this}build(){return this.root=o(this.options),this.options.container&&b(this.root,this.options.container),this}insert(t,e){return b(this.root,t,e),this}}var at={init:$,set:S,get:P,remove:N};`\n<svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">\n  <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>\n</svg>`;let lt={prefix:"material",class:"checkbox",type:"control",build:["$root.material-checkbox",{},["input$input",{}],["span$control.checkbox-control"]],events:[["element.control.click","click",{}],["element.label.click","toggle",{}],["element.input.focus","focus"],["element.input.blur","blur"],["element.input.keydown","keydown",{}]]};class ct{constructor(t){return this.init(t),this.build(),this.attach(),this}init(t){return this.options=Object.assign({},lt,t||{}),Object.assign(this,nt,W,Z,G),this}build(){this.element=X(this.options.build),this.root=this.element.root,this.element.control.innerHTML='\n<svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">\n  <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>\n</svg>';var t=this.options.text||this.options.label;return this.element.label=T(this.root,t,this.options),this.element.input.setAttribute("type","checkbox"),this.element.input.setAttribute("name",this.options.name),this.element.input.setAttribute("aria-label",this.options.name),this.options.value&&this.element.label.setAttribute("value",this.options.value),this.options.disabled&&(this.disabled=this.options.disabled,this.element.input.setAttribute("disabled","disabled"),F.add(this.root,"is-disabled")),this.options.checked&&this.check(!0),this.options.value&&this.set("value",this.value),this.options.container&&b(this.root,this.options.container),this}set(t,e){switch(t){case"checked":this.check(e);break;case"value":this.setValue(e);break;case"label":this.setLabel(e);break;default:this.check(t)}return this}insert(t,e){return b(this.root,t,e),this}click(t){return this.toggle(t),this.element.input.focus(),this}setValue(t){return console.log("setValue",t),this.value=t,this.element.input.setAttribute("value",t),this}}let ut=null;class pt{constructor(){return ut||(ut=this),this.components=this.components||[],this.component=this.component||{},this.init(),ut}init(){this.subscribe("settings",t=>{})}register(t){return this.components.push(t),this.component[t.name]=this.component[t.name]||[],this.component[t.name].push(t),this}subscribe(t,e){return this._topics=this._topics||{},this._topics.hasOwnProperty(t)||(this._topics[t]=[]),this._topics[t].push(e),!0}unsunscribe(t,e){if(this._topics=this._topics||{},!this._topics.hasOwnProperty(t))return!1;for(var i=0,n=this._topics[t].length;i<n;i++)if(this._topics[t][i]===e)return this._topics[t].splice(i,1),!0;return!1}publish(){this._topics=this._topics||{};var t=Array.prototype.slice.call(arguments),e=t.shift();if(!this._topics.hasOwnProperty(e))return!1;for(var i=0,n=this._topics[e].length;i<n;i++)this._topics[e][i].apply(void 0,t);return!0}}var dt=new pt,ft={prefix:"material",class:"divider",tag:"span"};class mt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},ft,t||{}),Object.assign(this,U)}build(){this.root=o(this.options),this.options.text&&(this.root.textContent=this.options.text),this.options.container&&this.insert(this.options.container)}}const bt={prefix:"material",class:"drawer",modifier:"width",state:"closed",position:"left",tag:"div",modules:[Z,nt]};class vt{constructor(t){return this.options=Object.assign({},bt,t||{}),B(this),this.build(),this.emit("ready"),this}build(){return this.root=r("aside"),s(this.root,this.options),this.options.position&&F.add(this.root,"position-"+this.options.position),this.options.size&&("top"===this.options.position||"bottom"===this.options.position?this.root.style="height: "+this.options.size+"px;":this.root.style="width: "+this.options.size+"px;"),this.options.container&&b(this.root,this.options.container),this.options.state||(this.state="opened"),this.emit("built",this.root),this}toggle(){return"opened"===this.state?this.close():this.open(),this}close(){return F.remove(this.root,"show"),F.remove(this.underlay,"show"),this.state="closed",this.emit(this.state),this}open(){return this.emit("open"),this.underlay||(this.underlay=r("div","drawer-underlay")),b(this.underlay,this.root.parentNode,"top"),this.underlay.addEventListener("click",t=>{this.close()}),setTimeout(()=>{F.add(this.underlay,"show")},10),F.add(this.root,"show"),this.state="opened",this.emit(this.state),this}insert(t,e){return b(this.root,t,e),this}}var gt={prefix:"material",class:"item",type:"default",types:{default:"span",display4:"h1",display3:"h1",display2:"h1",display1:"h1",headline:"h1",title:"h2",subheading2:"h3",subheading1:"h4",body:"p",body2:"aside",caption:"span"}};class yt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},gt,t||{}),Object.assign(this,U)}build(){this.options.tag=this.options.types[this.options.type],this.root=o(this.options),this.options.text&&this.set(this.options.text),this.options.container&&this.insert(this.options.container)}set(t){return t?(this.root.innerText?this.root.innerText=t:this.root.textContent=t,this):this}}const xt={prefix:"material",class:"list",functions:["render","select"],target:".material-item",events:[["root.click","handleSelect"]]};class kt{constructor(t){return this.options=Object.assign({},xt,t||{}),this.init(this.options),this.build(this.options),this.attach(this.options.events),this}init(){return this.filters=[],this.data=[],this.items=[],Object.assign(this,Z,G),this._initFunction(this.options.functions),this}_initFunction(t){for(var e=0;e<t.length;e++){var i=t[e];this.options[i]&&(this[i]=this.options[i])}}build(t){var e=this.options.tag||"div";return this.root=document.createElement(e),F.add(this.root,"material-"+this.options.class),t.name&&F.add(this.root,t.class+"-"+t.name),this.options.list&&this.set("list",this.options.list),this.options.container&&b(this.root,this.options.container),this}handleSelect(t){t.target&&t.target.matches(this.options.target)&&(F.remove(this.item,"is-selected"),F.add(t.target,"is-selected"),this.select(t.target,t,this.item),this.item=t.target)}select(t,e,i){this.emit("select",t)}render(t){return"divider"===t.type?new mt:new yt({name:t.name,text:t.name})}set(t,e,i){switch(t){case"list":this.setList(e,i);break;default:this.setList(t,i)}return this}setList(t){for(var e=0;e<t.length;e++)this.addItem(this.render(t[e]),e);return this}addItem(t){if(t){return b(t.root,this.root,"bottom"),this.items.push(t),t}}insert(t,e){b(this.root,t,e)}empty(){this.root.innerHTML="",this.items=[],this.item=null}reverse(){return this.list.reverse(),this.update(this.list),this}}var wt={prefix:"material",class:"progress",tag:"div",progress:"0%",circular:`<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n      <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n    </svg>`};class Ot{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},wt,t||{}),Object.assign(this,b)}build(t){return this.root=r(this.options.tag),s(this.root,this.options),"circular"===this.options.type&&(this.root.innerHTML=this.options.circular),"indeterminate"===this.options.type?(this.bar=r("div","bar"),b(this.bar,this.root)):(this.bar=r("div","bar"),b(this.bar,this.root),this.set(this.options.progress)),this.options.container&&b(this.root,this.options.container),this}set(t){this.bar.setAttribute("style","width: "+t)}}`\n<svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">\n  <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z" id="pin"></path>\n</svg>`;let Ct={prefix:"material",class:"slider",type:"control",label:null,checked:!1,error:!1,value:!1,range:[0,100],step:5,modules:[nt,W,Z,G],mixins:[],build:["$root.material-slider",{},["label$label.slider-label",{}],["input$input"],["$control.slider-control",{},["$track.slider-track",{},["canvas$canvas.slider-canvas",{}],["$trackvalue.slider-track-value",{}],["$knob.slider-knob",{}],["$marker.slider-marker",{},["$value.slider-value",{}]]]]],events:[["element.input.focus","focus"],["element.input.blur","blur"]]};class jt{constructor(t){return this.options=Object.assign({},Ct,t||{}),this.init(this.options),this.build(this.options),this.attach(),this}init(t){return B(this),this}build(){this.element=X(this.options.build),this.root=this.element.root,s(this.root,this.options),this.options.container&&b(this.root,this.options.container);var t=this.element.marker.innerHTML;this.element.marker.innerHTML='\n<svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">\n  <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z" id="pin"></path>\n</svg>'+t,this.options.type&&F.add(this.root,"type-"+this.options.type),this.options.disabled&&this.disable(!0);let e=this.options.label||this.options.text;this.element.label.textContent=e,this.options.label=this.options.label||this.options.text,this.initTrack();setTimeout(()=>{this.initCanvas()},50)}initCanvas(){window.addEventListener("resize",()=>{console.log("resize");this.drawCanvas()},!1),this.drawCanvas()}drawCanvas(){var t=O(this.element.track,"width"),e=O(this.element.track,"height");this.element.canvas.width=t,this.element.canvas.height=e;var i=this.element.canvas.getContext("2d");i.lineWidth=2,i.beginPath(),i.moveTo(0,e/2+1),i.lineTo(t,e/2+1),i.strokeStyle="rgba(34, 31, 31, .26)",i.stroke()}initTrack(){this.element.track.addEventListener("mousedown",t=>{if(!0===this.disabled)return;this.initTrackSize();var e=t.layerX;this.update(e)}),this.element.knob.addEventListener("click",t=>{t.stopPropagation()}),this.initDragging();setTimeout(()=>{this.setValue(this.options.value)},100)}initTrackSize(){return this._tracksize=O(this.element.track,"width"),this._knobsize=O(this.element.knob,"width"),this._markersize=32,this._trackleft=O(this.element.track,"left"),this}initDragging(){this.element.knob.onmousedown=(t=>{if(!0===this.disabled)return;t.stopPropagation();t=t||window.event;F.add(this.element.control,"dragging");var e=0;var i=0;t.pageX?e=t.pageX:t.clientX&&(e=t.clientX);e=this._trackleft;document.body.onmousemove=(t=>{if(!0===this.disabled)return;console.log("mousedown",this.disabled);t=t||window.event;var n=0;t.pageX?n=t.pageX:t.clientX&&(n=t.clientX);i=n-e;this.update(i)});document.body.onmouseup=(t=>{document.body.onmousemove=document.body.onmouseup=null;t=t||window.event;var n=0;t.pageX?n=t.pageX:t.clientX&&(n=t.clientX);i=n-e;this.update(i);F.remove(this.element.control,"dragging")})})}update(t){var e=this._tracksize,i=this.options.range[1]-this.options.range[0];t>e&&(t=e),t<0&&(t=0);var n=e/t,s=Math.round(i/n)+this.options.range[0];0===t&&F.remove(this.element.knob,"notnull"),this.element.knob.style.left=t-this._knobsize/2+"px",this.element.trackvalue.style.width=t+"px",this.element.marker.style.left=t-this._markersize/2+"px",this.element.value.textContent=s,this.element.input.value=s,s>this.options.range[0]?F.add(this.element.knob,"notnull"):F.remove(this.element.knob,"notnull")}updateValue(t){this.initTrackSize();var e=O(this.element.track,"width");e=parseInt(e);var i=100*t/(this.options.range[1]-this.options.range[0]),n=Math.round(e*i/100);return this.update(n),this}insert(t,e){b(this.root,t,e)}set(t,e){switch(t){case"value":this.setValue(e);break;case"label":this.setLabel(e);break;default:this.setValue(t)}return this}get(t){var e;switch(t){case"value":e=this.getValue();break;case"name":e=this.name;break;default:return this.getValue()}return e}getValue(){return this.element.input.value}setValue(t){t=t||this.options.range[0],this.element.input.value=t,this.updateValue(t)}setLabel(t){null!==(t=t||this.options.label||this.options.text)&&this.label&&(this.label.textContent=t)}}let zt={prefix:"material",class:"switch",type:"control",label:null,checked:!1,error:!1,value:!1,disabled:!1,build:["$root.material-switch",{},["input$input$switch-input",{type:"checkbox"}],["span$control.switch-control",{},["span$track.switch-track",{},["span$knob.switch-knob",{}]]],["label$label.switch-label"]],events:[["element.control.click","toggle"],["element.label.click","toggle"],["element.input.click","toggle"],["element.input.focus","focus"],["element.input.blur","blur"]]};class At{constructor(t){return this.init(t),this.build(),this.attach(),this}init(t){return this.options=Object.assign({},zt,t||{}),Object.assign(this,Z,W,G,U),this.value=this.options.value,this}build(){this.element=X(this.options.build),this.root=this.element.root,s(this.root,this.options),this.options.disabled&&this.disable(),this.value&&this.element.input.setAttribute("checked","checked"),this.element.input.setAttribute("aria-label",this.options.name);let t=this.options.label||this.options.text||"";this.element.label.textContent=t,this.element.label.setAttribute("for",this.options.name),this.value&&this.check(),this.options.container&&this.insert(this.options.container)}set(t,e){switch(t){case"value":this.setValue(e);break;case"disabled":!0===e?this.disable():!1===e&&this.enable();break;default:this.setValue(t)}return this}get(){return this.value}getValue(){return this.value}setValue(t){t?this.check():this.unCheck()}}var Lt={prefix:"material",class:"text",type:"default",types:{default:"span",display4:"h1",display3:"h1",display2:"h1",display1:"h1",headline:"h1",title:"h2",subheading2:"h3",subheading1:"h4",body:"p",body2:"aside",caption:"span"}};class Et{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},Lt,t||{}),Object.assign(this,U)}build(){return this.options.tag=this.options.types[this.options.type],this.root=o(this.options),this.options.text&&this.set(this.options.text),this.options.container&&this.insert(this.options.container),this}set(t){return t?(this.root.innerText?this.root.innerText=t:this.root.textContent=t,this):this}}const _t={prefix:"material",class:"toolbar",tag:"div"};class Mt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},_t,t||{}),Object.assign(this,U)}build(){return this.root=o(this.options),this.options.container&&this.insert(this.options.container),this}}`\n<svg height="24" viewBox="0 0 24 24" width="24">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n</svg>`,`\n<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />\n</svg>`;var Tt=`\n<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>\n `,$t=`\n<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-10.06L14.06 11l1.06-1.06L16.18 11l1.06-1.06-2.12-2.12zm-4.12 0L9.94 11 11 9.94 8.88 7.82 6.76 9.94 7.82 11zM12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>\n `;console.log("demo"),console.log("log"),document.addEventListener("DOMContentLoaded",function(){var t=new tt([ot,"demo",{display:"flex",direction:"vertical"},[ot,"head",{display:"flex",direction:"horizontal"},[Mt,"toolbar",{flex:1,display:"flex",direction:"horizontal"},[Q,"menu-navi",{icon:'\n<svg height="24" viewBox="0 0 24 24" width="24">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n</svg>',type:"action"}],[Et,"app-title",{text:"Material"}]],[Mt,"desk",{display:"flex",direction:"horizontal"},[Q,"menu-more",{icon:'\n<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />\n</svg>',type:"action"}]]],[vt,"navi",{css:"drawer-temporary",type:"temporary",size:"280px"},[ot,"navi-head",{theme:"dark"},[Et,"app-title",{text:"Components"}]],[kt,"navi-list",{theme:"dark"}]],[ht,"body",{flex:"1"},[ht,"container-components",{},[Et,"text",{text:"Components",type:"title"}]],[it,"buttons",{},[Mt,"toolbar-buttons",{},[Et,"buttons-title",{text:"Buttons"}]],[ht,"button-body",{},[Q,"first",{text:"Flat"}],[Q,"second",{text:"Raised",type:"raised",color:"primary"}],[Q,"third",{icon:Tt,type:"action"}],[Q,"fourth",{icon:Tt,text:"text"}]]],[it,"buttons",{},[Mt,"toolbar-buttons",{},[Et,"buttons-title",{text:"Floating Buttons"}]],[ht,"button-body",{},[Q,"fifth",{icon:Tt,type:"floating",color:"primary"}],[Q,"six",{icon:$t,type:"floating",style:"mini",color:"primary"}],[Q,"fifth",{icon:Tt,type:"floating",color:"secondary"}],[Q,"six",{icon:$t,type:"floating",style:"mini",color:"secondary"}]]],[it,"checkboxes",{},[Mt,"toolbar",{},[Et,"checkbox-title",{text:"Checkboxes"}]],[ht,"checkbox-body",{},[ct,"checkbox",{text:"Checkbox"}],[ct,"checkbox-checked",{text:"Checked",checked:!0}],[ct,"checkbox-disabled",{text:"Disabled",disabled:!0}]]],[it,"switches",{},[Mt,"switch-toolbar",{},[Et,"switch-title",{text:"Switches"}]],[ht,"switch-body",{},[At,"switch",{text:"Switch"}],[At,"switch-checked",{text:"Checked",checked:!0}],[At,"switch-disabled",{text:"Disabled",disabled:!0}]]],[it,"progress indicators",{},[Mt,"progress-toolbar",{},[Et,"progress-title",{text:"Progress indicators"}]],[ht,"progress-body",{},[Ot,"progress",{progress:"60%"}],[Ot,"progress-indeterminate",{type:"indeterminate"}]]],[it,"sliders",{},[Mt,"slider-toolbar",{},[Et,"slider-title",{text:"Sliders"}]],[ht,"slider-body",{},[jt,"slider",{text:"Slider"}],[jt,"slider-checked",{text:"Checked",checked:!0}],[jt,"slider-disabled",{text:"Disabled",disabled:!0}]]]]],document.body);t.get("menu-more").on("click",e=>{t.get("more-menu").show(e)});t.get("menu-navi").on("click",e=>{t.get("navi").open()})})}();
+!function(){"use strict";function t(t,i){return!(!t||!i)&&!!t.className.match(new RegExp("(\\s|^)"+i+"(\\s|$)"))}function i(i,e){if(i&&e){let o=e.split(" ");for(var s=0;s<o.length;s++){var n=o[s];t(i,n)||i.classList.add(n)}return i}}function e(t,i){if(t&&i)return t.classList.remove(i),t}function s(s,n){return t(s,n)?e(s,n):i(s,n),s}function n(t,i){if(F.add(t,i.prefix+"-"+i.class),i.name&&F.add(t,i.class+"-"+i.name),i.type&&F.add(t,"type-"+i.type),i.color&&F.add(t,i.color+"-color"),i.css&&F.add(t,i.css),i.elevation&&F.add(t,"elevation-z"+i.elevation),i.name&&(t.dataset.name=i.name),i.label&&(t.title=i.label),i.style)for(var e=i.style.split(" "),s=0;s<e.length;s++)F.add(t,"style-"+e[s]);i.theme&&t.classList.add(i.theme+"-theme")}function o(t){var i=document.createElement(t.tag||"div");return n(i,t),i}function r(t,i){t=t||"div";var e=document.createElement(t);return F.add(e,i),e}function h(t,i){return t.appendChild(i),i}function a(t,i){return t.insertBefore(i,t.firstChild)}function l(t,i){return t.parentNode.insertBefore(i,t.nextSibling)}function c(t,i){return t.insertBefore(i,t)}function u(t,i){return t.parentNode.replaceChild(i,t)}function p(t){return t.parentNode.removeChild(t)}function d(t){var i=t;return i.parentNode?i.parentNode.removeChild(i):i}function f(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function m(t){return t.parentNode.removeChild(t)}function b(t,i,e){if(t&&i){t=t.root||t,i=i.root||i,e=e||"bottom";var s=["prepend","append","after","before"],n=["top","bottom","after","before"].indexOf(e);if(-1!==n)return R[s[n]](i,t),t}}function v(t){return"[object Array]"===Object.prototype.toString.call(t)}function g(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function y(t){return g(t)||v(t)||"object"==typeof t&&null!==t&&void 0!==t.length}function x(t,i){if(v(t)||"object"==typeof t&&void 0!==t.length)for(var e=0,s=t.length;e<s;e++)i.apply(t[e],[t[e],e]);else if(g(t))for(var n in t)i.apply(t[n],[t[n],n])}function k(t,i){if(v(i)){var e={};for(var s in list)e[list[s]]=this.get(t,list[s]);return e}var n;return n="function"==typeof window.getComputedStyle?window.getComputedStyle(t):void 0!==typeof document.currentStyle?t.currentStyle:t.style,i?n[i]:n}function w(t,i){if(y(t)&&g(i))return x(t,function(t){w(t,i)}),t;if(g(i)){for(var e in i)t.style[e]=i[e];return i}return!1}function O(t,i){var e=t.getBoundingClientRect(),s={top:Math.round(e.top),right:Math.round(e.right),bottom:Math.round(e.bottom),left:Math.round(e.left),width:e.width?Math.round(e.width):Math.round(t.offsetWidth),height:e.height?Math.round(e.height):Math.round(t.offsetHeight)};return s.width<=0&&(s.width=parseFloat(Y.get(t,"width"))),s.height<=0&&(s.height=parseFloat(Y.get(t,"height"))),i?s[i]:s}function j(t){t.on("built",t=>{C(t)})}function C(t){t.addEventListener("mousedown",t=>{L(t)})}function L(t){var i=t.target,e=O(i);let s=r("div","material-ripple"),n=A(e),o={left:(t.offsetX||e.width/2)+"px",top:(t.offsetY||e.height/2)+"px"};s.style.left=o.left,s.style.top=o.top,s.style.transition=K.transition,b(s,i,"top"),setTimeout(()=>{s.style.left=n.left;s.style.top=n.top;s.style.width=n.size;s.style.height=n.size},1),document.body.onmouseup=(()=>{z(s)})}function z(t){t.parentNode&&(t.style.opacity="0"),document.body.onmouseup=null,setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},1e3)}function A(t){var i=t.width,e=-t.height/2;return t.width>t.height&&(e=-(t.width-t.height/2)),{size:2*i+"px",top:e+"px",left:i/-2+"px"}}function E(t,i){if(i){if("function"==typeof i)return i;if(!i.match(/\./))return t[i];for(var e,s=i.split("."),n=0,o=s.length;n<o;n++){var r=s[n];e=(e=e||t)[r]}return e}}function T(t,i){if(!i)return t;if(!i.match(/\./))return t[i];for(var e,s,n={},o=i.split("."),r=0,h=o.length;r<h;r++){var a=o[r];e=(e=e||t)[a],r===o.length-2&&(s=e)}return n.element=s,n.name=o[o.length-1],n}function M(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function _(t,i,e){i=i||null;var s=r("label",(e.class||e.prefix)+"-label");return s.textContent=i,s.setAttribute("for",e.name),b(s,t),s}function $(t,i){for(var e in i)i.hasOwnProperty(e)&&t.setAttribute(e,i[e]);return t}function S(t,i,e){return t.setAttribute(i,""+e)}function N(t,i){return t.getAttribute(i)||null}function V(t,i){return t.removeAttribute(i)}function P(t){return t&&"object"==typeof t&&Object.getPrototypeOf(t)===Object.getPrototypeOf({})}function H(t){const i=t.match(/^[\w-]+/),e=t.match(/#([\w-]+)/),s=t.match(/\.[\w-]+/g),n=t.match(/\$([\w-]+)/),o={tag:i?i[0]:"div"};return e&&(o.id=e[1]),n&&(o.name=n[1]),s&&(o.class=s.join(" ").replace(/\./g,"")),o}function X(t,i,e,s){let n;e=e||{};for(var o=0;o<t.length;o++)if("string"==typeof t[o]){var h=H(t[o]);b(n=r(h.tag,h.class),i),h.name&&(e[h.name]=n)}else P(t[o])?ct.init(n,t[o]):Array.isArray(t[o])&&X(t[o],n,e,s);return e}function B(t){return D(t),mt.register(t),t}function D(t){for(var i=t.options.modules,e=0;e<i.length;e++)"function"==typeof i[e]?i[e](t):Object.assign(t,i[e])}var F={has:t,add:i,remove:e,toggle:s},R={append:h,prepend:a,after:l,before:c,replace:u,remove:p,destroy:m,empty:f,dispose:d};const I={ENTER:13,SPACE:32};var W={toggle(){if(!this.disabled)return this.focus(),this.checked?this.check(!1):this.check(!0),this},check(t){return t?(F.add(this.root,"is-checked"),this.element.input.checked=!0,this.checked=!0,this.emit("change",this.checked)):(F.remove(this.root,"is-checked"),this.element.input.checked=!1,this.checked=!1,this.emit("change",this.checked)),this},label(t){t&&(this.element=this.element||{},this.element.label||(this.element.label=r("label",this.options.class+"-label")),this.element.label.textContent=t,b(this.element.label,this.root))},icon(t){if(t){var i="top";"text-icon"===this.options.type&&(i="bottom"),this.element=this.element||{},this.element.icon=r("i",this.options.class+"-icon"),b(this.element.icon,this.root,i),this.element.icon.innerHTML=t}},error(t){if(t=t||this.options.error,null!==this.options.error){let t=this.options.error||this.options.text;this.element.error||(this.element.error=r("error",this.options.class+"-error")),t&&(this.element.error.textContent=t),b(this.element.error,this.root,"bottom")}},disable(){return this.disabled=!0,this.element.input.setAttribute("disabled","disabled"),F.add(this.root,"is-disabled"),this},enable(){return this.disabled=!1,this.element.input.removeAttribute("disabled"),F.remove(this.root,"is-disabled"),this},keydown(t){if(!t.altKey)switch(t.keyCode){case I.ENTER:case I.SPACE:t.preventDefault(),this.toggle(t)}},get(t){switch(t){case"name":this.getName();break;default:this.setValue(t)}return this},getName(){return this.root.dataset.name},focus(){return!0===this.disabled?this:(F.add(this.root,"is-focused"),this.element.input!==document.activeElement&&this.element.input.focus(),this)},blur(){return F.remove(this.root,"is-focused"),this}},Y={get:k,set:w};const K={transition:".5s cubic-bezier(0.4, 0.0, 0.2, 1)",opacity:["1",".3"]};var Z={on(t,i){return this.event=this.event||{},this.event[t]=this.event[t]||[],this.event[t].push(i),this},off(t,i){if(this.event=this.event||{},t in this.event!=!1)return this.event[t].splice(this.event[t].indexOf(i),1),this},emit(t){if(this.event=this.event||{},t in this.event!=!1){for(var i=0;i<this.event[t].length;i++)this.event[t][i].apply(this,Array.prototype.slice.call(arguments,1));return this}}},q={e:T,f:E},G={attach:function(t){if(t=t||this.options.events){var i=this;return t.map(t=>{var e=q.e(i,t[0]);var s=q.f(i,t[1]);e.element.addEventListener(e.name,s.bind(this))}),this}}};const J={prefix:"material",class:"button",tag:"button",events:[["root.click","handleClick"]]};class Q{constructor(t){return this.init(t),this.build(),this.setup(),this.attach(),this.emit("ready"),this}init(t){this.options=Object.assign({},J,t||{}),Object.assign(this,W,Z,G,j),this.element=this.element||{},j(this),this.emit("init")}build(){return this.element={},this.root=o(this.options),this.options.label=this.options.label||this.options.text,this.root.setAttribute("aria-label",this.options.label||this.options.name),this.label(this.options.label),this.icon(this.options.icon),this.options.container&&b(this.root,this.options.container),this.emit("built",this.root),this}insert(t,i){return b(this.root,t,i),this}setup(){this.element.input=this.root,this.options.name&&(this.root.dataset.name=this.options.name),this.options.content&&(this.root.innerHTML=this.options.content)}set(t,i){switch(t){case"disabled":this.disable(i);break;case"value":this.setValue(i);break;case"label":this.setLabel(i);break;default:this.setValue(t)}return this}handleClick(t){if(t.preventDefault(),!0!==this.disabled&&!this.options.upload)return this.emit("click",t),this}}const U={prefix:"material",class:"button",tag:"button",events:[["root.click","handleClick"]]};class tt{constructor(t){return this.init(t),this.build(),this.setup(),this.attach(),this.emit("ready"),this}init(t){this.options=Object.assign({},U,t||{}),Object.assign(this,W,Z,G,j),this.element=this.element||{},j(this),this.emit("init")}build(){return this.element={},this.root=o(this.options),this.options.label=this.options.label||this.options.text,this.root.setAttribute("aria-label",this.options.label||this.options.name),this.label(this.options.label),this.icon(this.options.icon),this.options.container&&b(this.root,this.options.container),this.emit("built",this.root),this}insert(t,i){return b(this.root,t,i),this}setup(){this.element.input=this.root,this.options.name&&(this.root.dataset.name=this.options.name),this.options.content&&(this.root.innerHTML=this.options.content)}set(t,i){switch(t){case"disabled":this.disable(i);break;case"value":this.setValue(i);break;case"label":this.setLabel(i);break;default:this.setValue(t)}return this}handleClick(t){if(t.preventDefault(),!0!==this.disabled&&!this.options.upload)return this.emit("click",t),this}}var it={insert(t,i){var e=this.root;return this.insertElement(e,t,i),this},insertElement(t,i,e){i&&i.root&&(i=i.root),this.container=i,e=e||"bottom";var s=["prepend","append","after","before"],n=["top","bottom","after","before"].indexOf(e);if(-1!==n)return R[s[n]](i,t),t}};class et{constructor(t,i){return this.component=this.create(t,i),this}create(t,i,e,s){s=s||0,s++,e=e||{};let n=null;for(var o=0;o<t.length;o++){var r,h={};t[o]instanceof Object&&"function"==typeof t[o]?(M(t[o+2])&&(h=t[o+2]),"string"==typeof t[o+1]&&(r=t[o+1],h.name=r),n=new t[o](h),r&&(e[r]=n),n&&(this.display(n.root,h),this.style(n,h)),1===s&&(e.root=n.root),n&&i&&(n.insert?n.insert(i):b(n,i))):Array.isArray(t[o])&&(null==n&&(n=i),this.create(t[o],n,e,s))}return e}display(t,i){var e=i.display,s=i.direction||"horizontal";t&&e&&("horizontal"===s?t.className+=" flex-row":"vertical"===s&&(t.className+=" flex-column"))}style(t){var i=t.options||{};if(i.flex)F.add(t.root,"flex-"+i.flex);else{var e=i.size;i.size&&i.width?t.root.width=e+"px":i.size&&i.height&&(t.root.height=e+"px")}i.position&&(t.root.position=i.position),i.bottom&&(t.root.bottom=i.bottom),i.hide&&(t.root.display="none"),i.theme&&F.add(t.root,"theme-"+i.theme)}get(t){return t?this.component[t]:this.component}}let st={prefix:"material",class:"card",tag:"div"};class nt{constructor(t){this.init(t),this.build()}init(t){this.options=Object.assign({},st,t||{}),Object.assign(this,it)}build(){this.root=o(this.options),this.options.layout&&(this.layout=new et(this.options.layout,this.root))}}var ot={addEvent(t,i){function e(t){var e=i.apply(this,arguments);return!1===e&&(t.stopPropagation(),t.preventDefault()),e}function s(){var t=i.call(n,window.event);return!1===t&&(window.event.returnValue=!1,window.event.cancelBubble=!0),t}var n=this.root;return n.addEventListener?n.addEventListener(t,e,!1):n.attachEvent("on"+t,s),this},removeEvent(t,i){var e=this.root;return e.removeEventListener?e.removeEventListener(t,i,!1):e.detachEvent?(e.detachEvent("on"+t,e[i.toString()+t]),e[i.toString()+t]=null):e["on"+t]=function(){},this}};const rt={prefix:"material",class:"component",tag:"span"};class ht{constructor(t){return this.init(t),this.build(),this}init(t){return this.options=Object.assign({},rt,t||{}),Object.assign(this,Z,ot,it),this}build(){return this.root=o(this.options),this.options.container&&this.insert(this.options.container),this}}const at={prefix:"material",class:"container",tag:"div"};class lt{constructor(t){return this.init(t),this.build(),this}init(t){return this.options=Object.assign({},at,t||{}),Object.assign(this,Z),this}build(){return this.root=o(this.options),this.options.container&&b(this.root,this.options.container),this}insert(t,i){return b(this.root,t,i),this}}var ct={init:$,set:S,get:N,remove:V};`\n<svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">\n  <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>\n</svg>`;let ut={prefix:"material",class:"checkbox",type:"control",build:["$root.material-checkbox",{},["input$input",{}],["span$control.checkbox-control"]],events:[["element.control.click","click",{}],["element.label.click","toggle",{}],["element.input.focus","focus"],["element.input.blur","blur"],["element.input.keydown","keydown",{}]]};class pt{constructor(t){return this.init(t),this.build(),this.attach(),this}init(t){return this.options=Object.assign({},ut,t||{}),Object.assign(this,ot,W,Z,G),this}build(){this.element=X(this.options.build),this.root=this.element.root,this.element.control.innerHTML='\n<svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">\n  <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>\n</svg>';var t=this.options.text||this.options.label;return this.element.label=_(this.root,t,this.options),this.element.input.setAttribute("type","checkbox"),this.element.input.setAttribute("name",this.options.name),this.element.input.setAttribute("aria-label",this.options.name),this.options.value&&this.element.input.setAttribute("value",this.options.value),this.options.disabled&&(this.disabled=this.options.disabled,this.element.input.setAttribute("disabled","disabled"),F.add(this.root,"is-disabled")),this.options.checked&&this.check(!0),this.options.value&&this.set("value",this.value),this.options.container&&b(this.root,this.options.container),this}set(t,i){switch(t){case"checked":this.check(i);break;case"value":this.setValue(i);break;case"label":this.setLabel(i);break;default:this.check(t)}return this}insert(t,i){return b(this.root,t,i),this}click(t){return this.toggle(t),this.element.input.focus(),this}setValue(t){return console.log("setValue",t),this.value=t,this.element.input.setAttribute("value",t),this}}let dt=null;class ft{constructor(){return dt||(dt=this),this.components=this.components||[],this.component=this.component||{},this.init(),dt}init(){this.subscribe("settings",t=>{})}register(t){return this.components.push(t),this.component[t.name]=this.component[t.name]||[],this.component[t.name].push(t),this}subscribe(t,i){return this._topics=this._topics||{},this._topics.hasOwnProperty(t)||(this._topics[t]=[]),this._topics[t].push(i),!0}unsunscribe(t,i){if(this._topics=this._topics||{},!this._topics.hasOwnProperty(t))return!1;for(var e=0,s=this._topics[t].length;e<s;e++)if(this._topics[t][e]===i)return this._topics[t].splice(e,1),!0;return!1}publish(){this._topics=this._topics||{};var t=Array.prototype.slice.call(arguments),i=t.shift();if(!this._topics.hasOwnProperty(i))return!1;for(var e=0,s=this._topics[i].length;e<s;e++)this._topics[i][e].apply(void 0,t);return!0}}var mt=new ft,bt={prefix:"material",class:"divider",tag:"span"};class vt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},bt,t||{}),Object.assign(this,it)}build(){this.root=o(this.options),this.options.text&&(this.root.textContent=this.options.text),this.options.container&&this.insert(this.options.container)}}const gt={prefix:"material",class:"drawer",modifier:"width",state:"closed",position:"left",tag:"div",width:"340",modules:[Z,ot]};class yt{constructor(t){return this.options=Object.assign({},gt,t||{}),B(this),this.build(),this.attach(),this.emit("ready"),this}build(){return this.wrapper=r("div"),n(this.wrapper,this.options),this.root=r("aside"),F.add(this.root,"drawer-panel"),b(this.root,this.wrapper),this.options.position&&F.add(this.root,"position-"+this.options.position),this.options.fixed&&this.wrapper.classList.add("is-fixed"),this.options.size&&("top"===this.options.position||"bottom"===this.options.position?this.root.style="height: "+this.options.size+"px;":this.root.style="width: "+this.options.size+"px;"),this.options.container&&b(this.wrapper,this.options.container),this.emit("built",this.root),this}attach(){this.wrapper.addEventListener("click",t=>{console.log(" click close");this.close()})}toggle(){return this.wrapper.classList.contains("show")?this.close():this.open(),this}close(){return F.remove(this.wrapper,"show"),this}open(){return F.add(this.wrapper,"show"),this}insert(t,i){return b(this.wrapper,t,i),this}}var xt={prefix:"material",class:"item",type:"default",types:{default:"span",display4:"h1",display3:"h1",display2:"h1",display1:"h1",headline:"h1",title:"h2",subheading2:"h3",subheading1:"h4",body:"p",body2:"aside",caption:"span"}};class kt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},xt,t||{}),Object.assign(this,it)}build(){this.options.tag=this.options.types[this.options.type],this.root=o(this.options),this.options.text&&this.set(this.options.text),this.options.layout?this.layout=new et(this.options.layout,this.root):this.options.container&&this.insert(this.options.container)}set(t){return t?(this.root.innerText?this.root.innerText=t:this.root.textContent=t,this):this}}const wt={prefix:"material",class:"list",functions:["render","select"],target:".material-item",events:[["root.click","handleSelect"]]};class Ot{constructor(t){return this.options=Object.assign({},wt,t||{}),this.init(this.options),this.build(this.options),this.attach(this.options.events),this}init(){return this.filters=[],this.data=[],this.items=[],Object.assign(this,Z,G),this._initFunction(this.options.functions),this}_initFunction(t){for(var i=0;i<t.length;i++){var e=t[i];this.options[e]&&(this[e]=this.options[e])}}build(t){var i=this.options.tag||"div";return this.root=document.createElement(i),F.add(this.root,"material-"+this.options.class),t.name&&F.add(this.root,t.class+"-"+t.name),this.options.list&&this.set("list",this.options.list),this.options.container&&b(this.root,this.options.container),this}handleSelect(t){t.target&&t.target.matches(this.options.target)&&(F.remove(this.item,"is-selected"),F.add(t.target,"is-selected"),this.select(t.target,t,this.item),this.item=t.target)}select(t,i,e){this.emit("select",t)}render(t){return"divider"===t.type?new vt:new kt({name:t.name,text:t.text||t.name})}set(t,i,e){switch(t){case"list":this.setList(i,e);break;default:this.setList(t,e)}return this}setList(t){for(var i=0;i<t.length;i++)this.addItem(this.render(t[i]),i);return this}addItem(t){if(t){return b(t.root,this.root,"bottom"),this.items.push(t),t}}insert(t,i){b(this.root,t,i)}empty(){this.root.innerHTML="",this.items=[],this.item=null}reverse(){return this.list.reverse(),this.update(this.list),this}}var jt={prefix:"material",class:"progress",tag:"div",progress:"0%",circular:`<svg class="progress" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n      <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n    </svg>`};class Ct{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},jt,t||{}),Object.assign(this,b)}build(t){return this.root=r(this.options.tag),n(this.root,this.options),"circular"===this.options.type&&(this.root.innerHTML=this.options.circular),"indeterminate"===this.options.type?(this.bar=r("div","bar"),b(this.bar,this.root)):(this.bar=r("div","bar"),b(this.bar,this.root),this.set(this.options.progress)),this.options.container&&b(this.root,this.options.container),this}set(t){this.bar.setAttribute("style","width: "+t)}}`\n<svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">\n  <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z"></path>\n</svg>`;let Lt={prefix:"material",class:"slider",type:"control",label:null,checked:!1,error:!1,value:!1,range:[0,100],step:5,modules:[ot,W,Z,G],mixins:[],build:["$root.material-slider",{},["label$label.slider-label",{}],["input$input"],["$control.slider-control",{},["$track.slider-track",{},["canvas$canvas.slider-canvas",{}],["$trackvalue.slider-track-value",{}],["$knob.slider-knob",{}],["$marker.slider-marker",{},["$value.slider-value",{}]]]]],events:[["element.input.focus","focus"],["element.input.blur","blur"]]};class zt{constructor(t){return this.options=Object.assign({},Lt,t||{}),this.init(this.options),this.build(this.options),this.attach(),this}init(t){return B(this),this}build(){this.element=X(this.options.build),this.root=this.element.root,n(this.root,this.options),this.options.container&&b(this.root,this.options.container);var t=this.element.marker.innerHTML;this.element.marker.innerHTML='\n<svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">\n  <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z"></path>\n</svg>'+t,this.options.type&&F.add(this.root,"type-"+this.options.type),this.options.disabled&&this.disable(!0);let i=this.options.label||this.options.text;this.element.label.textContent=i,this.options.label=this.options.label||this.options.text,this.initTrack();setTimeout(()=>{this.initCanvas()},50)}initCanvas(){window.addEventListener("resize",()=>{console.log("resize");this.drawCanvas()},!1),this.drawCanvas()}drawCanvas(){var t=O(this.element.track,"width"),i=O(this.element.track,"height");this.element.canvas.width=t,this.element.canvas.height=i;var e=this.element.canvas.getContext("2d");e.lineWidth=2,e.beginPath(),e.moveTo(0,i/2+1),e.lineTo(t,i/2+1),e.strokeStyle="rgba(34, 31, 31, .26)",e.stroke()}initTrack(){this.element.track.addEventListener("mousedown",t=>{if(!0===this.disabled)return;this.initTrackSize();var i=t.layerX;this.update(i)}),this.element.knob.addEventListener("click",t=>{t.stopPropagation()}),this.initDragging();setTimeout(()=>{this.setValue(this.options.value)},100)}initTrackSize(){return this._tracksize=O(this.element.track,"width"),this._knobsize=O(this.element.knob,"width"),this._markersize=32,this._trackleft=O(this.element.track,"left"),this}initDragging(){this.element.knob.onmousedown=(t=>{if(!0===this.disabled)return;t.stopPropagation();t=t||window.event;F.add(this.element.control,"dragging");var i=0;var e=0;t.pageX?i=t.pageX:t.clientX&&(i=t.clientX);i=this._trackleft;document.body.onmousemove=(t=>{if(!0===this.disabled)return;console.log("mousedown",this.disabled);t=t||window.event;var s=0;t.pageX?s=t.pageX:t.clientX&&(s=t.clientX);e=s-i;this.update(e)});document.body.onmouseup=(t=>{document.body.onmousemove=document.body.onmouseup=null;t=t||window.event;var s=0;t.pageX?s=t.pageX:t.clientX&&(s=t.clientX);e=s-i;this.update(e);F.remove(this.element.control,"dragging")})})}update(t){var i=this._tracksize,e=this.options.range[1]-this.options.range[0];t>i&&(t=i),t<0&&(t=0);var s=i/t,n=Math.round(e/s)+this.options.range[0];0===t&&F.remove(this.element.knob,"notnull"),this.element.knob.style.left=t-this._knobsize/2+"px",this.element.trackvalue.style.width=t+"px",this.element.marker.style.left=t-this._markersize/2+"px",this.element.value.textContent=n,this.element.input.value=n,n>this.options.range[0]?F.add(this.element.knob,"notnull"):F.remove(this.element.knob,"notnull")}updateValue(t){this.initTrackSize();var i=O(this.element.track,"width");i=parseInt(i);var e=100*t/(this.options.range[1]-this.options.range[0]),s=Math.round(i*e/100);return this.update(s),this}insert(t,i){b(this.root,t,i)}set(t,i){switch(t){case"value":this.setValue(i);break;case"label":this.setLabel(i);break;default:this.setValue(t)}return this}get(t){var i;switch(t){case"value":i=this.getValue();break;case"name":i=this.name;break;default:return this.getValue()}return i}getValue(){return this.element.input.value}setValue(t){t=t||this.options.range[0],this.element.input.value=t,this.updateValue(t)}setLabel(t){null!==(t=t||this.options.label||this.options.text)&&this.label&&(this.label.textContent=t)}}let At={prefix:"material",class:"switch",type:"control",label:null,checked:!1,error:!1,value:!1,disabled:!1,build:["$root.material-switch",{},["input$input$switch-input",{type:"checkbox"}],["span$control.switch-control",{},["span$track.switch-track",{},["span$knob.switch-knob",{}]]],["label$label.switch-label"]],events:[["element.control.click","toggle"],["element.label.click","toggle"],["element.input.click","toggle"],["element.input.focus","focus"],["element.input.blur","blur"]]};class Et{constructor(t){return this.init(t),this.build(),this.attach(),this}init(t){return this.options=Object.assign({},At,t||{}),Object.assign(this,Z,W,G,it),this.value=this.options.value,this}build(){this.element=X(this.options.build),this.root=this.element.root,n(this.root,this.options),this.options.disabled&&this.disable(),this.value&&this.element.input.setAttribute("checked","checked"),this.element.input.setAttribute("aria-label",this.options.name);let t=this.options.label||this.options.text||"";this.element.label.textContent=t,this.element.label.setAttribute("for",this.options.name),this.options.checked&&this.check(!0),this.options.container&&this.insert(this.options.container)}set(t,i){switch(t){case"value":this.setValue(i);break;case"disabled":!0===i?this.disable():!1===i&&this.enable();break;default:this.setValue(t)}return this}get(){return this.value}getValue(){return this.value}setValue(t){t?this.check():this.unCheck()}}const Tt={prefix:"material",class:"tabs",tag:"div",indicator:{prefix:"material",class:"indicator",tag:"div"}};class Mt{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},Tt,t||{}),Object.assign(this,it,Z)}build(){return this.root=o(this.options),this.options.list&&(this.list=new Ot({list:this.options.list,target:".material-button",height:600,label:"Flat",render:t=>{var i;i=new tt({name:t.name,text:t.text||t.name});return i},select:t=>{console.log("click");this.selected=t;this.click(t)}}).insert(this.root)),this.indicator=o(this.options.indicator),this.insertElement(this.indicator,this.root),this.options.container&&this.insert(this.options.container),this}click(t){var i=O(this.root),e=O(t);this.indicator.setAttribute("style","width: "+e.width+"px; left: "+(e.left-i.left)+"px;"),this.emit("select",t.dataset.name)}}var _t={prefix:"material",class:"text",type:"default",types:{default:"span",display4:"h1",display3:"h1",display2:"h1",display1:"h1",headline:"h1",title:"h2",subheading2:"h3",subheading1:"h4",body:"p",body2:"aside",caption:"span"}};class $t{constructor(t){return this.init(t),this.build(),this}init(t){this.options=Object.assign({},_t,t||{}),Object.assign(this,it)}build(){return this.options.tag=this.options.types[this.options.type],this.root=o(this.options),this.options.text&&this.set(this.options.text),this.options.container&&this.insert(this.options.container),this}set(t){return t?(this.root.innerText?this.root.innerText=t:this.root.textContent=t,this):this}}const St={prefix:"material",class:"toolbar",tag:"header"};class Nt{constructor(t){return this.init(t),this.build(),this.attach(),this}init(t){this.options=Object.assign({},St,t||{}),Object.assign(this,it),console.log("waterfALL",this.options.waterfall),this.waterfall=this.options.waterfall}build(){return this.root=o(this.options),console.log(this.options.height,this.options.fixed),this.options.height&&(this.root.style.height=this.options.height+"px"),this.options.fixed&&(console.log("is-fixed"),this.root.classList.add("is-fixed")),this.options.flexible&&this.root.classList.add("is-flexible"),this}attach(){this.root.addEventListener("DOMNodeInserted",t=>{var i=t.target;if(i!==this.root)return;var e=this.size=O(this.root,"height");var s=this.view=this.root.parentNode;console.log("view",s);var n=window.getComputedStyle(s)["padding-top"];n=parseInt(n,10);this.padding=n;var o=this.ptop=e+n;document.body==s&&(console.log("toolbar container body"),this.root.classList.add("toolbar-body"));s.setAttribute("style","padding-top: "+o+"px");this.scroll(s)})}set(t,i){switch(t){case"minimize":this.root.setAttribute("style","height: 64px");break;case"value":this.setValue(i);break;case"label":this.setLabel(i);break;default:this.check(t)}return this}scroll(t){var i=!1,e=t;this.scrolling=t,t===document.body&&(i=!0,e=document,this.scrolling=document.body),t.classList.add(),e.addEventListener("scroll",e=>{var s;s=i?(document.documentElement||document.body.parentNode||document.body).scrollTop:t.scrollTop;s>0?this.root.classList.add("is-scrolled"):this.root.classList.remove("is-scrolled");this.update(e,s)})}update(t,i){this.options.fixed&&this.fixed(t,i),this.options.flexible&&this.flexible(t,i)}flexible(t,i){var e="64";O(this.root,"height")<e?this.root.style.height=e+"px":((e=this.size-i)<64&&(e=64),this.root.style.height=e+"px")}fixed(t,i){this.root.style.transform="translateY("+i+"px)"}waterfall$(t){}}`\n<svg height="24" viewBox="0 0 24 24" width="24">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n</svg>`,`\n<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />\n</svg>`;var Vt=`\n<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>\n `,Pt=`\n<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-10.06L14.06 11l1.06-1.06L16.18 11l1.06-1.06-2.12-2.12zm-4.12 0L9.94 11 11 9.94 8.88 7.82 6.76 9.94 7.82 11zM12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>\n `;console.log("demo"),console.log("log");var Ht=[{text:"One",name:"one"},{text:"Two",name:"two"},{text:"Three",name:"three"},{text:"Four",name:"four"}];document.addEventListener("DOMContentLoaded",function(){var t=new et([ht,"demo",{display:"flex",direction:"vertical"},[ht,"head",{display:"flex",direction:"horizontal"},[Nt,"toolbar",{flex:1,display:"flex",direction:"horizontal"},[Q,"menu-navi",{icon:'\n<svg height="24" viewBox="0 0 24 24" width="24">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n</svg>',type:"action"}],[$t,"app-title",{text:"Material"}]],[Nt,"desk",{display:"flex",direction:"horizontal"},[Q,"menu-more",{icon:'\n<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n  <path d="M0 0h24v24H0z" fill="none" />\n  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />\n</svg>',type:"action"}]]],[yt,"navi",{css:"drawer-temporary",type:"temporary",size:"280px"},[ht,"navi-head",{theme:"dark"},[$t,"app-title",{text:"Components"}]],[Ot,"navi-list",{theme:"dark"}]],[Mt,"tabs",{color:"primary",list:Ht,flex:"none"}],[lt,"body",{flex:"1"},[lt,"container-components",{},[$t,"text",{text:"Components",type:"title"}]],[nt,"buttons",{},[Nt,"toolbar-buttons",{},[$t,"buttons-title",{text:"Buttons"}]],[lt,"button-body",{},[Q,"first",{text:"Flat"}],[Q,"second",{text:"Raised",type:"raised",color:"primary"}],[Q,"third",{icon:Vt,type:"action"}],[Q,"fourth",{icon:Vt,text:"text"}]]],[nt,"buttons",{},[Nt,"toolbar-buttons",{},[$t,"buttons-title",{text:"Floating Buttons"}]],[lt,"button-body",{},[Q,"fifth",{icon:Vt,type:"floating",color:"primary"}],[Q,"six",{icon:Pt,type:"floating",style:"mini",color:"primary"}],[Q,"fifth",{icon:Vt,type:"floating",color:"secondary"}],[Q,"six",{icon:Pt,type:"floating",style:"mini",color:"secondary"}]]],[nt,"checkboxes",{},[Nt,"toolbar",{},[$t,"checkbox-title",{text:"Checkboxes"}]],[lt,"checkbox-body",{},[pt,"checkbox",{text:"Checkbox"}],[pt,"checkbox-checked",{text:"Checked",checked:!0}],[pt,"checkbox-disabled",{text:"Disabled",disabled:!0}]]],[nt,"switches",{},[Nt,"switch-toolbar",{},[$t,"switch-title",{text:"Switches"}]],[lt,"switch-body",{},[Et,"switch",{text:"Switch"}],[Et,"switch-checked",{text:"Checked",checked:!0}],[Et,"switch-disabled",{text:"Disabled",disabled:!0}]]],[nt,"progress indicators",{},[Nt,"progress-toolbar",{},[$t,"progress-title",{text:"Progress indicators"}]],[lt,"progress-body",{},[Ct,"progress",{progress:"60%"}],[Ct,"progress-indeterminate",{type:"indeterminate"}]]],[nt,"sliders",{},[Nt,"slider-toolbar",{},[$t,"slider-title",{text:"Sliders"}]],[lt,"slider-body",{},[zt,"slider",{text:"Slider"}],[zt,"slider-checked",{text:"Checked",checked:!0}],[zt,"slider-disabled",{text:"Disabled",disabled:!0}]]]]],document.body);t.get("menu-more").on("click",i=>{t.get("more-menu").show(i)});t.get("body").root.addEventListener("scroll",i=>{t.get("body").root.scrollTop>0?F.add(t.get("tabs").root,"head-shadow"):F.remove(t.get("tabs").root,"head-shadow")}),t.get("menu-navi").on("click",i=>{t.get("navi").open()})})}();
 //# sourceMappingURL=demo-bundle.js.map

dist/demo.js

@@ -18,2 +18,3 @@ console.log('demo')
   Menu,
+  Tabs,
   Slider,
@@ -27,2 +28,4 @@ Switch,
 
+import css from '../src/module/css'
+
 // import Material from 'material';
@@ -38,2 +41,15 @@ // console.log('Material', Material);
 console.log('log')
+var list = [{
+  text: 'One',
+  name: 'one'
+}, {
+  text: 'Two',
+  name: 'two'
+}, {
+  text: 'Three',
+  name: 'three'
+}, {
+  text: 'Four',
+  name: 'four'
+}]
 
@@ -57,2 +73,3 @@ document.addEventListener('DOMContentLoaded', function () {
     ],
+    [Tabs, 'tabs', { color: 'primary', list: list, flex: 'none' }],
     [Container, 'body', { flex: '1' },
@@ -133,2 +150,10 @@ [Container, 'container-components', { },
 
+  layout.get('body').root.addEventListener('scroll', (e) => {
+    if (layout.get('body').root.scrollTop > 0) {
+      css.add(layout.get('tabs').root, 'head-shadow')
+    } else {
+      css.remove(layout.get('tabs').root, 'head-shadow')
+    }
+  })
+
   var naviMenu = layout.get('menu-navi')
@@ -135,0 +160,0 @@

index.js

@@ -11,2 +11,3 @@ import Button from 'material/src/Button'
 import Form from 'material/src/form'
+import Icon from 'material/src/icon'
 import Image from 'material/src/image'
@@ -21,2 +22,3 @@ import Item from 'material/src/item'
 import Switch from 'material/src/switch'
+import Tabs from 'material/src/tabs'
 import Text from 'material/src/text'
@@ -26,2 +28,3 @@ import Textfield from 'material/src/textfield'
 import View from 'material/src/view'
+import Tree from 'material/src/tree'
 
@@ -49,2 +52,4 @@ export {
   Toolbar,
+  Tree,
+  Tabs,
   View,
@@ -51,0 +56,0 @@ Snackbar,

package.json

 {
   "name": "material",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "A lightweight implementation of Material Design Components - ES6",
@@ -46,2 +46,3 @@ "main": "index.js",
     "reload": "livereload 'dist/' -d",
+    "styles": "sass --watch dist/styles/demo.sass:dist/demo.css",
     "watch": "npm-run-all --parallel reload dev",
@@ -48,0 +49,0 @@ "docs": "jsdoc src -r -d docs",

README.md

@@ -1,3 +0,5 @@
-A lightweight implementation of Material Design Components - ES2015
+Material JS is a set of user interface components for the web. 
 
-[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
+
+[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
+=======

src/button.js

@@ -17,3 +17,3 @@ 'use strict'
   events: [
-    ['root.click', '_clickHandler']
+    ['root.click', 'handleClick']
   ]
@@ -60,7 +60,9 @@ }
     this.options = Object.assign({}, defaults, options || {})
-
     Object.assign(this, control, emitter, attach, ripple)
 
     this.element = this.element || {}
+
+    // init module
     ripple(this)
+
     this.emit('init')
@@ -156,3 +158,3 @@ }
    */
-  _clickHandler (e) {
+  handleClick (e) {
     e.preventDefault()
@@ -159,0 +161,0 @@

src/checkbox.js

@@ -95,3 +95,3 @@ 'use strict'
     if (this.options.value) {
-      this.element.label.setAttribute('value', this.options.value)
+      this.element.input.setAttribute('value', this.options.value)
     }
@@ -98,0 +98,0 @@

src/component/classify.js

@@ -24,3 +24,3 @@ import css from '../module/css'
   if (options.type) {
-    css.add(element, options.class + '-' + options.type)
+    //css.add(element, options.class + '-' + options.type)
     css.add(element, 'type-' + options.type)
@@ -37,2 +37,6 @@ }
 
+  if (options.elevation) {
+    css.add(element, 'elevation-z' + options.elevation)
+  }
+
   if (options.name) {
@@ -39,0 +43,0 @@ // console.log('name', options.name)

src/component/control.js

@@ -52,3 +52,3 @@ import create from '../element/create'
    */
-  label (label) {
+  label (label, container) {
     if (!label) return
@@ -64,3 +64,5 @@
 
-    insert(this.element.label, this.root)
+    container = container || this.root
+
+    insert(this.element.label, container)
   },
@@ -73,6 +75,8 @@
    */
-  icon (icon) {
+  icon (icon, container, position) {
     if (!icon) return
 
-    var position = 'top'
+    container = container || this.root
+
+    position = position || 'top'
     if (this.options.type === 'text-icon') {
@@ -85,3 +89,3 @@ position = 'bottom'
     this.element.icon = create('i', this.options.class + '-icon')
-    insert(this.element.icon, this.root, position)
+    insert(this.element.icon, container, position)
 
@@ -134,2 +138,5 @@ this.element.icon.innerHTML = icon
         this.toggle(e)
+        break
+      default:
+        break
     }
@@ -139,2 +146,30 @@ },
   /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  get (prop) {
+    switch (prop) {
+      case 'name':
+        this.getName()
+        break
+      // case 'value':
+      //   this.setValue(prop)
+      //   break
+      // case 'label':
+      //   this.setLabel(prop)
+      //   break
+      default:
+        this.setValue(prop)
+    }
+
+    return this
+  },
+
+  getName () {
+    return this.root.dataset.name
+  },
+
+  /**
    * [_onInputFocus description]
@@ -141,0 +176,0 @@ * @return {?} [description]

src/component/ripple.js

@@ -21,2 +21,6 @@ import create from '../element/create'
 
+/**
+ * this function set the event listener
+ * @param {HTMLElement} container [description]
+ */
 function set (container) {
@@ -27,2 +31,3 @@ container.addEventListener('mousedown', (e) => {
 }
+
 /**
@@ -48,3 +53,3 @@ * show method
   ripple.style.top = initial.top
-  ripple.style.opacity = defaults.opacity[1]
+  //ripple.style.opacity = defaults.opacity[1]
   ripple.style.transition = defaults.transition
@@ -60,3 +65,3 @@
     ripple.style.height = end.size
-    ripple.style.opacity = defaults.opacity[1]
+    //ripple.style.opacity = defaults.opacity[1]
   }, 1)
@@ -87,12 +92,8 @@
  */
-function coordinate (offset) {
-  var size = offset.width
-  var top = -offset.height / 2
+function coordinate (o) {
+  var size = o.width
+  var top = -o.height / 2
 
-  if (offset.width > offset.height) {
-    size = offset.width
-    top = -(offset.width - offset.height / 2)
-  } else if (offset.width < offset.height) {
-    size = offset.height
-    top = (offset.width - offset.height) / 2
+  if (o.width > o.height) {
+    top = -(o.width - o.height / 2)
   }
@@ -107,2 +108,2 @@
 
-export default init
+export default init

src/dialog.js

@@ -11,4 +11,10 @@ 'use strict'
 import css from './module/css'
+import { _isArray } from './module/utils'
 
-import Layout from './layout'
+import {
+  Text,
+  Button,
+  Toolbar,
+  Layout
+} from 'material'
 
@@ -18,2 +24,3 @@ let defaults = {
   class: 'dialog',
+  tag: 'div',
   events: [
@@ -62,4 +69,3 @@ ['root.click', 'close']
   build () {
-    // this.root = new Element(this.options.element);
-    this.root = document.createElement(tag)
+    this.root = document.createElement('div')
 
@@ -71,4 +77,8 @@ css.add(this.root, 'material-dialog')
 
-    this.surface = document.createElement(tag)
+    if (this.options.theme) {
+      css.add(this.root, this.options.theme + '-theme')
+    }
 
+    this.surface = document.createElement('div')
+
     css.add(this.surface, 'dialog-surface')
@@ -78,12 +88,80 @@
 
-    this.options.layout.root = this.surface
-    this.layout = new Layout(this.options.layout, this.surface)
+    if (this.options.title) {
+      this.buildTitle()
+    }
 
+    if (this.options.content) {
+      this.buildContent()
+    }
+
+    this.buildActions()
+
     event.add(this.surface, 'click', function (ev) {
       ev.stopPropagation()
     })
+  }
 
-    // this.root = element.createElement(tag);
+  buildTitle () {
+    this.title = new Text({
+      type: 'title',
+      css: 'dialog-title',
+      text: this.options.title
+    })
+
+    this.insertElement(this.title.root, this.surface)
+
+    console.log('buildTitle', this.title)
   }
 
+  buildContent () {
+    console.log('buildContent', typeof this.options.content)
+    if (typeof this.options.content === 'string') {
+      console.log('text content', this.options.content)
+      this.content = new Text({
+        type: 'content',
+        css: 'dialog-content',
+        text: this.options.content
+      })
+
+      this.insertElement(this.content.root, this.surface)
+    } else if (_isArray(this.options.content)) {
+      this.content = new Layout(this.options.content, this.surface)
+      console.log('layout content', this.content)
+    } else {
+      console.log('other content', this.content)
+    }
+  }
+
+  buildActions () {
+    if (this.options.actions) {
+      this.actions = new Layout(this.options.actions, this.surface)
+
+      css.add(this.actions.get('root'), 'dialog-actions')
+    } else {
+      var actions
+      if (this.options.accept || this.options.cancel) {
+        actions = new Toolbar({ css: 'dialog-actions' })
+        this.insertElement(actions.root, this.surface)
+      }
+
+      if (this.options.cancel) {
+        this.cancel = new Button(this.options.cancel)
+        .on('click', () => {
+          this.emit('canceled')
+          this.close()
+        })
+        this.insertElement(this.cancel.root, actions.root)
+      }
+
+      if (this.options.accept) {
+        this.accept = new Button(this.options.accept)
+        .on('click', () => {
+          this.emit('accepted')
+          this.close()
+        })
+        this.insertElement(this.accept.root, actions.root)
+      }
+    }
+  }
+
   close () {
@@ -98,5 +176,9 @@ css.add(this.root, 'dialog-closing')
     }, delayMillis)
+
+    this.previousActive.focus()
   }
 
   show () {
+    this.previousActive = document.activeElement
+
     this.root.style.display = 'flex'
@@ -111,2 +193,6 @@ // css.add(this.root, 'dialog-showing');
     }, delayMillis)
+
+    // var button = this.root.querySelector('button')
+
+    // if (button) button.focus()
   }
@@ -113,0 +199,0 @@ }

src/drawer.js

@@ -18,2 +18,3 @@ 'use strict'
   tag: 'div',
+  width: '340',
   modules: [emitter, events]
@@ -43,2 +44,3 @@ }
     this.build()
+    this.attach()
 
@@ -55,8 +57,20 @@ this.emit('ready')
   build () {
+    this.wrapper = create('div')
+
+    classify(this.wrapper, this.options)
+
     this.root = create('aside')
 
-    classify(this.root, this.options)
+    css.add(this.root, 'drawer-panel')
 
-    if (this.options.position) { css.add(this.root, 'position-' + this.options.position) }
+    insert(this.root, this.wrapper)
 
+    if (this.options.position) {
+      css.add(this.root, 'position-' + this.options.position)
+    }
+
+    if (this.options.fixed) {
+      this.wrapper.classList.add('is-fixed')
+    }
+
     if (this.options.size) {
@@ -70,8 +84,4 @@ if (this.options.position === 'top' || this.options.position === 'bottom') {
 
-    if (this.options.container) { insert(this.root, this.options.container) }
+    if (this.options.container) { insert(this.wrapper, this.options.container) }
 
-    if (!this.options.state) {
-      this.state = 'opened'
-    }
-
     this.emit('built', this.root)
@@ -82,2 +92,8 @@
 
+  attach () {
+    this.wrapper.addEventListener('click', (e) => {
+      console.log(' click close')
+      this.close()
+    })
+  }
   /**
@@ -88,3 +104,4 @@ * [toggle description]
   toggle () {
-    if (this.state === 'opened') {
+    // console.log('toggle', this.root);
+    if (this.wrapper.classList.contains('show')) {
       this.close()
@@ -103,8 +120,6 @@ } else {
   close () {
-    css.remove(this.root, 'show')
-    css.remove(this.underlay, 'show')
-    this.state = 'closed'
+    // console.log('close');
+    css.remove(this.wrapper, 'show')
+    // css.remove(this.underlay, 'show')
 
-    this.emit(this.state)
-
     return this
@@ -118,17 +133,6 @@ }
   open () {
-    this.emit('open')
-    if (!this.underlay) { this.underlay = create('div', 'drawer-underlay') }
+    // console.log('open');
 
-    insert(this.underlay, this.root.parentNode, 'top')
-    this.underlay.addEventListener('click', (e) => {
-      this.close()
-    })
-    setTimeout(() => {
-      css.add(this.underlay, 'show')
-    }, 10)
+    css.add(this.wrapper, 'show')
 
-    css.add(this.root, 'show')
-    this.state = 'opened'
-    this.emit(this.state)
-
     return this
@@ -140,7 +144,6 @@ }
    * @param  {?} container [description]
-   * @param  {?} context   [description]
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.wrapper, container, context)
 
@@ -147,0 +150,0 @@ return this

src/element/ripple.js

@@ -68,2 +68,3 @@ import create from '../element/create'
  * Get ripple final coordinates
+ * @param  {Object} offset
  * @return {Object} Size and position
@@ -70,0 +71,0 @@ */

src/image.js

 'use strict'
 
-import insert from './component/insert'
+// import insert from './component/insert'
 import css from './module/css'
+import insert from './element/insert'
+import control from './component/control'
 
@@ -39,3 +41,3 @@ var defaults = {
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, insert)
+    Object.assign(this, control)
   }
@@ -50,10 +52,34 @@
 
-    var tag = options.tag || 'img'
-
+    var tag = options.tag || 'div'
+    var text = options.text || options.label
     this.root = document.createElement(tag)
 
+    // if (options.src) {
+    //   this.root.setAttribute('style', 'background-image: url(' + options.src + ')')
+
     if (options.src) {
-      this.root.setAttribute('style', 'background-image: url(' + options.src + ')')
+      this.image = document.createElement('img')
+      this.image.setAttribute('src', options.src)
+      css.add(this.image, this.options.class + '-image')
+      insert(this.image, this.root)
     }
 
+    this.info = document.createElement('span')
+    css.add(this.info, this.options.class + '-info')
+
+    insert(this.info, this.root)
+
+    this.label(text, this.info)
+
+    // this.label = this.element.label
+
+    this.icon(this.options.icon, this.info, 'bottom')
+
+    // if (text) {
+    //   this.label = document.createElement('span')
+    //   this.label.innerText = text
+    //   css.add(this.label, this.options.class + '-label')
+    //   insert(this.label, this.root)
+    // }
+
     css.add(this.root, this.options.prefix + '-' + this.options.class)
@@ -70,2 +96,14 @@
   /**
+   * [insert description]
+   * @param  {?} container [description]
+   * @param  {?} context   [description]
+   * @return {?}           [description]
+   */
+  insert (container, context) {
+    insert(this.root, container, context)
+
+    return this
+  }
+
+  /**
    * Get or set text value of the element
@@ -72,0 +110,0 @@ * @param {string} value The text to set

src/item.js

 'use strict'
 
-// import Component from './component';
+import Layout from './layout'
+
 import create from './component/create'
 import insert from './component/insert'
-import css from './module/css'
 
@@ -12,2 +12,3 @@ var defaults = {
   type: 'default',
+  tag: 'li',
   types: {
@@ -69,4 +70,6 @@ default: 'span',
     // define main tag
-    this.options.tag = this.options.types[this.options.type]
+    this.options.tag = this.options.tag || this.options.types[this.options.type]
 
+    this.options.tag = this.options.tag
+
     this.root = create(this.options)
@@ -78,4 +81,8 @@
 
-    if (this.options.container) {
-      this.insert(this.options.container)
+    if (this.options.layout) {
+      this.layout = new Layout(this.options.layout, this.root)
+    } else {
+      if (this.options.container) {
+        this.insert(this.options.container)
+      }
     }
@@ -102,4 +109,4 @@ }
   }
-};
+}
 
 export default Item

src/layout.js

@@ -32,9 +32,10 @@ import { is as isObject } from './module/object'
 
+    // console.log('level', level, schema)
+    // console.log('-------------')
+
     structure = structure || {}
-    let component
+    let component = null
 
-    // if (level === 1)
-    //   console.log('level', level);
-
     for (var i = 0; i < schema.length; i++) {
+      // console.log('index', i, typeof schema[i])
       var name
@@ -65,3 +66,10 @@ var options = {}
 
-        // if (level === 1) console.log('insert', component, container);
+        if (level === 1) {
+          var isClass = fn => /^\sclass/.test(schema[i].toString())
+
+          // console.log('isClass', isClass)
+          // console.log('root', component.root)
+          structure.root = component.root
+        }
+
         if (component && container) {
@@ -72,2 +80,6 @@ if (component.insert) component.insert(container)
       } else if (Array.isArray(schema[i])) {
+       // console.log('------', schema[i])
+        if (component == null) {
+          component = container
+        }
         this.create(schema[i], component, structure, level)
@@ -119,2 +131,10 @@ }
 
+    if (options.position) {
+      component.root.position = options.position
+    }
+
+    if (options.bottom) {
+      component.root.bottom = options.bottom
+    }
+
     if (options.hide) {
@@ -121,0 +141,0 @@ component.root.display = 'none'

src/list.js

@@ -14,2 +14,3 @@ 'use strict'
   class: 'list',
+  tag: 'ul',
   functions: ['render', 'select'],
@@ -86,3 +87,3 @@ target: '.material-item',
     // define main tag
-    var tag = this.options.tag || 'div'
+    var tag = this.options.tag || 'ul'
 
@@ -96,2 +97,10 @@ this.root = document.createElement(tag)
 
+    if (options.type) {
+      css.add(this.root, 'type-' + options.type)
+    }
+
+    if (options.layout) {
+      css.add(this.root, 'layout-' + options.layout)
+    }
+
     if (this.options.list) {
@@ -153,3 +162,3 @@ this.set('list', this.options.list)
         name: info.name,
-        text: info.name
+        text: info.text || info.name
       })
@@ -156,0 +165,0 @@ }

src/menu.js

@@ -22,3 +22,2 @@ 'use strict'
   tag: 'div',
-  modules: [emitter, events, attach, insert],
   events: [
@@ -74,2 +73,6 @@ ['root.click', 'hide'],
 
+    if (this.options.position) {
+      this.root.style.position = this.options.position
+    }
+
     classify(this.root, this.options)
@@ -118,2 +121,3 @@
   }
+
   position () {
@@ -123,4 +127,7 @@ if (!this.caller) return
 
-    var offsw = offset(this.root)
+    var offsw = this.offset = offset(this.root)
 
+    // console.log('offset')
+    // console.log('caller', this.caller, offs, screen.width)
+
     this.root.style.top = offs.top + 'px'
@@ -132,3 +139,3 @@ this.root.style.left = offs.left - offsw.width + offs.width + 'px'
   hide () {
-    console.log('hide')
+    // console.log('hide')
     css.remove(this.root, this.options.class + '-show')
@@ -135,0 +142,0 @@ css.remove(this.mask, 'mask-show')

src/switch.js

@@ -9,3 +9,2 @@ 'use strict'
 import attach from './module/attach'
-import css from './module/css'
 import classify from './component/classify'
@@ -100,4 +99,4 @@
     this.element.label.setAttribute('for', this.options.name)
-    if (this.value) {
-      this.check()
+    if (this.options.checked) {
+      this.check(true)
     }
@@ -104,0 +103,0 @@

src/textfield.js

@@ -6,2 +6,3 @@ 'use strict'
 
+import focus from './component/focus'
 import emitter from './module/emitter'
@@ -18,6 +19,6 @@ import css from './module/css'
     // 'change': '_onChange',
-    ['input.focus', '_handleInputFocus'],
-    ['input.blur', '_handleInputBlur'],
+    ['element.input.focus', 'focus'],
+    ['element.input.blur', 'blur'],
     // ['input.keypress', '_handleInputKeyPress',
-    ['input.keyup', '_handleInputKeyPress']
+    ['element.input.keyup', '_handleInputKeyPress']
     // ['input.change', '_onChange']
@@ -55,4 +56,5 @@ // 'input.keydown': '_handleInputKeyPress'
   init () {
-    Object.assign(this, emitter, attach)
+    Object.assign(this, focus, emitter, attach)
 
+    this.element = {}
     this.value = this.options.value
@@ -101,5 +103,5 @@
   buildInput () {
-    this.input = create('input', this.options.class + '-input')
-    this.input.setAttribute('type', 'text')
-    insert(this.input, this.root)
+    this.element.input = create('input', this.options.class + '-input')
+    this.element.input.setAttribute('type', 'text')
+    insert(this.element.input, this.root)
 
@@ -111,7 +113,7 @@ if (!this.options.value) {
     if (this.readonly) {
-      this.input.setAttribute('readonly', 'readonly')
-      this.input.setAttribute('tabindex', '-1')
+      this.element.input.setAttribute('readonly', 'readonly')
+      this.element.input.setAttribute('tabindex', '-1')
     }
 
-    return this.input
+    return this.element.input
   }
@@ -141,2 +143,9 @@
         break
+      case 'disabled':
+        if (value === true) {
+          this.disable()
+        } else if (value === false) {
+          this.enable()
+        }
+        break
       default:
@@ -168,2 +177,20 @@ this.setValue(prop)
 
+
+  disable () {
+    this.disabled = true
+
+    this.element.input.setAttribute('disabled', 'disabled')
+    css.add(this.root, 'is-disabled')
+    return this
+  }
+
+  enable () {
+    this.disabled = false
+
+    this.element.input.removeAttribute('disabled')
+    css.remove(this.root, 'is-disabled')
+    return this
+  }
+
+
   /**
@@ -197,3 +224,3 @@ * Getter
     // console.log('getValue', this);
-    return this.input.value
+    return this.element.input.value
   }
@@ -206,3 +233,3 @@
   setValue (value) {
-    this.input.value = value
+    this.element.input.value = value
 
@@ -254,22 +281,2 @@ if (value) {
    */
-  _handleInputFocus (e) {
-    // console.log('_handleInputFocus');
-    if (this.readonly) return
-    this.setState('focus')
-  }
-
-  /**
-   * [_onBlur description]
-   * @return {Object} The class instance
-   */
-  _handleInputBlur () {
-    // console.log('_handleInputBlur', this.readonly);
-    if (this.readonly) return
-    this.setState(null)
-  }
-
-  /**
-   * [_onFocus description]
-   * @return {Object} The class instance
-   */
   _handleInputKeyPress (e) {
@@ -276,0 +283,0 @@ // console.log('_handleInputKeyPress', e);

src/toolbar.js

@@ -5,2 +5,3 @@ 'use strict'
 import insert from './component/insert'
+import offset from './element/offset'
 
@@ -10,3 +11,3 @@ const defaults = {
   class: 'toolbar',
-  tag: 'div'
+  tag: 'header'
 }
@@ -23,3 +24,3 @@
     this.build()
-
+    this.attach()
     return this
@@ -31,2 +32,6 @@ }
     Object.assign(this, insert)
+
+    console.log('waterfALL', this.options.waterfall)
+
+    this.waterfall = this.options.waterfall
   }
@@ -41,10 +46,172 @@
 
-    if (this.options.container) {
-      this.insert(this.options.container)
+    console.log(this.options.height, this.options.fixed)
+
+    if (this.options.height) {
+      this.root.style.height = this.options.height + 'px'
     }
 
+    if (this.options.fixed) {
+      console.log('is-fixed')
+      this.root.classList.add('is-fixed')
+    }
+
+    if (this.options.flexible) {
+      this.root.classList.add('is-flexible')
+    }
+
+    // if (this.options.container) {
+    //   this.insert(this.options.container)
+    // }
+
     return this
   }
+
+  attach () {
+    this.root.addEventListener('DOMNodeInserted', (e) => {
+      var textNode = e.target
+      if (textNode !== this.root) return
+
+      var size = this.size = offset(this.root, 'height')
+
+      var view = this.view = this.root.parentNode
+
+      console.log('view', view)
+
+      var padding = window.getComputedStyle(view)['padding-top']
+      // console.log('paddingTop', padding)
+      // if (!padding) padding = window.getComputedStyle(this.root.parentNode, 'padding')
+      // console.log('padding', padding)
+
+      padding = parseInt(padding, 10)
+      // size = parseInt(size, 10)
+
+      this.padding = padding
+
+      // console.log(' toolbar inserted in', size, 'padding', padding)
+      var ptop = this.ptop = size + padding
+
+      // console.log('ptop', ptop)
+
+      if (document.body == view) {
+        console.log('toolbar container body')
+        this.root.classList.add('toolbar-body')
+      }
+
+      view.setAttribute('style', 'padding-top: ' + ptop + 'px')
+
+      this.scroll(view)
+    })
+  }
+
+  /**
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
+   */
+  set (prop, value) {
+    switch (prop) {
+      case 'minimize':
+        this.root.setAttribute('style', 'height: 64px')
+        break
+      case 'value':
+        this.setValue(value)
+        break
+      case 'label':
+        this.setLabel(value)
+        break
+      default:
+        this.check(prop)
+    }
+
+    return this
+  }
+
+  scroll (view) {
+    // console.log('initScroll')
+
+    var isBody = false
+
+    var element = view
+
+    this.scrolling = view
+
+    if (view === document.body) {
+      isBody = true
+      element = document
+      this.scrolling = document.body
+    }
+
+    view.classList.add()
+
+    element.addEventListener('scroll', (e) => {
+      var scrollTop
+      if (isBody) {
+        scrollTop = (document.documentElement ||
+       document.body.parentNode ||
+       document.body).scrollTop
+      } else {
+        scrollTop = view.scrollTop
+      }
+
+      if (scrollTop > 0) {
+        this.root.classList.add('is-scrolled')
+      } else {
+        this.root.classList.remove('is-scrolled')
+      }
+
+      // console.log('scroll', scrollTop)
+
+      this.update(e, scrollTop)
+    })
+  }
+
+  update (e, scrollTop) {
+    if (this.options.fixed) { this.fixed(e, scrollTop) }
+    if (this.options.flexible) { this.flexible(e, scrollTop) }
+  }
+
+  flexible (e, scrollTop) {
+    var size = offset(this.root, 'height')
+    // console.log('flexible', size, this.root.offsetHeight, scrollTop)
+    // if (scrollTop < this.size) {
+    //
+    var height = '64'
+    if (size < height) {
+      this.root.style.height = height + 'px'
+    } else {
+      height = this.size - scrollTop
+      if (height < 64) height = 64
+      this.root.style.height = height + 'px'
+    }
+
+    // console.log('scroll', this.root.style.top, scrollTop)
+
+    // if (scrollTop > 50) {
+    //   this.root.style.trans = scrollTop + 'px'
+    // } else {
+    //   this.root.style.top = scrollTop + 'px'
+    // }
+    // }
+      // this.root.style.top = scrollTop + 'px'
+      // this.root.style.height = this.size - scrollTop
+    // } else {
+    //   console.log('size scroll', this.size, scrollTop)
+
+    //   this.root.style.height = this.size - scrollTop + 'px'
+    //   // this.root.style.top = scrollTop + 'px'
+    // }
+  }
+
+  fixed (e, scrollTop) {
+    if (scrollTop > 0) {
+      this.root.style.transform = 'translateY(' + scrollTop + 'px)'
+    } else {
+      this.root.style.transform = 'translateY(' + scrollTop + 'px)'
+    }
+  }
+
+  waterfall$ (e) {}
 }
 
 export default Toolbar

src/tree.js

@@ -57,3 +57,3 @@ 'use strict'
     // assign modules
-    Object.assign(this, emitter, insert, bind)
+    Object.assign(this, emitter, insert, attach)
 
@@ -111,10 +111,30 @@ // init function
 
+    // console.log('buildTree', data);
+
     var tree = ''
 
-    function checkChildren (parentObj) {
-      var level = (parentObj.path.split('/').length - 1)
 
-      if (level > 0) {
-        tree += '<li class="item-tree" data-path="' + parentObj.path + '">' + parentObj.name
+    function checkChildren (parentObj, level) {
+      if (level) {
+        level++
+      } else {
+        level = 0
       }
+
+
+      level++;
+
+      // console.log('-- ', level, parentObj);
+      if (parentObj.path) { 
+        var level = (parentObj.path.split('/').length - 1)
+
+        if (level > 0) {
+          tree += '<li class="item-tree" data-path="' + parentObj.path + '">' + parentObj.name
+        }
+      } else {
+        if (level > 1) {
+          tree += '<li class="item-tree" data-id="'+parentObj._id+'">' + parentObj.name 
+        }
+      }
+
       if (parentObj.children && parentObj.children.length > 0) {
@@ -125,3 +145,3 @@ tree += '<ul>'
 
-          checkChildren(children)
+          checkChildren(children, level)
         }
@@ -136,4 +156,8 @@ tree += '</ul>'
 
+
+
     checkChildren(data)
 
+    // console.log('html tree', tree);
+
     this.root.innerHTML = tree
@@ -145,3 +169,3 @@
   getOptions () {
-    console.log(this.options)
+    // console.log(this.options)
   }
@@ -155,5 +179,5 @@
   onSelect (e) {
-    console.log('click', e.target, this.options.target)
+    // console.log('click', e.target, this.options.target)
     if (e.target && e.target.matches(this.options.target)) {
-      console.log('item clicked: ', e.target)
+      // console.log('item clicked: ', e.target)
 
@@ -180,3 +204,3 @@ css.remove(this.item, 'is-selected')
   select (item, event) {
-    console.log('select', item, event)
+    // console.log('select', item, event)
     this.item = item
@@ -198,3 +222,3 @@
       default:
-        this.setTree(value, options)
+        this.setTree(prop)
     }
@@ -233,3 +257,3 @@
   empty () {
-    console.log('empty')
+    // console.log('empty')
     this.root.innerHTML = ''
@@ -236,0 +260,0 @@ this.items = []

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

599701

increased by48.74%

Number of package files

135

increased by14.41%

Lines of code

9778

increased by49.37%

Number of lines in readme file

5

increased by66.67%

No dependency changes