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

import { a as createColorClasses, b as hostContext } from './chunk-7c632336.js';
import { a as findItemLabel, d as renderHiddenInput } from './chunk-14141f33.js';
import { b as toArray } from './chunk-0359b4ed.js';

class LegendItem {
    constructor() {
        this.toggle = false;
        this.widget = 'item';
    }
    async componentWillLoad() {
        this.handleStyleId();
    }
    async handleStyleId() {
        this.update(this.getStyle().json);
    }
    handleStyleUpdated(e) {
        if (e.detail.id === this.styleId)
            this.update(e.detail.json);
    }
    getStyle() {
        return document.querySelector(`gl-style#${this.styleId}`);
    }
    getVisible(json) {
        const layers = toArray(this.layers);
        if (!layers || !layers.length)
            return true;
        if (!json.layers || !json.layers.length)
            return false;
        for (let layer of json.layers) {
            if (layers.indexOf(layer.id) !== -1) {
                if (!layer.layout)
                    return true;
                return layer.layout.visibility !== 'none';
            }
        }
    }
    setVisible(visible) {
        if (this.visible === visible)
            return;
        let layers = toArray(this.layers);
        let styleEl = this.getStyle();
        let json = Object.assign({}, styleEl.json);
        json.layers = (json.layers || []).map((layer) => {
            if (layers.indexOf(layer.id) !== -1) {
                layer.layout = layer.layout || {};
                layer.layout.visibility = (visible) ? 'visible' : 'none';
            }
            return layer;
        });
        styleEl.json = json;
    }
    update(json) {
        if (json)
            this.visible = this.getVisible(json);
    }
    render() {
        let content = [];
        if (this.image)
            content.push(h("ion-thumbnail", { slot: "start" },
                h("img", { src: this.image, alt: this.el.textContent })));
        content.push(h("ion-label", null,
            h("slot", null)));
        if (this.toggle)
            content.push(h("ion-toggle", { slot: "end", checked: this.visible, onIonChange: (e) => this.setVisible(e.detail.checked) }));
        if (this.widget === 'divider')
            return (h("ion-item-divider", null, content));
        return (h("ion-item", null, content));
    }
    static get is() { return "gl-legend-item"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "image": {
            "type": String,
            "attr": "image"
        },
        "layers": {
            "type": String,
            "attr": "layers"
        },
        "styleId": {
            "type": String,
            "attr": "style-id",
            "watchCallbacks": ["handleStyleId"]
        },
        "toggle": {
            "type": Boolean,
            "attr": "toggle"
        },
        "visible": {
            "state": true
        },
        "widget": {
            "type": String,
            "attr": "widget"
        }
    }; }
    static get listeners() { return [{
            "name": "body:glStyleElementModified",
            "method": "handleStyleUpdated"
        }]; }
    static get style() { return "gl-legend-item .item ion-thumbnail{height:40px;width:40px}"; }
}

