@exmg/exm-search 1.1.36 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,26 @@
1
+ import { ExmgElement } from '@exmg/lit-base';
2
+ import { PropertyValues } from 'lit';
3
+ import '@material/web/icon/icon.js';
4
+ import '@material/web/iconbutton/icon-button.js';
5
+ import '@material/web/focus/md-focus-ring.js';
6
+ export declare class ExmSearchBase extends ExmgElement {
7
+ bubbles: boolean;
8
+ _hasFocus: boolean;
9
+ filterValue?: string | null;
10
+ placeHolder: string;
11
+ search?: HTMLInputElement;
12
+ detectOutsideBind?: (e: Event) => void;
13
+ constructor();
14
+ protected fire<T>(eventName: string, detail?: T, bubbles?: boolean): void;
15
+ focus(): void;
16
+ protected firstUpdated(_changedProperties: PropertyValues): void;
17
+ disconnectedCallback(): void;
18
+ detectOutsideClick(e: Event): void;
19
+ render(): import("lit-html").TemplateResult<1>;
20
+ _getValue(): string;
21
+ private notifyChange;
22
+ private handleClear;
23
+ private handleKeyUp;
24
+ private handleBlur;
25
+ updated(changedProperties: Map<string, any>): void;
26
+ }
@@ -0,0 +1,132 @@
1
+ import { __decorate } from "tslib";
2
+ import { ExmgElement } from '@exmg/lit-base';
3
+ import { html, nothing } from 'lit';
4
+ import { property, query, state } from 'lit/decorators.js';
5
+ import { classMap } from 'lit/directives/class-map.js';
6
+ import '@material/web/icon/icon.js';
7
+ import '@material/web/iconbutton/icon-button.js';
8
+ import '@material/web/focus/md-focus-ring.js';
9
+ export class ExmSearchBase extends ExmgElement {
10
+ constructor() {
11
+ super();
12
+ this.bubbles = false;
13
+ this._hasFocus = true;
14
+ this.placeHolder = 'Search';
15
+ // Set default tabindex to 0
16
+ const tabindex = this.getAttribute('tabindex');
17
+ this.setAttribute('tabindex', tabindex || '0');
18
+ }
19
+ fire(eventName, detail, bubbles) {
20
+ this.dispatchEvent(new CustomEvent(eventName, {
21
+ bubbles: bubbles || this.bubbles,
22
+ composed: true,
23
+ detail,
24
+ }));
25
+ }
26
+ focus() {
27
+ this._hasFocus = true;
28
+ }
29
+ firstUpdated(_changedProperties) {
30
+ this.detectOutsideBind = this.detectOutsideClick.bind(this);
31
+ document.addEventListener('click', this.detectOutsideBind);
32
+ }
33
+ disconnectedCallback() {
34
+ this.detectOutsideBind && document.removeEventListener('click', this.detectOutsideBind);
35
+ super.disconnectedCallback();
36
+ }
37
+ detectOutsideClick(e) {
38
+ const path = e.composedPath();
39
+ if (path.length > 0) {
40
+ // @ts-ignore
41
+ const container = path.find((el) => el.id === 'clickbox');
42
+ // const container = actualTarget.closest('#clickbox');
43
+ if (!container) {
44
+ // Clicked outside the box
45
+ this._hasFocus = false;
46
+ }
47
+ }
48
+ }
49
+ render() {
50
+ const classMapValues = {
51
+ search: true,
52
+ hasFocus: this._hasFocus,
53
+ };
54
+ return html `
55
+ <div id="clickbox" class=${classMap(classMapValues)}>
56
+ <div class="mode-input">
57
+ <md-focus-ring for="searchInput" inward></md-focus-ring>
58
+ <md-icon class="search">search</md-icon>
59
+ <input
60
+ id="searchInput"
61
+ placeholder=${this.placeHolder}
62
+ value=${this.filterValue ? this.filterValue : ''}
63
+ onfocus="let value = this.value; this.value = null; this.value = value"
64
+ @keyup=${this.handleKeyUp}
65
+ @blur=${this.handleBlur}
66
+ />
67
+ ${this.filterValue
68
+ ? html ` <md-icon-button class="clear" @click=${this.handleClear}><md-icon>clear</md-icon></md-icon-button> `
69
+ : nothing}
70
+ </div>
71
+ <div class="mode-default" @click=${() => this.focus()}>
72
+ <md-icon class="search">search</md-icon>
73
+ <span class="interactive-content">${this._getValue()}</span>
74
+ ${this.filterValue
75
+ ? html ` <md-icon-button class="clear" @click=${this.handleClear}><md-icon>clear</md-icon></md-icon-button> `
76
+ : nothing}
77
+ </div>
78
+ </div>
79
+ `;
80
+ }
81
+ _getValue() {
82
+ return this.filterValue || this.placeHolder;
83
+ }
84
+ notifyChange() {
85
+ this.fire('search-value-change', { value: this.filterValue }, this.bubbles);
86
+ }
87
+ handleClear(e) {
88
+ var _a;
89
+ e.stopPropagation();
90
+ e.preventDefault();
91
+ this.filterValue = null;
92
+ if (this.search) {
93
+ this.search.value = '';
94
+ }
95
+ this.notifyChange();
96
+ (_a = this.search) === null || _a === void 0 ? void 0 : _a.focus();
97
+ }
98
+ handleKeyUp(e) {
99
+ const input = e.target;
100
+ if (this.filterValue !== input.value) {
101
+ this.filterValue = input.value;
102
+ this.notifyChange();
103
+ }
104
+ if (e.key === 'Escape') {
105
+ this._hasFocus = false;
106
+ }
107
+ }
108
+ handleBlur() {
109
+ this.fire('search-blur', {}, this.bubbles);
110
+ }
111
+ updated(changedProperties) {
112
+ if (changedProperties.has('_hasFocus')) {
113
+ // after _hasFocus changed to true, focus the input
114
+ if (this._hasFocus) {
115
+ this.shadowRoot.querySelector('#searchInput').focus();
116
+ }
117
+ }
118
+ }
119
+ }
120
+ __decorate([
121
+ state()
122
+ ], ExmSearchBase.prototype, "_hasFocus", void 0);
123
+ __decorate([
124
+ property({ type: String })
125
+ ], ExmSearchBase.prototype, "filterValue", void 0);
126
+ __decorate([
127
+ property({ type: String })
128
+ ], ExmSearchBase.prototype, "placeHolder", void 0);
129
+ __decorate([
130
+ query('#searchInput')
131
+ ], ExmSearchBase.prototype, "search", void 0);
132
+ //# sourceMappingURL=exm-search-base.js.map
@@ -0,0 +1,10 @@
1
+ import '@material/web/progress/circular-progress.js';
2
+ import { ExmSearchBase } from './exm-search-base.js';
3
+ export declare class ExmSearch extends ExmSearchBase {
4
+ static styles: import("lit").CSSResult[];
5
+ }
6
+ declare global {
7
+ interface HTMLElementTagNameMap {
8
+ 'exm-search': ExmSearch;
9
+ }
10
+ }
@@ -0,0 +1,13 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators/custom-element.js';
3
+ import '@material/web/progress/circular-progress.js';
4
+ import { ExmSearchBase } from './exm-search-base.js';
5
+ import { style } from './styles/exm-search-css.js';
6
+ let ExmSearch = class ExmSearch extends ExmSearchBase {
7
+ };
8
+ ExmSearch.styles = [style];
9
+ ExmSearch = __decorate([
10
+ customElement('exm-search')
11
+ ], ExmSearch);
12
+ export { ExmSearch };
13
+ //# sourceMappingURL=exm-search.js.map
@@ -0,0 +1,3 @@
1
+ export { ExmSearch } from './exm-search.js';
2
+ export { ExmSearchBase } from './exm-search-base.js';
3
+ export { style as exmgSearchStyles } from './styles/exm-search-css.js';
@@ -0,0 +1,4 @@
1
+ export { ExmSearch } from './exm-search.js';
2
+ export { ExmSearchBase } from './exm-search-base.js';
3
+ export { style as exmgSearchStyles } from './styles/exm-search-css.js';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -0,0 +1,178 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ :host {
4
+ display: block;
5
+ --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
6
+ --_outline-width: var(--exm-search-outline-width, 1px);
7
+ --_outline-color: var(--exm-search-outline-color, var(--md-outlined-field-hover-outline-width, 1px));
8
+ --_container-shape: var(--exm-search-container-shape, 3rem);
9
+ --_focus-input-text-color: var(--exm-search-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
10
+ --_focus-label-text-color: var(--exm-search-focus-label-text-color, var(--md-sys-color-primary, #6750a4));
11
+ --_focus-icon-color: var(--exm-search-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
12
+ --_focus-outline-color: var(--exm-search-focus-outline-color, var(--md-sys-color-primary, #6750a4));
13
+ --_focus-outline-width: var(--exm-search-focus-outline-width, 1px);
14
+ --_hover-input-text-color: var(--exm-search-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
15
+ --_hover-label-text-color: var(--exm-search-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));
16
+ --_hover-icon-color: var(--exm-search-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
17
+ --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
18
+ --_input-text-color: var(--exm-search-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
19
+ --_input-text-font: var(
20
+ --exm-search-input-text-font,
21
+ var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
22
+ );
23
+ --_input-text-line-height: var(
24
+ --exm-search-input-text-line-height,
25
+ var(--md-sys-typescale-body-large-line-height, 1.5rem)
26
+ );
27
+ --_input-text-size: var(--exm-search-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));
28
+ --_input-text-weight: var(
29
+ --exm-search-input-text-weight,
30
+ var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
31
+ );
32
+ --_label-text-color: var(--exm-search-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));
33
+ --_label-text-font: var(
34
+ --exm-search-label-text-font,
35
+ var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
36
+ );
37
+ --_label-text-line-height: var(
38
+ --exm-search-label-text-line-height,
39
+ var(--md-sys-typescale-body-large-line-height, 1.5rem)
40
+ );
41
+ --_label-text-size: var(--exm-search-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));
42
+ --_label-text-weight: var(
43
+ --exm-search-label-text-weight,
44
+ var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
45
+ );
46
+ --_icon-color: var(--exm-search-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
47
+ --_icon-size: var(--exm-search-icon-size, 24px);
48
+ --_outline-color: var(--exm-search-outline-color, var(--md-sys-color-outline, #79747e));
49
+ --_outline-width: var(--exm-search-outline-width, 1px);
50
+ --md-focus-ring-shape: var(--_container-shape);
51
+ color: var(--_label-text-color);
52
+ background-color: var(--md-sys-color-surface-container-low);
53
+ border-radius: var(--_container-shape);
54
+ border-width: var(--_outline-width);
55
+ border-color: var(--_outline-color);
56
+ border-style: solid;
57
+ }
58
+
59
+ :host(:hover) {
60
+ border-color: var(--_hover-outline-color);
61
+ color: var(--_hover-label-text-color);
62
+ }
63
+
64
+ :host(:focus) {
65
+ border-color: var(--_focus-outline-color);
66
+ color: var(--_focus-label-text-color);
67
+ border-width: var(--_focus-outline-width);
68
+ }
69
+
70
+ :host > div {
71
+ display: flex;
72
+ flex-direction: row;
73
+ justify-content: center;
74
+ align-items: center;
75
+ height: 48px;
76
+ }
77
+
78
+ h2 {
79
+ max-width: 936px;
80
+ width: 100%;
81
+ margin: 20px auto;
82
+ }
83
+
84
+ input {
85
+ width: 100%;
86
+ caret-color: var(--md-sys-color-on-surface);
87
+ color: var(--md-sys-color-on-surface);
88
+ }
89
+
90
+ :host(:hover) input {
91
+ color: var(--_hover-input-text-color);
92
+ }
93
+
94
+ :host(:focus) input {
95
+ color: var(--_focus-input-text-color);
96
+ }
97
+
98
+ md-icon {
99
+ fill: var(--_icon-color);
100
+ }
101
+
102
+ md-icon.search {
103
+ margin: 0 0.5rem 0 1rem;
104
+ }
105
+
106
+ :host(:hover) md-icon {
107
+ fill: var(--_hover-icon-color);
108
+ }
109
+
110
+ :host(:focus) md-icon {
111
+ fill: var(--_focus-icon-color);
112
+ }
113
+
114
+ md-icon-button.clear {
115
+ margin-right: 0.5rem;
116
+ min-width: 40px;
117
+ }
118
+
119
+ :host > div > svg {
120
+ margin-right: 10px;
121
+ }
122
+
123
+ span.interactive-content {
124
+ white-space: nowrap;
125
+ overflow: hidden;
126
+ font-size: var(--_label-text-size);
127
+ text-overflow: ellipsis;
128
+ letter-spacing: 0.005em;
129
+ box-sizing: border-box;
130
+ line-height: var(--_label-text-line-height);
131
+ font-weight: var(--_label-text-weight);
132
+ cursor: text;
133
+ flex: 1;
134
+ }
135
+
136
+ .search {
137
+ display: absolute;
138
+ background: none;
139
+ }
140
+
141
+ .search > div {
142
+ width: 100%;
143
+ position: relative;
144
+ align-items: center;
145
+ }
146
+
147
+ .search input {
148
+ font-size: var(--_label-text-size);
149
+ height: inherit;
150
+ padding: 2px;
151
+ border: 0px;
152
+ width: 100%;
153
+ letter-spacing: 0.005em;
154
+ line-height: var(--_label-text-line-height);
155
+ font-weight: var(--_label-text-weight);
156
+ outline: none;
157
+ background: none;
158
+ box-sizing: border-box;
159
+ }
160
+
161
+ .mode-default {
162
+ display: flex;
163
+ }
164
+
165
+ .mode-input {
166
+ display: none;
167
+ height: inherit;
168
+ }
169
+
170
+ .search.hasFocus .mode-default {
171
+ display: none;
172
+ }
173
+
174
+ .search.hasFocus .mode-input {
175
+ display: flex;
176
+ }
177
+ `;
178
+ //# sourceMappingURL=exm-search-css.js.map
@@ -1,12 +1,13 @@
1
- import { __decorate } from "tslib";
1
+ import { __decorate } from 'tslib';
2
2
  import { ExmgElement } from '@exmg/lit-base';
3
- import { html, nothing } from 'lit';
4
- import { property, query, state } from 'lit/decorators.js';
3
+ import { nothing, html } from 'lit';
4
+ import { state, property, query } from 'lit/decorators.js';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
6
  import '@material/web/icon/icon.js';
7
7
  import '@material/web/iconbutton/icon-button.js';
8
8
  import '@material/web/focus/md-focus-ring.js';
9
- export class ExmSearchBase extends ExmgElement {
9
+
10
+ class ExmSearchBase extends ExmgElement {
10
11
  constructor() {
11
12
  super();
12
13
  this.bubbles = false;
@@ -129,4 +130,6 @@ __decorate([
129
130
  __decorate([
130
131
  query('#searchInput')
131
132
  ], ExmSearchBase.prototype, "search", void 0);
132
- //# sourceMappingURL=exm-search-base.js.map
133
+
134
+ export { ExmSearchBase };
135
+ //# sourceMappingURL=exm-search-base.js.map
@@ -1,13 +1,15 @@
1
- import { __decorate } from "tslib";
1
+ import { __decorate } from 'tslib';
2
2
  import { customElement } from 'lit/decorators/custom-element.js';
3
3
  import '@material/web/progress/circular-progress.js';
4
4
  import { ExmSearchBase } from './exm-search-base.js';
5
5
  import { style } from './styles/exm-search-css.js';
6
+
6
7
  let ExmSearch = class ExmSearch extends ExmSearchBase {
7
8
  };
8
9
  ExmSearch.styles = [style];
9
10
  ExmSearch = __decorate([
10
11
  customElement('exm-search')
11
12
  ], ExmSearch);
13
+
12
14
  export { ExmSearch };
13
- //# sourceMappingURL=exm-search.js.map
15
+ //# sourceMappingURL=exm-search.js.map
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export { ExmSearch } from './exm-search.js';
2
2
  export { ExmSearchBase } from './exm-search-base.js';
3
3
  export { style as exmgSearchStyles } from './styles/exm-search-css.js';
4
- //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
@@ -1,5 +1,6 @@
1
1
  import { css } from 'lit';
2
- export const style = css `
2
+
3
+ const style = css `
3
4
  :host {
4
5
  display: block;
5
6
  --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
@@ -175,4 +176,6 @@ export const style = css `
175
176
  display: flex;
176
177
  }
177
178
  `;
178
- //# sourceMappingURL=exm-search-css.js.map
179
+
180
+ export { style };
181
+ //# sourceMappingURL=exm-search-css.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exmg/exm-search",
3
- "version": "1.1.36",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
39
+ "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
40
40
  }