@signalwire/web-components 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/components/directory.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Directory Component
+ *
+ * A searchable list of addresses from the directory service.
+ * Supports filtering, selection, and pagination.
+ *
+ * @example
+ * ```html
+ * <sw-directory .directory=${directory}></sw-directory>
+ * ```
+ *
+ * @fires sw-address-select - Fired when an address is selected. Detail: `{ address: Address }`
+ * @fires sw-dial - Fired when the call button on an address is clicked. Detail: `{ address: Address, channel: string }`
+ *
+ * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
+ * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover
+ * @cssprop [--sw-color-success=#10b981] - Success/positive color
+ * @cssprop [--sw-color-text=#1f2937] - Primary text color
+ * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color
+ * @cssprop [--sw-color-background=#ffffff] - Component background color
+ * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover
+ * @cssprop [--sw-color-background-active=#e5e7eb] - Background color on active/press
+ * @cssprop [--sw-color-border=#e5e7eb] - Border color
+ * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
+ * @cssprop [--sw-font-size-sm=12px] - Small font size
+ * @cssprop [--sw-font-size-base=14px] - Base font size
+ * @cssprop [--sw-font-size-lg=16px] - Large font size
+ * @cssprop [--sw-space-1=4px] - Smallest spacing unit
+ * @cssprop [--sw-space-2=8px] - Small spacing unit
+ * @cssprop [--sw-space-3=12px] - Medium spacing unit
+ * @cssprop [--sw-space-4=16px] - Large spacing unit
+ * @cssprop [--sw-border-radius=8px] - Border radius for containers and inputs
+ */
+import { LitElement } from 'lit';
+import type { Observable } from 'rxjs';
+/**
+ * Address type from SDK
+ */
+export interface Address {
+    id: string;
+    name: string;
+    displayName?: string;
+    type?: 'room' | 'person';
+    channels?: {
+        audio?: boolean;
+        video?: boolean;
+        messaging?: boolean;
+    };
+}
+/**
+ * Directory interface for component
+ */
+export interface DirectoryService {
+    addresses$: Observable<Address[]>;
+    loading$?: Observable<boolean>;
+    hasMore$?: Observable<boolean>;
+    loadMore?(): Promise<void>;
+}
+export declare class DirectoryComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Directory service with addresses$ observable
+     */
+    directory: DirectoryService | null;
+    /**
+     * Currently selected address
+     */
+    private selectedAddress;
+    /**
+     * Search filter query
+     */
+    private searchQuery;
+    /**
+     * List of addresses from directory
+     */
+    private addresses;
+    /**
+     * Loading state
+     */
+    private loading;
+    /**
+     * Has more addresses to load
+     */
+    private hasMore;
+    /**
+     * RxJS subscriptions for cleanup
+     */
+    private subscriptions;
+    /**
+     * Debounce timer for search
+     */
+    private searchDebounceTimer;
+    /**
+     * IntersectionObserver for infinite scroll
+     */
+    private intersectionObserver;
+    /**
+     * Flag to track if we're auto-loading for search
+     */
+    private isAutoLoadingForSearch;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private subscribeToDirectory;
+    private cleanup;
+    protected firstUpdated(): void;
+    private setupInfiniteScroll;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private checkAutoLoadForSearch;
+    private get filteredAddresses();
+    private handleSearchInput;
+    private handleItemClick;
+    private handleItemDoubleClick;
+    private handleDial;
+    private handleLoadMore;
+    private renderAddressIcon;
+    private renderChannelIcons;
+    private renderLoadingIndicator;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-directory': DirectoryComponent;
+    }
+}
+//# sourceMappingURL=directory.d.ts.map

package/dist/components/directory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory.d.ts","sourceRoot":"","sources":["../../src/components/directory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BAuPX;IAEF;;OAEG;IAEH,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAwB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAc;IAEjC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAiB;IAElC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAuB;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAqC;IAEjE;;OAEG;IAEH,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,OAAO;IAYf,SAAS,CAAC,YAAY;IAItB,OAAO,CAAC,mBAAmB;IAqB3B,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAyB3C,sBAAsB;IAiBpC,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;YAUJ,cAAc;IAM5B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,kBAAkB;IA8B1B,OAAO,CAAC,sBAAsB;IAS9B,MAAM;CA+EP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/components/directory.js

@@ -0,0 +1,503 @@
+import { LitElement as p, html as i, css as u } from "lit";
+import { property as v, state as d, customElement as w } from "lit/decorators.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (e, s, a, r) => {
+  for (var t = r > 1 ? void 0 : r ? m(s, a) : s, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (t = (r ? l(s, a, t) : l(t)) || t);
+  return r && t && b(s, a, t), t;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.directory = null, this.selectedAddress = null, this.searchQuery = "", this.addresses = [], this.loading = !1, this.hasMore = !1, this.subscriptions = [], this.searchDebounceTimer = null, this.intersectionObserver = null, this.isAutoLoadingForSearch = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.subscribeToDirectory();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  subscribeToDirectory() {
+    if (this.directory) {
+      if (this.directory.addresses$) {
+        const e = this.directory.addresses$.subscribe((s) => {
+          this.addresses = s;
+        });
+        this.subscriptions.push(e);
+      }
+      if (this.directory.loading$) {
+        const e = this.directory.loading$.subscribe((s) => {
+          this.loading = s;
+        });
+        this.subscriptions.push(e);
+      }
+      if (this.directory.hasMore$) {
+        const e = this.directory.hasMore$.subscribe((s) => {
+          this.hasMore = s;
+        });
+        this.subscriptions.push(e);
+      }
+      this.directory.loadMore && this.directory.loadMore();
+    }
+  }
+  cleanup() {
+    this.subscriptions.forEach((e) => e.unsubscribe()), this.subscriptions = [], this.searchDebounceTimer && clearTimeout(this.searchDebounceTimer), this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null);
+  }
+  firstUpdated() {
+    this.setupInfiniteScroll();
+  }
+  setupInfiniteScroll() {
+    var s, a;
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".scroll-sentinel");
+    e && (this.intersectionObserver = new IntersectionObserver(
+      (r) => {
+        const t = r[0];
+        t != null && t.isIntersecting && this.hasMore && !this.loading && this.handleLoadMore();
+      },
+      {
+        root: (a = this.shadowRoot) == null ? void 0 : a.querySelector(".list"),
+        rootMargin: "100px",
+        threshold: 0
+      }
+    ), this.intersectionObserver.observe(e));
+  }
+  updated(e) {
+    super.updated(e), e.has("directory") && (this.cleanup(), this.subscribeToDirectory()), this.intersectionObserver || this.setupInfiniteScroll(), (e.has("addresses") || e.has("searchQuery") || e.has("loading")) && this.checkAutoLoadForSearch();
+  }
+  async checkAutoLoadForSearch() {
+    this.searchQuery.trim() && this.filteredAddresses.length === 0 && this.hasMore && !this.loading ? (this.isAutoLoadingForSearch = !0, await this.handleLoadMore()) : (this.filteredAddresses.length > 0 || !this.hasMore) && (this.isAutoLoadingForSearch = !1);
+  }
+  get filteredAddresses() {
+    if (!this.searchQuery.trim())
+      return this.addresses;
+    const e = this.searchQuery.toLowerCase();
+    return this.addresses.filter(
+      (s) => s.name.toLowerCase().includes(e) || s.displayName && s.displayName.toLowerCase().includes(e)
+    );
+  }
+  handleSearchInput(e) {
+    const s = e.target;
+    this.searchDebounceTimer && clearTimeout(this.searchDebounceTimer), this.searchDebounceTimer = window.setTimeout(() => {
+      this.searchQuery = s.value;
+    }, 200);
+  }
+  handleItemClick(e) {
+    this.selectedAddress = e, this.dispatchEvent(
+      new CustomEvent("sw-address-select", {
+        detail: { address: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleItemDoubleClick(e) {
+    this.handleDial(e);
+  }
+  handleDial(e) {
+    this.dispatchEvent(
+      new CustomEvent("sw-dial", {
+        detail: { address: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  async handleLoadMore() {
+    var e;
+    (e = this.directory) != null && e.loadMore && await this.directory.loadMore();
+  }
+  renderAddressIcon(e) {
+    return e.type === "room" ? i`
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"
+          />
+        </svg>
+      ` : i`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path
+          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+        />
+      </svg>
+    `;
+  }
+  renderChannelIcons(e) {
+    const s = e.channels || {};
+    return i`
+      <div class="item-channels">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="${s.audio ? "active" : ""}"
+          title="Audio"
+        >
+          <path
+            d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"
+          />
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="${s.video ? "active" : ""}"
+          title="Video"
+        >
+          <path
+            d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
+          />
+        </svg>
+      </div>
+    `;
+  }
+  renderLoadingIndicator() {
+    return i`
+      <div class="scroll-loading">
+        <div class="spinner"></div>
+        <span>${this.isAutoLoadingForSearch ? "Searching..." : "Loading more..."}</span>
+      </div>
+    `;
+  }
+  render() {
+    const e = this.loading && this.addresses.length === 0, s = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore, a = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;
+    return i`
+      <div class="container" part="container">
+        <div class="search" part="search">
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search addresses..."
+            @input=${this.handleSearchInput}
+            aria-label="Search addresses"
+          />
+        </div>
+
+        <div class="list" part="list" role="listbox">
+          ${e ? i`<div class="loading">Loading...</div>` : a ? this.renderLoadingIndicator() : s ? i`<div class="empty">No addresses found</div>` : i`
+                    ${this.filteredAddresses.map(
+      (r) => {
+        var t, n, l;
+        return i`
+                        <div
+                          class="item ${((t = this.selectedAddress) == null ? void 0 : t.id) === r.id ? "selected" : ""}"
+                          part="item ${((n = this.selectedAddress) == null ? void 0 : n.id) === r.id ? "item-selected" : ""}"
+                          role="option"
+                          aria-selected="${((l = this.selectedAddress) == null ? void 0 : l.id) === r.id}"
+                          @click=${() => this.handleItemClick(r)}
+                          @dblclick=${() => this.handleItemDoubleClick(r)}
+                        >
+                          <div class="item-icon">${this.renderAddressIcon(r)}</div>
+                          <div class="item-content">
+                            <div class="item-name" part="item-name">
+                              ${r.displayName || r.name}
+                            </div>
+                            <div class="item-type" part="item-type">
+                              ${r.type || "address"}
+                            </div>
+                          </div>
+                          ${this.renderChannelIcons(r)}
+                          <button
+                            class="dial-button"
+                            @click=${(h) => {
+          h.stopPropagation(), this.handleDial(r);
+        }}
+                            aria-label="Call ${r.displayName || r.name}"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                            >
+                              <path
+                                d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      `;
+      }
+    )}
+                    <!-- Scroll sentinel for infinite scroll -->
+                    <div class="scroll-sentinel">
+                      ${this.loading && !this.isAutoLoadingForSearch ? this.renderLoadingIndicator() : null}
+                    </div>
+                  `}
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = u`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-primary-hover: #0339c4;
+      --sw-color-success: #10b981;
+      --sw-color-text: #1f2937;
+      --sw-color-text-muted: #6b7280;
+      --sw-color-background: #ffffff;
+      --sw-color-background-hover: #f3f4f6;
+      --sw-color-background-active: #e5e7eb;
+      --sw-color-border: #e5e7eb;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-font-size-sm: 12px;
+      --sw-font-size-base: 14px;
+      --sw-font-size-lg: 16px;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-space-4: 16px;
+      --sw-border-radius: 8px;
+
+      display: block;
+      font-family: var(--sw-font-family);
+    }
+
+    /* Dark mode support */
+    :host([data-theme='dark']) {
+      --sw-color-text: #f9fafb;
+      --sw-color-text-muted: #9ca3af;
+      --sw-color-background: #1f2937;
+      --sw-color-background-hover: #374151;
+      --sw-color-background-active: #4b5563;
+      --sw-color-border: #374151;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host(:not([data-theme='light'])) {
+        --sw-color-text: #f9fafb;
+        --sw-color-text-muted: #9ca3af;
+        --sw-color-background: #1f2937;
+        --sw-color-background-hover: #374151;
+        --sw-color-background-active: #4b5563;
+        --sw-color-border: #374151;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      background: var(--sw-color-background);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius);
+      overflow: hidden;
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-3);
+      border-bottom: 1px solid var(--sw-color-border);
+    }
+
+    .search-input {
+      flex: 1;
+      padding: var(--sw-space-2) var(--sw-space-3);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius);
+      background: var(--sw-color-background);
+      color: var(--sw-color-text);
+      font-family: var(--sw-font-family);
+      font-size: var(--sw-font-size-base);
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+
+    .search-input:focus {
+      border-color: var(--sw-color-primary);
+    }
+
+    .search-input::placeholder {
+      color: var(--sw-color-text-muted);
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-3);
+      padding: var(--sw-space-3) var(--sw-space-4);
+      border-bottom: 1px solid var(--sw-color-border);
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+    }
+
+    .item:last-child {
+      border-bottom: none;
+    }
+
+    .item:hover {
+      background: var(--sw-color-background-hover);
+    }
+
+    .item:active {
+      background: var(--sw-color-background-active);
+    }
+
+    .item.selected {
+      background: var(--sw-color-primary);
+      color: white;
+    }
+
+    .item.selected .item-type,
+    .item.selected .item-channels {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--sw-color-background-hover);
+      color: var(--sw-color-text-muted);
+      flex-shrink: 0;
+    }
+
+    .item.selected .item-icon {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+
+    .item-icon svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .item-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .item-name {
+      font-size: var(--sw-font-size-base);
+      font-weight: 500;
+      color: inherit;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .item-type {
+      font-size: var(--sw-font-size-sm);
+      color: var(--sw-color-text-muted);
+      text-transform: capitalize;
+    }
+
+    .item-channels {
+      display: flex;
+      gap: var(--sw-space-1);
+      color: var(--sw-color-text-muted);
+    }
+
+    .item-channels svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .item-channels .active {
+      color: var(--sw-color-success);
+    }
+
+    .loading,
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--sw-space-4);
+      color: var(--sw-color-text-muted);
+      font-size: var(--sw-font-size-base);
+    }
+
+    .scroll-sentinel {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--sw-space-3);
+      min-height: 1px;
+    }
+
+    .scroll-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-3);
+      color: var(--sw-color-text-muted);
+      font-size: var(--sw-font-size-sm);
+    }
+
+    .spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--sw-color-border);
+      border-top-color: var(--sw-color-primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .dial-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      background: var(--sw-color-success);
+      border: none;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color 0.15s ease;
+    }
+
+    .dial-button:hover {
+      background: #0ea472;
+    }
+
+    .dial-button svg {
+      width: 18px;
+      height: 18px;
+    }
+  `;
+c([
+  v({ type: Object })
+], o.prototype, "directory", 2);
+c([
+  d()
+], o.prototype, "selectedAddress", 2);
+c([
+  d()
+], o.prototype, "searchQuery", 2);
+c([
+  d()
+], o.prototype, "addresses", 2);
+c([
+  d()
+], o.prototype, "loading", 2);
+c([
+  d()
+], o.prototype, "hasMore", 2);
+c([
+  d()
+], o.prototype, "isAutoLoadingForSearch", 2);
+o = c([
+  w("sw-directory")
+], o);
+export {
+  o as DirectoryComponent
+};
+//# sourceMappingURL=directory.js.map