From 9d5f0b5ff8a4d9547e74918cc6dcf003e6285060 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Thu, 26 Aug 2021 21:30:35 +0200 Subject: [PATCH] fix(core): update --- package-lock.json | 14 +++---- package.json | 2 +- ts_web/elements/dees-form.ts | 38 ++++++++++++++++--- ts_web/elements/dees-input-checkbox.ts | 17 ++++++++- ts_web/elements/dees-input-dropdown.ts | 5 +++ ts_web/elements/dees-input-fileupload.ts | 7 +++- .../elements/dees-input-quantityselector.ts | 5 +++ ts_web/elements/dees-input-radio.ts | 5 +++ ts_web/elements/dees-input-text.ts | 38 ++++++++++++++++--- 9 files changed, 109 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1587bde..52b67cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.41", "license": "MIT", "dependencies": { - "@designestate/dees-domtools": "^1.0.88", + "@designestate/dees-domtools": "^1.0.89", "@designestate/dees-element": "^1.0.19", "@designestate/dees-wcctools": "^1.0.57", "@fortawesome/fontawesome-svg-core": "^1.2.36", @@ -1893,9 +1893,9 @@ } }, "node_modules/@designestate/dees-domtools": { - "version": "1.0.88", - "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz", - "integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==", + "version": "1.0.89", + "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz", + "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==", "license": "MIT", "dependencies": { "@apiglobal/typedrequest": "^1.0.56", @@ -17435,9 +17435,9 @@ } }, "@designestate/dees-domtools": { - "version": "1.0.88", - "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.88.tgz", - "integrity": "sha512-OTcZtJFPe5iQhASkX+ccvbX2IJssImzsbd6jVMw9x/NTRgffjdNFw2aGo+8AYjyMEoxSJ0Th+uPAy2dyCcOmYw==", + "version": "1.0.89", + "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz", + "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==", "requires": { "@apiglobal/typedrequest": "^1.0.56", "@designestate/dees-comms": "^1.0.9", diff --git a/package.json b/package.json index 19ec6b7..c95398e 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "author": "Lossless GmbH", "license": "MIT", "dependencies": { - "@designestate/dees-domtools": "^1.0.88", + "@designestate/dees-domtools": "^1.0.89", "@designestate/dees-element": "^1.0.19", "@designestate/dees-wcctools": "^1.0.57", "@fortawesome/fontawesome-svg-core": "^1.2.36", diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts index cde72ff..8c0d8c3 100644 --- a/ts_web/elements/dees-form.ts +++ b/ts_web/elements/dees-form.ts @@ -18,7 +18,12 @@ declare global { @customElement('dees-form') export class DeesForm extends DeesElement { public static demo = () => html` - + { + const form: DeesForm = eventArg.currentTarget; + form.setStatus('freeze', 'authenticating...'); + await domtools.plugins.smartdelay.delayFor(1000); + form.setStatus('success', 'authenticated!'); + }}> @@ -65,8 +70,7 @@ export class DeesForm extends DeesElement { return formChildren; } - public async checkRequiredStatus() { - console.log('checking the required status.') + public getSubmitButton() { const children: Array = this.children as any; let submitButton: DeesFormSubmit; for (const childArg of children) { @@ -74,6 +78,12 @@ export class DeesForm extends DeesElement { submitButton = childArg; } } + return submitButton; + } + + public async checkRequiredStatus() { + console.log('checking the required status.') + let requiredOK = true; for (const childArg of this.getFormChildren()) { @@ -81,8 +91,7 @@ export class DeesForm extends DeesElement { requiredOK = false; } } - submitButton.disabled = !requiredOK; - console.log(submitButton); + this.getSubmitButton().disabled = !requiredOK; } public async gatherData() { @@ -106,4 +115,21 @@ export class DeesForm extends DeesElement { console.log('dispatched data:') console.log(valueObject); } -} + + public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) { + const inputChildren = this.getFormChildren(); + const submitButton = this.getSubmitButton(); + + switch(visualStateArg) { + case 'freeze': + submitButton.disabled = true; + for (const inputChild of inputChildren) { + inputChild.disabled = true; + } + break; + } + + submitButton.text = textStateArg; + + } +} \ No newline at end of file diff --git a/ts_web/elements/dees-input-checkbox.ts b/ts_web/elements/dees-input-checkbox.ts index ae623aa..5d3be65 100644 --- a/ts_web/elements/dees-input-checkbox.ts +++ b/ts_web/elements/dees-input-checkbox.ts @@ -4,6 +4,8 @@ import { TemplateResult, property, html, + css, + cssManager } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; @@ -41,6 +43,11 @@ export class DeesInputCheckbox extends DeesElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + public render(): TemplateResult { return html` ${domtools.elementBasic.styles} @@ -95,6 +102,11 @@ export class DeesInputCheckbox extends DeesElement { border: 1px solid #039BE5; } + .checkbox.disabled { + background: none; + border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')}; + } + .checkmark { display: inline-block; width: 22px; @@ -127,7 +139,7 @@ export class DeesInputCheckbox extends DeesElement { }
-
+
${this.value ? html` @@ -143,6 +155,9 @@ export class DeesInputCheckbox extends DeesElement { } public async toggleSelected() { + if (this.disabled) { + return; + } this.value = !this.value; this.dispatchEvent( new CustomEvent('newValue', { diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts index d1027f9..b0867c5 100644 --- a/ts_web/elements/dees-input-dropdown.ts +++ b/ts_web/elements/dees-input-dropdown.ts @@ -35,6 +35,11 @@ export class DeesInputDropdown extends LitElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + public render(): TemplateResult { return html` ${domtools.elementBasic.styles} diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts index 20df339..57e658e 100644 --- a/ts_web/elements/dees-input-fileupload.ts +++ b/ts_web/elements/dees-input-fileupload.ts @@ -47,8 +47,13 @@ export class DeesInputFileupload extends DeesElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + constructor() { - super(); + super() } public static styles = [ diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts index 642e4c8..f0c8769 100644 --- a/ts_web/elements/dees-input-quantityselector.ts +++ b/ts_web/elements/dees-input-quantityselector.ts @@ -27,6 +27,11 @@ export class DeesInputQuantitySelector extends DeesElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + constructor() { super(); } diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts index d2382eb..1614305 100644 --- a/ts_web/elements/dees-input-radio.ts +++ b/ts_web/elements/dees-input-radio.ts @@ -28,6 +28,11 @@ export class DeesInputRadio extends LitElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + constructor() { super(); } diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts index 4f563de..9e0bd47 100644 --- a/ts_web/elements/dees-input-text.ts +++ b/ts_web/elements/dees-input-text.ts @@ -1,4 +1,4 @@ -import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element'; +import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { @@ -14,13 +14,19 @@ export class DeesInputText extends DeesElement { // INSTANCE public changeSubject = new domtools.rxjs.Subject(); - @property() + @property({ + type: String + }) public label: string = 'Label'; - @property() + @property({ + type: String + }) public key: string; - @property() + @property({ + type: String + }) public value: string; @property({ @@ -28,6 +34,11 @@ export class DeesInputText extends DeesElement { }) public required: boolean = false; + @property({ + type: Boolean + }) + public disabled: boolean = false; + public render(): TemplateResult { return html `
${this.label}
- +
`; } @@ -86,4 +104,12 @@ export class DeesInputText extends DeesElement { this.value = target.value; this.changeSubject.next(this); } + + public async freeze() { + this.disabled = true; + } + + public async unfreeze() { + this.disabled = false; + } }