@shoper/phoenix_design_system 0.7.1 → 0.7.2

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

@@ -0,0 +1,85 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { state, property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { PORTAL_EVENTS } from './portal_constants.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+
+let HPortal = class HPortal extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._id = v4();
+        this._initialChildren = [];
+        this.to = '';
+        this.disabled = false;
+        this._initialChildren = [...this.children];
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        const shouldOpenPortal = this._initialChildren.length > 0 && !this.disabled;
+        if (shouldOpenPortal) {
+            this.openPortal();
+        }
+    }
+    updated(props) {
+        super.updated(props);
+        if (this.children.length > 0) {
+            if (!this.disabled) {
+                this._initialChildren = [...this.children];
+                this.openPortal();
+            }
+        }
+        this.disabled ? this.closePortal() : this.openPortal();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closePortal();
+    }
+    openPortal() {
+        const openPortalEvent = new CustomEvent(PORTAL_EVENTS.open, {
+            composed: true,
+            detail: {
+                portalId: this._id,
+                to: this.to,
+                content: [...this._initialChildren]
+            }
+        });
+        document.dispatchEvent(openPortalEvent);
+        this.dispatchEvent(openPortalEvent);
+    }
+    closePortal() {
+        const closePortalEvent = new CustomEvent(PORTAL_EVENTS.close, {
+            composed: true,
+            detail: {
+                portalId: this._id,
+                to: this.to
+            }
+        });
+        document.dispatchEvent(closePortalEvent);
+        this.dispatchEvent(closePortalEvent);
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HPortal.prototype, "_id", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HPortal.prototype, "_initialChildren", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HPortal.prototype, "to", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HPortal.prototype, "disabled", void 0);
+HPortal = __decorate([
+    phoenixCustomElement('h-portal'),
+    __metadata("design:paramtypes", [])
+], HPortal);
+
+export { HPortal };
+//# sourceMappingURL=portal.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { HPortal } from './portal';
+import { HPortalTarget } from './portal_target';
+export declare const PORTAL_EVENTS: {
+    open: string;
+    close: string;
+};
+export declare const PORTAL_TARGET_NAME_PROP = "name";
+export declare const PORTAL_TARGET_COMPONENT_NAME = "h-portal-target";
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-portal': HPortal;
+        'h-portal-target': HPortalTarget;
+    }
+}

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

@@ -0,0 +1,9 @@
+const PORTAL_EVENTS = {
+    open: `portal.open`,
+    close: 'portal.close'
+};
+const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+
+export { PORTAL_EVENTS, 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

@@ -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/portal/portal_target.d.ts

@@ -0,0 +1,13 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { TPortalEventData } from './portal_types';
+export declare class HPortalTarget extends PhoenixLightLitElement {
+    static portalTargetsNames: Set<string>;
+    name: string;
+    _portalElementsMap: Record<string, HTMLElement[]>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    portalElements: ({ detail: { portalId, content, to } }: CustomEvent<TPortalEventData>) => void;
+    removeTeleportedItems: ({ detail: { portalId, to } }: CustomEvent<TPortalEventData>) => void;
+    doesDestinationMatch(destination: string): boolean;
+    allowOnlyOnePortalTargetWithName(): void;
+}

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

@@ -0,0 +1,75 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.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;
+let HPortalTarget = HPortalTarget_1 = class HPortalTarget extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this._portalElementsMap = {};
+        this.portalElements = ({ detail: { portalId, content, to } }) => {
+            var _a;
+            if (!this.doesDestinationMatch(to))
+                return;
+            const newPortalElements = [...content].map((el) => this.appendChild(el));
+            const elementsInProtal = (_a = this._portalElementsMap[portalId]) !== null && _a !== void 0 ? _a : [];
+            this._portalElementsMap[portalId] = [...newPortalElements, ...elementsInProtal];
+        };
+        this.removeTeleportedItems = ({ detail: { portalId, to } }) => {
+            var _a;
+            if (!this.doesDestinationMatch(to))
+                return;
+            (_a = this._portalElementsMap[portalId]) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+                if (el.parentElement === this) {
+                    this.removeChild(el);
+                }
+            });
+            this._portalElementsMap[portalId] = [];
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.allowOnlyOnePortalTargetWithName();
+        document.addEventListener(PORTAL_EVENTS.open, this.portalElements, {
+            capture: true
+        });
+        document.addEventListener(PORTAL_EVENTS.close, this.removeTeleportedItems, {
+            capture: true
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(PORTAL_EVENTS.open, this.portalElements);
+        document.removeEventListener(PORTAL_EVENTS.close, this.removeTeleportedItems);
+        HPortalTarget_1.portalTargetsNames.delete(this[PORTAL_TARGET_NAME_PROP]);
+    }
+    doesDestinationMatch(destination) {
+        return destination === this[PORTAL_TARGET_NAME_PROP];
+    }
+    allowOnlyOnePortalTargetWithName() {
+        if (HPortalTarget_1.portalTargetsNames.has(this[PORTAL_TARGET_NAME_PROP])) {
+            this.remove();
+            throw new PortalTargetError(`Portal target with name "${this[PORTAL_TARGET_NAME_PROP]}" already exists.`);
+        }
+        HPortalTarget_1.portalTargetsNames.add(this[PORTAL_TARGET_NAME_PROP]);
+    }
+};
+HPortalTarget.portalTargetsNames = new Set();
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HPortalTarget.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HPortalTarget.prototype, "_portalElementsMap", void 0);
+HPortalTarget = HPortalTarget_1 = __decorate([
+    phoenixCustomElement('h-portal-target')
+], HPortalTarget);
+
+export { HPortalTarget };
+//# sourceMappingURL=portal_target.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_target.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;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/portal/portal_target_error.d.ts

