147 lines
3.7 KiB
TypeScript
147 lines
3.7 KiB
TypeScript
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 '../states/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;
|
|
}
|
|
}
|