@descope/web-components-ui 1.0.52 → 1.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/index.esm.js +514 -281
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/832.js +1 -0
  4. package/dist/umd/descope-button-index-js.js +1 -1
  5. package/dist/umd/descope-checkbox-index-js.js +1 -1
  6. package/dist/umd/descope-combo-index-js.js +1 -1
  7. package/dist/umd/descope-container-index-js.js +1 -1
  8. package/dist/umd/descope-date-picker-index-js.js +1 -1
  9. package/dist/umd/descope-divider-index-js.js +1 -0
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-logo-index-js.js +1 -1
  12. package/dist/umd/descope-number-field-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  14. package/dist/umd/descope-passcode-index-js.js +1 -1
  15. package/dist/umd/descope-password-field-index-js.js +1 -1
  16. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  17. package/dist/umd/descope-text-area-index-js.js +1 -1
  18. package/dist/umd/descope-text-field-index-js.js +1 -1
  19. package/dist/umd/descope-text-index-js.js +1 -1
  20. package/dist/umd/index.js +1 -1
  21. package/package.json +1 -1
  22. package/src/components/DescopeBaseClass.js +1 -0
  23. package/src/components/descope-button/Button.js +0 -1
  24. package/src/components/descope-combo/index.js +2 -1
  25. package/src/components/descope-container/Container.js +13 -5
  26. package/src/components/descope-divider/Divider.js +85 -0
  27. package/src/components/descope-divider/index.js +6 -0
  28. package/src/components/descope-logo/Logo.js +5 -4
  29. package/src/components/descope-password-field/PasswordField.js +0 -1
  30. package/src/components/descope-text/Text.js +8 -1
  31. package/src/components/descope-text/index.js +0 -1
  32. package/src/componentsHelpers/createProxy/helpers.js +24 -7
  33. package/src/componentsHelpers/createProxy/index.js +6 -3
  34. package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
  35. package/src/index.js +3 -0
  36. package/src/theme/components/divider.js +24 -0
  37. package/src/theme/components/index.js +2 -0
  38. package/src/theme/components/text.js +6 -0
  39. package/dist/umd/433.js +0 -1
