@ptcwebops/ptcw-design 3.4.4 → 3.4.6
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/dist/cjs/icon-asset_7.cjs.entry.js +589 -0
- package/dist/cjs/list-item.cjs.entry.js +12 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-breadcrumb_2.cjs.entry.js +8 -2
- package/dist/cjs/ptc-value-led-layout.cjs.entry.js +27 -2
- package/dist/cjs/ptc-white-paper.cjs.entry.js +4 -2
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/components/list-item/list-item.css +5 -6
- package/dist/collection/components/list-item/list-item.js +11 -0
- package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.css +8 -12
- package/dist/collection/components/ptc-breadcrumb/ptc-breadcrumb.js +7 -1
- package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.css +4 -2
- package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js +56 -1
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +189 -1
- package/dist/collection/components/ptc-white-paper/ptc-white-paper.js +3 -1
- package/dist/custom-elements/index.js +52 -8
- package/dist/esm/icon-asset_7.entry.js +579 -0
- package/dist/esm/{interfaces-4caedd26.js → interfaces-7c0243be.js} +1 -1
- package/dist/esm/list-item.entry.js +13 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ptc-breadcrumb_2.entry.js +8 -2
- package/dist/esm/ptc-img.entry.js +1 -1
- package/dist/esm/ptc-value-led-layout.entry.js +27 -2
- package/dist/esm/ptc-white-paper.entry.js +4 -2
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/p-097e7844.entry.js +1 -0
- package/dist/ptcw-design/p-37d1bcdc.entry.js +1 -0
- package/dist/ptcw-design/p-4a9f5417.entry.js +1 -0
- package/dist/ptcw-design/{p-7da8c09a.entry.js → p-804dfccf.entry.js} +1 -1
- package/dist/ptcw-design/p-94efc642.entry.js +1 -0
- package/dist/ptcw-design/p-a5e7d4a7.entry.js +1 -0
- package/dist/ptcw-design/{p-711bcdad.js → p-ee1183b2.js} +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/list-item/list-item.d.ts +1 -0
- package/dist/types/components/ptc-breadcrumb/ptc-breadcrumb.d.ts +2 -0
- package/dist/types/components/ptc-value-led-layout/ptc-value-led-layout.d.ts +6 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/cjs/icon-asset_4.cjs.entry.js +0 -298
- package/dist/cjs/ptc-card.cjs.entry.js +0 -85
- package/dist/cjs/ptc-date.cjs.entry.js +0 -61
- package/dist/cjs/ptc-picture.cjs.entry.js +0 -163
- package/dist/esm/icon-asset_4.entry.js +0 -291
- package/dist/esm/ptc-card.entry.js +0 -81
- package/dist/esm/ptc-date.entry.js +0 -57
- package/dist/esm/ptc-picture.entry.js +0 -159
- package/dist/ptcw-design/p-3b449f73.entry.js +0 -1
- package/dist/ptcw-design/p-460332d8.entry.js +0 -1
- package/dist/ptcw-design/p-499565e9.entry.js +0 -1
- package/dist/ptcw-design/p-4e5e248a.entry.js +0 -1
- package/dist/ptcw-design/p-c080ae80.entry.js +0 -1
- package/dist/ptcw-design/p-d4157c0f.entry.js +0 -1
- package/dist/ptcw-design/p-dd106b3a.entry.js +0 -1
- package/dist/ptcw-design/p-e1028727.entry.js +0 -1
|
@@ -0,0 +1,589 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-cd9a1b1a.js');
|
|
6
|
+
const interfaces = require('./interfaces-574e6df7.js');
|
|
7
|
+
|
|
8
|
+
const iconAssetCss = ".svg-inline--fa.sc-icon-asset,svg.sc-icon-asset:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa.sc-icon-asset{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg.sc-icon-asset{vertical-align:-.225em}.svg-inline--fa.fa-w-1.sc-icon-asset{width:.0625em}.svg-inline--fa.fa-w-2.sc-icon-asset{width:.125em}.svg-inline--fa.fa-w-3.sc-icon-asset{width:.1875em}.svg-inline--fa.fa-w-4.sc-icon-asset{width:.25em}.svg-inline--fa.fa-w-5.sc-icon-asset{width:.3125em}.svg-inline--fa.fa-w-6.sc-icon-asset{width:.375em}.svg-inline--fa.fa-w-7.sc-icon-asset{width:.4375em}.svg-inline--fa.fa-w-8.sc-icon-asset{width:.5em}.svg-inline--fa.fa-w-9.sc-icon-asset{width:.5625em}.svg-inline--fa.fa-w-10.sc-icon-asset{width:.625em}.svg-inline--fa.fa-w-11.sc-icon-asset{width:.6875em}.svg-inline--fa.fa-w-12.sc-icon-asset{width:.75em}.svg-inline--fa.fa-w-13.sc-icon-asset{width:.8125em}.svg-inline--fa.fa-w-14.sc-icon-asset{width:.875em}.svg-inline--fa.fa-w-15.sc-icon-asset{width:.9375em}.svg-inline--fa.fa-w-16.sc-icon-asset{width:1em}.svg-inline--fa.fa-w-17.sc-icon-asset{width:1.0625em}.svg-inline--fa.fa-w-18.sc-icon-asset{width:1.125em}.svg-inline--fa.fa-w-19.sc-icon-asset{width:1.1875em}.svg-inline--fa.fa-w-20.sc-icon-asset{width:1.25em}.svg-inline--fa.fa-pull-left.sc-icon-asset{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right.sc-icon-asset{margin-left:.3em;width:auto}.svg-inline--fa.fa-border.sc-icon-asset{height:1.5em}.svg-inline--fa.fa-li.sc-icon-asset{width:2em}.svg-inline--fa.fa-fw.sc-icon-asset{width:1.25em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers.sc-icon-asset{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers.sc-icon-asset svg.svg-inline--fa.sc-icon-asset{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset,.fa-layers-text.sc-icon-asset{display:inline-block;position:absolute;text-align:center}.fa-layers-text.sc-icon-asset{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter.sc-icon-asset{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right.sc-icon-asset{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left.sc-icon-asset{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right.sc-icon-asset{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left.sc-icon-asset{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg.sc-icon-asset{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs.sc-icon-asset{font-size:.75em}.fa-sm.sc-icon-asset{font-size:.875em}.fa-1x.sc-icon-asset{font-size:1em}.fa-2x.sc-icon-asset{font-size:2em}.fa-3x.sc-icon-asset{font-size:3em}.fa-4x.sc-icon-asset{font-size:4em}.fa-5x.sc-icon-asset{font-size:5em}.fa-6x.sc-icon-asset{font-size:6em}.fa-7x.sc-icon-asset{font-size:7em}.fa-8x.sc-icon-asset{font-size:8em}.fa-9x.sc-icon-asset{font-size:9em}.fa-10x.sc-icon-asset{font-size:10em}.fa-fw.sc-icon-asset{text-align:center;width:1.25em}.fa-ul.sc-icon-asset{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul.sc-icon-asset>li.sc-icon-asset{position:relative}.fa-li.sc-icon-asset{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border.sc-icon-asset{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left.sc-icon-asset{float:left}.fa-pull-right.sc-icon-asset{float:right}.fa.fa-pull-left.sc-icon-asset,.fab.fa-pull-left.sc-icon-asset,.fal.fa-pull-left.sc-icon-asset,.far.fa-pull-left.sc-icon-asset,.fas.fa-pull-left.sc-icon-asset{margin-right:.3em}.fa.fa-pull-right.sc-icon-asset,.fab.fa-pull-right.sc-icon-asset,.fal.fa-pull-right.sc-icon-asset,.far.fa-pull-right.sc-icon-asset,.fas.fa-pull-right.sc-icon-asset{margin-left:.3em}.fa-spin.sc-icon-asset{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse.sc-icon-asset{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical.sc-icon-asset{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset,.fa-flip-vertical.sc-icon-asset{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\"}.fa-flip-both.sc-icon-asset,.fa-flip-horizontal.fa-flip-vertical.sc-icon-asset{-webkit-transform:scale(-1);transform:scale(-1)}.sc-icon-asset:root .fa-flip-both.sc-icon-asset,.sc-icon-asset:root .fa-flip-horizontal.sc-icon-asset,.sc-icon-asset:root .fa-flip-vertical.sc-icon-asset,.sc-icon-asset:root .fa-rotate-90.sc-icon-asset,.sc-icon-asset:root .fa-rotate-180.sc-icon-asset,.sc-icon-asset:root .fa-rotate-270.sc-icon-asset{-webkit-filter:none;filter:none}.fa-stack.sc-icon-asset{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x.sc-icon-asset,.fa-stack-2x.sc-icon-asset{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x.sc-icon-asset{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x.sc-icon-asset{height:2em;width:2.5em}.fa-inverse.sc-icon-asset{color:#fff}.sr-only.sc-icon-asset{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable.sc-icon-asset:active,.sr-only-focusable.sc-icon-asset:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa.sc-icon-asset .fa-primary.sc-icon-asset{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa.sc-icon-asset .fa-secondary.sc-icon-asset,.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-primary.sc-icon-asset{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity.sc-icon-asset .fa-secondary.sc-icon-asset{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-primary.sc-icon-asset,.svg-inline--fa.sc-icon-asset mask.sc-icon-asset .fa-secondary.sc-icon-asset{fill:#000}.fad.fa-inverse.sc-icon-asset{color:#fff}icon-asset.sc-icon-asset{vertical-align:middle}svg.sc-icon-asset{transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}svg.micro.sc-icon-asset{width:calc(var(--ptc-font-size-x-small) / 2);height:calc(var(--ptc-font-size-x-small) / 2)}svg.xxx-small.sc-icon-asset{width:var(--ptc-font-size-xxx-small);height:var(--ptc-font-size-xxx-small)}svg.xx-small.sc-icon-asset{width:var(--ptc-font-size-xx-small);height:var(--ptc-font-size-xx-small)}svg.x-small.sc-icon-asset{width:var(--ptc-font-size-x-small);height:var(--ptc-font-size-x-small)}svg.small.sc-icon-asset{width:var(--ptc-font-size-small);height:var(--ptc-font-size-small)}svg.medium.sc-icon-asset{width:var(--ptc-font-size-medium);height:var(--ptc-font-size-medium)}svg.large.sc-icon-asset{width:var(--ptc-font-size-large);height:var(--ptc-font-size-large)}svg.x-large.sc-icon-asset{width:var(--ptc-font-size-x-large);height:var(--ptc-font-size-x-large)}svg.xx-large.sc-icon-asset{width:var(--ptc-font-size-xx-large);height:var(--ptc-font-size-xx-large)}svg.xxx-large.sc-icon-asset{width:var(--ptc-font-size-xxx-large);height:var(--ptc-font-size-xxx-large)}svg.xxxx-large.sc-icon-asset{width:var(--ptc-font-size-xxxx-large);height:var(--ptc-font-size-xxxx-large)}svg.white.sc-icon-asset{fill:var(--color-white)}svg.white.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.white.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.white.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-white)}svg.black.sc-icon-asset{fill:var(--color-black)}svg.black.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.black.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.black.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-black)}svg.ptc-green.sc-icon-asset{fill:var(--color-green-07)}svg.ptc-green.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.ptc-green.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.ptc-green.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-green-07)}svg.gray.sc-icon-asset{fill:var(--color-gray-06)}svg.gray.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.gray.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.gray.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-gray-06)}svg.light-gray.sc-icon-asset{fill:var(--color-gray-05)}svg.light-gray.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.light-gray.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.light-gray.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:var(--color-gray-05)}svg.primary-gray.sc-icon-asset{fill:var(--color-gray-10)}svg.inherit.sc-icon-asset{fill:inherit}svg.inherit.sc-icon-asset use[href$=\"#minus\"].sc-icon-asset,svg.inherit.sc-icon-asset use[href$=\"#plus\"].sc-icon-asset,svg.inherit.sc-icon-asset use[href$=\"#checkmark\"].sc-icon-asset{stroke:inherit}";
|
|
9
|
+
|
|
10
|
+
const IconAsset = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.regularSprite = index.getAssetPath('./media/regular.svg');
|
|
14
|
+
this.solidSprite = index.getAssetPath('./media/solid.svg');
|
|
15
|
+
this.brandSprite = index.getAssetPath('./media/brands.svg');
|
|
16
|
+
this.ptcSprite = index.getAssetPath('./media/designer.svg');
|
|
17
|
+
this.name = undefined;
|
|
18
|
+
this.size = 'xx-small';
|
|
19
|
+
this.type = 'regular';
|
|
20
|
+
this.spin = '';
|
|
21
|
+
this.pulse = '';
|
|
22
|
+
this.color = 'default';
|
|
23
|
+
this.isMobileSelect = undefined;
|
|
24
|
+
this.injectedStyle = undefined;
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
const classMap = this.getCssClassMap();
|
|
28
|
+
if (this.type == 'brands') {
|
|
29
|
+
return (index.h(index.Host, null, this.injectedStyle && index.h("style", null, this.injectedStyle), index.h("svg", { class: classMap }, index.h("use", { href: `${this.brandSprite}#${this.name}` }))));
|
|
30
|
+
}
|
|
31
|
+
else if (this.type == 'solid') {
|
|
32
|
+
return (index.h(index.Host, null, this.injectedStyle && index.h("style", null, this.injectedStyle), index.h("svg", { class: classMap }, index.h("use", { href: `${this.solidSprite}#${this.name}` }))));
|
|
33
|
+
}
|
|
34
|
+
else if (this.type == 'ptc') {
|
|
35
|
+
return (index.h(index.Host, null, this.injectedStyle && index.h("style", null, this.injectedStyle), index.h("svg", { class: classMap }, index.h("use", { href: `${this.ptcSprite}#${this.name}` }))));
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
return (index.h(index.Host, null, this.injectedStyle && index.h("style", null, this.injectedStyle), index.h("svg", { class: classMap }, index.h("use", { href: `${this.regularSprite}#${this.name}` }))));
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
getCssClassMap() {
|
|
42
|
+
return {
|
|
43
|
+
[this.size]: true,
|
|
44
|
+
[this.spin]: true,
|
|
45
|
+
[this.pulse]: true,
|
|
46
|
+
[this.color]: true,
|
|
47
|
+
['ismobileselect']: this.isMobileSelect ? true : false
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
static get assetsDirs() { return ["media"]; }
|
|
51
|
+
};
|
|
52
|
+
IconAsset.style = iconAssetCss;
|
|
53
|
+
|
|
54
|
+
const ptcAnnouncementCss = ".ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid{width:100%}:host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border-top:3px solid var(--color-green-07);box-shadow:var(--ptc-shadow-medium);z-index:999;display:none}.visible{display:block}::slotted([slot=seo-content]){display:none}.content-wrapper{display:flex;padding-top:var(--ptc-element-spacing-03);padding-bottom:var(--ptc-element-spacing-03);margin:0 auto;align-items:center;justify-content:space-between}@media only screen and (min-width: 768px){.content-wrapper{padding-top:var(--ptc-element-spacing-03);padding-bottom:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 1200px){.content-wrapper{padding-top:var(--ptc-element-spacing-03);padding-bottom:var(--ptc-element-spacing-03);box-sizing:border-box}}@media screen and (min-width: 1400px){.content-wrapper{padding-top:var(--ptc-element-spacing-03);padding-bottom:var(--ptc-element-spacing-03)}}.left-content{max-width:calc(100% - 76px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.title{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-dense);text-align:left;color:var(--color-gray-10);margin-bottom:var(--ptc-element-spacing-02);max-width:100%}.description{font-family:Raleway;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);line-height:var(--ptc-line-height-densest);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);max-width:100%}.cta-link{color:var(--color-blue-07);font-size:var(--ptc-font-size-x-small);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;display:inline-block;vertical-align:middle;cursor:pointer}.cta-link::before{content:\"\";position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}.cta-link:link{color:var(--color-blue-07)}.cta-link:hover{color:var(--color-blue-08)}.cta-link:active{color:var(--color-gray-09)}.cta-link:focus{outline:2px solid var(--color-blue-07);outline-offset:0.25rem}.bar-close{max-width:36px;cursor:pointer;margin-left:var(--ptc-element-spacing-08);position:relative}.bar-close::before{content:\"\";position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1}@media only screen and (min-width: 992px){.left-content{flex-direction:row;max-width:calc(100% - 58px);flex:1 1 1032px}.bar-close{max-width:18px}.bar-close::before{width:34px;height:34px}.title{margin-right:var(--ptc-element-spacing-04);margin-bottom:0;flex:0 1 auto;max-width:248px}.title.max-title{max-width:unset !important;flex:2 1 560px}.description{flex:1 1 768px}}";
|
|
55
|
+
|
|
56
|
+
const PtcAnnouncement = class {
|
|
57
|
+
constructor(hostRef) {
|
|
58
|
+
index.registerInstance(this, hostRef);
|
|
59
|
+
this.close = index.createEvent(this, "close", 7);
|
|
60
|
+
this.closeClick = () => {
|
|
61
|
+
this.visible = false;
|
|
62
|
+
this.close.emit();
|
|
63
|
+
};
|
|
64
|
+
this.getIconSize = () => {
|
|
65
|
+
return this.windowSize === 'mobile' ? 'xxx-large' : 'small';
|
|
66
|
+
};
|
|
67
|
+
this.isMaxWidthTitle = () => {
|
|
68
|
+
return !!this.description ? '' : ' max-title';
|
|
69
|
+
};
|
|
70
|
+
this.barTitle = '';
|
|
71
|
+
this.description = '';
|
|
72
|
+
this.linkText = undefined;
|
|
73
|
+
this.linkTitle = undefined;
|
|
74
|
+
this.visible = undefined;
|
|
75
|
+
this.linkUrl = '#';
|
|
76
|
+
this.insideContainer = undefined;
|
|
77
|
+
this.target = '_self';
|
|
78
|
+
this.customMaxLines = 4;
|
|
79
|
+
this.windowSize = 'mobile';
|
|
80
|
+
this.moreText = undefined;
|
|
81
|
+
}
|
|
82
|
+
handleResize() {
|
|
83
|
+
if (window.innerWidth < 992) {
|
|
84
|
+
this.windowSize = 'mobile';
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
this.windowSize = 'desktop';
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
componentWillLoad() {
|
|
91
|
+
this.handleResize();
|
|
92
|
+
}
|
|
93
|
+
render() {
|
|
94
|
+
var _a, _b;
|
|
95
|
+
const classMap = this.getCssClassMap();
|
|
96
|
+
return (index.h(index.Host, null, index.h("div", { class: classMap, part: "part-announcement" }, index.h("div", { class: "content-wrapper ptc-container" }, index.h("div", { class: "left-content", part: "part-left-content" }, index.h("slot", { name: "seo-content" }), !!this.barTitle ? (index.h("div", { class: `title${this.isMaxWidthTitle()}` }, this.windowSize === 'mobile' ? (this.barTitle) : (index.h("ptc-tooltip", { "text-display": "inline", "max-length": "60", "z-index": "z-2", description: this.barTitle, position: "bottom" })))) : null, this.windowSize === 'mobile' ? ( //mobile view
|
|
97
|
+
Object.assign({}, (!!this.description || !!this.linkUrl ? (index.h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, index.h("div", { style: { display: 'inline' } }, !!this.description ? `${this.description + ' '}` : null, !!this.linkText ? (index.h("a", { class: "cta-link", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText, console.log('rending link'))) : null))) : null))) : (
|
|
98
|
+
//desktop view
|
|
99
|
+
index.h("div", { class: "description" }, !!this.description ? (index.h("ptc-tooltip", { "text-display": "inline", "max-length": "165", "z-index": "z-2", description: this.description + ' ', position: "bottom" })) : null, !!this.linkText ? (index.h("a", { class: "cta-link", href: this.linkUrl, title: (_b = this.linkTitle) !== null && _b !== void 0 ? _b : this.linkText, target: this.target }, index.h("ptc-tooltip", { "text-display": "inline", "max-length": "25", "z-index": "z-2", description: this.linkText, position: "bottom" }))) : null))), index.h("icon-asset", { color: "inherit", name: "close-button-flat", type: "ptc", size: this.getIconSize(), onClick: this.closeClick, class: "bar-close" })))));
|
|
100
|
+
}
|
|
101
|
+
getCssClassMap() {
|
|
102
|
+
return {
|
|
103
|
+
['announcement']: true,
|
|
104
|
+
[this.visible ? 'visible' : '']: true,
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
PtcAnnouncement.style = ptcAnnouncementCss;
|
|
109
|
+
|
|
110
|
+
const ptcCardCss = ":host{display:block}::slotted([slot=seo-content]){display:none}:host(.lottie-card) .card-border{box-shadow:var(--ptc-shadow-small);border:1px solid var(--color-gray-03);border-radius:10px;position:relative;overflow:hidden}:host(.lottie-card) .card-border::after{content:\"\";height:40%;width:4px;position:absolute;top:30%;right:-2px;background-color:var(--color-green-06);z-index:2;display:block}:host(.lottie-card) .card-border:hover{box-shadow:var(--ptc-shadow-x-large)}:host(.lottie-card) .card-border:hover .card-body h3{border-bottom:2px solid var(--color-green-07)}:host(.lottie-card) .card-layout{display:block}@media only screen and (min-width: 768px){:host(.lottie-card) .card-layout{display:flex;flex-flow:nowrap row;justify-content:center}}:host(.lottie-card) .link-wrapper{outline:none;text-decoration:none;color:var(--color-gray-10)}:host(.lottie-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.lottie-card) .card-media{flex-basis:40%;border-right:1px solid var(--color-gray-03);display:flex}:host(.lottie-card) .card-body{flex-basis:60%;align-self:center;padding:0 30px 10px}:host(.lottie-card) .card-body h3{display:inline-block;line-height:var(--ptc-line-height-densest);color:var(--color-gray-10);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);border-bottom:2px solid transparent;margin-bottom:var(--ptc-element-spacing-02)}:host(.simple-card) .card-layout{display:block}:host(.simple-card) .link-wrapper{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover .card-body h3{color:var(--color-green-06)}:host(.simple-card) .link-wrapper:hover .card-body h3::before{width:100%}:host(.simple-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-04)}:host(.simple-card) .card-body h3{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-black);line-height:var(--ptc-line-height-dense);position:relative;margin-bottom:var(--ptc-element-spacing-02);display:inline-block}:host(.simple-card) .card-body h3::before{display:block;position:absolute;content:\"\";width:100%;border-bottom:2px solid var(--color-green-06);bottom:1px;transition:width var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.simple-card) ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-01);transition:margin-left var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .card-border{overflow:hidden;filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 3px 6px);width:100%}:host(.clip-edge-card) .card-border:hover{filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 6px 12px)}:host(.clip-edge-card) .card-layout{display:block}:host(.clip-edge-card) .link-wrapper{outline:none;text-decoration:none}:host(.clip-edge-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.clip-edge-card) .card-media{position:relative;width:100%;height:124px;overflow:hidden;border-radius:var(--ptc-border-radius-standard)}:host(.clip-edge-card) .card-body{transform:translateY(calc(-1 * var(--ptc-element-spacing-04)));overflow:hidden;width:calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);clip-path:var(--ptc-clip-path-bottom-right);background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-04)}:host(.clip-edge-card) .card-body h3{display:inline-block;margin:0px;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);text-decoration:none;border-bottom:2px solid transparent;transition:border-bottom var(--ptc-transition-medium) var(--ptc-ease-inout), margin var(--ptc-transition-medium) var(--ptc-ease-inout);margin:var(--ptc-element-spacing-03) 0 var(--ptc-element-spacing-03) 0}:host(.clip-edge-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-image]){display:block;width:100%;height:100%;transform:scale(1);transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transform-origin:top center}:host(.clip-edge-card) ::slotted([slot=slot-after-heading]){position:absolute;top:var(--ptc-element-spacing-03);left:var(--ptc-element-spacing-04);opacity:1;transform:scale(1);height:44px;transform-origin:bottom center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-before-heading]){display:block;opacity:0;height:24px;transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .link-wrapper:hover .card-body h3{border-bottom:2px solid var(--color-green-06)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:60px;opacity:1}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]){transform:scale(1.1)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){opacity:0;transform:scale(0);height:0}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-before-heading]){opacity:1}:host(.hightlight-card) .card-border{width:100%;border-radius:var(--ptc-border-radius-standard);overflow:hidden}:host(.hightlight-card) .card-border:hover .card-media{transform:scale(1.1)}:host(.hightlight-card) .card-layout{display:block;position:relative}:host(.hightlight-card) .link-wrapper{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:96px;opacity:1}@media only screen and (min-width: 768px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 992px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-06)}}@media only screen and (min-width: 1440px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-05)}}:host(.hightlight-card) .card-media{width:100%;height:auto;min-height:450px;position:relative;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}:host(.hightlight-card) .card-body{position:absolute;bottom:0;top:auto;left:0;right:auto;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-07);background-color:var(--color-white);box-sizing:border-box}:host(.hightlight-card) .card-body h3{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-bold);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.hightlight-card) .card-body h2{width:100%;font-size:var(--ptc-font-size-xx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}@media (max-width: 768px){:host(.hightlight-card) .card-body h2{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest)}}:host(.hightlight-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-fast) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}:host(.horizontal-card){margin-bottom:var(--ptc-layout-spacing-02)}:host(.horizontal-card) .card-layout{position:relative}@media only screen and (min-width: 768px){:host(.horizontal-card) .card-layout{display:grid;grid-template-columns:42% 58%;direction:ltr;grid-auto-rows:1fr}}:host(.horizontal-card) .link-wrapper{outline:none;text-decoration:none;transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) .link-wrapper:hover{box-shadow:var(--ptc-shadow-large);transition:var(--ptc-transition-slow) linear;background-color:var(--color-white)}:host(.horizontal-card) .link-wrapper:hover h3{border-color:var(--color-green-06);transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) .card-media{display:flex;align-self:center}@media only screen and (min-width: 768px){:host(.horizontal-card) .card-media{align-self:flex-start;padding-top:24px;padding-bottom:24px}}:host(.horizontal-card) .card-body{padding:var(--ptc-element-spacing-05) var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.horizontal-card) .card-body{padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-07)}}:host(.horizontal-card) .card-body h3{margin-top:0;font-size:var(--ptc-font-size-x-small);color:var(--color-gray-10);border-bottom:1px solid transparent;padding-bottom:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-02);transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) ::slotted([slot=slot-image]){box-shadow:var(--ptc-shadow-medium);width:100%}:host(.listing-card){height:100%}:host(.listing-card) .card-border{width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;height:100%;display:flex;flex-direction:row}:host(.listing-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.listing-card) .card-border:hover .card-media{background:var(--color-white)}:host(.listing-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.listing-card) .card-layout{display:block;position:relative;width:100%;height:100%}:host(.listing-card) .link-wrapper{outline:none;text-decoration:none}:host(.listing-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.listing-card) .card-media{width:100%;height:288px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.listing-card) .card-media .smart-img{height:288px}@media (min-width: 768px){:host(.listing-card) .card-media .smart-img{height:232px}}@media (min-width: 992px){:host(.listing-card) .card-media .smart-img{height:192px}}@media (min-width: 1200px){:host(.listing-card) .card-media .smart-img{height:170px}}@media (min-width: 768px){:host(.listing-card) .card-media{height:232px}}@media (min-width: 992px){:host(.listing-card) .card-media{height:192px}}@media (min-width: 1200px){:host(.listing-card) .card-media{height:170px}}:host(.listing-card) .creo-card .card-media{width:100%;height:auto !important;padding-top:66.66%}:host(.listing-card) .card-body{padding:16px 20px 0px 20px}:host(.listing-card) .card-body .card-date-text{display:flex;flex-direction:row}:host(.listing-card) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.listing-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block}:host(.listing-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:14px;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.listing-card) ::slotted([slot=slot-date]){font-weight:400;font-size:16px;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block}:host(.listing-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:1rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.listing-card-horizontal){height:100%}:host(.listing-card-horizontal) .card-border{overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;width:100%;height:100%}@media (min-width: 1200px) and (max-width: 1439){:host(.listing-card-horizontal) .card-border{margin-left:16px}}:host(.listing-card-horizontal) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.listing-card-horizontal) .card-border:hover .card-media{background:var(--color-white)}:host(.listing-card-horizontal) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.listing-card-horizontal) .card-layout{display:flex;flex-direction:row;width:100%}:host(.listing-card-horizontal) .link-wrapper{outline:none;text-decoration:none}:host(.listing-card-horizontal) .link-wrapper:hover{outline:none;text-decoration:none}:host(.listing-card-horizontal) .card-media{width:100%;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium);display:none;max-width:260px}@media only screen and (min-width: 768px){:host(.listing-card-horizontal) .card-media{display:block;min-width:260px}}:host(.listing-card-horizontal) .card-body{padding:16px 24px 0px 24px}@media (min-width: 768px){:host(.listing-card-horizontal) .card-body{padding:24px 32px 0px 32px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body{padding:8px 16px 0px 16px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body{padding:14px 32px 0px 32px}}@media only screen and (min-width: 768px){:host(.listing-card-horizontal) .card-body{min-width:505px}}:host(.listing-card-horizontal) .card-body .card-date-text{display:flex;flex-direction:row}:host(.listing-card-horizontal) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:12px;display:inline-block;margin-top:0rem;margin-block-start:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}@media only screen and (min-width: 1200px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:20px}}@media only screen and (min-width: 1440px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:24px}}@media only screen and (min-width: 1600px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:32px}}:host(.listing-card-horizontal) .card-body .small{font-weight:400;font-size:16px;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body .small{margin-bottom:12px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body .small{margin-bottom:16px}}:host(.listing-card-horizontal) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:19px;color:var(--color-gray-11);margin-bottom:8px;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}@media (min-width: 768px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:16px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:12px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:16px}}@media only screen and (min-width: 768px){:host(.listing-card-horizontal) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:8px;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}}:host(.listing-card-horizontal) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:19px;margin-top:0rem;margin-block-start:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.listing-card-horizontal) ::slotted([slot=slot-description]) p{margin-block-start:0rem}@media (max-width: 767px){:host(.listing-card-horizontal) ::slotted([slot=slot-description]){font-weight:400;font-size:14px;line-height:16px}}:host(.resource-center-card){height:100%}:host(.resource-center-card) .card-border{height:100%;width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;display:flex;flex-direction:row}:host(.resource-center-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.resource-center-card) .card-border:hover .card-media{background:var(--color-white)}:host(.resource-center-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.resource-center-card) .card-layout{display:block;position:relative}:host(.resource-center-card) .card-layout .ribbon-text{position:absolute;top:0;left:0;margin-top:24px;background-color:var(--color-white);padding:4px 24px;font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);color:var(--color-gray-11);border-radius:0px 3px 3px 0px;box-shadow:var(--ptc-shadow-small);max-width:70%;max-height:30px;line-height:30px;overflow:hidden}:host(.resource-center-card) .link-wrapper{outline:none;text-decoration:none}:host(.resource-center-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.resource-center-card) .card-media{width:100%;height:250px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.resource-center-card) .card-media .smart-img{height:250px}@media (min-width: 480px){:host(.resource-center-card) .card-media .smart-img{height:285px}}@media (min-width: 768px){:host(.resource-center-card) .card-media .smart-img{height:221px}}@media (min-width: 992px){:host(.resource-center-card) .card-media .smart-img{height:189px}}@media (min-width: 1200px){:host(.resource-center-card) .card-media .smart-img{height:173px}}@media (min-width: 1440px){:host(.resource-center-card) .card-media .smart-img{height:173px}}@media (min-width: 480px){:host(.resource-center-card) .card-media{height:285px}}@media (min-width: 768px){:host(.resource-center-card) .card-media{height:221px}}@media (min-width: 992px){:host(.resource-center-card) .card-media{height:189px}}@media (min-width: 1200px){:host(.resource-center-card) .card-media{height:173px}}@media (min-width: 1440px){:host(.resource-center-card) .card-media{height:173px}}:host(.resource-center-card) .card-body{padding:16px 24px 0px 24px}@media (min-width: 768px){:host(.resource-center-card) .card-body{padding:14px 24px 0px 24px}}@media (min-width: 1200px){:host(.resource-center-card) .card-body{padding:14px 20px 0px 21px}}:host(.resource-center-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:24px;display:inline-block}:host(.resource-center-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:12px;margin-top:0rem;word-break:break-word;hyphens:manual}:host(.resource-center-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:1rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.resource-center-card) ::slotted([slot=slot-description]) p{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.resource-center-card) ::slotted([slot=slot-description]) span{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px}:host(.case-studies-card){height:100%}:host(.case-studies-card) .card-border{width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;display:flex;flex-direction:row;height:100%}:host(.case-studies-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.case-studies-card) .card-border:hover .card-media{background:var(--color-white)}:host(.case-studies-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.case-studies-card) .card-layout{display:block;position:relative;width:100%}:host(.case-studies-card) .link-wrapper{outline:none;text-decoration:none}:host(.case-studies-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.case-studies-card) .card-media{width:100%;height:200px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.case-studies-card) .card-media .smart-img{width:100%;height:200px}@media (min-width: 480px){:host(.case-studies-card) .card-media .smart-img{height:286px}}@media (min-width: 768px){:host(.case-studies-card) .card-media .smart-img{height:224px}}@media (min-width: 992px){:host(.case-studies-card) .card-media .smart-img{height:192px}}@media (min-width: 1200px){:host(.case-studies-card) .card-media .smart-img{height:173px}}@media (min-width: 1440px){:host(.case-studies-card) .card-media .smart-img{height:170px}}@media (min-width: 480px){:host(.case-studies-card) .card-media{height:286px}}@media (min-width: 768px){:host(.case-studies-card) .card-media{height:224px}}@media (min-width: 992px){:host(.case-studies-card) .card-media{height:192px}}@media (min-width: 1200px){:host(.case-studies-card) .card-media{height:173px}}@media (min-width: 1440px){:host(.case-studies-card) .card-media{height:170px}}:host(.case-studies-card) .card-body .card-logo-container{padding:8px 20px;border-bottom:1px solid #e4e7e9}:host(.case-studies-card) .card-body .card-logo-none{padding-top:16px}:host(.case-studies-card) .card-body .card-logo{max-width:280px;width:auto;height:40px;object-fit:cover;border:1px solid #e4e7e9;margin-bottom:8px}:host(.case-studies-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:24px;display:inline-block}:host(.case-studies-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin:8px 20px 12px 20px}:host(.case-studies-card) ::slotted([slot=slot-date]){font-weight:400;font-size:16px;line-height:19px;color:#282f35;margin-bottom:24px;display:inline-block}:host(.case-studies-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin:0px 20px 16px 20px}:host(.related-card){width:100%;height:100%}:host(.related-card) .card-border{background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:var(--ptc-border-radius-standard);width:100%;height:100%;display:flex;flex-direction:row}:host(.related-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.related-card) .card-border:hover .card-media{background:var(--color-white);border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}:host(.related-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.related-card) .card-layout{display:block;position:relative;width:100%;height:100%}:host(.related-card) .card-layout .ribbon-text{position:absolute;top:0;left:0;margin-top:var(--ptc-element-spacing-06);background-color:var(--color-white);padding:var(--ptc-element-spacing-01) var(--ptc-element-spacing-05);font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);color:var(--color-gray-11);border-radius:0px 3px 3px 0px;box-shadow:var(--ptc-shadow-small);max-height:fit-content;overflow:hidden;width:fit-content;clip-path:inset(-6px -6px -6px 0px);word-break:break-word;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}:host(.related-card) .link-wrapper{outline:none;text-decoration:none}:host(.related-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.related-card) .card-media{width:100%;height:288px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.related-card) .card-media .smart-img{height:288px}@media only screen and (min-width: 480px){:host(.related-card) .card-media .smart-img{height:286px}}@media only screen and (min-width: 768px){:host(.related-card) .card-media .smart-img{height:142px}}@media only screen and (min-width: 992px){:host(.related-card) .card-media .smart-img{height:192px}}@media only screen and (min-width: 1200px){:host(.related-card) .card-media .smart-img{height:237px}}@media only screen and (min-width: 1440px){:host(.related-card) .card-media .smart-img{height:248px}}@media only screen and (min-width: 480px){:host(.related-card) .card-media{height:286px}}@media only screen and (min-width: 768px){:host(.related-card) .card-media{height:142px}}@media only screen and (min-width: 992px){:host(.related-card) .card-media{height:192px}}@media only screen and (min-width: 1200px){:host(.related-card) .card-media{height:237px}}@media only screen and (min-width: 1440px){:host(.related-card) .card-media{height:248px}}:host(.related-card) .card-body{box-sizing:border-box;padding:var(--ptc-layout-spacing-03)}:host(.related-card) .card-body .card-date-text{display:flex;flex-direction:row}:host(.related-card) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.related-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282f35;margin-bottom:16px;display:inline-block}:host(.related-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:14px;margin-top:0rem;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host(.related-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:18px;color:var(--color-gray-11)}.ptc-h3.uppercase{text-transform:uppercase}.ptc-h3.capitalize{text-transform:capitalize}.ptc-h3.lowercase{text-transform:lowercase}.ptc-h3.none{text-transform:none}";
|
|
111
|
+
|
|
112
|
+
const PtcCard = class {
|
|
113
|
+
constructor(hostRef) {
|
|
114
|
+
index.registerInstance(this, hostRef);
|
|
115
|
+
this.cardType = 'custom-card';
|
|
116
|
+
this.cardHref = undefined;
|
|
117
|
+
this.target = '_self';
|
|
118
|
+
this.rel = undefined;
|
|
119
|
+
this.hasImage = false;
|
|
120
|
+
this.hasVideo = false;
|
|
121
|
+
this.hasLottie = false;
|
|
122
|
+
this.heading = undefined;
|
|
123
|
+
this.headingTransform = 'none';
|
|
124
|
+
this.cardDate = undefined;
|
|
125
|
+
this.country = undefined;
|
|
126
|
+
this.styles = undefined;
|
|
127
|
+
this.ribbonText = undefined;
|
|
128
|
+
this.eventType = undefined;
|
|
129
|
+
this.cardLogo = undefined;
|
|
130
|
+
this.titleLineCutOff = undefined;
|
|
131
|
+
this.maxChars = undefined;
|
|
132
|
+
this.maxLines = undefined;
|
|
133
|
+
this.cardOverflow = undefined;
|
|
134
|
+
this.isCreoCard = false;
|
|
135
|
+
}
|
|
136
|
+
render() {
|
|
137
|
+
const Tag = !!this.cardHref ? 'a' : 'div';
|
|
138
|
+
const classMap = this.getCssClassMap();
|
|
139
|
+
const cutOff = this.getLineCuttoff();
|
|
140
|
+
let cutOffTitleClass = '';
|
|
141
|
+
if (this.titleLineCutOff && this.titleLineCutOff > 0) {
|
|
142
|
+
cutOffTitleClass = ' clamp-title';
|
|
143
|
+
}
|
|
144
|
+
return (index.h(index.Host, { class: {
|
|
145
|
+
[this.cardType]: !!this.cardType,
|
|
146
|
+
'creo-card-wrap': this.isCreoCard, // Add the cardType class conditionally
|
|
147
|
+
} }, this.styles && index.h("style", null, this.styles), index.h("slot", { name: "seo-content" }), index.h("div", { class: "card-border", part: "border-wrapper", style: { overflow: this.cardOverflow } }, index.h(Tag, Object.assign({ class: classMap, part: "card-layout" }, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.ribbonText ? { rel: this.ribbonText } : {})), this.hasImage || this.hasLottie || this.hasVideo ? (index.h("div", { class: "card-media", part: "media-wrapper" }, this.getMediaSlot ? index.h("slot", { name: this.getMediaSlot() }) : null)) : null, (!!this.ribbonText && this.cardType == 'resource-center-card') || (!!this.ribbonText && this.cardType == 'related-card') ? (index.h("div", { class: "ribbon-text" }, `${this.ribbonText}`)) : null, index.h("div", { class: "card-body", part: "body-wrapper" }, !!this.cardDate && (this.cardType === 'listing-card' || this.cardType === 'listing-card-horizontal') ? (index.h("div", { class: "card-date-text" }, !!this.eventType ? (index.h("span", { class: "small" }, `${this.cardDate}`, "\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0", `${this.eventType}`)) : (index.h("span", { class: "small" }, `${this.cardDate}`)))) : null, this.cardType === 'case-studies-card'
|
|
148
|
+
? Object.assign({}, (!!this.cardLogo ? (index.h("div", { class: "card-logo-container" }, index.h("ptc-picture", { alt: "", "object-fit": "contain", src: this.cardLogo, height: "40" }))) : (index.h("div", { class: "card-logo-none" })))) : null, index.h("slot", { name: "slot-before-heading" }), !!this.heading
|
|
149
|
+
? [
|
|
150
|
+
this.cardType === 'listing-card' ? (index.h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, part: "card-heading" }, index.h("ptc-tooltip", { "text-display": "inline", "text-lines": this.maxLines, "max-length": this.maxChars, description: this.heading, position: "bottom", width: "full-width", theme: "standard", "hide-on-mobile": "true", "no-overflow": "true" }))) : this.cardType === 'hightlight-card' ? (index.h("h2", { class: `${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)) : (index.h("h3", { class: `ptc-h3 ${this.headingTransform}${cutOffTitleClass}`, style: cutOff, part: "card-heading" }, this.heading)),
|
|
151
|
+
index.h("slot", { name: "slot-after-heading" }),
|
|
152
|
+
]
|
|
153
|
+
: null, index.h("slot", { name: "slot-description" }), !!this.cardDate && this.cardType !== 'listing-card' && this.cardType !== 'listing-card-horizontal' && this.cardType !== 'hightlight-card' ? (index.h("ptc-date", { "date-string": `${this.cardDate}`, "date-styles": "span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}" })) : null, !!this.cardDate && this.cardType === 'hightlight-card' ? (index.h("ptc-date", { style: { marginBottom: '20px' }, "format-options": '{"year":"numeric","month":"long","day":"numeric"}', "date-string": `${this.cardDate}`, "date-styles": "span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}", country: this.country })) : null)))));
|
|
154
|
+
}
|
|
155
|
+
getCssClassMap() {
|
|
156
|
+
return {
|
|
157
|
+
['card-layout']: true,
|
|
158
|
+
['link-wrapper']: !!this.cardType ? true : false,
|
|
159
|
+
['creo-card']: this.isCreoCard ? true : false,
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
getMediaSlot() {
|
|
163
|
+
if (this.hasLottie) {
|
|
164
|
+
return 'slot-lottie';
|
|
165
|
+
}
|
|
166
|
+
else if (this.hasVideo) {
|
|
167
|
+
return 'slot-video';
|
|
168
|
+
}
|
|
169
|
+
else if (this.hasImage) {
|
|
170
|
+
return 'slot-image';
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
return null;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
getLineCuttoff() {
|
|
177
|
+
let result;
|
|
178
|
+
if (this.titleLineCutOff && this.titleLineCutOff > 0) {
|
|
179
|
+
result = {
|
|
180
|
+
['-webkit-line-clamp']: `${this.titleLineCutOff}`,
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
return result;
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
PtcCard.style = ptcCardCss;
|
|
187
|
+
|
|
188
|
+
const ptcDateCss = ":host{display:block}:host(.small) span{font-size:var(--ptc-font-size-xx-small)}:host(.medium) span{font-size:var(--ptc-font-size-x-small)}:host(.primary-grey){color:var(--color-primary-gray-new)}:host(.white) span{color:var(--color-white)}:host(.date-m-top){margin-top:var(--ptc-element-spacing-01)}";
|
|
189
|
+
|
|
190
|
+
const PtcDate = class {
|
|
191
|
+
constructor(hostRef) {
|
|
192
|
+
index.registerInstance(this, hostRef);
|
|
193
|
+
this.year = 1900;
|
|
194
|
+
this.month = 0;
|
|
195
|
+
this.day = 1;
|
|
196
|
+
this.country = 'en-US';
|
|
197
|
+
this.dateString = undefined;
|
|
198
|
+
this.dateColor = undefined;
|
|
199
|
+
this.dateStyles = undefined;
|
|
200
|
+
this.dataSize = 'small';
|
|
201
|
+
this.formatOptions = undefined;
|
|
202
|
+
}
|
|
203
|
+
render() {
|
|
204
|
+
// const newDate = new Date(this.year, this.month, this.day);
|
|
205
|
+
const classMap = this.getCssClassMap();
|
|
206
|
+
return (index.h(index.Host, { class: classMap }, this.dateStyles && index.h("style", null, this.dateStyles), index.h("span", { part: "part-ptc-date" }, this.getDate().toLocaleDateString(this.country, this.getOptions()))));
|
|
207
|
+
}
|
|
208
|
+
getCssClassMap() {
|
|
209
|
+
return {
|
|
210
|
+
[this.dateColor]: !!this.dateColor ? true : false,
|
|
211
|
+
[this.dataSize]: !!this.dataSize ? true : false,
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
getOptions() {
|
|
215
|
+
let result = { year: 'numeric', month: 'short', day: 'numeric' };
|
|
216
|
+
if (this.formatOptions) {
|
|
217
|
+
try {
|
|
218
|
+
var json = JSON.parse(this.formatOptions);
|
|
219
|
+
if (json) {
|
|
220
|
+
result = json;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
catch (e) {
|
|
224
|
+
//debugger
|
|
225
|
+
console.log(e);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
return result;
|
|
229
|
+
}
|
|
230
|
+
getDate() {
|
|
231
|
+
if (this.dateString) {
|
|
232
|
+
let newDate = new Date(this.dateString.replace(/-/g, '/'));
|
|
233
|
+
return newDate;
|
|
234
|
+
}
|
|
235
|
+
else {
|
|
236
|
+
return new Date(this.year, this.month - 1, this.day);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
PtcDate.style = ptcDateCss;
|
|
241
|
+
|
|
242
|
+
const ptcPictureCss = ":host{display:block;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
|
|
243
|
+
|
|
244
|
+
const PtcPicture = class {
|
|
245
|
+
constructor(hostRef) {
|
|
246
|
+
index.registerInstance(this, hostRef);
|
|
247
|
+
this.src = undefined;
|
|
248
|
+
this.alt = 'image';
|
|
249
|
+
this.sizeXs = '510x340';
|
|
250
|
+
this.sizeSm = '1240x496';
|
|
251
|
+
this.sizeMd = '1366x500';
|
|
252
|
+
this.sizeLg = '1920x1080';
|
|
253
|
+
this.disableResize = false;
|
|
254
|
+
this.oldSrc = undefined;
|
|
255
|
+
this.imagePosition = 'static';
|
|
256
|
+
this.borderRadius = undefined;
|
|
257
|
+
this.height = undefined;
|
|
258
|
+
this.width = undefined;
|
|
259
|
+
this.objectFit = 'cover';
|
|
260
|
+
this.isFullHeight = false;
|
|
261
|
+
this.isFullWidth = false;
|
|
262
|
+
this.styles = undefined;
|
|
263
|
+
this.imageAlignment = 'left';
|
|
264
|
+
this.maxWidth = undefined;
|
|
265
|
+
this.displayImage = 'block';
|
|
266
|
+
}
|
|
267
|
+
WindowResize() {
|
|
268
|
+
this.addIntersectionObserver();
|
|
269
|
+
}
|
|
270
|
+
componentWillLoad() {
|
|
271
|
+
if (this.disableResize) {
|
|
272
|
+
this.sizeXs = undefined;
|
|
273
|
+
this.sizeSm = undefined;
|
|
274
|
+
this.sizeMd = undefined;
|
|
275
|
+
this.sizeLg = undefined;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
componentDidLoad() {
|
|
279
|
+
this.addIntersectionObserver();
|
|
280
|
+
}
|
|
281
|
+
componentWillUpdate() {
|
|
282
|
+
if (this.src !== this.oldSrc) {
|
|
283
|
+
this.addIntersectionObserver();
|
|
284
|
+
}
|
|
285
|
+
this.oldSrc = this.src;
|
|
286
|
+
}
|
|
287
|
+
//lazy-loading
|
|
288
|
+
addIntersectionObserver() {
|
|
289
|
+
if (!this.src) {
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
292
|
+
if ('IntersectionObserver' in window) {
|
|
293
|
+
let lazyLoadImages = new IntersectionObserver(entries => {
|
|
294
|
+
entries.forEach(entry => {
|
|
295
|
+
if (entry.isIntersecting) {
|
|
296
|
+
const image = this.el.shadowRoot.querySelector('img');
|
|
297
|
+
image.src = this.setResponsiveBg();
|
|
298
|
+
lazyLoadImages.unobserve(image);
|
|
299
|
+
}
|
|
300
|
+
});
|
|
301
|
+
});
|
|
302
|
+
let tempImg = this.el.shadowRoot.querySelector('img');
|
|
303
|
+
if (tempImg) {
|
|
304
|
+
lazyLoadImages.observe(tempImg);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
else {
|
|
308
|
+
// fall back to setTimeout for Safari and IE
|
|
309
|
+
setTimeout(() => {
|
|
310
|
+
const image = this.el.shadowRoot.querySelector('img');
|
|
311
|
+
image.src = this.setResponsiveBg();
|
|
312
|
+
image.onload = () => {
|
|
313
|
+
image.removeAttribute('data-src');
|
|
314
|
+
console.log('loaded fallback');
|
|
315
|
+
};
|
|
316
|
+
}, 5000);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
//responsive image
|
|
320
|
+
setResponsiveBg() {
|
|
321
|
+
// Define local variables
|
|
322
|
+
let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
|
|
323
|
+
for (var i = 0, len = backgrounds.length; i < len; i++) {
|
|
324
|
+
// Set current variables
|
|
325
|
+
el = backgrounds[i];
|
|
326
|
+
elData = el.getAttribute('data-' + currentBreakpoint);
|
|
327
|
+
if (elData !== null) {
|
|
328
|
+
return elData;
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
if (typeof console == 'object') {
|
|
332
|
+
console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
render() {
|
|
338
|
+
const classMap = this.getCssClassMap();
|
|
339
|
+
const classMapHost = this.getCssClassMapHost();
|
|
340
|
+
return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
|
|
341
|
+
}
|
|
342
|
+
getCurrentBreakPoints() {
|
|
343
|
+
// Define local variables
|
|
344
|
+
let doc = window.document, temp = doc.createElement('div'), env;
|
|
345
|
+
// Append test node
|
|
346
|
+
doc.body.appendChild(temp);
|
|
347
|
+
// Loop through breakpoints
|
|
348
|
+
for (let i = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
|
|
349
|
+
env = interfaces.ResponsivePictureVariables.envs[i];
|
|
350
|
+
// Add classes
|
|
351
|
+
temp.className = 'hidden-' + env;
|
|
352
|
+
// Found breakpoint
|
|
353
|
+
if (temp.offsetParent === null) {
|
|
354
|
+
// Remove our test node
|
|
355
|
+
doc.body.removeChild(temp);
|
|
356
|
+
// Return current breakpoint
|
|
357
|
+
return env;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
// Breakpoint not found, try fallback
|
|
361
|
+
doc.body.removeChild(temp);
|
|
362
|
+
return this.getFallbackBreakpoint();
|
|
363
|
+
}
|
|
364
|
+
getFallbackBreakpoint() {
|
|
365
|
+
if (window.matchMedia('(min-width: 992px)').matches) {
|
|
366
|
+
return 'lg';
|
|
367
|
+
}
|
|
368
|
+
else if (window.matchMedia('(min-width: 768px)').matches) {
|
|
369
|
+
return 'md';
|
|
370
|
+
}
|
|
371
|
+
else if (window.matchMedia('(min-width: 576px)').matches) {
|
|
372
|
+
return 'sm';
|
|
373
|
+
}
|
|
374
|
+
else {
|
|
375
|
+
return 'xs';
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
getCssClassMap() {
|
|
379
|
+
return {
|
|
380
|
+
[this.borderRadius]: this.borderRadius ? true : false,
|
|
381
|
+
[this.objectFit]: true,
|
|
382
|
+
[this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
|
|
383
|
+
[this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
|
|
384
|
+
[this.displayImage]: true
|
|
385
|
+
};
|
|
386
|
+
}
|
|
387
|
+
getCssClassMapHost() {
|
|
388
|
+
return {
|
|
389
|
+
[this.imagePosition]: true,
|
|
390
|
+
[this.imageAlignment]: true,
|
|
391
|
+
};
|
|
392
|
+
}
|
|
393
|
+
get el() { return index.getElement(this); }
|
|
394
|
+
};
|
|
395
|
+
PtcPicture.style = ptcPictureCss;
|
|
396
|
+
|
|
397
|
+
const ptcReadmoreCss = ":host{display:block}.box input{opacity:0;position:absolute;pointer-events:none}.box .read-more-text{display:-webkit-box;-webkit-box-orient:vertical;margin:0;overflow:hidden;word-wrap:break-word}.box .line1{-webkit-line-clamp:1}.box .line2{-webkit-line-clamp:2}.box .line3{-webkit-line-clamp:3}.box .line4{-webkit-line-clamp:4}.box .line5{-webkit-line-clamp:5}.box .line10{-webkit-line-clamp:10}.box input~label{display:block;position:relative;cursor:pointer;right:0;margin-top:var(--ptc-element-spacing-02);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest);text-decoration-line:underline;color:var(--color-blue-07);text-align:right;margin-right:var(--ptc-element-spacing-07)}.box input~label.left{text-align:left}.box input~label.right{text-align:right}.box input~label.center{text-align:center;margin-right:0}.box .z-auto{z-index:auto}.box .z-1{z-index:1}.box .z-2{z-index:2}.box .z-3{z-index:3}.box .z-999{z-index:999}.box input:checked+.read-more-text{-webkit-line-clamp:unset !important}.box .read-more-text:not(.truncated)~label{display:none}.box .show-less-cta{display:block !important}:host .box.add-icon .read-more-cta-label span{display:inline-block;position:relative;padding-right:var(--ptc-element-spacing-03)}:host .box.add-icon .read-more-cta-label span::after{content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300890B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E\");width:10px;height:7px;background-size:cover;position:absolute;right:-5px;bottom:7px}:host .box.add-icon .read-more-cta-label.show-less-cta span::after{transform:rotate(180deg)}:host .box.blue .read-more-cta-label{color:var(--color-blue-07)}:host .box.gray .read-more-cta-label{color:var(--color-gray-10)}:host .box.green .read-more-cta-label{color:var(--color-green-07)}:host .box.initial .read-more-cta-label{color:initial}:host .box.small .read-more-cta-label{font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-densest)}:host .box.medium .read-more-cta-label{font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-p)}:host .box.large .read-more-cta-label{font-size:var(--ptc-font-size-large);line-height:var(--ptc-line-height-p)}:host .box.large.add-icon .read-more-cta-label span{padding-right:var(--ptc-element-spacing-04)}:host .box.large.add-icon .read-more-cta-label span::after{width:15px;height:10px}";
|
|
398
|
+
|
|
399
|
+
const PtcReadmore = class {
|
|
400
|
+
constructor(hostRef) {
|
|
401
|
+
index.registerInstance(this, hostRef);
|
|
402
|
+
this.moreText = 'read more';
|
|
403
|
+
this.lessText = undefined;
|
|
404
|
+
this.readMorePosition = 'right';
|
|
405
|
+
this.display = 'inline';
|
|
406
|
+
this.visibleLines = 'line2';
|
|
407
|
+
this.visibleLinesCustom = undefined;
|
|
408
|
+
this.zIndex = 'z-auto';
|
|
409
|
+
this.checked = false;
|
|
410
|
+
this.size = 'small';
|
|
411
|
+
this.isIcon = false;
|
|
412
|
+
this.color = 'blue';
|
|
413
|
+
}
|
|
414
|
+
async updateReadmoreStatus() {
|
|
415
|
+
setTimeout(() => {
|
|
416
|
+
this.addBtnTruncated();
|
|
417
|
+
}, 100);
|
|
418
|
+
}
|
|
419
|
+
addBtnTruncated() {
|
|
420
|
+
const appRoot = this.el.shadowRoot;
|
|
421
|
+
const ps = appRoot.querySelectorAll('.read-more-text');
|
|
422
|
+
ps.forEach(p => {
|
|
423
|
+
// if (this.visibleCharacters){
|
|
424
|
+
// const truncatedText = p.textContent.slice(0, this.visibleCharacters);
|
|
425
|
+
// p.textContent = truncatedText;
|
|
426
|
+
// }
|
|
427
|
+
p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
|
|
428
|
+
});
|
|
429
|
+
}
|
|
430
|
+
// Created this function to initialize the truncate function on specific elements like tabs
|
|
431
|
+
enableAddTruncatedClass(element) {
|
|
432
|
+
const allTabHeaders = document.querySelectorAll(element);
|
|
433
|
+
for (const element of Array.from(allTabHeaders)) {
|
|
434
|
+
let tabHeader = element;
|
|
435
|
+
if (tabHeader) {
|
|
436
|
+
tabHeader.addEventListener('click', () => {
|
|
437
|
+
setTimeout(() => {
|
|
438
|
+
this.addBtnTruncated();
|
|
439
|
+
}, 100);
|
|
440
|
+
});
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
componentDidLoad() {
|
|
445
|
+
this.addBtnTruncated();
|
|
446
|
+
document.addEventListener("readystatechange", () => {
|
|
447
|
+
if (document.readyState === "complete") {
|
|
448
|
+
this.addBtnTruncated();
|
|
449
|
+
}
|
|
450
|
+
});
|
|
451
|
+
this.enableAddTruncatedClass('tab-header');
|
|
452
|
+
this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
|
|
453
|
+
}
|
|
454
|
+
// click event handler
|
|
455
|
+
handleClick(event) {
|
|
456
|
+
this.addBtnTruncated();
|
|
457
|
+
// check if the input box is checked
|
|
458
|
+
this.checked = event.target.checked;
|
|
459
|
+
// Getting cta element
|
|
460
|
+
const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
|
|
461
|
+
// Updating the cta text
|
|
462
|
+
this.checked
|
|
463
|
+
? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
|
|
464
|
+
: cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
|
|
465
|
+
this.checked ? cta.classList.add('show-less-cta') : cta.classList.remove('show-less-cta');
|
|
466
|
+
}
|
|
467
|
+
render() {
|
|
468
|
+
const classMap = this.getCssClassMap();
|
|
469
|
+
return (index.h(index.Host, { class: this.display }, index.h("div", { class: classMap }, index.h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e) }), !!this.visibleLines || !!this.visibleLinesCustom ? index.h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, index.h("slot", null)) : null, index.h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex + ' ' + this.readMorePosition} read-more-cta-label` }, index.h("span", null, this.moreText)))));
|
|
470
|
+
}
|
|
471
|
+
getCssClassMap() {
|
|
472
|
+
return {
|
|
473
|
+
['box']: true,
|
|
474
|
+
[this.color]: true,
|
|
475
|
+
[this.size]: true,
|
|
476
|
+
['add-icon']: this.isIcon
|
|
477
|
+
};
|
|
478
|
+
}
|
|
479
|
+
get el() { return index.getElement(this); }
|
|
480
|
+
};
|
|
481
|
+
PtcReadmore.style = ptcReadmoreCss;
|
|
482
|
+
|
|
483
|
+
const ptcTooltipCss = ".sc-ptc-tooltip-h{position:relative}.inline.sc-ptc-tooltip-h{display:inline}.inline.sc-ptc-tooltip-h .text-content.sc-ptc-tooltip{display:inline}.block.sc-ptc-tooltip-h{display:block}.text-ellipsis.sc-ptc-tooltip{position:relative;display:inline}.text-ellipsis.sc-ptc-tooltip:not(.truncated){z-index:auto !important}.z-auto.sc-ptc-tooltip{z-index:auto}.z-1.sc-ptc-tooltip{z-index:1}.z-2.sc-ptc-tooltip{z-index:2}.z-3.sc-ptc-tooltip{z-index:3}.z-999.sc-ptc-tooltip{z-index:999}.tooltip.sc-ptc-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:auto;height:auto;visibility:hidden;text-align:left;text-shadow:none;white-space:normal}@media only screen and (min-width: 480px){.tooltip.sc-ptc-tooltip{width:273px}}.tooltip.danger.sc-ptc-tooltip{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.sc-ptc-tooltip a.sc-ptc-tooltip{color:var(--color-blue-07)}.tooltip.bottom.sc-ptc-tooltip{bottom:-12px;transform:translateY(100%)}.tooltip.bottom.sc-ptc-tooltip::after{top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.left.sc-ptc-tooltip{bottom:-12px;transform:translate(-80%, 100%)}.tooltip.left.sc-ptc-tooltip::after{top:1px;right:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.right.sc-ptc-tooltip{bottom:-12px;transform:translateY(100%);right:0px}@-moz-document url-prefix(){.tooltip.right{right:unset !important;bottom:unset !important;transform:translate(60%, 8px) !important}@media screen and (min-width: 992px){.tooltip.right{transform:translate(100%, 8px) !important}}}.tooltip.right.sc-ptc-tooltip::after{top:1px;left:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.top.sc-ptc-tooltip{top:-8px;transform:translateY(-100%)}.tooltip.top.sc-ptc-tooltip::after{left:50%;bottom:1px;transform:translate(-50%, 100%);border:8px solid transparent;border-top:8px solid var(--color-gray-09)}.tooltip.bottom-right.sc-ptc-tooltip{bottom:-12px;transform:translate(-60%, 100%)}.tooltip.bottom-right.sc-ptc-tooltip::after{top:1px;left:75%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip.danger.sc-ptc-tooltip::after{top:0;border-bottom:8px solid var(--color-red-07)}.truncated.sc-ptc-tooltip{cursor:help}.truncated.sc-ptc-tooltip:hover+.tooltip.sc-ptc-tooltip{visibility:visible;z-index:9999}.wrapper-content.sc-ptc-tooltip{display:inline-block;position:relative}.wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{width:auto;min-width:72px;max-width:273px}.wrapper-content.sc-ptc-tooltip .slot-content.sc-ptc-tooltip:hover+.tooltip.sc-ptc-tooltip{visibility:visible;z-index:9999}.tooltip.sc-ptc-tooltip::after{content:\"\";position:absolute}.ellipsis-by-line-boxing.sc-ptc-tooltip{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}.full-width.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{width:100%}@media only screen and (min-width: 480px){.full-width.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{width:100%}}.no-overflow.sc-ptc-tooltip-h .tooltip.sc-ptc-tooltip{display:none !important}.no-overflow.sc-ptc-tooltip-h .truncated.sc-ptc-tooltip.sc-ptc-tooltip{cursor:pointer}";
|
|
484
|
+
|
|
485
|
+
const PtcTooltip = class {
|
|
486
|
+
constructor(hostRef) {
|
|
487
|
+
index.registerInstance(this, hostRef);
|
|
488
|
+
this.textDisplay = 'inline';
|
|
489
|
+
this.maxLength = 45;
|
|
490
|
+
this.textLines = undefined;
|
|
491
|
+
this.description = 'This is a tooltip text placeholder';
|
|
492
|
+
this.zIndex = 'z-auto';
|
|
493
|
+
this.position = 'bottom';
|
|
494
|
+
this.styles = undefined;
|
|
495
|
+
this.mode = 'text-only';
|
|
496
|
+
this.theme = 'standard';
|
|
497
|
+
this.width = 'default';
|
|
498
|
+
this.hideOnMobile = false;
|
|
499
|
+
this.isSmallScreen = undefined;
|
|
500
|
+
this.noOverflow = false;
|
|
501
|
+
}
|
|
502
|
+
addTruncatedClass() {
|
|
503
|
+
const appRoot = this.el;
|
|
504
|
+
const text = appRoot.querySelectorAll('.ellipsis-by-line-boxing');
|
|
505
|
+
text.forEach(t => {
|
|
506
|
+
t.classList[t.scrollHeight > t.clientHeight ? 'add' : 'remove']('truncated');
|
|
507
|
+
});
|
|
508
|
+
}
|
|
509
|
+
windowResize() {
|
|
510
|
+
this.verifiyScreenSize();
|
|
511
|
+
}
|
|
512
|
+
verifiyScreenSize() {
|
|
513
|
+
this.isSmallScreen = window.innerWidth < 768;
|
|
514
|
+
}
|
|
515
|
+
// Created this function to initialize the truncate function on specific elements like tabs
|
|
516
|
+
enableAddTruncatedClass(element) {
|
|
517
|
+
const allTabHeaders = document.querySelectorAll(element);
|
|
518
|
+
for (const element of Array.from(allTabHeaders)) {
|
|
519
|
+
let tabHeader = element;
|
|
520
|
+
if (tabHeader) {
|
|
521
|
+
tabHeader.addEventListener('click', () => {
|
|
522
|
+
setTimeout(() => {
|
|
523
|
+
this.addTruncatedClass();
|
|
524
|
+
}, 100);
|
|
525
|
+
});
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
componentWillLoad() {
|
|
530
|
+
this.verifiyScreenSize();
|
|
531
|
+
}
|
|
532
|
+
componentDidLoad() {
|
|
533
|
+
//this.addTruncatedClass();
|
|
534
|
+
setTimeout(() => {
|
|
535
|
+
this.addTruncatedClass();
|
|
536
|
+
}, 1000);
|
|
537
|
+
this.enableAddTruncatedClass('tab-header');
|
|
538
|
+
this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
|
|
539
|
+
this.enableAddTruncatedClass('ptc-product-card');
|
|
540
|
+
document.addEventListener('readystatechange', () => {
|
|
541
|
+
if (document.readyState === 'complete') {
|
|
542
|
+
this.addTruncatedClass();
|
|
543
|
+
}
|
|
544
|
+
});
|
|
545
|
+
}
|
|
546
|
+
render() {
|
|
547
|
+
if (this.mode == 'wrapper') {
|
|
548
|
+
return (index.h(index.Host, { class: this.textDisplay }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "wrapper-content" }, index.h("div", { class: "slot-content" }, index.h("slot", null)), index.h("div", { class: `tooltip ${this.position} ${this.theme}` }, index.h("slot", { name: "description" }), this.description && index.h("span", { innerHTML: this.description })))));
|
|
549
|
+
}
|
|
550
|
+
else {
|
|
551
|
+
const classMap = this.getCssClassMap();
|
|
552
|
+
const cutOff = this.getLineCuttoff();
|
|
553
|
+
let truncatedText = this.description.substring(0, this.maxLength);
|
|
554
|
+
if (this.description.length > this.maxLength) {
|
|
555
|
+
//const lastSpace = truncatedText.lastIndexOf(' ');
|
|
556
|
+
//truncatedText = truncatedText.substring(0, lastSpace);
|
|
557
|
+
truncatedText += '... ';
|
|
558
|
+
}
|
|
559
|
+
return (index.h(index.Host, { class: { [this.textDisplay]: true, [this.width]: true, 'no-overflow': this.noOverflow } }, this.styles && index.h("style", null, this.styles), this.hideOnMobile && this.isSmallScreen ? (index.h("div", null, this.description)) : (index.h("div", { class: "text-content" }, this.textLines > 0 && !!this.textLines ? (index.h("div", { class: "ellipsis-by-line-boxing", style: cutOff, innerHTML: this.description })) : (index.h("div", { class: classMap }, truncatedText)), index.h("div", { class: `tooltip ${this.position} ${this.theme}`, innerHTML: this.description })))));
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
getCssClassMap() {
|
|
563
|
+
return {
|
|
564
|
+
// ['ellipsis-by-line-boxing']: this.textLines && this.textLines > 0,
|
|
565
|
+
['text-ellipsis']: true,
|
|
566
|
+
[this.zIndex]: this.description.length > this.maxLength ? true : false,
|
|
567
|
+
['truncated']: this.description.length > this.maxLength && !this.textLines ? true : false,
|
|
568
|
+
};
|
|
569
|
+
}
|
|
570
|
+
getLineCuttoff() {
|
|
571
|
+
let result;
|
|
572
|
+
if (this.textLines && this.textLines > 0) {
|
|
573
|
+
result = {
|
|
574
|
+
['-webkit-line-clamp']: `${this.textLines}`,
|
|
575
|
+
};
|
|
576
|
+
}
|
|
577
|
+
return result;
|
|
578
|
+
}
|
|
579
|
+
get el() { return index.getElement(this); }
|
|
580
|
+
};
|
|
581
|
+
PtcTooltip.style = ptcTooltipCss;
|
|
582
|
+
|
|
583
|
+
exports.icon_asset = IconAsset;
|
|
584
|
+
exports.ptc_announcement = PtcAnnouncement;
|
|
585
|
+
exports.ptc_card = PtcCard;
|
|
586
|
+
exports.ptc_date = PtcDate;
|
|
587
|
+
exports.ptc_picture = PtcPicture;
|
|
588
|
+
exports.ptc_readmore = PtcReadmore;
|
|
589
|
+
exports.ptc_tooltip = PtcTooltip;
|