@digital-realty/ix-widget 1.0.1 → 1.0.3

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.
@@ -21,12 +21,13 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
21
21
  <div class="content">
22
22
  <div class="layout">
23
23
  ${this.data.map((item, index) => {
24
- const { value = 0, header = 'status', icon } = item;
24
+ const { value, header, icon, apiUrl } = item;
25
25
  return html `<ix-status-counter
26
26
  class="b${index + 1}"
27
27
  value=${value}
28
28
  header=${header}
29
29
  .icon=${iconMap[icon]}
30
+ .apiUrl=${apiUrl}
30
31
  >
31
32
  </ix-status-counter>`;
32
33
  })}
@@ -38,6 +39,7 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
38
39
  IxStatusCounterGroup.styles = css `
39
40
  .layout {
40
41
  display: grid;
42
+ grid-template-columns: repeat(2, minmax(0, 1fr));
41
43
  }
42
44
  @media (min-width: 1350px) {
43
45
  .layout {
@@ -52,25 +54,47 @@ IxStatusCounterGroup.styles = css `
52
54
  grid-column-end: 4;
53
55
  }
54
56
  .layout .b3 {
57
+ grid-column-start: 1;
58
+ grid-column-end: 2;
59
+ }
60
+ .layout .b4 {
61
+ grid-column-start: 2;
62
+ grid-column-end: 4;
63
+ }
64
+
65
+ ix-status-counter {
66
+ --ix-widget-padding: 1rem;
67
+ }
68
+
69
+ .layout.x5 {
70
+ grid-gap: 44px 32px;
71
+ }
72
+ .layout.x5 .b1 {
73
+ grid-column-start: 1;
74
+ grid-column-end: 2;
75
+ }
76
+ .layout.x5 .b2 {
77
+ grid-column-start: 2;
78
+ grid-column-end: 4;
79
+ }
80
+ .layout.x5 .b3 {
55
81
  grid-column-start: 4;
56
82
  grid-column-end: 6;
57
83
  }
