@digital-realty/ix-tile-picker 2.1.7 → 2.1.9
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.
package/dist/IxTilePicker.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import '@material/web/elevation/elevation.js';
|
|
3
1
|
import '@digital-realty/ix-search-bar';
|
|
2
|
+
import '@material/web/elevation/elevation.js';
|
|
3
|
+
import { LitElement } from 'lit';
|
|
4
|
+
import type { DirectiveResult } from 'lit/directive.js';
|
|
4
5
|
export interface Item {
|
|
5
6
|
id?: string;
|
|
6
7
|
disabled?: boolean;
|
|
@@ -29,8 +30,8 @@ export declare class IxTilePicker extends LitElement {
|
|
|
29
30
|
filterTiles(results: FilterResultsEvent): void;
|
|
30
31
|
handleClick(e: Event): void;
|
|
31
32
|
getRadioButtonLabelText(item: Item): string;
|
|
32
|
-
getRadioButtonLabelClass(item: Item):
|
|
33
|
-
renderRadioButtonLabel(item: Item): import("lit
|
|
34
|
-
render(): import("lit
|
|
33
|
+
getRadioButtonLabelClass(item: Item): DirectiveResult;
|
|
34
|
+
renderRadioButtonLabel(item: Item): import("lit").TemplateResult<1>;
|
|
35
|
+
render(): import("lit").TemplateResult<1>;
|
|
35
36
|
}
|
|
36
37
|
export {};
|
package/dist/IxTilePicker.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@digital-realty/ix-search-bar';
|
|
3
|
+
import '@material/web/elevation/elevation.js';
|
|
2
4
|
import { html, LitElement, nothing } from 'lit';
|
|
3
5
|
import { property } from 'lit/decorators.js';
|
|
4
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
7
|
import { IxTilePickerStyles } from './ix-tile-picker-styles.js';
|
|
6
|
-
import '@material/web/elevation/elevation.js';
|
|
7
|
-
import '@digital-realty/ix-search-bar';
|
|
8
8
|
export class IxTilePicker extends LitElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
package/dist/IxTilePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTilePicker.js","sourceRoot":"","sources":["../src/IxTilePicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"IxTilePicker.js","sourceRoot":"","sources":["../src/IxTilePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-search-bar';\nimport '@material/web/elevation/elevation.js';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { DirectiveResult } from 'lit/directive.js';\nimport { IxTilePickerStyles } from './ix-tile-picker-styles.js';\n\nexport interface Item {\n id?: string;\n disabled?: boolean;\n hidden?: boolean;\n disabledButtonText?: string;\n company?: string;\n cloudAccessId?: string;\n usedBandwidth?: number;\n totalBandwidth?: number;\n}\n\ntype FilterResultsEvent = CustomEvent<{ items: Item[] }>;\n\nexport class IxTilePicker extends LitElement {\n static get styles() {\n return [IxTilePickerStyles];\n }\n\n @property({ type: Array }) items: Array<Item> = [];\n\n @property({ type: Array }) searchFields: Array<string> = [];\n\n @property({ type: Array }) foundItems: Array<Item> = [];\n\n @property({ attribute: false }) onSelectTile: Function | undefined =\n undefined;\n\n @property({ attribute: false }) onResultsFound: Function | undefined =\n undefined;\n\n @property() disabledText: string = 'Disabled';\n\n @property() selectedText: string = 'Selected';\n\n @property() chooseText: string = 'Choose';\n\n value: string = '';\n\n connectedCallback() {\n super.connectedCallback();\n this.foundItems = this.items;\n }\n\n filterTiles(results: FilterResultsEvent) {\n this.foundItems = this.items.map((item: Item) => ({\n ...item,\n hidden: !results?.detail?.items.includes(item),\n }));\n\n if (this.onResultsFound) {\n this.onResultsFound(this.foundItems);\n }\n }\n\n handleClick(e: Event) {\n const { target } = e;\n this.value = (target as HTMLInputElement).value || '';\n if (this.onSelectTile) {\n this.onSelectTile(this.value);\n }\n\n const foundItem = this.foundItems.find(\n (item: Item) => item.id === this.value\n );\n if (foundItem) {\n this.renderRadioButtonLabel(foundItem);\n }\n this.requestUpdate();\n }\n\n getRadioButtonLabelText(item: Item) {\n if (item.disabled) return item.disabledButtonText || this.disabledText;\n\n if (item.id === this.value) return this.selectedText;\n\n return this.chooseText;\n }\n\n getRadioButtonLabelClass(item: Item): DirectiveResult {\n return classMap({\n '-disabled': item?.disabled || false,\n '-checked': item.id === this.value,\n '-unselected': item.id !== this.value,\n });\n }\n\n renderRadioButtonLabel(item: Item) {\n return html`<label\n for=\"tile-${item.id}\"\n class=\"tile-radio-btn__label ${this.getRadioButtonLabelClass(item)}\"\n aria-hidden=\"true\"\n >${this.getRadioButtonLabelText(item)}</label\n >`;\n }\n\n render() {\n return html`\n <ix-search-bar\n .items=\"${this.items}\"\n .searchFields=\"${this.searchFields}\"\n @onResultsFound=\"${this.filterTiles}\"\n ></ix-search-bar>\n\n <div class=\"tiles\">\n ${this.foundItems.length\n ? this.foundItems.map(\n (item: Item, index: number) => html`\n <div\n class=\"tile surface ${classMap({\n '-disabled': item?.disabled || false,\n '-hidden': item?.hidden || false,\n })}\"\n >\n <md-elevation></md-elevation>\n <header class=\"tile__header\" aria-hidden=\"true\">\n <dl class=\"tile-heading\" id=\"tileLabel${index}\">\n <dt class=\"tile-heading__label\">\n <slot name=\"label-${item.id}\"></slot>\n </dt>\n <dd class=\"tile-heading__value\">\n <slot name=\"value-${item.id}\"></slot>\n </dd>\n </dl>\n </header>\n\n <div\n class=\"tile__body\"\n aria-hidden=\"true\"\n id=\"tileDescription${index}\"\n >\n <slot name=\"body-${item.id}\"></slot>\n </div>\n\n <span class=\"tile__footer -full-bleed tile-radio-btn\">\n <input\n id=\"tile-${item.id}\"\n type=\"radio\"\n class=\"tile-radio-btn__input\"\n name=\"picked-tile\"\n aria-labelledby=\"tileLabel${index}\"\n aria-describedby=\"tileDescription${index}\"\n .value=\"${item?.id || ''}\"\n @click=\"${this.handleClick}\"\n ?disabled=\"${item.disabled}\"\n />\n ${this.renderRadioButtonLabel(item)}\n </span>\n </div>\n `\n )\n : nothing}\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-tile-picker following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.9",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-search-bar": "^2.1.
|
|
29
|
+
"@digital-realty/ix-search-bar": "^2.1.9",
|
|
30
30
|
"@lit-labs/react": "^2.0.3",
|
|
31
31
|
"@material/web": "^1.0.1",
|
|
32
32
|
"lit": "^2.0.2",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"README.md",
|
|
99
99
|
"LICENSE"
|
|
100
100
|
],
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "0b9f2df186e3efcc7f22edabe31ab773971c1585"
|
|
102
102
|
}
|