130 lines
2.7 KiB
TypeScript
130 lines
2.7 KiB
TypeScript
import {
|
|
DeesElement,
|
|
css,
|
|
cssManager,
|
|
customElement,
|
|
html,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { mobileComponentStyles } from '../../00componentstyles.js';
|
|
import { demoFunc } from './dees-mobile-iconbutton.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-mobile-iconbutton': DeesMobileIconbutton;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-mobile-iconbutton')
|
|
export class DeesMobileIconbutton extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({ type: String })
|
|
accessor label: string = '';
|
|
|
|
@property({ type: Boolean })
|
|
accessor disabled: boolean = false;
|
|
|
|
@property({ type: String })
|
|
accessor size: 'sm' | 'md' | 'lg' = 'md';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
mobileComponentStyles,
|
|
css`
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
transform: scale(1);
|
|
position: relative;
|
|
-webkit-tap-highlight-color: transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background-color: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
button:active:not(:disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
button:focus-visible {
|
|
outline: 2px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Sizes */
|
|
button.sm {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
button.md {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
button.lg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
::slotted(svg),
|
|
::slotted(div),
|
|
::slotted(dees-mobile-icon) {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
button.sm ::slotted(svg),
|
|
button.sm ::slotted(div),
|
|
button.sm ::slotted(dees-mobile-icon) {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
button.lg ::slotted(svg),
|
|
button.lg ::slotted(div),
|
|
button.lg ::slotted(dees-mobile-icon) {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<button
|
|
class=${this.size}
|
|
?disabled=${this.disabled}
|
|
aria-label=${this.label}
|
|
title=${this.label}
|
|
>
|
|
<slot></slot>
|
|
</button>
|
|
`;
|
|
}
|
|
}
|