+
${this.text ? this.text : this.textContent}
`;
@@ -111,19 +128,20 @@ export class DeesButton extends DeesElement {
public async dispatchClick() {
if (this.disabled) {
-
return;
}
- this.dispatchEvent(new CustomEvent('clicked', {
- detail: {
- data: this.eventDetailData
- },
- bubbles: true
- }));
+ this.dispatchEvent(
+ new CustomEvent('clicked', {
+ detail: {
+ data: this.eventDetailData,
+ },
+ bubbles: true,
+ })
+ );
}
- public async firstUpdated () {
+ public async firstUpdated() {
if (!this.textContent) {
this.textContent = 'Button';
this.performUpdate();
diff --git a/ts_web/elements/dees-form-submit.ts b/ts_web/elements/dees-form-submit.ts
index 34b4a05..3bf0e77 100644
--- a/ts_web/elements/dees-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@@ -1,6 +1,5 @@
-import { customElement, html, LitElement } from 'lit-element';
-
-import {DeesForm} from './dees-form';
+import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
+import { DeesForm } from './dees-form';
declare global {
interface HTMLElementTagNameMap {
@@ -9,13 +8,15 @@ declare global {
}
@customElement('dees-form-submit')
-export class DeesFormSubmit extends LitElement {
+export class DeesFormSubmit extends DeesElement {
+ constructor() {
+ super();
+ }
+ public static styles = [cssManager.defaultStyles, css``];
public render() {
- return html`
-
${this.textContent}
- `;
+ return html`
${this.textContent} `;
}
public async submit() {
diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts
new file mode 100644
index 0000000..b3f15b2
--- /dev/null
+++ b/ts_web/elements/dees-input-fileupload.ts
@@ -0,0 +1,124 @@
+import {
+ customElement,
+ DeesElement,
+ TemplateResult,
+ property,
+ html,
+ css,
+ unsafeCSS,
+ cssManager,
+} from '@designestate/dees-element';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'dees-input-fileupload': DeesInputFileupload;
+ }
+}
+
+@customElement('dees-input-fileupload')
+export class DeesInputFileupload extends DeesElement {
+ public static demo = () => html`
`;
+
+ @property({
+ type: String,
+ })
+ public label: string = null;
+
+ @property({
+ type: String,
+ })
+ public key: string;
+
+ @property({
+ attribute: false,
+ })
+ public value: File[] = [];
+
+ @property()
+ public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ position: relative;
+ display: grid;
+ margin: 10px 0px;
+ margin-bottom: 24px;
+ }
+
+ .maincontainer {
+ color: ${cssManager.bdTheme('#333', '#ccc')};
+ }
+
+ .label {
+ font-size: 14px;
+ margin-bottom: 5px;
+ }
+
+ .uploadButton {
+ position: relative;
+ cursor: pointer;
+ padding: 20px 20px;
+ max-width: 200px;
+ background: ${cssManager.bdTheme('#fafafa', '#333333')};
+ border-radius: 3px;
+ text-align: center;
+ }
+ .uploadButton::after {
+ top: 7px;
+ right: 7px;
+ left: 7px;
+ bottom: 7px;
+ transform: scale3d(0.9, 0.9, 1);
+ position: absolute;
+ content: '';
+ display: block;
+ border: 4px 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);
+ }
+ `,
+ ];
+
+ public render(): TemplateResult {
+ return html`
+
+ ${this.label ? html`
${this.label}
` : null}
+
Upload File! (Drag/Drop enabled)
+
+ `;
+ }
+
+ public async updateValue(eventArg: Event) {
+ const target: any = eventArg.target;
+ this.value = target.value;
+ }
+
+ public firstUpdated() {
+ const dropArea = this.shadowRoot.querySelector('.uploadButton');
+ const handlerFunction = (eventArg: DragEvent) => {
+ eventArg.preventDefault();
+ switch(eventArg.type) {
+ case 'dragover':
+ this.state = 'dragOver';
+ break;
+ case 'dragleave':
+ this.state = 'idle';
+ break;
+ }
+ console.log(eventArg);
+ for (const file of Array.from(eventArg.dataTransfer.files)) {
+ this.value.push(file);
+ };
+ console.log(`Got ${this.value.length} files!`);
+ };
+ dropArea.addEventListener('dragenter', handlerFunction, false);
+ dropArea.addEventListener('dragleave', handlerFunction, false);
+ dropArea.addEventListener('dragover', handlerFunction, false);
+ dropArea.addEventListener('drop', handlerFunction, false);
+ }
+}
diff --git a/ts_web/elements/dees-newelement.ts b/ts_web/elements/dees-newelement.ts
new file mode 100644
index 0000000..29ed5a5
--- /dev/null
+++ b/ts_web/elements/dees-newelement.ts
@@ -0,0 +1,22 @@
+import { DeesElement, html, customElement, cssManager, css } from '@designestate/dees-element';
+
+@customElement('dees-newelement')
+export class NewElement extends DeesElement {
+ public static css = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ background: ${cssManager.bdTheme('#000', '#fff')};
+ }
+ `
+ ]
+
+ public static demo = () => html`
`;
+
+ public render() {
+ return html`
+ Hello
+ `;
+ }
+}
\ No newline at end of file
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index f8ec7a4..9de1f46 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -4,9 +4,11 @@ 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-toast';
export * from './dees-updater';
export * from './dees-windowlayer';
+export * from './dees-newelement';