@digital-realty/ix-radio 1.2.4 → 1.2.14
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/IxRadio.d.ts +2 -2
- package/dist/IxRadio.js +2 -1
- package/dist/IxRadio.js.map +1 -1
- package/dist/ix-radio.min.js +1 -1
- package/package.json +8 -4
package/dist/IxRadio.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import '@material/web/radio/radio.js';
|
|
3
3
|
import { Radio } from '@material/web/radio/internal/radio.js';
|
|
4
4
|
declare const CHECKED: unique symbol;
|
|
5
|
-
declare const
|
|
6
|
-
export declare class IxRadio extends
|
|
5
|
+
declare const IxRadioBase: typeof LitElement & import("@digital-realty/ix-shared-fns/aria-forward-mixin.js").Constructor<LitElement & import("@digital-realty/ix-shared-fns/aria-forward-mixin.js").AriaForwardMixinInterface>;
|
|
6
|
+
export declare class IxRadio extends IxRadioBase {
|
|
7
7
|
/** @nocollapse */
|
|
8
8
|
static readonly formAssociated = true;
|
|
9
9
|
/** @nocollapse */
|
package/dist/IxRadio.js
CHANGED
|
@@ -9,7 +9,8 @@ import { spread } from '@open-wc/lit-helpers';
|
|
|
9
9
|
import { isActivationClick } from '@material/web/internal/events/form-label-activation.js';
|
|
10
10
|
import { SingleSelectionController } from './single-selection-controller.js';
|
|
11
11
|
const CHECKED = Symbol('checked');
|
|
12
|
-
|
|
12
|
+
const IxRadioBase = AriaForwardMixin(LitElement);
|
|
13
|
+
export class IxRadio extends IxRadioBase {
|
|
13
14
|
/**
|
|
14
15
|
* Whether or not the radio is selected.
|
|
15
16
|
*/
|
package/dist/IxRadio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxRadio.js","sourceRoot":"","sources":["../src/IxRadio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/radio/radio.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\nimport { spread } from '@open-wc/lit-helpers';\nimport { isActivationClick } from '@material/web/internal/events/form-label-activation.js';\nimport { Radio } from '@material/web/radio/internal/radio.js';\nimport { SingleSelectionController } from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\nexport class IxRadio extends AriaForwardMixin(LitElement) {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.radio') readonly component!: Radio;\n\n /**\n * Whether or not the radio is selected.\n */\n @property({ type: Boolean })\n get checked() {\n return this[CHECKED];\n }\n\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[CHECKED] = checked;\n const state = String(checked);\n this.internals.setFormValue(this.checked ? this.value : null, state);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n [CHECKED] = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property() label: string = '';\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property() target: 'wrapper' | '' = '';\n\n @property({ attribute: 'html-id' }) htmlId: string | undefined;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Please select an option.';\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 /**\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 private readonly selectionController = new SingleSelectionController(this);\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private async handleClick(event: Event) {\n if (this.disabled) {\n return;\n }\n\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.defaultPrevented) {\n return;\n }\n\n if (isActivationClick(event)) {\n this.focus();\n }\n\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n this.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true })\n );\n }\n\n private async handleKeydown(event: KeyboardEvent) {\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.key !== ' ' || event.defaultPrevented) {\n return;\n }\n\n this.click();\n }\n\n constructor() {\n super();\n this.addController(this.selectionController);\n if (!isServer) {\n this.internals.role = 'radio';\n this.addEventListener('click', this.handleClick.bind(this));\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n }\n }\n\n protected override updated() {\n this.internals.ariaChecked = String(this.checked);\n // Handle radio group validation\n if (this.form) {\n const formVal = new FormData(this.form).get(this.name);\n if (!formVal && this.required) {\n this.internals.setValidity(\n { valueMissing: true },\n this.errorText,\n this.component\n );\n } else {\n this.form\n .querySelectorAll(`ix-radio[name=${this.name}]`)\n .forEach(el => {\n (el as HTMLFormElement).internals.setValidity({\n valueMissing: false,\n });\n });\n }\n }\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 get renderRadio() {\n return html`\n <md-radio\n class=\"radio\"\n name=${this.name}\n value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n id=${ifDefined(this.htmlId)}\n touch-target=${this.target}\n ?required=${this.required}\n ${spread(this.ariaAttributes)}\n ></md-radio>\n `;\n }\n\n protected render() {\n const radioEl =\n this.label !== ''\n ? html`<label ?disabled=${this.disabled}\n >${this.renderRadio} <span> ${this.label}</span></label\n >`\n : this.renderRadio;\n\n return html`${radioEl}\n <slot\n name=\"description\"\n class=\"description\"\n style=\"margin-block-start: 0; margin-block-end: 0;\"\n ></slot>`;\n }\n\n focus() {\n this.component.focus();\n }\n\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxRadio.js","sourceRoot":"","sources":["../src/IxRadio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/radio/radio.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\nimport { spread } from '@open-wc/lit-helpers';\nimport { isActivationClick } from '@material/web/internal/events/form-label-activation.js';\nimport { Radio } from '@material/web/radio/internal/radio.js';\nimport { SingleSelectionController } from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\nconst IxRadioBase = AriaForwardMixin(LitElement);\n\nexport class IxRadio extends IxRadioBase {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.radio') readonly component!: Radio;\n\n /**\n * Whether or not the radio is selected.\n */\n @property({ type: Boolean })\n get checked() {\n return this[CHECKED];\n }\n\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[CHECKED] = checked;\n const state = String(checked);\n this.internals.setFormValue(this.checked ? this.value : null, state);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n [CHECKED] = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property() label: string = '';\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property() target: 'wrapper' | '' = '';\n\n @property({ attribute: 'html-id' }) htmlId: string | undefined;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Please select an option.';\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 /**\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 private readonly selectionController = new SingleSelectionController(this);\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private async handleClick(event: Event) {\n if (this.disabled) {\n return;\n }\n\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.defaultPrevented) {\n return;\n }\n\n if (isActivationClick(event)) {\n this.focus();\n }\n\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n this.dispatchEvent(\n new InputEvent('input', { bubbles: true, composed: true })\n );\n }\n\n private async handleKeydown(event: KeyboardEvent) {\n // allow event to propagate to user code after a microtask.\n await 0;\n if (event.key !== ' ' || event.defaultPrevented) {\n return;\n }\n\n this.click();\n }\n\n constructor() {\n super();\n this.addController(this.selectionController);\n if (!isServer) {\n this.internals.role = 'radio';\n this.addEventListener('click', this.handleClick.bind(this));\n this.addEventListener('keydown', this.handleKeydown.bind(this));\n }\n }\n\n protected override updated() {\n this.internals.ariaChecked = String(this.checked);\n // Handle radio group validation\n if (this.form) {\n const formVal = new FormData(this.form).get(this.name);\n if (!formVal && this.required) {\n this.internals.setValidity(\n { valueMissing: true },\n this.errorText,\n this.component\n );\n } else {\n this.form\n .querySelectorAll(`ix-radio[name=${this.name}]`)\n .forEach(el => {\n (el as HTMLFormElement).internals.setValidity({\n valueMissing: false,\n });\n });\n }\n }\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 get renderRadio() {\n return html`\n <md-radio\n class=\"radio\"\n name=${this.name}\n value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n id=${ifDefined(this.htmlId)}\n touch-target=${this.target}\n ?required=${this.required}\n ${spread(this.ariaAttributes)}\n ></md-radio>\n `;\n }\n\n protected render() {\n const radioEl =\n this.label !== ''\n ? html`<label ?disabled=${this.disabled}\n >${this.renderRadio} <span> ${this.label}</span></label\n >`\n : this.renderRadio;\n\n return html`${radioEl}\n <slot\n name=\"description\"\n class=\"description\"\n style=\"margin-block-start: 0; margin-block-end: 0;\"\n ></slot>`;\n }\n\n focus() {\n this.component.focus();\n }\n\n formResetCallback() {\n // The checked property does not reflect, so the original attribute set by\n // the user is used to determine the default value.\n this.checked = this.hasAttribute('checked');\n }\n\n formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n}\n"]}
|
package/dist/ix-radio.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement,isServer,html,css}from"lit";import{__decorate}from"tslib";import{ifDefined}from"lit/directives/if-defined.js";import{query,property}from"lit/decorators.js";import"@material/web/radio/radio.js";import{AriaForwardMixin}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread}from"@open-wc/lit-helpers";import{isActivationClick}from"@material/web/internal/events/form-label-activation.js";class SingleSelectionController{constructor(e){this.host=e,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{var i="ArrowDown"===t.key,r="ArrowLeft"===t.key,s="ArrowRight"===t.key;if(r||s||i||"ArrowUp"===t.key){var o=this.getNamedSiblings();if(o.length){t.preventDefault();var a="rtl"===getComputedStyle(this.host).direction?r||i:s||i,n=o.indexOf(this.host);let e=a?n+1:n-1;for(;e!==n;){e>=o.length?e=0:e<0&&(e=o.length-1);var d=o[e];if(!d.hasAttribute("disabled")){for(var h of o)h!==d&&(h.checked=!1,h.tabIndex=-1,h.blur());d.checked=!0,d.tabIndex=0,d.focus(),d.dispatchEvent(new Event("change",{bubbles:!0}));break}a?e++:e--}}}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(var e of this.getNamedSiblings())e!==this.host&&(e.checked=!1)}updateTabIndices(){var e=this.getNamedSiblings(),t=e.find(e=>e.checked);if(t||this.focused){var i,r=t||this.host;r.tabIndex=0;for(i of e)i!==r&&(i.tabIndex=-1)}else for(var s of e)s.tabIndex=0}getNamedSiblings(){var e=this.host.getAttribute("name");return e&&this.root?Array.from(this.root.querySelectorAll(`[name="${e}"]`)):[]}}var _a;let CHECKED=Symbol("checked");class IxRadio extends
|
|
1
|
+
import{LitElement,isServer,html,css}from"lit";import{__decorate}from"tslib";import{ifDefined}from"lit/directives/if-defined.js";import{query,property}from"lit/decorators.js";import"@material/web/radio/radio.js";import{AriaForwardMixin}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread}from"@open-wc/lit-helpers";import{isActivationClick}from"@material/web/internal/events/form-label-activation.js";class SingleSelectionController{constructor(e){this.host=e,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{var i="ArrowDown"===t.key,r="ArrowLeft"===t.key,s="ArrowRight"===t.key;if(r||s||i||"ArrowUp"===t.key){var o=this.getNamedSiblings();if(o.length){t.preventDefault();var a="rtl"===getComputedStyle(this.host).direction?r||i:s||i,n=o.indexOf(this.host);let e=a?n+1:n-1;for(;e!==n;){e>=o.length?e=0:e<0&&(e=o.length-1);var d=o[e];if(!d.hasAttribute("disabled")){for(var h of o)h!==d&&(h.checked=!1,h.tabIndex=-1,h.blur());d.checked=!0,d.tabIndex=0,d.focus(),d.dispatchEvent(new Event("change",{bubbles:!0}));break}a?e++:e--}}}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(var e of this.getNamedSiblings())e!==this.host&&(e.checked=!1)}updateTabIndices(){var e=this.getNamedSiblings(),t=e.find(e=>e.checked);if(t||this.focused){var i,r=t||this.host;r.tabIndex=0;for(i of e)i!==r&&(i.tabIndex=-1)}else for(var s of e)s.tabIndex=0}getNamedSiblings(){var e=this.host.getAttribute("name");return e&&this.root?Array.from(this.root.querySelectorAll(`[name="${e}"]`)):[]}}var _a;let CHECKED=Symbol("checked"),IxRadioBase=AriaForwardMixin(LitElement);class IxRadio extends IxRadioBase{get checked(){return this[CHECKED]}set checked(e){var t=this.checked;t!==e&&(this[CHECKED]=e,e=String(e),this.internals.setFormValue(this.checked?this.value:null,e),this.requestUpdate("checked",t),this.selectionController.handleCheckedChange())}get name(){var e;return null!=(e=this.getAttribute("name"))?e:""}set name(e){this.setAttribute("name",e)}get form(){return this.internals.form}get labels(){return this.internals.labels}async handleClick(e){this.disabled||(await 0,e.defaultPrevented)||(isActivationClick(e)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})))}async handleKeydown(e){await 0," "!==e.key||e.defaultPrevented||this.click()}constructor(){super(),this[_a]=!1,this.disabled=!1,this.label="",this.value="on",this.target="",this.required=!1,this.errorText="Please select an option.",this.selectionController=new SingleSelectionController(this),this.internals=this.attachInternals(),this.addController(this.selectionController),isServer||(this.internals.role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}updated(){this.internals.ariaChecked=String(this.checked),this.form&&(!new FormData(this.form).get(this.name)&&this.required?this.internals.setValidity({valueMissing:!0},this.errorText,this.component):this.form.querySelectorAll(`ix-radio[name=${this.name}]`).forEach(e=>{e.internals.setValidity({valueMissing:!1})}))}get validity(){return this.internals.validity}get renderRadio(){return html`<md-radio class="radio" name="${this.name}" value="${this.value}" ?checked="${this.checked}" ?disabled="${this.disabled}" id="${ifDefined(this.htmlId)}" touch-target="${this.target}" ?required="${this.required}" ${spread(this.ariaAttributes)}></md-radio>`}render(){var e=""!==this.label?html`<label ?disabled="${this.disabled}">${this.renderRadio} <span>${this.label}</span></label>`:this.renderRadio;return html`${e}<slot name="description" class="description" style="margin-block-start:0;margin-block-end:0"></slot>`}focus(){this.component.focus()}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(e){this.checked="true"===e}}_a=CHECKED,IxRadio.formAssociated=!0,IxRadio.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".radio")],IxRadio.prototype,"component",void 0),__decorate([property({type:Boolean})],IxRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],IxRadio.prototype,"disabled",void 0),__decorate([property()],IxRadio.prototype,"label",void 0),__decorate([property()],IxRadio.prototype,"value",void 0),__decorate([property()],IxRadio.prototype,"target",void 0),__decorate([property({attribute:"html-id"})],IxRadio.prototype,"htmlId",void 0),__decorate([property({type:Boolean})],IxRadio.prototype,"required",void 0),__decorate([property({type:String,attribute:"error-text"})],IxRadio.prototype,"errorText",void 0);class IxRadioStyled extends IxRadio{}IxRadioStyled.styles=css`::slotted([slot=description]){margin-block-start:0;margin-block-end:0}label{align-items:center;display:flex;gap:var(--ix-checkbox-radio-gap,.5rem);line-height:var(--ix-radio-label-line-height,2.625rem)}.description{display:block;margin:var(--ix-radio-margin,0);font-weight:var(--ix-radio-font-weight,var(--text-caption-weight,normal));font-size:var(--ix-radio-font-size,var(--text-caption-size,.75rem));line-height:var(--ix-radio-line-height,var(--text-caption-line-height,1.33333333em));letter-spacing:var(--ix-radio-letter-spacing,var(--text-caption-letter-spacing,.03333333em));color:var(--ix-radio-color,var(--clr-on-surface,#092241));padding:var(--ix-radio-padding,0 0 0 28px)}[disabled]{color:var(--ix-radio-clr-disabled,var(--clr-on-surface-disabled,#09224180))}`,window.customElements.define("ix-radio",IxRadioStyled);export{IxRadioStyled};
|
package/package.json
CHANGED
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
"description": "Webcomponent ix-radio following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.2.
|
|
6
|
+
"version": "1.2.14",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
10
11
|
"exports": {
|
|
11
|
-
".":
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"default": "./dist/index.js"
|
|
15
|
+
},
|
|
12
16
|
"./ix-radio.js": "./dist/ix-radio.js",
|
|
13
17
|
"./ix-radio.min.js": "./dist/ix-radio.min.js",
|
|
14
18
|
"./IxRadio": "./dist/react/IxRadio.js"
|
|
@@ -27,7 +31,7 @@
|
|
|
27
31
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
28
32
|
},
|
|
29
33
|
"dependencies": {
|
|
30
|
-
"@digital-realty/ix-shared-fns": "1.0.
|
|
34
|
+
"@digital-realty/ix-shared-fns": "^1.0.12",
|
|
31
35
|
"@lit/react": "^1.0.2",
|
|
32
36
|
"@material/web": "2.4.0",
|
|
33
37
|
"@open-wc/lit-helpers": "^0.7.0",
|
|
@@ -110,5 +114,5 @@
|
|
|
110
114
|
"README.md",
|
|
111
115
|
"LICENSE"
|
|
112
116
|
],
|
|
113
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "b47ba9e880c386ecf579ab21a118f94221cd1e1c"
|
|
114
118
|
}
|