Repository: exadel-inc/esl
Pull request #53 (2021-02-11 10:46:10)

EPIC: ESL Select & ESL Select List (beta)
- Support for single selection
- Both select and select list moved under forms directory
- Beta doc placeholder created 


Patch:
diff --git a/.stylelintrc.json b/.stylelintrc.json
index b8e5a0545..6ae3811f8 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -2,9 +2,11 @@
   "plugins": ["./build/lint/import.stylelint.js"],
   "rules": {
     "at-rule-no-unknown": true,
-    "block-no-empty": true,
+    "block-no-empty": [true, { "severity": "warning" }],
+    "block-opening-brace-space-before": ["always", { "severity": "warning" }],
     "color-no-invalid-hex": true,
     "comment-no-empty": true,
+    "declaration-colon-space-after": ["always", { "severity": "warning" }],
     "declaration-block-no-duplicate-properties": true,
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
@@ -18,12 +20,17 @@
     "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
     "property-no-unknown": true,
+    "selector-list-comma-space-before": "never",
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-element-no-unknown": true,
     "selector-type-no-unknown": [true, {
       "ignore": ["custom-elements"]
     }],
-    "string-no-newline": true,
+    "string-no-newline": [true, { "severity": "warning" }],
     "unit-no-unknown": true,
     "esl-less/import-root": "never"
   }
diff --git a/README.md b/README.md
index 885c7d422..285397962 100644
--- a/README.md
+++ b/README.md
@@ -10,24 +10,28 @@ Exadel Smart Library (**ESL**) is a web components based library that gives you
 
 ## Library Structure
 ### Components
-- ##### [ESL Image](./src/modules/esl-image/README.md)
-- ##### [ESL Media](./src/modules/esl-media/README.md)
-- ##### [ESL Scrollbar](./src/modules/esl-scrollbar/README.md)
+- ##### [ESL Image](src/modules/esl-image/README.md)
+- ##### [ESL Media](src/modules/esl-media/README.md)
+- ##### [ESL Scrollbar](src/modules/esl-scrollbar/README.md)
 
 - ##### [ESL Toggleable](src/modules/esl-toggleable/README.md)
-- ##### [ESL Base Trigger](./src/modules/esl-base-trigger/README.md)
-- ##### [ESL Popup](./src/modules/esl-popup/README.md)
-- ##### [ESL Trigger](./src/modules/esl-trigger/README.md)
-- ##### [ESL Panel and Panel Stack](./src/modules/esl-panel/README.md)
-- ##### [ESL Tab and Tab Container](./src/modules/esl-tab/README.md)
+- ##### [ESL Base Trigger](src/modules/esl-base-trigger/README.md)
+- ##### [ESL Popup](src/modules/esl-popup/README.md)
+- ##### [ESL Trigger](src/modules/esl-trigger/README.md)
+- ##### [ESL Panel and Panel Stack](src/modules/esl-panel/README.md)
+- ##### [ESL Tab and Tab Container](src/modules/esl-tab/README.md)
 - ##### [ESL Scrollable Tabs](src/modules/esl-scrollable-tabs/README.md)
 - ##### [ESL Alert](src/modules/esl-alert/README.md)
 
+### Form Components
+- ##### [ESL Select](src/modules/esl-forms/esl-select/README.md)
+- ##### [ESL Select List](src/modules/esl-forms/esl-select-list/README.md)
+
 ### Utilities
-- ##### [ESL Base Element](./src/modules/esl-base-element/README.md)
-- ##### [ESL Media Query](./src/modules/esl-media-query/README.md)
-- ##### [ESL Traversing Query](./src/modules/esl-traversing-query/README.md)
-- ##### [ESL Utils](./src/modules/esl-utils/README.md)
+- ##### [ESL Base Element](src/modules/esl-base-element/README.md)
+- ##### [ESL Media Query](src/modules/esl-media-query/README.md)
+- ##### [ESL Traversing Query](src/modules/esl-traversing-query/README.md)
+- ##### [ESL Utils](src/modules/esl-utils/README.md)
 
 ---
 ## Installation Guide
diff --git a/package.json b/package.json
index 2db0bc143..9c6b522c9 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,9 @@
     "start": "cd test-server && npm run dev",
     "clean": "gulp clean",
     "build": "gulp build",
-    "test": "concurrently \"gulp lint --silent\" \"jest --silent --noStackTrace\"",
+    "test": "concurrently \"npm run test:lint\" \"npm run test:unit\"",
+    "test:lint": "gulp lint --silent",
+    "test:unit": "jest --silent --noStackTrace",
     "test:report": "jest --coverage",
     "prepare": "npm run build",
     "preversion": "npm test"
diff --git a/paths.json b/paths.json
index ef2dc7af4..d092fbe09 100644
--- a/paths.json
+++ b/paths.json
@@ -3,7 +3,14 @@
     "base": "./src/modules/",
     "ts": ["src/modules/**/*.ts", "!**/test/*.ts"],
     "less": ["src/modules/**/*.less"],
-    "css": ["src/modules/*.less", "src/modules/*/*.less", "src/modules/utils/*/*.less", "src/modules/beta/*/*.less", "!**/*.mixin.less"],
+    "css": [
+      "src/modules/*.less",
+      "src/modules/*/*.less",
+      "src/modules/esl-forms/*/*.less",
+      "src/modules/utils/*/*.less",
+      "src/modules/beta/*/*.less",
+      "!**/*.mixin.less"
+    ],
     "dest": "modules",
     "destPaths": ["modules/*"]
   },
diff --git a/src/modules/all.less b/src/modules/all.less
index 527a6e203..08786910b 100644
--- a/src/modules/all.less
+++ b/src/modules/all.less
@@ -15,3 +15,5 @@
 @import "./esl-scrollable-tabs/core.less";
 
 @import "./esl-alert/core.less";
+
+@import "./esl-forms/all.less";
diff --git a/src/modules/all.ts b/src/modules/all.ts
index be6992885..22553ec6c 100644
--- a/src/modules/all.ts
+++ b/src/modules/all.ts
@@ -20,3 +20,4 @@ export * from './esl-scrollbar/core';
 
 export * from './esl-alert/core';
 
+export * from './esl-forms/all';
diff --git a/src/modules/draft/all.less b/src/modules/draft/all.less
index 4a7318ede..70810585a 100644
--- a/src/modules/draft/all.less
+++ b/src/modules/draft/all.less
@@ -1,4 +1,1 @@
-@import "./esl-select/core.less";
-@import "./esl-select-list/core.less";
-
 @import "./esl-carousel/all.less";
