Compare commits

...

70 Commits

Author SHA1 Message Date
26b72fbccf 1.0.112 2023-01-07 14:23:17 +01:00
8acf3f4196 fix(core): update 2023-01-07 14:23:17 +01:00
75c8b409cc 1.0.111 2023-01-07 14:12:19 +01:00
6509ddb81c fix(core): update 2023-01-07 14:12:18 +01:00
7cc0173e3c 1.0.110 2023-01-07 14:09:46 +01:00
f797d71e52 fix(core): update 2023-01-07 14:09:45 +01:00
54db88e4b4 1.0.109 2023-01-07 13:41:24 +01:00
93c73c36c8 fix(core): update 2023-01-07 13:41:24 +01:00
9c9bd4a180 1.0.108 2023-01-07 13:27:25 +01:00
0a54de3e59 fix(core): update 2023-01-07 13:27:24 +01:00
d6b4b59e6d 1.0.107 2023-01-03 17:37:11 +01:00
c4236d28c6 fix(core): update 2023-01-03 17:37:10 +01:00
5f1b29f742 1.0.106 2022-12-11 17:24:13 +01:00
e7978a22e4 fix(core): update 2022-12-11 17:24:12 +01:00
15de86774b 1.0.105 2022-12-07 14:54:41 +01:00
8f57647c85 fix(core): update 2022-12-07 14:54:40 +01:00
59c5bcabd5 1.0.104 2022-12-07 02:28:31 +01:00
cae421e140 fix(core): update 2022-12-07 02:28:31 +01:00
05b2b09395 1.0.103 2022-12-06 14:07:12 +01:00
4dbd4f84c1 fix(core): update 2022-12-06 14:07:12 +01:00
bb0ca2f19d 1.0.102 2022-12-06 13:32:01 +01:00
55175f9ac7 fix(core): update 2022-12-06 13:32:00 +01:00
0be0f9fa34 1.0.101 2022-12-06 13:11:06 +01:00
7baab5d7ea fix(core): update 2022-12-06 13:11:06 +01:00
c3bdec176b 1.0.100 2022-08-18 02:15:41 +02:00
2a84e2c270 fix(core): update 2022-08-18 02:15:41 +02:00
c86f7d466c 1.0.99 2022-08-18 02:11:36 +02:00
9a6db7d882 fix(core): update 2022-08-18 02:11:35 +02:00
b69b1179a1 1.0.98 2022-08-17 19:56:22 +02:00
0df9fe750c fix(core): update 2022-08-17 19:56:22 +02:00
0d05bfa5ff 1.0.97 2022-08-17 19:28:12 +02:00
4dc9e04c2e fix(core): update 2022-08-17 19:28:11 +02:00
5341a0d6b6 1.0.96 2022-08-17 19:27:14 +02:00
615bea9fc4 fix(core): update 2022-08-17 19:27:14 +02:00
e518bc6976 1.0.95 2022-08-17 18:49:34 +02:00
076f8c7a91 fix(core): update 2022-08-17 18:49:33 +02:00
b016b959cf 1.0.94 2022-07-14 23:29:25 +02:00
eca68e28a2 fix(core): update 2022-07-14 23:29:25 +02:00
68a164aac2 1.0.93 2022-06-26 15:04:05 +02:00
9b5448e096 fix(core): update 2022-06-26 15:04:04 +02:00
232d063485 1.0.92 2022-06-10 15:50:57 +02:00
6a357cb227 fix(core): update 2022-06-10 15:50:56 +02:00
7b8218ab77 1.0.91 2022-05-30 23:15:33 +02:00
5b6436b023 fix(core): update 2022-05-30 23:15:32 +02:00
57edbb872b 1.0.90 2022-05-26 21:23:55 +02:00
76f82fe15e fix(core): update 2022-05-26 21:23:55 +02:00
0b03718f4a 1.0.89 2022-05-26 20:03:19 +02:00
2754de26d8 fix(core): update 2022-05-26 20:03:18 +02:00
abc91600e2 1.0.88 2022-05-26 18:07:02 +02:00
6a8a4aa4d2 fix(core): update 2022-05-26 18:07:02 +02:00
6a6f3b1907 1.0.87 2022-05-24 09:13:15 +02:00
0dc8e21e07 fix(core): update 2022-05-24 09:13:15 +02:00
68ccc02699 1.0.86 2022-05-20 21:04:59 +02:00
ed1c18b8ac fix(core): update 2022-05-20 21:04:59 +02:00
e8cc4c7c90 1.0.85 2022-05-20 19:51:21 +02:00
187ebed3ab fix(core): update 2022-05-20 19:51:20 +02:00
b909617271 1.0.84 2022-05-20 19:48:48 +02:00
9c2fe9f739 fix(core): update 2022-05-20 19:48:48 +02:00
ed49de64bc 1.0.83 2022-05-20 19:43:17 +02:00
162003ba7a fix(core): update 2022-05-20 19:43:16 +02:00
5f793f0acc 1.0.82 2022-05-20 18:54:49 +02:00
d23b298bd5 fix(core): update 2022-05-20 18:54:49 +02:00
f9e2f00e9b 1.0.81 2022-05-20 18:44:33 +02:00
6c3645f2f8 fix(core): update 2022-05-20 18:44:33 +02:00
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
28 changed files with 5517 additions and 19797 deletions

