fix(core): Update dependencies and refactor registration process

2024-10-04 15:43:36 +02:00
parent 629bf19845
commit 4deaafc3a2
18 changed files with 676 additions and 597 deletions
@@ -0,0 +1,146 @@
+import * as plugins from '../plugins.js';
+
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  type TemplateResult,
+  css,
+  cssManager,
+  query,
+} from '@design.estate/dees-element';
+
+import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
+import { IdpState } from '../idp.state.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-centercontainer': IdpCenterContainer;
+  }
+}
+
+@customElement('idp-centercontainer')
+export class IdpCenterContainer extends DeesElement {
+  public static demo = () => html`<idp-centercontainer></idp-centercontainer>`;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Geist Sans';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
+      .mainContainer {
+        position: absolute;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        transition: all 0.1s;
+        transition-delay: 0.05s;
+        transform: translate3d(0px, 8px, 0px);
+        pointer-events: none;
+      }
+
+      .mainContainer.show {
+        opacity: 1;
+        pointer-events: all;
+        transform: translate3d(0px, 0px, 0px);
+      }
+
+      .loginblock {
+        max-width: 500px;
+        flex-grow: 1;
+        transform: translate3d(0px, 0px, 0px);
+        transition: all 0.2s;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        background: ${cssManager.bdTheme('#ffffff', '#111111')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
+        border-radius: 16px;
+        overflow: hidden;
+      }
+
+      h1 {
+        font-size: 24px;
+        font-family: 'Cal Sans';
+        text-align: center;
+        letter-spacing:0.0125em;
+      }
+
+      .contentSpacer {
+        padding: 0px 0px 16px 0px;
+      }
+
+      .legalinfo {
+        text-align: center;
+        margin: auto;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        font-size: 12px;
+        line-height: 100%;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#f5f5f5', '#111')};
+        border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
+        color: ${cssManager.bdTheme('#666', '#888')};
+      }
+
+      .legalinfo a {
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        text-decoration: none;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="mainContainer">
+        <div class="loginblock">
+          <h1>idp.global</h1>
+          <div class="contentSpacer">
+            <slot></slot>
+          </div>
+          <div class="legalinfo">
+            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
+            | <a href="https://task.vc/" target="_blank">Company Website</a>
+            | <a href="https://support.task.vc/" target="_blank">Support</a>
+            | idp.global v${commitinfo.version}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async show() {
+    await this.updateComplete;
+    const domtoolsInstance = await this.domtoolsPromise;
+    const done = plugins.smartpromise.defer();
+    requestAnimationFrame(async () => {
+      this.shadowRoot.querySelector('.mainContainer').classList.add('show');
+      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      done.resolve();
+    });
+    return done.promise;
+  }
+
+  public async hide() {
+    await this.updateComplete;
+    const domtoolsInstance = await this.domtoolsPromise;
+    const done = plugins.smartpromise.defer();
+    requestAnimationFrame(async () => {
+      this.shadowRoot.querySelector('.mainContainer').classList.remove('show');
+      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      done.resolve();
+    });
+    return done.promise;
+  }
+}