@ptcwebops/ptcw-design 1.8.2 → 1.8.4

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

@@ -1,78 +1,78 @@
-import { Host, h } from '@stencil/core';
-export class PtcAccordion {
-  constructor() {
-    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
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcAccordion {
+  constructor() {
+    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
+      }];
+  }
+}

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

@@ -1,237 +1,256 @@
-import { Host, h } from '@stencil/core';
-export class PtcAnnouncement {
-  constructor() {
-    this.closeClick = () => {
-      this.visible = false;
-      this.close.emit();
-    };
-    this.getIconSize = () => {
-      return this.windowSize === 'mobile' ? 'xxx-large' : 'small';
-    };
-    this.isMaxWidthTitle = () => {
-      return !!this.description ? '' : ' max-title';
-    };
-    this.barTitle = '';
-    this.description = '';
-    this.linkText = undefined;
-    this.linkTitle = undefined;
-    this.visible = undefined;
-    this.linkUrl = '#';
-    this.insideContainer = undefined;
-    this.target = '_self';
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    var _a, _b;
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.insideContainer ? 'content-wrapper ptc-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? (h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (h("ptc-tooltip", { "text-display": "inline", "max-length": "60", "z-index": "z-2", description: this.barTitle, position: "bottom" })))) : null, this.windowSize === 'mobile' ? ( //mobile view
-    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines": "line4", "z-index": "z-3" }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)) : null))) : (
-    //desktop view
-    h("div", { class: "description" }, !!this.description ? h("ptc-tooltip", { "text-display": "inline", "max-length": "165", "z-index": "z-2", description: this.description + " ", position: "bottom" }) : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target }, h("ptc-tooltip", { "text-display": "inline", "max-length": "25", "z-index": "z-2", description: this.linkText, position: "bottom" }))) : null))), h("icon-asset", { color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['announcement']: true,
-      [this.visible ? 'visible' : '']: true,
-    };
-  }
-  static get is() { return "ptc-announcement"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-announcement.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-announcement.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "barTitle": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "bar title"
-        },
-        "attribute": "bar-title",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "description": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "bar description"
-        },
-        "attribute": "description",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "linkText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "link Text"
-        },
-        "attribute": "link-text",
-        "reflect": true
-      },
-      "linkTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "link Title, will use Text if blank"
-        },
-        "attribute": "link-title",
-        "reflect": true
-      },
-      "visible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Mutable Visibility"
-        },
-        "attribute": "visible",
-        "reflect": true
-      },
-      "linkUrl": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Link Url"
-        },
-        "attribute": "link-url",
-        "reflect": true,
-        "defaultValue": "'#'"
-      },
-      "insideContainer": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Temp Container\nWe plan to remove container in the future"
-        },
-        "attribute": "inside-container",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Target"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "windowSize": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "close",
-        "name": "close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Close Event"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcAnnouncement {
+  constructor() {
+    this.closeClick = () => {
+      this.visible = false;
+      this.close.emit();
+    };
+    this.getIconSize = () => {
+      return this.windowSize === 'mobile' ? 'xxx-large' : 'small';
+    };
+    this.isMaxWidthTitle = () => {
+      return !!this.description ? '' : ' max-title';
+    };
+    this.barTitle = '';
+    this.description = '';
+    this.linkText = undefined;
+    this.linkTitle = undefined;
+    this.visible = undefined;
+    this.linkUrl = '#';
+    this.insideContainer = undefined;
+    this.target = '_self';
+    this.customMaxLines = 4;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    var _a, _b;
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.insideContainer ? 'content-wrapper ptc-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? (h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (h("ptc-tooltip", { "text-display": "inline", "max-length": "60", "z-index": "z-2", description: this.barTitle, position: "bottom" })))) : null, this.windowSize === 'mobile' ? ( //mobile view
+    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3" }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)) : null))) : (
+    //desktop view
+    h("div", { class: "description" }, !!this.description ? h("ptc-tooltip", { "text-display": "inline", "max-length": "165", "z-index": "z-2", description: this.description + " ", position: "bottom" }) : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target }, h("ptc-tooltip", { "text-display": "inline", "max-length": "25", "z-index": "z-2", description: this.linkText, position: "bottom" }))) : null))), h("icon-asset", { color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['announcement']: true,
+      [this.visible ? 'visible' : '']: true,
+    };
+  }
+  static get is() { return "ptc-announcement"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-announcement.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-announcement.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "barTitle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "bar title"
+        },
+        "attribute": "bar-title",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "description": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "bar description"
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "linkText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "link Text"
+        },
+        "attribute": "link-text",
+        "reflect": true
+      },
+      "linkTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "link Title, will use Text if blank"
+        },
+        "attribute": "link-title",
+        "reflect": true
+      },
+      "visible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mutable Visibility"
+        },
+        "attribute": "visible",
+        "reflect": true
+      },
+      "linkUrl": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link Url"
+        },
+        "attribute": "link-url",
+        "reflect": true,
+        "defaultValue": "'#'"
+      },
+      "insideContainer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Temp Container\r\nWe plan to remove container in the future"
+        },
+        "attribute": "inside-container",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "customMaxLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom max line numbers"
+        },
+        "attribute": "custom-max-lines",
+        "reflect": false,
+        "defaultValue": "4"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "windowSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close Event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}