mensa 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae217694f2f5b6da4894f8298dcce685b65b7801db66ff34b6e3adc4fe5450ac
-  data.tar.gz: e0df29185e90dba9d131204ea3750653d7ebf01cb0a26eb4e423fef9e1999f15
+  metadata.gz: e65b5449f34142c241ec808818ae9634e246c73b1b6b6f17e794b998378baf29
+  data.tar.gz: b4e1be79e6941ed67ab28d5b9188246398d332166ca225dcf6b53b936faad403
 SHA512:
-  metadata.gz: 5e51ed2fd1e658224721238213d654ef55aa99913b409de4baee537206497c742e45b6f5f63d03788c8e35fd1cd2c14594d2c6529e1b75593c278010ecc20c5d
-  data.tar.gz: '09dea0710ed582ead8878a6bd07caabcf17cbd84fa883f388bf8d94297ad4fc3bbe48a83b1c6ed4db507b37802432f0ee773d6e2514f07d5bebb6402e5fb41fa'
+  metadata.gz: 8bc4602e03b60c11998a8aa470476457aff5533b8a2c8936b049174e2ee2d017318c7ddd6969b8a6194aa59c643cf1db52afd2b53ba56e856619ee701bc1cb46
+  data.tar.gz: b43c3400f65e2c1e1a32b30a0d043e82f9df71c3800485d4f3e4201dd18789f525a43018232c003034205e6460eee538583aa26286ea4c502debbee0ba9ad216

data/.shipkit.yml

@@ -1,2 +1,2 @@
 ---
-previous_version: 0.8.0
+previous_version: 0.8.2

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    mensa (0.8.0)
+    mensa (0.8.2)
       csv
       importmap-rails
       pagy (>= 43)

data/app/assets/stylesheets/mensa/application.css

@@ -1,3 +1,4 @@
+@import "driver.css";
 @import "../../../components/mensa/add_filter/component.css";
 @import "../../../components/mensa/column_customizer/component.css";
 @import "../../../components/mensa/cell/component.css";

data/app/assets/stylesheets/mensa/driver.css

@@ -0,0 +1 @@
+.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}

data/app/components/mensa/column_customizer/component.html.erb

@@ -1,4 +1,5 @@
 <div class="relative"
+     data-mensa-tour="columns"
      data-controller="mensa-column-customizer"
      data-mensa-column-customizer-table-name-value="<%= table.name %>"
      data-mensa-column-customizer-storage-key-value="<%= table.storage_key %>"

data/app/components/mensa/control_bar/component.html.erb

@@ -44,7 +44,7 @@
     </button>
 
     <% if table.exportable? %>
-      <button class="mensa-table__control_bar__button relative" type="button" data-action="mensa-table#export">
+      <button class="mensa-table__control_bar__button relative" type="button" data-mensa-tour="export" data-action="mensa-table#export">
         <i data-mensa-table-target="exportIcon" class="<%= Mensa.config.icons[:control_bar_export] %>"></i>
         <%= helpers.render partial: "mensa/exports/badge", locals: {table_name: table.name, user: table.current_user, table_params: table.params} %>
       </button>

data/app/components/mensa/filter_pill_list/component.html.erb

@@ -2,6 +2,8 @@
 <div class="mensa-table__search-bar"
      id="mensa-filter-pill-list-<%= table.table_id %>"
      data-controller="mensa-filter-pill-list"
+     data-mensa-tour="search"
+     data-mensa-tour-filterable="<%= has_filterable_columns %>"
      data-mensa-table-target="filterList"
      data-mensa-filter-pill-list-table-name-value="<%= table.name %>"
      data-mensa-filter-pill-list-storage-key-value="<%= table.storage_key %>"

data/app/components/mensa/filter_pill_list/component_controller.js

@@ -313,7 +313,14 @@ export default class FilterPillListComponentController extends ApplicationContro
             Object.keys(order).length > 0 ||
             columnOrder.length > 0;
 