View File

@ -13,31 +13,24 @@ stages:
- metadata
before_script:
- npm install -g @shipzone/npmci
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
mirror:
stage: security
script:
- npmci git mirror
only:
- tags
tags:
- lossless
- docker
- notpriv
# ====================
# security stage
# ====================
auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --production --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=prod --production
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --prod
tags:
- lossless
- docker
allow_failure: true
@ -45,11 +38,10 @@ auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=dev
- npmci command pnpm audit --audit-level=high --dev
tags:
- lossless
- docker
allow_failure: true
@ -60,7 +52,6 @@ auditDevDependencies:
testStable:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci npm test
@ -71,10 +62,9 @@ testStable:
testBuild:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command npm run build
- npmci npm build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- docker
@ -122,11 +112,9 @@ trigger:
pages:
stage: metadata
script:
- npmci node install lts
- npmci command npm install -g @gitzone/tsdoc
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command tsdoc
- npmci command npm run buildDocs
tags:
- lossless
- docker

View File

@ -1,5 +1,5 @@
<!--gitzone element-->
<!-- made by Lossless GmbH -->
<!-- made by Task Venture Capital GmbH -->
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
<html lang="en">
<head>
@ -10,6 +10,12 @@
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
body {
margin: 0px;
@ -17,7 +23,7 @@
}
</style>
<script src="./bundle.js"></script>
<script type="module" src="/bundle.js"></script>
</head>
<body>
</body>

