@descope/web-components-ui 1.0.56 → 1.0.57
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +294 -271
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-divider/Divider.js +7 -0
- package/src/components/descope-link/Link.js +1 -1
- package/src/components/descope-passcode/Passcode.js +64 -59
- package/src/componentsHelpers/createStyleMixin/helpers.js +5 -1
- package/src/componentsHelpers/createStyleMixin/index.js +103 -98
- package/src/theme/components/divider.js +3 -0
- package/src/theme/globals.js +1 -0
package/dist/umd/832.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{8522:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{o:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{8522:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{o:()=>i,t:()=>a});const n=(t,e,{excludeAttrs:s=[],includeAttrs:n=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!n.length||n.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const o of t)"attributes"!==o.type||s.includes(o.attributeName)||n.length&&!n.includes(o.attributeName)||e([o.attributeName])})).observe(t,{attributes:!0})},o=(t,e,s={})=>(...n)=>{n.forEach((n=>{const o=s[n]||n,a=t.getAttribute(n);null!==a?e.getAttribute(o)!==a&&e.setAttribute(o,a):e.removeAttribute(o)}))},a=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},i=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)}},3535:(t,e,s)=>{s.d(e,{SP:()=>r,wj:()=>i,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class a{constructor(){this.styleMap=new Map}add(t,e,s){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,s])=>t+`${e} { \n${s.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const i=(t,e,s)=>{const i=new a;return Object.keys(s).forEach((a=>{const r=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(a,s[a]),l=(0,n.Tk)(t,a);r.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,o(l))}))})),i.toString()},r=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,n.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>n});const n=(t="")=>e=>class extends e{connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector+t).addEventListener("mouseover",(t=>{this.shadowRoot.host.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}))}}},832:(t,e,s)=>{s.d(e,{Ae:()=>m,qC:()=>y,DM:()=>h,yk:()=>a,e4:()=>i,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const a=({mappings:t={},nestedMappings:e={}})=>s=>{const a=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...a]}static get cssVarList(){return(0,o.SP)(s.componentName,{...t,...e})}#t=null;constructor(){super(),this.#e(),this.#s()}#s(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides",this.#t.innerText="* {}",this.shadowRoot.prepend(this.#t)}#n(t,e){const o=this.#t.sheet?.cssRules[0].style,a=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(a,e):o?.removeProperty(a)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#o(){const t=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,a=s.componentName;if(this.shadowRoot.host.classList.add(a),t.querySelector(`style#${n}`))return;const i=document.createElement("style");i.id=n,i.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${a}`).join("")}`,e),"#document"===t.nodeName?t.head.append(i):t.append(i)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),a.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{a.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},i=t=>class extends t{#t=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#a(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#a("true"===s)}};var r=s(8522),l=s(893),c=s(9201);const h=({componentName:t,wrappedEleName:e,slots:s=[],style:n,excludeAttrsSync:o=[]})=>{const a=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class i extends r.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=a,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.addEventListener=(...t)=>this.proxyElement.addEventListener(...t),(0,c.t)(this.proxyElement,this.hostElement,{excludeAttrs:o}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return y((0,l._)())(i)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#i;constructor(){super(),this.#i=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(t){const e=this.getAttribute(t);e&&this.proxyElement.setAttribute("error-message",e),d.forEach((t=>this.proxyElement.setAttribute(t,"true")))}validate(){const{valueMissing:t,patternMismatch:e,typeMismatch:s}=this.validity;t?this.setValidationAttribute("data-errormessage-value-missing"):(s||e)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var t,e;t=this.inputElement,e="value",Object.defineProperty(this,e,{set:function(s){return t[e]=s},get:function(){return t[e]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#i.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=t=>class extends t{#r(){const e=this.shadowRoot.host.tagName.toLowerCase();if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#r()}},p=t=>(0,n.E3)("descope",t),y=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e)},6225:(t,e,s)=>{s.d(e,{E3:()=>o,GL:()=>n,Tk:()=>a});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),a=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[178],{6446:(t,e,n)=>{n.r(e),n.d(e,{Divider:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[178],{6446:(t,e,n)=>{n.r(e),n.d(e,{Divider:()=>m});var o=n(832),s=n(4942),r=n(3535),i=n(8522),l=n(8801);const d=(0,o.iY)("divider");class a extends i.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t\t:host > div::before,\n\t\t\t\t:host > div::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t\t::slotted(*) {\n\t\t\t\t\tflex-grow: 0;\n\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"text\"></slot>\n\t\t\t</div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,before:p,after:h,slotted:f}={root:{selector:""},before:{selector:"::before"},after:{selector:"::after"},slotted:{selector:()=>"::slotted(*)"}},m=(0,o.qC)((0,s.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["mode","variant"],excludeAttrs:[]}}),(0,o.yk)({mappings:{minHeight:c,alignItems:c,alignSelf:c,flexDirection:c,padding:f,width:(0,r.zy)(),height:[p,h],backgroundColor:[p,h],opacity:[p,h],textWidth:{...f,property:"width"}},nestedMappings:{fontStyle:{selector:l.Z.componentName,property:l.Z.cssVarList.fontStyle}}}),o.e4,o.Ae)(a);n(1876),customElements.define(d,m)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{8029:(t,e,o)=>{o.r(e),o.d(e,{Link:()=>m});var n=o(832),s=o(9201),r=o(3535),a=o(4942),c=o(893),l=o(8522),i=o(8801);const d=(0,n.iY)("link");class p extends l.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML='\n\t\t<style>\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t</style>\n\t\t<div>\n\t\t\t<a>\n\t\t\t\t<slot name="text"></slot>\n\t\t\t</a>\n\t\t</div>\n\t\t',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),(0,s.o)(this.shadowRoot.host,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),this.baseSelector=":host > div"}}const{anchor:h}={anchor:{selector:"> a"}},m=(0,n.qC)((0,a.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["variant","italic","uppercase","lowercase"]}}),(0,n.yk)({mappings:{width:(0,r.zy)(),textAlign:{},color:h,cursor:h,borderBottomWidth:h,borderBottomStyle:h,borderBottomColor:h},nestedMappings:{color:{selector
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{8029:(t,e,o)=>{o.r(e),o.d(e,{Link:()=>m});var n=o(832),s=o(9201),r=o(3535),a=o(4942),c=o(893),l=o(8522),i=o(8801);const d=(0,n.iY)("link");class p extends l.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML='\n\t\t<style>\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t</style>\n\t\t<div>\n\t\t\t<a>\n\t\t\t\t<slot name="text"></slot>\n\t\t\t</a>\n\t\t</div>\n\t\t',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),(0,s.o)(this.shadowRoot.host,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),this.baseSelector=":host > div"}}const{anchor:h}={anchor:{selector:"> a"}},m=(0,n.qC)((0,a.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["variant","italic","uppercase","lowercase"]}}),(0,n.yk)({mappings:{width:(0,r.zy)(),textAlign:{},color:h,cursor:h,borderBottomWidth:h,borderBottomStyle:h,borderBottomColor:h},nestedMappings:{color:{selector:i.Z.componentName,property:i.Z.cssVarList.color}}}),(0,c._)(h.selector),n.e4,n.Ae)(p);o(1876),customElements.define(d,m)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(832),a=n(4447),r=n(9063),o=n(7361);const d=(0,i.iY)("passcode"),{borderStyle:s,borderWidth:l,...p}=a.Z,c=(0,i.qC)((0,i.yk)({mappings:{...p},nestedMappings:{borderColor:{selector
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(832),a=n(4447),r=n(9063),o=n(7361);const d=(0,i.iY)("passcode"),{borderStyle:s,borderWidth:l,...p}=a.Z,c=(0,i.qC)((0,i.yk)({mappings:{...p},nestedMappings:{borderColor:{selector:r.Z.componentName,property:r.Z.cssVarList.borderColor}}}),i.e4,i.y7,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n <${o.f} \n bordered="true" \n name="code" \n tabindex="0"\n slot="input"\n required="${this.shadowRoot.host.getAttribute("required")}"\n pattern="${this.shadowRoot.host.getAttribute("pattern")}"\n ></${o.f}>\n `;const e=Object.assign(document.createElement("slot"),{name:"input",slot:"input",part:"input"});this.proxyElement.appendChild(e),this.proxyElement._setFocused=()=>{},this.shadowRoot.host.appendChild(t.content.cloneNode(!0)),this.inputElement=this.querySelector(o.f),this.inputElement.addEventListener("blur",(()=>{this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n :host {\n --vaadin-field-default-width: auto;\n }\n\n ::slotted([slot='input']) {\n -webkit-mask-image: none;\n display: flex;\n gap: 2px;\n align-items: center;\n padding: 0;\n }\n\n vaadin-text-field::part(input-field) {\n background-color: transparent;\n padding: 0;\n }\n\n ${u}\n `,excludeAttrsSync:["tabindex"],componentName:d})),u=`\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\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${c.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(${c.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`,f=c;n(9357),n(4775),customElements.define(d,f)}}]);
|
package/package.json
CHANGED
@@ -8,6 +8,7 @@ import {
|
|
8
8
|
import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
|
9
9
|
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
10
10
|
import { DescopeBaseClass } from '../DescopeBaseClass';
|
11
|
+
import Text from '../descope-text/Text';
|
11
12
|
|
12
13
|
export const componentName = getComponentName('divider');
|
13
14
|
class RawDivider extends DescopeBaseClass {
|
@@ -76,6 +77,12 @@ const Divider = compose(
|
|
76
77
|
backgroundColor: [before, after],
|
77
78
|
opacity: [before, after],
|
78
79
|
textWidth: { ...slotted, property: 'width' }
|
80
|
+
},
|
81
|
+
nestedMappings: {
|
82
|
+
fontStyle: {
|
83
|
+
selector: Text.componentName,
|
84
|
+
property: Text.cssVarList.fontStyle
|
85
|
+
}
|
79
86
|
}
|
80
87
|
}),
|
81
88
|
draggableMixin,
|
@@ -1,34 +1,34 @@
|
|
1
1
|
import {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
2
|
+
getComponentName,
|
3
|
+
createStyleMixin,
|
4
|
+
draggableMixin,
|
5
|
+
createProxy,
|
6
|
+
inputMixin,
|
7
|
+
compose,
|
8
|
+
componentNameValidationMixin
|
9
9
|
} from '../../componentsHelpers';
|
10
10
|
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
11
11
|
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
12
12
|
export const componentName = getComponentName('passcode');
|
13
|
-
import TextField from '../descope-text-field/TextField'
|
14
|
-
import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal'
|
13
|
+
import TextField from '../descope-text-field/TextField';
|
14
|
+
import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
|
15
15
|
|
16
16
|
const customMixin = (superclass) =>
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
class DraggableMixinClass extends superclass {
|
18
|
+
constructor() {
|
19
|
+
super();
|
20
|
+
}
|
21
21
|
|
22
|
-
|
23
|
-
|
24
|
-
|
22
|
+
get digits() {
|
23
|
+
return Number.parseInt(this.getAttribute('digits')) || 6;
|
24
|
+
}
|
25
25
|
|
26
|
-
|
27
|
-
|
28
|
-
|
26
|
+
connectedCallback() {
|
27
|
+
super.connectedCallback?.();
|
28
|
+
const template = document.createElement('template');
|
29
29
|
|
30
|
-
|
31
|
-
|
30
|
+
//forward required & pattern TODO use forwardAttrs
|
31
|
+
template.innerHTML = `
|
32
32
|
<${descopeInternalComponentName}
|
33
33
|
bordered="true"
|
34
34
|
name="code"
|
@@ -37,49 +37,54 @@ const customMixin = (superclass) =>
|
|
37
37
|
required="${this.shadowRoot.host.getAttribute('required')}"
|
38
38
|
pattern="${this.shadowRoot.host.getAttribute('pattern')}"
|
39
39
|
></${descopeInternalComponentName}>
|
40
|
-
|
40
|
+
`;
|
41
41
|
|
42
|
-
|
43
|
-
|
44
|
-
|
42
|
+
// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
|
43
|
+
const slotEle = Object.assign(document.createElement('slot'), {
|
44
|
+
name: 'input',
|
45
|
+
slot: 'input',
|
46
|
+
part: 'input'
|
47
|
+
});
|
48
|
+
this.proxyElement.appendChild(slotEle);
|
45
49
|
|
46
|
-
|
47
|
-
|
48
|
-
|
50
|
+
// we want to control when the element is out of focus
|
51
|
+
// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
|
52
|
+
this.proxyElement._setFocused = () => {};
|
49
53
|
|
50
|
-
|
51
|
-
|
54
|
+
this.shadowRoot.host.appendChild(template.content.cloneNode(true));
|
55
|
+
this.inputElement = this.querySelector(descopeInternalComponentName);
|
52
56
|
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
57
|
+
// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
|
58
|
+
this.inputElement.addEventListener('blur', () => {
|
59
|
+
this.proxyElement.validate();
|
60
|
+
});
|
61
|
+
}
|
62
|
+
};
|
59
63
|
|
60
|
-
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
64
|
+
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
65
|
+
textFieldMappings;
|
61
66
|
|
62
67
|
const Passcode = compose(
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
68
|
+
createStyleMixin({
|
69
|
+
mappings: {
|
70
|
+
...restTextFieldMappings
|
71
|
+
},
|
72
|
+
nestedMappings: {
|
73
|
+
borderColor: {
|
74
|
+
selector: TextField.componentName,
|
75
|
+
property: TextField.cssVarList.borderColor
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}),
|
79
|
+
draggableMixin,
|
80
|
+
inputMixin,
|
81
|
+
componentNameValidationMixin,
|
82
|
+
customMixin
|
78
83
|
)(
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
84
|
+
createProxy({
|
85
|
+
slots: [],
|
86
|
+
wrappedEleName: 'vaadin-text-field',
|
87
|
+
style: () => `
|
83
88
|
:host {
|
84
89
|
--vaadin-field-default-width: auto;
|
85
90
|
}
|
@@ -99,9 +104,9 @@ const Passcode = compose(
|
|
99
104
|
|
100
105
|
${overrides}
|
101
106
|
`,
|
102
|
-
|
103
|
-
|
104
|
-
|
107
|
+
excludeAttrsSync: ['tabindex'],
|
108
|
+
componentName
|
109
|
+
})
|
105
110
|
);
|
106
111
|
|
107
112
|
const overrides = `
|
@@ -9,7 +9,11 @@ const createCssSelector = (
|
|
9
9
|
) =>
|
10
10
|
typeof relativeSelectorOrSelectorFn === 'function'
|
11
11
|
? relativeSelectorOrSelectorFn(baseSelector)
|
12
|
-
: `${baseSelector}${
|
12
|
+
: `${baseSelector}${
|
13
|
+
/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
|
14
|
+
? ` ${relativeSelectorOrSelectorFn}`
|
15
|
+
: relativeSelectorOrSelectorFn
|
16
|
+
}`;
|
13
17
|
|
14
18
|
class StyleBuilder {
|
15
19
|
constructor() {
|
@@ -3,107 +3,112 @@ import { createStyle, createCssVarsList } from './helpers';
|
|
3
3
|
|
4
4
|
export const createStyleMixin =
|
5
5
|
({ mappings = {}, nestedMappings = {} }) =>
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
6
|
+
(superclass) => {
|
7
|
+
const styleAttributes = Object.keys(mappings).map((key) =>
|
8
|
+
kebabCaseJoin('st', key)
|
9
|
+
);
|
10
|
+
return class CustomStyleMixinClass extends superclass {
|
11
|
+
static get observedAttributes() {
|
12
|
+
const superAttrs = superclass.observedAttributes || [];
|
13
|
+
return [...superAttrs, ...styleAttributes];
|
14
|
+
}
|
15
|
+
|
16
|
+
static get cssVarList() {
|
17
|
+
return createCssVarsList(superclass.componentName, {
|
18
|
+
...mappings,
|
19
|
+
...nestedMappings
|
20
|
+
});
|
21
|
+
}
|
22
|
+
|
23
|
+
#styleEle = null;
|
24
|
+
|
25
|
+
constructor() {
|
26
|
+
super();
|
27
|
+
|
28
|
+
this.#createComponentStyle();
|
29
|
+
this.#createAttrOverrideStyle();
|
30
|
+
}
|
31
|
+
|
32
|
+
#createAttrOverrideStyle() {
|
33
|
+
this.#styleEle = document.createElement('style');
|
34
|
+
this.#styleEle.id = 'style-mixin-overrides';
|
35
|
+
|
36
|
+
this.#styleEle.innerText = '* {}';
|
37
|
+
this.shadowRoot.prepend(this.#styleEle);
|
38
|
+
}
|
39
|
+
|
40
|
+
#updateAttrOverrideStyle(attrName, value) {
|
41
|
+
const style = this.#styleEle.sheet?.cssRules[0].style;
|
42
|
+
const varName = getCssVarName(
|
43
|
+
superclass.componentName,
|
44
|
+
attrName.replace(/^st-/, '')
|
45
|
+
);
|
46
|
+
|
47
|
+
if (value) style?.setProperty(varName, value);
|
48
|
+
else style?.removeProperty(varName);
|
49
|
+
}
|
50
|
+
|
51
|
+
#createComponentStyle() {
|
52
|
+
const themeStyle = document.createElement('style');
|
53
|
+
themeStyle.id = 'style-mixin-component';
|
54
|
+
themeStyle.innerHTML = createStyle(
|
55
|
+
superclass.componentName,
|
56
|
+
this.baseSelector,
|
57
|
+
mappings
|
58
|
+
);
|
59
|
+
this.shadowRoot.prepend(themeStyle);
|
60
|
+
}
|
61
|
+
|
62
|
+
#createComponentNestingStyle() {
|
63
|
+
// we need these selectors to be more specific from the theme selectors
|
64
|
+
// in order to do it, we are repeating the class name for specificity
|
65
|
+
const numOfClassNameSpecifier = 3;
|
66
|
+
|
67
|
+
const rootNode = this.shadowRoot.host.getRootNode();
|
68
|
+
const styleId = `${superclass.componentName}-style-mixin-component`;
|
69
|
+
|
70
|
+
const className = superclass.componentName;
|
71
|
+
this.shadowRoot.host.classList.add(className);
|
72
|
+
|
73
|
+
if (rootNode.querySelector(`style#${styleId}`)) return;
|
74
|
+
|
75
|
+
const themeStyle = document.createElement('style');
|
76
|
+
themeStyle.id = styleId;
|
77
|
+
themeStyle.innerHTML = createStyle(
|
78
|
+
superclass.componentName,
|
79
|
+
`${superclass.componentName}${Array(numOfClassNameSpecifier)
|
80
|
+
.fill(`.${className}`)
|
81
|
+
.join('')}`,
|
82
|
+
nestedMappings
|
83
|
+
);
|
84
|
+
|
85
|
+
// rootNode can be either a shadow DOM or a light DOM
|
86
|
+
if (rootNode.nodeName === '#document') {
|
87
|
+
rootNode.head.append(themeStyle);
|
88
|
+
} else {
|
89
|
+
rootNode.append(themeStyle);
|
14
90
|
}
|
91
|
+
}
|
15
92
|
|
16
|
-
|
17
|
-
|
18
|
-
}
|
19
|
-
|
20
|
-
#styleEle = null;
|
21
|
-
|
22
|
-
constructor() {
|
23
|
-
super();
|
24
|
-
|
25
|
-
this.#createComponentStyle();
|
26
|
-
this.#createAttrOverrideStyle();
|
27
|
-
}
|
28
|
-
|
29
|
-
#createAttrOverrideStyle() {
|
30
|
-
this.#styleEle = document.createElement('style');
|
31
|
-
this.#styleEle.id = 'style-mixin-overrides';
|
32
|
-
|
33
|
-
this.#styleEle.innerText = '* {}';
|
34
|
-
this.shadowRoot.prepend(this.#styleEle);
|
35
|
-
}
|
36
|
-
|
37
|
-
#updateAttrOverrideStyle(attrName, value) {
|
38
|
-
const style = this.#styleEle.sheet?.cssRules[0].style;
|
39
|
-
const varName = getCssVarName(
|
40
|
-
superclass.componentName,
|
41
|
-
attrName.replace(/^st-/, '')
|
42
|
-
);
|
93
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
94
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
43
95
|
|
44
|
-
|
45
|
-
|
96
|
+
if (styleAttributes.includes(attrName)) {
|
97
|
+
this.#updateAttrOverrideStyle(attrName, newValue);
|
46
98
|
}
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
#createComponentNestingStyle() {
|
60
|
-
// we need these selectors to be more specific from the theme selectors
|
61
|
-
// in order to do it, we are repeating the class name for specificity
|
62
|
-
const numOfClassNameSpecifier = 3
|
63
|
-
|
64
|
-
const rootNode = this.shadowRoot.host.getRootNode()
|
65
|
-
const styleId = `${superclass.componentName}-style-mixin-component`
|
66
|
-
|
67
|
-
const className = superclass.componentName
|
68
|
-
this.shadowRoot.host.classList.add(className)
|
69
|
-
|
70
|
-
if(rootNode.querySelector(`style#${styleId}`)) return;
|
71
|
-
|
72
|
-
const themeStyle = document.createElement('style');
|
73
|
-
themeStyle.id = styleId;
|
74
|
-
themeStyle.innerHTML = createStyle(
|
75
|
-
superclass.componentName,
|
76
|
-
`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
|
77
|
-
nestedMappings
|
78
|
-
);
|
79
|
-
|
80
|
-
// rootNode can be either a shadow DOM or a light DOM
|
81
|
-
if (rootNode.nodeName === '#document') {
|
82
|
-
rootNode.head.append(themeStyle)
|
83
|
-
} else {
|
84
|
-
rootNode.append(themeStyle)
|
85
|
-
}
|
86
|
-
}
|
87
|
-
|
88
|
-
attributeChangedCallback(attrName, oldValue, newValue) {
|
89
|
-
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
90
|
-
|
91
|
-
if (styleAttributes.includes(attrName)) {
|
92
|
-
this.#updateAttrOverrideStyle(attrName, newValue);
|
93
|
-
}
|
94
|
-
}
|
95
|
-
|
96
|
-
connectedCallback() {
|
97
|
-
super.connectedCallback?.();
|
98
|
-
if (this.shadowRoot.isConnected) {
|
99
|
-
this.#createComponentNestingStyle();
|
100
|
-
|
101
|
-
Array.from(this.attributes).forEach(attr => {
|
102
|
-
if (styleAttributes.includes(attr.nodeName)) {
|
103
|
-
this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
|
104
|
-
}
|
105
|
-
});
|
106
|
-
}
|
99
|
+
}
|
100
|
+
|
101
|
+
connectedCallback() {
|
102
|
+
super.connectedCallback?.();
|
103
|
+
if (this.shadowRoot.isConnected) {
|
104
|
+
this.#createComponentNestingStyle();
|
105
|
+
|
106
|
+
Array.from(this.attributes).forEach((attr) => {
|
107
|
+
if (styleAttributes.includes(attr.nodeName)) {
|
108
|
+
this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
|
109
|
+
}
|
110
|
+
});
|
107
111
|
}
|
108
|
-
}
|
112
|
+
}
|
109
113
|
};
|
114
|
+
};
|