@descope/web-components-ui 1.0.163 → 1.0.164
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 +50 -19
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-upload-file/UploadFileClass.js +40 -15
- package/src/theme/components/uploadFile.js +8 -2
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>v});var n=i(1e3),o=i(2061),r=i(4567),s=i(3878);const a=(0,r.iY)("upload-file"),p=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],u=(0,s.P)({componentName:a,baseSelector:":host > div"}),{host:d,wrapper:l,icon:c,title:h,description:b,requiredIndicator:y}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>".icon"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},v=(0,o.qC)((0,n.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,n.yk)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...d,property:"height"},hostWidth:{...d,property:"width"},hostPadding:{property:"padding"},gap:{...l},lineHeight:{...l,property:"line-height"},titleFontSize:{...h,property:"font-size"},titleFontWeight:{...h,property:"font-weight"},descriptionFontSize:{...b,property:"font-size"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],iconSize:{...c,property:"width"},requiredIndicator:{...y,property:"content"}}}),n.e4,n.Ae)(class extends u{static get observedAttributes(){return p.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t\t<div class="icon"></div>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" />\n\t\t\t\t\t<descope-button></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var i;e.length&&(this.value=await(i=e[0],new Promise((t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(i)}))),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("title"===t?this.updateTitle(i):"description"===t?this.updateDescription(i):"button-label"===t?this.updateButtonLabel(i):"button-mode"===t?this.updateButtonMode(i):"button-variant"===t?this.updateButtonVariant(i):"size"===t?this.updateButtonSize(i):"accept"===t?this.updateInputAccept(i):"readonly"===t?this.updateReadOnly(i):"icon"===t&&this.updateIcon(i))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.innerHTML=t}updateDescription(t){this.description.innerHTML=t}updateButtonLabel(t){this.button.innerHTML=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}updateIcon(t){this.icon.style.content=`url(${t})`}});i(5545),customElements.define(a,v)}}]);
|
package/package.json
CHANGED
@@ -11,13 +11,15 @@ const observedAttributes = [
|
|
11
11
|
'description',
|
12
12
|
'button-label',
|
13
13
|
'accept',
|
14
|
+
'readonly',
|
14
15
|
'button-mode',
|
15
16
|
'button-variant',
|
16
17
|
'required',
|
17
18
|
'size',
|
19
|
+
'icon',
|
18
20
|
];
|
19
21
|
|
20
|
-
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div
|
22
|
+
const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });
|
21
23
|
|
22
24
|
class RawUploadFile extends BaseInputClass {
|
23
25
|
static get observedAttributes() {
|
@@ -29,12 +31,16 @@ class RawUploadFile extends BaseInputClass {
|
|
29
31
|
|
30
32
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
31
33
|
<style>
|
32
|
-
|
34
|
+
:host {
|
35
|
+
display: flex;
|
36
|
+
}
|
37
|
+
:host > div {
|
33
38
|
display: flex;
|
34
39
|
align-items: center;
|
35
40
|
justify-content: center;
|
36
41
|
text-align: center;
|
37
42
|
flex-direction: column;
|
43
|
+
width: 100%;
|
38
44
|
}
|
39
45
|
.button-wrapper {
|
40
46
|
position: relative;
|
@@ -47,11 +53,10 @@ class RawUploadFile extends BaseInputClass {
|
|
47
53
|
opacity: 0;
|
48
54
|
}
|
49
55
|
</style>
|
50
|
-
<div
|
56
|
+
<div>
|
51
57
|
<div class="icon"></div>
|
52
58
|
<div class="title">
|
53
59
|
<span class="title-text"></span>
|
54
|
-
<span class="required-indicator"></span>
|
55
60
|
</div>
|
56
61
|
<div class="description"></div>
|
57
62
|
<div class="button-wrapper">
|
@@ -113,6 +118,10 @@ class RawUploadFile extends BaseInputClass {
|
|
113
118
|
this.updateButtonSize(newValue);
|
114
119
|
} else if (attrName === 'accept') {
|
115
120
|
this.updateInputAccept(newValue);
|
121
|
+
} else if (attrName === 'readonly') {
|
122
|
+
this.updateReadOnly(newValue);
|
123
|
+
} else if (attrName === 'icon') {
|
124
|
+
this.updateIcon(newValue);
|
116
125
|
}
|
117
126
|
}
|
118
127
|
}
|
@@ -133,6 +142,10 @@ class RawUploadFile extends BaseInputClass {
|
|
133
142
|
return this.shadowRoot.querySelector('.description');
|
134
143
|
}
|
135
144
|
|
145
|
+
get icon() {
|
146
|
+
return this.shadowRoot.querySelector('.icon');
|
147
|
+
}
|
148
|
+
|
136
149
|
updateTitle(val) {
|
137
150
|
this.title.innerHTML = val;
|
138
151
|
}
|
@@ -160,10 +173,23 @@ class RawUploadFile extends BaseInputClass {
|
|
160
173
|
updateInputAccept(val) {
|
161
174
|
this.input.setAttribute('accept', val);
|
162
175
|
}
|
176
|
+
|
177
|
+
updateReadOnly(val) {
|
178
|
+
if (val === 'true') {
|
179
|
+
this.input.setAttribute('disabled', 'true');
|
180
|
+
} else {
|
181
|
+
this.input.removeAttribute('disabled');
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
185
|
+
updateIcon(val) {
|
186
|
+
this.icon.style.content = `url(${val})`;
|
187
|
+
}
|
163
188
|
}
|
164
189
|
|
165
|
-
const { host, icon, title, description, requiredIndicator } = {
|
166
|
-
host: { selector: () => '
|
190
|
+
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
191
|
+
host: { selector: () => ':host' },
|
192
|
+
wrapper: { selector: () => ':host > div' },
|
167
193
|
icon: { selector: () => '.icon' },
|
168
194
|
title: { selector: () => '.title' },
|
169
195
|
description: { selector: () => '.description' },
|
@@ -176,15 +202,15 @@ export const UploadFileClass = compose(
|
|
176
202
|
mappings: {
|
177
203
|
fontSize: {},
|
178
204
|
fontFamily: {},
|
179
|
-
|
205
|
+
borderColor: {},
|
206
|
+
borderWidth: {},
|
207
|
+
borderStyle: {},
|
208
|
+
borderRadius: {},
|
180
209
|
hostHeight: { ...host, property: 'height' },
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
borderWidth: { ...host, property: 'border-width' },
|
186
|
-
borderStyle: { ...host, property: 'border-style' },
|
187
|
-
borderRadius: { ...host, property: 'border-radius' },
|
210
|
+
hostWidth: { ...host, property: 'width' },
|
211
|
+
hostPadding: { property: 'padding' },
|
212
|
+
gap: { ...wrapper },
|
213
|
+
lineHeight: { ...wrapper, property: 'line-height' },
|
188
214
|
titleFontSize: { ...title, property: 'font-size' },
|
189
215
|
titleFontWeight: { ...title, property: 'font-weight' },
|
190
216
|
descriptionFontSize: { ...description, property: 'font-size' },
|
@@ -192,7 +218,6 @@ export const UploadFileClass = compose(
|
|
192
218
|
{ ...title, property: 'color' },
|
193
219
|
{ ...description, property: 'color' },
|
194
220
|
],
|
195
|
-
icon: { ...icon, property: 'content' },
|
196
221
|
iconSize: { ...icon, property: 'width' },
|
197
222
|
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
198
223
|
},
|
@@ -5,10 +5,8 @@ const vars = UploadFileClass.cssVarList;
|
|
5
5
|
|
6
6
|
const uploadFile = {
|
7
7
|
[vars.labelTextColor]: refs.labelTextColor,
|
8
|
-
[vars.requiredIndicator]: refs.requiredIndicator,
|
9
8
|
[vars.fontFamily]: refs.fontFamily,
|
10
9
|
|
11
|
-
[vars.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
|
12
10
|
[vars.iconSize]: '2em',
|
13
11
|
|
14
12
|
[vars.hostPadding]: '0.75em',
|
@@ -23,6 +21,10 @@ const uploadFile = {
|
|
23
21
|
[vars.borderRadius]: refs.borderRadius,
|
24
22
|
[vars.borderStyle]: 'dashed',
|
25
23
|
|
24
|
+
_required: {
|
25
|
+
[vars.requiredIndicator]: refs.requiredIndicator,
|
26
|
+
},
|
27
|
+
|
26
28
|
size: {
|
27
29
|
xs: {
|
28
30
|
[vars.hostHeight]: '196px',
|
@@ -53,6 +55,10 @@ const uploadFile = {
|
|
53
55
|
[vars.lineHeight]: '1.75em',
|
54
56
|
},
|
55
57
|
},
|
58
|
+
|
59
|
+
_fullWidth: {
|
60
|
+
[vars.hostWidth]: refs.width,
|
61
|
+
},
|
56
62
|
};
|
57
63
|
|
58
64
|
export default uploadFile;
|