@ptcwebops/ptcw-design 5.6.0 → 5.6.2

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

@@ -0,0 +1,7 @@
+/*
+* mobile-select v1.4.0
+* Homepage: https://github.com/onlyhom/mobile-select
+* Released under the MIT License.
+* (c) 2017-present
+*/
+"use strict";function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Map"===(n="Object"===n&&o.constructor?o.constructor.name:n)||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}var MobileSelect=function(){function h(g,c,l){D(g,"symbol"!=_typeof(c)?c+"":c,l)}var S=Object.defineProperty,D=function(g,c,l){return c in g?S(g,c,{enumerable:!0,configurable:!0,writable:!0,value:l}):g[c]=l};var c=function(){function l(t){_classCallCheck(this,l),h(this,"mobileSelect"),h(this,"trigger"),h(this,"wheelList"),h(this,"sliderList"),h(this,"wheelsContain"),h(this,"panel"),h(this,"ensureBtn"),h(this,"cancelBtn"),h(this,"grayLayer"),h(this,"popUp"),h(this,"initPosition"),h(this,"initColWidth"),h(this,"wheelsData"),h(this,"displayJson"),h(this,"curValue"),h(this,"curIndexArr"),h(this,"isCascade"),h(this,"isJsonType"),h(this,"startY"),h(this,"moveEndY"),h(this,"moveY"),h(this,"preMoveY"),h(this,"offsetY"),h(this,"offsetSum"),h(this,"oversizeBorder"),h(this,"enableClickStatus"),h(this,"optionHeight"),h(this,"curDistance"),h(this,"cascadeJsonData"),h(this,"eventHandleMap"),h(this,"initDeepCount"),h(this,"config"),l.checkRequiredConfig(t)&&(this.config=Object.assign({},l.defaultConfig,t),this.wheelsData=t.wheels,this.isJsonType=!1,this.cascadeJsonData=[],this.displayJson=[],this.curValue=[],this.curIndexArr=[],this.isCascade=!1,this.startY,this.moveEndY,this.moveY,this.preMoveY,this.offsetY=0,this.offsetSum=0,this.oversizeBorder,this.curDistance=[],this.enableClickStatus=!1,this.optionHeight=0,this.initPosition=t.position||[],this.initColWidth=t.colWidth||[],this.init())}return _createClass(l,[{key:"init",value:function(){var _this=this;if(this.checkTriggerAvailable()){var t=this.config;if(this.isJsonType=l.checkDataType(this.wheelsData),this.renderComponent(this.wheelsData),this.wheelList=this.mobileSelect.getElementsByClassName("ms-wheel"),this.sliderList=this.mobileSelect.getElementsByClassName("ms-select-container"),this.panel=this.mobileSelect.querySelector(".ms-panel"),this.wheelsContain=this.mobileSelect.querySelector(".ms-wheels"),this.ensureBtn=this.mobileSelect.querySelector(".ms-ensure"),this.cancelBtn=this.mobileSelect.querySelector(".ms-cancel"),this.grayLayer=this.mobileSelect.querySelector(".ms-gray-layer"),this.popUp=this.mobileSelect.querySelector(".ms-content"),this.optionHeight=this.mobileSelect.querySelector("li").offsetHeight,t.initValue&&this.setTriggerInnerText(t.initValue),this.setStyle(t),this.isCascade=this.checkCascade(),this.isCascade&&this.initCascade(),t.initValue&&(this.initPosition=this.getPositionByInitValue()),this.initPosition.length<this.sliderList.length)for(var e=this.sliderList.length-this.initPosition.length,i=0;i<e;i++)this.initPosition.push(0);this.isCascade?this.initPosition.forEach(function(e,i){_this.checkRange(i,_this.initPosition)}):this.setCurDistance(this.initPosition),this.eventHandleMap={cancelBtn:{event:"click",fn:function(){var i,e;_this.hide(),null!=(i=(e=_this.config).cancel)&&i.call(e,_this.curIndexArr,_this.curValue,_this),null!=(e=(i=_this.config).onCancel)&&e.call(i,_this.curValue,_this.curIndexArr,_this)}},ensureBtn:{event:"click",fn:function(){var i,e;_this.hide(),_this.optionHeight||(_this.optionHeight=_this.mobileSelect.querySelector("li").offsetHeight),_this.setTriggerInnerText(_this.getConnectedString()),_this.curIndexArr=_this.getIndexArr(),_this.curValue=_this.getCurValue(),null!=(i=(e=_this.config).callback)&&i.call(e,_this.curIndexArr,_this.curValue,_this),null!=(e=(i=_this.config).onChange)&&e.call(i,_this.curValue,_this.curIndexArr,_this)}},trigger:{event:"click",fn:function(){_this.show()}},grayLayer:{event:"click",fn:function(){return _this.hide()}},popUp:{event:"click",fn:function(e){return e.stopPropagation()}},panel:{event:["touchstart","touchend","touchmove"],fn:function(e){return _this.touch(e)}}},navigator.userAgent.toLowerCase().match(/ipad|iphone os|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/)||(this.eventHandleMap.panel.event=["mousedown","mousemove","mouseup"]),this.registerEvents("add"),this.fixRowStyle(),t.autoFocus&&this.show()}}},{key:"checkTriggerAvailable",value:function(){var t=this.config;return this.trigger=t.trigger instanceof HTMLElement?t.trigger:document.querySelector(t.trigger),!!this.trigger||(l.log("error","trigger HTMLElement does not found on your document."),!1)}},{key:"getPositionByInitValue",value:function(){var o,_this2=this,_this$config=this.config,t=_this$config.keyMap,e=_this$config.connector,_this$config=_this$config.initValue,_this$config=(null==_this$config?void 0:_this$config.split(e))||[];return this.isJsonType?(o=null==(e=this.wheelsData[0])?void 0:e.data,_this$config.reduce(function(r,a){var u=null==o?void 0:o.findIndex(function(f){return f[t.value]==a});return r.push(u<0?0:u),o=null==(u=o[u])?void 0:u[t.childs],r},[])):_this$config.reduce(function(o,r,a){a=null==(a=null==(a=_this2.wheelsData[a])?void 0:a.data)?void 0:a.findIndex(function(m){return m==r});return o.push(a<0?0:a),o},[])}},{key:"getConnectedString",value:function(){for(var t="",e=0;e<this.wheelList.length;e++)e==this.wheelList.length-1?t+=this.getInnerText(e):t+=this.getInnerText(e)+this.config.connector;return t}},{key:"setTriggerInnerText",value:function(t){this.config.triggerDisplayValue&&(this.trigger.textContent=t)}},{key:"setValue",value:function(t){var e,_this3=this;t&&t.length&&(this.isJsonType&&"object"!=_typeof(t[0])||!this.isJsonType&&"object"==_typeof(t[0])?l.log("error","The setValue() input format should be same with getValue(), like: ".concat(JSON.stringify(this.getValue()))):(e=this.config.keyMap,t.forEach(function(i,s){var r=_this3.isCascade?_this3.displayJson[s]:null==(r=_this3.wheelsData[s])?void 0:r.data,r=null==r?void 0:r.findIndex(function(a){return _this3.isJsonType?i[e.id]==a[e.id]||i[e.value]==a[e.value]:i==a});_this3.locatePosition(s,r)}),this.setTriggerInnerText(this.getConnectedString())))}},{key:"setTitle",value:function(t){this.mobileSelect.querySelector(".ms-title").innerHTML=t}},{key:"setStyle",value:function(t){var _e2;t.ensureBtnColor&&(this.ensureBtn.style.color=t.ensureBtnColor),t.cancelBtnColor&&(this.cancelBtn.style.color=t.cancelBtnColor),t.titleColor&&(this.mobileSelect.querySelector(".ms-title").style.color=t.titleColor),t.textColor&&(this.panel=this.mobileSelect.querySelector(".ms-panel"),this.panel.style.color=t.textColor),t.titleBgColor&&(this.mobileSelect.querySelector(".ms-btn-bar").style.backgroundColor=t.titleBgColor),t.bgColor&&(this.panel=this.mobileSelect.querySelector(".ms-panel"),_e2=this.mobileSelect.querySelector(".ms-shadow-mask"),this.panel.style.backgroundColor=t.bgColor,_e2.style.background="linear-gradient(to bottom, "+t.bgColor+", rgba(255, 255, 255, 0), "+t.bgColor+")"),"number"==typeof t.maskOpacity&&(this.mobileSelect.querySelector(".ms-gray-layer").style.background="rgba(0, 0, 0, "+t.maskOpacity+")")}},{key:"show",value:function(){var t,i;this.mobileSelect.classList.add("ms-show"),null!=(t=document.querySelector("body"))&&t.classList.add("ms-show"),"function"==typeof this.config.onShow&&null!=(i=(t=this.config).onShow)&&i.call(t,this.curValue,this.curIndexArr,this)}},{key:"hide",value:function(){var t,i;this.mobileSelect.classList.remove("ms-show"),null!=(t=document.querySelector("body"))&&t.classList.remove("ms-show"),"function"==typeof this.config.onHide&&null!=(i=(t=this.config).onHide)&&i.call(t,this.curValue,this.curIndexArr,this)}},{key:"registerEvents",value:function(t){for(var _this4=this,_i=0,_Object$entries=Object.entries(this.eventHandleMap);_i<_Object$entries.length;_i++)!function(){var _Object$entries$_i=_slicedToArray(_Object$entries[_i],2),e=_Object$entries$_i[0],i=_Object$entries$_i[1];"string"==typeof i.event?_this4[e]["".concat(t,"EventListener")](i.event,i.fn,{passive:!1}):i.event.forEach(function(s){_this4[e]["".concat(t,"EventListener")](s,i.fn,{passive:!1})})}()}},{key:"destroy",value:function(){var t;this.registerEvents("remove"),null!=(t=null==(t=this.mobileSelect)?void 0:t.parentNode)&&t.removeChild(this.mobileSelect)}},{key:"getOptionsHtmlStr",value:function(t){var e=this.config.keyMap,i="";if(this.isJsonType)for(var s=0;s<t.length;s++){var n=t[s][e.id],o=t[s][e.value];i+='<li data-id="'.concat(n,'">').concat(o,"</li>")}else for(var _s2=0;_s2<t.length;_s2++)i+="<li>"+t[_s2]+"</li>";return i}},{key:"renderComponent",value:function(t){this.mobileSelect=document.createElement("div"),this.mobileSelect.className="ms-mobile-select",this.mobileSelect.innerHTML='<div class="ms-gray-layer"></div>\n        <div class="ms-content">\n          <div class="ms-btn-bar">\n            <div class="ms-fix-width">\n              <div class="ms-cancel">'.concat(this.config.cancelBtnText,'</div>  \n              <div class="ms-title">').concat(this.config.title||"",'</div>\n              <div class="ms-ensure">').concat(this.config.ensureBtnText,'</div>\n            </div>\n          </div>\n          <div class="ms-panel">\n            <div class="ms-fix-width">\n            <div class="ms-wheels"></div>\n            <div class="ms-select-line"></div>\n            <div class="ms-shadow-mask"></div>\n          </div>\n        </div>'),document.body.appendChild(this.mobileSelect);for(var e="",i=0;i<t.length;i++)e=(e+='<div class="ms-wheel" data-index="'.concat(i,'"><ul class="ms-select-container">'))+this.getOptionsHtmlStr(t[i].data)+"</ul></div>";this.mobileSelect.querySelector(".ms-wheels").innerHTML=e}},{key:"reRenderWheels",value:function(){var t=this.wheelList.length-this.displayJson.length;if(0<t)for(var e=0;e<t;e++)this.wheelsContain.removeChild(this.wheelList[this.wheelList.length-1]);for(var i,_e4=0;_e4<this.displayJson.length;_e4++)this.wheelList[_e4]?this.sliderList[_e4].innerHTML=this.getOptionsHtmlStr(this.displayJson[_e4]):((i=document.createElement("div")).className="ms-wheel",i.innerHTML='<ul class="ms-select-container">'.concat(this.getOptionsHtmlStr(this.displayJson[_e4]),"</ul>"),i.setAttribute("data-index",_e4.toString()),this.wheelsContain.appendChild(i))}},{key:"checkCascade",value:function(){var e,t=this.config.keyMap;if(this.isJsonType)for(var i=this.wheelsData[0].data,s=0;s<i.length;s++)if(t.childs in i[s]&&0<(null==(e=i[s][t.childs])?void 0:e.length))return this.cascadeJsonData=this.wheelsData[0].data,!0;return!1}},{key:"initCascade",value:function(){this.displayJson.push(this.cascadeJsonData),0<this.initPosition.length?(this.initDeepCount=0,this.initCheckArrDeep(this.cascadeJsonData[this.initPosition[0]])):this.checkArrDeep(this.cascadeJsonData[0]),this.reRenderWheels()}},{key:"initCheckArrDeep",value:function(t){var e,i;t&&(e=this.config.keyMap).childs in t&&0<t[e.childs].length&&(this.displayJson.push(t[e.childs]),this.initDeepCount++,(i=t[e.childs][this.initPosition[this.initDeepCount]])?this.initCheckArrDeep(i):this.checkArrDeep(t[e.childs][0]))}},{key:"checkArrDeep",value:function(t){var e;!t||(e=this.config.keyMap).childs in t&&0<t[e.childs].length&&(this.displayJson.push(t[e.childs]),this.checkArrDeep(t[e.childs][0]))}},{key:"checkRange",value:function(t,e){for(var o,n,i=this.displayJson.length-1-t,s=this.config.keyMap,r=0;r<i;r++)this.displayJson.pop();for(var _r=0;_r<=t;_r++)n=0==_r?this.cascadeJsonData[e[0]]:null==(o=null==n?void 0:n[s.childs])?void 0:o[e[_r]];this.checkArrDeep(n),this.reRenderWheels(),this.fixRowStyle(),this.setCurDistance(this.resetPosition(t,e))}},{key:"resetPosition",value:function(t,e){var i=_toConsumableArray(e);if(this.sliderList.length>e.length)for(var s=this.sliderList.length-e.length,n=0;n<s;n++)i.push(0);else if(this.sliderList.length<e.length){s=e.length-this.sliderList.length;for(var _n2=0;_n2<s;_n2++)i.pop()}for(var _n3=t+1;_n3<i.length;_n3++)i[_n3]=0;return i}},{key:"updateWheels",value:function(t){if(this.isCascade){if(this.cascadeJsonData=t,this.displayJson=[],this.initCascade(),this.initPosition.length<this.sliderList.length)for(var e=this.sliderList.length-this.initPosition.length,i=0;i<e;i++)this.initPosition.push(0);this.setCurDistance(this.initPosition),this.fixRowStyle()}}},{key:"updateWheel",value:function(t,e){var i;this.isCascade?l.log("error","'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source"):(i="",i+=this.getOptionsHtmlStr(e),this.wheelsData[t]=this.isJsonType?{data:e}:e,this.sliderList[t].innerHTML=i)}},{key:"fixRowStyle",value:function(){var e,_this5=this;if(this.initColWidth.length&&this.initColWidth.length===this.wheelList.length)e=this.initColWidth.reduce(function(i,s){return i+s},0),this.initColWidth.forEach(function(i,s){_this5.wheelList[s].style.width=(i/e*100).toFixed(2)+"%"});else for(var t=(100/this.wheelList.length).toFixed(2),_e5=0;_e5<this.wheelList.length;_e5++)this.wheelList[_e5].style.width=t+"%"}},{key:"getIndex",value:function(t){return Math.round((2*this.optionHeight-t)/this.optionHeight)}},{key:"getIndexArr",value:function(){for(var t=[],e=0;e<this.curDistance.length;e++)t.push(this.getIndex(this.curDistance[e]));return t}},{key:"getCurValue",value:function(){var t=[],e=this.getIndexArr(),i=this.config.keyMap;if(this.isCascade)for(var s=0;s<this.wheelList.length;s++){var _t$push,n=this.displayJson[s][e[s]];n&&t.push((_defineProperty(_t$push={},i.id,n[i.id]),_defineProperty(_t$push,i.value,n[i.value]),_t$push))}else if(this.isJsonType)for(var _s3=0;_s3<this.curDistance.length;_s3++)t.push(this.wheelsData[_s3].data[this.getIndex(this.curDistance[_s3])]);else for(var _s4=0;_s4<this.curDistance.length;_s4++)t.push(this.getInnerText(_s4));return t}},{key:"getValue",value:function(){return this.getCurValue()}},{key:"calcDistance",value:function(t){return 2*this.optionHeight-t*this.optionHeight}},{key:"setCurDistance",value:function(t){for(var e=[],i=0;i<this.sliderList.length;i++)e.push(this.calcDistance(t[i])),this.movePosition(this.sliderList[i],e[i]);this.curDistance=e}},{key:"fixPosition",value:function(t){return-(this.getIndex(t)-2)*this.optionHeight}},{key:"movePosition",value:function(t,e){t.style.transform="translate3d(0,"+e+"px, 0)"}},{key:"locatePosition",value:function(t,e){void 0===t||void 0===e||e<0||(this.curDistance[t]=this.calcDistance(e),this.movePosition(this.sliderList[t],this.curDistance[t]),this.isCascade&&this.checkRange(t,this.getIndexArr()))}},{key:"updateCurDistance",value:function(t,e){this.curDistance[e]=parseInt(t.style.transform.split(",")[1])}},{key:"getInnerText",value:function(t){var e=this.sliderList[t].getElementsByTagName("li").length,i=this.getIndex(this.curDistance[t]);return e<=i?i=e-1:i<0&&(i=0),(null==(e=this.sliderList[t].getElementsByTagName("li")[i])?void 0:e.textContent)||""}},{key:"touch",value:function(t){var r,i=(t.composedPath&&t.composedPath()).find(function(p){return null==(p=p.classList)?void 0:p.contains("ms-wheel")});if(i){var p,s=i.firstChild,n=parseInt(i.getAttribute("data-index")||"0");switch(t.type){case"touchstart":case"mousedown":s.style.transition="none 0s ease-out",this.startY=Math.floor((t instanceof TouchEvent?t.touches[0]:t).clientY),this.preMoveY=this.startY,"mousedown"===t.type&&(this.enableClickStatus=!0);break;case"touchmove":case"mousemove":if(t.preventDefault(),"mousemove"===t.type&&!this.enableClickStatus)break;this.moveY=Math.floor((t instanceof TouchEvent?t.touches[0]:t).clientY),this.offsetY=(this.moveY-this.preMoveY)*this.config.scrollSpeed,this.updateCurDistance(s,n),this.curDistance[n]=this.curDistance[n]+this.offsetY,this.movePosition(s,this.curDistance[n]),this.preMoveY=this.moveY;break;case"touchend":case"mouseup":s.style.transition="transform 0.18s ease-out",this.moveEndY=Math.floor((t instanceof TouchEvent?t.changedTouches[0]:t).clientY),this.offsetSum=this.moveEndY-this.startY,this.oversizeBorder=-(s.getElementsByTagName("li").length-3)*this.optionHeight,0==this.offsetSum?2!=(p=Math.floor((window.innerHeight-this.moveEndY)/40))&&(p=this.curDistance[n]+(p-2)*this.optionHeight)<=2*this.optionHeight&&p>=this.oversizeBorder&&(this.curDistance[n]=p,this.movePosition(s,this.curDistance[n]),null!=(r=(p=this.config).transitionEnd)&&r.call(p,this.getIndexArr(),this.getCurValue(),this),null!=(p=(r=this.config).onTransitionEnd)&&p.call(r,this.getCurValue(),this.getIndexArr(),this)):(this.updateCurDistance(s,n),this.curDistance[n]=this.fixPosition(this.curDistance[n]),this.curDistance[n]>2*this.optionHeight?this.curDistance[n]=2*this.optionHeight:this.curDistance[n]<this.oversizeBorder&&(this.curDistance[n]=this.oversizeBorder),this.movePosition(s,this.curDistance[n]),null!=(r=(p=this.config).transitionEnd)&&r.call(p,this.getIndexArr(),this.getCurValue(),this),null!=(p=(r=this.config).onTransitionEnd)&&p.call(r,this.getCurValue(),this.getIndexArr(),this)),"mouseup"===t.type&&(this.enableClickStatus=!1),this.isCascade&&this.checkRange(n,this.getIndexArr())}}}}],[{key:"checkDataType",value:function(t){return"object"==_typeof(null==(t=null==(t=t[0])?void 0:t.data)?void 0:t[0])}},{key:"checkRequiredConfig",value:function(t){var i,e=l.REQUIRED_PARAMS;if(!t)return i=e.map(function(s){return"'".concat(s,"'")}),l.log("error","missing required param ".concat(i.join(" and "),".")),!1;for(var _i2=0;_i2<e.length;_i2++){var s=e[_i2];if(!t[s])return l.log("error","missing required param '".concat(s,"'.")),!1}return!0}},{key:"log",value:function(t,e){null!=(t=console[t])&&t.call(console,"[mobile-select]: ".concat(e))}}]),l}();return h(c,"defaultConfig",{keyMap:{id:"id",value:"value",childs:"childs"},position:[],colWidth:[],title:"",connector:" ",ensureBtnText:"确认",cancelBtnText:"取消",triggerDisplayValue:!0,scrollSpeed:1}),h(c,"REQUIRED_PARAMS",["trigger","wheels"]),c}();

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

