@ptcwebops/ptcw-design 0.9.2 → 0.9.4

package/dist/cjs/ptc-container.cjs.entry.js

@@ -6,38 +6,38 @@ const index = require('./index-c27e52b2.js');
 
 const ptcContainerCss = ":host{display:block;position:relative}.white{border-radius:4px;background-color:var(--color-white)}.gray{border-radius:4px;background-color:var(--color-white-gray)}.content-wrapper{font-family:Raleway;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left}.content-wrapper.x-small{box-shadow:var(--ptc-shadow-x-small)}.content-wrapper.small{box-shadow:var(--ptc-shadow-small)}.content-wrapper.medium{box-shadow:var(--ptc-shadow-medium)}.content-wrapper.large{box-shadow:var(--ptc-shadow-large)}.content-wrapper.x-large{box-shadow:var(--ptc-shadow-x-large)}.content-wrapper.spacing-xx-small{padding:var(--ptc-element-spacing-01)}.content-wrapper.spacing-x-small{padding:var(--ptc-element-spacing-02)}.content-wrapper.spacing-small{padding:var(--ptc-element-spacing-03)}.content-wrapper.spacing-medium{padding:var(--ptc-element-spacing-04)}.content-wrapper.spacing-large{padding:var(--ptc-element-spacing-05)}.content-wrapper.spacing-x-large{padding:var(--ptc-element-spacing-06)}.content-wrapper.spacing-xx-large{padding:var(--ptc-element-spacing-07)}.content-wrapper.spacing-xxx-large{padding:var(--ptc-element-spacing-08)}";
 
-const PtcContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.backgroundColor = 'white';
-    this.elevation = 'small';
-    this.containerType = 'normal';
-    this.spacing = 'xxx-large';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: this.getContainerClass() }, index.h("div", { class: classMap }, index.h("slot", null))));
-  }
-  getContainerClass() {
-    switch (this.containerType) {
-      case 'large':
-        return 'ptc-container-lg';
-      case 'none':
-        return undefined;
-      default:
-        return 'ptc-container';
-    }
-  }
-  getCssClassMap() {
-    const spacing = `spacing-${this.spacing}`;
-    return {
-      ['content-wrapper']: true,
-      [this.backgroundColor]: true,
-      [this.elevation]: true,
-      [spacing]: true
-    };
-  }
-};
+const PtcContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.backgroundColor = 'white';
+    this.elevation = 'small';
+    this.containerType = 'normal';
+    this.spacing = 'xxx-large';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: this.getContainerClass() }, index.h("div", { class: classMap }, index.h("slot", null))));
+  }
+  getContainerClass() {
+    switch (this.containerType) {
+      case 'large':
+        return 'ptc-container-lg';
+      case 'none':
+        return undefined;
+      default:
+        return 'ptc-container';
+    }
+  }
+  getCssClassMap() {
+    const spacing = `spacing-${this.spacing}`;
+    return {
+      ['content-wrapper']: true,
+      [this.backgroundColor]: true,
+      [this.elevation]: true,
+      [spacing]: true
+    };
+  }
+};
 PtcContainer.style = ptcContainerCss;
 
 exports.ptc_container = PtcContainer;

package/dist/cjs/ptc-dropdown.cjs.entry.js

