1.0.183

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.175",
+  "version": "1.0.183",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,7 +15,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.37",
+    "@design.estate/dees-domtools": "^2.0.38",
     "@design.estate/dees-element": "^2.0.25",
     "@design.estate/dees-wcctools": "^1.0.78",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",

pnpm-lock.yaml

@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@design.estate/dees-domtools':
-    specifier: ^2.0.37
-    version: 2.0.37
+    specifier: ^2.0.38
+    version: 2.0.38
   '@design.estate/dees-element':
     specifier: ^2.0.25
     version: 2.0.25
@@ -183,22 +183,22 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  /@design.estate/dees-domtools@2.0.37:
-    resolution: {integrity: sha512-uDGCM8rGrg2aXI/EaGauIY37lLA2oKGVvDIhubAvTa7T89LhzPfzv7cnjL5jDFgg771YulA3IgK89jlsU82uNQ==}
+  /@design.estate/dees-domtools@2.0.38:
+    resolution: {integrity: sha512-QfShAH1HW1y7u2cfMbKfTCVMwJEtGZmdKaxp92wvKal+cfcSVRvVIVO1J0bdfqIG8tmV8D3cR2ghKkUFaFsJmg==}
     dependencies:
       '@apiglobal/typedrequest': 2.0.12
       '@designestate/dees-comms': 1.0.22
-      '@pushrocks/lik': 6.0.2
-      '@pushrocks/smartdelay': 3.0.1
-      '@pushrocks/smartjson': 5.0.6
-      '@pushrocks/smartpromise': 4.0.2
-      '@pushrocks/smartrouter': 1.0.16
-      '@pushrocks/smartrx': 3.0.2
-      '@pushrocks/smartstate': 2.0.6
-      '@pushrocks/smarturl': 3.0.6
-      '@pushrocks/webrequest': 3.0.28
-      '@pushrocks/websetup': 3.0.19
-      '@pushrocks/webstore': 2.0.8
+      '@push.rocks/lik': 6.0.5
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartjson': 5.0.8
+      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/smartrouter': 1.0.16
+      '@push.rocks/smartrx': 3.0.6
+      '@push.rocks/smartstate': 2.0.8
+      '@push.rocks/smarturl': 3.0.7
+      '@push.rocks/webrequest': 3.0.32
+      '@push.rocks/websetup': 3.0.19
+      '@push.rocks/webstore': 2.0.9
       lit: 2.8.0
       sweet-scroll: 4.0.0
     transitivePeerDependencies:
@@ -210,7 +210,7 @@ packages:
   /@design.estate/dees-element@2.0.25:
     resolution: {integrity: sha512-v2IMizlX5/TLEeUOsmlOO3GZlT4GRDY3T7N5CDJe1PCdE0jTDj9KvTWr3rawzzCyxr9DY+UZI4Rwi1IKIjJw8A==}
     dependencies:
-      '@design.estate/dees-domtools': 2.0.37
+      '@design.estate/dees-domtools': 2.0.38
       '@push.rocks/isounique': 1.0.5
       '@push.rocks/smartrx': 3.0.6
       lit: 2.8.0
@@ -223,7 +223,7 @@ packages:
   /@design.estate/dees-wcctools@1.0.78(@types/node@20.5.1):
     resolution: {integrity: sha512-7CgbDq+J1Wt2EW1EsDOApskq60jBZ9EOCNOEc0n3otxVOtUvutg6YBjY8fg7l/OJMxJfeJdEkNDlkTYePMIeXQ==}
     dependencies:
-      '@design.estate/dees-domtools': 2.0.37
+      '@design.estate/dees-domtools': 2.0.38
       '@design.estate/dees-element': 2.0.25
       '@gitzone/tsrun': 1.2.44(@types/node@20.5.1)
       '@push.rocks/smartdelay': 3.0.5
@@ -713,6 +713,13 @@ packages:
       ansi-256-colors: 1.1.0
     dev: true
 
