@xenknight/framework7 0.0.2

package/components/searchbar/searchbar-md.less

@@ -0,0 +1,147 @@
+.md {
+  .searchbar-icon,
+  .searchbar-disable-button {
+    position: absolute;
+
+    top: 50%;
+    transition-duration: 300ms;
+  }
+  .searchbar-icon {
+    width: 48px;
+    height: 48px;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:after {
+      width: auto;
+      height: auto;
+      content: 'search_md';
+      line-height: 1.2;
+    }
+    .ltr({
+      left: var(--f7-safe-area-left);
+    });
+    .rtl({
+      right: var(--f7-safe-area-right);
+    });
+  }
+  .searchbar-disable-button {
+    width: 48px;
+    height: 48px;
+    transform: rotate(-90deg) scale(0.5);
+    font-size: 0 !important;
+    display: block;
+    margin-top: -24px;
+    color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+    .ltr({
+      left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
+    });
+    .rtl({
+      right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right));
+    });
+
+    &:after {
+      .core-icons-font();
+      line-height: 48px;
+      .ltr({
+        content: 'arrow_left_md';
+      });
+      .rtl({
+        content: 'arrow_right_md';
+      });
+    }
+  }
+  .searchbar-enabled:not(.searchbar-enabled-no-disable-button) {
+    .searchbar-disable-button {
+      transform: rotate(0deg) scale(1);
+      pointer-events: auto;
+      opacity: 1;
+    }
+    .searchbar-icon {
+      opacity: 0;
+      transform: rotate(90deg) scale(0.5);
+    }
+  }
+  .searchbar {
+    --f7-searchbar-input-extra-padding-left: 34px;
+    .input-clear-button {
+      width: 48px;
+      height: 48px;
+      margin-top: -24px;
+      .ltr({ right: 0; });
+      .rtl({ left: 0; });
+
+      &:after {
+        line-height: 48px;
+        content: 'delete_round_md';
+        opacity: 1;
+      }
+      &:before {
+        display: none;
+      }
+    }
+  }
+  .searchbar-inline {
+    --f7-searchbar-input-extra-padding-left: 32px;
+  }
+
+  .page > .searchbar,
+  .subnavbar .searchbar,
+  .searchbar-expandable {
+    --f7-searchbar-input-extra-padding-left: 34px;
+    .searchbar-disable-button {
+      .ltr({
+        left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
+      });
+      .rtl({
+        right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right));
+      });
+    }
+    .searchbar-icon {
+      .ltr({
+        left: var(--f7-safe-area-left);
+      });
+      .rtl({
+        right: var(--f7-safe-area-right);
+      });
+    }
+  }
+  .searchbar-expandable {
+    --f7-searchbar-inner-padding-left: 4px;
+    --f7-searchbar-inner-padding-right: 4px;
+    height: var(--f7-searchbar-expandable-size);
+    opacity: 0;
+    bottom: 0;
+    border-radius: calc(var(--f7-searchbar-expandable-size));
+    width: calc(var(--f7-searchbar-expandable-size));
+    margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
+    transform: translate3d(0px, 0px, 0px);
+    background-color: var(--f7-searchbar-input-bg-color);
+    .ltr({
+      left: 100%;
+      margin-left: calc(var(--f7-searchbar-expandable-size) * -1);
+    });
+    .rtl({
+      right: 100%;
+      margin-right: calc(var(--f7-searchbar-expandable-size) * -1);
+    });
+  }
+
+  .searchbar-expandable.searchbar-enabled {
+    width: 100%;
+    border-radius: 0;
+    opacity: 1;
+    pointer-events: auto;
+    margin-top: 0;
+    .ltr({
+      left: 0;
+      margin-left: 0;
+    });
+    .rtl({
+      right: 0;
+      margin-right: 0;
+    });
+  }
+}

package/components/searchbar/searchbar-rtl.css

