@shoper/phoenix_design_system 1.18.2 → 1.18.3

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts

@@ -1,22 +1,28 @@
-import { PhoenixLightLitElement } from '@phoenixRoot/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 _transitionDuration;
-    constructor();
-    connectedCallback(): void;
-    firstUpdated(props: PropertyValues): void;
-    private _setStylingOptions;
-    private _subscribeObserver;
-    private _setOriginalHeightValue;
-    private _expand;
-    private _collapse;
-    private _setHeight;
-    private _setAttributes;
-    disconnectedCallback(): void;
-}
+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,90 +1,144 @@
-import { __decorate, __metadata } from "tslib";
-import { ACCORDION_CONTEXTS } from './accordion_constants';
-import '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
-import { ContextConsumerController } from '@phoenixRoot/core/context/context_consumer_controller';
-import { Observer } from '@phoenixRoot/core/classes/observer/observer';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import './accordion_types';
-import { TransitionController } from '@phoenixRoot/controllers/transition_controller/transition_controller';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
 import { property } from 'lit/decorators';
-let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.transitionName = 'accordion-toggle';
-        this._setStylingOptions = () => {
-            this.style.setProperty('display', 'block', 'important');
-            this.style.height = 'auto';
-            this._setOriginalHeightValue();
-            this.style.display = '';
-            this.style.height = this._originalHeight;
-        };
-        this._setOriginalHeightValue = () => {
-            const newHeight = this.getBoundingClientRect().height;
-            if (newHeight !== 0 || this.children.length === 0)
-                this._originalHeight = `${newHeight}px`;
-        };
-        this._expand = () => {
-            this._setHeight(this._originalHeight);
-            setTimeout(() => {
-                this.style.height = 'auto';
-            }, this._transitionDuration);
-        };
-        this._collapse = () => {
-            this._setHeight(this._originalHeight);
-            requestAnimationFrame(() => {
-                this._setHeight('0px');
-            });
-        };
-        this.setAttribute('role', 'region');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._contextConsumer = new ContextConsumerController(this);
-        this._transitionController = new TransitionController(this, this.transitionName);
-        this._subscribeObserver();
-        window.addEventListener('resize', this._setStylingOptions);
-        this._transitionDuration = parseFloat(getComputedStyle(this).transitionDuration) * 1000;
-    }
-    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._expand) : this._transitionController.hide(this._collapse);
-        });
-        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
-        const mutationObserver = new MutationObserver(() => {
-            this.style.height = 'auto';
-            this._setOriginalHeightValue();
-            this.hidden ? this._collapse() : this._expand();
-        });
-        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() {
-        super.disconnectedCallback();
-        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
-        window.removeEventListener('resize', this._setStylingOptions);
-    }
-};
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], HAccordionContent.prototype, "transitionName", void 0);
-HAccordionContent = __decorate([
-    phoenixCustomElement('h-accordion-content'),
-    __metadata("design:paramtypes", [])
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+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.display = 'block';
+                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._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();
+        (_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([
+    property(),
+    __metadata("design:type", Object)
+], HAccordionContent.prototype, "transitionName", void 0);
+HAccordionContent = __decorate([
+    phoenixCustomElement('h-accordion-content'),
+    __metadata("design:paramtypes", [])
 ], HAccordionContent);
+
 export { HAccordionContent };
-//# sourceMappingURL=accordion_content.js.map
+//# sourceMappingURL=accordion_content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion_content.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion/accordion_content.ts"],"names":[],"mappings":"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"}
+{"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/accordion/accordion_group.d.ts

@@ -1,28 +1,28 @@
-import type { IAccordion, IAccordionGroup } from './accordion_types';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-export declare class HAccordionGroup extends PhoenixLightLitElement implements IAccordionGroup, IAccordion {
-    opened: boolean;
-    private _isDisabled;
-    private _regionId;
-    private _controlsId;
-    private _mode;
-    private _accordionGroupPropsSubject;
-    private _accordionGroupContext;
-    private _accordionContextConsumer;
-    private _accordionProps;
-    private _accordionPropsObserver;
-    constructor();
-    connectedCallback(): void;
-    private _subscribeObserver;
-    disconnectedCallback(): void;
-    show(): void;
-    hide(): void;
-    toggle(): void;
-    enable(): void;
-    disable(): void;
-    private _accordionToggle;
-    private _closeOtherAccordionGroups;
-    notify(): void;
-    protected updated(_changedProperties: Map<string, unknown>): void;
-    private _getProps;
-}
+import type { IAccordion, IAccordionGroup } from './accordion_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HAccordionGroup extends PhoenixLightLitElement implements IAccordionGroup, IAccordion {
+    opened: boolean;
+    private _isDisabled;
+    private _regionId;
+    private _controlsId;
+    private _mode;
+    private _accordionGroupPropsSubject;
+    private _accordionGroupContext;
+    private _accordionContextConsumer;
+    private _accordionProps;
+    private _accordionPropsObserver;
+    constructor();
+    connectedCallback(): void;
+    private _subscribeObserver;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    enable(): void;
+    disable(): void;
+    private _accordionToggle;
+    private _closeOtherAccordionGroups;
+    notify(): void;
+    protected updated(_changedProperties: Map<string, unknown>): void;
+    private _getProps;
+}

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

@@ -1,134 +1,135 @@
-import { __decorate, __metadata } from "tslib";
-import { ACCORDION_CONTEXTS, ACCORDION_EVENTS, ACCORDION_MODE } from './accordion_constants';
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property, state } from 'lit/decorators';
-import { BehaviorSubject } from '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
-import { ContextConsumerController } from '@phoenixRoot/core/context/context_consumer_controller';
-import { ContextProviderController } from '@phoenixRoot/core/context/context_provider_controller';
-import '@phoenixRoot/components/accordion/accordion';
-import { Observer } from '@phoenixRoot/core/classes/observer/observer';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-let HAccordionGroup = class HAccordionGroup extends PhoenixLightLitElement {
-    constructor() {
-        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_MODE.multi;
-        this._accordionToggle = () => {
-            this.toggle();
-        };
-        this._accordionGroupPropsSubject = new BehaviorSubject(this._getProps());
-        this._accordionGroupContext = new ContextProviderController(this);
-        this._accordionGroupContext.provide(ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
-        this.setAttribute('role', 'none');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._accordionContextConsumer = new ContextConsumerController(this);
-        this._subscribeObserver();
-        this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
-    }
-    async _subscribeObserver() {
-        this._accordionProps = await this._accordionContextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionProps);
-        this._accordionPropsObserver = new 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() {
-        this._accordionProps.unsubscribe(this._accordionPropsObserver);
-        this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
-    }
-    show() {
-        if (this._mode === ACCORDION_MODE.single)
-            this._closeOtherAccordionGroups();
-        this.opened = true;
-    }
-    hide() {
-        this.opened = false;
-    }
-    toggle() {
-        if (this._mode === ACCORDION_MODE.single)
-            this._closeOtherAccordionGroups();
-        this.opened = !this.opened;
-    }
-    enable() {
-        if (this._isDisabled) {
-            this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
-            this.hide();
-            this._isDisabled = false;
-        }
-    }
-    disable() {
-        if (!this._isDisabled) {
-            this.removeEventListener(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() {
-        this._accordionGroupPropsSubject.notify(this._getProps());
-    }
-    updated(_changedProperties) {
-        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
-        };
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "opened", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "_isDisabled", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "_regionId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HAccordionGroup.prototype, "_controlsId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HAccordionGroup.prototype, "_mode", void 0);
-HAccordionGroup = __decorate([
-    phoenixCustomElement('h-accordion-group'),
-    __metadata("design:paramtypes", [])
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { BehaviorSubject } from '../../core/classes/behavior_subject/behavior_subject.js';
+import { ContextProviderController } from '../../core/context/context_provider_controller.js';
+import { ACCORDION_MODE, ACCORDION_CONTEXTS, ACCORDION_EVENTS } from './accordion_constants.js';
+
+let HAccordionGroup = class HAccordionGroup extends PhoenixLightLitElement {
+    constructor() {
+        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_MODE.multi;
+        this._accordionToggle = () => {
+            this.toggle();
+        };
+        this._accordionGroupPropsSubject = new BehaviorSubject(this._getProps());
+        this._accordionGroupContext = new ContextProviderController(this);
+        this._accordionGroupContext.provide(ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
+        this.setAttribute('role', 'none');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionContextConsumer = new ContextConsumerController(this);
+        this._subscribeObserver();
+        this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    async _subscribeObserver() {
+        this._accordionProps = await this._accordionContextConsumer.consumeAsync(ACCORDION_CONTEXTS.accordionProps);
+        this._accordionPropsObserver = new 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() {
+        this._accordionProps.unsubscribe(this._accordionPropsObserver);
+        this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    show() {
+        if (this._mode === ACCORDION_MODE.single)
+            this._closeOtherAccordionGroups();
+        this.opened = true;
+    }
+    hide() {
+        this.opened = false;
+    }
+    toggle() {
+        if (this._mode === ACCORDION_MODE.single)
+            this._closeOtherAccordionGroups();
+        this.opened = !this.opened;
+    }
+    enable() {
+        if (this._isDisabled) {
+            this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.hide();
+            this._isDisabled = false;
+        }
+    }
+    disable() {
+        if (!this._isDisabled) {
+            this.removeEventListener(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() {
+        this._accordionGroupPropsSubject.notify(this._getProps());
+    }
+    updated(_changedProperties) {
+        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
+        };
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_isDisabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_regionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_controlsId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HAccordionGroup.prototype, "_mode", void 0);
+HAccordionGroup = __decorate([
+    phoenixCustomElement('h-accordion-group'),
+    __metadata("design:paramtypes", [])
 ], HAccordionGroup);
+
 export { HAccordionGroup };
-//# sourceMappingURL=accordion_group.js.map
+//# sourceMappingURL=accordion_group.js.map