@ptcwebops/ptcw-design 0.6.5 → 0.6.6

package/dist/esm/ptc-collapse-list.entry.js

@@ -1,198 +1,198 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-a91c2367.js';
-import { M as MapDOM, g as generateUUID } from './utils-4b79ffaf.js';
+import { M as MapDOM, g as generateUUID } from './utils-334d53bc.js';
 
 const ptcCollapseListCss = ":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{color:var(--color-gray-02);opacity:1}input[type=text]::-moz-placeholder{color:var(--color-gray-02);opacity:1}input[type=text]:-ms-input-placeholder{color:var(--color-gray-02)}input[type=text]::-ms-input-placeholder{color:var(--color-gray-02)}input[type=text] *::placeholder{color:var(--color-gray-02)}";
 
-class CollapseListItem {
-}
-let PtcCollapseList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.itemSelected = createEvent(this, "itemSelected", 7);
-    this.itemExpanded = createEvent(this, "itemExpanded", 7);
-    this.ready = createEvent(this, "ready", 7);
-    this.updated = createEvent(this, "updated", 7);
-  }
-  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))));
-  }
-  get el() { return getElement(this); }
-};
+class CollapseListItem {
+}
+let PtcCollapseList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.itemExpanded = createEvent(this, "itemExpanded", 7);
+    this.ready = createEvent(this, "ready", 7);
+    this.updated = createEvent(this, "updated", 7);
+  }
+  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))));
+  }
+  get el() { return getElement(this); }
+};
 PtcCollapseList.style = ptcCollapseListCss;
 
 export { PtcCollapseList as ptc_collapse_list };

package/dist/esm/ptc-date.entry.js

@@ -2,54 +2,54 @@ import { r as registerInstance, h, H as Host } from './index-a91c2367.js';
 
 const ptcDateCss = ":host{display:block}:host(.small) span{font-size:var(--ptc-font-size-xx-small)}:host(.medium) span{font-size:var(--ptc-font-size-x-small)}:host(.primary-grey){color:var(--color-primary-gray-new)}:host(.white) span{color:var(--color-white)}:host(.date-m-top){margin-top:var(--ptc-element-spacing-01)}";
 
-let PtcDate = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Year
-     */
-    this.year = 1900;
-    /**
-     * Month
-     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
-     */
-    this.month = 0;
-    /**
-     * Day
-     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
-     */
-    this.day = 1;
-    /**
-     * Country
-     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
-     */
-    this.country = 'en-US';
-    /**
-     * Date Font Size
-     */
-    this.dataSize = 'small';
-  }
-  render() {
-    // const newDate = new Date(this.year, this.month, this.day);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
-  }
-  getCssClassMap() {
-    return {
-      [this.dateColor]: !!this.dateColor ? true : false,
-      [this.dataSize]: !!this.dataSize ? true : false,
-    };
-  }
-  getDate() {
-    if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '/'));
-      return newDate;
-    }
-    else {
-      return new Date(this.year, this.month - 1, this.day);
-    }
-  }
-};
+let PtcDate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Year
+     */
+    this.year = 1900;
+    /**
+     * Month
+     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
+     */
+    this.month = 0;
+    /**
+     * Day
+     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+     */
+    this.day = 1;
+    /**
+     * Country
+     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+     */
+    this.country = 'en-US';
+    /**
+     * Date Font Size
+     */
+    this.dataSize = 'small';
+  }
+  render() {
+    // const newDate = new Date(this.year, this.month, this.day);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+  }
+  getCssClassMap() {
+    return {
+      [this.dateColor]: !!this.dateColor ? true : false,
+      [this.dataSize]: !!this.dataSize ? true : false,
+    };
+  }
+  getDate() {
+    if (this.dateString) {
+      let newDate = new Date(this.dateString.replace(/-/g, '/'));
+      return newDate;
+    }
+    else {
+      return new Date(this.year, this.month - 1, this.day);
+    }
+  }
+};
 PtcDate.style = ptcDateCss;
 
 export { PtcDate as ptc_date };

package/dist/esm/ptc-dynamic-card.entry.js

@@ -2,46 +2,46 @@ import { r as registerInstance, h, H as Host } from './index-a91c2367.js';
 
 const ptcDynamicCardCss = ":host{display:block}:host(.sequential) .card-wrapper{position:relative}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block;border-top:5px solid var(--color-green-05);width:350px}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;justify-content:center;align-items:center;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06)}@media only screen and (min-width: 1440px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-dt-closed{width:135px;height:424px}:host(.sequential) .card-dt-closed ptc-card-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-03);padding-right:var(--ptc-element-spacing-03)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{display:flex;width:45vw;height:480px}";
 
-let PtcDynamicCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Dynamic Card Type */
-    this.cardType = 'sequential';
-    /** Card Title */
-    this.cardTitle = 'Card Title Goes Here';
-    /** Card Status */
-    this.cardStatus = 'desktop-closed';
-  }
-  handleClick() {
-    if (this.cardStatus === 'desktop-closed') {
-      this.cardStatus = 'desktop-expanded';
-    }
-    else if (this.cardStatus === 'desktop-expanded') {
-      this.cardStatus = 'desktop-closed';
-    }
-    else {
-      console.log('mobile state!');
-    }
-  }
-  handleResize() {
-    //console.log('window width:', window.innerWidth);
-    if (window.innerWidth < 1200) {
-      this.cardStatus = 'mobile';
-    }
-    else {
-      this.cardStatus = 'desktop-closed';
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (h("div", { class: "card card-mobile" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (h("div", null, h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, h("ptc-overlay", { "filter-color": "black-3" })), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))))) : (h("div", null, h("div", { class: "card card-dt-open" }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" })))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-};
+let PtcDynamicCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Dynamic Card Type */
+    this.cardType = 'sequential';
+    /** Card Title */
+    this.cardTitle = 'Card Title Goes Here';
+    /** Card Status */
+    this.cardStatus = 'desktop-closed';
+  }
+  handleClick() {
+    if (this.cardStatus === 'desktop-closed') {
+      this.cardStatus = 'desktop-expanded';
+    }
+    else if (this.cardStatus === 'desktop-expanded') {
+      this.cardStatus = 'desktop-closed';
+    }
+    else {
+      console.log('mobile state!');
+    }
+  }
+  handleResize() {
+    //console.log('window width:', window.innerWidth);
+    if (window.innerWidth < 1200) {
+      this.cardStatus = 'mobile';
+    }
+    else {
+      this.cardStatus = 'desktop-closed';
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (h("div", { class: "card card-mobile" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (h("div", null, h("div", { class: "card card-dt-closed" }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, h("ptc-overlay", { "filter-color": "black-3" })), h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))))) : (h("div", null, h("div", { class: "card card-dt-open" }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" })))))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+};
 PtcDynamicCard.style = ptcDynamicCardCss;
 
 export { PtcDynamicCard as ptc_dynamic_card };