@digital-realty/ix-widget 2.1.21 → 2.1.23

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.
Files changed (34) hide show
  1. package/dist/IxWidget.js +1 -1
  2. package/dist/IxWidget.js.map +1 -1
  3. package/dist/ix-action-list.js +15 -15
  4. package/dist/ix-action-list.js.map +1 -1
  5. package/dist/ix-contacts.js +15 -23
  6. package/dist/ix-contacts.js.map +1 -1
  7. package/dist/ix-info-card.js +24 -21
  8. package/dist/ix-info-card.js.map +1 -1
  9. package/dist/ix-nav-item.js +9 -8
  10. package/dist/ix-nav-item.js.map +1 -1
  11. package/dist/ix-nav-list.js +4 -4
  12. package/dist/ix-nav-list.js.map +1 -1
  13. package/dist/ix-news-feed.js +21 -29
  14. package/dist/ix-news-feed.js.map +1 -1
  15. package/dist/ix-status-counter.js +29 -29
  16. package/dist/ix-status-counter.js.map +1 -1
  17. package/dist/ix-table-data.js +23 -21
  18. package/dist/ix-table-data.js.map +1 -1
  19. package/dist/ix-widget.min.js +1 -1
  20. package/dist/mock/columns.d.ts +6 -0
  21. package/dist/mock/columns.js +48 -0
  22. package/dist/mock/columns.js.map +1 -0
  23. package/dist/mock/data.d.ts +153 -0
  24. package/dist/mock/data.js +389 -0
  25. package/dist/mock/data.js.map +1 -0
  26. package/dist/mock/rows.d.ts +17 -0
  27. package/dist/mock/rows.js +88 -0
  28. package/dist/mock/rows.js.map +1 -0
  29. package/dist/mock/service-tickets.d.ts +44 -0
  30. package/dist/mock/service-tickets.js +115 -0
  31. package/dist/mock/service-tickets.js.map +1 -0
  32. package/dist/styles/launchpad-styles.js +13 -15
  33. package/dist/styles/launchpad-styles.js.map +1 -1
  34. package/package.json +10 -7
package/dist/IxWidget.js CHANGED
@@ -28,7 +28,7 @@ IxWidget.styles = css `
28
28
 
29
29
  @media (min-width: 1350px) {
30
30
  [type='status-counter'].card {
31
- --ix-widget-padding: 36.5px 20px 36.5px 24px;
31
+ --ix-widget-padding: 33px 20px 33px 24px;
32
32
  }
33
33
  }
34
34
 
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-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"]}
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: 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\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-action-list.js CHANGED
@@ -61,7 +61,7 @@ IxActionList.styles = css `
61
61
  font-size: inherit;
62
62
  margin-left: 5px;
63
63
  margin-top: 2px;
64
- color: rgb(20, 86, 224);
64
+ color: var(--clr-primary, #1456e0);
65
65
  }
