@shoper/phoenix_design_system 0.8.3-1 → 0.9.0

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js

@@ -8,9 +8,7 @@ var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('../portal/portal_constants.js');
-var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var dropdown_constants = require('./dropdown_constants.js');
-var global_constants = require('../../global_constants.js');
 var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
@@ -23,95 +21,23 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
-        this.transition = 'direction';
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
-        this._closeDropdown = () => {
-            const dropdowns = document.querySelectorAll(dropdown_constants.DROPDOWN_CONTAINER_NAME);
-            dropdowns.forEach((dropdown) => {
-                const opened = dropdown.getAttribute('opened');
-                if (opened !== null)
-                    dropdown.hide();
-            });
-        };
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = async () => {
-            this._dispatchShowDropdownEvent();
-            return new Promise((resolve) => {
-                var _a;
-                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(dropdown_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
-                window.requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
-                    }, 0);
-                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
-                    setTimeout(() => {
-                        var _a;
-                        this.opened = true;
-                        this._dispatchShowDropdownEvent();
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
-                        resolve();
-                    }, transitionDuration);
-                });
-            });
-        };
-        this._dispatchShowDropdownEvent = () => {
+        this.show = () => {
+            this.opened = true;
             const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
-            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
-                return;
-            const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
-                bubbles: true
-            });
-            this.dispatchEvent(showBackdropEvent);
         };
-        this.hide = async () => new Promise((resolve) => {
-            const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
-            window.requestAnimationFrame(() => {
-                var _a, _b;
-                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
-                (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                setTimeout(() => {
-                    var _a;
-                    (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                    this.opened = false;
-                    this._dispatchHideDropdownEvent();
-                    resolve();
-                }, transitionDuration);
-            });
-        });
-        this._dispatchHideDropdownEvent = () => {
+        this.hide = () => {
+            this.opened = false;
             const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
             this.dispatchEvent(hideDropdownEvent);
-            if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
-                return;
-            const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
-                bubbles: true
-            });
-            this.dispatchEvent(hideBackdropEvent);
-        };
-        this._hoverToggle = async (ev) => {
-            if (window.innerWidth < global_constants.BREAKPOINTS.xs)
-                return;
-            if (!ev.target) {
-                await this.hide();
-                return;
-            }
-            const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
-            if (isHoveredWithinDropdown && !this.opened) {
-                await this.show();
-                return;
-            }
-            if (!isHoveredWithinDropdown && this.opened) {
-                await this.hide();
-                return;
-            }
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -122,7 +48,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
-        this._appendBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -142,6 +67,15 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             });
         this._setupListeners();
     }
+    _setupListeners() {
+        var _a, _b, _c;
+        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
+        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
+        if (this.toggleOnHover) {
+            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
+            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
+        }
+    }
     _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -150,21 +84,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
-    _appendBackdrop() {
-        const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
-        if (!$backdrop) {
-            const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
-            document.body.appendChild($newBackdrop);
-            $newBackdrop.addOnClick(this._closeDropdown);
-        }
-    }
-    _setupListeners() {
-        var _a;
-        this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover)
-            document.addEventListener('mouseover', this._hoverToggle);
-    }
     _handleClickOutside() {
         var _a;
         if (!this.opened)
@@ -172,17 +91,14 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         this.hide();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
     }
