@digital-realty/ix-widget 1.0.6 → 1.0.7
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 +1 -1
- package/dist/IxWidget.js.map +1 -1
- package/dist/ix-contacts.d.ts +6 -1
- package/dist/ix-contacts.js +6 -6
- package/dist/ix-contacts.js.map +1 -1
- package/dist/ix-info-card.js +7 -7
- package/dist/ix-info-card.js.map +1 -1
- package/dist/ix-launchpad.d.ts +40 -1
- package/dist/ix-launchpad.js +75 -67
- package/dist/ix-launchpad.js.map +1 -1
- package/dist/ix-nav-item.d.ts +2 -0
- package/dist/ix-nav-item.js +20 -1
- package/dist/ix-nav-item.js.map +1 -1
- package/dist/ix-news-feed.d.ts +1 -0
- package/dist/ix-news-feed.js +7 -1
- package/dist/ix-news-feed.js.map +1 -1
- package/dist/ix-status-counter-group.js +8 -4
- package/dist/ix-status-counter-group.js.map +1 -1
- package/dist/ix-status-counter.d.ts +2 -3
- package/dist/ix-status-counter.js +19 -17
- package/dist/ix-status-counter.js.map +1 -1
- package/dist/ix-table-data.d.ts +3 -2
- package/dist/ix-table-data.js +14 -3
- package/dist/ix-table-data.js.map +1 -1
- package/dist/ix-widget.min.js +1 -1
- package/package.json +2 -2
- package/dist/api/api.d.ts +0 -1
- package/dist/api/api.js +0 -19
- package/dist/api/api.js.map +0 -1
- package/dist/api/launchpad-config.d.ts +0 -6
- package/dist/api/launchpad-config.js +0 -7
- package/dist/api/launchpad-config.js.map +0 -1
- package/dist/assets/columns.d.ts +0 -6
- package/dist/assets/columns.js +0 -49
- package/dist/assets/columns.js.map +0 -1
- package/dist/assets/contacts.d.ts +0 -17
- package/dist/assets/contacts.js +0 -88
- package/dist/assets/contacts.js.map +0 -1
- package/dist/assets/data.d.ts +0 -2243
- package/dist/assets/data.js +0 -2349
- package/dist/assets/data.js.map +0 -1
package/dist/IxWidget.js
CHANGED
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;;QAyE8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AA9EM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsElB,AAtEY,CAsEX;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 @media (min-width: 1350px) {\n [type='status-counter'].card {\n --ix-widget-padding: 36.5px 20px 36.5px 24px;\n }\n }\n\n [type='status-counter-group'].card {\n --ix-widget-padding: 0;\n --ix-widget-background: transparent;\n }\n\n [type='action-list'].card {\n --ix-widget-padding: 0 11px 16px 24px;\n }\n\n @media (max-width: 1349px) {\n [type='status-counter-group'].card {\n --ix-widget-padding: 1rem;\n --ix-widget-background: white;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,\n rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n }\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-
|
|
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;;QAyE8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AA9EM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsElB,AAtEY,CAsEX;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 @media (min-width: 1350px) {\n [type='status-counter'].card {\n --ix-widget-padding: 36.5px 20px 36.5px 24px;\n }\n }\n\n [type='status-counter-group'].card {\n --ix-widget-padding: 0;\n --ix-widget-background: transparent;\n }\n\n [type='action-list'].card {\n --ix-widget-padding: 0 11px 16px 24px;\n }\n\n @media (max-width: 1349px) {\n [type='status-counter-group'].card {\n --ix-widget-padding: 1rem;\n --ix-widget-background: white;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,\n rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n }\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\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"]}
|
package/dist/ix-contacts.d.ts
CHANGED
|
@@ -2,8 +2,13 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import '@digital-realty/ix-icon/ix-icon.js';
|
|
3
3
|
import '@digital-realty/ix-button/ix-button.js';
|
|
4
4
|
import './IxWidget.js';
|
|
5
|
+
interface Contacts {
|
|
6
|
+
phoneNumbers?: string;
|
|
7
|
+
email?: string;
|
|
8
|
+
}
|
|
5
9
|
export declare class IxContacts extends LitElement {
|
|
6
10
|
static styles: import("lit").CSSResult[];
|
|
7
|
-
|
|
11
|
+
contacts: Contacts;
|
|
8
12
|
protected render(): import("lit").TemplateResult<1>;
|
|
9
13
|
}
|
|
14
|
+
export {};
|
package/dist/ix-contacts.js
CHANGED
|
@@ -10,11 +10,11 @@ import { phone, email } from './assets/iconset.js';
|
|
|
10
10
|
let IxContacts = class IxContacts extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
-
this.
|
|
13
|
+
this.contacts = {};
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
const md = markdownit();
|
|
17
|
-
const result = md.render(this.phoneNumbers);
|
|
17
|
+
const result = md.render(this.contacts.phoneNumbers || '');
|
|
18
18
|
return html `<ix-widget>
|
|
19
19
|
<div class="content customer-support">
|
|
20
20
|
<h2>Customer Support</h2>
|
|
@@ -31,8 +31,8 @@ let IxContacts = class IxContacts extends LitElement {
|
|
|
31
31
|
${email}
|
|
32
32
|
<h3>Email</h3>
|
|
33
33
|
</div>
|
|
34
|
-
<a class="" href
|
|
35
|
-
|
|
34
|
+
<a class="" href=${`mailto:${this.contacts.email}`}
|
|
35
|
+
>${this.contacts.email}</a
|
|
36
36
|
>
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
@@ -123,8 +123,8 @@ IxContacts.styles = [
|
|
|
123
123
|
`,
|
|
124
124
|
];
|
|
125
125
|
__decorate([
|
|
126
|
-
property({ type:
|
|
127
|
-
], IxContacts.prototype, "
|
|
126
|
+
property({ type: Object })
|
|
127
|
+
], IxContacts.prototype, "contacts", void 0);
|
|
128
128
|
IxContacts = __decorate([
|
|
129
129
|
customElement('ix-contacts')
|
|
130
130
|
], IxContacts);
|
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,MAAM,qBAAqB,CAAC;AAQ5C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAoFuB,aAAQ,GAAa,EAAE,CAAC;IA6BtD,CAAC;IA3BoB,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,KAAK;;;+BAGU,UAAU,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;iBAC7C,IAAI,CAAC,QAAQ,CAAC,KAAK;;;;;iBAKnB,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;4CAAyB;AApFzC,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\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 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 ${email}\n <h3>Email</h3>\n </div>\n <a class=\"\" 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-info-card.js
CHANGED
|
@@ -29,10 +29,10 @@ IxInfoCard.styles = [
|
|
|
29
29
|
--ix-widget-padding: 0;
|
|
30
30
|
display: block;
|
|
31
31
|
}
|
|
32
|
-
:host[type='info-card-
|
|
32
|
+
:host[type='info-card-resources'] {
|
|
33
33
|
aspect-ratio: 1 / 1;
|
|
34
34
|
}
|
|
35
|
-
[type='info-card-
|
|
35
|
+
[type='info-card-resources'] ::slotted([slot='image']) {
|
|
36
36
|
position: absolute;
|
|
37
37
|
inset: 0px;
|
|
38
38
|
box-sizing: border-box;
|
|
@@ -48,14 +48,14 @@ IxInfoCard.styles = [
|
|
|
48
48
|
max-height: 100%;
|
|
49
49
|
object-fit: cover;
|
|
50
50
|
}
|
|
51
|
-
[type='info-card-
|
|
51
|
+
[type='info-card-resources'] .overlay {
|
|
52
52
|
position: absolute;
|
|
53
53
|
z-index: 0;
|
|
54
54
|
inset: 0px;
|
|
55
55
|
background: rgba(21, 25, 30, 0.66);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
[type='info-card-
|
|
58
|
+
[type='info-card-resources'] ::slotted([slot='title']) {
|
|
59
59
|
position: relative;
|
|
60
60
|
margin: 0px;
|
|
61
61
|
font-family: 'Red Hat Display', sans-serif;
|
|
@@ -67,14 +67,14 @@ IxInfoCard.styles = [
|
|
|
67
67
|
color: rgb(255, 255, 255);
|
|
68
68
|
z-index: 2;
|
|
69
69
|
}
|
|
70
|
-
[type='info-card-
|
|
70
|
+
[type='info-card-resources'] ::slotted([slot='cta']) {
|
|
71
71
|
position: absolute;
|
|
72
72
|
bottom: 1rem;
|
|
73
73
|
left: 0;
|
|
74
74
|
--md-text-button-label-text-color: white;
|
|
75
75
|
--md-text-button-icon-color: white;
|
|
76
76
|
}
|
|
77
|
-
[type='info-card-
|
|
77
|
+
[type='info-card-resources'] ::slotted([slot='label']) {
|
|
78
78
|
position: relative;
|
|
79
79
|
max-width: 100%;
|
|
80
80
|
font-family: Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -105,7 +105,7 @@ IxInfoCard.styles = [
|
|
|
105
105
|
height: 12px;
|
|
106
106
|
margin-bottom: 5px;
|
|
107
107
|
}
|
|
108
|
-
[type='info-card-
|
|
108
|
+
[type='info-card-resources'] .image {
|
|
109
109
|
display: block;
|
|
110
110
|
position: absolute;
|
|
111
111
|
top: 0;
|
package/dist/ix-info-card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-info-card.js","sourceRoot":"","sources":["../src/ix-info-card.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,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAkIuB,SAAI,GAAG,WAAW,CAAC;QAEnB,QAAG,GAAG,EAAE,CAAC;IAcvC,CAAC;IAZoB,MAAM;QACvB,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI;;;;;;;;;iBAS1B,CAAC;IAChB,CAAC;;AAhJM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6HF;CACF,AA/HY,CA+HX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AApI1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAkJtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } 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-info-card')\nexport class IxInfoCard extends LitElement {\n static styles = [\n css`\n :host {\n --ix-widget-padding: 0;\n display: block;\n }\n :host[type='info-card-
|
|
1
|
+
{"version":3,"file":"ix-info-card.js","sourceRoot":"","sources":["../src/ix-info-card.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,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAkIuB,SAAI,GAAG,WAAW,CAAC;QAEnB,QAAG,GAAG,EAAE,CAAC;IAcvC,CAAC;IAZoB,MAAM;QACvB,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI;;;;;;;;;iBAS1B,CAAC;IAChB,CAAC;;AAhJM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6HF;CACF,AA/HY,CA+HX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AApI1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAkJtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } 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-info-card')\nexport class IxInfoCard extends LitElement {\n static styles = [\n css`\n :host {\n --ix-widget-padding: 0;\n display: block;\n }\n :host[type='info-card-resources'] {\n aspect-ratio: 1 / 1;\n }\n [type='info-card-resources'] ::slotted([slot='image']) {\n position: absolute;\n inset: 0px;\n box-sizing: border-box;\n padding: 0px;\n border: none;\n margin: auto;\n display: block;\n width: 0px;\n height: 0px;\n min-width: 100%;\n max-width: 100%;\n min-height: 100%;\n max-height: 100%;\n object-fit: cover;\n }\n [type='info-card-resources'] .overlay {\n position: absolute;\n z-index: 0;\n inset: 0px;\n background: rgba(21, 25, 30, 0.66);\n }\n\n [type='info-card-resources'] ::slotted([slot='title']) {\n position: relative;\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(255, 255, 255);\n z-index: 2;\n }\n [type='info-card-resources'] ::slotted([slot='cta']) {\n position: absolute;\n bottom: 1rem;\n left: 0;\n --md-text-button-label-text-color: white;\n --md-text-button-icon-color: white;\n }\n [type='info-card-resources'] ::slotted([slot='label']) {\n position: relative;\n max-width: 100%;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n color: rgb(255, 255, 255);\n background-color: rgb(20, 86, 224);\n border-radius: 16px;\n white-space: nowrap;\n transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n cursor: default;\n outline: 0px;\n text-decoration: none;\n border: 0px;\n padding-left: 4px;\n padding-right: 4px;\n vertical-align: middle;\n box-sizing: border-box;\n font-size: 8px;\n font-weight: 700;\n line-height: 11px;\n letter-spacing: 0px;\n text-align: center;\n height: 12px;\n margin-bottom: 5px;\n }\n [type='info-card-resources'] .image {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-position: center;\n background-size: cover;\n }\n [type='info-card'] ::slotted([slot='image']) {\n object-fit: cover;\n width: 100%;\n max-height: 200px;\n overflow: hidden;\n }\n [type='info-card'] ::slotted([slot='title']) {\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(20, 86, 224);\n }\n [type='info-card'] ::slotted([slot='description']) {\n margin: 10px 0 0;\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: inherit;\n }\n [type='info-card'] ::slotted([slot='cta']) {\n position: absolute;\n bottom: 1rem;\n left: 0.5rem;\n }\n .content {\n padding: 16px 24px;\n }\n `,\n ];\n\n @property({ type: String }) type = 'resources';\n\n @property({ type: String }) img = '';\n\n protected override render() {\n return html`<ix-widget type=${this.type}>\n <slot name=\"image\"></slot>\n <div class=\"content\">\n <div class=\"overlay\"></div>\n <slot name=\"label\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n <slot name=\"cta\"></slot>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-launchpad.d.ts
CHANGED
|
@@ -6,8 +6,47 @@ import './ix-news-feed.js';
|
|
|
6
6
|
import './ix-table-data.js';
|
|
7
7
|
import './ix-nav-item.js';
|
|
8
8
|
import './ix-nav-list.js';
|
|
9
|
+
export interface NavItem {
|
|
10
|
+
icon: string;
|
|
11
|
+
target: string;
|
|
12
|
+
name: string;
|
|
13
|
+
}
|
|
14
|
+
export interface NavList {
|
|
15
|
+
header: string;
|
|
16
|
+
items: NavItem[];
|
|
17
|
+
}
|
|
18
|
+
export interface Topic {
|
|
19
|
+
name: string;
|
|
20
|
+
}
|
|
21
|
+
export interface InfoCardItem {
|
|
22
|
+
thumbnail: {
|
|
23
|
+
alternativeText: string;
|
|
24
|
+
url: string;
|
|
25
|
+
};
|
|
26
|
+
topics: Topic[];
|
|
27
|
+
title: string;
|
|
28
|
+
abstract: string;
|
|
29
|
+
}
|
|
30
|
+
export interface TableDataItem {
|
|
31
|
+
columns: string[];
|
|
32
|
+
rows: string[];
|
|
33
|
+
header: string;
|
|
34
|
+
href: string;
|
|
35
|
+
}
|
|
9
36
|
export declare class IxLaunchpad extends LitElement {
|
|
10
37
|
static styles: import("lit").CSSResult[];
|
|
11
|
-
data:
|
|
38
|
+
data: {};
|
|
39
|
+
status: never[];
|
|
40
|
+
nav: never[];
|
|
41
|
+
news: never[];
|
|
42
|
+
contacts: {
|
|
43
|
+
phoneNumbers: string;
|
|
44
|
+
email: string;
|
|
45
|
+
};
|
|
46
|
+
resources: never[];
|
|
47
|
+
promotions: never[];
|
|
48
|
+
updates: TableDataItem;
|
|
49
|
+
actions: TableDataItem;
|
|
50
|
+
renderNavigation: () => import("lit").TemplateResult<1>;
|
|
12
51
|
protected render(): import("lit").TemplateResult<1>;
|
|
13
52
|
}
|
package/dist/ix-launchpad.js
CHANGED
|
@@ -9,46 +9,39 @@ 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
|
-
|
|
13
|
-
import { columns } from './assets/columns.js';
|
|
14
|
-
import { contacts } from './assets/contacts.js';
|
|
15
|
-
// import { getStatusData } from './api/api.js';
|
|
16
|
-
import { API_CONFIG } from './api/launchpad-config.js';
|
|
12
|
+
const IMG_URL = 'https://gp-tst.digitalrealty.com/_next/image?url=https%3A%2F%2Ftst-cms-strapi.digitalrealtytrust.com';
|
|
17
13
|
let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
18
14
|
constructor() {
|
|
19
15
|
super(...arguments);
|
|
20
|
-
this.data = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
],
|
|
50
|
-
pageProps,
|
|
16
|
+
this.data = {};
|
|
17
|
+
this.status = [];
|
|
18
|
+
this.nav = [];
|
|
19
|
+
this.news = [];
|
|
20
|
+
this.contacts = {
|
|
21
|
+
phoneNumbers: '',
|
|
22
|
+
email: '',
|
|
51
23
|
};
|
|
24
|
+
this.resources = [];
|
|
25
|
+
this.promotions = [];
|
|
26
|
+
this.updates = {
|
|
27
|
+
columns: [],
|
|
28
|
+
rows: [],
|
|
29
|
+
header: '',
|
|
30
|
+
href: '',
|
|
31
|
+
};
|
|
32
|
+
this.actions = {
|
|
33
|
+
columns: [],
|
|
34
|
+
rows: [],
|
|
35
|
+
header: '',
|
|
36
|
+
href: '',
|
|
37
|
+
};
|
|
38
|
+
this.renderNavigation = () => html `
|
|
39
|
+
${this.nav.map((nav) => html ` <ix-nav-list .header="${nav.header}">
|
|
40
|
+
${nav.items.map((item) => html `<ix-nav-item .icon=${item === null || item === void 0 ? void 0 : item.icon} .target=${item === null || item === void 0 ? void 0 : item.target}
|
|
41
|
+
>${item.name}</ix-nav-item
|
|
42
|
+
>`)}
|
|
43
|
+
</ix-nav-list>`)}
|
|
44
|
+
`;
|
|
52
45
|
}
|
|
53
46
|
render() {
|
|
54
47
|
return html `
|
|
@@ -57,47 +50,45 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
57
50
|
<div class="container">
|
|
58
51
|
<div class="content">
|
|
59
52
|
<ix-status-counter-group
|
|
60
|
-
.data=${this.
|
|
53
|
+
.data=${this.status}
|
|
61
54
|
></ix-status-counter-group>
|
|
62
55
|
|
|
63
56
|
<ix-table-data
|
|
64
|
-
.columns=${this.
|
|
65
|
-
.rows=${this.
|
|
66
|
-
header
|
|
57
|
+
.columns=${this.actions.columns}
|
|
58
|
+
.rows=${this.actions.rows}
|
|
59
|
+
.header=${this.actions.header}
|
|
60
|
+
.href=${this.actions.href}
|
|
67
61
|
>
|
|
68
62
|
</ix-table-data>
|
|
69
63
|
|
|
70
64
|
<ix-table-data
|
|
71
|
-
.columns=${this.
|
|
72
|
-
.rows=${this.
|
|
73
|
-
header
|
|
65
|
+
.columns=${this.updates.columns}
|
|
66
|
+
.rows=${this.updates.rows}
|
|
67
|
+
.header=${this.updates.header}
|
|
68
|
+
.href=${this.actions.href}
|
|
74
69
|
>
|
|
75
70
|
</ix-table-data>
|
|
76
71
|
|
|
77
|
-
<nav>
|
|
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>`)}
|
|
83
|
-
</nav>
|
|
72
|
+
<nav>${this.renderNavigation()}</nav>
|
|
84
73
|
|
|
85
74
|
<ix-news-feed
|
|
86
75
|
header="What's New"
|
|
87
|
-
.data=${this.
|
|
76
|
+
.data=${this.news}
|
|
77
|
+
href="/news"
|
|
88
78
|
></ix-news-feed>
|
|
89
79
|
|
|
90
80
|
<div class="news-info">
|
|
91
81
|
<h2>Resources</h2>
|
|
92
82
|
<div class="resources">
|
|
93
|
-
${this.
|
|
83
|
+
${this.resources.map((item) => {
|
|
94
84
|
var _a, _b;
|
|
95
|
-
return html ` <ix-info-card
|
|
85
|
+
return html ` <ix-info-card
|
|
86
|
+
type="info-card-resources"
|
|
96
87
|
><img
|
|
97
88
|
slot="image"
|
|
98
89
|
name="image"
|
|
99
90
|
alt="${item.thumbnail.alternativeText}"
|
|
100
|
-
src="${`${
|
|
91
|
+
src="${`${IMG_URL}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
101
92
|
/>
|
|
102
93
|
<div slot="label">${(_b = (_a = item.topics) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name}</div>
|
|
103
94
|
<div slot="title">${item.title}</div>
|
|
@@ -117,12 +108,14 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
117
108
|
|
|
118
109
|
<h2 class="">News & Promotions</h2>
|
|
119
110
|
<div class="newsAndPromotions">
|
|
120
|
-
${this.
|
|
111
|
+
${this.promotions.map((item) => html ` <ix-info-card
|
|
112
|
+
type="info-card"
|
|
113
|
+
>
|
|
121
114
|
<img
|
|
122
115
|
slot="image"
|
|
123
116
|
name="image"
|
|
124
117
|
alt="${item.thumbnail.alternativeText}"
|
|
125
|
-
src="${`${
|
|
118
|
+
src="${`${IMG_URL}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
|
|
126
119
|
/>
|
|
127
120
|
<div slot="title">${item.title}</div>
|
|
128
121
|
<div slot="description">${item.abstract}</div>
|
|
@@ -140,18 +133,9 @@ let IxLaunchpad = class IxLaunchpad extends LitElement {
|
|
|
140
133
|
</div>
|
|
141
134
|
</div>
|
|
142
135
|
|
|
143
|
-
<ix-contacts
|
|
144
|
-
phonenumbers=${this.data.pageProps.pageProps.contactInfo
|
|
145
|
-
.attributes.phoneNumbers}
|
|
146
|
-
></ix-contacts>
|
|
136
|
+
<ix-contacts .contacts=${this.contacts}></ix-contacts>
|
|
147
137
|
</div>
|
|
148
|
-
<nav class="side-nav">
|
|
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>`)}
|
|
154
|
-
</nav>
|
|
138
|
+
<nav class="side-nav">${this.renderNavigation()}</nav>
|
|
155
139
|
</div>
|
|
156
140
|
</section>
|
|
157
141
|
</main>
|
|
@@ -162,6 +146,30 @@ IxLaunchpad.styles = [IxLaunchpadStyles];
|
|
|
162
146
|
__decorate([
|
|
163
147
|
property({ type: Object })
|
|
164
148
|
], IxLaunchpad.prototype, "data", void 0);
|
|
149
|
+
__decorate([
|
|
150
|
+
property({ type: Array })
|
|
151
|
+
], IxLaunchpad.prototype, "status", void 0);
|
|
152
|
+
__decorate([
|
|
153
|
+
property({ type: Array })
|
|
154
|
+
], IxLaunchpad.prototype, "nav", void 0);
|
|
155
|
+
__decorate([
|
|
156
|
+
property({ type: Array })
|
|
157
|
+
], IxLaunchpad.prototype, "news", void 0);
|
|
158
|
+
__decorate([
|
|
159
|
+
property({ type: Object })
|
|
160
|
+
], IxLaunchpad.prototype, "contacts", void 0);
|
|
161
|
+
__decorate([
|
|
162
|
+
property({ type: Array })
|
|
163
|
+
], IxLaunchpad.prototype, "resources", void 0);
|
|
164
|
+
__decorate([
|
|
165
|
+
property({ type: Array })
|
|
166
|
+
], IxLaunchpad.prototype, "promotions", void 0);
|
|
167
|
+
__decorate([
|
|
168
|
+
property({ type: Object })
|
|
169
|
+
], IxLaunchpad.prototype, "updates", void 0);
|
|
170
|
+
__decorate([
|
|
171
|
+
property({ type: Object })
|
|
172
|
+
], IxLaunchpad.prototype, "actions", void 0);
|
|
165
173
|
IxLaunchpad = __decorate([
|
|
166
174
|
customElement('ix-launchpad')
|
|
167
175
|
], IxLaunchpad);
|
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,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;
|
|
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';\n\nconst IMG_URL =\n 'https://gp-tst.digitalrealty.com/_next/image?url=https%3A%2F%2Ftst-cms-strapi.digitalrealtytrust.com';\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}\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 phoneNumbers: '',\n email: '',\n };\n\n @property({ type: Array }) resources = [];\n\n @property({ type: Array }) 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 };\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 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 <ix-table-data\n .columns=${this.actions.columns}\n .rows=${this.actions.rows}\n .header=${this.actions.header}\n .href=${this.actions.href}\n >\n </ix-table-data>\n\n <ix-table-data\n .columns=${this.updates.columns}\n .rows=${this.updates.rows}\n .header=${this.updates.header}\n .href=${this.actions.href}\n >\n </ix-table-data>\n\n <nav>${this.renderNavigation()}</nav>\n\n <ix-news-feed\n header=\"What's New\"\n .data=${this.news}\n href=\"/news\"\n ></ix-news-feed>\n\n <div class=\"news-info\">\n <h2>Resources</h2>\n <div class=\"resources\">\n ${this.resources.map(\n (item: InfoCardItem) => html` <ix-info-card\n type=\"info-card-resources\"\n ><img\n slot=\"image\"\n name=\"image\"\n alt=\"${item.thumbnail.alternativeText}\"\n src=\"${`${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.promotions.map(\n (item: InfoCardItem) => html` <ix-info-card\n type=\"info-card\"\n >\n <img\n slot=\"image\"\n name=\"image\"\n alt=\"${item.thumbnail.alternativeText}\"\n src=\"${`${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 .contacts=${this.contacts}></ix-contacts>\n </div>\n <nav class=\"side-nav\">${this.renderNavigation()}</nav>\n </div>\n </section>\n </main>\n `;\n }\n}\n"]}
|
package/dist/ix-nav-item.d.ts
CHANGED
package/dist/ix-nav-item.js
CHANGED
|
@@ -16,9 +16,25 @@ let IxNavItem = class IxNavItem extends LitElement {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.icon = 'customerSupport';
|
|
19
|
+
this.target = '/';
|
|
20
|
+
this.navigate = () => {
|
|
21
|
+
this.dispatchEvent(new CustomEvent('route', {
|
|
22
|
+
detail: { route: this.target },
|
|
23
|
+
bubbles: true,
|
|
24
|
+
composed: true,
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
19
27
|
}
|
|
20
28
|
render() {
|
|
21
|
-
return html `<button
|
|
29
|
+
return html `<button
|
|
30
|
+
@click=${this.navigate}
|
|
31
|
+
@keydown=${(e) => {
|
|
32
|
+
const selectionKeys = [' ', 'Enter'];
|
|
33
|
+
if (selectionKeys.includes(e.key)) {
|
|
34
|
+
this.navigate();
|
|
35
|
+
}
|
|
36
|
+
}}
|
|
37
|
+
>
|
|
22
38
|
<ix-icon>${iconMap[this.icon]}</ix-icon>
|
|
23
39
|
<h3><slot></slot></h3>
|
|
24
40
|
</button> `;
|
|
@@ -91,6 +107,9 @@ IxNavItem.styles = css `
|
|
|
91
107
|
__decorate([
|
|
92
108
|
property({ type: String })
|
|
93
109
|
], IxNavItem.prototype, "icon", void 0);
|
|
110
|
+
__decorate([
|
|
111
|
+
property({ type: String })
|
|
112
|
+
], IxNavItem.prototype, "target", void 0);
|
|
94
113
|
IxNavItem = __decorate([
|
|
95
114
|
customElement('ix-nav-item')
|
|
96
115
|
], IxNavItem);
|
package/dist/ix-nav-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-nav-item.js","sourceRoot":"","sources":["../src/ix-nav-item.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,EACL,IAAI,EACJ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,GAAQ;IACnB,IAAI;IACJ,cAAc;IACd,WAAW;IACX,QAAQ;IACR,OAAO;IACP,WAAW;CACZ,CAAC;AAGK,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkEuB,SAAI,GAAG,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"ix-nav-item.js","sourceRoot":"","sources":["../src/ix-nav-item.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,EACL,IAAI,EACJ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,GAAQ;IACnB,IAAI;IACJ,cAAc;IACd,WAAW;IACX,QAAQ;IACR,OAAO;IACP,WAAW;CACZ,CAAC;AAGK,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkEuB,SAAI,GAAG,iBAAiB,CAAC;QAEzB,WAAM,GAAG,GAAG,CAAC;QAEzC,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IAgBJ,CAAC;IAdoB,MAAM;QACvB,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,QAAQ;iBACX,CAAC,CAAgB,EAAE,EAAE;YAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;;iBAEU,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;eAEpB,CAAC;IACd,CAAC;;AA5FM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DhB,AA/DU,CA+DT;AAEwB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AApE9B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA8FrB","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 {\n lock,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n} from './assets/iconset.js';\n\nconst iconMap: any = {\n lock,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n};\n\n@customElement('ix-nav-item')\nexport class IxNavItem extends LitElement {\n static styles = css`\n button {\n padding: 12px 43px 12px 24px;\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-width: 1px 0px 0px;\n border-right-style: initial;\n border-bottom-style: initial;\n border-left-style: initial;\n border-right-color: initial;\n border-bottom-color: initial;\n border-left-color: initial;\n border-image: initial;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n border-top-style: solid;\n border-top-color: rgba(255, 255, 255, 0.25);\n padding: 12px 24px;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n color: white;\n width: 100%;\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: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n -webkit-box-flex: 1;\n flex-grow: 1;\n color: rgb(255, 255, 255);\n text-align: left;\n }\n ix-icon {\n flex-shrink: 0;\n background-color: rgb(20, 86, 224);\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: 48px;\n height: 48px;\n margin-right: 24px;\n }\n svg {\n width: 32px;\n margin: auto;\n `;\n\n @property({ type: String }) icon = 'customerSupport';\n\n @property({ type: String }) target = '/';\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`<button\n @click=${this.navigate}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.navigate();\n }\n }}\n >\n <ix-icon>${iconMap[this.icon]}</ix-icon>\n <h3><slot></slot></h3>\n </button> `;\n }\n}\n"]}
|
package/dist/ix-news-feed.d.ts
CHANGED
package/dist/ix-news-feed.js
CHANGED
|
@@ -11,8 +11,10 @@ let IxNewsFeed = class IxNewsFeed extends LitElement {
|
|
|
11
11
|
super(...arguments);
|
|
12
12
|
this.header = 'title';
|
|
13
13
|
this.data = [];
|
|
14
|
+
this.href = '#';
|
|
14
15
|
}
|
|
15
16
|
render() {
|
|
17
|
+
var _a;
|
|
16
18
|
return html `<ix-widget type="news-feed">
|
|
17
19
|
<div class="header">
|
|
18
20
|
<h6>${this.header}</h6>
|
|
@@ -22,12 +24,13 @@ let IxNewsFeed = class IxNewsFeed extends LitElement {
|
|
|
22
24
|
has-icon
|
|
23
25
|
trailing-icon
|
|
24
26
|
appearance="text"
|
|
27
|
+
href=${this.href}
|
|
25
28
|
>
|
|
26
29
|
<ix-icon slot="icon">chevron_right</ix-icon>
|
|
27
30
|
View All
|
|
28
31
|
</ix-button>
|
|
29
32
|
</div>
|
|
30
|
-
${this.data.map((item, id) => {
|
|
33
|
+
${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map((item, id) => {
|
|
31
34
|
const { title = 'date', abstract = '...', uid = '#', dateAdded = '', } = item;
|
|
32
35
|
const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {
|
|
33
36
|
addSuffix: true,
|
|
@@ -236,6 +239,9 @@ __decorate([
|
|
|
236
239
|
__decorate([
|
|
237
240
|
property({ type: Array })
|
|
238
241
|
], IxNewsFeed.prototype, "data", void 0);
|
|
242
|
+
__decorate([
|
|
243
|
+
property({ type: String })
|
|
244
|
+
], IxNewsFeed.prototype, "href", void 0);
|
|
239
245
|
IxNewsFeed = __decorate([
|
|
240
246
|
customElement('ix-news-feed')
|
|
241
247
|
], IxNewsFeed);
|