@descope/web-components-ui 1.0.106 → 1.0.108
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +60 -0
- package/dist/index.esm.js +86 -83
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-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-image-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-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-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-phone-field-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/package.json +2 -2
- package/src/components/boolean-fields/descope-checkbox/Checkbox.js +2 -2
- package/src/components/boolean-fields/descope-checkbox/index.js +3 -3
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggle.js +2 -2
- package/src/components/boolean-fields/descope-switch-toggle/index.js +3 -3
- package/src/components/descope-button/Button.js +2 -2
- package/src/components/descope-button/index.js +3 -3
- package/src/components/descope-combo-box/ComboBox.js +2 -2
- package/src/components/descope-combo-box/index.js +3 -3
- package/src/components/descope-container/index.js +3 -3
- package/src/components/descope-divider/Divider.js +2 -2
- package/src/components/descope-divider/index.js +3 -3
- package/src/components/descope-email-field/EmailField.js +2 -2
- package/src/components/descope-email-field/index.js +3 -3
- package/src/components/descope-image/Image.js +4 -4
- package/src/components/descope-image/index.js +3 -3
- package/src/components/descope-link/Link.js +3 -3
- package/src/components/descope-link/index.js +3 -3
- package/src/components/descope-loader-linear/LoaderLinear.js +2 -2
- package/src/components/descope-loader-linear/index.js +3 -3
- package/src/components/descope-loader-radial/LoaderRadial.js +2 -2
- package/src/components/descope-loader-radial/index.js +3 -3
- package/src/components/descope-logo/Logo.js +10 -6
- package/src/components/descope-logo/index.js +3 -3
- package/src/components/descope-new-password/NewPassword.js +2 -2
- package/src/components/descope-new-password/index.js +3 -3
- package/src/components/descope-number-field/NumberField.js +2 -2
- package/src/components/descope-number-field/index.js +3 -3
- package/src/components/descope-passcode/Passcode.js +3 -3
- package/src/components/descope-passcode/index.js +3 -3
- package/src/components/descope-password-field/PasswordField.js +2 -2
- package/src/components/descope-password-field/index.js +3 -3
- package/src/components/descope-phone-field/PhoneField.js +3 -3
- package/src/components/descope-phone-field/index.js +3 -3
- package/src/components/descope-text/Text.js +2 -2
- package/src/components/descope-text/index.js +3 -3
- package/src/components/descope-text-area/TextArea.js +2 -2
- package/src/components/descope-text-area/index.js +3 -3
- package/src/components/descope-text-field/TextField.js +2 -2
- package/src/components/descope-text-field/index.js +3 -3
- package/src/theme/components/logo.js +1 -2
package/dist/index.d.ts
ADDED
@@ -0,0 +1,60 @@
|
|
1
|
+
declare module '@descope/web-components-ui';
|
2
|
+
|
3
|
+
export {
|
4
|
+
globalsThemeToStyle,
|
5
|
+
createComponentsTheme,
|
6
|
+
themeToStyle,
|
7
|
+
componentsThemeManager
|
8
|
+
} from './helpers/themeHelpers';
|
9
|
+
export { genColor } from './helpers/themeHelpers/colorsHelpers';
|
10
|
+
export { default as defaultTheme } from './theme';
|
11
|
+
|
12
|
+
export { ButtonClass } from './src/components/descope-button';
|
13
|
+
export { CheckboxClass } from './src/components/boolean-fields/descope-checkbox';
|
14
|
+
export { SwitchToggleClass } from './src/components/boolean-fields/descope-switch-toggle';
|
15
|
+
export { LoaderLinearClass } from './src/components/descope-loader-linear';
|
16
|
+
export { LoaderRadialClass } from './src/components/descope-loader-radial';
|
17
|
+
export { ContainerClass } from './src/components/descope-container';
|
18
|
+
export { DividerClass } from './src/components/descope-divider';
|
19
|
+
export { EmailFieldClass } from './src/components/descope-email-field';
|
20
|
+
export { LinkClass } from './src/components/descope-link';
|
21
|
+
export { LogoClass } from './src/components/descope-logo';
|
22
|
+
export { NumberFieldClass } from './src/components/descope-number-field';
|
23
|
+
export { PasscodeClass } from './src/components/descope-passcode';
|
24
|
+
export { PasswordFieldClass } from './src/components/descope-password-field';
|
25
|
+
export { TextClass } from './src/components/descope-text';
|
26
|
+
export { TextAreaClass } from './src/components/descope-text-area';
|
27
|
+
export { TextFieldClass } from './src/components/descope-text-field';
|
28
|
+
export { ImageClass } from './src/components/descope-image';
|
29
|
+
export { PhoneFieldClass } from './src/components/descope-phone-field';
|
30
|
+
export { NewPasswordClass } from './src/components/descope-new-password';
|
31
|
+
|
32
|
+
export type FontFamilies = Record<string, any>;
|
33
|
+
export type FontFamily = Record<string, any>;
|
34
|
+
export type TypographyVariants = keyof Theme['globals']['typography'];
|
35
|
+
export type VariantsList = Array<TypographyVariants>;
|
36
|
+
|
37
|
+
export type FontDef = {
|
38
|
+
label: string;
|
39
|
+
url: string;
|
40
|
+
family: string[];
|
41
|
+
};
|
42
|
+
|
43
|
+
export type Theme = {
|
44
|
+
globals: {
|
45
|
+
colors: Record<string, string>;
|
46
|
+
fonts: Record<string, any>;
|
47
|
+
typography: Record<string, any>;
|
48
|
+
shadow: Record<string, string>;
|
49
|
+
spacing: Record<string, string>;
|
50
|
+
};
|
51
|
+
components: {
|
52
|
+
button: Record<string, string>;
|
53
|
+
textField: Record<string, string>;
|
54
|
+
logo: Record<string, string>;
|
55
|
+
container: Record<string, string>;
|
56
|
+
link: Record<string, string>;
|
57
|
+
button: Record<string, string>;
|
58
|
+
text: Record<string, string>;
|
59
|
+
};
|
60
|
+
};
|
package/dist/index.esm.js
CHANGED
@@ -1136,7 +1136,7 @@ const { host: host$a, label: label$7 } = {
|
|
1136
1136
|
label: { selector: '::part(label)' },
|
1137
1137
|
};
|
1138
1138
|
|
1139
|
-
const
|
1139
|
+
const ButtonClass = compose(
|
1140
1140
|
createStyleMixin({
|
1141
1141
|
mappings: {
|
1142
1142
|
color: {},
|
@@ -1206,7 +1206,7 @@ const loadingIndicatorStyles = `
|
|
1206
1206
|
}
|
1207
1207
|
`;
|
1208
1208
|
|
1209
|
-
customElements.define(componentName$n,
|
1209
|
+
customElements.define(componentName$n, ButtonClass);
|
1210
1210
|
|
1211
1211
|
const createBaseInputClass = (...args) => compose(
|
1212
1212
|
inputValidationMixin,
|
@@ -1393,7 +1393,7 @@ const {
|
|
1393
1393
|
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
1394
1394
|
};
|
1395
1395
|
|
1396
|
-
const
|
1396
|
+
const CheckboxClass = compose(
|
1397
1397
|
createStyleMixin({
|
1398
1398
|
mappings: {
|
1399
1399
|
width: host$9,
|
@@ -1465,7 +1465,7 @@ const Checkbox = compose(
|
|
1465
1465
|
|
1466
1466
|
customElements.define(componentName$m, BooleanInputInternal);
|
1467
1467
|
|
1468
|
-
customElements.define(componentName$l,
|
1468
|
+
customElements.define(componentName$l, CheckboxClass);
|
1469
1469
|
|
1470
1470
|
const componentName$k = getComponentName('switch-toggle');
|
1471
1471
|
|
@@ -1487,7 +1487,7 @@ const {
|
|
1487
1487
|
checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
|
1488
1488
|
};
|
1489
1489
|
|
1490
|
-
const
|
1490
|
+
const SwitchToggleClass = compose(
|
1491
1491
|
createStyleMixin({
|
1492
1492
|
mappings: {
|
1493
1493
|
width: host$8,
|
@@ -1578,7 +1578,7 @@ const SwitchToggle = compose(
|
|
1578
1578
|
})
|
1579
1579
|
);
|
1580
1580
|
|
1581
|
-
customElements.define(componentName$k,
|
1581
|
+
customElements.define(componentName$k, SwitchToggleClass);
|
1582
1582
|
|
1583
1583
|
const componentName$j = getComponentName('loader-linear');
|
1584
1584
|
|
@@ -1623,7 +1623,7 @@ const selectors$3 = {
|
|
1623
1623
|
|
1624
1624
|
const { root: root$1, after: after$1, host: host$7 } = selectors$3;
|
1625
1625
|
|
1626
|
-
const
|
1626
|
+
const LoaderLinearClass = compose(
|
1627
1627
|
createStyleMixin({
|
1628
1628
|
mappings: {
|
1629
1629
|
display: root$1,
|
@@ -1642,7 +1642,7 @@ const LoaderLinear = compose(
|
|
1642
1642
|
componentNameValidationMixin
|
1643
1643
|
)(RawLoaderLinear);
|
1644
1644
|
|
1645
|
-
customElements.define(componentName$j,
|
1645
|
+
customElements.define(componentName$j, LoaderLinearClass);
|
1646
1646
|
|
1647
1647
|
const componentName$i = getComponentName('loader-radial');
|
1648
1648
|
|
@@ -1669,7 +1669,7 @@ class RawLoaderRadial extends createBaseClass({ componentName: componentName$i,
|
|
1669
1669
|
}
|
1670
1670
|
}
|
1671
1671
|
|
1672
|
-
const
|
1672
|
+
const LoaderRadialClass = compose(
|
1673
1673
|
createStyleMixin({
|
1674
1674
|
mappings: {
|
1675
1675
|
display: {},
|
@@ -1692,7 +1692,7 @@ const LoaderRadial = compose(
|
|
1692
1692
|
componentNameValidationMixin
|
1693
1693
|
)(RawLoaderRadial);
|
1694
1694
|
|
1695
|
-
customElements.define(componentName$i,
|
1695
|
+
customElements.define(componentName$i, LoaderRadialClass);
|
1696
1696
|
|
1697
1697
|
const componentName$h = getComponentName('container');
|
1698
1698
|
|
@@ -1818,7 +1818,7 @@ const selectors$2 = {
|
|
1818
1818
|
|
1819
1819
|
const { root, before, after, text: text$2, host: host$6 } = selectors$2;
|
1820
1820
|
|
1821
|
-
const
|
1821
|
+
const DividerClass = compose(
|
1822
1822
|
createStyleMixin({
|
1823
1823
|
mappings: {
|
1824
1824
|
maxTextWidth: { ...text$2, property: 'max-width' },
|
@@ -1861,7 +1861,7 @@ class RawText extends createBaseClass({ componentName: componentName$f, baseSele
|
|
1861
1861
|
}
|
1862
1862
|
}
|
1863
1863
|
|
1864
|
-
const
|
1864
|
+
const TextClass = compose(
|
1865
1865
|
createStyleMixin({
|
1866
1866
|
mappings: {
|
1867
1867
|
fontFamily: {},
|
@@ -1884,9 +1884,9 @@ const Text = compose(
|
|
1884
1884
|
componentNameValidationMixin
|
1885
1885
|
)(RawText);
|
1886
1886
|
|
1887
|
-
customElements.define(componentName$f,
|
1887
|
+
customElements.define(componentName$f, TextClass);
|
1888
1888
|
|
1889
|
-
customElements.define(componentName$g,
|
1889
|
+
customElements.define(componentName$g, DividerClass);
|
1890
1890
|
|
1891
1891
|
const selectors$1 = {
|
1892
1892
|
label: '::part(label)',
|
@@ -1940,7 +1940,7 @@ const componentName$e = getComponentName('email-field');
|
|
1940
1940
|
|
1941
1941
|
let overrides$4 = ``;
|
1942
1942
|
|
1943
|
-
const
|
1943
|
+
const EmailFieldClass = compose(
|
1944
1944
|
createStyleMixin({
|
1945
1945
|
mappings: {
|
1946
1946
|
...textFieldMappings
|
@@ -2000,7 +2000,7 @@ overrides$4 = `
|
|
2000
2000
|
}
|
2001
2001
|
`;
|
2002
2002
|
|
2003
|
-
customElements.define(componentName$e,
|
2003
|
+
customElements.define(componentName$e, EmailFieldClass);
|
2004
2004
|
|
2005
2005
|
const componentName$d = getComponentName('link');
|
2006
2006
|
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
@@ -2041,18 +2041,18 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
|
|
2041
2041
|
const selectors = {
|
2042
2042
|
host: { selector: () => ':host' },
|
2043
2043
|
anchor: {},
|
2044
|
-
wrapper: {selector: () => ':host > div'},
|
2045
|
-
text: { selector: () =>
|
2044
|
+
wrapper: { selector: () => ':host > div' },
|
2045
|
+
text: { selector: () => TextClass.componentName }
|
2046
2046
|
};
|
2047
2047
|
|
2048
2048
|
const { anchor, text: text$1, host: host$5, wrapper } = selectors;
|
2049
2049
|
|
2050
|
-
const
|
2050
|
+
const LinkClass = compose(
|
2051
2051
|
createStyleMixin({
|
2052
2052
|
mappings: {
|
2053
2053
|
width: host$5,
|
2054
2054
|
textAlign: wrapper,
|
2055
|
-
color: [anchor, { ...text$1, property:
|
2055
|
+
color: [anchor, { ...text$1, property: TextClass.cssVarList.color }],
|
2056
2056
|
cursor: anchor,
|
2057
2057
|
borderBottomWidth: anchor,
|
2058
2058
|
borderBottomStyle: anchor,
|
@@ -2063,7 +2063,7 @@ const Link = compose(
|
|
2063
2063
|
componentNameValidationMixin
|
2064
2064
|
)(RawLink);
|
2065
2065
|
|
2066
|
-
customElements.define(componentName$d,
|
2066
|
+
customElements.define(componentName$d, LinkClass);
|
2067
2067
|
|
2068
2068
|
const componentName$c = getComponentName('logo');
|
2069
2069
|
|
@@ -2082,13 +2082,13 @@ class RawLogo extends createBaseClass({ componentName: componentName$c, baseSele
|
|
2082
2082
|
}
|
2083
2083
|
}
|
2084
2084
|
|
2085
|
-
const
|
2085
|
+
const LogoClass = compose(
|
2086
2086
|
createStyleMixin({
|
2087
2087
|
mappings: {
|
2088
|
-
height: {},
|
2089
|
-
width: {},
|
2090
|
-
|
2091
|
-
|
2088
|
+
height: { selector: () => ':host' },
|
2089
|
+
width: { selector: () => ':host' },
|
2090
|
+
fallbackUrl: { property: 'content' },
|
2091
|
+
url: { property: 'content' },
|
2092
2092
|
}
|
2093
2093
|
}),
|
2094
2094
|
draggableMixin,
|
@@ -2102,19 +2102,23 @@ style = `
|
|
2102
2102
|
:host > div {
|
2103
2103
|
display: inline-block;
|
2104
2104
|
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
2105
|
+
max-width: 100%;
|
2106
|
+
max-height: 100%;
|
2107
|
+
object-fit: contain;
|
2108
|
+
margin: auto;
|
2105
2109
|
}
|
2106
2110
|
:host([draggable="true"]) > div {
|
2107
2111
|
pointer-events: none
|
2108
2112
|
}
|
2109
2113
|
`;
|
2110
2114
|
|
2111
|
-
customElements.define(componentName$c,
|
2115
|
+
customElements.define(componentName$c, LogoClass);
|
2112
2116
|
|
2113
2117
|
const componentName$b = getComponentName('number-field');
|
2114
2118
|
|
2115
2119
|
let overrides$3 = ``;
|
2116
2120
|
|
2117
|
-
const
|
2121
|
+
const NumberFieldClass = compose(
|
2118
2122
|
createStyleMixin({
|
2119
2123
|
mappings: {
|
2120
2124
|
...textFieldMappings
|
@@ -2170,7 +2174,7 @@ overrides$3 = `
|
|
2170
2174
|
}
|
2171
2175
|
`;
|
2172
2176
|
|
2173
|
-
customElements.define(componentName$b,
|
2177
|
+
customElements.define(componentName$b, NumberFieldClass);
|
2174
2178
|
|
2175
2179
|
const focusElement = (ele) => {
|
2176
2180
|
ele?.focus();
|
@@ -2397,7 +2401,7 @@ const customMixin$3 = (superclass) =>
|
|
2397
2401
|
}
|
2398
2402
|
};
|
2399
2403
|
|
2400
|
-
const
|
2404
|
+
const TextFieldClass = compose(
|
2401
2405
|
createStyleMixin({
|
2402
2406
|
mappings: textFieldMappings
|
2403
2407
|
}),
|
@@ -2472,7 +2476,7 @@ const observedAttributes$1 = [
|
|
2472
2476
|
];
|
2473
2477
|
|
2474
2478
|
const customMixin$2 = (superclass) =>
|
2475
|
-
class
|
2479
|
+
class PasscodeMixinClass extends superclass {
|
2476
2480
|
static get observedAttributes() {
|
2477
2481
|
return observedAttributes$1.concat(superclass.observedAttributes || []);
|
2478
2482
|
}
|
@@ -2518,16 +2522,16 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
|
2518
2522
|
textFieldMappings;
|
2519
2523
|
|
2520
2524
|
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
|
2521
|
-
focusedDigitField: { selector: () => `${
|
2522
|
-
digitField: { selector: () =>
|
2525
|
+
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
2526
|
+
digitField: { selector: () => TextFieldClass.componentName },
|
2523
2527
|
label: { selector: '::part(label)' },
|
2524
2528
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2525
2529
|
internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
|
2526
2530
|
};
|
2527
2531
|
|
2528
|
-
const textVars$1 =
|
2532
|
+
const textVars$1 = TextFieldClass.cssVarList;
|
2529
2533
|
|
2530
|
-
const
|
2534
|
+
const PasscodeClass = compose(
|
2531
2535
|
createStyleMixin({
|
2532
2536
|
mappings: {
|
2533
2537
|
...restTextFieldMappings,
|
@@ -2627,11 +2631,11 @@ const Passcode = compose(
|
|
2627
2631
|
})
|
2628
2632
|
);
|
2629
2633
|
|
2630
|
-
customElements.define(componentName$9,
|
2634
|
+
customElements.define(componentName$9, TextFieldClass);
|
2631
2635
|
|
2632
2636
|
customElements.define(componentName$a, PasscodeInternal);
|
2633
2637
|
|
2634
|
-
customElements.define(componentName$8,
|
2638
|
+
customElements.define(componentName$8, PasscodeClass);
|
2635
2639
|
|
2636
2640
|
const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
|
2637
2641
|
get isReadOnly() {
|
@@ -2690,7 +2694,7 @@ const {
|
|
2690
2694
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2691
2695
|
};
|
2692
2696
|
|
2693
|
-
const
|
2697
|
+
const PasswordFieldClass = compose(
|
2694
2698
|
createStyleMixin({
|
2695
2699
|
mappings: {
|
2696
2700
|
width: host$4,
|
@@ -2779,7 +2783,7 @@ const PasswordField = compose(
|
|
2779
2783
|
})
|
2780
2784
|
);
|
2781
2785
|
|
2782
|
-
customElements.define(componentName$7,
|
2786
|
+
customElements.define(componentName$7, PasswordFieldClass);
|
2783
2787
|
|
2784
2788
|
const componentName$6 = getComponentName('text-area');
|
2785
2789
|
|
@@ -2801,7 +2805,7 @@ const {
|
|
2801
2805
|
|
2802
2806
|
let overrides$1 = ``;
|
2803
2807
|
|
2804
|
-
const
|
2808
|
+
const TextAreaClass = compose(
|
2805
2809
|
createStyleMixin({
|
2806
2810
|
mappings: {
|
2807
2811
|
fontSize: [host$3, textArea$1],
|
@@ -2862,7 +2866,7 @@ overrides$1 = `
|
|
2862
2866
|
}
|
2863
2867
|
`;
|
2864
2868
|
|
2865
|
-
customElements.define(componentName$6,
|
2869
|
+
customElements.define(componentName$6, TextAreaClass);
|
2866
2870
|
|
2867
2871
|
const observedAttributes = ['src', 'alt'];
|
2868
2872
|
|
@@ -2891,14 +2895,14 @@ class RawImage extends BaseClass {
|
|
2891
2895
|
`;
|
2892
2896
|
}
|
2893
2897
|
|
2894
|
-
connectedCallback(){
|
2898
|
+
connectedCallback() {
|
2895
2899
|
super.connectedCallback?.();
|
2896
2900
|
|
2897
|
-
forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
|
2901
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
|
2898
2902
|
}
|
2899
2903
|
}
|
2900
2904
|
|
2901
|
-
const
|
2905
|
+
const ImageClass = compose(
|
2902
2906
|
createStyleMixin({
|
2903
2907
|
mappings: {
|
2904
2908
|
height: { selector: () => ':host' },
|
@@ -2908,7 +2912,7 @@ const Image = compose(
|
|
2908
2912
|
draggableMixin,
|
2909
2913
|
)(RawImage);
|
2910
2914
|
|
2911
|
-
customElements.define(componentName$5,
|
2915
|
+
customElements.define(componentName$5, ImageClass);
|
2912
2916
|
|
2913
2917
|
const componentName$4 = getComponentName('combo-box');
|
2914
2918
|
|
@@ -2982,7 +2986,7 @@ const {
|
|
2982
2986
|
// selected: { selector: () => '::slotted([selected])' }
|
2983
2987
|
// }
|
2984
2988
|
|
2985
|
-
const
|
2989
|
+
const ComboBoxClass = compose(
|
2986
2990
|
createStyleMixin({
|
2987
2991
|
mappings: {
|
2988
2992
|
width: host$2,
|
@@ -3074,7 +3078,7 @@ const ComboBox = compose(
|
|
3074
3078
|
})
|
3075
3079
|
);
|
3076
3080
|
|
3077
|
-
customElements.define(componentName$4,
|
3081
|
+
customElements.define(componentName$4, ComboBoxClass);
|
3078
3082
|
|
3079
3083
|
var CountryCodes = [
|
3080
3084
|
{
|
@@ -4505,13 +4509,13 @@ class PhoneFieldInternal extends BaseInputClass$1 {
|
|
4505
4509
|
|
4506
4510
|
customElements.define(componentName$3, PhoneFieldInternal);
|
4507
4511
|
|
4508
|
-
const textVars =
|
4509
|
-
const comboVars =
|
4512
|
+
const textVars = TextFieldClass.cssVarList;
|
4513
|
+
const comboVars = ComboBoxClass.cssVarList;
|
4510
4514
|
|
4511
4515
|
const componentName$2 = getComponentName('phone-field');
|
4512
4516
|
|
4513
4517
|
const customMixin$1 = (superclass) =>
|
4514
|
-
class
|
4518
|
+
class PhoneFieldMixinClass extends superclass {
|
4515
4519
|
static get CountryCodes() {
|
4516
4520
|
return CountryCodes;
|
4517
4521
|
}
|
@@ -4569,18 +4573,18 @@ const {
|
|
4569
4573
|
separator: { selector: 'descope-phone-field-internal .separator' }
|
4570
4574
|
};
|
4571
4575
|
|
4572
|
-
const
|
4576
|
+
const PhoneFieldClass = compose(
|
4573
4577
|
createStyleMixin({
|
4574
4578
|
mappings: {
|
4575
4579
|
fontSize: [
|
4576
4580
|
host$1, inputWrapper,
|
4577
4581
|
{
|
4578
|
-
selector:
|
4579
|
-
property:
|
4582
|
+
selector: TextFieldClass.componentName,
|
4583
|
+
property: TextFieldClass.cssVarList.fontSize
|
4580
4584
|
},
|
4581
4585
|
{
|
4582
|
-
selector:
|
4583
|
-
property:
|
4586
|
+
selector: ComboBoxClass.componentName,
|
4587
|
+
property: ComboBoxClass.cssVarList.fontSize
|
4584
4588
|
}
|
4585
4589
|
],
|
4586
4590
|
|
@@ -4709,7 +4713,7 @@ const PhoneField = compose(
|
|
4709
4713
|
})
|
4710
4714
|
);
|
4711
4715
|
|
4712
|
-
customElements.define(componentName$2,
|
4716
|
+
customElements.define(componentName$2, PhoneFieldClass);
|
4713
4717
|
|
4714
4718
|
const componentName$1 = getComponentName('new-password-internal');
|
4715
4719
|
|
@@ -4761,14 +4765,14 @@ const { host, internalInputsWrapper } = {
|
|
4761
4765
|
host: { selector: () => ':host' },
|
4762
4766
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
|
4763
4767
|
};
|
4764
|
-
const
|
4768
|
+
const NewPasswordClass = compose(
|
4765
4769
|
createStyleMixin({
|
4766
4770
|
mappings: {
|
4767
4771
|
fontSize: [
|
4768
4772
|
host,
|
4769
4773
|
{
|
4770
|
-
selector:
|
4771
|
-
property:
|
4774
|
+
selector: PasswordFieldClass.componentName,
|
4775
|
+
property: PasswordFieldClass.cssVarList.fontSize
|
4772
4776
|
}
|
4773
4777
|
],
|
4774
4778
|
componentWidth: { ...host, property: 'width' },
|
@@ -4948,7 +4952,7 @@ class NewPasswordInternal extends BaseInputClass {
|
|
4948
4952
|
const styleTag = document.createElement('style');
|
4949
4953
|
styleTag.innerHTML = `
|
4950
4954
|
:host::part(required-indicator)::after {
|
4951
|
-
content: var(${
|
4955
|
+
content: var(${NewPasswordClass.cssVarList.requiredContent});
|
4952
4956
|
}
|
4953
4957
|
`;
|
4954
4958
|
input?.shadowRoot.appendChild(styleTag);
|
@@ -5022,7 +5026,7 @@ class NewPasswordInternal extends BaseInputClass {
|
|
5022
5026
|
|
5023
5027
|
customElements.define(componentName$1, NewPasswordInternal);
|
5024
5028
|
|
5025
|
-
customElements.define(componentName,
|
5029
|
+
customElements.define(componentName, NewPasswordClass);
|
5026
5030
|
|
5027
5031
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
5028
5032
|
|
@@ -5355,7 +5359,7 @@ var globals = {
|
|
5355
5359
|
};
|
5356
5360
|
|
5357
5361
|
const globalRefs$e = getThemeRefs(globals);
|
5358
|
-
const vars$g =
|
5362
|
+
const vars$g = ButtonClass.cssVarList;
|
5359
5363
|
|
5360
5364
|
const mode = {
|
5361
5365
|
primary: globalRefs$e.colors.primary,
|
@@ -5439,7 +5443,7 @@ const button = {
|
|
5439
5443
|
|
5440
5444
|
const globalRefs$d = getThemeRefs(globals);
|
5441
5445
|
|
5442
|
-
const vars$f =
|
5446
|
+
const vars$f = TextFieldClass.cssVarList;
|
5443
5447
|
|
5444
5448
|
const textField = (vars) => ({
|
5445
5449
|
[vars.padding]: '0 1em',
|
@@ -5509,7 +5513,7 @@ var textField$1 = textField(vars$f);
|
|
5509
5513
|
|
5510
5514
|
const globalRefs$c = getThemeRefs(globals);
|
5511
5515
|
|
5512
|
-
const vars$e =
|
5516
|
+
const vars$e = PasswordFieldClass.cssVarList;
|
5513
5517
|
|
5514
5518
|
const passwordField = {
|
5515
5519
|
[vars$e.wrapperBorderStyle]: 'solid',
|
@@ -5575,15 +5579,15 @@ const passwordField = {
|
|
5575
5579
|
};
|
5576
5580
|
|
5577
5581
|
const numberField = {
|
5578
|
-
...textField(
|
5582
|
+
...textField(NumberFieldClass.cssVarList)
|
5579
5583
|
};
|
5580
5584
|
|
5581
5585
|
const emailField = {
|
5582
|
-
...textField(
|
5586
|
+
...textField(EmailFieldClass.cssVarList)
|
5583
5587
|
};
|
5584
5588
|
|
5585
5589
|
const globalRefs$b = getThemeRefs(globals);
|
5586
|
-
const vars$d =
|
5590
|
+
const vars$d = TextAreaClass.cssVarList;
|
5587
5591
|
|
5588
5592
|
const textArea = {
|
5589
5593
|
[vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
|
@@ -5632,7 +5636,7 @@ const textArea = {
|
|
5632
5636
|
};
|
5633
5637
|
|
5634
5638
|
const globalRefs$a = getThemeRefs(globals);
|
5635
|
-
const vars$c =
|
5639
|
+
const vars$c = CheckboxClass.cssVarList;
|
5636
5640
|
|
5637
5641
|
const checkbox = {
|
5638
5642
|
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
|
@@ -5695,7 +5699,7 @@ const checkboxHeight = '1.25em';
|
|
5695
5699
|
const trackBorderWidth = '2px';
|
5696
5700
|
|
5697
5701
|
const globalRefs$9 = getThemeRefs(globals);
|
5698
|
-
const vars$b =
|
5702
|
+
const vars$b = SwitchToggleClass.cssVarList;
|
5699
5703
|
|
5700
5704
|
const switchToggle = {
|
5701
5705
|
size: {
|
@@ -5875,16 +5879,15 @@ const container = {
|
|
5875
5879
|
}
|
5876
5880
|
};
|
5877
5881
|
|
5878
|
-
const vars$9 =
|
5882
|
+
const vars$9 = LogoClass.cssVarList;
|
5879
5883
|
|
5880
5884
|
const logo = {
|
5881
|
-
[vars$9.
|
5882
|
-
[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
5885
|
+
[vars$9.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
|
5883
5886
|
};
|
5884
5887
|
|
5885
5888
|
const globalRefs$7 = getThemeRefs(globals);
|
5886
5889
|
|
5887
|
-
const vars$8 =
|
5890
|
+
const vars$8 = TextClass.cssVarList;
|
5888
5891
|
|
5889
5892
|
const text = {
|
5890
5893
|
[vars$8.lineHeight]: '1em',
|
@@ -5961,7 +5964,7 @@ const text = {
|
|
5961
5964
|
};
|
5962
5965
|
|
5963
5966
|
const globalRefs$6 = getThemeRefs(globals);
|
5964
|
-
const vars$7 =
|
5967
|
+
const vars$7 = LinkClass.cssVarList;
|
5965
5968
|
|
5966
5969
|
const link = {
|
5967
5970
|
[vars$7.cursor]: 'pointer',
|
@@ -6014,7 +6017,7 @@ const link = {
|
|
6014
6017
|
|
6015
6018
|
const globalRefs$5 = getThemeRefs(globals);
|
6016
6019
|
|
6017
|
-
const vars$6 =
|
6020
|
+
const vars$6 = DividerClass.cssVarList;
|
6018
6021
|
|
6019
6022
|
const thickness = '2px';
|
6020
6023
|
const textPaddingSize = '10px';
|
@@ -6043,7 +6046,7 @@ const divider = {
|
|
6043
6046
|
}
|
6044
6047
|
};
|
6045
6048
|
|
6046
|
-
const vars$5 =
|
6049
|
+
const vars$5 = PasscodeClass.cssVarList;
|
6047
6050
|
const globalRefs$4 = getThemeRefs(globals);
|
6048
6051
|
|
6049
6052
|
const passcode = {
|
@@ -6082,7 +6085,7 @@ const passcode = {
|
|
6082
6085
|
|
6083
6086
|
const globalRefs$3 = getThemeRefs(globals);
|
6084
6087
|
|
6085
|
-
const vars$4 =
|
6088
|
+
const vars$4 = LoaderLinearClass.cssVarList;
|
6086
6089
|
|
6087
6090
|
const loaderLinear = {
|
6088
6091
|
[vars$4.display]: 'inline-block',
|
@@ -6126,7 +6129,7 @@ const loaderLinear = {
|
|
6126
6129
|
|
6127
6130
|
const globalRefs$2 = getThemeRefs(globals);
|
6128
6131
|
|
6129
|
-
const vars$3 =
|
6132
|
+
const vars$3 = LoaderRadialClass.cssVarList;
|
6130
6133
|
|
6131
6134
|
const loaderRadial = {
|
6132
6135
|
[vars$3.display]: 'inline-block',
|
@@ -6183,7 +6186,7 @@ const loaderRadial = {
|
|
6183
6186
|
|
6184
6187
|
const globalRefs$1 = getThemeRefs(globals);
|
6185
6188
|
|
6186
|
-
const vars$2 =
|
6189
|
+
const vars$2 = ComboBoxClass.cssVarList;
|
6187
6190
|
|
6188
6191
|
const comboBox = {
|
6189
6192
|
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
@@ -6231,12 +6234,12 @@ const comboBox = {
|
|
6231
6234
|
// [vars.overlayBorder]: `2px solid red`,
|
6232
6235
|
};
|
6233
6236
|
|
6234
|
-
|
6237
|
+
ImageClass.cssVarList;
|
6235
6238
|
|
6236
6239
|
const image = {};
|
6237
6240
|
|
6238
6241
|
const globalRefs = getThemeRefs(globals);
|
6239
|
-
const vars$1 =
|
6242
|
+
const vars$1 = PhoneFieldClass.cssVarList;
|
6240
6243
|
|
6241
6244
|
const phoneField = {
|
6242
6245
|
[vars$1.wrapperBorderStyle]: 'solid',
|
@@ -6300,7 +6303,7 @@ const phoneField = {
|
|
6300
6303
|
// }
|
6301
6304
|
};
|
6302
6305
|
|
6303
|
-
const vars =
|
6306
|
+
const vars = NewPasswordClass.cssVarList;
|
6304
6307
|
|
6305
6308
|
const newPassword = {
|
6306
6309
|
[vars.inputsGap]: '1em',
|
@@ -6357,5 +6360,5 @@ var components = {
|
|
6357
6360
|
|
6358
6361
|
var index = { globals, components };
|
6359
6362
|
|
6360
|
-
export {
|
6363
|
+
export { ButtonClass, CheckboxClass, Container as ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
|
6361
6364
|
//# sourceMappingURL=index.esm.js.map
|