@shoper/phoenix_design_system 1.11.11-2 → 1.11.11-21

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

@@ -15,13 +15,23 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
     private _hideItems;
     private _showAllItemsEvent;
     private _setupEvents;
+    private _setupCheckboxGroupEvents;
+    private _setupRadioGroupEvents;
+    private _setupColorClickEvents;
     private _handleColorClicked;
+    private _handleTabNavigation;
+    private _handleRadioNavigation;
+    private _focusOnSelectedColor;
+    private _handleChangeToNextColorItem;
+    private _handleChangeToPreviousColorItem;
+    private _handleColorChange;
     private _toggleColorItem;
     private _handleColorClickedForMultipleMode;
-    private _handleColorClickedForSingleMode;
+    private _handleColorChangeForSingleMode;
     private _toggleSelectedAttribute;
     private _isColorAlreadyExistInArray;
     private _removeExistingColorFromArray;
     private _dispatchColorChangeEvent;
+    disconnectedCallback(): void;
     protected render(): TemplateResult;
 }

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

@@ -1,12 +1,13 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
-import { ArrayUtils } from '@dreamcommerce/utilities';
+import { UiDomUtils, ArrayUtils } 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';
+import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import 'lit-html';
-import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_TAG_NAME, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
-import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
 
 let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     constructor() {
@@ -14,8 +15,87 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this.multiple = false;
         this.selectedColors = [];
         this.showMoreBtnText = 'Pokaż wszystkie kolory';
-        this._handleColorClicked = ({ target }) => {
-            const $colorItem = target;
+        this._setupEvents = () => {
+            if (this.getAttribute('role') === 'group') {
+                this._setupCheckboxGroupEvents();
+            }
+            else {
+                this._setupRadioGroupEvents();
+            }
+        };
+        this._setupCheckboxGroupEvents = () => {
+            this._setupColorClickEvents();
+        };
+        this._setupRadioGroupEvents = () => {
+            document.body.addEventListener('keydown', this._focusOnSelectedColor);
+            this.addEventListener('keydown', this._handleTabNavigation);
+            this.addEventListener('keyup', this._handleRadioNavigation);
+            this._setupColorClickEvents();
+        };
+        this._setupColorClickEvents = () => {
+            if (!this._$colorSwatchesChildren)
+                return;
+            this._$colorSwatchesChildren.forEach(($colorItem) => {
+                $colorItem.addEventListener('click', this._handleColorClicked);
+                new KeystrokesController({
+                    host: this,
+                    keys: [' '],
+                    callback: this._handleColorClicked,
+                    target: $colorItem
+                });
+            });
+        };
+        this._handleColorClicked = (ev) => {
+            ev.preventDefault();
+            const $colorItem = ev.target;
+            if ($colorItem.unclickable)
+                return;
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
+        };
+        this._handleTabNavigation = (ev) => {
+            if (ev.key !== 'Tab')
+                return;
+            ev.preventDefault();
+            if (ev.shiftKey) {
+                const $firstFocusableColor = UiDomUtils.getFocusableElement(this);
+                UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
+                return;
+            }
+            const $LastFocusableColor = UiDomUtils.getLastFocusableElement(this);
+            UiDomUtils.getNextFocusableElement($LastFocusableColor).focus();
+        };
+        this._handleRadioNavigation = (ev) => {
+            const changeToNextKeys = ['ArrowDown', 'ArrowRight'];
+            const changeToPreviousKeys = ['ArrowUp', 'ArrowLeft'];
+            if (!changeToNextKeys.includes(ev.key) && !changeToPreviousKeys.includes(ev.key))
+                return;
+            ev.preventDefault();
+            if (changeToNextKeys.includes(ev.key)) {
+                this._handleChangeToNextColorItem(ev);
+            }
+            if (changeToPreviousKeys.includes(ev.key)) {
+                this._handleChangeToPreviousColorItem(ev);
+            }
+        };
+        this._focusOnSelectedColor = (ev) => {
+            if (ev.key !== 'Tab' || this.multiple)
+                return;
+            if (ev.shiftKey) {
+                const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement(document.activeElement);
+                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
+                    ev.preventDefault();
+                    this.selectedColors[0].focus();
+                }
+                return;
+            }
+            const $nextFocusableElement = UiDomUtils.getNextFocusableElement(document.activeElement);
+            if (this.contains($nextFocusableElement) && this.selectedColors.length > 0) {
+                ev.preventDefault();
+                this.selectedColors[0].focus();
+            }
+        };
+        this._handleColorChange = ($colorItem) => {
             this._toggleColorItem($colorItem);
             this._dispatchColorChangeEvent($colorItem);
         };
@@ -52,6 +132,8 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
+        this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
@@ -64,11 +146,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
     _hideItems(numberOfVisibleColors) {
-        var _a;
-        this._$colorSwatchesChildren = (_a = document.querySelector(COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
         if (!this._$colorSwatchesChildren)
             return;
-        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
+        this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
                 $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
             }
@@ -79,17 +159,40 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             var _a;
             if (!this._$colorSwatchesChildren)
                 return;
-            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
                 $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
             });
             (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
         });
     }
