@shoper/phoenix_design_system 1.2.13 → 1.2.15

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts

@@ -1,12 +1,11 @@
+export declare const COLOR_SWATCHES_TAG_NAME = "h-color-swatches";
 export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
 export declare const COLOR_SWATCHES_CSS_CLASSES: {
-    readonly colorItem: "color-item";
-    readonly colorItemSmall: "color-item_small";
     readonly colorSwatches: "color-swatches";
     readonly colorSwatchesItem: "color-swatches__color-item";
 };
 export declare const COLOR_SWATCHES_EVENT_NAMES: {
-    readonly selected: "colorSwatchesSelected";
+    readonly change: "change";
     readonly markDisabledItems: "markDisabledItems";
 };
 export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -1,17 +1,15 @@
 const colorSwatchesBaseCssClass = 'color-swatches';
-const colorItemBaseCssClass = 'color-item';
+const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
 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';
 
-export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE, COLOR_SWATCHES_TAG_NAME };
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.d.ts

@@ -1,3 +1,8 @@
-export interface IColorSelectValue {
-    colors: string | string[] | undefined;
-}
+import { HColorItem } from "./color_item/color_item";
+export declare type TSelectedColorsObject = {
+    colors: string[];
+    values: string[];
+};
+export declare type TColorSwatchesControlChangeEventDetail = TSelectedColorsObject & {
+    $colorItem: HColorItem;
+};

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js

@@ -1,2 +1,2 @@
-export {};
+import '@phoenixRoot/components/color_swatches/color_item/color_item';
 //# sourceMappingURL=color_swatches_types.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":"AAAA,OAA2B,8DAA8D,CAAC"}

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

@@ -3,6 +3,7 @@ import { TemplateResult } from 'lit-html';
 import { HDropdownContent } from './dropdown_content';
 import { HDropdownToggler } from './dropdown_toggler';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TDropdownContentWidth } from "./dropdown_types";
 export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
     opened: boolean;
     direction: TDropdownDirection;
@@ -10,6 +11,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     name: string;
     transition: string;
     offset: number;
+    contentWidth: TDropdownContentWidth;
     portalTarget: string;
     $dropdownToggler: HDropdownToggler | null;
     $dropdownContent: HDropdownContent | null;
@@ -45,6 +47,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     private _setupInitialDropdownProperties;
     isOpened: () => boolean;
     private _positionDropdownContent;
+    private _getDropdownContentWidth;
+    private _setDropdownContentWidth;
     disconnectedCallback(): void;
     render(): TemplateResult;
 }

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

