@mapsindoors/map-template 1.95.1 → 1.95.2

package/dist/mi-list-item-category.entry.js

@@ -1,48 +1,51 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7e9696f3.js';
-import { m as midtIcon } from './icon-b8d01d6f.js';
-import { b as appendMapsIndoorsImageQueryParameters } from './utils-ae714467.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BZQHyS7V.js';
+import { m as midtIcon } from './icon-DT_sDkmK.js';
+import { b as appendMapsIndoorsImageQueryParameters } from './utils-DNHzysQ6.js';
 
-const listItemCategoryCss = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{color:#1c1917;transition:300ms ease;display:flex;align-items:center;cursor:pointer}:host img{-o-object-fit:cover;object-fit:cover}:host([orientation=horizontal]){width:100%;height:100%;float:left;flex-direction:column;justify-content:center}:host([orientation=horizontal]) img{width:48px;height:48px}:host([orientation=horizontal]) p{height:16px;overflow:visible;font-size:0.875rem;line-height:1rem;text-align:center}:host([orientation=vertical]){padding:16px;flex-direction:row;font-size:1rem;font-weight:500;line-height:1.25rem}:host([orientation=vertical]) img{width:24px;height:24px}:host([orientation=vertical]) p{margin:0;padding-left:16px}:host(:hover){background-color:#fcfcfc}";
+const listItemCategoryCss = () => `html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{color:#1c1917;transition:300ms ease;display:flex;align-items:center;cursor:pointer}:host img{-o-object-fit:cover;object-fit:cover}:host([orientation=horizontal]){width:100%;height:100%;float:left;flex-direction:column;justify-content:center}:host([orientation=horizontal]) img{width:48px;height:48px}:host([orientation=horizontal]) p{height:16px;overflow:visible;font-size:0.875rem;line-height:1rem;text-align:center}:host([orientation=vertical]){padding:16px;flex-direction:row;font-size:1rem;font-weight:500;line-height:1.25rem}:host([orientation=vertical]) img{width:24px;height:24px}:host([orientation=vertical]) p{margin:0;padding-left:16px}:host(:hover){background-color:#fcfcfc}`;
 
 const ListItemCategory = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.categoryClicked = createEvent(this, "categoryClicked", 7);
-    this.listItemDidRender = createEvent(this, "listItemDidRender", 7);
-    this.category = undefined;
-    this.orientation = 'vertical';
-  }
-  componentDidRender() {
-    this.listItemDidRender.emit();
-    // IE fallback for 'object-fit' css property
-    if ('objectFit' in document.documentElement.style === false) {
-      this.objectFitImage(this.image);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.categoryClicked = createEvent(this, "categoryClicked", 7);
+        this.listItemDidRender = createEvent(this, "listItemDidRender", 7);
+        /**
+         * @description List orientation. Accepts the following values: 'vertical' and 'horizontal'.
+         * @type {string}
+         */
+        this.orientation = 'vertical';
+    }
+    componentDidRender() {
+        this.listItemDidRender.emit();
+        // IE fallback for 'object-fit' css property
+        if ('objectFit' in document.documentElement.style === false) {
+            this.objectFitImage(this.image);
+        }
+    }
+    /**
+     * @description Emits the category object to event listeners.
+     * @private
+     * @param {*} category - Category object.
+     * @memberof ListItemCategory
+     */
+    categoryClickedHandler(category) {
+        this.categoryClicked.emit(category);
+    }
+    /**
+     * @description Set image as background image.
+     * @private
+     * @param {HTMLImageElement} image
+     */
+    objectFitImage(image) {
+        image.setAttribute('style', `background: no-repeat center center url("${this.category.iconUrl}"); background-size: cover;`);
+        image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`;
+    }
+    render() {
+        const iconDisplaySize = this.orientation.toUpperCase() === 'VERTICAL' ? parseInt(midtIcon.icon.size.medium.value) : parseInt(midtIcon.icon.size['xx-large'].value);
+        const iconURL = appendMapsIndoorsImageQueryParameters(this.category.iconUrl, iconDisplaySize);
+        return (h(Host, { key: '0d80164dcd89d3430160c26ce6d15b0cd593491d', onClick: () => this.categoryClickedHandler(this.category) }, h("img", { key: '56f677da7b6df7a41024758601de03b696223de2', ref: (el) => this.image = el, src: iconURL }), h("p", { key: '9ecddbeeace860ed594cf0900f707d69bc4237c9' }, this.category.name)));
     }
-  }
-  /**
-   * @description Emits the category object to event listeners.
-   * @private
-   * @param {*} category - Category object.
-   * @memberof ListItemCategory
-   */
-  categoryClickedHandler(category) {
-    this.categoryClicked.emit(category);
-  }
-  /**
-   * @description Set image as background image.
-   * @private
-   * @param {HTMLImageElement} image
-   */
-  objectFitImage(image) {
-    image.setAttribute('style', `background: no-repeat center center url("${this.category.iconUrl}"); background-size: cover;`);
-    image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`;
-  }
-  render() {
-    const iconDisplaySize = this.orientation.toUpperCase() === 'VERTICAL' ? parseInt(midtIcon.icon.size.medium.value) : parseInt(midtIcon.icon.size['xx-large'].value);
-    const iconURL = appendMapsIndoorsImageQueryParameters(this.category.iconUrl, iconDisplaySize);
-    return (h(Host, { onClick: () => this.categoryClickedHandler(this.category) }, h("img", { ref: (el) => this.image = el, src: iconURL }), h("p", null, this.category.name)));
-  }
 };
