@limetech/lime-elements 38.12.4 → 38.13.0

package/dist/lime-elements/p-98478c6d.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as t,H as r}from"./p-288f0842.js";import{t as e}from"./p-f753013d.js";const i=':host(limel-ai-avatar){display:flex;justify-content:center;align-self:center;position:relative;aspect-ratio:1;max-width:10rem;max-height:8rem;min-width:1.75rem;min-height:1.75rem;border-radius:0.5rem}*{box-sizing:border-box}:host(limel-ai-avatar[is-thinking]:not([is-thinking=false])){--ai-avatar-animation-play-state:running;--ai-avatar-orbitals-opacity:1;--ai-avatar-orbitals-animation-play-state:running}.core,.orbitals{position:absolute;z-index:10;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%}.core{opacity:0.8;width:70%;animation:breathe 3s ease infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused);background-color:inherit;box-shadow:var(--shadow-depth-8);backdrop-filter:blur(1rem)}.orbitals{mix-blend-mode:overlay;width:clamp(0.375rem, 20%, 3.5rem);animation:rotate 5s linear infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused);transition:opacity 0.2s ease;opacity:var(--ai-avatar-orbitals-opacity, 0)}.orbitals:after,.orbitals:before{animation-play-state:var(--ai-avatar-orbitals-animation-play-state, paused);content:"";display:block;position:absolute;inset:0;margin:auto;width:clamp(0.125rem, 50%, 0.75rem);aspect-ratio:1;border-radius:50%;background-color:rgb(var(--color-glaucous-lighter))}.orbitals:before{animation:orbit 1s linear infinite;opacity:0.6;transform-origin:-220% 0;margin-right:-70%}.orbitals:after{animation:orbit 2s linear infinite;opacity:0.8;scale:0.7;transform-origin:0% -250%;margin-bottom:-70%}@keyframes orbit{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}@keyframes breathe{1%,100%{transform:scale(1)}50%{transform:scale(0.9)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}svg{position:absolute;margin:auto;mix-blend-mode:screen;animation-iteration-count:infinite;animation-play-state:var(--ai-avatar-animation-play-state, paused)}.red{rotate:20deg;color:rgb(var(--color-red-default));animation-name:rotate, scale-circle-one;animation-duration:5s}.green{rotate:36deg;color:rgb(var(--color-green-default));animation-name:rotate, scale-circle-two;animation-duration:5.5s}.blue{rotate:100deg;color:rgb(var(--color-blue-default));animation-name:rotate, scale-circle-three;animation-duration:4.5s}.orange{rotate:165deg;color:rgb(var(--color-orange-default));animation-name:rotate, scale-circle-four;animation-duration:6.5s}@keyframes scale-circle-one{0%,100%{transform:scaleX(1) scaleY(0.8)}25%,75%{transform:scaleX(0.8) scaleY(0.9)}50%{transform:scaleX(1) scaleY(0.7)}}@keyframes scale-circle-two{0%,100%{transform:scaleX(0.8) scaleY(1)}25%,75%{transform:scaleX(0.9) scaleY(0.75)}50%{transform:scaleX(0.72) scaleY(1)}}@keyframes scale-circle-three{0%,100%{transform:scaleX(0.9) scaleY(0.8)}50%{transform:scaleX(0.75) scaleY(0.9)}}@keyframes scale-circle-four{0%,100%{transform:scaleX(0.8) scaleY(0.95)}25%,75%{transform:scaleX(0.95) scaleY(0.75)}50%{transform:scaleX(0.75) scaleY(0.95)}}';const o=class{constructor(t){a(this,t);this.getTranslation=a=>e.get(a,this.language);this.isThinking=false;this.language=document.documentElement.lang}render(){return t(r,{role:"img","aria-label":this.getHostAriaLabel()},this.renderCircle("red"),this.renderCircle("green"),this.renderCircle("blue"),this.renderCircle("orange"),t("div",{class:"core"}),t("div",{class:"orbitals"}))}getHostAriaLabel(){let a="";if(this.isThinking){a=` (${this.getTranslation("ai-avatar.thinking")})`}return`${this.getTranslation("ai-avatar.label")}${a}`}renderCircle(a){return t("svg",{class:a,viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",role:"presentation"},t("circle",{cx:"50",cy:"50",r:"40",fill:"none",stroke:"currentColor","stroke-width":"6"}))}};o.style=i;export{o as limel_ai_avatar};
+//# sourceMappingURL=p-98478c6d.entry.js.map

package/dist/lime-elements/p-98478c6d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["aiAvatarCss","AiAvatar","this","getTranslation","key","translate","get","language","document","documentElement","lang","render","h","Host","role","getHostAriaLabel","renderCircle","class","thinkingText","isThinking","className","viewBox","xmlns","cx","cy","r","fill","stroke"],"sources":["./src/components/ai-avatar/ai-avatar.scss?tag=limel-ai-avatar&encapsulation=shadow","./src/components/ai-avatar/ai-avatar.tsx"],"sourcesContent":["/**\n* @prop --ai-avatar-animation-play-state: Set it to `running` to start the animation.\n*/\n:host(limel-ai-avatar) {\n    display: flex;\n    justify-content: center;\n    align-self: center;\n    position: relative;\n\n    aspect-ratio: 1;\n    max-width: 10rem;\n    max-height: 8rem;\n    min-width: 1.75rem;\n    min-height: 1.75rem;\n\n    border-radius: 0.5rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-ai-avatar[is-thinking]:not([is-thinking='false'])) {\n    --ai-avatar-animation-play-state: running;\n    --ai-avatar-orbitals-opacity: 1;\n    --ai-avatar-orbitals-animation-play-state: running;\n}\n\n.core,\n.orbitals {\n    position: absolute;\n    z-index: 10;\n    inset: 0;\n    margin: auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n}\n\n.core {\n    opacity: 0.8;\n    width: 70%;\n    animation: breathe 3s ease infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n\n    background-color: inherit;\n    box-shadow: var(--shadow-depth-8);\n    backdrop-filter: blur(1rem);\n}\n\n.orbitals {\n    mix-blend-mode: overlay;\n    width: clamp(0.375rem, 20%, 3.5rem);\n\n    animation: rotate 5s linear infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n\n    transition: opacity 0.2s ease;\n    opacity: var(--ai-avatar-orbitals-opacity, 0);\n\n    &:after,\n    &:before {\n        animation-play-state: var(\n            --ai-avatar-orbitals-animation-play-state,\n            paused\n        );\n        content: '';\n        display: block;\n        position: absolute;\n        inset: 0;\n        margin: auto;\n\n        width: clamp(0.125rem, 50%, 0.75rem);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background-color: rgb(var(--color-glaucous-lighter));\n    }\n    &:before {\n        animation: orbit 1s linear infinite;\n        opacity: 0.6;\n        transform-origin: -220% 0;\n        margin-right: -70%;\n    }\n    &:after {\n        animation: orbit 2s linear infinite;\n        opacity: 0.8;\n        scale: 0.7;\n        transform-origin: 0% -250%;\n        margin-bottom: -70%;\n    }\n}\n\n@keyframes orbit {\n    0% {\n        transform: rotateZ(0deg) translate3d(0, 0, 0);\n    }\n    100% {\n        transform: rotateZ(360deg) translate3d(0, 0, 0);\n    }\n}\n\n@keyframes breathe {\n    1%,\n    100% {\n        transform: scale(1);\n    }\n    50% {\n        transform: scale(0.9);\n    }\n}\n\n@keyframes rotate {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\nsvg {\n    position: absolute;\n    margin: auto;\n    mix-blend-mode: screen;\n\n    animation-iteration-count: infinite;\n    animation-play-state: var(--ai-avatar-animation-play-state, paused);\n}\n\n.red {\n    rotate: 20deg;\n    color: rgb(var(--color-red-default));\n    animation-name: rotate, scale-circle-one;\n    animation-duration: 5s;\n}\n\n.green {\n    rotate: 36deg;\n    color: rgb(var(--color-green-default));\n    animation-name: rotate, scale-circle-two;\n    animation-duration: 5.5s;\n}\n\n.blue {\n    rotate: 100deg;\n    color: rgb(var(--color-blue-default));\n    animation-name: rotate, scale-circle-three;\n    animation-duration: 4.5s;\n}\n\n.orange {\n    rotate: 165deg;\n    color: rgb(var(--color-orange-default));\n    animation-name: rotate, scale-circle-four;\n    animation-duration: 6.5s;\n}\n\n@keyframes scale-circle-one {\n    0%,\n    100% {\n        transform: scaleX(1) scaleY(0.8);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.8) scaleY(0.9);\n    }\n    50% {\n        transform: scaleX(1) scaleY(0.7);\n    }\n}\n\n@keyframes scale-circle-two {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(1);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.9) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.72) scaleY(1);\n    }\n}\n\n@keyframes scale-circle-three {\n    0%,\n    100% {\n        transform: scaleX(0.9) scaleY(0.8);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.9);\n    }\n}\n\n@keyframes scale-circle-four {\n    0%,\n    100% {\n        transform: scaleX(0.8) scaleY(0.95);\n    }\n    25%,\n    75% {\n        transform: scaleX(0.95) scaleY(0.75);\n    }\n    50% {\n        transform: scaleX(0.75) scaleY(0.95);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\n\n/**\n * This component displays an avatar, representing Lime AI assistants.\n *\n * :::warning\n * This is a private component used internally in the Lime's various applications,\n * which is the reason for having it in Lime Elements —to ease the distribution\n * of the component across all our apps.\n *\n * 3rd party developers are not allowed use this component directly.\n * :::\n *\n * @private\n * @exampleComponent limel-example-ai-avatar-basic\n * @exampleComponent limel-example-ai-avatar-colors\n */\n@Component({\n    tag: 'limel-ai-avatar',\n    shadow: true,\n    styleUrl: 'ai-avatar.scss',\n})\nexport class AiAvatar {\n    /**\n     * Set to `true` to trigger animations that indicate that the AI is\n     * \"thinking\" or processing something.\n     */\n    @Prop({ reflect: true })\n    public isThinking = false;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = document.documentElement.lang as Languages;\n\n    public render() {\n        return (\n            <Host role=\"img\" aria-label={this.getHostAriaLabel()}>\n                {this.renderCircle('red')}\n                {this.renderCircle('green')}\n                {this.renderCircle('blue')}\n                {this.renderCircle('orange')}\n                <div class=\"core\" />\n                <div class=\"orbitals\" />\n            </Host>\n        );\n    }\n\n    private getHostAriaLabel(): string {\n        let thinkingText = '';\n        if (this.isThinking) {\n            thinkingText = ` (${this.getTranslation('ai-avatar.thinking')})`;\n        }\n\n        return `${this.getTranslation('ai-avatar.label')}${thinkingText}`;\n    }\n\n    private renderCircle(className: string) {\n        return (\n            <svg\n                class={className}\n                viewBox=\"0 0 100 100\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                role=\"presentation\"\n            >\n                <circle\n                    cx=\"50\"\n                    cy=\"50\"\n                    r=\"40\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"6\"\n                />\n            </svg>\n        );\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAc,w8F,MCwBPC,EAAQ,M,yBAwDTC,KAAAC,eAAkBC,GACfC,EAAUC,IAAIF,EAAKF,KAAKK,U,gBAnDf,M,cAMSC,SAASC,gBAAgBC,I,CAE/CC,SACH,OACIC,EAACC,EAAI,CAACC,KAAK,MAAK,aAAaZ,KAAKa,oBAC7Bb,KAAKc,aAAa,OAClBd,KAAKc,aAAa,SAClBd,KAAKc,aAAa,QAClBd,KAAKc,aAAa,UACnBJ,EAAA,OAAKK,MAAM,SACXL,EAAA,OAAKK,MAAM,a,CAKfF,mBACJ,IAAIG,EAAe,GACnB,GAAIhB,KAAKiB,WAAY,CACjBD,EAAe,KAAKhB,KAAKC,eAAe,wB,CAG5C,MAAO,GAAGD,KAAKC,eAAe,qBAAqBe,G,CAG/CF,aAAaI,GACjB,OACIR,EAAA,OACIK,MAAOG,EACPC,QAAQ,cACRC,MAAM,6BACNR,KAAK,gBAELF,EAAA,UACIW,GAAG,KACHC,GAAG,KACHC,EAAE,KACFC,KAAK,OACLC,OAAO,eAAc,eACR,M"}

package/dist/lime-elements/p-ce152b39.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t}from"./p-288f0842.js";import{m as r}from"./p-cf87519f.js";import{g as o}from"./p-2c35fb9d.js";import"./p-4e9b4087.js";class a{constructor(e){this.handleIntersection=e=>{e.forEach((e=>{if(e.isIntersecting){const t=e.target;const r=t.getAttribute("data-src");if(r){t.setAttribute("src",r);t.removeAttribute("data-src")}this.observer.unobserve(t)}}))};this.observer=new IntersectionObserver(this.handleIntersection);const t=e.querySelectorAll("img");t.forEach((e=>{this.observer.observe(e)}))}disconnect(){this.observer.disconnect()}}const l='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:"“";left:0;top:-0.75rem}blockquote:after{content:"”";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const n=class{constructor(t){e(this,t);this.imageIntersectionObserver=null;this.value=undefined;this.whitelist=o.markdownWhitelist;this.lazyLoadImages=false}async textChanged(){var e;try{this.cleanupImageIntersectionObserver();const t=await r(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[],lazyLoadImages:this.lazyLoadImages});this.rootElement.innerHTML=t;this.setupImageIntersectionObserver()}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}disconnectedCallback(){this.cleanupImageIntersectionObserver()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}setupImageIntersectionObserver(){if(this.lazyLoadImages){this.imageIntersectionObserver=new a(this.rootElement)}}cleanupImageIntersectionObserver(){if(this.imageIntersectionObserver){this.imageIntersectionObserver.disconnect();this.imageIntersectionObserver=null}}static get watchers(){return{value:["textChanged"]}}};n.style=l;export{n as limel_markdown};
+//# sourceMappingURL=p-ce152b39.entry.js.map

package/dist/lime-elements/p-ce152b39.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","forEach","entry","isIntersecting","img","target","dataSrc","getAttribute","setAttribute","removeAttribute","observer","unobserve","IntersectionObserver","images","querySelectorAll","observe","disconnect","markdownCss","Markdown","imageIntersectionObserver","globalConfig","markdownWhitelist","async","cleanupImageIntersectionObserver","html","markdownToHTML","value","forceHardLineBreaks","whitelist","_a","lazyLoadImages","rootElement","innerHTML","setupImageIntersectionObserver","error","console","textChanged","disconnectedCallback","render","h","id","ref","el"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n    private observer: IntersectionObserver;\n\n    /**\n     * @param containerElement - The element containing images to observe.\n     */\n    public constructor(containerElement: HTMLElement) {\n        this.observer = new IntersectionObserver(this.handleIntersection);\n\n        const images = containerElement.querySelectorAll('img');\n        images.forEach((img) => {\n            this.observer.observe(img);\n        });\n    }\n\n    public disconnect() {\n        this.observer.disconnect();\n    }\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.getAttribute('data-src');\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    img.removeAttribute('data-src');\n                }\n\n                this.observer.unobserve(img);\n            }\n        });\n    };\n}\n","/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    /**\n     * Enable lazy loading for images\n     */\n    @Prop()\n    public lazyLoadImages = false;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            this.cleanupImageIntersectionObserver();\n\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n                lazyLoadImages: this.lazyLoadImages,\n            });\n\n            this.rootElement.innerHTML = html;\n\n            this.setupImageIntersectionObserver();\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    private rootElement: HTMLDivElement;\n    private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    public disconnectedCallback() {\n        this.cleanupImageIntersectionObserver();\n    }\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n\n    private setupImageIntersectionObserver() {\n        if (this.lazyLoadImages) {\n            this.imageIntersectionObserver = new ImageIntersectionObserver(\n                this.rootElement,\n            );\n        }\n    }\n\n    private cleanupImageIntersectionObserver() {\n        if (this.imageIntersectionObserver) {\n            this.imageIntersectionObserver.disconnect();\n            this.imageIntersectionObserver = null;\n        }\n    }\n}\n"],"mappings":"iJAAaA,EAMTC,YAAmBC,GAaFC,KAAAC,mBACbC,IAEAA,EAAQC,SAASC,IACb,GAAIA,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,aAAa,YAEjC,GAAID,EAAS,CACTF,EAAII,aAAa,MAAOF,GACxBF,EAAIK,gBAAgB,W,CAGxBX,KAAKY,SAASC,UAAUP,E,IAE9B,EA3BFN,KAAKY,SAAW,IAAIE,qBAAqBd,KAAKC,oBAE9C,MAAMc,EAAShB,EAAiBiB,iBAAiB,OACjDD,EAAOZ,SAASG,IACZN,KAAKY,SAASK,QAAQX,EAAI,G,CAI3BY,aACHlB,KAAKY,SAASM,Y,EChBtB,MAAMC,EAAc,smN,MC8BPC,EAAQ,M,yBAgDTpB,KAAAqB,0BAA8D,K,oCA7BlEC,EAAaC,kB,oBAMO,K,CAGjBC,oB,MACH,IACIxB,KAAKyB,mCAEL,MAAMC,QAAaC,EAAe3B,KAAK4B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA/B,KAAK8B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgBhC,KAAKgC,iBAGzBhC,KAAKiC,YAAYC,UAAYR,EAE7B1B,KAAKmC,gC,CACP,MAAOC,GAELC,QAAQD,MAAMA,E,EAOfZ,yBACHxB,KAAKsC,a,CAGFC,uBACHvC,KAAKyB,kC,CAGFe,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ5C,KAAKiC,YAAcW,I,CAKrCT,iCACJ,GAAInC,KAAKgC,eAAgB,CACrBhC,KAAKqB,0BAA4B,IAAIxB,EACjCG,KAAKiC,Y,EAKTR,mCACJ,GAAIzB,KAAKqB,0BAA2B,CAChCrB,KAAKqB,0BAA0BH,aAC/BlB,KAAKqB,0BAA4B,I"}