@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
85 lines (79 loc) • 6.93 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.js';
const convertPropsToClasses = ({ size, weight, }) => {
let classes = '';
if (size) {
classes = `${classes} modus-wc-text-${size}`;
}
if (weight) {
classes = `${classes} modus-wc-typography-weight-${weight}`;
}
return classes.trim();
};
const modusWcTypographyCss = "modus-wc-typography h1.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:36px}modus-wc-typography h2.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-2xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.15px;line-height:30px}modus-wc-typography h3.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:27px}modus-wc-typography h4.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-lg);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}modus-wc-typography h5.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}modus-wc-typography h6.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px}modus-wc-typography .modus-wc-typography-weight-light{font-weight:var(--modus-wc-font-weight-light)}modus-wc-typography .modus-wc-typography-weight-normal{font-weight:var(--modus-wc-font-weight-normal)}modus-wc-typography .modus-wc-typography-weight-semibold{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-typography .modus-wc-typography-weight-bold{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-typography .modus-wc-text-xs{font-size:var(--modus-wc-font-size-xs)}modus-wc-typography .modus-wc-text-sm{font-size:var(--modus-wc-font-size-sm)}modus-wc-typography .modus-wc-text-md{font-size:var(--modus-wc-font-size-md)}modus-wc-typography .modus-wc-text-lg{font-size:var(--modus-wc-font-size-lg)}modus-wc-typography .modus-wc-text-xl{font-size:var(--modus-wc-font-size-xl)}modus-wc-typography .modus-wc-text-2xl{font-size:var(--modus-wc-font-size-2xl)}modus-wc-typography .modus-wc-text-3xl{font-size:var(--modus-wc-font-size-3xl)}[data-theme=connect-light] modus-wc-typography *,[data-theme=connect-dark] modus-wc-typography *{color:var(--modus-wc-color-base-content-low-contrast)}[data-theme=connect-light] modus-wc-typography h1.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h1.modus-wc-typography{font-size:var(--modus-wc-font-size-4xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:30px}[data-theme=connect-light] modus-wc-typography h2.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h2.modus-wc-typography{font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h3.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h3.modus-wc-typography{font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:18px}[data-theme=connect-light] modus-wc-typography h4.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h4.modus-wc-typography{font-size:var(--modus-wc-font-size-lg);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h5.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h5.modus-wc-typography{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}[data-theme=connect-light] modus-wc-typography h6.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h6.modus-wc-typography{font-size:var(--modus-wc-font-size-xs);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px;text-transform:uppercase}";
const ModusWCTypography = /*@__PURE__*/ proxyCustomElement(class ModusWCTypography extends H {
constructor() {
super();
this.__registerHost();
this.inheritedAttributes = {};
/** Custom CSS class to apply to the typography element. */
this.customClass = '';
/** The hierarchy of the typography component. */
this.hierarchy = 'p';
/** The size of the font. */
this.size = 'md';
/** The weight of the text. */
this.weight = 'normal';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-typography'];
// Check if we're dealing with a heading and have size/weight overrides
const isHeading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(this.hierarchy);
const hasOverrides = this.size !== 'md' || this.weight !== 'normal';
if (isHeading && hasOverrides) {
// Add a class to indicate overrides for headings
classList.push('modus-wc-typography-override');
}
const propClasses = convertPropsToClasses({
size: this.size,
weight: this.weight,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
const Element = this.hierarchy;
return (h(Host, { key: '31b4e8264de9f6380e96fc4dcce85636a6fe3c7b' }, h(Element, Object.assign({ key: '16edca15a37852e6fcceb5147ffcf3cbf02ad148', class: this.getClasses() }, this.inheritedAttributes), this.label)));
}
get el() { return this; }
static get style() { return modusWcTypographyCss; }
}, [0, "modus-wc-typography", {
"customClass": [1, "custom-class"],
"hierarchy": [1],
"label": [1],
"size": [1],
"weight": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-typography"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-typography":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWCTypography);
}
break;
} });
}
const ModusWcTypography = ModusWCTypography;
const defineCustomElement = defineCustomElement$1;
export { ModusWcTypography, defineCustomElement };