@francofantomius/material-components 1.1.2 → 1.3.0

package/dist/chunks/{search-bar-CfN-emMP.js → search-bar-B4lAXza_.js}

@@ -1,9 +1,12 @@
-import { t as a } from "./decorate-DXuynaiA.js";
-import { t as p } from "./form-associated-Cty_ZaS9.js";
-import "./icon-DrNqcNEL.js";
-import { css as m, html as r, nothing as l } from "lit";
-import { customElement as v, property as s, 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 "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.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;
@@ -104,6 +107,20 @@ var y = m`
     flex-shrink: 0;
   }
 
+  .leading-slot.empty,
+  :host([has-no-leading]) .leading-slot {
+    display: none;
+  }
+
+  :host([has-no-leading]) input {
+    padding-left: 8px;
+  }
+
+  .leading-slot ::slotted(md-icon-button),
+  .trailing-slot ::slotted(md-icon-button) {
+    --md-icon-button-size: var(--_btn-size);
+  }
+
   .icon-btn {
     display: inline-flex;
     align-items: center;
@@ -118,6 +135,9 @@ var y = m`
     padding: 0;
     outline: none;
     position: relative;
+    overflow: hidden;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
     transition: background-color 150ms ease;
   }
 
@@ -182,11 +202,15 @@ var y = m`
   /* Active Docked Mode */
   :host([active]) .search-container {
     z-index: 50;
-    border-radius: var(--_shape-active);
+    border-radius: var(--_shape);
     box-shadow: var(--_elevation-active);
   }
 
-  /* Divider when active */
+  :host([active][has-suggestions]) .search-container {
+    border-radius: var(--_shape-active);
+  }
+
+  /* Divider when active and has suggestions */
   .divider {
     display: none;
     height: 1px;
@@ -194,7 +218,7 @@ var y = m`
     margin: 0 16px;
   }
 
-  :host([active]) .divider {
+  :host([active][has-suggestions]) .divider {
     display: block;
   }
 
@@ -208,7 +232,7 @@ var y = m`
     box-sizing: border-box;
   }
 
-  :host([active]) .suggestions-container {
+  :host([active][has-suggestions]) .suggestions-container {
     display: flex;
   }
 
@@ -347,6 +371,8 @@ var y = m`
       margin: 0;
       outline: none;
       position: relative;
+      overflow: hidden;
+      user-select: none;
       transition: background-color 150ms ease, color 150ms ease;
       -webkit-tap-highlight-color: transparent;
     }
