@ptcwebops/ptcw-design 1.5.3 → 1.5.6

package/dist/esm/max-width-container_3.entry.js

@@ -0,0 +1,230 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-8e63c32d.js';
+import { a as ResponsiveBgVariables } from './interfaces-7c0243be.js';
+
+const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
+
+const MaxWidthContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.maxWidth = undefined;
+    this.breakpoint = 768;
+    this.contentAlign = 'center';
+  }
+  componentDidLoad() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.contentAlign]: true,
+    };
+  }
+  handleResize() {
+    // const selectedContainer = this.el.querySelector('.max-width-container');
+    if (this.el) {
+      if (window.innerWidth >= this.breakpoint) {
+        this.el.style.maxWidth = `${this.maxWidth}px`;
+      }
+      else {
+        this.el.style.maxWidth = 'initial';
+      }
+    }
+  }
+  get el() { return getElement(this); }
+};
+MaxWidthContainer.style = maxWidthContainerCss;
+
+const ptcBackgroundVideoCss = ":host{display:block;position:relative}:host video{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100;object-fit:cover}:host .video-overlay{z-index:1;display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8;background-image:linear-gradient(270deg, rgba(30, 38, 38, 0) 26%, #1e2626)}:host(.legacy){display:block;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host(.legacy) video{object-fit:cover;position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden}:host .iframe-wrapper{position:absolute;top:0px;left:0px;right:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-100}:host .iframe-wrapper .background-video-embed{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%}:host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}:host .play-button{position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;z-index:99}@media (min-width: 768px){:host .play-button{top:unset;bottom:3.75rem;right:2rem}}";
+
+const PtcBackgroundVideo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.paused = undefined;
+    this.type = 'default';
+    this.isIframe = false;
+  }
+  // componentDidLoad() {
+  //   if(this.isIframe){
+  //     const iframe:HTMLIFrameElement = this.el.shadowRoot.querySelector('iframe');
+  //     const iframeDoc = iframe.contentDocument
+  //     const iframeVideo = iframeDoc.querySelector('video');
+  //     console.log("iframe ele: " + iframeDoc.querySelectorAll('video'));
+  //     iframeVideo.style.objectFit = 'cover';
+  //   }
+  // }
+  // @Method()
+  // async toggleVideo() {
+  //   // show a prompt
+  //   this.paused = !this.paused;
+  //   let video = this.el.shadowRoot.querySelector('video') as HTMLVideoElement;
+  //   if (video) {
+  //     if (this.paused) {
+  //       video.pause();
+  //     } else {
+  //       video.play().catch(z => console.error(z));
+  //     }
+  //   }
+  //   console.log('Hello, I am a publish method from ptc-background-video!');
+  // }
+  componentWillLoad() {
+    this.paused = false;
+  }
+  render() {
+    const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
+    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: "play-button" }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e) }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: "video-overlay" }) : '', this.type == 'default' ? h("slot", null) : ''));
+  }
+  toggleVideoPlay(e) {
+    e.preventDefault();
+    this.paused = !this.paused;
+    let video = this.el.shadowRoot.querySelector('video');
+    if (video) {
+      if (this.paused) {
+        video.pause();
+      }
+      else {
+        video.play().catch(z => console.error(z));
+      }
+    }
+  }
+  get el() { return getElement(this); }
+};
+PtcBackgroundVideo.style = ptcBackgroundVideoCss;
+
+const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-standard-top{border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-large-top{border-top-left-radius:var(--ptc-border-radius-large);border-top-right-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}";
+
+const PtcImg = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sizeXs = '510x340';
+    this.sizeSm = '1240x496';
+    this.sizeMd = '1366x500';
+    this.sizeLg = '1920x1080';
+    this.imgUrl = undefined;
+    this.imageType = 'smart-bg';
+    this.borderRadius = '';
+    this.loadMode = 'lazy-bg';
+    this.styles = undefined;
+  }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
+  WindowResize() {
+    this.setResponsiveBg();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  componentWillUpdate() {
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      // If the data attribute exists, set the background
+      if (elData !== null) {
+        el.style.backgroundImage = "url('" + elData + "')";
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  //lazy loading
+  addIntersectionObserver() {
+    if (!this.imgUrl) {
+      console.log('no image!');
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+      let bgObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = entry.target;
+            image.classList.remove('lazy-bg');
+            bgObserver.unobserve(image);
+          }
+        });
+      });
+      lazyLoadBgs.forEach(image => {
+        bgObserver.observe(image);
+      });
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.imageType]: true,
+      'ptc-img': true,
+      [this.borderRadius]: true,
+      [this.loadMode]: true,
+      // [this.imageZIndex] : true
+    };
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsiveBgVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
+  }
+  get el() { return getElement(this); }
+};
+PtcImg.style = ptcImgCss;
+
+export { MaxWidthContainer as max_width_container, PtcBackgroundVideo as ptc_background_video, PtcImg as ptc_img };