diff --git a/src/modules/draft/all.ts b/src/modules/draft/all.ts
index f0a37d612..b15e00da5 100644
--- a/src/modules/draft/all.ts
+++ b/src/modules/draft/all.ts
@@ -1,3 +1,1 @@
-export * from './esl-select/core';
-export * from './esl-select-list/core';
 export * from './esl-carousel/all';
diff --git a/src/modules/esl-forms/all.less b/src/modules/esl-forms/all.less
new file mode 100644
index 000000000..e72857e9b
--- /dev/null
+++ b/src/modules/esl-forms/all.less
@@ -0,0 +1,2 @@
+@import "./esl-select/core.less";
+@import "./esl-select-list/core.less";
diff --git a/src/modules/esl-forms/all.ts b/src/modules/esl-forms/all.ts
new file mode 100644
index 000000000..0ea82546b
--- /dev/null
+++ b/src/modules/esl-forms/all.ts
@@ -0,0 +1,2 @@
+export * from './esl-select/core';
+export * from './esl-select-list/core';
diff --git a/src/modules/esl-forms/esl-select-list/README.md b/src/modules/esl-forms/esl-select-list/README.md
new file mode 100644
index 000000000..ae4a63ce8
--- /dev/null
+++ b/src/modules/esl-forms/esl-select-list/README.md
@@ -0,0 +1,13 @@
+# [ESL](../../../../README.md) Select List
+
+Version: *1.0.0-beta*.  
+***Important Notice: the component is under beta version, it was tested and now ready to use but be aware of its potential critical API changes.***
+
+Authors: *Alexey Stsefanovich (ala'n)*.
+
+ESLSelectList - is a custom element, for customized selectable list representation.
+
+ESLSelectList is HTML5 form compatible.
+HTMLSelectElement is used as model for ESLSelectList in the current implementation.
+
+Description TBD.
diff --git a/src/modules/draft/esl-select-list/core.less b/src/modules/esl-forms/esl-select-list/core.less
similarity index 100%
rename from src/modules/draft/esl-select-list/core.less
rename to src/modules/esl-forms/esl-select-list/core.less
diff --git a/src/modules/draft/esl-select-list/core.ts b/src/modules/esl-forms/esl-select-list/core.ts
similarity index 100%
rename from src/modules/draft/esl-select-list/core.ts
rename to src/modules/esl-forms/esl-select-list/core.ts
diff --git a/src/modules/draft/esl-select-list/core/esl-select-item.less b/src/modules/esl-forms/esl-select-list/core/esl-select-item.less
similarity index 100%
rename from src/modules/draft/esl-select-list/core/esl-select-item.less
rename to src/modules/esl-forms/esl-select-list/core/esl-select-item.less
diff --git a/src/modules/draft/esl-select-list/core/esl-select-item.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts
similarity index 92%
rename from src/modules/draft/esl-select-list/core/esl-select-item.ts
rename to src/modules/esl-forms/esl-select-list/core/esl-select-item.ts
index 42dbd5092..f645d9b4e 100644
--- a/src/modules/draft/esl-select-list/core/esl-select-item.ts
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts
@@ -1,6 +1,9 @@
-import type {ESLSelectOption} from './esl-select-wrapper';
 import {attr, boolAttr, ESLBaseElement} from '../../../esl-base-element/core';
+import {ExportNs} from '../../../esl-utils/environment/export-ns';
+
+import type {ESLSelectOption} from './esl-select-wrapper';
 
+@ExportNs('SelectItem')
 export class ESLSelectItem extends ESLBaseElement {
   public static readonly is: string = 'esl-select-item';
 
diff --git a/src/modules/draft/esl-select-list/core/esl-select-list.less b/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
similarity index 84%
rename from src/modules/draft/esl-select-list/core/esl-select-list.less
rename to src/modules/esl-forms/esl-select-list/core/esl-select-list.less
index d695e4f27..4a34f0503 100644
--- a/src/modules/draft/esl-select-list/core/esl-select-list.less
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
@@ -22,12 +22,16 @@
     clip: rect(0,0,0,0);
   }
 
-  esl-scrollbar.esl-scrollbar {
-    top: 60px;
+  esl-scrollbar {
+    top: 5px;
     bottom: 5px;
     right: 10px;
   }
 
+  &[multiple] esl-scrollbar {
+    top: 60px;
+  }
+
   .esl-select-list-container {
     flex: 1 1 auto;
     height: 100%;
@@ -38,4 +42,7 @@
     flex: 0 0 auto;
     border-bottom: 1px solid @esl-select-list-secondary;
   }
+  &:not([multiple]) .esl-select-all-item {
+    display: none;
+  }
 }
diff --git a/src/modules/draft/esl-select-list/core/esl-select-list.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts
similarity index 96%
rename from src/modules/draft/esl-select-list/core/esl-select-list.ts
rename to src/modules/esl-forms/esl-select-list/core/esl-select-list.ts
index bfd9439f6..d9bb9e1f3 100644
--- a/src/modules/draft/esl-select-list/core/esl-select-list.ts
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts
@@ -1,10 +1,11 @@
 import {attr, boolAttr} from '../../../esl-base-element/core';
 import {bind} from '../../../esl-utils/decorators/bind';
+import {ExportNs} from '../../../esl-utils/environment/export-ns';
 import {ESLScrollbar} from '../../../esl-scrollbar/core';
 import {ESLSelectItem} from './esl-select-item';
-
 import {ESLSelectWrapper} from './esl-select-wrapper';
 
+@ExportNs('SelectList')
 export class ESLSelectList extends ESLSelectWrapper {
   public static readonly is = 'esl-select-list';
   public static get observedAttributes() {
@@ -96,6 +97,7 @@ export class ESLSelectList extends ESLSelectWrapper {
     } else {
       this._renderGroup(this.$items);
     }
+    this.toggleAttribute('multiple', this.multiple);
   }
   protected _renderGroup(items: ESLSelectItem[]) {
     items.forEach((item) => this.$list.appendChild(item));
@@ -104,6 +106,7 @@ export class ESLSelectList extends ESLSelectWrapper {
   }
 
   protected _updateSelectAll() {
+    if (!this.multiple) return;
     this.$selectAll.selected = this.isAllSelected();
     this.$selectAll.textContent = this.selectAllLabel;
   }
diff --git a/src/modules/draft/esl-select-list/core/esl-select-wrapper.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
similarity index 93%
rename from src/modules/draft/esl-select-list/core/esl-select-wrapper.ts
rename to src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
index 53b1964a0..1d9da83be 100644
--- a/src/modules/draft/esl-select-list/core/esl-select-wrapper.ts
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
@@ -8,6 +8,8 @@ export interface ESLSelectOption {
 }
 
 export interface ESLSelectModel {
+  /** Allow multiple items */
+  multiple: boolean;
   /** Get list of options */
   options: ESLSelectOption[];
   /** Get list of selected options */
@@ -50,6 +52,10 @@ export abstract class ESLSelectWrapper extends ESLBaseElement implements ESLSele
     if (newTarget) newTarget.addEventListener('change', this._onChange);
   }
 
+  public get multiple() {
+    return this.$select && this.$select.multiple;
+  }
+
   public get options(): ESLSelectOption[] {
     return this.$select ? Array.from(this.$select.options) : [];
   }
@@ -79,6 +85,7 @@ export abstract class ESLSelectWrapper extends ESLBaseElement implements ESLSele
   }
 
   public setAllSelected(state: boolean) {
+    if (!this.multiple) return false;
     this.options.forEach((item) => item.selected = state);
     EventUtils.dispatch(this.$select, 'change');
   }
diff --git a/src/modules/esl-forms/esl-select/README.md b/src/modules/esl-forms/esl-select/README.md
new file mode 100644
index 000000000..140d63adb
--- /dev/null
+++ b/src/modules/esl-forms/esl-select/README.md
@@ -0,0 +1,13 @@
+# [ESL](../../../../README.md) Select
+
+Version: *1.0.0-beta*.  
+***Important Notice: the component is under beta version, it was tested and now ready to use but be aware of its potential critical API changes.***
+
+Authors: *Alexey Stsefanovich (ala'n)*.
+
+ESLSelect - is a custom element, for customized select element.
+
+ESLSelect is HTML5 form compatible.
+HTMLSelectElement is used as model for ESLSelect in the current implementation.
+
+Description TBD.
diff --git a/src/modules/draft/esl-select/core.less b/src/modules/esl-forms/esl-select/core.less
similarity index 100%
rename from src/modules/draft/esl-select/core.less
rename to src/modules/esl-forms/esl-select/core.less
diff --git a/src/modules/draft/esl-select/core.ts b/src/modules/esl-forms/esl-select/core.ts
similarity index 100%
rename from src/modules/draft/esl-select/core.ts
rename to src/modules/esl-forms/esl-select/core.ts
diff --git a/src/modules/draft/esl-select/core/esl-select-dropdown.less b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
similarity index 89%
rename from src/modules/draft/esl-select/core/esl-select-dropdown.less
rename to src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
index ae8314db3..1d2000af5 100644
--- a/src/modules/draft/esl-select/core/esl-select-dropdown.less
+++ b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
@@ -30,10 +30,14 @@
       margin-right: 20px;
     }
 
-    esl-scrollbar.esl-scrollbar {
-      top: 56px;
+    esl-scrollbar {
+      top: 6px;
       bottom: 6px;
       right: 2px;
     }
+
+    &[multiple] esl-scrollbar {
+      top: 56px;
+    }
   }
 }
diff --git a/src/modules/draft/esl-select/core/esl-select-dropdown.ts b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.ts
similarity index 98%
rename from src/modules/draft/esl-select/core/esl-select-dropdown.ts
rename to src/modules/esl-forms/esl-select/core/esl-select-dropdown.ts
index 0fc84503f..6c62e8e89 100644
--- a/src/modules/draft/esl-select/core/esl-select-dropdown.ts
+++ b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.ts
@@ -28,7 +28,6 @@ export class ESLSelectDropdown extends ESLToggleable {
   constructor() {
     super();
     this.$list = document.createElement(ESLSelectList.is) as ESLSelectList;
-    this.$list.pinSelected = true;
   }
 
   protected setInitialState() {}
@@ -55,8 +54,9 @@ export class ESLSelectDropdown extends ESLToggleable {
     document.body.appendChild(this);
     this._disposeTimeout && window.clearTimeout(this._disposeTimeout);
 
-    this.$list.$select = this.owner.$select;
+    this.$list.pinSelected = this.owner.pinSelected;
     this.$list.selectAllLabel = this.owner.selectAllLabel;
+    this.$list.$select = this.owner.$select;
 
     super.onShow(params);
     const focusable = this.querySelector('[tabindex]') as HTMLElement;
diff --git a/src/modules/draft/esl-select/core/esl-select-renderer.less b/src/modules/esl-forms/esl-select/core/esl-select-renderer.less
similarity index 92%
rename from src/modules/draft/esl-select/core/esl-select-renderer.less
rename to src/modules/esl-forms/esl-select/core/esl-select-renderer.less
index bb5335323..e1f95237d 100644
--- a/src/modules/draft/esl-select/core/esl-select-renderer.less
+++ b/src/modules/esl-forms/esl-select/core/esl-select-renderer.less
@@ -47,4 +47,7 @@ esl-select-renderer {
       content: '\2715';
     }
   }
+  &:not([multiple]) .esl-select-clear-btn {
+    display: none;
+  }
 }
diff --git a/src/modules/draft/esl-select/core/esl-select-renderer.ts b/src/modules/esl-forms/esl-select/core/esl-select-renderer.ts
similarity index 98%
rename from src/modules/draft/esl-select/core/esl-select-renderer.ts
rename to src/modules/esl-forms/esl-select/core/esl-select-renderer.ts
index 6a0e3c257..517315dbf 100644
--- a/src/modules/draft/esl-select/core/esl-select-renderer.ts
+++ b/src/modules/esl-forms/esl-select/core/esl-select-renderer.ts
@@ -83,6 +83,7 @@ export class ESLSelectRenderer extends ESLBaseElement {
     if (!this.owner) return;
     const selected = this.owner.selected;
     this.hasValue = !!selected.length;
+    this.toggleAttribute('multiple', this.owner.multiple);
     this.applyItems(selected.map((item) => item.text));
   }
 
diff --git a/src/modules/draft/esl-select/core/esl-select.less b/src/modules/esl-forms/esl-select/core/esl-select.less
similarity index 84%
rename from src/modules/draft/esl-select/core/esl-select.less
rename to src/modules/esl-forms/esl-select/core/esl-select.less
index ace244a00..f2736102c 100644
--- a/src/modules/draft/esl-select/core/esl-select.less
+++ b/src/modules/esl-forms/esl-select/core/esl-select.less
@@ -1,11 +1,11 @@
-esl-select {
+.esl-select {
   display: inline-block;
   position: relative;
 
   min-width: 300px;
   max-width: 100%;
 
-  &.esl-select [esl-select-target] {
+  & [esl-select-target] {
     /* Visually hidden */
     position: absolute;
     width: 0;
@@ -21,7 +21,7 @@ esl-select {
     color: @esl-select-disabled;
 
     .esl-select-text,
-    .esl-select-renderer:after {
+    .esl-select-renderer::after {
       color: @esl-select-disabled;
     }
     .esl-select-clear-btn {
@@ -29,7 +29,7 @@ esl-select {
     }
   }
 
-  .esl-select-renderer:after {
+  .esl-select-renderer::after {
     content: '\2BC6';
     display: inline-block;
     flex: 0 0 auto;
@@ -48,7 +48,7 @@ esl-select {
     transition: transform .2s linear;
     transform-origin: center center;
   }
-  &[open] .esl-select-renderer:after {
+  &[open] .esl-select-renderer::after {
     transform: rotateX(180deg);
   }
 }
diff --git a/src/modules/draft/esl-select/core/esl-select.ts b/src/modules/esl-forms/esl-select/core/esl-select.ts
similarity index 96%
rename from src/modules/draft/esl-select/core/esl-select.ts
rename to src/modules/esl-forms/esl-select/core/esl-select.ts
index 5e19ceb50..07a4b70df 100644
--- a/src/modules/draft/esl-select/core/esl-select.ts
+++ b/src/modules/esl-forms/esl-select/core/esl-select.ts
@@ -1,11 +1,13 @@
 import {attr, boolAttr} from '../../../esl-base-element/core';
 import {bind} from '../../../esl-utils/decorators/bind';
 import {CSSUtil} from '../../../esl-utils/dom/styles';
+import {ExportNs} from '../../../esl-utils/environment/export-ns';
 
 import {ESLSelectRenderer} from './esl-select-renderer';
 import {ESLSelectDropdown} from './esl-select-dropdown';
 import {ESLSelectWrapper} from '../../esl-select-list/core/esl-select-wrapper';
 
+@ExportNs('Select')
 export class ESLSelect extends ESLSelectWrapper {
   public static readonly is = 'esl-select';
   public static get observedAttributes() {
@@ -32,6 +34,8 @@ export class ESLSelect extends ESLSelectWrapper {
   @boolAttr() public open: boolean;
   /** Disabled state marker */
   @boolAttr() public disabled: boolean;
+  /** Pin to top marker */
+  @boolAttr() public pinSelected: boolean;
 
   protected $text: ESLSelectRenderer;
   protected $dropdown: ESLSelectDropdown;
diff --git a/src/modules/esl-image/core/esl-image.less b/src/modules/esl-image/core/esl-image.less
index a172e0842..a9a6ab28e 100644
--- a/src/modules/esl-image/core/esl-image.less
+++ b/src/modules/esl-image/core/esl-image.less
@@ -34,14 +34,14 @@
       max-width: 100%;
     }
 
-    &:after {
+    &::after {
       display: none;
       content: attr(alt);
     }
-    &[error]:after {
+    &[error]::after {
       display: inline-block;
     }
-    &[loaded]:after {
+    &[loaded]::after {
       display: none;
     }
 
diff --git a/src/modules/esl-media/core/esl-media.less b/src/modules/esl-media/core/esl-media.less
index a52d4c295..1984ec7f0 100644
--- a/src/modules/esl-media/core/esl-media.less
+++ b/src/modules/esl-media/core/esl-media.less
@@ -22,7 +22,7 @@
         z-index: -1;
         pointer-events: none;
       }
-      &:after {
+      &::after {
         content: '';
         position: absolute;
         top: 0;
diff --git a/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less b/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
index 0c7d9c313..3c6dfe200 100644
--- a/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
+++ b/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
@@ -4,8 +4,8 @@
       padding-top: 15px;
       padding-bottom: 15px;
       .scrollbar-track {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -15,11 +15,11 @@
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' xml:space='preserve'%3E%3Cpolyline points='0,0 8,8 16,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
           background-repeat: no-repeat;
         }
-        &:before {
+        &::before {
           top: -15px;
           transform: scaleY(-1);
         }
-        &:after {
+        &::after {
           bottom: -15px;
         }
       }
@@ -29,8 +29,8 @@
       padding-left: 15px;
       padding-right: 15px;
       .scrollbar-track {
-        &:before,
-        &:after {
+        &::before,
+        &::after {
           content: '';
           position: absolute;
           display: block;
@@ -40,11 +40,11 @@
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' xml:space='preserve'%3E%3Cpolyline points='0,16 8,8 0,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
           background-repeat: no-repeat;
         }
-        &:before {
+        &::before {
           left: -15px;
           transform: scaleX(-1);
         }
-        &:after {
+        &::after {
           right: -15px;
         }
       }
diff --git a/src/modules/lib.ts b/src/modules/lib.ts
index ff4a70f7a..45073b445 100644
--- a/src/modules/lib.ts
+++ b/src/modules/lib.ts
@@ -18,6 +18,8 @@ import type {ESLPanelStack} from './esl-panel/core/esl-panel-stack';
 import type {ESLTabsContainer} from './esl-tab/core/esl-tabs-container';
 import type {ESLScrollableTabs} from './esl-scrollable-tabs/core/esl-scrollable-tabs';
 
+import type {ESLSelect, ESLSelectList, ESLSelectItem} from './esl-forms/all';
+
 import type {ESLCarousel} from './draft/esl-carousel/core/esl-carousel';
 import type {ESLCarouselDotsPlugin} from './draft/esl-carousel/plugin/esl-carousel-dots.plugin';
 import type {ESLCarouselLinkPlugin} from './draft/esl-carousel/plugin/esl-carousel-link.plugin';
@@ -51,6 +53,10 @@ declare global {
     TabsContainer?: typeof ESLTabsContainer;
     ScrollableTabs?: typeof ESLScrollableTabs;
 
+    Select?: typeof ESLSelect;
+    SelectList?: typeof ESLSelectList;
+    SelectItem?: typeof ESLSelectItem;
+
     Carousel?: typeof ESLCarousel;
     CarouselPlugins: {
       Dots?: typeof ESLCarouselDotsPlugin;


Test patch:
diff --git a/test-server/src/localdev.ts b/test-server/src/localdev.ts
index 9926da7b0..42eee6fbc 100644
--- a/test-server/src/localdev.ts
+++ b/test-server/src/localdev.ts
@@ -25,7 +25,9 @@ import {
   ESLScrollableTabs,
   ESLScrollbar,
   ESLAlert,
-  ESLToggleableDispatcher
+  ESLToggleableDispatcher,
+  ESLSelect,
+  ESLSelectList
 } from '../../src/modules/all';
 
 import '../../src/modules/esl-media/providers/iframe-provider';
@@ -35,8 +37,6 @@ import '../../src/modules/esl-media/providers/youtube-provider';
 import '../../src/modules/esl-media/providers/brightcove-provider';
 
 import {
-  ESLSelect,
-  ESLSelectList,
   ESLCarousel,
   ESLCarouselPlugins
 } from '../../src/modules/draft/all';
diff --git a/test-server/views/pages/esl-forms/esl-select-list.html b/test-server/views/pages/esl-forms/esl-select-list.html
new file mode 100644
index 000000000..9074db614
--- /dev/null
+++ b/test-server/views/pages/esl-forms/esl-select-list.html
@@ -0,0 +1,333 @@
+---
+layout: ../../layouts/basic.html
+containerCls: container
+title: ESL Select List
+---
+
+{{##content:
+<section class="row">
+  <div class="col-12">
+    <style>
+      .form {
+        display: block;
+        width: 100%;
+      }
+    </style>
+    <div class="row demo">
+      <form class="form bg-white border border-primary p-4" action="javascript: void 0;">
+        <div class="">
+          <div class="form-group">
+            <label for="country_field" class="form-label">Please select your country: </label>
+            <esl-select-list style="display: block"
+                             select-all-label="Select All Countries">
+              <select esl-select-target
+                      id="country_field"
+                      name="country_field"
+                      class="form-control">
+                <option>Afghanistan</option>
+                <option>Albania</option>
+                <option>Algeria</option>
+                <option>Andorra</option>
+                <option>Angola</option>
+                <option>Antigua and Barbuda</option>
+                <option>Argentina</option>
+                <option>Armenia</option>
+                <option>Australia</option>
+                <option>Austria</option>
+                <option>Azerbaijan</option>
+                <option>Bahamas</option>
+                <option>Bahrain</option>
+                <option>Bangladesh</option>
+                <option>Barbados</option>
+                <option>Belarus</option>
+                <option>Belgium</option>
+                <option>Belize</option>
+                <option>Benin</option>
+                <option>Bhutan</option>
+                <option>Bolivia</option>
+                <option>Bosnia and Herzegovina</option>
+                <option>Botswana</option>
+                <option>Brazil</option>
+                <option>Brunei</option>
+                <option>Bulgaria</option>
+                <option>Burkina Faso</option>
+                <option>Burundi</option>
+                <option>Côte d'Ivoire</option>
+                <option>Cabo Verde</option>
+                <option>Cambodia</option>
+                <option>Cameroon</option>
+                <option>Canada</option>
+                <option>Central African Republic</option>
+                <option>Chad</option>
+                <option>Chile</option>
+                <option>China</option>
+                <option>Colombia</option>
+                <option>Comoros</option>
+                <option>Congo (Congo-Brazzaville)</option>
+                <option>Costa Rica</option>
+                <option>Croatia</option>
+                <option>Cuba</option>
+                <option>Cyprus</option>
+                <option>Czechia (Czech Republic)</option>
+                <option>Democratic Republic of the Congo</option>
+                <option>Denmark</option>
+                <option>Djibouti</option>
+                <option>Dominica</option>
+                <option>Dominican Republic</option>
+                <option>Ecuador</option>
+                <option>Egypt</option>
+                <option>El Salvador</option>
+                <option>Equatorial Guinea</option>
+                <option>Eritrea</option>
+                <option>Estonia</option>
+                <option>Eswatini (fmr. "Swaziland")</option>
+                <option>Ethiopia</option>
+                <option>Fiji</option>
+                <option>Finland</option>
+                <option>France</option>
+                <option>Gabon</option>
+                <option>Gambia</option>
+                <option>Georgia</option>
+                <option>Germany</option>
+                <option>Ghana</option>
+                <option>Greece</option>
+                <option>Grenada</option>
+                <option>Guatemala</option>
+                <option>Guinea</option>
+                <option>Guinea-Bissau</option>
+                <option>Guyana</option>
+                <option>Haiti</option>
+                <option>Holy See</option>
+                <option>Honduras</option>
+                <option>Hungary</option>
+                <option>Iceland</option>
+                <option>India</option>
+                <option>Indonesia</option>
+                <option>Iran</option>
+                <option>Iraq</option>
+                <option>Ireland</option>
+                <option>Israel</option>
+                <option>Italy</option>
+                <option>Jamaica</option>
+                <option>Japan</option>
+                <option>Jordan</option>
+                <option>Kazakhstan</option>
+                <option>Kenya</option>
+                <option>Kiribati</option>
+                <option>Kuwait</option>
+                <option>Kyrgyzstan</option>
+                <option>Laos</option>
+                <option>Latvia</option>
+                <option>Lebanon</option>
+                <option>Lesotho</option>
+                <option>Liberia</option>
+                <option>Libya</option>
+                <option>Liechtenstein</option>
+                <option>Lithuania</option>
+                <option>Luxembourg</option>
+                <option>Madagascar</option>
+                <option>Malawi</option>
+                <option>Malaysia</option>
+                <option>Maldives</option>
+                <option>Mali</option>
+                <option>Malta</option>
+                <option>Marshall Islands</option>
+                <option>Mauritania</option>
+                <option>Mauritius</option>
+                <option>Mexico</option>
+                <option>Micronesia</option>
+                <option>Moldova</option>
+                <option>Monaco</option>
+                <option>Mongolia</option>
+                <option>Montenegro</option>
+                <option>Morocco</option>
+                <option>Mozambique</option>
+                <option>Myanmar (formerly Burma)</option>
+                <option>Namibia</option>
+                <option>Nauru</option>
+                <option>Nepal</option>
+                <option>Netherlands</option>
+                <option>New Zealand</option>
+                <option>Nicaragua</option>
+                <option>Niger</option>
+                <option>Nigeria</option>
+                <option>North Korea</option>
+                <option>North Macedonia</option>
+                <option>Norway</option>
+                <option>Oman</option>
+                <option>Pakistan</option>
+                <option>Palau</option>
+                <option>Palestine State</option>
+                <option>Panama</option>
+                <option>Papua New Guinea</option>
+                <option>Paraguay</option>
+                <option>Peru</option>
+                <option>Philippines</option>
+                <option>Poland</option>
+                <option>Portugal</option>
+                <option>Qatar</option>
+                <option>Romania</option>
+                <option>Russia</option>
+                <option>Rwanda</option>
+                <option>Saint Kitts and Nevis</option>
+                <option>Saint Lucia</option>
+                <option>Saint Vincent and the Grenadines</option>
+                <option>Samoa</option>
+                <option>San Marino</option>
+                <option>Sao Tome and Principe</option>
+                <option>Saudi Arabia</option>
+                <option>Senegal</option>
+                <option>Serbia</option>
+                <option>Seychelles</option>
+                <option>Sierra Leone</option>
+                <option>Singapore</option>
+                <option>Slovakia</option>
+                <option>Slovenia</option>
+                <option>Solomon Islands</option>
+                <option>Somalia</option>
+                <option>South Africa</option>
+                <option>South Korea</option>
+                <option>South Sudan</option>
+                <option>Spain</option>
+                <option>Sri Lanka</option>
+                <option>Sudan</option>
+                <option>Suriname</option>
+                <option>Sweden</option>
+                <option>Switzerland</option>
+                <option>Syria</option>
+                <option>Tajikistan</option>
+                <option>Tanzania</option>
+                <option>Thailand</option>
+                <option>Timor-Leste</option>
+                <option>Togo</option>
+                <option>Tonga</option>
+                <option>Trinidad and Tobago</option>
+                <option>Tunisia</option>
+                <option>Turkey</option>
+                <option>Turkmenistan</option>
+                <option>Tuvalu</option>
+                <option>Uganda</option>
+                <option>Ukraine</option>
+                <option>United Arab Emirates</option>
+                <option>United Kingdom</option>
+                <option>United States of America</option>
+                <option>Uruguay</option>
+                <option>Uzbekistan</option>
+                <option>Vanuatu</option>
+                <option>Venezuela</option>
+                <option>Vietnam</option>
+                <option>Yemen</option>
+                <option>Zambia</option>
+                <option>Zimbabwe</option>
+              </select>
+            </esl-select-list>
+          </div>
+
+          <div class="form-group">
+            <label for="color_field_3" class="form-label">Color List</label>
+            <esl-select-list class="form-control" select-all-label="Select All Colors">
+              <select esl-select-target
+                      multiple
+                      id="color_field_3"
+                      name="color_field_3"
+                      class="form-control">
+                <option value="#0048BA">Absolute Zero</option>
+                <option value="#B0BF1A">Acid green</option>
+                <option value="#7CB9E8">Aero</option>
+                <option value="#C0E8D5">Aero blue</option>
+                <option value="#B284BE">African violet</option>
+                <option value="#72A0C1">Air superiority blue</option>
+                <option value="#EDEAE0">Alabaster</option>
+                <option value="#EFDECD">Almond</option>
+                <option value="#E52B50">Amaranth</option>
+                <option value="#3B7A57">Amazon</option>
+                <option value="#FFBF00">Amber</option>
+                <option value="#FF7E00">Amber (SAE/ECE)</option>
+                <option value="#9966CC">Amethyst</option>
+                <option value="#A4C639">Android green</option>
+                <option value="#CD9575">Antique brass</option>
+                <option value="#665D1E">Antique bronze</option>
+                <option value="#915C83">Antique fuchsia</option>
+                <option value="#841B2D">Antique ruby</option>
+                <option value="#BF4F51">Bittersweet shimmer</option>
+                <option value="#000000" selected>Black</option>
+                <option value="#1B1811">Black chocolate</option>
+                <option value="#3B2F2F">Black coffee</option>
+                <option value="#54626F">Black coral</option>
+                <option value="#3B3C36">Black olive</option>
+                <option value="#BFAFB2">Black Shadows</option>
+                <option value="#FFEBCD">Blanched almond</option>
+                <option value="#A57164">Blast-off bronze</option>
+                <option value="#DE5D83">Blush</option>
+                <option value="#79443B">Bole</option>
+                <option value="#E3DAC9">Bone</option>
+                <option value="#006A4E">Bottle green</option>
+                <option value="#87413F">Brandy</option>
+                <option value="#CB4154">Brick red</option>
+                <option value="#66FF00">Bright green</option>
+                <option value="#D891EF">Bright lilac</option>
+                <option value="#C32148">Bright maroon</option>
+                <option value="#1974D2">Bright navy blue</option>
+                <option value="#FFAA1D">Bright yellow (Crayola)</option>
+                <option value="#FF55A3">Brilliant rose</option>
+                <option value="#FB607F">Brink pink</option>
+                <option value="#004225">British racing green</option>
+                <option value="#CD7F32">Bronze</option>
+                <option value="#88540B">Brown</option>
+                <option value="#AF6E4D">Brown sugar</option>
+                <option value="#7BB661">Bud green</option>
+                <option value="#FFC680">Buff</option>
+                <option value="#800020">Burgundy</option>
+                <option value="#DEB887">Burlywood</option>
+                <option value="#A17A74">Burnished brown</option>
+                <option value="#CC5500">Burnt orange</option>
+                <option value="#E97451">Burnt sienna</option>
+                <option value="#8A3324">Burnt umber</option>
+                <option value="#BD33A4">Byzantine</option>
+                <option value="#702963">Byzantium</option>
+                <option value="#536872">Cadet</option>
+                <option value="#5F9EA0">Cadet blue</option>
+                <option value="#A9B2C3">Cadet blue (Crayola)</option>
+                <option value="#91A3B0">Cadet grey</option>
+                <option value="#006B3C">Cadmium green</option>
+                <option value="#ED872D">Cadmium orange</option>
+                <option value="#E30022">Cadmium red</option>
+              </select>
+            </esl-select-list>
+          </div>
+        </div>
+        <div class="form-group">
+          <button class="btn btn-primary">Submit</button>
+        </div>
+      </form>
+    </div>
+
+    <div class="demo-info panel panel-info">
+    </div>
+    <script>
+      (function () {
+        var form = document.querySelector('form');
+        var info = document.querySelector('.demo-info');
+        if (!info) return;
+
+        function upd() {
+          var data = {};
+          var formData = new FormData(form);
+          formData.forEach(((value, key) => {
+            if (key in data) {
+              data[key] = [].concat(data[key]).concat(value);
+            } else {
+              data[key] = value;
+            }
+          }));
+
+          info.textContent = JSON.stringify(data, null, 2);
+          info.removeAttribute('hidden');
+        }
+
+        form.addEventListener('submit', upd);
+      })();
+    </script>
+  </div>
+</section>
+#}}
diff --git a/test-server/views/pages/esl-select.html b/test-server/views/pages/esl-forms/esl-select.html
similarity index 74%
rename from test-server/views/pages/esl-select.html
rename to test-server/views/pages/esl-forms/esl-select.html
index f911367c9..43b118537 100644
--- a/test-server/views/pages/esl-select.html
+++ b/test-server/views/pages/esl-forms/esl-select.html
@@ -1,7 +1,7 @@
 ---
-layout: ../layouts/basic.html
+layout: ../../layouts/basic.html
 containerCls: container
-title: ESL Select component
+title: ESL Select
 ---
 
 {{##content:
@@ -16,8 +16,217 @@ title: ESL Select component
     <div class="row demo">
       <form class="form bg-white border border-primary p-4" action="javascript: void 0;">
         <div class="">
+          <div class="form-group">
+            <label for="country_field" class="form-label">Please select your country: </label>
+            <esl-select style="display: block"
+                        empty-text="Country"
+                        select-all-label="Select All Countries">
+              <select esl-select-target
+                      id="country_field"
+                      name="country_field"
+                      class="form-control">
+                <option>Afghanistan</option>
+                <option>Albania</option>
+                <option>Algeria</option>
+                <option>Andorra</option>
+                <option>Angola</option>
+                <option>Antigua and Barbuda</option>
+                <option>Argentina</option>
+                <option>Armenia</option>
+                <option>Australia</option>
+                <option>Austria</option>
+                <option>Azerbaijan</option>
+                <option>Bahamas</option>
+                <option>Bahrain</option>
+                <option>Bangladesh</option>
+                <option>Barbados</option>
+                <option>Belarus</option>
+                <option>Belgium</option>
+                <option>Belize</option>
+                <option>Benin</option>
+                <option>Bhutan</option>
+                <option>Bolivia</option>
+                <option>Bosnia and Herzegovina</option>
+                <option>Botswana</option>
+                <option>Brazil</option>
+                <option>Brunei</option>
+                <option>Bulgaria</option>
+                <option>Burkina Faso</option>
+                <option>Burundi</option>
+                <option>Côte d'Ivoire</option>
+                <option>Cabo Verde</option>
+                <option>Cambodia</option>
+                <option>Cameroon</option>
+                <option>Canada</option>
+                <option>Central African Republic</option>
+                <option>Chad</option>
+                <option>Chile</option>
+                <option>China</option>
+                <option>Colombia</option>
+                <option>Comoros</option>
+                <option>Congo (Congo-Brazzaville)</option>
+                <option>Costa Rica</option>
+                <option>Croatia</option>
+                <option>Cuba</option>
+                <option>Cyprus</option>
+                <option>Czechia (Czech Republic)</option>
+                <option>Democratic Republic of the Congo</option>
+                <option>Denmark</option>
+                <option>Djibouti</option>
+                <option>Dominica</option>
+                <option>Dominican Republic</option>
+                <option>Ecuador</option>
+                <option>Egypt</option>
+                <option>El Salvador</option>
+                <option>Equatorial Guinea</option>
+                <option>Eritrea</option>
+                <option>Estonia</option>
+                <option>Eswatini (fmr. "Swaziland")</option>
+                <option>Ethiopia</option>
+                <option>Fiji</option>
+                <option>Finland</option>
+                <option>France</option>
+                <option>Gabon</option>
+                <option>Gambia</option>
+                <option>Georgia</option>
+                <option>Germany</option>
+                <option>Ghana</option>
+                <option>Greece</option>
+                <option>Grenada</option>
+                <option>Guatemala</option>
+                <option>Guinea</option>
+                <option>Guinea-Bissau</option>
+                <option>Guyana</option>
+                <option>Haiti</option>
+                <option>Holy See</option>
+                <option>Honduras</option>
+                <option>Hungary</option>
+                <option>Iceland</option>
+                <option>India</option>
+                <option>Indonesia</option>
+                <option>Iran</option>
+                <option>Iraq</option>
+                <option>Ireland</option>
+                <option>Israel</option>
+                <option>Italy</option>
+                <option>Jamaica</option>
+                <option>Japan</option>
+                <option>Jordan</option>
+                <option>Kazakhstan</option>
+                <option>Kenya</option>
+                <option>Kiribati</option>
+                <option>Kuwait</option>
+                <option>Kyrgyzstan</option>
+                <option>Laos</option>
+                <option>Latvia</option>
+                <option>Lebanon</option>
+                <option>Lesotho</option>
+                <option>Liberia</option>
+                <option>Libya</option>
+                <option>Liechtenstein</option>
+                <option>Lithuania</option>
+                <option>Luxembourg</option>
+                <option>Madagascar</option>
+                <option>Malawi</option>
+                <option>Malaysia</option>
+                <option>Maldives</option>
+                <option>Mali</option>
+                <option>Malta</option>
+                <option>Marshall Islands</option>
+                <option>Mauritania</option>
+                <option>Mauritius</option>
+                <option>Mexico</option>
+                <option>Micronesia</option>
+                <option>Moldova</option>
+                <option>Monaco</option>
+                <option>Mongolia</option>
+                <option>Montenegro</option>
+                <option>Morocco</option>
+                <option>Mozambique</option>
+                <option>Myanmar (formerly Burma)</option>
+                <option>Namibia</option>
+                <option>Nauru</option>
+                <option>Nepal</option>
+                <option>Netherlands</option>
+                <option>New Zealand</option>
+                <option>Nicaragua</option>
+                <option>Niger</option>
+                <option>Nigeria</option>
+                <option>North Korea</option>
+                <option>North Macedonia</option>
+                <option>Norway</option>
+                <option>Oman</option>
+                <option>Pakistan</option>
+                <option>Palau</option>
+                <option>Palestine State</option>
+                <option>Panama</option>
+                <option>Papua New Guinea</option>
+                <option>Paraguay</option>
+                <option>Peru</option>
+                <option>Philippines</option>
+                <option>Poland</option>
+                <option>Portugal</option>
+                <option>Qatar</option>
+                <option>Romania</option>
+                <option>Russia</option>
+                <option>Rwanda</option>
+                <option>Saint Kitts and Nevis</option>
+                <option>Saint Lucia</option>
+                <option>Saint Vincent and the Grenadines</option>
+                <option>Samoa</option>
+                <option>San Marino</option>
+                <option>Sao Tome and Principe</option>
+                <option>Saudi Arabia</option>
+                <option>Senegal</option>
+                <option>Serbia</option>
+                <option>Seychelles</option>
+                <option>Sierra Leone</option>
+                <option>Singapore</option>
+                <option>Slovakia</option>
+                <option>Slovenia</option>
+                <option>Solomon Islands</option>
+                <option>Somalia</option>
+                <option>South Africa</option>
+                <option>South Korea</option>
+                <option>South Sudan</option>
+                <option>Spain</option>
+                <option>Sri Lanka</option>
+                <option>Sudan</option>
+                <option>Suriname</option>
+                <option>Sweden</option>
+                <option>Switzerland</option>
+                <option>Syria</option>
+                <option>Tajikistan</option>
+                <option>Tanzania</option>
+                <option>Thailand</option>
+                <option>Timor-Leste</option>
+                <option>Togo</option>
+                <option>Tonga</option>
+                <option>Trinidad and Tobago</option>
+                <option>Tunisia</option>
+                <option>Turkey</option>
+                <option>Turkmenistan</option>
+                <option>Tuvalu</option>
+                <option>Uganda</option>
+                <option>Ukraine</option>
+                <option>United Arab Emirates</option>
+                <option>United Kingdom</option>
+                <option>United States of America</option>
+                <option>Uruguay</option>
+                <option>Uzbekistan</option>
+                <option>Vanuatu</option>
+                <option>Venezuela</option>
+                <option>Vietnam</option>
+                <option>Yemen</option>
+                <option>Zambia</option>
+                <option>Zimbabwe</option>
+              </select>
+            </esl-select>
+          </div>
+
           <esl-select class="form-group"
                       style="display: block"
+                      pin-selected
                       empty-text="Color"
                       select-all-label="All Colors">
             <label for="color_field" class="form-label">Color</label>
@@ -355,6 +564,7 @@ title: ESL Select component
           </esl-select>
           <esl-select class="form-group"
                       style="display: block"
+                      pin-selected
                       empty-text="Color 2"
                       select-all-label="All Colors">
             <label for="color_field_2" class="form-label">Color 2</label>
@@ -426,79 +636,6 @@ title: ESL Select component
               <option value="#E30022">Cadmium red</option>
             </select>
           </esl-select>
-
-          <div class="form-group">
-            <label for="color_field_3" class="form-label">Color List</label>
-            <esl-select-list class="form-control" select-all-label="Select All Colors">
-              <select esl-select-target
-                      multiple
-                      id="color_field_3"
-                      name="color_field_3"
-                      class="form-control">
-                <option value="#0048BA">Absolute Zero</option>
-                <option value="#B0BF1A">Acid green</option>
-                <option value="#7CB9E8">Aero</option>
-                <option value="#C0E8D5">Aero blue</option>
-                <option value="#B284BE">African violet</option>
-                <option value="#72A0C1">Air superiority blue</option>
-                <option value="#EDEAE0">Alabaster</option>
-                <option value="#EFDECD">Almond</option>
-                <option value="#E52B50">Amaranth</option>
-                <option value="#3B7A57">Amazon</option>
-                <option value="#FFBF00">Amber</option>
-                <option value="#FF7E00">Amber (SAE/ECE)</option>
-                <option value="#9966CC">Amethyst</option>
-                <option value="#A4C639">Android green</option>
-                <option value="#CD9575">Antique brass</option>
-                <option value="#665D1E">Antique bronze</option>
-                <option value="#915C83">Antique fuchsia</option>
-                <option value="#841B2D">Antique ruby</option>
-                <option value="#BF4F51">Bittersweet shimmer</option>
-                <option value="#000000" selected>Black</option>
-                <option value="#1B1811">Black chocolate</option>
-                <option value="#3B2F2F">Black coffee</option>
-                <option value="#54626F">Black coral</option>
-                <option value="#3B3C36">Black olive</option>
-                <option value="#BFAFB2">Black Shadows</option>
-                <option value="#FFEBCD">Blanched almond</option>
-                <option value="#A57164">Blast-off bronze</option>
-                <option value="#DE5D83">Blush</option>
-                <option value="#79443B">Bole</option>
-                <option value="#E3DAC9">Bone</option>
-                <option value="#006A4E">Bottle green</option>
-                <option value="#87413F">Brandy</option>
-                <option value="#CB4154">Brick red</option>
-                <option value="#66FF00">Bright green</option>
-                <option value="#D891EF">Bright lilac</option>
-                <option value="#C32148">Bright maroon</option>
-                <option value="#1974D2">Bright navy blue</option>
-                <option value="#FFAA1D">Bright yellow (Crayola)</option>
-                <option value="#FF55A3">Brilliant rose</option>
-                <option value="#FB607F">Brink pink</option>
-                <option value="#004225">British racing green</option>
-                <option value="#CD7F32">Bronze</option>
-                <option value="#88540B">Brown</option>
-                <option value="#AF6E4D">Brown sugar</option>
-                <option value="#7BB661">Bud green</option>
-                <option value="#FFC680">Buff</option>
-                <option value="#800020">Burgundy</option>
-                <option value="#DEB887">Burlywood</option>
-                <option value="#A17A74">Burnished brown</option>
-                <option value="#CC5500">Burnt orange</option>
-                <option value="#E97451">Burnt sienna</option>
-                <option value="#8A3324">Burnt umber</option>
-                <option value="#BD33A4">Byzantine</option>
-                <option value="#702963">Byzantium</option>
-                <option value="#536872">Cadet</option>
-                <option value="#5F9EA0">Cadet blue</option>
-                <option value="#A9B2C3">Cadet blue (Crayola)</option>
-                <option value="#91A3B0">Cadet grey</option>
-                <option value="#006B3C">Cadmium green</option>
-                <option value="#ED872D">Cadmium orange</option>
-                <option value="#E30022">Cadmium red</option>
-              </select>
-            </esl-select-list>
-          </div>
         </div>
         <div class="form-group">
           <button class="btn btn-primary">Submit</button>