New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@pwabuilder/pwainstall

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pwabuilder/pwainstall - npm Package Compare versions

Comparing version 1.6.4 to 1.6.5

29

CHANGELOG.md

@@ -5,6 +5,31 @@ # Changelog

[Full Changelog](https://github.com/pwa-builder/pwa-install/compare/1.6.3...HEAD)
[Full Changelog](https://github.com/pwa-builder/pwa-install/compare/1.6.4...HEAD)
**Security fixes:**
- build\(deps\): \[security\] bump lodash from 4.17.15 to 4.17.19 [\#356](https://github.com/pwa-builder/pwa-install/pull/356) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
**Closed issues:**
- "Install" not working using pwa-install [\#355](https://github.com/pwa-builder/pwa-install/issues/355)
**Merged pull requests:**
- build\(deps-dev\): bump rollup from 2.22.1 to 2.23.0 [\#360](https://github.com/pwa-builder/pwa-install/pull/360) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump rollup from 2.21.0 to 2.22.1 [\#358](https://github.com/pwa-builder/pwa-install/pull/358) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump typescript from 3.9.5 to 3.9.7 [\#357](https://github.com/pwa-builder/pwa-install/pull/357) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump @open-wc/testing-karma from 3.4.4 to 3.4.7 [\#354](https://github.com/pwa-builder/pwa-install/pull/354) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump es-dev-server from 1.55.0 to 1.56.1 [\#353](https://github.com/pwa-builder/pwa-install/pull/353) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump @open-wc/karma-esm from 2.16.14 to 2.16.17 [\#352](https://github.com/pwa-builder/pwa-install/pull/352) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump @rollup/plugin-strip from 1.3.3 to 2.0.0 [\#351](https://github.com/pwa-builder/pwa-install/pull/351) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump @open-wc/testing-helpers from 1.8.3 to 1.8.4 [\#350](https://github.com/pwa-builder/pwa-install/pull/350) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump @open-wc/testing from 2.5.18 to 2.5.19 [\#349](https://github.com/pwa-builder/pwa-install/pull/349) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- build\(deps-dev\): bump rollup from 2.16.1 to 2.21.0 [\#348](https://github.com/pwa-builder/pwa-install/pull/348) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
## [1.6.4](https://github.com/pwa-builder/pwa-install/tree/1.6.4) (2020-06-16)
[Full Changelog](https://github.com/pwa-builder/pwa-install/compare/1.6.3...1.6.4)
**Closed issues:**
- \[FEATURE\] Add I18n for pwa install [\#274](https://github.com/pwa-builder/pwa-install/issues/274)

@@ -39,2 +64,3 @@

- build\(deps-dev\): bump @open-wc/testing-helpers from 1.7.0 to 1.7.2 [\#249](https://github.com/pwa-builder/pwa-install/pull/249) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
- Update README.md [\#225](https://github.com/pwa-builder/pwa-install/pull/225) ([richardtaylordawson](https://github.com/richardtaylordawson))

@@ -104,3 +130,2 @@ ## [1.6.2](https://github.com/pwa-builder/pwa-install/tree/1.6.2) (2020-04-20)

- Update README.md [\#225](https://github.com/pwa-builder/pwa-install/pull/225) ([richardtaylordawson](https://github.com/richardtaylordawson))
- build\(deps-dev\): bump @open-wc/karma-esm from 2.13.18 to 2.13.20 [\#219](https://github.com/pwa-builder/pwa-install/pull/219) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))

@@ -107,0 +132,0 @@ - build\(deps-dev\): bump @open-wc/testing-karma from 3.1.54 to 3.3.9 [\#218](https://github.com/pwa-builder/pwa-install/pull/218) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))

9

dist/pwa-install.js

@@ -55,3 +55,3 @@ /**

* http://polymer.github.io/PATENTS.txt
*/const v=` ${i} `;class x{constructor(t,e,i,n){this.strings=t,this.values=e,this.type=i,this.processor=n}getHTML(){const t=this.strings.length-1;let e="",s=!1;for(let o=0;o<t;o++){const t=this.strings[o],r=t.lastIndexOf("\x3c!--");s=(r>-1||s)&&-1===t.indexOf("--\x3e",r+1);const a=d.exec(t);e+=null===a?t+(s?v:n):t.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+i}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}
*/const v=` ${i} `;class b{constructor(t,e,i,n){this.strings=t,this.values=e,this.type=i,this.processor=n}getHTML(){const t=this.strings.length-1;let e="",s=!1;for(let o=0;o<t;o++){const t=this.strings[o],r=t.lastIndexOf("\x3c!--");s=(r>-1||s)&&-1===t.indexOf("--\x3e",r+1);const a=d.exec(t);e+=null===a?t+(s?v:n):t.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+i}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}
/**

@@ -69,3 +69,3 @@ * @license

* http://polymer.github.io/PATENTS.txt
*/const b=t=>null===t||!("object"==typeof t||"function"==typeof t),_=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class w{constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new S(this)}_getValue(){const t=this.strings,e=t.length-1;let i="";for(let n=0;n<e;n++){i+=t[n];const e=this.parts[n];if(void 0!==e){const t=e.value;if(b(t)||!_(t))i+="string"==typeof t?t:String(t);else for(const e of t)i+="string"==typeof e?e:String(e)}}return i+=t[e],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class S{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===f||b(t)&&t===this.value||(this.value=t,m(t)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const t=this.value;this.value=f,t(this)}this.value!==f&&this.committer.commit()}}class C{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(l()),this.endNode=t.appendChild(l())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=l()),t.__insert(this.endNode=l())}insertAfterPart(t){t.__insert(this.startNode=l()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}const t=this.__pendingValue;t!==f&&(b(t)?t!==this.value&&this.__commitText(t):t instanceof x?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):_(t)?this.__commitIterable(t):t===g?(this.value=g,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof y&&this.value.template===e)this.value.update(t.values);else{const i=new y(e,t.processor,this.options),n=i._clone();i.update(t.values),this.__commitNode(n),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,n=0;for(const s of t)i=e[n],void 0===i&&(i=new C(this.options),e.push(i),0===n?i.appendIntoPart(this):i.insertAfterPart(e[n-1])),i.setValue(s),i.commit(),n++;n<e.length&&(e.length=n,this.clear(i&&i.endNode))}clear(t=this.startNode){e(this.startNode.parentNode,t.nextSibling,this.endNode)}}class P{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}if(this.__pendingValue===f)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=f}}class k extends w{constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new N(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class N extends S{}let E=!1;(()=>{try{const t={get capture(){return E=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class A{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}if(this.__pendingValue===f)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),n=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=T(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=f}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const T=t=>t&&(E?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
*/const x=t=>null===t||!("object"==typeof t||"function"==typeof t),_=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class w{constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new S(this)}_getValue(){const t=this.strings,e=t.length-1;let i="";for(let n=0;n<e;n++){i+=t[n];const e=this.parts[n];if(void 0!==e){const t=e.value;if(x(t)||!_(t))i+="string"==typeof t?t:String(t);else for(const e of t)i+="string"==typeof e?e:String(e)}}return i+=t[e],i}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class S{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===f||x(t)&&t===this.value||(this.value=t,m(t)||(this.committer.dirty=!0))}commit(){for(;m(this.value);){const t=this.value;this.value=f,t(this)}this.value!==f&&this.committer.commit()}}class C{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(l()),this.endNode=t.appendChild(l())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=l()),t.__insert(this.endNode=l())}insertAfterPart(t){t.__insert(this.startNode=l()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}const t=this.__pendingValue;t!==f&&(x(t)?t!==this.value&&this.__commitText(t):t instanceof b?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):_(t)?this.__commitIterable(t):t===g?(this.value=g,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof y&&this.value.template===e)this.value.update(t.values);else{const i=new y(e,t.processor,this.options),n=i._clone();i.update(t.values),this.__commitNode(n),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,n=0;for(const s of t)i=e[n],void 0===i&&(i=new C(this.options),e.push(i),0===n?i.appendIntoPart(this):i.insertAfterPart(e[n-1])),i.setValue(s),i.commit(),n++;n<e.length&&(e.length=n,this.clear(i&&i.endNode))}clear(t=this.startNode){e(this.startNode.parentNode,t.nextSibling,this.endNode)}}class P{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}if(this.__pendingValue===f)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=f}}class k extends w{constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new N(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class N extends S{}let E=!1;(()=>{try{const t={get capture(){return E=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class A{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;m(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=f,t(this)}if(this.__pendingValue===f)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),n=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=T(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=f}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const T=t=>t&&(E?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
/**

@@ -123,3 +123,3 @@ * @license

* http://polymer.github.io/PATENTS.txt
*/"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.2.1");const M=(t,...e)=>new x(t,e,"html",O)
*/"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.2.1");const M=(t,...e)=>new b(t,e,"html",O)
/**

@@ -175,3 +175,2 @@ * @license

*/
(window.litElementVersions||(window.litElementVersions=[])).push("2.3.1");const Q={};class X extends W{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(void 0===t)this._styles=[];else if(Array.isArray(t)){const e=(t,i)=>t.reduceRight((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t),i),i=e(t,new Set),n=[];i.forEach(t=>n.unshift(t)),this._styles=n}else this._styles=[t]}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?Y?this.renderRoot.adoptedStyleSheets=t.map(t=>t.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map(t=>t.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==Q&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)}))}render(){return Q}}X.finalized=!0,X.render=(t,i,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const s=n.scopeName,o=V.has(i),r=z&&11===i.nodeType&&!!i.host,a=r&&!L.has(s),l=a?document.createDocumentFragment():i;if(((t,i,n)=>{let s=V.get(i);void 0===s&&(e(i,i.firstChild),V.set(i,s=new C(Object.assign({templateFactory:$},n))),s.appendInto(i)),s.setValue(t),s.commit()})(t,l,Object.assign({templateFactory:j(s)},n)),a){const t=V.get(l);V.delete(l);const n=t.value instanceof y?t.value.template:void 0;I(s,l,n),e(i,i.firstChild),i.appendChild(l),V.set(i,t)}!o&&r&&window.ShadyCSS.styleElement(i.host)};var tt=function(t,e,i,n){var s,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};let et=class extends X{constructor(){super(),this.manifestpath="manifest.json",this.openmodal=!1,this.hasprompt=!1,this.relatedApps=[],this.explainer="This app can be installed on your PC or mobile device. This will allow this web app to look and behave like any other installed app. You will find it in your app lists and be able to pin it to your home screen, start menus or task bars. This installed web app will also be able to safely interact with other apps and your operating system. ",this.featuresheader="Key Features",this.descriptionheader="Description",this.installbuttontext="Install",this.cancelbuttontext="Cancel",this.iosinstallinfotext="Tap the share button and then 'Add to Homescreen'",this.isSupportingBrowser=window.hasOwnProperty("BeforeInstallPromptEvent"),this.isIOS=navigator.userAgent.includes("iPhone")||navigator.userAgent.includes("iPad")||navigator.userAgent.includes("Macintosh")&&navigator.maxTouchPoints&&navigator.maxTouchPoints>2,this.installed=!1,window.addEventListener("beforeinstallprompt",t=>this.handleInstallPromptEvent(t)),document.addEventListener("keyup",t=>{"Escape"===t.key&&this.cancel()})}static get styles(){return G`:host{--install-focus-color:#919c9c;--install-button-color:#1FC2C8;--modal-z-index:9999;--background-z-index:9998;--modal-background-color:white}button{outline:0}#installModalWrapper{height:100vh;width:100vw;overflow:auto;position:fixed;bottom:0;top:0;left:0;right:0;z-index:var(--modal-z-index);display:flex;justify-content:center;align-items:center}#descriptionWrapper{margin-bottom:3em}#installModal{position:absolute;background:var(--modal-background-color);font-family:sans-serif;box-shadow:0 25px 26px rgba(32,36,50,.25),0 5px 9px rgba(51,58,83,.53);border-radius:10px;display:flex;flex-direction:column;padding:0;animation-name:opened;animation-duration:150ms;z-index:var(--modal-z-index);max-width:56em}@keyframes opened{from{transform:scale(.8,.8);opacity:.4}to{transform:scale(1,1);opacity:1}}@keyframes mobile{from{opacity:.6}to{opacity:1}}@keyframes fadein{from{opacity:.2}to{opacity:1}}#background{position:fixed;top:0;bottom:0;left:0;right:0;background:#e3e3e3b0;backdrop-filter:blur(5px);z-index:var(--background-z-index);animation-name:fadein;animation-duration:250ms}#headerContainer{display:flex;justify-content:space-between;margin:40px;margin-bottom:32px}#headerContainer h1{font-size:34px;color:#3c3c3c;margin-top:20px;margin-bottom:7px}#headerContainer img{height:122px;width:122px;background:#d3d3d3;border-radius:10px;padding:12px;border-radius:24px;margin-right:24px}#buttonsContainer{display:flex;justify-content:flex-end;position:relative;height:100px;background:#dedede75;width:100%;right:0;border-radius:0 0 12px 12px}#installButton,#installCancelButton,#openButton{text-align:center;align-content:center;align-self:center;vertical-align:middle;justify-self:flex-end;line-height:200%;flex:0 0 auto;display:inline-block;background:#0078d4;color:#fff;cursor:pointer;border:solid 1px transparent;outline:0}#openButton{background:var(--install-button-color)}#installButton,#installCancelButton{min-width:130px;margin-right:30px;background:var(--install-button-color);border-radius:20px;font-weight:600;font-size:14px;line-height:21px;padding-top:10px;padding-bottom:9px;padding-left:20px;padding-right:20px;outline:0;color:#fff}#closeButton{background:0 0;border:none;color:#000;padding-left:12px;padding-right:12px;padding-top:4px;padding-bottom:4px;border-radius:20px;font-weight:600;outline:0;cursor:pointer;align-self:self-end}#closeButton:focus,#installButton:focus,#installCancelButton:focus{box-shadow:0 0 0 3px var(--install-focus-color)}#contentContainer{margin-left:40px;margin-right:40px;flex:1}#contentContainer h3{font-size:22px;color:#3c3c3c;margin-bottom:12px}#contentContainer p{font-size:14px;color:#3c3c3c}#featuresScreenDiv{display:flex;justify-content:space-around;align-items:center;margin-right:20px}#featuresScreenDiv h3{font-style:normal;font-weight:600;font-size:22px;line-height:225%;margin-top:0}#keyFeatures{overflow:hidden;padding-right:2em}#keyFeatures ul{padding-inline-start:22px;margin-block-start:12px}#featuresScreenDiv #keyFeatures li{font-style:normal;font-weight:600;font-size:16px;line-height:29px;color:rgba(51,51,51,.72)}#screenshotsContainer{max-height:220px;display:flex;max-width:30em}#screenshotsContainer button{border:none;width:4em;transition:background-color .2s}#screenshotsContainer button:focus,#screenshotsContainer button:hover{background-color:#bbb}#screenshotsContainer button svg{width:28px;fill:#6b6969}#screenshots{display:flex;scroll-snap-type:x mandatory;flex-wrap:wrap;flex-direction:column;overflow-x:scroll;width:22em;max-height:220px;-webkit-overflow-scrolling:touch}#screenshots div{display:flex;align-items:center;justify-content:center;scroll-snap-align:start;height:14em;width:100%;background:#efefef}#screenshots img{height:100%;object-fit:contain}#screenshots::-webkit-scrollbar{display:none}#tagsDiv{margin-top:1em;margin-bottom:1em}#desc{width:100%;max-width:40em;font-size:14px;color:#7e7e7e;text-overflow:ellipsis;overflow:hidden}#logoContainer{display:flex}#tagsDiv span{background:grey;color:#fff;padding-left:12px;padding-right:12px;padding-bottom:4px;font-weight:700;border-radius:24px;margin-right:12px;padding-top:1px}#iosText{color:var(--install-button-color);text-align:center;font-weight:700;position:fixed;bottom:0;left:0;right:0;backdrop-filter:blur(10px);background:rgba(239,239,239,.17);margin:0;padding:2em}#manifest-description{white-space:pre-wrap}@media(max-height:780px){#buttonsContainer{height:70px;background:0 0}}@media(max-width:1220px){#installModal{margin:0;border-radius:0;min-height:100%;width:100%;animation-name:mobile;animation-duration:250ms}#screenshots{justify-content:center}}@media (max-width:962px){#headerContainer h1{margin-top:0;margin-bottom:0}#logoContainer{align-items:center}#desc{display:none}#headerContainer{margin-bottom:24px}#headerContainer img{height:42px;width:42px}}@media (max-width:800px){#background{display:none}#installModal{overflow:scroll;box-shadow:none;max-width:100%;height:100%}#screenshotsContainer{width:100%}#screenshots img{height:180px}#buttonsContainer{display:flex;justify-content:center;bottom:0;margin-bottom:0;border-radius:0;padding-top:1em;padding-bottom:1em}#buttonsContainer #installButton{margin-right:0}#featuresScreenDiv{flex-direction:column;align-items:flex-start;margin-right:0}#headerContainer{margin:20px}#desc{display:none}#contentContainer{margin-left:20px;margin-right:20px;margin-bottom:5em}#headerContainer img{height:60px;width:60px;margin-right:12px}#buttonsContainer{position:fixed;bottom:0;background:#efefef2b;backdrop-filter:blur(10px)}}@media(max-width:400px){#headerContainer h1{font-size:26px}#headerContainer img{height:40px;width:40px}#featuresScreenDiv h3{font-size:18px;margin-bottom:0}#keyFeatures ul{margin-top:0}}@media all and (display-mode:standalone){button{display:none}}`}async firstUpdated(){if(this.manifestpath)try{await this.getManifestData()}catch(t){console.error("Error getting manifest, check that you have a valid web manifest")}"getInstalledRelatedApps"in navigator&&(this.relatedApps=await navigator.getInstalledRelatedApps())}handleInstallPromptEvent(t){this.deferredprompt=t,this.hasprompt=!0,t.preventDefault()}checkManifest(t){t.icons&&t.icons[0]?t.name?t.description||console.error("Your web manifest must have a description listed"):console.error("Your web manifest must have a name listed"):console.error("Your web manifest must have atleast one icon listed")}async getManifestData(){try{const t=await fetch(this.manifestpath),e=await t.json();if(this.manifestdata=e,this.manifestdata)return this.checkManifest(this.manifestdata),e}catch(t){return null}}scrollToLeft(){const t=this.shadowRoot.querySelector("#screenshots");t.scrollBy({left:-t.clientWidth,top:0,behavior:"smooth"})}scrollToRight(){const t=this.shadowRoot.querySelector("#screenshots");t.scrollBy({left:t.clientWidth,top:0,behavior:"smooth"})}openPrompt(){this.openmodal=!0;let t=new CustomEvent("show");this.dispatchEvent(t)}closePrompt(){this.openmodal=!1;let t=new CustomEvent("hide");this.dispatchEvent(t)}shouldShowInstall(){return this.isSupportingBrowser&&this.relatedApps.length<1&&(this.hasprompt||this.isIOS)}async install(){if(this.deferredprompt){this.deferredprompt.prompt();let t=new CustomEvent("show");this.dispatchEvent(t);if("accepted"===(await this.deferredprompt.userChoice).outcome){await this.cancel(),this.installed=!0;let t=new CustomEvent("hide");return this.dispatchEvent(t),!0}{await this.cancel(),this.installed=!0;let t=new CustomEvent("hide");return this.dispatchEvent(t),!1}}}getInstalledStatus(){return navigator.standalone?navigator.standalone:!!matchMedia("(display-mode: standalone)").matches}cancel(){return new Promise((t,e)=>{this.openmodal=!1,this.hasAttribute("openmodal")&&this.removeAttribute("openmodal");let i=new CustomEvent("hide");this.dispatchEvent(i),t()})}render(){return M`${"standalone"in navigator&&!1===navigator.standalone||!0!==this.usecustom&&this.shouldShowInstall()&&!1===this.installed?M`<button part="openButton" id="openButton" @click="${()=>this.openPrompt()}"><slot>${this.installbuttontext}</slot></button>`:null} ${!0===this.openmodal?M`<div id="installModalWrapper">${this.openmodal?M`<div id="background" @click="${()=>this.cancel()}"></div>`:null}<div id="installModal" part="installModal"><div id="headerContainer"><div id="logoContainer"><img src="${this.iconpath?this.iconpath:this.manifestdata.icons[0].src}" alt="App Logo"><div id="installTitle"><h1>${this.manifestdata.short_name||this.manifestdata.name}</h1><p id="desc">${this.explainer}</p></div></div><button id="closeButton" @click="${()=>this.cancel()}"><svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/></svg></button></div><div id="contentContainer"><div id="featuresScreenDiv">${this.manifestdata.features?M`<div id="keyFeatures"><h3>${this.featuresheader}</h3><ul>${this.manifestdata.features?this.manifestdata.features.map(t=>M`<li>${t}</li>`):null}</ul></div>`:null} ${this.manifestdata.screenshots?M`<div id="screenshotsContainer"><button @click="${()=>this.scrollToLeft()}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"/></svg></button><section id="screenshots">${this.manifestdata.screenshots.map(t=>M`<div><img alt="App Screenshot" src="${t.src}"></div>`)}</section><button @click="${()=>this.scrollToRight()}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M284.9 412.6l138.1-134c6-5.8 9-13.7 9-22.4v-.4c0-8.7-3-16.6-9-22.4l-138.1-134c-12-12.5-31.3-12.5-43.2 0-11.9 12.5-11.9 32.7 0 45.2l83 79.4h-214c-17 0-30.7 14.3-30.7 32 0 18 13.7 32 30.6 32h214l-83 79.4c-11.9 12.5-11.9 32.7 0 45.2 12 12.5 31.3 12.5 43.3 0z"/></svg></button></div>`:null}</div><div id="descriptionWrapper"><h3>${this.descriptionheader}</h3><p id="manifest-description">${this.manifestdata.description}</p></div></div>${this.isIOS?M`<p id="iosText">${this.iosinstallinfotext}</p>`:M`<div id="buttonsContainer">${this.deferredprompt?M`<button id="installButton" @click="${()=>this.install()}">${this.installbuttontext} ${this.manifestdata.short_name}</button>`:M`<button @click="${()=>this.cancel()}" id="installCancelButton">${this.cancelbuttontext}</button>`}</div>`}</div></div>`:null}`}};var it;tt([J({type:String})],et.prototype,"manifestpath",void 0),tt([J({type:String})],et.prototype,"iconpath",void 0),tt([J({type:Object})],et.prototype,"manifestdata",void 0),tt([J({type:Boolean})],et.prototype,"openmodal",void 0),tt([J({type:Boolean})],et.prototype,"showopen",void 0),tt([J({type:Boolean})],et.prototype,"isSupportingBrowser",void 0),tt([J({type:Boolean})],et.prototype,"isIOS",void 0),tt([J({type:Boolean})],et.prototype,"installed",void 0),tt([J({type:Boolean})],et.prototype,"hasprompt",void 0),tt([J({type:Boolean})],et.prototype,"usecustom",void 0),tt([J({type:Array})],et.prototype,"relatedApps",void 0),tt([J({type:String})],et.prototype,"explainer",void 0),tt([J({type:String})],et.prototype,"featuresheader",void 0),tt([J({type:String})],et.prototype,"descriptionheader",void 0),tt([J({type:String})],et.prototype,"installbuttontext",void 0),tt([J({type:String})],et.prototype,"cancelbuttontext",void 0),tt([J({type:String})],et.prototype,"iosinstallinfotext",void 0),tt([J()],et.prototype,"deferredprompt",void 0),et=tt([(it="pwa-install",t=>"function"==typeof t?((t,e)=>(window.customElements.define(t,e),e))(it,t):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){window.customElements.define(t,e)}}})(it,t))],et);export{et as pwainstall};
//# sourceMappingURL=pwa-install.js.map
(window.litElementVersions||(window.litElementVersions=[])).push("2.3.1");const Q={};class X extends W{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(void 0===t)this._styles=[];else if(Array.isArray(t)){const e=(t,i)=>t.reduceRight((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t),i),i=e(t,new Set),n=[];i.forEach(t=>n.unshift(t)),this._styles=n}else this._styles=[t]}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?Y?this.renderRoot.adoptedStyleSheets=t.map(t=>t.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map(t=>t.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==Q&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)}))}render(){return Q}}X.finalized=!0,X.render=(t,i,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const s=n.scopeName,o=V.has(i),r=z&&11===i.nodeType&&!!i.host,a=r&&!L.has(s),l=a?document.createDocumentFragment():i;if(((t,i,n)=>{let s=V.get(i);void 0===s&&(e(i,i.firstChild),V.set(i,s=new C(Object.assign({templateFactory:$},n))),s.appendInto(i)),s.setValue(t),s.commit()})(t,l,Object.assign({templateFactory:j(s)},n)),a){const t=V.get(l);V.delete(l);const n=t.value instanceof y?t.value.template:void 0;I(s,l,n),e(i,i.firstChild),i.appendChild(l),V.set(i,t)}!o&&r&&window.ShadyCSS.styleElement(i.host)};var tt=function(t,e,i,n){var s,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};let et=class extends X{constructor(){super(),this.manifestpath="manifest.json",this.openmodal=!1,this.hasprompt=!1,this.relatedApps=[],this.explainer="This app can be installed on your PC or mobile device. This will allow this web app to look and behave like any other installed app. You will find it in your app lists and be able to pin it to your home screen, start menus or task bars. This installed web app will also be able to safely interact with other apps and your operating system. ",this.featuresheader="Key Features",this.descriptionheader="Description",this.installbuttontext="Install",this.cancelbuttontext="Cancel",this.iosinstallinfotext="Tap the share button and then 'Add to Homescreen'",this.isSupportingBrowser=window.hasOwnProperty("BeforeInstallPromptEvent"),this.isIOS=navigator.userAgent.includes("iPhone")||navigator.userAgent.includes("iPad")||navigator.userAgent.includes("Macintosh")&&navigator.maxTouchPoints&&navigator.maxTouchPoints>2,this.installed=!1,window.addEventListener("beforeinstallprompt",t=>this.handleInstallPromptEvent(t)),document.addEventListener("keyup",t=>{"Escape"===t.key&&this.cancel()})}static get styles(){return G`:host{--install-focus-color:#919c9c;--install-button-color:#0078d4;--modal-z-index:9999;--background-z-index:9998;--modal-background-color:white}button{outline:0}#installModalWrapper{height:100vh;width:100vw;overflow:auto;position:fixed;bottom:0;top:0;left:0;right:0;z-index:var(--modal-z-index);display:flex;justify-content:center;align-items:center}#descriptionWrapper{margin-bottom:3em}#installModal{position:absolute;background:var(--modal-background-color);font-family:sans-serif;box-shadow:0 25px 26px rgba(32,36,50,.25),0 5px 9px rgba(51,58,83,.53);border-radius:10px;display:flex;flex-direction:column;padding:0;animation-name:opened;animation-duration:150ms;z-index:var(--modal-z-index);max-width:56em}@keyframes opened{from{transform:scale(.8,.8);opacity:.4}to{transform:scale(1,1);opacity:1}}@keyframes mobile{from{opacity:.6}to{opacity:1}}@keyframes fadein{from{opacity:.2}to{opacity:1}}#background{position:fixed;top:0;bottom:0;left:0;right:0;background:#e3e3e3b0;backdrop-filter:blur(5px);z-index:var(--background-z-index);animation-name:fadein;animation-duration:250ms}#headerContainer{display:flex;justify-content:space-between;margin:40px;margin-bottom:32px}#headerContainer h1{font-size:34px;color:#3c3c3c;margin-top:20px;margin-bottom:7px}#headerContainer img{height:122px;width:122px;background:#d3d3d3;border-radius:10px;padding:12px;border-radius:24px;margin-right:24px}#buttonsContainer{display:flex;justify-content:flex-end;position:relative;height:100px;background:#dedede75;width:100%;right:0;border-radius:0 0 12px 12px}#installButton,#installCancelButton,#openButton{text-align:center;align-content:center;align-self:center;vertical-align:middle;justify-self:flex-end;line-height:200%;flex:0 0 auto;display:inline-block;background:#0078d4;color:#fff;cursor:pointer;border:solid 1px transparent;outline:0}#openButton{background:var(--install-button-color)}#installButton,#installCancelButton{min-width:130px;margin-right:30px;background:var(--install-button-color);border-radius:20px;font-weight:600;font-size:14px;line-height:21px;padding-top:10px;padding-bottom:9px;padding-left:20px;padding-right:20px;outline:0;color:#fff}#closeButton{background:0 0;border:none;color:#000;padding-left:12px;padding-right:12px;padding-top:4px;padding-bottom:4px;border-radius:20px;font-weight:600;outline:0;cursor:pointer;align-self:self-end}#closeButton:focus,#installButton:focus,#installCancelButton:focus{box-shadow:0 0 0 3px var(--install-focus-color)}#contentContainer{margin-left:40px;margin-right:40px;flex:1}#contentContainer h3{font-size:22px;color:#3c3c3c;margin-bottom:12px}#contentContainer p{font-size:14px;color:#3c3c3c}#featuresScreenDiv{display:flex;justify-content:space-around;align-items:center;margin-right:20px}#featuresScreenDiv h3{font-style:normal;font-weight:600;font-size:22px;line-height:225%;margin-top:0}#keyFeatures{overflow:hidden;padding-right:2em}#keyFeatures ul{padding-inline-start:22px;margin-block-start:12px}#featuresScreenDiv #keyFeatures li{font-style:normal;font-weight:600;font-size:16px;line-height:29px;color:rgba(51,51,51,.72)}#screenshotsContainer{max-height:220px;display:flex;max-width:30em}#screenshotsContainer button{border:none;width:4em;transition:background-color .2s}#screenshotsContainer button:focus,#screenshotsContainer button:hover{background-color:#bbb}#screenshotsContainer button svg{width:28px;fill:#6b6969}#screenshots{display:flex;scroll-snap-type:x mandatory;flex-wrap:wrap;flex-direction:column;overflow-x:scroll;width:22em;max-height:220px;-webkit-overflow-scrolling:touch}#screenshots div{display:flex;align-items:center;justify-content:center;scroll-snap-align:start;height:14em;width:100%;background:#efefef}#screenshots img{height:100%;object-fit:contain}#screenshots::-webkit-scrollbar{display:none}#tagsDiv{margin-top:1em;margin-bottom:1em}#desc{width:100%;max-width:40em;font-size:14px;color:#7e7e7e;text-overflow:ellipsis;overflow:hidden}#logoContainer{display:flex}#tagsDiv span{background:grey;color:#fff;padding-left:12px;padding-right:12px;padding-bottom:4px;font-weight:700;border-radius:24px;margin-right:12px;padding-top:1px}#iosText{color:var(--install-button-color);text-align:center;font-weight:700;position:fixed;bottom:0;left:0;right:0;backdrop-filter:blur(10px);background:rgba(239,239,239,.17);margin:0;padding:2em}#manifest-description{white-space:pre-wrap}@media (max-height:780px){#buttonsContainer{height:70px;background:0 0}}@media (max-width:1220px){#installModal{margin:0;border-radius:0;min-height:100%;width:100%;animation-name:mobile;animation-duration:250ms}#screenshots{justify-content:center}}@media (max-width:962px){#headerContainer h1{margin-top:0;margin-bottom:0}#logoContainer{align-items:center}#desc{display:none}#headerContainer{margin-bottom:24px}#headerContainer img{height:42px;width:42px}}@media (max-width:800px){#background{display:none}#installModal{overflow:scroll;box-shadow:none;max-width:100%;height:100%}#screenshotsContainer{width:100%}#screenshots img{height:180px}#buttonsContainer{display:flex;justify-content:center;bottom:0;margin-bottom:0;border-radius:0;padding-top:1em;padding-bottom:1em}#buttonsContainer #installButton{margin-right:0}#featuresScreenDiv{flex-direction:column;align-items:flex-start;margin-right:0}#headerContainer{margin:20px}#desc{display:none}#contentContainer{margin-left:20px;margin-right:20px;margin-bottom:5em}#headerContainer img{height:60px;width:60px;margin-right:12px}#buttonsContainer{position:fixed;bottom:0;background:#efefef2b;backdrop-filter:blur(10px)}}@media (max-width:400px){#headerContainer h1{font-size:26px}#headerContainer img{height:40px;width:40px}#featuresScreenDiv h3{font-size:18px;margin-bottom:0}#keyFeatures ul{margin-top:0}}@media all and (display-mode:standalone){button{display:none}}`}async firstUpdated(){if(this.manifestpath)try{await this.getManifestData()}catch(t){console.error("Error getting manifest, check that you have a valid web manifest")}"getInstalledRelatedApps"in navigator&&(this.relatedApps=await navigator.getInstalledRelatedApps())}handleInstallPromptEvent(t){this.deferredprompt=t,this.hasprompt=!0,t.preventDefault()}checkManifest(t){t.icons&&t.icons[0]?t.name?t.description||console.error("Your web manifest must have a description listed"):console.error("Your web manifest must have a name listed"):console.error("Your web manifest must have atleast one icon listed")}async getManifestData(){try{const t=await fetch(this.manifestpath),e=await t.json();if(this.manifestdata=e,this.manifestdata)return this.checkManifest(this.manifestdata),e}catch(t){return null}}scrollToLeft(){const t=this.shadowRoot.querySelector("#screenshots");t.scrollBy({left:-t.clientWidth,top:0,behavior:"smooth"})}scrollToRight(){const t=this.shadowRoot.querySelector("#screenshots");t.scrollBy({left:t.clientWidth,top:0,behavior:"smooth"})}openPrompt(){this.openmodal=!0;let t=new CustomEvent("show");this.dispatchEvent(t)}closePrompt(){this.openmodal=!1;let t=new CustomEvent("hide");this.dispatchEvent(t)}shouldShowInstall(){return this.isSupportingBrowser&&this.relatedApps.length<1&&(this.hasprompt||this.isIOS)}async install(){if(this.deferredprompt){this.deferredprompt.prompt();let t=new CustomEvent("show");this.dispatchEvent(t);if("accepted"===(await this.deferredprompt.userChoice).outcome){await this.cancel(),this.installed=!0;let t=new CustomEvent("hide");return this.dispatchEvent(t),!0}{await this.cancel(),this.installed=!0;let t=new CustomEvent("hide");return this.dispatchEvent(t),!1}}}getInstalledStatus(){return navigator.standalone?navigator.standalone:!!matchMedia("(display-mode: standalone)").matches}cancel(){return new Promise((t,e)=>{this.openmodal=!1,this.hasAttribute("openmodal")&&this.removeAttribute("openmodal");let i=new CustomEvent("hide");this.dispatchEvent(i),t()})}render(){return M`${"standalone"in navigator&&!1===navigator.standalone||!0!==this.usecustom&&this.shouldShowInstall()&&!1===this.installed?M`<button part="openButton" id="openButton" @click="${()=>this.openPrompt()}"><slot>${this.installbuttontext}</slot></button>`:null} ${!0===this.openmodal?M`<div id="installModalWrapper">${this.openmodal?M`<div id="background" @click="${()=>this.cancel()}"></div>`:null}<div id="installModal" part="installModal"><div id="headerContainer"><div id="logoContainer"><img src="${this.iconpath?this.iconpath:this.manifestdata.icons[0].src}" alt="App Logo"><div id="installTitle"><h1>${this.manifestdata.short_name||this.manifestdata.name}</h1><p id="desc">${this.explainer}</p></div></div><button id="closeButton" @click="${()=>this.cancel()}" aria-label="Close"><svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/></svg></button></div><div id="contentContainer"><div id="featuresScreenDiv">${this.manifestdata.features?M`<div id="keyFeatures"><h3>${this.featuresheader}</h3><ul>${this.manifestdata.features?this.manifestdata.features.map(t=>M`<li>${t}</li>`):null}</ul></div>`:null} ${this.manifestdata.screenshots?M`<div id="screenshotsContainer"><button @click="${()=>this.scrollToLeft()}" aria-label="previous image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"/></svg></button><section id="screenshots">${this.manifestdata.screenshots.map(t=>M`<div><img alt="App Screenshot" src="${t.src}"></div>`)}</section><button @click="${()=>this.scrollToRight()}" aria-label="next image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M284.9 412.6l138.1-134c6-5.8 9-13.7 9-22.4v-.4c0-8.7-3-16.6-9-22.4l-138.1-134c-12-12.5-31.3-12.5-43.2 0-11.9 12.5-11.9 32.7 0 45.2l83 79.4h-214c-17 0-30.7 14.3-30.7 32 0 18 13.7 32 30.6 32h214l-83 79.4c-11.9 12.5-11.9 32.7 0 45.2 12 12.5 31.3 12.5 43.3 0z"/></svg></button></div>`:null}</div><div id="descriptionWrapper"><h3>${this.descriptionheader}</h3><p id="manifest-description">${this.manifestdata.description}</p></div></div>${this.isIOS?M`<p id="iosText">${this.iosinstallinfotext}</p>`:M`<div id="buttonsContainer">${this.deferredprompt?M`<button id="installButton" @click="${()=>this.install()}">${this.installbuttontext} ${this.manifestdata.short_name}</button>`:M`<button @click="${()=>this.cancel()}" id="installCancelButton">${this.cancelbuttontext}</button>`}</div>`}</div></div>`:null}`}};var it;tt([J({type:String})],et.prototype,"manifestpath",void 0),tt([J({type:String})],et.prototype,"iconpath",void 0),tt([J({type:Object})],et.prototype,"manifestdata",void 0),tt([J({type:Boolean})],et.prototype,"openmodal",void 0),tt([J({type:Boolean})],et.prototype,"showopen",void 0),tt([J({type:Boolean})],et.prototype,"isSupportingBrowser",void 0),tt([J({type:Boolean})],et.prototype,"isIOS",void 0),tt([J({type:Boolean})],et.prototype,"installed",void 0),tt([J({type:Boolean})],et.prototype,"hasprompt",void 0),tt([J({type:Boolean})],et.prototype,"usecustom",void 0),tt([J({type:Array})],et.prototype,"relatedApps",void 0),tt([J({type:String})],et.prototype,"explainer",void 0),tt([J({type:String})],et.prototype,"featuresheader",void 0),tt([J({type:String})],et.prototype,"descriptionheader",void 0),tt([J({type:String})],et.prototype,"installbuttontext",void 0),tt([J({type:String})],et.prototype,"cancelbuttontext",void 0),tt([J({type:String})],et.prototype,"iosinstallinfotext",void 0),tt([J()],et.prototype,"deferredprompt",void 0),et=tt([(it="pwa-install",t=>"function"==typeof t?((t,e)=>(window.customElements.define(t,e),e))(it,t):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){window.customElements.define(t,e)}}})(it,t))],et);export{et as pwainstall};

20

package.json
{
"name": "@pwabuilder/pwainstall",
"version": "1.6.4",
"version": "1.6.5",
"description": "",

@@ -23,18 +23,18 @@ "main": "dist/pwa-install.js",

"devDependencies": {
"@open-wc/karma-esm": "^2.16.14",
"@open-wc/testing": "^2.5.18",
"@open-wc/testing-helpers": "^1.8.3",
"@open-wc/testing-karma": "^3.4.4",
"@rollup/plugin-strip": "^1.3.3",
"@open-wc/karma-esm": "^3.0.2",
"@open-wc/testing": "^2.5.21",
"@open-wc/testing-helpers": "^1.8.6",
"@open-wc/testing-karma": "^4.0.2",
"@rollup/plugin-strip": "^2.0.0",
"concurrently": "^5.2.0",
"deepmerge": "^4.2.2",
"es-dev-server": "^1.55.0",
"karma": "^5.1.0",
"es-dev-server": "^1.57.2",
"karma": "^5.1.1",
"karma-threshold-reporter": "^0.1.15",
"rollup": "^2.16.1",
"rollup": "^2.23.0",
"rollup-plugin-minify-html-literals": "^1.2.4",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^6.1.0",
"typescript": "^3.9.5"
"typescript": "^3.9.7"
}
}

2

README.md

@@ -11,3 +11,3 @@ # pwa-install

![An image of what the component looks like](assets/installsnip.png?raw=true "pwa-install")
<img loading="lazy" alt="An image of what the component looks like" src="https://raw.githubusercontent.com/pwa-builder/pwa-install/master/assets/installsnip.png">

@@ -14,0 +14,0 @@ ## Supported Browsers

2

rollup.config.js

@@ -12,3 +12,3 @@

format: 'es',
sourcemap: true
sourcemap: false
},

@@ -15,0 +15,0 @@ plugins: [

872

src/pwa-install.ts

@@ -1,17 +0,14 @@

import {
LitElement, html, customElement, property, css
} from 'lit-element';
import { LitElement, html, customElement, property, css } from "lit-element";
interface ManifestData {
name: string,
short_name: string,
description: string,
screenshots: Array<any>,
features: Array<any>,
icons: Array<any>
name: string;
short_name: string;
description: string;
screenshots: Array<any>;
features: Array<any>;
icons: Array<any>;
}
@customElement('pwa-install')
@customElement("pwa-install")
export class pwainstall extends LitElement {
@property({ type: String }) manifestpath: string = "manifest.json";

@@ -30,3 +27,4 @@ @property({ type: String }) iconpath: string;

@property({ type: String }) explainer: string = "This app can be installed on your PC or mobile device. This will allow this web app to look and behave like any other installed app. You will find it in your app lists and be able to pin it to your home screen, start menus or task bars. This installed web app will also be able to safely interact with other apps and your operating system. "
@property({ type: String }) explainer: string =
"This app can be installed on your PC or mobile device. This will allow this web app to look and behave like any other installed app. You will find it in your app lists and be able to pin it to your home screen, start menus or task bars. This installed web app will also be able to safely interact with other apps and your operating system. ";
@property({ type: String }) featuresheader: string = "Key Features";

@@ -36,3 +34,4 @@ @property({ type: String }) descriptionheader: string = "Description";

@property({ type: String }) cancelbuttontext: string = "Cancel";
@property({ type: String }) iosinstallinfotext: string = "Tap the share button and then 'Add to Homescreen'";
@property({ type: String }) iosinstallinfotext: string =
"Tap the share button and then 'Add to Homescreen'";

@@ -43,314 +42,317 @@ @property() deferredprompt: any;

return css`
:host {
--install-focus-color: #919c9c;
--install-button-color: #1FC2C8;
--modal-z-index: 9999;
--background-z-index: 9998;
--modal-background-color: white;
}
:host {
--install-focus-color: #919c9c;
--install-button-color: #0078d4;
--modal-z-index: 9999;
--background-z-index: 9998;
--modal-background-color: white;
}
button {
outline: none;
}
button {
outline: none;
}
#installModalWrapper {
height: 100vh;
width: 100vw;
overflow: auto;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: var(--modal-z-index);
#installModalWrapper {
height: 100vh;
width: 100vw;
overflow: auto;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: var(--modal-z-index);
display: flex;
justify-content: center;
align-items: center;
}
display: flex;
justify-content: center;
align-items: center;
}
#descriptionWrapper {
margin-bottom: 3em;
}
#descriptionWrapper {
margin-bottom: 3em;
}
#installModal {
position: absolute;
background: var(--modal-background-color);
font-family: sans-serif;
box-shadow: 0px 25px 26px rgba(32, 36, 50, 0.25), 0px 5px 9px rgba(51, 58, 83, 0.53);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 0;
#installModal {
position: absolute;
background: var(--modal-background-color);
font-family: sans-serif;
box-shadow: 0px 25px 26px rgba(32, 36, 50, 0.25),
0px 5px 9px rgba(51, 58, 83, 0.53);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 0;
animation-name: opened;
animation-duration: 150ms;
animation-name: opened;
animation-duration: 150ms;
z-index: var(--modal-z-index);
z-index: var(--modal-z-index);
max-width: 56em;
}
max-width: 56em;
}
@keyframes opened {
from {
transform: scale(0.8, 0.8);
opacity: 0.4;
@keyframes opened {
from {
transform: scale(0.8, 0.8);
opacity: 0.4;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
@keyframes mobile {
from {
opacity: 0.6;
@keyframes mobile {
from {
opacity: 0.6;
}
to {
opacity: 1;
}
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0.2;
@keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
to {
opacity: 1;
}
}
#background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #e3e3e3b0;
backdrop-filter: blur(5px);
z-index: var(--background-z-index);
#background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #e3e3e3b0;
backdrop-filter: blur(5px);
z-index: var(--background-z-index);
animation-name: fadein;
animation-duration: 250ms;
}
animation-name: fadein;
animation-duration: 250ms;
}
#headerContainer {
display: flex;
justify-content: space-between;
margin: 40px;
margin-bottom: 32px;
}
#headerContainer {
display: flex;
justify-content: space-between;
margin: 40px;
margin-bottom: 32px;
}
#headerContainer h1 {
font-size: 34px;
color: #3C3C3C;
margin-top: 20px;
margin-bottom: 7px;
}
#headerContainer h1 {
font-size: 34px;
color: #3c3c3c;
margin-top: 20px;
margin-bottom: 7px;
}
#headerContainer img {
height: 122px;
width: 122px;
background: lightgrey;
border-radius: 10px;
padding: 12px;
border-radius: 24px;
margin-right: 24px;
}
#headerContainer img {
height: 122px;
width: 122px;
background: lightgrey;
border-radius: 10px;
padding: 12px;
border-radius: 24px;
margin-right: 24px;
}
#buttonsContainer {
display: flex;
justify-content: flex-end;
position: relative;
height: 100px;
#buttonsContainer {
display: flex;
justify-content: flex-end;
position: relative;
height: 100px;
background:#dedede75;
width: 100%;
right: 0em;
border-radius: 0px 0px 12px 12px;
}
background: #dedede75;
width: 100%;
right: 0em;
border-radius: 0px 0px 12px 12px;
}
#openButton, #installButton, #installCancelButton {
text-align: center;
align-content: center;
align-self: center;
vertical-align: middle;
justify-self: flex-end;
line-height: 200%;
flex: 0 0 auto;
display: inline-block;
background: #0078d4;
color: #ffffff;
cursor: pointer;
border: solid 1px rgba(0, 0, 0, 0);
outline: none;
}
#openButton,
#installButton,
#installCancelButton {
text-align: center;
align-content: center;
align-self: center;
vertical-align: middle;
justify-self: flex-end;
line-height: 200%;
flex: 0 0 auto;
display: inline-block;
background: #0078d4;
color: #ffffff;
cursor: pointer;
border: solid 1px rgba(0, 0, 0, 0);
outline: none;
}
#openButton {
background: var(--install-button-color);
}
#openButton {
background: var(--install-button-color);
}
#installButton, #installCancelButton {
min-width: 130px;
margin-right: 30px;
background: var(--install-button-color);
border-radius: 20px;
font-weight: 600;
font-size: 14px;
line-height: 21px;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 20px;
padding-right: 20px;
outline: none;
color: white;
}
#installButton,
#installCancelButton {
min-width: 130px;
margin-right: 30px;
background: var(--install-button-color);
border-radius: 20px;
font-weight: 600;
font-size: 14px;
line-height: 21px;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 20px;
padding-right: 20px;
outline: none;
color: white;
}
#closeButton {
background: transparent;
border: none;
color: black;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 20px;
font-weight: 600;
outline: none;
cursor: pointer;
align-self: self-end;
}
#closeButton {
background: transparent;
border: none;
color: black;
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 20px;
font-weight: 600;
outline: none;
cursor: pointer;
align-self: self-end;
}
#closeButton:focus,
#installButton:focus,
#installCancelButton:focus {
box-shadow: 0 0 0 3px var(--install-focus-color);
}
#closeButton:focus,
#installButton:focus,
#installCancelButton:focus {
box-shadow: 0 0 0 3px var(--install-focus-color);
}
#contentContainer {
margin-left: 40px;
margin-right: 40px;
flex: 1;
}
#contentContainer {
margin-left: 40px;
margin-right: 40px;
flex: 1;
}
#contentContainer h3 {
font-size: 22px;
color: #3c3c3c;
margin-bottom: 12px;
}
#contentContainer h3 {
font-size: 22px;
color: #3C3C3C;
margin-bottom: 12px;
}
#contentContainer p {
font-size: 14px;
color: #3c3c3c;
}
#contentContainer p {
font-size: 14px;
color: #3C3C3C;
}
#featuresScreenDiv {
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 20px;
}
#featuresScreenDiv {
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 20px;
}
#featuresScreenDiv h3 {
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 225%;
margin-top: 0px;
}
#featuresScreenDiv h3 {
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 225%;
margin-top: 0px;
}
#keyFeatures {
overflow: hidden;
padding-right: 2em;
}
#keyFeatures {
overflow: hidden;
padding-right: 2em;
}
#keyFeatures ul {
padding-inline-start: 22px;
margin-block-start: 12px;
}
#keyFeatures ul {
padding-inline-start: 22px;
margin-block-start: 12px;
}
#featuresScreenDiv #keyFeatures li {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 29px;
color: rgba(51, 51, 51, 0.72);
}
#featuresScreenDiv #keyFeatures li {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 29px;
color: rgba(51, 51, 51, 0.72);
}
#screenshotsContainer {
max-height: 220px;
display: flex;
max-width: 30em;
}
#screenshotsContainer {
max-height: 220px;
display: flex;
max-width: 30em;
}
#screenshotsContainer button {
border: none;
width: 4em;
#screenshotsContainer button {
border: none;
width: 4em;
transition: background-color 0.2s;
}
transition: background-color 0.2s;
}
#screenshotsContainer button:focus,
#screenshotsContainer button:hover {
background-color: #bbbbbb;
}
#screenshotsContainer button:focus,
#screenshotsContainer button:hover {
background-color: #bbbbbb;
}
#screenshotsContainer button svg {
width: 28px;
fill: #6b6969;
}
#screenshotsContainer button svg {
width: 28px;
fill: #6b6969;
}
#screenshots {
display: flex;
scroll-snap-type: x mandatory;
flex-wrap: wrap;
flex-direction: column;
overflow-x: scroll;
#screenshots {
display: flex;
scroll-snap-type: x mandatory;
flex-wrap: wrap;
flex-direction: column;
overflow-x: scroll;
width: 22em;
max-height: 220px;
width: 22em;
max-height: 220px;
-webkit-overflow-scrolling: touch;
}
-webkit-overflow-scrolling: touch
}
#screenshots div {
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
#screenshots div {
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
height: 14em;
width: 100%;
height: 14em;
width: 100%;
background: #efefef;
}
background:#efefef;
}
#screenshots img {
height: 100%;
object-fit: contain;
}
#screenshots img {
height: 100%;
object-fit: contain;
}
#screenshots::-webkit-scrollbar {
display: none;
}
#screenshots::-webkit-scrollbar {
display: none;
}
#tagsDiv {
margin-top: 1em;
margin-bottom: 1em;
}
#tagsDiv {
margin-top: 1em;
margin-bottom: 1em;
}
#desc {
width: 100%;
max-width: 40em;
font-size: 14px;
color: #7e7e7e;
text-overflow: ellipsis;
overflow: hidden;
}
#desc {
width: 100%;
max-width: 40em;
font-size: 14px;
color: #7E7E7E;
text-overflow: ellipsis;
overflow: hidden;
}
#logoContainer {
display: flex;
}
#logoContainer {
display: flex;
}
#tagsDiv span {

@@ -368,31 +370,29 @@ background: grey;

#iosText {
color: var(--install-button-color);
text-align: center;
font-weight: bold;
#iosText {
color: var(--install-button-color);
text-align: center;
font-weight: bold;
position: fixed;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: blur(10px);
background: rgba(239, 239, 239, 0.17);
margin: 0;
padding: 2em;
}
position: fixed;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: blur(10px);
background: rgba(239, 239, 239, 0.17);
margin: 0;
padding: 2em;
}
#manifest-description {
white-space: pre-wrap;
}
#manifest-description {
white-space: pre-wrap;
}
@media(max-height: 780px) {
#buttonsContainer {
height: 70px;
background: transparent;
@media (max-height: 780px) {
#buttonsContainer {
height: 70px;
background: transparent;
}
}
}
@media(max-width: 1220px) {
@media (max-width: 1220px) {
#installModal {

@@ -414,3 +414,3 @@ margin: 0;

@media (max-width: 962px) {
#headerContainer h1 {
#headerContainer h1 {
margin-top: 0;

@@ -421,3 +421,3 @@ margin-bottom: 0;

#logoContainer {
align-items: center
align-items: center;
}

@@ -440,3 +440,2 @@

@media (max-width: 800px) {
#background {

@@ -446,18 +445,18 @@ display: none;

#installModal {
overflow: scroll;
box-shadow: none;
max-width: 100%;
height: 100%;
}
#installModal {
overflow: scroll;
box-shadow: none;
max-width: 100%;
height: 100%;
}
#screenshotsContainer {
width: 100%;
}
#screenshotsContainer {
width: 100%;
}
#screenshots img {
height: 180px;
}
#screenshots img {
height: 180px;
}
#buttonsContainer {
#buttonsContainer {
display: flex;

@@ -471,7 +470,7 @@ justify-content: center;

padding-bottom: 1em;
}
}
#buttonsContainer #installButton {
margin-right: 0px;
}
#buttonsContainer #installButton {
margin-right: 0px;
}

@@ -512,3 +511,3 @@ #featuresScreenDiv {

@media(max-width: 400px) {
@media (max-width: 400px) {
#headerContainer h1 {

@@ -538,3 +537,2 @@ font-size: 26px;

}
`;

@@ -547,3 +545,5 @@ }

// check for beforeinstallprompt support
this.isSupportingBrowser = window.hasOwnProperty('BeforeInstallPromptEvent');
this.isSupportingBrowser = window.hasOwnProperty(
"BeforeInstallPromptEvent"
);

@@ -554,5 +554,8 @@ // handle iOS specifically

// but not macOS
this.isIOS = navigator.userAgent.includes('iPhone')
|| navigator.userAgent.includes('iPad')
|| navigator.userAgent.includes('Macintosh') && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
this.isIOS =
navigator.userAgent.includes("iPhone") ||
navigator.userAgent.includes("iPad") ||
(navigator.userAgent.includes("Macintosh") &&
navigator.maxTouchPoints &&
navigator.maxTouchPoints > 2);

@@ -562,5 +565,7 @@ this.installed = false;

// grab an install event
window.addEventListener('beforeinstallprompt', (event) => this.handleInstallPromptEvent(event));
window.addEventListener("beforeinstallprompt", (event) =>
this.handleInstallPromptEvent(event)
);
document.addEventListener('keyup', (event) => {
document.addEventListener("keyup", (event) => {
if (event.key === "Escape") {

@@ -576,9 +581,10 @@ this.cancel();

await this.getManifestData();
} catch (err) {
console.error(
"Error getting manifest, check that you have a valid web manifest"
);
}
catch (err) {
console.error('Error getting manifest, check that you have a valid web manifest');
}
}
if ('getInstalledRelatedApps' in navigator) {
if ("getInstalledRelatedApps" in navigator) {
this.relatedApps = await (navigator as any).getInstalledRelatedApps();

@@ -600,3 +606,3 @@ }

if (!manifestData.icons || !manifestData.icons[0]) {
console.error('Your web manifest must have atleast one icon listed');
console.error("Your web manifest must have atleast one icon listed");
return;

@@ -606,3 +612,3 @@ }

if (!manifestData.name) {
console.error('Your web manifest must have a name listed');
console.error("Your web manifest must have a name listed");
return;

@@ -612,3 +618,3 @@ }

if (!manifestData.description) {
console.error('Your web manifest must have a description listed');
console.error("Your web manifest must have a description listed");
return;

@@ -630,6 +636,5 @@ }

}
} catch (err) {
return null;
}
catch (err) {
return null
}
}

@@ -642,5 +647,5 @@

// left: -15,
left: -(screenshotsDiv.clientWidth),
left: -screenshotsDiv.clientWidth,
top: 0,
behavior: 'smooth'
behavior: "smooth",
});

@@ -656,3 +661,3 @@ }

top: 0,
behavior: 'smooth'
behavior: "smooth",
});

