@digital-realty/ix-widget 1.0.2 → 1.0.4
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 +4 -0
- package/dist/IxWidget.js.map +1 -1
- package/dist/api/api.d.ts +1 -0
- package/dist/api/api.js +19 -0
- package/dist/api/api.js.map +1 -0
- package/dist/api/launchpad-config.d.ts +6 -0
- package/dist/api/launchpad-config.js +7 -0
- package/dist/api/launchpad-config.js.map +1 -0
- package/dist/assets/data.d.ts +1 -1
- package/dist/assets/data.js +6 -11
- package/dist/assets/data.js.map +1 -1
- package/dist/ix-action-list.js +0 -2
- package/dist/ix-action-list.js.map +1 -1
- package/dist/ix-contacts.js +6 -11
- package/dist/ix-contacts.js.map +1 -1
- package/dist/ix-launchpad.d.ts +0 -1
- package/dist/ix-launchpad.js +47 -53
- package/dist/ix-launchpad.js.map +1 -1
- package/dist/ix-news-feed.js +1 -1
- package/dist/ix-news-feed.js.map +1 -1
- package/dist/ix-status-counter-group.js +60 -7
- package/dist/ix-status-counter-group.js.map +1 -1
- package/dist/ix-status-counter.d.ts +3 -1
- package/dist/ix-status-counter.js +20 -13
- package/dist/ix-status-counter.js.map +1 -1
- package/dist/ix-table-data.js +2 -3
- package/dist/ix-table-data.js.map +1 -1
- package/dist/ix-widget.min.js +1 -1
- package/dist/styles/launchpad-styles.js +1 -6
- package/dist/styles/launchpad-styles.js.map +1 -1
- package/package.json +3 -3
package/dist/ix-action-list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-action-list.js","sourceRoot":"","sources":["../src/ix-action-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"ix-action-list.js","sourceRoot":"","sources":["../src/ix-action-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IA6DvB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BE,CAAC;IAChB,CAAC;;AA7FM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DX;AA3DS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+FxB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\n\n@customElement('ix-action-list')\nexport class IxActionList extends LitElement {\n static styles = css`\n .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: 24px;\n }\n svg {\n user-select: none;\n width: 48px;\n height: 48px;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: inherit;\n margin-left: 5px;\n margin-top: 2px;\n color: rgb(20, 86, 224);\n }\n ix-button {\n display: inline-block;\n }\n .header {\n height: 56px;\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n }\n h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .description {\n margin: 0 0 8px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 24px;\n }\n `;\n\n protected override render() {\n return html`<ix-widget type=\"action-list\">\n <div class=\"header\">\n <h2>0 Pending Facility Access Requests</h2>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n Learn more\n </ix-button>\n </div>\n <div class=\"content\">\n <svg\n class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-sfpjfh\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"InfoIcon\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n ></path>\n </svg>\n <div class=\"description\">\n No Facility Access requests pending approval\n </div>\n <ix-button>View All</ix-button>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-contacts.js
CHANGED
|
@@ -6,7 +6,7 @@ import '@digital-realty/ix-icon/ix-icon.js';
|
|
|
6
6
|
import '@digital-realty/ix-button/ix-button.js';
|
|
7
7
|
import './IxWidget.js';
|
|
8
8
|
import markdownit from 'markdown-it';
|
|
9
|
-
import { phone,
|
|
9
|
+
import { phone, email } from './assets/iconset.js';
|
|
10
10
|
let IxContacts = class IxContacts extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
@@ -21,10 +21,12 @@ let IxContacts = class IxContacts extends LitElement {
|
|
|
21
21
|
<div class="c2">
|
|
22
22
|
<div class="column">
|
|
23
23
|
<div class="header">
|
|
24
|
-
${
|
|
25
|
-
<h3>
|
|
24
|
+
${phone}
|
|
25
|
+
<h3>Phone</h3>
|
|
26
26
|
</div>
|
|
27
|
-
|
|
27
|
+
${unsafeHTML(result)}
|
|
28
|
+
</div>
|
|
29
|
+
<div class="column">
|
|
28
30
|
<div class="header">
|
|
29
31
|
${email}
|
|
30
32
|
<h3>Email</h3>
|
|
@@ -33,13 +35,6 @@ let IxContacts = class IxContacts extends LitElement {
|
|
|
33
35
|
>GlobalPortal@digitalrealty.com</a
|
|
34
36
|
>
|
|
35
37
|
</div>
|
|
36
|
-
<div>
|
|
37
|
-
<div class="header">
|
|
38
|
-
${phone}
|
|
39
|
-
<h3>Phone</h3>
|
|
40
|
-
</div>
|
|
41
|
-
${unsafeHTML(result)}
|
|
42
|
-
</div>
|
|
43
38
|
</div>
|
|
44
39
|
</div>
|
|
45
40
|
</ix-widget>`;
|
package/dist/ix-contacts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-contacts.js","sourceRoot":"","sources":["../src/ix-contacts.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,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ix-contacts.js","sourceRoot":"","sources":["../src/ix-contacts.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,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAoFuB,iBAAY,GAAG,EAAE,CAAC;IA6BhD,CAAC;IA3BoB,MAAM;QACvB,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;;;gBAMC,KAAK;;;cAGP,UAAU,CAAC,MAAM,CAAC;;;;gBAIhB,KAAK;;;;;;;;;iBASJ,CAAC;IAChB,CAAC;;AA/GM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;CACF,AAjFY,CAiFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AApFnC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAiHtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\nimport markdownit from 'markdown-it';\nimport { phone, email } from './assets/iconset.js';\n\n@customElement('ix-contacts')\nexport class IxContacts extends LitElement {\n static styles = [\n css`\n .c2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n }\n .c3 {\n display: grid;\n grid-template-columns: auto auto auto;\n gap: 2rem;\n }\n .customer-support h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n height: 56px;\n }\n .customer-support h3 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .customer-support svg {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.5rem;\n color: rgb(7, 20, 84);\n }\n .customer-support p {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n color: rgb(9, 34, 65);\n }\n .customer-support a {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n color: rgb(20, 86, 224);\n text-decoration: underline rgba(20, 86, 224, 0.4);\n }\n .customer-support .column {\n display: flex;\n flex-direction: column;\n gap: 12px;\n white-space: pre-wrap;\n }\n p {\n white-space: pre-wrap;\n }\n .header {\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n gap: 8px;\n }\n `,\n ];\n\n @property({ type: String }) phoneNumbers = '';\n\n protected override render() {\n const md = markdownit();\n const result = md.render(this.phoneNumbers);\n return html`<ix-widget>\n <div class=\"content customer-support\">\n <h2>Customer Support</h2>\n <div class=\"c2\">\n <div class=\"column\">\n <div class=\"header\">\n ${phone}\n <h3>Phone</h3>\n </div>\n ${unsafeHTML(result)}\n </div>\n <div class=\"column\">\n <div class=\"header\">\n ${email}\n <h3>Email</h3>\n </div>\n <a class=\"\" href=\"mailto:GlobalPortal@digitalrealty.com\"\n >GlobalPortal@digitalrealty.com</a\n >\n </div>\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-launchpad.d.ts
CHANGED
package/dist/ix-launchpad.js
CHANGED
|
@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import './ix-status-counter-group.js';
|
|
5
|
-
import './ix-action-list.js';
|
|
6
5
|
import './ix-contacts.js';
|
|
7
6
|
import './ix-info-card.js';
|
|
8
7
|
import './ix-news-feed.js';
|
|
@@ -13,7 +12,8 @@ import { IxLaunchpadStyles } from './styles/launchpad-styles.js';
|
|
|
13
12
|
import { statusData, pageProps } from './assets/data.js';
|
|
14
13
|
import { columns } from './assets/columns.js';
|
|
15
14
|
import { contacts } from './assets/contacts.js';
|
|
16
|
-
|
|
15
|
+
// import { getStatusData } from './api/api.js';
|
|
16
|
+
import { API_CONFIG } from './api/launchpad-config.js';
|
|
17
17
|
let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
@@ -21,41 +21,36 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
21
21
|
statusData,
|
|
22
22
|
columns,
|
|
23
23
|
contacts,
|
|
24
|
-
nav:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
24
|
+
nav: [
|
|
25
|
+
{
|
|
26
|
+
header: 'Service tickets',
|
|
27
|
+
items: [
|
|
28
|
+
{ name: 'Customer Support', icon: 'cutomerSupport' },
|
|
29
|
+
{ name: 'Facility Access', icon: 'lock' },
|
|
30
|
+
{ name: 'Remote Hands', icon: 'remoteHands' },
|
|
31
|
+
{ name: 'Deliveries & Removals', icon: 'remoteHands' },
|
|
32
|
+
{ name: 'Trouble Tickets', icon: 'remoteHands' },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
header: 'ORDER MANAGEMENT',
|
|
37
|
+
items: [
|
|
38
|
+
{ name: 'Cross Connect', icon: 'addUser' },
|
|
39
|
+
{ name: 'Space & Porwer', icon: 'manageUsers' },
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
header: 'USER MANAGEMENT',
|
|
44
|
+
items: [
|
|
45
|
+
{ name: 'Add user', icon: 'addUser' },
|
|
46
|
+
{ name: 'Manage users', icon: 'manageUsers' },
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
],
|
|
40
50
|
pageProps,
|
|
41
51
|
};
|
|
42
52
|
}
|
|
43
|
-
/* fetchData() {
|
|
44
|
-
fetch('./data.json')
|
|
45
|
-
.then(response => response.json())
|
|
46
|
-
.then(data => {
|
|
47
|
-
setTimeout(() => {
|
|
48
|
-
console.log(data);
|
|
49
|
-
}, 2000);
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
connectedCallback() {
|
|
54
|
-
super.connectedCallback();
|
|
55
|
-
this.fetchData();
|
|
56
|
-
} */
|
|
57
53
|
render() {
|
|
58
|
-
var _a, _b, _c, _d;
|
|
59
54
|
return html `
|
|
60
55
|
<main class="wrapper">
|
|
61
56
|
<section>
|
|
@@ -68,23 +63,23 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
68
63
|
<ix-table-data
|
|
69
64
|
.columns=${this.data.columns}
|
|
70
65
|
.rows=${this.data.contacts}
|
|
71
|
-
header="
|
|
66
|
+
header="Your Action Required"
|
|
72
67
|
>
|
|
73
68
|
</ix-table-data>
|
|
74
69
|
|
|
75
|
-
<ix-
|
|
70
|
+
<ix-table-data
|
|
71
|
+
.columns=${this.data.columns}
|
|
72
|
+
.rows=${this.data.contacts}
|
|
73
|
+
header="Ticket Updates"
|
|
74
|
+
>
|
|
75
|
+
</ix-table-data>
|
|
76
76
|
|
|
77
77
|
<nav>
|
|
78
|
-
<ix-nav-list .header="${
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<ix-nav-list .header="${(_a = this.data.nav2) === null || _a === void 0 ? void 0 : _a.header}">
|
|
84
|
-
${(_b = this.data.nav2) === null || _b === void 0 ? void 0 : _b.items.map((i) => html `<ix-nav-item .icon=${i === null || i === void 0 ? void 0 : i.icon}
|
|
85
|
-
>${i.name}</ix-nav-item
|
|
86
|
-
>`)}
|
|
87
|
-
</ix-nav-list>
|
|
78
|
+
${this.data.nav.map((nav) => html ` <ix-nav-list .header="${nav.header}">
|
|
79
|
+
${nav.items.map((i) => html `<ix-nav-item .icon=${i === null || i === void 0 ? void 0 : i.icon}
|
|
80
|
+
>${i.name}</ix-nav-item
|
|
81
|
+
>`)}
|
|
82
|
+
</ix-nav-list>`)}
|
|
88
83
|
</nav>
|
|
89
84
|
|
|
90
85
|
<ix-news-feed
|
|
@@ -102,7 +97,7 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
102
97
|
slot="image"
|
|
103
98
|
name="image"
|
|
104
99
|
alt="${item.thumbnail.alternativeText}"
|
|
105
|
-
src="${`${
|
|
100
|
+
src="${`${API_CONFIG.IMG_URL}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
106
101
|
/>
|
|
107
102
|
<div slot="label">${(_b = (_a = item.topics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name}</div>
|
|
108
103
|
<div slot="title">${item.title}</div>
|
|
@@ -127,7 +122,7 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
127
122
|
slot="image"
|
|
128
123
|
name="image"
|
|
129
124
|
alt="${item.thumbnail.alternativeText}"
|
|
130
|
-
src="${`${
|
|
125
|
+
src="${`${API_CONFIG.IMG_URL}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
131
126
|
/>
|
|
132
127
|
<div slot="title">${item.title}</div>
|
|
133
128
|
<div slot="description">${item.abstract}</div>
|
|
@@ -151,12 +146,11 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
151
146
|
></ix-contacts>
|
|
152
147
|
</div>
|
|
153
148
|
<nav class="side-nav">
|
|
154
|
-
<ix-nav-list .header="${
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
</ix-nav-list>
|
|
149
|
+
${this.data.nav.map((nav) => html ` <ix-nav-list .header="${nav.header}">
|
|
150
|
+
${nav.items.map((i) => html `<ix-nav-item .icon=${i === null || i === void 0 ? void 0 : i.icon}
|
|
151
|
+
>${i.name}</ix-nav-item
|
|
152
|
+
>`)}
|
|
153
|
+
</ix-nav-list>`)}
|
|
160
154
|
</nav>
|
|
161
155
|
</div>
|
|
162
156
|
</section>
|
package/dist/ix-launchpad.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,8BAA8B,CAAC;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './ix-status-counter-group.js';\nimport './ix-contacts.js';\nimport './ix-info-card.js';\nimport './ix-news-feed.js';\nimport './ix-table-data.js';\nimport './ix-nav-item.js';\nimport './ix-nav-list.js';\nimport { IxLaunchpadStyles } from './styles/launchpad-styles.js';\nimport { statusData, pageProps } from './assets/data.js';\nimport { columns } from './assets/columns.js';\nimport { contacts } from './assets/contacts.js';\n// import { getStatusData } from './api/api.js';\nimport { API_CONFIG } from './api/launchpad-config.js';\n\n@customElement('ix-launchpad')\nexport class IxLaunchpad extends LitElement {\n static styles = [IxLaunchpadStyles];\n\n @property({ type: Object }) data: any = {\n statusData,\n columns,\n contacts,\n nav: [\n {\n header: 'Service tickets',\n items: [\n { name: 'Customer Support', icon: 'cutomerSupport' },\n { name: 'Facility Access', icon: 'lock' },\n { name: 'Remote Hands', icon: 'remoteHands' },\n { name: 'Deliveries & Removals', icon: 'remoteHands' },\n { name: 'Trouble Tickets', icon: 'remoteHands' },\n ],\n },\n {\n header: 'ORDER MANAGEMENT',\n items: [\n { name: 'Cross Connect', icon: 'addUser' },\n { name: 'Space & Porwer', icon: 'manageUsers' },\n ],\n },\n {\n header: 'USER MANAGEMENT',\n items: [\n { name: 'Add user', icon: 'addUser' },\n { name: 'Manage users', icon: 'manageUsers' },\n ],\n },\n ],\n pageProps,\n };\n\n protected override render() {\n return html`\n <main class=\"wrapper\">\n <section>\n <div class=\"container\">\n <div class=\"content\">\n <ix-status-counter-group\n .data=${this.data.statusData}\n ></ix-status-counter-group>\n\n <ix-table-data\n .columns=${this.data.columns}\n .rows=${this.data.contacts}\n header=\"Your Action Required\"\n >\n </ix-table-data>\n\n <ix-table-data\n .columns=${this.data.columns}\n .rows=${this.data.contacts}\n header=\"Ticket Updates\"\n >\n </ix-table-data>\n\n <nav>\n ${this.data.nav.map(\n (nav: any) => html` <ix-nav-list .header=\"${nav.header}\">\n ${nav.items.map(\n (i: any) =>\n html`<ix-nav-item .icon=${i?.icon}\n >${i.name}</ix-nav-item\n >`\n )}\n </ix-nav-list>`\n )}\n </nav>\n\n <ix-news-feed\n header=\"What's New\"\n .data=${this.data.pageProps.pageProps.whatsNews}\n ></ix-news-feed>\n\n <div class=\"news-info\">\n <h2>Resources</h2>\n <div class=\"resources\">\n ${this.data.pageProps.pageProps.resources.map(\n (item: any) => html` <ix-info-card type=\"info-card-2\"\n ><img\n slot=\"image\"\n name=\"image\"\n alt=\"${item.thumbnail.alternativeText}\"\n src=\"${`${API_CONFIG.IMG_URL}${encodeURIComponent(\n item.thumbnail.url\n )}&w=3840&q=75`}\"\n />\n <div slot=\"label\">${item.topics?.[0]?.name}</div>\n <div slot=\"title\">${item.title}</div>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n Learn more\n </ix-button>\n </ix-info-card>`\n )}\n </div>\n\n <h2 class=\"\">News & Promotions</h2>\n <div class=\"newsAndPromotions\">\n ${this.data.pageProps.pageProps.newsAndPromotions.map(\n (item: any) => html` <ix-info-card type=\"info-card\">\n <img\n slot=\"image\"\n name=\"image\"\n alt=\"${item.thumbnail.alternativeText}\"\n src=\"${`${API_CONFIG.IMG_URL}${encodeURIComponent(\n item.thumbnail.url\n )}&w=3840&q=75`}\"\n />\n <div slot=\"title\">${item.title}</div>\n <div slot=\"description\">${item.abstract}</div>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n Learn more\n </ix-button>\n </ix-info-card>`\n )}\n </div>\n </div>\n\n <ix-contacts\n phonenumbers=${this.data.pageProps.pageProps.contactInfo\n .attributes.phoneNumbers}\n ></ix-contacts>\n </div>\n <nav class=\"side-nav\">\n ${this.data.nav.map(\n (nav: any) => html` <ix-nav-list .header=\"${nav.header}\">\n ${nav.items.map(\n (i: any) =>\n html`<ix-nav-item .icon=${i?.icon}\n >${i.name}</ix-nav-item\n >`\n )}\n </ix-nav-list>`\n )}\n </nav>\n </div>\n </section>\n </main>\n `;\n }\n}\n"]}
|
package/dist/ix-news-feed.js
CHANGED
package/dist/ix-news-feed.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-news-feed.js","sourceRoot":"","sources":["../src/ix-news-feed.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,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,kDAAkD;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAwLuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAG,EAAE,CAAC;IA0CvC,CAAC;IAxCoB,MAAM;QACvB,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,MAAM;;;;;;;;;;;;QAYjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACxC,MAAM,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,GAAG,GAAG,EACT,SAAS,GAAG,EAAE,GACf,GAAG,IAAI,CAAC;YACT,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,EAAE;gBACrE,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO,IAAI,CAAA;oBACC,GAAG,aAAa,EAAE;gCACN,MAAM;;iCAEL,KAAK;uCACC,QAAQ;;oCAEX,UAAU;;;;cAIhC,CAAC;QACT,CAAC,CAAC;iBACS,CAAC;IAChB,CAAC;;AAlOM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqLlB,AArLY,CAqLX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAW;AA1L1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAoOtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { formatDistance, parseISO, startOfToday } from 'date-fns';\nimport { ticket } from './assets/iconset.js';\n// import { enUS, es, pt } from \"date-fns/locale\";\n\n@customElement('ix-news-feed')\nexport class IxNewsFeed extends LitElement {\n static styles = css`\n :host {\n --ix-widget-padding: 0;\n }\n .header {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n padding:
|
|
1
|
+
{"version":3,"file":"ix-news-feed.js","sourceRoot":"","sources":["../src/ix-news-feed.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,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,kDAAkD;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAwLuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAG,EAAE,CAAC;IA0CvC,CAAC;IAxCoB,MAAM;QACvB,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,MAAM;;;;;;;;;;;;QAYjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACxC,MAAM,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,GAAG,GAAG,EACT,SAAS,GAAG,EAAE,GACf,GAAG,IAAI,CAAC;YACT,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,EAAE;gBACrE,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO,IAAI,CAAA;oBACC,GAAG,aAAa,EAAE;gCACN,MAAM;;iCAEL,KAAK;uCACC,QAAQ;;oCAEX,UAAU;;;;cAIhC,CAAC;QACT,CAAC,CAAC;iBACS,CAAC;IAChB,CAAC;;AAlOM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqLlB,AArLY,CAqLX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAW;AA1L1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAoOtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { formatDistance, parseISO, startOfToday } from 'date-fns';\nimport { ticket } from './assets/iconset.js';\n// import { enUS, es, pt } from \"date-fns/locale\";\n\n@customElement('ix-news-feed')\nexport class IxNewsFeed extends LitElement {\n static styles = css`\n :host {\n --ix-widget-padding: 0;\n }\n .header {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n padding: 16px 11px 16px 24px;\n }\n h6 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n li {\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n color: inherit;\n display: flex;\n -webkit-box-pack: start;\n justify-content: flex-start;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n text-align: left;\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n padding: 0px;\n }\n li:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n color: inherit;\n display: flex;\n -webkit-box-pack: start;\n justify-content: flex-start;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n text-align: left;\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n padding: 0px;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n }\n a {\n display: grid;\n grid-template-columns: auto 1fr auto;\n padding: 12px 24px 12px 20px;\n -webkit-box-align: center;\n\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n appearance: none;\n text-decoration: none;\n color: inherit;\n -webkit-box-flex: 1;\n flex-grow: 1;\n align-items: center;\n gap: 20px;\n text-align: start;\n }\n aa {\n display: grid;\n grid-template-columns: auto 1fr;\n padding: 8px 20px;\n }\n .icon {\n flex-shrink: 0;\n display: inline-flex;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n min-width: 48px;\n width: 48px;\n height: 48px;\n font-size: 20px;\n border-radius: 8px;\n color: rgb(255, 255, 255);\n background-color: rgb(20, 86, 224);\n }\n svg {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.5rem;\n }\n .details {\n gap: 0;\n min-width: 0px;\n display: flex;\n flex-direction: column;\n }\n .title {\n margin: 0;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .description {\n overflow-wrap: break-word;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n margin: 0;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.25px;\n color: rgb(9, 34, 65);\n }\n .caption {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n color: rgba(9, 34, 65, 0.7);\n }\n .ripple {\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n z-index: 0;\n inset: 0px;\n border-radius: inherit;\n }\n `;\n\n @property({ type: String }) header = 'title';\n\n @property({ type: Array }) data = [];\n\n protected override render() {\n return html`<ix-widget type=\"news-feed\">\n <div class=\"header\">\n <h6>${this.header}</h6>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View All\n </ix-button>\n </div>\n ${this.data.map((item: any, id: number) => {\n const {\n title = 'date',\n abstract = '...',\n uid = '#',\n dateAdded = '',\n } = item;\n const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {\n addSuffix: true,\n });\n return html`<li>\n <a href=${uid} tabindex=${id}>\n <div class=\"icon\">${ticket}</div>\n <div class=\"details\">\n <p class=\"title\">${title}</p>\n <p class=\"description\">${abstract}</p>\n </div>\n <span class=\"caption\">${dateOffset}</span>\n <span class=\"ripple\"></span>\n </a>\n <span class=\"ripple\"></span>\n </li>`;\n })}\n </ix-widget>`;\n }\n}\n"]}
|
|
@@ -39,6 +39,7 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
|
|
|
39
39
|
IxStatusCounterGroup.styles = css `
|
|
40
40
|
.layout {
|
|
41
41
|
display: grid;
|
|
42
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
42
43
|
}
|
|
43
44
|
@media (min-width: 1350px) {
|
|
44
45
|
.layout {
|
|
@@ -53,25 +54,47 @@ IxStatusCounterGroup.styles = css `
|
|
|
53
54
|
grid-column-end: 4;
|
|
54
55
|
}
|
|
55
56
|
.layout .b3 {
|
|
57
|
+
grid-column-start: 1;
|
|
58
|
+
grid-column-end: 2;
|
|
59
|
+
}
|
|
60
|
+
.layout .b4 {
|
|
61
|
+
grid-column-start: 2;
|
|
62
|
+
grid-column-end: 4;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
ix-status-counter {
|
|
66
|
+
--ix-widget-padding: 1rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.layout.x5 {
|
|
70
|
+
grid-gap: 44px 32px;
|
|
71
|
+
}
|
|
72
|
+
.layout.x5 .b1 {
|
|
73
|
+
grid-column-start: 1;
|
|
74
|
+
grid-column-end: 2;
|
|
75
|
+
}
|
|
76
|
+
.layout.x5 .b2 {
|
|
77
|
+
grid-column-start: 2;
|
|
78
|
+
grid-column-end: 4;
|
|
79
|
+
}
|
|
80
|
+
.layout.x5 .b3 {
|
|
56
81
|
grid-column-start: 4;
|
|
57
82
|
grid-column-end: 6;
|
|
58
83
|
}
|
|
59
|
-
.layout .b4 {
|
|
84
|
+
.layout.x5 .b4 {
|
|
60
85
|
grid-column-start: 1;
|
|
61
86
|
grid-column-end: 3;
|
|
62
87
|
}
|
|
63
|
-
.layout .b5 {
|
|
88
|
+
.layout.x5 .b5 {
|
|
64
89
|
grid-column-start: 3;
|
|
65
90
|
grid-column-end: 6;
|
|
66
91
|
}
|
|
67
|
-
ix-status-counter {
|
|
68
|
-
--ix-widget-padding: 1rem;
|
|
69
|
-
}
|
|
70
92
|
}
|
|
71
93
|
|
|
72
94
|
@media (max-width: 1349px) {
|
|
73
95
|
.layout {
|
|
74
96
|
grid-gap: 0 24px;
|
|
97
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
75
98
|
background: linear-gradient(
|
|
76
99
|
90deg,
|
|
77
100
|
rgba(0, 0, 0, 0) calc(50% - 1px),
|
|
@@ -90,16 +113,46 @@ IxStatusCounterGroup.styles = css `
|
|
|
90
113
|
grid-row-start: 2;
|
|
91
114
|
}
|
|
92
115
|
.layout .b3 {
|
|
116
|
+
grid-column-start: 2;
|
|
117
|
+
grid-column-end: 3;
|
|
118
|
+
grid-row-start: 1;
|
|
119
|
+
}
|
|
120
|
+
.layout .b4 {
|
|
121
|
+
grid-column-start: 2;
|
|
122
|
+
grid-column-end: 3;
|
|
123
|
+
grid-row-start: 2;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.layout.x5 {
|
|
127
|
+
grid-gap: 0 24px;
|
|
128
|
+
background: linear-gradient(
|
|
129
|
+
90deg,
|
|
130
|
+
rgba(0, 0, 0, 0) calc(50% - 1px),
|
|
131
|
+
rgba(9, 34, 65, 0.12) calc(50%),
|
|
132
|
+
rgba(0, 0, 0, 0) calc(50% + 1px)
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
.layout.x5 .b1 {
|
|
136
|
+
grid-column-start: 1;
|
|
137
|
+
grid-column-end: 2;
|
|
138
|
+
grid-row-start: 1;
|
|
139
|
+
}
|
|
140
|
+
.layout.x5 .b2 {
|
|
141
|
+
grid-column-start: 1;
|
|
142
|
+
grid-column-end: 2;
|
|
143
|
+
grid-row-start: 2;
|
|
144
|
+
}
|
|
145
|
+
.layout.x5 .b3 {
|
|
93
146
|
grid-column-start: 1;
|
|
94
147
|
grid-column-end: 2;
|
|
95
148
|
grid-row-start: 3;
|
|
96
149
|
}
|
|
97
|
-
.layout .b4 {
|
|
150
|
+
.layout.x5 .b4 {
|
|
98
151
|
grid-column-start: 2;
|
|
99
152
|
grid-column-end: 3;
|
|
100
153
|
grid-row-start: 1;
|
|
101
154
|
}
|
|
102
|
-
.layout .b5 {
|
|
155
|
+
.layout.x5 .b5 {
|
|
103
156
|
grid-column-start: 2;
|
|
104
157
|
grid-column-end: 3;
|
|
105
158
|
grid-row-start: 2;
|
|
@@ -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,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;
|
|
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,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QA6HsB,SAAI,GAAG,EAAE,CAAC;IAqBvC,CAAC;IAnBoB,MAAM;QACvB,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,GAAG,IAAI,CAAC;YAC7C,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;sBACX,KAAK;uBACJ,MAAM;sBACP,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;;iCAEG,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AAhJM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HlB,AA1HY,CA0HX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AA7H1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAkJhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport { laptop, users, mySites, dcim, locations } from './assets/iconset.js';\n\nconst iconMap = {\n laptop,\n users,\n mySites,\n dcim,\n locations,\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(2, minmax(0, 1fr));\n }\n @media (min-width: 1350px) {\n .layout {\n grid-gap: 44px 32px;\n }\n .layout .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout .b2 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n .layout .b3 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout .b4 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n\n ix-status-counter {\n --ix-widget-padding: 1rem;\n }\n\n .layout.x5 {\n grid-gap: 44px 32px;\n }\n .layout.x5 .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout.x5 .b2 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n .layout.x5 .b3 {\n grid-column-start: 4;\n grid-column-end: 6;\n }\n .layout.x5 .b4 {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n .layout.x5 .b5 {\n grid-column-start: 3;\n grid-column-end: 6;\n }\n }\n\n @media (max-width: 1349px) {\n .layout {\n grid-gap: 0 24px;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) calc(50% - 1px),\n rgba(9, 34, 65, 0.12) calc(50%),\n rgba(0, 0, 0, 0) calc(50% + 1px)\n );\n }\n .layout .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n }\n .layout .b2 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n }\n .layout .b3 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n }\n .layout .b4 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n }\n\n .layout.x5 {\n grid-gap: 0 24px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) calc(50% - 1px),\n rgba(9, 34, 65, 0.12) calc(50%),\n rgba(0, 0, 0, 0) calc(50% + 1px)\n );\n }\n .layout.x5 .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n }\n .layout.x5 .b2 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n }\n .layout.x5 .b3 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n }\n .layout.x5 .b4 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n }\n .layout.x5 .b5 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n }\n }\n `;\n\n @property({ type: Array }) data = [];\n\n protected override render() {\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, apiUrl } = item;\n return html`<ix-status-counter\n class=\"b${index + 1}\"\n value=${value}\n header=${header}\n .icon=${iconMap[icon]}\n .apiUrl=${apiUrl}\n >\n </ix-status-counter>`;\n })}\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
|
@@ -3,9 +3,11 @@ import '@digital-realty/ix-icon/ix-icon.js';
|
|
|
3
3
|
import './IxWidget.js';
|
|
4
4
|
export declare class IxStatusCounter extends LitElement {
|
|
5
5
|
static styles: import("lit").CSSResult;
|
|
6
|
-
value: number | undefined;
|
|
6
|
+
value: number | undefined | string;
|
|
7
7
|
header: string;
|
|
8
8
|
icon: import("lit").TemplateResult<2>;
|
|
9
9
|
apiUrl: string | undefined;
|
|
10
|
+
getData(): Promise<void>;
|
|
11
|
+
connectedCallback(): void;
|
|
10
12
|
protected render(): import("lit").TemplateResult<1>;
|
|
11
13
|
}
|
|
@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html, LitElement, css } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import '@digital-realty/ix-icon/ix-icon.js';
|
|
5
|
-
// import { MobxLitElement } from '@adobe/lit-mobx';
|
|
6
5
|
import './IxWidget.js';
|
|
7
6
|
import { laptop, loader } from './assets/iconset.js';
|
|
7
|
+
import { getStatusData } from './api/api.js';
|
|
8
8
|
let IxStatusCounter = class IxStatusCounter extends LitElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
@@ -13,22 +13,29 @@ let IxStatusCounter = class IxStatusCounter extends LitElement {
|
|
|
13
13
|
this.icon = laptop;
|
|
14
14
|
this.apiUrl = undefined;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
async getData() {
|
|
17
|
+
if (this.apiUrl) {
|
|
18
|
+
this.value = await getStatusData(this.apiUrl);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
// eslint-disable-next-line wc/guard-super-call
|
|
23
|
+
super.connectedCallback();
|
|
24
|
+
// console.log(this.apiUrl);
|
|
25
|
+
if (this.apiUrl) {
|
|
26
|
+
this.getData();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
26
29
|
render() {
|
|
27
30
|
return html `<ix-widget type="status-counter">
|
|
28
31
|
<div class="content">
|
|
29
32
|
<div class="info">
|
|
30
33
|
${this.value
|
|
31
|
-
? html `<h3
|
|
34
|
+
? html `<h3>
|
|
35
|
+
${typeof this.value === 'number'
|
|
36
|
+
? this.value.toLocaleString()
|
|
37
|
+
: this.value}
|
|
38
|
+
</h3>`
|
|
32
39
|
: html `<span class="loader">${loader}</span>`}
|
|
33
40
|
<h2>${this.header}</h2>
|
|
34
41
|
</div>
|
|
@@ -169,7 +176,7 @@ IxStatusCounter.styles = css `
|
|
|
169
176
|
}
|
|
170
177
|
`;
|
|
171
178
|
__decorate([
|
|
172
|
-
property({ type:
|
|
179
|
+
property({ type: String })
|
|
173
180
|
], IxStatusCounter.prototype, "value", void 0);
|
|
174
181
|
__decorate([
|
|
175
182
|
property({ type: String })
|
|
@@ -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;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,
|
|
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;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAqIuB,UAAK,GAAgC,SAAS,CAAC;QAE/C,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAuB,SAAS,CAAC;IAkCrE,CAAC;IAhCC,KAAK,CAAC,OAAO;QACX,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEQ,iBAAiB;QACxB,+CAA+C;QAC/C,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4BAA4B;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;kBACA,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC9B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;oBACV;YACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,SAAS;gBACzC,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AA3KM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkIlB,AAlIY,CAkIX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAwC;AA3IxD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6K3B","sourcesContent":["import { html, LitElement, css } 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';\nimport { getStatusData } from './api/api.js';\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 }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n h3 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 40px;\n letter-spacing: 0.35px;\n color: rgb(9, 34, 65);\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 }\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 .loader {\n width: 24px;\n height: 24px;\n }\n .info svg {\n stroke: rgb(20, 86, 224);\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: 1349px) {\n .content {\n display: flex;\n flex-direction: row-reverse;\n -webkit-box-align: center;\n align-items: center;\n justify-content: left;\n }\n ix-icon {\n width: 24px;\n height: 24px;\n }\n\n ix-widget {\n --ix-widget-background: white;\n }\n .info {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n flex-direction: row-reverse;\n }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n padding-left: 8px;\n }\n h3 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgb(9, 34, 65);\n }\n }\n `;\n\n @property({ type: String }) value: number | undefined | string = undefined;\n\n @property({ type: String }) header = 'status';\n\n @property({ type: Object }) icon = laptop;\n\n @property({ type: String }) apiUrl: string | undefined = undefined;\n\n async getData() {\n if (this.apiUrl) {\n this.value = await getStatusData(this.apiUrl);\n }\n }\n\n override connectedCallback() {\n // eslint-disable-next-line wc/guard-super-call\n super.connectedCallback();\n // console.log(this.apiUrl);\n if (this.apiUrl) {\n this.getData();\n }\n }\n\n protected override render() {\n return html`<ix-widget type=\"status-counter\">\n <div class=\"content\">\n <div class=\"info\">\n ${this.value\n ? html`<h3>\n ${typeof this.value === 'number'\n ? this.value.toLocaleString()\n : this.value}\n </h3>`\n : html`<span class=\"loader\">${loader}</span>`}\n <h2>${this.header}</h2>\n </div>\n <ix-icon>${this.icon}</ix-icon>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|