import { h } from '../webmapgl.core.js';

import { a as _t } from './chunk-4fdec815.js';
import { a as createColorClasses, b as hostContext } from './chunk-7c632336.js';
import { a as findItemLabel, b as debounceEvent } from './chunk-14141f33.js';

class AddressSearchBox {
    constructor() {
        this.hasFocus = false;
        this.hasValue = false;
        this.results = [];
        this.jobId = 'gl-address-search';
        this.limit = 10;
        this.maxZoom = 18;
        this.placeholder = _t('webmapgl.address-search.prompt');
        this.zoomPadding = 20;
    }
    async componentWillLoad() {
        this.parseBbox();
        this.geocodeCtrl = await this.lazyGeocodeCtrl.componentOnReady();
    }
    async handleGeocode(e) {
        if (e.detail.options.jobId === this.jobId)
            this.results = e.detail.response;
    }
    handleBodyClick() {
        this.hasFocus = false;
    }
    handleDown(e) {
        let nextItem;
        if (document.activeElement.tagName === 'ION-ITEM') {
            this.unsetFocus();
            nextItem = document.activeElement.nextElementSibling;
        }
        if (!nextItem)
            nextItem = this.el.querySelector('ion-item');
        if (nextItem) {
            e.preventDefault();
            this.setFocus(nextItem);
        }
    }
    handleUp(e) {
        if (document.activeElement.tagName === 'ION-ITEM') {
            e.preventDefault();
            this.unsetFocus();
            let prevItem = document.activeElement.previousElementSibling;
            if (prevItem) {
                this.setFocus(prevItem);
            }
            else if (this.input) {
                this.input.querySelector('input').focus();
            }
        }
    }
    parseBbox() {
        this.bboxArray = (typeof this.bbox === 'string') ?
            this.bbox.split(',').map((c) => parseFloat(c)) : this.bbox;
    }
    setFocus(el) {
        let button = el.shadowRoot.querySelector('button');
        button.focus();
        button.style.color = '#3880ff';
    }
    unsetFocus() {
        let button = document.activeElement.shadowRoot.querySelector('button');
        button.style.color = null;
    }
    formatAddress(address) {
        let parts = [];
        if (address.name &&
            address.name != address.city)
            parts.push(address.name);
        if (address.street) {
            let part = address.street;
            if (address.housenumber)
                part = address.housenumber + ' ' + part;
            parts.push(part);
        }
        if (address.city)
            parts.push(address.city);
        if (!parts.length && address.county)
            parts.push(address.county);
        if (parts.length)
            return parts.join(', ');
        return address.display;
    }
    async selectResult(result) {
        let mapEl = this.el.closest('gl-map');
        mapEl.map.fitBounds(result.bbox, {
            maxZoom: this.maxZoom,
            padding: this.zoomPadding
        });
        this.hasFocus = false;
    }
    async geocode() {
        this.geocodeCtrl.forward({
            address: this.input.value,
            url: this.url,
            bbox: this.bboxArray,
            bounded: true,
            jobId: this.jobId,
            limit: this.limit
        });
    }
    renderResults() {
        if (!this.results.length || !this.hasValue || !this.hasFocus)
            return null;
        let items = this.results.map((result) => (h("ion-item", { button: true, onClick: () => this.selectResult(result) },
            h("ion-icon", { name: "pin", slot: "start" }),
            h("ion-label", null, this.formatAddress(result.address)))));
        return (h("ion-list", { lines: "full" }, items));
    }
    handleChange() {
        if (this.input && this.input.value) {
            this.hasValue = true;
            this.geocode();
        }
        else {
            this.hasValue = false;
            if (this.results.length)
                this.results = [];
        }
    }
    handleFocus() {
        this.hasFocus = true;
    }
    handleClick(e) {
        e.stopPropagation();
    }
    render() {
        return ([
            h("ion-searchbar", { ref: (r) => this.input = r, placeholder: this.placeholder, onIonChange: () => this.handleChange(), onIonFocus: () => this.handleFocus(), onClick: (e) => this.handleClick(e) }),
            this.renderResults()
        ]);
    }
    static get is() { return "gl-address-search"; }
    static get properties() { return {
        "bbox": {
            "type": String,
            "attr": "bbox",
            "watchCallbacks": ["parseBbox"]
        },
        "bboxArray": {
            "state": true
        },
        "el": {
            "elementRef": true
        },
        "hasFocus": {
            "state": true
        },
        "hasValue": {
            "state": true
        },
        "jobId": {
            "type": String,
            "attr": "job-id"
        },
        "lazyGeocodeCtrl": {
            "connect": "gl-geocode-controller"
        },
        "limit": {
            "type": Number,
            "attr": "limit"
        },
        "maxZoom": {
            "type": Number,
            "attr": "max-zoom"
        },
        "placeholder": {
            "type": String,
            "attr": "placeholder"
        },
        "results": {
            "state": true
        },
        "url": {
            "type": String,
            "attr": "url"
        },
        "zoomPadding": {
            "type": Number,
            "attr": "zoom-padding"
        }
    }; }
    static get listeners() { return [{
            "name": "body:glForwardGeocode",
            "method": "handleGeocode"
        }, {
            "name": "body:click",
            "method": "handleBodyClick"
        }, {
            "name": "keydown.down",
            "method": "handleDown"
        }, {
            "name": "keydown.up",
            "method": "handleUp"
        }]; }
    static get style() { return "gl-address-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:0;position:absolute;top:0;width:100%;z-index:1000;max-height:100%}gl-address-search ion-searchbar{-ms-flex:none;flex:none}gl-address-search ion-list.list-md{margin-bottom:0;overflow-y:scroll}"; }
    static get styleMode() { return "md"; }
}

