@xplortech/apollo-core 2.4.2 → 2.5.0

package/dist/components/xpl-input2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{d as r}from"./xpl-dropdown2.js";import{d as n}from"./xpl-dropdown-group2.js";import{d as l}from"./xpl-dropdown-heading2.js";import{d as h}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as c}from"./xpl-input-date2.js";import{d}from"./xpl-input-file2.js";import{d as u}from"./xpl-popover2.js";import{v as m}from"./v4.js";const b=(t,e,i)=>{const s=(i/=100)*(e/=100),a=s*(1-Math.abs(t/60%2-1)),o=i-s;let r=0,n=0,l=0;return t<60?(r=s,n=a,l=0):t<120?(r=a,n=s,l=0):t<180?(r=0,n=s,l=a):t<240?(r=0,n=a,l=s):t<300?(r=a,n=0,l=s):(r=s,n=0,l=a),{r:Math.round(255*(r+o)),g:Math.round(255*(n+o)),b:Math.round(255*(l+o))}},x=(t,e,i)=>[t,e,i].map((t=>t.toString(16).padStart(2,"0"))).join(""),f=t=>{var e,i;if(t.startsWith("#")){if(!/^#([a-fA-F\d]{6})$/.test(t))throw new Error("Only 6-digit hex format supported (e.g. #aabbcc)");const e=t.toLowerCase().slice(1),i=parseInt(e.slice(0,2),16),s=parseInt(e.slice(2,4),16),a=parseInt(e.slice(4,6),16);return{hex:e,r:i,g:s,b:a,a:1}}if(t.startsWith("rgba")||t.startsWith("rgb")){const i=null===(e=t.match(/[\d.]+/g))||void 0===e?void 0:e.map(Number);if(!i||i.length<3)throw new Error("Invalid rgba/rgb format");const[s,a,o,r=1]=i,n=t=>t.toString(16).padStart(2,"0");return{hex:`${n(s)}${n(a)}${n(o)}`.toLowerCase(),r:s,g:a,b:o,a:r}}if(t.startsWith("hsla")||t.startsWith("hsl")){const e=null===(i=t.match(/[\d.]+/g))||void 0===i?void 0:i.map(Number);if(!e||e.length<3)throw new Error("Invalid hsla/hsl format");const[s,a,o,r=1]=e,n=((t,e,i,s)=>{i/=100;const a=e=>(e+t/30)%12,o=(e/=100)*Math.min(i,1-i),r=t=>i-o*Math.max(-1,Math.min(a(t)-3,Math.min(9-a(t),1)));return`rgba(${Math.round(255*r(0))}, ${Math.round(255*r(8))}, ${Math.round(255*r(4))}, ${s})`})(s,a,o,r),[l,h,p]=n.match(/[\d.]+/g).map(Number);return{hex:x(l,h,p).toLowerCase(),r:l,g:h,b:p,a:r}}throw new Error("Unsupported color format")},g=t=>t.a&&1!==t.a?`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a})`:`#${t.hex}`;function v(t){const[e,i]=t.split(":"),s=Number(e)>=12?"PM":"AM";return[(Number(e)%12||12).toString(),i,s]}const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.valueChange=i(this,"valueChange",7),this.hasErrorStateChanged=i(this,"hasErrorStateChanged",7),this.max="23:59",this.min="00:00",this.step=30,this.mode="single",this.timeFormat="24h",this.allowCustomOption=!1,this.showOptions=!1,this.options=[],this.handleInput=t=>{var e;const i=null===(e=t.target.value)||void 0===e?void 0:e.replace(/[^0-9:apmAPM]/g,"");this.value=i},this.handleFocus=()=>{this.showOptions=!0},this.handleBlur=()=>{this.value=function(t){if(!t||""===t.trim()||0===t.replace(/[^0-9]/g,"").length)return null;let e=t.trim().toLowerCase();e=e.replace(/(\d)\s+(am|pm)/g,"$1$2"),/^\d{1,2}(am|pm)?$/.test(e)&&(e=e.replace(/(am|pm)?$/,":00$1")),/^\d{1,2}$/.test(e)&&(e=`${e}:00`),/^\d{1,2}:\d{1}$/.test(e)&&(e=`${e}0`);const[i,s]=e.split(":"),a=s.replace(/[^0-9]/g,""),o=e.includes("am");return e.includes("pm")||o?o?`${(Number(i)%12).toString().padStart(2,"0")}:${a}`:`${Number(i)%12+12}:${a}`:`${i.padStart(2,"0")}:${a}`}(this.value)},this.handleClick=()=>{this.showOptions=!0}}onValueChange(t){this.valueChange.emit(t),this.updateState(t)}updateState(t){this.formattedValue=this.formatDisplayedTime(t),this.amPm=this.formatDisplayedAmPm(t),this.validateValue()}formatDisplayedTime(t){if(!t)return"";if("12h"===this.timeFormat&&t.includes(":")){const[e,i]=v(t);return`${e}:${i}`}return t}formatDisplayedAmPm(t){if(!t||"12h"!==this.timeFormat)return"";const[,,e]=v(t);return e}validateValue(){this.hasErrorState=this.value?!this.value.includes(":")||this.value.trim().length<4||this.value.trim().length>5?"Invalid time format, must be HH:MM":this.value<this.min||this.value>this.max?"Out of range":this.allowCustomOption||this.options.some((t=>t.value===this.value))?null:"Invalid option":this.required?"required":null}onHasErrorStateChanged(t){this.hasErrorStateChanged.emit(t)}componentDidLoad(){var t;"range"===this.mode&&console.warn("Range mode is not supported for time inputs at this time."),null===(t=this.dropdown)||void 0===t||t.addEventListener("isOpenChange",(t=>{this.showOptions=t.detail}))}componentWillLoad(){this.options=this.getOptions(),this.value&&this.updateState(this.value)}getOptions(){return function(t,e,i,s){const a=t=>{const[e,i]=t.split(":").map(Number);return 60*e+i},o=a(e.toString()),r=a(i.toString()),n=[];for(let e=o;e<=r;e+=t)n.push((l=e,`${Math.floor(l/60).toString().padStart(2,"0")}:${(l%60).toString().padStart(2,"0")}`));var l;return n.map((t=>({label:"12h"===s?function(t){const[e,i,s]=v(t);return`${e}:${i} ${s}`}(t):t,value:t})))}(this.step,this.min.toString(),this.max.toString(),this.timeFormat).map((({label:t,value:e})=>({label:t,value:e,onClick:()=>{this.value=e,this.showOptions=!1}})))}render(){return s(a,{key:"99b06c895d608dec6226f79f21ceda92225428b7",class:{"xpl-input-time":!0,[`xpl-input-time--mode-${this.mode}`]:!0,"xpl-input-time--error":!!this.hasErrorState}},s("xpl-input",{key:"8cdf996f46d969c243d246fdfe888c22c9c4999b",pre:s("xpl-icon",{class:"xpl-input-time__clock-icon",icon:"clock",size:24}),post:"12h"===this.timeFormat?this.amPm||"AM":null,type:"text",_id:this.inputId,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,placeholder:this.placeholder,max:this.max,min:this.min,onInput:this.handleInput,value:this.formattedValue,onFocusEvent:this.handleFocus,onBlurEvent:this.handleBlur,onClick:this.handleClick}),!this.readonly&&!this.disabled&&s("xpl-dropdown",{key:"5213fcd68da96d726d8b046277233afd6b5b20e8",options:this.options,isOpen:this.showOptions,ref:t=>{this.dropdown=t},class:"xpl-input-time__dropdown"}))}static get watchers(){return{value:[{onValueChange:0}],hasErrorState:[{onHasErrorStateChanged:0}]}}},[0,"xpl-input-time",{inputId:[1,"input-id"],disabled:[4],name:[1],required:[4],readonly:[4],value:[1537],placeholder:[1],max:[8],min:[8],step:[2],mode:[1],timeFormat:[1,"time-format"],allowCustomOption:[4,"allow-custom-option"],formattedValue:[32],hasErrorState:[32],showOptions:[32],options:[32],amPm:[32]},void 0,{value:[{onValueChange:0}],hasErrorState:[{onHasErrorStateChanged:0}]}]);function k(){"undefined"!=typeof customElements&&["xpl-input-time","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time"].forEach((t=>{switch(t){case"xpl-input-time":customElements.get(o(t))||customElements.define(o(t),w);break;case"xpl-dropdown":customElements.get(o(t))||r();break;case"xpl-dropdown-group":customElements.get(o(t))||n();break;case"xpl-dropdown-heading":customElements.get(o(t))||l();break;case"xpl-dropdown-option":customElements.get(o(t))||h();break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k()}}))}const y={hex:"",r:0,g:0,b:0,a:1},E=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputChange=i(this,"inputChange",7),this.hasErrorStateChanged=i(this,"hasErrorStateChanged",7),this.placeholder="Select color",this.eyeDropperSupported="EyeDropper"in window,this.colorInputElements={hex:null,r:null,g:null,b:null,a:null,hue:null,slGrid:null,alpha:null},this.handleMove=t=>{const e=this.colorInputElements.slGrid.getBoundingClientRect(),i="touches"in t?t.touches[0].clientY:t.clientY,s=Math.max(0,Math.min(("touches"in t?t.touches[0].clientX:t.clientX)-e.left,e.width)),a=Math.max(0,Math.min(i-e.top,e.height)),o=s/e.width,r=a/e.height,n=b(this.hue,100,100),l=(255*(1-o)+o*n.r)*(1-r),h=(255*(1-o)+o*n.g)*(1-r),p=(255*(1-o)+o*n.b)*(1-r),c={r:Math.round(l),g:Math.round(h),b:Math.round(p),hex:x(Math.round(l),Math.round(h),Math.round(p)),a:this.colorValues.a};this.colorValues=c},this.startDrag=t=>{t.preventDefault(),this.handleMove(t),window.addEventListener("mousemove",this.handleMove),window.addEventListener("mouseup",this.stopDrag),window.addEventListener("touchmove",this.handleMove),window.addEventListener("touchend",this.stopDrag)},this.stopDrag=()=>{window.removeEventListener("mousemove",this.handleMove),window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("touchmove",this.handleMove),window.removeEventListener("touchend",this.stopDrag)},this.onHexInputChange=t=>{var e;const i=t.detail;if(i){const[t,s,a]=(t=>t?t.match(/\w\w/g).map((t=>parseInt(t,16))):[0,0,0])(i);this.colorValues={hex:i,r:t,g:s,b:a,a:null!==(e=this.colorValues.a)&&void 0!==e?e:1}}else this.colorValues=Object.assign({},y)},this.onRgbaInputChange=(t,e)=>{const i=parseFloat(e.detail);if(Number.isNaN(i))return void(this.hasErrorState=`invalid value from ${t.name}: ${i}`);const s=Object.assign({},this.colorValues);switch(t.name){case"color-r-input":s.r=i;break;case"color-g-input":s.g=i;break;case"color-b-input":s.b=i;break;case"color-a-input":s.a=i;break;default:this.hasErrorState=`unhandled input: ${t.name}`}s.hex=x(s.r,s.g,s.b),this.colorValues=s},this.onSliderInputChange=t=>{const e=parseFloat(t.value);if(Number.isNaN(e))this.hasErrorState=`invalid value from ${t.name}: ${e}`;else switch(t.name){case"color-hue-slider":this.colorValues=f(`hsla(${e}, 100%, 50%, 1)`),this.hue=e;break;case"color-alpha-slider":this.colorValues=Object.assign(Object.assign({},this.colorValues),{a:e});break;default:this.hasErrorState=`unhandled input: ${t.name}`}}}valueChanged(t){this.hasErrorState=this.required&&!t.hex?"required":null,this.inputChange.emit(t.hex?g(t):"")}onHasErrorStateChanged(t){this.hasErrorStateChanged.emit(t)}onValuePropChange(t){this.syncColorFromValue(t)}syncColorFromValue(t){if(t)try{this.colorValues=f(t),this.hue=(()=>{const t=this.colorValues.r/255,e=this.colorValues.g/255,i=this.colorValues.b/255,s=Math.max(t,e,i),a=Math.min(t,e,i),o=s-a;let r=0,n=0;const l=(s+a)/2;if(0!==o){switch(n=o/(1-Math.abs(2*l-1)),s){case t:r=(e-i)/o%6;break;case e:r=(i-t)/o+2;break;case i:r=(t-e)/o+4}r*=60,r<0&&(r+=360)}return{hue:Math.round(r),saturation:Math.round(100*n),lightness:Math.round(100*l)}})().hue}catch(t){this.hasErrorState="invalid color format",this.hue=0}else this.colorValues=Object.assign({},y),this.hasErrorState=null,this.hue=0}componentWillLoad(){this.syncColorFromValue(this.value)}componentDidLoad(){const{r:t,g:e,b:i,a:s,hue:a,alpha:o,hex:r}=this.colorInputElements;r.addEventListener("valueChange",(t=>{this.onHexInputChange(t)})),[t,e,i,s].forEach((t=>{t.addEventListener("valueChange",(e=>{this.onRgbaInputChange(t,e)}))})),[a,o].forEach((t=>{t.addEventListener("input",(()=>{this.onSliderInputChange(t)}))}))}async openEyeDropper(){try{const t=new window.EyeDropper,e=await t.open();this.colorValues=f(e.sRGBHex)}catch(t){this.hasErrorState=`eyedropper cancelled or failed: ${t}`}}render(){const{r:t,g:e,b:i,a:o}=this.colorValues,r=b(this.hue,100,100),{x:n,y:l}=((t,e,i,s)=>{const{s:a,v:o}=((t,e,i,s)=>{t/=255,e/=255,i/=255;const a=Math.max(t,e,i),o=a-Math.min(t,e,i);let r=0;return r=0===o?0:a===t?(e-i)/o%6:a===e?(i-t)/o+2:(t-e)/o+4,r=Math.round(60*r),r<0&&(r+=360),{h:null!=s?s:r,s:0===a?0:o/a,v:a}})(e.r,e.g,e.b,t);return{x:Math.round(a*i),y:Math.round((1-o)*s)}})(this.hue,{r:t,g:e,b:i},288,160),h={left:`${n}px`,top:`${l}px`,background:`rgb(${t}, ${e}, ${i})`};return s(a,{key:"639f311d46bbb46e327ae6b05fe24b47795adbf3",class:"xpl-input-color"},s("xpl-popover",{key:"ad9d6145e4e5ac581c6d22f726050767ff82d861",disabled:this.disabled,display:"menu"},s("div",{key:"219e1754388cfc2ecff25b42b67322e780a1e7d6",slot:"trigger"},s("div",{key:"7beafe5304521d496bf7d7f8f82de01c9b7de00d",class:{"xpl-input-color__display":!0,"xpl-input-color__display--disabled":this.disabled,"xpl-input-color__display--error":!!this.hasErrorState}},s("span",{key:"2caae6b87902c50eb754e93ce939797d619da723",class:"xpl-input-color__color",style:{background:g(this.colorValues)}}),this.colorValues.hex?s("span",{class:"xpl-input-color__value"},g(this.colorValues)):s("span",{class:"xpl-input-color__placeholder"},this.placeholder),this.eyeDropperSupported&&!this.hideEyeDropper&&s("xpl-icon",{key:"8cd0f1e94bf2eaf31ad82a4c8d307badef8046fc",size:20,icon:"eye-droper",class:"xpl-input-color__icon",onClick:t=>{t.stopPropagation(),this.openEyeDropper()}}))),s("div",{key:"8e6add90e733d299cea94559dcbc29dd4e64d9cd",class:"xpl-input-color__menu"},s("div",{key:"a488c9b7ef3ff0cabbbb4bf5a631f209034a2539",class:"xpl-input-color__sl-grid",ref:t=>{this.colorInputElements.slGrid=t},style:{background:["linear-gradient(to top, #000, #0000)","linear-gradient(to right, #fff, #fff0)",`rgb(${r.r} ${r.g} ${r.b})`].join(", ")},onMouseDown:this.startDrag,onTouchStart:this.startDrag},s("div",{key:"542a5cafd651e6b49f813f6eecb46088b0b6f97c",class:"xpl-input-color__sl-thumb",style:h})),s("div",{key:"fd3268874bb0c0bc22c2d2db15dd50c38d3ae70a",class:"xpl-input-color__grid"},s("input",{key:"08ea52b5c2bbc2800b2ad5cca6981813e4578ce5",type:"range",min:"0",max:"360",value:this.hue,class:"xpl-input-color__slider xpl-input-color__hue",name:"color-hue-slider",ref:t=>{this.colorInputElements.hue=t}}),s("input",{key:"1692e362cb1e48446f33e2f82c5988546ad6a6f0",type:"range",min:"0",max:"1",step:"0.01",value:o,class:"xpl-input-color__slider xpl-input-color__alpha",name:"color-alpha-slider",ref:t=>{this.colorInputElements.alpha=t},style:{backgroundImage:[`linear-gradient(to right, rgb(${t} ${e} ${i} / 0) 0%, rgb(${t} ${e} ${i} / 1) 100%)`,"linear-gradient(45deg, #ccc 25%, transparent 25%)","linear-gradient(-45deg, #ccc 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #ccc 75%)","linear-gradient(-45deg, transparent 75%, #ccc 75%)"].join(", ")}}),s("div",{key:"5de3d1979fbb4c4a2892961fcbd7e6fc2d2723b4",class:"xpl-input-color__preview",style:{background:`rgba(${t}, ${e}, ${i}, ${o})`}})),s("div",{key:"3a660bdbb902bc8bfddb8c423f2462404b0221b8",class:"xpl-input-color__inputs"},Object.entries(this.colorInputElements).filter((([t])=>["hex","r","g","b","a"].includes(t))).map((([t])=>s("xpl-input",{key:t,label:t.toLocaleUpperCase(),name:`color-${t}-input`,placeholder:"hex"===t?"793EF7":"0",value:this.colorValues[t],ref:e=>{this.colorInputElements[t]=e}})))))))}static get watchers(){return{colorValues:[{valueChanged:0}],hasErrorState:[{onHasErrorStateChanged:0}],value:[{onValuePropChange:0}]}}},[0,"xpl-input-color",{value:[1],placeholder:[1],disabled:[4],required:[4],hideEyeDropper:[4,"hide-eye-dropper"],hasErrorState:[32],colorValues:[32],eyeDropperSupported:[32],hue:[32]},void 0,{colorValues:[{valueChanged:0}],hasErrorState:[{onHasErrorStateChanged:0}],value:[{onValuePropChange:0}]}]);function $(){"undefined"!=typeof customElements&&["xpl-input-color","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time","xpl-popover"].forEach((t=>{switch(t){case"xpl-input-color":customElements.get(o(t))||customElements.define(o(t),E);break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k();break;case"xpl-popover":customElements.get(o(t))||u()}}))}const _=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.focusEvent=i(this,"focusEvent",7),this.blurEvent=i(this,"blurEvent",7),this.valueChange=i(this,"valueChange",7),this.inputEvent=i(this,"inputEvent",7),this.multiline=!1,this.dateFormat="Y-m-d",this.timeFormat="24h",this.allowCustomOption=!1,this.mode="single",this.accept="",this.multiple=!1,this.hideTriggerOnSelect=!1,this.hideFileNames=!1,this.hideAcceptText=!1,this.type="text",this.valueChanged=t=>{this.valueChange.emit(t.target.value)},this.characterCount=0,this.passwordVisible=!1,this.handleFocus=t=>{this.focusEvent.emit(t)},this.handleBlur=t=>{this.blurEvent.emit(t)},this.handleInput=t=>{this.multiline&&this.updateCharacterCount();const{value:e}=t.target;this.inputEvent.emit(e)}}updateCharacterCount(){this.characterCount=this.input.value.length}componentWillLoad(){null!=this._id&&""!==this._id||(this._id=m()),this.multiline&&void 0!==this.maxCharacterCount&&(this.characterCount=void 0!==this.value?this.value.length:0)}renderInput(){switch(this.type){case"file":return s("xpl-input-file",{accept:this.accept,disabled:this.disabled,hideAcceptText:this.hideAcceptText,hideFileNames:this.hideFileNames,hideTriggerOnSelect:this.hideTriggerOnSelect,multiple:this.multiple,name:this.name,_id:this._id},s("slot",{name:"trigger"}));case"color":return s("xpl-input-color",{disabled:this.disabled,value:this.value,placeholder:this.placeholder,required:this.required,hideEyeDropper:this.hideEyeDropper});case"date":return s("xpl-input-date",{inputId:this._id,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,value:this.value,placeholder:this.placeholder,post:this.post,pre:this.pre,max:this.max,min:this.min,dateFormat:this.dateFormat,mode:this.mode});case"time":return s("xpl-input-time",{inputId:this._id,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,value:this.value,placeholder:this.placeholder,max:this.max,min:this.min,step:this.step,mode:this.mode,timeFormat:this.timeFormat,allowCustomOption:this.allowCustomOption});default:return s("div",{class:"xpl-input-wrapper"},this.pre&&!this.multiline&&s("label",{class:"xpl-input-pre",htmlFor:this._id},this.pre),this.multiline?s("textarea",{disabled:this.disabled,id:this._id,name:this.name,placeholder:this.placeholder,readonly:this.readonly,ref:t=>{this.input=t},required:this.required,onChange:this.valueChanged,onFocus:this.handleFocus,onBlur:this.handleBlur,onInput:this.handleInput},this.value):s("input",{autocomplete:this.autocomplete,disabled:this.disabled,id:this._id,max:this.max,min:this.min,name:this.name,placeholder:this.placeholder,readonly:this.readonly,ref:t=>{this.input=t},required:this.required,step:this.step,type:this.type,value:this.value,onChange:this.valueChanged,onFocus:this.handleFocus,onBlur:this.handleBlur,onInput:this.handleInput}),"password"===this.type&&s("button",{"aria-label":"Toggle password visibility",class:"xpl-input-password",onClick:()=>{this.passwordVisible=!this.passwordVisible},role:"presentation"},s("xpl-icon",{icon:this.passwordVisible?"eye-closed":"eye",size:24})),this.post&&!this.multiline&&s("label",{class:"xpl-input-post",htmlFor:this._id},this.post),this.multiline&&void 0!==this.maxCharacterCount&&s("span",{class:"xpl-input-characters"},this.characterCount,"/",this.maxCharacterCount))}}render(){var t;let e=!1;return void 0!==this.error&&(e=!0),this.multiline&&void 0!==this.maxCharacterCount&&this.characterCount>this.maxCharacterCount&&(e=!0),s(a,{key:"4dca16ca0939ae6365edc9201e00ec6cf76aadfc",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":e,"xpl-input--readonly":this.readonly,[`xpl-input--${this.type}`]:!0}},this.label&&s("label",{key:"2abed2c330a6cb7fbad8274299a7012b09c22b03",class:"xpl-input-label",htmlFor:this._id},this.label,this.description&&s("small",{key:"4f310894b28354d9540aa73b4e87872632eb9c83"},this.description)),this.renderInput(),(null===(t=this.error)||void 0===t?void 0:t.length)>0&&s("label",{key:"ed5cd40feaa1d9d76d6b569c9b9c51da178d162d",class:"xpl-input-error",htmlFor:this._id},s("xpl-icon",{key:"2e5374ee3a0c5b18d3891a647b52853b0daa7b9c",icon:"alert-circle",size:16}),s("span",{key:"1a9aa0733831e709aa5923c9486049697e7ab20b"},this.error)))}},[260,"xpl-input",{_id:[1],description:[1],disabled:[4],error:[1],label:[1],name:[1],required:[4],readonly:[4],value:[1],autocomplete:[1],placeholder:[1],post:[1],pre:[1],max:[8],min:[8],step:[2],multiline:[4],maxCharacterCount:[2,"max-character-count"],dateFormat:[1,"date-format"],timeFormat:[1,"time-format"],allowCustomOption:[4,"allow-custom-option"],mode:[1],accept:[1],multiple:[4],hideTriggerOnSelect:[4,"hide-trigger-on-select"],hideFileNames:[4,"hide-file-names"],hideAcceptText:[4,"hide-accept-text"],hideEyeDropper:[4,"hide-eye-dropper"],type:[1],characterCount:[32],passwordVisible:[32]}]);function M(){"undefined"!=typeof customElements&&["xpl-input","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time","xpl-popover"].forEach((t=>{switch(t){case"xpl-input":customElements.get(o(t))||customElements.define(o(t),_);break;case"xpl-dropdown":customElements.get(o(t))||r();break;case"xpl-dropdown-group":customElements.get(o(t))||n();break;case"xpl-dropdown-heading":customElements.get(o(t))||l();break;case"xpl-dropdown-option":customElements.get(o(t))||h();break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k();break;case"xpl-popover":customElements.get(o(t))||u()}}))}export{_ as X,E as a,$ as b,w as c,M as d,k as e}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{d as r}from"./xpl-dropdown2.js";import{d as n}from"./xpl-dropdown-group2.js";import{d as l}from"./xpl-dropdown-heading2.js";import{d as h}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as c}from"./xpl-input-date2.js";import{d}from"./xpl-input-file2.js";import{d as u}from"./xpl-popover2.js";import{v as m}from"./v4.js";const b=(t,e,i)=>{const s=(i/=100)*(e/=100),a=s*(1-Math.abs(t/60%2-1)),o=i-s;let r=0,n=0,l=0;return t<60?(r=s,n=a,l=0):t<120?(r=a,n=s,l=0):t<180?(r=0,n=s,l=a):t<240?(r=0,n=a,l=s):t<300?(r=a,n=0,l=s):(r=s,n=0,l=a),{r:Math.round(255*(r+o)),g:Math.round(255*(n+o)),b:Math.round(255*(l+o))}},x=(t,e,i)=>[t,e,i].map((t=>t.toString(16).padStart(2,"0"))).join(""),f=t=>{var e,i;if(t.startsWith("#")){if(!/^#([a-fA-F\d]{6})$/.test(t))throw new Error("Only 6-digit hex format supported (e.g. #aabbcc)");const e=t.toLowerCase().slice(1),i=parseInt(e.slice(0,2),16),s=parseInt(e.slice(2,4),16),a=parseInt(e.slice(4,6),16);return{hex:e,r:i,g:s,b:a,a:1}}if(t.startsWith("rgba")||t.startsWith("rgb")){const i=null===(e=t.match(/[\d.]+/g))||void 0===e?void 0:e.map(Number);if(!i||i.length<3)throw new Error("Invalid rgba/rgb format");const[s,a,o,r=1]=i,n=t=>t.toString(16).padStart(2,"0");return{hex:`${n(s)}${n(a)}${n(o)}`.toLowerCase(),r:s,g:a,b:o,a:r}}if(t.startsWith("hsla")||t.startsWith("hsl")){const e=null===(i=t.match(/[\d.]+/g))||void 0===i?void 0:i.map(Number);if(!e||e.length<3)throw new Error("Invalid hsla/hsl format");const[s,a,o,r=1]=e,n=((t,e,i,s)=>{i/=100;const a=e=>(e+t/30)%12,o=(e/=100)*Math.min(i,1-i),r=t=>i-o*Math.max(-1,Math.min(a(t)-3,Math.min(9-a(t),1)));return`rgba(${Math.round(255*r(0))}, ${Math.round(255*r(8))}, ${Math.round(255*r(4))}, ${s})`})(s,a,o,r),[l,h,p]=n.match(/[\d.]+/g).map(Number);return{hex:x(l,h,p).toLowerCase(),r:l,g:h,b:p,a:r}}throw new Error("Unsupported color format")},g=t=>t.a&&1!==t.a?`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a})`:`#${t.hex}`;function v(t){const[e,i]=t.split(":"),s=Number(e)>=12?"PM":"AM";return[(Number(e)%12||12).toString(),i,s]}const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.valueChange=i(this,"valueChange",7),this.hasErrorStateChanged=i(this,"hasErrorStateChanged",7),this.max="23:59",this.min="00:00",this.step=30,this.mode="single",this.timeFormat="24h",this.allowCustomOption=!1,this.showOptions=!1,this.options=[],this.handleInput=t=>{var e;const i=null===(e=t.target.value)||void 0===e?void 0:e.replace(/[^0-9:apmAPM]/g,"");this.value=i},this.handleFocus=()=>{this.showOptions=!0},this.handleBlur=()=>{this.value=function(t){if(!t||""===t.trim()||0===t.replace(/[^0-9]/g,"").length)return null;let e=t.trim().toLowerCase();e=e.replace(/(\d)\s+(am|pm)/g,"$1$2"),/^\d{1,2}(am|pm)?$/.test(e)&&(e=e.replace(/(am|pm)?$/,":00$1")),/^\d{1,2}$/.test(e)&&(e=`${e}:00`),/^\d{1,2}:\d{1}$/.test(e)&&(e=`${e}0`);const[i,s]=e.split(":"),a=s.replace(/[^0-9]/g,""),o=e.includes("am");return e.includes("pm")||o?o?`${(Number(i)%12).toString().padStart(2,"0")}:${a}`:`${Number(i)%12+12}:${a}`:`${i.padStart(2,"0")}:${a}`}(this.value)},this.handleClick=()=>{this.showOptions=!0}}onValueChange(t){this.valueChange.emit(t),this.updateState(t)}updateState(t){this.formattedValue=this.formatDisplayedTime(t),this.amPm=this.formatDisplayedAmPm(t),this.validateValue()}formatDisplayedTime(t){if(!t)return"";if("12h"===this.timeFormat&&t.includes(":")){const[e,i]=v(t);return`${e}:${i}`}return t}formatDisplayedAmPm(t){if(!t||"12h"!==this.timeFormat)return"";const[,,e]=v(t);return e}validateValue(){this.hasErrorState=this.value?!this.value.includes(":")||this.value.trim().length<4||this.value.trim().length>5?"Invalid time format, must be HH:MM":this.value<this.min||this.value>this.max?"Out of range":this.allowCustomOption||this.options.some((t=>t.value===this.value))?null:"Invalid option":this.required?"required":null}onHasErrorStateChanged(t){this.hasErrorStateChanged.emit(t)}componentDidLoad(){var t;"range"===this.mode&&console.warn("Range mode is not supported for time inputs at this time."),null===(t=this.dropdown)||void 0===t||t.addEventListener("isOpenChange",(t=>{this.showOptions=t.detail}))}componentWillLoad(){this.options=this.getOptions(),this.value&&this.updateState(this.value)}getOptions(){return function(t,e,i,s){const a=t=>{const[e,i]=t.split(":").map(Number);return 60*e+i},o=a(e.toString()),r=a(i.toString()),n=[];for(let e=o;e<=r;e+=t)n.push((l=e,`${Math.floor(l/60).toString().padStart(2,"0")}:${(l%60).toString().padStart(2,"0")}`));var l;return n.map((t=>({label:"12h"===s?function(t){const[e,i,s]=v(t);return`${e}:${i} ${s}`}(t):t,value:t})))}(this.step,this.min.toString(),this.max.toString(),this.timeFormat).map((({label:t,value:e})=>({label:t,value:e,onClick:()=>{this.value=e,this.showOptions=!1}})))}render(){return s(a,{key:"99b06c895d608dec6226f79f21ceda92225428b7",class:{"xpl-input-time":!0,[`xpl-input-time--mode-${this.mode}`]:!0,"xpl-input-time--error":!!this.hasErrorState}},s("xpl-input",{key:"8cdf996f46d969c243d246fdfe888c22c9c4999b",pre:s("xpl-icon",{class:"xpl-input-time__clock-icon",icon:"clock",size:24}),post:"12h"===this.timeFormat?this.amPm||"AM":null,type:"text",_id:this.inputId,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,placeholder:this.placeholder,max:this.max,min:this.min,onInput:this.handleInput,value:this.formattedValue,onFocusEvent:this.handleFocus,onBlurEvent:this.handleBlur,onClick:this.handleClick}),!this.readonly&&!this.disabled&&s("xpl-dropdown",{key:"5213fcd68da96d726d8b046277233afd6b5b20e8",options:this.options,isOpen:this.showOptions,ref:t=>{this.dropdown=t},class:"xpl-input-time__dropdown"}))}static get watchers(){return{value:[{onValueChange:0}],hasErrorState:[{onHasErrorStateChanged:0}]}}},[0,"xpl-input-time",{inputId:[1,"input-id"],disabled:[4],name:[1],required:[4],readonly:[4],value:[1537],placeholder:[1],max:[8],min:[8],step:[2],mode:[1],timeFormat:[1,"time-format"],allowCustomOption:[4,"allow-custom-option"],formattedValue:[32],hasErrorState:[32],showOptions:[32],options:[32],amPm:[32]},void 0,{value:[{onValueChange:0}],hasErrorState:[{onHasErrorStateChanged:0}]}]);function k(){"undefined"!=typeof customElements&&["xpl-input-time","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time"].forEach((t=>{switch(t){case"xpl-input-time":customElements.get(o(t))||customElements.define(o(t),w);break;case"xpl-dropdown":customElements.get(o(t))||r();break;case"xpl-dropdown-group":customElements.get(o(t))||n();break;case"xpl-dropdown-heading":customElements.get(o(t))||l();break;case"xpl-dropdown-option":customElements.get(o(t))||h();break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k()}}))}const y={hex:"",r:0,g:0,b:0,a:1},E=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputChange=i(this,"inputChange",7),this.hasErrorStateChanged=i(this,"hasErrorStateChanged",7),this.placeholder="Select color",this.eyeDropperSupported="EyeDropper"in window,this.colorInputElements={hex:null,r:null,g:null,b:null,a:null,hue:null,slGrid:null,alpha:null},this.handleMove=t=>{const e=this.colorInputElements.slGrid.getBoundingClientRect(),i="touches"in t?t.touches[0].clientY:t.clientY,s=Math.max(0,Math.min(("touches"in t?t.touches[0].clientX:t.clientX)-e.left,e.width)),a=Math.max(0,Math.min(i-e.top,e.height)),o=s/e.width,r=a/e.height,n=b(this.hue,100,100),l=(255*(1-o)+o*n.r)*(1-r),h=(255*(1-o)+o*n.g)*(1-r),p=(255*(1-o)+o*n.b)*(1-r),c={r:Math.round(l),g:Math.round(h),b:Math.round(p),hex:x(Math.round(l),Math.round(h),Math.round(p)),a:this.colorValues.a};this.colorValues=c},this.startDrag=t=>{t.preventDefault(),this.handleMove(t),window.addEventListener("mousemove",this.handleMove),window.addEventListener("mouseup",this.stopDrag),window.addEventListener("touchmove",this.handleMove),window.addEventListener("touchend",this.stopDrag)},this.stopDrag=()=>{window.removeEventListener("mousemove",this.handleMove),window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("touchmove",this.handleMove),window.removeEventListener("touchend",this.stopDrag)},this.onHexInputChange=t=>{var e;const i=t.detail;if(i){const[t,s,a]=(t=>t?t.match(/\w\w/g).map((t=>parseInt(t,16))):[0,0,0])(i);this.colorValues={hex:i,r:t,g:s,b:a,a:null!==(e=this.colorValues.a)&&void 0!==e?e:1}}else this.colorValues=Object.assign({},y)},this.onRgbaInputChange=(t,e)=>{const i=parseFloat(e.detail);if(Number.isNaN(i))return void(this.hasErrorState=`invalid value from ${t.name}: ${i}`);const s=Object.assign({},this.colorValues);switch(t.name){case"color-r-input":s.r=i;break;case"color-g-input":s.g=i;break;case"color-b-input":s.b=i;break;case"color-a-input":s.a=i;break;default:this.hasErrorState=`unhandled input: ${t.name}`}s.hex=x(s.r,s.g,s.b),this.colorValues=s},this.onSliderInputChange=t=>{const e=parseFloat(t.value);if(Number.isNaN(e))this.hasErrorState=`invalid value from ${t.name}: ${e}`;else switch(t.name){case"color-hue-slider":this.colorValues=f(`hsla(${e}, 100%, 50%, 1)`),this.hue=e;break;case"color-alpha-slider":this.colorValues=Object.assign(Object.assign({},this.colorValues),{a:e});break;default:this.hasErrorState=`unhandled input: ${t.name}`}}}valueChanged(t){this.hasErrorState=this.required&&!t.hex?"required":null,this.inputChange.emit(t.hex?g(t):"")}onHasErrorStateChanged(t){this.hasErrorStateChanged.emit(t)}onValuePropChange(t){this.syncColorFromValue(t)}syncColorFromValue(t){if(t)try{this.colorValues=f(t),this.hue=(()=>{const t=this.colorValues.r/255,e=this.colorValues.g/255,i=this.colorValues.b/255,s=Math.max(t,e,i),a=Math.min(t,e,i),o=s-a;let r=0,n=0;const l=(s+a)/2;if(0!==o){switch(n=o/(1-Math.abs(2*l-1)),s){case t:r=(e-i)/o%6;break;case e:r=(i-t)/o+2;break;case i:r=(t-e)/o+4}r*=60,r<0&&(r+=360)}return{hue:Math.round(r),saturation:Math.round(100*n),lightness:Math.round(100*l)}})().hue}catch(t){this.hasErrorState="invalid color format",this.hue=0}else this.colorValues=Object.assign({},y),this.hasErrorState=null,this.hue=0}componentWillLoad(){this.syncColorFromValue(this.value)}componentDidLoad(){const{r:t,g:e,b:i,a:s,hue:a,alpha:o,hex:r}=this.colorInputElements;r.addEventListener("valueChange",(t=>{this.onHexInputChange(t)})),[t,e,i,s].forEach((t=>{t.addEventListener("valueChange",(e=>{this.onRgbaInputChange(t,e)}))})),[a,o].forEach((t=>{t.addEventListener("input",(()=>{this.onSliderInputChange(t)}))}))}async openEyeDropper(){try{const t=new window.EyeDropper,e=await t.open();this.colorValues=f(e.sRGBHex)}catch(t){this.hasErrorState=`eyedropper cancelled or failed: ${t}`}}render(){const{r:t,g:e,b:i,a:o}=this.colorValues,r=b(this.hue,100,100),{x:n,y:l}=((t,e,i,s)=>{const{s:a,v:o}=((t,e,i,s)=>{t/=255,e/=255,i/=255;const a=Math.max(t,e,i),o=a-Math.min(t,e,i);let r=0;return r=0===o?0:a===t?(e-i)/o%6:a===e?(i-t)/o+2:(t-e)/o+4,r=Math.round(60*r),r<0&&(r+=360),{h:null!=s?s:r,s:0===a?0:o/a,v:a}})(e.r,e.g,e.b,t);return{x:Math.round(a*i),y:Math.round((1-o)*s)}})(this.hue,{r:t,g:e,b:i},288,160),h={left:`${n}px`,top:`${l}px`,background:`rgb(${t}, ${e}, ${i})`};return s(a,{key:"89789ef1ae21c4c555f67fd1a09159765eb1ef9e",class:"xpl-input-color"},s("xpl-popover",{key:"2eececd5d3592e0111bc507892eb7f7cd8bad8e6",disabled:this.disabled,display:"menu"},s("div",{key:"56d4a7bb25c3cdeb09d38d2fa986fe7595c453c0",slot:"trigger"},s("div",{key:"e49c0143d634a99cc547ead6af263716a28dd9ff",class:{"xpl-input-color__display":!0,"xpl-input-color__display--disabled":this.disabled,"xpl-input-color__display--error":!!this.hasErrorState}},s("span",{key:"e65efc371fab736e640f375446c22340f801b8a2",class:"xpl-input-color__color",style:{background:g(this.colorValues)}}),this.colorValues.hex?s("span",{class:"xpl-input-color__value"},g(this.colorValues)):s("span",{class:"xpl-input-color__placeholder"},this.placeholder),this.eyeDropperSupported&&!this.hideEyeDropper&&s("xpl-icon",{key:"b71aa6dd82c16ac328da186920e04b2992341317",size:20,icon:"eye-dropper",class:"xpl-input-color__icon",onClick:t=>{t.stopPropagation(),this.openEyeDropper()}}))),s("div",{key:"8e6add90e733d299cea94559dcbc29dd4e64d9cd",class:"xpl-input-color__menu"},s("div",{key:"a488c9b7ef3ff0cabbbb4bf5a631f209034a2539",class:"xpl-input-color__sl-grid",ref:t=>{this.colorInputElements.slGrid=t},style:{background:["linear-gradient(to top, #000, #0000)","linear-gradient(to right, #fff, #fff0)",`rgb(${r.r} ${r.g} ${r.b})`].join(", ")},onMouseDown:this.startDrag,onTouchStart:this.startDrag},s("div",{key:"542a5cafd651e6b49f813f6eecb46088b0b6f97c",class:"xpl-input-color__sl-thumb",style:h})),s("div",{key:"fd3268874bb0c0bc22c2d2db15dd50c38d3ae70a",class:"xpl-input-color__grid"},s("input",{key:"08ea52b5c2bbc2800b2ad5cca6981813e4578ce5",type:"range",min:"0",max:"360",value:this.hue,class:"xpl-input-color__slider xpl-input-color__hue",name:"color-hue-slider",ref:t=>{this.colorInputElements.hue=t}}),s("input",{key:"1692e362cb1e48446f33e2f82c5988546ad6a6f0",type:"range",min:"0",max:"1",step:"0.01",value:o,class:"xpl-input-color__slider xpl-input-color__alpha",name:"color-alpha-slider",ref:t=>{this.colorInputElements.alpha=t},style:{backgroundImage:[`linear-gradient(to right, rgb(${t} ${e} ${i} / 0) 0%, rgb(${t} ${e} ${i} / 1) 100%)`,"linear-gradient(45deg, #ccc 25%, transparent 25%)","linear-gradient(-45deg, #ccc 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #ccc 75%)","linear-gradient(-45deg, transparent 75%, #ccc 75%)"].join(", ")}}),s("div",{key:"5de3d1979fbb4c4a2892961fcbd7e6fc2d2723b4",class:"xpl-input-color__preview",style:{background:`rgba(${t}, ${e}, ${i}, ${o})`}})),s("div",{key:"3a660bdbb902bc8bfddb8c423f2462404b0221b8",class:"xpl-input-color__inputs"},Object.entries(this.colorInputElements).filter((([t])=>["hex","r","g","b","a"].includes(t))).map((([t])=>s("xpl-input",{key:t,label:t.toLocaleUpperCase(),name:`color-${t}-input`,placeholder:"hex"===t?"793EF7":"0",value:this.colorValues[t],ref:e=>{this.colorInputElements[t]=e}})))))))}static get watchers(){return{colorValues:[{valueChanged:0}],hasErrorState:[{onHasErrorStateChanged:0}],value:[{onValuePropChange:0}]}}},[0,"xpl-input-color",{value:[1],placeholder:[1],disabled:[4],required:[4],hideEyeDropper:[4,"hide-eye-dropper"],hasErrorState:[32],colorValues:[32],eyeDropperSupported:[32],hue:[32]},void 0,{colorValues:[{valueChanged:0}],hasErrorState:[{onHasErrorStateChanged:0}],value:[{onValuePropChange:0}]}]);function $(){"undefined"!=typeof customElements&&["xpl-input-color","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time","xpl-popover"].forEach((t=>{switch(t){case"xpl-input-color":customElements.get(o(t))||customElements.define(o(t),E);break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k();break;case"xpl-popover":customElements.get(o(t))||u()}}))}const _=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.focusEvent=i(this,"focusEvent",7),this.blurEvent=i(this,"blurEvent",7),this.valueChange=i(this,"valueChange",7),this.inputEvent=i(this,"inputEvent",7),this.multiline=!1,this.dateFormat="Y-m-d",this.timeFormat="24h",this.allowCustomOption=!1,this.mode="single",this.accept="",this.multiple=!1,this.hideTriggerOnSelect=!1,this.hideFileNames=!1,this.hideAcceptText=!1,this.type="text",this.valueChanged=t=>{this.valueChange.emit(t.target.value)},this.characterCount=0,this.passwordVisible=!1,this.handleFocus=t=>{this.focusEvent.emit(t)},this.handleBlur=t=>{this.blurEvent.emit(t)},this.handleInput=t=>{this.multiline&&this.updateCharacterCount();const{value:e}=t.target;this.inputEvent.emit(e)}}updateCharacterCount(){this.characterCount=this.input.value.length}componentWillLoad(){null!=this._id&&""!==this._id||(this._id=m()),this.multiline&&void 0!==this.maxCharacterCount&&(this.characterCount=void 0!==this.value?this.value.length:0)}renderInput(){switch(this.type){case"file":return s("xpl-input-file",{accept:this.accept,disabled:this.disabled,hideAcceptText:this.hideAcceptText,hideFileNames:this.hideFileNames,hideTriggerOnSelect:this.hideTriggerOnSelect,multiple:this.multiple,name:this.name,_id:this._id},s("slot",{name:"trigger"}));case"color":return s("xpl-input-color",{disabled:this.disabled,value:this.value,placeholder:this.placeholder,required:this.required,hideEyeDropper:this.hideEyeDropper});case"date":return s("xpl-input-date",{inputId:this._id,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,value:this.value,placeholder:this.placeholder,post:this.post,pre:this.pre,max:this.max,min:this.min,dateFormat:this.dateFormat,mode:this.mode});case"time":return s("xpl-input-time",{inputId:this._id,disabled:this.disabled,name:this.name,required:this.required,readonly:this.readonly,value:this.value,placeholder:this.placeholder,max:this.max,min:this.min,step:this.step,mode:this.mode,timeFormat:this.timeFormat,allowCustomOption:this.allowCustomOption});default:return s("div",{class:"xpl-input-wrapper"},this.pre&&!this.multiline&&s("label",{class:"xpl-input-pre",htmlFor:this._id},this.pre),this.multiline?s("textarea",{disabled:this.disabled,id:this._id,name:this.name,placeholder:this.placeholder,readonly:this.readonly,ref:t=>{this.input=t},required:this.required,onChange:this.valueChanged,onFocus:this.handleFocus,onBlur:this.handleBlur,onInput:this.handleInput},this.value):s("input",{autocomplete:this.autocomplete,disabled:this.disabled,id:this._id,max:this.max,min:this.min,name:this.name,placeholder:this.placeholder,readonly:this.readonly,ref:t=>{this.input=t},required:this.required,step:this.step,type:this.type,value:this.value,onChange:this.valueChanged,onFocus:this.handleFocus,onBlur:this.handleBlur,onInput:this.handleInput}),"password"===this.type&&s("button",{"aria-label":"Toggle password visibility",class:"xpl-input-password",onClick:()=>{this.passwordVisible=!this.passwordVisible},role:"presentation"},s("xpl-icon",{icon:this.passwordVisible?"eye-closed":"eye",size:24})),this.post&&!this.multiline&&s("label",{class:"xpl-input-post",htmlFor:this._id},this.post),this.multiline&&void 0!==this.maxCharacterCount&&s("span",{class:"xpl-input-characters"},this.characterCount,"/",this.maxCharacterCount))}}render(){var t;let e=!1;return(this.error||this.multiline&&void 0!==this.maxCharacterCount&&this.characterCount>this.maxCharacterCount)&&(e=!0),s(a,{key:"c682985a3d592f9f9902a16013a5d00f40ce5e44",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":e,"xpl-input--readonly":this.readonly,[`xpl-input--${this.type}`]:!0}},this.label&&s("label",{key:"21d863221e85a255f3dc5e662139b7abc0e72907",class:"xpl-input-label",htmlFor:this._id},this.label,this.description&&s("small",{key:"25d078a667c8b9cbf4d1b5d1f412c3d0e736013a"},this.description)),this.renderInput(),(null===(t=this.error)||void 0===t?void 0:t.length)>0&&s("label",{key:"7e13c1fc18496bdf50cdb2a239c113c182b83f18",class:"xpl-input-error",htmlFor:this._id},s("xpl-icon",{key:"900d641cfcd94d9f6cc85ba34e1e211448c203df",icon:"alert-circle",size:16}),s("span",{key:"74f7868861f5c262038bee3de2faeecc46b2454d"},this.error)))}},[260,"xpl-input",{_id:[1],description:[1],disabled:[4],error:[1],label:[1],name:[1],required:[4],readonly:[4],value:[1],autocomplete:[1],placeholder:[1],post:[1],pre:[1],max:[8],min:[8],step:[2],multiline:[4],maxCharacterCount:[2,"max-character-count"],dateFormat:[1,"date-format"],timeFormat:[1,"time-format"],allowCustomOption:[4,"allow-custom-option"],mode:[1],accept:[1],multiple:[4],hideTriggerOnSelect:[4,"hide-trigger-on-select"],hideFileNames:[4,"hide-file-names"],hideAcceptText:[4,"hide-accept-text"],hideEyeDropper:[4,"hide-eye-dropper"],type:[1],characterCount:[32],passwordVisible:[32]}]);function M(){"undefined"!=typeof customElements&&["xpl-input","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-input","xpl-input-color","xpl-input-date","xpl-input-file","xpl-input-time","xpl-popover"].forEach((t=>{switch(t){case"xpl-input":customElements.get(o(t))||customElements.define(o(t),_);break;case"xpl-dropdown":customElements.get(o(t))||r();break;case"xpl-dropdown-group":customElements.get(o(t))||n();break;case"xpl-dropdown-heading":customElements.get(o(t))||l();break;case"xpl-dropdown-option":customElements.get(o(t))||h();break;case"xpl-icon":customElements.get(o(t))||p();break;case"xpl-input":customElements.get(o(t))||M();break;case"xpl-input-color":customElements.get(o(t))||$();break;case"xpl-input-date":customElements.get(o(t))||c();break;case"xpl-input-file":customElements.get(o(t))||d();break;case"xpl-input-time":customElements.get(o(t))||k();break;case"xpl-popover":customElements.get(o(t))||u()}}))}export{_ as X,E as a,$ as b,w as c,M as d,k as e}

package/dist/components/xpl-select2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as l,Fragment as o,transformTag as n}from"@stencil/core/internal/client";import{t as a}from"./index3.js";import{d as h}from"./xpl-dropdown2.js";import{d}from"./xpl-dropdown-group2.js";import{d as c}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as u}from"./xpl-tag2.js";import{v}from"./v4.js";function m(e){return e.label||e.value}function b(e){return e.reduce(((e,t)=>[...e,...t.groupName?t.options:[t]]),[])}const g=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectChange=s(this,"selectChange",7),this.changeEvent=s(this,"changeEvent",7),this.dropdownStateChange=s(this,"dropdownStateChange",7),this.triggerDropdown=s(this,"triggerDropdown",7),this.choices=[],this.selectIcon="chevron-down",this.mode="single",this.truncate=!0,this.active=!1,this.id=v(),this.keepFocus=!1,this.visibleChoices=1/0,this.choicesState=[],this.value=this.calculateValue(),this.dropdownOpenState=!1,this.container=null,this.dropdown=null,this.handleResizeThrottled=a((()=>{this.maybeTruncateChoices()}),250),this.handleTabKeyDown=e=>{"Tab"===e.key&&(this.keepFocus=!0)},this.handleTagRemove=e=>{const t=t=>(null==e?void 0:e.value)&&t.value===e.value||(null==e?void 0:e.label)&&t.label===e.label;this.choicesState=this.choicesState.map((e=>{var s;return Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected,options:null===(s=e.options)||void 0===s?void 0:s.map((e=>Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected})))})}))},this.handleDropdownScroll=e=>{const{scrollTop:t,scrollHeight:s,clientHeight:i}=this.dropdown.querySelector(".xpl-dropdown-list");(0===t&&e.deltaY<0||t+i>=s&&e.deltaY>0)&&e.preventDefault()}}onChoicesPropChanged(e){this.choicesState=this.initializeChoicesState()}onSelectedValuesPropChanged(){this.choicesState=this.initializeChoicesState()}onChoicesStateChanged(){this.update()}handleValueStateChange(e){this.selectChange.emit(e),this.changeEvent.emit("single"===this.mode?e:(null==e?void 0:e.length)?e.split("|"):[]),this.customDisplayValue&&null!==this.container&&(this.container.querySelectorAll(".custom-display-value").forEach((t=>{t.classList.toggle("display-active",e.length>0),t.classList.toggle("display-inactive",0===e.length)})),this.container.querySelectorAll(".placeholder").forEach((t=>{t.classList.toggle("placeholder-hidden",e.length>0)})))}onDropdownOpenStateChanged(e){this.dropdownStateChange.emit(e)}initializeChoicesState(){return this.choices.map((e=>{var t;const s="string"==typeof this.selectedValues?[this.selectedValues]:this.selectedValues;return Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label)),options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label))})))})}))}maybeTruncateChoices(){var e,t;if("single"===this.mode||!this.truncate)return;const s=null===(e=this.container)||void 0===e?void 0:e.getBoundingClientRect().width;let i=0,l=0;const o=null===(t=b(this.choicesState))||void 0===t?void 0:t.filter((e=>e.isSelected));if(!o.length)return;const n=o.length;o.forEach(((e,t)=>(l+=function(e){const t=document.createElement("canvas").getContext("2d");return t.font="14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",t.measureText(e).width+44}(m(o[t])),l>s-140||(i+=1),null))),i>=n&&(i=1/0),i<1&&(i=1),this.visibleChoices=i}closeDropdown(){var e;(null===(e=this.dropdown)||void 0===e?void 0:e.isOpen)&&(this.dropdown.isOpen=!1,this.active=!1)}calculateValue(){const e=b(this.choicesState).filter((e=>e.isSelected));return e.length?"single"===this.mode?e[0].value||e[0].label:e.map((e=>e.value||e.label)).join("|"):""}update(){this.value=this.calculateValue(),this.maybeTruncateChoices()}renderLabel(){return this.label||this.description?i("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.label,this.description&&i("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)):null}renderSelectedTags(){let e=0;const t=b(this.choicesState).filter((e=>e.isSelected));return t.length?t.map(((s,l)=>e>=this.visibleChoices?null:(e+=1,i("xpl-tag",{onClose:()=>this.handleTagRemove(t[l])},m(t[l]))))):null}renderError(){return void 0===this.error||0===this.error.length?null:i("label",{class:"xpl-input-error",htmlFor:this.id},i("xpl-icon",{icon:"alert-circle"}),this.error)}componentWillLoad(){this.choicesState=this.initializeChoicesState()}handleClickEvent(e){const t=e.target.closest(".xpl-select");null!==t&&t===this.container||this.closeDropdown()}handleKeyDown(e){var t;"Escape"===e.key&&(this.active||(null===(t=this.container)||void 0===t?void 0:t.contains(document.activeElement)))&&this.closeDropdown()}handleResize(){this.handleResizeThrottled()}componentDidLoad(){requestAnimationFrame((()=>{this.maybeTruncateChoices()}))}disconnectedCallback(){var e;null===(e=this.handleResizeThrottled)||void 0===e||e.cancel()}handleDropdownTrigger(){var e;const t=null!==(e=this.dropdown.isOpen)&&void 0!==e&&e,s=!t;this.triggerDropdown.emit({prevState:t,nextState:s}).defaultPrevented||this.disabled||(this.dropdownOpenState=s,this.dropdown.isOpen=s)}async reset(){this.closeDropdown(),this.choicesState=this.choicesState.map((e=>{var t;return Object.assign(Object.assign({},e),{isSelected:!1,options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:!1})))})}))}render(){var e,t,s;const n=b(this.choicesState).filter((e=>e.isSelected)),a=(null===(e=n[0])||void 0===e?void 0:e.label)||(null===(t=n[0])||void 0===t?void 0:t.value),h=n.length>1&&this.visibleChoices<1/0&&this.truncate&&!this.customDisplayValue,d=`+ ${Math.abs(this.choicesState.filter((e=>e.isSelected)).length-this.visibleChoices)} more`;return i(l,{key:"8ffd6b069df2b869abfa22ae5e41731a992abe36",class:{"xpl-select":!0,"xpl-select--disabled":this.disabled,"xpl-select--no-truncate":!this.truncate,[null!==(s=this.classNames)&&void 0!==s?s:""]:!!this.classNames},onKeyDown:this.handleTabKeyDown,ref:e=>{this.container=e}},this.renderLabel(),i("div",{key:"ed959919397c5c2ffc063957188e00a10feeed9a",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":void 0!==this.error}},i("div",{key:"266e7d99a66d66241ebe1d20375d0a270b8b6399",class:"xpl-input-wrapper"},i("button",{key:"cdb455539afb77ab76f729e8a21419d32c220a75",class:"xpl-select__trigger",disabled:this.disabled,id:this.id,onKeyDown:this.handleTabKeyDown,onClick:e=>{e.preventDefault(),this.handleDropdownTrigger()},type:"button"},i("div",{key:"db9e85fa588af2c35d3de960826c171bc02627af",class:{"xpl-select-value":!0,"xpl-select-value--active":"multi"===this.mode&&this.value.length>0,"has-value":this.value.length>0}},(()=>this.customDisplayValue?i(o,null,i("div",{class:{"custom-display-value":!0,"custom-display-value--inactive":0===this.value.length}},i("slot",{name:"custom-display-value"})),i("span",{class:{"xpl-placeholder--hidden":this.value.length>0}},this.placeholder)):"single"===this.mode?a||this.placeholder:this.value.length>0?this.renderSelectedTags():this.placeholder)(),h&&d),i("xpl-icon",{key:"ef3997f19a4e4bb4de12f826c736ef9afc4bd5c8",class:"xpl-select__chevron-down",icon:this.selectIcon}))),!this.disabled&&i("xpl-dropdown",{key:"df29a0a21c11fa4c9a550a4339c6719793783404",ref:e=>{this.dropdown=e},isOpen:this.dropdownOpenState,options:this.choicesState,selectedValues:this.selectedValues,mode:this.mode,triggerId:this.id,update:(e,{component:t})=>{const{options:s}=t;s&&s.length>0&&(this.choicesState=s)},onIsOpenChange:e=>{this.dropdownOpenState=e.detail},onWheel:this.handleDropdownScroll,anchorToTrigger:!0}),this.renderError()),i("input",{key:"3e7f53a0d8e6d4e8028e1dc38d0e3661b76978f5",type:"hidden",name:this.name,value:this.value}))}static get watchers(){return{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}}},[260,"xpl-select",{choices:[16],selectIcon:[1,"select-icon"],description:[1],disabled:[4],error:[1],label:[1],mode:[1],name:[1],placeholder:[1],truncate:[4],customDisplayValue:[4,"custom-display-value"],selectedValues:[1,"selected-values"],classNames:[1,"class-names"],active:[32],id:[32],keepFocus:[32],visibleChoices:[32],choicesState:[32],value:[32],dropdownOpenState:[32],reset:[64]},[[8,"click","handleClickEvent"],[8,"keydown","handleKeyDown"],[9,"resize","handleResize"]],{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}]);function x(){"undefined"!=typeof customElements&&["xpl-select","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-tag"].forEach((e=>{switch(e){case"xpl-select":customElements.get(n(e))||customElements.define(n(e),g);break;case"xpl-dropdown":customElements.get(n(e))||h();break;case"xpl-dropdown-group":customElements.get(n(e))||d();break;case"xpl-dropdown-heading":customElements.get(n(e))||c();break;case"xpl-dropdown-option":customElements.get(n(e))||r();break;case"xpl-icon":customElements.get(n(e))||p();break;case"xpl-tag":customElements.get(n(e))||u()}}))}export{g as X,x as d}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as l,Fragment as o,transformTag as n}from"@stencil/core/internal/client";import{t as a}from"./index3.js";import{d as h}from"./xpl-dropdown2.js";import{d as c}from"./xpl-dropdown-group2.js";import{d}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as u}from"./xpl-tag2.js";import{v}from"./v4.js";function b(e){return e.label||e.value}function m(e){return e.reduce(((e,t)=>[...e,...t.groupName?t.options:[t]]),[])}const g=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectChange=s(this,"selectChange",7),this.changeEvent=s(this,"changeEvent",7),this.dropdownStateChange=s(this,"dropdownStateChange",7),this.triggerDropdown=s(this,"triggerDropdown",7),this.choices=[],this.selectIcon="chevron-down",this.mode="single",this.truncate=!0,this.active=!1,this.id=v(),this.keepFocus=!1,this.visibleChoices=1/0,this.choicesState=[],this.value=this.calculateValue(),this.dropdownOpenState=!1,this.container=null,this.dropdown=null,this.handleResizeThrottled=a((()=>{this.maybeTruncateChoices()}),250),this.handleTabKeyDown=e=>{"Tab"===e.key&&(this.keepFocus=!0)},this.handleTagRemove=e=>{const t=t=>(null==e?void 0:e.value)&&t.value===e.value||(null==e?void 0:e.label)&&t.label===e.label;this.choicesState=this.choicesState.map((e=>{var s;return Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected,options:null===(s=e.options)||void 0===s?void 0:s.map((e=>Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected})))})}))},this.handleDropdownScroll=e=>{const{scrollTop:t,scrollHeight:s,clientHeight:i}=this.dropdown.querySelector(".xpl-dropdown-list");(0===t&&e.deltaY<0||t+i>=s&&e.deltaY>0)&&e.preventDefault()}}onChoicesPropChanged(e){this.choicesState=this.initializeChoicesState()}onSelectedValuesPropChanged(){this.choicesState=this.initializeChoicesState()}onChoicesStateChanged(){this.update()}handleValueStateChange(e){this.selectChange.emit(e),this.changeEvent.emit("single"===this.mode?e:(null==e?void 0:e.length)?e.split("|"):[]),this.customDisplayValue&&null!==this.container&&(this.container.querySelectorAll(".custom-display-value").forEach((t=>{t.classList.toggle("display-active",e.length>0),t.classList.toggle("display-inactive",0===e.length)})),this.container.querySelectorAll(".placeholder").forEach((t=>{t.classList.toggle("placeholder-hidden",e.length>0)})))}onDropdownOpenStateChanged(e){this.dropdownStateChange.emit(e)}initializeChoicesState(){return this.choices.map((e=>{var t;const s="string"==typeof this.selectedValues?[this.selectedValues]:this.selectedValues;return Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label)),options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label))})))})}))}maybeTruncateChoices(){var e,t;if("single"===this.mode||!this.truncate)return;const s=null===(e=this.container)||void 0===e?void 0:e.getBoundingClientRect().width;let i=0,l=0;const o=null===(t=m(this.choicesState))||void 0===t?void 0:t.filter((e=>e.isSelected));if(!o.length)return;const n=o.length;o.forEach(((e,t)=>(l+=function(e){const t=document.createElement("canvas").getContext("2d");return t.font="14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",t.measureText(e).width+44}(b(o[t])),l>s-140||(i+=1),null))),i>=n&&(i=1/0),i<1&&(i=1),this.visibleChoices=i}closeDropdown(){var e;(null===(e=this.dropdown)||void 0===e?void 0:e.isOpen)&&(this.dropdown.isOpen=!1,this.active=!1)}calculateValue(){const e=m(this.choicesState).filter((e=>e.isSelected));return e.length?"single"===this.mode?e[0].value||e[0].label:e.map((e=>e.value||e.label)).join("|"):""}update(){this.value=this.calculateValue(),this.maybeTruncateChoices()}renderLabel(){return this.label||this.description?i("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.label,this.description&&i("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)):null}renderSelectedTags(){let e=0;const t=m(this.choicesState).filter((e=>e.isSelected));return t.length?t.map(((s,l)=>e>=this.visibleChoices?null:(e+=1,i("xpl-tag",{onClose:()=>this.handleTagRemove(t[l])},b(t[l]))))):null}renderError(){return this.error?i("label",{class:"xpl-input-error",htmlFor:this.id},i("xpl-icon",{icon:"alert-circle"}),this.error):null}componentWillLoad(){this.choicesState=this.initializeChoicesState()}handleClickEvent(e){const t=e.target.closest(".xpl-select");null!==t&&t===this.container||this.closeDropdown()}handleKeyDown(e){var t;"Escape"===e.key&&(this.active||(null===(t=this.container)||void 0===t?void 0:t.contains(document.activeElement)))&&this.closeDropdown()}handleResize(){this.handleResizeThrottled()}componentDidLoad(){requestAnimationFrame((()=>{this.maybeTruncateChoices()}))}disconnectedCallback(){var e;null===(e=this.handleResizeThrottled)||void 0===e||e.cancel()}handleDropdownTrigger(){var e;const t=null!==(e=this.dropdown.isOpen)&&void 0!==e&&e,s=!t;this.triggerDropdown.emit({prevState:t,nextState:s}).defaultPrevented||this.disabled||(this.dropdownOpenState=s,this.dropdown.isOpen=s)}async reset(){this.closeDropdown(),this.choicesState=this.choicesState.map((e=>{var t;return Object.assign(Object.assign({},e),{isSelected:!1,options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:!1})))})}))}render(){var e,t,s,n;const a=m(this.choicesState).filter((e=>e.isSelected)),h=(null===(e=a[0])||void 0===e?void 0:e.label)||(null===(t=a[0])||void 0===t?void 0:t.value),c=a.length>1&&this.visibleChoices<1/0&&this.truncate&&!this.customDisplayValue,d=`+ ${Math.abs(this.choicesState.filter((e=>e.isSelected)).length-this.visibleChoices)} more`;return i(l,{key:"90390e373035b7915dd5ca7c6bcbb5269b3059ea",class:{"xpl-select":!0,"xpl-select--disabled":this.disabled,"xpl-select--no-truncate":!this.truncate,[null!==(s=this.classNames)&&void 0!==s?s:""]:!!this.classNames},onKeyDown:this.handleTabKeyDown,ref:e=>{this.container=e}},this.renderLabel(),i("div",{key:"399f1b864db799c42fa973ae3907e22c2cd95098",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":(null===(n=this.error)||void 0===n?void 0:n.length)>=0}},i("div",{key:"4e9842f8a6ff0916af58dd4a6bc9dbb330d79a29",class:"xpl-input-wrapper"},i("button",{key:"a5719a38fdd7b3819cb1d68f887260f3eaf41c5e",class:"xpl-select__trigger",disabled:this.disabled,id:this.id,onKeyDown:this.handleTabKeyDown,onClick:e=>{e.preventDefault(),this.handleDropdownTrigger()},type:"button"},i("div",{key:"7c0d8f94dc5b6afe38b1ab0b4a1cb1572255d640",class:{"xpl-select-value":!0,"xpl-select-value--active":"multi"===this.mode&&this.value.length>0,"has-value":this.value.length>0}},(()=>this.customDisplayValue?i(o,null,i("div",{class:{"custom-display-value":!0,"custom-display-value--inactive":0===this.value.length}},i("slot",{name:"custom-display-value"})),i("span",{class:{"xpl-placeholder--hidden":this.value.length>0}},this.placeholder)):"single"===this.mode?h||this.placeholder:this.value.length>0?this.renderSelectedTags():this.placeholder)(),c&&d),i("xpl-icon",{key:"8002d17b99c8b53d47ed3a3139c4a18bcce7baba",class:"xpl-select__chevron-down",icon:this.selectIcon}))),!this.disabled&&i("xpl-dropdown",{key:"87bbe302cbf364c6e3592699e93eb03523e16833",ref:e=>{this.dropdown=e},isOpen:this.dropdownOpenState,options:this.choicesState,selectedValues:this.selectedValues,mode:this.mode,triggerId:this.id,update:(e,{component:t})=>{const{options:s}=t;s&&s.length>0&&(this.choicesState=s)},onIsOpenChange:e=>{this.dropdownOpenState=e.detail},onWheel:this.handleDropdownScroll,anchorToTrigger:!0}),this.renderError()),i("input",{key:"3ef234a4953e9133c3817ba14d0336c0cb8de8f9",type:"hidden",name:this.name,value:this.value}))}static get watchers(){return{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}}},[260,"xpl-select",{choices:[16],selectIcon:[1,"select-icon"],description:[1],disabled:[4],error:[1],label:[1],mode:[1],name:[1],placeholder:[1],truncate:[4],customDisplayValue:[4,"custom-display-value"],selectedValues:[1,"selected-values"],classNames:[1,"class-names"],active:[32],id:[32],keepFocus:[32],visibleChoices:[32],choicesState:[32],value:[32],dropdownOpenState:[32],reset:[64]},[[8,"click","handleClickEvent"],[8,"keydown","handleKeyDown"],[9,"resize","handleResize"]],{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}]);function x(){"undefined"!=typeof customElements&&["xpl-select","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-tag"].forEach((e=>{switch(e){case"xpl-select":customElements.get(n(e))||customElements.define(n(e),g);break;case"xpl-dropdown":customElements.get(n(e))||h();break;case"xpl-dropdown-group":customElements.get(n(e))||c();break;case"xpl-dropdown-heading":customElements.get(n(e))||d();break;case"xpl-dropdown-option":customElements.get(n(e))||r();break;case"xpl-icon":customElements.get(n(e))||p();break;case"xpl-tag":customElements.get(n(e))||u()}}))}export{g as X,x as d}

