fix(core): update

This commit is contained in:
Philipp Kunz 2021-09-23 14:30:02 +02:00
parent 5ce4209a79
commit b5cab6d077
13 changed files with 2220 additions and 1384 deletions

2952
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,18 +13,18 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.74", "@designestate/dees-domtools": "^1.0.85",
"@designestate/dees-element": "^1.0.6", "@designestate/dees-element": "^1.0.10",
"@designestate/dees-wcctools": "^1.0.47", "@designestate/dees-wcctools": "^1.0.54",
"@gitzone/tsrun": "^1.2.12", "@gitzone/tsrun": "^1.2.12",
"@losslessone_private/loint-pubapi": "^1.0.9", "@losslessone_private/loint-pubapi": "^1.0.10",
"@pushrocks/smartexpress": "^3.0.98", "@pushrocks/smartexpress": "^3.0.100",
"typescript": "^4.1.2" "typescript": "^4.2.3"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.24", "@gitzone/tsbuild": "^2.1.24",
"@gitzone/tsbundle": "^1.0.72", "@gitzone/tsbundle": "^1.0.80",
"@gitzone/tswatch": "^1.0.50", "@gitzone/tswatch": "^1.0.52",
"@pushrocks/projectinfo": "^4.0.5", "@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.3", "tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0" "tslint-config-prettier": "^1.17.0"

View File

@ -1 +1,5 @@
export * from './lele-card'; export * from './upl-statuspage-assetsselector';
export * from './upl-statuspage-header';
export * from './upl-statuspage-statusbar';
export * from './upl-statuspage-statusdetails';
export * from './upl-statuspage-statusmonth';

View File

@ -0,0 +1,27 @@
import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('uplinternal-miniheading')
export class UplinternalMiniheading extends DeesElement {
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
font-family: Roboto Mono;
}
h5 {
display: block;
max-width: 900px;
margin: 0px auto;
padding: 0px 0px 10px 0px;
color: #707070;
}
</style>
<h5>${this.textContent}</h5>
`;
}
}

View File

@ -1,182 +0,0 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('lele-card')
export class LeleCard extends LitElement {
public static demo = () => html`
<lele-card
imgsrc="https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg"
.links="${[
{
text: 'Visit Website',
url: 'https://lossless.com'
}
]}"
.tabledata="${[
{
key: 'name',
value: 'Lossless GmbH'
},
{
key: 'domain',
value: 'https://lossless.com'
}
]}"
></lele-card>
`;
@property()
public heading: string = 'loading...';
@property()
public imgsrc: string = 'https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg';
@property({type: Array})
public links: {text: string; url: string}[] = [];
@property({type: Array})
public tabledata: {key: string, value: string}[] = [];
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host(:hover) .mainbox {
border-top: 1px solid var(--lelecv-color-accent, #e4002b);
}
:host(:hover) .mainbox .topimage img {
filter: grayscale(0%);
}
.mainbox {
display: block;
position: relative;
max-width: 400px;
max-height: 600px;
background: #212121;
transition: border-top 0.1s ease;
border-top: 1px solid #444;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
overflow: hidden;
min-height: 100px;
color: #ccc;
}
.topimage {
position: relative;
width: 100%;
}
.topimage img {
display: block;
width: 100%;
height: auto;
min-height: 20px;
transition: all 0.1s;
filter: grayscale(100%);
}
.heading {
font-size: 25px;
font-weight: 100;
position: absolute;
padding: 10px;
top: 55px;
left: 0px;
}
.content {
position: relative;
padding: 10px;
min-height: 100px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
border-top: 1px #444 dotted;
border-bottom: 1px #444 dotted;
}
.links {
position: relative;
height: 35px;
text-align: right;
}
.link {
display: inline-block;
padding: 0px 5px;
line-height: 35px;
height: 35px;
font-size: 15px;
}
a {
transition: color 0.1s ease;
text-decoration: none;
color: #888;
}
a:hover {
color: #CCC;
}
.tableline {
margin-left: -5px;
margin-right: -5px;
padding: 10px;
color: #cccccc;
font-size: 14px;
}
.tableline:hover {
color: #ffffff;
}
.tableline:nth-child(even) {
background: rgba(0,0,0,0.2);
}
.tableline .key {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
color: #bbbbbb;
font-weight: bold;
}
.tableline .value {
font-family: 'Roboto Mono', monospace;
}
</style>
<div class="mainbox">
<div class="topimage"><img src="${this.imgsrc}" width="100" height="100" loading="lazy"></div>
<div class="content">
<slot>
${this.tabledata ? this.tabledata.map(datapoint => html`
<div class="tableline">
<div class="key">
${datapoint.key}:
</div>
<div class="value">
${datapoint.value}
</div>
</div>
`) : null}
</slot>
</div>
<div class="links">
${this.links.map(linkArg => {
return html`
<div class="link"><a target="_blank" href="${linkArg.url}">${linkArg.text}</a></div>
`;
})}
</div>
</div>
`;
}
}

