import { jsx as _jsx } from "@stencil/core/jsx-runtime";
import { Host } from "@stencil/core";
export class Spacer {
    // MARK: Props
    x = 0;
    y = 0;
    // MARK: Render
    render() {
        const { x, y } = this;
        function getDisplayValue() {
            if ((x ?? 0) > 0) {
                return "inline-block";
            }
            else if ((y ?? 0) > 0) {
                return "block";
            }
            return null;
        }
        function handleSpacerStyles() {
            const spacerStyles = {};
            const setSpacerProperty = (value, property, suffix = "") => {
                const sizeValue = `var(--dds-size-${value})`;
                const tokenValue = property === "size" ? sizeValue : value;
                if (value) {
                    spacerStyles[`--dds-spacer-${property}${suffix}`] = tokenValue;
                }
            };
            setSpacerProperty(x, "size", "-x");
            setSpacerProperty(y, "size", "-y");
            setSpacerProperty(getDisplayValue(), "display");
            return spacerStyles;
        }
        return (_jsx(Host, { part: "root", children: _jsx("span", { class: "dds-spacer", "aria-hidden": "true", style: handleSpacerStyles() }) }));
    }
    static get is() { return "dds-spacer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spacer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spacer.css"]
        };
    }
    static get properties() {
        return {
            "x": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "SpacerSizeValues",
                    "resolved": "0 | 100 | 1000 | 200 | 300 | 400 | 50 | 500 | 600 | 700 | 800 | 900",
                    "references": {
                        "SpacerSizeValues": {
                            "location": "global",
                            "id": "global::SpacerSizeValues"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "x",
                "defaultValue": "0"
            },
            "y": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "SpacerSizeValues",
                    "resolved": "0 | 100 | 1000 | 200 | 300 | 400 | 50 | 500 | 600 | 700 | 800 | 900",
                    "references": {
                        "SpacerSizeValues": {
                            "location": "global",
                            "id": "global::SpacerSizeValues"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "y",
                "defaultValue": "0"
            }
        };
    }
}
