1.0.183

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.176",
+  "version": "1.0.183",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.176',
+  version: '1.0.183',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-form.ts

@@ -104,6 +104,9 @@ export class DeesForm extends DeesElement {
     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;
@@ -163,6 +166,19 @@ export class DeesForm extends DeesElement {
     submitButton.text = textStateArg;
   }
 
+  /**
+   * resets the form
+   */
+  reset() {
+    const inputChildren = this.getFormElements();
+    const submitButton = this.getSubmitButton();
+
+    for (const inputChild of inputChildren) {
+      inputChild.value = null;
+    }
+    this.setStatus('normal', 'Submit');
+  }
+
   public async addBehaviours() {
     // Use event delegation
     this.addEventListener('keydown', (event: KeyboardEvent) => {

ts_web/elements/dees-input-checkbox.ts

@@ -26,6 +26,7 @@ export class DeesInputCheckbox extends DeesElement {
 
   @property({
     type: String,
+    reflect: true,
   })
   public key: string;
 

ts_web/elements/dees-input-dropdown.ts

@@ -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()

ts_web/elements/dees-input-fileupload.ts

@@ -32,6 +32,7 @@ export class DeesInputFileupload extends DeesElement {
 
   @property({
     type: String,
+    reflect: true,
   })
   public key: string;
 

ts_web/elements/dees-input-quantityselector.ts

@@ -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({

ts_web/elements/dees-input-radio.ts

@@ -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()

ts_web/elements/dees-input-text.ts

@@ -24,7 +24,8 @@ export class DeesInputText extends DeesElement {
   public label: string;
 
   @property({
-    type: String
+    type: String,
+    reflect: true,
   })
   public key: string;
 
@@ -128,7 +129,7 @@ export class DeesInputText extends DeesElement {
       </style>
       <div class="maincontainer">
         ${this.label ? html`<div class="label">${this.label}</div>` : html``}
-        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" .value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
         ${this.isPasswordBool ? html`
           <div class="showPassword" @click=${this.togglePasswordView}>
             <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>

ts_web/elements/dees-simple-login.ts

@@ -20,8 +20,11 @@ declare global {
 @customElement('dees-simple-login')
 export class DeesSimpleLogin extends DeesElement {
   // STATIC
-  public static demo = () => html` <dees-simple-login></dees-simple-login> `;
-
+  public static demo = () => html`
+    <dees-simple-login>
+      Hello there
+    </dees-simple-login>
+  `;
   // INSTANCE
 
   @property()
@@ -35,9 +38,11 @@ export class DeesSimpleLogin extends DeesElement {
         user-select: none;
       }
       .loginContainer {
+        position: absolute;
         display: flex;
         justify-content: center; /* aligns horizontally */
         align-items: center; /* aligns vertically */
+        width: 100%;
         height: 100%;
       }
       .login {
@@ -47,11 +52,17 @@ export class DeesSimpleLogin extends DeesElement {
         box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
         border-radius: 3px;
         padding: 24px;
+        transition: opacity 0.3s, transform 0.3s;
       }
 
       .header {
         text-align: center;
       }
+      .slotContainer {
+        opacity:0;
+        transition: opacity 0.3s, transform 0.3s;
+        pointer-events: none;
+      }
     `,
   ];
 
@@ -61,13 +72,15 @@ export class DeesSimpleLogin extends DeesElement {
         <div class="login">
           <dees-form>
             <div class="header">Login to ${this.title}</div>
-            <dees-input-text label="username" required></dees-input-text>
-            <dees-input-text label="password" isPasswordBool required></dees-input-text>
+            <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>
+      <div class="slotContainer">
+        <slot></slot>
+      </div>
     `;
   }
 
@@ -81,6 +94,29 @@ export class DeesSimpleLogin extends DeesElement {
     const submit = this.shadowRoot.querySelector('dees-form-submit');
     form.addEventListener('formData', (event: CustomEvent) => {
       this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
+      // this.switchToSlottedContent();
     });
   }
+
+  /**
+   * allows switching to slotted content
+   */
+  public async switchToSlottedContent() {
+    const domtools = await this.domtoolsPromise;
+    const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
+    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
+    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
+    loginDiv.style.opacity = '0';
+    loginDiv.style.transform = 'translateY(20px)';
+    loginContainerDiv.style.pointerEvents = 'none';
+    slotContainerDiv.style.transform = 'translateY(20px)';
+    await domtools.convenience.smartdelay.delayFor(300);
+    slotContainerDiv.style.opacity = '1';
+    slotContainerDiv.style.transform = 'translateY(0px)';
+    await domtools.convenience.smartdelay.delayFor(300);
+    slotContainerDiv.style.pointerEvents = 'all';
+
+
+    
+  }
 }