@glowhop/angular-tour 1.0.0

package/fesm2022/glowhop-angular-tour.mjs

@@ -0,0 +1,704 @@
+import * as i0 from '@angular/core';
+import { signal, effect, Injectable, InjectionToken, inject, computed, Directive, ElementRef, Input, Component, TemplateRef, DestroyRef, Injector, ViewChild, booleanAttribute } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { styleRecordToCssText, OVERLAY_IDLE_STYLE, POINTER_IDLE_STYLE, POPOVER_IDLE_STYLE, connectGlowTourRoot, POPOVER_IDLE_ATTRIBUTES, POINTER_IDLE_ATTRIBUTES, OVERLAY_IDLE_ATTRIBUTES, OVERLAY_PATH_IDLE_ATTRIBUTES } from '@glowhop/core-tour/adapter';
+import { createGlowTour as createGlowTour$1 } from '@glowhop/core-tour';
+
+const OVERLAY_IDLE_STYLE_TEXT = styleRecordToCssText(OVERLAY_IDLE_STYLE);
+const POINTER_IDLE_STYLE_TEXT = styleRecordToCssText(POINTER_IDLE_STYLE);
+const POPOVER_IDLE_STYLE_TEXT = styleRecordToCssText(POPOVER_IDLE_STYLE);
+const DEFAULT_POINTER_DIRECTION_CONTENT = {
+    bottom: "👇",
+    left: "👈",
+    right: "👉",
+    top: "👆",
+};
+const POINTER_DIRECTIONS = ["top", "bottom", "left", "right"];
+class GlowTourScope {
+    binding = signal(null);
+    tour = signal(null);
+    snapshot = signal(null);
+    state = this.snapshot.asReadonly();
+    constructor() {
+        effect((onCleanup) => {
+            const tour = this.tour();
+            if (!tour) {
+                this.snapshot.set(null);
+                return;
+            }
+            this.snapshot.set(tour.state.get());
+            onCleanup(tour.state.subscribe((state) => this.snapshot.set(state)));
+        }, { allowSignalWrites: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourScope, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourScope });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourScope, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+const GLOW_TOUR_SCOPE = new InjectionToken("GlowTourScope");
+function useTourScope() {
+    const scope = inject(GLOW_TOUR_SCOPE, { optional: true });
+    if (!scope) {
+        throw new Error('GlowTour components must be rendered inside <glow-tour-root [tour]="...">.');
+    }
+    return scope;
+}
+/**
+ * Injects the tour state signal into a component.
+ * Must be called within a GlowTourRoot component context.
+ * @returns A signal containing the current tour state or null.
+ */
+function injectGlowTour() {
+    return useTourScope().state;
+}
+class GlowTourReactiveComponent {
+    scope = useTourScope();
+    snapshot = this.scope.state;
+    step = computed(() => this.snapshot()?.currentStep?.currentProps ?? null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourReactiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourReactiveComponent, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourReactiveComponent, decorators: [{
+            type: Directive
+        }] });
+/** Root container component for GlowTour.js. Provides tour context and manages the root binding. */
+class GlowTourRoot {
+    /** The tour controller instance to display. */
+    tour;
+    /** Optional prefix for generated HTML IDs. */
+    idPrefix;
+    element = inject((ElementRef));
+    scope = inject(GlowTourScope);
+    active = null;
+    initialized = false;
+    ngOnChanges() {
+        if (this.initialized)
+            this.reconcile();
+    }
+    ngOnInit() {
+        if (!this.tour) {
+            throw new Error("GlowTourRoot requires a tour input.");
+        }
+        this.initialized = true;
+        this.reconcile();
+    }
+    ngOnDestroy() {
+        this.release();
+    }
+    reconcile() {
+        const root = this.element.nativeElement;
+        const tour = this.tour;
+        const idPrefix = this.idPrefix;
+        this.scope.tour.set(tour);
+        const current = this.active;
+        if (current !== null &&
+            current.root === root &&
+            current.tour === tour &&
+            current.idPrefix === idPrefix) {
+            return;
+        }
+        this.release();
+        const binding = connectGlowTourRoot(tour, {
+            idPrefix,
+            root,
+        });
+        const active = { binding, idPrefix, root, tour };
+        this.active = active;
+        this.scope.binding.set(binding);
+    }
+    release() {
+        const active = this.active;
+        if (!active)
+            return;
+        this.active = null;
+        active.binding.release();
+        if (this.scope.binding() === active.binding)
+            this.scope.binding.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourRoot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourRoot, isStandalone: true, selector: "glow-tour-root", inputs: { tour: "tour", idPrefix: "idPrefix" }, host: { attributes: { "data-glow-tour-root": "" } }, providers: [GlowTourScope, { provide: GLOW_TOUR_SCOPE, useExisting: GlowTourScope }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourRoot, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-root",
+                    standalone: true,
+                    host: { "data-glow-tour-root": "" },
+                    providers: [GlowTourScope, { provide: GLOW_TOUR_SCOPE, useExisting: GlowTourScope }],
+                    template: "<ng-content />",
+                }]
+        }], propDecorators: { tour: [{
+                type: Input,
+                args: [{ required: true }]
+            }], idPrefix: [{
+                type: Input
+            }] } });
+/** Header component displaying the current step's title. */
+class GlowTourHeader extends GlowTourReactiveComponent {
+    titleTemplate = computed(() => {
+        const title = this.step()?.title;
+        return title instanceof TemplateRef ? title : null;
+    });
+    titleText = computed(() => {
+        const title = this.step()?.title;
+        return typeof title === "string" ? title : "";
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourHeader, isStandalone: true, selector: "glow-tour-header", usesInheritance: true, ngImport: i0, template: `
+    <header data-glow-tour-header [id]="scope.binding()?.ids?.title">
+      @if (titleTemplate()) {
+        <ng-container [ngTemplateOutlet]="titleTemplate()" />
+      } @else {
+        {{ titleText() }}
+      }
+    </header>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-header",
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    template: `
+    <header data-glow-tour-header [id]="scope.binding()?.ids?.title">
+      @if (titleTemplate()) {
+        <ng-container [ngTemplateOutlet]="titleTemplate()" />
+      } @else {
+        {{ titleText() }}
+      }
+    </header>
+  `,
+                }]
+        }] });
+/** Content component displaying the current step's content with live region. */
+class GlowTourContent extends GlowTourReactiveComponent {
+    contentTemplate = computed(() => {
+        const content = this.step()?.content;
+        return content instanceof TemplateRef ? content : null;
+    });
+    contentText = computed(() => {
+        const content = this.step()?.content;
+        return typeof content === "string" ? content : "";
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourContent, isStandalone: true, selector: "glow-tour-content", usesInheritance: true, ngImport: i0, template: `
+    <div aria-live="polite" data-glow-tour-content [id]="scope.binding()?.ids?.description">
+      @if (contentTemplate()) {
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      } @else {
+        {{ contentText() }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-content",
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    template: `
+    <div aria-live="polite" data-glow-tour-content [id]="scope.binding()?.ids?.description">
+      @if (contentTemplate()) {
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      } @else {
+        {{ contentText() }}
+      }
+    </div>
+  `,
+                }]
+        }] });
+/** Footer component containing action buttons. Conditionally rendered based on tour step configuration. */
+class GlowTourFooter extends GlowTourReactiveComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourFooter, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourFooter, isStandalone: true, selector: "glow-tour-footer", usesInheritance: true, ngImport: i0, template: `@if (!step()?.popover?.hideFooter) { <footer data-glow-tour-footer><ng-content /></footer> }`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-footer",
+                    standalone: true,
+                    template: `@if (!step()?.popover?.hideFooter) { <footer data-glow-tour-footer><ng-content /></footer> }`,
+                }]
+        }] });
+class GlowTourBoundElement {
+    scope = useTourScope();
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    bind(element, bindElement) {
+        const cleanup = effect((onCleanup) => {
+            const binding = this.scope.binding();
+            if (binding)
+                onCleanup(bindElement(binding, element));
+        }, { injector: this.injector });
+        this.destroyRef.onDestroy(() => cleanup.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourBoundElement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourBoundElement, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourBoundElement, decorators: [{
+            type: Directive
+        }] });
+/** Popover component containing the tour content with accessibility attributes. */
+class GlowTourPopover extends GlowTourBoundElement {
+    element;
+    idleAriaHidden = POPOVER_IDLE_ATTRIBUTES["aria-hidden"];
+    idleInert = POPOVER_IDLE_ATTRIBUTES.inert;
+    idleStyle = POPOVER_IDLE_STYLE_TEXT;
+    ngOnInit() {
+        this.bind(this.element.nativeElement, (binding, element) => binding.bindPopover(element));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourPopover, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourPopover, isStandalone: true, selector: "glow-tour-popover", viewQueries: [{ propertyName: "element", first: true, predicate: ["tourElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <section #tourElement
+      [attr.aria-hidden]="idleAriaHidden"
+      data-glow-tour-popover
+      [attr.aria-describedby]="scope.binding()?.ids?.description"
+      [attr.aria-labelledby]="scope.binding()?.ids?.title"
+      [id]="scope.binding()?.ids?.popover"
+      [attr.inert]="idleInert"
+      role="dialog"
+      [style]="idleStyle"
+      tabindex="-1"
+    ><ng-content /></section>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourPopover, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-popover",
+                    standalone: true,
+                    // The idle attributes/style come from imported `@glowhop/core-tour/adapter`
+                    // constants, so ngc's AOT template analyzer (NG1010) cannot inline them as
+                    // string-interpolated literals in the template. Bound via component fields
+                    // instead; the values are still static, so server and client render
+                    // byte-identical output.
+                    template: `
+    <section #tourElement
+      [attr.aria-hidden]="idleAriaHidden"
+      data-glow-tour-popover
+      [attr.aria-describedby]="scope.binding()?.ids?.description"
+      [attr.aria-labelledby]="scope.binding()?.ids?.title"
+      [id]="scope.binding()?.ids?.popover"
+      [attr.inert]="idleInert"
+      role="dialog"
+      [style]="idleStyle"
+      tabindex="-1"
+    ><ng-content /></section>
+  `,
+                }]
+        }], propDecorators: { element: [{
+                type: ViewChild,
+                args: ["tourElement", { static: true }]
+            }] } });
+/** Pointer component displaying directional indicators pointing to the target element. */
+class GlowTourPointer extends GlowTourBoundElement {
+    element;
+    directionContentValue = signal(undefined);
+    idleAriaHidden = POINTER_IDLE_ATTRIBUTES["aria-hidden"];
+    idleStyle = POINTER_IDLE_STYLE_TEXT;
+    directions = POINTER_DIRECTIONS;
+    content = computed(() => ({
+        ...DEFAULT_POINTER_DIRECTION_CONTENT,
+        ...this.directionContentValue(),
+    }));
+    /** Optional custom content for each pointer direction. */
+    set directionContent(value) {
+        this.directionContentValue.set(value);
+    }
+    asTemplate(value) {
+        return value instanceof TemplateRef ? value : null;
+    }
+    ngOnInit() {
+        this.bind(this.element.nativeElement, (binding, element) => binding.bindPointer(element));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourPointer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourPointer, isStandalone: true, selector: "glow-tour-pointer", inputs: { directionContent: "directionContent" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["tourElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <div #tourElement data-glow-tour-pointer [attr.aria-hidden]="idleAriaHidden" [style]="idleStyle">
+      @for (direction of directions; track direction) {
+        <div [attr.data-glow-tour-pointer-direction]="direction">
+          @if (asTemplate(content()[direction]); as template) {
+            <ng-container [ngTemplateOutlet]="template" />
+          } @else {
+            {{ content()[direction] }}
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourPointer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-pointer",
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    template: `
+    <div #tourElement data-glow-tour-pointer [attr.aria-hidden]="idleAriaHidden" [style]="idleStyle">
+      @for (direction of directions; track direction) {
+        <div [attr.data-glow-tour-pointer-direction]="direction">
+          @if (asTemplate(content()[direction]); as template) {
+            <ng-container [ngTemplateOutlet]="template" />
+          } @else {
+            {{ content()[direction] }}
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { element: [{
+                type: ViewChild,
+                args: ["tourElement", { static: true }]
+            }], directionContent: [{
+                type: Input
+            }] } });
+/** Overlay component rendering a clipped SVG mask highlighting the target element. */
+class GlowTourOverlay extends GlowTourBoundElement {
+    element;
+    idleAriaHidden = OVERLAY_IDLE_ATTRIBUTES["aria-hidden"];
+    idleAllowInteraction = OVERLAY_IDLE_ATTRIBUTES["data-glow-tour-allow-interaction"];
+    idleInert = OVERLAY_IDLE_ATTRIBUTES.inert;
+    idleStyle = OVERLAY_IDLE_STYLE_TEXT;
+    idlePathCursor = OVERLAY_PATH_IDLE_ATTRIBUTES.cursor;
+    idlePathOpacity = OVERLAY_PATH_IDLE_ATTRIBUTES.opacity;
+    idlePathPointerEvents = OVERLAY_PATH_IDLE_ATTRIBUTES["pointer-events"];
+    ngOnInit() {
+        this.bind(this.element.nativeElement, (binding, element) => binding.bindOverlay(element));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourOverlay, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourOverlay, isStandalone: true, selector: "glow-tour-overlay", viewQueries: [{ propertyName: "element", first: true, predicate: ["tourElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <svg #tourElement
+      [attr.aria-hidden]="idleAriaHidden"
+      [attr.data-glow-tour-allow-interaction]="idleAllowInteraction"
+      data-glow-tour-overlay
+      focusable="false"
+      [attr.inert]="idleInert"
+      role="presentation"
+      [style]="idleStyle"
+      viewBox="0 0 0 0"
+    >
+      <path
+        [attr.cursor]="idlePathCursor"
+        data-glow-tour-overlay-path
+        fill-rule="evenodd"
+        [attr.opacity]="idlePathOpacity"
+        [attr.pointer-events]="idlePathPointerEvents"
+      /><ng-content />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourOverlay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-overlay",
+                    standalone: true,
+                    template: `
+    <svg #tourElement
+      [attr.aria-hidden]="idleAriaHidden"
+      [attr.data-glow-tour-allow-interaction]="idleAllowInteraction"
+      data-glow-tour-overlay
+      focusable="false"
+      [attr.inert]="idleInert"
+      role="presentation"
+      [style]="idleStyle"
+      viewBox="0 0 0 0"
+    >
+      <path
+        [attr.cursor]="idlePathCursor"
+        data-glow-tour-overlay-path
+        fill-rule="evenodd"
+        [attr.opacity]="idlePathOpacity"
+        [attr.pointer-events]="idlePathPointerEvents"
+      /><ng-content />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { element: [{
+                type: ViewChild,
+                args: ["tourElement", { static: true }]
+            }] } });
+class GlowTourTrigger extends GlowTourReactiveComponent {
+    ariaLabelValue = signal(undefined);
+    disabledValue = signal(false);
+    ariaLabelText = computed(() => this.ariaLabelValue());
+    consumerDisabled = computed(() => this.disabledValue());
+    ariaControls = computed(() => this.scope.binding()?.ids.popover);
+    setAriaLabel(value) {
+        this.ariaLabelValue.set(value);
+    }
+    setDisabled(value) {
+        this.disabledValue.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourTrigger, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourTrigger, decorators: [{
+            type: Directive
+        }] });
+/** Button component for navigating to the previous step in the tour. */
+class GlowTourBackTrigger extends GlowTourTrigger {
+    backLabelValue = signal(undefined);
+    /** Optional aria-label for the back button. */
+    set ariaLabel(value) {
+        this.setAriaLabel(value);
+    }
+    /** Optional label text for the back button. */
+    set backLabel(value) {
+        this.backLabelValue.set(value);
+    }
+    /** Whether the button is disabled. */
+    set disabled(value) {
+        this.setDisabled(value);
+    }
+    isDisabled = computed(() => this.consumerDisabled() ||
+        !this.snapshot()?.canPrevious ||
+        this.step()?.popover?.disablePreviousButton === true);
+    label = computed(() => this.backLabelValue() ?? "Back step");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourBackTrigger, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourBackTrigger, isStandalone: true, selector: "glow-tour-back-trigger", inputs: { ariaLabel: "ariaLabel", backLabel: "backLabel", disabled: ["disabled", "disabled", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    @if (!step()?.popover?.hidePreviousButton) {
+      <button
+        data-glow-tour-previous-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourBackTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-back-trigger",
+                    standalone: true,
+                    template: `
+    @if (!step()?.popover?.hidePreviousButton) {
+      <button
+        data-glow-tour-previous-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], backLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+/** Button component for advancing to the next step or finishing the tour. */
+class GlowTourAdvanceTrigger extends GlowTourTrigger {
+    finishLabelValue = signal(undefined);
+    advanceLabelValue = signal(undefined);
+    /** Optional aria-label for the advance button. */
+    set ariaLabel(value) {
+        this.setAriaLabel(value);
+    }
+    /** Whether the button is disabled. */
+    set disabled(value) {
+        this.setDisabled(value);
+    }
+    /** Optional label text for the finish step. */
+    set finishLabel(value) {
+        this.finishLabelValue.set(value);
+    }
+    /** Optional label text for advancing to the next step. */
+    set advanceLabel(value) {
+        this.advanceLabelValue.set(value);
+    }
+    isDisabled = computed(() => this.consumerDisabled() ||
+        !this.snapshot()?.canAdvance ||
+        this.step()?.popover?.disableAdvanceButton === true);
+    label = computed(() => {
+        return this.snapshot()?.isLastStep
+            ? (this.finishLabelValue() ?? "Finish tour")
+            : (this.advanceLabelValue() ?? "Advance step");
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourAdvanceTrigger, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourAdvanceTrigger, isStandalone: true, selector: "glow-tour-advance-trigger", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], finishLabel: "finishLabel", advanceLabel: "advanceLabel" }, usesInheritance: true, ngImport: i0, template: `
+    @if (!step()?.popover?.hideAdvanceButton) {
+      <button
+        data-glow-tour-advance-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourAdvanceTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-advance-trigger",
+                    standalone: true,
+                    template: `
+    @if (!step()?.popover?.hideAdvanceButton) {
+      <button
+        data-glow-tour-advance-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], finishLabel: [{
+                type: Input
+            }], advanceLabel: [{
+                type: Input
+            }] } });
+/** Button component for canceling/skipping the tour. */
+class GlowTourCancelTrigger extends GlowTourTrigger {
+    /** Optional aria-label for the cancel button. */
+    set ariaLabel(value) {
+        this.setAriaLabel(value);
+    }
+    /** Whether the button is disabled. */
+    set disabled(value) {
+        this.setDisabled(value);
+    }
+    isDisabled = computed(() => this.consumerDisabled() || !this.snapshot()?.canCancel);
+    label = computed(() => "Skip");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourCancelTrigger, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GlowTourCancelTrigger, isStandalone: true, selector: "glow-tour-cancel-trigger", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    @if (snapshot()?.canCancel) {
+      <button
+        data-glow-tour-cancel-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourCancelTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-cancel-trigger",
+                    standalone: true,
+                    template: `
+    @if (snapshot()?.canCancel) {
+      <button
+        data-glow-tour-cancel-trigger
+        [attr.aria-controls]="ariaControls()"
+        [attr.aria-disabled]="isDisabled() ? 'true' : 'false'"
+        [attr.aria-label]="ariaLabelText() ?? label()"
+        [attr.data-glow-tour-consumer-disabled]="consumerDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        type="button"
+      ><ng-content>{{ label() }}</ng-content></button>
+    }
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/** Default GlowTour.js component that renders all tour UI elements in a standard layout. */
+class GlowTourDefault {
+    /** The tour controller instance to display. */
+    tour;
+    /** Optional prefix for generated HTML IDs. */
+    idPrefix;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GlowTourDefault, isStandalone: true, selector: "glow-tour-default", inputs: { tour: "tour", idPrefix: "idPrefix" }, ngImport: i0, template: `
+    <glow-tour-root [tour]="tour" [idPrefix]="idPrefix">
+      <glow-tour-overlay />
+      <glow-tour-pointer />
+      <glow-tour-popover>
+        <glow-tour-header />
+        <glow-tour-content />
+        <glow-tour-footer>
+          <glow-tour-cancel-trigger />
+          <glow-tour-back-trigger />
+          <glow-tour-advance-trigger />
+        </glow-tour-footer>
+      </glow-tour-popover>
+    </glow-tour-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: GlowTourRoot, selector: "glow-tour-root", inputs: ["tour", "idPrefix"] }, { kind: "component", type: GlowTourOverlay, selector: "glow-tour-overlay" }, { kind: "component", type: GlowTourPointer, selector: "glow-tour-pointer", inputs: ["directionContent"] }, { kind: "component", type: GlowTourPopover, selector: "glow-tour-popover" }, { kind: "component", type: GlowTourHeader, selector: "glow-tour-header" }, { kind: "component", type: GlowTourContent, selector: "glow-tour-content" }, { kind: "component", type: GlowTourFooter, selector: "glow-tour-footer" }, { kind: "component", type: GlowTourCancelTrigger, selector: "glow-tour-cancel-trigger", inputs: ["ariaLabel", "disabled"] }, { kind: "component", type: GlowTourBackTrigger, selector: "glow-tour-back-trigger", inputs: ["ariaLabel", "backLabel", "disabled"] }, { kind: "component", type: GlowTourAdvanceTrigger, selector: "glow-tour-advance-trigger", inputs: ["ariaLabel", "disabled", "finishLabel", "advanceLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GlowTourDefault, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "glow-tour-default",
+                    standalone: true,
+                    imports: [
+                        GlowTourRoot,
+                        GlowTourOverlay,
+                        GlowTourPointer,
+                        GlowTourPopover,
+                        GlowTourHeader,
+                        GlowTourContent,
+                        GlowTourFooter,
+                        GlowTourCancelTrigger,
+                        GlowTourBackTrigger,
+                        GlowTourAdvanceTrigger,
+                    ],
+                    template: `
+    <glow-tour-root [tour]="tour" [idPrefix]="idPrefix">
+      <glow-tour-overlay />
+      <glow-tour-pointer />
+      <glow-tour-popover>
+        <glow-tour-header />
+        <glow-tour-content />
+        <glow-tour-footer>
+          <glow-tour-cancel-trigger />
+          <glow-tour-back-trigger />
+          <glow-tour-advance-trigger />
+        </glow-tour-footer>
+      </glow-tour-popover>
+    </glow-tour-root>
+  `,
+                }]
+        }], propDecorators: { tour: [{
+                type: Input,
+                args: [{ required: true }]
+            }], idPrefix: [{
+                type: Input
+            }] } });
+
+/**
+ * Creates a new GlowTour.js instance for Angular.
+ * @param options Tour options for error handling.
+ * @returns A tour controller ready to run Angular workflows.
+ */
+function createGlowTour(options = {}) {
+    return createGlowTour$1(options);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GlowTourAdvanceTrigger, GlowTourBackTrigger, GlowTourCancelTrigger, GlowTourContent, GlowTourDefault, GlowTourFooter, GlowTourHeader, GlowTourOverlay, GlowTourPointer, GlowTourPopover, GlowTourRoot, createGlowTour, injectGlowTour };
+//# sourceMappingURL=glowhop-angular-tour.mjs.map