@shoper/phoenix_design_system 1.0.4 → 1.1.0-2

package/build/cjs/packages/phoenix/src/components/form/switch/switch.js

@@ -6,9 +6,9 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 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 index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
 var switch_constants = require('./switch_constants.js');
 

package/build/cjs/packages/phoenix/src/components/form/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;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;"}

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

@@ -6,9 +6,9 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 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 index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
-var index = require('../../../../external/classnames/index.js');
 var textarea_constants = require('./textarea_constants.js');
 
 exports.HTextarea = class HTextarea extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;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;"}

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

@@ -7,8 +7,8 @@ var lit = require('lit');
 var decorators = require('lit/decorators');
 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 index = require('../../../external/classnames/index.js');
 var icon_constants = require('./icon_constants.js');
+var index = require('../../../../../external/classnames/index.js');
 var namespaced_attribure_directive = require('../../directives/namespaced_attribure_directive.js');
 
 var HIcon_1;

package/build/cjs/packages/phoenix/src/components/icon/icon.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,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,6CAAiD;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/messages/base_message.js

@@ -6,9 +6,9 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 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 portal_constants = require('../portal/portal_constants.js');
 var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var portal_constants = require('../portal/portal_constants.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 var base_message_constants = require('./base_message_constants.js');

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

@@ -5,13 +5,13 @@ 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 portal_constants = require('../portal/portal_constants.js');
-var modal_constants = require('./modal_constants.js');
-var litHtml = require('lit-html');
-var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
+var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
+var portal_constants = require('../portal/portal_constants.js');
+var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 require('@lit/reactive-element');
+var modal_constants = require('./modal_constants.js');
 
 var HModal_1;
 exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -7,8 +7,8 @@ require('lit');
 var decorators = require('lit/decorators');
 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 portal_constants = require('./portal_constants.js');
 var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
+var portal_constants = require('./portal_constants.js');
 
 exports.HPortal = class HPortal extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/portal/portal.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_target.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
-var portal_target_error = require('./portal_target_error.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var portal_target_error = require('./portal_target_error.js');
 var portal_constants = require('./portal_constants.js');
 
 var HPortalTarget_1;

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

@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 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.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
 
 exports.HScrollTo = class HScrollTo extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/tabs/tab/tab.js

@@ -7,7 +7,7 @@ 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 btn_controller = require('../../../controllers/btn_controller.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
 var tab_constants = require('./tab_constants.js');
 
 exports.HTab = class HTab extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -6,7 +6,7 @@ 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 decorators_js = require('@lit/reactive-element/decorators.js');
-var btn_controller = require('../../controllers/btn_controller.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
 var tag_constants = require('./tag_constants.js');
 
 exports.HTag = class HTag extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -14,7 +14,8 @@ exports.HTag = class HTag extends phoenix_light_lit_element.PhoenixLightLitEleme
         super(...arguments);
         this.clickable = false;
         this.removable = false;
-        this._handleClick = () => {
+        this._handleClick = (event) => {
+            event.stopPropagation();
             /**
              * TODO do zrobienia in fiuczer, jak jest tag klikalny i mamy remove, to klik remove działa na button remove
              * a nie na cały tag

package/build/cjs/packages/phoenix/src/components/tag/tag.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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/controllers/{btn_controller.js → btn_controller/btn_controller.js}

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('lit');
-var keystrokes_controller = require('./keystrokes_controller/keystrokes_controller.js');
+var utilities = require('@dreamcommerce/utilities');
+var keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
 
 class BtnController {
-    constructor(host, callback) {
+    constructor(host, callback, { isNavigable = true } = {}) {
         (this.host = host).addController(this);
-        this.host.tabIndex = 0;
+        isNavigable ? utilities.UiDomUtils.makeNavigable(this.host) : utilities.UiDomUtils.makeUnnavigable(this.host);
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new keystrokes_controller.KeystrokesController({
             host,

package/build/cjs/packages/phoenix/src/controllers/btn_controller/btn_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;"}

package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js

@@ -76,16 +76,16 @@ class KeystrokesController {
         this._keys = keys;
         this._callback = callback;
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostConnected() {
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('focusout', this._clearBuffer);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
     }
     hostDisconnected() {
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('focusout', this._clearBuffer);
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);
-        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keyup', this._removeKey);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").removeEventListener('keydown', this._saveKey);
+        tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").removeEventListener('keyup', this._removeKey);
     }
 }
 _KeystrokesController_host = new WeakMap(), _KeystrokesController_target = new WeakMap();

package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_controller_constants.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS = {
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+};
+
+exports.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS;
+//# sourceMappingURL=list_box_controller_constants.js.map

package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_controller_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/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js

@@ -0,0 +1,84 @@
+'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 keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
+var list_box_controller_constants = require('./list_box_controller_constants.js');
+
+var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
+class ListBoxKeyboardController {
+    constructor({ host, $list, listItemSelector = '[role="option"]', orientation = list_box_controller_constants.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
+        _ListBoxKeyboardController_host.set(this, void 0);
+        _ListBoxKeyboardController__$list.set(this, void 0);
+        _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
+        _ListBoxKeyboardController__$options.set(this, void 0);
+        _ListBoxKeyboardController_listItemSelector.set(this, void 0);
+        _ListBoxKeyboardController_keys.set(this, void 0);
+        this._handleArrowNavigation = (event) => {
+            event.preventDefault();
+            const { key } = event;
+            const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+            let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
+            if (newOptionIndex === undefined) {
+                const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
+                newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
+            }
+            if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
+                return;
+            if (prevOptionIndex !== undefined) {
+                const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
+                utilities.UiDomUtils.makeUnnavigable($prevOption);
+            }
+            tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
+            const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
+            utilities.UiDomUtils.makeNavigable($focusedOption);
+            $focusedOption.focus();
+        };
+        tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
+        tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
+        tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_listItemSelector, listItemSelector, "f");
+        tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_keys, orientation === list_box_controller_constants.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'], "f");
+        tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$options, Array.from($list.querySelectorAll(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_listItemSelector, "f"))), "f");
+        tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
+    }
+    hostConnected() {
+        new keystrokes_controller.KeystrokesController({
+            host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
+            keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
+            callback: this._handleArrowNavigation,
+            target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
+        });
+        utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
+        tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
+            if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
+                return;
+            if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+                return;
+            const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
+            utilities.UiDomUtils.makeUnnavigable($prevOption);
+            tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
+        });
+        tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => utilities.UiDomUtils.makeUnnavigable($option));
+    }
+    _getPrevOptionIndex() {
+        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+            return undefined;
+        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
+            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
+    }
+    _getNextOptionIndex() {
+        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
+            return undefined;
+        if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
+            return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
+        return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
+    }
+}
+_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
+
+exports.ListBoxKeyboardController = ListBoxKeyboardController;
+//# sourceMappingURL=list_box_keyboard_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core/classes/behavior_subject/behavior_subject.js

@@ -7,16 +7,11 @@ var subject = require('../subject/subject.js');
 class BehaviorSubject extends subject.Subject {
     constructor(initialValue) {
         super(initialValue);
-        this._currentValue = initialValue;
     }
     subscribe(observer) {
         this.observers.add(observer);
-        if (this._currentValue !== undefined)
-            observer.update(this._currentValue);
-    }
-    notify(data) {
-        this._currentValue = data;
-        this.observers.forEach((observer) => observer.update(data));
+        if (this.currentValue !== undefined)
+            observer.update(this.currentValue);
     }
 }
 

package/build/cjs/packages/phoenix/src/core/classes/behavior_subject/behavior_subject.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;"}
+{"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/core/classes/subject/subject.js

@@ -6,10 +6,15 @@ class Subject {
     constructor(initialValue) {
         this.observers = new Set();
         this.initialValue = initialValue;
+        this.currentValue = initialValue;
     }
     get size() {
         return this.observers.size;
     }
+    getValue() {
+        var _a;
+        return (_a = this.currentValue) !== null && _a !== void 0 ? _a : this.initialValue;
+    }
     subscribe(observer) {
         this.observers.add(observer);
         if (this.initialValue !== undefined)
@@ -19,7 +24,9 @@ class Subject {
         this.observers.delete(observer);
     }
     notify(data) {
-        this.observers.forEach((observer) => observer.update(data));
+        const newValue = typeof data === 'function' ? data(this.currentValue) : data;
+        this.currentValue = newValue;
+        this.observers.forEach((observer) => observer.update(newValue));
     }
 }
 

package/build/cjs/packages/phoenix/src/core/classes/subject/subject.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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/core/context/context_consumer_controller.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
-var context_consumer_messages_names = require('./context_consumer_messages_names.js');
 var context_constants = require('./context_constants.js');
+var context_consumer_messages_names = require('./context_consumer_messages_names.js');
 
 var _ContextConsumerController_host, _ContextConsumerController_asyncConsumerSentinelId, _ContextConsumerController_asyncConsumerIntervalId;
 class ContextConsumerController {

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var phoenix_light_lit_elements_constants = require('./phoenix_light_lit_elements_constants.js');
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_elements_constants = require('./phoenix_light_lit_elements_constants.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element_utils = require('./phoenix_light_lit_element_utils.js');
@@ -29,7 +29,8 @@ class PhoenixLightLitElement extends lit.LitElement {
                 this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
             }
         };
-        this._handleComponentRendered = ({ detail }) => {
+        this._handleComponentRendered = (event) => {
+            const { detail } = event;
             const renderedElement = detail.$el.tagName.toLowerCase();
             if (this._childrenForRenderToWatch.includes(renderedElement)) {
                 const elToRemoveIndex = this._childrenForRenderToWatch.findIndex((tagName) => tagName === renderedElement);
@@ -37,7 +38,7 @@ class PhoenixLightLitElement extends lit.LitElement {
             }
             if (!this._childrenForRenderToWatch.length) {
                 this.allChildrenRendered();
-                this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentConnected);
+                this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
             }
         };
         this._dispatchLifecycleEvent = (eventName) => {
@@ -58,14 +59,18 @@ class PhoenixLightLitElement extends lit.LitElement {
     }
     _setupChildrenConnectedWatch() {
         this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
-        if (!this._childrenForConnectionToWatch.length)
+        if (!this._childrenForConnectionToWatch.length) {
             this.allChildrenConnected();
+            return;
+        }
         this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _setupChildrenRenderWatch() {
         this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
-        if (!this._childrenForRenderToWatch.length)
+        if (!this._childrenForRenderToWatch.length) {
             this.allChildrenRendered();
+            return;
+        }
         this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
     _getComponentsNamesForConnectionToWatch() {

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

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

package/build/cjs/packages/phoenix/src/directives/observable_directive.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+var observer = require('../core/classes/observer/observer.js');
+var directive = require('../../../../external/lit/external/lit-html/directive.js');
+var asyncDirective = require('../../../../external/lit/external/lit-html/async-directive.js');
+
+class ObserveDirective extends asyncDirective.AsyncDirective {
+    render(observable, render) {
+        var _a;
+        if (this._observable !== observable) {
+            (_a = this.observable) === null || _a === void 0 ? void 0 : _a.unsubscribe(this.observer);
+            this._observable = observable;
+            this._render = render;
+            if (this.isConnected)
+                this.subscribe(observable, render);
+        }
+        return lit.noChange;
+    }
+    subscribe(observable, render) {
+        this.observable = observable;
+        this.observer = new observer.Observer((value) => {
+            this.setValue(typeof render === 'function' ? render(value) : value);
+        });
+        observable.subscribe(this.observer);
+    }
+    disconnected() {
+        var _a;
+        (_a = this.observable) === null || _a === void 0 ? void 0 : _a.unsubscribe(this.observer);
+    }
+    reconnected() {
+        this.subscribe(this._observable, this._render);
+    }
+}
+const observe = directive.directive(ObserveDirective);
+
+exports.observe = observe;
+//# sourceMappingURL=observable_directive.js.map

package/build/cjs/packages/phoenix/src/directives/observable_directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,yDAAiE;AACzF,6BAA6B,+DAAuE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}