@ptcwebops/ptcw-design 0.5.5 → 0.5.6

package/dist/custom-elements/index.js

@@ -1,87 +1,102 @@
-import { HTMLElement, getAssetPath, h, Host, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, h, getAssetPath, Host, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
+const dropdownItemCss = ".dropdown-item{padding:0.375rem 1.5rem;transition:background-color ease-out 250ms}.dropdown-item:hover,.dropdown-item:active,.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--color-gray-02)}.dropdown-item a{font-family:\"Raleway\";font-style:normal;font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-dense);color:var(--color-gray-12);text-decoration:none}.dropdown-item a:hover,.dropdown-item a:visited,.dropdown-item a:active,.dropdown-item a:focus,.dropdown-item a:focus-visible{color:var(--color-gray-12)}.dropdown-item:first-child a{margin-top:0.75rem}.dropdown-item:last-child a{margin-bottom:0.75rem}";
+
+let DropdownItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.linkHref = undefined;
+    this.linkTarget = '_self';
+  }
+  render() {
+    return (h("div", { class: "dropdown-item" }, h("slot", null)));
+  }
+  static get style() { return dropdownItemCss; }
+};
+
 const iconAssetCss = ".svg-inline--fa.sc-icon-asset,svg.sc-icon-asset:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa.sc-icon-asset{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg.sc-icon-asset{vertical-align:-.225em}.svg-inline--fa.fa-w-1.sc-icon-asset{width:.0625em}.svg-inline--fa.fa-w-2.sc-icon-asset{width:.125em}.svg-inline--fa.fa-w-3.sc-icon-asset{width:.1875em}.svg-inline--fa.fa-w-4.sc-icon-asset{width:.25em}.svg-inline--fa.fa-w-5.sc-icon-asset{width:.3125em}.svg-inline--fa.fa-w-6.sc-icon-asset{width:.375em}.svg-inline--fa.fa-w-7.sc-icon-asset{width:.4375em}.svg-inline--fa.fa-w-8.sc-icon-asset{width:.5em}.svg-inline--fa.fa-w-9.sc-icon-asset{width:.5625em}.svg-inline--fa.fa-w-10.sc-icon-asset{width:.625em}.svg-inline--fa.fa-w-11.sc-icon-asset{width:.6875em}.svg-inline--fa.fa-w-12.sc-icon-asset{width:.75em}.svg-inline--fa.fa-w-13.sc-icon-asset{width:.8125em}.svg-inline--fa.fa-w-14.sc-icon-asset{width:.875em}.svg-inline--fa.fa-w-15.sc-icon-asset{width:.9375em}.svg-inline--fa.fa-w-16.sc-icon-asset{width:1em}.svg-inline--fa.fa-w-17.sc-icon-asset{width:1.0625em}.svg-inline--fa.fa-w-18.sc-icon-asset{width:1.125em}.svg-inline--fa.fa-w-19.sc-icon-asset{width:1.1875em}.svg-inline--fa.fa-w-20.sc-icon-asset{width:1.25em}.svg-inline--fa.fa-pull-left.sc-icon-asset{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right.sc-icon-asset{margin-left:.3em;width:auto}.svg-inline--fa.fa-border.sc-icon-asset{height:1.5em}.svg-inline--fa.fa-li.sc-icon-asset{width:2em}.svg-inline--fa.fa-fw.sc-icon-asset{width:1.25em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers.sc-icon-asset{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset,.fa-layers-text.sc-icon-asset{display:inline-block;position:absolute;text-align:center}.fa-layers-text.sc-icon-asset{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right.sc-icon-asset{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left.sc-icon-asset{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right.sc-icon-asset{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left.sc-icon-asset{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg.sc-icon-asset{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs.sc-icon-asset{font-size:.75em}.fa-sm.sc-icon-asset{font-size:.875em}.fa-1x.sc-icon-asset{font-size:1em}.fa-2x.sc-icon-asset{font-size:2em}.fa-3x.sc-icon-asset{font-size:3em}.fa-4x.sc-icon-asset{font-size:4em}.fa-5x.sc-icon-asset{font-size:5em}.fa-6x.sc-icon-asset{font-size:6em}.fa-7x.sc-icon-asset{font-size:7em}.fa-8x.sc-icon-asset{font-size:8em}.fa-9x.sc-icon-asset{font-size:9em}.fa-10x.sc-icon-asset{font-size:10em}.fa-fw.sc-icon-asset{text-align:center;width:1.25em}.fa-ul.sc-icon-asset{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul.sc-icon-asset>li.sc-icon-asset{position:relative}.fa-li.sc-icon-asset{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border.sc-icon-asset{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left.sc-icon-asset{float:left}.fa-pull-right.sc-icon-asset{float:right}.fa.fa-pull-left.sc-icon-asset,.fab.fa-pull-left.sc-icon-asset,.fal.fa-pull-left.sc-icon-asset,.far.fa-pull-left.sc-icon-asset,.fas.fa-pull-left.sc-icon-asset{margin-right:.3em}.fa.fa-pull-right.sc-icon-asset,.fab.fa-pull-right.sc-icon-asset,.fal.fa-pull-right.sc-icon-asset,.far.fa-pull-right.sc-icon-asset,.fas.fa-pull-right.sc-icon-asset{margin-left:.3em}.fa-spin.sc-icon-asset{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse.sc-icon-asset{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical.sc-icon-asset{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset,.fa-flip-vertical.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\"}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset{-webkit-transform:scale(-1);transform:scale(-1)}.sc-icon-asset:root .fa-flip-both.sc-icon-asset,.sc-icon-asset:root .fa-flip-horizontal.sc-icon-asset,.sc-icon-asset:root .fa-flip-vertical.sc-icon-asset,.sc-icon-asset:root .fa-rotate-90.sc-icon-asset,.sc-icon-asset:root .fa-rotate-180.sc-icon-asset,.sc-icon-asset:root .fa-rotate-270.sc-icon-asset{-webkit-filter:none;filter:none}.fa-stack.sc-icon-asset{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x.sc-icon-asset,.fa-stack-2x.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x.sc-icon-asset{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x.sc-icon-asset{height:2em;width:2.5em}.fa-inverse.sc-icon-asset{color:#fff}.sr-only.sc-icon-asset{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable.sc-icon-asset:active,.sr-only-focusable.sc-icon-asset:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa.sc-icon-asset .fa-primary.sc-icon-asset{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset,.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-primary.sc-icon-asset{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-secondary.sc-icon-asset{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-primary.sc-icon-asset,.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-secondary.sc-icon-asset{fill:#000}.fad.fa-inverse.sc-icon-asset{color:#fff}icon-asset.sc-icon-asset{vertical-align:middle}svg.sc-icon-asset{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}svg.xxx-small.sc-icon-asset{width:var(--ptc-font-size-xxx-small);height:var(--ptc-font-size-xxx-small)}svg.xx-small.sc-icon-asset{width:var(--ptc-font-size-xx-small);height:var(--ptc-font-size-xx-small)}svg.x-small.sc-icon-asset{width:var(--ptc-font-size-x-small);height:var(--ptc-font-size-x-small)}svg.small.sc-icon-asset{width:var(--ptc-font-size-small);height:var(--ptc-font-size-small)}svg.medium.sc-icon-asset{width:var(--ptc-font-size-medium);height:var(--ptc-font-size-medium)}svg.large.sc-icon-asset{width:var(--ptc-font-size-large);height:var(--ptc-font-size-large)}svg.x-large.sc-icon-asset{width:var(--ptc-font-size-x-large);height:var(--ptc-font-size-x-large)}svg.xx-large.sc-icon-asset{width:var(--ptc-font-size-xx-large);height:var(--ptc-font-size-xx-large)}svg.xxx-large.sc-icon-asset{width:var(--ptc-font-size-xxx-large);height:var(--ptc-font-size-xxx-large)}svg.xxxx-large.sc-icon-asset{width:var(--ptc-font-size-xxxx-large);height:var(--ptc-font-size-xxxx-large)}svg.white.sc-icon-asset{fill:var(--color-white)}svg.black.sc-icon-asset{fill:var(--color-black)}svg.ptc-green.sc-icon-asset{fill:var(--color-green-07)}svg.gray.sc-icon-asset{fill:var(--color-gray-06)}svg.inherit.sc-icon-asset{fill:inherit}";
 
-let IconAsset$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Icon Size
-     */
-    this.size = 'xx-small';
-    /**
-     * Icon Type
-     */
-    this.type = 'regular';
-    /**
-     * Icon Spin Animation (not valid for ptc type)
-     */
-    this.spin = '';
-    /**
-     * Icon Pulse Animation (not valid for ptc type)
-     */
-    this.pulse = '';
-    /**
-     * Icon Color
-     */
-    this.color = 'default';
-    this.regularSprite = getAssetPath('./media/regular.svg');
-    this.solidSprite = getAssetPath('./media/solid.svg');
-    this.brandSprite = getAssetPath('./media/brands.svg');
-    this.ptcSprite = getAssetPath('./media/designer.svg');
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    if (this.type == 'brands') {
-      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.brandSprite}#${this.name}` }))));
-    }
-    else if (this.type == 'solid') {
-      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.solidSprite}#${this.name}` }))));
-    }
-    else if (this.type == 'ptc') {
-      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.ptcSprite}#${this.name}` }))));
-    }
-    else {
-      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.regularSprite}#${this.name}` }))));
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      [this.spin]: true,
-      [this.pulse]: true,
-      [this.color]: true,
-    };
-  }
-  static get assetsDirs() { return ["media"]; }
-  static get style() { return iconAssetCss; }
+let IconAsset$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Icon Size
+     */
+    this.size = 'xx-small';
+    /**
+     * Icon Type
+     */
+    this.type = 'regular';
+    /**
+     * Icon Spin Animation (not valid for ptc type)
+     */
+    this.spin = '';
+    /**
+     * Icon Pulse Animation (not valid for ptc type)
+     */
+    this.pulse = '';
+    /**
+     * Icon Color
+     */
+    this.color = 'default';
+    this.regularSprite = getAssetPath('./media/regular.svg');
+    this.solidSprite = getAssetPath('./media/solid.svg');
+    this.brandSprite = getAssetPath('./media/brands.svg');
+    this.ptcSprite = getAssetPath('./media/designer.svg');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    if (this.type == 'brands') {
+      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.brandSprite}#${this.name}` }))));
+    }
+    else if (this.type == 'solid') {
+      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.solidSprite}#${this.name}` }))));
+    }
+    else if (this.type == 'ptc') {
+      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.ptcSprite}#${this.name}` }))));
+    }
+    else {
+      return (h(Host, null, this.injectedStyle && h("style", null, this.injectedStyle), h("svg", { class: classMap }, h("use", { href: `${this.regularSprite}#${this.name}` }))));
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      [this.spin]: true,
+      [this.pulse]: true,
+      [this.color]: true,
+    };
+  }
+  static get assetsDirs() { return ["media"]; }
+  static get style() { return iconAssetCss; }
 };
 
 const listItemCss = ":host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:var(--color-white);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-xxx-small);line-height:var(--ptc-line-height-densest)}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0}:host(.breadcrumb) li a.item-link{color:var(--color-white);font-weight:var(--ptc-font-weight-bold) !important;font-size:var(--ptc-font-size-xxx-small) !important;line-height:var(--ptc-line-height-densest);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}:host(:not(.flush-before)) li::before{margin-right:2px}:host(.list-footer) li{display:inline-block;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-regular);font-style:normal;font-stretch:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;color:var(--color-white);margin:0 0.5rem}:host(.list-footer) li a{color:var(--color-white-grey);border-bottom:1px solid transparent;display:inline-block;text-decoration:none}:host(.list-footer) li a:hover,:host(.list-footer) li a:focus,:host(.list-footer) li a:active{text-decoration:none;border-bottom:1px solid var(--color-green-06);color:var(--color-white-grey);transition:border var(--ptc-ease-inout) var(--ptc-transition-medium)}:host(.list-footer) li a:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}";
 
