@mapsindoors/map-template 1.95.1 → 1.95.2

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

@@ -1,157 +1,174 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7e9696f3.js';
-import { R as RouteTravelMode } from './route-travel-mode.enum-7f4ce9c7.js';
-import { U as UnitSystem } from './unit-system.enum-eaefb53e.js';
-import { c as isInternetExplorer } from './utils-ae714467.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BZQHyS7V.js';
+import { R as RouteTravelMode } from './route-travel-mode.enum-BvqP1fpw.js';
+import { U as UnitSystem } from './unit-system.enum-BwPgAWqL.js';
+import { c as isInternetExplorer } from './utils-DNHzysQ6.js';
 
-const routeInstructionsCss = ":host{display:block;background-color:#fcfcfc;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\"}:host mi-route-instructions-step:hover{cursor:pointer;background-color:#f9fafb;transition:300ms ease}:host mi-route-instructions-step.active{background-color:#f3f4f6;transition:none;cursor:default}:host .instructions-destination{display:flex}:host .instructions-destination-icon{width:40px;display:flex;justify-content:center;align-items:center}:host .instructions-destination-icon mi-icon{width:24px;height:24px;background-color:#1c1917}:host .instructions-destination-details{flex:1;padding:12px}:host .instructions-destination-details mi-location-info{font-size:0.875rem}";
+const routeInstructionsCss = () => `:host{display:block;background-color:#fcfcfc;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"}:host mi-route-instructions-step:hover{cursor:pointer;background-color:#f9fafb;transition:300ms ease}:host mi-route-instructions-step.active{background-color:#f3f4f6;transition:none;cursor:default}:host .instructions-destination{display:flex}:host .instructions-destination-icon{width:40px;display:flex;justify-content:center;align-items:center}:host .instructions-destination-icon mi-icon{width:24px;height:24px;background-color:#1c1917}:host .instructions-destination-details{flex:1;padding:12px}:host .instructions-destination-details mi-location-info{font-size:0.875rem}`;
 
 const RouteInstructions = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clicked = createEvent(this, "clicked", 7);