class ItemDivider {
    constructor() {
        this.sticky = false;
    }
    componentDidLoad() {
        Array.from(this.el.querySelectorAll("ion-button")).forEach(button => {
            if (button.size === undefined) {
                button.size = "small";
            }
        });
    }
    hostData() {
        return {
            class: Object.assign({}, createColorClasses(this.color), { "item-divider-sticky": this.sticky, "item": true })
        };
    }
    render() {
        return [
            h("slot", { name: "start" }),
            h("div", { class: "item-divider-inner" }, h("div", { class: "item-divider-wrapper" }, h("slot", null)), h("slot", { name: "end" }))
        ];
    }
    static get is() { return "ion-item-divider"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "color": {
                "type": String,
                "attr": "color"
            },
            "el": {
                "elementRef": true
            },
            "mode": {
                "type": String,
                "attr": "mode"
            },
            "sticky": {
                "type": Boolean,
                "attr": "sticky"
            }
        };
    }
    static get style() { return ".sc-ion-item-divider-md-h{--padding-start:0px;--padding-end:0px;--padding-top:0px;--padding-bottom:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:calc(var(--padding-end) + var(--ion-safe-area-right, 0px));padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:30px;background:var(--background);color:var(--color);font-family:var(--ion-font-family,inherit);overflow:hidden;z-index:100;-webkit-box-sizing:border-box;box-sizing:border-box}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:calc(var(--padding-end) + var(--ion-safe-area-right, 0px));padding-inline-end:calc(var(--padding-end) + var(--ion-safe-area-right, 0px))}}.ion-color.sc-ion-item-divider-md-h{background:var(--ion-color-base);color:var(--ion-color-contrast)}.item-divider-sticky.sc-ion-item-divider-md-h{position:-webkit-sticky;position:sticky;top:0}.item-divider-inner.sc-ion-item-divider-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-top:0;padding-bottom:0;min-height:inherit;border:0}.item-divider-inner.sc-ion-item-divider-md, .item-divider-wrapper.sc-ion-item-divider-md{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden}.item-divider-wrapper.sc-ion-item-divider-md{text-overflow:ellipsis}.sc-ion-item-divider-md-h{--background:var(--ion-background-color,#fff);--color:var(--ion-color-step-400,#999);--padding-start:16px;border-bottom:1px solid var(--ion-item-border-color,var(--ion-border-color,var(--ion-color-step-150,rgba(0,0,0,.13))));font-size:14px}.item-divider-inner.sc-ion-item-divider-md{padding-right:0}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.item-divider-inner.sc-ion-item-divider-md{padding-right:unset;-webkit-padding-end:0;padding-inline-end:0}}.sc-ion-item-divider-md-s > [slot=start]{margin-right:32px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > [slot=start]{margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}.sc-ion-item-divider-md-s > [slot=end]{margin-left:32px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > [slot=end]{margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}.sc-ion-item-divider-md-s > ion-label{margin-left:0;margin-right:0;margin-top:13px;margin-bottom:10px}.sc-ion-item-divider-md-s > ion-icon{color:rgba(var(--ion-text-color-rgb,0,0,0),.54);font-size:24px}.sc-ion-item-divider-md-s > ion-icon[slot]{margin-top:12px;margin-bottom:12px}.sc-ion-item-divider-md-s > ion-icon[slot=start]{margin-right:32px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-icon[slot=start]{margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}.sc-ion-item-divider-md-s > ion-icon[slot=end]{margin-left:16px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-icon[slot=end]{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.sc-ion-item-divider-md-s > ion-note{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-ms-flex-item-align:start;align-self:flex-start;font-size:11px}.sc-ion-item-divider-md-s > ion-note[slot]{padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}.sc-ion-item-divider-md-s > ion-note[slot=start]{padding-right:16px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-note[slot=start]{padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}.sc-ion-item-divider-md-s > ion-note[slot=end]{padding-left:16px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-note[slot=end]{padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}.sc-ion-item-divider-md-s > ion-avatar{width:40px;height:40px}.sc-ion-item-divider-md-s > ion-thumbnail{width:56px;height:56px}.sc-ion-item-divider-md-s > ion-avatar, .sc-ion-item-divider-md-s > ion-thumbnail{margin-top:8px;margin-bottom:8px}.sc-ion-item-divider-md-s > ion-avatar[slot=start], .sc-ion-item-divider-md-s > ion-thumbnail[slot=start]{margin-right:16px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-avatar[slot=start], .sc-ion-item-divider-md-s > ion-thumbnail[slot=start]{margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}.sc-ion-item-divider-md-s > ion-avatar[slot=end], .sc-ion-item-divider-md-s > ion-thumbnail[slot=end]{margin-left:16px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-item-divider-md-s > ion-avatar[slot=end], .sc-ion-item-divider-md-s > ion-thumbnail[slot=end]{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.sc-ion-item-divider-md-s > h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:400}.sc-ion-item-divider-md-s > h2{font-size:16px}.sc-ion-item-divider-md-s > h2, .sc-ion-item-divider-md-s > h3, h4.sc-ion-item-divider-md, h5.sc-ion-item-divider-md, h6.sc-ion-item-divider-md{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-weight:400}.sc-ion-item-divider-md-s > h3, h4.sc-ion-item-divider-md, h5.sc-ion-item-divider-md, h6.sc-ion-item-divider-md, .sc-ion-item-divider-md-s > p{font-size:14px;line-height:normal}.sc-ion-item-divider-md-s > p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;color:var(--ion-color-step-600,#666);text-overflow:inherit;overflow:inherit}"; }
    static get styleMode() { return "md"; }
}

