@shoper/phoenix_design_system 0.8.1 → 0.9.0

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

@@ -12,7 +12,6 @@ var dropdown_constants = require('./dropdown_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');
-var global_constants = require('../../global_constants.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 
 exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -22,81 +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.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = async () => {
+        this.show = () => {
+            this.opened = true;
             const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
-            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.dispatchEvent(showDropdownEvent);
-                        (_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.hide = async () => {
+        this.hide = () => {
+            this.opened = false;
             const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
-            return 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.dispatchEvent(hideDropdownEvent);
-                        resolve();
-                    }, transitionDuration);
-                });
-            });
-        };
-        this._hoverToggle = async (ev) => {
-            if (!ev.target) {
-                await this.hide();
-                return;
-            }
-            const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
-                (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
-                ev.target === this ||
-                ev.target === this.$dropdownContent;
-            if (isHoveredWithinDropdown && !this.opened) {
-                await this.show();
-                return;
-            }
-            if (!isHoveredWithinDropdown && this.opened) {
-                await this.hide();
-                return;
-            }
-        };
-        this._isDescendantOfParent = function (parent, child) {
-            let parentNode = child.parentNode;
-            while (parentNode) {
-                if (parentNode === parent)
-                    return true;
-                parentNode = parentNode.parentNode;
-            }
-            return false;
+            this.dispatchEvent(hideDropdownEvent);
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -107,7 +48,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
-        this._appendDropdownBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -127,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) {
@@ -135,21 +84,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
-    _appendDropdownBackdrop() {
-        const $dropdownBackdrop = document.querySelector(dropdown_constants.DROPDOWN_BACKDROP_NAME);
-        if (!$dropdownBackdrop) {
-            const $backdrop = document.createElement(dropdown_constants.DROPDOWN_BACKDROP_NAME);
-            document.body.appendChild($backdrop);
-        }
-    }
-    _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 && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
-            document.addEventListener('mouseover', this._hoverToggle);
-        }
-    }
     _handleClickOutside() {
         var _a;
         if (!this.opened)
@@ -158,11 +92,12 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
     }
     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 && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
-            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;
     }
@@ -192,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;"}
+{"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

@@ -6,7 +6,6 @@ const DROPDOWN_NAME = 'dropdown';
 const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
 const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
 const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
-const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
 const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
 const DROPDOWN_EVENT = 'dropdown';
 const DROPDOWN_EVENTS = {
@@ -15,24 +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_BACKDROP_NAME = DROPDOWN_BACKDROP_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;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/cjs/packages/phoenix/src/components/form_controls/form_controls_constatns.js.map

@@ -0,0 +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;"}

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

@@ -15,6 +15,11 @@ 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');
@@ -89,6 +94,36 @@ Object.defineProperty(exports, 'HModalClose', {
 		return modal_close.HModalClose;
 	}
 });
+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 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;

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;"}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -6,22 +6,18 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     direction: "bottom-center";
     toggleOnHover: boolean;
     name: string;
-    transition: string;
     portalTarget: string;
     $dropdownToggler: HTMLElement | null;
     $dropdownContent: HTMLElement | null;
     private _positionController;
     private _clickOutsideController;
     connectedCallback(): void;
-    private _appendDropdownPortal;
-    private _appendDropdownBackdrop;
     private _setupListeners;
+    private _appendDropdownPortal;
     private _handleClickOutside;
     toggle: () => void;
-    show: () => Promise<void>;
-    hide: () => Promise<void>;
-    private _hoverToggle;
-    private _isDescendantOfParent;
+    show: () => void;
+    hide: () => void;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;

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

@@ -4,11 +4,10 @@ import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_BACKDROP_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
-import { MOBILE_SCREEN_WIDTH } from '../../global_constants.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 
 let HDropdown = class HDropdown extends PhoenixLightLitElement {
@@ -18,81 +17,23 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
         this.direction = DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
-        this.transition = 'direction';
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         this.toggle = () => {
             this.opened ? this.hide() : this.show();
         };
-        this.show = async () => {
+        this.show = () => {
+            this.opened = true;
             const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
                 bubbles: true
             });
             this.dispatchEvent(showDropdownEvent);
-            return new Promise((resolve) => {
-                var _a;
-                (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
-                window.requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
-                    }, 0);
-                    const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
-                    setTimeout(() => {
-                        var _a;
-                        this.opened = true;
-                        this.dispatchEvent(showDropdownEvent);
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
-                        resolve();
-                    }, transitionDuration);
-                });
-            });
         };
