@shoper/phoenix_design_system 0.9.1 → 0.10.1-1

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

@@ -0,0 +1,36 @@
+import 'lit';
+import { TRANSITION_CSS_CLASSES } from './transition_controller_constants.js';
+
+class TransitionController {
+    constructor(host, transitionName) {
+        (this.host = host).addController(this);
+        this._transitionName = transitionName;
+    }
+    hostConnected() {
+        this._transitionDuration = parseFloat(getComputedStyle(this.host).transitionDuration) * 1000;
+    }
+    hostDisconnected() { }
+    show(callback) {
+        this.host.hidden = false;
+        this.host.classList.add(`${this._transitionName}-${TRANSITION_CSS_CLASSES.transitionEnd}`);
+        requestAnimationFrame(() => {
+            this.host.classList.remove(`${this._transitionName}-${TRANSITION_CSS_CLASSES.transitionStart}`);
+            if (typeof callback === 'function')
+                callback();
+        });
+    }
+    hide(callback) {
+        requestAnimationFrame(() => {
+            if (typeof callback === 'function')
+                callback();
+            this.host.classList.add(`${this._transitionName}-${TRANSITION_CSS_CLASSES.transitionStart}`);
+            this.host.classList.remove(`${this._transitionName}-${TRANSITION_CSS_CLASSES.transitionEnd}`);
+            setTimeout(() => {
+                this.host.hidden = true;
+            }, this._transitionDuration);
+        });
+    }
+}
+
+export { TransitionController };
+//# sourceMappingURL=transition_controller.js.map

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

package/build/esm/packages/phoenix/src/controllers/transition_controller/transition_controller_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TRANSITION_CSS_CLASSES: {
+    readonly transitionStart: "transition-start";
+    readonly transitionEnd: "transition-end";
+};

package/build/esm/packages/phoenix/src/controllers/transition_controller/transition_controller_constants.js

@@ -0,0 +1,7 @@
+const TRANSITION_CSS_CLASSES = {
+    transitionStart: 'transition-start',
+    transitionEnd: 'transition-end'
+};
+
+export { TRANSITION_CSS_CLASSES };
+//# sourceMappingURL=transition_controller_constants.js.map

package/build/esm/packages/phoenix/src/controllers/transition_controller/transition_controller_constants.js.map

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

package/build/esm/packages/phoenix/src/core/context/context_provider_controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController } from 'lit';
 import { TContextValueKey, TWebComponentsContextControllerHost } from "./context_controller_types";
