1&&c){let p=x(c).parents(".page");p.length&&l.each(f=>{let u=x(f);u.parents(p)[0]===p[0]&&(l=u)})}if(l.length>1&&(l=l.eq(l.length-1)),!l.length)return;let d=l[0].f7Modal;if(!d){let p=l.dataset();d=new t(r,{el:l,...p})}return d.open(s)},close(n,s,c){n===void 0&&(n=e);let l=x(n);if(!l.length)return;if(l.length>1){let p;if(c){let f=x(c);f.length&&(p=f.parents(l))}p&&p.length>0?l=p:l=l.eq(l.length-1)}let d=l[0].f7Modal;if(!d){let p=l.dataset();d=new t(r,{el:l,...p})}return d.close(s)}})}var go=[];function jd(a){let e=this,t=Q(),r=ae();return new Promise((o,n)=>{let s=e.instance,c,l,d;if(!a){n(new Error("Framework7: Lazy module must be specified"));return}function p(f){e.use(f),s&&(s.useModuleParams(f,s.params),s.useModule(f))}if(typeof a=="string"){let f=a.match(/([a-z0-9-]*)/i);if(a.indexOf(".")<0&&f&&f[0].length===a.length){if(!s||s&&!s.params.lazyModulesPath){n(new Error('Framework7: "lazyModulesPath" app parameter must be specified to fetch module by name'));return}c=`${s.params.lazyModulesPath}/${a}/${a}.lazy.js`}else c=a}else typeof a=="function"?d=a:l=a;if(d){let f=d(e,!1);if(!f){n(new Error("Framework7: Can't find Framework7 component in specified component function"));return}if(e.prototype.modules&&e.prototype.modules[f.name]){o();return}p(f),o()}if(l){let f=l;if(!f){n(new Error("Framework7: Can't find Framework7 component in specified component"));return}if(e.prototype.modules&&e.prototype.modules[f.name]){o();return}p(f),o()}if(c){if(go.indexOf(c)>=0){o();return}go.push(c);let f=new Promise((h,m)=>{fetch(c).then(g=>g.text()).then(g=>{let w=`f7_component_loader_callback_${at()}`,b=r.createElement("script");b.innerHTML=`window.${w} = function (Framework7, Framework7AutoInstallComponent) {return ${g.trim()}}`,x("head").append(b);let k=t[w];delete t[w],x(b).remove();let y=k(e,!1);if(!y){m(new Error(`Framework7: Can't find Framework7 component in ${c} file`));return}if(e.prototype.modules&&e.prototype.modules[y.name]){h();return}p(y),h()}).catch(g=>{m(g)})}),u=new Promise(h=>{fetch(c.replace(".lazy.js",s.rtl?".rtl.css":".css").replace(".js",s.rtl?".rtl.css":".css")).then(m=>m.text()).then(m=>{let g=r.createElement("style");g.innerHTML=m,x("head").append(g),h()}).catch(()=>{h()})});Promise.all([f,u]).then(()=>{o()}).catch(h=>{n(h)})}})}var bo=jd;var Xd=function(a,e){let t=e||{};for(var r=arguments.length,o=new Array(r>2?r-2:0),n=2;n 1&&c){let p=x(c).parents(".page");p.length&&l.each(f=>{let u=x(f);u.parents(p)[0]===p[0]&&(l=u)})}if(l.length>1&&(l=l.eq(l.length-1)),!l.length)return;let d=l[0].f7Modal;if(!d){let p=l.dataset();d=new t(r,{el:l,...p})}return d.open(s)},close(n,s,c){n===void 0&&(n=e);let l=x(n);if(!l.length)return;if(l.length>1){let p;if(c){let f=x(c);f.length&&(p=f.parents(l))}p&&p.length>0?l=p:l=l.eq(l.length-1)}let d=l[0].f7Modal;if(!d){let p=l.dataset();d=new t(r,{el:l,...p})}return d.close(s)}})}var go=[];function jd(a){let e=this,t=Q(),r=ae();return new Promise((o,n)=>{let s=e.instance,c,l,d;if(!a){n(new Error("Framework7: Lazy module must be specified"));return}function p(f){e.use(f),s&&(s.useModuleParams(f,s.params),s.useModule(f))}if(typeof a=="string"){let f=a.match(/([a-z0-9-]*)/i);if(a.indexOf(".")<0&&f&&f[0].length===a.length){if(!s||s&&!s.params.lazyModulesPath){n(new Error('Framework7: "lazyModulesPath" app parameter must be specified to fetch module by name'));return}c=`${s.params.lazyModulesPath}/${a}/${a}.lazy.js`}else c=a}else typeof a=="function"?d=a:l=a;if(d){let f=d(e,!1);if(!f){n(new Error("Framework7: Can't find Framework7 component in specified component function"));return}if(e.prototype.modules&&e.prototype.modules[f.name]){o();return}p(f),o()}if(l){let f=l;if(!f){n(new Error("Framework7: Can't find Framework7 component in specified component"));return}if(e.prototype.modules&&e.prototype.modules[f.name]){o();return}p(f),o()}if(c){if(go.indexOf(c)>=0){o();return}go.push(c);let f=new Promise((h,m)=>{fetch(c).then(g=>g.text()).then(g=>{let w=`f7_component_loader_callback_${at()}`,b=r.createElement("script");b.innerHTML=`window.${w} = function (Framework7, Framework7AutoInstallComponent) {return ${g.trim()}}`,x("head").append(b);let k=t[w];delete t[w],x(b).remove();let y=k(e,!1);if(!y){m(new Error(`Framework7: Can't find Framework7 component in ${c} file`));return}if(e.prototype.modules&&e.prototype.modules[y.name]){h();return}p(y),h()}).catch(g=>{m(g)})}),u=new Promise(h=>{fetch(c.replace(".lazy.js",s.rtl?".rtl.css":".css").replace(".js",s.rtl?".rtl.css":".css")).then(m=>m.text()).then(m=>{let g=r.createElement("style");g.innerHTML=m,x("head").append(g),h()}).catch(()=>{h()})});Promise.all([f,u]).then(()=>{o()}).catch(h=>{n(h)})}})}var bo=jd;var Xd=function(a,e){let t=e||{};for(var r=arguments.length,o=new Array(r>2?r-2:0),n=2;n 0&&R.setAttribute("class",y.slice(P+1).replace(/\./g," ")),w=0;w{typeof t>"u"?r.eventsListeners[o]=[]:r.eventsListeners[o]&&r.eventsListeners[o].forEach((n,s)=>{(n===t||n.f7proxy&&n.f7proxy===t)&&r.eventsListeners[o].splice(s,1)})}),r}emit(){let e=this;if(!e.eventsListeners)return e;let t,r,o,n;for(var s=arguments.length,c=new Array(s),l=0;lu.replace("local::","")),f=d.filter(u=>u.indexOf("local::")<0);return p.forEach(u=>{if(e.eventsListeners&&e.eventsListeners[u]){let h=[];e.eventsListeners[u].forEach(m=>{h.push(m)}),h.forEach(m=>{m.apply(o,r)})}}),n&&n.length>0&&n.forEach(u=>{u.emit(f,...r)}),e}},Br=$a;var Sa=class extends Br{constructor(e,t){e===void 0&&(e={}),t===void 0&&(t=[]),super(t);let r=this;r.params=e,r.params&&r.params.on&&Object.keys(r.params.on).forEach(o=>{r.on(o,r.params.on[o])})}useModuleParams(e,t){if(e.params){let r={};Object.keys(e.params).forEach(o=>{typeof t[o]>"u"||(r[o]=D({},t[o]))}),D(t,e.params),Object.keys(r).forEach(o=>{D(t[o],r[o])})}}useModulesParams(e){let t=this;t.modules&&Object.keys(t.modules).forEach(r=>{let o=t.modules[r];o.params&&D(e,o.params)})}useModule(e,t){e===void 0&&(e=""),t===void 0&&(t={});let r=this;if(!r.modules)return;let o=typeof e=="string"?r.modules[e]:e;o&&(o.instance&&Object.keys(o.instance).forEach(n=>{let s=o.instance[n];typeof s=="function"?r[n]=s.bind(r):r[n]=s}),o.on&&r.on&&Object.keys(o.on).forEach(n=>{r.on(n,o.on[n])}),o.vnode&&(r.vnodeHooks||(r.vnodeHooks={}),Object.keys(o.vnode).forEach(n=>{Object.keys(o.vnode[n]).forEach(s=>{let c=o.vnode[n][s];r.vnodeHooks[s]||(r.vnodeHooks[s]={}),r.vnodeHooks[s][n]||(r.vnodeHooks[s][n]=[]),r.vnodeHooks[s][n].push(c.bind(r))})})),o.create&&o.create.bind(r)(t))}useModules(e){e===void 0&&(e={});let t=this;t.modules&&Object.keys(t.modules).forEach(r=>{let o=e[r]||{};t.useModule(r,o)})}static set components(e){let t=this;t.use&&t.use(e)}static installModule(e){let t=this;t.prototype.modules||(t.prototype.modules={});let r=e.name||`${Object.keys(t.prototype.modules).length}_${Ie()}`;if(t.prototype.modules[r]=e,e.proto&&Object.keys(e.proto).forEach(c=>{t.prototype[c]=e.proto[c]}),e.static&&Object.keys(e.static).forEach(c=>{t[c]=e.static[c]}),e.install){for(var o=arguments.length,n=new Array(o>1?o-1:0),s=1;s\n const ul = vl.params.ul;\n vl.$ul = ul ? $(vl.params.ul) : vl.$el.children('ul');\n if (vl.$ul.length === 0 && vl.params.createUl) {\n vl.$el.append('
');\n vl.$ul = vl.$el.children('ul');\n }\n vl.ul = vl.$ul[0];\n let $itemsWrapEl;\n if (!vl.ul && !vl.params.createUl) $itemsWrapEl = vl.$el;else $itemsWrapEl = vl.$ul;\n extend(vl, {\n $itemsWrapEl,\n itemsWrapEl: $itemsWrapEl[0],\n // DOM cached items\n domCache: {},\n // Temporary DOM Element\n tempDomElement: document.createElement('ul'),\n // Last repain position\n lastRepaintY: null,\n // Fragment\n fragment: document.createDocumentFragment(),\n // Props\n pageHeight: undefined,\n rowsPerScreen: undefined,\n rowsBefore: undefined,\n rowsAfter: undefined,\n rowsToRender: undefined,\n maxBufferHeight: 0,\n listHeight: undefined,\n dynamicHeight: typeof vl.params.height === 'function',\n autoHeight: vl.params.height === 'auto'\n });\n\n // Install Modules\n vl.useModules();\n\n // Attach events\n const handleScrollBound = vl.handleScroll.bind(vl);\n const handleResizeBound = vl.handleResize.bind(vl);\n let $pageEl;\n let $tabEl;\n let $panelEl;\n let $popupEl;\n vl.attachEvents = function attachEvents() {\n $pageEl = vl.$el.parents('.page').eq(0);\n $tabEl = vl.$el.parents('.tab').filter(tabEl => {\n return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, swiper-container.tabs').length === 0;\n }).eq(0);\n $panelEl = vl.$el.parents('.panel').eq(0);\n $popupEl = vl.$el.parents('.popup').eq(0);\n vl.$scrollableParentEl.on('scroll', handleScrollBound);\n if ($pageEl.length) $pageEl.on('page:reinit', handleResizeBound);\n if ($tabEl.length) $tabEl.on('tab:show', handleResizeBound);\n if ($panelEl.length) $panelEl.on('panel:open', handleResizeBound);\n if ($popupEl.length) $popupEl.on('popup:open', handleResizeBound);\n app.on('resize', handleResizeBound);\n };\n vl.detachEvents = function attachEvents() {\n vl.$scrollableParentEl.off('scroll', handleScrollBound);\n if ($pageEl.length) $pageEl.off('page:reinit', handleResizeBound);\n if ($tabEl.length) $tabEl.off('tab:show', handleResizeBound);\n if ($panelEl.length) $panelEl.off('panel:open', handleResizeBound);\n if ($popupEl.length) $popupEl.off('popup:open', handleResizeBound);\n app.off('resize', handleResizeBound);\n };\n // Init\n vl.init();\n return vl;\n }\n setListSize(autoHeightRerender) {\n const vl = this;\n const items = vl.filteredItems || vl.items;\n if (!autoHeightRerender) {\n vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;\n }\n if (vl.dynamicHeight) {\n vl.listHeight = 0;\n vl.heights = [];\n for (let i = 0; i < items.length; i += 1) {\n const itemHeight = vl.params.height(items[i]);\n vl.listHeight += itemHeight;\n vl.heights.push(itemHeight);\n }\n } else if (vl.autoHeight) {\n vl.listHeight = 0;\n if (!vl.heights) vl.heights = [];\n if (!vl.heightsCalculated) vl.heightsCalculated = [];\n const renderedItems = {};\n vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach(el => {\n renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;\n });\n for (let i = 0; i < items.length; i += 1) {\n const itemIndex = vl.items.indexOf(items[i]);\n const renderedItem = renderedItems[itemIndex];\n if (renderedItem) {\n if (!vl.heightsCalculated.includes(itemIndex)) {\n vl.heights[itemIndex] = renderedItem.offsetHeight;\n vl.heightsCalculated.push(itemIndex);\n }\n }\n if (typeof vl.heights[i] === 'undefined') {\n vl.heights[itemIndex] = 40;\n }\n vl.listHeight += vl.heights[itemIndex];\n }\n } else {\n vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;\n vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);\n vl.rowsBefore = vl.params.rowsBefore || vl.rowsPerScreen * 2;\n vl.rowsAfter = vl.params.rowsAfter || vl.rowsPerScreen;\n vl.rowsToRender = vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter;\n vl.maxBufferHeight = vl.rowsBefore / 2 * vl.params.height;\n }\n if (vl.updatableScroll || vl.params.setListHeight) {\n vl.$itemsWrapEl.css({\n height: `${vl.listHeight}px`\n });\n }\n }\n render(force, forceScrollTop) {\n const vl = this;\n if (force) vl.lastRepaintY = null;\n let scrollTop = -(vl.$el[0].getBoundingClientRect().top - vl.$scrollableParentEl[0].getBoundingClientRect().top);\n if (typeof forceScrollTop !== 'undefined') scrollTop = forceScrollTop;\n if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > vl.maxBufferHeight || !vl.updatableScroll && vl.$scrollableParentEl[0].scrollTop + vl.pageHeight >= vl.$scrollableParentEl[0].scrollHeight) {\n vl.lastRepaintY = scrollTop;\n } else {\n return;\n }\n const items = vl.filteredItems || vl.items;\n let fromIndex;\n let toIndex;\n let heightBeforeFirstItem = 0;\n let heightBeforeLastItem = 0;\n if (vl.dynamicHeight || vl.autoHeight) {\n let itemTop = 0;\n let itemHeight;\n vl.maxBufferHeight = vl.pageHeight;\n for (let j = 0; j < vl.heights.length; j += 1) {\n itemHeight = vl.heights[j];\n if (typeof fromIndex === 'undefined') {\n if (itemTop + itemHeight >= scrollTop - vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize) fromIndex = j;else heightBeforeFirstItem += itemHeight;\n }\n if (typeof toIndex === 'undefined') {\n if (itemTop + itemHeight >= scrollTop + vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize || j === vl.heights.length - 1) toIndex = j + 1;\n heightBeforeLastItem += itemHeight;\n }\n itemTop += itemHeight;\n }\n toIndex = Math.min(toIndex, items.length);\n } else {\n fromIndex = (parseInt(scrollTop / vl.params.height, 10) - vl.rowsBefore) * vl.params.cols;\n if (fromIndex < 0) {\n fromIndex = 0;\n }\n toIndex = Math.min(fromIndex + vl.rowsToRender * vl.params.cols, items.length);\n }\n let topPosition;\n const renderExternalItems = [];\n vl.reachEnd = false;\n let i;\n for (i = fromIndex; i < toIndex; i += 1) {\n let itemEl;\n // Define real item index\n const index = vl.items.indexOf(items[i]);\n if (i === fromIndex) vl.currentFromIndex = index;\n if (i === toIndex - 1) vl.currentToIndex = index;\n if (vl.filteredItems) {\n if (vl.items[index] === vl.filteredItems[vl.filteredItems.length - 1]) vl.reachEnd = true;\n } else if (index === vl.items.length - 1) vl.reachEnd = true;\n\n // Find items\n if (vl.params.renderExternal) {\n renderExternalItems.push(items[i]);\n } else if (vl.domCache[index]) {\n itemEl = vl.domCache[index];\n itemEl.f7VirtualListIndex = index;\n } else {\n if (vl.renderItem) {\n vl.tempDomElement.innerHTML = vl.renderItem(items[i], index).trim();\n } else {\n vl.tempDomElement.innerHTML = items[i].toString().trim();\n }\n itemEl = vl.tempDomElement.childNodes[0];\n if (vl.params.cache) vl.domCache[index] = itemEl;\n itemEl.f7VirtualListIndex = index;\n }\n\n // Set item top position\n if (i === fromIndex) {\n if (vl.dynamicHeight || vl.autoHeight) {\n topPosition = heightBeforeFirstItem;\n } else {\n topPosition = i * vl.params.height / vl.params.cols;\n }\n }\n if (!vl.params.renderExternal) {\n itemEl.style.top = `${topPosition}px`;\n\n // Before item insert\n vl.emit('local::itemBeforeInsert vlItemBeforeInsert', vl, itemEl, items[i]);\n\n // Append item to fragment\n vl.fragment.appendChild(itemEl);\n }\n }\n\n // Update list height with not updatable scroll\n if (!vl.updatableScroll) {\n if (vl.dynamicHeight || vl.autoHeight) {\n vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;\n } else {\n vl.itemsWrapEl.style.height = `${i * vl.params.height / vl.params.cols}px`;\n }\n }\n\n // Update list html\n if (vl.params.renderExternal) {\n if (items && items.length === 0) {\n vl.reachEnd = true;\n }\n } else {\n vl.emit('local::beforeClear vlBeforeClear', vl, vl.fragment);\n vl.itemsWrapEl.innerHTML = '';\n vl.emit('local::itemsBeforeInsert vlItemsBeforeInsert', vl, vl.fragment);\n if (items && items.length === 0) {\n vl.reachEnd = true;\n if (vl.params.emptyTemplate) vl.itemsWrapEl.innerHTML = vl.params.emptyTemplate;\n } else {\n vl.itemsWrapEl.appendChild(vl.fragment);\n }\n vl.emit('local::itemsAfterInsert vlItemsAfterInsert', vl, vl.fragment);\n }\n if (typeof forceScrollTop !== 'undefined' && force) {\n vl.$scrollableParentEl.scrollTop(forceScrollTop, 0);\n }\n if (vl.params.renderExternal) {\n vl.params.renderExternal(vl, {\n fromIndex,\n toIndex,\n listHeight: vl.listHeight,\n topPosition,\n items: renderExternalItems\n });\n }\n if (vl.autoHeight) {\n requestAnimationFrame(() => {\n vl.setListSize(true);\n });\n }\n }\n\n // Filter\n filterItems(indexes, resetScrollTop) {\n if (resetScrollTop === void 0) {\n resetScrollTop = true;\n }\n const vl = this;\n vl.filteredItems = [];\n for (let i = 0; i < indexes.length; i += 1) {\n vl.filteredItems.push(vl.items[indexes[i]]);\n }\n if (resetScrollTop) {\n vl.$scrollableParentEl[0].scrollTop = 0;\n }\n vl.update();\n }\n resetFilter() {\n const vl = this;\n if (vl.params.showFilteredItemsOnly) {\n vl.filteredItems = [];\n } else {\n vl.filteredItems = null;\n delete vl.filteredItems;\n }\n vl.update();\n }\n scrollToItem(index) {\n const vl = this;\n if (index > vl.items.length) return false;\n let itemTop = 0;\n if (vl.dynamicHeight || vl.autoHeight) {\n for (let i = 0; i < index; i += 1) {\n itemTop += vl.heights[i];\n }\n } else {\n itemTop = index * vl.params.height;\n }\n const listTop = vl.$el[0].offsetTop;\n vl.render(true, listTop + itemTop - parseInt(vl.$scrollableParentEl.css('padding-top'), 10));\n return true;\n }\n handleScroll() {\n const vl = this;\n vl.render();\n }\n\n // Handle resize event\n isVisible() {\n const vl = this;\n return !!(vl.el.offsetWidth || vl.el.offsetHeight || vl.el.getClientRects().length);\n }\n handleResize() {\n const vl = this;\n if (vl.isVisible()) {\n vl.heightsCalculated = [];\n vl.setListSize();\n vl.render(true);\n }\n }\n\n // Append\n appendItems(items) {\n const vl = this;\n for (let i = 0; i < items.length; i += 1) {\n vl.items.push(items[i]);\n }\n vl.update();\n }\n appendItem(item) {\n const vl = this;\n vl.appendItems([item]);\n }\n\n // Replace\n replaceAllItems(items) {\n const vl = this;\n vl.items = items;\n delete vl.filteredItems;\n vl.domCache = {};\n vl.update();\n }\n replaceItem(index, item) {\n const vl = this;\n vl.items[index] = item;\n if (vl.params.cache) delete vl.domCache[index];\n vl.update();\n }\n\n // Prepend\n prependItems(items) {\n const vl = this;\n for (let i = items.length - 1; i >= 0; i -= 1) {\n vl.items.unshift(items[i]);\n }\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n newCache[parseInt(cached, 10) + items.length] = vl.domCache[cached];\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n prependItem(item) {\n const vl = this;\n vl.prependItems([item]);\n }\n\n // Move\n moveItem(from, to) {\n const vl = this;\n const fromIndex = from;\n let toIndex = to;\n if (fromIndex === toIndex) return;\n // remove item from array\n const item = vl.items.splice(fromIndex, 1)[0];\n if (toIndex >= vl.items.length) {\n // Add item to the end\n vl.items.push(item);\n toIndex = vl.items.length - 1;\n } else {\n // Add item to new index\n vl.items.splice(toIndex, 0, item);\n }\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n const leftIndex = fromIndex < toIndex ? fromIndex : toIndex;\n const rightIndex = fromIndex < toIndex ? toIndex : fromIndex;\n const indexShift = fromIndex < toIndex ? -1 : 1;\n if (cachedIndex < leftIndex || cachedIndex > rightIndex) newCache[cachedIndex] = vl.domCache[cachedIndex];\n if (cachedIndex === leftIndex) newCache[rightIndex] = vl.domCache[cachedIndex];\n if (cachedIndex > leftIndex && cachedIndex <= rightIndex) newCache[cachedIndex + indexShift] = vl.domCache[cachedIndex];\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n\n // Insert before\n insertItemBefore(index, item) {\n const vl = this;\n if (index === 0) {\n vl.prependItem(item);\n return;\n }\n if (index >= vl.items.length) {\n vl.appendItem(item);\n return;\n }\n vl.items.splice(index, 0, item);\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n if (cachedIndex >= index) {\n newCache[cachedIndex + 1] = vl.domCache[cachedIndex];\n }\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n\n // Delete\n deleteItems(indexes) {\n const vl = this;\n let prevIndex;\n let indexShift = 0;\n for (let i = 0; i < indexes.length; i += 1) {\n let index = indexes[i];\n if (typeof prevIndex !== 'undefined') {\n if (index > prevIndex) {\n indexShift = -i;\n }\n }\n index += indexShift;\n prevIndex = indexes[i];\n // Delete item\n const deletedItem = vl.items.splice(index, 1)[0];\n\n // Delete from filtered\n if (vl.filteredItems && vl.filteredItems.indexOf(deletedItem) >= 0) {\n vl.filteredItems.splice(vl.filteredItems.indexOf(deletedItem), 1);\n }\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n if (cachedIndex === index) {\n delete vl.domCache[index];\n } else if (parseInt(cached, 10) > index) {\n newCache[cachedIndex - 1] = vl.domCache[cached];\n } else {\n newCache[cachedIndex] = vl.domCache[cached];\n }\n });\n vl.domCache = newCache;\n }\n }\n vl.update();\n }\n deleteAllItems() {\n const vl = this;\n vl.items = [];\n delete vl.filteredItems;\n if (vl.params.cache) vl.domCache = {};\n vl.update();\n }\n deleteItem(index) {\n const vl = this;\n vl.deleteItems([index]);\n }\n\n // Clear cache\n clearCache() {\n const vl = this;\n vl.domCache = {};\n }\n\n // Update Virtual List\n update(deleteCache) {\n const vl = this;\n if (deleteCache && vl.params.cache) {\n vl.domCache = {};\n }\n vl.heightsCalculated = [];\n vl.setListSize();\n vl.render(true);\n }\n init() {\n const vl = this;\n vl.attachEvents();\n vl.setListSize();\n vl.render();\n }\n destroy() {\n let vl = this;\n vl.detachEvents();\n vl.$el[0].f7VirtualList = null;\n delete vl.$el[0].f7VirtualList;\n deleteProps(vl);\n vl = null;\n }\n}\nexport default VirtualList;", "import VirtualList from './virtual-list-class.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nexport default {\n name: 'virtualList',\n static: {\n VirtualList\n },\n create() {\n const app = this;\n app.virtualList = ConstructorMethods({\n defaultSelector: '.virtual-list',\n constructor: VirtualList,\n app,\n domProp: 'f7VirtualList'\n });\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass ListIndex extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n super(params, [app]);\n const index = this;\n const defaults = {\n el: null,\n // where to render indexes\n listEl: null,\n // list el to generate indexes\n indexes: 'auto',\n // or array of indexes\n iosItemHeight: 14,\n mdItemHeight: 14,\n scrollList: true,\n label: false,\n // eslint-disable-next-line\n renderItem(itemContent, itemIndex) {\n return `\n
');\n $el.append($ul);\n }\n if (index.params.listEl) {\n $listEl = $(index.params.listEl);\n }\n if (index.params.indexes === 'auto' && !$listEl) {\n return index;\n }\n if ($listEl) {\n $pageContentEl = $listEl.parents('.page-content').eq(0);\n } else {\n $pageContentEl = $el.siblings('.page-content').eq(0);\n if ($pageContentEl.length === 0) {\n $pageContentEl = $el.parents('.page').eq(0).find('.page-content').eq(0);\n }\n }\n $el[0].f7ListIndex = index;\n extend(index, {\n app,\n $el,\n el: $el && $el[0],\n $ul,\n ul: $ul && $ul[0],\n $listEl,\n listEl: $listEl && $listEl[0],\n $pageContentEl,\n pageContentEl: $pageContentEl && $pageContentEl[0],\n indexes: params.indexes,\n height: 0,\n skipRate: 0\n });\n\n // Install Modules\n index.useModules();\n\n // Attach events\n function handleResize() {\n const height = {\n index\n };\n index.calcSize();\n if (height !== index.height) {\n index.render();\n }\n }\n function handleClick(e) {\n const $clickedLi = $(e.target).closest('li');\n if (!$clickedLi.length) return;\n let itemIndex = $clickedLi.index();\n if (index.skipRate > 0) {\n const percentage = itemIndex / ($clickedLi.siblings('li').length - 1);\n itemIndex = Math.round((index.indexes.length - 1) * percentage);\n }\n const itemContent = index.indexes[itemIndex];\n index.$el.trigger('listindex:click', {\n content: itemContent,\n index: itemIndex\n });\n index.emit('local::click listIndexClick', index, itemContent, itemIndex);\n index.$el.trigger('listindex:select', {\n content: itemContent,\n index: itemIndex\n });\n index.emit('local::select listIndexSelect', index, itemContent, itemIndex);\n if (index.$listEl && index.params.scrollList) {\n index.scrollListToIndex(itemContent, itemIndex);\n }\n }\n const touchesStart = {};\n let isTouched;\n let isMoved;\n let topPoint;\n let bottomPoint;\n let $labelEl;\n let previousIndex = null;\n function handleTouchStart(e) {\n const $children = $ul.children();\n if (!$children.length) return;\n topPoint = $children[0].getBoundingClientRect().top;\n bottomPoint = $children[$children.length - 1].getBoundingClientRect().top + $children[0].offsetHeight;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n isTouched = true;\n isMoved = false;\n previousIndex = null;\n }\n function handleTouchMove(e) {\n if (!isTouched) return;\n if (!isMoved && index.params.label) {\n $labelEl = $('');\n $el.append($labelEl);\n }\n isMoved = true;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n e.preventDefault();\n let percentage = (pageY - topPoint) / (bottomPoint - topPoint);\n percentage = Math.min(Math.max(percentage, 0), 1);\n const itemIndex = Math.round((index.indexes.length - 1) * percentage);\n const itemContent = index.indexes[itemIndex];\n const ulHeight = bottomPoint - topPoint;\n const bubbleBottom = (index.height - ulHeight) / 2 + (1 - percentage) * ulHeight;\n if (itemIndex !== previousIndex) {\n if (index.params.label) {\n $labelEl.html(itemContent).transform(`translateY(-${bubbleBottom}px)`);\n }\n if (index.$listEl && index.params.scrollList) {\n index.scrollListToIndex(itemContent, itemIndex);\n }\n }\n previousIndex = itemIndex;\n index.$el.trigger('listindex:select');\n index.emit('local::select listIndexSelect', index, itemContent, itemIndex);\n }\n function handleTouchEnd() {\n if (!isTouched) return;\n isTouched = false;\n isMoved = false;\n if (index.params.label) {\n if ($labelEl) $labelEl.remove();\n $labelEl = undefined;\n }\n }\n const passiveListener = getSupport().passiveListener ? {\n passive: true\n } : false;\n index.attachEvents = function attachEvents() {\n $el.parents('.tab').on('tab:show', handleResize);\n $el.parents('.page').on('page:reinit', handleResize);\n $el.parents('.panel').on('panel:open', handleResize);\n $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').on('modal:open', handleResize);\n app.on('resize', handleResize);\n $el.on('click', handleClick);\n $el.on(app.touchEvents.start, handleTouchStart, passiveListener);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n };\n index.detachEvents = function attachEvents() {\n $el.parents('.tab').off('tab:show', handleResize);\n $el.parents('.page').off('page:reinit', handleResize);\n $el.parents('.panel').off('panel:open', handleResize);\n $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').off('modal:open', handleResize);\n app.off('resize', handleResize);\n $el.off('click', handleClick);\n $el.off(app.touchEvents.start, handleTouchStart, passiveListener);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n };\n // Init\n index.init();\n return index;\n }\n // eslint-disable-next-line\n scrollListToIndex(itemContent, itemIndex) {\n const index = this;\n const {\n $listEl,\n $pageContentEl,\n app\n } = index;\n if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;\n let $scrollToEl;\n $listEl.find('.list-group-title').each(el => {\n if ($scrollToEl) return;\n const $el = $(el);\n if ($el.text() === itemContent) {\n $scrollToEl = $el;\n }\n });\n if (!$scrollToEl || $scrollToEl.length === 0) return index;\n const parentTop = $scrollToEl.parent().offset().top;\n let paddingTop = parseInt($pageContentEl.css('padding-top'), 10);\n const scrollTop = $pageContentEl[0].scrollTop;\n const scrollToElTop = $scrollToEl.offset().top;\n if ($pageContentEl.parents('.page-with-navbar-large').length) {\n const navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0));\n const $titleLargeEl = $(navbarInnerEl).find('.title-large');\n if ($titleLargeEl.length) {\n paddingTop -= $titleLargeEl[0].offsetHeight || 0;\n }\n }\n if (parentTop <= paddingTop) {\n $pageContentEl.scrollTop(parentTop + scrollTop - paddingTop);\n } else {\n $pageContentEl.scrollTop(scrollToElTop + scrollTop - paddingTop);\n }\n return index;\n }\n renderSkipPlaceholder() {\n const index = this;\n return index.params.renderSkipPlaceholder.call(index);\n }\n renderItem(itemContent, itemIndex) {\n const index = this;\n return index.params.renderItem.call(index, itemContent, itemIndex);\n }\n render() {\n const index = this;\n const {\n $ul,\n indexes,\n skipRate\n } = index;\n let wasSkipped;\n const html = indexes.map((itemContent, itemIndex) => {\n if (itemIndex % skipRate !== 0 && skipRate > 0) {\n wasSkipped = true;\n return '';\n }\n let itemHtml = index.renderItem(itemContent, itemIndex);\n if (wasSkipped) {\n itemHtml = index.renderSkipPlaceholder() + itemHtml;\n }\n wasSkipped = false;\n return itemHtml;\n }).join('');\n $ul.html(html);\n return index;\n }\n calcSize() {\n const index = this;\n const {\n app,\n params,\n el,\n indexes\n } = index;\n const height = el.offsetHeight;\n const itemHeight = params[`${app.theme}ItemHeight`];\n const maxItems = Math.floor(height / itemHeight);\n const items = indexes.length;\n let skipRate = 0;\n if (items > maxItems) {\n skipRate = Math.ceil((items * 2 - 1) / maxItems);\n }\n index.height = height;\n index.skipRate = skipRate;\n return index;\n }\n calcIndexes() {\n const index = this;\n if (index.params.indexes === 'auto') {\n index.indexes = [];\n index.$listEl.find('.list-group-title').each(el => {\n const elContent = $(el).text();\n if (index.indexes.indexOf(elContent) < 0) {\n index.indexes.push(elContent);\n }\n });\n } else {\n index.indexes = index.params.indexes;\n }\n return index;\n }\n update() {\n const index = this;\n index.calcIndexes();\n index.calcSize();\n index.render();\n return index;\n }\n init() {\n const index = this;\n index.calcIndexes();\n index.calcSize();\n index.render();\n index.attachEvents();\n }\n destroy() {\n let index = this;\n index.$el.trigger('listindex:beforedestroy', index);\n index.emit('local::beforeDestroy listIndexBeforeDestroy');\n index.detachEvents();\n if (index.$el[0]) {\n index.$el[0].f7ListIndex = null;\n delete index.$el[0].f7ListIndex;\n }\n deleteProps(index);\n index = null;\n }\n}\nexport default ListIndex;", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nimport ListIndex from './list-index-class.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nexport default {\n name: 'listIndex',\n static: {\n ListIndex\n },\n create() {\n const app = this;\n app.listIndex = ConstructorMethods({\n defaultSelector: '.list-index',\n constructor: ListIndex,\n app,\n domProp: 'f7ListIndex'\n });\n },\n on: {\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.list-index-init').each(listIndexEl => {\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n });\n },\n tabBeforeRemove(tabEl) {\n $(tabEl).find('.list-index-init').each(listIndexEl => {\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.list-index-init').each(listIndexEl => {\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n });\n },\n pageBeforeRemove(page) {\n page.$el.find('.list-index-init').each(listIndexEl => {\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n });\n }\n },\n vnode: {\n 'list-index-init': {\n insert(vnode) {\n const app = this;\n const listIndexEl = vnode.elm;\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n },\n destroy(vnode) {\n const listIndexEl = vnode.elm;\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n }\n }\n }\n};", "export default {\n name: 'timeline'\n};", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nconst Tab = {\n show() {\n const app = this;\n let tabEl;\n let tabLinkEl;\n let animate;\n let tabRoute;\n let animatedInit;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n if (args.length === 1 && args[0] && args[0].constructor === Object) {\n tabEl = args[0].tabEl;\n tabLinkEl = args[0].tabLinkEl;\n animate = args[0].animate;\n tabRoute = args[0].tabRoute;\n animatedInit = args[0].animatedInit;\n } else {\n [tabEl, tabLinkEl, animate, tabRoute] = args;\n if (typeof args[1] === 'boolean') {\n [tabEl, animate, tabLinkEl, tabRoute] = args;\n if (args.length > 2 && tabLinkEl.constructor === Object) {\n [tabEl, animate, tabRoute, tabLinkEl] = args;\n }\n }\n }\n if (typeof animate === 'undefined') animate = true;\n const $newTabEl = $(tabEl);\n if (tabRoute && $newTabEl[0]) {\n $newTabEl[0].f7TabRoute = tabRoute;\n }\n if (!animatedInit && ($newTabEl.length === 0 || $newTabEl.hasClass('tab-active'))) {\n return {\n $newTabEl,\n newTabEl: $newTabEl[0]\n };\n }\n let $tabLinkEl;\n if (tabLinkEl) $tabLinkEl = $(tabLinkEl);\n const $tabsEl = $newTabEl.parent('.tabs');\n if ($tabsEl.length === 0) {\n return {\n $newTabEl,\n newTabEl: $newTabEl[0]\n };\n }\n\n // Release swipeouts in hidden tabs\n if (app.swipeout) app.swipeout.allowOpen = true;\n\n // Animated tabs\n const tabsChangedCallbacks = [];\n function onTabsChanged(callback) {\n tabsChangedCallbacks.push(callback);\n }\n function tabsChanged() {\n tabsChangedCallbacks.forEach(callback => {\n callback();\n });\n }\n let animated = false;\n if ($tabsEl.parent().hasClass('tabs-animated-wrap')) {\n $tabsEl.parent()[animate ? 'removeClass' : 'addClass']('not-animated');\n const transitionDuration = parseFloat($tabsEl.css('transition-duration').replace(',', '.'));\n if (animate && transitionDuration) {\n $tabsEl.transitionEnd(tabsChanged);\n animated = true;\n }\n const tabsTranslate = (app.rtl ? $newTabEl.index() : -$newTabEl.index()) * 100;\n $tabsEl.transform(`translate3d(${tabsTranslate}%,0,0)`);\n }\n\n // Swipeable tabs\n let swiper;\n if ($tabsEl[0].nodeName.toLowerCase() === 'swiper-container' && app.swiper) {\n swiper = $tabsEl[0].swiper;\n const newTabIndex = swiper.slides.indexOf($newTabEl[0]);\n if (swiper && swiper.activeIndex !== newTabIndex) {\n animated = true;\n swiper.once('slideChangeTransitionEnd', () => {\n tabsChanged();\n }).slideTo(newTabIndex, animate ? undefined : 0);\n } else if (swiper && swiper.animating) {\n animated = true;\n swiper.once('slideChangeTransitionEnd', () => {\n tabsChanged();\n });\n }\n }\n\n // Remove active class from old tabs\n const $oldTabEl = $tabsEl.children('.tab-active');\n $oldTabEl.removeClass('tab-active');\n if (!animatedInit && (!swiper || swiper && !swiper.animating || swiper && tabRoute)) {\n if ($oldTabEl.hasClass('view') && $oldTabEl.children('.page').length) {\n $oldTabEl.children('.page').each(pageEl => {\n $(pageEl).trigger('page:tabhide');\n app.emit('pageTabHide', pageEl);\n });\n }\n $oldTabEl.trigger('tab:hide');\n app.emit('tabHide', $oldTabEl[0]);\n }\n\n // Trigger 'show' event on new tab\n $newTabEl.addClass('tab-active');\n if (!animatedInit && (!swiper || swiper && !swiper.animating || swiper && tabRoute)) {\n if ($newTabEl.hasClass('view') && $newTabEl.children('.page').length) {\n $newTabEl.children('.page').each(pageEl => {\n $(pageEl).trigger('page:tabshow');\n app.emit('pageTabShow', pageEl);\n });\n }\n $newTabEl.trigger('tab:show');\n app.emit('tabShow', $newTabEl[0]);\n }\n\n // Find related link for new tab\n if (!$tabLinkEl) {\n // Search by id\n if (typeof tabEl === 'string') $tabLinkEl = $(`.tab-link[href=\"${tabEl}\"]`);else $tabLinkEl = $(`.tab-link[href=\"#${$newTabEl.attr('id')}\"]`);\n // Search by data-tab\n if (!$tabLinkEl || $tabLinkEl && $tabLinkEl.length === 0) {\n $('[data-tab]').each(el => {\n if ($newTabEl.is($(el).attr('data-tab'))) $tabLinkEl = $(el);\n });\n }\n if (tabRoute && (!$tabLinkEl || $tabLinkEl && $tabLinkEl.length === 0)) {\n $tabLinkEl = $(`[data-route-tab-id=\"${tabRoute.route.tab.id}\"]`);\n if ($tabLinkEl.length === 0) {\n $tabLinkEl = $(`.tab-link[href=\"${tabRoute.url}\"]`);\n }\n }\n if ($tabLinkEl.length > 1 && $newTabEl.parents('.page').length) {\n // eslint-disable-next-line\n $tabLinkEl = $tabLinkEl.filter(tabLinkElement => {\n return $(tabLinkElement).parents('.page')[0] === $newTabEl.parents('.page')[0];\n });\n if (app.theme === 'ios' && $tabLinkEl.length === 0 && tabRoute) {\n const $pageEl = $newTabEl.parents('.page');\n const $navbarEl = $(app.navbar.getElByPage($pageEl));\n $tabLinkEl = $navbarEl.find(`[data-route-tab-id=\"${tabRoute.route.tab.id}\"]`);\n if ($tabLinkEl.length === 0) {\n $tabLinkEl = $navbarEl.find(`.tab-link[href=\"${tabRoute.url}\"]`);\n }\n }\n }\n }\n if ($tabLinkEl.length > 0) {\n // Find related link for old tab\n let $oldTabLinkEl;\n if ($oldTabEl && $oldTabEl.length > 0) {\n // Search by id\n const oldTabId = $oldTabEl.attr('id');\n if (oldTabId) {\n $oldTabLinkEl = $(`.tab-link[href=\"#${oldTabId}\"]`);\n // Search by data-route-tab-id\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $oldTabLinkEl = $(`.tab-link[data-route-tab-id=\"${oldTabId}\"]`);\n }\n }\n // Search by data-tab\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $('[data-tab]').each(tabLinkElement => {\n if ($oldTabEl.is($(tabLinkElement).attr('data-tab'))) $oldTabLinkEl = $(tabLinkElement);\n });\n }\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active');\n }\n } else if (tabRoute) {\n $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active');\n }\n if ($oldTabLinkEl && $oldTabLinkEl.length > 1 && $oldTabEl && $oldTabEl.parents('.page').length) {\n // eslint-disable-next-line\n $oldTabLinkEl = $oldTabLinkEl.filter(tabLinkElement => {\n return $(tabLinkElement).parents('.page')[0] === $oldTabEl.parents('.page')[0];\n });\n }\n if ($oldTabLinkEl && $oldTabLinkEl.length > 0) $oldTabLinkEl.removeClass('tab-link-active');\n\n // Update links' classes\n if ($tabLinkEl && $tabLinkEl.length > 0) {\n $tabLinkEl.addClass('tab-link-active');\n // Material Highlight\n const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-icons');\n const hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');\n if (hasHighlight) {\n app.toolbar.setHighlight($tabbarEl);\n }\n }\n }\n return {\n $newTabEl,\n newTabEl: $newTabEl[0],\n $oldTabEl,\n oldTabEl: $oldTabEl[0],\n onTabsChanged,\n animated\n };\n }\n};\nexport default {\n name: 'tabs',\n create() {\n const app = this;\n extend(app, {\n tab: {\n show: Tab.show.bind(app)\n }\n });\n },\n on: {\n 'pageInit tabMounted': function onInit(pageOrTabEl) {\n const $el = $(pageOrTabEl.el || pageOrTabEl);\n const animatedTabEl = $el.find('.tabs-animated-wrap > .tabs > .tab-active')[0];\n if (!animatedTabEl) return;\n const app = this;\n app.tab.show({\n tabEl: animatedTabEl,\n animatedInit: true,\n animate: false\n });\n }\n },\n clicks: {\n '.tab-link': function tabLinkClick($clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n if ($clickedEl.attr('href') && $clickedEl.attr('href').indexOf('#') === 0 || $clickedEl.attr('data-tab')) {\n const app = this;\n app.tab.show({\n tabEl: data.tab || $clickedEl.attr('href'),\n tabLinkEl: $clickedEl,\n animate: data.animate\n });\n }\n }\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, now, nextFrame } from '../../shared/utils.js';\nfunction swipePanel(panel) {\n const app = panel.app;\n if (panel.swipeInitialized) {\n return;\n }\n extend(panel, {\n swipeable: true,\n swipeInitialized: true\n });\n const params = panel.params;\n const {\n $el,\n $backdropEl,\n side,\n effect\n } = panel;\n let otherPanel;\n let isTouched;\n let isGestureStarted;\n let isMoved;\n let isScrolling;\n let isInterrupted;\n const touchesStart = {};\n let touchStartTime;\n let touchesDiff;\n let translate;\n let backdropOpacity;\n let panelWidth;\n let direction;\n let $viewEl;\n let touchMoves = 0;\n function handleTouchStart(e) {\n if (!panel.swipeable || isGestureStarted) return;\n if (!app.panel.allowOpen || !params.swipe && !params.swipeOnlyClose || isTouched) return;\n if ($('.modal-in:not(.toast):not(.notification), .photo-browser-in').length > 0) return;\n otherPanel = app.panel.get(side === 'left' ? 'right' : 'left') || {};\n const otherPanelOpened = otherPanel.opened && otherPanel.$el && !otherPanel.$el.hasClass('panel-in-breakpoint');\n if (!panel.opened && otherPanelOpened) {\n return;\n }\n if (!params.swipeOnlyClose) {\n if (otherPanelOpened) return;\n }\n if (e.target && e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'range') return;\n if ($(e.target).closest('.range-slider, swiper-container.tabs, .calendar-months, .no-swipe-panel, .card-opened').length > 0) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n if (params.swipeOnlyClose && !panel.opened) {\n return;\n }\n if (params.swipeActiveArea && !panel.opened) {\n if (side === 'left') {\n if (touchesStart.x > params.swipeActiveArea) return;\n }\n if (side === 'right') {\n if (touchesStart.x < app.width - params.swipeActiveArea) return;\n }\n }\n touchMoves = 0;\n $viewEl = $(panel.getViewEl());\n isMoved = false;\n isTouched = true;\n isScrolling = undefined;\n isInterrupted = false;\n touchStartTime = now();\n direction = undefined;\n }\n function handleTouchMove(e) {\n if (!isTouched || isGestureStarted || isInterrupted) return;\n touchMoves += 1;\n if (touchMoves < 2) return;\n if (e.f7PreventSwipePanel || app.preventSwipePanelBySwipeBack || app.preventSwipePanel) {\n isTouched = false;\n return;\n }\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));\n }\n if (isScrolling) {\n isTouched = false;\n return;\n }\n if (!direction) {\n if (pageX > touchesStart.x) {\n direction = 'to-right';\n } else {\n direction = 'to-left';\n }\n if (params.swipeActiveArea > 0 && !panel.opened) {\n if (side === 'left' && touchesStart.x > params.swipeActiveArea) {\n isTouched = false;\n return;\n }\n if (side === 'right' && touchesStart.x < app.width - params.swipeActiveArea) {\n isTouched = false;\n return;\n }\n }\n if ($el.hasClass('panel-in-breakpoint')) {\n isTouched = false;\n return;\n }\n if (side === 'left' && direction === 'to-left' && !$el.hasClass('panel-in') || side === 'right' && direction === 'to-right' && !$el.hasClass('panel-in')) {\n isTouched = false;\n return;\n }\n }\n let threshold = panel.opened ? 0 : -params.swipeThreshold;\n if (side === 'right') threshold = -threshold;\n if (!isMoved) {\n if (!panel.opened) {\n panel.insertToRoot();\n $el.addClass('panel-in-swipe');\n if ($backdropEl) $backdropEl.css('visibility', 'visible');\n $el.trigger('panel:swipeopen');\n panel.emit('local::swipeOpen panelSwipeOpen', panel);\n }\n panelWidth = $el[0].offsetWidth;\n if (effect === 'reveal' && $el.hasClass('panel-in-collapsed')) {\n panelWidth -= parseFloat($viewEl.css(`margin-${side}`));\n }\n $el.transition(0);\n }\n isMoved = true;\n if (e.cancelable) {\n e.preventDefault();\n }\n touchesDiff = pageX - touchesStart.x + threshold;\n const startTranslate = effect === 'floating' ? 8 : 0;\n if (side === 'right') {\n if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n translate = touchesDiff + (panel.opened ? startTranslate : panelWidth);\n if (translate < 0 - startTranslate) translate = -startTranslate;\n if (translate > panelWidth) {\n translate = panelWidth;\n }\n } else {\n translate = touchesDiff - (panel.opened ? panelWidth : 0);\n if (translate > 0) translate = 0;\n if (translate < -panelWidth) {\n translate = -panelWidth;\n }\n }\n } else {\n translate = touchesDiff + (panel.opened ? panelWidth : startTranslate);\n if (translate < 0) translate = 0;\n if (translate > panelWidth + startTranslate) {\n translate = panelWidth + startTranslate;\n }\n }\n const noFollowProgress = Math.abs(translate / panelWidth);\n if (effect === 'reveal') {\n if (!params.swipeNoFollow) {\n $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);\n if ($backdropEl) $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);\n }\n $el.trigger('panel:swipe', Math.abs(translate / panelWidth));\n panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));\n } else {\n if (side === 'left') translate -= panelWidth;\n if (!params.swipeNoFollow) {\n backdropOpacity = 1 - Math.abs(translate / panelWidth);\n if ($backdropEl) {\n $backdropEl.transition(0);\n $backdropEl.css({\n opacity: backdropOpacity\n });\n }\n $el.transform(`translate3d(${translate}px,0,0)`).transition(0);\n if (effect === 'push') {\n const viewTranslate = side === 'left' ? translate + panelWidth : translate - panelWidth;\n $viewEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);\n if ($backdropEl) {\n $backdropEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);\n }\n }\n }\n $el.trigger('panel:swipe', Math.abs(translate / panelWidth));\n panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));\n }\n if (params.swipeNoFollow) {\n const stateChanged = panel.opened && noFollowProgress === 0 || !panel.opened && noFollowProgress === 1;\n if (stateChanged) {\n isInterrupted = true;\n // eslint-disable-next-line\n handleTouchEnd(e);\n }\n }\n }\n function handleTouchEnd(e) {\n if (!isTouched || !isMoved) {\n isTouched = false;\n isMoved = false;\n return;\n }\n const isGesture = e.type === 'gesturestart' || isGestureStarted;\n isTouched = false;\n isMoved = false;\n const timeDiff = new Date().getTime() - touchStartTime;\n let action;\n const startTranslate = effect === 'floating' ? side === 'left' ? 8 : -8 : 0;\n const edge = (translate === startTranslate || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;\n const threshold = params.swipeThreshold || 0;\n if (isGesture) {\n action = 'reset';\n } else if (!panel.opened) {\n if (Math.abs(touchesDiff) < threshold) {\n action = 'reset';\n } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n if (translate === 0 + startTranslate) {\n action = 'swap'; // open\n } else if (timeDiff < 300 && Math.abs(translate) > 0) {\n action = 'swap'; // open\n } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) {\n action = 'swap'; // open\n } else {\n action = 'reset'; // close\n }\n } else if (translate === 0) {\n action = 'reset';\n } else if (timeDiff < 300 && Math.abs(translate) > 0 || timeDiff >= 300 && Math.abs(translate) >= panelWidth / 2) {\n action = 'swap';\n } else {\n action = 'reset';\n }\n } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n if (translate === 0) {\n action = 'reset'; // open\n } else if (timeDiff < 300 && Math.abs(translate) > 0) {\n action = 'swap'; // open\n } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) {\n action = 'reset'; // open\n } else {\n action = 'swap'; // close\n }\n } else if (translate === -panelWidth) {\n action = 'reset';\n } else if (timeDiff < 300 && Math.abs(translate) >= 0 || timeDiff >= 300 && Math.abs(translate) <= panelWidth / 2) {\n if (side === 'left' && translate === panelWidth) action = 'reset';else action = 'swap';\n } else {\n action = 'reset';\n }\n if (action === 'swap') {\n if (panel.opened) {\n panel.close(!edge);\n } else {\n panel.open(!edge);\n }\n }\n let removePanelInClass = true;\n if (action === 'reset') {\n if (!panel.opened) {\n if (edge) {\n // edge position\n $el.removeClass('panel-in-swipe');\n } else {\n removePanelInClass = false;\n const target = effect === 'reveal' ? $viewEl : $el;\n panel.setStateClasses('before-closing');\n target.transitionEnd(() => {\n if ($el.hasClass('panel-in')) return;\n $el.removeClass('panel-in-swipe');\n panel.setStateClasses('after-closing');\n });\n }\n }\n }\n if (effect === 'reveal' || effect === 'push') {\n nextFrame(() => {\n $viewEl.transition('');\n $viewEl.transform('');\n });\n }\n if (removePanelInClass) {\n $el.removeClass('panel-in-swipe');\n }\n $el.transition('').transform('');\n if ($backdropEl) {\n $backdropEl.transform('').transition('').css({\n opacity: '',\n visibility: ''\n });\n }\n }\n function handleGestureStart(e) {\n isGestureStarted = true;\n handleTouchEnd(e);\n }\n function handleGestureEnd() {\n isGestureStarted = false;\n }\n\n // Add Events\n app.on('touchstart:passive', handleTouchStart);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n app.on('gesturestart', handleGestureStart);\n app.on('gestureend', handleGestureEnd);\n panel.on('panelDestroy', () => {\n app.off('touchstart:passive', handleTouchStart);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n app.off('gesturestart', handleGestureStart);\n app.off('gestureend', handleGestureEnd);\n });\n}\nexport default swipePanel;", "import $ from '../../shared/dom7.js';\nimport { extend, nextFrame } from '../../shared/utils.js';\nimport { getSupport } from '../../shared/get-support.js';\nfunction resizablePanel(panel) {\n const app = panel.app;\n const support = getSupport();\n if (panel.resizableInitialized) return;\n extend(panel, {\n resizable: true,\n resizableWidth: null,\n resizableInitialized: true\n });\n const $htmlEl = $('html');\n const {\n $el,\n $backdropEl,\n side,\n effect\n } = panel;\n if (!$el) return;\n let isTouched;\n let isMoved;\n const touchesStart = {};\n let touchesDiff;\n let panelWidth;\n let $viewEl;\n let panelMinWidth;\n let panelMaxWidth;\n let visibleByBreakpoint;\n const isPushingPanel = effect !== 'cover' && effect !== 'floating';\n function transformCSSWidth(v) {\n if (!v) return null;\n if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {\n return parseInt(v, 10) / 100 * app.width;\n }\n const newV = parseInt(v, 10);\n if (Number.isNaN(newV)) return null;\n return newV;\n }\n function isResizable() {\n return panel.resizable && $el.hasClass('panel-resizable');\n }\n function handleTouchStart(e) {\n if (!isResizable()) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n isMoved = false;\n isTouched = true;\n panelMinWidth = transformCSSWidth($el.css('min-width'));\n panelMaxWidth = transformCSSWidth($el.css('max-width'));\n visibleByBreakpoint = $el.hasClass('panel-in-breakpoint');\n }\n function handleTouchMove(e) {\n if (!isTouched) return;\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n if (!isMoved) {\n panelWidth = $el[0].offsetWidth;\n $el.transition(0);\n $el.addClass('panel-resizing');\n $htmlEl.css('cursor', 'col-resize');\n if (isPushingPanel || visibleByBreakpoint) {\n $viewEl = $(panel.getViewEl());\n if (panel.$containerEl && panel.$containerEl.hasClass('page')) {\n $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));\n }\n }\n if (isPushingPanel && !visibleByBreakpoint) {\n $backdropEl.transition(0);\n $viewEl.transition(0);\n }\n }\n isMoved = true;\n e.preventDefault();\n touchesDiff = pageX - touchesStart.x;\n let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;\n if (panelMinWidth && !Number.isNaN(panelMinWidth)) {\n newPanelWidth = Math.max(newPanelWidth, panelMinWidth);\n }\n if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) {\n newPanelWidth = Math.min(newPanelWidth, panelMaxWidth);\n }\n newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);\n panel.resizableWidth = newPanelWidth;\n $el[0].style.width = `${newPanelWidth}px`;\n if (isPushingPanel && !visibleByBreakpoint) {\n if ($viewEl) {\n $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);\n }\n if ($backdropEl) {\n $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);\n }\n } else if (visibleByBreakpoint && $viewEl) {\n $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);\n }\n $el.trigger('panel:resize', newPanelWidth);\n panel.emit('local::resize panelResize', panel, newPanelWidth);\n }\n function handleTouchEnd() {\n $('html').css('cursor', '');\n if (!isTouched || !isMoved) {\n isTouched = false;\n isMoved = false;\n return;\n }\n isTouched = false;\n isMoved = false;\n $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);\n $el[0].style.width = '';\n if (isPushingPanel && !visibleByBreakpoint) {\n $viewEl.transform('');\n $backdropEl.transform('');\n }\n $el.removeClass('panel-resizing');\n nextFrame(() => {\n $el.transition('');\n if (isPushingPanel) {\n $backdropEl.transition('');\n if ($viewEl) $viewEl.transition('');\n }\n });\n }\n function handleResize() {\n if (!panel.opened || !panel.resizableWidth) return;\n panelMinWidth = transformCSSWidth($el.css('min-width'));\n panelMaxWidth = transformCSSWidth($el.css('max-width'));\n if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) {\n panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth);\n }\n if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) {\n panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth);\n }\n panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);\n $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);\n }\n if (panel.$el.find('.panel-resize-handler').length === 0) {\n panel.$el.append('');\n }\n panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');\n $el.addClass('panel-resizable');\n\n // Add Events\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n app.on('resize', handleResize);\n panel.on('beforeOpen', handleResize);\n panel.once('panelDestroy', () => {\n $el.removeClass('panel-resizable');\n panel.$resizeHandlerEl.remove();\n panel.$el.off(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n app.off('resize', handleResize);\n panel.off('beforeOpen', handleResize);\n });\n}\nexport default resizablePanel;", "import { getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { extend, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport swipePanel from './swipe-panel.js';\nimport resizablePanel from './resizable-panel.js';\nclass Panel extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n const extendedParams = extend({\n on: {}\n }, app.params.panel, params);\n super(extendedParams, [app]);\n const panel = this;\n panel.params = extendedParams;\n panel.$containerEl = panel.params.containerEl ? $(panel.params.containerEl).eq(0) : app.$el;\n panel.containerEl = panel.$containerEl[0];\n if (!panel.containerEl) {\n panel.$containerEl = app.$el;\n panel.containerEl = app.$el[0];\n }\n let $el;\n if (panel.params.el) {\n $el = $(panel.params.el).eq(0);\n } else if (panel.params.content) {\n $el = $(panel.params.content).filter(node => node.nodeType === 1).eq(0);\n }\n if ($el.length === 0) return panel;\n if ($el[0].f7Panel) return $el[0].f7Panel;\n $el[0].f7Panel = panel;\n let {\n side,\n effect,\n resizable\n } = panel.params;\n if (typeof side === 'undefined') side = $el.hasClass('panel-left') ? 'left' : 'right';\n if (typeof effect === 'undefined')\n // eslint-disable-next-line\n effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : $el.hasClass('panel-floating') ? 'floating' : 'reveal';\n if (typeof resizable === 'undefined') resizable = $el.hasClass('panel-resizable');\n let $backdropEl;\n if (panel.params.backdrop && panel.params.backdropEl) {\n $backdropEl = $(panel.params.backdropEl);\n } else if (panel.params.backdrop) {\n $backdropEl = panel.$containerEl.children('.panel-backdrop');\n if ($backdropEl.length === 0) {\n $backdropEl = $('');\n panel.$containerEl.prepend($backdropEl);\n }\n }\n extend(panel, {\n app,\n side,\n effect,\n resizable,\n $el,\n el: $el[0],\n opened: false,\n $backdropEl,\n backdropEl: $backdropEl && $backdropEl[0]\n });\n\n // Install Modules\n panel.useModules();\n\n // Init\n panel.init();\n return panel;\n }\n getViewEl() {\n const panel = this;\n let viewEl;\n if (panel.$containerEl.children('.views').length > 0) {\n viewEl = panel.$containerEl.children('.views')[0];\n } else {\n viewEl = panel.$containerEl.children('.view')[0];\n }\n return viewEl;\n }\n setStateClasses(state) {\n const panel = this;\n const {\n side,\n el,\n effect\n } = panel;\n const viewEl = panel.getViewEl();\n const panelInView = viewEl && viewEl.contains(el);\n const $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');\n if (state === 'open') {\n $targetEl.addClass(`with-panel with-panel-${panel.side}-${panel.effect}`);\n }\n if (state === 'before-closing') {\n $targetEl.addClass('with-panel-closing');\n }\n if (state === 'closing') {\n $targetEl.addClass('with-panel-closing');\n $targetEl.removeClass(`with-panel with-panel-${panel.side}-${panel.effect}`);\n }\n if (state === 'after-closing') {\n $targetEl.removeClass('with-panel-closing');\n }\n if (state === 'closed') {\n $targetEl.removeClass(`with-panel-${side}-${effect}`);\n }\n }\n enableVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = false;\n panel.setVisibleBreakpoint();\n return panel;\n }\n disableVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = true;\n panel.setVisibleBreakpoint();\n return panel;\n }\n toggleVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = !panel.visibleBreakpointDisabled;\n panel.setVisibleBreakpoint();\n return panel;\n }\n setVisibleBreakpoint(emitEvents) {\n if (emitEvents === void 0) {\n emitEvents = true;\n }\n const panel = this;\n const app = panel.app;\n if (!panel.visibleBreakpointResizeHandler) {\n panel.visibleBreakpointResizeHandler = function visibleBreakpointResizeHandler() {\n panel.setVisibleBreakpoint();\n };\n app.on('resize', panel.visibleBreakpointResizeHandler);\n }\n const {\n side,\n $el,\n $containerEl,\n params,\n visibleBreakpointDisabled\n } = panel;\n const breakpoint = params.visibleBreakpoint;\n const $viewEl = $(panel.getViewEl());\n const wasVisible = $el.hasClass('panel-in-breakpoint');\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs, .fab'));\n }\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !visibleBreakpointDisabled) {\n if (!wasVisible) {\n panel.setStateClasses('closed');\n $el.addClass('panel-in-breakpoint').removeClass('panel-in panel-in-collapsed');\n panel.onOpen(false);\n panel.onOpened();\n $viewEl.css({\n [`margin-${side}`]: `${$el.width()}px`\n });\n app.allowPanelOpen = true;\n if (emitEvents) {\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n } else {\n $viewEl.css({\n [`margin-${side}`]: `${$el.width()}px`\n });\n }\n } else if (wasVisible) {\n $el.removeClass('panel-in-breakpoint panel-in');\n panel.onClose();\n panel.onClosed();\n $viewEl.css({\n [`margin-${side}`]: ''\n });\n if (emitEvents) {\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n }\n }\n enableCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = false;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n disableCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = true;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n toggleCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = !panel.collapsedBreakpointDisabled;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n setCollapsedBreakpoint(emitEvents) {\n if (emitEvents === void 0) {\n emitEvents = true;\n }\n const panel = this;\n const app = panel.app;\n if (!panel.collapsedBreakpointResizeHandler) {\n panel.collapsedBreakpointResizeHandler = function collapsedBreakpointResizeHandler() {\n panel.setCollapsedBreakpoint();\n };\n app.on('resize', panel.collapsedBreakpointResizeHandler);\n }\n const {\n $el,\n params,\n collapsedBreakpointDisabled\n } = panel;\n if ($el.hasClass('panel-in-breakpoint')) return;\n const breakpoint = params.collapsedBreakpoint;\n const wasVisible = $el.hasClass('panel-in-collapsed');\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !collapsedBreakpointDisabled) {\n if (!wasVisible) {\n panel.setStateClasses('closed');\n $el.addClass('panel-in-collapsed').removeClass('panel-in');\n panel.collapsed = true;\n app.allowPanelOpen = true;\n if (emitEvents) {\n panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);\n panel.$el.trigger('panel:collapsedbreakpoint');\n }\n }\n } else if (wasVisible) {\n $el.removeClass('panel-in-collapsed panel-in');\n panel.collapsed = false;\n if (emitEvents) {\n panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);\n panel.$el.trigger('panel:collapsedbreakpoint');\n }\n }\n }\n enableResizable() {\n const panel = this;\n if (panel.resizableInitialized) {\n panel.resizable = true;\n panel.$el.addClass('panel-resizable');\n } else {\n resizablePanel(panel);\n }\n return panel;\n }\n disableResizable() {\n const panel = this;\n panel.resizable = false;\n panel.$el.removeClass('panel-resizable');\n return panel;\n }\n enableSwipe() {\n const panel = this;\n if (panel.swipeInitialized) {\n panel.swipeable = true;\n } else {\n swipePanel(panel);\n }\n return panel;\n }\n disableSwipe() {\n const panel = this;\n panel.swipeable = false;\n return panel;\n }\n onOpen(modifyHtmlClasses) {\n if (modifyHtmlClasses === void 0) {\n modifyHtmlClasses = true;\n }\n const panel = this;\n // eslint-disable-next-line\n panel._openTransitionStarted = false;\n const app = panel.app;\n panel.opened = true;\n app.panel.allowOpen = false;\n panel.$el.trigger('panel:beforeopen');\n panel.emit('local::beforeOpen panelBeforeOpen', panel);\n if (modifyHtmlClasses) {\n panel.setStateClasses('open');\n }\n panel.$el.trigger('panel:open');\n panel.emit('local::open panelOpen', panel);\n }\n onOpened() {\n const panel = this;\n const app = panel.app;\n app.panel.allowOpen = true;\n panel.$el.trigger('panel:opened');\n panel.emit('local::opened panelOpened', panel);\n }\n onClose() {\n const panel = this;\n const app = panel.app;\n panel.opened = false;\n app.panel.allowOpen = false;\n panel.$el.trigger('panel:beforeclose');\n panel.emit('local::beforeClose panelBeforeClose', panel);\n panel.setStateClasses('closing');\n panel.$el.trigger('panel:close');\n panel.emit('local::close panelClose', panel);\n }\n onClosed() {\n const panel = this;\n const app = panel.app;\n app.panel.allowOpen = true;\n panel.setStateClasses('after-closing');\n panel.$el.removeClass('panel-out');\n if (panel.$backdropEl) {\n const otherPanel = app.panel.get('.panel-in');\n const shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;\n if (shouldHideBackdrop) {\n panel.$backdropEl.removeClass('panel-backdrop-in');\n }\n }\n panel.$el.trigger('panel:closed');\n panel.emit('local::closed panelClosed', panel);\n }\n toggle(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const breakpoint = panel.params.visibleBreakpoint;\n const app = panel.app;\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null) {\n return panel.toggleVisibleBreakpoint();\n }\n if (panel.opened) panel.close(animate);else panel.open(animate);\n return panel;\n }\n insertToRoot() {\n const panel = this;\n const document = getDocument();\n const {\n $el,\n $backdropEl,\n $containerEl\n } = panel;\n const $panelParentEl = $el.parent();\n const wasInDom = $el.parents(document).length > 0;\n if (!$panelParentEl.is($containerEl) || $el.prevAll('.views, .view').length) {\n const $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);\n const $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);\n if ($insertBeforeEl.length) {\n $el.insertBefore($insertBeforeEl);\n } else if ($insertAfterEl) {\n $el.insertBefore($insertAfterEl);\n } else {\n $containerEl.prepend($el);\n }\n if ($backdropEl && $backdropEl.length && (!$backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0 || $backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0)) {\n $backdropEl.insertBefore($el);\n }\n panel.once('panelClosed', () => {\n if (wasInDom) {\n $panelParentEl.append($el);\n } else {\n $el.remove();\n }\n });\n }\n }\n open(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const app = panel.app;\n if (!app.panel.allowOpen) return false;\n const {\n effect,\n $el,\n $backdropEl,\n opened,\n $containerEl\n } = panel;\n if (!$el || $el.hasClass('panel-in')) {\n return panel;\n }\n panel.insertToRoot();\n\n // Ignore if opened\n if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false;\n\n // Close if some panel is opened\n const otherOpenedPanel = app.panel.get('.panel-in');\n if (otherOpenedPanel && otherOpenedPanel !== panel) {\n otherOpenedPanel.close(animate);\n }\n $el[animate ? 'removeClass' : 'addClass']('not-animated');\n $el.addClass('panel-in');\n if ($backdropEl) {\n $backdropEl.addClass('panel-backdrop-in');\n $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');\n }\n if (['cover', 'push', 'floating'].includes(panel.effect)) {\n /* eslint no-underscore-dangle: [\"error\", { \"allow\": [\"_clientLeft\"] }] */\n panel._clientLeft = $el[0].clientLeft;\n }\n\n // Transitionend\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;\n function panelTransitionStart() {\n transitionEndTarget.transitionStart(() => {\n // eslint-disable-next-line\n panel._openTransitionStarted = true;\n });\n }\n function panelTransitionEnd() {\n transitionEndTarget.transitionEnd(e => {\n if ($(e.target).is(transitionEndTarget)) {\n if ($el.hasClass('panel-out')) {\n panel.onClosed();\n } else {\n panel.onOpened();\n }\n } else panelTransitionEnd();\n });\n }\n if (animate) {\n if ($backdropEl) {\n $backdropEl.removeClass('not-animated');\n }\n panelTransitionStart();\n panelTransitionEnd();\n $el.removeClass('panel-out not-animated').addClass('panel-in');\n panel.onOpen();\n } else {\n if ($backdropEl) {\n $backdropEl.addClass('not-animated');\n }\n $el.removeClass('panel-out').addClass('panel-in not-animated');\n panel.onOpen();\n panel.onOpened();\n // eslint-disable-next-line\n panel._openTransitionStarted = true;\n }\n return true;\n }\n close(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const {\n effect,\n $el,\n $backdropEl,\n opened,\n $containerEl\n } = panel;\n if (!opened || $el.hasClass('panel-in-breakpoint') || !$el.hasClass('panel-in')) return panel;\n $el[animate ? 'removeClass' : 'addClass']('not-animated');\n if ($backdropEl) {\n $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');\n }\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;\n // eslint-disable-next-line\n if (!panel._openTransitionStarted) {\n // eslint-disable-next-line\n animate = false;\n }\n function transitionEnd() {\n if ($el.hasClass('panel-out')) {\n panel.onClosed();\n } else if ($el.hasClass('panel-in')) {\n panel.onOpened();\n }\n panel.setStateClasses('after-closing');\n }\n if (animate) {\n transitionEndTarget.transitionEnd(() => {\n transitionEnd();\n });\n $el.removeClass('panel-in').addClass('panel-out');\n // Emit close\n panel.onClose();\n } else {\n $el.addClass('not-animated').removeClass('panel-in').addClass('panel-out');\n // Emit close\n panel.onClose();\n panel.onClosed();\n }\n return panel;\n }\n init() {\n const panel = this;\n // const app = panel.app;\n if (typeof panel.params.visibleBreakpoint !== 'undefined') {\n panel.setVisibleBreakpoint();\n }\n if (typeof panel.params.collapsedBreakpoint !== 'undefined') {\n panel.setCollapsedBreakpoint();\n }\n if (panel.params.swipe) {\n panel.enableSwipe();\n }\n if (panel.resizable) {\n panel.enableResizable();\n }\n }\n destroy() {\n let panel = this;\n const app = panel.app;\n const {\n $containerEl\n } = panel;\n if (!panel.$el) {\n // Panel already destroyed\n return;\n }\n panel.emit('local::beforeDestroy panelBeforeDestroy', panel);\n panel.$el.trigger('panel:beforedestroy');\n if (panel.visibleBreakpointResizeHandler) {\n app.off('resize', panel.visibleBreakpointResizeHandler);\n }\n if (panel.collapsedBreakpointResizeHandler) {\n app.off('resize', panel.collapsedBreakpointResizeHandler);\n }\n if (panel.$el.hasClass('panel-in-breakpoint') || panel.$el.hasClass('panel-in-collapsed')) {\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n panel.$el.removeClass('panel-in-breakpoint panel-in-collapsed panel-in');\n $viewEl.css({\n [`margin-${panel.side}`]: ''\n });\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n panel.$el.trigger('panel:destroy');\n panel.emit('local::destroy panelDestroy', panel);\n if (panel.el) {\n panel.el.f7Panel = null;\n delete panel.el.f7Panel;\n }\n deleteProps(panel);\n panel = null;\n }\n}\nexport default Panel;", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nimport Panel from './panel-class.js';\nexport default {\n name: 'panel',\n params: {\n panel: {\n opened: undefined,\n // default based on panel-in class\n side: undefined,\n // default based on panel class\n effect: undefined,\n // default based on panel class\n resizable: undefined,\n // default based on panel-resizable class\n backdrop: true,\n backdropEl: undefined,\n visibleBreakpoint: undefined,\n collapsedBreakpoint: undefined,\n swipe: false,\n // or true\n swipeNoFollow: false,\n // or true\n swipeOnlyClose: false,\n swipeActiveArea: 0,\n swipeThreshold: 0,\n closeByBackdropClick: true,\n containerEl: undefined\n }\n },\n static: {\n Panel\n },\n create() {\n const app = this;\n extend(app, {\n panel: {\n allowOpen: true,\n create(params) {\n return new Panel(app, params);\n },\n get(el) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el instanceof Panel) return el;\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n const $el = $(el);\n if ($el.length === 0 || $el.length > 1) return undefined;\n return $el[0].f7Panel;\n },\n destroy(el) {\n if (el === void 0) {\n el = '.panel';\n }\n const panel = app.panel.get(el);\n if (panel && panel.destroy) return panel.destroy();\n return undefined;\n },\n open(el, animate) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.open) return panel.open(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.open(animate);\n }\n return undefined;\n },\n close(el, animate) {\n if (el === void 0) {\n el = '.panel-in';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.open) return panel.close(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.close(animate);\n }\n return undefined;\n },\n toggle(el, animate) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.toggle) return panel.toggle(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.toggle(animate);\n }\n return undefined;\n }\n }\n });\n },\n on: {\n init() {\n const app = this;\n $('.panel-init').each(panelEl => {\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.panel-init').each(panelEl => {\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n });\n },\n pageBeforeRemove(page) {\n const app = this;\n page.$el.find('.panel-init').each(panelEl => {\n const panel = app.panel.get(panelEl);\n if (panel && panel.destroy) panel.destroy();\n });\n }\n },\n vnode: {\n 'panel-init': {\n insert(vnode) {\n const app = this;\n const panelEl = vnode.elm;\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n },\n destroy(vnode) {\n const app = this;\n const panelEl = vnode.elm;\n const panel = app.panel.get(panelEl);\n if (panel && panel.destroy) panel.destroy();\n }\n }\n },\n clicks: {\n '.panel-open': function open(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.open(data.panel, data.animate);\n },\n '.panel-close': function close(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.close(data.panel, data.animate);\n },\n '.panel-toggle': function close(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.toggle(data.panel, data.animate);\n },\n '.panel-backdrop': function close() {\n const app = this;\n const $panelEl = $('.panel-in:not(.panel-out)');\n if (!$panelEl.length) return;\n const instance = $panelEl[0] && $panelEl[0].f7Panel;\n $panelEl.trigger('panel:backdrop-click');\n if (instance) {\n instance.emit('backdropClick', instance);\n }\n app.emit('panelBackdropClick', instance || $panelEl[0]);\n if (instance && instance.params.closeByBackdropClick === false) return;\n if (app.params.panel.closeByBackdropClick) app.panel.close();\n }\n }\n};", "/* eslint no-param-reassign: \"off\" */\nimport { getDocument } from 'ssr-window';\nimport { bindMethods } from '../../shared/utils.js';\nimport { getSupport } from '../../shared/get-support.js';\nimport { getDevice } from '../../shared/get-device.js';\nimport $ from '../../shared/dom7.js';\nconst CardExpandable = {\n open(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable';\n }\n if (animate === void 0) {\n animate = true;\n }\n const app = this;\n const device = getDevice();\n const document = getDocument();\n const support = getSupport();\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl || !$cardEl.length) return;\n if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;\n const $pageEl = $cardEl.parents('.page').eq(0);\n if (!$pageEl.length) return;\n if ($pageEl.find('.card-opened').length) {\n return;\n }\n let prevented;\n function prevent() {\n prevented = true;\n }\n $cardEl.trigger('card:beforeopen', {\n prevent\n });\n app.emit('cardBeforeOpen', $cardEl[0], prevent);\n if (prevented) return;\n const cardParams = Object.assign({\n animate\n }, app.params.card, $cardEl.dataset());\n const $pageContentEl = $cardEl.parents('.page-content');\n let $backdropEl;\n if ($cardEl.attr('data-backdrop-el')) {\n $backdropEl = $($cardEl.attr('data-backdrop-el'));\n }\n if (!$backdropEl && cardParams.backdrop) {\n $backdropEl = $pageContentEl.find('.card-backdrop');\n if (!$backdropEl.length) {\n $backdropEl = $('');\n $pageContentEl.append($backdropEl);\n }\n }\n let $navbarEl;\n let $toolbarEl;\n if (cardParams.hideNavbarOnOpen) {\n $navbarEl = $pageEl.children('.navbar');\n if (!$navbarEl.length) {\n if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;\n }\n }\n if (cardParams.hideToolbarOnOpen) {\n $toolbarEl = $pageEl.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.views').children('.toolbar');\n }\n }\n const currTransform = $cardEl.css('transform');\n let hasTransform;\n if (currTransform && currTransform.match(/[2-9]/)) {\n hasTransform = true;\n }\n const $cardContentEl = $cardEl.children('.card-content');\n const $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size');\n $cardEl.append($cardSizeEl);\n let cardWidth = $cardEl[0].offsetWidth;\n let cardHeight = $cardEl[0].offsetHeight;\n let pageWidth = $pageEl[0].offsetWidth;\n let pageHeight = $pageEl[0].offsetHeight;\n let maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;\n let maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;\n let statusbarHeight;\n if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {\n statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);\n if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;\n }\n if (statusbarHeight) {\n maxHeight -= statusbarHeight;\n }\n let scaleX = maxWidth / cardWidth;\n let scaleY = maxHeight / cardHeight;\n let offset = $cardEl.offset();\n let pageOffset = $pageEl.offset();\n if (statusbarHeight) {\n pageOffset.top += statusbarHeight / 2;\n }\n offset.left -= pageOffset.left;\n let cardLeftOffset;\n let cardTopOffset;\n if (hasTransform) {\n const transformValues = currTransform.replace(/matrix\\(|\\)/g, '').split(',').map(el => el.trim());\n if (transformValues && transformValues.length > 1) {\n const scale = parseFloat(transformValues[0]);\n cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2;\n cardTopOffset = offset.top - pageOffset.top - cardHeight * (1 - scale) / 2;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n } else {\n cardLeftOffset = $cardEl[0].offsetLeft;\n cardTopOffset = $cardEl[0].offsetTop - ($pageContentEl.length ? $pageContentEl[0].scrollTop : 0);\n }\n } else {\n cardLeftOffset = offset.left;\n cardTopOffset = offset.top - pageOffset.top;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n }\n cardLeftOffset -= (pageWidth - maxWidth) / 2;\n cardTopOffset -= (pageHeight - maxHeight) / 2;\n let cardRightOffset = maxWidth - cardWidth - cardLeftOffset;\n if (app.rtl) {\n [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];\n }\n let cardBottomOffset = maxHeight - cardHeight - cardTopOffset;\n let translateX = (cardRightOffset - cardLeftOffset) / 2;\n let translateY = (cardBottomOffset - cardTopOffset) / 2;\n if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) {\n if ($navbarEl.closest('.navbar-hidden').length) {\n // Was hidden\n $cardEl[0].f7KeepNavbarOnClose = true;\n } else {\n delete $cardEl[0].f7KeepNavbarOnClose;\n app.navbar.hide($navbarEl, cardParams.animate, cardParams.hideStatusbarOnOpen, true);\n }\n }\n if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) {\n if ($toolbarEl.closest('.toolbar-hidden').length) {\n // Was hidden\n $cardEl[0].f7KeepToolbarOnClose = true;\n } else {\n delete $cardEl[0].f7KeepToolbarOnClose;\n app.toolbar.hide($toolbarEl, cardParams.animate);\n }\n }\n if ($backdropEl) {\n $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in');\n }\n $cardEl.removeClass('card-transitioning');\n if (cardParams.animate) {\n $cardEl.addClass('card-opening');\n }\n $cardEl.trigger('card:open');\n app.emit('cardOpen', $cardEl[0]);\n function transitionEnd() {\n $pageEl.addClass('page-with-card-opened');\n if (device.ios && $pageContentEl.length) {\n $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);\n setTimeout(() => {\n $pageContentEl.css('height', '');\n });\n }\n $cardEl.addClass('card-opened');\n $cardEl.removeClass('card-opening');\n $cardEl.trigger('card:opened');\n app.emit('cardOpened', $cardEl[0], $pageEl[0]);\n }\n $cardContentEl.css({\n width: `${maxWidth}px`,\n height: `${maxHeight}px`\n }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n if (cardParams.animate) {\n $cardEl.transitionEnd(() => {\n transitionEnd();\n });\n } else {\n transitionEnd();\n }\n function onResize() {\n $cardEl.removeClass('card-transitioning');\n cardWidth = $cardEl[0].offsetWidth;\n cardHeight = $cardEl[0].offsetHeight;\n pageWidth = $pageEl[0].offsetWidth;\n pageHeight = $pageEl[0].offsetHeight;\n maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;\n maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;\n statusbarHeight = 0;\n if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {\n statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);\n if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;\n }\n if (statusbarHeight) {\n maxHeight -= statusbarHeight;\n }\n scaleX = maxWidth / cardWidth;\n scaleY = maxHeight / cardHeight;\n $cardEl.transform('translate3d(0px, 0px, 0) scale(1)');\n offset = $cardEl.offset();\n pageOffset = $pageEl.offset();\n if (statusbarHeight) {\n pageOffset.top += statusbarHeight / 2;\n }\n offset.left -= pageOffset.left;\n offset.top -= pageOffset.top;\n cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n cardTopOffset = offset.top - (pageHeight - maxHeight) / 2;\n cardRightOffset = maxWidth - cardWidth - cardLeftOffset;\n cardBottomOffset = maxHeight - cardHeight - cardTopOffset;\n if (app.rtl) {\n [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];\n }\n translateX = (cardRightOffset - cardLeftOffset) / 2;\n translateY = (cardBottomOffset - cardTopOffset) / 2;\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n $cardContentEl.css({\n width: `${maxWidth}px`,\n height: `${maxHeight}px`\n }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);\n }\n let cardScrollTop;\n let isTouched;\n let isMoved;\n let touchStartX;\n let touchStartY;\n let touchEndX;\n let touchEndY;\n let isScrolling;\n let progress;\n let isV;\n let isH;\n let $cardScrollableEl;\n function onTouchStart(e) {\n if (!$(e.target).closest($cardEl).length || !e.isTrusted) return;\n if (!$cardEl.hasClass('card-opened')) return;\n $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);\n if ($cardScrollableEl[0] && $cardScrollableEl[0] !== $cardContentEl[0] && !$cardScrollableEl[0].contains(e.target)) {\n cardScrollTop = 0;\n } else {\n cardScrollTop = $cardScrollableEl.scrollTop();\n }\n isTouched = true;\n touchStartX = e.targetTouches[0].pageX;\n touchStartY = e.targetTouches[0].pageY;\n isScrolling = undefined;\n isV = false;\n isH = false;\n }\n function onTouchMove(e) {\n if (!isTouched || !e.isTrusted) return;\n touchEndX = e.targetTouches[0].pageX;\n touchEndY = e.targetTouches[0].pageY;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX));\n }\n if (!isH && !isV) {\n if (!isScrolling && e.targetTouches[0].clientX <= 50) {\n isH = true;\n } else {\n isV = true;\n }\n }\n if (!(isH || isV) || isV && cardScrollTop !== 0) {\n isTouched = true;\n isMoved = true;\n return;\n }\n if (!isMoved) {\n $cardEl.removeClass('card-transitioning');\n }\n isMoved = true;\n progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0);\n if (progress > 0 && isV || isH) {\n if (isV && device.ios && $cardScrollableEl[0] === $cardContentEl[0]) {\n $cardScrollableEl.css('-webkit-overflow-scrolling', 'auto');\n $cardScrollableEl.scrollTop(0);\n }\n e.preventDefault();\n }\n if (progress > 1) progress **= 0.3;\n if (progress > (isV ? 1.3 : 1.1)) {\n isTouched = false;\n isMoved = false;\n app.card.close($cardEl);\n } else {\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX * (1 - progress * 0.2)}, ${scaleY * (1 - progress * 0.2)})`);\n }\n }\n function onTouchEnd(e) {\n if (!isTouched || !isMoved || !e.isTrusted) return;\n isTouched = false;\n isMoved = false;\n if (device.ios) {\n $cardScrollableEl.css('-webkit-overflow-scrolling', '');\n }\n if (progress >= 0.8) {\n app.card.close($cardEl);\n } else {\n $cardEl.addClass('card-transitioning').transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n }\n }\n $cardEl[0].detachEventHandlers = function detachEventHandlers() {\n app.off('resize', onResize);\n if (support.touch && cardParams.swipeToClose) {\n app.off('touchstart:passive', onTouchStart);\n app.off('touchmove:active', onTouchMove);\n app.off('touchend:passive', onTouchEnd);\n }\n };\n app.on('resize', onResize);\n if (support.touch && cardParams.swipeToClose) {\n app.on('touchstart:passive', onTouchStart);\n app.on('touchmove:active', onTouchMove);\n app.on('touchend:passive', onTouchEnd);\n }\n },\n close(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable.card-opened';\n }\n if (animate === void 0) {\n animate = true;\n }\n const app = this;\n const device = getDevice();\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl || !$cardEl.length) return;\n if (!$cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;\n const $cardContentEl = $cardEl.children('.card-content');\n const $pageContentEl = $cardEl.parents('.page-content');\n const $pageEl = $cardEl.parents('.page').eq(0);\n if (!$pageEl.length) return;\n const cardParams = Object.assign({\n animate\n }, app.params.card, $cardEl.dataset());\n const $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);\n let $navbarEl;\n let $toolbarEl;\n let $backdropEl;\n if ($cardEl.attr('data-backdrop-el')) {\n $backdropEl = $($cardEl.attr('data-backdrop-el'));\n }\n if (cardParams.backdrop) {\n $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop');\n }\n if (cardParams.hideNavbarOnOpen) {\n $navbarEl = $pageEl.children('.navbar');\n if (!$navbarEl.length) {\n if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;\n }\n if ($navbarEl && $navbarEl.length && !$cardEl[0].f7KeepNavbarOnClose) {\n app.navbar.show($navbarEl, cardParams.animate, true);\n }\n }\n if (cardParams.hideToolbarOnOpen) {\n $toolbarEl = $pageEl.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.views').children('.toolbar');\n }\n if ($toolbarEl && $toolbarEl.length && !$cardEl[0].f7KeepToolbarOnClose) {\n app.toolbar.show($toolbarEl, cardParams.animate);\n }\n }\n $pageEl.removeClass('page-with-card-opened');\n if (device.ios && $pageContentEl.length) {\n $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);\n setTimeout(() => {\n $pageContentEl.css('height', '');\n });\n }\n if ($backdropEl && $backdropEl.length) {\n $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out');\n }\n $cardEl.removeClass('card-opened card-transitioning');\n if (cardParams.animate) {\n $cardEl.addClass('card-closing');\n } else {\n $cardEl.addClass('card-no-transition');\n }\n $cardEl.transform('');\n $cardEl.trigger('card:close');\n app.emit('cardClose', $cardEl[0], $pageEl[0]);\n const animateWidth = $cardEl.hasClass('card-expandable-animate-width');\n function transitionEnd() {\n if (!animateWidth) {\n $cardContentEl.css({\n width: '',\n height: ''\n });\n }\n if ($backdropEl && $backdropEl.length) {\n $backdropEl.removeClass('card-backdrop-in card-backdrop-out');\n }\n $cardEl.removeClass('card-closing card-no-transition');\n $cardEl.trigger('card:closed');\n $cardEl.find('.card-expandable-size').remove();\n app.emit('cardClosed', $cardEl[0], $pageEl[0]);\n }\n if (animateWidth) {\n $cardContentEl.css({\n width: '',\n height: ''\n });\n }\n $cardContentEl.transform('').scrollTop(0, animate ? 300 : 0);\n if ($cardScrollableEl.length && $cardScrollableEl[0] !== $cardContentEl[0]) {\n $cardScrollableEl.scrollTop(0, animate ? 300 : 0);\n }\n if (animate) {\n $cardContentEl.transitionEnd(() => {\n transitionEnd();\n });\n } else {\n transitionEnd();\n }\n if ($cardEl[0].detachEventHandlers) {\n $cardEl[0].detachEventHandlers();\n delete $cardEl[0].detachEventHandlers;\n }\n },\n toggle(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable';\n }\n const app = this;\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl.length) return;\n if ($cardEl.hasClass('card-opened')) {\n app.card.close($cardEl, animate);\n } else {\n app.card.open($cardEl, animate);\n }\n }\n};\nexport default {\n name: 'card',\n params: {\n card: {\n hideNavbarOnOpen: true,\n hideStatusbarOnOpen: true,\n hideToolbarOnOpen: true,\n scrollableEl: '.card-content',\n swipeToClose: true,\n closeByBackdropClick: true,\n backdrop: true\n }\n },\n create() {\n const app = this;\n bindMethods(app, {\n card: CardExpandable\n });\n },\n on: {\n pageBeforeIn(page) {\n const app = this;\n if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) {\n app.navbar.hide(page.navbarEl, true, app.params.card.hideStatusbarOnOpen, true);\n }\n if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) {\n let $toolbarEl = page.$el.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = page.$el.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = page.$el.parents('.views').children('.toolbar');\n }\n if ($toolbarEl && $toolbarEl.length) {\n app.toolbar.hide($toolbarEl);\n }\n }\n }\n },\n clicks: {\n '.card-close': function closeCard($clickedEl, data) {\n const app = this;\n app.card.close(data.card, data.animate);\n },\n '.card-open': function closeCard($clickedEl, data) {\n const app = this;\n app.card.open(data.card, data.animate);\n },\n '.card-expandable': function toggleExpandableCard($clickedEl, data, e) {\n const app = this;\n if ($clickedEl.hasClass('card-opened') || $clickedEl.hasClass('card-opening') || $clickedEl.hasClass('card-closing')) return;\n if ($(e.target).closest('.card-prevent-open, .card-close').length) return;\n app.card.open($clickedEl);\n },\n '.card-backdrop-in': function onBackdropClick() {\n const app = this;\n let needToClose = false;\n if (app.params.card.closeByBackdropClick) needToClose = true;\n const $openedCardEl = $('.card-opened');\n if (!$openedCardEl.length) return;\n if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') {\n needToClose = true;\n } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') {\n needToClose = false;\n }\n if (needToClose) app.card.close($openedCardEl);\n }\n }\n};", "export default {\n name: 'chip'\n};", "import { getWindow, getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { extend, serializeObject } from '../../shared/utils.js';\n\n// Form Data\nconst FormData = {\n store(form, data) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n // Store form data in app.formsData\n app.form.data[`form-${formId}`] = data;\n\n // Store form data in local storage also\n window.localStorage[`f7form-${formId}`] = JSON.stringify(data);\n },\n get(form) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n if (window.localStorage[`f7form-${formId}`]) {\n return JSON.parse(window.localStorage[`f7form-${formId}`]);\n }\n if (app.form.data[`form-${formId}`]) {\n return app.form.data[`form-${formId}`];\n }\n return undefined;\n },\n remove(form) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n\n // Delete form data from app.formsData\n if (app.form.data[`form-${formId}`]) {\n app.form.data[`form-${formId}`] = '';\n delete app.form.data[`form-${formId}`];\n }\n\n // Delete form data from local storage also\n if (window.localStorage[`f7form-${formId}`]) {\n window.localStorage[`f7form-${formId}`] = '';\n window.localStorage.removeItem(`f7form-${formId}`);\n }\n }\n};\n\n// Form Storage\nconst FormStorage = {\n init(formEl) {\n const app = this;\n const $formEl = $(formEl);\n const formId = $formEl.attr('id');\n if (!formId) return;\n const initialData = app.form.getFormData(formId);\n if (initialData) {\n app.form.fillFromData($formEl, initialData);\n }\n function store() {\n const data = app.form.convertToData($formEl);\n if (!data) return;\n app.form.storeFormData(formId, data);\n $formEl.trigger('form:storedata', data);\n app.emit('formStoreData', $formEl[0], data);\n }\n $formEl.on('change submit', store);\n },\n destroy(formEl) {\n const $formEl = $(formEl);\n $formEl.off('change submit');\n }\n};\n\n// Form To/From Data\nfunction formToData(formEl) {\n const app = this;\n const $formEl = $(formEl).eq(0);\n if ($formEl.length === 0) return undefined;\n\n // Form data\n const data = {};\n\n // Skip input types\n const skipTypes = ['submit', 'image', 'button', 'file'];\n const skipNames = [];\n $formEl.find('input, select, textarea').each(inputEl => {\n const $inputEl = $(inputEl);\n if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {\n return;\n }\n const name = $inputEl.attr('name');\n const type = $inputEl.attr('type');\n const tag = inputEl.nodeName.toLowerCase();\n if (skipTypes.indexOf(type) >= 0) return;\n if (skipNames.indexOf(name) >= 0 || !name) return;\n if (tag === 'select' && $inputEl.prop('multiple')) {\n skipNames.push(name);\n data[name] = [];\n $formEl.find(`select[name=\"${name}\"] option`).each(el => {\n if (el.selected) data[name].push(el.value);\n });\n } else {\n switch (type) {\n case 'checkbox':\n skipNames.push(name);\n data[name] = [];\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n if (el.checked) data[name].push(el.value);\n });\n break;\n case 'radio':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n if (el.checked) data[name] = el.value;\n });\n break;\n default:\n data[name] = $inputEl.val();\n break;\n }\n }\n });\n $formEl.trigger('form:todata', data);\n app.emit('formToData', $formEl[0], data);\n return data;\n}\nfunction formFromData(formEl, formData) {\n const app = this;\n const $formEl = $(formEl).eq(0);\n if (!$formEl.length) return;\n let data = formData;\n const formId = $formEl.attr('id');\n if (!data && formId) {\n data = app.form.getFormData(formId);\n }\n if (!data) return;\n\n // Skip input types\n const skipTypes = ['submit', 'image', 'button', 'file'];\n const skipNames = [];\n $formEl.find('input, select, textarea').each(inputEl => {\n const $inputEl = $(inputEl);\n if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {\n return;\n }\n const name = $inputEl.attr('name');\n const type = $inputEl.attr('type');\n const tag = inputEl.nodeName.toLowerCase();\n if (typeof data[name] === 'undefined' || data[name] === null) return;\n if (skipTypes.indexOf(type) >= 0) return;\n if (skipNames.indexOf(name) >= 0 || !name) return;\n if (tag === 'select' && $inputEl.prop('multiple')) {\n skipNames.push(name);\n $formEl.find(`select[name=\"${name}\"] option`).each(el => {\n const selectEl = el;\n if (data[name].indexOf(el.value) >= 0) selectEl.selected = true;else selectEl.selected = false;\n });\n } else {\n switch (type) {\n case 'checkbox':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n const checkboxEl = el;\n if (data[name].indexOf(el.value) >= 0) checkboxEl.checked = true;else checkboxEl.checked = false;\n });\n break;\n case 'radio':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n const radioEl = el;\n if (data[name] === el.value) radioEl.checked = true;else radioEl.checked = false;\n });\n break;\n default:\n $inputEl.val(data[name]);\n break;\n }\n }\n if (tag === 'select' || tag === 'input' || tag === 'textarea') {\n $inputEl.trigger('change', 'fromdata');\n }\n });\n $formEl.trigger('form:fromdata', data);\n app.emit('formFromData', $formEl[0], data);\n}\nfunction initAjaxForm() {\n const app = this;\n const window = getWindow();\n const document = getDocument();\n function onSubmitChange(e, fromData) {\n const $formEl = $(this);\n if (e.type === 'change' && !$formEl.hasClass('form-ajax-submit-onchange')) return;\n if (e.type === 'submit') e.preventDefault();\n if (e.type === 'change' && fromData === 'fromdata') return;\n const method = ($formEl.attr('method') || 'GET').toUpperCase();\n const contentType = $formEl.attr('enctype') || $formEl.prop('enctype');\n let url = $formEl.attr('action');\n if (!url) return;\n let data;\n if (method === 'POST') {\n if (contentType === 'application/x-www-form-urlencoded' || contentType === 'application/json') {\n data = app.form.convertToData($formEl[0]);\n if (contentType === 'application/json') {\n data = JSON.stringify(data);\n }\n } else {\n data = new window.FormData($formEl[0]);\n }\n } else {\n data = serializeObject(app.form.convertToData($formEl[0]));\n if (url.includes('?')) {\n url += `&${data}`;\n } else {\n url += `?${data}`;\n }\n }\n $formEl.trigger('formajax:beforesend', {\n data\n });\n app.emit('formAjaxBeforeSend', $formEl[0], data);\n fetch(url, {\n method,\n headers: {\n 'Content-Type': contentType || 'application/x-www-form-urlencoded'\n },\n ...(method === 'POST' || method === 'PUT' ? {\n body: data\n } : {})\n }).then(response => {\n $formEl.trigger('formajax:complete', {\n data,\n response\n });\n app.emit('formAjaxComplete', $formEl[0], data, response);\n $formEl.trigger('formajax:success', {\n data,\n response\n });\n app.emit('formAjaxSuccess', $formEl[0], data, response);\n }).catch(error => {\n $formEl.trigger('formajax:error', {\n data,\n error\n });\n app.emit('formAjaxError', $formEl[0], data, error);\n });\n }\n $(document).on('submit change', 'form.form-ajax-submit, form.form-ajax-submit-onchange', onSubmitChange);\n}\nexport default {\n name: 'form',\n create() {\n const app = this;\n extend(app, {\n form: {\n data: {},\n storeFormData: FormData.store.bind(app),\n getFormData: FormData.get.bind(app),\n removeFormData: FormData.remove.bind(app),\n convertToData: formToData.bind(app),\n fillFromData: formFromData.bind(app),\n storage: {\n init: FormStorage.init.bind(app),\n destroy: FormStorage.destroy.bind(app)\n }\n }\n });\n },\n on: {\n init() {\n const app = this;\n initAjaxForm.call(app);\n },\n tabBeforeRemove(tabEl) {\n const app = this;\n $(tabEl).find('.form-store-data').each(formEl => {\n app.form.storage.destroy(formEl);\n });\n },\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.form-store-data').each(formEl => {\n app.form.storage.init(formEl);\n });\n },\n pageBeforeRemove(page) {\n const app = this;\n page.$el.find('.form-store-data').each(formEl => {\n app.form.storage.destroy(formEl);\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.form-store-data').each(formEl => {\n app.form.storage.init(formEl);\n });\n }\n }\n};", "import { getWindow, getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { bindMethods } from '../../shared/utils.js';\nimport { getDevice } from '../../shared/get-device.js';\nconst Input = {\n ignoreTypes: ['checkbox', 'button', 'submit', 'range', 'radio', 'image'],\n createTextareaResizableShadow() {\n const document = getDocument();\n const $shadowEl = $(document.createElement('textarea'));\n $shadowEl.addClass('textarea-resizable-shadow');\n $shadowEl.prop({\n disabled: true,\n readonly: true\n });\n Input.textareaResizableShadow = $shadowEl;\n },\n textareaResizableShadow: undefined,\n resizeTextarea(textareaEl) {\n const app = this;\n const window = getWindow();\n const $textareaEl = $(textareaEl);\n if (!Input.textareaResizableShadow) {\n Input.createTextareaResizableShadow();\n }\n const $shadowEl = Input.textareaResizableShadow;\n if (!$textareaEl.length) return;\n if (!$textareaEl.hasClass('resizable')) return;\n if (Input.textareaResizableShadow.parents().length === 0) {\n app.$el.append($shadowEl);\n }\n const styles = window.getComputedStyle($textareaEl[0]);\n 'padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display'.split(' ').forEach(style => {\n let styleValue = styles[style];\n if ('font-size line-height letter-spacing width'.split(' ').indexOf(style) >= 0) {\n styleValue = styleValue.replace(',', '.');\n }\n $shadowEl.css(style, styleValue);\n });\n const currentHeight = $textareaEl[0].clientHeight;\n $shadowEl.val('');\n const initialHeight = $shadowEl[0].scrollHeight;\n $shadowEl.val($textareaEl.val());\n $shadowEl.css('height', 0);\n const scrollHeight = $shadowEl[0].scrollHeight;\n if (currentHeight !== scrollHeight) {\n if (scrollHeight > initialHeight) {\n $textareaEl.css('height', `${scrollHeight}px`);\n } else if (scrollHeight < currentHeight) {\n $textareaEl.css('height', '');\n }\n if (scrollHeight > initialHeight || scrollHeight < currentHeight) {\n $textareaEl.trigger('textarea:resize', {\n initialHeight,\n currentHeight,\n scrollHeight\n });\n app.emit('textareaResize', {\n initialHeight,\n currentHeight,\n scrollHeight\n });\n }\n }\n },\n validate(inputEl) {\n const $inputEl = $(inputEl);\n if (!$inputEl.length) return true;\n const $itemInputEl = $inputEl.parents('.item-input');\n const $inputWrapEl = $inputEl.parents('.input');\n function unsetReadonly() {\n if ($inputEl[0].f7ValidateReadonly) {\n $inputEl[0].readOnly = false;\n }\n }\n function setReadonly() {\n if ($inputEl[0].f7ValidateReadonly) {\n $inputEl[0].readOnly = true;\n }\n }\n unsetReadonly();\n const validity = $inputEl[0].validity;\n const validationMessage = $inputEl.dataset().errorMessage || $inputEl[0].validationMessage || '';\n if (!validity) {\n setReadonly();\n return true;\n }\n if (!validity.valid) {\n let $errorEl = $inputEl.nextAll('.item-input-error-message, .input-error-message');\n if (validationMessage) {\n if ($errorEl.length === 0) {\n $errorEl = $(``);\n $errorEl.insertAfter($inputEl);\n }\n $errorEl.text(validationMessage);\n }\n if ($errorEl.length > 0) {\n $itemInputEl.addClass('item-input-with-error-message');\n $inputWrapEl.addClass('input-with-error-message');\n }\n $itemInputEl.addClass('item-input-invalid');\n $inputWrapEl.addClass('input-invalid');\n $inputEl.addClass('input-invalid');\n setReadonly();\n return false;\n }\n $itemInputEl.removeClass('item-input-invalid item-input-with-error-message');\n $inputWrapEl.removeClass('input-invalid input-with-error-message');\n $inputEl.removeClass('input-invalid');\n setReadonly();\n return true;\n },\n validateInputs(el) {\n const app = this;\n const validates = $(el).find('input, textarea, select').map(inputEl => app.input.validate(inputEl));\n return validates.indexOf(false) < 0;\n },\n focus(inputEl) {\n const $inputEl = $(inputEl);\n const type = $inputEl.attr('type');\n if (Input.ignoreTypes.indexOf(type) >= 0) return;\n $inputEl.parents('.item-input').addClass('item-input-focused');\n $inputEl.parents('.input').addClass('input-focused');\n $inputEl.addClass('input-focused');\n },\n blur(inputEl) {\n const $inputEl = $(inputEl);\n $inputEl.parents('.item-input').removeClass('item-input-focused');\n $inputEl.parents('.input').removeClass('input-focused');\n $inputEl.removeClass('input-focused');\n },\n checkEmptyState(inputEl) {\n const app = this;\n let $inputEl = $(inputEl);\n if (!$inputEl.is('input, select, textarea, .item-input [contenteditable]')) {\n $inputEl = $inputEl.find('input, select, textarea, .item-input [contenteditable]').eq(0);\n }\n if (!$inputEl.length) return;\n const isContentEditable = $inputEl[0].hasAttribute('contenteditable');\n let value;\n if (isContentEditable) {\n if ($inputEl.find('.text-editor-placeholder').length) value = '';else value = $inputEl.html();\n } else {\n value = $inputEl.val();\n }\n const $itemInputEl = $inputEl.parents('.item-input');\n const $inputWrapEl = $inputEl.parents('.input');\n if (value && typeof value === 'string' && value.trim() !== '' || Array.isArray(value) && value.length > 0) {\n $itemInputEl.addClass('item-input-with-value');\n $inputWrapEl.addClass('input-with-value');\n $inputEl.addClass('input-with-value');\n $inputEl.trigger('input:notempty');\n app.emit('inputNotEmpty', $inputEl[0]);\n } else {\n $itemInputEl.removeClass('item-input-with-value');\n $inputWrapEl.removeClass('input-with-value');\n $inputEl.removeClass('input-with-value');\n $inputEl.trigger('input:empty');\n app.emit('inputEmpty', $inputEl[0]);\n }\n },\n scrollIntoView(inputEl, duration, centered, force) {\n if (duration === void 0) {\n duration = 0;\n }\n const $inputEl = $(inputEl);\n const $scrollableEl = $inputEl.parents('.page-content, .panel, .card-expandable .card-content').eq(0);\n if (!$scrollableEl.length) {\n return false;\n }\n const contentHeight = $scrollableEl[0].offsetHeight;\n const contentScrollTop = $scrollableEl[0].scrollTop;\n const contentPaddingTop = parseInt($scrollableEl.css('padding-top'), 10);\n const contentPaddingBottom = parseInt($scrollableEl.css('padding-bottom'), 10);\n const contentOffsetTop = $scrollableEl.offset().top - contentScrollTop;\n const inputOffsetTop = $inputEl.offset().top - contentOffsetTop;\n const inputHeight = $inputEl[0].offsetHeight;\n const min = inputOffsetTop + contentScrollTop - contentPaddingTop;\n const max = inputOffsetTop + contentScrollTop - contentHeight + contentPaddingBottom + inputHeight;\n const centeredPosition = min + (max - min) / 2;\n if (contentScrollTop > min) {\n $scrollableEl.scrollTop(centered ? centeredPosition : min, duration);\n return true;\n }\n if (contentScrollTop < max) {\n $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);\n return true;\n }\n if (force) {\n $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);\n }\n return false;\n },\n init() {\n const app = this;\n const device = getDevice();\n const window = getWindow();\n const document = getDocument();\n Input.createTextareaResizableShadow();\n function onFocus() {\n const inputEl = this;\n if (app.params.input.scrollIntoViewOnFocus) {\n if (device.android) {\n $(window).once('resize', () => {\n if (document && document.activeElement === inputEl) {\n app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);\n }\n });\n } else {\n app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);\n }\n }\n app.input.focus(inputEl);\n }\n function onBlur() {\n const $inputEl = $(this);\n const tag = $inputEl[0].nodeName.toLowerCase();\n app.input.blur($inputEl);\n if ($inputEl.dataset().validate || $inputEl.attr('validate') !== null || $inputEl.attr('data-validate-on-blur') !== null) {\n app.input.validate($inputEl);\n }\n // Resize textarea\n if (tag === 'textarea' && $inputEl.hasClass('resizable')) {\n if (Input.textareaResizableShadow) Input.textareaResizableShadow.remove();\n }\n }\n function onChange() {\n const $inputEl = $(this);\n const type = $inputEl.attr('type');\n const tag = $inputEl[0].nodeName.toLowerCase();\n const isContentEditable = $inputEl[0].hasAttribute('contenteditable');\n if (Input.ignoreTypes.indexOf(type) >= 0) return;\n\n // Check Empty State\n app.input.checkEmptyState($inputEl);\n if (isContentEditable) return;\n\n // Check validation\n if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {\n app.input.validate($inputEl);\n }\n\n // Resize textarea\n if (tag === 'textarea' && $inputEl.hasClass('resizable')) {\n app.input.resizeTextarea($inputEl);\n }\n }\n function onInvalid(e) {\n const $inputEl = $(this);\n if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {\n e.preventDefault();\n app.input.validate($inputEl);\n }\n }\n function clearInput() {\n const $clicked = $(this);\n const $inputEl = $clicked.siblings('input, textarea').eq(0);\n const previousValue = $inputEl.val();\n $inputEl.val('').trigger('input change').focus().trigger('input:clear', previousValue);\n app.emit('inputClear', previousValue);\n }\n function preventDefault(e) {\n e.preventDefault();\n }\n $(document).on('click', '.input-clear-button', clearInput);\n $(document).on('mousedown', '.input-clear-button', preventDefault);\n $(document).on('change input', 'input, textarea, select, .item-input [contenteditable]', onChange, true);\n $(document).on('focus', 'input, textarea, select, .item-input [contenteditable]', onFocus, true);\n $(document).on('blur', 'input, textarea, select, .item-input [contenteditable]', onBlur, true);\n $(document).on('invalid', 'input, textarea, select', onInvalid, true);\n }\n};\nexport default {\n name: 'input',\n params: {\n input: {\n scrollIntoViewOnFocus: undefined,\n scrollIntoViewCentered: false,\n scrollIntoViewDuration: 0,\n scrollIntoViewAlways: false\n }\n },\n create() {\n const app = this;\n if (typeof app.params.input.scrollIntoViewOnFocus === 'undefined') {\n app.params.input.scrollIntoViewOnFocus = getDevice().android;\n }\n bindMethods(app, {\n input: Input\n });\n },\n on: {\n init() {\n const app = this;\n app.input.init();\n },\n tabMounted(tabEl) {\n const app = this;\n const $tabEl = $(tabEl);\n $tabEl.find('.item-input, .input').each(itemInputEl => {\n const $itemInputEl = $(itemInputEl);\n $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {\n const $inputEl = $(inputEl);\n if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;\n app.input.checkEmptyState($inputEl);\n });\n });\n $tabEl.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n },\n pageInit(page) {\n const app = this;\n const $pageEl = page.$el;\n $pageEl.find('.item-input, .input').each(itemInputEl => {\n const $itemInputEl = $(itemInputEl);\n $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {\n const $inputEl = $(inputEl);\n if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;\n app.input.checkEmptyState($inputEl);\n });\n });\n $pageEl.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n },\n 'panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint': function onPanelOpen(instance) {\n const app = this;\n if (instance && instance.$el) {\n instance.$el.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n } else {\n $('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n }\n }\n }\n};", "export default {\n name: 'checkbox'\n};", "export default {\n name: 'radio'\n};", "import $ from '../../shared/dom7.js';\nimport { extend, now, nextTick, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass Toggle extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n super(params, [app]);\n const toggle = this;\n const support = getSupport();\n const defaults = {};\n\n // Extend defaults with modules params\n toggle.useModulesParams(defaults);\n toggle.params = extend(defaults, params);\n const el = toggle.params.el;\n if (!el) return toggle;\n const $el = $(el);\n if ($el.length === 0) return toggle;\n if ($el[0].f7Toggle) return $el[0].f7Toggle;\n const $inputEl = $el.children('input[type=\"checkbox\"]');\n extend(toggle, {\n app,\n $el,\n el: $el[0],\n $inputEl,\n inputEl: $inputEl[0],\n disabled: $el.hasClass('disabled') || $inputEl.hasClass('disabled') || $inputEl.attr('disabled') || $inputEl[0].disabled\n });\n Object.defineProperty(toggle, 'checked', {\n enumerable: true,\n configurable: true,\n set(checked) {\n if (!toggle || typeof toggle.$inputEl === 'undefined') return;\n if (toggle.checked === checked) return;\n $inputEl[0].checked = checked;\n toggle.$inputEl.trigger('change');\n },\n get() {\n return $inputEl[0].checked;\n }\n });\n $el[0].f7Toggle = toggle;\n let isTouched;\n const touchesStart = {};\n let isScrolling;\n let touchesDiff;\n let toggleWidth;\n let touchStartTime;\n let touchStartChecked;\n function handleTouchStart(e) {\n if (isTouched || toggle.disabled) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n touchesDiff = 0;\n isTouched = true;\n isScrolling = undefined;\n touchStartTime = now();\n touchStartChecked = toggle.checked;\n toggleWidth = $el[0].offsetWidth;\n nextTick(() => {\n if (isTouched) {\n $el.addClass('toggle-active-state');\n }\n });\n }\n function handleTouchMove(e) {\n if (!isTouched || toggle.disabled) return;\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n const inverter = app.rtl ? -1 : 1;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));\n }\n if (isScrolling) {\n isTouched = false;\n return;\n }\n e.preventDefault();\n touchesDiff = pageX - touchesStart.x;\n let changed;\n if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) {\n changed = true;\n }\n if (touchesDiff * inverter > 0 && Math.abs(touchesDiff) > toggleWidth / 3 && !touchStartChecked) {\n changed = true;\n }\n if (changed) {\n touchesStart.x = pageX;\n toggle.checked = !touchStartChecked;\n touchStartChecked = !touchStartChecked;\n }\n }\n function handleTouchEnd() {\n if (!isTouched || toggle.disabled) {\n if (isScrolling) $el.removeClass('toggle-active-state');\n isTouched = false;\n return;\n }\n const inverter = app.rtl ? -1 : 1;\n isTouched = false;\n $el.removeClass('toggle-active-state');\n let changed;\n if (now() - touchStartTime < 300) {\n if (touchesDiff * inverter < 0 && touchStartChecked) {\n changed = true;\n }\n if (touchesDiff * inverter > 0 && !touchStartChecked) {\n changed = true;\n }\n if (changed) {\n toggle.checked = !touchStartChecked;\n }\n }\n }\n function handleInputChange() {\n toggle.$el.trigger('toggle:change');\n toggle.emit('local::change toggleChange', toggle);\n }\n toggle.attachEvents = function attachEvents() {\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n $el.on(app.touchEvents.start, handleTouchStart, passive);\n app.on('touchmove', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n toggle.$inputEl.on('change', handleInputChange);\n };\n toggle.detachEvents = function detachEvents() {\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n $el.off(app.touchEvents.start, handleTouchStart, passive);\n app.off('touchmove', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n toggle.$inputEl.off('change', handleInputChange);\n };\n\n // Install Modules\n toggle.useModules();\n\n // Init\n toggle.init();\n }\n toggle() {\n const toggle = this;\n toggle.checked = !toggle.checked;\n }\n init() {\n const toggle = this;\n toggle.attachEvents();\n }\n destroy() {\n let toggle = this;\n toggle.$el.trigger('toggle:beforedestroy');\n toggle.emit('local::beforeDestroy toggleBeforeDestroy', toggle);\n delete toggle.$el[0].f7Toggle;\n toggle.detachEvents();\n deleteProps(toggle);\n toggle = null;\n }\n}\nexport default Toggle;", "import $ from '../../shared/dom7.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nimport Toggle from './toggle-class.js';\nexport default {\n name: 'toggle',\n create() {\n const app = this;\n app.toggle = ConstructorMethods({\n defaultSelector: '.toggle',\n constructor: Toggle,\n app,\n domProp: 'f7Toggle'\n });\n },\n static: {\n Toggle\n },\n on: {\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.toggle-init').each(toggleEl => app.toggle.create({\n el: toggleEl\n }));\n },\n tabBeforeRemove(tabEl) {\n $(tabEl).find('.toggle-init').each(toggleEl => {\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.toggle-init').each(toggleEl => app.toggle.create({\n el: toggleEl\n }));\n },\n pageBeforeRemove(page) {\n page.$el.find('.toggle-init').each(toggleEl => {\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n });\n }\n },\n vnode: {\n 'toggle-init': {\n insert(vnode) {\n const app = this;\n const toggleEl = vnode.elm;\n app.toggle.create({\n el: toggleEl\n });\n },\n destroy(vnode) {\n const toggleEl = vnode.elm;\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n }\n }\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, nextTick, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass Range extends Framework7Class {\n constructor(app, params) {\n super(params, [app]);\n const range = this;\n const support = getSupport();\n const defaults = {\n el: null,\n inputEl: null,\n dual: false,\n step: 1,\n label: false,\n min: 0,\n max: 100,\n value: 0,\n draggableBar: true,\n vertical: false,\n verticalReversed: false,\n formatLabel: null,\n scale: false,\n scaleSteps: 5,\n scaleSubSteps: 0,\n formatScaleLabel: null,\n limitKnobPosition: app.theme === 'ios'\n };\n\n // Extend defaults with modules params\n range.useModulesParams(defaults);\n range.params = extend(defaults, params);\n const el = range.params.el;\n if (!el) return range;\n const $el = $(el);\n if ($el.length === 0) return range;\n if ($el[0].f7Range) return $el[0].f7Range;\n const dataset = $el.dataset();\n 'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(paramName => {\n if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {\n range.params[paramName] = parseFloat(dataset[paramName]);\n }\n });\n 'dual label vertical verticalReversed scale'.split(' ').forEach(paramName => {\n if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {\n range.params[paramName] = dataset[paramName];\n }\n });\n if (!range.params.value) {\n if (typeof dataset.value !== 'undefined') range.params.value = dataset.value;\n if (typeof dataset.valueLeft !== 'undefined' && typeof dataset.valueRight !== 'undefined') {\n range.params.value = [parseFloat(dataset.valueLeft), parseFloat(dataset.valueRight)];\n }\n }\n let $inputEl;\n if (!range.params.dual) {\n if (range.params.inputEl) {\n $inputEl = $(range.params.inputEl);\n } else if ($el.find('input[type=\"range\"]').length) {\n $inputEl = $el.find('input[type=\"range\"]').eq(0);\n }\n }\n const {\n dual,\n step,\n label,\n min,\n max,\n value,\n vertical,\n verticalReversed,\n scale,\n scaleSteps,\n scaleSubSteps,\n limitKnobPosition\n } = range.params;\n extend(range, {\n app,\n $el,\n el: $el[0],\n $inputEl,\n inputEl: $inputEl ? $inputEl[0] : undefined,\n dual,\n step,\n label,\n min,\n max,\n value,\n previousValue: value,\n vertical,\n verticalReversed,\n scale,\n scaleSteps,\n scaleSubSteps,\n limitKnobPosition\n });\n if ($inputEl) {\n 'step min max'.split(' ').forEach(paramName => {\n if (!params[paramName] && $inputEl.attr(paramName)) {\n range.params[paramName] = parseFloat($inputEl.attr(paramName));\n range[paramName] = parseFloat($inputEl.attr(paramName));\n }\n });\n if (typeof $inputEl.val() !== 'undefined') {\n range.params.value = parseFloat($inputEl.val());\n range.value = parseFloat($inputEl.val());\n }\n }\n\n // Dual\n if (range.dual) {\n $el.addClass('range-slider-dual');\n }\n if (range.label) {\n $el.addClass('range-slider-label');\n }\n\n // Vertical\n if (range.vertical) {\n $el.addClass('range-slider-vertical');\n if (range.verticalReversed) {\n $el.addClass('range-slider-vertical-reversed');\n }\n } else {\n $el.addClass('range-slider-horizontal');\n }\n\n // Check for layout\n const $barEl = $('');\n const $barActiveEl = $('');\n $barEl.append($barActiveEl);\n\n // Create Knobs\n // prettier-ignore\n const knobHTML = `\n
\n ${currentValues.map(_ref4 => {\n let {\n label,\n color,\n value\n } = _ref4;\n const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;\n return `\n
` : '';\n // prettier-ignore\n return `\n \n const ul = vl.params.ul;\n vl.$ul = ul ? $(vl.params.ul) : vl.$el.children('ul');\n if (vl.$ul.length === 0 && vl.params.createUl) {\n vl.$el.append('
');\n vl.$ul = vl.$el.children('ul');\n }\n vl.ul = vl.$ul[0];\n let $itemsWrapEl;\n if (!vl.ul && !vl.params.createUl) $itemsWrapEl = vl.$el;else $itemsWrapEl = vl.$ul;\n extend(vl, {\n $itemsWrapEl,\n itemsWrapEl: $itemsWrapEl[0],\n // DOM cached items\n domCache: {},\n // Temporary DOM Element\n tempDomElement: document.createElement('ul'),\n // Last repain position\n lastRepaintY: null,\n // Fragment\n fragment: document.createDocumentFragment(),\n // Props\n pageHeight: undefined,\n rowsPerScreen: undefined,\n rowsBefore: undefined,\n rowsAfter: undefined,\n rowsToRender: undefined,\n maxBufferHeight: 0,\n listHeight: undefined,\n dynamicHeight: typeof vl.params.height === 'function',\n autoHeight: vl.params.height === 'auto'\n });\n\n // Install Modules\n vl.useModules();\n\n // Attach events\n const handleScrollBound = vl.handleScroll.bind(vl);\n const handleResizeBound = vl.handleResize.bind(vl);\n let $pageEl;\n let $tabEl;\n let $panelEl;\n let $popupEl;\n vl.attachEvents = function attachEvents() {\n $pageEl = vl.$el.parents('.page').eq(0);\n $tabEl = vl.$el.parents('.tab').filter(tabEl => {\n return $(tabEl).parent('.tabs').parent('.tabs-animated-wrap, swiper-container.tabs').length === 0;\n }).eq(0);\n $panelEl = vl.$el.parents('.panel').eq(0);\n $popupEl = vl.$el.parents('.popup').eq(0);\n vl.$scrollableParentEl.on('scroll', handleScrollBound);\n if ($pageEl.length) $pageEl.on('page:reinit', handleResizeBound);\n if ($tabEl.length) $tabEl.on('tab:show', handleResizeBound);\n if ($panelEl.length) $panelEl.on('panel:open', handleResizeBound);\n if ($popupEl.length) $popupEl.on('popup:open', handleResizeBound);\n app.on('resize', handleResizeBound);\n };\n vl.detachEvents = function attachEvents() {\n vl.$scrollableParentEl.off('scroll', handleScrollBound);\n if ($pageEl.length) $pageEl.off('page:reinit', handleResizeBound);\n if ($tabEl.length) $tabEl.off('tab:show', handleResizeBound);\n if ($panelEl.length) $panelEl.off('panel:open', handleResizeBound);\n if ($popupEl.length) $popupEl.off('popup:open', handleResizeBound);\n app.off('resize', handleResizeBound);\n };\n // Init\n vl.init();\n return vl;\n }\n setListSize(autoHeightRerender) {\n const vl = this;\n const items = vl.filteredItems || vl.items;\n if (!autoHeightRerender) {\n vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;\n }\n if (vl.dynamicHeight) {\n vl.listHeight = 0;\n vl.heights = [];\n for (let i = 0; i < items.length; i += 1) {\n const itemHeight = vl.params.height(items[i]);\n vl.listHeight += itemHeight;\n vl.heights.push(itemHeight);\n }\n } else if (vl.autoHeight) {\n vl.listHeight = 0;\n if (!vl.heights) vl.heights = [];\n if (!vl.heightsCalculated) vl.heightsCalculated = [];\n const renderedItems = {};\n vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach(el => {\n renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;\n });\n for (let i = 0; i < items.length; i += 1) {\n const itemIndex = vl.items.indexOf(items[i]);\n const renderedItem = renderedItems[itemIndex];\n if (renderedItem) {\n if (!vl.heightsCalculated.includes(itemIndex)) {\n vl.heights[itemIndex] = renderedItem.offsetHeight;\n vl.heightsCalculated.push(itemIndex);\n }\n }\n if (typeof vl.heights[i] === 'undefined') {\n vl.heights[itemIndex] = 40;\n }\n vl.listHeight += vl.heights[itemIndex];\n }\n } else {\n vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;\n vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);\n vl.rowsBefore = vl.params.rowsBefore || vl.rowsPerScreen * 2;\n vl.rowsAfter = vl.params.rowsAfter || vl.rowsPerScreen;\n vl.rowsToRender = vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter;\n vl.maxBufferHeight = vl.rowsBefore / 2 * vl.params.height;\n }\n if (vl.updatableScroll || vl.params.setListHeight) {\n vl.$itemsWrapEl.css({\n height: `${vl.listHeight}px`\n });\n }\n }\n render(force, forceScrollTop) {\n const vl = this;\n if (force) vl.lastRepaintY = null;\n let scrollTop = -(vl.$el[0].getBoundingClientRect().top - vl.$scrollableParentEl[0].getBoundingClientRect().top);\n if (typeof forceScrollTop !== 'undefined') scrollTop = forceScrollTop;\n if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > vl.maxBufferHeight || !vl.updatableScroll && vl.$scrollableParentEl[0].scrollTop + vl.pageHeight >= vl.$scrollableParentEl[0].scrollHeight) {\n vl.lastRepaintY = scrollTop;\n } else {\n return;\n }\n const items = vl.filteredItems || vl.items;\n let fromIndex;\n let toIndex;\n let heightBeforeFirstItem = 0;\n let heightBeforeLastItem = 0;\n if (vl.dynamicHeight || vl.autoHeight) {\n let itemTop = 0;\n let itemHeight;\n vl.maxBufferHeight = vl.pageHeight;\n for (let j = 0; j < vl.heights.length; j += 1) {\n itemHeight = vl.heights[j];\n if (typeof fromIndex === 'undefined') {\n if (itemTop + itemHeight >= scrollTop - vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize) fromIndex = j;else heightBeforeFirstItem += itemHeight;\n }\n if (typeof toIndex === 'undefined') {\n if (itemTop + itemHeight >= scrollTop + vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize || j === vl.heights.length - 1) toIndex = j + 1;\n heightBeforeLastItem += itemHeight;\n }\n itemTop += itemHeight;\n }\n toIndex = Math.min(toIndex, items.length);\n } else {\n fromIndex = (parseInt(scrollTop / vl.params.height, 10) - vl.rowsBefore) * vl.params.cols;\n if (fromIndex < 0) {\n fromIndex = 0;\n }\n toIndex = Math.min(fromIndex + vl.rowsToRender * vl.params.cols, items.length);\n }\n let topPosition;\n const renderExternalItems = [];\n vl.reachEnd = false;\n let i;\n for (i = fromIndex; i < toIndex; i += 1) {\n let itemEl;\n // Define real item index\n const index = vl.items.indexOf(items[i]);\n if (i === fromIndex) vl.currentFromIndex = index;\n if (i === toIndex - 1) vl.currentToIndex = index;\n if (vl.filteredItems) {\n if (vl.items[index] === vl.filteredItems[vl.filteredItems.length - 1]) vl.reachEnd = true;\n } else if (index === vl.items.length - 1) vl.reachEnd = true;\n\n // Find items\n if (vl.params.renderExternal) {\n renderExternalItems.push(items[i]);\n } else if (vl.domCache[index]) {\n itemEl = vl.domCache[index];\n itemEl.f7VirtualListIndex = index;\n } else {\n if (vl.renderItem) {\n vl.tempDomElement.innerHTML = vl.renderItem(items[i], index).trim();\n } else {\n vl.tempDomElement.innerHTML = items[i].toString().trim();\n }\n itemEl = vl.tempDomElement.childNodes[0];\n if (vl.params.cache) vl.domCache[index] = itemEl;\n itemEl.f7VirtualListIndex = index;\n }\n\n // Set item top position\n if (i === fromIndex) {\n if (vl.dynamicHeight || vl.autoHeight) {\n topPosition = heightBeforeFirstItem;\n } else {\n topPosition = i * vl.params.height / vl.params.cols;\n }\n }\n if (!vl.params.renderExternal) {\n itemEl.style.top = `${topPosition}px`;\n\n // Before item insert\n vl.emit('local::itemBeforeInsert vlItemBeforeInsert', vl, itemEl, items[i]);\n\n // Append item to fragment\n vl.fragment.appendChild(itemEl);\n }\n }\n\n // Update list height with not updatable scroll\n if (!vl.updatableScroll) {\n if (vl.dynamicHeight || vl.autoHeight) {\n vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;\n } else {\n vl.itemsWrapEl.style.height = `${i * vl.params.height / vl.params.cols}px`;\n }\n }\n\n // Update list html\n if (vl.params.renderExternal) {\n if (items && items.length === 0) {\n vl.reachEnd = true;\n }\n } else {\n vl.emit('local::beforeClear vlBeforeClear', vl, vl.fragment);\n vl.itemsWrapEl.innerHTML = '';\n vl.emit('local::itemsBeforeInsert vlItemsBeforeInsert', vl, vl.fragment);\n if (items && items.length === 0) {\n vl.reachEnd = true;\n if (vl.params.emptyTemplate) vl.itemsWrapEl.innerHTML = vl.params.emptyTemplate;\n } else {\n vl.itemsWrapEl.appendChild(vl.fragment);\n }\n vl.emit('local::itemsAfterInsert vlItemsAfterInsert', vl, vl.fragment);\n }\n if (typeof forceScrollTop !== 'undefined' && force) {\n vl.$scrollableParentEl.scrollTop(forceScrollTop, 0);\n }\n if (vl.params.renderExternal) {\n vl.params.renderExternal(vl, {\n fromIndex,\n toIndex,\n listHeight: vl.listHeight,\n topPosition,\n items: renderExternalItems\n });\n }\n if (vl.autoHeight) {\n requestAnimationFrame(() => {\n vl.setListSize(true);\n });\n }\n }\n\n // Filter\n filterItems(indexes, resetScrollTop) {\n if (resetScrollTop === void 0) {\n resetScrollTop = true;\n }\n const vl = this;\n vl.filteredItems = [];\n for (let i = 0; i < indexes.length; i += 1) {\n vl.filteredItems.push(vl.items[indexes[i]]);\n }\n if (resetScrollTop) {\n vl.$scrollableParentEl[0].scrollTop = 0;\n }\n vl.update();\n }\n resetFilter() {\n const vl = this;\n if (vl.params.showFilteredItemsOnly) {\n vl.filteredItems = [];\n } else {\n vl.filteredItems = null;\n delete vl.filteredItems;\n }\n vl.update();\n }\n scrollToItem(index) {\n const vl = this;\n if (index > vl.items.length) return false;\n let itemTop = 0;\n if (vl.dynamicHeight || vl.autoHeight) {\n for (let i = 0; i < index; i += 1) {\n itemTop += vl.heights[i];\n }\n } else {\n itemTop = index * vl.params.height;\n }\n const listTop = vl.$el[0].offsetTop;\n vl.render(true, listTop + itemTop - parseInt(vl.$scrollableParentEl.css('padding-top'), 10));\n return true;\n }\n handleScroll() {\n const vl = this;\n vl.render();\n }\n\n // Handle resize event\n isVisible() {\n const vl = this;\n return !!(vl.el.offsetWidth || vl.el.offsetHeight || vl.el.getClientRects().length);\n }\n handleResize() {\n const vl = this;\n if (vl.isVisible()) {\n vl.heightsCalculated = [];\n vl.setListSize();\n vl.render(true);\n }\n }\n\n // Append\n appendItems(items) {\n const vl = this;\n for (let i = 0; i < items.length; i += 1) {\n vl.items.push(items[i]);\n }\n vl.update();\n }\n appendItem(item) {\n const vl = this;\n vl.appendItems([item]);\n }\n\n // Replace\n replaceAllItems(items) {\n const vl = this;\n vl.items = items;\n delete vl.filteredItems;\n vl.domCache = {};\n vl.update();\n }\n replaceItem(index, item) {\n const vl = this;\n vl.items[index] = item;\n if (vl.params.cache) delete vl.domCache[index];\n vl.update();\n }\n\n // Prepend\n prependItems(items) {\n const vl = this;\n for (let i = items.length - 1; i >= 0; i -= 1) {\n vl.items.unshift(items[i]);\n }\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n newCache[parseInt(cached, 10) + items.length] = vl.domCache[cached];\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n prependItem(item) {\n const vl = this;\n vl.prependItems([item]);\n }\n\n // Move\n moveItem(from, to) {\n const vl = this;\n const fromIndex = from;\n let toIndex = to;\n if (fromIndex === toIndex) return;\n // remove item from array\n const item = vl.items.splice(fromIndex, 1)[0];\n if (toIndex >= vl.items.length) {\n // Add item to the end\n vl.items.push(item);\n toIndex = vl.items.length - 1;\n } else {\n // Add item to new index\n vl.items.splice(toIndex, 0, item);\n }\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n const leftIndex = fromIndex < toIndex ? fromIndex : toIndex;\n const rightIndex = fromIndex < toIndex ? toIndex : fromIndex;\n const indexShift = fromIndex < toIndex ? -1 : 1;\n if (cachedIndex < leftIndex || cachedIndex > rightIndex) newCache[cachedIndex] = vl.domCache[cachedIndex];\n if (cachedIndex === leftIndex) newCache[rightIndex] = vl.domCache[cachedIndex];\n if (cachedIndex > leftIndex && cachedIndex <= rightIndex) newCache[cachedIndex + indexShift] = vl.domCache[cachedIndex];\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n\n // Insert before\n insertItemBefore(index, item) {\n const vl = this;\n if (index === 0) {\n vl.prependItem(item);\n return;\n }\n if (index >= vl.items.length) {\n vl.appendItem(item);\n return;\n }\n vl.items.splice(index, 0, item);\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n if (cachedIndex >= index) {\n newCache[cachedIndex + 1] = vl.domCache[cachedIndex];\n }\n });\n vl.domCache = newCache;\n }\n vl.update();\n }\n\n // Delete\n deleteItems(indexes) {\n const vl = this;\n let prevIndex;\n let indexShift = 0;\n for (let i = 0; i < indexes.length; i += 1) {\n let index = indexes[i];\n if (typeof prevIndex !== 'undefined') {\n if (index > prevIndex) {\n indexShift = -i;\n }\n }\n index += indexShift;\n prevIndex = indexes[i];\n // Delete item\n const deletedItem = vl.items.splice(index, 1)[0];\n\n // Delete from filtered\n if (vl.filteredItems && vl.filteredItems.indexOf(deletedItem) >= 0) {\n vl.filteredItems.splice(vl.filteredItems.indexOf(deletedItem), 1);\n }\n // Update cache\n if (vl.params.cache) {\n const newCache = {};\n Object.keys(vl.domCache).forEach(cached => {\n const cachedIndex = parseInt(cached, 10);\n if (cachedIndex === index) {\n delete vl.domCache[index];\n } else if (parseInt(cached, 10) > index) {\n newCache[cachedIndex - 1] = vl.domCache[cached];\n } else {\n newCache[cachedIndex] = vl.domCache[cached];\n }\n });\n vl.domCache = newCache;\n }\n }\n vl.update();\n }\n deleteAllItems() {\n const vl = this;\n vl.items = [];\n delete vl.filteredItems;\n if (vl.params.cache) vl.domCache = {};\n vl.update();\n }\n deleteItem(index) {\n const vl = this;\n vl.deleteItems([index]);\n }\n\n // Clear cache\n clearCache() {\n const vl = this;\n vl.domCache = {};\n }\n\n // Update Virtual List\n update(deleteCache) {\n const vl = this;\n if (deleteCache && vl.params.cache) {\n vl.domCache = {};\n }\n vl.heightsCalculated = [];\n vl.setListSize();\n vl.render(true);\n }\n init() {\n const vl = this;\n vl.attachEvents();\n vl.setListSize();\n vl.render();\n }\n destroy() {\n let vl = this;\n vl.detachEvents();\n vl.$el[0].f7VirtualList = null;\n delete vl.$el[0].f7VirtualList;\n deleteProps(vl);\n vl = null;\n }\n}\nexport default VirtualList;", "import VirtualList from './virtual-list-class.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nexport default {\n name: 'virtualList',\n static: {\n VirtualList\n },\n create() {\n const app = this;\n app.virtualList = ConstructorMethods({\n defaultSelector: '.virtual-list',\n constructor: VirtualList,\n app,\n domProp: 'f7VirtualList'\n });\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass ListIndex extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n super(params, [app]);\n const index = this;\n const defaults = {\n el: null,\n // where to render indexes\n listEl: null,\n // list el to generate indexes\n indexes: 'auto',\n // or array of indexes\n iosItemHeight: 14,\n mdItemHeight: 14,\n scrollList: true,\n label: false,\n // eslint-disable-next-line\n renderItem(itemContent, itemIndex) {\n return `\n
');\n $el.append($ul);\n }\n if (index.params.listEl) {\n $listEl = $(index.params.listEl);\n }\n if (index.params.indexes === 'auto' && !$listEl) {\n return index;\n }\n if ($listEl) {\n $pageContentEl = $listEl.parents('.page-content').eq(0);\n } else {\n $pageContentEl = $el.siblings('.page-content').eq(0);\n if ($pageContentEl.length === 0) {\n $pageContentEl = $el.parents('.page').eq(0).find('.page-content').eq(0);\n }\n }\n $el[0].f7ListIndex = index;\n extend(index, {\n app,\n $el,\n el: $el && $el[0],\n $ul,\n ul: $ul && $ul[0],\n $listEl,\n listEl: $listEl && $listEl[0],\n $pageContentEl,\n pageContentEl: $pageContentEl && $pageContentEl[0],\n indexes: params.indexes,\n height: 0,\n skipRate: 0\n });\n\n // Install Modules\n index.useModules();\n\n // Attach events\n function handleResize() {\n const height = {\n index\n };\n index.calcSize();\n if (height !== index.height) {\n index.render();\n }\n }\n function handleClick(e) {\n const $clickedLi = $(e.target).closest('li');\n if (!$clickedLi.length) return;\n let itemIndex = $clickedLi.index();\n if (index.skipRate > 0) {\n const percentage = itemIndex / ($clickedLi.siblings('li').length - 1);\n itemIndex = Math.round((index.indexes.length - 1) * percentage);\n }\n const itemContent = index.indexes[itemIndex];\n index.$el.trigger('listindex:click', {\n content: itemContent,\n index: itemIndex\n });\n index.emit('local::click listIndexClick', index, itemContent, itemIndex);\n index.$el.trigger('listindex:select', {\n content: itemContent,\n index: itemIndex\n });\n index.emit('local::select listIndexSelect', index, itemContent, itemIndex);\n if (index.$listEl && index.params.scrollList) {\n index.scrollListToIndex(itemContent, itemIndex);\n }\n }\n const touchesStart = {};\n let isTouched;\n let isMoved;\n let topPoint;\n let bottomPoint;\n let $labelEl;\n let previousIndex = null;\n function handleTouchStart(e) {\n const $children = $ul.children();\n if (!$children.length) return;\n topPoint = $children[0].getBoundingClientRect().top;\n bottomPoint = $children[$children.length - 1].getBoundingClientRect().top + $children[0].offsetHeight;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n isTouched = true;\n isMoved = false;\n previousIndex = null;\n }\n function handleTouchMove(e) {\n if (!isTouched) return;\n if (!isMoved && index.params.label) {\n $labelEl = $('');\n $el.append($labelEl);\n }\n isMoved = true;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n e.preventDefault();\n let percentage = (pageY - topPoint) / (bottomPoint - topPoint);\n percentage = Math.min(Math.max(percentage, 0), 1);\n const itemIndex = Math.round((index.indexes.length - 1) * percentage);\n const itemContent = index.indexes[itemIndex];\n const ulHeight = bottomPoint - topPoint;\n const bubbleBottom = (index.height - ulHeight) / 2 + (1 - percentage) * ulHeight;\n if (itemIndex !== previousIndex) {\n if (index.params.label) {\n $labelEl.html(itemContent).transform(`translateY(-${bubbleBottom}px)`);\n }\n if (index.$listEl && index.params.scrollList) {\n index.scrollListToIndex(itemContent, itemIndex);\n }\n }\n previousIndex = itemIndex;\n index.$el.trigger('listindex:select');\n index.emit('local::select listIndexSelect', index, itemContent, itemIndex);\n }\n function handleTouchEnd() {\n if (!isTouched) return;\n isTouched = false;\n isMoved = false;\n if (index.params.label) {\n if ($labelEl) $labelEl.remove();\n $labelEl = undefined;\n }\n }\n const passiveListener = getSupport().passiveListener ? {\n passive: true\n } : false;\n index.attachEvents = function attachEvents() {\n $el.parents('.tab').on('tab:show', handleResize);\n $el.parents('.page').on('page:reinit', handleResize);\n $el.parents('.panel').on('panel:open', handleResize);\n $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').on('modal:open', handleResize);\n app.on('resize', handleResize);\n $el.on('click', handleClick);\n $el.on(app.touchEvents.start, handleTouchStart, passiveListener);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n };\n index.detachEvents = function attachEvents() {\n $el.parents('.tab').off('tab:show', handleResize);\n $el.parents('.page').off('page:reinit', handleResize);\n $el.parents('.panel').off('panel:open', handleResize);\n $el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast').off('modal:open', handleResize);\n app.off('resize', handleResize);\n $el.off('click', handleClick);\n $el.off(app.touchEvents.start, handleTouchStart, passiveListener);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n };\n // Init\n index.init();\n return index;\n }\n // eslint-disable-next-line\n scrollListToIndex(itemContent, itemIndex) {\n const index = this;\n const {\n $listEl,\n $pageContentEl,\n app\n } = index;\n if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;\n let $scrollToEl;\n $listEl.find('.list-group-title').each(el => {\n if ($scrollToEl) return;\n const $el = $(el);\n if ($el.text() === itemContent) {\n $scrollToEl = $el;\n }\n });\n if (!$scrollToEl || $scrollToEl.length === 0) return index;\n const parentTop = $scrollToEl.parent().offset().top;\n let paddingTop = parseInt($pageContentEl.css('padding-top'), 10);\n const scrollTop = $pageContentEl[0].scrollTop;\n const scrollToElTop = $scrollToEl.offset().top;\n if ($pageContentEl.parents('.page-with-navbar-large').length) {\n const navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0));\n const $titleLargeEl = $(navbarInnerEl).find('.title-large');\n if ($titleLargeEl.length) {\n paddingTop -= $titleLargeEl[0].offsetHeight || 0;\n }\n }\n if (parentTop <= paddingTop) {\n $pageContentEl.scrollTop(parentTop + scrollTop - paddingTop);\n } else {\n $pageContentEl.scrollTop(scrollToElTop + scrollTop - paddingTop);\n }\n return index;\n }\n renderSkipPlaceholder() {\n const index = this;\n return index.params.renderSkipPlaceholder.call(index);\n }\n renderItem(itemContent, itemIndex) {\n const index = this;\n return index.params.renderItem.call(index, itemContent, itemIndex);\n }\n render() {\n const index = this;\n const {\n $ul,\n indexes,\n skipRate\n } = index;\n let wasSkipped;\n const html = indexes.map((itemContent, itemIndex) => {\n if (itemIndex % skipRate !== 0 && skipRate > 0) {\n wasSkipped = true;\n return '';\n }\n let itemHtml = index.renderItem(itemContent, itemIndex);\n if (wasSkipped) {\n itemHtml = index.renderSkipPlaceholder() + itemHtml;\n }\n wasSkipped = false;\n return itemHtml;\n }).join('');\n $ul.html(html);\n return index;\n }\n calcSize() {\n const index = this;\n const {\n app,\n params,\n el,\n indexes\n } = index;\n const height = el.offsetHeight;\n const itemHeight = params[`${app.theme}ItemHeight`];\n const maxItems = Math.floor(height / itemHeight);\n const items = indexes.length;\n let skipRate = 0;\n if (items > maxItems) {\n skipRate = Math.ceil((items * 2 - 1) / maxItems);\n }\n index.height = height;\n index.skipRate = skipRate;\n return index;\n }\n calcIndexes() {\n const index = this;\n if (index.params.indexes === 'auto') {\n index.indexes = [];\n index.$listEl.find('.list-group-title').each(el => {\n const elContent = $(el).text();\n if (index.indexes.indexOf(elContent) < 0) {\n index.indexes.push(elContent);\n }\n });\n } else {\n index.indexes = index.params.indexes;\n }\n return index;\n }\n update() {\n const index = this;\n index.calcIndexes();\n index.calcSize();\n index.render();\n return index;\n }\n init() {\n const index = this;\n index.calcIndexes();\n index.calcSize();\n index.render();\n index.attachEvents();\n }\n destroy() {\n let index = this;\n index.$el.trigger('listindex:beforedestroy', index);\n index.emit('local::beforeDestroy listIndexBeforeDestroy');\n index.detachEvents();\n if (index.$el[0]) {\n index.$el[0].f7ListIndex = null;\n delete index.$el[0].f7ListIndex;\n }\n deleteProps(index);\n index = null;\n }\n}\nexport default ListIndex;", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nimport ListIndex from './list-index-class.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nexport default {\n name: 'listIndex',\n static: {\n ListIndex\n },\n create() {\n const app = this;\n app.listIndex = ConstructorMethods({\n defaultSelector: '.list-index',\n constructor: ListIndex,\n app,\n domProp: 'f7ListIndex'\n });\n },\n on: {\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.list-index-init').each(listIndexEl => {\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n });\n },\n tabBeforeRemove(tabEl) {\n $(tabEl).find('.list-index-init').each(listIndexEl => {\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.list-index-init').each(listIndexEl => {\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n });\n },\n pageBeforeRemove(page) {\n page.$el.find('.list-index-init').each(listIndexEl => {\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n });\n }\n },\n vnode: {\n 'list-index-init': {\n insert(vnode) {\n const app = this;\n const listIndexEl = vnode.elm;\n const params = extend($(listIndexEl).dataset(), {\n el: listIndexEl\n });\n app.listIndex.create(params);\n },\n destroy(vnode) {\n const listIndexEl = vnode.elm;\n if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();\n }\n }\n }\n};", "export default {\n name: 'timeline'\n};", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nconst Tab = {\n show() {\n const app = this;\n let tabEl;\n let tabLinkEl;\n let animate;\n let tabRoute;\n let animatedInit;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n if (args.length === 1 && args[0] && args[0].constructor === Object) {\n tabEl = args[0].tabEl;\n tabLinkEl = args[0].tabLinkEl;\n animate = args[0].animate;\n tabRoute = args[0].tabRoute;\n animatedInit = args[0].animatedInit;\n } else {\n [tabEl, tabLinkEl, animate, tabRoute] = args;\n if (typeof args[1] === 'boolean') {\n [tabEl, animate, tabLinkEl, tabRoute] = args;\n if (args.length > 2 && tabLinkEl.constructor === Object) {\n [tabEl, animate, tabRoute, tabLinkEl] = args;\n }\n }\n }\n if (typeof animate === 'undefined') animate = true;\n const $newTabEl = $(tabEl);\n if (tabRoute && $newTabEl[0]) {\n $newTabEl[0].f7TabRoute = tabRoute;\n }\n if (!animatedInit && ($newTabEl.length === 0 || $newTabEl.hasClass('tab-active'))) {\n return {\n $newTabEl,\n newTabEl: $newTabEl[0]\n };\n }\n let $tabLinkEl;\n if (tabLinkEl) $tabLinkEl = $(tabLinkEl);\n const $tabsEl = $newTabEl.parent('.tabs');\n if ($tabsEl.length === 0) {\n return {\n $newTabEl,\n newTabEl: $newTabEl[0]\n };\n }\n\n // Release swipeouts in hidden tabs\n if (app.swipeout) app.swipeout.allowOpen = true;\n\n // Animated tabs\n const tabsChangedCallbacks = [];\n function onTabsChanged(callback) {\n tabsChangedCallbacks.push(callback);\n }\n function tabsChanged() {\n tabsChangedCallbacks.forEach(callback => {\n callback();\n });\n }\n let animated = false;\n if ($tabsEl.parent().hasClass('tabs-animated-wrap')) {\n $tabsEl.parent()[animate ? 'removeClass' : 'addClass']('not-animated');\n const transitionDuration = parseFloat($tabsEl.css('transition-duration').replace(',', '.'));\n if (animate && transitionDuration) {\n $tabsEl.transitionEnd(tabsChanged);\n animated = true;\n }\n const tabsTranslate = (app.rtl ? $newTabEl.index() : -$newTabEl.index()) * 100;\n $tabsEl.transform(`translate3d(${tabsTranslate}%,0,0)`);\n }\n\n // Swipeable tabs\n let swiper;\n if ($tabsEl[0].nodeName.toLowerCase() === 'swiper-container' && app.swiper) {\n swiper = $tabsEl[0].swiper;\n const newTabIndex = swiper.slides.indexOf($newTabEl[0]);\n if (swiper && swiper.activeIndex !== newTabIndex) {\n animated = true;\n swiper.once('slideChangeTransitionEnd', () => {\n tabsChanged();\n }).slideTo(newTabIndex, animate ? undefined : 0);\n } else if (swiper && swiper.animating) {\n animated = true;\n swiper.once('slideChangeTransitionEnd', () => {\n tabsChanged();\n });\n }\n }\n\n // Remove active class from old tabs\n const $oldTabEl = $tabsEl.children('.tab-active');\n $oldTabEl.removeClass('tab-active');\n if (!animatedInit && (!swiper || swiper && !swiper.animating || swiper && tabRoute)) {\n if ($oldTabEl.hasClass('view') && $oldTabEl.children('.page').length) {\n $oldTabEl.children('.page').each(pageEl => {\n $(pageEl).trigger('page:tabhide');\n app.emit('pageTabHide', pageEl);\n });\n }\n $oldTabEl.trigger('tab:hide');\n app.emit('tabHide', $oldTabEl[0]);\n }\n\n // Trigger 'show' event on new tab\n $newTabEl.addClass('tab-active');\n if (!animatedInit && (!swiper || swiper && !swiper.animating || swiper && tabRoute)) {\n if ($newTabEl.hasClass('view') && $newTabEl.children('.page').length) {\n $newTabEl.children('.page').each(pageEl => {\n $(pageEl).trigger('page:tabshow');\n app.emit('pageTabShow', pageEl);\n });\n }\n $newTabEl.trigger('tab:show');\n app.emit('tabShow', $newTabEl[0]);\n }\n\n // Find related link for new tab\n if (!$tabLinkEl) {\n // Search by id\n if (typeof tabEl === 'string') $tabLinkEl = $(`.tab-link[href=\"${tabEl}\"]`);else $tabLinkEl = $(`.tab-link[href=\"#${$newTabEl.attr('id')}\"]`);\n // Search by data-tab\n if (!$tabLinkEl || $tabLinkEl && $tabLinkEl.length === 0) {\n $('[data-tab]').each(el => {\n if ($newTabEl.is($(el).attr('data-tab'))) $tabLinkEl = $(el);\n });\n }\n if (tabRoute && (!$tabLinkEl || $tabLinkEl && $tabLinkEl.length === 0)) {\n $tabLinkEl = $(`[data-route-tab-id=\"${tabRoute.route.tab.id}\"]`);\n if ($tabLinkEl.length === 0) {\n $tabLinkEl = $(`.tab-link[href=\"${tabRoute.url}\"]`);\n }\n }\n if ($tabLinkEl.length > 1 && $newTabEl.parents('.page').length) {\n // eslint-disable-next-line\n $tabLinkEl = $tabLinkEl.filter(tabLinkElement => {\n return $(tabLinkElement).parents('.page')[0] === $newTabEl.parents('.page')[0];\n });\n if (app.theme === 'ios' && $tabLinkEl.length === 0 && tabRoute) {\n const $pageEl = $newTabEl.parents('.page');\n const $navbarEl = $(app.navbar.getElByPage($pageEl));\n $tabLinkEl = $navbarEl.find(`[data-route-tab-id=\"${tabRoute.route.tab.id}\"]`);\n if ($tabLinkEl.length === 0) {\n $tabLinkEl = $navbarEl.find(`.tab-link[href=\"${tabRoute.url}\"]`);\n }\n }\n }\n }\n if ($tabLinkEl.length > 0) {\n // Find related link for old tab\n let $oldTabLinkEl;\n if ($oldTabEl && $oldTabEl.length > 0) {\n // Search by id\n const oldTabId = $oldTabEl.attr('id');\n if (oldTabId) {\n $oldTabLinkEl = $(`.tab-link[href=\"#${oldTabId}\"]`);\n // Search by data-route-tab-id\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $oldTabLinkEl = $(`.tab-link[data-route-tab-id=\"${oldTabId}\"]`);\n }\n }\n // Search by data-tab\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $('[data-tab]').each(tabLinkElement => {\n if ($oldTabEl.is($(tabLinkElement).attr('data-tab'))) $oldTabLinkEl = $(tabLinkElement);\n });\n }\n if (!$oldTabLinkEl || $oldTabLinkEl && $oldTabLinkEl.length === 0) {\n $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active');\n }\n } else if (tabRoute) {\n $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active');\n }\n if ($oldTabLinkEl && $oldTabLinkEl.length > 1 && $oldTabEl && $oldTabEl.parents('.page').length) {\n // eslint-disable-next-line\n $oldTabLinkEl = $oldTabLinkEl.filter(tabLinkElement => {\n return $(tabLinkElement).parents('.page')[0] === $oldTabEl.parents('.page')[0];\n });\n }\n if ($oldTabLinkEl && $oldTabLinkEl.length > 0) $oldTabLinkEl.removeClass('tab-link-active');\n\n // Update links' classes\n if ($tabLinkEl && $tabLinkEl.length > 0) {\n $tabLinkEl.addClass('tab-link-active');\n // Material Highlight\n const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-icons');\n const hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');\n if (hasHighlight) {\n app.toolbar.setHighlight($tabbarEl);\n }\n }\n }\n return {\n $newTabEl,\n newTabEl: $newTabEl[0],\n $oldTabEl,\n oldTabEl: $oldTabEl[0],\n onTabsChanged,\n animated\n };\n }\n};\nexport default {\n name: 'tabs',\n create() {\n const app = this;\n extend(app, {\n tab: {\n show: Tab.show.bind(app)\n }\n });\n },\n on: {\n 'pageInit tabMounted': function onInit(pageOrTabEl) {\n const $el = $(pageOrTabEl.el || pageOrTabEl);\n const animatedTabEl = $el.find('.tabs-animated-wrap > .tabs > .tab-active')[0];\n if (!animatedTabEl) return;\n const app = this;\n app.tab.show({\n tabEl: animatedTabEl,\n animatedInit: true,\n animate: false\n });\n }\n },\n clicks: {\n '.tab-link': function tabLinkClick($clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n if ($clickedEl.attr('href') && $clickedEl.attr('href').indexOf('#') === 0 || $clickedEl.attr('data-tab')) {\n const app = this;\n app.tab.show({\n tabEl: data.tab || $clickedEl.attr('href'),\n tabLinkEl: $clickedEl,\n animate: data.animate\n });\n }\n }\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, now, nextFrame } from '../../shared/utils.js';\nfunction swipePanel(panel) {\n const app = panel.app;\n if (panel.swipeInitialized) {\n return;\n }\n extend(panel, {\n swipeable: true,\n swipeInitialized: true\n });\n const params = panel.params;\n const {\n $el,\n $backdropEl,\n side,\n effect\n } = panel;\n let otherPanel;\n let isTouched;\n let isGestureStarted;\n let isMoved;\n let isScrolling;\n let isInterrupted;\n const touchesStart = {};\n let touchStartTime;\n let touchesDiff;\n let translate;\n let backdropOpacity;\n let panelWidth;\n let direction;\n let $viewEl;\n let touchMoves = 0;\n function handleTouchStart(e) {\n if (!panel.swipeable || isGestureStarted) return;\n if (!app.panel.allowOpen || !params.swipe && !params.swipeOnlyClose || isTouched) return;\n if ($('.modal-in:not(.toast):not(.notification), .photo-browser-in').length > 0) return;\n otherPanel = app.panel.get(side === 'left' ? 'right' : 'left') || {};\n const otherPanelOpened = otherPanel.opened && otherPanel.$el && !otherPanel.$el.hasClass('panel-in-breakpoint');\n if (!panel.opened && otherPanelOpened) {\n return;\n }\n if (!params.swipeOnlyClose) {\n if (otherPanelOpened) return;\n }\n if (e.target && e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'range') return;\n if ($(e.target).closest('.range-slider, swiper-container.tabs, .calendar-months, .no-swipe-panel, .card-opened').length > 0) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n if (params.swipeOnlyClose && !panel.opened) {\n return;\n }\n if (params.swipeActiveArea && !panel.opened) {\n if (side === 'left') {\n if (touchesStart.x > params.swipeActiveArea) return;\n }\n if (side === 'right') {\n if (touchesStart.x < app.width - params.swipeActiveArea) return;\n }\n }\n touchMoves = 0;\n $viewEl = $(panel.getViewEl());\n isMoved = false;\n isTouched = true;\n isScrolling = undefined;\n isInterrupted = false;\n touchStartTime = now();\n direction = undefined;\n }\n function handleTouchMove(e) {\n if (!isTouched || isGestureStarted || isInterrupted) return;\n touchMoves += 1;\n if (touchMoves < 2) return;\n if (e.f7PreventSwipePanel || app.preventSwipePanelBySwipeBack || app.preventSwipePanel) {\n isTouched = false;\n return;\n }\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));\n }\n if (isScrolling) {\n isTouched = false;\n return;\n }\n if (!direction) {\n if (pageX > touchesStart.x) {\n direction = 'to-right';\n } else {\n direction = 'to-left';\n }\n if (params.swipeActiveArea > 0 && !panel.opened) {\n if (side === 'left' && touchesStart.x > params.swipeActiveArea) {\n isTouched = false;\n return;\n }\n if (side === 'right' && touchesStart.x < app.width - params.swipeActiveArea) {\n isTouched = false;\n return;\n }\n }\n if ($el.hasClass('panel-in-breakpoint')) {\n isTouched = false;\n return;\n }\n if (side === 'left' && direction === 'to-left' && !$el.hasClass('panel-in') || side === 'right' && direction === 'to-right' && !$el.hasClass('panel-in')) {\n isTouched = false;\n return;\n }\n }\n let threshold = panel.opened ? 0 : -params.swipeThreshold;\n if (side === 'right') threshold = -threshold;\n if (!isMoved) {\n if (!panel.opened) {\n panel.insertToRoot();\n $el.addClass('panel-in-swipe');\n if ($backdropEl) $backdropEl.css('visibility', 'visible');\n $el.trigger('panel:swipeopen');\n panel.emit('local::swipeOpen panelSwipeOpen', panel);\n }\n panelWidth = $el[0].offsetWidth;\n if (effect === 'reveal' && $el.hasClass('panel-in-collapsed')) {\n panelWidth -= parseFloat($viewEl.css(`margin-${side}`));\n }\n $el.transition(0);\n }\n isMoved = true;\n if (e.cancelable) {\n e.preventDefault();\n }\n touchesDiff = pageX - touchesStart.x + threshold;\n const startTranslate = effect === 'floating' ? 8 : 0;\n if (side === 'right') {\n if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n translate = touchesDiff + (panel.opened ? startTranslate : panelWidth);\n if (translate < 0 - startTranslate) translate = -startTranslate;\n if (translate > panelWidth) {\n translate = panelWidth;\n }\n } else {\n translate = touchesDiff - (panel.opened ? panelWidth : 0);\n if (translate > 0) translate = 0;\n if (translate < -panelWidth) {\n translate = -panelWidth;\n }\n }\n } else {\n translate = touchesDiff + (panel.opened ? panelWidth : startTranslate);\n if (translate < 0) translate = 0;\n if (translate > panelWidth + startTranslate) {\n translate = panelWidth + startTranslate;\n }\n }\n const noFollowProgress = Math.abs(translate / panelWidth);\n if (effect === 'reveal') {\n if (!params.swipeNoFollow) {\n $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);\n if ($backdropEl) $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);\n }\n $el.trigger('panel:swipe', Math.abs(translate / panelWidth));\n panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));\n } else {\n if (side === 'left') translate -= panelWidth;\n if (!params.swipeNoFollow) {\n backdropOpacity = 1 - Math.abs(translate / panelWidth);\n if ($backdropEl) {\n $backdropEl.transition(0);\n $backdropEl.css({\n opacity: backdropOpacity\n });\n }\n $el.transform(`translate3d(${translate}px,0,0)`).transition(0);\n if (effect === 'push') {\n const viewTranslate = side === 'left' ? translate + panelWidth : translate - panelWidth;\n $viewEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);\n if ($backdropEl) {\n $backdropEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);\n }\n }\n }\n $el.trigger('panel:swipe', Math.abs(translate / panelWidth));\n panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));\n }\n if (params.swipeNoFollow) {\n const stateChanged = panel.opened && noFollowProgress === 0 || !panel.opened && noFollowProgress === 1;\n if (stateChanged) {\n isInterrupted = true;\n // eslint-disable-next-line\n handleTouchEnd(e);\n }\n }\n }\n function handleTouchEnd(e) {\n if (!isTouched || !isMoved) {\n isTouched = false;\n isMoved = false;\n return;\n }\n const isGesture = e.type === 'gesturestart' || isGestureStarted;\n isTouched = false;\n isMoved = false;\n const timeDiff = new Date().getTime() - touchStartTime;\n let action;\n const startTranslate = effect === 'floating' ? side === 'left' ? 8 : -8 : 0;\n const edge = (translate === startTranslate || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;\n const threshold = params.swipeThreshold || 0;\n if (isGesture) {\n action = 'reset';\n } else if (!panel.opened) {\n if (Math.abs(touchesDiff) < threshold) {\n action = 'reset';\n } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n if (translate === 0 + startTranslate) {\n action = 'swap'; // open\n } else if (timeDiff < 300 && Math.abs(translate) > 0) {\n action = 'swap'; // open\n } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) {\n action = 'swap'; // open\n } else {\n action = 'reset'; // close\n }\n } else if (translate === 0) {\n action = 'reset';\n } else if (timeDiff < 300 && Math.abs(translate) > 0 || timeDiff >= 300 && Math.abs(translate) >= panelWidth / 2) {\n action = 'swap';\n } else {\n action = 'reset';\n }\n } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {\n if (translate === 0) {\n action = 'reset'; // open\n } else if (timeDiff < 300 && Math.abs(translate) > 0) {\n action = 'swap'; // open\n } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) {\n action = 'reset'; // open\n } else {\n action = 'swap'; // close\n }\n } else if (translate === -panelWidth) {\n action = 'reset';\n } else if (timeDiff < 300 && Math.abs(translate) >= 0 || timeDiff >= 300 && Math.abs(translate) <= panelWidth / 2) {\n if (side === 'left' && translate === panelWidth) action = 'reset';else action = 'swap';\n } else {\n action = 'reset';\n }\n if (action === 'swap') {\n if (panel.opened) {\n panel.close(!edge);\n } else {\n panel.open(!edge);\n }\n }\n let removePanelInClass = true;\n if (action === 'reset') {\n if (!panel.opened) {\n if (edge) {\n // edge position\n $el.removeClass('panel-in-swipe');\n } else {\n removePanelInClass = false;\n const target = effect === 'reveal' ? $viewEl : $el;\n panel.setStateClasses('before-closing');\n target.transitionEnd(() => {\n if ($el.hasClass('panel-in')) return;\n $el.removeClass('panel-in-swipe');\n panel.setStateClasses('after-closing');\n });\n }\n }\n }\n if (effect === 'reveal' || effect === 'push') {\n nextFrame(() => {\n $viewEl.transition('');\n $viewEl.transform('');\n });\n }\n if (removePanelInClass) {\n $el.removeClass('panel-in-swipe');\n }\n $el.transition('').transform('');\n if ($backdropEl) {\n $backdropEl.transform('').transition('').css({\n opacity: '',\n visibility: ''\n });\n }\n }\n function handleGestureStart(e) {\n isGestureStarted = true;\n handleTouchEnd(e);\n }\n function handleGestureEnd() {\n isGestureStarted = false;\n }\n\n // Add Events\n app.on('touchstart:passive', handleTouchStart);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n app.on('gesturestart', handleGestureStart);\n app.on('gestureend', handleGestureEnd);\n panel.on('panelDestroy', () => {\n app.off('touchstart:passive', handleTouchStart);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n app.off('gesturestart', handleGestureStart);\n app.off('gestureend', handleGestureEnd);\n });\n}\nexport default swipePanel;", "import $ from '../../shared/dom7.js';\nimport { extend, nextFrame } from '../../shared/utils.js';\nimport { getSupport } from '../../shared/get-support.js';\nfunction resizablePanel(panel) {\n const app = panel.app;\n const support = getSupport();\n if (panel.resizableInitialized) return;\n extend(panel, {\n resizable: true,\n resizableWidth: null,\n resizableInitialized: true\n });\n const $htmlEl = $('html');\n const {\n $el,\n $backdropEl,\n side,\n effect\n } = panel;\n if (!$el) return;\n let isTouched;\n let isMoved;\n const touchesStart = {};\n let touchesDiff;\n let panelWidth;\n let $viewEl;\n let panelMinWidth;\n let panelMaxWidth;\n let visibleByBreakpoint;\n const isPushingPanel = effect !== 'cover' && effect !== 'floating';\n function transformCSSWidth(v) {\n if (!v) return null;\n if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {\n return parseInt(v, 10) / 100 * app.width;\n }\n const newV = parseInt(v, 10);\n if (Number.isNaN(newV)) return null;\n return newV;\n }\n function isResizable() {\n return panel.resizable && $el.hasClass('panel-resizable');\n }\n function handleTouchStart(e) {\n if (!isResizable()) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n isMoved = false;\n isTouched = true;\n panelMinWidth = transformCSSWidth($el.css('min-width'));\n panelMaxWidth = transformCSSWidth($el.css('max-width'));\n visibleByBreakpoint = $el.hasClass('panel-in-breakpoint');\n }\n function handleTouchMove(e) {\n if (!isTouched) return;\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n if (!isMoved) {\n panelWidth = $el[0].offsetWidth;\n $el.transition(0);\n $el.addClass('panel-resizing');\n $htmlEl.css('cursor', 'col-resize');\n if (isPushingPanel || visibleByBreakpoint) {\n $viewEl = $(panel.getViewEl());\n if (panel.$containerEl && panel.$containerEl.hasClass('page')) {\n $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));\n }\n }\n if (isPushingPanel && !visibleByBreakpoint) {\n $backdropEl.transition(0);\n $viewEl.transition(0);\n }\n }\n isMoved = true;\n e.preventDefault();\n touchesDiff = pageX - touchesStart.x;\n let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;\n if (panelMinWidth && !Number.isNaN(panelMinWidth)) {\n newPanelWidth = Math.max(newPanelWidth, panelMinWidth);\n }\n if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) {\n newPanelWidth = Math.min(newPanelWidth, panelMaxWidth);\n }\n newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);\n panel.resizableWidth = newPanelWidth;\n $el[0].style.width = `${newPanelWidth}px`;\n if (isPushingPanel && !visibleByBreakpoint) {\n if ($viewEl) {\n $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);\n }\n if ($backdropEl) {\n $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);\n }\n } else if (visibleByBreakpoint && $viewEl) {\n $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);\n }\n $el.trigger('panel:resize', newPanelWidth);\n panel.emit('local::resize panelResize', panel, newPanelWidth);\n }\n function handleTouchEnd() {\n $('html').css('cursor', '');\n if (!isTouched || !isMoved) {\n isTouched = false;\n isMoved = false;\n return;\n }\n isTouched = false;\n isMoved = false;\n $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);\n $el[0].style.width = '';\n if (isPushingPanel && !visibleByBreakpoint) {\n $viewEl.transform('');\n $backdropEl.transform('');\n }\n $el.removeClass('panel-resizing');\n nextFrame(() => {\n $el.transition('');\n if (isPushingPanel) {\n $backdropEl.transition('');\n if ($viewEl) $viewEl.transition('');\n }\n });\n }\n function handleResize() {\n if (!panel.opened || !panel.resizableWidth) return;\n panelMinWidth = transformCSSWidth($el.css('min-width'));\n panelMaxWidth = transformCSSWidth($el.css('max-width'));\n if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) {\n panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth);\n }\n if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) {\n panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth);\n }\n panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);\n $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);\n }\n if (panel.$el.find('.panel-resize-handler').length === 0) {\n panel.$el.append('');\n }\n panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');\n $el.addClass('panel-resizable');\n\n // Add Events\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);\n app.on('touchmove:active', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n app.on('resize', handleResize);\n panel.on('beforeOpen', handleResize);\n panel.once('panelDestroy', () => {\n $el.removeClass('panel-resizable');\n panel.$resizeHandlerEl.remove();\n panel.$el.off(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);\n app.off('touchmove:active', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n app.off('resize', handleResize);\n panel.off('beforeOpen', handleResize);\n });\n}\nexport default resizablePanel;", "import { getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { extend, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport swipePanel from './swipe-panel.js';\nimport resizablePanel from './resizable-panel.js';\nclass Panel extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n const extendedParams = extend({\n on: {}\n }, app.params.panel, params);\n super(extendedParams, [app]);\n const panel = this;\n panel.params = extendedParams;\n panel.$containerEl = panel.params.containerEl ? $(panel.params.containerEl).eq(0) : app.$el;\n panel.containerEl = panel.$containerEl[0];\n if (!panel.containerEl) {\n panel.$containerEl = app.$el;\n panel.containerEl = app.$el[0];\n }\n let $el;\n if (panel.params.el) {\n $el = $(panel.params.el).eq(0);\n } else if (panel.params.content) {\n $el = $(panel.params.content).filter(node => node.nodeType === 1).eq(0);\n }\n if ($el.length === 0) return panel;\n if ($el[0].f7Panel) return $el[0].f7Panel;\n $el[0].f7Panel = panel;\n let {\n side,\n effect,\n resizable\n } = panel.params;\n if (typeof side === 'undefined') side = $el.hasClass('panel-left') ? 'left' : 'right';\n if (typeof effect === 'undefined')\n // eslint-disable-next-line\n effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : $el.hasClass('panel-floating') ? 'floating' : 'reveal';\n if (typeof resizable === 'undefined') resizable = $el.hasClass('panel-resizable');\n let $backdropEl;\n if (panel.params.backdrop && panel.params.backdropEl) {\n $backdropEl = $(panel.params.backdropEl);\n } else if (panel.params.backdrop) {\n $backdropEl = panel.$containerEl.children('.panel-backdrop');\n if ($backdropEl.length === 0) {\n $backdropEl = $('');\n panel.$containerEl.prepend($backdropEl);\n }\n }\n extend(panel, {\n app,\n side,\n effect,\n resizable,\n $el,\n el: $el[0],\n opened: false,\n $backdropEl,\n backdropEl: $backdropEl && $backdropEl[0]\n });\n\n // Install Modules\n panel.useModules();\n\n // Init\n panel.init();\n return panel;\n }\n getViewEl() {\n const panel = this;\n let viewEl;\n if (panel.$containerEl.children('.views').length > 0) {\n viewEl = panel.$containerEl.children('.views')[0];\n } else {\n viewEl = panel.$containerEl.children('.view')[0];\n }\n return viewEl;\n }\n setStateClasses(state) {\n const panel = this;\n const {\n side,\n el,\n effect\n } = panel;\n const viewEl = panel.getViewEl();\n const panelInView = viewEl && viewEl.contains(el);\n const $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');\n if (state === 'open') {\n $targetEl.addClass(`with-panel with-panel-${panel.side}-${panel.effect}`);\n }\n if (state === 'before-closing') {\n $targetEl.addClass('with-panel-closing');\n }\n if (state === 'closing') {\n $targetEl.addClass('with-panel-closing');\n $targetEl.removeClass(`with-panel with-panel-${panel.side}-${panel.effect}`);\n }\n if (state === 'after-closing') {\n $targetEl.removeClass('with-panel-closing');\n }\n if (state === 'closed') {\n $targetEl.removeClass(`with-panel-${side}-${effect}`);\n }\n }\n enableVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = false;\n panel.setVisibleBreakpoint();\n return panel;\n }\n disableVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = true;\n panel.setVisibleBreakpoint();\n return panel;\n }\n toggleVisibleBreakpoint() {\n const panel = this;\n panel.visibleBreakpointDisabled = !panel.visibleBreakpointDisabled;\n panel.setVisibleBreakpoint();\n return panel;\n }\n setVisibleBreakpoint(emitEvents) {\n if (emitEvents === void 0) {\n emitEvents = true;\n }\n const panel = this;\n const app = panel.app;\n if (!panel.visibleBreakpointResizeHandler) {\n panel.visibleBreakpointResizeHandler = function visibleBreakpointResizeHandler() {\n panel.setVisibleBreakpoint();\n };\n app.on('resize', panel.visibleBreakpointResizeHandler);\n }\n const {\n side,\n $el,\n $containerEl,\n params,\n visibleBreakpointDisabled\n } = panel;\n const breakpoint = params.visibleBreakpoint;\n const $viewEl = $(panel.getViewEl());\n const wasVisible = $el.hasClass('panel-in-breakpoint');\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs, .fab'));\n }\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !visibleBreakpointDisabled) {\n if (!wasVisible) {\n panel.setStateClasses('closed');\n $el.addClass('panel-in-breakpoint').removeClass('panel-in panel-in-collapsed');\n panel.onOpen(false);\n panel.onOpened();\n $viewEl.css({\n [`margin-${side}`]: `${$el.width()}px`\n });\n app.allowPanelOpen = true;\n if (emitEvents) {\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n } else {\n $viewEl.css({\n [`margin-${side}`]: `${$el.width()}px`\n });\n }\n } else if (wasVisible) {\n $el.removeClass('panel-in-breakpoint panel-in');\n panel.onClose();\n panel.onClosed();\n $viewEl.css({\n [`margin-${side}`]: ''\n });\n if (emitEvents) {\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n }\n }\n enableCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = false;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n disableCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = true;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n toggleCollapsedBreakpoint() {\n const panel = this;\n panel.collapsedBreakpointDisabled = !panel.collapsedBreakpointDisabled;\n panel.setCollapsedBreakpoint();\n return panel;\n }\n setCollapsedBreakpoint(emitEvents) {\n if (emitEvents === void 0) {\n emitEvents = true;\n }\n const panel = this;\n const app = panel.app;\n if (!panel.collapsedBreakpointResizeHandler) {\n panel.collapsedBreakpointResizeHandler = function collapsedBreakpointResizeHandler() {\n panel.setCollapsedBreakpoint();\n };\n app.on('resize', panel.collapsedBreakpointResizeHandler);\n }\n const {\n $el,\n params,\n collapsedBreakpointDisabled\n } = panel;\n if ($el.hasClass('panel-in-breakpoint')) return;\n const breakpoint = params.collapsedBreakpoint;\n const wasVisible = $el.hasClass('panel-in-collapsed');\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !collapsedBreakpointDisabled) {\n if (!wasVisible) {\n panel.setStateClasses('closed');\n $el.addClass('panel-in-collapsed').removeClass('panel-in');\n panel.collapsed = true;\n app.allowPanelOpen = true;\n if (emitEvents) {\n panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);\n panel.$el.trigger('panel:collapsedbreakpoint');\n }\n }\n } else if (wasVisible) {\n $el.removeClass('panel-in-collapsed panel-in');\n panel.collapsed = false;\n if (emitEvents) {\n panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);\n panel.$el.trigger('panel:collapsedbreakpoint');\n }\n }\n }\n enableResizable() {\n const panel = this;\n if (panel.resizableInitialized) {\n panel.resizable = true;\n panel.$el.addClass('panel-resizable');\n } else {\n resizablePanel(panel);\n }\n return panel;\n }\n disableResizable() {\n const panel = this;\n panel.resizable = false;\n panel.$el.removeClass('panel-resizable');\n return panel;\n }\n enableSwipe() {\n const panel = this;\n if (panel.swipeInitialized) {\n panel.swipeable = true;\n } else {\n swipePanel(panel);\n }\n return panel;\n }\n disableSwipe() {\n const panel = this;\n panel.swipeable = false;\n return panel;\n }\n onOpen(modifyHtmlClasses) {\n if (modifyHtmlClasses === void 0) {\n modifyHtmlClasses = true;\n }\n const panel = this;\n // eslint-disable-next-line\n panel._openTransitionStarted = false;\n const app = panel.app;\n panel.opened = true;\n app.panel.allowOpen = false;\n panel.$el.trigger('panel:beforeopen');\n panel.emit('local::beforeOpen panelBeforeOpen', panel);\n if (modifyHtmlClasses) {\n panel.setStateClasses('open');\n }\n panel.$el.trigger('panel:open');\n panel.emit('local::open panelOpen', panel);\n }\n onOpened() {\n const panel = this;\n const app = panel.app;\n app.panel.allowOpen = true;\n panel.$el.trigger('panel:opened');\n panel.emit('local::opened panelOpened', panel);\n }\n onClose() {\n const panel = this;\n const app = panel.app;\n panel.opened = false;\n app.panel.allowOpen = false;\n panel.$el.trigger('panel:beforeclose');\n panel.emit('local::beforeClose panelBeforeClose', panel);\n panel.setStateClasses('closing');\n panel.$el.trigger('panel:close');\n panel.emit('local::close panelClose', panel);\n }\n onClosed() {\n const panel = this;\n const app = panel.app;\n app.panel.allowOpen = true;\n panel.setStateClasses('after-closing');\n panel.$el.removeClass('panel-out');\n if (panel.$backdropEl) {\n const otherPanel = app.panel.get('.panel-in');\n const shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;\n if (shouldHideBackdrop) {\n panel.$backdropEl.removeClass('panel-backdrop-in');\n }\n }\n panel.$el.trigger('panel:closed');\n panel.emit('local::closed panelClosed', panel);\n }\n toggle(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const breakpoint = panel.params.visibleBreakpoint;\n const app = panel.app;\n if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null) {\n return panel.toggleVisibleBreakpoint();\n }\n if (panel.opened) panel.close(animate);else panel.open(animate);\n return panel;\n }\n insertToRoot() {\n const panel = this;\n const document = getDocument();\n const {\n $el,\n $backdropEl,\n $containerEl\n } = panel;\n const $panelParentEl = $el.parent();\n const wasInDom = $el.parents(document).length > 0;\n if (!$panelParentEl.is($containerEl) || $el.prevAll('.views, .view').length) {\n const $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);\n const $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);\n if ($insertBeforeEl.length) {\n $el.insertBefore($insertBeforeEl);\n } else if ($insertAfterEl) {\n $el.insertBefore($insertAfterEl);\n } else {\n $containerEl.prepend($el);\n }\n if ($backdropEl && $backdropEl.length && (!$backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0 || $backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0)) {\n $backdropEl.insertBefore($el);\n }\n panel.once('panelClosed', () => {\n if (wasInDom) {\n $panelParentEl.append($el);\n } else {\n $el.remove();\n }\n });\n }\n }\n open(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const app = panel.app;\n if (!app.panel.allowOpen) return false;\n const {\n effect,\n $el,\n $backdropEl,\n opened,\n $containerEl\n } = panel;\n if (!$el || $el.hasClass('panel-in')) {\n return panel;\n }\n panel.insertToRoot();\n\n // Ignore if opened\n if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false;\n\n // Close if some panel is opened\n const otherOpenedPanel = app.panel.get('.panel-in');\n if (otherOpenedPanel && otherOpenedPanel !== panel) {\n otherOpenedPanel.close(animate);\n }\n $el[animate ? 'removeClass' : 'addClass']('not-animated');\n $el.addClass('panel-in');\n if ($backdropEl) {\n $backdropEl.addClass('panel-backdrop-in');\n $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');\n }\n if (['cover', 'push', 'floating'].includes(panel.effect)) {\n /* eslint no-underscore-dangle: [\"error\", { \"allow\": [\"_clientLeft\"] }] */\n panel._clientLeft = $el[0].clientLeft;\n }\n\n // Transitionend\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;\n function panelTransitionStart() {\n transitionEndTarget.transitionStart(() => {\n // eslint-disable-next-line\n panel._openTransitionStarted = true;\n });\n }\n function panelTransitionEnd() {\n transitionEndTarget.transitionEnd(e => {\n if ($(e.target).is(transitionEndTarget)) {\n if ($el.hasClass('panel-out')) {\n panel.onClosed();\n } else {\n panel.onOpened();\n }\n } else panelTransitionEnd();\n });\n }\n if (animate) {\n if ($backdropEl) {\n $backdropEl.removeClass('not-animated');\n }\n panelTransitionStart();\n panelTransitionEnd();\n $el.removeClass('panel-out not-animated').addClass('panel-in');\n panel.onOpen();\n } else {\n if ($backdropEl) {\n $backdropEl.addClass('not-animated');\n }\n $el.removeClass('panel-out').addClass('panel-in not-animated');\n panel.onOpen();\n panel.onOpened();\n // eslint-disable-next-line\n panel._openTransitionStarted = true;\n }\n return true;\n }\n close(animate) {\n if (animate === void 0) {\n animate = true;\n }\n const panel = this;\n const {\n effect,\n $el,\n $backdropEl,\n opened,\n $containerEl\n } = panel;\n if (!opened || $el.hasClass('panel-in-breakpoint') || !$el.hasClass('panel-in')) return panel;\n $el[animate ? 'removeClass' : 'addClass']('not-animated');\n if ($backdropEl) {\n $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');\n }\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;\n // eslint-disable-next-line\n if (!panel._openTransitionStarted) {\n // eslint-disable-next-line\n animate = false;\n }\n function transitionEnd() {\n if ($el.hasClass('panel-out')) {\n panel.onClosed();\n } else if ($el.hasClass('panel-in')) {\n panel.onOpened();\n }\n panel.setStateClasses('after-closing');\n }\n if (animate) {\n transitionEndTarget.transitionEnd(() => {\n transitionEnd();\n });\n $el.removeClass('panel-in').addClass('panel-out');\n // Emit close\n panel.onClose();\n } else {\n $el.addClass('not-animated').removeClass('panel-in').addClass('panel-out');\n // Emit close\n panel.onClose();\n panel.onClosed();\n }\n return panel;\n }\n init() {\n const panel = this;\n // const app = panel.app;\n if (typeof panel.params.visibleBreakpoint !== 'undefined') {\n panel.setVisibleBreakpoint();\n }\n if (typeof panel.params.collapsedBreakpoint !== 'undefined') {\n panel.setCollapsedBreakpoint();\n }\n if (panel.params.swipe) {\n panel.enableSwipe();\n }\n if (panel.resizable) {\n panel.enableResizable();\n }\n }\n destroy() {\n let panel = this;\n const app = panel.app;\n const {\n $containerEl\n } = panel;\n if (!panel.$el) {\n // Panel already destroyed\n return;\n }\n panel.emit('local::beforeDestroy panelBeforeDestroy', panel);\n panel.$el.trigger('panel:beforedestroy');\n if (panel.visibleBreakpointResizeHandler) {\n app.off('resize', panel.visibleBreakpointResizeHandler);\n }\n if (panel.collapsedBreakpointResizeHandler) {\n app.off('resize', panel.collapsedBreakpointResizeHandler);\n }\n if (panel.$el.hasClass('panel-in-breakpoint') || panel.$el.hasClass('panel-in-collapsed')) {\n const $viewEl = $(panel.getViewEl());\n if ($containerEl && $containerEl.hasClass('page')) {\n $viewEl.add($containerEl.children('.page-content, .tabs'));\n }\n panel.$el.removeClass('panel-in-breakpoint panel-in-collapsed panel-in');\n $viewEl.css({\n [`margin-${panel.side}`]: ''\n });\n panel.emit('local::breakpoint panelBreakpoint', panel);\n panel.$el.trigger('panel:breakpoint');\n }\n panel.$el.trigger('panel:destroy');\n panel.emit('local::destroy panelDestroy', panel);\n if (panel.el) {\n panel.el.f7Panel = null;\n delete panel.el.f7Panel;\n }\n deleteProps(panel);\n panel = null;\n }\n}\nexport default Panel;", "import $ from '../../shared/dom7.js';\nimport { extend } from '../../shared/utils.js';\nimport Panel from './panel-class.js';\nexport default {\n name: 'panel',\n params: {\n panel: {\n opened: undefined,\n // default based on panel-in class\n side: undefined,\n // default based on panel class\n effect: undefined,\n // default based on panel class\n resizable: undefined,\n // default based on panel-resizable class\n backdrop: true,\n backdropEl: undefined,\n visibleBreakpoint: undefined,\n collapsedBreakpoint: undefined,\n swipe: false,\n // or true\n swipeNoFollow: false,\n // or true\n swipeOnlyClose: false,\n swipeActiveArea: 0,\n swipeThreshold: 0,\n closeByBackdropClick: true,\n containerEl: undefined\n }\n },\n static: {\n Panel\n },\n create() {\n const app = this;\n extend(app, {\n panel: {\n allowOpen: true,\n create(params) {\n return new Panel(app, params);\n },\n get(el) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el instanceof Panel) return el;\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n const $el = $(el);\n if ($el.length === 0 || $el.length > 1) return undefined;\n return $el[0].f7Panel;\n },\n destroy(el) {\n if (el === void 0) {\n el = '.panel';\n }\n const panel = app.panel.get(el);\n if (panel && panel.destroy) return panel.destroy();\n return undefined;\n },\n open(el, animate) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.open) return panel.open(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.open(animate);\n }\n return undefined;\n },\n close(el, animate) {\n if (el === void 0) {\n el = '.panel-in';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.open) return panel.close(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.close(animate);\n }\n return undefined;\n },\n toggle(el, animate) {\n if (el === void 0) {\n el = '.panel';\n }\n if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line\n let panel = app.panel.get(el);\n if (panel && panel.toggle) return panel.toggle(animate);\n if (!panel) {\n panel = app.panel.create({\n el\n });\n return panel.toggle(animate);\n }\n return undefined;\n }\n }\n });\n },\n on: {\n init() {\n const app = this;\n $('.panel-init').each(panelEl => {\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.panel-init').each(panelEl => {\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n });\n },\n pageBeforeRemove(page) {\n const app = this;\n page.$el.find('.panel-init').each(panelEl => {\n const panel = app.panel.get(panelEl);\n if (panel && panel.destroy) panel.destroy();\n });\n }\n },\n vnode: {\n 'panel-init': {\n insert(vnode) {\n const app = this;\n const panelEl = vnode.elm;\n const params = Object.assign({\n el: panelEl\n }, $(panelEl).dataset() || {});\n app.panel.create(params);\n },\n destroy(vnode) {\n const app = this;\n const panelEl = vnode.elm;\n const panel = app.panel.get(panelEl);\n if (panel && panel.destroy) panel.destroy();\n }\n }\n },\n clicks: {\n '.panel-open': function open(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.open(data.panel, data.animate);\n },\n '.panel-close': function close(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.close(data.panel, data.animate);\n },\n '.panel-toggle': function close(clickedEl, data) {\n if (data === void 0) {\n data = {};\n }\n const app = this;\n app.panel.toggle(data.panel, data.animate);\n },\n '.panel-backdrop': function close() {\n const app = this;\n const $panelEl = $('.panel-in:not(.panel-out)');\n if (!$panelEl.length) return;\n const instance = $panelEl[0] && $panelEl[0].f7Panel;\n $panelEl.trigger('panel:backdrop-click');\n if (instance) {\n instance.emit('backdropClick', instance);\n }\n app.emit('panelBackdropClick', instance || $panelEl[0]);\n if (instance && instance.params.closeByBackdropClick === false) return;\n if (app.params.panel.closeByBackdropClick) app.panel.close();\n }\n }\n};", "/* eslint no-param-reassign: \"off\" */\nimport { getDocument } from 'ssr-window';\nimport { bindMethods } from '../../shared/utils.js';\nimport { getSupport } from '../../shared/get-support.js';\nimport { getDevice } from '../../shared/get-device.js';\nimport $ from '../../shared/dom7.js';\nconst CardExpandable = {\n open(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable';\n }\n if (animate === void 0) {\n animate = true;\n }\n const app = this;\n const device = getDevice();\n const document = getDocument();\n const support = getSupport();\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl || !$cardEl.length) return;\n if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;\n const $pageEl = $cardEl.parents('.page').eq(0);\n if (!$pageEl.length) return;\n if ($pageEl.find('.card-opened').length) {\n return;\n }\n let prevented;\n function prevent() {\n prevented = true;\n }\n $cardEl.trigger('card:beforeopen', {\n prevent\n });\n app.emit('cardBeforeOpen', $cardEl[0], prevent);\n if (prevented) return;\n const cardParams = Object.assign({\n animate\n }, app.params.card, $cardEl.dataset());\n const $pageContentEl = $cardEl.parents('.page-content');\n let $backdropEl;\n if ($cardEl.attr('data-backdrop-el')) {\n $backdropEl = $($cardEl.attr('data-backdrop-el'));\n }\n if (!$backdropEl && cardParams.backdrop) {\n $backdropEl = $pageContentEl.find('.card-backdrop');\n if (!$backdropEl.length) {\n $backdropEl = $('');\n $pageContentEl.append($backdropEl);\n }\n }\n let $navbarEl;\n let $toolbarEl;\n if (cardParams.hideNavbarOnOpen) {\n $navbarEl = $pageEl.children('.navbar');\n if (!$navbarEl.length) {\n if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;\n }\n }\n if (cardParams.hideToolbarOnOpen) {\n $toolbarEl = $pageEl.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.views').children('.toolbar');\n }\n }\n const currTransform = $cardEl.css('transform');\n let hasTransform;\n if (currTransform && currTransform.match(/[2-9]/)) {\n hasTransform = true;\n }\n const $cardContentEl = $cardEl.children('.card-content');\n const $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size');\n $cardEl.append($cardSizeEl);\n let cardWidth = $cardEl[0].offsetWidth;\n let cardHeight = $cardEl[0].offsetHeight;\n let pageWidth = $pageEl[0].offsetWidth;\n let pageHeight = $pageEl[0].offsetHeight;\n let maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;\n let maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;\n let statusbarHeight;\n if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {\n statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);\n if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;\n }\n if (statusbarHeight) {\n maxHeight -= statusbarHeight;\n }\n let scaleX = maxWidth / cardWidth;\n let scaleY = maxHeight / cardHeight;\n let offset = $cardEl.offset();\n let pageOffset = $pageEl.offset();\n if (statusbarHeight) {\n pageOffset.top += statusbarHeight / 2;\n }\n offset.left -= pageOffset.left;\n let cardLeftOffset;\n let cardTopOffset;\n if (hasTransform) {\n const transformValues = currTransform.replace(/matrix\\(|\\)/g, '').split(',').map(el => el.trim());\n if (transformValues && transformValues.length > 1) {\n const scale = parseFloat(transformValues[0]);\n cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2;\n cardTopOffset = offset.top - pageOffset.top - cardHeight * (1 - scale) / 2;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n } else {\n cardLeftOffset = $cardEl[0].offsetLeft;\n cardTopOffset = $cardEl[0].offsetTop - ($pageContentEl.length ? $pageContentEl[0].scrollTop : 0);\n }\n } else {\n cardLeftOffset = offset.left;\n cardTopOffset = offset.top - pageOffset.top;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n }\n cardLeftOffset -= (pageWidth - maxWidth) / 2;\n cardTopOffset -= (pageHeight - maxHeight) / 2;\n let cardRightOffset = maxWidth - cardWidth - cardLeftOffset;\n if (app.rtl) {\n [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];\n }\n let cardBottomOffset = maxHeight - cardHeight - cardTopOffset;\n let translateX = (cardRightOffset - cardLeftOffset) / 2;\n let translateY = (cardBottomOffset - cardTopOffset) / 2;\n if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) {\n if ($navbarEl.closest('.navbar-hidden').length) {\n // Was hidden\n $cardEl[0].f7KeepNavbarOnClose = true;\n } else {\n delete $cardEl[0].f7KeepNavbarOnClose;\n app.navbar.hide($navbarEl, cardParams.animate, cardParams.hideStatusbarOnOpen, true);\n }\n }\n if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) {\n if ($toolbarEl.closest('.toolbar-hidden').length) {\n // Was hidden\n $cardEl[0].f7KeepToolbarOnClose = true;\n } else {\n delete $cardEl[0].f7KeepToolbarOnClose;\n app.toolbar.hide($toolbarEl, cardParams.animate);\n }\n }\n if ($backdropEl) {\n $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in');\n }\n $cardEl.removeClass('card-transitioning');\n if (cardParams.animate) {\n $cardEl.addClass('card-opening');\n }\n $cardEl.trigger('card:open');\n app.emit('cardOpen', $cardEl[0]);\n function transitionEnd() {\n $pageEl.addClass('page-with-card-opened');\n if (device.ios && $pageContentEl.length) {\n $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);\n setTimeout(() => {\n $pageContentEl.css('height', '');\n });\n }\n $cardEl.addClass('card-opened');\n $cardEl.removeClass('card-opening');\n $cardEl.trigger('card:opened');\n app.emit('cardOpened', $cardEl[0], $pageEl[0]);\n }\n $cardContentEl.css({\n width: `${maxWidth}px`,\n height: `${maxHeight}px`\n }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n if (cardParams.animate) {\n $cardEl.transitionEnd(() => {\n transitionEnd();\n });\n } else {\n transitionEnd();\n }\n function onResize() {\n $cardEl.removeClass('card-transitioning');\n cardWidth = $cardEl[0].offsetWidth;\n cardHeight = $cardEl[0].offsetHeight;\n pageWidth = $pageEl[0].offsetWidth;\n pageHeight = $pageEl[0].offsetHeight;\n maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;\n maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;\n statusbarHeight = 0;\n if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {\n statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);\n if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;\n }\n if (statusbarHeight) {\n maxHeight -= statusbarHeight;\n }\n scaleX = maxWidth / cardWidth;\n scaleY = maxHeight / cardHeight;\n $cardEl.transform('translate3d(0px, 0px, 0) scale(1)');\n offset = $cardEl.offset();\n pageOffset = $pageEl.offset();\n if (statusbarHeight) {\n pageOffset.top += statusbarHeight / 2;\n }\n offset.left -= pageOffset.left;\n offset.top -= pageOffset.top;\n cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2;\n if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;\n cardTopOffset = offset.top - (pageHeight - maxHeight) / 2;\n cardRightOffset = maxWidth - cardWidth - cardLeftOffset;\n cardBottomOffset = maxHeight - cardHeight - cardTopOffset;\n if (app.rtl) {\n [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];\n }\n translateX = (cardRightOffset - cardLeftOffset) / 2;\n translateY = (cardBottomOffset - cardTopOffset) / 2;\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n $cardContentEl.css({\n width: `${maxWidth}px`,\n height: `${maxHeight}px`\n }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);\n }\n let cardScrollTop;\n let isTouched;\n let isMoved;\n let touchStartX;\n let touchStartY;\n let touchEndX;\n let touchEndY;\n let isScrolling;\n let progress;\n let isV;\n let isH;\n let $cardScrollableEl;\n function onTouchStart(e) {\n if (!$(e.target).closest($cardEl).length || !e.isTrusted) return;\n if (!$cardEl.hasClass('card-opened')) return;\n $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);\n if ($cardScrollableEl[0] && $cardScrollableEl[0] !== $cardContentEl[0] && !$cardScrollableEl[0].contains(e.target)) {\n cardScrollTop = 0;\n } else {\n cardScrollTop = $cardScrollableEl.scrollTop();\n }\n isTouched = true;\n touchStartX = e.targetTouches[0].pageX;\n touchStartY = e.targetTouches[0].pageY;\n isScrolling = undefined;\n isV = false;\n isH = false;\n }\n function onTouchMove(e) {\n if (!isTouched || !e.isTrusted) return;\n touchEndX = e.targetTouches[0].pageX;\n touchEndY = e.targetTouches[0].pageY;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX));\n }\n if (!isH && !isV) {\n if (!isScrolling && e.targetTouches[0].clientX <= 50) {\n isH = true;\n } else {\n isV = true;\n }\n }\n if (!(isH || isV) || isV && cardScrollTop !== 0) {\n isTouched = true;\n isMoved = true;\n return;\n }\n if (!isMoved) {\n $cardEl.removeClass('card-transitioning');\n }\n isMoved = true;\n progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0);\n if (progress > 0 && isV || isH) {\n if (isV && device.ios && $cardScrollableEl[0] === $cardContentEl[0]) {\n $cardScrollableEl.css('-webkit-overflow-scrolling', 'auto');\n $cardScrollableEl.scrollTop(0);\n }\n e.preventDefault();\n }\n if (progress > 1) progress **= 0.3;\n if (progress > (isV ? 1.3 : 1.1)) {\n isTouched = false;\n isMoved = false;\n app.card.close($cardEl);\n } else {\n $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX * (1 - progress * 0.2)}, ${scaleY * (1 - progress * 0.2)})`);\n }\n }\n function onTouchEnd(e) {\n if (!isTouched || !isMoved || !e.isTrusted) return;\n isTouched = false;\n isMoved = false;\n if (device.ios) {\n $cardScrollableEl.css('-webkit-overflow-scrolling', '');\n }\n if (progress >= 0.8) {\n app.card.close($cardEl);\n } else {\n $cardEl.addClass('card-transitioning').transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);\n }\n }\n $cardEl[0].detachEventHandlers = function detachEventHandlers() {\n app.off('resize', onResize);\n if (support.touch && cardParams.swipeToClose) {\n app.off('touchstart:passive', onTouchStart);\n app.off('touchmove:active', onTouchMove);\n app.off('touchend:passive', onTouchEnd);\n }\n };\n app.on('resize', onResize);\n if (support.touch && cardParams.swipeToClose) {\n app.on('touchstart:passive', onTouchStart);\n app.on('touchmove:active', onTouchMove);\n app.on('touchend:passive', onTouchEnd);\n }\n },\n close(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable.card-opened';\n }\n if (animate === void 0) {\n animate = true;\n }\n const app = this;\n const device = getDevice();\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl || !$cardEl.length) return;\n if (!$cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;\n const $cardContentEl = $cardEl.children('.card-content');\n const $pageContentEl = $cardEl.parents('.page-content');\n const $pageEl = $cardEl.parents('.page').eq(0);\n if (!$pageEl.length) return;\n const cardParams = Object.assign({\n animate\n }, app.params.card, $cardEl.dataset());\n const $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);\n let $navbarEl;\n let $toolbarEl;\n let $backdropEl;\n if ($cardEl.attr('data-backdrop-el')) {\n $backdropEl = $($cardEl.attr('data-backdrop-el'));\n }\n if (cardParams.backdrop) {\n $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop');\n }\n if (cardParams.hideNavbarOnOpen) {\n $navbarEl = $pageEl.children('.navbar');\n if (!$navbarEl.length) {\n if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;\n }\n if ($navbarEl && $navbarEl.length && !$cardEl[0].f7KeepNavbarOnClose) {\n app.navbar.show($navbarEl, cardParams.animate, true);\n }\n }\n if (cardParams.hideToolbarOnOpen) {\n $toolbarEl = $pageEl.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = $pageEl.parents('.views').children('.toolbar');\n }\n if ($toolbarEl && $toolbarEl.length && !$cardEl[0].f7KeepToolbarOnClose) {\n app.toolbar.show($toolbarEl, cardParams.animate);\n }\n }\n $pageEl.removeClass('page-with-card-opened');\n if (device.ios && $pageContentEl.length) {\n $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);\n setTimeout(() => {\n $pageContentEl.css('height', '');\n });\n }\n if ($backdropEl && $backdropEl.length) {\n $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out');\n }\n $cardEl.removeClass('card-opened card-transitioning');\n if (cardParams.animate) {\n $cardEl.addClass('card-closing');\n } else {\n $cardEl.addClass('card-no-transition');\n }\n $cardEl.transform('');\n $cardEl.trigger('card:close');\n app.emit('cardClose', $cardEl[0], $pageEl[0]);\n const animateWidth = $cardEl.hasClass('card-expandable-animate-width');\n function transitionEnd() {\n if (!animateWidth) {\n $cardContentEl.css({\n width: '',\n height: ''\n });\n }\n if ($backdropEl && $backdropEl.length) {\n $backdropEl.removeClass('card-backdrop-in card-backdrop-out');\n }\n $cardEl.removeClass('card-closing card-no-transition');\n $cardEl.trigger('card:closed');\n $cardEl.find('.card-expandable-size').remove();\n app.emit('cardClosed', $cardEl[0], $pageEl[0]);\n }\n if (animateWidth) {\n $cardContentEl.css({\n width: '',\n height: ''\n });\n }\n $cardContentEl.transform('').scrollTop(0, animate ? 300 : 0);\n if ($cardScrollableEl.length && $cardScrollableEl[0] !== $cardContentEl[0]) {\n $cardScrollableEl.scrollTop(0, animate ? 300 : 0);\n }\n if (animate) {\n $cardContentEl.transitionEnd(() => {\n transitionEnd();\n });\n } else {\n transitionEnd();\n }\n if ($cardEl[0].detachEventHandlers) {\n $cardEl[0].detachEventHandlers();\n delete $cardEl[0].detachEventHandlers;\n }\n },\n toggle(cardEl, animate) {\n if (cardEl === void 0) {\n cardEl = '.card-expandable';\n }\n const app = this;\n const $cardEl = $(cardEl).eq(0);\n if (!$cardEl.length) return;\n if ($cardEl.hasClass('card-opened')) {\n app.card.close($cardEl, animate);\n } else {\n app.card.open($cardEl, animate);\n }\n }\n};\nexport default {\n name: 'card',\n params: {\n card: {\n hideNavbarOnOpen: true,\n hideStatusbarOnOpen: true,\n hideToolbarOnOpen: true,\n scrollableEl: '.card-content',\n swipeToClose: true,\n closeByBackdropClick: true,\n backdrop: true\n }\n },\n create() {\n const app = this;\n bindMethods(app, {\n card: CardExpandable\n });\n },\n on: {\n pageBeforeIn(page) {\n const app = this;\n if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) {\n app.navbar.hide(page.navbarEl, true, app.params.card.hideStatusbarOnOpen, true);\n }\n if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) {\n let $toolbarEl = page.$el.children('.toolbar');\n if (!$toolbarEl.length) {\n $toolbarEl = page.$el.parents('.view').children('.toolbar');\n }\n if (!$toolbarEl.length) {\n $toolbarEl = page.$el.parents('.views').children('.toolbar');\n }\n if ($toolbarEl && $toolbarEl.length) {\n app.toolbar.hide($toolbarEl);\n }\n }\n }\n },\n clicks: {\n '.card-close': function closeCard($clickedEl, data) {\n const app = this;\n app.card.close(data.card, data.animate);\n },\n '.card-open': function closeCard($clickedEl, data) {\n const app = this;\n app.card.open(data.card, data.animate);\n },\n '.card-expandable': function toggleExpandableCard($clickedEl, data, e) {\n const app = this;\n if ($clickedEl.hasClass('card-opened') || $clickedEl.hasClass('card-opening') || $clickedEl.hasClass('card-closing')) return;\n if ($(e.target).closest('.card-prevent-open, .card-close').length) return;\n app.card.open($clickedEl);\n },\n '.card-backdrop-in': function onBackdropClick() {\n const app = this;\n let needToClose = false;\n if (app.params.card.closeByBackdropClick) needToClose = true;\n const $openedCardEl = $('.card-opened');\n if (!$openedCardEl.length) return;\n if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') {\n needToClose = true;\n } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') {\n needToClose = false;\n }\n if (needToClose) app.card.close($openedCardEl);\n }\n }\n};", "export default {\n name: 'chip'\n};", "import { getWindow, getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { extend, serializeObject } from '../../shared/utils.js';\n\n// Form Data\nconst FormData = {\n store(form, data) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n // Store form data in app.formsData\n app.form.data[`form-${formId}`] = data;\n\n // Store form data in local storage also\n window.localStorage[`f7form-${formId}`] = JSON.stringify(data);\n },\n get(form) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n if (window.localStorage[`f7form-${formId}`]) {\n return JSON.parse(window.localStorage[`f7form-${formId}`]);\n }\n if (app.form.data[`form-${formId}`]) {\n return app.form.data[`form-${formId}`];\n }\n return undefined;\n },\n remove(form) {\n const app = this;\n const window = getWindow();\n let formId = form;\n const $formEl = $(form);\n if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {\n formId = $formEl.attr('id');\n }\n\n // Delete form data from app.formsData\n if (app.form.data[`form-${formId}`]) {\n app.form.data[`form-${formId}`] = '';\n delete app.form.data[`form-${formId}`];\n }\n\n // Delete form data from local storage also\n if (window.localStorage[`f7form-${formId}`]) {\n window.localStorage[`f7form-${formId}`] = '';\n window.localStorage.removeItem(`f7form-${formId}`);\n }\n }\n};\n\n// Form Storage\nconst FormStorage = {\n init(formEl) {\n const app = this;\n const $formEl = $(formEl);\n const formId = $formEl.attr('id');\n if (!formId) return;\n const initialData = app.form.getFormData(formId);\n if (initialData) {\n app.form.fillFromData($formEl, initialData);\n }\n function store() {\n const data = app.form.convertToData($formEl);\n if (!data) return;\n app.form.storeFormData(formId, data);\n $formEl.trigger('form:storedata', data);\n app.emit('formStoreData', $formEl[0], data);\n }\n $formEl.on('change submit', store);\n },\n destroy(formEl) {\n const $formEl = $(formEl);\n $formEl.off('change submit');\n }\n};\n\n// Form To/From Data\nfunction formToData(formEl) {\n const app = this;\n const $formEl = $(formEl).eq(0);\n if ($formEl.length === 0) return undefined;\n\n // Form data\n const data = {};\n\n // Skip input types\n const skipTypes = ['submit', 'image', 'button', 'file'];\n const skipNames = [];\n $formEl.find('input, select, textarea').each(inputEl => {\n const $inputEl = $(inputEl);\n if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {\n return;\n }\n const name = $inputEl.attr('name');\n const type = $inputEl.attr('type');\n const tag = inputEl.nodeName.toLowerCase();\n if (skipTypes.indexOf(type) >= 0) return;\n if (skipNames.indexOf(name) >= 0 || !name) return;\n if (tag === 'select' && $inputEl.prop('multiple')) {\n skipNames.push(name);\n data[name] = [];\n $formEl.find(`select[name=\"${name}\"] option`).each(el => {\n if (el.selected) data[name].push(el.value);\n });\n } else {\n switch (type) {\n case 'checkbox':\n skipNames.push(name);\n data[name] = [];\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n if (el.checked) data[name].push(el.value);\n });\n break;\n case 'radio':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n if (el.checked) data[name] = el.value;\n });\n break;\n default:\n data[name] = $inputEl.val();\n break;\n }\n }\n });\n $formEl.trigger('form:todata', data);\n app.emit('formToData', $formEl[0], data);\n return data;\n}\nfunction formFromData(formEl, formData) {\n const app = this;\n const $formEl = $(formEl).eq(0);\n if (!$formEl.length) return;\n let data = formData;\n const formId = $formEl.attr('id');\n if (!data && formId) {\n data = app.form.getFormData(formId);\n }\n if (!data) return;\n\n // Skip input types\n const skipTypes = ['submit', 'image', 'button', 'file'];\n const skipNames = [];\n $formEl.find('input, select, textarea').each(inputEl => {\n const $inputEl = $(inputEl);\n if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {\n return;\n }\n const name = $inputEl.attr('name');\n const type = $inputEl.attr('type');\n const tag = inputEl.nodeName.toLowerCase();\n if (typeof data[name] === 'undefined' || data[name] === null) return;\n if (skipTypes.indexOf(type) >= 0) return;\n if (skipNames.indexOf(name) >= 0 || !name) return;\n if (tag === 'select' && $inputEl.prop('multiple')) {\n skipNames.push(name);\n $formEl.find(`select[name=\"${name}\"] option`).each(el => {\n const selectEl = el;\n if (data[name].indexOf(el.value) >= 0) selectEl.selected = true;else selectEl.selected = false;\n });\n } else {\n switch (type) {\n case 'checkbox':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n const checkboxEl = el;\n if (data[name].indexOf(el.value) >= 0) checkboxEl.checked = true;else checkboxEl.checked = false;\n });\n break;\n case 'radio':\n skipNames.push(name);\n $formEl.find(`input[name=\"${name}\"]`).each(el => {\n const radioEl = el;\n if (data[name] === el.value) radioEl.checked = true;else radioEl.checked = false;\n });\n break;\n default:\n $inputEl.val(data[name]);\n break;\n }\n }\n if (tag === 'select' || tag === 'input' || tag === 'textarea') {\n $inputEl.trigger('change', 'fromdata');\n }\n });\n $formEl.trigger('form:fromdata', data);\n app.emit('formFromData', $formEl[0], data);\n}\nfunction initAjaxForm() {\n const app = this;\n const window = getWindow();\n const document = getDocument();\n function onSubmitChange(e, fromData) {\n const $formEl = $(this);\n if (e.type === 'change' && !$formEl.hasClass('form-ajax-submit-onchange')) return;\n if (e.type === 'submit') e.preventDefault();\n if (e.type === 'change' && fromData === 'fromdata') return;\n const method = ($formEl.attr('method') || 'GET').toUpperCase();\n const contentType = $formEl.attr('enctype') || $formEl.prop('enctype');\n let url = $formEl.attr('action');\n if (!url) return;\n let data;\n if (method === 'POST') {\n if (contentType === 'application/x-www-form-urlencoded' || contentType === 'application/json') {\n data = app.form.convertToData($formEl[0]);\n if (contentType === 'application/json') {\n data = JSON.stringify(data);\n }\n } else {\n data = new window.FormData($formEl[0]);\n }\n } else {\n data = serializeObject(app.form.convertToData($formEl[0]));\n if (url.includes('?')) {\n url += `&${data}`;\n } else {\n url += `?${data}`;\n }\n }\n $formEl.trigger('formajax:beforesend', {\n data\n });\n app.emit('formAjaxBeforeSend', $formEl[0], data);\n fetch(url, {\n method,\n headers: {\n 'Content-Type': contentType || 'application/x-www-form-urlencoded'\n },\n ...(method === 'POST' || method === 'PUT' ? {\n body: data\n } : {})\n }).then(response => {\n $formEl.trigger('formajax:complete', {\n data,\n response\n });\n app.emit('formAjaxComplete', $formEl[0], data, response);\n $formEl.trigger('formajax:success', {\n data,\n response\n });\n app.emit('formAjaxSuccess', $formEl[0], data, response);\n }).catch(error => {\n $formEl.trigger('formajax:error', {\n data,\n error\n });\n app.emit('formAjaxError', $formEl[0], data, error);\n });\n }\n $(document).on('submit change', 'form.form-ajax-submit, form.form-ajax-submit-onchange', onSubmitChange);\n}\nexport default {\n name: 'form',\n create() {\n const app = this;\n extend(app, {\n form: {\n data: {},\n storeFormData: FormData.store.bind(app),\n getFormData: FormData.get.bind(app),\n removeFormData: FormData.remove.bind(app),\n convertToData: formToData.bind(app),\n fillFromData: formFromData.bind(app),\n storage: {\n init: FormStorage.init.bind(app),\n destroy: FormStorage.destroy.bind(app)\n }\n }\n });\n },\n on: {\n init() {\n const app = this;\n initAjaxForm.call(app);\n },\n tabBeforeRemove(tabEl) {\n const app = this;\n $(tabEl).find('.form-store-data').each(formEl => {\n app.form.storage.destroy(formEl);\n });\n },\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.form-store-data').each(formEl => {\n app.form.storage.init(formEl);\n });\n },\n pageBeforeRemove(page) {\n const app = this;\n page.$el.find('.form-store-data').each(formEl => {\n app.form.storage.destroy(formEl);\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.form-store-data').each(formEl => {\n app.form.storage.init(formEl);\n });\n }\n }\n};", "import { getWindow, getDocument } from 'ssr-window';\nimport $ from '../../shared/dom7.js';\nimport { bindMethods } from '../../shared/utils.js';\nimport { getDevice } from '../../shared/get-device.js';\nconst Input = {\n ignoreTypes: ['checkbox', 'button', 'submit', 'range', 'radio', 'image'],\n createTextareaResizableShadow() {\n const document = getDocument();\n const $shadowEl = $(document.createElement('textarea'));\n $shadowEl.addClass('textarea-resizable-shadow');\n $shadowEl.prop({\n disabled: true,\n readonly: true\n });\n Input.textareaResizableShadow = $shadowEl;\n },\n textareaResizableShadow: undefined,\n resizeTextarea(textareaEl) {\n const app = this;\n const window = getWindow();\n const $textareaEl = $(textareaEl);\n if (!Input.textareaResizableShadow) {\n Input.createTextareaResizableShadow();\n }\n const $shadowEl = Input.textareaResizableShadow;\n if (!$textareaEl.length) return;\n if (!$textareaEl.hasClass('resizable')) return;\n if (Input.textareaResizableShadow.parents().length === 0) {\n app.$el.append($shadowEl);\n }\n const styles = window.getComputedStyle($textareaEl[0]);\n 'padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display'.split(' ').forEach(style => {\n let styleValue = styles[style];\n if ('font-size line-height letter-spacing width'.split(' ').indexOf(style) >= 0) {\n styleValue = styleValue.replace(',', '.');\n }\n $shadowEl.css(style, styleValue);\n });\n const currentHeight = $textareaEl[0].clientHeight;\n $shadowEl.val('');\n const initialHeight = $shadowEl[0].scrollHeight;\n $shadowEl.val($textareaEl.val());\n $shadowEl.css('height', 0);\n const scrollHeight = $shadowEl[0].scrollHeight;\n if (currentHeight !== scrollHeight) {\n if (scrollHeight > initialHeight) {\n $textareaEl.css('height', `${scrollHeight}px`);\n } else if (scrollHeight < currentHeight) {\n $textareaEl.css('height', '');\n }\n if (scrollHeight > initialHeight || scrollHeight < currentHeight) {\n $textareaEl.trigger('textarea:resize', {\n initialHeight,\n currentHeight,\n scrollHeight\n });\n app.emit('textareaResize', {\n initialHeight,\n currentHeight,\n scrollHeight\n });\n }\n }\n },\n validate(inputEl) {\n const $inputEl = $(inputEl);\n if (!$inputEl.length) return true;\n const $itemInputEl = $inputEl.parents('.item-input');\n const $inputWrapEl = $inputEl.parents('.input');\n function unsetReadonly() {\n if ($inputEl[0].f7ValidateReadonly) {\n $inputEl[0].readOnly = false;\n }\n }\n function setReadonly() {\n if ($inputEl[0].f7ValidateReadonly) {\n $inputEl[0].readOnly = true;\n }\n }\n unsetReadonly();\n const validity = $inputEl[0].validity;\n const validationMessage = $inputEl.dataset().errorMessage || $inputEl[0].validationMessage || '';\n if (!validity) {\n setReadonly();\n return true;\n }\n if (!validity.valid) {\n let $errorEl = $inputEl.nextAll('.item-input-error-message, .input-error-message');\n if (validationMessage) {\n if ($errorEl.length === 0) {\n $errorEl = $(``);\n $errorEl.insertAfter($inputEl);\n }\n $errorEl.text(validationMessage);\n }\n if ($errorEl.length > 0) {\n $itemInputEl.addClass('item-input-with-error-message');\n $inputWrapEl.addClass('input-with-error-message');\n }\n $itemInputEl.addClass('item-input-invalid');\n $inputWrapEl.addClass('input-invalid');\n $inputEl.addClass('input-invalid');\n setReadonly();\n return false;\n }\n $itemInputEl.removeClass('item-input-invalid item-input-with-error-message');\n $inputWrapEl.removeClass('input-invalid input-with-error-message');\n $inputEl.removeClass('input-invalid');\n setReadonly();\n return true;\n },\n validateInputs(el) {\n const app = this;\n const validates = $(el).find('input, textarea, select').map(inputEl => app.input.validate(inputEl));\n return validates.indexOf(false) < 0;\n },\n focus(inputEl) {\n const $inputEl = $(inputEl);\n const type = $inputEl.attr('type');\n if (Input.ignoreTypes.indexOf(type) >= 0) return;\n $inputEl.parents('.item-input').addClass('item-input-focused');\n $inputEl.parents('.input').addClass('input-focused');\n $inputEl.addClass('input-focused');\n },\n blur(inputEl) {\n const $inputEl = $(inputEl);\n $inputEl.parents('.item-input').removeClass('item-input-focused');\n $inputEl.parents('.input').removeClass('input-focused');\n $inputEl.removeClass('input-focused');\n },\n checkEmptyState(inputEl) {\n const app = this;\n let $inputEl = $(inputEl);\n if (!$inputEl.is('input, select, textarea, .item-input [contenteditable]')) {\n $inputEl = $inputEl.find('input, select, textarea, .item-input [contenteditable]').eq(0);\n }\n if (!$inputEl.length) return;\n const isContentEditable = $inputEl[0].hasAttribute('contenteditable');\n let value;\n if (isContentEditable) {\n if ($inputEl.find('.text-editor-placeholder').length) value = '';else value = $inputEl.html();\n } else {\n value = $inputEl.val();\n }\n const $itemInputEl = $inputEl.parents('.item-input');\n const $inputWrapEl = $inputEl.parents('.input');\n if (value && typeof value === 'string' && value.trim() !== '' || Array.isArray(value) && value.length > 0) {\n $itemInputEl.addClass('item-input-with-value');\n $inputWrapEl.addClass('input-with-value');\n $inputEl.addClass('input-with-value');\n $inputEl.trigger('input:notempty');\n app.emit('inputNotEmpty', $inputEl[0]);\n } else {\n $itemInputEl.removeClass('item-input-with-value');\n $inputWrapEl.removeClass('input-with-value');\n $inputEl.removeClass('input-with-value');\n $inputEl.trigger('input:empty');\n app.emit('inputEmpty', $inputEl[0]);\n }\n },\n scrollIntoView(inputEl, duration, centered, force) {\n if (duration === void 0) {\n duration = 0;\n }\n const $inputEl = $(inputEl);\n const $scrollableEl = $inputEl.parents('.page-content, .panel, .card-expandable .card-content').eq(0);\n if (!$scrollableEl.length) {\n return false;\n }\n const contentHeight = $scrollableEl[0].offsetHeight;\n const contentScrollTop = $scrollableEl[0].scrollTop;\n const contentPaddingTop = parseInt($scrollableEl.css('padding-top'), 10);\n const contentPaddingBottom = parseInt($scrollableEl.css('padding-bottom'), 10);\n const contentOffsetTop = $scrollableEl.offset().top - contentScrollTop;\n const inputOffsetTop = $inputEl.offset().top - contentOffsetTop;\n const inputHeight = $inputEl[0].offsetHeight;\n const min = inputOffsetTop + contentScrollTop - contentPaddingTop;\n const max = inputOffsetTop + contentScrollTop - contentHeight + contentPaddingBottom + inputHeight;\n const centeredPosition = min + (max - min) / 2;\n if (contentScrollTop > min) {\n $scrollableEl.scrollTop(centered ? centeredPosition : min, duration);\n return true;\n }\n if (contentScrollTop < max) {\n $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);\n return true;\n }\n if (force) {\n $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);\n }\n return false;\n },\n init() {\n const app = this;\n const device = getDevice();\n const window = getWindow();\n const document = getDocument();\n Input.createTextareaResizableShadow();\n function onFocus() {\n const inputEl = this;\n if (app.params.input.scrollIntoViewOnFocus) {\n if (device.android) {\n $(window).once('resize', () => {\n if (document && document.activeElement === inputEl) {\n app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);\n }\n });\n } else {\n app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);\n }\n }\n app.input.focus(inputEl);\n }\n function onBlur() {\n const $inputEl = $(this);\n const tag = $inputEl[0].nodeName.toLowerCase();\n app.input.blur($inputEl);\n if ($inputEl.dataset().validate || $inputEl.attr('validate') !== null || $inputEl.attr('data-validate-on-blur') !== null) {\n app.input.validate($inputEl);\n }\n // Resize textarea\n if (tag === 'textarea' && $inputEl.hasClass('resizable')) {\n if (Input.textareaResizableShadow) Input.textareaResizableShadow.remove();\n }\n }\n function onChange() {\n const $inputEl = $(this);\n const type = $inputEl.attr('type');\n const tag = $inputEl[0].nodeName.toLowerCase();\n const isContentEditable = $inputEl[0].hasAttribute('contenteditable');\n if (Input.ignoreTypes.indexOf(type) >= 0) return;\n\n // Check Empty State\n app.input.checkEmptyState($inputEl);\n if (isContentEditable) return;\n\n // Check validation\n if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {\n app.input.validate($inputEl);\n }\n\n // Resize textarea\n if (tag === 'textarea' && $inputEl.hasClass('resizable')) {\n app.input.resizeTextarea($inputEl);\n }\n }\n function onInvalid(e) {\n const $inputEl = $(this);\n if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {\n e.preventDefault();\n app.input.validate($inputEl);\n }\n }\n function clearInput() {\n const $clicked = $(this);\n const $inputEl = $clicked.siblings('input, textarea').eq(0);\n const previousValue = $inputEl.val();\n $inputEl.val('').trigger('input change').focus().trigger('input:clear', previousValue);\n app.emit('inputClear', previousValue);\n }\n function preventDefault(e) {\n e.preventDefault();\n }\n $(document).on('click', '.input-clear-button', clearInput);\n $(document).on('mousedown', '.input-clear-button', preventDefault);\n $(document).on('change input', 'input, textarea, select, .item-input [contenteditable]', onChange, true);\n $(document).on('focus', 'input, textarea, select, .item-input [contenteditable]', onFocus, true);\n $(document).on('blur', 'input, textarea, select, .item-input [contenteditable]', onBlur, true);\n $(document).on('invalid', 'input, textarea, select', onInvalid, true);\n }\n};\nexport default {\n name: 'input',\n params: {\n input: {\n scrollIntoViewOnFocus: undefined,\n scrollIntoViewCentered: false,\n scrollIntoViewDuration: 0,\n scrollIntoViewAlways: false\n }\n },\n create() {\n const app = this;\n if (typeof app.params.input.scrollIntoViewOnFocus === 'undefined') {\n app.params.input.scrollIntoViewOnFocus = getDevice().android;\n }\n bindMethods(app, {\n input: Input\n });\n },\n on: {\n init() {\n const app = this;\n app.input.init();\n },\n tabMounted(tabEl) {\n const app = this;\n const $tabEl = $(tabEl);\n $tabEl.find('.item-input, .input').each(itemInputEl => {\n const $itemInputEl = $(itemInputEl);\n $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {\n const $inputEl = $(inputEl);\n if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;\n app.input.checkEmptyState($inputEl);\n });\n });\n $tabEl.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n },\n pageInit(page) {\n const app = this;\n const $pageEl = page.$el;\n $pageEl.find('.item-input, .input').each(itemInputEl => {\n const $itemInputEl = $(itemInputEl);\n $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {\n const $inputEl = $(inputEl);\n if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;\n app.input.checkEmptyState($inputEl);\n });\n });\n $pageEl.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n },\n 'panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint': function onPanelOpen(instance) {\n const app = this;\n if (instance && instance.$el) {\n instance.$el.find('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n } else {\n $('textarea.resizable').each(textareaEl => {\n app.input.resizeTextarea(textareaEl);\n });\n }\n }\n }\n};", "export default {\n name: 'checkbox'\n};", "export default {\n name: 'radio'\n};", "import $ from '../../shared/dom7.js';\nimport { extend, now, nextTick, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass Toggle extends Framework7Class {\n constructor(app, params) {\n if (params === void 0) {\n params = {};\n }\n super(params, [app]);\n const toggle = this;\n const support = getSupport();\n const defaults = {};\n\n // Extend defaults with modules params\n toggle.useModulesParams(defaults);\n toggle.params = extend(defaults, params);\n const el = toggle.params.el;\n if (!el) return toggle;\n const $el = $(el);\n if ($el.length === 0) return toggle;\n if ($el[0].f7Toggle) return $el[0].f7Toggle;\n const $inputEl = $el.children('input[type=\"checkbox\"]');\n extend(toggle, {\n app,\n $el,\n el: $el[0],\n $inputEl,\n inputEl: $inputEl[0],\n disabled: $el.hasClass('disabled') || $inputEl.hasClass('disabled') || $inputEl.attr('disabled') || $inputEl[0].disabled\n });\n Object.defineProperty(toggle, 'checked', {\n enumerable: true,\n configurable: true,\n set(checked) {\n if (!toggle || typeof toggle.$inputEl === 'undefined') return;\n if (toggle.checked === checked) return;\n $inputEl[0].checked = checked;\n toggle.$inputEl.trigger('change');\n },\n get() {\n return $inputEl[0].checked;\n }\n });\n $el[0].f7Toggle = toggle;\n let isTouched;\n const touchesStart = {};\n let isScrolling;\n let touchesDiff;\n let toggleWidth;\n let touchStartTime;\n let touchStartChecked;\n function handleTouchStart(e) {\n if (isTouched || toggle.disabled) return;\n touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;\n touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;\n touchesDiff = 0;\n isTouched = true;\n isScrolling = undefined;\n touchStartTime = now();\n touchStartChecked = toggle.checked;\n toggleWidth = $el[0].offsetWidth;\n nextTick(() => {\n if (isTouched) {\n $el.addClass('toggle-active-state');\n }\n });\n }\n function handleTouchMove(e) {\n if (!isTouched || toggle.disabled) return;\n const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;\n const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;\n const inverter = app.rtl ? -1 : 1;\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));\n }\n if (isScrolling) {\n isTouched = false;\n return;\n }\n e.preventDefault();\n touchesDiff = pageX - touchesStart.x;\n let changed;\n if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) {\n changed = true;\n }\n if (touchesDiff * inverter > 0 && Math.abs(touchesDiff) > toggleWidth / 3 && !touchStartChecked) {\n changed = true;\n }\n if (changed) {\n touchesStart.x = pageX;\n toggle.checked = !touchStartChecked;\n touchStartChecked = !touchStartChecked;\n }\n }\n function handleTouchEnd() {\n if (!isTouched || toggle.disabled) {\n if (isScrolling) $el.removeClass('toggle-active-state');\n isTouched = false;\n return;\n }\n const inverter = app.rtl ? -1 : 1;\n isTouched = false;\n $el.removeClass('toggle-active-state');\n let changed;\n if (now() - touchStartTime < 300) {\n if (touchesDiff * inverter < 0 && touchStartChecked) {\n changed = true;\n }\n if (touchesDiff * inverter > 0 && !touchStartChecked) {\n changed = true;\n }\n if (changed) {\n toggle.checked = !touchStartChecked;\n }\n }\n }\n function handleInputChange() {\n toggle.$el.trigger('toggle:change');\n toggle.emit('local::change toggleChange', toggle);\n }\n toggle.attachEvents = function attachEvents() {\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n $el.on(app.touchEvents.start, handleTouchStart, passive);\n app.on('touchmove', handleTouchMove);\n app.on('touchend:passive', handleTouchEnd);\n toggle.$inputEl.on('change', handleInputChange);\n };\n toggle.detachEvents = function detachEvents() {\n const passive = support.passiveListener ? {\n passive: true\n } : false;\n $el.off(app.touchEvents.start, handleTouchStart, passive);\n app.off('touchmove', handleTouchMove);\n app.off('touchend:passive', handleTouchEnd);\n toggle.$inputEl.off('change', handleInputChange);\n };\n\n // Install Modules\n toggle.useModules();\n\n // Init\n toggle.init();\n }\n toggle() {\n const toggle = this;\n toggle.checked = !toggle.checked;\n }\n init() {\n const toggle = this;\n toggle.attachEvents();\n }\n destroy() {\n let toggle = this;\n toggle.$el.trigger('toggle:beforedestroy');\n toggle.emit('local::beforeDestroy toggleBeforeDestroy', toggle);\n delete toggle.$el[0].f7Toggle;\n toggle.detachEvents();\n deleteProps(toggle);\n toggle = null;\n }\n}\nexport default Toggle;", "import $ from '../../shared/dom7.js';\nimport ConstructorMethods from '../../shared/constructor-methods.js';\nimport Toggle from './toggle-class.js';\nexport default {\n name: 'toggle',\n create() {\n const app = this;\n app.toggle = ConstructorMethods({\n defaultSelector: '.toggle',\n constructor: Toggle,\n app,\n domProp: 'f7Toggle'\n });\n },\n static: {\n Toggle\n },\n on: {\n tabMounted(tabEl) {\n const app = this;\n $(tabEl).find('.toggle-init').each(toggleEl => app.toggle.create({\n el: toggleEl\n }));\n },\n tabBeforeRemove(tabEl) {\n $(tabEl).find('.toggle-init').each(toggleEl => {\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n });\n },\n pageInit(page) {\n const app = this;\n page.$el.find('.toggle-init').each(toggleEl => app.toggle.create({\n el: toggleEl\n }));\n },\n pageBeforeRemove(page) {\n page.$el.find('.toggle-init').each(toggleEl => {\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n });\n }\n },\n vnode: {\n 'toggle-init': {\n insert(vnode) {\n const app = this;\n const toggleEl = vnode.elm;\n app.toggle.create({\n el: toggleEl\n });\n },\n destroy(vnode) {\n const toggleEl = vnode.elm;\n if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();\n }\n }\n }\n};", "import $ from '../../shared/dom7.js';\nimport { extend, nextTick, deleteProps } from '../../shared/utils.js';\nimport Framework7Class from '../../shared/class.js';\nimport { getSupport } from '../../shared/get-support.js';\nclass Range extends Framework7Class {\n constructor(app, params) {\n super(params, [app]);\n const range = this;\n const support = getSupport();\n const defaults = {\n el: null,\n inputEl: null,\n dual: false,\n step: 1,\n label: false,\n min: 0,\n max: 100,\n value: 0,\n draggableBar: true,\n vertical: false,\n verticalReversed: false,\n formatLabel: null,\n scale: false,\n scaleSteps: 5,\n scaleSubSteps: 0,\n formatScaleLabel: null,\n limitKnobPosition: app.theme === 'ios'\n };\n\n // Extend defaults with modules params\n range.useModulesParams(defaults);\n range.params = extend(defaults, params);\n const el = range.params.el;\n if (!el) return range;\n const $el = $(el);\n if ($el.length === 0) return range;\n if ($el[0].f7Range) return $el[0].f7Range;\n const dataset = $el.dataset();\n 'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(paramName => {\n if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {\n range.params[paramName] = parseFloat(dataset[paramName]);\n }\n });\n 'dual label vertical verticalReversed scale'.split(' ').forEach(paramName => {\n if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {\n range.params[paramName] = dataset[paramName];\n }\n });\n if (!range.params.value) {\n if (typeof dataset.value !== 'undefined') range.params.value = dataset.value;\n if (typeof dataset.valueLeft !== 'undefined' && typeof dataset.valueRight !== 'undefined') {\n range.params.value = [parseFloat(dataset.valueLeft), parseFloat(dataset.valueRight)];\n }\n }\n let $inputEl;\n if (!range.params.dual) {\n if (range.params.inputEl) {\n $inputEl = $(range.params.inputEl);\n } else if ($el.find('input[type=\"range\"]').length) {\n $inputEl = $el.find('input[type=\"range\"]').eq(0);\n }\n }\n const {\n dual,\n step,\n label,\n min,\n max,\n value,\n vertical,\n verticalReversed,\n scale,\n scaleSteps,\n scaleSubSteps,\n limitKnobPosition\n } = range.params;\n extend(range, {\n app,\n $el,\n el: $el[0],\n $inputEl,\n inputEl: $inputEl ? $inputEl[0] : undefined,\n dual,\n step,\n label,\n min,\n max,\n value,\n previousValue: value,\n vertical,\n verticalReversed,\n scale,\n scaleSteps,\n scaleSubSteps,\n limitKnobPosition\n });\n if ($inputEl) {\n 'step min max'.split(' ').forEach(paramName => {\n if (!params[paramName] && $inputEl.attr(paramName)) {\n range.params[paramName] = parseFloat($inputEl.attr(paramName));\n range[paramName] = parseFloat($inputEl.attr(paramName));\n }\n });\n if (typeof $inputEl.val() !== 'undefined') {\n range.params.value = parseFloat($inputEl.val());\n range.value = parseFloat($inputEl.val());\n }\n }\n\n // Dual\n if (range.dual) {\n $el.addClass('range-slider-dual');\n }\n if (range.label) {\n $el.addClass('range-slider-label');\n }\n\n // Vertical\n if (range.vertical) {\n $el.addClass('range-slider-vertical');\n if (range.verticalReversed) {\n $el.addClass('range-slider-vertical-reversed');\n }\n } else {\n $el.addClass('range-slider-horizontal');\n }\n\n // Check for layout\n const $barEl = $('');\n const $barActiveEl = $('');\n $barEl.append($barActiveEl);\n\n // Create Knobs\n // prettier-ignore\n const knobHTML = `\n
\n ${currentValues.map(_ref4 => {\n let {\n label,\n color,\n value\n } = _ref4;\n const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;\n return `\n
` : '';\n // prettier-ignore\n return `\n