@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{search-bar-fUD0qU2P.js → search-bar-B6xxVT7u.js}

@@ -1,9 +1,10 @@
-import { t as o } from "./decorate-DXuynaiA.js";
-import { t as p } from "./form-associated-Cty_ZaS9.js";
-import "./icon-DrNqcNEL.js";
-import { css as m, html as l, nothing as r } from "lit";
-import { customElement as u, property as a, query as x, state as f } from "lit/decorators.js";
-var y = m`
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
+//#region src/components/search-bar/search-bar.css.ts
+var l = n`
   :host {
     display: block;
     box-sizing: border-box;
@@ -13,6 +14,42 @@ var y = m`
     font-family: var(--md-sys-typescale-font-family, inherit);
     color: var(--md-sys-color-on-surface, #1D1B20);
     vertical-align: middle;
+
+    --_height: var(--md-search-bar-height, 56px);
+    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, var(--md-sys-shape-corner-full, 28px)));
+    --_shape-active: var(--md-search-bar-shape-active, var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px));
+    --_bg: var(--md-search-bar-container-color, var(--md-search-bar-bg, var(--md-sys-color-surface-container-high, #ECE6F0)));
+    --_elevation: var(--md-search-bar-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));
+    --_elevation-active: var(--md-search-bar-elevation-active, var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));
+    --_btn-size: var(--md-search-bar-icon-button-size, 40px);
+    --_icon-size: var(--md-search-bar-icon-size, 24px);
+    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-large-size, 16px));
+    --_line-height: var(--md-search-bar-line-height, var(--md-sys-typescale-body-large-line-height, 24px));
+    --_padding: var(--md-search-bar-padding, 0 8px 0 16px);
+  }
+
+  :host([size="small"]),
+  :host([size="compact"]),
+  :host([compact]) {
+    --_height: var(--md-search-bar-height, 40px);
+    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 20px));
+    --_shape-active: var(--md-search-bar-shape-active, 20px 20px 12px 12px);
+    --_btn-size: var(--md-search-bar-icon-button-size, 32px);
+    --_icon-size: var(--md-search-bar-icon-size, 20px);
+    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-medium-size, 14px));
+    --_line-height: var(--md-search-bar-line-height, 20px);
+    --_padding: var(--md-search-bar-padding, 0 6px 0 12px);
+  }
+
+  :host([size="large"]) {
+    --_height: var(--md-search-bar-height, 64px);
+    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 32px));
+    --_shape-active: var(--md-search-bar-shape-active, 32px 32px 20px 20px);
+    --_btn-size: var(--md-search-bar-icon-button-size, 48px);
+    --_icon-size: var(--md-search-bar-icon-size, 24px);
+    --_font-size: var(--md-search-bar-font-size, 18px);
+    --_line-height: var(--md-search-bar-line-height, 26px);
+    --_padding: var(--md-search-bar-padding, 0 12px 0 20px);
   }
 
   :host([disabled]) {
@@ -43,9 +80,9 @@ var y = m`
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
-    background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));
-    border-radius: var(--md-sys-shape-corner-full, 28px);
-    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    background-color: var(--_bg);
+    border-radius: var(--_shape);
+    box-shadow: var(--_elevation);
     transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
                 border-radius 200ms cubic-bezier(0.2, 0, 0, 1),
                 background-color 200ms cubic-bezier(0.2, 0, 0, 1);
@@ -54,9 +91,9 @@ var y = m`
   .search-bar-header {
     display: flex;
     align-items: center;
-    min-height: 56px;
-    height: 56px;
-    padding: 0 8px 0 16px;
+    min-height: var(--_height);
+    height: var(--_height);
+    padding: var(--_padding);
     box-sizing: border-box;
     gap: 8px;
   }
@@ -72,8 +109,8 @@ var y = m`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: var(--_btn-size);
+    height: var(--_btn-size);
     border: none;
     background: transparent;
     border-radius: 50%;
@@ -85,6 +122,11 @@ var y = m`
     transition: background-color 150ms ease;
   }
 
+  .icon-btn md-icon {
+    font-size: var(--_icon-size);
+    --md-icon-size: var(--_icon-size);
+  }
+
   .icon-btn:hover {
     background-color: rgba(73, 69, 79, 0.08);
   }
@@ -107,8 +149,8 @@ var y = m`
     background: transparent;
     outline: none;
     font-family: inherit;