66
66
  ix-button {
67
67
  display: inline-block;
@@ -76,23 +76,23 @@ IxActionList.styles = css `
76
76
  }
77
77
  h2 {
78
78
  margin: 0px;
79
- font-family: 'Red Hat Display', sans-serif;
80
- font-style: normal;
81
- font-weight: bold;
82
- font-size: 20px;
83
- line-height: 24px;
84
- letter-spacing: 0.15px;
85
- color: rgb(9, 34, 65);
79
+ font-family: var(--text-heading-font, sans-serif);
80
+ font-size: var(--text-heading-size, 1.25rem);
81
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
82
+ line-height: var(--text-heading-line-height, 1.2em);
83
+ font-weight: var(--text-heading-weight, bold);
84
+ text-decoration: var(--text-heading-decoration, none);
85
+ text-transform: var(--text-heading-transform, none);
86
86
  }
87
87
  .description {
88
88
  margin: 0 0 8px;
89
- font-family: 'Red Hat Display', sans-serif;
90
- font-style: normal;
91
- font-weight: bold;
92
- font-size: 20px;
93
- line-height: 24px;
94
- letter-spacing: 0.15px;
95
- color: rgb(9, 34, 65);
89
+ font-family: var(--text-heading-font, sans-serif);
90
+ font-size: var(--text-heading-size, 1.25rem);
91
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
92
+ line-height: var(--text-heading-line-height, 1.2em);
93
+ font-weight: var(--text-heading-weight, bold);
94
+ text-decoration: var(--text-heading-decoration, none);
95
+ text-transform: var(--text-heading-transform, none);
96
96
  display: flex;
97
97
  flex-direction: column;
98
98
  gap: 8px;
package/dist/ix-action-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-action-list.js","sourceRoot":"","sources":["../src/ix-action-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IA6DvB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BE,CAAC;IAChB,CAAC;;AA7FM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DX;AA3DS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+FxB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\n\n@customElement('ix-action-list')\nexport class IxActionList extends LitElement {\n static styles = css`\n .content {\n display: flex;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: start;\n justify-content: start;\n margin: 24px;\n }\n svg {\n user-select: none;\n width: 48px;\n height: 48px;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: inherit;\n margin-left: 5px;\n margin-top: 2px;\n color: rgb(20, 86, 224);\n }\n ix-button {\n display: inline-block;\n }\n .header {\n height: 56px;\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n }\n h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .description {\n margin: 0 0 8px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 24px;\n }\n `;\n\n protected override render() {\n return html`<ix-widget type=\"action-list\">\n <div class=\"header\">\n <h2>0 Pending Facility Access Requests</h2>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n Learn more\n </ix-button>\n </div>\n <div class=\"content\">\n <svg\n class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-sfpjfh\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"InfoIcon\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n ></path>\n </svg>\n <div class=\"description\">\n No Facility Access requests pending approval\n </div>\n <ix-button>View All</ix-button>\n </div>\n </ix-widget>`;\n }\n}\n"]}
1
+ {"version":3,"file":"ix-action-list.js","sourceRoot":"","sources":["../src/ix-action-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IA6DvB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BE,CAAC;IAChB,CAAC;;AA7FM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DX;AA3DS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+FxB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\n\n@customElement('ix-action-list')\nexport class IxActionList extends LitElement {\n static styles = css`\n .content {\n display: flex;\n flex-direction: column;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: start;\n justify-content: start;\n margin: 24px;\n }\n svg {\n user-select: none;\n width: 48px;\n height: 48px;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: inherit;\n margin-left: 5px;\n margin-top: 2px;\n color: var(--clr-primary, #1456e0);\n }\n ix-button {\n display: inline-block;\n }\n .header {\n height: 56px;\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-size: var(--text-heading-size, 1.25rem);\n letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n line-height: var(--text-heading-line-height, 1.2em);\n font-weight: var(--text-heading-weight, bold);\n text-decoration: var(--text-heading-decoration, none);\n text-transform: var(--text-heading-transform, none);\n }\n .description {\n margin: 0 0 8px;\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 display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 24px;\n }\n `;\n\n protected override render() {\n return html`<ix-widget type=\"action-list\">\n <div class=\"header\">\n <h2>0 Pending Facility Access Requests</h2>\n <ix-button\n slot=\"cta\"\n type=\"button\"\n has-icon\n trailing-icon\n appearance=\"text\"\n >\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n Learn more\n </ix-button>\n </div>\n <div class=\"content\">\n <svg\n class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-sfpjfh\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n data-testid=\"InfoIcon\"\n >\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n ></path>\n </svg>\n <div class=\"description\">\n No Facility Access requests pending approval\n </div>\n <ix-button>View All</ix-button>\n </div>\n </ix-widget>`;\n }\n}\n"]}
package/dist/ix-contacts.js CHANGED
@@ -70,24 +70,24 @@ IxContacts.styles = [
70
70
  }
