172 lines
3.7 KiB
TypeScript
172 lines
3.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-header.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-mobile-header': DeesMobileHeader;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-mobile-header')
|
|
export class DeesMobileHeader extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({ type: String })
|
|
accessor title: string = '';
|
|
|
|
@property({ type: String })
|
|
accessor subtitle: string = '';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
mobileComponentStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
/* Mobile-first defaults */
|
|
height: 4rem;
|
|
padding: 0 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
max-width: 768px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Desktop enhancements */
|
|
@media (min-width: 641px) {
|
|
.header {
|
|
height: 5rem;
|
|
padding: 0 1.25rem;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.left-action {
|
|
flex-shrink: 0;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
.left-action:empty {
|
|
display: none;
|
|
}
|
|
|
|
.left-action ::slotted(*) {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.middle {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.middle:empty {
|
|
display: none;
|
|
}
|
|
|
|
h1 {
|
|
/* Mobile-first defaults */
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Desktop enhancements */
|
|
@media (min-width: 641px) {
|
|
h1 {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
/* Mobile-first defaults */
|
|
font-size: 0.8125rem;
|
|
margin: 0.125rem 0 0;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Desktop enhancements */
|
|
@media (min-width: 641px) {
|
|
.subtitle {
|
|
font-size: 0.875rem;
|
|
margin: 0.25rem 0 0;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
::slotted([slot="actions"]) {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
display: block;
|
|
}
|
|
|
|
::slotted([slot="actions"]:hover) {
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
border-radius: 4px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<header class="header">
|
|
<div class="left-action">
|
|
<slot name="left-action"></slot>
|
|
</div>
|
|
<div class="content">
|
|
<slot name="content">
|
|
<h1>${this.title}</h1>
|
|
${this.subtitle ? html`<div class="subtitle">${this.subtitle}</div>` : ''}
|
|
</slot>
|
|
</div>
|
|
|
|
<div class="middle">
|
|
<slot name="middle"></slot>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</header>
|
|
`;
|
|
}
|
|
}
|