@shoper/phoenix_design_system 1.0.0 → 1.0.2

package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.d.ts

@@ -0,0 +1,6 @@
+export declare const HINT_ELEMENT_NAME = "h-hint";
+export declare const HINT_CONTENT_ELEMENT_NAME = "h-hint-content";
+export declare const HINT_CLASS_NAME = "hint";
+export declare const HINT_CONTENT_CLASS_NAME: string;
+export declare const HINT_REMOVED_CLASS_NAME: string;
+export declare const HINT_DEFAULT_OFFSET = 16;

package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.js

@@ -0,0 +1,8 @@
+const HINT_ELEMENT_NAME = 'h-hint';
+const HINT_CONTENT_ELEMENT_NAME = 'h-hint-content';
+const HINT_CLASS_NAME = 'hint';
+const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
+const HINT_DEFAULT_OFFSET = 16;
+
+export { HINT_CLASS_NAME, HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME, HINT_DEFAULT_OFFSET, HINT_ELEMENT_NAME };
+//# sourceMappingURL=hint_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/hints/hint_content.d.ts

@@ -0,0 +1,4 @@
+import { BaseMessageContent } from '../base_message_content';
+export declare class HHintContent extends BaseMessageContent {
+    connectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/messages/hints/hint_content.js

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME } from './hint_constants.js';
+import { BaseMessageContent } from '../base_message_content.js';
+
+let HHintContent = class HHintContent extends BaseMessageContent {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(HINT_CONTENT_CLASS_NAME);
+    }
+};
+HHintContent = __decorate([
+    phoenixCustomElement(HINT_CONTENT_ELEMENT_NAME)
+], HHintContent);
+
+export { HHintContent };
+//# sourceMappingURL=hint_content.js.map

