feat(carousel): Add Carousel and Carousel Item components

packages/calcite-components/src/components.d.ts

@@ -23,6 +23,8 @@ import { BlockSectionMessages } from "./components/block-section/assets/block-se
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
 import { ButtonMessages } from "./components/button/assets/button/t9n";
 import { CardMessages } from "./components/card/assets/card/t9n";
+import { ArrowType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
@@ -110,6 +112,8 @@ export { BlockSectionMessages } from "./components/block-section/assets/block-se
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
 export { ButtonMessages } from "./components/button/assets/button/t9n";
 export { CardMessages } from "./components/card/assets/card/t9n";
+export { ArrowType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
@@ -826,6 +830,59 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
     }
+    interface CalciteCarousel {
+        /**
+          * Specifies how and if the "previous" and "next" arrows are displayed.
+         */
+        "arrowType": ArrowType;
+        /**
+          * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.
+         */
+        "controlOverlay": boolean;
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides": Partial<CarouselMessages>;
+        /**
+          * Made into a prop for testing purposes only
+         */
+        "messages": CarouselMessages;
+        /**
+          * When `true`, and `rotation` is `true`, the carousel will auto-rotate.
+         */
+        "rotating": boolean;
+        /**
+          * When `true`, the rotation control is displayed.
+         */
+        "rotation": boolean;
+        /**
+          * When `rotation` is `true`, specifies in milliseconds the length of time to display each Carousel Item.
+         */
+        "rotationDuration": number;
+        /**
+          * The component's selected `calcite-carousel-item`.
+          * @readonly
+         */
+        "selectedItem": HTMLCalciteCarouselItemElement;
+    }
+    interface CalciteCarouselItem {
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * When `true`, the component is selected.
+         */
+        "selected": boolean;
+    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -5478,6 +5535,10 @@ export interface CalciteCardGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCardGroupElement;
 }
+export interface CalciteCarouselCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteCarouselElement;
+}
 export interface CalciteCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCheckboxElement;
@@ -5956,6 +6017,32 @@ declare global {
         prototype: HTMLCalciteCardGroupElement;
         new (): HTMLCalciteCardGroupElement;
     };
