@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.
Files changed (9) hide show
  1. package/dist_bundle/bundle.js +16 -2
  2. package/dist_bundle/bundle.js.map +3 -3
  3. package/dist_ts_web/elements/dees-simple-login.d.ts +4 -0
  4. package/dist_ts_web/elements/dees-simple-login.js +36 -3
  5. package/dist_watch/bundle.js +34 -2
  6. package/dist_watch/bundle.js.map +2 -2
  7. package/package.json +1 -1
  8. package/ts_web/00_commitinfo_data.ts +1 -1
  9. package/ts_web/elements/dees-simple-login.ts +39 -3
package/dist_ts_web/elements/dees-simple-login.d.ts CHANGED
@@ -10,4 +10,8 @@ export declare class DeesSimpleLogin extends DeesElement {
10
10
  static styles: CSSResult[];
11
11
  render(): TemplateResult;
12
12
  firstUpdated(_changedProperties: any): Promise<void>;
13
+ /**
14
+ * allows switching to slotted content
15
+ */
16
+ switchToSlottedContent(): Promise<void>;
13
17
  }
package/dist_ts_web/elements/dees-simple-login.js CHANGED
@@ -15,7 +15,11 @@ export let DeesSimpleLogin = class DeesSimpleLogin extends DeesElement {
15
15
  this.title = 'Dees Simple Login';
16
16
  }
17
17
  // STATIC
18
- static { this.demo = () => html ` <dees-simple-login></dees-simple-login> `; }
18
+ static { this.demo = () => html `
19
+ <dees-simple-login>
20
+ Hello there
21
+ </dees-simple-login>
22
+ `; }
19
23
  static { this.styles = [
20
24
  cssManager.defaultStyles,
21
25
  css `
@@ -24,9 +28,11 @@ export let DeesSimpleLogin = class DeesSimpleLogin extends DeesElement {
24
28
  user-select: none;
25
29
  }
26
30
  .loginContainer {
31
+ position: absolute;
27
32
  display: flex;
28
33
  justify-content: center; /* aligns horizontally */
29
34
  align-items: center; /* aligns vertically */
35
+ width: 100%;
30
36
  height: 100%;
31
37
  }
32
38
  .login {
@@ -36,11 +42,17 @@ export let DeesSimpleLogin = class DeesSimpleLogin extends DeesElement {
36
42
  box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
37
43
  border-radius: 3px;
38
44
  padding: 24px;
45
+ transition: opacity 0.3s, transform 0.3s;
39
46
  }
40
47
 
41
48
  .header {
42
49
  text-align: center;
43
50
  }
51
+ .slotContainer {
52
+ opacity:0;
53
+ transition: opacity 0.3s, transform 0.3s;
54
+ pointer-events: none;
55
+ }
44
56
  `,
45
57
  ]; }