-let ListItem$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.listType = 'list-primary';
-    this.linkHref = undefined;
-    this.flushBefore = false;
-    this.linkTarget = '_self';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("li", null, this.linkHref ? (h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {})), h("slot", null))) : (h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: true,
-      ['flush-before']: this.flushBefore ? true : false
-    };
-  }
-  static get style() { return listItemCss; }
+let ListItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.listType = 'list-primary';
+    this.linkHref = undefined;
+    this.flushBefore = false;
+    this.linkTarget = '_self';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("li", null, this.linkHref ? (h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {})), h("slot", null))) : (h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: true,
+      ['flush-before']: this.flushBefore ? true : false
+    };
+  }
+  static get style() { return listItemCss; }
 };
 
 function createCommonjsModule(fn, basedir, module) {
@@ -13197,1195 +13212,1237 @@ var PlayMode;
 
 const lottiePlayerCss = ":host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:transparent;--lottie-player-toolbar-icon-color:#999;--lottie-player-toolbar-icon-hover-color:#222;--lottie-player-toolbar-icon-active-color:#555;--lottie-player-seeker-track-color:#CCC;--lottie-player-seeker-thumb-color:rgba(0, 107, 120, 0.8);display:block;width:100%;height:100%}.main{box-sizing:border-box;display:inline-grid;grid-auto-columns:auto;grid-template-rows:auto;position:relative;height:inherit;width:inherit}.main.controls{grid-template-rows:1fr var(--lottie-player-toolbar-height)}.animation{overflow:hidden;height:calc(1fr - var(--lottie-player-toolbar-height))}.toolbar{display:grid;grid-template-columns:32px 32px 1fr 32px 32px;align-items:center;justify-items:center;background-color:var(--lottie-player-toolbar-background-color)}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);display:flex;background:none;border:0;padding:0;outline:none;height:100%}.toolbar button:hover{fill:var(--lottie-player-toolbar-icon-hover-color)}.toolbar button.active{fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button.disabled svg{display:none}.toolbar a{filter:grayscale(100%);display:flex;transition:filter .5s, opacity 0.5s;opacity:0.4;height:100%;align-items:center}.toolbar a:hover{filter:none;display:flex;opacity:1}.seeker{-webkit-appearance:none;width:95%;outline:none}.seeker::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-appearance:none;margin-top:-5px}.seeker:focus::-webkit-slider-runnable-track{background:#999}.seeker::-moz-range-track{width:100%;height:5px;cursor:pointer;background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.seeker::-ms-fill-lower{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer}.seeker:focus::-ms-fill-lower{background:var(--lottie-player-seeker-track-color)}.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;justify-content:center;height:100%;align-items:center}";
 
-let LottiePlayer$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.error = createEvent(this, "error", 7);
-    this.frame = createEvent(this, "frame", 7);
-    this.complete = createEvent(this, "complete", 7);
-    this.looped = createEvent(this, "looped", 7);
-    this.ready = createEvent(this, "ready", 7);
-    this.loaded = createEvent(this, "loaded", 7);
-    this.playing = createEvent(this, "playing", 7);
-    this.paused = createEvent(this, "paused", 7);
-    this.stopped = createEvent(this, "stopped", 7);
-    this.freezed = createEvent(this, "freezed", 7);
-    /**
-     * Play mode.
-     */
-    this.mode = PlayMode.Normal;
-    /**
-     * Autoplay animation on load
-     */
-    this.autoplay = false;
-    /**
-     * Background color.
-     */
-    this.background = 'transparent';
-    /**
-     * Show controls.
-     */
-    this.controls = false;
-    /**
-     * Direction of animation
-     */
-    this.direction = 1;
-    /**
-     * Whether to play on mouse hover
-     */
-    this.hover = false;
-    /**
-     * Whether to loop animation
-     */
-    this.loop = false;
-    /**
-     * Renderer to use.
-     */
-    this.renderer = 'svg';
-    /**
-     * Animation speed.
-     */
-    this.speed = 1;
-    /**
-     * Player state.
-     */
-    this.currentState = PlayerState.Loading;
-    this.intermission = 1;
-    this._counter = 0;
-  }
-  componentDidLoad() {
-    // Add intersection observer for detecting component being out-of-view.
-    if ('IntersectionObserver' in window) {
-      this._io = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          if (this.currentState === PlayerState.Frozen) {
-            this.play();
-          }
-        }
-        else if (this.currentState === PlayerState.Playing) {
-          this.freeze();
-        }
-      });
-      this._io.observe(this.container);
-    }
-    // Add listener for Visibility API's change event.
-    if (typeof document.hidden !== 'undefined') {
-      document.addEventListener('visibilitychange', () => this.onVisibilityChange());
-    }
-    // Setup lottie player
-    if (this.src) {
-      this.load(this.src);
-    }
-  }
-  load(src) {
-    const options = {
-      container: this.container,
-      loop: false,
-      autoplay: false,
-      renderer: this.renderer,
-      rendererSettings: {
-        scaleMode: 'noScale',
-        clearCanvas: false,
-        progressiveLoad: true,
-        hideOnTransparent: true,
-      },
-    };
-    try {
-      const srcParsed = parseSrc(src);
-      const srcAttrib = typeof srcParsed === 'string' ? 'path' : 'animationData';
-      // Clear previous animation, if any
-      if (this._lottie) {
-        this._lottie.destroy();
-      }
-      // Initialize lottie player and load animation
-      this._lottie = lottie_svg.loadAnimation(Object.assign(Object.assign({}, options), { [srcAttrib]: srcParsed }));
-    }
-    catch (err) {
-      this.currentState = PlayerState.Error;
-      this.error.emit();
-      return;
-    }
-    if (this._lottie) {
-      // Calculate and save the current progress of the animation
-      this._lottie.addEventListener('enterFrame', () => {
-        this.seeker = (this._lottie.currentFrame / this._lottie.totalFrames) * 100;
-        this.frame.emit({
-          frame: this._lottie.currentFrame,
-          seeker: this.seeker
-        });
-      });
-      // Handle animation play complete
-      this._lottie.addEventListener('complete', () => {
-        if (this.currentState !== PlayerState.Playing) {
-          this.complete.emit();
-          return;
-        }
-        if (!this.loop || (this.count && this._counter >= this.count)) {
-          this.complete.emit();
-          return;
-        }
-        if (this.mode === PlayMode.Bounce) {
-          if (this.count) {
-            this._counter += 0.5;
-          }
-          setTimeout(() => {
-            this.looped.emit();
-            if (this.currentState === PlayerState.Playing) {
-              this._lottie.setDirection(this._lottie.playDirection * -1);
-              this._lottie.play();
-            }
-          }, this.intermission);
-        }
-        else {
-          if (this.count) {
-            this._counter += 1;
-          }
-          window.setTimeout(() => {
-            this.looped.emit();
-            if (this.currentState === PlayerState.Playing) {
-              this._lottie.stop();
-              this._lottie.play();
-            }
-          }, this.intermission);
-        }
-      });
-      // Handle lottie-web ready event
-      this._lottie.addEventListener('DOMLoaded', () => {
-        this.ready.emit();
-      });
-      // Handle animation data load complete
-      this._lottie.addEventListener('data_ready', () => {
-        this.loaded.emit();
-      });
-      // Set error state when animation load fail event triggers
-      this._lottie.addEventListener('data_failed', () => {
-        this.currentState = PlayerState.Error;
-        this.error.emit();
-      });
-      // Set handlers to auto play animation on hover if enabled
-      this.container.addEventListener('mouseenter', () => {
-        if (this.hover && this.currentState !== PlayerState.Playing) {
-          this.play();
-        }
-      });
-      this.container.addEventListener('mouseleave', () => {
-        if (this.hover && this.currentState === PlayerState.Playing) {
-          this.stop();
-        }
-      });
-      // Set initial playback speed and direction
-      this.setSpeed(this.speed);
-      this.setDirection(this.direction);
-      // Start playing if autoplay is enabled
-      if (this.autoplay) {
-        this.play();
-      }
-    }
-  }
-  /**
-   * Start playing animation.
-   */
-  async play() {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.play();
-    this.currentState = PlayerState.Playing;
-    this.playing.emit();
-  }
-  /**
-   * Stop playing animation.
-   */
-  async pause() {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.pause();
-    this.currentState = PlayerState.Paused;
-    this.paused.emit();
-  }
-  /**
-   * Stops animation play.
-   */
-  async stop() {
-    if (!this._lottie) {
-      return;
-    }
-    this._counter = 0;
-    this._lottie.stop();
-    this.currentState = PlayerState.Stopped;
-    this.stopped.emit();
-  }
-  /**
-   * Seek to a given frame.
-   */
-  async seek(value) {
-    if (!this._lottie) {
-      return;
-    }
-    // Extract frame number from either number or percentage value
-    const matches = value.toString().match(/^([0-9]+)(%?)$/);
-    if (!matches) {
-      return;
-    }
-    // Calculate and set the frame number
-    const frame = matches[2] === '%'
-      ? this._lottie.totalFrames * Number(matches[1]) / 100
-      : matches[1];
-    // Set seeker to new frame number
-    this.seeker = frame;
-    // Send lottie player to the new frame
-    if (this.currentState === PlayerState.Playing) {
-      this._lottie.goToAndPlay(frame, true);
-    }
-    else {
-      this._lottie.goToAndStop(frame, true);
-      this._lottie.pause();
-    }
-  }
-  /**
-   * Freeze animation play.
-   * This internal state pauses animation and is used to differentiate between
-   * user requested pauses and component instigated pauses.
-   */
-  freeze() {
-    if (!this._lottie) {
-      return;
-    }
-    this.currentState = PlayerState.Frozen;
-    this.freezed.emit();
-  }
-  async getLottie() {
-    return this._lottie;
-  }
-  /**
-   * Sets animation play speed
-   * @param value Playback speed.
-   */
-  async setSpeed(value = 1) {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.setSpeed(value);
-  }
-  /**
-   * Animation play direction.
-   * @param value Direction values.
-  */
-  async setDirection(value) {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.setDirection(value);
-  }
-  /**
-   * Sets the looping of the animation.
-   *
-   * @param value Whether to enable looping. Boolean true enables looping.
-   */
-  async setLooping(value) {
-    if (this._lottie) {
-      this.loop = value;
-      this._lottie.loop = value;
-    }
-  }
-  /**
-   * Toggle playing state.
-   */
-  async togglePlay() {
-    return this.currentState === PlayerState.Playing
-      ? this.pause()
-      : this.play();
-  }
-  /**
-   * Toggles animation looping.
-   */
-  async toggleLooping() {
-    this.setLooping(!this.loop);
-  }
-  renderButtonIcon(isPlaying) {
-    if (isPlaying) {
-      return (h("svg", { width: "24", height: "24" }, h("path", { d: "M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" })));
-    }
-    return (h("svg", { width: "24", height: "24" }, h("path", { d: "M8.016 5.016L18.985 12 8.016 18.984V5.015z" })));
-  }
-  renderControls() {
-    const isPlaying = this.currentState === PlayerState.Playing;
-    const isPaused = this.currentState === PlayerState.Paused;
-    const isStopped = this.currentState === PlayerState.Stopped;
-    return (h("div", { class: 'toolbar' }, h("button", { class: {
-        active: isPlaying || isPaused
-      }, onClick: () => this.togglePlay() }, this.renderButtonIcon(isPlaying)), h("button", { class: {
-        active: isStopped
-      }, onClick: () => this.stop() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M6 6h12v12H6V6z" }))), h("input", { class: "seeker", type: "range", min: "0", step: "1", max: "100", value: this.seeker, onInput: e => this.handleSeekChange(e), onMouseDown: () => { this._prevState = this.currentState; this.freeze(); }, onMouseUp: () => { this._prevState === PlayerState.Playing && this.play(); } }), h("button", { class: {
-        'active': this.loop
-      }, onClick: () => this.toggleLooping() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z" }))), h("a", { href: "https://www.lottiefiles.com/", target: "_blank" }, h("svg", { width: "24", height: "24", viewBox: "0 0 320 320", "fill-rule": "nonzero" }, h("rect", { fill: "#adadad", x: ".5", y: ".5", width: "100%", height: "100%", rx: "26.73" }), h("path", { d: "M251.304 65.44a16.55 16.55 0 0 1 13.927 18.789c-1.333 9.04-9.73 15.292-18.762 13.954-15.992-2.37-39.95 22.534-66.77 73.74-34.24 65.37-66.113 96.517-99.667 94.032-9.102-.674-15.93-8.612-15.258-17.723s8.592-15.96 17.695-15.286c16.57 1.227 40.908-24.737 67.97-76.4 34.46-65.79 66.764-96.157 100.866-91.105z", fill: "#fff" })))));
-  }
-  render() {
-    return (h("div", { class: {
-        main: true,
-        controls: this.controls
-      } }, h("div", { class: "animation", style: {
-        background: this.background
-      }, ref: ref => this.container = ref }, this.currentState === PlayerState.Error ? h("div", { class: "error" }, "\u26A0\uFE0F") : undefined), this.controls ? this.renderControls() : undefined));
-  }
-  /**
-  * Handle visibility change events.
-  */
-  onVisibilityChange() {
-    if (document.hidden === true && this.currentState === PlayerState.Playing) {
-      this.freeze();
-    }
-    else if (this.currentState === PlayerState.Frozen) {
-      this.play();
-    }
-  }
-  /**
-  * Handles click and drag actions on the progress track.
-  */
-  handleSeekChange(e) {
-    if (!this._lottie || isNaN(e.target.value)) {
-      return;
-    }
-    const frame = ((e.target.value / 100) * this._lottie.totalFrames);
-    this.seek(frame);
-  }
-  static get style() { return lottiePlayerCss; }
+let LottiePlayer$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.error = createEvent(this, "error", 7);
+    this.frame = createEvent(this, "frame", 7);
+    this.complete = createEvent(this, "complete", 7);
+    this.looped = createEvent(this, "looped", 7);
+    this.ready = createEvent(this, "ready", 7);
+    this.loaded = createEvent(this, "loaded", 7);
+    this.playing = createEvent(this, "playing", 7);
+    this.paused = createEvent(this, "paused", 7);
+    this.stopped = createEvent(this, "stopped", 7);
+    this.freezed = createEvent(this, "freezed", 7);
+    /**
+     * Play mode.
+     */
+    this.mode = PlayMode.Normal;
+    /**
+     * Autoplay animation on load
+     */
+    this.autoplay = false;
+    /**
+     * Background color.
+     */
+    this.background = 'transparent';
+    /**
+     * Show controls.
+     */
+    this.controls = false;
+    /**
+     * Direction of animation
+     */
+    this.direction = 1;
+    /**
+     * Whether to play on mouse hover
+     */
+    this.hover = false;
+    /**
+     * Whether to loop animation
+     */
+    this.loop = false;
+    /**
+     * Renderer to use.
+     */
+    this.renderer = 'svg';
+    /**
+     * Animation speed.
+     */
+    this.speed = 1;
+    /**
+     * Player state.
+     */
+    this.currentState = PlayerState.Loading;
+    this.intermission = 1;
+    this._counter = 0;
+  }
+  componentDidLoad() {
+    // Add intersection observer for detecting component being out-of-view.
+    if ('IntersectionObserver' in window) {
+      this._io = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          if (this.currentState === PlayerState.Frozen) {
+            this.play();
+          }
+        }
+        else if (this.currentState === PlayerState.Playing) {
+          this.freeze();
+        }
+      });
+      this._io.observe(this.container);
+    }
+    // Add listener for Visibility API's change event.
+    if (typeof document.hidden !== 'undefined') {
+      document.addEventListener('visibilitychange', () => this.onVisibilityChange());
+    }
+    // Setup lottie player
+    if (this.src) {
+      this.load(this.src);
+    }
+  }
+  load(src) {
+    const options = {
+      container: this.container,
+      loop: false,
+      autoplay: false,
+      renderer: this.renderer,
+      rendererSettings: {
+        scaleMode: 'noScale',
+        clearCanvas: false,
+        progressiveLoad: true,
+        hideOnTransparent: true,
+      },
+    };
+    try {
+      const srcParsed = parseSrc(src);
+      const srcAttrib = typeof srcParsed === 'string' ? 'path' : 'animationData';
+      // Clear previous animation, if any
+      if (this._lottie) {
+        this._lottie.destroy();
+      }
+      // Initialize lottie player and load animation
+      this._lottie = lottie_svg.loadAnimation(Object.assign(Object.assign({}, options), { [srcAttrib]: srcParsed }));
+    }
+    catch (err) {
+      this.currentState = PlayerState.Error;
+      this.error.emit();
+      return;
+    }
+    if (this._lottie) {
+      // Calculate and save the current progress of the animation
+      this._lottie.addEventListener('enterFrame', () => {
+        this.seeker = (this._lottie.currentFrame / this._lottie.totalFrames) * 100;
+        this.frame.emit({
+          frame: this._lottie.currentFrame,
+          seeker: this.seeker
+        });
+      });
+      // Handle animation play complete
+      this._lottie.addEventListener('complete', () => {
+        if (this.currentState !== PlayerState.Playing) {
+          this.complete.emit();
+          return;
+        }
+        if (!this.loop || (this.count && this._counter >= this.count)) {
+          this.complete.emit();
+          return;
+        }
+        if (this.mode === PlayMode.Bounce) {
+          if (this.count) {
+            this._counter += 0.5;
+          }
+          setTimeout(() => {
+            this.looped.emit();
+            if (this.currentState === PlayerState.Playing) {
+              this._lottie.setDirection(this._lottie.playDirection * -1);
+              this._lottie.play();
+            }
+          }, this.intermission);
+        }
+        else {
+          if (this.count) {
+            this._counter += 1;
+          }
+          window.setTimeout(() => {
+            this.looped.emit();
+            if (this.currentState === PlayerState.Playing) {
+              this._lottie.stop();
+              this._lottie.play();
+            }
+          }, this.intermission);
+        }
+      });
+      // Handle lottie-web ready event
+      this._lottie.addEventListener('DOMLoaded', () => {
+        this.ready.emit();
+      });
+      // Handle animation data load complete
+      this._lottie.addEventListener('data_ready', () => {
+        this.loaded.emit();
+      });
+      // Set error state when animation load fail event triggers
+      this._lottie.addEventListener('data_failed', () => {
+        this.currentState = PlayerState.Error;
+        this.error.emit();
+      });
+      // Set handlers to auto play animation on hover if enabled
+      this.container.addEventListener('mouseenter', () => {
+        if (this.hover && this.currentState !== PlayerState.Playing) {
+          this.play();
+        }
+      });
+      this.container.addEventListener('mouseleave', () => {
+        if (this.hover && this.currentState === PlayerState.Playing) {
+          this.stop();
+        }
+      });
+      // Set initial playback speed and direction
+      this.setSpeed(this.speed);
+      this.setDirection(this.direction);
+      // Start playing if autoplay is enabled
+      if (this.autoplay) {
+        this.play();
+      }
+    }
+  }
+  /**
+   * Start playing animation.
+   */
+  async play() {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.play();
+    this.currentState = PlayerState.Playing;
+    this.playing.emit();
+  }
+  /**
+   * Stop playing animation.
+   */
+  async pause() {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.pause();
+    this.currentState = PlayerState.Paused;
+    this.paused.emit();
+  }
+  /**
+   * Stops animation play.
+   */
+  async stop() {
+    if (!this._lottie) {
+      return;
+    }
+    this._counter = 0;
+    this._lottie.stop();
+    this.currentState = PlayerState.Stopped;
+    this.stopped.emit();
+  }
+  /**
+   * Seek to a given frame.
+   */
+  async seek(value) {
+    if (!this._lottie) {
+      return;
+    }
+    // Extract frame number from either number or percentage value
+    const matches = value.toString().match(/^([0-9]+)(%?)$/);
+    if (!matches) {
+      return;
+    }
+    // Calculate and set the frame number
+    const frame = matches[2] === '%'
+      ? this._lottie.totalFrames * Number(matches[1]) / 100
+      : matches[1];
+    // Set seeker to new frame number
+    this.seeker = frame;
+    // Send lottie player to the new frame
+    if (this.currentState === PlayerState.Playing) {
+      this._lottie.goToAndPlay(frame, true);
+    }
+    else {
+      this._lottie.goToAndStop(frame, true);
+      this._lottie.pause();
+    }
+  }
+  /**
+   * Freeze animation play.
+   * This internal state pauses animation and is used to differentiate between
+   * user requested pauses and component instigated pauses.
+   */
+  freeze() {
+    if (!this._lottie) {
+      return;
+    }
+    this.currentState = PlayerState.Frozen;
+    this.freezed.emit();
+  }
+  async getLottie() {
+    return this._lottie;
+  }
+  /**
+   * Sets animation play speed
+   * @param value Playback speed.
+   */
+  async setSpeed(value = 1) {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.setSpeed(value);
+  }
+  /**
+   * Animation play direction.
+   * @param value Direction values.
+  */
+  async setDirection(value) {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.setDirection(value);
+  }
+  /**
+   * Sets the looping of the animation.
+   *
+   * @param value Whether to enable looping. Boolean true enables looping.
+   */
+  async setLooping(value) {
+    if (this._lottie) {
+      this.loop = value;
+      this._lottie.loop = value;
+    }
+  }
+  /**
+   * Toggle playing state.
+   */
+  async togglePlay() {
+    return this.currentState === PlayerState.Playing
+      ? this.pause()
+      : this.play();
+  }
+  /**
+   * Toggles animation looping.
+   */
+  async toggleLooping() {
+    this.setLooping(!this.loop);
+  }
+  renderButtonIcon(isPlaying) {
+    if (isPlaying) {
+      return (h("svg", { width: "24", height: "24" }, h("path", { d: "M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" })));
+    }
+    return (h("svg", { width: "24", height: "24" }, h("path", { d: "M8.016 5.016L18.985 12 8.016 18.984V5.015z" })));
+  }
+  renderControls() {
+    const isPlaying = this.currentState === PlayerState.Playing;
+    const isPaused = this.currentState === PlayerState.Paused;
+    const isStopped = this.currentState === PlayerState.Stopped;
+    return (h("div", { class: 'toolbar' }, h("button", { class: {
+        active: isPlaying || isPaused
+      }, onClick: () => this.togglePlay() }, this.renderButtonIcon(isPlaying)), h("button", { class: {
+        active: isStopped
+      }, onClick: () => this.stop() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M6 6h12v12H6V6z" }))), h("input", { class: "seeker", type: "range", min: "0", step: "1", max: "100", value: this.seeker, onInput: e => this.handleSeekChange(e), onMouseDown: () => { this._prevState = this.currentState; this.freeze(); }, onMouseUp: () => { this._prevState === PlayerState.Playing && this.play(); } }), h("button", { class: {
+        'active': this.loop
+      }, onClick: () => this.toggleLooping() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z" }))), h("a", { href: "https://www.lottiefiles.com/", target: "_blank" }, h("svg", { width: "24", height: "24", viewBox: "0 0 320 320", "fill-rule": "nonzero" }, h("rect", { fill: "#adadad", x: ".5", y: ".5", width: "100%", height: "100%", rx: "26.73" }), h("path", { d: "M251.304 65.44a16.55 16.55 0 0 1 13.927 18.789c-1.333 9.04-9.73 15.292-18.762 13.954-15.992-2.37-39.95 22.534-66.77 73.74-34.24 65.37-66.113 96.517-99.667 94.032-9.102-.674-15.93-8.612-15.258-17.723s8.592-15.96 17.695-15.286c16.57 1.227 40.908-24.737 67.97-76.4 34.46-65.79 66.764-96.157 100.866-91.105z", fill: "#fff" })))));
+  }
+  render() {
+    return (h("div", { class: {
+        main: true,
+        controls: this.controls
+      } }, h("div", { class: "animation", style: {
+        background: this.background
+      }, ref: ref => this.container = ref }, this.currentState === PlayerState.Error ? h("div", { class: "error" }, "\u26A0\uFE0F") : undefined), this.controls ? this.renderControls() : undefined));
+  }
+  /**
+  * Handle visibility change events.
+  */
+  onVisibilityChange() {
+    if (document.hidden === true && this.currentState === PlayerState.Playing) {
+      this.freeze();
+    }
+    else if (this.currentState === PlayerState.Frozen) {
+      this.play();
+    }
+  }
+  /**
+  * Handles click and drag actions on the progress track.
+  */
+  handleSeekChange(e) {
+    if (!this._lottie || isNaN(e.target.value)) {
+      return;
+    }
+    const frame = ((e.target.value / 100) * this._lottie.totalFrames);
+    this.seek(frame);
+  }
+  static get style() { return lottiePlayerCss; }
 };
 
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
 
 const myComponentCss = ":host{display:block}";
 
-let MyComponent$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return h("div", null, "Hello, World! I'm ", this.getText());
-  }
-  static get style() { return myComponentCss; }
+let MyComponent$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return h("div", null, "Hello, World! I'm ", this.getText());
+  }
+  static get style() { return myComponentCss; }
 };
 
 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:1px solid var(--color-green-06);box-shadow:var(--ptc-shadow-small);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-03);margin:0 auto;align-items:center;justify-content:space-between}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media only screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:18%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose);text-align:left;color:var(--color-gray-10);text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:var(--ptc-element-spacing-04)}.description{flex-basis:82%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;text-align:left;color:var(--color-gray-10)}a{color:var(--color-blue-07);-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;white-space:nowrap;margin-left:var(--ptc-element-spacing-04)}a:hover{color:var(--color-blue-08)}a:focus{outline:3px solid var(--color-blue-07);outline-offset:0.25rem;border-radius:var(--ptc-border-radius-standard)}a:visited{color:var(--color-blue-09)}@media only screen and (min-width: 768px){.bar-close{padding-right:0px}}@media only screen and (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-loose)}.description{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense)}}";
 