-    font-size: var(--md-sys-typescale-body-large-size, 16px);
-    line-height: var(--md-sys-typescale-body-large-line-height, 24px);
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
     color: var(--md-sys-color-on-surface, #1D1B20);
     padding: 0 4px;
     margin: 0;
@@ -141,8 +183,8 @@ var y = m`
   /* Active Docked Mode */
   :host([active]) .search-container {
     z-index: 50;
-    border-radius: var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px);
-    box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));
+    border-radius: var(--_shape-active);
+    box-shadow: var(--_elevation-active);
   }
 
   /* Divider when active */
@@ -202,6 +244,11 @@ var y = m`
     flex-shrink: 0;
   }
 
+  .suggestion-icon md-icon {
+    font-size: var(--_icon-size);
+    --md-icon-size: var(--_icon-size);
+  }
+
   .suggestion-text {
     display: flex;
     flex-direction: column;
@@ -211,7 +258,7 @@ var y = m`
   }
 
   .suggestion-label {
-    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    font-size: var(--_font-size);
     line-height: 20px;
     white-space: nowrap;
     overflow: hidden;
@@ -265,12 +312,12 @@ var y = m`
 
     :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container.has-trailing,
     :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container.has-trailing {
-      height: 48px;
+      height: var(--_height);
       padding: 0 4px;
       gap: 2px;
-      background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));
-      border-radius: var(--md-sys-shape-corner-full, 28px);
-      box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+      background-color: var(--_bg);
+      border-radius: var(--_shape);
+      box-shadow: var(--_elevation);
     }
 
     :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container.has-trailing:hover,
@@ -288,10 +335,10 @@ var y = m`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 40px;
-      height: 40px;
-      min-width: 40px;
-      min-height: 40px;
+      width: var(--_btn-size);
+      height: var(--_btn-size);
+      min-width: var(--_btn-size);
+      min-height: var(--_btn-size);
       border-radius: 50%;
       border: none;
       background: transparent;
@@ -305,6 +352,11 @@ var y = m`
       -webkit-tap-highlight-color: transparent;
     }
 
+    .trigger-btn md-icon {
+      font-size: var(--_icon-size);
+      --md-icon-size: var(--_icon-size);
+    }
+
     .trigger-btn:hover {
       background-color: rgba(73, 69, 79, 0.08);
     }
@@ -373,7 +425,7 @@ var y = m`
       border-radius: 0;
       box-shadow: none;
       z-index: 99999;
-      background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));
+      background-color: var(--_bg);
     }
 
     :host([responsive][active]) .suggestions-container,
@@ -421,7 +473,7 @@ var y = m`
     border-radius: 0;
     box-shadow: none;
     z-index: 99999;
