@mapsindoors/map-template 1.95.8 → 1.95.9

package/dist/mi-route-instructions-step-legacy.entry.js

@@ -1,322 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZQHyS7V.js';
-import { U as UnitSystem } from './unit-system.enum-BwPgAWqL.js';
-import { c as isInternetExplorer } from './utils-DNHzysQ6.js';
-
-const routeInstructionsStepLegacyCss = () => `:host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;grid-template-columns:40px 1fr 40px;grid-template-areas:"actionicon heading heading" "modeicon description toggle" "modeicon substeps substeps"}.step__action-icon{-ms-grid-row:1;-ms-grid-column:1;display:flex;justify-content:center;align-items:center;grid-area:actionicon}.step__action-icon--circled{position:relative}.step__action-icon--circled::before{position:absolute;width:24px;height:24px;border:1px solid #1c1917;content:"";border-radius:50%}.step__action-icon mi-icon{display:block;width:12px;height:12px}.step__heading{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:heading;font-size:1rem;margin:0;border-bottom:1px solid #DCDCDF;border-top:1px solid #DCDCDF;padding:12px}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1;grid-area:modeicon;display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__description{-ms-grid-row:2;-ms-grid-column:2;grid-area:description;padding:12px}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{-ms-grid-row:2;-ms-grid-column:3;grid-area:toggle;display:flex;justify-content:center;align-items:center;transition:transform 300ms;cursor:pointer}.step__toggle--open{transform:rotate(180deg)}.step__toggle mi-icon{width:16px;height:16px;display:block;background-color:#3b82f6}.step__substeps{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:substeps}`;
-
-const RouteInstructionsStepLegacy = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.stepClicked = createEvent(this, "stepClicked", 7);
-        /**
-         * If indoor substeps/maneuvers should be hidden.
-         *
-         * @type {boolean}
-         */
-        this.hideIndoorSubsteps = true;
-        /**
-         * The route context of previous step, if any.
-         * @type {string}
-         */
-        this.fromRouteContext = '';
-        /**
-         * Set imperial or metric as default unit system.
-         * @type {UnitSystem} 'imperial' or 'metric'
-         */
-        this.unit = UnitSystem.Metric;
-        /**
-         * Signifies wether substeps are open or not.
-         */
-        this.substepsAreOpen = false;
-        this.isInternetExplorer = isInternetExplorer();
-    }
-    parseStepProp() {
-        if (this.step) {
-            this.stepData = JSON.parse(this.step);
-        }
-    }
-    parseTranslationsProp() {
-        if (this.translations) {
-            this.translationsData = JSON.parse(this.translations);
-        }
-    }
-    componentWillLoad() {
-        this.parseStepProp();
-        this.parseTranslationsProp();
-    }
-    /**
-     * Render if there is step data.
-     */
-    render() {
-        return this.stepData && this.translationsData ? this.renderStep() : null;
-    }
-    /**
-     * Emits stepClicked event (if click target is not related to an action)
-     * @param event Event
-     */
-    stepClickHandler(event) {
-        // Don't emit click event if clicked on elements that are actions to other things
-        if (Array.from(event.target.classList).includes('icon-toggle')) {
-            return;
-        }
-        let maneuverIndex = null;
-        if (event.target.dataset.maneuverIndex !== undefined) {
-            maneuverIndex = parseInt(event.target.dataset.maneuverIndex);
-        }
-        this.stepClicked.emit({ maneuverIndex });
-    }
-    /**
-     * Render step part depending on travel mode.
-     *
-     * @returns {JSX.Element}
-     */
-    renderStep() {
-        switch (this.stepData.travel_mode.toUpperCase()) {
-            case 'DRIVING':
-                return this.renderDrivingStep();
-            case 'WALKING':
-                return this.renderWalkingStep();
-            case 'BICYCLING':
-                return this.renderBicyclingStep();
-            case 'TRANSIT':
-                return this.renderTransitStep();
-            default:
-                return h("div", null, "Unknown travel mode: ", this.stepData.travel_mode);
-        }
-    }
-    /**
-     * Render the travel mode indicator and dotted/solid line.
-     *
-     * @returns {JSX.Element}
-     */
-    renderTravelMode() {
-        if (this.isInternetExplorer) {
-            return null;
-        }
-        let travelModeIcon;
-        switch (this.stepData.travel_mode.toUpperCase()) {
-            case 'DRIVING':
-                travelModeIcon = 'car';
-                break;
-            case 'WALKING':
-                travelModeIcon = 'walk';
-                break;
-            case 'BICYCLING':
-                travelModeIcon = 'bike';
-                break;
-            case 'TRANSIT':
-                travelModeIcon = this.getTransitVehicleIconName();
-                break;
-        }
-        return (h("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === 'TRANSIT' ? 'solid' : 'dotted'}` }, h("span", { class: "step__travel-mode-icon" }, h("mi-icon", { part: "step-travel-mode-icon", "icon-name": travelModeIcon }))));
-    }
-    /**
-     * Get icon name for transit vehicle.
-     *
-     * @returns {string}
-     */
-    getTransitVehicleIconName() {
-        var _a, _b;
-        const stepTransitVehicleType = (_b = (_a = this.stepData.transit_information) === null || _a === void 0 ? void 0 : _a.line.vehicle) === null || _b === void 0 ? void 0 : _b.type.toLowerCase();
-        const transitVehicleTypes = ['boat', 'bus', 'railway', 'train', 'subway']; // Supported Transit Vehicles
-        return stepTransitVehicleType && transitVehicleTypes.some(type => type === stepTransitVehicleType) ? stepTransitVehicleType : 'transit';
-    }
-    /**
-     * Toggles visibility of sub steps (steps in steps)
-     */
-    toggleSubsteps() {
-        this.substepsAreOpen = !this.substepsAreOpen;
-    }
-    /**
-     * Render substeps if they should be visible.
-     *
-     * @returns {JSX.Element}
-     */
-    renderSubsteps() {
-        return this.substepsAreOpen === true ? h("div", { class: "step__substeps" }, this.stepData.steps.map((maneuver, index) => {
-            return h("mi-route-instructions-maneuver-legacy", { "data-maneuver-index": index, maneuver: JSON.stringify(maneuver), translations: this.translations, unit: this.unit,
-                // @ts-ignore
-                exportparts: "\n                        maneuver-icon,\n                        maneuver-description,\n                        maneuver-description-distance,\n                        maneuver-description-distance-border" });
-        })) : null;
-    }
-    /**
-     * Render the toggle button for the sub step expander.
-     *
-     * @returns {JSX.Element}
-     */
-    renderToggleButton() {
-        // Return null if none substeps/maneuvers is provided
-        if (this.stepData.steps.length <= 0) {
-            return null;
-        }
-        // Return null if indoor substeps/maneuvers should be hidden and if the step context corresponds to being inside a building
-        if (this.hideIndoorSubsteps === true && this.stepData.route_context.toLowerCase() === 'insidebuilding') {
-            return null;
-        }
-        return (h("span", { class: `step__toggle ${this.substepsAreOpen ? 'step__toggle--open' : ''}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? '\u25BC' :
-            h("mi-icon", { part: "step-toggle", "icon-name": "toggle" })));
-    }
-    /**
-     * Render time and distance part.
-     *
-     * @returns {JSX.Element}
-     */
-    renderTimeAndDistance() {
-        return h("span", { part: "step-info", class: "step__distance-duration" }, h("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), "\u00A0\u00B7\u00A0", h("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), h("br", null));
-    }
-    /**
-     * Render a driving step.
-     *
-     * @returns {JSX.Element}
-     */
-    renderDrivingStep() {
-        return h("div", { class: "step", onClick: e => this.stepClickHandler(e) }, this.isInternetExplorer ? null :
-            h("span", { class: "step__action-icon step__action-icon--circled" }, h("mi-icon", { "icon-name": "car" })), h("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), h("div", { part: "step-description", class: "step__description" }, this.translationsData.drive, h("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
-    }
-    /**
-     * Get display heading.
-     *
-     * @returns {string}
-     */
-    getStepHeading() {
-        var _a;
-        const defaultHeadings = {
-            'driving': this.translationsData.drive,
-            'walking': this.translationsData.walk,
-            'bicycling': this.translationsData.bike
-        };
-        return ((_a = this.stepData.steps[0]) === null || _a === void 0 ? void 0 : _a.instructions) ?
-            this.stepData.steps[0].instructions :
-            defaultHeadings[this.stepData.travel_mode.toLowerCase()];
-    }
-    /**
-     * Render a walking step.
-     *
-     *
-     * @returns {JSX.Element}
-     */
-    renderWalkingStep() {
-        let heading;
-        let actionIconName;
-        /*
-         * Determine action heading:
-         */
-        if (this.stepData.parking === true) {
-            // Park your vehicle
-            heading = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ''}`;
-            actionIconName = 'park';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'STEPS') { // TODO: SDK, why is highway not always set?
-            // Take stairs
-            heading = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'stairs';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'LADDER') {
-            // Take a laddder
-            heading = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'ladder';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'ESCALATOR') {
-            // Take an escalator
-            heading = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'escalator';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'WHEELCHAIRRAMP') {
-            // Take wheel chair ramp
-            heading = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'wheelchair-ramp';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'WHEELCHAIRLIFT') {
-            // Take wheel chair lift
-            heading = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'wheelchair-lift';
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'ELEVATOR') {
-            // Take elevator
-            heading = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`;
-            actionIconName = 'elevator';
-        }
-        else if (this.fromRouteContext === 'InsideBuilding' && this.stepData.route_context === 'Outside') {
-            // Exit from inside to outside
-            heading = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context);
-            actionIconName = 'exit';
-        }
-        else if (this.fromRouteContext === 'InsideBuilding' && this.stepData.route_context === 'InsideBuilding') {
-            heading = this.getStepHeading();
-            actionIconName = 'walk';
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'Outside' && this.fromTravelMode.toUpperCase() === 'TRANSIT') {
-            // Switching between public transportation
-            heading = this.fromTransitStop;
-            actionIconName = 'transit-stop';
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'Outside') {
-            heading = this.getStepHeading();
-            actionIconName = 'walk';
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'InsideBuilding') {
-            // Enter from outside to inside
-            heading = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context);
-            actionIconName = 'enter';
-        }
-        else {
-            // Origin Location name or empty
-            heading = this.fromRouteContext;
-            actionIconName = 'circle';
-        }
-        return h("div", { class: "step", onClick: e => this.stepClickHandler(e) }, this.isInternetExplorer ? null :
-            h("span", { class: `step__action-icon ${actionIconName !== 'circle' ? 'step__action-icon--circled' : ''}` }, h("mi-icon", { "icon-name": actionIconName })), h("h3", { part: "step-heading", class: "step__heading" }, heading), this.renderTravelMode(), h("div", { part: "step-description", class: "step__description" }, this.translationsData.walk, h("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
-    }
-    /**
-     * Add building or venue name to the step heading
-     * @param {string} heading
-     * @param {StepContext} stepContext
-     * @returns
-     */
-    addStepContextNameToHeading(heading, stepContext) {
-        if (stepContext) {
-            if (stepContext.building) {
-                heading += ` ${stepContext.building.buildingInfo.name} ${this.translationsData.building}`;
-            }
-            else if (stepContext.venue) {
-                heading += ` ${stepContext.venue.venueInfo.name} ${this.translationsData.venue}`;
-            }
-        }
-        return heading;
-    }
-    /**
-     * Render a bicycling step.
-     *
-     * @returns {JSX.Element}
-     */
-    renderBicyclingStep() {
-        return h("div", { class: "step", onClick: e => this.stepClickHandler(e) }, this.isInternetExplorer ? null :
-            h("span", { class: "step__action-icon step__action-icon--circled" }, h("mi-icon", { "icon-name": "bike" })), h("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), h("div", { part: "step-description", class: "step__description" }, this.translationsData.bike, h("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
-    }
-    /**
-     * Render a transit step.
-     *
-     * @returns {JSX.Element}
-     */
-    renderTransitStep() {
-        var _a, _b;
-        return h("div", { class: "step", onClick: e => this.stepClickHandler(e) }, this.isInternetExplorer ? null :
-            h("span", { class: "step__action-icon step__action-icon--circled" }, h("mi-icon", { "icon-name": "transit-stop" })), h("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), h("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ?
-            h("span", { class: "step__short-name", style: {
-                    backgroundColor: ((_a = this.stepData.transit_information.line) === null || _a === void 0 ? void 0 : _a.color) ? this.stepData.transit_information.line.color : null,
-                    color: ((_b = this.stepData.transit_information.line) === null || _b === void 0 ? void 0 : _b.text_color) ? this.stepData.transit_information.line.text_color : null
-                } }, this.stepData.transit_information.line.short_name) :
-            null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, h("br", null), h("span", { part: "step-info", class: "step__distance-duration" }, h("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), "\u00A0\u00B7\u00A0", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleButton(), this.renderSubsteps());
-    }
-    static get watchers() { return {
-        "step": [{
-                "parseStepProp": 0
-            }],
-        "translations": [{
-                "parseTranslationsProp": 0
-            }]
-    }; }
-};
-RouteInstructionsStepLegacy.style = routeInstructionsStepLegacyCss();
-
-export { RouteInstructionsStepLegacy as mi_route_instructions_step_legacy };

package/dist/mi-route-instructions-step.entry.js

@@ -1,342 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZQHyS7V.js';
-import { U as UnitSystem } from './unit-system.enum-BwPgAWqL.js';
-import { c as isInternetExplorer } from './utils-DNHzysQ6.js';
-
-const routeInstructionsStepCss = () => `:host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;gap:16px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;align-items:center;justify-content:space-between;width:100%;position:sticky;top:50px;background:white;z-index:1000;padding-bottom:8px}.step__destination{display:grid;gap:8px;align-items:center;justify-content:center;grid-auto-flow:column}.step__heading{font-weight:500;font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__transit-action{font-weight:400;font-size:0.875rem;color:#6b7280}.step__toggle{display:grid;justify-content:center}.step__toggle mi-icon{width:24px;height:24px;display:block}.step__details{display:grid;gap:24px;width:100%}`;
-
-const RouteInstructionsStep = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.stepClicked = createEvent(this, "stepClicked", 7);
-        this.substepsToggled = createEvent(this, "substepsToggled", 7);
-        /**
-         * If indoor substeps/maneuvers should be hidden.
-         *
-         * @type {boolean}
-         */
-        this.hideIndoorSubsteps = true;
-        /**
-         * The route context of previous step, if any.
-         *
-         * @type {string}
-         */
-        this.fromRouteContext = '';
-        /**
-         * Set imperial or metric as default unit system. Default is Metric unless the browser is running US English. In that case Imperial.
-         *
-         * @type {UnitSystem}
-         */
-        this.unit = navigator.language === 'en-US' ? UnitSystem.Imperial : UnitSystem.Metric;
-        /**
-         * Indicates if it should show the toggle button.
-         *
-         * @type {boolean}
-         */
-        this.showToggleButton = true;
-        /**
-         * Signifies wether substeps are open or not.
-         */
-        this.substepsAreOpen = false;
-        this.isInternetExplorer = isInternetExplorer();
-    }
-    parseStepProp() {
-        if (this.step) {
-            this.stepData = JSON.parse(this.step);
-        }
-    }
-    parseTranslationsProp() {
-        if (this.translations) {
-            this.translationsData = JSON.parse(this.translations);
-        }
-    }
-    /**
-     * Programmatically open the substeps.
-     */
-    async openSubsteps() {
-        this.substepsAreOpen = true;
-    }
-    /**
-     * Programmatically close the substeps.
-     */
-    async closeSubsteps() {
-        this.substepsAreOpen = false;
-    }
-    /**
-     * Component will load.
-     */
-    componentWillLoad() {
-        this.parseStepProp();
-        this.parseTranslationsProp();
-    }
-    /**
-     * Render if there is step data.
-     *
-     * @returns {JSX.Element}
-     */
-    render() {
-        return this.stepData && this.translationsData ? this.renderStep() : null;
-    }
-    /**
-     * Emits stepClicked event (if click target is not related to an action).
-     *
-     * @param event - Event.
-     */
-    stepClickHandler(event) {
-        // Don't emit click event if clicked on elements that are actions to other things
-        if (Array.from(event.target.classList).includes('icon-toggle')) {
-            return;
-        }
-        let maneuverIndex = null;
-        if (event.target.dataset.maneuverIndex !== undefined) {
-            maneuverIndex = parseInt(event.target.dataset.maneuverIndex);
-        }
-        this.stepClicked.emit({ maneuverIndex });
-    }
-    /**
-     * Render step part depending on travel mode.
-     *
-     * @returns {JSX.Element}
-     */
-    renderStep() {
-        switch (this.stepData.travel_mode.toUpperCase()) {
-            case 'DRIVING':
-                return this.renderDrivingStep();
-            case 'WALKING':
-                return this.renderWalkingStep();
-            case 'BICYCLING':
-                return this.renderBicyclingStep();
-            case 'TRANSIT':
-                return this.renderTransitStep();
-            default:
-                return h("div", null, "Unknown travel mode: ", this.stepData.travel_mode);
-        }
-    }
-    /**
-     * Render the travel mode indicator and dotted/solid line.
-     *
-     * @returns {JSX.Element}
-     */
-    renderTravelMode() {
-        if (this.isInternetExplorer) {
-            return null;
-        }
-        let travelModeIcon;
-        switch (this.stepData.travel_mode.toUpperCase()) {
-            case 'DRIVING':
-                travelModeIcon = 'car';
-                break;
-            case 'WALKING':
-                travelModeIcon = 'walk';
-                break;
-            case 'BICYCLING':
-                travelModeIcon = 'bike';
-                break;
-            case 'TRANSIT':
-                travelModeIcon = this.getTransitVehicleIconName();
-                break;
-        }
-        return (h("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === 'TRANSIT' ? 'solid' : 'dotted'}` }, h("span", { class: "step__travel-mode-icon" }, h("mi-icon", { part: "step-travel-mode-icon", "icon-name": travelModeIcon }))));
-    }
-    /**
-     * Get icon name for transit vehicle.
-     *
-     * @returns {string}
-     */
-    getTransitVehicleIconName() {
-        var _a, _b;
-        const stepTransitVehicleType = (_b = (_a = this.stepData.transit_information) === null || _a === void 0 ? void 0 : _a.line.vehicle) === null || _b === void 0 ? void 0 : _b.type.toLowerCase();
-        const transitVehicleTypes = ['boat', 'bus', 'railway', 'train', 'subway']; // Supported Transit Vehicles
-        return stepTransitVehicleType && transitVehicleTypes.some(type => type === stepTransitVehicleType) ? stepTransitVehicleType : 'transit';
-    }
-    /**
-     * Toggles visibility of sub steps (steps in steps).
-     */
-    toggleSubsteps() {
-        this.substepsToggled.emit();
-        this.substepsAreOpen = !this.substepsAreOpen;
-    }
-    /**
-     * Render substeps if they should be visible.
-     *
-     * @returns {JSX.Element}
-     */
-    renderSubsteps() {
-        var _a;
-        return this.substepsAreOpen === true ? h("div", { class: "step__substeps" }, (_a = this.stepData.steps) === null || _a === void 0 ? void 0 : _a.map((maneuver, index) => {
-            return h("mi-route-instructions-maneuver", { "data-maneuver-index": index, maneuver: JSON.stringify(maneuver), translations: this.translations, unit: this.unit,
-                // @ts-ignore
-                exportparts: "\n                        maneuver-icon,\n                        maneuver-description,\n                        maneuver-description-distance,\n                        maneuver-description-distance-border" });
-        })) : null;
-    }
-    /**
-     * Render the toggle button for the sub step expander.
-     *
-     * @returns {JSX.Element}
-     */
-    renderToggleButton() {
-        var _a;
-        // Return null if none substeps/maneuvers is provided,
-        // or if the showToggleButton is set to false.
-        if (((_a = this.stepData.steps) === null || _a === void 0 ? void 0 : _a.length) <= 0 || !this.showToggleButton) {
-            return null;
-        }
-        return (h("span", { class: 'step__toggle', onClick: () => this.toggleSubsteps() }, this.substepsAreOpen ?
-            h("mi-icon", { part: "step-toggle", "icon-name": "chevron-up" })
-            :
-                h("mi-icon", { part: "step-toggle", "icon-name": "chevron-down" })));
-    }
-    /**
-     * Render distance part.
-     *
-     * @returns {JSX.Element}
-     */
-    renderDistance() {
-        return h("span", { part: "step-info", class: "step__distance-duration" }, h("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), h("br", null));
-    }
-    /**
-     * Render toggle and substeps.
-     *
-     * @returns {JSX.Element}
-     */
-    showSubsteps() {
-        return h("div", { class: "step__details" }, this.renderSubsteps());
-    }
-    /**
-     * Render a driving step.
-     *
-     * @returns {JSX.Element}
-     */
-    renderDrivingStep() {
-        return h("div", { class: "step", onClick: (e) => this.stepClickHandler(e) }, h("div", { class: "step__info" }, h("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderToggleButton()), this.showSubsteps());
-    }
-    /**
-     * Get display heading.
-     *
-     * @returns {string}
-     */
-    getStepHeading() {
-        var _a;
-        const defaultHeadings = {
-            'driving': this.translationsData.drive,
-            'walking': this.translationsData.walk,
-            'bicycling': this.translationsData.bike,
-        };
-        return ((_a = this.stepData.steps[0]) === null || _a === void 0 ? void 0 : _a.instructions) ?
-            this.stepData.steps[0].instructions :
-            defaultHeadings[this.stepData.travel_mode.toLowerCase()];
-    }
-    /**
-     * Render a walking step.
-     *
-     *
-     * @returns {JSX.Element}
-     */
-    renderWalkingStep() {
-        let heading;
-        /*
-         * Determine action heading:
-         */
-        if (this.stepData.parking === true) {
-            // Park your vehicle
-            heading = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ''}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'STEPS') { // TODO: SDK, why is highway not always set?
-            // Take stairs
-            heading = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'LADDER') {
-            // Take a laddder
-            heading = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'ESCALATOR') {
-            // Take an escalator
-            heading = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'WHEELCHAIRRAMP') {
-            // Take wheel chair ramp
-            heading = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'WHEELCHAIRLIFT') {
-            // Take wheel chair lift
-            heading = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.stepData.highway && this.stepData.highway.toUpperCase() === 'ELEVATOR') {
-            // Take elevator
-            heading = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`;
-        }
-        else if (this.fromRouteContext === 'InsideBuilding' && this.stepData.route_context === 'Outside') {
-            // Exit from inside to outside
-            heading = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context);
-        }
-        else if (this.fromRouteContext === 'InsideBuilding' && this.stepData.route_context === 'InsideBuilding') {
-            heading = this.getStepHeading();
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'Outside' && this.fromTravelMode.toUpperCase() === 'TRANSIT') {
-            // Switching between public transportation
-            heading = this.fromTransitStop;
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'Outside') {
-            heading = this.getStepHeading();
-        }
-        else if (this.fromRouteContext === 'Outside' && this.stepData.route_context === 'InsideBuilding') {
-            // Enter from outside to inside
-            heading = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context);
-        }
-        else {
-            // Origin Location name or empty
-            heading = this.fromRouteContext === 'InsideBuilding' ? 'Inside Building' : this.fromRouteContext;
-        }
-        return h("div", { class: "step", onClick: (e) => this.stepClickHandler(e) }, h("div", { class: "step__info" }, h("div", { part: "step-heading", class: "step__heading" }, heading), this.renderToggleButton()), this.showSubsteps());
-    }
-    /**
-     * Add building or venue name to the step heading.
-     *
-     * @param {string} heading
-     * @param {StepContext} stepContext
-     * @returns {string}
-     */
-    addStepContextNameToHeading(heading, stepContext) {
-        if (stepContext) {
-            if (stepContext.building) {
-                heading += ` ${stepContext.building.buildingInfo.name} ${this.translationsData.building}`;
-            }
-            else if (stepContext.venue) {
-                heading += ` ${stepContext.venue.venueInfo.name} ${this.translationsData.venue}`;
-            }
-        }
-        return heading;
-    }
-    /**
-     * Render a bicycling step.
-     *
-     * @returns {JSX.Element}
-     */
-    renderBicyclingStep() {
-        return h("div", { class: "step", onClick: (e) => this.stepClickHandler(e) }, h("div", { class: "step__info" }, h("div", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderToggleButton()), this.showSubsteps());
-    }
-    /**
-     * Render a transit step. Inclusing BUSWAY instruction.
-     *
-     * @returns {JSX.Element}
-     */
-    renderTransitStep() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
-        return h("div", { class: "step", onClick: (e) => this.stepClickHandler(e) }, h("div", { class: "step__info" }, h("h3", { part: "step-heading", class: "step__heading" }, this.stepData.travel_mode === 'TRANSIT' ? `${this.translationsData.rideTheBus}` : (_a = this.stepData) === null || _a === void 0 ? void 0 : _a.instructions), this.renderToggleButton()), this.renderTravelMode(), h("div", { part: "step-description", class: "step__description" }, ((_d = (_c = (_b = this.stepData) === null || _b === void 0 ? void 0 : _b.transit_information) === null || _c === void 0 ? void 0 : _c.line) === null || _d === void 0 ? void 0 : _d.short_name) ?
-            h("span", { class: "step__short-name", style: {
-                    backgroundColor: ((_g = (_f = (_e = this.stepData) === null || _e === void 0 ? void 0 : _e.transit_information) === null || _f === void 0 ? void 0 : _f.line) === null || _g === void 0 ? void 0 : _g.color) ? (_k = (_j = (_h = this.stepData) === null || _h === void 0 ? void 0 : _h.transit_information) === null || _j === void 0 ? void 0 : _j.line) === null || _k === void 0 ? void 0 : _k.color : null,
-                    color: ((_o = (_m = (_l = this.stepData) === null || _l === void 0 ? void 0 : _l.transit_information) === null || _m === void 0 ? void 0 : _m.line) === null || _o === void 0 ? void 0 : _o.text_color) ? (_r = (_q = (_p = this.stepData) === null || _p === void 0 ? void 0 : _p.transit_information) === null || _q === void 0 ? void 0 : _q.line) === null || _r === void 0 ? void 0 : _r.text_color : null
-                } }, (_u = (_t = (_s = this.stepData) === null || _s === void 0 ? void 0 : _s.transit_information) === null || _t === void 0 ? void 0 : _t.line) === null || _u === void 0 ? void 0 : _u.short_name) :
-            null, ((_w = (_v = this.stepData) === null || _v === void 0 ? void 0 : _v.transit_information) === null || _w === void 0 ? void 0 : _w.headsign) ? (_y = (_x = this.stepData) === null || _x === void 0 ? void 0 : _x.transit_information) === null || _y === void 0 ? void 0 : _y.headsign : null, h("br", null), h("span", { part: "step-info", class: "step__distance-duration" }, h("mi-time", { seconds: (_0 = (_z = this.stepData) === null || _z === void 0 ? void 0 : _z.duration) === null || _0 === void 0 ? void 0 : _0.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), "\u00A0\u00B7\u00A0", ((_2 = (_1 = this.stepData) === null || _1 === void 0 ? void 0 : _1.transit_information) === null || _2 === void 0 ? void 0 : _2.num_stops) ? (_4 = (_3 = this.stepData) === null || _3 === void 0 ? void 0 : _3.transit_information) === null || _4 === void 0 ? void 0 : _4.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.showSubsteps());
-    }
-    static get watchers() { return {
-        "step": [{
-                "parseStepProp": 0
-            }],
-        "translations": [{
-                "parseTranslationsProp": 0
-            }]
-    }; }
-};
-RouteInstructionsStep.style = routeInstructionsStepCss();
-
-export { RouteInstructionsStep as mi_route_instructions_step };