@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
59 lines (54 loc) • 6.82 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
const headingCss = ".utrecht-heading-1{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-1--distanced{--utrecht-space-around:1}.utrecht-heading-2{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size, revert);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-2-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-2--distanced{--utrecht-space-around:1}.utrecht-heading-3{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size, revert);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-3--distanced{--utrecht-space-around:1}.utrecht-heading-4{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-4--distanced{--utrecht-space-around:1}.utrecht-heading-5{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-5--distanced{--utrecht-space-around:1}.utrecht-heading-6{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
const UtrechtHeadingStyle0 = headingCss;
const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.level = undefined;
}
render() {
if (this.level === 1) {
return (h("h1", { class: "utrecht-heading-1" }, h("slot", null)));
}
else if (this.level === 2) {
return (h("h2", { class: "utrecht-heading-2" }, h("slot", null)));
}
else if (this.level === 3) {
return (h("h3", { class: "utrecht-heading-3" }, h("slot", null)));
}
else if (this.level === 4) {
return (h("h4", { class: "utrecht-heading-4" }, h("slot", null)));
}
else if (this.level === 5) {
return (h("h5", { class: "utrecht-heading-5" }, h("slot", null)));
}
else if (this.level === 6) {
return (h("h6", { class: "utrecht-heading-6" }, h("slot", null)));
}
else {
return (h("div", { class: "utrecht-heading", role: "heading", "aria-level": this.level }, h("slot", null)));
}
}
static get style() { return UtrechtHeadingStyle0; }
}, [1, "utrecht-heading", {
"level": [2]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-heading"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-heading":
if (!customElements.get(tagName)) {
customElements.define(tagName, Heading);
}
break;
} });
}
const UtrechtHeading = Heading;
const defineCustomElement = defineCustomElement$1;
export { UtrechtHeading, defineCustomElement };
//# sourceMappingURL=utrecht-heading.js.map