@digital-realty/ix-button 3.2.5 → 3.2.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.
Files changed (8) hide show
  1. package/README.md +2 -54
  2. package/dist/IxButton.d.ts +24 -7
  3. package/dist/IxButton.js +114 -68
  4. package/dist/IxButton.js.map +1 -1
  5. package/dist/react/IxButton.d.ts +1 -3
  6. package/dist/react/IxButton.js +0 -3
  7. package/dist/react/IxButton.js.map +1 -1
  8. package/package.json +5 -2
package/README.md CHANGED
@@ -25,58 +25,6 @@ npm i @digital-realty/ix-button
25
25
  ```
26
26
 
27
27
 
28
- ## Linting and formatting
28
+ ## Demo and Documentation
29
29
 
30
- To scan the project for linting and formatting errors, run
31
-
32
- ```bash
33
- npm run lint
34
- ```
35
-
36
- To automatically fix linting and formatting errors, run
37
-
38
- ```bash
39
- npm run format
40
- ```
41
-
42
- ## Testing with Web Test Runner
43
-
44
- To execute a single test run:
45
-
46
- ```bash
47
- npm run test
48
- ```
49
-
50
- To run the tests in interactive watch mode run:
51
-
52
- ```bash
53
- npm run test:watch
54
- ```
55
-
56
- ## Demoing with Storybook
57
-
58
- To run a local instance of Storybook for your component, run
59
-
60
- ```bash
61
- npm run storybook
62
- ```
63
-
64
- To build a production version of Storybook, run
65
-
66
- ```bash
67
- npm run storybook:build
68
- ```
69
-
70
- ## Tooling configs
71
-
72
- For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
73
-
74
- If you customize the configuration a lot, you can consider moving them to individual files.
75
-
76
- ## Local Demo with `web-dev-server`
77
-
78
- ```bash
79
- npm start
80
- ```
81
-
82
- To run a local development server that serves the basic demo located in `demo/index.html`
30
+ Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-button--default).
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,11 +50,8 @@ export declare class IxButton extends LitElement {
30
50
  * Whether to display the icon or not.
31
51
  */
32
52
  hasIcon: boolean;
33
- icon: string;
34
- text: string;
35
- type: 'button' | 'submit' | 'reset';
36
53
  appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
37
- onClick: (event: MouseEvent) => void;
38
- private renderContent;
54
+ constructor();
55
+ private readonly handleActivationClick;
39
56
  render(): import("lit-html").TemplateResult<1>;
40
57
  }
package/dist/IxButton.js CHANGED
@@ -1,14 +1,52 @@
1
+ var _a;
1
2
  import { __decorate } from "tslib";
2
- import { html, LitElement, nothing } 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,96 +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.icon = '';
37
- this.text = 'Submit';
38
- this.type = 'button';
39
74
  this.appearance = 'filled';
40
- this.onClick = () => { };
41
- }
42
- static get styles() {
43
- return [];
44
- }
45
- renderContent() {
46
- const icon = html `<md-icon slot="icon">${this.icon}</md-icon>`;
47
- this.trailingIcon = true;
48
- return html ` ${this.trailingIcon ? icon : nothing} ${this.text}
49
- ${this.trailingIcon ? nothing : icon}`;
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
+ }
50
85
  }
51
86
  render() {
52
87
  let comp;
53
88
  if (this.appearance === 'elevated') {
54
89
  comp = html `<md-elevated-button
55
- @click=${this.onClick}
56
- .disabled=${this.disabled}
57
- .target=${this.target}
58
- .href=${this.href}
59
- .value=${this.text}
60
- .icon=${this.icon}
61
- ?has-icon=${this.hasIcon}
90
+ ?disabled=${this.disabled}
91
+ target=${ifDefined(this.target)}
92
+ href=${ifDefined(this.href)}
62
93
  ?trailing-icon=${this.trailingIcon}
94
+ ?has-icon=${this.hasIcon}
95
+ value="${this.value}"
96
+ type=${this.type}
97
+ class="md-button"
63
98
  >
64
- ${this.hasIcon ? this.renderContent() : this.text}
99
+ <slot></slot>
100
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
65
101
  </md-elevated-button>`;
66
102
  }
67
103
  else if (this.appearance === 'filled') {
68
104
  comp = html `<md-filled-button
69
- @click=${this.onClick}
70
- .disabled=${this.disabled}
71
- .target=${this.target}
72
- .href=${this.href}
73
- .value=${this.text}
74
- .icon=${this.icon}
75
- ?has-icon=${this.hasIcon}
105
+ ?disabled=${this.disabled}
106
+ target=${ifDefined(this.target)}
107
+ href=${ifDefined(this.href)}
76
108
  ?trailing-icon=${this.trailingIcon}
