import { h, } from "@stencil/core";
import { removeDisabledFalse, capitalize } from "../../utils/helpers";
export class PaginationItem {
    constructor() {
        /**
         * If `true`, the pagination item will be disabled.
         */
        this.disabled = false;
        /**
         * The label for the pagination item (applicable when simple pagination is being used).
         */
        this.label = "Page";
        /**
         * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
         */
        this.monochrome = false;
        /**
         * If `true`, the pagination item will be selected.
         */
        this.selected = false;
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.handleClick = () => {
            this.paginationItemClick.emit({ page: this.page || null });
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    watchLabelHandler() {
        this.capitalizedLabel = capitalize(this.label);
    }
    componentWillLoad() {
        this.watchLabelHandler();
        removeDisabledFalse(this.disabled, this.el);
    }
    render() {
        const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
        return (h("a", { key: 'c067a0e35e2a92dff8d7f24d135a06a686d74a7d', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                ["item-container"]: true,
                ["ellipsis"]: true,
                ["disabled"]: !!disabled,
            } }, h("ic-typography", { variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "page", "aria-label": selected ? `${label}: ${page}` : `Go to ${label} ${page}`, class: {
                ["selected"]: !disabled && selected,
                ["disabled"]: !!disabled,
                ["item-container"]: true,
                ["page"]: type === "page",
            } }, h("ic-typography", { variant: "label", class: {
                ["page-selected"]: selected,
                ["disabled"]: !!disabled,
            } }, page))) : (h("ic-typography", { "aria-live": "polite", class: {
                [`simple-current`]: true,
                ["disabled"]: !!disabled,
            }, variant: "label" }, capitalizedLabel, " ", page))));
    }
    static get is() { return "ic-pagination-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-pagination-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-pagination-item.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the pagination item will be disabled."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label for the pagination item (applicable when simple pagination is being used)."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false,
                "defaultValue": "\"Page\""
            },
            "monochrome": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the pagination item will display as black in the light theme, and white in dark theme."
                },
                "getter": false,
                "setter": false,
                "attribute": "monochrome",
                "reflect": false,
                "defaultValue": "false"
            },
            "page": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The current page number."
                },
                "getter": false,
                "setter": false,
                "attribute": "page",
                "reflect": false
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the pagination item will be selected."
                },
                "getter": false,
                "setter": false,
                "attribute": "selected",
                "reflect": false,
                "defaultValue": "false"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcPaginationItemType",
                    "resolved": "\"ellipsis\" | \"page\" | \"simple-current\"",
                    "references": {
                        "IcPaginationItemType": {
                            "location": "import",
                            "path": "./ic-pagination-item.types",
                            "id": "src/components/ic-pagination-item/ic-pagination-item.types.ts::IcPaginationItemType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of pagination item - 'page' or 'ellipsis'."
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "capitalizedLabel": {}
        };
    }
    static get events() {
        return [{
                "method": "paginationItemClick",
                "name": "paginationItemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "- Emitted when a pagination item is clicked."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "{ page: number | null }",
                    "resolved": "{ page: number | null; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "label",
                "methodName": "watchLabelHandler"
            }];
    }
}
//# sourceMappingURL=ic-pagination-item.js.map
