@shoper/phoenix_design_system 1.17.8 → 1.17.10

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

@@ -12,11 +12,13 @@ var keystrokes_controller = require('../../controllers/keystrokes_controller/key
 require('lit-html');
 var color_swatches_constants = require('./color_swatches_constants.js');
 var color_item_constants = require('./color_item/color_item_constants.js');
+var color_item = require('./color_item/color_item.js');
 
 exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.multiple = false;
+        this.devVisualSubcategories = false;
         this.selectedColors = [];
         this.showMoreBtnText = 'Pokaż wszystkie kolory';
         this._setupEvents = () => {
@@ -140,8 +142,10 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
-        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
-        this._showAllItemsEvent();
+        if (!this.devVisualSubcategories) {
+            this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
+            this._showAllItemsEvent();
+        }
         this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
         this._$colors = [...this.querySelectorAll('h-color-item')];
     }
@@ -154,7 +158,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             return;
         this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                $colorSwatchesChild.setAttribute('hidden', '');
             }
         });
     }
@@ -164,9 +168,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             if (!this._$colorSwatchesChildren)
                 return;
             this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+                $colorSwatchesChild.removeAttribute('hidden');
             });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
         });
     }
     _handleChangeToNextColorItem({ target }) {
@@ -180,7 +184,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             $nextColorItem = $nextFocusableElement;
         }
         $nextColorItem.focus();
-        this._handleColorChange($nextColorItem);
+        if ($nextColorItem instanceof color_item.HColorItem) {
+            this._handleColorChange($nextColorItem);
+        }
     }
     _handleChangeToPreviousColorItem({ target }) {
         const $colorItem = target;
@@ -193,7 +199,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             $previousColorItem = $previousFocusableElement;
         }
         $previousColorItem.focus();
-        this._handleColorChange($previousColorItem);
+        if ($previousColorItem instanceof color_item.HColorItem) {
+            this._handleColorChange($previousColorItem);
+        }
     }
     _toggleColorItem($colorItem) {
         this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
@@ -231,18 +239,24 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         document.body.removeEventListener('keydown', this._focusOnSelectedColor);
     }
     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>`
-            : lit.nothing}
-        `;
+        if (!this.devVisualSubcategories) {
+            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>`
+                : lit.nothing}
+            `;
+        }
     }
 };
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorSwatches.prototype, "multiple", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'dev-visual-subcategories' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorSwatches.prototype, "devVisualSubcategories", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Number, attribute: 'number-of-visible-colors' }),
     tslib_es6.__metadata("design:type", Number)

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

@@ -12,11 +12,9 @@ const COLOR_SWATCHES_EVENT_NAMES = {
     change: 'change',
     markDisabledItems: 'markDisabledItems',
     showMore: 'showMore'
-};
-const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+};
 
 exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
 exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
 exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
-exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
 //# sourceMappingURL=color_swatches_constants.js.map

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

package/build/cjs/packages/phoenix/src/components/form/textarea/textarea_control.js

@@ -35,8 +35,8 @@ exports.HTextareaControl = class HTextareaControl extends phoenix_light_lit_elem
                 id="${ifDefined_js.ifDefined(this.controlId)}"
                 name="${ifDefined_js.ifDefined(this.controlName)}"
                 placeholder="${ifDefined_js.ifDefined(this.placeholder)}"
+                aria-required="${this.required ? 'true' : 'false'}"
                 ?disabled="${this.disabled}"
-                ?required="${this.required}"
                 ?readonly="${this.readonly}"
                 ?hidden="${this.hidden}"
                 @input="${this._handleInputEvent}"

