Compare commits
88 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 68a164aac2 | |||
| 9b5448e096 | |||
| 232d063485 | |||
| 6a357cb227 | |||
| 7b8218ab77 | |||
| 5b6436b023 | |||
| 57edbb872b | |||
| 76f82fe15e | |||
| 0b03718f4a | |||
| 2754de26d8 | |||
| abc91600e2 | |||
| 6a8a4aa4d2 | |||
| 6a6f3b1907 | |||
| 0dc8e21e07 | |||
| 68ccc02699 | |||
| ed1c18b8ac | |||
| e8cc4c7c90 | |||
| 187ebed3ab | |||
| b909617271 | |||
| 9c2fe9f739 | |||
| ed49de64bc | |||
| 162003ba7a | |||
| 5f793f0acc | |||
| d23b298bd5 | |||
| f9e2f00e9b | |||
| 6c3645f2f8 | |||
| e3a6798469 | |||
| 60de4ef674 | |||
| 02e029edbc | |||
| ff5a65bdce | |||
| daacbbd042 | |||
| 42b44be143 | |||
| 7e4c186e66 | |||
| f6823639cc | |||
| f292fd9692 | |||
| fa2ab7730a | |||
| 3a2ba14287 | |||
| c1b5778d01 | |||
| 24a5f48ce1 | |||
| d43b80298b | |||
| 27d338420c | |||
| 81f2e662fb | |||
| d8905b687f | |||
| 75f6da194b | |||
| e653450ec5 | |||
| 9de9f0c202 | |||
| 75929c089d | |||
| 6a97e8d020 | |||
| 6aeb970bbe | |||
| ea7fa0816d | |||
| 1b1de04f86 | |||
| 7941628d1d | |||
| 369437ceba | |||
| 72f7782898 | |||
| 820d6ae40f | |||
| 5dd3da9f31 | |||
| 3ce0683a05 | |||
| 00d41f1b6e | |||
| caba7ada28 | |||
| 6cff32cc36 | |||
| e6e8ac9782 | |||
| 7a13fdcd95 | |||
| c450fb32ea | |||
| 6554bfd721 | |||
| 9ce4ca14b8 | |||
| 76bcda760c | |||
| 6949aed381 | |||
| 1f3502685f | |||
| 8d1451fffa | |||
| 8b2fedf1d6 | |||
| 30ffb2650a | |||
| 55b65c7e4c | |||
| 5c81dd540a | |||
| cb5bc809ea | |||
| ab1956c452 | |||
| 3b99796073 | |||
| 20755775ea | |||
| 4e1b797377 | |||
| 4a3aa2d6d9 | |||
| 4e49045444 | |||
| 9e54c973d5 | |||
| 122c535dec | |||
| aabda883cd | |||
| 5890977009 | |||
| f4aebcf4e6 | |||
| 66bf117bfc | |||
| f7ee4d77fd | |||
| ab19e97c31 |
@ -12,6 +12,9 @@ stages:
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- npm install -g @shipzone/npmci
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
@ -36,6 +39,7 @@ auditProductionDependencies:
|
||||
- npmci command npm audit --audit-level=high --only=prod --production
|
||||
tags:
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
@ -96,10 +100,9 @@ codequality:
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
|
||||
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,28 +2,10 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"${relativeFile}"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
},
|
||||
{
|
||||
"name": "test.ts",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"test/test.ts"
|
||||
],
|
||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"protocol": "inspector",
|
||||
"internalConsoleOptions": "openOnSessionStart"
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
112
html/index.html
112
html/index.html
@ -1,6 +1,7 @@
|
||||
<!--gitzone element-->
|
||||
<!--gitzone default-->
|
||||
<!-- made by Lossless GmbH -->
|
||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--Lets set some basic meta tags-->
|
||||
@ -9,16 +10,119 @@
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||
/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
<!--Lets make sure we recognize this as an PWA-->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="icon" type="image/png" href="/assetbroker/manifest/favicon.png">
|
||||
|
||||
<!--Lets load standard fonts-->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link
|
||||
crossorigin="anonymous"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
<!--Lets avoid a rescaling flicker due to default body margins-->
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
margin: 0px;
|
||||
background: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="./index.ts"></script>
|
||||
<script>
|
||||
projectVersion = '';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<style>
|
||||
body {
|
||||
background: #303f9f;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: #4357d9;
|
||||
}
|
||||
.contentHeader {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
.footer {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<div class="logo">
|
||||
<img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg">
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<div class="contentHeader">
|
||||
We need JavaScript to run properly!
|
||||
</div>
|
||||
<div class="content">
|
||||
This site is being built using lit-element (made by Google). This technology works with
|
||||
JavaScript. Subsequently this website does not work as intended by Lossless GmbH without
|
||||
JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="https://lossless.gmbh">Legal Info</a> |
|
||||
<a href="https://lossless.gmbh/privacy">Privacy Policy</a>
|
||||
</div>
|
||||
</noscript>
|
||||
<script type="text/javascript" async defer>
|
||||
window.revenueEnabled = true;
|
||||
const runRevenueCheck = async () => {
|
||||
var e = document.createElement('div');
|
||||
e.id = '476kjuhzgtr764';
|
||||
e.style.display = 'none';
|
||||
document.body.appendChild(e);
|
||||
if (document.getElementById('476kjuhzgtr764')) {
|
||||
window.revenueEnabled = true;
|
||||
} else {
|
||||
window.revenueEnabled = false;
|
||||
}
|
||||
console.log(`revenue enabled: ${window.revenueEnabled}`);
|
||||
};
|
||||
|
||||
runRevenueCheck();
|
||||
</script>
|
||||
</body>
|
||||
<script defer type="module" src="/bundle.js"></script>
|
||||
</html>
|
||||
|
||||
@ -3,8 +3,8 @@ import * as deesWccTools from '@designestate/dees-wcctools';
|
||||
import * as deesDomTools from '@designestate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../ts_web/elements';
|
||||
import * as pages from '../ts_web/pages';
|
||||
import * as elements from '../ts_web/elements/index.js';
|
||||
import * as pages from '../ts_web/pages/index.js';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
||||
|
||||
5
license
5
license
@ -8,7 +8,10 @@ copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
copies or substantial portions of the Software. You agree to being mentioned
|
||||
as reference by Lossless GmbH. This includes the use of your entity logos
|
||||
or profile picture by Lossless GmbH on websites and readme's, also on third party
|
||||
pages like gitlab.com or github.com.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "dees-catalog",
|
||||
"shortDescription": "a webcomponents catalog for handling daily stuff on the web",
|
||||
"description": "a webcomponents catalog for handling daily stuff on the web",
|
||||
"npmPackagename": "@designestate/dees-catalog",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
|
||||
25856
package-lock.json
generated
25856
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,36 +1,35 @@
|
||||
{
|
||||
"name": "@designestate/dees-catalog",
|
||||
"version": "1.0.49",
|
||||
"version": "1.0.93",
|
||||
"private": false,
|
||||
"description": "website for lossless.com",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "tstest test/ --web",
|
||||
"build": "tsbuild element && tsbundle element --production",
|
||||
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.89",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@designestate/dees-wcctools": "^1.0.57",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"typescript": "^4.3.5"
|
||||
"@designestate/dees-domtools": "^2.0.22",
|
||||
"@designestate/dees-element": "^2.0.15",
|
||||
"@designestate/dees-wcctools": "^1.0.74",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
||||
"pdfjs-dist": "^2.14.305"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.26",
|
||||
"@gitzone/tsbundle": "^1.0.84",
|
||||
"@gitzone/tstest": "^1.0.57",
|
||||
"@gitzone/tswatch": "^1.0.56",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
"@gitzone/tsbuild": "^2.1.61",
|
||||
"@gitzone/tsbundle": "^2.0.3",
|
||||
"@gitzone/tstest": "^1.0.71",
|
||||
"@gitzone/tswatch": "^2.0.1",
|
||||
"@pushrocks/projectinfo": "^5.0.1",
|
||||
"@pushrocks/tapbundle": "^5.0.3"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
||||
@ -6,7 +6,7 @@ tap.test('should create a working button', async () => {
|
||||
const button: deesCatalog.DeesButton = await webhelpers.fixture(
|
||||
webhelpers.html`<dees-button></dees-button>`
|
||||
);
|
||||
expect(button).to.be.instanceOf(deesCatalog.DeesButton);
|
||||
expect(button).toBeInstanceOf(deesCatalog.DeesButton);
|
||||
});
|
||||
|
||||
tap.start();
|
||||
|
||||
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@designestate/dees-catalog',
|
||||
version: '1.0.93',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
53
ts_web/elements/dees-button-exit.ts
Normal file
53
ts_web/elements/dees-button-exit.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import {
|
||||
cssManager,
|
||||
customElement,
|
||||
DeesElement,
|
||||
html,
|
||||
TemplateResult,
|
||||
css,
|
||||
state,
|
||||
property
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
@customElement('dees-button-exit')
|
||||
export class DeesButtonExit extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html`
|
||||
<dees-button-exit></dees-button-exit>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Number
|
||||
})
|
||||
public size: number = 20;
|
||||
|
||||
public styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
`
|
||||
]
|
||||
|
||||
public render (): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
.maincontainer {
|
||||
position: relative;
|
||||
width: ${this.size}px;
|
||||
height: ${this.size}px;
|
||||
}
|
||||
.firstLine {
|
||||
position: absolute;
|
||||
}
|
||||
.secondLine {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="firstLine"></div>
|
||||
<div class="secondLine"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -64,6 +64,7 @@ export class DeesButton extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -73,18 +74,19 @@ export class DeesButton extends DeesElement {
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: ${cssManager.bdTheme('#eee', '#333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
|
||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||
border-radius: 2px;
|
||||
line-height: 40px;
|
||||
padding: 0px 10px;
|
||||
padding: 0px 8px;
|
||||
min-width: 100px;
|
||||
user-select: none;
|
||||
color: ${cssManager.bdTheme('#333', ' #ccc')};
|
||||
@ -94,7 +96,7 @@ export class DeesButton extends DeesElement {
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
background: #039be5;
|
||||
border: 0px dashed ${cssManager.bdTheme('#eeeff300', '#66666600')};
|
||||
border: 1px solid #039be5;
|
||||
border-top: 1px solid #039be5;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -141,7 +143,7 @@ export class DeesButton extends DeesElement {
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0px 48px;
|
||||
margin-top: 36px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.button.pending {
|
||||
|
||||
123
ts_web/elements/dees-chips.ts
Normal file
123
ts_web/elements/dees-chips.ts
Normal file
@ -0,0 +1,123 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-chips': DeesChips;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-chips')
|
||||
export class DeesChips extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
||||
<dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
||||
|
||||
`;
|
||||
|
||||
@property()
|
||||
public selectionMode: 'single' | 'multiple' = 'single';
|
||||
|
||||
@property({
|
||||
type: Array
|
||||
})
|
||||
public selectableChips: string[] = [];
|
||||
|
||||
@property()
|
||||
public selectedChip: string = null;
|
||||
|
||||
@property({
|
||||
type: Array
|
||||
})
|
||||
public selectedChips: string[] = [];
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
|
||||
}
|
||||
|
||||
.chip {
|
||||
background: #494949;
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
background: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chip.selected {
|
||||
background: #00A3FF;
|
||||
}
|
||||
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
${this.selectableChips.map(chipArg => html`
|
||||
<div @click=${() => this.selectChip(chipArg)} class="chip ${this.selectedChip === chipArg || this.selectedChips.includes(chipArg) ? 'selected' : ''}">
|
||||
${chipArg}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
public async selectChip(chipArg: string) {
|
||||
if (this.selectionMode === 'single') {
|
||||
if (this.selectedChip === chipArg) {
|
||||
this.selectedChip = null;
|
||||
this.selectedChips = [];
|
||||
} else {
|
||||
this.selectedChip = chipArg;
|
||||
this.selectedChips = [chipArg];
|
||||
}
|
||||
} else if(this.selectionMode === 'multiple') {
|
||||
if (this.selectedChips.includes(chipArg)) {
|
||||
this.selectedChips = this.selectedChips.filter(chipArg2 => chipArg !== chipArg2)
|
||||
} else {
|
||||
this.selectedChips.push(chipArg);
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
console.log(this.selectedChips);
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@ import {
|
||||
cssManager,
|
||||
property,
|
||||
} from '@designestate/dees-element';
|
||||
import { DeesForm } from './dees-form';
|
||||
import { DeesForm } from './dees-form.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
|
||||
|
||||
import { DeesInputCheckbox } from './dees-input-checkbox';
|
||||
import { DeesInputText } from './dees-input-text';
|
||||
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
|
||||
import { DeesInputRadio } from './dees-input-radio';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import { DeesFormSubmit } from './dees-form-submit';
|
||||
|
||||
import { DeesInputCheckbox } from './dees-input-checkbox.js';
|
||||
import { DeesInputText } from './dees-input-text.js';
|
||||
import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
|
||||
import { DeesInputRadio } from './dees-input-radio.js';
|
||||
import { DeesFormSubmit } from './dees-form-submit.js';
|
||||
|
||||
export type TFormElement = Array<
|
||||
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
|
||||
@ -103,7 +103,9 @@ export class DeesForm extends DeesElement {
|
||||
requiredOK = false;
|
||||
}
|
||||
}
|
||||
this.getSubmitButton().disabled = !requiredOK;
|
||||
if (this.getSubmitButton()) {
|
||||
this.getSubmitButton().disabled = !requiredOK;
|
||||
}
|
||||
}
|
||||
|
||||
public async gatherData() {
|
||||
@ -136,6 +138,13 @@ export class DeesForm extends DeesElement {
|
||||
const submitButton = this.getSubmitButton();
|
||||
|
||||
switch (visualStateArg) {
|
||||
case 'normal':
|
||||
submitButton.disabled = false;
|
||||
submitButton.status = 'normal';
|
||||
for (const inputChild of inputChildren) {
|
||||
inputChild.disabled = false;
|
||||
}
|
||||
break;
|
||||
case 'pending':
|
||||
submitButton.disabled = true;
|
||||
submitButton.status = 'pending';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { LitElement, html, property, customElement } from 'lit-element';
|
||||
import { DeesElement, html, property, customElement } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@ -48,8 +48,9 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-icon')
|
||||
export class DeesIcon extends LitElement {
|
||||
export class DeesIcon extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-icon iconName="visibility"></dees-icon>
|
||||
<div style="background: #fff; padding: 10px;">
|
||||
<dees-icon iconName="visibility"></dees-icon>
|
||||
<dees-icon brandName="facebook"></dees-icon>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
|
||||
import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
@ -8,7 +8,7 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-input-dropdown')
|
||||
export class DeesInputDropdown extends LitElement {
|
||||
export class DeesInputDropdown extends DeesElement {
|
||||
public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
|
||||
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
@ -8,7 +8,7 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-input-radio')
|
||||
export class DeesInputRadio extends LitElement {
|
||||
export class DeesInputRadio extends DeesElement {
|
||||
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@ -27,7 +27,7 @@ export class DeesInputText extends DeesElement {
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public value: string;
|
||||
public value: string = '';
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
@ -77,6 +77,7 @@ export class DeesInputText extends DeesElement {
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
font-family: "Roboto";
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
}
|
||||
|
||||
@ -94,7 +95,7 @@ export class DeesInputText extends DeesElement {
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="label">${this.label}</div>
|
||||
<input type="text" @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
<input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
120
ts_web/elements/dees-pdf.ts
Normal file
120
ts_web/elements/dees-pdf.ts
Normal file
@ -0,0 +1,120 @@
|
||||
import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element';
|
||||
import { TemplateResult } from 'lit-html';
|
||||
|
||||
import { Deferred } from '@pushrocks/smartpromise';
|
||||
|
||||
import type pdfjsTypes from 'pdfjs-dist';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-pdf': DeesPdf;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-pdf')
|
||||
export class DeesPdf extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html` <dees-pdf></dees-pdf> `;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property()
|
||||
public pdfUrl: string =
|
||||
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// you have access to all kinds of things through this.
|
||||
// this.setAttribute('gotIt','true');
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 800px;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pdfcanvas {
|
||||
box-shadow: 0px 0px 5px #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
|
||||
`;
|
||||
}
|
||||
|
||||
public static pdfJsReady: Promise<any>;
|
||||
public static pdfjsLib: typeof pdfjsTypes;
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!DeesPdf.pdfJsReady) {
|
||||
const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
|
||||
DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
|
||||
const loadDeferred = domtools.plugins.smartpromise.defer();
|
||||
const script = document.createElement('script');
|
||||
script.addEventListener('load', () => {
|
||||
console.log('pdf.js loaded!');
|
||||
loadDeferred.resolve();
|
||||
});
|
||||
script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
// The workerSrc property shall be specified.
|
||||
await loadDeferred.promise;
|
||||
DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
|
||||
DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
|
||||
pdfJsReadyDeferred.resolve();
|
||||
}
|
||||
await DeesPdf.pdfJsReady;
|
||||
this.displayContent();
|
||||
}
|
||||
|
||||
public async displayContent() {
|
||||
await DeesPdf.pdfJsReady;
|
||||
|
||||
// Asynchronous download of PDF
|
||||
const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
|
||||
loadingTask.promise.then(
|
||||
(pdf) => {
|
||||
console.log('PDF loaded');
|
||||
|
||||
// Fetch the first page
|
||||
const pageNumber = 1;
|
||||
pdf.getPage(pageNumber).then((page) => {
|
||||
console.log('Page loaded');
|
||||
|
||||
const scale = 10;
|
||||
const viewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Prepare canvas using PDF page dimensions
|
||||
const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
const renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
console.log('Page rendered');
|
||||
});
|
||||
});
|
||||
},
|
||||
(reason) => {
|
||||
// PDF loading error
|
||||
console.error(reason);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
0
ts_web/elements/dees-search.ts
Normal file
0
ts_web/elements/dees-search.ts
Normal file
0
ts_web/elements/dees-searchbox.ts
Normal file
0
ts_web/elements/dees-searchbox.ts
Normal file
156
ts_web/elements/dees-speechbubble.ts
Normal file
156
ts_web/elements/dees-speechbubble.ts
Normal file
@ -0,0 +1,156 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-speechbubble': DeesSpeechbubble;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-speechbubble')
|
||||
export class DeesSpeechbubble extends DeesElement {
|
||||
public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
|
||||
|
||||
@property()
|
||||
public text: string;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public isHidden = false;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
will-change: transform;
|
||||
transition: transform 0.2s;
|
||||
transform: translateX(0px);
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.maincontainer:hover {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.speechbubble {
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
padding: 0px 10px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
top: 0px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
|
||||
animation-duration: 2.5s; /* Change to speed up or slow down */
|
||||
animation-iteration-count: infinite; /* Never stop waving :) */
|
||||
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes wave-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(14deg);
|
||||
} /* The following five values can be played with to make the waving more or less extreme */
|
||||
20% {
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(14deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(0deg);
|
||||
} /* Reset for the last half to pause */
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer" @click=${this.handleClick}>
|
||||
<div class="arrow"></div>
|
||||
<div class="speechbubble"><span class="wave">👋</span> Hey! We are consulting.</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async handleClick() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
globalThis.location.href = "https://lossless.consulting"
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
256
ts_web/elements/dees-stepper.ts
Normal file
256
ts_web/elements/dees-stepper.ts
Normal file
@ -0,0 +1,256 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
unsafeCSS,
|
||||
cssManager,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
export interface IStep {
|
||||
title: string;
|
||||
content: TemplateResult;
|
||||
validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
||||
onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
||||
validationFuncCalled?: boolean;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-stepper': DeesStepper;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-stepper')
|
||||
export class DeesStepper extends DeesElement {
|
||||
public static demo = () =>
|
||||
html`
|
||||
<dees-stepper
|
||||
.steps=${[
|
||||
{
|
||||
title: 'Whats your name?',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text
|
||||
key="email"
|
||||
label="Your Email"
|
||||
value="hello@something.com"
|
||||
disabled
|
||||
></dees-input-text>
|
||||
<dees-input-text key="firstName" required label="Vorname"></dees-input-text>
|
||||
<dees-input-text key="lastName" required label="Nachname"></dees-input-text>
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', eventArg => {
|
||||
stepperArg.goNext();
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Whats your mobile number?',
|
||||
content: html``,
|
||||
}
|
||||
] as IStep[]}
|
||||
></dees-stepper>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public steps: IStep[] = [];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
public selectedStep: IStep;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.stepperContainer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
transition: all 0.7s ease-in-out;
|
||||
max-width: 500px;
|
||||
min-height: 300px;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
filter: opacity(0.5) grayscale(1);
|
||||
box-shadow: 0px 0px 3px #00000010;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.step.selected {
|
||||
border-top: 1px solid #e4002b;
|
||||
pointer-events: all;
|
||||
filter: opacity(1) grayscale(0);
|
||||
box-shadow: 0px 0px 5px #00000010;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.step.hiddenStep {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
margin-bottom: 100vh;
|
||||
}
|
||||
|
||||
.step .stepCounter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
border-bottom-left-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
||||
}
|
||||
|
||||
.step .goBack {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step .goBack:hover {
|
||||
background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
|
||||
}
|
||||
|
||||
.step .title {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
font-family: Roboto;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.step .content {
|
||||
padding: 20px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="stepperContainer">
|
||||
${this.steps.map(
|
||||
(stepArg) =>
|
||||
html`<div
|
||||
class="step ${stepArg === this.selectedStep
|
||||
? 'selected'
|
||||
: null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
|
||||
? 'hiddenStep'
|
||||
: ''}"
|
||||
>
|
||||
${this.getIndexOfStep(stepArg) > 0
|
||||
? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
|
||||
: ``}
|
||||
<div class="stepCounter">
|
||||
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
|
||||
${this.steps.length}
|
||||
</div>
|
||||
<div class="title">${stepArg.title}</div>
|
||||
<div class="content">${stepArg.content}</div>
|
||||
</div> `
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public getIndexOfStep = (stepArg: IStep): number => {
|
||||
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
|
||||
};
|
||||
|
||||
public firstUpdated() {
|
||||
this.selectedStep = this.steps[0];
|
||||
this.setScrollStatus();
|
||||
}
|
||||
|
||||
public updated() {
|
||||
this.setScrollStatus();
|
||||
}
|
||||
|
||||
public scroller: typeof domtools.plugins.SweetScroll.prototype;
|
||||
|
||||
public async setScrollStatus() {
|
||||
await domtools.plugins.smartdelay.delayFor(50);
|
||||
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
|
||||
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
|
||||
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
|
||||
if (!stepperContainer.style.paddingTop) {
|
||||
stepperContainer.style.paddingTop = `${
|
||||
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
|
||||
}px`;
|
||||
}
|
||||
console.log('Setting scroll status');
|
||||
console.log(selectedStepElement);
|
||||
const scrollPosition =
|
||||
selectedStepElement.offsetTop -
|
||||
stepperContainer.offsetHeight / 2 +
|
||||
selectedStepElement.offsetHeight / 2;
|
||||
console.log(scrollPosition);
|
||||
const domtoolsInstance = await domtools.DomTools.setupDomTools();
|
||||
if (!this.scroller) {
|
||||
this.scroller = new domtools.plugins.SweetScroll(
|
||||
{
|
||||
vertical: true,
|
||||
horizontal: false,
|
||||
easing: 'easeInOutQuint',
|
||||
},
|
||||
stepperContainer
|
||||
);
|
||||
}
|
||||
if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
|
||||
this.selectedStep.validationFuncCalled = true;
|
||||
await this.selectedStep.validationFunc(this, selectedStepElement);
|
||||
}
|
||||
this.scroller.to(scrollPosition);
|
||||
}
|
||||
|
||||
public async goBack() {
|
||||
const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
|
||||
this.selectedStep = this.steps[currentIndex - 1];
|
||||
await this.domtoolsPromise;
|
||||
await this.domtools.convenience.smartdelay.delayFor(100);
|
||||
this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
|
||||
}
|
||||
|
||||
public goNext() {
|
||||
const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
|
||||
this.selectedStep = this.steps[currentIndex + 1];
|
||||
}
|
||||
}
|
||||
248
ts_web/elements/dees-table.ts
Normal file
248
ts_web/elements/dees-table.ts
Normal file
@ -0,0 +1,248 @@
|
||||
import {
|
||||
customElement,
|
||||
html,
|
||||
DeesElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-table': DeesTable<any>;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-table')
|
||||
export class DeesTable<T> extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demoWrapper {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 60px;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
<div class="demoWrapper">
|
||||
<dees-table
|
||||
heading1="Current Account Statement"
|
||||
heading2="Bunq - Payment Account 2 - April 2021"
|
||||
.data=${[
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
|
||||
},
|
||||
{
|
||||
date: '2021-04-02',
|
||||
amount: '165.65 €',
|
||||
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
|
||||
},
|
||||
{
|
||||
date: '2021-04-03',
|
||||
amount: '2999,00 €',
|
||||
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
|
||||
},
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Office-Supplies - STAPLES BREMEN',
|
||||
},
|
||||
{
|
||||
date: '2021-04-01',
|
||||
amount: '2464.65 €',
|
||||
description: 'Office-Supplies - STAPLES BREMEN',
|
||||
},
|
||||
]}
|
||||
>This is a slotted Text</dees-table
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public heading1: string = 'heading 1';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public heading2: string = 'heading 2';
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public data: T[] = [];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
public selectedDataRow: T;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainbox {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
.headingSeparation {
|
||||
margin-top: 7px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
|
||||
}
|
||||
|
||||
table,
|
||||
.noDataSet {
|
||||
margin-top: 16px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.noDataSet {
|
||||
text-align: center;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
|
||||
text-align: left;
|
||||
}
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
text-align: left;
|
||||
}
|
||||
tr:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
tr:hover .innerCellContainer {
|
||||
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
|
||||
}
|
||||
tr:first-child:hover {
|
||||
cursor: auto;
|
||||
}
|
||||
tr:first-child:hover .innerCellContainer {
|
||||
background: none;
|
||||
}
|
||||
tr.selected .innerCellContainer {
|
||||
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
|
||||
}
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 3px 0px;
|
||||
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
|
||||
}
|
||||
.innerCellContainer {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
th:first-child .innerCellContainer,
|
||||
td:first-child .innerCellContainer {
|
||||
padding-left: 0px;
|
||||
}
|
||||
th:last-child .innerCellContainer,
|
||||
td:last-child .innerCellContainer {
|
||||
padding-right: 0px;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tableStatistics {
|
||||
padding: 4px 16px;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#111', '#ffffff90')};
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
|
||||
margin: 16px -16px -16px -16px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainbox">
|
||||
<!-- the heading part -->
|
||||
<div>${this.heading1}</div>
|
||||
<div>${this.heading2}</div>
|
||||
<div class="headingSeparation"></div>
|
||||
|
||||
<!-- the actual table -->
|
||||
<style></style>
|
||||
${this.data.length > 0
|
||||
? (() => {
|
||||
const headings: string[] = Object.keys(this.data[0]);
|
||||
return html`
|
||||
<table>
|
||||
<tr>
|
||||
${headings.map(
|
||||
(headingArg) => html`
|
||||
<th>
|
||||
<div class="innerCellContainer">${headingArg}</div>
|
||||
</th>
|
||||
`
|
||||
)}
|
||||
</tr>
|
||||
${this.data.map(
|
||||
(itemArg) => html`
|
||||
<tr
|
||||
@click=${() => {
|
||||
this.selectedDataRow = itemArg;
|
||||
}}
|
||||
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||
>
|
||||
${headings.map(
|
||||
(headingArg) => html`
|
||||
<td>
|
||||
<div class="innerCellContainer">${itemArg[headingArg]}</div>
|
||||
</td>
|
||||
`
|
||||
)}
|
||||
</tr>
|
||||
`
|
||||
)}
|
||||
</table>
|
||||
`;
|
||||
})()
|
||||
: html` <div class="noDataSet">No data set!</div> `}
|
||||
<div class="tableStatistics">
|
||||
${this.data.length} data rows (total) |
|
||||
${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { customElement, LitElement, TemplateResult, html } from 'lit-element';
|
||||
import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@ -9,7 +9,7 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-toast')
|
||||
export class DeesToast extends LitElement {
|
||||
export class DeesToast extends DeesElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
|
||||
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
|
||||
import './dees-windowlayer';
|
||||
import { css, cssManager } from '@designestate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -12,13 +13,17 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-updater')
|
||||
export class DeesUpdater extends LitElement {
|
||||
public static demo = () => html`<dees-updater ></dees-updater>`;
|
||||
export class DeesUpdater extends DeesElement {
|
||||
public static demo = () => html`<dees-updater></dees-updater>`;
|
||||
|
||||
@property()
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
currentVersion: string;
|
||||
|
||||
@property()
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
updatedVersion: string;
|
||||
|
||||
constructor() {
|
||||
@ -26,22 +31,60 @@ export class DeesUpdater extends LitElement {
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.modalContainer {
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: none;
|
||||
font-size: 20px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.modalContainer {
|
||||
background: #333333;
|
||||
margin: auto;
|
||||
height: 200px;
|
||||
width: 800px;
|
||||
margin-top: 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<dees-windowlayer>
|
||||
<div class="modalContainer"></div>
|
||||
<dees-windowlayer @clicked="${this.windowLayerClicked}">
|
||||
<div class="modalContainer">
|
||||
<div class="headingContainer">
|
||||
<dees-spinner .size=${60}></dees-spinner>
|
||||
<h1>Updating the application...</h1>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<dees-button>More info</dees-button>
|
||||
<dees-button>Changelog</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</dees-windowlayer>>
|
||||
`;
|
||||
}
|
||||
|
||||
private windowLayerClicked() {
|
||||
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
|
||||
windowLayer.toggleVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
|
||||
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
|
||||
@ -9,9 +9,16 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-windowlayer')
|
||||
export class DeesWindowLayer extends LitElement {
|
||||
export class DeesWindowLayer extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Boolean
|
||||
})
|
||||
public visible = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.elementBasic.setup();
|
||||
@ -22,21 +29,28 @@ export class DeesWindowLayer extends LitElement {
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
.windowOverlay {
|
||||
transition: all 1s;
|
||||
transition: all 0.3s;
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.0);
|
||||
backdrop-filter: blur(0px);
|
||||
backdrop-filter: brightness(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(3px);
|
||||
backdrop-filter: brightness(0.3);
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div class="windowOverlay">
|
||||
<div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
@ -44,7 +58,15 @@ export class DeesWindowLayer extends LitElement {
|
||||
|
||||
firstUpdated() {
|
||||
setTimeout(() => {
|
||||
this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
|
||||
this.visible = true;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
dispatchClicked() {
|
||||
this.dispatchEvent(new CustomEvent('clicked'))
|
||||
}
|
||||
|
||||
public toggleVisibility () {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
export * from './dees-button';
|
||||
export * from './dees-form';
|
||||
export * from './dees-form-submit';
|
||||
export * from './dees-icon';
|
||||
export * from './dees-input-checkbox';
|
||||
export * from './dees-input-dropdown';
|
||||
export * from './dees-input-fileupload';
|
||||
export * from './dees-input-quantityselector';
|
||||
export * from './dees-input-radio';
|
||||
export * from './dees-input-text';
|
||||
export * from './dees-spinner';
|
||||
export * from './dees-toast';
|
||||
export * from './dees-updater';
|
||||
export * from './dees-windowlayer';
|
||||
export * from './dees-button-exit.js';
|
||||
export * from './dees-button.js';
|
||||
export * from './dees-chips.js';
|
||||
export * from './dees-form.js';
|
||||
export * from './dees-form-submit.js';
|
||||
export * from './dees-icon.js';
|
||||
export * from './dees-input-checkbox.js';
|
||||
export * from './dees-input-dropdown.js';
|
||||
export * from './dees-input-fileupload.js';
|
||||
export * from './dees-input-quantityselector.js';
|
||||
export * from './dees-input-radio.js';
|
||||
export * from './dees-input-text.js';
|
||||
export * from './dees-pdf.js';
|
||||
export * from './dees-speechbubble.js';
|
||||
export * from './dees-spinner.js';
|
||||
export * from './dees-stepper.js';
|
||||
export * from './dees-table.js';
|
||||
export * from './dees-toast.js';
|
||||
export * from './dees-updater.js';
|
||||
export * from './dees-windowlayer.js';
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export * from './elements/index';
|
||||
export * from './elements/index.js';
|
||||
export { commitinfo } from './00_commitinfo_data.js';
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom"],
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"inlineSourceMap": true,
|
||||
"noUnusedLocals": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"outDir": "dist/",
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"target": "ES2017",
|
||||
"moduleResolution": "Node"
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "Node12"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user