lucos_search_component 0.0.9 → 0.0.10

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.
Files changed (3) hide show
  1. package/example/index.html +7 -7
  2. package/index.js +10 -6
  3. package/package.json +1 -1
package/example/index.html CHANGED
@@ -3,16 +3,16 @@
3
3
  <title>Hello World Search Component</title>
4
4
  </head>
5
5
  <body>
6
- <label for="search1">Everything:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search1"></select>
7
- <label for="search2">No Tracks:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search2" data-exclude_types="Track"></select>
8
- <label for="search3">Only Cites and Rivers:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search3" data-types="City,River"></select>
9
- <label for="search4">Load with existing items:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search4" multiple>
6
+ <label for="search1">Everything:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search1"></select></span>
7
+ <label for="search2">No Tracks:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search2"></select></span>
8
+ <label for="search3">Only Cites and Rivers:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="City,River"><select id="search3"></select></span>
9
+ <label for="search4">Load with existing items:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search4" multiple>
10
10
  <option id="https://contacts.l42.eu/people/2" selected>https://contacts.l42.eu/people/2</option>
11
11
  <option id="https://eolas.l42.eu/metadata/place/2/" selected>https://eolas.l42.eu/metadata/place/2/</option>
12
12
  <option id="https://media-metadata.l42.eu/tracks/13713" selected>https://media-metadata.l42.eu/tracks/13713</option>
13
- </select>
13
+ </select></span>
14
14
  <label for="search5">More than 10:</label>
15
- <select is="lucos-search" id="search5" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track" multiple>
15
+ <span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
16
16
  <option value="https://eolas.l42.eu/metadata/place/125/" selected>https://eolas.l42.eu/metadata/place/125/</option>
17
17
  <option value="https://eolas.l42.eu/metadata/place/126/" selected>https://eolas.l42.eu/metadata/place/126/</option>
18
18
  <option value="https://eolas.l42.eu/metadata/place/28/" selected>https://eolas.l42.eu/metadata/place/28/</option>
@@ -26,7 +26,7 @@
26
26
  <option value="https://eolas.l42.eu/metadata/place/315/" selected>https://eolas.l42.eu/metadata/place/315/</option>
27
27
  <option value="https://eolas.l42.eu/metadata/place/316/" selected>https://eolas.l42.eu/metadata/place/316/</option>
28
28
  <option value="https://eolas.l42.eu/metadata/place/317/" selected>https://eolas.l42.eu/metadata/place/317/</option>
29
- </select>
29
+ </select></span>
30
30
  <script src="./built.js"></script>
31
31
  </body>
32
32
  </html>
package/index.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import TomSelect from 'tom-select';
2
2
  import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
3
3
 
4
- class LucosSearchComponent extends HTMLSelectElement {
4
+ class LucosSearchComponent extends HTMLSpanElement {
5
5
  static get observedAttributes() {
6
6
  return ['data-api-key','data-types','data-exclude-types'];
7
7
  }
8
8
  constructor() {
9
9
  super();
10
10
  const component = this;
11
+ const shadow = component.attachShadow({mode: 'open'});
11
12
 
12
13
  const mainStyle = document.createElement('style');
13
14
  mainStyle.textContent = `
@@ -86,18 +87,21 @@ class LucosSearchComponent extends HTMLSelectElement {
86
87
  padding: 2px 6px;
87
88
  }
88
89
  `;
89
- component.appendChild(mainStyle);
90
+ shadow.appendChild(mainStyle);
90
91
 
91
92
  // If webpack is configured with `css-loader` but not `style-loader`, include the tom-select stylesheet here
92
93
  // (If `style-loader` is being used, the tom-select stylesheet will be handled by that)
93
94
  if (tomSelectStylesheet) {
94
95
  const tomStyle = document.createElement('style');
95
96
  tomStyle.textContent = tomSelectStylesheet[0][1];
96
- component.appendChild(tomStyle);
97
+ shadow.appendChild(tomStyle);
97
98
  }
98
99
 
99
- component.setAttribute("multiple", "multiple");
100
- new TomSelect(component, {
100
+ const selector = component.querySelector("select");
101
+ if (!selector) throw new Error("Can't find select element in lucos-search");
102
+ shadow.append(selector);
103
+ selector.setAttribute("multiple", "multiple");
104
+ new TomSelect(selector, {
101
105
  valueField: 'id',
102
106
  labelField: 'pref_label',
103
107
  searchField: [],
@@ -173,4 +177,4 @@ class LucosSearchComponent extends HTMLSelectElement {
173
177
  return results;
174
178
  }
175
179
  }
176
- customElements.define('lucos-search', LucosSearchComponent, { extends: "select" });
180
+ customElements.define('lucos-search', LucosSearchComponent, { extends: "span" });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lucos_search_component",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "description": "Web Component for searching lucOS data",
5
5
  "type": "module",
6
6
  "main": "index.js",