@@ -0,0 +1 @@
+:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:transparent}.ios{--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:8px;--f7-searchbar-input-height:32px;--f7-searchbar-inline-input-height:32px;--f7-searchbar-input-padding-horizontal:28px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.4);--f7-searchbar-in-page-content-margin:0px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:0;--f7-searchbar-in-page-content-input-border-radius:0;--f7-searchbar-placeholder-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-bg-color:#e4e4e4}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-bg-color:#2a2a2a}.md{--f7-searchbar-border-color:transparent;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.25);--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);width:100%;position:relative;z-index:200;height:var(--f7-searchbar-height);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color))}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .searchbar{background-color:rgba(var(--f7-searchbar-bg-color-rgb,var(--f7-bars-bg-color-rgb)),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.ios .subnavbar .searchbar{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .subnavbar .searchbar:after{display:none!important}.searchbar.no-outline:after{display:none!important}.searchbar:after{content:'';position:absolute;background-color:var(--f7-searchbar-border-color,var(--f7-bars-border-color));display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{box-sizing:border-box;width:100%;height:100%;display:block;border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);-webkit-appearance:none;appearance:none;font-family:inherit;font-weight:400;color:var(--f7-searchbar-input-text-color);font-size:var(--f7-searchbar-input-font-size);background-color:var(--f7-searchbar-input-bg-color);border-radius:var(--f7-searchbar-input-border-radius);position:relative;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right,0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;width:100%;height:var(--f7-searchbar-input-height);position:relative}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){position:absolute;left:0;top:0}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);margin:var(--f7-searchbar-in-page-content-margin);width:auto;box-shadow:var(--f7-searchbar-in-page-content-box-shadow)}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);position:absolute;transition-duration:.3s;pointer-events:none}.navbar .searchbar-expandable{background:0 0}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{top:var(--f7-safe-area-top);height:calc(100% - var(--f7-safe-area-top))}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.searchbar-disable-button{cursor:pointer;pointer-events:none;-webkit-appearance:none;appearance:none;background:0 0;border:none;outline:0;padding:0;margin:0;width:auto;opacity:0}.searchbar-icon{pointer-events:none;background-position:center;background-repeat:no-repeat}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);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}.searchbar-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;opacity:0;pointer-events:none;transition-duration:.3s;transform:translate3d(0,0,0);background:var(--f7-searchbar-backdrop-bg-color)}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(-1 * var(--f7-navbar-large-title-height)));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbars~.page:not(.no-navbar)>.searchbar,.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbars~.page-with-navbar-large:not(.no-navbar) .searchbar,.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),0)}.navbars~.page-with-navbar-large:not(.no-navbar) .page-content .searchbar,.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{width:auto;height:auto;background-color:transparent;background-image:none}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{padding:0;position:static;width:auto;height:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{font-size:var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right,0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left,0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{z-index:30}.ios .searchbar .input-clear-button{z-index:40;left:7px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;z-index:40;right:8px}.ios .searchbar-icon:after{content:'search_ios';line-height:13px}.ios .searchbar-disable-button{font-size:17px;flex-shrink:0;transform:translate3d(0,0,0);transition-duration:.3s;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none}.ios .searchbar-disable-button.active-state{transition-duration:0s;opacity:.3!important}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;margin-right:8px}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-expandable{right:0;bottom:0;opacity:1;width:100%;height:0%;transform:translate3d(0,0,0);overflow:hidden}.ios .searchbar-expandable .searchbar-disable-button{margin-right:8px;opacity:1;display:block}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size)}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{transform:translateY(calc(-1 * var(--f7-navbar-height)));opacity:0!important}.ios .searchbar-expandable.searchbar-enabled{opacity:1;height:var(--f7-searchbar-expandable-size);pointer-events:auto}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-icon{width:48px;height:48px;left:0;top:0;display:flex;align-items:center;justify-content:center;right:var(--f7-safe-area-right)}.md .searchbar-icon:after{width:auto;height:auto;content:'search_md';line-height:1.2}.md .searchbar-disable-button{width:48px;height:48px;transform:rotate(-90deg) scale(.5);font-size:0!important;display:block;margin-top:-24px;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right))}.md .searchbar-disable-button: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;line-height:48px;content:'arrow_right_md'}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{transform:rotate(0deg) scale(1);pointer-events:auto;opacity:1}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{width:48px;height:48px;margin-top:-24px;left:0}.md .searchbar .input-clear-button:after{line-height:48px;content:'delete_round_md';opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{right:var(--f7-safe-area-right)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;height:var(--f7-searchbar-expandable-size);opacity:0;bottom:0;border-radius:calc(var(--f7-searchbar-expandable-size));width:calc(var(--f7-searchbar-expandable-size));margin-top:calc(var(--f7-searchbar-expandable-size) * -1 / 2);transform:translate3d(0px,0px,0px);background-color:var(--f7-searchbar-input-bg-color);right:100%;margin-right:calc(var(--f7-searchbar-expandable-size) * -1)}.md .searchbar-expandable.searchbar-enabled{width:100%;border-radius:0;opacity:1;pointer-events:auto;margin-top:0;right:0;margin-right:0}

