@ptcwebops/ptcw-design 0.6.0 → 0.6.2

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

@@ -224,9 +224,24 @@
   text-decoration: none;
 }
 :host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
-  height: var(--ptc-layout-spacing-05);
+  height: 96px;
   opacity: 1;
 }
+@media only screen and (min-width: 768px) {
+  :host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
+    height: var(--ptc-layout-spacing-05);
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
+    height: var(--ptc-layout-spacing-06);
+  }
+}
+@media only screen and (min-width: 1440px) {
+  :host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]) {
+    height: var(--ptc-layout-spacing-05);
+  }
+}
 :host(.hightlight-card) .card-media {
   width: 100%;
   height: auto;
@@ -261,8 +276,62 @@
   transition-delay: var(--ptc-delay-5);
 }
 
-:host(.listing-card) .card-border {
+:host(.horizontal-card) {
+  margin-bottom: var(--ptc-layout-spacing-02);
+}
+:host(.horizontal-card) .card-layout {
+  position: relative;
+}
+@media only screen and (min-width: 768px) {
+  :host(.horizontal-card) .card-layout {
+    display: grid;
+    grid-template-columns: 42% 58%;
+    direction: ltr;
+    grid-auto-rows: 1fr;
+  }
+}
+:host(.horizontal-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+  transition: var(--ptc-transition-slow) linear;
+}
+:host(.horizontal-card) .link-wrapper:hover {
+  box-shadow: var(--ptc-shadow-large);
+  transition: var(--ptc-transition-slow) linear;
+  background-color: var(--color-white);
+}
+:host(.horizontal-card) .link-wrapper:hover h3 {
+  border-color: var(--color-green-06);
+  transition: var(--ptc-transition-slow) linear;
+}
+:host(.horizontal-card) .card-media {
+  display: flex;
+  align-self: center;
+}
+:host(.horizontal-card) .card-body {
+  padding: var(--ptc-element-spacing-05) var(--ptc-element-spacing-04);
+}
+@media only screen and (min-width: 768px) {
+  :host(.horizontal-card) .card-body {
+    padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-07);
+  }
+}
+:host(.horizontal-card) .card-body h3 {
+  margin-top: 0;
+  font-size: var(--ptc-font-size-x-small);
+  color: var(--color-gray-10);
+  border-bottom: 1px solid transparent;
+  padding-bottom: var(--ptc-element-spacing-01);
+  margin-bottom: var(--ptc-element-spacing-02);
+  transition: var(--ptc-transition-slow) linear;
+}
+:host(.horizontal-card) ::slotted([slot=slot-image]) {
+  box-shadow: var(--ptc-shadow-medium);
   width: 100%;
+}
+
+:host(.listing-card) .card-border {
+  width: 320px;
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
@@ -304,14 +373,17 @@
 }
 :host(.listing-card) .card-media {
   width: 100%;
-  height: 224.5px;
+  height: 200px;
   transform: scale(1);
   transform-origin: center bottom;
   transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
   transition-delay: var(--ptc-delay-medium);
 }
+:host(.listing-card) .card-media .smart-img {
+  height: 200px;
+}
 :host(.listing-card) .card-body {
-  padding: 24px 20px;
+  padding: 20px 38px 20px 20px;
 }
 :host(.listing-card) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
@@ -330,9 +402,75 @@
 :host(.listing-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: var(--ptc-font-weight-regular);
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 19px;
+  color: var(--color-gray-11);
+  margin-bottom: 39px;
+}
+
+:host(.listing-card-horizontal) .card-border {
+  width: 890px;
+  overflow: hidden;
+  background: var(--color-white);
+  box-shadow: var(--ptc-shadow-small);
+  border-radius: 3px;
+  height: 224px;
+}
+:host(.listing-card-horizontal) .card-border:hover {
+  background: var(--color-gray-02);
+  box-shadow: var(--ptc-shadow-large);
+}
+:host(.listing-card-horizontal) .card-layout {
+  display: flex;
+  flex-direction: row;
+  width: 890px;
+  height: 224px;
+}
+:host(.listing-card-horizontal) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.listing-card-horizontal) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.listing-card-horizontal) .card-media {
+  width: 385px;
+  height: 224px;
+  transform: scale(1);
+  transform-origin: center bottom;
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  transition-delay: var(--ptc-delay-medium);
+}
+:host(.listing-card-horizontal) .card-media .smart-img {
+  height: 224px;
+  width: 385px;
+}
+:host(.listing-card-horizontal) .card-body {
+  padding: 20px 38px 20px 20px;
+  width: 505px;
+}
+:host(.listing-card-horizontal) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
-  line-height: var(--ptc-line-height-dense);
+}
+:host(.listing-card-horizontal) .card-body h3 {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-loose);
+  line-height: 21px;
+  color: var(--color-gray-11);
+  margin-bottom: 12px;
+  margin-top: 0rem;
+}
+:host(.listing-card-horizontal) ::slotted([slot=slot-description]) {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 19px;
   color: var(--color-gray-11);
   margin-bottom: 39px;
 }

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