+import { ReactiveController } from 'lit';
 export declare class ContextProviderController<TValue> implements ReactiveController {
     #private;
     constructor(host: TWebComponentsContextControllerHost);

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

@@ -1,7 +1,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { WEB_COMPONENT_CONTEXT_EVENTS } from './context_consumer_messages_names.js';
 import { ValuesContainer } from '../../../../star_core/build/esm/packages/star_core/src/classes/values_container/values_container.js';
+import { WEB_COMPONENT_CONTEXT_EVENTS } from './context_consumer_messages_names.js';
 
 var _ContextProviderController_host, _ContextProviderController_contextValues, _ContextProviderController_handleRequestedValue;
 class ContextProviderController {

package/build/esm/packages/phoenix/src/core/observer/observable.d.ts

@@ -0,0 +1,9 @@
+import { ISubject } from './observer_types';
+import { Observer } from './observer';
+export declare class Subject<T> implements ISubject<T> {
+    private _observers;
+    get size(): number;
+    subscribe(observer: Observer<T>): void;
+    unsubscribe(observer: Observer<T>): void;
+    notify(data: T): void;
+}

package/build/esm/packages/phoenix/src/core/observer/observable.js

@@ -0,0 +1,20 @@
+class Subject {
+    constructor() {
+        this._observers = new Set();
+    }
+    get size() {
+        return this._observers.size;
+    }
+    subscribe(observer) {
+        this._observers.add(observer);
+    }
+    unsubscribe(observer) {
+        this._observers.delete(observer);
+    }
+    notify(data) {
+        this._observers.forEach((observer) => observer.update(data));
+    }
+}
+
+export { Subject };
+//# sourceMappingURL=observable.js.map

package/build/esm/packages/phoenix/src/core/observer/observable.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/core/observer/observer.d.ts

@@ -0,0 +1,6 @@
+import { IObserver } from './observer_types';
+export declare class Observer<T> implements IObserver<T> {
+    private _callback;
+    constructor(callback: (options: T) => void);
+    update(data: T): void;
+}

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

@@ -0,0 +1,11 @@
+class Observer {
+    constructor(callback) {
+        this._callback = callback;
+    }
+    update(data) {
+        this._callback(data);
+    }
+}
+
+export { Observer };
+//# sourceMappingURL=observer.js.map

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

package/build/esm/packages/phoenix/src/core/observer/observer_types.d.ts

@@ -0,0 +1,8 @@
+export interface IObserver<T> {
+    update(data: T): void;
+}
+export interface ISubject<T> {
+    subscribe(observer: IObserver<T>): void;
+    unsubscribe(observer: IObserver<T>): void;
+    notify(data: T): void;
+}

package/build/esm/packages/phoenix/src/core/observer/observer_types.js

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

package/build/esm/packages/phoenix/src/core/observer/observer_types.js.map

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

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

@@ -0,0 +1,8 @@
+export declare const BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};

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

@@ -0,0 +1,11 @@
+const BREAKPOINTS = {
+    xs: 576,
+    sm: 768,
+    md: 1000,
+    lg: 1200,
+    xl: 1440,
+    xxl: 1920
+};
+
+export { BREAKPOINTS };
+//# sourceMappingURL=global_constants.js.map

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

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

@@ -7,7 +7,6 @@ export { HPortal } from './components/portal/portal';
 export { HPortalTarget } from './components/portal/portal_target';
 export { HModal } from './components/modal/modal';
 export { HModalOpener } from './components/modal/modal_opener';
-export { HModalBackdrop } from './components/modal/modal_backdrop';
 export { HModalBody } from './components/modal/modal_body';
 export { HModalFooter } from './components/modal/modal_footer';
 export { HModalHeader } from './components/modal/modal_header';
@@ -17,6 +16,11 @@ export { HControlContent } from './components/form_controls/control_content';
 export { HControlElement } from './components/form_controls/control_element';
 export { HControlLabel } from './components/form_controls/control_label';
 export { HControlAdditionalContent } from './components/form_controls/control_additional_content';
+export { HAccordion } from './components/accordion/accordion';
+export { HAccordionGroup } from './components/accordion/accordion_group';
+export { HAccordionToggler } from './components/accordion/accordion_toggler';
+export { HAccordionContent } from './components/accordion/accordion_content';
+export * from './components/accordion/accordion_constants';
 export { BtnController } from './controllers/btn_controller';
 export { HDropdown } from './components/dropdown/dropdown';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler';
@@ -25,3 +29,4 @@ export { ClickOutsideController } from './controllers/click_outside_controller/c
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
+export { HBackdrop } from './components/backdrop/backdrop';

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

@@ -6,7 +6,6 @@ export { HPortalTarget } from './components/portal/portal_target.js';
 export { HPortal } from './components/portal/portal.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';
-export { HModalBackdrop } from './components/modal/modal_backdrop.js';
 export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';
 export { HModalHeader } from './components/modal/modal_header.js';
@@ -16,12 +15,18 @@ export { HControlContent } from './components/form_controls/control_content.js';
 export { HControlElement } from './components/form_controls/control_element.js';
 export { HControlLabel } from './components/form_controls/control_label.js';
 export { HControlAdditionalContent } from './components/form_controls/control_additional_content.js';
+export { ACCORDION_CONTEXTS, ACCORDION_EVENTS } from './components/accordion/accordion_constants.js';
+export { HAccordionContent } from './components/accordion/accordion_content.js';
+export { HAccordionGroup } from './components/accordion/accordion_group.js';
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { BtnController } from './controllers/btn_controller.js';
+export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
+export { HAccordion } from './components/accordion/accordion.js';
 export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
+export { HDropdownContent } from './components/dropdown/dropdown_content.js';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
 export { HDropdown } from './components/dropdown/dropdown.js';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
-export { HDropdownContent } from './components/dropdown/dropdown_content.js';
+export { HBackdrop } from './components/backdrop/backdrop.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;"}
+{"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;"}

package/package.json

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

package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -1,66 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators = require('lit/decorators');
-var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
-var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
-var modal_constants = require('./modal_constants.js');
-var modal = require('./modal.js');
-
-exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            if (!this.visible) {
-                this.visible = true;
-            }
-        };
-        this._hide = () => {
-            if (!modal.HModal.isSomeModalOpen()) {
-                this.visible = false;
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
-        document.addEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
-        document.removeEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
-    }
-    updated() {
-        if (modal.HModal.isSomeModalOpen()) {
-            this.visible = true;
-            this._disableScrolling();
-        }
-        else {
-            this._enableScrolling();
-        }
-    }
-    _disableScrolling() {
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = '15px';
-    }
-    _enableScrolling() {
-        document.body.style.removeProperty('overflow');
-        document.body.style.removeProperty('padding-right');
-    }
-    render() {
-        return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
-    }
-};
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Object)
-], exports.HModalBackdrop.prototype, "visible", void 0);
-exports.HModalBackdrop = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-modal-backdrop')
-], exports.HModalBackdrop);
-//# sourceMappingURL=modal_backdrop.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.d.ts

@@ -1,12 +0,0 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
-export declare class HModalBackdrop extends PhoenixLightLitElement {
-    visible: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _show;
-    private _hide;
-    protected updated(): void;
-    private _disableScrolling;
-    private _enableScrolling;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -1,64 +0,0 @@
-import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { MODAL_EVENTS } from './modal_constants.js';
-import { HModal } from './modal.js';
-
-let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.visible = false;
-        this._show = () => {
-            if (!this.visible) {
-                this.visible = true;
-            }
-        };
-        this._hide = () => {
-            if (!HModal.isSomeModalOpen()) {
-                this.visible = false;
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener(MODAL_EVENTS.opened, this._show);
-        document.addEventListener(MODAL_EVENTS.closed, this._hide);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(MODAL_EVENTS.opened, this._show);
-        document.removeEventListener(MODAL_EVENTS.closed, this._hide);
-    }
-    updated() {
-        if (HModal.isSomeModalOpen()) {
-            this.visible = true;
-            this._disableScrolling();
-        }
-        else {
-            this._enableScrolling();
-        }
-    }
-    _disableScrolling() {
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = '15px';
-    }
-    _enableScrolling() {
-        document.body.style.removeProperty('overflow');
-        document.body.style.removeProperty('padding-right');
-    }
-    render() {
-        return html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HModalBackdrop.prototype, "visible", void 0);
-HModalBackdrop = __decorate([
-    phoenixCustomElement('h-modal-backdrop')
-], HModalBackdrop);
-
-export { HModalBackdrop };
-//# sourceMappingURL=modal_backdrop.js.map