chore: release 5.0.0 (main-beta -> main)

.releaserc.yml

@@ -23,7 +23,7 @@ branches:
 # Release configuration
 plugins:
  - - "@semantic-release/commit-analyzer"
- - preset: angular
+ - preset: conventionalcommits
  releaseRules:
  - type: style
  release: patch
@@ -46,7 +46,7 @@ plugins:
  release: patch
 
  - - "@semantic-release/release-notes-generator"
- - preset: angular
+ - preset: conventionalcommits
  parserOpts:
  noteKeywords:
  - BREAKING CHANGE

README.md

@@ -40,7 +40,6 @@ to meet your project needs.
 
 ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work 
 well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. 
-ESL can also work on IE11 when the whole list of polyfills is provided (see [Browser support & Polyfills](https://github.com/exadel-inc/esl/blob/HEAD/docs/BROWSER_SUPPORT.md) for more details).
 
 ## Library Structure
 

docs/BROWSER_SUPPORT.md

@@ -6,17 +6,11 @@ Exadel Smart Library does not have dependencies but uses the following list of n
 
 - ECMAScript 6 features
  - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) (no Iterable Objects support required)
- ([ESL polyfill](../src/polyfills/list/es6.array.from.ts) provided)
  - [Array.prototype.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
- ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
  - [Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
- ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
  - [Array.prototype.include](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
- ([ESL polyfill](../src/polyfills/list/es6.array.includes.ts) provided)
  - [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
- ([ESL polyfill](../src/polyfills/list/es6.object.is.ts) provided)
  - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) (accurate polyfill required)
- ([ESL polyfill](../src/polyfills/list/es6.object.assign.ts) provided)
  - [ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - Web API
  - [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) constructor + `preventDefault` polyfill
@@ -30,25 +24,6 @@ Exadel Smart Library does not have dependencies but uses the following list of n
  - [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
  - [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
-All of them are fully supported by modern browsers such as Chrome, Firefox, Safari or Edge (>43).
+All of them are fully supported by modern browsers such as Chrome, Firefox, Safari (>13) or Edge (>43).
 
-In order to make ESL work in older browsers, you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (for older versions of Edge and Safari).
-
-Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.
-
-See more details on what polyfill approach might look like in the demo pages source code.
-
-Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under [polyfills](../src/polyfills) directory:
- - ECMA Script 5: output shim (`HTMLElement` constructor call) - [es5-target-shim.ts](../src/polyfills/es5-target-shim.ts)
- - ECMA Script 5: IE11, Edge <14 support - [polyfills.es5.ts](../src/polyfills/polyfills.es5.ts)
- - `Object.is`, `Object.assign` 
- - `Array.from`, `Array.prototype.find`, `Array.prototype.findIndex`, `Array.prototype.index`
- - `Event`, `CustomEvent`, `MouseEvent`, `KeyboardEvent`, `FocusEvent` shim
- - `Event.prototype.preventDefault` shim
- - `Element.prototype.closest`
- - `DOMTokenList.prototype.toggle`
- - *Note: there is no promise polyfill embedded*, use npm:[promise-polyfill](https://www.npmjs.com/package/promise-polyfill) or similar
- - ECMA Script 6: DOM - [polyfills.es6.ts](../src/polyfills/polyfills.es6.ts)
- - `Node.isConnected` 
- - `KeyboardKey.prototype.key` 
- - `Element.prototype.toggleAttribute` 
+In order to make ESL work in older browsers, you can use polyfill (for older versions of Safari).

e2e/package.json

@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "@exadel/esl-snapshot-tests",
- "version": "4.17.1",
+ "version": "5.0.0-beta.19",
  "description": "Integration snapshot tests for ESL",
  "homepage": "https://esl-ui.com/",
  "license": "MIT",

eslint/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@exadel/eslint-plugin-esl",
- "version": "4.17.1",
+ "version": "5.0.0-beta.19",
  "keywords": [
  "eslint",
  "eslint-plugin",
@@ -9,6 +9,10 @@
  "license": "MIT",
  "description": "Helper ESLint rules to find and migrate ESL (@exadel/esl) library deprecations",
  "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist/**/*.{js,ts,md}"
+ ],
  "scripts": {
  "prepare": "npm run build",
  "test": "jest",
@@ -18,12 +22,8 @@
  "dependencies": {
  "semver": "^7.6.2"
  },
- "files": [
- "dist/**/*"
- ],
- "types": "dist/index.d.ts",
  "peerDependencies": {
- "@exadel/esl": "^4.0.0",
+ "@exadel/esl": "*",
  "eslint": ">=8.0.0"
  }
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@exadel/esl",
- "version": "4.17.1",
+ "version": "5.0.0-beta.19",
  "private": false,
  "description": "Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components",
  "license": "MIT",
@@ -45,10 +45,14 @@
  "modules/esl-media/providers/**/*.js",
  "modules/esl-share/actions/**/*.js",
  "modules/esl-share/buttons/**/*.js",
+ "modules/esl-carousel/core.js",
+ "modules/esl-carousel/renderers/**/*.js",
+ "src/modules/lib.ts",
  "src/modules/esl-media/providers/**/*.ts",
  "src/modules/esl-share/actions/**/*.ts",
  "src/modules/esl-share/buttons/**/*.ts",
- "src/modules/lib.ts",
+ "src/modules/esl-carousel/core.ts",
+ "src/modules/esl-carousel/renderers/**/*.ts",
  "polyfills/**/*.js",
  "src/polyfills/**/*.ts"
  ],

site/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@exadel/esl-website",
- "version": "4.17.1",
+ "version": "5.0.0-beta.19",
  "private": true,
  "description": "ESL Website source",
  "homepage": "https://esl-ui.com/",
@@ -37,15 +37,12 @@
  "@juggle/resize-observer": "^3.4.0",
  "@types/prismjs": "^1.26.4",
  "@types/smoothscroll-polyfill": "^0.3.4",
- "@webcomponents/custom-elements": "1.6.0",
  "clean-css-cli": "^5.6.3",
  "html-minifier-terser": "^7.2.0",
  "image-size": "^1.1.1",
- "intersection-observer": "^0.12.2",
  "js-yaml": "^4.1.0",
  "out-url": "^1.2.2",
  "prismjs": "^1.29.0",
- "promise-polyfill": "^8.3.0",
  "smoothscroll-polyfill": "^0.4.4",
  "ts-loader": "^9.5.1",
  "webpack": "^5.92.1",

site/src/common/card.less

@@ -0,0 +1,17 @@
+.card {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ min-height: 100px;
+ flex-direction: column;
+ background: #fff;
+ box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
+
+ &-image {
+ flex: 0 0 auto;
+ }
+ &-content {
+ flex: 1 1 auto;
+ }
+}

site/src/common/reboot.less

@@ -14,10 +14,6 @@
 * {
  margin: 0;
  padding: 0;
-
- &:focus-visible {
- outline: 2px dashed @focus-color;
- }
 }
 
 body {
@@ -147,3 +143,12 @@ audio {
  border: 1px solid rgba(0, 0, 0, 0.6);
  }
 }
+
+// Focus state
+*,
+a,
+button {
+ &:focus-visible {
+ outline: 2px dashed @focus-color;
+ }
+}

site/src/esl-carousel-demo/test-carousel.less

@@ -0,0 +1,78 @@
+@import (reference) '../common/variables.less';
+
+// TODO: Cleanup according to core styles update
+
+.marquee-carousel [esl-carousel-container] {
+ esl-carousel {
+ margin: 0;
+ padding: 0;
+ }
+ .img-container {
+ width: 100%;
+ height: 100%;
+ }
+
+ button.arrow-prev {
+ left: 0;
+ &::before {
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fff'%3E%3Cpath d='M31 40 16 25l15-15 2 2-13 13 13 13z'/%3E%3C/svg%3E");
+ }
+ }
+ button.arrow-next {
+ right: 0;
+ &::before {
+ background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fff'%3E%3Cpath d='M31 40 16 25l15-15 2 2-13 13 13 13z'/%3E%3C/svg%3E");
+ }
+ }
+ button.arrow-prev::before,
+ button.arrow-next::before {
+ width: 60px;
+ height: 60px;
+ }
+ .carousel-dots-wrapper {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ margin-right: -50%;
+ transform: translate(-50%, 0%);
+ @media @lg-xl {
+ display: none;
+ }
+ }
+
+ &.main-carousel {
+ div[esl-carousel-slides] {
+ min-height: 500px;
+ gap: 0;
+ }
+ [esl-carousel-slide] {
+ padding: 0;
+ }
+ button.arrow-prev,
+ button.arrow-next {
+ @media @lg-xl {
+ display: none;
+ }
+ }
+ }
+
+ &.marquee-nav-carousel {
+ padding: 0 60px;
+ [esl-carousel-slide] {
+ margin: 10px 0;
+ }
+ &::before {
+ position: absolute;
+ content: '';
+ background: black;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ }
+ @media @xs-md {
+ display: none;
+ }
+ }
+}