@ptcwebops/ptcw-design 0.4.2 → 0.4.4

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3adcf9f4.js');
+
+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 #5bb73b}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-secondary-grey);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-primary-green);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:46px;line-height:52px;font-weight:800;letter-spacing:0px;color:var(--color-primary-grey)}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:28px;line-height:32px;font-weight:800;color:var(--color-primary-grey)}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 12px 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 12px 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 12px 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 12px 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 12px 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.font-size-15.sc-ptc-title h1.sc-ptc-title,div.font-size-15.sc-ptc-title h2.sc-ptc-title,div.font-size-15.sc-ptc-title h3.sc-ptc-title{font-size:15px}div.font-size-50.sc-ptc-title h1.sc-ptc-title,div.font-size-50.sc-ptc-title h2.sc-ptc-title,div.font-size-50.sc-ptc-title h3.sc-ptc-title{font-size:50px}div.lh-23.sc-ptc-title{line-height:23px}div.lh-28.sc-ptc-title{line-height:28px}div.lh-59.sc-ptc-title{line-height:59px}";
+
+let PtcTitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Is this title using on the PLM Hub page
+     */
+    this.isPlmHub = false;
+    /**
+     * Title Tag Type
+     */
+    this.type = 'h2';
+    /**
+     * Upperline Style
+     */
+    this.upperline = 'dotted';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    let TagType;
+    switch (this.type) {
+      case 'h1':
+        TagType = 'h1';
+        break;
+      case 'h3':
+        TagType = 'h3';
+        break;
+      default:
+        TagType = 'h2';
+    }
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap }, index.h(TagType, null, index.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.titleLHeight]: !!this.titleLHeight ? true : false
+    };
+  }
+};
+PtcTitle.style = ptcTitleCss;
+
+exports.ptc_title = PtcTitle;

