{"version":3,"names":["createSchemes","newSchemes","AllColors.TEXT_SCHEMES","forEach","element","schemeName","color","AllColors","toConstantCase","scheme","TEXT_SCHEME_CONFIG","TEXT_SCHEME_MAP","Map","Object","entries","createTextMapDefinition","map","background","config","textCss","EonUiTextStyle0","Text","this","schemeConfig","schemeMap","componentWillLoad","applyScheme","isInfoIconAvailable","hostElement","querySelector","componentDidLoad","setCssVariables","setColor","applySchemeDelegate","setCssVariablesDelegate","style","setProperty","render","h","Host","key","class","pfx","textStyle","fontWeight","name"],"sources":["src/components/text/constants/text-constants.ts","src/components/text/text.scss?tag=eon-ui-text&encapsulation=shadow","src/components/text/text.tsx"],"sourcesContent":["import { TextSchemeDefinition } from \"./text-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createTextMapDefinition } from \"../../../utils/scheme-helper\";\n\nfunction createSchemes() {\n let newSchemes: AllColors.TextSchemeConfiguration = {};\n AllColors.TEXT_SCHEMES.forEach((element) => {\n newSchemes[element.schemeName] = {\n color: AllColors[`COLOR_${toConstantCase(element.schemeName)}`]\n };\n if (element.scheme) {\n newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n }\n });\n return newSchemes;\n}\n\nexport const TEXT_SCHEME_CONFIG: AllColors.TextSchemeConfiguration = createSchemes();\n\nexport const TEXT_SCHEME_MAP: Map = new Map(\n Object.entries(createTextMapDefinition()).map(([background, config]) => [\n background as BackgroundColor,\n TEXT_SCHEME_CONFIG[config as string]\n ])\n);\n\nexport const TEXT_STYLES = [\"copy\", \"copy-small\", \"copy-link\", \"quote\", \"abstract\", \"rtf\"] as const;\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n:host {\n color: v(color);\n}\n\n.#{$prefix}text-wrapper {\n display: inline-flex;\n\n &.#{$prefix}info-icon-display {\n display: flex;\n }\n}\n\n.#{$prefix}text-info-icon {\n display: flex;\n align-items: center;\n margin: 0 16px;\n height: v(lineHeight);\n}\n\n.#{$prefix}copy {\n @include eon-typography(copy);\n}\n\n.#{$prefix}copy-link {\n @include eon-typography(copy);\n}\n\n.#{$prefix}copy-small {\n @include eon-typography(copy-small);\n\n &.#{$prefix}info-icon-display {\n line-height: 1.7;\n\n .#{$prefix}text-info-icon {\n height: 1.7em;\n }\n }\n}\n\n.#{$prefix}quote {\n @include eon-typography(quote);\n}\n\n.#{$prefix}caption {\n @include eon-typography(caption);\n\n &.#{$prefix}info-icon-display {\n line-height: 1.7;\n\n .#{$prefix}text-info-icon {\n height: 1.7em;\n }\n }\n}\n\n.#{$prefix}abstract {\n @include eon-typography(abstract);\n}\n\n.#{$prefix}subheadline {\n @include eon-typography(subheadline);\n}\n\n.#{$prefix}rtf {\n @include eon-typography(rtf);\n\n &.#{$prefix}info-icon-display {\n line-height: 1.7;\n\n .#{$prefix}text-info-icon {\n height: 1.7em;\n }\n }\n}\n\n:host(:hover) {\n .#{$prefix}copy-link {\n text-decoration: underline;\n text-decoration-color: v(color);\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { TextSchemeDefinition, TextSchemeName, TextStyle } from \"./constants/text-types\";\nimport { TEXT_SCHEME_CONFIG, TEXT_SCHEME_MAP } from \"./constants/text-constants\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { EonColor, TextSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n// import { CaptionSchemeDefinition } from \"../caption/constants/caption-types\";\n// import { CAPTION_SCHEME_CONFIG, CAPTION_SCHEME_MAP } from \"../caption/constants/caption-constants\";\n\n/**\n * @slot info-icon - Holds a single eon-ui-info-icon element\n * @slot [unnamed] - holds any number of HTML elements.\n */\n@Component({\n tag: \"eon-ui-text\",\n styleUrl: \"text.scss\",\n shadow: true\n})\nexport class Text implements ColorableComponent> {\n // @InitLogging() sentryTransaction;\n schemeConfig: TextSchemeConfiguration = TEXT_SCHEME_CONFIG;\n schemeMap = TEXT_SCHEME_MAP;\n\n /**\n * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @State() activeScheme: TextSchemeDefinition;\n @State() isInfoIconAvailable: boolean;\n\n @Element() hostElement: HTMLEonUiTextElement;\n\n /**\n * The name of the color scheme of the component.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @Prop({ reflect: true }) scheme: TextSchemeName;\n\n /**\n * The style for the Text\n */\n @Prop() textStyle: TextStyle = \"copy\";\n\n /**\n * The font-weight\n */\n @Prop() fontWeight: string;\n\n /**\n * The color\n */\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: EonColor;\n\n componentWillLoad() {\n this.applyScheme();\n this.isInfoIconAvailable = !!this.hostElement.querySelector('[slot=\"info-icon\"]');\n }\n\n componentDidLoad() {\n this.setCssVariables();\n this.setColor();\n }\n\n @Watch(\"scheme\")\n applyScheme() {\n applySchemeDelegate(this);\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n }\n\n @Watch(\"color\")\n setColor() {\n if (!this.scheme && this.color) {\n this.hostElement.style.setProperty(`--color`, `var(--${this.color})`);\n }\n }\n\n render() {\n return (\n \n \n \n {this.isInfoIconAvailable && (\n \n \n \n )}\n

\n \n );\n }\n}\n"],"mappings":"6SAMA,SAASA,IACP,IAAIC,EAAsE,GAC1EC,EAAuBC,SAASC,IAC9BH,EAAWG,EAAQC,YAAc,CAC/BC,MAAOC,EAAU,SAASC,EAAeJ,EAAQC,gBAEnD,GAAID,EAAQK,OAAQ,CAClBR,EAAWG,EAAQC,YAAc,IAAKJ,EAAWG,EAAQC,eAAgBD,EAAQK,O,KAGrF,OAAOR,CACT,CAEO,MAAMS,EAA8EV,IAEpF,MAAMW,EAA0E,IAAIC,IACzFC,OAAOC,QAAQC,KAA2BC,KAAI,EAAEC,EAAYC,KAAY,CACtED,EACAP,EAAmBQ,OCxBvB,MAAMC,EAAU,k38CAChB,MAAAC,EAAeD,E,MCkBFE,EAAI,M,yBAEfC,KAAAC,aAA8Db,EAC9DY,KAAAE,UAAYb,E,oGAoBmB,O,+CAa/B,iBAAAc,GACEH,KAAKI,cACLJ,KAAKK,sBAAwBL,KAAKM,YAAYC,cAAc,qB,CAG9D,gBAAAC,GACER,KAAKS,kBACLT,KAAKU,U,CAIP,WAAAN,GACEO,EAAoBX,K,CAItB,eAAAS,GACEG,EAAwBZ,K,CAI1B,QAAAU,GACE,IAAKV,KAAKb,QAAUa,KAAKhB,MAAO,CAC9BgB,KAAKM,YAAYO,MAAMC,YAAY,UAAW,SAASd,KAAKhB,S,EAIhE,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,KAAAE,IAAA,2CACEC,MAAOC,EAAI,CACT,CAAC,gBAAiB,KAClB,CAACpB,KAAKqB,WAAY,KAClB,CAAC,qBAAsBrB,KAAKK,sBAE9BQ,MAAO,CAAES,WAAYtB,KAAKsB,aAE1BN,EAAA,QAAAE,IAAA,6CACClB,KAAKK,qBACJW,EAAA,QAAAE,IAAA,2CAAMC,MAAOC,EAAI,mBACfJ,EAAA,QAAAE,IAAA,2CAAMK,KAAK,gB"}