/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { g as getIconScale } from "../../chunks/component.js";
import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { i as isActivationKey } from "../../chunks/key.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const CSS = {
  container: "container",
  contentWrapper: "content-wrapper",
  header: "header",
  footer: "footer",
  checkboxWrapper: "checkbox-wrapper",
  checkboxWrapperDeprecated: "checkbox-wrapper-deprecated",
  thumbnailWrapper: "thumbnail-wrapper",
  headerTextContainer: "header-text-container",
  cardContent: "card-content",
  hasSlottedContent: "has-slotted-content"
};
const SLOTS = {
  thumbnail: "thumbnail",
  heading: "heading",
  description: "description",
  footerStart: "footer-start",
  footerEnd: "footer-end"
};
const ICONS = {
  selected: "check-square-f",
  unselected: "square",
  selectedSingle: "circle-f",
  unselectedSingle: "circle"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}:host([scale=s]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-xs);--calcite-internal-card-header-text-container-padding-right: 0;--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-xs);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-xs);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-xs);--calcite-internal-card-slotted-content-padding: var(--calcite-space-sm);--calcite-internal-card-footer-padding-inline: var(--calcite-space-sm);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-base)}:host([scale=m]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-base);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-sm);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-sm);--calcite-internal-card-slotted-content-padding: var(--calcite-space-md);--calcite-internal-card-footer-padding-inline: var(--calcite-space-md);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-2xs)}:host([scale=l]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-lg);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-xs);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-md);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-md);--calcite-internal-card-slotted-content-padding: var(--calcite-space-lg);--calcite-internal-card-footer-padding-inline: var(--calcite-space-lg);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-sm)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.header-text-container{display:flex;flex-direction:column;inline-size:100%;justify-content:center;padding-inline:var(--calcite-internal-card-header-text-container-padding-inline);padding-block:var(--calcite-internal-card-header-text-container-padding-block)}.header-text-container:not(:only-child){padding-inline-end:var(--calcite-internal-card-header-text-container-padding-right)}.footer{display:flex;margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-internal-card-footer-padding-inline);padding-block-start:var(--calcite-space-2xs);padding-block-end:var(--calcite-space-md)}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:var(--calcite-internal-card-slotted-content-padding)}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){color:var(--calcite-color-text-1);margin:0;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-heading-font-size)}slot[name=description]::slotted(*),*::slotted([slot=description]){color:var(--calcite-color-text-2);margin:0;font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-description-font-size)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{outline-color:transparent;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3));padding:var(--calcite-internal-card-checkbox-wrapper-padding);margin:var(--calcite-internal-card-checkbox-wrapper-margin)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:var(--calcite-internal-card-footer-start-end-gap)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
