@shoper/phoenix_design_system 1.18.10-8 → 1.18.10-9

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
@@ -11,34 +12,127 @@ var context_consumer_controller = require('../../core/context/context_consumer_c
 var accordion_constants = require('./accordion_constants.js');
 var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
 
+const RESIZE_DEBOUNCE_MS = 150;
+const MUTATION_DEBOUNCE_MS = 100;
 exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
+        this._resizeDebounceTimer = null;
+        this._mutationDebounceTimer = null;
+        this._mutationObserver = null;
+        this._handleResize = () => {
+            if (this._resizeDebounceTimer !== null) {
+                window.cancelAnimationFrame(this._resizeDebounceTimer);
+            }
+            this._resizeDebounceTimer = window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    this._setStylingOptions();
+                }, RESIZE_DEBOUNCE_MS);
+            });
+        };
+        this._setStylingOptions = () => {
+            requestAnimationFrame(() => {
+                const previousDisplay = this.style.display;
+                this.style.setProperty('display', 'block', 'important');
+                this.style.height = 'auto';
+                requestAnimationFrame(() => {
+                    this._setOriginalHeightValue();
+                    this.style.display = previousDisplay;
+                    this.style.height = this.hidden ? '0px' : this._originalHeight;
+                });
+            });
+        };
+        this._handleMutation = () => {
+            if (this._mutationDebounceTimer !== null) {
+                window.clearTimeout(this._mutationDebounceTimer);
+            }
+            this._mutationDebounceTimer = window.setTimeout(() => {
+                requestAnimationFrame(() => {
+                    this.style.height = 'auto';
+                    requestAnimationFrame(() => {
+                        this._setOriginalHeightValue();
+                        if (this.hidden) {
+                            this.style.height = '0px';
+                        }
+                        else {
+                            this.style.height = this._originalHeight;
+                        }
+                    });
+                });
+            }, MUTATION_DEBOUNCE_MS);
+        };
+        this._setOriginalHeightValue = () => {
+            const newHeight = this.getBoundingClientRect().height;
+            if (newHeight !== 0 || this.children.length === 0) {
+                this._originalHeight = `${newHeight}px`;
+            }
+        };
+        this._expand = () => {
+            this._setHeight(this._originalHeight);
+        };
+        this._handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'height' || e.target !== this) {
+                return;
+            }
+            if (!this.hidden && this.style.height !== '0px') {
+                this.style.height = 'auto';
+            }
+        };
+        this._collapse = () => {
+            const currentHeight = this.getBoundingClientRect().height;
+            this._setHeight(`${currentHeight}px`);
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this._setHeight('0px');
+                });
+            });
+        };
         this.setAttribute('role', 'region');
+        this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
         this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
         this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
         this._subscribeObserver();
+        window.addEventListener('resize', this._handleResize, { passive: true });
+        this.addEventListener('transitionend', this._boundHandleTransitionEnd);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._setStylingOptions();
     }
     async _subscribeObserver() {
         this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
         this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => {
             this._setAttributes(accordionProps);
-            accordionProps.opened ? this._transitionController.show() : this._transitionController.hide();
+            accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+        this._mutationObserver = new MutationObserver(this._handleMutation);
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
+    }
+    _setHeight(height) {
+        this.style.height = height;
     }
     _setAttributes({ regionId, controlsId }) {
         this.setAttribute('id', controlsId);
         this.setAttribute('labelledby', regionId);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
+        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this._handleResize);
+        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this._resizeDebounceTimer !== null) {
+            window.cancelAnimationFrame(this._resizeDebounceTimer);
+        }
+        if (this._mutationDebounceTimer !== null) {
+            window.clearTimeout(this._mutationDebounceTimer);
+        }
     }
 };
 tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map

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

package/build/cjs/packages/phoenix/src/components/details/details.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var details_constants = require('./details_constants.js');
+
+exports.HDetails = class HDetails extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.mode = details_constants.DETAILS_MODE.multi;
+    }
+    enable() {
+        this.disabled = false;
+    }
+    disable() {
+        this.disabled = true;
+    }
+    updated() {
+        this.notify();
+    }
+    notify() {
+        this.dispatchEvent(new Event(details_constants.DETAILS_EVENTS.update));
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDetails.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDetails.prototype, "mode", void 0);
+exports.HDetails = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-details')
+], exports.HDetails);
+//# sourceMappingURL=details.js.map

package/build/cjs/packages/phoenix/src/components/details/details.js.map

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