@@ -664,3 +669,3 @@ }

let event = new CustomEvent('show');
let event = new CustomEvent("show");
this.dispatchEvent(event);

@@ -672,3 +677,3 @@ }

let event = new CustomEvent('hide');
let event = new CustomEvent("hide");
this.dispatchEvent(event);

@@ -678,3 +683,6 @@ }

shouldShowInstall() {
const eligibleUser = this.isSupportingBrowser && this.relatedApps.length < 1 && (this.hasprompt || this.isIOS);
const eligibleUser =
this.isSupportingBrowser &&
this.relatedApps.length < 1 &&
(this.hasprompt || this.isIOS);

@@ -688,3 +696,3 @@ return eligibleUser;

let event = new CustomEvent('show');
let event = new CustomEvent("show");
this.dispatchEvent(event);

@@ -694,4 +702,4 @@

if (choiceResult.outcome === 'accepted') {
console.log('Your PWA has been installed');
if (choiceResult.outcome === "accepted") {
console.log("Your PWA has been installed");

@@ -701,3 +709,3 @@ await this.cancel();

let event = new CustomEvent('hide');
let event = new CustomEvent("hide");
this.dispatchEvent(event);

@@ -707,3 +715,3 @@

} else {
console.log('User chose to not install your PWA');
console.log("User chose to not install your PWA");

@@ -717,3 +725,3 @@ await this.cancel();

let event = new CustomEvent('hide');
let event = new CustomEvent("hide");
this.dispatchEvent(event);

@@ -723,4 +731,3 @@

}
}
else {
} else {
// handle else case

@@ -735,7 +742,5 @@ }

return (navigator as any).standalone;
}
else if (matchMedia('(display-mode: standalone)').matches) {
} else if (matchMedia("(display-mode: standalone)").matches) {
return true;
}
else {
} else {
return false;

@@ -749,7 +754,7 @@ }

