@limetech/lime-elements 38.36.1 → 38.37.0

package/dist/lime-elements/p-9fc23e05.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","entry","isIntersecting","img","target","dataSrc","dataset","src","setAttribute","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        for (const img of images) {\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        for (const entry of entries) {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.dataset.src;\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    delete img.dataset.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*,\n*::before,\n*::after {\n    box-sizing: border-box;\n\n    & :where(:not(img, video, svg, canvas, iframe)) {\n        min-width: 0;\n        min-height: 0;\n    }\n}\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n\n:host(limel-markdown.reset-img-height) {\n    // This is not a publicly documented helper class, intended for CRM's internal use.\n    // Reset image height to auto to avoid issues with fixed heights in some markdown content\n    // e.g., content copied from MS Word or emails that are sent from a user that has\n    // added fixed heights to images that appear in the activity feed.\n    #markdown {\n        img {\n            height: auto;\n        }\n    }\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            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,IAEA,IAAK,MAAMC,KAASD,EAAS,CACzB,GAAIC,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,QAAQC,IAE5B,GAAIF,EAAS,CACTF,EAAIK,aAAa,MAAOH,UACjBF,EAAIG,QAAQC,G,CAGvBT,KAAKW,SAASC,UAAUP,E,IAzBhCL,KAAKW,SAAW,IAAIE,qBAAqBb,KAAKC,oBAE9C,MAAMa,EAASf,EAAiBgB,iBAAiB,OACjD,IAAK,MAAMV,KAAOS,EAAQ,CACtBd,KAAKW,SAASK,QAAQX,E,EAIvBY,aACHjB,KAAKW,SAASM,Y,EChBtB,MAAMC,EAAc,o0O,MC8BPC,EAAQ,M,yBA+CTnB,KAAAoB,0BAA8D,K,WAxC/C,G,eAYnBC,EAAaC,kB,oBAMO,K,CAGjBC,oB,MACH,IACIvB,KAAKwB,mCAEL,MAAMC,QAAaC,EAAe1B,KAAK2B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA9B,KAAK6B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgB/B,KAAK+B,iBAGzB/B,KAAKgC,YAAYC,UAAYR,EAE7BzB,KAAKkC,gC,CACP,MAAOC,GACLC,QAAQD,MAAMA,E,EAOfZ,yBACHvB,KAAKqC,a,CAGFC,uBACHtC,KAAKwB,kC,CAGFe,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ3C,KAAKgC,YAAcW,I,CAKrCT,iCACJ,GAAIlC,KAAK+B,eAAgB,CACrB/B,KAAKoB,0BAA4B,IAAIvB,EACjCG,KAAKgC,Y,EAKTR,mCACJ,GAAIxB,KAAKoB,0BAA2B,CAChCpB,KAAKoB,0BAA0BH,aAC/BjB,KAAKoB,0BAA4B,I"}