@shoper/phoenix_design_system 1.17.17-0 → 1.17.18

package/README.md

@@ -0,0 +1,34 @@
+# Jak odpalić Storybooka z Phoenixem?
+
+## Odpowiednia wersja Node'a
+
+Najlepiej upewnij się, że masz wersję `18.20.7` Node'a, czyli taką, która jest na naszym Dockerze. Żeby sprawdzić jaką wersję obecnie używasz wpisz `node -v`.
+
+Nie masz odpowiedniej wersji? Oto instrukcja jak ją przełączyć korzystając z NVM'a w następujący sposób:
+1. Wpisz `npm install nvm -g`
+2. Wpisz `nvm install 18.20.7`
+3. Wpisz `nvm use 18.20.7`
+4. Chcesz wrócić do swojej poprzedniej wersji? Sprawdź jakie masz dostępne wersję wpisując `nvm list`, a potem `nvm use <twoja_wersja>`.
+5. Twojej wersji nie ma na liście? Wpisz `nvm install <twoja_wersja>`, a potem `nvm use <twoja_wersja>`.
+
+## Instalacja powiązanych paczek
+
+Potrzebujemy zainstalować paczki w głównym folderze oraz utilities, żeby Storybook działał poprawnie. Wykonaj następujące kroki:
+1. Wpisz `yarn install` w katalogu głównym projektu (Czyli jeśli jesteś w Phoenixie, to najpierw `cd ../..`).
+2. Wejdź do katalogu `packages/utilities` i wpisz `yarn install`.
+3. W katalogu `packages/utilities` wpisz również `yarn build`.
+
+## Odpalenie Storybooka
+
+Po zrobieniu wszystkich poprzednich kroków, możemy odpalić Storybooka:
+1. Wejdź z powrotem do tego katalogu `packages/phoenix` i wpisz `yarn install`
+2. W pliku `package.json` w skrypcie `storybook` zobaczysz `NODE_OPTIONS=--openssl-legacy-provider && `. Przed odpaleniem Storybooka musisz usunąć tą część ze skryptu!
+3. Następnie odpal `NODE_OPTIONS=--openssl-legacy-provider && yarn storybook` w konsoli.
+4. Gratulacje! Storybook powinien się odpalić pod adresem `http://localhost:6007`.
+5. Od tej pory, by odpalić Storybooka powtarzaj kroki od 2 do 4.
+
+## Troubleshooting
+
+Jeśli z jakiegoś powodu dalej masz problemy z odpaleniem Storybooka, możesz spróbować jeszcze tych rzeczy:
+1. Podmień wersję Node'a na `16.10.0`. Oto komenda, która to ustawia: `nvm install 16.10.0 && nvm use 16.10.0`. Po wpisaniu tej komendy odpal Storybooka (poradnik wyżej).
+2. Odpal Storybooka z poziomu Aurory NPM. Przejdź do głównego katalogu `aurora-npm` i wpisz `yarn phoenix:storybook`.

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

@@ -42,20 +42,6 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
         this._selectedOptionsObserver = new observer.Observer(this._handleSelectedOptionChanged);
         this.selectedOptions$.subscribe(this._selectedOptionsObserver);
     }
-    _renderOptionContent(option) {
-        const parts = (option.content || '')
-            .split('\n')
-            .map((line) => line.trim())
-            .filter((line) => line.length > 0);
-        const name = parts[0] || '';
-        const addons = parts.slice(1).join(' ');
-        return litHtml.html `
-            <div class="custom-layout">
-                <span class="custom-name">${name}</span>
-                ${addons ? litHtml.html `<span class="custom-addons">${addons}</span>` : ''}
-            </div>
-        `;
-    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -67,24 +53,19 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
         return litHtml.html `
             ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
             var _a;
-            if (!selectOptions.length) {
+            if (!selectOptions.length)
                 return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
-            }
-            return litHtml.html `
-                    <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
-                        ${this.isMultiselect
-                ? selectOptions.map((option) => {
-                    const content = this._renderOptionContent(option);
-                    return litHtml.html `
-                                    <li>
-                                        <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
-                                            ${content}
-                                            <h-tag-remove-button></h-tag-remove-button>
-                                        </h-tag>
-                                    </li>`;
-                })
-                : litHtml.html `<li>${this._renderOptionContent(selectOptions[0])}</li>`}
-                    </ul>`;
+            return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                    ${this.isMultiselect
+                ? selectOptions.map((option) => litHtml.html ` <li>
+                                  <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
+                                      ${option.content}
+
+                                      <h-tag-remove-button></h-tag-remove-button>
+                                  </h-tag>
+                              </li>`)
+                : litHtml.html ` <li>${selectOptions[0].content}</li>`}
+                </ul>`;
         })}
 
             <h-icon icon-name="icon-chevron-down"></h-icon>

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

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

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

