import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { i as handle } from './index2.js';
import { d as defineCustomElement$2 } from './pds-icon2.js';

const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";

const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * Determines whether `sortable-item-actions` slot should be enabled.
         * @defaultValue false
         */
        this.enableActions = false;
        /**
         * Determines whether `sortable-item` should have a handle.
         * @defaultValue false
         */
        this.showHandle = false;
    }
    componentWillRender() {
        // When the parent sortable has a type of 'handle', the sortable items
        // will automatically set showHandle to 'true'.
        this.sortableRef = this.el.closest('pds-sortable');
        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
            this.showHandle = true;
        }
    }
    render() {
        return (h(Host, { key: '631a0c1150226256cdb47d1a7bc6635144bb56d0', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bdb6ff779a5d750b75d404521bc91cad02176ea8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '144f4b6fe33a3a3a864ac48041fc93935fbf99c3', icon: handle }))), h("slot", { key: 'cdddce9c5fa3fde34481c41c46c5f6504e33a358' }), this.enableActions && (h("div", { key: '527e1d22f20223a850dbd956dea4db93878fd9f9', class: "pds-sortable-item__actions" }, h("slot", { key: '85ea35dbfdf0393721471dd229e80e9e57f58230', name: "sortable-item-actions" })))));
    }
    get el() { return this; }
    static get style() { return pdsSortableItemCss; }
}, [262, "pds-sortable-item", {
        "enableActions": [4, "enable-actions"],
        "componentId": [1, "component-id"],
        "showHandle": [1028, "show-handle"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-sortable-item", "pds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-sortable-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsSortableItem$1);
            }
            break;
        case "pds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PdsSortableItem = PdsSortableItem$1;
const defineCustomElement = defineCustomElement$1;

export { PdsSortableItem, defineCustomElement };
//# sourceMappingURL=pds-sortable-item.js.map

//# sourceMappingURL=pds-sortable-item.js.map