19645
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "@designestate/dees-catalog",
"version": "1.0.77",
"version": "1.0.112",
"private": false,
"description": "website for lossless.com",
"main": "dist_ts_web/index.js",
@ -8,27 +8,32 @@
"type": "module",
"scripts": {
"test": "tstest test/ --web",
"build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --production",
"watch": "tswatch element"
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
"watch": "tswatch element",
"buildDocs": "tsdoc"
},
"author": "Lossless GmbH",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^2.0.19",
"@designestate/dees-element": "^2.0.12",
"@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"
"@designestate/dees-domtools": "^2.0.28",
"@designestate/dees-element": "^2.0.18",
"@designestate/dees-wcctools": "^1.0.75",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@pushrocks/smartpromise": "^3.1.7",
"@tsclass/tsclass": "^4.0.28",
"pdfjs-dist": "^2.15.349"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.61",
"@gitzone/tsbundle": "^1.0.102",
"@gitzone/tstest": "^1.0.70",
"@gitzone/tswatch": "^1.0.81",
"@gitzone/tsbuild": "^2.1.65",
"@gitzone/tsbundle": "^2.0.7",
"@gitzone/tstest": "^1.0.74",
"@gitzone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^5.0.3"
"@pushrocks/tapbundle": "^5.0.4",
"@types/node": "^18.11.18"
},
"files": [
"ts/**/*",

4691
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
## Usage
@ -35,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
For further information read the linked docs at the top of this readme.
> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
## Legal
> MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

View File

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

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

View File

@ -74,7 +74,7 @@ export class DeesButton extends DeesElement {
}
.button {
transition: all 0.1s ease;
transition: none;
position: relative;
font-size: 14px;
display: flex;
@ -84,9 +84,9 @@ export class DeesButton extends DeesElement {
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;
border-radius: 4px;
line-height: 40px;
padding: 0px 10px;
padding: 0px 8px;
min-width: 100px;
user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')};
@ -143,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 {
@ -182,7 +182,7 @@ export class DeesButton extends DeesElement {
${this.status === 'normal' ? html``: html`
<dees-spinner status="${this.status}"></dees-spinner>
`}
<div class="textbox">${this.text ? this.text : html`<slot></slot>`}</div>
<div class="textbox">${this.text ? this.text : this.textContent}</div>
</div>
`;
}

View File

@ -65,9 +65,9 @@ export class DeesChips extends DeesElement {
padding: 8px 12px;
font-size: 14px;
color: #fff;
border-radius: 30px;
margin-right: 3px;
margin-bottom: 7px;
border-radius: 40px;
margin-right: 4px;
margin-bottom: 8px;
}
.chip:hover {

View File

@ -10,6 +10,8 @@ import {
faMedium,
faSlackHash,
faTwitter,
faInstagram,
faTiktok,
} from '@fortawesome/free-brands-svg-icons';
import {} from '@fortawesome/free-regular-svg-icons';
@ -22,10 +24,12 @@ type TFontAwesomeIcon =
// brands
| 'facebook'
| 'google'
| 'twitter'
| 'linkedin'
| 'instagram'
| 'medium'
| 'slack'
| 'tiktok'
| 'twitter'
| 'users';
const faIcons: { [key: string]: IconDefinition } = {
// normal
@ -34,9 +38,11 @@ const faIcons: { [key: string]: IconDefinition } = {
// brands
facebook: faFacebook,
google: faGoogle,
instagram: faInstagram,
linkedin: faLinkedin,
medium: faMedium,
slack: faSlackHash,
tiktok: faTiktok,
twitter: faTwitter,
users: faUsers,
};
@ -51,7 +57,7 @@ declare global {
export class DeesIcon extends DeesElement {
public static demo = () => html`
<dees-icon iconName="visibility"></dees-icon>
<div style="background: #fff; padding: 10px;">
<div style="background: #fff; padding: 10px; font-size: 24px">
<dees-icon iconName="visibility"></dees-icon>
<dees-icon brandName="facebook"></dees-icon>
</div>
@ -79,43 +85,42 @@ export class DeesIcon extends DeesElement {
display: block;
line-height: inherit;
font-size: inherit;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
#iconContainer svg {
display: inline-block;
height: ${this.svgSize}px;
}
.material-icons {
font-family: 'Material Icons';
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
line-height: inherit;
font-size: inherit;
font-size: inherit; /* Preferred icon size */
display: inline-block;
line-height: inherit;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
</style>
${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
${this.iconName
? html`
<i
class="material-symbols-outlined"
>
${this.iconName}
</i>`
: html``}
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
`;
}
firstUpdated() {
public async firstUpdated() {
if (this.brandName && !this.iconName) {
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
faIcons[this.brandName]

View File

@ -19,7 +19,7 @@ declare global {
@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesElement {
public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@ -48,12 +48,17 @@ export class DeesInputFileupload extends DeesElement {
public required: boolean = false;
@property({
type: Boolean
type: Boolean,
})
public disabled: boolean = false;
@property({
type: String,
})
public buttonText: string = 'Upload File...';
constructor() {
super()
super();
}
public static styles = [
@ -66,8 +71,13 @@ export class DeesInputFileupload extends DeesElement {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.maincontainer {
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.label {
@ -78,40 +88,74 @@ export class DeesInputFileupload extends DeesElement {
.uploadButton {
position: relative;
cursor: pointer;
padding: 20px 20px;
max-width: 200px;
padding: 8px;
max-width: 600px;
background: ${cssManager.bdTheme('#fafafa', '#333333')};
border-radius: 3px;
text-align: center;
}
.uploadButton:hover {
color: #fff;
background: rgb(3, 155, 229);
}
.uploadButton::after {
top: 7px;
right: 7px;
left: 7px;
bottom: 7px;
transform: scale3d(0.9, 0.9, 1);
top: 2px;
right: 2px;
left: 2px;
bottom: 2px;
transform: scale3d(0.98, 0.9, 1);
position: absolute;
content: '';
display: block;
border: 4px dashed rgba(255, 255, 255, 0);
border: 2px dashed rgba(255, 255, 255, 0);
transition: all 0.2s;
}
.uploadButton.dragOver::after {
transform: scale3d(1, 1, 1);
border: 4px dashed rgba(255, 255, 255, 0.3);
border: 2px dashed rgba(255, 255, 255, 0.3);
}
.uploadCandidate {
text-align: left;
border-bottom: 1px dashed #444;
color: ${cssManager.bdTheme('#666', '#ccc')};
padding: 8px;
font-family: 'Inter';
}
.uploadButton:hover .uploadCandidate {
color: ${cssManager.bdTheme('#fff', '#fff')};
border-bottom: 1px dashed #fff;
}
.uploadCandidate:last-child {
margin-bottom: 8px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="hidden">
<input type="file"></div>
</div>
<div class="maincontainer">
${this.label ? html`<div class="label">${this.label}</div>` : null}
<div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
<div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
${this.buttonText}
</div>
</div>
`;
}
public async openFileSelector() {
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
inputFile.click();
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
this.value = target.value;
@ -122,18 +166,24 @@ export class DeesInputFileupload extends DeesElement {
const dropArea = this.shadowRoot.querySelector('.uploadButton');
const handlerFunction = (eventArg: DragEvent) => {
eventArg.preventDefault();
switch(eventArg.type) {
switch (eventArg.type) {
case 'dragover':
this.state = 'dragOver';
this.buttonText = 'release to upload file...';
break;
case 'dragleave':
this.state = 'idle';
this.buttonText = 'Upload File...';
break;
case 'drop':
this.state = 'idle';
this.buttonText = 'Upload more files...';
}
console.log(eventArg);
for (const file of Array.from(eventArg.dataTransfer.files)) {
this.value.push(file);
};
this.requestUpdate();
}
console.log(`Got ${this.value.length} files!`);
};
dropArea.addEventListener('dragenter', handlerFunction, false);

View File

@ -57,6 +57,7 @@ export class DeesInputQuantitySelector extends DeesElement {
min-width: 100px;
color: ${this.goBright ? '#666' : '#CCC'};
border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
border-radius: 4px;
}
.mainContainer:hover {

View File

@ -77,6 +77,7 @@ export class DeesInputText extends DeesElement {
transition: all 0.2s;
outline: none;
font-size: 16px;
font-family: Inter;
color: ${this.goBright ? '#333' : '#ccc'};
}

View File

@ -0,0 +1,188 @@
import * as plugins from './plugins.js';
import {
cssManager,
css,
customElement,
DeesElement,
domtools,
html,
property,
} from '@designestate/dees-element';
import { DeesWindowLayer } from './dees-windowlayer.js';
@customElement('dees-mobilenavigation')
export class DeesMobilenavigation extends DeesElement {
// STATIC
public static demo = () => html`
<dees-mobilenavigation
.menuItems="${[
{
name: 'hello1',
action: async () => {},
},
{
name: 'hello2',
action: async () => {},
},
{
name: 'hello3',
action: async () => {},
},
]}"
></dees-mobilenavigation>
`;
private static singletonRef: DeesMobilenavigation;
public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
if (!this.singletonRef) {
this.singletonRef = new DeesMobilenavigation();
document.body.append(this.singletonRef);
await this.singletonRef.init();
}
this.singletonRef.menuItems = menuItemsArg;
await this.singletonRef.readyDeferred.promise;
this.singletonRef.show();
return this.singletonRef;
}
// INSTANCE
@property({
type: Array,
})
public heading: string = `MENU`;
@property({
type: Array,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
readyDeferred = domtools.plugins.smartpromise.defer();
constructor() {
super();
/* this.init().then(() => {
this.show();
}); */
}
/**
* inits the mobile navigation
*/
public async init() {
await this.updateComplete;
this.readyDeferred.resolve();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
}
.main {
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
position: fixed;
height: 100vh;
min-width: 280px;
transform: translateX(200px);
color: ${cssManager.bdTheme('#333', '#fff')};
z-index: 250;
opacity: 0;
padding: 16px 32px;
right: 0px;
top: 0px;
bottom: 0px;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
border-left: 1px dashed #444;
pointer-events: none;
}
.main.show {
pointer-events: all;
transform: translateX(0px);
opacity: 1;
}
.menuItem {
text-align: left;
padding: 8px;
margin-left: -8px;
margin-right: -8px;
cursor: pointer;
border-radius: 3px;
}
.menuItem:hover {
background: ${cssManager.bdTheme('#CCC', '#333')};;
}
.heading {
text-align: left;
font-size: 24px;
padding: 8px 0px;
font-family: Inter;
font-weight: 300;
border-bottom: 1px dashed #444;
margin-top: 16px;
margin-bottom: 16px;
}
`,
];
public render() {
return html`
<div class="main">
<div class="heading">${this.heading}</div>
${this.menuItems.map((menuItem) => {
return html`
<div
class="menuItem"
@click="${() => {
this.hide();
menuItem.action();
}}"
>
${menuItem.name}
</div>
`;
})}
</div>
`;
}
private windowLayer: DeesWindowLayer;
/**
* inits the show
*/
public async show() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
if (!this.windowLayer) {
this.windowLayer = new DeesWindowLayer();
this.windowLayer.addEventListener('click', () => {
this.hide();
});
}
document.body.append(this.windowLayer);
await domtools.convenience.smartdelay.delayFor(0);
this.windowLayer.show();
await domtools.convenience.smartdelay.delayFor(0);
main.classList.add('show');
}
/**
* inits the hide function
*/
public async hide() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
main.classList.remove('show');
this.windowLayer.hide();
}
async disconnectedCallback() {
document.body.removeChild(this.windowLayer);
}
}

119
ts_web/elements/dees-pdf.ts Normal file
View File

@ -0,0 +1,119 @@
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
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: 'Inter', 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);
}
);
}
}

View File

View File

View 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 API-driven.</div>
</div>
`;
}
public async handleClick() {
if (this.disabled) {
return;
}
globalThis.location.href = "https://api.global"
}
public async firstUpdated() {
if (!this.textContent) {
this.textContent = 'Button';
this.performUpdate();
}
}
}

View File

@ -153,7 +153,7 @@ export class DeesStepper extends DeesElement {
.step .title {
text-align: center;
padding-top: 50px;
font-family: Roboto;
font-family: Inter;
font-size: 25px;
font-weight: 300;
}
@ -229,7 +229,8 @@ export class DeesStepper extends DeesElement {
{
vertical: true,
horizontal: false,
easing: 'easeInOutQuint',
easing: 'easeInOutExpo',
duration: 700,
},
stepperContainer
);

View File

@ -7,6 +7,7 @@ import {
cssManager,
css,
unsafeCSS,
state,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@ -17,6 +18,13 @@ declare global {
}
}
export interface IDataAction<T = any> {
name: string;
iconName: string;
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
actionFunc: (itemArg: T) => Promise<any>;
}
@customElement('dees-table')
export class DeesTable<T> extends DeesElement {
public static demo = () => html`
@ -61,11 +69,26 @@ export class DeesTable<T> extends DeesElement {
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
>This is a slotted Text</dees-table
>
.dataActions="${[{
name: 'upload',
iconName: 'upload',
useTableBehaviour: 'upload',
actionFunc: async (itemArg: any) => {
},
},{
name: 'visibility',
iconName: 'visibility',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {
},
}] as IDataAction[]}"
>This is a slotted Text</dees-table>
</div>
`;
// INSTANCE
@property({
type: String,
})
@ -81,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
})
public data: T[] = [];
@property({
type: Array,
})
public dataActions: IDataAction[] = [];
@property({
type: Object,
})
@ -96,6 +124,9 @@ export class DeesTable<T> extends DeesElement {
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
public files: File[] = [];
public fileWeakMap = new WeakMap();
constructor() {
super();
}
@ -104,24 +135,27 @@ export class DeesTable<T> extends DeesElement {
cssManager.defaultStyles,
css`
.mainbox {
color: #fff;
font-family: Roboto Mono;
padding: 20px;
color: ${cssManager.bdTheme('#333', '#fff')};
font-family: Inter;
font-size: 16px;
padding: 16px;
display: block;
width: 100%;
min-height: 50px;
background: #393939;
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 #bcbcbc;
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
}
table,
.noDataSet {
margin-top: 20px;
color: #fff;
margin-top: 16px;
color: ${cssManager.bdTheme('#333', '#fff')};
border-collapse: collapse;
width: 100%;
}
@ -129,7 +163,7 @@ export class DeesTable<T> extends DeesElement {
text-align: center;
}
tr {
border-bottom: 1px dashed #808080;
border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
text-align: left;
}
tr:last-child {
@ -140,7 +174,7 @@ export class DeesTable<T> extends DeesElement {
cursor: pointer;
}
tr:hover .innerCellContainer {
background: #ffffff10;
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
}
tr:first-child:hover {
cursor: auto;
@ -149,7 +183,7 @@ export class DeesTable<T> extends DeesElement {
background: none;
}
tr.selected .innerCellContainer {
background: #ffffff20
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
}
th {
text-transform: uppercase;
@ -157,10 +191,10 @@ export class DeesTable<T> extends DeesElement {
th,
td {
padding: 3px 0px;
border-right: 1px dashed #808080;
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
}
.innerCellContainer {
padding: 7px 10px;
padding: 6px 8px;
}
th:first-child .innerCellContainer,
td:first-child .innerCellContainer {
@ -175,12 +209,30 @@ export class DeesTable<T> extends DeesElement {
border-right: none;
}
.action {
margin: -8px 0px;
padding: 8px;
line-height: 16px;
display: inline-block;
}
.action:first-child {
margin-left: -8px;
width: min-content;
}
.action:hover {
background: ${cssManager.bdTheme('#CCC', '#111')};
}
.tableStatistics {
padding: 5px 20px;
font-size: 14px;
color: #ffffff90;
background: #00000050;
margin: 20px -20px -20px -20px;
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;
}
`,
];
@ -208,6 +260,15 @@ export class DeesTable<T> extends DeesElement {
</th>
`
)}
${(() => {
if (this.dataActions && this.dataActions.length > 0) {
return html`
<th>
<div class="innerCellContainer">Actions</div>
</th>
`;
}
})()}
</tr>
${this.data.map(
(itemArg) => html`
@ -215,6 +276,38 @@ export class DeesTable<T> extends DeesElement {
@click=${() => {
this.selectedDataRow = itemArg;
}}
@dragenter=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragenter');
eventArg.preventDefault();
eventArg.stopPropagation();
(eventArg.target as HTMLElement).parentElement.style.background = '#800000';
}}
@dragleave=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragleave');
eventArg.preventDefault();
eventArg.stopPropagation();
(eventArg.target as HTMLElement).parentElement.style.background = 'none';
}}
@dragover=${async (eventArg: DragEvent) => {
eventArg.preventDefault();
}}
@drop=${async (eventArg: DragEvent) => {
eventArg.preventDefault();
const newFiles = []
for (const file of Array.from(eventArg.dataTransfer.files)) {
this.files.push(file);
newFiles.push(file);
this.requestUpdate();
}
const result: File[] = this.fileWeakMap.get(itemArg as object);
if (!result) {
this.fileWeakMap.set(itemArg as object, newFiles)
} else {
result.push(...newFiles);
}
}}
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
@ -224,6 +317,25 @@ export class DeesTable<T> extends DeesElement {
</td>
`
)}
${(() => {
if (this.dataActions && this.dataActions.length > 0) {
return html`
<td>
<div class="innerCellContainer">
${(() => {
const actions: TemplateResult[] = [];
for (const action of this.dataActions) {
actions.push(html`<div class="action">${action.iconName ? html`
<dees-icon .iconName=${'upload_file'}></dees-icon>
` : action.name}</div>`)
}
return actions;
})()}
</div>
</td>
`;
}
})()}
</tr>
`
)}
@ -233,7 +345,9 @@ export class DeesTable<T> extends DeesElement {
: 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`}
${this.selectedDataRow
? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
: html`No row selected`}
</div>
</div>
`;

View File

@ -42,6 +42,7 @@ export class DeesWindowLayer extends DeesElement {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: brightness(1);
pointer-events: none;
z-index: 200;
}
.visible {
@ -63,10 +64,22 @@ export class DeesWindowLayer extends DeesElement {
}
dispatchClicked() {
this.dispatchEvent(new CustomEvent('clicked'))
this.dispatchEvent(new CustomEvent('clicked'));
}
public toggleVisibility () {
this.visible = !this.visible;
}
public async show() {
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(0);
this.visible = true;
}
public async hide() {
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(0);
this.visible = false;
}
}

View File

@ -1,3 +1,4 @@
export * from './dees-button-exit.js';
export * from './dees-button.js';
export * from './dees-chips.js';
export * from './dees-form.js';
@ -9,6 +10,9 @@ 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-mobilenavigation.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';

View File

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

View File

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

View File

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

View File

@ -1,8 +1,10 @@
{
"compilerOptions": {
"experimentalDecorators": true,
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "Node12"
"useDefineForClassFields": false,
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "nodenext",
"esModuleInterop": true
}
}

View File

@ -1,17 +0,0 @@
{
"extends": ["tslint:latest", "tslint-config-prettier"],
"rules": {
"semicolon": [true, "always"],
"no-console": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"member-ordering": {
"options":{
"order": [
"static-method"
]
}
}
},
"defaultSeverity": "warning"
}