UNPKG

@aqua-ds/web-components

Version:
56 lines (52 loc) 3 kB
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client'; import { d as defineCustomElement$1 } from './aq-tooltip2.js'; const aqHeadingCss = ".aq-heading{font-family:var(--font-family-basic);font-size:var(--font-size-xl);font-weight:var(--font-weight-regular);color:var(--color-ink-base);display:inline-block;-ms-flex-align:center;align-items:center}.aq-heading__tooltip{font-size:var(--font-size-xl);padding-left:var(--spacing-size-small)}h1.aq-heading{font-size:var(--font-size-6xl);line-height:var(--font-line-height-2)}h2.aq-heading{font-size:var(--font-size-4xl);line-height:var(--font-line-height-3)}h3.aq-heading{font-size:var(--font-size-3xl);line-height:var(--font-line-height-4)}h4.aq-heading{font-size:var(--font-size-xl);line-height:var(--font-line-height-5)}h5.aq-heading{font-size:var(--font-size-m);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-6)}h6.aq-heading{font-size:var(--font-size-s);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-7)}"; const AqHeading = /*@__PURE__*/ proxyCustomElement(class AqHeading extends HTMLElement { constructor(registerHost) { super(); if (registerHost !== false) { this.__registerHost(); } this.info = ''; this.customClass = ''; this.tooltipWidth = ''; this.level = 2; } getTooltip() { const getConfig = {}; getConfig.placement = 'top'; if (!!this.tooltipWidth) getConfig.maxWidth = this.tooltipWidth; return (!!this.info && (h("aq-tooltip", { config: { ...getConfig } }, h("span", null, " ", this.info, " ")))); } render() { const tooltip = this.getTooltip(); const Tag = `h${this.level}`; return (h(Tag, { key: 'cd1dc25be34e9d7b8c09fb1f73f585bd3d29ced1', class: `${this.customClass} aq-heading` }, h("slot", { key: '823382506402ffaab1700288c428d7af0e810862', name: "text" }), !!this.info && (h("span", { key: '25d54ec72f41f6d6d3935ebf939d172a1374a304', class: "aq-heading__tooltip" }, tooltip, h("span", { key: '7e4ff3d9ff83081c71cf4744b550bb1a52fd84c2', class: "aq-icon-info-circle" }))))); } static get style() { return aqHeadingCss; } }, [260, "aq-heading", { "info": [1], "customClass": [1, "custom-class"], "tooltipWidth": [1, "tooltip-width"], "level": [2] }]); function defineCustomElement() { if (typeof customElements === "undefined") { return; } const components = ["aq-heading", "aq-tooltip"]; components.forEach(tagName => { switch (tagName) { case "aq-heading": if (!customElements.get(tagName)) { customElements.define(tagName, AqHeading); } break; case "aq-tooltip": if (!customElements.get(tagName)) { defineCustomElement$1(); } break; } }); } export { AqHeading as A, defineCustomElement as d };