109
+ ?has-icon=${this.hasIcon}
110
+ value="${this.value}"
111
+ type=${this.type}
112
+ class="md-button"
77
113
  >
78
- ${this.hasIcon ? this.renderContent() : this.text}
114
+ <slot></slot>
115
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
79
116
  </md-filled-button>`;
80
117
  }
81
118
  else if (this.appearance === 'filled-tonal') {
82
119
  comp = html `<md-filled-tonal-button
83
- @click=${this.onClick}
84
- .disabled=${this.disabled}
85
- .target=${this.target}
86
- .href=${this.href}
87
- .value=${this.text}
88
- .icon=${this.icon}
89
- ?has-icon=${this.hasIcon}
120
+ ?disabled=${this.disabled}
121
+ target=${ifDefined(this.target)}
122
+ href=${ifDefined(this.href)}
90
123
  ?trailing-icon=${this.trailingIcon}
124
+ ?has-icon=${this.hasIcon}
125
+ value="${this.value}"
126
+ type=${this.type}
127
+ class="md-button"
91
128
  >
92
- ${this.hasIcon ? this.renderContent() : this.text}
129
+ <slot></slot>
130
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
93
131
  </md-filled-tonal-button>`;
94
132
  }
95
133
  else if (this.appearance === 'outlined') {
96
134
  comp = html `<md-outlined-button
97
- @click=${this.onClick}
98
- .disabled=${this.disabled}
99
- .target=${this.target}
100
- .href=${this.href}
101
- .value=${this.text}
102
- .icon=${this.icon}
103
- ?has-icon=${this.hasIcon}
135
+ ?disabled=${this.disabled}
136
+ target=${ifDefined(this.target)}
137
+ href=${ifDefined(this.href)}
104
138
  ?trailing-icon=${this.trailingIcon}
139
+ ?has-icon=${this.hasIcon}
140
+ value="${this.value}"
141
+ type=${this.type}
142
+ class="md-button"
105
143
  >
106
- ${this.hasIcon ? this.renderContent() : this.text}
144
+ <slot></slot>
145
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
107
146
  </md-outlined-button>`;
108
147
  }
109
148
  else if (this.appearance === 'text') {
110
149
  comp = html `<md-text-button
111
- @click=${this.onClick}
112
- .disabled=${this.disabled}
113
- .target=${this.target}
114
- .href=${this.href}
115
- .value=${this.text}
116
- .icon=${this.icon}
117
- ?has-icon=${this.hasIcon}
150
+ ?disabled=${this.disabled}
151
+ target=${ifDefined(this.target)}
152
+ href=${ifDefined(this.href)}
118
153
  ?trailing-icon=${this.trailingIcon}
154
+ ?has-icon=${this.hasIcon}
155
+ value="${this.value}"
156
+ type=${this.type}
157
+ class="md-button"
119
158
  >
120
- ${this.hasIcon ? this.renderContent() : this.text}
159
+ <slot></slot>
160
+ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
121
161
  </md-text-button>`;
122
162
  }
123
163
  return html `${comp}`;
124
164
  }
125
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);
126
184
  __decorate([
127
185
  property({ type: Boolean, reflect: true })
128
186
  ], IxButton.prototype, "disabled", void 0);
@@ -138,19 +196,7 @@ __decorate([
138
196
  __decorate([
139
197
  property({ type: Boolean, attribute: 'has-icon' })
140
198
  ], IxButton.prototype, "hasIcon", void 0);
141
- __decorate([
142
- property()
143
- ], IxButton.prototype, "icon", void 0);
144
- __decorate([
145
- property()
146
- ], IxButton.prototype, "text", void 0);
147
- __decorate([
148
- property()
149
- ], IxButton.prototype, "type", void 0);
150
199
  __decorate([
151
200
  property()
152
201
  ], IxButton.prototype, "appearance", void 0);
153
- __decorate([
154
- property()
155
- ], IxButton.prototype, "onClick", void 0);
156
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, nothing } 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() icon = '';\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 private renderContent() {\n const icon = html`<md-icon slot=\"icon\">${this.icon}</md-icon>`;\n\n this.trailingIcon = true;\n\n return html` ${this.trailingIcon ? icon : nothing} ${this.text}\n ${this.trailingIcon ? nothing : icon}`;\n }\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 .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-elevated-button>`;\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 .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-filled-button>`;\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 .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-filled-tonal-button>`;\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 .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-outlined-button>`;\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 .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-text-button>`;\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/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.5",
6
+ "version": "3.2.7",
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": "8b801892bdb92ec0c653961b76f4a144cc35a4f1"
106
+ "gitHead": "f487170ac27de967505c921dabf983d2a122e625"
104
107
  }