@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/esm/ptc-related-card-rail.entry.js

@@ -2,155 +2,155 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-62
 
 const ptcRelatedCardRailCss = ":host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;}:host .card-rail-content icon-asset#right-arrow{right:3px}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{width:100%;flex:1 0 100%;display:flex}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
 
-const PtcRelatedCardRail = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.setScreenBasedProps = () => {
-      let windowWidth = window.innerWidth;
-      let props = {
-        contentContainerMargin: undefined,
-        contentCards: undefined,
-        parahFontSize: undefined
-      };
-      if (windowWidth >= 2600) {
-        props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1980) {
-        props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1440) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1200) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 992) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 768) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xxx-small';
-      }
-      else {
-        props.contentCards = 1;
-        props.parahFontSize = 'xxx-small';
-      }
-      this.screenBasedProps = Object.assign({}, props);
-    };
-    this.handlePrevClick = () => {
-      var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView > 0) {
-        this.cardInView -= 1;
-        const content = contentCards[this.cardInView];
-        contentContainer.scrollTo({
-          left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
-        });
-      }
-    };
-    this.handleNextClick = () => {
-      var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
-        this.cardInView += 1;
-        const content = contentCards[this.cardInView];
-        contentContainer.scrollTo({
-          left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
-        });
-      }
-    };
-    this.handleOnScrollBehaviour = () => {
-      if (!this.closed) {
-        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
-        let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
-        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
-        let trackLength = documentHeight - windowHeight;
-        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
-        if (percentageSrolled >= 50) {
-          this.el.style.display = 'block';
-        }
-        else {
-          this.el.style.display = 'none';
-        }
-        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
-        let pageFooter = document.querySelector(this.footerQuerySelector);
-        if (pageFooter) {
-          let pageFooterTop = pageFooter.getBoundingClientRect().top;
-          let windowBottom = window.innerHeight;
-          if (pageFooterTop <= windowBottom) {
-            let newBottom = 132 + (windowBottom - pageFooterTop);
-            cardRailContainer.style.bottom = `${newBottom}px`;
-          }
-        }
-      }
-    };
-    this.handleOnResizeBehaviour = () => {
-      var _a, _b;
-      this.setScreenBasedProps();
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      contentContainer.scrollTo({
-        left: contentCards[0].offsetLeft - contentContainerMarginLeft,
-      });
-      this.cardInView = 0;
-    };
-    this.footerQuerySelector = undefined;
-    this.closed = false;
-    this.cardInView = 0;
-    this.data = [];
-    this.screenBasedProps = {
-      contentContainerMargin: undefined,
-      contentCards: undefined,
-      parahFontSize: undefined
-    };
-  }
-  componentWillLoad() {
-    const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
-    for (let ind in relatedCards) {
-      let card = relatedCards[ind];
-      if (card.tagName === 'DIV') {
-        let cardData = {
-          image: undefined,
-          text: undefined,
-          href: undefined
-        };
-        let cardImage = card.querySelector('img');
-        let cardLink = card.querySelector('a');
-        cardData.image = cardImage.getAttribute('src');
-        cardData.text = cardLink.innerHTML;
-        cardData.href = cardLink.getAttribute('href');
-        this.data.push(cardData);
-        card.remove();
-      }
-    }
-    this.handleOnScrollBehaviour();
-  }
-  componentDidLoad() {
-    this.setScreenBasedProps();
-    window.addEventListener('scroll', this.handleOnScrollBehaviour);
-    window.addEventListener('resize', this.handleOnResizeBehaviour);
-  }
-  render() {
-    return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcRelatedCardRail = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.setScreenBasedProps = () => {
+      let windowWidth = window.innerWidth;
+      let props = {
+        contentContainerMargin: undefined,
+        contentCards: undefined,
+        parahFontSize: undefined
+      };
+      if (windowWidth >= 2600) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1980) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1440) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1200) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 992) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 768) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xxx-small';
+      }
+      else {
+        props.contentCards = 1;
+        props.parahFontSize = 'xxx-small';
+      }
+      this.screenBasedProps = Object.assign({}, props);
+    };
+    this.handlePrevClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView > 0) {
+        this.cardInView -= 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleNextClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
+        this.cardInView += 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleOnScrollBehaviour = () => {
+      if (!this.closed) {
+        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
+        let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
+        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
+        let trackLength = documentHeight - windowHeight;
+        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
+        if (percentageSrolled >= 50) {
+          this.el.style.display = 'block';
+        }
+        else {
+          this.el.style.display = 'none';
+        }
+        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
+        let pageFooter = document.querySelector(this.footerQuerySelector);
+        if (pageFooter) {
+          let pageFooterTop = pageFooter.getBoundingClientRect().top;
+          let windowBottom = window.innerHeight;
+          if (pageFooterTop <= windowBottom) {
+            let newBottom = 132 + (windowBottom - pageFooterTop);
+            cardRailContainer.style.bottom = `${newBottom}px`;
+          }
+        }
+      }
+    };
+    this.handleOnResizeBehaviour = () => {
+      var _a, _b;
+      this.setScreenBasedProps();
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      contentContainer.scrollTo({
+        left: contentCards[0].offsetLeft - contentContainerMarginLeft,
+      });
+      this.cardInView = 0;
+    };
+    this.footerQuerySelector = undefined;
+    this.closed = false;
+    this.cardInView = 0;
+    this.data = [];
+    this.screenBasedProps = {
+      contentContainerMargin: undefined,
+      contentCards: undefined,
+      parahFontSize: undefined
+    };
+  }
+  componentWillLoad() {
+    const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
+    for (let ind in relatedCards) {
+      let card = relatedCards[ind];
+      if (card.tagName === 'DIV') {
+        let cardData = {
+          image: undefined,
+          text: undefined,
+          href: undefined
+        };
+        let cardImage = card.querySelector('img');
+        let cardLink = card.querySelector('a');
+        cardData.image = cardImage.getAttribute('src');
+        cardData.text = cardLink.innerHTML;
+        cardData.href = cardLink.getAttribute('href');
+        this.data.push(cardData);
+        card.remove();
+      }
+    }
+    this.handleOnScrollBehaviour();
+  }
+  componentDidLoad() {
+    this.setScreenBasedProps();
+    window.addEventListener('scroll', this.handleOnScrollBehaviour);
+    window.addEventListener('resize', this.handleOnResizeBehaviour);
+  }
+  render() {
+    return (this.closed ? null :
+      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+  }
+  get el() { return getElement(this); }
+};
 PtcRelatedCardRail.style = ptcRelatedCardRailCss;
 
 export { PtcRelatedCardRail as ptc_related_card_rail };

