@shoper/phoenix_design_system 1.2.3-6 → 1.2.3-8

package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js

@@ -0,0 +1,55 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+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/btn_controller.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { VisibilityController } from '../../controllers/visibility_controller/visibility_controller.js';
+import { TOGGLE_ACTIONS, TOGGLE_EVENT_NAME, TOGGLE_CONTEXT_NAME } from './toggle_constants.js';
+
+let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.action = TOGGLE_ACTIONS.collapse;
+        this._visibility = {
+            collapse: (isOpened) => {
+                isOpened ? this._visibilityController.show() : this._visibilityController.hide();
+            },
+            expand: (isOpened) => {
+                isOpened ? this._visibilityController.hide() : this._visibilityController.show();
+            }
+        };
+        this._dispatchToggleEvent = () => {
+            this.dispatchEvent(new CustomEvent(TOGGLE_EVENT_NAME, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchToggleEvent);
+        this._visibilityController = new VisibilityController(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._toggleContextConsumer = new ContextConsumerController(this);
+        this._opened$ = await this._toggleContextConsumer.consumeAsync(TOGGLE_CONTEXT_NAME);
+        this._openedObserver = new Observer((isOpened) => {
+            this._visibility[this.action](isOpened);
+        });
+        this._opened$.subscribe(this._openedObserver);
+        this.addEventListener('click', this._dispatchToggleEvent);
+    }
+    disconnectedCallback() {
+        this._opened$.unsubscribe(this._openedObserver);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HToggleBtn.prototype, "action", void 0);
+HToggleBtn = __decorate([
+    phoenixCustomElement('h-toggle-btn'),
+    __metadata("design:paramtypes", [])
+], HToggleBtn);
+
+export { HToggleBtn };
+//# sourceMappingURL=toggle_button.js.map

package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js.map

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

package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.d.ts

@@ -0,0 +1,6 @@
+export declare const TOGGLE_ACTIONS: {
+    readonly expand: "expand";
+    readonly collapse: "collapse";
+};
+export declare const TOGGLE_CONTEXT_NAME = "opened";
+export declare const TOGGLE_EVENT_NAME = "toggle";

package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js

@@ -0,0 +1,9 @@
+const TOGGLE_ACTIONS = {
+    expand: 'expand',
+    collapse: 'collapse'
+};
+const TOGGLE_CONTEXT_NAME = 'opened';
+const TOGGLE_EVENT_NAME = 'toggle';
+
+export { TOGGLE_ACTIONS, TOGGLE_CONTEXT_NAME, TOGGLE_EVENT_NAME };
+//# sourceMappingURL=toggle_constants.js.map

package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js.map

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

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.d.ts

@@ -0,0 +1,3 @@
+export interface IToggle {
+    toggle(): void;
+}

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js

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

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js.map

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

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

@@ -32,10 +32,14 @@ class ClickOutsideController {
         __classPrivateFieldSet(this, _ClickOutsideController_enabled, false, "f");
     }
     _setupClickEventListener() {
-        document.addEventListener('click', this._dispatchClickedOutsideEvent);
+        document.addEventListener('click', this._dispatchClickedOutsideEvent, {
+            capture: true
+        });
     }
     _removeClickEventListener() {
-        document.removeEventListener('click', this._dispatchClickedOutsideEvent);
+        document.removeEventListener('click', this._dispatchClickedOutsideEvent, {
+            capture: true
+        });
     }
     hostDisconnected() {
         this._removeClickEventListener();

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map

@@ -1 +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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts

@@ -11,6 +11,7 @@ export declare class PhoenixLightLitElement extends LitElement {
     firstUpdated(props: PropertyValues): void;
     private _setupChildrenConnectedWatch;
     private _setupChildrenRenderWatch;
+    private _getComponentsChildrenToWatch;
     private _getComponentsNamesForConnectionToWatch;
     private _getComponentsNamesForRenderedToWatch;
     private _handleComponentConnected;

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

@@ -54,7 +54,9 @@ class PhoenixLightLitElement extends LitElement {
         this.isWebComponentRendered = true;
     }
     _setupChildrenConnectedWatch() {
-        this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
+        this._childrenForConnectionToWatch = this.childrenToWatch
+            ? this._getComponentsChildrenToWatch()
+            : this._getComponentsNamesForConnectionToWatch();
         if (!this._childrenForConnectionToWatch.length) {
             this.allChildrenConnected();
             return;
@@ -62,13 +64,24 @@ class PhoenixLightLitElement extends LitElement {
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _setupChildrenRenderWatch() {
-        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
+        this._childrenForRenderToWatch = this.childrenToWatch
+            ? this._getComponentsChildrenToWatch()
+            : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForRenderToWatch.length) {
             this.allChildrenRendered();
             return;
         }
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
+    _getComponentsChildrenToWatch() {
+        const childrenToWatch = [];
+        this.childrenToWatch.forEach((elementName) => {
+            return [...this.querySelectorAll(elementName)].forEach(($element) => {
+                childrenToWatch.push($element.tagName.toLowerCase());
+            });
+        });
+        return childrenToWatch;
+    }
     _getComponentsNamesForConnectionToWatch() {
         return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
     }
@@ -77,8 +90,8 @@ class PhoenixLightLitElement extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         this.isWebComponentConnected = true;
+        this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         if (this.watchChildrenConnected)
             this._setupChildrenConnectedWatch();
         if (this.watchChildrenRendered)

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,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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -94,3 +94,7 @@ export { HTooltipContent } from "./components/messages/tooltips/tooltip_content"
 export { HIcon } from "./components/icon/icon";
 export { HTag } from "./components/tag/tag";
 export { HTagRemoveButton } from "./components/tag/tag_remove_button";
+export { HToggle } from './components/toggle/toggle';
+export { HToggleBtn } from './components/toggle/toggle_button';
+export * from './components/toggle/toggle_types';
+export * from './components/toggle/toggle_constants';

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

@@ -20,6 +20,7 @@ export { RelativePositionController } from './controllers/relative_position_cont
 export { HDropdown } from './components/dropdown/dropdown.js';
 export { HSelect } from './components/form/select/select.js';
 export { HFile } from './components/form/file_picker/file/file.js';
+export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';
 export { HFilePicker } from './components/form/file_picker/file_picker.js';
 export { HFilePickerLabel } from './components/form/file_picker/file_picker_label.js';
 export { HModal } from './components/modal/modal.js';
@@ -35,7 +36,6 @@ export { HControlContent } from './components/form/control/control_content.js';
 export { HControlElement } from './components/form/control/control_element.js';
 export { HControlLabel } from './components/form/control/control_label.js';
 export { HControlAdditionalContent } from './components/form/control/control_additional_content.js';
-export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';
 export { HInput } from './components/form/input/input.js';
 export { HInputControl } from './components/form/input/input_control.js';
 export { HInputIcon } from './components/form/input/input_icon.js';
@@ -82,4 +82,7 @@ export { HTooltip } from './components/messages/tooltips/tooltip.js';
 export { HTooltipContent } from './components/messages/tooltips/tooltip_content.js';
 export { HTag } from './components/tag/tag.js';
 export { HTagRemoveButton } from './components/tag/tag_remove_button.js';
+export { TOGGLE_ACTIONS, TOGGLE_CONTEXT_NAME, TOGGLE_EVENT_NAME } from './components/toggle/toggle_constants.js';
+export { HToggle } from './components/toggle/toggle.js';
+export { HToggleBtn } from './components/toggle/toggle_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.2.3-6",
+  "version": "1.2.3-8",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "npm": ">=6"
   },
   "scripts": {
-    "storybook": "start-storybook --no-open --port 6007",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider && start-storybook --no-open --port 6007",
     "build": "rimraf ./build/ && tsc --project tsconfig.build.json && rollup --config rollup.config.js",
     "watch": "rollup --config rollup.config.js --watch",
     "tests:unit": "jest --max-workers=1 -c .config/jest/jest.config.js",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.2.0",
+    "@dreamcommerce/utilities": "^1.2.2",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",