@@ -0,0 +1,2 @@
+export declare class PortalTargetError extends Error {
+}

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

@@ -0,0 +1,5 @@
+class PortalTargetError extends Error {
+}
+
+export { PortalTargetError };
+//# sourceMappingURL=portal_target_error.js.map

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

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

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

@@ -0,0 +1,5 @@
+export declare type TPortalEventData = {
+    portalId: string;
+    to: string;
+    content: Element[];
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class BtnController implements ReactiveController {
+    host: ReactiveControllerHost & HTMLElement;
+    private _keystrokesController;
+    constructor(host: ReactiveControllerHost & HTMLElement, callback: () => void);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,20 @@
+import 'lit';
+import { KeystrokesController } from './keystrokes_controller/keystrokes_controller.js';
+
+class BtnController {
+    constructor(host, callback) {
+        (this.host = host).addController(this);
+        this.host.tabIndex = 0;
+        this.host.setAttribute('role', 'button');
+        this._keystrokesController = new KeystrokesController({
+            host,
+            keys: [' ', 'enter'],
+            callback
+        });
+    }
+    hostConnected() { }
+    hostDisconnected() { }
+}
+
+export { BtnController };
+//# sourceMappingURL=btn_controller.js.map

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

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

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

@@ -0,0 +1,10 @@
+import { ReactiveController } from 'lit';
+import { TClickOutsideControllerProps } from './click_outside_controller_types';
+export declare class ClickOutsideController implements ReactiveController {
+    #private;
+    private _name?;
+    constructor({ host, container, name }: TClickOutsideControllerProps);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private _dispatchClickedOutsideEvent;
+}

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

@@ -0,0 +1,38 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './click_outside_controller_messages.js';
+
+var _ClickOutsideController_host, _ClickOutsideController_container;
+class ClickOutsideController {
+    constructor({ host, container, name }) {
+        _ClickOutsideController_host.set(this, void 0);
+        _ClickOutsideController_container.set(this, void 0);
+        this._dispatchClickedOutsideEvent = (ev) => {
+            const clickedOutsideEvent = new CustomEvent(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, {
+                bubbles: true,
+                detail: {
+                    target: ev.target,
+                    name: this._name
+                }
+            });
+            const { target } = ev;
+            if (target.contains(__classPrivateFieldGet(this, _ClickOutsideController_container, "f"))) {
+                __classPrivateFieldGet(this, _ClickOutsideController_host, "f").dispatchEvent(clickedOutsideEvent);
+            }
+        };
+        __classPrivateFieldSet(this, _ClickOutsideController_host, host, "f");
+        __classPrivateFieldSet(this, _ClickOutsideController_container, container, "f");
+        this._name = name;
+        __classPrivateFieldGet(this, _ClickOutsideController_host, "f").addController(this);
+    }
+    hostConnected() {
+        document.addEventListener('click', this._dispatchClickedOutsideEvent);
+    }
+    hostDisconnected() {
+        document.removeEventListener('click', this._dispatchClickedOutsideEvent);
+    }
+}
+_ClickOutsideController_host = new WeakMap(), _ClickOutsideController_container = new WeakMap();
+
+export { ClickOutsideController };
+//# sourceMappingURL=click_outside_controller.js.map

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_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;"}

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_messages.d.ts

@@ -0,0 +1,3 @@
+export declare const CLICK_OUTSIDE_CONTROLLER_MESSAGES: {
+    clickedOutside: string;
+};

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

@@ -0,0 +1,6 @@
+const CLICK_OUTSIDE_CONTROLLER_MESSAGES = {
+    clickedOutside: 'clickedOutside'
+};
+
+export { CLICK_OUTSIDE_CONTROLLER_MESSAGES };
+//# sourceMappingURL=click_outside_controller_messages.js.map

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

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

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.d.ts

@@ -0,0 +1,6 @@
+import { TWebComponentsContextControllerHost } from "../../core/context/context_controller_types";
+export declare type TClickOutsideControllerProps = {
+    host: TWebComponentsContextControllerHost;
+    container: HTMLElement;
+    name?: string;
+};

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

@@ -0,0 +1,2 @@
+import '@phoenixRoot/core/context/context_controller_types';
+//# sourceMappingURL=click_outside_controller_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"click_outside_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/click_outside_controller/click_outside_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoD,oDAAoD,CAAC"}

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

@@ -0,0 +1,14 @@
+import { ReactiveController } from 'lit';
+import { TKeystrokesControllerProps } from './keystrokes_controller_types';
+export declare class KeystrokesController implements ReactiveController {
+    #private;
+    private _keys;
+    private _callback;
+    private _buffer;
+    private _lastKeyTime;
+    constructor({ host, keys, callback }: TKeystrokesControllerProps);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private _catchKeySequence;
+    private _bindKeysWithCallback;
+}

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

@@ -0,0 +1,46 @@
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { KEYSTROKE_DELAY_IN_MS } from './keystrokes_controller_constants.js';
+
+var _KeystrokesController_host;
+class KeystrokesController {
+    constructor({ host, keys, callback }) {
+        _KeystrokesController_host.set(this, void 0);
+        this._buffer = [];
+        this._lastKeyTime = Date.now();
+        this._catchKeySequence = (ev) => {
+            ev.stopImmediatePropagation();
+            const key = ev.key.toLowerCase();
+            const currentTime = Date.now();
+            if (currentTime - this._lastKeyTime > KEYSTROKE_DELAY_IN_MS) {
+                this._buffer = [];
+            }
+            this._buffer.push(key);
+            this._lastKeyTime = currentTime;
+            this._bindKeysWithCallback(this._buffer.join(''));
+        };
+        this._bindKeysWithCallback = (keySequence) => {
+            const isCorrectKeyPressed = !!this._keys.find((key) => {
+                return key.toLowerCase() === keySequence;
+            });
+            if (isCorrectKeyPressed) {
+                this._buffer = [];
+                this._callback();
+            }
+        };
+        __classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
+        this._keys = keys;
+        this._callback = callback;
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").addEventListener('keydown', this._catchKeySequence);
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _KeystrokesController_host, "f").removeEventListener('keydown', this._catchKeySequence);
+    }
+}
+_KeystrokesController_host = new WeakMap();
+
+export { KeystrokesController };
+//# sourceMappingURL=keystrokes_controller.js.map

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

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

@@ -0,0 +1 @@
+export declare const KEYSTROKE_DELAY_IN_MS = 500;

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

@@ -0,0 +1,4 @@
+const KEYSTROKE_DELAY_IN_MS = 500;
+
+export { KEYSTROKE_DELAY_IN_MS };
+//# sourceMappingURL=keystrokes_controller_constants.js.map

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

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

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

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

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

@@ -0,0 +1,2 @@
+import '@phoenixRoot/core/context/context_controller_types';
+//# sourceMappingURL=keystrokes_controller_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keystrokes_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/keystrokes_controller/keystrokes_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoD,oDAAoD,CAAC"}

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

@@ -0,0 +1,10 @@
+import { TRelativePositionCalculatorConstructorOptions, TRelativePositionControllerPositionData } from "./relative_position_controller_types";
+export declare class PositionCalculator {
+    #private;
+    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect }: TRelativePositionCalculatorConstructorOptions);
+    calculatePosition(): TRelativePositionControllerPositionData;
+    private _canFitTopSide;
+    private _canFitBottomSide;
+    private _calculateSidePosition;
+    private calculateAlignmentPosition;
+}

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