-let PtcAnnouncement$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.close = createEvent(this, "close", 7);
-    /**
-     * bar title
-     */
-    this.barTitle = "";
-    /**
-     * bar description
-     */
-    this.Description = "";
-    /**
-     * Link Url
-     */
-    this.linkUrl = '#';
-    /**
-    * Target
-    */
-    this.target = '_self';
-    this.closeClick = () => {
-      this.visible = false;
-      this.close.emit();
-    };
-  }
-  render() {
-    var _a;
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? h("div", { class: "title" }, this.barTitle) : null, h("div", { class: "description" }, !!this.Description ? h("span", null, this.Description) : null, !!this.linkText ? (h("a", { href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)), h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
-  }
-  getCssClassMap() {
-    return {
-      ['announcement']: true,
-      [this.visible ? 'visible' : '']: true,
-    };
-  }
-  static get style() { return ptcAnnouncementCss; }
+let PtcAnnouncement$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    /**
+     * bar title
+     */
+    this.barTitle = "";
+    /**
+     * bar description
+     */
+    this.Description = "";
+    /**
+     * Link Url
+     */
+    this.linkUrl = '#';
+    /**
+    * Target
+    */
+    this.target = '_self';
+    this.closeClick = () => {
+      this.visible = false;
+      this.close.emit();
+    };
+  }
+  render() {
+    var _a;
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? h("div", { class: "title" }, this.barTitle) : null, h("div", { class: "description" }, !!this.Description ? h("span", null, this.Description) : null, !!this.linkText ? (h("a", { href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)), h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
+  }
+  getCssClassMap() {
+    return {
+      ['announcement']: true,
+      [this.visible ? 'visible' : '']: true,
+    };
+  }
+  static get style() { return ptcAnnouncementCss; }
 };
 
 const ptcBreadcrumbCss = ":host{display:block;margin-top:var(--ptc-layout-spacing-02)}::slotted(*){transform:translate(-2px, -2px)}";
 
-let PtcBreadcrumb$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
-  }
-  getCssClassMap() {
-    return {};
-  }
-  static get style() { return ptcBreadcrumbCss; }
+let PtcBreadcrumb$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {};
+  }
+  static get style() { return ptcBreadcrumbCss; }
 };
 
 const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-gray-10);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard)}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:var(--ptc-line-height-densest)}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-green-07);background-image:linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01))}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-gray-10)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:var(--ptc-element-spacing-01);margin-top:var(--ptc-element-spacing-01);box-shadow:var(--ptc-shadow-large);border:solid 2.5px var(--color-green-08);background-image:linear-gradient(to right, var(--color-green-06), var(--color-green-08))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-green-08), var(--color-green-06));opacity:0;transition:opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);border-radius:2px}.legacy-green:hover{box-shadow:var(--ptc-shadow-x-large)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 768px){.legacy-green span{font-size:var(--ptc-font-size-small);letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard);display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all var(--ptc-ease-inout) var(--ptc-transition-medium);position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{font-family:var(--ptc-font-latin);background-color:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:var(--ptc-font-size-xx-small);font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-loose);list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.nav:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav:hover{background-color:var(--color-gray-12)}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary{padding:var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled{pointer-events:none;border-color:var(--color-gray-03);background:var(--color-gray-02)}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span{color:var(--color-gray-03)}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]){fill:var(--color-gray-03) !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);letter-spacing:normal}.ptc-primary{background:var(--color-gray-10);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-primary:hover{background-color:var(--color-gray-12)}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:var(--color-gray-10);border:2px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}.ptc-secondary:hover{background-color:var(--color-gray-12)}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard)}.ptc-tertiary:hover{background-color:var(--color-gray-02)}.ptc-tertiary:active{background-color:var(--color-gray-03)}.ptc-tertiary span{color:var(--color-gray-10)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.ptc-quaternary{background:var(--color-green-07);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-quaternary:hover{background-color:var(--color-green-08)}.ptc-quaternary:active{background-color:var(--color-green-09)}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}";
 
-let PtcButton$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.clickEvent = createEvent(this, "clickEvent", 7);
-    /**
-     * Disabled button
-     */
-    this.disabled = false;
-    /**
-     * Button type
-     */
-    this.type = 'button';
-    /**
-     * Button theme color
-     */
-    this.color = 'ptc-primary';
-    /**
-     * Icon Animation
-     */
-    this.iconAnimation = '';
-    /**
-     * Icon Position
-     */
-    this.iconPosition = 'icon-right';
-    /**
-     * Link URL
-     */
-    this.linkHref = undefined;
-    /**
-     * link Title
-     */
-    this.linkTitle = undefined;
-    /**
-     * Link target
-     * */
-    this.target = '_self';
-    /**
-     *  Link rel
-     * */
-    this.rel = undefined;
-    /**
-     *  (optional) tab-nav.
-     *  indicates that its element can be focused, and where it participates in sequential keyboard navigation.
-     *  A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
-     */
-    this.tabNav = 0;
-  }
-  clickEventHandler() {
-    this.clickEvent.emit();
-    //console.log('click!');
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const Tag = !!this.linkHref ? 'a' : 'button';
-    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      [this.color]: true,
-      [this.iconAnimation]: true,
-      [this.iconPosition]: true,
-      ['disabled']: this.disabled ? true : false,
-    };
-  }
-  static get style() { return ptcButtonCss; }
+let PtcButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clickEvent = createEvent(this, "clickEvent", 7);
+    /**
+     * Disabled button
+     */
+    this.disabled = false;
+    /**
+     * Button type
+     */
+    this.type = 'button';
+    /**
+     * Button theme color
+     */
+    this.color = 'ptc-primary';
+    /**
+     * Icon Animation
+     */
+    this.iconAnimation = '';
+    /**
+     * Icon Position
+     */
+    this.iconPosition = 'icon-right';
+    /**
+     * Link URL
+     */
+    this.linkHref = undefined;
+    /**
+     * link Title
+     */
+    this.linkTitle = undefined;
+    /**
+     * Link target
+     * */
+    this.target = '_self';
+    /**
+     *  Link rel
+     * */
+    this.rel = undefined;
+    /**
+     *  (optional) tab-nav.
+     *  indicates that its element can be focused, and where it participates in sequential keyboard navigation.
+     *  A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
+     */
+    this.tabNav = 0;
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+    //console.log('click!');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
+      ['disabled']: this.disabled ? true : false,
+    };
+  }
+  static get style() { return ptcButtonCss; }
 };
 
 const ptcCardCss = ":host{display:block}:host(.lottie-card) .card-border{box-shadow:var(--ptc-shadow-small);border:1px solid var(--color-gray-03);border-radius:10px;position:relative;overflow:hidden}:host(.lottie-card) .card-border::after{content:\"\";height:40%;width:4px;position:absolute;top:30%;right:-2px;background-color:var(--color-green-06);z-index:2;display:block}:host(.lottie-card) .card-border:hover{box-shadow:var(--ptc-shadow-x-large)}:host(.lottie-card) .card-border:hover .card-body h3{border-bottom:2px solid var(--color-green-07)}:host(.lottie-card) .card-layout{display:block}@media only screen and (min-width: 768px){:host(.lottie-card) .card-layout{display:flex;flex-flow:nowrap row;justify-content:center}}:host(.lottie-card) .link-wrapper{outline:none;text-decoration:none}:host(.lottie-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.lottie-card) .card-media{flex-basis:40%;border-right:1px solid var(--color-gray-03);display:flex}:host(.lottie-card) .card-body{flex-basis:60%;align-self:center;padding:0 30px 10px}:host(.lottie-card) .card-body h3{display:inline-block;line-height:var(--ptc-line-height-densest);color:var(--color-gray-10);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);border-bottom:2px solid transparent;margin-bottom:var(--ptc-element-spacing-02)}:host(.simple-card) .card-layout{display:block}:host(.simple-card) .link-wrapper{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover .card-body h3::before{width:100%}:host(.simple-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-04)}:host(.simple-card) .card-body h3{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-black);line-height:var(--ptc-line-height-dense);position:relative;margin-bottom:var(--ptc-element-spacing-02);display:inline-block}:host(.simple-card) .card-body h3::before{display:block;position:absolute;content:\"\";width:var(--ptc-element-spacing-07);border-bottom:2px solid var(--color-green-06);bottom:1px;transition:width var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.simple-card) ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-01);transition:margin-left var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .card-border{overflow:hidden;filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 3px 6px);width:100%}:host(.clip-edge-card) .card-border:hover{filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 6px 12px)}:host(.clip-edge-card) .card-layout{display:block}:host(.clip-edge-card) .link-wrapper{outline:none;text-decoration:none}:host(.clip-edge-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.clip-edge-card) .card-media{position:relative;width:100%;height:124px;overflow:hidden;border-radius:var(--ptc-border-radius-standard)}:host(.clip-edge-card) .card-body{transform:translateY(calc((-1) * var(--ptc-element-spacing-04)));overflow:hidden;width:calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);clip-path:var(--ptc-clip-path-bottom-right);background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-04)}:host(.clip-edge-card) .card-body h3{display:inline-block;margin:0px;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);text-decoration:none;border-bottom:2px solid transparent;transition:border-bottom var(--ptc-transition-medium) var(--ptc-ease-inout), margin var(--ptc-transition-medium) var(--ptc-ease-inout);margin:var(--ptc-element-spacing-03) 0 var(--ptc-element-spacing-03) 0}:host(.clip-edge-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-image]){display:block;width:100%;height:100%;transform:scale(1);transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transform-origin:top center}:host(.clip-edge-card) ::slotted([slot=slot-after-heading]){position:absolute;top:var(--ptc-element-spacing-03);left:var(--ptc-element-spacing-04);opacity:1;transform:scale(1);height:44px;transform-origin:bottom center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-before-heading]){display:block;opacity:0;height:24px;transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .link-wrapper:hover .card-body h3{border-bottom:2px solid var(--color-green-06)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:60px;opacity:1}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]){transform:scale(1.1)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){opacity:0;transform:scale(0);height:0}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-before-heading]){opacity:1}:host(.hightlight-card) .card-border{width:100%;border-radius:var(--ptc-border-radius-standard);overflow:hidden}:host(.hightlight-card) .card-border:hover .card-media{transform:scale(1.1)}:host(.hightlight-card) .card-layout{display:block;position:relative}:host(.hightlight-card) .link-wrapper{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-05);opacity:1}:host(.hightlight-card) .card-media{width:100%;height:auto;min-height:450px;position:relative;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}:host(.hightlight-card) .card-body{position:absolute;bottom:0;top:auto;left:0;right:auto;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-07);background-color:var(--color-white);box-sizing:border-box}:host(.hightlight-card) .card-body h3{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-bold);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.hightlight-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-fast) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}.ptc-h3.uppercase{text-transform:uppercase}.ptc-h3.capitalize{text-transform:capitalize}.ptc-h3.lowercase{text-transform:lowercase}.ptc-h3.none{text-transform:none}";
 
-let PtcCard$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Card Type
-     * Specify Card Type, default to simple card
-     */
-    this.cardType = 'custom-card';
-    /**
-     * Card Link URL (Optional)
-     */
-    this.cardHref = undefined;
-    /**
-     * (optional) Link card target
-     * */
-    this.target = '_self';
-    /**
-     *  (optional) Link card rel
-     * */
-    this.rel = undefined;
-    /**
-     * If this card has Image
-     */
-    this.hasImage = false;
-    /**
-     * If this card has Video
-     */
-    this.hasVideo = false;
-    /**
-     * If this card has Lottie Image
-     */
-    this.hasLottie = false;
-    /**
-     * Card heading text transform
-     */
-    this.headingTransform = 'none';
-  }
-  render() {
-    const Tag = !!this.cardHref ? 'a' : 'div';
-    const classMap = this.getCssClassMap();
-    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), this.styles && h("style", null, this.styles), h("div", { class: "card-border", part: "border-wrapper" }, h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {})), this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null, h("div", { class: "card-body", part: "body-wrapper" }, h("slot", { name: "slot-before-heading" }), !!this.heading
-      ? [
-        h("h3", { class: `ptc-h3 ${this.headingTransform}`, part: "card-heading" }, this.heading),
-        h("slot", { name: "slot-after-heading" }),
-      ]
-      : null, h("slot", { name: "slot-description" }), !!this.cardDate ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
-  }
-  getCssClassMap() {
-    return {
-      ['card-layout']: true,
-      ['link-wrapper']: !!this.cardType ? true : false,
-    };
-  }
-  getMediaSlot() {
-    if (this.hasLottie) {
-      return 'slot-lottie';
-    }
-    else if (this.hasVideo) {
-      return 'slot-video';
-    }
-    else if (this.hasImage) {
-      return 'slot-image';
-    }
-    else {
-      return null;
-    }
-  }
-  static get style() { return ptcCardCss; }
+let PtcCard$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Card Type
+     * Specify Card Type, default to simple card
+     */
+    this.cardType = 'custom-card';
+    /**
+     * Card Link URL (Optional)
+     */
+    this.cardHref = undefined;
+    /**
+     * (optional) Link card target
+     * */
+    this.target = '_self';
+    /**
+     *  (optional) Link card rel
+     * */
+    this.rel = undefined;
+    /**
+     * If this card has Image
+     */
+    this.hasImage = false;
+    /**
+     * If this card has Video
+     */
+    this.hasVideo = false;
+    /**
+     * If this card has Lottie Image
+     */
+    this.hasLottie = false;
+    /**
+     * Card heading text transform
+     */
+    this.headingTransform = 'none';
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    const classMap = this.getCssClassMap();
+    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), this.styles && h("style", null, this.styles), h("div", { class: "card-border", part: "border-wrapper" }, h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {})), this.hasImage || this.hasLottie || this.hasVideo ? (h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? h("slot", { name: this.getMediaSlot() }) : null)) : null, h("div", { class: "card-body", part: "body-wrapper" }, h("slot", { name: "slot-before-heading" }), !!this.heading
+      ? [
+        h("h3", { class: `ptc-h3 ${this.headingTransform}`, part: "card-heading" }, this.heading),
+        h("slot", { name: "slot-after-heading" }),
+      ]
+      : null, h("slot", { name: "slot-description" }), !!this.cardDate ? h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" }) : null)))));
+  }
+  getCssClassMap() {
+    return {
+      ['card-layout']: true,
+      ['link-wrapper']: !!this.cardType ? true : false,
+    };
+  }
+  getMediaSlot() {
+    if (this.hasLottie) {
+      return 'slot-lottie';
+    }
+    else if (this.hasVideo) {
+      return 'slot-video';
+    }
+    else if (this.hasImage) {
+      return 'slot-image';
+    }
+    else {
+      return null;
+    }
+  }
+  static get style() { return ptcCardCss; }
 };
 
 const ptcCardBottomCss = ":host{display:block}:host(.card-tall) .ptc-card-bottom-wrapper,:host(.card-wide) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0 var(--ptc-element-spacing-07) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);z-index:2}:host(.card-2up) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0px 24px 24px 16px}:host(.card-playlist){flex:72% 2 1;align-self:center}:host(.mouse-hover-card-bottom) .ptc-card-bottom-wrapper{z-index:5;cursor:pointer}@media only screen and (min-width: 768px){:host(.card-2up) .ptc-card-bottom-wrapper{padding:0 32px 32px 24px}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:20% 2 1;justify-content:flex-end}:host(.card-video-intro) .ptc-card-bottom-wrapper{display:flex;justify-content:flex-end}}@media only screen and (min-width: 1440px){:host(.card-2up) .ptc-card-bottom-wrapper{width:70%}}@media only screen and (min-width: 1980px){:host(.card-2up) .ptc-card-bottom-wrapper{width:60%}}";
 
-let PtcCardBottom$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.hoverEvent = createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = createEvent(this, "leaveEvent", 7);
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.add('mouse-hover');
-      this.el.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.remove('mouse-hover');
-      this.el.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false,
-    };
-  }
-  get el() { return this; }
-  static get style() { return ptcCardBottomCss; }
+let PtcCardBottom$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hoverEvent = createEvent(this, "hoverEvent", 7);
+    this.leaveEvent = createEvent(this, "leaveEvent", 7);
+  }
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.previousElementSibling.classList.add('mouse-hover');
+      this.el.classList.add('mouse-hover-card-bottom');
+    }
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.previousElementSibling.classList.remove('mouse-hover');
+      this.el.classList.remove('mouse-hover-card-bottom');
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false,
+    };
+  }
+  get el() { return this; }
+  static get style() { return ptcCardBottomCss; }
 };
 
 const ptcCardContentCss = ":host{display:block}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}";
 
-let PtcCardContent$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.hoverEvent = createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = createEvent(this, "leaveEvent", 7);
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.add('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.remove('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: !!this.cardType ? true : false,
-    };
-  }
-  get el() { return this; }
-  static get style() { return ptcCardContentCss; }
+let PtcCardContent$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hoverEvent = createEvent(this, "hoverEvent", 7);
+    this.leaveEvent = createEvent(this, "leaveEvent", 7);
+  }
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.add('mouse-hover');
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
+    }
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.remove('mouse-hover');
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: !!this.cardType ? true : false,
+    };
+  }
+  get el() { return this; }
+  static get style() { return ptcCardContentCss; }
 };
 
 const ptcCardPlmCss = ":host{display:block}:host(.card-tall),:host(.card-wide),:host(.card-video),:host(.card-playlist),:host(.card-2up){position:relative}:host(.card-tall) a,:host(.card-wide) a,:host(.card-video) a,:host(.card-playlist) a,:host(.card-2up) a{text-decoration:none !important}:host(.card-tall) a:hover,:host(.card-wide) a:hover,:host(.card-video) a:hover,:host(.card-playlist) a:hover,:host(.card-2up) a:hover{text-decoration:none}:host(.card-tall) a:focus,:host(.card-wide) a:focus,:host(.card-video) a:focus,:host(.card-playlist) a:focus,:host(.card-2up) a:focus{outline:none;text-decoration:none}:host(.card-tall) a:focus-visible,:host(.card-wide) a:focus-visible,:host(.card-video) a:focus-visible,:host(.card-playlist) a:focus-visible,:host(.card-2up) a:focus-visible{outline:none;text-decoration:none}:host(.card-playlist) div,:host(.card-playlist) a{display:flex;text-decoration:none;outline:none}:host(.card-playlist) div:hover,:host(.card-playlist) a:hover{text-decoration:none;outline:none}:host(.card-video-intro){border-bottom-left-radius:var(--ptc-border-radius-large);border-bottom-right-radius:var(--ptc-border-radius-large)}:host(.card-video-intro) div{display:block}:host(.card-video-shadow){box-shadow:var(--ptc-shadow-x-small)}:host(.card-video-p){padding:var(--ptc-element-spacing-05);padding-bottom:var(--ptc-element-spacing-06)}:host(.card-m-right){margin-right:var(--ptc-element-spacing-02)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-02)}@media only screen and (min-width: 768px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-03)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-04)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro) div{display:flex}}";
 
