@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label** renders a heading with the label preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag. This is the default</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     *\n     * @attr{string}\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            ...tagVariantClassNames,\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}

package/lib/components/heading/heading.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=heading.styles.d.ts.map

package/lib/components/heading/heading.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.styles.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAu4BV,CAAC;AACH,eAAe,MAAM,CAAC"}