class NominatimClient {
    async forward(options, clientOptions = {}) {
        let params = {
            format: 'jsonv2',
            addressdetails: clientOptions.addressdetails || '1'
        };
        if (clientOptions.countrycodes)
            params['countrycodes'] = clientOptions.countrycodes;
        if (typeof options.address === 'string') {
            params['q'] = options.address;
        }
        else {
            Object.assign(params, options.address);
        }
        if (options.bbox)
            params['viewbox'] = options.bbox.join(',');
        if (options.bounded)
            params['bounded'] = '1';
        if (options.limit)
            params['limit'] = options.limit;
        let res = await fetch(this.addParams(options.url, params), {
            mode: clientOptions.mode || 'cors'
        });
        let json = await res.json();
        if (json.error)
            return json;
        return this.formatResponse(json);
    }
    async reverse(options, clientOptions = {}) {
        let params = {
            format: 'jsonv2',
            addressdetails: clientOptions.addressdetails || '1',
            zoom: clientOptions.zoom || '18'
        };
        params['lon'] = options.location.lon.toString();
        params['lat'] = options.location.lat.toString();
        let res = await fetch(this.addParams(options.url, params), {
            mode: clientOptions.mode || 'cors'
        });
        let json = await res.json();
        if (json.error)
            return json;
        return this.formatResponseItem(json);
    }
    formatResponse(res) {
        return res.map((item) => this.formatResponseItem(item));
    }
    formatResponseItem(item) {
        let bbox = null;
        if (item.boundingbox) {
            let coords = item.boundingbox.map((coord) => parseFloat(coord));
            bbox = [coords[2], coords[0], coords[3], coords[1]];
        }
        let gr = {
            address: {
                name: item.address[item.type] || item.address[item.category] || null,
                housenumber: item.address.house_number || null,
                street: item.address.road || null,
                city: item.address.city || null,
                county: item.address.county || null,
                state: item.address.state || null,
                country: item.address.country || null,
                countrycode: item.address.country_code || null,
                postalcode: item.address.postcode || null
            },
            bbox: bbox,
            client: {
                osm_id: item.osm_id || null,
                osm_type: item.osm_type || null,
                category: item.category || null,
                type: item.type || null,
                importance: item.importance || null,
                place_id: item.place_id || null,
                place_rank: item.place_rank || null
            },
            display: item.display_name || null,
            location: {
                lon: parseFloat(item.lon),
                lat: parseFloat(item.lat)
            },
            polygon: item.geojson || null
        };
        return gr;
    }
    addParams(endpoint, params) {
        let url = new URL(endpoint);
        Object.keys(params)
            .forEach(key => url.searchParams.append(key, params[key]));
        return url.toString();
    }
}