-let PtcCardPlm$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.linkTarget = '_self';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const Tag = !!this.cardLink ? 'a' : 'div';
-    return (h(Host, { class: classMap }, h(Tag, Object.assign({}, (!!this.cardLink ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink ? { target: this.linkTarget } : {}), (!!this.cardLink ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false
-    };
-  }
-  static get style() { return ptcCardPlmCss; }
+let PtcCardPlm$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.linkTarget = '_self';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.cardLink ? 'a' : 'div';
+    return (h(Host, { class: classMap }, h(Tag, Object.assign({}, (!!this.cardLink ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink ? { target: this.linkTarget } : {}), (!!this.cardLink ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false
+    };
+  }
+  static get style() { return ptcCardPlmCss; }
 };
 
 const ptcCheckboxCss = ":host{display:block}:host .ptc-checkbox icon-asset{vertical-align:middle}:host .ptc-checkbox .ptc-checkbox-label{vertical-align:middle;margin-left:0.5rem}:host .ptc-checkbox.checked .unchecked-icon{display:none}:host .ptc-checkbox.checked .checked-icon{display:inline-block}:host .ptc-checkbox.unchecked .unchecked-icon{display:inline-block}:host .ptc-checkbox.unchecked .checked-icon{display:none}";
 
-let PtcCheckbox$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.clickedItem = createEvent(this, "clickedItem", 7);
-    this.checked = 'unchecked';
-    this.handleClick = () => {
-      if (this.checked == 'unchecked') {
-        this.checked = 'checked';
-      }
-      else {
-        this.checked = 'unchecked';
-      }
-    };
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, onClick: this.handleClick }, h("icon-asset", { type: "solid", size: "large", name: "check-square", class: "checked-icon" }), h("icon-asset", { type: "solid", size: "large", name: "square", color: "white", class: "unchecked-icon" }), h("span", { class: "ptc-checkbox-label" }, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-checkbox']: true,
-      [this.checked]: true
-    };
-  }
-  static get style() { return ptcCheckboxCss; }
+let PtcCheckbox$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clickedItem = createEvent(this, "clickedItem", 7);
+    this.checked = 'unchecked';
+    this.handleClick = () => {
+      if (this.checked == 'unchecked') {
+        this.checked = 'checked';
+      }
+      else {
+        this.checked = 'unchecked';
+      }
+    };
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, onClick: this.handleClick }, h("icon-asset", { type: "solid", size: "large", name: "check-square", class: "checked-icon" }), h("icon-asset", { type: "solid", size: "large", name: "square", color: "white", class: "unchecked-icon" }), h("span", { class: "ptc-checkbox-label" }, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-checkbox']: true,
+      [this.checked]: true
+    };
+  }
+  static get style() { return ptcCheckboxCss; }
 };
 
-const ptcContainerCss = ".white{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.24);border-radius:4px;background:#FFFFFF;margin-top:5rem}div{padding:1rem;font-family:Raleway;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0em;text-align:left}";
+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{padding:3rem;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)}";
 
-let PtcContainer$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Theme
-     */
-    this.backgroundColor = 'white';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "white" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-container']: true,
-      [this.backgroundColor]: true
-    };
-  }
-  static get style() { return ptcContainerCss; }
+let PtcContainer$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme
+     */
+    this.backgroundColor = 'white';
+    this.elevation = 'small';
+    this.containerType = 'normal';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.getContainerClass() }, h("div", { class: classMap }, h("slot", null))));
+  }
+  getContainerClass() {
+    switch (this.containerType) {
+      case 'large':
+        return 'ptc-container-lg';
+      case 'none':
+        return undefined;
+      default:
+        return 'ptc-container';
+    }
+  }
+  getCssClassMap() {
+    return {
+      ['content-wrapper']: true,
+      [this.backgroundColor]: true,
+      [this.elevation]: true
+    };
+  }
+  static get style() { return ptcContainerCss; }
 };
 
 const ptcDateCss = ":host{display:block}:host(.small) span{font-size:var(--ptc-font-size-xx-small)}:host(.medium) span{font-size:var(--ptc-font-size-x-small)}:host(.primary-grey){color:var(--color-primary-gray-new)}:host(.white) span{color:var(--color-white)}:host(.date-m-top){margin-top:var(--ptc-element-spacing-01)}";
 
-let PtcDate$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Year
-     */
-    this.year = 1900;
-    /**
-     * Month
-     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
-     */
-    this.month = 0;
-    /**
-     * Day
-     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
-     */
-    this.day = 1;
-    /**
-     * Country
-     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
-     */
-    this.country = 'en-US';
-    /**
-     * Date Font Size
-     */
-    this.dataSize = 'small';
-  }
-  render() {
-    // const newDate = new Date(this.year, this.month, this.day);
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
-  }
-  getCssClassMap() {
-    return {
-      [this.dateColor]: !!this.dateColor ? true : false,
-      [this.dataSize]: !!this.dataSize ? true : false,
-    };
-  }
-  getDate() {
-    if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '/'));
-      return newDate;
-    }
-    else {
-      return new Date(this.year, this.month - 1, this.day);
-    }
-  }
-  static get style() { return ptcDateCss; }
+let PtcDate$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Year
+     */
+    this.year = 1900;
+    /**
+     * Month
+     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
+     */
+    this.month = 0;
+    /**
+     * Day
+     * An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+     */
+    this.day = 1;
+    /**
+     * Country
+     * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+     */
+    this.country = 'en-US';
+    /**
+     * Date Font Size
+     */
+    this.dataSize = 'small';
+  }
+  render() {
+    // const newDate = new Date(this.year, this.month, this.day);
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.dateStyles && h("style", null, this.dateStyles), h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, { year: 'numeric', month: 'short', day: 'numeric' }))));
+  }
+  getCssClassMap() {
+    return {
+      [this.dateColor]: !!this.dateColor ? true : false,
+      [this.dataSize]: !!this.dataSize ? true : false,
+    };
+  }
+  getDate() {
+    if (this.dateString) {
+      let newDate = new Date(this.dateString.replace(/-/g, '/'));
+      return newDate;
+    }
+    else {
+      return new Date(this.year, this.month - 1, this.day);
+    }
+  }
+  static get style() { return ptcDateCss; }
+};
+
+const ptcEllipsisDropdownCss = ".ellipsis-icon{border:1px solid #6E717C;border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block}.ptc-ellipsis-dropdown{position:relative;display:inline-block}.dropdown-container{display:none;margin-top:16px;box-shadow:0px 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:100;background:#FFF;padding:0.8rem 0;right:0;left:auto;min-width:max-content;width:100%}.show .dropdown-container{display:inline-block}";
+
+let PtcEllipsisDropdown$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.dataItems = [];
+    this.isDropdownOpen = false;
+  }
+  dropdownToggle(e) {
+    e.currentTarget.classList.toggle("show");
+  }
+  onItemSelected(e) {
+    this.itemSelected.emit(e);
+  }
+  render() {
+    return (h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, h("div", { class: "ellipsis-icon" }, h("icon-asset", { type: "solid", size: "xxx-small", name: "ellipsis-h" })), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+      return (h("dropdown-item", null, h("a", { href: "#", onClick: (e) => {
+          e.preventDefault();
+          this.onItemSelected(dataItem);
+        } }, dataItem.text)));
+    }))));
+  }
+  get host() { return this; }
+  static get style() { return ptcEllipsisDropdownCss; }
 };
 
 const ptcFilterTagCss = ".bubble{font-family:Raleway;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0em;text-align:left;border:1px solid #9AA6AD;border-radius:999px;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem;background:#FFFFFF}.bubble icon-asset{vertical-align:middle}";
 
-let PtcFilterTag$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Theme
-     */
-    this.theme = 'bubble';
-    /**
-     * Uppercase
-     */
-    this.uppercase = false;
-    /**
-     * Font Size
-     */
-    this.fontSize = 'medium';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("span", { class: "bubble" }, h("slot", null), h("icon-asset", { type: "solid", size: "x-small", name: "times" }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-filter-tag']: true,
-      [this.theme]: true,
-      ['uppercase']: this.uppercase,
-      [this.fontSize]: true,
-    };
-  }
-  static get style() { return ptcFilterTagCss; }
+let PtcFilterTag$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme
+     */
+    this.theme = 'bubble';
+    /**
+     * Uppercase
+     */
+    this.uppercase = false;
+    /**
+     * Font Size
+     */
+    this.fontSize = 'medium';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("span", { class: "bubble" }, h("slot", null), h("icon-asset", { type: "solid", size: "x-small", name: "times" }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-filter-tag']: true,
+      [this.theme]: true,
+      ['uppercase']: this.uppercase,
+      [this.fontSize]: true,
+    };
+  }
+  static get style() { return ptcFilterTagCss; }
 };
 
 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}";
 
-let PtcHero$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-  static get style() { return ptcHeroCss; }
+let PtcHero$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }), this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+  static get style() { return ptcHeroCss; }
 };
 
 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)}}";
 
-let PtcHeroFooterCta$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, 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" }, 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)" })), h("div", { class: "cta-overlay" }), h("div", { class: "ptc-container is-grid has-p-lg" }, h("div", { class: "is-col-8-lg cta-left-padding" }, h("h2", null, this.ctaTitle), h("p", null, this.description)), h("div", { class: "is-col-4-lg cta-section" }, h("slot", { name: "cta" }))))));
-  }
-  static get style() { return ptcHeroFooterCtaCss; }
+let PtcHeroFooterCta$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } }, 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" }, 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)" })), h("div", { class: "cta-overlay" }), h("div", { class: "ptc-container is-grid has-p-lg" }, h("div", { class: "is-col-8-lg cta-left-padding" }, h("h2", null, this.ctaTitle), h("p", null, this.description)), h("div", { class: "is-col-4-lg cta-section" }, h("slot", { name: "cta" }))))));
+  }
+  static get style() { return ptcHeroFooterCtaCss; }
 };
 
 const ptcIconListCss = ":host{display:block;padding-bottom:var(--ptc-element-spacing-03)}:host .ptc-icon-list{display:flex;align-items:center}:host .ptc-icon-list .value-text{font-size:var(--ptc-font-size-small)}:host .ptc-icon-list .ptc-numbered-values{margin-left:var(--ptc-element-spacing-03);font-family:var(--ptc-font-secondary-latin)}:host .ptc-icon-list .ptc-numbered-subtitle{margin:0;font-size:var(--ptc-font-size-medium);font-family:var(--ptc-font-secondary-latin)}@media only screen and (min-width: 992px){:host .ptc-icon-list .ptc-numbered-subtitle{font-size:var(--ptc-font-size-large)}}:host .ptc-icon-list .ptc-content{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);margin:0 0 0 var(--ptc-element-spacing-03);line-height:var(--ptc-line-height-densest)}:host .ptc-icon-list .ptc-content-simple{margin:0 0 0 var(--ptc-element-spacing-03);font-size:var(--ptc-font-size-small);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-dense);letter-spacing:normal;text-align:left;color:var(--color-gray-10);line-height:var(--ptc-line-height-densest)}:host ::slotted(icon-asset){display:flex;align-self:center}:host(.last-item){margin-bottom:var(--ptc-layout-spacing-03)}";
 
-let PtcIconList$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-  * List item type
-  */
-    this.listType = 'simple-icon-list';
-    /**
-   * List value with unit Example: 60%
-   */
-    this.valueWithUnit = '';
-    /**
-   * List value text Example: up to
-   */
-    this.valueText = '';
-    /**
-   * List value with unit Example: Increase in Operator Productivity
-   */
-    this.listContent = '';
-    this.isLastItem = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
-    };
-  }
-  static get style() { return ptcIconListCss; }
+let PtcIconList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+  * List item type
+  */
+    this.listType = 'simple-icon-list';
+    /**
+   * List value with unit Example: 60%
+   */
+    this.valueWithUnit = '';
+    /**
+   * List value text Example: up to
+   */
+    this.valueText = '';
+    /**
+   * List value with unit Example: Increase in Operator Productivity
+   */
+    this.listContent = '';
+    this.isLastItem = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("p", { class: "ptc-content-simple" }, this.listContent, " ")))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listType ? true : false,
+      ['last-item']: this.isLastItem ? true : false
+    };
+  }
+  static get style() { return ptcIconListCss; }
 };
 
-let ResponsiveBgVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-img',
-  interval: 250
-};
-let ResponsivePictureVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-picture',
-  interval: 250
+let ResponsiveBgVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-img',
+  interval: 250
+};
+let ResponsivePictureVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-picture',
+  interval: 250
 };
 
 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-large{border-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}}";
 
-let PtcImg$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Image size for smallest screen
-     * <=767px
-     */
-    this.sizeXs = '510x340';
-    /**
-     * Image size for small screen
-     * >=768px and <=991px
-     */
-    this.sizeSm = '1240x496';
-    /**
-     * Image size for medium screen
-     * >=992px and <=1199px
-     */
-    this.sizeMd = '1366x500';
-    /**
-     * Image solution for large screen
-     * >=1200px
-     */
-    this.sizeLg = '1920x1080';
-    /**
-     * Image type
-     */
-    this.imageType = 'smart-bg';
-    /**
-     * Image border shape
-     */
-    this.borderRadius = '';
-    /**
-     * Lazy loading option
-     */
-    this.loadMode = 'lazy-bg';
-  }
-  /**
-   * 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, 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() {
-    // console.log('componentWillUpdate!');
-    this.addIntersectionObserver();
-    this.setResponsiveBg();
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    // console.log('current breakpoint: ' + currentBreakpoint);
-    // 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');
-            // console.log('loaded');
-            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);
-        console.log('remove test node');
-        // 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 this; }
-  static get style() { return ptcImgCss; }
+let PtcImg$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image type
+     */
+    this.imageType = 'smart-bg';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Lazy loading option
+     */
+    this.loadMode = 'lazy-bg';
+  }
+  /**
+   * 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, 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() {
+    // console.log('componentWillUpdate!');
+    this.addIntersectionObserver();
+    this.setResponsiveBg();
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el || document).querySelectorAll(ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    // console.log('current breakpoint: ' + currentBreakpoint);
+    // 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');
+            // console.log('loaded');
+            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);
+        console.log('remove test node');
+        // 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 this; }
+  static get style() { return ptcImgCss; }
 };
 
 const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-gray-10);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal);outline:none;text-decoration:none}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-ease-inout);border-bottom:2px solid var(--color-green-07);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-07);border-bottom:2px solid var(--color-green-07);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-ease-inout)}.arrow:hover.arrow::after{width:100%}.underline{border-bottom:2px solid var(--color-green-07)}.underline:hover{color:#00890B;border-bottom:2px solid #00890B}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-xx-small)}.medium{font-size:var(--ptc-font-size-x-small)}.large{font-size:var(--ptc-font-size-medium)}.ptc-link.arrow icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-ease-inout);transform:translateY(2px)}.ptc-link.arrow icon-asset svg{fill:var(--color-green-07) !important}.ptc-link.arrow-plm icon-asset{position:absolute;right:-6.75px;transform:translate(100%, 8%)}.ptc-link.arrow-plm svg{fill:var(--color-green-07) !important}.ptc-link:hover.arrow icon-asset{transform:translate(var(--ptc-element-spacing-04), 2px)}.nav-title:focus,.nav-title-link:focus,.primary-nav-link:focus,.secondary-nav-link:focus,.footer-nav-link:focus,.copyright-link:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:var(--ptc-line-height-dense);list-style:none;margin-bottom:var(--ptc-element-spacing-02);text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:var(--color-gray-01);display:inline-block;font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:var(--ptc-line-height-dense);list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-06);position:relative;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.primary-nav-link:hover{border-radius:var(--ptc-border-radius-standard);background-color:var(--color-gray-12);text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest);list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-green-06)}.secondary-nav-link{display:inline-block;background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:var(--ptc-line-height-densest);list-style:none;margin-bottom:var(--ptc-element-spacing-03);text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-ease-inout);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-green-06);border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-ease-inout), color var(--ptc-transition-medium) var(--ptc-ease-inout);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);letter-spacing:var(--ptc-letter-spacing-normal);line-height:var(--ptc-line-height-densest);text-align:left;font-size:var(--ptc-font-size-x-small)}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-green-06);color:var(--color-green-06)}.copyright-link{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-normal);line-height:var(--ptc-line-height-loose);display:inline-block}.arrow-plm{color:var(--color-white);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.arrow-plm:hover{text-decoration-color:var(--color-green-07)}";
 
-let PtcLink$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Disabled link
-     */
-    this.disabled = false;
-    /**
-     * Rxternal link
-     * */
-    this.external = false;
-    /**
-     * Target
-     */
-    this.target = '_self';
-    /**
-     * Theme
-     */
-    this.theme = 'simple';
-    /**
-     * Uppercase
-     */
-    this.uppercase = false;
-    /**
-     * Font Size
-     */
-    this.fontSize = 'medium';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "x-small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-link']: true,
-      [this.theme]: true,
-      ['uppercase']: this.uppercase,
-      ['disabled']: this.disabled,
-      [this.fontSize]: true,
-    };
-  }
-  static get style() { return ptcLinkCss; }
+let PtcLink$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Disabled link
+     */
+    this.disabled = false;
+    /**
+     * Rxternal link
+     * */
+    this.external = false;
+    /**
+     * Target
+     */
+    this.target = '_self';
+    /**
+     * Theme
+     */
+    this.theme = 'simple';
+    /**
+     * Uppercase
+     */
+    this.uppercase = false;
+    /**
+     * Font Size
+     */
+    this.fontSize = 'medium';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "x-small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '', h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-link']: true,
+      [this.theme]: true,
+      ['uppercase']: this.uppercase,
+      ['disabled']: this.disabled,
+      [this.fontSize]: true,
+    };
+  }
+  static get style() { return ptcLinkCss; }
 };
 
 const ptcListCss = ":host{display:block}:host(.list-primary) li{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-normal);letter-spacing:var(--ptc-letter-spacing-normal);list-style:none}:host(.list-primary) li:not(:last-child){margin-bottom:0.625rem}:host(.list-primary) li a{color:var(--color-white);outline:none;text-decoration:none;font-family:Rajdhani;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-normal);text-transform:uppercase;letter-spacing:var(--ptc-letter-spacing-normal)}:host(.list-primary) li a:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-green-07)}";
 
