@ptcwebops/ptcw-design 0.4.2 → 0.4.4
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/_commonjsHelpers-119ffc74.js +17 -0
- package/dist/cjs/icon-asset_5.cjs.entry.js +988 -0
- package/dist/cjs/{index-e39de343.js → index-3adcf9f4.js} +7 -0
- package/dist/cjs/interfaces-0ecd8027.js +15 -0
- package/dist/cjs/list-item.cjs.entry.js +29 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/lottie-player.cjs.entry.js +3 -16
- package/dist/cjs/my-component.cjs.entry.js +1 -1
- package/dist/cjs/ptc-breadcrumb.cjs.entry.js +23 -0
- package/dist/cjs/ptc-button.cjs.entry.js +76 -0
- package/dist/cjs/ptc-card-bottom.cjs.entry.js +42 -0
- package/dist/cjs/ptc-card-content.cjs.entry.js +42 -0
- package/dist/cjs/ptc-card-plm.cjs.entry.js +27 -0
- package/dist/cjs/ptc-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-countdown.cjs.entry.js +1 -1
- package/dist/cjs/ptc-date.cjs.entry.js +1 -1
- package/dist/cjs/ptc-footer.cjs.entry.js +1 -1
- package/dist/cjs/ptc-form.cjs.entry.js +1 -1
- package/dist/cjs/ptc-hero.cjs.entry.js +29 -0
- package/dist/cjs/ptc-img_2.cjs.entry.js +185 -0
- package/dist/cjs/ptc-input.cjs.entry.js +1 -1
- package/dist/cjs/ptc-link.cjs.entry.js +53 -0
- package/dist/cjs/ptc-list.cjs.entry.js +1 -1
- package/dist/cjs/ptc-lottie.cjs.entry.js +1 -1
- package/dist/cjs/ptc-modal.cjs.entry.js +1 -1
- package/dist/cjs/ptc-nav-item.cjs.entry.js +1 -1
- package/dist/cjs/ptc-nav.cjs.entry.js +1 -1
- package/dist/cjs/ptc-para.cjs.entry.js +50 -0
- package/dist/cjs/ptc-picture.cjs.entry.js +169 -0
- package/dist/cjs/ptc-select.cjs.entry.js +1 -1
- package/dist/cjs/ptc-social-share.cjs.entry.js +1 -1
- package/dist/cjs/ptc-spacer.cjs.entry.js +46 -0
- package/dist/cjs/ptc-span.cjs.entry.js +34 -0
- package/dist/cjs/ptc-title.cjs.entry.js +55 -0
- package/dist/cjs/ptcw-design.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.css +199 -0
- package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js +149 -0
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css +3 -0
- package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.js +62 -0
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css +8 -0
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +818 -2
- package/dist/esm/_commonjsHelpers-8b28c6fa.js +15 -0
- package/dist/esm/icon-asset_5.entry.js +980 -0
- package/dist/esm/{index-9e77d90e.js → index-357497dc.js} +7 -0
- package/dist/esm/interfaces-c1c73092.js +12 -0
- package/dist/esm/list-item.entry.js +25 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/lottie-player.entry.js +2 -15
- package/dist/esm/my-component.entry.js +1 -1
- package/dist/esm/ptc-breadcrumb.entry.js +19 -0
- package/dist/esm/ptc-button.entry.js +72 -0
- package/dist/esm/ptc-card-bottom.entry.js +38 -0
- package/dist/esm/ptc-card-content.entry.js +38 -0
- package/dist/esm/ptc-card-plm.entry.js +23 -0
- package/dist/esm/ptc-card.entry.js +1 -1
- package/dist/esm/ptc-countdown.entry.js +1 -1
- package/dist/esm/ptc-date.entry.js +1 -1
- package/dist/esm/ptc-footer.entry.js +1 -1
- package/dist/esm/ptc-form.entry.js +1 -1
- package/dist/esm/ptc-hero.entry.js +25 -0
- package/dist/esm/ptc-img_2.entry.js +180 -0
- package/dist/esm/ptc-input.entry.js +1 -1
- package/dist/esm/ptc-link.entry.js +49 -0
- package/dist/esm/ptc-list.entry.js +1 -1
- package/dist/esm/ptc-lottie.entry.js +1 -1
- package/dist/esm/ptc-modal.entry.js +1 -1
- package/dist/esm/ptc-nav-item.entry.js +1 -1
- package/dist/esm/ptc-nav.entry.js +1 -1
- package/dist/esm/ptc-para.entry.js +46 -0
- package/dist/esm/ptc-picture.entry.js +165 -0
- package/dist/esm/ptc-select.entry.js +1 -1
- package/dist/esm/ptc-social-share.entry.js +1 -1
- package/dist/esm/ptc-spacer.entry.js +42 -0
- package/dist/esm/ptc-span.entry.js +30 -0
- package/dist/esm/ptc-title.entry.js +51 -0
- package/dist/esm/ptcw-design.js +2 -2
- package/dist/ptcw-design/{p-19f001a4.js → p-0e571387.js} +1 -1
- package/dist/ptcw-design/p-1e39bc14.entry.js +1 -0
- package/dist/ptcw-design/p-27538cac.entry.js +1 -0
- package/dist/ptcw-design/{p-abb97d21.entry.js → p-2f78af32.entry.js} +1 -1
- package/dist/ptcw-design/{p-3050845e.entry.js → p-3a174881.entry.js} +1 -1
- package/dist/ptcw-design/{p-b542c708.entry.js → p-4ba0046d.entry.js} +1 -1
- package/dist/ptcw-design/p-4bacc49a.entry.js +7 -0
- package/dist/ptcw-design/p-50e52c88.js +1 -0
- package/dist/ptcw-design/{p-65b30c15.entry.js → p-525faf32.entry.js} +1 -1
- package/dist/ptcw-design/p-5672aca0.entry.js +1 -0
- package/dist/ptcw-design/p-59a5663a.entry.js +1 -0
- package/dist/ptcw-design/{p-b798ca9c.entry.js → p-6106d579.entry.js} +1 -1
- package/dist/ptcw-design/p-6402cb6d.entry.js +1 -0
- package/dist/ptcw-design/p-64c98ea6.entry.js +1 -0
- package/dist/ptcw-design/{p-b803e2da.entry.js → p-66912e75.entry.js} +1 -1
- package/dist/ptcw-design/p-68bcb24d.entry.js +1 -0
- package/dist/ptcw-design/p-74a72a40.entry.js +1 -0
- package/dist/ptcw-design/{p-8a6de852.entry.js → p-75cc322d.entry.js} +1 -1
- package/dist/ptcw-design/{p-c140717c.entry.js → p-7b60638a.entry.js} +1 -1
- package/dist/ptcw-design/{p-b3e145f3.entry.js → p-7cea01d0.entry.js} +1 -1
- package/dist/ptcw-design/p-80c03571.entry.js +1 -0
- package/dist/ptcw-design/{p-762a6628.entry.js → p-87bc2b6f.entry.js} +1 -1
- package/dist/ptcw-design/{p-feed36fa.entry.js → p-9367272c.entry.js} +1 -1
- package/dist/ptcw-design/{p-8f9df770.entry.js → p-9b5a3528.entry.js} +1 -1
- package/dist/ptcw-design/p-a4300906.entry.js +1 -0
- package/dist/ptcw-design/{p-fe25f590.entry.js → p-aa4f80c6.entry.js} +1 -1
- package/dist/ptcw-design/p-b26e2c72.entry.js +1 -0
- package/dist/ptcw-design/p-b6757552.entry.js +1 -0
- package/dist/ptcw-design/p-b68038b5.js +1 -0
- package/dist/ptcw-design/p-bb7e7943.entry.js +1 -0
- package/dist/ptcw-design/p-bfe3ac5b.entry.js +1 -0
- package/dist/ptcw-design/p-c47b4ebf.entry.js +1 -0
- package/dist/ptcw-design/p-ce2134e1.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-mobile-select/ptc-mobile-select.d.ts +28 -0
- package/dist/types/components/ptc-responsive-wrapper/ptc-responsive-wrapper.d.ts +8 -0
- package/dist/types/components.d.ts +74 -0
- package/package.json +6 -2
- package/readme.md +1 -1
- package/dist/cjs/icon-asset_16.cjs.entry.js +0 -849
- package/dist/cjs/ptc-announcement.cjs.entry.js +0 -43
- package/dist/cjs/ptc-svg-btn.cjs.entry.js +0 -81
- package/dist/esm/icon-asset_16.entry.js +0 -830
- package/dist/esm/ptc-announcement.entry.js +0 -39
- package/dist/esm/ptc-svg-btn.entry.js +0 -77
- package/dist/ptcw-design/p-57fcfb62.entry.js +0 -1
- package/dist/ptcw-design/p-5afee3b6.entry.js +0 -1
- package/dist/ptcw-design/p-96e30287.entry.js +0 -1
- package/dist/ptcw-design/p-97152565.entry.js +0 -1
- package/dist/ptcw-design/p-f98b4bdd.entry.js +0 -1
|
@@ -0,0 +1,988 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-3adcf9f4.js');
|
|
6
|
+
const _commonjsHelpers = require('./_commonjsHelpers-119ffc74.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-standard-ease)}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.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.white.sc-icon-asset{fill:var(--color-white)}svg.black.sc-icon-asset{fill:var(--color-black)}svg.ptc-green.sc-icon-asset{fill:var(--color-primary-green)}svg.gray.sc-icon-asset{fill:var(--color-gray-06)}svg.inherit.sc-icon-asset{fill:inherit}";
|
|
9
|
+
|
|
10
|
+
let IconAsset = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
/**
|
|
14
|
+
* Icon Size
|
|
15
|
+
*/
|
|
16
|
+
this.size = 'small';
|
|
17
|
+
/**
|
|
18
|
+
* Icon Type
|
|
19
|
+
*/
|
|
20
|
+
this.type = 'regular';
|
|
21
|
+
/**
|
|
22
|
+
* Icon Spin Animation (not valid for ptc type)
|
|
23
|
+
*/
|
|
24
|
+
this.spin = '';
|
|
25
|
+
/**
|
|
26
|
+
* Icon Pulse Animation (not valid for ptc type)
|
|
27
|
+
*/
|
|
28
|
+
this.pulse = '';
|
|
29
|
+
/**
|
|
30
|
+
* Icon Color
|
|
31
|
+
*/
|
|
32
|
+
this.color = 'default';
|
|
33
|
+
this.regularSprite = index.getAssetPath('./media/regular.svg');
|
|
34
|
+
this.solidSprite = index.getAssetPath('./media/solid.svg');
|
|
35
|
+
this.brandSprite = index.getAssetPath('./media/brands.svg');
|
|
36
|
+
this.ptcSprite = index.getAssetPath('./media/designer.svg');
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const classMap = this.getCssClassMap();
|
|
40
|
+
if (this.type == 'brands') {
|
|
41
|
+
return (index.h(index.Host, null, index.h("svg", { class: classMap }, index.h("use", { href: `${this.brandSprite}#${this.name}` }))));
|
|
42
|
+
}
|
|
43
|
+
else if (this.type == 'solid') {
|
|
44
|
+
return (index.h(index.Host, null, index.h("svg", { class: classMap }, index.h("use", { href: `${this.solidSprite}#${this.name}` }))));
|
|
45
|
+
}
|
|
46
|
+
else if (this.type == 'ptc') {
|
|
47
|
+
return (index.h(index.Host, null, index.h("svg", { class: classMap }, index.h("use", { href: `${this.ptcSprite}#${this.name}` }))));
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
return (index.h(index.Host, null, index.h("svg", { class: classMap }, index.h("use", { href: `${this.regularSprite}#${this.name}` }))));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
getCssClassMap() {
|
|
54
|
+
return {
|
|
55
|
+
[this.size]: true,
|
|
56
|
+
[this.spin]: true,
|
|
57
|
+
[this.pulse]: true,
|
|
58
|
+
[this.color]: true,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
static get assetsDirs() { return ["media"]; }
|
|
62
|
+
};
|
|
63
|
+
IconAsset.style = iconAssetCss;
|
|
64
|
+
|
|
65
|
+
const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:#e4e7e9;z-index:860;background-size:cover;background-repeat:repeat-x;border:1px solid var(--color-secondary-turtlegreen);-webkit-box-shadow:1px 1px 9px 0 rgba(0, 0, 0, 0.56);box-shadow:1px 1px 9px 0 rgba(0, 0, 0, 0.56);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:5px 15px;margin:0 auto;align-items:center;justify-content:space-between}@media screen and (min-width: 768px){.content-wrapper{padding:10px 15px}}@media screen and (min-width: 768px){.temp-container{width:750px}}@media screen and (min-width: 992px){.temp-container{width:970px}}@media screen and (min-width: 1200px){.temp-container{width:1170px}}@media screen and (min-width: 1440px){.temp-container{width:1400px}}@media screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:18%;font-family:Raleway;font-size:13px;font-weight:800;font-stretch:normal;font-style:normal;line-height:2.6;letter-spacing:1px;text-align:left;color:#40434a;text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:15px}.description{flex-basis:82%;font-family:Raleway;font-size:13px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.4;letter-spacing:normal;text-align:left;color:#40434a;}a{color:#3b4550;-webkit-transition:color 0.3s ease;-o-transition:color 0.3s ease;transition:color 0.3s ease;font-weight:700;border-bottom:0.15rem solid #74c34d;text-decoration:none;margin-left:16px}a:hover{color:#74c34d;text-decoration:none}@media (min-width: 768px){.bar-close{padding-right:0px}}@media (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:14px;font-weight:800;line-height:1.86;letter-spacing:1.4px}.description{font-size:16px;font-weight:500;line-height:1.6}}";
|
|
66
|
+
|
|
67
|
+
let PtcAnnouncement = class {
|
|
68
|
+
constructor(hostRef) {
|
|
69
|
+
index.registerInstance(this, hostRef);
|
|
70
|
+
this.close = index.createEvent(this, "close", 7);
|
|
71
|
+
/**
|
|
72
|
+
* bar title
|
|
73
|
+
*/
|
|
74
|
+
this.barTitle = "";
|
|
75
|
+
/**
|
|
76
|
+
* bar description
|
|
77
|
+
*/
|
|
78
|
+
this.Description = "";
|
|
79
|
+
/**
|
|
80
|
+
* Link Url
|
|
81
|
+
*/
|
|
82
|
+
this.linkUrl = '#';
|
|
83
|
+
this.closeClick = () => {
|
|
84
|
+
this.visible = false;
|
|
85
|
+
this.close.emit();
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
const classMap = this.getCssClassMap();
|
|
90
|
+
return (index.h(index.Host, null, index.h("div", { class: classMap, part: "part-announcement" }, index.h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, index.h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? index.h("div", { class: "title" }, this.barTitle) : null, index.h("div", { class: "description" }, !!this.Description ? index.h("span", null, this.Description) : null, !!this.linkText ? (index.h("a", { href: this.linkUrl, title: this.linkText }, this.linkText)) : null)), index.h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
|
|
91
|
+
}
|
|
92
|
+
getCssClassMap() {
|
|
93
|
+
return {
|
|
94
|
+
['announcement']: true,
|
|
95
|
+
[this.visible ? 'visible' : '']: true,
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
PtcAnnouncement.style = ptcAnnouncementCss;
|
|
100
|
+
|
|
101
|
+
var mobileSelect = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
102
|
+
/*!
|
|
103
|
+
* mobileSelect.js
|
|
104
|
+
* (c) 2017-present onlyhom
|
|
105
|
+
* Released under the MIT License.
|
|
106
|
+
*/
|
|
107
|
+
|
|
108
|
+
(function() {
|
|
109
|
+
|
|
110
|
+
function getClass(dom,string) {
|
|
111
|
+
return dom.getElementsByClassName(string);
|
|
112
|
+
}
|
|
113
|
+
//构造器
|
|
114
|
+
function MobileSelect(config) {
|
|
115
|
+
this.wheelsData = config.wheels;
|
|
116
|
+
this.jsonType = false;
|
|
117
|
+
this.cascadeJsonData = [];
|
|
118
|
+
this.displayJson = [];
|
|
119
|
+
this.curValue = [];
|
|
120
|
+
this.curIndexArr = [];
|
|
121
|
+
this.cascade = false;
|
|
122
|
+
this.offset = 0;
|
|
123
|
+
this.offsetSum = 0;
|
|
124
|
+
this.curDistance = [];
|
|
125
|
+
this.clickStatus = false;
|
|
126
|
+
this.isPC = true;
|
|
127
|
+
this.init(config);
|
|
128
|
+
}
|
|
129
|
+
MobileSelect.prototype = {
|
|
130
|
+
constructor: MobileSelect,
|
|
131
|
+
init: function(config){
|
|
132
|
+
var _this = this;
|
|
133
|
+
if(config.wheels[0].data.length==0){
|
|
134
|
+
console.error('mobileSelect has been successfully installed, but the data is empty and cannot be initialized.');
|
|
135
|
+
return false;
|
|
136
|
+
}
|
|
137
|
+
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
|
|
138
|
+
_this.checkDataType();
|
|
139
|
+
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
|
|
140
|
+
_this.trigger = document.querySelector(config.trigger);
|
|
141
|
+
if(!_this.trigger){
|
|
142
|
+
console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
|
|
143
|
+
return false;
|
|
144
|
+
}
|
|
145
|
+
_this.wheel = getClass(_this.mobileSelect,'wheel');
|
|
146
|
+
_this.slider = getClass(_this.mobileSelect,'selectContainer');
|
|
147
|
+
_this.wheels = _this.mobileSelect.querySelector('.wheels');
|
|
148
|
+
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
|
|
149
|
+
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
|
|
150
|
+
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
|
|
151
|
+
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
|
|
152
|
+
_this.popUp = _this.mobileSelect.querySelector('.content');
|
|
153
|
+
_this.callback = config.callback || function(){};
|
|
154
|
+
_this.cancel = config.cancel || function(){};
|
|
155
|
+
_this.transitionEnd = config.transitionEnd || function(){};
|
|
156
|
+
_this.onShow = config.onShow || function(){};
|
|
157
|
+
_this.onHide = config.onHide || function(){};
|
|
158
|
+
_this.initPosition = config.position || [];
|
|
159
|
+
_this.titleText = config.title || '';
|
|
160
|
+
_this.connector = config.connector || ' ';
|
|
161
|
+
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
|
|
162
|
+
_this.trigger.style.cursor='pointer';
|
|
163
|
+
_this.setStyle(config);
|
|
164
|
+
_this.setTitle(_this.titleText);
|
|
165
|
+
_this.checkIsPC();
|
|
166
|
+
_this.checkCascade();
|
|
167
|
+
_this.addListenerAll();
|
|
168
|
+
|
|
169
|
+
if (_this.cascade) {
|
|
170
|
+
_this.initCascade();
|
|
171
|
+
}
|
|
172
|
+
//定位 初始位置
|
|
173
|
+
if(_this.initPosition.length < _this.slider.length){
|
|
174
|
+
var diff = _this.slider.length - _this.initPosition.length;
|
|
175
|
+
for(var i=0; i<diff; i++){
|
|
176
|
+
_this.initPosition.push(0);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
_this.setCurDistance(_this.initPosition);
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
//按钮监听
|
|
184
|
+
_this.cancelBtn.addEventListener('click',function(){
|
|
185
|
+
_this.hide();
|
|
186
|
+
_this.cancel(_this.curIndexArr, _this.curValue);
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
_this.ensureBtn.addEventListener('click',function(){
|
|
190
|
+
_this.hide();
|
|
191
|
+
if(!_this.liHeight) {
|
|
192
|
+
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
|
|
193
|
+
}
|
|
194
|
+
var tempValue ='';
|
|
195
|
+
for(var i=0; i<_this.wheel.length; i++){
|
|
196
|
+
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
|
|
197
|
+
}
|
|
198
|
+
if(_this.triggerDisplayData){
|
|
199
|
+
_this.trigger.innerHTML = tempValue;
|
|
200
|
+
}
|
|
201
|
+
_this.curIndexArr = _this.getIndexArr();
|
|
202
|
+
_this.curValue = _this.getCurValue();
|
|
203
|
+
_this.callback(_this.curIndexArr, _this.curValue);
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
_this.trigger.addEventListener('click',function(){
|
|
207
|
+
_this.show();
|
|
208
|
+
});
|
|
209
|
+
_this.grayLayer.addEventListener('click',function(){
|
|
210
|
+
_this.hide();
|
|
211
|
+
_this.cancel(_this.curIndexArr, _this.curValue);
|
|
212
|
+
});
|
|
213
|
+
_this.popUp.addEventListener('click',function(){
|
|
214
|
+
event.stopPropagation();
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
_this.fixRowStyle(); //修正列数
|
|
218
|
+
},
|
|
219
|
+
|
|
220
|
+
setTitle: function(string){
|
|
221
|
+
var _this = this;
|
|
222
|
+
_this.titleText = string;
|
|
223
|
+
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
|
|
224
|
+
},
|
|
225
|
+
|
|
226
|
+
setStyle: function(config){
|
|
227
|
+
var _this = this;
|
|
228
|
+
if(config.ensureBtnColor){
|
|
229
|
+
_this.ensureBtn.style.color = config.ensureBtnColor;
|
|
230
|
+
}
|
|
231
|
+
if(config.cancelBtnColor){
|
|
232
|
+
_this.cancelBtn.style.color = config.cancelBtnColor;
|
|
233
|
+
}
|
|
234
|
+
if(config.titleColor){
|
|
235
|
+
_this.title = _this.mobileSelect.querySelector('.title');
|
|
236
|
+
_this.title.style.color = config.titleColor;
|
|
237
|
+
}
|
|
238
|
+
if(config.textColor){
|
|
239
|
+
_this.panel = _this.mobileSelect.querySelector('.panel');
|
|
240
|
+
_this.panel.style.color = config.textColor;
|
|
241
|
+
}
|
|
242
|
+
if(config.titleBgColor){
|
|
243
|
+
_this.btnBar = _this.mobileSelect.querySelector('.btnBar');
|
|
244
|
+
_this.btnBar.style.backgroundColor = config.titleBgColor;
|
|
245
|
+
}
|
|
246
|
+
if(config.bgColor){
|
|
247
|
+
_this.panel = _this.mobileSelect.querySelector('.panel');
|
|
248
|
+
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
|
|
249
|
+
_this.panel.style.backgroundColor = config.bgColor;
|
|
250
|
+
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
|
|
251
|
+
}
|
|
252
|
+
if(!isNaN(config.maskOpacity)){
|
|
253
|
+
_this.grayMask = _this.mobileSelect.querySelector('.grayLayer');
|
|
254
|
+
_this.grayMask.style.background = 'rgba(0, 0, 0, '+ config.maskOpacity +')';
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
|
|
258
|
+
checkIsPC: function(){
|
|
259
|
+
var _this = this;
|
|
260
|
+
var sUserAgent = navigator.userAgent.toLowerCase();
|
|
261
|
+
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
|
262
|
+
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
|
263
|
+
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
|
264
|
+
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
|
265
|
+
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
|
266
|
+
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
|
267
|
+
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
|
268
|
+
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
|
269
|
+
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
|
270
|
+
_this.isPC = false;
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
|
|
274
|
+
show: function(){
|
|
275
|
+
this.mobileSelect.classList.add('mobileSelect-show');
|
|
276
|
+
if (typeof this.onShow === 'function') {
|
|
277
|
+
this.onShow(this);
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
|
|
281
|
+
hide: function() {
|
|
282
|
+
this.mobileSelect.classList.remove('mobileSelect-show');
|
|
283
|
+
if (typeof this.onHide === 'function') {
|
|
284
|
+
this.onHide(this);
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
|
|
288
|
+
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
|
|
289
|
+
var _this = this;
|
|
290
|
+
var cancelText = cancelBtnText ? cancelBtnText : '取消';
|
|
291
|
+
var ensureText = ensureBtnText ? ensureBtnText : '确认';
|
|
292
|
+
_this.mobileSelect = document.createElement("div");
|
|
293
|
+
_this.mobileSelect.className = "mobileSelect";
|
|
294
|
+
_this.mobileSelect.innerHTML =
|
|
295
|
+
'<div class="grayLayer"></div>'+
|
|
296
|
+
'<div class="content">'+
|
|
297
|
+
'<div class="btnBar">'+
|
|
298
|
+
'<div class="fixWidth">'+
|
|
299
|
+
'<div class="cancel">'+ cancelText +'</div>'+
|
|
300
|
+
'<div class="title"></div>'+
|
|
301
|
+
'<div class="ensure">'+ ensureText +'</div>'+
|
|
302
|
+
'</div>'+
|
|
303
|
+
'</div>'+
|
|
304
|
+
'<div class="panel">'+
|
|
305
|
+
'<div class="fixWidth">'+
|
|
306
|
+
'<div class="wheels">'+
|
|
307
|
+
'</div>'+
|
|
308
|
+
'<div class="selectLine"></div>'+
|
|
309
|
+
'<div class="shadowMask"></div>'+
|
|
310
|
+
'</div>'+
|
|
311
|
+
'</div>'+
|
|
312
|
+
'</div>';
|
|
313
|
+
document.body.appendChild(_this.mobileSelect);
|
|
314
|
+
|
|
315
|
+
//根据数据长度来渲染
|
|
316
|
+
|
|
317
|
+
var tempHTML='';
|
|
318
|
+
for(var i=0; i<wheelsData.length; i++){
|
|
319
|
+
//列
|
|
320
|
+
tempHTML += '<div class="wheel"><ul class="selectContainer">';
|
|
321
|
+
if(_this.jsonType){
|
|
322
|
+
for(var j=0; j<wheelsData[i].data.length; j++){
|
|
323
|
+
//行
|
|
324
|
+
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
|
|
325
|
+
}
|
|
326
|
+
}else {
|
|
327
|
+
for(var j=0; j<wheelsData[i].data.length; j++){
|
|
328
|
+
//行
|
|
329
|
+
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
tempHTML += '</ul></div>';
|
|
333
|
+
}
|
|
334
|
+
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
|
|
335
|
+
},
|
|
336
|
+
|
|
337
|
+
addListenerAll: function(){
|
|
338
|
+
var _this = this;
|
|
339
|
+
for(var i=0; i<_this.slider.length; i++){
|
|
340
|
+
//手势监听
|
|
341
|
+
(function (i) {
|
|
342
|
+
_this.addListenerWheel(_this.wheel[i], i);
|
|
343
|
+
})(i);
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
|
|
347
|
+
addListenerWheel: function(theWheel, index){
|
|
348
|
+
var _this = this;
|
|
349
|
+
theWheel.addEventListener('touchstart', function () {
|
|
350
|
+
_this.touch(event, this.firstChild, index);
|
|
351
|
+
},false);
|
|
352
|
+
theWheel.addEventListener('touchend', function () {
|
|
353
|
+
_this.touch(event, this.firstChild, index);
|
|
354
|
+
},false);
|
|
355
|
+
theWheel.addEventListener('touchmove', function () {
|
|
356
|
+
_this.touch(event, this.firstChild, index);
|
|
357
|
+
},false);
|
|
358
|
+
|
|
359
|
+
if(_this.isPC){
|
|
360
|
+
//如果是PC端则再增加拖拽监听 方便调试
|
|
361
|
+
theWheel.addEventListener('mousedown', function () {
|
|
362
|
+
_this.dragClick(event, this.firstChild, index);
|
|
363
|
+
},false);
|
|
364
|
+
theWheel.addEventListener('mousemove', function () {
|
|
365
|
+
_this.dragClick(event, this.firstChild, index);
|
|
366
|
+
},false);
|
|
367
|
+
theWheel.addEventListener('mouseup', function () {
|
|
368
|
+
_this.dragClick(event, this.firstChild, index);
|
|
369
|
+
},true);
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
|
|
373
|
+
checkDataType: function(){
|
|
374
|
+
var _this = this;
|
|
375
|
+
if(typeof(_this.wheelsData[0].data[0])=='object'){
|
|
376
|
+
_this.jsonType = true;
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
|
|
380
|
+
checkCascade: function(){
|
|
381
|
+
var _this = this;
|
|
382
|
+
if(_this.jsonType){
|
|
383
|
+
var node = _this.wheelsData[0].data;
|
|
384
|
+
for(var i=0; i<node.length; i++){
|
|
385
|
+
if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){
|
|
386
|
+
_this.cascade = true;
|
|
387
|
+
_this.cascadeJsonData = _this.wheelsData[0].data;
|
|
388
|
+
break;
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}else {
|
|
392
|
+
_this.cascade = false;
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
|
|
396
|
+
generateArrData: function (targetArr) {
|
|
397
|
+
var tempArr = [];
|
|
398
|
+
var keyMap_id = this.keyMap.id;
|
|
399
|
+
var keyMap_value = this.keyMap.value;
|
|
400
|
+
for(var i=0; i<targetArr.length; i++){
|
|
401
|
+
var tempObj = {};
|
|
402
|
+
tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
|
|
403
|
+
tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
|
|
404
|
+
tempArr.push(tempObj);
|
|
405
|
+
}
|
|
406
|
+
return tempArr;
|
|
407
|
+
},
|
|
408
|
+
|
|
409
|
+
initCascade: function(){
|
|
410
|
+
var _this = this;
|
|
411
|
+
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
|
|
412
|
+
if(_this.initPosition.length>0){
|
|
413
|
+
_this.initDeepCount = 0;
|
|
414
|
+
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
|
|
415
|
+
}else {
|
|
416
|
+
_this.checkArrDeep(_this.cascadeJsonData[0]);
|
|
417
|
+
}
|
|
418
|
+
_this.reRenderWheels();
|
|
419
|
+
},
|
|
420
|
+
|
|
421
|
+
initCheckArrDeep: function (parent) {
|
|
422
|
+
var _this = this;
|
|
423
|
+
if(parent){
|
|
424
|
+
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
|
425
|
+
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
|
|
426
|
+
_this.initDeepCount++;
|
|
427
|
+
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
|
|
428
|
+
if(nextNode){
|
|
429
|
+
_this.initCheckArrDeep(nextNode);
|
|
430
|
+
}else {
|
|
431
|
+
_this.checkArrDeep(parent[_this.keyMap.childs][0]);
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
},
|
|
436
|
+
|
|
437
|
+
checkArrDeep: function (parent) {
|
|
438
|
+
//检测子节点深度 修改 displayJson
|
|
439
|
+
var _this = this;
|
|
440
|
+
if(parent){
|
|
441
|
+
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
|
442
|
+
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
|
|
443
|
+
_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
|
|
448
|
+
checkRange: function(index, posIndexArr){
|
|
449
|
+
var _this = this;
|
|
450
|
+
var deleteNum = _this.displayJson.length-1-index;
|
|
451
|
+
for(var i=0; i<deleteNum; i++){
|
|
452
|
+
_this.displayJson.pop(); //修改 displayJson
|
|
453
|
+
}
|
|
454
|
+
var resultNode;
|
|
455
|
+
for (var i = 0; i <= index; i++){
|
|
456
|
+
if (i == 0)
|
|
457
|
+
resultNode = _this.cascadeJsonData[posIndexArr[0]];
|
|
458
|
+
else {
|
|
459
|
+
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
_this.checkArrDeep(resultNode);
|
|
463
|
+
//console.log(_this.displayJson);
|
|
464
|
+
_this.reRenderWheels();
|
|
465
|
+
_this.fixRowStyle();
|
|
466
|
+
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
|
|
467
|
+
},
|
|
468
|
+
|
|
469
|
+
resetPosition: function(index, posIndexArr){
|
|
470
|
+
var _this = this;
|
|
471
|
+
var tempPosArr = posIndexArr;
|
|
472
|
+
var tempCount;
|
|
473
|
+
if(_this.slider.length > posIndexArr.length){
|
|
474
|
+
tempCount = _this.slider.length - posIndexArr.length;
|
|
475
|
+
for(var i=0; i<tempCount; i++){
|
|
476
|
+
tempPosArr.push(0);
|
|
477
|
+
}
|
|
478
|
+
}else if(_this.slider.length < posIndexArr.length){
|
|
479
|
+
tempCount = posIndexArr.length - _this.slider.length;
|
|
480
|
+
for(var i=0; i<tempCount; i++){
|
|
481
|
+
tempPosArr.pop();
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
for(var i=index+1; i< tempPosArr.length; i++){
|
|
485
|
+
tempPosArr[i] = 0;
|
|
486
|
+
}
|
|
487
|
+
return tempPosArr;
|
|
488
|
+
},
|
|
489
|
+
reRenderWheels: function(){
|
|
490
|
+
var _this = this;
|
|
491
|
+
//删除多余的wheel
|
|
492
|
+
if(_this.wheel.length > _this.displayJson.length){
|
|
493
|
+
var count = _this.wheel.length - _this.displayJson.length;
|
|
494
|
+
for(var i=0; i<count; i++){
|
|
495
|
+
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
for(var i=0; i<_this.displayJson.length; i++){
|
|
499
|
+
//列
|
|
500
|
+
(function (i) {
|
|
501
|
+
var tempHTML='';
|
|
502
|
+
if(_this.wheel[i]){
|
|
503
|
+
//console.log('插入Li');
|
|
504
|
+
for(var j=0; j<_this.displayJson[i].length; j++){
|
|
505
|
+
//行
|
|
506
|
+
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
|
507
|
+
}
|
|
508
|
+
_this.slider[i].innerHTML = tempHTML;
|
|
509
|
+
|
|
510
|
+
}else {
|
|
511
|
+
var tempWheel = document.createElement("div");
|
|
512
|
+
tempWheel.className = "wheel";
|
|
513
|
+
tempHTML = '<ul class="selectContainer">';
|
|
514
|
+
for(var j=0; j<_this.displayJson[i].length; j++){
|
|
515
|
+
//行
|
|
516
|
+
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
|
517
|
+
}
|
|
518
|
+
tempHTML += '</ul>';
|
|
519
|
+
tempWheel.innerHTML = tempHTML;
|
|
520
|
+
|
|
521
|
+
_this.addListenerWheel(tempWheel, i);
|
|
522
|
+
_this.wheels.appendChild(tempWheel);
|
|
523
|
+
}
|
|
524
|
+
//_this.·(i);
|
|
525
|
+
})(i);
|
|
526
|
+
}
|
|
527
|
+
},
|
|
528
|
+
|
|
529
|
+
updateWheels:function(data){
|
|
530
|
+
var _this = this;
|
|
531
|
+
if(_this.cascade){
|
|
532
|
+
_this.cascadeJsonData = data;
|
|
533
|
+
_this.displayJson = [];
|
|
534
|
+
_this.initCascade();
|
|
535
|
+
if(_this.initPosition.length < _this.slider.length){
|
|
536
|
+
var diff = _this.slider.length - _this.initPosition.length;
|
|
537
|
+
for(var i=0; i<diff; i++){
|
|
538
|
+
_this.initPosition.push(0);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
_this.setCurDistance(_this.initPosition);
|
|
542
|
+
_this.fixRowStyle();
|
|
543
|
+
}
|
|
544
|
+
},
|
|
545
|
+
|
|
546
|
+
updateWheel: function(sliderIndex, data){
|
|
547
|
+
var _this = this;
|
|
548
|
+
var tempHTML='';
|
|
549
|
+
if(_this.cascade){
|
|
550
|
+
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
|
|
551
|
+
return false;
|
|
552
|
+
}
|
|
553
|
+
else if(_this.jsonType){
|
|
554
|
+
for(var j=0; j<data.length; j++){
|
|
555
|
+
tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';
|
|
556
|
+
}
|
|
557
|
+
_this.wheelsData[sliderIndex] = {data: data};
|
|
558
|
+
}else {
|
|
559
|
+
for(var j=0; j<data.length; j++){
|
|
560
|
+
tempHTML += '<li>'+data[j]+'</li>';
|
|
561
|
+
}
|
|
562
|
+
_this.wheelsData[sliderIndex] = data;
|
|
563
|
+
}
|
|
564
|
+
_this.slider[sliderIndex].innerHTML = tempHTML;
|
|
565
|
+
},
|
|
566
|
+
|
|
567
|
+
fixRowStyle: function(){
|
|
568
|
+
var _this = this;
|
|
569
|
+
var width = (100/_this.wheel.length).toFixed(2);
|
|
570
|
+
for(var i=0; i<_this.wheel.length; i++){
|
|
571
|
+
_this.wheel[i].style.width = width+'%';
|
|
572
|
+
}
|
|
573
|
+
},
|
|
574
|
+
|
|
575
|
+
getIndex: function(distance){
|
|
576
|
+
return Math.round((2*this.liHeight-distance)/this.liHeight);
|
|
577
|
+
},
|
|
578
|
+
|
|
579
|
+
getIndexArr: function(){
|
|
580
|
+
var _this = this;
|
|
581
|
+
var temp = [];
|
|
582
|
+
for(var i=0; i<_this.curDistance.length; i++){
|
|
583
|
+
temp.push(_this.getIndex(_this.curDistance[i]));
|
|
584
|
+
}
|
|
585
|
+
return temp;
|
|
586
|
+
},
|
|
587
|
+
|
|
588
|
+
getCurValue: function(){
|
|
589
|
+
var _this = this;
|
|
590
|
+
var temp = [];
|
|
591
|
+
var positionArr = _this.getIndexArr();
|
|
592
|
+
if(_this.cascade){
|
|
593
|
+
for(var i=0; i<_this.wheel.length; i++){
|
|
594
|
+
temp.push(_this.displayJson[i][positionArr[i]]);
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
else if(_this.jsonType){
|
|
598
|
+
for(var i=0; i<_this.curDistance.length; i++){
|
|
599
|
+
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
|
|
600
|
+
}
|
|
601
|
+
}else {
|
|
602
|
+
for(var i=0; i<_this.curDistance.length; i++){
|
|
603
|
+
temp.push(_this.getInnerHtml(i));
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
return temp;
|
|
607
|
+
},
|
|
608
|
+
|
|
609
|
+
getValue: function(){
|
|
610
|
+
return this.curValue;
|
|
611
|
+
},
|
|
612
|
+
|
|
613
|
+
calcDistance: function(index){
|
|
614
|
+
return 2*this.liHeight-index*this.liHeight;
|
|
615
|
+
},
|
|
616
|
+
|
|
617
|
+
setCurDistance: function(indexArr){
|
|
618
|
+
var _this = this;
|
|
619
|
+
var temp = [];
|
|
620
|
+
for(var i=0; i<_this.slider.length; i++){
|
|
621
|
+
temp.push(_this.calcDistance(indexArr[i]));
|
|
622
|
+
_this.movePosition(_this.slider[i],temp[i]);
|
|
623
|
+
}
|
|
624
|
+
_this.curDistance = temp;
|
|
625
|
+
},
|
|
626
|
+
|
|
627
|
+
fixPosition: function(distance){
|
|
628
|
+
return -(this.getIndex(distance)-2)*this.liHeight;
|
|
629
|
+
},
|
|
630
|
+
|
|
631
|
+
movePosition: function(theSlider, distance){
|
|
632
|
+
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
|
|
633
|
+
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
|
|
634
|
+
},
|
|
635
|
+
|
|
636
|
+
locatePosition: function(index, posIndex){
|
|
637
|
+
var _this = this;
|
|
638
|
+
this.curDistance[index] = this.calcDistance(posIndex);
|
|
639
|
+
this.movePosition(this.slider[index],this.curDistance[index]);
|
|
640
|
+
if(_this.cascade){
|
|
641
|
+
_this.checkRange(index, _this.getIndexArr());
|
|
642
|
+
}
|
|
643
|
+
},
|
|
644
|
+
|
|
645
|
+
updateCurDistance: function(theSlider, index){
|
|
646
|
+
if(theSlider.style.transform){
|
|
647
|
+
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
|
|
648
|
+
}else {
|
|
649
|
+
this.curDistance[index] = parseInt(theSlider.style.webkitTransform.split(',')[1]);
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
|
|
653
|
+
getDistance:function(theSlider){
|
|
654
|
+
if(theSlider.style.transform){
|
|
655
|
+
return parseInt(theSlider.style.transform.split(',')[1]);
|
|
656
|
+
}else {
|
|
657
|
+
return parseInt(theSlider.style.webkitTransform.split(',')[1]);
|
|
658
|
+
}
|
|
659
|
+
},
|
|
660
|
+
|
|
661
|
+
getInnerHtml: function(sliderIndex){
|
|
662
|
+
var _this = this;
|
|
663
|
+
var index = _this.getIndex(_this.curDistance[sliderIndex]);
|
|
664
|
+
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
|
|
665
|
+
},
|
|
666
|
+
|
|
667
|
+
touch: function(event, theSlider, index){
|
|
668
|
+
var _this = this;
|
|
669
|
+
event = event || window.event;
|
|
670
|
+
switch(event.type){
|
|
671
|
+
case "touchstart":
|
|
672
|
+
_this.startY = event.touches[0].clientY;
|
|
673
|
+
_this.startY = parseInt(_this.startY);
|
|
674
|
+
_this.oldMoveY = _this.startY;
|
|
675
|
+
break;
|
|
676
|
+
|
|
677
|
+
case "touchend":
|
|
678
|
+
|
|
679
|
+
_this.moveEndY = parseInt(event.changedTouches[0].clientY);
|
|
680
|
+
_this.offsetSum = _this.moveEndY - _this.startY;
|
|
681
|
+
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
|
682
|
+
|
|
683
|
+
if(_this.offsetSum == 0){
|
|
684
|
+
//offsetSum为0,相当于点击事件
|
|
685
|
+
// 0 1 [2] 3 4
|
|
686
|
+
var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY)/40);
|
|
687
|
+
if(clickOffetNum!=2){
|
|
688
|
+
var offset = clickOffetNum - 2;
|
|
689
|
+
var newDistance = _this.curDistance[index] + (offset*_this.liHeight);
|
|
690
|
+
if((newDistance <= 2*_this.liHeight) && (newDistance >= _this.oversizeBorder) ){
|
|
691
|
+
_this.curDistance[index] = newDistance;
|
|
692
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
693
|
+
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
}else {
|
|
697
|
+
//修正位置
|
|
698
|
+
_this.updateCurDistance(theSlider, index);
|
|
699
|
+
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
|
700
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
701
|
+
|
|
702
|
+
//反弹
|
|
703
|
+
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
|
704
|
+
_this.curDistance[index] = 2*_this.liHeight;
|
|
705
|
+
setTimeout(function(){
|
|
706
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
707
|
+
}, 100);
|
|
708
|
+
|
|
709
|
+
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
|
710
|
+
_this.curDistance[index] = _this.oversizeBorder;
|
|
711
|
+
setTimeout(function(){
|
|
712
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
713
|
+
}, 100);
|
|
714
|
+
}
|
|
715
|
+
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
if(_this.cascade){
|
|
719
|
+
_this.checkRange(index, _this.getIndexArr());
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
break;
|
|
723
|
+
|
|
724
|
+
case "touchmove":
|
|
725
|
+
event.preventDefault();
|
|
726
|
+
_this.moveY = event.touches[0].clientY;
|
|
727
|
+
_this.offset = _this.moveY - _this.oldMoveY;
|
|
728
|
+
|
|
729
|
+
_this.updateCurDistance(theSlider, index);
|
|
730
|
+
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
|
731
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
732
|
+
_this.oldMoveY = _this.moveY;
|
|
733
|
+
break;
|
|
734
|
+
}
|
|
735
|
+
},
|
|
736
|
+
|
|
737
|
+
dragClick: function(event, theSlider, index){
|
|
738
|
+
var _this = this;
|
|
739
|
+
event = event || window.event;
|
|
740
|
+
switch(event.type){
|
|
741
|
+
case "mousedown":
|
|
742
|
+
_this.startY = event.clientY;
|
|
743
|
+
_this.oldMoveY = _this.startY;
|
|
744
|
+
_this.clickStatus = true;
|
|
745
|
+
break;
|
|
746
|
+
|
|
747
|
+
case "mouseup":
|
|
748
|
+
|
|
749
|
+
_this.moveEndY = event.clientY;
|
|
750
|
+
_this.offsetSum = _this.moveEndY - _this.startY;
|
|
751
|
+
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
|
752
|
+
|
|
753
|
+
if(_this.offsetSum == 0){
|
|
754
|
+
var clickOffetNum = parseInt((document.documentElement.clientHeight - _this.moveEndY)/40);
|
|
755
|
+
if(clickOffetNum!=2){
|
|
756
|
+
var offset = clickOffetNum - 2;
|
|
757
|
+
var newDistance = _this.curDistance[index] + (offset*_this.liHeight);
|
|
758
|
+
if((newDistance <= 2*_this.liHeight) && (newDistance >= _this.oversizeBorder) ){
|
|
759
|
+
_this.curDistance[index] = newDistance;
|
|
760
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
761
|
+
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
}else {
|
|
765
|
+
//修正位置
|
|
766
|
+
_this.updateCurDistance(theSlider, index);
|
|
767
|
+
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
|
768
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
769
|
+
|
|
770
|
+
//反弹
|
|
771
|
+
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
|
772
|
+
_this.curDistance[index] = 2*_this.liHeight;
|
|
773
|
+
setTimeout(function(){
|
|
774
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
775
|
+
}, 100);
|
|
776
|
+
|
|
777
|
+
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
|
778
|
+
_this.curDistance[index] = _this.oversizeBorder;
|
|
779
|
+
setTimeout(function(){
|
|
780
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
781
|
+
}, 100);
|
|
782
|
+
}
|
|
783
|
+
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
|
784
|
+
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
_this.clickStatus = false;
|
|
788
|
+
if(_this.cascade){
|
|
789
|
+
_this.checkRange(index, _this.getIndexArr());
|
|
790
|
+
}
|
|
791
|
+
break;
|
|
792
|
+
|
|
793
|
+
case "mousemove":
|
|
794
|
+
event.preventDefault();
|
|
795
|
+
if(_this.clickStatus){
|
|
796
|
+
_this.moveY = event.clientY;
|
|
797
|
+
_this.offset = _this.moveY - _this.oldMoveY;
|
|
798
|
+
_this.updateCurDistance(theSlider, index);
|
|
799
|
+
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
|
800
|
+
_this.movePosition(theSlider, _this.curDistance[index]);
|
|
801
|
+
_this.oldMoveY = _this.moveY;
|
|
802
|
+
}
|
|
803
|
+
break;
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
};
|
|
808
|
+
|
|
809
|
+
{
|
|
810
|
+
module.exports = MobileSelect;
|
|
811
|
+
}
|
|
812
|
+
})();
|
|
813
|
+
});
|
|
814
|
+
|
|
815
|
+
const ptcMobileSelectCss = ".mobileSelect{position:relative;z-index:0;opacity:0;visibility:hidden;-webkit-transition:opacity 0.4s, z-index 0.4s;transition:opacity 0.4s, z-index 0.4s}.mobileSelect *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mobileSelect .grayLayer{position:fixed;top:0;left:0;bottom:0;right:0;background:#eee;background:rgba(0, 0, 0, 0.7);z-index:888;display:block}.mobileSelect .content{width:100%;display:block;position:fixed;z-index:889;color:black;-webkit-transition:all 0.4s;transition:all 0.4s;bottom:-350px;left:0;background:white}.mobileSelect .content .fixWidth{width:90%;margin:0 auto;position:relative}.mobileSelect .content .fixWidth:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .btnBar{border-bottom:1px solid #DCDCDC;font-size:15px;height:45px;position:relative;text-align:center;line-height:45px}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure{height:45px;width:55px;cursor:pointer;position:absolute;top:0}.mobileSelect .content .btnBar .cancel{left:0;color:#666}.mobileSelect .content .btnBar .ensure{right:0;color:#1e83d3}.mobileSelect .content .btnBar .title{font-size:15px;padding:0 15%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel:after{content:\".\";display:block;height:0;clear:both;visibility:hidden}.mobileSelect .content .panel .wheels{width:100%;height:200px;overflow:hidden}.mobileSelect .content .panel .wheel{position:relative;z-index:0;float:left;width:50%;height:200px;overflow:hidden;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.mobileSelect .content .panel .wheel .selectContainer{display:block;text-align:center;-webkit-transition:-webkit-transform 0.18s ease-out;transition:-webkit-transform 0.18s ease-out;transition:transform 0.18s ease-out;transition:transform 0.18s ease-out, -webkit-transform 0.18s ease-out}.mobileSelect .content .panel .wheel .selectContainer li{font-size:15px;display:block;height:40px;line-height:40px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobileSelect .content .panel .selectLine{height:40px;width:100%;position:absolute;top:80px;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #DCDCDC;border-bottom:1px solid #DCDCDC}.mobileSelect .content .panel .shadowMask{position:absolute;top:0;width:100%;height:200px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));background:-webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);background:linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);opacity:0.9;pointer-events:none}.mobileSelect-show{opacity:1;z-index:10000;visibility:visible}.mobileSelect-show .content{bottom:0}.mobile-select-wrapper{display:block}.mobile-select-wrapper div{display:inline;margin-right:10px;width:100%;font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-15);line-height:var(--ptc-line-height-18);color:var(--color-white);height:var(--ptc-line-height-18)}.mobileSelect .content{top:auto}.mobileSelect .content .btnBar{border-color:var(--color-gray-10)}.mobileSelect .content .btnBar .cancel,.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .title{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-19)}.mobileSelect .content .btnBar .ensure,.mobileSelect .content .btnBar .cancel{transform:translateY(12.5px)}.mobileSelect .content .panel .wheel .selectContainer li{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-19);height:45px}ptc-responsive-wrapper.xsmall .mobile-select-wrapper,ptc-responsive-wrapper.small .mobile-select-wrapper{display:block}ptc-responsive-wrapper.medium .mobile-select-wrapper,ptc-responsive-wrapper.large .mobile-select-wrapper,ptc-responsive-wrapper.xlarge .mobile-select-wrapper,ptc-responsive-wrapper.xxlarge .mobile-select-wrapper,ptc-responsive-wrapper.large2k .mobile-select-wrapper,ptc-responsive-wrapper.large4k .mobile-select-wrapper{display:none}";
|
|
816
|
+
|
|
817
|
+
let PtcMobileSelect = class {
|
|
818
|
+
constructor(hostRef) {
|
|
819
|
+
index.registerInstance(this, hostRef);
|
|
820
|
+
/**
|
|
821
|
+
* Confirm Text
|
|
822
|
+
*/
|
|
823
|
+
this.ensureBtnText = 'Confirm';
|
|
824
|
+
/**
|
|
825
|
+
* Cancel Text
|
|
826
|
+
*/
|
|
827
|
+
this.cancelBtnText = 'Cancel';
|
|
828
|
+
/**
|
|
829
|
+
* Mobile select list title (Optional)
|
|
830
|
+
*/
|
|
831
|
+
this.listTitle = undefined;
|
|
832
|
+
}
|
|
833
|
+
render() {
|
|
834
|
+
return (index.h("ptc-responsive-wrapper", null, index.h("div", { class: "mobile-select-wrapper" }, index.h("div", { id: this.triggerName }, this.linkText), index.h("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
|
|
835
|
+
}
|
|
836
|
+
componentDidRender() {
|
|
837
|
+
new mobileSelect({
|
|
838
|
+
trigger: `#${this.triggerName}`,
|
|
839
|
+
title: `${this.listTitle ? this.listTitle : ''}`,
|
|
840
|
+
wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ["test1", 'test2'] }],
|
|
841
|
+
position: [0],
|
|
842
|
+
ensureBtnText: this.ensureBtnText,
|
|
843
|
+
cancelBtnText: this.cancelBtnText,
|
|
844
|
+
ensureBtnColor: 'var(--color-gray-12)',
|
|
845
|
+
cancelBtnColor: 'var(--color-gray-12)',
|
|
846
|
+
titleColor: 'var(--color-gray-12)',
|
|
847
|
+
});
|
|
848
|
+
}
|
|
849
|
+
};
|
|
850
|
+
PtcMobileSelect.style = ptcMobileSelectCss;
|
|
851
|
+
|
|
852
|
+
const ptcResponsiveWrapperCss = ":host{display:block}";
|
|
853
|
+
|
|
854
|
+
let PtcResponsiveWrapper = class {
|
|
855
|
+
constructor(hostRef) {
|
|
856
|
+
index.registerInstance(this, hostRef);
|
|
857
|
+
}
|
|
858
|
+
componentDidLoad() {
|
|
859
|
+
this.ro = new ResizeObserver(entries => {
|
|
860
|
+
for (const entry of entries) {
|
|
861
|
+
this.applySizeClasses(entry.contentRect.width);
|
|
862
|
+
}
|
|
863
|
+
});
|
|
864
|
+
this.ro.observe(this.element);
|
|
865
|
+
}
|
|
866
|
+
disconnectedCallback() {
|
|
867
|
+
this.ro.disconnect();
|
|
868
|
+
}
|
|
869
|
+
applySizeClasses(size) {
|
|
870
|
+
let xsmall = false;
|
|
871
|
+
let small = false;
|
|
872
|
+
let medium = false;
|
|
873
|
+
let large = false;
|
|
874
|
+
let xlarge = false;
|
|
875
|
+
let xxlarge = false;
|
|
876
|
+
let large2k = false;
|
|
877
|
+
let large4k = false;
|
|
878
|
+
if (size >= 2600)
|
|
879
|
+
large4k = true;
|
|
880
|
+
else if (size >= 1980)
|
|
881
|
+
large2k = true;
|
|
882
|
+
else if (size >= 1600)
|
|
883
|
+
xxlarge = true;
|
|
884
|
+
else if (size >= 1440)
|
|
885
|
+
xlarge = true;
|
|
886
|
+
else if (size >= 1200)
|
|
887
|
+
large = true;
|
|
888
|
+
else if (size >= 992)
|
|
889
|
+
medium = true;
|
|
890
|
+
else if (size >= 768)
|
|
891
|
+
small = true;
|
|
892
|
+
else
|
|
893
|
+
xsmall = true;
|
|
894
|
+
this.element.classList.toggle("xsmall", xsmall);
|
|
895
|
+
this.element.classList.toggle("small", small);
|
|
896
|
+
this.element.classList.toggle("medium", medium);
|
|
897
|
+
this.element.classList.toggle("large", large);
|
|
898
|
+
this.element.classList.toggle("xlarge", xlarge);
|
|
899
|
+
this.element.classList.toggle("xxlarge", xxlarge);
|
|
900
|
+
this.element.classList.toggle("large2k", large2k);
|
|
901
|
+
this.element.classList.toggle("large4k", large4k);
|
|
902
|
+
}
|
|
903
|
+
render() {
|
|
904
|
+
return (index.h("div", null, index.h("slot", null)));
|
|
905
|
+
}
|
|
906
|
+
get element() { return index.getElement(this); }
|
|
907
|
+
};
|
|
908
|
+
PtcResponsiveWrapper.style = ptcResponsiveWrapperCss;
|
|
909
|
+
|
|
910
|
+
const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 42 41.485">
|
|
911
|
+
<g id="Group_1042" data-name="Group 1042" transform="rotate(180 108.25 87.993)">
|
|
912
|
+
<path id="Line_446" d="M0 0v39.486" class="cls-1" data-name="Line 446"></path>
|
|
913
|
+
<path id="Line_447" d="M0 0h40" class="cls-1" data-name="Line 447"></path>
|
|
914
|
+
<path id="Line_448" d="M0 33.592V0" class="cls-1" data-name="Line 448"></path>
|
|
915
|
+
<path id="Line_449" d="M23.994 0H0" class="cls-1" data-name="Line 449"></path>
|
|
916
|
+
<path id="Line_450" d="M0 0l17.596 17.596" class="cls-2" data-name="Line 450" transform="translate(187.229 147.226)"></path>
|
|
917
|
+
<path id="Line_451" d="M0 7.198L7.199 0" class="cls-2" data-name="Line 451" transform="translate(197.55 147.312)"></path>
|
|
918
|
+
<path id="Path_114" d="M0 7.2L7.2 0" class="cls-2" data-name="Path 114" transform="translate(187.313 157.549)"></path>
|
|
919
|
+
</g>
|
|
920
|
+
</svg>`;
|
|
921
|
+
|
|
922
|
+
const arrowSvgLeft = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
923
|
+
<g filter="url(#filter0_d_494_37)">
|
|
924
|
+
<circle cx="24" cy="22" r="20" fill="white"/>
|
|
925
|
+
<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
|
|
926
|
+
</g>
|
|
927
|
+
<defs>
|
|
928
|
+
<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
929
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
930
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
931
|
+
<feOffset dy="2"/>
|
|
932
|
+
<feGaussianBlur stdDeviation="2"/>
|
|
933
|
+
<feComposite in2="hardAlpha" operator="out"/>
|
|
934
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
935
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
|
|
936
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
|
|
937
|
+
</filter>
|
|
938
|
+
</defs>
|
|
939
|
+
</svg>
|
|
940
|
+
`;
|
|
941
|
+
|
|
942
|
+
const arrowSvgRight = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
943
|
+
<g filter="url(#filter0_d_494_34)">
|
|
944
|
+
<circle cx="24" cy="22" r="20" fill="white"/>
|
|
945
|
+
<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
|
|
946
|
+
</g>
|
|
947
|
+
<defs>
|
|
948
|
+
<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
949
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
950
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
951
|
+
<feOffset dy="2"/>
|
|
952
|
+
<feGaussianBlur stdDeviation="2"/>
|
|
953
|
+
<feComposite in2="hardAlpha" operator="out"/>
|
|
954
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
955
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
|
|
956
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
|
|
957
|
+
</filter>
|
|
958
|
+
</defs>
|
|
959
|
+
</svg>
|
|
960
|
+
`;
|
|
961
|
+
|
|
962
|
+
const ptcSvgBtnCss = ":host{cursor:pointer}:host(.block){display:block}:host(.inline){display:inline}:host(.inline-block){display:inline-block}:host(.flex){display:flex}:host(:focus-visible){outline:none}:focus-visible{outline:none}.svg-close svg .cls-1,.svg-close svg .cls-2{fill:none;stroke-width:2px}.svg-close svg .cls-1{stroke:#40434A;stroke-linecap:square}.svg-close svg .cls-2{stroke:#40434A}.svg-close svg path{-webkit-transition:all 0.25s ease-in-out;-o-transition:all ease-in-out 0.25s;transition:all 0.25s ease-in-out}.svg-close svg .cls-1:first-child{-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close svg .cls-1:nth-child(2){-webkit-transform:translate(175.5px, 174.985px);-ms-transform:translate(175.5px, 174.985px);transform:translate(175.5px, 174.985px)}.svg-close svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 141.393px);-ms-transform:translate(215.5px, 141.393px);transform:translate(215.5px, 141.393px)}.svg-close svg .cls-1:nth-child(4){-webkit-transform:translate(175.5px, 135.5px);-ms-transform:translate(175.5px, 135.5px);transform:translate(175.5px, 135.5px)}.svg-close:hover svg .cls-1:first-child{-webkit-transform:translate(175.5px, 162px);-ms-transform:translate(175.5px, 162px);transform:translate(175.5px, 162px)}.svg-close:hover svg .cls-1:nth-child(2){-webkit-transform:translate(149px, 174.985px);-ms-transform:translate(149px, 174.985px);transform:translate(149px, 174.985px)}.svg-close:hover svg .cls-1:nth-child(3){-webkit-transform:translate(215.5px, 174px);-ms-transform:translate(215.5px, 174px);transform:translate(215.5px, 174px)}.svg-close:hover svg .cls-1:nth-child(4){-webkit-transform:translate(152.5px, 135.5px);-ms-transform:translate(152.5px, 135.5px);transform:translate(152.5px, 135.5px)}.svg-close.svg-close-white .cls-1{stroke:#fff}.slider-left,.slider-right{transition:all var(--ptc-transition-medium) var(--ptc-standard-ease)}.slider-left svg .arrow,.slider-right svg .arrow{fill:var(--color-primary-grey)}.slider-left:hover svg .arrow,.slider-right:hover svg .arrow{fill:var(--color-green-06)}";
|
|
963
|
+
|
|
964
|
+
let PtcSvgBtn = class {
|
|
965
|
+
constructor(hostRef) {
|
|
966
|
+
index.registerInstance(this, hostRef);
|
|
967
|
+
/**
|
|
968
|
+
* Display
|
|
969
|
+
*/
|
|
970
|
+
this.display = 'block';
|
|
971
|
+
}
|
|
972
|
+
render() {
|
|
973
|
+
const classMap = this.getCssClassMap();
|
|
974
|
+
return (index.h(index.Host, { class: classMap }, !!this.svgName && this.svgName === 'close' ? index.h("div", { class: 'svg-close', innerHTML: closeSvg }) : null, !!this.svgName && this.svgName === 'slider-left' ? index.h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null, !!this.svgName && this.svgName === 'slider-right' ? index.h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null));
|
|
975
|
+
}
|
|
976
|
+
getCssClassMap() {
|
|
977
|
+
return {
|
|
978
|
+
[this.display]: true
|
|
979
|
+
};
|
|
980
|
+
}
|
|
981
|
+
};
|
|
982
|
+
PtcSvgBtn.style = ptcSvgBtnCss;
|
|
983
|
+
|
|
984
|
+
exports.icon_asset = IconAsset;
|
|
985
|
+
exports.ptc_announcement = PtcAnnouncement;
|
|
986
|
+
exports.ptc_mobile_select = PtcMobileSelect;
|
|
987
|
+
exports.ptc_responsive_wrapper = PtcResponsiveWrapper;
|
|
988
|
+
exports.ptc_svg_btn = PtcSvgBtn;
|