@digital-realty/ix-button 3.2.4 → 3.2.6

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.
Files changed (9) hide show
  1. package/dist/IxButton.d.ts +24 -5
  2. package/dist/IxButton.js +129 -63
  3. package/dist/IxButton.js.map +1 -1
  4. package/dist/ix-button-styles.js +1 -8
  5. package/dist/ix-button-styles.js.map +1 -1
  6. package/dist/react/IxButton.d.ts +1 -3
  7. package/dist/react/IxButton.js +0 -3
  8. package/dist/react/IxButton.js.map +1 -1
  9. package/package.json +5 -2
package/dist/IxButton.d.ts CHANGED
@@ -1,11 +1,31 @@
1
1
  import { LitElement } from 'lit';
2
+ import { internals } from '@material/web/internal/controller/element-internals.js';
2
3
  import '@material/web/button/text-button.js';
3
4
  import '@material/web/button/elevated-button.js';
4
5
  import '@material/web/button/filled-button.js';
5
6
  import '@material/web/button/outlined-button.js';
6
7
  import '@material/web/button/filled-tonal-button.js';
7
- export declare class IxButton extends LitElement {
8
+ import '@material/web/icon/icon.js';
9
+ import { FormSubmitter, FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';
10
+ export declare class IxButton extends LitElement implements FormSubmitter {
8
11
  static get styles(): never[];
12
+ /** @nocollapse */
13
+ static readonly formAssociated = true;
14
+ /** @nocollapse */
15
+ static shadowRootOptions: ShadowRootInit;
16
+ /**
17
+ * The associated form element with which this element's value will submit.
18
+ */
19
+ get form(): HTMLFormElement | null;
20
+ get buttonElement(): HTMLElement;
21
+ get name(): string;
22
+ set name(name: string);
23
+ value: string;
24
+ /** @private */
25
+ [internals]: ElementInternals;
26
+ focus(): void;
27
+ blur(): void;
28
+ type: FormSubmitterType;
9
29
  /**
10
30
  * Whether or not the button is disabled.
11
31
  */
@@ -13,7 +33,7 @@ export declare class IxButton extends LitElement {
13
33
  /**
14
34
  * The URL that the link button points to.
15
35
  */
16
- href: string;
36
+ href: string | undefined;
17
37
  /**
18
38
  * Where to display the linked `href` URL for a link button. Common options
19
39
  * include `_blank` to open in a new tab.
@@ -30,9 +50,8 @@ export declare class IxButton extends LitElement {
30
50
  * Whether to display the icon or not.
31
51
  */
32
52
  hasIcon: boolean;
33
- text: string;
34
- type: 'button' | 'submit' | 'reset';
35
53
  appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
36
- onClick: (event: MouseEvent) => void;
54
+ constructor();
55
+ private readonly handleActivationClick;
37
56
  render(): import("lit-html").TemplateResult<1>;
38
57
  }
package/dist/IxButton.js CHANGED
@@ -1,14 +1,52 @@
1
+ var _a;
1
2
  import { __decorate } from "tslib";
2
- import { html, LitElement } from 'lit';
3
+ import { html, LitElement, isServer, nothing } from 'lit';
3
4
  import { property } from 'lit/decorators.js';
5
+ import { dispatchActivationClick, isActivationClick, } from '@material/web/internal/controller/events.js';
6
+ import { ifDefined } from 'lit/directives/if-defined.js';
7
+ import { internals } from '@material/web/internal/controller/element-internals.js';
4
8
  import '@material/web/button/text-button.js';
5
9
  import '@material/web/button/elevated-button.js';
6
10
  import '@material/web/button/filled-button.js';
7
11
  import '@material/web/button/outlined-button.js';
8
12
  import '@material/web/button/filled-tonal-button.js';
13
+ import '@material/web/icon/icon.js';
14
+ import { setupFormSubmitter, } from '@material/web/internal/controller/form-submitter.js';
15
+ import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
9
16
  export class IxButton extends LitElement {
17
+ static get styles() {
18
+ return [];
19
+ }
20
+ /**
21
+ * The associated form element with which this element's value will submit.
22
+ */
23
+ get form() {
24
+ return this[internals].form;
25
+ }
26
+ get buttonElement() {
27
+ var _b, _c, _d;
28
+ return (_d = (_c = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.md-button')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.button');
29
+ }
30
+ get name() {
31
+ var _b;
32
+ return (_b = this.getAttribute('name')) !== null && _b !== void 0 ? _b : '';
33
+ }
34
+ set name(name) {
35
+ this.setAttribute('name', name);
36
+ }
37
+ focus() {
38
+ this.buttonElement.focus();
39
+ }
40
+ blur() {
41
+ this.buttonElement.blur();
42
+ }
10
43
  constructor() {
11
- super(...arguments);
44
+ super();
45
+ this.value = '';
46
+ /** @private */
47
+ this[_a] = this /* needed for closure */
48
+ .attachInternals();
49
+ this.type = 'submit';
12
50
  /**
13
51
  * Whether or not the button is disabled.
14
52
  */
@@ -16,7 +54,7 @@ export class IxButton extends LitElement {
16
54
  /**
17
55
  * The URL that the link button points to.
18
56
  */
19
- this.href = '';
57
+ this.href = undefined;
20
58
  /**
21
59
  * Where to display the linked `href` URL for a link button. Common options
22
60
  * include `_blank` to open in a new tab.
@@ -33,79 +71,116 @@ export class IxButton extends LitElement {
33
71
  * Whether to display the icon or not.
34
72
  */
35
73
  this.hasIcon = false;
36
- this.text = 'Submit';
37
- this.type = 'button';
38
74
  this.appearance = 'filled';
39
- this.onClick = () => { };
40
- }
41
- static get styles() {
42
- return [];
75
+ this.handleActivationClick = (event) => {
76
+ if (!isActivationClick(event) || !this.buttonElement) {
77
+ return;
78
+ }
79
+ this.focus();
80
+ dispatchActivationClick(this.buttonElement);
81
+ };
82
+ if (!isServer) {
83
+ this.addEventListener('click', this.handleActivationClick);
84
+ }
43
85
  }
44
86
  render() {
45
87
  let comp;
46
88
  if (this.appearance === 'elevated') {
47
89
  comp = html `<md-elevated-button
48
- @click=${this.onClick}
49
- .disabled=${this.disabled}
50
- .target=${this.target}
51
- .href=${this.href}
52
- .trailingIcon=${this.trailingIcon}
53
- .hasIcon=${this.hasIcon}
54
- .value="${this.text}"
55
- >${this.text}</md-elevated-button
56
- >`;
90
+ ?disabled=${this.disabled}
91
+ target=${ifDefined(this.target)}
92
+ href=${ifDefined(this.href)}
93
+ ?trailing-icon=${this.trailingIcon}
94
+ ?has-icon=${this.hasIcon}
95
+ value="${this.value}"
96
+ type=${this.type}
97
+ class="md-button"
98
+ >
99
+ <slot></slot>
100
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
101
+ </md-elevated-button>`;
57
102
  }
58
103
  else if (this.appearance === 'filled') {
59
104
  comp = html `<md-filled-button
60
- @click=${this.onClick}
61
- .disabled=${this.disabled}
62
- .target=${this.target}
63
- .href=${this.href}
64
- .trailingIcon=${this.trailingIcon}
65
- .hasIcon=${this.hasIcon}
66
- .value="${this.text}"
67
- >${this.text}</md-filled-button
68
- >`;
105
+ ?disabled=${this.disabled}
106
+ target=${ifDefined(this.target)}
107
+ href=${ifDefined(this.href)}
108
+ ?trailing-icon=${this.trailingIcon}
109
+ ?has-icon=${this.hasIcon}
110
+ value="${this.value}"
111
+ type=${this.type}
112
+ class="md-button"
113
+ >
114
+ <slot></slot>
115
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
116
+ </md-filled-button>`;
69
117
  }
70
118
  else if (this.appearance === 'filled-tonal') {
71
119
  comp = html `<md-filled-tonal-button
72
- @click=${this.onClick}
73
- .disabled=${this.disabled}
74
- .target=${this.target}
75
- .href=${this.href}
76
- .trailingIcon=${this.trailingIcon}
77
- .hasIcon=${this.hasIcon}
78
- .value="${this.text}"
79
- >${this.text}</md-filled-tonal-button
80
- >`;
120
+ ?disabled=${this.disabled}
121
+ target=${ifDefined(this.target)}
122
+ href=${ifDefined(this.href)}
123
+ ?trailing-icon=${this.trailingIcon}
124
+ ?has-icon=${this.hasIcon}
125
+ value="${this.value}"
126
+ type=${this.type}
127
+ class="md-button"
128
+ >
129
+ <slot></slot>
130
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
131
+ </md-filled-tonal-button>`;
81
132
  }
82
133
  else if (this.appearance === 'outlined') {
83
134
  comp = html `<md-outlined-button
84
- @click=${this.onClick}
85
- .disabled=${this.disabled}
86
- .target=${this.target}
87
- .href=${this.href}
88
- .trailingIcon=${this.trailingIcon}
89
- .hasIcon=${this.hasIcon}
90
- .value="${this.text}"
91
- >${this.text}</md-outlined-button
92
- >`;
135
+ ?disabled=${this.disabled}
136
+ target=${ifDefined(this.target)}
137
+ href=${ifDefined(this.href)}
138
+ ?trailing-icon=${this.trailingIcon}
139
+ ?has-icon=${this.hasIcon}
140
+ value="${this.value}"
141
+ type=${this.type}
142
+ class="md-button"
143
+ >
144
+ <slot></slot>
145
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
146
+ </md-outlined-button>`;
93
147
  }
94
148
  else if (this.appearance === 'text') {
95
149
  comp = html `<md-text-button
96
- @click=${this.onClick}
97
- .disabled=${this.disabled}
98
- .target=${this.target}
99
- .href=${this.href}
100
- .trailingIcon=${this.trailingIcon}
101
- .hasIcon=${this.hasIcon}
102
- .value="${this.text}"
103
- >${this.text}</md-text-button
104
- >`;
150
+ ?disabled=${this.disabled}
151
+ target=${ifDefined(this.target)}
152
+ href=${ifDefined(this.href)}
153
+ ?trailing-icon=${this.trailingIcon}
154
+ ?has-icon=${this.hasIcon}
155
+ value="${this.value}"
156
+ type=${this.type}
157
+ class="md-button"
158
+ >
159
+ <slot></slot>
160
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
161
+ </md-text-button>`;
105
162
  }
106
163
  return html `${comp}`;
107
164
  }
108
165
  }
166
+ _a = internals;
167
+ (() => {
168
+ requestUpdateOnAriaChange(IxButton);
169
+ setupFormSubmitter(IxButton);
170
+ })();
171
+ /** @nocollapse */
172
+ IxButton.formAssociated = true;
173
+ /** @nocollapse */
174
+ IxButton.shadowRootOptions = {
175
+ mode: 'open',
176
+ delegatesFocus: true,
177
+ };
178
+ __decorate([
179
+ property()
180
+ ], IxButton.prototype, "value", void 0);
181
+ __decorate([
182
+ property()
183
+ ], IxButton.prototype, "type", void 0);
109
184
  __decorate([
110
185
  property({ type: Boolean, reflect: true })
111
186
  ], IxButton.prototype, "disabled", void 0);
@@ -121,16 +196,7 @@ __decorate([
121
196
  __decorate([
122
197
  property({ type: Boolean, attribute: 'has-icon' })
123
198
  ], IxButton.prototype, "hasIcon", void 0);
124
- __decorate([
125
- property()
126
- ], IxButton.prototype, "text", void 0);
127
- __decorate([
128
- property()
129
- ], IxButton.prototype, "type", void 0);
130
199
  __decorate([
131
200
  property()
132
201
  ], IxButton.prototype, "appearance", void 0);
133
- __decorate([
134
- property()
135
- ], IxButton.prototype, "onClick", void 0);
136
202
  //# sourceMappingURL=IxButton.js.map
package/dist/IxButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/filled-tonal-button.js';\n\nexport class IxButton extends LitElement {\n static get styles() {\n return [];\n }\n\n /**\n * Whether or not the button is disabled.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({ type: Boolean, attribute: 'trailing-icon' }) trailingIcon = false;\n\n /**\n * Whether to display the icon or not.\n */\n @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n @property()\n text: string = 'Submit';\n\n @property()\n type: 'button' | 'submit' | 'reset' = 'button';\n\n @property()\n appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text' =\n 'filled';\n\n @property()\n onClick: (event: MouseEvent) => void = () => {};\n\n render() {\n let comp;\n if (this.appearance === 'elevated') {\n comp = html`<md-elevated-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .trailingIcon=${this.trailingIcon}\n .hasIcon=${this.hasIcon}\n .value=\"${this.text}\"\n >${this.text}</md-elevated-button\n >`;\n } else if (this.appearance === 'filled') {\n comp = html`<md-filled-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .trailingIcon=${this.trailingIcon}\n .hasIcon=${this.hasIcon}\n .value=\"${this.text}\"\n >${this.text}</md-filled-button\n >`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .trailingIcon=${this.trailingIcon}\n .hasIcon=${this.hasIcon}\n .value=\"${this.text}\"\n >${this.text}</md-filled-tonal-button\n >`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .trailingIcon=${this.trailingIcon}\n .hasIcon=${this.hasIcon}\n .value=\"${this.text}\"\n >${this.text}</md-outlined-button\n >`;\n } else if (this.appearance === 'text') {\n comp = html`<md-text-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .trailingIcon=${this.trailingIcon}\n .hasIcon=${this.hasIcon}\n .value=\"${this.text}\"\n >${this.text}</md-text-button\n >`;\n }\n return html`${comp}`;\n }\n}\n"]}
1
+ {"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '@material/web/internal/controller/events.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { internals } from '@material/web/internal/controller/element-internals.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/icon/icon.js';\nimport {\n FormSubmitter,\n FormSubmitterType,\n setupFormSubmitter,\n} from '@material/web/internal/controller/form-submitter.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nexport class IxButton extends LitElement implements FormSubmitter {\n static get styles() {\n return [];\n }\n\n static {\n requestUpdateOnAriaChange(IxButton);\n setupFormSubmitter(IxButton);\n }\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\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 get buttonElement(): HTMLElement {\n return this.shadowRoot\n ?.querySelector('.md-button')\n ?.shadowRoot?.querySelector('.button')!;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n @property() value = '';\n\n /** @private */\n [internals] = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n override focus() {\n this.buttonElement.focus();\n }\n\n override blur() {\n this.buttonElement.blur();\n }\n\n @property() type: FormSubmitterType = 'submit';\n\n /**\n * Whether or not the button is disabled.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined = undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({ type: Boolean, attribute: 'trailing-icon' }) trailingIcon = false;\n\n /**\n * Whether to display the icon or not.\n */\n @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n @property()\n appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text' =\n 'filled';\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', this.handleActivationClick);\n }\n }\n\n private readonly handleActivationClick = (event: MouseEvent) => {\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n render() {\n let comp;\n if (this.appearance === 'elevated') {\n comp = html`<md-elevated-button\n ?disabled=${this.disabled}\n target=${ifDefined(this.target)}\n href=${ifDefined(this.href)}\n ?trailing-icon=${this.trailingIcon}\n ?has-icon=${this.hasIcon}\n value=\"${this.value}\"\n type=${this.type}\n class=\"md-button\"\n >\n <slot></slot>\n ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n </md-elevated-button>`;\n } else if (this.appearance === 'filled') {\n comp = html`<md-filled-button\n ?disabled=${this.disabled}\n target=${ifDefined(this.target)}\n href=${ifDefined(this.href)}\n ?trailing-icon=${this.trailingIcon}\n ?has-icon=${this.hasIcon}\n value=\"${this.value}\"\n type=${this.type}\n class=\"md-button\"\n >\n <slot></slot>\n ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n </md-filled-button>`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-button\n ?disabled=${this.disabled}\n target=${ifDefined(this.target)}\n href=${ifDefined(this.href)}\n ?trailing-icon=${this.trailingIcon}\n ?has-icon=${this.hasIcon}\n value=\"${this.value}\"\n type=${this.type}\n class=\"md-button\"\n >\n <slot></slot>\n ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n </md-filled-tonal-button>`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-button\n ?disabled=${this.disabled}\n target=${ifDefined(this.target)}\n href=${ifDefined(this.href)}\n ?trailing-icon=${this.trailingIcon}\n ?has-icon=${this.hasIcon}\n value=\"${this.value}\"\n type=${this.type}\n class=\"md-button\"\n >\n <slot></slot>\n ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n </md-outlined-button>`;\n } else if (this.appearance === 'text') {\n comp = html`<md-text-button\n ?disabled=${this.disabled}\n target=${ifDefined(this.target)}\n href=${ifDefined(this.href)}\n ?trailing-icon=${this.trailingIcon}\n ?has-icon=${this.hasIcon}\n value=\"${this.value}\"\n type=${this.type}\n class=\"md-button\"\n >\n <slot></slot>\n ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n </md-text-button>`;\n }\n return html`${comp}`;\n }\n}\n"]}
package/dist/ix-button-styles.js CHANGED
@@ -1,10 +1,3 @@
1
1
  import { css } from 'lit';
2
- export const IxButtonStyles = css `
3
- :host {
4
- font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);
5
- }
6
- button {
7
- font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);
8
- }
9
- `;
2
+ export const IxButtonStyles = css ``;
10
3
  //# sourceMappingURL=ix-button-styles.js.map
package/dist/ix-button-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-button-styles.js","sourceRoot":"","sources":["../src/ix-button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;CAOhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxButtonStyles = css`\n :host {\n font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);\n }\n button {\n font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-button-styles.js","sourceRoot":"","sources":["../src/ix-button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxButtonStyles = css``;\n"]}
package/dist/react/IxButton.d.ts CHANGED
@@ -1,4 +1,2 @@
1
1
  import { IxButton as IxButtonLit } from '../IxButton.js';
2
- export declare const IxButton: import("@lit-labs/react").ReactWebComponent<IxButtonLit, {
3
- onclick: string;
4
- }>;
2
+ export declare const IxButton: import("@lit-labs/react").ReactWebComponent<IxButtonLit, {}>;
package/dist/react/IxButton.js CHANGED
@@ -6,8 +6,5 @@ export const IxButton = createComponent({
6
6
  tagName: 'ix-button',
7
7
  elementClass: IxButtonLit,
8
8
  react: React,
9
- events: {
10
- onclick: 'onClick',
11
- },
12
9
  });
13
10
  //# sourceMappingURL=IxButton.js.map
package/dist/react/IxButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../../src/react/IxButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { IxButton as IxButtonLit } from '../IxButton.js';\n\nwindow.customElements.define('ix-button', IxButtonLit);\n\nexport const IxButton = createComponent({\n tagName: 'ix-button',\n elementClass: IxButtonLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}
1
+ {"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../../src/react/IxButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { IxButton as IxButtonLit } from '../IxButton.js';\n\nwindow.customElements.define('ix-button', IxButtonLit);\n\nexport const IxButton = createComponent({\n tagName: 'ix-button',\n elementClass: IxButtonLit,\n react: React,\n});\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-button following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "3.2.4",
6
+ "version": "3.2.6",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -76,6 +76,9 @@
76
76
  "ignorePackages": true
77
77
  }
78
78
  ]
79
+ },
80
+ "globals": {
81
+ "ShadowRootInit": true
79
82
  }
80
83
  },
81
84
  "prettier": {
@@ -100,5 +103,5 @@
100
103
  "README.md",
101
104
  "LICENSE"
102
105
  ],
103
- "gitHead": "1e8e36ae0147d1fb0037ba85c727e3a30daebbc9"
106
+ "gitHead": "6f24e0b54ae936855ab09710d9aedc3eff86c5f6"
104
107
  }