package/components/searchbar/searchbar-vars.less

@@ -0,0 +1,77 @@
+:root {
+  /*
+  --f7-searchbar-link-color: var(--f7-bars-link-color);
+  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
+  */
+  --f7-searchbar-input-border-width: 0px;
+  --f7-searchbar-input-border-color: transparent;
+}
+.ios-vars({
+  /*
+  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
+  --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-searchbar-border-color: var(--f7-bars-border-color);
+  */
+  --f7-searchbar-height: 44px;
+  --f7-searchbar-inner-padding-left: 8px;
+  --f7-searchbar-inner-padding-right: 8px;
+  /*
+  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
+  */
+  --f7-searchbar-input-font-size: 17px;
+  --f7-searchbar-input-border-radius: 8px;
+  --f7-searchbar-input-height: 32px;
+  --f7-searchbar-inline-input-height: 32px;
+  /*
+  --f7-searchbar-inline-input-border-radius: var(--f7-searchbar-input-border-radius);
+  */
+  --f7-searchbar-input-padding-horizontal: 28px;
+  /*
+  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
+  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
+  */
+  --f7-searchbar-backdrop-bg-color: rgba(0,0,0,0.4);
+  --f7-searchbar-in-page-content-margin: 0px;
+  --f7-searchbar-in-page-content-box-shadow: none;
+  --f7-searchbar-in-page-content-border-radius: 0;
+  --f7-searchbar-in-page-content-input-border-radius: 0;
+  .light-vars({
+    --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-input-text-color: #000;
+    --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-input-bg-color: #e4e4e4;
+  });
+  .dark-vars({
+    --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-input-text-color: #fff;
+    --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-input-bg-color: #2a2a2a;
+  });
+});
+.md-vars({
+  --f7-searchbar-border-color: transparent;
+  --f7-searchbar-height: 48px;
+  --f7-searchbar-inner-padding-left: 8px;
+  --f7-searchbar-inner-padding-right: 8px;
+  --f7-searchbar-input-font-size: 16px;
+  --f7-searchbar-input-border-radius: 24px;
+  --f7-searchbar-input-height: 48px;
+  --f7-searchbar-inline-input-height: 48px;
+  --f7-searchbar-inline-input-border-radius: 24px;
+  --f7-searchbar-input-padding-horizontal: 16px;
+  --f7-searchbar-inline-input-padding-horizontal: 16px;
+  --f7-searchbar-backdrop-bg-color: rgba(0,0,0,0.25);
+  --f7-searchbar-in-page-content-margin: 16px 0;
+  --f7-searchbar-in-page-content-box-shadow: none;
+  --f7-searchbar-in-page-content-border-radius: 24px;
+  --f7-searchbar-in-page-content-input-border-radius: 24px;
+  --f7-searchbar-bg-color: transparent;
+});
+.md-color-vars({
+  --f7-searchbar-link-color: var(--f7-md-on-surface);
+  --f7-searchbar-search-icon-color: var(--f7-md-on-surface);
+  --f7-searchbar-input-clear-button-color: var(--f7-md-on-surface);
+  --f7-searchbar-placeholder-color: var(--f7-md-on-surface-variant);
+  --f7-searchbar-input-bg-color: var(--f7-md-secondary-container);
+  --f7-searchbar-input-text-color: var(--f7-md-on-surface);
+});

