@uptime.link/statuspage 1.0.72

package/ts_web/elements/upl-statuspage-statusmonth.ts

@@ -0,0 +1,130 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import './internal/uplinternal-miniheading.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'upl-statuspage-statusmonth': UplStatuspageStatusmonth;
+  }
+}
+
+@customElement('upl-statuspage-statusmonth')
+export class UplStatuspageStatusmonth extends DeesElement {
+  public static demo = () => html` <upl-statuspage-statusmonth></upl-statuspage-statusmonth> `;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+          position: relative;
+          padding: 0px 0px 15px 0px;
+          display: block;
+          background:  ${cssManager.bdTheme('#eeeeeb', '#222222')};;
+          font-family: Inter;
+          color: #fff;
+        }
+
+        .mainbox {
+          margin: auto;
+          max-width: 900px;
+          display: grid;
+          grid-template-columns: repeat(5, calc(100% / 5 - 80px / 5));
+          grid-column-gap: 20px;
+        }
+
+        .statusMonth {
+          background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
+          min-height: 20px;
+          display: grid;
+          padding: 10px;
+          grid-template-columns: repeat(6, auto);
+          grid-gap: 9px;
+          border-radius: 3px;
+        }
+
+        .statusMonth .statusDay {
+          width: 16px;
+          height: 16px;
+          background: #2deb51;
+          border-radius: 3px;
+        }
+    `
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <uplinternal-miniheading>Last 150 days</uplinternal-miniheading>
+      <div class="mainbox">
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+        <div class="statusMonth">
+          ${(() => {
+            let counter = 0;
+            const returnArray: TemplateResult[] = [];
+            while (counter < 30) {
+              counter++;
+              returnArray.push(html` <div class="statusDay"></div> `);
+            }
+            return returnArray;
+          })()}
+        </div>
+      </div>
+    `;
+  }
+}

package/ts_web/index.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/ts_web/pages/index.ts

@@ -0,0 +1 @@
+export * from './page1.js';

package/ts_web/pages/page1.ts

@@ -0,0 +1,11 @@
+import { html } from "@design.estate/dees-element";
+
+export const page1 = () => html`
+  <upl-statuspage-header></upl-statuspage-header>
+  <upl-statuspage-statusbar></upl-statuspage-statusbar>
+  <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
+  <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
+  <upl-statuspage-statusmonth></upl-statuspage-statusmonth>
+  <upl-statuspage-incidents></upl-statuspage-incidents>
+  <upl-statuspage-footer></upl-statuspage-footer>
+`;

package/ts_web/plugins.ts

@@ -0,0 +1,7 @@
+import * as domtools from '@design.estate/dees-domtools';
+import * as uplInterfaces from '@uptime.link/interfaces';
+
+export {
+  domtools,
+  uplInterfaces
+}