@cell-x/caniuse-embed-element/dist/caniuse-embed-element.umd.cjs

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

(function(n,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("lit")):typeof define=="function"&&define.amd?define(["exports","lit"],l):(n=typeof globalThis<"u"?globalThis:n||self,l(n.CaniuseEmbedElement={},n.Lit))})(this,(function(n,l){"use strict";/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const P=r=>(t,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(r,t)})):customElements.define(r,t)};/**
 * @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,$=Symbol(),_=new WeakMap;let C=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==$)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(E&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=_.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&_.set(e,t))}return t}toString(){return this.cssText}};const O=r=>new C(typeof r=="string"?r:r+"",void 0,$),U=(r,t)=>{if(E)r.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of t){const s=document.createElement("style"),i=f.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,r.appendChild(s)}},S=E?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return O(e)})(r):r;/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const{is:M,defineProperty:A,getOwnPropertyDescriptor:L,getOwnPropertyNames:j,getOwnPropertySymbols:R,getPrototypeOf:T}=Object,m=globalThis,v=m.trustedTypes,z=v?v.emptyScript:"",k=m.reactiveElementPolyfillSupport,p=(r,t)=>r,y={toAttribute(r,t){switch(t){case Boolean:r=r?z:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},b=(r,t)=>!M(r,t),w={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:b};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;class u extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=w){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&A(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=L(this.prototype,t)??{get(){return this[e]},set(a){this[e]=a}};return{get:i,set(a){const h=i?.call(this);o?.call(this,a),this.requestUpdate(t,h,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??w}static _$Ei(){if(this.hasOwnProperty(p("elementProperties")))return;const t=T(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(p("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(p("properties"))){const e=this.properties,s=[...j(e),...R(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(S(i))}else t!==void 0&&e.push(S(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.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((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return U(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const o=(s.converter?.toAttribute!==void 0?s.converter:y).toAttribute(e,s.type);this._$Em=t,o==null?this.removeAttribute(i):this.setAttribute(i,o),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const o=s.getPropertyOptions(i),a=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:y;this._$Em=i;const h=a.fromAttribute(e,o.type);this[i]=h??this._$Ej?.get(i)??h,this._$Em=null}}requestUpdate(t,e,s){if(t!==void 0){const i=this.constructor,o=this[t];if(s??=i.getPropertyOptions(t),!((s.hasChanged??b)(o,e)||s.useDefault&&s.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(i._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:o},a){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,a??e??this[t]),o!==!0||a!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[i,o]of this._$Ep)this[i]=o;this._$Ep=void 0}const s=this.constructor.elementProperties;if(s.size>0)for(const[i,o]of s){const{wrapped:a}=o,h=this[i];a!==!0||this._$AL.has(i)||h===void 0||this.C(i,void 0,o,h)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((s=>s.hostUpdate?.())),this.update(e)):this._$EM()}catch(s){throw t=!1,this._$EM(),s}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}}u.elementStyles=[],u.shadowRootOptions={mode:"open"},u[p("elementProperties")]=new Map,u[p("finalized")]=new Map,k?.({ReactiveElement:u}),(m.reactiveElementVersions??=[]).push("2.1.1");/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const D={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:b},q=(r=D,t,e)=>{const{kind:s,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),s==="setter"&&((r=Object.create(r)).wrapped=!0),o.set(e.name,r),s==="accessor"){const{name:a}=e;return{set(h){const g=t.get.call(this);t.set.call(this,h),this.requestUpdate(a,g,r)},init(h){return h!==void 0&&this.C(a,void 0,r,h),h}}}if(s==="setter"){const{name:a}=e;return function(h){const g=this[a];t.call(this,h),this.requestUpdate(a,g,r)}}throw Error("Unsupported decorator location: "+s)};function d(r){return(t,e)=>typeof e=="object"?q(r,t,e):((s,i,o)=>{const a=i.hasOwnProperty(o);return i.constructor.createProperty(o,s),a?Object.getOwnPropertyDescriptor(i,o):void 0})(r,t,e)}var N=Object.defineProperty,x=Object.getOwnPropertyDescriptor,c=(r,t,e,s)=>{for(var i=s>1?void 0:s?x(t,e):t,o=r.length-1,a;o>=0;o--)(a=r[o])&&(i=(s?a(t,e,i):a(i))||i);return s&&i&&N(t,e,i),i};n.CaniuseEmbedElement=class extends l.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.loaded=!1,this._iframeHeight=500,this.handleMessage=t=>{const e=this.parseData(t.data),{type:s,payload:i={}}=e;s==="ciu_embed"&&i.feature===this.feature&&i.meta===this.meta&&(this._iframeHeight=Math.ceil(i.height),this.requestUpdate())},this.handleIframeLoad=()=>{this.loaded=!0}}connectedCallback(){super.connectedCallback(),this.setupMessageListener()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("message",this.handleMessage)}setupMessageListener(){window.addEventListener("message",this.handleMessage)}parseData(t){try{return typeof t=="string"?JSON.parse(t):t}catch{return{}}}generateSource(){if(!this.feature)return"";const t=[`meta=${this.meta}`,`past=${this.past}`,`future=${this.future}`,`theme=${this.theme}`];return`${this.origin}/${this.feature}#${t.join("&")}`}render(){const t=this.generateSource();return t?l.html`<iframe class="ciu-embed-iframe" src="${t}" height="${this._iframeHeight}" allow="fullscreen" loading="${this.loading}" @load="${this.handleIframeLoad}"></iframe>`:(this.loaded=!0,l.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>`)}},n.CaniuseEmbedElement.styles=l.css`:host{display:block;width:100%;position:relative}:host(:not([loaded]))::after{content:"Loading " attr(feature) " compatibility data";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-secondary,#919191);font-size:14px;text-align:center;pointer-events:none;opacity:1;transition:opacity .3s ease;z-index:1;animation:loading-dots 1.5s infinite}@keyframes loading-dots{0%,20%{content:"Loading " attr(feature) " compatibility data"}40%{content:"Loading " attr(feature) " compatibility data."}60%{content:"Loading " attr(feature) " compatibility data.."}100%,80%{content:"Loading " attr(feature) " compatibility data..."}}:host([loaded])::after{opacity:0}.ciu-embed-iframe{display:block;width:100%;border:none;border-radius:0;opacity:0;transition:opacity .3s ease}:host([loaded]) .ciu-embed-iframe{opacity:1}.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}`,c([d()],n.CaniuseEmbedElement.prototype,"feature",2),c([d({type:Number})],n.CaniuseEmbedElement.prototype,"past",2),c([d({type:Number})],n.CaniuseEmbedElement.prototype,"future",2),c([d()],n.CaniuseEmbedElement.prototype,"origin",2),c([d({type:String})],n.CaniuseEmbedElement.prototype,"theme",2),c([d()],n.CaniuseEmbedElement.prototype,"loading",2),c([d()],n.CaniuseEmbedElement.prototype,"meta",2),c([d({type:Boolean,reflect:!0})],n.CaniuseEmbedElement.prototype,"loaded",2),n.CaniuseEmbedElement=c([P("caniuse-embed")],n.CaniuseEmbedElement),Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));