import { n as css, o as resetStyles, q as elementStyles, t as i, u as b } from './swap-module.js';
import { n, c as customElement } from './p-Df1VvUwe.js';
import { o } from './p-lzr5ON0W.js';
import './p-DjoAwI5e.js';

var styles = css `
  :host {
    width: 100%;
  }

  :host([data-type='primary']) > button {
    background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
  }

  :host([data-type='secondary']) > button {
    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
  }

  button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: ${({ spacing }) => spacing[3]};
    width: 100%;
    border-radius: ${({ borderRadius }) => borderRadius[4]};
    transition:
      background-color ${({ durations }) => durations['lg']}
        ${({ easings }) => easings['ease-out-power-2']},
      scale ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']};
    will-change: background-color, scale;
  }

  wui-text {
    text-transform: capitalize;
  }

  wui-image {
    color: ${({ tokens }) => tokens.theme.textPrimary};
  }

  @media (hover: hover) {
    :host([data-type='primary']) > button:hover:enabled {
      background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
    }

    :host([data-type='secondary']) > button:hover:enabled {
      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
    }
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let WuiListItem = class WuiListItem extends i {
    constructor() {
        super(...arguments);
        this.type = 'primary';
        this.imageSrc = 'google';
        this.imageSize = undefined;
        this.loading = false;
        this.boxColor = 'foregroundPrimary';
        this.disabled = false;
        this.rightIcon = true;
        this.boxed = true;
        this.rounded = false;
        this.fullSize = false;
    }
    render() {
        this.dataset['rounded'] = this.rounded ? 'true' : 'false';
        this.dataset['type'] = this.type;
        return b `
      <button
        ?disabled=${this.loading ? true : Boolean(this.disabled)}
        data-loading=${this.loading}
        tabindex=${o(this.tabIdx)}
      >
        <wui-flex gap="2" alignItems="center">
          ${this.templateLeftIcon()}
          <wui-flex gap="1">
            <slot></slot>
          </wui-flex>
        </wui-flex>
        ${this.templateRightIcon()}
      </button>
    `;
    }
    templateLeftIcon() {
        if (this.icon) {
            return b `<wui-image
        icon=${this.icon}
        iconColor=${o(this.iconColor)}
        ?boxed=${this.boxed}
        ?rounded=${this.rounded}
        boxColor=${this.boxColor}
      ></wui-image>`;
        }
        return b `<wui-image
      ?boxed=${this.boxed}
      ?rounded=${this.rounded}
      ?fullSize=${this.fullSize}
      size=${o(this.imageSize)}
      src=${this.imageSrc}
      boxColor=${this.boxColor}
    ></wui-image>`;
    }
    templateRightIcon() {
        if (!this.rightIcon) {
            return null;
        }
        if (this.loading) {
            return b `<wui-loading-spinner size="md" color="accent-primary"></wui-loading-spinner>`;
        }
        return b `<wui-icon name="chevronRight" size="lg" color="default"></wui-icon>`;
    }
};
WuiListItem.styles = [resetStyles, elementStyles, styles];
__decorate([
    n()
], WuiListItem.prototype, "type", void 0);
__decorate([
    n()
], WuiListItem.prototype, "imageSrc", void 0);
__decorate([
    n()
], WuiListItem.prototype, "imageSize", void 0);
__decorate([
    n()
], WuiListItem.prototype, "icon", void 0);
__decorate([
    n()
], WuiListItem.prototype, "iconColor", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "loading", void 0);
__decorate([
    n()
], WuiListItem.prototype, "tabIdx", void 0);
__decorate([
    n()
], WuiListItem.prototype, "boxColor", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "disabled", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "rightIcon", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "boxed", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "rounded", void 0);
__decorate([
    n({ type: Boolean })
], WuiListItem.prototype, "fullSize", void 0);
WuiListItem = __decorate([
    customElement('wui-list-item')
], WuiListItem);
//# sourceMappingURL=p-BFEmxdup.js.map

//# sourceMappingURL=p-BFEmxdup.js.map