@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/chunk-4COVK727.js

@@ -0,0 +1,204 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/search-bar.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-search-bar",
+  reactName: "SearchBar",
+  attributes: [
+    { name: "placeholder", prop: "placeholder", type: "string" },
+    { name: "debounce-ms", prop: "debounceMs", type: "number" }
+  ],
+  events: [
+    { name: "nymbal:search:selected", prop: "onSearchSelect", detail: "{ product: unknown }" }
+  ],
+  parts: ["input", "results", "loading", "result", "result-name", "result-price"],
+  slots: ["loading"],
+  children: false
+};
+var NO_SEARCH = { query: "", loading: false, results: [] };
+function formatPrice(minor, currency) {
+  return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(minor / 100);
+}
+var NymbalSearchBar = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='input'] {
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        width: 100%;
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.375rem);
+        outline: none;
+        transition: border-color var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='input']:focus {
+        border-color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='results'] {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: var(--nymbal-color-surface, #ffffff);
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-top: none;
+        border-radius: 0 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem);
+        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+        z-index: var(--nymbal-z-dropdown, 100);
+        max-height: 300px;
+        overflow-y: auto;
+      }
+      [part~='result'] {
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+        cursor: pointer;
+        transition: background var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='result']:hover,
+      [part~='result'][aria-selected='true'] {
+        background: var(--nymbal-color-secondary, #f4f4f5);
+      }
+      [part~='result-name'] {
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='result-price'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='loading'] {
+        padding: var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+        color: var(--nymbal-color-text-muted, #71717a);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+      }
+    `
+  ];
+  debounceTimer = null;
+  selectedIndex = -1;
+  stores() {
+    return [this.client.search];
+  }
+  render() {
+    const state = this.readsStores ? this.client.search.getState() : NO_SEARCH;
+    const placeholder = this.getAttribute("placeholder") ?? "Search products...";
+    let results = nothing;
+    if (state.query && document.querySelector("nymbal-search-results") === null) {
+      if (state.loading) {
+        results = html`<div part="results" data-testid="search-results">
+          <div part="loading"><slot name="loading">Searching...</slot></div>
+        </div>`;
+      } else if (state.results.length > 0) {
+        results = html`<div part="results" data-testid="search-results">
+          ${state.results.map(
+          (product, i) => html`
+              <div
+                part="result"
+                class="nymbal-search-result-item"
+                data-testid="search-result-${product.slug}"
+                data-slug=${product.slug}
+                aria-selected=${String(i === this.selectedIndex)}
+                @click=${() => this.select(product)}
+              >
+                <div part="result-name">${product.name}</div>
+                ${product.priceMinor !== null ? html`<div part="result-price">
+                      ${formatPrice(product.priceMinor, product.currency ?? "USD")}
+                    </div>` : nothing}
+              </div>
+            `
+        )}
+        </div>`;
+      }
+    }
+    return html`
+      <input
+        part="input"
+        data-testid="search-input"
+        type="search"
+        placeholder=${placeholder}
+        .value=${state.query}
+        autocomplete="off"
+        role="combobox"
+        aria-expanded=${String(results !== nothing && state.results.length > 0)}
+        aria-haspopup="listbox"
+        @input=${this.handleInput}
+        @keydown=${this.handleKeydown}
+      />
+      ${results}
+    `;
+  }
+  handleInput = (e) => {
+    const query = e.target.value;
+    const debounceMs = Number(this.getAttribute("debounce-ms")) || 300;
+    if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.selectedIndex = -1;
+      if (query.trim()) {
+        void this.client.search.search(query);
+      } else {
+        this.client.search.clearSearch();
+      }
+    }, debounceMs);
+  };
+  handleKeydown = (e) => {
+    const { results } = this.client.search.getState();
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1);
+      this.requestUpdate();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+      this.requestUpdate();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : void 0;
+      if (selected) {
+        this.select(selected);
+      } else {
+        const query = e.target.value.trim();
+        if (query) {
+          window.location.href = `/search?q=${encodeURIComponent(query)}`;
+        }
+      }
+    } else if (e.key === "Escape") {
+      this.client.search.clearSearch();
+      this.selectedIndex = -1;
+    }
+  };
+  select(product) {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:search:selected", {
+        bubbles: true,
+        composed: true,
+        detail: { product, query: product.name }
+      })
+    );
+    this.client.search.clearSearch();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.debounceTimer !== null) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+};
+
+export {
+  NymbalSearchBar
+};
+//# sourceMappingURL=chunk-4COVK727.js.map

package/dist/chunk-4COVK727.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search-bar.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { DenormalisedProduct } from '@nymbalhq/sdk'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-search-bar',\n  reactName: 'SearchBar',\n  attributes: [\n    { name: 'placeholder', prop: 'placeholder', type: 'string' },\n    { name: 'debounce-ms', prop: 'debounceMs', type: 'number' },\n  ],\n  events: [\n    { name: 'nymbal:search:selected', prop: 'onSearchSelect', detail: '{ product: unknown }' },\n  ],\n  parts: ['input', 'results', 'loading', 'result', 'result-name', 'result-price'],\n  slots: ['loading'],\n  children: false,\n}\n\n/** What a search bar shows before any search, and on a server. */\nconst NO_SEARCH = { query: '', loading: false, results: [] as DenormalisedProduct[] }\n\nfunction formatPrice(minor: number, currency: string): string {\n  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(minor / 100)\n}\n\nexport class NymbalSearchBar extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        position: relative;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='input'] {\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        width: 100%;\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.375rem);\n        outline: none;\n        transition: border-color var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='input']:focus {\n        border-color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='results'] {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        background: var(--nymbal-color-surface, #ffffff);\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-top: none;\n        border-radius: 0 0 var(--nymbal-radius-md, 0.375rem) var(--nymbal-radius-md, 0.375rem);\n        box-shadow: var(--nymbal-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));\n        z-index: var(--nymbal-z-dropdown, 100);\n        max-height: 300px;\n        overflow-y: auto;\n      }\n      [part~='result'] {\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n        cursor: pointer;\n        transition: background var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='result']:hover,\n      [part~='result'][aria-selected='true'] {\n        background: var(--nymbal-color-secondary, #f4f4f5);\n      }\n      [part~='result-name'] {\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='result-price'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='loading'] {\n        padding: var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n        color: var(--nymbal-color-text-muted, #71717a);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n    `,\n  ]\n\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null\n  private selectedIndex = -1\n\n  protected override stores() {\n    return [this.client.search]\n  }\n\n  protected override render() {\n    const state = this.readsStores ? this.client.search.getState() : NO_SEARCH\n    const placeholder = this.getAttribute('placeholder') ?? 'Search products...'\n\n    let results: unknown = nothing\n    // A page that shows the search itself (`nymbal-search-results`) is not covered by the same results as suggestions.\n    if (state.query && document.querySelector('nymbal-search-results') === null) {\n      if (state.loading) {\n        results = html`<div part=\"results\" data-testid=\"search-results\">\n          <div part=\"loading\"><slot name=\"loading\">Searching...</slot></div>\n        </div>`\n      } else if (state.results.length > 0) {\n        results = html`<div part=\"results\" data-testid=\"search-results\">\n          ${state.results.map(\n            (product, i) => html`\n              <div\n                part=\"result\"\n                class=\"nymbal-search-result-item\"\n                data-testid=\"search-result-${product.slug}\"\n                data-slug=${product.slug}\n                aria-selected=${String(i === this.selectedIndex)}\n                @click=${() => this.select(product)}\n              >\n                <div part=\"result-name\">${product.name}</div>\n                ${product.priceMinor !== null\n                  ? html`<div part=\"result-price\">\n                      ${formatPrice(product.priceMinor, product.currency ?? 'USD')}\n                    </div>`\n                  : nothing}\n              </div>\n            `,\n          )}\n        </div>`\n      }\n    }\n\n    return html`\n      <input\n        part=\"input\"\n        data-testid=\"search-input\"\n        type=\"search\"\n        placeholder=${placeholder}\n        .value=${state.query}\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-expanded=${String(results !== nothing && state.results.length > 0)}\n        aria-haspopup=\"listbox\"\n        @input=${this.handleInput}\n        @keydown=${this.handleKeydown}\n      />\n      ${results}\n    `\n  }\n\n  private handleInput = (e: Event): void => {\n    const query = (e.target as HTMLInputElement).value\n    const debounceMs = Number(this.getAttribute('debounce-ms')) || 300\n    if (this.debounceTimer !== null) clearTimeout(this.debounceTimer)\n    this.debounceTimer = setTimeout(() => {\n      this.selectedIndex = -1\n      if (query.trim()) {\n        void this.client.search.search(query)\n      } else {\n        this.client.search.clearSearch()\n      }\n    }, debounceMs)\n  }\n\n  private handleKeydown = (e: KeyboardEvent): void => {\n    const { results } = this.client.search.getState()\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1)\n      this.requestUpdate()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this.selectedIndex = Math.max(this.selectedIndex - 1, -1)\n      this.requestUpdate()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : undefined\n      if (selected) {\n        this.select(selected)\n      } else {\n        const query = (e.target as HTMLInputElement).value.trim()\n        if (query) {\n          window.location.href = `/search?q=${encodeURIComponent(query)}`\n        }\n      }\n    } else if (e.key === 'Escape') {\n      this.client.search.clearSearch()\n      this.selectedIndex = -1\n    }\n  }\n\n  private select(product: DenormalisedProduct): void {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:search:selected', {\n        bubbles: true,\n        composed: true,\n        detail: { product, query: product.name },\n      }),\n    )\n    this.client.search.clearSearch()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.debounceTimer !== null) {\n      clearTimeout(this.debounceTimer)\n      this.debounceTimer = null\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-5VWZ2U5K.js

@@ -0,0 +1,149 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalProductCard,
+  cardProductOf
+} from "./chunk-RZVFA3N5.js";
+import {
+  buttonStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/product-grid.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-product-grid",
+  reactName: "ProductGrid",
+  // `products`: the cards a server read. `source="product-list"`: the grid is a listing's, and follows the product-list
+  // store once it settles (a sort, a filter, load more); without it the grid is static. `has-more`: the server's page
+  // has a next one, so its render shows load more exactly when the store will. `lazy`: the grid sits below the fold
+  // (a product page's related grid), so no card is eager and its images never outrank the page's LCP image.
+  attributes: [
+    { name: "products", prop: "products", type: "json" },
+    { name: "source", prop: "source", type: "string" },
+    { name: "has-more", prop: "hasMore", type: "boolean" },
+    { name: "lazy", prop: "lazy", type: "boolean" }
+  ],
+  events: [],
+  parts: ["grid", "empty", "count", "load-more"],
+  slots: ["empty"],
+  children: false
+};
+var EAGER_CARDS = 4;
+var NymbalProductGrid = class extends NymbalElement {
+  static schema = SCHEMA;
+  static uses = [NymbalProductCard];
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='count'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='grid'] {
+        display: grid;
+        gap: var(--nymbal-spacing-md, 1rem);
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 641px) {
+        [part~='grid'] {
+          grid-template-columns: repeat(2, 1fr);
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+        }
+      }
+      @media (min-width: 1025px) {
+        [part~='grid'] {
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+      [part~='empty'] {
+        padding: var(--nymbal-spacing-xl, 2rem) 0;
+        text-align: center;
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      .more {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--nymbal-spacing-xl, 2rem);
+      }
+    `
+  ];
+  get listing() {
+    return this.source === "product-list";
+  }
+  stores() {
+    return this.listing ? [this.client.productList] : [];
+  }
+  storeSettled() {
+    if (this.client.productList.getState().loading) return;
+    this.products = void 0;
+    this.hasMore = void 0;
+  }
+  /** The server's cards while they stand, else (a listing with a client) the product-list store's. */
+  shown() {
+    const given = parsedJson(this, "products", this.products);
+    if (given === void 0 && this.listing && this.readsStores) {
+      const state = this.client.productList.getState();
+      return {
+        products: state.products,
+        hasMore: state.pagination.hasMore,
+        loading: state.loading
+      };
+    }
+    return {
+      products: Array.isArray(given) ? given : [],
+      hasMore: this.hasMore === true,
+      loading: false
+    };
+  }
+  render() {
+    const { products, hasMore, loading } = this.shown();
+    const count = products.length;
+    return html`
+      ${this.listing ? html`<p part="count">${count} product${count === 1 ? "" : "s"}</p>` : nothing}
+      ${count === 0 ? loading ? nothing : html`<div part="empty"><slot name="empty">No products found.</slot></div>` : html`
+            <div part="grid">
+              ${products.map(
+      (p, i) => html`<nymbal-product-card
+                    product=${JSON.stringify(
+        cardProductOf(p)
+      )}
+                    ?eager=${this.lazy !== true && i < EAGER_CARDS}
+                  ></nymbal-product-card>`
+    )}
+            </div>
+          `}
+      ${this.listing && hasMore ? html`
+            <div class="more">
+              <button
+                type="button"
+                part="load-more"
+                class="btn btn-secondary"
+                data-testid="load-more"
+                ?disabled=${loading}
+                @click=${() => void this.client.productList.loadMore()}
+              >
+                Load more
+              </button>
+            </div>
+          ` : nothing}
+    `;
+  }
+};
+
+export {
+  NymbalProductGrid
+};
+//# sourceMappingURL=chunk-5VWZ2U5K.js.map

package/dist/chunk-5VWZ2U5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product-grid.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\nimport { buttonStyles } from '../view-styles.js'\nimport { cardProductOf, NymbalProductCard } from './product-card.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-product-grid',\n  reactName: 'ProductGrid',\n  // `products`: the cards a server read. `source=\"product-list\"`: the grid is a listing's, and follows the product-list\n  // store once it settles (a sort, a filter, load more); without it the grid is static. `has-more`: the server's page\n  // has a next one, so its render shows load more exactly when the store will. `lazy`: the grid sits below the fold\n  // (a product page's related grid), so no card is eager and its images never outrank the page's LCP image.\n  attributes: [\n    { name: 'products', prop: 'products', type: 'json' },\n    { name: 'source', prop: 'source', type: 'string' },\n    { name: 'has-more', prop: 'hasMore', type: 'boolean' },\n    { name: 'lazy', prop: 'lazy', type: 'boolean' },\n  ],\n  events: [],\n  parts: ['grid', 'empty', 'count', 'load-more'],\n  slots: ['empty'],\n  children: false,\n}\n\n/** The first row of a wide grid: those cards' images are the page's likely LCP. */\nconst EAGER_CARDS = 4\n\ninterface Shown {\n  products: unknown[]\n  hasMore: boolean\n  loading: boolean\n}\n\n/** A grid of `nymbal-product-card`s, a listing's (following the product-list store) or a static one. */\nexport class NymbalProductGrid extends NymbalElement {\n  static override schema = SCHEMA\n  static uses = [NymbalProductCard]\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='count'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='grid'] {\n        display: grid;\n        gap: var(--nymbal-spacing-md, 1rem);\n        grid-template-columns: 1fr;\n      }\n      @media (min-width: 641px) {\n        [part~='grid'] {\n          grid-template-columns: repeat(2, 1fr);\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n        }\n      }\n      @media (min-width: 1025px) {\n        [part~='grid'] {\n          grid-template-columns: repeat(4, 1fr);\n        }\n      }\n      [part~='empty'] {\n        padding: var(--nymbal-spacing-xl, 2rem) 0;\n        text-align: center;\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      .more {\n        display: flex;\n        justify-content: center;\n        margin-top: var(--nymbal-spacing-xl, 2rem);\n      }\n    `,\n  ]\n\n  declare products: unknown\n  declare source: string | undefined\n  declare hasMore: boolean | undefined\n  declare lazy: boolean | undefined\n\n  private get listing(): boolean {\n    return this.source === 'product-list'\n  }\n\n  protected override stores() {\n    return this.listing ? [this.client.productList] : []\n  }\n\n  protected override storeSettled(): void {\n    // A store already settled when this grid connected may be loading this page's listing now; its last answer was\n    // another listing's (a soft navigation), so the server's cards stand until this load settles.\n    if (this.client.productList.getState().loading) return\n    this.products = undefined\n    this.hasMore = undefined\n  }\n\n  /** The server's cards while they stand, else (a listing with a client) the product-list store's. */\n  private shown(): Shown {\n    const given = parsedJson<unknown[]>(this, 'products', this.products)\n    if (given === undefined && this.listing && this.readsStores) {\n      const state = this.client.productList.getState()\n      return {\n        products: state.products,\n        hasMore: state.pagination.hasMore,\n        loading: state.loading,\n      }\n    }\n    return {\n      products: Array.isArray(given) ? given : [],\n      hasMore: this.hasMore === true,\n      loading: false,\n    }\n  }\n\n  protected override render() {\n    const { products, hasMore, loading } = this.shown()\n    const count = products.length\n    return html`\n      ${this.listing\n        ? html`<p part=\"count\">${count} product${count === 1 ? '' : 's'}</p>`\n        : nothing}\n      ${count === 0\n        ? loading\n          ? nothing\n          : html`<div part=\"empty\"><slot name=\"empty\">No products found.</slot></div>`\n        : html`\n            <div part=\"grid\">\n              ${products.map(\n                (p, i) =>\n                  html`<nymbal-product-card\n                    product=${JSON.stringify(\n                      cardProductOf(p as Parameters<typeof cardProductOf>[0]),\n                    )}\n                    ?eager=${this.lazy !== true && i < EAGER_CARDS}\n                  ></nymbal-product-card>`,\n              )}\n            </div>\n          `}\n      ${this.listing && hasMore\n        ? html`\n            <div class=\"more\">\n              <button\n                type=\"button\"\n                part=\"load-more\"\n                class=\"btn btn-secondary\"\n                data-testid=\"load-more\"\n                ?disabled=${loading}\n                @click=${() => void this.client.productList.loadMore()}\n              >\n                Load more\n              </button>\n            </div>\n          `\n        : nothing}\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAWnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY;AAAA,IACV,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO;AAAA,IACnD,EAAE,MAAM,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IACjD,EAAE,MAAM,YAAY,MAAM,WAAW,MAAM,UAAU;AAAA,IACrD,EAAE,MAAM,QAAQ,MAAM,QAAQ,MAAM,UAAU;AAAA,EAChD;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,QAAQ,SAAS,SAAS,WAAW;AAAA,EAC7C,OAAO,CAAC,OAAO;AAAA,EACf,UAAU;AACZ;AAGA,IAAM,cAAc;AASb,IAAM,oBAAN,cAAgC,cAAc;AAAA,EACnD,OAAgB,SAAS;AAAA,EACzB,OAAO,OAAO,CAAC,iBAAiB;AAAA,EAChC,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsCF;AAAA,EAOA,IAAY,UAAmB;AAC7B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEmB,SAAS;AAC1B,WAAO,KAAK,UAAU,CAAC,KAAK,OAAO,WAAW,IAAI,CAAC;AAAA,EACrD;AAAA,EAEmB,eAAqB;AAGtC,QAAI,KAAK,OAAO,YAAY,SAAS,EAAE,QAAS;AAChD,SAAK,WAAW;AAChB,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA,EAGQ,QAAe;AACrB,UAAM,QAAQ,WAAsB,MAAM,YAAY,KAAK,QAAQ;AACnE,QAAI,UAAU,UAAa,KAAK,WAAW,KAAK,aAAa;AAC3D,YAAM,QAAQ,KAAK,OAAO,YAAY,SAAS;AAC/C,aAAO;AAAA,QACL,UAAU,MAAM;AAAA,QAChB,SAAS,MAAM,WAAW;AAAA,QAC1B,SAAS,MAAM;AAAA,MACjB;AAAA,IACF;AACA,WAAO;AAAA,MACL,UAAU,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,MAC1C,SAAS,KAAK,YAAY;AAAA,MAC1B,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEmB,SAAS;AAC1B,UAAM,EAAE,UAAU,SAAS,QAAQ,IAAI,KAAK,MAAM;AAClD,UAAM,QAAQ,SAAS;AACvB,WAAO;AAAA,QACH,KAAK,UACH,uBAAuB,KAAK,WAAW,UAAU,IAAI,KAAK,GAAG,SAC7D,OAAO;AAAA,QACT,UAAU,IACR,UACE,UACA,6EACF;AAAA;AAAA,gBAEM,SAAS;AAAA,MACT,CAAC,GAAG,MACF;AAAA,8BACY,KAAK;AAAA,QACb,cAAc,CAAwC;AAAA,MACxD,CAAC;AAAA,6BACQ,KAAK,SAAS,QAAQ,IAAI,WAAW;AAAA;AAAA,IAEpD,CAAC;AAAA;AAAA,WAEJ;AAAA,QACH,KAAK,WAAW,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOkB,OAAO;AAAA,yBACV,MAAM,KAAK,KAAK,OAAO,YAAY,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,cAM5D,OAAO;AAAA;AAAA,EAEf;AACF;","names":[]}