framework7 6.3.15 → 7.0.0-beta.11

package/components/treeview/treeview-rtl.css

@@ -1 +1 @@
-:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .theme-dark,:root.theme-dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-right:var(--f7-treeview-item-padding-left);padding-left:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-right:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-right:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-left:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-right:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-left:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(-90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}
+:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-right:var(--f7-treeview-item-padding-left);padding-left:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-right:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-right:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-left:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-right:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-left:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(-90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}

package/components/treeview/treeview.css

@@ -1 +1 @@
-:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .theme-dark,:root.theme-dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-left:var(--f7-treeview-item-padding-left);padding-right:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-left:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-left:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-right:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-left:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-right:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}
+:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-left:var(--f7-treeview-item-padding-left);padding-right:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-left:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-left:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-right:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-left:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-right:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}

package/components/treeview/treeview.js

@@ -1 +1,83 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,i=e.utils,o=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,i.bindMethods),n=i.iosPreloaderContent,a=i.mdPreloaderContent,l=i.auroraPreloaderContent,d={open:function(e){var t=this,i=r(e).eq(0);if(i.length&&(i.addClass("treeview-item-opened"),i.trigger("treeview:open"),t.emit("treeviewOpen",i[0]),i.hasClass("treeview-load-children")&&!i[0].f7TreeviewChildrenLoaded)){var o={iosPreloaderContent:n,mdPreloaderContent:a,auroraPreloaderContent:l};i.trigger("treeview:loadchildren",d),t.emit("treeviewLoadChildren",i[0],d),i.find(".treeview-toggle").addClass("treeview-toggle-hidden"),i.find(".treeview-item-root").prepend('<div class="preloader treeview-preloader">'+o[t.theme+"PreloaderContent"]+"</div>")}function d(e){e?(i.removeClass("treeview-item-opened"),i.trigger("treeview:close"),t.emit("treeviewClose",i[0])):i[0].f7TreeviewChildrenLoaded=!0,i.find(".treeview-toggle").removeClass("treeview-toggle-hidden"),i.find(".treeview-preloader").remove()}},close:function(e){var t=r(e).eq(0);t.length&&(t.removeClass("treeview-item-opened"),t.trigger("treeview:close"),this.emit("treeviewClose",t[0]))},toggle:function(e){var t=r(e).eq(0);if(t.length){var i=t.hasClass("treeview-item-opened");this.treeview[i?"close":"open"](t)}}},s={name:"treeview",create:function(){o(this,{treeview:d})},clicks:{".treeview-toggle":function(e,t,r){if(!e.parents(".treeview-item-toggle").length){var i=e.parents(".treeview-item").eq(0);i.length&&(r.preventF7Router=!0,this.treeview.toggle(i[0]))}},".treeview-item-toggle":function(e,t,r){var i=e.closest(".treeview-item").eq(0);i.length&&(r.preventF7Router=!0,this.treeview.toggle(i[0]))}}};if(t){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7.js';
+import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils.js';
+const Treeview = {
+  open(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    $itemEl.addClass('treeview-item-opened');
+    $itemEl.trigger('treeview:open');
+    app.emit('treeviewOpen', $itemEl[0]);
+
+    function done(cancel) {
+      if (cancel) {
+        $itemEl.removeClass('treeview-item-opened');
+        $itemEl.trigger('treeview:close');
+        app.emit('treeviewClose', $itemEl[0]);
+      } else {
+        $itemEl[0].f7TreeviewChildrenLoaded = true;
+      }
+
+      $itemEl.find('.treeview-toggle').removeClass('treeview-toggle-hidden');
+      $itemEl.find('.treeview-preloader').remove();
+    }
+
+    if ($itemEl.hasClass('treeview-load-children') && !$itemEl[0].f7TreeviewChildrenLoaded) {
+      const preloaders = {
+        iosPreloaderContent,
+        mdPreloaderContent,
+        auroraPreloaderContent
+      };
+      $itemEl.trigger('treeview:loadchildren', done);
+      app.emit('treeviewLoadChildren', $itemEl[0], done);
+      $itemEl.find('.treeview-toggle').addClass('treeview-toggle-hidden');
+      $itemEl.find('.treeview-item-root').prepend(`<div class="preloader treeview-preloader">${preloaders[`${app.theme}PreloaderContent`]}</div>`);
+    }
+  },
+
+  close(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    $itemEl.removeClass('treeview-item-opened');
+    $itemEl.trigger('treeview:close');
+    app.emit('treeviewClose', $itemEl[0]);
+  },
+
+  toggle(itemEl) {
+    const app = this;
+    const $itemEl = $(itemEl).eq(0);
+    if (!$itemEl.length) return;
+    const wasOpened = $itemEl.hasClass('treeview-item-opened');
+    app.treeview[wasOpened ? 'close' : 'open']($itemEl);
+  }
+
+};
+export default {
+  name: 'treeview',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      treeview: Treeview
+    });
+  },
+
+  clicks: {
+    '.treeview-toggle': function toggle($clickedEl, clickedData, e) {
+      const app = this;
+      if ($clickedEl.parents('.treeview-item-toggle').length) return;
+      const $treeviewItemEl = $clickedEl.parents('.treeview-item').eq(0);
+      if (!$treeviewItemEl.length) return;
+      e.preventF7Router = true;
+      app.treeview.toggle($treeviewItemEl[0]);
+    },
+    '.treeview-item-toggle': function toggle($clickedEl, clickedData, e) {
+      const app = this;
+      const $treeviewItemEl = $clickedEl.closest('.treeview-item').eq(0);
+      if (!$treeviewItemEl.length) return;
+      e.preventF7Router = true;
+      app.treeview.toggle($treeviewItemEl[0]);
+    }
+  }
+};

