@shoper/phoenix_design_system 1.18.2 → 1.18.3

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseClass = 'select-toggler';
+const SELECT_TOGGLER_CSS_CLASSES = {
+    selectToggler: baseClass,
+    selectTogglerSelected: `${baseClass}_selected`,
+    selectTogglerValues: `${baseClass}__values`,
+    selectTogglerPlaceholder: `${baseClass}__placeholder`
+};
+
+exports.SELECT_TOGGLER_CSS_CLASSES = SELECT_TOGGLER_CSS_CLASSES;
+//# sourceMappingURL=select_toggler_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_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;"}

package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+var observer = require('../../../../core/classes/observer/observer.js');
+var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
+
+class BaseSelectController {
+    constructor({ host }) {
+        this.options$ = new behavior_subject.BehaviorSubject([]);
+        this.selectedOptions$ = new behavior_subject.BehaviorSubject([]);
+        this._calculateValuesRelatedToOptions = (selectOptions) => {
+            const { visibleCount, selectedCount } = selectOptions.reduce((acc, option) => {
+                return {
+                    visibleCount: !option.hidden ? acc.visibleCount + 1 : acc.visibleCount,
+                    selectedCount: option.selected ? acc.selectedCount + 1 : acc.selectedCount
+                };
+            }, { visibleCount: 0, selectedCount: 0 });
+            this.visibleOptionsCount = visibleCount;
+            this.selectedOptionsCount = selectedCount;
+        };
+        this.host = host;
+        this.host.addController(this);
+        this._setupComputedStateObserver();
+    }
+    _setupComputedStateObserver() {
+        this._optionsObserver = new observer.Observer(this._calculateValuesRelatedToOptions);
+        this.options$.subscribe(this._optionsObserver);
+    }
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
+    }
+    remove(optionValue) {
+        const options = this.options$.getValue();
+        if (!options)
+            return;
+        this.options$.notify(options.filter((option) => option.value !== optionValue));
+    }
+    add(option, position) {
+        var _a;
+        const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        if (position === undefined) {
+            options.push(option);
+            this.options$.notify(options);
+            return;
+        }
+        this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
+    }
+    replace(options) {
+        this.options$.notify(options);
+    }
+    deselectAll() {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.selectedOptions$.notify([]);
+        this.requestUpdate();
+    }
+    deselect(option) {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.selectedOptions$.notify([]);
+        this.requestUpdate();
+    }
+    updateOption(value, newOptions) {
+        const option = this.getOption(value);
+        if (!option)
+            return;
+        Object.entries(newOptions).forEach(([key, value]) => {
+            option[key] = value;
+        });
+        this.requestUpdate();
+    }
+    filter(value) {
+        var _a;
+        const selectOptions = (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.inactive);
+        if (!selectOptions)
+            return;
+        const filtered = utilities.SearchingUtils.fuzzySearch(value, selectOptions, 'content');
+        selectOptions.forEach((option) => (option.hidden = true));
+        filtered.forEach((option) => {
+            option.hidden = false;
+        });
+        this.requestUpdate();
+    }
+    requestUpdate() {
+        const selectOptions = this.options$.getValue();
+        if (!selectOptions)
+            return;
+        this.options$.notify([...selectOptions]);
+        this.host.requestUpdate();
+    }
+    getOption(selectValue) {
+        var _a;
+        return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
+    }
+    hostConnected() {
+        this.options$.unsubscribe(this._optionsObserver);
+    }
+}
+
+exports.BaseSelectController = BaseSelectController;
+//# sourceMappingURL=base_select_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/select/controllers/multi_select_controller.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_select_controller = require('./base_select_controller.js');
+
+class MultiSelectController extends base_select_controller.BaseSelectController {
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
+    }
+    select(option) {
+        option.selected = true;
+        this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
+        this.requestUpdate();
+    }
+    deselect(option) {
+        option.selected = false;
+        this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
+        this.requestUpdate();
+    }
+}
+
+exports.MultiSelectController = MultiSelectController;
+//# sourceMappingURL=multi_select_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_select_controller = require('./base_select_controller.js');
+
+class SelectController extends base_select_controller.BaseSelectController {
+    select(option) {
+        var _a;
+        const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        selectedOptions.forEach((option) => (option.selected = false));
+        option.selected = true;
+        this.selectedOptions$.notify([option]);
+        this.requestUpdate();
+    }
+}
+
+exports.SelectController = SelectController;
+//# sourceMappingURL=select_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.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;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+
+var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
+class SelectTogglerKeyboardController {
+    constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
+        _SelectTogglerKeyboardController_host.set(this, void 0);
+        _SelectTogglerKeyboardController__$toggler.set(this, void 0);
+        _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
+        _SelectTogglerKeyboardController__$options.set(this, void 0);
+        this._handleKeyboardNavigation = (ev) => {
+            const arrowKeys = ['ArrowUp', 'ArrowDown'];
+            if (arrowKeys.includes(ev.key)) {
+                this._openSelect(ev);
+                return;
+            }
+            if (ev.key === 'Home') {
+                this._openSelectAndGoToFirstElement(ev);
+                return;
+            }
+            if (ev.key === 'End') {
+                this._openSelectAndGoToLastElement(ev);
+                return;
+            }
+            if (ev.altKey || ev.shiftKey)
+                return;
+            const isAWriteableCharacter = ev.key.length === 1;
+            if (isAWriteableCharacter)
+                this._openSelectAndGoToMatchedElement(ev);
+        };
+        this._openSelect = (event) => {
+            var _a;
+            event.preventDefault();
+            (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
+        };
+        this._openSelectAndGoToFirstElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $firstOption = this._getAvailableOptions()[0];
+            if ($firstOption)
+                this._navigate($firstOption);
+        };
+        this._openSelectAndGoToLastElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $availableOptions = this._getAvailableOptions();
+            const $lastOption = $availableOptions[$availableOptions.length - 1];
+            if ($lastOption)
+                this._navigate($lastOption);
+        };
+        this._openSelectAndGoToMatchedElement = async (event) => {
+            var _a;
+            event.preventDefault();
+            await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
+            const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
+            if ($matchedOption)
+                this._navigate($matchedOption);
+        };
+        this._getAvailableOptions = () => {
+            return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
+                return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
+            });
+        };
+        this._findSelectedIndex = () => {
+            const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
+            return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+        };
+        this._navigate = ($newOption) => {
+            const $selectedOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
+            utilities.UiDomUtils.makeUnnavigable($selectedOption);
+            const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
+            tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
+            utilities.UiDomUtils.makeNavigable($newOption);
+            $newOption.focus();
+        };
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
+        tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
+    }
+    hostConnected() {
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
+    }
+    hostDisconnected() {
+        tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
+    }
+}
+_SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
+
+exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
+//# sourceMappingURL=select_toggler_keyboard_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map

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

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class SelectOption {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
+        this.value = value;
+        this.selected = selected;
+        this.hidden = hidden;
+        this.disabled = disabled;
+        this.content = content;
+        this.inactive = inactive;
+    }
+    static create(options) {
+        return new SelectOption(options);
+    }
+}
+
+exports.SelectOption = SelectOption;
+//# sourceMappingURL=select_option.js.map

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.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;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var select_components_constatns = require('../components/select_components_constatns.js');
+var select_option = require('./select_option.js');
+
+class SelectOptionMapper {
+    static toModel($option) {
+        const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
+        const value = $option.getAttribute('value');
+        if (!value)
+            throw new Error('h-option must contain a unique value');
+        if (!optionContentText)
+            throw new Error('h-options must contains a h-option-content element inside');
+        return select_option.SelectOption.create({
+            value,
+            disabled: $option.hasAttribute('disabled'),
+            hidden: $option.hasAttribute('hidden'),
+            inactive: $option.hasAttribute('inactive'),
+            content: optionContentText,
+            selected: $option.hasAttribute('selected')
+        });
+    }
+}
+
+exports.SelectOptionMapper = SelectOptionMapper;
+//# sourceMappingURL=select_option_mapper.js.map

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}