@descope/web-components-ui 1.0.176 → 1.0.177
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +12 -6
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +12 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/ButtonClass.js +4 -1
- package/src/index.d.ts +0 -1
- package/src/theme/components/button.js +8 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{5545:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{5545:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>c}),e(729);var o=e(2061),r=e(4567),i=e(1e3);const a=(0,r.iY)("button"),{host:s,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...s,property:"width"},hostHeight:{property:"height"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:p,fontSize:b}=c.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,customElements.define(a,c)}}]);
|
package/package.json
CHANGED
|
@@ -75,7 +75,6 @@ export const ButtonClass = compose(
|
|
|
75
75
|
borderWidth: {},
|
|
76
76
|
|
|
77
77
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
|
78
|
-
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
|
79
78
|
|
|
80
79
|
labelTextColor: { property: 'color' },
|
|
81
80
|
labelTextDecoration: { ...label, property: 'text-decoration' },
|
|
@@ -100,6 +99,10 @@ export const ButtonClass = compose(
|
|
|
100
99
|
vaadin-button {
|
|
101
100
|
height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
102
101
|
}
|
|
102
|
+
[square="true"]:not([full-width="true"]) {
|
|
103
|
+
width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
104
|
+
padding: 0;
|
|
105
|
+
}
|
|
103
106
|
`,
|
|
104
107
|
excludeAttrsSync: ['tabindex'],
|
|
105
108
|
componentName,
|
package/src/index.d.ts
CHANGED
|
@@ -15,9 +15,6 @@ const mode = {
|
|
|
15
15
|
|
|
16
16
|
const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
|
|
17
17
|
|
|
18
|
-
const verticalPaddingRatio = 3;
|
|
19
|
-
const horizontalPaddingRatio = 2;
|
|
20
|
-
|
|
21
18
|
const button = {
|
|
22
19
|
...helperTheme,
|
|
23
20
|
|
|
@@ -25,6 +22,7 @@ const button = {
|
|
|
25
22
|
|
|
26
23
|
[compVars.cursor]: 'pointer',
|
|
27
24
|
[compVars.hostHeight]: '3em',
|
|
25
|
+
[compVars.hostWidth]: 'auto',
|
|
28
26
|
|
|
29
27
|
[compVars.borderRadius]: globalRefs.radius.sm,
|
|
30
28
|
[compVars.borderWidth]: globalRefs.border.xs,
|
|
@@ -33,8 +31,7 @@ const button = {
|
|
|
33
31
|
|
|
34
32
|
[compVars.labelSpacing]: '0.25em',
|
|
35
33
|
|
|
36
|
-
[compVars.verticalPadding]:
|
|
37
|
-
[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
|
|
34
|
+
[compVars.verticalPadding]: '1em',
|
|
38
35
|
|
|
39
36
|
[compVars.outlineWidth]: globals.border.sm,
|
|
40
37
|
[compVars.outlineOffset]: '0px', // keep `px` unit for external calc
|
|
@@ -48,6 +45,12 @@ const button = {
|
|
|
48
45
|
lg: { [compVars.fontSize]: '18px' },
|
|
49
46
|
},
|
|
50
47
|
|
|
48
|
+
_square: {
|
|
49
|
+
[compVars.hostHeight]: '3em',
|
|
50
|
+
[compVars.hostWidth]: '3em',
|
|
51
|
+
[compVars.verticalPadding]: '0',
|
|
52
|
+
},
|
|
53
|
+
|
|
51
54
|
_fullWidth: {
|
|
52
55
|
[compVars.hostWidth]: '100%',
|
|
53
56
|
},
|