Compare commits

...

74 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
27d338420c 1.0.73 2021-12-10 18:18:57 +01:00
81f2e662fb fix(core): update 2021-12-10 18:18:57 +01:00
d8905b687f 1.0.72 2021-11-27 17:38:53 +01:00
75f6da194b fix(core): update 2021-11-27 17:38:53 +01:00
e653450ec5 1.0.71 2021-11-26 20:06:10 +01:00
9de9f0c202 fix(core): update 2021-11-26 20:06:09 +01:00
37 changed files with 5382 additions and 28960 deletions

View File

@ -12,29 +12,25 @@ stages:
- release
- metadata
before_script:
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
# ====================
# security stage
# ====================
mirror:
stage: security
script:
- npmci git mirror
only:
- tags
tags:
- lossless
- docker
- notpriv
auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --production --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=prod --production
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --prod
tags:
- lossless
- docker
allow_failure: true
@ -42,11 +38,10 @@ auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=dev
- npmci command pnpm audit --audit-level=high --dev
tags:
- lossless
- docker
allow_failure: true
@ -57,7 +52,6 @@ auditDevDependencies:
testStable:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci npm test
@ -68,10 +62,9 @@ testStable:
testBuild:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command npm run build
- npmci npm build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- docker
@ -97,10 +90,9 @@ codequality:
only:
- tags
script:
- npmci command npm install -g tslint typescript
- npmci command npm install -g typescript
- npmci npm prepare
- npmci npm install
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
tags:
- lossless
- docker
@ -120,11 +112,9 @@ trigger:
pages:
stage: metadata
script:
- npmci node install lts
- npmci command npm install -g @gitzone/tsdoc
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command tsdoc
- npmci command npm run buildDocs
tags:
- lossless
- docker

View File

@ -1,5 +1,5 @@
<!--gitzone element-->
<!-- made by Lossless GmbH -->
<!-- made by Task Venture Capital GmbH -->
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
<html lang="en">
<head>
@ -10,6 +10,19 @@
/>
<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>
body {
margin: 0px;
@ -17,7 +30,7 @@
}
</style>
<script src="./index.ts"></script>
<script type="module" src="/bundle.js"></script>
</head>
<body>
</body>

View File

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

View File

@ -5,7 +5,7 @@
"githost": "gitlab.com",
"gitscope": "designestate",
"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",
"license": "MIT",
"projectDomain": "design.estate"