-let PtcList$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.listType = 'list-primary';
-    this.listItems = [];
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const listItems = this.listItems;
-    //console.log(this.listItems.length);
-    if (!listItems || listItems.length === 0) {
-      return null;
-    }
-    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
-      h("li", null, listItem);
-    }))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listItems ? true : false,
-    };
-  }
-  static get style() { return ptcListCss; }
+let PtcList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.listType = 'list-primary';
+    this.listItems = [];
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const listItems = this.listItems;
+    //console.log(this.listItems.length);
+    if (!listItems || listItems.length === 0) {
+      return null;
+    }
+    return (h(Host, { class: classMap }, h("ul", null, listItems.map(listItem => {
+      h("li", null, listItem);
+    }))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listItems ? true : false,
+    };
+  }
+  static get style() { return ptcListCss; }
 };
 
 const ptcLottieCss = ":host{display:block;width:100%;height:auto}";
 
-let PtcLottie$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Animation speed
-     */
-    this.speed = 1;
-  }
-  render() {
-    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
-  }
-  static get style() { return ptcLottieCss; }
+let PtcLottie$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Animation speed
+     */
+    this.speed = 1;
+  }
+  render() {
+    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
+  }
+  static get style() { return ptcLottieCss; }
 };
 
 const ptcMinimizedFooterCss = ":host{box-shadow:var(--ptc-shadow-medium);color:var(--color-white);position:relative;overflow:hidden;position:relative;z-index:1000;padding:0;height:60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--color-gray-10)}.min-footer-nav-list{margin:0;padding:0;list-style:none}.min-footer-copyright-wrapper{text-align:center;position:relative;z-index:20}.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0;display:flex;flex-direction:row}@media screen-sm{.min-footer-copyright-wrapper .min-footer-copyright-list{padding:var(--ptc-element-spacing-04) 0}}";
 
-let PtcMinimizedFooter$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
-  }
-  static get style() { return ptcMinimizedFooterCss; }
+let PtcMinimizedFooter$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: "ptc-min-footer mini-footer" }, h("div", { class: "min-footer-copyright-wrapper" }, h("ul", { class: "min-footer-nav-list min-footer-copyright-list" }, h("slot", null)))));
+  }
+  static get style() { return ptcMinimizedFooterCss; }
 };
 
 const ptcMinimizedHeaderCss = ":host{display:block}.minimized-header .header{overflow:hidden;height:48px;background-color:var(--color-gray-10);display:flex;align-items:center;justify-content:center}.minimized-header .header a{float:left;color:var(--color-black);text-align:center;padding:0px 0;text-decoration:none;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);border-radius:var(--ptc-border-radius-standard)}.minimized-header .header a.mini-navbar-logo{font-size:var(--ptc-font-size-large);font-weight:var(--ptc-font-weight-bold)}.minimized-header .header a.mini-navbar-logo img{width:65px;vertical-align:middle;border:0;height:auto}.mini-navbar-logo{outline:3px solid transparent}.mini-navbar-logo:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}@media screen-xs{.minimized-header .header a{float:none;display:block;text-align:left}}";
 
-let PtcMinimizedHeader$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.linkUrl = '#';
-    this.imgSrc = '';
-    this.imgAlt = 'PTC';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
-  }
-  static get style() { return ptcMinimizedHeaderCss; }
+let PtcMinimizedHeader$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.linkUrl = '#';
+    this.imgSrc = '';
+    this.imgAlt = 'PTC';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "minimized-header" }, h("div", { class: "header" }, h("div", { class: "temp-container" }, h("a", { class: "mini-navbar-logo", href: this.linkUrl }, h("img", { src: this.imgSrc, alt: this.imgAlt })))))));
+  }
+  static get style() { return ptcMinimizedHeaderCss; }
 };
 
 var mobileSelect = createCommonjsModule(function (module, exports) {
@@ -15104,1154 +15161,1205 @@ var mobileSelect = createCommonjsModule(function (module, exports) {
 
 const ptcMobileSelectCss = ".mobileSelect{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.mobileSelect *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mobileSelect .grayLayer{position:fixed;top:0;left:0;bottom:0;right:0;background:#eee;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.mobileSelect .content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.mobileSelect .content .fixWidth{width:90%;margin:0 auto;position:relative}.mobileSelect .content .fixWidth:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .btnBar{border-bottom:1px solid #DCDCDC;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0}.mobileSelect .content .btnBar .cancel{left:0;color:#666}.mobileSelect .content .btnBar .ensure{right:0;color:#1e83d3}.mobileSelect .content .btnBar .title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .panel .wheels{width:100%;height:200px;overflow:hidden}.mobileSelect .content .panel .wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.mobileSelect .content .panel .wheel .selectContainer{display:block;text-align:center;-webkit-transition:-webkit-transform 0.18s ease-out;transition:-webkit-transform 0.18s ease-out;transition:transform 0.18s ease-out;transition:transform 0.18s ease-out, -webkit-transform 0.18s ease-out}.mobileSelect .content .panel .wheel .selectContainer li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel .selectLine{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #DCDCDC;border-bottom:1px solid #DCDCDC}.mobileSelect .content .panel .shadowMask{position:absolute;top:0;width:100%;height:200px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));background:-webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);background:linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);opacity:0.9;pointer-events:none}.mobileSelect-show{opacity:1;z-index:10000;visibility:visible}.mobileSelect-show .content{bottom:0}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:var(--ptc-element-spacing-03);width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);color:var(--color-white);height:18px}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px);width:125px}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
 
-let PtcMobileSelect$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Selected Id
-     * - initialize the id(string) of default wheel
-     */
-    this.selectedId = '';
-    /**
-     * Confirm Text
-     * - translation goes here
-     */
-    this.ensureBtnText = 'Confirm';
-    /**
-     * Cancel Text
-     * - translation goes here
-     */
-    this.cancelBtnText = 'Cancel';
-    /**
-     * Mobile select list title (Optional)
-     */
-    this.listTitle = undefined;
-    /**
-     * link url
-     */
-    this.linkUrl = undefined;
-  }
-  render() {
-    return (h("div", { class: "mobile-select-wrapper" }, h("div", { id: this.triggerName }, this.selectedText, h("icon-asset", { "injected-style": "svg.sc-icon-asset{transform:translateX(10px);}", type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    new mobileSelect({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (this.linkUrl !== undefined) {
-          window.location.href = this.linkUrl + '/' + data[0].id;
-        }
-        else {
-          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
-        }
-      }.bind(this),
-    });
-  }
-  static get style() { return ptcMobileSelectCss; }
-};
-
+let PtcMobileSelect$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Selected Id
+     * - initialize the id(string) of default wheel
+     */
+    this.selectedId = '';
+    /**
+     * Confirm Text
+     * - translation goes here
+     */
+    this.ensureBtnText = 'Confirm';
+    /**
+     * Cancel Text
+     * - translation goes here
+     */
+    this.cancelBtnText = 'Cancel';
+    /**
+     * Mobile select list title (Optional)
+     */
+    this.listTitle = undefined;
+    /**
+     * link url
+     */
+    this.linkUrl = undefined;
+  }
+  render() {
+    return (h("div", { class: "mobile-select-wrapper" }, h("div", { id: this.triggerName }, this.selectedText, h("icon-asset", { "injected-style": "svg.sc-icon-asset{transform:translateX(10px);}", type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    new mobileSelect({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (this.linkUrl !== undefined) {
+          window.location.href = this.linkUrl + '/' + data[0].id;
+        }
+        else {
+          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
+        }
+      }.bind(this),
+    });
+  }
+  static get style() { return ptcMobileSelectCss; }
+};
+
 const ptcModalCss = ":host{display:block}.wrapper{position:fixed;width:100vw;height:100%;top:0;left:0;z-index:3000;display:none}.wrapper .modal-popup{margin:7.5rem auto 1rem;background-color:var(--color-white);box-shadow:var(--ptc-shadow-large);max-width:22.5625rem;width:80%;display:flex;flex-direction:column;align-items:flex-end;align-content:flex-end;z-index:3020;transform:translateY(-100%)}@media only screen and (min-width: 992px){.wrapper .modal-popup{max-width:29.125rem}}.wrapper .modal-popup.md{max-width:44.125rem}.wrapper .modal-popup.lg{max-width:56.25rem}.wrapper .modal-popup.xl{max-width:64.0625rem}.wrapper .modal-popup .modal-body{width:100%}.wrapper .modal-popup .modal-body iframe{opacity:0;overflow:hidden;width:100%;border:0;transition:opacity var(--ptc-ease-inout) var(--ptc-transition-medium)}.wrapper .modal-popup .modal-body iframe.ready{opacity:1}.wrapper .modal-popup .modal-body.frame{overflow:hidden}.wrapper .modal-popup .modal-body.html{overflow:hidden}.wrapper .modal-popup .close{margin-right:var(--ptc-element-spacing-03);margin-top:var(--ptc-element-spacing-03)}.wrapper.show{display:flex;align-items:flex-start}.wrapper.show .modal-popup{transform:translateY(0)}.overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:3010;display:block;background-color:rgba(0, 0, 0, 0.6)}";
 
-let PtcModal$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.closed = createEvent(this, "closed", 7);
-    this.opened = createEvent(this, "opened", 7);
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.size = 'sm';
-    /**
-     * Set whether or not to display modal
-     */
-    this.show = false;
-    /**
-     * Sets if popup should overlay
-     */
-    this.overlay = true;
-    /**
-     * Sets if popup should close if click on outside
-     */
-    this.closeOnBlur = false;
-  }
-  fireOnClosed(modal) {
-    this.closed.emit(modal);
-  }
-  fireOnOpened(modal) {
-    this.opened.emit(modal);
-  }
-  componentWillLoad() {
-    let body = document.querySelector('body');
-    this.bodyOverflowSetting = {
-      //overflow: body.style['overflow'],
-      overflowY: body.style['overflowY'],
-      overflowX: body.style['overflowX'],
-    };
-  }
-  componentWillRender() {
-    let body = document.querySelector('body');
-    if (body) {
-      if (this.show) {
-        //body.style['overflow'] = 'hidden';
-        body.style['overflowY'] = 'scroll';
-        body.style['overflowX'] = 'hidden';
-      }
-      else {
-        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
-        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
-        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
-      }
-    }
-  }
-  componentDidLoad() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-  }
-  componentDidUpdate() {
-    if (this.show) {
-      this.fireOnOpened(this);
-    }
-    else {
-      this.fireOnClosed(this);
-    }
-  }
-  resizeIframe(e) {
-    let iFrame = e.target;
-    setTimeout(() => {
-      try {
-        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
-      }
-      catch (error) {
-        console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
-      }
-      iFrame.classList.add('ready');
-    }, 50);
-  }
-  close() {
-    this.show = false;
-  }
-  render() {
-    let content;
-    let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    if (this.iframeUrl) {
-      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
-    }
-    else {
-      content = (h("slot", null));
-    }
-    if (this.overlay) {
-      if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
-      }
-      else {
-        overlay = h("div", { class: "overlay" });
-      }
-    }
-    return (h(Host, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"}` }, overlay, h("div", { class: `modal-popup ${this.size} ${type}` }, h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => {
-        e.preventDefault();
-        this.close();
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))), h("div", { class: "modal-body" }, content)))));
-  }
-  get el() { return this; }
-  static get style() { return ptcModalCss; }
+let PtcModal$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closed = createEvent(this, "closed", 7);
+    this.opened = createEvent(this, "opened", 7);
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.size = 'sm';
+    /**
+     * Set whether or not to display modal
+     */
+    this.show = false;
+    /**
+     * Sets if popup should overlay
+     */
+    this.overlay = true;
+    /**
+     * Sets if popup should close if click on outside
+     */
+    this.closeOnBlur = false;
+  }
+  fireOnClosed(modal) {
+    this.closed.emit(modal);
+  }
+  fireOnOpened(modal) {
+    this.opened.emit(modal);
+  }
+  componentWillLoad() {
+    let body = document.querySelector('body');
+    this.bodyOverflowSetting = {
+      //overflow: body.style['overflow'],
+      overflowY: body.style['overflowY'],
+      overflowX: body.style['overflowX'],
+    };
+  }
+  componentWillRender() {
+    let body = document.querySelector('body');
+    if (body) {
+      if (this.show) {
+        //body.style['overflow'] = 'hidden';
+        body.style['overflowY'] = 'scroll';
+        body.style['overflowX'] = 'hidden';
+      }
+      else {
+        //body.style['overflow'] = this.bodyOverflowSetting.overflow;
+        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
+        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+      }
+    }
+  }
+  componentDidLoad() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+  }
+  componentDidUpdate() {
+    if (this.show) {
+      this.fireOnOpened(this);
+    }
+    else {
+      this.fireOnClosed(this);
+    }
+  }
+  resizeIframe(e) {
+    let iFrame = e.target;
+    setTimeout(() => {
+      try {
+        iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
+      }
+      catch (error) {
+        console.log(error);
+        iFrame.height = '616px'; //default
+        iFrame.removeAttribute('scrolling');
+      }
+      iFrame.classList.add('ready');
+    }, 50);
+  }
+  close() {
+    this.show = false;
+  }
+  render() {
+    let content;
+    let overlay;
+    let type = this.iframeUrl ? 'frame' : 'html';
+    if (this.iframeUrl) {
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
+    }
+    else {
+      content = (h("slot", null));
+    }
+    if (this.overlay) {
+      if (this.closeOnBlur) {
+        overlay = h("div", { class: "overlay", onClick: (_) => this.close() });
+      }
+      else {
+        overlay = h("div", { class: "overlay" });
+      }
+    }
+    return (h(Host, null, h("div", { class: `wrapper ${this.show ? "show" : "hide"}` }, overlay, h("div", { class: `modal-popup ${this.size} ${type}` }, h("div", { class: "close" }, h("a", { href: "#", onClick: (e) => {
+        e.preventDefault();
+        this.close();
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { d: "M1 1L13 13", stroke: "black" }), h("path", { d: "M13 1L1 13", stroke: "black" })))), h("div", { class: "modal-body" }, content)))));
+  }
+  get el() { return this; }
+  static get style() { return ptcModalCss; }
 };
 
 const ptcNavCss = ":host{display:block}.nav-style{background-color:var(--color-gray-11);display:block}@media only screen and (min-width: 992px){.nav-style{display:grid;grid-template-columns:auto fit-content(76px);grid-template-rows:fit-content(22px) 1fr;grid-template-areas:\"secondary secondary\" \"primary language\"}.primary-nav{grid-area:primary}.secondary-nav{grid-area:secondary}.language-nav{grid-area:language}}";
 
-let PtcNav$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return (h(Host, null, h("nav", { class: "nav-style" }, h("div", { class: "primary-nav", part: "primary-nav-part" }, h("slot", { name: "primary-nav-content" })), h("div", { class: "secondary-nav", part: "secondary-nav-part" }, h("slot", { name: "secondary-nav-content" })), h("div", { class: "language-nav", part: "language-nav-part" }, h("slot", { name: "language-nav-content" })))));
-  }
-  static get style() { return ptcNavCss; }
+let PtcNav$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("nav", { class: "nav-style" }, h("div", { class: "primary-nav", part: "primary-nav-part" }, h("slot", { name: "primary-nav-content" })), h("div", { class: "secondary-nav", part: "secondary-nav-part" }, h("slot", { name: "secondary-nav-content" })), h("div", { class: "language-nav", part: "language-nav-part" }, h("slot", { name: "language-nav-content" })))));
+  }
+  static get style() { return ptcNavCss; }
 };
 
 const ptcNavItemCss = ":host{display:block;width:100%}@media only screen and (min-width: 992px){:host{width:auto}}:host([depth=\"2\"]) a{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);margin-bottom:var(--ptc-element-spacing-03);padding-left:50px}@media only screen and (min-width: 992px){:host([depth=\"2\"]) a{padding-left:0px}}:host([depth=\"1\"]) a{font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);padding:20px 25px}:host([nav-type=secondary-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}:host([nav-type=language-nav]) a{font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-thin)}@media only screen and (min-width: 992px){.primary-nav~.ptc-nav-children{position:absolute;left:0}.primary-nav~.ptc-nav-children ::slotted(.nav-tab){background-color:var(--color-gray-11);display:flex;width:100vw}.language-nav~.ptc-nav-children{position:absolute;background-color:var(--color-gray-11)}}a[aria-expanded=true]~.ptc-nav-children{padding-top:var(--ptc-element-spacing-04);max-height:2000px}@media only screen and (min-width: 992px){a[aria-expanded=true]~.ptc-nav-children{padding-top:0}}.ptc-nav-children{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-medium) var(--ptc-ease-inout), padding-top var(--ptc-transition-medium) var(--ptc-ease-inout)}a{color:var(--color-white);text-transform:uppercase;display:block;outline:none;text-decoration:none}";
 
