@rededor/cura 1.6.0-alpha.2 → 1.6.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-717b36df.js';
2
2
 
3
- const curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(i),:host ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
3
+ const curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}:host h1 ::slotted(b),:host h1 ::slotted(strong),:host h2 ::slotted(b),:host h2 ::slotted(strong),:host h3 ::slotted(b),:host h3 ::slotted(strong),:host h4 ::slotted(b),:host h4 ::slotted(strong),:host h5 ::slotted(b),:host h5 ::slotted(strong),:host h6 ::slotted(b),:host h6 ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1 ::slotted(a),:host h2 ::slotted(a),:host h3 ::slotted(a),:host h4 ::slotted(a),:host h5 ::slotted(a),:host h6 ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host h1 ::slotted(u),:host h2 ::slotted(u),:host h3 ::slotted(u),:host h4 ::slotted(u),:host h5 ::slotted(u),:host h6 ::slotted(u){text-underline-offset:10%}:host h1 ::slotted(i),:host h1 ::slotted(em),:host h2 ::slotted(i),:host h2 ::slotted(em),:host h3 ::slotted(i),:host h3 ::slotted(em),:host h4 ::slotted(i),:host h4 ::slotted(em),:host h5 ::slotted(i),:host h5 ::slotted(em),:host h6 ::slotted(i),:host h6 ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host h1 ::slotted(abbr),:host h2 ::slotted(abbr),:host h3 ::slotted(abbr),:host h4 ::slotted(abbr),:host h5 ::slotted(abbr),:host h6 ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}";
4
4
  const CuraDisplayStyle0 = curaDisplayCss;
5
5
 
