{"version":3,"names":["RTESOURCE_QUILL","createSchemes","newSchemes","AllColors.RTE_RENDERER_SCHEMES","forEach","element","schemeName","paragraphColor","AllColors","toConstantCase","sublineColor","blockquoteColor","scheme","RTE_RENDERER_SCHEME_CONFIG","RTE_RENDERER_SCHEME_MAP","Map","Object","entries","createRteRendererMapDefinition","map","background","config","rteRendererCss","EonUiRteRendererStyle0","RteRenderer","this","schemeConfig","schemeMap","setContent","value","Promise","resolve","reject","rendererContent","innerHTML","setPolyfillCssPrefix","error","componentWillLoad","applyScheme","isInfoIconAvailable","hostElement","querySelector","componentDidLoad","setRendererContent","setCssVariables","applySchemeDelegate","setCssVariablesDelegate","content","tags","tag","querySelectorAll","child","classList","add","render","h","Host","key","class","pfx","rteSource","valueOf","ref","el","name"],"sources":["src/components/rte-renderer/constants/rte-renderer-constants.ts","src/components/rte-renderer/rte-renderer.scss?tag=eon-ui-rte-renderer&encapsulation=shadow","src/components/rte-renderer/rte-renderer.tsx"],"sourcesContent":["import { RteRendererSchemeDefinition } from \"./rte-renderer-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createRteRendererMapDefinition } from \"../../../utils/scheme-helper\";\n\nexport const RTESOURCE_QUILL = \"quill\";\nexport const RTESOURCE_AEM = \"aem\";\n\nexport const RTE_SOURCES = [RTESOURCE_QUILL, RTESOURCE_AEM] as const;\n\nfunction createSchemes() {\n let newSchemes: AllColors.RteRendererSchemeConfiguration = {};\n\n AllColors.RTE_RENDERER_SCHEMES.forEach((element) => {\n newSchemes[element.schemeName] = {\n paragraphColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n sublineColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n blockquoteColor: 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 RTE_RENDERER_SCHEME_CONFIG: AllColors.RteRendererSchemeConfiguration = createSchemes();\n\nexport const RTE_RENDERER_SCHEME_MAP: Map = new Map(\n Object.entries(createRteRendererMapDefinition()).map(([background, config]) => [\n background as BackgroundColor,\n RTE_RENDERER_SCHEME_CONFIG[config as string]\n ])\n);\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* {\n margin: 0;\n padding: 0;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n outline: 0 none;\n text-rendering: optimizelegibility;\n}\n\n:host {\n display: block;\n}\n\n:host(.#{$prefix}info-icon-display) {\n display: flex;\n}\n\n.#{$prefix}rte-renderer-info-icon {\n align-items: flex-start;\n margin: 0 16px;\n}\n\n.#{$prefix}renderer-content {\n &.#{$prefix}rte-source-aem {\n counter-reset: list-0;\n color: v(paragraphColor);\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n\n p,\n /* h4,\n h5, */\n h6 {\n counter-reset: list-0;\n }\n\n p {\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n margin-bottom: 8px;\n }\n\n span {\n display: inline-block;\n\n &.eon-copy-small {\n @include eon-typography(\"copy-small\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n }\n\n &.eon-abstract {\n @include eon-typography(\"abstract\");\n margin-bottom: 16px;\n\n @include for-size(phone) {\n margin-bottom: 8px;\n }\n }\n }\n\n p.sc-eon-ui-rte-renderer {\n &:only-child {\n margin-bottom: 0;\n span {\n &.eon-abstract {\n margin-bottom: 0;\n }\n }\n }\n\n &:last-child {\n margin-bottom: 0;\n span {\n &.eon-abstract {\n margin-bottom: 0;\n }\n }\n }\n }\n\n h6 {\n @include eon-typography(\"h6\");\n color: v(sublineColor);\n margin-bottom: 16px;\n }\n\n * {\n + h6 {\n margin-top: 32px;\n\n @include for-size(tablet-or-smaller) {\n margin-top: 24px;\n }\n }\n }\n\n ul,\n ol {\n position: relative;\n padding-left: 0;\n margin-bottom: 8px;\n list-style: none;\n\n li {\n position: relative;\n padding-left: 32px;\n margin-bottom: 16px;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &:before {\n content: \"•\";\n position: absolute;\n left: 0;\n width: 24px;\n margin-left: 0;\n margin-right: 0;\n text-align: center;\n white-space: nowrap;\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n font-weight: 900;\n\n @include for-size(desktop) {\n width: 16px;\n }\n\n @include for-size(tablet) {\n width: 16px;\n }\n\n @include for-size(phone) {\n width: 16px;\n }\n }\n\n @include for-size(desktop) {\n padding-left: 24px;\n }\n\n @include for-size(tablet) {\n padding-left: 24px;\n }\n\n @include for-size(phone) {\n padding-left: 24px;\n }\n }\n }\n\n ul {\n li {\n &:before {\n content: \"•\";\n }\n }\n }\n\n ol {\n li {\n &:before {\n counter-increment: list-0;\n content: counter(list-0, decimal);\n }\n }\n }\n\n ul.sc-eon-ui-rte-renderer,\n ol.sc-eon-ui-rte-renderer {\n &:only-child {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n blockquote {\n position: relative;\n margin-top: 32px;\n margin-bottom: 32px;\n padding-left: 24px;\n display: block;\n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: -16px;\n width: 8px;\n height: calc(100% + 32px);\n padding: 16px 0px 16px 0px;\n background-color: v(blockquoteColor);\n display: block;\n opacity: 0.5;\n }\n\n + blockquote {\n margin-top: -24px;\n\n &::before {\n top: 8px;\n height: calc(100% + 8px);\n padding-bottom: 0px;\n }\n }\n }\n\n blockquote.sc-eon-ui-rte-renderer {\n &:only-child {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n sup {\n vertical-align: super;\n line-height: 0;\n top: -1px;\n font-size: 12px !important;\n }\n\n sub {\n vertical-align: sub;\n line-height: 0;\n bottom: 0px;\n font-size: 12px !important;\n }\n\n b {\n font-weight: bolder !important;\n }\n\n a {\n text-decoration: underline;\n color: inherit;\n cursor: pointer;\n font-weight: bold;\n }\n }\n\n &.#{$prefix}rte-source-quill {\n counter-reset: list-0;\n\n p {\n margin: 0;\n padding: 0;\n }\n\n p,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n }\n\n .ql-align-center {\n text-align: center;\n }\n\n .ql-align-justify {\n text-align: justify;\n }\n\n .ql-align-right {\n text-align: right;\n }\n\n li {\n list-style-type: none;\n padding-left: 1.5em;\n position: relative;\n\n > .ql-ui:before {\n display: inline-block;\n margin-left: -1.5em;\n margin-right: 0.3em;\n text-align: right;\n white-space: nowrap;\n width: 1.2em;\n }\n\n &[data-list=\"checked\"] > .ql-ui,\n &[data-list=\"unchecked\"] > .ql-ui {\n color: #777;\n }\n\n &[data-list=\"bullet\"] > .ql-ui:before {\n content: \"\\2022\";\n }\n\n &[data-list=\"checked\"] > .ql-ui:before {\n content: \"\\2611\";\n }\n\n &[data-list=\"unchecked\"] > .ql-ui:before {\n content: \"\\2610\";\n }\n\n &[data-list=\"ordered\"] {\n counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;\n counter-increment: list-0;\n\n > .ql-ui:before {\n content: counter(list-0, decimal) \". \";\n }\n }\n }\n\n /*\n *\n * E.ON CUSTOM STYLES\n *\n */\n\n color: v(paragraphColor);\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n\n p {\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n margin-bottom: 8px;\n display: block;\n }\n\n .ql-font-copy {\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n margin-bottom: 8px;\n display: block;\n }\n\n .ql-font-copy-small {\n @include eon-typography(\"copy-small\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n /* margin-bottom: 8px; */\n display: inline-block;\n }\n\n .ql-font-abstract {\n @include eon-typography(\"abstract\");\n margin-bottom: 16px;\n display: inline-block;\n\n @include for-size(phone) {\n margin-bottom: 8px;\n }\n }\n\n .ql-font-subheadline {\n @include eon-typography(\"h6\");\n color: v(sublineColor);\n margin-bottom: 8px;\n display: inline-block;\n }\n\n * {\n + p {\n .ql-font-subheadline {\n margin-top: 24px;\n\n @include for-size(tablet-or-smaller) {\n margin-top: 16px;\n }\n }\n\n + blockquote {\n margin-top: 24px;\n }\n }\n }\n\n ol {\n position: relative;\n padding-left: 0;\n margin-bottom: 8px;\n list-style: none;\n\n li {\n position: relative;\n padding-left: 32px;\n margin-bottom: 16px;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n @include for-size(desktop) {\n padding-left: 24px;\n }\n\n @include for-size(tablet) {\n padding-left: 24px;\n }\n\n @include for-size(phone) {\n padding-left: 24px;\n }\n\n &[data-list=\"bullet\"],\n &[data-list=\"ordered\"] {\n > .ql-ui {\n position: absolute;\n left: 0;\n\n &:before {\n content: \"•\";\n position: relative;\n width: 24px;\n margin-left: 0;\n margin-right: 0;\n text-align: center;\n white-space: nowrap;\n @include eon-typography(\"copy\");\n line-height: var(--rteRendererLineHeight, var(--lineHeight)) !important;\n font-weight: 900;\n\n @include for-size(desktop) {\n width: 16px;\n }\n\n @include for-size(tablet) {\n width: 16px;\n }\n\n @include for-size(phone) {\n width: 16px;\n }\n }\n }\n }\n\n &[data-list=\"bullet\"] {\n > .ql-ui {\n &:before {\n content: \"•\";\n }\n }\n }\n\n &[data-list=\"ordered\"] {\n > .ql-ui {\n &:before {\n content: counter(list-0, decimal);\n }\n }\n }\n }\n }\n\n blockquote {\n position: relative;\n margin-top: 32px;\n margin-bottom: 32px;\n padding-left: 24px;\n display: block;\n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: -16px;\n width: 8px;\n height: calc(100% + 32px);\n padding: 16px 0px 16px 0px;\n background-color: v(blockquoteColor);\n display: block;\n opacity: 0.5;\n }\n\n + blockquote {\n margin-top: -24px;\n\n &::before {\n top: 8px;\n height: calc(100% + 8px);\n padding-bottom: 0px;\n }\n }\n }\n\n sup {\n vertical-align: super;\n line-height: 0;\n top: -1px;\n font-size: 12px !important;\n }\n\n sub {\n vertical-align: sub;\n line-height: 0;\n bottom: 0px;\n font-size: 12px !important;\n }\n\n strong {\n font-weight: bolder !important;\n }\n\n a {\n text-decoration: underline;\n color: inherit;\n cursor: pointer;\n font-weight: bold;\n }\n\n .quill-better-table {\n border-collapse: collapse;\n td {\n border: 1px solid #000;\n }\n td[data-cell-highlight=\"true\"] {\n border-color: green;\n border-width: 2px;\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch, Method } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { RteRendererSchemeDefinition, RteRendererSchemeName, RteSource } from \"./constants/rte-renderer-types\";\nimport {\n RTESOURCE_QUILL,\n RTE_RENDERER_SCHEME_CONFIG,\n RTE_RENDERER_SCHEME_MAP\n} from \"./constants/rte-renderer-constants\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { RteRendererSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot info-icon - Holds a single eon-ui-info-icon element\n */\n@Component({\n tag: \"eon-ui-rte-renderer\",\n styleUrl: \"rte-renderer.scss\",\n shadow: true\n})\nexport class RteRenderer implements ColorableComponent> {\n // @InitLogging() sentryTransaction;\n schemeConfig: RteRendererSchemeConfiguration = RTE_RENDERER_SCHEME_CONFIG;\n schemeMap = RTE_RENDERER_SCHEME_MAP;\n rendererContent: any;\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: RteRendererSchemeDefinition;\n @State() isInfoIconAvailable: boolean;\n\n @Element() hostElement: HTMLEonUiRteRendererElement;\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: RteRendererSchemeName;\n\n /**\n * Defines the RTE source of the content to render.\n */\n @Prop() rteSource: RteSource = RTESOURCE_QUILL;\n\n /**\n * Content of rte renderer as html string\n */\n @Prop() content: string;\n\n /**\n * Set Content of Rich Text Renderer\n * @param value HTML String that has to be inserted and styled\n */\n @Method()\n async setContent(value: string): Promise {\n return new Promise((resolve, reject) => {\n try {\n this.rendererContent.innerHTML = value;\n this.setPolyfillCssPrefix(this.rendererContent);\n resolve();\n } catch (error) {\n reject(error);\n }\n });\n }\n\n componentWillLoad() {\n this.applyScheme();\n this.isInfoIconAvailable = !!this.hostElement.querySelector('[slot=\"info-icon\"]');\n }\n\n componentDidLoad() {\n this.setRendererContent();\n this.setCssVariables();\n }\n\n @Watch(\"scheme\")\n applyScheme(): void {\n applySchemeDelegate(this);\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n }\n\n @Watch(\"content\")\n setRendererContent(): void {\n this.rendererContent.innerHTML = this.content;\n this.setPolyfillCssPrefix(this.rendererContent);\n }\n\n setPolyfillCssPrefix(content): any {\n let tags = [\n \"div\",\n \"span\",\n \"p\",\n \"ol\",\n \"ul\",\n \"li\",\n \"blockquote\",\n \"strong\",\n \"sub\",\n \"sup\",\n \"em\",\n \"a\",\n \"h4\",\n \"h5\",\n \"h6\"\n ];\n tags.forEach((tag) => {\n content.querySelectorAll(tag).forEach((child) => {\n child.classList.add(\"sc-eon-ui-rte-renderer\");\n });\n });\n\n return content;\n }\n\n render() {\n return (\n \n (this.rendererContent = el as HTMLElement)}\n >\n {this.isInfoIconAvailable && (\n
\n \n
\n )}\n \n );\n }\n}\n"],"mappings":"2SAMO,MAAMA,EAAkB,QAK/B,SAASC,IACP,IAAIC,EAAoF,GAExFC,EAA+BC,SAASC,IACtCH,EAAWG,EAAQC,YAAc,CAC/BC,eAAgBC,EAAU,SAASC,EAAeJ,EAAQC,eAC1DI,aAAcF,EAAU,SAASC,EAAeJ,EAAQC,eACxDK,gBAAiBH,EAAU,SAASC,EAAeJ,EAAQC,gBAE7D,GAAID,EAAQO,OAAQ,CAClBV,EAAWG,EAAQC,YAAc,IAAKJ,EAAWG,EAAQC,eAAgBD,EAAQO,O,KAGrF,OAAOV,CACT,CAEO,MAAMW,EAAoGZ,IAE1G,MAAMa,EAAyF,IAAIC,IACxGC,OAAOC,QAAQC,KAAkCC,KAAI,EAAEC,EAAYC,KAAY,CAC7ED,EACAP,EAA2BQ,OChC/B,MAAMC,EAAiB,igrEACvB,MAAAC,EAAeD,E,MCmBFE,EAAW,M,yBAEtBC,KAAAC,aAA4Eb,EAC5EY,KAAAE,UAAYb,E,oGAqBmBd,E,uBAY/B,gBAAM4B,CAAWC,GACf,OAAO,IAAIC,SAAc,CAACC,EAASC,KACjC,IACEP,KAAKQ,gBAAgBC,UAAYL,EACjCJ,KAAKU,qBAAqBV,KAAKQ,iBAC/BF,G,CACA,MAAOK,GACPJ,EAAOI,E,KAKb,iBAAAC,GACEZ,KAAKa,cACLb,KAAKc,sBAAwBd,KAAKe,YAAYC,cAAc,qB,CAG9D,gBAAAC,GACEjB,KAAKkB,qBACLlB,KAAKmB,iB,CAIP,WAAAN,GACEO,EAAoBpB,K,CAItB,eAAAmB,GACEE,EAAwBrB,K,CAI1B,kBAAAkB,GACElB,KAAKQ,gBAAgBC,UAAYT,KAAKsB,QACtCtB,KAAKU,qBAAqBV,KAAKQ,gB,CAGjC,oBAAAE,CAAqBY,GACnB,IAAIC,EAAO,CACT,MACA,OACA,IACA,KACA,KACA,KACA,aACA,SACA,MACA,MACA,KACA,IACA,KACA,KACA,MAEFA,EAAK5C,SAAS6C,IACZF,EAAQG,iBAAiBD,GAAK7C,SAAS+C,IACrCA,EAAMC,UAAUC,IAAI,yBAAyB,GAC7C,IAGJ,OAAON,C,CAGT,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EAAI,CACT,CAAC,qBAAsBlC,KAAKc,uBAG9BgB,EAAA,OAAAE,IAAA,2CACEC,MAAOC,EAAI,CACT,CAAC,oBAAqB,KACtB,CAAC,cAAclC,KAAKmC,aAAc,KAAKC,UAEzCC,IAAMC,GAAQtC,KAAKQ,gBAAkB8B,IAEtCtC,KAAKc,qBACJgB,EAAA,OAAKG,MAAOC,EAAI,2BACdJ,EAAA,QAAMS,KAAK,e"}