UNPKG

@fluid-topics/ft-typography

Version:

Typography components

54 lines (53 loc) 2.23 kB
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; import { html, unsafeStatic } from "lit/static-html.js"; import { property } from "lit/decorators.js"; import { FtLitElement } from "@fluid-topics/ft-wc-utils"; import { FtTypographyVariants } from "./ft-typography.properties"; import { FtdsTypographyStyles, FtTypographyBody1, FtTypographyBody2, FtTypographyBreadcrumb, FtTypographyButton, FtTypographyCaption, FtTypographyOverline, FtTypographyStyles, FtTypographySubtitle1, FtTypographySubtitle2, FtTypographyTitle, FtTypographyTitleDense } from "./ft-typography.styles"; class FtTypography extends FtLitElement { constructor() { super(...arguments); this.variant = FtTypographyVariants.body1; } render() { if (this.element) { return html ` <${unsafeStatic(this.element)} part="text" class="ft-typography ft-typography--${this.variant}"> <slot></slot> </${unsafeStatic(this.element)}> `; } return html ` <slot part="text" class="ft-typography ft-typography--${this.variant}"></slot> `; } } // language=CSS FtTypography.styles = [ FtTypographyTitle, FtTypographyTitleDense, FtTypographySubtitle1, FtTypographySubtitle2, FtTypographyBody1, FtTypographyBody2, FtTypographyCaption, FtTypographyBreadcrumb, FtTypographyOverline, FtTypographyButton, FtTypographyStyles, ...FtdsTypographyStyles ]; __decorate([ property() ], FtTypography.prototype, "element", void 0); __decorate([ property() ], FtTypography.prototype, "variant", void 0); export { FtTypography };