@@ -0,0 +1,87 @@
+import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../external/tslib/tslib.es6.js';
+import { CALCULATOR_DIRECTIONS } from './relative_position_controller_constants.js';
+
+var _PositionCalculator_direction, _PositionCalculator_relativeElementRect, _PositionCalculator_positionElementRect, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, _PositionCalculator_containerRect;
+class PositionCalculator {
+    constructor({ direction, relativeElementRect, positionElementRect, container = document.body, nearestNonStaticElementFromElementToPositionRect }) {
+        _PositionCalculator_direction.set(this, void 0);
+        _PositionCalculator_relativeElementRect.set(this, void 0);
+        _PositionCalculator_positionElementRect.set(this, void 0);
+        _PositionCalculator_nearestNonStaticElementFromElementToPositionRect.set(this, void 0);
+        _PositionCalculator_containerRect.set(this, void 0);
+        __classPrivateFieldSet(this, _PositionCalculator_direction, direction, "f");
+        __classPrivateFieldSet(this, _PositionCalculator_relativeElementRect, relativeElementRect, "f");
+        __classPrivateFieldSet(this, _PositionCalculator_positionElementRect, positionElementRect, "f");
+        __classPrivateFieldSet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, nearestNonStaticElementFromElementToPositionRect, "f");
+        __classPrivateFieldSet(this, _PositionCalculator_containerRect, container.getBoundingClientRect(), "f");
+    }
+    calculatePosition() {
+        const [side, alignment = CALCULATOR_DIRECTIONS.center] = __classPrivateFieldGet(this, _PositionCalculator_direction, "f").split('-');
+        const sidePosition = this._calculateSidePosition(side);
+        const alignmentPosition = this.calculateAlignmentPosition(alignment);
+        return {
+            ...sidePosition,
+            ...alignmentPosition
+        };
+    }
+    _canFitTopSide() {
+        const elementTop = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        return elementTop > __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").top && elementTop > 0;
+    }
+    _canFitBottomSide() {
+        const elementBottom = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top + __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        return elementBottom < __classPrivateFieldGet(this, _PositionCalculator_containerRect, "f").bottom && elementBottom < window.innerHeight;
+    }
+    _calculateSidePosition(side) {
+        const topSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").height;
+        const bottomSideOfRelativeElement = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").bottom - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").top;
+        const centerOfRelativeElement = (topSideOfRelativeElement + bottomSideOfRelativeElement) / 2;
+        switch (side) {
+            case CALCULATOR_DIRECTIONS.top:
+                if (!this._canFitTopSide() && !this._canFitBottomSide())
+                    return { top: centerOfRelativeElement };
+                if (!this._canFitTopSide())
+                    return { top: bottomSideOfRelativeElement };
+                return { top: topSideOfRelativeElement };
+            case CALCULATOR_DIRECTIONS.bottom:
+                if (!this._canFitTopSide() && !this._canFitBottomSide())
+                    return { top: centerOfRelativeElement };
+                if (!this._canFitBottomSide())
+                    return { top: topSideOfRelativeElement };
+                return { top: bottomSideOfRelativeElement };
+            case CALCULATOR_DIRECTIONS.left:
+                // do zaimplementowania
+                return { top: 0 };
+            case CALCULATOR_DIRECTIONS.right:
+                // do zaimplementowania
+                return { top: 0 };
+            default:
+                return { top: 0 };
+        }
+    }
+    calculateAlignmentPosition(side) {
+        const alignmentToLeftSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left;
+        const alignmentToRightSide = __classPrivateFieldGet(this, _PositionCalculator_relativeElementRect, "f").right - __classPrivateFieldGet(this, _PositionCalculator_nearestNonStaticElementFromElementToPositionRect, "f").left - __classPrivateFieldGet(this, _PositionCalculator_positionElementRect, "f").width;
+        const alignmentToCenter = (alignmentToLeftSide + alignmentToRightSide) / 2;
+        switch (side) {
+            case CALCULATOR_DIRECTIONS.top:
+                // do zaimplementowania
+                return { left: 0 };
+            case CALCULATOR_DIRECTIONS.bottom:
+                // do zaimplementowania
+                return { left: 0 };
+            case CALCULATOR_DIRECTIONS.left:
+                return { left: alignmentToLeftSide };
+            case CALCULATOR_DIRECTIONS.right:
+                return { left: alignmentToRightSide };
+            case CALCULATOR_DIRECTIONS.center:
+                return { left: alignmentToCenter };
+            default:
+                return { left: 0 };
+        }
+    }
+}
+_PositionCalculator_direction = new WeakMap(), _PositionCalculator_relativeElementRect = new WeakMap(), _PositionCalculator_positionElementRect = new WeakMap(), _PositionCalculator_nearestNonStaticElementFromElementToPositionRect = new WeakMap(), _PositionCalculator_containerRect = new WeakMap();
+
+export { PositionCalculator };
+//# sourceMappingURL=relative_position_calculator.js.map

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

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

@@ -0,0 +1,12 @@
+import { IRelativePositionController, TRelativePositionControllerConstructorOptions } from "./relative_position_controller_types";
+export declare class RelativePositionController implements IRelativePositionController {
+    #private;
+    constructor({ host, container, direction, relativeElement, elementToPosition }: TRelativePositionControllerConstructorOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    position(): void;
+    private _findNearestScrollableElement;
+    private _findContainer;
+    private _findParentBasedOnStyle;
+    private _setElementPosition;
+}