@@ -45,7 +45,7 @@ export class PtcCard {
           this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null,
           !!this.ribbonText && this.cardType == 'listing-card' ? h("div", { class: "ribbon-text" }, `${this.ribbonText}`) : null,
           h("div", { class: "card-body", part: "body-wrapper" },
-            !!this.cardDate && this.cardType == 'listing-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{font-weight: 400;font-size: 16px;line-height: 19px;color: #282F35;margin-bottom:24px;display:inline-block;}" }) : null,
+            !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{font-weight: 400;font-size: 16px;line-height: 19px;color: #282F35;margin-bottom:24px;display:inline-block;}" }) : null,
             h("slot", { name: "slot-before-heading" }),
             !!this.heading
               ? [
@@ -54,7 +54,7 @@ export class PtcCard {
               ]
               : null,
             h("slot", { name: "slot-description" }),
-            !!this.cardDate && this.cardType != 'listing-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
+            !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
   }
   getCssClassMap() {
     return {
@@ -89,8 +89,8 @@ export class PtcCard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card'",
-        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"listing-card\" | \"lottie-card\" | \"simple-card\"",
+        "original": "'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card' | 'horizontal-card' | 'listing-card-horizontal'",
+        "resolved": "\"clip-edge-card\" | \"custom-card\" | \"hightlight-card\" | \"horizontal-card\" | \"listing-card\" | \"listing-card-horizontal\" | \"lottie-card\" | \"simple-card\"",
         "references": {}
       },
       "required": false,

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

@@ -30,7 +30,7 @@ export class PtcCheckbox {
         h("input", { type: "checkbox", checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleClick(e) }),
         h("span", { class: "check" },
           h("span", { class: "mark" },
-            h("icon-asset", { type: "ptc", size: "xx-small", name: "check-mark" }))))));
+            h("icon-asset", { type: "ptc", size: "xx-small", name: "checkmark" }))))));
   }
   static get is() { return "ptc-checkbox"; }
   static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,121 @@
+:host {
+  display: block;
+}
+
+.container {
+  border-right: 1px solid rgba(112, 112, 112, 0.25);
+  position: relative;
+}
+
+a {
+  transition: color ease-out 250ms;
+}
+
+ul {
+  transition: max-height ease-out 250ms, padding ease-out 250ms;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.level-1 > ul, .level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
+  max-height: 0;
+}
+
+.level-1 {
+  position: relative;
+  padding: 17px 20px 17px 0;
+  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
+}
+.level-1 > a {
+  font-size: 18px;
+  letter-spacing: 0.45px;
+  font-weight: 800;
+  color: #40434a;
+  text-decoration: none;
+}
+.level-1 > a:hover, .level-1 > a:active, .level-1 > a:focus {
+  text-decoration: none;
+}
+.level-1 > icon-asset {
+  transition: transform ease-out 250ms;
+  position: absolute;
+  right: 32px;
+}
+.level-1 > ul {
+  padding-top: 0;
+}
+.level-1.expanded > icon-asset {
+  transform: rotate(-180deg);
+}
+.level-1.expanded > ul {
+  padding-top: 14px;
+}
+.level-1:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  height: 3px;
+  width: 40px;
+  background-color: #74c34d;
+}
+
+.level-2 {
+  margin: 8px 0;
+}
+.level-2 > a {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  color: #3b4550;
+  text-decoration: none;
+}
+.level-2 > a:hover, .level-2 > a:active, .level-2 > a:focus {
+  font-weight: 800;
+  color: #74c34d;
+  text-decoration: none;
+}
+
+input[type=text] {
+  padding: 9px 45px 9px 18px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--color-gray-07);
+  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.16);
+  border: solid 1px var(--color-gray-07);
+  background-color: #ffffff;
+}
+input[type=text]::-ms-clear {
+  display: none;
+}
+input[type=text]:focus {
+  outline: none;
+}
+input[type=text]::-webkit-input-placeholder {
+  color: var(--color-gray-02);
+}
+input[type=text]:-moz-placeholder {
+  /* FF 4-18 */
+  color: var(--color-gray-02);
+  opacity: 1;
+}
+input[type=text]::-moz-placeholder {
+  /* FF 19+ */
+  color: var(--color-gray-02);
+  opacity: 1;
+}
+input[type=text]:-ms-input-placeholder {
+  /* IE 10+ */
+  color: var(--color-gray-02);
+}
+input[type=text]::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--color-gray-02);
+}
+input[type=text] *::placeholder {
+  /* modern browser */
+  color: var(--color-gray-02);
+}

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js

