@teipublisher/pb-components 2.25.5 → 2.25.6

package/src/pb-collapse.js

@@ -1,11 +1,10 @@
-import {LitElement, html, css} from 'lit-element';
-import {pbMixin} from './pb-mixin.js';
-import {themableMixin} from "./theming.js";
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin } from './pb-mixin.js';
+import { themableMixin } from './theming.js';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
 import '@polymer/iron-collapse';
 
-
 /**
  * A collapsible block: in collapsed state it only shows a header and expands if clicked.
  * The header should go into slot `collapse-trigger`, the content into `collapse-content`.
@@ -31,165 +30,169 @@ import '@polymer/iron-collapse';
  * @fires pb-collapse-open - Fires opening the collapsed section
  */
 export class PbCollapse extends themableMixin(pbMixin(LitElement)) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * @deprecated
-             * Corresponds to the iron-collapse's horizontal property.
-             */
-            horizontal: {
-                type: Boolean
-            },
-            /**
-             * Corresponds to the iron-collapse's noAnimation property.
-             *
-             */
-            noAnimation: {
-                type: Boolean,
-                attribute: 'no-animation'
-            },
-            /**
-             * Whether currently expanded.
-             *
-             */
-            opened: {
-                type: Boolean
-            },
-            /**
-             * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
-             * Set to true to keep multiple pb-collapse open at the same time.
-             */
-            toggles: {
-                type: Boolean
-            },
-            /**
-             * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
-             */
-            expandIcon: {
-                type: String,
-                attribute: 'expand-icon'
-            },
-            /**
-             * The icon when expanded.
-             */
-            collapseIcon: {
-                type: String,
-                attribute: 'collapse-icon'
-            },
-            /**
-             * Whether to hide the expand/collapse icon.
-             */
-            noIcons: {
-                type: Boolean,
-                attribute: 'no-icons'
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * @deprecated
+       * Corresponds to the iron-collapse's horizontal property.
+       */
+      horizontal: {
+        type: Boolean,
+      },
+      /**
+       * Corresponds to the iron-collapse's noAnimation property.
+       *
+       */
+      noAnimation: {
+        type: Boolean,
+        attribute: 'no-animation',
+      },
+      /**
+       * Whether currently expanded.
+       *
+       */
+      opened: {
+        type: Boolean,
+      },
+      /**
+       * By default, an open collapse is closed if another pb-collapse is expanded on the same event channel.
+       * Set to true to keep multiple pb-collapse open at the same time.
+       */
+      toggles: {
+        type: Boolean,
+      },
+      /**
+       * The iron-icon when collapsed. Value must be one of the icons defined by iron-icons
+       */
+      expandIcon: {
+        type: String,
+        attribute: 'expand-icon',
+      },
+      /**
+       * The icon when expanded.
+       */
+      collapseIcon: {
+        type: String,
+        attribute: 'collapse-icon',
+      },
+      /**
+       * Whether to hide the expand/collapse icon.
+       */
+      noIcons: {
+        type: Boolean,
+        attribute: 'no-icons',
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.horizontal = false;
-        this.noAnimation = false;
-        this.opened = false;
-        this.expandIcon = 'icons:expand-more';
-        this.collapseIcon = 'icons:expand-less';
-        this.noIcons = false;
-        this.toggles = false;
-    }
+  constructor() {
+    super();
+    this.horizontal = false;
+    this.noAnimation = false;
+    this.opened = false;
+    this.expandIcon = 'icons:expand-more';
+    this.collapseIcon = 'icons:expand-less';
+    this.noIcons = false;
+    this.toggles = false;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('pb-collapse-open', () => {
-            this.open();
-        });
-        if (this.toggles) {
-            this.subscribeTo('pb-collapse-open', (ev) => {
-                if (!ev.detail || ev.detail._source === this) {
-                    return;
-                }
-                for (const collapse of this.querySelectorAll('pb-collapse')) {
-                    if (collapse === ev.detail._source) {
-                        return;
-                    }
-                }
-                this.close();
-            });
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('pb-collapse-open', () => {
+      this.open();
+    });
+    if (this.toggles) {
+      this.subscribeTo('pb-collapse-open', ev => {
+        if (!ev.detail || ev.detail._source === this) {
+          return;
         }
-    }
-
-    /**
-     * opens the collapsible section
-     */
-    open() {
-        if (this.opened) {
+        for (const collapse of this.querySelectorAll('pb-collapse')) {
+          if (collapse === ev.detail._source) {
             return;
+          }
         }
-        this.opened = true;
-
-        this.emitTo('pb-collapse-open', this);
+        this.close();
+      });
     }
+  }
 
-    /**
-     * closes the collapsible section
-     */
-    close() {
-        if (this.opened) {
-            this.opened = false;
-        }
+  /**
+   * opens the collapsible section
+   */
+  open() {
+    if (this.opened) {
+      return;
     }
+    this.opened = true;
 
-    /**
-     * toggles the collapsible state
-     */
-    toggle() {
-        this.opened = !this.opened;
-        if (this.opened) {
-            this.emitTo('pb-collapse-open', this.data);
-        }
+    this.emitTo('pb-collapse-open', this);
+  }
+
+  /**
+   * closes the collapsible section
+   */
+  close() {
+    if (this.opened) {
+      this.opened = false;
     }
+  }
 
-    render() {
-        return html`
-            <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
-                ${
-                    !this.noIcons ?
-                html`<iron-icon icon="${this.opened ? this.collapseIcon : this.expandIcon}"></iron-icon>` :
-                        null
-                }
-                <slot id="collapseTrigger" name="collapse-trigger"></slot>
-            </div>
-            <iron-collapse id="collapse" horizontal="${this.horizontal}" no-animation="${this.noAnimation}" .opened="${this.opened}">
-                <slot name="collapse-content"></slot>
-            </iron-collapse>
-        `;
+  /**
+   * toggles the collapsible state
+   */
+  toggle() {
+    this.opened = !this.opened;
+    if (this.opened) {
+      this.emitTo('pb-collapse-open', this.data);
     }
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                position: relative;
-            }
+  render() {
+    return html`
+      <div id="trigger" @click="${this.toggle}" class="collapse-trigger">
+        ${!this.noIcons
+          ? html`<iron-icon
+              icon="${this.opened ? this.collapseIcon : this.expandIcon}"
+            ></iron-icon>`
+          : null}
+        <slot id="collapseTrigger" name="collapse-trigger"></slot>
+      </div>
+      <iron-collapse
+        id="collapse"
+        horizontal="${this.horizontal}"
+        no-animation="${this.noAnimation}"
+        .opened="${this.opened}"
+      >
+        <slot name="collapse-content"></slot>
+      </iron-collapse>
+    `;
+  }
 
-            #trigger {
-                display: grid;
-                align-items:center;
-                grid-template-columns:min-content auto;
-            }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        position: relative;
+      }
 
-            iron-icon {
-                padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
-            }
+      #trigger {
+        display: grid;
+        align-items: center;
+        grid-template-columns: min-content auto;
+      }
 
-            :host(.icon-right) iron-icon {
-                position: absolute;
-                right: 0;
-            }
+      iron-icon {
+        padding: var(--pb-collapse-icon-padding, 0 4px 0 0);
+      }
 
-        `;
-    }
+      :host(.icon-right) iron-icon {
+        position: absolute;
+        right: 0;
+      }
+    `;
+  }
 }
 if (!customElements.get('pb-collapse')) {
-    customElements.define('pb-collapse', PbCollapse);
+  customElements.define('pb-collapse', PbCollapse);
 }