@pushengineering/umg-web-components 3.2.21 → 3.2.23

package/dist/components/disclosure/disclosure.js

@@ -1,13 +1,15 @@
-import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.30.1_tslib@2.8.1_typescript@5.7.3/node_modules/tslib/tslib.es6.js';
-import { css, LitElement, html } from 'lit';
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.55.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
+import { stopAnimations, animateTo } from '../../scripts/utilities/animate.js';
 import { global } from '../../styles/global.js';
 import { settings } from '../../scripts/settings.js';
 import { mergeStyles } from '../../scripts/mergeStyles.js';
+import { DisclosureController } from './disclosure.controller.js';
 
 const { prefix } = settings;
 let Disclosure = class Disclosure extends LitElement {
@@ -19,28 +21,196 @@ let Disclosure = class Disclosure extends LitElement {
         this.summaryWidth = 'fit-content';
         this.detailsWidth = 'fit-content';
         this.justify = 'start';
-        this.mobileJustify = 'start';
+        this.iconPosition = 'right';
         this.iconAnimation = 'flip';
         this.border = false;
         this.open = false;
-        this.disclosureOpen = () => {
+        this.controller = DisclosureController.getInstance();
+        this.isAnimating = false;
+        this.lastInteractionWasKeyboard = false;
+        this.disclosureOpen = async () => {
             this.open = true;
-            this._details.setAttribute('open', '');
+            await new Promise((resolve) => {
+                requestAnimationFrame(() => resolve());
+            });
+            while (this.isAnimating) {
+                await new Promise((resolve) => {
+                    requestAnimationFrame(() => resolve());
+                });
+            }
         };
-        this.disclosureClose = () => {
+        this.disclosureClose = async () => {
             this.open = false;
-            this._details.removeAttribute('open');
+            await new Promise((resolve) => {
+                requestAnimationFrame(() => resolve());
+            });
+            while (this.isAnimating) {
+                await new Promise((resolve) => {
+                    requestAnimationFrame(() => resolve());
+                });
+            }
         };
         this.getDisclosureOpenState = () => {
             return this.open;
         };
+        this._handleKeyDown = () => {
+            this.lastInteractionWasKeyboard = true;
+        };
+        this._handleMouseDown = () => {
+            this.lastInteractionWasKeyboard = false;
+        };
+        this._handleTouchStart = () => {
+            this.lastInteractionWasKeyboard = false;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.groupId) {
+            this.controller.addHost(this);
+            this._registerWithGroup();
+        }
+        document.addEventListener('keydown', this._handleKeyDown, true);
+        document.addEventListener('mousedown', this._handleMouseDown, true);
+        document.addEventListener('touchstart', this._handleTouchStart, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.currentGroupId) {
+            this.controller.unregisterDisclosure(this, this.currentGroupId);
+        }
+        if (this.groupId) {
+            this.controller.removeHost(this);
+        }
+        document.removeEventListener('keydown', this._handleKeyDown, true);
+        document.removeEventListener('mousedown', this._handleMouseDown, true);
+        document.removeEventListener('touchstart', this._handleTouchStart, true);
+        this.currentGroupId = undefined;
+    }
+    _registerWithGroup() {
+        if (this.groupId) {
+            this.currentGroupId = this.groupId;
+            this.controller.registerDisclosure(this, this.groupId);
+        }
+    }
+    _handleGroupIdChange() {
+        if (this.currentGroupId) {
+            this.controller.unregisterDisclosure(this, this.currentGroupId);
+            this.currentGroupId = undefined;
+        }
+        if (this.groupId) {
+            this.controller.addHost(this);
+            this._registerWithGroup();
+        }
+        else {
+            this.controller.removeHost(this);
+        }
+    }
+    async firstUpdated() {
+        if (this.open && this._detailsContent) {
+            this._detailsContent.style.height = '0';
+            this._detailsContent.style.overflowY = 'hidden';
+            await new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        resolve();
+                    });
+                });
+            });
+            if (this.open && this._detailsContent) {
+                await this._startOpeningAnimation();
+            }
+        }
+        else if (this._detailsContent) {
+            this._detailsContent.style.overflowY = 'hidden';
+        }
+    }
+    async _startOpeningAnimation() {
+        if (!this._drawer || !this._detailsContent)
+            return;
+        await stopAnimations(this._detailsContent);
+        this._details.setAttribute('open', '');
+        this._detailsContent.style.height = '0';
+        this._detailsContent.style.opacity = '0';
+        this._detailsContent.style.overflowY = 'hidden';
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    resolve();
+                });
+            });
+        });
+        if (!this.open || !this._detailsContent) {
+            this.isAnimating = false;
+            return;
+        }
+        const targetHeight = this._detailsContent.scrollHeight;
+        const keyframes = [
+            { height: '0', opacity: '0' },
+            { height: `${targetHeight}px`, opacity: '1' },
+        ];
+        const options = {
+            duration: 100,
+            easing: 'linear',
+        };
+        await animateTo(this._detailsContent, keyframes, options);
+        this._detailsContent.style.height = 'auto';
+        this._detailsContent.style.opacity = '1';
+        this._detailsContent.style.overflowY = 'auto';
+        this.isAnimating = false;
+    }
+    async _startClosingAnimation() {
+        if (!this._drawer || !this._detailsContent)
+            return;
+        await stopAnimations(this._detailsContent);
+        const currentHeight = this._detailsContent.scrollHeight;
+        this._detailsContent.style.height = `${currentHeight}px`;
+        this._detailsContent.style.overflowY = 'auto';
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => resolve());
+        });
+        const keyframes = [
+            { height: `${currentHeight}px`, opacity: '1' },
+            { height: '0', opacity: '0' },
+        ];
+        const options = {
+            duration: 200,
+            easing: 'linear',
+        };
+        await animateTo(this._detailsContent, keyframes, options);
+        this._detailsContent.style.height = '0';
+        this._detailsContent.style.opacity = '0';
+        this._detailsContent.style.overflowY = 'hidden';
+        this._details.removeAttribute('open');
+        this.isAnimating = false;
     }
     updated(changedProperties) {
+        if (changedProperties.has('groupId')) {
+            this._handleGroupIdChange();
+        }
         if (changedProperties.has('open')) {
+            if (this.open) {
+                this._details.setAttribute('open', '');
+            }
+            else {
+                this._details.removeAttribute('open');
+            }
             if (this.open === true) {
-                setTimeout(() => {
-                    this._detailsContent.classList.add('opening');
-                });
+                if (this.isAnimating)
+                    return;
+                this.isAnimating = true;
+                if (this.currentGroupId) {
+                    this.controller.notifyDisclosureOpening(this, this.currentGroupId).then(() => {
+                        if (this.open) {
+                            this._startOpeningAnimation();
+                        }
+                        else {
+                            this.isAnimating = false;
+                        }
+                    });
+                }
+                else {
+                    this._startOpeningAnimation();
+                }
                 this.dispatchEvent(new CustomEvent('umg-disclosure:opened', {
                     detail: {
                         target: this,
@@ -50,9 +220,13 @@ let Disclosure = class Disclosure extends LitElement {
                 }));
             }
             else if (this.open === false) {
-                setTimeout(() => {
-                    this._detailsContent.classList.remove('opening');
-                });
+                if (this.isAnimating)
+                    return;
+                this.isAnimating = true;
+                if (this.currentGroupId) {
+                    this.controller.notifyDisclosureClosing(this, this.currentGroupId);
+                }
+                this._startClosingAnimation();
                 this.dispatchEvent(new CustomEvent('umg-disclosure:closed', {
                     detail: {
                         target: this,
@@ -63,15 +237,16 @@ let Disclosure = class Disclosure extends LitElement {
             }
         }
     }
-    _summaryClick() {
+    _summaryClick(e) {
+        e.preventDefault();
         this.open = !this.open;
     }
     summaryClasses() {
         const classes = {};
         classes['disclosure__summary--icon-' + this.iconAnimation] = true;
         classes['disclosure__summary--justify-' + this.justify] = true;
-        classes['disclosure__summary--mobile-justify-' + this.mobileJustify] = true;
         classes['disclosure__summary--' + this.summaryWidth] = true;
+        classes['disclosure__summary--icon-position-' + this.iconPosition] = true;
         return classes;
     }
     drawerClasses() {
@@ -118,11 +293,29 @@ let Disclosure = class Disclosure extends LitElement {
         }
         return classes;
     }
+    _handleFocusIn(e) {
+        if (this.lastInteractionWasKeyboard) {
+            const focusTarget = e.composedPath()[1];
+            focusTarget.classList.add('focus-visible');
+        }
+    }
+    _handleFocusOut(e) {
+        const focusTarget = e.composedPath()[1];
+        focusTarget.classList.remove('focus-visible');
+    }
     render() {
+        const centeringPin = (this.iconPosition === 'pin-left'
+            && this.justify === 'center')
+            || (this.iconPosition === 'pin-right'
+                && this.justify === 'center')
+            ? html `<div class="summary-centering-pin"></div>`
+            : nothing;
         return html `
             <details
                 part="disclosure"
                 class="disclosure__details"
+                @focusin=${this._handleFocusIn}
+                @focusout=${this._handleFocusOut}
                 >
                 <summary
                     part="disclosure-summary"
@@ -133,8 +326,13 @@ let Disclosure = class Disclosure extends LitElement {
                     @click=${this._summaryClick}
                     >
                     <div class="disclosure__summary-content">
-                        <slot name="summary"></slot>
-                        <slot name="icon"></slot>
+                        ${centeringPin}
+                        <div class="summary__content">
+                            <slot name="summary"></slot>
+                        </div>
+                        <div class="summary__icon">
+                            <slot name="icon"></slot>
+                        </div>
                     </div>
                 </summary>
                 <div
@@ -158,6 +356,10 @@ let Disclosure = class Disclosure extends LitElement {
 Disclosure.styles = mergeStyles([
     global,
     css `
+            :host {
+                display: block;
+            }
+
             :host([overlay]) {
                 position: relative;
             }
@@ -165,10 +367,20 @@ Disclosure.styles = mergeStyles([
             ::slotted(*[slot=summary]) {
                 flex: 0 1 auto;
             }
+
             ::slotted(*[slot=icon]) {
                 transition: transform 0.2s ease;
             }
 
+            .disclosure__details {
+                overflow: hidden;
+                border-style: solid;
+                border-radius: var(--umg-border-disclosure-corner-radius, 0);
+                border-width: var(--umg-border-disclosure-width, 0.0625em);
+                border-color: rgb(from var(--umg-color-disclosure-border, rgb(0, 0, 0, 0)) r g b / alpha);
+                padding: var(--umg-space-disclosure-padding, 0.5rem);
+            }
+
             /** Summary */
             .disclosure__details summary::-webkit-details-marker {
                 display:none;
@@ -176,27 +388,18 @@ Disclosure.styles = mergeStyles([
 
             .disclosure__summary {
                 cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: start;
-                gap: var(--umg-space-8, 0.5rem);
                 list-style: none;
                 padding: var(--umg-space-summary-padding, 0.5rem);
-                border: 0.0625rem solid var(--umg-color-summary-border, rgb(0,0,0,0));
+                color: rgb(from var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
+                background-color: rgb(from var(--umg-color-summary-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b / alpha);
+                border-style: solid;
+                border-width: var(--umg-border-summary-width, 0.0625em);
+                border-color: rgb(from var(--umg-color-summary-border, rgb(0,0,0,0)) r g b / alpha);
                 border-radius: var(--umg-border-base-corner-radius, 0);
-                color: var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0)));
-                background-color: var(--umg-color-summary-background, rgb(255, 255, 255));
-            }
-
-            @supports (color: rgb(from white r g b)) {
-                .disclosure__summary {
-                    border-color: rgb(from var(--umg-color-summary-border, rgb(0,0,0,0)) r g b / alpha);
-                    color: rgb(from var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
-                    background-color: rgb(from var(--umg-color-summary-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b / alpha);
-                }
+                --umg-color-base-text: var(--umg-color-summary-text, inherit);
             }
 
-            .disclosure__summary-content {
+                .disclosure__summary-content {
                 display: flex;
                 align-items: center;
                 justify-content: start;
@@ -207,34 +410,73 @@ Disclosure.styles = mergeStyles([
             .disclosure__summary--fit-content {
                 width: fit-content;
             }
+
             .disclosure__summary--fill {
                 width: 100%;
             }
 
-            /** Summary justify content */
-            .disclosure__summary--justify-center {
+            /** Summary content alignment */
+            .disclosure__summary--justify-start .disclosure__summary-content {
+                justify-content: start;
+            }
+
+            .disclosure__summary--justify-center .disclosure__summary-content {
                 justify-content: center;
             }
-            .disclosure__summary--justify-end {
+
+            .disclosure__summary--justify-end .disclosure__summary-content {
                 justify-content: end;
             }
-            .disclosure__summary--justify-space-between {
-                justify-content: space-between;
+
+            /* Summary icon position */
+            .disclosure__summary--icon-position-left .disclosure__summary-content,
+            .disclosure__summary--icon-position-pin-left .disclosure__summary-content {
+                flex-direction: row-reverse;
+            }
+
+            .disclosure__summary--icon-position-pin-right .summary-centering-pin {
+                flex: 1;
+                margin-right: auto;
             }
-            @media screen and (max-width: 48rem) {
-                .disclosure__summary--mobile-justify-center {
-                    justify-content: center;
-                }
-                .disclosure__summary--mobile-justify-end {
-                    justify-content: end;
-                }
-                .disclosure__summary--mobile-justify-space-between {
-                    justify-content: space-between;
-                }
+
+            .disclosure__summary--icon-position-pin-left .summary-centering-pin {
+                flex: 1;
+                margin-left: auto;
             }
 
-            .disclosure__summary--icon-left {
-                flex-direction: row-reverse;
+            /* Icon pinned Left */
+            .disclosure__summary--icon-position-pin-left .summary__icon {
+                flex: 1;
+                margin-right: auto;
+            }
+
+            .disclosure__summary--icon-position-pin-left.disclosure__summary--justify-start .summary__icon {
+                flex: 0;
+                margin-right: unset;
+            }
+
+            .disclosure__summary--icon-position-pin-left.disclosure__summary--justify-center .summary__content,
+            .disclosure__summary--icon-position-pin-right.disclosure__summary--justify-center .summary__content {
+                flex: 0 0 auto;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            /* Icon pinned Right */
+            .disclosure__summary--icon-position-pin-right .disclosure__summary-content .summary__icon {
+                flex: 1;
+                margin-left: auto;
+            }
+
+            .disclosure__summary--icon-position-pin-right .disclosure__summary-content .summary__icon ::slotted(*[slot=icon]) {
+                display: block;
+                width: fit-content;
+                margin-left: auto;
+            }
+            
+            .disclosure__summary--icon-position-pin-right.disclosure__summary--justify-end .summary__icon {
+                flex: 0 0 auto;
+                margin-left: unset;
             }
 
             /** Drawer */
@@ -242,6 +484,7 @@ Disclosure.styles = mergeStyles([
                 min-width: fit-content;
                 overflow: hidden;
             }
+
             .disclosure__drawer:not(.disclosure__drawer--overlay) {
                 margin-top: var(--umg-space-disclosure-distance, 1rem)
             }
@@ -264,25 +507,16 @@ Disclosure.styles = mergeStyles([
 
             @media screen and (min-width: 48.06rem) {
                 .disclosure__drawer--overlay.disclosure__drawer--align-right:not(.disclosure__drawer--fill) .disclosure__content {
-                    box-shadow: -0.250rem -0.250rem 0.5rem 0 var(--umg-color-base-shadow, rgb(0,0,0,0));
+                    box-shadow: -0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-shadow, rgb(0,0,0,0)) r g b / alpha);
                     margin: 0 0 0.750rem 0.750rem;
                 }
-                @supports (color: rgb(from white r g b)) {
-                    .disclosure__drawer--overlay.disclosure__drawer--align-right:not(.disclosure__drawer--fill) .disclosure__content {
-                        box-shadow: -0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-shadow, rgb(0,0,0,0)) r g b / alpha);
-                    }
-                }
             }
+
             @media screen and (min-width: 48.06rem) {
                 .disclosure__drawer--overlay.disclosure__drawer--align-left:not(.disclosure__drawer--fill) .disclosure__content {
-                    box-shadow: 0.250rem 0.250rem 0.5rem 0 var(--umg-color-base-shadow, rgb(0,0,0,0));
+                    box-shadow: 0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-shadow, rgb(0,0,0,0)) r g b / alpha);
                     margin: 0 0.750rem 0.750rem 0;
                 }
-                @supports (color: rgb(from white r g b)) {
-                    .disclosure__drawer--overlay.disclosure__drawer--align-left:not(.disclosure__drawer--fill) .disclosure__content {
-                        box-shadow: 0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-shadow, rgb(0,0,0,0)) r g b / alpha);
-                    }
-                }
             }
 
             .disclosure__drawer--fill.disclosure__drawer--overlay  {
@@ -302,69 +536,25 @@ Disclosure.styles = mergeStyles([
             /* Disclosure content */
             .disclosure__content {
                 border-radius: var(--umg-border-base-corner-radius);
-                overflow-y: auto;
+                overflow: hidden;
                 border-style: solid;
-                border-width: 0.0625rem;
-                padding: var(--umg-space-details-padding, 0.5rem 0);
-
-                color: var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0)));
-                background-color: var(--umg-color-details-background, var(--umg-color-base-background, rgb(255, 255, 255)));
-                border-color: var(--umg-color-details-border, var(--umg-color-base-border, rgb(0,0,0,0)));
+                border-width: var(--umg-border-details-width, 0.0625em);
+                border-color: rgb(from var(--umg-color-details-border, var(--umg-color-base-border, rgb(0,0,0,0))) r g b / alpha);
+                padding: var(--umg-space-details-padding, 0.5rem);
+                color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
+                background-color: rgb(from var(--umg-color-details-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b);
+                height: 0;
+                min-height: 0;
 
                 --umg-color-base-text: var(--umg-color-details-text);
                 --umg-color-base-background: var(--umg-color-details-background);
             }
-            
-            @supports (color: rgb(from white r g b)) {
-                .disclosure__content {
-                    color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
-                    background-color: rgb(from var(--umg-color-details-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b);
-                    border-color: rgb(from var(--umg-color-details-border, var(--umg-color-base-border, rgb(0,0,0,0))) r g b / alpha);
-                }
-            }
+
             
             /* Toggle state */
             .disclosure__details[open] .disclosure__summary--icon-flip ::slotted(*[slot=icon]) {
                 transform: rotate(180deg);
             }
-            .disclosure__drawer {
-                visibility: hidden;
-            }
-            .disclosure__content {
-                visibility: hidden;
-            }
-            
-            .disclosure__details[open] .disclosure__drawer.opening {
-                visibility: visible;
-            }
-
-            .disclosure__details[open] .disclosure__content.opening {
-                transition: transform 0.2s ease, visibility 0.2s ease;
-                visibility: visible;
-            }
-
-            /* Opening direction */
-            .disclosure__content.open--vertical {
-                transform: translateY(var(--umg-animation-disclosure-origin));
-            }
-            .disclosure__details[open] .disclosure__content.open--vertical.opening {
-                transform: translateY(0);
-            }
-            .disclosure__details[open] .disclosure__content.open--horizontal.opening {
-                transform: translateX(0);
-            }
-            .disclosure__content.open--horizontal {
-                transform: translateX(var(--umg-animation-disclosure-origin));
-            }
-            
-            @media screen and (max-width: 48rem) {
-                .disclosure__content.open--vertical {
-                    transform: translateY(var(--umg-animation-disclosure-origin-mobile));
-                }
-                .disclosure__content.open--horizontal {
-                    transform: translateX(var(--umg-animation-disclosure-origin-mobile));
-                }
-            }
 
             /* Content overflow scrollbar */
             .disclosure__content::-webkit-scrollbar {
@@ -390,46 +580,52 @@ Disclosure.styles = mergeStyles([
 ]);
 __decorate([
     property()
-], Disclosure.prototype, "direction", undefined);
+], Disclosure.prototype, "direction", void 0);
 __decorate([
     property({ type: Boolean })
-], Disclosure.prototype, "mobileDirectionInverse", undefined);
+], Disclosure.prototype, "mobileDirectionInverse", void 0);
 __decorate([
     property({ type: Boolean })
-], Disclosure.prototype, "overlay", undefined);
+], Disclosure.prototype, "overlay", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "summaryWidth", undefined);
+], Disclosure.prototype, "summaryWidth", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "detailsWidth", undefined);
+], Disclosure.prototype, "detailsWidth", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "justify", undefined);
+], Disclosure.prototype, "justify", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "mobileJustify", undefined);
+], Disclosure.prototype, "iconPosition", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "iconAnimation", undefined);
+], Disclosure.prototype, "iconAnimation", void 0);
 __decorate([
     property({ type: Boolean })
-], Disclosure.prototype, "border", undefined);
+], Disclosure.prototype, "border", void 0);
 __decorate([
     property()
-], Disclosure.prototype, "align", undefined);
+], Disclosure.prototype, "align", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Disclosure.prototype, "open", undefined);
+], Disclosure.prototype, "open", void 0);
+__decorate([
+    property()
+], Disclosure.prototype, "groupId", void 0);
 __decorate([
     query('summary')
-], Disclosure.prototype, "_summary", undefined);
+], Disclosure.prototype, "_summary", void 0);
 __decorate([
     query('details')
-], Disclosure.prototype, "_details", undefined);
+], Disclosure.prototype, "_details", void 0);
 __decorate([
     query('.disclosure__content')
-], Disclosure.prototype, "_detailsContent", undefined);
+], Disclosure.prototype, "_detailsContent", void 0);
+__decorate([
+    query('.disclosure__drawer')
+], Disclosure.prototype, "_drawer", void 0);
 Disclosure = __decorate([
     customElement(`${prefix}-disclosure`)
 ], Disclosure);