-        this.hide = async () => {
+        this.hide = () => {
+            this.opened = false;
             const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
                 bubbles: true
             });
-            return 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_CONTENT_HIDE}-${this.transition}-start`);
-                    (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                    setTimeout(() => {
-                        var _a;
-                        (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
-                        this.opened = false;
-                        this.dispatchEvent(hideDropdownEvent);
-                        resolve();
-                    }, transitionDuration);
-                });
-            });
-        };
-        this._hoverToggle = async (ev) => {
-            if (!ev.target) {
-                await this.hide();
-                return;
-            }
-            const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
-                (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
-                ev.target === this ||
-                ev.target === this.$dropdownContent;
-            if (isHoveredWithinDropdown && !this.opened) {
-                await this.show();
-                return;
-            }
-            if (!isHoveredWithinDropdown && this.opened) {
-                await this.hide();
-                return;
-            }
-        };
-        this._isDescendantOfParent = function (parent, child) {
-            let parentNode = child.parentNode;
-            while (parentNode) {
-                if (parentNode === parent)
-                    return true;
-                parentNode = parentNode.parentNode;
-            }
-            return false;
+            this.dispatchEvent(hideDropdownEvent);
         };
         this._positionDropdownContent = () => {
             requestAnimationFrame(() => {
@@ -103,7 +44,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this._appendDropdownPortal();
-        this._appendDropdownBackdrop();
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -123,6 +63,15 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             });
         this._setupListeners();
     }
+    _setupListeners() {
+        var _a, _b, _c;
+        this.addEventListener(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="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -131,21 +80,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
             document.body.appendChild($portalTarget);
         }
     }
-    _appendDropdownBackdrop() {
-        const $dropdownBackdrop = document.querySelector(DROPDOWN_BACKDROP_NAME);
-        if (!$dropdownBackdrop) {
-            const $backdrop = document.createElement(DROPDOWN_BACKDROP_NAME);
-            document.body.appendChild($backdrop);
-        }
-    }
-    _setupListeners() {
-        var _a;
-        this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
-        (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
-        if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
-            document.addEventListener('mouseover', this._hoverToggle);
-        }
-    }
     _handleClickOutside() {
         var _a;
         if (!this.opened)
@@ -154,11 +88,12 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
         (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
     }
     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 && window.innerWidth > MOBILE_SCREEN_WIDTH) {
-            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;
     }
@@ -188,10 +123,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "name", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "transition", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts

@@ -2,7 +2,6 @@ export declare const DROPDOWN_NAME = "dropdown";
 export declare const DROPDOWN_CONTAINER_NAME: string;
 export declare const DROPDOWN_TOGGLER_NAME: string;
 export declare const DROPDOWN_CONTENT_NAME: string;
-export declare const DROPDOWN_BACKDROP_NAME: string;
 export declare const DEFAULT_DROPDOWN_PORTAL_NAME = "dropdown-portal";
 export declare const DROPDOWN_EVENTS: {
     readonly show: "dropdown.show";
@@ -11,8 +10,3 @@ export declare const DROPDOWN_EVENTS: {
 export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
 export declare const DROPDOWN_CLASS = "dropdown";
 export declare const DROPDOWN_CONTENT_CLASS: string;
-export declare const DROPDOWN_TOGGLER_CLASS: string;
-export declare const DROPDOWN_BACKDROP_CLASS: string;
-export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
-export declare const DROPDOWN_CONTENT_SHOW: string;
-export declare const DROPDOWN_CONTENT_HIDE: string;

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

@@ -2,7 +2,6 @@ const DROPDOWN_NAME = 'dropdown';
 const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
 const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
 const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
-const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
 const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
 const DROPDOWN_EVENT = 'dropdown';
 const DROPDOWN_EVENTS = {
@@ -11,11 +10,7 @@ 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`;
 
