@ptcwebops/ptcw-design 0.9.0 → 0.9.2

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

@@ -504,6 +504,11 @@
     margin-bottom: 0.5rem;
   }
 }
+@media (min-width: 1200px) and (max-width: 1439) {
+  :host(.listing-card-horizontal) .card-border {
+    margin-left: 16px;
+  }
+}
 :host(.listing-card-horizontal) .card-border:hover {
   background: var(--color-gray-02);
   box-shadow: var(--ptc-shadow-large);
@@ -523,19 +528,19 @@
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-border {
     width: 704px;
-    height: 184px;
+    height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-border {
     width: 688px;
-    height: 166px;
+    height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-border {
     width: 779px;
-    height: 170px;
+    height: 200px;
   }
 }
 :host(.listing-card-horizontal) .card-layout {
@@ -553,19 +558,19 @@
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-layout {
     width: 704px;
-    height: 184px;
+    height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-layout {
     width: 688px;
-    height: 166px;
+    height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-layout {
     width: 779px;
-    height: 170px;
+    height: 200px;
   }
 }
 :host(.listing-card-horizontal) .link-wrapper {
@@ -592,38 +597,38 @@
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
     width: 275px;
-    height: 184px;
+    height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
     width: 224px;
-    height: 166px;
+    height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media .smart-img {
     width: 260px;
-    height: 170px;
+    height: 200px;
   }
 }
 @media (min-width: 768px) {
   :host(.listing-card-horizontal) .card-media {
     display: block;
     width: 275px;
-    height: 184px;
+    height: 210px;
   }
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-media {
     width: 224px;
-    height: 166px;
+    height: 200px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-media {
     width: 260px;
-    height: 170px;
+    height: 200px;
   }
 }
 :host(.listing-card-horizontal) .card-body {
@@ -649,11 +654,6 @@
     width: 505px;
   }
 }
-@media only screen and (min-width: 1440px) {
-  :host(.listing-card-horizontal) .card-body {
-    padding: 24px 38px 0px 31px;
-  }
-}
 :host(.listing-card-horizontal) .card-body .card-date-text {
   display: flex;
   flex-direction: row;
@@ -688,17 +688,17 @@
   font-size: 16px;
   line-height: 19px;
   color: #282F35;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   display: inline-block;
 }
 @media (min-width: 992px) {
   :host(.listing-card-horizontal) .card-body .small {
-    margin-bottom: 4px;
+    margin-bottom: 12px;
   }
 }
 @media (min-width: 1200px) {
   :host(.listing-card-horizontal) .card-body .small {
-    margin-bottom: 8px;
+    margin-bottom: 16px;
   }
 }
 :host(.listing-card-horizontal) .card-body h3 {

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

@@ -31,7 +31,8 @@ export class PtcCardContent {
   async removeInlineHeight() {
     this.el.style.removeProperty('height');
     const image = this.el.querySelector('ptc-picture');
-    image.style.removeProperty('height');
+    if (image)
+      image.style.removeProperty('height');
   }
   render() {
     const classMap = this.getCssClassMap();

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

@@ -51,15 +51,19 @@ export class PtcCardPlm {
     return bottomContent.offsetHeight;
   }
   checkScreenSize() {
-    if (window.innerWidth < 768) {
-      if (this.cardType === 'extra-tall') {
+    if (this.cardType === 'extra-tall') {
+      if (window.innerWidth < 768) {
         const cardContent = this.el.querySelector('ptc-card-content');
-        cardContent.setHeight(this.getBtmContentHeight());
+        if (cardContent) {
+          cardContent.setHeight(this.getBtmContentHeight());
+        }
+      }
+      else {
+        const cardContent = this.el.querySelector('ptc-card-content');
+        if (cardContent) {
+          cardContent.removeInlineHeight();
+        }
       }
-    }
-    else {
-      const cardContent = this.el.querySelector('ptc-card-content');
-      cardContent.removeInlineHeight();
     }
   }
   static get is() { return "ptc-card-wrapper"; }

package/dist/collection/components/ptc-search-field/ptc-search-field.css

@@ -45,4 +45,21 @@
 :host .search-div .search-btn:focus {
   outline: 3px solid var(--color-blue-07);
   outline-offset: 2px;
+}
+
+:host(.dark) {
+  z-index: 999;
+  position: relative;
+  margin-top: 20px;
+}
+:host(.dark) .search-div {
+  height: 43px;
+}
+:host(.dark) .search-div input {
+  background-color: #4E5D66;
+  color: var(--color-white);
+}
+:host(.dark) .search-div .search-btn {
+  height: 43px;
+  width: 43px;
 }

package/dist/collection/components/ptc-search-field/ptc-search-field.js

@@ -1,17 +1,40 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class PtcSearchField {
   constructor() {
     this.textValue = undefined;
     this.placeholderLabel = undefined;
+    this.darkTheme = undefined;
   }
   textChangedHandler(event) {
-    this.valueChanged.emit(event);
+    this.valueChanged.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
   }
   buttonClickHandler(event) {
-    this.clickEvent.emit(event);
+    this.clicked.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
+  }
+  getSearchValue() {
+    let result = '';
+    let input = this.el.shadowRoot.querySelector('input');
+    if (input) {
+      result = input.value;
+    }
+    return result;
   }
   render() {
-    return (h("div", { class: "search-div" }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onChange: (e) => { this.textChangedHandler(e); } }), h("button", { type: "link", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))));
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "search-div" }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onChange: (e) => { this.textChangedHandler(e); } }), h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['dark']: this.darkTheme ? true : false,
+    };
   }
   static get is() { return "ptc-search-field"; }
   static get encapsulation() { return "shadow"; }
@@ -60,6 +83,23 @@ export class PtcSearchField {
         },
         "attribute": "placeholder-label",
         "reflect": false
+      },
+      "darkTheme": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dark-theme",
+        "reflect": false
       }
     };
   }
