// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Emit } from '../../../../events/Decorators/EmitDecorator';
import { Themeable } from '../../../Behaviors/Themeable';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { tourStepElementCosmopolitanStyle } from './Themes/TourStepElement.Cosmopolitan';
import { tourStepElementJoyStyle } from './Themes/TourStepElement.Joy';
import { tourStepElementMemphisStyle } from './Themes/TourStepElement.Memphis';
import { tourStepElementTemplate } from './TourStepElementTemplate';
// #endregion
const TOUR_STEP_LABELS_DEFAULT = {
    next: 'Next',
    previous: 'Previous',
    finish: 'Finish',
    skip: 'Skip'
};
/**
 * TourStep - Displays the content and navigation controls for a single tour step.
 *
 * @description
 * Rendered automatically by `mosaik-tour` to present one step of the guided tour.
 * The step data, first/last step flags, and navigation events are controlled by
 * the parent `mosaik-tour` - all via JavaScript properties, not HTML attributes.
 *
 * @name TourStep
 * @element mosaik-tour-step
 * @category Overlays
 *
 * @csspart actions - The actions part.
 * @csspart container - The container part.
 * @csspart content - The content part.
 * @csspart description - The description part.
 * @csspart finish - The finish part.
 * @csspart header - The header part.
 * @csspart next - The next part.
 * @csspart previous - The previous part.
 * @csspart skip - The skip part.
 * @csspart title - The title part.
 *
 * @cssprop {String} --tour-step-background-color - The step background color CSS custom property.
 * @cssprop {String} --tour-step-border-color - The step border color CSS custom property.
 * @cssprop {String} --tour-step-border-radius - The step border radius CSS custom property.
 * @cssprop {String} --tour-step-border-style - The step border style CSS custom property.
 * @cssprop {String} --tour-step-border-width - The step border width CSS custom property.
 * @cssprop {String} --tour-step-content-margin-bottom - The step content margin bottom CSS custom property.
 * @cssprop {String} --tour-step-font-family - The step font family CSS custom property.
 * @cssprop {String} --tour-step-font-letter-spacing - The step font letter spacing CSS custom property.
 * @cssprop {String} --tour-step-font-line-height - The step font line height CSS custom property.
 * @cssprop {String} --tour-step-font-size - The step font size CSS custom property.
 * @cssprop {String} --tour-step-font-text-decoration - The step font text decoration CSS custom property.
 * @cssprop {String} --tour-step-font-text-transform - The step font text transform CSS custom property.
 * @cssprop {String} --tour-step-font-weight - The step font weight CSS custom property.
 * @cssprop {String} --tour-step-foreground-color - The step foreground color CSS custom property.
 * @cssprop {String} --tour-step-gap - The step gap CSS custom property.
 * @cssprop {String} --tour-step-header-font-weight - The step header font weight CSS custom property.
 * @cssprop {String} --tour-step-header-margin-bottom - The step header margin bottom CSS custom property.
 * @cssprop {String} --tour-step-padding-bottom - The step padding bottom CSS custom property.
 * @cssprop {String} --tour-step-padding-left - The step padding left CSS custom property.
 * @cssprop {String} --tour-step-padding-right - The step padding right CSS custom property.
 * @cssprop {String} --tour-step-padding-top - The step padding top CSS custom property.
 * @cssprop {String} --tour-step-shadow - The step shadow CSS custom property.
 * @cssprop {String} --tour-step-shadow-blur - The step shadow blur CSS custom property.
 * @cssprop {String} --tour-step-shadow-color - The step shadow color CSS custom property.
 * @cssprop {String} --tour-step-shadow-offset-x - The step shadow offset x CSS custom property.
 * @cssprop {String} --tour-step-shadow-offset-y - The step shadow offset y CSS custom property.
 * @cssprop {String} --tour-step-shadow-spread - The step shadow spread CSS custom property.
 * @cssprop {String} --tour-step-transition-duration - The step transition duration CSS custom property.
 * @cssprop {String} --tour-step-transition-mode - The step transition mode CSS custom property.
 * @cssprop {String} --tour-step-transition-property - The step transition property CSS custom property.
 * @cssprop {String} --tour-step-translate - The step translate CSS custom property.
 *
 * @dependency mosaik-button - The Button element.
 *
 * @example
 * Tour step managed by the parent tour element:
 * ```html
 * <!-- mosaik-tour-step is rendered automatically by mosaik-tour -->
 * <mosaik-tour tour-id="onboarding"></mosaik-tour>
 * ```
 *
 * @public
 */