@@ -1,5 +1,4 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
@@ -7,7 +6,7 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { html } from 'lit-html';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
-import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
+import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
@@ -193,12 +192,25 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         };
         this.isOpened = () => this.opened;
         this._positionDropdownContent = () => {
+            if (this.contentWidth === DROPDOWN_CONTENT_WIDTH.full)
+                this._setDropdownContentWidth(this._getDropdownContentWidth());
             requestAnimationFrame(() => {
                 this.opened && window.innerWidth < 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 KeystrokesController({
             host: this,
             target: document.body,
@@ -308,6 +320,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         if (!this._hasScrollableClassInitially)
             this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
     }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -356,6 +371,10 @@ __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "offset", void 0);
+__decorate([
+    property({ type: String, attribute: 'content-width' }),
+    __metadata("design:type", String)
+], HDropdown.prototype, "contentWidth", 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,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;"}
+{"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,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;AACA;AACA;"}

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

@@ -17,3 +17,6 @@ export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
 export declare const DROPDOWN_CONTENT_SHOW: string;
 export declare const DROPDOWN_CONTENT_HIDE: string;
 export declare const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = "toggleOnHover";
+export declare const DROPDOWN_CONTENT_WIDTH: {
+    readonly full: "full";
+};

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

@@ -17,7 +17,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'
+};
 
-export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME };
+export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_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;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;"}

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

@@ -1,5 +1,6 @@
 import { Any } from 'ts-toolbelt';
 import { VERTICAL_DIRECTIONS } from "../../controllers/relative_position_controller/relative_position_controller_constants";
+import { DROPDOWN_CONTENT_WIDTH } from "./dropdown_constants";
 export declare type TDropdownSelectors = {
     getDropdownPortalTargetName(): string;
     getDropdownContainerName(): string;
@@ -17,3 +18,4 @@ export declare type TDropdownHideEvent = Event & {
     };
 };
 export declare type TDropdownDirection = typeof VERTICAL_DIRECTIONS[Any.Keys<typeof VERTICAL_DIRECTIONS>];
+export declare type TDropdownContentWidth = Any.Keys<typeof DROPDOWN_CONTENT_WIDTH>;

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

@@ -1,3 +1,4 @@
 import 'ts-toolbelt';
 import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
+import '@phoenixRoot/components/dropdown/dropdown_constants';
 //# sourceMappingURL=dropdown_types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAoC,8FAA8F,CAAC"}
+{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAoC,8FAA8F,CAAC;AACnI,OAAuC,qDAAqD,CAAC"}

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.d.ts

@@ -7,7 +7,13 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     required: boolean;
     error: boolean;
     selectedColors: string[];
+    selectColors(values: string[]): void;
+    clearAllColors(): void;
+    private _$colorSwatches;
     connectedCallback(): void;
+    private _getSelectedColors;
+    private _getAllColorItems;
+    private _getSelectedColorItems;
     private _setupEvents;
     protected render(): TemplateResult | void;
 }

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

@@ -1,12 +1,11 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators';
-import { ArrayUtils } from '@dreamcommerce/utilities';
+import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import classnames from '../../../../external/classnames/index.js';
 import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
-import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
+import { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './color_swatches_control_constants.js';
 import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
 
 let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
@@ -14,6 +13,18 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
         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();
@@ -22,13 +33,28 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
             [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
             [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_EVENT_NAMES.selected, (event) => {
-            const eventValue = event.detail.colors;
-            this.selectedColors = eventValue ? ArrayUtils.makeAsArray(eventValue) : [];
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
+            event.preventDefault();
+            this.selectedColors = event.detail.values;
+            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: event.detail
+            }));
         });
     }
     render() {
@@ -44,7 +70,7 @@ __decorate([
     __metadata("design:type", String)
 ], HColorSwatchesControl.prototype, "controlId", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'control-name' }),
     __metadata("design:type", String)
 ], HColorSwatchesControl.prototype, "controlName", void 0);
 __decorate([
@@ -60,7 +86,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HColorSwatchesControl.prototype, "error", void 0);
 __decorate([
-    state(),
+    property(),
     __metadata("design:type", Array)
 ], HColorSwatchesControl.prototype, "selectedColors", void 0);
 HColorSwatchesControl = __decorate([

package/build/esm/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,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches_control/color_swatches_control_constants.d.ts

@@ -3,3 +3,6 @@ export declare const COLOR_SWATCHES_CONTROL_CSS_CLASSES: {
     readonly colorSwatchesControlDisabled: "color-swatches-control_disabled";
     readonly colorSwatchesControlError: "color-swatches-control_error";
 };
+export declare const COLOR_SWATCHES_CONTROL_EVENT_NAMES: {
+    readonly change: "colorSwatchesControl.change";
+};

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

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

package/build/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/radio/radio_constants.d.ts

@@ -8,6 +8,12 @@ export declare const RADIO_CONTROL_CSS_CLASSES: {
     readonly radioControl: "radio__control";
     readonly radioInput: "radio__input";
     readonly radioLabel: "radio__label";
+    readonly radioBox: "radio-box";
+    readonly radioBoxDisabled: "radio-box_disabled";
+};
+export declare const RADIO_CONTROL_VARIANTS: {
+    readonly classic: "classic";
+    readonly box: "box";
 };
 export declare const RADIO_SLOTS: {
     readonly label: "label";

package/build/esm/packages/phoenix/src/components/form/radio/radio_constants.js

@@ -1,4 +1,5 @@
 const baseRadioControlClass = 'radio';
+const baseRadioBoxControlClass = 'radio-box';
 const RADIO_CONTROL_CSS_CLASSES = {
     radio: baseRadioControlClass,
     radioError: `${baseRadioControlClass}_error`,
@@ -8,7 +9,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',
@@ -18,5 +25,5 @@ const RADIO_CONTROL_EVENTS = {
     change: 'change'
 };
 
-export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS };
+export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_CONTROL_VARIANTS, RADIO_SLOTS };
 //# sourceMappingURL=radio_constants.js.map

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

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts

@@ -5,12 +5,16 @@ export declare class HOption extends PhoenixLightLitElement {
     selected: boolean;
     disabled: boolean;
     hidden: boolean;
+    inactive: boolean;
+    clickable: boolean;
     private _btnController;
     private _$checkedIcon?;
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
     updated(changedProperties: PropertyValues): void;
+    private _dispatchSelectUpdated;
+    private _dispatchEvent;
     private _addSelectedIcon;
     private _removeSelectedIcon;
 }

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

@@ -11,14 +11,9 @@ let HOption = class HOption extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._dispatchClickedEvent = () => {
-            if (this.disabled)
+            if (this.disabled && !this.clickable)
                 return;
-            this.dispatchEvent(new CustomEvent(SELECT_OPTION_EVENT_NAMES.clicked, {
-                bubbles: true,
-                detail: {
-                    $option: this
-                }
-            }));
+            this._dispatchEvent(SELECT_OPTION_EVENT_NAMES.clicked);
         };
     }
     connectedCallback() {
@@ -38,6 +33,19 @@ let HOption = class HOption extends PhoenixLightLitElement {
         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_OPTION_EVENT_NAMES.updated);
+    }
+    _dispatchEvent(eventName) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {
+                $option: this
+            }
+        }));
     }
     _addSelectedIcon() {
         this._$checkedIcon = document.createElement('h-icon');
@@ -66,6 +74,14 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], HOption.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "inactive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "clickable", void 0);
 HOption = __decorate([
     phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.option)
 ], HOption);

