feat(esl-carousel): new esl-carousel component introduced according…

… to spec #1282

ESLCarousel implementation according to [#1282](#1282)

Note: only MultiCarousel renderer is supported for now

src/modules/esl-carousel/README.md

@@ -0,0 +1,33 @@
+# [ESL](https://exadel-inc.github.io/esl/) Carousel
+
+Version: *1.0.0-beta*.
+
+Authors: *Julia Murashko*, *Alexey Stsefanovich (ala'n)*.
+
+***Important Notice: the component is under beta version, it is tested and ready to use but be aware of its potential critical API changes.***
+
+<a name="intro"></a>
+
+ESLCarousel - a slideshow component for cycling through slides.
+
+ESLCarouselSlide - a component that provides content for ESLCarousel.
+
+The elements are interrelated and don't make sense on their own. This is because once the elements are added to the DOM, they establish the link between ESLCarousel and each ESLCarouselSlide.
+
+### ESLCarousel Attributes | Properties:
+
+- `config` (ESLCarouselConfig) - [MediaQuery](../esl-media-query/README.md) to define behavior of ESLCarousel.
+
+### ESLCarouselConfig (Configuration API)
+
+- `type` (string) - a carousel rendering view
+  - `slide` - default, one slide is active
+  - `multi` - more than one slide can be active
+- `count` (number) - a total number of slides
+- `loop` (boolean) - defines whether the carousel is in a loop (false by default)
+- `cls` (string) - a CSS class or classes to mark the carousel element (empty by default)
+  (supports ESL extended class definition syntax, [CSSClassUtil](../esl-utils/dom/class.ts))
+
+### ESLCarouselSlide Attributes | Properties:
+
+- `active` (boolean) - an active state marker

src/modules/esl-carousel/all.less

@@ -0,0 +1,6 @@
+@import "./core";
+
+@import "./plugin/esl-carousel-plugin.less";
+
+@import "./plugin/nav/esl-carousel.nav.arrows.less";
+@import "./plugin/nav/esl-carousel.nav.dots.less";

src/modules/esl-carousel/core.less

@@ -0,0 +1,3 @@
+@import "./core/esl-carousel";
+@import "./core/view/esl-multi-carousel";
+@import "./core/view/esl-slide-carousel";

src/modules/esl-carousel/core.ts

@@ -0,0 +1,14 @@
+// Core
+export * from './core/esl-carousel';
+export * from './core/esl-carousel.slide';
+
+// Navigation
+export * from './plugin/nav/esl-carousel.nav.mixin';
+export * from './plugin/nav/esl-carousel.nav.dots';
+
+// Touch support
+export * from './plugin/touch/esl-carousel.touch.mixin';
+
+// Plugins
+export * from './plugin/esl-carousel-link.plugin';
+export * from './plugin/esl-carousel-autoplay.plugin';

src/modules/esl-carousel/core/esl-carousel.less

@@ -0,0 +1,47 @@
+// CORE styles
+esl-carousel {
+  display: block;
+  max-width: 100%;
+  padding: 5px 0;
+
+  position: relative;
+  overflow: hidden;
+
+  [data-slides-area] {
+    width: 100%;
+    display: flex;
+    position: relative;
+    z-index: 0;
+    transform: translate3d(0px, 0px, 0px);
+  }
+
+  &[dragging] [data-slides-area] {
+    cursor: grabbing;
+  }
+
+  &[dragging] [data-slides-area],
+  &[animating] [data-slides-area] {
+    user-select: none;
+    touch-action: pan-y;
+    pointer-events: none;
+  }
+
+  &-slide {
+    display: flex;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0 10px;
+
+    position: relative;
+    left: 0;
+    z-index: 1;
+
+    min-width: 250px;
+    min-height: 150px;
+  }
+}
+
+[esl-carousel-container] {
+  position: relative;
+  margin: 0 -10px;
+}

src/modules/esl-carousel/core/esl-carousel.slide.ts

@@ -0,0 +1,44 @@
+import {boolAttr, ESLBaseElement} from '../../esl-base-element/core';
+import {findNext, findPrev, findNextLooped, findPrevLooped} from '../../esl-utils/dom/traversing';
+
+/**
+ * ESLCarouselSlide component
+ * @author Julia Murashko, Alexey Stsefanovich (ala'n)
+ *
+ * ESLCarouselSlide - a component that provides content for ESLCarousel {@link ESLCarousel}
+ */
+export class ESLCarouselSlide extends ESLBaseElement {
+  /** @returns if the slide is active */
+  @boolAttr() public active: boolean;
+
+  protected override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('role', 'group');
+    this.setAttribute('aria-label', `slide ${this.index + 1}`);
+  }
+
+  /** @returns index of the slide in the carousel. */
+  public get index(): number {
+    if (!this.parentNode) return -1;
+    // TODO: refactor (check type of Element)
+    return Array.prototype.indexOf.call(this.parentNode.children, this);
+  }
+
+  /** @returns next slide sibling. */
+  public get $next(): ESLCarouselSlide {
+    return findNext(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+  }
+  /** @returns prev slide sibling. */
+  public get $prev(): ESLCarouselSlide {
+    return findPrev(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+  }
+
+  /** @returns next slide sibling (uses cyclic find). */
+  public get $nextCyclic(): ESLCarouselSlide {
+    return findNextLooped(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+  }
+  /** @returns previous slide sibling (uses cyclic find). */
+  public get $prevCyclic(): ESLCarouselSlide {
+    return findPrevLooped(this, (this.constructor as typeof ESLCarouselSlide).is) as ESLCarouselSlide;
+  }
+}