@xplor-education/react-wrappers 3.1.1 → 3.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.cjs +82 -28
- package/dist/components.js +90 -34
- package/package.json +1 -1
package/dist/components.cjs
CHANGED
|
@@ -17656,12 +17656,6 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
17656
17656
|
.xplor-input-text-area.sc-xplor-input-text-area {
|
|
17657
17657
|
display: flex;
|
|
17658
17658
|
flex-direction: column;
|
|
17659
|
-
gap: 0.25rem;
|
|
17660
|
-
}
|
|
17661
|
-
.xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17662
|
-
font-size: 0.875rem;
|
|
17663
|
-
color: rgba(0, 0, 0, 0.6);
|
|
17664
|
-
margin-bottom: 0.25rem;
|
|
17665
17659
|
}
|
|
17666
17660
|
.xplor-input-text-area__required.sc-xplor-input-text-area {
|
|
17667
17661
|
color: #d32f2f;
|
|
@@ -17672,6 +17666,20 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
17672
17666
|
display: flex;
|
|
17673
17667
|
align-items: flex-start;
|
|
17674
17668
|
}
|
|
17669
|
+
.xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17670
|
+
position: absolute;
|
|
17671
|
+
left: 1rem;
|
|
17672
|
+
top: 0.875rem;
|
|
17673
|
+
font-size: 1rem;
|
|
17674
|
+
color: rgba(0, 0, 0, 0.6);
|
|
17675
|
+
pointer-events: none;
|
|
17676
|
+
padding: 0 0.25rem;
|
|
17677
|
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
17678
|
+
max-width: calc(100% - 2rem);
|
|
17679
|
+
overflow: hidden;
|
|
17680
|
+
text-overflow: ellipsis;
|
|
17681
|
+
white-space: nowrap;
|
|
17682
|
+
}
|
|
17675
17683
|
.xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
17676
17684
|
width: 100%;
|
|
17677
17685
|
padding: 0.875rem 1rem;
|
|
@@ -17682,18 +17690,13 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
17682
17690
|
outline: none;
|
|
17683
17691
|
resize: vertical;
|
|
17684
17692
|
min-height: 56px;
|
|
17685
|
-
transition: border-color 0.
|
|
17693
|
+
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
17686
17694
|
}
|
|
17687
17695
|
.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {
|
|
17688
17696
|
color: rgba(0, 0, 0, 0.38);
|
|
17689
17697
|
}
|
|
17690
17698
|
.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {
|
|
17691
|
-
border-color: rgba(0, 0, 0, 0.
|
|
17692
|
-
}
|
|
17693
|
-
.xplor-input-text-area__input.sc-xplor-input-text-area:focus {
|
|
17694
|
-
border-color: #008480;
|
|
17695
|
-
border-width: 2px;
|
|
17696
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
17699
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
17697
17700
|
}
|
|
17698
17701
|
.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {
|
|
17699
17702
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -17726,9 +17729,32 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
17726
17729
|
.xplor-input-text-area__clear.sc-xplor-input-text-area:active {
|
|
17727
17730
|
background-color: rgba(0, 0, 0, 0.08);
|
|
17728
17731
|
}
|
|
17732
|
+
.xplor-input-text-area--floating.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17733
|
+
top: 0;
|
|
17734
|
+
transform: translateY(-50%);
|
|
17735
|
+
font-size: 0.75rem;
|
|
17736
|
+
}
|
|
17737
|
+
.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
17738
|
+
border-color: #008480;
|
|
17739
|
+
border-width: 2px;
|
|
17740
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
17741
|
+
}
|
|
17742
|
+
.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17743
|
+
color: #008480;
|
|
17744
|
+
}
|
|
17729
17745
|
.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
17730
17746
|
border-color: #d32f2f;
|
|
17731
17747
|
}
|
|
17748
|
+
.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17749
|
+
color: #d32f2f;
|
|
17750
|
+
}
|
|
17751
|
+
.xplor-input-text-area--error.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
17752
|
+
border-color: #d32f2f;
|
|
17753
|
+
border-width: 2px;
|
|
17754
|
+
}
|
|
17755
|
+
.xplor-input-text-area--disabled.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
17756
|
+
color: rgba(0, 0, 0, 0.38);
|
|
17757
|
+
}
|
|
17732
17758
|
.xplor-input-text-area__details.sc-xplor-input-text-area {
|
|
17733
17759
|
min-height: 1.25rem;
|
|
17734
17760
|
padding: 0 1rem;
|
|
@@ -17739,7 +17765,7 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
17739
17765
|
}
|
|
17740
17766
|
.xplor-input-text-area__helper-text.sc-xplor-input-text-area {
|
|
17741
17767
|
color: rgba(0, 0, 0, 0.6);
|
|
17742
|
-
}`;let Ja=0;const rt=v(class extends y{constructor(){super(),this.__registerHost(),this.xplorInput=m(this,"xplorInput"),this.xplorChange=m(this,"xplorChange"),this.xplorClear=m(this,"xplorClear"),this.inputId=`xplor-input-text-area-${++Ja}`,this.errorId=`${this.inputId}-error`,this.helperId=`${this.inputId}-helper`,this.value="",this.label="",this.placeholder="",this.bgColor="white",this.color="#008480",this.disabled=!1,this.readonly=!1,this.clearable=!0,this.rows=3,this.hideDetails="auto",this.error="",this.helperText="",this.required=!1,this.isFocused=!1,this.handleInput=n=>{const t=n.target;this.value=t.value,this.xplorInput.emit(this.value)},this.handleChange=n=>{const t=n.target;this.value=t.value,this.xplorChange.emit(this.value)},this.handleClear=()=>{this.value="",this.xplorClear.emit(),this.xplorChange.emit(this.value)}}render(){const n={"xplor-input-text-area":!0,"xplor-input-text-area--focused":this.isFocused,"xplor-input-text-area--disabled":this.disabled,"xplor-input-text-area--error":!!this.error},
|
|
17768
|
+
}`;let Ja=0;const rt=v(class extends y{constructor(){super(),this.__registerHost(),this.xplorInput=m(this,"xplorInput"),this.xplorChange=m(this,"xplorChange"),this.xplorClear=m(this,"xplorClear"),this.inputId=`xplor-input-text-area-${++Ja}`,this.errorId=`${this.inputId}-error`,this.helperId=`${this.inputId}-helper`,this.value="",this.label="",this.placeholder="",this.bgColor="white",this.color="#008480",this.disabled=!1,this.readonly=!1,this.clearable=!0,this.rows=3,this.hideDetails="auto",this.error="",this.helperText="",this.required=!1,this.isFocused=!1,this.handleInput=n=>{const t=n.target;this.value=t.value,this.xplorInput.emit(this.value)},this.handleChange=n=>{const t=n.target;this.value=t.value,this.xplorChange.emit(this.value)},this.handleClear=()=>{this.value="",this.xplorClear.emit(),this.xplorChange.emit(this.value)}}render(){const n=this.value!=null&&this.value!=="",t=this.isFocused||n,o={"xplor-input-text-area":!0,"xplor-input-text-area--focused":this.isFocused,"xplor-input-text-area--floating":t,"xplor-input-text-area--disabled":this.disabled,"xplor-input-text-area--error":!!this.error},i=this.clearable&&this.value&&!this.readonly&&!this.disabled,a=this.hideDetails===!1||this.hideDetails==="auto"&&(this.error||this.helperText);return r(b,{key:"03e7821b3945d7d8e00a5ce1551a6b26d21001fa"},r("div",{key:"36f0e99d90b1adb5cb38a8ca8d987511569b39e6",class:o},r("div",{key:"7f8880ab17fdfd446f7bf08dc3db46584cb5419e",class:"xplor-input-text-area__field"},r("textarea",{key:"fd8941771e1378818d9b668315013fa66ed49c78",id:this.inputId,class:"xplor-input-text-area__input",value:this.value,placeholder:t?this.placeholder:"",disabled:this.disabled,readonly:this.readonly,required:this.required,rows:this.rows,onInput:this.handleInput,onChange:this.handleChange,onFocus:()=>this.isFocused=!0,onBlur:()=>this.isFocused=!1,style:{backgroundColor:this.bgColor},"aria-invalid":this.error?"true":void 0,"aria-required":this.required?"true":void 0,"aria-describedby":this.error?this.errorId:this.helperText?this.helperId:void 0}),this.label&&r("label",{key:"6df4ae89eff4ff09d6b2e09a9c002c60d1ca8b27",class:"xplor-input-text-area__label",htmlFor:this.inputId,style:{backgroundColor:this.bgColor}},this.label,this.required&&r("span",{key:"d5e01ae02bdd95ba101f4e335c01557d0c49247b",class:"xplor-input-text-area__required"},"*")),i&&r("button",{key:"e38945bc2f3e46d0583d2c28e0b03d659eb4887a",type:"button",class:"xplor-input-text-area__clear",onClick:this.handleClear,"aria-label":"Clear"},"✕")),a&&r("div",{key:"e9deb3dfb6d8fbe9e677cf726c21bcee9b7cf5e5",class:"xplor-input-text-area__details"},this.error&&r("div",{key:"cdb4c09dd0e9b2e5f71e10b01b7662d6cbfe5fe9",class:"xplor-input-text-area__error-message",id:this.errorId},this.error),!this.error&&this.helperText&&r("div",{key:"baa31eb60d09957f394f839f86bca1d1d90e9d9c",class:"xplor-input-text-area__helper-text",id:this.helperId},this.helperText))))}static get style(){return Za}},[2,"xplor-input-text-area",{value:[1025],label:[1],placeholder:[1],bgColor:[1,"bg-color"],color:[1],disabled:[4],readonly:[4],clearable:[4],rows:[2],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isFocused:[32]}]);function Na(){if(typeof customElements>"u")return;["xplor-input-text-area"].forEach(n=>{switch(n){case"xplor-input-text-area":customElements.get(n)||customElements.define(n,rt);break}})}const nl=rt,el=Na,tl=`@tailwind base;
|
|
17743
17769
|
@tailwind components;
|
|
17744
17770
|
@tailwind utilities;
|
|
17745
17771
|
@layer base {
|
|
@@ -18316,12 +18342,6 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
18316
18342
|
.xplor-input-text.sc-xplor-input-text {
|
|
18317
18343
|
display: flex;
|
|
18318
18344
|
flex-direction: column;
|
|
18319
|
-
gap: 0.25rem;
|
|
18320
|
-
}
|
|
18321
|
-
.xplor-input-text__label.sc-xplor-input-text {
|
|
18322
|
-
font-size: 0.875rem;
|
|
18323
|
-
color: rgba(0, 0, 0, 0.6);
|
|
18324
|
-
margin-bottom: 0.25rem;
|
|
18325
18345
|
}
|
|
18326
18346
|
.xplor-input-text__required.sc-xplor-input-text {
|
|
18327
18347
|
color: #d32f2f;
|
|
@@ -18332,6 +18352,21 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
18332
18352
|
display: flex;
|
|
18333
18353
|
align-items: center;
|
|
18334
18354
|
}
|
|
18355
|
+
.xplor-input-text__label.sc-xplor-input-text {
|
|
18356
|
+
position: absolute;
|
|
18357
|
+
left: 1rem;
|
|
18358
|
+
top: 50%;
|
|
18359
|
+
transform: translateY(-50%);
|
|
18360
|
+
font-size: 1rem;
|
|
18361
|
+
color: rgba(0, 0, 0, 0.6);
|
|
18362
|
+
pointer-events: none;
|
|
18363
|
+
padding: 0 0.25rem;
|
|
18364
|
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
18365
|
+
max-width: calc(100% - 2rem);
|
|
18366
|
+
overflow: hidden;
|
|
18367
|
+
text-overflow: ellipsis;
|
|
18368
|
+
white-space: nowrap;
|
|
18369
|
+
}
|
|
18335
18370
|
.xplor-input-text__input.sc-xplor-input-text {
|
|
18336
18371
|
width: 100%;
|
|
18337
18372
|
padding: 0.875rem 1rem;
|
|
@@ -18340,18 +18375,14 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
18340
18375
|
border: 1px solid rgba(0, 0, 0, 0.23);
|
|
18341
18376
|
border-radius: 1rem;
|
|
18342
18377
|
outline: none;
|
|
18343
|
-
transition: border-color 0.
|
|
18378
|
+
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
18379
|
+
min-height: 3rem;
|
|
18344
18380
|
}
|
|
18345
18381
|
.xplor-input-text__input.sc-xplor-input-text::placeholder {
|
|
18346
18382
|
color: rgba(0, 0, 0, 0.38);
|
|
18347
18383
|
}
|
|
18348
18384
|
.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {
|
|
18349
|
-
border-color: rgba(0, 0, 0, 0.
|
|
18350
|
-
}
|
|
18351
|
-
.xplor-input-text__input.sc-xplor-input-text:focus {
|
|
18352
|
-
border-color: #008480;
|
|
18353
|
-
border-width: 2px;
|
|
18354
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
18385
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
18355
18386
|
}
|
|
18356
18387
|
.xplor-input-text__input.sc-xplor-input-text:disabled {
|
|
18357
18388
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -18361,9 +18392,32 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
18361
18392
|
.xplor-input-text__input.sc-xplor-input-text:read-only {
|
|
18362
18393
|
background-color: rgba(0, 0, 0, 0.04);
|
|
18363
18394
|
}
|
|
18395
|
+
.xplor-input-text--floating.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
18396
|
+
top: 0;
|
|
18397
|
+
transform: translateY(-50%);
|
|
18398
|
+
font-size: 0.75rem;
|
|
18399
|
+
}
|
|
18400
|
+
.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
18401
|
+
border-color: #008480;
|
|
18402
|
+
border-width: 2px;
|
|
18403
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
18404
|
+
}
|
|
18405
|
+
.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
18406
|
+
color: #008480;
|
|
18407
|
+
}
|
|
18364
18408
|
.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
18365
18409
|
border-color: #d32f2f;
|
|
18366
18410
|
}
|
|
18411
|
+
.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
18412
|
+
color: #d32f2f;
|
|
18413
|
+
}
|
|
18414
|
+
.xplor-input-text--error.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
18415
|
+
border-color: #d32f2f;
|
|
18416
|
+
border-width: 2px;
|
|
18417
|
+
}
|
|
18418
|
+
.xplor-input-text--disabled.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
18419
|
+
color: rgba(0, 0, 0, 0.38);
|
|
18420
|
+
}
|
|
18367
18421
|
.xplor-input-text__details.sc-xplor-input-text {
|
|
18368
18422
|
min-height: 1.25rem;
|
|
18369
18423
|
padding: 0 1rem;
|
|
@@ -18374,7 +18428,7 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
18374
18428
|
}
|
|
18375
18429
|
.xplor-input-text__helper-text.sc-xplor-input-text {
|
|
18376
18430
|
color: rgba(0, 0, 0, 0.6);
|
|
18377
|
-
}`;let sl=0;const it=v(class extends y{constructor(){super(),this.__registerHost(),this.xplorInput=m(this,"xplorInput"),this.xplorChange=m(this,"xplorChange"),this.xplorFocus=m(this,"xplorFocus"),this.xplorBlur=m(this,"xplorBlur"),this.inputId=`xplor-input-text-${++sl}`,this.errorId=`${this.inputId}-error`,this.helperId=`${this.inputId}-helper`,this.value="",this.label="",this.placeholder="",this.type="text",this.bgColor="white",this.color="#008480",this.disabled=!1,this.readonly=!1,this.hideDetails="auto",this.error="",this.helperText="",this.required=!1,this.isFocused=!1,this.handleInput=n=>{const t=n.target;this.value=t.value,this.xplorInput.emit(this.value)},this.handleChange=n=>{const t=n.target;this.value=t.value,this.xplorChange.emit(this.value)},this.handleFocus=n=>{this.isFocused=!0,this.xplorFocus.emit(n)},this.handleBlur=n=>{this.isFocused=!1,this.xplorBlur.emit(n)}}render(){const n={"xplor-input-text":!0,"xplor-input-text--focused":this.isFocused,"xplor-input-text--disabled":this.disabled,"xplor-input-text--error":!!this.error},
|
|
18431
|
+
}`;let sl=0;const it=v(class extends y{constructor(){super(),this.__registerHost(),this.xplorInput=m(this,"xplorInput"),this.xplorChange=m(this,"xplorChange"),this.xplorFocus=m(this,"xplorFocus"),this.xplorBlur=m(this,"xplorBlur"),this.inputId=`xplor-input-text-${++sl}`,this.errorId=`${this.inputId}-error`,this.helperId=`${this.inputId}-helper`,this.value="",this.label="",this.placeholder="",this.type="text",this.bgColor="white",this.color="#008480",this.disabled=!1,this.readonly=!1,this.hideDetails="auto",this.error="",this.helperText="",this.required=!1,this.isFocused=!1,this.handleInput=n=>{const t=n.target;this.value=t.value,this.xplorInput.emit(this.value)},this.handleChange=n=>{const t=n.target;this.value=t.value,this.xplorChange.emit(this.value)},this.handleFocus=n=>{this.isFocused=!0,this.xplorFocus.emit(n)},this.handleBlur=n=>{this.isFocused=!1,this.xplorBlur.emit(n)}}render(){const n=this.value!=null&&this.value!=="",t=this.isFocused||n,o={"xplor-input-text":!0,"xplor-input-text--focused":this.isFocused,"xplor-input-text--floating":t,"xplor-input-text--disabled":this.disabled,"xplor-input-text--error":!!this.error},i=this.hideDetails===!1||this.hideDetails==="auto"&&(this.error||this.helperText);return r(b,{key:"ad1ea36a553bd5e2f5f20c22d890bfad0c26acb3"},r("div",{key:"e4c0a0a4c63b1a5c8396004e79274b67ecf739eb",class:o},r("div",{key:"fae83f51d4cce2ff16c4a62c18ca824c6fa3dca8",class:"xplor-input-text__field"},r("input",{key:"333a51d2b0be3015c8ea73f968c15af7932c60b5",id:this.inputId,type:this.type,class:"xplor-input-text__input",value:this.value,placeholder:t?this.placeholder:"",disabled:this.disabled,readonly:this.readonly,required:this.required,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,style:{backgroundColor:this.bgColor},"aria-invalid":this.error?"true":void 0,"aria-required":this.required?"true":void 0,"aria-describedby":this.error?this.errorId:this.helperText?this.helperId:void 0}),this.label&&r("label",{key:"0b09ac4c387ebbab0ff3f347af7f9d9f3c4eecee",class:"xplor-input-text__label",htmlFor:this.inputId,style:{backgroundColor:this.bgColor}},this.label,this.required&&r("span",{key:"df37f253d33b836f4c3d314c91dcd175afaa78ea",class:"xplor-input-text__required"},"*")),r("slot",{key:"3a45420f690eb79f22788a26e2b3dcb3b72c4a55",name:"append-inner"})),i&&r("div",{key:"4b9ab78e1362a44e9d9f0297424b8069a3f69840",class:"xplor-input-text__details"},this.error&&r("div",{key:"eb69eade9944edb5f088b279603d6c98800122a2",class:"xplor-input-text__error-message",id:this.errorId},this.error),!this.error&&this.helperText&&r("div",{key:"433ad514edd52b3eb544fd1f5ec7e0ab96fae3b1",class:"xplor-input-text__helper-text",id:this.helperId},this.helperText)),r("slot",{key:"05881a3abae9226639eb0ffe646f9bd5cd92343c",name:"append"})))}static get style(){return ll}},[6,"xplor-input-text",{value:[1025],label:[1],placeholder:[1],type:[1],bgColor:[1,"bg-color"],color:[1],disabled:[4],readonly:[4],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isFocused:[32]}]);function dl(){if(typeof customElements>"u")return;["xplor-input-text"].forEach(n=>{switch(n){case"xplor-input-text":customElements.get(n)||customElements.define(n,it);break}})}const cl=it,pl=dl,gl=`@tailwind base;
|
|
18378
18432
|
@tailwind components;
|
|
18379
18433
|
@tailwind utilities;
|
|
18380
18434
|
@layer base {
|
package/dist/components.js
CHANGED
|
@@ -21679,12 +21679,6 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
21679
21679
|
.xplor-input-text-area.sc-xplor-input-text-area {
|
|
21680
21680
|
display: flex;
|
|
21681
21681
|
flex-direction: column;
|
|
21682
|
-
gap: 0.25rem;
|
|
21683
|
-
}
|
|
21684
|
-
.xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21685
|
-
font-size: 0.875rem;
|
|
21686
|
-
color: rgba(0, 0, 0, 0.6);
|
|
21687
|
-
margin-bottom: 0.25rem;
|
|
21688
21682
|
}
|
|
21689
21683
|
.xplor-input-text-area__required.sc-xplor-input-text-area {
|
|
21690
21684
|
color: #d32f2f;
|
|
@@ -21695,6 +21689,20 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
21695
21689
|
display: flex;
|
|
21696
21690
|
align-items: flex-start;
|
|
21697
21691
|
}
|
|
21692
|
+
.xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21693
|
+
position: absolute;
|
|
21694
|
+
left: 1rem;
|
|
21695
|
+
top: 0.875rem;
|
|
21696
|
+
font-size: 1rem;
|
|
21697
|
+
color: rgba(0, 0, 0, 0.6);
|
|
21698
|
+
pointer-events: none;
|
|
21699
|
+
padding: 0 0.25rem;
|
|
21700
|
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
21701
|
+
max-width: calc(100% - 2rem);
|
|
21702
|
+
overflow: hidden;
|
|
21703
|
+
text-overflow: ellipsis;
|
|
21704
|
+
white-space: nowrap;
|
|
21705
|
+
}
|
|
21698
21706
|
.xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
21699
21707
|
width: 100%;
|
|
21700
21708
|
padding: 0.875rem 1rem;
|
|
@@ -21705,18 +21713,13 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
21705
21713
|
outline: none;
|
|
21706
21714
|
resize: vertical;
|
|
21707
21715
|
min-height: 56px;
|
|
21708
|
-
transition: border-color 0.
|
|
21716
|
+
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
21709
21717
|
}
|
|
21710
21718
|
.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {
|
|
21711
21719
|
color: rgba(0, 0, 0, 0.38);
|
|
21712
21720
|
}
|
|
21713
21721
|
.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {
|
|
21714
|
-
border-color: rgba(0, 0, 0, 0.
|
|
21715
|
-
}
|
|
21716
|
-
.xplor-input-text-area__input.sc-xplor-input-text-area:focus {
|
|
21717
|
-
border-color: #008480;
|
|
21718
|
-
border-width: 2px;
|
|
21719
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
21722
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
21720
21723
|
}
|
|
21721
21724
|
.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {
|
|
21722
21725
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -21749,9 +21752,32 @@ ol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area,
|
|
|
21749
21752
|
.xplor-input-text-area__clear.sc-xplor-input-text-area:active {
|
|
21750
21753
|
background-color: rgba(0, 0, 0, 0.08);
|
|
21751
21754
|
}
|
|
21755
|
+
.xplor-input-text-area--floating.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21756
|
+
top: 0;
|
|
21757
|
+
transform: translateY(-50%);
|
|
21758
|
+
font-size: 0.75rem;
|
|
21759
|
+
}
|
|
21760
|
+
.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
21761
|
+
border-color: #008480;
|
|
21762
|
+
border-width: 2px;
|
|
21763
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
21764
|
+
}
|
|
21765
|
+
.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21766
|
+
color: #008480;
|
|
21767
|
+
}
|
|
21752
21768
|
.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
21753
21769
|
border-color: #d32f2f;
|
|
21754
21770
|
}
|
|
21771
|
+
.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21772
|
+
color: #d32f2f;
|
|
21773
|
+
}
|
|
21774
|
+
.xplor-input-text-area--error.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {
|
|
21775
|
+
border-color: #d32f2f;
|
|
21776
|
+
border-width: 2px;
|
|
21777
|
+
}
|
|
21778
|
+
.xplor-input-text-area--disabled.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {
|
|
21779
|
+
color: rgba(0, 0, 0, 0.38);
|
|
21780
|
+
}
|
|
21755
21781
|
.xplor-input-text-area__details.sc-xplor-input-text-area {
|
|
21756
21782
|
min-height: 1.25rem;
|
|
21757
21783
|
padding: 0 1rem;
|
|
@@ -21777,15 +21803,16 @@ const rt = /* @__PURE__ */ v(class extends y {
|
|
|
21777
21803
|
};
|
|
21778
21804
|
}
|
|
21779
21805
|
render() {
|
|
21780
|
-
const n = {
|
|
21806
|
+
const n = this.value != null && this.value !== "", t = this.isFocused || n, o = {
|
|
21781
21807
|
"xplor-input-text-area": !0,
|
|
21782
21808
|
"xplor-input-text-area--focused": this.isFocused,
|
|
21809
|
+
"xplor-input-text-area--floating": t,
|
|
21783
21810
|
"xplor-input-text-area--disabled": this.disabled,
|
|
21784
21811
|
"xplor-input-text-area--error": !!this.error
|
|
21785
|
-
},
|
|
21786
|
-
return r(b, { key: "
|
|
21812
|
+
}, i = this.clearable && this.value && !this.readonly && !this.disabled, a = this.hideDetails === !1 || this.hideDetails === "auto" && (this.error || this.helperText);
|
|
21813
|
+
return r(b, { key: "03e7821b3945d7d8e00a5ce1551a6b26d21001fa" }, r("div", { key: "36f0e99d90b1adb5cb38a8ca8d987511569b39e6", class: o }, r("div", { key: "7f8880ab17fdfd446f7bf08dc3db46584cb5419e", class: "xplor-input-text-area__field" }, r("textarea", { key: "fd8941771e1378818d9b668315013fa66ed49c78", id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: t ? this.placeholder : "", disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => this.isFocused = !0, onBlur: () => this.isFocused = !1, style: {
|
|
21787
21814
|
backgroundColor: this.bgColor
|
|
21788
|
-
}, "aria-invalid": this.error ? "true" : void 0, "aria-required": this.required ? "true" : void 0, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : void 0 }),
|
|
21815
|
+
}, "aria-invalid": this.error ? "true" : void 0, "aria-required": this.required ? "true" : void 0, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : void 0 }), this.label && r("label", { key: "6df4ae89eff4ff09d6b2e09a9c002c60d1ca8b27", class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && r("span", { key: "d5e01ae02bdd95ba101f4e335c01557d0c49247b", class: "xplor-input-text-area__required" }, "*")), i && r("button", { key: "e38945bc2f3e46d0583d2c28e0b03d659eb4887a", type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "✕")), a && r("div", { key: "e9deb3dfb6d8fbe9e677cf726c21bcee9b7cf5e5", class: "xplor-input-text-area__details" }, this.error && r("div", { key: "cdb4c09dd0e9b2e5f71e10b01b7662d6cbfe5fe9", class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && r("div", { key: "baa31eb60d09957f394f839f86bca1d1d90e9d9c", class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))));
|
|
21789
21816
|
}
|
|
21790
21817
|
static get style() {
|
|
21791
21818
|
return Za;
|
|
@@ -22451,12 +22478,6 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
22451
22478
|
.xplor-input-text.sc-xplor-input-text {
|
|
22452
22479
|
display: flex;
|
|
22453
22480
|
flex-direction: column;
|
|
22454
|
-
gap: 0.25rem;
|
|
22455
|
-
}
|
|
22456
|
-
.xplor-input-text__label.sc-xplor-input-text {
|
|
22457
|
-
font-size: 0.875rem;
|
|
22458
|
-
color: rgba(0, 0, 0, 0.6);
|
|
22459
|
-
margin-bottom: 0.25rem;
|
|
22460
22481
|
}
|
|
22461
22482
|
.xplor-input-text__required.sc-xplor-input-text {
|
|
22462
22483
|
color: #d32f2f;
|
|
@@ -22467,6 +22488,21 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
22467
22488
|
display: flex;
|
|
22468
22489
|
align-items: center;
|
|
22469
22490
|
}
|
|
22491
|
+
.xplor-input-text__label.sc-xplor-input-text {
|
|
22492
|
+
position: absolute;
|
|
22493
|
+
left: 1rem;
|
|
22494
|
+
top: 50%;
|
|
22495
|
+
transform: translateY(-50%);
|
|
22496
|
+
font-size: 1rem;
|
|
22497
|
+
color: rgba(0, 0, 0, 0.6);
|
|
22498
|
+
pointer-events: none;
|
|
22499
|
+
padding: 0 0.25rem;
|
|
22500
|
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
22501
|
+
max-width: calc(100% - 2rem);
|
|
22502
|
+
overflow: hidden;
|
|
22503
|
+
text-overflow: ellipsis;
|
|
22504
|
+
white-space: nowrap;
|
|
22505
|
+
}
|
|
22470
22506
|
.xplor-input-text__input.sc-xplor-input-text {
|
|
22471
22507
|
width: 100%;
|
|
22472
22508
|
padding: 0.875rem 1rem;
|
|
@@ -22475,18 +22511,14 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
22475
22511
|
border: 1px solid rgba(0, 0, 0, 0.23);
|
|
22476
22512
|
border-radius: 1rem;
|
|
22477
22513
|
outline: none;
|
|
22478
|
-
transition: border-color 0.
|
|
22514
|
+
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
22515
|
+
min-height: 3rem;
|
|
22479
22516
|
}
|
|
22480
22517
|
.xplor-input-text__input.sc-xplor-input-text::placeholder {
|
|
22481
22518
|
color: rgba(0, 0, 0, 0.38);
|
|
22482
22519
|
}
|
|
22483
22520
|
.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {
|
|
22484
|
-
border-color: rgba(0, 0, 0, 0.
|
|
22485
|
-
}
|
|
22486
|
-
.xplor-input-text__input.sc-xplor-input-text:focus {
|
|
22487
|
-
border-color: #008480;
|
|
22488
|
-
border-width: 2px;
|
|
22489
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
22521
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
22490
22522
|
}
|
|
22491
22523
|
.xplor-input-text__input.sc-xplor-input-text:disabled {
|
|
22492
22524
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -22496,9 +22528,32 @@ ol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-lis
|
|
|
22496
22528
|
.xplor-input-text__input.sc-xplor-input-text:read-only {
|
|
22497
22529
|
background-color: rgba(0, 0, 0, 0.04);
|
|
22498
22530
|
}
|
|
22531
|
+
.xplor-input-text--floating.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
22532
|
+
top: 0;
|
|
22533
|
+
transform: translateY(-50%);
|
|
22534
|
+
font-size: 0.75rem;
|
|
22535
|
+
}
|
|
22536
|
+
.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
22537
|
+
border-color: #008480;
|
|
22538
|
+
border-width: 2px;
|
|
22539
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
22540
|
+
}
|
|
22541
|
+
.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
22542
|
+
color: #008480;
|
|
22543
|
+
}
|
|
22499
22544
|
.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
22500
22545
|
border-color: #d32f2f;
|
|
22501
22546
|
}
|
|
22547
|
+
.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
22548
|
+
color: #d32f2f;
|
|
22549
|
+
}
|
|
22550
|
+
.xplor-input-text--error.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {
|
|
22551
|
+
border-color: #d32f2f;
|
|
22552
|
+
border-width: 2px;
|
|
22553
|
+
}
|
|
22554
|
+
.xplor-input-text--disabled.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {
|
|
22555
|
+
color: rgba(0, 0, 0, 0.38);
|
|
22556
|
+
}
|
|
22502
22557
|
.xplor-input-text__details.sc-xplor-input-text {
|
|
22503
22558
|
min-height: 1.25rem;
|
|
22504
22559
|
padding: 0 1rem;
|
|
@@ -22526,15 +22581,16 @@ const it = /* @__PURE__ */ v(class extends y {
|
|
|
22526
22581
|
};
|
|
22527
22582
|
}
|
|
22528
22583
|
render() {
|
|
22529
|
-
const n = {
|
|
22584
|
+
const n = this.value != null && this.value !== "", t = this.isFocused || n, o = {
|
|
22530
22585
|
"xplor-input-text": !0,
|
|
22531
22586
|
"xplor-input-text--focused": this.isFocused,
|
|
22587
|
+
"xplor-input-text--floating": t,
|
|
22532
22588
|
"xplor-input-text--disabled": this.disabled,
|
|
22533
22589
|
"xplor-input-text--error": !!this.error
|
|
22534
|
-
},
|
|
22535
|
-
return r(b, { key: "
|
|
22590
|
+
}, i = this.hideDetails === !1 || this.hideDetails === "auto" && (this.error || this.helperText);
|
|
22591
|
+
return r(b, { key: "ad1ea36a553bd5e2f5f20c22d890bfad0c26acb3" }, r("div", { key: "e4c0a0a4c63b1a5c8396004e79274b67ecf739eb", class: o }, r("div", { key: "fae83f51d4cce2ff16c4a62c18ca824c6fa3dca8", class: "xplor-input-text__field" }, r("input", { key: "333a51d2b0be3015c8ea73f968c15af7932c60b5", id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: t ? this.placeholder : "", disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
22536
22592
|
backgroundColor: this.bgColor
|
|
22537
|
-
}, "aria-invalid": this.error ? "true" : void 0, "aria-required": this.required ? "true" : void 0, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : void 0 }), r("slot", { key: "
|
|
22593
|
+
}, "aria-invalid": this.error ? "true" : void 0, "aria-required": this.required ? "true" : void 0, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : void 0 }), this.label && r("label", { key: "0b09ac4c387ebbab0ff3f347af7f9d9f3c4eecee", class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && r("span", { key: "df37f253d33b836f4c3d314c91dcd175afaa78ea", class: "xplor-input-text__required" }, "*")), r("slot", { key: "3a45420f690eb79f22788a26e2b3dcb3b72c4a55", name: "append-inner" })), i && r("div", { key: "4b9ab78e1362a44e9d9f0297424b8069a3f69840", class: "xplor-input-text__details" }, this.error && r("div", { key: "eb69eade9944edb5f088b279603d6c98800122a2", class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && r("div", { key: "433ad514edd52b3eb544fd1f5ec7e0ab96fae3b1", class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText)), r("slot", { key: "05881a3abae9226639eb0ffe646f9bd5cd92343c", name: "append" })));
|
|
22538
22594
|
}
|
|
22539
22595
|
static get style() {
|
|
22540
22596
|
return ll;
|