View File

@ -0,0 +1,55 @@
import {
DeesElement,
property,
html,
customElement,
TemplateResult,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import './internal/uplinternal-miniheading';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-assetsselector': UplStatuspageAssetsselector;
}
}
@customElement('upl-statuspage-assetsselector')
export class UplStatuspageAssetsselector extends DeesElement {
public static demo = () => html`
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
`;
constructor() {
super();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
padding: 0px 0px 15px 0px;
display: block;
background: #222222;
font-family: Roboto Mono;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
text-align: center;
height: 50px;
border-radius: 3px;
background: #404040;
}
</style>
<uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
<div class="mainbox">
Hello!
</div>
`;
}
}

View File

@ -0,0 +1,86 @@
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-header': UplStatuspageHeader;
}
}
@customElement('upl-statuspage-header')
export class UplStatuspageHeader extends DeesElement {
public static demo = () => html`
<upl-statuspage-header></upl-statuspage-header>
`;
constructor() {
super();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
background: #222222;
font-family: Roboto Mono;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
}
.mainbox .actions {
display: flex;
justify-content: flex-end;
padding: 20px 0px 40px 0px;
}
.mainbox .actions .actionButton {
background: rgba(255,255,255, 0);
font-size: 12px;
border: 1px solid #CCC;
padding: 6px 10px 7px 10px;
margin-left: 10px;
border-radius: 3px;
cursor: pointer;
user-select: none;
}
.mainbox .actions .actionButton:hover {
background: #efefef;
border: 1px solid #efefef;
color: #333333;
}
h1 {
margin: 0px;
text-align: center;
font-weight: 300;
font-size: 35px;
}
h2 {
margin: 0px;
margin-top: 10px;
text-align: center;
font-weight: 300;
font-size: 18px;
}
</style>
<div class="mainbox">
<div class="actions">
<div class="actionButton">report new incident</div>
<div class="actionButton">subscribe</div>
</div>
<h1>status.lossless.network</h1>
<h2>STATUS BOARD</h2>
</div>
`;
}
}

View File

@ -0,0 +1,50 @@
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-statusbar': UplStatuspageStatusbar;
}
}
@customElement('upl-statuspage-statusbar')
export class UplStatuspageStatusbar extends DeesElement {
public static demo = () => html`
<upl-statuspage-statusbar></upl-statuspage-statusbar>
`;
constructor() {
super();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
padding: 20px 0px 15px 0px;
display: block;
background: #222222;
font-family: Roboto Mono;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
text-align: center;
background: #19572E;
line-height: 50px;
border-radius: 3px;
}
</style>
<div class="mainbox">
Everything is working normally!
</div>
`;
}
}

View File

@ -0,0 +1,85 @@
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import './internal/uplinternal-miniheading';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
}
}
@customElement('upl-statuspage-statusdetails')
export class UplStatuspageStatusdetails extends DeesElement {
public static demo = () => html`
<upl-statuspage-statusdetails></upl-statuspage-statusdetails>
`;
constructor() {
super();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
position: relative;
padding: 0px 0px 15px 0px;
display: block;
background: #222222;
font-family: Roboto Mono;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
text-align: right;
background: #404040;
line-height: 50px;
border-radius: 3px;
}
.mainbox .barContainer {
display: flex;
padding: 10px 6px;
}
.mainbox .barContainer .bar {
margin: 4px;
width: 11px;
border-radius: 3px;
height: 40px;
background: #2DEB51;
}
.timeIndicator {
position: absolute;
width: 11px;
height: 11px;
background: #fff;
top: 90px;
left: 600px;
transform: rotate(45deg);
}
</style>
<uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
<div class="mainbox">
<div class="barContainer">
${(() => {
let counter = 0;
const returnArray: TemplateResult[] = [];
while (counter < 48) {
counter++;
returnArray.push(html` <div class="bar"></div> `);
}
return returnArray;
})()}
</div>
<div class="timeIndicator"></div>
</div>
`;
}
}

View File

@ -0,0 +1,124 @@
import {
DeesElement,
property,
html,
customElement,
TemplateResult,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import './internal/uplinternal-miniheading';
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 render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
position: relative;
padding: 0px 0px 15px 0px;
display: block;
background: #222222;
font-family: Roboto Mono;
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: #404040;
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;
}
</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>
`;
}
}

View File

@ -1,8 +1 @@
export * from './elements/index'; export * from './elements/index';
import * as themelogic from './themelogic';
export {
themelogic
};

View File

@ -1,5 +0,0 @@
import * as leleCv from './lelecv';
export {
leleCv
}

View File

@ -1,3 +0,0 @@
export const backgroundAccent = '#303f9f';
export const pageWidth = '1200px';