@descope/web-components-ui 2.1.17 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.1.17",
+  "version": "2.2.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -50,10 +50,10 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "rollup-replace-plugin": "2.1.17",
-    "test-drivers": "2.1.17",
-    "webpack-extract-font-loader": "2.1.17",
-    "webpack-replace-plugin": "2.1.17"
+    "rollup-replace-plugin": "2.2.0",
+    "test-drivers": "2.2.0",
+    "webpack-extract-font-loader": "2.2.0",
+    "webpack-replace-plugin": "2.2.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,29 +77,29 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.1.17",
-    "@descope-ui/descope-address-field": "2.1.17",
-    "@descope-ui/descope-apps-list": "2.1.17",
-    "@descope-ui/descope-autocomplete-field": "2.1.17",
-    "@descope-ui/descope-avatar": "2.1.17",
-    "@descope-ui/descope-badge": "2.1.17",
-    "@descope-ui/descope-button": "2.1.17",
-    "@descope-ui/descope-collapsible-container": "2.1.17",
-    "@descope-ui/descope-combo-box": "2.1.17",
-    "@descope-ui/descope-enriched-text": "2.1.17",
-    "@descope-ui/descope-icon": "2.1.17",
-    "@descope-ui/descope-image": "2.1.17",
-    "@descope-ui/descope-link": "2.1.17",
-    "@descope-ui/descope-list": "2.1.17",
-    "@descope-ui/descope-list-item": "2.1.17",
-    "@descope-ui/descope-outbound-app-button": "2.1.17",
-    "@descope-ui/descope-outbound-apps": "2.1.17",
-    "@descope-ui/descope-password-strength": "2.1.17",
-    "@descope-ui/descope-recovery-codes": "2.1.17",
-    "@descope-ui/descope-text": "2.1.17",
-    "@descope-ui/descope-timer": "2.1.17",
-    "@descope-ui/descope-timer-button": "2.1.17",
-    "@descope-ui/descope-trusted-devices": "2.1.17"
+    "@descope-ui/common": "2.2.0",
+    "@descope-ui/descope-address-field": "2.2.0",
+    "@descope-ui/descope-apps-list": "2.2.0",
+    "@descope-ui/descope-autocomplete-field": "2.2.0",
+    "@descope-ui/descope-avatar": "2.2.0",
+    "@descope-ui/descope-badge": "2.2.0",
+    "@descope-ui/descope-button": "2.2.0",
+    "@descope-ui/descope-collapsible-container": "2.2.0",
+    "@descope-ui/descope-combo-box": "2.2.0",
+    "@descope-ui/descope-enriched-text": "2.2.0",
+    "@descope-ui/descope-icon": "2.2.0",
+    "@descope-ui/descope-image": "2.2.0",
+    "@descope-ui/descope-link": "2.2.0",
+    "@descope-ui/descope-list": "2.2.0",
+    "@descope-ui/descope-list-item": "2.2.0",
+    "@descope-ui/descope-outbound-app-button": "2.2.0",
+    "@descope-ui/descope-outbound-apps": "2.2.0",
+    "@descope-ui/descope-password-strength": "2.2.0",
+    "@descope-ui/descope-recovery-codes": "2.2.0",
+    "@descope-ui/descope-text": "2.2.0",
+    "@descope-ui/descope-timer": "2.2.0",
+    "@descope-ui/descope-timer-button": "2.2.0",
+    "@descope-ui/descope-trusted-devices": "2.2.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/boolean-fields/commonStyles.js

@@ -1,6 +1,7 @@
+import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
 import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
 
-export default `
+export default (cssVarList) => `
 :host {
 	display: inline-flex;
 }
@@ -47,4 +48,13 @@ descope-boolean-field-internal {
   -webkit-mask-image: none;
   min-height: initial;
 }
+
+descope-enriched-text[empty] {
+	${EnrichedTextClass.cssVarList.hostDisplay}: none;
+}
+
+descope-enriched-text {
+	${EnrichedTextClass.cssVarList.hostDirection}: var(${cssVarList.hostDirection});
+}
+
 `;

package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js

@@ -1,26 +1,34 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
+import {
+  forwardAttrs,
+  observeAttributes,
+  getComponentName,
+  syncAttrs,
+} from '../../../helpers/componentHelpers';
 
 export const componentName = getComponentName('boolean-field-internal');
 
-const forwardAttributes = ['disabled', 'label', 'invalid', 'readonly'];
+const forwardAttributes = ['disabled', 'invalid', 'readonly'];
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass {
   static get observedAttributes() {
-    return ['readonly'];
+    return ['readonly', 'label'];
   }
 
   constructor() {
     super();
     this.innerHTML = `
 			<div class="wrapper">
