@descope/web-components-ui 1.0.136 → 1.0.150

package/package.json

@@ -1,58 +1,78 @@
 {
-	"name": "@descope/web-components-ui",
-	"version": "1.0.136",
-	"description": "",
-	"main": "dist/cjs/index.cjs.js",
-	"module": "dist/index.esm.js",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"require": "./dist/cjs/index.cjs.js",
-			"import": "./dist/index.esm.js"
-		},
-		"./package.json": {
-			"require": "./package.json"
-		}
-	},
-	"scripts": {
-		"test": "jest",
-		"lint": "echo \"Error: no lint specified\" && exit 0",
-		"build:umd": "webpack -c webpack.prod.js",
-		"build:lib": "rollup -c",
-		"build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
-		"start": "webpack serve -c webpack.dev.js --port=8888",
-		"format": "prettier . -w --ignore-path .gitignore"
-	},
-	"files": [
-		"dist",
-		"src"
-	],
-	"license": "UNLICENSED",
-	"devDependencies": {
-		"@babel/preset-env": "^7.22.2",
-		"@rollup/plugin-node-resolve": "^15.0.2",
-		"html-webpack-plugin": "^5.5.1",
-		"jest": "^29.5.0",
-		"jest-environment-jsdom": "^29.5.0",
-		"prettier": "^2.8.8",
-		"rollup": "^3.21.4",
-		"webpack": "^5.79.0",
-		"webpack-cli": "^5.0.1",
-		"webpack-dev-server": "^4.13.3"
-	},
-	"dependencies": {
-		"@vaadin/button": "24.0.4",
-		"@vaadin/checkbox": "24.0.4",
-		"@vaadin/combo-box": "24.0.4",
-		"@vaadin/date-picker": "24.0.4",
-		"@vaadin/email-field": "24.0.4",
-		"@vaadin/number-field": "24.0.4",
-		"@vaadin/password-field": "24.0.4",
-		"@vaadin/text-area": "24.0.4",
-		"@vaadin/text-field": "24.0.4",
-		"color": "^4.2.3",
-		"lodash.merge": "4.6.2",
-		"lodash.set": "4.3.2",
-		"rollup-plugin-import-css": "^3.2.1"
-	}
+  "name": "@descope/web-components-ui",
+  "version": "1.0.150",
+  "description": "",
+  "main": "dist/cjs/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.cjs.js",
+      "import": "./dist/index.esm.js"
+    },
+    "./package.json": {
+      "require": "./package.json"
+    }
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint --fix --max-warnings 0",
+    "lint:all": "npm run lint .",
+    "build:umd": "webpack -c webpack.prod.js",
+    "build:lib": "rollup -c",
+    "build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
+    "start": "webpack serve -c webpack.dev.js --port=8888",
+    "format": "prettier -w --ignore-path .gitignore",
+    "format:all": "npm run format .",
+    "format-lint": "lint-staged",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx}": [
+      "npm run lint",
+      "npm run format"
+    ]
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "eslint": "^8.48.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "^3.0.2",
+    "rollup": "^3.21.4",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.3"
+  },
+  "dependencies": {
+    "@vaadin/button": "24.0.4",
+    "@vaadin/checkbox": "24.0.4",
+    "@vaadin/combo-box": "24.0.4",
+    "@vaadin/date-picker": "24.0.4",
+    "@vaadin/email-field": "24.0.4",
+    "@vaadin/number-field": "24.0.4",
+    "@vaadin/password-field": "24.0.4",
+    "@vaadin/text-area": "24.0.4",
+    "@vaadin/text-field": "24.0.4",
+    "color": "^4.2.3",
+    "lint-staged": "^14.0.1",
+    "lodash.merge": "4.6.2",
+    "lodash.set": "4.3.2",
+    "rollup-plugin-import-css": "^3.2.1"
+  },
+  "vaadin": {
+    "disableUsageStatistics": true
+  }
 }

package/src/baseClasses/createBaseClass.js

@@ -1,7 +1,7 @@
-import { compose } from "../helpers";
-import { componentNameValidationMixin } from "../mixins/componentNameValidationMixin";
-import {  hoverableMixin } from "../mixins/hoverableMixin";
-import { normalizeBooleanAttributesMixin } from "../mixins/normalizeBooleanAttributesMixin";
+import { compose } from '../helpers';
+import { componentNameValidationMixin } from '../mixins/componentNameValidationMixin';
+import { hoverableMixin } from '../mixins/hoverableMixin';
+import { normalizeBooleanAttributesMixin } from '../mixins/normalizeBooleanAttributesMixin';
 
 export const createBaseClass = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
