@duetds/components
Version:
This package includes Duet Core Components and related tools.
69 lines (68 loc) • 5.96 kB
JavaScript
import { r as registerInstance, h, c as getElement } from './core-12b6bfe8.js';
import { b as jsUtils_7, j as jsUtils_6 } from './js-utils-b3b951a3.js';
import { t as tokens } from './tokens.common-ee94af0b.js';
var DuetHeading = /** @class */ (function () {
function DuetHeading(hostRef) {
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.
*/
DuetHeading.prototype.componentWillLoad = function () {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
/**
* render() function
* Always the last one in the class.
*/
DuetHeading.prototype.render = function () {
var _a;
var headingStyles = {
color: tokens[jsUtils_7(this.color)],
};
var TagName = jsUtils_6(this.level);
return (h(TagName, { class: (_a = {
"duet-heading": true,
"duet-heading-border": this.border,
"duet-m-0": this.margin === "none"
},
_a[this.visualLevel ? this.visualLevel : this.level] = true,
_a["duet-theme-turva"] = this.theme === "turva",
_a), style: headingStyles }, h("slot", null)));
};
Object.defineProperty(DuetHeading.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetHeading, "style", {
get: function () { 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}"; },
enumerable: true,
configurable: true
});
return DuetHeading;
}());
export { DuetHeading as duet_heading };