Compare commits

...

66 Commits

Author SHA1 Message Date
2910757e8c 1.0.139 2023-01-13 01:17:08 +01:00
a00bacd4ff fix(core): update 2023-01-13 01:17:08 +01:00
01963447dd 1.0.138 2023-01-13 00:50:34 +01:00
5d1d1ba4ba fix(core): update 2023-01-13 00:50:34 +01:00
7885422033 1.0.137 2023-01-13 00:46:18 +01:00
fb48425c13 fix(core): update 2023-01-13 00:46:17 +01:00
3792c5edf5 1.0.136 2023-01-13 00:30:56 +01:00
2abd91ab4a fix(core): update 2023-01-13 00:30:56 +01:00
310910e8ee 1.0.135 2023-01-12 19:19:32 +01:00
3301ad1556 fix(core): update 2023-01-12 19:19:31 +01:00
0f8a7a5a7b 1.0.134 2023-01-12 18:15:00 +01:00
f1a0c5741c fix(core): update 2023-01-12 18:14:59 +01:00
cbf60db9fa 1.0.133 2023-01-12 00:07:39 +01:00
34d5bda579 fix(core): update 2023-01-12 00:07:39 +01:00
916ba68c94 1.0.132 2023-01-11 20:55:07 +01:00
46fc396772 fix(core): update 2023-01-11 20:55:06 +01:00
0e77baf600 1.0.131 2023-01-11 20:52:38 +01:00
89fd8b5080 fix(core): update 2023-01-11 20:52:37 +01:00
884f9725b5 1.0.130 2023-01-11 18:32:05 +01:00
48e093b1ba fix(core): update 2023-01-11 18:32:05 +01:00
2b3875d738 1.0.129 2023-01-11 18:15:32 +01:00
279d1c2f3f fix(core): update 2023-01-11 18:15:31 +01:00
29f2839d5b 1.0.128 2023-01-11 18:09:57 +01:00
96683b4380 fix(core): update 2023-01-11 18:09:57 +01:00
36fbf7f29e 1.0.127 2023-01-11 17:50:38 +01:00
67d4c216ed fix(core): update 2023-01-11 17:50:37 +01:00
9d51cdd480 1.0.126 2023-01-11 17:43:59 +01:00
d6679ca41f fix(core): update 2023-01-11 17:43:58 +01:00
baadd1e06b 1.0.125 2023-01-11 17:19:22 +01:00
600ab56026 fix(core): update 2023-01-11 17:19:22 +01:00
ae40a9f541 1.0.124 2023-01-09 23:13:44 +01:00
48f7768b96 fix(core): update 2023-01-09 23:13:44 +01:00
de3f9fcb34 1.0.123 2023-01-09 14:19:59 +01:00
313009d3ff fix(core): update 2023-01-09 14:19:58 +01:00
83ede1edea 1.0.122 2023-01-09 13:55:15 +01:00
ec50b4b3a0 fix(core): update 2023-01-09 13:55:14 +01:00
4fbb1caaeb 1.0.121 2023-01-07 16:48:40 +01:00
41a2529275 fix(core): update 2023-01-07 16:48:39 +01:00
41ff71e6b0 1.0.120 2023-01-07 16:47:02 +01:00
2d07765c16 fix(core): update 2023-01-07 16:47:01 +01:00
15db9fb6d9 1.0.119 2023-01-07 16:42:13 +01:00
73d92624de fix(core): update 2023-01-07 16:42:12 +01:00
0d77685338 1.0.118 2023-01-07 16:32:44 +01:00
05bbfccd22 fix(core): update 2023-01-07 16:32:43 +01:00
5cca89de37 1.0.117 2023-01-07 16:08:11 +01:00
ab5b7a5b89 fix(core): update 2023-01-07 16:08:10 +01:00
253d5623c4 1.0.116 2023-01-07 15:43:38 +01:00
1048192bfa fix(core): update 2023-01-07 15:43:37 +01:00
289e6d37fa 1.0.115 2023-01-07 15:24:58 +01:00
7308c1454f fix(core): update 2023-01-07 15:24:57 +01:00
cfc880d7c2 1.0.114 2023-01-07 15:06:41 +01:00
c32cff8126 fix(core): update 2023-01-07 15:06:41 +01:00
4526c0c365 1.0.113 2023-01-07 15:05:49 +01:00
45e7f39af0 fix(core): update 2023-01-07 15:05:48 +01:00
26b72fbccf 1.0.112 2023-01-07 14:23:17 +01:00
8acf3f4196 fix(core): update 2023-01-07 14:23:17 +01:00
75c8b409cc 1.0.111 2023-01-07 14:12:19 +01:00
6509ddb81c fix(core): update 2023-01-07 14:12:18 +01:00
7cc0173e3c 1.0.110 2023-01-07 14:09:46 +01:00
f797d71e52 fix(core): update 2023-01-07 14:09:45 +01:00
54db88e4b4 1.0.109 2023-01-07 13:41:24 +01:00
93c73c36c8 fix(core): update 2023-01-07 13:41:24 +01:00
9c9bd4a180 1.0.108 2023-01-07 13:27:25 +01:00
0a54de3e59 fix(core): update 2023-01-07 13:27:24 +01:00
d6b4b59e6d 1.0.107 2023-01-03 17:37:11 +01:00
c4236d28c6 fix(core): update 2023-01-03 17:37:10 +01:00
19 changed files with 701 additions and 573 deletions

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{ {
"name": "@designestate/dees-catalog", "name": "@designestate/dees-catalog",
"version": "1.0.106", "version": "1.0.139",
"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.18",
"@designestate/dees-wcctools": "^1.0.74", "@designestate/dees-wcctools": "^1.0.76",
"@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1", "@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@pushrocks/smartpromise": "^3.1.7", "@pushrocks/smartpromise": "^3.1.7",
"@tsclass/tsclass": "^4.0.28", "@tsclass/tsclass": "^4.0.29",
"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.11.18"
}, },
"files": [ "files": [
"ts/**/*", "ts/**/*",

649
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud) PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud) PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud) BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
## Usage ## 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 | **&copy;** [Lossless GmbH](https://lossless.gmbh) ## Legal
> MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy) | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

View File

@ -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.139',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

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

View File

@ -74,9 +74,10 @@ 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;
@ -96,9 +97,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 +181,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>
`; `;
} }

View File

@ -0,0 +1,139 @@
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 @click=${() => {
DeesContextmenu.openContextMenuWithOptions();
}}>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 openContextMenuWithOptions(eventArg, contextOptions: plugins.tsclass.website.IMenuItem[]) {
const contextMenu = new DeesContextmenu();
contextMenu.style.position = 'absolute';
contextMenu;
const windowLayer = new DeesWindowLayer();
windowLayer.append(contextMenu);
document.body.append(windowLayer);
}
@property({
type: Array,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
}
.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">
<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';
}
}
}

View File

@ -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,87 @@ 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,
faGrip as faGripSolid,
faMessage as faMessageSolid,
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,
grip: faGripSolid,
gripSolid: faGripSolid,
message: faMessageRegular,
messageSolid: faMessageSolid,
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 +109,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 +122,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 firstUpdated() {
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';
} }
} }
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -136,7 +136,8 @@ 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;

View File

@ -0,0 +1 @@
import {} from '@designestate/dees-element';

View File

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