package/components/searchbar/searchbar.css

@@ -0,0 +1 @@
+:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:transparent}.ios{--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:8px;--f7-searchbar-input-height:32px;--f7-searchbar-inline-input-height:32px;--f7-searchbar-input-padding-horizontal:28px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.4);--f7-searchbar-in-page-content-margin:0px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:0;--f7-searchbar-in-page-content-input-border-radius:0;--f7-searchbar-placeholder-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-bg-color:#e4e4e4}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-bg-color:#2a2a2a}.md{--f7-searchbar-border-color:transparent;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.25);--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);width:100%;position:relative;z-index:200;height:var(--f7-searchbar-height);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color))}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .searchbar{background-color:rgba(var(--f7-searchbar-bg-color-rgb,var(--f7-bars-bg-color-rgb)),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.ios .subnavbar .searchbar{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .subnavbar .searchbar:after{display:none!important}.searchbar.no-outline:after{display:none!important}.searchbar:after{content:'';position:absolute;background-color:var(--f7-searchbar-border-color,var(--f7-bars-border-color));display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{box-sizing:border-box;width:100%;height:100%;display:block;border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);-webkit-appearance:none;appearance:none;font-family:inherit;font-weight:400;color:var(--f7-searchbar-input-text-color);font-size:var(--f7-searchbar-input-font-size);background-color:var(--f7-searchbar-input-bg-color);border-radius:var(--f7-searchbar-input-border-radius);position:relative;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right,0px))}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;width:100%;height:var(--f7-searchbar-input-height);position:relative}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){position:absolute;left:0;top:0}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);margin:var(--f7-searchbar-in-page-content-margin);width:auto;box-shadow:var(--f7-searchbar-in-page-content-box-shadow)}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);position:absolute;transition-duration:.3s;pointer-events:none}.navbar .searchbar-expandable{background:0 0}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{top:var(--f7-safe-area-top);height:calc(100% - var(--f7-safe-area-top))}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.searchbar-disable-button{cursor:pointer;pointer-events:none;-webkit-appearance:none;appearance:none;background:0 0;border:none;outline:0;padding:0;margin:0;width:auto;opacity:0}.searchbar-icon{pointer-events:none;background-position:center;background-repeat:no-repeat}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);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}.searchbar-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;opacity:0;pointer-events:none;transition-duration:.3s;transform:translate3d(0,0,0);background:var(--f7-searchbar-backdrop-bg-color)}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(-1 * var(--f7-navbar-large-title-height)));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbars~.page:not(.no-navbar)>.searchbar,.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbars~.page-with-navbar-large:not(.no-navbar) .searchbar,.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),0)}.navbars~.page-with-navbar-large:not(.no-navbar) .page-content .searchbar,.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{width:auto;height:auto;background-color:transparent;background-image:none}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{padding:0;position:static;width:auto;height:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{font-size:var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left,0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right,0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{z-index:30}.ios .searchbar .input-clear-button{z-index:40;right:7px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;z-index:40;left:8px}.ios .searchbar-icon:after{content:'search_ios';line-height:13px}.ios .searchbar-disable-button{font-size:17px;flex-shrink:0;transform:translate3d(0,0,0);transition-duration:.3s;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none}.ios .searchbar-disable-button.active-state{transition-duration:0s;opacity:.3!important}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;margin-left:8px}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-expandable{left:0;bottom:0;opacity:1;width:100%;height:0%;transform:translate3d(0,0,0);overflow:hidden}.ios .searchbar-expandable .searchbar-disable-button{margin-left:8px;opacity:1;display:block}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size)}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{transform:translateY(calc(-1 * var(--f7-navbar-height)));opacity:0!important}.ios .searchbar-expandable.searchbar-enabled{opacity:1;height:var(--f7-searchbar-expandable-size);pointer-events:auto}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-icon{width:48px;height:48px;left:0;top:0;display:flex;align-items:center;justify-content:center;left:var(--f7-safe-area-left)}.md .searchbar-icon:after{width:auto;height:auto;content:'search_md';line-height:1.2}.md .searchbar-disable-button{width:48px;height:48px;transform:rotate(-90deg) scale(.5);font-size:0!important;display:block;margin-top:-24px;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .searchbar-disable-button: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;line-height:48px;content:'arrow_left_md'}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{transform:rotate(0deg) scale(1);pointer-events:auto;opacity:1}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{width:48px;height:48px;margin-top:-24px;right:0}.md .searchbar .input-clear-button:after{line-height:48px;content:'delete_round_md';opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{left:var(--f7-safe-area-left)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;height:var(--f7-searchbar-expandable-size);opacity:0;bottom:0;border-radius:calc(var(--f7-searchbar-expandable-size));width:calc(var(--f7-searchbar-expandable-size));margin-top:calc(var(--f7-searchbar-expandable-size) * -1 / 2);transform:translate3d(0px,0px,0px);background-color:var(--f7-searchbar-input-bg-color);left:100%;margin-left:calc(var(--f7-searchbar-expandable-size) * -1)}.md .searchbar-expandable.searchbar-enabled{width:100%;border-radius:0;opacity:1;pointer-events:auto;margin-top:0;left:0;margin-left:0}