+  /@push.rocks/isohash@2.0.1:
+    resolution: {integrity: sha512-UulhEui8O9Ei9fSqTldsB73TUmAFNqEBk82tHsJSLLpNK9gJZQE82iaSNsQUakoUQ2c9KueueMfwC3IoDaYRrQ==}
+    dependencies:
+      '@pushrocks/smartenv': 5.0.5
+      '@pushrocks/smarthash': 3.0.2
+    dev: false
+
   /@push.rocks/isounique@1.0.5:
     resolution: {integrity: sha512-Z0BVqZZOCif1THTbIKWMgg0wxCzt9CyBtBBqQJiZ+jJ0KlQFrQHNHrPt81/LXe/L4x0cxWsn0bpL6W5DNSvNLw==}
 
@@ -847,6 +854,12 @@ packages:
       agentkeepalive: 4.5.0
       form-data: 4.0.0
 
+  /@push.rocks/smartrouter@1.0.16:
+    resolution: {integrity: sha512-GsEv6paOuIbC3vkIS5LxNroK68mNygB+oSDJRaUOE8/OCJLk0aPfI579nEiuXP/DkGjC1SjQ2bUWc3BTaUM3GQ==}
+    dependencies:
+      path-to-regexp: 6.2.1
+    dev: false
+
   /@push.rocks/smartrx@3.0.6:
     resolution: {integrity: sha512-l+GOdML8yOdPvBXnJUdyfHyb6Ox2ipPTD8ZzzHTfQt20D7/IYUQKnG5JExT1B6Jo0DqszgDFhOoYEqLKnDC28g==}
     dependencies:
@@ -863,6 +876,16 @@ packages:
       tree-kill: 1.2.2
       which: 3.0.1
 
+  /@push.rocks/smartstate@2.0.8:
+    resolution: {integrity: sha512-XL57pS36I1+Np2vYseW2IX/47D75IvZ+wNs+TDD/RPxUzsROcpKTa7V+gf5AHdBdwqHSMBn9GsfBhSHAtlkQkw==}
+    dependencies:
+      '@push.rocks/isohash': 2.0.1
+      '@push.rocks/lik': 6.0.5
+      '@push.rocks/smartjson': 5.0.8
+      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/smartrx': 3.0.6
+    dev: false
+
   /@push.rocks/smartstream@2.0.4:
     resolution: {integrity: sha512-rbQf4+sLle9ga6RidRv0WXb/TuLFcMordRQBbqPq01n/mpBHoEiqIThWzVuImPVRVuSK/LKbM/QX4Ey26FFerg==}
     dependencies:
@@ -917,6 +940,42 @@ packages:
       - utf-8-validate
     dev: true
 
+  /@push.rocks/webrequest@3.0.32:
+    resolution: {integrity: sha512-9DSzN0rKpu0M9jt+MoWuvba5NrlPngYC7FMcmb2bVCR9HFlQvKJMMxytCDUOrZP38OdnIfWsJmVaxUcnjTKEzA==}
+    dependencies:
+      '@apiglobal/typedserver': 2.0.65
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartenv': 5.0.5
+      '@push.rocks/smartjson': 5.0.8
+      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/webstore': 2.0.9
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@push.rocks/websetup@3.0.19:
+    resolution: {integrity: sha512-iKJDwXdMmQdu5siOIgziPRxM51lN1AU9HOr+yMteu1YMDkZT7HKCyisDAr4gC9WZ9a7FzsG8zgthm4dMeA8NTw==}
+    dependencies:
+      '@pushrocks/smartdelay': 3.0.1
+      '@pushrocks/smartpromise': 4.0.2
+      '@tsclass/tsclass': 4.0.42
+    dev: false
+
+  /@push.rocks/webstore@2.0.9:
+    resolution: {integrity: sha512-B/a/M+udyr0pByGdOEcWyY+gugIx36YJXWwNUrslh9XjIWs+0NKSFJRnZKuVYSCHOnc/WblAOceSlGVwFmYVBw==}
+    dependencies:
+      '@apiglobal/typedrequest-interfaces': 2.0.1
+      '@push.rocks/lik': 6.0.5
+      '@push.rocks/smartenv': 5.0.5
+      '@push.rocks/smartjson': 5.0.8
+      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/smartrx': 3.0.6
+      fake-indexeddb: 4.0.2
+      idb: 7.1.1
+    dev: false
+
   /@pushrocks/consolecolor@2.0.1:
     resolution: {integrity: sha512-iOFCHVeFZ2OywbdwSxVI4/wokkcLrXVdHLgvMmkNhJ220eeLgjNZWx3EJo3vNW3zq5ybCSCUIq0878djBxrWpw==}
     deprecated: This package has been deprecated in favour of the new package at @push.rocks/consolecolor