package/build/esm/packages/phoenix/src/components/messages/hints/hint_content.js.map

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

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { TemplateResult } from 'lit-html';
+import { BaseMessage } from '../base_message';
+export declare class HTooltip extends BaseMessage {
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -0,0 +1,27 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { html } from 'lit-html';
+import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
+import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
+import { BaseMessage } from '../base_message.js';
+
+let HTooltip = class HTooltip extends BaseMessage {
+    connectedCallback() {
+        super.connectedCallback(TOOLTIP_CLASS_NAME);
+        this.classList.add(TOOLTIP_CLASS_NAME);
+    }
+    render() {
+        super.render();
+        return html `
+            <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
+};
+HTooltip = __decorate([
+    phoenixCustomElement(TOOLTIP_ELEMENT_NAME)
+], HTooltip);
+
+export { HTooltip };
+//# sourceMappingURL=tooltip.js.map

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,+CAAmD;AAC9E;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/messages/tooltips/tooltip_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TOOLTIP_ELEMENT_NAME = "h-tooltip";
+export declare const TOOLTIP_CONTENT_ELEMENT_NAME = "h-tooltip-content";
+export declare const TOOLTIP_CLASS_NAME = "tooltip";
+export declare const TOOLTIP_CONTENT_CLASS_NAME: string;

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip_constants.js

@@ -0,0 +1,7 @@
+const TOOLTIP_ELEMENT_NAME = 'h-tooltip';
+const TOOLTIP_CONTENT_ELEMENT_NAME = 'h-tooltip-content';
+const TOOLTIP_CLASS_NAME = 'tooltip';
+const TOOLTIP_CONTENT_CLASS_NAME = `${TOOLTIP_CLASS_NAME}__content`;
+
+export { TOOLTIP_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, TOOLTIP_CONTENT_ELEMENT_NAME, TOOLTIP_ELEMENT_NAME };
+//# sourceMappingURL=tooltip_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip_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/components/messages/tooltips/tooltip_content.d.ts

@@ -0,0 +1,4 @@
+import { BaseMessageContent } from '../base_message_content';
+export declare class HTooltipContent extends BaseMessageContent {
+    connectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip_content.js

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { TOOLTIP_CONTENT_CLASS_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltip_constants.js';
+import { BaseMessageContent } from '../base_message_content.js';
+
+let HTooltipContent = class HTooltipContent extends BaseMessageContent {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(TOOLTIP_CONTENT_CLASS_NAME);
+    }
+};
+HTooltipContent = __decorate([
+    phoenixCustomElement(TOOLTIP_CONTENT_ELEMENT_NAME)
+], HTooltipContent);
+
+export { HTooltipContent };
+//# sourceMappingURL=tooltip_content.js.map

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip_content.js.map

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

package/build/esm/packages/phoenix/src/components/portal/portal_constants.d.ts

@@ -7,6 +7,7 @@ export declare const PORTAL_EVENTS: {
 export declare const PORTAL_TARGET_NAME_PROP = "name";
 export declare const PORTAL_COMPONENT_NAME = "h-portal";
 export declare const PORTAL_TARGET_COMPONENT_NAME = "h-portal-target";
+export declare const PORTAL_TARGET_ATTRIBUTE_NAME = "portal-target";
 declare global {
     interface HTMLElementTagNameMap {
         'h-portal': HPortal;

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

@@ -3,7 +3,8 @@ const PORTAL_EVENTS = {
     close: 'portal.close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
-const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
-export { PORTAL_EVENTS, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
 //# sourceMappingURL=portal_constants.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map

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

package/build/esm/packages/phoenix/src/components/tabs/tabs.d.ts

@@ -2,6 +2,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 export declare class HTabs extends PhoenixLightLitElement {
     private _$selectedTab;
     private _$tabs;
+    watchChildrenRendered: boolean;
     connectedCallback(): void;
     private _handleArrowNavigation;
     private _getFocusedTabIndex;

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

@@ -11,6 +11,7 @@ import { TABS_EVENT_NAMES } from './tabs_constants.js';
 let HTabs = class HTabs extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.watchChildrenRendered = true;
         this._handleArrowNavigation = ({ key }) => {
             const currentTabIndex = this._getFocusedTabIndex();
             if (currentTabIndex === undefined)
@@ -39,7 +40,7 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
         this._$tabs = [...this.querySelectorAll('h-tab')];
         new KeystrokesController({
             host: this,
-            keySequences: [['ArrowRight'], ['ArrowLeft']],
+            keys: ['ArrowRight', 'ArrowLeft'],
             callback: this._handleArrowNavigation,
             target: this
         });

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

package/build/esm/packages/phoenix/src/components/tag/tag.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HTag extends PhoenixLightLitElement {
+    clickable: boolean;
+    private removable;
+    private _btnController;
+    connectedCallback(): void;
+    private _setupEvents;
+    private _handleClick;
+}

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

@@ -0,0 +1,45 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+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 { TAG_EVENT_NAMES, TAG_CSS_CLASSES } from './tag_constants.js';
+
+let HTag = class HTag extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.clickable = false;
+        this.removable = false;
+        this._handleClick = () => {
+            /**
+             * 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
+             */
+            const eventName = this.removable ? TAG_EVENT_NAMES.remove : TAG_EVENT_NAMES.click;
+            this.dispatchEvent(new CustomEvent(eventName));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(TAG_CSS_CLASSES.tag);
+        this.removable = !!this.querySelector('h-tag-remove-button');
+        if (!this.removable && !this.clickable)
+            return;
+        this._setupEvents();
+        this._btnController = new BtnController(this, this._handleClick);
+        this.classList.add(TAG_CSS_CLASSES.tagInteractive);
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._handleClick);
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTag.prototype, "clickable", void 0);
+HTag = __decorate([
+    phoenixCustomElement('h-tag')
+], HTag);
+
+export { HTag };
+//# sourceMappingURL=tag.js.map

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

package/build/esm/packages/phoenix/src/components/tag/tag_constants.d.ts

@@ -0,0 +1,10 @@
+export declare const TAG_CSS_CLASSES: {
+    readonly tag: "tag";
+    readonly tagRemoveButton: "tag__remove-button";
+    readonly tagInteractive: "tag_interactive";
+};
+export declare const TAG_REMOVE_ICON_SLOT_NAME = "remove-icon";
+export declare const TAG_EVENT_NAMES: {
+    readonly click: "tag.click";
+    readonly remove: "tag.remove";
+};

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

@@ -0,0 +1,14 @@
+const tagBaseClass = 'tag';
+const TAG_CSS_CLASSES = {
+    tag: tagBaseClass,
+    tagRemoveButton: `${tagBaseClass}__remove-button`,
+    tagInteractive: `${tagBaseClass}_interactive`
+};
+const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
+const TAG_EVENT_NAMES = {
+    click: 'tag.click',
+    remove: 'tag.remove'
+};
+
+export { TAG_CSS_CLASSES, TAG_EVENT_NAMES, TAG_REMOVE_ICON_SLOT_NAME };
+//# sourceMappingURL=tag_constants.js.map

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

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

package/build/esm/packages/phoenix/src/components/tag/tag_remove_button.d.ts

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult } from 'lit-html';
+export declare class HTagRemoveButton extends PhoenixLightLitElement {
+    connectedCallback(): void;
+    private _setupAriaAttributes;
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,27 @@
+import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { html } from 'lit-html';
+import { TAG_CSS_CLASSES, TAG_REMOVE_ICON_SLOT_NAME } from './tag_constants.js';
+
+let HTagRemoveButton = class HTagRemoveButton extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(TAG_CSS_CLASSES.tagRemoveButton);
+        this._setupAriaAttributes();
+    }
+    _setupAriaAttributes() {
+        this.setAttribute('aria-label', 'remove tag');
+    }
+    render() {
+        return html `
+            ${this.hasSlot(TAG_REMOVE_ICON_SLOT_NAME) ? this.getSlot(TAG_REMOVE_ICON_SLOT_NAME) : html `<h-icon icon-name="icon-x"></h-icon>`}
+        `;
+    }
+};
+HTagRemoveButton = __decorate([
+    phoenixCustomElement('h-tag-remove-button')
+], HTagRemoveButton);
+
+export { HTagRemoveButton };
+//# sourceMappingURL=tag_remove_button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,4CAAgD;AAC3E;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.js

@@ -8,7 +8,7 @@ class BtnController {
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new KeystrokesController({
             host,
-            keySequences: [['enter'], [' ']],
+            keys: ['enter', ' '],
             callback,
             target: host
         });

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

@@ -2,14 +2,20 @@ import { ReactiveController } from 'lit';
 import { TKeystrokesControllerProps } from './keystrokes_controller_types';
 export declare class KeystrokesController implements ReactiveController {
     #private;
-    private _keySequences;
+    private _keys;
     private _callback;
     private _buffer;
-    constructor({ host, keySequences, callback, target }: TKeystrokesControllerProps);
+    constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
     hostConnected(): void;
     hostDisconnected(): void;
     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

@@ -3,7 +3,7 @@ import 'lit';
 
 var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keySequences, callback, target }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
         _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
@@ -17,15 +17,51 @@ class KeystrokesController {
             this._bindSavedKeysWithCallback(ev, this._buffer);
         };
         this._bindSavedKeysWithCallback = (ev, savedKeys) => {
-            const areAllKeysPressed = !!this._keySequences.find((keySequence) => {
-                const keysPressedStatuses = keySequence.reduce((keysPressStatuses, keyInSequence) => {
-                    return [...keysPressStatuses, savedKeys.includes(keyInSequence.toLowerCase())];
-                }, []);
-                return keysPressedStatuses.find((keyPressedStatus) => keyPressedStatus === false) === undefined;
-            });
+            if (typeof this._keys === 'string') {
+                this._bindWithOneKey(ev, savedKeys);
+                return;
+            }
+            const areAllKeysPressed = this._isKeySequenceMultiple(this._keys)
+                ? this._areAllKeysPressedInMultipleSequences(this._keys, savedKeys)
+                : this._isOneOfTheKeysPressed(this._keys, savedKeys);
             if (areAllKeysPressed)
                 this._callback(ev);
         };
+        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);
+            });
+        };
+        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))
@@ -33,7 +69,7 @@ class KeystrokesController {
         };
         __classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
         __classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
-        this._keySequences = keySequences;
+        this._keys = keys;
         this._callback = callback;
         __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
         __classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);

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

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.js

@@ -0,0 +1,4 @@
+import 'ts-toolbelt';
+import './relative_position_controller_constants';
+import './relative_position_controller_types';
+//# sourceMappingURL=relative_position_calculator_types.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_calculator_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative_position_calculator_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_calculator_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAsC,0CAA0C,CAAC;AACjF,OAA2B,sCAAsC,CAAC"}

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

@@ -7,7 +7,7 @@ import throttle_1 from '../../../../../external/lodash/throttle.js';
 
 var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [], offset = 0 }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => false, portalElementsNames = [], offset = 0 }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts

@@ -1,4 +1,38 @@
+export declare const VERTICAL_DIRECTIONS: {
+    readonly bottomLeft: "bottom-left";
+    readonly bottomRight: "bottom-right";
+    readonly bottomCenter: "bottom-center";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+    readonly topCenter: "top-center";
+};
+export declare const HORIZONTAL_DIRECTIONS: {
+    readonly rightTop: "right-top";
+    readonly rightCenter: "right-center";
+    readonly rightBottom: "right-bottom";
+    readonly leftTop: "left-top";
+    readonly leftCenter: "left-center";
+    readonly leftBottom: "left-bottom";
+};
+export declare const CENTER_DIRECTIONS: {
+    readonly centerTop: "center-top";
+    readonly centerRight: "center-right";
+    readonly centerBottom: "center-bottom";
+    readonly centerLeft: "center-left";
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
+};
 export declare const DIRECTIONS: {
+    readonly centerTop: "center-top";
+    readonly centerRight: "center-right";
+    readonly centerBottom: "center-bottom";
+    readonly centerLeft: "center-left";
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
     readonly bottomLeft: "bottom-left";
     readonly bottomRight: "bottom-right";
     readonly bottomCenter: "bottom-center";

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -1,10 +1,12 @@
-const DIRECTIONS = {
+const VERTICAL_DIRECTIONS = {
     bottomLeft: 'bottom-left',
     bottomRight: 'bottom-right',
     bottomCenter: 'bottom-center',
     topLeft: 'top-left',
     topRight: 'top-right',
-    topCenter: 'top-center',
+    topCenter: 'top-center'
+};
+const HORIZONTAL_DIRECTIONS = {
     rightTop: 'right-top',
     rightCenter: 'right-center',
     rightBottom: 'right-bottom',
@@ -12,6 +14,21 @@ const DIRECTIONS = {
     leftCenter: 'left-center',
     leftBottom: 'left-bottom'
 };
+const CENTER_DIRECTIONS = {
+    centerTop: 'center-top',
+    centerRight: 'center-right',
+    centerBottom: 'center-bottom',
+    centerLeft: 'center-left',
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left'
+};
+const DIRECTIONS = {
+    ...HORIZONTAL_DIRECTIONS,
+    ...VERTICAL_DIRECTIONS,
+    ...CENTER_DIRECTIONS
+};
 const CALCULATOR_DIRECTIONS = {
     bottom: 'bottom',
     top: 'top',
@@ -32,5 +49,5 @@ const RELATIVE_POSITION_CONTROLLER_EVENTS = {
     disabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.disabledPositioning`
 };
 
-export { CALCULATOR_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT };
+export { CALCULATOR_DIRECTIONS, CENTER_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, HORIZONTAL_DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT, VERTICAL_DIRECTIONS };
 //# sourceMappingURL=relative_position_controller_constants.js.map

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

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.js

@@ -1,4 +1,5 @@
-import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
 import 'lit';
 import 'ts-toolbelt';
+import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
+import './relative_position_calculator_types';
 //# sourceMappingURL=relative_position_controller_types.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"relative_position_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_controller_types.ts"],"names":[],"mappings":"AAAA,OAAkD,8FAA8F,CAAC;AACjJ,OAA2D,KAAK,CAAC;AAEjE,OAAoB,aAAa,CAAC"}
+{"version":3,"file":"relative_position_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/relative_position_controller/relative_position_controller_types.ts"],"names":[],"mappings":"AAAA,OAA2D,KAAK,CAAC;AAEjE,OAAoB,aAAa,CAAC;AAClC,OAA2B,8FAA8F,CAAC;AAC1H,OAAqC,sCAAsC,CAAC"}

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

@@ -1,13 +1,16 @@
-import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
+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;