@ptcwebops/ptcw-design 0.5.4 → 0.5.6

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

@@ -1,99 +1,99 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcSpacer {
-  constructor() {
-    /**
-     * Breakpoint
-     */
-    this.breakpoint = '';
-    /**
-     * Spacing Size
-     */
-    this.size = 'medium';
-    /**
-     * Direction
-     */
-    this.direction = 'vertical';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-    };
-  }
-  static get is() { return "ptc-spacer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-spacer.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-spacer.css"]
-  }; }
-  static get properties() { return {
-    "breakpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small'",
-        "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Breakpoint"
-      },
-      "attribute": "breakpoint",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Spacing Size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'vertical' | 'horizontal'",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Direction"
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "'vertical'"
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcSpacer {
+  constructor() {
+    /**
+     * Breakpoint
+     */
+    this.breakpoint = '';
+    /**
+     * Spacing Size
+     */
+    this.size = 'medium';
+    /**
+     * Direction
+     */
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+    };
+  }
+  static get is() { return "ptc-spacer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-spacer.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-spacer.css"]
+  }; }
+  static get properties() { return {
+    "breakpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small'",
+        "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Breakpoint"
+      },
+      "attribute": "breakpoint",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Spacing Size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'vertical' | 'horizontal'",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Direction"
+      },
+      "attribute": "direction",
+      "reflect": false,
+      "defaultValue": "'vertical'"
+    }
+  }; }
+}

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

@@ -1,89 +1,89 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcSpan {
-  constructor() {
-    /**
-     * Span Style
-     */
-    this.spanStyle = 'tag-style';
-    /**
-     * Display
-     */
-    this.display = 'inline';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      this.styles && h("style", null, this.styles),
-      h("span", { part: "part-ptc-span" },
-        h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.display]: true,
-    };
-  }
-  static get is() { return "ptc-span"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-span.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-span.css"]
-  }; }
-  static get properties() { return {
-    "spanStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style'",
-        "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"tag-style\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Span Style"
-      },
-      "attribute": "span-style",
-      "reflect": false,
-      "defaultValue": "'tag-style'"
-    },
-    "display": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'block' | 'inline-block' | 'inline'",
-        "resolved": "\"block\" | \"inline\" | \"inline-block\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display"
-      },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "'inline'"
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Injected Styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcSpan {
+  constructor() {
+    /**
+     * Span Style
+     */
+    this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
+    this.display = 'inline';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      this.styles && h("style", null, this.styles),
+      h("span", { part: "part-ptc-span" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.display]: true,
+    };
+  }
+  static get is() { return "ptc-span"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-span.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-span.css"]
+  }; }
+  static get properties() { return {
+    "spanStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style'",
+        "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"tag-style\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Span Style"
+      },
+      "attribute": "span-style",
+      "reflect": false,
+      "defaultValue": "'tag-style'"
+    },
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'block' | 'inline-block' | 'inline'",
+        "resolved": "\"block\" | \"inline\" | \"inline-block\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'inline'"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js

@@ -1,71 +1,71 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-import closeSvg from '../../media/svg-imgs/close.svg';
-import arrowSvgLeft from '../../media/svg-imgs/slider-arrow-left.svg';
-import arrowSvgRight from '../../media/svg-imgs/slider-arrow-right.svg';
-import backarrow from '../../media/svg-imgs/Back-arrow.svg';
-export class PtcSvgBtn {
-  constructor() {
-    /**
-     * Display
-     */
-    this.display = 'block';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null,
-      !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null,
-      !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null,
-      !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
-  }
-  getCssClassMap() {
-    return {
-      [this.display]: true
-    };
-  }
-  static get is() { return "ptc-svg-btn"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-svg-btn.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-svg-btn.css"]
-  }; }
-  static get properties() { return {
-    "svgName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Options: \"close\", \"slider-left\", \"slider-right\", \"back-arrow\""
-      },
-      "attribute": "svg-name",
-      "reflect": false
-    },
-    "display": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'block' | 'inline' | 'inline-block' | 'flex'",
-        "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display"
-      },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "'block'"
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+import closeSvg from '../../media/svg-imgs/close.svg';
+import arrowSvgLeft from '../../media/svg-imgs/slider-arrow-left.svg';
+import arrowSvgRight from '../../media/svg-imgs/slider-arrow-right.svg';
+import backarrow from '../../media/svg-imgs/Back-arrow.svg';
+export class PtcSvgBtn {
+  constructor() {
+    /**
+     * Display
+     */
+    this.display = 'block';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null,
+      !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null,
+      !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null,
+      !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
+  }
+  static get is() { return "ptc-svg-btn"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-svg-btn.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-svg-btn.css"]
+  }; }
+  static get properties() { return {
+    "svgName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Options: \"close\", \"slider-left\", \"slider-right\", \"back-arrow\""
+      },
+      "attribute": "svg-name",
+      "reflect": false
+    },
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'block' | 'inline' | 'inline-block' | 'flex'",
+        "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'block'"
+    }
+  }; }
+}

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

@@ -0,0 +1,36 @@
+ptc-tab-list {
+  display: block;
+  position: relative;
+}
+
+.tabs-header-container {
+  overflow: hidden;
+  width: 100%;
+  border-bottom: 2px solid #E4E7E9;
+}
+
+.tabs-header {
+  display: flex;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  transition: opacity ease-out 250ms;
+  opacity: 0;
+  width: 95%;
+}
+.tabs-header.active {
+  opacity: 1;
+}
+
+.tabs-content {
+  padding: 20px;
+}
+
+.ellipsis-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: none;
+}
+.ellipsis-btn.active {
+  display: block;
+}