-    this.miStepElements = [];
-    this.lastStepRouteContext = null;
-    this.lastStepTravelMode = null;
-    this.lastStepTransitStop = null;
-    this.activeStep = {
-      legIndex: 0,
-      stepIndex: 0
-    };
-    this.unit = UnitSystem.Metric;
-    this.route = undefined;
-    this.hideIndoorSubsteps = false;
-    this.travelMode = RouteTravelMode.Walking;
-    this.originLocation = undefined;
-    this.originName = undefined;
-    this.destinationLocation = undefined;
-    this.destinationName = undefined;
-    this.translations = {
-      walk: 'Walk',
-      bike: 'Bike',
-      transit: 'Transit',
-      drive: 'Drive',
-      leave: 'Leave',
-      from: 'From',
-      park: 'Park',
-      at: 'at',
-      building: 'Building',
-      venue: 'Venue',
-      takeStaircaseToLevel: 'Take staircase to level',
-      takeLadderToLevel: 'Take the ladder to level',
-      takeElevatorToLevel: 'Take elevator to level',
-      takeEscalatorToLevel: 'Take escalator to level',
-      takeWheelchairLiftToLevel: 'Take wheelchair lift to level',
-      takeWheelchairRampToLevel: 'Take wheelchair ramp to level',
-      exit: 'Exit',
-      enter: 'Enter',
-      stops: 'stops',
-      andContinue: 'and continue',
-      continueStraightAhead: 'Continue straight ahead',
-      goLeft: 'Go left',
-      goSharpLeft: 'Go sharp left',
-      goSlightLeft: 'Go slight left',
-      goRight: 'Go right',
-      goSharpRight: 'Go sharp right',
-      goSlightRight: 'Go slight right',
-      turnAround: 'Turn around',
-      days: 'd',
-      hours: 'h',
-      minutes: 'min',
-      rideTheBus: 'Ride the bus'
-    };
-  }
-  componentDidRender() {
-    this.miStepElements.forEach((element) => {
-      element.hideIndoorSubsteps = this.hideIndoorSubsteps;
-    });
-  }
-  /**
-   * Transform the step in legs to a flat array of steps.
-   *
-   * @returns {Step[]}
-   */
-  getRouteSteps() {
-    if (!this.route) {
-      return [];
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked", 7);
+        /**
+         * Set active step to populate it with an "active" class. Defaults to legIndex 0 and stepIndex 0.
+         * @type {{ legIndex: number, stepIndex: number }}
+         */
+        this.activeStep = {
+            legIndex: 0,
+            stepIndex: 0
+        };
+        /**
+         * Set imperial or metric as default unit system.
+         * @type {UnitSystem} 'imperial' or 'metric'
+         */
+        this.unit = UnitSystem.Metric;
+        /**
+         * If indoor substeps/maneuvers should be hidden.
+         *
+         * @type {boolean}
+         */
+        this.hideIndoorSubsteps = false;
+        /**
+         * Set preferred travel mode. Defaults to "walking".
+         *
+         * @type {RouteTravelMode} 'walking', 'bicycling', 'transit', 'driving'.
+         */
+        this.travelMode = RouteTravelMode.Walking;
+        /**
+         * Translations object for translatable labels.
+         *
+         */
+        this.translations = {
+            walk: 'Walk',
+            bike: 'Bike',
+            transit: 'Transit',
+            drive: 'Drive',
+            leave: 'Leave',
+            from: 'From',
+            park: 'Park',
+            at: 'at',
+            building: 'Building',
+            venue: 'Venue',
+            takeStaircaseToLevel: 'Take staircase to level',
+            takeLadderToLevel: 'Take the ladder to level',
+            takeElevatorToLevel: 'Take elevator to level',
+            takeEscalatorToLevel: 'Take escalator to level',
+            takeWheelchairLiftToLevel: 'Take wheelchair lift to level',
+            takeWheelchairRampToLevel: 'Take wheelchair ramp to level',
+            exit: 'Exit',
+            enter: 'Enter',
+            stops: 'stops',
+            andContinue: 'and continue',
+            continueStraightAhead: 'Continue straight ahead',
+            goLeft: 'Go left',
+            goSharpLeft: 'Go sharp left',
+            goSlightLeft: 'Go slight left',
+            goRight: 'Go right',
+            goSharpRight: 'Go sharp right',
+            goSlightRight: 'Go slight right',
+            turnAround: 'Turn around',
+            days: 'd',
+            hours: 'h',
+            minutes: 'min',
+            rideTheBus: 'Ride the bus'
+        };
+        this.miStepElements = [];
+        this.lastStepRouteContext = null;
+        this.lastStepTravelMode = null;
+        this.lastStepTransitStop = null;
+    }
+    componentDidRender() {
+        this.miStepElements.forEach((element) => {
+            element.hideIndoorSubsteps = this.hideIndoorSubsteps;
+        });
+    }
+    /**
+     * Transform the step in legs to a flat array of steps.
+     *
+     * @returns {Step[]}
+     */
+    getRouteSteps() {
+        if (!this.route) {
+            return [];
+        }
+        return this.route.legs.reduce((accummulator, leg, legIndex) => {
+            for (const stepIndex in leg.steps) {
+                const step = leg.steps[stepIndex];
+                step.originalLegIndex = legIndex;
+                step.originalStepIndex = parseInt(stepIndex);
+                accummulator.push(step);
+            }
+            return accummulator;
+        }, []);
+    }
+    /**
+     * Updates the activeStep attribute and emits an object with leg, step and maneuver index information.
+     *
+     * @param {CustomEvent<any>} event Step object.
+     * @param {number} stepIndex step index.
+     */
+    stepClickedHandler(event, stepIndex) {
+        const originalStep = this.getRouteSteps()[stepIndex];
+        // Update activeStep attribute
+        this.activeStep = {
+            legIndex: originalStep.originalLegIndex,
+            stepIndex: originalStep.originalStepIndex
+        };
+        this.clicked.emit({
+            legIndex: originalStep.originalLegIndex,
+            stepIndex: originalStep.originalStepIndex,
+            maneuverIndex: event.detail.maneuverIndex
+        });
+    }
+    /**
+     * Check if the step is active.
+     *
+     * @param {Step} step
+     * @returns {boolean}
+     */
+    isActiveStep(step) {
+        // Check that activeStep attribute is set
+        if (!this.activeStep)
+            return false;
+        // Check that the indexes matches those set at the activeStep attribute
+        const isActiveStep = this.activeStep.legIndex === step.originalLegIndex &&
+            this.activeStep.stepIndex === step.originalStepIndex;
+        return isActiveStep;
+    }
+    render() {
+        return this.route ? this.renderInstructions() : null;
+    }
+    /**
+     * Render instructions.
+     *
+     * @returns {JSX.Element}
+     */
+    renderInstructions() {
+        return (h(Host, null, this.getRouteSteps().map((currentStep, stepIndex) => {
+            var _a, _b, _c, _d, _e;
+            const originName = ((_b = (_a = this.originLocation) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.name) ? this.originLocation.properties.name : this.originName || '';
+            const isFirstRouteStep = currentStep.originalLegIndex === 0 && currentStep.originalStepIndex === 0;
+            const lastStepRouteContext = isFirstRouteStep ? originName : this.lastStepRouteContext;
+            const lastTravelMode = this.lastStepTravelMode;
+            const lastTransitStop = this.lastStepTransitStop;
+            this.lastStepRouteContext = currentStep.route_context;
+            this.lastStepTravelMode = currentStep.travel_mode;
+            this.lastStepTransitStop = ((_d = (_c = currentStep.transit_information) === null || _c === void 0 ? void 0 : _c.arrival_stop) === null || _d === void 0 ? void 0 : _d.name) ? (_e = currentStep.transit_information) === null || _e === void 0 ? void 0 : _e.arrival_stop.name : null;
+            return h("mi-route-instructions-step-legacy", { ref: (el) => this.miStepElements.push(el), "from-travel-mode": lastTravelMode, "from-route-context": lastStepRouteContext, "from-transit-stop": lastTransitStop, step: JSON.stringify(currentStep), translations: JSON.stringify(this.translations), unit: this.unit, onStepClicked: (event) => this.stepClickedHandler(event, stepIndex), class: this.isActiveStep(currentStep) ? 'active' : '', part: this.isActiveStep(currentStep) ? 'step active' : 'step',
+                // @ts-ignore
+                exportparts: "\n                            step-toggle,\n                            step-heading,\n                            step-description,\n                            step-info,\n                            step-travel-mode,\n                            step-travel-mode-icon,\n                            maneuver-icon,\n                            maneuver-description,\n                            maneuver-description-distance,\n                            maneuver-description-distance-border" });
+        }), this.destinationLocation || this.destinationName ? this.renderDestination() : null));
+    }
+    /**
+     * Render destination.
+     *
+     * @returns {JSX.Element}
+     */
+    renderDestination() {
+        return (h("div", { class: "instructions-destination" }, h("div", { class: "instructions-destination-icon" }, isInternetExplorer() ? null :
+            h("mi-icon", { "icon-name": "marker" })), h("div", { part: "instructions-destination", class: "instructions-destination-details" }, this.destinationLocation ? this.destinationLocation.properties.name : this.destinationName, this.destinationLocation ? h("mi-location-info", { part: "instructions-destination-info", location: this.destinationLocation }) : null)));
     }
-    return this.route.legs.reduce((accummulator, leg, legIndex) => {
-      for (const stepIndex in leg.steps) {
-        const step = leg.steps[stepIndex];
-        step.originalLegIndex = legIndex;
-        step.originalStepIndex = parseInt(stepIndex);
-        accummulator.push(step);
-      }
-      return accummulator;
-    }, []);
-  }
-  /**
-   * Updates the activeStep attribute and emits an object with leg, step and maneuver index information.
-   *
-   * @param {CustomEvent<any>} event Step object.
-   * @param {number} stepIndex step index.
-   */
-  stepClickedHandler(event, stepIndex) {
-    const originalStep = this.getRouteSteps()[stepIndex];
-    // Update activeStep attribute
-    this.activeStep = {
-      legIndex: originalStep.originalLegIndex,
-      stepIndex: originalStep.originalStepIndex
-    };
-    this.clicked.emit({
-      legIndex: originalStep.originalLegIndex,
-      stepIndex: originalStep.originalStepIndex,
-      maneuverIndex: event.detail.maneuverIndex
-    });
-  }
-  /**
-   * Check if the step is active.
-   *
-   * @param {Step} step
-   * @returns {boolean}
-   */
-  isActiveStep(step) {
-    // Check that activeStep attribute is set
-    if (!this.activeStep)
-      return false;
-    // Check that the indexes matches those set at the activeStep attribute
-    const isActiveStep = this.activeStep.legIndex === step.originalLegIndex &&
-      this.activeStep.stepIndex === step.originalStepIndex;
-    return isActiveStep;
-  }
-  render() {
-    return this.route ? this.renderInstructions() : null;
-  }
-  /**
-   * Render instructions.
-   *
-   * @returns {JSX.Element}
-   */
-  renderInstructions() {
-    return (h(Host, null, this.getRouteSteps().map((currentStep, stepIndex) => {
-      var _a, _b, _c, _d, _e;
-      const originName = ((_b = (_a = this.originLocation) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.name) ? this.originLocation.properties.name : this.originName || '';
-      const isFirstRouteStep = currentStep.originalLegIndex === 0 && currentStep.originalStepIndex === 0;
-      const lastStepRouteContext = isFirstRouteStep ? originName : this.lastStepRouteContext;
-      const lastTravelMode = this.lastStepTravelMode;
-      const lastTransitStop = this.lastStepTransitStop;
-      this.lastStepRouteContext = currentStep.route_context;
-      this.lastStepTravelMode = currentStep.travel_mode;
-      this.lastStepTransitStop = ((_d = (_c = currentStep.transit_information) === null || _c === void 0 ? void 0 : _c.arrival_stop) === null || _d === void 0 ? void 0 : _d.name) ? (_e = currentStep.transit_information) === null || _e === void 0 ? void 0 : _e.arrival_stop.name : null;
-      return h("mi-route-instructions-step-legacy", { ref: (el) => this.miStepElements.push(el), "from-travel-mode": lastTravelMode, "from-route-context": lastStepRouteContext, "from-transit-stop": lastTransitStop, step: JSON.stringify(currentStep), translations: JSON.stringify(this.translations), unit: this.unit, onStepClicked: (event) => this.stepClickedHandler(event, stepIndex), class: this.isActiveStep(currentStep) ? 'active' : '', part: this.isActiveStep(currentStep) ? 'step active' : 'step',
-        // @ts-ignore
-        exportparts: "\n                            step-toggle,\n                            step-heading,\n                            step-description,\n                            step-info,\n                            step-travel-mode,\n                            step-travel-mode-icon,\n                            maneuver-icon,\n                            maneuver-description,\n                            maneuver-description-distance,\n                            maneuver-description-distance-border" });
-    }), this.destinationLocation || this.destinationName ? this.renderDestination() : null));
-  }
-  /**
-   * Render destination.
-   *
-   * @returns {JSX.Element}
-   */
-  renderDestination() {
-    return (h("div", { class: "instructions-destination" }, h("div", { class: "instructions-destination-icon" }, isInternetExplorer() ? null :
-      h("mi-icon", { "icon-name": "marker" })), h("div", { part: "instructions-destination", class: "instructions-destination-details" }, this.destinationLocation ? this.destinationLocation.properties.name : this.destinationName, this.destinationLocation ? h("mi-location-info", { part: "instructions-destination-info", location: this.destinationLocation }) : null)));
-  }
 };
-RouteInstructions.style = routeInstructionsCss;
+RouteInstructions.style = routeInstructionsCss();
 
 export { RouteInstructions as mi_route_instructions };

package/dist/mi-scroll-buttons.entry.js

@@ -1,112 +1,118 @@
-import { r as registerInstance, h } from './index-7e9696f3.js';
+import { r as registerInstance, h } from './index-BZQHyS7V.js';
 
-const scrollButtonsCss = "a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -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\";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.scroll-buttons{height:100%;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:16px}.scroll-buttons .btn{margin:0;padding:0;background:none;width:64px;height:64px;background-color:#ffffff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center}.scroll-buttons .btn mi-icon{width:32px}.scroll-buttons .btn:hover{background:none;background-color:#ffffff;cursor:pointer}.scroll-buttons .btn:disabled{opacity:1}.scroll-buttons .btn:disabled mi-icon{background-color:#a5a9af}";
+const scrollButtonsCss = () => `a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -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";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.scroll-buttons{height:100%;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:16px}.scroll-buttons .btn{margin:0;padding:0;background:none;width:64px;height:64px;background-color:#ffffff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center}.scroll-buttons .btn mi-icon{width:32px}.scroll-buttons .btn:hover{background:none;background-color:#ffffff;cursor:pointer}.scroll-buttons .btn:disabled{opacity:1}.scroll-buttons .btn:disabled mi-icon{background-color:#a5a9af}`;
 
 const ScrollButtons = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.scrollContainerElementRef = undefined;
-    this.scrollLength = 100;
-  }
-  /**
-   * Update scroll buttons enabled/disabled states.
-   */
-  async updateScrollButtons() {
-    this.updateScrollButtonsState();
-  }
-  /**
-   * Watch for container scroll events.
-   */
-  addScrollEventListener() {
-    var _a, _b;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.scrollContainerElementRef) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', () => {
-      this.updateScrollButtonsState();
-    });
-    if (this.scrollContainerElementRef) {
-      // Setup a ResizeObserver to update scroll buttons state whenever the dimensions of the scroll container changes.
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateScrollButtonsState();
-      });
-      this.resizeObserver.observe(this.scrollContainerElementRef);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Determines how far to scroll when clicking one of the buttons. Default value is 100.
+         *
+         * @type {number}
+         */
+        this.scrollLength = 100;
     }
