@digital-realty/ix-widget 2.2.13 → 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-table-data.d.ts +1 -0
- package/dist/ix-table-data.js +5 -0
- package/dist/ix-table-data.js.map +1 -1
- package/dist/ix-widget.min.js +1 -1
- package/package.json +3 -3
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-table-data.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export declare class IxTableData extends LitElement {
|
|
|
21
21
|
emptyDescription: string;
|
|
22
22
|
href: string;
|
|
23
23
|
firstUpdated(): void;
|
|
24
|
+
name: string;
|
|
24
25
|
renderEmptyTable(): import("lit-html").TemplateResult<1>;
|
|
25
26
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
26
27
|
}
|
package/dist/ix-table-data.js
CHANGED
|
@@ -24,6 +24,7 @@ let IxTableData = class IxTableData extends LitElement {
|
|
|
24
24
|
this.header = '';
|
|
25
25
|
this.emptyDescription = '';
|
|
26
26
|
this.href = '';
|
|
27
|
+
this.name = 'table-data';
|
|
27
28
|
}
|
|
28
29
|
firstUpdated() {
|
|
29
30
|
var _a;
|
|
@@ -81,6 +82,7 @@ let IxTableData = class IxTableData extends LitElement {
|
|
|
81
82
|
rowLimit=${this.rowLimit}
|
|
82
83
|
?hide-filters=${true}
|
|
83
84
|
add-params-to-url="false"
|
|
85
|
+
session-storage-key=${this.name}
|
|
84
86
|
show-view-more
|
|
85
87
|
recordCount=${this.totalCount}
|
|
86
88
|
?isLoading=${this.isLoading}
|
|
@@ -331,6 +333,9 @@ __decorate([
|
|
|
331
333
|
__decorate([
|
|
332
334
|
property({ type: String })
|
|
333
335
|
], IxTableData.prototype, "href", void 0);
|
|
336
|
+
__decorate([
|
|
337
|
+
property({ type: String })
|
|
338
|
+
], IxTableData.prototype, "name", void 0);
|
|
334
339
|
IxTableData = __decorate([
|
|
335
340
|
customElement('ix-table-data')
|
|
336
341
|
], IxTableData);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-grid/ix-grid-nav.js';\nimport '@digital-realty/ix-grid/ix-grid.js';\nimport './ix-widget.js';\nimport { loader } from './assets/iconset.js';\n\n@customElement('ix-table-data')\nexport class IxTableData extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-padding: 0;\n --progress-bar-top: 46px;\n }\n .empty-state {\n padding: 24px;\n }\n .header {\n display: flex;\n flex-direction: column;\n gap: 32px;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n width: 100%;\n width: -webkit-fill-available;\n margin: 8px 6px 16px 8px;\n }\n .header.view-all {\n flex-direction: row;\n margin: 0px -15px 9px 4px;\n align-items: center;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n }\n h3 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: 1rem;\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n text-align: center;\n padding: 1rem;\n }\n .status {\n display: flex;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n padding: 2px 12px;\n width: 185px;\n height: 28px;\n left: 0px;\n top: 0px;\n border-radius: 68px;\n flex: 0 0 auto;\n order: 0;\n -webkit-box-flex: 0;\n color: white;\n -webkit-box-pack: center;\n justify-content: center;\n background: rgb(76, 175, 80);\n }\n ix-grid {\n --_cell-padding: 0;\n }\n .loader {\n width: 24px;\n height: 24px;\n margin: 1rem auto;\n }\n svg {\n stroke: var(--clr-primary, #1456e0);\n width: 48px;\n height: 48px;\n animation-name: loading;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n margin: auto;\n }\n @keyframes loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n ix-widget.empty .header {\n margin: 0;\n }\n ix-widget.empty {\n --ix-widget-padding: 1rem 11px 22px 24px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n #e1e4e8 0px 0px 0px 1px inset;\n }\n ix-widget.empty .content {\n display: flex;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: start;\n justify-content: start;\n margin: 22px 0 16px;\n }\n ix-widget.empty .content.view-all {\n margin-bottom: 8px;\n }\n ix-widget.empty ix-icon.info {\n user-select: none;\n width: 48px;\n height: 44px;\n --ix-icon-font-size: 48px;\n --ix-icon-line-height: 1;\n color: var(--ix-sys-primary, #1456e0);\n }\n ix-widget.empty .description p {\n font-family: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n text-align: center;\n margin-bottom: 24px;\n }\n ix-widget.empty .description p a {\n color: var(--clr-primary, #1456e0);\n }\n `;\n\n @property({ type: Array }) columns: string[] = [];\n\n @property({ type: Boolean }) isLoading: boolean = false;\n\n @property({ type: Array }) rows: string[] | undefined = [];\n\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Boolean }) showViewAllButtonOnEmpty = false;\n\n @property({ type: Boolean, attribute: 'header-view-all' }) showHeaderViewAll =\n false;\n\n @property({ type: Boolean, attribute: 'footer-view-all' }) showFooterViewAll =\n false;\n\n @property({ type: String, attribute: 'view-all-text' }) viewAllText = '';\n\n @property({ type: Number }) pageSize = 5;\n\n @state() showViewAll = false;\n\n @state() rowLimit: number = 0;\n\n @property({ type: Number, attribute: 'total-count' }) totalCount = 0;\n\n @property({ type: String }) header = '';\n\n @property({ type: String }) emptyDescription = '';\n\n @property({ type: String }) href = '';\n\n firstUpdated() {\n this.rowLimit = this.rows?.length || 0;\n this.showViewAll = !(this.rowLimit > 0 && this.rowLimit < this.totalCount);\n }\n\n renderEmptyTable() {\n return html`<ix-widget\n class=\"empty\"\n type=\"empty-table\"\n data-testid=\"no-data-table\"\n >\n <div class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\">\n <h2>${this.header}</h2>\n <slot name=\"tabs\"></slot>\n </div>\n <div\n class=${`content ${this.showViewAllButtonOnEmpty ? 'view-all' : ''}`}\n >\n <ix-icon class=\"info\" filled>info</ix-icon>\n <div\n class=\"description\"\n data-testid=\"ix-table-empty-desc\"\n role=\"status\"\n >\n <p>${this.emptyDescription}</p>\n </div>\n ${this.showViewAllButtonOnEmpty && this.href\n ? html` <ix-button type=\"button\" href=${this.href}>\n View all\n </ix-button>`\n : nothing}\n </div>\n </ix-widget>`;\n }\n\n protected override render() {\n if (this.disabled) {\n return this.renderEmptyTable();\n }\n if (!this.rows?.length) {\n return html`<ix-widget type=\"news-feed\">\n <div class=\"empty-state\">\n <h2>${this.header}</h2>\n <div class=\"loader\">${loader}</div>\n </div>\n </ix-widget>`;\n }\n return html`<ix-widget>\n <ix-grid\n variantClass=\"launchpad\"\n .columns=${this.columns}\n .rows=${this.rows}\n .pageSize=${this.pageSize}\n rowLimit=${this.rowLimit}\n ?hide-filters=${true}\n add-params-to-url=\"false\"\n show-view-more\n recordCount=${this.totalCount}\n ?isLoading=${this.isLoading}\n simple-pagination\n >\n <div\n slot=\"header\"\n class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\"\n >\n <h2>${this.header}</h2>\n <slot name=\"tabs\"></slot>\n ${this.showHeaderViewAll && this.href\n ? html`\n <ix-button\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n href=${this.href}\n data-testid=\"ix-table-header-view-all\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View all\n </ix-button>\n `\n : nothing}\n </div>\n ${this.showFooterViewAll\n ? html`\n <div slot=\"viewMore\">\n ${this.showViewAll\n ? html`\n <ix-button\n data-testid=\"grid-view-more\"\n name=\"view-all-button\"\n type=\"button\"\n appearance=\"text\"\n href=${this.href}\n has-icon\n trailing-icon\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n <span>${this.viewAllText || 'View all'}</span>\n </ix-button>\n `\n : html`\n <ix-button\n data-testid=\"grid-view-more\"\n name=\"view-more-button\"\n appearance=\"text\"\n @click=${() => {\n this.showViewAll = true;\n this.rowLimit = 0;\n this.pageSize = 10;\n this.dispatchEvent(\n new Event('show-view-more', {\n bubbles: true,\n composed: true,\n })\n );\n }}\n >\n <span>View more</span>\n </ix-button>\n `}\n </div>\n `\n : nothing}\n </ix-grid>\n </ix-widget>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-grid/ix-grid-nav.js';\nimport '@digital-realty/ix-grid/ix-grid.js';\nimport './ix-widget.js';\nimport { loader } from './assets/iconset.js';\n\n@customElement('ix-table-data')\nexport class IxTableData extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-padding: 0;\n --progress-bar-top: 46px;\n }\n .empty-state {\n padding: 24px;\n }\n .header {\n display: flex;\n flex-direction: column;\n gap: 32px;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n width: 100%;\n width: -webkit-fill-available;\n margin: 8px 6px 16px 8px;\n }\n .header.view-all {\n flex-direction: row;\n margin: 0px -15px 9px 4px;\n align-items: center;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n }\n h3 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: 1rem;\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n text-align: center;\n padding: 1rem;\n }\n .status {\n display: flex;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n padding: 2px 12px;\n width: 185px;\n height: 28px;\n left: 0px;\n top: 0px;\n border-radius: 68px;\n flex: 0 0 auto;\n order: 0;\n -webkit-box-flex: 0;\n color: white;\n -webkit-box-pack: center;\n justify-content: center;\n background: rgb(76, 175, 80);\n }\n ix-grid {\n --_cell-padding: 0;\n }\n .loader {\n width: 24px;\n height: 24px;\n margin: 1rem auto;\n }\n svg {\n stroke: var(--clr-primary, #1456e0);\n width: 48px;\n height: 48px;\n animation-name: loading;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n margin: auto;\n }\n @keyframes loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n ix-widget.empty .header {\n margin: 0;\n }\n ix-widget.empty {\n --ix-widget-padding: 1rem 11px 22px 24px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n #e1e4e8 0px 0px 0px 1px inset;\n }\n ix-widget.empty .content {\n display: flex;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: start;\n justify-content: start;\n margin: 22px 0 16px;\n }\n ix-widget.empty .content.view-all {\n margin-bottom: 8px;\n }\n ix-widget.empty ix-icon.info {\n user-select: none;\n width: 48px;\n height: 44px;\n --ix-icon-font-size: 48px;\n --ix-icon-line-height: 1;\n color: var(--ix-sys-primary, #1456e0);\n }\n ix-widget.empty .description p {\n font-family: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n text-align: center;\n margin-bottom: 24px;\n }\n ix-widget.empty .description p a {\n color: var(--clr-primary, #1456e0);\n }\n `;\n\n @property({ type: Array }) columns: string[] = [];\n\n @property({ type: Boolean }) isLoading: boolean = false;\n\n @property({ type: Array }) rows: string[] | undefined = [];\n\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Boolean }) showViewAllButtonOnEmpty = false;\n\n @property({ type: Boolean, attribute: 'header-view-all' }) showHeaderViewAll =\n false;\n\n @property({ type: Boolean, attribute: 'footer-view-all' }) showFooterViewAll =\n false;\n\n @property({ type: String, attribute: 'view-all-text' }) viewAllText = '';\n\n @property({ type: Number }) pageSize = 5;\n\n @state() showViewAll = false;\n\n @state() rowLimit: number = 0;\n\n @property({ type: Number, attribute: 'total-count' }) totalCount = 0;\n\n @property({ type: String }) header = '';\n\n @property({ type: String }) emptyDescription = '';\n\n @property({ type: String }) href = '';\n\n firstUpdated() {\n this.rowLimit = this.rows?.length || 0;\n this.showViewAll = !(this.rowLimit > 0 && this.rowLimit < this.totalCount);\n }\n\n @property({ type: String }) name = 'table-data';\n\n renderEmptyTable() {\n return html`<ix-widget\n class=\"empty\"\n type=\"empty-table\"\n data-testid=\"no-data-table\"\n >\n <div class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\">\n <h2>${this.header}</h2>\n <slot name=\"tabs\"></slot>\n </div>\n <div\n class=${`content ${this.showViewAllButtonOnEmpty ? 'view-all' : ''}`}\n >\n <ix-icon class=\"info\" filled>info</ix-icon>\n <div\n class=\"description\"\n data-testid=\"ix-table-empty-desc\"\n role=\"status\"\n >\n <p>${this.emptyDescription}</p>\n </div>\n ${this.showViewAllButtonOnEmpty && this.href\n ? html` <ix-button type=\"button\" href=${this.href}>\n View all\n </ix-button>`\n : nothing}\n </div>\n </ix-widget>`;\n }\n\n protected override render() {\n if (this.disabled) {\n return this.renderEmptyTable();\n }\n if (!this.rows?.length) {\n return html`<ix-widget type=\"news-feed\">\n <div class=\"empty-state\">\n <h2>${this.header}</h2>\n <div class=\"loader\">${loader}</div>\n </div>\n </ix-widget>`;\n }\n return html`<ix-widget>\n <ix-grid\n variantClass=\"launchpad\"\n .columns=${this.columns}\n .rows=${this.rows}\n .pageSize=${this.pageSize}\n rowLimit=${this.rowLimit}\n ?hide-filters=${true}\n add-params-to-url=\"false\"\n session-storage-key=${this.name}\n show-view-more\n recordCount=${this.totalCount}\n ?isLoading=${this.isLoading}\n simple-pagination\n >\n <div\n slot=\"header\"\n class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\"\n >\n <h2>${this.header}</h2>\n <slot name=\"tabs\"></slot>\n ${this.showHeaderViewAll && this.href\n ? html`\n <ix-button\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n href=${this.href}\n data-testid=\"ix-table-header-view-all\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View all\n </ix-button>\n `\n : nothing}\n </div>\n ${this.showFooterViewAll\n ? html`\n <div slot=\"viewMore\">\n ${this.showViewAll\n ? html`\n <ix-button\n data-testid=\"grid-view-more\"\n name=\"view-all-button\"\n type=\"button\"\n appearance=\"text\"\n href=${this.href}\n has-icon\n trailing-icon\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n <span>${this.viewAllText || 'View all'}</span>\n </ix-button>\n `\n : html`\n <ix-button\n data-testid=\"grid-view-more\"\n name=\"view-more-button\"\n appearance=\"text\"\n @click=${() => {\n this.showViewAll = true;\n this.rowLimit = 0;\n this.pageSize = 10;\n this.dispatchEvent(\n new Event('show-view-more', {\n bubbles: true,\n composed: true,\n })\n );\n }}\n >\n <span>View more</span>\n </ix-button>\n `}\n </div>\n `\n : nothing}\n </ix-grid>\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",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@digital-realty/ix-accordion": "^1.1.11",
|
|
42
42
|
"@digital-realty/ix-button": "^3.4.3",
|
|
43
43
|
"@digital-realty/ix-dialog": "^1.2.6",
|
|
44
|
-
"@digital-realty/ix-grid": "^1.3.
|
|
44
|
+
"@digital-realty/ix-grid": "^1.3.11",
|
|
45
45
|
"@digital-realty/ix-icon": "^1.2.2",
|
|
46
46
|
"@digital-realty/ix-list": "^1.2.2",
|
|
47
47
|
"@lit/react": "^1.0.2",
|
|
@@ -130,5 +130,5 @@
|
|
|
130
130
|
"README.md",
|
|
131
131
|
"LICENSE"
|
|
132
132
|
],
|
|
133
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "61e1c3158ba5fd34fd2c1b77dec3b3fbef4dc4af"
|
|
134
134
|
}
|