@ptcwebops/ptcw-design 0.5.5 → 0.5.7

package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js

@@ -0,0 +1,296 @@
+import { Component, Host, h, Prop, State, Element, Method, Event, } from '@stencil/core';
+import { hasSlot } from '../../../utils/component';
+export class PtcAccordionItem {
+  constructor() {
+    /**
+     * Heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.heading = null;
+    /**
+     * The HTML tag to be applied to the heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.headingTag = 'h3';
+    /**
+     * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
+     */
+    this.autoHeight = false;
+    /**
+     * If the accordion item should be opened by default
+     */
+    this.active = false;
+    this.hasHeadingSlot = true;
+    this.hasArrowSlot = true;
+  }
+  componentWillLoad() {
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  componentDidLoad() {
+    if (this.autoHeight) {
+      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
+    }
+    this.onTransitionEnd();
+    this.bodyEl.addEventListener('transitionstart', () => {
+      this.onTransitionStart();
+    });
+    this.bodyEl.addEventListener('transitionend', () => {
+      this.onTransitionEnd();
+    });
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  onTransitionEnd() {
+    if (this.active) {
+      this.bodyEl.style.overflow = 'auto';
+      this.opened.emit();
+    }
+    else {
+      this.bodyEl.style.overflow = 'hidden';
+      this.bodyEl.style.visibility = 'hidden';
+      this.closed.emit();
+    }
+  }
+  onTransitionStart() {
+    if (this.active) {
+      this.bodyEl.style.visibility = 'visible';
+      this.opening.emit();
+    }
+    else {
+      this.closing.emit();
+    }
+  }
+  /**
+   * Toggle open state of accordion item
+   */
+  async toggle() {
+    if (this.active) {
+      this.close();
+    }
+    else {
+      this.open();
+    }
+  }
+  /**
+   * Closes the accordion item
+   */
+  async close() {
+    this.active = false;
+  }
+  /**
+   * Opens the accordion item.
+   */
+  async open() {
+    this.active = true;
+  }
+  render() {
+    const { active, autoHeight, headingTag: HeadingTag } = this;
+    return (h(Host, { class: { active, autoHeight } },
+      h("button", { class: "heading", role: "button", onClick: () => this.toggle() },
+        h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
+          h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))),
+        this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))),
+      h("div", { class: "body-container", ref: el => (this.bodyEl = el) },
+        h("div", { class: "body" },
+          h("slot", null)))));
+  }
+  static get is() { return "ptc-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-accordion-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-accordion-item.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Heading text.\nThis will be overwritten by `heading` slot"
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "headingTag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The HTML tag to be applied to the heading text.\nThis will be overwritten by `heading` slot"
+      },
+      "attribute": "heading-tag",
+      "reflect": false,
+      "defaultValue": "'h3'"
+    },
+    "autoHeight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height"
+      },
+      "attribute": "auto-height",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If the accordion item should be opened by default"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasHeadingSlot": {},
+    "hasArrowSlot": {}
+  }; }
+  static get events() { return [{
+      "method": "opened",
+      "name": "opened",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item has opened"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "opening",
+      "name": "opening",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item started opening"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item has closed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "closing",
+      "name": "closing",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when accordion item started closing"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle open state of accordion item",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Closes the accordion item",
+        "tags": []
+      }
+    },
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Opens the accordion item.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-accordion/ptc-accordion.css

@@ -0,0 +1,8 @@
+:host {
+  /**
+    @prop --ptc-accordion-item-body-max-height:
+      Inner content max height. This values is also used for CSS animation
+      - default: 100vh
+  */
+  --ptc-accordion-item-body-max-height: 100vh;
+}

package/dist/collection/components/ptc-accordion/ptc-accordion.js

@@ -0,0 +1,74 @@
+import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';
+export class PtcAccordion {
+  constructor() {
+    /**
+     * If multiple `<ptc-accordion-item>`s can open at the same time
+     */
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    if (!this.multiple) {
+      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
+      if (this.activeItem) {
+        this.activeItem.open();
+      }
+      this.closeNonActive();
+    }
+  }
+  openHandler(e) {
+    e.stopPropagation();
+    const eventTarget = e.target;
+    if (!this.multiple) {
+      this.activeItem = eventTarget;
+      this.closeNonActive();
+    }
+  }
+  closeNonActive() {
+    this.items.forEach(item => {
+      if (!item.isEqualNode(this.activeItem)) {
+        item.close();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ptc-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-accordion.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If multiple `<ptc-accordion-item>`s can open at the same time"
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "opened",
+      "method": "openHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}