115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
import {
|
|
customElement,
|
|
html,
|
|
css,
|
|
property,
|
|
cssManager,
|
|
type TemplateResult,
|
|
DeesElement,
|
|
type CSSResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { demoFunc } from './dees-heading.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-heading': DeesHeading;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-heading')
|
|
export class DeesHeading extends DeesElement {
|
|
// demo
|
|
public static demo = demoFunc;
|
|
|
|
// properties
|
|
/**
|
|
* Heading level: 1-6 for h1-h6, or 'hr' for horizontal rule style
|
|
*/
|
|
@property({ type: String, reflect: true })
|
|
public level: '1' | '2' | '3' | '4' | '5' | '6' | 'hr' | 'hr-small' = '1';
|
|
|
|
// STATIC STYLES
|
|
public static styles: CSSResult[] = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
/* Heading styles */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 16px 0 8px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#000', '#fff')};
|
|
}
|
|
h1 { font-size: 32px; font-family: 'Cal Sans'; letter-spacing: 0.025em;}
|
|
h2 { font-size: 28px; }
|
|
h3 { font-size: 24px; }
|
|
h4 { font-size: 20px; }
|
|
h5 { font-size: 16px; }
|
|
h6 { font-size: 14px; }
|
|
/* Horizontal rule style heading */
|
|
.heading-hr {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 16px 0;
|
|
color: ${cssManager.bdTheme('#000', '#fff')};
|
|
}
|
|
/* Fade lines toward and away from text for hr style */
|
|
.heading-hr::before {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
/* fade in toward center */
|
|
background: ${cssManager.bdTheme(
|
|
'linear-gradient(to right, transparent, #ccc)',
|
|
'linear-gradient(to right, transparent, #333)'
|
|
)};
|
|
margin: 0 8px;
|
|
}
|
|
.heading-hr::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
/* fade out away from center */
|
|
background: ${cssManager.bdTheme(
|
|
'linear-gradient(to right, #ccc, transparent)',
|
|
'linear-gradient(to right, #333, transparent)'
|
|
)};
|
|
margin: 0 8px;
|
|
}
|
|
/* Small hr variant with reduced margins */
|
|
.heading-hr.heading-hr-small {
|
|
margin: 8px 0;
|
|
font-size: 12px;
|
|
}
|
|
.heading-hr.heading-hr-small::before,
|
|
.heading-hr.heading-hr-small::after {
|
|
margin: 0 8px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
|
|
// INSTANCE
|
|
public render(): TemplateResult {
|
|
switch (this.level) {
|
|
case '1':
|
|
return html`<h1><slot></slot></h1>`;
|
|
case '2':
|
|
return html`<h2><slot></slot></h2>`;
|
|
case '3':
|
|
return html`<h3><slot></slot></h3>`;
|
|
case '4':
|
|
return html`<h4><slot></slot></h4>`;
|
|
case '5':
|
|
return html`<h5><slot></slot></h5>`;
|
|
case '6':
|
|
return html`<h6><slot></slot></h6>`;
|
|
case 'hr':
|
|
return html`<div class="heading-hr"><slot></slot></div>`;
|
|
case 'hr-small':
|
|
return html`<div class="heading-hr heading-hr-small"><slot></slot></div>`;
|
|
default:
|
|
return html`<h1><slot></slot></h1>`;
|
|
}
|
|
}
|
|
} |