package/dist/docs/xpl-accordion/readme.md

@@ -0,0 +1,62 @@
+# xpl-accordion
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute          | Description                                                                                                                                                                                                            | Type                                     | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| `borderType`      | `border-type`      | set the border of the accordion  none: there’s no border wrapping the header  bottom:there’s a border below the header  bordered: the header is wrapped by a white panel with a rounded border around it on every side | `"" \| "bordered" \| "bottom" \| "none"` | `'none'`    |
+| `contentId`       | `content-id`       | An optional id of the content slot                                                                                                                                                                                     | `string`                                 | `undefined` |
+| `description`     | `description`      | if defined, a text field that displays under the header                                                                                                                                                                | `string`                                 | `undefined` |
+| `header`          | `header`           | Sets the text for the header of the accordion                                                                                                                                                                          | `string`                                 | `undefined` |
+| `initialExpanded` | `initial-expanded` | Set if the content is shown  false: the accordion is collapsed (default)  true: the accordion is expanded                                                                                                              | `boolean`                                | `false`     |
+| `size`            | `size`             | Set the size of the header and icon size can be 1(default),2,3                                                                                                                                                         | `"1" \| "2" \| "3"`                      | `'3'`       |
+
+
+## Methods
+
+### `parentCheckboxChange(checked: boolean) => Promise<null>`
+
+Updates the parent checkbox state and sets all child checkboxes to the same checked value.
+
+#### Parameters
+
+| Name      | Type      | Description                              |
+| --------- | --------- | ---------------------------------------- |
+| `checked` | `boolean` | - Whether the parent checkbox is checked |
+
+#### Returns
+
+Type: `Promise<null>`
+
+
+
+
+## Slots
+
+| Slot        | Description                                                       |
+| ----------- | ----------------------------------------------------------------- |
+| `"content"` | Content rendered inside of the collapsible body of the accordion. |
+| `"heading"` | The header for the accordion component                            |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-icon](../xpl-icon)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-accordion --> xpl-icon
+  style xpl-accordion fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-application-shell/readme.md

