@descope/web-components-ui 1.0.135 → 1.0.148

package/src/components/descope-text-field/TextFieldClass.js

@@ -1,61 +1,66 @@
 import {
-	createStyleMixin,
-	draggableMixin,
-	createProxy,
-	proxyInputMixin,
-	componentNameValidationMixin
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
 } from '../../mixins';
 import textFieldMappings from './textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import { resetInputOverrides, useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  resetInputOverrides,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
 const customMixin = (superclass) =>
-	class TextFieldClass extends superclass {
-		static get observedAttributes() {
-			return observedAttrs.concat(superclass.observedAttributes || []);
-		}
+  class TextFieldClass extends superclass {
+    static get observedAttributes() {
+      return observedAttrs.concat(superclass.observedAttributes || []);
+    }
 
-		attributeChangedCallback(attrName, oldVal, newVal) {
-			super.attributeChangeCallback?.(attrName, oldVal, newVal);
+    attributeChangedCallback(attrName, oldVal, newVal) {
+      super.attributeChangeCallback?.(attrName, oldVal, newVal);
 
-			// Vaadin doesn't allow to change the input type attribute.
-			// We need the ability to do that, so we're overriding their
-			// behavior with their private API.
-			// When receiving a `type` attribute, we use their private API
-			// to set it on the input.
-			if (attrName === 'type') {
-				this.baseElement._setType(newVal);
-			}
-		}
-	}
+      // Vaadin doesn't allow to change the input type attribute.
+      // We need the ability to do that, so we're overriding their
+      // behavior with their private API.
+      // When receiving a `type` attribute, we use their private API
+      // to set it on the input.
+      if (attrName === 'type') {
+        this.baseElement._setType(newVal);
+      }
+    }
+  };
 
 export const TextFieldClass = compose(
-	createStyleMixin({
-		mappings: textFieldMappings
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	customMixin
+  createStyleMixin({
+    mappings: textFieldMappings,
+  }),
+  draggableMixin,
+  proxyInputMixin,
+  componentNameValidationMixin,
+  customMixin
 )(
-	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
+  createProxy({
+    slots: ['prefix', 'suffix'],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
 			:host {
 				display: inline-block;
 				max-width: 100%;
-				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
+				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${
+          TextFieldClass.cssVarList.inputOutlineOffset
+        }));
 			}
 			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName
-	})
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
 );

package/src/components/descope-text-field/textFieldMappings.js