class Card extends LitElement {
  constructor() {
    super(...arguments);
    this.containerRef = createRef();
    this.messages = useT9n();
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.hasContent = false;
    this.hasDescription = false;
    this.hasFooterEnd = false;
    this.hasFooterStart = false;
    this.hasHeading = false;
    this.hasThumbnail = false;
    this.disabled = false;
    this.loading = false;
    this.scale = "m";
    this.selectable = false;
    this.selected = false;
    this.selectionMode = "none";
    this.thumbnailPosition = "block-start";
    this.calciteCardSelect = createEvent({ cancelable: false });
    this.calciteInternalCardKeyEvent = createEvent({ cancelable: false });
  }
  static {
    this.properties = { hasContent: [16, {}, { state: true }], hasDescription: [16, {}, { state: true }], hasFooterEnd: [16, {}, { state: true }], hasFooterStart: [16, {}, { state: true }], hasHeading: [16, {}, { state: true }], hasThumbnail: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selectable: [7, {}, { reflect: true, type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, thumbnailPosition: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  async setFocus(options) {
    return this.focusSetter(() => ({ target: this.containerRef.value, includeContainer: true }), options);
  }
  handleThumbnailSlotChange(event) {
    this.hasThumbnail = slotChangeHasAssignedElement(event);
  }
  handleHeadingSlotChange(event) {
    this.hasHeading = slotChangeHasAssignedElement(event);
  }
  handleDescriptionSlotChange(event) {
    this.hasDescription = slotChangeHasAssignedElement(event);
  }
  handleFooterStartSlotChange(event) {
    this.hasFooterStart = slotChangeHasAssignedElement(event);
  }
  handleFooterEndSlotChange(event) {
    this.hasFooterEnd = slotChangeHasAssignedElement(event);
  }
  handleDefaultSlotChange(event) {
    this.hasContent = slotChangeHasAssignedElement(event);
  }
  keyDownHandler(event) {
    if (event.target === this.containerRef.value && !this.selectable && !this.disabled) {
      if (isActivationKey(event.key) && this.selectionMode !== "none") {
        this.calciteCardSelect.emit();
        event.preventDefault();
      } else {
        switch (event.key) {
          case "ArrowRight":
          case "ArrowLeft":
          case "Home":
          case "End":
            this.calciteInternalCardKeyEvent.emit(event);
            event.preventDefault();
            break;
        }
      }
    }
  }
  cardBodyClickHandler(event) {
    const isFromScreenReader = event.target === this.containerRef.value;
    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== "none") {
      this.calciteCardSelect.emit();
    }
  }
  selectCardDeprecated(event) {
    this.selected = event.currentTarget.checked;
    this.calciteCardSelect.emit();
  }
  cardSelectClick(event) {
    if (!this.disabled) {
      event.preventDefault();
      this.calciteCardSelect.emit();
      this.setFocus();
    }
  }
  renderCheckboxDeprecated() {
    return html`<calcite-label class=${safeClassMap(CSS.checkboxWrapperDeprecated)}><calcite-checkbox .checked=${this.selected} .label=${this.messages.select} @calciteCheckboxChange=${this.selectCardDeprecated}></calcite-checkbox></calcite-label>`;
  }
  renderThumbnail() {
    return html`<section class=${safeClassMap(CSS.thumbnailWrapper)} .hidden=${!this.hasThumbnail}><slot name=${SLOTS.thumbnail} @slotchange=${this.handleThumbnailSlotChange}></slot></section>`;
  }
  renderSelectionIcon() {
    const icon = this.selectionMode === "multiple" && this.selected ? ICONS.selected : this.selectionMode === "multiple" ? ICONS.unselected : this.selected ? ICONS.selectedSingle : ICONS.unselectedSingle;
    return html`<div class=${safeClassMap(CSS.checkboxWrapper)} @pointerdown=${this.cardSelectClick} tabindex=-1><calcite-icon .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon></div>`;
  }
  renderHeader() {
    const showHeader = this.hasHeading || this.hasDescription;
    return html`<header class=${safeClassMap(CSS.header)} .hidden=${!showHeader}>${this.selectable ? this.renderCheckboxDeprecated() : null}<div class=${safeClassMap(CSS.headerTextContainer)}><slot name=${SLOTS.heading} @slotchange=${this.handleHeadingSlotChange}></slot><slot name=${SLOTS.description} @slotchange=${this.handleDescriptionSlotChange}></slot></div>${this.selectionMode !== "none" && this.renderSelectionIcon() || ""}</header>`;
  }
  renderFooter() {
    const hasFooter = this.hasFooterStart || this.hasFooterEnd;
    return html`<footer class=${safeClassMap(CSS.footer)} .hidden=${!hasFooter}><slot name=${SLOTS.footerStart} @slotchange=${this.handleFooterStartSlotChange}></slot><slot name=${SLOTS.footerEnd} @slotchange=${this.handleFooterEndSlotChange}></slot></footer>`;
  }
  render() {
    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
    const thumbnailStart = this.thumbnailPosition.endsWith("start");
    const role = this.selectionMode === "multiple" ? "checkbox" : this.selectionMode !== "none" ? "radio" : void 0;
    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({ [CSS.contentWrapper]: true, inline: thumbnailInline })} @click=${this.cardBodyClickHandler} @keydown=${this.keyDownHandler} .role=${role} .tabIndex=${!this.selectable || this.disabled ? 0 : -1} ${ref(this.containerRef)}>${this.loading ? html`<div aria-live=polite class="calcite-card-loader-container"><calcite-loader .label=${this.messages.loading}></calcite-loader></div>` : null}${thumbnailStart && this.renderThumbnail() || ""}<section .ariaBusy=${this.loading} class=${safeClassMap({ [CSS.container]: true })}>${this.renderHeader()}<div class=${safeClassMap({
      [CSS.cardContent]: true,
      [CSS.hasSlottedContent]: this.hasContent
    })}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div>${this.renderFooter()}</section>${!thumbnailStart && this.renderThumbnail() || ""}</div>` });
  }
}
customElement("calcite-card", Card);
export {
  Card
};