package/build/esm/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,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_components_constatns.d.ts

@@ -1,8 +1,10 @@
 export declare const SELECT_OPTION_EVENT_NAMES: {
     readonly clicked: "selectOption.clicked";
+    readonly updated: "selectOption.updated";
 };
 export declare const SELECT_OPTIONS_EVENT_NAMES: {
     readonly clicked: "selectOptions.clicked";
+    readonly updated: "selectOptions.updated";
 };
 export declare const SELECT_SEARCH_EVENT_NAMES: {
     readonly search: "selectSearch.search";

package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js

@@ -1,8 +1,10 @@
 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/esm/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;"}
+{"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/esm/packages/phoenix/src/components/form/select/components/select_options.d.ts

@@ -2,4 +2,6 @@ import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_eleme
 export declare class HOptions extends PhoenixLightLitElement {
     constructor();
     private _dispatchClickedEvent;
+    private _dispatchUpdatedEvent;
+    private _dispatchEvent;
 }

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

@@ -8,16 +8,23 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
     constructor() {
         super();
         this._dispatchClickedEvent = ({ detail }) => {
-            this.dispatchEvent(new CustomEvent(SELECT_OPTIONS_EVENT_NAMES.clicked, {
+            this._dispatchEvent(SELECT_OPTIONS_EVENT_NAMES.clicked, detail.$option);
+        };
+        this._dispatchUpdatedEvent = ({ detail }) => {
+            this._dispatchEvent(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');
         UiDomUtils.makeNavigable(this);
         this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+        this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
     }
 };
 HOptions = __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/controllers/base_select_controller.d.ts

@@ -20,6 +20,7 @@ export declare abstract class BaseSelectController implements ISelectController,
     replace(options: SelectOption[]): void;
     deselectAll(): void;
     deselect(option: SelectOption): void;
+    updateOption(value: string, newOptions: Partial<SelectOption>): void;
     filter(value: string): void;
     protected requestUpdate(): void;
     getOption(selectValue: string): SelectOption | undefined;

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js

@@ -59,8 +59,18 @@ class BaseSelectController {
         this.selectedOptions$.notify([]);
         this.requestUpdate();
     }
+    updateOption(value, newOptions) {
+        const option = this.getOption(value);
+        if (!option)
+            return;
+        Object.entries(newOptions).forEach(([key, value]) => {
+            option[key] = value;
+        });
+        this.requestUpdate();
+    }
     filter(value) {
-        const selectOptions = this.options$.getValue();
+        var _a;
+        const selectOptions = (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.inactive);
         if (!selectOptions)
             return;
         const filtered = SearchingUtils.fuzzySearch(value, selectOptions, 'content');

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.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;"}
+{"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;"}