@shoper/phoenix_design_system 0.25.0-8 → 0.25.0

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.d.ts

@@ -5,10 +5,17 @@ export declare class KeystrokesController implements ReactiveController {
     private _keys;
     private _callback;
     private _buffer;
-    private _lastKeyTime;
-    constructor({ host, keys, callback }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
-    private _catchKeySequence;
-    private _bindKeysWithCallback;
+    private _clearBuffer;
+    private _saveKey;
+    private _bindSavedKeysWithCallback;
+    private _bindWithOneKey;
+    private _isKeySequenceMultiple;
+    private _areAllKeysPressedInMultipleSequences;
+    private _areAllKeysPressedInSingleSequence;
+    private _isOneOfTheKeysPressed;
+    private _calculateIndexesInSavedKeys;
+    private _removeKey;
 }

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

@@ -1,46 +1,90 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { KEYSTROKE_DELAY_IN_MS } from './keystrokes_controller_constants.js';
 
-var _KeystrokesController_host;
+var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keys, callback }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
+        _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
-        this._lastKeyTime = Date.now();
-        this._catchKeySequence = (ev) => {
-            // ev.stopImmediatePropagation();
+        this._clearBuffer = () => {
+            this._buffer = [];
+        };
+        this._saveKey = (ev) => {
             const key = ev.key.toLowerCase();
-            const currentTime = Date.now();
-            if (currentTime - this._lastKeyTime > KEYSTROKE_DELAY_IN_MS) {
-                this._buffer = [];
+            if (!this._buffer.includes(key))
+                this._buffer = [...this._buffer, key];
+            this._bindSavedKeysWithCallback(ev, this._buffer);
+        };
+        this._bindSavedKeysWithCallback = (ev, savedKeys) => {
+            if (typeof this._keys === 'string') {
+                this._bindWithOneKey(ev, savedKeys);
+                return;
             }
-            this._buffer.push(key);
-            this._lastKeyTime = currentTime;
-            this._bindKeysWithCallback(ev, this._buffer.join(''));
+            const areAllKeysPressed = this._isKeySequenceMultiple(this._keys)
+                ? this._areAllKeysPressedInMultipleSequences(this._keys, savedKeys)
+                : this._isOneOfTheKeysPressed(this._keys, savedKeys);
+            if (areAllKeysPressed)
+                this._callback(ev);
         };
-        this._bindKeysWithCallback = (ev, keySequence) => {
-            const isCorrectKeyPressed = !!this._keys.find((key) => {
-                return key.toLowerCase() === keySequence;
+        this._bindWithOneKey = (ev, savedKeys) => {
+            if (!savedKeys.includes(this._keys))
+                return;
+            this._callback(ev);
+        };
+        this._isKeySequenceMultiple = (keySequence) => {
+            const firstSequence = keySequence[0];
+            if (typeof firstSequence === 'object')
+                return true;
+            return false;
+        };
+        this._areAllKeysPressedInMultipleSequences = (keySequences, savedKeys) => {
+            return !!keySequences.find((keySequence) => {
+                return this._areAllKeysPressedInSingleSequence(keySequence, savedKeys);
             });
-            if (isCorrectKeyPressed) {
-                this._buffer = [];
-                this._callback(ev);
-            }
+        };
+        this._areAllKeysPressedInSingleSequence = (keySequence, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keySequence, savedKeys);
+            if (indexesInSavedKeys.includes(-1))
+                return false;
+            const firstPressedKeyIndex = indexesInSavedKeys[0];
+            const lastPressedKeyIndex = indexesInSavedKeys[indexesInSavedKeys.length - 1];
+            const areKeysPressedSequentially = lastPressedKeyIndex - firstPressedKeyIndex === indexesInSavedKeys.length - 1;
+            return areKeysPressedSequentially;
+        };
+        this._isOneOfTheKeysPressed = (keys, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keys, savedKeys);
+            return typeof indexesInSavedKeys.find((index) => index > -1) === 'number';
+        };
+        this._calculateIndexesInSavedKeys = (keySequence, savedKeys) => {
+            return keySequence.reduce((allIndexes, currentKeyInSequence) => {
+                return [...allIndexes, savedKeys.indexOf(currentKeyInSequence.toLowerCase())];
+            }, []);
+        };
+        // do ogrania jeszcze string czyli zapięcie się na jeden guzik
+        this._removeKey = (ev) => {
+            const key = ev.key.toLowerCase();
+            if (this._buffer.includes(key))
+                this._buffer = this._buffer.filter((currentSavedKey) => currentSavedKey !== key);
         };
         __classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
+        __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
         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('keydown', this._catchKeySequence);
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('focusout', this._clearBuffer);
     }
     hostDisconnected() {
-        __classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('keydown', this._catchKeySequence);
+        __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);
     }
 }