if (this.hasAttribute('openmodal')) {
this.removeAttribute('openmodal');
if (this.hasAttribute("openmodal")) {
this.removeAttribute("openmodal");
}
let event = new CustomEvent('hide');
let event = new CustomEvent("hide");
this.dispatchEvent(event);

@@ -763,17 +768,34 @@

return html`
${('standalone' in navigator && (navigator as any).standalone === false) || this.usecustom !== true && this.shouldShowInstall() && this.installed === false ? html`<button part="openButton" id="openButton" @click="${() => this.openPrompt()}">
<slot>
${this.installbuttontext}
</slot>
</button>` : null}
${
this.openmodal === true ?
html`
${("standalone" in navigator &&
(navigator as any).standalone === false) ||
(this.usecustom !== true &&
this.shouldShowInstall() &&
this.installed === false)
? html`<button
part="openButton"
id="openButton"
@click="${() => this.openPrompt()}"
>
<slot>
${this.installbuttontext}
</slot>
</button>`
: null}
${this.openmodal === true
? html`
<div id="installModalWrapper">
${this.openmodal ? html`<div id="background" @click="${() => this.cancel()}"></div>` : null}
${
this.openmodal
? html`<div
id="background"
@click="${() => this.cancel()}"
></div>`
: null
}
<div id="installModal" part="installModal">
<div id="headerContainer">
<div id="logoContainer">
<img src="${this.iconpath ? this.iconpath : this.manifestdata.icons[0].src}" alt="App Logo"></img>
<img src="${
this.iconpath ? this.iconpath : this.manifestdata.icons[0].src
}" alt="App Logo"/>

@@ -789,3 +811,4 @@ <div id="installTitle">

<button id="closeButton" @click="${() => this.cancel()}">
<button id="closeButton" @click="${() =>
this.cancel()}" aria-label="Close">
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">

@@ -801,35 +824,63 @@ <path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/>

${this.manifestdata.features ? html`<div id="keyFeatures">
${
this.manifestdata.features
? html`<div id="keyFeatures">
<h3>${this.featuresheader}</h3>
<ul>
${
this.manifestdata.features ? this.manifestdata.features.map((feature) => {
return html`
<li>${feature}</li>
`
}) : null
}
this.manifestdata.features
? this.manifestdata.features.map((feature) => {
return html` <li>${feature}</li> `;
})
: null
}
</ul>
</div>
</div>` : null}
</div>`
: null
}
${this.manifestdata.screenshots ?
html`
<div id="screenshotsContainer">
<button @click="${() => this.scrollToLeft()}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"/></svg>
</button>
<section id="screenshots">
${
this.manifestdata.screenshots.map((screen) => {
return html`
<div><img alt="App Screenshot" src="${screen.src}"></div>
`
})}
</section>
<button @click="${() => this.scrollToRight()}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M284.9 412.6l138.1-134c6-5.8 9-13.7 9-22.4v-.4c0-8.7-3-16.6-9-22.4l-138.1-134c-12-12.5-31.3-12.5-43.2 0-11.9 12.5-11.9 32.7 0 45.2l83 79.4h-214c-17 0-30.7 14.3-30.7 32 0 18 13.7 32 30.6 32h214l-83 79.4c-11.9 12.5-11.9 32.7 0 45.2 12 12.5 31.3 12.5 43.3 0z"/></svg>
</button>
</div>
` : null}
${
this.manifestdata.screenshots
? html`
<div id="screenshotsContainer">
<button
@click="${() => this.scrollToLeft()}"
aria-label="previous image"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"
/>
</svg>
</button>
<section id="screenshots">
${this.manifestdata.screenshots.map((screen) => {
return html`
<div>
<img alt="App Screenshot" src="${screen.src}" />
</div>
`;
})}
</section>
<button
@click="${() => this.scrollToRight()}"
aria-label="next image"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M284.9 412.6l138.1-134c6-5.8 9-13.7 9-22.4v-.4c0-8.7-3-16.6-9-22.4l-138.1-134c-12-12.5-31.3-12.5-43.2 0-11.9 12.5-11.9 32.7 0 45.2l83 79.4h-214c-17 0-30.7 14.3-30.7 32 0 18 13.7 32 30.6 32h214l-83 79.4c-11.9 12.5-11.9 32.7 0 45.2 12 12.5 31.3 12.5 43.3 0z"
/>
</svg>
</button>
</div>
`
: null
}
</div>

@@ -843,11 +894,28 @@

${!this.isIOS ? html`<div id="buttonsContainer">
${this.deferredprompt ? html`<button id="installButton" @click="${() => this.install()}">${this.installbuttontext} ${this.manifestdata.short_name}</button>` : html`<button @click="${() => this.cancel()}" id="installCancelButton">${this.cancelbuttontext}</button>`}
${
!this.isIOS
? html`<div id="buttonsContainer">
${
this.deferredprompt
? html`<button
id="installButton"
@click="${() => this.install()}"
>
${this.installbuttontext} ${this.manifestdata.short_name}
</button>`
: html`<button
@click="${() => this.cancel()}"
id="installCancelButton"
>
${this.cancelbuttontext}
</button>`
}
</div>
</div>` : html`<p id="iosText">${this.iosinstallinfotext}</p>`}
</div>`
: html`<p id="iosText">${this.iosinstallinfotext}</p>`
}
`
: null
}
: null}
`;
}
}

2

tsconfig.json

@@ -15,3 +15,3 @@ {

"esModuleInterop": true,
"sourceMap": true,
"sourceMap": false,
"rootDir": "src"

@@ -18,0 +18,0 @@ },

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc