@duetds/components
Version:
This package includes Duet Core Components and related tools.
64 lines (59 loc) • 5.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-e5cda7d4.js');
const jsUtils = require('./js-utils-286cf29e.js');
const tokens_common = require('./tokens.common-5057aed3.js');
const DuetHeading = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
/**
* The actual heading level used in the HTML markup. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".
*/
this.level = "h2";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Enable or disable the border underneath the heading.
*/
this.border = false;
/**
* Custom color for the heading as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "";
/**
* Theme of the heading. Can be one of: "default", "turva".
*/
this.theme = "";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const headingStyles = {
color: tokens_common.tokens[jsUtils.jsUtils_7(this.color)],
};
const TagName = jsUtils.jsUtils_6(this.level);
return (core.h(TagName, { class: {
"duet-heading": true,
"duet-heading-border": this.border,
"duet-m-0": this.margin === "none",
[this.visualLevel ? this.visualLevel : this.level]: true,
"duet-theme-turva": this.theme === "turva",
}, style: headingStyles }, core.h("slot", null)));
}
get element() { return core.getElement(this); }
static get style() { return ":host{position:relative;display:block}.duet-heading,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%}.duet-heading{margin-bottom:16px!important;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:800;line-height:1.25;letter-spacing:-.01rem;color:#00294d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:\"ss01\";-webkit-font-feature-settings:\"ss01\";text-decoration:none;font-feature-settings:\"ss01\";font-variant-numeric:tabular-nums;font-style:normal}.duet-heading.duet-p-0{padding:0!important}.duet-heading.duet-m-0{margin:0!important}\@media only screen and (min-width:36em){.duet-heading{margin-bottom:20px!important}}.duet-heading.duet-theme-turva,.duet-theme-turva .duet-heading{-moz-font-feature-settings:\"liga\" 1;-webkit-font-feature-settings:\"liga\" 1;font-feature-settings:\"liga\" 1;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:700;color:#111;font-style:italic}.duet-heading.duet-heading-border{padding-bottom:20px;border-bottom:1px solid #e1e3e6}.duet-heading.h0{font-size:9.4vw}\@media (max-width:31.914893617rem){.duet-heading.h0{font-size:3rem}}\@media (min-width:47.8723404255rem){.duet-heading.h0{font-size:4.5rem}}\@media only screen and (max-width:22.5em){.duet-heading.h0{font-size:2.25rem}}.duet-heading.h1{font-size:7vw}\@media (max-width:32.1428571429rem){.duet-heading.h1{font-size:2.25rem}}\@media (min-width:42.8571428571rem){.duet-heading.h1{font-size:3rem}}\@media only screen and (max-width:22.5em){.duet-heading.h1{font-size:1.5rem}}.duet-heading.h2{font-size:5.8vw}\@media (max-width:25.8620689655rem){.duet-heading.h2{font-size:1.5rem}}\@media (min-width:38.7931034483rem){.duet-heading.h2{font-size:2.25rem}}\@media only screen and (max-width:22.5em){.duet-heading.h2{font-size:1.375rem}}.duet-heading.h3{margin-bottom:12px!important;font-size:4.2vw}\@media (max-width:29.7619047619rem){.duet-heading.h3{font-size:1.25rem}}\@media (min-width:35.7142857143rem){.duet-heading.h3{font-size:1.5rem}}.duet-heading.h3.duet-theme-turva,.duet-theme-turva .duet-heading.h3{font-style:normal}.duet-heading.h3.duet-heading-border{padding-bottom:20px}.duet-heading.h4{margin-bottom:8px!important;font-size:4vw;font-weight:600;letter-spacing:0}\@media (max-width:27.5rem){.duet-heading.h4{font-size:1.1rem}}\@media (min-width:31.25rem){.duet-heading.h4{font-size:1.25rem}}.duet-heading.h4.duet-theme-turva,.duet-theme-turva .duet-heading.h4{font-weight:700;font-style:normal}.duet-heading.h4.duet-heading-border{padding-bottom:20px}.duet-heading.h5{margin-bottom:8px!important;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;letter-spacing:0;font-size:1rem;font-weight:600}.duet-heading.h5.duet-theme-turva,.duet-theme-turva .duet-heading.h5{font-weight:700;font-style:normal}.duet-heading.h5.duet-heading-border{padding-bottom:16px}.duet-heading.h6{margin-bottom:8px!important;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;letter-spacing:0;font-size:.875rem;font-weight:600}.duet-heading.h6.duet-theme-turva,.duet-theme-turva .duet-heading.h6{font-weight:700;font-style:normal}.duet-heading.h6.duet-heading-border{padding-bottom:16px}"; }
};
exports.duet_heading = DuetHeading;