@uptime.link/statuspage 1.0.72

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 (51) hide show
  1. package/dist_bundle/bundle.js +752 -0
  2. package/dist_bundle/bundle.js.map +7 -0
  3. package/dist_ts_web/00_commitinfo_data.d.ts +8 -0
  4. package/dist_ts_web/00_commitinfo_data.js +9 -0
  5. package/dist_ts_web/elements/index.d.ts +7 -0
  6. package/dist_ts_web/elements/index.js +8 -0
  7. package/dist_ts_web/elements/internal/uplinternal-miniheading.d.ts +4 -0
  8. package/dist_ts_web/elements/internal/uplinternal-miniheading.js +35 -0
  9. package/dist_ts_web/elements/upl-statuspage-assetsselector.d.ts +13 -0
  10. package/dist_ts_web/elements/upl-statuspage-assetsselector.js +58 -0
  11. package/dist_ts_web/elements/upl-statuspage-footer.d.ts +16 -0
  12. package/dist_ts_web/elements/upl-statuspage-footer.js +73 -0
  13. package/dist_ts_web/elements/upl-statuspage-header.d.ts +15 -0
  14. package/dist_ts_web/elements/upl-statuspage-header.js +109 -0
  15. package/dist_ts_web/elements/upl-statuspage-incidents.d.ts +18 -0
  16. package/dist_ts_web/elements/upl-statuspage-incidents.js +90 -0
  17. package/dist_ts_web/elements/upl-statuspage-statusbar.d.ts +12 -0
  18. package/dist_ts_web/elements/upl-statuspage-statusbar.js +55 -0
  19. package/dist_ts_web/elements/upl-statuspage-statusdetails.d.ts +13 -0
  20. package/dist_ts_web/elements/upl-statuspage-statusdetails.js +90 -0
  21. package/dist_ts_web/elements/upl-statuspage-statusmonth.d.ts +13 -0
  22. package/dist_ts_web/elements/upl-statuspage-statusmonth.js +125 -0
  23. package/dist_ts_web/index.d.ts +1 -0
  24. package/dist_ts_web/index.js +2 -0
  25. package/dist_ts_web/pages/index.d.ts +1 -0
  26. package/dist_ts_web/pages/index.js +2 -0
  27. package/dist_ts_web/pages/page1.d.ts +1 -0
  28. package/dist_ts_web/pages/page1.js +11 -0
  29. package/dist_ts_web/plugins.d.ts +3 -0
  30. package/dist_ts_web/plugins.js +4 -0
  31. package/dist_watch/bundle.js +28250 -0
  32. package/dist_watch/bundle.js.map +7 -0
  33. package/dist_watch/index.html +35 -0
  34. package/npmextra.json +19 -0
  35. package/package.json +47 -0
  36. package/readme.hints.md +0 -0
  37. package/readme.md +32 -0
  38. package/ts_web/00_commitinfo_data.ts +8 -0
  39. package/ts_web/elements/index.ts +7 -0
  40. package/ts_web/elements/internal/uplinternal-miniheading.ts +27 -0
  41. package/ts_web/elements/upl-statuspage-assetsselector.ts +63 -0
  42. package/ts_web/elements/upl-statuspage-footer.ts +72 -0
  43. package/ts_web/elements/upl-statuspage-header.ts +110 -0
  44. package/ts_web/elements/upl-statuspage-incidents.ts +90 -0
  45. package/ts_web/elements/upl-statuspage-statusbar.ts +51 -0
  46. package/ts_web/elements/upl-statuspage-statusdetails.ts +95 -0
  47. package/ts_web/elements/upl-statuspage-statusmonth.ts +130 -0
  48. package/ts_web/index.ts +1 -0
  49. package/ts_web/pages/index.ts +1 -0
  50. package/ts_web/pages/page1.ts +11 -0
  51. package/ts_web/plugins.ts +7 -0
