@limetech/lime-elements 38.36.1 → 38.37.1

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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","this","tooltipId","createRandomString","filterClickWhenDisabled","e","disabled","preventDefault","connectedCallback","initialize","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","componentDidLoad","element","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Host","onClick","Object","assign","id","renderIcon","renderTooltip","icon","getIconName","title","getIconTitle","name","style","color","_a","_b","backgroundColor","label","elementId"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n    all: unset;\n    &:not(:disabled) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--icon-background-color, transparent)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        color: var(--limel-theme-text-disabled-on-background-color);\n    }\n}\n\n:host([elevated]) {\n    button {\n        box-shadow: var(--button-shadow-normal);\n        &:disabled {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n}\n\nlimel-icon {\n    padding: 0.25rem;\n    width: 1.75rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { getIconName, getIconTitle } from '../icon/get-icon-props';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-icon\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop()\n    public icon: string | Icon;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    disabled={this.disabled}\n                    id={this.tooltipId}\n                    {...buttonAttributes}\n                >\n                    {this.renderIcon()}\n                    {this.renderTooltip(this.tooltipId)}\n                </button>\n            </Host>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const title = getIconTitle(this.icon);\n\n        return (\n            <limel-icon\n                name={icon}\n                aria-label={title}\n                aria-hidden={title ? null : 'true'}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    '--icon-background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"mLAAA,MAAMA,EAAgB,s6D,MCsBTC,EAAU,M,yBA6CXC,KAAAC,UAAYC,IAuDZF,KAAAG,wBAA2BC,IAC/B,GAAIJ,KAAKK,SAAU,CACfD,EAAEE,gB,qCA1FQ,M,mCAYA,K,CAKXC,oBACHP,KAAKQ,Y,CAGFC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,mBACHd,KAAKQ,Y,CAKDA,aACJ,MAAMO,EAAUf,KAAKW,KAAKK,WAAWC,cAAc,oBACnD,IAAKF,EAAS,CACV,M,EAIDG,SACH,MAAMC,EAA0C,GAEhD,GAAInB,KAAKW,KAAKS,aAAa,YAAa,CACpCD,EAAiBE,SAAWrB,KAAKW,KAAKW,aAAa,W,CAGvD,OACIC,EAACC,EAAI,CAACC,QAASzB,KAAKG,yBAChBoB,EAAA,SAAAG,OAAAC,OAAA,CACItB,SAAUL,KAAKK,SACfuB,GAAI5B,KAAKC,WACLkB,GAEHnB,KAAK6B,aACL7B,KAAK8B,cAAc9B,KAAKC,Y,CAMjC4B,a,QACJ,MAAME,EAAOC,EAAYhC,KAAK+B,MAC9B,MAAME,EAAQC,EAAalC,KAAK+B,MAEhC,OACIR,EAAA,cACIY,KAAMJ,EAAI,aACEE,EAAK,cACJA,EAAQ,KAAO,OAC5BG,MAAO,CACHC,MAAO,IAAGC,EAACtC,KAAK+B,QAAa,MAAAO,SAAA,SAAAA,EAAED,QAC/B,0BAA2B,IACvBE,EAACvC,KAAK+B,QAAa,MAAAQ,SAAA,SAAAA,EAAEC,oB,CAOjCV,cAAc7B,GAClB,GAAID,KAAKyC,MAAO,CACZ,OAAOlB,EAAA,iBAAemB,UAAWzC,EAAWwC,MAAOzC,KAAKyC,O"}

package/dist/lime-elements/p-e127eaaa.js

@@ -1,2 +0,0 @@
-import{f as i}from"./p-288f0842.js";const t=new WeakMap;class s{constructor(t){this.element=t;this.isActive=false;this.hasJustReleasedEnter=true;this.handleKeyDown=t=>{var s;if(t.key==="Enter"&&!this.isActive){this.isActive=true;if((s=this.element)===null||s===void 0?void 0:s.shadowRoot){i(this.element)}}};this.handleKeyUp=t=>{var s;if(t.key==="Enter"&&this.isActive){this.isActive=false;this.hasJustReleasedEnter=true;if((s=this.element)===null||s===void 0?void 0:s.shadowRoot){i(this.element)}}};this.handleClick=i=>{if(!this.isActive){return}if(this.hasJustReleasedEnter){this.hasJustReleasedEnter=false;return}i.stopImmediatePropagation()};this.callbacks={keydownHandler:this.handleKeyDown.bind(this),keyupHandler:this.handleKeyUp.bind(this),clickHandler:this.handleClick.bind(this)}}enable(){this.element.addEventListener("keydown",this.callbacks.keydownHandler);this.element.addEventListener("keyup",this.callbacks.keyupHandler);this.element.addEventListener("click",this.callbacks.clickHandler,true)}disable(){this.element.removeEventListener("keydown",this.callbacks.keydownHandler);this.element.removeEventListener("keyup",this.callbacks.keyupHandler);this.element.removeEventListener("click",this.callbacks.clickHandler,true)}}function h(i){if(!t.has(i)){const h=new s(i);h.enable();t.set(i,h)}}function e(i){const s=t.get(i);if(s){s.disable();t.delete(i)}}export{h as m,e as r};
-//# sourceMappingURL=p-e127eaaa.js.map

package/dist/lime-elements/p-e127eaaa.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["eventHandlers","WeakMap","EnterClickable","constructor","element","this","isActive","hasJustReleasedEnter","handleKeyDown","event","key","_a","shadowRoot","forceUpdate","handleKeyUp","handleClick","stopImmediatePropagation","callbacks","keydownHandler","bind","keyupHandler","clickHandler","enable","addEventListener","disable","removeEventListener","makeEnterClickable","has","enterClickable","set","removeEnterClickable","get","delete"],"sources":["./src/util/make-enter-clickable.ts"],"sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, EnterClickable> = new WeakMap();\n\nclass EnterClickable {\n    private isActive = false;\n    private hasJustReleasedEnter = true;\n\n    constructor(private element: HTMLElement) {}\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && !this.isActive) {\n            this.isActive = true;\n\n            if (this.element?.shadowRoot) {\n                forceUpdate(this.element);\n            }\n        }\n    };\n\n    private handleKeyUp = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && this.isActive) {\n            this.isActive = false;\n            this.hasJustReleasedEnter = true;\n\n            if (this.element?.shadowRoot) {\n                forceUpdate(this.element);\n            }\n        }\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        if (!this.isActive) {\n            return;\n        }\n\n        if (this.hasJustReleasedEnter) {\n            this.hasJustReleasedEnter = false;\n\n            return;\n        }\n\n        event.stopImmediatePropagation();\n    };\n\n    private callbacks: CallBacks = {\n        keydownHandler: this.handleKeyDown.bind(this),\n        keyupHandler: this.handleKeyUp.bind(this),\n        clickHandler: this.handleClick.bind(this),\n    };\n\n    public enable() {\n        this.element.addEventListener('keydown', this.callbacks.keydownHandler);\n        this.element.addEventListener('keyup', this.callbacks.keyupHandler);\n        this.element.addEventListener(\n            'click',\n            this.callbacks.clickHandler,\n            true\n        );\n    }\n\n    public disable() {\n        this.element.removeEventListener(\n            'keydown',\n            this.callbacks.keydownHandler\n        );\n        this.element.removeEventListener('keyup', this.callbacks.keyupHandler);\n        this.element.removeEventListener(\n            'click',\n            this.callbacks.clickHandler,\n            true\n        );\n    }\n}\n\n/**\n * Overrides the default browser behavior for clickable elements\n * When focused and pressing down enter, avoids calling onClick repeatedly\n *\n * @param element - The clickable element\n */\nexport function makeEnterClickable(element: HTMLElement) {\n    if (!eventHandlers.has(element)) {\n        const enterClickable = new EnterClickable(element);\n        enterClickable.enable();\n        eventHandlers.set(element, enterClickable);\n    }\n}\n\n/**\n *\n * @param element\n */\nexport function removeEnterClickable(element: HTMLElement) {\n    const enterClickable: EnterClickable = eventHandlers.get(element);\n    if (enterClickable) {\n        enterClickable.disable();\n        eventHandlers.delete(element);\n    }\n}\n\ninterface CallBacks {\n    keydownHandler: (arg: KeyboardEvent) => void;\n    keyupHandler: (arg: KeyboardEvent) => void;\n    clickHandler: (arg: MouseEvent) => void;\n}\n"],"mappings":"oCAEA,MAAMA,EAAsD,IAAIC,QAEhE,MAAMC,EAIFC,YAAoBC,GAAAC,KAAAD,UAHZC,KAAAC,SAAW,MACXD,KAAAE,qBAAuB,KAIvBF,KAAAG,cAAiBC,I,MACrB,GAAIA,EAAMC,MAAQ,UAAYL,KAAKC,SAAU,CACzCD,KAAKC,SAAW,KAEhB,IAAIK,EAAAN,KAAKD,WAAO,MAAAO,SAAA,SAAAA,EAAEC,WAAY,CAC1BC,EAAYR,KAAKD,Q,IAKrBC,KAAAS,YAAeL,I,MACnB,GAAIA,EAAMC,MAAQ,SAAWL,KAAKC,SAAU,CACxCD,KAAKC,SAAW,MAChBD,KAAKE,qBAAuB,KAE5B,IAAII,EAAAN,KAAKD,WAAO,MAAAO,SAAA,SAAAA,EAAEC,WAAY,CAC1BC,EAAYR,KAAKD,Q,IAKrBC,KAAAU,YAAeN,IACnB,IAAKJ,KAAKC,SAAU,CAChB,M,CAGJ,GAAID,KAAKE,qBAAsB,CAC3BF,KAAKE,qBAAuB,MAE5B,M,CAGJE,EAAMO,0BAA0B,EAG5BX,KAAAY,UAAuB,CAC3BC,eAAgBb,KAAKG,cAAcW,KAAKd,MACxCe,aAAcf,KAAKS,YAAYK,KAAKd,MACpCgB,aAAchB,KAAKU,YAAYI,KAAKd,M,CAGjCiB,SACHjB,KAAKD,QAAQmB,iBAAiB,UAAWlB,KAAKY,UAAUC,gBACxDb,KAAKD,QAAQmB,iBAAiB,QAASlB,KAAKY,UAAUG,cACtDf,KAAKD,QAAQmB,iBACT,QACAlB,KAAKY,UAAUI,aACf,K,CAIDG,UACHnB,KAAKD,QAAQqB,oBACT,UACApB,KAAKY,UAAUC,gBAEnBb,KAAKD,QAAQqB,oBAAoB,QAASpB,KAAKY,UAAUG,cACzDf,KAAKD,QAAQqB,oBACT,QACApB,KAAKY,UAAUI,aACf,K,WAWIK,EAAmBtB,GAC/B,IAAKJ,EAAc2B,IAAIvB,GAAU,CAC7B,MAAMwB,EAAiB,IAAI1B,EAAeE,GAC1CwB,EAAeN,SACftB,EAAc6B,IAAIzB,EAASwB,E,CAEnC,C,SAMgBE,EAAqB1B,GACjC,MAAMwB,EAAiC5B,EAAc+B,IAAI3B,GACzD,GAAIwB,EAAgB,CAChBA,EAAeJ,UACfxB,EAAcgC,OAAO5B,E,CAE7B,Q"}