@shoper/phoenix_design_system 1.18.10-0 → 1.18.10-2

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

@@ -6,16 +6,23 @@ 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 behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
 var accordion_constants = require('./accordion_constants.js');
+var feature_flag_utils = require('../../../../utilities/build/esm/packages/utilities/src/feature_flag_utils.js');
 
 exports.HAccordion = class HAccordion extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.disabled = false;
         this.mode = accordion_constants.ACCORDION_MODE.multi;
-    }
-    updated() {
-        this.notify();
+        this._isDevAccordionOptimizationFlagEnabled = feature_flag_utils.FeatureFlagUtils.isEnabled('dev_accordion_optimization');
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            this._accordionSubject = new behavior_subject.BehaviorSubject(this._getProps());
+            this._accordionContext = new context_provider_controller.ContextProviderController(this);
+            this._accordionContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionProps, this._accordionSubject);
+            this.setAttribute('role', 'none');
+        }
     }
     enable() {
         this.disabled = false;
@@ -23,8 +30,22 @@ exports.HAccordion = class HAccordion extends phoenix_light_lit_element.PhoenixL
     disable() {
         this.disabled = true;
     }
+    updated() {
+        this.notify();
+    }
     notify() {
-        this.dispatchEvent(new Event(accordion_constants.ACCORDION_EVENTS.update));
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            this.dispatchEvent(new Event(accordion_constants.ACCORDION_EVENTS.update));
+        }
+        else {
+            this._accordionSubject.notify(this._getProps());
+        }
+    }
+    _getProps() {
+        return {
+            disabled: this.disabled,
+            mode: this.mode
+        };
     }
 };
 tslib_es6.__decorate([
@@ -36,6 +57,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HAccordion.prototype, "mode", void 0);
 exports.HAccordion = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-accordion')
+    phoenix_custom_element.phoenixCustomElement('h-accordion'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HAccordion);
 //# sourceMappingURL=accordion.js.map

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

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

@@ -6,6 +6,10 @@ const ACCORDION_EVENTS = {
     toggle: 'toggle',
     update: 'updateAccordion'
 };
+const ACCORDION_CONTEXTS = {
+    accordionProps: 'accordionPropsSubject',
+    accordionGroupProps: 'accordionGroupPropsSubject'
+};
 const ACCORDION_CSS_CLASSES = {
     open: 'accordion__details_open'
 };
@@ -16,6 +20,7 @@ const ACCORDION_MODE = {
 const ACCORDION_ANIMATION_DURATION = 400;
 
 exports.ACCORDION_ANIMATION_DURATION = ACCORDION_ANIMATION_DURATION;
+exports.ACCORDION_CONTEXTS = ACCORDION_CONTEXTS;
 exports.ACCORDION_CSS_CLASSES = ACCORDION_CSS_CLASSES;
 exports.ACCORDION_EVENTS = ACCORDION_EVENTS;
 exports.ACCORDION_MODE = ACCORDION_MODE;

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

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

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

@@ -3,19 +3,168 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+require('lit');
+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 observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var accordion_constants = require('./accordion_constants.js');
+var feature_flag_utils = require('../../../../utilities/build/esm/packages/utilities/src/feature_flag_utils.js');
+var accordion = require('./accordion.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.slot = this.hasAttribute('slot') ? this.slot : 'content';
+        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 (this._isDevAccordionOptimizationFlagEnabled)
+                return;
+            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._isDevAccordionOptimizationFlagEnabled = feature_flag_utils.FeatureFlagUtils.isEnabled('dev_accordion_optimization');
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            if (this.parentElement instanceof accordion.HAccordion) {
+                this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+            }
+            else {
+                const contentToSlot = utilities.UiDomUtils.findParentByCondition(this, ($el) => $el.parentElement instanceof accordion.HAccordion);
+                contentToSlot === null || contentToSlot === void 0 ? void 0 : contentToSlot.setAttribute('slot', 'content');
+            }
+        }
+        else {
+            this.setAttribute('role', 'region');
+            this._boundHandleTransitionEnd = this._handleTransitionEnd.bind(this);
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this.classList.add('accordion-content');
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            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);
+        }
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            this.classList.add('accordion-content');
+        }
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            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._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, _b;
+        super.disconnectedCallback();
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            (_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([
+    decorators.property(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionContent.prototype, "transitionName", void 0);
 exports.HAccordionContent = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-accordion-content'),
     tslib_es6.__metadata("design:paramtypes", [])

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;"}
+{"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;AACA;AACA;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/accordion/accordion_group.js

@@ -7,15 +7,23 @@ 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 observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
 var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
 var accordion_constants = require('./accordion_constants.js');
+var feature_flag_utils = require('../../../../utilities/build/esm/packages/utilities/src/feature_flag_utils.js');
 var ref = require('lit/directives/ref');
+var when = require('lit/directives/when');
 
 exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.opened = false;
         this._isDisabled = false;
+        this._regionId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
+        this._controlsId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
         this._mode = accordion_constants.ACCORDION_MODE.multi;
         this._$parentAccordion = null;
         this._detailsRef = ref.createRef();
@@ -40,83 +48,190 @@ exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_elemen
                 $accordionGroup.hide();
             });
         };
+        this._accordionToggle = () => {
+            this.toggle();
+        };
         this._summaryClickHandler = (ev) => {
             ev.preventDefault();
             if (!this._isDisabled)
                 this.toggle();
         };
+        this._isDevAccordionOptimizationFlagEnabled = feature_flag_utils.FeatureFlagUtils.isEnabled('dev_accordion_optimization');
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            this._accordionGroupPropsSubject = new behavior_subject.BehaviorSubject(this._getProps());
+            this._accordionGroupContext = new context_provider_controller.ContextProviderController(this);
+            this._accordionGroupContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
+            this.setAttribute('role', 'none');
+        }
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this._$parentAccordion = this.closest('h-accordion');
-        (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.addEventListener(accordion_constants.ACCORDION_EVENTS.update, this._syncWithParentAccordion);
-        this._syncWithParentAccordion();
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            this._$parentAccordion = this.closest('h-accordion');
+            (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.addEventListener(accordion_constants.ACCORDION_EVENTS.update, this._syncWithParentAccordion);
+            this._syncWithParentAccordion();
+        }
+        else {
+            this._accordionContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+            this._subscribeObserver();
+            this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+        }
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        if (this.opened)
+        if (this.opened && this._isDevAccordionOptimizationFlagEnabled)
             this.show();
     }
