dees-catalog/ts_web/elements/dees-speechbubble.ts

157 lines
3.4 KiB
TypeScript
Raw Normal View History

2022-05-20 16:44:33 +00:00
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-speechbubble': DeesSpeechbubble;
}
}
@customElement('dees-speechbubble')
export class DeesSpeechbubble extends DeesElement {
public static demo = () => html` <dees-speechbubble></dees-speechbubble> `;
@property()
public text: string;
@property({
type: Boolean,
})
public disabled = false;
@property({
type: Boolean,
})
public isHidden = false;
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: relative;
display: block;
box-sizing: border-box;
2022-05-20 17:43:16 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2022-05-20 16:44:33 +00:00
cursor: pointer;
user-select: none;
}
:host([hidden]) {
display: none;
}
2022-05-20 19:04:59 +00:00
.maincontainer {
2022-05-24 07:13:15 +00:00
will-change: transform;
transition: transform 0.2s;
transform: translateX(0px);
2022-05-20 19:04:59 +00:00
position: relative;
transition: all 0.2s;
margin-left: 0px;
}
.maincontainer:hover {
2022-05-24 07:13:15 +00:00
transform: translateX(3px);
2022-05-20 19:04:59 +00:00
}
2022-05-20 16:44:33 +00:00
.arrow {
position: absolute;
transform: rotate(45deg);
2022-05-20 17:43:16 +00:00
background: ${cssManager.bdTheme('#fff', '#333')};
2022-05-20 17:48:48 +00:00
height: 15px;
width: 15px;
left: 4px;
2022-05-20 16:44:33 +00:00
top: 5px;
2022-05-20 17:48:48 +00:00
border-radius: 2px;
2022-05-20 16:44:33 +00:00
}
2022-05-20 19:04:59 +00:00
.speechbubble {
2022-05-20 17:43:16 +00:00
background: ${cssManager.bdTheme('#fff', '#333')};
2022-05-20 16:44:33 +00:00
padding: 0px 10px;
border-radius: 3px;
position: absolute;
2022-05-20 17:48:48 +00:00
line-height: 25px;
font-size: 12px;
2022-05-20 16:44:33 +00:00
top: 0px;
left: 8px;
}
.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.5s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* Never stop waving :) */
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
} /* The following five values can be played with to make the waving more or less extreme */
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
} /* Reset for the last half to pause */
100% {
transform: rotate(0deg);
}
}
`,
];
public render(): TemplateResult {
return html`
2022-05-20 19:04:59 +00:00
<div class="maincontainer" @click=${this.handleClick}>
2022-05-20 17:51:20 +00:00
<div class="arrow"></div>
2022-12-07 13:54:40 +00:00
<div class="speechbubble"><span class="wave">👋</span> Hey! We are API-driven.</div>
2022-05-20 17:51:20 +00:00
</div>
2022-05-20 16:44:33 +00:00
`;
}
2022-05-20 17:51:20 +00:00
public async handleClick() {
2022-05-20 16:44:33 +00:00
if (this.disabled) {
return;
}
2022-12-07 13:54:40 +00:00
globalThis.location.href = "https://api.global"
2022-05-20 16:44:33 +00:00
}
public async firstUpdated() {
if (!this.textContent) {
this.textContent = 'Button';
this.performUpdate();
}
}
}