@@ -1,68 +1,53 @@
-const {
-	host,
-	label,
-	placeholder,
-	requiredIndicator,
-	inputField,
-	input,
-	helperText,
-	errorMessage
-} = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	placeholder: { selector: '> input:placeholder-shown' },
-	inputField: { selector: '::part(input-field)' },
-	input: { selector: 'input' },
-	helperText: { selector: '::part(helper-text)' },
-	errorMessage: { selector: '::part(error-message)' }
-};
+const { host, label, placeholder, requiredIndicator, inputField, input, helperText, errorMessage } =
+  {
+    host: { selector: () => ':host' },
+    label: { selector: '::part(label)' },
+    requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+    placeholder: { selector: '> input:placeholder-shown' },
+    inputField: { selector: '::part(input-field)' },
+    input: { selector: 'input' },
+    helperText: { selector: '::part(helper-text)' },
+    errorMessage: { selector: '::part(error-message)' },
+  };
 
 export default {
-	// we apply font-size also on the host so we can set its width with em
-	fontSize: [
-		{},
-		host,
-	],
-	fontFamily: [
-		label,
-		inputField,
-		helperText,
-		errorMessage,
-	],
+  // we apply font-size also on the host so we can set its width with em
+  fontSize: [{}, host],
+  fontFamily: [label, inputField, helperText, errorMessage],
 
-	hostWidth: { ...host, property: 'width' },
-	hostMinWidth: { ...host, property: 'min-width' },
+  hostWidth: { ...host, property: 'width' },
+  hostMinWidth: { ...host, property: 'min-width' },
 
-	inputBackgroundColor: { ...inputField, property: 'background-color' },
+  inputBackgroundColor: { ...inputField, property: 'background-color' },
 
-	labelTextColor: [
-		{ ...label, property: 'color' },
-		{ ...requiredIndicator, property: 'color' }
-	],
+  labelTextColor: [
+    { ...label, property: 'color' },
+    { ...requiredIndicator, property: 'color' },
+  ],
+  errorMessageTextColor: { ...errorMessage, property: 'color' },
 
-	inputValueTextColor: { ...inputField, property: 'color' },
-	inputCaretTextColor: { ...input, property: 'color' },
+  inputValueTextColor: { ...inputField, property: 'color' },
+  inputCaretTextColor: { ...input, property: 'color' },
 
-	labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
-	inputBorderColor: { ...inputField, property: 'border-color' },
-	inputBorderWidth: { ...inputField, property: 'border-width' },
-	inputBorderStyle: { ...inputField, property: 'border-style' },
-	inputBorderRadius: { ...inputField, property: 'border-radius' },
+  inputBorderColor: { ...inputField, property: 'border-color' },
+  inputBorderWidth: { ...inputField, property: 'border-width' },
+  inputBorderStyle: { ...inputField, property: 'border-style' },
+  inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-	inputHeight: { ...inputField, property: 'height' },
-	inputHorizontalPadding: [
-		{ ...input, property: 'padding-left' },
-		{ ...input, property: 'padding-right' }
-	],
+  inputHeight: { ...inputField, property: 'height' },
+  inputHorizontalPadding: [
+    { ...input, property: 'padding-left' },
+    { ...input, property: 'padding-right' },
+  ],
 
-	inputOutlineColor: { ...inputField, property: 'outline-color' },
-	inputOutlineStyle: { ...inputField, property: 'outline-style' },
-	inputOutlineWidth: { ...inputField, property: 'outline-width' },
-	inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+  inputOutlineColor: { ...inputField, property: 'outline-color' },
+  inputOutlineStyle: { ...inputField, property: 'outline-style' },
+  inputOutlineWidth: { ...inputField, property: 'outline-width' },
+  inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-	inputTextAlign: { ...input, property: 'text-align' },
+  inputTextAlign: { ...input, property: 'text-align' },
 
-	inputPlaceholderColor: { ...placeholder, property: 'color' }
+  inputPlaceholderColor: { ...placeholder, property: 'color' },
 };

package/src/components/descope-totp-image/TotpImageClass.js

@@ -3,4 +3,8 @@ import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass
 
 export const componentName = getComponentName('totp-image');
 
-export const TotpImageClass = createCssVarImageClass({ componentName, varName: 'url', fallbackVarName: 'fallbackUrl' })
+export const TotpImageClass = createCssVarImageClass({
+  componentName,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});

package/src/components/descope-upload-file/UploadFileClass.js