+    interface HTMLCalciteCarouselElementEventMap {
+        "calciteCarouselChange": void;
+        "calciteCarouselRotatingChange": void;
+        "calciteCarouselRotatingPause": void;
+        "calciteCarouselRotatingResume": void;
+    }
+    interface HTMLCalciteCarouselElement extends Components.CalciteCarousel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCalciteCarouselElementEventMap>(type: K, listener: (this: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent<HTMLCalciteCarouselElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCalciteCarouselElementEventMap>(type: K, listener: (this: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent<HTMLCalciteCarouselElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCalciteCarouselElement: {
+        prototype: HTMLCalciteCarouselElement;
+        new (): HTMLCalciteCarouselElement;
+    };
+    interface HTMLCalciteCarouselItemElement extends Components.CalciteCarouselItem, HTMLStencilElement {
+    }
+    var HTMLCalciteCarouselItemElement: {
+        prototype: HTMLCalciteCarouselItemElement;
+        new (): HTMLCalciteCarouselItemElement;
+    };
     interface HTMLCalciteCheckboxElementEventMap {
         "calciteInternalCheckboxBlur": boolean;
         "calciteCheckboxChange": void;
@@ -7437,6 +7524,8 @@ declare global {
         "calcite-button": HTMLCalciteButtonElement;
         "calcite-card": HTMLCalciteCardElement;
         "calcite-card-group": HTMLCalciteCardGroupElement;
+        "calcite-carousel": HTMLCalciteCarouselElement;
+        "calcite-carousel-item": HTMLCalciteCarouselItemElement;
         "calcite-checkbox": HTMLCalciteCheckboxElement;
         "calcite-chip": HTMLCalciteChipElement;
         "calcite-chip-group": HTMLCalciteChipGroupElement;
@@ -8205,6 +8294,75 @@ declare namespace LocalJSX {
     SelectionMode
   >;
     }
+    interface CalciteCarousel {
+        /**
+          * Specifies how and if the "previous" and "next" arrows are displayed.
+         */
+        "arrowType"?: ArrowType;
+        /**
+          * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.
+         */
+        "controlOverlay"?: boolean;
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides"?: Partial<CarouselMessages>;
+        /**
+          * Made into a prop for testing purposes only
+         */
+        "messages"?: CarouselMessages;
+        /**
+          * Fires when the selected `calcite-carousel-item` changes.
+         */
+        "onCalciteCarouselChange"?: (event: CalciteCarouselCustomEvent<void>) => void;
+        /**
+          * Fires when the carousel rotation state changes.
+         */
+        "onCalciteCarouselRotatingChange"?: (event: CalciteCarouselCustomEvent<void>) => void;
+        /**
+          * Fires when the carousel rotation state pauses.
+         */
+        "onCalciteCarouselRotatingPause"?: (event: CalciteCarouselCustomEvent<void>) => void;
+        /**
+          * Fires when the carousel rotation state resumes.
+         */
+        "onCalciteCarouselRotatingResume"?: (event: CalciteCarouselCustomEvent<void>) => void;
+        /**
+          * When `true`, and `rotation` is `true`, the carousel will auto-rotate.
+         */
+        "rotating"?: boolean;
+        /**
+          * When `true`, the rotation control is displayed.
+         */
+        "rotation"?: boolean;
+        /**
+          * When `rotation` is `true`, specifies in milliseconds the length of time to display each Carousel Item.
+         */
+        "rotationDuration"?: number;
+        /**
+          * The component's selected `calcite-carousel-item`.
+          * @readonly
+         */
+        "selectedItem"?: HTMLCalciteCarouselItemElement;
+    }
+    interface CalciteCarouselItem {
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * When `true`, the component is selected.
+         */
+        "selected"?: boolean;
+    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -13070,6 +13228,8 @@ declare namespace LocalJSX {
         "calcite-button": CalciteButton;
         "calcite-card": CalciteCard;
         "calcite-card-group": CalciteCardGroup;
+        "calcite-carousel": CalciteCarousel;
+        "calcite-carousel-item": CalciteCarouselItem;
         "calcite-checkbox": CalciteCheckbox;
         "calcite-chip": CalciteChip;
         "calcite-chip-group": CalciteChipGroup;
@@ -13184,6 +13344,8 @@ declare module "@stencil/core" {
             "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes<HTMLCalciteButtonElement>;
             "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes<HTMLCalciteCardElement>;
             "calcite-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes<HTMLCalciteCardGroupElement>;
+            "calcite-carousel": LocalJSX.CalciteCarousel & JSXBase.HTMLAttributes<HTMLCalciteCarouselElement>;
+            "calcite-carousel-item": LocalJSX.CalciteCarouselItem & JSXBase.HTMLAttributes<HTMLCalciteCarouselItemElement>;
             "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes<HTMLCalciteCheckboxElement>;
             "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes<HTMLCalciteChipElement>;
             "calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes<HTMLCalciteChipGroupElement>;

packages/calcite-components/src/components/carousel-item/carousel-item.e2e.ts

@@ -0,0 +1,17 @@
+import { accessible, hidden, renders } from "../../tests/commonTests";
+
+describe("calcite-carousel-item", () => {
+  describe("renders", () => {
+    renders("<calcite-carousel-item selected></calcite-carousel-item>", {
+      display: "flex",
+    });
+  });
+
+  describe("honors hidden attribute", () => {
+    hidden("calcite-carousel-item");
+  });
+
+  describe("accessible", () => {
+    accessible("calcite-carousel-item");
+  });
+});

packages/calcite-components/src/components/carousel-item/carousel-item.scss

@@ -0,0 +1,14 @@
+:host {
+  @apply flex;
+}
+
+:host([selected]) .container {
+  display: block;
+}
+
+.container {
+  display: none;
+  inline-size: var(--calcite-container-size-content-fluid);
+}
+
+@include base-component();

packages/calcite-components/src/components/carousel-item/carousel-item.tsx

@@ -0,0 +1,79 @@
+import { Component, Element, h, Host, Prop, VNode } from "@stencil/core";
+import {
+  LoadableComponent,
+  setComponentLoaded,
+  setUpLoadableComponent,
+} from "../../utils/loadable";
+import { guid } from "../../utils/guid";
+import { CSS } from "./resources";
+
+/**
+ * @slot - A slot for adding content.
+ */
+@Component({
+  tag: "calcite-carousel-item",
+  styleUrl: "carousel-item.scss",
+  shadow: true,
+})
+export class CarouselItem implements LoadableComponent {
+  // --------------------------------------------------------------------------
+  //
+  //  Properties
+  //
+  // --------------------------------------------------------------------------
+
+  /**
+   * When `true`, the component is selected.
+   */
+  @Prop({ reflect: true }) selected = false;
+
+  /**
+   * Accessible name for the component.
+   */
+  @Prop() label!: string;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Private Properties
+  //
+  // --------------------------------------------------------------------------
+
+  @Element() el: HTMLCalciteCarouselItemElement;
+
+  private guid = `calcite-carousel-item-${guid()}`;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+
+  componentDidLoad(): void {
+    setComponentLoaded(this);
+  }
+
+  async componentWillLoad(): Promise<void> {
+    setUpLoadableComponent(this);
+  }
+
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+
+  render(): VNode {
+    const id = this.el.id || this.guid;
+    return (
+      <Host id={id}>
+        <div
+          aria-label={this.label}
+          class={{ [CSS.container]: true, [CSS.selected]: this.selected }}
+          role="tabpanel"
+        >
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

packages/calcite-components/src/components/carousel-item/readme.md

@@ -0,0 +1,32 @@
+# calcite-carousel-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property             | Attribute  | Description                                                                              | Type                  | Default     |
+| -------------------- | ---------- | ---------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `active`             | `active`   | When `true`, the component is active if it has a parent `calcite-carousel`.              | `boolean`             | `false`     |
+| `disabled`           | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean`             | `false`     |
+| `label` *(required)* | `label`    | The component label text.                                                                | `string`              | `undefined` |
+| `messageOverrides`   | --         | Use this property to override individual strings used by the component.                  | `{ close?: string; }` | `undefined` |
+
+## Methods
+
+### `setFocus() => Promise<void>`
+
+Sets focus on the component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+## Slots
+
+| Slot | Description                |
+| ---- | -------------------------- |
+|      | A slot for adding content. |
+
+---
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/calcite-components/src/components/carousel-item/resources.ts

@@ -0,0 +1,4 @@
+export const CSS = {
+  container: "container",
+  selected: "selected",
+};

packages/calcite-components/src/components/carousel/assets/carousel/t9n/messages.json

@@ -0,0 +1,8 @@
+{
+  "previous": "Previous",
+  "next": "Next",
+  "play": "Play",
+  "pause": "Pause",
+  "carousel": "Carousel",
+  "carouselItemProgress": "Progress indicator for Carousel Item"
+}

packages/calcite-components/src/components/carousel/assets/carousel/t9n/messages_ar.json

@@ -0,0 +1,8 @@
+{
+  "previous": "السابق",
+  "next": "التالي",
+  "play": "Play",
+  "pause": "Pause",
+  "carousel": "Carousel",
+  "carouselItemProgress": "Progress indicator for Carousel Item"
+}