@descope/web-components-ui 1.0.45 → 1.0.47
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +235 -137
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/599.js +1 -1
- package/dist/umd/63.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-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -0
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -0
- 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/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-container/Container.js +1 -1
- package/src/components/descope-email-field/EmailField.js +3 -0
- package/src/components/descope-logo/Logo.js +57 -0
- package/src/components/descope-logo/index.js +5 -0
- package/src/components/descope-number-field/NumberField.js +3 -0
- package/src/components/descope-passcode/Passcode.js +252 -0
- package/src/components/descope-passcode/index.js +79 -0
- package/src/components/descope-password-field/PasswordField.js +3 -0
- 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 -1
- package/src/componentsHelpers/createStyleMixin/helpers.js +1 -1
- package/src/componentsHelpers/createStyleMixin/index.js +3 -3
- package/src/componentsHelpers/inputMixin.js +19 -4
- package/src/dev/index.js +2 -7
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/logo.js +9 -0
- package/src/theme/components/input.js +0 -106
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>v}),e(9515);var a=e(2788),i=e(4599),r=e(2089),o=e(3938),c=e(8237),l=e(3097),s=e(3535);const h=(0,a.iY)("switch-toggle");let d="";const b=(0,a.qC)((0,i.y)({mappings:{width:(0,s.zy)(),cursor:[{},{selector:"> label"}]}}),r.e,o.y,c.A)((0,l.D)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>d,excludeAttrsSync:["tabindex"],componentName:h}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t\n\t:host {\n\t\t--margin: 7px;\n\t\t--width: var(${b.cssVarList.width});\n\t\t--height: calc(var(--width) / 2);\n\t\t--radius: var(--height);\n\t\t--knobSize: calc(var(--height) - 5px);\n\t\t--bgColor: #fff;\n\t\t--knobBgColor: #000;\n\t}\n\tvaadin-checkbox>label {\n\t\tcursor: pointer;\n\t\tborder: 1px solid;\n\t\ttext-indent: -99999px;\n\t\tdisplay: block;\n\t\tposition: relative;\t\t\t\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tbackground: var(--bgColor);\n\t\tborder-radius: var(--radius);\n\t}\n\tvaadin-checkbox>label::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttransition: 0.3s;\n\t\ttop: var(--margin);\n\t\tleft: var(--margin);\n\t\twidth: var(--knobSize);\n\t\theight: var(--knobSize);\n\t\tbackground: var(--knobBgColor);\n\t\tborder-radius: var(--knobSize);\n\t}\n\tvaadin-checkbox::part(checkbox) {\n\t\theight: 0;\n\t\twidth: 0;\n\t\tvisibility: hidden;\n\t}\n\tvaadin-checkbox[checked]>label::after {\n\t\ttransform: translateX(-100%);\n\t\tleft: calc(100% - var(--margin));\n\t}\n\tvaadin-checkbox[active]>label::after {\n\t\twidth: calc(var(--knobSize) + 15px);\n\t}\n`;const v=b;customElements.define(h,v)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(e,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,n)=>{n.r(e),n.d(e,{TextArea:()=>b}),n(7101);var r=n(2788),a=n(4599),o=n(2089),s=n(3938),l=n(8237),i=n(3097),c=n(3535);const d=(0,r.iY)("text-area"),p=":not([disabled])::part(input-field)";let u="";const x=(0,r.qC)((0,a.y)({mappings:{resize:{selector:"> textarea"},color:{selector:"::part(label)"},cursor:{},width:(0,c.zy)(),backgroundColor:{selector:p},borderWidth:{selector:p},borderStyle:{selector:p},borderColor:{selector:p},borderRadius:{selector:p},outline:{selector:p},outlineOffset:{selector:p}}}),o.e,s.y,l.A)((0,i.D)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>u,excludeAttrsSync:["tabindex"],componentName:d}));u='\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-area {\n\t\tmargin: 0;\n\t}\n\tvaadin-text-area > label,\n\tvaadin-text-area::part(input-field) {\n\t\tcursor: pointer;\n\t}\n\tvaadin-text-area[focused] input:focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-area::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\t\n';const b=x;customElements.define(d,b)}}]);
|
package/dist/umd/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,
|
1
|
+
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,t,r={534:(e,o,t)=>{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,422,767,725,211,789,513,729,313,599,97,938,63,934,662,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,63,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,63,142],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,313,599,97,938,63,934,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,313,599,97,938,63,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":[9357,840,786,208,233,422,725,789,313,599,97,938,63,934]};function n(e){if(!t.o(r,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=r[e],n=o[0];return Promise.all(o.slice(1).map(t.e)).then((()=>t(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,o,t)=>{const r=t(534);e.exports=r.keys().reduce(((e,o)=>(e[o.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(o),e)),{})}},n={};function s(e){var o=n[e];if(void 0!==o)return o.exports;var t=n[e]={exports:{}};return r[e](t,t.exports,s),t.exports}s.m=r,e=[],s.O=(o,t,r,n)=>{if(!t){var i=1/0;for(p=0;p<e.length;p++){for(var[t,r,n]=e[p],d=!0,c=0;c<t.length;c++)(!1&n||i>=n)&&Object.keys(s.O).every((e=>s.O[e](t[c])))?t.splice(c--,1):(d=!1,n<i&&(i=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(o=a)}}return o}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[t,r,n]},s.F={},s.E=e=>{Object.keys(s.F).map((o=>{s.F[o](e)}))},s.d=(e,o)=>{for(var t in o)s.o(o,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((o,t)=>(s.f[t](e,o),o)),[])),s.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",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},t="DescopeUI:",s.l=(e,r,n,i)=>{if(o[e])o[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")==t+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,s.nc&&d.setAttribute("nonce",s.nc),d.setAttribute("data-webpack",t+n),d.src=e),o[e]=[r];var u=(t,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=o[e];if(delete o[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),t)return t(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)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;s.g.importScripts&&(e=s.g.location+"");var o=s.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var t=o.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),s.p=e})(),(()=>{var e={826:0};s.f.j=(o,t)=>{var r=s.o(e,o)?e[o]:void 0;if(0!==r)if(r)t.push(r[2]);else{var n=new Promise(((t,n)=>r=e[o]=[t,n]));t.push(r[2]=n);var i=s.p+s.u(o),d=new Error;s.l(i,(t=>{if(s.o(e,o)&&(0!==(r=e[o])&&(e[o]=void 0),r)){var n=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;d.message="Loading chunk "+o+" failed.\n("+n+": "+i+")",d.name="ChunkLoadError",d.type=n,d.request=i,r[1](d)}}),"chunk-"+o,o)}},s.F.j=o=>{if(!s.o(e,o)||void 0===e[o]){e[o]=null;var t=document.createElement("link");s.nc&&t.setAttribute("nonce",s.nc),t.rel="prefetch",t.as="script",t.href=s.p+s.u(o),document.head.appendChild(t)}},s.O.j=o=>0===e[o];var o=(o,t)=>{var r,n,[i,d,c]=t,a=0;if(i.some((o=>0!==e[o]))){for(r in d)s.o(d,r)&&(s.m[r]=d[r]);if(c)var p=c(s)}for(o&&o(t);a<i.length;a++)n=i[a],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(p)},t=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})(),s.O(0,[826],(()=>{[840,767,211,513,729,313,599,97,662,786,208,515,938,761,233,422,725,789,63,934,247,317,54,17,437,760,984,806,142,939,56,320,739,101,322].map(s.E)}),5);var i=s(7507);return s.O(i)})()));
|
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
|
})
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import {
|
2
|
+
getComponentName,
|
3
|
+
createStyleMixin,
|
4
|
+
draggableMixin,
|
5
|
+
compose,
|
6
|
+
componentNameValidationMixin
|
7
|
+
} from '../../componentsHelpers';
|
8
|
+
|
9
|
+
export const componentName = getComponentName('logo');
|
10
|
+
|
11
|
+
let style
|
12
|
+
const getStyle = () => style;
|
13
|
+
|
14
|
+
class RawLogo extends HTMLElement {
|
15
|
+
static get componentName() {
|
16
|
+
return componentName;
|
17
|
+
}
|
18
|
+
constructor() {
|
19
|
+
super();
|
20
|
+
const template = document.createElement('template');
|
21
|
+
template.innerHTML = `
|
22
|
+
<style>
|
23
|
+
${getStyle()}
|
24
|
+
</style>
|
25
|
+
<div></div>`;
|
26
|
+
|
27
|
+
this.attachShadow({ mode: 'open' });
|
28
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
29
|
+
|
30
|
+
this.baseSelector = ':host > div';
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
const Logo = compose(
|
35
|
+
createStyleMixin({
|
36
|
+
mappings: {
|
37
|
+
height: {},
|
38
|
+
width: {},
|
39
|
+
url: {},
|
40
|
+
fallbackUrl: {},
|
41
|
+
}
|
42
|
+
}),
|
43
|
+
draggableMixin,
|
44
|
+
componentNameValidationMixin
|
45
|
+
)(RawLogo);
|
46
|
+
|
47
|
+
style = `
|
48
|
+
:host {
|
49
|
+
display: inline-block;
|
50
|
+
}
|
51
|
+
:host > div {
|
52
|
+
display: inline-block;
|
53
|
+
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
54
|
+
}
|
55
|
+
`
|
56
|
+
|
57
|
+
export default Logo;
|
@@ -0,0 +1,252 @@
|
|
1
|
+
import {
|
2
|
+
getComponentName,
|
3
|
+
createStyleMixin,
|
4
|
+
draggableMixin,
|
5
|
+
compose,
|
6
|
+
componentNameValidationMixin
|
7
|
+
} from '../../componentsHelpers';
|
8
|
+
import '../descope-text-field'
|
9
|
+
|
10
|
+
export const componentName = getComponentName('passcode');
|
11
|
+
|
12
|
+
let style
|
13
|
+
const getStyle = () => style;
|
14
|
+
|
15
|
+
class RawPasscode extends HTMLElement {
|
16
|
+
static get observedAttributes() {
|
17
|
+
return [
|
18
|
+
'disabled',
|
19
|
+
'bordered',
|
20
|
+
'size'
|
21
|
+
];
|
22
|
+
}
|
23
|
+
|
24
|
+
static get componentName() {
|
25
|
+
return componentName;
|
26
|
+
}
|
27
|
+
|
28
|
+
static get formAssociated() {
|
29
|
+
return true;
|
30
|
+
}
|
31
|
+
|
32
|
+
#internals
|
33
|
+
|
34
|
+
constructor() {
|
35
|
+
super();
|
36
|
+
const template = document.createElement('template');
|
37
|
+
|
38
|
+
const inputs = [...Array(this.digits).keys()].map((idx) => `
|
39
|
+
<descope-text-field
|
40
|
+
st-width="35px"
|
41
|
+
data-id=${idx}
|
42
|
+
type="tel"
|
43
|
+
autoComplete="none"
|
44
|
+
></descope-text-field>
|
45
|
+
`)
|
46
|
+
|
47
|
+
template.innerHTML = `
|
48
|
+
<style>
|
49
|
+
${getStyle()}
|
50
|
+
</style>
|
51
|
+
<div>
|
52
|
+
${inputs.join('')}
|
53
|
+
</div>
|
54
|
+
`;
|
55
|
+
|
56
|
+
// this.attachShadow({ mode: 'open' });
|
57
|
+
this.appendChild(template.content.cloneNode(true));
|
58
|
+
|
59
|
+
this.baseSelector = ':host > div';
|
60
|
+
|
61
|
+
this.#internals = this.attachInternals();
|
62
|
+
|
63
|
+
this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
|
64
|
+
}
|
65
|
+
|
66
|
+
get digits() {
|
67
|
+
return Number.parseInt(this.getAttribute('digits')) || 6
|
68
|
+
}
|
69
|
+
|
70
|
+
get value() {
|
71
|
+
return this.inputs.map(({ value }) => value).join('')
|
72
|
+
}
|
73
|
+
|
74
|
+
get isRequired() {
|
75
|
+
return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
|
76
|
+
}
|
77
|
+
|
78
|
+
get pattern() {
|
79
|
+
return `^$|^\\d{${this.digits},}$`
|
80
|
+
}
|
81
|
+
|
82
|
+
get valueMissingErrMsg() {
|
83
|
+
return 'Please fill out this field.'
|
84
|
+
}
|
85
|
+
|
86
|
+
get patternMismatchErrMsg() {
|
87
|
+
return `Must be a ${this.digits} digits number.`
|
88
|
+
}
|
89
|
+
|
90
|
+
formAssociatedCallback() {
|
91
|
+
this.setValidity?.();
|
92
|
+
}
|
93
|
+
|
94
|
+
setValidity = () => {
|
95
|
+
if (this.isRequired && !this.value) this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
|
96
|
+
else if (this.pattern && !new RegExp(this.pattern).test(this.value)) this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
|
97
|
+
else this.#internals.setValidity({})
|
98
|
+
};
|
99
|
+
|
100
|
+
async connectedCallback() {
|
101
|
+
// if (this.shadowRoot.isConnected) {
|
102
|
+
this.setValidity();
|
103
|
+
this.initInputs()
|
104
|
+
|
105
|
+
this.onfocus = () => this.inputs[0].focus();
|
106
|
+
// }
|
107
|
+
}
|
108
|
+
|
109
|
+
getInputIdx(inputEle) {
|
110
|
+
return Number.parseInt(inputEle.getAttribute('data-id'), 10)
|
111
|
+
}
|
112
|
+
|
113
|
+
getNextInput(currInput) {
|
114
|
+
const currentIdx = this.getInputIdx(currInput)
|
115
|
+
const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
|
116
|
+
return this.inputs[newIdx]
|
117
|
+
}
|
118
|
+
|
119
|
+
getPrevInput(currInput) {
|
120
|
+
const currentIdx = this.getInputIdx(currInput)
|
121
|
+
const newIdx = Math.max(currentIdx - 1, 0)
|
122
|
+
return this.inputs[newIdx]
|
123
|
+
}
|
124
|
+
|
125
|
+
fillDigits(charArr, currentInput) {
|
126
|
+
for (let i = 0; i < charArr.length; i += 1) {
|
127
|
+
currentInput.value = charArr[i] ?? '';
|
128
|
+
|
129
|
+
const nextInput = this.getNextInput(currentInput);
|
130
|
+
if (nextInput === currentInput) break;
|
131
|
+
currentInput = nextInput;
|
132
|
+
}
|
133
|
+
|
134
|
+
!currentInput.hasAttribute('focused') && focusElement(currentInput);
|
135
|
+
};
|
136
|
+
|
137
|
+
initInputs() {
|
138
|
+
this.inputs.forEach((input) => {
|
139
|
+
|
140
|
+
// in order to simulate blur on the input
|
141
|
+
// we are checking if focus on one of the digits happened immediately after blur on another digit
|
142
|
+
// if not, the component is no longer focused and we should simulate blur
|
143
|
+
input.onblur = () => {
|
144
|
+
const timerId = setTimeout(() => this.dispatchEvent(new Event('blur')));
|
145
|
+
|
146
|
+
this.inputs.forEach((ele) =>
|
147
|
+
ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
|
148
|
+
);
|
149
|
+
};
|
150
|
+
|
151
|
+
input.oninput = () => {
|
152
|
+
const charArr = getSanitizedCharacters(input.value);
|
153
|
+
|
154
|
+
if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
|
155
|
+
else this.fillDigits(charArr, input);
|
156
|
+
|
157
|
+
this.setValidity()
|
158
|
+
};
|
159
|
+
|
160
|
+
input.onkeydown = ({ key }) => {
|
161
|
+
if (key === 'Backspace') {
|
162
|
+
input.value = '';
|
163
|
+
|
164
|
+
// if the user deleted the digit we want to focus the previous digit
|
165
|
+
const prevInput = this.getPrevInput(input)
|
166
|
+
|
167
|
+
!prevInput.hasAttribute('focused') && setTimeout(() => {
|
168
|
+
focusElement(prevInput);
|
169
|
+
});
|
170
|
+
} else if (key.match(/^(\d)$/g)) { // if input is a digit
|
171
|
+
input.value = ''; // we are clearing the previous value so we can override it with the new value
|
172
|
+
}
|
173
|
+
|
174
|
+
this.setValidity()
|
175
|
+
};
|
176
|
+
})
|
177
|
+
}
|
178
|
+
|
179
|
+
attributeChangedCallback(
|
180
|
+
attrName,
|
181
|
+
oldValue,
|
182
|
+
newValue
|
183
|
+
) {
|
184
|
+
if (oldValue !== newValue &&
|
185
|
+
RawPasscode.observedAttributes.includes(attrName)) {
|
186
|
+
this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
|
187
|
+
}
|
188
|
+
}
|
189
|
+
|
190
|
+
}
|
191
|
+
|
192
|
+
const Passcode = compose(
|
193
|
+
// createStyleMixin({
|
194
|
+
// // what do we want to customize?
|
195
|
+
// mappings: {
|
196
|
+
// height: {},
|
197
|
+
// width: {},
|
198
|
+
// }
|
199
|
+
// }),
|
200
|
+
// draggableMixin,
|
201
|
+
// componentNameValidationMixin
|
202
|
+
)(RawPasscode);
|
203
|
+
|
204
|
+
style = `
|
205
|
+
:host {
|
206
|
+
display: inline-block;
|
207
|
+
}
|
208
|
+
|
209
|
+
:host > div {
|
210
|
+
display: flex;
|
211
|
+
gap: 2px;
|
212
|
+
}
|
213
|
+
`
|
214
|
+
|
215
|
+
export default Passcode;
|
216
|
+
|
217
|
+
|
218
|
+
const focusElement = (ele) => {
|
219
|
+
ele?.focus();
|
220
|
+
ele?.setSelectionRange(1, 1);
|
221
|
+
};
|
222
|
+
|
223
|
+
const getSanitizedCharacters = (str) => {
|
224
|
+
const pin = str.replace(/\s/g, ''); // sanitize string
|
225
|
+
|
226
|
+
// accept only numbers
|
227
|
+
if (!pin.match(/^\d+$/)) return [];
|
228
|
+
|
229
|
+
return [...pin]; // creating array of chars
|
230
|
+
};
|
231
|
+
|
232
|
+
|
233
|
+
|
234
|
+
|
235
|
+
/*
|
236
|
+
TODO:
|
237
|
+
|
238
|
+
label
|
239
|
+
error message
|
240
|
+
helper text
|
241
|
+
|
242
|
+
full width
|
243
|
+
data-errormessage-pattern-mismatch
|
244
|
+
data-errormessage-value-missing
|
245
|
+
*/
|
246
|
+
|
247
|
+
/*
|
248
|
+
ISSUES:
|
249
|
+
- There is no option to pass size=1
|
250
|
+
- when using size=md the WC height is not fit to content
|
251
|
+
- when using size=lg there is no cursor and cannot type
|
252
|
+
*/
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import Passcode, { componentName } from './Passcode';
|
2
|
+
|
3
|
+
customElements.define(componentName, Passcode);
|
4
|
+
|
5
|
+
export { Passcode as Logo };
|
6
|
+
|
7
|
+
|
8
|
+
class RawPasscodeW extends HTMLElement {
|
9
|
+
constructor() {
|
10
|
+
super();
|
11
|
+
const template = document.createElement('template');
|
12
|
+
|
13
|
+
template.innerHTML = `
|
14
|
+
<descope-text-field required bordered="true" helper-text="helper" error-message="error" label="label"></descope-text-field>
|
15
|
+
`;
|
16
|
+
|
17
|
+
this.appendChild(template.content.cloneNode(true));
|
18
|
+
|
19
|
+
const vaadin = this.querySelector('descope-text-field').shadowRoot.querySelector('vaadin-text-field')
|
20
|
+
|
21
|
+
// const temp1 = document.createElement('template')
|
22
|
+
// temp1.innerHTML = `
|
23
|
+
// <div slot="input">
|
24
|
+
// <input></input>
|
25
|
+
// <input></input>
|
26
|
+
// <input></input>
|
27
|
+
// <input></input>
|
28
|
+
// <input></input>
|
29
|
+
// </div>
|
30
|
+
// `;
|
31
|
+
|
32
|
+
|
33
|
+
this.wrap = document.createElement('div')
|
34
|
+
this.wrap.slot = 'input'
|
35
|
+
this.wrap.part = 'input-field'
|
36
|
+
this.wrap.style.height = '100%'
|
37
|
+
this.wrap.style.display = 'flex'
|
38
|
+
|
39
|
+
this.clonedNode = document.createElement("input");
|
40
|
+
this.clonedNode.style.width = '20px'
|
41
|
+
this.clonedNode.style.height = '100%'
|
42
|
+
this.clonedNode.style.padding = '0'
|
43
|
+
|
44
|
+
|
45
|
+
this.wrap.appendChild(this.clonedNode.cloneNode(true))
|
46
|
+
this.wrap.appendChild(this.clonedNode.cloneNode(true))
|
47
|
+
this.wrap.appendChild(this.clonedNode.cloneNode(true))
|
48
|
+
|
49
|
+
this.wrap.checkValidity = () => false
|
50
|
+
this.wrap.value = '123'
|
51
|
+
console.log(this.wrap.value)
|
52
|
+
vaadin.appendChild(this.wrap)
|
53
|
+
setTimeout(() => {
|
54
|
+
this.wrap.value = '111'
|
55
|
+
console.log(this.wrap.oninput, this.wrap.onchange)
|
56
|
+
this.wrap.dispatchEvent(new InputEvent('input'))
|
57
|
+
})
|
58
|
+
}
|
59
|
+
|
60
|
+
connectedCallback() {
|
61
|
+
// const styles = window.getComputedStyle(this.querySelector('descope-text-field').shadowRoot.querySelector('vaadin-text-field').shadowRoot.querySelector('[part="input-field"]'));
|
62
|
+
// if (styles.cssText !== '') {
|
63
|
+
// this.clonedNode.style.cssText = styles.cssText;
|
64
|
+
// } else {
|
65
|
+
// const cssText = Object.values(styles).reduce(
|
66
|
+
// (css, propertyName) =>
|
67
|
+
// `${css}${propertyName}:${styles.getPropertyValue(
|
68
|
+
// propertyName
|
69
|
+
// )};`
|
70
|
+
// );
|
71
|
+
|
72
|
+
// this.clonedNode.style.cssText = cssText
|
73
|
+
// }
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
customElements.define('descope-passcode-1', RawPasscodeW);
|
78
|
+
|
79
|
+
// create proxy like text field with custom mixin that adds the code logic
|
@@ -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
|
}
|
@@ -23,7 +23,7 @@ let overrides = ``;
|
|
23
23
|
export const textFieldMappings = {
|
24
24
|
color: { selector: selectors.input },
|
25
25
|
backgroundColor: { selector: selectors.input },
|
26
|
-
width:
|
26
|
+
width: matchHostStyle(),
|
27
27
|
color: { selector: selectors.input },
|
28
28
|
borderColor: [
|
29
29
|
{ selector: selectors.input },
|
@@ -66,6 +66,10 @@ const TextField = compose(
|
|
66
66
|
);
|
67
67
|
|
68
68
|
overrides = `
|
69
|
+
:host {
|
70
|
+
display: inline-block;
|
71
|
+
}
|
72
|
+
|
69
73
|
vaadin-text-field {
|
70
74
|
margin: 0;
|
71
75
|
padding: 0;
|
@@ -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
|
];
|
@@ -35,14 +35,14 @@ export const createStyleMixin =
|
|
35
35
|
}
|
36
36
|
|
37
37
|
#updateAttrOverrideStyle(attrName, value) {
|
38
|
-
const style = this.#styleEle.sheet
|
38
|
+
const style = this.#styleEle.sheet?.cssRules[0].style;
|
39
39
|
const varName = getCssVarName(
|
40
40
|
superclass.componentName,
|
41
41
|
attrName.replace(/^st-/, '')
|
42
42
|
);
|
43
43
|
|
44
|
-
if (value) style
|
45
|
-
else style
|
44
|
+
if (value) style?.setProperty(varName, value);
|
45
|
+
else style?.removeProperty(varName);
|
46
46
|
}
|
47
47
|
|
48
48
|
#createComponentStyle() {
|