Compare commits
36 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 75c8b409cc | |||
| 6509ddb81c | |||
| 7cc0173e3c | |||
| f797d71e52 | |||
| 54db88e4b4 | |||
| 93c73c36c8 | |||
| 9c9bd4a180 | |||
| 0a54de3e59 | |||
| d6b4b59e6d | |||
| c4236d28c6 | |||
| 5f1b29f742 | |||
| e7978a22e4 | |||
| 15de86774b | |||
| 8f57647c85 | |||
| 59c5bcabd5 | |||
| cae421e140 | |||
| 05b2b09395 | |||
| 4dbd4f84c1 | |||
| bb0ca2f19d | |||
| 55175f9ac7 | |||
| 0be0f9fa34 | |||
| 7baab5d7ea | |||
| c3bdec176b | |||
| 2a84e2c270 | |||
| c86f7d466c | |||
| 9a6db7d882 | |||
| b69b1179a1 | |||
| 0df9fe750c | |||
| 0d05bfa5ff | |||
| 4dc9e04c2e | |||
| 5341a0d6b6 | |||
| 615bea9fc4 | |||
| e518bc6976 | |||
| 076f8c7a91 | |||
| b016b959cf | |||
| eca68e28a2 |
@ -13,31 +13,24 @@ stages:
|
|||||||
- metadata
|
- metadata
|
||||||
|
|
||||||
before_script:
|
before_script:
|
||||||
- npm install -g @shipzone/npmci
|
- pnpm install -g pnpm
|
||||||
|
- pnpm install -g @shipzone/npmci
|
||||||
|
- npmci npm prepare
|
||||||
|
|
||||||
# ====================
|
# ====================
|
||||||
# security stage
|
# security stage
|
||||||
# ====================
|
# ====================
|
||||||
mirror:
|
# ====================
|
||||||
stage: security
|
# security stage
|
||||||
script:
|
# ====================
|
||||||
- npmci git mirror
|
|
||||||
only:
|
|
||||||
- tags
|
|
||||||
tags:
|
|
||||||
- lossless
|
|
||||||
- docker
|
|
||||||
- notpriv
|
|
||||||
|
|
||||||
auditProductionDependencies:
|
auditProductionDependencies:
|
||||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
- npmci command npm install --production --ignore-scripts
|
- npmci command pnpm audit --audit-level=high --prod
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
|
||||||
- npmci command npm audit --audit-level=high --only=prod --production
|
|
||||||
tags:
|
tags:
|
||||||
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
allow_failure: true
|
allow_failure: true
|
||||||
|
|
||||||
@ -45,11 +38,10 @@ auditDevDependencies:
|
|||||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci command npm install --ignore-scripts
|
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
- 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:
|
tags:
|
||||||
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
allow_failure: true
|
allow_failure: true
|
||||||
|
|
||||||
@ -60,7 +52,6 @@ auditDevDependencies:
|
|||||||
testStable:
|
testStable:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci npm test
|
- npmci npm test
|
||||||
@ -71,10 +62,9 @@ testStable:
|
|||||||
testBuild:
|
testBuild:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command npm run build
|
- npmci npm build
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- docker
|
- docker
|
||||||
@ -122,11 +112,9 @@ trigger:
|
|||||||
pages:
|
pages:
|
||||||
stage: metadata
|
stage: metadata
|
||||||
script:
|
script:
|
||||||
- npmci node install lts
|
- npmci node install stable
|
||||||
- npmci command npm install -g @gitzone/tsdoc
|
|
||||||
- npmci npm prepare
|
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command tsdoc
|
- npmci command npm run buildDocs
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
|
|||||||
114
html/index.html
114
html/index.html
@ -1,7 +1,6 @@
|
|||||||
<!--gitzone default-->
|
<!--gitzone element-->
|
||||||
<!-- made by Lossless GmbH -->
|
<!-- made by Task Venture Capital GmbH -->
|
||||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!--Lets set some basic meta tags-->
|
<!--Lets set some basic meta tags-->
|
||||||
@ -10,119 +9,22 @@
|
|||||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
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 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://rsms.me/">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
||||||
|
|
||||||
<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>
|
<style>
|
||||||
body {
|
body {
|
||||||
background: #000;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
background: #222222;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
|
||||||
projectVersion = '';
|
<script type="module" src="/bundle.js"></script>
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
<script defer type="module" src="/bundle.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10412
package-lock.json
generated
10412
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-catalog",
|
"name": "@designestate/dees-catalog",
|
||||||
"version": "1.0.93",
|
"version": "1.0.111",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "website for lossless.com",
|
"description": "website for lossless.com",
|
||||||
"main": "dist_ts_web/index.js",
|
"main": "dist_ts_web/index.js",
|
||||||
@ -9,27 +9,31 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "tstest test/ --web",
|
"test": "tstest test/ --web",
|
||||||
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
|
||||||
"watch": "tswatch element"
|
"watch": "tswatch element",
|
||||||
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^2.0.22",
|
"@designestate/dees-domtools": "^2.0.28",
|
||||||
"@designestate/dees-element": "^2.0.15",
|
"@designestate/dees-element": "^2.0.18",
|
||||||
"@designestate/dees-wcctools": "^1.0.74",
|
"@designestate/dees-wcctools": "^1.0.75",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||||
"pdfjs-dist": "^2.14.305"
|
"@pushrocks/smartpromise": "^3.1.7",
|
||||||
|
"@tsclass/tsclass": "^4.0.28",
|
||||||
|
"pdfjs-dist": "^2.15.349"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.61",
|
"@gitzone/tsbuild": "^2.1.65",
|
||||||
"@gitzone/tsbundle": "^2.0.3",
|
"@gitzone/tsbundle": "^2.0.7",
|
||||||
"@gitzone/tstest": "^1.0.71",
|
"@gitzone/tstest": "^1.0.74",
|
||||||
"@gitzone/tswatch": "^2.0.1",
|
"@gitzone/tswatch": "^2.0.5",
|
||||||
"@pushrocks/projectinfo": "^5.0.1",
|
"@pushrocks/projectinfo": "^5.0.1",
|
||||||
"@pushrocks/tapbundle": "^5.0.3"
|
"@pushrocks/tapbundle": "^5.0.4",
|
||||||
|
"@types/node": "^18.11.18"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
|
|||||||
4691
pnpm-lock.yaml
generated
Normal file
4691
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,6 @@ Code Style | [](htt
|
|||||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
|
||||||
|
|
||||||
## Usage
|
## 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.
|
For further information read the linked docs at the top of this readme.
|
||||||
|
|
||||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
## Legal
|
||||||
|
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||||
|
|
||||||
[](https://maintainedby.lossless.com)
|
|
||||||
|
|||||||
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@designestate/dees-catalog',
|
name: '@designestate/dees-catalog',
|
||||||
version: '1.0.93',
|
version: '1.0.111',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -84,7 +84,7 @@ export class DeesButton extends DeesElement {
|
|||||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
|
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
|
||||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||||
border-radius: 2px;
|
border-radius: 4px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
padding: 0px 8px;
|
padding: 0px 8px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
|
|||||||
@ -10,6 +10,8 @@ import {
|
|||||||
faMedium,
|
faMedium,
|
||||||
faSlackHash,
|
faSlackHash,
|
||||||
faTwitter,
|
faTwitter,
|
||||||
|
faInstagram,
|
||||||
|
faTiktok,
|
||||||
} from '@fortawesome/free-brands-svg-icons';
|
} from '@fortawesome/free-brands-svg-icons';
|
||||||
|
|
||||||
import {} from '@fortawesome/free-regular-svg-icons';
|
import {} from '@fortawesome/free-regular-svg-icons';
|
||||||
@ -22,10 +24,12 @@ type TFontAwesomeIcon =
|
|||||||
// brands
|
// brands
|
||||||
| 'facebook'
|
| 'facebook'
|
||||||
| 'google'
|
| 'google'
|
||||||
| 'twitter'
|
|
||||||
| 'linkedin'
|
| 'linkedin'
|
||||||
|
| 'instagram'
|
||||||
| 'medium'
|
| 'medium'
|
||||||
| 'slack'
|
| 'slack'
|
||||||
|
| 'tiktok'
|
||||||
|
| 'twitter'
|
||||||
| 'users';
|
| 'users';
|
||||||
const faIcons: { [key: string]: IconDefinition } = {
|
const faIcons: { [key: string]: IconDefinition } = {
|
||||||
// normal
|
// normal
|
||||||
@ -34,9 +38,11 @@ const faIcons: { [key: string]: IconDefinition } = {
|
|||||||
// brands
|
// brands
|
||||||
facebook: faFacebook,
|
facebook: faFacebook,
|
||||||
google: faGoogle,
|
google: faGoogle,
|
||||||
|
instagram: faInstagram,
|
||||||
linkedin: faLinkedin,
|
linkedin: faLinkedin,
|
||||||
medium: faMedium,
|
medium: faMedium,
|
||||||
slack: faSlackHash,
|
slack: faSlackHash,
|
||||||
|
tiktok: faTiktok,
|
||||||
twitter: faTwitter,
|
twitter: faTwitter,
|
||||||
users: faUsers,
|
users: faUsers,
|
||||||
};
|
};
|
||||||
@ -51,7 +57,7 @@ declare global {
|
|||||||
export class DeesIcon extends DeesElement {
|
export class DeesIcon extends DeesElement {
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
<dees-icon iconName="visibility"></dees-icon>
|
<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 iconName="visibility"></dees-icon>
|
||||||
<dees-icon brandName="facebook"></dees-icon>
|
<dees-icon brandName="facebook"></dees-icon>
|
||||||
</div>
|
</div>
|
||||||
@ -79,43 +85,42 @@ export class DeesIcon extends DeesElement {
|
|||||||
display: block;
|
display: block;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
#iconContainer svg {
|
#iconContainer svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: ${this.svgSize}px;
|
height: ${this.svgSize}px;
|
||||||
}
|
}
|
||||||
.material-icons {
|
.material-symbols-outlined {
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Symbols Outlined';
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit; /* Preferred icon size */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: inherit;
|
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
||||||
/* 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';
|
|
||||||
}
|
}
|
||||||
</style>
|
</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``}
|
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
public async firstUpdated() {
|
||||||
if (this.brandName && !this.iconName) {
|
if (this.brandName && !this.iconName) {
|
||||||
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
|
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
|
||||||
faIcons[this.brandName]
|
faIcons[this.brandName]
|
||||||
|
|||||||
@ -19,7 +19,7 @@ declare global {
|
|||||||
|
|
||||||
@customElement('dees-input-fileupload')
|
@customElement('dees-input-fileupload')
|
||||||
export class DeesInputFileupload extends DeesElement {
|
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
|
// INSTANCE
|
||||||
public changeSubject = new domtools.rxjs.Subject();
|
public changeSubject = new domtools.rxjs.Subject();
|
||||||
@ -48,12 +48,17 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
public required: boolean = false;
|
public required: boolean = false;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
})
|
})
|
||||||
public disabled: boolean = false;
|
public disabled: boolean = false;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: String,
|
||||||
|
})
|
||||||
|
public buttonText: string = 'Upload File...';
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
public static styles = [
|
public static styles = [
|
||||||
@ -66,8 +71,13 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
@ -78,40 +88,74 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
.uploadButton {
|
.uploadButton {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 20px 20px;
|
padding: 8px;
|
||||||
max-width: 200px;
|
max-width: 600px;
|
||||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uploadButton:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgb(3, 155, 229);
|
||||||
|
}
|
||||||
|
|
||||||
.uploadButton::after {
|
.uploadButton::after {
|
||||||
top: 7px;
|
top: 2px;
|
||||||
right: 7px;
|
right: 2px;
|
||||||
left: 7px;
|
left: 2px;
|
||||||
bottom: 7px;
|
bottom: 2px;
|
||||||
transform: scale3d(0.9, 0.9, 1);
|
transform: scale3d(0.98, 0.9, 1);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
border: 4px dashed rgba(255, 255, 255, 0);
|
border: 2px dashed rgba(255, 255, 255, 0);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.uploadButton.dragOver::after {
|
.uploadButton.dragOver::after {
|
||||||
transform: scale3d(1, 1, 1);
|
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 {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
|
<div class="hidden">
|
||||||
|
<input type="file"></div>
|
||||||
|
</div>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
${this.label ? html`<div class="label">${this.label}</div>` : null}
|
${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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async openFileSelector() {
|
||||||
|
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
|
||||||
|
inputFile.click();
|
||||||
|
}
|
||||||
|
|
||||||
public async updateValue(eventArg: Event) {
|
public async updateValue(eventArg: Event) {
|
||||||
const target: any = eventArg.target;
|
const target: any = eventArg.target;
|
||||||
this.value = target.value;
|
this.value = target.value;
|
||||||
@ -122,18 +166,24 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
const dropArea = this.shadowRoot.querySelector('.uploadButton');
|
const dropArea = this.shadowRoot.querySelector('.uploadButton');
|
||||||
const handlerFunction = (eventArg: DragEvent) => {
|
const handlerFunction = (eventArg: DragEvent) => {
|
||||||
eventArg.preventDefault();
|
eventArg.preventDefault();
|
||||||
switch(eventArg.type) {
|
switch (eventArg.type) {
|
||||||
case 'dragover':
|
case 'dragover':
|
||||||
this.state = 'dragOver';
|
this.state = 'dragOver';
|
||||||
|
this.buttonText = 'release to upload file...';
|
||||||
break;
|
break;
|
||||||
case 'dragleave':
|
case 'dragleave':
|
||||||
this.state = 'idle';
|
this.state = 'idle';
|
||||||
|
this.buttonText = 'Upload File...';
|
||||||
break;
|
break;
|
||||||
|
case 'drop':
|
||||||
|
this.state = 'idle';
|
||||||
|
this.buttonText = 'Upload more files...';
|
||||||
}
|
}
|
||||||
console.log(eventArg);
|
console.log(eventArg);
|
||||||
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
||||||
this.value.push(file);
|
this.value.push(file);
|
||||||
};
|
this.requestUpdate();
|
||||||
|
}
|
||||||
console.log(`Got ${this.value.length} files!`);
|
console.log(`Got ${this.value.length} files!`);
|
||||||
};
|
};
|
||||||
dropArea.addEventListener('dragenter', handlerFunction, false);
|
dropArea.addEventListener('dragenter', handlerFunction, false);
|
||||||
|
|||||||
@ -57,6 +57,7 @@ export class DeesInputQuantitySelector extends DeesElement {
|
|||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
color: ${this.goBright ? '#666' : '#CCC'};
|
color: ${this.goBright ? '#666' : '#CCC'};
|
||||||
border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
|
border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainContainer:hover {
|
.mainContainer:hover {
|
||||||
|
|||||||
@ -77,7 +77,7 @@ export class DeesInputText extends DeesElement {
|
|||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: "Roboto";
|
font-family: Inter;
|
||||||
color: ${this.goBright ? '#333' : '#ccc'};
|
color: ${this.goBright ? '#333' : '#ccc'};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
188
ts_web/elements/dees-mobilenavigation.ts
Normal file
188
ts_web/elements/dees-mobilenavigation.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element';
|
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
|
||||||
import { TemplateResult } from 'lit-html';
|
|
||||||
|
|
||||||
import { Deferred } from '@pushrocks/smartpromise';
|
import { Deferred } from '@pushrocks/smartpromise';
|
||||||
|
|
||||||
@ -33,7 +32,7 @@ export class DeesPdf extends DeesElement {
|
|||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
|||||||
0
ts_web/elements/dees-preview.ts
Normal file
0
ts_web/elements/dees-preview.ts
Normal file
@ -134,7 +134,7 @@ export class DeesSpeechbubble extends DeesElement {
|
|||||||
return html`
|
return html`
|
||||||
<div class="maincontainer" @click=${this.handleClick}>
|
<div class="maincontainer" @click=${this.handleClick}>
|
||||||
<div class="arrow"></div>
|
<div class="arrow"></div>
|
||||||
<div class="speechbubble"><span class="wave">👋</span> Hey! We are consulting.</div>
|
<div class="speechbubble"><span class="wave">👋</span> Hey! We are API-driven.</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -144,7 +144,7 @@ export class DeesSpeechbubble extends DeesElement {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
globalThis.location.href = "https://lossless.consulting"
|
globalThis.location.href = "https://api.global"
|
||||||
}
|
}
|
||||||
|
|
||||||
public async firstUpdated() {
|
public async firstUpdated() {
|
||||||
|
|||||||
@ -153,7 +153,7 @@ export class DeesStepper extends DeesElement {
|
|||||||
.step .title {
|
.step .title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
font-family: Roboto;
|
font-family: Inter;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
@ -229,7 +229,8 @@ export class DeesStepper extends DeesElement {
|
|||||||
{
|
{
|
||||||
vertical: true,
|
vertical: true,
|
||||||
horizontal: false,
|
horizontal: false,
|
||||||
easing: 'easeInOutQuint',
|
easing: 'easeInOutExpo',
|
||||||
|
duration: 700,
|
||||||
},
|
},
|
||||||
stepperContainer
|
stepperContainer
|
||||||
);
|
);
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import {
|
|||||||
cssManager,
|
cssManager,
|
||||||
css,
|
css,
|
||||||
unsafeCSS,
|
unsafeCSS,
|
||||||
|
state,
|
||||||
} from '@designestate/dees-element';
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
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')
|
@customElement('dees-table')
|
||||||
export class DeesTable<T> extends DeesElement {
|
export class DeesTable<T> extends DeesElement {
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
@ -61,11 +69,26 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
description: 'Office-Supplies - STAPLES BREMEN',
|
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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
@property({
|
@property({
|
||||||
type: String,
|
type: String,
|
||||||
})
|
})
|
||||||
@ -81,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
})
|
})
|
||||||
public data: T[] = [];
|
public data: T[] = [];
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Array,
|
||||||
|
})
|
||||||
|
public dataActions: IDataAction[] = [];
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: Object,
|
type: Object,
|
||||||
})
|
})
|
||||||
@ -96,6 +124,9 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
})
|
})
|
||||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||||
|
|
||||||
|
public files: File[] = [];
|
||||||
|
public fileWeakMap = new WeakMap();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
@ -105,7 +136,7 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
css`
|
css`
|
||||||
.mainbox {
|
.mainbox {
|
||||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||||
font-family: Roboto Mono;
|
font-family: Inter;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
@ -114,7 +145,7 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
.headingSeparation {
|
.headingSeparation {
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
@ -178,6 +209,22 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
border-right: none;
|
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 {
|
.tableStatistics {
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -213,6 +260,15 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
</th>
|
</th>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
|
${(() => {
|
||||||
|
if (this.dataActions && this.dataActions.length > 0) {
|
||||||
|
return html`
|
||||||
|
<th>
|
||||||
|
<div class="innerCellContainer">Actions</div>
|
||||||
|
</th>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
</tr>
|
</tr>
|
||||||
${this.data.map(
|
${this.data.map(
|
||||||
(itemArg) => html`
|
(itemArg) => html`
|
||||||
@ -220,6 +276,38 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectedDataRow = itemArg;
|
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' : ''}"
|
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||||
>
|
>
|
||||||
${headings.map(
|
${headings.map(
|
||||||
@ -229,6 +317,25 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
</td>
|
</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>
|
</tr>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
@ -238,7 +345,9 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
: html` <div class="noDataSet">No data set!</div> `}
|
: html` <div class="noDataSet">No data set!</div> `}
|
||||||
<div class="tableStatistics">
|
<div class="tableStatistics">
|
||||||
${this.data.length} data rows (total) |
|
${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>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -42,6 +42,7 @@ export class DeesWindowLayer extends DeesElement {
|
|||||||
background: rgba(0, 0, 0, 0.0);
|
background: rgba(0, 0, 0, 0.0);
|
||||||
backdrop-filter: brightness(1);
|
backdrop-filter: brightness(1);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible {
|
.visible {
|
||||||
@ -63,10 +64,22 @@ export class DeesWindowLayer extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
dispatchClicked() {
|
dispatchClicked() {
|
||||||
this.dispatchEvent(new CustomEvent('clicked'))
|
this.dispatchEvent(new CustomEvent('clicked'));
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleVisibility () {
|
public toggleVisibility () {
|
||||||
this.visible = !this.visible;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,6 +10,7 @@ export * from './dees-input-fileupload.js';
|
|||||||
export * from './dees-input-quantityselector.js';
|
export * from './dees-input-quantityselector.js';
|
||||||
export * from './dees-input-radio.js';
|
export * from './dees-input-radio.js';
|
||||||
export * from './dees-input-text.js';
|
export * from './dees-input-text.js';
|
||||||
|
export * from './dees-mobilenavigation.js';
|
||||||
export * from './dees-pdf.js';
|
export * from './dees-pdf.js';
|
||||||
export * from './dees-speechbubble.js';
|
export * from './dees-speechbubble.js';
|
||||||
export * from './dees-spinner.js';
|
export * from './dees-spinner.js';
|
||||||
|
|||||||
5
ts_web/elements/plugins.ts
Normal file
5
ts_web/elements/plugins.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import * as tsclass from '@tsclass/tsclass';
|
||||||
|
|
||||||
|
export {
|
||||||
|
tsclass
|
||||||
|
}
|
||||||
@ -1,8 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"target": "ES2020",
|
"useDefineForClassFields": false,
|
||||||
"module": "ES2020",
|
"target": "ES2022",
|
||||||
"moduleResolution": "Node12"
|
"module": "ES2022",
|
||||||
|
"moduleResolution": "nodenext",
|
||||||
|
"esModuleInterop": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
17
tslint.json
17
tslint.json
@ -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"
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user