Compare commits

...

68 Commits

Author SHA1 Message Date
d6b4b59e6d 1.0.107 2023-01-03 17:37:11 +01:00
c4236d28c6 fix(core): update 2023-01-03 17:37:10 +01:00
5f1b29f742 1.0.106 2022-12-11 17:24:13 +01:00
e7978a22e4 fix(core): update 2022-12-11 17:24:12 +01:00
15de86774b 1.0.105 2022-12-07 14:54:41 +01:00
8f57647c85 fix(core): update 2022-12-07 14:54:40 +01:00
59c5bcabd5 1.0.104 2022-12-07 02:28:31 +01:00
cae421e140 fix(core): update 2022-12-07 02:28:31 +01:00
05b2b09395 1.0.103 2022-12-06 14:07:12 +01:00
4dbd4f84c1 fix(core): update 2022-12-06 14:07:12 +01:00
bb0ca2f19d 1.0.102 2022-12-06 13:32:01 +01:00
55175f9ac7 fix(core): update 2022-12-06 13:32:00 +01:00
0be0f9fa34 1.0.101 2022-12-06 13:11:06 +01:00
7baab5d7ea fix(core): update 2022-12-06 13:11:06 +01:00
c3bdec176b 1.0.100 2022-08-18 02:15:41 +02:00
2a84e2c270 fix(core): update 2022-08-18 02:15:41 +02:00
c86f7d466c 1.0.99 2022-08-18 02:11:36 +02:00
9a6db7d882 fix(core): update 2022-08-18 02:11:35 +02:00
b69b1179a1 1.0.98 2022-08-17 19:56:22 +02:00
0df9fe750c fix(core): update 2022-08-17 19:56:22 +02:00
0d05bfa5ff 1.0.97 2022-08-17 19:28:12 +02:00
4dc9e04c2e fix(core): update 2022-08-17 19:28:11 +02:00
5341a0d6b6 1.0.96 2022-08-17 19:27:14 +02:00
615bea9fc4 fix(core): update 2022-08-17 19:27:14 +02:00
e518bc6976 1.0.95 2022-08-17 18:49:34 +02:00
076f8c7a91 fix(core): update 2022-08-17 18:49:33 +02:00
b016b959cf 1.0.94 2022-07-14 23:29:25 +02:00
eca68e28a2 fix(core): update 2022-07-14 23:29:25 +02:00
68a164aac2 1.0.93 2022-06-26 15:04:05 +02:00
9b5448e096 fix(core): update 2022-06-26 15:04:04 +02:00
232d063485 1.0.92 2022-06-10 15:50:57 +02:00
6a357cb227 fix(core): update 2022-06-10 15:50:56 +02:00
7b8218ab77 1.0.91 2022-05-30 23:15:33 +02:00
5b6436b023 fix(core): update 2022-05-30 23:15:32 +02:00
57edbb872b 1.0.90 2022-05-26 21:23:55 +02:00
76f82fe15e fix(core): update 2022-05-26 21:23:55 +02:00
0b03718f4a 1.0.89 2022-05-26 20:03:19 +02:00
2754de26d8 fix(core): update 2022-05-26 20:03:18 +02:00
abc91600e2 1.0.88 2022-05-26 18:07:02 +02:00
6a8a4aa4d2 fix(core): update 2022-05-26 18:07:02 +02:00
6a6f3b1907 1.0.87 2022-05-24 09:13:15 +02:00
0dc8e21e07 fix(core): update 2022-05-24 09:13:15 +02:00
68ccc02699 1.0.86 2022-05-20 21:04:59 +02:00
ed1c18b8ac fix(core): update 2022-05-20 21:04:59 +02:00
e8cc4c7c90 1.0.85 2022-05-20 19:51:21 +02:00
187ebed3ab fix(core): update 2022-05-20 19:51:20 +02:00
b909617271 1.0.84 2022-05-20 19:48:48 +02:00
9c2fe9f739 fix(core): update 2022-05-20 19:48:48 +02:00
ed49de64bc 1.0.83 2022-05-20 19:43:17 +02:00
162003ba7a fix(core): update 2022-05-20 19:43:16 +02:00
5f793f0acc 1.0.82 2022-05-20 18:54:49 +02:00
d23b298bd5 fix(core): update 2022-05-20 18:54:49 +02:00
f9e2f00e9b 1.0.81 2022-05-20 18:44:33 +02:00
6c3645f2f8 fix(core): update 2022-05-20 18:44:33 +02:00
e3a6798469 1.0.80 2022-05-03 15:17:28 +02:00
60de4ef674 fix(core): update 2022-05-03 15:17:28 +02:00
02e029edbc 1.0.79 2022-04-29 15:54:39 +02:00
ff5a65bdce fix(core): update 2022-04-29 15:54:38 +02:00
daacbbd042 1.0.78 2022-04-29 10:17:21 +02:00
42b44be143 fix(core): update 2022-04-29 10:17:21 +02:00
7e4c186e66 1.0.77 2022-04-29 09:47:52 +02:00
f6823639cc fix(core): update 2022-04-29 09:47:52 +02:00
f292fd9692 1.0.76 2022-03-18 19:46:30 +01:00
fa2ab7730a fix(core): update 2022-03-18 19:46:30 +01:00
3a2ba14287 1.0.75 2022-03-18 19:40:29 +01:00
c1b5778d01 fix(core): update 2022-03-18 19:40:28 +01:00
24a5f48ce1 1.0.74 2022-01-24 01:39:48 +01:00
d43b80298b fix(core): update 2022-01-24 01:39:47 +01:00
37 changed files with 5361 additions and 28797 deletions

