diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts
index cec4206..8bcec4c 100644
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@@ -22,18 +22,18 @@ export class DeesButton extends DeesElement {
public static demo = () => html``;
@property()
- text: string;
+ public text: string;
@property()
- eventDetailData: string;
+ public eventDetailData: string;
@property({
type: Boolean
})
- disabled = false;
+ public disabled = false;
@property()
- isHidden = false;
+ public isHidden = false;
@property()
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@@ -59,6 +59,7 @@ export class DeesButton extends DeesElement {
display: block;
text-align: center;
background: ${cssManager.bdTheme('#eee', '#333')};
+ box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 2px;
line-height: 40px;
diff --git a/ts_web/elements/dees-form-submit.ts b/ts_web/elements/dees-form-submit.ts
index 3bf0e77..66afe7c 100644
--- a/ts_web/elements/dees-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@@ -1,4 +1,4 @@
-import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
+import { customElement, html, DeesElement, css, cssManager, property } from '@designestate/dees-element';
import { DeesForm } from './dees-form';
declare global {
@@ -9,6 +9,13 @@ declare global {
@customElement('dees-form-submit')
export class DeesFormSubmit extends DeesElement {
+ public static demo = () => html``;
+
+ @property({
+ type: Boolean
+ })
+ public disabled = false;
+
constructor() {
super();
}
@@ -16,10 +23,13 @@ export class DeesFormSubmit extends DeesElement {
public static styles = [cssManager.defaultStyles, css``];
public render() {
- return html` ${this.textContent} `;
+ return html`${this.textContent} `;
}
public async submit() {
+ if(this.disabled) {
+ return;
+ }
const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch();
}
diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts
index 6a4dd86..cde72ff 100644
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@@ -5,6 +5,7 @@ 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';
export type TFormElement = Array;
@@ -18,9 +19,9 @@ declare global {
export class DeesForm extends DeesElement {
public static demo = () => html`
-
-
-
+
+
+
Submit
`;
@@ -41,12 +42,14 @@ export class DeesForm extends DeesElement {
public firstUpdated() {
const formChildren = this.getFormChildren();
+ this.checkRequiredStatus();
for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData();
this.changeSubject.next(valueObject);
console.log(valueObject);
- })
+ this.checkRequiredStatus();
+ });
}
}
@@ -62,6 +65,26 @@ export class DeesForm extends DeesElement {
return formChildren;
}
+ public async checkRequiredStatus() {
+ console.log('checking the required status.')
+ const children: Array = this.children as any;
+ let submitButton: DeesFormSubmit;
+ for (const childArg of children) {
+ if(childArg instanceof DeesFormSubmit) {
+ submitButton = childArg;
+ }
+ }
+
+ let requiredOK = true;
+ for (const childArg of this.getFormChildren()) {
+ if (childArg.required && !childArg.value) {
+ requiredOK = false;
+ }
+ }
+ submitButton.disabled = !requiredOK;
+ console.log(submitButton);
+ }
+
public async gatherData() {
const children = this.getFormChildren();
const valueObject: { [key: string]: string | number | boolean} = {};
@@ -80,5 +103,7 @@ export class DeesForm extends DeesElement {
bubbles: true
});
this.dispatchEvent(formDataEvent);
+ console.log('dispatched data:')
+ console.log(valueObject);
}
}
diff --git a/ts_web/elements/dees-input-checkbox.ts b/ts_web/elements/dees-input-checkbox.ts
index 4bec5c8..ae623aa 100644
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -1,4 +1,10 @@
-import { customElement, DeesElement, TemplateResult, property, html } from '@designestate/dees-element';
+import {
+ customElement,
+ DeesElement,
+ TemplateResult,
+ property,
+ html,
+} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
@@ -11,19 +17,29 @@ declare global {
export class DeesInputCheckbox extends DeesElement {
// STATIC
public static demo = () => html``;
-
+
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
- @property()
+ @property({
+ type: String,
+ })
public key: string;
- @property()
+ @property({
+ type: String,
+ })
public label: string = 'Label';
- @property()
+ @property({
+ type: Boolean,
+ })
public value: boolean = false;
+ @property({
+ type: Boolean,
+ })
+ public required: boolean = false;
public render(): TemplateResult {
return html`
diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts
index 5225b1a..d1027f9 100644
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@@ -30,6 +30,11 @@ export class DeesInputDropdown extends LitElement {
payload: null
};
+ @property({
+ type: Boolean
+ })
+ public required: 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 1ff6386..20df339 100644
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@@ -42,6 +42,15 @@ export class DeesInputFileupload extends DeesElement {
@property()
public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
+ @property({
+ type: Boolean,
+ })
+ public required: boolean = false;
+
+ constructor() {
+ super();
+ }
+
public static styles = [
cssManager.defaultStyles,
css`
diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts
index 085c9fe..642e4c8 100644
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@@ -22,6 +22,15 @@ export class DeesInputQuantitySelector extends DeesElement {
})
public value: number = 1;
+ @property({
+ type: Boolean,
+ })
+ public required: boolean = false;
+
+ constructor() {
+ super();
+ }
+
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts
index f3070ad..d2382eb 100644
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@@ -23,6 +23,15 @@ export class DeesInputRadio extends LitElement {
@property()
public value: boolean = false;
+ @property({
+ type: Boolean,
+ })
+ public required: boolean = false;
+
+ constructor() {
+ super();
+ }
+
public render(): TemplateResult {
return html `