@microsoft/teams.cards/dist/containers/carousel.js

<p> <a href="https://www.npmjs.com/package/@microsoft/teams.cards" target="_blank"> <img src="https://img.shields.io/npm/v/@microsoft/teams.cards" /> </a> <a href="https://www.npmjs.com/package/@microsoft/teams.cards?activeTab=code" ta

'use strict';

var base = require('../base');

class Carousel extends base.Element {
  type;
  /**
   * Controls if the container should bleed into its parent. A bleeding container extends into its parent's padding.
   */
  bleed;
  /**
   * The minimum height, in pixels, of the container, in the <number>px format.
   * @example `<number>px`
   */
  minHeight;
  /**
   * Controls the type of animation to use to navigate between pages.
   * @default `slide`
   */
  pageAnimation;
  /**
   * The pages in the carousel.
   */
  pages;
  constructor(...pages) {
    super();
    this.type = "Carousel";
    this.pages = pages;
  }
  withOptions(value) {
    Object.assign(this, value);
    return this;
  }
  withBleed(value = true) {
    this.bleed = value;
    return this;
  }
  withMinHeight(value) {
    this.minHeight = value;
    return this;
  }
  withPageAnimation(value = "slide") {
    this.pageAnimation = value;
    return this;
  }
  addPages(...value) {
    this.pages.push(...value);
    return this;
  }
}
class CarouselPage extends base.Element {
  type;
  /**
   * The card elements to render inside the `CarouselPage`.
   */
  items;
  /**
   * Specifies the background image. Acceptable formats are `PNG`, `JPEG`, and `GIF`
   */
  backgroundImage;
  /**
   * The layouts associated with the container. The container can dynamically switch from one layout to another as the card's width changes. See Container layouts for more details.
   */
  layouts;
  /**
   * The maximum height, in pixels, of the container, in the <number>px format. When the content of a container exceeds the container's maximum height, a vertical scrollbar is displayed.
   * @example `<number>px`
   */
  maxHeight;
  /**
   * The minimum height, in pixels, of the container, in the <number>px format.
   * @example `<number>px`
   */
  minHeight;
  /**
   * Controls if the container should have rounded corners.
   * @default false
   */
  roundedCorners;
  /**
   * Controls if the content of the card is to be rendered left-to-right or right-to-left.
   */
  rtl;
  /**
   * Controls if a border should be displayed around the container.
   * @default false
   */
  showBorder;
  /**
   * The style of the container. Container styles control the colors of the background, border and text inside the container, in such a way that contrast requirements are always met.
   */
  style;
  /**
   * Controls how the container's content should be vertically aligned.
   */
  verticalContentAlignment;
  /**
   * An Action that will be invoked when the element is tapped or clicked. Action.ShowCard is not supported.
   */
  selectAction;
  constructor(...items) {
    super();
    this.type = "CarouselPage";
    this.items = items;
  }
  withOptions(value) {
    Object.assign(this, value);
    return this;
  }
  withBackgroundImage(value) {
    this.backgroundImage = value;
    return this;
  }
  withMinHeight(value) {
    this.minHeight = value;
    return this;
  }
  withRoundedCorners(value = true) {
    this.roundedCorners = value;
    return this;
  }
  withRtl(value = true) {
    this.rtl = value;
    return this;
  }
  withShowBorder(value = true) {
    this.showBorder = value;
    return this;
  }
  withStyle(value) {
    this.style = value;
    return this;
  }
  withVeritcalAlignment(value) {
    this.verticalContentAlignment = value;
    return this;
  }
  withSelectAction(value) {
    this.selectAction = value;
    return this;
  }
  addLayouts(...value) {
    if (!this.layouts) {
      this.layouts = [];
    }
    this.layouts.push(...value);
    return this;
  }
  addCards(...value) {
    this.items.push(...value);
    return this;
  }
}

exports.Carousel = Carousel;
exports.CarouselPage = CarouselPage;
//# sourceMappingURL=carousel.js.map
//# sourceMappingURL=carousel.js.map