import { DemoData } from "../../global/demo";
import { LeaderboardViewProps } from "./sqm-leaderboard-view";
/**
 * @uiName Leaderboard
 * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"empty", "title":"Empty State"}]
 * @requiredFeatures ["LEADERBOARDS"]
 * @exampleGroup Leaderboard
 * @example Referral Started - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Referral Converted - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Points Earned - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
 * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
 * @csspart sqm-base - The base container
 * @csspart sqm-table - The leaderboard table
 */
export declare class Leaderboard {
  /**
   * Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.
   * If no program ID is set or provided by context, then a global leaderboard is shown.
   *
   * @uiName Program
   * @uiWidget programSelector
   */
  programId?: string;
  /**
   * @uiName User column heading
   */
  usersheading: string;
  /**
   * @uiName Stats column heading
   */
  statsheading: string;
  /**
   * @uiName Rank column heading
   */
  rankheading?: string;
  /**
   * @uiName Show leaderboard rank
   */
  showRank: boolean;
  /**
   * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
   *
   * @uiName Width
   */
  width: string;
  /**
   * A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., "st" for 1st, "nd" for 2nd, "rd" for 3rd, and "th" for all others).
   *
   * @uiName Rank Suffix
   */
  rankSuffix: string;
  /**
   * @uiName Viewing user text
   */
  viewingUserText: string;
  /**
   * Hide the Names of users to protect personal identifiable information
   *
   * @uiName Hide users names
   * @default
   */
  hideNames: boolean;
  /**
   * @uiName Rank type
   * @uiType string
   * @uiEnum ["rowNumber", "rank", "denseRank"]
   * @uiEnumNames ["Row Number", "Rank", "Dense Rank"]
   */
  rankType: "rowNumber" | "rank" | "denseRank";
  /**
   * @uiName Leaderboard type
   * @uiType string
   * @required
   * @uiEnum ["topStartedReferrers", "topConvertedReferrers", "topPointEarners"]
   * @uiEnumNames ["Top Started Referrers", "Top Converted Referrers", "Top Point Earners"]
   */
  leaderboardType: "topStartedReferrers" | "topConvertedReferrers" | "topPointEarners";
  /**
   * Title displayed for users without names
   * @uiName Unknown user text
   */
  anonymousUser: string;
  /**
   * @uiName Leaderboard time interval
   * @uiWidget dateRange
   * @uiWidgetOptions {"allowPastDates":true, "months": 1}
   */
  interval: string;
  /**
   * Control the maximum amount of rows displayed on the leaderboard.
   *
   * @uiName Maximum rows number
   */
  maxRows: number;
  /**
   * Hide the viewer's leaderboard row if not in the top results.
   *
   * @uiName Hide viewing user
   * @default
   */
  hideViewer: boolean;
  /**
   * Changes the background color of the viewing user row in the leaderboard.
   * @uiName Viewing User Highlight Color
   * @uiWidget color
   * @uiGroup Style
   */
  viewingUserHighlightColor?: string;
  /**
   * Changes the text color of the viewing user row in the leaderboard.
   * @uiName Viewing User Text Color
   * @uiWidget color
   * @uiGroup Style
   */
  viewingUserHighlightTextColor?: string;
  /**
   * Changes the background color of the leaderboard.
   * @uiName Background Color
   * @uiWidget color
   * @uiGroup Style
   */
  background?: string;
  /**
   * Changes the border color of the table rows.
   * @uiName Border Color
   * @uiWidget color
   * @uiGroup Style
   */
  borderColor?: string;
  /**
   * Text color of the leaderboard.
   * @uiName Text Color
   * @uiWidget color
   * @uiGroup Style
   */
  textColor?: string;
  /**
   * Leaderboard border radius in pixels.
   * @uiName Border Radius
   * @uiGroup Style
   */
  borderRadius?: number;
  /**
   * @undocumented
   * @uiType object
   */
  demoData?: DemoData<LeaderboardViewProps>;
  ignored: boolean;
  constructor();
  disconnectedCallback(): void;
  render(): any;
}