@digital-realty/ix-widget 1.0.24 → 2.0.1
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/ix-contacts.d.ts +1 -0
- package/dist/ix-contacts.js +18 -2
- package/dist/ix-contacts.js.map +1 -1
- package/dist/ix-launchpad.d.ts +7 -191
- package/dist/ix-launchpad.js +91 -24
- package/dist/ix-launchpad.js.map +1 -1
- package/dist/styles/launchpad-styles.js +17 -1
- package/dist/styles/launchpad-styles.js.map +1 -1
- package/package.json +2 -2
package/dist/ix-contacts.d.ts
CHANGED
package/dist/ix-contacts.js
CHANGED
|
@@ -6,12 +6,21 @@ 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, email } from './assets/iconset.js';
|
|
9
|
+
import { phone, email, question } from './assets/iconset.js';
|
|
10
10
|
let IxContacts = class IxContacts extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.contacts = {};
|
|
14
14
|
}
|
|
15
|
+
_openForm(e) {
|
|
16
|
+
e.preventDefault();
|
|
17
|
+
this.dispatchEvent(new CustomEvent('contact-us', {
|
|
18
|
+
detail: { type: 'contact-us' },
|
|
19
|
+
bubbles: true,
|
|
20
|
+
composed: true,
|
|
21
|
+
}));
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
15
24
|
render() {
|
|
16
25
|
const md = markdownit();
|
|
17
26
|
const result = md.render(this.contacts.phoneNumbers || '');
|
|
@@ -27,11 +36,18 @@ let IxContacts = class IxContacts extends LitElement {
|
|
|
27
36
|
${unsafeHTML(result)}
|
|
28
37
|
</div>
|
|
29
38
|
<div class="column">
|
|
39
|
+
<div class="header">
|
|
40
|
+
${question}
|
|
41
|
+
<h3>Contact Us</h3>
|
|
42
|
+
</div>
|
|
43
|
+
<p>
|
|
44
|
+
Please fill out <a href="#" @click=${this._openForm}>this form</a>
|
|
45
|
+
</p>
|
|
30
46
|
<div class="header">
|
|
31
47
|
${email}
|
|
32
48
|
<h3>Email</h3>
|
|
33
49
|
</div>
|
|
34
|
-
<a
|
|
50
|
+
<a href=${`mailto:${this.contacts.email}`}
|
|
35
51
|
>${this.contacts.email}</a
|
|
36
52
|
>
|
|
37
53
|
</div>
|
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,KAAK,EAAE,MAAM,qBAAqB,CAAC;
|
|
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,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAQtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAoFuB,aAAQ,GAAa,EAAE,CAAC;IAgDtD,CAAC;IA9CS,SAAS,CAAC,CAAQ;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;QAC3D,OAAO,IAAI,CAAA;;;;;;gBAMC,KAAK;;;cAGP,UAAU,CAAC,MAAM,CAAC;;;;gBAIhB,QAAQ;;;;mDAI2B,IAAI,CAAC,SAAS;;;gBAGjD,KAAK;;;sBAGC,UAAU,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;iBACpC,IAAI,CAAC,QAAQ,CAAC,KAAK;;;;;iBAKnB,CAAC;IAChB,CAAC;;AAlIM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;CACF,AAjFY,CAiFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AApFzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoItB","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, question } from './assets/iconset.js';\n\ninterface Contacts {\n phoneNumbers?: string;\n email?: string;\n}\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: Object }) contacts: Contacts = {};\n\n private _openForm(e: Event) {\n e.preventDefault();\n this.dispatchEvent(\n new CustomEvent('contact-us', {\n detail: { type: 'contact-us' },\n bubbles: true,\n composed: true,\n })\n );\n return false;\n }\n\n protected override render() {\n const md = markdownit();\n const result = md.render(this.contacts.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 ${question}\n <h3>Contact Us</h3>\n </div>\n <p>\n Please fill out <a href=\"#\" @click=${this._openForm}>this form</a>\n </p>\n <div class=\"header\">\n ${email}\n <h3>Email</h3>\n </div>\n <a href=${`mailto:${this.contacts.email}`}\n >${this.contacts.email}</a\n >\n </div>\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-launchpad.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export interface InfoCardItem {
|
|
|
26
26
|
topics: Topic[];
|
|
27
27
|
title: string;
|
|
28
28
|
abstract: string;
|
|
29
|
+
uid: string;
|
|
29
30
|
}
|
|
30
31
|
export interface TableDataItem {
|
|
31
32
|
columns: string[];
|
|
@@ -40,198 +41,13 @@ export declare class IxLaunchpad extends LitElement {
|
|
|
40
41
|
data: {};
|
|
41
42
|
status: never[];
|
|
42
43
|
nav: never[];
|
|
43
|
-
news:
|
|
44
|
-
contacts:
|
|
45
|
-
resources:
|
|
46
|
-
promotions:
|
|
44
|
+
news: InfoCardItem[];
|
|
45
|
+
contacts: any;
|
|
46
|
+
resources: InfoCardItem[];
|
|
47
|
+
promotions: InfoCardItem[];
|
|
48
|
+
kbImgBaseUrl: string;
|
|
49
|
+
kbLinkBaseUrl: string;
|
|
47
50
|
knowledgebase: string;
|
|
48
|
-
_news: ({
|
|
49
|
-
id: number;
|
|
50
|
-
abstract: string;
|
|
51
|
-
behavior: string;
|
|
52
|
-
topics: {
|
|
53
|
-
code: string;
|
|
54
|
-
icon: string;
|
|
55
|
-
id: number;
|
|
56
|
-
name: string;
|
|
57
|
-
}[];
|
|
58
|
-
thumbnail: {
|
|
59
|
-
url: string;
|
|
60
|
-
alternativeText: string;
|
|
61
|
-
};
|
|
62
|
-
video: null;
|
|
63
|
-
category: {
|
|
64
|
-
icon: string;
|
|
65
|
-
image: {
|
|
66
|
-
url: string;
|
|
67
|
-
alternativeText: string;
|
|
68
|
-
};
|
|
69
|
-
showSortBy: boolean;
|
|
70
|
-
showFilterByTopic: boolean;
|
|
71
|
-
subtitle: string;
|
|
72
|
-
title: string;
|
|
73
|
-
uid: string;
|
|
74
|
-
};
|
|
75
|
-
dateAdded: string;
|
|
76
|
-
documents: {
|
|
77
|
-
id: number;
|
|
78
|
-
url: string;
|
|
79
|
-
name: string;
|
|
80
|
-
}[];
|
|
81
|
-
duration: null;
|
|
82
|
-
featured: boolean;
|
|
83
|
-
text: null;
|
|
84
|
-
title: string;
|
|
85
|
-
uid: string;
|
|
86
|
-
} | {
|
|
87
|
-
id: number;
|
|
88
|
-
abstract: null;
|
|
89
|
-
behavior: string;
|
|
90
|
-
topics: {
|
|
91
|
-
code: string;
|
|
92
|
-
icon: string;
|
|
93
|
-
id: number;
|
|
94
|
-
name: string;
|
|
95
|
-
}[];
|
|
96
|
-
thumbnail: {
|
|
97
|
-
url: string;
|
|
98
|
-
alternativeText: string;
|
|
99
|
-
};
|
|
100
|
-
video: null;
|
|
101
|
-
category: {
|
|
102
|
-
icon: string;
|
|
103
|
-
image: {
|
|
104
|
-
url: string;
|
|
105
|
-
alternativeText: string;
|
|
106
|
-
};
|
|
107
|
-
showSortBy: boolean;
|
|
108
|
-
showFilterByTopic: boolean;
|
|
109
|
-
subtitle: string;
|
|
110
|
-
title: string;
|
|
111
|
-
uid: string;
|
|
112
|
-
};
|
|
113
|
-
dateAdded: string;
|
|
114
|
-
documents: {
|
|
115
|
-
id: number;
|
|
116
|
-
url: string;
|
|
117
|
-
name: string;
|
|
118
|
-
}[];
|
|
119
|
-
duration: null;
|
|
120
|
-
featured: boolean;
|
|
121
|
-
text: null;
|
|
122
|
-
title: string;
|
|
123
|
-
uid: string;
|
|
124
|
-
})[];
|
|
125
|
-
_contacts: {
|
|
126
|
-
phoneNumbers: string;
|
|
127
|
-
email: string;
|
|
128
|
-
};
|
|
129
|
-
_resources: {
|
|
130
|
-
id: number;
|
|
131
|
-
abstract: null;
|
|
132
|
-
behavior: string;
|
|
133
|
-
topics: {
|
|
134
|
-
code: string;
|
|
135
|
-
icon: string;
|
|
136
|
-
id: number;
|
|
137
|
-
name: string;
|
|
138
|
-
}[];
|
|
139
|
-
thumbnail: {
|
|
140
|
-
url: string;
|
|
141
|
-
alternativeText: string;
|
|
142
|
-
};
|
|
143
|
-
video: {
|
|
144
|
-
url: string;
|
|
145
|
-
};
|
|
146
|
-
category: {
|
|
147
|
-
icon: string;
|
|
148
|
-
image: {
|
|
149
|
-
url: string;
|
|
150
|
-
alternativeText: string;
|
|
151
|
-
};
|
|
152
|
-
showSortBy: boolean;
|
|
153
|
-
showFilterByTopic: boolean;
|
|
154
|
-
subtitle: string;
|
|
155
|
-
title: string;
|
|
156
|
-
uid: string;
|
|
157
|
-
};
|
|
158
|
-
dateAdded: string;
|
|
159
|
-
documents: null;
|
|
160
|
-
duration: null;
|
|
161
|
-
featured: boolean;
|
|
162
|
-
text: string;
|
|
163
|
-
title: string;
|
|
164
|
-
uid: string;
|
|
165
|
-
}[];
|
|
166
|
-
_promotions: ({
|
|
167
|
-
id: number;
|
|
168
|
-
abstract: string;
|
|
169
|
-
behavior: string;
|
|
170
|
-
topics: {
|
|
171
|
-
code: string;
|
|
172
|
-
icon: string;
|
|
173
|
-
id: number;
|
|
174
|
-
name: string;
|
|
175
|
-
}[];
|
|
176
|
-
thumbnail: {
|
|
177
|
-
url: string;
|
|
178
|
-
alternativeText: string;
|
|
179
|
-
};
|
|
180
|
-
video: null;
|
|
181
|
-
category: {
|
|
182
|
-
icon: string;
|
|
183
|
-
image: {
|
|
184
|
-
url: string;
|
|
185
|
-
alternativeText: string;
|
|
186
|
-
};
|
|
187
|
-
showSortBy: boolean;
|
|
188
|
-
showFilterByTopic: boolean;
|
|
189
|
-
subtitle: string;
|
|
190
|
-
title: string;
|
|
191
|
-
uid: string;
|
|
192
|
-
};
|
|
193
|
-
dateAdded: null;
|
|
194
|
-
documents: null;
|
|
195
|
-
duration: null;
|
|
196
|
-
featured: boolean;
|
|
197
|
-
text: string;
|
|
198
|
-
title: string;
|
|
199
|
-
uid: string;
|
|
200
|
-
} | {
|
|
201
|
-
id: number;
|
|
202
|
-
abstract: null;
|
|
203
|
-
behavior: string;
|
|
204
|
-
topics: {
|
|
205
|
-
code: string;
|
|
206
|
-
icon: string;
|
|
207
|
-
id: number;
|
|
208
|
-
name: string;
|
|
209
|
-
}[];
|
|
210
|
-
thumbnail: {
|
|
211
|
-
url: string;
|
|
212
|
-
alternativeText: string;
|
|
213
|
-
};
|
|
214
|
-
video: null;
|
|
215
|
-
category: {
|
|
216
|
-
icon: string;
|
|
217
|
-
image: {
|
|
218
|
-
url: string;
|
|
219
|
-
alternativeText: string;
|
|
220
|
-
};
|
|
221
|
-
showSortBy: boolean;
|
|
222
|
-
showFilterByTopic: boolean;
|
|
223
|
-
subtitle: string;
|
|
224
|
-
title: string;
|
|
225
|
-
uid: string;
|
|
226
|
-
};
|
|
227
|
-
dateAdded: string;
|
|
228
|
-
documents: null;
|
|
229
|
-
duration: null;
|
|
230
|
-
featured: boolean;
|
|
231
|
-
text: string;
|
|
232
|
-
title: string;
|
|
233
|
-
uid: string;
|
|
234
|
-
})[];
|
|
235
51
|
updates: TableDataItem;
|
|
236
52
|
actions: TableDataItem;
|
|
237
53
|
renderNavigation: () => import("lit").TemplateResult<1>;
|
package/dist/ix-launchpad.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement, nothing } from 'lit';
|
|
3
|
-
import { customElement, property
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import './ix-status-counter-group.js';
|
|
5
5
|
import './ix-contacts.js';
|
|
6
6
|
import './ix-info-card.js';
|
|
@@ -9,7 +9,6 @@ import './ix-table-data.js';
|
|
|
9
9
|
import './ix-nav-item.js';
|
|
10
10
|
import './ix-nav-list.js';
|
|
11
11
|
import { IxLaunchpadStyles } from './styles/launchpad-styles.js';
|
|
12
|
-
import { contacts, news, promotions, resources, } from './assets/gapi-default-data.js';
|
|
13
12
|
let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
14
13
|
constructor() {
|
|
15
14
|
super(...arguments);
|
|
@@ -20,11 +19,9 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
20
19
|
this.contacts = {};
|
|
21
20
|
this.resources = [];
|
|
22
21
|
this.promotions = [];
|
|
23
|
-
this.
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this._resources = resources;
|
|
27
|
-
this._promotions = promotions;
|
|
22
|
+
this.kbImgBaseUrl = '';
|
|
23
|
+
this.kbLinkBaseUrl = '';
|
|
24
|
+
this.knowledgebase = '';
|
|
28
25
|
this.updates = {
|
|
29
26
|
columns: [],
|
|
30
27
|
rows: [],
|
|
@@ -51,6 +48,8 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
51
48
|
.header=${this.updates.header}
|
|
52
49
|
.href=${this.updates.href}
|
|
53
50
|
?disabled=${this.updates.disabled}
|
|
51
|
+
emptyDescription="No Recent Service Ticket Updates"
|
|
52
|
+
showViewAllButtonOnEmpty
|
|
54
53
|
>
|
|
55
54
|
</ix-table-data>`;
|
|
56
55
|
this.renderActionsRequiredGrid = () => html `<ix-table-data
|
|
@@ -59,10 +58,12 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
59
58
|
.header=${this.actions.header}
|
|
60
59
|
.href=${this.actions.href}
|
|
61
60
|
?disabled=${this.actions.disabled}
|
|
61
|
+
emptyDescription="No Pending Actions"
|
|
62
62
|
>
|
|
63
63
|
</ix-table-data>`;
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
+
var _a, _b, _c;
|
|
66
67
|
return html `
|
|
67
68
|
<main class="wrapper">
|
|
68
69
|
<section>
|
|
@@ -81,11 +82,83 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
81
82
|
|
|
82
83
|
<nav>${this.renderNavigation()}</nav>
|
|
83
84
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
${this.knowledgebase !== ''
|
|
86
|
+
? html ` <iframe
|
|
87
|
+
class="knowledge-base"
|
|
88
|
+
title="knowledge base"
|
|
89
|
+
.src=${this.knowledgebase}
|
|
90
|
+
></iframe>`
|
|
91
|
+
: nothing}
|
|
92
|
+
${((_a = this.news) === null || _a === void 0 ? void 0 : _a.length)
|
|
93
|
+
? html `<ix-news-feed
|
|
94
|
+
header="What's New"
|
|
95
|
+
.data=${this.news}
|
|
96
|
+
href="/news"
|
|
97
|
+
></ix-news-feed>`
|
|
98
|
+
: nothing}
|
|
99
|
+
${((_b = this.resources) === null || _b === void 0 ? void 0 : _b.length)
|
|
100
|
+
? html `<div class="news-info">
|
|
101
|
+
<h2>Resources</h2>
|
|
102
|
+
<div class="resources">
|
|
103
|
+
${this.resources.map(item => {
|
|
104
|
+
var _a;
|
|
105
|
+
return html ` <a
|
|
106
|
+
href=${`${this.kbLinkBaseUrl}${item.uid}`}
|
|
107
|
+
><ix-info-card type="info-card-resources"
|
|
108
|
+
><img
|
|
109
|
+
slot="image"
|
|
110
|
+
name="image"
|
|
111
|
+
alt=${((_a = item === null || item === void 0 ? void 0 : item.thumbnail) === null || _a === void 0 ? void 0 : _a.alternativeText) || ''}
|
|
112
|
+
src="${`${this.kbImgBaseUrl}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
113
|
+
/>
|
|
114
|
+
|
|
115
|
+
<div slot="title">${item.title}</div>
|
|
116
|
+
<ix-button
|
|
117
|
+
slot="cta"
|
|
118
|
+
type="button"
|
|
119
|
+
has-icon
|
|
120
|
+
trailing-icon
|
|
121
|
+
appearance="text"
|
|
122
|
+
>
|
|
123
|
+
<ix-icon slot="icon">chevron_right</ix-icon>
|
|
124
|
+
Learn more
|
|
125
|
+
</ix-button>
|
|
126
|
+
</ix-info-card></a
|
|
127
|
+
>`;
|
|
128
|
+
})}
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<h2 class="">News & Promotions</h2>
|
|
132
|
+
<div class="newsAndPromotions">
|
|
133
|
+
${this.promotions.map(item => html ` <a
|
|
134
|
+
href=${`${this.kbLinkBaseUrl}${item.uid}`}
|
|
135
|
+
><ix-info-card type="info-card">
|
|
136
|
+
<img
|
|
137
|
+
slot="image"
|
|
138
|
+
name="image"
|
|
139
|
+
alt="${item.thumbnail.alternativeText}"
|
|
140
|
+
src="${`${this.kbImgBaseUrl}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
141
|
+
/>
|
|
142
|
+
<div slot="title">${item.title}</div>
|
|
143
|
+
<div slot="description">${item.abstract}</div>
|
|
144
|
+
<ix-button
|
|
145
|
+
slot="cta"
|
|
146
|
+
type="button"
|
|
147
|
+
has-icon
|
|
148
|
+
trailing-icon
|
|
149
|
+
appearance="text"
|
|
150
|
+
>
|
|
151
|
+
<ix-icon slot="icon">chevron_right</ix-icon>
|
|
152
|
+
Learn more
|
|
153
|
+
</ix-button>
|
|
154
|
+
</ix-info-card></a
|
|
155
|
+
>`)}
|
|
156
|
+
</div>
|
|
157
|
+
</div>`
|
|
158
|
+
: nothing}
|
|
159
|
+
${((_c = this.contacts) === null || _c === void 0 ? void 0 : _c.email)
|
|
160
|
+
? html `<ix-contacts .contacts=${this.contacts}></ix-contacts>`
|
|
161
|
+
: nothing}
|
|
89
162
|
</div>
|
|
90
163
|
<nav class="side-nav">${this.renderNavigation()}</nav>
|
|
91
164
|
</div>
|
|
@@ -117,20 +190,14 @@ __decorate([
|
|
|
117
190
|
property({ type: Array })
|
|
118
191
|
], IxLaunchpad.prototype, "promotions", void 0);
|
|
119
192
|
__decorate([
|
|
120
|
-
property({ type: String })
|
|
121
|
-
], IxLaunchpad.prototype, "
|
|
122
|
-
__decorate([
|
|
123
|
-
state()
|
|
124
|
-
], IxLaunchpad.prototype, "_news", void 0);
|
|
193
|
+
property({ type: String, attribute: 'kb-img-base-url' })
|
|
194
|
+
], IxLaunchpad.prototype, "kbImgBaseUrl", void 0);
|
|
125
195
|
__decorate([
|
|
126
|
-
|
|
127
|
-
], IxLaunchpad.prototype, "
|
|
196
|
+
property({ type: String, attribute: 'kb-link-base-url' })
|
|
197
|
+
], IxLaunchpad.prototype, "kbLinkBaseUrl", void 0);
|
|
128
198
|
__decorate([
|
|
129
|
-
|
|
130
|
-
], IxLaunchpad.prototype, "
|
|
131
|
-
__decorate([
|
|
132
|
-
state()
|
|
133
|
-
], IxLaunchpad.prototype, "_promotions", void 0);
|
|
199
|
+
property({ type: String })
|
|
200
|
+
], IxLaunchpad.prototype, "knowledgebase", void 0);
|
|
134
201
|
__decorate([
|
|
135
202
|
property({ type: Object })
|
|
136
203
|
], IxLaunchpad.prototype, "updates", void 0);
|
package/dist/ix-launchpad.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } 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 {\n contacts,\n news,\n promotions,\n resources,\n} from './assets/gapi-default-data.js';\n\nexport interface NavItem {\n icon: string;\n target: string;\n name: string;\n}\n\nexport interface NavList {\n header: string;\n items: NavItem[];\n}\n\nexport interface Topic {\n name: string;\n}\n\nexport interface InfoCardItem {\n thumbnail: {\n alternativeText: string;\n url: string;\n };\n topics: Topic[];\n title: string;\n abstract: string;\n}\n\nexport interface TableDataItem {\n columns: string[];\n rows?: string[];\n header: string;\n href: string;\n disabled?: boolean;\n isAuthorizedToView?: boolean;\n}\n\n@customElement('ix-launchpad')\nexport class IxLaunchpad extends LitElement {\n static styles = [IxLaunchpadStyles];\n\n @property({ type: Object }) data = {};\n\n @property({ type: Array }) status = [];\n\n @property({ type: Array }) nav = [];\n\n @property({ type: Array }) news = [];\n\n @property({ type: Object }) contacts = {};\n\n @property({ type: Array }) resources = [];\n\n @property({ type: Array }) promotions = [];\n\n @property({ type: String }) knowledgebase =\n 'https://gp-dev.digitalrealty.com/standalone/knowledge-base/widgets';\n\n @state() _news = news;\n\n @state() _contacts = contacts;\n\n @state() _resources = resources;\n\n @state() _promotions = promotions;\n\n @property({ type: Object }) updates: TableDataItem = {\n columns: [],\n rows: [],\n header: '',\n href: '',\n };\n\n @property({ type: Object }) actions: TableDataItem = {\n columns: [],\n rows: [],\n header: '',\n href: '',\n disabled: true,\n };\n\n renderNavigation = () => html`\n ${this.nav.map(\n (nav: NavList) => html` <ix-nav-list .header=\"${nav.header}\">\n ${nav.items.map(\n (item: NavItem) =>\n html`<ix-nav-item .icon=${item?.icon} .target=${item?.target}\n >${item.name}</ix-nav-item\n >`\n )}\n </ix-nav-list>`\n )}\n `;\n\n renderTicketUpdatesGrid = () => html`<ix-table-data\n .columns=${this.updates.columns}\n .rows=${this.updates.rows}\n .header=${this.updates.header}\n .href=${this.updates.href}\n ?disabled=${this.updates.disabled}\n >\n </ix-table-data>`;\n\n renderActionsRequiredGrid = () => html`<ix-table-data\n .columns=${this.actions.columns}\n .rows=${this.actions.rows}\n .header=${this.actions.header}\n .href=${this.actions.href}\n ?disabled=${this.actions.disabled}\n >\n </ix-table-data>`;\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.status}\n ></ix-status-counter-group>\n\n ${this.actions.isAuthorizedToView\n ? this.renderActionsRequiredGrid()\n : nothing}\n ${this.updates.isAuthorizedToView\n ? this.renderTicketUpdatesGrid()\n : nothing}\n\n <nav>${this.renderNavigation()}</nav>\n\n <iframe\n class=\"knowledge-base\"\n title=\"knowledge base\"\n .src=${this.knowledgebase}\n ></iframe>\n </div>\n <nav class=\"side-nav\">${this.renderNavigation()}</nav>\n </div>\n </section>\n </main>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,8BAA8B,CAAC;AACtC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAsC1D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAGuB,SAAI,GAAG,EAAE,CAAC;QAEX,WAAM,GAAG,EAAE,CAAC;QAEZ,QAAG,GAAG,EAAE,CAAC;QAET,SAAI,GAAmB,EAAE,CAAC;QAEzB,aAAQ,GAAQ,EAAE,CAAC;QAEpB,cAAS,GAAmB,EAAE,CAAC;QAE/B,eAAU,GAAmB,EAAE,CAAC;QAED,iBAAY,GAAG,EAAE,CAAC;QAEjB,kBAAa,GAAG,EAAE,CAAC;QAElD,kBAAa,GAAG,EAAE,CAAC;QAEnB,YAAO,GAAkB;YACnD,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,EAAE;SACT,CAAC;QAE0B,YAAO,GAAkB;YACnD,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,IAAI;SACf,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;MACzB,IAAI,CAAC,GAAG,CAAC,GAAG,CACZ,CAAC,GAAY,EAAE,EAAE,CAAC,IAAI,CAAA,0BAA0B,GAAG,CAAC,MAAM;UACtD,GAAG,CAAC,KAAK,CAAC,GAAG,CACb,CAAC,IAAa,EAAE,EAAE,CAChB,IAAI,CAAA,sBAAsB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,YAAY,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM;iBACvD,IAAI,CAAC,IAAI;cACZ,CACL;qBACY,CAChB;GACF,CAAC;QAEF,4BAAuB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;eACvB,IAAI,CAAC,OAAO,CAAC,OAAO;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI;cACf,IAAI,CAAC,OAAO,CAAC,MAAM;YACrB,IAAI,CAAC,OAAO,CAAC,IAAI;gBACb,IAAI,CAAC,OAAO,CAAC,QAAQ;;;;mBAIlB,CAAC;QAElB,8BAAyB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;eACzB,IAAI,CAAC,OAAO,CAAC,OAAO;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI;cACf,IAAI,CAAC,OAAO,CAAC,MAAM;YACrB,IAAI,CAAC,OAAO,CAAC,IAAI;gBACb,IAAI,CAAC,OAAO,CAAC,QAAQ;;;mBAGlB,CAAC;IA8GpB,CAAC;IA5GoB,MAAM;;QACvB,OAAO,IAAI,CAAA;;;;;;wBAMS,IAAI,CAAC,MAAM;;;gBAGnB,IAAI,CAAC,OAAO,CAAC,kBAAkB;YAC/B,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE;YAClC,CAAC,CAAC,OAAO;gBACT,IAAI,CAAC,OAAO,CAAC,kBAAkB;YAC/B,CAAC,CAAC,IAAI,CAAC,uBAAuB,EAAE;YAChC,CAAC,CAAC,OAAO;;qBAEJ,IAAI,CAAC,gBAAgB,EAAE;;gBAE5B,IAAI,CAAC,aAAa,KAAK,EAAE;YACzB,CAAC,CAAC,IAAI,CAAA;;;2BAGK,IAAI,CAAC,aAAa;6BAChB;YACb,CAAC,CAAC,OAAO;gBACT,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;4BAEM,IAAI,CAAC,IAAI;;mCAEF;YACnB,CAAC,CAAC,OAAO;gBACT,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM;YACtB,CAAC,CAAC,IAAI,CAAA;;;wBAGE,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE;;gBAAC,OAAA,IAAI,CAAA;iCACH,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE;;;;;oCAK/B,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,0CAAE,eAAe,KAAI,EAAE;qCACrC,GAAG,IAAI,CAAC,YAAY,GAAG,kBAAkB,CAC9C,IAAI,CAAC,SAAS,CAAC,GAAG,CACnB,cAAc;;;gDAGG,IAAI,CAAC,KAAK;;;;;;;;;;;;0BAYhC,CAAA;aAAA,CACH;;;;;wBAKC,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;iCACH,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE;;;;;qCAK9B,IAAI,CAAC,SAAS,CAAC,eAAe;qCAC9B,GAAG,IAAI,CAAC,YAAY,GAAG,kBAAkB,CAC9C,IAAI,CAAC,SAAS,CAAC,GAAG,CACnB,cAAc;;gDAEG,IAAI,CAAC,KAAK;sDACJ,IAAI,CAAC,QAAQ;;;;;;;;;;;;0BAYzC,CACH;;yBAEE;YACT,CAAC,CAAC,OAAO;gBACT,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK;YACpB,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,QAAQ,iBAAiB;YAC9D,CAAC,CAAC,OAAO;;oCAEW,IAAI,CAAC,gBAAgB,EAAE;;;;KAItD,CAAC;IACJ,CAAC;;AAlLM,kBAAM,GAAG,CAAC,iBAAiB,CAAC,AAAtB,CAAuB;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAEX;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAa;AAEZ;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAU;AAET;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAA2B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAEpB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAgC;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAiC;AAED;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAAmB;AAEjB;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;kDAAoB;AAElD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAKzB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAMzB;AApCS,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoLvB","sourcesContent":["import { html, LitElement, nothing } 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';\n\nexport interface NavItem {\n icon: string;\n target: string;\n name: string;\n}\n\nexport interface NavList {\n header: string;\n items: NavItem[];\n}\n\nexport interface Topic {\n name: string;\n}\n\nexport interface InfoCardItem {\n thumbnail: {\n alternativeText: string;\n url: string;\n };\n topics: Topic[];\n title: string;\n abstract: string;\n uid: string;\n}\n\nexport interface TableDataItem {\n columns: string[];\n rows?: string[];\n header: string;\n href: string;\n disabled?: boolean;\n isAuthorizedToView?: boolean;\n}\n\n@customElement('ix-launchpad')\nexport class IxLaunchpad extends LitElement {\n static styles = [IxLaunchpadStyles];\n\n @property({ type: Object }) data = {};\n\n @property({ type: Array }) status = [];\n\n @property({ type: Array }) nav = [];\n\n @property({ type: Array }) news: InfoCardItem[] = [];\n\n @property({ type: Object }) contacts: any = {};\n\n @property({ type: Array }) resources: InfoCardItem[] = [];\n\n @property({ type: Array }) promotions: InfoCardItem[] = [];\n\n @property({ type: String, attribute: 'kb-img-base-url' }) kbImgBaseUrl = '';\n\n @property({ type: String, attribute: 'kb-link-base-url' }) kbLinkBaseUrl = '';\n\n @property({ type: String }) knowledgebase = '';\n\n @property({ type: Object }) updates: TableDataItem = {\n columns: [],\n rows: [],\n header: '',\n href: '',\n };\n\n @property({ type: Object }) actions: TableDataItem = {\n columns: [],\n rows: [],\n header: '',\n href: '',\n disabled: true,\n };\n\n renderNavigation = () => html`\n ${this.nav.map(\n (nav: NavList) => html` <ix-nav-list .header=\"${nav.header}\">\n ${nav.items.map(\n (item: NavItem) =>\n html`<ix-nav-item .icon=${item?.icon} .target=${item?.target}\n >${item.name}</ix-nav-item\n >`\n )}\n </ix-nav-list>`\n )}\n `;\n\n renderTicketUpdatesGrid = () => html`<ix-table-data\n .columns=${this.updates.columns}\n .rows=${this.updates.rows}\n .header=${this.updates.header}\n .href=${this.updates.href}\n ?disabled=${this.updates.disabled}\n emptyDescription=\"No Recent Service Ticket Updates\"\n showViewAllButtonOnEmpty\n >\n </ix-table-data>`;\n\n renderActionsRequiredGrid = () => html`<ix-table-data\n .columns=${this.actions.columns}\n .rows=${this.actions.rows}\n .header=${this.actions.header}\n .href=${this.actions.href}\n ?disabled=${this.actions.disabled}\n emptyDescription=\"No Pending Actions\"\n >\n </ix-table-data>`;\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.status}\n ></ix-status-counter-group>\n\n ${this.actions.isAuthorizedToView\n ? this.renderActionsRequiredGrid()\n : nothing}\n ${this.updates.isAuthorizedToView\n ? this.renderTicketUpdatesGrid()\n : nothing}\n\n <nav>${this.renderNavigation()}</nav>\n\n ${this.knowledgebase !== ''\n ? html` <iframe\n class=\"knowledge-base\"\n title=\"knowledge base\"\n .src=${this.knowledgebase}\n ></iframe>`\n : nothing}\n ${this.news?.length\n ? html`<ix-news-feed\n header=\"What's New\"\n .data=${this.news}\n href=\"/news\"\n ></ix-news-feed>`\n : nothing}\n ${this.resources?.length\n ? html`<div class=\"news-info\">\n <h2>Resources</h2>\n <div class=\"resources\">\n ${this.resources.map(\n item => html` <a\n href=${`${this.kbLinkBaseUrl}${item.uid}`}\n ><ix-info-card type=\"info-card-resources\"\n ><img\n slot=\"image\"\n name=\"image\"\n alt=${item?.thumbnail?.alternativeText || ''}\n src=\"${`${this.kbImgBaseUrl}${encodeURIComponent(\n item.thumbnail.url\n )}&w=3840&q=75`}\"\n />\n\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></a\n >`\n )}\n </div>\n\n <h2 class=\"\">News & Promotions</h2>\n <div class=\"newsAndPromotions\">\n ${this.promotions.map(\n item => html` <a\n href=${`${this.kbLinkBaseUrl}${item.uid}`}\n ><ix-info-card type=\"info-card\">\n <img\n slot=\"image\"\n name=\"image\"\n alt=\"${item.thumbnail.alternativeText}\"\n src=\"${`${this.kbImgBaseUrl}${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></a\n >`\n )}\n </div>\n </div>`\n : nothing}\n ${this.contacts?.email\n ? html`<ix-contacts .contacts=${this.contacts}></ix-contacts>`\n : nothing}\n </div>\n <nav class=\"side-nav\">${this.renderNavigation()}</nav>\n </div>\n </section>\n </main>\n `;\n }\n}\n"]}
|
|
@@ -86,13 +86,29 @@ export const IxLaunchpadStyles = css `
|
|
|
86
86
|
|
|
87
87
|
.resources {
|
|
88
88
|
margin-bottom: 44px;
|
|
89
|
+
cursor: pointer;
|
|
89
90
|
}
|
|
90
|
-
|
|
91
|
+
|
|
92
|
+
.resources ix-button {
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.news-info .newsAndPromotions,
|
|
97
|
+
.news-info .resources {
|
|
91
98
|
display: flex;
|
|
92
99
|
gap: 44px;
|
|
93
100
|
flex-wrap: wrap;
|
|
94
101
|
}
|
|
95
102
|
|
|
103
|
+
.news-info a {
|
|
104
|
+
text-decoration: none;
|
|
105
|
+
color: inherit;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
ix-info-card {
|
|
109
|
+
width: 348px;
|
|
110
|
+
}
|
|
111
|
+
|
|
96
112
|
@media (max-width: 1199px) {
|
|
97
113
|
ix-table-data,
|
|
98
114
|
ix-action-list,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"launchpad-styles.js","sourceRoot":"","sources":["../../src/styles/launchpad-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"launchpad-styles.js","sourceRoot":"","sources":["../../src/styles/launchpad-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmNnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxLaunchpadStyles = css`\n .wrapper {\n margin-left: 0px;\n transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;\n display: flex;\n flex-direction: column;\n }\n header {\n min-height: 60px;\n background-color: rgba(245, 247, 255, 0.85);\n backdrop-filter: blur(6px);\n display: flex;\n flex-flow: column-reverse wrap;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n gap: 20px;\n padding: 16px 24px 16px 7px;\n position: sticky;\n top: 0px;\n right: 0px;\n z-index: 1000;\n }\n header > div {\n margin-right: auto;\n display: flex;\n -webkit-box-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n align-items: center;\n }\n header > div > h1 {\n display: block;\n font-size: 2em;\n margin-block-start: 0.67em;\n margin-block-end: 0.67em;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n font-weight: bold;\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 h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 32px;\n letter-spacing: 0em;\n color: rgb(9, 34, 65);\n margin-bottom: 24px;\n }\n .content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n nav {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n section {\n flex: 1 1 0%;\n padding-right: 0px;\n padding-left: 0px;\n padding-bottom: 64px;\n }\n .container {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-left: 16px;\n padding-right: 16px;\n gap: 32px;\n }\n\n .resources {\n margin-bottom: 44px;\n cursor: pointer;\n }\n\n .resources ix-button {\n pointer-events: none;\n }\n\n .news-info .newsAndPromotions,\n .news-info .resources {\n display: flex;\n gap: 44px;\n flex-wrap: wrap;\n }\n\n .news-info a {\n text-decoration: none;\n color: inherit;\n }\n\n ix-info-card {\n width: 348px;\n }\n\n @media (max-width: 1199px) {\n ix-table-data,\n ix-action-list,\n .news-info {\n display: none;\n }\n }\n\n @media (min-width: 800px) and (max-width: 1349px) {\n nav {\n display: flex;\n align-items: flex-start;\n gap: 32px;\n }\n nav > * {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n }\n\n @media (min-width: 600px) {\n header {\n min-height: 100px;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n gap: 21px;\n }\n .container {\n padding: 0px;\n }\n }\n @media (min-width: 900px) {\n .content {\n gap: 32px;\n }\n main {\n margin-left: 0px;\n margin-bottom: 0px;\n }\n header {\n padding-top: 12px;\n min-height: 92px;\n padding-bottom: 8px;\n }\n section {\n padding-right: 32px;\n padding-bottom: 48px;\n }\n }\n @media (min-width: 1200px) {\n header {\n min-height: 100px;\n padding-bottom: 16px;\n padding-top: 27px;\n }\n .container {\n /* background-image: url(/images/buildings-placeholder.png); */\n background-repeat: no-repeat;\n background-position: right bottom;\n }\n section {\n padding-right: 0px;\n padding-bottom: 0px;\n }\n .content {\n gap: 44px;\n }\n }\n\n @media (min-width: 1350px) {\n .side-nav {\n position: sticky;\n top: 0;\n }\n .container {\n display: grid;\n grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\n }\n .container > nav {\n overflow: auto;\n max-height: 100vh;\n padding-bottom: 4rem;\n }\n .container .content > nav {\n display: none;\n }\n }\n\n @media (max-width: 1349px) {\n .container > nav {\n display: none;\n }\n }\n\n .knowledge-base {\n border: none;\n height: 1700px;\n margin: -2rem;\n }\n`;\n"]}
|
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": "
|
|
6
|
+
"version": "2.0.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -126,5 +126,5 @@
|
|
|
126
126
|
"README.md",
|
|
127
127
|
"LICENSE"
|
|
128
128
|
],
|
|
129
|
-
"gitHead": "
|
|
129
|
+
"gitHead": "961a9be4d7c02a65ef97391d18423ac252074d03"
|
|
130
130
|
}
|