@@ -15,26 +15,28 @@ export const createBaseClass = ({ componentName, baseSelector = '' }) => {
 
     // base selector is the selector for the component wrapper,
     // it's the highest element that is relevant for the layout
+    // eslint-disable-next-line class-methods-use-this
     get baseSelector() {
-      return baseSelector
+      return baseSelector;
     }
 
     // this is the base element, which returned by querying the base selector
     get baseElement() {
-      this.#baseElement ??= this.baseSelector ?
-        this.rootElement.querySelector(this.baseSelector) :
-        this;
+      this.#baseElement ??= this.baseSelector
+        ? this.rootElement.querySelector(this.baseSelector)
+        : this;
 
-      if(!this.#baseElement) {
-        console.warn('missing base element for component', this.localName)
+      if (!this.#baseElement) {
+        // eslint-disable-next-line no-console
+        console.warn('missing base element for component', this.localName);
       }
-      return this.#baseElement
+      return this.#baseElement;
     }
 
-    // this is the component root level element, 
+    // this is the component root level element,
     // it can be either a shadow root or the component's node from the light DOM
     get rootElement() {
-      return this.shadowRoot || this
+      return this.shadowRoot || this;
     }
 
     connectedCallback() {
@@ -43,7 +45,7 @@ export const createBaseClass = ({ componentName, baseSelector = '' }) => {
       if (this.rootElement.isConnected) {
         // the init function is running once, on the first time the component is connected
         if (this.#isInit) {
-          this.#isInit = false
+          this.#isInit = false;
           this.init?.();
         }
       }
@@ -54,5 +56,5 @@ export const createBaseClass = ({ componentName, baseSelector = '' }) => {
     componentNameValidationMixin,
     hoverableMixin,
     normalizeBooleanAttributesMixin
-  )(DescopeBaseClass)
-}
+  )(DescopeBaseClass);
+};

package/src/baseClasses/createBaseInputClass.js

@@ -1,10 +1,16 @@
-import { compose } from "../helpers";
-import { changeMixin, inputEventsDispatchingMixin, inputValidationMixin, normalizeBooleanAttributesMixin } from "../mixins";
-import { createBaseClass } from "./createBaseClass";
-
-export const createBaseInputClass = (...args) => compose(
-  inputValidationMixin,
+import { compose } from '../helpers';
+import {
   changeMixin,
+  inputEventsDispatchingMixin,
+  inputValidationMixin,
   normalizeBooleanAttributesMixin,
-  inputEventsDispatchingMixin
-)(createBaseClass(...args))
+} from '../mixins';
+import { createBaseClass } from './createBaseClass';
+
+export const createBaseInputClass = (...args) =>
+  compose(
+    inputValidationMixin,
+    changeMixin,
+    normalizeBooleanAttributesMixin,
+    inputEventsDispatchingMixin
+  )(createBaseClass(...args));

package/src/baseClasses/createCssVarImageClass.js

@@ -2,13 +2,17 @@ import { compose } from '../helpers';
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../mixins';
 import { createBaseClass } from './createBaseClass';
 
-let style;
-const getContent = () => style;
 export const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
-	class RawCssVarImageClass extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-		constructor() {
-			super();
-			this.attachShadow({ mode: 'open' }).innerHTML = `
+  let style;
+  const getContent = () => style;
+
+  class RawCssVarImageClass extends createBaseClass({
+    componentName,
+    baseSelector: ':host > div',
+  }) {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' }).innerHTML = `
 			<style>
 				:host {
 					display: inline-flex;
@@ -27,23 +31,23 @@ export const createCssVarImageClass = ({ componentName, varName, fallbackVarName
 			</style>
 			<div></div>
 			`;
-		}
-	}
+    }
+  }
 
-	const CssVarImageClass = compose(
-		createStyleMixin({
-			mappings: {
-				height: { selector: () => ':host' },
-				width: { selector: () => ':host' },
-				[varName]: { property: 'content' },
-				[fallbackVarName]: { property: 'content' },
-			}
-		}),
-		draggableMixin,
-		componentNameValidationMixin
-	)(RawCssVarImageClass);
+  const CssVarImageClass = compose(
+    createStyleMixin({
+      mappings: {
+        height: { selector: () => ':host' },
+        width: { selector: () => ':host' },
+        [varName]: { property: 'content' },
+        [fallbackVarName]: { property: 'content' },
+      },
+    }),
+    draggableMixin,
+    componentNameValidationMixin
+  )(RawCssVarImageClass);
 
-	style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`
+  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
 
-	return CssVarImageClass;
-}
+  return CssVarImageClass;
+};

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

@@ -1,39 +1,28 @@
-import { forwardAttrs, forwardProps, syncAttrs } from "../../helpers/componentHelpers";
-import { componentName as descopeInternalComponentName } from './descope-boolean-field-internal/BooleanFieldInternal'
+import { forwardAttrs, forwardProps, syncAttrs } from '../../helpers/componentHelpers';
+import { componentName as descopeInternalComponentName } from './descope-boolean-field-internal/BooleanFieldInternal';
 
 export const booleanFieldMixin = (superclass) =>
-    class BooleanFieldMixinClass extends superclass {
-        constructor() {
-            super();
-        }
+  class BooleanFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-        init() {
-            super.init?.();
-
-            const template = document.createElement('template');
-            template.innerHTML = `
-				<${descopeInternalComponentName} 
+      const template = document.createElement('template');
+      template.innerHTML = `
+				<${descopeInternalComponentName}
 					tabindex="-1"
 					slot="input"
 				></${descopeInternalComponentName}>
 			`;
 
-            this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
-            this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+      this.baseElement.appendChild(template.content.cloneNode(true));
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
-            forwardAttrs(this, this.inputElement, {
-                includeAttrs: [
-                    'required',
-                    'full-width',
-                    'size',
-                    'label',
-                    'invalid',
-                    'disabled'
-                ]
-            });
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['required', 'full-width', 'size', 'label', 'invalid', 'disabled'],
+      });
 
-            forwardProps(this.inputElement, this, ['checked']);
-            syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
-        }
-    };
+      forwardProps(this.inputElement, this, ['checked']);
+      syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+    }
+  };

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

@@ -1,4 +1,4 @@
-import { resetInputFieldDefaultWidth } from "../../helpers/themeHelpers/resetHelpers";
+import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
 
 export default `
 :host {

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

@@ -3,64 +3,59 @@ import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/comp
 
 export const componentName = getComponentName('boolean-field-internal');
 
-const forwardAttributes = [
-	'disabled',
-	'label',
-	'invalid',
-	'readonly'
-];
+const forwardAttributes = ['disabled', 'label', 'invalid', 'readonly'];
 
-const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' })
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass {
-	constructor() {
-		super();
-		this.innerHTML = `
+  constructor() {
+    super();
+    this.innerHTML = `
 			<div class="wrapper">
 				<vaadin-checkbox></vaadin-checkbox>
 			</div>
 		`;
-		this.wrapperEle = this.querySelector('div');
-		this.checkbox = this.querySelector('vaadin-checkbox')
-	}
-
-	get value() {
-		return this.checkbox?.checked;
-	}
-
-	set value(val) {
-		this.checkbox.checked = val;
-	}
-
-	get checked() {
-		return this.value;
-	}
-
-	set checked(val) {
-		this.value = val;
-	}
-
-	init() {
-		this.addEventListener('focus', (e) => {
-			if (e.isTrusted) {
-				this.checkbox.focus()
-			}
-		});
-		super.init?.();
-
-		forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes });
-		syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
-
-		// we need it in order to set the focus ring and trigger validation on descope-checkbox
-		this.handleFocusEventsDispatching([this.checkbox])
-	}
-
-	getValidity() {
-		if (this.isRequired && !this.value) {
-			return { valueMissing: true };
-		}
-		return {}
-	};
+    this.wrapperEle = this.querySelector('div');
+    this.checkbox = this.querySelector('vaadin-checkbox');
+  }
+
+  get value() {
+    return this.checkbox?.checked;
+  }
+
+  set value(val) {
+    this.checkbox.checked = val;
+  }
+
+  get checked() {
+    return this.value;
+  }
+
+  set checked(val) {
+    this.value = val;
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      if (e.isTrusted) {
+        this.checkbox.focus();
+      }
+    });
+    super.init?.();
+
+    forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes });
+    syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
+
+    // we need it in order to set the focus ring and trigger validation on descope-checkbox
+    this.handleFocusEventsDispatching([this.checkbox]);
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
 }
 
 export default BooleanInputInternal;

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

@@ -1,3 +1,3 @@
-import BooleanFieldInternal, { componentName } from "./BooleanFieldInternal"
+import BooleanFieldInternal, { componentName } from './BooleanFieldInternal';
 
 customElements.define(componentName, BooleanFieldInternal);