@shoper/phoenix_design_system 1.2.13 → 1.2.14

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js

@@ -8,7 +8,6 @@ var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
-var color_swatches_constants = require('../color_swatches_constants.js');
 var color_item_constants = require('./color_item_constants.js');
 
 exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -16,7 +15,6 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         super();
         this.disabled = false;
         this.selected = false;
-        this.small = false;
         this.unclickable = false;
         this._dispatchClickedEvent = () => {
             this.dispatchEvent(new Event(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, {
@@ -32,8 +30,11 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         this._syncAriaPressed();
         this.setAttribute('aria-label', this.label ? this.label : this.color);
         this.unclickable && this.removeAttribute('tabindex');
-        this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
-        this.small && this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
+        this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
+        if (this.size)
+            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
     }
     attributeChangedCallback(name, value, newValue) {
         super.attributeChangedCallback(name, value, newValue);
@@ -58,6 +59,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorItem.prototype, "color", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "value", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
@@ -71,9 +76,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorItem.prototype, "selected", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HColorItem.prototype, "small", void 0);
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "size", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_item/color_item_constants.js

@@ -2,11 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const colorItemBaseCssClass = 'color-item';
 const COLOR_ITEM_EVENT_NAMES = {
     selected: 'colorItemSelected'
 };
+const COLOR_ITEM_SIZES = {
+    s: 's',
+    xs: 'xs'
+};
+const COLOR_ITEM_CSS_CLASSES = {
+    colorItem: colorItemBaseCssClass,
+    [COLOR_ITEM_SIZES.s]: `${colorItemBaseCssClass}_s`,
+    [COLOR_ITEM_SIZES.xs]: `${colorItemBaseCssClass}_xs`
+};
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
+exports.COLOR_ITEM_CSS_CLASSES = COLOR_ITEM_CSS_CLASSES;
 exports.COLOR_ITEM_EVENT_NAMES = COLOR_ITEM_EVENT_NAMES;
 exports.COLOR_ITEM_SELECTED_ATTRIBUTE = COLOR_ITEM_SELECTED_ATTRIBUTE;
+exports.COLOR_ITEM_SIZES = COLOR_ITEM_SIZES;
 //# sourceMappingURL=color_item_constants.js.map

package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item_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;"}
+{"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;"}

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

@@ -3,9 +3,12 @@
 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 utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+require('lit-html');
 var color_swatches_constants = require('./color_swatches_constants.js');
 var color_item_constants = require('./color_item/color_item_constants.js');
 var show_more_constants = require('./show-more/show_more_constants.js');
@@ -15,26 +18,52 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         super(...arguments);
         this.multiple = false;
         this.selectedColors = [];
+        this.showMoreBtnText = 'Pokaż wszystkie kolory';
         this._handleColorClicked = ({ target }) => {
             const $colorItem = target;
-            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
         };
-        this._dispatchColorSelectEvent = () => {
-            const detail = {
-                colors: this._setColorsDispatchValue(this.selectedColors)
-            };
-            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
+        this._dispatchColorChangeEvent = ($colorItem) => {
+            const colorsDetails = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
+                return {
+                    colors: [...colorsSoFar, color.color],
+                    values: [...colorsSoFar, color.value]
+                };
+            }, {
+                colors: [],
+                values: []
+            });
+            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, {
                 bubbles: true,
-                detail
+                detail: {
+                    ...colorsDetails,
+                    $colorItem
+                }
             }));
         };
     }
