@digital-realty/ix-search-bar 2.1.2 → 2.1.4

package/README.md

@@ -23,45 +23,6 @@ npm i @digital-realty/ix-search-bar
   import { IxSearchBar } from '@digital-realty/ix-search-bar/IxSearchBar'
 </script>
 ```
-## Linting and formatting
+## Demo and Documentation
 
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`
+Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-search-bar--default).

package/dist/IxSearchBar.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-textbox';
+import { Item } from './types/index.js';
+export declare class IxSearchBar extends LitElement {
+    value: string;
+    items: Item[];
+    searchFields: string[];
+    foundItems: Item[];
+    static get styles(): import("lit").CSSResult[];
+    connectedCallback(): void;
+    resetResults(): void;
+    get itemsCount(): number;
+    get itemsLabel(): "item" | "items";
+    _dispatchEvent(items: Item[]): void;
+    filterItems(value: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ix-search-bar': IxSearchBar;
+    }
+}

package/dist/IxSearchBar.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-textbox';
+import { IxSearchBarStyle } from './ix-search-bar-styles.js';
+export class IxSearchBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.items = [];
+        this.searchFields = [];
+        this.foundItems = [];
+    }
+    static get styles() {
+        return [IxSearchBarStyle];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resetResults();
+    }
+    resetResults() {
+        this.foundItems = this.items;
+    }
+    get itemsCount() {
+        if (Array.isArray(this.foundItems) && this.foundItems.length) {
+            return this.foundItems.length;
+        }
+        return 0;
+    }
+    get itemsLabel() {
+        return this.itemsCount === 1 ? 'item' : 'items';
+    }
+    _dispatchEvent(items) {
+        const resultsEvent = new CustomEvent('onResultsFound', {
+            detail: { items },
+            composed: true,
+        });
+        this.dispatchEvent(resultsEvent);
+    }
+    filterItems(value) {
+        this.value = value;
+        if (value === '') {
+            this.resetResults();
+            this._dispatchEvent(this.items);
+            return;
+        }
+        const results = [];
+        for (const item of this.items) {
+            for (const field of this.searchFields) {
+                if (field in item) {
+                    if (item[field]
+                        .toLocaleLowerCase()
+                        .includes(this.value.toLocaleLowerCase())) {
+                        results.push(item);
+                        break;
+                    }
+                }
+            }
+        }
+        this.foundItems = results;
+        this._dispatchEvent(results);
+    }
+    render() {
+        return html `
+      <ix-textbox
+        type="search"
+        @textChange="${(e) => this.filterItems(e.detail.value)}"
+      ></ix-textbox>
+
+      <div class="items-count">${this.itemsCount} ${this.itemsLabel}</div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], IxSearchBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], IxSearchBar.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], IxSearchBar.prototype, "searchFields", void 0);
+__decorate([
+    property({ type: Array })
+], IxSearchBar.prototype, "foundItems", void 0);
+//# sourceMappingURL=IxSearchBar.js.map

package/dist/IxSearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxSearchBar.js","sourceRoot":"","sources":["../src/IxSearchBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-textbox';\nimport { IxSearchBarStyle } from './ix-search-bar-styles.js';\nimport { Item, TextChangeEvent } from './types/index.js';\n\nexport class IxSearchBar extends LitElement {\n  @property({ type: String }) value = '';\n\n  @property({ type: Array }) items: Item[] = [];\n\n  @property({ type: Array }) searchFields: string[] = [];\n\n  @property({ type: Array }) foundItems: Item[] = [];\n\n  static get styles() {\n    return [IxSearchBarStyle];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resetResults();\n  }\n\n  resetResults() {\n    this.foundItems = this.items;\n  }\n\n  get itemsCount() {\n    if (Array.isArray(this.foundItems) && this.foundItems.length) {\n      return this.foundItems.length;\n    }\n    return 0;\n  }\n\n  get itemsLabel() {\n    return this.itemsCount === 1 ? 'item' : 'items';\n  }\n\n  _dispatchEvent(items: Item[]): void {\n    const resultsEvent = new CustomEvent('onResultsFound', {\n      detail: { items },\n      composed: true,\n    });\n    this.dispatchEvent(resultsEvent);\n  }\n\n  filterItems(value: string) {\n    this.value = value;\n    if (value === '') {\n      this.resetResults();\n      this._dispatchEvent(this.items);\n      return;\n    }\n\n    const results: Item[] = [];\n\n    for (const item of this.items) {\n      for (const field of this.searchFields) {\n        if (field in item) {\n          if (\n            item[field]\n              .toLocaleLowerCase()\n              .includes(this.value.toLocaleLowerCase())\n          ) {\n            results.push(item);\n            break;\n          }\n        }\n      }\n    }\n\n    this.foundItems = results;\n    this._dispatchEvent(results);\n  }\n\n  render() {\n    return html`\n      <ix-textbox\n        type=\"search\"\n        @textChange=\"${(e: TextChangeEvent) =>\n          this.filterItems(e.detail.value)}\"\n      ></ix-textbox>\n\n      <div class=\"items-count\">${this.itemsCount} ${this.itemsLabel}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ix-search-bar': IxSearchBar;\n  }\n}\n"]}

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { IxSearchBar } from './IxSearchBar.js';\n"]}