@@ -480,124 +506,155 @@ var y = m`
     max-height: calc(100vh - 57px);
     max-height: calc(100dvh - 57px);
   }
-`, t = class extends p {
-  constructor(...i) {
-    super(...i), 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) => {
-      const o = e.target;
-      this.value = o.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 o = 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;
-        }
-        o > 0 && (e.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1) % o);
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        o > 0 && this.active && (e.preventDefault(), this.highlightedIndex = this.highlightedIndex <= 0 ? o - 1 : this.highlightedIndex - 1);
-        return;
-      }
-      if (e.key === "Enter")
-        if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < o) {
-          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(i) {
-    super.willUpdate(i), i.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value)), i.has("active") && (this.toggleAttribute("active", this.active), this.active || (this.highlightedIndex = -1)), i.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(i, e) {
-    const o = typeof i == "string" ? i : i.label, n = typeof i == "string" ? i : i.value ?? i.label;
-    this.value = n, this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.emitEvent("suggestion-select", {
-      suggestion: i,
-      label: o,
-      value: n,
-      index: e
-    }), this.emitEvent("search", {
-      value: this.value,
-      suggestion: i
-    }), this.autoDeactivateOnSelect && this.close();
-  }
-  renderSuggestionItem(i, e) {
-    const o = typeof i == "string", n = o ? i : i.label, c = o ? void 0 : i.supportingText, h = o ? void 0 : i.trailingSupportingText, b = !o && i.icon ? i.icon : "history", d = this.highlightedIndex === e;
-    return r`
+`, 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.searchIconPosition = "leading", 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.hasLeadingSlotContent = !1, this.hasCustomContent = !1, this.handleLeadingSlotChange = (e) => {
+			let t = e.target.assignedElements({ flatten: !0 });
+			this.hasLeadingSlotContent = t.length > 0, this.requestUpdate();
+		}, this.handleContentSlotChange = (e) => {
+			let t = e.target.assignedElements({ flatten: !0 });
+			this.hasCustomContent = t.length > 0, this.requestUpdate();
+		}, 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.handleLeadingClick = (e) => {
+			e.stopPropagation();
+			let t = this.effectiveLeadingIcon;
+			this.emitEvent("leading-icon-click", { icon: t }) && t === "search" && this.show();
+		}, this.handleTrailingClick = (e) => {
+			e.stopPropagation();
+			let t = this.effectiveTrailingIcon;
+			this.emitEvent("trailing-icon-click", { icon: t }) && (t === "search" || this.effectiveSearchIconPosition === "trailing") && (this.active || this.show(), this.emitEvent("search", { value: this.value }));
+		}, this.handleTrailingTriggerClick = (e) => {
+			e.stopPropagation();
+			let t = this.effectiveTrailingIcon;
+			this.emitEvent("trailing-icon-click", { icon: t }) && (this.show(), (t === "search" || this.effectiveSearchIconPosition === "trailing") && this.emitEvent("search", { value: this.value }));
+		}, this.handleBackClick = (e) => {
+			e.stopPropagation(), this.close();
+		}, this.handleScrimClick = () => {
+			this.close();
+		}, this.handleClearClick = (e) => {
+			e.stopPropagation(), this.clear();
+		};
+	}
+	static {
+		this.styles = [t.styles, l];
+	}
+	get effectiveSearchIconPosition() {
+		return this.searchIconPosition === "trailing" || this.searchIconPosition === "right" || this.trailingIcon === "search" ? "trailing" : "leading";
+	}
+	get effectiveLeadingIcon() {
+		return this.effectiveSearchIconPosition === "trailing" ? this.leadingIcon && this.leadingIcon !== "search" ? this.leadingIcon : "" : this.leadingIcon || "search";
+	}
+	get effectiveTrailingIcon() {
+		return this.effectiveSearchIconPosition === "trailing" ? this.trailingIcon || "search" : this.trailingIcon;
+	}
+	get hasContent() {
+		return !!(this.suggestions && this.suggestions.length > 0 || this.hasCustomContent);
+	}
+	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), this.toggleAttribute("has-suggestions", this.hasContent), this.toggleAttribute("has-no-leading", !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);
+	}
+	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), this.toggleAttribute("has-suggestions", this.hasContent), this.toggleAttribute("has-no-leading", !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);
+	}
+	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(i, 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 ? r`<span class="suggestion-supporting">${c}</span>` : l}
+          <span class="suggestion-label">${a}</span>
+          ${o ? r`<span class="suggestion-supporting">${o}</span>` : i}
         </div>