-    background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));
+    background-color: var(--_bg);
   }
 
   :host([fullscreen][active]) .suggestions-container {
@@ -429,124 +481,125 @@ var y = m`
     max-height: calc(100vh - 57px);
     max-height: calc(100dvh - 57px);
   }
-`, i = class extends p {
-  constructor(...t) {
-    super(...t), this.value = "", this.placeholder = "Search", this.active = !1, this.suggestions = [], this.leadingIcon = "search", this.activeLeadingIcon = "arrow_back", this.trailingIcon = "", this.showBackButton = !0, this.showClearButton = !0, this.responsive = !0, this.collapseOnMobile = !0, this.fullscreen = !1, this.autoDeactivateOnSelect = !0, this.highlightedIndex = -1, this.handleFocus = () => {
-      this.active || (this.active = !0, this.emitEvent("active-change", { active: !0 }));
-    }, this.handleInput = (e) => {
-      const s = e.target;
-      this.value = s.value, this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.highlightedIndex = -1, this.emitEvent("input", { value: this.value });
-    }, this.handleChange = () => {
-      this.emitEvent("change", { value: this.value });
-    }, this.handleKeyDown = (e) => {
-      const s = this.suggestions.length;
-      if (e.key === "Escape") {
-        e.preventDefault(), this.close(), this.inputElement?.blur();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        if (!this.active) {
-          this.show();
-          return;
-        }
-        s > 0 && (e.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1) % s);
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        s > 0 && this.active && (e.preventDefault(), this.highlightedIndex = this.highlightedIndex <= 0 ? s - 1 : this.highlightedIndex - 1);
-        return;
-      }
-      if (e.key === "Enter")
-        if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < s) {
-          const n = this.suggestions[this.highlightedIndex];
-          n !== void 0 && (e.preventDefault(), this.selectSuggestion(n, this.highlightedIndex));
-        } else this.emitEvent("search", { value: this.value });
-    }, this.handleTriggerClick = (e) => {
-      e.stopPropagation(), this.show();
-    }, this.handleTriggerKeyDown = (e) => {
-      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.show());
-    }, this.handleTrailingTriggerClick = (e) => {
-      e.stopPropagation(), this.emitEvent("trailing-icon-click", { icon: this.trailingIcon }) && this.show();
-    }, this.handleBackClick = (e) => {
-      e.stopPropagation(), this.close();
-    }, this.handleScrimClick = () => {
-      this.close();
-    }, this.handleClearClick = (e) => {
-      e.stopPropagation(), this.clear();
-    };
-  }
-  static {
-    this.styles = [p.styles, y];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("active", this.active), this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
-  }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value)), t.has("active") && (this.toggleAttribute("active", this.active), this.active || (this.highlightedIndex = -1)), t.has("collapseOnMobile") && this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
-  }
-  formResetCallback() {
-    this.value = "", this.setFormValue(null), this.toggleAttribute("has-value", !1), this.highlightedIndex = -1;
-  }
-  focus() {
-    this.inputElement?.focus();
-  }
-  show() {
-    this.active || (this.active = !0, this.emitEvent("active-change", { active: !0 })), this.updateComplete.then(() => {
-      this.inputElement?.focus();
-    });
-  }
-  open() {
-    this.show();
-  }
-  close() {
-    this.active && (this.active = !1, this.highlightedIndex = -1, this.emitEvent("active-change", { active: !1 }));
-  }
-  collapse() {
-    this.close();
-  }
-  toggle() {
-    this.active ? this.close() : this.show();
-  }
-  clear() {
-    this.value = "", this.setFormValue(""), this.toggleAttribute("has-value", !1), this.highlightedIndex = -1, this.emitEvent("input", { value: "" }), this.emitEvent("clear"), this.inputElement?.focus();
-  }
-  selectSuggestion(t, e) {
-    const s = typeof t == "string" ? t : t.label, n = typeof t == "string" ? t : t.value ?? t.label;
-    this.value = n, this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.emitEvent("suggestion-select", {
-      suggestion: t,
-      label: s,
-      value: n,
-      index: e
-    }), this.emitEvent("search", {
-      value: this.value,
-      suggestion: t
-    }), this.autoDeactivateOnSelect && this.close();
-  }
-  renderSuggestionItem(t, e) {
-    const s = typeof t == "string", n = s ? t : t.label, c = s ? void 0 : t.supportingText, h = s ? void 0 : t.trailingSupportingText, b = !s && t.icon ? t.icon : "history", d = this.highlightedIndex === e;
-    return l`
+`, u = class extends t {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.compact = !1, this.value = "", this.placeholder = "Search", this.active = !1, this.suggestions = [], this.leadingIcon = "search", this.activeLeadingIcon = "arrow_back", this.trailingIcon = "", this.showBackButton = !0, this.showClearButton = !0, this.responsive = !0, this.collapseOnMobile = !0, this.fullscreen = !1, this.autoDeactivateOnSelect = !0, this.highlightedIndex = -1, this.handleFocus = () => {
+			this.active || (this.active = !0, this.emitEvent("active-change", { active: !0 }));
+		}, this.handleInput = (e) => {
+			let t = e.target;
+			this.value = t.value, this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.highlightedIndex = -1, this.emitEvent("input", { value: this.value });
+		}, this.handleChange = () => {
+			this.emitEvent("change", { value: this.value });
+		}, this.handleKeyDown = (e) => {
+			let t = this.suggestions.length;
+			if (e.key === "Escape") {
+				e.preventDefault(), this.close(), this.inputElement?.blur();
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				if (!this.active) {
+					this.show();
+					return;
+				}
+				t > 0 && (e.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1) % t);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				t > 0 && this.active && (e.preventDefault(), this.highlightedIndex = this.highlightedIndex <= 0 ? t - 1 : this.highlightedIndex - 1);
+				return;
+			}
+			if (e.key === "Enter") {
+				if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < t) {
+					let t = this.suggestions[this.highlightedIndex];
+					t !== void 0 && (e.preventDefault(), this.selectSuggestion(t, this.highlightedIndex));
+				} else this.emitEvent("search", { value: this.value });
+			}
+		}, this.handleTriggerClick = (e) => {
+			e.stopPropagation(), this.show();
+		}, this.handleTriggerKeyDown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.show());
+		}, this.handleTrailingTriggerClick = (e) => {
+			e.stopPropagation(), this.emitEvent("trailing-icon-click", { icon: this.trailingIcon }) && this.show();
+		}, this.handleBackClick = (e) => {
+			e.stopPropagation(), this.close();
+		}, this.handleScrimClick = () => {
+			this.close();
+		}, this.handleClearClick = (e) => {
+			e.stopPropagation(), this.clear();
+		};
+	}
+	static {
+		this.styles = [t.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("active", this.active), this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value)), e.has("active") && (this.toggleAttribute("active", this.active), this.active || (this.highlightedIndex = -1)), e.has("collapseOnMobile") && this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
+	}
+	formResetCallback() {
+		this.value = "", this.setFormValue(null), this.toggleAttribute("has-value", !1), this.highlightedIndex = -1;
+	}
+	focus() {
+		this.inputElement?.focus();
+	}
+	show() {
+		this.active || (this.active = !0, this.emitEvent("active-change", { active: !0 })), this.updateComplete.then(() => {
+			this.inputElement?.focus();
+		});
+	}
+	open() {
+		this.show();
+	}
+	close() {
+		this.active && (this.active = !1, this.highlightedIndex = -1, this.emitEvent("active-change", { active: !1 }));
+	}
+	collapse() {
+		this.close();
+	}
+	toggle() {
+		this.active ? this.close() : this.show();
+	}
+	clear() {
+		this.value = "", this.setFormValue(""), this.toggleAttribute("has-value", !1), this.highlightedIndex = -1, this.emitEvent("input", { value: "" }), this.emitEvent("clear"), this.inputElement?.focus();
+	}
+	selectSuggestion(e, t) {
+		let n = typeof e == "string" ? e : e.label, r = typeof e == "string" ? e : e.value ?? e.label;
+		this.value = r, this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.emitEvent("suggestion-select", {
+			suggestion: e,
+			label: n,
+			value: r,
+			index: t
+		}), this.emitEvent("search", {
+			value: this.value,
+			suggestion: e
+		}), this.autoDeactivateOnSelect && this.close();
+	}
+	renderSuggestionItem(e, t) {
+		let n = typeof e == "string", a = n ? e : e.label, o = n ? void 0 : e.supportingText, s = n ? void 0 : e.trailingSupportingText, c = !n && e.icon ? e.icon : "history", l = this.highlightedIndex === t;
+		return r`
       <div
-        class="suggestion-item ${d ? "highlighted" : ""}"
+        class="suggestion-item ${l ? "highlighted" : ""}"
         role="option"
-        aria-selected=${d ? "true" : "false"}
-        @click=${() => this.selectSuggestion(t, e)}
+        aria-selected=${l ? "true" : "false"}
+        @click=${() => this.selectSuggestion(e, t)}
       >
         <span class="suggestion-icon">
-          <md-icon name=${b}></md-icon>
+          <md-icon name=${c}></md-icon>
         </span>
         <div class="suggestion-text">
-          <span class="suggestion-label">${n}</span>
-          ${c ? l`<span class="suggestion-supporting">${c}</span>` : r}
+          <span class="suggestion-label">${a}</span>
+          ${o ? r`<span class="suggestion-supporting">${o}</span>` : i}
         </div>
-        ${h ? l`<span class="suggestion-trailing">${h}</span>` : r}
+        ${s ? r`<span class="suggestion-trailing">${s}</span>` : i}
       </div>
     `;
-  }
-  render() {
-    const t = this.active && this.showBackButton, e = !!this.trailingIcon;
-    return l`
+	}
+	render() {
+		let e = this.active && this.showBackButton, t = !!this.trailingIcon;
+		return r`
       <div
-        class="search-trigger-container ${e ? "has-trailing" : ""}"
+        class="search-trigger-container ${t ? "has-trailing" : ""}"
         role="button"
         tabindex="0"
         aria-label=${this.placeholder || "Search"}
@@ -566,7 +619,7 @@ var y = m`
           <md-icon name=${this.leadingIcon || "search"}></md-icon>
         </button>
 
-        ${e ? l`
+        ${t ? r`
               <div class="trigger-divider" aria-hidden="true"></div>
               <button
                 class="trigger-btn trigger-trailing-btn"
@@ -578,7 +631,7 @@ var y = m`
               >
                 <md-icon name=${this.trailingIcon}></md-icon>
               </button>
-            ` : r}
+            ` : i}
       </div>
 
       <div class="scrim" @click=${this.handleScrimClick}></div>
@@ -587,7 +640,7 @@ var y = m`
         <div class="search-bar-header">
           <span class="leading-slot">
             <slot name="leading-icon">
-              ${t ? l`
+              ${e ? r`
                     <button
                       class="icon-btn"
                       type="button"
@@ -596,7 +649,7 @@ var y = m`
                     >
                       <md-icon name=${this.activeLeadingIcon}></md-icon>
                     </button>
-                  ` : l`
+                  ` : r`
                     <span class="icon-btn" style="cursor: default;">
                       <md-icon name=${this.leadingIcon}></md-icon>
                     </span>
@@ -623,7 +676,7 @@ var y = m`
           </div>
 
           <span class="trailing-slot">
-            ${this.showClearButton && this.value ? l`
+            ${this.showClearButton && this.value ? r`
                   <button
                     class="icon-btn clear-btn"
                     type="button"
@@ -632,14 +685,14 @@ var y = m`
                   >
                     <md-icon name="close"></md-icon>
                   </button>
-                ` : r}
+                ` : i}
 
             <slot name="trailing-icon">
-              ${this.trailingIcon ? l`
+              ${this.trailingIcon ? r`
                     <span class="icon-btn" style="cursor: default;">
                       <md-icon name=${this.trailingIcon}></md-icon>
                     </span>
-                  ` : r}
+                  ` : i}
             </slot>
           </span>
         </div>
@@ -648,7 +701,7 @@ var y = m`
 
         <div class="suggestions-container" role="listbox" aria-label="Suggestions">
           <slot name="suggestions">
-            ${this.suggestions.map((s, n) => this.renderSuggestionItem(s, n))}
+            ${this.suggestions.map((e, t) => this.renderSuggestionItem(e, t))}
           </slot>
           <div class="extra-content">
             <slot></slot>
@@ -656,61 +709,49 @@ var y = m`
         </div>
       </div>
     `;
-  }
+	}
 };
-o([a({ type: String })], i.prototype, "value", void 0);
-o([a({ type: String })], i.prototype, "placeholder", void 0);
-o([a({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "active", void 0);
-o([a({ type: Array })], i.prototype, "suggestions", void 0);
-o([a({
-  type: String,
-  attribute: "leading-icon"
-})], i.prototype, "leadingIcon", void 0);
-o([a({
-  type: String,
-  attribute: "active-leading-icon"
-})], i.prototype, "activeLeadingIcon", void 0);
-o([a({
-  type: String,
-  attribute: "trailing-icon"
-})], i.prototype, "trailingIcon", void 0);
-o([a({
-  type: Boolean,
-  attribute: "show-back-button"
-})], i.prototype, "showBackButton", void 0);
-o([a({
-  type: Boolean,
-  attribute: "show-clear-button"
-})], i.prototype, "showClearButton", void 0);
-o([a({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "responsive", void 0);
-o([a({
-  type: Boolean,
-  attribute: "collapse-on-mobile",
-  reflect: !0
-})], i.prototype, "collapseOnMobile", void 0);
-o([a({
-  type: Boolean,
-  reflect: !0
-})], i.prototype, "fullscreen", void 0);
-o([a({
-  type: Boolean,
-  attribute: "auto-deactivate-on-select"
-})], i.prototype, "autoDeactivateOnSelect", void 0);
-o([f()], i.prototype, "highlightedIndex", void 0);
-o([x("input")], i.prototype, "inputElement", void 0);
-i = o([u("md-search-bar")], i);
-var g = class extends i {
-};
-g = o([u("md-search")], g);
-export {
-  i as n,
-  g as t
-};
-
-//# sourceMappingURL=search-bar-fUD0qU2P.js.map
+e([o({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "compact", void 0), e([o({ type: String })], u.prototype, "value", void 0), e([o({ type: String })], u.prototype, "placeholder", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "active", void 0), e([o({ type: Array })], u.prototype, "suggestions", void 0), e([o({
+	type: String,
+	attribute: "leading-icon"
+})], u.prototype, "leadingIcon", void 0), e([o({
+	type: String,
+	attribute: "active-leading-icon"
+})], u.prototype, "activeLeadingIcon", void 0), e([o({
+	type: String,
+	attribute: "trailing-icon"
+})], u.prototype, "trailingIcon", void 0), e([o({
+	type: Boolean,
+	attribute: "show-back-button"
+})], u.prototype, "showBackButton", void 0), e([o({
+	type: Boolean,
+	attribute: "show-clear-button"
+})], u.prototype, "showClearButton", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "responsive", void 0), e([o({
+	type: Boolean,
+	attribute: "collapse-on-mobile",
+	reflect: !0
+})], u.prototype, "collapseOnMobile", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "fullscreen", void 0), e([o({
+	type: Boolean,
+	attribute: "auto-deactivate-on-select"
+})], u.prototype, "autoDeactivateOnSelect", void 0), e([c()], u.prototype, "highlightedIndex", void 0), e([s("input")], u.prototype, "inputElement", void 0), u = e([a("md-search-bar")], u);
+var d = class extends u {};
+d = e([a("md-search")], d);
+//#endregion
+export { u as n, d as t };
+
+//# sourceMappingURL=search-bar-B6xxVT7u.js.map