@descope/web-components-ui 1.0.127 → 1.0.129

package/dist/umd/481.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[481],{2481:(t,e,r)=>{r.d(e,{v:()=>g,f:()=>p});var n=r(9241),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:d,inputElement:l,inputElementPlaceholder:u,revealButtonIcon:c,label:h,requiredIndicator:f,errorMessage:y,helperText:b}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[{property:"font-size"},{...s,property:"font-size"}],fontFamily:[h,d,y,b],inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelTextColor:[{...h,property:"color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},inputValueTextColor:[{...l,property:"color"},{...c,property:"color"}],inputPlaceholderTextColor:{...u,property:"color"}}}),n.e4,n.dj,n.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const n=t=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",n),t.target.removeEventListener("dragend",n)};t.target.addEventListener("mouseup",n,{once:!0}),t.target.addEventListener("dragend",n,{once:!0})}})),super.init?.()}}))((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmin-width: 10em;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tbox-sizing: border-box;\t\t\t\t\n\t\t\t\tpadding: calc(var(${g.cssVarList.inputOutlineWidth}) + var(${g.cssVarList.inputOutlineOffset}));\n\t\t\t}\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\t\t\t\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t${(0,a.Pd)("vaadin-password-field")}\n\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${g.cssVarList.inputOutlineColor});\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[481],{2481:(t,e,r)=>{r.d(e,{v:()=>g,f:()=>p});var n=r(9241),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:l,inputElement:d,inputElementPlaceholder:u,revealButtonContainer:c,revealButtonIcon:h,label:f,requiredIndicator:y,errorMessage:b,helperText:v}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonContainer:{selector:()=>"::part(reveal-button)"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[{property:"font-size"},{...s,property:"font-size"}],fontFamily:[f,l,b,v],inputHeight:{...l,property:"height"},inputBackgroundColor:{...l,property:"background-color"},inputBorderStyle:{...l,property:"border-style"},inputBorderWidth:{...l,property:"border-width"},inputBorderColor:{...l,property:"border-color"},inputBorderRadius:{...l,property:"border-radius"},inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineOffset:{...l,property:"outline-offset"},inputOutlineWidth:{...l,property:"outline-width"},labelTextColor:[{...f,property:"color"},{...y,property:"color"}],labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:[{...d,property:"color"},{...h,property:"color"}],inputPlaceholderTextColor:{...u,property:"color"},revealButtonOffset:{...c,property:"margin"}}}),n.e4,n.dj,n.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const n=t=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",n),t.target.removeEventListener("dragend",n)};t.target.addEventListener("mouseup",n,{once:!0}),t.target.addEventListener("dragend",n,{once:!0})}})),super.init?.()}}))((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmin-width: 10em;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tbox-sizing: border-box;\t\t\t\t\n\t\t\t\tpadding: calc(var(${g.cssVarList.inputOutlineWidth}) + var(${g.cssVarList.inputOutlineOffset}));\n\t\t\t}\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\t\t\t\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t${(0,a.Pd)("vaadin-password-field")}\n\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${g.cssVarList.inputOutlineColor});\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.127",
+	"version": "1.0.129",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-password/PasswordClass.js

@@ -17,6 +17,7 @@ const {
 	inputField,
 	inputElement,
 	inputElementPlaceholder,
+	revealButtonContainer,
 	revealButtonIcon,
 	label,
 	requiredIndicator,
@@ -27,6 +28,7 @@ const {
 	inputField: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButtonContainer: { selector: () => '::part(reveal-button)' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -72,6 +74,8 @@ export const PasswordClass = compose(
 				{ ...revealButtonIcon, property: 'color' }
 			],
 			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+
+			revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
 		}
 	}),
 	draggableMixin,

package/src/theme/components/button.js

@@ -41,11 +41,10 @@ const button = {
 	[compVars.outlineColor]: 'transparent',
 
 	size: {
-		xs: { [compVars.fontSize]: '8px' },
-		sm: { [compVars.fontSize]: '10px' },
-		md: { [compVars.fontSize]: '14px' },
-		lg: { [compVars.fontSize]: '20px' },
-		xl: { [compVars.fontSize]: '25px' }
+		xs: { [compVars.fontSize]: '12px' },
+		sm: { [compVars.fontSize]: '14px' },
+		md: { [compVars.fontSize]: '16px' },
+		lg: { [compVars.fontSize]: '18px' }
 	},
 
 	_fullWidth: {

package/src/theme/components/inputWrapper.js

@@ -28,11 +28,10 @@ const [theme, refs, vars] = createHelperVars({
     fontFamily: globalRefs.fonts.font1.family,
 
     size: {
-        xs: { fontSize: '8px' },
-        sm: { fontSize: '10px' },
-        md: { fontSize: '14px' },
-        lg: { fontSize: '20px' },
-        xl: { fontSize: '25px' }
+        xs: { fontSize: '12px' },
+        sm: { fontSize: '14px' },
+        md: { fontSize: '16px' },
+        lg: { fontSize: '18px' }
     },
 
     _fullWidth: {

package/src/theme/components/password.js

@@ -1,6 +1,9 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import { PasswordClass } from '../../components/descope-password/PasswordClass';
 import { refs } from './inputWrapper';
 
+const globalRefs = getThemeRefs(globals);
 const vars = PasswordClass.cssVarList;
 
 const password = {
@@ -21,6 +24,7 @@ const password = {
 	[vars.inputOutlineStyle]: refs.outlineStyle,
 	[vars.inputOutlineColor]: refs.outlineColor,
 	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.revealButtonOffset]: globalRefs.spacing.md
 };
 
 export default password;