package/dist/esm/ptc-responsive-wrapper.entry.js

@@ -2,60 +2,60 @@ import { r as registerInstance, h, g as getElement } from './index-62587d0b.js';
 
 const ptcResponsiveWrapperCss = ":host{display:block}";
 
-const PtcResponsiveWrapper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.ro = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        this.applySizeClasses(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(this.element);
-  }
-  disconnectedCallback() {
-    this.ro.disconnect();
-  }
-  applySizeClasses(size) {
-    let xsmall = false;
-    let small = false;
-    let medium = false;
-    let large = false;
-    let xlarge = false;
-    let xxlarge = false;
-    let large2k = false;
-    let large4k = false;
-    if (size >= 2600)
-      large4k = true;
-    else if (size >= 1980)
-      large2k = true;
-    else if (size >= 1600)
-      xxlarge = true;
-    else if (size >= 1440)
-      xlarge = true;
-    else if (size >= 1200)
-      large = true;
-    else if (size >= 992)
-      medium = true;
-    else if (size >= 768)
-      small = true;
-    else
-      xsmall = true;
-    this.element.classList.toggle("xsmall", xsmall);
-    this.element.classList.toggle("small", small);
-    this.element.classList.toggle("medium", medium);
-    this.element.classList.toggle("large", large);
-    this.element.classList.toggle("xlarge", xlarge);
-    this.element.classList.toggle("xxlarge", xxlarge);
-    this.element.classList.toggle("large2k", large2k);
-    this.element.classList.toggle("large4k", large4k);
-  }
-  render() {
-    return (h("div", null, h("slot", null)));
-  }
-  get element() { return getElement(this); }
-};
+const PtcResponsiveWrapper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.applySizeClasses(entry.contentRect.width);
+      }
+    });
+    this.ro.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.ro.disconnect();
+  }
+  applySizeClasses(size) {
+    let xsmall = false;
+    let small = false;
+    let medium = false;
+    let large = false;
+    let xlarge = false;
+    let xxlarge = false;
+    let large2k = false;
+    let large4k = false;
+    if (size >= 2600)
+      large4k = true;
+    else if (size >= 1980)
+      large2k = true;
+    else if (size >= 1600)
+      xxlarge = true;
+    else if (size >= 1440)
+      xlarge = true;
+    else if (size >= 1200)
+      large = true;
+    else if (size >= 992)
+      medium = true;
+    else if (size >= 768)
+      small = true;
+    else
+      xsmall = true;
+    this.element.classList.toggle("xsmall", xsmall);
+    this.element.classList.toggle("small", small);
+    this.element.classList.toggle("medium", medium);
+    this.element.classList.toggle("large", large);
+    this.element.classList.toggle("xlarge", xlarge);
+    this.element.classList.toggle("xxlarge", xxlarge);
+    this.element.classList.toggle("large2k", large2k);
+    this.element.classList.toggle("large4k", large4k);
+  }
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  get element() { return getElement(this); }
+};
 PtcResponsiveWrapper.style = ptcResponsiveWrapperCss;
 
 export { PtcResponsiveWrapper as ptc_responsive_wrapper };

