@descope/web-components-ui 1.0.61 → 1.0.63
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +95 -21
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +967 -784
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/666.js +37 -0
- package/dist/umd/725.js +1 -37
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-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/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/BaseInputClass.js +3 -0
- package/src/components/descope-button/Button.js +14 -10
- package/src/components/descope-checkbox/Checkbox.js +10 -7
- package/src/components/descope-container/Container.js +12 -7
- package/src/components/descope-date-picker/index.js +3 -3
- package/src/components/descope-divider/Divider.js +35 -30
- package/src/components/descope-email-field/EmailField.js +5 -5
- package/src/components/descope-link/Link.js +19 -27
- package/src/components/descope-loader-linear/LoaderLinear.js +12 -7
- package/src/components/descope-loader-radial/LoaderRadial.js +5 -5
- package/src/components/descope-logo/Logo.js +4 -4
- package/src/components/descope-number-field/NumberField.js +5 -5
- package/src/components/descope-passcode/Passcode.js +52 -71
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +43 -71
- package/src/components/descope-password-field/PasswordField.js +5 -5
- package/src/components/descope-switch-toggle/SwitchToggle.js +10 -7
- package/src/components/descope-text/Text.js +18 -9
- package/src/components/descope-text-area/TextArea.js +9 -8
- package/src/components/descope-text-field/TextField.js +5 -5
- package/src/components/descope-text-field/textFieldMappings.js +3 -5
- package/src/constants.js +1 -0
- package/src/dev/index.js +2 -2
- package/src/{componentsHelpers/createProxy/helpers.js → helpers/componentHelpers.js} +13 -5
- package/src/{helpers.js → helpers/index.js} +5 -2
- package/src/helpers/themeHelpers/componentsThemeManager.js +40 -0
- package/src/{themeHelpers → helpers/themeHelpers}/index.js +56 -21
- package/src/index.cjs.js +1 -1
- package/src/index.js +5 -5
- package/src/index.umd.js +4 -0
- package/src/{componentsHelpers/createProxy/index.js → mixins/createProxy.js} +4 -4
- package/src/{componentsHelpers → mixins}/createStyleMixin/helpers.js +14 -15
- package/src/mixins/createStyleMixin/index.js +109 -0
- package/src/mixins/index.js +7 -0
- package/src/mixins/inputMixin.js +173 -0
- package/src/mixins/proxyInputMixin.js +152 -0
- package/src/theme/components/button.js +2 -2
- package/src/theme/components/checkbox.js +2 -1
- package/src/theme/components/container.js +2 -2
- package/src/theme/components/divider.js +17 -9
- package/src/theme/components/link.js +1 -1
- package/src/theme/components/loader/loaderLinear.js +1 -1
- package/src/theme/components/loader/loaderRadial.js +1 -1
- package/src/theme/components/text.js +1 -1
- package/src/theme/components/textArea.js +2 -1
- package/src/theme/components/textField.js +2 -2
- package/src/theme/globals.js +3 -3
- package/dist/umd/832.js +0 -1
- package/dist/umd/942.js +0 -1
- package/dist/umd/descope-combo-index-js.js +0 -1
- package/src/components/descope-combo/index.js +0 -27
- package/src/componentsHelpers/createStyleMixin/index.js +0 -114
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +0 -95
- package/src/componentsHelpers/index.js +0 -15
- package/src/componentsHelpers/inputMixin.js +0 -94
- /package/dist/umd/{725.js.LICENSE.txt → 666.js.LICENSE.txt} +0 -0
- /package/src/{themeHelpers/processColors.js → helpers/themeHelpers/colorsHelpers.js} +0 -0
- /package/src/{componentsHelpers → mixins}/componentNameValidationMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/draggableMixin.js +0 -0
- /package/src/{componentsHelpers → mixins}/hoverableMixin.js +0 -0
@@ -1,14 +1,11 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
|
-
compose,
|
6
4
|
componentNameValidationMixin
|
7
|
-
} from '../../
|
8
|
-
import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
|
9
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
5
|
+
} from '../../mixins';
|
10
6
|
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
11
|
-
import
|
7
|
+
import { compose } from '../../helpers';
|
8
|
+
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
12
9
|
|
13
10
|
export const componentName = getComponentName('divider');
|
14
11
|
class RawDivider extends DescopeBaseClass {
|
@@ -17,33 +14,51 @@ class RawDivider extends DescopeBaseClass {
|
|
17
14
|
}
|
18
15
|
constructor() {
|
19
16
|
super();
|
17
|
+
|
20
18
|
const template = document.createElement('template');
|
21
19
|
template.innerHTML = `
|
22
20
|
<style>
|
23
21
|
:host > div {
|
24
22
|
display: flex;
|
25
23
|
height: 100%;
|
24
|
+
width: 100%;
|
26
25
|
}
|
27
26
|
:host > div::before,
|
28
27
|
:host > div::after {
|
29
28
|
content: '';
|
30
29
|
flex-grow: 1;
|
31
|
-
width: 100%;
|
32
30
|
}
|
33
|
-
|
31
|
+
|
32
|
+
descope-text {
|
34
33
|
flex-grow: 0;
|
35
34
|
flex-shrink: 0;
|
36
35
|
}
|
36
|
+
|
37
|
+
:host(:empty) descope-text {
|
38
|
+
display: none;
|
39
|
+
}
|
40
|
+
|
41
|
+
:host([vertical="true"]) div {
|
42
|
+
width: fit-content;
|
43
|
+
}
|
44
|
+
|
37
45
|
</style>
|
38
46
|
<div>
|
39
|
-
<
|
40
|
-
|
47
|
+
<descope-text>
|
48
|
+
<slot></slot>
|
49
|
+
</descope-text>
|
41
50
|
</div>
|
42
51
|
`;
|
43
52
|
this.attachShadow({ mode: 'open' });
|
44
53
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
45
54
|
|
46
55
|
this.baseSelector = ':host > div';
|
56
|
+
|
57
|
+
this.textComponent = this.shadowRoot.querySelector('descope-text');
|
58
|
+
|
59
|
+
forwardAttrs(this, this.textComponent, {
|
60
|
+
includeAttrs: ['mode', 'variant', 'italic']
|
61
|
+
})
|
47
62
|
}
|
48
63
|
}
|
49
64
|
|
@@ -51,39 +66,29 @@ const selectors = {
|
|
51
66
|
root: { selector: '' },
|
52
67
|
before: { selector: '::before' },
|
53
68
|
after: { selector: '::after' },
|
54
|
-
|
69
|
+
text: { selector: 'descope-text' },
|
70
|
+
host: { selector: () => ':host' },
|
55
71
|
};
|
56
72
|
|
57
|
-
const { root, before, after,
|
73
|
+
const { root, before, after, text, host } = selectors;
|
58
74
|
|
59
75
|
const Divider = compose(
|
60
|
-
enforceNestingElementsStylesMixin({
|
61
|
-
nestingElementTagName: 'descope-text',
|
62
|
-
nestingElementDestSlotName: 'text',
|
63
|
-
forwardAttrOptions: {
|
64
|
-
includeAttrs: ['mode', 'variant'],
|
65
|
-
excludeAttrs: []
|
66
|
-
}
|
67
|
-
}),
|
68
76
|
createStyleMixin({
|
69
77
|
mappings: {
|
78
|
+
maxTextWidth: { ...text, property: 'max-width' },
|
70
79
|
minHeight: root,
|
71
80
|
alignItems: root,
|
72
81
|
alignSelf: root,
|
73
82
|
flexDirection: root,
|
74
|
-
|
75
|
-
width:
|
76
|
-
|
83
|
+
textPadding: {...text, property: 'padding'},
|
84
|
+
width: host,
|
85
|
+
padding: host,
|
77
86
|
backgroundColor: [before, after],
|
78
87
|
opacity: [before, after],
|
79
|
-
textWidth: { ...
|
88
|
+
textWidth: { ...text, property: 'width' },
|
89
|
+
dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
|
90
|
+
dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
|
80
91
|
},
|
81
|
-
nestedMappings: {
|
82
|
-
fontStyle: {
|
83
|
-
selector: Text.componentName,
|
84
|
-
property: Text.cssVarList.fontStyle
|
85
|
-
}
|
86
|
-
}
|
87
92
|
}),
|
88
93
|
draggableMixin,
|
89
94
|
componentNameValidationMixin
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
4
|
createProxy,
|
6
|
-
|
7
|
-
compose,
|
5
|
+
proxyInputMixin,
|
8
6
|
componentNameValidationMixin
|
9
|
-
} from '../../
|
7
|
+
} from '../../mixins';
|
10
8
|
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
9
|
+
import { compose } from '../../helpers';
|
10
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('email-field');
|
13
13
|
|
@@ -20,7 +20,7 @@ const EmailField = compose(
|
|
20
20
|
}
|
21
21
|
}),
|
22
22
|
draggableMixin,
|
23
|
-
|
23
|
+
proxyInputMixin,
|
24
24
|
componentNameValidationMixin
|
25
25
|
)(
|
26
26
|
createProxy({
|
@@ -1,16 +1,13 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
|
-
|
6
|
-
|
7
|
-
} from '../../
|
8
|
-
import { forwardAttrs } from '../../componentsHelpers/createProxy/helpers';
|
9
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
10
|
-
import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
|
11
|
-
import { hoverableMixin } from '../../componentsHelpers/hoverableMixin';
|
4
|
+
componentNameValidationMixin,
|
5
|
+
hoverableMixin
|
6
|
+
} from '../../mixins';
|
12
7
|
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
13
8
|
import Text from '../descope-text/Text';
|
9
|
+
import { compose } from '../../helpers';
|
10
|
+
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
14
11
|
|
15
12
|
export const componentName = getComponentName('link');
|
16
13
|
class RawLink extends DescopeBaseClass {
|
@@ -32,7 +29,9 @@ class RawLink extends DescopeBaseClass {
|
|
32
29
|
</style>
|
33
30
|
<div>
|
34
31
|
<a>
|
35
|
-
<
|
32
|
+
<descope-text>
|
33
|
+
<slot></slot>
|
34
|
+
</descope-text>
|
36
35
|
</a>
|
37
36
|
</div>
|
38
37
|
`;
|
@@ -40,47 +39,40 @@ class RawLink extends DescopeBaseClass {
|
|
40
39
|
this.attachShadow({ mode: 'open' });
|
41
40
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
42
41
|
|
43
|
-
forwardAttrs(this
|
42
|
+
forwardAttrs(this, this.shadowRoot.querySelector('a'), {
|
44
43
|
includeAttrs: ['href', 'target', 'tooltip'],
|
45
44
|
mapAttrs: {
|
46
45
|
tooltip: 'title'
|
47
46
|
}
|
48
47
|
});
|
49
48
|
|
49
|
+
forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
|
50
|
+
includeAttrs: ['mode', 'variant'],
|
51
|
+
});
|
52
|
+
|
50
53
|
this.baseSelector = ':host > div';
|
51
54
|
}
|
52
55
|
}
|
53
56
|
|
54
57
|
const selectors = {
|
55
|
-
|
58
|
+
host: { selector: () => 'host' },
|
59
|
+
anchor: { selector: '> a' },
|
60
|
+
text: { selector: Text.componentName }
|
56
61
|
};
|
57
62
|
|
58
|
-
const { anchor } = selectors;
|
63
|
+
const { anchor, text, host } = selectors;
|
59
64
|
|
60
65
|
const Link = compose(
|
61
|
-
enforceNestingElementsStylesMixin({
|
62
|
-
nestingElementTagName: 'descope-text',
|
63
|
-
nestingElementDestSlotName: 'text',
|
64
|
-
forwardAttrOptions: {
|
65
|
-
includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
|
66
|
-
}
|
67
|
-
}),
|
68
66
|
createStyleMixin({
|
69
67
|
mappings: {
|
70
|
-
width:
|
68
|
+
width: host,
|
71
69
|
textAlign: {},
|
72
|
-
color: anchor,
|
70
|
+
color: [anchor, { ...text, property: Text.cssVarList.color }],
|
73
71
|
cursor: anchor,
|
74
72
|
borderBottomWidth: anchor,
|
75
73
|
borderBottomStyle: anchor,
|
76
74
|
borderBottomColor: anchor
|
77
75
|
},
|
78
|
-
nestedMappings: {
|
79
|
-
color: {
|
80
|
-
selector: Text.componentName,
|
81
|
-
property: Text.cssVarList.color
|
82
|
-
}
|
83
|
-
}
|
84
76
|
}),
|
85
77
|
hoverableMixin(anchor.selector),
|
86
78
|
draggableMixin,
|
@@ -1,12 +1,11 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
|
-
compose,
|
6
4
|
componentNameValidationMixin
|
7
|
-
} from '../../
|
8
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
5
|
+
} from '../../mixins';
|
9
6
|
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
7
|
+
import { compose } from '../../helpers';
|
8
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
10
9
|
|
11
10
|
export const componentName = getComponentName('loader-linear');
|
12
11
|
|
@@ -25,6 +24,7 @@ class RawLoaderLinear extends DescopeBaseClass {
|
|
25
24
|
}
|
26
25
|
:host {
|
27
26
|
position: relative;
|
27
|
+
display: inline-block
|
28
28
|
}
|
29
29
|
div::after {
|
30
30
|
content: '';
|
@@ -32,6 +32,10 @@ class RawLoaderLinear extends DescopeBaseClass {
|
|
32
32
|
position: absolute;
|
33
33
|
left: 0;
|
34
34
|
}
|
35
|
+
|
36
|
+
:host > div {
|
37
|
+
width: 100%;
|
38
|
+
}
|
35
39
|
</style>
|
36
40
|
<div></div>
|
37
41
|
`;
|
@@ -45,16 +49,17 @@ class RawLoaderLinear extends DescopeBaseClass {
|
|
45
49
|
|
46
50
|
const selectors = {
|
47
51
|
root: {},
|
48
|
-
after: { selector: '::after' }
|
52
|
+
after: { selector: '::after' },
|
53
|
+
host: { selector: () => ':host' }
|
49
54
|
};
|
50
55
|
|
51
|
-
const { root, after } = selectors;
|
56
|
+
const { root, after, host } = selectors;
|
52
57
|
|
53
58
|
const LoaderLinear = compose(
|
54
59
|
createStyleMixin({
|
55
60
|
mappings: {
|
56
61
|
display: root,
|
57
|
-
width:
|
62
|
+
width: host,
|
58
63
|
height: [root, after],
|
59
64
|
borderRadius: [root, after],
|
60
65
|
surfaceColor: [{ property: 'background-color' }],
|
@@ -1,12 +1,11 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
|
-
compose,
|
6
4
|
componentNameValidationMixin
|
7
|
-
} from '../../
|
8
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
5
|
+
} from '../../mixins';
|
9
6
|
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
7
|
+
import { compose } from '../../helpers';
|
8
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
10
9
|
|
11
10
|
export const componentName = getComponentName('loader-radial');
|
12
11
|
|
@@ -25,6 +24,7 @@ class RawLoaderRadial extends DescopeBaseClass {
|
|
25
24
|
}
|
26
25
|
:host {
|
27
26
|
position: relative;
|
27
|
+
display: inline-flex;
|
28
28
|
}
|
29
29
|
:host > div {
|
30
30
|
animation-name: spin;
|
@@ -44,7 +44,7 @@ const LoaderRadial = compose(
|
|
44
44
|
createStyleMixin({
|
45
45
|
mappings: {
|
46
46
|
display: {},
|
47
|
-
width:
|
47
|
+
width: {},
|
48
48
|
height: {},
|
49
49
|
spinnerWidth: { property: 'border-width' },
|
50
50
|
spinnerStyle: { property: 'border-style' },
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
|
-
compose,
|
6
4
|
componentNameValidationMixin
|
7
|
-
} from '../../
|
5
|
+
} from '../../mixins';
|
8
6
|
import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
|
7
|
+
import { compose } from '../../helpers';
|
8
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
9
9
|
|
10
10
|
export const componentName = getComponentName('logo');
|
11
11
|
|
@@ -47,7 +47,7 @@ const Logo = compose(
|
|
47
47
|
|
48
48
|
style = `
|
49
49
|
:host {
|
50
|
-
display: inline-
|
50
|
+
display: inline-flex;
|
51
51
|
}
|
52
52
|
:host > div {
|
53
53
|
display: inline-block;
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
4
|
createProxy,
|
6
|
-
|
7
|
-
compose,
|
5
|
+
proxyInputMixin,
|
8
6
|
componentNameValidationMixin
|
9
|
-
} from '../../
|
7
|
+
} from '../../mixins';
|
10
8
|
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
9
|
+
import { compose } from '../../helpers';
|
10
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('number-field');
|
13
13
|
|
@@ -20,7 +20,7 @@ const NumberField = compose(
|
|
20
20
|
}
|
21
21
|
}),
|
22
22
|
draggableMixin,
|
23
|
-
|
23
|
+
proxyInputMixin,
|
24
24
|
componentNameValidationMixin
|
25
25
|
)(
|
26
26
|
createProxy({
|
@@ -1,18 +1,17 @@
|
|
1
1
|
import {
|
2
|
-
getComponentName,
|
3
2
|
createStyleMixin,
|
4
3
|
draggableMixin,
|
5
4
|
createProxy,
|
6
|
-
|
7
|
-
compose,
|
5
|
+
proxyInputMixin,
|
8
6
|
componentNameValidationMixin
|
9
|
-
} from '../../
|
10
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
7
|
+
} from '../../mixins';
|
11
8
|
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
12
|
-
export const componentName = getComponentName('passcode');
|
13
|
-
import TextField from '../descope-text-field/TextField';
|
14
9
|
import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
|
15
|
-
import
|
10
|
+
import TextField from '../descope-text-field/TextField'
|
11
|
+
import { compose } from '../../helpers';
|
12
|
+
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
13
|
+
|
14
|
+
export const componentName = getComponentName('passcode');
|
16
15
|
|
17
16
|
const customMixin = (superclass) =>
|
18
17
|
class DraggableMixinClass extends superclass {
|
@@ -29,28 +28,21 @@ const customMixin = (superclass) =>
|
|
29
28
|
const template = document.createElement('template');
|
30
29
|
|
31
30
|
template.innerHTML = `
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
31
|
+
<${descopeInternalComponentName}
|
32
|
+
bordered="true"
|
33
|
+
name="code"
|
34
|
+
tabindex="-1"
|
35
|
+
slot="input"
|
36
|
+
></${descopeInternalComponentName}>
|
37
|
+
`;
|
39
38
|
|
40
|
-
|
41
|
-
const slotEle = Object.assign(document.createElement('slot'), {
|
42
|
-
name: 'input',
|
43
|
-
slot: 'input',
|
44
|
-
part: 'input'
|
45
|
-
});
|
46
|
-
this.proxyElement.appendChild(slotEle);
|
39
|
+
this.proxyElement.appendChild(template.content.cloneNode(true));
|
47
40
|
|
48
41
|
// we want to control when the element is out of focus
|
49
42
|
// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
|
50
43
|
this.proxyElement._setFocused = () => { };
|
51
44
|
|
52
|
-
this.shadowRoot.
|
53
|
-
this.inputElement = this.querySelector(descopeInternalComponentName);
|
45
|
+
this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
|
54
46
|
|
55
47
|
forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] })
|
56
48
|
|
@@ -64,20 +56,24 @@ const customMixin = (superclass) =>
|
|
64
56
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
65
57
|
textFieldMappings;
|
66
58
|
|
59
|
+
const { digitField, label, requiredIndicator } = {
|
60
|
+
digitField: { selector: () => TextField.componentName },
|
61
|
+
label: { selector: '> label' },
|
62
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
|
63
|
+
}
|
64
|
+
|
65
|
+
const textVars = TextField.cssVarList
|
66
|
+
|
67
67
|
const Passcode = compose(
|
68
68
|
createStyleMixin({
|
69
69
|
mappings: {
|
70
|
-
...restTextFieldMappings
|
70
|
+
...restTextFieldMappings,
|
71
|
+
borderColor: { ...digitField, property: textVars.borderColor },
|
72
|
+
color: [restTextFieldMappings.color, label, requiredIndicator],
|
71
73
|
},
|
72
|
-
nestedMappings: {
|
73
|
-
borderColor: {
|
74
|
-
selector: TextField.componentName,
|
75
|
-
property: TextField.cssVarList.borderColor
|
76
|
-
}
|
77
|
-
}
|
78
74
|
}),
|
79
75
|
draggableMixin,
|
80
|
-
|
76
|
+
proxyInputMixin,
|
81
77
|
componentNameValidationMixin,
|
82
78
|
customMixin
|
83
79
|
)(
|
@@ -87,60 +83,45 @@ const Passcode = compose(
|
|
87
83
|
style: () => `
|
88
84
|
:host {
|
89
85
|
--vaadin-field-default-width: auto;
|
86
|
+
display: inline-block;
|
90
87
|
}
|
91
|
-
|
92
|
-
::slotted([slot='input']) {
|
88
|
+
descope-passcode-internal {
|
93
89
|
-webkit-mask-image: none;
|
94
90
|
display: flex;
|
95
91
|
gap: 2px;
|
96
92
|
align-items: center;
|
97
93
|
padding: 0;
|
98
94
|
}
|
99
|
-
|
100
95
|
vaadin-text-field::part(input-field) {
|
101
96
|
background-color: transparent;
|
102
97
|
padding: 0;
|
98
|
+
overflow: hidden;
|
103
99
|
}
|
104
|
-
|
105
|
-
|
100
|
+
vaadin-text-field {
|
101
|
+
margin: 0;
|
102
|
+
padding: 0;
|
103
|
+
}
|
104
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
105
|
+
opacity: 1;
|
106
|
+
}
|
107
|
+
vaadin-text-field > label,
|
108
|
+
vaadin-text-field::part(input-field) {
|
109
|
+
cursor: pointer;
|
110
|
+
}
|
111
|
+
vaadin-text-field::part(input-field):focus {
|
112
|
+
cursor: text;
|
113
|
+
}
|
114
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
115
|
+
font-size: "12px";
|
116
|
+
content: "*";
|
117
|
+
}
|
118
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
119
|
+
border: 0 solid;
|
120
|
+
}
|
106
121
|
`,
|
107
122
|
excludeAttrsSync: ['tabindex'],
|
108
123
|
componentName
|
109
124
|
})
|
110
125
|
);
|
111
126
|
|
112
|
-
const overrides = `
|
113
|
-
:host {
|
114
|
-
display: inline-block;
|
115
|
-
}
|
116
|
-
|
117
|
-
vaadin-text-field {
|
118
|
-
margin: 0;
|
119
|
-
padding: 0;
|
120
|
-
}
|
121
|
-
vaadin-text-field::part(input-field) {
|
122
|
-
overflow: hidden;
|
123
|
-
}
|
124
|
-
vaadin-text-field[readonly] > input:placeholder-shown {
|
125
|
-
opacity: 1;
|
126
|
-
}
|
127
|
-
|
128
|
-
vaadin-text-field > label,
|
129
|
-
vaadin-text-field::part(input-field) {
|
130
|
-
cursor: pointer;
|
131
|
-
color: var(${Passcode.cssVarList.color});
|
132
|
-
}
|
133
|
-
vaadin-text-field::part(input-field):focus {
|
134
|
-
cursor: text;
|
135
|
-
}
|
136
|
-
vaadin-text-field[required]::part(required-indicator)::after {
|
137
|
-
font-size: "12px";
|
138
|
-
content: "*";
|
139
|
-
color: var(${Passcode.cssVarList.color});
|
140
|
-
}
|
141
|
-
vaadin-text-field[readonly]::part(input-field)::after {
|
142
|
-
border: 0 solid;
|
143
|
-
}
|
144
|
-
`;
|
145
|
-
|
146
127
|
export default Passcode;
|