-ListItemCategory.style = listItemCategoryCss;
+ListItemCategory.style = listItemCategoryCss();
 
 export { ListItemCategory as mi_list_item_category };

package/dist/mi-list-item-location.entry.js

@@ -1,171 +1,177 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7e9696f3.js';
-import { m as midtIcon } from './icon-b8d01d6f.js';
-import { b as appendMapsIndoorsImageQueryParameters } from './utils-ae714467.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BZQHyS7V.js';
+import { m as midtIcon } from './icon-DT_sDkmK.js';
+import { b as appendMapsIndoorsImageQueryParameters } from './utils-DNHzysQ6.js';
 
-const listItemLocationCss = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:1rem;font-size:1rem;font-weight:500;line-height:1rem;transition:300ms ease;font-family:-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\";border-radius:8px;background-color:#f9fafb;display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:1rem;border:1px solid #e5e7eb}:host(:hover),:host(.hovered){background-color:var(--tailwind-colors-gray-200);border:1px solid #d1d5db}.img-container{width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:1rem;flex:1;min-width:0;display:grid;gap:0.25rem}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}";
+const listItemLocationCss = () => `html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:1rem;font-size:1rem;font-weight:500;line-height:1rem;transition:300ms ease;font-family:-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";border-radius:8px;background-color:#f9fafb;display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:1rem;border:1px solid #e5e7eb}:host(:hover),:host(.hovered){background-color:var(--tailwind-colors-gray-200);border:1px solid #d1d5db}.img-container{width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:1rem;flex:1;min-width:0;display:grid;gap:0.25rem}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}`;
 
 const ListItemLocation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.locationClicked = createEvent(this, "locationClicked", 7);
