framework7 7.0.8 → 8.0.0-beta.1

package/components/autocomplete/autocomplete-ios.less

@@ -6,12 +6,4 @@
       margin-bottom: 12px;
     }
   }
-  .searchbar-input-wrap .autocomplete-dropdown {
-    margin-top: calc(-1 * var(--f7-searchbar-input-height));
-    top: 100%;
-    z-index: 20;
-    .autocomplete-dropdown-inner {
-      padding-top: var(--f7-searchbar-input-height);
-    }
-  }
 }

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 .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)}
+:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size)}.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-bg-color:#fff;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .dark,.ios.dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d;--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:none;--f7-autocomplete-dropdown-text-matching-font-weight:500;--f7-autocomplete-dropdown-text-matching-color:#000}.md .dark,.md.dark{--f7-autocomplete-dropdown-text-matching-color:#fff}.md,.md .dark,.md [class*=color-]{--f7-autocomplete-dropdown-bg-color:var(--f7-md-surface-2);--f7-autocomplete-dropdown-text-color:var(--f7-md-on-surface)}.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);margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:-1}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.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))}.ios .autocomplete-dropdown .autocomplete-preloader{left:16px;margin-bottom:12px}.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}

package/components/autocomplete/autocomplete-vars.less

@@ -5,46 +5,32 @@
   /*
   --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
   */
-  .light-vars({
-    --f7-autocomplete-dropdown-bg-color: #fff;
-  });
-  .dark-vars({
-    --f7-autocomplete-dropdown-bg-color: #1c1c1d;
-  });
 }
 .ios-vars({
   --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
   --f7-autocomplete-dropdown-text-matching-font-weight: 600;
   .light-vars({
+    --f7-autocomplete-dropdown-bg-color: #fff;
     --f7-autocomplete-dropdown-text-color: #000;
     --f7-autocomplete-dropdown-text-matching-color: #000;
   });
   .dark-vars({
+    --f7-autocomplete-dropdown-bg-color: #1c1c1d;
     --f7-autocomplete-dropdown-text-color: #fff;
     --f7-autocomplete-dropdown-text-matching-color: #fff;
   });
 });
 .md-vars({
-  --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-box-shadow: none;
+  --f7-autocomplete-dropdown-text-matching-font-weight: 500;
   .light-vars({
-    --f7-autocomplete-dropdown-text-color: rgba(0,0,0,0.54);
-    --f7-autocomplete-dropdown-text-matching-color: #212121;
-  });
-  .dark-vars({
-    --f7-autocomplete-dropdown-text-color: rgba(255,255,255,0.54);
-    --f7-autocomplete-dropdown-text-matching-color: rgba(255,255,255,0.87);
-  });
-});
-.aurora-vars({
-  --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
-  --f7-autocomplete-dropdown-text-matching-font-weight: 700;
-  .light-vars({
-    --f7-autocomplete-dropdown-text-color: #000;
     --f7-autocomplete-dropdown-text-matching-color: #000;
   });
   .dark-vars({
-    --f7-autocomplete-dropdown-text-color: #fff;
     --f7-autocomplete-dropdown-text-matching-color: #fff;
   });
 });
