@francofantomius/material-components 0.1.0 → 1.0.1

package/dist/chunks/search-bar-TXnqJ-gd.js

@@ -0,0 +1,698 @@
+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 v, property as a, query as x, state as f } from "lit/decorators.js";
+var y = m`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    max-width: var(--md-search-bar-max-width, 100%);
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    vertical-align: middle;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .scrim {
+    display: none;
+  }
+
+  /* Scrim when active in docked mode to catch outside clicks */
+  :host([active]) .scrim {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 40;
+    background: transparent;
+  }
+
+  .search-container {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    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));
+    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);
+  }
+
+  .search-bar-header {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    height: 56px;
+    padding: 0 8px 0 16px;
+    box-sizing: border-box;
+    gap: 8px;
+  }
+
+  .leading-slot, .trailing-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+    position: relative;
+    transition: background-color 150ms ease;
+  }
+
+  .icon-btn:hover {
+    background-color: rgba(73, 69, 79, 0.08);
+  }
+
+  .icon-btn:focus-visible {
+    background-color: rgba(73, 69, 79, 0.12);
+  }
+
+  .input-wrapper {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    position: relative;
+  }
+
+  input {
+    width: 100%;
+    border: none;
+    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);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    padding: 0 4px;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  input::placeholder {
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    opacity: 0.8;
+  }
+
+  /* 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));
+  }
+
+  /* Divider when active */
+  .divider {
+    display: none;
+    height: 1px;
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    margin: 0 16px;
+  }
+
+  :host([active]) .divider {
+    display: block;
+  }
+
+  /* Suggestions / Content Container */
+  .suggestions-container {
+    display: none;
+    flex-direction: column;
+    max-height: 360px;
+    overflow-y: auto;
+    padding: 8px 0;
+    box-sizing: border-box;
+  }
+
+  :host([active]) .suggestions-container {
+    display: flex;
+  }
+
+  .suggestion-item {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 16px;
+    gap: 16px;
+    box-sizing: border-box;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    transition: background-color 150ms ease;
+  }
+
+  .suggestion-item:hover,
+  .suggestion-item.highlighted {
+    background-color: rgba(73, 69, 79, 0.08);
+  }
+
+  .suggestion-item.selected {
+    background-color: rgba(73, 69, 79, 0.12);
+  }
+
+  .suggestion-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    flex-shrink: 0;
+  }
+
+  .suggestion-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .suggestion-label {
+    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .suggestion-supporting {
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 2px;
+  }
+
+  .suggestion-trailing {
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    flex-shrink: 0;
+  }
+
+  .search-trigger-container {
+    display: none;
+  }
+
+  /* Responsive Fullscreen / Mobile Collapsed Mode */
+  @media (max-width: 768px) {
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])),
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) {
+      display: inline-flex;
+      width: auto;
+      max-width: none;
+      vertical-align: middle;
+    }
+
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container,
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+      border-radius: 50%;
+      box-shadow: none;
+      cursor: pointer;
+      user-select: none;
+      outline: none;
+      transition: background-color 200ms ease, box-shadow 200ms ease;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :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;
+      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));
+    }
+
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container.has-trailing:hover,
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container.has-trailing:hover {
+      box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+    }
+
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container:focus-visible,
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .search-trigger-container:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750A4);
+      outline-offset: 2px;
+    }
+
+    .trigger-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      min-height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant, #49454F);
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      position: relative;
+      transition: background-color 150ms ease, color 150ms ease;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .trigger-btn:hover {
+      background-color: rgba(73, 69, 79, 0.08);
+    }
+
+    .trigger-btn:focus-visible {
+      background-color: rgba(73, 69, 79, 0.12);
+    }
+
+    .trigger-divider {
+      width: 1px;
+      height: 22px;
+      background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+      margin: 0 2px;
+      flex-shrink: 0;
+    }
+
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .search-container,
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .search-container {
+      display: none;
+    }
+
+    :host([responsive]:not([active]):not([collapse-on-mobile="false"])) .scrim,
+    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile="false"])) .scrim {
+      display: none;
+    }
+
+    :host([responsive][active]),
+    :host([collapse-on-mobile][active]) {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 100vh;
+      height: 100dvh;
+      max-width: 100vw;
+      margin: 0;
+      padding: 0;
+      z-index: 99999;
+    }
+
+    :host([responsive][active]) .search-trigger-container,
+    :host([collapse-on-mobile][active]) .search-trigger-container {
+      display: none;
+    }
+
+    :host([responsive][active]) .scrim,
+    :host([collapse-on-mobile][active]) .scrim {
+      display: none;
+    }
+
+    :host([responsive][active]) .search-container,
+    :host([collapse-on-mobile][active]) .search-container {
+      display: flex;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 100vh;
+      height: 100dvh;
+      max-width: 100vw;
+      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));
+    }
+
+    :host([responsive][active]) .suggestions-container,
+    :host([collapse-on-mobile][active]) .suggestions-container {
+      flex: 1;
+      max-height: calc(100vh - 57px);
+      max-height: calc(100dvh - 57px);
+    }
+  }
+
+  /* Forced Fullscreen attribute */
+  :host([fullscreen][active]) {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 100vw;
+    z-index: 99999;
+  }
+
+  :host([fullscreen][active]) .search-trigger-container {
+    display: none;
+  }
+
+  :host([fullscreen][active]) .scrim {
+    display: none;
+  }
+
+  :host([fullscreen][active]) .search-container {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 100vw;
+    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));
+  }
+
+  :host([fullscreen][active]) .suggestions-container {
+    flex: 1;
+    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`
+      <div
+        class="suggestion-item ${d ? "highlighted" : ""}"
+        role="option"
+        aria-selected=${d ? "true" : "false"}
+        @click=${() => this.selectSuggestion(t, e)}
+      >
+        <span class="suggestion-icon">
+          <md-icon name=${b}></md-icon>
+        </span>
+        <div class="suggestion-text">
+          <span class="suggestion-label">${n}</span>
+          ${c ? l`<span class="suggestion-supporting">${c}</span>` : r}
+        </div>
+        ${h ? l`<span class="suggestion-trailing">${h}</span>` : r}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.active && this.showBackButton, e = !!this.trailingIcon;
+    return l`
+      <div
+        class="search-trigger-container ${e ? "has-trailing" : ""}"
+        role="button"
+        tabindex="0"
+        aria-label=${this.placeholder || "Search"}
+        title=${this.placeholder || "Search"}
+        ?disabled=${this.disabled}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+      >
+        <button
+          class="trigger-btn"
+          type="button"
+          aria-label=${this.placeholder || "Search"}
+          title=${this.placeholder || "Search"}
+          ?disabled=${this.disabled}
+          @click=${this.handleTriggerClick}
+        >
+          <md-icon name=${this.leadingIcon || "search"}></md-icon>
+        </button>
+
+        ${e ? l`
+              <div class="trigger-divider" aria-hidden="true"></div>
+              <button
+                class="trigger-btn trigger-trailing-btn"
+                type="button"
+                aria-label=${this.trailingIcon}
+                title=${this.trailingIcon}
+                ?disabled=${this.disabled}
+                @click=${this.handleTrailingTriggerClick}
+              >
+                <md-icon name=${this.trailingIcon}></md-icon>
+              </button>
+            ` : r}
+      </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">
+              ${t ? l`
+                    <button
+                      class="icon-btn"
+                      type="button"
+                      aria-label="Back"
+                      @click=${this.handleBackClick}
+                    >
+                      <md-icon name=${this.activeLeadingIcon}></md-icon>
+                    </button>
+                  ` : l`
+                    <span class="icon-btn" style="cursor: default;">
+                      <md-icon name=${this.leadingIcon}></md-icon>
+                    </span>
+                  `}
+            </slot>
+          </span>
+
+          <div class="input-wrapper">
+            <input
+              type="search"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded=${this.active ? "true" : "false"}
+              aria-label=${this.placeholder}
+              placeholder=${this.placeholder}
+              .value=${this.value}
+              ?disabled=${this.disabled}
+              @input=${this.handleInput}
+              @change=${this.handleChange}
+              @keydown=${this.handleKeyDown}
+              @focus=${this.handleFocus}
+              @click=${this.handleFocus}
+            />
+          </div>
+
+          <span class="trailing-slot">
+            ${this.showClearButton && this.value ? l`
+                  <button
+                    class="icon-btn clear-btn"
+                    type="button"
+                    aria-label="Clear search"
+                    @click=${this.handleClearClick}
+                  >
+                    <md-icon name="close"></md-icon>
+                  </button>
+                ` : r}
+
+            <slot name="trailing-icon">
+              ${this.trailingIcon ? l`
+                    <span class="icon-btn" style="cursor: default;">
+                      <md-icon name=${this.trailingIcon}></md-icon>
+                    </span>
+                  ` : r}
+            </slot>
+          </span>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="suggestions-container" role="listbox" aria-label="Suggestions">
+          <slot name="suggestions">
+            ${this.suggestions.map((s, n) => this.renderSuggestionItem(s, n))}
+          </slot>
+          <div class="extra-content">
+            <slot></slot>
+          </div>
+        </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([v("md-search-bar")], i);
+var g = class extends i {
+};
+g = o([v("md-search")], g);
+export {
+  i as n,
+  g as t
+};
+
+//# sourceMappingURL=search-bar-TXnqJ-gd.js.map