/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, coerceNumber, customElement, coreProperty } from '@tylertech/forge-core';
import { tylIconModeEdit, tylIconWarning, tylIconCheck, tylIconBlock, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
import { StepAdapter } from './step-adapter';
import { STEP_CONSTANTS } from './step-constants';
import { StepCore } from './step-core';
import { IconRegistry, IconComponent } from '../../icon';
import { BaseComponent } from '../../core/base/base-component';
import { ExpansionPanelComponent } from '../../expansion-panel';
import { StateLayerComponent } from '../../state-layer';
import { FocusIndicatorComponent } from '../../focus-indicator';
const template = '<template><div class=\"container\" part=\"root\"><div class=\"forge-step\" part=\"step\"><div class=\"before\" part=\"before\"></div><div class=\"icon-container\" part=\"icon-container\"><div class=\"icon-content\" part=\"icon-content\"><span class=\"index\" part=\"index\"></span><forge-icon class=\"icon\" part=\"icon\"></forge-icon></div></div><div class=\"text-container\" part=\"text-container\"><div class=\"title\" part=\"title-container\"><slot></slot></div><div class=\"subtitle\" part=\"subtitle-container\"><slot name=\"optional\"></slot></div></div><div class=\"after\" part=\"after\"></div><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></div></template>';
const styles = ':host{--_step-primary-color:var(--forge-step-primary-color, var(--forge-theme-primary, #3f51b5));--_step-text-color:var(--forge-step-text-color, var(--forge-theme-on-primary, #ffffff));--_step-border-radius:var(--forge-step-border-radius, var(--forge-shape-extra-large, 16px));--_step-border-radius-vertical:var(--forge-step-border-radius-vertical, var(--forge-shape-medium, 4px));--_step-disabled-text-color:var(--forge-step-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));--_step-disabled-color:var(--forge-step-disabled-color, var(--forge-theme-surface-container-minimum, #f5f5f5));--_step-icon-fill:var(--forge-step-icon-fill, unset);--_step-icon-fill-active:var(--forge-step-icon-fill-active, var(--_step-primary-color));--_step-icon-text-color:var(--forge-step-icon-text-color, var(--forge-theme-primary, #3f51b5));--_step-icon-text-color-active:var(--forge-step-icon-text-color-active, var(--forge-theme-on-primary, #ffffff));--_step-icon-content-size:var(--forge-step-icon-content-size, 24px);--_step-icon-size:var(--forge-step-icon-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_step-icon-transition-duration:var(--forge-step-icon-transition-duration, var(--forge-animation-duration-medium4, 400ms));--_step-icon-transition-easing:var(--forge-step-icon-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_step-line-color:var(--forge-step-line-color, var(--forge-theme-outline, #e0e0e0));--_step-line-min-width:var(--forge-step-line-min-width, 10px);--_step-line-min-width-clustered:var(--forge-step-line-min-width-clustered, 25px);--_step-label-color:var(--forge-step-label-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_step-sub-label-color:var(--forge-step-sub-label-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_step-error-color:var(--forge-step-error-color, var(--forge-theme-error, #b00020));--_step-error-text-color:var(--forge-step-error-text-color, var(--forge-theme-on-error, #ffffff));--_step-expansion-panel-border-left-width:var(--forge-step-expansion-panel-border-left-width, 1px);--_step-expansion-panel-margin-bottom:var(--forge-step-expansion-panel-margin-bottom, 4px);--_step-expansion-panel-margin-left:var(--forge-step-expansion-panel-margin-left, 60px);--_step-expansion-panel-margin-top:var(--forge-step-expansion-panel-margin-top, 4px);--_step-expansion-panel-icon-color:var(--forge-step-expansion-panel-icon-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}:host(:focus){outline:0}:host([error]){--forge-state-layer-color:var(--_step-error-color)}:host(:first-child[alternative])::after{align-self:flex-start;top:22px;margin:0}:host(:last-child[alternative])::before{align-self:flex-start;top:22px;margin:0}:host(:not(:first-child):not(:last-child)[alternative])::after,:host(:not(:first-child):not(:last-child)[alternative])::before{align-self:flex-start;top:22px;min-width:7px;margin:0}:host(:not(:last-child)[alternative]) .after{align-self:flex-start;top:22px;position:absolute;width:calc(50% - 18px);left:calc(50% + 18px);height:0;right:0}:host(:not(:first-child)[alternative]) .before{align-self:flex-start;top:22px;position:absolute;left:0;width:calc(50% - 18px);height:0}:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::after,:host(:not(:first-child):not(:last-child)):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host(:last-child):host(:not([vertical]))::before{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px 0 0}:host(:is(:first-child)):host(:not([vertical]))::after{border-color:var(--_step-line-color);min-width:var(--_step-line-min-width);content:\"\";position:relative;height:0;-webkit-box-flex:1;flex:1;flex-basis:0.000000001px;border-top-style:solid;border-top-width:1px;border-radius:1px 0 0 1px;margin:0 -10px}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([vertical])::after{content:none}:host([vertical])::before{content:none}:host([vertical]) .forge-step{--_step-border-radius:var(--_step-border-radius-vertical);width:100%;min-height:52px}:host([vertical]) .forge-step .text-container{white-space:normal}:host([vertical]) .icon-container .icon-content{margin:0 16px 0 0}:host([vertical]) .expansion-panel{display:none}:host([vertical]) .expanded-icon{color:var(--_step-expansion-panel-icon-color);display:none;margin-left:auto}:host([vertical][expandable]) .expansion-panel{display:block}:host([ignore-user-expansion]) .forge-step .expanded-icon{display:none}forge-expansion-panel::part(root){border-color:var(--_step-line-color);margin-left:var(--_step-expansion-panel-margin-left);margin-top:var(--_step-expansion-panel-margin-top);margin-bottom:var(--_step-expansion-panel-margin-bottom);border-left-width:var(--_step-expansion-panel-border-left-width);border-left-style:solid}forge-focus-indicator{--forge-focus-indicator-color:var(--_step-primary-color);--forge-focus-indicator-shape:16px}.container{display:contents}.forge-step{-webkit-tap-highlight-color:transparent;padding:12px 16px;outline:0;background:0 0;border:none;border-radius:var(--_step-border-radius);position:relative;display:-webkit-box;display:flex;overflow:hidden;-webkit-box-align:center;align-items:center;z-index:1;cursor:pointer}.forge-step:focus{outline:0}.forge-step::-moz-focus-inner,.forge-step::-moz-focus-outer{padding:0;border:0}.forge-step.error forge-focus-indicator{--forge-focus-indicator-color:var(--_step-error-color)}.forge-step.vertical forge-focus-indicator{--forge-focus-indicator-shape:4px}.forge-step.selected:not(.disabled){--forge-state-layer-color:var(--_step-primary-color)}.forge-step.selected:not(.disabled)::before{background-color:var(--_step-primary-color);content:\"\";position:absolute;inset:0;opacity:.08;height:100%;width:100%}.forge-step.selected:not(.disabled).error{--_step-primary-color:var(--_step-error-color)}.forge-step .title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--_step-label-color);text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle{text-align:left;overflow:hidden;text-overflow:ellipsis}.forge-step .subtitle ::slotted(*){color:var(--_step-sub-label-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-step .icon-container .icon-content{color:var(--_step-icon-text-color);background-color:var(--_step-icon-fill);height:var(--_step-icon-content-size);width:var(--_step-icon-content-size);border-style:solid;border-width:2px;border-color:transparent;border-radius:50%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);transition:background-color var(--_step-icon-transition-duration) var(--_step-icon-transition-easing);margin:0 8px 0 0;-webkit-box-flex:0;flex:none}.forge-step .icon-container .icon-content forge-icon{font-size:var(--_step-icon-size)}.forge-step.disabled{color:var(--_step-disabled-text-color);cursor:not-allowed}.forge-step.disabled.forge-step .icon-container .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .title{color:var(--_step-disabled-text-color)}.forge-step.disabled .text-container .subtitle ::slotted(*){color:var(--_step-disabled-text-color)}.forge-step.alternative{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-step.alternative .icon-container .icon-content{margin:0}.forge-step.alternative .text-container{margin-top:8px;place-items:center}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content{border-color:var(--_step-primary-color)}.forge-step:not(.selected):not(.disabled).editable:not(.completed):not(.error) .icon-content .index,.forge-step:not(.selected):not(.disabled):not(.editable):not(.completed):not(.error) .icon-content .index{color:var(--_step-primary-color)}.forge-step.selected.disabled .icon-content{--_step-icon-fill:var(--_step-disabled-color);--_step-icon-text-color:var(--_step-disabled-text-color)}.forge-step.selected:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.selected:not(.disabled) .title{color:var(--_step-primary-color);font-weight:500}.forge-step.selected:not(.disabled) .subtitle ::slotted(*){color:var(--_step-primary-color);font-weight:500}.forge-step.error:not(.disabled) .title{color:var(--_step-error-color)}.forge-step.error:not(.disabled) .subtitle ::slotted(*){color:var(--_step-error-color)}.forge-step.error:not(.disabled) .icon-container .icon-content{--_step-icon-fill:var(--_step-error-color);--_step-icon-text-color:var(--_step-error-text-color)}.forge-step.completed:not(.disabled):not(.error):not(.editable) .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.completed:not(.disabled):not(.error).editable .icon-content{--_step-icon-fill:var(--_step-icon-fill-active);--_step-icon-text-color:var(--_step-icon-text-color-active)}.forge-step.expandable .expanded-icon{display:inline-block;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.forge-step.expandable.expanded .expanded-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.forge-step.expandable .icon-container .icon-content{margin:0 16px 0 0}.forge-step .text-container{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:not(:last-child)[clustered])::after{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:last-child[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}:host(:not(:first-child):not(:last-child)[clustered])::after,:host(:not(:first-child):not(:last-child)[clustered])::before{--_step-line-min-width:var(--_step-line-min-width-clustered)}';
/**
 * @tag forge-step
 *
 * @property {boolean} [alternative=false] - Whether the step is in the alternative style.
 * @property {boolean} [completed=false] - Whether the step is completed.
 * @property {boolean} [editable=false] - Whether the step is editable.
 * @property {boolean} [error=false] - Whether the step has an error.
 * @property {boolean} [selected=false] - Whether the step is selected.
 * @property {boolean} [disabled=false] - Whether the step is disabled.
 * @property {boolean} [vertical=false] - Whether the step is in vertical mode.
 * @property {boolean} [expanded=false] - Whether the step is expanded.
 * @property {boolean} [ignoreUserExpansion=false] - Whether the step should ignore user expansion.
 * @property {number} [index=undefined] - The index of the step.
 *
 * @attribute {boolean} [alternative=false] - Whether the step is in alternative mode.
 * @attribute {boolean} [completed=false] - Whether the step is completed.
 * @attribute {boolean} [editable=false] - Whether the step is editable.
 * @attribute {boolean} [error=false] - Whether the step has an error.
 * @attribute {boolean} [selected=false] - Whether the step is selected.
 * @attribute {boolean} [disabled=false] - Whether the step is disabled.
 * @attribute {boolean} [vertical=false] - Whether the step is in vertical mode.
 * @attribute {boolean} [expanded=false] - Whether the step is expanded.
 * @attribute {boolean} [ignore-user-expansion=false] - Whether the step should ignore user expansion.
 * @attribute {number} [index=undefined] - The index of the step.
 *
 * @cssproperty --forge-step-primary-color - The primary color of the step. Defaults to the primary theme.
 * @cssproperty --forge-step-text-color - The text color of the step. Defaults to the on-primary theme.
 * @cssproperty --forge-step-border-radius - The border radius of the step. Defaults to the extra-large shape.
 * @cssproperty --forge-step-border-radius-vertical - The border radius of the step in vertical mode. Defaults to the medium shape.
 * @cssproperty --forge-step-disabled-text-color - The text color of the step when disabled. Defaults to the text-low theme.
 * @cssproperty --forge-step-disabled-color - The color of the step when disabled. Defaults to the surface-container-minimum theme.
 * @cssproperty --forge-step-icon-fill - The fill color of the step icon. Defaults to unset.
 * @cssproperty --forge-step-icon-fill-active - The fill color of the step icon when active. Defaults to the primary color.
 * @cssproperty --forge-step-icon-text-color - The text color of the step icon. Defaults to the primary theme.
 * @cssproperty --forge-step-icon-text-color-active - The text color of the step icon when active. Defaults to the on-primary theme.
 * @cssproperty --forge-step-icon-content-size - The size of the step icon content. Defaults to 24px.
 * @cssproperty --forge-step-icon-size - The size of the step icon. Defaults to 0.875em.
 * @cssproperty --forge-step-icon-transition-duration - The duration of the step icon transition. Defaults to the medium4 animation duration.
 * @cssproperty --forge-step-icon-transition-easing - The easing of the step icon transition. Defaults to the standard animation easing.
 * @cssproperty --forge-step-line-color - The color of the step line. Defaults to the outline theme.
 * @cssproperty --forge-step-line-min-width - The minimum width of the step line. Defaults to 10px.
 * @cssproperty --forge-step-line-min-width-clustered - The minimum width of the step line when clustered. Defaults to 25px.
 * @cssproperty --forge-step-label-color - The color of the step label. Defaults to the text-high theme.
 * @cssproperty --forge-step-sub-label-color - The color of the step sub-label. Defaults to the text-medium theme.
 * @cssproperty --forge-step-error-color - The color of the step error. Defaults to the error theme.
 * @cssproperty --forge-step-error-text-color - The text color of the step error. Defaults to the on-error theme.
 * @cssproperty --forge-step-expansion-panel-border-left-width - The border left width of the step expansion panel. Defaults to 1px.
 * @cssproperty --forge-step-expansion-panel-margin-bottom - The margin bottom of the step expansion panel. Defaults to 4px.
 * @cssproperty --forge-step-expansion-panel-margin-left - The margin left of the step expansion panel. Defaults to 60px.
 * @cssproperty --forge-step-expansion-panel-margin-top - The margin top of the step expansion panel. Defaults to 4px.
 * @cssproperty --forge-step-expansion-panel-icon-color - The color of the step expansion panel icon. Defaults to the text-medium theme.
 *
 * @slot - The content of the step.
 * @slot optional - The optional content of the step.
 * @slot expansion-content - The content of the step expansion.
 *
 * @csspart root - The root element.
 * @csspart step - The step container element.
 * @csspart before - The line before the step.
 * @csspart after - The line after the step.
 * @csspart icon-container - The icon container element.
 * @csspart icon-content - The icon content element.
 * @csspart icon - The icon element.
 * @csspart index - The index content container.
 * @csspart text-container - The text container element.
 * @csspart title-container - The title container element.
 * @csspart subtitle-container - The subtitle container element.
 * @csspart state-layer - The state layer surface element.
 * @csspart focus-indicator - The focus indicator element.
 */
let StepComponent = class StepComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            STEP_CONSTANTS.attributes.COMPLETED,
            STEP_CONSTANTS.attributes.EDITABLE,
            STEP_CONSTANTS.attributes.ERROR,
            STEP_CONSTANTS.attributes.INDEX,
            STEP_CONSTANTS.attributes.SELECTED,
            STEP_CONSTANTS.attributes.ALTERNATIVE,
            STEP_CONSTANTS.attributes.DISABLED,
            STEP_CONSTANTS.attributes.VERTICAL,
            STEP_CONSTANTS.attributes.EXPANDED,
            STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION
        ];
    }
    constructor() {
        super();
        IconRegistry.define([tylIconModeEdit, tylIconCheck, tylIconWarning, tylIconBlock, tylIconKeyboardArrowDown]);
        attachShadowTemplate(this, template, styles);
        this._core = new StepCore(new StepAdapter(this));
    }
    connectedCallback() {
        this._core.initialize();
    }
    disconnectedCallback() {
        this._core.destroy();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case STEP_CONSTANTS.attributes.INDEX:
                this.index = coerceNumber(newValue);
                break;
            case STEP_CONSTANTS.attributes.COMPLETED:
                this.completed = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.EDITABLE:
                this.editable = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.ERROR:
                this.error = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.SELECTED:
                this.selected = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.ALTERNATIVE:
                this.alternative = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.VERTICAL:
                this.vertical = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.EXPANDED:
                this.expanded = coerceBoolean(newValue);
                break;
            case STEP_CONSTANTS.attributes.IGNORE_USER_EXPANSION:
                this.ignoreUserExpansion = coerceBoolean(newValue);
                break;
        }
    }
};
__decorate([
    coreProperty()
], StepComponent.prototype, "alternative", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "index", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "editable", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "completed", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "error", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "selected", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "disabled", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "vertical", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "expanded", void 0);
__decorate([
    coreProperty()
], StepComponent.prototype, "ignoreUserExpansion", void 0);
StepComponent = __decorate([
    customElement({
        name: STEP_CONSTANTS.elementName,
        dependencies: [IconComponent, ExpansionPanelComponent, StateLayerComponent, FocusIndicatorComponent]
    })
], StepComponent);
export { StepComponent };
