@descope/web-components-ui 1.0.242 → 1.0.244
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +74 -53
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +113 -66
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button-selection-group/descope-button-selection-group-internal/index.js +0 -1
- package/src/components/descope-button-selection-group/index.js +1 -0
- package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +1 -1
- package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js +2 -1
- package/src/components/descope-passcode/PasscodeClass.js +9 -1
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +26 -2
- package/src/components/descope-passcode/index.js +1 -0
- package/src/index.cjs.js +1 -0
- package/src/index.js +1 -1
- package/src/theme/components/inputWrapper.js +2 -0
- package/src/theme/components/passcode.js +11 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -2902,6 +2902,8 @@ const [theme$1, refs, vars$u] = createHelperVars(
|
|
2902
2902
|
|
2903
2903
|
direction: globalRefs$h.direction,
|
2904
2904
|
|
2905
|
+
overlayOpacity: '0.3',
|
2906
|
+
|
2905
2907
|
size: {
|
2906
2908
|
xs: { fontSize: '12px', chipFontSize: '10px' },
|
2907
2909
|
sm: { fontSize: '14px', chipFontSize: '12px' },
|
@@ -4568,7 +4570,53 @@ const componentName$m = getComponentName('passcode-internal');
|
|
4568
4570
|
|
4569
4571
|
createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
4570
4572
|
|
4571
|
-
const componentName$l = getComponentName('
|
4573
|
+
const componentName$l = getComponentName('loader-radial');
|
4574
|
+
|
4575
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
|
4576
|
+
constructor() {
|
4577
|
+
super();
|
4578
|
+
|
4579
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4580
|
+
<style>
|
4581
|
+
@keyframes spin {
|
4582
|
+
0% { transform: rotate(0deg); }
|
4583
|
+
100% { transform: rotate(360deg); }
|
4584
|
+
}
|
4585
|
+
:host {
|
4586
|
+
position: relative;
|
4587
|
+
display: inline-flex;
|
4588
|
+
}
|
4589
|
+
:host > div {
|
4590
|
+
animation-name: spin;
|
4591
|
+
}
|
4592
|
+
</style>
|
4593
|
+
<div></div>
|
4594
|
+
`;
|
4595
|
+
}
|
4596
|
+
}
|
4597
|
+
|
4598
|
+
const LoaderRadialClass = compose(
|
4599
|
+
createStyleMixin({
|
4600
|
+
mappings: {
|
4601
|
+
hostDisplay: { property: 'display' },
|
4602
|
+
spinnerSize: [{ property: 'width' }, { property: 'height' }],
|
4603
|
+
spinnerBorderWidth: { property: 'border-width' },
|
4604
|
+
spinnerBorderStyle: { property: 'border-style' },
|
4605
|
+
spinnerBorderRadius: { property: 'border-radius' },
|
4606
|
+
spinnerQuadrant1Color: { property: 'border-top-color' },
|
4607
|
+
spinnerQuadrant2Color: { property: 'border-bottom-color' },
|
4608
|
+
spinnerQuadrant3Color: { property: 'border-right-color' },
|
4609
|
+
spinnerQuadrant4Color: { property: 'border-left-color' },
|
4610
|
+
animationDuration: {},
|
4611
|
+
animationTimingFunction: {},
|
4612
|
+
animationIterationCount: {},
|
4613
|
+
},
|
4614
|
+
}),
|
4615
|
+
draggableMixin,
|
4616
|
+
componentNameValidationMixin
|
4617
|
+
)(RawLoaderRadial);
|
4618
|
+
|
4619
|
+
const componentName$k = getComponentName('passcode');
|
4572
4620
|
|
4573
4621
|
const observedAttributes$3 = ['digits'];
|
4574
4622
|
|
@@ -4599,7 +4647,7 @@ const customMixin$5 = (superclass) =>
|
|
4599
4647
|
|
4600
4648
|
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
4601
4649
|
|
4602
|
-
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
4650
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
|
4603
4651
|
}
|
4604
4652
|
|
4605
4653
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
@@ -4630,6 +4678,7 @@ const {
|
|
4630
4678
|
};
|
4631
4679
|
|
4632
4680
|
const textVars$2 = TextFieldClass.cssVarList;
|
4681
|
+
const loaderVars = LoaderRadialClass.cssVarList;
|
4633
4682
|
|
4634
4683
|
const PasscodeClass = compose(
|
4635
4684
|
createStyleMixin({
|
@@ -4660,6 +4709,8 @@ const PasscodeClass = compose(
|
|
4660
4709
|
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
4661
4710
|
|
4662
4711
|
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
|
4712
|
+
overlayOpacity: { ...internalWrapper$1, property: 'opacity' },
|
4713
|
+
spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
|
4663
4714
|
},
|
4664
4715
|
}),
|
4665
4716
|
draggableMixin,
|
@@ -4684,6 +4735,10 @@ const PasscodeClass = compose(
|
|
4684
4735
|
background-color: transparent;
|
4685
4736
|
}
|
4686
4737
|
|
4738
|
+
:host([loading="true"]) descope-passcode-internal .loader-container {
|
4739
|
+
display: block;
|
4740
|
+
}
|
4741
|
+
|
4687
4742
|
descope-passcode-internal {
|
4688
4743
|
-webkit-mask-image: none;
|
4689
4744
|
padding: 0;
|
@@ -4737,7 +4792,7 @@ const PasscodeClass = compose(
|
|
4737
4792
|
${resetInputCursor('vaadin-text-field')}
|
4738
4793
|
`,
|
4739
4794
|
excludeAttrsSync: ['tabindex'],
|
4740
|
-
componentName: componentName$
|
4795
|
+
componentName: componentName$k,
|
4741
4796
|
})
|
4742
4797
|
);
|
4743
4798
|
|
@@ -4760,9 +4815,20 @@ const passcode = {
|
|
4760
4815
|
[vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
4761
4816
|
[vars$g.digitSize]: refs.inputHeight,
|
4762
4817
|
|
4818
|
+
size: {
|
4819
|
+
xs: { [vars$g.spinnerSize]: '15px' },
|
4820
|
+
sm: { [vars$g.spinnerSize]: '20px' },
|
4821
|
+
md: { [vars$g.spinnerSize]: '20px' },
|
4822
|
+
lg: { [vars$g.spinnerSize]: '20px' },
|
4823
|
+
},
|
4824
|
+
|
4763
4825
|
_hideCursor: {
|
4764
4826
|
[vars$g.digitCaretTextColor]: 'transparent',
|
4765
4827
|
},
|
4828
|
+
|
4829
|
+
_loading: {
|
4830
|
+
[vars$g.overlayOpacity]: refs.overlayOpacity,
|
4831
|
+
},
|
4766
4832
|
};
|
4767
4833
|
|
4768
4834
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
@@ -4771,11 +4837,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
4771
4837
|
vars: vars$g
|
4772
4838
|
});
|
4773
4839
|
|
4774
|
-
const componentName$
|
4840
|
+
const componentName$j = getComponentName('loader-linear');
|
4775
4841
|
|
4776
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
4842
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
4777
4843
|
static get componentName() {
|
4778
|
-
return componentName$
|
4844
|
+
return componentName$j;
|
4779
4845
|
}
|
4780
4846
|
|
4781
4847
|
constructor() {
|
@@ -4881,52 +4947,6 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
4881
4947
|
vars: vars$f
|
4882
4948
|
});
|
4883
4949
|
|
4884
|
-
const componentName$j = getComponentName('loader-radial');
|
4885
|
-
|
4886
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
|
4887
|
-
constructor() {
|
4888
|
-
super();
|
4889
|
-
|
4890
|
-
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4891
|
-
<style>
|
4892
|
-
@keyframes spin {
|
4893
|
-
0% { transform: rotate(0deg); }
|
4894
|
-
100% { transform: rotate(360deg); }
|
4895
|
-
}
|
4896
|
-
:host {
|
4897
|
-
position: relative;
|
4898
|
-
display: inline-flex;
|
4899
|
-
}
|
4900
|
-
:host > div {
|
4901
|
-
animation-name: spin;
|
4902
|
-
}
|
4903
|
-
</style>
|
4904
|
-
<div></div>
|
4905
|
-
`;
|
4906
|
-
}
|
4907
|
-
}
|
4908
|
-
|
4909
|
-
const LoaderRadialClass = compose(
|
4910
|
-
createStyleMixin({
|
4911
|
-
mappings: {
|
4912
|
-
hostDisplay: { property: 'display' },
|
4913
|
-
spinnerSize: [{ property: 'width' }, { property: 'height' }],
|
4914
|
-
spinnerBorderWidth: { property: 'border-width' },
|
4915
|
-
spinnerBorderStyle: { property: 'border-style' },
|
4916
|
-
spinnerBorderRadius: { property: 'border-radius' },
|
4917
|
-
spinnerQuadrant1Color: { property: 'border-top-color' },
|
4918
|
-
spinnerQuadrant2Color: { property: 'border-bottom-color' },
|
4919
|
-
spinnerQuadrant3Color: { property: 'border-right-color' },
|
4920
|
-
spinnerQuadrant4Color: { property: 'border-left-color' },
|
4921
|
-
animationDuration: {},
|
4922
|
-
animationTimingFunction: {},
|
4923
|
-
animationIterationCount: {},
|
4924
|
-
},
|
4925
|
-
}),
|
4926
|
-
draggableMixin,
|
4927
|
-
componentNameValidationMixin
|
4928
|
-
)(RawLoaderRadial);
|
4929
|
-
|
4930
4950
|
const globalRefs$8 = getThemeRefs(globals);
|
4931
4951
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
4932
4952
|
|
@@ -4942,7 +4962,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
4942
4962
|
},
|
4943
4963
|
},
|
4944
4964
|
},
|
4945
|
-
componentName$
|
4965
|
+
componentName$l
|
4946
4966
|
);
|
4947
4967
|
|
4948
4968
|
const loaderRadial = {
|
@@ -9634,6 +9654,7 @@ exports.CheckboxClass = CheckboxClass;
|
|
9634
9654
|
exports.ContainerClass = ContainerClass;
|
9635
9655
|
exports.DividerClass = DividerClass;
|
9636
9656
|
exports.EmailFieldClass = EmailFieldClass;
|
9657
|
+
exports.GridClass = GridClass;
|
9637
9658
|
exports.ImageClass = ImageClass;
|
9638
9659
|
exports.LinkClass = LinkClass;
|
9639
9660
|
exports.LoaderLinearClass = LoaderLinearClass;
|