58
- .layout .b4 {
84
+ .layout.x5 .b4 {
59
85
  grid-column-start: 1;
60
86
  grid-column-end: 3;
61
87
  }
62
- .layout .b5 {
88
+ .layout.x5 .b5 {
63
89
  grid-column-start: 3;
64
90
  grid-column-end: 6;
65
91
  }
66
- ix-status-counter {
67
- --ix-widget-padding: 1rem;
68
- }
69
92
  }
70
93
 
71
94
  @media (max-width: 1349px) {
72
95
  .layout {
73
96
  grid-gap: 0 24px;
97
+ grid-template-columns: repeat(2, minmax(0, 1fr));
74
98
  background: linear-gradient(
75
99
  90deg,
76
100
  rgba(0, 0, 0, 0) calc(50% - 1px),
@@ -89,16 +113,46 @@ IxStatusCounterGroup.styles = css `
89
113
  grid-row-start: 2;
90
114
  }
91
115
  .layout .b3 {
116
+ grid-column-start: 2;
117
+ grid-column-end: 3;
118
+ grid-row-start: 1;
119
+ }
120
+ .layout .b4 {
121
+ grid-column-start: 2;
122
+ grid-column-end: 3;
123
+ grid-row-start: 2;
124
+ }
125
+
126
+ .layout.x5 {
127
+ grid-gap: 0 24px;
128
+ background: linear-gradient(
129
+ 90deg,
130
+ rgba(0, 0, 0, 0) calc(50% - 1px),
131
+ rgba(9, 34, 65, 0.12) calc(50%),
132
+ rgba(0, 0, 0, 0) calc(50% + 1px)
133
+ );
134
+ }
135
+ .layout.x5 .b1 {
136
+ grid-column-start: 1;
137
+ grid-column-end: 2;
138
+ grid-row-start: 1;
139
+ }
140
+ .layout.x5 .b2 {
141
+ grid-column-start: 1;
142
+ grid-column-end: 2;
143
+ grid-row-start: 2;
144
+ }
145
+ .layout.x5 .b3 {
92
146
  grid-column-start: 1;
93
147
  grid-column-end: 2;
94
148
  grid-row-start: 3;
95
149
  }
96
- .layout .b4 {
150
+ .layout.x5 .b4 {
97
151
  grid-column-start: 2;
98
152
  grid-column-end: 3;
99
153
  grid-row-start: 1;
100
154
  }
101
- .layout .b5 {
155
+ .layout.x5 .b5 {
102
156
  grid-column-start: 2;
103
157
  grid-column-end: 3;
104
158
  grid-row-start: 2;
@@ -1 +1 @@
1
- {"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAwEsB,SAAI,GAAG,EAAE,CAAC;IAoBvC,CAAC;IAlBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YACpD,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;sBACX,KAAK;uBACJ,MAAM;sBACP,OAAO,CAAC,IAAI,CAAC;;iCAEF,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AA1FM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqElB,AArEY,CAqEX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AAxE1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA4FhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport { laptop, users, mySites, dcim, locations } from './assets/iconset.js';\n\nconst iconMap = {\n laptop,\n users,\n mySites,\n dcim,\n locations,\n};\n\n@customElement('ix-status-counter-group')\nexport class IxStatusCounterGroup extends LitElement {\n static styles = css`\n .layout {\n display: grid;\n }\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: 4;\n grid-column-end: 6;\n }\n .layout .b4 {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n .layout .b5 {\n grid-column-start: 3;\n grid-column-end: 6;\n }\n ix-status-counter {\n --ix-widget-padding: 1rem;\n }\n }\n\n @media (max-width: 1349px) {\n .layout {\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 .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: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n }\n .layout .b4 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n }\n .layout .b5 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n }\n }\n `;\n\n @property({ type: Array }) data = [];\n\n protected override render() {\n return html`<ix-widget type=\"status-counter-group\">\n <div class=\"content\">\n <div class=\"layout\">\n ${this.data.map((item, index) => {\n const { value = 0, header = 'status', icon } = item;\n return html`<ix-status-counter\n class=\"b${index + 1}\"\n value=${value}\n header=${header}\n .icon=${iconMap[icon]}\n >\n </ix-status-counter>`;\n })}\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
1
+ {"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QA6HsB,SAAI,GAAG,EAAE,CAAC;IAqBvC,CAAC;IAnBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7C,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;sBACX,KAAK;uBACJ,MAAM;sBACP,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;;iCAEG,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AAhJM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HlB,AA1HY,CA0HX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AA7H1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAkJhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport { laptop, users, mySites, dcim, locations } from './assets/iconset.js';\n\nconst iconMap = {\n laptop,\n users,\n mySites,\n dcim,\n locations,\n};\n\n@customElement('ix-status-counter-group')\nexport class IxStatusCounterGroup extends LitElement {\n static styles = css`\n .layout {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n @media (min-width: 1350px) {\n .layout {\n grid-gap: 44px 32px;\n }\n .layout .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout .b2 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n .layout .b3 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout .b4 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n\n ix-status-counter {\n --ix-widget-padding: 1rem;\n }\n\n .layout.x5 {\n grid-gap: 44px 32px;\n }\n .layout.x5 .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n .layout.x5 .b2 {\n grid-column-start: 2;\n grid-column-end: 4;\n }\n .layout.x5 .b3 {\n grid-column-start: 4;\n grid-column-end: 6;\n }\n .layout.x5 .b4 {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n .layout.x5 .b5 {\n grid-column-start: 3;\n grid-column-end: 6;\n }\n }\n\n @media (max-width: 1349px) {\n .layout {\n grid-gap: 0 24px;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) calc(50% - 1px),\n rgba(9, 34, 65, 0.12) calc(50%),\n rgba(0, 0, 0, 0) calc(50% + 1px)\n );\n }\n .layout .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n }\n .layout .b2 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n }\n .layout .b3 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n }\n .layout .b4 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n }\n\n .layout.x5 {\n grid-gap: 0 24px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) calc(50% - 1px),\n rgba(9, 34, 65, 0.12) calc(50%),\n rgba(0, 0, 0, 0) calc(50% + 1px)\n );\n }\n .layout.x5 .b1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n }\n .layout.x5 .b2 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n }\n .layout.x5 .b3 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n }\n .layout.x5 .b4 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n }\n .layout.x5 .b5 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n }\n }\n `;\n\n @property({ type: Array }) data = [];\n\n protected override render() {\n return html`<ix-widget type=\"status-counter-group\">\n <div class=\"content\">\n <div class=\"layout\">\n ${this.data.map((item, index) => {\n const { value, header, icon, apiUrl } = item;\n return html`<ix-status-counter\n class=\"b${index + 1}\"\n value=${value}\n header=${header}\n .icon=${iconMap[icon]}\n .apiUrl=${apiUrl}\n >\n </ix-status-counter>`;\n })}\n </div>\n </div>\n </ix-widget>`;\n }\n}\n"]}
@@ -3,10 +3,11 @@ import '@digital-realty/ix-icon/ix-icon.js';
3
3
  import './IxWidget.js';