@@ -6,70 +6,70 @@ const index = require('./index-c27e52b2.js');
 
 const ptcDropdownCss = "@charset \"UTF-8\";:host{display:inline-block;position:relative;color:var(--color-gray-10)}:host label{cursor:pointer}:host .dropdown__header{cursor:pointer;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:var(--color-white);display:flex;align-items:center;align-content:center;border:1px solid var(--color-gray-05);padding:0.25rem 0.75rem 0.25rem 0.75rem;border-radius:4px;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);line-height:var(--ptc-line-height-loose);letter-spacing:0em;text-align:left}:host .dropdown__header b{font-weight:var(--ptc-font-weight-semibold)}:host .dropdown__header icon-asset{width:1rem;height:1rem;margin-left:0.5rem;margin-top:-0.5rem}:host .dropdown__header:hover{background-color:var(--color-gray-02)}:host .dropdown__list{display:table;border:1px solid rgba(0, 0, 0, 0.24);border-radius:var(--ptc-border-radius-large)}:host ul{display:block;top:0.2rem;margin:0;list-style-type:none;padding-inline-start:0;padding:0.25rem 0.25rem;background-color:var(--color-gray-02);cursor:pointer;position:absolute;z-index:500}@media only screen and (min-width: 992px){:host ul{right:0.2rem}}:host ul li{white-space:nowrap;padding:3px 1rem;font-weight:500}:host ul li.selected:before{content:\"✓\";display:block;position:absolute;left:0.4rem}:host ul li:hover{color:#fff;background-color:#699af8;border-radius:var(--ptc-border-radius-standard)}.ptc-dropdown{position:relative}.ptc-dropdown.support ul{margin:2px 4px 0 0}.ptc-dropdown.support .dropdown__header{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:var(--color-white);border:none;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);text-align:left;padding:2px 6px}.ptc-dropdown.support .dropdown__header:hover{background-color:var(--color-gray-02)}.ptc-dropdown.support .dropdown__header icon-asset{width:10px;height:10px;margin-left:0.25rem;margin-top:-0.8rem}.ptc-dropdown.support .dropdown__header icon-asset svg{width:9px;height:9px}";
 
-const PtcDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clickedItem = index.createEvent(this, "clickedItem", 7);
-    this.handleClick = (item) => {
-      this.listItems.forEach((item) => item.selected = undefined);
-      item.selected = true;
-      this.selectedItem = item;
-      this.toggle = !this.toggle;
-      this.clickedItem.emit(item);
-    };
-    this.toggleList = () => {
-      this.toggle = !this.toggle;
-    };
-    this.theme = 'sort';
-    this.label = undefined;
-    this.listItems = undefined;
-    this.toggle = false;
-    this.selectedItem = undefined;
-  }
-  offClick(e) {
-    if (e && !this.host.contains(e.target) && this.toggle) {
-      this.toggle = false;
-    }
-  }
-  componentWillLoad() {
-    let items = this.host.querySelectorAll('item');
-    if (!this.listItems) {
-      this.listItems = [];
-    }
-    items.forEach(item => {
-      if (item && item.getAttribute('label')) {
-        let listItem = {
-          element: item,
-          label: item.getAttribute('label'),
-          value: item.getAttribute('value'),
-          selected: item.hasAttribute('selected')
-        };
-        this.listItems.push(listItem);
-        if (item.hasAttribute('selected')) {
-          this.selectedItem = listItem;
-        }
-      }
-    });
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h("div", { class: classMap }, index.h("header", { class: "dropdown__header", onClick: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
-      index.h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
-        let cssClass = "dropdown__item";
-        if (item.selected) {
-          cssClass += " selected";
-        }
-        return (index.h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
-      }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-dropdown']: true,
-      [this.theme]: true
-    };
-  }
-  get host() { return index.getElement(this); }
-};
+const PtcDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickedItem = index.createEvent(this, "clickedItem", 7);
+    this.handleClick = (item) => {
+      this.listItems.forEach((item) => item.selected = undefined);
+      item.selected = true;
+      this.selectedItem = item;
+      this.toggle = !this.toggle;
+      this.clickedItem.emit(item);
+    };
+    this.toggleList = () => {
+      this.toggle = !this.toggle;
+    };
+    this.theme = 'sort';
+    this.label = undefined;
+    this.listItems = undefined;
+    this.toggle = false;
+    this.selectedItem = undefined;
+  }
+  offClick(e) {
+    if (e && !this.host.contains(e.target) && this.toggle) {
+      this.toggle = false;
+    }
+  }
+  componentWillLoad() {
+    let items = this.host.querySelectorAll('item');
+    if (!this.listItems) {
+      this.listItems = [];
+    }
+    items.forEach(item => {
+      if (item && item.getAttribute('label')) {
+        let listItem = {
+          element: item,
+          label: item.getAttribute('label'),
+          value: item.getAttribute('value'),
+          selected: item.hasAttribute('selected')
+        };
+        this.listItems.push(listItem);
+        if (item.hasAttribute('selected')) {
+          this.selectedItem = listItem;
+        }
+      }
+    });
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h("div", { class: classMap }, index.h("header", { class: "dropdown__header", onClick: this.toggleList }, index.h("label", null, index.h("b", null, this.label), " ", this.selectedItem ? this.selectedItem.label : "Select Option"), index.h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })), this.toggle &&
+      index.h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
+        let cssClass = "dropdown__item";
+        if (item.selected) {
+          cssClass += " selected";
+        }
+        return (index.h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
+      }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-dropdown']: true,
+      [this.theme]: true
+    };
+  }
+  get host() { return index.getElement(this); }
+};
 PtcDropdown.style = ptcDropdownCss;
 
 exports.ptc_dropdown = PtcDropdown;

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