@@ -1295,13 +1354,6 @@ packages:
       agentkeepalive: 4.5.0
       form-data: 4.0.0
 
-  /@pushrocks/smartrouter@1.0.16:
-    resolution: {integrity: sha512-x5lMYOk9Wh6pS7LrGlpmXQ88ObnXi5wC1svQLnS5XraEjiSUhYAIbsM5QJ5YX4VSdhKZ9n59fsdA7/idg9BEYQ==}
-    deprecated: This package has been deprecated in favour of the new package at @push.rocks/smartrouter
-    dependencies:
-      path-to-regexp: 6.2.1
-    dev: false
-
   /@pushrocks/smartrx@2.0.27:
     resolution: {integrity: sha512-aFRpGxDZgHH1mpmkRBTFwuIVqFiDxk22n2vX2gW4hntV0nJGlt9M9dixMFFXGUjabwX9hHW7y60QPJm2rKaypA==}
     deprecated: This package has been deprecated in favour of the new package at @push.rocks/smartrx
@@ -1377,17 +1429,6 @@ packages:
       - supports-color
     dev: true
 
-  /@pushrocks/smartstate@2.0.6:
-    resolution: {integrity: sha512-r/eHEFbC9jJgvtUFwiox+cRsDbQ6ce9IMgKHIR4BjTVC+Z9L7bD6o9SC7KHc8SLqUTPI5Is6q8O4wEe5qK0Caw==}
-    deprecated: This package has been deprecated in favour of the new package at @push.rocks/smartstate
-    dependencies:
-      '@pushrocks/isohash': 2.0.1
-      '@pushrocks/lik': 6.0.2
-      '@pushrocks/smartjson': 5.0.6
-      '@pushrocks/smartpromise': 4.0.2
-      '@pushrocks/smartrx': 3.0.2
-    dev: false
-
   /@pushrocks/smartstream@2.0.3:
     resolution: {integrity: sha512-Zz1amk2FgqWyZFQE8WonKhNMreETm50pqDanp2g9uJBCNwFHIppJD4Qbpy/FFEFfp4Rs326hoBCWbZwU/FEymw==}
     deprecated: This package has been deprecated in favour of the new package at @push.rocks/smartstream
@@ -1503,15 +1544,6 @@ packages:
       - supports-color
       - utf-8-validate
 
-  /@pushrocks/websetup@3.0.19:
-    resolution: {integrity: sha512-cxPXyEhTu2TRFPa36QQJJWrR46f4BmLAJD57cBA6d/zhnzJzv7g6ThT1ZFFzDEOgzRh3F8KrFbqlbY+l/cReHA==}
-    deprecated: This package has been deprecated in favour of the new package at @push.rocks/websetup
-    dependencies:
-      '@pushrocks/smartdelay': 3.0.1
-      '@pushrocks/smartpromise': 4.0.2
-      '@tsclass/tsclass': 4.0.42
-    dev: false
-
   /@pushrocks/webstore@2.0.8:
     resolution: {integrity: sha512-gvZ5QnZu14bPIWaFDOCyH6pfPgN/nQ0hF3EFhE74Ypfm5dCzq6OZEC9jeUTXDypfsvbSs3xAgj4XG83sVSUDAg==}
     deprecated: This package has been deprecated in favour of the new package at @push.rocks/webstore

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.175',
+  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>
+      <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';
+
+
+    
+  }
 }