-  }
-  /**
-   * Adds scroll event listener to the container element when this component is first attached to the DOM.
-   */
-  connectedCallback() {
-    this.addScrollEventListener();
-  }
-  /**
-   * Disconnects ResizeObserver.
-   */
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  /**
-   * Updates enable/disable state for scroll up and down buttons.
-   *
-   * @returns {Promise<void>}
-   */
-  async updateScrollButtonsState() {
-    // Disable or enable the scroll up button
-    if (this.scrollContainerElementRef.scrollTop === 0) {
-      this.upButtonElement.disabled = true;
+    /**
+     * Update scroll buttons enabled/disabled states.
+     */
+    async updateScrollButtons() {
+        this.updateScrollButtonsState();
     }
-    else if (this.upButtonElement.disabled) {
-      this.upButtonElement.disabled = false;
+    /**
+     * Watch for container scroll events.
+     */
+    addScrollEventListener() {
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.scrollContainerElementRef) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', () => {
+            this.updateScrollButtonsState();
+        });
+        if (this.scrollContainerElementRef) {
+            // Setup a ResizeObserver to update scroll buttons state whenever the dimensions of the scroll container changes.
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateScrollButtonsState();
+            });
+            this.resizeObserver.observe(this.scrollContainerElementRef);
+        }
     }
