framework7 7.0.0-beta.2 → 7.0.0-beta.20

package/components/area-chart/area-chart.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var a=e.$,s=e.utils,l=(e.getDevice,e.getSupport,e.Class),n=(e.Modal,e.ConstructorMethods),o=(e.ModalMethods,s.extend),r=s.deleteProps;class i extends l{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const s=this,l=o({},e.params.areaChart);s.useModulesParams(l),s.params=o(l,t);const{el:n}=s.params;if(!n)return s;const r=a(n);return 0===r.length?s:r[0].f7AreaChart?r[0].f7AreaChart:(o(s,{app:e,$el:r,el:r&&r[0],currentIndex:null,hiddenDatasets:[],f7Tooltip:null,linesOffsets:null}),r[0].f7AreaChart=s,s.useModules(),s.onMouseEnter=s.onMouseEnter.bind(s),s.onMouseMove=s.onMouseMove.bind(s),s.onMouseLeave=s.onMouseLeave.bind(s),s.onLegendClick=s.onLegendClick.bind(s),s.init(),s)}getVisibleLabels(){const{maxAxisLabels:e,axisLabels:t}=this.params;if(!e||t.length<=e)return t;const a=Math.ceil(t.length/e);return t.filter(((e,t)=>t%a==0))}getSummValues(){const{datasets:e}=this.params,{hiddenDatasets:t}=this,a=[];return e.filter(((e,a)=>!t.includes(a))).forEach((e=>{let{values:t}=e;t.forEach(((e,t)=>{a[t]||(a[t]=0),a[t]+=e}))})),a}getChartData(){const{datasets:e,lineChart:t,width:a,height:s}=this.params,{hiddenDatasets:l}=this,n=[];if(!e.length)return n;const o=e[0].values.map((()=>0));let r=0;return t?e.filter(((e,t)=>!l.includes(t))).forEach((e=>{let{values:t}=e;const a=Math.max(...t);a>r&&(r=a)})):r=Math.max(...this.getSummValues()),e.filter(((e,t)=>!l.includes(t))).forEach((e=>{let{label:l,values:i,color:d}=e;const h=i.map(((e,l)=>{o[l]+=e;const n=t?e:o[l],d=l/(i.length-1)*a,h=s-n/r*s;return t?`${0===l?"M":"L"}${d},${h}`:`${d} ${h}`}));t||h.push(`${a} ${s} 0 ${s}`),n.push({label:l,points:h.join(" "),color:d})})),n.reverse()}getVerticalLines(){const{datasets:e,width:t}=this.params,a=[];if(!e.length)return a;const s=e[0].values;return s.forEach(((e,l)=>{const n=l/(s.length-1)*t;a.push(n)})),a}toggleDataset(e){const{hiddenDatasets:t,params:{toggleDatasets:a}}=this;a&&(t.includes(e)?t.splice(t.indexOf(e),1):t.push(e),this.$legendEl&&(this.$legendEl.find(".area-chart-legend-item").removeClass("area-chart-legend-item-hidden"),t.forEach((e=>{this.$legendEl.find(`.area-chart-legend-item[data-index="${e}"]`).addClass("area-chart-legend-item-hidden")}))),this.update({},!0))}formatAxisLabel(e){const{formatAxisLabel:t}=this.params;return t?t.call(this,e):e}formatLegendLabel(e){const{formatLegendLabel:t}=this.params;return t?t.call(this,e):e}calcLinesOffsets(){const e=this.svgEl.querySelectorAll("line");this.linesOffsets=[];for(let t=0;t<e.length;t+=1)this.linesOffsets.push(e[t].getBoundingClientRect().left)}formatTooltip(){const e=this,{currentIndex:t,hiddenDatasets:a,params:{datasets:s,axisLabels:l,formatTooltip:n,formatTooltipTotal:o,formatTooltipAxisLabel:r,formatTooltipDataset:i}}=e;if(null===t)return"";let d=0;const h=s.filter(((e,t)=>!a.includes(t))).map((e=>({color:e.color,label:e.label,value:e.values[t]})));if(h.forEach((e=>{d+=e.value})),n)return n({index:t,total:d,datasets:h});let c=r?r.call(e,l[t]):this.formatAxisLabel(l[t]);c||(c="");return`\n        <div class="area-chart-tooltip-label">${c}</div>\n        <div class="area-chart-tooltip-total">${o?o.call(e,d):d}</div>\n        ${h.length>0?`\n        <ul class="area-chart-tooltip-list">\n          ${h.map((t=>{let{label:a,color:s,value:l}=t;return`\n                <li><span style="background-color: ${s};"></span>${i?i.call(e,a,l,s):`${a?`${a}: `:""}${l}`}</li>\n              `})).join("")}\n        </ul>`:""}\n      `}setTooltip(){const e=this,{app:t,el:a,svgEl:s,hiddenDatasets:l,currentIndex:n,params:{tooltip:o,datasets:r}}=e;if(!o)return;if(r.filter(((e,t)=>!l.includes(t))).length>0)return null===n||e.f7Tooltip?void(e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.show&&(null!==n?(e.f7Tooltip.setText(e.formatTooltip()),e.f7Tooltip.setTargetEl(s.querySelector(`line[data-index="${n}"]`)),e.f7Tooltip.show()):e.f7Tooltip.hide())):(e.f7Tooltip=t.tooltip.create({trigger:"manual",containerEl:a,targetEl:s.querySelector(`line[data-index="${n}"]`),text:e.formatTooltip(),cssClass:"area-chart-tooltip"}),void(e.f7Tooltip&&e.f7Tooltip.show&&e.f7Tooltip.show()));e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.hide()}setCurrentIndex(e){e!==this.currentIndex&&(this.currentIndex=e,this.$el.trigger("areachart:select",{index:e}),this.emit("local::select areaChartSelect",this,e),this.$svgEl.find("line").removeClass("area-chart-current-line"),this.$svgEl.find(`line[data-index="${e}"]`).addClass("area-chart-current-line"),this.setTooltip())}onLegendClick(e){const t=parseInt(a(e.target).closest(".area-chart-legend-item").attr("data-index"),10);this.toggleDataset(t)}onMouseEnter(){this.calcLinesOffsets()}onMouseMove(e){const t=this;t.linesOffsets||t.calcLinesOffsets();let a=e.pageX;void 0===a&&(a=0);const s=t.linesOffsets.map((e=>Math.abs(a-e))),l=Math.min(...s),n=s.indexOf(l);t.setCurrentIndex(n)}onMouseLeave(){this.setCurrentIndex(null)}attachEvents(){const{svgEl:e,$el:t}=this;e&&(e.addEventListener("mouseenter",this.onMouseEnter),e.addEventListener("mousemove",this.onMouseMove),e.addEventListener("mouseleave",this.onMouseLeave),t.on("click",".area-chart-legend-item",this.onLegendClick))}detachEvents(){const{svgEl:e,$el:t}=this;e&&(e.removeEventListener("mouseenter",this.onMouseEnter),e.removeEventListener("mousemove",this.onMouseMove),e.removeEventListener("mouseleave",this.onMouseLeave),t.off("click",".area-chart-legend-item",this.onLegendClick))}render(){const e=this,{lineChart:t,toggleDatasets:a,width:s,height:l,axis:n,axisLabels:o,legend:r,datasets:i}=e.params,d=e.getChartData(),h=e.getVerticalLines(),c=e.getVisibleLabels(),u=a?"button":"span";return $jsx("div",null,$jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:l,viewBox:`0 0 ${s} ${l}`,preserveAspectRatio:"none"},d.map((e=>t?$jsx("path",{stroke:e.color,"fill-rule":"evenodd",d:e.points}):$jsx("polygon",{fill:e.color,"fill-rule":"evenodd",points:e.points}))),h.map(((e,t)=>$jsx("line",{"data-index":t,fill:"#000",x1:e,y1:0,x2:e,y2:l})))),n&&$jsx("div",{class:"area-chart-axis"},o.map((t=>$jsx("span",null,c.includes(t)&&$jsx("span",null,e.formatAxisLabel(t)))))),r&&$jsx("div",{class:"area-chart-legend"},i.map(((t,s)=>$jsx(u,{"data-index":s,class:"area-chart-legend-item "+(a?"area-chart-legend-button":""),_type:a?"button":void 0},$jsx("span",{style:`background-color: ${t.color}`}),e.formatLegendLabel(t.label))))))}update(e,t){void 0===e&&(e={}),void 0===t&&(t=!1);const s=this,{params:l}=s;if(Object.keys(e).forEach((t=>{void 0!==e[t]&&(l[t]=e[t])})),0===s.$svgEl.length)return s;s.detachEvents(),s.$svgEl.remove(),t||(s.$axisEl.remove(),s.$legendEl.remove());const n=a(s.render()),r=n.find("svg");if(o(s,{svgEl:r&&r[0],$svgEl:r}),!t){const e=n.find(".area-chart-axis"),t=n.find(".area-chart-legend");o(s,{$axisEl:e,$legendEl:t}),s.$el.append(e),s.$el.append(t)}return s.$el.prepend(r),s.attachEvents(),s}init(){const e=this,t=a(e.render()),s=t.find("svg"),l=t.find(".area-chart-axis"),n=t.find(".area-chart-legend");return o(e,{svgEl:s&&s[0],$svgEl:s,$axisEl:l,$legendEl:n}),e.$el.append(s),e.$el.append(l),e.$el.append(n),e.attachEvents(),e}destroy(){const e=this;e.$el&&!e.destroyed&&(e.$el.trigger("piechart:beforedestroy"),e.emit("local::beforeDestroy areaChartBeforeDestroy",e),e.detachEvents(),e.$svgEl.remove(),e.$axisEl.remove(),e.$legendEl.remove(),e.f7Tooltip&&e.f7Tooltip.destroy&&e.f7Tooltip.destroy(),delete e.$el[0].f7AreaChart,r(e),e.destroyed=!0)}}var d={name:"areaChart",params:{areaChart:{el:null,lineChart:!1,datasets:[],axis:!1,axisLabels:[],tooltip:!1,legend:!1,toggleDatasets:!1,width:640,height:320,maxAxisLabels:8,formatAxisLabel:null,formatLegendLabel:null,formatTooltip:null,formatTooltipAxisLabel:null,formatTooltipTotal:null,formatTooltipDataset:null}},create(){const e=this;e.areaChart=n({defaultSelector:".area-chart",constructor:i,app:e,domProp:"f7AreaChart"}),e.areaChart.update=function(t,s){if(0===a(t).length)return;const l=e.areaChart.get(t);return l?(l.update(s),l):void 0}}};if(t){if(e.prototype.modules&&e.prototype.modules[d.name])return;e.use(d),e.instance&&(e.instance.useModuleParams(d,e.instance.params),e.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/autocomplete/autocomplete-class.js

@@ -1,14 +1,18 @@
 /* eslint "no-useless-escape": "off" */
-import $ from '../../shared/dom7';
-import { extend, id, nextTick, deleteProps, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils';
-import { getDevice } from '../../shared/get-device';
-import Framework7Class from '../../shared/class';
+import $ from '../../shared/dom7.js';
+import { extend, id, nextTick, deleteProps, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
+import $jsx from '../../shared/$jsx.js';
 
 class Autocomplete extends Framework7Class {
-  constructor(app, params = {}) {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params, [app]);
     const ac = this;
     ac.app = app;

package/components/autocomplete/autocomplete-rtl.css

@@ -1 +1 @@
-:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size);--f7-autocomplete-dropdown-bg-color:#fff}:root .theme-dark,:root.theme-dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d}.ios{--f7-autocomplete-dropdown-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:600;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .theme-dark,.ios.theme-dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:0 2px 2px rgba(0, 0, 0, 0.25);--f7-autocomplete-dropdown-text-matching-font-weight:400;--f7-autocomplete-dropdown-text-color:rgba(0, 0, 0, 0.54);--f7-autocomplete-dropdown-text-matching-color:#212121}.md .theme-dark,.md.theme-dark{--f7-autocomplete-dropdown-text-color:rgba(255, 255, 255, 0.54);--f7-autocomplete-dropdown-text-matching-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-autocomplete-dropdown-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:700;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.aurora .theme-dark,.aurora.theme-dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.autocomplete-page .autocomplete-found{display:block}.autocomplete-page .autocomplete-not-found{display:none}.autocomplete-page .autocomplete-values{display:block}.autocomplete-page .list ul:empty{display:none}.autocomplete-preloader:not(.autocomplete-preloader-visible){visibility:hidden}.autocomplete-preloader:not(.autocomplete-preloader-visible),.autocomplete-preloader:not(.autocomplete-preloader-visible) *{animation:none}.autocomplete-dropdown{background:var(--f7-autocomplete-dropdown-bg-color);box-shadow:var(--f7-autocomplete-dropdown-box-shadow);box-sizing:border-box;position:absolute;z-index:500;width:100%;right:0}.autocomplete-dropdown .autocomplete-dropdown-inner{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;height:100%;z-index:1}.autocomplete-dropdown .autocomplete-preloader{display:none;position:absolute;bottom:100%;width:var(--f7-autocomplete-dropdown-preloader-size);height:var(--f7-autocomplete-dropdown-preloader-size)}.autocomplete-dropdown .autocomplete-preloader-visible{display:block}.autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-autocomplete-dropdown-placeholder-color)}.autocomplete-dropdown .list{margin:0;color:var(--f7-autocomplete-dropdown-text-color);font-size:var(--f7-autocomplete-dropdown-font-size)}.autocomplete-dropdown .list b{color:var(--f7-autocomplete-dropdown-text-matching-color);font-weight:var(--f7-autocomplete-dropdown-text-matching-font-weight)}.autocomplete-dropdown .list ul{background:0 0!important}.autocomplete-dropdown .list ul:after,.autocomplete-dropdown .list ul:before{display:none!important}.autocomplete-dropdown .autocomplete-dropdown-selected{background:var(--f7-autocomplete-dropdown-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.searchbar-input-wrap .autocomplete-dropdown{background-color:var(--f7-searchbar-input-bg-color,var(--f7-searchbar-bg-color));border-radius:var(--f7-searchbar-input-border-radius)}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-searchbar-placeholder-color)}.searchbar-input-wrap .autocomplete-dropdown li:last-child{border-radius:0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);position:relative;overflow:hidden}.searchbar-input-wrap .autocomplete-dropdown .item-content{padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.list .item-content-dropdown-expanded .item-title.item-label{width:0;flex-shrink:10;overflow:hidden}.list .item-content-dropdown-expanded .item-title.item-label+.item-input-wrap{margin-right:0}.list .item-content-dropdown-expanded .item-input-wrap{width:100%}.ios .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:12px}.ios .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.md .autocomplete-page .navbar .autocomplete-preloader{margin-left:8px}.md .autocomplete-popup .navbar .autocomplete-preloader{margin-right:8px;margin-left:16px}.md .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:8px}.md .autocomplete-dropdown .autocomplete-preloader circle{stroke-width:3}.aurora .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:2px}.aurora .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}
+:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size);--f7-autocomplete-dropdown-bg-color:#fff}:root .dark,:root.dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d}.ios{--f7-autocomplete-dropdown-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:600;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .dark,.ios.dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:0 2px 2px rgba(0, 0, 0, 0.25);--f7-autocomplete-dropdown-text-matching-font-weight:400;--f7-autocomplete-dropdown-text-color:rgba(0, 0, 0, 0.54);--f7-autocomplete-dropdown-text-matching-color:#212121}.md .dark,.md.dark{--f7-autocomplete-dropdown-text-color:rgba(255, 255, 255, 0.54);--f7-autocomplete-dropdown-text-matching-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-autocomplete-dropdown-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:700;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.aurora .dark,.aurora.dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.autocomplete-page .autocomplete-found{display:block}.autocomplete-page .autocomplete-not-found{display:none}.autocomplete-page .autocomplete-values{display:block}.autocomplete-page .list ul:empty{display:none}.autocomplete-preloader:not(.autocomplete-preloader-visible){visibility:hidden}.autocomplete-preloader:not(.autocomplete-preloader-visible),.autocomplete-preloader:not(.autocomplete-preloader-visible) *{animation:none}.autocomplete-dropdown{background:var(--f7-autocomplete-dropdown-bg-color);box-shadow:var(--f7-autocomplete-dropdown-box-shadow);box-sizing:border-box;position:absolute;z-index:500;width:100%;right:0}.autocomplete-dropdown .autocomplete-dropdown-inner{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;height:100%;z-index:1}.autocomplete-dropdown .autocomplete-preloader{display:none;position:absolute;bottom:100%;width:var(--f7-autocomplete-dropdown-preloader-size);height:var(--f7-autocomplete-dropdown-preloader-size)}.autocomplete-dropdown .autocomplete-preloader-visible{display:block}.autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-autocomplete-dropdown-placeholder-color)}.autocomplete-dropdown .list{margin:0;color:var(--f7-autocomplete-dropdown-text-color);font-size:var(--f7-autocomplete-dropdown-font-size)}.autocomplete-dropdown .list b{color:var(--f7-autocomplete-dropdown-text-matching-color);font-weight:var(--f7-autocomplete-dropdown-text-matching-font-weight)}.autocomplete-dropdown .list ul{background:0 0!important}.autocomplete-dropdown .list ul:after,.autocomplete-dropdown .list ul:before{display:none!important}.autocomplete-dropdown .autocomplete-dropdown-selected{background:var(--f7-autocomplete-dropdown-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.searchbar-input-wrap .autocomplete-dropdown{background-color:var(--f7-searchbar-input-bg-color,var(--f7-searchbar-bg-color));border-radius:var(--f7-searchbar-input-border-radius)}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-searchbar-placeholder-color)}.searchbar-input-wrap .autocomplete-dropdown li:last-child{border-radius:0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);position:relative;overflow:hidden}.searchbar-input-wrap .autocomplete-dropdown .item-content{padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.list .item-content-dropdown-expanded .item-title.item-label{width:0;flex-shrink:10;overflow:hidden}.list .item-content-dropdown-expanded .item-title.item-label+.item-input-wrap{margin-right:0}.list .item-content-dropdown-expanded .item-input-wrap{width:100%}.ios .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:12px}.ios .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.md .autocomplete-page .navbar .autocomplete-preloader{margin-left:8px}.md .autocomplete-popup .navbar .autocomplete-preloader{margin-right:8px;margin-left:16px}.md .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:8px}.md .autocomplete-dropdown .autocomplete-preloader circle{stroke-width:3}.aurora .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:2px}.aurora .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}

package/components/autocomplete/autocomplete.css

@@ -1 +1 @@
-:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size);--f7-autocomplete-dropdown-bg-color:#fff}:root .theme-dark,:root.theme-dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d}.ios{--f7-autocomplete-dropdown-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:600;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .theme-dark,.ios.theme-dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:0 2px 2px rgba(0, 0, 0, 0.25);--f7-autocomplete-dropdown-text-matching-font-weight:400;--f7-autocomplete-dropdown-text-color:rgba(0, 0, 0, 0.54);--f7-autocomplete-dropdown-text-matching-color:#212121}.md .theme-dark,.md.theme-dark{--f7-autocomplete-dropdown-text-color:rgba(255, 255, 255, 0.54);--f7-autocomplete-dropdown-text-matching-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-autocomplete-dropdown-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:700;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.aurora .theme-dark,.aurora.theme-dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.autocomplete-page .autocomplete-found{display:block}.autocomplete-page .autocomplete-not-found{display:none}.autocomplete-page .autocomplete-values{display:block}.autocomplete-page .list ul:empty{display:none}.autocomplete-preloader:not(.autocomplete-preloader-visible){visibility:hidden}.autocomplete-preloader:not(.autocomplete-preloader-visible),.autocomplete-preloader:not(.autocomplete-preloader-visible) *{animation:none}.autocomplete-dropdown{background:var(--f7-autocomplete-dropdown-bg-color);box-shadow:var(--f7-autocomplete-dropdown-box-shadow);box-sizing:border-box;position:absolute;z-index:500;width:100%;left:0}.autocomplete-dropdown .autocomplete-dropdown-inner{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;height:100%;z-index:1}.autocomplete-dropdown .autocomplete-preloader{display:none;position:absolute;bottom:100%;width:var(--f7-autocomplete-dropdown-preloader-size);height:var(--f7-autocomplete-dropdown-preloader-size)}.autocomplete-dropdown .autocomplete-preloader-visible{display:block}.autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-autocomplete-dropdown-placeholder-color)}.autocomplete-dropdown .list{margin:0;color:var(--f7-autocomplete-dropdown-text-color);font-size:var(--f7-autocomplete-dropdown-font-size)}.autocomplete-dropdown .list b{color:var(--f7-autocomplete-dropdown-text-matching-color);font-weight:var(--f7-autocomplete-dropdown-text-matching-font-weight)}.autocomplete-dropdown .list ul{background:0 0!important}.autocomplete-dropdown .list ul:after,.autocomplete-dropdown .list ul:before{display:none!important}.autocomplete-dropdown .autocomplete-dropdown-selected{background:var(--f7-autocomplete-dropdown-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.searchbar-input-wrap .autocomplete-dropdown{background-color:var(--f7-searchbar-input-bg-color,var(--f7-searchbar-bg-color));border-radius:var(--f7-searchbar-input-border-radius)}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-searchbar-placeholder-color)}.searchbar-input-wrap .autocomplete-dropdown li:last-child{border-radius:0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);position:relative;overflow:hidden}.searchbar-input-wrap .autocomplete-dropdown .item-content{padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.list .item-content-dropdown-expanded .item-title.item-label{width:0;flex-shrink:10;overflow:hidden}.list .item-content-dropdown-expanded .item-title.item-label+.item-input-wrap{margin-left:0}.list .item-content-dropdown-expanded .item-input-wrap{width:100%}.ios .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:12px}.ios .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.md .autocomplete-page .navbar .autocomplete-preloader{margin-right:8px}.md .autocomplete-popup .navbar .autocomplete-preloader{margin-left:8px;margin-right:16px}.md .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:8px}.md .autocomplete-dropdown .autocomplete-preloader circle{stroke-width:3}.aurora .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:2px}.aurora .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}
+:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size);--f7-autocomplete-dropdown-bg-color:#fff}:root .dark,:root.dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d}.ios{--f7-autocomplete-dropdown-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:600;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .dark,.ios.dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:0 2px 2px rgba(0, 0, 0, 0.25);--f7-autocomplete-dropdown-text-matching-font-weight:400;--f7-autocomplete-dropdown-text-color:rgba(0, 0, 0, 0.54);--f7-autocomplete-dropdown-text-matching-color:#212121}.md .dark,.md.dark{--f7-autocomplete-dropdown-text-color:rgba(255, 255, 255, 0.54);--f7-autocomplete-dropdown-text-matching-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-autocomplete-dropdown-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-autocomplete-dropdown-text-matching-font-weight:700;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.aurora .dark,.aurora.dark{--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.autocomplete-page .autocomplete-found{display:block}.autocomplete-page .autocomplete-not-found{display:none}.autocomplete-page .autocomplete-values{display:block}.autocomplete-page .list ul:empty{display:none}.autocomplete-preloader:not(.autocomplete-preloader-visible){visibility:hidden}.autocomplete-preloader:not(.autocomplete-preloader-visible),.autocomplete-preloader:not(.autocomplete-preloader-visible) *{animation:none}.autocomplete-dropdown{background:var(--f7-autocomplete-dropdown-bg-color);box-shadow:var(--f7-autocomplete-dropdown-box-shadow);box-sizing:border-box;position:absolute;z-index:500;width:100%;left:0}.autocomplete-dropdown .autocomplete-dropdown-inner{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;height:100%;z-index:1}.autocomplete-dropdown .autocomplete-preloader{display:none;position:absolute;bottom:100%;width:var(--f7-autocomplete-dropdown-preloader-size);height:var(--f7-autocomplete-dropdown-preloader-size)}.autocomplete-dropdown .autocomplete-preloader-visible{display:block}.autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-autocomplete-dropdown-placeholder-color)}.autocomplete-dropdown .list{margin:0;color:var(--f7-autocomplete-dropdown-text-color);font-size:var(--f7-autocomplete-dropdown-font-size)}.autocomplete-dropdown .list b{color:var(--f7-autocomplete-dropdown-text-matching-color);font-weight:var(--f7-autocomplete-dropdown-text-matching-font-weight)}.autocomplete-dropdown .list ul{background:0 0!important}.autocomplete-dropdown .list ul:after,.autocomplete-dropdown .list ul:before{display:none!important}.autocomplete-dropdown .autocomplete-dropdown-selected{background:var(--f7-autocomplete-dropdown-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.searchbar-input-wrap .autocomplete-dropdown{background-color:var(--f7-searchbar-input-bg-color,var(--f7-searchbar-bg-color));border-radius:var(--f7-searchbar-input-border-radius)}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder{color:var(--f7-searchbar-placeholder-color)}.searchbar-input-wrap .autocomplete-dropdown li:last-child{border-radius:0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);position:relative;overflow:hidden}.searchbar-input-wrap .autocomplete-dropdown .item-content{padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.list .item-content-dropdown-expanded .item-title.item-label{width:0;flex-shrink:10;overflow:hidden}.list .item-content-dropdown-expanded .item-title.item-label+.item-input-wrap{margin-left:0}.list .item-content-dropdown-expanded .item-input-wrap{width:100%}.ios .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:12px}.ios .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.md .autocomplete-page .navbar .autocomplete-preloader{margin-right:8px}.md .autocomplete-popup .navbar .autocomplete-preloader{margin-left:8px;margin-right:16px}.md .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:8px}.md .autocomplete-dropdown .autocomplete-preloader circle{stroke-width:3}.aurora .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:2px}.aurora .searchbar-input-wrap .autocomplete-dropdown{margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:20}.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}

package/components/autocomplete/autocomplete.js

@@ -1,6 +1,6 @@
-import { extend } from '../../shared/utils';
-import Autocomplete from './autocomplete-class';
-import ConstructorMethods from '../../shared/constructor-methods';
+import { extend } from '../../shared/utils.js';
+import Autocomplete from './autocomplete-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
 export default {
   name: 'autocomplete',
   params: {

package/components/autocomplete/autocomplete.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,r=e.getDevice,n=(e.getSupport,e.Class),l=(e.Modal,e.ConstructorMethods),p=(e.ModalMethods,a.extend),s=a.id,d=a.nextTick,i=a.iosPreloaderContent,c=a.mdPreloaderContent,u=a.auroraPreloaderContent,m=a.deleteProps;class h extends n{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const a=this;a.app=e;const n=r(),l=p({on:{}},e.params.autocomplete);let i,c;void 0===l.searchbarDisableButton&&(l.searchbarDisableButton="aurora"!==e.theme),a.useModulesParams(l),a.params=p(l,o),a.params.openerEl&&(i=t(a.params.openerEl),i.length&&(i[0].f7Autocomplete=a)),a.params.inputEl&&(c=t(a.params.inputEl),c.length&&(c[0].f7Autocomplete=a));const u=s();let m=o.url;!m&&i&&i.length&&(i.attr("href")?m=i.attr("href"):i.find("a").length>0&&(m=i.find("a").attr("href"))),m&&"#"!==m&&""!==m||(m=a.params.url);const h=a.params.multiple?"checkbox":"radio";p(a,{$openerEl:i,openerEl:i&&i[0],$inputEl:c,inputEl:c&&c[0],id:u,url:m,value:a.params.value||[],inputType:h,inputName:`${h}-${u}`,$modalEl:void 0,$dropdownEl:void 0});let v="";function f(){let e=a.$inputEl.val().trim();a.params.source&&a.params.source.call(a,e,(o=>{let t="";const r=a.params.limit?Math.min(a.params.limit,o.length):o.length;let n,l,p;a.items=o,a.params.highlightMatches&&(e=e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&"),n=new RegExp(`(${e})`,"i"));for(let e=0;e<r;e+=1){const r="object"==typeof o[e]?o[e][a.params.valueProperty]:o[e],s="object"==typeof o[e]?o[e][a.params.textProperty]:o[e];0===e&&(l=r,p=a.items[e]),t+=a.renderItem({value:r,text:a.params.highlightMatches?s.replace(n,"<b>$1</b>"):s},e)}if(""===t&&""===e&&a.params.dropdownPlaceholderText&&(t+=a.renderItem({placeholder:!0,text:a.params.dropdownPlaceholderText})),a.$dropdownEl.find("ul").html(t),a.params.typeahead){if(!l||!p)return;if(0!==l.toLowerCase().indexOf(e.toLowerCase()))return;if(v.toLowerCase()===e.toLowerCase())return void(a.value=[]);if(0===v.toLowerCase().indexOf(e.toLowerCase()))return v=e,void(a.value=[]);c.val(l),c[0].setSelectionRange(e.length,l.length);const o="object"==typeof a.value[0]?a.value[0][a.params.valueProperty]:a.value[0];o&&l.toLowerCase()===o.toLowerCase()||(a.value=[p],a.emit("local::change autocompleteChange",[p]))}v=e}))}function $(){const e=this,o=e.value;let r,n,l;if(t(e).parents(".autocomplete-values").length>0){if("checkbox"===a.inputType&&!e.checked){for(let e=0;e<a.value.length;e+=1)l="string"==typeof a.value[e]?a.value[e]:a.value[e][a.params.valueProperty],l!==o&&1*l!=1*o||a.value.splice(e,1);a.updateValues(),a.emit("local::change autocompleteChange",a.value)}}else{for(let e=0;e<a.items.length;e+=1)n="object"==typeof a.items[e]?a.items[e][a.params.valueProperty]:a.items[e],n!==o&&1*n!=1*o||(r=a.items[e]);if("radio"===a.inputType)a.value=[r];else if(e.checked)a.value.push(r);else for(let e=0;e<a.value.length;e+=1)l="object"==typeof a.value[e]?a.value[e][a.params.valueProperty]:a.value[e],l!==o&&1*l!=1*o||a.value.splice(e,1);a.updateValues(),("radio"===a.inputType&&e.checked||"checkbox"===a.inputType)&&a.emit("local::change autocompleteChange",a.value)}}function g(e){const o=t(e.target);o.is(a.$inputEl[0])||a.$dropdownEl&&o.closest(a.$dropdownEl[0]).length||a.close()}function b(){a.open()}function w(){a.open()}function x(){a.$dropdownEl.find("label.active-state").length>0||setTimeout((()=>{a.close()}),0)}function E(){a.positionDropdown()}function C(e){if(!a.opened)return;if(27===e.keyCode)return e.preventDefault(),void a.$inputEl.blur();if(13===e.keyCode){const o=a.$dropdownEl.find(".autocomplete-dropdown-selected label");return o.length?(e.preventDefault(),o.trigger("click"),void a.$inputEl.blur()):void(a.params.typeahead&&(e.preventDefault(),a.$inputEl.blur()))}if(40!==e.keyCode&&38!==e.keyCode)return;e.preventDefault();const o=a.$dropdownEl.find(".autocomplete-dropdown-selected");let t;o.length?(t=o[40===e.keyCode?"next":"prev"]("li"),t.length||(t=a.$dropdownEl.find("li").eq(40===e.keyCode?0:a.$dropdownEl.find("li").length-1))):t=a.$dropdownEl.find("li").eq(40===e.keyCode?0:a.$dropdownEl.find("li").length-1),t.hasClass("autocomplete-dropdown-placeholder")||(o.removeClass("autocomplete-dropdown-selected"),t.addClass("autocomplete-dropdown-selected"))}function y(){const e=t(this);let o;for(let t=0;t<a.items.length;t+=1){const r="object"==typeof a.items[t]?a.items[t][a.params.valueProperty]:a.items[t],n=e.attr("data-value");r!==n&&1*r!=1*n||(o=a.items[t])}a.params.updateInputValueOnSelect&&(a.$inputEl.val("object"==typeof o?o[a.params.valueProperty]:o),a.$inputEl.trigger("input change")),a.value=[o],a.emit("local::change autocompleteChange",[o]),a.close()}return a.attachEvents=function(){"dropdown"!==a.params.openIn&&a.$openerEl&&a.$openerEl.on("click",b),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.on("focus",w),a.$inputEl.on(a.params.inputEvents,f),n.android?t("html").on("click",g):a.$inputEl.on("blur",x),a.$inputEl.on("keydown",C))},a.detachEvents=function(){"dropdown"!==a.params.openIn&&a.$openerEl&&a.$openerEl.off("click",b),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.off("focus",w),a.$inputEl.off(a.params.inputEvents,f),n.android?t("html").off("click",g):a.$inputEl.off("blur",x),a.$inputEl.off("keydown",C))},a.attachDropdownEvents=function(){a.$dropdownEl.on("click","label",y),e.on("resize",E)},a.detachDropdownEvents=function(){a.$dropdownEl.off("click","label",y),e.off("resize",E)},a.attachPageEvents=function(){a.$el.on("change",'input[type="radio"], input[type="checkbox"]',$),a.params.closeOnSelect&&!a.params.multiple&&a.$el.once("click",".list label",(()=>{d((()=>{a.close()}))}))},a.detachPageEvents=function(){a.$el.off("change",'input[type="radio"], input[type="checkbox"]',$)},a.useModules(),a.init(),a}get view(){const e=this,{$openerEl:o,$inputEl:t,app:a}=e;let r;if(e.params.view)r=e.params.view;else if(o||t){const e=o||t;r=e.closest(".view").length&&e.closest(".view")[0].f7View}return r||(r=a.views.main),r}positionDropdown(){const e=this,{$inputEl:o,app:a,$dropdownEl:r}=e,n=o.parents(".page-content");if(0===n.length)return;const l=o.offset(),p=o[0].offsetWidth,s=o[0].offsetHeight,d=o.parents(".list");let i;d.parents().each((e=>{if(i)return;const o=t(e);o.parent(n).length&&(i=o)}));const c=d.offset(),u=parseInt(n.css("padding-bottom"),10),m=d.length>0?c.left-n.offset().left:0,h=l.left-(d.length>0?c.left:0)-(a.rtl,0),v=l.top-(n.offset().top-n[0].scrollTop),f=n[0].scrollHeight-u-(v+n[0].scrollTop)-o[0].offsetHeight,$=a.rtl?"padding-right":"padding-left";let g;d.length&&!e.params.expandInput&&(g=(a.rtl?d[0].offsetWidth-h-p:h)-("md"===a.theme?16:15)),r.css({left:`${d.length>0?m:h}px`,top:`${v+n[0].scrollTop+s}px`,width:`${d.length>0?d[0].offsetWidth:p}px`}),r.children(".autocomplete-dropdown-inner").css({maxHeight:`${f}px`,[$]:d.length>0&&!e.params.expandInput?`${g}px`:""})}focus(){this.$el.find("input[type=search]").focus()}source(e){const o=this;if(!o.params.source)return;const{$el:t}=o;o.params.source.call(o,e,(a=>{let r="";const n=o.params.limit?Math.min(o.params.limit,a.length):a.length;o.items=a;for(let e=0;e<n;e+=1){let t=!1;const n="object"==typeof a[e]?a[e][o.params.valueProperty]:a[e];for(let e=0;e<o.value.length;e+=1){const a="object"==typeof o.value[e]?o.value[e][o.params.valueProperty]:o.value[e];a!==n&&1*a!=1*n||(t=!0)}r+=o.renderItem({value:n,text:"object"==typeof a[e]?a[e][o.params.textProperty]:a[e],inputType:o.inputType,id:o.id,inputName:o.inputName,selected:t},e)}t.find(".autocomplete-found ul").html(r),0===a.length?0!==e.length?(t.find(".autocomplete-not-found").show(),t.find(".autocomplete-found, .autocomplete-values").hide()):(t.find(".autocomplete-values").show(),t.find(".autocomplete-found, .autocomplete-not-found").hide()):(t.find(".autocomplete-found").show(),t.find(".autocomplete-not-found, .autocomplete-values").hide())}))}updateValues(){const e=this;let o="";for(let t=0;t<e.value.length;t+=1)o+=e.renderItem({value:"object"==typeof e.value[t]?e.value[t][e.params.valueProperty]:e.value[t],text:"object"==typeof e.value[t]?e.value[t][e.params.textProperty]:e.value[t],inputType:e.inputType,id:e.id,inputName:`${e.inputName}-checked}`,selected:!0},t);e.$el.find(".autocomplete-values ul").html(o)}preloaderHide(){const e=this;"dropdown"===e.params.openIn&&e.$dropdownEl?e.$dropdownEl.find(".autocomplete-preloader").removeClass("autocomplete-preloader-visible"):t(".autocomplete-preloader").removeClass("autocomplete-preloader-visible")}preloaderShow(){const e=this;"dropdown"===e.params.openIn&&e.$dropdownEl?e.$dropdownEl.find(".autocomplete-preloader").addClass("autocomplete-preloader-visible"):t(".autocomplete-preloader").addClass("autocomplete-preloader-visible")}renderPreloader(){const e=this,o={iosPreloaderContent:i,mdPreloaderContent:c,auroraPreloaderContent:u};return $jsx("div",{class:"autocomplete-preloader preloader "+(e.params.preloaderColor?`color-${e.params.preloaderColor}`:"")},o[`${e.app.theme}PreloaderContent`]||"")}renderSearchbar(){const e=this;return e.params.renderSearchbar?e.params.renderSearchbar.call(e):$jsx("form",{class:"searchbar"},$jsx("div",{class:"searchbar-inner"},$jsx("div",{class:"searchbar-input-wrap"},$jsx("input",{type:"search",spellcheck:e.params.searchbarSpellcheck||"false",placeholder:e.params.searchbarPlaceholder}),$jsx("i",{class:"searchbar-icon"}),$jsx("span",{class:"input-clear-button"})),e.params.searchbarDisableButton&&$jsx("span",{class:"searchbar-disable-button"},e.params.searchbarDisableText)))}renderItem(e,o){const t=this;if(t.params.renderItem)return t.params.renderItem.call(t,e,o);const a=e.value&&"string"==typeof e.value?e.value.replace(/"/g,"&quot;"):e.value;return"dropdown"!==t.params.openIn?$jsx("li",null,$jsx("label",{class:`item-${e.inputType} item-content`},$jsx("input",{type:e.inputType,name:e.inputName,value:a,_checked:e.selected}),$jsx("i",{class:`icon icon-${e.inputType}`}),$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},e.text)))):e.placeholder?$jsx("li",{class:"autocomplete-dropdown-placeholder"},$jsx("label",{class:"item-content"},$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},e.text)))):$jsx("li",null,$jsx("label",{class:"item-radio item-content","data-value":a},$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},e.text))))}renderNavbar(){const e=this;if(e.params.renderNavbar)return e.params.renderNavbar.call(e);let o=e.params.pageTitle;void 0===o&&e.$openerEl&&e.$openerEl.length&&(o=e.$openerEl.find(".item-title").text().trim());const t="popup"===e.params.openIn,a=t?e.params.preloader&&$jsx("div",{class:"left"},e.renderPreloader()):$jsx("div",{class:"left sliding"},$jsx("a",{class:"link back"},$jsx("i",{class:"icon icon-back"}),$jsx("span",{class:"if-not-md"},e.params.pageBackLinkText))),r=t?$jsx("div",{class:"right"},$jsx("a",{class:"link popup-close","data-popup":".autocomplete-popup"},e.params.popupCloseLinkText)):e.params.preloader&&$jsx("div",{class:"right"},e.renderPreloader());return $jsx("div",{class:"navbar "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},$jsx("div",{class:"navbar-bg"}),$jsx("div",{class:"navbar-inner "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},a,o&&$jsx("div",{class:"title sliding"},o),r,$jsx("div",{class:"subnavbar sliding"},e.renderSearchbar())))}renderDropdown(){const e=this;return e.params.renderDropdown?e.params.renderDropdown.call(e,e.items):$jsx("div",{class:"autocomplete-dropdown"},$jsx("div",{class:"autocomplete-dropdown-inner"},$jsx("div",{class:"list "+(e.params.expandInput?"":"no-safe-areas")},$jsx("ul",null))),e.params.preloader&&e.renderPreloader())}renderPage(e){const o=this;return o.params.renderPage?o.params.renderPage.call(o,o.items):$jsx("div",{class:"page page-with-subnavbar autocomplete-page","data-name":"autocomplete-page"},o.renderNavbar(e),$jsx("div",{class:"searchbar-backdrop"}),$jsx("div",{class:"page-content"},$jsx("div",{class:`list autocomplete-list autocomplete-found autocomplete-list-${o.id} ${o.params.formColorTheme?`color-${o.params.formColorTheme}`:""}`},$jsx("ul",null)),$jsx("div",{class:"list autocomplete-not-found"},$jsx("ul",null,$jsx("li",{class:"item-content"},$jsx("div",{class:"item-inner"},$jsx("div",{class:"item-title"},o.params.notFoundText))))),$jsx("div",{class:"list autocomplete-values"},$jsx("ul",null))))}renderPopup(){const e=this;return e.params.renderPopup?e.params.renderPopup.call(e,e.items):$jsx("div",{class:"popup autocomplete-popup"},$jsx("div",{class:"view"},e.renderPage(!0),";"))}onOpen(e,o){const a=this,r=a.app,n=t(o);if(a.$el=n,a.el=n[0],a.openedIn=e,a.opened=!0,"dropdown"===a.params.openIn)a.attachDropdownEvents(),a.$dropdownEl.addClass("autocomplete-dropdown-in"),a.$inputEl.trigger("input");else{let e=n.find(".searchbar");"page"===a.params.openIn&&"ios"===r.theme&&0===e.length&&(e=t(r.navbar.getElByPage(n)).find(".searchbar")),a.searchbar=r.searchbar.create({el:e,backdropEl:n.find(".searchbar-backdrop"),customSearch:!0,on:{search(e,o){0===o.length&&a.searchbar.enabled?a.searchbar.backdropShow():a.searchbar.backdropHide(),a.source(o)}}}),a.attachPageEvents(),a.updateValues(),a.params.requestSourceOnOpen&&a.source("")}a.emit("local::open autocompleteOpen",a)}autoFocus(){const e=this;return e.searchbar&&e.searchbar.$inputEl&&e.searchbar.$inputEl.focus(),e}onOpened(){const e=this;"dropdown"!==e.params.openIn&&e.params.autoFocus&&e.autoFocus(),e.emit("local::opened autocompleteOpened",e)}onClose(){const e=this;e.destroyed||(e.searchbar&&e.searchbar.destroy&&(e.searchbar.destroy(),e.searchbar=null,delete e.searchbar),"dropdown"===e.params.openIn?(e.detachDropdownEvents(),e.$dropdownEl.removeClass("autocomplete-dropdown-in").remove(),e.$inputEl.parents(".item-content-dropdown-expanded").removeClass("item-content-dropdown-expanded")):e.detachPageEvents(),e.emit("local::close autocompleteClose",e))}onClosed(){const e=this;e.destroyed||(e.opened=!1,e.$el=null,e.el=null,delete e.$el,delete e.el,e.emit("local::closed autocompleteClosed",e))}openPage(){const e=this;if(e.opened)return e;const o=e.renderPage();return e.view.router.navigate({url:e.url,route:{content:o,path:e.url,on:{pageBeforeIn(o,t){e.onOpen("page",t.el)},pageAfterIn(o,t){e.onOpened("page",t.el)},pageBeforeOut(o,t){e.onClose("page",t.el)},pageAfterOut(o,t){e.onClosed("page",t.el)}},options:{animate:e.params.animate}}}),e}openPopup(){const e=this;if(e.opened)return e;const o={content:e.renderPopup(),animate:e.params.animate,push:e.params.popupPush,swipeToClose:e.params.popupSwipeToClose,on:{popupOpen(o){e.onOpen("popup",o.el)},popupOpened(o){e.onOpened("popup",o.el)},popupClose(o){e.onClose("popup",o.el)},popupClosed(o){e.onClosed("popup",o.el)}}};return e.params.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,popup:o}}):e.modal=e.app.popup.create(o).open(e.params.animate),e}openDropdown(){const e=this;e.$dropdownEl||(e.$dropdownEl=t(e.renderDropdown()));e.$inputEl.parents(".list").length&&e.$inputEl.parents(".item-content").length>0&&e.params.expandInput&&e.$inputEl.parents(".item-content").addClass("item-content-dropdown-expanded");const o=e.$inputEl.parents(".page-content");e.params.dropdownContainerEl?t(e.params.dropdownContainerEl).append(e.$dropdownEl):0===o.length?e.$dropdownEl.insertAfter(e.$inputEl):(e.positionDropdown(),o.append(e.$dropdownEl)),e.onOpen("dropdown",e.$dropdownEl),e.onOpened("dropdown",e.$dropdownEl)}open(){const e=this;if(e.opened)return e;return e[`open${e.params.openIn.split("").map(((e,o)=>0===o?e.toUpperCase():e)).join("")}`](),e}close(){const e=this;return e.opened?("dropdown"===e.params.openIn?(e.onClose(),e.onClosed()):e.params.routableModals&&e.view||"page"===e.openedIn?e.view.router.back({animate:e.params.animate}):(e.modal.once("modalClosed",(()=>{d((()=>{e.destroyed||(e.modal.destroy(),delete e.modal)}))})),e.modal.close()),e):e}init(){this.attachEvents()}destroy(){const e=this;e.emit("local::beforeDestroy autocompleteBeforeDestroy",e),e.detachEvents(),e.$inputEl&&e.$inputEl[0]&&delete e.$inputEl[0].f7Autocomplete,e.$openerEl&&e.$openerEl[0]&&delete e.$openerEl[0].f7Autocomplete,m(e),e.destroyed=!0}}var v={name:"autocomplete",params:{autocomplete:{openerEl:void 0,inputEl:void 0,view:void 0,dropdownContainerEl:void 0,dropdownPlaceholderText:void 0,typeahead:!1,highlightMatches:!0,expandInput:!1,updateInputValueOnSelect:!0,inputEvents:"input",value:void 0,multiple:!1,source:void 0,limit:void 0,valueProperty:"id",textProperty:"text",openIn:"page",pageBackLinkText:"Back",popupCloseLinkText:"Close",pageTitle:void 0,searchbarPlaceholder:"Search...",searchbarDisableText:"Cancel",searchbarDisableButton:void 0,searchbarSpellcheck:!1,popupPush:!1,popupSwipeToClose:void 0,animate:!0,autoFocus:!1,closeOnSelect:!1,notFoundText:"Nothing found",requestSourceOnOpen:!1,preloaderColor:void 0,preloader:!1,formColorTheme:void 0,navbarColorTheme:void 0,routableModals:!1,url:"select/",renderDropdown:void 0,renderPage:void 0,renderPopup:void 0,renderItem:void 0,renderSearchbar:void 0,renderNavbar:void 0}},static:{Autocomplete:h},create(){const e=this;e.autocomplete=p(l({defaultSelector:void 0,constructor:h,app:e,domProp:"f7Autocomplete"}),{open(o){const t=e.autocomplete.get(o);if(t&&t.open)return t.open()},close(o){const t=e.autocomplete.get(o);if(t&&t.close)return t.close()}})}};if(o){if(e.prototype.modules&&e.prototype.modules[v.name])return;e.use(v),e.instance&&(e.instance.useModuleParams(v,e.instance.params),e.instance.useModule(v))}return v}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/breadcrumbs/breadcrumbs-aurora.less