@@ -6,52 +6,52 @@ const index = require('./index-c27e52b2.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;flex-basis:38%;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 ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex-basis:62%}: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}";
 
-const PtcDynamicCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dotSvg = index.getAssetPath('./media/nav-active-dotslick.svg');
-    this.cardType = 'sequential';
-    this.cardTitle = 'Card Title Goes Here';
-    this.cardImgSrc = undefined;
-    this.cardImgAlt = undefined;
-    this.outCardState = undefined;
-    this.cardStatus = 'desktop-closed';
-    this.overlayExists = true;
-  }
-  cardStateChanged(newState) {
-    this.cardStatus = newState;
-  }
-  async changeState(newState) {
-    this.outCardState = newState;
-  }
-  componentDidLoad() {
-    this.handleResize();
-    this.el.addEventListener('mouseenter', () => this.overlayExists = false);
-    this.el.addEventListener('mouseleave', () => this.overlayExists = true);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (index.h("div", { class: "card card-mobile" }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (index.h("div", null, index.h("div", { class: "card card-dt-closed" }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, this.overlayExists ? index.h("ptc-overlay", { "filter-color": "black-3" }) : index.h("ptc-overlay", { "filter-color": "black-2" })), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h2", null, this.cardTitle)))))) : (index.h("div", null, index.h("div", { class: "card card-dt-open" }, index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))), index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" }))))), index.h("div", { hidden: true }, index.h("svg", null, index.h("use", { href: `${this.dotSvg}` })))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
-  }
-  handleResize() {
-    if (window.innerWidth < 1200) {
-      this.cardStatus = 'mobile';
-    }
-    else {
-      this.cardStatus = 'desktop-closed';
-    }
-  }
-  static get assetsDirs() { return ["media"]; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "outCardState": ["cardStateChanged"]
-  }; }
-};
+const PtcDynamicCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dotSvg = index.getAssetPath('./media/nav-active-dotslick.svg');
+    this.cardType = 'sequential';
+    this.cardTitle = 'Card Title Goes Here';
+    this.cardImgSrc = undefined;
+    this.cardImgAlt = undefined;
+    this.outCardState = undefined;
+    this.cardStatus = 'desktop-closed';
+    this.overlayExists = true;
+  }
+  cardStateChanged(newState) {
+    this.cardStatus = newState;
+  }
+  async changeState(newState) {
+    this.outCardState = newState;
+  }
+  componentDidLoad() {
+    this.handleResize();
+    this.el.addEventListener('mouseenter', () => this.overlayExists = false);
+    this.el.addEventListener('mouseleave', () => this.overlayExists = true);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "card-wrapper" }, this.cardStatus == 'mobile' ? (index.h("div", { class: "card card-mobile" }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc }), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))))) : this.cardStatus == 'desktop-closed' ? (index.h("div", null, index.h("div", { class: "card card-dt-closed" }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", width: "135", height: "424" }, this.overlayExists ? index.h("ptc-overlay", { "filter-color": "black-3" }) : index.h("ptc-overlay", { "filter-color": "black-2" })), index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h2", null, this.cardTitle)))))) : (index.h("div", null, index.h("div", { class: "card card-dt-open" }, index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))), index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-height": "true", "image-alignment": "center" }))))), index.h("div", { hidden: true }, index.h("svg", null, index.h("use", { href: `${this.dotSvg}` })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  handleResize() {
+    if (window.innerWidth < 1200) {
+      this.cardStatus = 'mobile';
+    }
+    else {
+      this.cardStatus = 'desktop-closed';
+    }
+  }
+  static get assetsDirs() { return ["media"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "outCardState": ["cardStateChanged"]
+  }; }
+};
 PtcDynamicCard.style = ptcDynamicCardCss;
 
 exports.ptc_dynamic_card = PtcDynamicCard;

