@digital-realty/ix-chip 1.3.1-alpha.1 → 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-chip-set.min.js +1 -1
- package/dist/ix-chip.min.js +69 -8
- package/package.json +14 -18
package/dist/ix-chip-set.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement,html}from"lit";import"@material/web/chips/chip-set";class
|
|
1
|
+
import{LitElement as e,html as t}from"lit";import"@material/web/chips/chip-set";window.customElements.define("ix-chip-set",class extends e{render(){return t`<md-chip-set><slot></slot></md-chip-set>`}});
|
package/dist/ix-chip.min.js
CHANGED
|
@@ -1,16 +1,77 @@
|
|
|
1
|
-
import{LitElement,html,css}from"lit";import{__decorate}from"tslib";import{property,query}from"lit/decorators.js";import"@material/web/chips/assist-chip.js";import"@material/web/chips/filter-chip.js";import"@material/web/chips/input-chip.js";import"@material/web/chips/suggestion-chip.js";import"@digital-realty/ix-icon/ix-icon.js";class
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import{LitElement as i,html as t,css as e}from"lit";import{__decorate as s}from"tslib";import{property as o,query as a}from"lit/decorators.js";import"@material/web/chips/assist-chip.js";import"@material/web/chips/filter-chip.js";import"@material/web/chips/input-chip.js";import"@material/web/chips/suggestion-chip.js";import"@digital-realty/ix-icon/ix-icon.js";class l extends i{constructor(){super(...arguments),this.appearance="assist",this.disabled=!1,this.truncate=!1,this.alwaysFocusable=!1,this.label="",this.cursor="",this.remove=()=>{this.dispatchEvent(new CustomEvent("remove",{bubbles:!0}))},this.truncateLabel=async()=>{var i,t,e,s;await this.updateComplete;const o=null===(t=null===(i=this.chip)||void 0===i?void 0:i.shadowRoot)||void 0===t?void 0:t.querySelector("button.primary");if(o){const i=this.getRootNode(),t=null===(s=null===(e=null==i?void 0:i.host)||void 0===e?void 0:e.getBoundingClientRect())||void 0===s?void 0:s.width;o.style.cssText=`max-width: ${t?t-165:190}px;`;o.querySelector(".label").style.cssText="\n overflow: hidden;\n display: block;\n align-content: center;"}}}firstUpdated(i){super.firstUpdated(i),this.truncate&&(this.truncateLabel(),window.addEventListener("resize",this.truncateLabel)),this.cursor&&this.chip.updateComplete.then(()=>{var i;const t=null===(i=this.chip.shadowRoot)||void 0===i?void 0:i.querySelector("button.primary");t&&(t.style.cursor=this.cursor)})}disconnectedCallback(){super.disconnectedCallback(),this.truncate&&window.removeEventListener("resize",this.truncateLabel)}render(){let i;return"assist"===this.appearance?i=t`<md-assist-chip
|
|
2
|
+
class="chip"
|
|
3
|
+
?disabled=${this.disabled}
|
|
4
|
+
?always-focusable=${this.alwaysFocusable}
|
|
5
|
+
.label=${this.label}
|
|
6
|
+
>${this.label}</md-assist-chip
|
|
7
|
+
>`:"outlined"===this.appearance?i=t`<md-assist-chip
|
|
8
|
+
class="chip outlined"
|
|
9
|
+
?disabled=${this.disabled}
|
|
10
|
+
?always-focusable=${this.alwaysFocusable}
|
|
11
|
+
.label=${this.label}
|
|
12
|
+
>${this.label}</md-assist-chip
|
|
13
|
+
>`:"filter"===this.appearance?i=t`<md-filter-chip
|
|
14
|
+
class="chip"
|
|
15
|
+
?disabled=${this.disabled}
|
|
16
|
+
?always-focusable=${this.alwaysFocusable}
|
|
17
|
+
.label=${this.label}
|
|
18
|
+
>${this.label}</md-filter-chip
|
|
19
|
+
>`:"input"===this.appearance?i=t`<md-input-chip
|
|
20
|
+
class="chip"
|
|
21
|
+
?disabled=${this.disabled}
|
|
22
|
+
?always-focusable=${this.alwaysFocusable}
|
|
23
|
+
.label=${this.label}
|
|
24
|
+
@remove=${this.remove}
|
|
25
|
+
>${this.label}
|
|
26
|
+
<ix-icon slot="remove-trailing-icon">
|
|
27
|
+
<svg
|
|
28
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
height="24px"
|
|
30
|
+
viewBox="0 0 24 24"
|
|
31
|
+
width="24px"
|
|
32
|
+
>
|
|
33
|
+
<path d="M0 0h24v24H0z" fill="none" />
|
|
34
|
+
<path
|
|
35
|
+
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
|
|
36
|
+
/>
|
|
37
|
+
</svg>
|
|
38
|
+
</ix-icon>
|
|
39
|
+
</md-input-chip>`:"suggestion"===this.appearance&&(i=t`<md-suggestion-chip
|
|
40
|
+
class="chip"
|
|
41
|
+
?disabled=${this.disabled}
|
|
42
|
+
?always-focusable=${this.alwaysFocusable}
|
|
43
|
+
.label=${this.label}
|
|
44
|
+
>${this.label}</md-suggestion-chip
|
|
45
|
+
>`),t`${i}`}}s([o({type:String})],l.prototype,"appearance",void 0),s([o({type:Boolean})],l.prototype,"disabled",void 0),s([o({type:Boolean})],l.prototype,"truncate",void 0),s([o({type:Boolean,attribute:"always-focusable"})],l.prototype,"alwaysFocusable",void 0),s([o()],l.prototype,"label",void 0),s([o({type:String})],l.prototype,"cursor",void 0),s([a(".chip")],l.prototype,"chip",void 0);class c extends l{}c.styles=e`
|
|
46
|
+
:host {
|
|
47
|
+
--md-input-chip-leading-icon-color: var(--ix-chip-icon-color, #fff);
|
|
48
|
+
--md-input-chip-focus-leading-icon-color: var(
|
|
5
49
|
--ix-chip-icon-focus-color,
|
|
6
50
|
#fff
|
|
7
|
-
)
|
|
51
|
+
);
|
|
52
|
+
--md-input-chip-hover-leading-icon-color: var(
|
|
8
53
|
--ix-chip-icon-hover-color,
|
|
9
54
|
#fff
|
|
10
|
-
)
|
|
55
|
+
);
|
|
56
|
+
--md-input-chip-trailing-icon-color: var(--ix-chip-icon-color, #ffffffd9);
|
|
57
|
+
--md-input-chip-focus-trailing-icon-color: var(
|
|
11
58
|
--ix-chip-icon-focus-color,
|
|
12
59
|
#ffffffd9
|
|
13
|
-
)
|
|
60
|
+
);
|
|
61
|
+
--md-input-chip-hover-trailing-icon-color: var(
|
|
14
62
|
--ix-chip-icon-hover-color,
|
|
15
63
|
#fff
|
|
16
|
-
)
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.chip {
|
|
68
|
+
background: var(--ix-chip-container-color, transparent);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.outlined {
|
|
72
|
+
--ix-chip-container-color: white;
|
|
73
|
+
--_label-text-color: var(--clr-primary, #1456e0);
|
|
74
|
+
--_hover-label-text-color: var(--clr-primary, #1456e0);
|
|
75
|
+
--_hover-state-layer-color: var(--clr-on-primary, #fff);
|
|
76
|
+
}
|
|
77
|
+
`,window.customElements.define("ix-chip",c);export{c as IxChipStyled};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-chip following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.3.1
|
|
6
|
+
"version": "1.3.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"./ix-chip-set.min.js": "./dist/ix-chip-set.min.js",
|
|
15
15
|
"./IxChipSet": "./dist/react/IxChipSet.js",
|
|
16
16
|
"./IxChip": "./dist/react/IxChip.js",
|
|
17
|
-
"./ix-custom-chip.js": "./dist/ix-custom-chip.js"
|
|
17
|
+
"./ix-custom-chip.js": "./dist/ix-custom-chip.js",
|
|
18
|
+
"./ix-custom-chip.min.js": "./dist/ix-custom-chip.min.js"
|
|
18
19
|
},
|
|
19
20
|
"publishConfig": {
|
|
20
21
|
"access": "public"
|
|
@@ -24,46 +25,40 @@
|
|
|
24
25
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
25
26
|
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
26
27
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
27
|
-
"lint": "eslint --ext .ts,.html .
|
|
28
|
-
"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",
|
|
29
30
|
"test": "tsc && wtr --coverage",
|
|
30
31
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
31
32
|
},
|
|
32
33
|
"dependencies": {
|
|
33
|
-
"@digital-realty/ix-icon": "^1.
|
|
34
|
+
"@digital-realty/ix-icon": "^1.3.1",
|
|
34
35
|
"@lit/react": "^1.0.2",
|
|
35
|
-
"@material/web": "
|
|
36
|
+
"@material/web": "2.4.0",
|
|
36
37
|
"lit": "^3.2.1",
|
|
37
38
|
"react": "^18.2.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
41
|
-
"@open-wc/eslint-config": "^9.2.1",
|
|
42
42
|
"@open-wc/testing": "^3.1.6",
|
|
43
|
-
"@
|
|
44
|
-
"@typescript-eslint/
|
|
43
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
45
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
45
46
|
"@web/dev-server": "^0.4.6",
|
|
46
47
|
"@web/test-runner": "^0.20.2",
|
|
47
|
-
"concurrently": "^9.1
|
|
48
|
-
"eslint": "^
|
|
48
|
+
"concurrently": "^9.2.1",
|
|
49
|
+
"eslint": "^9.39.4",
|
|
49
50
|
"eslint-config-prettier": "^8.3.0",
|
|
50
51
|
"husky": "^4.3.8",
|
|
51
52
|
"lint-staged": "^10.5.4",
|
|
52
53
|
"prettier": "^2.4.1",
|
|
53
54
|
"rollup": "^4.29.1",
|
|
54
|
-
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
55
55
|
"rollup-plugin-summary": "^2.0.0",
|
|
56
|
-
"rollup-plugin-uglify": "^6.0.4",
|
|
57
56
|
"tslib": "^2.3.1",
|
|
58
57
|
"typescript": "^4.5.2"
|
|
59
58
|
},
|
|
60
59
|
"customElements": "custom-elements.json",
|
|
61
60
|
"eslintConfig": {
|
|
62
61
|
"parser": "@typescript-eslint/parser",
|
|
63
|
-
"extends": [
|
|
64
|
-
"@open-wc",
|
|
65
|
-
"prettier"
|
|
66
|
-
],
|
|
67
62
|
"plugins": [
|
|
68
63
|
"@typescript-eslint"
|
|
69
64
|
],
|
|
@@ -103,5 +98,6 @@
|
|
|
103
98
|
"package.json",
|
|
104
99
|
"README.md",
|
|
105
100
|
"LICENSE"
|
|
106
|
-
]
|
|
101
|
+
],
|
|
102
|
+
"gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
|
|
107
103
|
}
|