@@ -75,17 +115,13 @@ export class PtcSearchField {
           "text": ""
         },
         "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }, {
-        "method": "clickEvent",
-        "name": "clickEvent",
+        "method": "clicked",
+        "name": "clicked",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -94,14 +130,11 @@ export class PtcSearchField {
           "text": ""
         },
         "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
-          "references": {
-            "MouseEvent": {
-              "location": "global"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }];
   }
+  static get elementRef() { return "el"; }
 }

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

@@ -0,0 +1,34 @@
+/* :host {
+  display: block;
+} */
+/* :root{
+  --skeleton-text-border-radius: 5px;
+} */
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  /* border-radius: 10px; */
+}
+
+.placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 1em;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.08) 100%);
+  /* background-size: 300%; */
+  background-size: 400% 100%;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.animated .placeholder {
+  animation: loading 2.5s ease-in-out infinite;
+}

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

@@ -0,0 +1,146 @@
+import { h } from '@stencil/core';
+export class PtcSkeleton {
+  constructor() {
+    this.isLoading = true;
+    this.animated = false;
+    this.width = '100%';
+    this.borderRadius = undefined;
+    this.topMargin = "0px";
+    this.btmMargin = "0px";
+  }
+  // @Listen('hover', {capture: true})
+  // handleHover(event: Event){
+  //   const target = event.target as HTMLElement;
+  //   if(target.tagName === "A"){
+  //     event.preventDefault();
+  //   }
+  // }
+  render() {
+    const borderRadiusValue = this.borderRadius || getComputedStyle(document.documentElement).getPropertyValue('--ptc-border-radius-large');
+    return (h("div", { class: `content ${this.animated && this.isLoading ? 'animated' : ''}`, style: { width: this.width, marginTop: this.topMargin, marginBottom: this.btmMargin } }, this.isLoading ? h("div", { class: "placeholder", style: { borderRadius: borderRadiusValue } }) : h("slot", null)));
+  }
+  static get is() { return "ptc-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-skeleton.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-skeleton.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-loading",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "animated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animated",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border-radius",
+        "reflect": false
+      },
+      "topMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-margin",
+        "reflect": false,
+        "defaultValue": "\"0px\""
+      },
+      "btmMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "btm-margin",
+        "reflect": false,
+        "defaultValue": "\"0px\""
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -164,8 +164,8 @@ export class PtcTooltip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'right' | 'bottom' | 'top'",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "original": "'left' | 'right' | 'bottom' | 'bottom-right' | 'top'",
+          "resolved": "\"bottom\" | \"bottom-right\" | \"left\" | \"right\" | \"top\"",
           "references": {}
         },
         "required": false,

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/global";
 
+interface BundleExample extends Components.BundleExample, HTMLElement {}
+export const BundleExample: {
+  prototype: BundleExample;
+  new (): BundleExample;
+};
+
 interface DropdownItem extends Components.DropdownItem, HTMLElement {}
 export const DropdownItem: {
   prototype: DropdownItem;
@@ -290,6 +296,12 @@ export const PtcShoppingCart: {
   new (): PtcShoppingCart;
 };
 
+interface PtcSkeleton extends Components.PtcSkeleton, HTMLElement {}
+export const PtcSkeleton: {
+  prototype: PtcSkeleton;
+  new (): PtcSkeleton;
+};
+
 interface PtcSocialShare extends Components.PtcSocialShare, HTMLElement {}
 export const PtcSocialShare: {
   prototype: PtcSocialShare;