6
6
  const CuraDisplay = class {
@@ -1 +1 @@
1
- {"file":"cura-display.entry.js","mappings":"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","names":[],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.small {\n font-size: 2.2857142857142856em;\n letter-spacing: -1.68px;\n }\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n\n &.small {\n font-size: 2.857142857142857em;\n letter-spacing: -1.92px;\n }\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n\n &.small {\n font-size: 3.5714285714285716em;\n letter-spacing: -1.2px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(i), ::slotted(em) {\n font-style: italic;\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Display size.\n * Values: 'large' (default) | 'small'.\n */\n @Prop({reflect: true}) size: 'large' | 'small' = 'large';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop() spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '120%';\n\n /**\n * Host element <cura-display>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-medium': this.weights.medium\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n return classes;\n }\n\n getHeadingTag() {\n const classes = this.getClasses();\n const tags = {\n '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
1
+ {"file":"cura-display.entry.js","mappings":"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","names":[],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.small {\n font-size: 2.2857142857142856em;\n letter-spacing: -1.68px;\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(i), ::slotted(em) {\n font-style: italic;\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n\n &.small {\n font-size: 2.857142857142857em;\n letter-spacing: -1.92px;\n }\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n\n &.small {\n font-size: 3.5714285714285716em;\n letter-spacing: -1.2px;\n }\n }\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Display size.\n * Values: 'large' (default) | 'small'.\n */\n @Prop({reflect: true}) size: 'large' | 'small' = 'large';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop() spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '120%';\n\n /**\n * Host element <cura-display>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-medium': this.weights.medium\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n return classes;\n }\n\n getHeadingTag() {\n const classes = this.getClasses();\n const tags = {\n '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rededor/cura",
3
- "version": "1.6.0-alpha.2",
3
+ "version": "1.6.0-alpha.3",
4
4
  "description": "Cura Design System",
5
5
  "author": "Rede D`Or São Luiz",
6
6
  "license": "MIT",
@@ -51,5 +51,5 @@
51
51
  "storybook": "^7.6.7",
52
52
  "svgo": "^3.3.2"
53
53
  },
54
- "gitHead": "a14562332402a7921063e30653878d16b5962652"
54
+ "gitHead": "6b8458ef5561dd90838f77cadd151234cffa5df8"
55
55
  }
@@ -1,2 +0,0 @@
1
- import{r as t,h as s,H as h,g as o}from"./p-af3ac476.js";const l=":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(i),:host ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";const e=l;const i=class{constructor(s){t(this,s);this.theme=window.CuraAPI.theme;this.level=1;this.size="large";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="120%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":window.CuraAPI.theme.fonts.getFamily("display"),"--font-size":window.CuraAPI.theme.fonts.getSize(),"--font-weight-bold":this.weights.bold,"--font-weight-medium":this.weights.medium}}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}setColors(){const t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor(`${this.spotColor}`)})}getClasses(){var t;const s={};s[`${(t=this.size)===null||t===void 0?void 0:t.toLowerCase()}`]=true;return s}getHeadingTag(){const t=this.getClasses();const h={1:s("h1",{style:this.styles,class:t},s("slot",null)),2:s("h2",{style:this.styles,class:t},s("slot",null)),3:s("h3",{style:this.styles,class:t},s("slot",null)),4:s("h4",{style:this.styles,class:t},s("slot",null)),5:s("h5",{style:this.styles,class:t},s("slot",null)),6:s("h6",{style:this.styles,class:t},s("slot",null)),default:s("h1",{style:this.styles,class:t},s("slot",null))};return h[`${this.level}`]||h["default"]}render(){return s(h,{key:"7e0a43f434bce1797cebbe4d6d2565e64d64bab7",style:this.hostCSSProperties()},this.getHeadingTag())}get host(){return o(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};i.style=e;export{i as cura_display};
2
- //# sourceMappingURL=p-9dd47ec6.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["curaDisplayCss","CuraDisplayStyle0","CuraDisplay","this","theme","window","CuraAPI","handleChangeColor","setColors","connectedCallback","setFontProperties","weights","fonts","getWeights","fontSizeBase","getSize","styles","getFamily","bold","medium","hostCSSProperties","marginBlock","lineHeight","fontColor","color","colors","getColor","Object","assign","spotColor","getClasses","classes","_a","size","toLowerCase","getHeadingTag","tags","h","style","class","default","level","render","Host","key"],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.small {\n font-size: 2.2857142857142856em;\n letter-spacing: -1.68px;\n }\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n\n &.small {\n font-size: 2.857142857142857em;\n letter-spacing: -1.92px;\n }\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n\n &.small {\n font-size: 3.5714285714285716em;\n letter-spacing: -1.2px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(i), ::slotted(em) {\n font-style: italic;\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Display size.\n * Values: 'large' (default) | 'small'.\n */\n @Prop({reflect: true}) size: 'large' | 'small' = 'large';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop() spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '120%';\n\n /**\n * Host element <cura-display>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-medium': this.weights.medium\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n return classes;\n }\n\n getHeadingTag() {\n const classes = this.getClasses();\n const tags = {\n '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,g7CACvB,MAAAC,EAAeD,E,MCMFE,EAAW,M,yBAqDtBC,KAAAC,MAAQC,OAAOC,QAAQF,M,WA/C+B,E,UAML,Q,eAM7B,c,sCAiBiB,S,gBAMD,O,YAalB,E,CA3BlB,iBAAAG,GACEJ,KAAKK,W,CA4BP,iBAAAC,GACEN,KAAKO,oBACLP,KAAKK,W,CAGP,iBAAAE,GACEP,KAAKQ,QAAUR,KAAKC,MAAMQ,MAAMC,aAChCV,KAAKW,aAAeX,KAAKC,MAAMQ,MAAMG,UACrCZ,KAAKa,OAAS,CACZ,gBAAiBX,OAAOC,QAAQF,MAAMQ,MAAMK,UAAU,WACtD,cAAeZ,OAAOC,QAAQF,MAAMQ,MAAMG,UAC1C,qBAAsBZ,KAAKQ,QAAQO,KACnC,uBAAwBf,KAAKQ,QAAQQ,O,CAIzC,iBAAAC,GACE,MAAO,CACL,iBAAkBjB,KAAKkB,YACvB,mBAAoBlB,KAAKW,aACzB,gBAAiBX,KAAKmB,W,CAI1B,SAAAd,GACE,MAAMe,EAAYpB,KAAKqB,MACnBrB,KAAKC,MAAMqB,OAAOC,SAASvB,KAAKqB,OAChCrB,KAAKC,MAAMQ,MAAMc,WACrBvB,KAAKa,OAAMW,OAAAC,OAAAD,OAAAC,OAAA,GACNzB,KAAKa,QAAM,CACd,eAAgBO,GAAapB,KAAKC,MAAMqB,OAAOC,SAAS,kBACxD,eAAgBvB,KAAKC,MAAMqB,OAAOC,SAAS,GAAGvB,KAAK0B,c,CAIvD,UAAAC,G,MACE,MAAMC,EAAU,GAChBA,EAAQ,IAAGC,EAAA7B,KAAK8B,QAAI,MAAAD,SAAA,SAAAA,EAAEE,iBAAmB,KACzC,OAAOH,C,CAGT,aAAAI,GACE,MAAMJ,EAAU5B,KAAK2B,aACrB,MAAMM,EAAO,CACX,EAAKC,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7C,EAAKA,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,cAC7CG,QAAWH,EAAA,MAAIC,MAAOnC,KAAKa,OAAQuB,MAAOR,GAASM,EAAA,eAErD,OAAOD,EAAK,GAAGjC,KAAKsC,UAAYL,EAAK,U,CAGvC,MAAAM,GACE,OACEL,EAACM,EAAI,CAAAC,IAAA,2CAACN,MAAOnC,KAAKiB,qBACdjB,KAAKgC,gB","ignoreList":[]}