@mapsindoors/map-template 1.95.8 → 1.95.10

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

@@ -1,177 +0,0 @@
-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 ListItemLocation = class {
-    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);
-    }
-    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;
-        }
-        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();
-
-export { ListItemLocation as mi_list_item_location };

package/dist/mi-list.entry.js

@@ -1,68 +0,0 @@
-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 List = class {
-    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;
-    }
-    componentDidLoad() {
-        if (!this.scrollButtonsEnabled && this.scrollButtonsEnabled !== false)
-            return;
-        if (typeof this.scrollLength !== 'number')
-            return;
-        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: 'bc2f046eadf87cd3ce09af999a80f3c46b83f985', class: "container" }, h("div", { key: '59fce6d0b99e85506457e8cd26378b771853c091', role: "list", class: "scroll-container", ref: (el) => this.scrollContainerElement = el }, h("slot", { key: '589917cef174ca09f80310b8acbc8f726a11581b' })), this.scrollButtonsEnabled ? h("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (el) => this.miScrollButtonsElement = el }) : null));
-    }
-};
-List.style = listCss();
-
-export { List as mi_list };