@descope/web-components-ui 1.0.107 → 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 +77 -77
- 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 +2 -2
- 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/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,7 +2082,7 @@ 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
2088
|
height: { selector: () => ':host' },
|
@@ -2112,13 +2112,13 @@ style = `
|
|
2112
2112
|
}
|
2113
2113
|
`;
|
2114
2114
|
|
2115
|
-
customElements.define(componentName$c,
|
2115
|
+
customElements.define(componentName$c, LogoClass);
|
2116
2116
|
|
2117
2117
|
const componentName$b = getComponentName('number-field');
|
2118
2118
|
|
2119
2119
|
let overrides$3 = ``;
|
2120
2120
|
|
2121
|
-
const
|
2121
|
+
const NumberFieldClass = compose(
|
2122
2122
|
createStyleMixin({
|
2123
2123
|
mappings: {
|
2124
2124
|
...textFieldMappings
|
@@ -2174,7 +2174,7 @@ overrides$3 = `
|
|
2174
2174
|
}
|
2175
2175
|
`;
|
2176
2176
|
|
2177
|
-
customElements.define(componentName$b,
|
2177
|
+
customElements.define(componentName$b, NumberFieldClass);
|
2178
2178
|
|
2179
2179
|
const focusElement = (ele) => {
|
2180
2180
|
ele?.focus();
|
@@ -2401,7 +2401,7 @@ const customMixin$3 = (superclass) =>
|
|
2401
2401
|
}
|
2402
2402
|
};
|
2403
2403
|
|
2404
|
-
const
|
2404
|
+
const TextFieldClass = compose(
|
2405
2405
|
createStyleMixin({
|
2406
2406
|
mappings: textFieldMappings
|
2407
2407
|
}),
|
@@ -2476,7 +2476,7 @@ const observedAttributes$1 = [
|
|
2476
2476
|
];
|
2477
2477
|
|
2478
2478
|
const customMixin$2 = (superclass) =>
|
2479
|
-
class
|
2479
|
+
class PasscodeMixinClass extends superclass {
|
2480
2480
|
static get observedAttributes() {
|
2481
2481
|
return observedAttributes$1.concat(superclass.observedAttributes || []);
|
2482
2482
|
}
|
@@ -2522,16 +2522,16 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
|
2522
2522
|
textFieldMappings;
|
2523
2523
|
|
2524
2524
|
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
|
2525
|
-
focusedDigitField: { selector: () => `${
|
2526
|
-
digitField: { selector: () =>
|
2525
|
+
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
2526
|
+
digitField: { selector: () => TextFieldClass.componentName },
|
2527
2527
|
label: { selector: '::part(label)' },
|
2528
2528
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2529
2529
|
internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
|
2530
2530
|
};
|
2531
2531
|
|
2532
|
-
const textVars$1 =
|
2532
|
+
const textVars$1 = TextFieldClass.cssVarList;
|
2533
2533
|
|
2534
|
-
const
|
2534
|
+
const PasscodeClass = compose(
|
2535
2535
|
createStyleMixin({
|
2536
2536
|
mappings: {
|
2537
2537
|
...restTextFieldMappings,
|
@@ -2631,11 +2631,11 @@ const Passcode = compose(
|
|
2631
2631
|
})
|
2632
2632
|
);
|
2633
2633
|
|
2634
|
-
customElements.define(componentName$9,
|
2634
|
+
customElements.define(componentName$9, TextFieldClass);
|
2635
2635
|
|
2636
2636
|
customElements.define(componentName$a, PasscodeInternal);
|
2637
2637
|
|
2638
|
-
customElements.define(componentName$8,
|
2638
|
+
customElements.define(componentName$8, PasscodeClass);
|
2639
2639
|
|
2640
2640
|
const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
|
2641
2641
|
get isReadOnly() {
|
@@ -2694,7 +2694,7 @@ const {
|
|
2694
2694
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2695
2695
|
};
|
2696
2696
|
|
2697
|
-
const
|
2697
|
+
const PasswordFieldClass = compose(
|
2698
2698
|
createStyleMixin({
|
2699
2699
|
mappings: {
|
2700
2700
|
width: host$4,
|
@@ -2783,7 +2783,7 @@ const PasswordField = compose(
|
|
2783
2783
|
})
|
2784
2784
|
);
|
2785
2785
|
|
2786
|
-
customElements.define(componentName$7,
|
2786
|
+
customElements.define(componentName$7, PasswordFieldClass);
|
2787
2787
|
|
2788
2788
|
const componentName$6 = getComponentName('text-area');
|
2789
2789
|
|
@@ -2805,7 +2805,7 @@ const {
|
|
2805
2805
|
|
2806
2806
|
let overrides$1 = ``;
|
2807
2807
|
|
2808
|
-
const
|
2808
|
+
const TextAreaClass = compose(
|
2809
2809
|
createStyleMixin({
|
2810
2810
|
mappings: {
|
2811
2811
|
fontSize: [host$3, textArea$1],
|
@@ -2866,7 +2866,7 @@ overrides$1 = `
|
|
2866
2866
|
}
|
2867
2867
|
`;
|
2868
2868
|
|
2869
|
-
customElements.define(componentName$6,
|
2869
|
+
customElements.define(componentName$6, TextAreaClass);
|
2870
2870
|
|
2871
2871
|
const observedAttributes = ['src', 'alt'];
|
2872
2872
|
|
@@ -2895,14 +2895,14 @@ class RawImage extends BaseClass {
|
|
2895
2895
|
`;
|
2896
2896
|
}
|
2897
2897
|
|
2898
|
-
connectedCallback(){
|
2898
|
+
connectedCallback() {
|
2899
2899
|
super.connectedCallback?.();
|
2900
2900
|
|
2901
|
-
forwardAttrs(this, this.baseElement, {includeAttrs: observedAttributes});
|
2901
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
|
2902
2902
|
}
|
2903
2903
|
}
|
2904
2904
|
|
2905
|
-
const
|
2905
|
+
const ImageClass = compose(
|
2906
2906
|
createStyleMixin({
|
2907
2907
|
mappings: {
|
2908
2908
|
height: { selector: () => ':host' },
|
@@ -2912,7 +2912,7 @@ const Image = compose(
|
|
2912
2912
|
draggableMixin,
|
2913
2913
|
)(RawImage);
|
2914
2914
|
|
2915
|
-
customElements.define(componentName$5,
|
2915
|
+
customElements.define(componentName$5, ImageClass);
|
2916
2916
|
|
2917
2917
|
const componentName$4 = getComponentName('combo-box');
|
2918
2918
|
|
@@ -2986,7 +2986,7 @@ const {
|
|
2986
2986
|
// selected: { selector: () => '::slotted([selected])' }
|
2987
2987
|
// }
|
2988
2988
|
|
2989
|
-
const
|
2989
|
+
const ComboBoxClass = compose(
|
2990
2990
|
createStyleMixin({
|
2991
2991
|
mappings: {
|
2992
2992
|
width: host$2,
|
@@ -3078,7 +3078,7 @@ const ComboBox = compose(
|
|
3078
3078
|
})
|
3079
3079
|
);
|
3080
3080
|
|
3081
|
-
customElements.define(componentName$4,
|
3081
|
+
customElements.define(componentName$4, ComboBoxClass);
|
3082
3082
|
|
3083
3083
|
var CountryCodes = [
|
3084
3084
|
{
|
@@ -4509,13 +4509,13 @@ class PhoneFieldInternal extends BaseInputClass$1 {
|
|
4509
4509
|
|
4510
4510
|
customElements.define(componentName$3, PhoneFieldInternal);
|
4511
4511
|
|
4512
|
-
const textVars =
|
4513
|
-
const comboVars =
|
4512
|
+
const textVars = TextFieldClass.cssVarList;
|
4513
|
+
const comboVars = ComboBoxClass.cssVarList;
|
4514
4514
|
|
4515
4515
|
const componentName$2 = getComponentName('phone-field');
|
4516
4516
|
|
4517
4517
|
const customMixin$1 = (superclass) =>
|
4518
|
-
class
|
4518
|
+
class PhoneFieldMixinClass extends superclass {
|
4519
4519
|
static get CountryCodes() {
|
4520
4520
|
return CountryCodes;
|
4521
4521
|
}
|
@@ -4573,18 +4573,18 @@ const {
|
|
4573
4573
|
separator: { selector: 'descope-phone-field-internal .separator' }
|
4574
4574
|
};
|
4575
4575
|
|
4576
|
-
const
|
4576
|
+
const PhoneFieldClass = compose(
|
4577
4577
|
createStyleMixin({
|
4578
4578
|
mappings: {
|
4579
4579
|
fontSize: [
|
4580
4580
|
host$1, inputWrapper,
|
4581
4581
|
{
|
4582
|
-
selector:
|
4583
|
-
property:
|
4582
|
+
selector: TextFieldClass.componentName,
|
4583
|
+
property: TextFieldClass.cssVarList.fontSize
|
4584
4584
|
},
|
4585
4585
|
{
|
4586
|
-
selector:
|
4587
|
-
property:
|
4586
|
+
selector: ComboBoxClass.componentName,
|
4587
|
+
property: ComboBoxClass.cssVarList.fontSize
|
4588
4588
|
}
|
4589
4589
|
],
|
4590
4590
|
|
@@ -4713,7 +4713,7 @@ const PhoneField = compose(
|
|
4713
4713
|
})
|
4714
4714
|
);
|
4715
4715
|
|
4716
|
-
customElements.define(componentName$2,
|
4716
|
+
customElements.define(componentName$2, PhoneFieldClass);
|
4717
4717
|
|
4718
4718
|
const componentName$1 = getComponentName('new-password-internal');
|
4719
4719
|
|
@@ -4765,14 +4765,14 @@ const { host, internalInputsWrapper } = {
|
|
4765
4765
|
host: { selector: () => ':host' },
|
4766
4766
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
|
4767
4767
|
};
|
4768
|
-
const
|
4768
|
+
const NewPasswordClass = compose(
|
4769
4769
|
createStyleMixin({
|
4770
4770
|
mappings: {
|
4771
4771
|
fontSize: [
|
4772
4772
|
host,
|
4773
4773
|
{
|
4774
|
-
selector:
|
4775
|
-
property:
|
4774
|
+
selector: PasswordFieldClass.componentName,
|
4775
|
+
property: PasswordFieldClass.cssVarList.fontSize
|
4776
4776
|
}
|
4777
4777
|
],
|
4778
4778
|
componentWidth: { ...host, property: 'width' },
|
@@ -4952,7 +4952,7 @@ class NewPasswordInternal extends BaseInputClass {
|
|
4952
4952
|
const styleTag = document.createElement('style');
|
4953
4953
|
styleTag.innerHTML = `
|
4954
4954
|
:host::part(required-indicator)::after {
|
4955
|
-
content: var(${
|
4955
|
+
content: var(${NewPasswordClass.cssVarList.requiredContent});
|
4956
4956
|
}
|
4957
4957
|
`;
|
4958
4958
|
input?.shadowRoot.appendChild(styleTag);
|
@@ -5026,7 +5026,7 @@ class NewPasswordInternal extends BaseInputClass {
|
|
5026
5026
|
|
5027
5027
|
customElements.define(componentName$1, NewPasswordInternal);
|
5028
5028
|
|
5029
|
-
customElements.define(componentName,
|
5029
|
+
customElements.define(componentName, NewPasswordClass);
|
5030
5030
|
|
5031
5031
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
5032
5032
|
|
@@ -5359,7 +5359,7 @@ var globals = {
|
|
5359
5359
|
};
|
5360
5360
|
|
5361
5361
|
const globalRefs$e = getThemeRefs(globals);
|
5362
|
-
const vars$g =
|
5362
|
+
const vars$g = ButtonClass.cssVarList;
|
5363
5363
|
|
5364
5364
|
const mode = {
|
5365
5365
|
primary: globalRefs$e.colors.primary,
|
@@ -5443,7 +5443,7 @@ const button = {
|
|
5443
5443
|
|
5444
5444
|
const globalRefs$d = getThemeRefs(globals);
|
5445
5445
|
|
5446
|
-
const vars$f =
|
5446
|
+
const vars$f = TextFieldClass.cssVarList;
|
5447
5447
|
|
5448
5448
|
const textField = (vars) => ({
|
5449
5449
|
[vars.padding]: '0 1em',
|
@@ -5513,7 +5513,7 @@ var textField$1 = textField(vars$f);
|
|
5513
5513
|
|
5514
5514
|
const globalRefs$c = getThemeRefs(globals);
|
5515
5515
|
|
5516
|
-
const vars$e =
|
5516
|
+
const vars$e = PasswordFieldClass.cssVarList;
|
5517
5517
|
|
5518
5518
|
const passwordField = {
|
5519
5519
|
[vars$e.wrapperBorderStyle]: 'solid',
|
@@ -5579,15 +5579,15 @@ const passwordField = {
|
|
5579
5579
|
};
|
5580
5580
|
|
5581
5581
|
const numberField = {
|
5582
|
-
...textField(
|
5582
|
+
...textField(NumberFieldClass.cssVarList)
|
5583
5583
|
};
|
5584
5584
|
|
5585
5585
|
const emailField = {
|
5586
|
-
...textField(
|
5586
|
+
...textField(EmailFieldClass.cssVarList)
|
5587
5587
|
};
|
5588
5588
|
|
5589
5589
|
const globalRefs$b = getThemeRefs(globals);
|
5590
|
-
const vars$d =
|
5590
|
+
const vars$d = TextAreaClass.cssVarList;
|
5591
5591
|
|
5592
5592
|
const textArea = {
|
5593
5593
|
[vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
|
@@ -5636,7 +5636,7 @@ const textArea = {
|
|
5636
5636
|
};
|
5637
5637
|
|
5638
5638
|
const globalRefs$a = getThemeRefs(globals);
|
5639
|
-
const vars$c =
|
5639
|
+
const vars$c = CheckboxClass.cssVarList;
|
5640
5640
|
|
5641
5641
|
const checkbox = {
|
5642
5642
|
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
|
@@ -5699,7 +5699,7 @@ const checkboxHeight = '1.25em';
|
|
5699
5699
|
const trackBorderWidth = '2px';
|
5700
5700
|
|
5701
5701
|
const globalRefs$9 = getThemeRefs(globals);
|
5702
|
-
const vars$b =
|
5702
|
+
const vars$b = SwitchToggleClass.cssVarList;
|
5703
5703
|
|
5704
5704
|
const switchToggle = {
|
5705
5705
|
size: {
|
@@ -5879,7 +5879,7 @@ const container = {
|
|
5879
5879
|
}
|
5880
5880
|
};
|
5881
5881
|
|
5882
|
-
const vars$9 =
|
5882
|
+
const vars$9 = LogoClass.cssVarList;
|
5883
5883
|
|
5884
5884
|
const logo = {
|
5885
5885
|
[vars$9.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
|
@@ -5887,7 +5887,7 @@ const logo = {
|
|
5887
5887
|
|
5888
5888
|
const globalRefs$7 = getThemeRefs(globals);
|
5889
5889
|
|
5890
|
-
const vars$8 =
|
5890
|
+
const vars$8 = TextClass.cssVarList;
|
5891
5891
|
|
5892
5892
|
const text = {
|
5893
5893
|
[vars$8.lineHeight]: '1em',
|
@@ -5964,7 +5964,7 @@ const text = {
|
|
5964
5964
|
};
|
5965
5965
|
|
5966
5966
|
const globalRefs$6 = getThemeRefs(globals);
|
5967
|
-
const vars$7 =
|
5967
|
+
const vars$7 = LinkClass.cssVarList;
|
5968
5968
|
|
5969
5969
|
const link = {
|
5970
5970
|
[vars$7.cursor]: 'pointer',
|
@@ -6017,7 +6017,7 @@ const link = {
|
|
6017
6017
|
|
6018
6018
|
const globalRefs$5 = getThemeRefs(globals);
|
6019
6019
|
|
6020
|
-
const vars$6 =
|
6020
|
+
const vars$6 = DividerClass.cssVarList;
|
6021
6021
|
|
6022
6022
|
const thickness = '2px';
|
6023
6023
|
const textPaddingSize = '10px';
|
@@ -6046,7 +6046,7 @@ const divider = {
|
|
6046
6046
|
}
|
6047
6047
|
};
|
6048
6048
|
|
6049
|
-
const vars$5 =
|
6049
|
+
const vars$5 = PasscodeClass.cssVarList;
|
6050
6050
|
const globalRefs$4 = getThemeRefs(globals);
|
6051
6051
|
|
6052
6052
|
const passcode = {
|
@@ -6085,7 +6085,7 @@ const passcode = {
|
|
6085
6085
|
|
6086
6086
|
const globalRefs$3 = getThemeRefs(globals);
|
6087
6087
|
|
6088
|
-
const vars$4 =
|
6088
|
+
const vars$4 = LoaderLinearClass.cssVarList;
|
6089
6089
|
|
6090
6090
|
const loaderLinear = {
|
6091
6091
|
[vars$4.display]: 'inline-block',
|
@@ -6129,7 +6129,7 @@ const loaderLinear = {
|
|
6129
6129
|
|
6130
6130
|
const globalRefs$2 = getThemeRefs(globals);
|
6131
6131
|
|
6132
|
-
const vars$3 =
|
6132
|
+
const vars$3 = LoaderRadialClass.cssVarList;
|
6133
6133
|
|
6134
6134
|
const loaderRadial = {
|
6135
6135
|
[vars$3.display]: 'inline-block',
|
@@ -6186,7 +6186,7 @@ const loaderRadial = {
|
|
6186
6186
|
|
6187
6187
|
const globalRefs$1 = getThemeRefs(globals);
|
6188
6188
|
|
6189
|
-
const vars$2 =
|
6189
|
+
const vars$2 = ComboBoxClass.cssVarList;
|
6190
6190
|
|
6191
6191
|
const comboBox = {
|
6192
6192
|
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
@@ -6234,12 +6234,12 @@ const comboBox = {
|
|
6234
6234
|
// [vars.overlayBorder]: `2px solid red`,
|
6235
6235
|
};
|
6236
6236
|
|
6237
|
-
|
6237
|
+
ImageClass.cssVarList;
|
6238
6238
|
|
6239
6239
|
const image = {};
|
6240
6240
|
|
6241
6241
|
const globalRefs = getThemeRefs(globals);
|
6242
|
-
const vars$1 =
|
6242
|
+
const vars$1 = PhoneFieldClass.cssVarList;
|
6243
6243
|
|
6244
6244
|
const phoneField = {
|
6245
6245
|
[vars$1.wrapperBorderStyle]: 'solid',
|
@@ -6303,7 +6303,7 @@ const phoneField = {
|
|
6303
6303
|
// }
|
6304
6304
|
};
|
6305
6305
|
|
6306
|
-
const vars =
|
6306
|
+
const vars = NewPasswordClass.cssVarList;
|
6307
6307
|
|
6308
6308
|
const newPassword = {
|
6309
6309
|
[vars.inputsGap]: '1em',
|
@@ -6360,5 +6360,5 @@ var components = {
|
|
6360
6360
|
|
6361
6361
|
var index = { globals, components };
|
6362
6362
|
|
6363
|
-
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 };
|
6364
6364
|
//# sourceMappingURL=index.esm.js.map
|