Compare commits

...

46 Commits

Author SHA1 Message Date
362bef15e3 1.0.180 2023-08-30 11:27:47 +02:00
446c494863 fix(core): update 2023-08-30 11:27:46 +02:00
dbe2f2f217 1.0.179 2023-08-28 09:59:13 +02:00
02ca92a431 fix(core): update 2023-08-28 09:59:12 +02:00
a9015e787c 1.0.178 2023-08-28 09:49:52 +02:00
9cd28fa819 fix(core): update 2023-08-28 09:49:51 +02:00
7b3793e943 1.0.177 2023-08-26 12:15:49 +02:00
a22c04d98d fix(core): update 2023-08-26 12:15:49 +02:00
5367512292 1.0.176 2023-08-20 17:11:41 +02:00
9c387f8ace fix(core): update 2023-08-20 17:11:41 +02:00
c3ec288d09 1.0.175 2023-08-19 18:56:33 +02:00
9d952afebb fix(core): update 2023-08-19 18:56:32 +02:00
621262fde7 1.0.174 2023-08-19 11:47:45 +02:00
e3e79d9a11 fix(core): update 2023-08-19 11:47:45 +02:00
d08a92814e 1.0.173 2023-08-08 01:10:03 +02:00
a6f277250e fix(core): update 2023-08-08 01:10:02 +02:00
09cb82d587 1.0.172 2023-08-07 20:02:19 +02:00
316e2a0b27 fix(core): update 2023-08-07 20:02:18 +02:00
e0d2679801 1.0.171 2023-08-07 19:13:30 +02:00
107800a057 fix(core): update 2023-08-07 19:13:29 +02:00
4ee8512ee4 1.0.170 2023-04-12 02:47:46 +02:00
f75a3714ae fix(core): update 2023-04-12 02:47:45 +02:00
d6047f2e78 1.0.169 2023-04-12 00:40:40 +02:00
03769c8412 fix(core): update 2023-04-12 00:40:40 +02:00
1a782eb4ee 1.0.168 2023-04-10 00:26:55 +02:00
a27adf25cb fix(core): update 2023-04-10 00:26:55 +02:00
96e237b9af 1.0.167 2023-04-10 00:18:17 +02:00
710e06b2f1 fix(core): update 2023-04-10 00:18:16 +02:00
a3bc25c4ac 1.0.166 2023-04-10 00:17:38 +02:00
ee5b712a37 fix(core): update 2023-04-10 00:17:38 +02:00
879ae5ad91 1.0.165 2023-04-07 23:55:56 +02:00
2bbda416b2 fix(core): update 2023-04-07 23:55:55 +02:00
de88957857 1.0.164 2023-04-07 23:46:09 +02:00
aa0c63d569 fix(core): update 2023-04-07 23:46:08 +02:00
d843f27fd3 1.0.163 2023-04-06 17:41:46 +02:00
a26755b7d3 fix(core): update 2023-04-06 17:41:46 +02:00
345a562a21 1.0.162 2023-04-06 17:32:50 +02:00
3fae99554d fix(core): update 2023-04-06 17:32:49 +02:00
ed30ed3f8f 1.0.161 2023-04-06 17:29:08 +02:00
beef47959b fix(core): update 2023-04-06 17:29:07 +02:00
aec2cf18fd 1.0.160 2023-04-05 18:57:13 +02:00
0f45633666 fix(core): update 2023-04-05 18:57:12 +02:00
8588888ce7 1.0.159 2023-04-05 17:17:02 +02:00
2a62a635cd fix(core): update 2023-04-05 17:17:02 +02:00
0eb2557956 1.0.158 2023-04-05 17:00:44 +02:00
9960bf7018 fix(core): update 2023-04-05 17:00:44 +02:00
40 changed files with 2643 additions and 1129 deletions

View File

@ -0,0 +1,66 @@
name: Default (not tags)
on:
push:
tags-ignore:
- '**'
env:
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
jobs:
security:
runs-on: ubuntu-latest
continue-on-error: true
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Install pnpm and npmci
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
- name: Run npm prepare
run: npmci npm prepare
- name: Audit production dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --prod
continue-on-error: true
- name: Audit development dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --dev
continue-on-error: true
test:
if: ${{ always() }}
needs: security
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Test stable
run: |
npmci node install stable
npmci npm install
npmci npm test
- name: Test build
run: |
npmci node install stable
npmci npm install
npmci npm build