package/dist/ix-search-bar-styles.d.ts

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

package/{src/ix-search-bar-styles.ts → dist/ix-search-bar-styles.js}

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-export const IxSearchBarStyle = css`
+export const IxSearchBarStyle = css `
   :host {
     display: flex;
     justify-content: space-between;
@@ -27,3 +26,4 @@ export const IxSearchBarStyle = css`
     padding: 0.5em 0;
   }
 `;
+//# sourceMappingURL=ix-search-bar-styles.js.map

package/dist/ix-search-bar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-search-bar-styles.js","sourceRoot":"","sources":["../src/ix-search-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxSearchBarStyle = css`\n  :host {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border: 1px solid lightgrey;\n    border-width: 1px 0;\n    padding: 1rem 0;\n    flex-wrap: wrap;\n    margin-bottom: 1.5rem;\n  }\n\n  html {\n    color: #333;\n  }\n\n  ix-textbox {\n    color: #333;\n    flex: 1 0 min(280px, 100%);\n  }\n\n  .items-count {\n    flex: 1000 0 7em;\n    text-align: right;\n    padding: 0.5em 0;\n  }\n`;\n"]}

package/dist/ix-search-bar.d.ts

@@ -0,0 +1 @@
+export {};

package/{src/ix-search-bar.ts → dist/ix-search-bar.js}

@@ -1,3 +1,3 @@
 import { IxSearchBar } from './IxSearchBar.js';
-
 window.customElements.define('ix-search-bar', IxSearchBar);
+//# sourceMappingURL=ix-search-bar.js.map

package/dist/ix-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-search-bar.js","sourceRoot":"","sources":["../src/ix-search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import { IxSearchBar } from './IxSearchBar.js';\n\nwindow.customElements.define('ix-search-bar', IxSearchBar);\n"]}

package/dist/react/IxSearchBar.d.ts

@@ -0,0 +1,2 @@
+import { IxSearchBar as LitComp } from '../IxSearchBar.js';
+export declare const IxSearchBar: import("@lit-labs/react").ReactWebComponent<LitComp, {}>;

package/{src/react/IxSearchBar.ts → dist/react/IxSearchBar.js}

@@ -1,11 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit-labs/react';
 import { IxSearchBar as LitComp } from '../IxSearchBar.js';
-
 window.customElements.define('ix-search-bar', LitComp);
-
 export const IxSearchBar = createComponent({
-  tagName: 'ix-search-bar',
-  elementClass: LitComp,
-  react: React,
+    tagName: 'ix-search-bar',
+    elementClass: LitComp,
+    react: React,
 });
+//# sourceMappingURL=IxSearchBar.js.map

package/dist/react/IxSearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxSearchBar.js","sourceRoot":"","sources":["../../src/react/IxSearchBar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,OAAO;IACrB,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { IxSearchBar as LitComp } from '../IxSearchBar.js';\n\nwindow.customElements.define('ix-search-bar', LitComp);\n\nexport const IxSearchBar = createComponent({\n  tagName: 'ix-search-bar',\n  elementClass: LitComp,\n  react: React,\n});\n"]}

package/{src/types/index.ts → dist/types/index.d.ts}

@@ -2,11 +2,12 @@
  * The item being searched for.
  */
 export type Item = {
-  [key: string]: string;
+    [key: string]: string;
 };
-
 /**
  * An event which is fired when the textfield's value changes.
  * It passes the value of the textfield.
  */
-export type TextChangeEvent = CustomEvent<{ value: string }>;
+export type TextChangeEvent = CustomEvent<{
+    value: string;
+}>;

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The item being searched for.\n */\nexport type Item = {\n  [key: string]: string;\n};\n\n/**\n * An event which is fired when the textfield's value changes.\n * It passes the value of the textfield.\n */\nexport type TextChangeEvent = CustomEvent<{ value: string }>;\n"]}

package/package.json

@@ -3,21 +3,18 @@
   "description": "Webcomponent ix-search-bar following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "exports": {
-    ".": "./dist/src/index.js",
-    "./ix-search-bar.js": "./dist/src/ix-search-bar.js",
-    "./IxSearchBar": "./dist/src/react/IxSearchBar.js"
+    ".": "./dist/index.js",
+    "./ix-search-bar.js": "./dist/ix-search-bar.js",
+    "./IxSearchBar": "./dist/react/IxSearchBar.js"
   },
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "src"
-  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
@@ -29,7 +26,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-textbox": "^2.1.2",
+    "@digital-realty/ix-textbox": "^2.1.4",
     "@lit-labs/react": "^2.0.3",
     "lit": "^2.0.2",
     "react": "^18.2.0"
