Compare commits

...

73 Commits

Author SHA1 Message Date
e3a6798469 1.0.80 2022-05-03 15:17:28 +02:00
60de4ef674 fix(core): update 2022-05-03 15:17:28 +02:00
02e029edbc 1.0.79 2022-04-29 15:54:39 +02:00
ff5a65bdce fix(core): update 2022-04-29 15:54:38 +02:00
daacbbd042 1.0.78 2022-04-29 10:17:21 +02:00
42b44be143 fix(core): update 2022-04-29 10:17:21 +02:00
7e4c186e66 1.0.77 2022-04-29 09:47:52 +02:00
f6823639cc fix(core): update 2022-04-29 09:47:52 +02:00
f292fd9692 1.0.76 2022-03-18 19:46:30 +01:00
fa2ab7730a fix(core): update 2022-03-18 19:46:30 +01:00
3a2ba14287 1.0.75 2022-03-18 19:40:29 +01:00
c1b5778d01 fix(core): update 2022-03-18 19:40:28 +01:00
24a5f48ce1 1.0.74 2022-01-24 01:39:48 +01:00
d43b80298b fix(core): update 2022-01-24 01:39:47 +01:00
27d338420c 1.0.73 2021-12-10 18:18:57 +01:00
81f2e662fb fix(core): update 2021-12-10 18:18:57 +01:00
d8905b687f 1.0.72 2021-11-27 17:38:53 +01:00
75f6da194b fix(core): update 2021-11-27 17:38:53 +01:00
e653450ec5 1.0.71 2021-11-26 20:06:10 +01:00
9de9f0c202 fix(core): update 2021-11-26 20:06:09 +01:00
75929c089d 1.0.70 2021-10-08 16:07:41 +02:00
6a97e8d020 fix(core): update 2021-10-08 16:07:40 +02:00
6aeb970bbe 1.0.69 2021-10-08 14:19:56 +02:00
ea7fa0816d fix(core): update 2021-10-08 14:19:55 +02:00
1b1de04f86 1.0.68 2021-10-07 18:47:36 +02:00
7941628d1d fix(core): update 2021-10-07 18:47:36 +02:00
369437ceba 1.0.67 2021-10-07 18:01:05 +02:00
72f7782898 fix(core): update 2021-10-07 18:01:05 +02:00
820d6ae40f 1.0.66 2021-09-15 13:10:28 +02:00
5dd3da9f31 fix(core): update 2021-09-15 13:10:28 +02:00
3ce0683a05 1.0.65 2021-09-15 00:59:51 +02:00
00d41f1b6e fix(core): update 2021-09-15 00:59:50 +02:00
caba7ada28 1.0.64 2021-09-15 00:48:29 +02:00
6cff32cc36 fix(core): update 2021-09-15 00:48:29 +02:00
e6e8ac9782 1.0.63 2021-09-15 00:45:15 +02:00
7a13fdcd95 fix(core): update 2021-09-15 00:45:14 +02:00
c450fb32ea 1.0.62 2021-09-14 17:31:16 +02:00
6554bfd721 fix(core): update 2021-09-14 17:31:16 +02:00
9ce4ca14b8 1.0.61 2021-09-10 15:56:37 +02:00
76bcda760c fix(core): update 2021-09-10 15:56:37 +02:00
6949aed381 1.0.60 2021-09-10 15:51:30 +02:00
1f3502685f fix(core): update 2021-09-10 15:51:30 +02:00
8d1451fffa 1.0.59 2021-09-10 15:42:16 +02:00
8b2fedf1d6 fix(core): update 2021-09-10 15:42:16 +02:00
30ffb2650a 1.0.58 2021-09-10 15:23:54 +02:00
55b65c7e4c fix(core): update 2021-09-10 15:23:54 +02:00
5c81dd540a 1.0.57 2021-09-10 15:02:48 +02:00
cb5bc809ea fix(core): update 2021-09-10 15:02:48 +02:00
ab1956c452 1.0.56 2021-09-09 00:35:11 +02:00
3b99796073 fix(core): update 2021-09-09 00:35:10 +02:00
20755775ea 1.0.55 2021-09-09 00:06:06 +02:00
4e1b797377 fix(core): update 2021-09-09 00:06:05 +02:00
4a3aa2d6d9 1.0.54 2021-09-09 00:02:36 +02:00
4e49045444 fix(core): update 2021-09-09 00:02:35 +02:00
9e54c973d5 1.0.53 2021-09-01 22:44:44 +02:00
122c535dec fix(core): update 2021-09-01 22:44:43 +02:00
aabda883cd 1.0.52 2021-09-01 22:43:32 +02:00
5890977009 fix(core): update 2021-09-01 22:43:31 +02:00
f4aebcf4e6 1.0.51 2021-09-01 21:48:22 +02:00
66bf117bfc fix(core): update 2021-09-01 21:48:22 +02:00
f7ee4d77fd 1.0.50 2021-08-29 17:10:25 +02:00
ab19e97c31 fix(core): update 2021-08-29 17:10:25 +02:00
631502b480 1.0.49 2021-08-27 14:51:29 +02:00
ea519cf543 1.0.48 2021-08-27 14:48:59 +02:00
91c97cad1d fix(core): update 2021-08-27 14:48:58 +02:00
de958303e3 1.0.47 2021-08-27 14:27:19 +02:00
95192ea3ce fix(core): update 2021-08-27 14:27:18 +02:00
0b1e50bbc6 1.0.46 2021-08-27 14:25:45 +02:00
888f07db79 fix(core): update 2021-08-27 14:25:44 +02:00
e14d83b3a7 1.0.45 2021-08-27 14:17:10 +02:00
f4055fb8c1 fix(core): update 2021-08-27 14:17:09 +02:00
d0d4638264 1.0.44 2021-08-27 14:02:38 +02:00
7d63f16fc1 fix(core): update 2021-08-27 14:02:37 +02:00
28 changed files with 10026 additions and 17953 deletions

