@shoper/phoenix_design_system 1.16.1 → 1.17.0-0

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

@@ -0,0 +1,18 @@
+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';
+
+let HScrollerItem = class HScrollerItem extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'item';
+        this.className = `splide__slide ${this.className}`;
+    }
+};
+HScrollerItem = __decorate([
+    phoenixCustomElement('h-scroller-item'),
+    __metadata("design:paramtypes", [])
+], HScrollerItem);
+
+export { HScrollerItem };
+//# sourceMappingURL=scroller-item.js.map

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

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

@@ -0,0 +1,12 @@
+import { IScroller, IScrollerOptions } from './scroller_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HScroller extends PhoenixLightLitElement {
+    settings: string;
+    id: string;
+    get sliderSettings(): IScrollerOptions;
+    set sliderSettings(newSettingsObject: IScrollerOptions);
+    private _settings;
+    private _scroller;
+    connectedCallback(): void;
+    getSlider(): IScroller | null;
+}

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

@@ -0,0 +1,64 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { JsonUtils } 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';
+
+let HScroller = class HScroller extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.settings = '';
+        this.id = '';
+        this._settings = {
+            mountOnConnectedCallback: true,
+            type: 'loop',
+            perPage: 3,
+            autoScroll: {
+                autoStart: true,
+                pauseOnFocus: true,
+                pauseOnHover: true,
+                rewind: false,
+                speed: 1
+            }
+        };
+        this._scroller = null;
+    }
+    get sliderSettings() {
+        return this._settings;
+    }
+    set sliderSettings(newSettingsObject) {
+        const newSettings = JsonUtils.toJson(newSettingsObject);
+        if (!newSettings)
+            return;
+        this.settings = newSettings;
+    }
+    connectedCallback() {
+        var _a;
+        if (this.settings) {
+            this._settings = (_a = JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
+        }
+        this._scroller = new Splide(`#${this.id}`, this._settings);
+        if (this._settings.mountOnConnectedCallback) {
+            this._scroller.mount({ AutoScroll });
+        }
+    }
+    getSlider() {
+        return this._scroller;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], HScroller.prototype, "settings", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], HScroller.prototype, "id", void 0);
+HScroller = __decorate([
+    phoenixCustomElement('h-scroller')
+], HScroller);
+
+export { HScroller };
+//# sourceMappingURL=scroller.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { Options, Splide } from '@splidejs/splide';
+export interface IScroller extends Splide {
+}
+export interface IScrollerOptions extends Options {
+    mountOnConnectedCallback: boolean;
+    type: string;
+    autoScroll: {
+        autoStart: boolean;
+        pauseOnFocus: boolean;
+        pauseOnHover: boolean;
+        rewind: boolean;
+        speed: number;
+    };
+}

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

@@ -0,0 +1,2 @@
+import '@splidejs/splide';
+//# sourceMappingURL=scroller_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scroller_types.js","sourceRoot":"","sources":["../../../../../../../src/components/scroller/scroller_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}

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

@@ -7,6 +7,15 @@ export declare class HSlider extends PhoenixLightLitElement {
     set sliderSettings(newSettingsObject: ISliderOptions);
     private _settings;
     private _slider;
+    private _$focusableElements;
     connectedCallback(): void;
+    private _showFocusableNodes;
+    private _hideFocusableNodes;
+    private _handleFocusableNodes;
+    private _showFocusableElement;
+    private _hideFocusableElement;
+    private _scanMutationsForNewFocusableElements;
+    private _initializeFocusableElement;
     getSlider(): ISlider | null;
+    disconnectedCallback(): void;
 }

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