package/dist/esm/ptc-search-field.entry.js

@@ -2,77 +2,77 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 
 const ptcSearchFieldCss = ":host .search-div{position:relative;display:flex;align-items:stretch;height:51px;border-radius:var(--ptc-border-radius-standard)}:host .search-div .input-wrap{position:relative;width:100%;box-sizing:border-box;display:flex}:host .search-div .input-wrap input{height:100%}:host .search-div input{background-color:var(--color-white);height:-webkit-fill-available;border:0 solid var(--color-gray-12);border-radius:var(--ptc-border-radius-standard) 0 0 var(--ptc-border-radius-standard);flex-grow:2;padding-left:var(--ptc-element-spacing-04);line-height:var(--ptc-line-height-loose);padding-right:54px;width:100%;box-sizing:border-box;margin-right:0px}:host .search-div input:focus-visible{border-radius:var(--ptc-border-radius-standard) 0 0 var(--ptc-border-radius-standard);outline:none}:host .search-div input::placeholder{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-small);position:relative;top:1px;color:var(--color-gray-10)}:host .search-div .search-btn{cursor:pointer;height:51px;min-width:51px;border-radius:0 var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0;background-color:var(--color-gray-12);border:0 solid var(--color-gray-12);transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium);margin:0}:host .search-div .search-btn:active{background-color:var(--color-black)}:host .search-div .search-btn:hover{background-color:var(--color-gray-10)}: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;width:208px}@media (max-width: 480px){:host(.dark) .search-div{width:100%}}@media only screen and (min-width: 992px){:host(.dark) .search-div{width:246px}}:host(.dark) .search-div input{background-color:var(--color-gray-12);border:1px solid var(--color-gray-08);color:var(--color-white);padding-left:unset;text-indent:var(--ptc-element-spacing-04);padding-right:2px}:host(.dark) .search-div input::placeholder{color:var(--color-white);font-size:var(--ptc-font-size-x-small)}:host(.dark) .search-div .search-btn{height:43px;width:43px;background-color:var(--color-gray-10);border:1px solid var(--color-gray-08);border-left:0}:host(.dark) .search-div .search-btn:hover{background-color:var(--color-gray-08)}:host(.x-small) .search-div{box-shadow:var(--ptc-shadow-x-small)}:host(.small) .search-div{box-shadow:var(--ptc-shadow-small)}:host(.medium) .search-div{box-shadow:var(--ptc-shadow-medium)}:host(.large) .search-div{box-shadow:var(--ptc-shadow-large)}:host(.x-large) .search-div{box-shadow:var(--ptc-shadow-x-large)}@media (max-width: 480px){input{width:75%}}.icon-wrapper{padding:16px 20px 0;background-color:var(--color-white);position:absolute;right:0;top:0;height:100%;box-sizing:border-box}.icon-wrapper .cls{cursor:pointer;display:block}:host(.dark) .icon-wrapper{padding:12px 20px 0;background-color:var(--color-gray-12);border:1px solid var(--color-gray-08);border-left-width:0;position:initial;right:auto;top:auto}:host(.dark):host(.enable-clear) input{border-right-width:0}@media only screen and (min-width: 992px){.cls{display:none}}";
 