View File

@ -12,29 +12,25 @@ stages:
- release - release
- metadata - metadata
before_script:
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
# ==================== # ====================
# security stage # security stage
# ==================== # ====================
mirror:
stage: security
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
@ -42,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
@ -57,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
@ -68,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
@ -97,10 +90,9 @@ codequality:
only: only:
- tags - tags
script: script:
- npmci command npm install -g tslint typescript - npmci command npm install -g typescript
- npmci npm prepare - npmci npm prepare
- npmci npm install - npmci npm install
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
tags: tags:
- lossless - lossless
- docker - docker
@ -120,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,5 +1,5 @@
<!--gitzone element--> <!--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 -->
<html lang="en"> <html lang="en">
<head> <head>
@ -10,6 +10,19 @@
/> />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
crossorigin="anonymous"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
margin: 0px; margin: 0px;
@ -17,7 +30,7 @@
} }
</style> </style>
<script src="./index.ts"></script> <script type="module" src="/bundle.js"></script>
</head> </head>
<body> <body>
</body> </body>

View File

@ -3,8 +3,8 @@ import * as deesWccTools from '@designestate/dees-wcctools';
import * as deesDomTools from '@designestate/dees-domtools'; import * as deesDomTools from '@designestate/dees-domtools';
// elements and pages // elements and pages
import * as elements from '../ts_web/elements'; import * as elements from '../ts_web/elements/index.js';
import * as pages from '../ts_web/pages'; import * as pages from '../ts_web/pages/index.js';
deesWccTools.setupWccTools(elements as any, pages); deesWccTools.setupWccTools(elements as any, pages);
deesDomTools.elementBasic.setup(); deesDomTools.elementBasic.setup();

View File

@ -5,7 +5,7 @@
"githost": "gitlab.com", "githost": "gitlab.com",
"gitscope": "designestate", "gitscope": "designestate",
"gitrepo": "dees-catalog", "gitrepo": "dees-catalog",
"shortDescription": "a webcomponents catalog for handling daily stuff on the web", "description": "a webcomponents catalog for handling daily stuff on the web",
"npmPackagename": "@designestate/dees-catalog", "npmPackagename": "@designestate/dees-catalog",
"license": "MIT", "license": "MIT",
"projectDomain": "design.estate" "projectDomain": "design.estate"