package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js

@@ -6,44 +6,44 @@ const index = require('./index-c27e52b2.js');
 
 const ptcEllipsisDropdownCss = ".ellipsis-icon{border:1px solid #6E717C;border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ptc-ellipsis-dropdown{position:relative;display:inline-block;padding:7px;cursor:pointer}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:0;left:auto;min-width:max-content;width:100%}.show .dropdown-container{display:inline-block}";
 
-const PtcEllipsisDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemSelected = index.createEvent(this, "itemSelected", 7);
-    this.dataItems = [];
-    this.selectedTab = undefined;
-    this.isDropdownOpen = false;
-  }
-  dropdownToggle(e) {
-    e.currentTarget.classList.toggle("show");
-    this.isDropdownOpen = e.currentTarget.classList.contains("show");
-  }
-  onItemSelected(e) {
-    this.itemSelected.emit(e);
-  }
-  offClick(e) {
-    let container = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
-    if (e && !this.host.contains(e.target) && this.isDropdownOpen) {
-      container.classList.remove("show");
-      this.isDropdownOpen = false;
-    }
-  }
-  render() {
-    let activeTab = this.dataItems.find(z => z.value == this.selectedTab);
-    let isActive = false;
-    if (activeTab) {
-      isActive = true;
-    }
-    return (index.h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, index.h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' })), index.h("div", { class: "dropdown-container" }, index.h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
-      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
-      return (index.h("dropdown-item", { class: activeClass }, index.h("a", { href: "#", onClick: (e) => {
-          e.preventDefault();
-          this.onItemSelected(dataItem);
-        } }, dataItem.text)));
-    }))));
-  }
-  get host() { return index.getElement(this); }
-};
+const PtcEllipsisDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.itemSelected = index.createEvent(this, "itemSelected", 7);
+    this.dataItems = [];
+    this.selectedTab = undefined;
+    this.isDropdownOpen = false;
+  }
+  dropdownToggle(e) {
+    e.currentTarget.classList.toggle("show");
+    this.isDropdownOpen = e.currentTarget.classList.contains("show");
+  }
+  onItemSelected(e) {
+    this.itemSelected.emit(e);
+  }
+  offClick(e) {
+    let container = this.host.shadowRoot.querySelector('.ptc-ellipsis-dropdown');
+    if (e && !this.host.contains(e.target) && this.isDropdownOpen) {
+      container.classList.remove("show");
+      this.isDropdownOpen = false;
+    }
+  }
+  render() {
+    let activeTab = this.dataItems.find(z => z.value == this.selectedTab);
+    let isActive = false;
+    if (activeTab) {
+      isActive = true;
+    }
+    return (index.h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, index.h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' })), index.h("div", { class: "dropdown-container" }, index.h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+      let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
+      return (index.h("dropdown-item", { class: activeClass }, index.h("a", { href: "#", onClick: (e) => {
+          e.preventDefault();
+          this.onItemSelected(dataItem);
+        } }, dataItem.text)));
+    }))));
+  }
+  get host() { return index.getElement(this); }
+};
 PtcEllipsisDropdown.style = ptcEllipsisDropdownCss;
 
 exports.ptc_ellipsis_dropdown = PtcEllipsisDropdown;

package/dist/cjs/ptc-filter-tag.cjs.entry.js