4
4
  export declare class IxStatusCounter extends LitElement {
5
5
  static styles: import("lit").CSSResult;
6
- value: number | undefined;
6
+ value: number | undefined | string;
7
7
  header: string;
8
8
  icon: import("lit").TemplateResult<2>;
9
9
  apiUrl: string | undefined;
10
+ getData(): Promise<void>;
10
11
  connectedCallback(): void;
11
12
  protected render(): import("lit").TemplateResult<1>;
12
13
  }
@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
4
4
  import '@digital-realty/ix-icon/ix-icon.js';
5
5
  import './IxWidget.js';
6
6
  import { laptop, loader } from './assets/iconset.js';
7
+ import { getStatusData } from './api/api.js';
7
8
  let IxStatusCounter = class IxStatusCounter extends LitElement {
8
9
  constructor() {
9
10
  super(...arguments);
@@ -12,23 +13,30 @@ let IxStatusCounter = class IxStatusCounter extends LitElement {
12
13
  this.icon = laptop;
13
14
  this.apiUrl = undefined;
14
15
  }
16
+ async getData() {
17
+ if (this.apiUrl) {
18
+ this.value = await getStatusData(this.apiUrl);
19
+ }
20
+ }
15
21
  connectedCallback() {
16
- // super.connectedCallback();
17
- /* if (this.apiUrl) {
18
- fetch(this.apiUrl)
19
- .then((response) => response.json())
20
- .then((data) => {
21
- console.log(data);
22
- this.value = data.value;
23
- this.loading = false;
24
- });
25
- } */
22
+ // eslint-disable-next-line wc/guard-super-call
23
+ super.connectedCallback();
24
+ // console.log(this.apiUrl);
25
+ if (this.apiUrl) {
26
+ this.getData();
27
+ }
26
28
  }
27
29
  render() {
28
30
  return html `<ix-widget type="status-counter">
29
31
  <div class="content">
30
32
  <div class="info">
31
- ${this.value ? html `<h3>${this.value.toLocaleString()}</h3>` : loader}
33
+ ${this.value
34
+ ? html `<h3>
35
+ ${typeof this.value === 'number'
36
+ ? this.value.toLocaleString()
37
+ : this.value}
38
+ </h3>`
39
+ : html `<span class="loader">${loader}</span>`}
32
40
  <h2>${this.header}</h2>
33
41
  </div>
34
42
  <ix-icon>${this.icon}</ix-icon>
@@ -83,9 +91,28 @@ IxStatusCounter.styles = css `
83
91
  height: 60px;
84
92
  font-size: 36px;
85
93
  }
94
+ .loader {
95
+ width: 24px;
96
+ height: 24px;
97
+ }
86
98
  .info svg {
87
- stroke: blue;
99
+ stroke: rgb(20, 86, 224);
100
+ width: 24px;
101
+ height: 24px;
102
+ animation-name: loading;
103
+ animation-duration: 1000ms;
104
+ animation-iteration-count: infinite;
105
+ animation-timing-function: linear;
88
106
  }
107
+ @keyframes loading {
108
+ from {
109
+ transform: rotate(0deg);
110
+ }
111
+ to {
112
+ transform: rotate(360deg);
113
+ }
114
+ }
115
+
89
116
  svg {
90
117
  width: 24px;
91
118
  margin: auto;
@@ -96,6 +123,10 @@ IxStatusCounter.styles = css `
96
123
  width: 36px;
97
124
  margin: auto;
98
125
  }
126
+ .info svg {
127
+ width: 36px;
128
+ height: 36px;
129
+ }
99
130
  }
100
131
 
101
132
  @media (max-width: 1349px) {
@@ -145,7 +176,7 @@ IxStatusCounter.styles = css `
145
176
  }
146
177
  `;
147
178
  __decorate([
148
- property({ type: Number })
179
+ property({ type: String })
149
180
  ], IxStatusCounter.prototype, "value", void 0);
150
181
  __decorate([
151
182
  property({ type: String })
@@ -1 +1 @@
1
- {"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG9C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA8GuB,UAAK,GAAuB,SAAS,CAAC;QAEtC,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAuB,SAAS,CAAC;IA0BrE,CAAC;IAxBC,iBAAiB;QACf,6BAA6B;QAC7B;;;;;;;;YAQI;IACN,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM;gBAC/D,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AA5IM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GlB,AA3GY,CA2GX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuC;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAwC;AApHxD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA8I3B","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 }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n h3 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 40px;\n letter-spacing: 0.35px;\n color: rgb(9, 34, 65);\n }\n .content {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n }\n ix-icon {\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n display: flex;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n width: 60px;\n height: 60px;\n font-size: 36px;\n }\n .info svg {\n stroke: blue;\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 }\n\n @media (max-width: 1349px) {\n .content {\n display: flex;\n flex-direction: row-reverse;\n -webkit-box-align: center;\n align-items: center;\n justify-content: left;\n }\n ix-icon {\n width: 24px;\n height: 24px;\n }\n\n ix-widget {\n --ix-widget-background: white;\n }\n .info {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n flex-direction: row-reverse;\n }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n padding-left: 8px;\n }\n h3 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgb(9, 34, 65);\n }\n }\n `;\n\n @property({ type: Number }) value: number | undefined = undefined;\n\n @property({ type: String }) header = 'status';\n\n @property({ type: Object }) icon = laptop;\n\n @property({ type: String }) apiUrl: string | undefined = undefined;\n\n connectedCallback() {\n // super.connectedCallback();\n /* if (this.apiUrl) {\n fetch(this.apiUrl)\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n this.value = data.value;\n this.loading = false; \n }); \n } */\n }\n\n protected override render() {\n return html`<ix-widget type=\"status-counter\">\n <div class=\"content\">\n <div class=\"info\">\n ${this.value ? html`<h3>${this.value.toLocaleString()}</h3>` : loader}\n <h2>${this.header}</h2>\n </div>\n <ix-icon>${this.icon}</ix-icon>\n </div>\n </ix-widget>`;\n }\n}\n"]}
1
+ {"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAqIuB,UAAK,GAAgC,SAAS,CAAC;QAE/C,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAuB,SAAS,CAAC;IAkCrE,CAAC;IAhCC,KAAK,CAAC,OAAO;QACX,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEQ,iBAAiB;QACxB,+CAA+C;QAC/C,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4BAA4B;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;kBACA,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC9B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;oBACV;YACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,SAAS;gBACzC,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AA3KM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkIlB,AAlIY,CAkIX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAwC;AA3IxD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA6K3B","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { laptop, loader } from './assets/iconset.js';\nimport { getStatusData } from './api/api.js';\n\n@customElement('ix-status-counter')\nexport class IxStatusCounter extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-background: rgb(200, 223, 250);\n --ix-widget-padding: 36.5px 20px 36.5px 24px;\n --ix-icon-font-size: 5rem;\n --ix-icon-line-height: 1;\n }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n }\n h3 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 40px;\n letter-spacing: 0.35px;\n color: rgb(9, 34, 65);\n }\n .content {\n display: flex;\n -webkit-box-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n }\n ix-icon {\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n display: flex;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n width: 60px;\n height: 60px;\n font-size: 36px;\n }\n .loader {\n width: 24px;\n height: 24px;\n }\n .info svg {\n stroke: rgb(20, 86, 224);\n width: 24px;\n height: 24px;\n animation-name: loading;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n @keyframes loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n svg {\n width: 24px;\n margin: auto;\n }\n\n @media (min-width: 1200px) {\n svg {\n width: 36px;\n margin: auto;\n }\n .info svg {\n width: 36px;\n height: 36px;\n }\n }\n\n @media (max-width: 1349px) {\n .content {\n display: flex;\n flex-direction: row-reverse;\n -webkit-box-align: center;\n align-items: center;\n justify-content: left;\n }\n ix-icon {\n width: 24px;\n height: 24px;\n }\n\n ix-widget {\n --ix-widget-background: white;\n }\n .info {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n flex-direction: row-reverse;\n }\n h2 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0.15px;\n color: rgb(9, 34, 65);\n padding-left: 8px;\n }\n h3 {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 700;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgb(9, 34, 65);\n }\n }\n `;\n\n @property({ type: String }) value: number | undefined | string = undefined;\n\n @property({ type: String }) header = 'status';\n\n @property({ type: Object }) icon = laptop;\n\n @property({ type: String }) apiUrl: string | undefined = undefined;\n\n async getData() {\n if (this.apiUrl) {\n this.value = await getStatusData(this.apiUrl);\n }\n }\n\n override connectedCallback() {\n // eslint-disable-next-line wc/guard-super-call\n super.connectedCallback();\n // console.log(this.apiUrl);\n if (this.apiUrl) {\n this.getData();\n }\n }\n\n protected override render() {\n return html`<ix-widget type=\"status-counter\">\n <div class=\"content\">\n <div class=\"info\">\n ${this.value\n ? html`<h3>\n ${typeof this.value === 'number'\n ? this.value.toLocaleString()\n : this.value}\n </h3>`\n : html`<span class=\"loader\">${loader}</span>`}\n <h2>${this.header}</h2>\n </div>\n <ix-icon>${this.icon}</ix-icon>\n </div>\n </ix-widget>`;\n }\n}\n"]}
@@ -35,17 +35,16 @@ let IxTableData = class IxTableData extends LitElement {
35
35
  IxTableData.styles = css `
36
36
  ix-widget {
37
37
  --ix-widget-padding: 0;
38
- --ix-widget-border: 1px solid #e0e0e0;
39
38
  }
40
39
  .header {
41
- height: 56px;
42
40
  display: flex;
43
41
  -webkit-box-pack: justify;
44
42
  justify-content: space-between;
45
43
  -webkit-box-align: center;
46
44
  align-items: center;
47
- padding-right: 7px;
48
45
  width: 100%;
46
+ width: -webkit-fill-available;
47
+ margin: 0px -15px 0px -3px;
49
48
  }
50
49
  h2 {
51
50
  margin: 0px;
@@ -1 +1 @@
1
- {"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.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,oCAAoC,CAAC;AAC5C,OAAO,gBAAgB,CAAC;AAGjB,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAkDsB,YAAO,GAAG,EAAE,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAET,aAAQ,GAAG,CAAC,CAAC;QAEb,WAAM,GAAG,OAAO,CAAC;IAqB/C,CAAC;IAnBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,IAAI,CAAC,MAAM;wBACZ,IAAI;;;gBAGZ,IAAI,CAAC,MAAM;;;;;;;iBAOV,CAAC;IAChB,CAAC;;AA3EM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ClB,AA/CY,CA+CX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAc;AAEb;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAW;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AAxDlC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA6EvB","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-grid/ix-grid.js';\nimport './ix-widget.js';\n\n@customElement('ix-table-data')\nexport class IxTableData extends LitElement {\n static styles = css`\n ix-widget {\n --ix-widget-padding: 0;\n --ix-widget-border: 1px solid #e0e0e0;\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 padding-right: 7px;\n width: 100%;\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 .status {\n display: flex;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n padding: 2px 12px;\n width: 185px;\n height: 28px;\n left: 0px;\n top: 0px;\n border-radius: 68px;\n flex: 0 0 auto;\n order: 0;\n -webkit-box-flex: 0;\n color: white;\n -webkit-box-pack: center;\n justify-content: center;\n background: rgb(76, 175, 80);\n }\n ix-grid {\n --_cell-padding: 0;\n }\n `;\n\n @property({ type: Array }) columns = [];\n\n @property({ type: Array }) rows = [];\n\n @property({ type: Number }) pageSize = 5;\n\n @property({ type: String }) header = 'title';\n\n protected override render() {\n return html`<ix-widget>\n <ix-grid\n .columns=${this.columns}\n .rows=${this.rows}\n .pageSize=${this.pageSize}\n .rowLimit=${this.rows.length}\n ?hide-filters=${true}\n add-params-to-url=\"false\"\n ><div slot=\"header\" class=\"header\">\n <h2>${this.header}</h2>\n <ix-button type=\"button\" has-icon trailing-icon appearance=\"text\">\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View all\n </ix-button>\n </div>\n </ix-grid>\n </ix-widget>`;\n }\n}\n"]}
1
+ {"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.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,oCAAoC,CAAC;AAC5C,OAAO,gBAAgB,CAAC;AAGjB,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiDsB,YAAO,GAAG,EAAE,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAET,aAAQ,GAAG,CAAC,CAAC;QAEb,WAAM,GAAG,OAAO,CAAC;IAqB/C,CAAC;IAnBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,IAAI,CAAC,MAAM;wBACZ,IAAI;;;gBAGZ,IAAI,CAAC,MAAM;;;;;;;iBAOV,CAAC;IAChB,CAAC;;AA1EM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ClB,AA9CY,CA8CX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAc;AAEb;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAW;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AAvDlC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA4EvB","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-grid/ix-grid.js';\nimport './ix-widget.js';\n\n@customElement('ix-table-data')\nexport class IxTableData extends LitElement {\n static styles = css`\n ix-widget {\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 width: 100%;\n width: -webkit-fill-available;\n margin: 0px -15px 0px -3px;\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 .status {\n display: flex;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n padding: 2px 12px;\n width: 185px;\n height: 28px;\n left: 0px;\n top: 0px;\n border-radius: 68px;\n flex: 0 0 auto;\n order: 0;\n -webkit-box-flex: 0;\n color: white;\n -webkit-box-pack: center;\n justify-content: center;\n background: rgb(76, 175, 80);\n }\n ix-grid {\n --_cell-padding: 0;\n }\n `;\n\n @property({ type: Array }) columns = [];\n\n @property({ type: Array }) rows = [];\n\n @property({ type: Number }) pageSize = 5;\n\n @property({ type: String }) header = 'title';\n\n protected override render() {\n return html`<ix-widget>\n <ix-grid\n .columns=${this.columns}\n .rows=${this.rows}\n .pageSize=${this.pageSize}\n .rowLimit=${this.rows.length}\n ?hide-filters=${true}\n add-params-to-url=\"false\"\n ><div slot=\"header\" class=\"header\">\n <h2>${this.header}</h2>\n <ix-button type=\"button\" has-icon trailing-icon appearance=\"text\">\n <ix-icon slot=\"icon\">chevron_right</ix-icon>\n View all\n </ix-button>\n </div>\n </ix-grid>\n </ix-widget>`;\n }\n}\n"]}
@@ -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:36.5px 20px 36.5px 24px}}[type=status-counter-group].card{--ix-widget-padding:0;--ix-widget-background:transparent}@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-2].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:36.5px 20px 36.5px 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-2].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,20 +1,8 @@
1
1
  import { css } from 'lit';
