begin-widgets
Version:
Easily embed powerful workflow building and running capabilities into your web applications with Lit-based web components. Includes HTML export for server-side PDF generation.
723 lines (647 loc) • 180 kB
JavaScript
(function(A,ie){typeof exports=="object"&&typeof module<"u"?ie(exports):typeof define=="function"&&define.amd?define(["exports"],ie):(A=typeof globalThis<"u"?globalThis:A||self,ie(A.Begin={}))})(this,function(A){"use strict";/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/var mt,ft,gt,bt,_t;const ne=globalThis,fe=ne.ShadowRoot&&(ne.ShadyCSS===void 0||ne.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ge=Symbol(),Fe=new WeakMap;class Ne{constructor(e,t,n){if(this._$cssResult$=!0,n!==ge)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this._strings=t}get styleSheet(){let e=this._styleSheet;const t=this._strings;if(fe&&e===void 0){const n=t!==void 0&&t.length===1;n&&(e=Fe.get(t)),e===void 0&&((this._styleSheet=e=new CSSStyleSheet).replaceSync(this.cssText),n&&Fe.set(t,e))}return e}toString(){return this.cssText}}const yt=i=>{if(i._$cssResult$===!0)return i.cssText;if(typeof i=="number")return i;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${i}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)},St=i=>new Ne(typeof i=="string"?i:String(i),void 0,ge),G=(i,...e)=>{const t=i.length===1?i[0]:e.reduce((n,s,r)=>n+yt(s)+i[r+1],i[0]);return new Ne(t,i,ge)},wt=(i,e)=>{if(fe)i.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const t of e){const n=document.createElement("style"),s=ne.litNonce;s!==void 0&&n.setAttribute("nonce",s),n.textContent=t.cssText,i.appendChild(n)}},kt=i=>{let e="";for(const t of i.cssRules)e+=t.cssText;return St(e)},Le=fe?i=>i:i=>i instanceof CSSStyleSheet?kt(i):i;/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{is:$t,defineProperty:Et,getOwnPropertyDescriptor:Re,getOwnPropertyNames:Dt,getOwnPropertySymbols:Ct,getPrototypeOf:Oe}=Object,S=globalThis;let T;const We=S.trustedTypes,Tt=We?We.emptyScript:"",se=S.reactiveElementPolyfillSupportDevMode;S.litIssuedWarnings??(S.litIssuedWarnings=new Set),T=(i,e)=>{e+=` See https://lit.dev/msg/${i} for more information.`,!S.litIssuedWarnings.has(e)&&!S.litIssuedWarnings.has(i)&&(console.warn(e),S.litIssuedWarnings.add(e))},queueMicrotask(()=>{var i;T("dev-mode","Lit is in dev mode. Not recommended for production!"),(i=S.ShadyDOM)!=null&&i.inUse&&se===void 0&&T("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const be=i=>{S.emitLitDebugLogEvents&&S.dispatchEvent(new CustomEvent("lit-debug",{detail:i}))},Q=(i,e)=>i,re={toAttribute(i,e){switch(e){case Boolean:i=i?Tt:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i);break}return i},fromAttribute(i,e){let t=i;switch(e){case Boolean:t=i!==null;break;case Number:t=i===null?null:Number(i);break;case Object:case Array:try{t=JSON.parse(i)}catch{t=null}break}return t}},_e=(i,e)=>!$t(i,e),Ve={attribute:!0,type:String,converter:re,reflect:!1,useDefault:!1,hasChanged:_e};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),S.litPropertyMetadata??(S.litPropertyMetadata=new WeakMap);class z extends HTMLElement{static addInitializer(e){this.__prepare(),(this._initializers??(this._initializers=[])).push(e)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(e,t=Ve){if(t.state&&(t.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(e)&&(t=Object.create(t),t.wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const n=Symbol.for(`${String(e)} (@property() cache)`),s=this.getPropertyDescriptor(e,n,t);s!==void 0&&Et(this.prototype,e,s)}}static getPropertyDescriptor(e,t,n){const{get:s,set:r}=Re(this.prototype,e)??{get(){return this[t]},set(o){this[t]=o}};if(s==null){if("value"in(Re(this.prototype,e)??{}))throw new Error(`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);T("reactive-property-without-getter",`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:s,set(o){const a=s==null?void 0:s.call(this);r==null||r.call(this,o),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ve}static __prepare(){if(this.hasOwnProperty(Q("elementProperties")))return;const e=Oe(this);e.finalize(),e._initializers!==void 0&&(this._initializers=[...e._initializers]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(Q("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(Q("properties"))){const t=this.properties,n=[...Dt(t),...Ct(t)];for(const s of n)this.createProperty(s,t[s])}const e=this[Symbol.metadata];if(e!==null){const t=litPropertyMetadata.get(e);if(t!==void 0)for(const[n,s]of t)this.elementProperties.set(n,s)}this.__attributeToPropertyMap=new Map;for(const[t,n]of this.elementProperties){const s=this.__attributeNameForProperty(t,n);s!==void 0&&this.__attributeToPropertyMap.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&T("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&T("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const n=new Set(e.flat(1/0).reverse());for(const s of n)t.unshift(Le(s))}else e!==void 0&&t.push(Le(e));return t}static __attributeNameForProperty(e,t){const n=t.attribute;return n===!1?void 0:typeof n=="string"?n:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){var e;this.__updatePromise=new Promise(t=>this.enableUpdating=t),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),(e=this.constructor._initializers)==null||e.forEach(t=>t(this))}addController(e){var t;(this.__controllers??(this.__controllers=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&((t=e.hostConnected)==null||t.call(e))}removeController(e){var t;(t=this.__controllers)==null||t.delete(e)}__saveInstanceProperties(){const e=new Map,t=this.constructor.elementProperties;for(const n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this.__instanceProperties=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return wt(e,this.constructor.elementStyles),e}connectedCallback(){var e;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(e=this.__controllers)==null||e.forEach(t=>{var n;return(n=t.hostConnected)==null?void 0:n.call(t)})}enableUpdating(e){}disconnectedCallback(){var e;(e=this.__controllers)==null||e.forEach(t=>{var n;return(n=t.hostDisconnected)==null?void 0:n.call(t)})}attributeChangedCallback(e,t,n){this._$attributeToProperty(e,n)}__propertyToAttribute(e,t){var o;const s=this.constructor.elementProperties.get(e),r=this.constructor.__attributeNameForProperty(e,s);if(r!==void 0&&s.reflect===!0){const d=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:re).toAttribute(t,s.type);this.constructor.enabledWarnings.includes("migration")&&d===void 0&&T("undefined-attribute-value",`The attribute value for the ${e} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=e,d==null?this.removeAttribute(r):this.setAttribute(r,d),this.__reflectingProperty=null}}_$attributeToProperty(e,t){var r,o;const n=this.constructor,s=n.__attributeToPropertyMap.get(e);if(s!==void 0&&this.__reflectingProperty!==s){const a=n.getPropertyOptions(s),d=typeof a.converter=="function"?{fromAttribute:a.converter}:((r=a.converter)==null?void 0:r.fromAttribute)!==void 0?a.converter:re;this.__reflectingProperty=s,this[s]=d.fromAttribute(t,a.type)??((o=this.__defaultValues)==null?void 0:o.get(s))??null,this.__reflectingProperty=null}}requestUpdate(e,t,n){var s;if(e!==void 0){e instanceof Event&&T("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor,o=this[e];if(n??(n=r.getPropertyOptions(e)),(n.hasChanged??_e)(o,t)||n.useDefault&&n.reflect&&o===((s=this.__defaultValues)==null?void 0:s.get(e))&&!this.hasAttribute(r.__attributeNameForProperty(e,n)))this._$changeProperty(e,t,n);else return}this.isUpdatePending===!1&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(e,t,{useDefault:n,reflect:s,wrapped:r},o){n&&!(this.__defaultValues??(this.__defaultValues=new Map)).has(e)&&(this.__defaultValues.set(e,o??t??this[e]),r!==!0||o!==void 0)||(this._$changedProperties.has(e)||(!this.hasUpdated&&!n&&(t=void 0),this._$changedProperties.set(e,t)),s===!0&&this.__reflectingProperty!==e&&(this.__reflectingProperties??(this.__reflectingProperties=new Set)).add(e))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(t){Promise.reject(t)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){const e=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&typeof(e==null?void 0:e.then)=="function"&&T("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),e}performUpdate(){var n;if(!this.isUpdatePending)return;if(be==null||be({kind:"update"}),!this.hasUpdated){this.renderRoot??(this.renderRoot=this.createRenderRoot());{const o=[...this.constructor.elementProperties.keys()].filter(a=>this.hasOwnProperty(a)&&a in Oe(this));if(o.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${o.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[r,o]of this.__instanceProperties)this[r]=o;this.__instanceProperties=void 0}const s=this.constructor.elementProperties;if(s.size>0)for(const[r,o]of s){const{wrapped:a}=o,d=this[r];a===!0&&!this._$changedProperties.has(r)&&d!==void 0&&this._$changeProperty(r,void 0,o,d)}}let e=!1;const t=this._$changedProperties;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),(n=this.__controllers)==null||n.forEach(s=>{var r;return(r=s.hostUpdate)==null?void 0:r.call(s)}),this.update(t)):this.__markUpdated()}catch(s){throw e=!1,this.__markUpdated(),s}e&&this._$didUpdate(t)}willUpdate(e){}_$didUpdate(e){var t;(t=this.__controllers)==null||t.forEach(n=>{var s;return(s=n.hostUpdated)==null?void 0:s.call(n)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&T("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(e){return!0}update(e){this.__reflectingProperties&&(this.__reflectingProperties=this.__reflectingProperties.forEach(t=>this.__propertyToAttribute(t,this[t]))),this.__markUpdated()}updated(e){}firstUpdated(e){}}z.elementStyles=[],z.shadowRootOptions={mode:"open"},z[Q("elementProperties")]=new Map,z[Q("finalized")]=new Map,se==null||se({ReactiveElement:z});{z.enabledWarnings=["change-in-update","async-perform-update"];const i=function(e){e.hasOwnProperty(Q("enabledWarnings"))||(e.enabledWarnings=e.enabledWarnings.slice())};z.enableWarning=function(e){i(this),this.enabledWarnings.includes(e)||this.enabledWarnings.push(e)},z.disableWarning=function(e){i(this);const t=this.enabledWarnings.indexOf(e);t>=0&&this.enabledWarnings.splice(t,1)}}(S.reactiveElementVersions??(S.reactiveElementVersions=[])).push("2.1.0"),S.reactiveElementVersions.length>1&&queueMicrotask(()=>{T("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const w=globalThis,b=i=>{w.emitLitDebugLogEvents&&w.dispatchEvent(new CustomEvent("lit-debug",{detail:i}))};let Pt=0,K;w.litIssuedWarnings??(w.litIssuedWarnings=new Set),K=(i,e)=>{e+=i?` See https://lit.dev/msg/${i} for more information.`:"",!w.litIssuedWarnings.has(e)&&!w.litIssuedWarnings.has(i)&&(console.warn(e),w.litIssuedWarnings.add(e))},queueMicrotask(()=>{K("dev-mode","Lit is in dev mode. Not recommended for production!")});const P=(mt=w.ShadyDOM)!=null&&mt.inUse&&((ft=w.ShadyDOM)==null?void 0:ft.noPatch)===!0?w.ShadyDOM.wrap:i=>i,oe=w.trustedTypes,He=oe?oe.createPolicy("lit-html",{createHTML:i=>i}):void 0,It=i=>i,ae=(i,e,t)=>It,Mt=i=>{if(j!==ae)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");j=i},At=()=>{j=ae},xe=(i,e,t)=>j(i,e,t),je="$lit$",F=`lit$${Math.random().toFixed(9).slice(2)}$`,Be="?"+F,Ut=`<${Be}>`,W=document,X=()=>W.createComment(""),Z=i=>i===null||typeof i!="object"&&typeof i!="function",ve=Array.isArray,zt=i=>ve(i)||typeof(i==null?void 0:i[Symbol.iterator])=="function",ye=`[
\f\r]`,Ft=`[^
\f\r"'\`<>=]`,Nt=`[^\\s"'>=/]`,q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ge=1,Se=2,Lt=3,Qe=/-->/g,Ye=/>/g,V=new RegExp(`>|${ye}(?:(${Nt}+)(${ye}*=${ye}*(?:${Ft}|("|')|))|$)`,"g"),Rt=0,Je=1,Ot=2,Ke=3,we=/'/g,ke=/"/g,Xe=/^(?:script|style|textarea|title)$/i,Wt=1,$e=2,Ee=3,De=1,de=2,Vt=3,Ht=4,jt=5,Ce=6,Bt=7,c=(i=>(e,...t)=>(e.some(n=>n===void 0)&&console.warn(`Some template strings are undefined.
This is probably caused by illegal octal escape sequences.`),t.some(n=>n==null?void 0:n._$litStatic$)&&K("",`Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.
Please use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions`),{_$litType$:i,strings:e,values:t}))(Wt),R=Symbol.for("lit-noChange"),v=Symbol.for("lit-nothing"),Ze=new WeakMap,H=W.createTreeWalker(W,129);let j=ae;function qe(i,e){if(!ve(i)||!i.hasOwnProperty("raw")){let t="invalid template strings array";throw t=`
Internal Error: expected template strings to be an array
with a 'raw' field. Faking a template strings array by
calling html or svg like an ordinary function is effectively
the same as calling unsafeHtml and can lead to major security
issues, e.g. opening your code up to XSS attacks.
If you're using the html or svg tagged template functions normally
and still seeing this error, please file a bug at
https://github.com/lit/lit/issues/new?template=bug_report.md
and include information about your build tooling, if any.
`.trim().replace(/\n */g,`
`),new Error(t)}return He!==void 0?He.createHTML(e):e}const Gt=(i,e)=>{const t=i.length-1,n=[];let s=e===$e?"<svg>":e===Ee?"<math>":"",r,o=q;for(let d=0;d<t;d++){const l=i[d];let h=-1,p,u=0,m;for(;u<l.length&&(o.lastIndex=u,m=o.exec(l),m!==null);)if(u=o.lastIndex,o===q){if(m[Ge]==="!--")o=Qe;else if(m[Ge]!==void 0)o=Ye;else if(m[Se]!==void 0)Xe.test(m[Se])&&(r=new RegExp(`</${m[Se]}`,"g")),o=V;else if(m[Lt]!==void 0)throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else o===V?m[Rt]===">"?(o=r??q,h=-1):m[Je]===void 0?h=-2:(h=o.lastIndex-m[Ot].length,p=m[Je],o=m[Ke]===void 0?V:m[Ke]==='"'?ke:we):o===ke||o===we?o=V:o===Qe||o===Ye?o=q:(o=V,r=void 0);console.assert(h===-1||o===V||o===we||o===ke,"unexpected parse state B");const f=o===V&&i[d+1].startsWith("/>")?" ":"";s+=o===q?l+Ut:h>=0?(n.push(p),l.slice(0,h)+je+l.slice(h)+F+f):l+F+(h===-2?d:f)}const a=s+(i[t]||"<?>")+(e===$e?"</svg>":e===Ee?"</math>":"");return[qe(i,a),n]};class ee{constructor({strings:e,["_$litType$"]:t},n){this.parts=[];let s,r=0,o=0;const a=e.length-1,d=this.parts,[l,h]=Gt(e,t);if(this.el=ee.createElement(l,n),H.currentNode=this.el.content,t===$e||t===Ee){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(s=H.nextNode())!==null&&d.length<a;){if(s.nodeType===1){{const p=s.localName;if(/^(?:textarea|template)$/i.test(p)&&s.innerHTML.includes(F)){const u=`Expressions are not supported inside \`${p}\` elements. See https://lit.dev/msg/expression-in-${p} for more information.`;if(p==="template")throw new Error(u);K("",u)}}if(s.hasAttributes())for(const p of s.getAttributeNames())if(p.endsWith(je)){const u=h[o++],f=s.getAttribute(p).split(F),_=/([.?@])?(.*)/.exec(u);d.push({type:De,index:r,name:_[2],strings:f,ctor:_[1]==="."?Yt:_[1]==="?"?Jt:_[1]==="@"?Kt:ce}),s.removeAttribute(p)}else p.startsWith(F)&&(d.push({type:Ce,index:r}),s.removeAttribute(p));if(Xe.test(s.tagName)){const p=s.textContent.split(F),u=p.length-1;if(u>0){s.textContent=oe?oe.emptyScript:"";for(let m=0;m<u;m++)s.append(p[m],X()),H.nextNode(),d.push({type:de,index:++r});s.append(p[u],X())}}}else if(s.nodeType===8)if(s.data===Be)d.push({type:de,index:r});else{let u=-1;for(;(u=s.data.indexOf(F,u+1))!==-1;)d.push({type:Bt,index:r}),u+=F.length-1}r++}if(h.length!==o)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");b&&b({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const n=W.createElement("template");return n.innerHTML=e,n}}function Y(i,e,t=i,n){var o,a;if(e===R)return e;let s=n!==void 0?(o=t.__directives)==null?void 0:o[n]:t.__directive;const r=Z(e)?void 0:e._$litDirective$;return(s==null?void 0:s.constructor)!==r&&((a=s==null?void 0:s._$notifyDirectiveConnectionChanged)==null||a.call(s,!1),r===void 0?s=void 0:(s=new r(i),s._$initialize(i,t,n)),n!==void 0?(t.__directives??(t.__directives=[]))[n]=s:t.__directive=s),s!==void 0&&(e=Y(i,s._$resolve(i,e.values),s,n)),e}class Qt{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:n}=this._$template,s=((e==null?void 0:e.creationScope)??W).importNode(t,!0);H.currentNode=s;let r=H.nextNode(),o=0,a=0,d=n[0];for(;d!==void 0;){if(o===d.index){let l;d.type===de?l=new le(r,r.nextSibling,this,e):d.type===De?l=new d.ctor(r,d.name,d.strings,this,e):d.type===Ce&&(l=new Xt(r,this,e)),this._$parts.push(l),d=n[++a]}o!==(d==null?void 0:d.index)&&(r=H.nextNode(),o++)}return H.currentNode=W,s}_update(e){let t=0;for(const n of this._$parts)n!==void 0&&(b&&b({kind:"set part",part:n,value:e[t],valueIndex:t,values:e,templateInstance:this}),n.strings!==void 0?(n._$setValue(e,n,t),t+=n.strings.length-2):n._$setValue(e[t])),t++}}let le=class vt{get _$isConnected(){var e;return((e=this._$parent)==null?void 0:e._$isConnected)??this.__isConnected}constructor(e,t,n,s){this.type=de,this._$committedValue=v,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=n,this.options=s,this.__isConnected=(s==null?void 0:s.isConnected)??!0,this._textSanitizer=void 0}get parentNode(){let e=P(this._$startNode).parentNode;const t=this._$parent;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){var n;if(this.parentNode===null)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=Y(this,e,t),Z(e))e===v||e==null||e===""?(this._$committedValue!==v&&(b&&b({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=v):e!==this._$committedValue&&e!==R&&this._commitText(e);else if(e._$litType$!==void 0)this._commitTemplateResult(e);else if(e.nodeType!==void 0){if(((n=this.options)==null?void 0:n.host)===e){this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");return}this._commitNode(e)}else zt(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return P(P(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){var t;if(this._$committedValue!==e){if(this._$clear(),j!==ae){const n=(t=this._$startNode.parentNode)==null?void 0:t.nodeName;if(n==="STYLE"||n==="SCRIPT"){let s="Forbidden";throw n==="STYLE"?s="Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":s="Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(s)}}b&&b({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==v&&Z(this._$committedValue)){const t=P(this._$startNode).nextSibling;this._textSanitizer===void 0&&(this._textSanitizer=xe(t,"data","property")),e=this._textSanitizer(e),b&&b({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=W.createTextNode("");this._commitNode(t),this._textSanitizer===void 0&&(this._textSanitizer=xe(t,"data","property")),e=this._textSanitizer(e),b&&b({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){var r;const{values:t,["_$litType$"]:n}=e,s=typeof n=="number"?this._$getTemplate(e):(n.el===void 0&&(n.el=ee.createElement(qe(n.h,n.h[0]),this.options)),n);if(((r=this._$committedValue)==null?void 0:r._$template)===s)b&&b({kind:"template updating",template:s,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const o=new Qt(s,this),a=o._clone(this.options);b&&b({kind:"template instantiated",template:s,instance:o,parts:o._$parts,options:this.options,fragment:a,values:t}),o._update(t),b&&b({kind:"template instantiated and updated",template:s,instance:o,parts:o._$parts,options:this.options,fragment:a,values:t}),this._commitNode(a),this._$committedValue=o}}_$getTemplate(e){let t=Ze.get(e.strings);return t===void 0&&Ze.set(e.strings,t=new ee(e)),t}_commitIterable(e){ve(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let n=0,s;for(const r of e)n===t.length?t.push(s=new vt(this._insert(X()),this._insert(X()),this,this.options)):s=t[n],s._$setValue(r),n++;n<t.length&&(this._$clear(s&&P(s._$endNode).nextSibling,n),t.length=n)}_$clear(e=P(this._$startNode).nextSibling,t){var n;for((n=this._$notifyConnectionChanged)==null||n.call(this,!1,!0,t);e&&e!==this._$endNode;){const s=P(e).nextSibling;P(e).remove(),e=s}}setConnected(e){var t;if(this._$parent===void 0)this.__isConnected=e,(t=this._$notifyConnectionChanged)==null||t.call(this,e);else throw new Error("part.setConnected() may only be called on a RootPart returned from render().")}};class ce{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,n,s,r){this.type=De,this._$committedValue=v,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=s,this.options=r,n.length>2||n[0]!==""||n[1]!==""?(this._$committedValue=new Array(n.length-1).fill(new String),this.strings=n):this._$committedValue=v,this._sanitizer=void 0}_$setValue(e,t=this,n,s){const r=this.strings;let o=!1;if(r===void 0)e=Y(this,e,t,0),o=!Z(e)||e!==this._$committedValue&&e!==R,o&&(this._$committedValue=e);else{const a=e;e=r[0];let d,l;for(d=0;d<r.length-1;d++)l=Y(this,a[n+d],t,d),l===R&&(l=this._$committedValue[d]),o||(o=!Z(l)||l!==this._$committedValue[d]),l===v?e=v:e!==v&&(e+=(l??"")+r[d+1]),this._$committedValue[d]=l}o&&!s&&this._commitValue(e)}_commitValue(e){e===v?P(this.element).removeAttribute(this.name):(this._sanitizer===void 0&&(this._sanitizer=j(this.element,this.name,"attribute")),e=this._sanitizer(e??""),b&&b({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),P(this.element).setAttribute(this.name,e??""))}}class Yt extends ce{constructor(){super(...arguments),this.type=Vt}_commitValue(e){this._sanitizer===void 0&&(this._sanitizer=j(this.element,this.name,"property")),e=this._sanitizer(e),b&&b({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===v?void 0:e}}class Jt extends ce{constructor(){super(...arguments),this.type=Ht}_commitValue(e){b&&b({kind:"commit boolean attribute",element:this.element,name:this.name,value:!!(e&&e!==v),options:this.options}),P(this.element).toggleAttribute(this.name,!!e&&e!==v)}}class Kt extends ce{constructor(e,t,n,s,r){if(super(e,t,n,s,r),this.type=jt,this.strings!==void 0)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if(e=Y(this,e,t,0)??v,e===R)return;const n=this._$committedValue,s=e===v&&n!==v||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,r=e!==v&&(n===v||s);b&&b({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:s,addListener:r,oldListener:n}),s&&this.element.removeEventListener(this.name,this,n),r&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){var t;typeof this._$committedValue=="function"?this._$committedValue.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$committedValue.handleEvent(e)}}class Xt{constructor(e,t,n){this.element=e,this.type=Ce,this._$disconnectableChildren=void 0,this._$parent=t,this.options=n}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){b&&b({kind:"commit to element binding",element:this.element,value:e,options:this.options}),Y(this,e)}}const Zt={_ChildPart:le},Te=w.litHtmlPolyfillSupportDevMode;Te==null||Te(ee,le),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.3.0"),w.litHtmlVersions.length>1&&queueMicrotask(()=>{K("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const pe=(i,e,t)=>{if(e==null)throw new TypeError(`The container to render into may not be ${e}`);const n=Pt++,s=(t==null?void 0:t.renderBefore)??e;let r=s._$litPart$;if(b&&b({kind:"begin render",id:n,value:i,container:e,options:t,part:r}),r===void 0){const o=(t==null?void 0:t.renderBefore)??null;s._$litPart$=r=new le(e.insertBefore(X(),o),o,void 0,t??{})}return r._$setValue(i),b&&b({kind:"end render",id:n,value:i,container:e,options:t,part:r}),r};pe.setSanitizer=Mt,pe.createSanitizer=xe,pe._testOnlyClearSanitizerFactoryDoNotCallOrElse=At;/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const qt=(i,e)=>i,D=globalThis;let et;D.litIssuedWarnings??(D.litIssuedWarnings=new Set),et=(i,e)=>{e+=` See https://lit.dev/msg/${i} for more information.`,!D.litIssuedWarnings.has(e)&&!D.litIssuedWarnings.has(i)&&(console.warn(e),D.litIssuedWarnings.add(e))};class J extends z{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=pe(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),(e=this.__childPart)==null||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.__childPart)==null||e.setConnected(!1)}render(){return R}}J._$litElement$=!0,J[qt("finalized")]=!0,(gt=D.litElementHydrateSupport)==null||gt.call(D,{LitElement:J});const Pe=D.litElementPolyfillSupportDevMode;Pe==null||Pe({LitElement:J}),(D.litElementVersions??(D.litElementVersions=[])).push("4.2.0"),D.litElementVersions.length>1&&queueMicrotask(()=>{et("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const tt=i=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(i,e)}):customElements.define(i,e)};/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let it;globalThis.litIssuedWarnings??(globalThis.litIssuedWarnings=new Set),it=(i,e)=>{e+=` See https://lit.dev/msg/${i} for more information.`,!globalThis.litIssuedWarnings.has(e)&&!globalThis.litIssuedWarnings.has(i)&&(console.warn(e),globalThis.litIssuedWarnings.add(e))};const ei=(i,e,t)=>{const n=e.hasOwnProperty(t);return e.constructor.createProperty(t,i),n?Object.getOwnPropertyDescriptor(e,t):void 0},ti={attribute:!0,type:String,converter:re,reflect:!1,hasChanged:_e},ii=(i=ti,e,t)=>{const{kind:n,metadata:s}=t;s==null&&it("missing-class-metadata",`The class ${e} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let r=globalThis.litPropertyMetadata.get(s);if(r===void 0&&globalThis.litPropertyMetadata.set(s,r=new Map),n==="setter"&&(i=Object.create(i),i.wrapped=!0),r.set(t.name,i),n==="accessor"){const{name:o}=t;return{set(a){const d=e.get.call(this);e.set.call(this,a),this.requestUpdate(o,d,i)},init(a){return a!==void 0&&this._$changeProperty(o,void 0,i,a),a}}}else if(n==="setter"){const{name:o}=t;return function(a){const d=this[o];e.call(this,a),this.requestUpdate(o,d,i)}}throw new Error(`Unsupported decorator location: ${n}`)};function U(i){return(e,t)=>typeof t=="object"?ii(i,e,t):ei(i,e,t)}/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/function k(i){return U({...i,state:!0,attribute:!1})}/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/globalThis.litIssuedWarnings??(globalThis.litIssuedWarnings=new Set);/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const nt={CHILD:2},st=i=>(...e)=>({_$litDirective$:i,values:e});class rt{constructor(e){}get _$isConnected(){return this._$parent._$isConnected}_$initialize(e,t,n){this.__part=e,this._$parent=t,this.__attributeIndex=n}_$resolve(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{_ChildPart:ni}=Zt,N=(bt=window.ShadyDOM)!=null&&bt.inUse&&((_t=window.ShadyDOM)==null?void 0:_t.noPatch)===!0?window.ShadyDOM.wrap:i=>i,ot=()=>document.createComment(""),te=(i,e,t)=>{var r;const n=N(i._$startNode).parentNode,s=e===void 0?i._$endNode:e._$startNode;if(t===void 0){const o=N(n).insertBefore(ot(),s),a=N(n).insertBefore(ot(),s);t=new ni(o,a,i,i.options)}else{const o=N(t._$endNode).nextSibling,a=t._$parent,d=a!==i;if(d){(r=t._$reparentDisconnectables)==null||r.call(t,i),t._$parent=i;let l;t._$notifyConnectionChanged!==void 0&&(l=i._$isConnected)!==a._$isConnected&&t._$notifyConnectionChanged(l)}if(o!==s||d){let l=t._$startNode;for(;l!==o;){const h=N(l).nextSibling;N(n).insertBefore(l,s),l=h}}}return t},B=(i,e,t=i)=>(i._$setValue(e,t),i),si={},ri=(i,e=si)=>i._$committedValue=e,oi=i=>i._$committedValue,Ie=i=>{var n;(n=i._$notifyConnectionChanged)==null||n.call(i,!1,!0);let e=i._$startNode;const t=N(i._$endNode).nextSibling;for(;e!==t;){const s=N(e).nextSibling;N(e).remove(),e=s}};/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const at=(i,e,t)=>{const n=new Map;for(let s=e;s<=t;s++)n.set(i[s],s);return n};class ai extends rt{constructor(e){if(super(e),e.type!==nt.CHILD)throw new Error("repeat() can only be used in text expressions")}_getValuesAndKeys(e,t,n){let s;n===void 0?n=t:t!==void 0&&(s=t);const r=[],o=[];let a=0;for(const d of e)r[a]=s?s(d,a):a,o[a]=n(d,a),a++;return{values:o,keys:r}}render(e,t,n){return this._getValuesAndKeys(e,t,n).values}update(e,[t,n,s]){const r=oi(e),{values:o,keys:a}=this._getValuesAndKeys(t,n,s);if(!Array.isArray(r))return this._itemKeys=a,o;const d=this._itemKeys??(this._itemKeys=[]),l=[];let h,p,u=0,m=r.length-1,f=0,_=o.length-1;for(;u<=m&&f<=_;)if(r[u]===null)u++;else if(r[m]===null)m--;else if(d[u]===a[f])l[f]=B(r[u],o[f]),u++,f++;else if(d[m]===a[_])l[_]=B(r[m],o[_]),m--,_--;else if(d[u]===a[_])l[_]=B(r[u],o[_]),te(e,l[_+1],r[u]),u++,_--;else if(d[m]===a[f])l[f]=B(r[m],o[f]),te(e,r[u],r[m]),m--,f++;else if(h===void 0&&(h=at(a,f,_),p=at(d,u,m)),!h.has(d[u]))Ie(r[u]),u++;else if(!h.has(d[m]))Ie(r[m]),m--;else{const C=p.get(a[f]),O=C!==void 0?r[C]:null;if(O===null){const xt=te(e,r[u]);B(xt,o[f]),l[f]=xt}else l[f]=B(O,o[f]),te(e,r[u],O),r[C]=null;f++}for(;f<=_;){const C=te(e,l[_+1]);B(C,o[f]),l[f++]=C}for(;u<=m;){const C=r[u++];C!==null&&Ie(C)}return this._itemKeys=a,ri(e,l),R}}const di=st(ai),$=[];for(let i=0;i<256;++i)$.push((i+256).toString(16).slice(1));function li(i,e=0){return($[i[e+0]]+$[i[e+1]]+$[i[e+2]]+$[i[e+3]]+"-"+$[i[e+4]]+$[i[e+5]]+"-"+$[i[e+6]]+$[i[e+7]]+"-"+$[i[e+8]]+$[i[e+9]]+"-"+$[i[e+10]]+$[i[e+11]]+$[i[e+12]]+$[i[e+13]]+$[i[e+14]]+$[i[e+15]]).toLowerCase()}let Me;const ci=new Uint8Array(16);function pi(){if(!Me){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");Me=crypto.getRandomValues.bind(crypto)}return Me(ci)}const dt={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Ae(i,e,t){var s;if(dt.randomUUID&&!i)return dt.randomUUID();i=i||{};const n=i.random??((s=i.rng)==null?void 0:s.call(i))??pi();if(n.length<16)throw new Error("Random bytes length must be >= 16");return n[6]=n[6]&15|64,n[8]=n[8]&63|128,li(n)}const hi=G`
:host {
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
background-color: #f9fafb; /* Lighter gray background */
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
min-height: 600px;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-bottom: 1px solid #e5e7eb;
background-color: #ffffff;
}
.header h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #111827;
}
.header-actions {
display: flex;
gap: 12px;
}
.header-actions button {
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.cancel-button {
background-color: #ffffff;
color: #374151;
border: 1px solid #d1d5db;
}
.cancel-button:hover {
background-color: #f9fafb;
border-color: #9ca3af;
}
.save-button {
background-color: #3b82f6;
color: #ffffff;
border: 1px solid #3b82f6;
}
.save-button:hover {
background-color: #2563eb;
border-color: #2563eb;
}
/* Main Content */
.main-content {
padding: 24px;
background-color: #f9fafb; /* Lighter gray background continues */
}
`,ui=G`
/* Title and Description Section - White Panel */
.template-basics {
background-color: #ffffff;
padding: 24px;
border-radius: 8px;
margin-bottom: 24px;
display: grid;
grid-template-columns: 1fr 1.5fr; /* Title narrower, Description wider */
gap: 24px;
border-bottom: 1px solid #e5e7eb;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 500;
color: #374151;
margin-bottom: 8px;
font-size: 14px;
}
.form-group input,
.form-group textarea {
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}
/* Two Column Layout with T-shaped divider */
.content-columns {
background-color: #f9fafb; /* Lighter gray background like the rest */
border-radius: 8px;
display: grid;
grid-template-columns: 1fr 1px 1.5fr; /* Steps narrower, Questions wider */
min-height: 400px;
border-top: 1px solid #e5e7eb; /* Top border to complete the T-shape */
}
/* Vertical divider line */
.vertical-divider {
background-color: #e5e7eb;
width: 1px;
}
`,mi=G`
/* Steps and Questions Sections */
.section {
padding: 24px;
background-color: #f9fafb; /* Lighter gray background for sections */
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.section-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #111827;
}
.add-button {
background-color: #f9fafb; /* Gray background to match sections */
color: #3b82f6;
border: 1px solid #3b82f6;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.add-button:hover {
background-color: #f3f4f6; /* Slightly darker gray on hover */
}
.add-button::before {
content: "+";
font-size: 16px;
font-weight: 600;
}
/* Empty States */
.empty-state {
text-align: center;
padding: 48px 24px;
background-color: transparent; /* No background color */
border: none; /* No dashed border */
border-radius: 0;
margin-top: 16px;
}
.empty-state h3 {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
color: #6b7280; /* Gray text color */
}
.empty-state p {
margin: 0 0 24px 0;
color: #6b7280;
font-size: 14px;
line-height: 1.5;
}
.empty-state .add-button {
background-color: #f9fafb; /* Lighter gray to match background */
color: #3b82f6; /* Blue text to match header buttons */
border: 1px solid #3b82f6; /* Blue border to match header buttons */
padding: 8px 16px;
margin: 0 auto; /* Center the button horizontally */
}
.empty-state .add-button:hover {
background-color: #f3f4f6; /* Slightly darker gray on hover */
}
/* Steps for Questions Section */
.steps-empty-state {
padding: 32px 24px;
text-align: center; /* Center the steps empty state too */
}
.steps-empty-state h3 {
text-align: center; /* Center the heading */
margin-bottom: 4px;
color: #6b7280; /* Gray text color */
}
.steps-empty-state p {
text-align: center; /* Center the text */
margin-bottom: 16px;
color: #6b7280;
}
.steps-empty-state .add-button {
background-color: #f9fafb; /* Lighter gray to match background */
color: #3b82f6; /* Blue text to match header buttons */
border: 1px solid #3b82f6; /* Blue border to match header buttons */
margin: 0 auto; /* Center the button horizontally */
}
.steps-empty-state .add-button:hover {
background-color: #f3f4f6; /* Slightly darker gray on hover */
}
/* Disabled States */
.section.disabled {
opacity: 0.6;
}
.add-button.disabled,
.add-button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
`,lt=G`
.runner-layout {
display: flex;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
background: #f8fafc;
gap: 32px;
overflow: hidden;
position: relative;
}
/* Loading overlay and spinner */
.runner-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding-top: 80px;
box-sizing: border-box;
}
.runner-loading-box {
background: white;
border-radius: 8px;
padding: 24px 48px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px -1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
min-width: 200px;
}
.runner-loading-spinner {
width: 48px;
height: 48px;
border: 4px solid #e5e7eb;
border-top: 4px solid #3b82f6;
border-radius: 50%;
animation: runner-spin 1s linear infinite;
}
.runner-loading-text {
color: #6b7280;
font-size: 16px;
font-weight: 500;
text-align: center;
}
@keyframes runner-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.runner-sidebar {
width: 380px;
min-width: 320px;
background: #f8fafc;
border-right: 1px solid #e5e7eb;
padding: 40px 32px 40px 32px;
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
}
.runner-sidebar-header {
font-size: 1.15rem;
font-weight: 700;
color: #222;
margin-bottom: 24px;
letter-spacing: 0.01em;
text-align: left;
}
.runner-steps-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.runner-step-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 18px 18px 18px 20px;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
margin-bottom: 0;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.2s, box-shadow 0.2s;
gap: 12px;
}
.runner-step-item.active {
border: 2px solid #3b82f6;
background: #fff;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
.runner-step-title {
font-weight: 500;
color: #111827;
font-size: 0.97rem;
flex: 1;
min-width: 0;
line-height: 1.4;
}
.runner-step-item.active .runner-step-title {
font-weight: 700;
font-size: 1.07rem;
}
.runner-step-badge {
background: #e0e7ff;
color: #3730a3;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
padding: 2px 10px;
margin-left: 0;
flex-shrink: 0;
align-self: center;
white-space: nowrap;
}
.runner-main-content {
flex: 1;
width: 100%;
padding: 56px 64px 56px 64px;
background: #f8fafc;
min-width: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 600px;
overflow: hidden;
}
.runner-main-content form,
.runner-main-content input,
.runner-main-content select,
.runner-main-content textarea {
max-width: 100%;
box-sizing: border-box;
}
.runner-step-header h2.runner-step-title {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
}
.runner-step-divider {
border: none;
border-top: 1px solid #e5e7eb;
margin: 20px 0 20px 0;
width: 100%;
}
.runner-step-desc {
color: #6b7280;
font-size: 1rem;
margin: 0;
}
.runner-step-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.runner-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
padding-right: 0;
}
.next-button {
background: #3b82f6;
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 32px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
max-width: 180px;
min-width: 100px;
box-sizing: border-box;
align-self: flex-end;
}
.next-button:hover {
background: #2563eb;
}
:global(body) {
background: #f8fafc;
}
.runner-card {
background: #fff;
border-radius: 12px;
padding: 24px 24px 20px 24px;
margin-bottom: 0;
box-shadow: none;
border: none;
}
.runner-question-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
color: #111827;
display: flex;
align-items: center;
}
.runner-question-required {
color: #dc2626;
font-size: 1.1em;
margin-left: 4px;
}
.runner-question-divider {
border: none;
border-top: 1.5px solid #e5e7eb;
margin: 12px 0 20px 0;
}
/* Form input styling */
.runner-card input[type="text"],
.runner-card input[type="email"],
.runner-card input[type="number"],
.runner-card input[type="date"],
.runner-card textarea,
.runner-card select {
width: 100%;
padding: 12px 16px;
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 14px;
background-color: #f9fafb;
color: #111827;
transition: all 0.2s ease;
box-sizing: border-box;
}
.runner-card input[type="text"]:focus,
.runner-card input[type="email"]:focus,
.runner-card input[type="number"]:focus,
.runner-card input[type="date"]:focus,
.runner-card textarea:focus,
.runner-card select:focus {
outline: none;
border-color: #3b82f6;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.runner-card input[type="text"]::placeholder,
.runner-card input[type="email"]::placeholder,
.runner-card input[type="number"]::placeholder,
.runner-card textarea::placeholder {
color: #9ca3af;
}
.runner-card textarea {
min-height: 120px;
resize: vertical;
}
.runner-card select {
cursor: pointer;
width: auto;
min-width: 450px;
max-width: 900px;
}
.runner-card select.placeholder {
color: #9ca3af;
}
/* Radio group styling */
.radio-group {
display: flex;
flex-direction: column;
gap: 8px;
background-color: #ffffff;
padding: 16px;
}
.radio-option {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 0;
border: none;
background-color: transparent;
transition: all 0.2s ease;
}
.radio-option:hover {
background-color: transparent;
}
.radio-option input[type="radio"] {
margin-right: 12px;
width: 18px;
height: 18px;
accent-color: #3b82f6;
cursor: pointer;
}
.radio-option input[type="radio"]:checked + .radio-label {
font-weight: 600;
color: #111827;
}
.radio-label {
font-size: 16px;
color: #374151;
cursor: pointer;
flex: 1;
}
.radio-option:has(input[type="radio"]:checked) {
border: none;
background-color: transparent;
box-shadow: none;
}
/* Checkbox group styling */
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
background-color: #ffffff;
padding: 16px;
}
.checkbox-option {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 0;
border: none;
background-color: transparent;
transition: all 0.2s ease;
}
.checkbox-option:hover {
background-color: transparent;
}
.checkbox-option input[type="checkbox"] {
margin-right: 12px;
width: 18px;
height: 18px;
accent-color: #3b82f6;
cursor: pointer;
}
.checkbox-option input[type="checkbox"]:checked + .checkbox-label {
font-weight: 600;
color: #111827;
}
.checkbox-label {
font-size: 16px;
color: #374151;
cursor: pointer;
flex: 1;
}
.checkbox-option:has(input[type="checkbox"]:checked) {
border: none;
background-color: transparent;
box-shadow: none;
}
/* Single checkbox styling */
.checkbox-single {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 0;
border: none;
background-color: transparent;
transition: all 0.2s ease;
margin-top: 8px;
}
.checkbox-single:hover {
background-color: transparent;