package/dist_watch/index.html ADDED
@@ -0,0 +1,35 @@
1
+ <!--gitzone element-->
2
+ <!-- made by Task Venture Capital GmbH -->
3
+ <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
4
+ <html lang="en">
5
+ <head>
6
+ <!--Lets set some basic meta tags-->
7
+ <meta
8
+ name="viewport"
9
+ content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
10
+ />
11
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
12
+
13
+ <link rel="preconnect" href="https://rsms.me/">
14
+ <link rel="preconnect" href="https://fonts.googleapis.com">
15
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
17
+ <link
18
+ crossorigin="anonymous"
19
+ href="https://fonts.googleapis.com/icon?family=Material+Icons"
20
+ rel="stylesheet"
21
+ />
22
+ <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
23
+
24
+ <style>
25
+ body {
26
+ margin: 0px;
27
+ background: #222222;
28
+ }
29
+ </style>
30
+
31
+ <script type="module" src="/bundle.js"></script>
32
+ </head>
33
+ <body>
34
+ </body>
35
+ </html>
package/npmextra.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "gitzone": {
3
+ "projectType": "wcc",
4
+ "module": {
5
+ "githost": "code.foss.global",
6
+ "gitscope": "uptime.link",
7
+ "gitrepo": "statuspage",
8
+ "description": "a catalog with webcomponents for uptimelink dashboard",
9
+ "npmPackagename": "@uptime.link/statuspage",
10
+ "license": "MIT",
11
+ "projectDomain": "uptime.link"
12
+ }
13
+ },
14
+ "npmci": {
15
+ "npmGlobalTools": [],
16
+ "npmAccessLevel": "private",
17
+ "npmRegistryUrl": "verdaccio.lossless.one"
18
+ }
19
+ }
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@uptime.link/statuspage",
3
+ "version": "1.0.72",
4
+ "private": false,
5
+ "description": "a catalog with webcomponents for uptimelink dashboard",
6
+ "main": "dist_ts_web/index.js",
7
+ "typings": "dist_ts_web/index.d.ts",
8
+ "type": "module",
9
+ "author": "Lossless GmbH",
10
+ "license": "UNLICENSED",
11
+ "dependencies": {
12
+ "@design.estate/dees-domtools": "^2.0.1",
13
+ "@design.estate/dees-element": "^2.0.4",
14
+ "@design.estate/dees-wcctools": "^1.0.73",
15
+ "@uptime.link/interfaces": "^2.0.21"
16
+ },
17
+ "devDependencies": {
18
+ "@git.zone/tsbuild": "^2.1.61",
19
+ "@git.zone/tsbundle": "^2.0.7",
20
+ "@git.zone/tsrun": "^1.2.39",
21
+ "@git.zone/tswatch": "^2.0.5",
22
+ "@push.rocks/projectinfo": "^5.0.1",
23
+ "@push.rocks/smartenv": "^5.0.0",
24
+ "@types/node": "^18.11.18"
25
+ },
26
+ "files": [
27
+ "ts/**/*",
28
+ "ts_web/**/*",
29
+ "dist/**/*",
30
+ "dist_*/**/*",
31
+ "dist_ts/**/*",
32
+ "dist_ts_web/**/*",
33
+ "assets/**/*",
34
+ "cli.js",
35
+ "npmextra.json",
36
+ "readme.md"
37
+ ],
38
+ "browserslist": [
39
+ "last 1 Chrome versions"
40
+ ],
41
+ "scripts": {
42
+ "test": "npm run build",
43
+ "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
44
+ "watch": "tswatch element",
45
+ "buildDocs": "tsdoc"
46
+ }
47
+ }
package/readme.hints.md ADDED
File without changes
package/readme.md ADDED
@@ -0,0 +1,32 @@
1
+ # @uptime.link/private/catalog
2
+ a catalog with webcomponents for uptimelink dashboard
3
+
4
+ ## Availabililty and Links
5
+ * [npmjs.org (npm package)](https://www.npmjs.com/package/@uptimelink_private/catalog)
6
+ * [gitlab.com (source)](https://gitlab.com/uptimelink/private/catalog)
7
+ * [github.com (source mirror)](https://github.com/uptimelink/private/catalog)
8
+ * [docs (typedoc)](https://uptimelink/private.gitlab.io/catalog/)
9
+
10
+ ## Status for master
11
+
12
+ Status Category | Status Badge
13
+ -- | --
14
+ GitLab Pipelines | [![pipeline status](https://gitlab.com/uptimelink/private/catalog/badges/master/pipeline.svg)](https://lossless.cloud)
15
+ GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/uptimelink/private/catalog/badges/master/coverage.svg)](https://lossless.cloud)
16
+ npm | [![npm downloads per month](https://badgen.net/npm/dy/@uptimelink_private/catalog)](https://lossless.cloud)
17
+ Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/uptimelink/private/catalog)](https://lossless.cloud)
18
+ TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
19
+ node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
20
+ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
21
+ PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@uptimelink_private/catalog)](https://lossless.cloud)
22
+ PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@uptimelink_private/catalog)](https://lossless.cloud)
23
+ BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@uptimelink_private/catalog)](https://lossless.cloud)
24
+
25
+ ## Usage
26
+
27
+ Use TypeScript for best in class intellisense
28
+ For further information read the linked docs at the top of this readme.
29
+
30
+ ## Legal
31
+ > UNLICENSED licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
32
+ | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
package/ts_web/00_commitinfo_data.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * autocreated commitinfo by @push.rocks/commitinfo
3
+ */
4
+ export const commitinfo = {
5
+ name: '@uptime.link/statuspage',
6
+ version: '1.0.72',
7
+ description: 'a catalog with webcomponents for uptimelink dashboard'
8
+ }
package/ts_web/elements/index.ts ADDED
@@ -0,0 +1,7 @@
1
+ export * from './upl-statuspage-assetsselector.js';
2
+ export * from './upl-statuspage-footer.js';
3
+ export * from './upl-statuspage-header.js';
4
+ export * from './upl-statuspage-incidents.js';
5
+ export * from './upl-statuspage-statusbar.js';
6
+ export * from './upl-statuspage-statusdetails.js';
7
+ export * from './upl-statuspage-statusmonth.js';
package/ts_web/elements/internal/uplinternal-miniheading.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
2
+
3
+ import * as domtools from '@design.estate/dees-domtools';
4
+
5
+ @customElement('uplinternal-miniheading')
6
+ export class UplinternalMiniheading extends DeesElement {
7
+ public render(): TemplateResult {
8
+ return html`
9
+ ${domtools.elementBasic.styles}
10
+ <style>
11
+ :host {
12
+ display: block;
13
+ font-family: Inter;
14
+ }
15
+
16
+ h5 {
17
+ display: block;
18
+ max-width: 900px;
19
+ margin: 0px auto;
20
+ padding: 0px 0px 10px 0px;
21
+ color: #707070;
22
+ }
23
+ </style>
24
+ <h5>${this.textContent}</h5>
25
+ `;
26
+ }
27
+ }
package/ts_web/elements/upl-statuspage-assetsselector.ts ADDED
@@ -0,0 +1,63 @@
1
+ import {
2
+ DeesElement,
3
+ property,
4
+ html,
5
+ customElement,
6
+ type TemplateResult,
7
+ cssManager,
8
+ css,
9
+ } from '@design.estate/dees-element';
10
+ import * as domtools from '@design.estate/dees-domtools';
11
+
12
+ import './internal/uplinternal-miniheading.js';
13
+
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'upl-statuspage-assetsselector': UplStatuspageAssetsselector;
17
+ }
18
+ }
19
+
20
+ @customElement('upl-statuspage-assetsselector')
21
+ export class UplStatuspageAssetsselector extends DeesElement {
22
+ public static demo = () => html`
23
+ <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
24
+ `;
25
+
26
+ constructor() {
27
+ super();
28
+ }
29
+
30
+ public static styles = [
31
+ cssManager.defaultStyles,
32
+ css`
33
+ :host {
34
+ padding: 0px 0px 15px 0px;
35
+ display: block;
36
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
37
+ font-family: Inter;
38
+ color: #fff;
39
+ }
40
+
41
+ .mainbox {
42
+ margin: auto;
43
+ max-width: 900px;
44
+ text-align: center;
45
+ height: 50px;
46
+ border-radius: 3px;
47
+ background: ${cssManager.bdTheme('#ffffff', '#333333')};;
48
+ }
49
+ `,
50
+ ]
51
+
52
+ public render(): TemplateResult {
53
+ return html`
54
+ <style>
55
+
56
+ </style>
57
+ <uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
58
+ <div class="mainbox">
59
+ Hello!
60
+ </div>
61
+ `;
62
+ }
63
+ }
package/ts_web/elements/upl-statuspage-footer.ts ADDED
@@ -0,0 +1,72 @@
1
+ import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
2
+ import * as domtools from '@design.estate/dees-domtools';
3
+
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'upl-statuspage-footer': UplStatuspageFooter;
7
+ }
8
+ }
9
+
10
+ @customElement('upl-statuspage-footer')
11
+ export class UplStatuspageFooter extends DeesElement {
12
+ // STATIC
13
+ public static demo = () => html`
14
+ <upl-statuspage-footer></upl-statuspage-footer>
15
+ `;
16
+
17
+ // INSTANCE
18
+ @property()
19
+ public legalInfo: string = "https://lossless.gmbh";
20
+
21
+ @property({
22
+ type: Boolean
23
+ })
24
+ public whitelabel = false;
25
+
26
+
27
+ constructor() {
28
+ super();
29
+ }
30
+
31
+ public static styles = [
32
+ domtools.elementBasic.staticStyles,
33
+ css`
34
+ :host {
35
+ display: block;
36
+ background: ${cssManager.bdTheme('#ffffff', '#000000')};
37
+ font-family: Inter;
38
+ color: ${cssManager.bdTheme('#333333', '#ffffff')};
39
+ }
40
+
41
+ .mainbox {
42
+ max-width: 900px;
43
+ margin: auto;
44
+ padding-top: 20px;
45
+ padding-bottom: 20px;
46
+ }
47
+
48
+ `
49
+ ]
50
+
51
+ public render(): TemplateResult {
52
+ return html`
53
+ ${domtools.elementBasic.styles}
54
+ <style></style>
55
+ <div class="mainbox">
56
+ Hi there
57
+ </div>
58
+ `;
59
+ }
60
+
61
+ public dispatchReportNewIncident() {
62
+ this.dispatchEvent(new CustomEvent('reportNewIncident', {
63
+
64
+ }))
65
+ }
66
+
67
+ public dispatchStatusSubscribe() {
68
+ this.dispatchEvent(new CustomEvent('statusSubscribe', {
69
+
70
+ }))
71
+ }
72
+ }
package/ts_web/elements/upl-statuspage-header.ts ADDED
@@ -0,0 +1,110 @@
1
+ import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
2
+ import * as domtools from '@design.estate/dees-domtools';
3
+
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'upl-statuspage-header': UplStatuspageHeader;
7
+ }
8
+ }
9
+
10
+ @customElement('upl-statuspage-header')
11
+ export class UplStatuspageHeader extends DeesElement {
12
+ // STATIC
13
+ public static demo = () => html`
14
+ <upl-statuspage-header></upl-statuspage-header>
15
+ `;
16
+
17
+ // INSTANCE
18
+ @property()
19
+ public pageTitle: string = "Statuspage Title";
20
+
21
+
22
+ constructor() {
23
+ super();
24
+ }
25
+
26
+ public static styles = [
27
+ domtools.elementBasic.staticStyles,
28
+ css`
29
+ :host {
30
+ display: block;
31
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
32
+ font-family: Inter;
33
+ color: ${cssManager.bdTheme('#333333', '#ffffff')};
34
+ }
35
+
36
+ .mainbox {
37
+ margin: auto;
38
+ max-width: 900px;
39
+ }
40
+
41
+ .mainbox .actions {
42
+ display: flex;
43
+ justify-content: flex-end;
44
+ padding: 20px 0px 40px 0px;
45
+ }
46
+
47
+ .mainbox .actions .actionButton {
48
+ background: ${cssManager.bdTheme('#00000000', '#ffffff00')};
49
+
50
+ font-size: 12px;
51
+ border: 1px solid ${cssManager.bdTheme('#333', '#CCC')};
52
+ padding: 6px 10px 7px 10px;
53
+ margin-left: 10px;
54
+ border-radius: 3px;
55
+ cursor: pointer;
56
+ user-select: none;
57
+ }
58
+
59
+ .mainbox .actions .actionButton:hover {
60
+ background: ${cssManager.bdTheme('#333333', '#efefef')};
61
+ border: 1px solid ${cssManager.bdTheme('#333333', '#efefef')};
62
+ color: ${cssManager.bdTheme('#fff', '#333333')};
63
+ }
64
+
65
+ h1 {
66
+ margin: 0px;
67
+ text-align: center;
68
+ font-weight: 600;
69
+ font-size: 35px;
70
+ }
71
+
72
+ h2 {
73
+ margin: 0px;
74
+ margin-top: 10px;
75
+ text-align: center;
76
+ font-weight: 600;
77
+ font-size: 18px;
78
+ }
79
+ `
80
+ ]
81
+
82
+ public render(): TemplateResult {
83
+ return html`
84
+ ${domtools.elementBasic.styles}
85
+ <style>
86
+
87
+ </style>
88
+ <div class="mainbox">
89
+ <div class="actions">
90
+ <div class="actionButton" @click=${this.dispatchReportNewIncident}>report new incident</div>
91
+ <div class="actionButton" @click=${this.dispatchStatusSubscribe}>subscribe</div>
92
+ </div>
93
+ <h1>${this.pageTitle}</h1>
94
+ <h2>STATUS BOARD</h2>
95
+ </div>
96
+ `;
97
+ }
98
+
99
+ public dispatchReportNewIncident() {
100
+ this.dispatchEvent(new CustomEvent('reportNewIncident', {
101
+
102
+ }))
103
+ }
104
+
105
+ public dispatchStatusSubscribe() {
106
+ this.dispatchEvent(new CustomEvent('statusSubscribe', {
107
+
108
+ }))
109
+ }
110
+ }
package/ts_web/elements/upl-statuspage-incidents.ts ADDED
@@ -0,0 +1,90 @@
1
+ import * as plugins from '../plugins.js';
2
+ import {
3
+ DeesElement,
4
+ property,
5
+ html,
6
+ customElement,
7
+ type TemplateResult,
8
+ css,
9
+ cssManager,
10
+ } from '@design.estate/dees-element';
11
+
12
+ declare global {
13
+ interface HTMLElementTagNameMap {
14
+ 'upl-statuspage-incidents': UplStatuspageIncidents;
15
+ }
16
+ }
17
+
18
+ @customElement('upl-statuspage-incidents')
19
+ export class UplStatuspageIncidents extends DeesElement {
20
+ // STATIC
21
+ public static demo = () => html` <upl-statuspage-incidents></upl-statuspage-incidents> `;
22
+
23
+ // INSTANCE
24
+ @property({
25
+ type: Array,
26
+ })
27
+ public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];
28
+
29
+ @property({
30
+ type: Array,
31
+ })
32
+ public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];
33
+
34
+ @property({
35
+ type: Boolean,
36
+ })
37
+ public whitelabel = false;
38
+
39
+ constructor() {
40
+ super();
41
+ }
42
+
43
+ public static styles = [
44
+ plugins.domtools.elementBasic.staticStyles,
45
+ css`
46
+ :host {
47
+ display: block;
48
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
49
+ font-family: Inter;
50
+ color: ${cssManager.bdTheme('#333333', '#ffffff')};
51
+ }
52
+
53
+ .mainbox {
54
+ max-width: 900px;
55
+ margin: auto;
56
+ }
57
+
58
+ .noIncidentBox {
59
+ background: ${cssManager.bdTheme('#ffffff', '#333333')};;
60
+ padding: 10px;
61
+ margin-bottom: 15px;
62
+ border-radius: 3px;
63
+ }
64
+ `,
65
+ ];
66
+
67
+ public render(): TemplateResult {
68
+ return html`
69
+ <style></style>
70
+ <div class="mainbox">
71
+ <uplinternal-miniheading> Current Incidents </uplinternal-miniheading>
72
+ ${this.currentIncidences.length
73
+ ? html``
74
+ : html` <div class="noIncidentBox">No incidents ongoing.</div> `}
75
+ <uplinternal-miniheading> Past Incidents </uplinternal-miniheading>
76
+ ${this.pastIncidences.length
77
+ ? html``
78
+ : html` <div class="noIncidentBox">No past incidents in the last 90 days.</div> `}
79
+ </div>
80
+ `;
81
+ }
82
+
83
+ public dispatchReportNewIncident() {
84
+ this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
85
+ }
86
+
87
+ public dispatchStatusSubscribe() {
88
+ this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
89
+ }
90
+ }
package/ts_web/elements/upl-statuspage-statusbar.ts ADDED
@@ -0,0 +1,51 @@
1
+ import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
2
+ import * as domtools from '@design.estate/dees-domtools';
3
+
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'upl-statuspage-statusbar': UplStatuspageStatusbar;
7
+ }
8
+ }
9
+
10
+ @customElement('upl-statuspage-statusbar')
11
+ export class UplStatuspageStatusbar extends DeesElement {
12
+ public static demo = () => html`
13
+ <upl-statuspage-statusbar></upl-statuspage-statusbar>
14
+ `;
15
+
16
+ constructor() {
17
+ super();
18
+ }
19
+
20
+ public static styles = [
21
+ cssManager.defaultStyles,
22
+ css`
23
+ :host {
24
+ padding: 20px 0px 15px 0px;
25
+ display: block;
26
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};;
27
+ font-family: Inter;
28
+ color: #fff;
29
+ }
30
+
31
+ .mainbox {
32
+ margin: auto;
33
+ max-width: 900px;
34
+ text-align: center;
35
+ background: #19572E;
36
+ line-height: 50px;
37
+ border-radius: 3px;
38
+ }
39
+ `,
40
+ ]
41
+
42
+ public render(): TemplateResult {
43
+ return html`
44
+ <style>
45
+ </style>
46
+ <div class="mainbox">
47
+ Everything is working normally!
48
+ </div>
49
+ `;
50
+ }
51
+ }
package/ts_web/elements/upl-statuspage-statusdetails.ts ADDED
@@ -0,0 +1,95 @@
1
+ import * as plugins from '../plugins.js';
2
+ import {
3
+ DeesElement,
4
+ property,
5
+ html,
6
+ customElement,
7
+ type TemplateResult,
8
+ css,
9
+ cssManager,
10
+ } from '@design.estate/dees-element';
11
+
12
+ import './internal/uplinternal-miniheading.js';
13
+
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
17
+ }
18
+ }
19
+
20
+ @customElement('upl-statuspage-statusdetails')
21
+ export class UplStatuspageStatusdetails extends DeesElement {
22
+ public static demo = () => html` <upl-statuspage-statusdetails></upl-statuspage-statusdetails> `;
23
+
24
+ constructor() {
25
+ super();
26
+ }
27
+
28
+ public static styles = [
29
+ plugins.domtools.elementBasic.staticStyles,
30
+ css`
31
+ :host {
32
+ position: relative;
33
+ padding: 0px 0px 15px 0px;
34
+ display: block;
35
+ background: ${cssManager.bdTheme('#eeeeeb', '#222222')};;
36
+ font-family: Inter;
37
+ color: #fff;
38
+ }
39
+
40
+ .mainbox {
41
+ margin: auto;
42
+ max-width: 900px;
43
+ text-align: right;
44
+ background: ${cssManager.bdTheme('#ffffff', '#333333')};;
45
+ line-height: 50px;
46
+ border-radius: 3px;
47
+ }
48
+
49
+ .mainbox .barContainer {
50
+ position: relative;
51
+ display: flex;
52
+ padding: 6px;
53
+ overflow: hidden;
54
+ }
55
+
56
+ .mainbox .barContainer .bar {
57
+ margin: 4px;
58
+ width: 11px;
59
+ border-radius: 3px;
60
+ height: 40px;
61
+ background: #2deb51;
62
+ }
63
+ .timeIndicator {
64
+ position: absolute;
65
+ width: 11px;
66
+ height: 11px;
67
+ background: #FF9800;
68
+ top: 56px;
69
+ left: 400px;
70
+ transform: rotate(45deg);
71
+ }
72
+ `,
73
+ ];
74
+
75
+ public render(): TemplateResult {
76
+ return html`
77
+ <style></style>
78
+ <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
79
+ <div class="mainbox">
80
+ <div class="barContainer">
81
+ ${(() => {
82
+ let counter = 0;
83
+ const returnArray: TemplateResult[] = [];
84
+ while (counter < 48) {
85
+ counter++;
86
+ returnArray.push(html` <div class="bar"></div> `);
87
+ }
88
+ return returnArray;
89
+ })()}
90
+ <div class="timeIndicator"></div>
91
+ </div>
92
+ </div>
93
+ `;
94
+ }
95
+ }