@exmg/exm-search 1.0.0 → 1.0.2

package/index.d.ts

@@ -1,3 +1,3 @@
-export { ExmgSearch } from './src/exm-search.js';
-export { ExmgSearchBase } from './src/exm-search-base.js';
+export { ExmSearch } from './src/exm-search.js';
+export { ExmSearchBase } from './src/exm-search-base.js';
 export { style as exmgSearchStyles } from './src/styles/exm-search-css.js';

package/index.js

@@ -1,4 +1,4 @@
-export { ExmgSearch } from './src/exm-search.js';
-export { ExmgSearchBase } from './src/exm-search-base.js';
+export { ExmSearch } from './src/exm-search.js';
+export { ExmSearchBase } from './src/exm-search-base.js';
 export { style as exmgSearchStyles } from './src/styles/exm-search-css.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-search",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+  "gitHead": "313ba6df520ba0a4f3ac614c1c3f8df970291b19"
 }

package/src/exm-search-base.d.ts

@@ -1,21 +1,25 @@
 import { ExmgElement } from '@exmg/lit-base';
+import { PropertyValues } from 'lit';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/focus/md-focus-ring.js';
-export declare class ExmgSearchBase extends ExmgElement {
+export declare class ExmSearchBase extends ExmgElement {
     bubbles: boolean;
     _hasFocus: boolean;
     filterValue?: string | null;
     placeHolder: string;
     search?: HTMLInputElement;
+    detectOutsideBind?: (e: Event) => void;
     constructor();
     protected fire<T>(eventName: string, detail?: T, bubbles?: boolean): void;
     focus(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    detectOutsideClick(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
     _getValue(): string;
     _notifyChange(): void;
-    _handleClear(e: CustomEvent): void;
+    _handleClear(e: Event): void;
     _handleKeyUp(e: KeyboardEvent): void;
-    _handleInputBlur(): void;
     updated(changedProperties: Map<string, any>): void;
 }

package/src/exm-search-base.js

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/focus/md-focus-ring.js';
-export class ExmgSearchBase extends ExmgElement {
+export class ExmSearchBase extends ExmgElement {
     constructor() {
         super();
         this.bubbles = false;
@@ -15,10 +15,6 @@ export class ExmgSearchBase extends ExmgElement {
         // Set default tabindex to 0
         const tabindex = this.getAttribute('tabindex');
         this.setAttribute('tabindex', tabindex || '0');
-        // Add focus event listener to focus input
-        this.addEventListener('focus', () => {
-            this.focus();
-        });
     }
     fire(eventName, detail, bubbles) {
         this.dispatchEvent(new CustomEvent(eventName, {
@@ -30,13 +26,33 @@ export class ExmgSearchBase extends ExmgElement {
     focus() {
         this._hasFocus = true;
     }
+    firstUpdated(_changedProperties) {
+        this.detectOutsideBind = this.detectOutsideClick.bind(this);
+        document.addEventListener('click', this.detectOutsideBind);
+    }
+    disconnectedCallback() {
+        this.detectOutsideBind && document.removeEventListener('click', this.detectOutsideBind);
+        super.disconnectedCallback();
+    }
+    detectOutsideClick(e) {
+        const path = e.composedPath();
+        if (path.length > 0) {
+            // @ts-ignore
+            const container = path.find((el) => el.id === 'clickbox');
+            // const container = actualTarget.closest('#clickbox');
+            if (!container) {
+                // Clicked outside the box
+                this._hasFocus = false;
+            }
+        }
+    }
     render() {
         const classMapValues = {
             search: true,
             hasFocus: this._hasFocus,
         };
         return html `
-      <div class=${classMap(classMapValues)}>
+      <div id="clickbox" class=${classMap(classMapValues)}>
         <div class="mode-input">
           <md-focus-ring for="searchInput" inward></md-focus-ring>
           <md-icon class="search">search</md-icon>
@@ -46,7 +62,6 @@ export class ExmgSearchBase extends ExmgElement {
             value=${this.filterValue ? this.filterValue : ''}
             onfocus="let value = this.value; this.value = null; this.value = value"
             @keyup=${this._handleKeyUp}
-            @blur=${this._handleInputBlur}
           />
           ${this.filterValue
             ? html `
@@ -54,7 +69,7 @@ export class ExmgSearchBase extends ExmgElement {
               `
             : nothing}
         </div>
-        <div class="mode-default" @click=${() => (this._hasFocus = true)}>
+        <div class="mode-default" @click=${() => this.focus()}>
           <md-icon class="search">search</md-icon>
           <span class="interactive-content">${this._getValue()}</span>
           ${this.filterValue
@@ -73,12 +88,15 @@ export class ExmgSearchBase extends ExmgElement {
         this.fire('search-value-change', { value: this.filterValue }, this.bubbles);
     }
     _handleClear(e) {
+        var _a;
+        e.stopPropagation();
         e.preventDefault();
         this.filterValue = null;
         if (this.search) {
             this.search.value = '';
         }
         this._notifyChange();
+        (_a = this.search) === null || _a === void 0 ? void 0 : _a.focus();
     }
     _handleKeyUp(e) {
         const input = e.target;
@@ -90,9 +108,6 @@ export class ExmgSearchBase extends ExmgElement {
             this._hasFocus = false;
         }
     }
-    _handleInputBlur() {
-        this._hasFocus = false;
-    }
     updated(changedProperties) {
         if (changedProperties.has('_hasFocus')) {
             // after _hasFocus changed to true, focus the input
@@ -104,14 +119,14 @@ export class ExmgSearchBase extends ExmgElement {
 }
 __decorate([
     state()
-], ExmgSearchBase.prototype, "_hasFocus", void 0);
+], ExmSearchBase.prototype, "_hasFocus", void 0);
 __decorate([
     property({ type: String })
-], ExmgSearchBase.prototype, "filterValue", void 0);
+], ExmSearchBase.prototype, "filterValue", void 0);
 __decorate([
     property({ type: String })
-], ExmgSearchBase.prototype, "placeHolder", void 0);
+], ExmSearchBase.prototype, "placeHolder", void 0);
 __decorate([
     query('#searchInput')
-], ExmgSearchBase.prototype, "search", void 0);
+], ExmSearchBase.prototype, "search", void 0);
 //# sourceMappingURL=exm-search-base.js.map

package/src/exm-search.d.ts

@@ -1,10 +1,10 @@
 import '@material/web/progress/circular-progress.js';
-import { ExmgSearchBase } from './exm-search-base.js';
-export declare class ExmgSearch extends ExmgSearchBase {
+import { ExmSearchBase } from './exm-search-base.js';
+export declare class ExmSearch extends ExmSearchBase {
     static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'exm-search': ExmgSearch;
+        'exm-search': ExmSearch;
     }
 }

package/src/exm-search.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators/custom-element.js';
 import '@material/web/progress/circular-progress.js';
-import { ExmgSearchBase } from './exm-search-base.js';
+import { ExmSearchBase } from './exm-search-base.js';
 import { style } from './styles/exm-search-css.js';
-let ExmgSearch = class ExmgSearch extends ExmgSearchBase {
+let ExmSearch = class ExmSearch extends ExmSearchBase {
 };
-ExmgSearch.styles = [style];
-ExmgSearch = __decorate([
+ExmSearch.styles = [style];
+ExmSearch = __decorate([
     customElement('exm-search')
-], ExmgSearch);
-export { ExmgSearch };
+], ExmSearch);
+export { ExmSearch };
 //# sourceMappingURL=exm-search.js.map