package/dist/cjs/ptcw-design.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-e39de343.js');
+const index = require('./index-3adcf9f4.js');
 
 /*
  Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ptc-announcement.cjs",[[1,"ptc-announcement",{"barTitle":[1,"bar-title"],"Description":[1,"description"],"linkText":[513,"link-text"],"visible":[1540],"linkUrl":[513,"link-url"],"tempContainer":[4,"temp-container"]}]]],["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"headingTransform":[1,"heading-transform"],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["ptc-social-share.cjs",[[1,"ptc-social-share",{"display":[1],"shareType":[1,"share-type"],"shareTitle":[1,"share-title"],"text":[1],"url":[1],"source":[1],"recipient":[1],"isHover":[32]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-countdown.cjs",[[1,"ptc-countdown"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-form.cjs",[[6,"ptc-form",{"value":[32],"inputValue":[32],"selectValue":[32]}]]],["ptc-input.cjs",[[6,"ptc-input",{"type":[1],"dataEloquaName":[1,"data-eloqua-name"],"inputId":[1,"input-id"],"inputName":[1,"input-name"],"focused":[32]}]]],["ptc-list.cjs",[[2,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-modal.cjs",[[1,"ptc-modal",{"iframeUrl":[1025,"iframe-url"],"size":[1025],"show":[1028],"overlay":[1028],"closeOnBlur":[1028,"close-on-blur"],"overlayHeight":[32],"bodyOverflowSetting":[32]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-select.cjs",[[6,"ptc-select",{"dataEloquaName":[1,"data-eloqua-name"],"selectId":[1,"select-id"],"name":[1],"valueOptions":[1040]}]]],["lottie-player.cjs",[[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],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[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"]}]]],["ptc-svg-btn.cjs",[[1,"ptc-svg-btn",{"svgName":[1,"svg-name"],"display":[1]}]]],["icon-asset_16.cjs",[[1,"ptc-breadcrumb"],[1,"ptc-hero",{"heroType":[1,"hero-type"],"bgUrl":[1,"bg-url"]}],[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"linkTitle":[1,"link-title"],"target":[1],"rel":[1],"tabNav":[2,"tab-nav"],"styles":[1]}],[1,"ptc-card-bottom",{"cardType":[1,"card-type"],"styles":[1]}],[1,"ptc-card-content",{"cardType":[1,"card-type"],"styles":[1]}],[1,"ptc-card-plm",{"cardType":[1,"card-type"],"cardLink":[1,"card-link"],"linkTitle":[1,"link-title"],"linkTarget":[1,"link-target"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraColor":[1,"para-color"],"paraLineH":[1,"para-line-h"],"paraMargin":[1,"para-margin"]}],[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imagePosition":[1,"image-position"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"isFullHeight":[4,"is-full-height"],"isFullWidth":[4,"is-full-width"],"styles":[1],"oldSrc":[32]},[[9,"resize","WindowResize"]]],[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}],[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[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"],"titleLHeight":[1,"title-l-height"],"styles":[1]}],[1,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"],"flushBefore":[4,"flush-before"]}],[4,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]],[1,"ptc-overlay",{"filterColor":[1,"filter-color"],"borderRadius":[1,"border-radius"],"overlayZIndex":[1,"overlay-z-index"],"styles":[1]}],[2,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["ptc-breadcrumb.cjs",[[1,"ptc-breadcrumb"]]],["ptc-hero.cjs",[[1,"ptc-hero",{"heroType":[1,"hero-type"],"bgUrl":[1,"bg-url"]}]]],["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"headingTransform":[1,"heading-transform"],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["ptc-social-share.cjs",[[1,"ptc-social-share",{"display":[1],"shareType":[1,"share-type"],"shareTitle":[1,"share-title"],"text":[1],"url":[1],"source":[1],"recipient":[1],"isHover":[32]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-button.cjs",[[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"linkTitle":[1,"link-title"],"target":[1],"rel":[1],"tabNav":[2,"tab-nav"],"styles":[1]}]]],["ptc-card-bottom.cjs",[[1,"ptc-card-bottom",{"cardType":[1,"card-type"],"styles":[1]}]]],["ptc-card-content.cjs",[[1,"ptc-card-content",{"cardType":[1,"card-type"],"styles":[1]}]]],["ptc-card-plm.cjs",[[1,"ptc-card-plm",{"cardType":[1,"card-type"],"cardLink":[1,"card-link"],"linkTitle":[1,"link-title"],"linkTarget":[1,"link-target"]}]]],["ptc-countdown.cjs",[[1,"ptc-countdown"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-form.cjs",[[6,"ptc-form",{"value":[32],"inputValue":[32],"selectValue":[32]}]]],["ptc-input.cjs",[[6,"ptc-input",{"type":[1],"dataEloquaName":[1,"data-eloqua-name"],"inputId":[1,"input-id"],"inputName":[1,"input-name"],"focused":[32]}]]],["ptc-list.cjs",[[2,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-modal.cjs",[[1,"ptc-modal",{"iframeUrl":[1025,"iframe-url"],"size":[1025],"show":[1028],"overlay":[1028],"closeOnBlur":[1028,"close-on-blur"],"overlayHeight":[32],"bodyOverflowSetting":[32]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-para.cjs",[[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraColor":[1,"para-color"],"paraLineH":[1,"para-line-h"],"paraMargin":[1,"para-margin"]}]]],["ptc-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imagePosition":[1,"image-position"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"isFullHeight":[4,"is-full-height"],"isFullWidth":[4,"is-full-width"],"styles":[1],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["ptc-select.cjs",[[6,"ptc-select",{"dataEloquaName":[1,"data-eloqua-name"],"selectId":[1,"select-id"],"name":[1],"valueOptions":[1040]}]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[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"],"titleLHeight":[1,"title-l-height"],"styles":[1]}]]],["list-item.cjs",[[1,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"],"flushBefore":[4,"flush-before"]}]]],["lottie-player.cjs",[[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],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[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"]}]]],["ptc-img_2.cjs",[[4,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]],[1,"ptc-overlay",{"filterColor":[1,"filter-color"],"borderRadius":[1,"border-radius"],"overlayZIndex":[1,"overlay-z-index"],"styles":[1]}]]],["icon-asset_5.cjs",[[0,"ptc-mobile-select",{"triggerName":[1,"trigger-name"],"linkText":[1,"link-text"],"ensureBtnText":[1,"ensure-btn-text"],"cancelBtnText":[1,"cancel-btn-text"],"listTitle":[1,"list-title"],"wheelData":[1040]}],[1,"ptc-announcement",{"barTitle":[1,"bar-title"],"Description":[1,"description"],"linkText":[513,"link-text"],"visible":[1540],"linkUrl":[513,"link-url"],"tempContainer":[4,"temp-container"]}],[1,"ptc-responsive-wrapper"],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"],"display":[1]}],[2,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -20,12 +20,14 @@
     "./components/ptc-link/ptc-link.js",
     "./components/ptc-list/ptc-list.js",
     "./components/ptc-lottie/ptc-lottie.js",
+    "./components/ptc-mobile-select/ptc-mobile-select.js",
     "./components/ptc-modal/ptc-modal.js",
     "./components/ptc-nav/ptc-nav.js",
     "./components/ptc-nav-item/ptc-nav-item.js",
     "./components/ptc-overlay/ptc-overlay.js",
     "./components/ptc-para/ptc-para.js",
     "./components/ptc-picture/ptc-picture.js",
+    "./components/ptc-responsive-wrapper/ptc-responsive-wrapper.js",
     "./components/ptc-select/ptc-select.js",
     "./components/ptc-social-share/ptc-social-share.js",
     "./components/ptc-spacer/ptc-spacer.js",

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css

@@ -0,0 +1,199 @@
+.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: 10px;
+  width: 100%;
+  font-family: var(--ptc-font-latin);
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-15);
+  line-height: var(--ptc-line-height-18);
+  color: var(--color-white);
+  height: var(--ptc-line-height-18);
+}
+
+.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-medium);
+  line-height: var(--ptc-line-height-19);
+}
+.mobileSelect .content .btnBar .ensure, .mobileSelect .content .btnBar .cancel {
+  transform: translateY(12.5px);
+}
+
+.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-medium);
+  line-height: var(--ptc-line-height-19);
+  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;
+}

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js

@@ -0,0 +1,149 @@
+import { Component, h, Prop } from '@stencil/core';
+import MobileSelect from 'mobile-select';
+export class PtcMobileSelect {
+  constructor() {
+    /**
+     * Confirm Text
+     */
+    this.ensureBtnText = 'Confirm';
+    /**
+     * Cancel Text
+     */
+    this.cancelBtnText = 'Cancel';
+    /**
+     * Mobile select list title (Optional)
+     */
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h("ptc-responsive-wrapper", null,
+      h("div", { class: "mobile-select-wrapper" },
+        h("div", { id: this.triggerName }, this.linkText),
+        h("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
+  }
+  componentDidRender() {
+    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)',
+    });
+  }
+  static get is() { return "ptc-mobile-select"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-mobile-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-mobile-select.css"]
+  }; }
+  static get properties() { return {
+    "triggerName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Trigger Name (Mandatory)"
+      },
+      "attribute": "trigger-name",
+      "reflect": false
+    },
+    "linkText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button/link Text (Mandatory)"
+      },
+      "attribute": "link-text",
+      "reflect": false
+    },
+    "ensureBtnText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Confirm Text"
+      },
+      "attribute": "ensure-btn-text",
+      "reflect": false,
+      "defaultValue": "'Confirm'"
+    },
+    "cancelBtnText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Cancel Text"
+      },
+      "attribute": "cancel-btn-text",
+      "reflect": false,
+      "defaultValue": "'Cancel'"
+    },
+    "listTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Mobile select list title (Optional)"
+      },
+      "attribute": "list-title",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "wheelData": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wheel Data (Mandatory)"
+      }
+    }
+  }; }
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js