-_KeystrokesController_host = new WeakMap();
+_KeystrokesController_host = new WeakMap(), _KeystrokesController_target = new WeakMap();
 
 export { KeystrokesController };
 //# sourceMappingURL=keystrokes_controller.js.map

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts

@@ -1,6 +1,7 @@
 import { TWebComponentsContextControllerHost } from "../../core/context/context_controller_types";
 export declare type TKeystrokesControllerProps = {
     host: TWebComponentsContextControllerHost;
-    keys: string[];
+    keys: string[][] | string[] | string;
     callback: (ev: Event) => void;
+    target: Element;
 };

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

@@ -1,13 +1,16 @@
 import { LitElement, PropertyValues, TemplateResult, nothing } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
     _slots: Record<string, TemplateResult[]>;
+    watchChildrenRendered: boolean;
+    watchChildrenConnected: boolean;
     protected childrenToWatch: string[];
     isWebComponentConnected: boolean;
     isWebComponentRendered: boolean;
     private _childrenForConnectionToWatch;
     private _childrenForRenderToWatch;
     firstUpdated(props: PropertyValues): void;
-    private _setupChildrenWatch;
+    private _setupChildrenConnectedWatch;
+    private _setupChildrenRenderWatch;
     private _getComponentsNamesForConnectionToWatch;
     private _getComponentsNamesForRenderedToWatch;
     private _handleComponentConnected;

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

@@ -8,6 +8,8 @@ class PhoenixLightLitElement extends LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.watchChildrenRendered = false;
+        this.watchChildrenConnected = false;
         this.isWebComponentConnected = false;
         this.isWebComponentRendered = false;
         this._childrenForConnectionToWatch = [];
@@ -50,14 +52,16 @@ class PhoenixLightLitElement extends LitElement {
         this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered);
         this.isWebComponentRendered = true;
     }
-    _setupChildrenWatch() {
+    _setupChildrenConnectedWatch() {
         this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
-        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForConnectionToWatch.length)
             this.allChildrenConnected();
+        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
+    }
+    _setupChildrenRenderWatch() {
+        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForRenderToWatch.length)
             this.allChildrenRendered();
-        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
     _getComponentsNamesForConnectionToWatch() {
@@ -70,7 +74,10 @@ class PhoenixLightLitElement extends LitElement {
         super.connectedCallback();
         this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         this.isWebComponentConnected = true;
-        this._setupChildrenWatch();
+        if (this.watchChildrenConnected)
+            this._setupChildrenConnectedWatch();
+        if (this.watchChildrenRendered)
+            this._setupChildrenRenderWatch();
     }
     allChildrenConnected() { }
     allChildrenRendered() { }

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

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

@@ -83,6 +83,3 @@ export { HHint } from "./components/messages/hints/hint";
 export { HHintContent } from "./components/messages/hints/hint_content";
 export { HTooltip } from "./components/messages/tooltips/tooltip";
 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";

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.25.0-8",
+  "version": "0.25.0",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",