@digital-realty/ix-widget 2.2.14 → 2.2.15
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/IxWidget.js +3 -1
- package/dist/IxWidget.js.map +1 -1
- package/dist/ix-status-counter-group.js +2 -1
- package/dist/ix-status-counter-group.js.map +1 -1
- package/dist/ix-status-counter.d.ts +4 -1
- package/dist/ix-status-counter.js +70 -6
- package/dist/ix-status-counter.js.map +1 -1
- package/dist/ix-widget.min.js +1 -1
- package/package.json +2 -2
package/dist/IxWidget.js
CHANGED
|
@@ -69,7 +69,9 @@ IxWidget.styles = css `
|
|
|
69
69
|
|
|
70
70
|
@media (min-width: 600px) {
|
|
71
71
|
[type='status-counter'].card {
|
|
72
|
-
--ix-widget-padding:
|
|
72
|
+
--ix-widget-padding: 0 20px 0 24px;
|
|
73
|
+
min-height: 134px;
|
|
74
|
+
display: flex;
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
[type='status-counter-group'].card {
|
package/dist/IxWidget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;
|
|
1
|
+
{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAkF8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AAvFM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ElB,AA/EY,CA+EX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class IxWidget extends LitElement {\n static styles = css`\n .card {\n border-radius: 0.75rem;\n background: var(--ix-widget-background, white);\n padding: var(--ix-widget-padding, 16px 24px 32px);\n border: var(--ix-widget-border, none);\n }\n\n [type='status-counter'].card {\n margin-bottom: 0;\n --ix-widget-padding: 0;\n --ix-widget-padding: 1rem;\n }\n\n [type='status-counter-group'].card {\n --ix-widget-padding: 1rem;\n --ix-widget-background: transparent;\n }\n\n [type='action-list'].card {\n --ix-widget-padding: 0 11px 16px 24px;\n }\n\n [type='info-card'].card {\n display: block;\n max-width: 348px;\n border-radius: 0.5rem;\n border: 1px solid #e0e0e0;\n position: relative;\n overflow: auto;\n aspect-ratio: 1 / 1.47;\n }\n [type='info-card-resources'].card {\n display: block;\n max-width: 348px;\n border-radius: 0.5rem;\n border: 1px solid #e0e0e0;\n position: relative;\n overflow: hidden;\n aspect-ratio: 1 / 0.85;\n }\n [type='action-list'].card {\n box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n }\n [type='news-feed'].card {\n display: flex;\n flex-direction: column;\n background: rgb(255, 255, 255);\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n rgb(225, 228, 232) 0px 0px 0px 1px inset;\n border-radius: 12px;\n padding-bottom: 11px;\n }\n\n @media (min-width: 600px) {\n [type='status-counter'].card {\n --ix-widget-padding: 0 20px 0 24px;\n min-height: 134px;\n display: flex;\n }\n\n [type='status-counter-group'].card {\n padding: 0;\n }\n }\n\n @media (max-width: 600px) {\n [type='status-counter-group'].card {\n background: #c8dffa;\n padding-left: 0;\n padding-right: 0;\n }\n [type='status-counter'].card {\n --ix-widget-padding: 0;\n background: transparent;\n border-radius: 0;\n }\n }\n `;\n\n @property({ type: String }) type = 'default';\n\n protected override render() {\n return html`<div class=\"card\" type=${this.type}>\n <slot></slot>\n </div>`;\n }\n}\n"]}
|
|
@@ -28,13 +28,14 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
|
|
|
28
28
|
<div class="content">
|
|
29
29
|
<div class="layout">
|
|
30
30
|
${this.data.map((item, index) => {
|
|
31
|
-
const { value, header, icon, target } = item;
|
|
31
|
+
const { value, header, icon, target, error } = item;
|
|
32
32
|
return html `<ix-status-counter
|
|
33
33
|
class="block b${index + 1} l${dataLength} l5"
|
|
34
34
|
.value=${value}
|
|
35
35
|
.header=${header}
|
|
36
36
|
.icon=${iconMap[icon]}
|
|
37
37
|
.target=${target}
|
|
38
|
+
?error=${error}
|
|
38
39
|
data-testid="lp-${testIdTransform(header)}"
|
|
39
40
|
>
|
|
40
41
|
</ix-status-counter>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EACL,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,GACP,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;IACT,MAAM;CACP,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAsDsB,SAAI,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EACL,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,MAAM,GACP,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;IACT,MAAM;CACP,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAsDsB,SAAI,GAAG,EAAE,CAAC;IA4BvC,CAAC;IA1BoB,MAAM;;QACvB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC;QAErC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACpD,OAAO,IAAI,CAAA;8BACO,KAAK,GAAG,CAAC,MAAM,UAAU;uBAChC,KAAK;wBACJ,MAAM;sBACR,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;uBACP,KAAK;gCACI,eAAe,CAAC,MAAM,CAAC;;iCAEtB,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AAhFM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDlB,AAnDY,CAmDX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AAtD1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAkFhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport {\n laptop,\n users,\n mySites,\n dcim,\n locations,\n orders,\n} from './assets/iconset.js';\nimport { testIdTransform } from './utils/testIdTransform.js';\n\nconst iconMap = {\n laptop,\n users,\n mySites,\n dcim,\n locations,\n orders,\n};\n\n@customElement('ix-status-counter-group')\nexport class IxStatusCounterGroup extends LitElement {\n static styles = css`\n .layout {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n .block {\n grid-column: span 3 / span 3;\n }\n @media (min-width: 600px) {\n .layout {\n grid-gap: 16px 32px;\n }\n\n .b5 {\n grid-column: span 3 / span 3;\n }\n\n ix-status-counter {\n --ix-widget-padding: 1rem;\n }\n }\n @media (min-width: 1024px) {\n .block {\n grid-column: span 2 / span 2;\n }\n\n .b4.l5 {\n grid-column: span 3 / span 3;\n }\n\n .b5.l5 {\n grid-column: span 3 / span 3;\n }\n }\n @media (max-width: 600px) {\n .layout {\n display: block;\n background: none;\n }\n ix-status-counter {\n display: block;\n border-bottom: 1px solid #b1c6f5;\n }\n ix-status-counter:first-child {\n margin-top: -0.5rem;\n }\n ix-status-counter:last-child {\n border-bottom: none;\n margin-bottom: -0.5rem;\n }\n }\n `;\n\n @property({ type: Array }) data = [];\n\n protected override render() {\n const dataLength = this.data?.length;\n\n if (!dataLength) {\n return html``;\n }\n return html`<ix-widget type=\"status-counter-group\">\n <div class=\"content\">\n <div class=\"layout\">\n ${this.data.map((item, index) => {\n const { value, header, icon, target, error } = item;\n return html`<ix-status-counter\n class=\"block b${index + 1} l${dataLength} l5\"\n .value=${value}\n .header=${header}\n .icon=${iconMap[icon]}\n .target=${target}\n ?error=${error}\n data-testid=\"lp-${testIdTransform(header)}\"\n >\n </ix-status-counter>`;\n })}\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import '@digital-realty/ix-icon/ix-icon.js';
|
|
3
3
|
import './IxWidget.js';
|
|
4
|
+
export declare const ERROR_DISPLAY_VALUE = "--";
|
|
5
|
+
export declare const ERROR_DISPLAY_TEXT = "Unable to retrieve data";
|
|
4
6
|
export declare class IxStatusCounter extends LitElement {
|
|
5
7
|
static styles: import("lit").CSSResult;
|
|
6
|
-
value: number |
|
|
8
|
+
value: number | string | undefined;
|
|
7
9
|
header: string;
|
|
8
10
|
icon: import("lit-html").TemplateResult<2>;
|
|
9
11
|
target: string;
|
|
12
|
+
error: boolean;
|
|
10
13
|
navigate: () => void;
|
|
11
14
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
12
15
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement, css } from 'lit';
|
|
2
|
+
import { html, LitElement, css, nothing } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import '@digital-realty/ix-icon/ix-icon.js';
|
|
5
5
|
import './IxWidget.js';
|
|
6
6
|
import { laptop, loader } from './assets/iconset.js';
|
|
7
|
+
export const ERROR_DISPLAY_VALUE = '--';
|
|
8
|
+
export const ERROR_DISPLAY_TEXT = 'Unable to retrieve data';
|
|
7
9
|
let IxStatusCounter = class IxStatusCounter extends LitElement {
|
|
8
10
|
constructor() {
|
|
9
11
|
super(...arguments);
|
|
@@ -11,6 +13,7 @@ let IxStatusCounter = class IxStatusCounter extends LitElement {
|
|
|
11
13
|
this.header = 'status';
|
|
12
14
|
this.icon = laptop;
|
|
13
15
|
this.target = '/';
|
|
16
|
+
this.error = false;
|
|
14
17
|
this.navigate = () => {
|
|
15
18
|
this.dispatchEvent(new CustomEvent('route', {
|
|
16
19
|
detail: { route: this.target },
|
|
@@ -32,14 +35,35 @@ let IxStatusCounter = class IxStatusCounter extends LitElement {
|
|
|
32
35
|
>
|
|
33
36
|
<div class="content">
|
|
34
37
|
<div class="info">
|
|
35
|
-
${this.
|
|
38
|
+
${this.error
|
|
39
|
+
? html `<div class="api-error">
|
|
40
|
+
<ix-icon
|
|
41
|
+
tabindex="0"
|
|
42
|
+
aria-label="Error"
|
|
43
|
+
@click=${(e) => {
|
|
44
|
+
e.stopPropagation();
|
|
45
|
+
}}
|
|
46
|
+
>Error</ix-icon
|
|
47
|
+
>
|
|
48
|
+
<span role="tooltip" aria-live="polite"
|
|
49
|
+
>${ERROR_DISPLAY_TEXT}</span
|
|
50
|
+
>
|
|
51
|
+
</div>`
|
|
52
|
+
: nothing}
|
|
53
|
+
${!this.error && ['string', 'number'].includes(typeof this.value)
|
|
36
54
|
? html `<h3 aria-label="${this.header} status" role="status">
|
|
37
55
|
${typeof this.value === 'number'
|
|
38
56
|
? this.value.toLocaleString()
|
|
39
57
|
: this.value}
|
|
40
58
|
</h3>`
|
|
41
|
-
:
|
|
42
|
-
|
|
59
|
+
: nothing}
|
|
60
|
+
${this.value === undefined
|
|
61
|
+
? html `<span class="loader">${loader}</span>`
|
|
62
|
+
: nothing}
|
|
63
|
+
${this.error
|
|
64
|
+
? html `<h2 class="error" role="status">${ERROR_DISPLAY_VALUE}</h2>`
|
|
65
|
+
: nothing}
|
|
66
|
+
<h2 class="heading">${this.header}</h2>
|
|
43
67
|
</div>
|
|
44
68
|
<ix-icon>${this.icon}</ix-icon>
|
|
45
69
|
</div>
|
|
@@ -59,17 +83,21 @@ IxStatusCounter.styles = css `
|
|
|
59
83
|
font-family: var(--text-default-font, sans-serif);
|
|
60
84
|
font-size: var(--text-default-size, 16px);
|
|
61
85
|
letter-spacing: var(--text-default-letter-spacing, 0.0275em);
|
|
62
|
-
line-height:
|
|
86
|
+
line-height: 1.2;
|
|
63
87
|
font-weight: var(--text-default-weight, normal);
|
|
64
88
|
text-transform: var(--text-default-decoration, none);
|
|
65
89
|
text-decoration: var(--text-default-transform, none);
|
|
66
90
|
}
|
|
91
|
+
h2.error {
|
|
92
|
+
font-size: 2.25rem;
|
|
93
|
+
font-family: var(--text-page-title-font, sans-serif);
|
|
94
|
+
}
|
|
67
95
|
h3 {
|
|
68
96
|
margin: 0px;
|
|
69
97
|
font-family: var(--text-page-title-font, sans-serif);
|
|
70
98
|
font-size: var(--text-page-title-size, 2.125rem);
|
|
71
99
|
letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);
|
|
72
|
-
line-height:
|
|
100
|
+
line-height: 1.2;
|
|
73
101
|
font-weight: var(--text-page-title-weight, bold);
|
|
74
102
|
text-decoration: var(--text-page-title-decoration, none);
|
|
75
103
|
text-transform: var(--text-page-title-transform, none);
|
|
@@ -81,6 +109,7 @@ IxStatusCounter.styles = css `
|
|
|
81
109
|
-webkit-box-align: center;
|
|
82
110
|
align-items: center;
|
|
83
111
|
cursor: pointer;
|
|
112
|
+
width: 100%;
|
|
84
113
|
}
|
|
85
114
|
ix-icon {
|
|
86
115
|
background-color: rgb(255, 255, 255);
|
|
@@ -94,6 +123,37 @@ IxStatusCounter.styles = css `
|
|
|
94
123
|
height: 60px;
|
|
95
124
|
font-size: 36px;
|
|
96
125
|
}
|
|
126
|
+
.api-error {
|
|
127
|
+
position: relative;
|
|
128
|
+
}
|
|
129
|
+
.api-error ix-icon {
|
|
130
|
+
width: 24px;
|
|
131
|
+
height: 24px;
|
|
132
|
+
--ix-icon-font-size: 24px;
|
|
133
|
+
margin-left: -4px;
|
|
134
|
+
background-color: transparent;
|
|
135
|
+
color: var(--cp-critical-40, #db0028);
|
|
136
|
+
}
|
|
137
|
+
.api-error span {
|
|
138
|
+
background-color: var(--clr-on-surface);
|
|
139
|
+
border-radius: 3px;
|
|
140
|
+
color: white;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
line-height: 26px;
|
|
143
|
+
padding: 0 8px;
|
|
144
|
+
position: absolute;
|
|
145
|
+
top: -1px;
|
|
146
|
+
left: 30px;
|
|
147
|
+
white-space: nowrap;
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
.api-error ix-icon:hover + span,
|
|
151
|
+
.api-error ix-icon:focus + span {
|
|
152
|
+
display: block;
|
|
153
|
+
}
|
|
154
|
+
.api-error + h3 {
|
|
155
|
+
margin-bottom: -4px;
|
|
156
|
+
}
|
|
97
157
|
.loader {
|
|
98
158
|
width: 24px;
|
|
99
159
|
height: 24px;
|
|
@@ -140,6 +200,7 @@ IxStatusCounter.styles = css `
|
|
|
140
200
|
.content {
|
|
141
201
|
flex-direction: row;
|
|
142
202
|
padding: 0.5rem 1.5rem;
|
|
203
|
+
width: auto;
|
|
143
204
|
}
|
|
144
205
|
.content.last-item {
|
|
145
206
|
border-bottom: none;
|
|
@@ -168,6 +229,9 @@ __decorate([
|
|
|
168
229
|
__decorate([
|
|
169
230
|
property({ type: String })
|
|
170
231
|
], IxStatusCounter.prototype, "target", void 0);
|
|
232
|
+
__decorate([
|
|
233
|
+
property({ type: Boolean })
|
|
234
|
+
], IxStatusCounter.prototype, "error", void 0);
|
|
171
235
|
IxStatusCounter = __decorate([
|
|
172
236
|
customElement('ix-status-counter')
|
|
173
237
|
], IxStatusCounter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { laptop, loader } from './assets/iconset.js';\n\nexport const ERROR_DISPLAY_VALUE = '--';\nexport const ERROR_DISPLAY_TEXT = 'Unable to retrieve data';\n\n@customElement('ix-status-counter')\nexport class IxStatusCounter extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-background: rgb(200, 223, 250);\n --ix-widget-padding: 36.5px 20px 36.5px 24px;\n --ix-icon-font-size: 5rem;\n --ix-icon-line-height: 1;\n cursor: pointer;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: 1.2;\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n }\n h2.error {\n font-size: 2.25rem;\n font-family: var(--text-page-title-font, sans-serif);\n }\n h3 {\n margin: 0px;\n font-family: var(--text-page-title-font, sans-serif);\n font-size: var(--text-page-title-size, 2.125rem);\n letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n line-height: 1.2;\n font-weight: var(--text-page-title-weight, bold);\n text-decoration: var(--text-page-title-decoration, none);\n text-transform: var(--text-page-title-transform, none);\n }\n .content {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n width: 100%;\n }\n ix-icon {\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n display: flex;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n width: 60px;\n height: 60px;\n font-size: 36px;\n }\n .api-error {\n position: relative;\n }\n .api-error ix-icon {\n width: 24px;\n height: 24px;\n --ix-icon-font-size: 24px;\n margin-left: -4px;\n background-color: transparent;\n color: var(--cp-critical-40, #db0028);\n }\n .api-error span {\n background-color: var(--clr-on-surface);\n border-radius: 3px;\n color: white;\n font-size: 12px;\n line-height: 26px;\n padding: 0 8px;\n position: absolute;\n top: -1px;\n left: 30px;\n white-space: nowrap;\n display: none;\n }\n .api-error ix-icon:hover + span,\n .api-error ix-icon:focus + span {\n display: block;\n }\n .api-error + h3 {\n margin-bottom: -4px;\n }\n .loader {\n width: 24px;\n height: 24px;\n }\n .info svg {\n stroke: var(--clr-primary, #1456e0);\n width: 24px;\n height: 24px;\n animation-name: loading;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n svg {\n width: 24px;\n margin: auto;\n }\n\n @media (min-width: 1200px) {\n svg {\n width: 36px;\n margin: auto;\n }\n .info svg {\n width: 36px;\n height: 36px;\n }\n }\n\n @media (max-width: 600px) {\n .info {\n flex-direction: row;\n justify-content: start;\n }\n .content {\n flex-direction: row;\n padding: 0.5rem 1.5rem;\n width: auto;\n }\n .content.last-item {\n border-bottom: none;\n }\n .content h2 {\n font-size: 16px;\n }\n .content h3 {\n font-size: 20px;\n }\n ix-icon {\n width: 42px;\n height: 42px;\n }\n }\n `;\n\n @property({ type: String }) value: number | string | undefined = undefined;\n\n @property({ type: String }) header = 'status';\n\n @property({ type: Object }) icon = laptop;\n\n @property({ type: String }) target = '/';\n\n @property({ type: Boolean }) error = false;\n\n navigate = () => {\n this.dispatchEvent(\n new CustomEvent('route', {\n detail: { route: this.target },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n protected override render() {\n return html`<ix-widget\n @click=${this.navigate}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.navigate();\n }\n }}\n type=\"status-counter\"\n >\n <div class=\"content\">\n <div class=\"info\">\n ${this.error\n ? html`<div class=\"api-error\">\n <ix-icon\n tabindex=\"0\"\n aria-label=\"Error\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n >Error</ix-icon\n >\n <span role=\"tooltip\" aria-live=\"polite\"\n >${ERROR_DISPLAY_TEXT}</span\n >\n </div>`\n : nothing}\n ${!this.error && ['string', 'number'].includes(typeof this.value)\n ? html`<h3 aria-label=\"${this.header} status\" role=\"status\">\n ${typeof this.value === 'number'\n ? this.value.toLocaleString()\n : this.value}\n </h3>`\n : nothing}\n ${this.value === undefined\n ? html`<span class=\"loader\">${loader}</span>`\n : nothing}\n ${this.error\n ? html`<h2 class=\"error\" role=\"status\">${ERROR_DISPLAY_VALUE}</h2>`\n : nothing}\n <h2 class=\"heading\">${this.header}</h2>\n </div>\n <ix-icon>${this.icon}</ix-icon>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-widget.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}@media (min-width:600px){[type=status-counter].card{--ix-widget-padding:
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}@media (min-width:600px){[type=status-counter].card{--ix-widget-padding:0 20px 0 24px;min-height:134px;display:flex}[type=status-counter-group].card{padding:0}}@media (max-width:600px){[type=status-counter-group].card{background:#c8dffa;padding-left:0;padding-right:0}[type=status-counter].card{--ix-widget-padding:0;background:0 0;border-radius:0}}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-widget following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.2.
|
|
6
|
+
"version": "2.2.15",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -130,5 +130,5 @@
|
|
|
130
130
|
"README.md",
|
|
131
131
|
"LICENSE"
|
|
132
132
|
],
|
|
133
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "61e1c3158ba5fd34fd2c1b77dec3b3fbef4dc4af"
|
|
134
134
|
}
|