@@ -1,9 +1,10 @@
 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 { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
 
 let HSlider = class HSlider extends PhoenixLightLitElement {
     constructor() {
@@ -17,6 +18,26 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
             focus: 'center'
         };
         this._slider = null;
+        this._$focusableElements = [];
+        this._showFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
+        };
+        this._hideFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
+        };
+        this._handleFocusableNodes = ({ slide }, action) => {
+            const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
+            if ($focusableSlideChildren.length === 0)
+                return;
+            const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
+            $focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
+        };
+        this._initializeFocusableElement = ($element) => {
+            !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
+            if ($element.closest('[aria-hidden="true"]')) {
+                this._hideFocusableElement($element);
+            }
+        };
     }
     get sliderSettings() {
         return this._settings;
@@ -36,10 +57,39 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
         if (this._settings.mountOnConnectedCallback) {
             this._slider.mount();
         }
+        this._slider.on('visible', this._showFocusableNodes);
+        this._slider.on('hidden', this._hideFocusableNodes);
+        const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
+        mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
+    }
+    _showFocusableElement($element) {
+        $element.setAttribute('tabindex', '0');
+        $element.removeAttribute('aria-hidden');
+    }
+    _hideFocusableElement($element) {
+        $element.setAttribute('tabindex', '-1');
+        $element.setAttribute('aria-hidden', 'true');
+    }
+    _scanMutationsForNewFocusableElements(mutationList) {
+        for (const mutation of mutationList) {
+            if (mutation.type !== "childList")
+                continue;
+            const $target = mutation.target;
+            const isFocusable = UiDomUtils.isFocusable($target);
+            const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
+            isFocusable && this._initializeFocusableElement($target);
+            $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
+        }
     }
     getSlider() {
         return this._slider;
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
+        (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
+    }
 };
 __decorate([
     property({ reflect: true }),

package/build/esm/packages/phoenix/src/components/slider/slider.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS: {
+    readonly show: "show";
+    readonly hide: "hide";
+};

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

@@ -0,0 +1,7 @@
+const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
+    show: 'show',
+    hide: 'hide'
+};
+
+export { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS };
+//# sourceMappingURL=slider_constants.js.map

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

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

package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts

@@ -1,6 +1,9 @@
 import { Options, Splide } from '@splidejs/splide';
+import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
+import { Any } from 'ts-toolbelt';
 export interface ISlider extends Splide {
 }
 export interface ISliderOptions extends Options {
     mountOnConnectedCallback: boolean;
 }
+export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];

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

@@ -1,2 +1,4 @@
 import '@splidejs/splide';
+import './slider_constants';
+import 'ts-toolbelt';
 //# sourceMappingURL=slider_types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}

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

@@ -98,6 +98,9 @@ export { VisibilityController } from './controllers/visibility_controller/visibi
 export * from './controllers/visibility_controller/visibility_controller_types';
 export { HSlider } from './components/slider/slider';
 export * from './components/slider/slider_types';
+export { HScroller } from './components/scroller/scroller';
+export { HScrollerItem } from './components/scroller/scroller-item';
+export * from './components/scroller/scroller_types';
 export { HTabs } from './components/tabs/tabs';
 export { HTab } from './components/tabs/tab/tab';
 export { HTabPanel } from './components/tabs/tab_panel';

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

@@ -85,6 +85,8 @@ export { HColorSwatchesControl } from './components/form/color_swatches_control/
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';
+export { HScroller } from './components/scroller/scroller.js';
+export { HScrollerItem } from './components/scroller/scroller-item.js';
 export { HTab } from './components/tabs/tab/tab.js';
 export { HTabPanel } from './components/tabs/tab_panel.js';
 export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants.js';

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.16.1",
+  "version": "1.17.0-0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -27,13 +27,15 @@
   },
   "peerDependencies": {
     "@dreamcommerce/utilities": "^1.0.0",
-    "@splidejs/splide": "^4.0.7"
+    "@splidejs/splide": "^4.0.7",
+    "@splidejs/splide-extension-auto-scroll": "^0.5.3"
   },
   "devDependencies": {
     "@dreamcommerce/utilities": "^1.20.1-0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",
+    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "@storybook/web-components": "6.5.7",
     "lit": "2.4.0"
   },