-let PtcNavItem$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.menuItemToggled = createEvent(this, "menuItemToggled", 7);
-    /**
-     * Link URL
-     */
-    this.url = undefined;
-    /**
-     * Nav Description
-     */
-    this.label = '';
-    /**
-     * If the current nav item is expanded
-     */
-    this.ariaExpanded = false;
-    /**
-     * Depth of the current nav item
-     */
-    this.depth = 0;
-    /**
-     * If the current nav item has children nav items
-     */
-    this.hasChildren = false;
-    /**
-     * If the parent nav item of the current one is expanded
-     */
-    this.parentExpanded = false;
-    /**
-     * Nav Item Type
-     */
-    this.navType = undefined;
-  }
-  /**
-   * Watch
-   */
-  expandedHandler(newValue) {
-    const children = Array.prototype.slice.call(this.el.children);
-    children.forEach(child => {
-      child.parentExpanded = newValue;
-    });
-    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
-  }
-  /**
-   * Event Listener
-   */
-  handleClick(e) {
-    if (this.hasChildren) {
-      e.preventDefault();
-      this.ariaExpanded = !this.ariaExpanded;
-    }
-  }
-  handleResize(ev) {
-    console.log('the body was scrolled', ev);
-  }
-  /**
-   * Lifecycle method
-   */
-  componentWillRender() {
-    this.hasChildren = !!this.el.hasChildNodes();
-    let parentMenu = this.el.closest('ptc-nav-item');
-    let nextParentMenu;
-    this.depth = 0;
-    while (parentMenu) {
-      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
-      if (nextParentMenu === parentMenu) {
-        break;
-      }
-      else {
-        parentMenu = nextParentMenu;
-        this.depth = this.depth + 1;
-      }
-    }
-  }
-  render() {
-    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
-    return (h(Host, { role: "none" }, h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, h("span", null, this.label)), this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, h("slot", null)))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "ariaExpanded": ["expandedHandler"]
-  }; }
-  static get style() { return ptcNavItemCss; }
+let PtcNavItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.menuItemToggled = createEvent(this, "menuItemToggled", 7);
+    /**
+     * Link URL
+     */
+    this.url = undefined;
+    /**
+     * Nav Description
+     */
+    this.label = '';
+    /**
+     * If the current nav item is expanded
+     */
+    this.ariaExpanded = false;
+    /**
+     * Depth of the current nav item
+     */
+    this.depth = 0;
+    /**
+     * If the current nav item has children nav items
+     */
+    this.hasChildren = false;
+    /**
+     * If the parent nav item of the current one is expanded
+     */
+    this.parentExpanded = false;
+    /**
+     * Nav Item Type
+     */
+    this.navType = undefined;
+  }
+  /**
+   * Watch
+   */
+  expandedHandler(newValue) {
+    const children = Array.prototype.slice.call(this.el.children);
+    children.forEach(child => {
+      child.parentExpanded = newValue;
+    });
+    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
+  }
+  /**
+   * Event Listener
+   */
+  handleClick(e) {
+    if (this.hasChildren) {
+      e.preventDefault();
+      this.ariaExpanded = !this.ariaExpanded;
+    }
+  }
+  handleResize(ev) {
+    console.log('the body was scrolled', ev);
+  }
+  /**
+   * Lifecycle method
+   */
+  componentWillRender() {
+    this.hasChildren = !!this.el.hasChildNodes();
+    let parentMenu = this.el.closest('ptc-nav-item');
+    let nextParentMenu;
+    this.depth = 0;
+    while (parentMenu) {
+      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
+      if (nextParentMenu === parentMenu) {
+        break;
+      }
+      else {
+        parentMenu = nextParentMenu;
+        this.depth = this.depth + 1;
+      }
+    }
+  }
+  render() {
+    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
+    return (h(Host, { role: "none" }, h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType }, h("span", null, this.label)), this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "ariaExpanded": ["expandedHandler"]
+  }; }
+  static get style() { return ptcNavItemCss; }
 };
 
 const ptcOverlayCss = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%}:host(.blue){background:linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, var(--color-blue-07) 100%)}:host(.red){background:linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, var(--color-red-07) 100%)}:host(.orange){background:linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, var(--color-orange-07) 100%)}:host(.green){background:linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, var(--color-green-07) 100%)}:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}@media only screen and (min-width: 768px){:host(.black-1){background:linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, var(--color-gray-12) 100%)}:host(.black-2){background:linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, var(--color-gray-12) 100%)}}:host(.black-3){background:linear-gradient(180deg, var(--color-gray-12) 0%, rgba(32, 38, 42, 0.55) 100%)}:host(.slate-grey){background:linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, var(--color-gray-07) 100%)}:host(.radius-standard){border-radius:var(--ptc-border-radius-standard)}:host(.radius-large){border-radius:var(--ptc-border-radius-large)}:host(.z-index-auto){z-index:auto}:host(.z-index-n-1){z-index:-1}:host(.z-index-n-2){z-index:-2}:host(.z-index-p-1){z-index:1}:host(.z-index-p-2){z-index:2}";
 
-let PtcOverlay$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Overlay z-index
-     */
-    this.overlayZIndex = 'z-index-auto';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return h(Host, { class: classMap });
-  }
-  getCssClassMap() {
-    return {
-      [this.filterColor]: !!this.filterColor ? true : false,
-      [this.borderRadius]: !!this.borderRadius ? true : false,
-      [this.overlayZIndex]: true
-    };
-  }
-  static get style() { return ptcOverlayCss; }
+let PtcOverlay$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
+  }
+  static get style() { return ptcOverlayCss; }
 };
 
 const ptcParaCss = ":host{z-index:1}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}";
 
-let PtcPara$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Paragraph font size
-     **/
-    this.fontSize = "x-small";
-    /**
-     * Paragraph font weight
-     **/
-    this.fontWeight = 'w-4';
-    /**
-     * Paragraph Style
-     **/
-    this.paraStyle = 'default';
-    /**
-     * Paragraph Color
-     */
-    this.paraColor = 'primary-grey';
-    /**
-     * line height
-     */
-    this.paraLineH = 'line-height-normal';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h("p", { class: classMap, part: "part-para" }, h("slot", null)));
-  }
-  getCssClassMap() {
-    return {
-      [this.fontSize]: true,
-      [this.fontWeight]: true,
-      [this.paraStyle]: true,
-      [this.paraMargin]: !!this.paraMargin ? true : false,
-      [this.paraColor]: true,
-      [this.paraLineH]: true
-    };
-  }
-  static get style() { return ptcParaCss; }
+let PtcPara$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Paragraph font size
+     **/
+    this.fontSize = "x-small";
+    /**
+     * Paragraph font weight
+     **/
+    this.fontWeight = 'w-4';
+    /**
+     * Paragraph Style
+     **/
+    this.paraStyle = 'default';
+    /**
+     * Paragraph Color
+     */
+    this.paraColor = 'primary-grey';
+    /**
+     * line height
+     */
+    this.paraLineH = 'line-height-normal';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h("p", { class: classMap, part: "part-para" }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.fontSize]: true,
+      [this.fontWeight]: true,
+      [this.paraStyle]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true
+    };
+  }
+  static get style() { return ptcParaCss; }
 };
 
 const ptcPictureCss = ":host{display:block;overflow:hidden}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
 
-let PtcPicture$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Image alt
-     */
-    this.alt = "image";
-    /**
-     * Image size for smallest screen
-     * <=767px
-     */
-    this.sizeXs = '510x340';
-    /**
-     * Image size for small screen
-     * >=768px and <=991px
-     */
-    this.sizeSm = '1240x496';
-    /**
-     * Image size for medium screen
-     * >=992px and <=1199px
-     */
-    this.sizeMd = '1366x500';
-    /**
-     * Image solution for large screen
-     * >=1200px
-     */
-    this.sizeLg = '1920x1080';
-    /**
-     * Image Position
-     */
-    this.imagePosition = 'static';
-    /**
-     * Object Fit
-     * Default: cover
-     */
-    this.objectFit = 'cover';
-    /**
-     * Stretch height to 100%?
-     */
-    this.isFullHeight = false;
-    /**
-     * Stretch width to 100%?
-     */
-    this.isFullWidth = false;
-    /**
-     * (optional) Image alignment
-     **/
-    this.imageAlignment = 'left';
-  }
-  WindowResize() {
-    this.addIntersectionObserver();
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  //lazy-loading
-  addIntersectionObserver() {
-    if (!this.src) {
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
-            image.src = this.setResponsiveBg();
-            console.log('loaded');
-            lazyLoadImages.unobserve(image);
-          }
-        });
-      });
-      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
-    }
-    else {
-      // fall back to setTimeout for Safari and IE
-      setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
-        image.src = this.setResponsiveBg();
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      if (elData !== null) {
-        // console.log('img src= ' + elData);
-        return elData;
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const classMapHost = this.getCssClassMapHost();
-    return (h(Host, { class: classMapHost }, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), h("slot", null)));
-  }
-  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 = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsivePictureVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        console.log('remove test node');
-        // 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';
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.borderRadius]: this.borderRadius ? true : false,
-      [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true
-    };
-  }
-  getCssClassMapHost() {
-    return {
-      [this.imagePosition]: true,
-      [this.imageAlignment]: true
-    };
-  }
-  get el() { return this; }
-  static get style() { return ptcPictureCss; }
+let PtcPicture$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Image alt
+     */
+    this.alt = "image";
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image Position
+     */
+    this.imagePosition = 'static';
+    /**
+     * Object Fit
+     * Default: cover
+     */
+    this.objectFit = 'cover';
+    /**
+     * Stretch height to 100%?
+     */
+    this.isFullHeight = false;
+    /**
+     * Stretch width to 100%?
+     */
+    this.isFullWidth = false;
+    /**
+     * (optional) Image alignment
+     **/
+    this.imageAlignment = 'left';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        // console.log('img src= ' + elData);
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const classMapHost = this.getCssClassMapHost();
+    return (h(Host, { class: classMapHost }, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), h("slot", null)));
+  }
+  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 = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // 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';
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.borderRadius]: this.borderRadius ? true : false,
+      [this.objectFit]: true,
+      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
+      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true
+    };
+  }
+  getCssClassMapHost() {
+    return {
+      [this.imagePosition]: true,
+      [this.imageAlignment]: true
+    };
+  }
+  get el() { return this; }
+  static get style() { return ptcPictureCss; }
 };
 
 const ptcPreviousUrlCss = ":host{display:block;margin-top:var(--ptc-element-spacing-03)}.back-to-videos{display:inline-block;font-family:var(--ptc-font-latin);font-style:normal;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-dense)}.back-to-videos:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}::slotted(*){transform:translate(-2px, -2px)}.backarrow:hover+.back-to-videos{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}";
 
-let PtcPreviousUrl$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    return (h(Host, null, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
-  }
-  static get style() { return ptcPreviousUrlCss; }
+let PtcPreviousUrl$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
+  }
+  static get style() { return ptcPreviousUrlCss; }
 };
 
-const ptcPricingBlockCss = ":host .ptc-pricing-block{width:373px;background:#E4E7E9;border-radius:4px;padding:1rem;font-family:Raleway;font-size:18px;font-weight:500;line-height:27px;letter-spacing:0em;vertical-align:middle;display:table}:host .right-text{font-family:Raleway;font-size:18px;font-weight:800;line-height:27px;letter-spacing:0em;text-align:right;vertical-align:middle;float:right;text-align:right}:host .left-text{font-family:Raleway;font-size:18px;font-weight:500;line-height:27px;letter-spacing:0em;text-align:right;vertical-align:middle}";
+const ptcPricingBlockCss = ":host{display:block}:host .ptc-pricing-block{width:100%;background:#E4E7E9;border-radius:4px;font-family:Raleway;font-size:18px;font-weight:500;line-height:27px;display:block;margin-bottom:12px}:host .right-text{font-family:Raleway;font-size:18px;font-weight:800;line-height:27px;text-align:right;float:right;margin:15px;display:inline-block}:host .left-text{font-family:Raleway;font-size:18px;font-weight:500;line-height:27px;text-align:left;margin:15px;display:inline-block}";
 
-let PtcPricingBlock$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true
-    };
-  }
-  static get style() { return ptcPricingBlockCss; }
+let PtcPricingBlock$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true
+    };
+  }
+  static get style() { return ptcPricingBlockCss; }
 };
 
 const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.12 32.76"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#cac8c8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><g class="cls-1"><path class="cls-2" d="M24,0,18,15.12h5.4L19.68,32.76H0l3.72-18L11.4,0ZM48.12,0l-6,15.12h5.4L43.8,32.76H24.12l3.72-18L35.52,0Z"/></g></g></g></g></svg>`;
 
 const ptcQuoteCss = ":host{display:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}";
 
-let PtcQuote$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Quote Type
-     */
-    this.quoteType = "image-quote";
-    /**
-     * Quote Name
-     */
-    this.quoteName = 'John Smith';
-  }
-  getImageTitle() {
-    return (h("div", { class: "our-leadership" }, h("div", { class: "line" }, h("div", { class: "green-line" }), h("div", { class: "grey-line" })), h("p", null, this.imgTitle)));
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.quoteType]: true
-    };
-  }
-  static get style() { return ptcQuoteCss; }
+let PtcQuote$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Quote Type
+     */
+    this.quoteType = "image-quote";
+    /**
+     * Quote Name
+     */
+    this.quoteName = 'John Smith';
+  }
+  getImageTitle() {
+    return (h("div", { class: "our-leadership" }, h("div", { class: "line" }, h("div", { class: "green-line" }), h("div", { class: "grey-line" })), h("p", null, this.imgTitle)));
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.quoteType]: true
+    };
+  }
+  static get style() { return ptcQuoteCss; }
 };
 
 const ptcResponsiveWrapperCss = ":host{display:block}";
 
-let PtcResponsiveWrapper$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  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 this; }
-  static get style() { return ptcResponsiveWrapperCss; }
+let PtcResponsiveWrapper$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  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 this; }
+  static get style() { return ptcResponsiveWrapperCss; }
 };
 
