@digital-realty/ix-icon-button 1.0.21 → 1.0.22
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 +1 -2
- package/dist/IxIconButton.js +28 -101
- package/dist/IxIconButton.js.map +1 -1
- package/package.json +4 -3
package/dist/IxIconButton.d.ts
CHANGED
|
@@ -48,7 +48,6 @@ export declare class IxIconButton extends LitElement {
|
|
|
48
48
|
name: string | undefined;
|
|
49
49
|
value: string | undefined;
|
|
50
50
|
label: string | undefined;
|
|
51
|
-
|
|
52
|
-
render(): import("lit").TemplateResult<1>;
|
|
51
|
+
render(): import("lit").TemplateResult<1 | 2>;
|
|
53
52
|
}
|
|
54
53
|
export {};
|
package/dist/IxIconButton.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement, nothing } from 'lit';
|
|
3
3
|
import { property, query } from 'lit/decorators.js';
|
|
4
|
+
import { literal, html as staticHtml } from 'lit/static-html.js';
|
|
4
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
6
|
import '@material/web/iconbutton/icon-button.js';
|
|
6
7
|
import '@material/web/iconbutton/filled-icon-button.js';
|
|
@@ -49,113 +50,39 @@ export class IxIconButton extends LitElement {
|
|
|
49
50
|
this.value = undefined;
|
|
50
51
|
this.label = undefined;
|
|
51
52
|
}
|
|
52
|
-
createRenderRoot() {
|
|
53
|
-
return this;
|
|
54
|
-
}
|
|
55
53
|
render() {
|
|
56
|
-
let comp;
|
|
57
54
|
const ariaLabel = this.label || this.ariaLabel;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
?disabled=${this.disabled}
|
|
62
|
-
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
63
|
-
href=${ifDefined(this.href)}
|
|
64
|
-
target=${ifDefined(this.target)}
|
|
65
|
-
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
66
|
-
aria-label=${ariaLabel || nothing}
|
|
67
|
-
?toggle=${this.toggle}
|
|
68
|
-
?selected=${this.selected}
|
|
69
|
-
type=${this.type}
|
|
70
|
-
name=${ifDefined(this.name)}
|
|
71
|
-
value=${ifDefined(this.value)}
|
|
72
|
-
><ix-icon filled>${this.icon}</ix-icon>
|
|
73
|
-
${this.selectedIcon
|
|
74
|
-
? html `<ix-icon filled slot="selected">${this.selectedIcon}</ix-icon>`
|
|
75
|
-
: nothing}
|
|
76
|
-
</md-filled-icon-button>`;
|
|
55
|
+
let tag = literal `md-icon-button`;
|
|
56
|
+
if (this.appearance === 'outlined') {
|
|
57
|
+
tag = literal `md-outlined-icon-button`;
|
|
77
58
|
}
|
|
78
|
-
else if (this.appearance === '
|
|
79
|
-
|
|
80
|
-
class="button"
|
|
81
|
-
?disabled=${this.disabled}
|
|
82
|
-
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
83
|
-
href=${ifDefined(this.href)}
|
|
84
|
-
target=${ifDefined(this.target)}
|
|
85
|
-
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
86
|
-
aria-label=${ariaLabel || nothing}
|
|
87
|
-
?toggle=${this.toggle}
|
|
88
|
-
?selected=${this.selected}
|
|
89
|
-
type=${this.type}
|
|
90
|
-
name=${ifDefined(this.name)}
|
|
91
|
-
value=${ifDefined(this.value)}
|
|
92
|
-
><ix-icon filled>${this.icon}</ix-icon>
|
|
93
|
-
${this.selectedIcon
|
|
94
|
-
? html `<ix-icon filled slot="selected">${this.selectedIcon}</ix-icon>`
|
|
95
|
-
: nothing}
|
|
96
|
-
</md-icon-button>`;
|
|
59
|
+
else if (this.appearance === 'filled') {
|
|
60
|
+
tag = literal `md-filled-icon-button`;
|
|
97
61
|
}
|
|
98
62
|
else if (this.appearance === 'filled-tonal') {
|
|
99
|
-
|
|
100
|
-
class="button"
|
|
101
|
-
?disabled=${this.disabled}
|
|
102
|
-
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
103
|
-
href=${ifDefined(this.href)}
|
|
104
|
-
target=${ifDefined(this.target)}
|
|
105
|
-
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
106
|
-
aria-label=${ariaLabel || nothing}
|
|
107
|
-
?toggle=${this.toggle}
|
|
108
|
-
?selected=${this.selected}
|
|
109
|
-
type=${this.type}
|
|
110
|
-
name=${ifDefined(this.name)}
|
|
111
|
-
value=${ifDefined(this.value)}
|
|
112
|
-
><ix-icon>${this.icon}</ix-icon>
|
|
113
|
-
${this.selectedIcon
|
|
114
|
-
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
115
|
-
: nothing}
|
|
116
|
-
</md-filled-tonal-icon-button>`;
|
|
117
|
-
}
|
|
118
|
-
else if (this.appearance === 'outlined') {
|
|
119
|
-
comp = html `<md-outlined-icon-button
|
|
120
|
-
class="button"
|
|
121
|
-
?disabled=${this.disabled}
|
|
122
|
-
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
123
|
-
href=${ifDefined(this.href)}
|
|
124
|
-
target=${ifDefined(this.target)}
|
|
125
|
-
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
126
|
-
aria-label=${ariaLabel || nothing}
|
|
127
|
-
?toggle=${this.toggle}
|
|
128
|
-
?selected=${this.selected}
|
|
129
|
-
type=${this.type}
|
|
130
|
-
name=${ifDefined(this.name)}
|
|
131
|
-
value=${ifDefined(this.value)}
|
|
132
|
-
><ix-icon>${this.icon}</ix-icon>
|
|
133
|
-
${this.selectedIcon
|
|
134
|
-
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
135
|
-
: nothing}
|
|
136
|
-
</md-outlined-icon-button>`;
|
|
137
|
-
}
|
|
138
|
-
else if (this.appearance === 'default') {
|
|
139
|
-
comp = html `<md-icon-button
|
|
140
|
-
class="button"
|
|
141
|
-
?disabled=${this.disabled}
|
|
142
|
-
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
143
|
-
href=${ifDefined(this.href)}
|
|
144
|
-
target=${ifDefined(this.target)}
|
|
145
|
-
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
146
|
-
aria-label=${ariaLabel || nothing}
|
|
147
|
-
?toggle=${this.toggle}
|
|
148
|
-
?selected=${this.selected}
|
|
149
|
-
type=${this.type}
|
|
150
|
-
name=${ifDefined(this.name)}
|
|
151
|
-
value=${ifDefined(this.value)}
|
|
152
|
-
><ix-icon>${this.icon}</ix-icon>
|
|
153
|
-
${this.selectedIcon
|
|
154
|
-
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
155
|
-
: nothing}
|
|
156
|
-
</md-icon-button>`;
|
|
63
|
+
tag = literal `md-filled-tonal-icon-button`;
|
|
157
64
|
}
|
|
158
|
-
return
|
|
65
|
+
return staticHtml `<${tag}
|
|
66
|
+
class="button"
|
|
67
|
+
?disabled=${this.disabled}
|
|
68
|
+
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
69
|
+
href=${ifDefined(this.href)}
|
|
70
|
+
target=${ifDefined(this.target)}
|
|
71
|
+
aria-label-selected=${ifDefined(this.ariaLabelSelected)}
|
|
72
|
+
aria-label=${ariaLabel || nothing}
|
|
73
|
+
?toggle=${this.toggle}
|
|
74
|
+
?selected=${this.selected}
|
|
75
|
+
type=${this.type}
|
|
76
|
+
name=${ifDefined(this.name)}
|
|
77
|
+
value=${ifDefined(this.value)}
|
|
78
|
+
>${this.icon
|
|
79
|
+
? html `<ix-icon>${this.icon}</ix-icon>`
|
|
80
|
+
: html `<slot name="default"></slot
|
|
81
|
+
><slot name="selected" slot="selected"></slot>`}
|
|
82
|
+
${this.selectedIcon
|
|
83
|
+
? html `<ix-icon slot="selected">${this.selectedIcon}</ix-icon>`
|
|
84
|
+
: nothing}
|
|
85
|
+
</${tag}>`;
|
|
159
86
|
}
|
|
160
87
|
}
|
|
161
88
|
__decorate([
|
package/dist/IxIconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 { ARIAMixinStrict } from '@material/web/internal/aria/aria.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 =\n | 'filled'\n | 'filled-tonal'\n | 'outlined'\n | 'icon-filled'\n | '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 @property() label: string | undefined = undefined;\n\n protected createRenderRoot() {\n return this;\n }\n\n render() {\n let comp;\n\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\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 aria-label=${ariaLabel || nothing}\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 filled>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon filled slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-filled-icon-button>`;\n } else if (this.appearance === 'icon-filled') {\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 aria-label=${ariaLabel || nothing}\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 filled>${this.icon}</ix-icon>\n ${this.selectedIcon\n ? html`<ix-icon filled slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing}\n </md-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 aria-label=${ariaLabel || nothing}\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 aria-label=${ariaLabel || nothing}\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 aria-label=${ariaLabel || nothing}\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"]}
|
|
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 { StaticValue, literal, html as staticHtml } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.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 =\n | 'filled'\n | 'filled-tonal'\n | 'outlined'\n | 'icon-filled'\n | '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 @property() label: string | undefined = undefined;\n\n render() {\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n let tag: StaticValue = literal`md-icon-button`;\n if (this.appearance === 'outlined') {\n tag = literal`md-outlined-icon-button`;\n } else if (this.appearance === 'filled') {\n tag = literal`md-filled-icon-button`;\n } else if (this.appearance === 'filled-tonal') {\n tag = literal`md-filled-tonal-icon-button`;\n }\n\n return staticHtml`<${tag}\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 aria-label=${ariaLabel || nothing}\n ?toggle=${this.toggle}\n ?selected=${this.selected}\n type=${this.type}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n >${\n this.icon\n ? html`<ix-icon>${this.icon}</ix-icon>`\n : html`<slot name=\"default\"></slot\n ><slot name=\"selected\" slot=\"selected\"></slot>`\n }\n ${\n this.selectedIcon\n ? html`<ix-icon slot=\"selected\">${this.selectedIcon}</ix-icon>`\n : nothing\n }\n </${tag}>`;\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.22",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,7 +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": "
|
|
29
|
+
"@digital-realty/ix-icon": "*",
|
|
30
30
|
"@lit/react": "^1.0.2",
|
|
31
31
|
"@material/web": "1.2.0",
|
|
32
32
|
"lit": "^2.0.2",
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
37
|
+
"@digital-realty/theme": "^1.0.12",
|
|
37
38
|
"@open-wc/eslint-config": "^9.2.1",
|
|
38
39
|
"@open-wc/testing": "^3.1.6",
|
|
39
40
|
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
@@ -98,5 +99,5 @@
|
|
|
98
99
|
"README.md",
|
|
99
100
|
"LICENSE"
|
|
100
101
|
],
|
|
101
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "5ff9e3f504660342e986801e86861d35b47930da"
|
|
102
103
|
}
|