-        const alreadyRendered = Object.keys(this.renderedFilters()).length > 0;
+        // Pills rendered by the server (e.g. a view's default filters) must not win
+        // over filters the user changed or cleared.
+        const rendered = this.renderedFilters();
+        const filtersDiffer =
+            filtersProvided &&
+            JSON.stringify(rendered) !== JSON.stringify(filters);
+        const alreadyRendered =
+            Object.keys(rendered).length > 0 && !filtersDiffer;
 
         if (!hasState || alreadyRendered || table.frameLoadHandled) {
             if (typeof table.loadFrame === "function") {

data/app/components/mensa/group_by/component.html.erb

@@ -1,4 +1,5 @@
 <div class="relative"
+     data-mensa-tour="group_by"
      data-controller="mensa-group-by"
      data-mensa-group-by-storage-key-value="<%= table.storage_key %>"
      data-mensa-group-by-group-by-value="<%= table.group_column&.name %>"

data/app/components/mensa/table/component.html.erb

@@ -5,10 +5,10 @@
      data-mensa-table-save-view-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>"
      data-mensa-table-views-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>"
      data-mensa-table-exports-url-value="<%= table.path_with_params(helpers.mensa.table_exports_path(table.name)) %>"
-     data-controller="mensa-table"
+     data-controller="mensa-table mensa-tour"
+     data-mensa-tour-texts-value="<%= I18n.t("mensa.tour").to_json %>"
      data-mensa-table-storage-key-value="<%= table.storage_key %>"
      data-action="click@document->mensa-table#saveDropdownOutsideHandler"
-     data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']"
      data-mensa-table-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"
      data-mensa-table-mensa-column-customizer-outlet="[data-controller='mensa-column-customizer']">
   <div class="mensa-table__toolbar">

data/app/components/mensa/table/tour_controller.js

@@ -0,0 +1,182 @@
+import ApplicationController from "mensa/controllers/application_controller";
+import { driver } from "driver.js";
+
+// Explains the table's features the first time each one is seen. Every feature is
+// its own segment, remembered in localStorage, so a feature missing on one table is
+// still explained the first time it shows up on another.
+const SEGMENTS = [
+    { key: "search", selector: "[data-mensa-tour='search']" },
+    { key: "columns", selector: "[data-mensa-tour='columns']" },
+    { key: "sorting", selector: "th a.order" },
+    { key: "group_by", selector: "[data-mensa-tour='group_by']" },
+    { key: "views", selector: "[data-mensa-tour='views']" },
+    { key: "export", selector: "[data-mensa-tour='export']" },
+];
+
+const STORAGE_PREFIX = "mensa:tour:seen:";
+
+export default class TourController extends ApplicationController {
+    static values = { texts: Object };
+
+    connect() {
+        super.connect();
+        this._started = false;
+        this._hovered = false;
+        this._onFrameLoad = () => this._schedule();
+        this._onEnter = () => (this._hovered = true);
+        this._onLeave = () => (this._hovered = false);
+        this._onKeydown = (event) => {
+            if (event.key !== "?" || !this._hovered) return;
+            if (event.target.closest?.("input, textarea, select, [contenteditable]")) return;
+            event.preventDefault();
+            this._start(true);
+        };
+        this.element.addEventListener("turbo:frame-load", this._onFrameLoad);
+        this.element.addEventListener("mouseenter", this._onEnter);
+        this.element.addEventListener("mouseleave", this._onLeave);
+        document.addEventListener("keydown", this._onKeydown);
+    }
+
+    disconnect() {
+        this.element.removeEventListener("turbo:frame-load", this._onFrameLoad);
+        this.element.removeEventListener("mouseenter", this._onEnter);
+        this.element.removeEventListener("mouseleave", this._onLeave);
+        document.removeEventListener("keydown", this._onKeydown);
+        clearTimeout(this._timer);
+    }
+
+    // Wait for the frame to settle (headers are only rendered after it loads).
+    _schedule() {
+        if (this._started) return;
+        clearTimeout(this._timer);
+        this._timer = setTimeout(() => this._start(), 300);
+    }
+
+    // `force` replays every available segment, e.g. when the user presses ?.
+    _start(force = false) {
+        if ((this._started && !force) || window.__mensaTourActive) return;
+
+        const segments = SEGMENTS.filter(
+            (s) => (force || !this._seen(s.key)) && this.element.querySelector(s.selector),
+        );
+        if (segments.length === 0) return;
+
+        this._started = true;
+        window.__mensaTourActive = true;
+
+        const hint = this.textsValue.ui?.replay_hint;
+        const steps = segments.map((s, index) => {
+            let description = this._description(s.key);
+            if (hint && index === segments.length - 1) description += ` ${hint}`;
+            const step = {
+                element: () => this.element.querySelector(s.selector),
+                popover: {
+                    title: this.textsValue[s.key]?.title,
+                    description,
+                },
+            };
+            if (s.key === "export") this._makeExportInteractive(step);
+            return step;
+        });
+
+        segments.forEach((s) => this._markSeen(s.key));
+
+        const ui = this.textsValue.ui || {};
+        const tour = driver({
+            showProgress: true,
+            steps,
+            nextBtnText: ui.next,
+            prevBtnText: ui.previous,
+            doneBtnText: ui.done,
+            progressText: ui.progress,
+            onDestroyed: () => {
+                window.__mensaTourActive = false;
+            },
+        });
+        this._activeTour = tour;
+        tour.drive();
+    }
+
+    // Next on the export step opens the dialog and continues with the dialog tour.
+    _makeExportInteractive(step) {
+        step.popover.nextBtnText = this.textsValue.ui?.next;
+        step.popover.onNextClick = (el) => {
+            this._activeTour?.destroy();
+            el?.click();
+            setTimeout(() => this._startDialogTour(), 400);
+        };
+    }
+
+    _startDialogTour() {
+        const dialog = this.element.querySelector("dialog.mensa-table__export-dialog");
+        if (!dialog?.open) return;
+
+        const keys = ["export_list", "export_scope", "export_format", "export_repeat"];
+        const steps = keys
+            .filter((key) => dialog.querySelector(`[data-mensa-tour='${key}']`))
+            .map((key) => ({
+                element: () => dialog.querySelector(`[data-mensa-tour='${key}']`),
+                popover: {
+                    title: this.textsValue[key]?.title,
+                    description: this.textsValue[key]?.description,
+                },
+            }));
+        if (steps.length === 0) return;
+
+        const ui = this.textsValue.ui || {};
+        window.__mensaTourActive = true;
+        // The modal dialog lives in the top layer, so the popover has to be moved inside it.
+        let wrapper;
+        const tour = driver({
+            showProgress: true,
+            overlayOpacity: 0,
+            steps,
+            nextBtnText: ui.next,
+            prevBtnText: ui.previous,
+            doneBtnText: ui.done,
+            progressText: ui.progress,
+            onPopoverRender: (popover) => {
+                wrapper = popover.wrapper;
+                dialog.appendChild(wrapper);
+            },
+            // Driver removes the previous popover from document.body, so put it back first.
+            onNextClick: (_el, _step, { driver: d }) => {
+                document.body.appendChild(wrapper);
+                d.moveNext();
+            },
+            onPrevClick: (_el, _step, { driver: d }) => {
+                document.body.appendChild(wrapper);
+                d.movePrevious();
+            },
+            onDestroyed: () => {
+                window.__mensaTourActive = false;
+                if (dialog.open) dialog.close();
+            },
+        });
+        tour.drive();
+    }
+
+    _description(key) {
+        const text = this.textsValue[key]?.description || "";
+        if (key !== "search") return text;
+
+        const filterable =
+            this.element.querySelector("[data-mensa-tour='search']")?.dataset
+                .mensaTourFilterable === "true";
+        return filterable ? text : this.textsValue.search?.description_only || text;
+    }
+
+    _seen(key) {
+        try {
+            return window.localStorage.getItem(STORAGE_PREFIX + key) === "1";
+        } catch (e) {
+            return false;
+        }
+    }
+
+    _markSeen(key) {
+        try {
+            window.localStorage.setItem(STORAGE_PREFIX + key, "1");
+        } catch (e) {}
+    }
+}

data/app/components/mensa/views/component.html.erb

@@ -5,6 +5,7 @@
 <div class="mensa-table__views"
      id="mensa-views-<%= table.table_id %>"
      data-mensa-table-target="views"
+     data-mensa-tour="views"
      data-controller="mensa-views"
      data-mensa-views-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"
      data-mensa-views-table-id-value="<%= table.table_id %>"

data/app/javascript/mensa/controllers/index.js

@@ -21,6 +21,9 @@ application.register("mensa-search", SearchComponentController);
 import TableComponentController from "mensa/components/table/component_controller";
 application.register("mensa-table", TableComponentController);
 
+import TourController from "mensa/components/table/tour_controller";
+application.register("mensa-tour", TourController);
+
 import ViewsComponentController from "mensa/components/views/component_controller";
 application.register("mensa-views", ViewsComponentController);
 

data/app/tables/mensa/base.rb

@@ -167,15 +167,14 @@ module Mensa
     end
 
     # Key under which the browser persists this table's state (filters, order,
-    # column order, ...). Tables built with different params get separate state.
+    # column order, ...), per controller, action and table.
     def storage_key
       context = original_view_context if @original_view_context || component
-      scope = if context.respond_to?(:controller_name) && context.respond_to?(:action_name)
+      if context.respond_to?(:controller_name) && context.respond_to?(:action_name)
         "#{context.controller_name}_#{context.action_name}_#{name}"
       else
-        name
+        name.to_s
       end
-      [scope, Mensa::TableParams.digest(params)].compact.join(":")
     end
 
     def all_views

data/app/views/mensa/exports/_dialog.html.erb

@@ -10,10 +10,12 @@
     </header>
 
     <div class="mensa-table__export-dialog__body">
-      <%= render partial: "mensa/exports/list", locals: {table_name: table.name, user: user, table_params: table.params, exports: exports} %>
+      <div data-mensa-tour="export_list">
+        <%= render partial: "mensa/exports/list", locals: {table_name: table.name, user: user, table_params: table.params, exports: exports} %>
+      </div>
 
       <form class="mensa-table__export-dialog__form" data-action="submit->mensa-table#confirmExport">
-        <fieldset class="mensa-table__export-dialog__fieldset">
+        <fieldset class="mensa-table__export-dialog__fieldset" data-mensa-tour="export_scope">
           <legend class="mensa-table__export-dialog__section-title"><%= t("mensa.exports.new_export", default: "New export") %></legend>
           <label class="mensa-table__export-dialog__option">
             <input type="radio" name="scope" value="all" checked>
@@ -25,7 +27,7 @@
           </label>
         </fieldset>
 
-        <fieldset class="mensa-table__export-dialog__fieldset">
+        <fieldset class="mensa-table__export-dialog__fieldset" data-mensa-tour="export_format">
           <legend class="mensa-table__export-dialog__section-title"><%= t("mensa.exports.export_as", default: "Export as") %></legend>
           <label class="mensa-table__export-dialog__option">
             <input type="radio" name="export_format" value="csv_excel" checked>
@@ -37,7 +39,7 @@
           </label>
         </fieldset>
 
-        <fieldset class="mensa-table__export-dialog__fieldset">
+        <fieldset class="mensa-table__export-dialog__fieldset" data-mensa-tour="export_repeat">
           <legend class="mensa-table__export-dialog__section-title"><%= t("mensa.exports.repeat_section", default: "Repeat") %></legend>
           <label class="mensa-table__export-dialog__option">
             <input type="radio" name="repeat_mode" value="once" checked data-action="change->mensa-table#toggleExportRepeat">

data/config/importmap.rb

@@ -4,4 +4,5 @@ pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from Mensa::Engine.root.join("app/javascript/mensa/controllers"), under: "mensa/controllers", to: "mensa/controllers", preload: false
 pin_all_from Mensa::Engine.root.join("app/components/mensa"), under: "mensa/components", to: "mensa", preload: false
+pin "driver.js", to: "driver.js.js" # @1.3.6
 pin "@rails/request.js", to: "@rails--request.js.js" # @0.0.9

data/config/locales/en.yml

@@ -1,5 +1,43 @@
 en:
   mensa:
+    tour:
+      ui:
+        next: Next
+        previous: Previous
+        done: Got it
+        replay_hint: Hover over the table and press ? to see this tour again.
+        progress: "{{current}} of {{total}}"
+      search:
+        title: Search and filter
+        description: Type to search the table, or click the plus button to filter on a specific column. Active filters appear as pills that you can edit or remove.
+        description_only: Type to search the table. Press Enter to apply your search.
+      columns:
+        title: Columns
+        description: Show, hide and reorder the columns by dragging them into the order you prefer.
+      sorting:
+        title: Sorting
+        description: Click a column header to sort by that column. Click again to reverse the order.
+      group_by:
+        title: Group by
+        description: Group rows by a column and optionally show totals or counts per group.
+      views:
+        title: Views
+        description: Switch between saved views, or save your current filters, search and columns as a custom view to reuse later.
+      export:
+        title: Export
+        description: Download the table with your current filters applied. Press Next to open the export dialog.
+      export_list:
+        title: Your downloads
+        description: Finished exports show up here so you can download or delete them.
+      export_scope:
+        title: What to export
+        description: Export all records matching your current filters, or only the page you are looking at.
+      export_format:
+        title: File format
+        description: Choose a CSV optimised for spreadsheet programs, or a plain CSV file.
+      export_repeat:
+        title: Repeat
+        description: Export once, or have the export repeat automatically at a daily, weekly, monthly or other interval.
     column_customizer:
       heading: Columns
     group_by:

data/config/locales/nl.yml

@@ -1,5 +1,43 @@
 nl:
   mensa:
+    tour:
+      ui:
+        next: Volgende
+        previous: Vorige
+        done: Begrepen
+        replay_hint: Beweeg over de tabel en druk op ? om deze uitleg opnieuw te bekijken.
+        progress: "{{current}} van {{total}}"
+      search:
+        title: Zoeken en filteren
+        description: Typ om in de tabel te zoeken, of klik op de plusknop om op een specifieke kolom te filteren. Actieve filters verschijnen als labels die je kunt aanpassen of verwijderen.
+        description_only: Typ om in de tabel te zoeken. Druk op Enter om je zoekopdracht toe te passen.
+      columns:
+        title: Kolommen
+        description: Toon, verberg en herorden kolommen door ze te slepen naar de gewenste volgorde.
+      sorting:
+        title: Sorteren
+        description: Klik op een kolomkop om op die kolom te sorteren. Klik nogmaals om de volgorde om te draaien.
+      group_by:
+        title: Groeperen op
+        description: Groepeer rijen op een kolom en toon eventueel totalen of aantallen per groep.
+      views:
+        title: Weergaven
+        description: Wissel tussen opgeslagen weergaven, of bewaar je huidige filters, zoekopdracht en kolommen als eigen weergave om later opnieuw te gebruiken.
+      export:
+        title: Exporteren
+        description: Download de tabel met je huidige filters toegepast. Druk op Volgende om het exportvenster te openen.
+      export_list:
+        title: Je downloads
+        description: Voltooide exports verschijnen hier, zodat je ze kunt downloaden of verwijderen.
+      export_scope:
+        title: Wat exporteren
+        description: Exporteer alle records die overeenkomen met je huidige filters, of alleen de pagina die je nu bekijkt.
+      export_format:
+        title: Bestandsformaat
+        description: Kies een CSV die geoptimaliseerd is voor spreadsheetprogramma's, of een gewoon CSV-bestand.
+      export_repeat:
+        title: Herhalen
+        description: Exporteer eenmalig, of laat de export automatisch herhalen per dag, week, maand of een ander interval.
     column_customizer:
       heading: Kolommen
     group_by:

data/lib/mensa/version.rb

@@ -1,3 +1,3 @@
 module Mensa
-  VERSION = "0.8.1"
+  VERSION = "0.9.0"
 end

data/vendor/javascript/driver.js.js

@@ -0,0 +1,666 @@
+let z = {}, J;
+function F(e = {}) {
+  z = {
+    animate: !0,
+    allowClose: !0,
+    overlayClickBehavior: "close",
+    overlayOpacity: 0.7,
+    smoothScroll: !1,
+    disableActiveInteraction: !1,
+    showProgress: !1,
+    stagePadding: 10,
+    stageRadius: 5,
+    popoverOffset: 10,
+    showButtons: ["next", "previous", "close"],
+    disableButtons: [],
+    overlayColor: "#000",
+    ...e
+  };
+}
+function s(e) {
+  return e ? z[e] : z;
+}
+function le(e) {
+  J = e;
+}
+function _() {
+  return J;
+}
+let I = {};
+function N(e, o) {
+  I[e] = o;
+}
+function L(e) {
+  var o;
+  (o = I[e]) == null || o.call(I);
+}
+function de() {
+  I = {};
+}
+function O(e, o, t, i) {
+  return (e /= i / 2) < 1 ? t / 2 * e * e + o : -t / 2 * (--e * (e - 2) - 1) + o;
+}
+function U(e) {
+  const o = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';
+  return e.flatMap((t) => {
+    const i = t.matches(o), d = Array.from(t.querySelectorAll(o));
+    return [...i ? [t] : [], ...d];
+  }).filter((t) => getComputedStyle(t).pointerEvents !== "none" && ve(t));
+}
+function ee(e) {
+  if (!e || ue(e))
+    return;
+  const o = s("smoothScroll"), t = e.offsetHeight > window.innerHeight;
+  e.scrollIntoView({
+    // Removing the smooth scrolling for elements which exist inside the scrollable parent
+    // This was causing the highlight to not properly render
+    behavior: !o || pe(e) ? "auto" : "smooth",
+    inline: "center",
+    block: t ? "start" : "center"
+  });
+}
+function pe(e) {
+  if (!e || !e.parentElement)
+    return;
+  const o = e.parentElement;
+  return o.scrollHeight > o.clientHeight;
+}
+function ue(e) {
+  const o = e.getBoundingClientRect();
+  return o.top >= 0 && o.left >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) && o.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+function ve(e) {
+  return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
+}
+let D = {};
+function k(e, o) {
+  D[e] = o;
+}
+function l(e) {
+  return e ? D[e] : D;
+}
+function X() {
+  D = {};
+}
+function fe(e, o, t, i) {
+  let d = l("__activeStagePosition");
+  const n = d || t.getBoundingClientRect(), f = i.getBoundingClientRect(), w = O(e, n.x, f.x - n.x, o), r = O(e, n.y, f.y - n.y, o), v = O(e, n.width, f.width - n.width, o), g = O(e, n.height, f.height - n.height, o);
+  d = {
+    x: w,
+    y: r,
+    width: v,
+    height: g
+  }, oe(d), k("__activeStagePosition", d);
+}
+function te(e) {
+  if (!e)
+    return;
+  const o = e.getBoundingClientRect(), t = {
+    x: o.x,
+    y: o.y,
+    width: o.width,
+    height: o.height
+  };
+  k("__activeStagePosition", t), oe(t);
+}
+function he() {
+  const e = l("__activeStagePosition"), o = l("__overlaySvg");
+  if (!e)
+    return;
+  if (!o) {
+    console.warn("No stage svg found.");
+    return;
+  }
+  const t = window.innerWidth, i = window.innerHeight;
+  o.setAttribute("viewBox", `0 0 ${t} ${i}`);
+}
+function ge(e) {
+  const o = we(e);
+  document.body.appendChild(o), re(o, (t) => {
+    t.target.tagName === "path" && L("overlayClick");
+  }), k("__overlaySvg", o);
+}
+function oe(e) {
+  const o = l("__overlaySvg");
+  if (!o) {
+    ge(e);
+    return;
+  }
+  const t = o.firstElementChild;
+  if ((t == null ? void 0 : t.tagName) !== "path")
+    throw new Error("no path element found in stage svg");
+  t.setAttribute("d", ie(e));
+}
+function we(e) {
+  const o = window.innerWidth, t = window.innerHeight, i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  i.classList.add("driver-overlay", "driver-overlay-animated"), i.setAttribute("viewBox", `0 0 ${o} ${t}`), i.setAttribute("xmlSpace", "preserve"), i.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink"), i.setAttribute("version", "1.1"), i.setAttribute("preserveAspectRatio", "xMinYMin slice"), i.style.fillRule = "evenodd", i.style.clipRule = "evenodd", i.style.strokeLinejoin = "round", i.style.strokeMiterlimit = "2", i.style.zIndex = "10000", i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%";
+  const d = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return d.setAttribute("d", ie(e)), d.style.fill = s("overlayColor") || "rgb(0,0,0)", d.style.opacity = `${s("overlayOpacity")}`, d.style.pointerEvents = "auto", d.style.cursor = "auto", i.appendChild(d), i;
+}
+function ie(e) {
+  const o = window.innerWidth, t = window.innerHeight, i = s("stagePadding") || 0, d = s("stageRadius") || 0, n = e.width + i * 2, f = e.height + i * 2, w = Math.min(d, n / 2, f / 2), r = Math.floor(Math.max(w, 0)), v = e.x - i + r, g = e.y - i, y = n - r * 2, a = f - r * 2;
+  return `M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
+    M${v},${g} h${y} a${r},${r} 0 0 1 ${r},${r} v${a} a${r},${r} 0 0 1 -${r},${r} h-${y} a${r},${r} 0 0 1 -${r},-${r} v-${a} a${r},${r} 0 0 1 ${r},-${r} z`;
+}
+function me() {
+  const e = l("__overlaySvg");
+  e && e.remove();
+}
+function ye() {
+  const e = document.getElementById("driver-dummy-element");
+  if (e)
+    return e;
+  let o = document.createElement("div");
+  return o.id = "driver-dummy-element", o.style.width = "0", o.style.height = "0", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.position = "fixed", o.style.top = "50%", o.style.left = "50%", document.body.appendChild(o), o;
+}
+function j(e) {
+  const { element: o } = e;
+  let t = typeof o == "function" ? o() : typeof o == "string" ? document.querySelector(o) : o;
+  t || (t = ye()), be(t, e);
+}
+function xe() {
+  const e = l("__activeElement"), o = l("__activeStep");
+  e && (te(e), he(), ae(e, o));
+}
+function be(e, o) {
+  var C;
+  const i = Date.now(), d = l("__activeStep"), n = l("__activeElement") || e, f = !n || n === e, w = e.id === "driver-dummy-element", r = n.id === "driver-dummy-element", v = s("animate"), g = o.onHighlightStarted || s("onHighlightStarted"), y = (o == null ? void 0 : o.onHighlighted) || s("onHighlighted"), a = (d == null ? void 0 : d.onDeselected) || s("onDeselected"), p = s(), c = l();
+  !f && a && a(r ? void 0 : n, d, {
+    config: p,
+    state: c,
+    driver: _()
+  }), g && g(w ? void 0 : e, o, {
+    config: p,
+    state: c,
+    driver: _()
+  });
+  const u = !f && v;
+  let h = !1;
+  _e(), k("previousStep", d), k("previousElement", n), k("activeStep", o), k("activeElement", e);
+  const m = () => {
+    if (l("__transitionCallback") !== m)
+      return;
+    const b = Date.now() - i, E = 400 - b <= 400 / 2;
+    o.popover && E && !h && u && (Q(e, o), h = !0), s("animate") && b < 400 ? fe(b, 400, n, e) : (te(e), y && y(w ? void 0 : e, o, {
+      config: s(),
+      state: l(),
+      driver: _()
+    }), k("__transitionCallback", void 0), k("__previousStep", d), k("__previousElement", n), k("__activeStep", o), k("__activeElement", e)), window.requestAnimationFrame(m);
+  };
+  k("__transitionCallback", m), window.requestAnimationFrame(m), ee(e), !u && o.popover && Q(e, o), n.classList.remove("driver-active-element", "driver-no-interaction"), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded"), n.removeAttribute("aria-controls"), ((C = o.disableActiveInteraction) != null ? C : s("disableActiveInteraction")) && e.classList.add("driver-no-interaction"), e.classList.add("driver-active-element"), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-controls", "driver-popover-content");
+}
+function Ce() {
+  var e;
+  (e = document.getElementById("driver-dummy-element")) == null || e.remove(), document.querySelectorAll(".driver-active-element").forEach((o) => {
+    o.classList.remove("driver-active-element", "driver-no-interaction"), o.removeAttribute("aria-haspopup"), o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls");
+  });
+}
+function M() {
+  const e = l("__resizeTimeout");
+  e && window.cancelAnimationFrame(e), k("__resizeTimeout", window.requestAnimationFrame(xe));
+}
+function Pe(e) {
+  var r;
+  if (!l("isInitialized") || !(e.key === "Tab" || e.keyCode === 9))
+    return;
+  const i = l("__activeElement"), d = (r = l("popover")) == null ? void 0 : r.wrapper, n = U([
+    ...d ? [d] : [],
+    ...i ? [i] : []
+  ]), f = n[0], w = n[n.length - 1];
+  if (e.preventDefault(), e.shiftKey) {
+    const v = n[n.indexOf(document.activeElement) - 1] || w;
+    v == null || v.focus();
+  } else {
+    const v = n[n.indexOf(document.activeElement) + 1] || f;
+    v == null || v.focus();
+  }
+}
+function ne(e) {
+  var t;
+  ((t = s("allowKeyboardControl")) == null || t) && (e.key === "Escape" ? L("escapePress") : e.key === "ArrowRight" ? L("arrowRightPress") : e.key === "ArrowLeft" && L("arrowLeftPress"));
+}
+function re(e, o, t) {
+  const i = (n, f) => {
+    const w = n.target;
+    e.contains(w) && ((!t || t(w)) && (n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation()), f == null || f(n));
+  };
+  document.addEventListener("pointerdown", i, !0), document.addEventListener("mousedown", i, !0), document.addEventListener("pointerup", i, !0), document.addEventListener("mouseup", i, !0), document.addEventListener(
+    "click",
+    (n) => {
+      i(n, o);
+    },
+    !0
+  );
+}
+function ke() {
+  window.addEventListener("keyup", ne, !1), window.addEventListener("keydown", Pe, !1), window.addEventListener("resize", M), window.addEventListener("scroll", M);
+}
+function Se() {
+  window.removeEventListener("keyup", ne), window.removeEventListener("resize", M), window.removeEventListener("scroll", M);
+}
+function _e() {
+  const e = l("popover");
+  e && (e.wrapper.style.display = "none");
+}
+function Q(e, o) {
+  var b, P;
+  let t = l("popover");
+  t && document.body.removeChild(t.wrapper), t = Le(), document.body.appendChild(t.wrapper);
+  const {
+    title: i,
+    description: d,
+    showButtons: n,
+    disableButtons: f,
+    showProgress: w,
+    nextBtnText: r = s("nextBtnText") || "Next &rarr;",
+    prevBtnText: v = s("prevBtnText") || "&larr; Previous",
+    progressText: g = s("progressText") || "{current} of {total}"
+  } = o.popover || {};
+  t.nextButton.innerHTML = r, t.previousButton.innerHTML = v, t.progress.innerHTML = g, i ? (t.title.innerHTML = i, t.title.style.display = "block") : t.title.style.display = "none", d ? (t.description.innerHTML = d, t.description.style.display = "block") : t.description.style.display = "none";
+  const y = n || s("showButtons"), a = w || s("showProgress") || !1, p = (y == null ? void 0 : y.includes("next")) || (y == null ? void 0 : y.includes("previous")) || a;
+  t.closeButton.style.display = y.includes("close") ? "block" : "none", p ? (t.footer.style.display = "flex", t.progress.style.display = a ? "block" : "none", t.nextButton.style.display = y.includes("next") ? "block" : "none", t.previousButton.style.display = y.includes("previous") ? "block" : "none") : t.footer.style.display = "none";
+  const c = f || s("disableButtons") || [];
+  c != null && c.includes("next") && (t.nextButton.disabled = !0, t.nextButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("previous") && (t.previousButton.disabled = !0, t.previousButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("close") && (t.closeButton.disabled = !0, t.closeButton.classList.add("driver-popover-btn-disabled"));
+  const u = t.wrapper;
+  u.style.display = "block", u.style.left = "", u.style.top = "", u.style.bottom = "", u.style.right = "", u.id = "driver-popover-content", u.setAttribute("role", "dialog"), u.setAttribute("aria-labelledby", "driver-popover-title"), u.setAttribute("aria-describedby", "driver-popover-description");
+  const h = t.arrow;
+  h.className = "driver-popover-arrow";
+  const m = ((b = o.popover) == null ? void 0 : b.popoverClass) || s("popoverClass") || "";
+  u.className = `driver-popover ${m}`.trim(), re(
+    t.wrapper,
+    (E) => {
+      var B, R, W;
+      const T = E.target, A = ((B = o.popover) == null ? void 0 : B.onNextClick) || s("onNextClick"), H = ((R = o.popover) == null ? void 0 : R.onPrevClick) || s("onPrevClick"), $ = ((W = o.popover) == null ? void 0 : W.onCloseClick) || s("onCloseClick");
+      if (T.closest(".driver-popover-next-btn"))
+        return A ? A(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("nextClick");
+      if (T.closest(".driver-popover-prev-btn"))
+        return H ? H(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("prevClick");
+      if (T.closest(".driver-popover-close-btn"))
+        return $ ? $(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("closeClick");
+    },
+    (E) => !(t != null && t.description.contains(E)) && !(t != null && t.title.contains(E)) && typeof E.className == "string" && E.className.includes("driver-popover")
+  ), k("popover", t);
+  const x = ((P = o.popover) == null ? void 0 : P.onPopoverRender) || s("onPopoverRender");
+  x && x(t, {
+    config: s(),
+    state: l(),
+    driver: _()
+  }), ae(e, o), ee(u);
+  const C = e.classList.contains("driver-dummy-element"), S = U([u, ...C ? [] : [e]]);
+  S.length > 0 && S[0].focus();
+}
+function se() {
+  const e = l("popover");
+  if (!(e != null && e.wrapper))
+    return;
+  const o = e.wrapper.getBoundingClientRect(), t = s("stagePadding") || 0, i = s("popoverOffset") || 0;
+  return {
+    width: o.width + t + i,
+    height: o.height + t + i,
+    realWidth: o.width,
+    realHeight: o.height
+  };
+}
+function Z(e, o) {
+  const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
+  return e === "start" ? Math.max(
+    Math.min(
+      t.top - d,
+      window.innerHeight - i.realHeight - n.width
+    ),
+    n.width
+  ) : e === "end" ? Math.max(
+    Math.min(
+      t.top - (i == null ? void 0 : i.realHeight) + t.height + d,
+      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
+    ),
+    n.width
+  ) : e === "center" ? Math.max(
+    Math.min(
+      t.top + t.height / 2 - (i == null ? void 0 : i.realHeight) / 2,
+      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
+    ),
+    n.width
+  ) : 0;
+}
+function G(e, o) {
+  const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
+  return e === "start" ? Math.max(
+    Math.min(
+      t.left - d,
+      window.innerWidth - i.realWidth - n.width
+    ),
+    n.width
+  ) : e === "end" ? Math.max(
+    Math.min(
+      t.left - (i == null ? void 0 : i.realWidth) + t.width + d,
+      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
+    ),
+    n.width
+  ) : e === "center" ? Math.max(
+    Math.min(
+      t.left + t.width / 2 - (i == null ? void 0 : i.realWidth) / 2,
+      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
+    ),
+    n.width
+  ) : 0;
+}
+function ae(e, o) {
+  const t = l("popover");
+  if (!t)
+    return;
+  const { align: i = "start", side: d = "left" } = (o == null ? void 0 : o.popover) || {}, n = i, f = e.id === "driver-dummy-element" ? "over" : d, w = s("stagePadding") || 0, r = se(), v = t.arrow.getBoundingClientRect(), g = e.getBoundingClientRect(), y = g.top - r.height;
+  let a = y >= 0;
+  const p = window.innerHeight - (g.bottom + r.height);
+  let c = p >= 0;
+  const u = g.left - r.width;
+  let h = u >= 0;
+  const m = window.innerWidth - (g.right + r.width);
+  let x = m >= 0;
+  const C = !a && !c && !h && !x;
+  let S = f;
+  if (f === "top" && a ? x = h = c = !1 : f === "bottom" && c ? x = h = a = !1 : f === "left" && h ? x = a = c = !1 : f === "right" && x && (h = a = c = !1), f === "over") {
+    const b = window.innerWidth / 2 - r.realWidth / 2, P = window.innerHeight / 2 - r.realHeight / 2;
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto";
+  } else if (C) {
+    const b = window.innerWidth / 2 - (r == null ? void 0 : r.realWidth) / 2, P = 10;
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.bottom = `${P}px`, t.wrapper.style.top = "auto";
+  } else if (h) {
+    const b = Math.min(
+      u,
+      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
+    ), P = Z(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "left";
+  } else if (x) {
+    const b = Math.min(
+      m,
+      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
+    ), P = Z(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.right = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.left = "auto", S = "right";
+  } else if (a) {
+    const b = Math.min(
+      y,
+      window.innerHeight - r.realHeight - v.width
+    );
+    let P = G(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.top = `${b}px`, t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "top";
+  } else if (c) {
+    const b = Math.min(
+      p,
+      window.innerHeight - (r == null ? void 0 : r.realHeight) - v.width
+    );
+    let P = G(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = `${b}px`, t.wrapper.style.top = "auto", t.wrapper.style.right = "auto", S = "bottom";
+  }
+  C ? t.arrow.classList.add("driver-popover-arrow-none") : Ee(n, S, e);
+}
+function Ee(e, o, t) {
+  const i = l("popover");
+  if (!i)
+    return;
+  const d = t.getBoundingClientRect(), n = se(), f = i.arrow, w = n.width, r = window.innerWidth, v = d.width, g = d.left, y = n.height, a = window.innerHeight, p = d.top, c = d.height;
+  f.className = "driver-popover-arrow";
+  let u = o, h = e;
+  if (o === "top" ? (g + v <= 0 ? (u = "right", h = "end") : g + v - w <= 0 && (u = "top", h = "start"), g >= r ? (u = "left", h = "end") : g + w >= r && (u = "top", h = "end")) : o === "bottom" ? (g + v <= 0 ? (u = "right", h = "start") : g + v - w <= 0 && (u = "bottom", h = "start"), g >= r ? (u = "left", h = "start") : g + w >= r && (u = "bottom", h = "end")) : o === "left" ? (p + c <= 0 ? (u = "bottom", h = "end") : p + c - y <= 0 && (u = "left", h = "start"), p >= a ? (u = "top", h = "end") : p + y >= a && (u = "left", h = "end")) : o === "right" && (p + c <= 0 ? (u = "bottom", h = "start") : p + c - y <= 0 && (u = "right", h = "start"), p >= a ? (u = "top", h = "start") : p + y >= a && (u = "right", h = "end")), !u)
+    f.classList.add("driver-popover-arrow-none");
+  else {
+    f.classList.add(`driver-popover-arrow-side-${u}`), f.classList.add(`driver-popover-arrow-align-${h}`);
+    const m = t.getBoundingClientRect(), x = f.getBoundingClientRect(), C = s("stagePadding") || 0, S = m.left - C < window.innerWidth && m.right + C > 0 && m.top - C < window.innerHeight && m.bottom + C > 0;
+    o === "bottom" && S && (x.x > m.x && x.x + x.width < m.x + m.width ? i.wrapper.style.transform = "translateY(0)" : (f.classList.remove(`driver-popover-arrow-align-${h}`), f.classList.add("driver-popover-arrow-none"), i.wrapper.style.transform = `translateY(-${C / 2}px)`));
+  }
+}
+function Le() {
+  const e = document.createElement("div");
+  e.classList.add("driver-popover");
+  const o = document.createElement("div");
+  o.classList.add("driver-popover-arrow");
+  const t = document.createElement("header");
+  t.id = "driver-popover-title", t.classList.add("driver-popover-title"), t.style.display = "none", t.innerText = "Popover Title";
+  const i = document.createElement("div");
+  i.id = "driver-popover-description", i.classList.add("driver-popover-description"), i.style.display = "none", i.innerText = "Popover description is here";
+  const d = document.createElement("button");
+  d.type = "button", d.classList.add("driver-popover-close-btn"), d.setAttribute("aria-label", "Close"), d.innerHTML = "&times;";
+  const n = document.createElement("footer");
+  n.classList.add("driver-popover-footer");
+  const f = document.createElement("span");
+  f.classList.add("driver-popover-progress-text"), f.innerText = "";
+  const w = document.createElement("span");
+  w.classList.add("driver-popover-navigation-btns");
+  const r = document.createElement("button");
+  r.type = "button", r.classList.add("driver-popover-prev-btn"), r.innerHTML = "&larr; Previous";
+  const v = document.createElement("button");
+  return v.type = "button", v.classList.add("driver-popover-next-btn"), v.innerHTML = "Next &rarr;", w.appendChild(r), w.appendChild(v), n.appendChild(f), n.appendChild(w), e.appendChild(d), e.appendChild(o), e.appendChild(t), e.appendChild(i), e.appendChild(n), {
+    wrapper: e,
+    arrow: o,
+    title: t,
+    description: i,
+    footer: n,
+    previousButton: r,
+    nextButton: v,
+    closeButton: d,
+    footerButtons: w,
+    progress: f
+  };
+}
+function Te() {
+  var o;
+  const e = l("popover");
+  e && ((o = e.wrapper.parentElement) == null || o.removeChild(e.wrapper));
+}
+function Ae(e = {}) {
+  F(e);
+  function o() {
+    s("allowClose") && g();
+  }
+  function t() {
+    const a = s("overlayClickBehavior");
+    if (s("allowClose") && a === "close") {
+      g();
+      return;
+    }
+    a === "nextStep" && i();
+  }
+  function i() {
+    const a = l("activeIndex"), p = s("steps") || [];
+    if (typeof a == "undefined")
+      return;
+    const c = a + 1;
+    p[c] ? v(c) : g();
+  }
+  function d() {
+    const a = l("activeIndex"), p = s("steps") || [];
+    if (typeof a == "undefined")
+      return;
+    const c = a - 1;
+    p[c] ? v(c) : g();
+  }
+  function n(a) {
+    (s("steps") || [])[a] ? v(a) : g();
+  }
+  function f() {
+    var x;
+    if (l("__transitionCallback"))
+      return;
+    const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
+    if (typeof p == "undefined" || typeof c == "undefined" || typeof l("activeIndex") == "undefined")
+      return;
+    const m = ((x = c.popover) == null ? void 0 : x.onPrevClick) || s("onPrevClick");
+    if (m)
+      return m(u, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    d();
+  }
+  function w() {
+    var m;
+    if (l("__transitionCallback"))
+      return;
+    const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
+    if (typeof p == "undefined" || typeof c == "undefined")
+      return;
+    const h = ((m = c.popover) == null ? void 0 : m.onNextClick) || s("onNextClick");
+    if (h)
+      return h(u, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    i();
+  }
+  function r() {
+    l("isInitialized") || (k("isInitialized", !0), document.body.classList.add("driver-active", s("animate") ? "driver-fade" : "driver-simple"), ke(), N("overlayClick", t), N("escapePress", o), N("arrowLeftPress", f), N("arrowRightPress", w));
+  }
+  function v(a = 0) {
+    var $, B, R, W, V, q, K, Y;
+    const p = s("steps");
+    if (!p) {
+      console.error("No steps to drive through"), g();
+      return;
+    }
+    if (!p[a]) {
+      g();
+      return;
+    }
+    k("__activeOnDestroyed", document.activeElement), k("activeIndex", a);
+    const c = p[a], u = p[a + 1], h = p[a - 1], m = (($ = c.popover) == null ? void 0 : $.doneBtnText) || s("doneBtnText") || "Done", x = s("allowClose"), C = typeof ((B = c.popover) == null ? void 0 : B.showProgress) != "undefined" ? (R = c.popover) == null ? void 0 : R.showProgress : s("showProgress"), b = (((W = c.popover) == null ? void 0 : W.progressText) || s("progressText") || "{{current}} of {{total}}").replace("{{current}}", `${a + 1}`).replace("{{total}}", `${p.length}`), P = ((V = c.popover) == null ? void 0 : V.showButtons) || s("showButtons"), E = [
+      "next",
+      "previous",
+      ...x ? ["close"] : []
+    ].filter((ce) => !(P != null && P.length) || P.includes(ce)), T = ((q = c.popover) == null ? void 0 : q.onNextClick) || s("onNextClick"), A = ((K = c.popover) == null ? void 0 : K.onPrevClick) || s("onPrevClick"), H = ((Y = c.popover) == null ? void 0 : Y.onCloseClick) || s("onCloseClick");
+    j({
+      ...c,
+      popover: {
+        showButtons: E,
+        nextBtnText: u ? void 0 : m,
+        disableButtons: [...h ? [] : ["previous"]],
+        showProgress: C,
+        progressText: b,
+        onNextClick: T || (() => {
+          u ? v(a + 1) : g();
+        }),
+        onPrevClick: A || (() => {
+          v(a - 1);
+        }),
+        onCloseClick: H || (() => {
+          g();
+        }),
+        ...(c == null ? void 0 : c.popover) || {}
+      }
+    });
+  }
+  function g(a = !0) {
+    const p = l("__activeElement"), c = l("__activeStep"), u = l("__activeOnDestroyed"), h = s("onDestroyStarted");
+    if (a && h) {
+      const C = !p || (p == null ? void 0 : p.id) === "driver-dummy-element";
+      h(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+      return;
+    }
+    const m = (c == null ? void 0 : c.onDeselected) || s("onDeselected"), x = s("onDestroyed");
+    if (document.body.classList.remove("driver-active", "driver-fade", "driver-simple"), Se(), Te(), Ce(), me(), de(), X(), p && c) {
+      const C = p.id === "driver-dummy-element";
+      m && m(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      }), x && x(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    }
+    u && u.focus();
+  }
+  const y = {
+    isActive: () => l("isInitialized") || !1,
+    refresh: M,
+    drive: (a = 0) => {
+      r(), v(a);
+    },
+    setConfig: F,
+    setSteps: (a) => {
+      X(), F({
+        ...s(),
+        steps: a
+      });
+    },
+    getConfig: s,
+    getState: l,
+    getActiveIndex: () => l("activeIndex"),
+    isFirstStep: () => l("activeIndex") === 0,
+    isLastStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && p === a.length - 1;
+    },
+    getActiveStep: () => l("activeStep"),
+    getActiveElement: () => l("activeElement"),
+    getPreviousElement: () => l("previousElement"),
+    getPreviousStep: () => l("previousStep"),
+    moveNext: i,
+    movePrevious: d,
+    moveTo: n,
+    hasNextStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && !!a[p + 1];
+    },
+    hasPreviousStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && !!a[p - 1];
+    },
+    highlight: (a) => {
+      r(), j({
+        ...a,
+        popover: a.popover ? {
+          showButtons: [],
+          showProgress: !1,
+          progressText: "",
+          ...a.popover
+        } : void 0
+      });
+    },
+    destroy: () => {
+      g(!1);
+    }
+  };
+  return le(y), y;
+}
+export {
+  Ae as driver
+};

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mensa
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - Tom de Grunt
@@ -188,6 +188,7 @@ files:
 - app/assets/config/mensa_manifest.js
 - app/assets/images/mensa/.keep
 - app/assets/stylesheets/mensa/application.css
+- app/assets/stylesheets/mensa/driver.css
 - app/assets/tailwind/mensa/engine.css
 - app/components/mensa/add_filter/component.css
 - app/components/mensa/add_filter/component.html.erb
@@ -239,6 +240,7 @@ files:
 - app/components/mensa/table/component.html.erb
 - app/components/mensa/table/component.rb
 - app/components/mensa/table/component_controller.js
+- app/components/mensa/table/tour_controller.js
 - app/components/mensa/table_row/component.css
 - app/components/mensa/table_row/component.html.erb
 - app/components/mensa/table_row/component.rb
@@ -343,6 +345,7 @@ files:
 - package-lock.json
 - package.json
 - vendor/javascript/@rails--request.js.js
+- vendor/javascript/driver.js.js
 homepage: https://github.com/entdec/mensa
 licenses:
 - MIT