View File

@ -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
View File

@ -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"
}
]
}

View File

@ -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>

View File

@ -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();

View File

@ -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,

View File

@ -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"

26875
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,36 +1,34 @@
{
"name": "@designestate/dees-catalog",
"version": "1.0.43",
"version": "1.0.80",
"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 --skiplibcheck && 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.14",
"@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"
},
"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": "^1.0.103",
"@gitzone/tstest": "^1.0.70",
"@gitzone/tswatch": "^1.0.81",
"@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^5.0.3"
},
"files": [
"ts/**/*",

View File

@ -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();

View File

@ -0,0 +1,8 @@
/**
* autocreated commitinfo by @pushrocks/commitinfo
*/
export const commitinfo = {
name: '@designestate/dees-catalog',
version: '1.0.80',
description: 'website for lossless.com'
}

View File

@ -64,6 +64,7 @@ export class DeesButton extends DeesElement {
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
box-sizing: border-box;
@ -73,14 +74,15 @@ 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;
@ -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;
}
@ -145,17 +147,20 @@ export class DeesButton extends DeesElement {
}
.button.pending {
background: #0277bd70;
border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
color: #fff;
}
.button.success {
background: #8BC34A70;
border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
color: #fff;
}
.button.error {
background: #E64A1970;
border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
color: #fff;
}

View 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: 30px;
margin-right: 3px;
margin-bottom: 7px;
}
.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);
}
}

View File

