@digital-realty/ix-icon-button 1.0.6 → 1.0.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/dist/IxIconButton.d.ts +14 -7
- package/dist/IxIconButton.js +89 -57
- package/dist/IxIconButton.js.map +1 -1
- package/package.json +4 -2
package/dist/IxIconButton.d.ts
CHANGED
|
@@ -3,10 +3,16 @@ import '@material/web/iconbutton/icon-button.js';
|
|
|
3
3
|
import '@material/web/iconbutton/filled-icon-button.js';
|
|
4
4
|
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
|
5
5
|
import '@material/web/iconbutton/outlined-icon-button.js';
|
|
6
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
7
|
+
import { IconButton } from '@material/web/iconbutton/internal/icon-button';
|
|
8
|
+
import { FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';
|
|
6
9
|
type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
|
|
7
|
-
type
|
|
10
|
+
export type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
|
|
8
11
|
export declare class IxIconButton extends LitElement {
|
|
9
|
-
|
|
12
|
+
readonly component: IconButton;
|
|
13
|
+
appearance: Appearance;
|
|
14
|
+
icon: string;
|
|
15
|
+
selectedIcon: string;
|
|
10
16
|
/**
|
|
11
17
|
* Disables the icon button and makes it non-interactive.
|
|
12
18
|
*/
|
|
@@ -18,15 +24,15 @@ export declare class IxIconButton extends LitElement {
|
|
|
18
24
|
/**
|
|
19
25
|
* Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
|
|
20
26
|
*/
|
|
21
|
-
href: string;
|
|
27
|
+
href: string | undefined;
|
|
22
28
|
/**
|
|
23
29
|
* Sets the underlying `HTMLAnchorElement`'s `target` attribute.
|
|
24
30
|
*/
|
|
25
|
-
target: LinkTarget | '';
|
|
31
|
+
target: LinkTarget | '' | undefined;
|
|
26
32
|
/**
|
|
27
33
|
* The `aria-label` of the button when the button is toggleable and selected.
|
|
28
34
|
*/
|
|
29
|
-
ariaLabelSelected: string;
|
|
35
|
+
ariaLabelSelected: string | undefined;
|
|
30
36
|
/**
|
|
31
37
|
* When true, the button will toggle between selected and unselected
|
|
32
38
|
* states
|
|
@@ -39,8 +45,9 @@ export declare class IxIconButton extends LitElement {
|
|
|
39
45
|
*/
|
|
40
46
|
selected: boolean;
|
|
41
47
|
type: FormSubmitterType;
|
|
42
|
-
|
|
43
|
-
|
|
48
|
+
name: string | undefined;
|
|
49
|
+
value: string | undefined;
|
|
50
|
+
protected createRenderRoot(): this;
|
|
44
51
|
render(): import("lit-html").TemplateResult<1>;
|
|
45
52
|
}
|
|
46
53
|
export {};
|
package/dist/IxIconButton.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { property, query } from 'lit/decorators.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
5
|
import '@material/web/iconbutton/icon-button.js';
|
|
5
6
|
import '@material/web/iconbutton/filled-icon-button.js';
|
|
6
7
|
import '@material/web/iconbutton/filled-tonal-icon-button.js';
|
|
7
8
|
import '@material/web/iconbutton/outlined-icon-button.js';
|
|
9
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
8
10
|
export class IxIconButton extends LitElement {
|
|
9
11
|
constructor() {
|
|
10
12
|
super(...arguments);
|
|
11
13
|
this.appearance = 'default';
|
|
14
|
+
this.icon = '';
|
|
15
|
+
this.selectedIcon = '';
|
|
12
16
|
/**
|
|
13
17
|
* Disables the icon button and makes it non-interactive.
|
|
14
18
|
*/
|
|
@@ -20,15 +24,15 @@ export class IxIconButton extends LitElement {
|
|
|
20
24
|
/**
|
|
21
25
|
* Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
|
|
22
26
|
*/
|
|
23
|
-
this.href =
|
|
27
|
+
this.href = undefined;
|
|
24
28
|
/**
|
|
25
29
|
* Sets the underlying `HTMLAnchorElement`'s `target` attribute.
|
|
26
30
|
*/
|
|
27
|
-
this.target =
|
|
31
|
+
this.target = undefined;
|
|
28
32
|
/**
|
|
29
33
|
* The `aria-label` of the button when the button is toggleable and selected.
|
|
30
34
|
*/
|
|
31
|
-
this.ariaLabelSelected =
|
|
35
|
+
this.ariaLabelSelected = undefined;
|
|
32
36
|
/**
|
|
33
37
|
* When true, the button will toggle between selected and unselected
|
|
34
38
|
* states
|
|
@@ -41,77 +45,105 @@ export class IxIconButton extends LitElement {
|
|
|
41
45
|
*/
|
|
42
46
|
this.selected = false;
|
|
43
47
|
this.type = 'submit';
|
|
44
|
-
this.
|
|
45
|
-
this.
|
|
48
|
+
this.name = undefined;
|
|
49
|
+
this.value = undefined;
|
|
50
|
+
}
|
|
51
|
+
createRenderRoot() {
|
|
52
|
+
return this;
|
|
46
53
|
}
|
|
47
54
|
render() {
|
|
48
55
|
let comp;
|
|
49
56
|
if (this.appearance === 'filled') {
|
|
50
57
|
comp = html `<md-filled-icon-button
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
class="button"
|
|
59
|
+
?disabled=${this.disabled}
|
|
60
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
61
|
+
href=${ifDefined(this.href)}
|
|
62
|
+
target=${ifDefined(this.target)}
|
|
63
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
64
|
+
?toggle=${this.toggle}
|
|
65
|
+
?selected=${this.selected}
|
|
66
|
+
type=${this.type}
|
|
67
|
+
name=${ifDefined(this.name)}
|
|
68
|
+
value=${ifDefined(this.value)}
|
|
69
|
+
><ix-icon>${this.icon}</ix-icon>
|
|
70
|
+
${this.selectedIcon
|
|
71
|
+
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
72
|
+
: nothing}
|
|
73
|
+
</md-filled-icon-button>`;
|
|
63
74
|
}
|
|
64
75
|
else if (this.appearance === 'filled-tonal') {
|
|
65
76
|
comp = html `<md-filled-tonal-icon-button
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
class="button"
|
|
78
|
+
?disabled=${this.disabled}
|
|
79
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
80
|
+
href=${ifDefined(this.href)}
|
|
81
|
+
target=${ifDefined(this.target)}
|
|
82
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
83
|
+
?toggle=${this.toggle}
|
|
84
|
+
?selected=${this.selected}
|
|
85
|
+
type=${this.type}
|
|
86
|
+
name=${ifDefined(this.name)}
|
|
87
|
+
value=${ifDefined(this.value)}
|
|
88
|
+
><ix-icon>${this.icon}</ix-icon>
|
|
89
|
+
${this.selectedIcon
|
|
90
|
+
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
91
|
+
: nothing}
|
|
92
|
+
</md-filled-tonal-icon-button>`;
|
|
78
93
|
}
|
|
79
94
|
else if (this.appearance === 'outlined') {
|
|
80
95
|
comp = html `<md-outlined-icon-button
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
96
|
+
class="button"
|
|
97
|
+
?disabled=${this.disabled}
|
|
98
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
99
|
+
href=${ifDefined(this.href)}
|
|
100
|
+
target=${ifDefined(this.target)}
|
|
101
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
102
|
+
?toggle=${this.toggle}
|
|
103
|
+
?selected=${this.selected}
|
|
104
|
+
type=${this.type}
|
|
105
|
+
name=${ifDefined(this.name)}
|
|
106
|
+
value=${ifDefined(this.value)}
|
|
107
|
+
><ix-icon>${this.icon}</ix-icon>
|
|
108
|
+
${this.selectedIcon
|
|
109
|
+
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
110
|
+
: nothing}
|
|
111
|
+
</md-outlined-icon-button>`;
|
|
93
112
|
}
|
|
94
113
|
else if (this.appearance === 'default') {
|
|
95
114
|
comp = html `<md-icon-button
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
115
|
+
class="button"
|
|
116
|
+
?disabled=${this.disabled}
|
|
117
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
118
|
+
href=${ifDefined(this.href)}
|
|
119
|
+
target=${ifDefined(this.target)}
|
|
120
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
121
|
+
?toggle=${this.toggle}
|
|
122
|
+
?selected=${this.selected}
|
|
123
|
+
type=${this.type}
|
|
124
|
+
name=${ifDefined(this.name)}
|
|
125
|
+
value=${ifDefined(this.value)}
|
|
126
|
+
><ix-icon>${this.icon}</ix-icon>
|
|
127
|
+
${this.selectedIcon
|
|
128
|
+
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
129
|
+
: nothing}
|
|
130
|
+
</md-icon-button>`;
|
|
108
131
|
}
|
|
109
132
|
return html `${comp}`;
|
|
110
133
|
}
|
|
111
134
|
}
|
|
135
|
+
__decorate([
|
|
136
|
+
query('.button')
|
|
137
|
+
], IxIconButton.prototype, "component", void 0);
|
|
112
138
|
__decorate([
|
|
113
139
|
property()
|
|
114
140
|
], IxIconButton.prototype, "appearance", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property()
|
|
143
|
+
], IxIconButton.prototype, "icon", void 0);
|
|
144
|
+
__decorate([
|
|
145
|
+
property()
|
|
146
|
+
], IxIconButton.prototype, "selectedIcon", void 0);
|
|
115
147
|
__decorate([
|
|
116
148
|
property({ type: Boolean, reflect: true })
|
|
117
149
|
], IxIconButton.prototype, "disabled", void 0);
|
|
@@ -138,8 +170,8 @@ __decorate([
|
|
|
138
170
|
], IxIconButton.prototype, "type", void 0);
|
|
139
171
|
__decorate([
|
|
140
172
|
property()
|
|
141
|
-
], IxIconButton.prototype, "
|
|
173
|
+
], IxIconButton.prototype, "name", void 0);
|
|
142
174
|
__decorate([
|
|
143
175
|
property()
|
|
144
|
-
], IxIconButton.prototype, "
|
|
176
|
+
], IxIconButton.prototype, "value", void 0);
|
|
145
177
|
//# sourceMappingURL=IxIconButton.js.map
|
package/dist/IxIconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxIconButton.js","sourceRoot":"","sources":["../src/IxIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxIconButton.js","sourceRoot":"","sources":["../src/IxIconButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@material/web/iconbutton/icon-button.js';\nimport '@material/web/iconbutton/filled-icon-button.js';\nimport '@material/web/iconbutton/filled-tonal-icon-button.js';\nimport '@material/web/iconbutton/outlined-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { IconButton } from '@material/web/iconbutton/internal/icon-button';\nimport { FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\nexport type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';\n\nexport class IxIconButton extends LitElement {\n @query('.button')\n readonly component!: IconButton;\n\n @property()\n appearance: Appearance = 'default';\n\n @property()\n icon: string = '';\n\n @property()\n selectedIcon: string = '';\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({ type: Boolean, attribute: 'flip-icon-in-rtl' })\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href: string | undefined = undefined;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' | undefined = undefined;\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({ attribute: 'aria-label-selected' }) ariaLabelSelected:\n | string\n | undefined = undefined;\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean }) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property() type: FormSubmitterType = 'submit';\n\n @property() name: string | undefined = undefined;\n\n @property() value: string | undefined = undefined;\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n let comp;\n if (this.appearance === 'filled') {\n comp = html`<md-filled-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-icon-button>`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-tonal-icon-button>`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-outlined-icon-button>`;\n } else if (this.appearance === 'default') {\n comp = html`<md-icon-button\n class=\"button\"\n ?disabled=${this.disabled}\n ?flip-icon-in-rtl=${this.flipIconInRtl}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n aria-label-selected=${ifDefined(this.ariaLabelSelected)}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n ><ix-icon>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-icon-button>`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-icon-button following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
+
"@digital-realty/ix-icon": "^0.0.2",
|
|
29
30
|
"@lit-labs/react": "^2.0.3",
|
|
30
31
|
"@material/web": "^1.0.0-pre.17",
|
|
31
32
|
"lit": "^2.0.2",
|
|
@@ -61,6 +62,7 @@
|
|
|
61
62
|
"rules": {
|
|
62
63
|
"class-methods-use-this": "off",
|
|
63
64
|
"no-unused-vars": "off",
|
|
65
|
+
"lit-a11y/aria-attrs": "off",
|
|
64
66
|
"@typescript-eslint/no-unused-vars": [
|
|
65
67
|
"error"
|
|
66
68
|
],
|
|
@@ -96,5 +98,5 @@
|
|
|
96
98
|
"README.md",
|
|
97
99
|
"LICENSE"
|
|
98
100
|
],
|
|
99
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "76f4ebd14b8f0e9cf234530e8bdb773a63c04daa"
|
|
100
102
|
}
|