@digital-realty/ix-email-list 1.0.5 → 1.0.7
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/IxEmailList.d.ts +1 -1
- package/dist/IxEmailList.js +9 -9
- package/dist/IxEmailList.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/IxEmailList.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export declare class IxEmailList extends LitElement {
|
|
|
41
41
|
onChanged: any;
|
|
42
42
|
checkDuplicates: boolean;
|
|
43
43
|
maximumEmailCount: number;
|
|
44
|
-
private
|
|
44
|
+
private errorMessage;
|
|
45
45
|
/**
|
|
46
46
|
* The associated form element with which this element's value will submit.
|
|
47
47
|
*/
|
package/dist/IxEmailList.js
CHANGED
|
@@ -34,7 +34,7 @@ export class IxEmailList extends LitElement {
|
|
|
34
34
|
this.onChanged = () => { };
|
|
35
35
|
this.checkDuplicates = false;
|
|
36
36
|
this.maximumEmailCount = -1;
|
|
37
|
-
this.
|
|
37
|
+
this.errorMessage = '';
|
|
38
38
|
this.focused = false;
|
|
39
39
|
this.inputValue = '';
|
|
40
40
|
this.chipRemove = async (id) => {
|
|
@@ -92,17 +92,17 @@ export class IxEmailList extends LitElement {
|
|
|
92
92
|
this.handleFocusout();
|
|
93
93
|
};
|
|
94
94
|
this.isValidList = () => {
|
|
95
|
-
this.
|
|
95
|
+
this.errorMessage = '';
|
|
96
96
|
this.error = false;
|
|
97
97
|
if (this.addresses.some((item) => !item.isValid))
|
|
98
|
-
this.addError(this.
|
|
98
|
+
this.addError(this.errorText);
|
|
99
99
|
if (this.checkDuplicates)
|
|
100
100
|
this.checkForDuplicates();
|
|
101
101
|
if (this.maximumEmailCount > 0)
|
|
102
102
|
this.validateEmailCount();
|
|
103
103
|
this.internals.setValidity({
|
|
104
104
|
badInput: this.error,
|
|
105
|
-
}, this.error ? this.
|
|
105
|
+
}, this.error ? this.errorMessage : '', this.emailInput);
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
108
|
static get styles() {
|
|
@@ -169,7 +169,7 @@ export class IxEmailList extends LitElement {
|
|
|
169
169
|
const address = item.toLowerCase().trim();
|
|
170
170
|
return {
|
|
171
171
|
address,
|
|
172
|
-
isValid: isValidEmail(address)
|
|
172
|
+
isValid: isValidEmail(address),
|
|
173
173
|
};
|
|
174
174
|
});
|
|
175
175
|
}
|
|
@@ -228,7 +228,7 @@ export class IxEmailList extends LitElement {
|
|
|
228
228
|
}
|
|
229
229
|
addError(errorText) {
|
|
230
230
|
this.error = true;
|
|
231
|
-
this.
|
|
231
|
+
this.errorMessage += errorText;
|
|
232
232
|
}
|
|
233
233
|
render() {
|
|
234
234
|
const classes = {
|
|
@@ -241,11 +241,11 @@ export class IxEmailList extends LitElement {
|
|
|
241
241
|
?focused=${this.focused}
|
|
242
242
|
?disabled=${this.disabled}
|
|
243
243
|
?required=${this.required}
|
|
244
|
-
?checkDuplicates
|
|
245
|
-
?maximumEmailCount
|
|
244
|
+
?checkDuplicates=${this.checkDuplicates}
|
|
245
|
+
?maximumEmailCount=${this.maximumEmailCount}
|
|
246
246
|
label=${this.label}
|
|
247
247
|
?error=${this.error}
|
|
248
|
-
error-text=${this.
|
|
248
|
+
error-text=${this.errorMessage}
|
|
249
249
|
@focusin=${this.handleFocusin}
|
|
250
250
|
@focusout=${this.handleFocusout}
|
|
251
251
|
>
|
package/dist/IxEmailList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxEmailList.js","sourceRoot":"","sources":["../src/IxEmailList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxEmailListStyles } from './ix-email-list-styles.js';\nimport { isValidEmail } from './utils/email-validation.js';\n\nexport interface EmailListItem {\n address: string;\n isValid: boolean;\n name?: string;\n isDuplicate?: boolean;\n}\n\nexport class IxEmailList extends LitElement {\n static {\n requestUpdateOnAriaChange(IxEmailList);\n }\n\n static get styles() {\n return [IxEmailListStyles];\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n @query('#email-input') emailInput!: HTMLInputElement;\n\n @property({ type: Array }) items: string[] = [];\n\n // eslint-disable-next-line class-methods-use-this\n @property() lookup: (address?: string) => string | undefined = () =>\n undefined;\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid email in list. ';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Array }) addresses: EmailListItem[] = [];\n\n // eslint-disable-next-line class-methods-use-this\n @property({ type: Function }) onChanged: any = () => {};\n\n @property({ type: Boolean, reflect: true }) checkDuplicates = false;\n\n @property({ type: Number, reflect: true }) maximumEmailCount = -1;\n\n\n private originalErrorText: string = this.errorText;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n @state() private focused = false;\n\n @state() private inputValue = '';\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n firstUpdated() {\n this.internals.setFormValue(this.value);\n if (this.value !== '') {\n this.addresses = this.value.split(',').map((item: string) => {\n const address = item.toLowerCase().trim();\n return {\n address,\n isValid: isValidEmail(address)\n };\n });\n }\n this.focused = this.addresses.length > 0;\n this.isValidList();\n }\n\n private chipRemove = async (id: number) => {\n const addresses = this.addresses.filter((_item, i: number) => i !== id);\n this.addresses = [];\n await 0;\n this.addresses = addresses;\n this.isValidList();\n this.onChanged(this.addresses);\n if (!this.addresses.length) {\n this.handleFocusout();\n }\n };\n\n handleFocusin = () => {\n this.focused = true;\n };\n\n handleFocusout = () => {\n if (this.inputValue) {\n this.resolveInput();\n } else if (this.value !== '') {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n keydown = (e: KeyboardEvent) => {\n // input completion keys\n const completionKeys = [' ', ',', 'Tab', 'Enter'];\n if (completionKeys.includes(e.key) && this.inputValue.length) {\n e.preventDefault();\n this.resolveInput();\n }\n };\n\n resolveInput = () => {\n const address = this.inputValue.toLowerCase();\n const isValid = isValidEmail(address);\n\n const name = this.lookup(address);\n this.addresses = [...this.addresses, { address, isValid, name }];\n this.inputValue = '';\n this.isValidList();\n this.onChanged(this.addresses);\n };\n\n input = (e: InputEvent) => {\n const { value } = e.target as HTMLInputElement;\n this.inputValue = value;\n };\n\n clear = () => {\n this.addresses = [];\n this.inputValue = '';\n this.value = '';\n this.error = false;\n this.onChanged(this.addresses);\n this.handleFocusout();\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.clear();\n this.value = this.getAttribute('value') ?? '';\n }\n\n isValidList = () => {\n this.errorText = '';\n this.error = false;\n\n if(this.addresses.some((item: EmailListItem) => !item.isValid))\n this.addError(this.originalErrorText); \n\n if(this.checkDuplicates)\n this.checkForDuplicates();\n\n if(this.maximumEmailCount > 0)\n this.validateEmailCount();\n\n this.internals.setValidity(\n {\n badInput: this.error,\n },\n this.error ? this.errorText : '',\n this.emailInput\n );\n };\n\n validateEmailCount(){\n if(this.addresses.length > this.maximumEmailCount)\n this.addError(`Maximum of ${this.maximumEmailCount} emails are allowed. `); \n }\n\n checkForDuplicates(){\n let hasDuplicates = false;\n\n const groupByAddress = this.addresses.reduce((addressMap, email, index) => {\n const { address } = email;\n \n if(!addressMap[address]) { addressMap[address] = []; }\n addressMap[address].push(index);\n return addressMap;\n }, {} as Record<string, number[]>);\n\n Object.values(groupByAddress).forEach((addressIds: number[])=>{\n if(addressIds.length > 1) {\n hasDuplicates = true;\n addressIds.forEach(index=>{\n this.addresses[index].isDuplicate = true;\n });\n } else {\n this.addresses[addressIds[0]].isDuplicate = false;\n }\n });\n\n if(hasDuplicates) {\n this.addError('Duplicate emails detected.');\n }\n }\n\n static labelText = (item: EmailListItem) => {\n const address = item.isValid ? item.address : `${item.address}!`;\n return item.name ? item.name : address;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('addresses')) {\n this.value = this.addresses.map(item => item.address).join(', ');\n }\n this.internals.setFormValue(this.value);\n }\n\n override focus() {\n this.emailInput.focus();\n }\n\n private addError(errorText: string){\n this.error = true;\n this.errorText += errorText;\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <ix-field\n class=\"${classMap(classes)}\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?checkDuplicates = ${this.checkDuplicates}\n ?maximumEmailCount = ${this.maximumEmailCount}\n label=${this.label}\n ?error=${this.error}\n error-text=${this.errorText}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n >\n <ix-chip-set>\n ${this.addresses.map(\n (item, id: number) => html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${IxEmailList.labelText(item)}\n class=${!item.isValid || item.isDuplicate ? 'error' : ''}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n )}\n <input\n id=\"email-input\"\n @keydown=${this.keydown}\n @input=${this.input}\n .value=${this.inputValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n </ix-chip-set>\n <slot name=\"end\" slot=\"end\">\n ${this.addresses.length\n ? html`<ix-icon-button\n class=\"clear-icon\"\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n </slot>\n </ix-field>\n `;\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"IxEmailList.js","sourceRoot":"","sources":["../src/IxEmailList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxEmailListStyles } from './ix-email-list-styles.js';\nimport { isValidEmail } from './utils/email-validation.js';\n\nexport interface EmailListItem {\n address: string;\n isValid: boolean;\n name?: string;\n isDuplicate?: boolean;\n}\n\nexport class IxEmailList extends LitElement {\n static {\n requestUpdateOnAriaChange(IxEmailList);\n }\n\n static get styles() {\n return [IxEmailListStyles];\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n @query('#email-input') emailInput!: HTMLInputElement;\n\n @property({ type: Array }) items: string[] = [];\n\n // eslint-disable-next-line class-methods-use-this\n @property() lookup: (address?: string) => string | undefined = () =>\n undefined;\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid email in list. ';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @property({ type: Array }) addresses: EmailListItem[] = [];\n\n // eslint-disable-next-line class-methods-use-this\n @property({ type: Function }) onChanged: any = () => {};\n\n @property({ type: Boolean, reflect: true }) checkDuplicates = false;\n\n @property({ type: Number, reflect: true }) maximumEmailCount = -1;\n\n private errorMessage: string = '';\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n @state() private focused = false;\n\n @state() private inputValue = '';\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n firstUpdated() {\n this.internals.setFormValue(this.value);\n if (this.value !== '') {\n this.addresses = this.value.split(',').map((item: string) => {\n const address = item.toLowerCase().trim();\n return {\n address,\n isValid: isValidEmail(address),\n };\n });\n }\n this.focused = this.addresses.length > 0;\n this.isValidList();\n }\n\n private chipRemove = async (id: number) => {\n const addresses = this.addresses.filter((_item, i: number) => i !== id);\n this.addresses = [];\n await 0;\n this.addresses = addresses;\n this.isValidList();\n this.onChanged(this.addresses);\n if (!this.addresses.length) {\n this.handleFocusout();\n }\n };\n\n handleFocusin = () => {\n this.focused = true;\n };\n\n handleFocusout = () => {\n if (this.inputValue) {\n this.resolveInput();\n } else if (this.value !== '') {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n keydown = (e: KeyboardEvent) => {\n // input completion keys\n const completionKeys = [' ', ',', 'Tab', 'Enter'];\n if (completionKeys.includes(e.key) && this.inputValue.length) {\n e.preventDefault();\n this.resolveInput();\n }\n };\n\n resolveInput = () => {\n const address = this.inputValue.toLowerCase();\n const isValid = isValidEmail(address);\n\n const name = this.lookup(address);\n this.addresses = [...this.addresses, { address, isValid, name }];\n this.inputValue = '';\n this.isValidList();\n this.onChanged(this.addresses);\n };\n\n input = (e: InputEvent) => {\n const { value } = e.target as HTMLInputElement;\n this.inputValue = value;\n };\n\n clear = () => {\n this.addresses = [];\n this.inputValue = '';\n this.value = '';\n this.error = false;\n this.onChanged(this.addresses);\n this.handleFocusout();\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.clear();\n this.value = this.getAttribute('value') ?? '';\n }\n\n isValidList = () => {\n this.errorMessage = '';\n this.error = false;\n\n if (this.addresses.some((item: EmailListItem) => !item.isValid))\n this.addError(this.errorText);\n\n if (this.checkDuplicates) this.checkForDuplicates();\n\n if (this.maximumEmailCount > 0) this.validateEmailCount();\n\n this.internals.setValidity(\n {\n badInput: this.error,\n },\n this.error ? this.errorMessage : '',\n this.emailInput\n );\n };\n\n validateEmailCount() {\n if (this.addresses.length > this.maximumEmailCount)\n this.addError(\n `Maximum of ${this.maximumEmailCount} emails are allowed. `\n );\n }\n\n checkForDuplicates() {\n let hasDuplicates = false;\n\n const groupByAddress = this.addresses.reduce((addressMap, email, index) => {\n const { address } = email;\n\n if (!addressMap[address]) {\n addressMap[address] = [];\n }\n addressMap[address].push(index);\n return addressMap;\n }, {} as Record<string, number[]>);\n\n Object.values(groupByAddress).forEach((addressIds: number[]) => {\n if (addressIds.length > 1) {\n hasDuplicates = true;\n addressIds.forEach(index => {\n this.addresses[index].isDuplicate = true;\n });\n } else {\n this.addresses[addressIds[0]].isDuplicate = false;\n }\n });\n\n if (hasDuplicates) {\n this.addError('Duplicate emails detected.');\n }\n }\n\n static labelText = (item: EmailListItem) => {\n const address = item.isValid ? item.address : `${item.address}!`;\n return item.name ? item.name : address;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('addresses')) {\n this.value = this.addresses.map(item => item.address).join(', ');\n }\n this.internals.setFormValue(this.value);\n }\n\n override focus() {\n this.emailInput.focus();\n }\n\n private addError(errorText: string) {\n this.error = true;\n this.errorMessage += errorText;\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <ix-field\n class=\"${classMap(classes)}\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?checkDuplicates=${this.checkDuplicates}\n ?maximumEmailCount=${this.maximumEmailCount}\n label=${this.label}\n ?error=${this.error}\n error-text=${this.errorMessage}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n >\n <ix-chip-set>\n ${this.addresses.map(\n (item, id: number) => html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${IxEmailList.labelText(item)}\n class=${!item.isValid || item.isDuplicate ? 'error' : ''}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n )}\n <input\n id=\"email-input\"\n @keydown=${this.keydown}\n @input=${this.input}\n .value=${this.inputValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n </ix-chip-set>\n <slot name=\"end\" slot=\"end\">\n ${this.addresses.length\n ? html`<ix-icon-button\n class=\"clear-icon\"\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n </slot>\n </ix-field>\n `;\n }\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { IxEmailList } from './IxEmailList.js';
|
|
1
|
+
export { IxEmailList, EmailListItem } from './IxEmailList.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,kBAAkB,CAAC","sourcesContent":["export { IxEmailList, EmailListItem } from './IxEmailList.js';\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-email-list following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.7",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@digital-realty/ix-chip": "*",
|
|
29
29
|
"@digital-realty/ix-field": "*",
|
|
30
|
-
"@digital-realty/ix-icon-button": "^1.0.
|
|
30
|
+
"@digital-realty/ix-icon-button": "^1.0.18",
|
|
31
31
|
"@digital-realty/theme": "*",
|
|
32
32
|
"@material/web": "^1.0.0",
|
|
33
33
|
"@web/test-runner-commands": "^0.9.0",
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
],
|
|
63
63
|
"rules": {
|
|
64
64
|
"no-unused-vars": "off",
|
|
65
|
+
"no-param-reassign": "off",
|
|
65
66
|
"@typescript-eslint/no-unused-vars": [
|
|
66
67
|
"error"
|
|
67
68
|
],
|
|
@@ -97,5 +98,5 @@
|
|
|
97
98
|
"README.md",
|
|
98
99
|
"LICENSE"
|
|
99
100
|
],
|
|
100
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "4c05bb34f477436b17f983c79215dd52a7d4c898"
|
|
101
102
|
}
|