@descope/web-components-ui 1.0.163 → 1.0.165
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +50 -19
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +51 -20
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-passcode/descope-passcode-internal/helpers.js +1 -1
- package/src/components/descope-upload-file/UploadFileClass.js +40 -15
- package/src/theme/components/uploadFile.js +8 -2
package/dist/cjs/index.cjs.js
CHANGED
@@ -3352,13 +3352,13 @@ const selectors$1 = {
|
|
3352
3352
|
text: { selector: () => TextClass.componentName },
|
3353
3353
|
};
|
3354
3354
|
|
3355
|
-
const { anchor, text: text$1, host: host$7, wrapper } = selectors$1;
|
3355
|
+
const { anchor, text: text$1, host: host$7, wrapper: wrapper$1 } = selectors$1;
|
3356
3356
|
|
3357
3357
|
const LinkClass = compose(
|
3358
3358
|
createStyleMixin({
|
3359
3359
|
mappings: {
|
3360
3360
|
hostWidth: { ...host$7, property: 'width' },
|
3361
|
-
textAlign: wrapper,
|
3361
|
+
textAlign: wrapper$1,
|
3362
3362
|
textColor: [
|
3363
3363
|
{ ...anchor, property: 'color' },
|
3364
3364
|
{ ...text$1, property: TextClass.cssVarList.textColor },
|
@@ -5898,13 +5898,15 @@ const observedAttributes$1 = [
|
|
5898
5898
|
'description',
|
5899
5899
|
'button-label',
|
5900
5900
|
'accept',
|
5901
|
+
'readonly',
|
5901
5902
|
'button-mode',
|
5902
5903
|
'button-variant',
|
5903
5904
|
'required',
|
5904
5905
|
'size',
|
5906
|
+
'icon',
|
5905
5907
|
];
|
5906
5908
|
|
5907
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div
|
5909
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
|
5908
5910
|
|
5909
5911
|
class RawUploadFile extends BaseInputClass {
|
5910
5912
|
static get observedAttributes() {
|
@@ -5916,12 +5918,16 @@ class RawUploadFile extends BaseInputClass {
|
|
5916
5918
|
|
5917
5919
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
5918
5920
|
<style>
|
5919
|
-
|
5921
|
+
:host {
|
5922
|
+
display: flex;
|
5923
|
+
}
|
5924
|
+
:host > div {
|
5920
5925
|
display: flex;
|
5921
5926
|
align-items: center;
|
5922
5927
|
justify-content: center;
|
5923
5928
|
text-align: center;
|
5924
5929
|
flex-direction: column;
|
5930
|
+
width: 100%;
|
5925
5931
|
}
|
5926
5932
|
.button-wrapper {
|
5927
5933
|
position: relative;
|
@@ -5934,11 +5940,10 @@ class RawUploadFile extends BaseInputClass {
|
|
5934
5940
|
opacity: 0;
|
5935
5941
|
}
|
5936
5942
|
</style>
|
5937
|
-
<div
|
5943
|
+
<div>
|
5938
5944
|
<div class="icon"></div>
|
5939
5945
|
<div class="title">
|
5940
5946
|
<span class="title-text"></span>
|
5941
|
-
<span class="required-indicator"></span>
|
5942
5947
|
</div>
|
5943
5948
|
<div class="description"></div>
|
5944
5949
|
<div class="button-wrapper">
|
@@ -6000,6 +6005,10 @@ class RawUploadFile extends BaseInputClass {
|
|
6000
6005
|
this.updateButtonSize(newValue);
|
6001
6006
|
} else if (attrName === 'accept') {
|
6002
6007
|
this.updateInputAccept(newValue);
|
6008
|
+
} else if (attrName === 'readonly') {
|
6009
|
+
this.updateReadOnly(newValue);
|
6010
|
+
} else if (attrName === 'icon') {
|
6011
|
+
this.updateIcon(newValue);
|
6003
6012
|
}
|
6004
6013
|
}
|
6005
6014
|
}
|
@@ -6020,6 +6029,10 @@ class RawUploadFile extends BaseInputClass {
|
|
6020
6029
|
return this.shadowRoot.querySelector('.description');
|
6021
6030
|
}
|
6022
6031
|
|
6032
|
+
get icon() {
|
6033
|
+
return this.shadowRoot.querySelector('.icon');
|
6034
|
+
}
|
6035
|
+
|
6023
6036
|
updateTitle(val) {
|
6024
6037
|
this.title.innerHTML = val;
|
6025
6038
|
}
|
@@ -6047,10 +6060,23 @@ class RawUploadFile extends BaseInputClass {
|
|
6047
6060
|
updateInputAccept(val) {
|
6048
6061
|
this.input.setAttribute('accept', val);
|
6049
6062
|
}
|
6063
|
+
|
6064
|
+
updateReadOnly(val) {
|
6065
|
+
if (val === 'true') {
|
6066
|
+
this.input.setAttribute('disabled', 'true');
|
6067
|
+
} else {
|
6068
|
+
this.input.removeAttribute('disabled');
|
6069
|
+
}
|
6070
|
+
}
|
6071
|
+
|
6072
|
+
updateIcon(val) {
|
6073
|
+
this.icon.style.content = `url(${val})`;
|
6074
|
+
}
|
6050
6075
|
}
|
6051
6076
|
|
6052
|
-
const { host, icon, title, description, requiredIndicator } = {
|
6053
|
-
host: { selector: () => '
|
6077
|
+
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
6078
|
+
host: { selector: () => ':host' },
|
6079
|
+
wrapper: { selector: () => ':host > div' },
|
6054
6080
|
icon: { selector: () => '.icon' },
|
6055
6081
|
title: { selector: () => '.title' },
|
6056
6082
|
description: { selector: () => '.description' },
|
@@ -6063,15 +6089,15 @@ const UploadFileClass = compose(
|
|
6063
6089
|
mappings: {
|
6064
6090
|
fontSize: {},
|
6065
6091
|
fontFamily: {},
|
6066
|
-
|
6092
|
+
borderColor: {},
|
6093
|
+
borderWidth: {},
|
6094
|
+
borderStyle: {},
|
6095
|
+
borderRadius: {},
|
6067
6096
|
hostHeight: { ...host, property: 'height' },
|
6068
|
-
|
6069
|
-
|
6070
|
-
|
6071
|
-
|
6072
|
-
borderWidth: { ...host, property: 'border-width' },
|
6073
|
-
borderStyle: { ...host, property: 'border-style' },
|
6074
|
-
borderRadius: { ...host, property: 'border-radius' },
|
6097
|
+
hostWidth: { ...host, property: 'width' },
|
6098
|
+
hostPadding: { property: 'padding' },
|
6099
|
+
gap: { ...wrapper },
|
6100
|
+
lineHeight: { ...wrapper, property: 'line-height' },
|
6075
6101
|
titleFontSize: { ...title, property: 'font-size' },
|
6076
6102
|
titleFontWeight: { ...title, property: 'font-weight' },
|
6077
6103
|
descriptionFontSize: { ...description, property: 'font-size' },
|
@@ -6079,7 +6105,6 @@ const UploadFileClass = compose(
|
|
6079
6105
|
{ ...title, property: 'color' },
|
6080
6106
|
{ ...description, property: 'color' },
|
6081
6107
|
],
|
6082
|
-
icon: { ...icon, property: 'content' },
|
6083
6108
|
iconSize: { ...icon, property: 'width' },
|
6084
6109
|
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
6085
6110
|
},
|
@@ -6092,10 +6117,8 @@ const vars$1 = UploadFileClass.cssVarList;
|
|
6092
6117
|
|
6093
6118
|
const uploadFile = {
|
6094
6119
|
[vars$1.labelTextColor]: refs.labelTextColor,
|
6095
|
-
[vars$1.requiredIndicator]: refs.requiredIndicator,
|
6096
6120
|
[vars$1.fontFamily]: refs.fontFamily,
|
6097
6121
|
|
6098
|
-
[vars$1.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
|
6099
6122
|
[vars$1.iconSize]: '2em',
|
6100
6123
|
|
6101
6124
|
[vars$1.hostPadding]: '0.75em',
|
@@ -6110,6 +6133,10 @@ const uploadFile = {
|
|
6110
6133
|
[vars$1.borderRadius]: refs.borderRadius,
|
6111
6134
|
[vars$1.borderStyle]: 'dashed',
|
6112
6135
|
|
6136
|
+
_required: {
|
6137
|
+
[vars$1.requiredIndicator]: refs.requiredIndicator,
|
6138
|
+
},
|
6139
|
+
|
6113
6140
|
size: {
|
6114
6141
|
xs: {
|
6115
6142
|
[vars$1.hostHeight]: '196px',
|
@@ -6140,6 +6167,10 @@ const uploadFile = {
|
|
6140
6167
|
[vars$1.lineHeight]: '1.75em',
|
6141
6168
|
},
|
6142
6169
|
},
|
6170
|
+
|
6171
|
+
_fullWidth: {
|
6172
|
+
[vars$1.hostWidth]: refs.width,
|
6173
|
+
},
|
6143
6174
|
};
|
6144
6175
|
|
6145
6176
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|