@@ -9,12 +9,14 @@ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/ph
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
 var splideExtensionAutoScroll_esm = require('../../../../../external/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.esm.js');
+var scroller_constants = require('./scroller_constants.js');
 
 exports.HScroller = class HScroller extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.settings = '';
         this.id = '';
+        this.isPaused = false;
         this._settings = {
             mountOnConnectedCallback: true,
             type: 'loop',
@@ -40,6 +42,7 @@ exports.HScroller = class HScroller extends phoenix_light_lit_element.PhoenixLig
     }
     connectedCallback() {
         var _a;
+        super.connectedCallback();
         if (this.settings) {
             this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
@@ -47,10 +50,55 @@ exports.HScroller = class HScroller extends phoenix_light_lit_element.PhoenixLig
         if (this._settings.mountOnConnectedCallback) {
             this._scroller.mount({ AutoScroll: splideExtensionAutoScroll_esm.AutoScroll });
         }
+        this.addEventListener(scroller_constants.SCROLLER_EVENTS.pause, () => this.pause());
+        this.addEventListener(scroller_constants.SCROLLER_EVENTS.play, () => this.play());
+        this._handlePausePlayState();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('isPaused')) {
+            this._handlePausePlayState();
+        }
+    }
+    pause() {
+        var _a;
+        const autoScroll = (_a = this._scroller) === null || _a === void 0 ? void 0 : _a.Components.AutoScroll;
+        if (autoScroll && !this.isPaused) {
+            autoScroll.pause();
+            this.isPaused = true;
+        }
+    }
+    play() {
+        var _a;
+        const autoScroll = (_a = this._scroller) === null || _a === void 0 ? void 0 : _a.Components.AutoScroll;
+        if (autoScroll && this.isPaused) {
+            autoScroll.play();
+            this.isPaused = false;
+        }
+    }
+    _handlePausePlayState() {
+        const playBtn = this.querySelector(scroller_constants.SCROLLER_CONTROLS_NAMES.scrollerControlsPlay);
+        const pauseBtn = this.querySelector(scroller_constants.SCROLLER_CONTROLS_NAMES.scrollerControlsPause);
+        if (!(playBtn && pauseBtn))
+            return;
+        if (this.isPaused) {
+            utilities.UiDomUtils.show(playBtn);
+            utilities.UiDomUtils.hide(pauseBtn);
+        }
+        else {
+            utilities.UiDomUtils.hide(playBtn);
+            utilities.UiDomUtils.show(pauseBtn);
+        }
     }
     getSlider() {
         return this._scroller;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._scroller) {
+            this._scroller.destroy();
+            this._scroller = null;
+        }
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ reflect: true }),
@@ -60,6 +108,10 @@ tslib_es6.__decorate([
     decorators.property(),
     tslib_es6.__metadata("design:type", String)
 ], exports.HScroller.prototype, "id", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HScroller.prototype, "isPaused", void 0);
 exports.HScroller = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-scroller')
 ], exports.HScroller);

package/build/cjs/packages/phoenix/src/components/scroller/scroller.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,yBAAyB,gEAAoE;AAC7F,4CAA4C,4GAAgH;AAC5J;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yBAAyB,gEAAoE;AAC7F,4CAA4C,4GAAgH;AAC5J;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/scroller/scroller_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SCROLLER_EVENTS = {
+    pause: 'scroller-pause',
+    play: 'scroller-play',
+    click: 'click'
+};
+const SCROLLER_CONTROLS_NAMES = {
+    scrollerControlsPlay: 'h-scroller-play',
+    scrollerControlsPause: 'h-scroller-pause'
+};
+
+exports.SCROLLER_CONTROLS_NAMES = SCROLLER_CONTROLS_NAMES;
+exports.SCROLLER_EVENTS = SCROLLER_EVENTS;
+//# sourceMappingURL=scroller_constants.js.map