package/build/cjs/packages/phoenix/src/components/details/details_constants.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DETAILS_EVENTS = {
+    toggle: 'toggleDetails',
+    update: 'updateDetails'
+};
+const DETAILS_CSS_CLASSES = {
+    open: 'details__open',
+    content: 'details__content'
+};
+const DETAILS_MODE = {
+    single: 'single',
+    multi: 'multi'
+};
+const DETAILS_ANIMATION_DURATION = 400;
+
+exports.DETAILS_ANIMATION_DURATION = DETAILS_ANIMATION_DURATION;
+exports.DETAILS_CSS_CLASSES = DETAILS_CSS_CLASSES;
+exports.DETAILS_EVENTS = DETAILS_EVENTS;
+exports.DETAILS_MODE = DETAILS_MODE;
+//# sourceMappingURL=details_constants.js.map

package/build/cjs/packages/phoenix/src/components/details/details_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/details/details_content.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var details_constants = require('./details_constants.js');
+var details_group = require('./details_group.js');
+
+exports.HDetailsContent = class HDetailsContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.transitionName = 'details-toggle';
+        if (this.parentElement instanceof details_group.HDetailsGroup) {
+            this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+        }
+        else {
+            const contentToSlot = utilities.UiDomUtils.findParentByCondition(this, ($el) => $el.parentElement instanceof details_group.HDetailsGroup);
+            contentToSlot === null || contentToSlot === void 0 ? void 0 : contentToSlot.setAttribute('slot', 'content');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(details_constants.DETAILS_CSS_CLASSES.content);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDetailsContent.prototype, "transitionName", void 0);
+exports.HDetailsContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-details-content'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HDetailsContent);
+//# sourceMappingURL=details_content.js.map

package/build/cjs/packages/phoenix/src/components/details/details_content.js.map

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

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

