@exmg/exm-collapsed 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# `<exm-collapsed>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-collapsed.svg)](https://www.npmjs.com/package/@exmg/exm-collapsed)
+
+Collapsed element contains a slot that can be expanded or collapsed to reveal additional content or information.
+
+[Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-collapsed)
+
+## Installation
+
+```sh
+npm install @exmg/exm-collapsed
+```
+
+## Example Usage
+
+### Standard
+
+```js
+@property({type:  Boolean})
+opened = false;
+```
+
+```html
+<exm-button @click="${()" =""> (this.opened = !this.opened)}>Open</exm-button>
+
+<exm-collapsed ?opened="${this.opened}">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua.
+</exm-collapsed>
+```
+
+## API
+
+### Slots
+
+| Name      | Description                                               |
+| --------- | --------------------------------------------------------- |
+| _default_ | Default content to display within the collapsible element |
+
+### Properties/Attributes
+
+| Name     | Type      | Default | Description                       |
+| -------- | --------- | ------- | --------------------------------- |
+| `opened` | `boolean` | `false` | The opened state of the component |
+
+### Methods
+
+| Name     | Description                                       |
+| -------- | ------------------------------------------------- |
+| `toggle` | Toggles the opened state of the component         |
+| `show`   | Sets the opened state of the component to _true_  |
+| `hide`   | Sets the opened state of the component to _false_ |
+
+### Events
+
+_None_
+
+### CSS Custom Properties
+
+_None_
+
+## Additional references
+
+- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmgCollapsed.html)
+
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-collapsed)

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@exmg/exm-collapsed",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-collapsed.js": "./src/exm-collapsed.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "collapsed"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-collapsed"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-collapsed-base.d.ts

@@ -0,0 +1,53 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare class ExmgCollapsedBase 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/src/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 ExmgCollapsedBase 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();
+    })
+], ExmgCollapsedBase.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmgCollapsedBase.prototype, "transitioning", void 0);
+__decorate([
+    state()
+], ExmgCollapsedBase.prototype, "_desiredSize", void 0);
+//# sourceMappingURL=exm-collapsed-base.js.map

package/src/exm-collapsed.d.ts

@@ -0,0 +1,15 @@
+import { ExmgCollapsedBase } 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 ExmgCollapsedBase
+ */
+export declare class ExmgCollapsed extends ExmgCollapsedBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-collapsed': ExmgCollapsed;
+    }
+}

package/src/exm-collapsed.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmgCollapsedBase } 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 ExmgCollapsedBase
+ */
+let ExmgCollapsed = class ExmgCollapsed extends ExmgCollapsedBase {
+};
+ExmgCollapsed.styles = [style];
+ExmgCollapsed = __decorate([
+    customElement('exm-collapsed')
+], ExmgCollapsed);
+export { ExmgCollapsed };
+//# sourceMappingURL=exm-collapsed.js.map

package/src/styles/exm-collapsed-styles-css.d.ts

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

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

@@ -0,0 +1,4 @@
+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}`;
+export default style;
+//# sourceMappingURL=exm-collapsed-styles-css.js.map

package/src/styles/exm-collapsed-styles.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  transition-duration: 300ms;
+  -webkit-transition-duration: 300ms;
+  overflow: visible;
+}
+:host(.collapse-closed) {
+  display: none;
+}
+:host(:not(.collapse-closed)) {
+  overflow: hidden;
+}