@exmg/exm-search 0.0.2-alpha.0

package/README.md

@@ -0,0 +1,60 @@
+# `<exm-search>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-search.svg)](https://www.npmjs.com/package/@exmg/exm-search)
+
+# exm-search
+
+Exmg search provides an search input in material 3 style
+
+## Installation
+
+```sh
+npm install @exmg/exm-search
+```
+
+## Example Usage
+
+```html
+<exm-search placeHolder="Filter table.." @search-value-change="${() => console.log('update')}"></exm-search>
+```
+
+## API
+
+### Properties/Attributes
+
+| Name          | Type      | Default  | Description                                     |
+| ------------- | --------- | -------- | ----------------------------------------------- |
+| `bubbles`     | `boolean` | _false_  | Whether or not the change events need to bubble |
+| `placeHolder` | `string`  | `Search` | Default value for placeholder                   |
+
+## Styles
+
+| Custom property                       | Description            | Default                                      |
+| ------------------------------------- | ---------------------- | -------------------------------------------- |
+| `--exm-search-outline-color`          | outline color          | `--md-outlined-field-hover-outline-width`;   |
+| `--exm-search-outline-width`          | outline width          | `1px`;                                       |
+| `--exm-search-container-shape`        | container shape        | `4px`;                                       |
+| `--exm-search-focus-input-text-color` | focus input text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-focus-label-text-color` | focus label text color | `--md-sys-color-primary`;                    |
+| `--exm-search-focus-icon-color`       | focus icon color       | `--md-sys-color-on-surface-variant`;         |
+| `--exm-search-focus-outline-color`    | focus outline color    | `--md-sys-color-primary`;                    |
+| `--exm-search-focus-outline-width`    | focus outline width    | `1px`;                                       |
+| `--exm-search-hover-input-text-color` | hover input text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-hover-label-text-color` | hover label text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-hover-outline-color`    | hover outline color    | `--md-sys-color-on-surface`                  |
+| `--exm-search-input-text-color`       | input text color       | `--md-sys-color-on-surface`;                 |
+| `--exm-search-input-text-font`        | input text font        | `--md-sys-typescale-body-large-font`;        |
+| `--exm-search-input-text-line-height` | input text line height | `--md-sys-typescale-body-large-line-height`; |
+| `--exm-search-input-text-size`        | input text size        | `--md-sys-typescale-body-large-size`;        |
+| `--exm-search-input-text-weight`      | input text weight      | `--md-sys-typescale-body-large-weight`;      |
+| `--exm-search-label-text-color`       | label text color       | `md-sys-color-on-surface-variant`;           |
+| `--exm-search-label-text-font`        | label text font        | `--md-sys-typescale-body-large-font`;        |
+| `--exm-search-label-text-line-height` | label line height      | `--md-sys-typescale-body-large-line-height`; |
+| `--exm-search-label-text-size`        | label text size        | `--md-sys-typescale-body-large-size`;        |
+| `--exm-search-label-text-weight`      | label weight           | `--md-sys-typescale-body-large-weight`;      |
+| `--exm-search-icon-color`             | icon color             | `--md-sys-color-on-surface-variant`;         |
+| `--exm-search-icon-size`              | icon size              | `24px`;                                      |
+| `--exm-search-outline-color`          | outline color          | `--md-sys-color-outline`;                    |
+| `--exm-search-outline-width`          | outline color width    | `1px`;                                       |
+
+## Additional references
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-search)

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

@@ -0,0 +1,22 @@
+import { ExmgElement } from '@exmg/lit-base';
+import { PropertyValues } from 'lit';
+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: Event): void;
+    _handleKeyUp(e: KeyboardEvent): void;
+    updated(changedProperties: Map<string, any>): void;
+}

package/dist/exm-search-base.js

@@ -0,0 +1,129 @@
+import { __decorate } from "tslib";
+import { ExmgElement } from '@exmg/lit-base';
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+export class ExmSearchBase extends ExmgElement {
+    constructor() {
+        super();
+        this.bubbles = false;
+        this._hasFocus = true;
+        this.placeHolder = 'Search';
+        // Set default tabindex to 0
+        const tabindex = this.getAttribute('tabindex');
+        this.setAttribute('tabindex', tabindex || '0');
+    }
+    fire(eventName, detail, bubbles) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: bubbles || this.bubbles,
+            composed: true,
+            detail,
+        }));
+    }
+    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 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>
+          <input
+            id="searchInput"
+            placeholder=${this.placeHolder}
+            value=${this.filterValue ? this.filterValue : ''}
+            onfocus="let value = this.value; this.value = null; this.value = value"
+            @keyup=${this._handleKeyUp}
+          />
+          ${this.filterValue
+            ? html `
+                <md-icon-button class="clear" @click=${this._handleClear}><md-icon>clear</md-icon></md-icon-button>
+              `
+            : nothing}
+        </div>
+        <div class="mode-default" @click=${() => this.focus()}>
+          <md-icon class="search">search</md-icon>
+          <span class="interactive-content">${this._getValue()}</span>
+          ${this.filterValue
+            ? html `
+                <md-icon-button class="clear" @click=${this._handleClear}><md-icon>clear</md-icon></md-icon-button>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+    _getValue() {
+        return this.filterValue || this.placeHolder;
+    }
+    _notifyChange() {
+        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;
+        if (this.filterValue !== input.value) {
+            this.filterValue = input.value;
+            this._notifyChange();
+        }
+        if (e.key === 'Escape') {
+            this._hasFocus = false;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_hasFocus')) {
+            // after _hasFocus changed to true, focus the input
+            if (this._hasFocus) {
+                this.shadowRoot.querySelector('#searchInput').focus();
+            }
+        }
+    }
+}
+__decorate([
+    state()
+], ExmSearchBase.prototype, "_hasFocus", void 0);
+__decorate([
+    property({ type: String })
+], ExmSearchBase.prototype, "filterValue", void 0);
+__decorate([
+    property({ type: String })
+], ExmSearchBase.prototype, "placeHolder", void 0);
+__decorate([
+    query('#searchInput')
+], ExmSearchBase.prototype, "search", void 0);
+//# sourceMappingURL=exm-search-base.js.map

