import { Host, h } from "@stencil/core";
export class PdsDivider {
    constructor() {
        /**
         * Sets divider to display vertically.
         * @defaultValue false
         */
        this.vertical = false;
    }
    classNames() {
        const classNames = ['pds-divider'];
        if (this.vertical) {
            classNames.push('pds-divider--vertical');
        }
        if (this.offset) {
            const offsetClassName = 'pds-divider--offset-' + this.offset;
            classNames.push(offsetClassName);
        }
        return classNames.join(' ');
    }
    render() {
        return (h(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, h("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
    }
    static get is() { return "pds-divider"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-divider.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-divider.css"]
        };
    }
    static get properties() {
        return {
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "offset": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'",
                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset"
            },
            "vertical": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Sets divider to display vertically."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical",
                "defaultValue": "false"
            }
        };
    }
}
//# sourceMappingURL=pds-divider.js.map