@@ -0,0 +1,2 @@
+.aurora {
+}

package/components/breadcrumbs/breadcrumbs-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/breadcrumbs/breadcrumbs-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/breadcrumbs/breadcrumbs-rtl.css

@@ -0,0 +1 @@
+:root{--f7-breadcrumbs-spacing:12px;--f7-breadcrumbs-padding:2px 0;--f7-breadcrumbs-item-padding:0px;--f7-breadcrumbs-item-bg-color:0px;--f7-breadcrumbs-item-font-weight:normal;--f7-breadcrumbs-item-active-font-weight:600;--f7-breadcrumbs-icon-size:24px;--f7-breadcrumbs-item-color:rgba(0, 0, 0, 0.55);--f7-breadcrumbs-separator-color:rgba(0, 0, 0, 0.35);--f7-breadcrumbs-item-active-color:#000;--f7-breadcrumbs-collapsed-color:rgba(0, 0, 0, 0.75);--f7-breadcrumbs-collapsed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-breadcrumbs-item-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-separator-color:rgba(255, 255, 255, 0.35);--f7-breadcrumbs-item-active-color:#fff;--f7-breadcrumbs-collapsed-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-collapsed-bg-color:rgba(255, 255, 255, 0.15)}.ios{--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:17px}.md{--f7-breadcrumbs-separator-icon:'chevron_right_md';--f7-breadcrumbs-font-size:16px}.aurora{--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:16px}.breadcrumbs{display:flex;align-items:center;justify-content:flex-start;font-size:var(--f7-breadcrumbs-font-size);overflow:auto;white-space:nowrap;padding:var(--f7-breadcrumbs-padding)}.breadcrumbs::-webkit-scrollbar{display:none;opacity:0}.breadcrumbs-collapsed,.breadcrumbs-item,.breadcrumbs-separator{flex-shrink:0;--f7-touch-ripple-color:transparent!important}.breadcrumbs-collapsed+.breadcrumbs-collapsed,.breadcrumbs-collapsed+.breadcrumbs-item,.breadcrumbs-collapsed+.breadcrumbs-separator,.breadcrumbs-item+.breadcrumbs-collapsed,.breadcrumbs-item+.breadcrumbs-item,.breadcrumbs-item+.breadcrumbs-separator,.breadcrumbs-separator+.breadcrumbs-collapsed,.breadcrumbs-separator+.breadcrumbs-item,.breadcrumbs-separator+.breadcrumbs-separator{margin-left:var(--f7-breadcrumbs-spacing)}.breadcrumbs-item{color:var(--f7-breadcrumbs-item-color);font-weight:var(--f7-breadcrumbs-item-font-weight);padding:var(--f7-breadcrumbs-item-padding);background-color:var(--f7-breadcrumbs-item-bg-color);display:flex;align-items:center}.breadcrumbs-item .icon{font-size:var(--f7-breadcrumbs-icon-size);width:var(--f7-breadcrumbs-icon-size);height:var(--f7-breadcrumbs-icon-size)}.breadcrumbs-item a{color:inherit;--f7-touch-ripple-color:transparent!important}.breadcrumbs-item-active{color:var(--f7-breadcrumbs-item-active-color,var(--f7-breadcrumbs-item-color));font-weight:var(--f7-breadcrumbs-item-active-font-weight)}.breadcrumbs-separator{color:var(--f7-breadcrumbs-separator-color);height:24px;overflow:hidden;display:flex;align-items:center}.breadcrumbs-separator::after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;content:var(--f7-breadcrumbs-separator-icon);width:12px}.ios .breadcrumbs-separator::after{font-size:12px;height:11px}.md .breadcrumbs-separator::after{font-size:18px;height:18px}.aurora .breadcrumbs-separator::after{font-size:12px;height:11px}.breadcrumbs-collapsed{display:flex;align-items:center;padding:0 6px;background:var(--f7-breadcrumbs-collapsed-bg-color);height:1em;border-radius:4px;cursor:pointer}.breadcrumbs-collapsed span,.breadcrumbs-collapsed::after,.breadcrumbs-collapsed::before{content:'';width:4px;height:4px;background:var(--f7-breadcrumbs-collapsed-color);border-radius:50%}.breadcrumbs-collapsed span{margin:0 3px}

package/components/breadcrumbs/breadcrumbs-vars.less

@@ -0,0 +1,36 @@
+:root {
+  --f7-breadcrumbs-spacing: 12px;
+  --f7-breadcrumbs-padding: 2px 0;
+  --f7-breadcrumbs-item-padding: 0px;
+  --f7-breadcrumbs-item-bg-color: 0px;
+  --f7-breadcrumbs-item-font-weight: normal;
+  --f7-breadcrumbs-item-active-font-weight: 600;
+  --f7-breadcrumbs-icon-size: 24px;
+
+  .light-vars({
+    --f7-breadcrumbs-item-color: rgba(0,0,0,0.55);
+    --f7-breadcrumbs-separator-color: rgba(0,0,0,0.35);
+    --f7-breadcrumbs-item-active-color: #000;
+    --f7-breadcrumbs-collapsed-color: rgba(0,0,0,0.75);
+    --f7-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
+  });
+  .dark-vars({
+    --f7-breadcrumbs-item-color: rgba(255,255,255,0.75);
+    --f7-breadcrumbs-separator-color: rgba(255,255,255,0.35);
+    --f7-breadcrumbs-item-active-color: #fff;
+    --f7-breadcrumbs-collapsed-color: rgba(255,255,255,0.75);
+    --f7-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
+  });
+}
+.ios-vars({
+  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
+  --f7-breadcrumbs-font-size: 17px;
+});
+.md-vars({
+  --f7-breadcrumbs-separator-icon: 'chevron_right_md';
+  --f7-breadcrumbs-font-size: 16px;
+});
+.aurora-vars({
+  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
+  --f7-breadcrumbs-font-size: 16px;
+});

package/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1 @@
+:root{--f7-breadcrumbs-spacing:12px;--f7-breadcrumbs-padding:2px 0;--f7-breadcrumbs-item-padding:0px;--f7-breadcrumbs-item-bg-color:0px;--f7-breadcrumbs-item-font-weight:normal;--f7-breadcrumbs-item-active-font-weight:600;--f7-breadcrumbs-icon-size:24px;--f7-breadcrumbs-item-color:rgba(0, 0, 0, 0.55);--f7-breadcrumbs-separator-color:rgba(0, 0, 0, 0.35);--f7-breadcrumbs-item-active-color:#000;--f7-breadcrumbs-collapsed-color:rgba(0, 0, 0, 0.75);--f7-breadcrumbs-collapsed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-breadcrumbs-item-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-separator-color:rgba(255, 255, 255, 0.35);--f7-breadcrumbs-item-active-color:#fff;--f7-breadcrumbs-collapsed-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-collapsed-bg-color:rgba(255, 255, 255, 0.15)}.ios{--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:17px}.md{--f7-breadcrumbs-separator-icon:'chevron_right_md';--f7-breadcrumbs-font-size:16px}.aurora{--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:16px}.breadcrumbs{display:flex;align-items:center;justify-content:flex-start;font-size:var(--f7-breadcrumbs-font-size);overflow:auto;white-space:nowrap;padding:var(--f7-breadcrumbs-padding)}.breadcrumbs::-webkit-scrollbar{display:none;opacity:0}.breadcrumbs-collapsed,.breadcrumbs-item,.breadcrumbs-separator{flex-shrink:0;--f7-touch-ripple-color:transparent!important}.breadcrumbs-collapsed+.breadcrumbs-collapsed,.breadcrumbs-collapsed+.breadcrumbs-item,.breadcrumbs-collapsed+.breadcrumbs-separator,.breadcrumbs-item+.breadcrumbs-collapsed,.breadcrumbs-item+.breadcrumbs-item,.breadcrumbs-item+.breadcrumbs-separator,.breadcrumbs-separator+.breadcrumbs-collapsed,.breadcrumbs-separator+.breadcrumbs-item,.breadcrumbs-separator+.breadcrumbs-separator{margin-left:var(--f7-breadcrumbs-spacing)}.breadcrumbs-item{color:var(--f7-breadcrumbs-item-color);font-weight:var(--f7-breadcrumbs-item-font-weight);padding:var(--f7-breadcrumbs-item-padding);background-color:var(--f7-breadcrumbs-item-bg-color);display:flex;align-items:center}.breadcrumbs-item .icon{font-size:var(--f7-breadcrumbs-icon-size);width:var(--f7-breadcrumbs-icon-size);height:var(--f7-breadcrumbs-icon-size)}.breadcrumbs-item a{color:inherit;--f7-touch-ripple-color:transparent!important}.breadcrumbs-item-active{color:var(--f7-breadcrumbs-item-active-color,var(--f7-breadcrumbs-item-color));font-weight:var(--f7-breadcrumbs-item-active-font-weight)}.breadcrumbs-separator{color:var(--f7-breadcrumbs-separator-color);height:24px;overflow:hidden;display:flex;align-items:center}.breadcrumbs-separator::after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;content:var(--f7-breadcrumbs-separator-icon);width:12px}.ios .breadcrumbs-separator::after{font-size:12px;height:11px}.md .breadcrumbs-separator::after{font-size:18px;height:18px}.aurora .breadcrumbs-separator::after{font-size:12px;height:11px}.breadcrumbs-collapsed{display:flex;align-items:center;padding:0 6px;background:var(--f7-breadcrumbs-collapsed-bg-color);height:1em;border-radius:4px;cursor:pointer}.breadcrumbs-collapsed span,.breadcrumbs-collapsed::after,.breadcrumbs-collapsed::before{content:'';width:4px;height:4px;background:var(--f7-breadcrumbs-collapsed-color);border-radius:50%}.breadcrumbs-collapsed span{margin:0 3px}

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+import Framework7 from '../app/app-class';
+import { CSSSelector, Framework7Plugin } from '../app/app-class';
+
+export namespace Breadcrumbs {
+  interface AppMethods {
+    breadcrumbs: {};
+  }
+  interface AppParams {}
+  interface DomEvents {}
+  interface AppEvents {}
+}
+
+declare const BreadcrumbsComponent: Framework7Plugin;
+
+export default BreadcrumbsComponent;

package/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,13 @@
+import { bindMethods } from '../../shared/utils.js';
+const Breadcrumbs = {};
+export default {
+  name: 'breadrumbs',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      breadrumbs: Breadcrumbs
+    });
+  }
+
+};