28625
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,36 +1,39 @@
{ {
"name": "@designestate/dees-catalog", "name": "@designestate/dees-catalog",
"version": "1.0.73", "version": "1.0.107",
"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",
"typings": "dist_ts_web/index.d.ts", "typings": "dist_ts_web/index.d.ts",
"type": "module",
"scripts": { "scripts": {
"test": "tstest test/ --web", "test": "tstest test/ --web",
"build": "tsbuild element && 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": "^1.0.102", "@designestate/dees-domtools": "^2.0.27",
"@designestate/dees-element": "^1.0.28", "@designestate/dees-element": "^2.0.18",
"@designestate/dees-wcctools": "^1.0.66", "@designestate/dees-wcctools": "^1.0.74",
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"typescript": "^4.5.3" "@pushrocks/smartpromise": "^3.1.7",
"@tsclass/tsclass": "^4.0.28",
"pdfjs-dist": "^2.15.349"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.28", "@gitzone/tsbuild": "^2.1.65",
"@gitzone/tsbundle": "^1.0.88", "@gitzone/tsbundle": "^2.0.7",
"@gitzone/tstest": "^1.0.60", "@gitzone/tstest": "^1.0.74",
"@gitzone/tswatch": "^1.0.56", "@gitzone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^4.0.5", "@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^3.2.15", "@pushrocks/tapbundle": "^5.0.4",
"tslint": "^6.1.3", "@types/node": "^18.11.18"
"tslint-config-prettier": "^1.17.0"
}, },
"files": [ "files": [
"ts/**/*", "ts/**/*",

4491
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud) PackagePhobia (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

@ -6,7 +6,7 @@ tap.test('should create a working button', async () => {
const button: deesCatalog.DeesButton = await webhelpers.fixture( const button: deesCatalog.DeesButton = await webhelpers.fixture(
webhelpers.html`<dees-button></dees-button>` webhelpers.html`<dees-button></dees-button>`
); );
expect(button).to.be.instanceOf(deesCatalog.DeesButton); expect(button).toBeInstanceOf(deesCatalog.DeesButton);
}); });
tap.start(); tap.start();

View File

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

View File

@ -0,0 +1,53 @@
import {
cssManager,
customElement,
DeesElement,
html,
TemplateResult,
css,
state,
property
} from '@designestate/dees-element';
@customElement('dees-button-exit')
export class DeesButtonExit extends DeesElement {
// DEMO
public static demo = () => html`
<dees-button-exit></dees-button-exit>
`;
// INSTANCE
@property({
type: Number
})
public size: number = 20;
public styles = [
cssManager.defaultStyles,
css`
`
]
public render (): TemplateResult {
return html`
<style>
.maincontainer {
position: relative;
width: ${this.size}px;
height: ${this.size}px;
}
.firstLine {
position: absolute;
}
.secondLine {
position: absolute;
}
</style>
<div class="maincontainer">
<div class="firstLine"></div>
<div class="secondLine"></div>
</div>
`;
}
}

View File

@ -84,9 +84,9 @@ 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 10px; padding: 0px 8px;
min-width: 100px; min-width: 100px;
user-select: none; user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')}; color: ${cssManager.bdTheme('#333', ' #ccc')};
@ -143,7 +143,7 @@ export class DeesButton extends DeesElement {
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
padding: 0px 48px; padding: 0px 48px;
margin-top: 36px; margin-top: 32px;
} }
.button.pending { .button.pending {

View File

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

View File

@ -6,7 +6,7 @@ import {
cssManager, cssManager,
property, property,
} from '@designestate/dees-element'; } from '@designestate/dees-element';
import { DeesForm } from './dees-form'; import { DeesForm } from './dees-form.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -1,11 +1,11 @@
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element'; import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import { DeesInputCheckbox } from './dees-input-checkbox';
import { DeesInputText } from './dees-input-text';
import { DeesInputQuantitySelector } from './dees-input-quantityselector';
import { DeesInputRadio } from './dees-input-radio';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
import { DeesFormSubmit } from './dees-form-submit';
import { DeesInputCheckbox } from './dees-input-checkbox.js';
import { DeesInputText } from './dees-input-text.js';
import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
import { DeesInputRadio } from './dees-input-radio.js';
import { DeesFormSubmit } from './dees-form-submit.js';
export type TFormElement = Array< export type TFormElement = Array<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio

View File

@ -10,6 +10,9 @@ 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 +25,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 +39,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,
}; };
@ -79,6 +86,9 @@ 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;
@ -97,7 +107,7 @@ export class DeesIcon extends DeesElement {
word-wrap: normal; word-wrap: normal;
white-space: nowrap; white-space: nowrap;
direction: ltr; direction: ltr;
/* Support for all WebKit browsers. */ /* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */ /* Support for Safari and Chrome. */

View File

@ -1,4 +1,4 @@
import { customElement, LitElement, TemplateResult, property, html } from 'lit-element'; import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
declare global { declare global {
@ -8,7 +8,7 @@ declare global {
} }
@customElement('dees-input-dropdown') @customElement('dees-input-dropdown')
export class DeesInputDropdown extends LitElement { export class DeesInputDropdown extends DeesElement {
public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>` public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
// INSTANCE // INSTANCE

View File

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

View File

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

View File

@ -1,4 +1,4 @@
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element'; import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
declare global { declare global {
@ -8,7 +8,7 @@ declare global {
} }
@customElement('dees-input-radio') @customElement('dees-input-radio')
export class DeesInputRadio extends LitElement { export class DeesInputRadio extends DeesElement {
public static demo = () => html`<dees-input-radio></dees-input-radio>`; public static demo = () => html`<dees-input-radio></dees-input-radio>`;
// INSTANCE // INSTANCE

View File

@ -77,6 +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: Inter;
color: ${this.goBright ? '#333' : '#ccc'}; color: ${this.goBright ? '#333' : '#ccc'};
} }

View File

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

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

@ -0,0 +1,119 @@
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
import { Deferred } from '@pushrocks/smartpromise';
import type pdfjsTypes from 'pdfjs-dist';
declare global {
interface HTMLElementTagNameMap {
'dees-pdf': DeesPdf;
}
}
@customElement('dees-pdf')
export class DeesPdf extends DeesElement {
// DEMO
public static demo = () => html` <dees-pdf></dees-pdf> `;
// INSTANCE
@property()
public pdfUrl: string =
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
constructor() {
super();
// you have access to all kinds of things through this.
// this.setAttribute('gotIt','true');
}
public render(): TemplateResult {
return html`
<style>
:host {
font-family: 'Inter', sans-serif;
display: block;
box-sizing: border-box;
max-width: 800px;
}
:host([hidden]) {
display: none;
}
#pdfcanvas {
box-shadow: 0px 0px 5px #ccc;
width: 100%;
}
</style>
<canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
`;
}
public static pdfJsReady: Promise<any>;
public static pdfjsLib: typeof pdfjsTypes;
public async connectedCallback() {
super.connectedCallback();
if (!DeesPdf.pdfJsReady) {
const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
const loadDeferred = domtools.plugins.smartpromise.defer();
const script = document.createElement('script');
script.addEventListener('load', () => {
console.log('pdf.js loaded!');
loadDeferred.resolve();
});
script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
document.getElementsByTagName('head')[0].appendChild(script);
// The workerSrc property shall be specified.
await loadDeferred.promise;
DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
pdfJsReadyDeferred.resolve();
}
await DeesPdf.pdfJsReady;
this.displayContent();
}
public async displayContent() {
await DeesPdf.pdfJsReady;
// Asynchronous download of PDF
const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
loadingTask.promise.then(
(pdf) => {
console.log('PDF loaded');
// Fetch the first page
const pageNumber = 1;
pdf.getPage(pageNumber).then((page) => {
console.log('Page loaded');
const scale = 10;
const viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions
const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: context,
viewport: viewport,
};
const renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
},
(reason) => {
// PDF loading error
console.error(reason);
}
);
}
}

View File

View File

View File

@ -0,0 +1,156 @@
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-speechbubble': DeesSpeechbubble;
}
}
@customElement('dees-speechbubble')
export class DeesSpeechbubble extends DeesElement {
public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
@property()
public text: string;
@property({
type: Boolean,
})
public disabled = false;
@property({
type: Boolean,
})
public isHidden = false;
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: relative;
display: block;
box-sizing: border-box;
color: ${cssManager.bdTheme('#333', '#fff')};
cursor: pointer;
user-select: none;
}
:host([hidden]) {
display: none;
}
.maincontainer {
will-change: transform;
transition: transform 0.2s;
transform: translateX(0px);
position: relative;
transition: all 0.2s;
margin-left: 0px;
}
.maincontainer:hover {
transform: translateX(3px);
}
.arrow {
position: absolute;
transform: rotate(45deg);
background: ${cssManager.bdTheme('#fff', '#333')};
height: 15px;
width: 15px;
left: 4px;
top: 5px;
border-radius: 2px;
}
.speechbubble {
background: ${cssManager.bdTheme('#fff', '#333')};
padding: 0px 10px;
border-radius: 3px;
position: absolute;
line-height: 25px;
font-size: 12px;
top: 0px;
left: 8px;
}
.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.5s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* Never stop waving :) */
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
} /* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
} /* Reset for the last half to pause */
100% {
transform: rotate(0deg);
}
}
`,
];
public render(): TemplateResult {
return html`
<div class="maincontainer" @click=${this.handleClick}>
<div class="arrow"></div>
<div class="speechbubble"><span class="wave">👋</span> Hey! We are API-driven.</div>
</div>
`;
}
public async handleClick() {
if (this.disabled) {
return;
}
globalThis.location.href = "https://api.global"
}
public async firstUpdated() {
if (!this.textContent) {
this.textContent = 'Button';
this.performUpdate();
}
}
}

View File

@ -153,7 +153,7 @@ export class DeesStepper extends DeesElement {
.step .title { .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
); );

View File

@ -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();
} }
@ -104,24 +135,27 @@ export class DeesTable<T> extends DeesElement {
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
.mainbox { .mainbox {
color: #fff; color: ${cssManager.bdTheme('#333', '#fff')};
font-family: Roboto Mono; font-family: Inter;
padding: 20px; font-size: 16px;
padding: 16px;
display: block; display: block;
width: 100%; width: 100%;
min-height: 50px; min-height: 50px;
background: #393939; background: ${cssManager.bdTheme('#fafafa', '#333333')};
border-radius: 3px; border-radius: 3px;
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
} }
.headingSeparation { .headingSeparation {
margin-top: 7px; margin-top: 7px;
border-bottom: 1px solid #bcbcbc; border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
} }
table, table,
.noDataSet { .noDataSet {
margin-top: 20px; margin-top: 16px;
color: #fff; color: ${cssManager.bdTheme('#333', '#fff')};
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
} }
@ -129,7 +163,7 @@ export class DeesTable<T> extends DeesElement {
text-align: center; text-align: center;
} }
tr { tr {
border-bottom: 1px dashed #808080; border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
text-align: left; text-align: left;
} }
tr:last-child { tr:last-child {
@ -140,7 +174,7 @@ export class DeesTable<T> extends DeesElement {
cursor: pointer; cursor: pointer;
} }
tr:hover .innerCellContainer { tr:hover .innerCellContainer {
background: #ffffff10; background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
} }
tr:first-child:hover { tr:first-child:hover {
cursor: auto; cursor: auto;
@ -149,7 +183,7 @@ export class DeesTable<T> extends DeesElement {
background: none; background: none;
} }
tr.selected .innerCellContainer { tr.selected .innerCellContainer {
background: #ffffff20 background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
} }
th { th {
text-transform: uppercase; text-transform: uppercase;
@ -157,10 +191,10 @@ export class DeesTable<T> extends DeesElement {
th, th,
td { td {
padding: 3px 0px; padding: 3px 0px;
border-right: 1px dashed #808080; border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
} }
.innerCellContainer { .innerCellContainer {
padding: 7px 10px; padding: 6px 8px;
} }
th:first-child .innerCellContainer, th:first-child .innerCellContainer,
td:first-child .innerCellContainer { td:first-child .innerCellContainer {
@ -175,12 +209,30 @@ 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: 5px 20px; padding: 4px 16px;
font-size: 14px; font-size: 12px;
color: #ffffff90; color: ${cssManager.bdTheme('#111', '#ffffff90')};
background: #00000050; background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
margin: 20px -20px -20px -20px; margin: 16px -16px -16px -16px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
} }
`, `,
]; ];
@ -208,6 +260,15 @@ export class DeesTable<T> extends DeesElement {
</th> </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`
@ -215,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(
@ -224,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>
` `
)} )}
@ -233,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>
`; `;

View File

@ -1,4 +1,4 @@
import { customElement, LitElement, TemplateResult, html } from 'lit-element'; import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -9,7 +9,7 @@ declare global {
} }
@customElement('dees-toast') @customElement('dees-toast')
export class DeesToast extends LitElement { export class DeesToast extends DeesElement {
constructor() { constructor() {
super(); super();

View File

@ -1,4 +1,4 @@
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element'; import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -13,7 +13,7 @@ declare global {
} }
@customElement('dees-updater') @customElement('dees-updater')
export class DeesUpdater extends LitElement { export class DeesUpdater extends DeesElement {
public static demo = () => html`<dees-updater></dees-updater>`; public static demo = () => html`<dees-updater></dees-updater>`;
@property({ @property({

View File

@ -1,4 +1,4 @@
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element'; import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -9,7 +9,7 @@ declare global {
} }
@customElement('dees-windowlayer') @customElement('dees-windowlayer')
export class DeesWindowLayer extends LitElement { export class DeesWindowLayer extends DeesElement {
// STATIC // STATIC
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`; public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
@ -42,6 +42,7 @@ export class DeesWindowLayer extends LitElement {
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 LitElement {
} }
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;
}
} }

View File

@ -1,17 +1,21 @@
export * from './dees-button'; export * from './dees-button-exit.js';
export * from './dees-chips'; export * from './dees-button.js';
export * from './dees-form'; export * from './dees-chips.js';
export * from './dees-form-submit'; export * from './dees-form.js';
export * from './dees-icon'; export * from './dees-form-submit.js';
export * from './dees-input-checkbox'; export * from './dees-icon.js';
export * from './dees-input-dropdown'; export * from './dees-input-checkbox.js';
export * from './dees-input-fileupload'; export * from './dees-input-dropdown.js';
export * from './dees-input-quantityselector'; export * from './dees-input-fileupload.js';
export * from './dees-input-radio'; export * from './dees-input-quantityselector.js';
export * from './dees-input-text'; export * from './dees-input-radio.js';
export * from './dees-spinner'; export * from './dees-input-text.js';
export * from './dees-stepper'; export * from './dees-mobilenavigation.js';
export * from './dees-table'; export * from './dees-pdf.js';
export * from './dees-toast'; export * from './dees-speechbubble.js';
export * from './dees-updater'; export * from './dees-spinner.js';
export * from './dees-windowlayer'; export * from './dees-stepper.js';
export * from './dees-table.js';
export * from './dees-toast.js';
export * from './dees-updater.js';
export * from './dees-windowlayer.js';

View File

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

View File

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

View File

@ -1,16 +0,0 @@
{
"compilerOptions": {
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"declaration": true,
"inlineSources": true,
"inlineSourceMap": true,
"noUnusedLocals": true,
"noFallthroughCasesInSwitch": true,
"outDir": "dist/",
"skipLibCheck": true,
"experimentalDecorators": true
}
}

View File

@ -1,7 +1,10 @@
{ {
"compilerOptions": { "compilerOptions": {
"experimentalDecorators": true, "experimentalDecorators": true,
"target": "ES2017", "useDefineForClassFields": false,
"moduleResolution": "Node" "target": "ES2022",
"module": "ES2022",
"moduleResolution": "nodenext",
"esModuleInterop": true
} }
} }

View File

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