-    // Disable or enable the scroll down button
-    if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight
-      && this.upButtonElement.disabled === true) {
-      this.downButtonElement.disabled = true;
+    /**
+     * Adds scroll event listener to the container element when this component is first attached to the DOM.
+     */
+    connectedCallback() {
+        this.addScrollEventListener();
     }
-    else if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop > this.scrollContainerElementRef.clientHeight) {
-      this.downButtonElement.disabled = false;
+    /**
+     * Disconnects ResizeObserver.
+     */
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    else {
-      this.downButtonElement.disabled = true;
+    /**
+     * Updates enable/disable state for scroll up and down buttons.
+     *
+     * @returns {Promise<void>}
+     */
+    async updateScrollButtonsState() {
+        // Disable or enable the scroll up button
+        if (this.scrollContainerElementRef.scrollTop === 0) {
+            this.upButtonElement.disabled = true;
+        }
+        else if (this.upButtonElement.disabled) {
+            this.upButtonElement.disabled = false;
+        }
+        // Disable or enable the scroll down button
+        if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight
+            && this.upButtonElement.disabled === true) {
+            this.downButtonElement.disabled = true;
+        }
+        else if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop > this.scrollContainerElementRef.clientHeight) {
+            this.downButtonElement.disabled = false;
+        }
+        else {
+            this.downButtonElement.disabled = true;
+        }
     }
