@design.estate/dees-catalog 1.0.182 → 1.0.183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1997,16 +1997,24 @@ svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
1997
1997
  </dees-form>
1998
1998
  </div>
1999
1999
  </div>
2000
- <slot></slot>
2001
- `}async firstUpdated(a){let r=await this.domtoolsPromise;super.firstUpdated(a);let n=this.shadowRoot.querySelector("dees-form");await n.readyDeferred.promise;let i=this.shadowRoot.querySelector('dees-input-text[label="username"]'),c=this.shadowRoot.querySelector('dees-input-text[label="password"]'),o=this.shadowRoot.querySelector("dees-form-submit");n.addEventListener("formData",s=>{this.dispatchEvent(new CustomEvent("login",{detail:s.detail}))})}};F3.demo=()=>H` <dees-simple-login></dees-simple-login> `,F3.styles=[B.defaultStyles,f1`
2000
+ <div class="slotContainer">
2001
+ <slot></slot>
2002
+ </div>
2003
+ `}async firstUpdated(a){let r=await this.domtoolsPromise;super.firstUpdated(a);let n=this.shadowRoot.querySelector("dees-form");await n.readyDeferred.promise;let i=this.shadowRoot.querySelector('dees-input-text[label="username"]'),c=this.shadowRoot.querySelector('dees-input-text[label="password"]'),o=this.shadowRoot.querySelector("dees-form-submit");n.addEventListener("formData",s=>{this.dispatchEvent(new CustomEvent("login",{detail:s.detail}))})}async switchToSlottedContent(){let a=await this.domtoolsPromise,r=this.shadowRoot.querySelector(".login"),n=this.shadowRoot.querySelector(".loginContainer"),i=this.shadowRoot.querySelector(".slotContainer");r.style.opacity="0",r.style.transform="translateY(20px)",n.style.pointerEvents="none",i.style.transform="translateY(20px)",await a.convenience.smartdelay.delayFor(300),i.style.opacity="1",i.style.transform="translateY(0px)",await a.convenience.smartdelay.delayFor(300),i.style.pointerEvents="all"}};F3.demo=()=>H`
2004
+ <dees-simple-login>
2005
+ Hello there
2006
+ </dees-simple-login>
2007
+ `,F3.styles=[B.defaultStyles,f1`
2002
2008
  :host {
2003
2009
  color: ${B.bdTheme("#333","#fff")};
2004
2010
  user-select: none;
2005
2011
  }
2006
2012
  .loginContainer {
2013
+ position: absolute;
2007
2014
  display: flex;
2008
2015
  justify-content: center; /* aligns horizontally */
2009
2016
  align-items: center; /* aligns vertically */
2017
+ width: 100%;
2010
2018
  height: 100%;
2011
2019
  }
2012
2020
  .login {
@@ -2016,11 +2024,17 @@ svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
2016
2024
  box-shadow: ${B.bdTheme("0px 1px 4px rgba(0,0,0,0.3)","none")};
2017
2025
  border-radius: 3px;
2018
2026
  padding: 24px;
2027
+ transition: opacity 0.3s, transform 0.3s;
2019
2028
  }
2020
2029
 
2021
2030
  .header {
2022
2031
  text-align: center;
2023
2032
  }
2033
+ .slotContainer {
2034
+ opacity:0;
2035
+ transition: opacity 0.3s, transform 0.3s;
2036
+ pointer-events: none;
2037
+ }
2024
2038
  `],A([V()],F3.prototype,"title",2),F3=A([n1("dees-simple-login")],F3);var oe=class extends a1{constructor(){super();this.disabled=!1;this.isHidden=!1;this.status="normal"}render(){return H`
2025
2039
  <div class="maincontainer" @click=${this.handleClick}>
2026
2040
  <div class="arrow"></div>