@prushforth/map 1.0.0-preview.1

package/dist/collection/components/map-meta/map-meta.js

@@ -0,0 +1,82 @@
+export class MapMeta {
+    el;
+    name;
+    content;
+    nameChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            // handle side effects if needed
+        }
+    }
+    contentChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            // handle side effects if needed
+        }
+    }
+    // Validate 'cs' content
+    set contentValue(val) {
+        if (this.name === 'cs' &&
+            val &&
+            !['tcrs', 'tilematrix', 'pcrs', 'gcrs', 'map', 'tile'].includes(val)) {
+            return;
+        }
+        this.content = val;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    render() {
+        return null;
+    }
+    static get is() { return "map-meta"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "content"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "nameChanged"
+            }, {
+                "propName": "content",
+                "methodName": "contentChanged"
+            }];
+    }
+}

package/dist/collection/components/map-properties/map-properties.js

@@ -0,0 +1,7 @@
+export class MapProperties {
+    render() {
+        return null;
+    }
+    static get is() { return "map-properties"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/map-select/map-select.js

@@ -0,0 +1,145 @@
+export class MapSelect {
+    el;
+    name;
+    selectDetails;
+    htmlSelect;
+    connectedCallback() {
+        this._createLayerControlForSelect();
+        // Publish as lowercase to match MapML source compatibility
+        this.el.selectdetails = this.selectDetails;
+        this.el.htmlselect = this.htmlSelect;
+    }
+    disconnectedCallback() { }
+    nameChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            // handle side effects if needed
+        }
+    }
+    _createLayerControlForSelect() {
+        this.htmlSelect = this.transcribe();
+        const selectdetails = document.createElement('details');
+        selectdetails.className = 'mapml-layer-item-details mapml-control-layers';
+        const selectsummary = document.createElement('summary');
+        const selectSummaryLabel = document.createElement('label');
+        selectSummaryLabel.innerText = this.name || '';
+        if (this.el.hasAttribute('id'))
+            selectSummaryLabel.setAttribute('for', this.el.getAttribute('id'));
+        selectsummary.appendChild(selectSummaryLabel);
+        selectdetails.appendChild(selectsummary);
+        selectdetails.appendChild(this.htmlSelect);
+        this.selectDetails = selectdetails;
+        // Add change event listener to trigger redraw
+        this.htmlSelect.addEventListener('change', () => {
+            this.el.parentElement?._extentLayer?.redraw?.();
+        });
+    }
+    transcribe() {
+        const select = document.createElement('select');
+        const elementAttrNames = this.el.getAttributeNames();
+        for (let i = 0; i < elementAttrNames.length; i++) {
+            select.setAttribute(elementAttrNames[i], this.el.getAttribute(elementAttrNames[i]));
+        }
+        // Use querySelectorAll to get actual DOM children (this.el.children is a FakeNodeList in Stencil)
+        const options = this.el.querySelectorAll('map-option');
+        for (let i = 0; i < options.length; i++) {
+            const option = document.createElement('option');
+            const optionAttrNames = options[i].getAttributeNames();
+            for (let j = 0; j < optionAttrNames.length; j++) {
+                option.setAttribute(optionAttrNames[j], options[i].getAttribute(optionAttrNames[j]));
+            }
+            option.innerHTML = options[i].innerHTML;
+            select.appendChild(option);
+        }
+        return select;
+    }
+    async whenReady() {
+        return new Promise((resolve, reject) => {
+            let interval, failureTimer;
+            if (this.selectDetails) {
+                resolve();
+            }
+            else {
+                const selectElement = this;
+                interval = setInterval(testForSelect, 300, selectElement);
+                failureTimer = setTimeout(selectNotDefined, 10000);
+            }
+            function testForSelect(selectElement) {
+                if (selectElement.selectDetails) {
+                    clearInterval(interval);
+                    clearTimeout(failureTimer);
+                    resolve();
+                }
+                else if (!selectElement.el.isConnected) {
+                    clearInterval(interval);
+                    clearTimeout(failureTimer);
+                    reject('map-select was disconnected while waiting to be ready');
+                }
+            }
+            function selectNotDefined() {
+                clearInterval(interval);
+                clearTimeout(failureTimer);
+                reject('Timeout reached waiting for map-select to be ready');
+            }
+        });
+    }
+    render() {
+        // Render the details/summary/select structure
+        return null;
+    }
+    static get is() { return "map-select"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "whenReady": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MapSelect": {
+                            "location": "global",
+                            "id": "global::MapSelect"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "nameChanged"
+            }];
+    }
+}