+    async _subscribeObserver() {
+        this._accordionProps = await this._accordionContextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionProps);
+        this._accordionPropsObserver = new observer.Observer((accordionProps) => {
+            this._mode = accordionProps.mode;
+            const hasAccordionBeenDisabled = accordionProps.disabled;
+            if (hasAccordionBeenDisabled) {
+                this.disable();
+                return;
+            }
+            const hasAccordionBeenEnabled = accordionProps.disabled === false;
+            if (hasAccordionBeenEnabled) {
+                this.enable();
+                return;
+            }
+        });
+        this._accordionProps.subscribe(this._accordionPropsObserver);
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
-        (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.removeEventListener(accordion_constants.ACCORDION_EVENTS.update, this._syncWithParentAccordion);
-    }
-    _handleSingleModeConstraint() {
-        if (this._mode === accordion_constants.ACCORDION_MODE.single) {
-            this._hideOtherDetailsGroups();
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            (_a = this._$parentAccordion) === null || _a === void 0 ? void 0 : _a.removeEventListener(accordion_constants.ACCORDION_EVENTS.update, this._syncWithParentAccordion);
+        }
+        else {
+            this._accordionProps.unsubscribe(this._accordionPropsObserver);
+            this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
         }
-    }
-    toggle() {
-        this._handleSingleModeConstraint();
-        const $details = this._detailsRef.value;
-        if (!$details)
-            return;
-        const isOpen = $details.hasAttribute('open');
-        isOpen ? this.hide() : this.show();
     }
     show() {
-        this._handleSingleModeConstraint();
-        const $details = this._detailsRef.value;
-        if (!$details)
-            return;
-        $details.setAttribute('open', '');
-        requestAnimationFrame(() => {
-            $details.classList.add(accordion_constants.ACCORDION_CSS_CLASSES.open);
-        });
-        this._dispatchToggleEvent($details, true);
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            this._handleSingleModeConstraint();
+            const $details = this._detailsRef.value;
+            if (!$details)
+                return;
+            $details.setAttribute('open', '');
+            requestAnimationFrame(() => {
+                $details.classList.add(accordion_constants.ACCORDION_CSS_CLASSES.open);
+            });
+            this._dispatchToggleEvent($details, true);
+        }
+        else {
+            if (this._mode === accordion_constants.ACCORDION_MODE.single)
+                this._closeOtherAccordionGroups();
+            this.opened = true;
+        }
     }
     hide() {
-        const $details = this._detailsRef.value;
-        if (!$details)
-            return;
-        $details.classList.remove(accordion_constants.ACCORDION_CSS_CLASSES.open);
-        setTimeout(() => {
-            $details.removeAttribute('open');
-        }, accordion_constants.ACCORDION_ANIMATION_DURATION);
-        this._dispatchToggleEvent($details, false);
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            const $details = this._detailsRef.value;
+            if (!$details)
+                return;
+            $details.classList.remove(accordion_constants.ACCORDION_CSS_CLASSES.open);
+            setTimeout(() => {
+                $details.removeAttribute('open');
+            }, accordion_constants.ACCORDION_ANIMATION_DURATION);
+            this._dispatchToggleEvent($details, false);
+        }
+        else {
+            this.opened = false;
+        }
     }
     _dispatchToggleEvent($details, open) {
         this.emitCustomEvent(accordion_constants.ACCORDION_EVENTS.toggle, {
             detail: { open, target: $details }
         });
     }