@ -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 {

View File

@ -1,13 +1,15 @@
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';
export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
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
>;
declare global {
interface HTMLElementTagNameMap {
@ -18,18 +20,25 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = () => html`
<dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget;
form.setStatus('pending', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}>
<dees-form
style="display: block; margin:auto; max-width: 500px; padding: 20px"
@formData=${async (eventArg) => {
const form: DeesForm = eventArg.currentTarget;
form.setStatus('pending', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}
>
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
<dees-input-checkbox
.required="${true}"
key="hello3"
label="another text"
></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit>
</dees-form>
`;
`;
public name: string = 'myform';
public changeSubject = new domtools.rxjs.Subject();
@ -61,9 +70,13 @@ export class DeesForm extends DeesElement {
public getFormChildren() {
const children: Array<DeesElement> = this.children as any;
const formChildren: TFormElement = [];
for (const child of children) {
if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
if (
child instanceof DeesInputCheckbox ||
child instanceof DeesInputText ||
child instanceof DeesInputQuantitySelector
) {
formChildren.push(child);
}
}
@ -74,7 +87,7 @@ export class DeesForm extends DeesElement {
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
if(childArg instanceof DeesFormSubmit) {
if (childArg instanceof DeesFormSubmit) {
submitButton = childArg;
}
}
@ -82,21 +95,22 @@ export class DeesForm extends DeesElement {
}
public async checkRequiredStatus() {
console.log('checking the required status.')
console.log('checking the required status.');
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
if (childArg.required && !childArg.value) {
requiredOK = false;
}
}
this.getSubmitButton().disabled = !requiredOK;
if (this.getSubmitButton()) {
this.getSubmitButton().disabled = !requiredOK;
}
}
public async gatherData() {
const children = this.getFormChildren();
const valueObject: { [key: string]: string | number | boolean} = {};
const valueObject: { [key: string]: string | number | boolean } = {};
for (const child of children) {
valueObject[child.key] = child.value;
}
@ -107,20 +121,30 @@ export class DeesForm extends DeesElement {
const valueObject = await this.gatherData();
const formDataEvent = new CustomEvent('formData', {
detail: {
data: valueObject
data: valueObject,
},
bubbles: true
bubbles: true,
});
this.dispatchEvent(formDataEvent);
console.log('dispatched data:')
console.log('dispatched data:');
console.log(valueObject);
}
public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
public setStatus(
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
textStateArg: string
) {
const inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton();
switch(visualStateArg) {
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';
@ -135,9 +159,15 @@ export class DeesForm extends DeesElement {
inputChild.disabled = true;
}
break;
case 'error':
submitButton.disabled = true;
submitButton.status = 'error';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
break;
}
submitButton.text = textStateArg;
}
}
}

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -27,7 +27,7 @@ export class DeesInputText extends DeesElement {
@property({
type: String
})
public value: string;
public value: string = '';
@property({
type: Boolean
@ -94,7 +94,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>
`;
}

View File

View File

@ -45,7 +45,7 @@ export class DeesSpinner extends DeesElement {
}
#loading {
transition: all 0.3s;
transition: none;
display: flex;
justify-content: center;
align-content: center;

View 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];
}
}

View File

@ -0,0 +1,243 @@
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: #fff;
font-family: Roboto Mono;
padding: 20px;
display: block;
width: 100%;
min-height: 50px;
background: #393939;
border-radius: 3px;
}
.headingSeparation {
margin-top: 7px;
border-bottom: 1px solid #bcbcbc;
}
table,
.noDataSet {
margin-top: 20px;
color: #fff;
border-collapse: collapse;
width: 100%;
}
.noDataSet {
text-align: center;
}
tr {
border-bottom: 1px dashed #808080;
text-align: left;
}
tr:last-child {
border-bottom: none;
text-align: left;
}
tr:hover {
cursor: pointer;
}
tr:hover .innerCellContainer {
background: #ffffff10;
}
tr:first-child:hover {
cursor: auto;
}
tr:first-child:hover .innerCellContainer {
background: none;
}
tr.selected .innerCellContainer {
background: #ffffff20
}
th {
text-transform: uppercase;
}
th,
td {
padding: 3px 0px;
border-right: 1px dashed #808080;
}
.innerCellContainer {
padding: 7px 10px;
}
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: 5px 20px;
font-size: 14px;
color: #ffffff90;
background: #00000050;
margin: 20px -20px -20px -20px;
}
`,
];
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() {}
}

View File

@ -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();

View File

@ -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();
}
}

View File

@ -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;
}
}

View File

@ -1,14 +1,17 @@
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.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-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';

View File

@ -1 +1,2 @@
export * from './elements/index';
export * from './elements/index.js';
export { commitinfo } from './00_commitinfo_data';

View File

@ -1,7 +1,8 @@
{
"compilerOptions": {
"experimentalDecorators": true,
"target": "ES2017",
"moduleResolution": "Node"
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "Node12"
}
}