-const PtcSearchField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.clicked = createEvent(this, "clicked", 7);
-    this.textValue = undefined;
-    this.placeholderLabel = undefined;
-    this.darkTheme = undefined;
-    this.elevation = 'small';
-    this.enableClear = false;
-    this.styles = undefined;
-  }
-  textChangedHandler(event) {
-    this.valueChanged.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
-    });
-  }
-  buttonClickHandler(event) {
-    this.clicked.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
-    });
-  }
-  keyDownHandler(event) {
-    if (event.key == 'Enter') {
-      this.clicked.emit({
-        'sender': this,
-        'event': event,
-        'searchTerm': this.getSearchValue()
-      });
-    }
-    if (this.getSearchValue() && this.enableClear) ;
-  }
-  keyUpHandler() {
-    if (!this.darkTheme) {
-      this.enableClear = !(this.getSearchValue() == "");
-    }
-  }
-  getSearchValue() {
-    let result = '';
-    let input = this.el.shadowRoot.querySelector('input');
-    if (input) {
-      result = input.value;
-    }
-    return result;
-  }
-  async clearSearchValue() {
-    this.textValue = "";
-    let input = this.el.shadowRoot.querySelector('input');
-    if (input) {
-      input.value = "";
-      this.enableClear = false;
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const clearIconColor = this.darkTheme ? "white" : "black";
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap' }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(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,
-      [this.elevation]: true,
-      ['enable-clear']: this.enableClear
-    };
-  }
-  get el() { return getElement(this); }
-};
+const PtcSearchField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.clicked = createEvent(this, "clicked", 7);
+    this.textValue = undefined;
+    this.placeholderLabel = undefined;
+    this.darkTheme = undefined;
+    this.elevation = 'small';
+    this.enableClear = false;
+    this.styles = undefined;
+  }
+  textChangedHandler(event) {
+    this.valueChanged.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
+  }
+  buttonClickHandler(event) {
+    this.clicked.emit({
+      'sender': this,
+      'event': event,
+      'searchTerm': this.getSearchValue()
+    });
+  }
+  keyDownHandler(event) {
+    if (event.key == 'Enter') {
+      this.clicked.emit({
+        'sender': this,
+        'event': event,
+        'searchTerm': this.getSearchValue()
+      });
+    }
+    if (this.getSearchValue() && this.enableClear) ;
+  }
+  keyUpHandler() {
+    if (!this.darkTheme) {
+      this.enableClear = !(this.getSearchValue() == "");
+    }
+  }
+  getSearchValue() {
+    let result = '';
+    let input = this.el.shadowRoot.querySelector('input');
+    if (input) {
+      result = input.value;
+    }
+    return result;
+  }
+  async clearSearchValue() {
+    this.textValue = "";
+    let input = this.el.shadowRoot.querySelector('input');
+    if (input) {
+      input.value = "";
+      this.enableClear = false;
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const clearIconColor = this.darkTheme ? "white" : "black";
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap' }, h("input", { type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(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,
+      [this.elevation]: true,
+      ['enable-clear']: this.enableClear
+    };
+  }
+  get el() { return getElement(this); }
+};
 PtcSearchField.style = ptcSearchFieldCss;
 
 export { PtcSearchField as ptc_search_field };