@descope/web-components-ui 1.0.127 → 1.0.128
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +32 -26
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +32 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/481.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-password/PasswordClass.js +4 -0
- package/src/theme/components/password.js +4 -0
package/dist/umd/481.js
CHANGED
@@ -1 +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:
|
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: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
CHANGED
@@ -17,6 +17,7 @@ const {
|
|
17
17
|
inputField,
|
18
18
|
inputElement,
|
19
19
|
inputElementPlaceholder,
|
20
|
+
revealButtonContainer,
|
20
21
|
revealButtonIcon,
|
21
22
|
label,
|
22
23
|
requiredIndicator,
|
@@ -27,6 +28,7 @@ const {
|
|
27
28
|
inputField: { selector: '::part(input-field)' },
|
28
29
|
inputElement: { selector: '> input' },
|
29
30
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
31
|
+
revealButtonContainer: { selector: () => '::part(reveal-button)' },
|
30
32
|
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
31
33
|
label: { selector: '::part(label)' },
|
32
34
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -72,6 +74,8 @@ export const PasswordClass = compose(
|
|
72
74
|
{ ...revealButtonIcon, property: 'color' }
|
73
75
|
],
|
74
76
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
77
|
+
|
78
|
+
revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
|
75
79
|
}
|
76
80
|
}),
|
77
81
|
draggableMixin,
|
@@ -1,6 +1,9 @@
|
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../helpers/themeHelpers';
|
1
3
|
import { PasswordClass } from '../../components/descope-password/PasswordClass';
|
2
4
|
import { refs } from './inputWrapper';
|
3
5
|
|
6
|
+
const globalRefs = getThemeRefs(globals);
|
4
7
|
const vars = PasswordClass.cssVarList;
|
5
8
|
|
6
9
|
const password = {
|
@@ -21,6 +24,7 @@ const password = {
|
|
21
24
|
[vars.inputOutlineStyle]: refs.outlineStyle,
|
22
25
|
[vars.inputOutlineColor]: refs.outlineColor,
|
23
26
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
27
|
+
[vars.revealButtonOffset]: globalRefs.spacing.md
|
24
28
|
};
|
25
29
|
|
26
30
|
export default password;
|