package/build/cjs/packages/phoenix/src/components/show-more/show_more.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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 global_constants = require('../../global_constants.js');
+var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var throttle = require('../../../../../external/lodash/throttle.js');
+var show_more_constants = require('./show_more_constants.js');
+
+exports.HShowMore = class HShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._$showMoreButton = null;
+        this._showMore = () => {
+            this._showAllItems();
+            this._hideButton();
+            this._focusNextItem();
+        };
+        this._onResize = throttle['default'](() => {
+            if (window.innerWidth > global_constants.BREAKPOINTS.xs) {
+                this._showAllItems();
+                this._hideButton();
+                window.removeEventListener('resize', this._onResize);
+            }
+        }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._$showMoreButton = this.querySelector('h-show-more-button');
+        this._$items = [...this.querySelectorAll(`[${show_more_constants.SHOW_MORE_ITEM_ATTRIBUTE}]`)];
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMore);
+        this._updateComponentVisibility();
+        this._setupListeners();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('showAll')) {
+            this._showAllItems();
+            this._hideButton();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this._onResize);
+    }
+    _updateComponentVisibility() {
+        const hasOverflowItems = this._$items.length > this.count;
+        const isMobileView = window.innerWidth <= global_constants.BREAKPOINTS.xs;
+        const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
+        if (shouldBeActive) {
+            this._hideExcessItems();
+            this._showButton();
+        }
+        else {
+            this._hideButton();
+        }
+    }
+    _hideExcessItems() {
+        this._$items.forEach(($item, index) => {
+            $item.removeAttribute('hidden');
+            if (index >= this.count)
+                $item.setAttribute('hidden', '');
+        });
+    }
+    _showAllItems() {
+        this._$items.forEach(($item) => $item.removeAttribute('hidden'));
+    }
+    _hideButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
+    }
+    _showButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
+    }
+    _setupListeners() {
+        this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
+        if (this.mobileOnly && window.innerWidth <= global_constants.BREAKPOINTS.xs) {
+            window.addEventListener('resize', this._onResize);
+        }
+    }
+    _focusNextItem() {
+        const $nextItem = this._$items[this.count];
+        if (!$nextItem)
+            return;
+        const $firstFocusableElement = utilities.UiDomUtils.getFocusableElement($nextItem);
+        if ($firstFocusableElement) {
+            $firstFocusableElement.focus();
+            return;
+        }
+        if (!$nextItem.getAttribute('tabindex'))
+            $nextItem.setAttribute('tabindex', '-1');
+        $nextItem.focus();
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HShowMore.prototype, "count", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'mobile-only' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HShowMore.prototype, "mobileOnly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: 'show-all' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HShowMore.prototype, "showAll", void 0);
+exports.HShowMore = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-show-more')
+], exports.HShowMore);
+//# sourceMappingURL=show_more.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more.js.map

@@ -0,0 +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,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;"}

package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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 show_more_constants = require('./show_more_constants.js');
+
+exports.HShowMoreButton = class HShowMoreButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.emitCustomEvent(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchClickedEvent);
+        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMoreButton);
+    }
+};
+exports.HShowMoreButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-show-more-button'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HShowMoreButton);
+//# sourceMappingURL=show_more_button.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SHOW_MORE_CSS_CLASSES = {
+    showMore: 'show-more',
+    showMoreButton: 'show-more__button'
+};
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'showMore'
+};
+const SHOW_MORE_ITEM_ATTRIBUTE = 'show-more-item';
+
+exports.SHOW_MORE_CSS_CLASSES = SHOW_MORE_CSS_CLASSES;
+exports.SHOW_MORE_EVENT_NAMES = SHOW_MORE_EVENT_NAMES;
+exports.SHOW_MORE_ITEM_ATTRIBUTE = SHOW_MORE_ITEM_ATTRIBUTE;
+//# sourceMappingURL=show_more_constants.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -83,6 +83,7 @@ var toggle_button = require('./components/groups/toggle_button_group/toggle_butt
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
 var color_swatches_control_constants = require('./components/form/color_swatches_control/color_swatches_control_constants.js');
+var show_more_button = require('./components/show-more/show_more_button.js');
 var color_swatches = require('./components/color_swatches/color_swatches.js');
 var color_item = require('./components/color_swatches/color_item/color_item.js');
 var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
@@ -126,6 +127,7 @@ var toggle = require('./components/toggle/toggle.js');
 var toggle_button$1 = require('./components/toggle/toggle_button.js');
 var navigator_share = require('./components/navigator/navigator_share/navigator_share.js');
 var navigator_controller = require('./components/navigator/navigator_controller/navigator_controller.js');