@@ -6,63 +6,63 @@ const index = require('./index-c27e52b2.js');
 
 const ptcFilterTagCss = ".ptc-filter-tag{display:block;cursor:pointer;position:relative;margin:0.25rem}.ptc-filter-tag.bubble{display:inline-block;color:var(--color-gray-10);font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;align-items:center;transition:border-color ease-out 250ms;border:1px solid var(--color-gray-05);border-radius:999px;padding:0.375rem 1.875rem 0.375rem 0.875rem;background:var(--color-white)}.ptc-filter-tag.bubble:hover{border:1px solid var(--color-gray-12)}.ptc-filter-tag.bubble .cls{display:block;position:absolute;top:0.35rem;right:0.8rem}.ptc-filter-tag.link,.ptc-filter-tag.link-lg{display:inline-block;font-family:Raleway;color:var(--color-gray-10);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:right;border-bottom:1px solid transparent;background:var(--color-white)}.ptc-filter-tag.link:hover,.ptc-filter-tag.link-lg:hover{text-decoration:underline}.ptc-filter-tag.link .cls,.ptc-filter-tag.link-lg .cls{display:none}.ptc-filter-tag.link-lg{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold)}.ptc-filter-tag.button{display:inline-block;background:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);padding:0.625rem 1rem;font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser);color:var(--color-white)}.ptc-filter-tag.button:hover{background-color:var(--color-gray-12)}.ptc-filter-tag.button:active{background-color:var(--color-black)}.ptc-filter-tag.button .cls{display:none}.ptc-filter-tag.standard{display:inline-flex;background:var(--color-gray-10);font-family:\"Raleway\";font-style:normal;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-denser);color:var(--color-green-07);background-color:transparent}.ptc-filter-tag.standard .cls{display:block;margin-left:0.25rem}";
 
