UNPKG

@cell-x/caniuse-embed-element

Version:

A custom web component that embeds caniuse.com browser compatibility data for a specific feature.

18 lines (17 loc) 11 kB
(function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("lit")):typeof define=="function"&&define.amd?define(["exports","lit"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.CaniuseEmbedElement={},a.Lit))})(this,function(a,c){"use strict";/** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */const P=r=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(r,e)}):customElements.define(r,e)};/** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause */const f=globalThis,E=f.ShadowRoot&&(f.ShadyCSS===void 0||f.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,g=Symbol(),_=new WeakMap;let C=class{constructor(e,t,s){if(this._$cssResult$=!0,s!==g)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(E&&e===void 0){const s=t!==void 0&&t.length===1;s&&(e=_.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&_.set(t,e))}return e}toString(){return this.cssText}};const O=r=>new C(typeof r=="string"?r:r+"",void 0,g),U=(r,e)=>{if(E)r.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const t of e){const s=document.createElement("style"),i=f.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=t.cssText,r.appendChild(s)}},S=E?r=>r:r=>r instanceof CSSStyleSheet?(e=>{let t="";for(const s of e.cssRules)t+=s.cssText;return O(t)})(r):r;/** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */const{is:M,defineProperty:A,getOwnPropertyDescriptor:j,getOwnPropertyNames:R,getOwnPropertySymbols:T,getPrototypeOf:z}=Object,m=globalThis,v=m.trustedTypes,D=v?v.emptyScript:"",L=m.reactiveElementPolyfillSupport,u=(r,e)=>r,y={toAttribute(r,e){switch(e){case Boolean:r=r?D:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,e){let t=r;switch(e){case Boolean:t=r!==null;break;case Number:t=r===null?null:Number(r);break;case Object:case Array:try{t=JSON.parse(r)}catch{t=null}}return t}},b=(r,e)=>!M(r,e),w={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:b};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;class p extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=w){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(e,s,t);i!==void 0&&A(this.prototype,e,i)}}static getPropertyDescriptor(e,t,s){const{get:i,set:n}=j(this.prototype,e)??{get(){return this[t]},set(o){this[t]=o}};return{get:i,set(o){const h=i?.call(this);n?.call(this,o),this.requestUpdate(e,h,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??w}static _$Ei(){if(this.hasOwnProperty(u("elementProperties")))return;const e=z(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(u("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(u("properties"))){const t=this.properties,s=[...R(t),...T(t)];for(const i of s)this.createProperty(i,t[i])}const e=this[Symbol.metadata];if(e!==null){const t=litPropertyMetadata.get(e);if(t!==void 0)for(const[s,i]of t)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);i!==void 0&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const s=new Set(e.flat(1/0).reverse());for(const i of s)t.unshift(S(i))}else e!==void 0&&t.push(S(e));return t}static _$Eu(e,t){const s=t.attribute;return s===!1?void 0:typeof s=="string"?s:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return U(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,s){this._$AK(e,s)}_$ET(e,t){const s=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,s);if(i!==void 0&&s.reflect===!0){const n=(s.converter?.toAttribute!==void 0?s.converter:y).toAttribute(t,s.type);this._$Em=e,n==null?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(e,t){const s=this.constructor,i=s._$Eh.get(e);if(i!==void 0&&this._$Em!==i){const n=s.getPropertyOptions(i),o=typeof n.converter=="function"?{fromAttribute:n.converter}:n.converter?.fromAttribute!==void 0?n.converter:y;this._$Em=i;const h=o.fromAttribute(t,n.type);this[i]=h??this._$Ej?.get(i)??h,this._$Em=null}}requestUpdate(e,t,s){if(e!==void 0){const i=this.constructor,n=this[e];if(s??=i.getPropertyOptions(e),!((s.hasChanged??b)(n,t)||s.useDefault&&s.reflect&&n===this._$Ej?.get(e)&&!this.hasAttribute(i._$Eu(e,s))))return;this.C(e,t,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,t,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,o??t??this[e]),n!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||s||(t=void 0),this._$AL.set(e,t)),i===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[i,n]of this._$Ep)this[i]=n;this._$Ep=void 0}const s=this.constructor.elementProperties;if(s.size>0)for(const[i,n]of s){const{wrapped:o}=n,h=this[i];o!==!0||this._$AL.has(i)||h===void 0||this.C(i,void 0,n,h)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(t)):this._$EM()}catch(s){throw e=!1,this._$EM(),s}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(e){}firstUpdated(e){}}p.elementStyles=[],p.shadowRootOptions={mode:"open"},p[u("elementProperties")]=new Map,p[u("finalized")]=new Map,L?.({ReactiveElement:p}),(m.reactiveElementVersions??=[]).push("2.1.1");/** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */const k={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:b},q=(r=k,e,t)=>{const{kind:s,metadata:i}=t;let n=globalThis.litPropertyMetadata.get(i);if(n===void 0&&globalThis.litPropertyMetadata.set(i,n=new Map),s==="setter"&&((r=Object.create(r)).wrapped=!0),n.set(t.name,r),s==="accessor"){const{name:o}=t;return{set(h){const $=e.get.call(this);e.set.call(this,h),this.requestUpdate(o,$,r)},init(h){return h!==void 0&&this.C(o,void 0,r,h),h}}}if(s==="setter"){const{name:o}=t;return function(h){const $=this[o];e.call(this,h),this.requestUpdate(o,$,r)}}throw Error("Unsupported decorator location: "+s)};function d(r){return(e,t)=>typeof t=="object"?q(r,e,t):((s,i,n)=>{const o=i.hasOwnProperty(n);return i.constructor.createProperty(n,s),o?Object.getOwnPropertyDescriptor(i,n):void 0})(r,e,t)}var N=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(r,e,t,s)=>{for(var i=s>1?void 0:s?x(e,t):e,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=(s?o(e,t,i):o(i))||i);return s&&i&&N(e,t,i),i};a.CaniuseEmbedElement=class extends c.LitElement{constructor(){super(...arguments),this.feature="",this.past=2,this.future=1,this.origin="https://caniuse.lruihao.cn",this.theme="auto",this.loading="lazy",this.meta=Math.random().toString(36).slice(2),this._iframeHeight=500,this.handleMessage=e=>{const t=this.parseData(e.data),{type:s,payload:i={}}=t;s==="ciu_embed"&&i.feature===this.feature&&i.meta===this.meta&&(this._iframeHeight=Math.ceil(i.height),this.requestUpdate())}}connectedCallback(){super.connectedCallback(),this.setupMessageListener()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("message",this.handleMessage)}setupMessageListener(){window.addEventListener("message",this.handleMessage)}parseData(e){try{return typeof e=="string"?JSON.parse(e):e}catch{return{}}}generateSource(){if(!this.feature)return"";const e=[`meta=${this.meta}`,`past=${this.past}`,`future=${this.future}`,`theme=${this.theme}`];return`${this.origin}/${this.feature}#${e.join("&")}`}render(){const e=this.generateSource();return e?c.html`<iframe class="ciu-embed-iframe" src="${e}" height="${this._iframeHeight}" allow="fullscreen" loading="${this.loading}"></iframe>`:c.html`<p class="ciu-embed-empty"><span>Data on support for the features across the major browsers from <a href="https://caniuse.com" target="_blank">caniuse.com</a>.</span><br><span>[ The feature parameter is required! ]</span></p>`}},a.CaniuseEmbedElement.styles=c.css`:host { display: block; width: 100%; }.ciu-embed-iframe { display: block; width: 100%; border: none; border-radius: 0; }.ciu-embed-empty { color: var(--text-secondary, #919191); text-align: center; font-size: 12px; }.ciu-embed-empty a { color: inherit; text-decoration: none; }.ciu-embed-empty a:hover { text-decoration: underline; }`,l([d()],a.CaniuseEmbedElement.prototype,"feature",2),l([d({type:Number})],a.CaniuseEmbedElement.prototype,"past",2),l([d({type:Number})],a.CaniuseEmbedElement.prototype,"future",2),l([d()],a.CaniuseEmbedElement.prototype,"origin",2),l([d({type:String})],a.CaniuseEmbedElement.prototype,"theme",2),l([d()],a.CaniuseEmbedElement.prototype,"loading",2),l([d()],a.CaniuseEmbedElement.prototype,"meta",2),a.CaniuseEmbedElement=l([P("caniuse-embed")],a.CaniuseEmbedElement),Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});