{"version":3,"names":["kdxShareIconsCss","KdxShareIcons","componentDidLoad","copyIcon","this","root","querySelector","addEventListener","clipboardCopy","bind","setShareUrls","e","preventDefault","modal","a","document","createElement","href","location","textContent","title","html","Blob","outerHTML","type","plain","navigator","clipboard","write","ClipboardItem","Promise","resolve","classList","add","setTimeout","remove","error","writeText","then","console","url","encodeURIComponent","window","fb","lk","x","setAttribute","render","h","class"],"sources":["src/components/kdx-share-icons/kdx-share-icons.scss?tag=kdx-share-icons","src/components/kdx-share-icons/kdx-share-icons.tsx"],"sourcesContent":[".kdx-share-icons {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    .heading { margin: 0 16px 8px 0; }\r\n    ul {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0;\r\n        margin: 0;\r\n        list-style: none;\r\n    }\r\n    li {\r\n        margin-right: 16px;\r\n        padding-bottom: 8px;\r\n\r\n        &:before { display: none; }\r\n        &:last-child { \r\n            margin-right: 0;\r\n            padding-bottom: 8px; \r\n        }\r\n        a {\r\n            display: inline-block;\r\n            \r\n            svg {\r\n                @include svg-format(21px, 21px, currentColor);\r\n                transition: transform .3s ease-in-out;\r\n            }\r\n            &:hover, &:focus { \r\n                svg { transform: scale(1.3); }\r\n            }\r\n        }\r\n    }\r\n    .copy-link {\r\n        position: relative;\r\n        \r\n        .copy-modal {\r\n            opacity: 0;\r\n            position: absolute;\r\n            bottom: calc(100% + 16px);            \r\n            right: 100%;\r\n            transform: translateX(50%);\r\n            z-index: 10;\r\n            background: #FFF;\r\n            color: #000;\r\n            @include text-size(14);\r\n            @include line-height(18);            \r\n            pointer-events: none;\r\n            box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.6);\r\n            padding: 6px;\r\n            white-space: nowrap;\r\n            border-radius: 5px;\r\n            transition: all .3s ease-in-out;            \r\n            \r\n            &.show {               \r\n                animation: fadeInOut 5s;            \r\n            }\r\n        }\r\n    }\r\n\r\n    @keyframes fadeInOut {\r\n        0% { opacity: 0; }\r\n        50% { opacity: 1; }\r\n        100% { opacity: 0; }\r\n    }\r\n}","import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'kdx-share-icons',\r\n    styleUrl: 'kdx-share-icons.scss'\r\n})\r\nexport class KdxShareIcons {\r\n\r\n    @Element() root: HTMLElement;    \r\n    \r\n    componentDidLoad() {\r\n        const copyIcon = this.root.querySelector('.copy-link');\r\n        if (copyIcon) {\r\n            copyIcon.addEventListener('click', this.clipboardCopy.bind(this));\r\n        }\r\n\r\n        this.setShareUrls();\r\n    }\r\n\r\n    \r\n\r\n    async clipboardCopy(e) {\r\n        e.preventDefault();\r\n\r\n        const modal = this.root.querySelector('.copy-modal');\r\n        const a = document.createElement('a');\r\n        a.href = location.href;\r\n        a.textContent = document.title;\r\n        const html = new Blob([a.outerHTML], { type: 'text/html' });\r\n        const plain = new Blob([location.href], { type: 'text/plain' });\r\n\r\n        try {\r\n            await navigator.clipboard.write([\r\n                new ClipboardItem({\r\n                    // Promise.resolve required for Safari\r\n                    'text/html': Promise.resolve(html),\r\n                    'text/plain': Promise.resolve(plain),\r\n                }),\r\n            ]);\r\n            \r\n            modal.classList.add('show');\r\n            setTimeout(() => {\r\n                modal.classList.remove('show');\r\n            }, 5000);\r\n        } catch (error) {\r\n            navigator.clipboard.writeText(a.href).then(() => {                \r\n                modal.classList.add('show');\r\n                setTimeout(() => {\r\n                    modal.classList.remove('show');\r\n                }, 5000);\r\n            })\r\n            console.error(error);\r\n        }\r\n    }\r\n\r\n\r\n    setShareUrls() {\r\n        \r\n        const url = encodeURIComponent(window.location.href);\r\n        const fb = this.root.querySelector('.share-facebook');\r\n        const lk = this.root.querySelector('.share-linkedin');\r\n        const x = this.root.querySelector('.share-x');\r\n        \r\n        if (fb) {\r\n            fb.setAttribute('href', `https://www.facebook.com/sharer/sharer.php?u=${url}`);\r\n        }\r\n        if (lk) {\r\n            lk.setAttribute('href', `https://www.linkedin.com/shareArticle?mini=true&url=${url}`);\r\n        }\r\n        if (x) {\r\n            x.setAttribute('href', `https://x.com/intent/post?url=${url}`);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class=\"kdx-share-icons\">\r\n                <slot/>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAmB,2uD,MCMZC,EAAa,M,yBAItB,gBAAAC,GACI,MAAMC,EAAWC,KAAKC,KAAKC,cAAc,cACzC,GAAIH,EAAU,CACVA,EAASI,iBAAiB,QAASH,KAAKI,cAAcC,KAAKL,M,CAG/DA,KAAKM,c,CAKT,mBAAMF,CAAcG,GAChBA,EAAEC,iBAEF,MAAMC,EAAQT,KAAKC,KAAKC,cAAc,eACtC,MAAMQ,EAAIC,SAASC,cAAc,KACjCF,EAAEG,KAAOC,SAASD,KAClBH,EAAEK,YAAcJ,SAASK,MACzB,MAAMC,EAAO,IAAIC,KAAK,CAACR,EAAES,WAAY,CAAEC,KAAM,cAC7C,MAAMC,EAAQ,IAAIH,KAAK,CAACJ,SAASD,MAAO,CAAEO,KAAM,eAEhD,UACUE,UAAUC,UAAUC,MAAM,CAC5B,IAAIC,cAAc,CAEd,YAAaC,QAAQC,QAAQV,GAC7B,aAAcS,QAAQC,QAAQN,OAItCZ,EAAMmB,UAAUC,IAAI,QACpBC,YAAW,KACPrB,EAAMmB,UAAUG,OAAO,OAAO,GAC/B,I,CACL,MAAOC,GACLV,UAAUC,UAAUU,UAAUvB,EAAEG,MAAMqB,MAAK,KACvCzB,EAAMmB,UAAUC,IAAI,QACpBC,YAAW,KACPrB,EAAMmB,UAAUG,OAAO,OAAO,GAC/B,IAAK,IAEZI,QAAQH,MAAMA,E,EAKtB,YAAA1B,GAEI,MAAM8B,EAAMC,mBAAmBC,OAAOxB,SAASD,MAC/C,MAAM0B,EAAKvC,KAAKC,KAAKC,cAAc,mBACnC,MAAMsC,EAAKxC,KAAKC,KAAKC,cAAc,mBACnC,MAAMuC,EAAIzC,KAAKC,KAAKC,cAAc,YAElC,GAAIqC,EAAI,CACJA,EAAGG,aAAa,OAAQ,gDAAgDN,I,CAE5E,GAAII,EAAI,CACJA,EAAGE,aAAa,OAAQ,uDAAuDN,I,CAEnF,GAAIK,EAAG,CACHA,EAAEC,aAAa,OAAQ,iCAAiCN,I,EAIhE,MAAAO,GACI,OACIC,EAAA,OAAKC,MAAM,mBACPD,EAAA,a"}