-        ${h ? r`<span class="suggestion-trailing">${h}</span>` : l}
+        ${s ? r`<span class="suggestion-trailing">${s}</span>` : i}
       </div>
     `;
-  }
-  render() {
-    const i = this.active && this.showBackButton, e = !!this.trailingIcon;
-    return r`
+	}
+	render() {
+		let e = this.fullscreen || this.responsive && typeof window < "u" && window.matchMedia?.("(max-width: 768px)").matches, t = this.active && this.showBackButton && (this.hasContent || e), n = this.effectiveSearchIconPosition, a = this.effectiveLeadingIcon, o = this.effectiveTrailingIcon, s = "search", c = "", l = !1;
+		n === "trailing" ? a ? (s = a, c = o || "search", l = !0) : (s = o || "search", l = !1) : (s = a || "search", o && (c = o, l = !0));
+		let u = t || !!a || this.hasLeadingSlotContent;
+		return r`
       <div
-        class="search-trigger-container ${e ? "has-trailing" : ""}"
+        class="search-trigger-container ${l ? "has-trailing" : ""}"
         role="button"
         tabindex="0"
         aria-label=${this.placeholder || "Search"}
@@ -609,49 +666,67 @@ var y = m`
         <button
           class="trigger-btn"
           type="button"
-          aria-label=${this.placeholder || "Search"}
-          title=${this.placeholder || "Search"}
+          aria-label=${s === "menu" ? "Menu" : this.placeholder || "Search"}
+          title=${s === "menu" ? "Menu" : this.placeholder || "Search"}
           ?disabled=${this.disabled}
-          @click=${this.handleTriggerClick}
+          @click=${(e) => {
+			a && a !== "search" ? this.handleLeadingClick(e) : this.handleTriggerClick(e);
+		}}
         >
-          <md-icon name=${this.leadingIcon || "search"}></md-icon>
+          <md-ripple ?disabled=${this.disabled}></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <md-icon name=${s}></md-icon>
         </button>
 
-        ${e ? r`
+        ${l ? r`
               <div class="trigger-divider" aria-hidden="true"></div>
               <button
                 class="trigger-btn trigger-trailing-btn"
                 type="button"
-                aria-label=${this.trailingIcon}
-                title=${this.trailingIcon}
+                aria-label=${c === "search" ? "Search" : c}
+                title=${c === "search" ? "Search" : c}
                 ?disabled=${this.disabled}
                 @click=${this.handleTrailingTriggerClick}
               >
-                <md-icon name=${this.trailingIcon}></md-icon>
+                <md-ripple ?disabled=${this.disabled}></md-ripple>
+                <md-focus-ring></md-focus-ring>
+                <md-icon name=${c}></md-icon>
               </button>
-            ` : l}
+            ` : i}
       </div>
 
       <div class="scrim" @click=${this.handleScrimClick}></div>
 
       <div class="search-container" role="search">
         <div class="search-bar-header">
-          <span class="leading-slot">
-            <slot name="leading-icon">
-              ${i ? r`
-                    <button
-                      class="icon-btn"
-                      type="button"
-                      aria-label="Back"
-                      @click=${this.handleBackClick}
-                    >
-                      <md-icon name=${this.activeLeadingIcon}></md-icon>
-                    </button>
-                  ` : r`
-                    <span class="icon-btn" style="cursor: default;">
-                      <md-icon name=${this.leadingIcon}></md-icon>
-                    </span>
-                  `}
+          <span class="leading-slot ${u ? "" : "empty"}">
+            <slot name="leading" @slotchange=${this.handleLeadingSlotChange}>
+              <slot name="leading-icon" @slotchange=${this.handleLeadingSlotChange}>
+                ${t ? r`
+                      <button
+                        class="icon-btn back-btn"
+                        type="button"
+                        aria-label="Back"
+                        @click=${this.handleBackClick}
+                      >
+                        <md-ripple ?disabled=${this.disabled}></md-ripple>
+                        <md-focus-ring></md-focus-ring>
+                        <md-icon name=${this.activeLeadingIcon}></md-icon>
+                      </button>
+                    ` : a ? r`
+                          <button
+                            class="icon-btn leading-btn"
+                            type="button"
+                            aria-label=${a === "menu" ? "Menu" : a}
+                            ?disabled=${this.disabled}
+                            @click=${this.handleLeadingClick}
+                          >
+                            <md-ripple ?disabled=${this.disabled}></md-ripple>
+                            <md-focus-ring></md-focus-ring>
+                            <md-icon name=${a}></md-icon>
+                          </button>
+                        ` : i}
+              </slot>
             </slot>
           </span>
 
@@ -681,95 +756,98 @@ var y = m`
                     aria-label="Clear search"
                     @click=${this.handleClearClick}
                   >
+                    <md-ripple ?disabled=${this.disabled}></md-ripple>
+                    <md-focus-ring></md-focus-ring>
                     <md-icon name="close"></md-icon>
                   </button>
-                ` : l}
-
-            <slot name="trailing-icon">
-              ${this.trailingIcon ? r`
-                    <span class="icon-btn" style="cursor: default;">
-                      <md-icon name=${this.trailingIcon}></md-icon>
-                    </span>
-                  ` : l}
+                ` : i}
+
+            <slot name="trailing">
+              <slot name="trailing-icon">
+                ${o ? r`
+                      <button
+                        class="icon-btn trailing-btn"
+                        type="button"
+                        aria-label=${o === "search" ? "Search" : o}
+                        ?disabled=${this.disabled}
+                        @click=${this.handleTrailingClick}
+                      >
+                        <md-ripple ?disabled=${this.disabled}></md-ripple>
+                        <md-focus-ring></md-focus-ring>
+                        <md-icon name=${o}></md-icon>
+                      </button>
+                    ` : i}
+              </slot>
             </slot>
           </span>
         </div>
 
-        <div class="divider"></div>
-
-        <div class="suggestions-container" role="listbox" aria-label="Suggestions">
-          <slot name="suggestions">
-            ${this.suggestions.map((o, n) => this.renderSuggestionItem(o, n))}
-          </slot>
-          <div class="extra-content">
-            <slot></slot>
-          </div>
-        </div>
+        ${this.hasContent ? r`
+              <div class="divider"></div>
+
+              <div class="suggestions-container" role="listbox" aria-label="Suggestions">
+                <slot name="suggestions" @slotchange=${this.handleContentSlotChange}>
+                  ${this.suggestions.map((e, t) => this.renderSuggestionItem(e, t))}
+                </slot>
+                <div class="extra-content">
+                  <slot @slotchange=${this.handleContentSlotChange}></slot>
+                </div>
+              </div>
+            ` : r`
+              <div class="extra-content" style="display: none;">
+                <slot name="suggestions" @slotchange=${this.handleContentSlotChange}></slot>
+                <slot @slotchange=${this.handleContentSlotChange}></slot>
+              </div>
+            `}
       </div>
     `;