-export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_BACKDROP_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
+export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_NAME, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_NAME };
 //# sourceMappingURL=dropdown_constants.js.map

package/build/esm/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;"}
+{"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;"}

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

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BtnController } from '../../controllers/btn_controller.js';
-import { DROPDOWN_TOGGLER_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
+import { DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
 import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 
 let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -19,7 +19,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
             this._toggleElementAriaController.toggleAriaExpandedAttribute();
         };
         this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
-        this.className = `${DROPDOWN_TOGGLER_CLASS} ${this.className}`;
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/phoenix/src/components/form_controls/control.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControl extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { FORM_CONTROLS_CSS_CLASSES } from './form_controls_constatns.js';
+
+let HControl = class HControl extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.control);
+    }
+};
+HControl = __decorate([
+    customElement('h-control')
+], HControl);
+
+export { HControl };
+//# sourceMappingURL=control.js.map

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

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

package/build/esm/packages/phoenix/src/components/form_controls/control_additional_content.d.ts

@@ -0,0 +1,6 @@
+import type { TControlAdditionalContentType } from "./form_controls_types";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControlAdditionalContent extends PhoenixLightLitElement {
+    type: TControlAdditionalContentType;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,25 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { CONTROL_ADDITIONAL_CONTENT_TYPES, FORM_CONTROLS_CSS_CLASSES, ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP } from './form_controls_constatns.js';
+
+let HControlAdditionalContent = class HControlAdditionalContent extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.type = CONTROL_ADDITIONAL_CONTENT_TYPES.text;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.additionalContent, ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP[this.type]);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HControlAdditionalContent.prototype, "type", void 0);
+HControlAdditionalContent = __decorate([
+    customElement('h-control-additional-content')
+], HControlAdditionalContent);
+
+export { HControlAdditionalContent };
+//# sourceMappingURL=control_additional_content.js.map

package/build/esm/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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form_controls/control_content.d.ts

@@ -0,0 +1,6 @@
+import type { TControlContentSize } from "./form_controls_types";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControlContent extends PhoenixLightLitElement {
+    size: TControlContentSize;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,25 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { CONTROL_CONTENT_SIZES, FORM_CONTROLS_CSS_CLASSES } from './form_controls_constatns.js';
+
+let HControlContent = class HControlContent extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.size = CONTROL_CONTENT_SIZES.full;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.control);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HControlContent.prototype, "size", void 0);
+HControlContent = __decorate([
+    customElement('h-control-content')
+], HControlContent);
+
+export { HControlContent };
+//# sourceMappingURL=control_content.js.map

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

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

package/build/esm/packages/phoenix/src/components/form_controls/control_element.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControlElement extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { FORM_CONTROLS_CSS_CLASSES } from './form_controls_constatns.js';
+
+let HControlElement = class HControlElement extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.controlElement);
+    }
+};
+HControlElement = __decorate([
+    customElement('h-control-element')
+], HControlElement);
+
+export { HControlElement };
+//# sourceMappingURL=control_element.js.map

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

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

package/build/esm/packages/phoenix/src/components/form_controls/control_errors.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControlErrors extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/form_controls/control_errors.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element';
+import { FORM_CONTROLS_CSS_CLASSES } from '@phoenixRoot/components/form_controls/form_controls_constatns';
+let HControlErrors = class HControlErrors extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.controlErrors);
+    }
+};
+HControlErrors = __decorate([
+    customElement('h-control-errors')
+], HControlErrors);
+export { HControlErrors };
+//# sourceMappingURL=control_errors.js.map