+    toggle() {
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            this._handleSingleModeConstraint();
+            const $details = this._detailsRef.value;
+            if (!$details)
+                return;
+            const isOpen = $details.hasAttribute('open');
+            isOpen ? this.hide() : this.show();
+        }
+        else {
+            if (this._mode === accordion_constants.ACCORDION_MODE.single)
+                this._closeOtherAccordionGroups();
+            this.opened = !this.opened;
+        }
+    }
+    _handleSingleModeConstraint() {
+        if (this._mode === accordion_constants.ACCORDION_MODE.single) {
+            this._hideOtherDetailsGroups();
+        }
+    }
     enable() {
-        if (!this._isDisabled)
-            return;
-        this._isDisabled = false;
-        this.hide();
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            if (!this._isDisabled)
+                return;
+            this._isDisabled = false;
+            this.hide();
+        }
+        else {
+            if (this._isDisabled) {
+                this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+                this.hide();
+                this._isDisabled = false;
+            }
+        }
     }
     disable() {
-        if (this._isDisabled)
-            return;
-        this._isDisabled = true;
-        this.show();
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            if (this._isDisabled)
+                return;
+            this._isDisabled = true;
+            this.show();
+        }
+        else {
+            if (!this._isDisabled) {
+                this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+                this.show();
+                this._isDisabled = true;
+            }
+        }
+    }
+    _closeOtherAccordionGroups() {
+        if (!this._isDisabled) {
+            const $accordion = this.closest('h-accordion');
+            const $accordionGroups = [...$accordion.querySelectorAll('h-accordion-group')];
+            const $otherAccordionGroupsWithinAccordion = $accordionGroups.filter(($accordionGroup) => $accordionGroup !== this);
+            $otherAccordionGroupsWithinAccordion.forEach(($accordionGroup) => $accordionGroup.hide());
+        }
+    }
+    notify() {
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            this._accordionGroupPropsSubject.notify(this._getProps());
+        }
+    }
+    updated(_changedProperties) {
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            if (_changedProperties.has('opened') ||
+                _changedProperties.has('_isDisabled') ||
+                _changedProperties.has('_regionId') ||
+                _changedProperties.has('_controlsId')) {
+                this.notify();
+            }
+        }
+    }
+    _getProps() {
+        return {
+            opened: this.opened,
+            disabled: this._isDisabled,
+            regionId: this._regionId,
+            controlsId: this._controlsId
+        };
     }