-  }
-};
-a([s({
-  type: String,
-  reflect: !0
-})], t.prototype, "size", void 0);
-a([s({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "compact", void 0);
-a([s({ type: String })], t.prototype, "value", void 0);
-a([s({ type: String })], t.prototype, "placeholder", void 0);
-a([s({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "active", void 0);
-a([s({ type: Array })], t.prototype, "suggestions", void 0);
-a([s({
-  type: String,
-  attribute: "leading-icon"
-})], t.prototype, "leadingIcon", void 0);
-a([s({
-  type: String,
-  attribute: "active-leading-icon"
-})], t.prototype, "activeLeadingIcon", void 0);
-a([s({
-  type: String,
-  attribute: "trailing-icon"
-})], t.prototype, "trailingIcon", void 0);
-a([s({
-  type: Boolean,
-  attribute: "show-back-button"
-})], t.prototype, "showBackButton", void 0);
-a([s({
-  type: Boolean,
-  attribute: "show-clear-button"
-})], t.prototype, "showClearButton", void 0);
-a([s({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "responsive", void 0);
-a([s({
-  type: Boolean,
-  attribute: "collapse-on-mobile",
-  reflect: !0
-})], t.prototype, "collapseOnMobile", void 0);
-a([s({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "fullscreen", void 0);
-a([s({
-  type: Boolean,
-  attribute: "auto-deactivate-on-select"
-})], t.prototype, "autoDeactivateOnSelect", void 0);
-a([f()], t.prototype, "highlightedIndex", void 0);
-a([x("input")], t.prototype, "inputElement", void 0);
-t = a([v("md-search-bar")], t);
-var g = class extends t {
+	}
 };
-g = a([v("md-search")], g);
-export {
-  t as n,
-  g as t
-};
-
-//# sourceMappingURL=search-bar-CfN-emMP.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: "search-icon-position",
+	reflect: !0
+})], u.prototype, "searchIconPosition", 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([c()], u.prototype, "hasLeadingSlotContent", void 0), e([s("input")], u.prototype, "inputElement", void 0), e([c()], u.prototype, "hasCustomContent", 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-B4lAXza_.js.map