@ptcwebops/ptcw-design 1.0.9 → 1.1.1

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -5,7 +5,6 @@
   position: relative;
 }
 :host .nav-card-wrap {
-  padding: 1rem;
   display: flex;
   align-items: center;
   width: 100%;
@@ -28,7 +27,9 @@
   text-decoration: none;
 }
 :host .nav-card-wrap .media-card-wrap {
+  padding: 1rem;
   width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
 }
@@ -38,6 +39,7 @@
   display: flex;
   align-items: center;
   font-size: var(--ptc-font-size-medium);
+  word-break: break-word;
 }
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap .media-card-wrap h4 {
@@ -94,7 +96,7 @@
   border-radius: 0;
   align-items: flex-start;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 768px) {
   :host(.links-card) .nav-card-wrap {
     padding: 1.5rem;
     border: 1px solid var(--color-gray-07);

package/dist/collection/components/ptc-nav-card/ptc-nav-card.js

@@ -1,227 +1,227 @@
-import { Host, h } from '@stencil/core';
-export class PtcNavCard {
-  constructor() {
-    this.cardType = undefined;
-    this.cardHref = undefined;
-    this.logoAlt = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.linkTitle = undefined;
-    this.cardLogo = undefined;
-    this.heading = undefined;
-    this.description = undefined;
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
-      :
-        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
-          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
-          ? this.heading
-          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
-          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
-          h("p", null, this.windowSize === 'mobile'
-            ? this.description
-            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
-  }
-  static get is() { return "ptc-nav-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'media-card' | 'links-card' | 'cta-card'",
-          "resolved": "\"cta-card\" | \"links-card\" | \"media-card\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card Type\nSpecify Card Type"
-        },
-        "attribute": "card-type",
-        "reflect": false
-      },
-      "cardHref": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Link URL (Optional)"
-        },
-        "attribute": "card-href",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "logoAlt": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Link URL Alt text(Optional)"
-        },
-        "attribute": "logo-alt",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "target": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Link card target"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
-      "rel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Link card rel"
-        },
-        "attribute": "rel",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "linkTitle": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) title"
-        },
-        "attribute": "link-title",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "cardLogo": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If this card has Image"
-        },
-        "attribute": "card-logo",
-        "reflect": false
-      },
-      "heading": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card heading"
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "description": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card description"
-        },
-        "attribute": "description",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "windowSize": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcNavCard {
+  constructor() {
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.logoAlt = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.linkTitle = undefined;
+    this.cardLogo = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
+      :
+        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
+          ? this.heading
+          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
+          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          h("p", null, this.windowSize === 'mobile'
+            ? this.description
+            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
+  }
+  static get is() { return "ptc-nav-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'media-card' | 'links-card' | 'cta-card'",
+          "resolved": "\"cta-card\" | \"links-card\" | \"media-card\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card Type\r\nSpecify Card Type"
+        },
+        "attribute": "card-type",
+        "reflect": false
+      },
+      "cardHref": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL (Optional)"
+        },
+        "attribute": "card-href",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "logoAlt": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL Alt text(Optional)"
+        },
+        "attribute": "logo-alt",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "target": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card rel"
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "linkTitle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) title"
+        },
+        "attribute": "link-title",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "cardLogo": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If this card has Image"
+        },
+        "attribute": "card-logo",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card description"
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "windowSize": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}