@digital-realty/ix-chip 1.1.8 → 1.1.10
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/IxChip.d.ts +6 -1
- package/dist/IxChip.js +36 -1
- package/dist/IxChip.js.map +1 -1
- package/dist/ix-chip.min.js +4 -1
- package/package.json +3 -3
package/dist/IxChip.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
import '@material/web/chips/assist-chip.js';
|
|
3
3
|
import '@material/web/chips/filter-chip.js';
|
|
4
4
|
import '@material/web/chips/input-chip.js';
|
|
@@ -12,6 +12,7 @@ export declare class IxChip extends LitElement {
|
|
|
12
12
|
* Disabled chips are not focusable, unless `always-focusable` is set.
|
|
13
13
|
*/
|
|
14
14
|
disabled: boolean;
|
|
15
|
+
truncate: boolean;
|
|
15
16
|
/**
|
|
16
17
|
* When true, allow disabled chips to be focused with arrow keys.
|
|
17
18
|
*
|
|
@@ -24,6 +25,10 @@ export declare class IxChip extends LitElement {
|
|
|
24
25
|
* The label of the chip.
|
|
25
26
|
*/
|
|
26
27
|
label: string;
|
|
28
|
+
chip: any;
|
|
27
29
|
remove: () => void;
|
|
30
|
+
protected firstUpdated(changedProperties: PropertyValues): void;
|
|
31
|
+
disconnectedCallback(): void;
|
|
32
|
+
truncateLabel: () => Promise<void>;
|
|
28
33
|
render(): import("lit-html").TemplateResult<1>;
|
|
29
34
|
}
|
package/dist/IxChip.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { property, query } from 'lit/decorators.js';
|
|
4
4
|
import '@material/web/chips/assist-chip.js';
|
|
5
5
|
import '@material/web/chips/filter-chip.js';
|
|
6
6
|
import '@material/web/chips/input-chip.js';
|
|
@@ -16,6 +16,7 @@ export class IxChip extends LitElement {
|
|
|
16
16
|
* Disabled chips are not focusable, unless `always-focusable` is set.
|
|
17
17
|
*/
|
|
18
18
|
this.disabled = false;
|
|
19
|
+
this.truncate = false;
|
|
19
20
|
/**
|
|
20
21
|
* When true, allow disabled chips to be focused with arrow keys.
|
|
21
22
|
*
|
|
@@ -31,6 +32,34 @@ export class IxChip extends LitElement {
|
|
|
31
32
|
this.remove = () => {
|
|
32
33
|
this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
|
|
33
34
|
};
|
|
35
|
+
this.truncateLabel = async () => {
|
|
36
|
+
var _a, _b, _c, _d;
|
|
37
|
+
await this.updateComplete;
|
|
38
|
+
const button = (_b = (_a = this.chip) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button.primary');
|
|
39
|
+
if (button) {
|
|
40
|
+
const container = this.getRootNode();
|
|
41
|
+
const containerWidth = (_d = (_c = container === null || container === void 0 ? void 0 : container.host) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width;
|
|
42
|
+
button.style.cssText = `max-width: ${containerWidth ? containerWidth - 165 : 190}px;`;
|
|
43
|
+
const label = button.querySelector('.label');
|
|
44
|
+
label.style.cssText = `
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
display: block;
|
|
47
|
+
align-content: center;`;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
firstUpdated(changedProperties) {
|
|
52
|
+
super.firstUpdated(changedProperties);
|
|
53
|
+
if (this.truncate) {
|
|
54
|
+
this.truncateLabel();
|
|
55
|
+
window.addEventListener('resize', this.truncateLabel);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
disconnectedCallback() {
|
|
59
|
+
super.disconnectedCallback();
|
|
60
|
+
if (this.truncate) {
|
|
61
|
+
window.removeEventListener('resize', this.truncateLabel);
|
|
62
|
+
}
|
|
34
63
|
}
|
|
35
64
|
render() {
|
|
36
65
|
let comp;
|
|
@@ -102,10 +131,16 @@ __decorate([
|
|
|
102
131
|
__decorate([
|
|
103
132
|
property({ type: Boolean })
|
|
104
133
|
], IxChip.prototype, "disabled", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property({ type: Boolean })
|
|
136
|
+
], IxChip.prototype, "truncate", void 0);
|
|
105
137
|
__decorate([
|
|
106
138
|
property({ type: Boolean, attribute: 'always-focusable' })
|
|
107
139
|
], IxChip.prototype, "alwaysFocusable", void 0);
|
|
108
140
|
__decorate([
|
|
109
141
|
property()
|
|
110
142
|
], IxChip.prototype, "label", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
query('.chip')
|
|
145
|
+
], IxChip.prototype, "chip", void 0);
|
|
111
146
|
//# sourceMappingURL=IxChip.js.map
|
package/dist/IxChip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxChip.js","sourceRoot":"","sources":["../src/IxChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"IxChip.js","sourceRoot":"","sources":["../src/IxChip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/chips/assist-chip.js';\nimport '@material/web/chips/filter-chip.js';\nimport '@material/web/chips/input-chip.js';\nimport '@material/web/chips/suggestion-chip.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxChip extends LitElement {\n @property({ type: String }) appearance:\n | 'assist'\n | 'filter'\n | 'input'\n | 'outlined'\n | 'suggestion' = 'assist';\n\n /**\n * Whether or not the chip is disabled.\n *\n * Disabled chips are not focusable, unless `always-focusable` is set.\n */\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Boolean }) truncate = false;\n\n /**\n * When true, allow disabled chips to be focused with arrow keys.\n *\n * Add this when a chip needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({ type: Boolean, attribute: 'always-focusable' })\n alwaysFocusable = false;\n\n /**\n * The label of the chip.\n */\n @property() label = '';\n\n @query('.chip') chip!: any;\n\n remove = () => {\n this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));\n };\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n\n if (this.truncate) {\n this.truncateLabel();\n window.addEventListener('resize', this.truncateLabel);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.truncate) {\n window.removeEventListener('resize', this.truncateLabel);\n }\n }\n\n truncateLabel = async () => {\n await this.updateComplete;\n const button = this.chip?.shadowRoot?.querySelector('button.primary');\n if (button) {\n const container = this.getRootNode() as ShadowRoot;\n const containerWidth = container?.host?.getBoundingClientRect()?.width;\n button.style.cssText = `max-width: ${\n containerWidth ? containerWidth - 165 : 190\n }px;`;\n const label = button.querySelector('.label');\n label.style.cssText = `\n overflow: hidden;\n display: block;\n align-content: center;`;\n }\n };\n\n render() {\n let comp;\n if (this.appearance === 'assist') {\n comp = html`<md-assist-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-assist-chip\n class=\"chip outlined\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-assist-chip\n >`;\n } else if (this.appearance === 'filter') {\n comp = html`<md-filter-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-filter-chip\n >`;\n } else if (this.appearance === 'input') {\n comp = html`<md-input-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n @remove=${this.remove}\n >${this.label}\n <ix-icon slot=\"remove-trailing-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n 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\"\n />\n </svg>\n </ix-icon>\n </md-input-chip>`;\n } else if (this.appearance === 'suggestion') {\n comp = html`<md-suggestion-chip\n class=\"chip\"\n ?disabled=${this.disabled}\n ?always-focusable=${this.alwaysFocusable}\n .label=${this.label}\n >${this.label}</md-suggestion-chip\n >`;\n }\n\n return html`${comp}`;\n }\n}\n"]}
|
package/dist/ix-chip.min.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import{LitElement,html,css}from"lit";import{__decorate}from"tslib";import{property}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 IxChip extends LitElement{constructor(){super(...arguments),this.appearance="assist",this.disabled=!1,this.alwaysFocusable=!1,this.label="",this.remove=()=>{this.dispatchEvent(new CustomEvent("remove",{bubbles:!0}))}
|
|
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 IxChip extends LitElement{constructor(){super(...arguments),this.appearance="assist",this.disabled=!1,this.truncate=!1,this.alwaysFocusable=!1,this.label="",this.remove=()=>{this.dispatchEvent(new CustomEvent("remove",{bubbles:!0}))},this.truncateLabel=async()=>{await this.updateComplete;var i,e=null==(e=null==(e=this.chip)?void 0:e.shadowRoot)?void 0:e.querySelector("button.primary");e&&(i=null==(i=null==(i=null==(i=this.getRootNode())?void 0:i.host)?void 0:i.getBoundingClientRect())?void 0:i.width,e.style.cssText=`max-width: ${i?i-165:190}px;`,e.querySelector(".label").style.cssText=`
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
display: block;
|
|
4
|
+
align-content: center;`)}}firstUpdated(i){super.firstUpdated(i),this.truncate&&(this.truncateLabel(),window.addEventListener("resize",this.truncateLabel))}disconnectedCallback(){super.disconnectedCallback(),this.truncate&&window.removeEventListener("resize",this.truncateLabel)}render(){let i;return"assist"===this.appearance?i=html`<md-assist-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"outlined"===this.appearance?i=html`<md-assist-chip class="chip outlined" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-assist-chip>`:"filter"===this.appearance?i=html`<md-filter-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-filter-chip>`:"input"===this.appearance?i=html`<md-input-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}" @remove="${this.remove}">${this.label}<ix-icon slot="remove-trailing-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path 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"/></svg></ix-icon></md-input-chip>`:"suggestion"===this.appearance&&(i=html`<md-suggestion-chip class="chip" ?disabled="${this.disabled}" ?always-focusable="${this.alwaysFocusable}" .label="${this.label}">${this.label}</md-suggestion-chip>`),html`${i}`}}__decorate([property({type:String})],IxChip.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxChip.prototype,"truncate",void 0),__decorate([property({type:Boolean,attribute:"always-focusable"})],IxChip.prototype,"alwaysFocusable",void 0),__decorate([property()],IxChip.prototype,"label",void 0),__decorate([query(".chip")],IxChip.prototype,"chip",void 0);class IxChipStyled extends IxChip{}IxChipStyled.styles=css`:host{--md-input-chip-leading-icon-color:var(--ix-chip-icon-color, #fff);--md-input-chip-focus-leading-icon-color:var(
|
|
2
5
|
--ix-chip-icon-focus-color,
|
|
3
6
|
#fff
|
|
4
7
|
);--md-input-chip-hover-leading-icon-color:var(
|
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.1.
|
|
6
|
+
"version": "1.1.10",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@digital-realty/ix-icon": "^1.1.
|
|
34
|
+
"@digital-realty/ix-icon": "^1.1.7",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
37
|
"lit": "^3.2.1",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"README.md",
|
|
106
106
|
"LICENSE"
|
|
107
107
|
],
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "58274d28e3928c90e1e3dc91a629bfe530325ae0"
|
|
109
109
|
}
|