+var show_more$1 = require('./components/show-more/show_more.js');
 
 
 
@@ -510,6 +512,12 @@ Object.defineProperty(exports, 'HBackdrop', {
 	}
 });
 exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES;
+Object.defineProperty(exports, 'HShowMoreButton', {
+	enumerable: true,
+	get: function () {
+		return show_more_button.HShowMoreButton;
+	}
+});
 Object.defineProperty(exports, 'HColorSwatches', {
 	enumerable: true,
 	get: function () {
@@ -755,4 +763,10 @@ Object.defineProperty(exports, 'NavigatorController', {
 		return navigator_controller.NavigatorController;
 	}
 });
+Object.defineProperty(exports, 'HShowMore', {
+	enumerable: true,
+	get: function () {
+		return show_more$1.HShowMore;
+	}
+});
 //# sourceMappingURL=index.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 import { TemplateResult } from 'lit-html';
 export declare class HColorSwatches extends PhoenixLightLitElement {
     multiple: boolean;
+    devVisualSubcategories: boolean;
     numberOfVisibleColors: number;
     selectedColors: HColorItem[];
     showMoreBtnText: string;
@@ -33,5 +34,5 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
     private _removeExistingColorFromArray;
     private _dispatchColorChangeEvent;
     disconnectedCallback(): void;
-    protected render(): TemplateResult;
+    protected render(): TemplateResult | void;
 }

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

@@ -6,13 +6,15 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
 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_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
 import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
+import { HColorItem } from './color_item/color_item.js';
 
 let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.multiple = false;
+        this.devVisualSubcategories = false;
         this.selectedColors = [];
         this.showMoreBtnText = 'Pokaż wszystkie kolory';
         this._setupEvents = () => {
@@ -136,8 +138,10 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this._$colorSwatchesChildren = [...this.children];
         this._setupEvents();
         this._addCssClasses();
-        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
-        this._showAllItemsEvent();
+        if (!this.devVisualSubcategories) {
+            this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
+            this._showAllItemsEvent();
+        }
         this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
         this._$colors = [...this.querySelectorAll('h-color-item')];
     }
@@ -150,7 +154,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             return;
         this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                $colorSwatchesChild.setAttribute('hidden', '');
             }
         });
     }
@@ -160,9 +164,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             if (!this._$colorSwatchesChildren)
                 return;
             this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+                $colorSwatchesChild.removeAttribute('hidden');
             });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
         });
     }
     _handleChangeToNextColorItem({ target }) {
@@ -176,7 +180,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             $nextColorItem = $nextFocusableElement;
         }
         $nextColorItem.focus();
-        this._handleColorChange($nextColorItem);
+        if ($nextColorItem instanceof HColorItem) {
+            this._handleColorChange($nextColorItem);
+        }
     }
     _handleChangeToPreviousColorItem({ target }) {
         const $colorItem = target;
@@ -189,7 +195,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             $previousColorItem = $previousFocusableElement;
         }
         $previousColorItem.focus();
