@descope/web-components-ui 1.0.93 → 1.0.95

package/dist/umd/descope-passcode-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:m,focusedValidDigitField:b}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},y=d.Z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{...u,borderColor:{...g,property:y.borderColor},outlineColor:{...g,property:y.outlineColor},outlineWidth:[{...g,property:y.outlineWidth},{...m,property:"padding"}],color:[u.color,h,f],padding:{...g,property:y.padding},margin:{...g,property:y.margin},textAlign:{...g,property:y.textAlign},caretColor:{...g,property:y.caretColor},digitsGap:{...m,property:"gap"},focusedValidDigitFieldBorderColor:{...b,property:y.borderColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,l.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      --vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-block;\n    }\n\n    descope-passcode-internal {\n\t\t-webkit-mask-image: none;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: initial;\n    }\n\n\tdescope-passcode-internal .wrapper {\n\t\tbox-sizing: border-box;\n\t\tmin-height: initial;\n\t\theight: 100%;\n\t\tjustify-content: center;\n    }\n\n\tdescope-passcode-internal descope-text-field {\n\t\twidth: var(${y.height})\t\t\t\n\t}\n\n    vaadin-text-field::part(input-field) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t-webkit-mask-image: none;\n    }\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: initial;\n\t}\n\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n    `,excludeAttrsSync:["tabindex"],componentName:p}));n(9357),n(4775),customElements.define(p,x)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:m,focusedValidDigitField:b}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},y=d.Z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{...u,borderColor:{...g,property:y.borderColor},outlineColor:{...g,property:y.outlineColor},outlineWidth:[{...g,property:y.outlineWidth},{...m,property:"padding"}],color:[u.color,h,f],padding:{...g,property:y.padding},margin:{...g,property:y.margin},textAlign:{...g,property:y.textAlign},caretColor:{...g,property:y.caretColor},digitsGap:{...m,property:"gap"},focusedValidDigitFieldBorderColor:{...b,property:y.borderColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,l.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      --vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-block;\n    }\n\n    descope-passcode-internal {\n\t\t-webkit-mask-image: none;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: initial;\n    }\n\n\tdescope-passcode-internal .wrapper {\n\t\tbox-sizing: border-box;\n\t\tmin-height: initial;\n\t\theight: 100%;\n\t\tjustify-content: center;\n    }\n\n\tdescope-passcode-internal descope-text-field {\n\t\twidth: var(${y.height})\t\t\t\n\t}\n\n    vaadin-text-field::part(input-field) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t-webkit-mask-image: none;\n    }\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: 0;\n\t}\n\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n    `,excludeAttrsSync:["tabindex"],componentName:p}));n(9357),n(4775),customElements.define(p,x)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.93",
+	"version": "1.0.95",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-passcode/Passcode.js

@@ -125,7 +125,7 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field::before {
-		height: initial;
+		height: 0;
 	}
 
 	vaadin-text-field[readonly] > input:placeholder-shown {

package/src/helpers/index.js

@@ -13,4 +13,14 @@ export const compose = (...fns) =>
 
 export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 
-export const isFunction = (maybeFunc) => typeof maybeFunc === 'function'
+export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
+export const isUrl = (maybeUrl) => {
+	try {
+		new URL(maybeUrl)
+
+		return true;
+	} catch (e) {
+		return false;
+	}
+}

package/src/helpers/themeHelpers/index.js

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';
-import { kebabCase } from '..';
+import { isUrl, kebabCase } from '..';
 import { getComponentName, getCssVarName } from '../componentHelpers';
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
@@ -19,9 +19,20 @@ const transformTheme = (theme, path, getTransformation) => {
 const stringifyArray = (strArr) =>
 	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
+const getCssVarValue = (val) => {
+	switch (true) {
+		case Array.isArray(val):
+			return stringifyArray(val)
+		case isUrl(val):
+			return `url(${val})`
+		default:
+			return val
+	}
+}
+
 export const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
+		[getVarName(path)]: getCssVarValue(val)
 	}));
 
 export const getThemeRefs = (theme, prefix) =>

package/src/theme/components/textField.js

@@ -43,7 +43,7 @@ export const textField = (vars) => ({
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs.radius.sm,
+	[vars.borderRadius]: globalRefs.radius.xs,
 
 	_disabled: {
 		[vars.color]: globalRefs.colors.surface.dark,

package/src/theme/globals.js

@@ -14,44 +14,82 @@ export const colors = genColors({
 });
 
 const fonts = {
-	font1: ['Roboto', 'sans-serif'],
-	font2: ['Oswald', 'serif']
+	font1: {
+		family: [
+			"Roboto",
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Roboto",
+		url: "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
+	},
+	font2: {
+		family: [
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Roboto",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Sans Serif"
+	}
 };
+
 const fontsRef = getThemeRefs({ fonts }).fonts;
 
 const typography = {
 	h1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '600',
 		size: '28px'
 	},
 	subtitle1: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '500',
 		size: '22px'
 	},
 	subtitle2: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '400',
 		size: '20px'
 	},
 	body1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '300',
 		size: '16px'
 	},
 	body2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '200',
 		size: '14px'
 	}