+.md-color-vars({
+  --f7-autocomplete-dropdown-bg-color: var(--f7-md-surface-2);
+  --f7-autocomplete-dropdown-text-color: var(--f7-md-on-surface);
+});

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 .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)}
+:root{--f7-autocomplete-dropdown-placeholder-color:#a9a9a9;--f7-autocomplete-dropdown-preloader-size:20px;--f7-autocomplete-dropdown-font-size:var(--f7-list-font-size)}.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-bg-color:#fff;--f7-autocomplete-dropdown-text-color:#000;--f7-autocomplete-dropdown-text-matching-color:#000}.ios .dark,.ios.dark{--f7-autocomplete-dropdown-bg-color:#1c1c1d;--f7-autocomplete-dropdown-text-color:#fff;--f7-autocomplete-dropdown-text-matching-color:#fff}.md{--f7-autocomplete-dropdown-box-shadow:none;--f7-autocomplete-dropdown-text-matching-font-weight:500;--f7-autocomplete-dropdown-text-matching-color:#000}.md .dark,.md.dark{--f7-autocomplete-dropdown-text-matching-color:#fff}.md,.md .dark,.md [class*=color-]{--f7-autocomplete-dropdown-bg-color:var(--f7-md-surface-2);--f7-autocomplete-dropdown-text-color:var(--f7-md-on-surface)}.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);margin-top:calc(-1 * var(--f7-searchbar-input-height));top:100%;z-index:-1}.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner{padding-top:var(--f7-searchbar-input-height)}.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))}.ios .autocomplete-dropdown .autocomplete-preloader{right:16px;margin-bottom:12px}.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}

package/components/autocomplete/autocomplete.d.ts

@@ -81,7 +81,7 @@ export namespace Autocomplete {
     searchbarPlaceholder?: string;
     /** Searchbar "Cancel" button text. (default Cancel) */
     searchbarDisableText?: string;
-    /** Enables searchbar disable button. By default, disabled for Aurora theme */
+    /** Enables searchbar disable button. (default true) */
     searchbarDisableButton?: boolean;
     /** Value of "spellcheck" attribute on searchbar input (default false) */
     searchbarSpellcheck?: boolean;
@@ -121,8 +121,6 @@ export namespace Autocomplete {
     dropdownPlaceholderText?: string;
     /** If true then value of related input will be update as well. (default true) */
     updateInputValueOnSelect?: boolean;
-    /** If true then input which is used as item-input in List View will be expanded to full screen wide during dropdown visible.. (default false) */
-    expandInput?: boolean;
     /** By default dropdown will be added to parent page-content element. You can specify here different element where to add dropdown element. */
     dropdownContainerEl?: HTMLElement | CSSSelector;
     /** Function to render autocomplete dropdown, must return dropdown HTML string. */

package/components/autocomplete/autocomplete.js

@@ -13,7 +13,6 @@ export default {
       dropdownPlaceholderText: undefined,
       typeahead: false,
       highlightMatches: true,
-      expandInput: false,
       updateInputValueOnSelect: true,
       inputEvents: 'input',
       value: undefined,
@@ -29,7 +28,7 @@ export default {
       pageTitle: undefined,
       searchbarPlaceholder: 'Search...',
       searchbarDisableText: 'Cancel',
-      searchbarDisableButton: undefined,
+      searchbarDisableButton: true,
       searchbarSpellcheck: false,
       popupPush: false,
       popupSwipeToClose: undefined,
@@ -59,7 +58,6 @@ export default {
   static: {
     Autocomplete
   },
-
   create() {
     const app = this;
     app.autocomplete = extend(ConstructorMethods({
@@ -73,14 +71,11 @@ export default {
         if (ac && ac.open) return ac.open();
         return undefined;
       },
-
       close(autocompleteEl) {
         const ac = app.autocomplete.get(autocompleteEl);
         if (ac && ac.close) return ac.close();
         return undefined;
       }
-
     });
   }
-
 };

package/components/autocomplete/autocomplete.lazy.js

@@ -1 +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,e.$jsx),s=a.extend,d=a.id,i=a.nextTick,c=a.iosPreloaderContent,u=a.mdPreloaderContent,m=a.auroraPreloaderContent,h=a.deleteProps;class v extends n{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const a=this;a.app=e;const n=r(),l=s({on:{}},e.params.autocomplete);let p,c;void 0===l.searchbarDisableButton&&(l.searchbarDisableButton="aurora"!==e.theme),a.useModulesParams(l),a.params=s(l,o),a.params.openerEl&&(p=t(a.params.openerEl),p.length&&(p[0].f7Autocomplete=a)),a.params.inputEl&&(c=t(a.params.inputEl),c.length&&(c[0].f7Autocomplete=a));const u=d();let m=o.url;!m&&p&&p.length&&(p.attr("href")?m=p.attr("href"):p.find("a").length>0&&(m=p.find("a").attr("href"))),m&&"#"!==m&&""!==m||(m=a.params.url);const h=a.params.multiple?"checkbox":"radio";s(a,{$openerEl:p,openerEl:p&&p[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 g(){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 b(e){const o=t(e.target);o.is(a.$inputEl[0])||a.$dropdownEl&&o.closest(a.$dropdownEl[0]).length||a.close()}function w(){a.open()}function $(){a.open()}function E(){a.$dropdownEl.find("label.active-state").length>0||setTimeout((()=>{a.close()}),0)}function C(){a.positionDropdown()}function y(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 P(){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",w),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.on("focus",$),a.$inputEl.on(a.params.inputEvents,f),n.android?t("html").on("click",b):a.$inputEl.on("blur",E),a.$inputEl.on("keydown",y))},a.detachEvents=function(){"dropdown"!==a.params.openIn&&a.$openerEl&&a.$openerEl.off("click",w),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.off("focus",$),a.$inputEl.off(a.params.inputEvents,f),n.android?t("html").off("click",b):a.$inputEl.off("blur",E),a.$inputEl.off("keydown",y))},a.attachDropdownEvents=function(){a.$dropdownEl.on("click","label",P),e.on("resize",C)},a.detachDropdownEvents=function(){a.$dropdownEl.off("click","label",P),e.off("resize",C)},a.attachPageEvents=function(){a.$el.on("change",'input[type="radio"], input[type="checkbox"]',g),a.params.closeOnSelect&&!a.params.multiple&&a.$el.once("click",".list label",(()=>{i((()=>{a.close()}))}))},a.detachPageEvents=function(){a.$el.off("change",'input[type="radio"], input[type="checkbox"]',g)},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,g=a.rtl?"padding-right":"padding-left";let b;d.length&&!e.params.expandInput&&(b=(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`,[g]:d.length>0&&!e.params.expandInput?`${b}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:c,mdPreloaderContent:u,auroraPreloaderContent:m};return p("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):p("form",{class:"searchbar"},p("div",{class:"searchbar-inner"},p("div",{class:"searchbar-input-wrap"},p("input",{type:"search",spellcheck:e.params.searchbarSpellcheck||"false",placeholder:e.params.searchbarPlaceholder}),p("i",{class:"searchbar-icon"}),p("span",{class:"input-clear-button"})),e.params.searchbarDisableButton&&p("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?p("li",null,p("label",{class:`item-${e.inputType} item-content`},p("input",{type:e.inputType,name:e.inputName,value:a,_checked:e.selected}),p("i",{class:`icon icon-${e.inputType}`}),p("div",{class:"item-inner"},p("div",{class:"item-title"},e.text)))):e.placeholder?p("li",{class:"autocomplete-dropdown-placeholder"},p("label",{class:"item-content"},p("div",{class:"item-inner"},p("div",{class:"item-title"},e.text)))):p("li",null,p("label",{class:"item-radio item-content","data-value":a},p("div",{class:"item-inner"},p("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&&p("div",{class:"left"},e.renderPreloader()):p("div",{class:"left sliding"},p("a",{class:"link back"},p("i",{class:"icon icon-back"}),p("span",{class:"if-not-md"},e.params.pageBackLinkText))),r=t?p("div",{class:"right"},p("a",{class:"link popup-close","data-popup":".autocomplete-popup"},e.params.popupCloseLinkText)):e.params.preloader&&p("div",{class:"right"},e.renderPreloader());return p("div",{class:"navbar "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},p("div",{class:"navbar-bg"}),p("div",{class:"navbar-inner "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},a,o&&p("div",{class:"title sliding"},o),r,p("div",{class:"subnavbar sliding"},e.renderSearchbar())))}renderDropdown(){const e=this;return e.params.renderDropdown?e.params.renderDropdown.call(e,e.items):p("div",{class:"autocomplete-dropdown"},p("div",{class:"autocomplete-dropdown-inner"},p("div",{class:"list "+(e.params.expandInput?"":"no-safe-areas")},p("ul",null))),e.params.preloader&&e.renderPreloader())}renderPage(e){const o=this;return o.params.renderPage?o.params.renderPage.call(o,o.items):p("div",{class:"page page-with-subnavbar autocomplete-page","data-name":"autocomplete-page"},o.renderNavbar(e),p("div",{class:"searchbar-backdrop"}),p("div",{class:"page-content"},p("div",{class:`list autocomplete-list autocomplete-found autocomplete-list-${o.id} ${o.params.formColorTheme?`color-${o.params.formColorTheme}`:""}`},p("ul",null)),p("div",{class:"list autocomplete-not-found"},p("ul",null,p("li",{class:"item-content"},p("div",{class:"item-inner"},p("div",{class:"item-title"},o.params.notFoundText))))),p("div",{class:"list autocomplete-values"},p("ul",null))))}renderPopup(){const e=this;return e.params.renderPopup?e.params.renderPopup.call(e,e.items):p("div",{class:"popup autocomplete-popup"},p("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",(()=>{i((()=>{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,h(e),e.destroyed=!0}}var f={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:v},create(){const e=this;e.autocomplete=s(l({defaultSelector:void 0,constructor:v,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[f.name])return;e.use(f),e.instance&&(e.instance.useModuleParams(f,e.instance.params),e.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,r=e.getDevice,l=(e.getSupport,e.Class),n=(e.Modal,e.ConstructorMethods),p=(e.ModalMethods,e.$jsx),s=a.extend,i=a.id,d=a.nextTick,c=a.iosPreloaderContent,u=a.mdPreloaderContent,m=a.deleteProps;class h extends l{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const a=this;a.app=e;const l=r(),n=s({on:{}},e.params.autocomplete);let p,c;a.useModulesParams(n),a.params=s(n,o),a.params.openerEl&&(p=t(a.params.openerEl),p.length&&(p[0].f7Autocomplete=a)),a.params.inputEl&&(c=t(a.params.inputEl),c.length&&(c[0].f7Autocomplete=a));const u=i();let m=o.url;!m&&p&&p.length&&(p.attr("href")?m=p.attr("href"):p.find("a").length>0&&(m=p.find("a").attr("href"))),m&&"#"!==m&&""!==m||(m=a.params.url);const h=a.params.multiple?"checkbox":"radio";s(a,{$openerEl:p,openerEl:p&&p[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 l,n,p;a.items=o,a.params.highlightMatches&&(e=e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&"),l=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&&(n=r,p=a.items[e]),t+=a.renderItem({value:r,text:a.params.highlightMatches?s.replace(l,"<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(!n||!p)return;if(0!==n.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(n),c[0].setSelectionRange(e.length,n.length);const o="object"==typeof a.value[0]?a.value[0][a.params.valueProperty]:a.value[0];o&&n.toLowerCase()===o.toLowerCase()||(a.value=[p],a.emit("local::change autocompleteChange",[p]))}v=e}))}function g(){const e=this,o=e.value;let r,l,n;if(t(e).parents(".autocomplete-values").length>0){if("checkbox"===a.inputType&&!e.checked){for(let e=0;e<a.value.length;e+=1)n="string"==typeof a.value[e]?a.value[e]:a.value[e][a.params.valueProperty],n!==o&&1*n!=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)l="object"==typeof a.items[e]?a.items[e][a.params.valueProperty]:a.items[e],l!==o&&1*l!=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)n="object"==typeof a.value[e]?a.value[e][a.params.valueProperty]:a.value[e],n!==o&&1*n!=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 b(e){const o=t(e.target);o.is(a.$inputEl[0])||a.$dropdownEl&&o.closest(a.$dropdownEl[0]).length||a.close()}function w(){a.open()}function $(){a.open()}function E(){a.$dropdownEl.find("label.active-state").length>0||setTimeout((()=>{a.close()}),0)}function y(){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 P(){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],l=e.attr("data-value");r!==l&&1*r!=1*l||(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",w),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.on("focus",$),a.$inputEl.on(a.params.inputEvents,f),l.android?t("html").on("click",b):a.$inputEl.on("blur",E),a.$inputEl.on("keydown",C))},a.detachEvents=function(){"dropdown"!==a.params.openIn&&a.$openerEl&&a.$openerEl.off("click",w),"dropdown"===a.params.openIn&&a.$inputEl&&(a.$inputEl.off("focus",$),a.$inputEl.off(a.params.inputEvents,f),l.android?t("html").off("click",b):a.$inputEl.off("blur",E),a.$inputEl.off("keydown",C))},a.attachDropdownEvents=function(){a.$dropdownEl.on("click","label",P),e.on("resize",y)},a.detachDropdownEvents=function(){a.$dropdownEl.off("click","label",P),e.off("resize",y)},a.attachPageEvents=function(){a.$el.on("change",'input[type="radio"], input[type="checkbox"]',g),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"]',g)},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{$inputEl:e,app:o,$dropdownEl:a}=this,r=e.parents(".page-content");if(0===r.length)return;const l=e.offset(),n=e[0].offsetWidth,p=e[0].offsetHeight,s=e.parents(".list");let i;s.parents().each((e=>{if(i)return;const o=t(e);o.parent(r).length&&(i=o)}));const d=s.offset(),c=parseInt(r.css("padding-bottom"),10),u=s.length>0?d.left-r.offset().left:0,m=l.left-(s.length>0?d.left:0)-(o.rtl,0),h=l.top-(r.offset().top-r[0].scrollTop),v=r[0].scrollHeight-c-(h+r[0].scrollTop)-e[0].offsetHeight,f=o.rtl?"padding-right":"padding-left";let g;s.length&&(g=(o.rtl?s[0].offsetWidth-m-n:m)-("md"===o.theme?16:15)),a.css({left:`${s.length>0?u:m}px`,top:`${h+r[0].scrollTop+p}px`,width:`${s.length>0?s[0].offsetWidth:n}px`}),a.children(".autocomplete-dropdown-inner").css({maxHeight:`${v}px`,[f]:s.length>0?`${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 l=o.params.limit?Math.min(o.params.limit,a.length):a.length;o.items=a;for(let e=0;e<l;e+=1){let t=!1;const l="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!==l&&1*a!=1*l||(t=!0)}r+=o.renderItem({value:l,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:c,mdPreloaderContent:u};return p("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):p("form",{class:"searchbar"},p("div",{class:"searchbar-inner"},p("div",{class:"searchbar-input-wrap"},p("input",{type:"search",spellcheck:e.params.searchbarSpellcheck||"false",placeholder:e.params.searchbarPlaceholder}),p("i",{class:"searchbar-icon"}),p("span",{class:"input-clear-button"})),e.params.searchbarDisableButton&&p("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?p("li",null,p("label",{class:`item-${e.inputType} item-content`},p("input",{type:e.inputType,name:e.inputName,value:a,_checked:e.selected}),p("i",{class:`icon icon-${e.inputType}`}),p("div",{class:"item-inner"},p("div",{class:"item-title"},e.text)))):e.placeholder?p("li",{class:"autocomplete-dropdown-placeholder"},p("label",{class:"item-content"},p("div",{class:"item-inner"},p("div",{class:"item-title"},e.text)))):p("li",null,p("label",{class:"item-radio item-content","data-value":a},p("div",{class:"item-inner"},p("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&&p("div",{class:"left"},e.renderPreloader()):p("div",{class:"left sliding"},p("a",{class:"link back"},p("i",{class:"icon icon-back"}),p("span",{class:"if-not-md"},e.params.pageBackLinkText))),r=t?p("div",{class:"right"},p("a",{class:"link popup-close","data-popup":".autocomplete-popup"},e.params.popupCloseLinkText)):e.params.preloader&&p("div",{class:"right"},e.renderPreloader());return p("div",{class:"navbar "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},p("div",{class:"navbar-bg"}),p("div",{class:"navbar-inner "+(e.params.navbarColorTheme?`color-${e.params.navbarColorTheme}`:"")},a,o&&p("div",{class:"title sliding"},o),r,p("div",{class:"subnavbar sliding"},e.renderSearchbar())))}renderDropdown(){const e=this;return e.params.renderDropdown?e.params.renderDropdown.call(e,e.items):p("div",{class:"autocomplete-dropdown"},p("div",{class:"autocomplete-dropdown-inner"},p("div",{class:"list no-safe-areas"},p("ul",null))),e.params.preloader&&e.renderPreloader())}renderPage(e){const o=this;return o.params.renderPage?o.params.renderPage.call(o,o.items):p("div",{class:"page page-with-subnavbar autocomplete-page","data-name":"autocomplete-page"},o.renderNavbar(e),p("div",{class:"searchbar-backdrop"}),p("div",{class:"page-content"},p("div",{class:`list autocomplete-list autocomplete-found autocomplete-list-${o.id} ${o.params.formColorTheme?`color-${o.params.formColorTheme}`:""}`},p("ul",null)),p("div",{class:"list autocomplete-not-found"},p("ul",null,p("li",{class:"item-content"},p("div",{class:"item-inner"},p("div",{class:"item-title"},o.params.notFoundText))))),p("div",{class:"list autocomplete-values"},p("ul",null))))}renderPopup(){const e=this;return e.params.renderPopup?e.params.renderPopup.call(e,e.items):p("div",{class:"popup autocomplete-popup"},p("div",{class:"view"},e.renderPage(!0),";"))}onOpen(e,o){const a=this,r=a.app,l=t(o);if(a.$el=l,a.el=l[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=l.find(".searchbar");"page"===a.params.openIn&&"ios"===r.theme&&0===e.length&&(e=t(r.navbar.getElByPage(l)).find(".searchbar")),a.searchbar=r.searchbar.create({el:e,backdropEl:l.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.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()));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,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:!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=s(n({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/autocomplete/autocomplete.less

@@ -73,6 +73,12 @@
 .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);
+  margin-top: calc(-1 * var(--f7-searchbar-input-height));
+  top: 100%;
+  z-index: -1;
+  .autocomplete-dropdown-inner {
+    padding-top: var(--f7-searchbar-input-height);
+  }
   .autocomplete-dropdown-placeholder {
     color: var(--f7-searchbar-placeholder-color);
   }
@@ -88,27 +94,9 @@
   }
 }
 
-.list .item-content-dropdown-expanded {
-  .item-title.item-label {
-    width: 0;
-    flex-shrink: 10;
-    overflow: hidden;
-    + .item-input-wrap {
-      .ltr({ margin-left: 0; });
-      .rtl({ margin-right: 0; });
-    }
-  }
-  .item-input-wrap {
-    width: 100%;
-  }
-}
-
 .if-ios-theme({
   @import './autocomplete-ios.less';
 });
 .if-md-theme({
   @import './autocomplete-md.less';
 });
-.if-aurora-theme({
-  @import './autocomplete-aurora.less';
-});

package/components/badge/badge-vars.less

@@ -1,21 +1,18 @@
 :root {
   --f7-badge-text-color: #fff;
   --f7-badge-bg-color: #8e8e93;
-  --f7-badge-padding: 0 4px;
   --f7-badge-in-icon-size: 16px;
   --f7-badge-in-icon-font-size: 10px;
   --f7-badge-font-weight: normal;
   --f7-badge-font-size: 12px;
 }
 .ios-vars({
+  --f7-badge-padding: 0 4px;
   --f7-badge-size: 20px;
   --f7-badge-font-weight: 600;
 });
 .md-vars({
-  --f7-badge-size: 18px;
+  --f7-badge-padding: 2px 6px;
+  --f7-badge-size: 20px;
   --f7-badge-font-weight: 500;
 });
-.aurora-vars({
-  --f7-badge-size: 18px;
-  --f7-badge-font-weight: 600;
-});

package/components/badge/badge.less

@@ -30,6 +30,7 @@
     font-family: var(--f7-font-family);
     --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
     --f7-badge-size: var(--f7-badge-in-icon-size);
+    --f7-badge-padding: 0px 2px;
   }
 }
 .badge[class*='color-'] {
@@ -42,6 +43,3 @@
 .if-md-theme({
   @import './badge-md.less';
 });
-.if-aurora-theme({
-  @import './badge-aurora.less';
-});

package/components/block/block-vars.less

@@ -2,7 +2,6 @@
   --f7-block-padding-horizontal: 16px;
   --f7-block-padding-vertical: 16px;
   --f7-block-font-size: inherit;
-  --f7-block-text-color: inherit;
   --f7-block-header-margin: 10px;
   --f7-block-footer-margin: 10px;
   --f7-block-header-font-size: 14px;
@@ -12,23 +11,14 @@
   --f7-block-title-medium-text-transform: none;
   --f7-block-title-large-text-transform: none;
   --f7-block-inset-side-margin: 16px;
-  .light-vars({
-    --f7-block-title-medium-text-color: #000;
-    --f7-block-title-large-text-color: #000;
-    --f7-block-strong-bg-color: #fff;
-  });
   .dark-vars({
-    --f7-block-title-text-color: #fff;
-    --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
-    --f7-block-title-medium-text-color: #fff;
-    --f7-block-title-large-text-color: #fff;
-    --f7-block-strong-bg-color: #1c1c1d;
+    --f7-block-outline-border-color: rgba(255, 255, 255, 0.15);
   });
 }
 .ios-vars({
+  --f7-block-text-color: inherit;
   --f7-block-margin-vertical: 35px;
-  --f7-block-strong-border-color: rgba(0,0,0,0.22);
-  --f7-block-title-text-color: #000;
+  --f7-block-outline-border-color: rgba(0,0,0,0.22);
   --f7-block-title-font-size: 16px;
   --f7-block-title-font-weight: 600;
   --f7-block-title-line-height: 20px;
@@ -41,64 +31,47 @@
   --f7-block-title-large-line-height: 1.3;
   --f7-block-inset-border-radius: 8px;
   .light-vars({
+    --f7-block-title-text-color: #000;
     --f7-block-strong-text-color: #000;
     --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
     --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
+    --f7-block-strong-bg-color: #fff;
+    --f7-block-title-medium-text-color: #000;
+    --f7-block-title-large-text-color: #000;
   });
   .dark-vars({
+    --f7-block-title-text-color: #fff;
     --f7-block-header-text-color: rgba(255,255,255,0.55);
     --f7-block-footer-text-color: rgba(255,255,255,0.55);
     --f7-block-strong-text-color: #fff;
+    --f7-block-strong-bg-color: #1c1c1d;
+    --f7-block-title-medium-text-color: #fff;
+    --f7-block-title-large-text-color: #fff;
   });
 });
 .md-vars({
   --f7-block-margin-vertical: 32px;
-  --f7-block-strong-text-color: inherit;
-  --f7-block-strong-border-color: rgba(0,0,0,0.12);
   --f7-block-title-font-size: inherit;
-  --f7-block-title-text-color: rgba(0,0,0,0.54);
   --f7-block-title-font-weight: 500;
   --f7-block-title-line-height: 16px;
   --f7-block-title-margin-bottom: 16px;
-  --f7-block-title-medium-font-size: 24px;
+  --f7-block-title-medium-font-size: 16px;
   --f7-block-title-medium-font-weight: 500;
   --f7-block-title-medium-line-height: 1.3;
-  --f7-block-title-large-font-size: 34px;
+  --f7-block-title-large-font-size: 22px;
   --f7-block-title-large-font-weight: 500;
   --f7-block-title-large-line-height: 1.2;
-  --f7-block-inset-border-radius: 4px;
-  .light-vars({
-    --f7-block-header-text-color: rgba(0,0,0,0.54);
-    --f7-block-footer-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-block-header-text-color: rgba(255,255,255,0.54);
-    --f7-block-footer-text-color: rgba(255,255,255,0.54);
-  });
+  --f7-block-inset-border-radius: 16px;
 });
-.aurora-vars({
-  --f7-block-margin-vertical: 32px;
-  --f7-block-strong-border-color: rgba(0,0,0,0.12);
-  --f7-block-title-font-size: 16px;
-  --f7-block-title-text-color: #000;
-  --f7-block-title-font-weight: 600;
-  --f7-block-title-line-height: 1.5;
-  --f7-block-title-margin-bottom: 10px;
-  --f7-block-title-medium-font-size: 22px;
-  --f7-block-title-medium-font-weight: bold;
-  --f7-block-title-medium-line-height: 1.4;
-  --f7-block-title-large-font-size: 28px;
-  --f7-block-title-large-font-weight: bold;
-  --f7-block-title-large-line-height: 1.3;
-  --f7-block-inset-border-radius: 8px;
-  .light-vars({
-    --f7-block-strong-text-color: inherit;
-    --f7-block-header-text-color: rgba(0,0,0,0.6);
-    --f7-block-footer-text-color: rgba(0,0,0,0.6);
-  });
-  .dark-vars({
-    --f7-block-header-text-color: rgba(255,255,255,0.54);
-    --f7-block-footer-text-color: rgba(255,255,255,0.54);
-    --f7-block-strong-text-color: #fff;
-  });
+
+.md-color-vars({
+  --f7-block-text-color: var(--f7-md-on-surface);
+  --f7-block-strong-text-color: var(--f7-md-on-surface);
+  --f7-block-outline-border-color: var(--f7-md-outline);
+  --f7-block-title-text-color: var(--f7-theme-color);
+  --f7-block-title-medium-text-color: var(--f7-theme-color);
+  --f7-block-title-large-text-color: var(--f7-theme-color);
+  --f7-block-strong-bg-color: var(--f7-md-surface-1);
+  --f7-block-header-text-color: var(--f7-md-on-surface-variant);
+  --f7-block-footer-text-color: var(--f7-md-on-surface-variant);
 });

package/components/block/block.less

@@ -12,7 +12,6 @@
   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
   font-size: var(--f7-block-font-size);
-  .no-hairlines();
   > h1,
   > h2,
   > h3,
@@ -26,14 +25,28 @@
     }
   }
 }
-.block-strong {
+.block-strong,
+.ios .block-strong-ios,
+.md .block-strong-md {
   color: var(--f7-block-strong-text-color);
   padding-top: var(--f7-block-padding-vertical);
   padding-bottom: var(--f7-block-padding-vertical);
   background-color: var(--f7-block-strong-bg-color);
-  .hairline(top, var(--f7-block-strong-border-color));
-  .hairline(bottom, var(--f7-block-strong-border-color));
 }
+.block-outline:not(.inset),
+.ios .block-outline-ios:not(.inset):not(.inset-ios),
+.md .block-outline-md:not(.inset):not(.inset-md) {
+  .hairline(top, var(--f7-block-outline-border-color));
+  .hairline(bottom, var(--f7-block-outline-border-color));
+}
+.block-outline.inset,
+.ios .block-outline-ios.inset,
+.ios .block-outline-ios.inset-ios,
+.md .block-outline-md.inset,
+.md .block-outline-md.inset-md {
+  border: 1px solid var(--f7-block-outline-border-color);
+}
+
 .block-title {
   position: relative;
   overflow: hidden;
@@ -147,28 +160,43 @@
   }
 }
 // Inset
-.block.inset {
+.block.inset,
+.ios .block.inset-ios,
+.md .block.inset-md {
   border-radius: var(--f7-block-inset-border-radius);
   margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
   margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
   --f7-safe-area-left: 0px;
   --f7-safe-area-right: 0px;
 }
-.block-strong.inset {
+.block-strong.inset,
+.ios .block-strong-ios.inset,
+.md .block-strong-md.inset,
+.ios .block-strong.inset-ios,
+.md .block-strong.inset-md,
+.ios .block-strong-ios.inset-ios,
+.md .block-strong-md.inset-md {
   .hairline-remove-top-bottom();
 }
 
 each(@breakpoints, {
   @media (min-width:@value) {
-    .block.@{key}-inset {
+    .block.@{key}-inset,
+    .ios .block.@{key}-inset-ios,
+    .md .block.@{key}-inset-md {
+      .hairline-remove-top-bottom();
       border-radius: var(--f7-block-inset-border-radius);
       margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
       margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
       --f7-safe-area-left: 0px;
       --f7-safe-area-right: 0px;
     }
-    .block-strong.@{key}-inset {
-      .hairline-remove-top-bottom();
+    .block.@{key}-inset.block-outline,
+    .ios .block.@{key}-inset-ios.block-outline,
+    .ios .block.@{key}-inset-ios.block-outline-ios,
+    .md .block.@{key}-inset-md.block-outline,
+    .md .block.@{key}-inset-md.block-outline-md {
+        border: 1px solid var(--f7-block-outline-border-color);
     }
   }
 });
@@ -179,6 +207,3 @@ each(@breakpoints, {
 .if-md-theme({
   @import './block-md.less';
 });
-.if-aurora-theme({
-  @import './block-aurora.less';
-});

package/components/breadcrumbs/breadcrumbs-rtl.css

@@ -1 +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}
+:root{--f7-breadcrumbs-spacing:12px;--f7-breadcrumbs-padding:2px 0;--f7-breadcrumbs-icon-size:24px;--f7-breadcrumbs-separator-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-breadcrumbs-separator-color:rgba(255, 255, 255, 0.35)}.ios{--f7-breadcrumbs-item-bg-color:transparent;--f7-breadcrumbs-collapsed-border-radius:4px;--f7-breadcrumbs-collapsed-padding:0px 6px;--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:17px;--f7-breadcrumbs-item-border-radius:0px;--f7-breadcrumbs-item-padding:0px;--f7-breadcrumbs-item-font-weight:normal;--f7-breadcrumbs-item-active-font-weight:600;--f7-breadcrumbs-item-color:rgba(0, 0, 0, 0.55);--f7-breadcrumbs-item-active-color:#000;--f7-breadcrumbs-collapsed-bg-color:rgba(0, 0, 0, 0.15);--f7-breadcrumbs-collapsed-color:rgba(0, 0, 0, 0.75)}.ios .dark,.ios.dark{--f7-breadcrumbs-item-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-item-active-color:#fff;--f7-breadcrumbs-collapsed-bg-color:rgba(255, 255, 255, 0.15);--f7-breadcrumbs-collapsed-color:rgba(255, 255, 255, 0.75)}.md{--f7-breadcrumbs-collapsed-border-radius:8px;--f7-breadcrumbs-collapsed-padding:12px 8px;--f7-breadcrumbs-separator-icon:'chevron_right_md';--f7-breadcrumbs-font-size:14px;--f7-breadcrumbs-item-border-radius:8px;--f7-breadcrumbs-item-padding:4px 8px;--f7-breadcrumbs-item-font-weight:500;--f7-breadcrumbs-item-active-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-breadcrumbs-item-color:var(--f7-theme-color);--f7-breadcrumbs-item-bg-color:var(--f7-md-secondary-container);--f7-breadcrumbs-item-active-color:var(--f7-md-on-secondary-container);--f7-breadcrumbs-collapsed-color:var(--f7-theme-color);--f7-breadcrumbs-collapsed-bg-color:var(--f7-md-secondary-container)}.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;border-radius:var(--f7-breadcrumbs-item-border-radius)}.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}.breadcrumbs-collapsed{display:flex;align-items:center;padding:var(--f7-breadcrumbs-collapsed-padding);background:var(--f7-breadcrumbs-collapsed-bg-color);min-height:1em;border-radius:var(--f7-breadcrumbs-collapsed-border-radius);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}