-        this._handleColorChange($previousColorItem);
+        if ($previousColorItem instanceof HColorItem) {
+            this._handleColorChange($previousColorItem);
+        }
     }
     _toggleColorItem($colorItem) {
         this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
@@ -227,18 +235,24 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         document.body.removeEventListener('keydown', this._focusOnSelectedColor);
     }
     render() {
-        return html `
-            ${this.getSlot('default')}
-            ${this._$colors.length > this.numberOfVisibleColors
-            ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
-            : nothing}
-        `;
+        if (!this.devVisualSubcategories) {
+            return html `
+                ${this.getSlot('default')}
+                ${this._$colors.length > this.numberOfVisibleColors
+                ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
+                : nothing}
+            `;
+        }
     }
 };
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HColorSwatches.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'dev-visual-subcategories' }),
+    __metadata("design:type", Boolean)
+], HColorSwatches.prototype, "devVisualSubcategories", void 0);
 __decorate([
     property({ type: Number, attribute: 'number-of-visible-colors' }),
     __metadata("design:type", Number)

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

@@ -9,4 +9,3 @@ export declare const COLOR_SWATCHES_EVENT_NAMES: {
     readonly markDisabledItems: "markDisabledItems";
     readonly showMore: "showMore";
 };
-export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -8,8 +8,7 @@ const COLOR_SWATCHES_EVENT_NAMES = {
     change: 'change',
     markDisabledItems: 'markDisabledItems',
     showMore: 'showMore'
-};
-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 };
 //# 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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.js

@@ -31,8 +31,8 @@ let HTextareaControl = class HTextareaControl extends PhoenixLightLitElement {
                 id="${ifDefined(this.controlId)}"
                 name="${ifDefined(this.controlName)}"
                 placeholder="${ifDefined(this.placeholder)}"
+                aria-required="${this.required ? 'true' : 'false'}"
                 ?disabled="${this.disabled}"
-                ?required="${this.required}"
                 ?readonly="${this.readonly}"
                 ?hidden="${this.hidden}"
                 @input="${this._handleInputEvent}"

package/build/esm/packages/phoenix/src/components/show-more/show_more.d.ts

@@ -0,0 +1,21 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
+export declare class HShowMore extends PhoenixLightLitElement {
+    count: number;
+    mobileOnly: boolean;
+    showAll: boolean;
+    private _$showMoreButton;
+    private _$items;
+    connectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _updateComponentVisibility;
+    private _hideExcessItems;
+    private _showAllItems;
+    private _hideButton;
+    private _showButton;
+    private _setupListeners;
+    private _showMore;
+    private _focusNextItem;
+    private _onResize;
+}

package/build/esm/packages/phoenix/src/components/show-more/show_more.js

@@ -0,0 +1,115 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { property } from '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';
+import { BREAKPOINTS } from '../../global_constants.js';
+import { DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import throttle_1 from '../../../../../external/lodash/throttle.js';
+import { SHOW_MORE_ITEM_ATTRIBUTE, SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES } from './show_more_constants.js';
+
+let HShowMore = class HShowMore extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._$showMoreButton = null;
+        this._showMore = () => {
+            this._showAllItems();
+            this._hideButton();
+            this._focusNextItem();
+        };
+        this._onResize = throttle_1(() => {
+            if (window.innerWidth > BREAKPOINTS.xs) {
+                this._showAllItems();
+                this._hideButton();
+                window.removeEventListener('resize', this._onResize);
+            }
+        }, DEFAULT_THROTTLE_WAIT_TIME);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._$showMoreButton = this.querySelector('h-show-more-button');
+        this._$items = [...this.querySelectorAll(`[${SHOW_MORE_ITEM_ATTRIBUTE}]`)];
+        this.classList.add(SHOW_MORE_CSS_CLASSES.showMore);
+        this._updateComponentVisibility();
+        this._setupListeners();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('showAll')) {
+            this._showAllItems();
+            this._hideButton();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this._onResize);
+    }
+    _updateComponentVisibility() {
+        const hasOverflowItems = this._$items.length > this.count;
+        const isMobileView = window.innerWidth <= BREAKPOINTS.xs;
+        const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
+        if (shouldBeActive) {
+            this._hideExcessItems();
+            this._showButton();
+        }
+        else {
+            this._hideButton();
+        }
+    }
+    _hideExcessItems() {
+        this._$items.forEach(($item, index) => {
+            $item.removeAttribute('hidden');
+            if (index >= this.count)
+                $item.setAttribute('hidden', '');
+        });
+    }
+    _showAllItems() {
+        this._$items.forEach(($item) => $item.removeAttribute('hidden'));
+    }
+    _hideButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
+    }
+    _showButton() {
+        var _a;
+        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
+    }
+    _setupListeners() {
+        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
+        if (this.mobileOnly && window.innerWidth <= BREAKPOINTS.xs) {
+            window.addEventListener('resize', this._onResize);
+        }
+    }
+    _focusNextItem() {
+        const $nextItem = this._$items[this.count];
+        if (!$nextItem)
+            return;
+        const $firstFocusableElement = UiDomUtils.getFocusableElement($nextItem);
+        if ($firstFocusableElement) {
+            $firstFocusableElement.focus();
+            return;
+        }
+        if (!$nextItem.getAttribute('tabindex'))
+            $nextItem.setAttribute('tabindex', '-1');
+        $nextItem.focus();
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], HShowMore.prototype, "count", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'mobile-only' }),
+    __metadata("design:type", Boolean)
+], HShowMore.prototype, "mobileOnly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-all' }),
+    __metadata("design:type", Boolean)
+], HShowMore.prototype, "showAll", void 0);
+HShowMore = __decorate([
+    phoenixCustomElement('h-show-more')
+], HShowMore);
+
+export { HShowMore };
+//# sourceMappingURL=show_more.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more.js.map

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