@@ -0,0 +1,62 @@
+import { Component, h, Element } from '@stencil/core';
+//import ResizeObserver from "resize-observer-polyfill";
+export class PtcResponsiveWrapper {
+  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)));
+  }
+  static get is() { return "ptc-responsive-wrapper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-responsive-wrapper.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-responsive-wrapper.css"]
+  }; }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css

@@ -18,6 +18,14 @@
   display: flex;
 }
 
+:host(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: none;
+}
+
 .svg-close svg .cls-1,
 .svg-close svg .cls-2 {
   fill: none;

package/dist/custom-elements/index.d.ts

@@ -122,6 +122,12 @@ export const PtcLottie: {
   new (): PtcLottie;
 };
 
+interface PtcMobileSelect extends Components.PtcMobileSelect, HTMLElement {}
+export const PtcMobileSelect: {
+  prototype: PtcMobileSelect;
+  new (): PtcMobileSelect;
+};
+
 interface PtcModal extends Components.PtcModal, HTMLElement {}
 export const PtcModal: {
   prototype: PtcModal;
@@ -158,6 +164,12 @@ export const PtcPicture: {
   new (): PtcPicture;
 };
 
+interface PtcResponsiveWrapper extends Components.PtcResponsiveWrapper, HTMLElement {}
+export const PtcResponsiveWrapper: {
+  prototype: PtcResponsiveWrapper;
+  new (): PtcResponsiveWrapper;
+};
+
 interface PtcSelect extends Components.PtcSelect, HTMLElement {}
 export const PtcSelect: {
   prototype: PtcSelect;