package/build/cjs/packages/phoenix/src/components/scroller/scroller_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/components/slider/slider.js

@@ -34,11 +34,11 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
             if ($focusableSlideChildren.length === 0)
                 return;
             const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
-            $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
+            $focusableSlideChildren.forEach(($element) => updateFocusability($element));
         };
         this._scanMutationsForNewFocusableElements = (mutationList) => {
             for (const mutation of mutationList) {
-                if (mutation.type !== "childList")
+                if (mutation.type !== 'childList')
                     continue;
                 const $target = mutation.target;
                 const isFocusable = utilities.UiDomUtils.isFocusable($target);
@@ -68,7 +68,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
         if (this.settings) {
             this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
-        this._slider = new splide_esm.Splide(`#${this.id}`, this._settings);
+        this._slider = new splide_esm.Splide(this, this._settings);
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }

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

@@ -11,7 +11,6 @@ export declare class HSelectToggler extends PhoenixLightLitElement {
     private _subscribeObserver;
     private _handleSelectedOptionChanged;
     private _dispatchOptionDeselect;
-    private _renderOptionContent;
     disconnectedCallback(): void;
     render(): TemplateResult | undefined;
 }

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

@@ -38,20 +38,6 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
         this._selectedOptionsObserver = new Observer(this._handleSelectedOptionChanged);
         this.selectedOptions$.subscribe(this._selectedOptionsObserver);
     }
-    _renderOptionContent(option) {
-        const parts = (option.content || '')
-            .split('\n')
-            .map((line) => line.trim())
-            .filter((line) => line.length > 0);
-        const name = parts[0] || '';
-        const addons = parts.slice(1).join(' ');
-        return html `
-            <div class="custom-layout">
-                <span class="custom-name">${name}</span>
-                ${addons ? html `<span class="custom-addons">${addons}</span>` : ''}
-            </div>
-        `;
-    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -63,24 +49,19 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
         return html `
             ${observe(this.selectedOptions$, (selectOptions) => {
             var _a;
-            if (!selectOptions.length) {
+            if (!selectOptions.length)
                 return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
-            }
-            return html `
-                    <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
-                        ${this.isMultiselect
-                ? selectOptions.map((option) => {
-                    const content = this._renderOptionContent(option);
-                    return html `
-                                    <li>
-                                        <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
-                                            ${content}
-                                            <h-tag-remove-button></h-tag-remove-button>
-                                        </h-tag>
-                                    </li>`;
-                })
-                : html `<li>${this._renderOptionContent(selectOptions[0])}</li>`}
-                    </ul>`;
+            return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                    ${this.isMultiselect
+                ? selectOptions.map((option) => html ` <li>
+                                  <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
+                                      ${option.content}
+
+                                      <h-tag-remove-button></h-tag-remove-button>
+                                  </h-tag>
+                              </li>`)
+                : html ` <li>${selectOptions[0].content}</li>`}
+                </ul>`;
         })}
 
             <h-icon icon-name="icon-chevron-down"></h-icon>

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

package/build/esm/packages/phoenix/src/components/scroller/scroller-pause.d.ts

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

package/build/esm/packages/phoenix/src/components/scroller/scroller-pause.js