2
2
  export const IxLaunchpadStyles = css `
3
- .outer {
4
- height: 100vh;
5
- background-color: rgb(245, 247, 255);
6
- }
7
- main {
8
- height: 100%;
3
+ .wrapper {
9
4
  margin-left: 0px;
10
- margin-top: 72px;
11
- margin-bottom: 72px;
12
5
  transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
13
- }
14
- .inner {
15
- height: 100%;
16
- width: 100%;
17
- overflow-y: overlay;
18
6
  display: flex;
19
7
  flex-direction: column;
20
8
  }
@@ -134,9 +122,6 @@ export const IxLaunchpadStyles = css `
134
122
  align-items: center;
135
123
  gap: 21px;
136
124
  }
137
- main {
138
- margin-top: 88px;
139
- }
140
125
  .container {
141
126
  padding: 0px;
142
127
  }
@@ -166,8 +151,7 @@ export const IxLaunchpadStyles = css `
166
151
  padding-top: 27px;
167
152
  }
168
153
  .container {
169
- margin-top: -100px;
170
- background-image: url(/images/buildings-placeholder.png);
154
+ /* background-image: url(/images/buildings-placeholder.png); */
171
155
  background-repeat: no-repeat;
172
156
  background-position: right bottom;
173
157
  }
@@ -177,25 +161,14 @@ export const IxLaunchpadStyles = css `
177
161
  }
