@shoper/phoenix_design_system 0.10.1-1 → 0.11.0-1

package/build/cjs/packages/phoenix/external/classnames/index.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _commonjsHelpers = require('../../../../_virtual/_commonjsHelpers.js');
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if ( module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+exports.default = classnames;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/phoenix/external/classnames/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.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,92 +21,27 @@ 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 () => {
-            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`);
-                this.opened = true;
-                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._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
-            });
-            document.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
-            });
-            document.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(() => {
-                this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
-                    ? this._positionController.disableRelativePositioning()
-                    : this._positionController.position();
+                this.opened && this._positionController.position();
             });
         };
     }
@@ -119,17 +52,12 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
             this.$dropdownToggler = this.querySelector(dropdown_constants.DROPDOWN_TOGGLER_NAME);
-        const $nestedDropdown = this.$dropdownContent.querySelector(dropdown_constants.DROPDOWN_CONTAINER_NAME);
-        if ($nestedDropdown && !this.$nestedDropdownContentElements)
-            this.$nestedDropdownContentElements = [...$nestedDropdown.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
         if (!this._positionController)
             this._positionController = new relative_position_controller.RelativePositionController({
                 host: this,
                 direction: this.direction,
                 relativeElement: this.$dropdownToggler,
-                elementToPosition: this.$dropdownContent,
-                shouldDisablePositioning: () => window.innerWidth < global_constants.BREAKPOINTS.xs,
-                portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME]
+                elementToPosition: this.$dropdownContent
             });
         if (!this._clickOutsideController)
             this._clickOutsideController = new click_outside_controller.ClickOutsideController({
@@ -137,11 +65,17 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
                 container: this,
                 name: this.name
             });
-        if (this.toggleOnHover && !this.$hoverableDropdownContentElements) {
-            this.$hoverableDropdownContentElements = [...this.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
-        }
         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,43 +84,22 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
             document.body.appendChild($portalTarget);
         }
     }
-    _setupListeners() {
+    _handleClickOutside() {
         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(ev) {
-        var _a, _b, _c;
         if (!this.opened)
             return;
-        const target = ev.detail.target;
-        const clickedWithinNestedDropdown = (_a = this.$nestedDropdownContentElements) === null || _a === void 0 ? void 0 : _a.find((element) => element.contains(target));
-        const shouldHideElements = !((_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.contains(target) && !clickedWithinNestedDropdown;
-        if (shouldHideElements) {
-            this.hide();
-            (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
-        }
-    }
-    _isHoveredWithinDropdown(element) {
-        const $closestDropdownContent = element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
-        const isDescendantOfDropdown = element.closest(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
-        const isDescendantOfContent = this.$dropdownContent &&
-            $closestDropdownContent !== null &&
-            !!this.$hoverableDropdownContentElements.find((content) => content.name === $closestDropdownContent.name);
-        return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
+        this.hide();
+        (_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)
-            document.removeEventListener('mouseover', this._hoverToggle);
-        if (this.opened) {
-            this.opened = false;
-            this._dispatchHideDropdownEvent();
+        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() {
         super.render();
@@ -214,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;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_content.js

@@ -4,7 +4,6 @@ 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 dropdown_constants = require('./dropdown_constants.js');
@@ -12,7 +11,6 @@ var dropdown_constants = require('./dropdown_constants.js');
 exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
-        this.name = '';
         this.setAttribute('role', 'menu');
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
         this.className = `${dropdown_constants.DROPDOWN_CONTENT_CLASS} ${this.className}`;
@@ -25,10 +23,6 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
         return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
     }
 };
-tslib_es6.__decorate([
-    decorators.property({ type: String }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HDropdownContent.prototype, "name", void 0);
 exports.HDropdownContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
     tslib_es6.__metadata("design:paramtypes", [])

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
+{"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;"}

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/checkbox/checkbox.js

@@ -0,0 +1,81 @@
+'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 phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var index = require('../../../../external/classnames/index.js');
+var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
+var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var checkbox_constants = require('./checkbox_constants.js');
+
+exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this.error = false;
+        this.partiallyChecked = false;
+        new control_props_sync_provider_controller.ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(control_props_sync_controller_constants.BASE_FORM_CONTROL_PROPS), ...Object.values(checkbox_constants.CHECKBOX_PROPS_TO_SYNC)]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkbox);
+        const cssClasses = index['default']({
+            [checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxDisabled]: this.disabled,
+            [checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxError]: this.error,
+            [checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxReadonly]: this.readonly
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HCheckbox.prototype, "id", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HCheckbox.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "checked", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "error", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckbox.prototype, "partiallyChecked", void 0);
+exports.HCheckbox = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-checkbox'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HCheckbox);
+//# sourceMappingURL=checkbox.js.map

package/build/cjs/packages/phoenix/src/components/{backdrop/backdrop.js.map → form/checkbox/checkbox.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/checkbox/checkbox_constants.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('lit/decorators');
+
+const baseCheckboxControlClass = 'checkbox';
+const CHECKBOX_CONTROL_CSS_CLASSES = {
+    checkbox: baseCheckboxControlClass,
+    checkboxError: `${baseCheckboxControlClass}_error`,
+    checkboxDisabled: `${baseCheckboxControlClass}_disabled`,
+    checkboxReadonly: `${baseCheckboxControlClass}_readonly`,
+    checkboxContent: `${baseCheckboxControlClass}__content`,
+    checkboxDescription: `${baseCheckboxControlClass}__description`,
+    checkboxControl: `${baseCheckboxControlClass}__control`,
+    checkboxInput: `${baseCheckboxControlClass}__input`,
+    checkboxPartiallyChecked: `${baseCheckboxControlClass}__input_partial-checked`,
+    checkboxLabel: `${baseCheckboxControlClass}__label`
+};
+const CHECKBOX_PROPS_TO_SYNC = {
+    checked: 'checked',
+    partiallyChecked: 'partiallyChecked'
+};
+const CHECKBOX_SLOTS = {
+    label: 'label',
+    description: 'description'
+};
+const CHECKBOX_CONTROL_EVENTS = {
+    change: 'change'
+};
+
+exports.CHECKBOX_CONTROL_CSS_CLASSES = CHECKBOX_CONTROL_CSS_CLASSES;
+exports.CHECKBOX_CONTROL_EVENTS = CHECKBOX_CONTROL_EVENTS;
+exports.CHECKBOX_PROPS_TO_SYNC = CHECKBOX_PROPS_TO_SYNC;
+exports.CHECKBOX_SLOTS = CHECKBOX_SLOTS;
+//# sourceMappingURL=checkbox_constants.js.map

package/build/cjs/packages/phoenix/src/{controllers/transition_controller/transition_controller.js.map → components/form/checkbox/checkbox_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;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;"}

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_content.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var checkbox_constants = require('./checkbox_constants.js');
+var label_constants = require('../label/label_constants.js');
+
+exports.HCheckboxContent = class HCheckboxContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxContent);
+    }
+    render() {
+        super.render();
+        return lit.html `
+            <label class="${label_constants.LABEL_CSS_CLASSES.label}" for="${this.id}">${this.getSlot(checkbox_constants.CHECKBOX_SLOTS.label)}</label>
+
+            ${this.hasSlot(checkbox_constants.CHECKBOX_SLOTS.description)
+            ? lit.html ` <div class="${checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxDescription}">${this.getSlot(checkbox_constants.CHECKBOX_SLOTS.description)}</div> `
+            : lit.nothing}
+        `;
+    }
+};
+exports.HCheckboxContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-checkbox-content'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HCheckboxContent);
+//# sourceMappingURL=checkbox_content.js.map

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/checkbox/checkbox_control.js

@@ -0,0 +1,101 @@
+'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 index = require('../../../../external/classnames/index.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var checkbox_constants = require('./checkbox_constants.js');
+
+exports.HCheckboxControl = class HCheckboxControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this.partiallyChecked = false;
+        this._handleChangeEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(checkbox_constants.CHECKBOX_CONTROL_EVENTS.change, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxControl);
+    }
+    render() {
+        super.render();
+        const checkboxInputClasses = index['default'](checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxInput, {
+            [checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxPartiallyChecked]: this.partiallyChecked
+        });
+        return lit.html `
+            <input
+                type="checkbox"
+                class="${checkboxInputClasses}"
+                id="${this.id}"
+                name="${this.name}"
+                value="${this.value}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                ?readonly="${this.readonly}"
+                ?hidden="${this.hidden}"
+                ?checked="${this.checked}"
+                @change="${this._handleChangeEvent}"
+            />
+
+            <label class="${checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxLabel}" for="${this.id}"></label>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HCheckboxControl.prototype, "id", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HCheckboxControl.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "checked", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HCheckboxControl.prototype, "partiallyChecked", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HCheckboxControl.prototype, "value", void 0);
+exports.HCheckboxControl = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-checkbox-control'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HCheckboxControl);
+//# sourceMappingURL=checkbox_control.js.map

package/build/cjs/packages/phoenix/src/components/{accordion/accordion_group.js.map → form/checkbox/checkbox_control.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}