28778
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,36 +1,39 @@
{
"name": "@designestate/dees-catalog",
"version": "1.0.70",
"version": "1.0.107",
"private": false,
"description": "website for lossless.com",
"main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts",
"type": "module",
"scripts": {
"test": "tstest test/ --web",
"build": "tsbuild element && tsbundle element --production",
"watch": "tswatch element"
"build": "tsbuild element --allowimplicitany && tsbundle element --production",
"watch": "tswatch element",
"buildDocs": "tsdoc"
},
"author": "Lossless GmbH",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^1.0.96",
"@designestate/dees-element": "^1.0.26",
"@designestate/dees-wcctools": "^1.0.59",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"typescript": "^4.4.3"
"@designestate/dees-domtools": "^2.0.27",
"@designestate/dees-element": "^2.0.18",
"@designestate/dees-wcctools": "^1.0.74",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@pushrocks/smartpromise": "^3.1.7",
"@tsclass/tsclass": "^4.0.28",
"pdfjs-dist": "^2.15.349"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.28",
"@gitzone/tsbundle": "^1.0.88",
"@gitzone/tstest": "^1.0.59",
"@gitzone/tswatch": "^1.0.56",
"@pushrocks/projectinfo": "^4.0.5",
"@pushrocks/tapbundle": "^3.2.14",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0"
"@gitzone/tsbuild": "^2.1.65",
"@gitzone/tsbundle": "^2.0.7",
"@gitzone/tstest": "^1.0.74",
"@gitzone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^5.0.4",
"@types/node": "^18.11.18"
},
"files": [
"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 (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
## Usage
@ -35,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
For further information read the linked docs at the top of this readme.
> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
## Legal
> MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

View File

@ -6,7 +6,7 @@ tap.test('should create a working button', async () => {
const button: deesCatalog.DeesButton = await webhelpers.fixture(
webhelpers.html`<dees-button></dees-button>`
);
expect(button).to.be.instanceOf(deesCatalog.DeesButton);
expect(button).toBeInstanceOf(deesCatalog.DeesButton);
});
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')};
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 2px;
border-radius: 4px;
line-height: 40px;
padding: 0px 10px;
padding: 0px 8px;
min-width: 100px;
user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')};
@ -143,7 +143,7 @@ export class DeesButton extends DeesElement {
line-height: 48px;
font-size: 16px;
padding: 0px 48px;
margin-top: 36px;
margin-top: 32px;
}
.button.pending {

View File

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

View File

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

View File

@ -1,11 +1,11 @@
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 { 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<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio

View File

@ -1,4 +1,4 @@
import { LitElement, html, property, customElement } from 'lit-element';
import { DeesElement, html, property, customElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@ -10,6 +10,9 @@ import {
faMedium,
faSlackHash,
faTwitter,
faInstagram,
faTiktok,
} from '@fortawesome/free-brands-svg-icons';
import {} from '@fortawesome/free-regular-svg-icons';
@ -22,10 +25,12 @@ type TFontAwesomeIcon =
// brands
| 'facebook'
| 'google'
| 'twitter'
| 'linkedin'
| 'instagram'
| 'medium'
| 'slack'
| 'tiktok'
| 'twitter'
| 'users';
const faIcons: { [key: string]: IconDefinition } = {
// normal
@ -34,9 +39,11 @@ const faIcons: { [key: string]: IconDefinition } = {
// brands
facebook: faFacebook,
google: faGoogle,
instagram: faInstagram,
linkedin: faLinkedin,
medium: faMedium,
slack: faSlackHash,
tiktok: faTiktok,
twitter: faTwitter,
users: faUsers,
};
@ -48,8 +55,9 @@ declare global {
}
@customElement('dees-icon')
export class DeesIcon extends LitElement {
export class DeesIcon extends DeesElement {
public static demo = () => html`
<dees-icon iconName="visibility"></dees-icon>
<div style="background: #fff; padding: 10px;">
<dees-icon iconName="visibility"></dees-icon>
<dees-icon brandName="facebook"></dees-icon>
@ -78,6 +86,9 @@ export class DeesIcon extends LitElement {
display: block;
line-height: inherit;
font-size: inherit;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
#iconContainer svg {
display: inline-block;
@ -96,7 +107,7 @@ export class DeesIcon extends LitElement {
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* 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';
declare global {
@ -8,7 +8,7 @@ declare global {
}
@customElement('dees-input-dropdown')
export class DeesInputDropdown extends LitElement {
export class DeesInputDropdown extends DeesElement {
public static demo = () => html`<dees-input-dropdown></dees-input-dropdown>`
// INSTANCE

View File

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

View File

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

View File

@ -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';
declare global {
@ -8,7 +8,7 @@ declare global {
}
@customElement('dees-input-radio')
export class DeesInputRadio extends LitElement {
export class DeesInputRadio extends DeesElement {
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
// INSTANCE

View File

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

View File

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

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

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

View File

View File

View File

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

View File

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

View File

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

View File

@ -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';
@ -9,7 +9,7 @@ declare global {
}
@customElement('dees-toast')
export class DeesToast extends LitElement {
export class DeesToast extends DeesElement {
constructor() {
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';
@ -13,13 +13,17 @@ declare global {
}
@customElement('dees-updater')
export class DeesUpdater extends LitElement {
public static demo = () => html`<dees-updater ></dees-updater>`;
export class DeesUpdater extends DeesElement {
public static demo = () => html`<dees-updater></dees-updater>`;
@property()
@property({
type: String,
})
currentVersion: string;
@property()
@property({
type: String,
})
updatedVersion: string;
constructor() {

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';
@ -9,7 +9,7 @@ declare global {
}
@customElement('dees-windowlayer')
export class DeesWindowLayer extends LitElement {
export class DeesWindowLayer extends DeesElement {
// STATIC
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
@ -42,6 +42,7 @@ export class DeesWindowLayer extends LitElement {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: brightness(1);
pointer-events: none;
z-index: 200;
}
.visible {
@ -63,10 +64,22 @@ export class DeesWindowLayer extends LitElement {
}
dispatchClicked() {
this.dispatchEvent(new CustomEvent('clicked'))
this.dispatchEvent(new CustomEvent('clicked'));
}
public toggleVisibility () {
this.visible = !this.visible;
}
public async show() {
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(0);
this.visible = true;
}
public async hide() {
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(0);
this.visible = false;
}
}

View File

@ -1,17 +1,21 @@
export * from './dees-button';
export * from './dees-chips';
export * from './dees-form';
export * from './dees-form-submit';
export * from './dees-icon';
export * from './dees-input-checkbox';
export * from './dees-input-dropdown';
export * from './dees-input-fileupload';
export * from './dees-input-quantityselector';
export * from './dees-input-radio';
export * from './dees-input-text';
export * from './dees-spinner';
export * from './dees-stepper';
export * from './dees-table';
export * from './dees-toast';
export * from './dees-updater';
export * from './dees-windowlayer';
export * from './dees-button-exit.js';
export * from './dees-button.js';
export * from './dees-chips.js';
export * from './dees-form.js';
export * from './dees-form-submit.js';
export * from './dees-icon.js';
export * from './dees-input-checkbox.js';
export * from './dees-input-dropdown.js';
export * from './dees-input-fileupload.js';
export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js';
export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js';
export * from './dees-pdf.js';
export * from './dees-speechbubble.js';
export * from './dees-spinner.js';
export * from './dees-stepper.js';
export * from './dees-table.js';
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": {
"experimentalDecorators": true,
"target": "ES2017",
"moduleResolution": "Node"
"useDefineForClassFields": false,
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "nodenext",
"esModuleInterop": true
}
}

View File

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