46
58
  render() {
@@ -55,7 +67,9 @@ export let DeesSimpleLogin = class DeesSimpleLogin extends DeesElement {
55
67
  </dees-form>
56
68
  </div>
57
69
  </div>
58
- <slot></slot>
70
+ <div class="slotContainer">
71
+ <slot></slot>
72
+ </div>
59
73
  `;
60
74
  }
61
75
  async firstUpdated(_changedProperties) {
@@ -68,8 +82,27 @@ export let DeesSimpleLogin = class DeesSimpleLogin extends DeesElement {
68
82
  const submit = this.shadowRoot.querySelector('dees-form-submit');
69
83
  form.addEventListener('formData', (event) => {
70
84
  this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
85
+ // this.switchToSlottedContent();
71
86
  });
72
87
  }
88
+ /**
89
+ * allows switching to slotted content
90
+ */
91
+ async switchToSlottedContent() {
92
+ const domtools = await this.domtoolsPromise;
93
+ const loginDiv = this.shadowRoot.querySelector('.login');
94
+ const loginContainerDiv = this.shadowRoot.querySelector('.loginContainer');
95
+ const slotContainerDiv = this.shadowRoot.querySelector('.slotContainer');
96
+ loginDiv.style.opacity = '0';
97
+ loginDiv.style.transform = 'translateY(20px)';
98
+ loginContainerDiv.style.pointerEvents = 'none';
99
+ slotContainerDiv.style.transform = 'translateY(20px)';
100
+ await domtools.convenience.smartdelay.delayFor(300);
101
+ slotContainerDiv.style.opacity = '1';
102
+ slotContainerDiv.style.transform = 'translateY(0px)';
103
+ await domtools.convenience.smartdelay.delayFor(300);
104
+ slotContainerDiv.style.pointerEvents = 'all';
105
+ }
73
106
  };
74
107
  __decorate([
75
108
  property(),
@@ -78,4 +111,4 @@ __decorate([
78
111
  DeesSimpleLogin = __decorate([
79
112
  customElement('dees-simple-login')
80
113
  ], DeesSimpleLogin);
81
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zaW1wbGUtbG9naW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZGVlcy1zaW1wbGUtbG9naW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLGFBQWEsRUFDYixJQUFJLEVBQ0osV0FBVyxFQUNYLFFBQVEsRUFFUixVQUFVLEVBQ1YsR0FBRyxFQUNILFNBQVMsRUFFVCxLQUFLLEdBQ04sTUFBTSw2QkFBNkIsQ0FBQztBQVM5QixXQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7SUFBekM7O1FBSUwsV0FBVztRQUdKLFVBQUssR0FBRyxtQkFBbUIsQ0FBQztJQTBEckMsQ0FBQztJQWhFQyxTQUFTO2FBQ0ssU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQSwyQ0FBMkMsQUFBeEQsQ0FBeUQ7YUFPN0QsV0FBTSxHQUFHO1FBQ3JCLFVBQVUsQ0FBQyxhQUFhO1FBQ3hCLEdBQUcsQ0FBQTs7aUJBRVUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7Ozs7c0JBWTdCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQztzQkFDckMsVUFBVSxDQUFDLE9BQU8sQ0FBQyw2QkFBNkIsRUFBRSxNQUFNLENBQUM7Ozs7Ozs7O0tBUTFFO0tBQ0YsQUExQm1CLENBMEJsQjtJQUVLLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTs7OzsyQ0FJNEIsSUFBSSxDQUFDLEtBQUs7Ozs7Ozs7O0tBUWhELENBQUM7SUFDSixDQUFDO0lBRU0sS0FBSyxDQUFDLFlBQVksQ0FBQyxrQkFBa0I7UUFDMUMsTUFBTSxRQUFRLEdBQUcsTUFBTSxJQUFJLENBQUMsZUFBZSxDQUFDO1FBQzVDLEtBQUssQ0FBQyxZQUFZLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUN2QyxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUN4RCxNQUFNLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDO1FBQ2pDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLG1DQUFtQyxDQUFDLENBQUM7UUFDcEYsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsbUNBQW1DLENBQUMsQ0FBQztRQUNwRixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQyxLQUFrQixFQUFFLEVBQUU7WUFDdkQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLFdBQVcsQ0FBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztRQUN6RSxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7O0FBekRNO0lBRE4sUUFBUSxFQUFFOzs4Q0FDd0I7QUFQeEIsZUFBZTtJQUQzQixhQUFhLENBQUMsbUJBQW1CLENBQUM7R0FDdEIsZUFBZSxDQWlFM0IifQ==
114
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zaW1wbGUtbG9naW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZGVlcy1zaW1wbGUtbG9naW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLGFBQWEsRUFDYixJQUFJLEVBQ0osV0FBVyxFQUNYLFFBQVEsRUFFUixVQUFVLEVBQ1YsR0FBRyxFQUNILFNBQVMsRUFFVCxLQUFLLEdBQ04sTUFBTSw2QkFBNkIsQ0FBQztBQVM5QixXQUFNLGVBQWUsR0FBckIsTUFBTSxlQUFnQixTQUFRLFdBQVc7SUFBekM7O1FBT0wsV0FBVztRQUdKLFVBQUssR0FBRyxtQkFBbUIsQ0FBQztJQTJGckMsQ0FBQztJQXBHQyxTQUFTO2FBQ0ssU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7OztHQUk5QixBQUppQixDQUloQjthQU1ZLFdBQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7O2lCQUVVLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7c0JBYzdCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQztzQkFDckMsVUFBVSxDQUFDLE9BQU8sQ0FBQyw2QkFBNkIsRUFBRSxNQUFNLENBQUM7Ozs7Ozs7Ozs7Ozs7O0tBYzFFO0tBQ0YsQUFsQ21CLENBa0NsQjtJQUVLLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTs7OzsyQ0FJNEIsSUFBSSxDQUFDLEtBQUs7Ozs7Ozs7Ozs7S0FVaEQsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLENBQUMsWUFBWSxDQUFDLGtCQUFrQjtRQUMxQyxNQUFNLFFBQVEsR0FBRyxNQUFNLElBQUksQ0FBQyxlQUFlLENBQUM7UUFDNUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ3ZDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3hELE1BQU0sSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUM7UUFDakMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsbUNBQW1DLENBQUMsQ0FBQztRQUNwRixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxtQ0FBbUMsQ0FBQyxDQUFDO1FBQ3BGLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRSxDQUFDLEtBQWtCLEVBQUUsRUFBRTtZQUN2RCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksV0FBVyxDQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO1lBQ3ZFLGlDQUFpQztRQUNuQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNJLEtBQUssQ0FBQyxzQkFBc0I7UUFDakMsTUFBTSxRQUFRLEdBQUcsTUFBTSxJQUFJLENBQUMsZUFBZSxDQUFDO1FBQzVDLE1BQU0sUUFBUSxHQUFtQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN6RSxNQUFNLGlCQUFpQixHQUFtQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQzNGLE1BQU0sZ0JBQWdCLEdBQW1CLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDekYsUUFBUSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1FBQzdCLFFBQVEsQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLGtCQUFrQixDQUFDO1FBQzlDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1FBQy9DLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsa0JBQWtCLENBQUM7UUFDdEQsTUFBTSxRQUFRLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDcEQsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxHQUFHLENBQUM7UUFDckMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQztRQUNyRCxNQUFNLFFBQVEsQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNwRCxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUkvQyxDQUFDOztBQTFGTTtJQUROLFFBQVEsRUFBRTs7OENBQ3dCO0FBVnhCLGVBQWU7SUFEM0IsYUFBYSxDQUFDLG1CQUFtQixDQUFDO0dBQ3RCLGVBQWUsQ0FxRzNCIn0=
package/dist_watch/bundle.js CHANGED
@@ -74408,7 +74408,9 @@ var DeesSimpleLogin = class extends DeesElement {
74408
74408
  </dees-form>
74409
74409
  </div>
74410
74410
  </div>
74411
- <slot></slot>
74411
+ <div class="slotContainer">
74412
+ <slot></slot>
74413
+ </div>
74412
74414
  `;
74413
74415
  }
74414
74416
  async firstUpdated(_changedProperties) {
@@ -74423,9 +74425,31 @@ var DeesSimpleLogin = class extends DeesElement {
74423
74425
  this.dispatchEvent(new CustomEvent("login", { detail: event.detail }));
74424
74426
  });
74425
74427
  }
