@digital-realty/ix-icon-button 1.2.7 → 1.3.1
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/ix-icon-button.min.js +32 -16
- package/package.json +11 -17
|
@@ -1,28 +1,44 @@
|
|
|
1
|
-
import{LitElement,nothing,html,css}from"lit";import{__decorate}from"tslib";import{query,property}from"lit/decorators.js";import{literal,html as
|
|
1
|
+
import{LitElement as t,nothing as e,html as o,css as i}from"lit";import{__decorate as l}from"tslib";import{query as n,property as a}from"lit/decorators.js";import{literal as s,html as c}from"lit/static-html.js";import{ifDefined as r}from"lit/directives/if-defined.js";import"@material/web/iconbutton/icon-button.js";import"@material/web/iconbutton/filled-icon-button.js";import"@material/web/iconbutton/filled-tonal-icon-button.js";import"@material/web/iconbutton/outlined-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{AriaForwardMixin as d}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as p}from"@open-wc/lit-helpers";const h=d(t);class m extends h{constructor(){super(...arguments),this.appearance="default",this.icon="",this.selectedIcon="",this.disabled=!1,this.flipIconInRtl=!1,this.href=void 0,this.target=void 0,this.ariaLabelSelected=void 0,this.toggle=!1,this.selected=!1,this.type="submit",this.name=void 0,this.value=void 0,this.label=void 0,this.filledIcon=!1}render(){const t=this.label||this.ariaLabel;let i=s`md-icon-button`;return"outlined"===this.appearance?i=s`md-outlined-icon-button`:"filled"===this.appearance?i=s`md-filled-icon-button`:"filled-tonal"===this.appearance&&(i=s`md-filled-tonal-icon-button`),c`<${i}
|
|
2
2
|
class="button"
|
|
3
3
|
?disabled=${this.disabled}
|
|
4
4
|
?flip-icon-in-rtl=${this.flipIconInRtl}
|
|
5
|
-
href=${
|
|
6
|
-
target=${
|
|
7
|
-
aria-label-selected=${
|
|
8
|
-
aria-label=${t||
|
|
5
|
+
href=${r(this.href)}
|
|
6
|
+
target=${r(this.target)}
|
|
7
|
+
aria-label-selected=${r(this.ariaLabelSelected)}
|
|
8
|
+
aria-label=${t||e}
|
|
9
9
|
?toggle=${this.toggle}
|
|
10
10
|
?selected=${this.selected}
|
|
11
11
|
type=${this.type}
|
|
12
|
-
name=${
|
|
13
|
-
value=${
|
|
14
|
-
${
|
|
15
|
-
>${this.icon?
|
|
12
|
+
name=${r(this.name)}
|
|
13
|
+
value=${r(this.value)}
|
|
14
|
+
${p(this.ariaAttributes)}
|
|
15
|
+
>${this.icon?o`<ix-icon ?filled=${this.filledIcon}>${this.icon}</ix-icon>`:o`<slot name="default"></slot
|
|
16
16
|
><slot name="selected" slot="selected"></slot>`}
|
|
17
|
-
${this.selectedIcon?
|
|
17
|
+
${this.selectedIcon?o`<ix-icon ?filled=${this.filledIcon} slot="selected"
|
|
18
18
|
>${this.selectedIcon}</ix-icon
|
|
19
|
-
>`:
|
|
20
|
-
</${
|
|
19
|
+
>`:e}
|
|
20
|
+
</${i}>`}}l([n(".button")],m.prototype,"component",void 0),l([a()],m.prototype,"appearance",void 0),l([a()],m.prototype,"icon",void 0),l([a()],m.prototype,"selectedIcon",void 0),l([a({type:Boolean,reflect:!0})],m.prototype,"disabled",void 0),l([a({type:Boolean,attribute:"flip-icon-in-rtl"})],m.prototype,"flipIconInRtl",void 0),l([a()],m.prototype,"href",void 0),l([a()],m.prototype,"target",void 0),l([a({attribute:"aria-label-selected"})],m.prototype,"ariaLabelSelected",void 0),l([a({type:Boolean})],m.prototype,"toggle",void 0),l([a({type:Boolean,reflect:!0})],m.prototype,"selected",void 0),l([a()],m.prototype,"type",void 0),l([a()],m.prototype,"name",void 0),l([a()],m.prototype,"value",void 0),l([a()],m.prototype,"label",void 0),l([a({type:Boolean})],m.prototype,"filledIcon",void 0);class b extends m{}b.styles=i`
|
|
21
|
+
:host {
|
|
22
|
+
display: flex;
|
|
23
|
+
|
|
24
|
+
--md-icon-button-state-layer-height: calc(
|
|
21
25
|
var(--md-icon-button-icon-size) * 1.65
|
|
22
|
-
)
|
|
26
|
+
);
|
|
27
|
+
--md-icon-button-state-layer-width: calc(
|
|
23
28
|
var(--md-icon-button-icon-size) * 1.65
|
|
24
|
-
)
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host([small]) {
|
|
33
|
+
--md-icon-button-state-layer-height: calc(
|
|
25
34
|
var(--md-icon-button-icon-size) * 1.2
|
|
26
|
-
)
|
|
35
|
+
);
|
|
36
|
+
--md-icon-button-state-layer-width: calc(
|
|
27
37
|
var(--md-icon-button-icon-size) * 1.2
|
|
28
|
-
)
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host(.cancel) {
|
|
42
|
+
--md-sys-color-on-surface-variant: var(--ix-button-cancel-color);
|
|
43
|
+
}
|
|
44
|
+
`,customElements.define("ix-icon-button",b);export{b as IxIconButtonStyled};
|
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.
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
26
26
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
27
27
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
28
|
-
"lint": "eslint --ext .ts,.html .
|
|
29
|
-
"format": "eslint --ext .ts,.html . --fix
|
|
28
|
+
"lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
29
|
+
"format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
30
30
|
"test": "tsc && wtr --coverage",
|
|
31
31
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@digital-realty/ix-icon": "^1.
|
|
35
|
-
"@digital-realty/ix-shared-fns": "^1.
|
|
34
|
+
"@digital-realty/ix-icon": "^1.3.1",
|
|
35
|
+
"@digital-realty/ix-shared-fns": "^1.1.1",
|
|
36
36
|
"@lit/react": "^1.0.2",
|
|
37
37
|
"@material/web": "2.4.0",
|
|
38
38
|
"@open-wc/lit-helpers": "^0.7.0",
|
|
@@ -41,32 +41,26 @@
|
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
44
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
45
44
|
"@open-wc/testing": "^3.1.6",
|
|
46
|
-
"@
|
|
47
|
-
"@typescript-eslint/
|
|
45
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
46
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
47
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
48
48
|
"@web/dev-server": "^0.4.6",
|
|
49
49
|
"@web/test-runner": "^0.20.2",
|
|
50
|
-
"concurrently": "^9.1
|
|
51
|
-
"eslint": "^
|
|
50
|
+
"concurrently": "^9.2.1",
|
|
51
|
+
"eslint": "^9.39.4",
|
|
52
52
|
"eslint-config-prettier": "^8.3.0",
|
|
53
53
|
"husky": "^4.3.8",
|
|
54
54
|
"lint-staged": "^10.5.4",
|
|
55
55
|
"prettier": "^2.4.1",
|
|
56
56
|
"rollup": "^4.29.1",
|
|
57
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
58
57
|
"rollup-plugin-summary": "^2.0.0",
|
|
59
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
60
58
|
"tslib": "^2.3.1",
|
|
61
59
|
"typescript": "^4.5.2"
|
|
62
60
|
},
|
|
63
61
|
"customElements": "custom-elements.json",
|
|
64
62
|
"eslintConfig": {
|
|
65
63
|
"parser": "@typescript-eslint/parser",
|
|
66
|
-
"extends": [
|
|
67
|
-
"@open-wc",
|
|
68
|
-
"prettier"
|
|
69
|
-
],
|
|
70
64
|
"plugins": [
|
|
71
65
|
"@typescript-eslint"
|
|
72
66
|
],
|
|
@@ -109,5 +103,5 @@
|
|
|
109
103
|
"README.md",
|
|
110
104
|
"LICENSE"
|
|
111
105
|
],
|
|
112
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
113
107
|
}
|