@digital-realty/ix-chip 1.1.6 → 1.1.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/IxChip.d.ts +2 -1
- package/dist/IxChip.js +16 -2
- package/dist/IxChip.js.map +1 -1
- package/dist/IxChipSet.d.ts +1 -1
- package/dist/IxCustomChip.d.ts +1 -1
- package/dist/IxCustomChip.js +4 -4
- package/dist/IxCustomChip.js.map +1 -1
- package/dist/ix-chip.js +24 -3
- package/dist/ix-chip.js.map +1 -1
- package/dist/ix-chip.min.js +13 -1
- package/dist/ix-custom-chip.js +56 -41
- package/dist/ix-custom-chip.js.map +1 -1
- package/package.json +5 -4
package/dist/IxChip.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ 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';
|
|
5
5
|
import '@material/web/chips/suggestion-chip.js';
|
|
6
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
6
7
|
export declare class IxChip extends LitElement {
|
|
7
8
|
appearance: 'assist' | 'filter' | 'input' | 'outlined' | 'suggestion';
|
|
8
9
|
/**
|
|
@@ -24,5 +25,5 @@ export declare class IxChip extends LitElement {
|
|
|
24
25
|
*/
|
|
25
26
|
label: string;
|
|
26
27
|
remove: () => void;
|
|
27
|
-
render(): import("lit").TemplateResult<1>;
|
|
28
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
28
29
|
}
|
package/dist/IxChip.js
CHANGED
|
@@ -5,6 +5,7 @@ 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';
|
|
7
7
|
import '@material/web/chips/suggestion-chip.js';
|
|
8
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
8
9
|
export class IxChip extends LitElement {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments);
|
|
@@ -67,8 +68,21 @@ export class IxChip extends LitElement {
|
|
|
67
68
|
?always-focusable=${this.alwaysFocusable}
|
|
68
69
|
.label=${this.label}
|
|
69
70
|
@remove=${this.remove}
|
|
70
|
-
>${this.label}
|
|
71
|
-
|
|
71
|
+
>${this.label}
|
|
72
|
+
<ix-icon slot="remove-trailing-icon">
|
|
73
|
+
<svg
|
|
74
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
75
|
+
height="24px"
|
|
76
|
+
viewBox="0 0 24 24"
|
|
77
|
+
width="24px"
|
|
78
|
+
>
|
|
79
|
+
<path d="M0 0h24v24H0z" fill="none" />
|
|
80
|
+
<path
|
|
81
|
+
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"
|
|
82
|
+
/>
|
|
83
|
+
</svg>
|
|
84
|
+
</ix-icon>
|
|
85
|
+
</md-input-chip>`;
|
|
72
86
|
}
|
|
73
87
|
else if (this.appearance === 'suggestion') {
|
|
74
88
|
comp = html `<md-suggestion-chip
|
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,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"IxChip.js","sourceRoot":"","sources":["../src/IxChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,wCAAwC,CAAC;AAChD,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAC8B,eAAU,GAKnB,QAAQ,CAAC;QAE5B;;;;WAIG;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAE9C;;;;;;WAMG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB,WAAM,GAAG,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC;IA8DJ,CAAC;IA5DC,MAAM;QACJ,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YACzC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YACvC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,EAAE;YACtC,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;kBACT,IAAI,CAAC,MAAM;WAClB,IAAI,CAAC,KAAK;;;;;;;;;;;;;;uBAcE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,YAAY,EAAE;YAC3C,IAAI,GAAG,IAAI,CAAA;;oBAEG,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,eAAe;iBAC/B,IAAI,CAAC,KAAK;WAChB,IAAI,CAAC,KAAK;QACb,CAAC;SACJ;QAED,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAKC;AAOC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAU9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACnC;AAKZ;IAAX,QAAQ,EAAE;qCAAY","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } 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 /**\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 remove = () => {\n this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));\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/IxChipSet.d.ts
CHANGED
package/dist/IxCustomChip.d.ts
CHANGED
package/dist/IxCustomChip.js
CHANGED
|
@@ -31,12 +31,12 @@ export class IxCustomChip extends LitElement {
|
|
|
31
31
|
const { icon, text } = appearanceConfig[this.appearance];
|
|
32
32
|
return html `
|
|
33
33
|
<div
|
|
34
|
-
class="wrapper ${this.noIcon
|
|
35
|
-
? '
|
|
36
|
-
: ''}"
|
|
34
|
+
class="wrapper ${this.noIcon || this.appearance === 'new'
|
|
35
|
+
? 'no-icon'
|
|
36
|
+
: ''} ${this.pill ? 'pill' : ''}"
|
|
37
37
|
appearance=${this.appearance}
|
|
38
38
|
>
|
|
39
|
-
${!this.noIcon
|
|
39
|
+
${this.appearance !== 'new' && !this.noIcon
|
|
40
40
|
? html `
|
|
41
41
|
${icon !== ''
|
|
42
42
|
? html `<ix-icon filled class="icon">${icon}</ix-icon>`
|
package/dist/IxCustomChip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxCustomChip.js","sourceRoot":"","sources":["../src/IxCustomChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAM5C,MAAM,gBAAgB,GAAqB;IACzC,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACtD,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACtD,QAAQ,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE;IACpD,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE;IACxD,qBAAqB,EAAE;QACrB,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,wBAAwB;KAC/B;IACD,UAAU,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE;IAC5D,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;IAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE;IAC9D,cAAc,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACpE,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE;IAC/C,cAAc,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,iBAAiB,EAAE;CAC7D,CAAC;AAEF,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAC8B,eAAU,GACpC,SAAS,CAAC;QAEiB,WAAM,GAAY,KAAK,CAAC;QAExB,SAAI,GAAY,KAAK,CAAC;QAEvB,wBAAmB,GAAG,EAAE,CAAC;IAyBvD,CAAC;IAvBC,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"IxCustomChip.js","sourceRoot":"","sources":["../src/IxCustomChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAM5C,MAAM,gBAAgB,GAAqB;IACzC,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACtD,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACtD,QAAQ,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE;IACpD,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE;IACxD,qBAAqB,EAAE;QACrB,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,wBAAwB;KAC/B;IACD,UAAU,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE;IAC5D,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;IAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE;IAC9D,cAAc,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACpE,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE;IAC/C,cAAc,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,iBAAiB,EAAE;CAC7D,CAAC;AAEF,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAC8B,eAAU,GACpC,SAAS,CAAC;QAEiB,WAAM,GAAY,KAAK,CAAC;QAExB,SAAI,GAAY,KAAK,CAAC;QAEvB,wBAAmB,GAAG,EAAE,CAAC;IAyBvD,CAAC;IAvBC,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK;YACvD,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;qBACpB,IAAI,CAAC,UAAU;;UAE1B,IAAI,CAAC,UAAU,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;YACzC,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,KAAK,EAAE;gBACX,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,YAAY;gBACtD,CAAC,CAAC,IAAI,CAAA,wCAAwC;aACjD;YACH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,mBAAmB,KAAK,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,EAAE;YACnC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,EAAE;;;KAGpB,CAAC;IACJ,CAAC;CACF;AAhC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACf;AAEiB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAyB;AAExB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAuB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA0B","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\ninterface AppearanceConfig {\n [key: string]: { icon: string; text: string };\n}\n\nconst appearanceConfig: AppearanceConfig = {\n default: { icon: '', text: '' },\n completed: { icon: 'check_circle', text: 'COMPLETED' },\n announced: { icon: 'check_circle', text: 'ANNOUNCED' },\n approved: { icon: 'check_circle', text: 'APPROVED' },\n cancelled: { icon: 'delete_forever', text: 'CANCELLED' },\n cancellationRequested: {\n icon: 'auto_delete',\n text: 'CANCELLATION REQUESTED',\n },\n inProgress: { icon: 'clock_loader_60', text: 'IN PROGRESS' },\n new: { icon: '', text: 'NEW' },\n pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },\n pending_pickup: { icon: 'assignment_late', text: 'PENDING PICK-UP' },\n rejected: { icon: 'warning', text: 'REJECTED' },\n approvalDenied: { icon: 'warning', text: 'APPROVAL DENIED' },\n};\n\nexport class IxCustomChip extends LitElement {\n @property({ type: String }) appearance: keyof typeof appearanceConfig =\n 'default';\n\n @property({ type: Boolean }) noIcon: boolean = false;\n\n @property({ type: Boolean }) pill: boolean = false;\n\n @property({ type: String }) overrideDefaultText = '';\n\n render() {\n const { icon, text } = appearanceConfig[this.appearance];\n return html`\n <div\n class=\"wrapper ${this.noIcon || this.appearance === 'new'\n ? 'no-icon'\n : ''} ${this.pill ? 'pill' : ''}\"\n appearance=${this.appearance}\n >\n ${this.appearance !== 'new' && !this.noIcon\n ? html`\n ${icon !== ''\n ? html`<ix-icon filled class=\"icon\">${icon}</ix-icon>`\n : html`<slot name=\"icon\" class=\"icon\"></slot>`}\n `\n : nothing}\n ${this.overrideDefaultText !== ''\n ? html`${this.overrideDefaultText}`\n : html`${text}`}\n <slot class=\"text-container\"></slot>\n </div>\n `;\n }\n}\n"]}
|
package/dist/ix-chip.js
CHANGED
|
@@ -3,15 +3,36 @@ import { IxChip } from './IxChip.js';
|
|
|
3
3
|
export class IxChipStyled extends IxChip {
|
|
4
4
|
}
|
|
5
5
|
IxChipStyled.styles = css `
|
|
6
|
+
:host {
|
|
7
|
+
--md-input-chip-leading-icon-color: var(--ix-chip-icon-color, #fff);
|
|
8
|
+
--md-input-chip-focus-leading-icon-color: var(
|
|
9
|
+
--ix-chip-icon-focus-color,
|
|
10
|
+
#fff
|
|
11
|
+
);
|
|
12
|
+
--md-input-chip-hover-leading-icon-color: var(
|
|
13
|
+
--ix-chip-icon-hover-color,
|
|
14
|
+
#fff
|
|
15
|
+
);
|
|
16
|
+
--md-input-chip-trailing-icon-color: var(--ix-chip-icon-color, #ffffffd9);
|
|
17
|
+
--md-input-chip-focus-trailing-icon-color: var(
|
|
18
|
+
--ix-chip-icon-focus-color,
|
|
19
|
+
#ffffffd9
|
|
20
|
+
);
|
|
21
|
+
--md-input-chip-hover-trailing-icon-color: var(
|
|
22
|
+
--ix-chip-icon-hover-color,
|
|
23
|
+
#fff
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
6
27
|
.chip {
|
|
7
28
|
background: var(--ix-chip-container-color, transparent);
|
|
8
29
|
}
|
|
9
30
|
|
|
10
31
|
.outlined {
|
|
11
32
|
--ix-chip-container-color: white;
|
|
12
|
-
--_label-text-color: #1456e0;
|
|
13
|
-
--_hover-label-text-color: #1456e0;
|
|
14
|
-
--_hover-state-layer-color:
|
|
33
|
+
--_label-text-color: var(--clr-primary, #1456e0);
|
|
34
|
+
--_hover-label-text-color: var(--clr-primary, #1456e0);
|
|
35
|
+
--_hover-state-layer-color: var(--clr-on-primary, #fff);
|
|
15
36
|
}
|
|
16
37
|
`;
|
|
17
38
|
window.customElements.define('ix-chip', IxChipStyled);
|
package/dist/ix-chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-chip.js","sourceRoot":"","sources":["../src/ix-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,YAAa,SAAQ,MAAM;;AACtB,mBAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-chip.js","sourceRoot":"","sources":["../src/ix-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,YAAa,SAAQ,MAAM;;AACtB,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgC3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxChip } from './IxChip.js';\n\nexport class IxChipStyled extends IxChip {\n static override styles = css`\n :host {\n --md-input-chip-leading-icon-color: var(--ix-chip-icon-color, #fff);\n --md-input-chip-focus-leading-icon-color: var(\n --ix-chip-icon-focus-color,\n #fff\n );\n --md-input-chip-hover-leading-icon-color: var(\n --ix-chip-icon-hover-color,\n #fff\n );\n --md-input-chip-trailing-icon-color: var(--ix-chip-icon-color, #ffffffd9);\n --md-input-chip-focus-trailing-icon-color: var(\n --ix-chip-icon-focus-color,\n #ffffffd9\n );\n --md-input-chip-hover-trailing-icon-color: var(\n --ix-chip-icon-hover-color,\n #fff\n );\n }\n\n .chip {\n background: var(--ix-chip-container-color, transparent);\n }\n\n .outlined {\n --ix-chip-container-color: white;\n --_label-text-color: var(--clr-primary, #1456e0);\n --_hover-label-text-color: var(--clr-primary, #1456e0);\n --_hover-state-layer-color: var(--clr-on-primary, #fff);\n }\n `;\n}\n\nwindow.customElements.define('ix-chip', IxChipStyled);\n"]}
|
package/dist/ix-chip.min.js
CHANGED
|
@@ -1 +1,13 @@
|
|
|
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";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}))}}render(){let
|
|
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}))}}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,attribute:"always-focusable"})],IxChip.prototype,"alwaysFocusable",void 0),__decorate([property()],IxChip.prototype,"label",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
|
+
--ix-chip-icon-focus-color,
|
|
3
|
+
#fff
|
|
4
|
+
);--md-input-chip-hover-leading-icon-color:var(
|
|
5
|
+
--ix-chip-icon-hover-color,
|
|
6
|
+
#fff
|
|
7
|
+
);--md-input-chip-trailing-icon-color:var(--ix-chip-icon-color, #ffffffd9);--md-input-chip-focus-trailing-icon-color:var(
|
|
8
|
+
--ix-chip-icon-focus-color,
|
|
9
|
+
#ffffffd9
|
|
10
|
+
);--md-input-chip-hover-trailing-icon-color:var(
|
|
11
|
+
--ix-chip-icon-hover-color,
|
|
12
|
+
#fff
|
|
13
|
+
)}.chip{background:var(--ix-chip-container-color,transparent)}.outlined{--ix-chip-container-color:white;--_label-text-color:var(--clr-primary, #1456e0);--_hover-label-text-color:var(--clr-primary, #1456e0);--_hover-state-layer-color:var(--clr-on-primary, #fff)}`,window.customElements.define("ix-chip",IxChipStyled);export{IxChipStyled};
|
package/dist/ix-custom-chip.js
CHANGED
|
@@ -4,59 +4,35 @@ export class IxCustomChipStyled extends IxCustomChip {
|
|
|
4
4
|
}
|
|
5
5
|
IxCustomChipStyled.styles = css `
|
|
6
6
|
:host {
|
|
7
|
-
--ix-font-color: #092241;
|
|
7
|
+
--ix-font-color: var(--clr-on-surface, #092241);
|
|
8
8
|
--ix-icon-pending-color: #ff9800;
|
|
9
|
+
white-space: var(--ix-custom-chip-white-space, nowrap);
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.wrapper {
|
|
12
13
|
align-items: center;
|
|
13
14
|
background-color: var(
|
|
14
15
|
--ix-custom-chip-background-color,
|
|
15
|
-
var(--
|
|
16
|
+
var(--clr-surface-container-lowest, #ffffff)
|
|
16
17
|
);
|
|
17
18
|
border-radius: var(--ix-custom-chip-border-radius, 62.4375rem);
|
|
18
|
-
color: var(--ix-custom-chip-color, --
|
|
19
|
+
color: var(--ix-custom-chip-color, --clr-on-surface);
|
|
19
20
|
display: flex;
|
|
20
21
|
font-size: var(--ix-custom-chip-font-size, 0.75rem);
|
|
21
22
|
font-weight: var(--ix-custom-chip-font-weight, 700);
|
|
22
|
-
gap: var(--ix-custom-chip-icon-gap
|
|
23
|
+
gap: var(--ix-custom-chip-icon-gap, 0.4375rem);
|
|
23
24
|
letter-spacing: var(--ix-custom-chip-letter-spacing, 0.078125rem);
|
|
24
|
-
padding: var(--ix-custom-chip-padding, 0.25rem
|
|
25
|
+
padding: var(--ix-custom-chip-padding, 0.25rem 0.5rem 0.25rem 0.25rem);
|
|
25
26
|
text-transform: var(--ix-custom-chip-text-transform, uppercase);
|
|
27
|
+
font-family: var(
|
|
28
|
+
--ix-custom-chip-font-family,
|
|
29
|
+
var(--root-secondary-font, 'sans-serif')
|
|
30
|
+
);
|
|
26
31
|
width: fit-content;
|
|
27
32
|
}
|
|
28
33
|
|
|
29
|
-
.
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.wrapper[appearance='default'].pill {
|
|
34
|
-
color: var(--ix-font-color);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.wrapper[appearance='new'].pill,
|
|
38
|
-
.wrapper[appearance='completed'].pill,
|
|
39
|
-
.wrapper[appearance='announced'].pill,
|
|
40
|
-
.wrapper[appearance='approved'].pill {
|
|
41
|
-
background-color: var(--md-sys-color-success, #4caf50);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.wrapper[appearance='pending'].pill,
|
|
45
|
-
.wrapper[appearance='pending_pickup'].pill,
|
|
46
|
-
.wrapper[appearance='inProgress'].pill {
|
|
47
|
-
background-color: var(--ix-icon-pending-color, #ff9800);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.wrapper[appearance='rejected'].pill,
|
|
51
|
-
.wrapper[appearance='cancellationRequested'].pill,
|
|
52
|
-
.wrapper[appearance='approvalDenied'].pill,
|
|
53
|
-
.wrapper[appearance='cancelled'].pill {
|
|
54
|
-
background-color: var(--ix-button-cancel-color, #db0028);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.wrapper.pill {
|
|
58
|
-
padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);
|
|
59
|
-
color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));
|
|
34
|
+
.no-icon {
|
|
35
|
+
padding: var(--ix-custom-chip-no-icon-padding, 0.25rem 1rem);
|
|
60
36
|
}
|
|
61
37
|
|
|
62
38
|
.icon {
|
|
@@ -69,24 +45,63 @@ IxCustomChipStyled.styles = css `
|
|
|
69
45
|
color: var(--ix-button-unknown-status-color);
|
|
70
46
|
}
|
|
71
47
|
|
|
48
|
+
[appearance='new'] {
|
|
49
|
+
background-color: var(
|
|
50
|
+
--ix-button-new-bg-color,
|
|
51
|
+
var(--clr-success, #4caf50)
|
|
52
|
+
);
|
|
53
|
+
color: var(--ix-custom-chip-on-new, var(--clr-on-success, #fff));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[appearance='new'] .icon {
|
|
57
|
+
color: var(--ix-custom-chip-on-new, var(--clr-on-success, #fff));
|
|
58
|
+
}
|
|
59
|
+
|
|
72
60
|
[appearance='completed'],
|
|
73
61
|
[appearance='announced'],
|
|
74
|
-
[appearance='approved']
|
|
75
|
-
|
|
76
|
-
|
|
62
|
+
[appearance='approved'] {
|
|
63
|
+
background-color: var(
|
|
64
|
+
--ix-button-success-bg-color,
|
|
65
|
+
var(--clr-surface-container-lowest, #fff)
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[appearance='completed'] .icon,
|
|
70
|
+
[appearance='announced'] .icon,
|
|
71
|
+
[appearance='approved'] .icon {
|
|
72
|
+
color: var(--ix-custom-chip-on-success, var(--clr-success, #4caf50));
|
|
77
73
|
}
|
|
78
74
|
|
|
79
75
|
[appearance='pending'],
|
|
80
76
|
[appearance='pending_pickup'],
|
|
81
77
|
[appearance='inProgress'] {
|
|
82
|
-
color: var(
|
|
78
|
+
background-color: var(
|
|
79
|
+
--ix-button-warning-bg-color,
|
|
80
|
+
var(--clr-surface-container-lowest, #fff)
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[appearance='pending'] .icon,
|
|
85
|
+
[appearance='pending_pickup'] .icon,
|
|
86
|
+
[appearance='inProgress'] .icon {
|
|
87
|
+
color: var(--ix-custom-chip-on-warning, var(--clr-warning, #ff9800));
|
|
83
88
|
}
|
|
84
89
|
|
|
85
90
|
[appearance='rejected'],
|
|
86
91
|
[appearance='cancellationRequested'],
|
|
87
92
|
[appearance='approvalDenied'],
|
|
88
93
|
[appearance='cancelled'] {
|
|
89
|
-
color: var(
|
|
94
|
+
background-color: var(
|
|
95
|
+
--ix-button-critical-bg-color,
|
|
96
|
+
var(--clr-surface-container-lowest, #fff)
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
[appearance='rejected'] .icon,
|
|
101
|
+
[appearance='cancellationRequested'] .icon,
|
|
102
|
+
[appearance='approvalDenied'] .icon,
|
|
103
|
+
[appearance='cancelled'] .icon {
|
|
104
|
+
color: var(--ix-custom-chip-on-critical, var(--clr-critical, #db0028));
|
|
90
105
|
}
|
|
91
106
|
|
|
92
107
|
.text-container {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-custom-chip.js","sourceRoot":"","sources":["../src/ix-custom-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,kBAAmB,SAAQ,YAAY;;AAClC,yBAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-custom-chip.js","sourceRoot":"","sources":["../src/ix-custom-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,kBAAmB,SAAQ,YAAY;;AAClC,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyG3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxCustomChip } from './IxCustomChip.js';\n\nexport class IxCustomChipStyled extends IxCustomChip {\n static override styles = css`\n :host {\n --ix-font-color: var(--clr-on-surface, #092241);\n --ix-icon-pending-color: #ff9800;\n white-space: var(--ix-custom-chip-white-space, nowrap);\n }\n\n .wrapper {\n align-items: center;\n background-color: var(\n --ix-custom-chip-background-color,\n var(--clr-surface-container-lowest, #ffffff)\n );\n border-radius: var(--ix-custom-chip-border-radius, 62.4375rem);\n color: var(--ix-custom-chip-color, --clr-on-surface);\n display: flex;\n font-size: var(--ix-custom-chip-font-size, 0.75rem);\n font-weight: var(--ix-custom-chip-font-weight, 700);\n gap: var(--ix-custom-chip-icon-gap, 0.4375rem);\n letter-spacing: var(--ix-custom-chip-letter-spacing, 0.078125rem);\n padding: var(--ix-custom-chip-padding, 0.25rem 0.5rem 0.25rem 0.25rem);\n text-transform: var(--ix-custom-chip-text-transform, uppercase);\n font-family: var(\n --ix-custom-chip-font-family,\n var(--root-secondary-font, 'sans-serif')\n );\n width: fit-content;\n }\n\n .no-icon {\n padding: var(--ix-custom-chip-no-icon-padding, 0.25rem 1rem);\n }\n\n .icon {\n display: flex;\n font-size: var(--ix-custom-chip-icon-font-size, 1.5625rem);\n line-height: var(--ix-custom-chip-icon-line-height, 1.5625rem);\n }\n\n [appearance] {\n color: var(--ix-button-unknown-status-color);\n }\n\n [appearance='new'] {\n background-color: var(\n --ix-button-new-bg-color,\n var(--clr-success, #4caf50)\n );\n color: var(--ix-custom-chip-on-new, var(--clr-on-success, #fff));\n }\n\n [appearance='new'] .icon {\n color: var(--ix-custom-chip-on-new, var(--clr-on-success, #fff));\n }\n\n [appearance='completed'],\n [appearance='announced'],\n [appearance='approved'] {\n background-color: var(\n --ix-button-success-bg-color,\n var(--clr-surface-container-lowest, #fff)\n );\n }\n\n [appearance='completed'] .icon,\n [appearance='announced'] .icon,\n [appearance='approved'] .icon {\n color: var(--ix-custom-chip-on-success, var(--clr-success, #4caf50));\n }\n\n [appearance='pending'],\n [appearance='pending_pickup'],\n [appearance='inProgress'] {\n background-color: var(\n --ix-button-warning-bg-color,\n var(--clr-surface-container-lowest, #fff)\n );\n }\n\n [appearance='pending'] .icon,\n [appearance='pending_pickup'] .icon,\n [appearance='inProgress'] .icon {\n color: var(--ix-custom-chip-on-warning, var(--clr-warning, #ff9800));\n }\n\n [appearance='rejected'],\n [appearance='cancellationRequested'],\n [appearance='approvalDenied'],\n [appearance='cancelled'] {\n background-color: var(\n --ix-button-critical-bg-color,\n var(--clr-surface-container-lowest, #fff)\n );\n }\n\n [appearance='rejected'] .icon,\n [appearance='cancellationRequested'] .icon,\n [appearance='approvalDenied'] .icon,\n [appearance='cancelled'] .icon {\n color: var(--ix-custom-chip-on-critical, var(--clr-critical, #db0028));\n }\n\n .text-container {\n margin-right: var(--ix-custom-chip-margin-right, 1rem);\n }\n `;\n}\n\nwindow.customElements.define('ix-custom-chip', IxCustomChipStyled);\n"]}
|
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.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -31,10 +31,10 @@
|
|
|
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.6",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
|
-
"lit": "^
|
|
37
|
+
"lit": "^3.2.1",
|
|
38
38
|
"react": "^18.2.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"husky": "^4.3.8",
|
|
52
52
|
"lint-staged": "^10.5.4",
|
|
53
53
|
"prettier": "^2.4.1",
|
|
54
|
+
"rollup": "^4.29.1",
|
|
54
55
|
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
55
56
|
"rollup-plugin-summary": "^2.0.0",
|
|
56
57
|
"rollup-plugin-uglify": "^6.0.4",
|
|
@@ -104,5 +105,5 @@
|
|
|
104
105
|
"README.md",
|
|
105
106
|
"LICENSE"
|
|
106
107
|
],
|
|
107
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
|
|
108
109
|
}
|