@ptcwebops/ptcw-design 0.3.0 → 0.3.1

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.
Files changed (48) hide show
  1. package/dist/cjs/{icon-asset_11.cjs.entry.js → icon-asset_16.cjs.entry.js} +312 -30
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ptc-date.cjs.entry.js +54 -0
  4. package/dist/cjs/ptcw-design.cjs.js +1 -1
  5. package/dist/collection/components/icon-asset/media/designer.svg +9 -8
  6. package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.css +2 -1
  7. package/dist/collection/components/ptc-card-content/ptc-card-content.css +92 -2
  8. package/dist/collection/components/ptc-card-plm/ptc-card-plm.css +14 -4
  9. package/dist/collection/components/ptc-card-plm/ptc-card-plm.js +2 -2
  10. package/dist/collection/components/ptc-picture/ptc-picture.css +9 -1
  11. package/dist/collection/components/ptc-picture/ptc-picture.js +46 -0
  12. package/dist/custom-elements/index.js +15 -5
  13. package/dist/esm/{icon-asset_11.entry.js → icon-asset_16.entry.js} +305 -28
  14. package/dist/esm/loader.js +1 -1
  15. package/dist/esm/ptc-date.entry.js +50 -0
  16. package/dist/esm/ptcw-design.js +1 -1
  17. package/dist/ptcw-design/media/designer.svg +9 -8
  18. package/dist/ptcw-design/p-77dfe920.entry.js +1 -0
  19. package/dist/ptcw-design/p-81497cc3.entry.js +1 -0
  20. package/dist/ptcw-design/ptcw-design.css +1 -1
  21. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  22. package/dist/types/components/ptc-card-plm/ptc-card-plm.d.ts +1 -1
  23. package/dist/types/components/ptc-picture/ptc-picture.d.ts +8 -0
  24. package/dist/types/components.d.ts +18 -2
  25. package/package.json +1 -1
  26. package/readme.md +1 -1
  27. package/dist/cjs/interfaces-0ecd8027.js +0 -15
  28. package/dist/cjs/list-item.cjs.entry.js +0 -29
  29. package/dist/cjs/ptc-breadcrumb.cjs.entry.js +0 -23
  30. package/dist/cjs/ptc-button.cjs.entry.js +0 -76
  31. package/dist/cjs/ptc-hero.cjs.entry.js +0 -25
  32. package/dist/cjs/ptc-img.cjs.entry.js +0 -160
  33. package/dist/cjs/ptc-span.cjs.entry.js +0 -34
  34. package/dist/esm/interfaces-c1c73092.js +0 -12
  35. package/dist/esm/list-item.entry.js +0 -25
  36. package/dist/esm/ptc-breadcrumb.entry.js +0 -19
  37. package/dist/esm/ptc-button.entry.js +0 -72
  38. package/dist/esm/ptc-hero.entry.js +0 -21
  39. package/dist/esm/ptc-img.entry.js +0 -156
  40. package/dist/esm/ptc-span.entry.js +0 -30
  41. package/dist/ptcw-design/p-29fe43a9.entry.js +0 -1
  42. package/dist/ptcw-design/p-473ec631.entry.js +0 -1
  43. package/dist/ptcw-design/p-50e52c88.js +0 -1
  44. package/dist/ptcw-design/p-563d409f.entry.js +0 -1
  45. package/dist/ptcw-design/p-797e4a7d.entry.js +0 -1
  46. package/dist/ptcw-design/p-9372c930.entry.js +0 -1
  47. package/dist/ptcw-design/p-abd4772d.entry.js +0 -1
  48. package/dist/ptcw-design/p-b3d73b7f.entry.js +0 -1
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- let ResponsiveBgVariables = {
4
- envs: ['xs', 'sm', 'md', 'lg'],
5
- selector: '.ptc-img',
6
- interval: 250
7
- };
8
- let ResponsivePictureVariables = {
9
- envs: ['xs', 'sm', 'md', 'lg'],
10
- selector: '.ptc-picture',
11
- interval: 250
12
- };
13
-
14
- exports.ResponsiveBgVariables = ResponsiveBgVariables;
15
- exports.ResponsivePictureVariables = ResponsivePictureVariables;
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const listItemCss = ":host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:white;font-weight:700;font-size:12px;line-height:14px}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0}:host(.breadcrumb) li a.item-link{color:white;font-weight:var(-ptc-font-weight-bold) !important;font-size:var(-ptc-font-size-x-small) !important;line-height:14px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:#3DAB49;outline:none}";
8
-
9
- let ListItem = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.listType = 'list-primary';
13
- this.linkHref = undefined;
14
- this.flushBefore = false;
15
- }
16
- render() {
17
- const classMap = this.getCssClassMap();
18
- return (index.h(index.Host, { class: classMap }, index.h("li", null, this.linkHref ? (index.h("a", Object.assign({ class: "item-link" }, (this.linkHref ? { href: this.linkHref } : {})), index.h("slot", null))) : (index.h("slot", null)))));
19
- }
20
- getCssClassMap() {
21
- return {
22
- [this.listType]: true,
23
- ['flush-before']: this.flushBefore ? true : false
24
- };
25
- }
26
- };
27
- ListItem.style = listItemCss;
28
-
29
- exports.list_item = ListItem;
@@ -1,23 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcBreadcrumbCss = ":host{display:block;margin-top:21px}::slotted(*){transform:translate(-3px, 0px)}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm){::slotted(*){transform:translate(-3px, 4px)}}@-moz-document url-prefix(){::slotted(*){transform:translate(-3px, 0px)}}";
8
-
9
- let PtcBreadcrumb = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- const classMap = this.getCssClassMap();
15
- return (index.h(index.Host, { class: classMap }, index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, index.h("icon-asset", { type: "ptc", size: "large", name: "icon-home", color: "white" })), index.h("slot", null)));
16
- }
17
- getCssClassMap() {
18
- return {};
19
- }
20
- };
21
- PtcBreadcrumb.style = ptcBreadcrumbCss;
22
-
23
- exports.ptc_breadcrumb = PtcBreadcrumb;
@@ -1,76 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:3px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:0.86}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px #5bb73b;background-image:linear-gradient(285deg, #5bb73b 155%, #178642 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-primary-uigrey)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:4px;margin-top:4px;box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.legacy-green:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-medium)}@media screen and (min-width: 768px){.legacy-green span{font-size:19px;letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:3px;display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all ease-out 0.25s;position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{font-family:var(--ptc-font-latin);background-color:#323b42;border-radius:var(--ptc-border-radius-medium);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:13px;font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:26px;list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.nav:focus{outline:3px solid #0092d1;outline-offset:2px}.nav:hover{background-color:#20262a}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary{padding:var(--ptc-font-size-small) var(--ptc-font-size-large);transition:background-color var(--ptc-standard-ease) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled{pointer-events:none;border-color:#a8aaaf;background:#e1e2e4}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span{color:#a8aaaf}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]){fill:#a8aaaf !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus{outline:3px solid #0092d1;outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:17px;line-height:20px;letter-spacing:normal}.ptc-primary{background:#1f2024;border:2px solid #5bb73a;border-radius:var(--ptc-border-radius-medium)}.ptc-primary:hover{background-color:#33353a}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:#1f2024;border:2px solid #6d707b;border-radius:var(--ptc-border-radius-medium)}.ptc-secondary:hover{background-color:#33353a}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-primary-grey);border-radius:var(--ptc-border-radius-medium)}.ptc-tertiary:hover{background-color:#e1e2e4}.ptc-tertiary:active{background-color:#c5c5ca}.ptc-tertiary span{color:var(--color-primary-grey)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-primary-grey) !important}.ptc-quaternary{background:#158542;border:2px solid #459e67;border-radius:var(--ptc-border-radius-medium)}.ptc-quaternary:hover{background-color:#17713a}.ptc-quaternary:active{background-color:#186135}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}";
8
-
9
- let PtcButton = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.clickEvent = index.createEvent(this, "clickEvent", 7);
13
- /**
14
- * Disabled button
15
- */
16
- this.disabled = false;
17
- /**
18
- * Button type
19
- */
20
- this.type = 'button';
21
- /**
22
- * Button theme color
23
- */
24
- this.color = 'ptc-primary';
25
- /**
26
- * Icon Animation
27
- */
28
- this.iconAnimation = '';
29
- /**
30
- * Icon Position
31
- */
32
- this.iconPosition = 'icon-right';
33
- /**
34
- * Link URL
35
- */
36
- this.linkHref = undefined;
37
- /**
38
- * link Title
39
- */
40
- this.linkTitle = undefined;
41
- /**
42
- * Link target
43
- * */
44
- this.target = '_self';
45
- /**
46
- * Link rel
47
- * */
48
- this.rel = undefined;
49
- /**
50
- * (optional) tab-nav.
51
- * indicates that its element can be focused, and where it participates in sequential keyboard navigation.
52
- * A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
53
- */
54
- this.tabNav = 0;
55
- }
56
- clickEventHandler() {
57
- this.clickEvent.emit();
58
- //console.log('click!');
59
- }
60
- render() {
61
- const classMap = this.getCssClassMap();
62
- const Tag = !!this.linkHref ? 'a' : 'button';
63
- return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), index.h("span", null, index.h("slot", { name: "slot-before-text" }), index.h("slot", null), index.h("slot", { name: "slot-after-text" })))));
64
- }
65
- getCssClassMap() {
66
- return {
67
- [this.color]: true,
68
- [this.iconAnimation]: true,
69
- [this.iconPosition]: true,
70
- ['disabled']: this.disabled ? true : false,
71
- };
72
- }
73
- };
74
- PtcButton.style = ptcButtonCss;
75
-
76
- exports.ptc_button = PtcButton;
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}";
8
-
9
- let PtcHero = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- const classMap = this.getCssClassMap();
15
- return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, index.h("ptc-img", { "image-type": "smart-bg", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1-xs" }), index.h("ptc-overlay", { "filter-color": "black-2-xs" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null)))));
16
- }
17
- getCssClassMap() {
18
- return {
19
- [this.heroType]: this.heroType ? true : false,
20
- };
21
- }
22
- };
23
- PtcHero.style = ptcHeroCss;
24
-
25
- exports.ptc_hero = PtcHero;
@@ -1,160 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
- const interfaces = require('./interfaces-0ecd8027.js');
7
-
8
- const ptcImgCss = ".smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-sm{border-radius:var(--ptc-border-radius-small)}.radius-md{border-radius:var(--ptc-border-radius-medium)}.radius-lg{border-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-primary-lightgrey)}@media (max-width: 767px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media (min-width: 1200px){.hidden-lg{display:none !important}}";
9
-
10
- let PtcImg = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * Image size for smallest screen
15
- * <=767px
16
- */
17
- this.sizeXs = '510x340';
18
- /**
19
- * Image size for small screen
20
- * >=768px and <=991px
21
- */
22
- this.sizeSm = '1240x496';
23
- /**
24
- * Image size for medium screen
25
- * >=992px and <=1199px
26
- */
27
- this.sizeMd = '1366x500';
28
- /**
29
- * Image solution for large screen
30
- * >=1200px
31
- */
32
- this.sizeLg = '1920x1080';
33
- /**
34
- * Image type
35
- */
36
- this.imageType = 'smart-bg';
37
- /**
38
- * Image border shape
39
- */
40
- this.borderRadius = '';
41
- /**
42
- * Lazy loading option
43
- */
44
- this.loadMode = 'lazy-bg';
45
- }
46
- /**
47
- * Image Z Index
48
- */
49
- // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
50
- WindowResize() {
51
- this.setResponsiveBg();
52
- }
53
- render() {
54
- const classMap = this.getCssClassMap();
55
- return (index.h(index.Host, null, index.h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? index.h("slot", null) : null)));
56
- }
57
- componentDidLoad() {
58
- this.addIntersectionObserver();
59
- this.setResponsiveBg();
60
- }
61
- componentWillUpdate() {
62
- // console.log('componentWillUpdate!');
63
- this.addIntersectionObserver();
64
- this.setResponsiveBg();
65
- }
66
- //responsive image
67
- setResponsiveBg() {
68
- // Define local variables
69
- let backgrounds = (this.el || document).querySelectorAll(interfaces.ResponsiveBgVariables.selector), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
70
- // console.log('current breakpoint: ' + currentBreakpoint);
71
- // Loop through all target elements
72
- for (var i = 0, len = backgrounds.length; i < len; i++) {
73
- // Set current variables
74
- el = backgrounds[i];
75
- elData = el.getAttribute('data-' + currentBreakpoint);
76
- // If the data attribute exists, set the background
77
- if (elData !== null) {
78
- el.style.backgroundImage = "url('" + elData + "')";
79
- }
80
- else {
81
- if (typeof console == 'object') {
82
- console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
83
- }
84
- }
85
- }
86
- }
87
- //lazy loading
88
- addIntersectionObserver() {
89
- if (!this.imgUrl) {
90
- console.log('no image!');
91
- return;
92
- }
93
- if ('IntersectionObserver' in window) {
94
- let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
95
- let bgObserver = new IntersectionObserver(entries => {
96
- entries.forEach(entry => {
97
- if (entry.isIntersecting) {
98
- const image = entry.target;
99
- image.classList.remove('lazy-bg');
100
- // console.log('loaded');
101
- bgObserver.unobserve(image);
102
- }
103
- });
104
- });
105
- lazyLoadBgs.forEach(image => {
106
- bgObserver.observe(image);
107
- });
108
- }
109
- }
110
- getCssClassMap() {
111
- return {
112
- [this.imageType]: true,
113
- 'ptc-img': true,
114
- [this.borderRadius]: true,
115
- [this.loadMode]: true,
116
- // [this.imageZIndex] : true
117
- };
118
- }
119
- getCurrentBreakPoints() {
120
- // Define local variables
121
- let doc = window.document, temp = doc.createElement('div'), env;
122
- // Append test node
123
- doc.body.appendChild(temp);
124
- // Loop through breakpoints
125
- for (let i = interfaces.ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
126
- env = interfaces.ResponsiveBgVariables.envs[i];
127
- // Add classes
128
- temp.className = 'hidden-' + env;
129
- // Found breakpoint
130
- if (temp.offsetParent === null) {
131
- // Remove our test node
132
- doc.body.removeChild(temp);
133
- console.log('remove test node');
134
- // Return current breakpoint
135
- return env;
136
- }
137
- }
138
- // Breakpoint not found, try fallback
139
- doc.body.removeChild(temp);
140
- return this.getFallbackBreakpoint();
141
- }
142
- getFallbackBreakpoint() {
143
- if (window.matchMedia('(min-width: 992px)').matches) {
144
- return 'lg';
145
- }
146
- else if (window.matchMedia('(min-width: 768px)').matches) {
147
- return 'md';
148
- }
149
- else if (window.matchMedia('(min-width: 576px)').matches) {
150
- return 'sm';
151
- }
152
- else {
153
- return 'xs';
154
- }
155
- }
156
- get el() { return index.getElement(this); }
157
- };
158
- PtcImg.style = ptcImgCss;
159
-
160
- exports.ptc_img = PtcImg;
@@ -1,34 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-0b899fc6.js');
6
-
7
- const ptcSpanCss = ":host{z-index:1}:host span{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}:host(.link-style) span{color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:#cac8c8;font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-05);font-size:17px;padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:var(--color-primary-grey)}:host(.plm-hub-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-19);font-weight:var(--ptc-font-weight-medium);color:var(--color-white)}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}:host(.white) span{color:var(--color-white)}:host(.primary-grey) span{color:var(--color-primary-grey)}";
8
-
9
- let PtcSpan = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- /**
13
- * Span Style
14
- */
15
- this.spanStyle = 'tag-style';
16
- /**
17
- * Display
18
- */
19
- this.display = 'inline';
20
- }
21
- render() {
22
- const classMap = this.getCssClassMap();
23
- return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("span", { part: "part-ptc-span" }, index.h("slot", null))));
24
- }
25
- getCssClassMap() {
26
- return {
27
- [this.spanStyle]: true,
28
- [this.display]: true,
29
- };
30
- }
31
- };
32
- PtcSpan.style = ptcSpanCss;
33
-
34
- exports.ptc_span = PtcSpan;
@@ -1,12 +0,0 @@
1
- let ResponsiveBgVariables = {
2
- envs: ['xs', 'sm', 'md', 'lg'],
3
- selector: '.ptc-img',
4
- interval: 250
5
- };
6
- let ResponsivePictureVariables = {
7
- envs: ['xs', 'sm', 'md', 'lg'],
8
- selector: '.ptc-picture',
9
- interval: 250
10
- };
11
-
12
- export { ResponsivePictureVariables as R, ResponsiveBgVariables as a };
@@ -1,25 +0,0 @@
1
- import { r as registerInstance, h, H as Host } from './index-6ce5b664.js';
2
-
3
- const listItemCss = ":host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:white;font-weight:700;font-size:12px;line-height:14px}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0}:host(.breadcrumb) li a.item-link{color:white;font-weight:var(-ptc-font-weight-bold) !important;font-size:var(-ptc-font-size-x-small) !important;line-height:14px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:#3DAB49;outline:none}";
4
-
5
- let ListItem = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.listType = 'list-primary';
9
- this.linkHref = undefined;
10
- this.flushBefore = false;
11
- }
12
- render() {
13
- const classMap = this.getCssClassMap();
14
- return (h(Host, { class: classMap }, h("li", null, this.linkHref ? (h("a", Object.assign({ class: "item-link" }, (this.linkHref ? { href: this.linkHref } : {})), h("slot", null))) : (h("slot", null)))));
15
- }
16
- getCssClassMap() {
17
- return {
18
- [this.listType]: true,
19
- ['flush-before']: this.flushBefore ? true : false
20
- };
21
- }
22
- };
23
- ListItem.style = listItemCss;
24
-
25
- export { ListItem as list_item };
@@ -1,19 +0,0 @@
1
- import { r as registerInstance, h, H as Host } from './index-6ce5b664.js';
2
-
3
- const ptcBreadcrumbCss = ":host{display:block;margin-top:21px}::slotted(*){transform:translate(-3px, 0px)}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm){::slotted(*){transform:translate(-3px, 4px)}}@-moz-document url-prefix(){::slotted(*){transform:translate(-3px, 0px)}}";
4
-
5
- let PtcBreadcrumb = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- }
9
- render() {
10
- const classMap = this.getCssClassMap();
11
- return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "large", name: "icon-home", color: "white" })), h("slot", null)));
12
- }
13
- getCssClassMap() {
14
- return {};
15
- }
16
- };
17
- PtcBreadcrumb.style = ptcBreadcrumbCss;
18
-
19
- export { PtcBreadcrumb as ptc_breadcrumb };
@@ -1,72 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host } from './index-6ce5b664.js';
2
-
3
- const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:3px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:0.86}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px #5bb73b;background-image:linear-gradient(285deg, #5bb73b 155%, #178642 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-primary-uigrey)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:4px;margin-top:4px;box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.legacy-green:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-medium)}@media screen and (min-width: 768px){.legacy-green span{font-size:19px;letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:3px;display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all ease-out 0.25s;position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{font-family:var(--ptc-font-latin);background-color:#323b42;border-radius:var(--ptc-border-radius-medium);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:13px;font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:26px;list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.nav:focus{outline:3px solid #0092d1;outline-offset:2px}.nav:hover{background-color:#20262a}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary{padding:var(--ptc-font-size-small) var(--ptc-font-size-large);transition:background-color var(--ptc-standard-ease) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled{pointer-events:none;border-color:#a8aaaf;background:#e1e2e4}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span{color:#a8aaaf}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]){fill:#a8aaaf !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus{outline:3px solid #0092d1;outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:17px;line-height:20px;letter-spacing:normal}.ptc-primary{background:#1f2024;border:2px solid #5bb73a;border-radius:var(--ptc-border-radius-medium)}.ptc-primary:hover{background-color:#33353a}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:#1f2024;border:2px solid #6d707b;border-radius:var(--ptc-border-radius-medium)}.ptc-secondary:hover{background-color:#33353a}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-primary-grey);border-radius:var(--ptc-border-radius-medium)}.ptc-tertiary:hover{background-color:#e1e2e4}.ptc-tertiary:active{background-color:#c5c5ca}.ptc-tertiary span{color:var(--color-primary-grey)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-primary-grey) !important}.ptc-quaternary{background:#158542;border:2px solid #459e67;border-radius:var(--ptc-border-radius-medium)}.ptc-quaternary:hover{background-color:#17713a}.ptc-quaternary:active{background-color:#186135}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}";
4
-
5
- let PtcButton = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.clickEvent = createEvent(this, "clickEvent", 7);
9
- /**
10
- * Disabled button
11
- */
12
- this.disabled = false;
13
- /**
14
- * Button type
15
- */
16
- this.type = 'button';
17
- /**
18
- * Button theme color
19
- */
20
- this.color = 'ptc-primary';
21
- /**
22
- * Icon Animation
23
- */
24
- this.iconAnimation = '';
25
- /**
26
- * Icon Position
27
- */
28
- this.iconPosition = 'icon-right';
29
- /**
30
- * Link URL
31
- */
32
- this.linkHref = undefined;
33
- /**
34
- * link Title
35
- */
36
- this.linkTitle = undefined;
37
- /**
38
- * Link target
39
- * */
40
- this.target = '_self';
41
- /**
42
- * Link rel
43
- * */
44
- this.rel = undefined;
45
- /**
46
- * (optional) tab-nav.
47
- * indicates that its element can be focused, and where it participates in sequential keyboard navigation.
48
- * A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
49
- */
50
- this.tabNav = 0;
51
- }
52
- clickEventHandler() {
53
- this.clickEvent.emit();
54
- //console.log('click!');
55
- }
56
- render() {
57
- const classMap = this.getCssClassMap();
58
- const Tag = !!this.linkHref ? 'a' : 'button';
59
- return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
60
- }
61
- getCssClassMap() {
62
- return {
63
- [this.color]: true,
64
- [this.iconAnimation]: true,
65
- [this.iconPosition]: true,
66
- ['disabled']: this.disabled ? true : false,
67
- };
68
- }
69
- };
70
- PtcButton.style = ptcButtonCss;
71
-
72
- export { PtcButton as ptc_button };
@@ -1,21 +0,0 @@
1
- import { r as registerInstance, h, H as Host } from './index-6ce5b664.js';
2
-
3
- const ptcHeroCss = ":host{display:block;position:relative}:host(.jumbotron) .ptc-hero-wrapper,:host(.footer-cta) .ptc-hero-wrapper{position:relative}:host(.footer-cta) .ptc-hero-wrapper div>*{text-align:center}";
4
-
5
- let PtcHero = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- }
9
- render() {
10
- const classMap = this.getCssClassMap();
11
- return (h(Host, { class: classMap }, h("div", { class: "ptc-hero-wrapper" }, h("ptc-img", { "image-type": "smart-bg", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1-xs" }), h("ptc-overlay", { "filter-color": "black-2-xs" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null, h("slot", null)))));
12
- }
13
- getCssClassMap() {
14
- return {
15
- [this.heroType]: this.heroType ? true : false,
16
- };
17
- }
18
- };
19
- PtcHero.style = ptcHeroCss;
20
-
21
- export { PtcHero as ptc_hero };