@@ -0,0 +1,177 @@
+'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/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
+var ref = require('lit/directives/ref');
+var details_constants = require('./details_constants.js');
+
+exports.HDetailsGroup = class HDetailsGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this._isDisabled = false;
+        this._mode = details_constants.DETAILS_MODE.multi;
+        this._$parentDetails = null;
+        this._detailsRef = ref.createRef();
+        this._togglerId = v4['default']();
+        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_constants.DETAILS_EVENTS.update, this._syncWithParentDetails);
+        this._syncWithParentDetails();
+    }
+    _addAttributesToSlottedContentElements() {
+        const slottedContentElements = Array.from(this.querySelectorAll('[slot="content"]'));
+        slottedContentElements.forEach(($element) => {
+            $element.classList.add(details_constants.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_constants.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_constants.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_constants.DETAILS_CSS_CLASSES.open);
+        this._closeTimeoutId = setTimeout(() => {
+            $details.removeAttribute('open');
+            this._closeTimeoutId = null;
+        }, details_constants.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_constants.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_constants.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 lit.html `
+            <details
+                ${ref.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>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDetailsGroup.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDetailsGroup.prototype, "_isDisabled", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HDetailsGroup.prototype, "_mode", void 0);
+exports.HDetailsGroup = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-details-group')
+], exports.HDetailsGroup);
+//# sourceMappingURL=details_group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/details/details_toggler.js

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

package/build/cjs/packages/phoenix/src/components/details/details_toggler.js.map

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

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

@@ -133,6 +133,11 @@ var toggle_button$1 = require('./components/toggle/toggle_button.js');
 var navigator_share = require('./components/navigator/navigator_share/navigator_share.js');
 var navigator_controller = require('./components/navigator/navigator_controller/navigator_controller.js');
 var show_more$1 = require('./components/show-more/show_more.js');
+var details_constants = require('./components/details/details_constants.js');
+var details = require('./components/details/details.js');
+var details_group = require('./components/details/details_group.js');
+var details_toggler = require('./components/details/details_toggler.js');
+var details_content = require('./components/details/details_content.js');
 
 
 
@@ -789,4 +794,32 @@ Object.defineProperty(exports, 'HShowMore', {
 		return show_more$1.HShowMore;
 	}
 });
+exports.DETAILS_ANIMATION_DURATION = details_constants.DETAILS_ANIMATION_DURATION;
+exports.DETAILS_CSS_CLASSES = details_constants.DETAILS_CSS_CLASSES;
+exports.DETAILS_EVENTS = details_constants.DETAILS_EVENTS;
+exports.DETAILS_MODE = details_constants.DETAILS_MODE;
+Object.defineProperty(exports, 'HDetails', {
+	enumerable: true,
+	get: function () {
+		return details.HDetails;
+	}
+});
+Object.defineProperty(exports, 'HDetailsGroup', {
+	enumerable: true,
+	get: function () {
+		return details_group.HDetailsGroup;
+	}
+});
+Object.defineProperty(exports, 'HDetailsToggler', {
+	enumerable: true,
+	get: function () {
+		return details_toggler.HDetailsToggler;
+	}
+});
+Object.defineProperty(exports, 'HDetailsContent', {
+	enumerable: true,
+	get: function () {
+		return details_content.HDetailsContent;
+	}
+});
 //# sourceMappingURL=index.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/accordion/accordion_content.d.ts

@@ -1,13 +1,28 @@
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
 export declare class HAccordionContent extends PhoenixLightLitElement {
     transitionName: string;
     private _transitionController;
     private _contextConsumer;
     private _accordionGroupProps;
     private _accordionGroupPropsObserver;
+    private _originalHeight;
+    private _resizeDebounceTimer;
+    private _mutationDebounceTimer;
+    private _mutationObserver;
+    private _boundHandleTransitionEnd;
     constructor();
     connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
+    private _handleResize;
+    private _setStylingOptions;
     private _subscribeObserver;
+    private _handleMutation;
+    private _setOriginalHeightValue;
+    private _expand;
+    private _handleTransitionEnd;
+    private _collapse;
+    private _setHeight;
     private _setAttributes;
     disconnectedCallback(): void;
 }

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import 'lit';
 import { property } 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';
@@ -7,34 +8,127 @@ import { ContextConsumerController } from '../../core/context/context_consumer_c
 import { ACCORDION_CONTEXTS } from './accordion_constants.js';
 import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
 
+const RESIZE_DEBOUNCE_MS = 150;
+const MUTATION_DEBOUNCE_MS = 100;
 let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
     constructor() {
         super();
         this.transitionName = 'accordion-toggle';
+        this._resizeDebounceTimer = null;
+        this._mutationDebounceTimer = null;
+        this._mutationObserver = null;
+        this._handleResize = () => {
+            if (this._resizeDebounceTimer !== null) {
+                window.cancelAnimationFrame(this._resizeDebounceTimer);
+            }
+            this._resizeDebounceTimer = window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    this._setStylingOptions();
+                }, RESIZE_DEBOUNCE_MS);
+            });
+        };
+        this._setStylingOptions = () => {
+            requestAnimationFrame(() => {
+                const previousDisplay = this.style.display;
+                this.style.setProperty('display', 'block', 'important');
+                this.style.height = 'auto';
+                requestAnimationFrame(() => {
+                    this._setOriginalHeightValue();
+                    this.style.display = previousDisplay;
+                    this.style.height = this.hidden ? '0px' : this._originalHeight;
+                });
+            });
+        };
+        this._handleMutation = () => {
+            if (this._mutationDebounceTimer !== null) {
+                window.clearTimeout(this._mutationDebounceTimer);
+            }
+            this._mutationDebounceTimer = window.setTimeout(() => {
+                requestAnimationFrame(() => {
+                    this.style.height = 'auto';
+                    requestAnimationFrame(() => {
+                        this._setOriginalHeightValue();
+                        if (this.hidden) {
+                            this.style.height = '0px';
+                        }
+                        else {
+                            this.style.height = this._originalHeight;
+                        }
+                    });
+                });
+            }, MUTATION_DEBOUNCE_MS);
+        };
+        this._setOriginalHeightValue = () => {
+            const newHeight = this.getBoundingClientRect().height;
+            if (newHeight !== 0 || this.children.length === 0) {
+                this._originalHeight = `${newHeight}px`;
+            }
+        };
+        this._expand = () => {
+            this._setHeight(this._originalHeight);
+        };
+        this._handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'height' || e.target !== this) {
+                return;
+            }
+            if (!this.hidden && this.style.height !== '0px') {
+                this.style.height = 'auto';
+            }
+        };
+        this._collapse = () => {
+            const currentHeight = this.getBoundingClientRect().height;
+            this._setHeight(`${currentHeight}px`);
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this._setHeight('0px');
+                });
+            });
+        };
         this.setAttribute('role', 'region');
+        this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
         this._contextConsumer = new ContextConsumerController(this);
         this._transitionController = new TransitionController(this, this.transitionName);
         this._subscribeObserver();
+        window.addEventListener('resize', this._handleResize, { passive: true });
+        this.addEventListener('transitionend', this._boundHandleTransitionEnd);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._setStylingOptions();
     }
     async _subscribeObserver() {
         this._accordionGroupProps = await this._contextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionGroupProps);
         this._accordionGroupPropsObserver = new Observer((accordionProps) => {
             this._setAttributes(accordionProps);
-            accordionProps.opened ? this._transitionController.show() : this._transitionController.hide();
+            accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
         });
         this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+        this._mutationObserver = new MutationObserver(this._handleMutation);
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
+    }
+    _setHeight(height) {
+        this.style.height = height;
     }
     _setAttributes({ regionId, controlsId }) {
         this.setAttribute('id', controlsId);
         this.setAttribute('labelledby', regionId);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         super.disconnectedCallback();
         (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
+        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this._handleResize);
+        this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
+        if (this._resizeDebounceTimer !== null) {
+            window.cancelAnimationFrame(this._resizeDebounceTimer);
+        }
+        if (this._mutationDebounceTimer !== null) {
+            window.clearTimeout(this._mutationDebounceTimer);
+        }
     }
 };
 __decorate([

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -0,0 +1,10 @@
+import type { IDetails, TDetailsMode } from './details_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HDetails extends PhoenixLightLitElement implements IDetails {
+    disabled: boolean;
+    mode: TDetailsMode;
+    enable(): void;
+    disable(): void;
+    updated(): void;
+    notify(): void;
+}

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

@@ -0,0 +1,39 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } 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 { DETAILS_MODE, DETAILS_EVENTS } from './details_constants.js';
+
+let HDetails = class HDetails extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.mode = DETAILS_MODE.multi;
+    }
+    enable() {
+        this.disabled = false;
+    }
+    disable() {
+        this.disabled = true;
+    }
+    updated() {
+        this.notify();
+    }
+    notify() {
+        this.dispatchEvent(new Event(DETAILS_EVENTS.update));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HDetails.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HDetails.prototype, "mode", void 0);
+HDetails = __decorate([
+    phoenixCustomElement('h-details')
+], HDetails);
+
+export { HDetails };
+//# sourceMappingURL=details.js.map

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

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

@@ -0,0 +1,13 @@
+export declare const DETAILS_EVENTS: {
+    readonly toggle: "toggleDetails";
+    readonly update: "updateDetails";
+};
+export declare const DETAILS_CSS_CLASSES: {
+    readonly open: "details__open";
+    readonly content: "details__content";
+};
+export declare const DETAILS_MODE: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+export declare const DETAILS_ANIMATION_DURATION = 400;

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

@@ -0,0 +1,16 @@
+const DETAILS_EVENTS = {
+    toggle: 'toggleDetails',
+    update: 'updateDetails'
+};
+const DETAILS_CSS_CLASSES = {
+    open: 'details__open',
+    content: 'details__content'
+};
+const DETAILS_MODE = {
+    single: 'single',
+    multi: 'multi'
+};
+const DETAILS_ANIMATION_DURATION = 400;
+
+export { DETAILS_ANIMATION_DURATION, DETAILS_CSS_CLASSES, DETAILS_EVENTS, DETAILS_MODE };
+//# sourceMappingURL=details_constants.js.map

package/build/esm/packages/phoenix/src/components/details/details_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;AACA;AACA;"}

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

@@ -0,0 +1,6 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HDetailsContent extends PhoenixLightLitElement {
+    transitionName: string;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,36 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+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 { DETAILS_CSS_CLASSES } from './details_constants.js';
+import { HDetailsGroup } from './details_group.js';
+
+let HDetailsContent = class HDetailsContent extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.transitionName = 'details-toggle';
+        if (this.parentElement instanceof HDetailsGroup) {
+            this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+        }
+        else {
+            const contentToSlot = UiDomUtils.findParentByCondition(this, ($el) => $el.parentElement instanceof HDetailsGroup);
+            contentToSlot === null || contentToSlot === void 0 ? void 0 : contentToSlot.setAttribute('slot', 'content');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(DETAILS_CSS_CLASSES.content);
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], HDetailsContent.prototype, "transitionName", void 0);
+HDetailsContent = __decorate([
+    phoenixCustomElement('h-details-content'),
+    __metadata("design:paramtypes", [])
+], HDetailsContent);
+
+export { HDetailsContent };
+//# sourceMappingURL=details_content.js.map

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

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

@@ -0,0 +1,30 @@
+import type { IDetails, IDetailsGroup } from './details_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
+export declare class HDetailsGroup extends PhoenixLightLitElement implements IDetailsGroup, IDetails {
+    opened: boolean;
+    private _isDisabled;
+    private _mode;
+    private _$parentDetails;
+    private _detailsRef;
+    private _togglerId;
+    private _animationFrameId;
+    private _closeTimeoutId;
+    connectedCallback(): void;
+    private _addAttributesToSlottedContentElements;
+    firstUpdated(props: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _syncWithParentDetails;
+    show(): void;
+    hide(): void;
+    private _clearPendingAnimations;
+    private _dispatchToggleEvent;
+    toggle(): void;
+    private _handleSingleModeConstraint;
+    private _hideOtherDetailsGroups;
+    enable(): void;
+    disable(): void;
+    notify(): void;
+    private _summaryClickHandler;
+    protected render(): unknown;
+}

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/esm/packages/phoenix/src/components/details/details_toggler.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;"}

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/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

@@ -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-8",
+  "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",