@ptcwebops/ptcw-design 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/cjs/bundle-example.cjs.entry.js +30 -30
- package/dist/cjs/dropdown-item.cjs.entry.js +10 -10
- package/dist/cjs/icon-asset.cjs.entry.js +42 -42
- package/dist/cjs/list-item.cjs.entry.js +19 -19
- package/dist/cjs/lottie-player.cjs.entry.js +354 -354
- package/dist/cjs/max-width-container.cjs.entry.js +29 -29
- package/dist/cjs/my-component.cjs.entry.js +15 -15
- package/dist/cjs/ptc-accordion-item.cjs.entry.js +83 -83
- package/dist/cjs/ptc-accordion.cjs.entry.js +35 -35
- package/dist/cjs/ptc-announcement.cjs.entry.js +50 -50
- package/dist/cjs/ptc-background-video.cjs.entry.js +16 -16
- package/dist/cjs/ptc-breadcrumb.cjs.entry.js +12 -12
- package/dist/cjs/ptc-button.cjs.entry.js +35 -35
- package/dist/cjs/ptc-card-bottom_3.cjs.entry.js +122 -122
- package/dist/cjs/ptc-card-content.cjs.entry.js +57 -57
- package/dist/cjs/ptc-card_6.cjs.entry.js +441 -441
- package/dist/cjs/ptc-checkbox.cjs.entry.js +50 -50
- package/dist/cjs/ptc-collapse-list.cjs.entry.js +346 -346
- package/dist/cjs/ptc-container.cjs.entry.js +32 -32
- package/dist/cjs/ptc-dropdown.cjs.entry.js +64 -64
- package/dist/cjs/ptc-dynamic-card.cjs.entry.js +46 -46
- package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js +38 -38
- package/dist/cjs/ptc-filter-tag.cjs.entry.js +57 -57
- package/dist/cjs/ptc-hero-footer-cta.cjs.entry.js +11 -11
- package/dist/cjs/ptc-hero.cjs.entry.js +18 -18
- package/dist/cjs/ptc-icon-list.cjs.entry.js +21 -21
- package/dist/cjs/ptc-icon-minimize.cjs.entry.js +36 -36
- package/dist/cjs/ptc-link.cjs.entry.js +30 -30
- package/dist/cjs/ptc-list.cjs.entry.js +49 -49
- package/dist/cjs/ptc-lottie.cjs.entry.js +10 -10
- package/dist/cjs/ptc-media-card.cjs.entry.js +24 -24
- package/dist/cjs/ptc-minimized-footer.cjs.entry.js +8 -8
- package/dist/cjs/ptc-minimized-header.cjs.entry.js +11 -11
- package/dist/cjs/ptc-mobile-select.cjs.entry.js +53 -53
- package/dist/cjs/ptc-modal.cjs.entry.js +143 -143
- package/dist/cjs/ptc-nav-card.cjs.entry.js +39 -39
- package/dist/cjs/ptc-overlay.cjs.entry.js +23 -23
- package/dist/cjs/ptc-pagenation.cjs.entry.js +209 -209
- package/dist/cjs/ptc-previous-url.cjs.entry.js +10 -10
- package/dist/cjs/ptc-pricing-block.cjs.entry.js +20 -20
- package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +101 -101
- package/dist/cjs/ptc-quote.cjs.entry.js +23 -23
- package/dist/cjs/ptc-readmore.cjs.entry.js +73 -73
- package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js +54 -54
- package/dist/cjs/ptc-search-field.cjs.entry.js +51 -42
- package/dist/cjs/ptc-shopping-cart.cjs.entry.js +50 -50
- package/dist/cjs/ptc-social-share.cjs.entry.js +59 -59
- package/dist/cjs/ptc-span.cjs.entry.js +18 -18
- package/dist/cjs/ptc-sticky-icons.cjs.entry.js +32 -32
- package/dist/cjs/ptc-svg-btn.cjs.entry.js +73 -73
- package/dist/cjs/ptc-tab-list.cjs.entry.js +125 -125
- package/dist/cjs/ptc-tab.cjs.entry.js +20 -20
- package/dist/cjs/ptc-tabs.cjs.entry.js +47 -47
- package/dist/cjs/ptc-text-copy-with-background.cjs.entry.js +27 -27
- package/dist/cjs/ptc-title.cjs.entry.js +67 -67
- package/dist/cjs/ptc-tooltip.cjs.entry.js +79 -79
- package/dist/cjs/ptc-two-column-media.cjs.entry.js +15 -15
- package/dist/cjs/tab-content.cjs.entry.js +27 -27
- package/dist/cjs/tab-header.cjs.entry.js +46 -46
- package/dist/cjs/{utils-9eb22041.js → utils-416c94fe.js} +90 -90
- package/dist/collection/components/bundle-example/bundle-example.css +15 -15
- package/dist/collection/components/bundle-example/bundle-example.js +58 -58
- package/dist/collection/components/dropdown-item/dropdown-item.js +61 -61
- package/dist/collection/components/icon-asset/icon-asset.css +4 -4
- package/dist/collection/components/icon-asset/icon-asset.js +199 -199
- package/dist/collection/components/icon-asset/media/brands.svg +1381 -1381
- package/dist/collection/components/icon-asset/media/designer.svg +387 -387
- package/dist/collection/components/icon-asset/media/regular.svg +463 -463
- package/dist/collection/components/icon-asset/media/solid.svg +3013 -3013
- package/dist/collection/components/icon-asset/media/svg-with-js.min.css +4 -4
- package/dist/collection/components/list-item/list-item.js +107 -107
- package/dist/collection/components/max-width-container/max-width-container.css +7 -7
- package/dist/collection/components/max-width-container/max-width-container.js +80 -80
- package/dist/collection/components/my-component/my-component.css +3 -3
- package/dist/collection/components/my-component/my-component.js +82 -82
- package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js +287 -287
- package/dist/collection/components/ptc-accordion/ptc-accordion.js +78 -78
- package/dist/collection/components/ptc-announcement/ptc-announcement.js +238 -238
- package/dist/collection/components/ptc-background-video/ptc-background-video.js +102 -102
- package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +22 -22
- package/dist/collection/components/ptc-button/ptc-button.js +283 -283
- package/dist/collection/components/ptc-card/ptc-card.js +344 -344
- package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js +116 -116
- package/dist/collection/components/ptc-card-content/ptc-card-content.js +212 -212
- package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js +214 -214
- package/dist/collection/components/ptc-checkbox/ptc-checkbox.js +152 -152
- package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js +586 -586
- package/dist/collection/components/ptc-container/ptc-container.js +120 -120
- package/dist/collection/components/ptc-date/ptc-date.js +190 -190
- package/dist/collection/components/ptc-dropdown/ptc-dropdown.js +162 -162
- package/dist/collection/components/ptc-dynamic-card/media/nav-active-dotslick.svg +15 -15
- package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js +182 -182
- package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js +122 -122
- package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js +113 -113
- package/dist/collection/components/ptc-hero/ptc-hero.js +86 -86
- package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js +78 -78
- package/dist/collection/components/ptc-icon-list/ptc-icon-list.js +127 -127
- package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.js +87 -87
- package/dist/collection/components/ptc-img/ptc-img.js +293 -293
- package/dist/collection/components/ptc-link/ptc-link.js +222 -222
- package/dist/collection/components/ptc-list/ptc-list.js +99 -99
- package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -5
- package/dist/collection/components/ptc-lottie/ptc-lottie.js +62 -62
- package/dist/collection/components/ptc-media-card/ptc-media-card.js +216 -216
- package/dist/collection/components/ptc-minimized-footer/ptc-minimized-footer.js +18 -18
- package/dist/collection/components/ptc-minimized-header/ptc-minimized-header.js +81 -81
- package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +190 -190
- package/dist/collection/components/ptc-modal/ptc-modal.js +347 -347
- package/dist/collection/components/ptc-nav-card/ptc-nav-card.js +227 -227
- package/dist/collection/components/ptc-overlay/ptc-overlay.js +131 -131
- package/dist/collection/components/ptc-pagenation/ptc-pagenation.js +447 -447
- package/dist/collection/components/ptc-para/ptc-para.js +224 -224
- package/dist/collection/components/ptc-picture/ptc-picture.js +450 -450
- package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +60 -60
- package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js +70 -70
- package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.js +217 -217
- package/dist/collection/components/ptc-quote/ptc-quote.js +144 -144
- package/dist/collection/components/ptc-readmore/ptc-readmore.js +298 -298
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -3
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +65 -65
- package/dist/collection/components/ptc-search-field/ptc-search-field.js +149 -140
- package/dist/collection/components/ptc-shopping-cart/ptc-shopping-cart.js +97 -97
- package/dist/collection/components/ptc-skeleton/ptc-skeleton.js +139 -139
- package/dist/collection/components/ptc-social-share/ptc-social-share.js +239 -239
- package/dist/collection/components/ptc-spacer/ptc-spacer.css +332 -332
- package/dist/collection/components/ptc-spacer/ptc-spacer.js +97 -97
- package/dist/collection/components/ptc-span/ptc-span.js +87 -87
- package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.js +51 -51
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +72 -72
- package/dist/collection/components/ptc-tab-list/ptc-tab-list.js +177 -177
- package/dist/collection/components/ptc-tabs/ptc-tab.js +121 -121
- package/dist/collection/components/ptc-tabs/ptc-tabs.js +104 -104
- package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js +166 -166
- package/dist/collection/components/ptc-title/ptc-title.js +310 -310
- package/dist/collection/components/ptc-tooltip/ptc-tooltip.js +267 -267
- package/dist/collection/components/ptc-two-column-media/ptc-two-column-media.js +48 -48
- package/dist/collection/components/tab-content/tab-content.js +84 -84
- package/dist/collection/components/tab-header/tab-header.js +154 -154
- package/dist/collection/index.js +1 -1
- package/dist/collection/media/svg-imgs/Back-arrow.svg +11 -11
- package/dist/collection/media/svg-imgs/close.svg +10 -10
- package/dist/collection/media/svg-imgs/ptc-shopping-cart-black.svg +3 -3
- package/dist/collection/media/svg-imgs/ptc-shopping-cart-white.svg +3 -3
- package/dist/collection/media/svg-imgs/slider-arrow-left.svg +18 -18
- package/dist/collection/media/svg-imgs/slider-arrow-right.svg +18 -18
- package/dist/collection/media/svg-imgs/union.svg +3 -3
- package/dist/collection/utils/component.js +3 -3
- package/dist/collection/utils/interfaces.js +11 -11
- package/dist/collection/utils/utils.js +92 -92
- package/dist/custom-elements/index.js +3909 -3900
- package/dist/esm/bundle-example.entry.js +30 -30
- package/dist/esm/dropdown-item.entry.js +10 -10
- package/dist/esm/icon-asset.entry.js +42 -42
- package/dist/esm/list-item.entry.js +19 -19
- package/dist/esm/lottie-player.entry.js +354 -354
- package/dist/esm/max-width-container.entry.js +29 -29
- package/dist/esm/my-component.entry.js +15 -15
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/ptc-accordion-item.entry.js +83 -83
- package/dist/esm/ptc-accordion.entry.js +35 -35
- package/dist/esm/ptc-announcement.entry.js +50 -50
- package/dist/esm/ptc-background-video.entry.js +16 -16
- package/dist/esm/ptc-breadcrumb.entry.js +12 -12
- package/dist/esm/ptc-button.entry.js +35 -35
- package/dist/esm/ptc-card-bottom_3.entry.js +122 -122
- package/dist/esm/ptc-card-content.entry.js +57 -57
- package/dist/esm/ptc-card_6.entry.js +441 -441
- package/dist/esm/ptc-checkbox.entry.js +50 -50
- package/dist/esm/ptc-collapse-list.entry.js +346 -346
- package/dist/esm/ptc-container.entry.js +32 -32
- package/dist/esm/ptc-dropdown.entry.js +64 -64
- package/dist/esm/ptc-dynamic-card.entry.js +46 -46
- package/dist/esm/ptc-ellipsis-dropdown.entry.js +38 -38
- package/dist/esm/ptc-filter-tag.entry.js +57 -57
- package/dist/esm/ptc-hero-footer-cta.entry.js +11 -11
- package/dist/esm/ptc-hero.entry.js +18 -18
- package/dist/esm/ptc-icon-list.entry.js +21 -21
- package/dist/esm/ptc-icon-minimize.entry.js +36 -36
- package/dist/esm/ptc-link.entry.js +30 -30
- package/dist/esm/ptc-list.entry.js +49 -49
- package/dist/esm/ptc-lottie.entry.js +10 -10
- package/dist/esm/ptc-media-card.entry.js +24 -24
- package/dist/esm/ptc-minimized-footer.entry.js +8 -8
- package/dist/esm/ptc-minimized-header.entry.js +11 -11
- package/dist/esm/ptc-mobile-select.entry.js +53 -53
- package/dist/esm/ptc-modal.entry.js +143 -143
- package/dist/esm/ptc-nav-card.entry.js +39 -39
- package/dist/esm/ptc-overlay.entry.js +23 -23
- package/dist/esm/ptc-pagenation.entry.js +209 -209
- package/dist/esm/ptc-previous-url.entry.js +10 -10
- package/dist/esm/ptc-pricing-block.entry.js +20 -20
- package/dist/esm/ptc-pricing-tabs.entry.js +101 -101
- package/dist/esm/ptc-quote.entry.js +23 -23
- package/dist/esm/ptc-readmore.entry.js +73 -73
- package/dist/esm/ptc-responsive-wrapper.entry.js +54 -54
- package/dist/esm/ptc-search-field.entry.js +51 -42
- package/dist/esm/ptc-shopping-cart.entry.js +50 -50
- package/dist/esm/ptc-social-share.entry.js +59 -59
- package/dist/esm/ptc-span.entry.js +18 -18
- package/dist/esm/ptc-sticky-icons.entry.js +32 -32
- package/dist/esm/ptc-svg-btn.entry.js +73 -73
- package/dist/esm/ptc-tab-list.entry.js +125 -125
- package/dist/esm/ptc-tab.entry.js +20 -20
- package/dist/esm/ptc-tabs.entry.js +47 -47
- package/dist/esm/ptc-text-copy-with-background.entry.js +27 -27
- package/dist/esm/ptc-title.entry.js +67 -67
- package/dist/esm/ptc-tooltip.entry.js +79 -79
- package/dist/esm/ptc-two-column-media.entry.js +15 -15
- package/dist/esm/tab-content.entry.js +27 -27
- package/dist/esm/tab-header.entry.js +46 -46
- package/dist/esm/{utils-38decc43.js → utils-f937097d.js} +90 -90
- package/dist/ptcw-design/media/brands.svg +1381 -1381
- package/dist/ptcw-design/media/designer.svg +387 -387
- package/dist/ptcw-design/media/nav-active-dotslick.svg +15 -15
- package/dist/ptcw-design/media/regular.svg +463 -463
- package/dist/ptcw-design/media/solid.svg +3013 -3013
- package/dist/ptcw-design/media/svg-with-js.min.css +4 -4
- package/dist/ptcw-design/{p-8bcb2fab.entry.js → p-32b81dde.entry.js} +1 -1
- package/dist/ptcw-design/{p-b48a3e6f.entry.js → p-45c0076d.entry.js} +1 -1
- package/dist/ptcw-design/{p-fa17a02e.entry.js → p-8d210676.entry.js} +1 -1
- package/dist/ptcw-design/{p-9a18b306.entry.js → p-a4db6bb8.entry.js} +1 -1
- package/dist/ptcw-design/p-a6960def.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/bundle-example/bundle-example.d.ts +10 -10
- package/dist/types/components/dropdown-item/dropdown-item.d.ts +5 -5
- package/dist/types/components/icon-asset/icon-asset.d.ts +40 -40
- package/dist/types/components/list-item/list-item.d.ts +8 -8
- package/dist/types/components/max-width-container/max-width-container.d.ts +9 -9
- package/dist/types/components/my-component/my-component.d.ts +16 -16
- package/dist/types/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.d.ts +59 -59
- package/dist/types/components/ptc-accordion/ptc-accordion.d.ts +13 -13
- package/dist/types/components/ptc-announcement/ptc-announcement.d.ts +51 -51
- package/dist/types/components/ptc-background-video/ptc-background-video.d.ts +26 -26
- package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +4 -4
- package/dist/types/components/ptc-button/ptc-button.d.ts +60 -60
- package/dist/types/components/ptc-card/ptc-card.d.ts +67 -67
- package/dist/types/components/ptc-card-bottom/ptc-card-bottom.d.ts +15 -15
- package/dist/types/components/ptc-card-content/ptc-card-content.d.ts +19 -19
- package/dist/types/components/ptc-card-wrapper/ptc-card-wrapper.d.ts +24 -24
- package/dist/types/components/ptc-checkbox/ptc-checkbox.d.ts +14 -14
- package/dist/types/components/ptc-collapse-list/ptc-collapse-list.d.ts +56 -56
- package/dist/types/components/ptc-container/ptc-container.d.ts +12 -12
- package/dist/types/components/ptc-date/ptc-date.d.ts +41 -41
- package/dist/types/components/ptc-dropdown/ptc-dropdown.d.ts +19 -19
- package/dist/types/components/ptc-dynamic-card/ptc-dynamic-card.d.ts +24 -24
- package/dist/types/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.d.ts +12 -12
- package/dist/types/components/ptc-filter-tag/ptc-filter-tag.d.ts +17 -17
- package/dist/types/components/ptc-hero/ptc-hero.d.ts +16 -16
- package/dist/types/components/ptc-hero-footer-cta/ptc-hero-footer-cta.d.ts +6 -6
- package/dist/types/components/ptc-icon-list/ptc-icon-list.d.ts +21 -21
- package/dist/types/components/ptc-icon-minimize/ptc-icon-minimize.d.ts +9 -9
- package/dist/types/components/ptc-img/ptc-img.d.ts +51 -51
- package/dist/types/components/ptc-link/ptc-link.d.ts +44 -44
- package/dist/types/components/ptc-list/ptc-list.d.ts +8 -8
- package/dist/types/components/ptc-lottie/ptc-lottie.d.ts +12 -12
- package/dist/types/components/ptc-media-card/ptc-media-card.d.ts +45 -45
- package/dist/types/components/ptc-minimized-footer/ptc-minimized-footer.d.ts +3 -3
- package/dist/types/components/ptc-minimized-header/ptc-minimized-header.d.ts +6 -6
- package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +36 -36
- package/dist/types/components/ptc-modal/ptc-modal.d.ts +59 -59
- package/dist/types/components/ptc-nav-card/ptc-nav-card.d.ts +46 -46
- package/dist/types/components/ptc-overlay/ptc-overlay.d.ts +21 -21
- package/dist/types/components/ptc-pagenation/ptc-pagenation.d.ts +31 -31
- package/dist/types/components/ptc-para/ptc-para.d.ts +43 -43
- package/dist/types/components/ptc-picture/ptc-picture.d.ts +93 -93
- package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +5 -5
- package/dist/types/components/ptc-pricing-block/ptc-pricing-block.d.ts +7 -7
- package/dist/types/components/ptc-pricing-tabs/ptc-pricing-tabs.d.ts +43 -43
- package/dist/types/components/ptc-quote/ptc-quote.d.ts +29 -29
- package/dist/types/components/ptc-readmore/ptc-readmore.d.ts +57 -57
- package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -8
- package/dist/types/components/ptc-search-field/ptc-search-field.d.ts +15 -14
- package/dist/types/components/ptc-shopping-cart/ptc-shopping-cart.d.ts +6 -6
- package/dist/types/components/ptc-skeleton/ptc-skeleton.d.ts +10 -10
- package/dist/types/components/ptc-social-share/ptc-social-share.d.ts +33 -33
- package/dist/types/components/ptc-spacer/ptc-spacer.d.ts +16 -16
- package/dist/types/components/ptc-span/ptc-span.d.ts +16 -16
- package/dist/types/components/ptc-sticky-icons/ptc-sticky-icons.d.ts +7 -7
- package/dist/types/components/ptc-svg-btn/ptc-svg-btn.d.ts +12 -12
- package/dist/types/components/ptc-tab-list/ptc-tab-list.d.ts +19 -19
- package/dist/types/components/ptc-tabs/ptc-tab.d.ts +9 -9
- package/dist/types/components/ptc-tabs/ptc-tabs.d.ts +10 -10
- package/dist/types/components/ptc-text-copy-with-background/ptc-text-copy-with-background.d.ts +33 -33
- package/dist/types/components/ptc-title/ptc-title.d.ts +54 -54
- package/dist/types/components/ptc-tooltip/ptc-tooltip.d.ts +47 -47
- package/dist/types/components/ptc-two-column-media/ptc-two-column-media.d.ts +9 -9
- package/dist/types/components/tab-content/tab-content.d.ts +12 -12
- package/dist/types/components/tab-header/tab-header.d.ts +18 -18
- package/dist/types/components.d.ts +128 -128
- package/dist/types/global.d.ts +1072 -1072
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/component.d.ts +1 -1
- package/dist/types/utils/interfaces.d.ts +31 -31
- package/dist/types/utils/utils.d.ts +5 -5
- package/package.json +61 -61
- package/readme.md +18 -18
- package/dist/ptcw-design/p-2881a1ba.entry.js +0 -1
- /package/dist/ptcw-design/{p-36665caa.js → p-ea875d9e.js} +0 -0
|
@@ -2,33 +2,33 @@ import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
|
|
|
2
2
|
|
|
3
3
|
const ptcTextCopyWithBackgroundCss = ":host{display:block;position:relative;width:100%;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.55}@media only screen and (min-width: 1200px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-03)}}:host(.tab-cta-with-background){min-height:400px;padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center}}@media only screen and (min-width: 1200px){:host(.tab-cta-with-background){padding:var(--ptc-element-spacing-08)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}:host(.bottom-right) .tcb-top-slit{top:auto;bottom:0;transform:scale(1.5, 1.5)}:host(.case-studies){min-height:25rem;height:auto;margin-bottom:10rem;display:flex;align-items:center}@media only screen and (min-width: 768px){:host(.case-studies){min-height:33.75rem;height:auto;margin-bottom:0;padding-top:var(--ptc-layout-spacing-06)}}:host(.case-studies) .card-wrap{position:relative;border:1px solid transparent;width:100%;height:100%;max-width:540px;bottom:-13rem}@media only screen and (min-width: 768px){:host(.case-studies) .card-wrap{bottom:auto}}:host(.case-studies) .card-wrap::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;top:0px;left:0px;animation:widthAnimate 0.2s linear 0.2s 1 forwards}:host(.case-studies) .card-wrap::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;top:0px;right:0px;animation:heightAnimate 0.2s linear 0.4s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border{border:1px solid transparent;position:absolute;left:-1px;right:0;bottom:0px;top:-1px;width:100%;height:100%;box-shadow:var(--ptc-shadow-x-small)}:host(.case-studies) .card-wrap .card-animated-border::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;bottom:0px;right:0px;animation:widthAnimate 0.2s linear 0.6s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;bottom:0px;left:0px;animation:heightAnimate 0.2s linear 0.8s 1 forwards}:host(.case-studies) .card-wrap .card-content{opacity:0;animation:fadeIn 0.5s ease-in 0.9s 1 forwards;background-color:transparent;width:100%;height:100%}:host(.case-studies) .card-wrap .card-content .card-layout{padding:var(--ptc-layout-spacing-04);background-color:#fff}@keyframes widthAnimate{0%{width:0}100%{width:100%}}@keyframes heightAnimate{0%{height:0}100%{height:100%}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host(.case-studies) .ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){:host(.case-studies) .ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}";
|
|
4
4
|
|
|
5
|
-
const PtcTextCopyWithBackground = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.type = 'text-copy-with-background';
|
|
9
|
-
this.backgroundImage = undefined;
|
|
10
|
-
this.ImageAltText = undefined;
|
|
11
|
-
this.topSlitBackgroundColor = undefined;
|
|
12
|
-
this.slitPosition = 'top-right';
|
|
13
|
-
this.isBackgroundBlur = false;
|
|
14
|
-
this.overlay = true;
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
const classMap = this.getCssClassMap();
|
|
18
|
-
return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ?
|
|
19
|
-
h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
|
|
20
|
-
h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage }))
|
|
21
|
-
: null, this.overlay &&
|
|
22
|
-
h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
|
|
23
|
-
h("div", { class: "ptc-container-lg" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
|
|
24
|
-
}
|
|
25
|
-
getCssClassMap() {
|
|
26
|
-
return {
|
|
27
|
-
[this.type]: true,
|
|
28
|
-
[this.slitPosition]: true
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
};
|
|
5
|
+
const PtcTextCopyWithBackground = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.type = 'text-copy-with-background';
|
|
9
|
+
this.backgroundImage = undefined;
|
|
10
|
+
this.ImageAltText = undefined;
|
|
11
|
+
this.topSlitBackgroundColor = undefined;
|
|
12
|
+
this.slitPosition = 'top-right';
|
|
13
|
+
this.isBackgroundBlur = false;
|
|
14
|
+
this.overlay = true;
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
const classMap = this.getCssClassMap();
|
|
18
|
+
return (h(Host, { class: classMap }, h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } }, h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), this.backgroundImage ?
|
|
19
|
+
h("div", { class: "" }, h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }), this.isBackgroundBlur &&
|
|
20
|
+
h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage }))
|
|
21
|
+
: null, this.overlay &&
|
|
22
|
+
h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
|
|
23
|
+
h("div", { class: "ptc-container-lg" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
|
|
24
|
+
}
|
|
25
|
+
getCssClassMap() {
|
|
26
|
+
return {
|
|
27
|
+
[this.type]: true,
|
|
28
|
+
[this.slitPosition]: true
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
32
|
PtcTextCopyWithBackground.style = ptcTextCopyWithBackgroundCss;
|
|
33
33
|
|
|
34
34
|
export { PtcTextCopyWithBackground as ptc_text_copy_with_background };
|
|
@@ -2,73 +2,73 @@ import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
|
|
|
2
2
|
|
|
3
3
|
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,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.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,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.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,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.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,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.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,div.solid.sc-ptc-title h2.sc-ptc-title,div.solid.sc-ptc-title h3.sc-ptc-title,div.solid.sc-ptc-title h4.sc-ptc-title,div.solid.sc-ptc-title h5.sc-ptc-title,div.solid.sc-ptc-title h6.sc-ptc-title{padding-top:4px}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,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-03);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,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:56px;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,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.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,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.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) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.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-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}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,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.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,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.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,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.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,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.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,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.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,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.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,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.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,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.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,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.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,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.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,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.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,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.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,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.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,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.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,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.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,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.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,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.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,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.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,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){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,div.xx-large.sc-ptc-title h4.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,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){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,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.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,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 768px){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,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxxx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h6.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,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.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,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.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,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.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,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.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,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.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,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.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,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}div.block.sc-ptc-title h1.sc-ptc-title,div.block.sc-ptc-title h2.sc-ptc-title,div.block.sc-ptc-title h3.sc-ptc-title,div.block.sc-ptc-title h4.sc-ptc-title,div.block.sc-ptc-title h5.sc-ptc-title,div.block.sc-ptc-title h6.sc-ptc-title{display:block}";
|
|
4
4
|
|
|
5
|
-
const PtcTitle = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.isPlmHub = false;
|
|
9
|
-
this.type = 'h2';
|
|
10
|
-
this.textAlign = undefined;
|
|
11
|
-
this.upperline = 'dotted';
|
|
12
|
-
this.titleShadow = undefined;
|
|
13
|
-
this.titleColor = 'gray';
|
|
14
|
-
this.titleMargin = undefined;
|
|
15
|
-
this.titleWeight = undefined;
|
|
16
|
-
this.titleSize = undefined;
|
|
17
|
-
this.titleHeight = 'paragraph';
|
|
18
|
-
this.styles = undefined;
|
|
19
|
-
this.ellipsisLineCutoff = undefined;
|
|
20
|
-
this.titleDisplay = 'inline-block';
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
const classMap = this.getCssClassMap();
|
|
24
|
-
const cutOff = this.getLineCuttoff();
|
|
25
|
-
let TagType;
|
|
26
|
-
switch (this.type) {
|
|
27
|
-
case 'h1':
|
|
28
|
-
TagType = 'h1';
|
|
29
|
-
break;
|
|
30
|
-
case 'h3':
|
|
31
|
-
TagType = 'h3';
|
|
32
|
-
break;
|
|
33
|
-
case 'h4':
|
|
34
|
-
TagType = 'h4';
|
|
35
|
-
break;
|
|
36
|
-
case 'h5':
|
|
37
|
-
TagType = 'h5';
|
|
38
|
-
break;
|
|
39
|
-
case 'h6':
|
|
40
|
-
TagType = 'h6';
|
|
41
|
-
break;
|
|
42
|
-
default:
|
|
43
|
-
TagType = 'h2';
|
|
44
|
-
}
|
|
45
|
-
return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
|
|
46
|
-
}
|
|
47
|
-
getCssClassMap() {
|
|
48
|
-
return {
|
|
49
|
-
[this.textAlign]: !!this.textAlign ? true : false,
|
|
50
|
-
[this.upperline]: true,
|
|
51
|
-
[this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
|
|
52
|
-
[this.titleMargin]: !!this.titleMargin ? true : false,
|
|
53
|
-
[this.titleShadow]: !!this.titleShadow ? true : false,
|
|
54
|
-
[this.titleWeight]: !!this.titleWeight ? true : false,
|
|
55
|
-
[this.titleSize]: !!this.titleSize ? true : false,
|
|
56
|
-
[this.titleHeight]: !!this.titleHeight ? true : false,
|
|
57
|
-
[this.titleColor]: !!this.titleColor ? true : false,
|
|
58
|
-
['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
|
|
59
|
-
[this.titleDisplay]: !!this.titleDisplay ? true : false,
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
getLineCuttoff() {
|
|
63
|
-
let result;
|
|
64
|
-
if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
|
|
65
|
-
result = {
|
|
66
|
-
['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
return result;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
5
|
+
const PtcTitle = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.isPlmHub = false;
|
|
9
|
+
this.type = 'h2';
|
|
10
|
+
this.textAlign = undefined;
|
|
11
|
+
this.upperline = 'dotted';
|
|
12
|
+
this.titleShadow = undefined;
|
|
13
|
+
this.titleColor = 'gray';
|
|
14
|
+
this.titleMargin = undefined;
|
|
15
|
+
this.titleWeight = undefined;
|
|
16
|
+
this.titleSize = undefined;
|
|
17
|
+
this.titleHeight = 'paragraph';
|
|
18
|
+
this.styles = undefined;
|
|
19
|
+
this.ellipsisLineCutoff = undefined;
|
|
20
|
+
this.titleDisplay = 'inline-block';
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
const classMap = this.getCssClassMap();
|
|
24
|
+
const cutOff = this.getLineCuttoff();
|
|
25
|
+
let TagType;
|
|
26
|
+
switch (this.type) {
|
|
27
|
+
case 'h1':
|
|
28
|
+
TagType = 'h1';
|
|
29
|
+
break;
|
|
30
|
+
case 'h3':
|
|
31
|
+
TagType = 'h3';
|
|
32
|
+
break;
|
|
33
|
+
case 'h4':
|
|
34
|
+
TagType = 'h4';
|
|
35
|
+
break;
|
|
36
|
+
case 'h5':
|
|
37
|
+
TagType = 'h5';
|
|
38
|
+
break;
|
|
39
|
+
case 'h6':
|
|
40
|
+
TagType = 'h6';
|
|
41
|
+
break;
|
|
42
|
+
default:
|
|
43
|
+
TagType = 'h2';
|
|
44
|
+
}
|
|
45
|
+
return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
|
|
46
|
+
}
|
|
47
|
+
getCssClassMap() {
|
|
48
|
+
return {
|
|
49
|
+
[this.textAlign]: !!this.textAlign ? true : false,
|
|
50
|
+
[this.upperline]: true,
|
|
51
|
+
[this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
|
|
52
|
+
[this.titleMargin]: !!this.titleMargin ? true : false,
|
|
53
|
+
[this.titleShadow]: !!this.titleShadow ? true : false,
|
|
54
|
+
[this.titleWeight]: !!this.titleWeight ? true : false,
|
|
55
|
+
[this.titleSize]: !!this.titleSize ? true : false,
|
|
56
|
+
[this.titleHeight]: !!this.titleHeight ? true : false,
|
|
57
|
+
[this.titleColor]: !!this.titleColor ? true : false,
|
|
58
|
+
['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
|
|
59
|
+
[this.titleDisplay]: !!this.titleDisplay ? true : false,
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
getLineCuttoff() {
|
|
63
|
+
let result;
|
|
64
|
+
if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
|
|
65
|
+
result = {
|
|
66
|
+
['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
return result;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
72
|
PtcTitle.style = ptcTitleCss;
|
|
73
73
|
|
|
74
74
|
export { PtcTitle as ptc_title };
|
|
@@ -2,85 +2,85 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-40
|
|
|
2
2
|
|
|
3
3
|
const ptcTooltipCss = ":host{position:relative}:host(.inline){display:inline}:host(.block){display:block}.text-ellipsis{position:relative;display:inline}.text-ellipsis:not(.truncated){z-index:auto !important}.z-auto{z-index:auto}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-999{z-index:999}.tooltip{position:absolute;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:2px;width:273px;height:auto;visibility:hidden;text-align:left;text-shadow:none;white-space:normal}.tooltip.danger{color:var(--color-red-07);font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);border:2px solid var(--color-red-07);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);padding:var(--ptc-element-spacing-06)}.tooltip.danger a{color:var(--color-blue-07)}.tooltip.bottom{bottom:-12px;transform:translateY(100%)}.tooltip.bottom::after{top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.left{bottom:-12px;transform:translate(-80%, 100%)}.tooltip.left::after{top:1px;right:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.right{bottom:-12px;transform:translateY(100%);right:0px}.tooltip.right::after{top:1px;left:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.top{top:-8px;transform:translateY(-100%)}.tooltip.top::after{left:50%;bottom:1px;transform:translate(-50%, 100%);border:8px solid transparent;border-top:8px solid var(--color-gray-09)}.tooltip.bottom-right{bottom:-12px;transform:translate(-60%, 100%)}.tooltip.bottom-right::after{top:1px;left:75%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.danger::after{top:0;border-bottom:8px solid var(--color-red-07)}.truncated{cursor:help}.truncated:hover+.tooltip{visibility:visible;z-index:9999}.wrapper-content{display:inline-block;position:relative}.wrapper-content .tooltip{width:auto;min-width:72px;max-width:273px}.wrapper-content slot:hover+.tooltip{visibility:visible;z-index:9999}.tooltip::after{content:\"\";position:absolute}.ellipsis-by-line-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}";
|
|
4
4
|
|
|
5
|
-
const PtcTooltip = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.textDisplay = 'inline';
|
|
9
|
-
this.maxLength = 45;
|
|
10
|
-
this.textLines = undefined;
|
|
11
|
-
this.description = 'This is a tooltip text placeholder';
|
|
12
|
-
this.zIndex = 'z-auto';
|
|
13
|
-
this.position = 'bottom';
|
|
14
|
-
this.styles = undefined;
|
|
15
|
-
this.mode = 'text-only';
|
|
16
|
-
this.theme = 'standard';
|
|
17
|
-
}
|
|
18
|
-
addTruncatedClass() {
|
|
19
|
-
const appRoot = this.el.shadowRoot;
|
|
20
|
-
const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
|
|
21
|
-
text.forEach(t => {
|
|
22
|
-
t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
// Created this function to initialize the truncate function on specific elements like tabs
|
|
26
|
-
enableAddTruncatedClass(element) {
|
|
27
|
-
const allTabHeaders = document.querySelectorAll(element);
|
|
28
|
-
for (const element of Array.from(allTabHeaders)) {
|
|
29
|
-
let tabHeader = element;
|
|
30
|
-
if (tabHeader) {
|
|
31
|
-
tabHeader.addEventListener('click', () => {
|
|
32
|
-
setTimeout(() => {
|
|
33
|
-
this.addTruncatedClass();
|
|
34
|
-
}, 100);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
componentDidLoad() {
|
|
40
|
-
this.addTruncatedClass();
|
|
41
|
-
this.enableAddTruncatedClass('tab-header');
|
|
42
|
-
this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
|
|
43
|
-
document.addEventListener("readystatechange", () => {
|
|
44
|
-
if (document.readyState === "complete") {
|
|
45
|
-
this.addTruncatedClass();
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
render() {
|
|
50
|
-
if (this.mode == 'wrapper') {
|
|
51
|
-
return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("slot", null), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
|
|
52
|
-
}
|
|
53
|
-
else {
|
|
54
|
-
const classMap = this.getCssClassMap();
|
|
55
|
-
const cutOff = this.getLineCuttoff();
|
|
56
|
-
let truncatedText = this.description.substring(0, this.maxLength);
|
|
57
|
-
if (this.description.length > this.maxLength) {
|
|
58
|
-
const lastSpace = truncatedText.lastIndexOf(' ');
|
|
59
|
-
truncatedText = truncatedText.substring(0, lastSpace);
|
|
60
|
-
truncatedText += '... ';
|
|
61
|
-
}
|
|
62
|
-
return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description) : h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)));
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
getCssClassMap() {
|
|
66
|
-
return {
|
|
67
|
-
// ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
|
|
68
|
-
['text-ellipsis']: true,
|
|
69
|
-
[this.zIndex]: this.description.length > this.maxLength ? true : false,
|
|
70
|
-
['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
|
|
71
|
-
};
|
|
72
|
-
}
|
|
73
|
-
getLineCuttoff() {
|
|
74
|
-
let result;
|
|
75
|
-
if (this.textLines && this.textLines > 0) {
|
|
76
|
-
result = {
|
|
77
|
-
['-webkit-line-clamp']: `${this.textLines}`,
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
return result;
|
|
81
|
-
}
|
|
82
|
-
get el() { return getElement(this); }
|
|
83
|
-
};
|
|
5
|
+
const PtcTooltip = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.textDisplay = 'inline';
|
|
9
|
+
this.maxLength = 45;
|
|
10
|
+
this.textLines = undefined;
|
|
11
|
+
this.description = 'This is a tooltip text placeholder';
|
|
12
|
+
this.zIndex = 'z-auto';
|
|
13
|
+
this.position = 'bottom';
|
|
14
|
+
this.styles = undefined;
|
|
15
|
+
this.mode = 'text-only';
|
|
16
|
+
this.theme = 'standard';
|
|
17
|
+
}
|
|
18
|
+
addTruncatedClass() {
|
|
19
|
+
const appRoot = this.el.shadowRoot;
|
|
20
|
+
const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
|
|
21
|
+
text.forEach(t => {
|
|
22
|
+
t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
// Created this function to initialize the truncate function on specific elements like tabs
|
|
26
|
+
enableAddTruncatedClass(element) {
|
|
27
|
+
const allTabHeaders = document.querySelectorAll(element);
|
|
28
|
+
for (const element of Array.from(allTabHeaders)) {
|
|
29
|
+
let tabHeader = element;
|
|
30
|
+
if (tabHeader) {
|
|
31
|
+
tabHeader.addEventListener('click', () => {
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
this.addTruncatedClass();
|
|
34
|
+
}, 100);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
componentDidLoad() {
|
|
40
|
+
this.addTruncatedClass();
|
|
41
|
+
this.enableAddTruncatedClass('tab-header');
|
|
42
|
+
this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
|
|
43
|
+
document.addEventListener("readystatechange", () => {
|
|
44
|
+
if (document.readyState === "complete") {
|
|
45
|
+
this.addTruncatedClass();
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
render() {
|
|
50
|
+
if (this.mode == 'wrapper') {
|
|
51
|
+
return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), h("div", { class: "wrapper-content" }, h("slot", null), h("div", { class: `tooltip ${this.position} ${this.theme}` }, h("slot", { name: "description" }), this.description))));
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
const classMap = this.getCssClassMap();
|
|
55
|
+
const cutOff = this.getLineCuttoff();
|
|
56
|
+
let truncatedText = this.description.substring(0, this.maxLength);
|
|
57
|
+
if (this.description.length > this.maxLength) {
|
|
58
|
+
const lastSpace = truncatedText.lastIndexOf(' ');
|
|
59
|
+
truncatedText = truncatedText.substring(0, lastSpace);
|
|
60
|
+
truncatedText += '... ';
|
|
61
|
+
}
|
|
62
|
+
return (h(Host, { class: this.textDisplay }, this.styles && h("style", null, this.styles), this.textLines > 0 && !!this.textLines ? h("div", { class: "ellipsis-by-line-boxing", style: cutOff }, this.description) : h("div", { class: classMap }, truncatedText), h("div", { class: `tooltip ${this.position} ${this.theme}` }, this.description)));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
getCssClassMap() {
|
|
66
|
+
return {
|
|
67
|
+
// ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
|
|
68
|
+
['text-ellipsis']: true,
|
|
69
|
+
[this.zIndex]: this.description.length > this.maxLength ? true : false,
|
|
70
|
+
['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
getLineCuttoff() {
|
|
74
|
+
let result;
|
|
75
|
+
if (this.textLines && this.textLines > 0) {
|
|
76
|
+
result = {
|
|
77
|
+
['-webkit-line-clamp']: `${this.textLines}`,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
return result;
|
|
81
|
+
}
|
|
82
|
+
get el() { return getElement(this); }
|
|
83
|
+
};
|
|
84
84
|
PtcTooltip.style = ptcTooltipCss;
|
|
85
85
|
|
|
86
86
|
export { PtcTooltip as ptc_tooltip };
|
|
@@ -2,21 +2,21 @@ import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
|
|
|
2
2
|
|
|
3
3
|
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}}";
|
|
4
4
|
|
|
5
|
-
const PtcTwoColumnMedia = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.componentType = undefined;
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
const classMap = this.getCssClassMap();
|
|
12
|
-
return (h(Host, { class: classMap }, h("slot", null)));
|
|
13
|
-
}
|
|
14
|
-
getCssClassMap() {
|
|
15
|
-
return {
|
|
16
|
-
[this.componentType]: this.componentType ? true : false
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
};
|
|
5
|
+
const PtcTwoColumnMedia = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.componentType = undefined;
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
const classMap = this.getCssClassMap();
|
|
12
|
+
return (h(Host, { class: classMap }, h("slot", null)));
|
|
13
|
+
}
|
|
14
|
+
getCssClassMap() {
|
|
15
|
+
return {
|
|
16
|
+
[this.componentType]: this.componentType ? true : false
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
20
|
PtcTwoColumnMedia.style = ptcTwoColumnMediaCss;
|
|
21
21
|
|
|
22
22
|
export { PtcTwoColumnMedia as ptc_two_column_media };
|
|
@@ -2,33 +2,33 @@ import { r as registerInstance, h } from './index-40bc29fc.js';
|
|
|
2
2
|
|
|
3
3
|
const tabContentCss = ".tab-content{display:none}.tab-content p,.tab-content ul,.tab-content ol,.tab-content span,.tab-content h1,.tab-content h2,.tab-content h3,.tab-content h4,.tab-content h5,.tab-content h6{max-width:720px;font-weight:var(--ptc-font-weight-normal)}.tab-content-selected{display:block}.tab-content h3{font-size:24px;font-weight:700}.tab-content :first-child{margin-top:0px}.tab-content :last-child{margin-bottom:0px}";
|
|
4
4
|
|
|
5
|
-
const TabContent = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.name = undefined;
|
|
9
|
-
this.isSelected = false;
|
|
10
|
-
}
|
|
11
|
-
async getChild() {
|
|
12
|
-
return {
|
|
13
|
-
select: this.select.bind(this),
|
|
14
|
-
unselect: this.unselect.bind(this),
|
|
15
|
-
name: this.name
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
unselect() {
|
|
19
|
-
this.isSelected = false;
|
|
20
|
-
}
|
|
21
|
-
select() {
|
|
22
|
-
this.isSelected = true;
|
|
23
|
-
}
|
|
24
|
-
render() {
|
|
25
|
-
const classes = {
|
|
26
|
-
'tab-content': true,
|
|
27
|
-
'tab-content-selected': this.isSelected
|
|
28
|
-
};
|
|
29
|
-
return (h("div", { class: classes }, h("slot", null)));
|
|
30
|
-
}
|
|
31
|
-
};
|
|
5
|
+
const TabContent = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.name = undefined;
|
|
9
|
+
this.isSelected = false;
|
|
10
|
+
}
|
|
11
|
+
async getChild() {
|
|
12
|
+
return {
|
|
13
|
+
select: this.select.bind(this),
|
|
14
|
+
unselect: this.unselect.bind(this),
|
|
15
|
+
name: this.name
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
unselect() {
|
|
19
|
+
this.isSelected = false;
|
|
20
|
+
}
|
|
21
|
+
select() {
|
|
22
|
+
this.isSelected = true;
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
const classes = {
|
|
26
|
+
'tab-content': true,
|
|
27
|
+
'tab-content-selected': this.isSelected
|
|
28
|
+
};
|
|
29
|
+
return (h("div", { class: classes }, h("slot", null)));
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
32
|
TabContent.style = tabContentCss;
|
|
33
33
|
|
|
34
34
|
export { TabContent as tab_content };
|
|
@@ -2,52 +2,52 @@ import { r as registerInstance, c as createEvent, h } from './index-40bc29fc.js'
|
|
|
2
2
|
|
|
3
3
|
const tabHeaderCss = ".tab-header{min-height:40px;min-width:40px;padding:5px;margin:0;cursor:pointer;position:relative;display:flex;justify-content:center;align-items:center;border-bottom:2px solid transparent;font-family:\"Raleway\";font-style:normal;font-weight:700;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p);white-space:nowrap;text-align:center;color:var(--color-gray-07);position:relative}.tab-header::after{content:\"\";width:100%;height:2px;background-color:var(--color-gray-02);position:absolute;display:block;left:0;right:0;bottom:-4px}@media (max-width: 599px){.tab-header{min-width:100px;min-width:150px}}.tab-header-selected{color:var(--color-gray-10);font-weight:var(--ptc-font-weight-bold)}.tab-header-selected::after{background-color:var(--color-green-07)}.tooltip{display:none}@media (max-width: 525px){.header-content{text-overflow:ellipsis;overflow:hidden}h2{max-width:100px}h2 .tooltip{display:block;position:absolute;bottom:-12px;transform:translateY(100%);padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 4px;border:none;border-radius:2px;width:273px;height:auto;display:none}h2 .tooltip::after{content:\"\";position:absolute;top:1px;left:50%;transform:translate(-50%, -100%);border-top:8px solid transparent;border-right:8px solid transparent;border-left:8px solid transparent;border-image:initial;border-bottom:8px solid var(--color-gray-09)}h2:hover .tooltip{display:block}}";
|
|
4
4
|
|
|
5
|
-
const TabHeader = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.tabClicked = createEvent(this, "tabClicked", 7);
|
|
9
|
-
this.id = this.generateId();
|
|
10
|
-
this.name = undefined;
|
|
11
|
-
this.tooltip = undefined;
|
|
12
|
-
this.isSelected = false;
|
|
13
|
-
this.tabHeaderText = undefined;
|
|
14
|
-
}
|
|
15
|
-
async getChild() {
|
|
16
|
-
let self = this;
|
|
17
|
-
let myPromise = new Promise(function (resolve) {
|
|
18
|
-
let data = {
|
|
19
|
-
select: self.select.bind(self),
|
|
20
|
-
unselect: self.unselect.bind(self),
|
|
21
|
-
name: self.name,
|
|
22
|
-
id: self.id
|
|
23
|
-
};
|
|
24
|
-
resolve(data);
|
|
25
|
-
});
|
|
26
|
-
let result = await myPromise;
|
|
27
|
-
return result;
|
|
28
|
-
}
|
|
29
|
-
unselect() {
|
|
30
|
-
this.isSelected = false;
|
|
31
|
-
}
|
|
32
|
-
select() {
|
|
33
|
-
this.isSelected = true;
|
|
34
|
-
}
|
|
35
|
-
onClick() {
|
|
36
|
-
this.tabClicked.emit(this.getChild());
|
|
37
|
-
}
|
|
38
|
-
generateId() {
|
|
39
|
-
return Math.random().toString(36).substring(2, 10);
|
|
40
|
-
}
|
|
41
|
-
render() {
|
|
42
|
-
const classes = {
|
|
43
|
-
'tab-header': true,
|
|
44
|
-
'tab-header-selected': this.isSelected
|
|
45
|
-
};
|
|
46
|
-
return [
|
|
47
|
-
h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("span", { class: "header-content" }, h("span", { class: "textCont", style: { display: "none" } }, this.tabHeaderText), h("ptc-tooltip", { "text-display": "inline", "max-length": "32", "z-index": "z-2", description: this.tabHeaderText, position: "bottom" })), this.tooltip && h("div", { class: "tooltip" }, this.tooltip)),
|
|
48
|
-
];
|
|
49
|
-
}
|
|
50
|
-
};
|
|
5
|
+
const TabHeader = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.tabClicked = createEvent(this, "tabClicked", 7);
|
|
9
|
+
this.id = this.generateId();
|
|
10
|
+
this.name = undefined;
|
|
11
|
+
this.tooltip = undefined;
|
|
12
|
+
this.isSelected = false;
|
|
13
|
+
this.tabHeaderText = undefined;
|
|
14
|
+
}
|
|
15
|
+
async getChild() {
|
|
16
|
+
let self = this;
|
|
17
|
+
let myPromise = new Promise(function (resolve) {
|
|
18
|
+
let data = {
|
|
19
|
+
select: self.select.bind(self),
|
|
20
|
+
unselect: self.unselect.bind(self),
|
|
21
|
+
name: self.name,
|
|
22
|
+
id: self.id
|
|
23
|
+
};
|
|
24
|
+
resolve(data);
|
|
25
|
+
});
|
|
26
|
+
let result = await myPromise;
|
|
27
|
+
return result;
|
|
28
|
+
}
|
|
29
|
+
unselect() {
|
|
30
|
+
this.isSelected = false;
|
|
31
|
+
}
|
|
32
|
+
select() {
|
|
33
|
+
this.isSelected = true;
|
|
34
|
+
}
|
|
35
|
+
onClick() {
|
|
36
|
+
this.tabClicked.emit(this.getChild());
|
|
37
|
+
}
|
|
38
|
+
generateId() {
|
|
39
|
+
return Math.random().toString(36).substring(2, 10);
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const classes = {
|
|
43
|
+
'tab-header': true,
|
|
44
|
+
'tab-header-selected': this.isSelected
|
|
45
|
+
};
|
|
46
|
+
return [
|
|
47
|
+
h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("span", { class: "header-content" }, h("span", { class: "textCont", style: { display: "none" } }, this.tabHeaderText), h("ptc-tooltip", { "text-display": "inline", "max-length": "32", "z-index": "z-2", description: this.tabHeaderText, position: "bottom" })), this.tooltip && h("div", { class: "tooltip" }, this.tooltip)),
|
|
48
|
+
];
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
51
|
TabHeader.style = tabHeaderCss;
|
|
52
52
|
|
|
53
53
|
export { TabHeader as tab_header };
|