@@ -0,0 +1,95 @@
1
+ import { forwardAttrs } from '../componentsHelpers/createProxy/helpers';
2
+
3
+ const getChildObserver = (callback) => {
4
+ return new MutationObserver((mutationsList) => {
5
+ for (const mutation of mutationsList) {
6
+ if (mutation.type === 'childList') {
7
+ callback(mutation);
8
+ }
9
+ }
10
+ });
11
+ };
12
+
13
+ const insertNestingLevel = (srcEle, nestingEle) => {
14
+ nestingEle.append(...srcEle.childNodes);
15
+ srcEle.appendChild(nestingEle);
16
+ };
17
+
18
+ // adds a nesting element to the component, and move all existing children
19
+ // to be under the nesting element
20
+ export const enforceNestingElementsStylesMixin =
21
+ ({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
22
+ (superclass) => {
23
+ const getChildNodeEle = () =>
24
+ Object.assign(document.createElement(nestingElementTagName), {
25
+ slot: nestingElementDestSlotName
26
+ });
27
+
28
+ let childObserver;
29
+
30
+ const getObserver = () => childObserver;
31
+
32
+ return class EnforceNestingElementsStylesMixinClass extends superclass {
33
+ constructor() {
34
+ super();
35
+
36
+ const childObserverCallback = () => {
37
+ // we are going to change the DOM, so we need to disconnect the observer before
38
+ // and reconnect it after the child component is added
39
+ getObserver().disconnect(this.shadowRoot.host);
40
+
41
+ const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
42
+ const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
43
+
44
+ if (!isNestingElementExist && hasNewChildren) {
45
+ // if before there were no children and now there are children - insert
46
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
47
+ } else if (isNestingElementExist && hasNewChildren) {
48
+ // if children existed, and they changed -
49
+ // we need to update (move) the new children into
50
+ // descope-text and remove previous children
51
+ this.shadowRoot.host.querySelector(child).remove();
52
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
53
+ }
54
+ else if (isNestingElementExist && !hasNewChildren) {
55
+ // if children existed and now there are none -
56
+ // we need to remove descope-text completely
57
+ this.shadowRoot.host.querySelector(child).remove();
58
+ }
59
+
60
+ // we need a new observer, because we remove the nesting element
61
+ this.shadowRoot.host.querySelector(nestingElementTagName) &&
62
+ forwardAttrs(
63
+ this.shadowRoot.host,
64
+ this.shadowRoot.host.querySelector(nestingElementTagName),
65
+ forwardAttrOptions
66
+ );
67
+
68
+ getObserver().observe(this.shadowRoot.host, {
69
+ childList: true
70
+ });
71
+ };
72
+
73
+ childObserver = getChildObserver(childObserverCallback);
74
+ }
75
+
76
+ connectedCallback() {
77
+ super.connectedCallback?.();
78
+
79
+ if (this.shadowRoot.host.childNodes.length > 0) {
80
+ // on the first render - we want to move all component's children to be under descope-text
81
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
82
+
83
+ forwardAttrs(
84
+ this.shadowRoot.host,
85
+ this.shadowRoot.host.querySelector(nestingElementTagName),
86
+ forwardAttrOptions
87
+ );
88
+ }
89
+
90
+ getObserver().observe(this.shadowRoot.host, {
91
+ childList: true
92
+ });
93
+ }
94
+ };
95
+ };
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,7 @@ 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';
12
13
  import passcode from './passcode';
13
14
 
14
15
  export default {
@@ -23,5 +24,6 @@ export default {
23
24
  container,
24
25
  logo,
25
26
  text,
27
+ divider,
26
28
  passcode
27
29
  };
@@ -73,6 +73,12 @@ const text = {
73
73
  },
74
74
  _italic: {
75
75
  [vars.fontStyle]: 'italic'
76
+ },
77
+ _uppercase: {
78
+ [vars.textTransform]: 'uppercase'
79
+ },
80
+ _lowercase: {
81
+ [vars.textTransform]: 'lowercase'
76
82
  }
77
83
  };
78
84
 
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:()=>a,wj:()=>r,zy:()=>l});var n=s(6225);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...t)}`:""})`;class i{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 r=(e,t,s)=>{const r=new i;return Object.keys(s).forEach((i=>{const a=((e,t)=>{const s={selector:"",property:(0,n.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(i,s[i]),l=(0,n.Tk)(e,i);a.forEach((({selector:e,property:s})=>{r.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,o(l))}))})),r.toString()},a=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,n.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},9433:(e,t,s)=>{s.d(t,{Ae:()=>m,qC:()=>p,DM:()=>c,yk:()=>i,e4:()=>r,iY:()=>u,y7:()=>d});var n=s(6225),o=s(3535);const i=({mappings:e={},nestedMappings:t={}})=>s=>{const i=Object.keys(e).map((e=>(0,n.E3)("st",e)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...i]}static get cssVarList(){return(0,o.SP)(s.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)}#n(e,t){const o=this.#e.sheet?.cssRules[0].style,i=(0,n.Tk)(s.componentName,e.replace(/^st-/,""));t?o?.setProperty(i,t):o?.removeProperty(i)}#t(){const t=document.createElement("style");t.id="style-mixin-component",t.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,e),this.shadowRoot.prepend(t)}#o(){const e=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,i=s.componentName;if(this.shadowRoot.host.classList.add(i),e.querySelector(`style#${n}`))return;const r=document.createElement("style");r.id=n,r.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${i}`).join("")}`,t),"#document"===e.nodeName?e.head.append(r):e.append(r)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),i.includes(e)&&this.#n(e,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((e=>{i.includes(e.nodeName)&&this.#n(e.nodeName,e.value)})))}}},r=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 }`}#i(e){e?this.shadowRoot.appendChild(this.#e):this.#e.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#i("true"===s)}},a=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const n of e)"attributes"!==n.type||s.includes(n.attributeName)||t(n.attributeName)})).observe(e,{attributes:!0})},l=(e,t)=>(...s)=>{s.forEach((s=>{const n=e.getAttribute(s);null!==n?t.getAttribute(s)!==n&&t.setAttribute(s,n):t.removeAttribute(s)}))},c=({componentName:e,wrappedEleName:t,slots:s=[],style:n,excludeAttrsSync:o=[]})=>{const i=`\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 r extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=t,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){var e,s,n;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{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=(...e)=>this.proxyElement.addEventListener(...e),e=this.proxyElement,s=this.hostElement,n=o,a(e,l(e,s),n),a(s,l(s,e),n))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return r},h=["invalid","has-error-message"],d=e=>class extends e{static get formAssociated(){return!0}#r;constructor(){super(),this.#r=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(){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 e,t;e=this.inputElement,t="value",Object.defineProperty(this,t,{set:function(s){return e[t]=s},get:function(){return e[t]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#r.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=e=>class extends e{#a(){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.#a()}},u=e=>(0,n.E3)("descope",e),p=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>o,GL:()=>n,Tk:()=>i});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>n(e.join("-")),i=(...e)=>`--${o(...e.filter((e=>!!e)))}`}}]);