package/dist/exm-search.d.ts

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

package/dist/exm-search.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/styles/exm-search-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-search-css.js

@@ -0,0 +1,178 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_outline-width: var(--exm-search-outline-width, 1px);
+    --_outline-color: var(--exm-search-outline-color, var(--md-outlined-field-hover-outline-width, 1px));
+    --_container-shape: var(--exm-search-container-shape, 4px);
+    --_focus-input-text-color: var(--exm-search-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_focus-label-text-color: var(--exm-search-focus-label-text-color, var(--md-sys-color-primary, #6750a4));
+    --_focus-icon-color: var(--exm-search-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+    --_focus-outline-color: var(--exm-search-focus-outline-color, var(--md-sys-color-primary, #6750a4));
+    --_focus-outline-width: var(--exm-search-focus-outline-width, 1px);
+    --_hover-input-text-color: var(--exm-search-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_hover-label-text-color: var(--exm-search-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_hover-icon-color: var(--exm-search-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+    --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_input-text-color: var(--exm-search-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+    --_input-text-font: var(
+      --exm-search-input-text-font,
+      var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    --_input-text-line-height: var(
+      --exm-search-input-text-line-height,
+      var(--md-sys-typescale-body-large-line-height, 1.5rem)
+    );
+    --_input-text-size: var(--exm-search-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));
+    --_input-text-weight: var(
+      --exm-search-input-text-weight,
+      var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    --_label-text-color: var(--exm-search-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    --_label-text-font: var(
+      --exm-search-label-text-font,
+      var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    --_label-text-line-height: var(
+      --exm-search-label-text-line-height,
+      var(--md-sys-typescale-body-large-line-height, 1.5rem)
+    );
+    --_label-text-size: var(--exm-search-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));
+    --_label-text-weight: var(
+      --exm-search-label-text-weight,
+      var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    --_icon-color: var(--exm-search-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+    --_icon-size: var(--exm-search-icon-size, 24px);
+    --_outline-color: var(--exm-search-outline-color, var(--md-sys-color-outline, #79747e));
+    --_outline-width: var(--exm-search-outline-width, 1px);
+    --md-focus-ring-shape: var(--_container-shape);
+    color: var(--_label-text-color);
+    background-color: var(--md-sys-color-surface-container-low);
+    border-radius: var(--_container-shape);
+    border-width: var(--_outline-width);
+    border-color: var(--_outline-color);
+    border-style: solid;
+  }
+
+  :host(:hover) {
+    border-color: var(--_hover-outline-color);
+    color: var(--_hover-label-text-color);
+  }
+
+  :host(:focus) {
+    border-color: var(--_focus-outline-color);
+    color: var(--_focus-label-text-color);
+    border-width: var(--_focus-outline-width);
+  }
+
+  :host > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+  }
+
+  h2 {
+    max-width: 936px;
+    width: 100%;
+    margin: 20px auto;
+  }
+
+  input {
+    width: 100%;
+    caret-color: var(--md-sys-color-on-surface);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host(:hover) input {
+    color: var(--_hover-input-text-color);
+  }
+
+  :host(:focus) input {
+    color: var(--_focus-input-text-color);
+  }
+
+  md-icon {
+    fill: var(--_icon-color);
+  }
+
+  md-icon.search {
+    margin: 0 0.5rem 0 1rem;
+  }
+
+  :host(:hover) md-icon {
+    fill: var(--_hover-icon-color);
+  }
+
+  :host(:focus) md-icon {
+    fill: var(--_focus-icon-color);
+  }
+
+  md-icon-button.clear {
+    margin-right: 0.5rem;
+    min-width: 40px;
+  }
+
+  :host > div > svg {
+    margin-right: 10px;
+  }
+
+  span.interactive-content {
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: var(--_label-text-size);
+    text-overflow: ellipsis;
+    letter-spacing: 0.005em;
+    box-sizing: border-box;
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    cursor: text;
+    flex: 1;
+  }
+
+  .search {
+    display: absolute;
+    background: none;
+  }
+
+  .search > div {
+    width: 100%;
+    position: relative;
+    align-items: center;
+  }
+
+  .search input {
+    font-size: var(--_label-text-size);
+    height: inherit;
+    padding: 2px;
+    border: 0px;
+    width: 100%;
+    letter-spacing: 0.005em;
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    outline: none;
+    background: none;
+    box-sizing: border-box;
+  }
+
+  .mode-default {
+    display: flex;
+  }
+
+  .mode-input {
+    display: none;
+    height: inherit;
+  }
+
+  .search.hasFocus .mode-default {
+    display: none;
+  }
+
+  .search.hasFocus .mode-input {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=exm-search-css.js.map

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@exmg/exm-search",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-search.js": "./dist/exm-search.js"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
+    "@material/web": "^2.2.0",
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "search"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-search"
+  },
+  "license": "MIT",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}