@@ -96,5 +93,12 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1e8e36ae0147d1fb0037ba85c727e3a30daebbc9"
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "f487170ac27de967505c921dabf983d2a122e625"
 }

package/src/IxSearchBar.ts

@@ -1,94 +0,0 @@
-import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@digital-realty/ix-textbox';
-import { IxSearchBarStyle } from './ix-search-bar-styles.js';
-import { Item, TextChangeEvent } from './types/index.js';
-
-export class IxSearchBar extends LitElement {
-  @property({ type: String }) value = '';
-
-  @property({ type: Array }) items: Item[] = [];
-
-  @property({ type: Array }) searchFields: string[] = [];
-
-  @property({ type: Array }) foundItems: Item[] = [];
-
-  static get styles() {
-    return [IxSearchBarStyle];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.resetResults();
-  }
-
-  resetResults() {
-    this.foundItems = this.items;
-  }
-
-  get itemsCount() {
-    if (Array.isArray(this.foundItems) && this.foundItems.length) {
-      return this.foundItems.length;
-    }
-    return 0;
-  }
-
-  get itemsLabel() {
-    return this.itemsCount === 1 ? 'item' : 'items';
-  }
-
-  _dispatchEvent(items: Item[]): void {
-    const resultsEvent = new CustomEvent('onResultsFound', {
-      detail: { items },
-      composed: true,
-    });
-    this.dispatchEvent(resultsEvent);
-  }
-
-  filterItems(value: string) {
-    this.value = value;
-    if (value === '') {
-      this.resetResults();
-      this._dispatchEvent(this.items);
-      return;
-    }
-
-    const results: Item[] = [];
-
-    for (const item of this.items) {
-      for (const field of this.searchFields) {
-        if (field in item) {
-          if (
-            item[field]
-              .toLocaleLowerCase()
-              .includes(this.value.toLocaleLowerCase())
-          ) {
-            results.push(item);
-            break;
-          }
-        }
-      }
-    }
-
-    this.foundItems = results;
-    this._dispatchEvent(results);
-  }
-
-  render() {
-    return html`
-      <ix-textbox
-        type="search"
-        @textChange="${(e: TextChangeEvent) =>
-          this.filterItems(e.detail.value)}"
-      ></ix-textbox>
-
-      <div class="items-count">${this.itemsCount} ${this.itemsLabel}</div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ix-search-bar': IxSearchBar;
-  }
-}