package/build/esm/packages/phoenix/src/components/show-more/show_more_button.d.ts

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HShowMoreButton extends PhoenixLightLitElement {
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js

@@ -0,0 +1,27 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { SHOW_MORE_EVENT_NAMES, SHOW_MORE_CSS_CLASSES } from './show_more_constants.js';
+
+let HShowMoreButton = class HShowMoreButton extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.emitCustomEvent(SHOW_MORE_EVENT_NAMES.showMore);
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchClickedEvent);
+        this.classList.add(SHOW_MORE_CSS_CLASSES.showMoreButton);
+    }
+};
+HShowMoreButton = __decorate([
+    phoenixCustomElement('h-show-more-button'),
+    __metadata("design:paramtypes", [])
+], HShowMoreButton);
+
+export { HShowMoreButton };
+//# sourceMappingURL=show_more_button.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js.map

@@ -0,0 +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;"}

package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.d.ts

@@ -0,0 +1,8 @@
+export declare const SHOW_MORE_CSS_CLASSES: {
+    readonly showMore: "show-more";
+    readonly showMoreButton: "show-more__button";
+};
+export declare const SHOW_MORE_EVENT_NAMES: {
+    readonly showMore: "showMore";
+};
+export declare const SHOW_MORE_ITEM_ATTRIBUTE = "show-more-item";

package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js

@@ -0,0 +1,11 @@
+const SHOW_MORE_CSS_CLASSES = {
+    showMore: 'show-more',
+    showMoreButton: 'show-more__button'
+};
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'showMore'
+};
+const SHOW_MORE_ITEM_ATTRIBUTE = 'show-more-item';
+
+export { SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES, SHOW_MORE_ITEM_ATTRIBUTE };
+//# sourceMappingURL=show_more_constants.js.map

package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -140,4 +140,6 @@ export * from './components/toggle/toggle_types';
 export * from './components/toggle/toggle_constants';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller';
+export { HShowMore } from './components/show-more/show_more';
+export { HShowMoreButton } from './components/show-more/show_more_button';
 export { phoenixCustomElement } from './core/decorators/phoenix_custom_element';

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

@@ -79,6 +79,7 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
+export { HShowMoreButton } from './components/show-more/show_more_button.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
@@ -122,4 +123,5 @@ export { HToggle } from './components/toggle/toggle.js';
 export { HToggleBtn } from './components/toggle/toggle_button.js';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share.js';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller.js';
+export { HShowMore } from './components/show-more/show_more.js';
 //# sourceMappingURL=index.js.map

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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;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.17.8",
+  "version": "1.17.10",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -27,15 +27,15 @@
   },
   "peerDependencies": {
     "@dreamcommerce/utilities": "^1.0.0",
-    "@splidejs/splide": "^4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "^0.5.3"
+    "@splidejs/splide": "4.0.7",
+    "@splidejs/splide-extension-auto-scroll": "0.5.3"
   },
   "devDependencies": {
     "@dreamcommerce/utilities": "^1.20.1-6",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
+    "@splidejs/splide-extension-auto-scroll": "0.5.3",
     "@storybook/web-components": "6.5.7",
     "lit": "2.4.0"
   },