-    _setupEvents() {
-        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    _handleChangeToNextColorItem({ target }) {
+        const $colorItem = target;
+        const $nextFocusableElement = UiDomUtils.getNextFocusableElement($colorItem);
+        let $nextColorItem;
+        if (!this.contains($nextFocusableElement)) {
+            $nextColorItem = UiDomUtils.getFocusableElement(this);
+        }
+        else {
+            $nextColorItem = $nextFocusableElement;
+        }
+        $nextColorItem.focus();
+        this._handleColorChange($nextColorItem);
+    }
+    _handleChangeToPreviousColorItem({ target }) {
+        const $colorItem = target;
+        const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement($colorItem);
+        let $previousColorItem;
+        if (!this.contains($previousFocusableElement)) {
+            $previousColorItem = UiDomUtils.getLastFocusableElement(this);
+        }
+        else {
+            $previousColorItem = $previousFocusableElement;
+        }
+        $previousColorItem.focus();
+        this._handleColorChange($previousColorItem);
     }
     _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
     }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
@@ -97,17 +200,20 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
     }
-    _handleColorClickedForSingleMode($colorItem) {
+    _handleColorChangeForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
         this._toggleSelectedAttribute($colorItem);
-        if ($previouslySelected && $previouslySelected !== $colorItem)
+        if ($previouslySelected && $previouslySelected !== $colorItem) {
             $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
+            $previouslySelected.setAttribute('aria-checked', 'false');
+        }
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
             ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
             : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        $colorItem.setAttribute('aria-checked', 'true');
     }
     _isColorAlreadyExistInArray($colorItem) {
         return this.selectedColors.includes($colorItem);
@@ -116,6 +222,10 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
+    }
     render() {
         return html `
             ${this.getSlot('default')}

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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -1,5 +1,4 @@
 const colorSwatchesBaseCssClass = 'color-swatches';
-const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatches: colorSwatchesBaseCssClass,
@@ -12,5 +11,5 @@ const COLOR_SWATCHES_EVENT_NAMES = {
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 
-export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE, COLOR_SWATCHES_TAG_NAME };
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
 //# 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;"}
+{"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/form/search/search.d.ts

@@ -12,12 +12,8 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _searchContextObserver;
     private _searchInput;
     private _inputField;
-    private _searchForm;
-    private _id;
-    private _searchContentContainerId;
     private _searchResultsRef;
     private _searchHistoryRef;
-    private _searchMessageRef;
     private _shouldShowHistory;
     private _shouldShowResults;
     private _shouldShowMessage;
@@ -28,7 +24,6 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _historyContext;
     private _activeItemId;
     private _translations;
-    private _containerRole;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private _setupContext;
@@ -42,31 +37,18 @@ export declare class HSearch extends PhoenixLightLitElement {
     private _hideHistorySuggestionsAndResults;
     private _displayResults;
     private _handleToggleHistoryAndResults;
-    private _toggleSearchInputAttributes;
-    private _toggleSearchContainerAttributes;
+    private _toggleSearchInputAria;
     private _bindKeys;
-    private _handleSearchTabNavigation;
-    private _focusOnPreviousElementBeforeSearchInput;
-    private _focusOnNextElementAfterSearchInput;
-    private _preventScrollingOnSearchContentBrowsing;
-    private _handleForwardListFocus;
-    private _handleForwardGridFocus;
-    private _handleForwardFocus;
-    private _handleMoveToInputField;
-    private _handleBackwardListFocus;
-    private _handleBackwardGridFocus;
-    private _handleBackwardFocus;
+    private _focusOutsideActiveItemsForward;
+    private _focusOutsideActiveItemsBackward;
+    private _getSearchItemsCount;
+    private _scroll;
     private _handleChooseSearchItem;
     private _resetSearchView;
-    private _setActiveItemId;
-    private _handleFocusOnInputWithCaretEnd;
-    private _handleFocusOnInputWithCaretStart;
-    private _handleWriteableCharacter;
     private _submitSearchPhrase;
     private _hideSuggesterOnClickOutside;
     private _switchTypeOfSearchView;
     private _isSuggesterLayerVisible;
-    private _preventSubmitOnSearchClear;
     private _handleOpenSearch;
     private _handleOpenSearchWithKeyboard;
     protected render(): TemplateResult;