let TourStepElement = class TourStepElement extends Themeable(CustomElement) {
    // #region Fields
    _previous;
    _next;
    _finish;
    _skip;
    _step;
    _isFirstStep;
    _isLastStep;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._step = null;
        this._isFirstStep = true;
        this._isLastStep = false;
        this._previous = new HTMLElementEventEmitter(this, 'previous');
        this._next = new HTMLElementEventEmitter(this, 'next');
        this._finish = new HTMLElementEventEmitter(this, 'finish');
        this._skip = new HTMLElementEventEmitter(this, 'skip');
    }
    // #endregion
    // #region Properties
    /**
     * Gets or sets the step data.
     *
     * @public
     */
    get step() {
        return this._step;
    }
    set step(value) {
        if (this._step !== value) {
            this._step = value;
            this.requestUpdate('step');
        }
    }
    /**
     * Gets or sets whether this is the first step.
     *
     * @public
     */
    get isFirstStep() {
        return this._isFirstStep;
    }
    set isFirstStep(value) {
        if (this._isFirstStep !== value) {
            this._isFirstStep = value;
            this.requestUpdate('isFirstStep');
        }
    }
    /**
     * Gets or sets whether this is the last step.
     *
     * @public
     */
    get isLastStep() {
        return this._isLastStep;
    }
    set isLastStep(value) {
        if (this._isLastStep !== value) {
            this._isLastStep = value;
            this.requestUpdate('isLastStep');
        }
    }
    /**
     * Provides resolved labels for the current step.
     *
     * @public
     * @readonly
     */
    get resolvedLabels() {
        return {
            ...TOUR_STEP_LABELS_DEFAULT,
            ...(this._step?.labels ?? {})
        };
    }
    /**
     * Fired when the previous action is triggered.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get previous() {
        return this._previous;
    }
    /**
     * Fired when the next action is triggered.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get next() {
        return this._next;
    }
    /**
     * Fired when the finish action is triggered.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get finish() {
        return this._finish;
    }
    /**
     * Fired when the skip action is triggered.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get skip() {
        return this._skip;
    }
    // #endregion
    // #region Methods
    /**
     * Emits the previous action event.
     *
     * @public
     */
    onPreviousClicked() {
        this._previous.emit({});
    }
    /**
     * Emits the next action event.
     *
     * @public
     */
    onNextClicked() {
        this._next.emit({});
    }
    /**
     * Emits the finish action event.
     *
     * @public
     */
    onFinishClicked() {
        this._finish.emit({});
    }
    /**
     * Emits the skip action event.
     *
     * @public
     */
    onSkipClicked() {
        this._skip.emit({});
    }
};
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], TourStepElement.prototype, "step", null);
__decorate([
    Property({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TourStepElement.prototype, "isFirstStep", null);
__decorate([
    Property({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TourStepElement.prototype, "isLastStep", null);
__decorate([
    Emit({ eventName: 'previous' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], TourStepElement.prototype, "previous", null);
__decorate([
    Emit({ eventName: 'next' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], TourStepElement.prototype, "next", null);
__decorate([
    Emit({ eventName: 'finish' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], TourStepElement.prototype, "finish", null);
__decorate([
    Emit({ eventName: 'skip' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], TourStepElement.prototype, "skip", null);
TourStepElement = __decorate([
    Component({
        selector: 'mosaik-tour-step',
        template: tourStepElementTemplate,
        themes: {
            joy: tourStepElementJoyStyle,
            memphis: tourStepElementMemphisStyle,
            cosmopolitan: tourStepElementCosmopolitanStyle
        },
        imports: [
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], TourStepElement);
export { TourStepElement };
//# sourceMappingURL=TourStepElement.js.map