-const ShoppingCart = `<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0047 16.9625H7.80762L6.89267 18.9387H22.1419V20.4358H21.288C21.5163 20.7841 21.6448 21.1863 21.66 21.6002C21.6753 22.0141 21.5767 22.4243 21.3747 22.7879C21.1726 23.1514 20.8746 23.4548 20.5118 23.6662C20.1491 23.8776 19.735 23.9892 19.3132 23.9892C18.8914 23.9892 18.4773 23.8776 18.1146 23.6662C17.7518 23.4548 17.4538 23.1514 17.2517 22.7879C17.0497 22.4243 16.9511 22.0141 16.9663 21.6002C16.9816 21.1863 17.1101 20.7841 17.3384 20.4358H9.27155C9.47218 20.7382 9.59773 21.0825 9.63811 21.4412C9.67848 21.7998 9.63255 22.1627 9.50401 22.5008C9.37547 22.8388 9.16791 23.1425 8.89803 23.3875C8.62815 23.6324 8.30348 23.8117 7.95014 23.911C7.5968 24.0103 7.22465 24.0268 6.86364 23.9591C6.50263 23.8915 6.16283 23.7416 5.87158 23.5215C5.58033 23.3014 5.34576 23.0173 5.18674 22.692C5.02772 22.3667 4.94869 22.0093 4.95601 21.6485C4.96201 21.221 5.08301 20.8027 5.30675 20.4358H4.33079L6.49619 14.9713H18.6041V13.7137H6.23695L2.33314 2.08101L0 1.25759V0L3.20235 1.10788L4.43754 4.49139H26L22.0047 16.9625ZM6.64528 22.5946C6.83586 22.7196 7.05993 22.7863 7.28915 22.7863C7.59652 22.7863 7.8913 22.6665 8.10865 22.4531C8.32599 22.2397 8.44809 21.9503 8.44809 21.6485C8.44809 21.4235 8.38012 21.2035 8.25278 21.0164C8.12543 20.8293 7.94443 20.6834 7.73266 20.5973C7.52089 20.5112 7.28786 20.4887 7.06305 20.5326C6.83824 20.5765 6.63173 20.6848 6.46965 20.844C6.30757 21.0031 6.19719 21.2058 6.15247 21.4265C6.10776 21.6473 6.13071 21.876 6.21843 22.0839C6.30614 22.2919 6.45469 22.4696 6.64528 22.5946ZM18.6769 22.5946C18.8675 22.7196 19.0916 22.7863 19.3208 22.7863C19.6282 22.7863 19.923 22.6665 20.1403 22.4531C20.3577 22.2397 20.4798 21.9503 20.4798 21.6485C20.4798 21.4235 20.4118 21.2035 20.2845 21.0164C20.1571 20.8293 19.9761 20.6834 19.7643 20.5973C19.5526 20.5112 19.3195 20.4887 19.0947 20.5326C18.8699 20.5765 18.6634 20.6848 18.5013 20.844C18.3392 21.0031 18.2289 21.2058 18.1841 21.4265C18.1394 21.6473 18.1624 21.876 18.2501 22.0839C18.3378 22.2919 18.4864 22.4696 18.6769 22.5946ZM19.3206 21.1395C19.2138 21.1365 19.1086 21.1651 19.0185 21.2215C18.9284 21.278 18.8577 21.3596 18.8154 21.456C18.7731 21.5523 18.7613 21.6589 18.7814 21.7619C18.8015 21.8649 18.8526 21.9596 18.9282 22.0338C19.0037 22.108 19.1002 22.1582 19.2051 22.1779C19.3101 22.1977 19.4186 22.186 19.5167 22.1445C19.6149 22.103 19.698 22.0336 19.7555 21.9451C19.813 21.8567 19.8421 21.7534 19.8391 21.6485C19.8391 21.5135 19.7845 21.384 19.6872 21.2886C19.59 21.1931 19.4581 21.1395 19.3206 21.1395ZM7.28896 21.1395C7.18276 21.1395 7.07899 21.1707 6.99092 21.2289C6.90285 21.2872 6.83449 21.3699 6.79458 21.4665C6.75467 21.5632 6.74503 21.6693 6.76689 21.7713C6.78875 21.8734 6.84111 21.9667 6.91729 22.0393C6.99347 22.112 7.08999 22.1607 7.1945 22.1791C7.29902 22.1976 7.40678 22.1851 7.504 22.1431C7.60122 22.1012 7.68348 22.0317 7.74025 21.9436C7.79702 21.8555 7.82572 21.7527 7.82269 21.6485C7.81872 21.5121 7.76074 21.3827 7.66107 21.2876C7.56141 21.1926 7.42791 21.1394 7.28896 21.1395Z" fill="#20262A"/>
-</svg>
+const ShoppingCartBlack = `<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0047 16.9625H7.80762L6.89267 18.9387H22.1419V20.4358H21.288C21.5163 20.7841 21.6448 21.1863 21.66 21.6002C21.6753 22.0141 21.5767 22.4243 21.3747 22.7879C21.1726 23.1514 20.8746 23.4548 20.5118 23.6662C20.1491 23.8776 19.735 23.9892 19.3132 23.9892C18.8914 23.9892 18.4773 23.8776 18.1146 23.6662C17.7518 23.4548 17.4538 23.1514 17.2517 22.7879C17.0497 22.4243 16.9511 22.0141 16.9663 21.6002C16.9816 21.1863 17.1101 20.7841 17.3384 20.4358H9.27155C9.47218 20.7382 9.59773 21.0825 9.63811 21.4412C9.67848 21.7998 9.63255 22.1627 9.50401 22.5008C9.37547 22.8388 9.16791 23.1425 8.89803 23.3875C8.62815 23.6324 8.30348 23.8117 7.95014 23.911C7.5968 24.0103 7.22465 24.0268 6.86364 23.9591C6.50263 23.8915 6.16283 23.7416 5.87158 23.5215C5.58033 23.3014 5.34576 23.0173 5.18674 22.692C5.02772 22.3667 4.94869 22.0093 4.95601 21.6485C4.96201 21.221 5.08301 20.8027 5.30675 20.4358H4.33079L6.49619 14.9713H18.6041V13.7137H6.23695L2.33314 2.08101L0 1.25759V0L3.20235 1.10788L4.43754 4.49139H26L22.0047 16.9625ZM6.64528 22.5946C6.83586 22.7196 7.05993 22.7863 7.28915 22.7863C7.59652 22.7863 7.8913 22.6665 8.10865 22.4531C8.32599 22.2397 8.44809 21.9503 8.44809 21.6485C8.44809 21.4235 8.38012 21.2035 8.25278 21.0164C8.12543 20.8293 7.94443 20.6834 7.73266 20.5973C7.52089 20.5112 7.28786 20.4887 7.06305 20.5326C6.83824 20.5765 6.63173 20.6848 6.46965 20.844C6.30757 21.0031 6.19719 21.2058 6.15247 21.4265C6.10776 21.6473 6.13071 21.876 6.21843 22.0839C6.30614 22.2919 6.45469 22.4696 6.64528 22.5946ZM18.6769 22.5946C18.8675 22.7196 19.0916 22.7863 19.3208 22.7863C19.6282 22.7863 19.923 22.6665 20.1403 22.4531C20.3577 22.2397 20.4798 21.9503 20.4798 21.6485C20.4798 21.4235 20.4118 21.2035 20.2845 21.0164C20.1571 20.8293 19.9761 20.6834 19.7643 20.5973C19.5526 20.5112 19.3195 20.4887 19.0947 20.5326C18.8699 20.5765 18.6634 20.6848 18.5013 20.844C18.3392 21.0031 18.2289 21.2058 18.1841 21.4265C18.1394 21.6473 18.1624 21.876 18.2501 22.0839C18.3378 22.2919 18.4864 22.4696 18.6769 22.5946ZM19.3206 21.1395C19.2138 21.1365 19.1086 21.1651 19.0185 21.2215C18.9284 21.278 18.8577 21.3596 18.8154 21.456C18.7731 21.5523 18.7613 21.6589 18.7814 21.7619C18.8015 21.8649 18.8526 21.9596 18.9282 22.0338C19.0037 22.108 19.1002 22.1582 19.2051 22.1779C19.3101 22.1977 19.4186 22.186 19.5167 22.1445C19.6149 22.103 19.698 22.0336 19.7555 21.9451C19.813 21.8567 19.8421 21.7534 19.8391 21.6485C19.8391 21.5135 19.7845 21.384 19.6872 21.2886C19.59 21.1931 19.4581 21.1395 19.3206 21.1395ZM7.28896 21.1395C7.18276 21.1395 7.07899 21.1707 6.99092 21.2289C6.90285 21.2872 6.83449 21.3699 6.79458 21.4665C6.75467 21.5632 6.74503 21.6693 6.76689 21.7713C6.78875 21.8734 6.84111 21.9667 6.91729 22.0393C6.99347 22.112 7.08999 22.1607 7.1945 22.1791C7.29902 22.1976 7.40678 22.1851 7.504 22.1431C7.60122 22.1012 7.68348 22.0317 7.74025 21.9436C7.79702 21.8555 7.82572 21.7527 7.82269 21.6485C7.81872 21.5121 7.76074 21.3827 7.66107 21.2876C7.56141 21.1926 7.42791 21.1394 7.28896 21.1395Z" fill="#20262A"/>
+</svg>
 `;
 
-const ptcShoppingCartCss = ":host .cart .cart__count{position:relative;background:#D33E3E;height:20px;width:20px;text-align:center;border-radius:50%;color:white;left:18px;bottom:38px;vertical-align:middle;display:flex;justify-content:center;align-items:center;text-align:center;font-family:Raleway;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0em}";
+const ShoppingCartWhite = `<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0047 16.9625H7.80762L6.89267 18.9387H22.1419V20.4358H21.288C21.5163 20.7841 21.6448 21.1863 21.66 21.6002C21.6753 22.0141 21.5767 22.4243 21.3747 22.7879C21.1726 23.1514 20.8746 23.4548 20.5118 23.6662C20.1491 23.8776 19.735 23.9892 19.3132 23.9892C18.8914 23.9892 18.4773 23.8776 18.1146 23.6662C17.7518 23.4548 17.4538 23.1514 17.2517 22.7879C17.0497 22.4243 16.9511 22.0141 16.9663 21.6002C16.9816 21.1863 17.1101 20.7841 17.3384 20.4358H9.27155C9.47218 20.7382 9.59773 21.0825 9.63811 21.4412C9.67848 21.7998 9.63255 22.1627 9.50401 22.5008C9.37547 22.8388 9.16791 23.1425 8.89803 23.3875C8.62815 23.6324 8.30348 23.8117 7.95014 23.911C7.5968 24.0103 7.22465 24.0268 6.86364 23.9591C6.50263 23.8915 6.16283 23.7416 5.87158 23.5215C5.58033 23.3014 5.34576 23.0173 5.18674 22.692C5.02772 22.3667 4.94869 22.0093 4.95601 21.6485C4.96201 21.221 5.08301 20.8027 5.30675 20.4358H4.33079L6.49619 14.9713H18.6041V13.7137H6.23695L2.33314 2.08101L0 1.25759V0L3.20235 1.10788L4.43754 4.49139H26L22.0047 16.9625ZM6.64528 22.5946C6.83586 22.7196 7.05993 22.7863 7.28915 22.7863C7.59652 22.7863 7.8913 22.6665 8.10865 22.4531C8.32599 22.2397 8.44809 21.9503 8.44809 21.6485C8.44809 21.4235 8.38012 21.2035 8.25278 21.0164C8.12543 20.8293 7.94443 20.6834 7.73266 20.5973C7.52089 20.5112 7.28786 20.4887 7.06305 20.5326C6.83824 20.5765 6.63173 20.6848 6.46965 20.844C6.30757 21.0031 6.19719 21.2058 6.15247 21.4265C6.10776 21.6473 6.13071 21.876 6.21843 22.0839C6.30614 22.2919 6.45469 22.4696 6.64528 22.5946ZM18.6769 22.5946C18.8675 22.7196 19.0916 22.7863 19.3208 22.7863C19.6282 22.7863 19.923 22.6665 20.1403 22.4531C20.3577 22.2397 20.4798 21.9503 20.4798 21.6485C20.4798 21.4235 20.4118 21.2035 20.2845 21.0164C20.1571 20.8293 19.9761 20.6834 19.7643 20.5973C19.5526 20.5112 19.3195 20.4887 19.0947 20.5326C18.8699 20.5765 18.6634 20.6848 18.5013 20.844C18.3392 21.0031 18.2289 21.2058 18.1841 21.4265C18.1394 21.6473 18.1624 21.876 18.2501 22.0839C18.3378 22.2919 18.4864 22.4696 18.6769 22.5946ZM19.3206 21.1395C19.2138 21.1365 19.1086 21.1651 19.0185 21.2215C18.9284 21.278 18.8577 21.3596 18.8154 21.456C18.7731 21.5523 18.7613 21.6589 18.7814 21.7619C18.8015 21.8649 18.8526 21.9596 18.9282 22.0338C19.0037 22.108 19.1002 22.1582 19.2051 22.1779C19.3101 22.1977 19.4186 22.186 19.5167 22.1445C19.6149 22.103 19.698 22.0336 19.7555 21.9451C19.813 21.8567 19.8421 21.7534 19.8391 21.6485C19.8391 21.5135 19.7845 21.384 19.6872 21.2886C19.59 21.1931 19.4581 21.1395 19.3206 21.1395ZM7.28896 21.1395C7.18276 21.1395 7.07899 21.1707 6.99092 21.2289C6.90285 21.2872 6.83449 21.3699 6.79458 21.4665C6.75467 21.5632 6.74503 21.6693 6.76689 21.7713C6.78875 21.8734 6.84111 21.9667 6.91729 22.0393C6.99347 22.112 7.08999 22.1607 7.1945 22.1791C7.29902 22.1976 7.40678 22.1851 7.504 22.1431C7.60122 22.1012 7.68348 22.0317 7.74025 21.9436C7.79702 21.8555 7.82572 21.7527 7.82269 21.6485C7.81872 21.5121 7.76074 21.3827 7.66107 21.2876C7.56141 21.1926 7.42791 21.1394 7.28896 21.1395Z" fill="white"/>
+</svg>
+`;
 
-let PtcShoppingCart$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: "cart", innerHTML: ShoppingCart }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { innerHTML: ShoppingCart }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-shopping-cart']: true,
-    };
-  }
-  static get style() { return ptcShoppingCartCss; }
+const ptcShoppingCartCss = ":host .cart .cart__count{position:relative;background:#D33E3E;height:20px;width:20px;text-align:center;border-radius:50%;color:white;left:18px;bottom:38px;vertical-align:middle;display:flex;justify-content:center;align-items:center;text-align:center;font-family:Raleway;font-size:14px;font-weight:600;line-height:21px;letter-spacing:0em}:host .black-background{background:rgba(0, 0, 0, 0.54);border-radius:4px;display:inline-block;padding:0.45rem;max-height:28px}";
+
+let PtcShoppingCart$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = 'white';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    if (this.color == 'black') {
+      return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: "cart", innerHTML: ShoppingCartBlack }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { innerHTML: ShoppingCartBlack }))));
+    }
+    else if (this.color == 'white') {
+      return (h(Host, { class: classMap }, this.cartCount ? (h("div", { class: "cart black-background", innerHTML: ShoppingCartWhite }, h("div", { class: "cart__count" }, this.cartCount))) : (h("div", { innerHTML: ShoppingCartWhite, class: "black-background" }))));
+    }
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-shopping-cart']: true,
+    };
+  }
+  static get style() { return ptcShoppingCartCss; }
 };
 
 const ptcSocialShareCss = ":host(.inline-block){display:inline-block}:host(.block){display:block}:host(.inline){display:inline}:host(.flex){display:flex}:host(.ptc-social-share){cursor:pointer}@media only screen and (min-width: 1200px){:host(.ptc-social-m-left){margin-left:var(--ptc-element-spacing-04)}}";
 
-let PtcSocialShare$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.display = 'inline-block';
-    this.shareType = 'twitter';
-    /**
-     * Optional - source for linkedin
-     */
-    this.source = '';
-    /**
-     * Email recipient.
-     * If you want to use mail share, you need to use this property
-     */
-    this.recipient = '';
-    /**
-     * is hover or not
-     */
-    this.isHover = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null)));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-social-share']: true,
-      [this.display]: true,
-    };
-  }
-  hoverToggle() {
-    this.isHover = !this.isHover;
-  }
-  share() {
-    if (this.shareType == 'twitter') {
-      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
-    }
-    if (this.shareType == 'facebook') {
-      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
-    }
-    if (this.shareType == 'linkedin') {
-      window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
-    }
-    if (this.shareType == 'mail') {
-      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
-    }
-    if (this.shareType == 'share-api') {
-      if (navigator.share) {
-        navigator
-          .share({
-          title: this.shareTitle,
-          text: this.text,
-          url: this.url,
-        })
-          .then(() => console.log('Successful share'))
-          .catch(error => console.log('Error sharing', error));
-      }
-      else {
-        // fallback to sharing to twitter
-        window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
-      }
-    }
-  }
-  get el() { return this; }
-  static get style() { return ptcSocialShareCss; }
+let PtcSocialShare$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.display = 'inline-block';
+    this.shareType = 'twitter';
+    /**
+     * Optional - source for linkedin
+     */
+    this.source = '';
+    /**
+     * Email recipient.
+     * If you want to use mail share, you need to use this property
+     */
+    this.recipient = '';
+    /**
+     * is hover or not
+     */
+    this.isHover = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null)));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-social-share']: true,
+      [this.display]: true,
+    };
+  }
+  hoverToggle() {
+    this.isHover = !this.isHover;
+  }
+  share() {
+    if (this.shareType == 'twitter') {
+      window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
+    }
+    if (this.shareType == 'facebook') {
+      window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
+    }
+    if (this.shareType == 'linkedin') {
+      window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
+    }
+    if (this.shareType == 'mail') {
+      window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
+    }
+    if (this.shareType == 'share-api') {
+      if (navigator.share) {
+        navigator
+          .share({
+          title: this.shareTitle,
+          text: this.text,
+          url: this.url,
+        })
+          .then(() => console.log('Successful share'))
+          .catch(error => console.log('Error sharing', error));
+      }
+      else {
+        // fallback to sharing to twitter
+        window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
+      }
+    }
+  }
+  get el() { return this; }
+  static get style() { return ptcSocialShareCss; }
 };
 
 const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.ptc-spacer-xx-large){display:block}}";
 
-let PtcSpacer$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Breakpoint
-     */
-    this.breakpoint = '';
-    /**
-     * Spacing Size
-     */
-    this.size = 'medium';
-    /**
-     * Direction
-     */
-    this.direction = 'vertical';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-    };
-  }
-  static get style() { return ptcSpacerCss; }
+let PtcSpacer$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Breakpoint
+     */
+    this.breakpoint = '';
+    /**
+     * Spacing Size
+     */
+    this.size = 'medium';
+    /**
+     * Direction
+     */
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+    };
+  }
+  static get style() { return ptcSpacerCss; }
 };
 
 const ptcSpanCss = ":host{z-index:1}:host span{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}:host(.link-style) span{color:var(--color-gray-10);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:var(--color-gray-03);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-06);font-size:var(--ptc-font-size-small);padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:var(--color-gray-10)}:host(.plm-hub-style) span{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-medium);color:var(--color-white)}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}:host(.white) span{color:var(--color-white)}:host(.primary-grey) span{color:var(--color-gray-10)}";
 
-let PtcSpan$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Span Style
-     */
-    this.spanStyle = 'tag-style';
-    /**
-     * Display
-     */
-    this.display = 'inline';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.display]: true,
-    };
-  }
-  static get style() { return ptcSpanCss; }
+let PtcSpan$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Span Style
+     */
+    this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
+    this.display = 'inline';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.spanStyle]: true,
+      [this.display]: true,
+    };
+  }
+  static get style() { return ptcSpanCss; }
 };
 
-const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
-    <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
-        <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
-        <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
-        <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
-        <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
-        <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
-        <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
-        <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
-    </g>
+const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
+    <g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
+        <path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
+        <path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
+        <path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
+        <path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
+        <path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
+        <path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
+        <path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
+    </g>
 </svg>`;
 
-const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_494_37)">
-<circle cx="24" cy="22" r="20" fill="white"/>
-<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
-</g>
-<defs>
-<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
-</filter>
-</defs>
-</svg>
+const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_37)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
+</filter>
+</defs>
+</svg>
 `;
 
-const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_494_34)">
-<circle cx="24" cy="22" r="20" fill="white"/>
-<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
-</g>
-<defs>
-<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
-</filter>
-</defs>
-</svg>
+const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_34)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
+</filter>
+</defs>
+</svg>
 `;
 
