@descope/web-components-ui 1.0.52 → 1.0.53

package/src/componentsHelpers/enforceNestingElementsStylesMixin.js

@@ -0,0 +1,95 @@
+import { forwardAttrs } from '../componentsHelpers/createProxy/helpers';
+
+const getChildObserver = (callback) => {
+	return new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+};
+
+const insertNestingLevel = (srcEle, nestingEle) => {
+	nestingEle.append(...srcEle.childNodes);
+	srcEle.appendChild(nestingEle);
+};
+
+// adds a nesting element to the component, and move all existing children
+// to be under the nesting element
+export const enforceNestingElementsStylesMixin =
+	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
+	(superclass) => {
+		const getChildNodeEle = () =>
+			Object.assign(document.createElement(nestingElementTagName), {
+				slot: nestingElementDestSlotName
+			});
+
+		let childObserver;
+		
+		const getObserver = () => childObserver;
+
+		return class EnforceNestingElementsStylesMixinClass extends superclass {
+			constructor() {
+				super();
+
+				const childObserverCallback = () => {
+					// we are going to change the DOM, so we need to disconnect the observer before
+					// and reconnect it after the child component is added
+					getObserver().disconnect(this.shadowRoot.host);
+
+					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
+					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
+
+					if (!isNestingElementExist && hasNewChildren) {
+						// if before there were no children and now there are children - insert
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					} else if (isNestingElementExist && hasNewChildren) {
+						// if children existed, and they changed -
+						// we need to update (move) the new children into
+						// descope-text and remove previous children
+						this.shadowRoot.host.querySelector(child).remove();
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					}
+					else if (isNestingElementExist && !hasNewChildren) {
+						// if children existed and now there are none -
+						// we need to remove descope-text completely
+						this.shadowRoot.host.querySelector(child).remove();
+					}
+
+					// we need a new observer, because we remove the nesting element
+					this.shadowRoot.host.querySelector(nestingElementTagName) &&
+						forwardAttrs(
+							this.shadowRoot.host,
+							this.shadowRoot.host.querySelector(nestingElementTagName),
+							forwardAttrOptions
+						);
+
+						getObserver().observe(this.shadowRoot.host, {
+						childList: true
+					});
+				};
+
+				childObserver = getChildObserver(childObserverCallback);
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				if (this.shadowRoot.host.childNodes.length > 0) {
+					// on the first render - we want to move all component's children to be under descope-text
+					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+
+					forwardAttrs(
+						this.shadowRoot.host,
+						this.shadowRoot.host.querySelector(nestingElementTagName),
+						forwardAttrOptions
+					);
+				}
+
+				getObserver().observe(this.shadowRoot.host, {
+					childList: true
+				});
+			}
+		};
+	};

package/src/index.js

@@ -8,6 +8,9 @@ import './components/descope-text-area';
 import './components/descope-date-picker';
 import './components/descope-container';
 import './components/descope-text';
+import './components/descope-divider';
+import './components/descope-logo';
+import './components/descope-checkbox';
 
 export {
 	globalsThemeToStyle,

package/src/theme/components/divider.js

@@ -0,0 +1,24 @@
+import Divider from '../../components/descope-divider/Divider';
+
+const vars = Divider.cssVarList;
+
+const divider = {
+	[vars.alignItems]: 'center',
+	[vars.height]: '2px',
+	[vars.backgroundColor]: 'currentColor',
+	[vars.opacity]: '0.2',
+	[vars.padding]: '0 10px',
+	[vars.width]: '100%',
+	[vars.flexDirection]: 'row',
+	[vars.alignSelf]: 'strech',
+	[vars.textWidth]: 'fit-content',
+	_vertical: {
+		[vars.width]: '2px',
+		[vars.padding]: '10px 0',
+		[vars.flexDirection]: 'column',
+		[vars.minHeight]: '200px',
+		[vars.textWidth]: 'max-content'
+	}
+};
+
+export default divider;

package/src/theme/components/index.js

@@ -9,6 +9,7 @@ import switchToggle from './switchToggle';
 import container from './container';
 import logo from './logo';
 import text from './text';
+import divider from './divider';
 import passcode from './passcode';
 
 export default {
@@ -23,5 +24,6 @@ export default {
 	container,
 	logo,
 	text,
+	divider,
 	passcode
 };

package/src/theme/components/text.js

@@ -73,6 +73,12 @@ const text = {
 	},
 	_italic: {
 		[vars.fontStyle]: 'italic'
+	},
+	_uppercase: {
+		[vars.textTransform]: 'uppercase'
+	},
+	_lowercase: {
+		[vars.textTransform]: 'lowercase'
 	}
 };
 

package/dist/umd/433.js

@@ -1 +0,0 @@
-"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)))}`}}]);