package/dist/collection/components/map-span/map-span.js

@@ -0,0 +1,7 @@
+export class MapSpan {
+    el;
+    connectedCallback() { }
+    disconnectedCallback() { }
+    static get is() { return "map-span"; }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/map-style/map-style.js

@@ -0,0 +1,144 @@
+export class MapStyle {
+    el;
+    media;
+    _mql;
+    _changeHandler;
+    _observer;
+    styleElement;
+    _stylesheetHost;
+    async mediaChanged(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            await this._registerMediaQuery(newValue);
+        }
+    }
+    getMapEl() {
+        return window.M?.Util?.getClosest?.(this.el, 'gcds-ext-map') || this.el.closest('gcds-ext-map');
+    }
+    _connect() {
+        this.styleElement = document.createElement('style');
+        this.styleElement.mapStyle = this.el;
+        this.styleElement.textContent = this.el.textContent;
+        this._copyAttributes(this.el, this.styleElement);
+        // Expose styleElement as a public property on the element
+        Object.defineProperty(this.el, 'styleElement', {
+            get: () => this.styleElement,
+            configurable: true,
+            enumerable: true
+        });
+        if (!this._stylesheetHost)
+            return;
+        // Try to render via layer's renderStyles method
+        // Note: If layer is not yet ready, the layer will call renderStyles
+        // on all map-style children when it finishes initialization
+        if (this._stylesheetHost._layer) {
+            this._stylesheetHost._layer.renderStyles?.(this.el);
+        }
+        else if (this._stylesheetHost._templatedLayer) {
+            this._stylesheetHost._templatedLayer.renderStyles?.(this.el);
+        }
+        else if (this._stylesheetHost._extentLayer) {
+            this._stylesheetHost._extentLayer.renderStyles?.(this.el);
+        }
+        this._observer = new MutationObserver(() => {
+            this.styleElement.textContent = this.el.textContent;
+        });
+        this._observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    _disconnect() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = undefined;
+        }
+        if (this._stylesheetHost && this.styleElement) {
+            this.styleElement.remove();
+            this.styleElement = undefined;
+        }
+    }
+    _copyAttributes(source, target) {
+        Array.from(source.attributes).forEach((attribute) => {
+            if (attribute.nodeName !== 'media' && attribute.nodeName !== 'data-testid') {
+                target.setAttribute(attribute.nodeName, attribute.nodeValue);
+            }
+        });
+    }
+    async _registerMediaQuery(mq) {
+        if (!this._changeHandler) {
+            this._changeHandler = () => {
+                this._disconnect();
+                if (this._mql && this._mql.matches) {
+                    this._connect();
+                }
+            };
+        }
+        if (mq) {
+            const map = this.getMapEl();
+            if (!map)
+                return;
+            if (typeof map.whenReady === 'function')
+                await map.whenReady();
+            if (this._mql) {
+                this._mql.removeEventListener('change', this._changeHandler);
+            }
+            this._mql = map.matchMedia(mq);
+            this._changeHandler();
+            this._mql.addEventListener('change', this._changeHandler);
+        }
+        else if (this._mql) {
+            this._mql.removeEventListener('change', this._changeHandler);
+            this._mql = undefined;
+            this._disconnect();
+            this._connect();
+        }
+    }
+    async connectedCallback() {
+        this._stylesheetHost = this.el.getRootNode() instanceof ShadowRoot
+            ? this.el.getRootNode().host
+            : this.el.parentElement;
+        if (!this._stylesheetHost)
+            return;
+        if (this.media) {
+            await this._registerMediaQuery(this.media);
+        }
+        else {
+            this._connect();
+        }
+    }
+    disconnectedCallback() {
+        this._disconnect();
+    }
+    static get is() { return "map-style"; }
+    static get properties() {
+        return {
+            "media": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "media"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "media",
+                "methodName": "mediaChanged"
+            }];
+    }
+}