@@ -0,0 +1,33 @@
+# xpl-application-shell
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute                | Description | Type      | Default     |
+| -------------------- | ------------------------ | ----------- | --------- | ----------- |
+| `isNavOpenAtStartup` | `is-nav-open-at-startup` |             | `boolean` | `undefined` |
+| `navWidth`           | `nav-width`              |             | `string`  | `'default'` |
+| `withSubnav`         | `with-subnav`            |             | `boolean` | `false`     |
+| `withUtility`        | `with-utility`           |             | `boolean` | `true`      |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-backdrop](../xpl-backdrop)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-application-shell --> xpl-backdrop
+  style xpl-application-shell fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-avatar/readme.md

@@ -0,0 +1,35 @@
+# xpl-avatar
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                         | Type                                                        | Default     |
+| ---------- | ---------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
+| `color`    | `color`    | Background color when there is no image src                                                         | `"green" \| "pink" \| "primary" \| "secondary" \| "yellow"` | `undefined` |
+| `disabled` | `disabled` | Sets a disabled state on the avatar when set to true                                                | `boolean`                                                   | `false`     |
+| `href`     | `href`     | The URL if the avatar should be hyperlinked                                                         | `string`                                                    | `undefined` |
+| `name`     | `name`     | Alt text for the image if there is an image src                                                     | `string`                                                    | `undefined` |
+| `size`     | `size`     | Size of the avatar                                                                                  | `"md" \| "sm"`                                              | `undefined` |
+| `src`      | `src`      | The image URL                                                                                       | `string`                                                    | `undefined` |
+| `status`   | `status`   | Color styles for the dot indicator to indicate varied states                                        | `"active" \| "inactive" \| "warning"`                       | `undefined` |
+| `target`   | `target`   | Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top` | `string`                                                    | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-list](../xpl-list)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-list --> xpl-avatar
+  style xpl-avatar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-backdrop/readme.md

@@ -0,0 +1,34 @@
+# xpl-backdrop
+
+This backdrop is used to add a transparent darker layer on top of the content area when the main nav is active.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type      | Default |
+| ---------- | ---------- | ----------- | --------- | ------- |
+| `relative` | `relative` |             | `boolean` | `false` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-application-shell](../xpl-application-shell)
+ - [xpl-modal](../xpl-modal)
+ - [xpl-slideout](../xpl-slideout)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-application-shell --> xpl-backdrop
+  xpl-modal --> xpl-backdrop
+  xpl-slideout --> xpl-backdrop
+  style xpl-backdrop fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-badge/readme.md

@@ -0,0 +1,29 @@
+# xpl-badge
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description                                    | Type                                              | Default     |
+| --------- | --------- | ---------------------------------------------- | ------------------------------------------------- | ----------- |
+| `dot`     | `dot`     | Whether badge shows a dot icon before the text | `boolean`                                         | `undefined` |
+| `variant` | `variant` | Color styles to indicate varied states         | `"error" \| "inactive" \| "success" \| "warning"` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-list](../xpl-list)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-list --> xpl-badge
+  style xpl-badge fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-breadcrumbs/xpl-breadcrumb-item/readme.md

@@ -0,0 +1,19 @@
+# xpl-breadcrumb-item
+
+The `<xpl-breadcrumb-item>` component has a role of `listitem`. This component should only be used in combination with `<xpl-breadcrumbs>`.
+This component yields an unnamed slot. Only links and buttons (styled as links) should be used within this component.
+
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                             |
+| ----------- | ----------------------------------------------------------------------- |
+| `"unnamed"` | content rendered inside <li>, should be link or button (styled as link) |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-breadcrumbs/xpl-breadcrumbs/readme.md

@@ -0,0 +1,22 @@
+# xpl-breadcrumbs
+
+The `xpl-breadcrumbs` component is a navigation group. It yields an unnamed slot that is rendered inside a `<ol></ol>` element.
+
+This component can be used as a wrapper to `<xpl-breadcrumb-item>` components.
+
+The number of items is not restricted, although per Apollo's design guidelines, a maximum of three items should be used.
+In small screens (xs), only the 2 deepest items will be visible, even if 3 items are provided.
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                               |
+| ----------- | ------------------------------------------------------------------------- |
+| `"unnamed"` | content rendered <ol>, should be a group of <li> or <xpl-breadcrumb-item> |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-button/readme.md

@@ -0,0 +1,44 @@
+# xpl-button
+
+Buttons allow users to take an action.  Three sizes and three sentiments are available with leading and trailing icons. Hide an icon and the label for an icon-only button.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description                                       | Type                                   | Default     |
+| ----------- | ------------ | ------------------------------------------------- | -------------------------------------- | ----------- |
+| `disabled`  | `disabled`   | whether button should be disabled                 | `boolean`                              | `undefined` |
+| `form`      | `form`       |                                                   | `string`                               | `undefined` |
+| `fullWidth` | `full-width` | whether button should render with full width      | `boolean`                              | `undefined` |
+| `iconOnly`  | `icon-only`  | whether button should render icon only            | `boolean`                              | `undefined` |
+| `link`      | `link`       | whether button should yield a slot for a link tag | `boolean`                              | `undefined` |
+| `name`      | `name`       |                                                   | `string`                               | `undefined` |
+| `size`      | `size`       |                                                   | `"default" \| "sm" \| "xs"`            | `'default'` |
+| `state`     | `state`      |                                                   | `"neutral" \| "success" \| "warning"`  | `'neutral'` |
+| `type`      | `type`       |                                                   | `"button" \| "reset" \| "submit"`      | `undefined` |
+| `value`     | `value`      |                                                   | `string`                               | `undefined` |
+| `variant`   | `variant`    |                                                   | `"primary" \| "secondary" \| "subtle"` | `'primary'` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-button-row](../xpl-button-row)
+ - [xpl-modal](../xpl-modal)
+ - [xpl-slideout](../xpl-slideout)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-button-row --> xpl-button
+  xpl-modal --> xpl-button
+  xpl-slideout --> xpl-button
+  style xpl-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-button-row/readme.md

@@ -0,0 +1,41 @@
+# xpl-button-row
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute   | Description                                                                           | Type       | Default     |
+| ----------- | ----------- | ------------------------------------------------------------------------------------- | ---------- | ----------- |
+| `primary`   | `primary`   | The text for the primary button.                                                      | `"string"` | `undefined` |
+| `secondary` | `secondary` | The text for the secondary button. If left empty, will not render a secondary button. | `"string"` | `undefined` |
+| `tertiary`  | `tertiary`  | The text for the tertiary button. If left empty, will not render a secondary button.  | `"string"` | `undefined` |
+
+
+## Events
+
+| Event            | Description                                                                                         | Type               |
+| ---------------- | --------------------------------------------------------------------------------------------------- | ------------------ |
+| `clickPrimary`   | Fires on the primary button. If not set, the button can act as a standard submit button for a form. | `CustomEvent<any>` |
+| `clickSecondary` | Adds an event listener to the secondary button.                                                     | `CustomEvent<any>` |
+| `clickTertiary`  | Adds an event listener to the tertiary button.                                                      | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [xpl-button](../xpl-button)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-button-row --> xpl-button
+  style xpl-button-row fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-calendar/readme.md

@@ -0,0 +1,48 @@
+# xpl-calendar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                                                                     | Type                  | Default     |
+| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `dateFormat`  | `date-format`  | Format of the date displayed in the calendar. Default is 'Y-m-d'.                                                               | `string`              | `'Y-m-d'`   |
+| `defaultDate` | `default-date` | Default date to be displayed when the calendar is first loaded.                                                                 | `string`              | `undefined` |
+| `inputId`     | `input-id`     | Unique identifier for the calendar element.                                                                                     | `string`              | `uuid()`    |
+| `max`         | `max`          | Maximum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
+| `min`         | `min`          | Minimum selectable date in the calendar.                                                                                        | `number \| string`    | `undefined` |
+| `mode`        | `mode`         | Mode of the calendar, either 'single' for single date selection or 'range' for selecting a range of dates. Default is 'single'. | `"range" \| "single"` | `'single'`  |
+
+
+## Events
+
+| Event          | Description                           | Type                              |
+| -------------- | ------------------------------------- | --------------------------------- |
+| `dateSelected` | Event emitted when a date is selected | `CustomEvent<string \| string[]>` |
+
+
+## Methods
+
+### `setDate(date: string | string[]) => Promise<void>`
+
+Method to update the calendar date from external input
+
+#### Parameters
+
+| Name   | Type                 | Description |
+| ------ | -------------------- | ----------- |
+| `date` | `string \| string[]` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/xpl-checkbox/readme.md

@@ -0,0 +1,47 @@
+# xpl-checkbox
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute       | Description                                                                         | Type      | Default     |
+| --------------- | --------------- | ----------------------------------------------------------------------------------- | --------- | ----------- |
+| `checked`       | `checked`       | Whether the input is checked                                                        | `boolean` | `undefined` |
+| `dataId`        | `data-id`       | A custom data attribute for the checkbox                                            | `string`  | `undefined` |
+| `description`   | `description`   | Description text for the field                                                      | `string`  | `undefined` |
+| `disabled`      | `disabled`      | Whether the input is disabled                                                       | `boolean` | `undefined` |
+| `indeterminate` | `indeterminate` | A visual state for when the input has not been interacted with                      | `boolean` | `undefined` |
+| `name`          | `name`          | The name attribute for the html input. (submitted in form as name/value pair)       | `string`  | `undefined` |
+| `required`      | `required`      | Whether the input is required                                                       | `boolean` | `undefined` |
+| `styled`        | `styled`        | Whether the input is contained in a box with a border and a background              | `boolean` | `undefined` |
+| `value`         | `value`         | The value attribute for the checkbox input. (submittted in form as name/value pair) | `string`  | `undefined` |
+
+
+## Events
+
+| Event            | Description                                                                                                                                                   | Type                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `checkboxChange` | Event that emits the current value of the checkbox input  Returns the value of the checkbox input if a value is provided, otherwise returns the checked state | `CustomEvent<boolean \| string>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [xpl-choicelist](../xpl-choicelist)
+ - [xpl-header-accordion](../xpl-header-accordion)
+ - [xpl-table-header-cell](../xpl-table-header-cell)
+
+### Graph
+```mermaid
+graph TD;
+  xpl-choicelist --> xpl-checkbox
+  xpl-header-accordion --> xpl-checkbox
+  xpl-table-header-cell --> xpl-checkbox
+  style xpl-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*