@@ -0,0 +1,28 @@
+import { __decorate, __metadata } from "tslib";
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
+import { SCROLLER_CLASS_NAME, SCROLLER_EVENTS } from './scroller_constants';
+let HScrollerPause = class HScrollerPause extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchScrollerEvent = () => {
+            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.pause, {
+                bubbles: true
+            }));
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'pause';
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPause} ${this.className}`;
+        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
+    }
+};
+HScrollerPause = __decorate([
+    phoenixCustomElement('h-scroller-pause'),
+    __metadata("design:paramtypes", [])
+], HScrollerPause);
+export { HScrollerPause };
+//# sourceMappingURL=scroller-pause.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller-pause.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroller-pause.js","sourceRoot":"","sources":["../../../../../../../src/components/scroller/scroller-pause.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5E,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAGtD;QACI,KAAK,EAAE,CAAC;QAcJ,2BAAsB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,eAAe,CAAC,KAAK,EAAE;gBACnC,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QAlBE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5D,IAAI,CAAC,SAAS,GAAG,GAAG,mBAAmB,CAAC,qBAAqB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;QAElF,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC/E,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9E,CAAC;CASJ,CAAA;AAzBY,cAAc;IAD1B,oBAAoB,CAAC,kBAAkB,CAAC;;GAC5B,cAAc,CAyB1B;SAzBY,cAAc"}

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.d.ts

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

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.js

@@ -0,0 +1,28 @@
+import { __decorate, __metadata } from "tslib";
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
+import { SCROLLER_CLASS_NAME, SCROLLER_EVENTS } from './scroller_constants';
+let HScrollerPlay = class HScrollerPlay extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchScrollerEvent = () => {
+            this.dispatchEvent(new CustomEvent(SCROLLER_EVENTS.play, {
+                bubbles: true
+            }));
+        };
+        this.slot = this.hasAttribute('slot') ? this.slot : 'play';
+        this.className = `${SCROLLER_CLASS_NAME.scrollerControlsPlay} ${this.className}`;
+        this._btnController = new BtnController(this, this._dispatchScrollerEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(SCROLLER_EVENTS.click, this._dispatchScrollerEvent);
+    }
+};
+HScrollerPlay = __decorate([
+    phoenixCustomElement('h-scroller-play'),
+    __metadata("design:paramtypes", [])
+], HScrollerPlay);
+export { HScrollerPlay };
+//# sourceMappingURL=scroller-play.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller-play.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroller-play.js","sourceRoot":"","sources":["../../../../../../../src/components/scroller/scroller-play.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5E,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,sBAAsB;IAGrD;QACI,KAAK,EAAE,CAAC;QAcJ,2BAAsB,GAAG,GAAS,EAAE;YACxC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,eAAe,CAAC,IAAI,EAAE;gBAClC,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;QACN,CAAC,CAAC;QAlBE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,GAAG,mBAAmB,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjF,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC/E,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC9E,CAAC;CASJ,CAAA;AAzBY,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;;GAC3B,aAAa,CAyBzB;SAzBY,aAAa"}

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

@@ -3,10 +3,16 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 export declare class HScroller extends PhoenixLightLitElement {
     settings: string;
     id: string;
+    private isPaused;
     get sliderSettings(): IScrollerOptions;
     set sliderSettings(newSettingsObject: IScrollerOptions);
     private _settings;
     private _scroller;
     connectedCallback(): void;
+    protected updated(changedProperties: Map<string, any>): void;
+    pause(): void;
+    play(): void;
+    private _handlePausePlayState;
     getSlider(): IScroller | null;
+    disconnectedCallback(): void;
 }

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

@@ -1,16 +1,18 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { JsonUtils } from '@dreamcommerce/utilities';
+import { JsonUtils, 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 { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
 import { AutoScroll } from '../../../../../external/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.esm.js';
+import { SCROLLER_EVENTS, SCROLLER_CONTROLS_NAMES } from './scroller_constants.js';
 
 let HScroller = class HScroller extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.settings = '';
         this.id = '';
+        this.isPaused = false;
         this._settings = {
             mountOnConnectedCallback: true,
             type: 'loop',
@@ -36,6 +38,7 @@ let HScroller = class HScroller extends PhoenixLightLitElement {
     }
     connectedCallback() {
         var _a;
+        super.connectedCallback();
         if (this.settings) {
             this._settings = (_a = JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
@@ -43,10 +46,55 @@ let HScroller = class HScroller extends PhoenixLightLitElement {
         if (this._settings.mountOnConnectedCallback) {
             this._scroller.mount({ AutoScroll });
         }
+        this.addEventListener(SCROLLER_EVENTS.pause, () => this.pause());
+        this.addEventListener(SCROLLER_EVENTS.play, () => this.play());
+        this._handlePausePlayState();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('isPaused')) {
+            this._handlePausePlayState();
+        }
+    }
+    pause() {
+        var _a;
+        const autoScroll = (_a = this._scroller) === null || _a === void 0 ? void 0 : _a.Components.AutoScroll;
+        if (autoScroll && !this.isPaused) {
+            autoScroll.pause();
+            this.isPaused = true;
+        }
+    }
+    play() {
+        var _a;
+        const autoScroll = (_a = this._scroller) === null || _a === void 0 ? void 0 : _a.Components.AutoScroll;
+        if (autoScroll && this.isPaused) {
+            autoScroll.play();
+            this.isPaused = false;
+        }
+    }
+    _handlePausePlayState() {
+        const playBtn = this.querySelector(SCROLLER_CONTROLS_NAMES.scrollerControlsPlay);
+        const pauseBtn = this.querySelector(SCROLLER_CONTROLS_NAMES.scrollerControlsPause);
+        if (!(playBtn && pauseBtn))
+            return;
+        if (this.isPaused) {
+            UiDomUtils.show(playBtn);
+            UiDomUtils.hide(pauseBtn);
+        }
+        else {
+            UiDomUtils.hide(playBtn);
+            UiDomUtils.show(pauseBtn);
+        }
     }
     getSlider() {
         return this._scroller;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._scroller) {
+            this._scroller.destroy();
+            this._scroller = null;
+        }
+    }
 };
 __decorate([
     property({ reflect: true }),
@@ -56,6 +104,10 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], HScroller.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HScroller.prototype, "isPaused", void 0);
 HScroller = __decorate([
     phoenixCustomElement('h-scroller')
 ], HScroller);

package/build/esm/packages/phoenix/src/components/scroller/scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F,2BAA2B,4GAAgH;AAC3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,gEAAoE;AAC3F,2BAA2B,4GAAgH;AAC3I;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/scroller/scroller_constants.d.ts

@@ -0,0 +1,13 @@
+export declare const SCROLLER_EVENTS: {
+    readonly pause: "scroller-pause";
+    readonly play: "scroller-play";
+    readonly click: "click";
+};
+export declare const SCROLLER_CONTROLS_NAMES: {
+    readonly scrollerControlsPlay: "h-scroller-play";
+    readonly scrollerControlsPause: "h-scroller-pause";
+};
+export declare const SCROLLER_CLASS_NAME: {
+    readonly scrollerControlsPlay: "scroller__controls_play";
+    readonly scrollerControlsPause: "scroller__controls_pause";
+};

package/build/esm/packages/phoenix/src/components/scroller/scroller_constants.js

@@ -0,0 +1,12 @@
+const SCROLLER_EVENTS = {
+    pause: 'scroller-pause',
+    play: 'scroller-play',
+    click: 'click'
+};
+const SCROLLER_CONTROLS_NAMES = {
+    scrollerControlsPlay: 'h-scroller-play',
+    scrollerControlsPause: 'h-scroller-pause'
+};
+
+export { SCROLLER_CONTROLS_NAMES, SCROLLER_EVENTS };
+//# sourceMappingURL=scroller_constants.js.map

package/build/esm/packages/phoenix/src/components/scroller/scroller_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;"}

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

@@ -30,11 +30,11 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
             if ($focusableSlideChildren.length === 0)
                 return;
             const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
-            $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
+            $focusableSlideChildren.forEach(($element) => updateFocusability($element));
         };
         this._scanMutationsForNewFocusableElements = (mutationList) => {
             for (const mutation of mutationList) {
-                if (mutation.type !== "childList")
+                if (mutation.type !== 'childList')
                     continue;
                 const $target = mutation.target;
                 const isFocusable = UiDomUtils.isFocusable($target);
@@ -64,7 +64,7 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
         if (this.settings) {
             this._settings = (_a = JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
-        this._slider = new Splide(`#${this.id}`, this._settings);
+        this._slider = new Splide(this, this._settings);
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.17.17-0",
+  "version": "1.17.18",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@splidejs/splide-extension-auto-scroll": "0.5.3"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.23.0",
+    "@dreamcommerce/utilities": "^1.23.1",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",