-    _isHoveredWithinDropdown(element) {
-        const isDescendantOfDropdown = element.closest(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
-        const isDescendantOfContent = this.$dropdownContent && element.closest(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
-        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
-    }
     disconnectedCallback() {
-        var _a;
+        var _a, _b, _c;
         super.disconnectedCallback();
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
-        if (this.toggleOnHover)
-            document.removeEventListener('mouseover', this._hoverToggle);
+        if (this.toggleOnHover) {
+            (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
+            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
+        }
         this.opened = false;
     }
     render() {
@@ -211,10 +127,6 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "name", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdown.prototype, "transition", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js

@@ -14,23 +14,15 @@ const DROPDOWN_EVENTS = {
 };
 const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
 const DROPDOWN_CLASS = 'dropdown';
-const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
-const DROPDOWN_TOGGLER_CLASS = `${DROPDOWN_CLASS}__toggler`;
-const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
-const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
-const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
+const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
 
 exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
 exports.DROPDOWN_CLASS = DROPDOWN_CLASS;
 exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
 exports.DROPDOWN_CONTENT_CLASS = DROPDOWN_CONTENT_CLASS;
-exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
 exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
-exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
-exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
 exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
 exports.DROPDOWN_NAME = DROPDOWN_NAME;
 exports.DROPDOWN_OPENED_ATTRIBUTE_NAME = DROPDOWN_OPENED_ATTRIBUTE_NAME;
-exports.DROPDOWN_TOGGLER_CLASS = DROPDOWN_TOGGLER_CLASS;
 exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
 //# sourceMappingURL=dropdown_constants.js.map

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js

@@ -23,7 +23,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
             this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
-        this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CLASS} ${this.className}`;
     }
     connectedCallback() {
         super.connectedCallback();

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/control.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var form_controls_constatns = require('./form_controls_constatns.js');
+
+exports.HControl = class HControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(form_controls_constatns.FORM_CONTROLS_CSS_CLASSES.control);
+    }
+};
+exports.HControl = tslib_es6.__decorate([
+    decorators.customElement('h-control')
+], exports.HControl);
+//# sourceMappingURL=control.js.map

package/build/cjs/packages/phoenix/src/components/form_controls/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/control_additional_content.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var form_controls_constatns = require('./form_controls_constatns.js');
+
+exports.HControlAdditionalContent = class HControlAdditionalContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.type = form_controls_constatns.CONTROL_ADDITIONAL_CONTENT_TYPES.text;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(form_controls_constatns.FORM_CONTROLS_CSS_CLASSES.additionalContent, form_controls_constatns.ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP[this.type]);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HControlAdditionalContent.prototype, "type", void 0);
+exports.HControlAdditionalContent = tslib_es6.__decorate([
+    decorators.customElement('h-control-additional-content')
+], exports.HControlAdditionalContent);
+//# sourceMappingURL=control_additional_content.js.map

package/build/cjs/packages/phoenix/src/components/form_controls/control_additional_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/control_content.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var form_controls_constatns = require('./form_controls_constatns.js');
+
+exports.HControlContent = class HControlContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.size = form_controls_constatns.CONTROL_CONTENT_SIZES.full;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(form_controls_constatns.FORM_CONTROLS_CSS_CLASSES.control);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HControlContent.prototype, "size", void 0);
+exports.HControlContent = tslib_es6.__decorate([
+    decorators.customElement('h-control-content')
+], exports.HControlContent);
+//# sourceMappingURL=control_content.js.map

package/build/cjs/packages/phoenix/src/components/form_controls/control_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/control_element.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var form_controls_constatns = require('./form_controls_constatns.js');
+
+exports.HControlElement = class HControlElement extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(form_controls_constatns.FORM_CONTROLS_CSS_CLASSES.controlElement);
+    }
+};
+exports.HControlElement = tslib_es6.__decorate([
+    decorators.customElement('h-control-element')
+], exports.HControlElement);
+//# sourceMappingURL=control_element.js.map

package/build/cjs/packages/phoenix/src/components/form_controls/control_element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/control_label.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var form_controls_constatns = require('./form_controls_constatns.js');
+
+exports.HControlLabel = class HControlLabel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(form_controls_constatns.FORM_CONTROLS_CSS_CLASSES.controlLabel);
+    }
+};
+exports.HControlLabel = tslib_es6.__decorate([
+    decorators.customElement('h-control-label')
+], exports.HControlLabel);
+//# sourceMappingURL=control_label.js.map

package/build/cjs/packages/phoenix/src/components/form_controls/control_label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form_controls/form_controls_constatns.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const CONTROL_CONTENT_SIZES = {
+    auto: 'auto',
+    full: 'full',
+    half: 'half',
+    quarter: 'quarter',
+    threeQuarters: 'three-quarters'
+};
+const baseControlClass = 'control';
+const FORM_CONTROLS_CSS_CLASSES = {
+    control: baseControlClass,
+    controlContent: `${baseControlClass}__content`,
+    controlElement: `${baseControlClass}__element`,
+    controlLabel: `${baseControlClass}__label`,
+    controlErrors: `${baseControlClass}__errors`,
+    additionalContent: `${baseControlClass}__additional-content`
+};
+const CONTROL_ADDITIONAL_CONTENT_TYPES = {
+    text: 'text'
+};
+const ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP = {
+    [CONTROL_ADDITIONAL_CONTENT_TYPES.text]: `${FORM_CONTROLS_CSS_CLASSES.additionalContent}_type-text`
+};
+
+exports.ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP = ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP;
+exports.CONTROL_ADDITIONAL_CONTENT_TYPES = CONTROL_ADDITIONAL_CONTENT_TYPES;
+exports.CONTROL_CONTENT_SIZES = CONTROL_CONTENT_SIZES;
+exports.FORM_CONTROLS_CSS_CLASSES = FORM_CONTROLS_CSS_CLASSES;
+//# sourceMappingURL=form_controls_constatns.js.map

package/build/{esm/packages/phoenix/src/components/backdrop/backdrop_constants.js.map → cjs/packages/phoenix/src/components/form_controls/form_controls_constatns.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal.js

@@ -8,7 +8,6 @@ var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var portal_constants = require('../portal/portal_constants.js');
-var backdrop_constants = require('../backdrop/backdrop_constants.js');
 var modal_constants = require('./modal_constants.js');
 var ref = require('../../../../../external/lit-html/directives/ref.js');
 
@@ -94,11 +93,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
             document.body.appendChild($portalTarget);
         }
     }
-    static _appendBackdrop() {
-        const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
-        if (!$backdrop) {
-            const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
-            document.body.appendChild($newBackdrop);
+    static _appendModalsBackdrop() {
+        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
+        if (!$modalsBackdrop) {
+            const $backdrop = document.createElement('h-modal-backdrop');
+            document.body.appendChild($backdrop);
         }
     }
     static isSomeModalOpen() {
@@ -107,7 +106,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     connectedCallback() {
         super.connectedCallback();
         HModal_1._appendModalsPortal();
-        HModal_1._appendBackdrop();
+        HModal_1._appendModalsBackdrop();
         document.addEventListener('keydown', this._keepFocusWithinModal);
         document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
     }
@@ -151,11 +150,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
         const openModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.opened, {
             bubbles: true
         });
-        const openBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.show, {
-            bubbles: true
-        });
         this.dispatchEvent(openModalEvent);
-        this.dispatchEvent(openBackdropEvent);
     }
     async close() {
         return new Promise((resolve) => {
@@ -178,11 +173,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
         const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.closed, {
             bubbles: true
         });
-        const closeBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.hide, {
-            bubbles: true
-        });
         this.dispatchEvent(closeModalEvent);
-        this.dispatchEvent(closeBackdropEvent);
     }
     render() {
         return lit.html `

package/build/cjs/packages/phoenix/src/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var modal_constants = require('./modal_constants.js');
+var modal = require('./modal.js');
+
+exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this._show = () => {
+            if (!this.visible) {
+                this.visible = true;
+            }
+        };
+        this._hide = () => {
+            if (!modal.HModal.isSomeModalOpen()) {
+                this.visible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
+        document.addEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
+        document.removeEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
+    }
+    updated() {
+        if (modal.HModal.isSomeModalOpen()) {
+            this.visible = true;
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModalBackdrop.prototype, "visible", void 0);
+exports.HModalBackdrop = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-modal-backdrop')
+], exports.HModalBackdrop);
+//# sourceMappingURL=modal_backdrop.js.map

package/build/cjs/packages/phoenix/src/components/{backdrop/backdrop.js.map → modal/modal_backdrop.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/index.js

@@ -10,14 +10,19 @@ var portal_target = require('./components/portal/portal_target.js');
 var portal = require('./components/portal/portal.js');
 var modal = require('./components/modal/modal.js');
 var modal_opener = require('./components/modal/modal_opener.js');
+var modal_backdrop = require('./components/modal/modal_backdrop.js');
 var modal_body = require('./components/modal/modal_body.js');
 var modal_footer = require('./components/modal/modal_footer.js');
 var modal_header = require('./components/modal/modal_header.js');
 var modal_close = require('./components/modal/modal_close.js');
+var control = require('./components/form_controls/control.js');
+var control_content = require('./components/form_controls/control_content.js');
+var control_element = require('./components/form_controls/control_element.js');
+var control_label = require('./components/form_controls/control_label.js');
+var control_additional_content = require('./components/form_controls/control_additional_content.js');
 var keystrokes_controller = require('./controllers/keystrokes_controller/keystrokes_controller.js');
 var btn_controller = require('./controllers/btn_controller.js');
 var click_outside_controller = require('./controllers/click_outside_controller/click_outside_controller.js');
-var backdrop = require('./components/backdrop/backdrop.js');
 var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
 var dropdown = require('./components/dropdown/dropdown.js');
 var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
@@ -59,6 +64,12 @@ Object.defineProperty(exports, 'HModalOpener', {
 		return modal_opener.HModalOpener;
 	}
 });
+Object.defineProperty(exports, 'HModalBackdrop', {
+	enumerable: true,
+	get: function () {
+		return modal_backdrop.HModalBackdrop;
+	}
+});
 Object.defineProperty(exports, 'HModalBody', {
 	enumerable: true,
 	get: function () {
@@ -83,15 +94,39 @@ Object.defineProperty(exports, 'HModalClose', {
 		return modal_close.HModalClose;
 	}
 });
-exports.KeystrokesController = keystrokes_controller.KeystrokesController;
-exports.BtnController = btn_controller.BtnController;
-exports.ClickOutsideController = click_outside_controller.ClickOutsideController;
-Object.defineProperty(exports, 'HBackdrop', {
+Object.defineProperty(exports, 'HControl', {
+	enumerable: true,
+	get: function () {
+		return control.HControl;
+	}
+});
+Object.defineProperty(exports, 'HControlContent', {
+	enumerable: true,
+	get: function () {
+		return control_content.HControlContent;
+	}
+});
+Object.defineProperty(exports, 'HControlElement', {
 	enumerable: true,
 	get: function () {
-		return backdrop.HBackdrop;
+		return control_element.HControlElement;
 	}
 });
+Object.defineProperty(exports, 'HControlLabel', {
+	enumerable: true,
+	get: function () {
+		return control_label.HControlLabel;
+	}
+});
+Object.defineProperty(exports, 'HControlAdditionalContent', {
+	enumerable: true,
+	get: function () {
+		return control_additional_content.HControlAdditionalContent;
+	}
+});
+exports.KeystrokesController = keystrokes_controller.KeystrokesController;
+exports.BtnController = btn_controller.BtnController;
+exports.ClickOutsideController = click_outside_controller.ClickOutsideController;
 exports.RelativePositionController = relative_position_controller.RelativePositionController;
 Object.defineProperty(exports, 'HDropdown', {
 	enumerable: true,

package/build/cjs/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}