71
71
  .customer-support h2 {
72
72
  margin: 0px;
73
- font-family: 'Red Hat Display', sans-serif;
74
- font-style: normal;
75
- font-weight: bold;
76
- font-size: 20px;
77
- line-height: 24px;
78
- letter-spacing: 0.15px;
79
- color: rgb(9, 34, 65);
73
+ font-family: var(--text-heading-font, sans-serif);
74
+ font-size: var(--text-heading-size, 1.25rem);
75
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
76
+ line-height: var(--text-heading-line-height, 1.2em);
77
+ font-weight: var(--text-heading-weight, bold);
78
+ text-decoration: var(--text-heading-decoration, none);
79
+ text-transform: var(--text-heading-transform, none);
80
80
  height: 56px;
81
81
  }
82
82
  .customer-support h3 {
83
83
  margin: 0px;
84
- font-family: 'Open Sans', sans-serif;
85
- font-style: normal;
86
- font-weight: 400;
87
- font-size: 16px;
88
- line-height: 20px;
89
- letter-spacing: 0.15px;
90
- color: rgb(9, 34, 65);
84
+ font-family: var(--text-default-font, sans-serif);
85
+ font-size: var(--text-default-size, 16px);
86
+ letter-spacing: var(--text-default-letter-spacing, 0.0275em);
87
+ line-height: var(--text-default-line-height, 1.75em);
88
+ font-weight: var(--text-default-weight, normal);
89
+ text-transform: var(--text-default-decoration, none);
90
+ text-decoration: var(--text-default-transform, none);
91
91
  }