+    selectColors($colors) {
+        const colorsArr = utilities.ArrayUtils.makeAsArray($colors);
+        if (!colorsArr.length) {
+            this.clearAllColors();
+            return;
+        }
+        colorsArr.forEach(($color) => this._toggleColorItem($color));
+    }
+    clearAllColors() {
+        [...this.selectedColors].forEach(($color) => {
+            this._toggleColorItem($color);
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
         this._showAllItemsEvent();
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
+        this._$colors = [...this.querySelectorAll('h-color-item')];
     }
     _addCssClasses() {
         this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -59,12 +88,14 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     _setupEvents() {
         this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
+    _toggleColorItem($colorItem) {
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+    }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
             ? (this.selectedColors = [...this.selectedColors, $colorItem])
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
-        this._dispatchColorSelectEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -72,7 +103,6 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
-        this._dispatchColorSelectEvent();
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
@@ -86,15 +116,12 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
-    _setColorsDispatchValue(selectedColors) {
-        if (this.selectedColors.length > 1)
-            return this._getOnlyColorValues(selectedColors);
-        if (this.selectedColors.length === 1)
-            return selectedColors[0].color;
-        return '';
-    }
-    _getOnlyColorValues(selectedColors) {
-        return selectedColors.map((selectedColor) => selectedColor.color);
+    render() {
+        return lit.html `
+            ${this.getSlot('default')}
+            ${this._$colors.length > this.numberOfVisibleColors &&
+            lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`}
+        `;
     }
 };
 tslib_es6.__decorate([
@@ -106,9 +133,13 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Number)
 ], exports.HColorSwatches.prototype, "numberOfVisibleColors", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatches.prototype, "selectedColors", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'show-more-btn-text' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HColorSwatches.prototype, "showMoreBtnText", void 0);
 exports.HColorSwatches = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-color-swatches')
 ], exports.HColorSwatches);

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

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -3,16 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const colorSwatchesBaseCssClass = 'color-swatches';
-const colorItemBaseCssClass = 'color-item';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
-    colorItem: colorItemBaseCssClass,
-    colorItemSmall: `${colorItemBaseCssClass}_small`,
     colorSwatches: colorSwatchesBaseCssClass,
     colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    selected: 'colorSwatchesSelected',
+    change: 'change',
     markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';

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

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
@@ -197,12 +196,25 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
+            if (this.contentWidth === dropdown_constants.DROPDOWN_CONTENT_WIDTH.full)
+                this._setDropdownContentWidth(this._getDropdownContentWidth());
             requestAnimationFrame(() => {
                 this.opened && window.innerWidth < global_constants.BREAKPOINTS.xs
                     ? this._positionController.disableRelativePositioning()
                     : this._positionController.position();
             });
         };
+        this._setDropdownContentWidth = (width) => {
+            const $dropdown = this.$dropdownContent;
+            if (!$dropdown)
+                return;
+            if (!width) {
+                $dropdown.style.removeProperty('width');
+                return;
+            }
+            if (width)
+                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
+        };
         new keystrokes_controller.KeystrokesController({
             host: this,
             target: document.body,
@@ -312,6 +324,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
     }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -360,6 +375,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Number }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "offset", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, attribute: 'content-width' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDropdown.prototype, "contentWidth", void 0);
 tslib_es6.__decorate([
     decorators_js.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -21,7 +21,10 @@ const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
 const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
 const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
 const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
-const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
+const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
+const DROPDOWN_CONTENT_WIDTH = {
+    full: 'full'
+};
 
 exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
 exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
@@ -30,6 +33,7 @@ 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_CONTENT_WIDTH = DROPDOWN_CONTENT_WIDTH;
 exports.DROPDOWN_CSS_CLASS = DROPDOWN_CSS_CLASS;
 exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
 exports.DROPDOWN_NAME = DROPDOWN_NAME;

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

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js

@@ -5,7 +5,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 utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var index = require('../../../../external/classnames/index.js');
@@ -18,6 +17,18 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
         super(...arguments);
         this.selectedColors = [];
     }
+    selectColors(values) {
+        if (!this._$colorSwatches)
+            return;
+        const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
+        this._$colorSwatches.selectColors($colors);
+        this.requestUpdate();
+    }
+    clearAllColors() {
+        var _a;
+        (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
+        this.requestUpdate();
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -26,13 +37,28 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
         });
+        this._$colorSwatches = this.querySelector('h-color-swatches');
         if (cssClasses)
             this.classList.add(cssClasses);
+        this._getSelectedColors();
+    }
+    _getSelectedColors() {
+        this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
+    }
+    _getAllColorItems() {
+        return [...this.querySelectorAll('h-color-item[selected]')];
+    }
+    _getSelectedColorItems() {
+        return this._getAllColorItems().filter(($color) => $color.selected);
     }
     _setupEvents() {
-        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
-            const eventValue = event.detail.colors;
-            this.selectedColors = eventValue ? utilities.ArrayUtils.makeAsArray(eventValue) : [];
+        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
+            event.preventDefault();
+            this.selectedColors = event.detail.values;
+            this.dispatchEvent(new CustomEvent(color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: event.detail
+            }));
         });
     }
     render() {
@@ -48,7 +74,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlId", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String }),
+    decorators.property({ type: String, attribute: 'control-name' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlName", void 0);
 tslib_es6.__decorate([
@@ -64,7 +90,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorSwatchesControl.prototype, "error", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
 exports.HColorSwatchesControl = tslib_es6.__decorate([

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

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

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js

@@ -7,7 +7,11 @@ const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
     colorSwatchesControl: baseColorSwatchesControlClass,
     colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
     colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
+};
+const COLOR_SWATCHES_CONTROL_EVENT_NAMES = {
+    change: 'colorSwatchesControl.change'
 };
 
 exports.COLOR_SWATCHES_CONTROL_CSS_CLASSES = COLOR_SWATCHES_CONTROL_CSS_CLASSES;
+exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = COLOR_SWATCHES_CONTROL_EVENT_NAMES;
 //# sourceMappingURL=color_swatches_control_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -19,6 +19,10 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
     constructor() {
         super(...arguments);
         this.type = input_constants.INPUT_CONTROL_TYPES.file;
+        this.labelText = 'Wgraj plik';
+        this.labelIconName = 'icon-upload';
+        this.removeButtonText = 'Usuń plik';
+        this.removeButtonIconName = 'icon-x';
         this._$fileInputRef = ref_js.createRef();
         this._handleChangeEvent = (event) => {
             const filesList = this._getFiles(event);
@@ -63,6 +67,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
         super.connectedCallback();
         this._addEventListeners();
         const cssClasses = index['default']({
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -95,7 +100,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
-            ? lit.html `<h-file
+            ? lit.html ` <h-file
                       name="${this._file.name}"
                       id="${this._file.id}"
                       remove-button-text="${this.removeButtonText}"

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

@@ -1 +1 @@
-{"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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/radio/radio_constants.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const baseRadioControlClass = 'radio';
+const baseRadioBoxControlClass = 'radio-box';
 const RADIO_CONTROL_CSS_CLASSES = {
     radio: baseRadioControlClass,
     radioError: `${baseRadioControlClass}_error`,
@@ -12,7 +13,13 @@ const RADIO_CONTROL_CSS_CLASSES = {
     radioDescription: `${baseRadioControlClass}__description`,
     radioControl: `${baseRadioControlClass}__control`,
     radioInput: `${baseRadioControlClass}__input`,
-    radioLabel: `${baseRadioControlClass}__label`
+    radioLabel: `${baseRadioControlClass}__label`,
+    radioBox: baseRadioBoxControlClass,
+    radioBoxDisabled: `${baseRadioBoxControlClass}_disabled`
+};
+const RADIO_CONTROL_VARIANTS = {
+    classic: 'classic',
+    box: 'box'
 };
 const RADIO_SLOTS = {
     label: 'label',
@@ -24,5 +31,6 @@ const RADIO_CONTROL_EVENTS = {
 
 exports.RADIO_CONTROL_CSS_CLASSES = RADIO_CONTROL_CSS_CLASSES;
 exports.RADIO_CONTROL_EVENTS = RADIO_CONTROL_EVENTS;
+exports.RADIO_CONTROL_VARIANTS = RADIO_CONTROL_VARIANTS;
 exports.RADIO_SLOTS = RADIO_SLOTS;
 //# sourceMappingURL=radio_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/radio/radio_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;"}
+{"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/select/components/option/select_option.js

@@ -15,14 +15,9 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         super(...arguments);
         this._dispatchClickedEvent = () => {
-            if (this.disabled)
+            if (this.disabled && !this.clickable)
                 return;
-            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, {
-                bubbles: true,
-                detail: {
-                    $option: this
-                }
-            }));
+            this._dispatchEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked);
         };
     }
     connectedCallback() {
@@ -42,6 +37,19 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
         super.updated(changedProperties);
         if (changedProperties.has('selected'))
             this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+        if (changedProperties.has('inactive') || changedProperties.has('hidden') || changedProperties.has('disabled'))
+            this._dispatchSelectUpdated();
+    }
+    _dispatchSelectUpdated() {
+        this._dispatchEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated);
+    }
+    _dispatchEvent(eventName) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {
+                $option: this
+            }
+        }));
     }
     _addSelectedIcon() {
         this._$checkedIcon = document.createElement('h-icon');
@@ -70,6 +78,14 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean, reflect: true }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HOption.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "inactive", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "clickable", void 0);
 exports.HOption = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option)
 ], exports.HOption);

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_components_constatns.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const SELECT_OPTION_EVENT_NAMES = {
-    clicked: 'selectOption.clicked'
+    clicked: 'selectOption.clicked',
+    updated: 'selectOption.updated'
 };
 const SELECT_OPTIONS_EVENT_NAMES = {
-    clicked: 'selectOptions.clicked'
+    clicked: 'selectOptions.clicked',
+    updated: 'selectOptions.updated'
 };
 const SELECT_SEARCH_EVENT_NAMES = {
     search: 'selectSearch.search'

package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js

@@ -12,16 +12,23 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
     constructor() {
         super();
         this._dispatchClickedEvent = ({ detail }) => {
-            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, detail.$option);
+        };
+        this._dispatchUpdatedEvent = ({ detail }) => {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.updated, detail.$option);
+        };
+        this._dispatchEvent = (eventName, $option) => {
+            this.dispatchEvent(new CustomEvent(eventName, {
                 bubbles: true,
                 detail: {
-                    $option: detail.$option
+                    $option
                 }
             }));
         };
         this.setAttribute('role', 'listbox');
         utilities.UiDomUtils.makeNavigable(this);
         this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+        this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
     }
 };
 exports.HOptions = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;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,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}