@design.estate/dees-catalog 1.0.182 → 1.0.183

package/package.json

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

package/ts_web/00_commitinfo_data.ts

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

package/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';
+
+
+    
+  }
 }