@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
package/dist/index.esm.js
CHANGED
@@ -2233,13 +2233,13 @@ const selectors = {
|
|
2233
2233
|
text: { selector: () => TextClass.componentName },
|
2234
2234
|
};
|
2235
2235
|
|
2236
|
-
const { anchor, text: text$2, host: host$7, wrapper } = selectors;
|
2236
|
+
const { anchor, text: text$2, host: host$7, wrapper: wrapper$1 } = selectors;
|
2237
2237
|
|
2238
2238
|
const LinkClass = compose(
|
2239
2239
|
createStyleMixin({
|
2240
2240
|
mappings: {
|
2241
2241
|
hostWidth: { ...host$7, property: 'width' },
|
2242
|
-
textAlign: wrapper,
|
2242
|
+
textAlign: wrapper$1,
|
2243
2243
|
textColor: [
|
2244
2244
|
{ ...anchor, property: 'color' },
|
2245
2245
|
{ ...text$2, property: TextClass.cssVarList.textColor },
|
@@ -5419,13 +5419,15 @@ const observedAttributes = [
|
|
5419
5419
|
'description',
|
5420
5420
|
'button-label',
|
5421
5421
|
'accept',
|
5422
|
+
'readonly',
|
5422
5423
|
'button-mode',
|
5423
5424
|
'button-variant',
|
5424
5425
|
'required',
|
5425
5426
|
'size',
|
5427
|
+
'icon',
|
5426
5428
|
];
|
5427
5429
|
|
5428
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div
|
5430
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div' });
|
5429
5431
|
|
5430
5432
|
class RawUploadFile extends BaseInputClass {
|
5431
5433
|
static get observedAttributes() {
|
@@ -5437,12 +5439,16 @@ class RawUploadFile extends BaseInputClass {
|
|
5437
5439
|
|
5438
5440
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
5439
5441
|
<style>
|
5440
|
-
|
5442
|
+
:host {
|
5443
|
+
display: flex;
|
5444
|
+
}
|
5445
|
+
:host > div {
|
5441
5446
|
display: flex;
|
5442
5447
|
align-items: center;
|
5443
5448
|
justify-content: center;
|
5444
5449
|
text-align: center;
|
5445
5450
|
flex-direction: column;
|
5451
|
+
width: 100%;
|
5446
5452
|
}
|
5447
5453
|
.button-wrapper {
|
5448
5454
|
position: relative;
|
@@ -5455,11 +5461,10 @@ class RawUploadFile extends BaseInputClass {
|
|
5455
5461
|
opacity: 0;
|
5456
5462
|
}
|
5457
5463
|
</style>
|
5458
|
-
<div
|
5464
|
+
<div>
|
5459
5465
|
<div class="icon"></div>
|
5460
5466
|
<div class="title">
|
5461
5467
|
<span class="title-text"></span>
|
5462
|
-
<span class="required-indicator"></span>
|
5463
5468
|
</div>
|
5464
5469
|
<div class="description"></div>
|
5465
5470
|
<div class="button-wrapper">
|
@@ -5521,6 +5526,10 @@ class RawUploadFile extends BaseInputClass {
|
|
5521
5526
|
this.updateButtonSize(newValue);
|
5522
5527
|
} else if (attrName === 'accept') {
|
5523
5528
|
this.updateInputAccept(newValue);
|
5529
|
+
} else if (attrName === 'readonly') {
|
5530
|
+
this.updateReadOnly(newValue);
|
5531
|
+
} else if (attrName === 'icon') {
|
5532
|
+
this.updateIcon(newValue);
|
5524
5533
|
}
|
5525
5534
|
}
|
5526
5535
|
}
|
@@ -5541,6 +5550,10 @@ class RawUploadFile extends BaseInputClass {
|
|
5541
5550
|
return this.shadowRoot.querySelector('.description');
|
5542
5551
|
}
|
5543
5552
|
|
5553
|
+
get icon() {
|
5554
|
+
return this.shadowRoot.querySelector('.icon');
|
5555
|
+
}
|
5556
|
+
|
5544
5557
|
updateTitle(val) {
|
5545
5558
|
this.title.innerHTML = val;
|
5546
5559
|
}
|
@@ -5568,10 +5581,23 @@ class RawUploadFile extends BaseInputClass {
|
|
5568
5581
|
updateInputAccept(val) {
|
5569
5582
|
this.input.setAttribute('accept', val);
|
5570
5583
|
}
|
5584
|
+
|
5585
|
+
updateReadOnly(val) {
|
5586
|
+
if (val === 'true') {
|
5587
|
+
this.input.setAttribute('disabled', 'true');
|
5588
|
+
} else {
|
5589
|
+
this.input.removeAttribute('disabled');
|
5590
|
+
}
|
5591
|
+
}
|
5592
|
+
|
5593
|
+
updateIcon(val) {
|
5594
|
+
this.icon.style.content = `url(${val})`;
|
5595
|
+
}
|
5571
5596
|
}
|
5572
5597
|
|
5573
|
-
const { host, icon, title, description, requiredIndicator } = {
|
5574
|
-
host: { selector: () => '
|
5598
|
+
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
5599
|
+
host: { selector: () => ':host' },
|
5600
|
+
wrapper: { selector: () => ':host > div' },
|
5575
5601
|
icon: { selector: () => '.icon' },
|
5576
5602
|
title: { selector: () => '.title' },
|
5577
5603
|
description: { selector: () => '.description' },
|
@@ -5584,15 +5610,15 @@ const UploadFileClass = compose(
|
|
5584
5610
|
mappings: {
|
5585
5611
|
fontSize: {},
|
5586
5612
|
fontFamily: {},
|
5587
|
-
|
5613
|
+
borderColor: {},
|
5614
|
+
borderWidth: {},
|
5615
|
+
borderStyle: {},
|
5616
|
+
borderRadius: {},
|
5588
5617
|
hostHeight: { ...host, property: 'height' },
|
5589
|
-
|
5590
|
-
|
5591
|
-
|
5592
|
-
|
5593
|
-
borderWidth: { ...host, property: 'border-width' },
|
5594
|
-
borderStyle: { ...host, property: 'border-style' },
|
5595
|
-
borderRadius: { ...host, property: 'border-radius' },
|
5618
|
+
hostWidth: { ...host, property: 'width' },
|
5619
|
+
hostPadding: { property: 'padding' },
|
5620
|
+
gap: { ...wrapper },
|
5621
|
+
lineHeight: { ...wrapper, property: 'line-height' },
|
5596
5622
|
titleFontSize: { ...title, property: 'font-size' },
|
5597
5623
|
titleFontWeight: { ...title, property: 'font-weight' },
|
5598
5624
|
descriptionFontSize: { ...description, property: 'font-size' },
|
@@ -5600,7 +5626,6 @@ const UploadFileClass = compose(
|
|
5600
5626
|
{ ...title, property: 'color' },
|
5601
5627
|
{ ...description, property: 'color' },
|
5602
5628
|
],
|
5603
|
-
icon: { ...icon, property: 'content' },
|
5604
5629
|
iconSize: { ...icon, property: 'width' },
|
5605
5630
|
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
5606
5631
|
},
|
@@ -6964,10 +6989,8 @@ const vars$1 = UploadFileClass.cssVarList;
|
|
6964
6989
|
|
6965
6990
|
const uploadFile = {
|
6966
6991
|
[vars$1.labelTextColor]: refs.labelTextColor,
|
6967
|
-
[vars$1.requiredIndicator]: refs.requiredIndicator,
|
6968
6992
|
[vars$1.fontFamily]: refs.fontFamily,
|
6969
6993
|
|
6970
|
-
[vars$1.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
|
6971
6994
|
[vars$1.iconSize]: '2em',
|
6972
6995
|
|
6973
6996
|
[vars$1.hostPadding]: '0.75em',
|
@@ -6982,6 +7005,10 @@ const uploadFile = {
|
|
6982
7005
|
[vars$1.borderRadius]: refs.borderRadius,
|
6983
7006
|
[vars$1.borderStyle]: 'dashed',
|
6984
7007
|
|
7008
|
+
_required: {
|
7009
|
+
[vars$1.requiredIndicator]: refs.requiredIndicator,
|
7010
|
+
},
|
7011
|
+
|
6985
7012
|
size: {
|
6986
7013
|
xs: {
|
6987
7014
|
[vars$1.hostHeight]: '196px',
|
@@ -7012,6 +7039,10 @@ const uploadFile = {
|
|
7012
7039
|
[vars$1.lineHeight]: '1.75em',
|
7013
7040
|
},
|
7014
7041
|
},
|
7042
|
+
|
7043
|
+
_fullWidth: {
|
7044
|
+
[vars$1.hostWidth]: refs.width,
|
7045
|
+
},
|
7015
7046
|
};
|
7016
7047
|
|
7017
7048
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|