package/build/esm/packages/phoenix/src/components/form_controls/control_errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_errors.js","sourceRoot":"","sources":["../../../../../../../src/components/form_controls/control_errors.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,+DAA+D,CAAC;AAG1G,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAC/C,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;CACJ,CAAA;AANY,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAM1B;SANY,cAAc"}

package/build/esm/packages/phoenix/src/components/form_controls/control_label.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HControlLabel extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { FORM_CONTROLS_CSS_CLASSES } from './form_controls_constatns.js';
+
+let HControlLabel = class HControlLabel extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FORM_CONTROLS_CSS_CLASSES.controlLabel);
+    }
+};
+HControlLabel = __decorate([
+    customElement('h-control-label')
+], HControlLabel);
+
+export { HControlLabel };
+//# sourceMappingURL=control_label.js.map

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

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

package/build/esm/packages/phoenix/src/components/form_controls/form_controls_constatns.d.ts

@@ -0,0 +1,21 @@
+export declare const CONTROL_CONTENT_SIZES: {
+    readonly auto: "auto";
+    readonly full: "full";
+    readonly half: "half";
+    readonly quarter: "quarter";
+    readonly threeQuarters: "three-quarters";
+};
+export declare const FORM_CONTROLS_CSS_CLASSES: {
+    readonly control: "control";
+    readonly controlContent: "control__content";
+    readonly controlElement: "control__element";
+    readonly controlLabel: "control__label";
+    readonly controlErrors: "control__errors";
+    readonly additionalContent: "control__additional-content";
+};
+export declare const CONTROL_ADDITIONAL_CONTENT_TYPES: {
+    readonly text: "text";
+};
+export declare const ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP: {
+    readonly text: "control__additional-content_type-text";
+};

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

