@shoper/phoenix_design_system 1.18.10-7 → 1.18.10-9

package/build/esm/packages/phoenix/src/components/details/details_group.js

@@ -0,0 +1,175 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+import { createRef, ref } from 'lit/directives/ref';
+import { DETAILS_MODE, DETAILS_EVENTS, DETAILS_CSS_CLASSES, DETAILS_ANIMATION_DURATION } from './details_constants.js';
+
+let HDetailsGroup = class HDetailsGroup extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this._isDisabled = false;
+        this._mode = DETAILS_MODE.multi;
+        this._$parentDetails = null;
+        this._detailsRef = createRef();
+        this._togglerId = v4();
+        this._animationFrameId = null;
+        this._closeTimeoutId = null;
+        this._syncWithParentDetails = () => {
+            if (!this._$parentDetails)
+                return;
+            this._mode = this._$parentDetails.mode;
+            const shouldBeDisabled = this._$parentDetails.disabled;
+            const hasDisabledStateChanged = shouldBeDisabled !== this._isDisabled;
+            if (hasDisabledStateChanged) {
+                shouldBeDisabled ? this.disable() : this.enable();
+            }
+        };
+        this._hideOtherDetailsGroups = () => {
+            var _a;
+            if (this._isDisabled)
+                return;
+            (_a = this._$parentDetails) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h-details-group').forEach(($detailsGroup) => {
+                if ($detailsGroup === this)
+                    return;
+                $detailsGroup.hide();
+            });
+        };
+        this._summaryClickHandler = (ev) => {
+            ev.preventDefault();
+            if (!this._isDisabled)
+                this.toggle();
+        };
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this._addAttributesToSlottedContentElements();
+        this._$parentDetails = this.closest('h-details');
+        (_a = this._$parentDetails) === null || _a === void 0 ? void 0 : _a.addEventListener(DETAILS_EVENTS.update, this._syncWithParentDetails);
+        this._syncWithParentDetails();
+    }
+    _addAttributesToSlottedContentElements() {
+        const slottedContentElements = Array.from(this.querySelectorAll('[slot="content"]'));
+        slottedContentElements.forEach(($element) => {
+            $element.classList.add(DETAILS_CSS_CLASSES.content);
+        });
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this.opened)
+            this.show();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this._$parentDetails) === null || _a === void 0 ? void 0 : _a.removeEventListener(DETAILS_EVENTS.update, this._syncWithParentDetails);
+    }
+    show() {
+        this._handleSingleModeConstraint();
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        this._clearPendingAnimations();
+        $details.setAttribute('open', '');
+        this._animationFrameId = requestAnimationFrame(() => {
+            $details.classList.add(DETAILS_CSS_CLASSES.open);
+            this._animationFrameId = null;
+        });
+        this._dispatchToggleEvent($details, true);
+    }
+    hide() {
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        this._clearPendingAnimations();
+        $details.classList.remove(DETAILS_CSS_CLASSES.open);
+        this._closeTimeoutId = setTimeout(() => {
+            $details.removeAttribute('open');
+            this._closeTimeoutId = null;
+        }, DETAILS_ANIMATION_DURATION);
+        this._dispatchToggleEvent($details, false);
+    }
+    _clearPendingAnimations() {
+        if (this._animationFrameId !== null) {
+            cancelAnimationFrame(this._animationFrameId);
+            this._animationFrameId = null;
+        }
+        if (this._closeTimeoutId !== null) {
+            clearTimeout(this._closeTimeoutId);
+            this._closeTimeoutId = null;
+        }
+    }
+    _dispatchToggleEvent($details, open) {
+        this.emitCustomEvent(DETAILS_EVENTS.toggle, {
+            detail: { open, target: $details }
+        });
+    }
+    toggle() {
+        this._handleSingleModeConstraint();
+        const $details = this._detailsRef.value;
+        if (!$details)
+            return;
+        const isOpen = $details.hasAttribute('open');
+        isOpen ? this.hide() : this.show();
+    }
+    _handleSingleModeConstraint() {
+        if (this._mode === DETAILS_MODE.single) {
+            this._hideOtherDetailsGroups();
+        }
+    }
+    enable() {
+        if (!this._isDisabled)
+            return;
+        this._isDisabled = false;
+        this.hide();
+    }
+    disable() {
+        if (this._isDisabled)
+            return;
+        this._isDisabled = true;
+        this.show();
+    }
+    notify() { }
+    render() {
+        return html `
+            <details
+                ${ref(this._detailsRef)}
+                class="details__details ${this._isDisabled ? 'details__details_disabled' : ''}"
+                aria-disabled="${this._isDisabled ? 'true' : 'false'}"
+                aria-labelledby="${this._togglerId}"
+            >
+                <summary
+                    class="details__summary"
+                    id="${this._togglerId}"
+                    @click=${this._summaryClickHandler}
+                >
+                    ${this.getSlot('toggler')}
+                </summary>
+
+                ${this.getSlot('content')}
+            </details>
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HDetailsGroup.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HDetailsGroup.prototype, "_isDisabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HDetailsGroup.prototype, "_mode", void 0);
+HDetailsGroup = __decorate([
+    phoenixCustomElement('h-details-group')
+], HDetailsGroup);
+
+export { HDetailsGroup };
+//# sourceMappingURL=details_group.js.map

package/build/esm/packages/phoenix/src/components/details/details_group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/details/details_toggler.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HDetailsToggler extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/details/details_toggler.js

@@ -0,0 +1,25 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { HDetailsGroup } from './details_group.js';
+
+let HDetailsToggler = class HDetailsToggler extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        if (this.parentElement instanceof HDetailsGroup) {
+            this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        }
+        else {
+            const contentToSlot = UiDomUtils.findParentByCondition(this, ($el) => $el.parentElement instanceof HDetailsGroup);
+            contentToSlot === null || contentToSlot === void 0 ? void 0 : contentToSlot.setAttribute('slot', 'toggler');
+        }
+    }
+};
+HDetailsToggler = __decorate([
+    phoenixCustomElement('h-details-toggler'),
+    __metadata("design:paramtypes", [])
+], HDetailsToggler);
+
+export { HDetailsToggler };
+//# sourceMappingURL=details_toggler.js.map

package/build/{cjs/packages/utilities/build/esm/packages/utilities/src/feature_flag_utils.js.map → esm/packages/phoenix/src/components/details/details_toggler.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/details/details_types.d.ts

@@ -0,0 +1,35 @@
+import { DETAILS_MODE } from './details_constants';
+import { Any } from 'ts-toolbelt';
+import { HDetails } from './details';
+import { HDetailsContent } from "./details_content";
+import { HDetailsGroup } from "./details_group";
+import { HDetailsToggler } from "./details_toggler";
+export interface IDetails {
+    enable(): void;
+    disable(): void;
+    notify(): void;
+}
+export interface IDetailsGroup {
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}
+export declare type TDetailsMode = Any.Keys<typeof DETAILS_MODE>;
+export declare type TDetailsProps = {
+    disabled: boolean;
+    mode: TDetailsMode;
+};
+export declare type TDetailsGroupProps = {
+    opened: boolean;
+    disabled: boolean;
+    regionId: string;
+    controlsId: string;
+};
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-details': HDetails;
+        'h-details-group': HDetailsGroup;
+        'h-details-toggler': HDetailsToggler;
+        'h-details-content': HDetailsContent;
+    }
+}

package/build/esm/packages/phoenix/src/components/details/details_types.js

@@ -0,0 +1,7 @@
+import './details_constants';
+import 'ts-toolbelt';
+import './details';
+import '@phoenixRoot/components/details/details_content';
+import '@phoenixRoot/components/details/details_group';
+import '@phoenixRoot/components/details/details_toggler';
+//# sourceMappingURL=details_types.js.map

package/build/esm/packages/phoenix/src/components/details/details_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details_types.js","sourceRoot":"","sources":["../../../../../../../src/components/details/details_types.ts"],"names":[],"mappings":"AAAA,OAA6B,qBAAqB,CAAC;AACnD,OAAoB,aAAa,CAAC;AAClC,OAAyB,WAAW,CAAC;AACrC,OAAgC,iDAAiD,CAAC;AAClF,OAA8B,+CAA+C,CAAC;AAC9E,OAAgC,iDAAiD,CAAC"}

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -7,8 +7,8 @@ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-import { createRef, ref } from 'lit/directives/ref';
 import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, SCREEN_READER_ONLY_CLASS_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
+import { createRef, ref } from 'lit/directives/ref';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {

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

@@ -147,5 +147,11 @@ export { NavigatorShare } from './components/navigator/navigator_share/navigator
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller';
 export { HShowMore } from './components/show-more/show_more';
 export { HShowMoreButton } from './components/show-more/show_more_button';
+export { HDetails } from './components/details/details';
+export { HDetailsGroup } from './components/details/details_group';
+export { HDetailsToggler } from './components/details/details_toggler';
+export { HDetailsContent } from './components/details/details_content';
+export * from './components/details/details_constants';
+export * from './components/details/details_types';
 export { BehaviorSubject } from './core/classes/behavior_subject/behavior_subject';
 export { phoenixCustomElement } from './core/decorators/phoenix_custom_element';

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

@@ -71,7 +71,7 @@ export { HRadioControl } from './components/form/radio/radio_control.js';
 export { TEXTAREA_CONTROL_CSS_CLASSES, TEXTAREA_CONTROL_EVENTS, TEXTAREA_PROPS_TO_SYNC, TEXTAREA_SLOTS } from './components/form/textarea/textarea_constants.js';
 export { HTextarea } from './components/form/textarea/textarea.js';
 export { HTextareaControl } from './components/form/textarea/textarea_control.js';
-export { ACCORDION_ANIMATION_DURATION, ACCORDION_CONTEXTS, ACCORDION_CSS_CLASSES, ACCORDION_EVENTS, ACCORDION_MODE } from './components/accordion/accordion_constants.js';
+export { ACCORDION_CONTEXTS, ACCORDION_EVENTS, ACCORDION_MODE } from './components/accordion/accordion_constants.js';
 export { HAccordion } from './components/accordion/accordion.js';
 export { HAccordionGroup } from './components/accordion/accordion_group.js';
 export { HAccordionContent } from './components/accordion/accordion_content.js';
@@ -129,4 +129,9 @@ export { HToggleBtn } from './components/toggle/toggle_button.js';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share.js';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller.js';
 export { HShowMore } from './components/show-more/show_more.js';
+export { DETAILS_ANIMATION_DURATION, DETAILS_CSS_CLASSES, DETAILS_EVENTS, DETAILS_MODE } from './components/details/details_constants.js';
+export { HDetails } from './components/details/details.js';
+export { HDetailsGroup } from './components/details/details_group.js';
+export { HDetailsToggler } from './components/details/details_toggler.js';
+export { HDetailsContent } from './components/details/details_content.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.10-7",
+  "version": "1.18.10-9",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@splidejs/splide-extension-auto-scroll": "0.5.3"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.23.2-2",
+    "@dreamcommerce/utilities": "^1.23.2-3",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",

package/build/cjs/packages/utilities/build/esm/packages/utilities/src/feature_flag_utils.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var json_utils = require('./json_utils.js');
-
-class FeatureFlagUtils {
-    static _initialize() {
-        if (this._flags !== null)
-            return;
-        const $script = document.getElementById('featureFlags');
-        this._flags = $script ? this._toObjectFromJsonScriptTag($script) : null;
-    }
-    static _toObjectFromJsonScriptTag(scriptTag) {
-        const scriptContent = scriptTag.textContent;
-        return json_utils.JsonUtils.fromJson(scriptContent) || {};
-    }
-    static isEnabled(flagName) {
-        this._initialize();
-        return this._flags ? !!this._flags[flagName] : false;
-    }
-}
-FeatureFlagUtils._flags = null;
-
-exports.FeatureFlagUtils = FeatureFlagUtils;
-//# sourceMappingURL=feature_flag_utils.js.map

package/build/cjs/packages/utilities/build/esm/packages/utilities/src/json_utils.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-class JsonUtils {
-    static toJson(value) {
-        try {
-            return JSON.stringify(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    static fromJson(value) {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-}
-
-exports.JsonUtils = JsonUtils;
-//# sourceMappingURL=json_utils.js.map

package/build/cjs/packages/utilities/build/esm/packages/utilities/src/json_utils.js.map

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

package/build/esm/packages/utilities/build/esm/packages/utilities/src/feature_flag_utils.js

@@ -1,22 +0,0 @@
-import { JsonUtils } from './json_utils.js';
-
-class FeatureFlagUtils {
-    static _initialize() {
-        if (this._flags !== null)
-            return;
-        const $script = document.getElementById('featureFlags');
-        this._flags = $script ? this._toObjectFromJsonScriptTag($script) : null;
-    }
-    static _toObjectFromJsonScriptTag(scriptTag) {
-        const scriptContent = scriptTag.textContent;
-        return JsonUtils.fromJson(scriptContent) || {};
-    }
-    static isEnabled(flagName) {
-        this._initialize();
-        return this._flags ? !!this._flags[flagName] : false;
-    }
-}
-FeatureFlagUtils._flags = null;
-
-export { FeatureFlagUtils };
-//# sourceMappingURL=feature_flag_utils.js.map

package/build/esm/packages/utilities/build/esm/packages/utilities/src/json_utils.js

@@ -1,21 +0,0 @@
-class JsonUtils {
-    static toJson(value) {
-        try {
-            return JSON.stringify(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    static fromJson(value) {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-}
-
-export { JsonUtils };
-//# sourceMappingURL=json_utils.js.map