@digital-realty/ix-tile-picker 2.0.12 → 2.1.2

package/.editorconfig

@@ -1,29 +1,29 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 ix-tile-picker
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2023 ix-tile-picker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,68 +1,68 @@
-# \<ix-tile-picker>
-
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-## Installation
-
-```bash
-npm i @digital-realty/ix-tile-picker
-```
-
-## Usage
-
-```html
-<script type="module">
-  import '@digital-realty/ix-tile-picker';
-</script>
-
-<ix-tile-picker></ix-tile-picker>
-```
-### In React
-```html
-<script type="module">
-  import { IxTilePicker } from '@digital-realty/ix-tile-picker/IxTilePicker'
-</script>
-```
-
-## Linting and formatting
-
-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`
+# \<ix-tile-picker>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-tile-picker
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-tile-picker';
+</script>
+
+<ix-tile-picker></ix-tile-picker>
+```
+### In React
+```html
+<script type="module">
+  import { IxTilePicker } from '@digital-realty/ix-tile-picker/IxTilePicker'
+</script>
+```
+
+## Linting and formatting
+
+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`

package/dist/src/IxTilePicker.d.ts

@@ -1,36 +1,36 @@
-import { LitElement } from 'lit';
-import '@material/web/elevation/elevation.js';
-import '@digital-realty/ix-search-bar';
-export interface Item {
-    id?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    disabledButtonText?: string;
-    company?: string;
-    cloudAccessId?: string;
-    usedBandwidth?: number;
-    totalBandwidth?: number;
-}
-type FilterResultsEvent = CustomEvent<{
-    items: Item[];
-}>;
-export declare class IxTilePicker extends LitElement {
-    static get styles(): import("lit").CSSResult[];
-    items: Array<Item>;
-    searchFields: Array<string>;
-    foundItems: Array<Item>;
-    onSelectTile: Function | undefined;
-    onResultsFound: Function | undefined;
-    disabledText: string;
-    selectedText: string;
-    chooseText: string;
-    value: string;
-    connectedCallback(): void;
-    filterTiles(results: FilterResultsEvent): void;
-    handleClick(e: Event): void;
-    getRadioButtonLabelText(item: Item): string;
-    getRadioButtonLabelClass(item: Item): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-    renderRadioButtonLabel(item: Item): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};
+import { LitElement } from 'lit';
+import '@material/web/elevation/elevation.js';
+import '@digital-realty/ix-search-bar';
+export interface Item {
+    id?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    disabledButtonText?: string;
+    company?: string;
+    cloudAccessId?: string;
+    usedBandwidth?: number;
+    totalBandwidth?: number;
+}
+type FilterResultsEvent = CustomEvent<{
+    items: Item[];
+}>;
+export declare class IxTilePicker extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    items: Array<Item>;
+    searchFields: Array<string>;
+    foundItems: Array<Item>;
+    onSelectTile: Function | undefined;
+    onResultsFound: Function | undefined;
+    disabledText: string;
+    selectedText: string;
+    chooseText: string;
+    value: string;
+    connectedCallback(): void;
+    filterTiles(results: FilterResultsEvent): void;
+    handleClick(e: Event): void;
+    getRadioButtonLabelText(item: Item): string;
+    getRadioButtonLabelClass(item: Item): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    renderRadioButtonLabel(item: Item): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/IxTilePicker.js

@@ -1,156 +1,156 @@
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { IxTilePickerStyles } from './ix-tile-picker-styles.js';
-import '@material/web/elevation/elevation.js';
-import '@digital-realty/ix-search-bar';
-export class IxTilePicker extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.items = [];
-        this.searchFields = [];
-        this.foundItems = [];
-        this.onSelectTile = undefined;
-        this.onResultsFound = undefined;
-        this.disabledText = 'Disabled';
-        this.selectedText = 'Selected';
-        this.chooseText = 'Choose';
-        this.value = '';
-    }
-    static get styles() {
-        return [IxTilePickerStyles];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.foundItems = this.items;
-    }
-    filterTiles(results) {
-        this.foundItems = this.items.map((item) => {
-            var _a;
-            return ({
-                ...item,
-                hidden: !((_a = results === null || results === void 0 ? void 0 : results.detail) === null || _a === void 0 ? void 0 : _a.items.includes(item)),
-            });
-        });
-        if (this.onResultsFound) {
-            this.onResultsFound(this.foundItems);
-        }
-    }
-    handleClick(e) {
-        const { target } = e;
-        this.value = target.value || '';
-        if (this.onSelectTile) {
-            this.onSelectTile(this.value);
-        }
-        const foundItem = this.foundItems.find((item) => item.id === this.value);
-        if (foundItem) {
-            this.renderRadioButtonLabel(foundItem);
-        }
-        this.requestUpdate();
-    }
-    getRadioButtonLabelText(item) {
-        if (item.disabled)
-            return item.disabledButtonText || this.disabledText;
-        if (item.id === this.value)
-            return this.selectedText;
-        return this.chooseText;
-    }
-    getRadioButtonLabelClass(item) {
-        return classMap({
-            '-disabled': (item === null || item === void 0 ? void 0 : item.disabled) || false,
-            '-checked': item.id === this.value,
-            '-unselected': item.id !== this.value,
-        });
-    }
-    renderRadioButtonLabel(item) {
-        return html `<label
-      for="tile-${item.id}"
-      class="tile-radio-btn__label ${this.getRadioButtonLabelClass(item)}"
-      aria-hidden="true"
-      >${this.getRadioButtonLabelText(item)}</label
-    >`;
-    }
-    render() {
-        return html `
-      <ix-search-bar
-        .items="${this.items}"
-        .searchFields="${this.searchFields}"
-        @onResultsFound="${this.filterTiles}"
-      ></ix-search-bar>
-
-      <div class="tiles">
-        ${this.foundItems.length
-            ? this.foundItems.map((item, index) => html `
-                <div
-                  class="tile surface ${classMap({
-                '-disabled': (item === null || item === void 0 ? void 0 : item.disabled) || false,
-                '-hidden': (item === null || item === void 0 ? void 0 : item.hidden) || false,
-            })}"
-                >
-                  <md-elevation></md-elevation>
-                  <header class="tile__header" aria-hidden="true">
-                    <dl class="tile-heading" id="tileLabel${index}">
-                      <dt class="tile-heading__label">
-                        <slot name="label-${item.id}"></slot>
-                      </dt>
-                      <dd class="tile-heading__value">
-                        <slot name="value-${item.id}"></slot>
-                      </dd>
-                    </dl>
-                  </header>
-
-                  <div
-                    class="tile__body"
-                    aria-hidden="true"
-                    id="tileDescription${index}"
-                  >
-                    <slot name="body-${item.id}"></slot>
-                  </div>
-
-                  <span class="tile__footer -full-bleed tile-radio-btn">
-                    <input
-                      id="tile-${item.id}"
-                      type="radio"
-                      class="tile-radio-btn__input"
-                      name="picked-tile"
-                      aria-labelledby="tileLabel${index}"
-                      aria-describedby="tileDescription${index}"
-                      .value="${(item === null || item === void 0 ? void 0 : item.id) || ''}"
-                      @click="${this.handleClick}"
-                      ?disabled="${item.disabled}"
-                    />
-                    ${this.renderRadioButtonLabel(item)}
-                  </span>
-                </div>
-              `)
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Array })
-], IxTilePicker.prototype, "items", void 0);
-__decorate([
-    property({ type: Array })
-], IxTilePicker.prototype, "searchFields", void 0);
-__decorate([
-    property({ type: Array })
-], IxTilePicker.prototype, "foundItems", void 0);
-__decorate([
-    property({ attribute: false })
-], IxTilePicker.prototype, "onSelectTile", void 0);
-__decorate([
-    property({ attribute: false })
-], IxTilePicker.prototype, "onResultsFound", void 0);
-__decorate([
-    property()
-], IxTilePicker.prototype, "disabledText", void 0);
-__decorate([
-    property()
-], IxTilePicker.prototype, "selectedText", void 0);
-__decorate([
-    property()
-], IxTilePicker.prototype, "chooseText", void 0);
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { IxTilePickerStyles } from './ix-tile-picker-styles.js';
+import '@material/web/elevation/elevation.js';
+import '@digital-realty/ix-search-bar';
+export class IxTilePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.searchFields = [];
+        this.foundItems = [];
+        this.onSelectTile = undefined;
+        this.onResultsFound = undefined;
+        this.disabledText = 'Disabled';
+        this.selectedText = 'Selected';
+        this.chooseText = 'Choose';
+        this.value = '';
+    }
+    static get styles() {
+        return [IxTilePickerStyles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.foundItems = this.items;
+    }
+    filterTiles(results) {
+        this.foundItems = this.items.map((item) => {
+            var _a;
+            return ({
+                ...item,
+                hidden: !((_a = results === null || results === void 0 ? void 0 : results.detail) === null || _a === void 0 ? void 0 : _a.items.includes(item)),
+            });
+        });
+        if (this.onResultsFound) {
+            this.onResultsFound(this.foundItems);
+        }
+    }
+    handleClick(e) {
+        const { target } = e;
+        this.value = target.value || '';
+        if (this.onSelectTile) {
+            this.onSelectTile(this.value);
+        }
+        const foundItem = this.foundItems.find((item) => item.id === this.value);
+        if (foundItem) {
+            this.renderRadioButtonLabel(foundItem);
+        }
+        this.requestUpdate();
+    }
+    getRadioButtonLabelText(item) {
+        if (item.disabled)
+            return item.disabledButtonText || this.disabledText;
+        if (item.id === this.value)
+            return this.selectedText;
+        return this.chooseText;
+    }
+    getRadioButtonLabelClass(item) {
+        return classMap({
+            '-disabled': (item === null || item === void 0 ? void 0 : item.disabled) || false,
+            '-checked': item.id === this.value,
+            '-unselected': item.id !== this.value,
+        });
+    }
+    renderRadioButtonLabel(item) {
+        return html `<label
+      for="tile-${item.id}"
+      class="tile-radio-btn__label ${this.getRadioButtonLabelClass(item)}"
+      aria-hidden="true"
+      >${this.getRadioButtonLabelText(item)}</label
+    >`;
+    }
+    render() {
+        return html `
+      <ix-search-bar
+        .items="${this.items}"
+        .searchFields="${this.searchFields}"
+        @onResultsFound="${this.filterTiles}"
+      ></ix-search-bar>
+
+      <div class="tiles">
+        ${this.foundItems.length
+            ? this.foundItems.map((item, index) => html `
+                <div
+                  class="tile surface ${classMap({
+                '-disabled': (item === null || item === void 0 ? void 0 : item.disabled) || false,
+                '-hidden': (item === null || item === void 0 ? void 0 : item.hidden) || false,
+            })}"
+                >
+                  <md-elevation></md-elevation>
+                  <header class="tile__header" aria-hidden="true">
+                    <dl class="tile-heading" id="tileLabel${index}">
+                      <dt class="tile-heading__label">
+                        <slot name="label-${item.id}"></slot>
+                      </dt>
+                      <dd class="tile-heading__value">
+                        <slot name="value-${item.id}"></slot>
+                      </dd>
+                    </dl>
+                  </header>
+
+                  <div
+                    class="tile__body"
+                    aria-hidden="true"
+                    id="tileDescription${index}"
+                  >
+                    <slot name="body-${item.id}"></slot>
+                  </div>
+
+                  <span class="tile__footer -full-bleed tile-radio-btn">
+                    <input
+                      id="tile-${item.id}"
+                      type="radio"
+                      class="tile-radio-btn__input"
+                      name="picked-tile"
+                      aria-labelledby="tileLabel${index}"
+                      aria-describedby="tileDescription${index}"
+                      .value="${(item === null || item === void 0 ? void 0 : item.id) || ''}"
+                      @click="${this.handleClick}"
+                      ?disabled="${item.disabled}"
+                    />
+                    ${this.renderRadioButtonLabel(item)}
+                  </span>
+                </div>
+              `)
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "searchFields", void 0);
+__decorate([
+    property({ type: Array })
+], IxTilePicker.prototype, "foundItems", void 0);
+__decorate([
+    property({ attribute: false })
+], IxTilePicker.prototype, "onSelectTile", void 0);
+__decorate([
+    property({ attribute: false })
+], IxTilePicker.prototype, "onResultsFound", void 0);
+__decorate([
+    property()
+], IxTilePicker.prototype, "disabledText", void 0);
+__decorate([
+    property()
+], IxTilePicker.prototype, "selectedText", void 0);
+__decorate([
+    property()
+], IxTilePicker.prototype, "chooseText", void 0);
 //# sourceMappingURL=IxTilePicker.js.map