-const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #fff;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
-</svg>
+const backarrow = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 311 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M251.762,512L311,452.638,114.774,256,311,59.362,251.762,0,0,252.29Z"/>
+</svg>
 `;
 
 const ptcSvgBtnCss = ":host{cursor:pointer}:host(.block){display:block}:host(.inline){display:inline}:host(.inline-block){display:inline-block}:host(.flex){display:flex}:host(:focus-visible){outline:none}:host(.backarrow){margin:8px 8px 0px -2px}:focus-visible{outline:none}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:var(--color-gray-10);stroke-linecap:square}.svg-close svg .cls-2{stroke:var(--color-gray-10)}.svg-close svg path{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:var(--color-white)}.slider-left,.slider-right{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}.slider-left svg .arrow,.slider-right svg .arrow{fill:var(--color-gray-10)}.slider-left:hover svg .arrow,.slider-right:hover svg .arrow{fill:var(--color-green-06)}.back-arrow{display:inline-block;fill:none;stroke-width:30px;stroke:var(--color-gray-10);stroke-linecap:square;height:10px;width:20px;position:relative;top:1px;text-align:center}@media only screen and (max-width: 1024px) and (min-width: 576px){:host(.back-arrow){margin:8px 8px 16px -2px}}";
 
-let PtcSvgBtn$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Display
-     */
-    this.display = 'block';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
-  }
-  getCssClassMap() {
-    return {
-      [this.display]: true
-    };
-  }
-  static get style() { return ptcSvgBtnCss; }
+let PtcSvgBtn$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Display
+     */
+    this.display = 'block';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null, !!this.svgName && this.svgName === 'back-arrow' ? h("div", { class: 'back-arrow', innerHTML: backarrow }) : null));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
+  }
+  static get style() { return ptcSvgBtnCss; }
 };
 
-const ptcTabListCss = ".tabs-header{display:flex;border-bottom:2px solid #E4E7E9;padding-left:2rem;padding-right:2rem}.tabs-content{padding:10px}";
+const ptcTabListCss = "ptc-tab-list{display:block;position:relative}.tabs-header-container{overflow:hidden;width:100%;border-bottom:2px solid #E4E7E9}.tabs-header{display:flex;padding-left:2rem;padding-right:2rem;transition:opacity ease-out 250ms;opacity:0;width:95%}.tabs-header.active{opacity:1}.tabs-content{padding:20px}.ellipsis-btn{position:absolute;top:1rem;right:1rem;display:none}.ellipsis-btn.active{display:block}";
 
-let PtcTabList$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  componentDidLoad() {
-    this.createGroup();
-    /*const [group] = this.tabGroup;
-    this.selectGroup(group);*/
-  }
-  onSelectedTab(event) {
-    let self = this;
-    this.tabGroup.forEach(group => {
-      event.detail.then(res => {
-        if (group.header.name === res.name) {
-          self.selectGroup(group);
-        }
-      });
-    });
-  }
-  createGroup() {
-    let self = this;
-    let headerComplete = false;
-    let contentComplete = false;
-    let headerCount = 0;
-    let contentCount = 0;
-    let headerData = [];
-    let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
-    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
-      headerCount++;
-      if (headerCount === tabsHeaderEl.length) {
-        headerComplete = true;
-      }
-      headerData.push(res);
-    }));
-    this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
-    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
-      contentCount++;
-      if (contentCount === tabsContentEl.length) {
-        contentComplete = true;
-      }
-      contentData.push(res);
-    }));
-    this.tabsContent = contentData;
-    let myInterval = setInterval(() => {
-      if (headerComplete && contentComplete) {
-        clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map(header => {
-          const content = self.tabsContent.find(content => content.name === header.name);
-          return {
-            header: header,
-            content: content
-          };
-        });
-        const group = self.tabGroup[0];
-        self.selectGroup(group);
-      }
-    }, 100);
-  }
-  selectGroup(group) {
-    let self = this;
-    self.tabGroup.forEach(_ => {
-      _.header.unselect();
-      _.content.unselect();
-    });
-    group.header.select();
-    group.content.select();
-  }
-  render() {
-    return [
-      h("div", { class: "tabs-header" }, h("slot", { name: "header" })),
-      h("div", { class: "tabs-content" }, h("slot", { name: "content" }))
-    ];
-  }
-  get host() { return this; }
-  static get style() { return ptcTabListCss; }
+let PtcTabList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    this.createGroup();
+    this.calculateHeaderTabsRendering();
+    /*const [group] = this.tabGroup;
+    this.selectGroup(group);*/
+  }
+  onSelectedTab(event) {
+    let self = this;
+    this.tabGroup.forEach(group => {
+      event.detail.then(res => {
+        if (group.header.name === res.name) {
+          self.selectGroup(group);
+        }
+      });
+    });
+  }
+  calculateHeaderTabsRendering() {
+    let header = this.host.querySelector('.tabs-header');
+    let dropdown = this.host.querySelector('.ellipsis-btn');
+    let tabs = header.children;
+    let activateDropDown = false;
+    let hiddenTabs = [];
+    header.classList.remove('active');
+    for (let index = 0; index < tabs.length; index++) {
+      tabs[index].style.removeProperty('display');
+    }
+    for (let index = tabs.length - 1; index >= 0; index--) {
+      let tab = tabs[index];
+      if (header.scrollWidth > header.clientWidth) {
+        tab.style.display = 'none';
+        activateDropDown = true;
+        hiddenTabs.push({
+          value: tab.getAttribute('name'),
+          text: tab.textContent
+        });
+      }
+    }
+    header.classList.add('active');
+    if (activateDropDown) {
+      dropdown.classList.add('active');
+      dropdown.dataItems = hiddenTabs.reverse();
+    }
+    else {
+      dropdown.classList.remove('active');
+      dropdown.dataItems = [];
+    }
+  }
+  createGroup() {
+    let self = this;
+    let headerComplete = false;
+    let contentComplete = false;
+    let headerCount = 0;
+    let contentCount = 0;
+    let headerData = [];
+    let contentData = [];
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
+      headerCount++;
+      if (headerCount === tabsHeaderEl.length) {
+        headerComplete = true;
+      }
+      headerData.push(res);
+    }));
+    this.tabsHeader = headerData;
+    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
+    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
+      contentCount++;
+      if (contentCount === tabsContentEl.length) {
+        contentComplete = true;
+      }
+      contentData.push(res);
+    }));
+    this.tabsContent = contentData;
+    let myInterval = setInterval(() => {
+      if (headerComplete && contentComplete) {
+        clearInterval(myInterval);
+        self.tabGroup = self.tabsHeader.map(header => {
+          const content = self.tabsContent.find(content => content.name === header.name);
+          return {
+            header: header,
+            content: content
+          };
+        });
+        const group = self.tabGroup[0];
+        self.selectGroup(group);
+      }
+    }, 100);
+  }
+  selectGroup(group) {
+    let self = this;
+    self.tabGroup.forEach(_ => {
+      _.header.unselect();
+      _.content.unselect();
+    });
+    group.header.select();
+    group.content.select();
+  }
+  onDropdownItemSelected(selectedItem) {
+    if (selectedItem) {
+      let selectedTabGroub = this.tabGroup.find((group) => {
+        return group.header.name == selectedItem.value;
+      });
+      if (selectedTabGroub) {
+        this.selectGroup(selectedTabGroub);
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" }))), h("div", { class: "tabs-content" }, h("slot", { name: "content" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
+  }
+  get host() { return this; }
+  static get style() { return ptcTabListCss; }
 };
 
 const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-07);opacity:0.9;left:0px}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after{content:\"\";position:absolute;width:20%;height:2px;background-color:var(--color-green-07);top:-2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white)}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-grey-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}";
 
-let PtcTitle$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Is this title using on the PLM Hub page
-     */
-    this.isPlmHub = false;
-    /**
-     * Title Tag Type
-     */
-    this.type = 'h2';
-    /**
-     * Upperline Style
-     */
-    this.upperline = 'dotted';
-    /**
-     * Title line height
-     */
-    this.titleHeight = 'paragraph';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, null, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.textAlign]: !!this.textAlign ? true : false,
-      [this.upperline]: true,
-      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
-      [this.titleMargin]: !!this.titleMargin ? true : false,
-      [this.titleShadow]: !!this.titleShadow ? true : false,
-      [this.titleWeight]: !!this.titleWeight ? true : false,
-      [this.titleSize]: !!this.titleSize ? true : false,
-      [this.titleHeight]: !!this.titleHeight ? true : false
-    };
-  }
-  static get style() { return ptcTitleCss; }
+let PtcTitle$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Is this title using on the PLM Hub page
+     */
+    this.isPlmHub = false;
+    /**
+     * Title Tag Type
+     */
+    this.type = 'h2';
+    /**
+     * Upperline Style
+     */
+    this.upperline = 'dotted';
+    /**
+     * Title line height
+     */
+    this.titleHeight = 'paragraph';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    let TagType;
+    switch (this.type) {
+      case 'h1':
+        TagType = 'h1';
+        break;
+      case 'h3':
+        TagType = 'h3';
+        break;
+      default:
+        TagType = 'h2';
+    }
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, null, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.textAlign]: !!this.textAlign ? true : false,
+      [this.upperline]: true,
+      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.titleMargin]: !!this.titleMargin ? true : false,
+      [this.titleShadow]: !!this.titleShadow ? true : false,
+      [this.titleWeight]: !!this.titleWeight ? true : false,
+      [this.titleSize]: !!this.titleSize ? true : false,
+      [this.titleHeight]: !!this.titleHeight ? true : false
+    };
+  }
+  static get style() { return ptcTitleCss; }
 };
 
 const ptcTwoColumnMediaCss = ":host{display:block;padding:var(--ptc-layout-spacing-02) 0}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-04) 0}}";
 
-let PtcTwoColumnMedia$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("slot", null)));
-  }
-  getCssClassMap() {
-    return {
-      [this.componentType]: this.componentType ? true : false
-    };
-  }
-  static get style() { return ptcTwoColumnMediaCss; }
+let PtcTwoColumnMedia$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.componentType]: this.componentType ? true : false
+    };
+  }
+  static get style() { return ptcTwoColumnMediaCss; }
 };
 
 const tabContentCss = ".tab-content{display:none}.tab-content-selected{display:block}";
 
-let TabContent$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.isSelected = false;
-  }
-  async getChild() {
-    return {
-      select: this.select.bind(this),
-      unselect: this.unselect.bind(this),
-      name: this.name
-    };
-  }
-  unselect() {
-    this.isSelected = false;
-  }
-  select() {
-    this.isSelected = true;
-  }
-  render() {
-    const classes = {
-      'tab-content': true,
-      'tab-content-selected': this.isSelected
-    };
-    return (h("div", { class: classes }, h("slot", null)));
-  }
-  static get style() { return tabContentCss; }
+let TabContent$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  render() {
+    const classes = {
+      'tab-content': true,
+      'tab-content-selected': this.isSelected
+    };
+    return (h("div", { class: classes }, h("slot", null)));
+  }
+  static get style() { return tabContentCss; }
 };
 
-const tabHeaderCss = ".tab-header{min-height:40px;min-width:100px;padding:5px;cursor:pointer;display:flex;justify-content:center;align-items:center;border-bottom:2px solid transparent;font-family:\"Raleway\";font-style:normal;font-weight:700;font-size:18px;line-height:27px;text-align:center;color:#617480}@media (max-width: 599px){.tab-header{min-width:100px}}.tab-header-selected{border-bottom:2px solid #00890B;color:#323B42;font-weight:700}";
+const tabHeaderCss = ".tab-header{min-height:40px;min-width:100px;padding:5px;cursor:pointer;display:flex;justify-content:center;align-items:center;border-bottom:2px solid transparent;font-family:\"Raleway\";font-style:normal;font-weight:700;font-size:18px;line-height:27px;white-space:nowrap;text-align:center;color:#617480}@media (max-width: 599px){.tab-header{min-width:100px}}.tab-header-selected{border-bottom:2px solid #00890B;color:#323B42;font-weight:700}";
 
-let TabHeader$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tabClicked = createEvent(this, "tabClicked", 7);
-    this.id = this.generateId();
-    this.isSelected = false;
-  }
-  async getChild() {
-    let self = this;
-    let myPromise = new Promise(function (resolve) {
-      let data = {
-        select: self.select.bind(self),
-        unselect: self.unselect.bind(self),
-        name: self.name,
-        id: self.id
-      };
-      resolve(data);
-    });
-    let result = await myPromise;
-    return result;
-  }
-  unselect() {
-    this.isSelected = false;
-  }
-  select() {
-    this.isSelected = true;
-  }
-  onClick() {
-    this.tabClicked.emit(this.getChild());
-  }
-  generateId() {
-    return Math.random().toString(36).substring(2, 10);
-  }
-  render() {
-    const classes = {
-      'tab-header': true,
-      'tab-header-selected': this.isSelected
-    };
-    return [
-      h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", null)),
-    ];
-  }
-  static get style() { return tabHeaderCss; }
+let TabHeader$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tabClicked = createEvent(this, "tabClicked", 7);
+    this.id = this.generateId();
+    this.isSelected = false;
+  }
+  async getChild() {
+    let self = this;
+    let myPromise = new Promise(function (resolve) {
+      let data = {
+        select: self.select.bind(self),
+        unselect: self.unselect.bind(self),
+        name: self.name,
+        id: self.id
+      };
+      resolve(data);
+    });
+    let result = await myPromise;
+    return result;
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  onClick() {
+    this.tabClicked.emit(this.getChild());
+  }
+  generateId() {
+    return Math.random().toString(36).substring(2, 10);
+  }
+  render() {
+    const classes = {
+      'tab-header': true,
+      'tab-header-selected': this.isSelected
+    };
+    return [
+      h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", null)),
+    ];
+  }
+  static get style() { return tabHeaderCss; }
 };
 
+const DropdownItem = /*@__PURE__*/proxyCustomElement(DropdownItem$1, [4,"dropdown-item",{"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]);
 const IconAsset = /*@__PURE__*/proxyCustomElement(IconAsset$1, [2,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1],"injectedStyle":[1,"injected-style"]}]);
 const ListItem = /*@__PURE__*/proxyCustomElement(ListItem$1, [1,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"],"flushBefore":[4,"flush-before"],"linkTarget":[1,"link-target"]}]);
 const LottiePlayer = /*@__PURE__*/proxyCustomElement(LottiePlayer$1, [1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2]}]);
@@ -16264,8 +16372,9 @@ const PtcCardBottom = /*@__PURE__*/proxyCustomElement(PtcCardBottom$1, [1,"ptc-c
 const PtcCardContent = /*@__PURE__*/proxyCustomElement(PtcCardContent$1, [1,"ptc-card-content",{"cardType":[1,"card-type"],"styles":[1]}]);
 const PtcCardPlm = /*@__PURE__*/proxyCustomElement(PtcCardPlm$1, [1,"ptc-card-plm",{"cardType":[1,"card-type"],"cardLink":[1,"card-link"],"linkTitle":[1,"link-title"],"linkTarget":[1,"link-target"]}]);
 const PtcCheckbox = /*@__PURE__*/proxyCustomElement(PtcCheckbox$1, [1,"ptc-checkbox",{"checked":[1],"selectedItem":[32]}]);
-const PtcContainer = /*@__PURE__*/proxyCustomElement(PtcContainer$1, [1,"ptc-container",{"backgroundColor":[1,"background-color"]}]);
+const PtcContainer = /*@__PURE__*/proxyCustomElement(PtcContainer$1, [1,"ptc-container",{"backgroundColor":[1,"background-color"],"elevation":[1],"containerType":[1,"container-type"]}]);
 const PtcDate = /*@__PURE__*/proxyCustomElement(PtcDate$1, [1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateColor":[1,"date-color"],"dateStyles":[1,"date-styles"],"dataSize":[1,"data-size"]}]);
+const PtcEllipsisDropdown = /*@__PURE__*/proxyCustomElement(PtcEllipsisDropdown$1, [1,"ptc-ellipsis-dropdown",{"dataItems":[16],"isDropdownOpen":[32]}]);
 const PtcFilterTag = /*@__PURE__*/proxyCustomElement(PtcFilterTag$1, [1,"ptc-filter-tag",{"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]);
 const PtcHero = /*@__PURE__*/proxyCustomElement(PtcHero$1, [1,"ptc-hero",{"heroType":[1,"hero-type"],"bgUrl":[1,"bg-url"]}]);
 const PtcHeroFooterCta = /*@__PURE__*/proxyCustomElement(PtcHeroFooterCta$1, [6,"ptc-hero-footer-cta",{"ctaTitle":[1,"cta-title"],"description":[1],"backgroundImage":[1,"background-image"]}]);
@@ -16287,12 +16396,12 @@ const PtcPreviousUrl = /*@__PURE__*/proxyCustomElement(PtcPreviousUrl$1, [1,"ptc
 const PtcPricingBlock = /*@__PURE__*/proxyCustomElement(PtcPricingBlock$1, [1,"ptc-pricing-block"]);
 const PtcQuote = /*@__PURE__*/proxyCustomElement(PtcQuote$1, [1,"ptc-quote",{"quoteType":[1025,"quote-type"],"quoteName":[1025,"quote-name"],"ctaText":[1,"cta-text"],"ctaUrl":[1,"cta-url"],"imgSrc":[1,"img-src"],"imgTitle":[1,"img-title"]}]);
 const PtcResponsiveWrapper = /*@__PURE__*/proxyCustomElement(PtcResponsiveWrapper$1, [1,"ptc-responsive-wrapper"]);
-const PtcShoppingCart = /*@__PURE__*/proxyCustomElement(PtcShoppingCart$1, [1,"ptc-shopping-cart",{"cartCount":[1,"cart-count"]}]);
+const PtcShoppingCart = /*@__PURE__*/proxyCustomElement(PtcShoppingCart$1, [1,"ptc-shopping-cart",{"cartCount":[1,"cart-count"],"color":[1]}]);
 const PtcSocialShare = /*@__PURE__*/proxyCustomElement(PtcSocialShare$1, [1,"ptc-social-share",{"display":[1],"shareType":[1,"share-type"],"shareTitle":[1,"share-title"],"text":[1],"url":[1],"source":[1],"recipient":[1],"isHover":[32]}]);
 const PtcSpacer = /*@__PURE__*/proxyCustomElement(PtcSpacer$1, [1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]);
 const PtcSpan = /*@__PURE__*/proxyCustomElement(PtcSpan$1, [1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]);
 const PtcSvgBtn = /*@__PURE__*/proxyCustomElement(PtcSvgBtn$1, [1,"ptc-svg-btn",{"svgName":[1,"svg-name"],"display":[1]}]);
-const PtcTabList = /*@__PURE__*/proxyCustomElement(PtcTabList$1, [4,"ptc-tab-list",null,[[0,"tabClicked","onSelectedTab"]]]);
+const PtcTabList = /*@__PURE__*/proxyCustomElement(PtcTabList$1, [4,"ptc-tab-list",null,[[0,"tabClicked","onSelectedTab"],[9,"resize","calculateHeaderTabsRendering"]]]);
 const PtcTitle = /*@__PURE__*/proxyCustomElement(PtcTitle$1, [6,"ptc-title",{"isPlmHub":[4,"is-plm-hub"],"type":[1],"textAlign":[1,"text-align"],"upperline":[1],"titleShadow":[1,"title-shadow"],"titleMargin":[1,"title-margin"],"titleWeight":[1,"title-weight"],"titleSize":[1,"title-size"],"titleHeight":[1,"title-height"],"styles":[1]}]);
 const PtcTwoColumnMedia = /*@__PURE__*/proxyCustomElement(PtcTwoColumnMedia$1, [1,"ptc-two-column-media",{"componentType":[1,"component-type"]}]);
 const TabContent = /*@__PURE__*/proxyCustomElement(TabContent$1, [4,"tab-content",{"name":[1],"isSelected":[32]}]);
@@ -16300,7 +16409,8 @@ const TabHeader = /*@__PURE__*/proxyCustomElement(TabHeader$1, [1,"tab-header",{
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      IconAsset,
+      DropdownItem,
+  IconAsset,
   ListItem,
   LottiePlayer,
   MyComponent,
@@ -16314,6 +16424,7 @@ const defineCustomElements = (opts) => {
   PtcCheckbox,
   PtcContainer,
   PtcDate,
+  PtcEllipsisDropdown,
   PtcFilterTag,
   PtcHero,
   PtcHeroFooterCta,
@@ -16353,4 +16464,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { IconAsset, ListItem, LottiePlayer, MyComponent, PtcAnnouncement, PtcBreadcrumb, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardPlm, PtcCheckbox, PtcContainer, PtcDate, PtcFilterTag, PtcHero, PtcHeroFooterCta, PtcIconList, PtcImg, PtcLink, PtcList, PtcLottie, PtcMinimizedFooter, PtcMinimizedHeader, PtcMobileSelect, PtcModal, PtcNav, PtcNavItem, PtcOverlay, PtcPara, PtcPicture, PtcPreviousUrl, PtcPricingBlock, PtcQuote, PtcResponsiveWrapper, PtcShoppingCart, PtcSocialShare, PtcSpacer, PtcSpan, PtcSvgBtn, PtcTabList, PtcTitle, PtcTwoColumnMedia, TabContent, TabHeader, defineCustomElements };
+export { DropdownItem, IconAsset, ListItem, LottiePlayer, MyComponent, PtcAnnouncement, PtcBreadcrumb, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardPlm, PtcCheckbox, PtcContainer, PtcDate, PtcEllipsisDropdown, PtcFilterTag, PtcHero, PtcHeroFooterCta, PtcIconList, PtcImg, PtcLink, PtcList, PtcLottie, PtcMinimizedFooter, PtcMinimizedHeader, PtcMobileSelect, PtcModal, PtcNav, PtcNavItem, PtcOverlay, PtcPara, PtcPicture, PtcPreviousUrl, PtcPricingBlock, PtcQuote, PtcResponsiveWrapper, PtcShoppingCart, PtcSocialShare, PtcSpacer, PtcSpan, PtcSvgBtn, PtcTabList, PtcTitle, PtcTwoColumnMedia, TabContent, TabHeader, defineCustomElements };