@descope/web-components-ui 1.0.90 → 1.0.91
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +77 -62
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/387.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-combo-box/ComboBox.js +4 -3
- package/src/components/descope-password-field/PasswordField.js +36 -27
- package/src/components/descope-phone-field/PhoneField.js +7 -2
package/dist/umd/387.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[387],{3387:(e,r
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[387],{3387:(t,e,r)=>{r.d(e,{Z:()=>h,f:()=>n});var o=r(4988),p=r(2061);const n=(0,r(4567).iY)("password-field"),{host:a,inputWrapper:l,inputElement:i,inputElementPlaceholder:d,revealButton:s,revealButtonIcon:c,label:u,requiredIndicator:f}={host:()=>":host",inputWrapper:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButton:{selector:"vaadin-password-field-button"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"> label"},requiredIndicator:{selector:"::part(required-indicator)::after"}},h=(0,p.qC)((0,o.yk)({mappings:{wrapperBorderStyle:{...l,property:"border-style"},wrapperBorderWidth:{...l,property:"border-width"},wrapperBorderColor:{...l,property:"border-color"},wrapperBorderRadius:{...l,property:"border-radius"},labelTextColor:[{...u,property:"color"},{...f,property:"color"}],inputTextColor:[{...i,property:"color"},{...c,property:"color"}],placeholderTextColor:{...d,property:"color"},fontSize:[{},a],height:l,padding:l,pointerCursor:[{...s,property:"cursor"},{...u,property:"cursor"},{...f,property:"cursor"}]}}),o.e4,o.dj,o.Ae)((0,o.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:"\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbackground: transparent;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\t\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t",excludeAttrsSync:["tabindex"],componentName:n}))}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(t,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(e,t,o)=>{o.d(t,{Z:()=>h,f:()=>i});var r=o(2061),n=o(4567),a=o(4988);const i=(0,n.iY)("combo-box"),{host:l,input:s,placeholder:d,toggle:c,label:b}={host:{selector:()=>":host"},input:{selector:"::part(input-field)"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"}},p=(0,r.qC)((0,a.yk)({mappings:{width:l,height:s,padding:s,backgroundColor:s,boxShadow:s,borderColor:s,borderWidth:s,borderStyle:s,borderRadius:s,color:[b,s],fontSize:[{},l],placeholderColor:{...d,property:"color"},toggleCursor:{...c,property:"cursor"},toggleColor:{...c,property:"color"},overlayBackground:{property:()=>p.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>p.cssVarList.overlay.border}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},cursor:{selector:"vaadin-combo-box-item"}},forward:{include:!1,attributes:["size"]}}),a.dj,a.Ae,(e=>class extends e{constructor(){super()}#e(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name")}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id")})})),e.items=t,e.renderer=(e,t,o)=>{e.innerHTML=o.item.outerHTML})}#t(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=function(){this.bringToFront()},e._detachOverlay=function(){},e._enterModalState=function(){}}init(){super.init?.(),this.#t(),(0,n.P$)(this,this.#e.bind(this))}}))((0,a.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>'\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\t-webkit-mask-image: none;\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t',excludeAttrsSync:["tabindex","size"],componentName:i,includeForwardProps:["items","renderer"]})),h=p},1294:(e,t,o)=>{o.r(t),o.d(t,{ComboBox:()=>r.Z}),o(9314);var r=o(3352);customElements.define(r.f,r.Z)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[414],{4840:(t,e,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[414],{4840:(t,e,r)=>{r.r(e),r.d(e,{PhoneField:()=>g}),r(4772),r(1294),r(9357);var n=r(9859),o=r(4567),d=r(2061),i=r(4988),p=r(9063),l=r(3352);const a=p.Z.cssVarList,s=l.Z.cssVarList,h=(0,o.iY)("phone-field"),{host:c,inputWrapper:u,countryCodeInput:y,phoneInput:f,label:b,requiredIndicator:m,separator:w}={host:{selector:()=>":host"},inputWrapper:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},separator:{selector:"descope-phone-field-internal .separator"}},g=(0,d.qC)((0,i.yk)({mappings:{componentWidth:{...c,property:"width"},wrapperBorderStyle:[{...u,property:"border-style"},{...w,property:"border-left-style"}],wrapperBorderWidth:[{...u,property:"border-width"},{...w,property:"border-left-width"}],wrapperBorderColor:[{...u,property:"border-color"},{...w,property:"border-left-color"}],wrapperBorderRadius:{...u,property:"border-radius"},inputHeight:{...u,property:"height"},countryCodeInputWidth:{...y,property:s.width},countryCodeDropdownWidth:{...y,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...f,property:"width"},color:[b,m,{...f,property:a.color},{...y,property:s.color}],placeholderColor:{...f,property:a.placeholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:s.overlayItemBackgroundColor}}}),i.e4,i.dj,(t=>class extends t{constructor(){super()}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${n.f} \n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.f}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.f),(0,o.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder"]})}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\t--vaadin-field-default-width: auto;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tmin-height: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\t\n\t\t\t}\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\theight: 100%;\n\t\t\t\t${s.borderWidth}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\theight: 100%;\n\t\t\t\t${a.borderWidth}: 0;\n\t\t\t\t${a.borderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\t\t\tcontent: "*";\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,g)}}]);
|
package/package.json
CHANGED
@@ -62,11 +62,12 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
62
62
|
}
|
63
63
|
}
|
64
64
|
|
65
|
-
const { host, input, placeholder, toggle } = {
|
65
|
+
const { host, input, placeholder, toggle, label } = {
|
66
66
|
host: { selector: () => ':host' },
|
67
67
|
input: { selector: '::part(input-field)' },
|
68
68
|
placeholder: { selector: '> input:placeholder-shown' },
|
69
|
-
toggle: { selector: '::part(toggle-button)' }
|
69
|
+
toggle: { selector: '::part(toggle-button)' },
|
70
|
+
label: { selector: '::part(label)' }
|
70
71
|
}
|
71
72
|
|
72
73
|
// const { slotted, selected } = {
|
@@ -89,7 +90,7 @@ const ComboBox = compose(
|
|
89
90
|
borderStyle: input,
|
90
91
|
borderRadius: input,
|
91
92
|
|
92
|
-
color: input,
|
93
|
+
color: [label, input],
|
93
94
|
|
94
95
|
// we apply font-size also on the host so we can set its width with em
|
95
96
|
fontSize: [{}, host],
|
@@ -10,14 +10,22 @@ import { getComponentName } from '../../helpers/componentHelpers';
|
|
10
10
|
|
11
11
|
export const componentName = getComponentName('password-field');
|
12
12
|
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
const {
|
14
|
+
host,
|
15
|
+
inputWrapper,
|
16
|
+
inputElement,
|
17
|
+
inputElementPlaceholder,
|
18
|
+
revealButton,
|
19
|
+
revealButtonIcon,
|
20
|
+
label,
|
21
|
+
requiredIndicator
|
22
|
+
} = {
|
16
23
|
host: () => ':host',
|
17
24
|
inputWrapper: { selector: '::part(input-field)' },
|
18
25
|
inputElement: { selector: '> input' },
|
19
26
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
20
27
|
revealButton: { selector: 'vaadin-password-field-button' },
|
28
|
+
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
21
29
|
label: { selector: '> label' },
|
22
30
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
23
31
|
}
|
@@ -33,7 +41,10 @@ const PasswordField = compose(
|
|
33
41
|
{ ...label, property: 'color' },
|
34
42
|
{ ...requiredIndicator, property: 'color' }
|
35
43
|
],
|
36
|
-
inputTextColor: [
|
44
|
+
inputTextColor: [
|
45
|
+
{ ...inputElement, property: 'color' },
|
46
|
+
{ ...revealButtonIcon, property: 'color' }
|
47
|
+
],
|
37
48
|
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
38
49
|
fontSize: [{}, host],
|
39
50
|
height: inputWrapper,
|
@@ -52,32 +63,30 @@ const PasswordField = compose(
|
|
52
63
|
createProxy({
|
53
64
|
slots: ['suffix'],
|
54
65
|
wrappedEleName: 'vaadin-password-field',
|
55
|
-
style:
|
66
|
+
style: `
|
67
|
+
:host {
|
68
|
+
display: inline-block;
|
69
|
+
}
|
70
|
+
vaadin-password-field {
|
71
|
+
width: 100%;
|
72
|
+
padding: 0;
|
73
|
+
}
|
74
|
+
vaadin-password-field > input {
|
75
|
+
min-height: 0;
|
76
|
+
}
|
77
|
+
vaadin-password-field::part(input-field) {
|
78
|
+
background: transparent;
|
79
|
+
}
|
80
|
+
vaadin-password-field::part(input-field)::after {
|
81
|
+
opacity: 0;
|
82
|
+
}
|
83
|
+
vaadin-password-field::before {
|
84
|
+
height: initial;
|
85
|
+
}
|
86
|
+
`,
|
56
87
|
excludeAttrsSync: ['tabindex'],
|
57
88
|
componentName
|
58
89
|
})
|
59
90
|
);
|
60
91
|
|
61
|
-
overrides = `
|
62
|
-
:host {
|
63
|
-
display: inline-block;
|
64
|
-
}
|
65
|
-
vaadin-password-field {
|
66
|
-
width: 100%;
|
67
|
-
padding: 0;
|
68
|
-
}
|
69
|
-
vaadin-password-field > input {
|
70
|
-
min-height: 0;
|
71
|
-
}
|
72
|
-
vaadin-password-field::part(input-field) {
|
73
|
-
background: transparent;
|
74
|
-
}
|
75
|
-
vaadin-password-field::part(input-field)::after {
|
76
|
-
opacity: 0;
|
77
|
-
}
|
78
|
-
vaadin-password-field::before {
|
79
|
-
height: initial;
|
80
|
-
}
|
81
|
-
`;
|
82
|
-
|
83
92
|
export default PasswordField;
|
@@ -65,7 +65,7 @@ const {
|
|
65
65
|
inputWrapper: { selector: '::part(input-field)' },
|
66
66
|
phoneInput: { selector: () => 'descope-text-field' },
|
67
67
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
68
|
-
label: { selector: '
|
68
|
+
label: { selector: '::part(label)' },
|
69
69
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
70
70
|
separator: { selector: 'descope-phone-field-internal .separator' }
|
71
71
|
};
|
@@ -99,7 +99,12 @@ const PhoneField = compose(
|
|
99
99
|
|
100
100
|
phoneInputWidth: { ...phoneInput, property: 'width' },
|
101
101
|
|
102
|
-
color: [
|
102
|
+
color: [
|
103
|
+
label,
|
104
|
+
requiredIndicator,
|
105
|
+
{ ...phoneInput, property: textVars.color },
|
106
|
+
{ ...countryCodeInput, property: comboVars.color }
|
107
|
+
],
|
103
108
|
|
104
109
|
placeholderColor: {
|
105
110
|
...phoneInput,
|