@@ -0,0 +1,202 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import { getFileBase64, getFilename } from './helpers';
+
+export const componentName = getComponentName('upload-file');
+
+const observedAttributes = [
+  'title',
+  'description',
+  'button-label',
+  'accept',
+  'button-mode',
+  'button-variant',
+  'required',
+  'size',
+];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div.wrapper' });
+
+class RawUploadFile extends BaseInputClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+			.wrapper {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+			}
+			.button-wrapper {
+				position: relative;
+				width: fit-content;
+			}
+			input {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				opacity: 0;
+			}
+			</style>
+			<div class="wrapper">
+				<div class="icon"></div>
+				<div class="title">
+					<span class="title-text"></span>
+					<span class="required-indicator"></span>
+				</div>
+				<div class="description"></div>
+				<div class="button-wrapper">
+					<input type="file" tabindex="-1" />
+					<descope-button></descope-button>
+				</div>
+			</div>
+		`;
+
+    this.wrapperEle = this.shadowRoot.querySelector('.wrapper');
+    this.inputElement = this.shadowRoot.querySelector('input');
+
+    this.button.onclick = () => this.inputElement.click();
+
+    this.inputElement.onchange = async (e) => {
+      const receivedFileList = e.target.files;
+
+      if (!receivedFileList.length) {
+        return;
+      }
+
+      this.value = await getFileBase64(receivedFileList[0]);
+
+      this.updateDescription(getFilename(receivedFileList[0]));
+    };
+
+    this.oninvalid = () => {
+      this.setAttribute('invalid', 'true');
+    };
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  initInputs() {
+    const button = this.rootElement.querySelector('descope-button');
+    button.onclick = () => this.inputElement.click();
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'title') {
+        this.updateTitle(newValue);
+      } else if (attrName === 'description') {
+        this.updateDescription(newValue);
+      } else if (attrName === 'button-label') {
+        this.updateButtonLabel(newValue);
+      } else if (attrName === 'button-mode') {
+        this.updateButtonMode(newValue);
+      } else if (attrName === 'button-variant') {
+        this.updateButtonVariant(newValue);
+      } else if (attrName === 'size') {
+        this.updateButtonSize(newValue);
+      } else if (attrName === 'accept') {
+        this.updateInputAccept(newValue);
+      }
+    }
+  }
+
+  get button() {
+    return this.shadowRoot.querySelector('descope-button');
+  }
+
+  get input() {
+    return this.shadowRoot.querySelector('input');
+  }
+
+  get title() {
+    return this.shadowRoot.querySelector('.title-text');
+  }
+
+  get description() {
+    return this.shadowRoot.querySelector('.description');
+  }
+
+  updateTitle(val) {
+    this.title.innerHTML = val;
+  }
+
+  updateDescription(val) {
+    this.description.innerHTML = val;
+  }
+
+  updateButtonLabel(val) {
+    this.button.innerHTML = val;
+  }
+
+  updateButtonSize(val) {
+    this.button.setAttribute('size', val);
+  }
+
+  updateButtonMode(val) {
+    this.button.setAttribute('mode', val);
+  }
+
+  updateButtonVariant(val) {
+    this.button.setAttribute('variant', val);
+  }
+
+  updateInputAccept(val) {
+    this.input.setAttribute('accept', val);
+  }
+}
+
+const { host, icon, title, description, requiredIndicator } = {
+  host: { selector: () => '.wrapper' },
+  icon: { selector: () => '.icon' },
+  title: { selector: () => '.title' },
+  description: { selector: () => '.description' },
+  requiredIndicator: { selector: () => '.title::after' },
+};
+
+export const UploadFileClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      fontSize: {},
+      fontFamily: {},
+      hostWidth: { ...host, property: 'width' },
+      hostHeight: { ...host, property: 'height' },
+      hostPadding: { ...host, property: 'padding' },
+      gap: { ...host },
+      lineHeight: { ...host, property: 'line-height' },
+      borderColor: { ...host, property: 'border-color' },
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderRadius: { ...host, property: 'border-radius' },
+      titleFontSize: { ...title, property: 'font-size' },
+      titleFontWeight: { ...title, property: 'font-weight' },
+      descriptionFontSize: { ...description, property: 'font-size' },
+      labelTextColor: [
+        { ...title, property: 'color' },
+        { ...description, property: 'color' },
+      ],
+      icon: { ...icon, property: 'content' },
+      iconSize: { ...icon, property: 'width' },
+      requiredIndicator: { ...requiredIndicator, property: 'content' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUploadFile);

package/src/components/descope-upload-file/helpers.js

@@ -0,0 +1,11 @@
+export const getFileBase64 = (fileObj) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.readAsDataURL(fileObj);
+  });
+};
+
+export const getFilename = (fileObj) => {
+  return fileObj.name.replace(/^.*\\/, '');
+};

package/src/components/descope-upload-file/index.js

@@ -0,0 +1,6 @@
+import { componentName, UploadFileClass } from './UploadFileClass';
+import '../descope-button';
+
+customElements.define(componentName, UploadFileClass);
+
+export { UploadFileClass };

package/src/constants.js

@@ -1,4 +1,4 @@
 export const DESCOPE_PREFIX = 'descope';
-export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3
-export const BASE_THEME_SECTION = 'host'
-export const PORTAL_THEME_PREFIX = '@'
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const BASE_THEME_SECTION = 'host';
+export const PORTAL_THEME_PREFIX = '@';

package/src/helpers/componentHelpers.js

@@ -1,101 +1,95 @@
 import { kebabCaseJoin } from '.';
 import { DESCOPE_PREFIX } from '../constants';
 
-export const observeAttributes = (
-	ele,
-	callback,
-	{ excludeAttrs = [], includeAttrs = [] }
-) => {
-	// sync all attrs on init
-	const filteredAttrs = Array.from(ele.attributes)
-		.filter((attr) =>
-			!excludeAttrs.includes(attr.name) &&
-			(!includeAttrs.length || includeAttrs.includes(attr.name))
-		)
-		.map((attr) => attr.name)
+export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+  // sync all attrs on init
+  const filteredAttrs = Array.from(ele.attributes)
+    .filter(
+      (attr) =>
+        !excludeAttrs.includes(attr.name) &&
+        (!includeAttrs.length || includeAttrs.includes(attr.name))
+    )
+    .map((attr) => attr.name);
 
-	callback(filteredAttrs);
+  callback(filteredAttrs);
 
-	const observer = new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (
-				mutation.type === 'attributes' &&
-				!excludeAttrs.includes(mutation.attributeName) &&
-				(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
-			) {
-				callback([mutation.attributeName]);
-			}
-		}
-	});
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        !excludeAttrs.includes(mutation.attributeName) &&
+        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+      ) {
+        callback([mutation.attributeName]);
+      }
+    });
+  });
 
-	observer.observe(ele, { attributes: true });
+  observer.observe(ele, { attributes: true });
 };
 
 // calling the callback with this object: { addedNodes, removedNodes }
-export const observeChildren = (
-	ele,
-	callback,
-) => {
-	callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+export const observeChildren = (ele, callback) => {
+  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
 
-	const observer = new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				callback(mutation);
-			}
-		}
-	});
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'childList') {
+        callback(mutation);
+      }
+    });
+  });
 
-	observer.observe(ele, { childList: true });
+  observer.observe(ele, { childList: true });
 };
 
 const createSyncAttrsCb =
-	(srcEle, targetEle, mapAttrs = {}) =>
-		(attrNames) => {
-			attrNames.forEach((attrName) => {
-				const targetAttrName = mapAttrs[attrName] || attrName;
-				const srcAttrVal = srcEle.getAttribute(attrName);
-				if (srcAttrVal !== null) {
-					if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-						targetEle.setAttribute(targetAttrName, srcAttrVal);
-					}
-				} else {
-					targetEle.removeAttribute(targetAttrName);
-				}
-			});
-		};
+  (srcEle, targetEle, mapAttrs = {}) =>
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
+        }
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
 
 export const syncAttrs = (ele1, ele2, options) => {
-	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
-	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
 export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-export const getCssVarName = (...args) =>
-	`--${kebabCaseJoin(...args)}`;
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
 
 export const forwardAttrs = (source, dest, options = {}) => {
-	observeAttributes(
-		source,
-		createSyncAttrsCb(source, dest, options.mapAttrs),
-		options
-	);
+  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
 };
 
 export const forwardProps = (src, target, props = []) => {
-	if (!props.length) return;
+  if (!props.length) return;
 
-	const config = props.reduce((acc, prop) => Object.assign(acc, {
-		[prop]: {
-			get() {
-				return src[prop]
-			},
-			set(v) {
-				src[prop] = v
-			}
-		}
-	}), {})
+  const config = props.reduce(
+    (acc, prop) =>
+      Object.assign(acc, {
+        [prop]: {
+          get() {
+            return src[prop];
+          },
+          set(v) {
+            // eslint-disable-next-line no-param-reassign
+            src[prop] = v;
+          },
+        },
+      }),
+    {}
+  );
 
-	Object.defineProperties(target, config)
-}
+  Object.defineProperties(target, config);
+};

package/src/helpers/index.js

@@ -1,26 +1,27 @@
-
 export const kebabCase = (str) =>
-	str
-		.replace(/([a-z])([A-Z])/g, '$1-$2')
-		.replace(/[\s_.]+/g, '-')
-		.toLowerCase();
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_.]+/g, '-')
+    .toLowerCase();
 
 export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
-export const compose = (...fns) =>
-	(val) =>
-		fns.reduceRight((res, fn) => fn(res), val);
+export const compose =
+  (...fns) =>
+  (val) =>
+    fns.reduceRight((res, fn) => fn(res), val);
 
-export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
 export const isUrl = (maybeUrl) => {
-	try {
-		new URL(maybeUrl)
+  try {
+    // eslint-disable-next-line no-new
+    new URL(maybeUrl);
 
-		return true;
-	} catch (e) {
-		return false;
-	}
-}
+    return true;
+  } catch (e) {
+    return false;
+  }
+};