function hapticSelection() {
    const engine = window.TapticEngine;
    if (engine) {
        engine.selection();
    }
}

class Toggle {
    constructor() {
        this.inputId = `ion-tg-${toggleIds++}`;
        this.lastDrag = 0;
        this.activated = false;
        this.name = this.inputId;
        this.checked = false;
        this.disabled = false;
        this.value = "on";
        this.onFocus = () => {
            this.ionFocus.emit();
        };
        this.onBlur = () => {
            this.ionBlur.emit();
        };
    }
    checkedChanged(isChecked) {
        this.ionChange.emit({
            checked: isChecked,
            value: this.value
        });
    }
    disabledChanged() {
        this.emitStyle();
        if (this.gesture) {
            this.gesture.setDisabled(this.disabled);
        }
    }
    componentWillLoad() {
        this.emitStyle();
    }
    async componentDidLoad() {
        this.gesture = (await import('./chunk-f56eaea8.js')).createGesture({
            el: this.el,
            queue: this.queue,
            gestureName: "toggle",
            gesturePriority: 100,
            threshold: 5,
            passive: false,
            onStart: () => this.onStart(),
            onMove: ev => this.onMove(ev),
            onEnd: ev => this.onEnd(ev),
        });
        this.disabledChanged();
    }
    componentDidUnload() {
        if (this.gesture) {
            this.gesture.destroy();
            this.gesture = undefined;
        }
    }
    onClick() {
        if (this.lastDrag + 300 < Date.now()) {
            this.checked = !this.checked;
        }
    }
    emitStyle() {
        this.ionStyle.emit({
            "interactive-disabled": this.disabled,
        });
    }
    onStart() {
        this.activated = true;
        this.setFocus();
    }
    onMove(detail) {
        if (shouldToggle(this.checked, detail.deltaX, -10)) {
            this.checked = !this.checked;
            hapticSelection();
        }
    }
    onEnd(ev) {
        this.activated = false;
        this.lastDrag = Date.now();
        ev.event.preventDefault();
        ev.event.stopImmediatePropagation();
    }
    getValue() {
        return this.value || "";
    }
    setFocus() {
        if (this.buttonEl) {
            this.buttonEl.focus();
        }
    }
    hostData() {
        const { inputId, disabled, checked, activated, color, el } = this;
        const labelId = inputId + "-lbl";
        const label = findItemLabel(el);
        if (label) {
            label.id = labelId;
        }
        return {
            "role": "checkbox",
            "aria-disabled": disabled ? "true" : null,
            "aria-checked": `${checked}`,
            "aria-labelledby": labelId,
            class: Object.assign({}, createColorClasses(color), { "in-item": hostContext("ion-item", el), "toggle-activated": activated, "toggle-checked": checked, "toggle-disabled": disabled, "interactive": true })
        };
    }
    render() {
        const value = this.getValue();
        renderHiddenInput(true, this.el, this.name, (this.checked ? value : ""), this.disabled);
        return [
            h("div", { class: "toggle-icon" }, h("div", { class: "toggle-inner" })),
            h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, ref: el => this.buttonEl = el })
        ];
    }
    static get is() { return "ion-toggle"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "activated": {
                "state": true
            },
            "checked": {
                "type": Boolean,
                "attr": "checked",
                "mutable": true,
                "watchCallbacks": ["checkedChanged"]
            },
            "color": {
                "type": String,
                "attr": "color"
            },
            "disabled": {
                "type": Boolean,
                "attr": "disabled",
                "watchCallbacks": ["disabledChanged"]
            },
            "el": {
                "elementRef": true
            },
            "mode": {
                "type": String,
                "attr": "mode"
            },
            "name": {
                "type": String,
                "attr": "name"
            },
            "queue": {
                "context": "queue"
            },
            "value": {
                "type": String,
                "attr": "value"
            }
        };
    }
    static get events() {
        return [{
                "name": "ionChange",
                "method": "ionChange",
                "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
            }, {
                "name": "ionStyle",
                "method": "ionStyle",
                "bubbles": true,
                "cancelable": true,
                "composed": true
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "onClick"
            }];
    }
    static get style() { return ".sc-ion-toggle-md-h{-webkit-box-sizing:content-box!important;box-sizing:content-box!important;display:inline-block;outline:none;contain:content;cursor:pointer;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}.ion-focused.sc-ion-toggle-md-h   input.sc-ion-toggle-md{border:2px solid #5e9ed6}.toggle-disabled.sc-ion-toggle-md-h{pointer-events:none}button.sc-ion-toggle-md{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[dir=rtl].sc-ion-toggle-md-h   button.sc-ion-toggle-md, [dir=rtl]   .sc-ion-toggle-md-h   button.sc-ion-toggle-md{right:0}button.sc-ion-toggle-md::-moz-focus-inner{border:0}.sc-ion-toggle-md-h{--background:var(--ion-color-medium-tint,#a2a4ab);--background-checked:rgba(var(--ion-color-primary-rgb,56,128,255),0.5);--handle-background:var(--ion-background-color,#fff);--handle-background-checked:var(--ion-color-primary,#3880ff);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;-webkit-box-sizing:content-box;box-sizing:content-box;position:relative;width:36px;height:14px;contain:strict}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.sc-ion-toggle-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.ion-color.toggle-checked.sc-ion-toggle-md-h   .toggle-icon.sc-ion-toggle-md{background:rgba(var(--ion-color-base-rgb),.5)}.ion-color.toggle-checked.sc-ion-toggle-md-h   .toggle-inner.sc-ion-toggle-md{background:var(--ion-color-base)}.toggle-icon.sc-ion-toggle-md{border-radius:14px;display:block;position:relative;width:100%;height:100%;-webkit-transition:background-color .16s;transition:background-color .16s;background:var(--background);pointer-events:none}.toggle-inner.sc-ion-toggle-md{left:0;top:-3px;border-radius:50%;position:absolute;width:20px;height:20px;-webkit-transition-duration:.16s;transition-duration:.16s;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,-webkit-transform;transition-property:transform,background-color;transition-property:transform,background-color,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);background:var(--handle-background);-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);will-change:transform,background-color;contain:strict}[dir=rtl].sc-ion-toggle-md-h   .toggle-inner.sc-ion-toggle-md, [dir=rtl]   .sc-ion-toggle-md-h   .toggle-inner.sc-ion-toggle-md{right:0}.toggle-checked.sc-ion-toggle-md-h   .toggle-icon.sc-ion-toggle-md{background:var(--background-checked)}.toggle-checked.sc-ion-toggle-md-h   .toggle-inner.sc-ion-toggle-md{-webkit-transform:translate3d(16px,0,0);transform:translate3d(16px,0,0);background:var(--handle-background-checked)}[dir=rtl].toggle-checked.sc-ion-toggle-md-h   .toggle-inner.sc-ion-toggle-md{-webkit-transform:translate3d(calc(-1 * 16px),0,0);transform:translate3d(calc(-1 * 16px),0,0)}.toggle-disabled.sc-ion-toggle-md-h{opacity:.3}.in-item[slot].sc-ion-toggle-md-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:16px;padding-right:0;padding-top:12px;padding-bottom:12px;cursor:pointer}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.in-item[slot].sc-ion-toggle-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:0;padding-inline-end:0}}.in-item[slot=start].sc-ion-toggle-md-h{padding-left:2px;padding-right:18px;padding-top:12px;padding-bottom:12px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.in-item[slot=start].sc-ion-toggle-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:18px;padding-inline-end:18px}}"; }
    static get styleMode() { return "md"; }
}
function shouldToggle(checked, deltaX, margin) {
    const isRTL = document.dir === "rtl";
    if (checked) {
        return (!isRTL && (margin > deltaX)) ||
            (isRTL && (-margin < deltaX));
    }
    else {
        return (!isRTL && (-margin < deltaX)) ||
            (isRTL && (margin > deltaX));
    }
}
let toggleIds = 0;

export { LegendItem as GlLegendItem, ItemDivider as IonItemDivider, Toggle as IonToggle };