package/components/treeview/treeview.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,o=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.bindMethods),n=o.iosPreloaderContent,s=o.mdPreloaderContent,l=o.auroraPreloaderContent;const d={open(e){const t=this,o=r(e).eq(0);if(o.length&&(o.addClass("treeview-item-opened"),o.trigger("treeview:open"),t.emit("treeviewOpen",o[0]),o.hasClass("treeview-load-children")&&!o[0].f7TreeviewChildrenLoaded)){const e={iosPreloaderContent:n,mdPreloaderContent:s,auroraPreloaderContent:l};o.trigger("treeview:loadchildren",i),t.emit("treeviewLoadChildren",o[0],i),o.find(".treeview-toggle").addClass("treeview-toggle-hidden"),o.find(".treeview-item-root").prepend(`<div class="preloader treeview-preloader">${e[`${t.theme}PreloaderContent`]}</div>`)}function i(e){e?(o.removeClass("treeview-item-opened"),o.trigger("treeview:close"),t.emit("treeviewClose",o[0])):o[0].f7TreeviewChildrenLoaded=!0,o.find(".treeview-toggle").removeClass("treeview-toggle-hidden"),o.find(".treeview-preloader").remove()}},close(e){const t=r(e).eq(0);t.length&&(t.removeClass("treeview-item-opened"),t.trigger("treeview:close"),this.emit("treeviewClose",t[0]))},toggle(e){const t=r(e).eq(0);if(!t.length)return;const o=t.hasClass("treeview-item-opened");this.treeview[o?"close":"open"](t)}};var a={name:"treeview",create(){i(this,{treeview:d})},clicks:{".treeview-toggle":function(e,t,r){if(e.parents(".treeview-item-toggle").length)return;const o=e.parents(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))},".treeview-item-toggle":function(e,t,r){const o=e.closest(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))}}};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/typography/typography.js

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

package/components/typography/typography.lazy.js

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

package/{esm/components → components}/view/resizable-view.js