package/dist/esm/my-component.entry.js

@@ -1,22 +1,22 @@
 import { r as registerInstance, h } from './index-8e63c32d.js';
-import { f as format } from './utils-f937097d.js';
+import { f as format } from './utils-38decc43.js';
 
 const myComponentCss = ":host{display:block}";
 
-const MyComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.first = undefined;
-    this.middle = undefined;
-    this.last = undefined;
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return h("div", null, "Hello, World! I'm ", this.getText());
-  }
-};
+const MyComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.first = undefined;
+    this.middle = undefined;
+    this.last = undefined;
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return h("div", null, "Hello, World! I'm ", this.getText());
+  }
+};
 MyComponent.style = myComponentCss;
 
 export { MyComponent as my_component };

package/dist/esm/ptc-accordion-item.entry.js

@@ -1,92 +1,92 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8e63c32d.js';
 
-const hasSlot = (parentEl, slotName) => {
-  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
+const hasSlot = (parentEl, slotName) => {
+  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
 };
 
 const ptcAccordionItemCss = ":host{border-bottom:1px solid var(--color-gray-03);display:block}:host .heading{display:flex;align-items:center;justify-content:initial;width:100%;border:none;text-align:left;padding:var(--ptc-element-spacing-06);padding-left:0;cursor:pointer;transition:border-radius var(--ptc-transition-fast) ease var(--ptc-transition-fast);background-color:transparent}:host .heading .heading-text{color:var(--color-gray-10);margin:0;font-weight:var(--ptc-font-weight-bold);flex:1;font-size:var(--ptc-font-size-large);font-family:var(--ptc-font-latin)}:host .heading .arrow{color:var(--color-green-06);margin-right:var(--ptc-element-spacing-05);transition:transform var(--ptc-transition-fast) ease-in-out}:host .heading .arrow svg{width:34px;height:34px}:host .heading .arrow svg path{fill:currentColor}:host .body-container{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-fast) ease-in-out;scrollbar-width:none;}:host .body-container::-webkit-scrollbar{display:none;}:host .body-container .body{border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;padding:var(--ptc-layout-spacing-02);padding-top:0}:host(.autoHeight) .body-container{overflow:hidden}:host(.active) .heading{border-bottom-left-radius:0;border-bottom-right-radius:0;transition:border-radius 0s ease}:host(.active) .heading .arrow{transform:rotate(180deg)}:host(.active) .body-container{max-height:var(--ptc-accordion-item-body-max-height)}";
 
-const PtcAccordionItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.opened = createEvent(this, "opened", 7);
-    this.opening = createEvent(this, "opening", 7);
-    this.closed = createEvent(this, "closed", 7);
-    this.closing = createEvent(this, "closing", 7);
-    this.heading = null;
-    this.headingTag = 'h3';
-    this.autoHeight = false;
-    this.active = false;
-    this.hasHeadingSlot = true;
-    this.hasArrowSlot = true;
-  }
-  componentWillLoad() {
-    this.hasHeadingSlot = hasSlot(this.el, 'heading');
-    this.hasArrowSlot = hasSlot(this.el, 'arrow');
-  }
-  componentDidLoad() {
-    if (this.autoHeight) {
-      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
-    }
-    this.onTransitionEnd();
-    this.bodyEl.addEventListener('transitionstart', () => {
-      this.onTransitionStart();
-    });
-    this.bodyEl.addEventListener('transitionend', () => {
-      this.onTransitionEnd();
-    });
-    this.hasHeadingSlot = hasSlot(this.el, 'heading');
-    this.hasArrowSlot = hasSlot(this.el, 'arrow');
-  }
-  onTransitionEnd() {
-    if (this.active) {
-      this.bodyEl.style.overflow = 'auto';
-      this.opened.emit();
-    }
-    else {
-      this.bodyEl.style.overflow = 'hidden';
-      this.bodyEl.style.visibility = 'hidden';
-      this.closed.emit();
-    }
-  }
-  onTransitionStart() {
-    if (this.active) {
-      this.bodyEl.style.visibility = 'visible';
-      this.opening.emit();
-    }
-    else {
-      this.closing.emit();
-    }
-  }
-  /**
-   * Toggle open state of accordion item
-   */
-  async toggle() {
-    if (this.active) {
-      this.close();
-    }
-    else {
-      this.open();
-    }
-  }
-  /**
-   * Closes the accordion item
-   */
-  async close() {
-    this.active = false;
-  }
-  /**
-   * Opens the accordion item.
-   */
-  async open() {
-    this.active = true;
-  }
-  render() {
-    const { active, autoHeight, headingTag: HeadingTag } = this;
-    return (h(Host, { class: { active, autoHeight } }, h("button", { class: "heading", role: "button", onClick: () => this.toggle() }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), h("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h("div", { class: "body" }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
+const PtcAccordionItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.opened = createEvent(this, "opened", 7);
+    this.opening = createEvent(this, "opening", 7);
+    this.closed = createEvent(this, "closed", 7);
+    this.closing = createEvent(this, "closing", 7);
+    this.heading = null;
+    this.headingTag = 'h3';
+    this.autoHeight = false;
+    this.active = false;
+    this.hasHeadingSlot = true;
+    this.hasArrowSlot = true;
+  }
+  componentWillLoad() {
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  componentDidLoad() {
+    if (this.autoHeight) {
+      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
+    }
+    this.onTransitionEnd();
+    this.bodyEl.addEventListener('transitionstart', () => {
+      this.onTransitionStart();
+    });
+    this.bodyEl.addEventListener('transitionend', () => {
+      this.onTransitionEnd();
+    });
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  onTransitionEnd() {
+    if (this.active) {
+      this.bodyEl.style.overflow = 'auto';
+      this.opened.emit();
+    }
+    else {
+      this.bodyEl.style.overflow = 'hidden';
+      this.bodyEl.style.visibility = 'hidden';
+      this.closed.emit();
+    }
+  }
+  onTransitionStart() {
+    if (this.active) {
+      this.bodyEl.style.visibility = 'visible';
+      this.opening.emit();
+    }
+    else {
+      this.closing.emit();
+    }
+  }
+  /**
+   * Toggle open state of accordion item
+   */
+  async toggle() {
+    if (this.active) {
+      this.close();
+    }
+    else {
+      this.open();
+    }
+  }
+  /**
+   * Closes the accordion item
+   */
+  async close() {
+    this.active = false;
+  }
+  /**
+   * Opens the accordion item.
+   */
+  async open() {
+    this.active = true;
+  }
+  render() {
+    const { active, autoHeight, headingTag: HeadingTag } = this;
+    return (h(Host, { class: { active, autoHeight } }, h("button", { class: "heading", role: "button", onClick: () => this.toggle() }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), h("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h("div", { class: "body" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
 PtcAccordionItem.style = ptcAccordionItemCss;
 
 export { PtcAccordionItem as ptc_accordion_item };

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

@@ -2,41 +2,41 @@ import { r as registerInstance, h, H as Host, a as getElement } from './index-8e
 
 const ptcAccordionCss = ":host{--ptc-accordion-item-body-max-height:100vh}";
 
-const PtcAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.multiple = false;
-  }
-  componentWillLoad() {
-    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
-    if (!this.multiple) {
-      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
-      if (this.activeItem) {
-        this.activeItem.open();
-      }
-      this.closeNonActive();
-    }
-  }
-  openHandler(e) {
-    e.stopPropagation();
-    const eventTarget = e.target;
-    if (!this.multiple) {
-      this.activeItem = eventTarget;
-      this.closeNonActive();
-    }
-  }
-  closeNonActive() {
-    this.items.forEach(item => {
-      if (!item.isEqualNode(this.activeItem)) {
-        item.close();
-      }
-    });
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
+const PtcAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    if (!this.multiple) {
+      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
+      if (this.activeItem) {
+        this.activeItem.open();
+      }
+      this.closeNonActive();
+    }
+  }
+  openHandler(e) {
+    e.stopPropagation();
+    const eventTarget = e.target;
+    if (!this.multiple) {
+      this.activeItem = eventTarget;
+      this.closeNonActive();
+    }
+  }
+  closeNonActive() {
+    this.items.forEach(item => {
+      if (!item.isEqualNode(this.activeItem)) {
+        item.close();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
 PtcAccordion.style = ptcAccordionCss;
 
 export { PtcAccordion as ptc_accordion };

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

@@ -2,56 +2,56 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-8
 
 const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border-top:3px solid var(--color-green-07);box-shadow:var(--ptc-shadow-medium);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-03) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-05);margin:0 auto;align-items:center;justify-content:space-between;max-width:1200px}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-03) var(--ptc-element-spacing-06)}}@media only screen and (min-width: 1200px){.content-wrapper{padding:var(--ptc-element-spacing-03) 15px var(--ptc-element-spacing-03) 15px;max-width:1170px;box-sizing:border-box}}@media screen and (min-width: 1400px){.content-wrapper{padding:var(--ptc-element-spacing-03) 0px var(--ptc-element-spacing-03) 0px;max-width:1200px}}.left-content{max-width:calc(100% - 76px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative}.title{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-dense);text-align:left;color:var(--color-gray-10);margin-bottom:var(--ptc-element-spacing-02);max-width:100%}.description{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);max-width:100%}.cta-link{color:var(--color-blue-07);font-size:var(--ptc-font-size-x-small);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;display:inline-block;vertical-align:middle;cursor:pointer}.cta-link::before{content:\"\";position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}.cta-link:link{color:var(--color-blue-07)}.cta-link:hover{color:var(--color-blue-08)}.cta-link:active{color:var(--color-gray-09)}.cta-link:focus{outline:2px solid var(--color-blue-07);outline-offset:0.25rem}.bar-close{max-width:36px;cursor:pointer;margin-left:var(--ptc-element-spacing-08);position:relative}.bar-close::before{content:\"\";position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}@media only screen and (min-width: 992px){.left-content{flex-direction:row;max-width:calc(100% - 58px);flex:1 1 1032px}.bar-close{max-width:18px}.bar-close::before{width:34px;height:34px}.title{margin-right:var(--ptc-element-spacing-04);margin-bottom:0;flex:0 1 auto;max-width:248px}.title.max-title{max-width:unset !important;flex:2 1 560px}.description{flex:1 1 768px}}";
 
-const PtcAnnouncement = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    this.closeClick = () => {
-      this.visible = false;
-      this.close.emit();
-    };
-    this.getIconSize = () => {
-      return this.windowSize === 'mobile' ? 'xxx-large' : 'small';
-    };
-    this.isMaxWidthTitle = () => {
-      return !!this.description ? '' : ' max-title';
-    };
-    this.barTitle = '';
-    this.description = '';
-    this.linkText = undefined;
-    this.linkTitle = undefined;
-    this.visible = undefined;
-    this.linkUrl = '#';
-    this.insideContainer = undefined;
-    this.target = '_self';
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    var _a, _b;
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.insideContainer ? 'content-wrapper ptc-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? (h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (h("ptc-tooltip", { "text-display": "inline", "max-length": "60", "z-index": "z-2", description: this.barTitle, position: "bottom" })))) : null, this.windowSize === 'mobile' ? ( //mobile view
-    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines": "line4", "z-index": "z-3" }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)) : null))) : (
-    //desktop view
-    h("div", { class: "description" }, !!this.description ? h("ptc-tooltip", { "text-display": "inline", "max-length": "165", "z-index": "z-2", description: this.description + " ", position: "bottom" }) : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target }, h("ptc-tooltip", { "text-display": "inline", "max-length": "25", "z-index": "z-2", description: this.linkText, position: "bottom" }))) : null))), h("icon-asset", { color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['announcement']: true,
-      [this.visible ? 'visible' : '']: true,
-    };
-  }
-};
+const PtcAnnouncement = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    this.closeClick = () => {
+      this.visible = false;
+      this.close.emit();
+    };
+    this.getIconSize = () => {
+      return this.windowSize === 'mobile' ? 'xxx-large' : 'small';
+    };
+    this.isMaxWidthTitle = () => {
+      return !!this.description ? '' : ' max-title';
+    };
+    this.barTitle = '';
+    this.description = '';
+    this.linkText = undefined;
+    this.linkTitle = undefined;
+    this.visible = undefined;
+    this.linkUrl = '#';
+    this.insideContainer = undefined;
+    this.target = '_self';
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    var _a, _b;
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.insideContainer ? 'content-wrapper ptc-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? (h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (h("ptc-tooltip", { "text-display": "inline", "max-length": "60", "z-index": "z-2", description: this.barTitle, position: "bottom" })))) : null, this.windowSize === 'mobile' ? ( //mobile view
+    Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines": "line4", "z-index": "z-3" }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)) : null))) : (
+    //desktop view
+    h("div", { class: "description" }, !!this.description ? h("ptc-tooltip", { "text-display": "inline", "max-length": "165", "z-index": "z-2", description: this.description + " ", position: "bottom" }) : null, !!this.linkText ? (h("a", { class: "cta-link", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target }, h("ptc-tooltip", { "text-display": "inline", "max-length": "25", "z-index": "z-2", description: this.linkText, position: "bottom" }))) : null))), h("icon-asset", { color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['announcement']: true,
+      [this.visible ? 'visible' : '']: true,
+    };
+  }
+};
 PtcAnnouncement.style = ptcAnnouncementCss;
 
 export { PtcAnnouncement as ptc_announcement };