@@ -0,0 +1,288 @@
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
+import { generateUUID, MapDOM } from '../../utils/utils';
+import { Event } from '@stencil/core';
+class CollapseListItem {
+}
+export class PtcCollapseList {
+  componentWillLoad() {
+    this.loadListItems();
+  }
+  componentDidLoad() {
+    this.ready.emit({
+      sender: this.el,
+      tree: this.data
+    });
+  }
+  componentDidUpdate() {
+    this.updated.emit({
+      sender: this.el,
+      tree: this.data
+    });
+  }
+  onItemSelectedHandler(event) {
+    this.itemSelected.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+  }
+  onItemExpandeddHandler(event) {
+    this.itemExpanded.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+  }
+  loadListItems() {
+    this.hashMap = {};
+    if (!this.data) {
+      let dom = MapDOM(this.el);
+      if (dom.collapseListItem) {
+        this.data = new Array();
+        let buildChildren = (arr, outArr) => {
+          arr.map((z) => {
+            var newItem = new CollapseListItem();
+            newItem.isExternalLink = z.linkHref ? true : false;
+            if (z.linkHref) {
+              newItem.href = z.linkHref;
+              newItem.target = z.linkTarget;
+              newItem.title = z.linkTitle;
+            }
+            else {
+              newItem.id = generateUUID();
+              newItem.text = z.facetDisplay;
+              newItem.name = z.facetName;
+              newItem.value = z.facetValue;
+              newItem.category = z.category;
+              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
+              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
+            }
+            if (z.collapseListItem) {
+              newItem.children = new Array();
+              buildChildren(z.collapseListItem, newItem.children);
+            }
+            this.hashMap[newItem.id] = newItem;
+            outArr.push(newItem);
+          });
+        };
+        this.setUpCategory('default', true);
+        buildChildren(dom.collapseListItem, this.data);
+      }
+    }
+  }
+  setUpCategory(name, allowMultiSelect) {
+    if (!this.selectedItems) {
+      this.selectedItems = {};
+    }
+    if (name && !this.selectedItems[name]) {
+      this.selectedItems[name] = {
+        name: name,
+        items: new Array(),
+        allowMultiSelect: allowMultiSelect
+      };
+    }
+  }
+  collapseAllFirstLevelItems(exclude) {
+    let items = this.el.shadowRoot.querySelectorAll('.level-1');
+    items.forEach((z) => {
+      if (z.classList.contains('expanded') && z != exclude) {
+        z.classList.remove('expanded');
+      }
+    });
+  }
+  updateExpandedItems() {
+    let items = this.el.shadowRoot.querySelectorAll('li');
+    items.forEach((z) => {
+      let ul = z.querySelector(':scope > ul');
+      if (ul) {
+        if (!z.classList.contains('expanded')) {
+          ul.style.removeProperty('max-height');
+        }
+        else {
+          ul.style.maxHeight = ul.scrollHeight + "px";
+        }
+      }
+    });
+  }
+  updateSelectedItemStatus(uuid) {
+    var _a;
+    let selectedItem = this.hashMap[uuid];
+    if (selectedItem && selectedItem.value) {
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      if (!this.selectedItems[categoryName]) {
+        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
+      }
+      let items = this.selectedItems[categoryName].items;
+      if (items.indexOf(selectedItem.value) < 0) {
+        if (this.selectedItems[categoryName].allowMultiSelect) {
+          items.push(selectedItem.value);
+        }
+        else {
+          items = [selectedItem.value];
+        }
+      }
+      else {
+        items = items.filter((z) => { return z != selectedItem.value; });
+      }
+      this.selectedItems[categoryName].items = items;
+    }
+  }
+  onItemLinkClick(event, uuid) {
+    if (event) {
+      event.preventDefault();
+    }
+    this.updateSelectedItemStatus(uuid);
+    this.onItemSelectedHandler(event);
+  }
+  onExpandClick(event, collapseParents) {
+    if (event) {
+      event.preventDefault();
+      let sender = event.target;
+      if (collapseParents) {
+        this.collapseAllFirstLevelItems(sender.parentNode);
+      }
+      if (sender && sender.parentNode) {
+        let parent = sender.parentNode;
+        parent.classList.toggle("expanded");
+      }
+      this.updateExpandedItems();
+    }
+    this.onItemExpandeddHandler(event);
+  }
+  render() {
+    let renderLevel = (arr, index) => {
+      let levelClass = `level-${index}`;
+      return (h("ul", null, arr.map((z) => {
+        let expandable = false;
+        let icon = '';
+        if (index == 1 && z.children) {
+          expandable = true;
+          icon = (h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
+        }
+        return (h("li", { class: levelClass },
+          icon,
+          getLink(z, expandable),
+          z.children ? renderLevel(z.children, index + 1) : ''));
+      })));
+    };
+    let getLink = (item, expandable) => {
+      let clickEvent = (e) => {
+        if (expandable) {
+          this.onExpandClick(e, true);
+        }
+        else {
+          this.onItemLinkClick(e, item.id);
+        }
+      };
+      if (item.isExternalLink) {
+        return (h("a", { href: item.href, target: item.target, title: item.title }, item.text));
+      }
+      else {
+        return (h("a", { href: "#", title: item.text, onClick: clickEvent }, item.text));
+      }
+    };
+    return (h(Host, null,
+      h("div", { class: "container" },
+        h("ptc-title", { type: 'h4', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, "Filter Results :"),
+        h("input", { type: "text", placeholder: 'Search' }),
+        renderLevel(this.data, 1))));
+  }
+  static get is() { return "ptc-collapse-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-collapse-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-collapse-list.css"]
+  }; }
+  static get properties() { return {
+    "listItems": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "data": {},
+    "selectedItems": {},
+    "hashMap": {}
+  }; }
+  static get events() { return [{
+      "method": "itemSelected",
+      "name": "itemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "itemExpanded",
+      "name": "itemExpanded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "ready",
+      "name": "ready",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "updated",
+      "name": "updated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -1,4 +1,6 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Host, h, Prop, Element } from '@stencil/core';
+class ListItem {
+}
 export class PtcList {
   constructor() {
     this.listType = 'list-primary';
@@ -6,16 +8,40 @@ export class PtcList {
   }
   render() {
     const classMap = this.getCssClassMap();
-    const listItems = this.listItems;
-    //console.log(this.listItems.length);
+    const listItems = this.getListItems();
     if (!listItems || listItems.length === 0) {
       return null;
     }
     return (h(Host, { class: classMap },
       h("ul", null, listItems.map(listItem => {
-        h("li", null, listItem);
+        return (h("list-item", { "link-type": listItem.type, "link-href": listItem.href, "link-target": listItem.target, "flush-before": listItem.flushBefore }, listItem.value));
       }))));
   }
+  getListItems() {
+    let result = new Array();
+    if (this.listItems && this.listItems.length > 0) {
+      this.listItems.map(listItem => {
+        let i = new ListItem();
+        i.value = listItem;
+        result.push(i);
+      });
+    }
+    else {
+      let items = Array.from(this.el.querySelectorAll('list-item'));
+      items.map(el => {
+        let i = new ListItem();
+        let item = el;
+        i.value = item.innerText;
+        i.href = item.getAttribute('link-href');
+        i.target = item.getAttribute('link-target');
+        i.flushBefore = item.getAttribute('flush-before') == 'true';
+        i.type = item.getAttribute('link-type');
+        result.push(i);
+      });
+      console.log();
+    }
+    return result;
+  }
   getCssClassMap() {
     return {
       [this.listType]: this.listItems ? true : false,
@@ -65,4 +91,5 @@ export class PtcList {
       "defaultValue": "[]"
     }
   }; }
+  static get elementRef() { return "el"; }
 }

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

@@ -2,6 +2,9 @@
   display: block;
   overflow: hidden;
 }
+:host img {
+  display: block;
+}
 
 :host(.relative) {
   position: relative;