@syntrologie/adapt-feedback 2.8.0-canary.239

package/dist/chunk-3TUS6XVJ.js

@@ -0,0 +1,880 @@
+// src/FeedbackWidget.ts
+import { css as css7, html as html7, LitElement as LitElement7, nothing } from "lit";
+
+// src/engine/FlowEngine.ts
+var FlowEngineValidationError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "FlowEngineValidationError";
+  }
+};
+var FlowEngine = class {
+  constructor(steps) {
+    this._answers = /* @__PURE__ */ new Map();
+    this._validate(steps);
+    this._steps = steps;
+    this._stepMap = new Map(steps.map((s) => [s.id, s]));
+    this._path = [steps[0].id];
+  }
+  get currentStep() {
+    const id = this._path[this._path.length - 1];
+    return this._stepMap.get(id);
+  }
+  get answers() {
+    return this._answers;
+  }
+  get path() {
+    return this._path;
+  }
+  get isComplete() {
+    return this.currentStep.type === "end";
+  }
+  get stepsCompleted() {
+    return this._path.filter((id) => this._answers.has(id)).length;
+  }
+  get stepIndex() {
+    return this._path.length - 1;
+  }
+  getStep(id) {
+    return this._stepMap.get(id);
+  }
+  answer(value) {
+    const step = this.currentStep;
+    if (step.type === "end") return;
+    this._answers.set(step.id, value);
+    const nextId = this._resolveNext(step, value);
+    const currentIdx = this._path.length - 1;
+    this._path = this._path.slice(0, currentIdx + 1);
+    this._path.push(nextId);
+  }
+  goBack() {
+    if (this._path.length <= 1) return;
+    this._path = this._path.slice(0, -1);
+  }
+  _resolveNext(step, value) {
+    if (step.next === void 0) {
+      return this._nextInArray(step.id);
+    }
+    if (typeof step.next === "string") {
+      return step.next;
+    }
+    for (const rule of step.next) {
+      if (this._evaluateRule(rule, value)) {
+        return rule.goto;
+      }
+    }
+    return this._nextInArray(step.id);
+  }
+  _nextInArray(currentId) {
+    const idx = this._steps.findIndex((s) => s.id === currentId);
+    return this._steps[idx + 1].id;
+  }
+  _evaluateRule(rule, value) {
+    const { op, value: ruleValue } = rule.if;
+    switch (op) {
+      case "eq":
+        return value === ruleValue;
+      case "neq":
+        return value !== ruleValue;
+      case "lt":
+        return Number(value) < Number(ruleValue);
+      case "lte":
+        return Number(value) <= Number(ruleValue);
+      case "gt":
+        return Number(value) > Number(ruleValue);
+      case "gte":
+        return Number(value) >= Number(ruleValue);
+      case "in":
+        return Array.isArray(ruleValue) && ruleValue.includes(String(value));
+      default:
+        return false;
+    }
+  }
+  _validate(steps) {
+    if (steps.length === 0) {
+      throw new FlowEngineValidationError("Steps array must not be empty");
+    }
+    const ids = /* @__PURE__ */ new Set();
+    for (const step of steps) {
+      if (ids.has(step.id)) {
+        throw new FlowEngineValidationError(`Duplicate step ID: "${step.id}"`);
+      }
+      ids.add(step.id);
+    }
+    const hasEnd = steps.some((s) => s.type === "end");
+    if (!hasEnd) {
+      throw new FlowEngineValidationError('At least one step must have type "end"');
+    }
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      if (typeof step.next === "string") {
+        if (!ids.has(step.next)) {
+          throw new FlowEngineValidationError(
+            `Step "${step.id}" has next target "${step.next}" which does not exist`
+          );
+        }
+      } else if (Array.isArray(step.next)) {
+        for (const rule of step.next) {
+          if (!ids.has(rule.goto)) {
+            throw new FlowEngineValidationError(
+              `Step "${step.id}" has branch rule targeting "${rule.goto}" which does not exist`
+            );
+          }
+        }
+      }
+      if (step.type !== "end" && step.next === void 0 && i === steps.length - 1) {
+        throw new FlowEngineValidationError(
+          `Step "${step.id}" is last in the array with no explicit "next" and is not an end step`
+        );
+      }
+    }
+  }
+};
+
+// src/rendering/ChoiceInput.ts
+import { css, html, LitElement } from "lit";
+var ChoiceInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+  }
+  _select(opt) {
+    this.value = opt;
+    this.dispatchEvent(
+      new CustomEvent("step-answer", {
+        detail: { value: opt },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <div class="choices" role="radiogroup">
+        ${(this.options ?? []).map(
+      (opt) => html`
+            <button
+              type="button"
+              role="radio"
+              aria-pressed=${this.value === opt ? "true" : "false"}
+              @click=${() => this._select(opt)}
+            >
+              <span class="radio"><span class="radio-dot"></span></span>
+              ${opt}
+            </button>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+ChoiceInput.properties = {
+  options: { attribute: false },
+  value: { type: String }
+};
+ChoiceInput.styles = css`
+    :host { display: block; }
+    .choices {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 8px 0;
+    }
+    button {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 10px 14px;
+      border-radius: 8px;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      background: var(--sc-content-bg-color, #fff);
+      color: var(--sc-content-text-color, #111827);
+      font-size: 14px;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+    }
+    button:hover {
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--sc-color-primary, #4f46e5);
+      background: var(--sc-color-primary-light, #eef2ff);
+    }
+    .radio {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    button[aria-pressed="true"] .radio {
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    .radio-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: transparent;
+    }
+    button[aria-pressed="true"] .radio-dot {
+      background: var(--sc-color-primary, #4f46e5);
+    }
+  `;
+customElements.define("sf-choice-input", ChoiceInput);
+
+// src/rendering/EndScreen.ts
+import { css as css2, html as html2, LitElement as LitElement2 } from "lit";
+var EndScreen = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.message = "Thank you!";
+  }
+  render() {
+    return html2`
+      <div class="end-wrap">
+        <div class="checkmark">✓</div>
+        <div class="message">${this.message}</div>
+      </div>
+    `;
+  }
+};
+EndScreen.properties = {
+  message: { type: String }
+};
+EndScreen.styles = css2`
+    :host { display: block; }
+    .end-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 16px;
+      text-align: center;
+      gap: 12px;
+    }
+    .checkmark {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: var(--sc-color-primary-light, #eef2ff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+    }
+    .message {
+      color: var(--sc-content-text-color, #111827);
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  `;
+customElements.define("sf-end-screen", EndScreen);
+
+// src/rendering/NpsInput.ts
+import { css as css3, html as html3, LitElement as LitElement3 } from "lit";
+var NpsInput = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.lowLabel = "Not likely";
+    this.highLabel = "Very likely";
+  }
+  _select(val) {
+    this.value = val;
+    this.dispatchEvent(
+      new CustomEvent("step-answer", {
+        detail: { value: val },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const items = Array.from({ length: 11 }, (_, i) => i);
+    return html3`
+      <div>
+        <div class="nps-scale">
+          ${items.map(
+      (n) => html3`
+              <button
+                type="button"
+                aria-label="Score ${n}"
+                aria-pressed=${this.value === n ? "true" : "false"}
+                @click=${() => this._select(n)}
+              >${n}</button>
+            `
+    )}
+        </div>
+        <div class="labels">
+          <span>${this.lowLabel}</span>
+          <span>${this.highLabel}</span>
+        </div>
+      </div>
+    `;
+  }
+};
+NpsInput.properties = {
+  lowLabel: { type: String },
+  highLabel: { type: String },
+  value: { type: Number }
+};
+NpsInput.styles = css3`
+    :host { display: block; }
+    .nps-scale {
+      display: flex;
+      gap: 4px;
+      justify-content: center;
+      padding: 12px 0 4px;
+    }
+    button {
+      min-width: 32px;
+      height: 36px;
+      border-radius: 6px;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      background: var(--sc-content-bg-color, #fff);
+      color: var(--sc-content-text-color, #111827);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+      padding: 0 4px;
+    }
+    button:hover {
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--sc-color-primary, #4f46e5);
+      background: var(--sc-color-primary, #4f46e5);
+      color: #fff;
+    }
+    .labels {
+      display: flex;
+      justify-content: space-between;
+      padding: 4px 2px 0;
+      font-size: 12px;
+      color: var(--sc-content-text-secondary-color, #6b7280);
+    }
+  `;
+customElements.define("sf-nps-input", NpsInput);
+
+// src/rendering/RatingInput.ts
+import { css as css4, html as html4, LitElement as LitElement4 } from "lit";
+var RatingInput = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.max = 5;
+  }
+  _select(val) {
+    this.value = val;
+    this.dispatchEvent(
+      new CustomEvent("step-answer", {
+        detail: { value: val },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const count = this.max || 5;
+    const items = Array.from({ length: count }, (_, i) => i + 1);
+    return html4`
+      <div class="rating-row">
+        ${items.map(
+      (n) => html4`
+            <button
+              type="button"
+              aria-label="Rate ${n} of ${count}"
+              aria-pressed=${this.value === n ? "true" : "false"}
+              class=${this.value === n ? "selected" : ""}
+              @click=${() => this._select(n)}
+            >${n}</button>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+RatingInput.properties = {
+  max: { type: Number },
+  value: { type: Number }
+};
+RatingInput.styles = css4`
+    :host { display: block; }
+    .rating-row {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      padding: 12px 0;
+    }
+    button {
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      background: var(--sc-content-bg-color, #fff);
+      color: var(--sc-content-text-color, #111827);
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.1s, border-color 0.15s, background 0.15s;
+    }
+    button:hover {
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    button[aria-pressed="true"],
+    button.selected {
+      border-color: var(--sc-color-primary, #4f46e5);
+      background: var(--sc-color-primary, #4f46e5);
+      color: #fff;
+    }
+  `;
+customElements.define("sf-rating-input", RatingInput);
+
+// src/rendering/TextInput.ts
+import { css as css5, html as html5, LitElement as LitElement5 } from "lit";
+var TextInput = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.value = "";
+    this.required = true;
+    this._currentText = "";
+    this._handleInput = (e) => {
+      this._currentText = e.target.value;
+      this.requestUpdate();
+    };
+    this._submit = () => {
+      if (this.required && !this._currentText.trim()) return;
+      this.dispatchEvent(
+        new CustomEvent("step-answer", {
+          detail: { value: this._currentText },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._currentText = this.value || "";
+  }
+  render() {
+    const canSubmit = !this.required || this._currentText.trim().length > 0;
+    return html5`
+      <div class="text-wrap">
+        <textarea
+          .value=${this._currentText}
+          placeholder=${this.placeholder || "Type your answer..."}
+          @input=${this._handleInput}
+        ></textarea>
+        <div class="submit-row">
+          <button type="button" ?disabled=${!canSubmit} @click=${this._submit}>
+            Submit
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+TextInput.properties = {
+  placeholder: { type: String },
+  value: { type: String },
+  required: { type: Boolean }
+};
+TextInput.styles = css5`
+    :host { display: block; }
+    .text-wrap {
+      padding: 8px 0;
+    }
+    textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      background: var(--sc-content-bg-color, #fff);
+      color: var(--sc-content-text-color, #111827);
+      font-family: inherit;
+      font-size: 14px;
+      resize: vertical;
+      box-sizing: border-box;
+      transition: border-color 0.15s;
+    }
+    textarea:focus {
+      outline: none;
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    textarea::placeholder {
+      color: var(--sc-content-text-secondary-color, #9ca3af);
+    }
+    .submit-row {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 8px;
+    }
+    button {
+      padding: 8px 20px;
+      border-radius: 8px;
+      border: none;
+      background: var(--sc-color-primary, #4f46e5);
+      color: #fff;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+    button:hover { opacity: 0.9; }
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  `;
+customElements.define("sf-text-input", TextInput);
+
+// src/rendering/ThumbsInput.ts
+import { css as css6, html as html6, LitElement as LitElement6 } from "lit";
+var ThumbsInput = class extends LitElement6 {
+  _select(val) {
+    this.value = val;
+    this.dispatchEvent(
+      new CustomEvent("step-answer", {
+        detail: { value: val },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html6`
+      <div class="thumbs-row">
+        <button
+          type="button"
+          aria-label="Thumbs up"
+          aria-pressed=${this.value === 1 ? "true" : "false"}
+          @click=${() => this._select(1)}
+        >\u{1F44D}</button>
+        <button
+          type="button"
+          aria-label="Thumbs down"
+          aria-pressed=${this.value === 0 ? "true" : "false"}
+          @click=${() => this._select(0)}
+        >\u{1F44E}</button>
+      </div>
+    `;
+  }
+};
+ThumbsInput.properties = {
+  value: { type: Number }
+};
+ThumbsInput.styles = css6`
+    :host { display: block; }
+    .thumbs-row {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      padding: 12px 0;
+    }
+    button {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      border: 2px solid var(--sc-content-border-color, #e5e7eb);
+      background: var(--sc-content-bg-color, #fff);
+      font-size: 28px;
+      cursor: pointer;
+      transition: transform 0.15s, border-color 0.15s, background 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    button:hover {
+      transform: scale(1.1);
+      border-color: var(--sc-color-primary, #4f46e5);
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--sc-color-primary, #4f46e5);
+      background: var(--sc-color-primary-light, #eef2ff);
+    }
+  `;
+customElements.define("sf-thumbs-input", ThumbsInput);
+
+// src/FeedbackWidget.ts
+var SyntroFeedbackElement = class extends LitElement7 {
+  constructor() {
+    super(...arguments);
+    this.tileId = "feedback-widget";
+    this._direction = "forward";
+    this._onAnswer = (e) => {
+      if (!this._engine || !this.config) return;
+      const step = this._engine.currentStep;
+      const { value } = e.detail;
+      this.runtime?.events.publish("feedback:response", {
+        surveyId: this.tileId,
+        stepId: step.id,
+        stepType: step.type,
+        value,
+        stepIndex: this._engine.stepIndex
+      });
+      this._direction = "forward";
+      this._engine.answer(value);
+      const updated = Object.create(
+        Object.getPrototypeOf(this._engine),
+        Object.getOwnPropertyDescriptors(this._engine)
+      );
+      this._engine = updated;
+      if (updated.isComplete) {
+        this.runtime?.events.publish("feedback:completed", {
+          surveyId: this.tileId,
+          stepsCompleted: updated.stepsCompleted,
+          abandoned: false
+        });
+      }
+    };
+    this._goBack = () => {
+      if (!this._engine) return;
+      this._direction = "back";
+      this._engine.goBack();
+      this._engine = Object.create(
+        Object.getPrototypeOf(this._engine),
+        Object.getOwnPropertyDescriptors(this._engine)
+      );
+    };
+  }
+  willUpdate(changed) {
+    if (changed.has("config") && this.config?.steps?.length) {
+      try {
+        this._engine = new FlowEngine(this.config.steps);
+      } catch {
+        this._engine = void 0;
+      }
+    }
+  }
+  _renderStepInput(step) {
+    const prevAnswer = this._engine?.answers.get(step.id);
+    switch (step.type) {
+      case "thumbs":
+        return html7`<sf-thumbs-input
+          .value=${prevAnswer}
+          @step-answer=${this._onAnswer}
+        ></sf-thumbs-input>`;
+      case "rating":
+        return html7`<sf-rating-input
+          .max=${step.ratingMax ?? 5}
+          .value=${prevAnswer}
+          @step-answer=${this._onAnswer}
+        ></sf-rating-input>`;
+      case "nps":
+        return html7`<sf-nps-input
+          .lowLabel=${step.npsLowLabel ?? "Not likely"}
+          .highLabel=${step.npsHighLabel ?? "Very likely"}
+          .value=${prevAnswer}
+          @step-answer=${this._onAnswer}
+        ></sf-nps-input>`;
+      case "choice":
+        return html7`<sf-choice-input
+          .options=${step.options ?? []}
+          .value=${prevAnswer}
+          @step-answer=${this._onAnswer}
+        ></sf-choice-input>`;
+      case "text":
+        return html7`<sf-text-input
+          .placeholder=${step.placeholder ?? ""}
+          .value=${prevAnswer ?? ""}
+          .required=${step.required !== false}
+          @step-answer=${this._onAnswer}
+        ></sf-text-input>`;
+      case "end":
+        return html7`<sf-end-screen .message=${step.prompt}></sf-end-screen>`;
+      default:
+        return nothing;
+    }
+  }
+  render() {
+    if (!this._engine || !this.config) {
+      return html7`<div style="padding:16px;color:var(--sc-content-text-secondary-color,#87919f)">
+        Survey widget requires config.
+      </div>`;
+    }
+    const step = this._engine.currentStep;
+    const showProgress = this.config.showProgress !== false;
+    const allowBack = this.config.allowBack === true;
+    const canGoBack = allowBack && this._engine.path.length > 1 && step.type !== "end";
+    const totalSteps = this.config.steps.filter((s) => s.type !== "end").length;
+    const progressPct = totalSteps > 0 ? this._engine.stepsCompleted / totalSteps * 100 : 0;
+    const animClass = this._direction === "forward" ? "slide-in-right" : "slide-in-left";
+    return html7`
+      ${this.config.title ? html7`<div class="header">${this.config.title}</div>` : nothing}
+      ${showProgress && step.type !== "end" ? html7`<div class="progress-bar">
+            <div class="progress-fill" style="width:${progressPct}%"></div>
+          </div>` : nothing}
+      <div class="step-container">
+        <div class="step-content ${animClass}" key=${step.id}>
+          ${step.type !== "end" ? html7`
+                <div class="prompt">${step.prompt}</div>
+                ${step.description ? html7`<div class="description">${step.description}</div>` : nothing}
+              ` : nothing}
+          ${this._renderStepInput(step)}
+        </div>
+      </div>
+      ${canGoBack || step.type !== "end" && showProgress ? html7`<div class="footer">
+            ${canGoBack ? html7`<button type="button" class="back-btn" @click=${this._goBack}>← Back</button>` : html7`<span></span>`}
+            ${step.type !== "end" ? html7`<span class="step-count">${this._engine.stepsCompleted + 1} of ${totalSteps}</span>` : nothing}
+          </div>` : nothing}
+    `;
+  }
+};
+SyntroFeedbackElement.properties = {
+  config: { attribute: false },
+  runtime: { attribute: false },
+  tileId: { type: String },
+  _engine: { state: true },
+  _direction: { state: true }
+};
+SyntroFeedbackElement.styles = css7`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      font-family: var(--sc-font-family, system-ui, -apple-system, sans-serif);
+      color: var(--sc-content-text-color, #111827);
+    }
+    .header {
+      padding: 12px 16px 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--sc-content-text-color, #111827);
+    }
+    .progress-bar {
+      height: 3px;
+      background: var(--sc-content-border-color, #e5e7eb);
+      margin: 0 16px;
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--sc-color-primary, #4f46e5);
+      border-radius: 2px;
+      transition: width 0.3s ease;
+    }
+    .step-container {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+    }
+    .step-content {
+      padding: 16px;
+      animation-duration: 0.25s;
+      animation-fill-mode: both;
+      animation-timing-function: ease-out;
+    }
+    .step-content.slide-in-right {
+      animation-name: slideInRight;
+    }
+    .step-content.slide-in-left {
+      animation-name: slideInLeft;
+    }
+    @keyframes slideInRight {
+      from { transform: translateX(30px); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes slideInLeft {
+      from { transform: translateX(-30px); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    .prompt {
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 1.4;
+      margin-bottom: 4px;
+    }
+    .description {
+      font-size: 13px;
+      color: var(--sc-content-text-secondary-color, #6b7280);
+      margin-bottom: 8px;
+      line-height: 1.4;
+    }
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 16px 12px;
+      gap: 8px;
+    }
+    .back-btn {
+      padding: 6px 14px;
+      border-radius: 6px;
+      border: 1px solid var(--sc-content-border-color, #e5e7eb);
+      background: transparent;
+      color: var(--sc-content-text-secondary-color, #6b7280);
+      font-size: 13px;
+      cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .back-btn:hover {
+      border-color: var(--sc-content-text-color, #111827);
+    }
+    .step-count {
+      font-size: 12px;
+      color: var(--sc-content-text-secondary-color, #9ca3af);
+    }
+  `;
+customElements.define("syntro-feedback", SyntroFeedbackElement);
+var FeedbackWidgetLitMountable = {
+  mount(container, mountConfig) {
+    const {
+      config,
+      runtime,
+      tileId = "feedback-widget"
+    } = mountConfig ?? {};
+    if (!config) {
+      container.innerHTML = '<div style="padding:16px;color:var(--sc-content-text-secondary-color,#87919f)">Feedback widget requires config.</div>';
+      return () => {
+        container.innerHTML = "";
+      };
+    }
+    let tracker;
+    try {
+      tracker = new FlowEngine(config.steps);
+    } catch {
+    }
+    const el = document.createElement("syntro-feedback");
+    el.config = config;
+    el.runtime = runtime;
+    el.tileId = tileId;
+    el.style.cssText = "display:flex;flex-direction:column;height:100%;width:100%;";
+    container.appendChild(el);
+    let completed = false;
+    const onAnswer = (e) => {
+      const detail = e.detail;
+      if (tracker && !tracker.isComplete) {
+        tracker.answer(detail.value);
+        if (tracker.isComplete) completed = true;
+      }
+    };
+    el.addEventListener("step-answer", onAnswer);
+    return () => {
+      el.removeEventListener("step-answer", onAnswer);
+      if (!completed && runtime && tracker) {
+        runtime.events.publish("feedback:abandoned", {
+          surveyId: tileId,
+          lastStepId: tracker.currentStep.id,
+          stepsCompleted: tracker.stepsCompleted,
+          abandoned: true
+        });
+      }
+      el.remove();
+    };
+  }
+};
+
+export {
+  SyntroFeedbackElement,
+  FeedbackWidgetLitMountable
+};
+//# sourceMappingURL=chunk-3TUS6XVJ.js.map