@@ -0,0 +1,25 @@
+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`
+};
+
+export { ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP, CONTROL_ADDITIONAL_CONTENT_TYPES, CONTROL_CONTENT_SIZES, FORM_CONTROLS_CSS_CLASSES };
+//# sourceMappingURL=form_controls_constatns.js.map

package/build/esm/packages/phoenix/src/components/form_controls/form_controls_constatns.js.map

@@ -0,0 +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;"}

package/build/esm/packages/phoenix/src/components/form_controls/form_controls_types.d.ts

@@ -0,0 +1,4 @@
+import { Any } from 'ts-toolbelt';
+import { CONTROL_ADDITIONAL_CONTENT_TYPES, CONTROL_CONTENT_SIZES } from "./form_controls_constatns";
+export declare type TControlAdditionalContentType = Any.Keys<typeof CONTROL_ADDITIONAL_CONTENT_TYPES>;
+export declare type TControlContentSize = Any.Keys<typeof CONTROL_CONTENT_SIZES>;

package/build/esm/packages/phoenix/src/components/form_controls/form_controls_types.js

@@ -0,0 +1,3 @@
+import 'ts-toolbelt';
+import '@phoenixRoot/components/form_controls/form_controls_constatns';
+//# sourceMappingURL=form_controls_types.js.map

package/build/esm/packages/phoenix/src/components/form_controls/form_controls_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form_controls_types.js","sourceRoot":"","sources":["../../../../../../../src/components/form_controls/form_controls_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAwE,+DAA+D,CAAC"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -12,6 +12,11 @@ export { HModalBody } from './components/modal/modal_body';
 export { HModalFooter } from './components/modal/modal_footer';
 export { HModalHeader } from './components/modal/modal_header';
 export { HModalClose } from './components/modal/modal_close';
+export { HControl } from './components/form_controls/control';
+export { HControlContent } from './components/form_controls/control_content';
+export { HControlElement } from './components/form_controls/control_element';
+export { HControlLabel } from './components/form_controls/control_label';
+export { HControlAdditionalContent } from './components/form_controls/control_additional_content';
 export { BtnController } from './controllers/btn_controller';
 export { HDropdown } from './components/dropdown/dropdown';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler';

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

@@ -11,6 +11,11 @@ export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';
 export { HModalHeader } from './components/modal/modal_header.js';
 export { HModalClose } from './components/modal/modal_close.js';
+export { HControl } from './components/form_controls/control.js';
+export { HControlContent } from './components/form_controls/control_content.js';
+export { HControlElement } from './components/form_controls/control_element.js';
+export { HControlLabel } from './components/form_controls/control_label.js';
+export { HControlAdditionalContent } from './components/form_controls/control_additional_content.js';
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { BtnController } from './controllers/btn_controller.js';
 export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';

package/build/esm/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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",

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

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const MOBILE_SCREEN_WIDTH = 575;
-
-exports.MOBILE_SCREEN_WIDTH = MOBILE_SCREEN_WIDTH;
-//# sourceMappingURL=global_constants.js.map

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

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

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.d.ts

@@ -1,11 +0,0 @@
-import { TemplateResult } from 'lit';
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
-export declare class HDropdownBackdrop extends PhoenixLightLitElement {
-    visible: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _show;
-    private _hide;
-    private _closeDropdown;
-    protected render(): TemplateResult;
-}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js

@@ -1,54 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { DROPDOWN_BACKDROP_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS } from '@phoenixRoot/components/dropdown/dropdown_constants';
-import { html } from 'lit';
-import './dropdown_types';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { property } from 'lit/decorators';
-let HDropdownBackdrop = class HDropdownBackdrop extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            this.visible = true;
-        };
-        this._hide = () => {
-            this.visible = false;
-        };
-        this._closeDropdown = () => {
-            const dropdowns = document.querySelectorAll(DROPDOWN_CONTAINER_NAME);
-            dropdowns.forEach((dropdown) => {
-                const opened = dropdown.getAttribute('opened');
-                if (opened !== null)
-                    dropdown.hide();
-            });
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(DROPDOWN_EVENTS.show, this._show);
-        document.addEventListener(DROPDOWN_EVENTS.hide, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(DROPDOWN_EVENTS.show, this._show);
-        document.removeEventListener(DROPDOWN_EVENTS.hide, this._hide);
-    }
-    render() {
-        return html ` <div
-            aria-hidden="true"
-            ?hidden="${!this.visible}"
-            @click="${this._closeDropdown}"
-            class="${DROPDOWN_BACKDROP_CLASS}"
-        ></div>`;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HDropdownBackdrop.prototype, "visible", void 0);
-HDropdownBackdrop = __decorate([
-    phoenixCustomElement('h-dropdown-backdrop')
-], HDropdownBackdrop);
-export { HDropdownBackdrop };
-//# sourceMappingURL=dropdown_backdrop.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown_backdrop.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_backdrop.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AACxI,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAA0B,kBAAkB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QAEI,YAAO,GAAG,KAAK,CAAC;QAgBR,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;YAErE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC/C,IAAI,MAAM,KAAK,IAAI;oBAAG,QAAiC,CAAC,IAAI,EAAE,CAAC;YACnE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IAUN,CAAC;IAvCU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACnE,CAAC;IAmBS,MAAM;QACZ,OAAO,IAAI,CAAA;;uBAEI,CAAC,IAAI,CAAC,OAAO;sBACd,IAAI,CAAC,cAAc;qBACpB,uBAAuB;gBAC5B,CAAC;IACb,CAAC;CACJ,CAAA;AAzCG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;kDACZ;AAFP,iBAAiB;IAD7B,oBAAoB,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CA2C7B;SA3CY,iBAAiB"}

package/build/esm/packages/phoenix/src/global_constants.d.ts

@@ -1 +0,0 @@
-export declare const MOBILE_SCREEN_WIDTH = 575;

package/build/esm/packages/phoenix/src/global_constants.js

@@ -1,4 +0,0 @@
-const MOBILE_SCREEN_WIDTH = 575;
-
-export { MOBILE_SCREEN_WIDTH };
-//# sourceMappingURL=global_constants.js.map

package/build/esm/packages/phoenix/src/global_constants.js.map

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