@@ -1,27 +1,29 @@
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import { getSupport } from '../../shared/get-support';
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
 
 function resizableView(view) {
-  var app = view.app;
-  var support = getSupport();
+  const app = view.app;
+  const support = getSupport();
   if (view.resizableInitialized) return;
   extend(view, {
     resizable: true,
     resizableWidth: null,
     resizableInitialized: true
   });
-  var $htmlEl = $('html');
-  var $el = view.$el;
+  const $htmlEl = $('html');
+  const {
+    $el
+  } = view;
   if (!$el) return;
-  var $resizeHandlerEl;
-  var isTouched;
-  var isMoved;
-  var touchesStart = {};
-  var touchesDiff;
-  var width;
-  var minWidth;
-  var maxWidth;
+  let $resizeHandlerEl;
+  let isTouched;
+  let isMoved;
+  const touchesStart = {};
+  let touchesDiff;
+  let width;
+  let minWidth;
+  let maxWidth;
 
   function transformCSSWidth(v) {
     if (!v) return null;
@@ -30,7 +32,7 @@ function resizableView(view) {
       return parseInt(v, 10) / 100 * app.width;
     }
 
-    var newV = parseInt(v, 10);
+    const newV = parseInt(v, 10);
     if (Number.isNaN(newV)) return null;
     return newV;
   }
@@ -45,7 +47,7 @@ function resizableView(view) {
     touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
     isMoved = false;
     isTouched = true;
-    var $pageMasterEl = $el.children('.page-master');
+    const $pageMasterEl = $el.children('.page-master');
     minWidth = transformCSSWidth($pageMasterEl.css('min-width'));
     maxWidth = transformCSSWidth($pageMasterEl.css('max-width'));
   }
@@ -53,7 +55,7 @@ function resizableView(view) {
   function handleTouchMove(e) {
     if (!isTouched) return;
     e.f7PreventSwipePanel = true;
-    var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+    const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
 
     if (!isMoved) {
       width = $resizeHandlerEl[0].offsetLeft + $resizeHandlerEl[0].offsetWidth;
@@ -64,7 +66,7 @@ function resizableView(view) {
     isMoved = true;
     e.preventDefault();
     touchesDiff = pageX - touchesStart.x;
-    var newWidth = width + touchesDiff;
+    let newWidth = width + touchesDiff;
 
     if (minWidth && !Number.isNaN(minWidth)) {
       newWidth = Math.max(newWidth, minWidth);
@@ -76,7 +78,7 @@ function resizableView(view) {
 
     newWidth = Math.min(Math.max(newWidth, 0), app.width);
     view.resizableWidth = newWidth;
-    $htmlEl[0].style.setProperty('--f7-page-master-width', newWidth + "px");
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${newWidth}px`);
     $el.trigger('view:resize', newWidth);
     view.emit('local::resize viewResize', view, newWidth);
   }
@@ -92,7 +94,7 @@ function resizableView(view) {
 
     isTouched = false;
     isMoved = false;
-    $htmlEl[0].style.setProperty('--f7-page-master-width', view.resizableWidth + "px");
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${view.resizableWidth}px`);
     $el.removeClass('view-resizing');
   }
 
@@ -110,7 +112,7 @@ function resizableView(view) {
     }
 
     view.resizableWidth = Math.min(Math.max(view.resizableWidth, 0), app.width);
-    $htmlEl[0].style.setProperty('--f7-page-master-width', view.resizableWidth + "px");
+    $htmlEl[0].style.setProperty('--f7-page-master-width', `${view.resizableWidth}px`);
   }
 
   $resizeHandlerEl = view.$el.children('.view-resize-handler');
@@ -123,7 +125,7 @@ function resizableView(view) {
   view.$resizeHandlerEl = $resizeHandlerEl;
   $el.addClass('view-resizable'); // Add Events
 
-  var passive = support.passiveListener ? {
+  const passive = support.passiveListener ? {
     passive: true
   } : false;
   view.$el.on(app.touchEvents.start, '.view-resize-handler', handleTouchStart, passive);
@@ -131,7 +133,7 @@ function resizableView(view) {
   app.on('touchend:passive', handleTouchEnd);
   app.on('resize', handleResize);
   view.on('beforeOpen', handleResize);
-  view.once('viewDestroy', function () {
+  view.once('viewDestroy', () => {
     $el.removeClass('view-resizable');
     view.$resizeHandlerEl.remove();
     view.$el.off(app.touchEvents.start, '.view-resize-handler', handleTouchStart, passive);

package/{esm/components → components}/view/view-class.js

@@ -1,48 +1,32 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import $ from '../../shared/dom7';
-import { extend } from '../../shared/utils';
-import Router from '../../modules/router/router';
-import Framework7Class from '../../shared/class';
-import resizableView from './resizable-view';
-
-var View = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(View, _Framework7Class);
-
-  function View(app, el, viewParams) {
-    var _this;
-
-    if (viewParams === void 0) {
-      viewParams = {};
-    }
-
-    _this = _Framework7Class.call(this, viewParams, [app]) || this;
-
-    var view = _assertThisInitialized(_this);
-
-    var ssr = view.params.routerId;
-    var defaults = {
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Router from '../../modules/router/router.js';
+import Framework7Class from '../../shared/class.js';
+import resizableView from './resizable-view.js';
+
+class View extends Framework7Class {
+  constructor(app, el, viewParams = {}) {
+    super(viewParams, [app]);
+    const view = this;
+    const ssr = view.params.routerId;
+    const defaults = {
       routes: [],
       routesAdd: []
     };
 
     if (!ssr) {
-      var $el = $(el);
+      const $el = $(el);
 
       if (!$el.length) {
-        var message = "Framework7: can't create a View instance because ";
-        message += typeof el === 'string' ? "the selector \"" + el + "\" didn't match any element" : 'el must be an HTMLElement or Dom7 object';
+        let message = "Framework7: can't create a View instance because ";
+        message += typeof el === 'string' ? `the selector "${el}" didn't match any element` : 'el must be an HTMLElement or Dom7 object';
         throw new Error(message);
       }
     } // Default View params
 
 
     view.params = extend({
-      el: el
+      el
     }, defaults, app.params.view, viewParams); // Routes
 
     if (view.params.routes.length > 0) {
@@ -53,7 +37,7 @@ var View = /*#__PURE__*/function (_Framework7Class) {
 
 
     extend(false, view, {
-      app: app,
+      app,
       name: view.params.name,
       main: view.params.main,
       history: [],
@@ -75,39 +59,37 @@ var View = /*#__PURE__*/function (_Framework7Class) {
 
     view.index = app.views.indexOf(view); // View ID
 
-    var viewId;
+    let viewId;
 
     if (view.name) {
-      viewId = "view_" + view.name;
+      viewId = `view_${view.name}`;
     } else if (view.main) {
       viewId = 'view_main';
     } else {
-      viewId = "view_" + view.index;
+      viewId = `view_${view.index}`;
     }
 
     view.id = viewId;
 
     if (!view.params.init) {
-      return view || _assertThisInitialized(_this);
+      return view;
     } // Init View
 
 
     if (app.initialized) {
       view.init();
     } else {
-      app.on('init', function () {
+      app.on('init', () => {
         view.init();
       });
     }
 
-    return view || _assertThisInitialized(_this);
+    return view;
   }
 
-  var _proto = View.prototype;
-
-  _proto.destroy = function destroy() {
-    var view = this;
-    var app = view.app;
+  destroy() {
+    let view = this;
+    const app = view.app;
     view.$el.trigger('view:beforedestroy');
     view.emit('local::beforeDestroy viewBeforeDestroy', view);
     app.off('resize', view.checkMasterDetailBreakpoint);
@@ -130,18 +112,18 @@ var View = /*#__PURE__*/function (_Framework7Class) {
 
     view.emit('local::destroy viewDestroy', view); // Delete props & methods
 
-    Object.keys(view).forEach(function (viewProp) {
+    Object.keys(view).forEach(viewProp => {
       view[viewProp] = null;
       delete view[viewProp];
     });
     view = null;
-  };
+  }
 
-  _proto.checkMasterDetailBreakpoint = function checkMasterDetailBreakpoint(force) {
-    var view = this;
-    var app = view.app;
-    var wasMasterDetail = view.$el.hasClass('view-master-detail');
-    var isMasterDetail = app.width >= view.params.masterDetailBreakpoint && view.$el.children('.page-master').length;
+  checkMasterDetailBreakpoint(force) {
+    const view = this;
+    const app = view.app;
+    const wasMasterDetail = view.$el.hasClass('view-master-detail');
+    const isMasterDetail = app.width >= view.params.masterDetailBreakpoint && view.$el.children('.page-master').length;
 
     if (typeof force === 'undefined' && isMasterDetail || force === true) {
       view.$el.addClass('view-master-detail');
@@ -158,11 +140,11 @@ var View = /*#__PURE__*/function (_Framework7Class) {
         view.$el.trigger('view:masterDetailBreakpoint');
       }
     }
-  };
+  }
 
-  _proto.initMasterDetail = function initMasterDetail() {
-    var view = this;
-    var app = view.app;
+  initMasterDetail() {
+    const view = this;
+    const app = view.app;
     view.checkMasterDetailBreakpoint = view.checkMasterDetailBreakpoint.bind(view);
     view.checkMasterDetailBreakpoint();
 
@@ -171,21 +153,21 @@ var View = /*#__PURE__*/function (_Framework7Class) {
     }
 
     app.on('resize', view.checkMasterDetailBreakpoint);
-  };
+  }
 
-  _proto.mount = function mount(viewEl) {
-    var view = this;
-    var app = view.app;
-    var el = view.params.el || viewEl;
-    var $el = $(el); // Selector
+  mount(viewEl) {
+    const view = this;
+    const app = view.app;
+    const el = view.params.el || viewEl;
+    const $el = $(el); // Selector
 
-    var selector;
+    let selector;
     if (typeof el === 'string') selector = el;else {
       // Supposed to be HTMLElement or Dom7
-      selector = ($el.attr('id') ? "#" + $el.attr('id') : '') + ($el.attr('class') ? "." + $el.attr('class').replace(/ /g, '.').replace('.active', '') : '');
+      selector = ($el.attr('id') ? `#${$el.attr('id')}` : '') + ($el.attr('class') ? `.${$el.attr('class').replace(/ /g, '.').replace('.active', '')}` : '');
     } // DynamicNavbar
 
-    var $navbarsEl;
+    let $navbarsEl;
 
     if (app.theme === 'ios' && view.params.iosDynamicNavbar) {
       $navbarsEl = $el.children('.navbars').eq(0);
@@ -196,12 +178,12 @@ var View = /*#__PURE__*/function (_Framework7Class) {
     }
 
     extend(view, {
-      $el: $el,
+      $el,
       el: $el[0],
       main: view.main || $el.hasClass('view-main'),
-      $navbarsEl: $navbarsEl,
+      $navbarsEl,
       navbarsEl: $navbarsEl ? $navbarsEl[0] : undefined,
-      selector: selector
+      selector
     });
 
     if (view.main) {
@@ -214,10 +196,10 @@ var View = /*#__PURE__*/function (_Framework7Class) {
     }
 
     view.emit('local::mount viewMount', view);
-  };
+  }
 
-  _proto.init = function init(viewEl) {
-    var view = this;
+  init(viewEl) {
+    const view = this;
     view.mount(viewEl);
 
     if (view.params.router) {
@@ -229,10 +211,9 @@ var View = /*#__PURE__*/function (_Framework7Class) {
       view.$el.trigger('view:init');
       view.emit('local::init viewInit', view);
     }
-  };
+  }
 
-  return View;
-}(Framework7Class); // Use Router
+} // Use Router
 
 
 View.use(Router);

package/components/view/view.d.ts

@@ -158,6 +158,8 @@ export namespace View {
     browserHistoryInitialMatch?: boolean;
     /**	When enabled (by default), it will store router history in localStorage and try to restore it on next web app visit */
     browserHistoryStoreHistory?: boolean;
+    /** When "replace" (by default), it will replace state on routable tabs change, otherwise (if "push"), it will add to history every routable tab change, so it will be possible to switch back between tabs with browser back button */
+    browserHistoryTabs?: 'replace' | 'push';
     /** Object with events handlers.. */
     on?: {
       [event in keyof Events]?: Events[event];