@mochabug/adapt-web
Version:
Browser client library for Adapt automation platform
2 lines (1 loc) • 9.38 kB
JavaScript
import{AdaptWebClient}from"./index.js";const OBSERVED_ATTRIBUTES=["automation-id","session-token","auth-token","transmitter","challenge-token","requires-challenge","inherit-token","inherit-from","signals","fork-display-mode","side-by-side-split","dark-mode","auto-resizing","allow-floating","allow-docking","allow-dialog-docking","allow-minimize","allow-maximize","floating-auto-resize","confirm-on-close","persist","debug"],PRE_UPGRADE_PROPERTIES=["signals","capWidgetOptions","inheritFrom","classNames","styles","persistOptions","text","theme","onSessionCallback","onOutputCallback","onForkActiveCallback","onErrorCallback"],BaseElement=typeof HTMLElement<"u"?HTMLElement:class{};class AdaptAutomationElement extends BaseElement{constructor(){super();this._client=null;for(const property of PRE_UPGRADE_PROPERTIES)this._upgradeProperty(property)}static get observedAttributes(){return OBSERVED_ATTRIBUTES}get theme(){return this._theme}set theme(v){this._theme=v,this._client?.setTheme(v)}get automationId(){return this.getAttribute("automation-id")}set automationId(v){v===null?this.removeAttribute("automation-id"):this.setAttribute("automation-id",v)}get darkMode(){return this.hasAttribute("dark-mode")}set darkMode(v){v?this.setAttribute("dark-mode",""):this.removeAttribute("dark-mode")}get autoResizing(){return this.hasAttribute("auto-resizing")}set autoResizing(v){v?this.setAttribute("auto-resizing",""):this.removeAttribute("auto-resizing")}get allowFloating(){return!this.hasAttribute("allow-floating")||this.getAttribute("allow-floating")!=="false"}set allowFloating(v){v?this.removeAttribute("allow-floating"):this.setAttribute("allow-floating","false")}get allowDocking(){return!this.hasAttribute("allow-docking")||this.getAttribute("allow-docking")!=="false"}set allowDocking(v){v?this.removeAttribute("allow-docking"):this.setAttribute("allow-docking","false")}get allowDialogDocking(){return!this.hasAttribute("allow-dialog-docking")||this.getAttribute("allow-dialog-docking")!=="false"}set allowDialogDocking(v){v?this.removeAttribute("allow-dialog-docking"):this.setAttribute("allow-dialog-docking","false")}get allowMinimize(){return!this.hasAttribute("allow-minimize")||this.getAttribute("allow-minimize")!=="false"}set allowMinimize(v){v?this.removeAttribute("allow-minimize"):this.setAttribute("allow-minimize","false")}get allowMaximize(){return!this.hasAttribute("allow-maximize")||this.getAttribute("allow-maximize")!=="false"}set allowMaximize(v){v?this.removeAttribute("allow-maximize"):this.setAttribute("allow-maximize","false")}get floatingAutoResize(){return this.hasAttribute("floating-auto-resize")}set floatingAutoResize(v){v?this.setAttribute("floating-auto-resize",""):this.removeAttribute("floating-auto-resize")}get confirmOnClose(){return this.hasAttribute("confirm-on-close")}set confirmOnClose(v){v?this.setAttribute("confirm-on-close",""):this.removeAttribute("confirm-on-close")}get forkDisplayMode(){return this.getAttribute("fork-display-mode")==="dialog"?"dialog":"side-by-side"}set forkDisplayMode(v){this.setAttribute("fork-display-mode",v)}get persist(){return this.hasAttribute("persist")}set persist(v){v?this.setAttribute("persist",""):this.removeAttribute("persist")}get debug(){return this.hasAttribute("debug")}set debug(v){v?this.setAttribute("debug",""):this.removeAttribute("debug")}async newSession(){this._client&&await this._client.newSession()}initialize(){this._tryInit()}connectedCallback(){requestAnimationFrame(()=>this._tryInit())}disconnectedCallback(){this._destroyClient()}attributeChangedCallback(name,oldValue,newValue){if(oldValue!==newValue){if(name==="automation-id"||name==="persist"||name==="debug"){this._destroyClient(),requestAnimationFrame(()=>this._tryInit());return}if(this._client)switch(name){case"fork-display-mode":this._client.setForkDisplayMode(this.forkDisplayMode);break;case"dark-mode":this._client.setDarkMode(this.darkMode);break;case"auto-resizing":this._client.setAutoResizing(this.autoResizing);break;case"allow-floating":this._client.setAllowFloating(this.allowFloating);break;case"allow-docking":this._client.setAllowDocking(this.allowDocking);break;case"allow-dialog-docking":this._client.setAllowDialogDocking(this.allowDialogDocking);break;case"allow-minimize":this._client.setAllowMinimize(this.allowMinimize);break;case"allow-maximize":this._client.setAllowMaximize(this.allowMaximize);break;case"floating-auto-resize":this._client.setFloatingAutoResize(this.floatingAutoResize);break;case"confirm-on-close":this._client.setConfirmOnClose(this.confirmOnClose);break}}}_upgradeProperty(property){if(!Object.prototype.hasOwnProperty.call(this,property))return;const element=this,value=element[property];delete element[property],element[property]=value}_tryInit(){if(this._client||!this.isConnected)return;const automationId=this.automationId;if(!automationId){console.error(`[adapt] <adapt-automation> is missing the required "automation-id" attribute. The element will not initialize. Set it via HTML: <adapt-automation automation-id="..."> or via the Astro/React/Vue component's automationId prop.`);return}const sessionToken=this.getAttribute("session-token"),authToken=this.getAttribute("auth-token"),transmitter=this.getAttribute("transmitter"),challengeToken=this.getAttribute("challenge-token"),requiresChallenge=this.hasAttribute("requires-challenge"),inheritToken=this.getAttribute("inherit-token"),sideBySideSplitAttr=this.getAttribute("side-by-side-split");let forkDisplay;this.forkDisplayMode==="dialog"?forkDisplay={mode:"dialog"}:forkDisplay={mode:"side-by-side",...sideBySideSplitAttr!==null&&{split:Number(sideBySideSplitAttr)}};const options={container:this,automationId,forkDisplay,darkMode:this.darkMode,autoResizing:this.autoResizing,onSession:(status,fork)=>{this.onSessionCallback?.(status,fork),this.dispatchEvent(new CustomEvent("adapt-session",{detail:{status,fork},bubbles:!0}))},onOutput:output=>{this.onOutputCallback?.(output),this.dispatchEvent(new CustomEvent("adapt-output",{detail:{output},bubbles:!0}))},onForkActive:active=>{this.onForkActiveCallback?.(active),this.dispatchEvent(new CustomEvent("adapt-fork-active",{detail:{active},bubbles:!0}))},onError:error=>{this.onErrorCallback?.(error),this.dispatchEvent(new CustomEvent("adapt-error",{detail:{error},bubbles:!0}))}};this.allowFloating||(options.allowFloating=!1),this.allowDocking||(options.allowDocking=!1),this.allowDialogDocking||(options.allowDialogDocking=!1),this.allowMinimize||(options.allowMinimize=!1),this.allowMaximize||(options.allowMaximize=!1),this.floatingAutoResize&&(options.floatingAutoResize=!0),this.confirmOnClose&&(options.confirmOnClose=!0),this.debug&&(options.debug=!0),sessionToken&&(options.sessionToken=sessionToken),authToken&&(options.authToken=authToken),transmitter&&(options.transmitter=transmitter),challengeToken&&(options.challengeToken=challengeToken),requiresChallenge&&(options.requiresChallenge=!0),inheritToken&&(options.inheritToken=inheritToken);const signals=this.signals??this._parseJsonAttributeOrData("signals","adaptSignals",this._isSignals),capWidgetOptions=this.capWidgetOptions??this._parseData("adaptCapWidgetOptions"),inheritFrom=this.inheritFrom??this._parseJsonAttributeOrData("inherit-from","adaptInheritFrom",this._isInheritFrom),classNames=this.classNames??this._parseData("adaptClassNames"),text=this.text??this._parseData("adaptText"),theme=this._theme??this._parseData("adaptTheme"),persistOptions=this.persistOptions??this._parseData("adaptPersistOptions");signals!==void 0&&(options.signals=signals),capWidgetOptions!==void 0&&(options.capWidgetOptions=capWidgetOptions),inheritFrom!==void 0&&(options.inheritFrom=inheritFrom),classNames!==void 0&&(options.classNames=classNames),this.styles!==void 0&&(options.styles=this.styles),text!==void 0&&(options.text=text),theme!==void 0&&(options.theme=theme),persistOptions!==void 0?options.persist=persistOptions:this.persist&&(options.persist=!0),this._client=new AdaptWebClient(options)}_parseData(key){const raw=this.dataset[key];if(raw)try{return JSON.parse(raw)}catch{return}}_parseJsonAttributeOrData(attributeName,dataKey,validate){return this.hasAttribute(attributeName)?this._parseJsonAttribute(attributeName,validate):this._parseData(dataKey)}_parseJsonAttribute(name,validate){const raw=this.getAttribute(name);if(raw===null)return;let parsed;try{parsed=JSON.parse(raw)}catch{console.warn(`[adapt] Ignoring invalid JSON in <adapt-automation ${name}=...>.`);return}if(!validate(parsed)){console.warn(`[adapt] Ignoring invalid <adapt-automation ${name}=...> value.`);return}return parsed}_isSignals(value){return typeof value=="object"&&value!==null&&!Array.isArray(value)}_isInheritFrom(value){if(typeof value!="object"||value===null||Array.isArray(value))return!1;const candidate=value,hasHash=typeof candidate.hash=="string",hasParam=typeof candidate.param=="string";return hasHash!==hasParam}_destroyClient(){this._client&&(this._client.destroy(),this._client=null)}}if(typeof customElements<"u"&&!customElements.get("adapt-automation")){customElements.define("adapt-automation",AdaptAutomationElement);const styleId="adapt-element-display";if(!document.getElementById(styleId)){const s=document.createElement("style");s.id=styleId,s.textContent="adapt-automation, adapt-cap { display: block; }",document.head.appendChild(s)}}export{AdaptAutomationElement};