@descope/web-components-ui 1.0.55 → 1.0.56
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +424 -209
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -0
- package/dist/umd/descope-loader-radial-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-loader-linear/LoaderLinear.js +72 -0
- package/src/components/descope-loader-linear/index.js +5 -0
- package/src/components/descope-loader-radial/LoaderRadial.js +66 -0
- package/src/components/descope-loader-radial/index.js +5 -0
- package/src/index.js +2 -0
- package/src/theme/components/index.js +4 -1
- package/src/theme/components/loader/index.js +2 -0
- package/src/theme/components/loader/loaderLinear.js +49 -0
- package/src/theme/components/loader/loaderRadial.js +62 -0
- package/src/theme/components/textArea.js +0 -4
- package/src/theme/components/textField.js +0 -4
package/dist/index.esm.js
CHANGED
@@ -535,7 +535,7 @@ const compose =
|
|
535
535
|
(val) =>
|
536
536
|
fns.reduceRight((res, fn) => fn(res), val);
|
537
537
|
|
538
|
-
const componentName$
|
538
|
+
const componentName$i = getComponentName('button');
|
539
539
|
|
540
540
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
541
541
|
const resetStyles = `
|
@@ -558,7 +558,7 @@ const iconStyles = `
|
|
558
558
|
}
|
559
559
|
`;
|
560
560
|
|
561
|
-
const selectors$
|
561
|
+
const selectors$5 = {
|
562
562
|
label: '::part(label)'
|
563
563
|
};
|
564
564
|
|
@@ -567,7 +567,7 @@ const Button = compose(
|
|
567
567
|
mappings: {
|
568
568
|
backgroundColor: {},
|
569
569
|
borderRadius: {},
|
570
|
-
color: { selector: selectors$
|
570
|
+
color: { selector: selectors$5.label },
|
571
571
|
borderColor: {},
|
572
572
|
borderStyle: {},
|
573
573
|
borderWidth: {},
|
@@ -575,8 +575,8 @@ const Button = compose(
|
|
575
575
|
height: {},
|
576
576
|
width: matchHostStyle(),
|
577
577
|
cursor: {},
|
578
|
-
padding: [{ selector: selectors$
|
579
|
-
textDecoration: { selector: selectors$
|
578
|
+
padding: [{ selector: selectors$5.label }],
|
579
|
+
textDecoration: { selector: selectors$5.label }
|
580
580
|
}
|
581
581
|
}),
|
582
582
|
draggableMixin,
|
@@ -588,7 +588,7 @@ const Button = compose(
|
|
588
588
|
style: () =>
|
589
589
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
590
590
|
excludeAttrsSync: ['tabindex'],
|
591
|
-
componentName: componentName$
|
591
|
+
componentName: componentName$i
|
592
592
|
})
|
593
593
|
);
|
594
594
|
|
@@ -621,9 +621,9 @@ const loadingIndicatorStyles = `
|
|
621
621
|
}
|
622
622
|
`;
|
623
623
|
|
624
|
-
customElements.define(componentName$
|
624
|
+
customElements.define(componentName$i, Button);
|
625
625
|
|
626
|
-
const componentName$
|
626
|
+
const componentName$h = getComponentName('checkbox');
|
627
627
|
|
628
628
|
const Checkbox = compose(
|
629
629
|
createStyleMixin({
|
@@ -645,11 +645,131 @@ const Checkbox = compose(
|
|
645
645
|
}
|
646
646
|
`,
|
647
647
|
excludeAttrsSync: ['tabindex'],
|
648
|
-
componentName: componentName$
|
648
|
+
componentName: componentName$h
|
649
649
|
})
|
650
650
|
);
|
651
651
|
|
652
|
-
customElements.define(componentName$
|
652
|
+
customElements.define(componentName$h, Checkbox);
|
653
|
+
|
654
|
+
const componentName$g = getComponentName('loader-linear');
|
655
|
+
|
656
|
+
class RawLoaderLinear extends DescopeBaseClass {
|
657
|
+
static get componentName() {
|
658
|
+
return componentName$g;
|
659
|
+
}
|
660
|
+
constructor() {
|
661
|
+
super();
|
662
|
+
const template = document.createElement('template');
|
663
|
+
template.innerHTML = `
|
664
|
+
<style>
|
665
|
+
@keyframes tilt {
|
666
|
+
0% { transform: translateX(0); }
|
667
|
+
50% { transform: translateX(400%); }
|
668
|
+
}
|
669
|
+
:host {
|
670
|
+
position: relative;
|
671
|
+
}
|
672
|
+
div::after {
|
673
|
+
content: '';
|
674
|
+
animation-name: tilt;
|
675
|
+
position: absolute;
|
676
|
+
left: 0;
|
677
|
+
}
|
678
|
+
</style>
|
679
|
+
<div></div>
|
680
|
+
`;
|
681
|
+
|
682
|
+
this.attachShadow({ mode: 'open' });
|
683
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
684
|
+
|
685
|
+
this.baseSelector = ':host > div';
|
686
|
+
}
|
687
|
+
}
|
688
|
+
|
689
|
+
const selectors$4 = {
|
690
|
+
root: {},
|
691
|
+
after: { selector: '::after' }
|
692
|
+
};
|
693
|
+
|
694
|
+
const { root: root$1, after: after$1 } = selectors$4;
|
695
|
+
|
696
|
+
const LoaderLinear = compose(
|
697
|
+
createStyleMixin({
|
698
|
+
mappings: {
|
699
|
+
display: root$1,
|
700
|
+
width: matchHostStyle(root$1),
|
701
|
+
height: [root$1, after$1],
|
702
|
+
borderRadius: [root$1, after$1],
|
703
|
+
surfaceColor: [{ property: 'background-color' }],
|
704
|
+
barColor: [{ ...after$1, property: 'background-color' }],
|
705
|
+
barWidth: { ...after$1, property: 'width' },
|
706
|
+
animationDuration: [root$1, after$1],
|
707
|
+
animationTimingFunction: [root$1, after$1],
|
708
|
+
animationIterationCount: [root$1, after$1]
|
709
|
+
}
|
710
|
+
}),
|
711
|
+
draggableMixin,
|
712
|
+
componentNameValidationMixin
|
713
|
+
)(RawLoaderLinear);
|
714
|
+
|
715
|
+
customElements.define(componentName$g, LoaderLinear);
|
716
|
+
|
717
|
+
const componentName$f = getComponentName('loader-radial');
|
718
|
+
|
719
|
+
class RawLoaderRadial extends DescopeBaseClass {
|
720
|
+
static get componentName() {
|
721
|
+
return componentName$f;
|
722
|
+
}
|
723
|
+
constructor() {
|
724
|
+
super();
|
725
|
+
const template = document.createElement('template');
|
726
|
+
template.innerHTML = `
|
727
|
+
<style>
|
728
|
+
@keyframes spin {
|
729
|
+
0% { transform: rotate(0deg); }
|
730
|
+
100% { transform: rotate(360deg); }
|
731
|
+
}
|
732
|
+
:host {
|
733
|
+
position: relative;
|
734
|
+
}
|
735
|
+
:host > div {
|
736
|
+
animation-name: spin;
|
737
|
+
}
|
738
|
+
</style>
|
739
|
+
<div></div>
|
740
|
+
`;
|
741
|
+
|
742
|
+
this.attachShadow({ mode: 'open' });
|
743
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
744
|
+
|
745
|
+
this.baseSelector = ':host > div';
|
746
|
+
}
|
747
|
+
}
|
748
|
+
|
749
|
+
const LoaderRadial = compose(
|
750
|
+
createStyleMixin({
|
751
|
+
mappings: {
|
752
|
+
display: {},
|
753
|
+
width: matchHostStyle({}),
|
754
|
+
height: {},
|
755
|
+
spinnerWidth: { property: 'border-width' },
|
756
|
+
spinnerStyle: { property: 'border-style' },
|
757
|
+
spinnerRadius: { property: 'border-radius' },
|
758
|
+
spinnerTopColor: { property: 'border-top-color' },
|
759
|
+
spinnerBottomColor: { property: 'border-bottom-color' },
|
760
|
+
spinnerRightColor: { property: 'border-right-color' },
|
761
|
+
spinnerLeftColor: { property: 'border-left-color' },
|
762
|
+
color: {},
|
763
|
+
animationDuration: {},
|
764
|
+
animationTimingFunction: {},
|
765
|
+
animationIterationCount: {}
|
766
|
+
}
|
767
|
+
}),
|
768
|
+
draggableMixin,
|
769
|
+
componentNameValidationMixin
|
770
|
+
)(RawLoaderRadial);
|
771
|
+
|
772
|
+
customElements.define(componentName$f, LoaderRadial);
|
653
773
|
|
654
774
|
const selectors$3 = {
|
655
775
|
label: '::part(label)',
|
@@ -2119,150 +2239,146 @@ var globals = {
|
|
2119
2239
|
fonts
|
2120
2240
|
};
|
2121
2241
|
|
2122
|
-
const globalRefs$
|
2123
|
-
const vars$
|
2242
|
+
const globalRefs$7 = getThemeRefs(globals);
|
2243
|
+
const vars$c = Button.cssVarList;
|
2124
2244
|
|
2125
2245
|
const mode = {
|
2126
|
-
primary: globalRefs$
|
2127
|
-
secondary: globalRefs$
|
2128
|
-
success: globalRefs$
|
2129
|
-
error: globalRefs$
|
2130
|
-
surface: globalRefs$
|
2246
|
+
primary: globalRefs$7.colors.primary,
|
2247
|
+
secondary: globalRefs$7.colors.secondary,
|
2248
|
+
success: globalRefs$7.colors.success,
|
2249
|
+
error: globalRefs$7.colors.error,
|
2250
|
+
surface: globalRefs$7.colors.surface
|
2131
2251
|
};
|
2132
2252
|
|
2133
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
2253
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
|
2134
2254
|
|
2135
2255
|
const button = {
|
2136
2256
|
...helperTheme$1,
|
2137
2257
|
|
2138
2258
|
size: {
|
2139
2259
|
xs: {
|
2140
|
-
[vars$
|
2141
|
-
[vars$
|
2142
|
-
[vars$
|
2260
|
+
[vars$c.height]: '10px',
|
2261
|
+
[vars$c.fontSize]: '10px',
|
2262
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
|
2143
2263
|
},
|
2144
2264
|
sm: {
|
2145
|
-
[vars$
|
2146
|
-
[vars$
|
2147
|
-
[vars$
|
2265
|
+
[vars$c.height]: '20px',
|
2266
|
+
[vars$c.fontSize]: '10px',
|
2267
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
|
2148
2268
|
},
|
2149
2269
|
md: {
|
2150
|
-
[vars$
|
2151
|
-
[vars$
|
2152
|
-
[vars$
|
2270
|
+
[vars$c.height]: '30px',
|
2271
|
+
[vars$c.fontSize]: '14px',
|
2272
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
|
2153
2273
|
},
|
2154
2274
|
lg: {
|
2155
|
-
[vars$
|
2156
|
-
[vars$
|
2157
|
-
[vars$
|
2275
|
+
[vars$c.height]: '40px',
|
2276
|
+
[vars$c.fontSize]: '20px',
|
2277
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
|
2158
2278
|
},
|
2159
2279
|
xl: {
|
2160
|
-
[vars$
|
2161
|
-
[vars$
|
2162
|
-
[vars$
|
2280
|
+
[vars$c.height]: '50px',
|
2281
|
+
[vars$c.fontSize]: '25px',
|
2282
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
|
2163
2283
|
}
|
2164
2284
|
},
|
2165
2285
|
|
2166
|
-
[vars$
|
2167
|
-
[vars$
|
2168
|
-
[vars$
|
2169
|
-
[vars$
|
2170
|
-
[vars$
|
2286
|
+
[vars$c.borderRadius]: globalRefs$7.radius.lg,
|
2287
|
+
[vars$c.cursor]: 'pointer',
|
2288
|
+
[vars$c.borderWidth]: '2px',
|
2289
|
+
[vars$c.borderStyle]: 'solid',
|
2290
|
+
[vars$c.borderColor]: 'transparent',
|
2171
2291
|
|
2172
2292
|
_fullWidth: {
|
2173
|
-
[vars$
|
2293
|
+
[vars$c.width]: '100%'
|
2174
2294
|
},
|
2175
2295
|
_loading: {
|
2176
|
-
[vars$
|
2296
|
+
[vars$c.cursor]: 'wait'
|
2177
2297
|
},
|
2178
2298
|
|
2179
2299
|
variant: {
|
2180
2300
|
contained: {
|
2181
|
-
[vars$
|
2182
|
-
[vars$
|
2301
|
+
[vars$c.color]: helperRefs$1.contrast,
|
2302
|
+
[vars$c.backgroundColor]: helperRefs$1.main,
|
2183
2303
|
_hover: {
|
2184
|
-
[vars$
|
2304
|
+
[vars$c.backgroundColor]: helperRefs$1.dark
|
2185
2305
|
},
|
2186
2306
|
_loading: {
|
2187
|
-
[vars$
|
2307
|
+
[vars$c.backgroundColor]: helperRefs$1.main
|
2188
2308
|
}
|
2189
2309
|
},
|
2190
2310
|
outline: {
|
2191
|
-
[vars$
|
2192
|
-
[vars$
|
2311
|
+
[vars$c.color]: helperRefs$1.main,
|
2312
|
+
[vars$c.borderColor]: helperRefs$1.main,
|
2193
2313
|
_hover: {
|
2194
|
-
[vars$
|
2195
|
-
[vars$
|
2314
|
+
[vars$c.color]: helperRefs$1.dark,
|
2315
|
+
[vars$c.borderColor]: helperRefs$1.dark,
|
2196
2316
|
_error: {
|
2197
|
-
[vars$
|
2317
|
+
[vars$c.color]: helperRefs$1.error
|
2198
2318
|
}
|
2199
2319
|
}
|
2200
2320
|
},
|
2201
2321
|
link: {
|
2202
|
-
[vars$
|
2203
|
-
[vars$
|
2204
|
-
[vars$
|
2205
|
-
[vars$
|
2206
|
-
[vars$
|
2322
|
+
[vars$c.color]: helperRefs$1.main,
|
2323
|
+
[vars$c.padding]: 0,
|
2324
|
+
[vars$c.margin]: 0,
|
2325
|
+
[vars$c.lineHeight]: helperRefs$1.height,
|
2326
|
+
[vars$c.borderRadius]: 0,
|
2207
2327
|
_hover: {
|
2208
|
-
[vars$
|
2209
|
-
[vars$
|
2328
|
+
[vars$c.color]: helperRefs$1.main,
|
2329
|
+
[vars$c.textDecoration]: 'underline'
|
2210
2330
|
}
|
2211
2331
|
}
|
2212
2332
|
}
|
2213
2333
|
};
|
2214
2334
|
|
2215
|
-
const globalRefs$
|
2335
|
+
const globalRefs$6 = getThemeRefs(globals);
|
2216
2336
|
|
2217
|
-
const vars$
|
2337
|
+
const vars$b = TextField.cssVarList;
|
2218
2338
|
|
2219
2339
|
const textField = (vars) => ({
|
2220
2340
|
size: {
|
2221
2341
|
xs: {
|
2222
2342
|
[vars.height]: '14px',
|
2223
2343
|
[vars.fontSize]: '8px',
|
2224
|
-
[vars.padding]: `0 ${globalRefs$
|
2344
|
+
[vars.padding]: `0 ${globalRefs$6.spacing.xs}`
|
2225
2345
|
},
|
2226
2346
|
sm: {
|
2227
2347
|
[vars.height]: '20px',
|
2228
2348
|
[vars.fontSize]: '10px',
|
2229
|
-
[vars.padding]: `0 ${globalRefs$
|
2349
|
+
[vars.padding]: `0 ${globalRefs$6.spacing.sm}`
|
2230
2350
|
},
|
2231
2351
|
md: {
|
2232
2352
|
[vars.height]: '30px',
|
2233
2353
|
[vars.fontSize]: '14px',
|
2234
|
-
[vars.padding]: `0 ${globalRefs$
|
2354
|
+
[vars.padding]: `0 ${globalRefs$6.spacing.md}`
|
2235
2355
|
},
|
2236
2356
|
lg: {
|
2237
2357
|
[vars.height]: '40px',
|
2238
2358
|
[vars.fontSize]: '16px',
|
2239
|
-
[vars.padding]: `0 ${globalRefs$
|
2359
|
+
[vars.padding]: `0 ${globalRefs$6.spacing.lg}`
|
2240
2360
|
},
|
2241
2361
|
xl: {
|
2242
2362
|
[vars.height]: '50px',
|
2243
2363
|
[vars.fontSize]: '25px',
|
2244
|
-
[vars.padding]: `0 ${globalRefs$
|
2364
|
+
[vars.padding]: `0 ${globalRefs$6.spacing.xl}`
|
2245
2365
|
}
|
2246
2366
|
},
|
2247
2367
|
|
2248
|
-
[vars.color]: globalRefs$
|
2249
|
-
[vars.placeholderColor]: globalRefs$
|
2368
|
+
[vars.color]: globalRefs$6.colors.surface.contrast,
|
2369
|
+
[vars.placeholderColor]: globalRefs$6.colors.surface.contrast,
|
2250
2370
|
|
2251
|
-
[vars.backgroundColor]: globalRefs$
|
2371
|
+
[vars.backgroundColor]: globalRefs$6.colors.surface.light,
|
2252
2372
|
|
2253
2373
|
[vars.borderWidth]: '1px',
|
2254
2374
|
[vars.borderStyle]: 'solid',
|
2255
2375
|
[vars.borderColor]: 'transparent',
|
2256
|
-
[vars.borderRadius]: globalRefs$
|
2257
|
-
|
2258
|
-
_borderOffset: {
|
2259
|
-
[vars.outlineOffset]: '2px'
|
2260
|
-
},
|
2376
|
+
[vars.borderRadius]: globalRefs$6.radius.sm,
|
2261
2377
|
|
2262
2378
|
_disabled: {
|
2263
|
-
[vars.color]: globalRefs$
|
2264
|
-
[vars.placeholderColor]: globalRefs$
|
2265
|
-
[vars.backgroundColor]: globalRefs$
|
2379
|
+
[vars.color]: globalRefs$6.colors.surface.dark,
|
2380
|
+
[vars.placeholderColor]: globalRefs$6.colors.surface.light,
|
2381
|
+
[vars.backgroundColor]: globalRefs$6.colors.surface.main
|
2266
2382
|
},
|
2267
2383
|
|
2268
2384
|
_fullWidth: {
|
@@ -2270,27 +2386,27 @@ const textField = (vars) => ({
|
|
2270
2386
|
},
|
2271
2387
|
|
2272
2388
|
_focused: {
|
2273
|
-
[vars.outline]: `2px solid ${globalRefs$
|
2389
|
+
[vars.outline]: `2px solid ${globalRefs$6.colors.surface.main}`
|
2274
2390
|
},
|
2275
2391
|
|
2276
2392
|
_bordered: {
|
2277
|
-
[vars.borderColor]: globalRefs$
|
2393
|
+
[vars.borderColor]: globalRefs$6.colors.surface.main
|
2278
2394
|
},
|
2279
2395
|
|
2280
2396
|
_hasErrorMessage: {
|
2281
|
-
[vars.borderColor]: globalRefs$
|
2282
|
-
[vars.color]: globalRefs$
|
2283
|
-
[vars.placeholderColor]: globalRefs$
|
2397
|
+
[vars.borderColor]: globalRefs$6.colors.error.main,
|
2398
|
+
[vars.color]: globalRefs$6.colors.error.main,
|
2399
|
+
[vars.placeholderColor]: globalRefs$6.colors.error.light
|
2284
2400
|
}
|
2285
2401
|
});
|
2286
2402
|
|
2287
|
-
var textField$1 = textField(vars$
|
2403
|
+
var textField$1 = textField(vars$b);
|
2288
2404
|
|
2289
|
-
const vars$
|
2405
|
+
const vars$a = PasswordField.cssVarList;
|
2290
2406
|
|
2291
2407
|
const passwordField = {
|
2292
|
-
...textField(vars$
|
2293
|
-
[vars$
|
2408
|
+
...textField(vars$a),
|
2409
|
+
[vars$a.revealCursor]: 'pointer'
|
2294
2410
|
};
|
2295
2411
|
|
2296
2412
|
const numberField = {
|
@@ -2301,60 +2417,56 @@ const emailField = {
|
|
2301
2417
|
...textField(EmailField.cssVarList)
|
2302
2418
|
};
|
2303
2419
|
|
2304
|
-
const globalRefs$
|
2305
|
-
const vars$
|
2420
|
+
const globalRefs$5 = getThemeRefs(globals);
|
2421
|
+
const vars$9 = TextArea.cssVarList;
|
2306
2422
|
|
2307
2423
|
const textArea = {
|
2308
|
-
[vars$
|
2309
|
-
[vars$
|
2310
|
-
[vars$
|
2424
|
+
[vars$9.color]: globalRefs$5.colors.primary.main,
|
2425
|
+
[vars$9.backgroundColor]: globalRefs$5.colors.surface.light,
|
2426
|
+
[vars$9.resize]: 'vertical',
|
2311
2427
|
|
2312
|
-
[vars$
|
2313
|
-
[vars$
|
2314
|
-
[vars$
|
2315
|
-
[vars$
|
2316
|
-
|
2317
|
-
_borderOffset: {
|
2318
|
-
[vars$7.outlineOffset]: '2px'
|
2319
|
-
},
|
2428
|
+
[vars$9.borderRadius]: globalRefs$5.radius.sm,
|
2429
|
+
[vars$9.borderWidth]: '1px',
|
2430
|
+
[vars$9.borderStyle]: 'solid',
|
2431
|
+
[vars$9.borderColor]: 'transparent',
|
2320
2432
|
|
2321
2433
|
_bordered: {
|
2322
|
-
[vars$
|
2434
|
+
[vars$9.borderColor]: globalRefs$5.colors.surface.main
|
2323
2435
|
},
|
2324
2436
|
|
2325
2437
|
_focused: {
|
2326
|
-
[vars$
|
2438
|
+
[vars$9.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
|
2327
2439
|
},
|
2328
2440
|
|
2329
2441
|
_fullWidth: {
|
2330
|
-
[vars$
|
2442
|
+
[vars$9.width]: '100%'
|
2331
2443
|
},
|
2332
2444
|
|
2333
2445
|
_disabled: {
|
2334
|
-
[vars$
|
2446
|
+
[vars$9.cursor]: 'not-allowed'
|
2335
2447
|
},
|
2336
2448
|
|
2337
2449
|
_invalid: {
|
2338
|
-
[vars$
|
2450
|
+
[vars$9.outline]: `2px solid ${globalRefs$5.colors.error.main}`
|
2339
2451
|
}
|
2340
2452
|
};
|
2341
2453
|
|
2342
|
-
const vars$
|
2454
|
+
const vars$8 = Checkbox.cssVarList;
|
2343
2455
|
|
2344
2456
|
const checkbox = {
|
2345
|
-
[vars$
|
2457
|
+
[vars$8.cursor]: 'pointer'
|
2346
2458
|
};
|
2347
2459
|
|
2348
|
-
const vars$
|
2460
|
+
const vars$7 = SwitchToggle.cssVarList;
|
2349
2461
|
|
2350
2462
|
const swtichToggle = {
|
2351
|
-
[vars$
|
2352
|
-
[vars$
|
2463
|
+
[vars$7.width]: '70px',
|
2464
|
+
[vars$7.cursor]: [{}, { selector: '> label' }]
|
2353
2465
|
};
|
2354
2466
|
|
2355
|
-
const globalRefs$
|
2467
|
+
const globalRefs$4 = getThemeRefs(globals);
|
2356
2468
|
|
2357
|
-
const vars$
|
2469
|
+
const vars$6 = Container.cssVarList;
|
2358
2470
|
|
2359
2471
|
const verticalAlignment = {
|
2360
2472
|
start: { verticalAlignment: 'start' },
|
@@ -2377,31 +2489,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
2377
2489
|
|
2378
2490
|
const container = {
|
2379
2491
|
...helperTheme,
|
2380
|
-
[vars$
|
2492
|
+
[vars$6.display]: 'flex',
|
2381
2493
|
verticalPadding: {
|
2382
|
-
sm: { [vars$
|
2383
|
-
md: { [vars$
|
2384
|
-
lg: { [vars$
|
2494
|
+
sm: { [vars$6.verticalPadding]: '5px' },
|
2495
|
+
md: { [vars$6.verticalPadding]: '10px' },
|
2496
|
+
lg: { [vars$6.verticalPadding]: '20px' },
|
2385
2497
|
},
|
2386
2498
|
horizontalPadding: {
|
2387
|
-
sm: { [vars$
|
2388
|
-
md: { [vars$
|
2389
|
-
lg: { [vars$
|
2499
|
+
sm: { [vars$6.horizontalPadding]: '5px' },
|
2500
|
+
md: { [vars$6.horizontalPadding]: '10px' },
|
2501
|
+
lg: { [vars$6.horizontalPadding]: '20px' },
|
2390
2502
|
},
|
2391
2503
|
direction: {
|
2392
2504
|
row: {
|
2393
|
-
[vars$
|
2394
|
-
[vars$
|
2395
|
-
[vars$
|
2505
|
+
[vars$6.flexDirection]: 'row',
|
2506
|
+
[vars$6.alignItems]: helperRefs.verticalAlignment,
|
2507
|
+
[vars$6.justifyContent]: helperRefs.horizontalAlignment,
|
2396
2508
|
horizontalAlignment: {
|
2397
2509
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
2398
2510
|
}
|
2399
2511
|
},
|
2400
2512
|
|
2401
2513
|
column: {
|
2402
|
-
[vars$
|
2403
|
-
[vars$
|
2404
|
-
[vars$
|
2514
|
+
[vars$6.flexDirection]: 'column',
|
2515
|
+
[vars$6.alignItems]: helperRefs.horizontalAlignment,
|
2516
|
+
[vars$6.justifyContent]: helperRefs.verticalAlignment,
|
2405
2517
|
verticalAlignment: {
|
2406
2518
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
2407
2519
|
}
|
@@ -2410,204 +2522,204 @@ const container = {
|
|
2410
2522
|
|
2411
2523
|
spaceBetween: {
|
2412
2524
|
sm: {
|
2413
|
-
[vars$
|
2525
|
+
[vars$6.gap]: '10px'
|
2414
2526
|
},
|
2415
2527
|
md: {
|
2416
|
-
[vars$
|
2528
|
+
[vars$6.gap]: '20px'
|
2417
2529
|
},
|
2418
2530
|
lg: {
|
2419
|
-
[vars$
|
2531
|
+
[vars$6.gap]: '30px'
|
2420
2532
|
}
|
2421
2533
|
},
|
2422
2534
|
|
2423
2535
|
shadow: {
|
2424
2536
|
sm: {
|
2425
|
-
[vars$
|
2537
|
+
[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
2426
2538
|
},
|
2427
2539
|
md: {
|
2428
|
-
[vars$
|
2540
|
+
[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs.shadowColor}`
|
2429
2541
|
},
|
2430
2542
|
lg: {
|
2431
|
-
[vars$
|
2543
|
+
[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
2432
2544
|
},
|
2433
2545
|
xl: {
|
2434
|
-
[vars$
|
2546
|
+
[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
2435
2547
|
},
|
2436
2548
|
'2xl': {
|
2437
2549
|
[helperVars.shadowColor]: '#00000050',
|
2438
|
-
[vars$
|
2550
|
+
[vars$6.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
2439
2551
|
},
|
2440
2552
|
},
|
2441
2553
|
|
2442
2554
|
borderRadius: {
|
2443
2555
|
sm: {
|
2444
|
-
[vars$
|
2556
|
+
[vars$6.borderRadius]: globalRefs$4.radius.sm
|
2445
2557
|
},
|
2446
2558
|
md: {
|
2447
|
-
[vars$
|
2559
|
+
[vars$6.borderRadius]: globalRefs$4.radius.md
|
2448
2560
|
},
|
2449
2561
|
lg: {
|
2450
|
-
[vars$
|
2562
|
+
[vars$6.borderRadius]: globalRefs$4.radius.lg
|
2451
2563
|
},
|
2452
2564
|
}
|
2453
2565
|
};
|
2454
2566
|
|
2455
|
-
const vars$
|
2567
|
+
const vars$5 = Logo.cssVarList;
|
2456
2568
|
|
2457
2569
|
const logo = {
|
2458
|
-
[vars$
|
2570
|
+
[vars$5.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
2459
2571
|
};
|
2460
2572
|
|
2461
|
-
const globalRefs$
|
2573
|
+
const globalRefs$3 = getThemeRefs(globals);
|
2462
2574
|
|
2463
|
-
const vars$
|
2575
|
+
const vars$4 = Text.cssVarList;
|
2464
2576
|
|
2465
2577
|
const text = {
|
2466
|
-
[vars$
|
2467
|
-
[vars$
|
2468
|
-
[vars$
|
2469
|
-
[vars$
|
2578
|
+
[vars$4.lineHeight]: '1em',
|
2579
|
+
[vars$4.display]: 'inline-block',
|
2580
|
+
[vars$4.textAlign]: 'left',
|
2581
|
+
[vars$4.color]: globalRefs$3.colors.surface.dark,
|
2470
2582
|
variant: {
|
2471
2583
|
h1: {
|
2472
|
-
[vars$
|
2473
|
-
[vars$
|
2474
|
-
[vars$
|
2584
|
+
[vars$4.fontSize]: globalRefs$3.typography.h1.size,
|
2585
|
+
[vars$4.fontWeight]: globalRefs$3.typography.h1.weight,
|
2586
|
+
[vars$4.fontFamily]: globalRefs$3.typography.h1.font
|
2475
2587
|
},
|
2476
2588
|
h2: {
|
2477
|
-
[vars$
|
2478
|
-
[vars$
|
2479
|
-
[vars$
|
2589
|
+
[vars$4.fontSize]: globalRefs$3.typography.h2.size,
|
2590
|
+
[vars$4.fontWeight]: globalRefs$3.typography.h2.weight,
|
2591
|
+
[vars$4.fontFamily]: globalRefs$3.typography.h2.font
|
2480
2592
|
},
|
2481
2593
|
h3: {
|
2482
|
-
[vars$
|
2483
|
-
[vars$
|
2484
|
-
[vars$
|
2594
|
+
[vars$4.fontSize]: globalRefs$3.typography.h3.size,
|
2595
|
+
[vars$4.fontWeight]: globalRefs$3.typography.h3.weight,
|
2596
|
+
[vars$4.fontFamily]: globalRefs$3.typography.h3.font
|
2485
2597
|
},
|
2486
2598
|
subtitle1: {
|
2487
|
-
[vars$
|
2488
|
-
[vars$
|
2489
|
-
[vars$
|
2599
|
+
[vars$4.fontSize]: globalRefs$3.typography.subtitle1.size,
|
2600
|
+
[vars$4.fontWeight]: globalRefs$3.typography.subtitle1.weight,
|
2601
|
+
[vars$4.fontFamily]: globalRefs$3.typography.subtitle1.font
|
2490
2602
|
},
|
2491
2603
|
subtitle2: {
|
2492
|
-
[vars$
|
2493
|
-
[vars$
|
2494
|
-
[vars$
|
2604
|
+
[vars$4.fontSize]: globalRefs$3.typography.subtitle2.size,
|
2605
|
+
[vars$4.fontWeight]: globalRefs$3.typography.subtitle2.weight,
|
2606
|
+
[vars$4.fontFamily]: globalRefs$3.typography.subtitle2.font
|
2495
2607
|
},
|
2496
2608
|
body1: {
|
2497
|
-
[vars$
|
2498
|
-
[vars$
|
2499
|
-
[vars$
|
2609
|
+
[vars$4.fontSize]: globalRefs$3.typography.body1.size,
|
2610
|
+
[vars$4.fontWeight]: globalRefs$3.typography.body1.weight,
|
2611
|
+
[vars$4.fontFamily]: globalRefs$3.typography.body1.font
|
2500
2612
|
},
|
2501
2613
|
body2: {
|
2502
|
-
[vars$
|
2503
|
-
[vars$
|
2504
|
-
[vars$
|
2614
|
+
[vars$4.fontSize]: globalRefs$3.typography.body2.size,
|
2615
|
+
[vars$4.fontWeight]: globalRefs$3.typography.body2.weight,
|
2616
|
+
[vars$4.fontFamily]: globalRefs$3.typography.body2.font
|
2505
2617
|
}
|
2506
2618
|
},
|
2507
2619
|
mode: {
|
2508
2620
|
primary: {
|
2509
|
-
[vars$
|
2621
|
+
[vars$4.color]: globalRefs$3.colors.primary.main
|
2510
2622
|
},
|
2511
2623
|
secondary: {
|
2512
|
-
[vars$
|
2624
|
+
[vars$4.color]: globalRefs$3.colors.secondary.main
|
2513
2625
|
},
|
2514
2626
|
error: {
|
2515
|
-
[vars$
|
2627
|
+
[vars$4.color]: globalRefs$3.colors.error.main
|
2516
2628
|
},
|
2517
2629
|
success: {
|
2518
|
-
[vars$
|
2630
|
+
[vars$4.color]: globalRefs$3.colors.success.main
|
2519
2631
|
}
|
2520
2632
|
},
|
2521
2633
|
textAlign: {
|
2522
|
-
right: { [vars$
|
2523
|
-
left: { [vars$
|
2524
|
-
center: { [vars$
|
2634
|
+
right: { [vars$4.textAlign]: 'right' },
|
2635
|
+
left: { [vars$4.textAlign]: 'left' },
|
2636
|
+
center: { [vars$4.textAlign]: 'center' }
|
2525
2637
|
},
|
2526
2638
|
_fullWidth: {
|
2527
|
-
[vars$
|
2528
|
-
[vars$
|
2639
|
+
[vars$4.width]: '100%',
|
2640
|
+
[vars$4.display]: 'block'
|
2529
2641
|
},
|
2530
2642
|
_italic: {
|
2531
|
-
[vars$
|
2643
|
+
[vars$4.fontStyle]: 'italic'
|
2532
2644
|
},
|
2533
2645
|
_uppercase: {
|
2534
|
-
[vars$
|
2646
|
+
[vars$4.textTransform]: 'uppercase'
|
2535
2647
|
},
|
2536
2648
|
_lowercase: {
|
2537
|
-
[vars$
|
2649
|
+
[vars$4.textTransform]: 'lowercase'
|
2538
2650
|
}
|
2539
2651
|
};
|
2540
2652
|
|
2541
|
-
const globalRefs = getThemeRefs(globals);
|
2542
|
-
const vars$
|
2653
|
+
const globalRefs$2 = getThemeRefs(globals);
|
2654
|
+
const vars$3 = Link.cssVarList;
|
2543
2655
|
|
2544
2656
|
const link = {
|
2545
|
-
[vars$
|
2546
|
-
[vars$
|
2547
|
-
[vars$
|
2548
|
-
[vars$
|
2549
|
-
[vars$
|
2657
|
+
[vars$3.cursor]: 'pointer',
|
2658
|
+
[vars$3.borderBottomWidth]: '2px',
|
2659
|
+
[vars$3.borderBottomStyle]: 'solid',
|
2660
|
+
[vars$3.borderBottomColor]: 'transparent',
|
2661
|
+
[vars$3.color]: globalRefs$2.colors.primary.main,
|
2550
2662
|
|
2551
2663
|
_hover: {
|
2552
|
-
[vars$
|
2664
|
+
[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
|
2553
2665
|
},
|
2554
2666
|
|
2555
2667
|
textAlign: {
|
2556
|
-
right: { [vars$
|
2557
|
-
left: { [vars$
|
2558
|
-
center: { [vars$
|
2668
|
+
right: { [vars$3.textAlign]: 'right' },
|
2669
|
+
left: { [vars$3.textAlign]: 'left' },
|
2670
|
+
center: { [vars$3.textAlign]: 'center' }
|
2559
2671
|
},
|
2560
2672
|
|
2561
2673
|
_fullWidth: {
|
2562
|
-
[vars$
|
2674
|
+
[vars$3.width]: '100%'
|
2563
2675
|
},
|
2564
2676
|
|
2565
2677
|
mode: {
|
2566
2678
|
primary: {
|
2567
|
-
[vars$
|
2679
|
+
[vars$3.color]: globalRefs$2.colors.primary.main,
|
2568
2680
|
_hover: {
|
2569
|
-
[vars$
|
2681
|
+
[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
|
2570
2682
|
}
|
2571
2683
|
},
|
2572
2684
|
secondary: {
|
2573
|
-
[vars$
|
2685
|
+
[vars$3.color]: globalRefs$2.colors.secondary.main,
|
2574
2686
|
_hover: {
|
2575
|
-
[vars$
|
2687
|
+
[vars$3.borderBottomColor]: globalRefs$2.colors.secondary.main
|
2576
2688
|
}
|
2577
2689
|
},
|
2578
2690
|
error: {
|
2579
|
-
[vars$
|
2691
|
+
[vars$3.color]: globalRefs$2.colors.error.main,
|
2580
2692
|
_hover: {
|
2581
|
-
[vars$
|
2693
|
+
[vars$3.borderBottomColor]: globalRefs$2.colors.error.main
|
2582
2694
|
}
|
2583
2695
|
},
|
2584
2696
|
success: {
|
2585
|
-
[vars$
|
2697
|
+
[vars$3.color]: globalRefs$2.colors.success.main,
|
2586
2698
|
_hover: {
|
2587
|
-
[vars$
|
2699
|
+
[vars$3.borderBottomColor]: globalRefs$2.colors.success.main
|
2588
2700
|
}
|
2589
2701
|
}
|
2590
2702
|
}
|
2591
2703
|
};
|
2592
2704
|
|
2593
|
-
const vars = Divider.cssVarList;
|
2705
|
+
const vars$2 = Divider.cssVarList;
|
2594
2706
|
|
2595
2707
|
const divider = {
|
2596
|
-
[vars.alignItems]: 'center',
|
2597
|
-
[vars.height]: '2px',
|
2598
|
-
[vars.backgroundColor]: 'currentColor',
|
2599
|
-
[vars.opacity]: '0.2',
|
2600
|
-
[vars.padding]: '0 10px',
|
2601
|
-
[vars.width]: '100%',
|
2602
|
-
[vars.flexDirection]: 'row',
|
2603
|
-
[vars.alignSelf]: 'strech',
|
2604
|
-
[vars.textWidth]: 'fit-content',
|
2708
|
+
[vars$2.alignItems]: 'center',
|
2709
|
+
[vars$2.height]: '2px',
|
2710
|
+
[vars$2.backgroundColor]: 'currentColor',
|
2711
|
+
[vars$2.opacity]: '0.2',
|
2712
|
+
[vars$2.padding]: '0 10px',
|
2713
|
+
[vars$2.width]: '100%',
|
2714
|
+
[vars$2.flexDirection]: 'row',
|
2715
|
+
[vars$2.alignSelf]: 'strech',
|
2716
|
+
[vars$2.textWidth]: 'fit-content',
|
2605
2717
|
_vertical: {
|
2606
|
-
[vars.width]: '2px',
|
2607
|
-
[vars.padding]: '10px 0',
|
2608
|
-
[vars.flexDirection]: 'column',
|
2609
|
-
[vars.minHeight]: '200px',
|
2610
|
-
[vars.textWidth]: 'max-content'
|
2718
|
+
[vars$2.width]: '2px',
|
2719
|
+
[vars$2.padding]: '10px 0',
|
2720
|
+
[vars$2.flexDirection]: 'column',
|
2721
|
+
[vars$2.minHeight]: '200px',
|
2722
|
+
[vars$2.textWidth]: 'max-content'
|
2611
2723
|
}
|
2612
2724
|
};
|
2613
2725
|
|
@@ -2615,6 +2727,107 @@ const passcode = {
|
|
2615
2727
|
...textField(Passcode.cssVarList),
|
2616
2728
|
};
|
2617
2729
|
|
2730
|
+
const globalRefs$1 = getThemeRefs(globals);
|
2731
|
+
|
2732
|
+
const vars$1 = LoaderLinear.cssVarList;
|
2733
|
+
|
2734
|
+
const loaderLinear = {
|
2735
|
+
[vars$1.display]: 'inline-block',
|
2736
|
+
[vars$1.barColor]: globalRefs$1.colors.surface.contrast,
|
2737
|
+
[vars$1.barWidth]: '20%',
|
2738
|
+
[vars$1.surfaceColor]: globalRefs$1.colors.surface.main,
|
2739
|
+
[vars$1.borderRadius]: '4px',
|
2740
|
+
[vars$1.animationDuration]: '2s',
|
2741
|
+
[vars$1.animationTimingFunction]: 'linear',
|
2742
|
+
[vars$1.animationIterationCount]: 'infinite',
|
2743
|
+
[vars$1.width]: '100%',
|
2744
|
+
size: {
|
2745
|
+
xs: {
|
2746
|
+
[vars$1.height]: '6px'
|
2747
|
+
},
|
2748
|
+
sm: {
|
2749
|
+
[vars$1.height]: '8px'
|
2750
|
+
},
|
2751
|
+
md: {
|
2752
|
+
[vars$1.height]: '10px'
|
2753
|
+
},
|
2754
|
+
lg: {
|
2755
|
+
[vars$1.height]: '12px'
|
2756
|
+
},
|
2757
|
+
xl: {
|
2758
|
+
[vars$1.height]: '14px'
|
2759
|
+
}
|
2760
|
+
},
|
2761
|
+
mode: {
|
2762
|
+
primary: {
|
2763
|
+
[vars$1.barColor]: globalRefs$1.colors.primary.main
|
2764
|
+
},
|
2765
|
+
secondary: {
|
2766
|
+
[vars$1.barColor]: globalRefs$1.colors.secondary.main
|
2767
|
+
}
|
2768
|
+
},
|
2769
|
+
_hidden: {
|
2770
|
+
[vars$1.display]: 'none'
|
2771
|
+
}
|
2772
|
+
};
|
2773
|
+
|
2774
|
+
const globalRefs = getThemeRefs(globals);
|
2775
|
+
|
2776
|
+
const vars = LoaderRadial.cssVarList;
|
2777
|
+
|
2778
|
+
const loaderRadial = {
|
2779
|
+
[vars.display]: 'inline-block',
|
2780
|
+
[vars.color]: globalRefs.colors.surface.contrast,
|
2781
|
+
[vars.animationDuration]: '2s',
|
2782
|
+
[vars.animationTimingFunction]: 'linear',
|
2783
|
+
[vars.animationIterationCount]: 'infinite',
|
2784
|
+
[vars.spinnerStyle]: 'solid',
|
2785
|
+
[vars.spinnerWidth]: '4px',
|
2786
|
+
[vars.spinnerRadius]: '50%',
|
2787
|
+
[vars.spinnerTopColor]: 'currentColor',
|
2788
|
+
[vars.spinnerBottomColor]: 'transparent',
|
2789
|
+
[vars.spinnerRightColor]: 'currentColor',
|
2790
|
+
[vars.spinnerLeftColor]: 'transparent',
|
2791
|
+
size: {
|
2792
|
+
xs: {
|
2793
|
+
[vars.width]: '20px',
|
2794
|
+
[vars.height]: '20px',
|
2795
|
+
[vars.spinnerWidth]: '2px'
|
2796
|
+
},
|
2797
|
+
sm: {
|
2798
|
+
[vars.width]: '30px',
|
2799
|
+
[vars.height]: '30px',
|
2800
|
+
[vars.spinnerWidth]: '3px'
|
2801
|
+
},
|
2802
|
+
md: {
|
2803
|
+
[vars.width]: '40px',
|
2804
|
+
[vars.height]: '40px',
|
2805
|
+
[vars.spinnerWidth]: '4px'
|
2806
|
+
},
|
2807
|
+
lg: {
|
2808
|
+
[vars.width]: '60px',
|
2809
|
+
[vars.height]: '60px',
|
2810
|
+
[vars.spinnerWidth]: '5px'
|
2811
|
+
},
|
2812
|
+
xl: {
|
2813
|
+
[vars.width]: '80px',
|
2814
|
+
[vars.height]: '80px',
|
2815
|
+
[vars.spinnerWidth]: '6px'
|
2816
|
+
}
|
2817
|
+
},
|
2818
|
+
mode: {
|
2819
|
+
primary: {
|
2820
|
+
[vars.color]: globalRefs.colors.primary.main
|
2821
|
+
},
|
2822
|
+
secondary: {
|
2823
|
+
[vars.color]: globalRefs.colors.secondary.main
|
2824
|
+
}
|
2825
|
+
},
|
2826
|
+
_hidden: {
|
2827
|
+
[vars.display]: 'none'
|
2828
|
+
}
|
2829
|
+
};
|
2830
|
+
|
2618
2831
|
var components = {
|
2619
2832
|
button,
|
2620
2833
|
textField: textField$1,
|
@@ -2629,7 +2842,9 @@ var components = {
|
|
2629
2842
|
text,
|
2630
2843
|
link,
|
2631
2844
|
divider,
|
2632
|
-
passcode
|
2845
|
+
passcode,
|
2846
|
+
loaderRadial,
|
2847
|
+
loaderLinear
|
2633
2848
|
};
|
2634
2849
|
|
2635
2850
|
var index = { globals, components };
|