92
92
  .customer-support svg {
93
93
  user-select: none;
@@ -102,23 +102,15 @@ IxContacts.styles = [
102
102
  }
103
103
  .customer-support p {
104
104
  margin: 0px;
105
- font-family: 'Open Sans', sans-serif;
106
- font-style: normal;
107
- font-weight: 400;
108
- font-size: 16px;
109
- line-height: 28px;
110
- letter-spacing: 0.44px;
111
- color: rgb(9, 34, 65);
112
105
  }
113
106
  .customer-support a {
114
107
  margin: 0px;
115
- font-family: 'Open Sans', sans-serif;
116
108
  font-style: normal;
117
109
  font-weight: 400;
118
110
  font-size: 16px;
119
111
  line-height: 28px;
120
112
  letter-spacing: 0.44px;
121
- color: rgb(20, 86, 224);
113
+ color: var(--clr-primary, #1456e0);
122
114
  text-decoration: underline rgba(20, 86, 224, 0.4);
123
115
  }
124
116
  .customer-support .column {
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;;QAuFuB,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;;AArIM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;CACF,AApFY,CAoFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AAvFzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAuItB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\nimport markdownit from 'markdown-it';\nimport { phone, email, question } from './assets/iconset.js';\n\ninterface Contacts {\n phoneNumbers?: string;\n email?: string;\n}\n\n@customElement('ix-contacts')\nexport class IxContacts extends LitElement {\n static styles = [\n css`\n .c2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n }\n .c3 {\n display: grid;\n grid-template-columns: auto auto auto;\n gap: 2rem;\n }\n .customer-support h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n height: 56px;\n }\n .customer-support h3 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .customer-support svg {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.5rem;\n color: rgb(7, 20, 84);\n }\n .customer-support p {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n color: rgb(9, 34, 65);\n }\n .customer-support a {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 28px;\n letter-spacing: 0.44px;\n color: rgb(20, 86, 224);\n text-decoration: underline rgba(20, 86, 224, 0.4);\n }\n .customer-support .column {\n display: flex;\n flex-direction: column;\n gap: 12px;\n white-space: pre-wrap;\n }\n p {\n white-space: pre-wrap;\n }\n .header {\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n gap: 8px;\n }\n .contact-us {\n white-space: normal;\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"]}
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;;QA+EuB,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;;AA7HM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0EF;CACF,AA5EY,CA4EX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AA/EzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA+HtB","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 `,\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-info-card.js CHANGED
@@ -58,13 +58,14 @@ IxInfoCard.styles = [
58
58
  [type='info-card-resources'] ::slotted([slot='title']) {
59
59
  position: relative;
60
60
  margin: 0px;
61
- font-family: var(--root-secondary-font);
62
- font-style: normal;
63
- font-weight: bold;
64
- font-size: 20px;
65
- line-height: 24px;
66
- letter-spacing: 0.15px;
67
- color: rgb(255, 255, 255);
61
+ font-family: var(--text-heading-font, sans-serif);
62
+ font-size: var(--text-heading-size, 1.25rem);
63
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
64
+ line-height: var(--text-heading-line-height, 1.2em);
65
+ font-weight: var(--text-heading-weight, bold);
66
+ text-decoration: var(--text-heading-decoration, none);
67
+ text-transform: var(--text-heading-transform, none);
68
+ color: var(--clr-on-primary, #fff);
68
69
  z-index: 2;
69
70
  }
70
71
  [type='info-card-resources'] ::slotted([slot='cta']) {
@@ -85,7 +86,7 @@ IxInfoCard.styles = [
85
86
  -webkit-box-pack: center;
86
87
  justify-content: center;
87
88
  color: rgb(255, 255, 255);
88
- background-color: rgb(20, 86, 224);
89
+ background-color: var(--clr-primary, #1456e0);
89
90
  border-radius: 16px;
90
91
  white-space: nowrap;
91
92
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
@@ -125,22 +126,24 @@ IxInfoCard.styles = [
125
126
  }
126
127
  [type='info-card'] ::slotted([slot='title']) {
127
128
  margin: 0px;
128
- font-family: var(--root-secondary-font);
129
- font-style: normal;
130
- font-weight: bold;
131
- font-size: 20px;
132
- line-height: 24px;
133
- letter-spacing: 0.15px;
134
- color: rgb(20, 86, 224);
129
+ font-family: var(--text-heading-font, sans-serif);
130
+ font-size: var(--text-heading-size, 1.25rem);
131
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
132
+ line-height: var(--text-heading-line-height, 1.2em);
133
+ font-weight: var(--text-heading-weight, bold);
134
+ text-decoration: var(--text-heading-decoration, none);
135
+ text-transform: var(--text-heading-transform, none);
136
+ color: var(--clr-primary, #1456e0);
135
137
  }
136
138
  [type='info-card'] ::slotted([slot='description']) {
137
139
  margin: 10px 0 0;
138
- font-family: var(--root-primary-font);
139
- font-style: normal;
140
- font-weight: 400;
141
- font-size: 16px;
142
- line-height: 28px;
143
- letter-spacing: 0.44px;
140
+ font-family: var(--text-default-font, sans-serif);
141
+ font-size: var(--text-default-size, 16px);
142
+ letter-spacing: var(--text-default-letter-spacing, 0.0275em);
143
+ line-height: var(--text-default-line-height, 1.75em);
144
+ font-weight: var(--text-default-weight, normal);
145
+ text-transform: var(--text-default-decoration, none);
146
+ text-decoration: var(--text-default-transform, none);
144
147
  color: inherit;
145
148
  }
146
149
  [type='info-card'] ::slotted([slot='cta']) {
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;;QAqIuB,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;;AAnJM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgIF;CACF,AAlIY,CAkIX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAvI1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAqJtB","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: var(--root-secondary-font);\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 --md-text-button-label-text-font: var(--root-secondary-font);\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 align-items: end;\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: var(--root-secondary-font);\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: 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 color: inherit;\n }\n [type='info-card'] ::slotted([slot='cta']) {\n position: absolute;\n bottom: 1rem;\n left: 0.5rem;\n --md-text-button-label-text-font: var(--root-secondary-font);\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"]}
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;;QAwIuB,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;;AAtJM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmIF;CACF,AArIY,CAqIX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AA1I1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAwJtB","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: 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 color: var(--clr-on-primary, #fff);\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 --md-text-button-label-text-font: var(--root-secondary-font);\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: var(--clr-primary, #1456e0);\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 align-items: end;\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: 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 color: var(--clr-primary, #1456e0);\n }\n [type='info-card'] ::slotted([slot='description']) {\n margin: 10px 0 0;\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 color: inherit;\n }\n [type='info-card'] ::slotted([slot='cta']) {\n position: absolute;\n bottom: 1rem;\n left: 0.5rem;\n --md-text-button-label-text-font: var(--root-secondary-font);\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-nav-item.js CHANGED
@@ -78,20 +78,21 @@ IxNavItem.styles = css `
78
78
  }
79
79
  h3 {
80
80
  margin: 0px;
81
- font-family: "Red Hat Display", sans-serif;
82
- font-style: normal;
83
- font-weight: bold;
84
- font-size: 20px;
85
- line-height: 24px;
86
- letter-spacing: 0.15px;
81
+ font-family: var(--text-heading-font, sans-serif);
82
+ font-size: var(--text-heading-size, 1.25rem);
83
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
84
+ line-height: var(--text-heading-line-height, 1.2em);
85
+ font-weight: var(--text-heading-weight, bold);
86
+ text-decoration: var(--text-heading-decoration, none);
87
+ text-transform: var(--text-heading-transform, none);
87
88
  -webkit-box-flex: 1;
88
89
  flex-grow: 1;
89
- color: rgb(255, 255, 255);
90
+ color: var(--clr-on-primary, #fff);
90
91
  text-align: left;
91
92
  }
92
93
  ix-icon {
93
94
  flex-shrink: 0;
94
- background-color: rgb(20, 86, 224);
95
+ background-color: var(--clr-primary, #1456E0);
95
96
  border-radius: 50%;
96
97
  display: flex;
97
98
  -webkit-box-pack: center;
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,YAAY,EACZ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,GAAQ;IACnB,IAAI;IACJ,YAAY;IACZ,cAAc;IACd,WAAW;IACX,QAAQ;IACR,OAAO;IACP,WAAW;IACX,cAAc;CACf,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 crossConnect,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n troubleTickets,\n} from './assets/iconset.js';\n\nconst iconMap: any = {\n lock,\n crossConnect,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n troubleTickets,\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"]}
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,YAAY,EACZ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAc,GACf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,GAAQ;IACnB,IAAI;IACJ,YAAY;IACZ,cAAc;IACd,WAAW;IACX,QAAQ;IACR,OAAO;IACP,WAAW;IACX,cAAc;CACf,CAAC;AAGK,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmEuB,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;;AA7FM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEhB,AAhEU,CAgET;AAEwB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AArE9B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA+FrB","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 crossConnect,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n troubleTickets,\n} from './assets/iconset.js';\n\nconst iconMap: any = {\n lock,\n crossConnect,\n cutomerSupport,\n remoteHands,\n shipping,\n addUser,\n manageUsers,\n troubleTickets,\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;\nfont-family: var(--text-heading-font, sans-serif);\nfont-size: var(--text-heading-size, 1.25rem);\nletter-spacing: var(--text-heading-letter-spacing, 0.0075em);\nline-height: var(--text-heading-line-height, 1.2em);\nfont-weight: var(--text-heading-weight, bold);\ntext-decoration: var(--text-heading-decoration, none);\ntext-transform: var(--text-heading-transform, none);\n -webkit-box-flex: 1;\n flex-grow: 1;\n color: var(--clr-on-primary, #fff);\n text-align: left;\n }\n ix-icon {\n flex-shrink: 0;\n background-color: var(--clr-primary, #1456E0);\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-nav-list.js CHANGED
@@ -17,15 +17,15 @@ let IxNavList = class IxNavList extends LitElement {
17
17
  };
18
18
  IxNavList.styles = css `
19
19
  ix-widget {
20
- --ix-widget-background: rgb(7, 20, 84);
20
+ --ix-widget-background: var(--clr-secondary-bright, #071155);
21
21
  --ix-widget-padding: 0 0 1rem;
22
22
  }
23
23
  h2 {
24
24
  margin: 0px;
25
- font-family: 'Red Hat Display', sans-serif;
26
- font-weight: 700;
25
+ font-family: var(--text-heading-font, sans-serif);
26
+ font-weight: var(--text-heading-weight, bold);
27
27
  font-style: normal;
28
- font-size: 14px;
28
+ font-size: var(--text-small-size, 0.875rem);
29
29
  line-height: 18.52px;
30
30
  letter-spacing: 1.25px;
31
31
  text-transform: uppercase;
package/dist/ix-nav-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-nav-list.js","sourceRoot":"","sources":["../src/ix-nav-list.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;AAGhB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqBuB,WAAM,GAAG,OAAO,CAAC;IAQ/C,CAAC;IANoB,MAAM;QACvB,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,MAAM;;iBAEN,CAAC;IAChB,CAAC;;AA3BM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBlB,AAlBY,CAkBX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AArBlC,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6BrB","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\n@customElement('ix-nav-list')\nexport class IxNavList extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-background: rgb(7, 20, 84);\n --ix-widget-padding: 0 0 1rem;\n }\n h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n border-bottom: 1px solid rgba(255, 255, 255, 0.25);\n padding: 20px 24px 12px;\n }\n `;\n\n @property({ type: String }) header = 'title';\n\n protected override render() {\n return html`<ix-widget type=\"nav-list\">\n <h2>${this.header}</h2>\n <slot></slot>\n </ix-widget>`;\n }\n}\n"]}
1
+ {"version":3,"file":"ix-nav-list.js","sourceRoot":"","sources":["../src/ix-nav-list.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;AAGhB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqBuB,WAAM,GAAG,OAAO,CAAC;IAQ/C,CAAC;IANoB,MAAM;QACvB,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,MAAM;;iBAEN,CAAC;IAChB,CAAC;;AA3BM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBlB,AAlBY,CAkBX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AArBlC,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6BrB","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\n@customElement('ix-nav-list')\nexport class IxNavList extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-background: var(--clr-secondary-bright, #071155);\n --ix-widget-padding: 0 0 1rem;\n }\n h2 {\n margin: 0px;\n font-family: var(--text-heading-font, sans-serif);\n font-weight: var(--text-heading-weight, bold);\n font-style: normal;\n font-size: var(--text-small-size, 0.875rem);\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n border-bottom: 1px solid rgba(255, 255, 255, 0.25);\n padding: 20px 24px 12px;\n }\n `;\n\n @property({ type: String }) header = 'title';\n\n protected override render() {\n return html`<ix-widget type=\"nav-list\">\n <h2>${this.header}</h2>\n <slot></slot>\n </ix-widget>`;\n }\n}\n"]}
package/dist/ix-news-feed.js CHANGED
@@ -66,13 +66,11 @@ IxNewsFeed.styles = css `
66
66
  }
67
67
  h6 {
68
68
  margin: 0px;
69
- font-family: 'Red Hat Display', sans-serif;
70
- font-style: normal;
71
- font-weight: bold;
72
- font-size: 20px;
73
- line-height: 24px;
74
- letter-spacing: 0.15px;
75
- color: rgb(9, 34, 65);
69
+ font-family: var(--text-heading-font, sans-serif);
70
+ font-size: var(--text-heading-size, 1.25rem);
71
+ letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
72
+ line-height: var(--text-heading-line-height, 1.2em);
73
+ font-weight: var(--text-heading-weight, bold);
76
74
  }
77
75
  li {
78
76
  -webkit-tap-highlight-color: transparent;
@@ -172,8 +170,8 @@ IxNewsFeed.styles = css `
172
170
  height: 48px;
173
171
  font-size: 20px;
174
172
  border-radius: 8px;
175
- color: rgb(255, 255, 255);
176
- background-color: rgb(20, 86, 224);
173
+ color: var(--clr-on-primary, #fff);
174
+ background-color: var(--clr-primary, #1456e0);
177
175
  }
178
176
  svg {
179
177
  user-select: none;
@@ -193,13 +191,6 @@ IxNewsFeed.styles = css `
193
191
  }
194
192
  .title {
195
193
  margin: 0;
196
- font-family: 'Open Sans', sans-serif;
197
- font-style: normal;
198
- font-weight: 400;
199
- font-size: 16px;
200
- line-height: 20px;
201
- letter-spacing: 0.15px;
202
- color: rgb(9, 34, 65);
203
194
  }
204
195
  .description {
205
196
  overflow-wrap: break-word;
@@ -207,22 +198,23 @@ IxNewsFeed.styles = css `
207
198
  overflow-x: hidden;
208
199
  text-overflow: ellipsis;
209
200
  margin: 0;
210
- font-family: 'Open Sans', sans-serif;
211
- font-style: normal;
212
- font-weight: 400;
213
- font-size: 14px;
214
- line-height: 24px;
215
- letter-spacing: 0.25px;
216
- color: rgb(9, 34, 65);
201
+ font-size: var(--text-small-size, 0.875rem);
202
+ letter-spacing: var(--text-small-letter-spacing, 0.0275em);
203
+ line-height: var(--text-small-line-height, 1.42857143em);
204
+ font-weight: var(--text-small-weight, normal);
205
+ font-family: var(--root-primary-font, sans-serif);
206
+ text-decoration: var(--text-small-decoration, none);
207
+ text-transform: var(--text-small-transform, none);
217
208
  }
218
209
  .caption {
219
210
  margin: 0px;
220
- font-family: 'Open Sans', sans-serif;
221
- font-weight: 400;
222
- font-style: normal;
223
- font-size: 12px;
224
- line-height: 16px;
225
- letter-spacing: 0.4px;
211
+ font-family: var(--text-caption-font, sans-serif);
212
+ font-size: var(--text-caption-size, 0.75rem);
213
+ letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
214
+ line-height: var(--text-caption-line-height, 1.33333333em);
215
+ font-weight: var(--text-caption-weight, normal);
216
+ text-transform: var(--text-caption-transform, none);
217
+ text-decoration: var(--text-caption-decoration, none);
226
218
  color: rgba(9, 34, 65, 0.7);
227
219
  }
228
220
  .ripple {
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;;QAwLuB,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;;AArOM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqLlB,AArLY,CAqLX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AA5L5B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAuOtB","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: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n li {\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n color: inherit;\n display: flex;\n -webkit-box-pack: start;\n justify-content: flex-start;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n text-align: left;\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n padding: 0px;\n }\n li:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n color: inherit;\n display: flex;\n -webkit-box-pack: start;\n justify-content: flex-start;\n -webkit-box-align: center;\n align-items: center;\n position: relative;\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n text-align: left;\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n padding: 0px;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n }\n a {\n display: grid;\n grid-template-columns: auto 1fr auto;\n padding: 12px 24px 12px 20px;\n -webkit-box-align: center;\n\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n border-radius: 0px;\n cursor: pointer;\n user-select: none;\n appearance: none;\n text-decoration: none;\n color: inherit;\n -webkit-box-flex: 1;\n flex-grow: 1;\n align-items: center;\n gap: 20px;\n text-align: start;\n }\n aa {\n display: grid;\n grid-template-columns: auto 1fr;\n padding: 8px 20px;\n }\n .icon {\n flex-shrink: 0;\n display: inline-flex;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n min-width: 48px;\n width: 48px;\n height: 48px;\n font-size: 20px;\n border-radius: 8px;\n color: rgb(255, 255, 255);\n background-color: rgb(20, 86, 224);\n }\n svg {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.5rem;\n }\n .details {\n gap: 0;\n min-width: 0px;\n display: flex;\n flex-direction: column;\n }\n .title {\n margin: 0;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n .description {\n overflow-wrap: break-word;\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n margin: 0;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.25px;\n color: rgb(9, 34, 65);\n }\n .caption {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n color: rgba(9, 34, 65, 0.7);\n }\n .ripple {\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n z-index: 0;\n inset: 0px;\n border-radius: inherit;\n }\n `;\n\n @property({ type: String }) header = 'title';\n\n @property({ type: Array }) data: 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,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"]}
package/dist/ix-status-counter.js CHANGED
@@ -56,23 +56,23 @@ IxStatusCounter.styles = css `
56
56
  }
57
57
  h2 {
58
58
  margin: 0px;
59
- font-family: 'Open Sans', sans-serif;
60
- font-style: normal;
61
- font-weight: 400;
62
- font-size: 16px;
63
- line-height: 20px;
64
- letter-spacing: 0.15px;
65
- color: rgb(9, 34, 65);
59
+ font-family: var(--text-default-font, sans-serif);
60
+ font-size: var(--text-default-size, 16px);
61
+ letter-spacing: var(--text-default-letter-spacing, 0.0275em);
62
+ line-height: var(--text-default-line-height, 1.75em);
63
+ font-weight: var(--text-default-weight, normal);
64
+ text-transform: var(--text-default-decoration, none);
65
+ text-decoration: var(--text-default-transform, none);
66
66
  }
67
67
  h3 {
68
68
  margin: 0px;
69
- font-family: 'Red Hat Display', sans-serif;
70
- font-style: normal;
71
- font-weight: bold;
72
- font-size: 34px;
73
- line-height: 40px;
74
- letter-spacing: 0.35px;
75
- color: rgb(9, 34, 65);
69
+ font-family: var(--text-page-title-font, sans-serif);
70
+ font-size: var(--text-page-title-size, 2.125rem);
71
+ letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);
72
+ line-height: var(--text-page-title-line-height, 1.17647059em);
73
+ font-weight: var(--text-page-title-weight, bold);
74
+ text-decoration: var(--text-page-title-decoration, none);
75
+ text-transform: var(--text-page-title-transform, none);
76
76
  }
77
77
  .content {
78
78
  display: flex;
@@ -99,7 +99,7 @@ IxStatusCounter.styles = css `
99
99
  height: 24px;
100
100
  }
101
101
  .info svg {
102
- stroke: rgb(20, 86, 224);
102
+ stroke: var(--clr-primary, #1456e0);
103
103
  width: 24px;
104
104
  height: 24px;
105
105
  animation-name: loading;
@@ -157,24 +157,24 @@ IxStatusCounter.styles = css `
157
157
  }
158
158
  h2 {
159
159
  margin: 0px;
160
- font-family: 'Open Sans', sans-serif;
161
- font-style: normal;
162
- font-weight: 400;
163
- font-size: 16px;
164
- line-height: 20px;
165
- letter-spacing: 0.15px;
166
- color: rgb(9, 34, 65);
160
+ font-family: var(--text-default-font, sans-serif);
161
+ font-size: var(--text-default-size, 16px);
162
+ letter-spacing: var(--text-default-letter-spacing, 0.0275em);
163
+ line-height: var(--text-default-line-height, 1.75em);
164
+ font-weight: var(--text-default-weight, normal);
165
+ text-transform: var(--text-default-decoration, none);
166
+ text-decoration: var(--text-default-transform, none);
167
167
  padding-left: 8px;
168
168
  }
169
169
  h3 {
170
170
  margin: 0px;
171
- font-family: 'Open Sans', sans-serif;
172
- font-style: normal;
173
- font-weight: 700;
174
- font-size: 14px;
175
- line-height: 24px;
176
- letter-spacing: 0.1px;
177
- color: rgb(9, 34, 65);
171
+ font-family: var(--root-primary-font, sans-serif);
172
+ font-size: var(--text-small-size, 0.875rem);
173
+ letter-spacing: var(--text-small-letter-spacing, 0.0275em);
174
+ line-height: var(--text-small-line-height, 1.42857143em);
175
+ font-weight: bold;
176
+ text-decoration: var(--text-small-decoration, none);
177
+ text-transform: var(--text-small-transform, none);
178
178
  }
179
179
  }
180
180
  `;