@shoper/phoenix_design_system 1.2.13 → 1.2.14

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

@@ -36,14 +36,14 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _focusElementAfterSelectOpened;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
-    firstUpdated(props: PropertyValues): void;
-    private _setDropdownContentWidth;
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;
     private _appendNewHTMLOption;
+    updateOptionAriaAttribute($option: HOption): void;
     private _removeHTMLOptions;
     private _handleOptionClicked;
+    private _handleOptionUpdated;
     private _selectOption;
     private _handleSearch;
     private _handleDropdownHidden;
@@ -56,7 +56,6 @@ export declare class HSelect extends PhoenixLightLitElement {
     replace(options: SelectOption[]): void;
     disconnectedCallback(): void;
     private _handleResize;
-    private _getDropdownContentWidth;
     private _getClonedPlaceholderElement;
     private _searchNoResult;
     protected render(): TemplateResult;

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

@@ -12,7 +12,6 @@ import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import { BREAKPOINTS } from '../../../global_constants.js';
 import { HDropdownContent } from '../../dropdown/dropdown_content.js';
 import { HDropdownToggler } from '../../dropdown/dropdown_toggler.js';
 import debounce_1 from '../../../../../../external/lodash/debounce.js';
@@ -40,17 +39,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
-        this._setDropdownContentWidth = (width) => {
-            const $dropdown = this._$dropdownContent.value;
-            if (!$dropdown)
-                return;
-            if (!width) {
-                $dropdown.style.removeProperty('width');
-                return;
-            }
-            if (width)
-                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
-        };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
@@ -61,7 +49,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
                 this._removeHTMLOptions(options.map((option) => option.value));
-            options.forEach((option, index) => {
+            options
+                .filter((option) => !option.inactive)
+                .forEach((option, index) => {
                 const { selected, value } = option;
                 const $option = this._$options[value];
                 if (!$option) {
@@ -71,12 +61,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                this.updateOptionAriaAttribute($option);
             });
         };
         this._handleOptionClicked = (event) => {
             this._selectOption(event.detail.$option.value);
         };
+        this._handleOptionUpdated = ({ detail }) => {
+            const $option = detail.$option;
+            this._selectController.updateOption($option.value, {
+                inactive: $option.inactive,
+                hidden: $option.hidden
+            });
+        };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
             this.opened = false;
@@ -92,11 +89,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             this._dispatchChangeEvent();
         };
         this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
+            this.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
-            this._setDropdownContentWidth(this._getDropdownContentWidth());
         }, SELECT_RESIZE_DEBOUNCE_TIME);
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
@@ -115,11 +113,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     set selectedIndex(index) {
         const option = Object.values(this._$options)[index];
-        if (!option) {
-            this._selectController.deselectAll();
-            return;
-        }
-        this._selectOption(option.value);
+        option ? this._selectOption(option.value) : this._selectController.deselectAll();
+        Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
     }
     get selectedOptions() {
         var _a;
@@ -190,10 +185,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
         }
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._setDropdownContentWidth(this._getDropdownContentWidth());
-    }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -206,10 +197,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const { value, selected } = option;
         const $option = SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+            this.updateOptionAriaAttribute($option);
         this._$options[value] = $option;
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
+    updateOptionAriaAttribute($option) {
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+    }
     _removeHTMLOptions(optionsValues) {
         this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
     }
@@ -242,11 +238,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
+        this._$options = {};
         window.removeEventListener('resize', this._handleResize);
     }
-    _getDropdownContentWidth() {
-        return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
-    }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
     }
@@ -263,6 +257,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 @dropdown.hidden=${this._handleDropdownHidden}
                 name="${this.controlName}$"
                 offset=${this.offset}
+                content-width="full"
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
@@ -294,6 +289,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 : ''}"
                                   ${ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
+                                  @selectOptions.updated=${this._handleOptionUpdated}
                               >
                                   ${this.getSlot(SELECT_SLOT_NAMES.content)}
                               </h-options>

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

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

@@ -48,6 +48,7 @@ export { HRadioContent } from './components/form/radio/radio_content';
 export { HRadioControl } from './components/form/radio/radio_control';
 export * from './components/form/radio/radio_types';
 export * from './components/form/radio/radio_constants';
+export { RADIO_CONTROL_VARIANTS, RADIO_CONTROL_CSS_CLASSES } from "./components/form/radio/radio_constants";
 export { HTextarea } from './components/form/textarea/textarea';
 export { HTextareaControl } from './components/form/textarea/textarea_control';
 export * from './components/form/textarea/textarea_types';
@@ -77,6 +78,8 @@ export { HColorSwatchesControl } from './components/form/color_swatches_control/
 export { HColorSwatches } from './components/color_swatches/color_swatches';
 export { HColorItem } from './components/color_swatches/color_item/color_item';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more';
+export { TColorSwatchesControlChangeEventDetail } from "./components/color_swatches/color_swatches_types";
+export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from "./components/form/color_swatches_control/color_swatches_control_constants";
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
 export * from './controllers/visibility_controller/visibility_controller_types';
 export { HSlider } from './components/slider/slider';

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

@@ -49,7 +49,7 @@ export { SWITCH_CONTROL_CSS_CLASSES, SWITCH_CONTROL_EVENTS, SWITCH_SLOTS } from
 export { HSwitch } from './components/form/switch/switch.js';
 export { HSwitchContent } from './components/form/switch/switch_content.js';
 export { HSwitchControl } from './components/form/switch/switch_control.js';
-export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS } from './components/form/radio/radio_constants.js';
+export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_CONTROL_VARIANTS, RADIO_SLOTS } from './components/form/radio/radio_constants.js';
 export { HRadio } from './components/form/radio/radio.js';
 export { HRadioContent } from './components/form/radio/radio_content.js';
 export { HRadioControl } from './components/form/radio/radio_control.js';
@@ -65,9 +65,10 @@ export { HToggleButtonGroup } from './components/groups/toggle_button_group/togg
 export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
-export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
+export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
+export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';

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

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

package/package.json

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