-    notify() { }
     render() {
-        return lit.html `
+        return when.when(this._isDevAccordionOptimizationFlagEnabled, () => lit.html `
             <details
                 ${ref.ref(this._detailsRef)}
                 class="accordion__details ${this._isDisabled ? 'accordion__details_disabled' : ''}"
@@ -133,7 +248,7 @@ exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_elemen
 
                 ${this.getSlot('content')}
             </details>
-        `;
+        `);
     }
 };
 tslib_es6.__decorate([
@@ -144,11 +259,20 @@ tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HAccordionGroup.prototype, "_isDisabled", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_regionId", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_controlsId", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", String)
 ], exports.HAccordionGroup.prototype, "_mode", void 0);
 exports.HAccordionGroup = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-accordion-group')
+    phoenix_custom_element.phoenixCustomElement('h-accordion-group'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HAccordionGroup);
 //# sourceMappingURL=accordion_group.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.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,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;"}
+{"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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/accordion/accordion_toggler.js

@@ -3,13 +3,69 @@
 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 observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var accordion_constants = require('./accordion_constants.js');
+var accordion = require('./accordion.js');
 
 exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
-        this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
+        this._emitTogglerClickedWithKeyboard = (ev) => {
+            if (ev.key !== ' ' && ev.key !== 'Enter')
+                return;
+            if (this.getAttribute('aria-disabled') === 'true')
+                return;
+            this._emitTogglerClicked();
+        };
+        this._emitTogglerClicked = () => {
+            this.emitCustomEvent(accordion_constants.ACCORDION_EVENTS.toggle);
+        };
+        this._isDevAccordionOptimizationFlagEnabled = utilities.FeatureFlagUtils.isEnabled('dev_accordion_optimization');
+        if (this._isDevAccordionOptimizationFlagEnabled) {
+            if (this.parentElement instanceof accordion.HAccordion) {
+                this.slot = this.hasAttribute('slot') ? this.slot : 'content';
+            }
+            else {
+                const contentToSlot = utilities.UiDomUtils.findParentByCondition(this, ($el) => $el.parentElement instanceof accordion.HAccordion);
+                contentToSlot === null || contentToSlot === void 0 ? void 0 : contentToSlot.setAttribute('slot', 'content');
+            }
+        }
+        else {
+            this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        }
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (!this._isDevAccordionOptimizationFlagEnabled) {
+            this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
+            this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => this._setAttributes(accordionProps));
+            this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+            this.addEventListener('click', this._emitTogglerClicked);
+            this.addEventListener('keydown', this._emitTogglerClickedWithKeyboard);
+        }
+    }
+    _setAttributes({ regionId, opened, controlsId, disabled }) {
+        this.setAttribute('id', regionId);
+        this.setAttribute('aria-expanded', opened ? 'true' : 'false');
+        this.setAttribute('aria-controls', controlsId);
+        this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+        if (disabled) {
+            this.removeAttribute('role');
+            this.setAttribute('tabindex', '-1');
+        }
+        else {
+            this.setAttribute('role', 'button');
+            this.setAttribute('tabindex', '0');
+        }
+    }
+    disconnectedCallback() {
+        if (this._accordionGroupProps && !this._isDevAccordionOptimizationFlagEnabled) {
+            this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+        }
     }
 };
 exports.HAccordionToggler = tslib_es6.__decorate([

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