74428
+ /**
74429
+ * allows switching to slotted content
74430
+ */
74431
+ async switchToSlottedContent() {
74432
+ const domtools6 = await this.domtoolsPromise;
74433
+ const loginDiv = this.shadowRoot.querySelector(".login");
74434
+ const loginContainerDiv = this.shadowRoot.querySelector(".loginContainer");
74435
+ const slotContainerDiv = this.shadowRoot.querySelector(".slotContainer");
74436
+ loginDiv.style.opacity = "0";
74437
+ loginDiv.style.transform = "translateY(20px)";
74438
+ loginContainerDiv.style.pointerEvents = "none";
74439
+ slotContainerDiv.style.transform = "translateY(20px)";
74440
+ await domtools6.convenience.smartdelay.delayFor(300);
74441
+ slotContainerDiv.style.opacity = "1";
74442
+ slotContainerDiv.style.transform = "translateY(0px)";
74443
+ await domtools6.convenience.smartdelay.delayFor(300);
74444
+ slotContainerDiv.style.pointerEvents = "all";
74445
+ }
74426
74446
  };
74427
74447
  // STATIC
74428
- DeesSimpleLogin.demo = () => x` <dees-simple-login></dees-simple-login> `;
74448
+ DeesSimpleLogin.demo = () => x`
74449
+ <dees-simple-login>
74450
+ Hello there
74451
+ </dees-simple-login>
74452
+ `;
74429
74453
  DeesSimpleLogin.styles = [
74430
74454
  cssManager.defaultStyles,
74431
74455
  i`
@@ -74434,9 +74458,11 @@ DeesSimpleLogin.styles = [
74434
74458
  user-select: none;
74435
74459
  }
74436
74460
  .loginContainer {
74461
+ position: absolute;
74437
74462
  display: flex;
74438
74463
  justify-content: center; /* aligns horizontally */
74439
74464
  align-items: center; /* aligns vertically */
74465
+ width: 100%;
74440
74466
  height: 100%;
74441
74467
  }
74442
74468
  .login {
@@ -74446,11 +74472,17 @@ DeesSimpleLogin.styles = [
74446
74472
  box-shadow: ${cssManager.bdTheme("0px 1px 4px rgba(0,0,0,0.3)", "none")};
74447
74473
  border-radius: 3px;
74448
74474
  padding: 24px;
74475
+ transition: opacity 0.3s, transform 0.3s;
74449
74476
  }
74450
74477
 
74451
74478
  .header {
74452
74479
  text-align: center;
74453
74480
  }
74481
+ .slotContainer {
74482
+ opacity:0;
74483
+ transition: opacity 0.3s, transform 0.3s;
74484
+ pointer-events: none;
74485
+ }
74454
74486
  `
74455
74487
  ];
74456
74488
  __decorateClass([