@shoper/phoenix_design_system 1.0.4 → 1.1.0-10

package/build/esm/packages/phoenix/src/components/portal/portal_target.js

@@ -1,8 +1,8 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property, state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { PortalTargetError } from './portal_target_error.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { PortalTargetError } from './portal_target_error.js';
 import { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP } from './portal_constants.js';
 
 var HPortalTarget_1;

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../controllers/btn_controller.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 
 let HScrollTo = class HScrollTo extends PhoenixLightLitElement {
     constructor() {

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

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../../controllers/btn_controller.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
 import { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME } from './tab_constants.js';
 
 let HTab = class HTab extends PhoenixLightLitElement {

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { property } from '@lit/reactive-element/decorators.js';
-import { BtnController } from '../../controllers/btn_controller.js';
+import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
 import { TAG_EVENT_NAMES, TAG_CSS_CLASSES } from './tag_constants.js';
 
 let HTag = class HTag extends PhoenixLightLitElement {
@@ -10,7 +10,8 @@ let HTag = class HTag extends PhoenixLightLitElement {
         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/esm/packages/phoenix/src/components/tag/tag.js.map

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

package/build/esm/packages/phoenix/src/controllers/{btn_controller.d.ts → btn_controller/btn_controller.d.ts}

@@ -1,8 +1,9 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { TBtnControllerOption } from "./btn_controller_types";
 export declare class BtnController implements ReactiveController {
     host: ReactiveControllerHost & HTMLElement;
     private _keystrokesController;
-    constructor(host: ReactiveControllerHost & HTMLElement, callback: (ev: Event) => void);
+    constructor(host: ReactiveControllerHost & HTMLElement, callback: (ev: Event) => void, { isNavigable }?: TBtnControllerOption);
     hostConnected(): void;
     hostDisconnected(): void;
 }

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

@@ -1,10 +1,11 @@
 import 'lit';
-import { KeystrokesController } from './keystrokes_controller/keystrokes_controller.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { KeystrokesController } from '../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 ? UiDomUtils.makeNavigable(this.host) : UiDomUtils.makeUnnavigable(this.host);
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new KeystrokesController({
             host,

package/build/{cjs/packages/phoenix/src/controllers → esm/packages/phoenix/src/controllers/btn_controller}/btn_controller.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.d.ts

@@ -0,0 +1,3 @@
+export declare type TBtnControllerOption = {
+    isNavigable?: boolean;
+};

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=btn_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/btn_controller/btn_controller_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"btn_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/btn_controller/btn_controller_types.ts"],"names":[],"mappings":""}

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

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

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};

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

@@ -0,0 +1,7 @@
+const LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS = {
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+};
+
+export { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS };
+//# sourceMappingURL=list_box_controller_constants.js.map

package/build/esm/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;"}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts

@@ -0,0 +1,10 @@
+import { Any } from 'ts-toolbelt';
+import { ReactiveControllerHost } from 'lit';
+import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
+export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
+export declare type TListBoxKeyboardControllerConstructorOptions = {
+    host: ReactiveControllerHost & HTMLElement;
+    $list: HTMLElement;
+    listItemSelector?: string;
+    orientation?: TListBoxKeyboardNavigationDirection;
+};

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js

@@ -0,0 +1,4 @@
+import 'ts-toolbelt';
+import 'lit';
+import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
+//# sourceMappingURL=list_box_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveController } from 'lit';
+import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
+export declare class ListBoxKeyboardController implements ReactiveController {
+    #private;
+    constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
+    hostConnected(): void;
+    private _handleArrowNavigation;
+    private _getPrevOptionIndex;
+    private _getNextOptionIndex;
+}

package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js

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

package/build/esm/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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core/classes/behavior_subject/behavior_subject.d.ts

@@ -1,8 +1,6 @@
 import { Observer } from "../observer/observer";
 import { Subject } from "../subject/subject";
 export declare class BehaviorSubject<T> extends Subject<T> {
-    private _currentValue?;
     constructor(initialValue?: T);
     subscribe(observer: Observer<T>): void;
-    notify(data: T): void;
 }

package/build/esm/packages/phoenix/src/core/classes/behavior_subject/behavior_subject.js

@@ -3,16 +3,11 @@ import { Subject } from '../subject/subject.js';
 class BehaviorSubject extends 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/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/core/classes/subject/subject.d.ts

@@ -1,11 +1,13 @@
 import { Observer } from '../observer/observer';
-import { ISubject } from "./subject_types";
+import { ISubject, TSetData } from "./subject_types";
 export declare class Subject<T> implements ISubject<T> {
     protected observers: Set<Observer<T>>;
     protected initialValue?: T;
+    protected currentValue?: T;
     constructor(initialValue?: T);
     get size(): number;
+    getValue(): T | undefined;
     subscribe(observer: Observer<T>): void;
     unsubscribe(observer: Observer<T>): void;
-    notify(data: T): void;
+    notify(data: T | TSetData<T>): void;
 }

package/build/esm/packages/phoenix/src/core/classes/subject/subject.js

@@ -2,10 +2,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)
@@ -15,7 +20,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/esm/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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/core/classes/subject/subject_types.d.ts

@@ -2,5 +2,6 @@ import { IObserver } from "../observer/observer_types";
 export interface ISubject<T> {
     subscribe(observer: IObserver<T>): void;
     unsubscribe(observer: IObserver<T>): void;
-    notify(data: T): void;
+    notify(data: T | TSetData<T>): void;
 }
+export declare type TSetData<T> = (data: T | undefined) => T;

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

@@ -1,7 +1,7 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { WEB_COMPONENT_CONTEXT_EVENTS } from './context_consumer_messages_names.js';
 import { CONTEXT_ASYNC_CONSUMER_DEFAULT_INTERVAL_RATE, CONTEXT_ASYNC_CONSUMER_DFAULT_MAX_WAITING_TIME } from './context_constants.js';
+import { WEB_COMPONENT_CONTEXT_EVENTS } from './context_consumer_messages_names.js';
 
 var _ContextConsumerController_host, _ContextConsumerController_asyncConsumerSentinelId, _ContextConsumerController_asyncConsumerIntervalId;
 class ContextConsumerController {

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

@@ -1,5 +1,5 @@
-import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES, DEFAULT_SLOT_NAME } from './phoenix_light_lit_elements_constants.js';
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES, DEFAULT_SLOT_NAME } from './phoenix_light_lit_elements_constants.js';
 import { LitElement, html, nothing } from 'lit';
 import { state, property } from 'lit/decorators';
 import { PhoenixLightLitElementUtils } from './phoenix_light_lit_element_utils.js';
@@ -25,7 +25,8 @@ class PhoenixLightLitElement extends LitElement {
                 this.removeEventListener(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);
@@ -33,7 +34,7 @@ class PhoenixLightLitElement extends LitElement {
             }
             if (!this._childrenForRenderToWatch.length) {
                 this.allChildrenRendered();
-                this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentConnected);
+                this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
             }
         };
         this._dispatchLifecycleEvent = (eventName) => {
@@ -54,14 +55,18 @@ class PhoenixLightLitElement extends 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_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_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
     _getComponentsNamesForConnectionToWatch() {

package/build/esm/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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/directives/observable_directive.d.ts

@@ -4,6 +4,7 @@ declare class ObserveDirective<T = unknown> extends AsyncDirective {
     private _observable;
     private observable;
     private observer;
+    private _render;
     render(observable: ISubject<T>, render?: Function): symbol;
     subscribe(observable: ISubject<T>, render?: Function): void;
     disconnected(): void;

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

@@ -1,32 +1,36 @@
 import { noChange } from 'lit';
-import { AsyncDirective, directive } from 'lit/async-directive.js';
-import { Observer } from '@phoenixRoot/core/classes/observer/observer';
-import '@phoenixRoot/core/classes/subject/subject_types';
-class ObserveDirective extends 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;
-            if (this.isConnected)
-                this.subscribe(observable, render);
-        }
-        return noChange;
-    }
-    subscribe(observable, render) {
-        this.observable = observable;
-        this.observer = new 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);
-    }
-}
-export const observe = directive(ObserveDirective);
-//# sourceMappingURL=observable_directive.js.map
+import { Observer } from '../core/classes/observer/observer.js';
+import { directive as e } from '../../../../external/lit/external/lit-html/directive.js';
+import { AsyncDirective as c } from '../../../../external/lit/external/lit-html/async-directive.js';
+
+class ObserveDirective extends c {
+    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 noChange;
+    }
+    subscribe(observable, render) {
+        this.observable = observable;
+        this.observer = new 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 = e(ObserveDirective);
+
+export { observe };
+//# sourceMappingURL=observable_directive.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"observable_directive.js","sourceRoot":"","sources":["../../../../../../src/directives/observable_directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AACvE,OAAyB,iDAAiD,CAAC;AAE3E,MAAM,gBAA8B,SAAQ,cAAc;IAK/C,MAAM,CAAC,UAAuB,EAAE,MAAiB;;QACpD,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;YACjC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;YAE9B,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;SAC5D;QAED,OAAO,QAAQ,CAAC;IACpB,CAAC;IAEM,SAAS,CAAC,UAAuB,EAAE,MAAiB;QACvD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,QAAQ,CAAC,CAAC,KAAQ,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;QAEH,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAEM,YAAY;;QACf,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAEM,WAAW;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;CACJ;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;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/index.d.ts

@@ -1,3 +1,8 @@
+export { HOption } from "./components/form/select/components/option/select_option";
+export { HOptionContent } from "./components/form/select/components/option/select_option_content";
+export { HOptions } from "./components/form/select/components/select_options";
+export { HSelectToggler } from "./components/form/select/components/toggler/select_toggler";
+export { HSelect } from "./components/form/select/select";
 export { DEFAULT_SLOT_NAME } from "./core/phoenix_light_lit_element/phoenix_light_lit_elements_constants";
 export { IPhoenixWebComponentClass } from "./global_types";
 export { ContextProviderController } from "./core/context/context_provider_controller";
@@ -50,7 +55,7 @@ export { HAccordionGroup } from './components/accordion/accordion_group';
 export { HAccordionToggler } from './components/accordion/accordion_toggler';
 export { HAccordionContent } from './components/accordion/accordion_content';
 export * from './components/accordion/accordion_constants';
-export { BtnController } from './controllers/btn_controller';
+export { BtnController } from './controllers/btn_controller/btn_controller';
 export { HDropdown } from './components/dropdown/dropdown';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler';
 export { HDropdownContent } from './components/dropdown/dropdown_content';

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

@@ -1,10 +1,24 @@
 export { DEFAULT_SLOT_NAME } from './core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js';
-export { ContextProviderController } from './core/context/context_provider_controller.js';
-export { ContextConsumerController } from './core/context/context_consumer_controller.js';
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-export { HPortalTarget } from './components/portal/portal_target.js';
+export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
+export { BtnController } from './controllers/btn_controller/btn_controller.js';
+export { HOption } from './components/form/select/components/option/select_option.js';
+export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
+export { HOptions } from './components/form/select/components/select_options.js';
+export { ContextConsumerController } from './core/context/context_consumer_controller.js';
+export { HSelectToggler } from './components/form/select/components/toggler/select_toggler.js';
+export { ContextProviderController } from './core/context/context_provider_controller.js';
 export { HPortal } from './components/portal/portal.js';
+export { HPortalTarget } from './components/portal/portal_target.js';
 export { BackdropController } from './components/backdrop/controller/backdrop_controller.js';
+export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
+export { HDropdownContent } from './components/dropdown/dropdown_content.js';
+export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
+export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
+export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
+export { HDropdown } from './components/dropdown/dropdown.js';
+export { HIcon } from './components/icon/icon.js';
+export { HSelect } from './components/form/select/select.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBody } from './components/modal/modal_body.js';
@@ -42,16 +56,8 @@ export { HTextareaControl } from './components/form/textarea/textarea_control.js
 export { ACCORDION_CONTEXTS, ACCORDION_EVENTS, ACCORDION_MODE } from './components/accordion/accordion_constants.js';
 export { HAccordion } from './components/accordion/accordion.js';
 export { HAccordionGroup } from './components/accordion/accordion_group.js';
-export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
-export { BtnController } from './controllers/btn_controller.js';
 export { HAccordionContent } from './components/accordion/accordion_content.js';
 export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
-export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
-export { HDropdownContent } from './components/dropdown/dropdown_content.js';
-export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
-export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
-export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
-export { HDropdown } from './components/dropdown/dropdown.js';
 export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group.js';
 export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
@@ -71,7 +77,6 @@ export { HHint } from './components/messages/hints/hint.js';
 export { HHintContent } from './components/messages/hints/hint_content.js';
 export { HTooltip } from './components/messages/tooltips/tooltip.js';
 export { HTooltipContent } from './components/messages/tooltips/tooltip_content.js';
-export { HIcon } from './components/icon/icon.js';
 export { HTag } from './components/tag/tag.js';
 export { HTagRemoveButton } from './components/tag/tag_remove_button.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.0.4",
+  "version": "1.1.0-10",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.0.1",
+    "@dreamcommerce/utilities": "^1.1.0-1",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",