class GeocodeController {
    constructor() {
        this.defaultClient = 'nominatim';
    }
    async forward(options, clientOptions) {
        let client = this.getClient(options.client);
        let res = await client.forward(options, clientOptions);
        this.glForwardGeocode.emit({
            options: options,
            response: res
        });
        return res;
    }
    async reverse(options, clientOptions) {
        let client = this.getClient(options.client);
        let res = await client.reverse(options, clientOptions);
        this.glReverseGeocode.emit({
            options: options,
            response: res
        });
        return res;
    }
    getClient(id) {
        return GeocodeController.clients[id || this.defaultClient];
    }
    static addClient(id, service) {
        GeocodeController.clients[id] = service;
    }
    static get is() { return "gl-geocode-controller"; }
    static get properties() { return {
        "defaultClient": {
            "type": String,
            "attr": "default-client"
        },
        "forward": {
            "method": true
        },
        "reverse": {
            "method": true
        }
    }; }
    static get events() { return [{
            "name": "glForwardGeocode",
            "method": "glForwardGeocode",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "glReverseGeocode",
            "method": "glReverseGeocode",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
GeocodeController.clients = {};
GeocodeController.addClient('nominatim', new NominatimClient());

class Label {
    constructor() {
        this.noAnimate = false;
    }
    componentWillLoad() {
        this.noAnimate = (this.position === "floating");
        this.emitStyle();
    }
    componentDidLoad() {
        if (this.noAnimate) {
            setTimeout(() => {
                this.noAnimate = false;
            }, 1000);
        }
    }
    positionChanged() {
        this.emitStyle();
    }
    emitStyle() {
        const position = this.position;
        this.ionStyle.emit({
            "label": true,
            [`label-${position}`]: position !== undefined
        });
    }
    hostData() {
        const position = this.position;
        return {
            class: Object.assign({}, createColorClasses(this.color), { [`label-${position}`]: position !== undefined, [`label-no-animate`]: (this.noAnimate) })
        };
    }
    static get is() { return "ion-label"; }
    static get encapsulation() { return "scoped"; }
    static get properties() {
        return {
            "color": {
                "type": String,
                "attr": "color"
            },
            "el": {
                "elementRef": true
            },
            "mode": {
                "type": String,
                "attr": "mode"
            },
            "noAnimate": {
                "state": true
            },
            "position": {
                "type": String,
                "attr": "position",
                "watchCallbacks": ["positionChanged"]
            }
        };
    }
    static get events() {
        return [{
                "name": "ionStyle",
                "method": "ionStyle",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }];
    }
    static get style() { return ".item.sc-ion-label-md-h, .item   .sc-ion-label-md-h{--color:initial;display:block;color:var(--color);font-family:var(--ion-font-family,inherit);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-label-md-h{color:var(--ion-color-base)}[text-wrap].sc-ion-label-md-h{white-space:normal}.item-interactive-disabled.sc-ion-label-md-h, .item-interactive-disabled   .sc-ion-label-md-h{cursor:default;opacity:.3;pointer-events:none}.item-input.sc-ion-label-md-h, .item-input   .sc-ion-label-md-h{-ms-flex:initial;flex:initial;max-width:200px;pointer-events:none}.label-fixed.sc-ion-label-md-h{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-floating.sc-ion-label-md-h, .label-stacked.sc-ion-label-md-h{-ms-flex-item-align:stretch;align-self:stretch;width:auto;max-width:100%}.item-has-focus.label-floating.sc-ion-label-md-h, .item-has-focus   .label-floating.sc-ion-label-md-h, .item-has-placeholder.label-floating.sc-ion-label-md-h, .item-has-placeholder   .label-floating.sc-ion-label-md-h, .item-has-value.label-floating.sc-ion-label-md-h, .item-has-value   .label-floating.sc-ion-label-md-h{-webkit-transform:translateZ(0) scale(.8);transform:translateZ(0) scale(.8)}.label-no-animate.label-floating.sc-ion-label-md-h{-webkit-transition:none;transition:none}[text-wrap].sc-ion-label-md-h{line-height:1.5}.label-stacked.sc-ion-label-md-h{font-size:12.8px}.label-floating.sc-ion-label-md-h{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform .15s ease-in-out;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}[dir=rtl].label-floating.sc-ion-label-md-h{-webkit-transform-origin:right top;transform-origin:right top}.label-floating.sc-ion-label-md-h, .label-stacked.sc-ion-label-md-h{margin-left:0;margin-bottom:0}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.label-floating.sc-ion-label-md-h, .label-stacked.sc-ion-label-md-h{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.sc-ion-label-md-s  h1 {margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:400}.sc-ion-label-md-s  h2 {margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:400}.sc-ion-label-md-s  h3 , .sc-ion-label-md-s  h4 , .sc-ion-label-md-s  h5 , .sc-ion-label-md-s  h6 {margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:400;line-height:normal}.sc-ion-label-md-s  p {margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:20px;text-overflow:inherit;overflow:inherit}.sc-ion-label-md-s > p{color:var(--ion-color-step-600,#666)}.sc-ion-label-md-h.ion-color.sc-ion-label-md-s > p, .ion-color .sc-ion-label-md-h.sc-ion-label-md-s > p{color:inherit}"; }
    static get styleMode() { return "md"; }
}

class ListHeader {
    hostData() {
        return {
            class: createColorClasses(this.color)
        };
    }
    render() {
        return h("slot", null);
    }
    static get is() { return "ion-list-header"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "color": {
                "type": String,
                "attr": "color"
            },
            "mode": {
                "type": String,
                "attr": "mode"
            }
        };
    }
    static get style() { return ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:40px;background:var(--background);color:var(--color);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:transparent;--color:var(--ion-text-color,#000);padding-left:calc(var(--ion-safe-area-left, 0px) + 16px);min-height:45px;font-size:14px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){:host{padding-left:unset;-webkit-padding-start:calc(var(--ion-safe-area-left, 0px) + 16px);padding-inline-start:calc(var(--ion-safe-area-left, 0px) + 16px)}}"; }
    static get styleMode() { return "md"; }
}

class Radio {
    constructor() {
        this.inputId = `ion-rb-${radioButtonIds++}`;
        this.name = this.inputId;
        this.disabled = false;
        this.checked = false;
        this.onFocus = () => {
            this.ionFocus.emit();
        };
        this.onBlur = () => {
            this.ionBlur.emit();
        };
    }
    colorChanged() {
        this.emitStyle();
    }
    checkedChanged(isChecked) {
        if (isChecked) {
            this.ionSelect.emit({
                checked: true,
                value: this.value
            });
        }
        this.emitStyle();
    }
    disabledChanged() {
        this.emitStyle();
    }
    componentWillLoad() {
        if (this.value === undefined) {
            this.value = this.inputId;
        }
        this.emitStyle();
    }
    componentDidLoad() {
        this.ionRadioDidLoad.emit();
    }
    componentDidUnload() {
        this.ionRadioDidUnload.emit();
    }
    onClick() {
        if (this.checked) {
            this.ionDeselect.emit();
        }
        else {
            this.checked = true;
        }
    }
    emitStyle() {
        this.ionStyle.emit({
            "radio-checked": this.checked,
            "interactive-disabled": this.disabled,
        });
    }
    hostData() {
        const { inputId, disabled, checked, color, el } = this;
        const labelId = inputId + "-lbl";
        const label = findItemLabel(el);
        if (label) {
            label.id = labelId;
        }
        return {
            "role": "radio",
            "aria-disabled": disabled ? "true" : null,
            "aria-checked": `${checked}`,
            "aria-labelledby": labelId,
            class: Object.assign({}, createColorClasses(color), { "in-item": hostContext("ion-item", el), "interactive": true, "radio-checked": checked, "radio-disabled": disabled })
        };
    }
    render() {
        return [
            h("div", { class: "radio-icon" }, h("div", { class: "radio-inner" })),
            h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled }),
        ];
    }
    static get is() { return "ion-radio"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "checked": {
                "type": Boolean,
                "attr": "checked",
                "mutable": true,
                "watchCallbacks": ["checkedChanged"]
            },
            "color": {
                "type": String,
                "attr": "color",
                "watchCallbacks": ["colorChanged"]
            },
            "disabled": {
                "type": Boolean,
                "attr": "disabled",
                "watchCallbacks": ["disabledChanged"]
            },
            "el": {
                "elementRef": true
            },
            "mode": {
                "type": String,
                "attr": "mode"
            },
            "name": {
                "type": String,
                "attr": "name"
            },
            "value": {
                "type": "Any",
                "attr": "value",
                "mutable": true
            }
        };
    }
    static get events() {
        return [{
                "name": "ionRadioDidLoad",
                "method": "ionRadioDidLoad",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionRadioDidUnload",
                "method": "ionRadioDidUnload",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionStyle",
                "method": "ionStyle",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionSelect",
                "method": "ionSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionDeselect",
                "method": "ionDeselect",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionFocus",
                "method": "ionFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionBlur",
                "method": "ionBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "onClick"
            }];
    }
    static get style() { return ":host{display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;contain:layout size style}.radio-icon,button{width:100%;height:100%}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}:host-context([dir=rtl]) button{right:0}button::-moz-focus-inner{border:0}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--color:var(--ion-color-step-400,#999);--color-checked:var(--ion-color-primary,#3880ff);--border-width:2px;--border-style:solid;width:20px;height:20px}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:50%;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:50%;width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);-webkit-transition:-webkit-transform .28s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}:host(.radio-disabled){opacity:.3}:host(.ion-focused) .radio-icon:after{border-radius:50%;left:-12px;top:-12px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint,#4c8dff);content:\"\";opacity:.2}:host([dir=rtl].ion-focused) .radio-icon:after{right:-12px}:host(.in-item){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:11px;margin-bottom:10px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}"; }
    static get styleMode() { return "md"; }
}
let radioButtonIds = 0;

class RadioGroup {
    constructor() {
        this.inputId = `ion-rg-${radioGroupIds++}`;
        this.labelId = `${this.inputId}-lbl`;
        this.radios = [];
        this.allowEmptySelection = false;
        this.name = this.inputId;
    }
    valueChanged(value) {
        this.updateRadios();
        this.ionChange.emit({ value });
    }
    onRadioDidLoad(ev) {
        const radio = ev.target;
        radio.name = this.name;
        this.radios.push(radio);
        if (this.value == null && radio.checked) {
            this.value = radio.value;
        }
        else {
            this.updateRadios();
        }
    }
    onRadioDidUnload(ev) {
        const index = this.radios.indexOf(ev.target);
        if (index > -1) {
            this.radios.splice(index, 1);
        }
    }
    onRadioSelect(ev) {
        const selectedRadio = ev.target;
        if (selectedRadio) {
            this.value = selectedRadio.value;
        }
    }
    onRadioDeselect(ev) {
        if (this.allowEmptySelection) {
            const selectedRadio = ev.target;
            if (selectedRadio) {
                selectedRadio.checked = false;
                this.value = undefined;
            }
        }
    }
    componentDidLoad() {
        let header = this.el.querySelector("ion-list-header");
        if (!header) {
            header = this.el.querySelector("ion-item-divider");
        }
        if (header) {
            const label = header.querySelector("ion-label");
            if (label) {
                this.labelId = label.id = this.name + "-lbl";
            }
        }
        this.updateRadios();
    }
    updateRadios() {
        const value = this.value;
        let hasChecked = false;
        for (const radio of this.radios) {
            if (!hasChecked && radio.value === value) {
                hasChecked = true;
                radio.checked = true;
            }
            else {
                radio.checked = false;
            }
        }
    }
    hostData() {
        return {
            "role": "radiogroup",
            "aria-labelledby": this.labelId
        };
    }
    static get is() { return "ion-radio-group"; }
    static get properties() {
        return {
            "allowEmptySelection": {
                "type": Boolean,
                "attr": "allow-empty-selection"
            },
            "el": {
                "elementRef": true
            },
            "name": {
                "type": String,
                "attr": "name"
            },
            "value": {
                "type": "Any",
                "attr": "value",
                "mutable": true,
                "watchCallbacks": ["valueChanged"]
            }
        };
    }
    static get events() {
        return [{
                "name": "ionChange",
                "method": "ionChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }];
    }
    static get listeners() {
        return [{
                "name": "ionRadioDidLoad",
                "method": "onRadioDidLoad"
            }, {
                "name": "ionRadioDidUnload",
                "method": "onRadioDidUnload"
            }, {
                "name": "ionSelect",
                "method": "onRadioSelect"
            }, {
                "name": "ionDeselect",
                "method": "onRadioDeselect"
            }];
    }
}
let radioGroupIds = 0;

class Searchbar {
    constructor() {
        this.isCancelVisible = false;
        this.shouldAlignLeft = true;
        this.focused = false;
        this.noAnimate = true;
        this.animated = false;
        this.autocomplete = "off";
        this.autocorrect = "off";
        this.cancelButtonIcon = "md-arrow-back";
        this.cancelButtonText = "Cancel";
        this.debounce = 250;
        this.placeholder = "Search";
        this.searchIcon = "search";
        this.showCancelButton = false;
        this.spellcheck = false;
        this.type = "search";
        this.value = "";
        this.onClearInput = (ev) => {
            this.ionClear.emit();
            if (ev) {
                ev.preventDefault();
                ev.stopPropagation();
            }
            setTimeout(() => {
                const value = this.getValue();
                if (value !== "") {
                    this.value = "";
                    this.ionInput.emit();
                }
            }, 16 * 4);
        };
        this.onCancelSearchbar = (ev) => {
            if (ev) {
                ev.preventDefault();
                ev.stopPropagation();
            }
            this.ionCancel.emit();
            this.onClearInput();
            if (this.nativeInput) {
                this.nativeInput.blur();
            }
        };
        this.onInput = (ev) => {
            const input = ev.target;
            if (input) {
                this.value = input.value;
            }
            this.ionInput.emit(ev);
        };
        this.onBlur = () => {
            this.focused = false;
            this.ionBlur.emit();
            this.positionElements();
        };
        this.onFocus = () => {
            this.focused = true;
            this.ionFocus.emit();
            this.positionElements();
        };
    }
    debounceChanged() {
        this.ionChange = debounceEvent(this.ionChange, this.debounce);
    }
    valueChanged() {
        const inputEl = this.nativeInput;
        const value = this.getValue();
        if (inputEl && inputEl.value !== value) {
            inputEl.value = value;
        }
        this.ionChange.emit({ value });
    }
    componentDidLoad() {
        this.positionElements();
        this.debounceChanged();
        setTimeout(() => {
            this.noAnimate = false;
        }, 300);
    }
    setFocus() {
        if (this.nativeInput) {
            this.nativeInput.focus();
        }
    }
    getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    positionElements() {
        const value = this.getValue();
        const prevAlignLeft = this.shouldAlignLeft;
        const shouldAlignLeft = (!this.animated || value.trim() !== "" || !!this.focused);
        this.shouldAlignLeft = shouldAlignLeft;
        if (this.mode !== "ios") {
            return;
        }
        if (prevAlignLeft !== shouldAlignLeft) {
            this.positionPlaceholder();
        }
        if (this.animated) {
            this.positionCancelButton();
        }
    }
    positionPlaceholder() {
        const inputEl = this.nativeInput;
        if (!inputEl) {
            return;
        }
        const isRTL = this.doc.dir === "rtl";
        const iconEl = (this.el.shadowRoot || this.el).querySelector(".searchbar-search-icon");
        if (this.shouldAlignLeft) {
            inputEl.removeAttribute("style");
            iconEl.removeAttribute("style");
        }
        else {
            const doc = this.doc;
            const tempSpan = doc.createElement("span");
            tempSpan.innerHTML = this.placeholder;
            doc.body.appendChild(tempSpan);
            const textWidth = tempSpan.offsetWidth;
            tempSpan.remove();
            const inputLeft = "calc(50% - " + (textWidth / 2) + "px)";
            const iconLeft = "calc(50% - " + ((textWidth / 2) + 30) + "px)";
            if (isRTL) {
                inputEl.style.paddingRight = inputLeft;
                iconEl.style.marginRight = iconLeft;
            }
            else {
                inputEl.style.paddingLeft = inputLeft;
                iconEl.style.marginLeft = iconLeft;
            }
        }
    }
    positionCancelButton() {
        const isRTL = this.doc.dir === "rtl";
        const cancelButton = (this.el.shadowRoot || this.el).querySelector(".searchbar-cancel-button");
        const shouldShowCancel = this.focused;
        if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
            const cancelStyle = cancelButton.style;
            this.isCancelVisible = shouldShowCancel;
            if (shouldShowCancel) {
                if (isRTL) {
                    cancelStyle.marginLeft = "0";
                }
                else {
                    cancelStyle.marginRight = "0";
                }
            }
            else {
                const offset = cancelButton.offsetWidth;
                if (offset > 0) {
                    if (isRTL) {
                        cancelStyle.marginLeft = -offset + "px";
                    }
                    else {
                        cancelStyle.marginRight = -offset + "px";
                    }
                }
            }
        }
    }
    getValue() {
        return this.value || "";
    }
    hostData() {
        const animated = this.animated && this.config.getBoolean("animated", true);
        return {
            class: Object.assign({}, createColorClasses(this.color), { "searchbar-animated": animated, "searchbar-no-animate": animated && this.noAnimate, "searchbar-has-value": (this.getValue() !== ""), "searchbar-left-aligned": this.shouldAlignLeft, "searchbar-has-focus": this.focused })
        };
    }
    render() {
        const clearIcon = this.clearIcon || (this.mode === "ios" ? "ios-close-circle" : "md-close");
        const searchIcon = this.searchIcon;
        const cancelButton = this.showCancelButton && (h("button", { type: "button", tabIndex: this.mode === "ios" && !this.focused ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", null, this.mode === "md"
            ? h("ion-icon", { mode: this.mode, icon: this.cancelButtonIcon, lazy: false })
            : this.cancelButtonText)));
        return [
            h("div", { class: "searchbar-input-container" }, h("input", { ref: el => this.nativeInput = el, class: "searchbar-input", onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellCheck: this.spellcheck }), this.mode === "md" && cancelButton, h("ion-icon", { mode: this.mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: this.onClearInput, onTouchStart: this.onClearInput }, h("ion-icon", { mode: this.mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))),
            this.mode === "ios" && cancelButton
        ];
    }
    static get is() { return "ion-searchbar"; }
    static get encapsulation() { return "scoped"; }
    static get properties() {
        return {
            "animated": {
                "type": Boolean,
                "attr": "animated"
            },
            "autocomplete": {
                "type": String,
                "attr": "autocomplete"
            },
            "autocorrect": {
                "type": String,
                "attr": "autocorrect"
            },
            "cancelButtonIcon": {
                "type": String,
                "attr": "cancel-button-icon"
            },
            "cancelButtonText": {
                "type": String,
                "attr": "cancel-button-text"
            },
            "clearIcon": {
                "type": String,
                "attr": "clear-icon"
            },
            "color": {
                "type": String,
                "attr": "color"
            },
            "config": {
                "context": "config"
            },
            "debounce": {
                "type": Number,
                "attr": "debounce",
                "watchCallbacks": ["debounceChanged"]
            },
            "doc": {
                "context": "document"
            },
            "el": {
                "elementRef": true
            },
            "focused": {
                "state": true
            },
            "getInputElement": {
                "method": true
            },
            "mode": {
                "type": String,
                "attr": "mode"
            },
            "noAnimate": {
                "state": true
            },
            "placeholder": {
                "type": String,
                "attr": "placeholder"
            },
            "searchIcon": {
                "type": String,
                "attr": "search-icon"
            },
            "setFocus": {
                "method": true
            },
            "showCancelButton": {
                "type": Boolean,
                "attr": "show-cancel-button"
            },
            "spellcheck": {
                "type": Boolean,
                "attr": "spellcheck"
            },
            "type": {
                "type": String,
                "attr": "type"
            },
            "value": {
                "type": String,
                "attr": "value",
                "mutable": true,
                "watchCallbacks": ["valueChanged"]
            }
        };
    }
    static get events() {
        return [{
                "name": "ionInput",
                "method": "ionInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionChange",
                "method": "ionChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionCancel",
                "method": "ionCancel",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionClear",
                "method": "ionClear",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionBlur",
                "method": "ionBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }, {
                "name": "ionFocus",
                "method": "ionFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }];
    }
    static get style() { return ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family,inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h   .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h   .searchbar-cancel-button.sc-ion-searchbar-md, .ion-color.sc-ion-searchbar-md-h   .searchbar-clear-button.sc-ion-searchbar-md, .ion-color.sc-ion-searchbar-md-h   .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-ms-clear, .searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md > div.sc-ion-searchbar-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-has-value.searchbar-has-focus.sc-ion-searchbar-md-h   .searchbar-clear-button.sc-ion-searchbar-md{display:block}.sc-ion-searchbar-md-h{--clear-button-color:initial;--cancel-button-color:var(--ion-color-step-900,#1a1a1a);--color:var(--ion-color-step-850,#262626);--icon-color:var(--ion-color-step-600,#666);--background:var(--ion-background-color,#fff);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md-h   .searchbar-search-icon.sc-ion-searchbar-md, [dir=rtl]   .sc-ion-searchbar-md-h   .searchbar-search-icon.sc-ion-searchbar-md{right:16px}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md-h   .searchbar-cancel-button.sc-ion-searchbar-md, [dir=rtl]   .sc-ion-searchbar-md-h   .searchbar-cancel-button.sc-ion-searchbar-md{right:5px}.searchbar-cancel-button.sc-ion-searchbar-md, .searchbar-search-icon.sc-ion-searchbar-md{position:absolute}.searchbar-cancel-button.activated.sc-ion-searchbar-md, .searchbar-search-icon.activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;border-radius:2px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md-h   .searchbar-input.sc-ion-searchbar-md, [dir=rtl]   .sc-ion-searchbar-md-h   .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md-h   .searchbar-clear-button.sc-ion-searchbar-md, [dir=rtl]   .sc-ion-searchbar-md-h   .searchbar-clear-button.sc-ion-searchbar-md{left:13px}.searchbar-clear-button.activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h   .searchbar-cancel-button.sc-ion-searchbar-md, .searchbar-has-focus.sc-ion-searchbar-md-h   .searchbar-search-icon.sc-ion-searchbar-md{display:block}ion-toolbar.sc-ion-searchbar-md-h, ion-toolbar   .sc-ion-searchbar-md-h{padding-left:3px;padding-right:3px;padding-top:3px;padding-bottom:3px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){ion-toolbar.sc-ion-searchbar-md-h, ion-toolbar   .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:3px;padding-inline-start:3px;-webkit-padding-end:3px;padding-inline-end:3px}}"; }
    static get styleMode() { return "md"; }
}

export { AddressSearchBox as GlAddressSearch, GeocodeController as GlGeocodeController, Label as IonLabel, ListHeader as IonListHeader, Radio as IonRadio, RadioGroup as IonRadioGroup, Searchbar as IonSearchbar };
