@digital-realty/ix-chip 1.0.27-alpha.0 → 1.0.27
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/IxCustomChip.d.ts +2 -0
- package/dist/IxCustomChip.js +13 -3
- package/dist/IxCustomChip.js.map +1 -1
- package/dist/ix-custom-chip.js +45 -15
- package/dist/ix-custom-chip.js.map +1 -1
- package/package.json +3 -3
package/dist/IxCustomChip.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ declare const appearanceConfig: AppearanceConfig;
|
|
|
10
10
|
export declare class IxCustomChip extends LitElement {
|
|
11
11
|
appearance: keyof typeof appearanceConfig;
|
|
12
12
|
noIcon: boolean;
|
|
13
|
+
pill: boolean;
|
|
14
|
+
overrideDefaultText: string;
|
|
13
15
|
render(): import("lit").TemplateResult<1>;
|
|
14
16
|
}
|
|
15
17
|
export {};
|
package/dist/IxCustomChip.js
CHANGED
|
@@ -5,6 +5,8 @@ import '@digital-realty/ix-icon/ix-icon.js';
|
|
|
5
5
|
const appearanceConfig = {
|
|
6
6
|
default: { icon: '', text: '' },
|
|
7
7
|
completed: { icon: 'check_circle', text: 'COMPLETED' },
|
|
8
|
+
announced: { icon: 'check_circle', text: 'ANNOUNCED' },
|
|
9
|
+
approved: { icon: 'check_circle', text: 'APPROVED' },
|
|
8
10
|
cancelled: { icon: 'delete_forever', text: 'CANCELLED' },
|
|
9
11
|
cancellationRequested: {
|
|
10
12
|
icon: 'auto_delete',
|
|
@@ -15,18 +17,21 @@ const appearanceConfig = {
|
|
|
15
17
|
pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },
|
|
16
18
|
pending_pickup: { icon: 'assignment_late', text: 'PENDING PICK-UP' },
|
|
17
19
|
rejected: { icon: 'warning', text: 'REJECTED' },
|
|
20
|
+
approvalDenied: { icon: 'warning', text: 'APPROVAL DENIED' },
|
|
18
21
|
};
|
|
19
22
|
export class IxCustomChip extends LitElement {
|
|
20
23
|
constructor() {
|
|
21
24
|
super(...arguments);
|
|
22
25
|
this.appearance = 'default';
|
|
23
26
|
this.noIcon = false;
|
|
27
|
+
this.pill = false;
|
|
28
|
+
this.overrideDefaultText = '';
|
|
24
29
|
}
|
|
25
30
|
render() {
|
|
26
31
|
const { icon, text } = appearanceConfig[this.appearance];
|
|
27
32
|
return html `
|
|
28
33
|
<div
|
|
29
|
-
class="wrapper ${this.noIcon ? 'no-icon' : ''}"
|
|
34
|
+
class="wrapper ${this.noIcon ? 'no-icon' : ''} ${this.pill ? 'pill' : ''}"
|
|
30
35
|
appearance=${this.appearance}
|
|
31
36
|
>
|
|
32
37
|
${!this.noIcon
|
|
@@ -36,8 +41,7 @@ export class IxCustomChip extends LitElement {
|
|
|
36
41
|
: html `<slot name="icon" class="icon"></slot>`}
|
|
37
42
|
`
|
|
38
43
|
: nothing}
|
|
39
|
-
${
|
|
40
|
-
|
|
44
|
+
${this.overrideDefaultText !== '' ? html `${this.overrideDefaultText}` : html `${text}`}
|
|
41
45
|
<slot class="text-container"></slot>
|
|
42
46
|
</div>
|
|
43
47
|
`;
|
|
@@ -49,4 +53,10 @@ __decorate([
|
|
|
49
53
|
__decorate([
|
|
50
54
|
property({ type: Boolean })
|
|
51
55
|
], IxCustomChip.prototype, "noIcon", void 0);
|
|
56
|
+
__decorate([
|
|
57
|
+
property({ type: Boolean })
|
|
58
|
+
], IxCustomChip.prototype, "pill", void 0);
|
|
59
|
+
__decorate([
|
|
60
|
+
property({ type: String })
|
|
61
|
+
], IxCustomChip.prototype, "overrideDefaultText", void 0);
|
|
52
62
|
//# sourceMappingURL=IxCustomChip.js.map
|
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,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;
|
|
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;QAExB,wBAAmB,GAAG,EAAE,CAAC;IAqBtD,CAAC;IAnBC,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,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,EAAE;qBAC1D,IAAI,CAAC,UAAU;;UAE1B,CAAC,IAAI,CAAC,MAAM;YACZ,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,KAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,EAAE;;;KAGtF,CAAC;IACJ,CAAC;CACF;AA5B6B;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;AAExB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAC,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 ? 'no-icon' : ''} ${this.pill ? 'pill': ''}\"\n appearance=${this.appearance}\n >\n ${!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 !=='' ? html`${this.overrideDefaultText}`: html`${text}`}\n <slot class=\"text-container\"></slot>\n </div>\n `;\n }\n}\n"]}
|
package/dist/ix-custom-chip.js
CHANGED
|
@@ -26,41 +26,71 @@ IxCustomChipStyled.styles = css `
|
|
|
26
26
|
width: fit-content;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.wrapper
|
|
29
|
+
.wrapper.pill {
|
|
30
|
+
color: var( --ix-font-color);
|
|
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 {
|
|
30
41
|
background-color: var(
|
|
31
42
|
--ix-button-confirm-color,
|
|
32
43
|
var(--md-sys-color-on-primary, #002020)
|
|
33
44
|
);
|
|
34
|
-
color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));
|
|
35
|
-
padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);
|
|
36
45
|
}
|
|
37
46
|
|
|
38
|
-
.wrapper.
|
|
47
|
+
.wrapper[appearance='pending'].pill,
|
|
48
|
+
.wrapper[appearance='pending_pickup'].pill,
|
|
49
|
+
.wrapper[appearance='inProgress'].pill {
|
|
50
|
+
background-color: var(--ix-icon-pending-color, #ff9800);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.wrapper[appearance='rejected'].pill ,
|
|
54
|
+
.wrapper[appearance='cancellationRequested'].pill ,
|
|
55
|
+
.wrapper[appearance='approvalDenied'].pill ,
|
|
56
|
+
.wrapper[appearance='cancelled'].pill {
|
|
57
|
+
background-color: var(--ix-button-cancel-color, #db0028);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
.wrapper.pill{
|
|
39
62
|
padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);
|
|
63
|
+
color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));
|
|
40
64
|
}
|
|
41
65
|
|
|
42
66
|
.icon {
|
|
43
|
-
|
|
44
|
-
--ix-custom-chip-icon-color,
|
|
45
|
-
var(--md-sys-color-scrim, #000000)
|
|
46
|
-
);
|
|
67
|
+
|
|
47
68
|
display: flex;
|
|
48
69
|
font-size: var(--ix-custom-chip-icon-font-size, 1.5625rem);
|
|
49
70
|
line-height: var(--ix-custom-chip-icon-line-height, 1.5625rem);
|
|
50
71
|
}
|
|
51
72
|
|
|
52
|
-
[appearance
|
|
53
|
-
color: var(--ix-button-
|
|
73
|
+
[appearance] {
|
|
74
|
+
color: var(--ix-button-unknown-status-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
[appearance='completed'],
|
|
78
|
+
[appearance='announced'],
|
|
79
|
+
[appearance='approved'],
|
|
80
|
+
[appearance='new'] {
|
|
81
|
+
color: var(--ix-button-confirm-color, #4caf50);
|
|
54
82
|
}
|
|
55
83
|
|
|
56
|
-
[appearance='pending']
|
|
57
|
-
[appearance='
|
|
84
|
+
[appearance='pending'],
|
|
85
|
+
[appearance='pending_pickup'],
|
|
86
|
+
[appearance='inProgress'] {
|
|
58
87
|
color: var(--ix-icon-pending-color, #ff9800);
|
|
59
88
|
}
|
|
60
89
|
|
|
61
|
-
[appearance='rejected']
|
|
62
|
-
[appearance='cancellationRequested']
|
|
63
|
-
[appearance='
|
|
90
|
+
[appearance='rejected'] ,
|
|
91
|
+
[appearance='cancellationRequested'] ,
|
|
92
|
+
[appearance='approvalDenied'],
|
|
93
|
+
[appearance='cancelled'] {
|
|
64
94
|
color: var(--ix-button-cancel-color, #db0028);
|
|
65
95
|
}
|
|
66
96
|
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+F3B,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: #092241;\n --ix-icon-pending-color: #ff9800;\n }\n\n .wrapper {\n align-items: center;\n background-color: var(\n --ix-custom-chip-background-color,\n var(--md-sys-color-on-primary, #ffffff)\n );\n border-radius: var(--ix-custom-chip-border-radius, 62.4375rem);\n color: var(--ix-custom-chip-color, --ix-font-color);\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-right, 0.4375rem);\n letter-spacing: var(--ix-custom-chip-letter-spacing, 0.078125rem);\n padding: var(--ix-custom-chip-padding, 0.25rem 1rem 0.25rem 0.25rem);\n text-transform: var(--ix-custom-chip-text-transform, uppercase);\n width: fit-content;\n }\n\n .wrapper.pill {\n color: var( --ix-font-color);\n }\n\n .wrapper[appearance='default'].pill {\n color: var( --ix-font-color);\n }\n\n .wrapper[appearance='new'].pill,\n .wrapper[appearance='completed'].pill,\n .wrapper[appearance='announced'].pill,\n .wrapper[appearance='approved'].pill {\n background-color: var(\n --ix-button-confirm-color,\n var(--md-sys-color-on-primary, #002020)\n );\n }\n\n .wrapper[appearance='pending'].pill,\n .wrapper[appearance='pending_pickup'].pill,\n .wrapper[appearance='inProgress'].pill {\n background-color: var(--ix-icon-pending-color, #ff9800);\n }\n\n .wrapper[appearance='rejected'].pill ,\n .wrapper[appearance='cancellationRequested'].pill ,\n .wrapper[appearance='approvalDenied'].pill ,\n .wrapper[appearance='cancelled'].pill {\n background-color: var(--ix-button-cancel-color, #db0028);\n }\n\n\n .wrapper.pill{\n padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);\n color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));\n }\n\n .icon {\n\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='completed'],\n [appearance='announced'],\n [appearance='approved'],\n [appearance='new'] {\n color: var(--ix-button-confirm-color, #4caf50);\n }\n\n [appearance='pending'],\n [appearance='pending_pickup'],\n [appearance='inProgress'] {\n color: var(--ix-icon-pending-color, #ff9800);\n }\n\n [appearance='rejected'] ,\n [appearance='cancellationRequested'] ,\n [appearance='approvalDenied'],\n [appearance='cancelled'] {\n color: var(--ix-button-cancel-color, #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.0.27
|
|
6
|
+
"version": "1.0.27",
|
|
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.0.
|
|
34
|
+
"@digital-realty/ix-icon": "^1.0.37",
|
|
35
35
|
"@lit/react": "^1.0.2",
|
|
36
36
|
"@material/web": "1.2.0",
|
|
37
37
|
"lit": "^2.0.2",
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"README.md",
|
|
105
105
|
"LICENSE"
|
|
106
106
|
],
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "a0affe5ea0c066584b5edb61e53fa2d20c77b8b8"
|
|
108
108
|
}
|