-				<vaadin-checkbox></vaadin-checkbox>
+				<vaadin-checkbox>
+					<descope-enriched-text class="label-content" slot="label"></descope-enriched-text>
+				</vaadin-checkbox>
 			</div>
 		`;
     this.wrapperEle = this.querySelector('div');
     this.checkbox = this.querySelector('vaadin-checkbox');
+    this.labelContent = this.querySelector('.label-content');
   }
 
   get value() {
@@ -50,6 +58,13 @@ class BooleanInputInternal extends BaseInputClass {
     forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes });
     syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
 
+    // Handle label click to toggle checkbox
+    this.labelContent.addEventListener('click', (e) => {
+      if (!this.hasAttribute('disabled') && !this.hasAttribute('readonly')) {
+        this.checkbox.click();
+      }
+    });
+
     // we need it in order to set the focus ring and trigger validation on descope-checkbox
     this.handleFocusEventsDispatching([this.checkbox]);
   }
@@ -60,6 +75,19 @@ class BooleanInputInternal extends BaseInputClass {
     if (attrName === 'readonly') {
       this.onReadOnlyChange(newValue !== null);
     }
+
+    if (attrName === 'label') {
+      this.onLabelChange();
+    }
+  }
+
+  onLabelChange() {
+    const labelValue = this.getAttribute('label');
+    if (labelValue) {
+      this.labelContent.textContent = labelValue;
+    } else {
+      this.labelContent.textContent = '';
+    }
   }
 
   onReadOnlyChange(val) {

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -1,3 +1,4 @@
+import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
 import { getComponentName } from '../../../helpers/componentHelpers';
 import { compose } from '../../../helpers';
 import {
@@ -24,7 +25,9 @@ const {
   errorMessage,
 } = {
   host: { selector: () => ':host' },
-  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  requiredIndicator: {
+    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+  },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -70,6 +73,16 @@ export const CheckboxClass = compose(
       inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
       inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
+      inputContainerPadding: { ...component, property: 'padding' },
+      inputContainerBorderRadius: { ...component, property: 'border-radius' },
+      inputContainerBorderWidth: { ...component, property: 'border-width' },
+      inputContainerBorderColor: { ...component, property: 'border-color' },
+      inputContainerBorderStyle: { ...component, property: 'border-style' },
+      inputContainerOutlineWidth: { ...component, property: 'outline-width' },
+      inputContainerOutlineOffset: { ...component, property: 'outline-offset' },
+      inputContainerOutlineColor: { ...component, property: 'outline-color' },
+      inputContainerOutlineStyle: { ...component, property: 'outline-style' },
+
       inputSize: [
         { ...checkboxElement, property: 'width' },
         { ...checkboxElement, property: 'height' },
@@ -87,7 +100,7 @@ export const CheckboxClass = compose(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(CheckboxClass.cssVarList)}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
 
       :host {

package/src/components/boolean-fields/descope-checkbox/index.js

@@ -1,6 +1,7 @@
 import { componentName, CheckboxClass } from './CheckboxClass';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
+import '@descope-ui/descope-enriched-text';
 import '../descope-boolean-field-internal';
 
 customElements.define(componentName, CheckboxClass);

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -1,3 +1,4 @@
+import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
 import { getComponentName } from '../../../helpers/componentHelpers';
 import { compose } from '../../../helpers';
 import {
@@ -24,7 +25,9 @@ const {
   errorMessage,
 } = {
   host: { selector: () => ':host' },
-  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  requiredIndicator: {
+    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+  },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -97,7 +100,7 @@ export const SwitchToggleClass = compose(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(SwitchToggleClass.cssVarList)}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 
       :host {

package/src/components/boolean-fields/descope-switch-toggle/index.js

@@ -1,6 +1,7 @@
 import { componentName, SwitchToggleClass } from './SwitchToggleClass';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
+import '@descope-ui/descope-enriched-text';
 import '../descope-boolean-field-internal';
 
 customElements.define(componentName, SwitchToggleClass);

package/src/mixins/createStyleMixin/helpers.js

@@ -1,7 +1,17 @@
 import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../helpers';
 import { getCssVarName } from '../../helpers/componentHelpers';
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+const createCssVar = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
@@ -50,6 +60,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(o
 
 export const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -69,7 +80,7 @@ export const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -96,6 +107,8 @@ export const createCssVarsList = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName(varName) },
       getFallbackVarsNames(attr, varName, mappings[attr])
     );
   }, {});