@digital-realty/ix-widget 2.1.41 → 2.1.43
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 +13 -0
- package/dist/IxWidget.js.map +1 -1
- package/dist/ix-contacts.js +6 -0
- package/dist/ix-contacts.js.map +1 -1
- package/dist/ix-news-feed.d.ts +3 -0
- package/dist/ix-news-feed.js +88 -34
- package/dist/ix-news-feed.js.map +1 -1
- package/dist/ix-status-counter-group.js +17 -0
- package/dist/ix-status-counter-group.js.map +1 -1
- package/dist/ix-status-counter.js +24 -0
- package/dist/ix-status-counter.js.map +1 -1
- package/dist/ix-widget.min.js +1 -1
- package/dist/styles/launchpad-styles.js +6 -8
- package/dist/styles/launchpad-styles.js.map +1 -1
- package/package.json +4 -3
package/dist/IxWidget.js
CHANGED
|
@@ -82,6 +82,19 @@ IxWidget.styles = css `
|
|
|
82
82
|
border-radius: 12px;
|
|
83
83
|
padding-bottom: 11px;
|
|
84
84
|
}
|
|
85
|
+
|
|
86
|
+
@media (max-width: 600px) {
|
|
87
|
+
[type='status-counter-group'].card {
|
|
88
|
+
background: #c8dffa;
|
|
89
|
+
padding-left: 0;
|
|
90
|
+
padding-right: 0;
|
|
91
|
+
}
|
|
92
|
+
[type='status-counter'].card {
|
|
93
|
+
--ix-widget-padding: 0;
|
|
94
|
+
background: transparent;
|
|
95
|
+
border-radius: 0;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
85
98
|
`;
|
|
86
99
|
__decorate([
|
|
87
100
|
property({ type: String })
|
package/dist/IxWidget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;
|
|
1
|
+
{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAsF8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AA3FM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFlB,AAnFY,CAmFX;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: 33px 20px 33px 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 @media (max-width: 600px) {\n [type='status-counter-group'].card {\n background: #c8dffa;\n padding-left: 0;\n padding-right: 0;\n }\n [type='status-counter'].card {\n --ix-widget-padding: 0;\n background: transparent;\n border-radius: 0;\n }\n }\n `;\n\n @property({ type: String }) type = 'default';\n\n protected override render() {\n return html`<div class=\"card\" type=${this.type}>\n <slot></slot>\n </div>`;\n }\n}\n"]}
|
package/dist/ix-contacts.js
CHANGED
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,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAQtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;
|
|
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;;QAqFuB,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,QAAQ;;;;mDAI2B,IAAI,CAAC,SAAS;;;gBAGjD,KAAK;;;sBAGC,UAAU,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;iBACpC,IAAI,CAAC,QAAQ,CAAC,KAAK;;;;;gBAKpB,KAAK;;;cAGP,UAAU,CAAC,MAAM,CAAC;;;;iBAIf,CAAC;IAChB,CAAC;;AAnIM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgFF;CACF,AAlFY,CAkFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AArFzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAqItB","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: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n height: 56px;\n }\n .customer-support h3 {\n margin: 0px;\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n }\n .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 }\n .customer-support a {\n margin: 0px;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n color: var(--clr-primary, #1456e0);\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 .contact-us {\n white-space: normal;\n }\n @media (max-width: 600px) {\n .c2 {\n display: flex;\n flex-direction: column-reverse;\n }\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 ${question}\n <h3>Contact Us</h3>\n </div>\n <p class=\"contact-us\">\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 class=\"column\">\n <div class=\"header\">\n ${phone}\n <h3>Phone</h3>\n </div>\n ${unsafeHTML(result)}\n </div>\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
package/dist/ix-news-feed.d.ts
CHANGED
|
@@ -6,5 +6,8 @@ export declare class IxNewsFeed extends LitElement {
|
|
|
6
6
|
header: string;
|
|
7
7
|
data: any[];
|
|
8
8
|
href: string;
|
|
9
|
+
open: boolean;
|
|
10
|
+
renderStories(): import("lit-html").TemplateResult<1>;
|
|
11
|
+
renderViewAll(): import("lit-html").TemplateResult<1>;
|
|
9
12
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
10
13
|
}
|
package/dist/ix-news-feed.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement, css } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
3
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
4
|
import '@digital-realty/ix-icon/ix-icon.js';
|
|
5
5
|
import './IxWidget.js';
|
|
6
6
|
import { formatDistance } from 'date-fns/formatDistance.js';
|
|
@@ -13,43 +13,62 @@ let IxNewsFeed = class IxNewsFeed extends LitElement {
|
|
|
13
13
|
this.header = 'title';
|
|
14
14
|
this.data = [];
|
|
15
15
|
this.href = '#';
|
|
16
|
+
this.open = false;
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
+
renderStories() {
|
|
18
19
|
var _a;
|
|
19
|
-
return html
|
|
20
|
-
<div class="header">
|
|
21
|
-
<h6>${this.header}</h6>
|
|
22
|
-
<ix-button
|
|
23
|
-
slot="cta"
|
|
24
|
-
type="button"
|
|
25
|
-
has-icon
|
|
26
|
-
trailing-icon
|
|
27
|
-
appearance="text"
|
|
28
|
-
href=${this.href}
|
|
29
|
-
>
|
|
30
|
-
<ix-icon slot="icon">chevron_right</ix-icon>
|
|
31
|
-
View All
|
|
32
|
-
</ix-button>
|
|
33
|
-
</div>
|
|
34
|
-
${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map((item, id) => {
|
|
20
|
+
return html `${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map((item, id) => {
|
|
35
21
|
const { title = 'date', abstract = '...', uid = '#', dateAdded = '', } = item;
|
|
36
22
|
const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {
|
|
37
23
|
addSuffix: true,
|
|
38
24
|
});
|
|
39
25
|
return html `<li>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</div>
|
|
26
|
+
<a href=${uid} tabindex=${id}>
|
|
27
|
+
<div class="icon">${ticket}</div>
|
|
28
|
+
<div class="details">
|
|
29
|
+
<p class="title">${title}</p>
|
|
30
|
+
<p class="description">${abstract}</p>
|
|
46
31
|
<span class="caption">${dateOffset}</span>
|
|
47
|
-
|
|
48
|
-
</
|
|
32
|
+
</div>
|
|
33
|
+
<span class="caption">${dateOffset}</span>
|
|
49
34
|
<span class="ripple"></span>
|
|
50
|
-
</
|
|
51
|
-
|
|
52
|
-
|
|
35
|
+
</a>
|
|
36
|
+
<span class="ripple"></span>
|
|
37
|
+
</li>`;
|
|
38
|
+
})}`;
|
|
39
|
+
}
|
|
40
|
+
renderViewAll() {
|
|
41
|
+
return html ` <ix-button
|
|
42
|
+
slot="cta"
|
|
43
|
+
type="button"
|
|
44
|
+
has-icon
|
|
45
|
+
trailing-icon
|
|
46
|
+
appearance="text"
|
|
47
|
+
href=${this.href}
|
|
48
|
+
>
|
|
49
|
+
<ix-icon slot="icon">chevron_right</ix-icon>
|
|
50
|
+
View All
|
|
51
|
+
</ix-button>`;
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
return html ` <ix-accordion
|
|
55
|
+
?isOpen=${this.open}
|
|
56
|
+
.accordionId=${'f.label'}
|
|
57
|
+
chevronRight
|
|
58
|
+
iconOpen="keyboard_arrow_down"
|
|
59
|
+
iconClose="keyboard_arrow_up"
|
|
60
|
+
>
|
|
61
|
+
<h6 slot="title">${this.header}</h6>
|
|
62
|
+
${this.renderStories()}
|
|
63
|
+
<div class="footer">${this.renderViewAll()}</div>
|
|
64
|
+
</ix-accordion>
|
|
65
|
+
<ix-widget type="news-feed">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<h6>${this.header}</h6>
|
|
68
|
+
${this.renderViewAll()}
|
|
69
|
+
</div>
|
|
70
|
+
${this.renderStories()}
|
|
71
|
+
</ix-widget>`;
|
|
53
72
|
}
|
|
54
73
|
};
|
|
55
74
|
IxNewsFeed.styles = css `
|
|
@@ -153,11 +172,7 @@ IxNewsFeed.styles = css `
|
|
|
153
172
|
gap: 20px;
|
|
154
173
|
text-align: start;
|
|
155
174
|
}
|
|
156
|
-
|
|
157
|
-
display: grid;
|
|
158
|
-
grid-template-columns: auto 1fr;
|
|
159
|
-
padding: 8px 20px;
|
|
160
|
-
}
|
|
175
|
+
|
|
161
176
|
.icon {
|
|
162
177
|
flex-shrink: 0;
|
|
163
178
|
display: inline-flex;
|
|
@@ -225,6 +240,42 @@ IxNewsFeed.styles = css `
|
|
|
225
240
|
inset: 0px;
|
|
226
241
|
border-radius: inherit;
|
|
227
242
|
}
|
|
243
|
+
ix-accordion {
|
|
244
|
+
display: none;
|
|
245
|
+
}
|
|
246
|
+
ix-widget {
|
|
247
|
+
display: block;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
@media only screen and (max-width: 600px) {
|
|
251
|
+
ix-accordion {
|
|
252
|
+
display: block;
|
|
253
|
+
--md-icon-button-icon-color: var(--clr-on-surface-primary);
|
|
254
|
+
--md-icon-button-hover-icon-color: var(--clr-on-surface-primary);
|
|
255
|
+
--md-icon-button-focus-icon-color: var(--clr-on-surface-primary);
|
|
256
|
+
--md-icon-button-icon-size: 2rem;
|
|
257
|
+
--ix-accordion-padding: 8px 12px 8px 20px;
|
|
258
|
+
--ix-accordion-border-radius: 0.75rem;
|
|
259
|
+
}
|
|
260
|
+
ix-widget,
|
|
261
|
+
a > .caption {
|
|
262
|
+
display: none;
|
|
263
|
+
}
|
|
264
|
+
.description {
|
|
265
|
+
margin-bottom: 0.5rem;
|
|
266
|
+
}
|
|
267
|
+
ix-button {
|
|
268
|
+
display: inline-block;
|
|
269
|
+
}
|
|
270
|
+
.footer {
|
|
271
|
+
margin-top: 1rem;
|
|
272
|
+
padding-top: 1rem;
|
|
273
|
+
border-top: 1px solid var(--cp-neutral-blue-12p, #0922411f);
|
|
274
|
+
}
|
|
275
|
+
a {
|
|
276
|
+
padding: 1rem 0.5rem 0 0;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
228
279
|
`;
|
|
229
280
|
__decorate([
|
|
230
281
|
property({ type: String })
|
|
@@ -235,6 +286,9 @@ __decorate([
|
|
|
235
286
|
__decorate([
|
|
236
287
|
property({ type: String })
|
|
237
288
|
], IxNewsFeed.prototype, "href", void 0);
|
|
289
|
+
__decorate([
|
|
290
|
+
state()
|
|
291
|
+
], IxNewsFeed.prototype, "open", void 0);
|
|
238
292
|
IxNewsFeed = __decorate([
|
|
239
293
|
customElement('ix-news-feed')
|
|
240
294
|
], IxNewsFeed);
|
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;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAgLuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAU,EAAE,CAAC;QAEhB,SAAI,GAAG,GAAG,CAAC;IA2CzC,CAAC;IAzCoB,MAAM;;QACvB,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,MAAM;;;;;;;iBAOR,IAAI,CAAC,IAAI;;;;;;QAMlB,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACzC,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;;AA7NM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6KlB,AA7KY,CA6KX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AApL5B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA+NtB","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';\n\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { startOfToday } from 'date-fns/startOfToday.js';\nimport { ticket } from './assets/iconset.js';\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: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n }\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: var(--clr-on-primary, #fff);\n background-color: var(--clr-primary, #1456e0);\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 }\n .description {\n overflow-wrap: break-word;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n margin: 0;\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n font-family: var(--root-primary-font, sans-serif);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n }\n .caption {\n margin: 0px;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\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: any[] = [];\n\n @property({ type: String }) href = '#';\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 href=${this.href}\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"]}
|
|
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,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAgNuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAU,EAAE,CAAC;QAEhB,SAAI,GAAG,GAAG,CAAC;QAE9B,SAAI,GAAG,KAAK,CAAC;IA+DxB,CAAC;IA7DC,aAAa;;QACX,OAAO,IAAI,CAAA,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACrD,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;kBACC,GAAG,aAAa,EAAE;8BACN,MAAM;;+BAEL,KAAK;qCACC,QAAQ;oCACT,UAAU;;kCAEZ,UAAU;;;;YAIhC,CAAC;QACT,CAAC,CAAC,EAAE,CAAC;IACP,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;;;;;;aAMF,IAAI,CAAC,IAAI;;;;iBAIL,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;kBACG,IAAI,CAAC,IAAI;uBACJ,SAAS;;;;;2BAKL,IAAI,CAAC,MAAM;UAC5B,IAAI,CAAC,aAAa,EAAE;8BACA,IAAI,CAAC,aAAa,EAAE;;;;gBAIlC,IAAI,CAAC,MAAM;YACf,IAAI,CAAC,aAAa,EAAE;;UAEtB,IAAI,CAAC,aAAa,EAAE;mBACX,CAAC;IAClB,CAAC;;AAnRM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6MlB,AA7MY,CA6MX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AAE9B;IAAR,KAAK,EAAE;wCAAc;AAtNX,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAqRtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\n\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { startOfToday } from 'date-fns/startOfToday.js';\nimport { ticket } from './assets/iconset.js';\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: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n }\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\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: var(--clr-on-primary, #fff);\n background-color: var(--clr-primary, #1456e0);\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 }\n .description {\n overflow-wrap: break-word;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n margin: 0;\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n font-family: var(--root-primary-font, sans-serif);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n }\n .caption {\n margin: 0px;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\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 ix-accordion {\n display: none;\n }\n ix-widget {\n display: block;\n }\n\n @media only screen and (max-width: 600px) {\n ix-accordion {\n display: block;\n --md-icon-button-icon-color: var(--clr-on-surface-primary);\n --md-icon-button-hover-icon-color: var(--clr-on-surface-primary);\n --md-icon-button-focus-icon-color: var(--clr-on-surface-primary);\n --md-icon-button-icon-size: 2rem;\n --ix-accordion-padding: 8px 12px 8px 20px;\n --ix-accordion-border-radius: 0.75rem;\n }\n ix-widget,\n a > .caption {\n display: none;\n }\n .description {\n margin-bottom: 0.5rem;\n }\n ix-button {\n display: inline-block;\n }\n .footer {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid var(--cp-neutral-blue-12p, #0922411f);\n }\n a {\n padding: 1rem 0.5rem 0 0;\n }\n }\n `;\n\n @property({ type: String }) header = 'title';\n\n @property({ type: Array }) data: any[] = [];\n\n @property({ type: String }) href = '#';\n\n @state() open = false;\n\n renderStories() {\n return html`${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 <span class=\"caption\">${dateOffset}</span>\n </div>\n <span class=\"caption\">${dateOffset}</span>\n <span class=\"ripple\"></span>\n </a>\n <span class=\"ripple\"></span>\n </li>`;\n })}`;\n }\n\n renderViewAll() {\n return html` <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n href=${this.href}\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View All\n </ix-button>`;\n }\n\n protected override render() {\n return html` <ix-accordion\n ?isOpen=${this.open}\n .accordionId=${'f.label'}\n chevronRight\n iconOpen=\"keyboard_arrow_down\"\n iconClose=\"keyboard_arrow_up\"\n >\n <h6 slot=\"title\">${this.header}</h6>\n ${this.renderStories()}\n <div class=\"footer\">${this.renderViewAll()}</div>\n </ix-accordion>\n <ix-widget type=\"news-feed\">\n <div class=\"header\">\n <h6>${this.header}</h6>\n ${this.renderViewAll()}\n </div>\n ${this.renderStories()}\n </ix-widget>`;\n }\n}\n"]}
|
|
@@ -164,6 +164,23 @@ IxStatusCounterGroup.styles = css `
|
|
|
164
164
|
grid-row-start: 2;
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
|
+
@media (max-width: 600px) {
|
|
168
|
+
.layout {
|
|
169
|
+
display: block;
|
|
170
|
+
background: none;
|
|
171
|
+
}
|
|
172
|
+
ix-status-counter {
|
|
173
|
+
display: block;
|
|
174
|
+
border-bottom: 1px solid #b1c6f5;
|
|
175
|
+
}
|
|
176
|
+
ix-status-counter:first-child {
|
|
177
|
+
margin-top: -0.5rem;
|
|
178
|
+
}
|
|
179
|
+
ix-status-counter:last-child {
|
|
180
|
+
border-bottom: none;
|
|
181
|
+
margin-bottom: -0.5rem;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
167
184
|
`;
|
|
168
185
|
__decorate([
|
|
169
186
|
property({ type: Array })
|
|
@@ -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;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,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;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QA8IsB,SAAI,GAAG,EAAE,CAAC;IAyBvC,CAAC;IAvBoB,MAAM;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7C,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;uBACV,KAAK;wBACJ,MAAM;sBACR,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;gCACE,eAAe,CAAC,MAAM,CAAC;;iCAEtB,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AArKM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2IlB,AA3IY,CA2IX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AA9I1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAuKhC","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';\nimport { testIdTransform } from './utils/testIdTransform.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 @media (max-width: 600px) {\n .layout {\n display: block;\n background: none;\n }\n ix-status-counter {\n display: block;\n border-bottom: 1px solid #b1c6f5;\n }\n ix-status-counter:first-child {\n margin-top: -0.5rem;\n }\n ix-status-counter:last-child {\n border-bottom: none;\n margin-bottom: -0.5rem;\n }\n }\n `;\n\n @property({ type: Array }) data = [];\n\n protected override render() {\n if (!this.data?.length) {\n return html``;\n }\n return html`<ix-widget type=\"status-counter-group\">\n <div class=\"content\">\n <div class=\"layout\">\n ${this.data.map((item, index) => {\n const { value, header, icon, target } = item;\n return html`<ix-status-counter\n class=\"b${index + 1}\"\n .value=${value}\n .header=${header}\n .icon=${iconMap[icon]}\n .target=${target}\n data-testid=\"lp-${testIdTransform(header)}\"\n >\n </ix-status-counter>`;\n })}\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
|
|
@@ -177,6 +177,30 @@ IxStatusCounter.styles = css `
|
|
|
177
177
|
text-transform: var(--text-small-transform, none);
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
|
+
|
|
181
|
+
@media (max-width: 600px) {
|
|
182
|
+
.info {
|
|
183
|
+
flex-direction: row;
|
|
184
|
+
justify-content: start;
|
|
185
|
+
}
|
|
186
|
+
.content {
|
|
187
|
+
flex-direction: row;
|
|
188
|
+
padding: 0.5rem 1.5rem;
|
|
189
|
+
}
|
|
190
|
+
.content.last-item {
|
|
191
|
+
border-bottom: none;
|
|
192
|
+
}
|
|
193
|
+
.content h2 {
|
|
194
|
+
font-size: 16px;
|
|
195
|
+
}
|
|
196
|
+
.content h3 {
|
|
197
|
+
font-size: 20px;
|
|
198
|
+
}
|
|
199
|
+
ix-icon {
|
|
200
|
+
width: 42px;
|
|
201
|
+
height: 42px;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
180
204
|
`;
|
|
181
205
|
__decorate([
|
|
182
206
|
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,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG9C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;
|
|
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;AAG9C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA8JuB,UAAK,GAAgC,SAAS,CAAC;QAE/C,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,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;IA4BJ,CAAC;IA1BoB,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;;;;;YAKK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAC9B,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;;AAxMM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2JlB,AA3JY,CA2JX;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;+CAAc;AApK9B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0M3B","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';\n\n@customElement('ix-status-counter')\nexport class IxStatusCounter extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-background: rgb(200, 223, 250);\n --ix-widget-padding: 36.5px 20px 36.5px 24px;\n --ix-icon-font-size: 5rem;\n --ix-icon-line-height: 1;\n cursor: pointer;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n }\n h3 {\n margin: 0px;\n font-family: var(--text-page-title-font, sans-serif);\n font-size: var(--text-page-title-size, 2.125rem);\n letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n line-height: var(--text-page-title-line-height, 1.17647059em);\n font-weight: var(--text-page-title-weight, bold);\n text-decoration: var(--text-page-title-decoration, none);\n text-transform: var(--text-page-title-transform, none);\n }\n .content {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n }\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: var(--clr-primary, #1456e0);\n width: 24px;\n height: 24px;\n animation-name: loading;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n svg {\n width: 24px;\n margin: auto;\n }\n\n @media (min-width: 1200px) {\n svg {\n width: 36px;\n margin: auto;\n }\n .info svg {\n width: 36px;\n height: 36px;\n }\n }\n\n @media (max-width: 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: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n padding-left: 8px;\n }\n h3 {\n margin: 0px;\n font-family: var(--root-primary-font, sans-serif);\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: bold;\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n }\n }\n\n @media (max-width: 600px) {\n .info {\n flex-direction: row;\n justify-content: start;\n }\n .content {\n flex-direction: row;\n padding: 0.5rem 1.5rem;\n }\n .content.last-item {\n border-bottom: none;\n }\n .content h2 {\n font-size: 16px;\n }\n .content h3 {\n font-size: 20px;\n }\n ix-icon {\n width: 42px;\n height: 42px;\n }\n }\n `;\n\n @property({ type: String }) value: number | undefined | string = undefined;\n\n @property({ type: String }) header = 'status';\n\n @property({ type: Object }) icon = laptop;\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`<ix-widget\n @click=${this.navigate}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.navigate();\n }\n }}\n type=\"status-counter\"\n >\n <div class=\"content\">\n <div class=\"info\">\n ${this.value || this.value === 0\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"]}
|
package/dist/ix-widget.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}@media (min-width:1350px){[type=status-counter].card{--ix-widget-padding:33px 20px 33px 24px}}[type=status-counter-group].card{--ix-widget-padding:0;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}@media (max-width:1349px){[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:white;box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}@media (min-width:1350px){[type=status-counter].card{--ix-widget-padding:33px 20px 33px 24px}}[type=status-counter-group].card{--ix-widget-padding:0;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}@media (max-width:1349px){[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:white;box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}@media (max-width:600px){[type=status-counter-group].card{background:#c8dffa;padding-left:0;padding-right:0}[type=status-counter].card{--ix-widget-padding:0;background:0 0;border-radius:0}}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);
|
|
@@ -128,14 +128,6 @@ export const IxLaunchpadStyles = css `
|
|
|
128
128
|
height: calc(100vh - 10rem);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
@media (max-width: 1199px) {
|
|
132
|
-
ix-table-data,
|
|
133
|
-
ix-action-list,
|
|
134
|
-
.news-info {
|
|
135
|
-
display: none;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
131
|
@media (min-width: 800px) and (max-width: 1349px) {
|
|
140
132
|
nav {
|
|
141
133
|
display: flex;
|
|
@@ -227,5 +219,11 @@ export const IxLaunchpadStyles = css `
|
|
|
227
219
|
height: 1700px;
|
|
228
220
|
margin: -2rem;
|
|
229
221
|
}
|
|
222
|
+
|
|
223
|
+
@media (max-width: 600px) {
|
|
224
|
+
.news-info {
|
|
225
|
+
display: none;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
230
228
|
`;
|
|
231
229
|
//# sourceMappingURL=launchpad-styles.js.map
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOnC,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 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 font-family: var(--text-page-title-font, sans-serif);\n font-size: var(--text-page-title-size, 2.125rem);\n letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n line-height: var(--text-page-title-line-height, 1.17647059em);\n font-weight: var(--text-page-title-weight, bold);\n text-decoration: var(--text-page-title-decoration, none);\n text-transform: var(--text-page-title-transform, none);\n }\n h2 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: 24px;\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: normal;\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\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 .news-item-description {\n margin: 10px 0 0;\n font-family: var(--root-primary-font);\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n position: relative;\n color: white;\n }\n\n ix-info-card {\n width: 348px;\n }\n\n #videoPlayer.headline {\n justify-content: space-between;\n }\n\n video {\n max-width: 100%;\n height: calc(100vh - 10rem);\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 display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n .container {\n display: grid;\n grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\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 @media (max-width: 600px) {\n .news-info {\n display: none;\n }\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": "2.1.
|
|
6
|
+
"version": "2.1.43",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -38,9 +38,10 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@adobe/lit-mobx": "^2.2.2",
|
|
41
|
+
"@digital-realty/ix-accordion": "^1.1.8",
|
|
41
42
|
"@digital-realty/ix-button": "^3.3.7",
|
|
42
43
|
"@digital-realty/ix-dialog": "^1.1.15",
|
|
43
|
-
"@digital-realty/ix-grid": "^1.2.
|
|
44
|
+
"@digital-realty/ix-grid": "^1.2.6",
|
|
44
45
|
"@digital-realty/ix-icon": "^1.1.7",
|
|
45
46
|
"@digital-realty/ix-list": "^1.1.6",
|
|
46
47
|
"@lit/react": "^1.0.2",
|
|
@@ -129,5 +130,5 @@
|
|
|
129
130
|
"README.md",
|
|
130
131
|
"LICENSE"
|
|
131
132
|
],
|
|
132
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "e9bc0871e614aa8fecc33e39269e3370074cb1b6"
|
|
133
134
|
}
|