@@ -0,0 +1,22 @@
+/*
+* mobile-select v1.4.0
+* Homepage: https://github.com/onlyhom/mobile-select
+* Released under the MIT License.
+* (c) 2017-present
+*/
+(function(a,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("./style/mobile-select.css")):typeof define=="function"&&define.amd?define(["./style/mobile-select.css"],r):(a=typeof globalThis<"u"?globalThis:a||self,a.MobileSelect=r())})(this,function(){"use strict";var S=Object.defineProperty;var D=(a,r,c)=>r in a?S(a,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[r]=c;var o=(a,r,c)=>(D(a,typeof r!="symbol"?r+"":r,c),c);function a(){return!navigator.userAgent.toLowerCase().match(/ipad|iphone os|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/)}const c=class{constructor(t){o(this,"mobileSelect");o(this,"trigger");o(this,"wheelList");o(this,"sliderList");o(this,"wheelsContain");o(this,"panel");o(this,"ensureBtn");o(this,"cancelBtn");o(this,"grayLayer");o(this,"popUp");o(this,"initPosition");o(this,"initColWidth");o(this,"wheelsData");o(this,"displayJson");o(this,"curValue");o(this,"curIndexArr");o(this,"isCascade");o(this,"isJsonType");o(this,"startY");o(this,"moveEndY");o(this,"moveY");o(this,"preMoveY");o(this,"offsetY");o(this,"offsetSum");o(this,"oversizeBorder");o(this,"enableClickStatus");o(this,"optionHeight");o(this,"curDistance");o(this,"cascadeJsonData");o(this,"eventHandleMap");o(this,"initDeepCount");o(this,"config");!c.checkRequiredConfig(t)||(this.config=Object.assign({},c.defaultConfig,t),this.wheelsData=t.wheels,this.isJsonType=!1,this.cascadeJsonData=[],this.displayJson=[],this.curValue=[],this.curIndexArr=[],this.isCascade=!1,this.startY,this.moveEndY,this.moveY,this.preMoveY,this.offsetY=0,this.offsetSum=0,this.oversizeBorder,this.curDistance=[],this.enableClickStatus=!1,this.optionHeight=0,this.initPosition=t.position||[],this.initColWidth=t.colWidth||[],this.init())}init(){if(!this.checkTriggerAvailable())return;const{config:t}=this;if(this.isJsonType=c.checkDataType(this.wheelsData),this.renderComponent(this.wheelsData),this.wheelList=this.mobileSelect.getElementsByClassName("ms-wheel"),this.sliderList=this.mobileSelect.getElementsByClassName("ms-select-container"),this.panel=this.mobileSelect.querySelector(".ms-panel"),this.wheelsContain=this.mobileSelect.querySelector(".ms-wheels"),this.ensureBtn=this.mobileSelect.querySelector(".ms-ensure"),this.cancelBtn=this.mobileSelect.querySelector(".ms-cancel"),this.grayLayer=this.mobileSelect.querySelector(".ms-gray-layer"),this.popUp=this.mobileSelect.querySelector(".ms-content"),this.optionHeight=this.mobileSelect.querySelector("li").offsetHeight,t.initValue&&this.setTriggerInnerText(t.initValue),this.setStyle(t),this.isCascade=this.checkCascade(),this.isCascade&&this.initCascade(),t.initValue&&(this.initPosition=this.getPositionByInitValue()),this.initPosition.length<this.sliderList.length){const e=this.sliderList.length-this.initPosition.length;for(let i=0;i<e;i++)this.initPosition.push(0)}this.isCascade?this.initPosition.forEach((e,i)=>{this.checkRange(i,this.initPosition)}):this.setCurDistance(this.initPosition),this.eventHandleMap={cancelBtn:{event:"click",fn:()=>{var e,i,s,n;this.hide(),(i=(e=this.config).cancel)==null||i.call(e,this.curIndexArr,this.curValue,this),(n=(s=this.config).onCancel)==null||n.call(s,this.curValue,this.curIndexArr,this)}},ensureBtn:{event:"click",fn:()=>{var e,i,s,n;this.hide(),this.optionHeight||(this.optionHeight=this.mobileSelect.querySelector("li").offsetHeight),this.setTriggerInnerText(this.getConnectedString()),this.curIndexArr=this.getIndexArr(),this.curValue=this.getCurValue(),(i=(e=this.config).callback)==null||i.call(e,this.curIndexArr,this.curValue,this),(n=(s=this.config).onChange)==null||n.call(s,this.curValue,this.curIndexArr,this)}},trigger:{event:"click",fn:()=>{this.show()}},grayLayer:{event:"click",fn:()=>this.hide()},popUp:{event:"click",fn:e=>e.stopPropagation()},panel:{event:["touchstart","touchend","touchmove"],fn:e=>this.touch(e)}},a()&&(this.eventHandleMap.panel.event=["mousedown","mousemove","mouseup"]),this.registerEvents("add"),this.fixRowStyle(),t.autoFocus&&this.show()}static checkDataType(t){var e,i;return typeof((i=(e=t[0])==null?void 0:e.data)==null?void 0:i[0])=="object"}static checkRequiredConfig(t){const e=c.REQUIRED_PARAMS;if(!t){const i=e.map(s=>`'${s}'`);return c.log("error",`missing required param ${i.join(" and ")}.`),!1}for(let i=0;i<e.length;i++){const s=e[i];if(!t[s])return c.log("error",`missing required param '${s}'.`),!1}return!0}static log(t,e){var i;(i=console[t])==null||i.call(console,`[mobile-select]: ${e}`)}checkTriggerAvailable(){const{config:t}=this;return this.trigger=t.trigger instanceof HTMLElement?t.trigger:document.querySelector(t.trigger),this.trigger?!0:(c.log("error","trigger HTMLElement does not found on your document."),!1)}getPositionByInitValue(){var n;const{keyMap:t,connector:e,initValue:i}=this.config,s=(i==null?void 0:i.split(e))||[];if(this.isJsonType){let h=(n=this.wheelsData[0])==null?void 0:n.data;return s.reduce((l,u)=>{var g;const d=h==null?void 0:h.findIndex(f=>f[t.value]==u);return l.push(d<0?0:d),h=(g=h[d])==null?void 0:g[t.childs],l},[])}return s.reduce((h,l,u)=>{var g,f;const d=(f=(g=this.wheelsData[u])==null?void 0:g.data)==null?void 0:f.findIndex(m=>m==l);return h.push(d<0?0:d),h},[])}getConnectedString(){let t="";for(let e=0;e<this.wheelList.length;e++)e==this.wheelList.length-1?t+=this.getInnerText(e):t+=this.getInnerText(e)+this.config.connector;return t}setTriggerInnerText(t){this.config.triggerDisplayValue&&(this.trigger.textContent=t)}setValue(t){if(!t||!t.length)return;if(this.isJsonType&&typeof t[0]!="object"||!this.isJsonType&&typeof t[0]=="object"){c.log("error",`The setValue() input format should be same with getValue(), like: ${JSON.stringify(this.getValue())}`);return}const{keyMap:e}=this.config;t.forEach((i,s)=>{var l;const n=this.isCascade?this.displayJson[s]:(l=this.wheelsData[s])==null?void 0:l.data,h=n==null?void 0:n.findIndex(u=>this.isJsonType?i[e.id]==u[e.id]||i[e.value]==u[e.value]:i==u);this.locatePosition(s,h)}),this.setTriggerInnerText(this.getConnectedString())}setTitle(t){this.mobileSelect.querySelector(".ms-title").innerHTML=t}setStyle(t){if(t.ensureBtnColor&&(this.ensureBtn.style.color=t.ensureBtnColor),t.cancelBtnColor&&(this.cancelBtn.style.color=t.cancelBtnColor),t.titleColor){const e=this.mobileSelect.querySelector(".ms-title");e.style.color=t.titleColor}if(t.textColor&&(this.panel=this.mobileSelect.querySelector(".ms-panel"),this.panel.style.color=t.textColor),t.titleBgColor){const e=this.mobileSelect.querySelector(".ms-btn-bar");e.style.backgroundColor=t.titleBgColor}if(t.bgColor){this.panel=this.mobileSelect.querySelector(".ms-panel");const e=this.mobileSelect.querySelector(".ms-shadow-mask");this.panel.style.backgroundColor=t.bgColor,e.style.background="linear-gradient(to bottom, "+t.bgColor+", rgba(255, 255, 255, 0), "+t.bgColor+")"}if(typeof t.maskOpacity=="number"){const e=this.mobileSelect.querySelector(".ms-gray-layer");e.style.background="rgba(0, 0, 0, "+t.maskOpacity+")"}}show(){var t,e,i;this.mobileSelect.classList.add("ms-show"),(t=document.querySelector("body"))==null||t.classList.add("ms-show"),typeof this.config.onShow=="function"&&((i=(e=this.config).onShow)==null||i.call(e,this.curValue,this.curIndexArr,this))}hide(){var t,e,i;this.mobileSelect.classList.remove("ms-show"),(t=document.querySelector("body"))==null||t.classList.remove("ms-show"),typeof this.config.onHide=="function"&&((i=(e=this.config).onHide)==null||i.call(e,this.curValue,this.curIndexArr,this))}registerEvents(t){for(const[e,i]of Object.entries(this.eventHandleMap))typeof i.event=="string"?this[e][`${t}EventListener`](i.event,i.fn,{passive:!1}):i.event.forEach(s=>{this[e][`${t}EventListener`](s,i.fn,{passive:!1})})}destroy(){var t,e;this.registerEvents("remove"),(e=(t=this.mobileSelect)==null?void 0:t.parentNode)==null||e.removeChild(this.mobileSelect)}getOptionsHtmlStr(t){const{keyMap:e}=this.config;let i="";if(this.isJsonType)for(let s=0;s<t.length;s++){const n=t[s][e.id],h=t[s][e.value];i+=`<li data-id="${n}">${h}</li>`}else for(let s=0;s<t.length;s++)i+="<li>"+t[s]+"</li>";return i}renderComponent(t){this.mobileSelect=document.createElement("div"),this.mobileSelect.className="ms-mobile-select",this.mobileSelect.innerHTML=`<div class="ms-gray-layer"></div>
+        <div class="ms-content">
+          <div class="ms-btn-bar">
+            <div class="ms-fix-width">
+              <div class="ms-cancel">${this.config.cancelBtnText}</div>  
+              <div class="ms-title">${this.config.title||""}</div>
+              <div class="ms-ensure">${this.config.ensureBtnText}</div>
+            </div>
+          </div>
+          <div class="ms-panel">
+            <div class="ms-fix-width">
+            <div class="ms-wheels"></div>
+            <div class="ms-select-line"></div>
+            <div class="ms-shadow-mask"></div>
+          </div>
+        </div>`,document.body.appendChild(this.mobileSelect);let e="";for(let i=0;i<t.length;i++)e+=`<div class="ms-wheel" data-index="${i}"><ul class="ms-select-container">`,e+=this.getOptionsHtmlStr(t[i].data),e+="</ul></div>";this.mobileSelect.querySelector(".ms-wheels").innerHTML=e}reRenderWheels(){const t=this.wheelList.length-this.displayJson.length;if(t>0)for(let e=0;e<t;e++)this.wheelsContain.removeChild(this.wheelList[this.wheelList.length-1]);for(let e=0;e<this.displayJson.length;e++)if(this.wheelList[e])this.sliderList[e].innerHTML=this.getOptionsHtmlStr(this.displayJson[e]);else{const i=document.createElement("div");i.className="ms-wheel",i.innerHTML=`<ul class="ms-select-container">${this.getOptionsHtmlStr(this.displayJson[e])}</ul>`,i.setAttribute("data-index",e.toString()),this.wheelsContain.appendChild(i)}}checkCascade(){var e;const{keyMap:t}=this.config;if(this.isJsonType){const i=this.wheelsData[0].data;for(let s=0;s<i.length;s++)if(t.childs in i[s]&&((e=i[s][t.childs])==null?void 0:e.length)>0)return this.cascadeJsonData=this.wheelsData[0].data,!0}return!1}initCascade(){this.displayJson.push(this.cascadeJsonData),this.initPosition.length>0?(this.initDeepCount=0,this.initCheckArrDeep(this.cascadeJsonData[this.initPosition[0]])):this.checkArrDeep(this.cascadeJsonData[0]),this.reRenderWheels()}initCheckArrDeep(t){if(t){const{keyMap:e}=this.config;if(e.childs in t&&t[e.childs].length>0){this.displayJson.push(t[e.childs]),this.initDeepCount++;const i=t[e.childs][this.initPosition[this.initDeepCount]];i?this.initCheckArrDeep(i):this.checkArrDeep(t[e.childs][0])}}}checkArrDeep(t){if(!t)return;const{keyMap:e}=this.config;e.childs in t&&t[e.childs].length>0&&(this.displayJson.push(t[e.childs]),this.checkArrDeep(t[e.childs][0]))}checkRange(t,e){var h;const i=this.displayJson.length-1-t,{keyMap:s}=this.config;for(let l=0;l<i;l++)this.displayJson.pop();let n;for(let l=0;l<=t;l++)n=l==0?this.cascadeJsonData[e[0]]:(h=n==null?void 0:n[s.childs])==null?void 0:h[e[l]];this.checkArrDeep(n),this.reRenderWheels(),this.fixRowStyle(),this.setCurDistance(this.resetPosition(t,e))}resetPosition(t,e){const i=[...e];let s;if(this.sliderList.length>e.length){s=this.sliderList.length-e.length;for(let n=0;n<s;n++)i.push(0)}else if(this.sliderList.length<e.length){s=e.length-this.sliderList.length;for(let n=0;n<s;n++)i.pop()}for(let n=t+1;n<i.length;n++)i[n]=0;return i}updateWheels(t){if(this.isCascade){if(this.cascadeJsonData=t,this.displayJson=[],this.initCascade(),this.initPosition.length<this.sliderList.length){const e=this.sliderList.length-this.initPosition.length;for(let i=0;i<e;i++)this.initPosition.push(0)}this.setCurDistance(this.initPosition),this.fixRowStyle()}}updateWheel(t,e){if(this.isCascade){c.log("error","'updateWheel()' not support cascade json data, please use 'updateWheels()' instead to update the whole data source");return}let i="";i+=this.getOptionsHtmlStr(e),this.wheelsData[t]=this.isJsonType?{data:e}:e,this.sliderList[t].innerHTML=i}fixRowStyle(){if(this.initColWidth.length&&this.initColWidth.length===this.wheelList.length){const e=this.initColWidth.reduce((i,s)=>i+s,0);this.initColWidth.forEach((i,s)=>{this.wheelList[s].style.width=(i/e*100).toFixed(2)+"%"});return}const t=(100/this.wheelList.length).toFixed(2);for(let e=0;e<this.wheelList.length;e++)this.wheelList[e].style.width=t+"%"}getIndex(t){return Math.round((2*this.optionHeight-t)/this.optionHeight)}getIndexArr(){const t=[];for(let e=0;e<this.curDistance.length;e++)t.push(this.getIndex(this.curDistance[e]));return t}getCurValue(){const t=[],e=this.getIndexArr(),{keyMap:i}=this.config;if(this.isCascade)for(let s=0;s<this.wheelList.length;s++){const n=this.displayJson[s][e[s]];n&&t.push({[i.id]:n[i.id],[i.value]:n[i.value]})}else if(this.isJsonType)for(let s=0;s<this.curDistance.length;s++)t.push(this.wheelsData[s].data[this.getIndex(this.curDistance[s])]);else for(let s=0;s<this.curDistance.length;s++)t.push(this.getInnerText(s));return t}getValue(){return this.getCurValue()}calcDistance(t){return 2*this.optionHeight-t*this.optionHeight}setCurDistance(t){const e=[];for(let i=0;i<this.sliderList.length;i++)e.push(this.calcDistance(t[i])),this.movePosition(this.sliderList[i],e[i]);this.curDistance=e}fixPosition(t){return-(this.getIndex(t)-2)*this.optionHeight}movePosition(t,e){t.style.transform="translate3d(0,"+e+"px, 0)"}locatePosition(t,e){t===void 0||e===void 0||e<0||(this.curDistance[t]=this.calcDistance(e),this.movePosition(this.sliderList[t],this.curDistance[t]),this.isCascade&&this.checkRange(t,this.getIndexArr()))}updateCurDistance(t,e){this.curDistance[e]=parseInt(t.style.transform.split(",")[1])}getInnerText(t){var s;const e=this.sliderList[t].getElementsByTagName("li").length;let i=this.getIndex(this.curDistance[t]);return i>=e?i=e-1:i<0&&(i=0),((s=this.sliderList[t].getElementsByTagName("li")[i])==null?void 0:s.textContent)||""}touch(t){var h,l,u,d,g,f,m,v;const i=(t.composedPath&&t.composedPath()).find(p=>{var y;return(y=p.classList)==null?void 0:y.contains("ms-wheel")});if(!i)return;const s=i.firstChild,n=parseInt(i.getAttribute("data-index")||"0");switch(t.type){case"touchstart":case"mousedown":s.style.transition="none 0s ease-out",this.startY=Math.floor(t instanceof TouchEvent?t.touches[0].clientY:t.clientY),this.preMoveY=this.startY,t.type==="mousedown"&&(this.enableClickStatus=!0);break;case"touchmove":case"mousemove":if(t.preventDefault(),t.type==="mousemove"&&!this.enableClickStatus)break;this.moveY=Math.floor(t instanceof TouchEvent?t.touches[0].clientY:t.clientY),this.offsetY=(this.moveY-this.preMoveY)*this.config.scrollSpeed,this.updateCurDistance(s,n),this.curDistance[n]=this.curDistance[n]+this.offsetY,this.movePosition(s,this.curDistance[n]),this.preMoveY=this.moveY;break;case"touchend":case"mouseup":if(s.style.transition="transform 0.18s ease-out",this.moveEndY=Math.floor(t instanceof TouchEvent?t.changedTouches[0].clientY:t.clientY),this.offsetSum=this.moveEndY-this.startY,this.oversizeBorder=-(s.getElementsByTagName("li").length-3)*this.optionHeight,this.offsetSum==0){const p=Math.floor((window.innerHeight-this.moveEndY)/40);if(p!=2){const y=p-2,C=this.curDistance[n]+y*this.optionHeight;C<=2*this.optionHeight&&C>=this.oversizeBorder&&(this.curDistance[n]=C,this.movePosition(s,this.curDistance[n]),(l=(h=this.config).transitionEnd)==null||l.call(h,this.getIndexArr(),this.getCurValue(),this),(d=(u=this.config).onTransitionEnd)==null||d.call(u,this.getCurValue(),this.getIndexArr(),this))}}else this.updateCurDistance(s,n),this.curDistance[n]=this.fixPosition(this.curDistance[n]),this.curDistance[n]>2*this.optionHeight?this.curDistance[n]=2*this.optionHeight:this.curDistance[n]<this.oversizeBorder&&(this.curDistance[n]=this.oversizeBorder),this.movePosition(s,this.curDistance[n]),(f=(g=this.config).transitionEnd)==null||f.call(g,this.getIndexArr(),this.getCurValue(),this),(v=(m=this.config).onTransitionEnd)==null||v.call(m,this.getCurValue(),this.getIndexArr(),this);t.type==="mouseup"&&(this.enableClickStatus=!1),this.isCascade&&this.checkRange(n,this.getIndexArr());break}}};let r=c;return o(r,"defaultConfig",{keyMap:{id:"id",value:"value",childs:"childs"},position:[],colWidth:[],title:"",connector:" ",ensureBtnText:"\u786E\u8BA4",cancelBtnText:"\u53D6\u6D88",triggerDisplayValue:!0,scrollSpeed:1}),o(r,"REQUIRED_PARAMS",["trigger","wheels"]),r});

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

@@ -1,167 +1,167 @@
-/*
-* mobile-select v1.4.0
-* Homepage: https://github.com/onlyhom/mobile-select
-* Released under the MIT License.
-* (c) 2017-present
-*/
-.ms-mobile-select {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity 0.4s, z-index 0.4s;
-  transition: opacity 0.4s, z-index 0.4s;
-  transform: translate(0, 0);
-}
-.ms-mobile-select * {
-  margin: 0;
-  padding: 0;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.ms-mobile-select .ms-gray-layer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 888;
-  display: block;
-}
-.ms-mobile-select .ms-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;
-}
-.ms-mobile-select .ms-fix-width {
-  width: 90%;
-  margin: 0 auto;
-  position: relative;
-}
-.ms-mobile-select .ms-fix-width:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-.ms-mobile-select .ms-btn-bar {
-  border-bottom: 1px solid #dcdcdc;
-  font-size: 15px;
-  height: 45px;
-  position: relative;
-  text-align: center;
-  line-height: 45px;
-}
-.ms-mobile-select .ms-cancel,
-.ms-mobile-select .ms-ensure {
-  height: 45px;
-  width: 55px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.ms-mobile-select .ms-cancel {
-  left: 0;
-  color: #666;
-}
-.ms-mobile-select .ms-ensure {
-  right: 0;
-  color: #1e83d3;
-}
-.ms-mobile-select .ms-title {
-  font-size: 15px;
-  padding: 0 15%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.ms-mobile-select .ms-panel:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-.ms-mobile-select .ms-wheels {
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-}
-.ms-mobile-select .ms-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;
-}
-.ms-mobile-select .ms-select-container {
-  display: block;
-  text-align: center;
-}
-.ms-mobile-select .ms-select-container li {
-  font-size: 15px;
-  display: block;
-  height: 40px;
-  line-height: 40px;
-  cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.ms-mobile-select .ms-select-line {
-  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;
-}
-.ms-mobile-select .ms-shadow-mask {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 200px;
-  background: linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);
-  opacity: 0.9;
-  pointer-events: none;
-}
-.ms-mobile-select.ms-show {
-  opacity: 1;
-  z-index: 10000;
-  visibility: visible;
-}
-.ms-mobile-select.ms-show .ms-content {
-  bottom: 0;
-}
-.ms-default-trigger {
-  min-height: 1em;
-  color: #888;
-}
-/** Prevent Page Scrolling When a Modal is Open */
-body.ms-show {
-  overflow-y: hidden;
-}
+/*
+* mobile-select v1.4.0
+* Homepage: https://github.com/onlyhom/mobile-select
+* Released under the MIT License.
+* (c) 2017-present
+*/
+.ms-mobile-select {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 0.4s, z-index 0.4s;
+  transition: opacity 0.4s, z-index 0.4s;
+  transform: translate(0, 0);
+}
+.ms-mobile-select * {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ms-mobile-select .ms-gray-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 888;
+  display: block;
+}
+.ms-mobile-select .ms-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;
+}
+.ms-mobile-select .ms-fix-width {
+  width: 90%;
+  margin: 0 auto;
+  position: relative;
+}
+.ms-mobile-select .ms-fix-width:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.ms-mobile-select .ms-btn-bar {
+  border-bottom: 1px solid #dcdcdc;
+  font-size: 15px;
+  height: 45px;
+  position: relative;
+  text-align: center;
+  line-height: 45px;
+}
+.ms-mobile-select .ms-cancel,
+.ms-mobile-select .ms-ensure {
+  height: 45px;
+  width: 55px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.ms-mobile-select .ms-cancel {
+  left: 0;
+  color: #666;
+}
+.ms-mobile-select .ms-ensure {
+  right: 0;
+  color: #1e83d3;
+}
+.ms-mobile-select .ms-title {
+  font-size: 15px;
+  padding: 0 15%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ms-mobile-select .ms-panel:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.ms-mobile-select .ms-wheels {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+.ms-mobile-select .ms-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;
+}
+.ms-mobile-select .ms-select-container {
+  display: block;
+  text-align: center;
+}
+.ms-mobile-select .ms-select-container li {
+  font-size: 15px;
+  display: block;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.ms-mobile-select .ms-select-line {
+  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;
+}
+.ms-mobile-select .ms-shadow-mask {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(to bottom, #fffffff5, #ffffffcc 25%, #ffffff00 49%, #ffffff00 51%, #ffffffcc 75%, #fffffff5);
+  opacity: 0.9;
+  pointer-events: none;
+}
+.ms-mobile-select.ms-show {
+  opacity: 1;
+  z-index: 10000;
+  visibility: visible;
+}
+.ms-mobile-select.ms-show .ms-content {
+  bottom: 0;
+}
+.ms-default-trigger {
+  min-height: 1em;
+  color: #888;
+}
+/** Prevent Page Scrolling When a Modal is Open */
+body.ms-show {
+  overflow-y: hidden;
+}
 
 h1,
 h2,

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import MobileSelect from 'mobile-select';
+import MobileSelect from './mobile-select';
 class MobileSelectedItem {
 }
 export class PtcMobileSelect {

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css

@@ -1,21 +1,74 @@
-:host {
-  display: block;
-
-  .description{
-    display: inline;
-  }
-
-  .label{
-    cursor: pointer;
-    color: var(--color-hyperlink);
-    font-size: var(--ptc-font-size-small);
-    font-weight: var(--ptc-font-weight-bold);
-    text-decoration-line: underline;
-    line-height: var(--ptc-line-height-densest);
-
-    &::before{
-      content: '';
-      padding-left: 8px;
-    }
-  }
-}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}
+:host .description {
+  display: inline;
+}
+:host .label {
+  cursor: pointer;
+  color: var(--color-hyperlink);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-bold);
+  text-decoration-line: underline;
+  line-height: var(--ptc-line-height-densest);
+}
+:host .label::before {
+  content: "";
+  padding-left: 8px;
+}

package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.js

@@ -104,14 +104,14 @@ export class PtcReadmoreV3 {
     this.readMoreTrigger.emit(this.expanded);
   }
   render() {
-    const parsedStyles = this.contentStyles ? this.parseStyles(this.contentStyles) : {};
-    return (h(Host, null, h("p", { class: "description", style: parsedStyles }, this.truncated ? this.getContent() : h("slot", null)), this.truncated ? (h("label", { class: "label", onClick: () => this.toggleExpand() }, this.getLabel())) : null));
+    //const parsedStyles = this.contentStyles ? this.parseStyles(this.contentStyles) : {};
+    return (h(Host, null, this.contentStyles && h("style", null, this.contentStyles), h("p", { class: "description" }, this.truncated ? this.getContent() : h("slot", null)), this.truncated ? (h("label", { class: "label", onClick: () => this.toggleExpand() }, this.getLabel())) : null));
   }
   static get is() { return "ptc-readmore-v3"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["ptc-readmore-v3.css"]
+      "$": ["ptc-readmore-v3.scss"]
     };
   }
   static get styleUrls() {