View File

@ -0,0 +1,124 @@
name: Default (tags)
on:
push:
tags:
- '*'
env:
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
jobs:
security:
runs-on: ubuntu-latest
continue-on-error: true
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Audit production dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --prod
continue-on-error: true
- name: Audit development dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --dev
continue-on-error: true
test:
if: ${{ always() }}
needs: security
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Test stable
run: |
npmci node install stable
npmci npm install
npmci npm test
- name: Test build
run: |
npmci node install stable
npmci npm install
npmci npm build
release:
needs: test
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Release
run: |
npmci node install stable
npmci npm publish
metadata:
needs: test
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
continue-on-error: true
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Code quality
run: |
npmci command npm install -g typescript
npmci npm install
- name: Trigger
run: npmci trigger
- name: Build docs and upload artifacts
run: |
npmci node install stable
npmci npm install
pnpm install -g @gitzone/tsdoc
npmci command tsdoc
continue-on-error: true

View File

@ -10,11 +10,9 @@
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<!--Lets load standard fonts-->
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
<style>
body {

View File

@ -1,6 +1,6 @@
// dees tools
import * as deesWccTools from '@designestate/dees-wcctools';
import * as deesDomTools from '@designestate/dees-domtools';
import * as deesWccTools from '@design.estate/dees-wcctools';
import * as deesDomTools from '@design.estate/dees-domtools';
// elements and pages
import * as elements from '../ts_web/elements/index.js';

View File

@ -3,10 +3,10 @@
"projectType": "wcc",
"module": {
"githost": "gitlab.com",
"gitscope": "designestate",
"gitscope": "design.estate",
"gitrepo": "dees-catalog",
"description": "a webcomponents catalog for handling daily stuff on the web",
"npmPackagename": "@designestate/dees-catalog",
"npmPackagename": "@design.estate/dees-catalog",
"license": "MIT",
"projectDomain": "design.estate"
}

View File

@ -1,6 +1,6 @@
{
"name": "@designestate/dees-catalog",
"version": "1.0.157",
"name": "@design.estate/dees-catalog",
"version": "1.0.180",
"private": false,
"description": "website for lossless.com",
"main": "dist_ts_web/index.js",
@ -15,27 +15,27 @@
"author": "Lossless GmbH",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^2.0.30",
"@designestate/dees-element": "^2.0.20",
"@designestate/dees-wcctools": "^1.0.76",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@pushrocks/smartpromise": "^4.0.0",
"@pushrocks/smartstring": "^4.0.5",
"@tsclass/tsclass": "^4.0.36",
"highlight.js": "11.7.0",
"pdfjs-dist": "^2.15.349"
"@design.estate/dees-domtools": "^2.0.38",
"@design.estate/dees-element": "^2.0.25",
"@design.estate/dees-wcctools": "^1.0.78",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@push.rocks/smartpromise": "^4.0.3",
"@push.rocks/smartstring": "^4.0.8",
"@tsclass/tsclass": "^4.0.42",
"highlight.js": "11.8.0",
"pdfjs-dist": "^2.16.105"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.65",
"@gitzone/tsbundle": "^2.0.7",
"@gitzone/tstest": "^1.0.74",
"@gitzone/tsbuild": "^2.1.66",
"@gitzone/tsbundle": "^2.0.8",
"@gitzone/tstest": "^1.0.77",
"@gitzone/tswatch": "^2.0.7",
"@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^5.0.4",
"@types/node": "^18.15.11"
"@push.rocks/projectinfo": "^5.0.2",
"@push.rocks/tapbundle": "^5.0.15",
"@types/node": "^20.5.1"
},
"files": [
"ts/**/*",

2998
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -1,26 +1,26 @@
# @designestate/dees-catalog
# @design.estate/dees-catalog
a webcomponents catalog for handling daily stuff on the web
## Availabililty and Links
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-catalog)
* [gitlab.com (source)](https://gitlab.com/designestate/dees-catalog)
* [github.com (source mirror)](https://github.com/designestate/dees-catalog)
* [docs (typedoc)](https://designestate.gitlab.io/dees-catalog/)
* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/dees-catalog)
* [gitlab.com (source)](https://gitlab.com/design.estate/dees-catalog)
* [github.com (source mirror)](https://github.com/design.estate/dees-catalog)
* [docs (typedoc)](https://design.estate.gitlab.io/dees-catalog/)
## Status for master
Status Category | Status Badge
-- | --
GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-catalog)](https://lossless.cloud)
GitLab Pipelines | [![pipeline status](https://gitlab.com/design.estate/dees-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/design.estate/dees-catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/dees-catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/design.estate/dees-catalog)](https://lossless.cloud)
TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](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)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/dees-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/dees-catalog)](https://lossless.cloud)
## Usage

View File

@ -1,4 +1,4 @@
import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
import { tap, expect, webhelpers } from '@push.rocks/tapbundle';
import * as deesCatalog from '../ts_web';

View File

@ -2,7 +2,7 @@
* autocreated commitinfo by @pushrocks/commitinfo
*/
export const commitinfo = {
name: '@designestate/dees-catalog',
version: '1.0.157',
name: '@design.estate/dees-catalog',
version: '1.0.180',
description: 'website for lossless.com'
}

View File

@ -3,11 +3,12 @@ import {
customElement,
DeesElement,
html,
TemplateResult,
type TemplateResult,
css,
type CSSResult,
state,
property
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
@customElement('dees-button-exit')
export class DeesButtonExit extends DeesElement {

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -87,7 +88,7 @@ export class DeesButton extends DeesElement {
justify-content: center;
align-items: center;
background: ${cssManager.bdTheme('#fff', '#333')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
box-shadow: ${cssManager.bdTheme('0px 1px 3px rgba(0,0,0,0.3)', 'none')};
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 4px;

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -4,13 +4,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from './dees-windowlayer.js';
declare global {

View File

@ -2,16 +2,16 @@ import {
DeesElement,
html,
customElement,
TemplateResult,
type TemplateResult,
property,
state,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import hlight from 'highlight.js';
import * as smartstring from '@pushrocks/smartstring';
import * as smartstring from '@push.rocks/smartstring';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -30,9 +30,10 @@ export class DeesDataviewCodebox extends DeesElement {
public progLang: string = 'typescript';
@property({
type: String
type: String,
reflect: true,
})
public codeToDisplay: string = '// no code set';
public codeToDisplay: string = '';
constructor() {
super();
@ -108,7 +109,7 @@ export class DeesDataviewCodebox extends DeesElement {
.lineNumbers {
line-height: 1.4em;
font-weight: 200;
font-family: monospace;
font-family: 'Intel One Mono', 'monospace';
}
.hljs-string {
@ -143,12 +144,15 @@ export class DeesDataviewCodebox extends DeesElement {
})
})()}
</div>
<pre><code class="${this.progLang}">${this.codeToDisplay}</code></pre>
<pre><code></code></pre>
</div>
</div>
`;
}
@state()
private codeToDisplayStore = '';
public async updated(_changedProperties) {
super.updated(_changedProperties);
console.log('highlighting now');
@ -159,11 +163,16 @@ export class DeesDataviewCodebox extends DeesElement {
slottedCodeNodes.push(childNode as Text);
}
});
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText) {
this.codeToDisplay = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
}
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart();
this.codeToDisplay = this.codeToDisplayStore;
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
hlight.highlightBlock(localCodeNode);
const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
localCodeNode.innerHTML = html.value;
}
}

View File

@ -2,21 +2,16 @@ import {
DeesElement,
html,
customElement,
TemplateResult,
type TemplateResult,
property,
state,
cssManager,
css,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';
import hlight from 'highlight.js';
import * as smartstring from '@pushrocks/smartstring';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-dataview-statusobject': DeesDataviewStatusobject;
@ -52,7 +47,7 @@ export class DeesDataviewStatusobject extends DeesElement {
},
{
name: 'Detail 4',
value: 'Value 4',
value: 'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
status: 'ok',
statusText: 'OK',
},
@ -67,9 +62,9 @@ export class DeesDataviewStatusobject extends DeesElement {
cssManager.defaultStyles,
css`
.mainbox {
max-width: 600px;
border-radius: 3px;
background: #1b1b1b;
background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
box-shadow: 0px 1px 3px #00000030;
min-height: 48px;
color: ${cssManager.bdTheme('#000', '#fff')};
}
@ -123,20 +118,27 @@ export class DeesDataviewStatusobject extends DeesElement {
}
.detail {
height: 60px;
minheight: 60px;
align-items: center;
display: grid;
grid-template-columns: 40px auto;
border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
}
.detail .detailsText {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
word-break: break-all;
}
.detail .detailsText .label {
font-size: 12px;
}
.detail .detailsText .value {
font-size: 16px;
font-family: Roboto Mono;
font-family: 'Intel One Mono';
}
`,
];
@ -145,11 +147,11 @@ export class DeesDataviewStatusobject extends DeesElement {
return html`
<div class="mainbox">
<div class="heading">
<div class="statusdot ${this.statusObject.combinedStatus}"></div>
<div class="statusdot ${this.statusObject?.combinedStatus}"></div>
<h1>${this.statusObject?.name || 'no status object assigned'}</h1>
<div class="copyMain">Copy as JSON</div>
</div>
${this.statusObject.details.map((detailArg) => {
${this.statusObject?.details?.map((detailArg) => {
return html`
<div class="detail">
<div class="statusdot ${detailArg.status}"></div>

View File

@ -5,7 +5,8 @@ import {
css,
cssManager,
property,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import { DeesForm } from './dees-form.js';
declare global {
@ -20,6 +21,7 @@ export class DeesFormSubmit extends DeesElement {
@property({
type: Boolean,
reflect: true,
})
public disabled = false;
@ -29,7 +31,7 @@ export class DeesFormSubmit extends DeesElement {
public text: string;
@property({
type: String
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@ -41,7 +43,12 @@ export class DeesFormSubmit extends DeesElement {
public render() {
return html`
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
<dees-button
status=${this.status}
@click=${this.submit}
.disabled=${this.disabled}
.text=${this.text ? this.text : this.textContent}
>
</dees-button>
`;
}
@ -53,4 +60,12 @@ export class DeesFormSubmit extends DeesElement {
const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch();
}
public async focus() {
const domtools = await this.domtoolsPromise;
if (!this.disabled) {
domtools.convenience.smartdelay.delayFor(0);
this.submit();
}
}
}

View File

@ -1,5 +1,5 @@
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { DeesInputCheckbox } from './dees-input-checkbox.js';
import { DeesInputText } from './dees-input-text.js';
@ -7,9 +7,15 @@ 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
>;
// Unified set for form input types
const FORM_INPUT_TYPES = [
DeesInputCheckbox,
DeesInputText,
DeesInputQuantitySelector,
DeesInputRadio
];
export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
declare global {
interface HTMLElementTagNameMap {
@ -19,6 +25,7 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = () => html`
<dees-form
style="display: block; margin:auto; max-width: 500px; padding: 20px"
@ -31,17 +38,14 @@ export class DeesForm extends DeesElement {
>
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
<dees-input-checkbox
.required="${true}"
key="hello3"
label="another text"
></dees-input-checkbox>
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit>
</dees-form>
`;
public name: string = 'myform';
public changeSubject = new domtools.rxjs.Subject();
public readyDeferred = domtools.plugins.smartpromise.defer();
public render(): TemplateResult {
return html`
@ -54,51 +58,39 @@ export class DeesForm extends DeesElement {
`;
}
public firstUpdated() {
const formChildren = this.getFormChildren();
this.checkRequiredStatus();
public async firstUpdated() {
const formChildren = this.getFormElements();
this.updateRequiredStatus();
for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData();
child.changeSubject.subscribe(async () => {
const valueObject = await this.collectFormData();
this.changeSubject.next(valueObject);
console.log(valueObject);
this.checkRequiredStatus();
this.updateRequiredStatus();
});
}
await this.addBehaviours();
this.readyDeferred.resolve();
}
public getFormChildren() {
const children: Array<DeesElement> = this.children as any;
const formChildren: TFormElement = [];
for (const child of children) {
if (
child instanceof DeesInputCheckbox ||
child instanceof DeesInputText ||
child instanceof DeesInputQuantitySelector
) {
formChildren.push(child);
}
}
return formChildren;
public getFormElements(): Array<TFormInputElement> {
return (Array.from(this.children)).filter(child =>
FORM_INPUT_TYPES.includes(child.constructor as any)
) as unknown as TFormInputElement[];
}
public getSubmitButton() {
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
if (childArg instanceof DeesFormSubmit) {
submitButton = childArg;
}
}
return submitButton;
public getSubmitButton(): DeesFormSubmit | undefined {
return Array.from(this.children).find(child =>
child instanceof DeesFormSubmit
) as DeesFormSubmit;
}
public async checkRequiredStatus() {
public async updateRequiredStatus() {
console.log('checking the required status.');
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
for (const childArg of this.getFormElements()) {
if (childArg.required && !childArg.value) {
requiredOK = false;
}
@ -108,17 +100,20 @@ export class DeesForm extends DeesElement {
}
}
public async gatherData() {
const children = this.getFormChildren();
public async collectFormData() {
const children = this.getFormElements();
const valueObject: { [key: string]: string | number | boolean } = {};
for (const child of children) {
if (!child.key) {
console.log(`form element with label "${child.label}" has no key. skipping.`);
}
valueObject[child.key] = child.value;
}
return valueObject;
}
public async gatherAndDispatch() {
const valueObject = await this.gatherData();
const valueObject = await this.collectFormData();
const formDataEvent = new CustomEvent('formData', {
detail: {
data: valueObject,
@ -134,7 +129,7 @@ export class DeesForm extends DeesElement {
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
textStateArg: string
) {
const inputChildren = this.getFormChildren();
const inputChildren = this.getFormElements();
const submitButton = this.getSubmitButton();
switch (visualStateArg) {
@ -170,4 +165,23 @@ export class DeesForm extends DeesElement {
submitButton.text = textStateArg;
}
public async addBehaviours() {
// Use event delegation
this.addEventListener('keydown', (event: KeyboardEvent) => {
const target = event.target as DeesElement;
if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
if (event.key === 'Enter') {
const children = this.getFormElements();
const currentIndex = children.indexOf(target as any);
if (currentIndex < children.length - 1) {
children[currentIndex + 1].focus();
} else {
target.blur();
this.getSubmitButton()?.focus();
}
}
});
}
}

View File

@ -5,11 +5,12 @@ import {
customElement,
cssManager,
css,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { icon, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
faFacebook,
faGoogle,

View File

@ -1,13 +1,14 @@
import {
customElement,
DeesElement,
TemplateResult,
type TemplateResult,
property,
html,
css,
cssManager
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
cssManager,
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -25,6 +26,7 @@ export class DeesInputCheckbox extends DeesElement {
@property({
type: String,
reflect: true,
})
public key: string;
@ -143,7 +145,7 @@ export class DeesInputCheckbox extends DeesElement {
}
</style>
<div class="maincontainer" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
${this.value
? html`
<span class="checkmark">
@ -171,4 +173,11 @@ export class DeesInputCheckbox extends DeesElement {
);
this.changeSubject.next(this);
}
public focus(): void {
const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
if (checkboxDiv) {
(checkboxDiv as any).focus();
}
}
}

View File

@ -1,5 +1,5 @@
import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -22,7 +22,10 @@ export class DeesInputDropdown extends DeesElement {
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property()
@property({
type: String,
reflect: true,
})
public label: string = 'Label';
@property()

View File

@ -1,15 +1,16 @@
import {
customElement,
DeesElement,
TemplateResult,
type TemplateResult,
property,
html,
css,
unsafeCSS,
cssManager,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -31,6 +32,7 @@ export class DeesInputFileupload extends DeesElement {
@property({
type: String,
reflect: true,
})
public key: string;
@ -122,7 +124,7 @@ export class DeesInputFileupload extends DeesElement {
border-bottom: 1px dashed #444;
color: ${cssManager.bdTheme('#666', '#ccc')};
padding: 8px;
font-family: 'Inter';
font-family: 'Mona Sans', 'Inter', sans-serif;
}
.uploadButton:hover .uploadCandidate {
@ -154,7 +156,10 @@ export class DeesInputFileupload extends DeesElement {
public async openFileSelector() {
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
inputFile.click();
this.state = 'idle';
this.buttonText = 'Upload more files...';
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
@ -163,6 +168,20 @@ export class DeesInputFileupload extends DeesElement {
}
public firstUpdated() {
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
inputFile.addEventListener('change', (event: Event) => {
const target = event.target as HTMLInputElement;
for (const file of Array.from(target.files)) {
this.value.push(file);
}
this.requestUpdate();
console.log(`Got ${this.value.length} files!`);
// Reset the input value to allow selecting the same file again if needed
target.value = '';
});
// lets handle drag and drop
const dropArea = this.shadowRoot.querySelector('.uploadButton');
const handlerFunction = (eventArg: DragEvent) => {
eventArg.preventDefault();

View File

@ -1,5 +1,5 @@
import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, property, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -15,6 +15,12 @@ export class DeesInputQuantitySelector extends DeesElement {
public changeSubject = new domtools.rxjs.Subject();
@property()
public label: string = 'Label';
@property({
type: String,
reflect: true,
})
public key: string;
@property({

View File

@ -1,5 +1,5 @@
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import {customElement, DeesElement, type TemplateResult, property, html, type CSSResult,} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -14,7 +14,10 @@ export class DeesInputRadio extends DeesElement {
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property()
@property({
type: String,
reflect: true,
})
public key: string;
@property()

View File

@ -1,5 +1,5 @@
import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import {customElement, DeesElement, type TemplateResult, property, html, cssManager, type CSSResult,} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -10,7 +10,7 @@ declare global {
@customElement('dees-input-text')
export class DeesInputText extends DeesElement {
public static demo = () => html`
<dees-input-text .label=${'this is a label'}></dees-input-text>
<dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
<dees-input-text .isPasswordBool=${true}></dees-input-text>
`;
@ -24,12 +24,14 @@ export class DeesInputText extends DeesElement {
public label: string;
@property({
type: String
type: String,
reflect: true,
})
public key: string;
@property({
type: String
type: String,
reflect: true,
})
public value: string = '';
@ -162,4 +164,9 @@ export class DeesInputText extends DeesElement {
const textInput = this.shadowRoot.querySelector('input');
textInput.focus();
}
public async blur() {
const textInput = this.shadowRoot.querySelector('input');
textInput.blur();
}
}

View File

@ -2,12 +2,13 @@ import * as plugins from './plugins.js';
import {
cssManager,
css,
type CSSResult,
customElement,
DeesElement,
domtools,
html,
property,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import { DeesWindowLayer } from './dees-windowlayer.js';
@customElement('dees-mobilenavigation')
@ -56,7 +57,7 @@ export class DeesMobilenavigation extends DeesElement {
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
readyDeferred = domtools.plugins.smartpromise.defer();
readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
constructor() {
super();
@ -120,7 +121,7 @@ export class DeesMobilenavigation extends DeesElement {
text-align: left;
font-size: 24px;
padding: 8px 0px;
font-family: Inter;
font-family: 'Mona Sans', 'Inter', sans-serif;
font-weight: 300;
border-bottom: 1px dashed #444;
margin-top: 16px;

View File

@ -1,6 +1,6 @@
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';
import { Deferred } from '@pushrocks/smartpromise';
import { Deferred } from '@push.rocks/smartpromise';
import type pdfjsTypes from 'pdfjs-dist';
@ -32,7 +32,7 @@ export class DeesPdf extends DeesElement {
return html`
<style>
:host {
font-family: 'Inter', sans-serif;
font-family: 'Mona Sans', 'Inter', sans-serif;
display: block;
box-sizing: border-box;
max-width: 800px;

View File

@ -0,0 +1,86 @@
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-simple-login': DeesSimpleLogin;
}
}
@customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement {
// STATIC
public static demo = () => html` <dees-simple-login></dees-simple-login> `;
// INSTANCE
@property()
public title = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.loginContainer {
display: flex;
justify-content: center; /* aligns horizontally */
align-items: center; /* aligns vertically */
height: 100%;
}
.login {
min-width: 320px;
min-height: 100px;
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px;
padding: 24px;
}
.header {
text-align: center;
}
`,
];
public render(): TemplateResult {
return html`
<div class="loginContainer">
<div class="login">
<dees-form>
<div class="header">Login to ${this.title}</div>
<dees-input-text key="username" label="username" required></dees-input-text>
<dees-input-text key="password" label="password" isPasswordBool required></dees-input-text>
<dees-form-submit disabled>login</dees-form-submit>
</dees-form>
</div>
</div>
<slot></slot>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
const form = this.shadowRoot.querySelector('dees-form');
await form.readyDeferred.promise;
const username = this.shadowRoot.querySelector('dees-input-text[label="username"]');
const password = this.shadowRoot.querySelector('dees-input-text[label="password"]');
const submit = this.shadowRoot.querySelector('dees-form-submit');
form.addEventListener('formData', (event: CustomEvent) => {
this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
});
}
}

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -4,12 +4,13 @@ import {
html,
css,
unsafeCSS,
type CSSResult,
cssManager,
property,
TemplateResult,
} from '@designestate/dees-element';
type TemplateResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
export interface IStep {
title: string;
@ -48,15 +49,15 @@ export class DeesStepper extends DeesElement {
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm.addEventListener('formData', eventArg => {
deesForm.addEventListener('formData', (eventArg) => {
stepperArg.goNext();
})
}
});
},
},
{
title: 'Whats your mobile number?',
content: html``,
}
},
] as IStep[]}
></dees-stepper>
`;
@ -153,7 +154,7 @@ export class DeesStepper extends DeesElement {
.step .title {
text-align: center;
padding-top: 50px;
font-family: Inter;
font-family: 'Mona Sans', 'Inter', sans-serif;
font-size: 25px;
font-weight: 300;
}
@ -195,22 +196,26 @@ export class DeesStepper extends DeesElement {
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
};
public firstUpdated() {
public async firstUpdated() {
await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(0);
this.selectedStep = this.steps[0];
this.setScrollStatus();
}
public updated() {
public async updated() {
this.setScrollStatus();
}
public scroller: typeof domtools.plugins.SweetScroll.prototype;
public async setScrollStatus() {
await domtools.plugins.smartdelay.delayFor(50);
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
if (!selectedStepElement) {
return;
}
if (!stepperContainer.style.paddingTop) {
stepperContainer.style.paddingTop = `${
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2

View File

@ -3,14 +3,15 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -136,7 +137,7 @@ export class DeesTable<T> extends DeesElement {
css`
.mainbox {
color: ${cssManager.bdTheme('#333', '#fff')};
font-family: 'Inter';
font-family: 'Mona Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
padding: 16px;

View File

@ -1,6 +1,6 @@
import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -1 +1 @@
import {} from '@designestate/dees-element';
import {} from '@design.estate/dees-element';

View File

@ -1,10 +1,10 @@
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import './dees-windowlayer';
import { css, cssManager } from '@designestate/dees-element';
import { css, cssManager } from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {

View File

@ -1,6 +1,6 @@
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -0,0 +1,3 @@
export class FormController {
}

View File

@ -4,8 +4,8 @@ export * from './dees-chips.js';
export * from './dees-contextmenu.js';
export * from './dees-dataview-codebox.js';
export * from './dees-dataview-statusobject.js';
export * from './dees-form.js';
export * from './dees-form-submit.js';
export * from './dees-form.js';
export * from './dees-icon.js';
export * from './dees-input-checkbox.js';
export * from './dees-input-dropdown.js';
@ -15,6 +15,7 @@ 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-simple-login.js';
export * from './dees-speechbubble.js';
export * from './dees-spinner.js';
export * from './dees-stepper.js';

View File

@ -1,3 +1,11 @@
// @push.rocks scope
import * as smartpromise from '@push.rocks/smartpromise';
export {
smartpromise,
}
// @tsclass scope
import * as tsclass from '@tsclass/tsclass';
export {

View File

@ -6,5 +6,8 @@
"module": "ES2022",
"moduleResolution": "nodenext",
"esModuleInterop": true
}
},
"exclude": [
"dist_*/**/*.d.ts"
]
}