package/components/searchbar/searchbar.d.ts

@@ -0,0 +1,161 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Searchbar {
+  interface Parameters {
+    /** Searchbar element. HTMLElement or string with CSS selector of searchbar element */
+    el: HTMLElement | CSSSelector;
+    /** CSS selector or HTML element of searchbar input element. By default (if not passed) will try to look for input type="search" inside of searchbar */
+    inputEl?: HTMLElement | CSSSelector;
+    /** Enables disable button (default true) */
+    disableButton?: boolean;
+    /** CSS selector or HTML element of searchbar disable button. By default (if not passed) will try to look for element with search-disable-button class inside of searchbar */
+    disableButtonEl?: HTMLElement | CSSSelector;
+    /** CSS selector or HTML element of list block to search in */
+    searchContainer?: HTMLElement | CSSSelector;
+    /** CSS selector of List View element's field where we need to search. Usually we search through element titles, in this case we need to pass .item-title. It is also possible to pass few elements for search like .item-title, .item-text */
+    searchIn?: CSSSelector;
+    /** CSS selector of single search item. If we do a search in List View, then it must be a single list element li (default "li") */
+    searchItem?: CSSSelector;
+    /** CSS selector of group element. Used when hideGroups enabled to hide groups. If we do a search in List View, then it usually a list group (default "list-group") */
+    searchGroup?: CSSSelector;
+    /** CSS selector of group titles. Used when hideGroupTitles enabled to hide group titles. If we do a search in List View, then it usually a list group title (default ".list-group-title") */
+    searchGroupTitle?: CSSSelector;
+    /** CSS selector or HTMLElement of searchbar "found" element to make it hidden when there is no search results (default ".searchbar-found") */
+    foundEl?: HTMLElement | CSSSelector;
+    /** CSS selector or HTMLElement of searchbar "not-found" element to make it visible when there is no search results (default ".searchbar-not-found") */
+    notFoundEl?: HTMLElement | CSSSelector;
+    /** CSS selector or HTMLElement of elements to be hidden when searchbar enabled (default ".searchbar-hide-on-enable") */
+    hideOnEnableEl?: HTMLElement | CSSSelector;
+    /** CSS selector or HTMLElement of elements to be hidden on searchbar search (default ".searchbar-hide-on-search") */
+    hideOnSearchEl?: HTMLElement | CSSSelector;
+    /** Enables searchbar backdrop element. (default true) */
+    backdrop?: boolean;
+    /** CSS selector or HTMLElement of searchbar backdrop element. If not passed and backdrop parameter is true then it will look for .searchbar-backdrop element. In case none found it will create one automatically */
+    backdropEl?: HTMLElement | CSSSelector;
+    /** CSS selector for items to be ignored by searchbar and always present in search results (default ".searchbar-ignore") */
+    ignore?: CSSSelector;
+    /** When enabled searchbar will not search through any of list blocks specified by searchContainer and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually (default false) */
+    customSearch?: boolean;
+    /** Enable to remove/replace diacritics (á, í, ó, etc.) during search (default false) */
+    removeDiacritics?: boolean;
+    /** If enabled, then search will consider item dividers and group titles and hide them if there are no found items right after them (default true) */
+    hideGroupTitles?: boolean;
+    /** If enabled, then search will consider list view groups hide them if there are no found items inside of these groups (default true) */
+    hideGroups?: boolean;
+    /** Disable searchbar on backdrop click */
+    disableOnBackdropClick?: boolean;
+    /** Enables expandable searchbar */
+    expandable?: boolean;
+    /** Input events used to track search event */
+    inputEvents?: string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Searchbar extends Framework7EventsClass<Events> {
+    /** Searchbar HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with searchbar HTML element */
+    $el: Dom7Array;
+    /** Searchbar input HTML element */
+    inputEl: HTMLElement;
+    /** Dom7 instance with searchbar input HTML element */
+    $inputEl: Dom7Array;
+    /** Current search query (search input value) */
+    query: string;
+    /** Previous search query (search input value) */
+    previousQuery: string;
+    /** Searchbar search container */
+    searchContainer: HTMLElement;
+    /** Dom7 element with searchbar search container */
+    $searchContainer: Dom7Array;
+    /** Boolean value that represents is searchbar enabled or disabled */
+    enabled: boolean;
+    /** Boolean value that represents is searchbar expandable or not */
+    expandable: boolean;
+    /** Searchbar parameters */
+    params: Parameters;
+    /** Force searchbar to search passed query */
+    search(query: string): Searchbar;
+    /** Enable/activate searchbar */
+    enable(): Searchbar;
+    /** Disable/deactivate searchbar */
+    disable(): Searchbar;
+    /** Toggle searchbar */
+    toggle(): Searchbar;
+    /** Clear search query and update results */
+    clear(): Searchbar;
+    /** Destroy searchbar */
+    destroy(): void;
+  }
+  interface Events {
+    /** Event will be triggered during search (search field change). As an argument event handler receives searchbar instance, current query and previous query */
+    search: (searchbar: Searchbar, query: string, previousQuery: string) => void;
+    /** Event will be triggered when user clicks on Searchbar's "clear" element . As an argument event handler receives searchbar instance and previous (before clear) query */
+    clear: (searchbar: Searchbar, previousQuery: string) => void;
+    /** Event will be triggered when Searchbar becomes active/enabled. As an argument event handler receives searchbar instance */
+    enable: (searchbar: Searchbar) => void;
+    /** Event will be triggered when Searchbar becomes inactive/disabled. As an argument event handler receives searchbar instance */
+    disable: (searchbar: Searchbar) => void;
+    /** Event will be triggered right before Searchbar instance will be destroyed */
+    beforeDestroy: (searchbar: Searchbar) => void;
+  }
+  interface DomEvents {
+    /** Event will be triggered during search (search field change). As an argument event handler receives searchbar instance, current query and previous query */
+    'searchbar:search': () => void;
+    /** Event will be triggered when user clicks on Searchbar's "clear" element . As an argument event handler receives searchbar instance and previous (before clear) query */
+    'searchbar:clear': () => void;
+    /** Event will be triggered when Searchbar becomes active/enabled. As an argument event handler receives searchbar instance */
+    'searchbar:enable': () => void;
+    /** Event will be triggered when Searchbar becomes inactive/disabled. As an argument event handler receives searchbar instance */
+    'searchbar:disable': () => void;
+    /** Event will be triggered right before Searchbar instance will be destroyed */
+    'searchbar:beforedestroy': () => void;
+  }
+
+  interface AppMethods {
+    searchbar: {
+      /** create Searchbar instance */
+      create(parameters: Parameters): Searchbar;
+      /** get Searchbar instance by HTML element */
+      get(el: HTMLElement | CSSSelector | Searchbar): Searchbar;
+      /** destroy Searchbar instance */
+      destroy(el: HTMLElement | CSSSelector | Searchbar): void;
+      /** Clear search query and update results */
+      clear(el: HTMLElement | CSSSelector | Searchbar): Searchbar;
+      /** Enable/activate searchbar */
+      enable(el: HTMLElement | CSSSelector | Searchbar): Searchbar;
+      /** Disable/deactivate searchbar */
+      disable(el: HTMLElement | CSSSelector | Searchbar): Searchbar;
+      /** Toggle searchbar */
+      toggle(el: HTMLElement | CSSSelector | Searchbar): Searchbar;
+      /** Force searchbar to search passed query */
+      search(el: HTMLElement | CSSSelector | Searchbar, query: string): Searchbar;
+    };
+  }
+  interface AppParams {
+    searchbar?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered during search (search field change). As an argument event handler receives searchbar instance, current query and previous query */
+    searchbarSearch: (searchbar: Searchbar, query: string, previousQuery: string) => void;
+    /** Event will be triggered when user clicks on Searchbar's "clear" element . As an argument event handler receives searchbar instance and previous (before clear) query */
+    searchbarClear: (searchbar: Searchbar, previousQuery: string) => void;
+    /** Event will be triggered when Searchbar becomes active/enabled. As an argument event handler receives searchbar instance */
+    searchbarEnable: (searchbar: Searchbar) => void;
+    /** Event will be triggered when Searchbar becomes inactive/disabled. As an argument event handler receives searchbar instance */
+    searchbarDisable: (searchbar: Searchbar) => void;
+    /** Event will be triggered right before Searchbar instance will be destroyed */
+    searchbarBeforeDestroy: (searchbar: Searchbar) => void;
+  }
+}
+
+declare const SearchbarComponent: Framework7Plugin;
+
+export default SearchbarComponent;

package/components/searchbar/searchbar.js

@@ -0,0 +1,122 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Searchbar from './searchbar-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'searchbar',
+  static: {
+    Searchbar
+  },
+  create() {
+    const app = this;
+    app.searchbar = ConstructorMethods({
+      defaultSelector: '.searchbar',
+      constructor: Searchbar,
+      app,
+      domProp: 'f7Searchbar',
+      addMethods: 'clear enable disable toggle search'.split(' ')
+    });
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.searchbar-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbar.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.searchbar-init').each(searchbarEl => {
+        if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
+          searchbarEl.f7Searchbar.destroy();
+        }
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.searchbar-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbar.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.searchbar-init').each(searchbarEl => {
+          const $searchbarEl = $(searchbarEl);
+          app.searchbar.create(extend($searchbarEl.dataset(), {
+            el: searchbarEl
+          }));
+        });
+      }
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.searchbar-init').each(searchbarEl => {
+        if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
+          searchbarEl.f7Searchbar.destroy();
+        }
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.searchbar-init').each(searchbarEl => {
+          if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
+            searchbarEl.f7Searchbar.destroy();
+          }
+        });
+      }
+    }
+  },
+  clicks: {
+    '.searchbar-clear': function clear($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbar.get(data.searchbar);
+      if (sb) sb.clear();
+    },
+    '.searchbar-enable': function enable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbar.get(data.searchbar);
+      if (sb) sb.enable(true);
+    },
+    '.searchbar-disable': function disable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbar.get(data.searchbar);
+      if (sb) sb.disable();
+    },
+    '.searchbar-toggle': function toggle($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbar.get(data.searchbar);
+      if (sb) sb.toggle();
+    }
+  },
+  vnode: {
+    'searchbar-init': {
+      insert(vnode) {
+        const app = this;
+        const searchbarEl = vnode.elm;
+        const $searchbarEl = $(searchbarEl);
+        app.searchbar.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      },
+      destroy(vnode) {
+        const searchbarEl = vnode.elm;
+        if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
+          searchbarEl.f7Searchbar.destroy();
+        }
+      }
+    }
+  }
+};