-const PtcFilterTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clicked = index.createEvent(this, "clicked", 7);
-    this.handleClick = () => {
-      this.clicked.emit(this);
-    };
-    this.theme = 'bubble';
-    this.iconColorMap = undefined;
-  }
-  componentWillLoad() {
-    this.iconColorMap = {
-      'bubble': {
-        'hover': 'black',
-        'standard': 'light-gray'
-      },
-      'standard': {
-        'hover': 'ptc-green',
-        'standard': 'black'
-      },
-    };
-  }
-  handleMouseEnter() {
-    this.updateIconColor('hover');
-  }
-  handleMouseLeave() {
-    this.updateIconColor('standard');
-  }
-  updateIconColor(state) {
-    let icon = this.el.shadowRoot.querySelector('icon-asset');
-    if (icon) {
-      if (this.iconColorMap[this.theme]) {
-        icon.setAttribute('color', this.iconColorMap[this.theme][state]);
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    let icon;
-    switch (this.theme) {
-      case 'bubble':
-        icon = (index.h("icon-asset", { class: "cls", type: "ptc", color: "light-gray", name: "times", size: "micro" }));
-        break;
-      case 'standard':
-        icon = (index.h("icon-asset", { class: "cls", type: "ptc", color: "black", name: "times", size: "xxx-small" }));
-        break;
-    }
-    return (index.h(index.Host, null, index.h("span", { class: classMap, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("slot", null), icon)));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-filter-tag']: true,
-      [this.theme]: true
-    };
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcFilterTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clicked = index.createEvent(this, "clicked", 7);
+    this.handleClick = () => {
+      this.clicked.emit(this);
+    };
+    this.theme = 'bubble';
+    this.iconColorMap = undefined;
+  }
+  componentWillLoad() {
+    this.iconColorMap = {
+      'bubble': {
+        'hover': 'black',
+        'standard': 'light-gray'
+      },
+      'standard': {
+        'hover': 'ptc-green',
+        'standard': 'black'
+      },
+    };
+  }
+  handleMouseEnter() {
+    this.updateIconColor('hover');
+  }
+  handleMouseLeave() {
+    this.updateIconColor('standard');
+  }
+  updateIconColor(state) {
+    let icon = this.el.shadowRoot.querySelector('icon-asset');
+    if (icon) {
+      if (this.iconColorMap[this.theme]) {
+        icon.setAttribute('color', this.iconColorMap[this.theme][state]);
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    let icon;
+    switch (this.theme) {
+      case 'bubble':
+        icon = (index.h("icon-asset", { class: "cls", type: "ptc", color: "light-gray", name: "times", size: "micro" }));
+        break;
+      case 'standard':
+        icon = (index.h("icon-asset", { class: "cls", type: "ptc", color: "black", name: "times", size: "xxx-small" }));
+        break;
+    }
+    return (index.h(index.Host, null, index.h("span", { class: classMap, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("slot", null), icon)));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-filter-tag']: true,
+      [this.theme]: true
+    };
+  }
+  get el() { return index.getElement(this); }
+};
 PtcFilterTag.style = ptcFilterTagCss;
 
 exports.ptc_filter_tag = PtcFilterTag;

package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js

@@ -6,17 +6,17 @@ const index = require('./index-c27e52b2.js');
 
 const ptcHeroFooterCtaCss = ".sc-ptc-hero-footer-cta-h{display:block}.hero-footer-cta.sc-ptc-hero-footer-cta{position:relative;padding:var(--ptc-layout-spacing-05) 0;background-position:50%;background-size:cover;background-repeat:no-repeat;position:relative}.hero-footer-cta.sc-ptc-hero-footer-cta .is-grid.sc-ptc-hero-footer-cta{align-items:center;position:relative;z-index:10;margin:auto}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta,.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{color:var(--color-white);text-shadow:1px 1px 20px rgba(0, 0, 0, 0.5);font-stretch:normal;font-style:normal;text-align:left;color:var(--color-white)}.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-black);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta h2.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xxxx-large);font-weight:var(--ptc-font-weight-extrabold)}}.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{max-width:70%}}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta p.sc-ptc-hero-footer-cta{font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-denser)}}.hero-footer-cta.sc-ptc-hero-footer-cta .cta-overlay.sc-ptc-hero-footer-cta{position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(0, 0, 0, 0.35)}.hero-footer-cta.sc-ptc-hero-footer-cta .btm-cta-cut.sc-ptc-hero-footer-cta{position:absolute;top:-1px;right:0;fill:var(--color-white);z-index:100;transform:scaleY(-1)}@media only screen and (min-width: 992px){.hero-footer-cta.sc-ptc-hero-footer-cta .cta-left-padding.sc-ptc-hero-footer-cta{padding-left:var(--ptc-element-spacing-08)}}";
 
-const PtcHeroFooterCta = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ctaTitle = undefined;
-    this.description = undefined;
-    this.backgroundImage = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
-  }
-};
+const PtcHeroFooterCta = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ctaTitle = undefined;
+    this.description = undefined;
+    this.backgroundImage = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, index.h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: "cta-overlay" }), index.h("div", { class: "ptc-container is-grid has-p-lg" }, index.h("div", { class: "is-col-8-lg cta-left-padding" }, index.h("h2", null, this.ctaTitle), index.h("p", null, this.description)), index.h("div", { class: "is-col-4-lg cta-section" }, index.h("slot", { name: "cta" }))))));
+  }
+};
 PtcHeroFooterCta.style = ptcHeroFooterCtaCss;
 
 exports.ptc_hero_footer_cta = PtcHeroFooterCta;

package/dist/cjs/ptc-hero.cjs.entry.js

@@ -6,24 +6,24 @@ const index = require('./index-c27e52b2.js');
 
 const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}:host(.left) .ptc-hero-wrapper{text-align:left}:host(.center) .ptc-hero-wrapper{text-align:center}:host(.right) .ptc-hero-wrapper{text-align:right}";
 
-const PtcHero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.heroType = undefined;
-    this.bgUrl = undefined;
-    this.contentAlignment = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (index.h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null))) : (index.h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-      [this.contentAlignment]: this.contentAlignment ? true : false
-    };
-  }
-};
+const PtcHero = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heroType = undefined;
+    this.bgUrl = undefined;
+    this.contentAlignment = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (index.h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null))) : (index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+      [this.contentAlignment]: this.contentAlignment ? true : false
+    };
+  }
+};
 PtcHero.style = ptcHeroCss;
 
 exports.ptc_hero = PtcHero;