@descope/web-components-ui 1.0.104 → 1.0.106
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3570:(e,t,o)=>{o.r(t),o.d(t,{Checkbox:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3570:(e,t,o)=>{o.r(t),o.d(t,{Checkbox:()=>x});var r=o(4567),c=o(2061),p=o(9241),l=o(818),n=o(6882);const i=(0,r.iY)("checkbox"),{host:a,component:h,checkboxElement:s,checkboxSurface:b,checkboxHiddenLabel:d,label:k,requiredIndicator:y}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'}},x=(0,c.qC)((0,p.yk)({mappings:{width:a,cursor:h,checkboxBackgroundColor:{...s,property:"background-color"},checkboxRadius:{...s,property:"border-radius"},checkboxSize:[{...s,property:"width"},{...k,property:"margin-left"},{...s,property:"height"},{...b,property:"font-size"},{...h,property:"font-size"},{...k,property:"line-height"},{...d,property:"line-height"}],checkboxOutlineWidth:{...s,property:"outline-width"},checkboxOutlineOffset:{...s,property:"outline-offset"},checkboxOutlineColor:{...s,property:"outline-color"},checkboxOutlineStyle:{...s,property:"outline-style"},checkmarkTextColor:{...b,property:"color"},labelFontSize:[{...a,property:"font-size"},{...s,property:"font-size"},{...k,property:"font-size"},{...d,property:"font-size"}],labelFontWeight:[{...k,property:"font-weight"},{...d,property:"font-weight"}],labelMargin:[{...k,property:"left"},{...d,property:"padding-left"}],labelTextColor:[{...k,property:"color"},{...y,property:"color"}]}}),p.e4,p.dj,p.Ae,l.h)((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:`\n\t\t${n.Z}\n\n\t\tvaadin-checkbox [slot="label"] {\n\t\t\theight: 100%;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i}));o(9515),o(9789),o(6676),customElements.define(i,x)}}]);
|
package/package.json
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@descope/web-components-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.106",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
|
-
"
|
|
10
|
-
|
|
9
|
+
".": {
|
|
10
|
+
"require": "./dist/cjs/index.cjs.js",
|
|
11
|
+
"import": "./dist/index.esm.js"
|
|
12
|
+
},
|
|
13
|
+
"./package.json": {
|
|
14
|
+
"require": "./package.json"
|
|
15
|
+
}
|
|
11
16
|
},
|
|
12
17
|
"scripts": {
|
|
13
18
|
"test": "jest",
|
|
@@ -39,11 +39,16 @@ const Checkbox = compose(
|
|
|
39
39
|
// Checkbox
|
|
40
40
|
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
|
41
41
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
|
42
|
-
|
|
42
|
+
|
|
43
|
+
checkboxSize: [
|
|
43
44
|
{ ...checkboxElement, property: 'width' },
|
|
44
|
-
{ ...label, property: 'margin-left' }
|
|
45
|
+
{ ...label, property: 'margin-left' },
|
|
46
|
+
{ ...checkboxElement, property: 'height' },
|
|
47
|
+
{ ...checkboxSurface, property: 'font-size' },
|
|
48
|
+
{ ...component, property: 'font-size' },
|
|
49
|
+
{ ...label, property: 'line-height' },
|
|
50
|
+
{ ...checkboxHiddenLabel, property: 'line-height' }
|
|
45
51
|
],
|
|
46
|
-
checkboxHeight: { ...checkboxElement, property: 'height' },
|
|
47
52
|
|
|
48
53
|
checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
|
49
54
|
checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
|
@@ -51,18 +56,15 @@ const Checkbox = compose(
|
|
|
51
56
|
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
|
52
57
|
|
|
53
58
|
// Checkmark
|
|
54
|
-
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
|
|
55
59
|
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
|
56
60
|
|
|
57
61
|
// Label
|
|
58
62
|
labelFontSize: [
|
|
63
|
+
{ ...host, property: 'font-size' },
|
|
64
|
+
{ ...checkboxElement, property: 'font-size' },
|
|
59
65
|
{ ...label, property: 'font-size' },
|
|
60
66
|
{ ...checkboxHiddenLabel, property: 'font-size' }
|
|
61
67
|
],
|
|
62
|
-
labelLineHeight: [
|
|
63
|
-
{ ...label, property: 'line-height' },
|
|
64
|
-
{ ...checkboxHiddenLabel, property: 'line-height' }
|
|
65
|
-
],
|
|
66
68
|
labelFontWeight: [
|
|
67
69
|
{ ...label, property: 'font-weight' },
|
|
68
70
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
|
@@ -7,43 +7,30 @@ const vars = Checkbox.cssVarList;
|
|
|
7
7
|
|
|
8
8
|
const checkbox = {
|
|
9
9
|
[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
|
|
10
|
-
|
|
11
|
-
[vars.labelFontSize]: '12px',
|
|
12
|
-
[vars.labelFontWeight]: '400',
|
|
13
|
-
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
|
14
10
|
[vars.cursor]: 'pointer',
|
|
15
11
|
|
|
16
|
-
[vars.checkboxWidth]: 'calc(1em - 2px)',
|
|
17
|
-
[vars.checkboxHeight]: 'calc(1em - 2px)',
|
|
18
|
-
[vars.labelMargin]: 'calc(1em + 5px)',
|
|
19
|
-
|
|
20
12
|
[vars.checkboxRadius]: globalRefs.radius.xs,
|
|
13
|
+
[vars.checkboxSize]: '2em',
|
|
14
|
+
|
|
15
|
+
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
|
16
|
+
[vars.labelMargin]: '0.5em',
|
|
17
|
+
[vars.labelFontWeight]: '400',
|
|
21
18
|
|
|
22
19
|
size: {
|
|
23
20
|
xs: {
|
|
24
|
-
[vars.labelFontSize]: '
|
|
25
|
-
[vars.labelLineHeight]: '1.1em',
|
|
26
|
-
[vars.checkmarkSize]: '18px',
|
|
21
|
+
[vars.labelFontSize]: '8px',
|
|
27
22
|
},
|
|
28
23
|
sm: {
|
|
29
|
-
[vars.labelFontSize]: '
|
|
30
|
-
[vars.labelLineHeight]: '1.2em',
|
|
31
|
-
[vars.checkmarkSize]: '22px',
|
|
24
|
+
[vars.labelFontSize]: '10px',
|
|
32
25
|
},
|
|
33
26
|
md: {
|
|
34
|
-
[vars.labelFontSize]: '
|
|
35
|
-
[vars.labelLineHeight]: '1.35em',
|
|
36
|
-
[vars.checkmarkSize]: '26px',
|
|
27
|
+
[vars.labelFontSize]: '14px',
|
|
37
28
|
},
|
|
38
29
|
lg: {
|
|
39
30
|
[vars.labelFontSize]: '20px',
|
|
40
|
-
[vars.labelLineHeight]: '1.5em',
|
|
41
|
-
[vars.checkmarkSize]: '34px',
|
|
42
31
|
},
|
|
43
32
|
xl: {
|
|
44
|
-
[vars.labelFontSize]: '
|
|
45
|
-
[vars.labelLineHeight]: '1.75em',
|
|
46
|
-
[vars.checkmarkSize]: '38px',
|
|
33
|
+
[vars.labelFontSize]: '25px',
|
|
47
34
|
}
|
|
48
35
|
},
|
|
49
36
|
|