Compare commits
98 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ab0219d3e4 | |||
| 7cefd9cba5 | |||
| 4cf5ca2d7f | |||
| a9791220fb | |||
| 4aed14c7a2 | |||
| 49d1cba3fd | |||
| 9bacca3070 | |||
| 42e7ae6d6b | |||
| a8b244520c | |||
| 9879a2cb6a | |||
| e2a54c6f18 | |||
| dfd13e641a | |||
| 2284159b72 | |||
| 1de86c6bfa | |||
| 62087a686a | |||
| 572deb990e | |||
| 719c63a092 | |||
| 9d9700214f | |||
| bc82e110ef | |||
| fe15ebe82d | |||
| 1b8577d300 | |||
| ef4cfb81d8 | |||
| abea5942b7 | |||
| a6274e9a2d | |||
| 8b3752f586 | |||
| c8e1d24224 | |||
| dbd7748ac0 | |||
| 68984d5702 | |||
| 5237439f88 | |||
| c3df73616f | |||
| a03b095d14 | |||
| 9a18658e09 | |||
| 2910757e8c | |||
| a00bacd4ff | |||
| 01963447dd | |||
| 5d1d1ba4ba | |||
| 7885422033 | |||
| fb48425c13 | |||
| 3792c5edf5 | |||
| 2abd91ab4a | |||
| 310910e8ee | |||
| 3301ad1556 | |||
| 0f8a7a5a7b | |||
| f1a0c5741c | |||
| cbf60db9fa | |||
| 34d5bda579 | |||
| 916ba68c94 | |||
| 46fc396772 | |||
| 0e77baf600 | |||
| 89fd8b5080 | |||
| 884f9725b5 | |||
| 48e093b1ba | |||
| 2b3875d738 | |||
| 279d1c2f3f | |||
| 29f2839d5b | |||
| 96683b4380 | |||
| 36fbf7f29e | |||
| 67d4c216ed | |||
| 9d51cdd480 | |||
| d6679ca41f | |||
| baadd1e06b | |||
| 600ab56026 | |||
| ae40a9f541 | |||
| 48f7768b96 | |||
| de3f9fcb34 | |||
| 313009d3ff | |||
| 83ede1edea | |||
| ec50b4b3a0 | |||
| 4fbb1caaeb | |||
| 41a2529275 | |||
| 41ff71e6b0 | |||
| 2d07765c16 | |||
| 15db9fb6d9 | |||
| 73d92624de | |||
| 0d77685338 | |||
| 05bbfccd22 | |||
| 5cca89de37 | |||
| ab5b7a5b89 | |||
| 253d5623c4 | |||
| 1048192bfa | |||
| 289e6d37fa | |||
| 7308c1454f | |||
| cfc880d7c2 | |||
| c32cff8126 | |||
| 4526c0c365 | |||
| 45e7f39af0 | |||
| 26b72fbccf | |||
| 8acf3f4196 | |||
| 75c8b409cc | |||
| 6509ddb81c | |||
| 7cc0173e3c | |||
| f797d71e52 | |||
| 54db88e4b4 | |||
| 93c73c36c8 | |||
| 9c9bd4a180 | |||
| 0a54de3e59 | |||
| d6b4b59e6d | |||
| c4236d28c6 |
@ -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>
|
||||||
|
|||||||
24
package.json
24
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-catalog",
|
"name": "@designestate/dees-catalog",
|
||||||
"version": "1.0.106",
|
"version": "1.0.155",
|
||||||
"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,20 +9,21 @@
|
|||||||
"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.23",
|
"@designestate/dees-domtools": "^2.0.28",
|
||||||
"@designestate/dees-element": "^2.0.16",
|
"@designestate/dees-element": "^2.0.19",
|
||||||
"@designestate/dees-wcctools": "^1.0.74",
|
"@designestate/dees-wcctools": "^1.0.76",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
"@fortawesome/free-brands-svg-icons": "^6.3.0",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
"@fortawesome/free-regular-svg-icons": "^6.3.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
"@fortawesome/free-solid-svg-icons": "^6.3.0",
|
||||||
"@pushrocks/smartpromise": "^3.1.7",
|
"@pushrocks/smartpromise": "^3.1.7",
|
||||||
"@tsclass/tsclass": "^4.0.28",
|
"@tsclass/tsclass": "^4.0.34",
|
||||||
"pdfjs-dist": "^2.15.349"
|
"pdfjs-dist": "^2.15.349"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -31,7 +32,8 @@
|
|||||||
"@gitzone/tstest": "^1.0.74",
|
"@gitzone/tstest": "^1.0.74",
|
||||||
"@gitzone/tswatch": "^2.0.5",
|
"@gitzone/tswatch": "^2.0.5",
|
||||||
"@pushrocks/projectinfo": "^5.0.1",
|
"@pushrocks/projectinfo": "^5.0.1",
|
||||||
"@pushrocks/tapbundle": "^5.0.4"
|
"@pushrocks/tapbundle": "^5.0.4",
|
||||||
|
"@types/node": "^18.15.9"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
|
|||||||
977
pnpm-lock.yaml
generated
977
pnpm-lock.yaml
generated
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.106',
|
version: '1.0.155',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export class DeesButtonExit extends DeesElement {
|
|||||||
@property({
|
@property({
|
||||||
type: Number
|
type: Number
|
||||||
})
|
})
|
||||||
public size: number = 20;
|
public size: number = 24;
|
||||||
|
|
||||||
public styles = [
|
public styles = [
|
||||||
cssManager.defaultStyles,
|
cssManager.defaultStyles,
|
||||||
@ -37,12 +37,6 @@ export class DeesButtonExit extends DeesElement {
|
|||||||
width: ${this.size}px;
|
width: ${this.size}px;
|
||||||
height: ${this.size}px;
|
height: ${this.size}px;
|
||||||
}
|
}
|
||||||
.firstLine {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.secondLine {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
<div class="firstLine"></div>
|
<div class="firstLine"></div>
|
||||||
|
|||||||
@ -31,7 +31,12 @@ export class DeesButton extends DeesElement {
|
|||||||
<p><dees-button disabled status="error">Error Status</dees-button></p>
|
<p><dees-button disabled status="error">Error Status</dees-button></p>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property()
|
@property({
|
||||||
|
reflect: true,
|
||||||
|
hasChanged() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
})
|
||||||
public text: string;
|
public text: string;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
@ -74,14 +79,15 @@ export class DeesButton extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
transition: all 0.1s ease;
|
transition: all 0.1s , color 0s;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: ${cssManager.bdTheme('#eee', '#333')};
|
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
|
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', '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: 4px;
|
border-radius: 4px;
|
||||||
@ -96,9 +102,9 @@ export class DeesButton extends DeesElement {
|
|||||||
.button:hover {
|
.button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #039be5;
|
background: #039be5;
|
||||||
|
color: #ffffff;
|
||||||
border: 1px solid #039be5;
|
border: 1px solid #039be5;
|
||||||
border-top: 1px solid #039be5;
|
border-top: 1px solid #039be5;
|
||||||
color: #ffffff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active {
|
.button:active {
|
||||||
@ -180,9 +186,9 @@ export class DeesButton extends DeesElement {
|
|||||||
@click="${this.dispatchClick}"
|
@click="${this.dispatchClick}"
|
||||||
>
|
>
|
||||||
${this.status === 'normal' ? html``: html`
|
${this.status === 'normal' ? html``: html`
|
||||||
<dees-spinner status="${this.status}"></dees-spinner>
|
<dees-spinner .bnw=${true} 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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
180
ts_web/elements/dees-contextmenu.ts
Normal file
180
ts_web/elements/dees-contextmenu.ts
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
import * as plugins from './plugins.js';
|
||||||
|
import {
|
||||||
|
customElement,
|
||||||
|
html,
|
||||||
|
DeesElement,
|
||||||
|
property,
|
||||||
|
TemplateResult,
|
||||||
|
cssManager,
|
||||||
|
css,
|
||||||
|
unsafeCSS,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'dees-contextmenu': DeesContextmenu;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('dees-contextmenu')
|
||||||
|
export class DeesContextmenu extends DeesElement {
|
||||||
|
// DEMO
|
||||||
|
public static demo = () => html`
|
||||||
|
<style>
|
||||||
|
.withMargin {
|
||||||
|
display: block;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<dees-button @contextmenu=${(eventArg) => {
|
||||||
|
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||||
|
{
|
||||||
|
name: 'copy',
|
||||||
|
iconName: 'copySolid',
|
||||||
|
action: async () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'edit',
|
||||||
|
iconName: 'penToSquare',
|
||||||
|
action: async () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
name: 'paste',
|
||||||
|
iconName: 'pasteSolid',
|
||||||
|
action: async () => {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}}>Hello</dees-button>
|
||||||
|
<dees-contextmenu class="withMargin"></dees-contextmenu>
|
||||||
|
<dees-contextmenu
|
||||||
|
class="withMargin"
|
||||||
|
.menuItems=${[
|
||||||
|
{
|
||||||
|
name: 'copy',
|
||||||
|
iconName: 'copySolid',
|
||||||
|
action: async () => {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'edit',
|
||||||
|
iconName: 'penToSquare',
|
||||||
|
action: async () => {},
|
||||||
|
},{
|
||||||
|
name: 'paste',
|
||||||
|
iconName: 'pasteSolid',
|
||||||
|
action: async () => {},
|
||||||
|
},
|
||||||
|
] as plugins.tsclass.website.IMenuItem[]}
|
||||||
|
></dees-contextmenu>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// STATIC
|
||||||
|
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
|
||||||
|
eventArg.preventDefault();
|
||||||
|
const contextMenu = new DeesContextmenu();
|
||||||
|
contextMenu.style.position = 'absolute';
|
||||||
|
contextMenu.style.top = `${eventArg.clientY.toString()}px`;
|
||||||
|
contextMenu.style.left = `${eventArg.clientX.toString()}px`;
|
||||||
|
contextMenu.style.opacity = '0';
|
||||||
|
contextMenu.style.transform = 'scale(0.95,0.95)';
|
||||||
|
contextMenu.style.transformOrigin = 'top left';
|
||||||
|
contextMenu.menuItems = menuItemsArg;
|
||||||
|
document.body.append(contextMenu);
|
||||||
|
await domtools.plugins.smartdelay.delayFor(0);
|
||||||
|
contextMenu.style.opacity = '1';
|
||||||
|
contextMenu.style.transform = 'scale(1,1)';
|
||||||
|
}
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Array,
|
||||||
|
})
|
||||||
|
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
transition: all 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox {
|
||||||
|
color: ${cssManager.bdTheme('#222', '#ccc')};
|
||||||
|
font-size: 14px;
|
||||||
|
width: 200px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
min-height: 40px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #222;
|
||||||
|
box-shadow: 0px 1px 4px #000;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem dees-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 14px;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainbox .menuitem:active {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff05;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="mainbox">
|
||||||
|
${this.menuItems.map((menuItemArg) => {
|
||||||
|
return html`
|
||||||
|
<div class="menuitem" @click=${() => this.handleClick(menuItemArg)}>
|
||||||
|
<dees-icon .iconFA=${(menuItemArg.iconName as any) || 'minus'}></dees-icon
|
||||||
|
>${menuItemArg.name}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async firstUpdated() {
|
||||||
|
if (!this.menuItems || this.menuItems.length === 0) {
|
||||||
|
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||||
|
mainbox.textContent = 'no menu items present';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
|
||||||
|
menuItem.action();
|
||||||
|
await this.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async destroy() {
|
||||||
|
this.style.opacity = '0';
|
||||||
|
this.style.transform = 'scale(0.95,0,95)';
|
||||||
|
await domtools.plugins.smartdelay.delayFor(100);
|
||||||
|
this.parentElement.removeChild(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -41,8 +41,7 @@ export class DeesFormSubmit extends DeesElement {
|
|||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled}>
|
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
|
||||||
${this.text ? this.text : html`<slot></slot>`}
|
|
||||||
</dees-button>
|
</dees-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,11 @@
|
|||||||
import { DeesElement, html, property, customElement } from '@designestate/dees-element';
|
import {
|
||||||
|
DeesElement,
|
||||||
|
html,
|
||||||
|
property,
|
||||||
|
customElement,
|
||||||
|
cssManager,
|
||||||
|
css,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
@ -12,30 +19,96 @@ import {
|
|||||||
faTwitter,
|
faTwitter,
|
||||||
faInstagram,
|
faInstagram,
|
||||||
faTiktok,
|
faTiktok,
|
||||||
|
|
||||||
} from '@fortawesome/free-brands-svg-icons';
|
} from '@fortawesome/free-brands-svg-icons';
|
||||||
|
|
||||||
import {} from '@fortawesome/free-regular-svg-icons';
|
import {
|
||||||
import { faDesktop, faRss, faUsers } from '@fortawesome/free-solid-svg-icons';
|
faCopy as faCopyRegular,
|
||||||
|
faCircleCheck as faCircleCheckRegular,
|
||||||
|
faCircleXmark as faCircleXmarkRegular,
|
||||||
|
faMessage as faMessageRegular,
|
||||||
|
faPaste as faPasteRegular,
|
||||||
|
faSun as faSunRegular,
|
||||||
|
} from '@fortawesome/free-regular-svg-icons';
|
||||||
|
import {
|
||||||
|
faArrowRight as faArrowRightSolid,
|
||||||
|
faArrowUpRightFromSquare as faArrowUpRightFromSquareSolid,
|
||||||
|
faBell as faBellSolid,
|
||||||
|
faBug as faBugSolid,
|
||||||
|
faBuilding as faBuildingSolid,
|
||||||
|
faCaretLeft as faCaretLeftSolid,
|
||||||
|
faCaretRight as faCaretRightSolid,
|
||||||
|
faCheck as faCheckSolid,
|
||||||
|
faCircleInfo as faCircleInfoSolid,
|
||||||
|
faCircleCheck as faCircleCheckSolid,
|
||||||
|
faCircleXmark as faCircleXmarkSolid,
|
||||||
|
faCopy as faCopySolid,
|
||||||
|
faDesktop as faDesktopSolid,
|
||||||
|
faEye as faEyeSolid,
|
||||||
|
faEyeSlash as faEyeSlashSolid,
|
||||||
|
faGrip as faGripSolid,
|
||||||
|
faMessage as faMessageSolid,
|
||||||
|
faMugHot as faMugHotSolid,
|
||||||
|
faMinus as faMinusSolid,
|
||||||
|
faPaste as faPasteSolid,
|
||||||
|
faPenToSquare as faPenToSquareSolid,
|
||||||
|
faRss as faRssSolid,
|
||||||
|
faUsers as faUsersSolid,
|
||||||
|
faShare as faShareSolid,
|
||||||
|
faSun as faSunSolid,
|
||||||
|
faXmark as faXmarkSolid,
|
||||||
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
type TFontAwesomeIcon =
|
export const faIcons = {
|
||||||
// normal
|
// normal
|
||||||
| 'desktop'
|
arrowRight: faArrowRightSolid,
|
||||||
| 'rss'
|
arrowUpRightFromSquare: faArrowUpRightFromSquareSolid,
|
||||||
// brands
|
arrowUpRightFromSquareSolid: faArrowUpRightFromSquareSolid,
|
||||||
| 'facebook'
|
bell: faBellSolid,
|
||||||
| 'google'
|
bellSolid: faBellSolid,
|
||||||
| 'linkedin'
|
bug: faBugSolid,
|
||||||
| 'instagram'
|
bugSolid: faBugSolid,
|
||||||
| 'medium'
|
building: faBuildingSolid,
|
||||||
| 'slack'
|
buildingSolid: faBuildingSolid,
|
||||||
| 'tiktok'
|
caretLeft: faCaretLeftSolid,
|
||||||
| 'twitter'
|
caretLeftSolid: faCaretLeftSolid,
|
||||||
| 'users';
|
caretRight: faCaretRightSolid,
|
||||||
const faIcons: { [key: string]: IconDefinition } = {
|
caretRightSolid: faCaretRightSolid,
|
||||||
// normal
|
check: faCheckSolid,
|
||||||
desktop: faDesktop,
|
checkSolid: faCheckSolid,
|
||||||
rss: faRss,
|
circleInfo: faCircleInfoSolid,
|
||||||
|
circleInfoSolid: faCircleInfoSolid,
|
||||||
|
circleCheck: faCircleCheckRegular,
|
||||||
|
circleCheckSolid: faCircleCheckSolid,
|
||||||
|
circleXmark: faCircleXmarkRegular,
|
||||||
|
circleXmarkSolid: faCircleXmarkSolid,
|
||||||
|
copy: faCopyRegular,
|
||||||
|
copySolid: faCopySolid,
|
||||||
|
desktop: faDesktopSolid,
|
||||||
|
desktopSolid: faDesktopSolid,
|
||||||
|
eye: faEyeSolid,
|
||||||
|
eyeSolid: faEyeSolid,
|
||||||
|
eyeSlash: faEyeSlashSolid,
|
||||||
|
eyeSlashSolid: faEyeSlashSolid,
|
||||||
|
grip: faGripSolid,
|
||||||
|
gripSolid: faGripSolid,
|
||||||
|
message: faMessageRegular,
|
||||||
|
messageSolid: faMessageSolid,
|
||||||
|
mugHot: faMugHotSolid,
|
||||||
|
faMugHotSolid: faMugHotSolid,
|
||||||
|
minus: faMinusSolid,
|
||||||
|
minusSolid: faMinusSolid,
|
||||||
|
paste: faPasteRegular,
|
||||||
|
pasteSolid: faPasteSolid,
|
||||||
|
penToSquare: faPenToSquareSolid,
|
||||||
|
penToSquareSolid: faPenToSquareSolid,
|
||||||
|
rss: faRssSolid,
|
||||||
|
rssSolid: faRssSolid,
|
||||||
|
share: faShareSolid,
|
||||||
|
shareSolid: faShareSolid,
|
||||||
|
sun: faSunRegular,
|
||||||
|
sunSolid: faSunSolid,
|
||||||
|
xmark: faXmarkSolid,
|
||||||
|
xmarkSolid: faXmarkSolid,
|
||||||
// brands
|
// brands
|
||||||
facebook: faFacebook,
|
facebook: faFacebook,
|
||||||
google: faGoogle,
|
google: faGoogle,
|
||||||
@ -45,7 +118,7 @@ const faIcons: { [key: string]: IconDefinition } = {
|
|||||||
slack: faSlackHash,
|
slack: faSlackHash,
|
||||||
tiktok: faTiktok,
|
tiktok: faTiktok,
|
||||||
twitter: faTwitter,
|
twitter: faTwitter,
|
||||||
users: faUsers,
|
users: faUsersSolid,
|
||||||
};
|
};
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@ -58,78 +131,73 @@ 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: 30px">
|
||||||
<dees-icon iconName="visibility"></dees-icon>
|
<style>
|
||||||
<dees-icon brandName="facebook"></dees-icon>
|
dees-icon {
|
||||||
|
transition: color 0.05s;
|
||||||
|
}
|
||||||
|
dees-icon:hover {
|
||||||
|
color: #e4002b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<dees-icon .iconFA=${'messageSolid'}></dees-icon>
|
||||||
|
<dees-icon .iconFA=${'sun'}></dees-icon>
|
||||||
|
<dees-icon .iconFA=${'sunSolid'}></dees-icon>
|
||||||
|
<dees-icon .iconFA=${'facebook'}></dees-icon>
|
||||||
|
<dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property()
|
@property({
|
||||||
public iconName: string;
|
type: String
|
||||||
|
})
|
||||||
|
public iconFA: keyof typeof faIcons;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public brandName: TFontAwesomeIcon;
|
public iconSize: number;
|
||||||
|
|
||||||
@property()
|
|
||||||
public svgSize: number = 20;
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
domtools.elementBasic.setup();
|
domtools.elementBasic.setup();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
transition: inherit !important;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
${domtools.elementBasic.styles}
|
||||||
<style>
|
<style>
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
line-height: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#iconContainer svg {
|
#iconContainer svg {
|
||||||
display: inline-block;
|
display: block;
|
||||||
height: ${this.svgSize}px;
|
height: ${this.iconSize}px;
|
||||||
}
|
|
||||||
.material-icons {
|
|
||||||
font-family: 'Material Icons';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
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';
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
${this.iconName ? html`<i class="material-icons">${this.iconName}</i>` : html``}
|
<div id="iconContainer"></div>
|
||||||
${this.brandName ? html`<div id="iconContainer"></div>` : html``}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
public async updated() {
|
||||||
if (this.brandName && !this.iconName) {
|
if (!this.iconSize) {
|
||||||
this.shadowRoot.querySelector('#iconContainer').innerHTML = icon(
|
this.iconSize = parseInt(globalThis.getComputedStyle(this).fontSize.replace(/\D/g,''));
|
||||||
faIcons[this.brandName]
|
}
|
||||||
).html[0];
|
if (this.iconFA) {
|
||||||
|
this.shadowRoot.querySelector('#iconContainer').innerHTML = this.iconFA
|
||||||
|
? icon(faIcons[this.iconFA]).html[0]
|
||||||
|
: 'icon not found';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
|
import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@ -9,7 +9,15 @@ declare global {
|
|||||||
|
|
||||||
@customElement('dees-input-dropdown')
|
@customElement('dees-input-dropdown')
|
||||||
export class DeesInputDropdown extends DeesElement {
|
export class DeesInputDropdown extends DeesElement {
|
||||||
public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
|
public static demo = () => html`
|
||||||
|
<dees-input-dropdown
|
||||||
|
.options=${[
|
||||||
|
{option: 'option 1', key: 'option1'},
|
||||||
|
{option: 'option 2', key: 'option2'},
|
||||||
|
{option: 'option 3', key: 'option3'}
|
||||||
|
]}
|
||||||
|
></dees-input-dropdown>
|
||||||
|
`
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
public changeSubject = new domtools.rxjs.Subject();
|
public changeSubject = new domtools.rxjs.Subject();
|
||||||
@ -40,11 +48,10 @@ export class DeesInputDropdown extends DeesElement {
|
|||||||
})
|
})
|
||||||
public disabled: boolean = false;
|
public disabled: boolean = false;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public static styles = [
|
||||||
return html`
|
cssManager.defaultStyles,
|
||||||
${domtools.elementBasic.styles}
|
css`
|
||||||
<style>
|
* {
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,6 +59,7 @@ export class DeesInputDropdown extends DeesElement {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
color: ${cssManager.bdTheme('#222', '#fff')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
@ -68,41 +76,68 @@ export class DeesInputDropdown extends DeesElement {
|
|||||||
position: relative;
|
position: relative;
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border: 1px solid #CCC;
|
line-height: 40px;
|
||||||
padding: 12px;
|
padding: 0px 8px;
|
||||||
z-index: 0px;
|
z-index: 0px;
|
||||||
|
background: ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||||
|
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
|
||||||
|
border-radius: 3px;
|
||||||
|
border-top: 1px solid #CCCCCC00;
|
||||||
|
border-bottom: 1px solid #66666600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedBox.show {
|
||||||
|
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
|
||||||
|
border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionBox {
|
.selectionBox {
|
||||||
|
will-change:transform;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #ffffff;
|
background: ${cssManager.bdTheme('#ffffff', '#222222')};
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
|
||||||
height: 40px;
|
min-height: 40px;
|
||||||
margin-top: -40px;
|
margin-top: -40px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px;
|
||||||
|
transform: scale(0.99,0.99);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionBox.show {
|
.selectionBox.show {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
min-height: 160px;
|
transform: scale(1,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option {
|
.option {
|
||||||
padding: 12px;
|
transition: all 0.1s;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option:hover {
|
.option:hover {
|
||||||
background: #fafafa;
|
color: #fff;
|
||||||
|
padding-left: 8px;
|
||||||
|
background: #0277bd;
|
||||||
}
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<style>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
<div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
|
<div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
|
||||||
${this.selectedOption?.option}
|
${this.selectedOption?.option}
|
||||||
</div>
|
</div>
|
||||||
<div class="selectionBox">
|
<div class="selectionBox">
|
||||||
@ -132,6 +167,7 @@ export class DeesInputDropdown extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public toggleSelectionBox() {
|
public toggleSelectionBox() {
|
||||||
|
this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
|
||||||
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
|
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -122,7 +122,7 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
border-bottom: 1px dashed #444;
|
border-bottom: 1px dashed #444;
|
||||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-family: 'Roboto Mono';
|
font-family: 'Inter';
|
||||||
}
|
}
|
||||||
|
|
||||||
.uploadButton:hover .uploadCandidate {
|
.uploadButton:hover .uploadCandidate {
|
||||||
|
|||||||
@ -9,15 +9,19 @@ declare global {
|
|||||||
|
|
||||||
@customElement('dees-input-text')
|
@customElement('dees-input-text')
|
||||||
export class DeesInputText extends DeesElement {
|
export class DeesInputText extends DeesElement {
|
||||||
public static demo = () => html`<dees-input-text></dees-input-text>`;
|
public static demo = () => html`
|
||||||
|
<dees-input-text .label=${'this is a label'}></dees-input-text>
|
||||||
|
<dees-input-text .isPasswordBool=${true}></dees-input-text>
|
||||||
|
`;
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
public changeSubject = new domtools.rxjs.Subject();
|
public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
|
||||||
|
public valueChangeSubject = new domtools.rxjs.Subject<string>();
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: String
|
type: String
|
||||||
})
|
})
|
||||||
public label: string = 'Label';
|
public label: string;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: String
|
type: String
|
||||||
@ -39,6 +43,18 @@ export class DeesInputText extends DeesElement {
|
|||||||
})
|
})
|
||||||
public disabled: boolean = false;
|
public disabled: boolean = false;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Boolean,
|
||||||
|
reflect: true,
|
||||||
|
})
|
||||||
|
public isPasswordBool = false;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Boolean,
|
||||||
|
reflect: true,
|
||||||
|
})
|
||||||
|
public showPasswordBool = false;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html `
|
return html `
|
||||||
<style>
|
<style>
|
||||||
@ -77,7 +93,8 @@ 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: ${this.isPasswordBool ? 'monospace': 'Inter'};
|
||||||
|
letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
|
||||||
color: ${this.goBright ? '#333' : '#ccc'};
|
color: ${this.goBright ? '#333' : '#ccc'};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,10 +109,30 @@ export class DeesInputText extends DeesElement {
|
|||||||
outline: none;
|
outline: none;
|
||||||
border-bottom: 1px solid #e4002b;
|
border-bottom: 1px solid #e4002b;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.showPassword {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
right: 10px;
|
||||||
|
border: 1px dashed #444;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 8px 0px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showPassword:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
<div class="label">${this.label}</div>
|
${this.label ? html`<div class="label">${this.label}</div>` : html``}
|
||||||
<input type="text" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
<input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
|
||||||
|
${this.isPasswordBool ? html`
|
||||||
|
<div class="showPassword" @click=${this.togglePasswordView}>
|
||||||
|
<dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
|
||||||
|
</div>
|
||||||
|
` : html``}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -104,6 +141,7 @@ export class DeesInputText extends DeesElement {
|
|||||||
const target: any = eventArg.target;
|
const target: any = eventArg.target;
|
||||||
this.value = target.value;
|
this.value = target.value;
|
||||||
this.changeSubject.next(this);
|
this.changeSubject.next(this);
|
||||||
|
this.valueChangeSubject.next(this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
public async freeze() {
|
public async freeze() {
|
||||||
@ -113,4 +151,15 @@ export class DeesInputText extends DeesElement {
|
|||||||
public async unfreeze() {
|
public async unfreeze() {
|
||||||
this.disabled = false;
|
this.disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async togglePasswordView () {
|
||||||
|
const domtools = await this.domtoolsPromise;
|
||||||
|
this.showPasswordBool = !this.showPasswordBool;
|
||||||
|
console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
public async focus() {
|
||||||
|
const textInput = this.shadowRoot.querySelector('input');
|
||||||
|
textInput.focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -120,7 +120,7 @@ export class DeesMobilenavigation extends DeesElement {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
padding: 8px 0px;
|
padding: 8px 0px;
|
||||||
font-family: 'Roboto';
|
font-family: Inter;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
border-bottom: 1px dashed #444;
|
border-bottom: 1px dashed #444;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
|||||||
@ -32,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;
|
||||||
|
|||||||
@ -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 API-driven.</div>
|
<div class="speechbubble"><span class="wave">👋</span> We build with launch.sh, and you can too.</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -144,7 +144,7 @@ export class DeesSpeechbubble extends DeesElement {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
globalThis.location.href = "https://api.global"
|
globalThis.location.href = "https://launch.sh"
|
||||||
}
|
}
|
||||||
|
|
||||||
public async firstUpdated() {
|
public async firstUpdated() {
|
||||||
|
|||||||
@ -23,6 +23,8 @@ export class DeesSpinner extends DeesElement {
|
|||||||
<dees-spinner></dees-spinner>
|
<dees-spinner></dees-spinner>
|
||||||
<dees-spinner status="success"></dees-spinner>
|
<dees-spinner status="success"></dees-spinner>
|
||||||
<dees-spinner status="error"></dees-spinner>
|
<dees-spinner status="error"></dees-spinner>
|
||||||
|
<dees-spinner size=${64} status="success"></dees-spinner>
|
||||||
|
<dees-spinner .size=${64} status="error"></dees-spinner>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
@ -30,6 +32,11 @@ export class DeesSpinner extends DeesElement {
|
|||||||
})
|
})
|
||||||
public size = 20;
|
public size = 20;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: String,
|
||||||
|
})
|
||||||
|
public bnw: boolean = false;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||||
|
|
||||||
@ -45,6 +52,7 @@ export class DeesSpinner extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loading {
|
#loading {
|
||||||
|
position: relative;
|
||||||
transition: none;
|
transition: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -58,16 +66,14 @@ export class DeesSpinner extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loading.success {
|
#loading.success {
|
||||||
border: 0px solid rgba(255, 255, 255, 0);
|
border: none;
|
||||||
background: #8bc34a;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: none;
|
animation: none;
|
||||||
-webkit-animation: none;
|
-webkit-animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading.error {
|
#loading.error {
|
||||||
border: 0px solid rgba(255, 255, 255, 0);
|
border: none;
|
||||||
background: #e64a19;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: none;
|
animation: none;
|
||||||
-webkit-animation: none;
|
-webkit-animation: none;
|
||||||
@ -84,36 +90,10 @@ export class DeesSpinner extends DeesElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading .checkmark {
|
dees-icon {
|
||||||
display: inline-block;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
-ms-transform: rotate(45deg); /* IE 9 */
|
|
||||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading .checkmark_stem {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3px;
|
height: 100%;
|
||||||
height: 9px;
|
width: 100%;
|
||||||
background-color: #fff;
|
|
||||||
left: 9px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading .checkmark_kick {
|
|
||||||
position: absolute;
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
background-color: #fff;
|
|
||||||
left: 6px;
|
|
||||||
top: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading.disabled .checkmark_stem,
|
|
||||||
#loading.disabled .checkmark_kick {
|
|
||||||
background-color: ${cssManager.bdTheme('#333', '#fff')};
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
@ -125,16 +105,25 @@ export class DeesSpinner extends DeesElement {
|
|||||||
width: ${this.size}px;
|
width: ${this.size}px;
|
||||||
height: ${this.size}px;
|
height: ${this.size}px;
|
||||||
}
|
}
|
||||||
|
#loading.success {
|
||||||
|
color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
|
||||||
|
|
||||||
|
}
|
||||||
|
#loading.error {
|
||||||
|
color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
|
||||||
|
}
|
||||||
|
dees-icon {
|
||||||
|
font-size: ${this.size}px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="${this.status}" id="loading">
|
<div class="${this.status}" id="loading">
|
||||||
${this.status === 'success' || this.status === 'error'
|
${(() => {
|
||||||
? html`
|
if (this.status === 'success') {
|
||||||
<span class="checkmark">
|
return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
|
||||||
<div class="checkmark_stem"></div>
|
} else if (this.status === 'error') {
|
||||||
<div class="checkmark_kick"></div>
|
return html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
|
||||||
</span>
|
}
|
||||||
`
|
})()}
|
||||||
: null}
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -136,16 +136,18 @@ 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-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
background: ${cssManager.bdTheme('#ffffff', '#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 1px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
.headingSeparation {
|
.headingSeparation {
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
|
|||||||
1
ts_web/elements/dees-tooltip.ts
Normal file
1
ts_web/elements/dees-tooltip.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
import {} from '@designestate/dees-element';
|
||||||
@ -1,6 +1,7 @@
|
|||||||
export * from './dees-button-exit.js';
|
export * from './dees-button-exit.js';
|
||||||
export * from './dees-button.js';
|
export * from './dees-button.js';
|
||||||
export * from './dees-chips.js';
|
export * from './dees-chips.js';
|
||||||
|
export * from './dees-contextmenu.js';
|
||||||
export * from './dees-form.js';
|
export * from './dees-form.js';
|
||||||
export * from './dees-form-submit.js';
|
export * from './dees-form-submit.js';
|
||||||
export * from './dees-icon.js';
|
export * from './dees-icon.js';
|
||||||
|
|||||||
Reference in New Issue
Block a user