178
162
  .content {
179
163
  gap: 44px;
180
- overflow: auto;
181
- max-height: 100vh;
182
- padding-top: 120px;
183
- padding-bottom: 32px;
184
- padding-right: 44px;
185
- }
186
- .container {
187
- margin-top: -100px;
188
- background-image: url(/images/buildings-placeholder.png);
189
- background-repeat: no-repeat;
190
- background-position: right bottom;
191
- }
192
- main {
193
- margin-top: 0px;
194
- /* margin-left: 112px; */
195
164
  }
196
165
  }
197
166
 
198
167
  @media (min-width: 1350px) {
168
+ .side-nav {
169
+ position: sticky;
170
+ top: 0;
171
+ }
199
172
  .container {
200
173
  display: grid;
201
174
  grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);
@@ -203,9 +176,6 @@ export const IxLaunchpadStyles = css `
203
176
  .container > nav {
204
177
  overflow: auto;
205
178
  max-height: 100vh;
206
- padding-top: 120px;
207
- padding-bottom: 32px;
208
- padding-right: 20px;
209
179
  }
210
180
  .container .content > nav {
211
181
  display: none;
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxLaunchpadStyles = css`\n .outer {\n height: 100vh;\n background-color: rgb(245, 247, 255);\n }\n main {\n height: 100%;\n margin-left: 0px;\n margin-top: 72px;\n margin-bottom: 72px;\n transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;\n }\n .inner {\n height: 100%;\n width: 100%;\n overflow-y: overlay;\n display: flex;\n flex-direction: column;\n }\n header {\n min-height: 60px;\n background-color: rgba(245, 247, 255, 0.85);\n backdrop-filter: blur(6px);\n display: flex;\n flex-flow: column-reverse wrap;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n gap: 20px;\n padding: 16px 24px 16px 7px;\n position: sticky;\n top: 0px;\n right: 0px;\n z-index: 1000;\n }\n header > div {\n margin-right: auto;\n display: flex;\n -webkit-box-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n align-items: center;\n }\n header > div > h1 {\n display: block;\n font-size: 2em;\n margin-block-start: 0.67em;\n margin-block-end: 0.67em;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n font-weight: bold;\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 40px;\n letter-spacing: 0.35px;\n color: rgb(9, 34, 65);\n }\n h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 32px;\n letter-spacing: 0em;\n color: rgb(9, 34, 65);\n margin-bottom: 24px;\n }\n .content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n nav {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n section {\n flex: 1 1 0%;\n padding-right: 0px;\n padding-left: 0px;\n padding-bottom: 64px;\n }\n .container {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-left: 16px;\n padding-right: 16px;\n gap: 32px;\n }\n\n .resources {\n margin-bottom: 44px;\n }\n .news-info .newsAndPromotions {\n display: flex;\n gap: 44px;\n flex-wrap: wrap;\n }\n\n @media (max-width: 1199px) {\n ix-table-data,\n ix-action-list,\n .news-info {\n display: none;\n }\n }\n\n @media (min-width: 800px) and (max-width: 1349px) {\n nav {\n display: flex;\n align-items: flex-start;\n gap: 32px;\n }\n nav > * {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n }\n\n @media (min-width: 600px) {\n header {\n min-height: 100px;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n gap: 21px;\n }\n main {\n margin-top: 88px;\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 margin-top: -100px;\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 overflow: auto;\n max-height: 100vh;\n padding-top: 120px;\n padding-bottom: 32px;\n padding-right: 44px;\n }\n .container {\n margin-top: -100px;\n background-image: url(/images/buildings-placeholder.png);\n background-repeat: no-repeat;\n background-position: right bottom;\n }\n main {\n margin-top: 0px;\n /* margin-left: 112px; */\n }\n }\n\n @media (min-width: 1350px) {\n .container {\n display: grid;\n grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\n }\n .container > nav {\n overflow: auto;\n max-height: 100vh;\n padding-top: 120px;\n padding-bottom: 32px;\n padding-right: 20px;\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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxLaunchpadStyles = css`\n .wrapper {\n margin-left: 0px;\n transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;\n display: flex;\n flex-direction: column;\n }\n header {\n min-height: 60px;\n background-color: rgba(245, 247, 255, 0.85);\n backdrop-filter: blur(6px);\n display: flex;\n flex-flow: column-reverse wrap;\n -webkit-box-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n align-items: center;\n gap: 20px;\n padding: 16px 24px 16px 7px;\n position: sticky;\n top: 0px;\n right: 0px;\n z-index: 1000;\n }\n header > div {\n margin-right: auto;\n display: flex;\n -webkit-box-pack: start;\n justify-content: start;\n -webkit-box-align: center;\n align-items: center;\n }\n header > div > h1 {\n display: block;\n font-size: 2em;\n margin-block-start: 0.67em;\n margin-block-end: 0.67em;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n font-weight: bold;\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 34px;\n line-height: 40px;\n letter-spacing: 0.35px;\n color: rgb(9, 34, 65);\n }\n h2 {\n margin: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 24px;\n line-height: 32px;\n letter-spacing: 0em;\n color: rgb(9, 34, 65);\n margin-bottom: 24px;\n }\n .content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n nav {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n section {\n flex: 1 1 0%;\n padding-right: 0px;\n padding-left: 0px;\n padding-bottom: 64px;\n }\n .container {\n display: flex;\n flex-direction: column;\n padding-top: 0px;\n padding-left: 16px;\n padding-right: 16px;\n gap: 32px;\n }\n\n .resources {\n margin-bottom: 44px;\n }\n .news-info .newsAndPromotions {\n display: flex;\n gap: 44px;\n flex-wrap: wrap;\n }\n\n @media (max-width: 1199px) {\n ix-table-data,\n ix-action-list,\n .news-info {\n display: none;\n }\n }\n\n @media (min-width: 800px) and (max-width: 1349px) {\n nav {\n display: flex;\n align-items: flex-start;\n gap: 32px;\n }\n nav > * {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n }\n\n @media (min-width: 600px) {\n header {\n min-height: 100px;\n flex-direction: row;\n -webkit-box-align: center;\n align-items: center;\n gap: 21px;\n }\n .container {\n padding: 0px;\n }\n }\n @media (min-width: 900px) {\n .content {\n gap: 32px;\n }\n main {\n margin-left: 0px;\n margin-bottom: 0px;\n }\n header {\n padding-top: 12px;\n min-height: 92px;\n padding-bottom: 8px;\n }\n section {\n padding-right: 32px;\n padding-bottom: 48px;\n }\n }\n @media (min-width: 1200px) {\n header {\n min-height: 100px;\n padding-bottom: 16px;\n padding-top: 27px;\n }\n .container {\n /* background-image: url(/images/buildings-placeholder.png); */\n background-repeat: no-repeat;\n background-position: right bottom;\n }\n section {\n padding-right: 0px;\n padding-bottom: 0px;\n }\n .content {\n gap: 44px;\n }\n }\n\n @media (min-width: 1350px) {\n .side-nav {\n position: sticky;\n top: 0;\n }\n .container {\n display: grid;\n grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\n }\n .container > nav {\n overflow: auto;\n max-height: 100vh;\n }\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"]}
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": "1.0.1",
6
+ "version": "1.0.3",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -37,6 +37,7 @@
37
37
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
38
38
  },
39
39
  "dependencies": {
40
+ "@adobe/lit-mobx": "^2.2.2",
40
41
  "@digital-realty/ix-button": "^3.2.31",
41
42
  "@digital-realty/ix-grid": "^1.0.29",
42
43
  "@digital-realty/ix-icon": "^1.0.36",
@@ -47,6 +48,7 @@
47
48
  "date-fns": "^3.6.0",
48
49
  "lit": "^2.0.2",
49
50
  "markdown-it": "^14.1.0",
51
+ "mobx-persist-store": "^1.1.4",
50
52
  "react": "^18.2.0"
51
53
  },
52
54
  "devDependencies": {
@@ -124,5 +126,5 @@
124
126
  "README.md",
125
127
  "LICENSE"
126
128
  ],
127
- "gitHead": "ee9b46e8efa1df8ef9dd22ec6f7235bc22c69d6d"
129
+ "gitHead": "44ce2529c6dd1337b54ae13ed83b1a4a43969404"
128
130
  }