@descope/web-components-ui 1.0.51 → 1.0.53
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +774 -377
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -0
- 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-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -0
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -0
- 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/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/DescopeBaseClass.js +1 -0
- package/src/components/descope-button/Button.js +0 -1
- package/src/components/descope-combo/index.js +2 -1
- package/src/components/descope-container/Container.js +14 -6
- package/src/components/descope-divider/Divider.js +85 -0
- package/src/components/descope-divider/index.js +6 -0
- package/src/components/descope-logo/Logo.js +5 -4
- package/src/components/descope-passcode/Passcode.js +141 -0
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +213 -0
- package/src/components/descope-passcode/descope-passcode-internal/helpers.js +14 -0
- package/src/components/descope-passcode/descope-passcode-internal/index.js +3 -0
- package/src/components/descope-passcode/index.js +5 -0
- package/src/components/descope-password-field/PasswordField.js +0 -1
- package/src/components/descope-text/Text.js +8 -1
- package/src/components/descope-text/index.js +0 -1
- package/src/componentsHelpers/createProxy/helpers.js +24 -7
- package/src/componentsHelpers/createProxy/index.js +8 -6
- package/src/componentsHelpers/createStyleMixin/index.js +103 -72
- package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
- package/src/componentsHelpers/inputMixin.js +13 -13
- package/src/index.js +3 -0
- package/src/theme/components/divider.js +24 -0
- package/src/theme/components/index.js +5 -1
- package/src/theme/components/passcode.js +8 -0
- package/src/theme/components/text.js +6 -0
- package/dist/umd/433.js +0 -1
@@ -54,40 +54,40 @@ export const inputMixin = (superclass) =>
|
|
54
54
|
}
|
55
55
|
|
56
56
|
connectedCallback() {
|
57
|
-
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
58
57
|
super.connectedCallback?.();
|
59
58
|
|
59
|
+
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
60
|
+
|
60
61
|
// this is needed in order to make sure the form input validation is working
|
61
62
|
if (!this.hasAttribute('tabindex')) {
|
62
63
|
this.setAttribute('tabindex', 0);
|
63
64
|
}
|
64
65
|
|
65
|
-
|
66
|
-
this.baseEle.querySelector('
|
67
|
-
|
68
|
-
if (!input) throw Error('no input was found');
|
66
|
+
this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
|
67
|
+
this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0]
|
68
|
+
if (!this.inputElement) throw Error('no input was found');
|
69
69
|
|
70
70
|
// sync properties
|
71
|
-
propertyObserver(this,
|
72
|
-
this.setSelectionRange =
|
71
|
+
propertyObserver(this, this.inputElement, 'value');
|
72
|
+
this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
|
73
73
|
|
74
|
-
this.validity =
|
74
|
+
this.validity = this.inputElement.validity;
|
75
75
|
|
76
76
|
this.setValidity = () => {
|
77
|
-
this.#internals.setValidity(
|
77
|
+
this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
|
78
78
|
};
|
79
79
|
|
80
|
-
|
81
|
-
this.value =
|
80
|
+
this.inputElement.oninput = () => {
|
81
|
+
this.value = this.inputElement.value;
|
82
82
|
this.setValidity();
|
83
83
|
};
|
84
84
|
|
85
85
|
this.onfocus = () => {
|
86
|
-
setTimeout(() =>
|
86
|
+
setTimeout(() => this.inputElement.reportValidity(), 0);
|
87
87
|
this.validate();
|
88
88
|
};
|
89
89
|
|
90
|
-
|
90
|
+
this.inputElement.oninvalid = () => {
|
91
91
|
this.validate();
|
92
92
|
};
|
93
93
|
}
|
package/src/index.js
CHANGED
@@ -8,6 +8,9 @@ import './components/descope-text-area';
|
|
8
8
|
import './components/descope-date-picker';
|
9
9
|
import './components/descope-container';
|
10
10
|
import './components/descope-text';
|
11
|
+
import './components/descope-divider';
|
12
|
+
import './components/descope-logo';
|
13
|
+
import './components/descope-checkbox';
|
11
14
|
|
12
15
|
export {
|
13
16
|
globalsThemeToStyle,
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import Divider from '../../components/descope-divider/Divider';
|
2
|
+
|
3
|
+
const vars = Divider.cssVarList;
|
4
|
+
|
5
|
+
const divider = {
|
6
|
+
[vars.alignItems]: 'center',
|
7
|
+
[vars.height]: '2px',
|
8
|
+
[vars.backgroundColor]: 'currentColor',
|
9
|
+
[vars.opacity]: '0.2',
|
10
|
+
[vars.padding]: '0 10px',
|
11
|
+
[vars.width]: '100%',
|
12
|
+
[vars.flexDirection]: 'row',
|
13
|
+
[vars.alignSelf]: 'strech',
|
14
|
+
[vars.textWidth]: 'fit-content',
|
15
|
+
_vertical: {
|
16
|
+
[vars.width]: '2px',
|
17
|
+
[vars.padding]: '10px 0',
|
18
|
+
[vars.flexDirection]: 'column',
|
19
|
+
[vars.minHeight]: '200px',
|
20
|
+
[vars.textWidth]: 'max-content'
|
21
|
+
}
|
22
|
+
};
|
23
|
+
|
24
|
+
export default divider;
|
@@ -9,6 +9,8 @@ import switchToggle from './switchToggle';
|
|
9
9
|
import container from './container';
|
10
10
|
import logo from './logo';
|
11
11
|
import text from './text';
|
12
|
+
import divider from './divider';
|
13
|
+
import passcode from './passcode';
|
12
14
|
|
13
15
|
export default {
|
14
16
|
button,
|
@@ -21,5 +23,7 @@ export default {
|
|
21
23
|
switchToggle,
|
22
24
|
container,
|
23
25
|
logo,
|
24
|
-
text
|
26
|
+
text,
|
27
|
+
divider,
|
28
|
+
passcode
|
25
29
|
};
|
package/dist/umd/433.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[433],{3535:(e,t,s)=>{s.d(t,{SP:()=>i,wj:()=>n,zy:()=>l});var r=s(6225);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...t)}`:""})`;class a{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const n=(e,t,s)=>{const n=new a;return Object.keys(s).forEach((a=>{const i=((e,t)=>{const s={selector:"",property:(0,r.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(a,s[a]),l=(0,r.Tk)(e,a);i.forEach((({selector:e,property:s})=>{n.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,o(l))}))})),n.toString()},i=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,r.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},9433:(e,t,s)=>{s.d(t,{Ae:()=>u,qC:()=>p,DM:()=>c,yk:()=>a,e4:()=>n,iY:()=>m,y7:()=>d});var r=s(6225),o=s(3535);const a=({mappings:e={}})=>t=>{const s=Object.keys(e).map((e=>(0,r.E3)("st",e)));return class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...s]}static get cssVarList(){return(0,o.SP)(t.componentName,e)}#e=null;constructor(){super(),this.#t(),this.#s()}#s(){this.#e=document.createElement("style"),this.#e.id="style-mixin-overrides",this.#e.innerText="* {}",this.shadowRoot.prepend(this.#e)}#r(e,s){const o=this.#e.sheet.cssRules[0].style,a=(0,r.Tk)(t.componentName,e.replace(/^st-/,""));s?o.setProperty(a,s):o.removeProperty(a)}#t(){const s=document.createElement("style");s.id="style-mixin-component",s.innerHTML=(0,o.wj)(t.componentName,this.baseSelector,e),this.shadowRoot.prepend(s)}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),s.includes(e)&&this.#r(e,r)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&Array.from(this.attributes).forEach((e=>{s.includes(e.nodeName)&&this.#r(e.nodeName,e.value)}))}}},n=e=>class extends e{#e=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#e=document.createElement("style"),this.#e.innerText=`${this.baseSelector} { cursor: inherit }`}#o(e){e?this.shadowRoot.appendChild(this.#e):this.#e.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#o("true"===s)}},i=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const r of e)"attributes"!==r.type||s.includes(r.attributeName)||t(r.attributeName)})).observe(e,{attributes:!0})},l=(e,t)=>(...s)=>{s.forEach((s=>{const r=e.getAttribute(s);null!==r?t.getAttribute(s)!==r&&t.setAttribute(s,r):t.removeAttribute(s)}))},c=({componentName:e,wrappedEleName:t,slots:s=[],style:r,excludeAttrsSync:o=[]})=>{const a=`\n\t\t<style id="create-proxy"></style>\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class n extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=a,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=t,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof r?r():r}connectedCallback(){var e,s,r;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.onfocus=e=>{this.proxyElement.focus()},this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=this.proxyElement.addEventListener,e=this.proxyElement,s=this.hostElement,r=o,i(e,l(e,s),r),i(s,l(s,e),r))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return n},h=["invalid","has-error-message"],d=e=>class extends e{static get formAssociated(){return!0}#a;constructor(){super(),this.#a=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(e){const t=this.getAttribute(e);t&&this.proxyElement.setAttribute("error-message",t),h.forEach((e=>this.proxyElement.setAttribute(e,"true")))}validate(){const{valueMissing:e,patternMismatch:t,typeMismatch:s}=this.validity;e?this.setValidationAttribute("data-errormessage-value-missing"):(s||t)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){this.baseEle=this.shadowRoot.querySelector(this.baseSelector),super.connectedCallback?.(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0);const e=this.baseEle.querySelector("input")||this.baseEle.querySelector("textarea");if(!e)throw Error("no input was found");var t,s;t=e,s="value",Object.defineProperty(this,s,{set:function(e){return t[s]=e},get:function(){return t[s]},configurable:!0}),this.setSelectionRange=e.setSelectionRange.bind(e),this.validity=e.validity,this.setValidity=()=>{this.#a.setValidity(e.validity,e.validationMessage)},e.oninput=()=>{this.value=e.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>e.reportValidity()),0),this.validate()},e.oninvalid=()=>{this.validate()}}},u=e=>class extends e{#n(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#n()}},m=e=>(0,r.E3)("descope",e),p=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>o,GL:()=>r,Tk:()=>a});const r=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>r(e.join("-")),a=(...e)=>`--${o(...e.filter((e=>!!e)))}`}}]);
|