-  }
-  /**
-   * Update scroll position.
-   *
-   * @param {number} value - Value to scroll.
-   */
-  updateScrollPosition(value) {
-    if (!('scrollBehavior' in document.documentElement.style)) { // Internet Explorer feature check
-      this.scrollContainerElementRef.scrollTop = value;
+    /**
+     * Update scroll position.
+     *
+     * @param {number} value - Value to scroll.
+     */
+    updateScrollPosition(value) {
+        if (!('scrollBehavior' in document.documentElement.style)) { // Internet Explorer feature check
+            this.scrollContainerElementRef.scrollTop = value;
+        }
+        else {
+            this.scrollContainerElementRef.scroll({
+                top: this.scrollContainerElementRef.scrollTop + value,
+                behavior: 'smooth'
+            });
+        }
     }
-    else {
-      this.scrollContainerElementRef.scroll({
-        top: this.scrollContainerElementRef.scrollTop + value,
-        behavior: 'smooth'
-      });
+    /**
+     * Render scroll buttons.
+     *
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (h("div", { key: '6e7798e435c65cf6546e4d3b7a5caaae8fbc8593', part: "container", class: "scroll-buttons" }, h("button", { key: 'eb9f16636f24fbd9f5552363939841f318d0af9e', part: "button button-up", class: "mi-button mi-button--base btn btn-up", type: "button", disabled: true, "aria-label": "Scroll Up", ref: (el) => {
+                this.upButtonElement = el;
+            }, onClick: (event) => {
+                event.stopPropagation();
+                this.updateScrollPosition(-this.scrollLength);
+            } }, h("mi-icon", { key: 'a6fa66568854de9e1372242d64b1f1b6101cac2c', "icon-name": "chevron-up" })), h("button", { key: '14647752d65d98c1a7ede9dfd25241bde764e7bc', part: "button button-down", class: "mi-button mi-button--base btn btn-down", type: "button", "aria-label": "Scroll Down", ref: (el) => {
+                this.downButtonElement = el;
+            }, onClick: (event) => {
+                event.stopPropagation();
+                this.updateScrollPosition(this.scrollLength);
+            } }, h("mi-icon", { key: '7f4a95d3be41402bebfe4ee48ed7d2576dc10018', "icon-name": "chevron-down" }))));
     }
-  }
-  /**
-   * Render scroll buttons.
-   *
-   * @returns {JSX.Element}
-   */
-  render() {
-    return (h("div", { part: "container", class: "scroll-buttons" }, h("button", { part: "button button-up", class: "mi-button mi-button--base btn btn-up", type: "button", disabled: true, "aria-label": "Scroll Up", ref: (el) => {
-        this.upButtonElement = el;
-      }, onClick: (event) => {
-        event.stopPropagation();
-        this.updateScrollPosition(-this.scrollLength);
-      } }, h("mi-icon", { "icon-name": "chevron-up" })), h("button", { part: "button button-down", class: "mi-button mi-button--base btn btn-down", type: "button", "aria-label": "Scroll Down", ref: (el) => {
-        this.downButtonElement = el;
-      }, onClick: (event) => {
-        event.stopPropagation();
-        this.updateScrollPosition(this.scrollLength);
-      } }, h("mi-icon", { "icon-name": "chevron-down" }))));
-  }
-  static get watchers() { return {
-    "scrollContainerElementRef": ["addScrollEventListener"]
-  }; }
+    static get watchers() { return {
+        "scrollContainerElementRef": [{
+                "addScrollEventListener": 0
+            }]
+    }; }
 };
-ScrollButtons.style = scrollButtonsCss;
+ScrollButtons.style = scrollButtonsCss();
 
 export { ScrollButtons as mi_scroll_buttons };