1.0.183

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.180",
+  "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.180',
+  version: '1.0.183',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-form.ts

@@ -166,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-text.ts

@@ -129,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;
+      }
     `,
   ];
 
@@ -67,7 +78,9 @@ export class DeesSimpleLogin extends DeesElement {
           </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';
+
+
+    
+  }
 }