@exmg/exm-collapsed 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/exm-collapsed-base.d.ts

@@ -0,0 +1,53 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare class ExmCollapsedBase extends ExmgElement {
+    /**
+     * Whether or not the element is opened or not
+     * @type {Boolean}
+     */
+    opened: boolean;
+    /**
+     * Whether the element is transitioning or not
+     * @type {Boolean}
+     */
+    transitioning: boolean;
+    _desiredSize: string;
+    _initialized: boolean;
+    constructor();
+    /**
+     * Toggle the current(opened/closed) state.
+     * @public
+     */
+    toggle(): void;
+    /**
+     * Set the opened state
+     * @public
+     */
+    show(): void;
+    /**
+     * Set the closed state
+     * @public
+     */
+    hide(): void;
+    /**
+     * @private
+     */
+    _calcSize(): string;
+    /**
+     * @private
+     */
+    _updateTransition(enabled: boolean): void;
+    updateSize(size: string, animated: boolean): void;
+    /**
+     * @private
+     */
+    _openedChanged(): void;
+    /**
+     * @private
+     */
+    _onTransitionEnd(event: TransitionEvent): void;
+    /**
+     * @private
+     */
+    _transitionEnd(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/exm-collapsed-base.js

@@ -0,0 +1,164 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { observer, ExmgElement } from '@exmg/lit-base/index.js';
+/**
+ * Helper function to toggle element
+ * @param className
+ * @param el
+ * @param val
+ */
+const toggleClass = (className, el, val) => {
+    if (val !== undefined) {
+        if (val) {
+            if (!el.classList.contains(className)) {
+                el.classList.add(className);
+            }
+        }
+        else {
+            el.classList.remove(className);
+        }
+    }
+    else {
+        el.classList.toggle(className);
+    }
+};
+export class ExmCollapsedBase extends ExmgElement {
+    constructor() {
+        super();
+        /**
+         * Whether or not the element is opened or not
+         * @type {Boolean}
+         */
+        this.opened = false;
+        /**
+         * Whether the element is transitioning or not
+         * @type {Boolean}
+         */
+        this.transitioning = false;
+        this._desiredSize = '';
+        this._initialized = false;
+        this.addEventListener('transitionend', this._onTransitionEnd.bind(this));
+        this.setAttribute('role', 'group');
+        this.setAttribute('aria-hidden', 'true');
+    }
+    /**
+     * Toggle the current(opened/closed) state.
+     * @public
+     */
+    toggle() {
+        this.opened = !this.opened;
+    }
+    /**
+     * Set the opened state
+     * @public
+     */
+    show() {
+        this.opened = true;
+    }
+    /**
+     * Set the closed state
+     * @public
+     */
+    hide() {
+        this.opened = false;
+    }
+    /**
+     * @private
+     */
+    _calcSize() {
+        return this.getBoundingClientRect()['height'] + 'px';
+    }
+    /**
+     * @private
+     */
+    _updateTransition(enabled) {
+        this.style.transitionDuration = enabled ? '' : '0s';
+    }
+    updateSize(size, animated) {
+        // Consider 'auto' as '', to take full size.
+        size = size === 'auto' ? '' : size;
+        let willAnimate = animated && this._desiredSize !== size;
+        this._desiredSize = size;
+        this._updateTransition(false);
+        // If we can animate, must do some prep work.
+        if (willAnimate) {
+            // Animation will start at the current size.
+            const startSize = this._calcSize();
+            // For `auto` we must calculate what is the final size for the animation.
+            // After the transition is done, _transitionEnd will set the size back to
+            // `auto`.
+            if (size === '') {
+                this.style['maxHeight'] = '';
+                size = this._calcSize();
+            }
+            // Go to startSize without animation.
+            this.style['maxHeight'] = startSize;
+            // Force layout to ensure transition will go. Set scrollTop to itself
+            // so that compilers won't remove it.
+            // eslint-disable-next-line no-self-assign
+            this.scrollTop = this.scrollTop;
+            // Enable animation.
+            this._updateTransition(true);
+            // If final size is the same as startSize it will not animate.
+            willAnimate = size !== startSize;
+        }
+        // Set the final size.
+        this.style['maxHeight'] = size;
+        // If it won't animate, call transitionEnd to set correct classes.
+        if (!willAnimate) {
+            this._transitionEnd();
+        }
+    }
+    /**
+     * @private
+     */
+    _openedChanged() {
+        this.setAttribute('aria-hidden', String(!this.opened));
+        if (this._initialized) {
+            this.transitioning = true;
+        }
+        toggleClass('collapse-closed', this, false);
+        toggleClass('collapse-opened', this, false);
+        this.updateSize(this.opened ? 'auto' : '0px', this._initialized);
+        // Focus the current collapse.
+        if (this.opened) {
+            this.focus();
+        }
+        this._initialized = true;
+    }
+    /**
+     * @private
+     */
+    _onTransitionEnd(event) {
+        if (event.target === this) {
+            this._transitionEnd();
+        }
+    }
+    /**
+     * @private
+     */
+    _transitionEnd() {
+        this.style['maxHeight'] = String(this._desiredSize);
+        toggleClass('collapse-closed', this, !this.opened);
+        toggleClass('collapse-opened', this, this.opened);
+        this._updateTransition(false);
+        this.transitioning = false;
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    observer(function () {
+        this._openedChanged();
+    })
+], ExmCollapsedBase.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmCollapsedBase.prototype, "transitioning", void 0);
+__decorate([
+    state()
+], ExmCollapsedBase.prototype, "_desiredSize", void 0);
+//# sourceMappingURL=exm-collapsed-base.js.map

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/exm-collapsed.d.ts

@@ -0,0 +1,15 @@
+import { ExmCollapsedBase } from './exm-collapsed-base.js';
+/**
+ * 'exm-collapsed' element contains a slot that can be expanded or collapsed to reveal additional content or information.
+ *
+ * @customElement exm-collapsed
+ * @extends ExmCollapsedBase
+ */
+export declare class ExmCollapsed extends ExmCollapsedBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-collapsed': ExmCollapsed;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/exm-collapsed.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmCollapsedBase } from './exm-collapsed-base.js';
+import { style } from './styles/exm-collapsed-styles-css.js';
+/**
+ * 'exm-collapsed' element contains a slot that can be expanded or collapsed to reveal additional content or information.
+ *
+ * @customElement exm-collapsed
+ * @extends ExmCollapsedBase
+ */
+let ExmCollapsed = class ExmCollapsed extends ExmCollapsedBase {
+};
+ExmCollapsed.styles = [style];
+ExmCollapsed = __decorate([
+    customElement('exm-collapsed')
+], ExmCollapsed);
+export { ExmCollapsed };
+//# sourceMappingURL=exm-collapsed.js.map

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ExmCollapsed } from './exm-collapsed.js';
+export { ExmCollapsedBase } from './exm-collapsed-base.js';
+export { style as collapsedStyles } from './styles/exm-collapsed-styles-css.js';

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/index.js

@@ -0,0 +1,4 @@
+export { ExmCollapsed } from './exm-collapsed.js';
+export { ExmCollapsedBase } from './exm-collapsed-base.js';
+export { style as collapsedStyles } from './styles/exm-collapsed-styles-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/styles/exm-collapsed-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-collapsed/dist/styles/exm-collapsed-styles-css.js

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    transition-duration: 300ms;
+    -webkit-transition-duration: 300ms;
+    overflow: visible;
+  }
+
+  :host(.collapse-closed) {
+    display: none;
+  }
+
+  :host(:not(.collapse-closed)) {
+    overflow: hidden;
+  }
+`;
+//# sourceMappingURL=exm-collapsed-styles-css.js.map

package/dist/exm-collapsed-base.js

@@ -1,7 +1,8 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { observer, ExmgElement } from '@exmg/lit-base/index.js';
+
 /**
  * Helper function to toggle element
  * @param className
@@ -23,7 +24,7 @@ const toggleClass = (className, el, val) => {
         el.classList.toggle(className);
     }
 };
-export class ExmCollapsedBase extends ExmgElement {
+class ExmCollapsedBase extends ExmgElement {
     constructor() {
         super();
         /**
@@ -161,4 +162,6 @@ __decorate([
 __decorate([
     state()
 ], ExmCollapsedBase.prototype, "_desiredSize", void 0);
-//# sourceMappingURL=exm-collapsed-base.js.map
+
+export { ExmCollapsedBase };
+//# sourceMappingURL=exm-collapsed-base.js.map

package/dist/exm-collapsed.js

@@ -1,7 +1,8 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators.js';
 import { ExmCollapsedBase } from './exm-collapsed-base.js';
 import { style } from './styles/exm-collapsed-styles-css.js';
+
 /**
  * 'exm-collapsed' element contains a slot that can be expanded or collapsed to reveal additional content or information.
  *
@@ -14,5 +15,6 @@ ExmCollapsed.styles = [style];
 ExmCollapsed = __decorate([
     customElement('exm-collapsed')
 ], ExmCollapsed);
+
 export { ExmCollapsed };
-//# sourceMappingURL=exm-collapsed.js.map
+//# sourceMappingURL=exm-collapsed.js.map

package/dist/index.js

@@ -1,4 +1,4 @@
 export { ExmCollapsed } from './exm-collapsed.js';
 export { ExmCollapsedBase } from './exm-collapsed-base.js';
 export { style as collapsedStyles } from './styles/exm-collapsed-styles-css.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-collapsed-styles-css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     display: block;
     transition-duration: 300ms;
@@ -15,4 +16,6 @@ export const style = css `
     overflow: hidden;
   }
 `;
-//# sourceMappingURL=exm-collapsed-styles-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-collapsed-styles-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-collapsed",
-  "version": "1.1.36",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
 }