-    this.listItemDidRender = createEvent(this, "listItemDidRender", 7);
-    this.iconDisplaySize = parseInt(midtIcon.icon.size.medium.value);
-    this.location = undefined;
-    this.showExternalId = true;
-    this.unit = undefined;
-    this.icon = undefined;
-    this.level = 'Level';
-    this.iconBadge = undefined;
-    this.iconBadgeValue = undefined;
-    this.iconURLToRender = undefined;
-  }
-  iconChanged() {
-    var _a;
-    this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
-    this.updateBadge();
-  }
-  iconBadgeChanged() {
-    this.updateBadge();
-  }
-  iconBadgeValueChanged() {
-    this.updateBadge();
-  }
-  /**
-   * @description Emits the location to event listeners.
-   * @param {*} location - Location object.
-   * @memberof List
-   */
-  locationClickedHandler(location) {
-    this.locationClicked.emit(location);
-  }
-  /**
-   * Called once just after the component is first connected to the DOM.
-   */
-  componentWillLoad() {
-    var _a;
-    this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
-    this.updateBadge();
-  }
-  /**
-   * Called after every render().
-   */
-  componentDidRender() {
-    if (!this.location) {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.locationClicked = createEvent(this, "locationClicked", 7);
+        this.listItemDidRender = createEvent(this, "listItemDidRender", 7);
+        /**
+         * Whether to show the External ID.
+         */
+        this.showExternalId = true;
+        /**
+         * @description The word used for "Level" when showing level info. Default is "Level".
+         */
+        this.level = 'Level';
+        this.iconDisplaySize = parseInt(midtIcon.icon.size.medium.value);
     }
-    this.infoElement.location = this.location;
-    this.listItemDidRender.emit();
-    // IE fallback for 'object-fit' css property
-    if (this.imageElement && 'objectFit' in document.documentElement.style === false) {
-      this.objectFitImage(this.imageElement);
+    iconChanged() {
+        var _a;
+        this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
+        this.updateBadge();
     }
-  }
-  /**
-   * Apply badge to location icon.
-   */
-  updateBadge() {
-    if (this.iconBadge && this.iconBadgeValue && this.iconURLToRender) {
-      this.applyBadgeToIcon();
+    iconBadgeChanged() {
+        this.updateBadge();
     }
-  }
-  /**
-   * @description Set image as background image.
-   * @param {HTMLImageElement} image
-   */
-  objectFitImage(image) {
-    image.setAttribute('style', `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`);
-    image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`;
-  }
-  /**
-   * Apply badge to location icon.
-   * Will make the original icon appear the intended size even though the badge exceeds its bounds.
-   */
-  applyBadgeToIcon() {
-    let originalIconScale;
-    this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
-    const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
-    this.getImageFromUrl(iconURL).then(image => {
-      originalIconScale = image.width / 24;
-      switch (this.iconBadge.toLowerCase()) {
-        case 'availability':
-          if (this.iconBadgeValue === 'true') {
-            return mapsindoors.BadgeRenderer.AvailableBadge.overlay(image);
-          }
-          else if (this.iconBadgeValue === 'false') {
-            return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(image);
-          }
-          break;
-        case 'occupancy':
-          return mapsindoors.BadgeRenderer.TextBadge.overlay(image, {
-            text: this.iconBadgeValue.toString()
-          });
-      }
-    }).then(badgedImage => {
-      if (badgedImage) {
-        this.iconURLToRender = badgedImage.src;
-        // Badged image must be moved so the original image aligns with other.
-        const translateIcon = (badgedImage.width - 24) / -2;
-        this.iconAttributes = {
-          style: {
-            transform: 'translateX(' + translateIcon + 'px)',
-            width: badgedImage.width / originalIconScale + 'px',
-            height: badgedImage.height / originalIconScale + 'px'
-          }
-        };
-      }
-    });
-  }
-  /**
-   * Create and return an Image from URL.
-   *
-   * @param {string} url
-   * @returns {Image}
-   */
-  async getImageFromUrl(url) {
-    return fetch(url)
-      .then(res => res.blob())
-      .then(blob => URL.createObjectURL(blob))
-      .then(objUrl => {
-      return new Promise((resolve) => {
-        const image = new Image();
-        image.width = this.iconDisplaySize;
-        image.height = this.iconDisplaySize;
-        image.onload = () => resolve(image);
-        image.onerror = () => resolve(null);
-        image.src = objUrl;
-      });
-    });
-  }
-  /**
-   * Render location list-item.
-   *
-   * @description Render location list-item.
-   * @returns {JSX.Element}
-   */
-  render() {
-    return this.location && (h(Host, { role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, h("div", { class: "details" }, h("p", { class: "details-title" }, this.location.properties.name), h("mi-location-info", { level: this.level, ref: (el) => this.infoElement = el, showExternalId: this.showExternalId })), this.location.properties.geodesicDistance && this.renderDistance()));
-  }
-  /**
-   * @description Get JSX template for icon.
-   * @returns {JSX.Element}
-   */
-  renderIcon() {
-    const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
-    return (h("div", { class: "img-container" }, h("img", Object.assign({}, this.iconAttributes, { ref: (el) => this.imageElement = el, src: iconURL }))));
-  }
-  /**
-   * @description Get JSX template for distance.
-   * @returns {JSX.Element}
-   */
-  renderDistance() {
-    return (h("div", { class: "distance" }, h("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit })));
-  }
-  static get watchers() { return {
-    "icon": ["iconChanged"],
-    "iconBadge": ["iconBadgeChanged"],
-    "iconBadgeValue": ["iconBadgeValueChanged"]
-  }; }
+    iconBadgeValueChanged() {
+        this.updateBadge();
+    }
+    /**
+     * @description Emits the location to event listeners.
+     * @param {*} location - Location object.
+     * @memberof List
+     */
+    locationClickedHandler(location) {
+        this.locationClicked.emit(location);
+    }
+    /**
+     * Called once just after the component is first connected to the DOM.
+     */
+    componentWillLoad() {
+        var _a;
+        this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
+        this.updateBadge();
+    }
+    /**
+     * Called after every render().
+     */
+    componentDidRender() {
+        if (!this.location) {
+            return;
+        }
+        this.infoElement.location = this.location;
+        this.listItemDidRender.emit();
+        // IE fallback for 'object-fit' css property
+        if (this.imageElement && 'objectFit' in document.documentElement.style === false) {
+            this.objectFitImage(this.imageElement);
+        }
+    }
+    /**
+     * Apply badge to location icon.
+     */
+    updateBadge() {
+        if (this.iconBadge && this.iconBadgeValue && this.iconURLToRender) {
+            this.applyBadgeToIcon();
+        }
+    }
+    /**
+     * @description Set image as background image.
+     * @param {HTMLImageElement} image
+     */
+    objectFitImage(image) {
+        image.setAttribute('style', `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`);
+        image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`;
+    }
+    /**
+     * Apply badge to location icon.
+     * Will make the original icon appear the intended size even though the badge exceeds its bounds.
+     */
+    applyBadgeToIcon() {
+        let originalIconScale;
+        this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
+        const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
+        this.getImageFromUrl(iconURL).then(image => {
+            originalIconScale = image.width / 24;
+            switch (this.iconBadge.toLowerCase()) {
+                case 'availability':
+                    if (this.iconBadgeValue === 'true') {
+                        return mapsindoors.BadgeRenderer.AvailableBadge.overlay(image);
+                    }
+                    else if (this.iconBadgeValue === 'false') {
+                        return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(image);
+                    }
+                    break;
+                case 'occupancy':
+                    return mapsindoors.BadgeRenderer.TextBadge.overlay(image, {
+                        text: this.iconBadgeValue.toString()
+                    });
+            }
+        }).then(badgedImage => {
+            if (badgedImage) {
+                this.iconURLToRender = badgedImage.src;
+                // Badged image must be moved so the original image aligns with other.
+                const translateIcon = (badgedImage.width - 24) / -2;
+                this.iconAttributes = {
+                    style: {
+                        transform: 'translateX(' + translateIcon + 'px)',
+                        width: badgedImage.width / originalIconScale + 'px',
+                        height: badgedImage.height / originalIconScale + 'px'
+                    }
+                };
+            }
+        });
+    }
+    /**
+     * Create and return an Image from URL.
+     *
+     * @param {string} url
+     * @returns {Image}
+     */
+    async getImageFromUrl(url) {
+        return fetch(url)
+            .then(res => res.blob())
+            .then(blob => URL.createObjectURL(blob))
+            .then(objUrl => {
+            return new Promise((resolve) => {
+                const image = new Image();
+                image.width = this.iconDisplaySize;
+                image.height = this.iconDisplaySize;
+                image.onload = () => resolve(image);
+                image.onerror = () => resolve(null);
+                image.src = objUrl;
+            });
+        });
+    }
+    /**
+     * Render location list-item.
+     *
+     * @description Render location list-item.
+     * @returns {JSX.Element}
+     */
+    render() {
+        return this.location && (h(Host, { key: '5aef44556a0231b84c5d287630b7c0b1e942337b', role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, h("div", { key: '2d04abcf241d6f4ffd18a3750e6c97a2e390f0dd', class: "details" }, h("p", { key: '67fb00fa0af9f721d5e25c01d04408d1bb218397', class: "details-title" }, this.location.properties.name), h("mi-location-info", { key: '84a8de0de326865bd51904dba3ed732df429bdd0', level: this.level, ref: (el) => this.infoElement = el, showExternalId: this.showExternalId })), typeof this.location.properties.geodesicDistance === 'number' && this.renderDistance()));
+    }
+    /**
+     * @description Get JSX template for icon.
+     * @returns {JSX.Element}
+     */
+    renderIcon() {
+        const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
+        return (h("div", { class: "img-container" }, h("img", Object.assign({}, this.iconAttributes, { ref: (el) => this.imageElement = el, src: iconURL }))));
+    }
+    /**
+     * @description Get JSX template for distance.
+     * @returns {JSX.Element}
+     */
+    renderDistance() {
+        return (h("div", { class: "distance" }, h("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit })));
+    }
+    static get watchers() { return {
+        "icon": [{
+                "iconChanged": 0
+            }],
+        "iconBadge": [{
+                "iconBadgeChanged": 0
+            }],
+        "iconBadgeValue": [{
+                "iconBadgeValueChanged": 0
+            }]
+    }; }
 };
-ListItemLocation.style = listItemLocationCss;
+ListItemLocation.style = listItemLocationCss();
 
 export { ListItemLocation as mi_list_item_location };

package/dist/mi-list.entry.js

@@ -1,56 +1,64 @@
-import { r as registerInstance, h } from './index-7e9696f3.js';
+import { r as registerInstance, h } from './index-BZQHyS7V.js';
 
-const listCss = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{display:block;height:100%;width:100%}.container{height:100%;display:flex}.container .scroll-container{width:100%;overflow-y:auto}";
+const listCss = () => `html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{display:block;height:100%;width:100%}.container{height:100%;display:flex}.container .scroll-container{width:100%;overflow-y:auto}`;
 
 const List = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.scrollButtonsEnabled = false;
-    this.scrollLength = 100;
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-    if (this.scrollButtonsEnabled) {
-      this.setScrollContainerElementRef();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * @description Determines if the MI Scroll Buttons Component should be rendered.
+         * @type {boolean}
+         */
+        this.scrollButtonsEnabled = false;
+        /**
+         * @description Determines how far to scroll when clicking one of the buttons from the MI Scroll Buttons Component.
+         * @type {number}
+         */
+        this.scrollLength = 100;
     }
-  }
-  /**
-   * @description Update state of scroll buttons when a "listItemDidRender" event is fired.
-   * @private
-   */
-  updateScrollButtonsState() {
-    if (this.scrollButtonsEnabled && this.miScrollButtonsElement.scrollContainerElementRef) {
-      this.miScrollButtonsElement.updateScrollButtonsState();
+    componentDidLoad() {
+        this.addIntersectionObserver();
+        if (this.scrollButtonsEnabled) {
+            this.setScrollContainerElementRef();
+        }
+    }
+    /**
+     * @description Update state of scroll buttons when a "listItemDidRender" event is fired.
+     * @private
+     */
+    updateScrollButtonsState() {
+        if (this.scrollButtonsEnabled && this.miScrollButtonsElement.scrollContainerElementRef) {
+            this.miScrollButtonsElement.updateScrollButtonsState();
+        }
+    }
+    /**
+     * @description Set scrollContainerElementRef attribute on miScrollButtonsElement.
+     * @private
+     */
+    setScrollContainerElementRef() {
+        this.miScrollButtonsElement.scrollContainerElementRef = this.scrollContainerElement;
+    }
+    /**
+     * @description Add intersection observer and update scroll buttons state on intersection – workaround to avoid the element not having any dimensions before it's shown.
+     * @private
+     */
+    addIntersectionObserver() {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries[0].intersectionRatio <= 0) {
+                return;
+            }
+            // Disable scroll buttons if container element doesn't have scroll
+            if (this.scrollContainerElement.scrollHeight - this.scrollContainerElement.scrollTop === this.scrollContainerElement.clientHeight) {
+                this.updateScrollButtonsState();
+            }
+            this.intersectionObserver.disconnect();
+        });
+        this.intersectionObserver.observe(this.scrollContainerElement);
+    }
+    render() {
+        return (h("div", { key: '8d38719fbe1586826bc34884d7687fcfbdd23a4d', class: "container" }, h("div", { key: '704dd6782c94e34e6bc368771499898b7184e4e5', role: "list", class: "scroll-container", ref: (el) => this.scrollContainerElement = el }, h("slot", { key: 'ad4da577575a168ef3e8e56735e4b359e084c616' })), this.scrollButtonsEnabled ? h("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (el) => this.miScrollButtonsElement = el }) : null));
     }
-  }
-  /**
-   * @description Set scrollContainerElementRef attribute on miScrollButtonsElement.
-   * @private
-   */
-  setScrollContainerElementRef() {
-    this.miScrollButtonsElement.scrollContainerElementRef = this.scrollContainerElement;
-  }
-  /**
-   * @description Add intersection observer and update scroll buttons state on intersection – workaround to avoid the element not having any dimensions before it's shown.
-   * @private
-   */
-  addIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((entries) => {
-      if (entries[0].intersectionRatio <= 0) {
-        return;
-      }
-      // Disable scroll buttons if container element doesn't have scroll
-      if (this.scrollContainerElement.scrollHeight - this.scrollContainerElement.scrollTop === this.scrollContainerElement.clientHeight) {
-        this.updateScrollButtonsState();
-      }
-      this.intersectionObserver.disconnect();
-    });
-    this.intersectionObserver.observe(this.scrollContainerElement);
-  }
-  render() {
-    return (h("div", { class: "container" }, h("div", { role: "list", class: "scroll-container", ref: (el) => this.scrollContainerElement = el }, h("slot", null)), this.scrollButtonsEnabled ? h("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (el) => this.miScrollButtonsElement = el }) : null));
-  }
 };
-List.style = listCss;
+List.style = listCss();
 
 export { List as mi_list };