@descope/web-components-ui 1.0.46 → 1.0.49
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +60 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -0
- package/dist/umd/599.js +1 -1
- package/dist/umd/938.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-combo-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +5 -2
- package/src/components/descope-checkbox/Checkbox.js +8 -3
- package/src/components/descope-email-field/EmailField.js +4 -1
- package/src/components/descope-number-field/NumberField.js +4 -1
- package/src/components/descope-password-field/PasswordField.js +4 -1
- package/src/components/descope-switch-toggle/SwitchToggle.js +7 -2
- package/src/components/descope-text-area/TextArea.js +7 -2
- package/src/components/descope-text-field/TextField.js +5 -36
- package/src/components/descope-text-field/textFieldMappings.js +36 -0
- package/src/componentsHelpers/createStyleMixin/helpers.js +1 -1
- package/src/componentsHelpers/inputMixin.js +19 -4
- package/dist/umd/63.js +0 -1
- package/src/theme/components/input.js +0 -106
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{6303:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>u}),n(9789);var i=n(2788),a=n(4599),l=n(2089),d=n(3938),o=n(8237),r=n(3097),s=n(4447);const f=(0,i.iY)("text-field");let c="";const p=(0,i.qC)((0,a.y)({mappings:s.Z}),l.e,d.y,o.A)((0,r.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>c,excludeAttrsSync:["tabindex"],componentName:f}));c=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${p.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${p.cssVarList.height}) var(${p.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${p.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${p.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const u=p;customElements.define(f,u)}}]);
|
package/dist/umd/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,313,599,97,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,313,599,97,938,761],"./descope-combo/index.js":[2798,840,786,208,233,767,422,211,725,513,789,729,313,599,97,938,
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,313,599,97,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,313,599,97,938,761],"./descope-combo/index.js":[2798,840,786,208,233,767,422,211,725,513,789,729,313,599,97,938,447,662,934,247],"./descope-container/index.js":[147,313,599,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,313,97,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,313,599,97,938,447,760],"./descope-logo/index.js":[4641,313,599,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,313,599,97,938,447,142],"./descope-password-field/index.js":[1721,840,786,208,233,767,422,211,725,56,313,599,97,938,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,313,599,97,938,739],"./descope-text-area/index.js":[178,840,786,233,422,101,313,599,97,938,322],"./descope-text-field/index.js":[6303,840,786,208,233,422,725,789,313,599,97,938,447,934]};function n(e){if(!o.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],n=t[0];return Promise.all(t.slice(1).map(o.e)).then((()=>o(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,t,o)=>{const r=o(534);e.exports=r.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(t),e)),{})}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,e=[],i.O=(t,o,r,n)=>{if(!o){var s=1/0;for(p=0;p<e.length;p++){for(var[o,r,n]=e[p],d=!0,c=0;c<o.length;c++)(!1&n||s>=n)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(d=!1,n<s&&(s=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(t=a)}}return t}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[o,r,n]},i.F={},i.E=e=>{Object.keys(i.F).map((t=>{i.F[t](e)}))},i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,o)=>(i.f[o](e,t),t)),[])),i.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",934:"descope-text-field-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},o="DescopeUI:",i.l=(e,r,n,s)=>{if(t[e])t[e].push(r);else{var d,c;if(void 0!==n)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,i.nc&&d.setAttribute("nonce",i.nc),d.setAttribute("data-webpack",o+n),d.src=e),t[e]=[r];var u=(o,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),o)return o(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");o.length&&(e=o[o.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={826:0};i.f.j=(t,o)=>{var r=i.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var n=new Promise(((o,n)=>r=e[t]=[o,n]));o.push(r[2]=n);var s=i.p+i.u(t),d=new Error;i.l(s,(o=>{if(i.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var n=o&&("load"===o.type?"missing":o.type),s=o&&o.target&&o.target.src;d.message="Loading chunk "+t+" failed.\n("+n+": "+s+")",d.name="ChunkLoadError",d.type=n,d.request=s,r[1](d)}}),"chunk-"+t,t)}},i.F.j=t=>{if(!i.o(e,t)||void 0===e[t]){e[t]=null;var o=document.createElement("link");i.nc&&o.setAttribute("nonce",i.nc),o.rel="prefetch",o.as="script",o.href=i.p+i.u(t),document.head.appendChild(o)}},i.O.j=t=>0===e[t];var t=(t,o)=>{var r,n,[s,d,c]=o,a=0;if(s.some((t=>0!==e[t]))){for(r in d)i.o(d,r)&&(i.m[r]=d[r]);if(c)var p=c(i)}for(t&&t(o);a<s.length;a++)n=s[a],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(p)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),i.O(0,[826],(()=>{[840,767,211,513,729,313,599,97,662,786,208,515,938,761,233,422,725,789,447,934,247,317,54,17,437,760,984,806,142,56,320,739,101,322].map(i.E)}),5);var s=i(7507);return i.O(s)})()));
|
package/package.json
CHANGED
@@ -12,6 +12,9 @@ export const componentName = getComponentName('button');
|
|
12
12
|
|
13
13
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
14
14
|
const resetStyles = `
|
15
|
+
:host {
|
16
|
+
display: inline-block;
|
17
|
+
}
|
15
18
|
vaadin-button { margin: 0; }
|
16
19
|
vaadin-button::part(prefix) {
|
17
20
|
margin-left: 0;
|
@@ -46,9 +49,9 @@ const Button = compose(
|
|
46
49
|
borderWidth: {},
|
47
50
|
fontSize: {},
|
48
51
|
height: {},
|
49
|
-
width:
|
52
|
+
width: matchHostStyle(),
|
50
53
|
cursor: {},
|
51
|
-
padding: [
|
54
|
+
padding: [{ selector: selectors.label }],
|
52
55
|
textDecoration: { selector: selectors.label }
|
53
56
|
}
|
54
57
|
}),
|
@@ -5,15 +5,16 @@ import {
|
|
5
5
|
createProxy,
|
6
6
|
inputMixin,
|
7
7
|
compose,
|
8
|
-
componentNameValidationMixin
|
8
|
+
componentNameValidationMixin,
|
9
9
|
} from '../../componentsHelpers';
|
10
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
10
11
|
|
11
12
|
export const componentName = getComponentName('checkbox');
|
12
13
|
|
13
14
|
const Checkbox = compose(
|
14
15
|
createStyleMixin({
|
15
16
|
mappings: {
|
16
|
-
width:
|
17
|
+
width: matchHostStyle(),
|
17
18
|
cursor: [{}, { selector: '> label' }]
|
18
19
|
}
|
19
20
|
}),
|
@@ -24,7 +25,11 @@ const Checkbox = compose(
|
|
24
25
|
createProxy({
|
25
26
|
slots: [],
|
26
27
|
wrappedEleName: 'vaadin-checkbox',
|
27
|
-
style:
|
28
|
+
style: `
|
29
|
+
:host {
|
30
|
+
display: inline-block;
|
31
|
+
}
|
32
|
+
`,
|
28
33
|
excludeAttrsSync: ['tabindex'],
|
29
34
|
componentName
|
30
35
|
})
|
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
10
|
-
import
|
10
|
+
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('email-field');
|
13
13
|
|
@@ -33,6 +33,9 @@ const EmailField = compose(
|
|
33
33
|
);
|
34
34
|
|
35
35
|
overrides = `
|
36
|
+
:host {
|
37
|
+
display: inline-block;
|
38
|
+
}
|
36
39
|
vaadin-email-field {
|
37
40
|
margin: 0;
|
38
41
|
padding: 0;
|
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
10
|
-
import
|
10
|
+
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('number-field');
|
13
13
|
|
@@ -33,6 +33,9 @@ const NumberField = compose(
|
|
33
33
|
);
|
34
34
|
|
35
35
|
overrides = `
|
36
|
+
:host {
|
37
|
+
display: inline-block;
|
38
|
+
}
|
36
39
|
vaadin-number-field {
|
37
40
|
margin: 0;
|
38
41
|
padding: 0;
|
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
10
|
-
import
|
10
|
+
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('password-field');
|
13
13
|
|
@@ -40,6 +40,9 @@ const PasswordField = compose(
|
|
40
40
|
);
|
41
41
|
|
42
42
|
overrides = `
|
43
|
+
:host {
|
44
|
+
display: inline-block;
|
45
|
+
}
|
43
46
|
vaadin-password-field {
|
44
47
|
margin: 0;
|
45
48
|
padding: 0;
|
@@ -5,8 +5,9 @@ import {
|
|
5
5
|
createProxy,
|
6
6
|
inputMixin,
|
7
7
|
compose,
|
8
|
-
componentNameValidationMixin
|
8
|
+
componentNameValidationMixin,
|
9
9
|
} from '../../componentsHelpers';
|
10
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
10
11
|
|
11
12
|
export const componentName = getComponentName('switch-toggle');
|
12
13
|
|
@@ -15,7 +16,7 @@ let overrides = ``;
|
|
15
16
|
const SwitchToggle = compose(
|
16
17
|
createStyleMixin({
|
17
18
|
mappings: {
|
18
|
-
width:
|
19
|
+
width: matchHostStyle(),
|
19
20
|
cursor: [{}, { selector: '> label' }]
|
20
21
|
}
|
21
22
|
}),
|
@@ -33,6 +34,10 @@ const SwitchToggle = compose(
|
|
33
34
|
);
|
34
35
|
|
35
36
|
overrides = `
|
37
|
+
:host {
|
38
|
+
display: inline-block;
|
39
|
+
}
|
40
|
+
|
36
41
|
:host {
|
37
42
|
--margin: 7px;
|
38
43
|
--width: var(${SwitchToggle.cssVarList.width});
|
@@ -5,8 +5,9 @@ import {
|
|
5
5
|
createProxy,
|
6
6
|
inputMixin,
|
7
7
|
compose,
|
8
|
-
componentNameValidationMixin
|
8
|
+
componentNameValidationMixin,
|
9
9
|
} from '../../componentsHelpers';
|
10
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
10
11
|
|
11
12
|
export const componentName = getComponentName('text-area');
|
12
13
|
|
@@ -24,7 +25,7 @@ const TextArea = compose(
|
|
24
25
|
resize: { selector: '> textarea' },
|
25
26
|
color: { selector: selectors.label },
|
26
27
|
cursor: {},
|
27
|
-
width:
|
28
|
+
width: matchHostStyle(),
|
28
29
|
backgroundColor: { selector: selectors.input },
|
29
30
|
borderWidth: { selector: selectors.input },
|
30
31
|
borderStyle: { selector: selectors.input },
|
@@ -48,6 +49,10 @@ const TextArea = compose(
|
|
48
49
|
);
|
49
50
|
|
50
51
|
overrides = `
|
52
|
+
:host {
|
53
|
+
display: inline-block;
|
54
|
+
}
|
55
|
+
|
51
56
|
vaadin-text-area {
|
52
57
|
margin: 0;
|
53
58
|
}
|
@@ -7,47 +7,12 @@ import {
|
|
7
7
|
compose,
|
8
8
|
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
10
|
-
import
|
10
|
+
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
11
11
|
|
12
12
|
export const componentName = getComponentName('text-field');
|
13
13
|
|
14
|
-
const selectors = {
|
15
|
-
label: '::part(label)',
|
16
|
-
input: '::part(input-field)',
|
17
|
-
readOnlyInput: '[readonly]::part(input-field)::after',
|
18
|
-
placeholder: '> input:placeholder-shown'
|
19
|
-
};
|
20
|
-
|
21
14
|
let overrides = ``;
|
22
15
|
|
23
|
-
export const textFieldMappings = {
|
24
|
-
color: { selector: selectors.input },
|
25
|
-
backgroundColor: { selector: selectors.input },
|
26
|
-
width: [matchHostStyle()],
|
27
|
-
color: { selector: selectors.input },
|
28
|
-
borderColor: [
|
29
|
-
{ selector: selectors.input },
|
30
|
-
{ selector: selectors.readOnlyInput }
|
31
|
-
],
|
32
|
-
borderWidth: [
|
33
|
-
{ selector: selectors.input },
|
34
|
-
{ selector: selectors.readOnlyInput }
|
35
|
-
],
|
36
|
-
borderStyle: [
|
37
|
-
{ selector: selectors.input },
|
38
|
-
{ selector: selectors.readOnlyInput }
|
39
|
-
],
|
40
|
-
borderRadius: { selector: selectors.input },
|
41
|
-
boxShadow: { selector: selectors.input },
|
42
|
-
fontSize: {},
|
43
|
-
height: { selector: selectors.input },
|
44
|
-
padding: { selector: selectors.input },
|
45
|
-
outline: { selector: selectors.input },
|
46
|
-
outlineOffset: { selector: selectors.input },
|
47
|
-
|
48
|
-
placeholderColor: { selector: selectors.placeholder, property: 'color' }
|
49
|
-
};
|
50
|
-
|
51
16
|
const TextField = compose(
|
52
17
|
createStyleMixin({
|
53
18
|
mappings: textFieldMappings
|
@@ -66,6 +31,10 @@ const TextField = compose(
|
|
66
31
|
);
|
67
32
|
|
68
33
|
overrides = `
|
34
|
+
:host {
|
35
|
+
display: inline-block;
|
36
|
+
}
|
37
|
+
|
69
38
|
vaadin-text-field {
|
70
39
|
margin: 0;
|
71
40
|
padding: 0;
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
2
|
+
|
3
|
+
const selectors = {
|
4
|
+
label: '::part(label)',
|
5
|
+
input: '::part(input-field)',
|
6
|
+
readOnlyInput: '[readonly]::part(input-field)::after',
|
7
|
+
placeholder: '> input:placeholder-shown'
|
8
|
+
};
|
9
|
+
|
10
|
+
export default {
|
11
|
+
color: { selector: selectors.input },
|
12
|
+
backgroundColor: { selector: selectors.input },
|
13
|
+
color: { selector: selectors.input },
|
14
|
+
width: matchHostStyle({}),
|
15
|
+
borderColor: [
|
16
|
+
{ selector: selectors.input },
|
17
|
+
{ selector: selectors.readOnlyInput }
|
18
|
+
],
|
19
|
+
borderWidth: [
|
20
|
+
{ selector: selectors.input },
|
21
|
+
{ selector: selectors.readOnlyInput }
|
22
|
+
],
|
23
|
+
borderStyle: [
|
24
|
+
{ selector: selectors.input },
|
25
|
+
{ selector: selectors.readOnlyInput }
|
26
|
+
],
|
27
|
+
borderRadius: { selector: selectors.input },
|
28
|
+
boxShadow: { selector: selectors.input },
|
29
|
+
fontSize: {},
|
30
|
+
height: { selector: selectors.input },
|
31
|
+
padding: { selector: selectors.input },
|
32
|
+
outline: { selector: selectors.input },
|
33
|
+
outlineOffset: { selector: selectors.input },
|
34
|
+
|
35
|
+
placeholderColor: { selector: selectors.placeholder, property: 'color' }
|
36
|
+
};
|
@@ -80,7 +80,7 @@ export const createCssVarsList = (componentName, mappings) =>
|
|
80
80
|
|
81
81
|
// match the host selector with the inner element selector
|
82
82
|
// e.g. when we want to set the same size for the host & the inner element this can be useful
|
83
|
-
export const matchHostStyle = (mappingObj) => [
|
83
|
+
export const matchHostStyle = (mappingObj = {}) => [
|
84
84
|
mappingObj,
|
85
85
|
{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
|
86
86
|
];
|
@@ -1,3 +1,15 @@
|
|
1
|
+
const propertyObserver = (src, target, property) => {
|
2
|
+
Object.defineProperty(src, property, {
|
3
|
+
set: function (v) {
|
4
|
+
return target[property] = v
|
5
|
+
},
|
6
|
+
get: function () {
|
7
|
+
return target[property]
|
8
|
+
},
|
9
|
+
configurable: true
|
10
|
+
});
|
11
|
+
}
|
12
|
+
|
1
13
|
export const inputMixin = (superclass) =>
|
2
14
|
class InputMixinClass extends superclass {
|
3
15
|
static get formAssociated() {
|
@@ -17,6 +29,7 @@ export const inputMixin = (superclass) =>
|
|
17
29
|
}
|
18
30
|
|
19
31
|
connectedCallback() {
|
32
|
+
this.baseEle = this.shadowRoot.querySelector(this.baseSelector)
|
20
33
|
super.connectedCallback?.();
|
21
34
|
|
22
35
|
// this is needed in order to make sure the form input validation is working
|
@@ -24,13 +37,15 @@ export const inputMixin = (superclass) =>
|
|
24
37
|
this.setAttribute('tabindex', 0);
|
25
38
|
}
|
26
39
|
|
27
|
-
// vaadin does not expose all those validation attributes so we need to take it from the input
|
28
|
-
// https://github.com/vaadin/web-components/issues/1177
|
29
40
|
const input =
|
30
|
-
this.
|
31
|
-
this.
|
41
|
+
this.baseEle.querySelector('input') ||
|
42
|
+
this.baseEle.querySelector('textarea');
|
32
43
|
if (!input) throw Error('no input was found');
|
33
44
|
|
45
|
+
// sync properties
|
46
|
+
propertyObserver(this, input, 'value')
|
47
|
+
this.setSelectionRange = input.setSelectionRange.bind(input)
|
48
|
+
|
34
49
|
this.checkValidity = () => input.checkValidity();
|
35
50
|
this.reportValidity = () => input.reportValidity();
|
36
51
|
this.validity = input.validity;
|
package/dist/umd/63.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[63],{9063:(t,e,i)=>{i.d(e,{AT:()=>x,ZP:()=>b,fm:()=>c});var n=i(2788),o=i(4599),r=i(2089),l=i(3938),a=i(8237),d=i(3097),s=i(3535);const c=(0,n.iY)("text-field"),f="::part(input-field)",p="[readonly]::part(input-field)::after";let u="";const x={color:{selector:f},backgroundColor:{selector:f},width:[(0,s.zy)()],color:{selector:f},borderColor:[{selector:f},{selector:p}],borderWidth:[{selector:f},{selector:p}],borderStyle:[{selector:f},{selector:p}],borderRadius:{selector:f},boxShadow:{selector:f},fontSize:{},height:{selector:f},padding:{selector:f},outline:{selector:f},outlineOffset:{selector:f},placeholderColor:{selector:"> input:placeholder-shown",property:"color"}},v=(0,n.qC)((0,o.y)({mappings:x}),r.e,l.y,a.A)((0,d.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>u,excludeAttrsSync:["tabindex"],componentName:c}));u=`\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${v.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${v.cssVarList.height}) var(${v.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${v.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${v.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const b=v}}]);
|
@@ -1,106 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
getComponentName,
|
3
|
-
createStyleMixin,
|
4
|
-
draggableMixin,
|
5
|
-
createProxy,
|
6
|
-
inputMixin,
|
7
|
-
compose,
|
8
|
-
componentNameValidationMixin
|
9
|
-
} from '../../componentsHelpers';
|
10
|
-
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
11
|
-
|
12
|
-
export const componentName = getComponentName('text-field');
|
13
|
-
|
14
|
-
const selectors = {
|
15
|
-
label: '::part(label)',
|
16
|
-
input: '::part(input-field)',
|
17
|
-
readOnlyInput: '[readonly]::part(input-field)::after',
|
18
|
-
placeholder: '> input:placeholder-shown'
|
19
|
-
};
|
20
|
-
|
21
|
-
let overrides = ``;
|
22
|
-
|
23
|
-
export const textFieldMappings = {
|
24
|
-
color: { selector: selectors.input },
|
25
|
-
backgroundColor: { selector: selectors.input },
|
26
|
-
width: [matchHostStyle()],
|
27
|
-
color: { selector: selectors.input },
|
28
|
-
borderColor: [
|
29
|
-
{ selector: selectors.input },
|
30
|
-
{ selector: selectors.readOnlyInput }
|
31
|
-
],
|
32
|
-
borderWidth: [
|
33
|
-
{ selector: selectors.input },
|
34
|
-
{ selector: selectors.readOnlyInput }
|
35
|
-
],
|
36
|
-
borderStyle: [
|
37
|
-
{ selector: selectors.input },
|
38
|
-
{ selector: selectors.readOnlyInput }
|
39
|
-
],
|
40
|
-
borderRadius: { selector: selectors.input },
|
41
|
-
boxShadow: { selector: selectors.input },
|
42
|
-
fontSize: {},
|
43
|
-
height: { selector: selectors.input },
|
44
|
-
padding: { selector: selectors.input },
|
45
|
-
outline: { selector: selectors.input },
|
46
|
-
outlineOffset: { selector: selectors.input },
|
47
|
-
|
48
|
-
placeholderColor: { selector: selectors.placeholder, property: 'color' }
|
49
|
-
// borderWidthReadOnly: [borderWidth('[readonly]::part(input-field)::after')]
|
50
|
-
};
|
51
|
-
|
52
|
-
const TextField = compose(
|
53
|
-
createStyleMixin({
|
54
|
-
mappings: textFieldMappings
|
55
|
-
}),
|
56
|
-
draggableMixin,
|
57
|
-
inputMixin,
|
58
|
-
componentNameValidationMixin
|
59
|
-
)(
|
60
|
-
createProxy({
|
61
|
-
slots: ['prefix', 'suffix'],
|
62
|
-
wrappedEleName: 'vaadin-text-field',
|
63
|
-
style: () => overrides,
|
64
|
-
excludeAttrsSync: ['tabindex'],
|
65
|
-
componentName
|
66
|
-
})
|
67
|
-
);
|
68
|
-
|
69
|
-
overrides = `
|
70
|
-
vaadin-text-field {
|
71
|
-
margin: 0;
|
72
|
-
padding: 0;
|
73
|
-
}
|
74
|
-
vaadin-text-field::part(input-field) {
|
75
|
-
overflow: hidden;
|
76
|
-
}
|
77
|
-
vaadin-text-field[readonly] > input:placeholder-shown {
|
78
|
-
opacity: 1;
|
79
|
-
}
|
80
|
-
vaadin-text-field input:-webkit-autofill,
|
81
|
-
vaadin-text-field input:-webkit-autofill::first-line,
|
82
|
-
vaadin-text-field input:-webkit-autofill:hover,
|
83
|
-
vaadin-text-field input:-webkit-autofill:active,
|
84
|
-
vaadin-text-field input:-webkit-autofill:focus {
|
85
|
-
-webkit-text-fill-color: var(${TextField.cssVarList.color});
|
86
|
-
box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
|
87
|
-
}
|
88
|
-
vaadin-text-field > label,
|
89
|
-
vaadin-text-field::part(input-field) {
|
90
|
-
cursor: pointer;
|
91
|
-
color: var(${TextField.cssVarList.color});
|
92
|
-
}
|
93
|
-
vaadin-text-field::part(input-field):focus {
|
94
|
-
cursor: text;
|
95
|
-
}
|
96
|
-
vaadin-text-field[required]::part(required-indicator)::after {
|
97
|
-
font-size: "12px";
|
98
|
-
content: "*";
|
99
|
-
color: var(${TextField.cssVarList.color});
|
100
|
-
}
|
101
|
-
vaadin-text-field[readonly]::part(input-field)::after {
|
102
|
-
border: 0 solid;
|
103
|
-
}
|
104
|
-
`;
|
105
|
-
|
106
|
-
export default TextField;
|