@digital-realty/ix-button 3.2.6 → 3.2.8
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/README.md +2 -54
- package/dist/IxButton.d.ts +2 -1
- package/dist/IxButton.js +23 -77
- package/dist/IxButton.js.map +1 -1
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -25,58 +25,6 @@ npm i @digital-realty/ix-button
|
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## Demo and Documentation
|
|
29
29
|
|
|
30
|
-
|
|
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
|
@@ -53,5 +53,6 @@ export declare class IxButton extends LitElement implements FormSubmitter {
|
|
|
53
53
|
appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
|
|
54
54
|
constructor();
|
|
55
55
|
private readonly handleActivationClick;
|
|
56
|
-
|
|
56
|
+
private readonly tags;
|
|
57
|
+
protected render(): import("lit-html").TemplateResult;
|
|
57
58
|
}
|
package/dist/IxButton.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var _a;
|
|
2
2
|
import { __decorate } from "tslib";
|
|
3
3
|
import { html, LitElement, isServer, nothing } from 'lit';
|
|
4
|
+
import { html as staticHtml, literal } from 'lit/static-html.js';
|
|
4
5
|
import { property } from 'lit/decorators.js';
|
|
5
6
|
import { dispatchActivationClick, isActivationClick, } from '@material/web/internal/controller/events.js';
|
|
6
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -79,88 +80,33 @@ export class IxButton extends LitElement {
|
|
|
79
80
|
this.focus();
|
|
80
81
|
dispatchActivationClick(this.buttonElement);
|
|
81
82
|
};
|
|
83
|
+
this.tags = {
|
|
84
|
+
elevated: literal `md-elevated-button`,
|
|
85
|
+
filled: literal `md-filled-button`,
|
|
86
|
+
'filled-tonal': literal `md-filled-tonal-button`,
|
|
87
|
+
outlined: literal `md-outlined-button`,
|
|
88
|
+
text: literal `md-text-button`,
|
|
89
|
+
};
|
|
82
90
|
if (!isServer) {
|
|
83
91
|
this.addEventListener('click', this.handleActivationClick);
|
|
84
92
|
}
|
|
85
93
|
}
|
|
86
94
|
render() {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
else if (this.appearance === 'filled') {
|
|
104
|
-
comp = html `<md-filled-button
|
|
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>`;
|
|
117
|
-
}
|
|
118
|
-
else if (this.appearance === 'filled-tonal') {
|
|
119
|
-
comp = html `<md-filled-tonal-button
|
|
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>`;
|
|
132
|
-
}
|
|
133
|
-
else if (this.appearance === 'outlined') {
|
|
134
|
-
comp = html `<md-outlined-button
|
|
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>`;
|
|
147
|
-
}
|
|
148
|
-
else if (this.appearance === 'text') {
|
|
149
|
-
comp = html `<md-text-button
|
|
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>`;
|
|
162
|
-
}
|
|
163
|
-
return html `${comp}`;
|
|
95
|
+
var _b;
|
|
96
|
+
const tag = ((_b = this.tags) === null || _b === void 0 ? void 0 : _b[this.appearance]) || this.tags.outlined;
|
|
97
|
+
return staticHtml `<${tag}
|
|
98
|
+
?disabled=${this.disabled}
|
|
99
|
+
target=${ifDefined(this.target)}
|
|
100
|
+
href=${ifDefined(this.href)}
|
|
101
|
+
?trailing-icon=${this.trailingIcon}
|
|
102
|
+
?has-icon=${this.hasIcon}
|
|
103
|
+
value="${this.value}"
|
|
104
|
+
type=${this.type}
|
|
105
|
+
class="md-button"
|
|
106
|
+
>
|
|
107
|
+
<slot></slot>
|
|
108
|
+
${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
|
|
109
|
+
</${tag}>`;
|
|
164
110
|
}
|
|
165
111
|
}
|
|
166
112
|
_a = internals;
|
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, 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"]}
|
|
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 { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\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 private readonly tags = {\n elevated: literal`md-elevated-button`,\n filled: literal`md-filled-button`,\n 'filled-tonal': literal`md-filled-tonal-button`,\n outlined: literal`md-outlined-button`,\n text: literal`md-text-button`,\n };\n\n protected override render() {\n const tag: StaticValue = this.tags?.[this.appearance] || this.tags.outlined;\n return staticHtml`<${tag}\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 </${tag}>`;\n }\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.
|
|
6
|
+
"version": "3.2.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,10 +26,9 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@lit-labs/react": "^2.0
|
|
30
|
-
"@material/web": "^1.0.0
|
|
31
|
-
"
|
|
32
|
-
"lit": "^2.7.6",
|
|
29
|
+
"@lit-labs/react": "^2.1.0",
|
|
30
|
+
"@material/web": "^1.0.0",
|
|
31
|
+
"lit": "^2.0.2",
|
|
33
32
|
"react": "^18.2.0"
|
|
34
33
|
},
|
|
35
34
|
"devDependencies": {
|
|
@@ -103,5 +102,5 @@
|
|
|
103
102
|
"README.md",
|
|
104
103
|
"LICENSE"
|
|
105
104
|
],
|
|
106
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "d57dedc86cbf4e58a5f01445702dc5f540317d00"
|
|
107
106
|
}
|