package/components/breadcrumbs/breadcrumbs.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);e.$;var o=e.utils,s=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.bindMethods);const r={};var a={name:"breadrumbs",create(){s(this,{breadrumbs:r})}};if(t){if(e.prototype.modules&&e.prototype.modules[a.name])return;e.use(a),e.instance&&(e.instance.useModuleParams(a,e.instance.params),e.instance.useModule(a))}return a}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/breadcrumbs/breadcrumbs.less

@@ -0,0 +1,100 @@
+/* === Breadcrumbs === */
+@import './breadcrumbs-vars.less';
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--f7-breadcrumbs-font-size);
+  overflow: auto;
+  white-space: nowrap;
+  padding: var(--f7-breadcrumbs-padding);
+  &::-webkit-scrollbar {
+    display: none;
+    opacity: 0;
+  }
+}
+.breadcrumbs-separator,
+.breadcrumbs-item,
+.breadcrumbs-collapsed {
+  flex-shrink: 0;
+  --f7-touch-ripple-color: transparent !important;
+  & + & {
+    margin-left: var(--f7-breadcrumbs-spacing);
+  }
+}
+.breadcrumbs-item {
+  color: var(--f7-breadcrumbs-item-color);
+  font-weight: var(--f7-breadcrumbs-item-font-weight);
+  padding: var(--f7-breadcrumbs-item-padding);
+  background-color: var(--f7-breadcrumbs-item-bg-color);
+  display: flex;
+  align-items: center;
+  .icon {
+    font-size: var(--f7-breadcrumbs-icon-size);
+    width: var(--f7-breadcrumbs-icon-size);
+    height: var(--f7-breadcrumbs-icon-size);
+  }
+  a {
+    color: inherit;
+    --f7-touch-ripple-color: transparent !important;
+  }
+  &-active {
+    color: var(--f7-breadcrumbs-item-active-color, var(--f7-breadcrumbs-item-color));
+    font-weight: var(--f7-breadcrumbs-item-active-font-weight);
+  }
+}
+.breadcrumbs-separator {
+  color: var(--f7-breadcrumbs-separator-color);
+  height: 24px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  &::after {
+    .core-icons-font();
+    content: var(--f7-breadcrumbs-separator-icon);
+    width: 12px;
+  }
+  .ios &::after {
+    font-size: 12px;
+    height: 11px;
+  }
+  .md &::after {
+    font-size: 18px;
+    height: 18px;
+  }
+  .aurora &::after {
+    font-size: 12px;
+    height: 11px;
+  }
+}
+.breadcrumbs-collapsed {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  background: var(--f7-breadcrumbs-collapsed-bg-color);
+  height: 1em;
+  border-radius: 4px;
+  cursor: pointer;
+  &::before,
+  &::after,
+  span {
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: var(--f7-breadcrumbs-collapsed-color);
+    border-radius: 50%;
+  }
+  span {
+    margin: 0 3px;
+  }
+}
+.if-ios-theme({
+  @import './breadcrumbs-ios.less';
+});
+.if-md-theme({
+  @import './breadcrumbs-md.less';
+});
+.if-aurora-theme({
+  @import './breadcrumbs-aurora.less';
+});