@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,142 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../mixins';
+import textFieldMappings from './textFieldMappings';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  inputFloatingLabelStyle,
+  resetInputLabelPosition,
+  resetInputOverrides,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('text-field');
+
+const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
+
+const customMixin = (superclass) =>
+  class TextFieldClass extends superclass {
+    static get observedAttributes() {
+      return observedAttrs.concat(superclass.observedAttributes || []);
+    }
+
+    icon;
+
+    init() {
+      super.init?.();
+    }
+
+    renderCopyToClipboard(shouldRender) {
+      if (!shouldRender) {
+        this.icon?.remove();
+        return;
+      }
+
+      const iconInitConfig = {
+        icon: 'vaadin:copy-o',
+        title: 'Copy',
+        style: 'cursor: pointer',
+      };
+
+      const iconCopiedConfig = {
+        icon: 'vaadin:check-circle-o',
+        title: 'Copied',
+        style: 'cursor: initial',
+      };
+
+      this.icon = Object.assign(document.createElement('vaadin-icon'), {
+        slot: 'suffix',
+        ...iconInitConfig,
+      });
+
+      this.baseElement.appendChild(this.icon);
+      this.icon.addEventListener('click', () => {
+        navigator.clipboard.writeText(this.value);
+        Object.assign(this.icon, iconCopiedConfig);
+
+        // we want the icon to go back to the initial state after 5 seconds
+        setTimeout(() => {
+          Object.assign(this.icon, iconInitConfig);
+        }, 5000);
+      });
+    }
+
+    onLabelClick() {
+      this.focus();
+    }
+
+    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);
+      }
+
+      if (oldVal !== newVal) {
+        if (attrName === 'label-type') {
+          if (newVal === 'floating') {
+            this.addEventListener('click', this.onLabelClick);
+          } else {
+            this.removeEventListener('click', this.onLabelClick);
+          }
+        } else if (attrName === 'copy-to-clipboard') {
+          this.renderCopyToClipboard(newVal === 'true');
+        }
+      }
+    }
+  };
+
+export const TextFieldClass = compose(
+  createStyleMixin({
+    mappings: textFieldMappings,
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  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
+        }));
+        box-sizing: border-box;
+			}
+      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
+        opacity: 1;
+      }
+
+      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
+        opacity: 0;
+      }
+      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
+        opacity: 0;
+      }
+      ${resetInputLabelPosition('vaadin-text-field')}
+			${useHostExternalPadding(TextFieldClass.cssVarList)}
+			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
+      ${inputFloatingLabelStyle()}
+
+      vaadin-text-field vaadin-icon {
+        align-self: center;
+      }
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

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

@@ -0,0 +1,9 @@
+import '@vaadin/text-field';
+import '@vaadin/icons';
+import '@vaadin/icon';
+
+import { componentName, TextFieldClass } from './TextFieldClass';
+
+customElements.define(componentName, TextFieldClass);
+
+export { TextFieldClass };

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

@@ -0,0 +1,151 @@
+const {
+  host,
+  label,
+  placeholder,
+  requiredIndicator,
+  inputField,
+  input,
+  inputMask,
+  helperText,
+  errorMessage,
+  disabledPlaceholder,
+  inputDisabled,
+  inputIcon,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  placeholder: [
+    { selector: '> input:placeholder-shown' },
+    { selector: () => ':host::slotted(input:placeholder-shown)' },
+  ],
+  disabledPlaceholder: { selector: '> input:disabled::placeholder' },
+  inputField: { selector: '::part(input-field)' },
+  input: { selector: 'input' },
+  inputMask: { selector: '::part(input-field)::before' },
+  inputDisabled: { selector: 'input:disabled' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  inputIcon: { selector: 'vaadin-icon' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
+};
+
+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],
+
+  labelFontSize: { ...label, property: 'font-size' },
+  labelFontWeight: { ...label, property: 'font-weight' },
+
+  labelTextColor: [
+    { ...label, property: 'color' },
+    { ...requiredIndicator, property: 'color' },
+    { ...label, property: '-webkit-text-fill-color' },
+    { ...requiredIndicator, property: '-webkit-text-fill-color' },
+  ],
+
+  hostWidth: { ...host, property: 'width' },
+  hostMinWidth: { ...host, property: 'min-width' },
+  hostDirection: { ...host, property: 'direction' },
+  inputDirection: { ...input, property: 'direction' },
+
+  inputBackgroundColor: [
+    { ...inputField, property: 'background-color' },
+    { ...inputMask, property: 'background-color' },
+  ],
+
+  errorMessageTextColor: { ...errorMessage, property: 'color' },
+  errorMessageIcon: { ...errorMessage, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+
+  helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },
+
+  inputValueTextColor: [
+    { ...inputField, property: 'color' },
+    { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'caret-color' },
+    { ...externalInput, property: 'caret-color' },
+  ],
+
+  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+  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' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
+  ],
+
+  inputOutlineColor: { ...inputField, property: 'outline-color' },
+  inputOutlineStyle: { ...inputField, property: 'outline-style' },
+  inputOutlineWidth: { ...inputField, property: 'outline-width' },
+  inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+
+  textAlign: {},
+
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
+
+  inputPlaceholderColor: [
+    { selector: () => ':host input:placeholder-shown', property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
+    { ...placeholder, property: 'color' },
+    { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
+  ],
+
+  labelPosition: { ...label, property: 'position' },
+  labelTopPosition: { ...label, property: 'top' },
+  labelHorizontalPosition: [
+    { ...label, property: 'left' },
+    { ...label, property: 'right' },
+  ],
+  inputTransformY: { ...label, property: 'transform' },
+  inputTransition: { ...label, property: 'transition' },
+  marginInlineStart: { ...label, property: 'margin-inline-start' },
+  placeholderOpacity: [
+    { selector: '> input:placeholder-shown', property: 'opacity' },
+    { ...externalPlaceholder, property: 'opacity' },
+  ],
+  inputVerticalAlignment: [
+    { ...inputField, property: 'align-items' },
+    { ...externalInput, property: 'align-items' },
+  ],
+  valueInputHeight: [
+    { ...input, property: 'height' },
+    { ...externalInput, property: 'height' },
+  ],
+  valueInputMarginBottom: [
+    { ...input, property: 'margin-bottom' },
+    { ...externalInput, property: 'margin-bottom' },
+  ],
+
+  inputIconOffset: [
+    { ...inputIcon, property: 'margin-right' },
+    { ...inputIcon, property: 'margin-left' },
+  ],
+  inputIconSize: { ...inputIcon, property: 'font-size' },
+  inputIconColor: { ...inputIcon, property: 'color' },
+};

package/src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass.js

@@ -0,0 +1,103 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { IconClass } from '../descope-icon/IconClass';
+import { LogoClass } from '../descope-logo/LogoClass';
+import arrowsImg from './arrows.svg';
+
+export const componentName = getComponentName('third-party-app-logo');
+class RawThirdPartyAppLogoClass extends createBaseClass({
+  componentName,
+  baseSelector: '.wrapper',
+}) {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}
+
+        .wrapper {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: max-content;
+        }
+
+				.third-party-app-logo {
+          flex-shrink: 0;
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+
+        .company-logo-wrapper, .third-party-app-logo-wrapper {
+          flex-shrink: 0;
+          display: inline-flex;
+        }
+
+        .company-logo-wrapper {
+          justify-content: flex-end;
+        }
+
+        .third-party-app-logo-wrapper {
+          justify-content: flex-start;
+        }
+
+        .arrows {
+          flex-shrink: 0;
+          display: flex;
+        }
+
+			</style>
+			<div class="wrapper">
+        <div class="third-party-app-logo-wrapper">
+          <div class="third-party-app-logo"></div>
+        </div>
+        <div class="arrows">
+          <descope-icon src="${arrowsImg}"></descope-icon>
+        </div>
+        <div class="company-logo-wrapper">
+            <descope-logo></descope-logo>
+        </div>
+      </div>
+			`;
+  }
+}
+
+const companyLogoWrapper = '>.company-logo-wrapper';
+const thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';
+
+export const ThirdPartyAppLogoClass = compose(
+  createStyleMixin({
+    mappings: {
+      logoMaxHeight: [
+        { selector: companyLogoWrapper, property: 'height' },
+        { selector: thirdPartyAppLogoWrapper, property: 'height' },
+      ],
+      logoMaxWidth: [
+        { selector: companyLogoWrapper, property: 'max-width' },
+        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },
+      ],
+      thirdPartyAppLogo: {
+        selector: () => '.third-party-app-logo',
+        property: 'content',
+        fallback: {},
+      },
+      companyLogoFallback: {
+        selector: LogoClass.componentName,
+        property: LogoClass.cssVarList.fallbackUrl,
+      },
+      gap: {},
+      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawThirdPartyAppLogoClass);

package/src/components/descope-third-party-app-logo/arrows.svg

@@ -0,0 +1,4 @@
+<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14492 15.645L7.49992 14L2.83325 18.6667L7.49992 23.3333L9.14492 21.6883L7.30159 19.8333H24.9999V17.5H7.30159L9.14492 15.645Z" fill="#636C74"/>
+<path d="M19.855 12.3553L21.5 14.0003L26.1667 9.33366L21.5 4.66699L19.855 6.31199L21.6983 8.16699H4V10.5003H21.6983L19.855 12.3553Z" fill="#636C74"/>
+</svg>

package/src/components/descope-third-party-app-logo/index.js

@@ -0,0 +1,7 @@
+import { componentName, ThirdPartyAppLogoClass } from './ThirdPartyAppLogoClass';
+import '../descope-icon';
+import '../descope-logo';
+
+customElements.define(componentName, ThirdPartyAppLogoClass);
+
+export { ThirdPartyAppLogoClass };

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

@@ -0,0 +1,10 @@
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createCssVarImageClass } from '../../baseClasses/createCssVarImageClass';
+
+export const componentName = getComponentName('totp-image');
+
+export const TotpImageClass = createCssVarImageClass({
+  componentName,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});

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

@@ -0,0 +1,5 @@
+import { componentName, TotpImageClass } from './TotpImageClass';
+
+customElements.define(componentName, TotpImageClass);
+
+export { TotpImageClass };

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

@@ -0,0 +1,236 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { getFileBase64, getFilename } from './helpers';
+
+export const componentName = getComponentName('upload-file');
+
+const observedAttributes = [
+  'title',
+  'description',
+  'button-label',
+  'accept',
+  'readonly',
+  'button-mode',
+  'button-variant',
+  'required',
+  'size',
+  'icon',
+];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });
+
+class RawUploadFile extends BaseInputClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+			:host {
+				display: flex;
+			}
+			:host > div {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				flex-direction: column;
+				width: 100%;
+			}
+			.button-wrapper {
+				position: relative;
+				width: fit-content;
+			}
+			input {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				opacity: 0;
+			}
+			</style>
+			<div>
+        <slot name="icon"></slot>
+				<div class="title">
+					<span class="title-text"></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');
+    };
+  }
+
+  // this is a temp solution,
+  // we should show the input error message like we have in all other inputs
+  /*
+  reportValidity() {
+    this.defaultReportValidity();
+  }
+  */
+
+  getValidity() {
+    if (this.isRequired && !this.input.value) {
+      return { valueMissing: true };
+    }
+    this.removeAttribute('invalid');
+    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);
+      } else if (attrName === 'readonly') {
+        this.updateReadOnly(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');
+  }
+
+  get icon() {
+    return this.shadowRoot.querySelector('.icon');
+  }
+
+  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);
+  }
+
+  updateReadOnly(val) {
+    if (val === 'true') {
+      this.input.setAttribute('disabled', 'true');
+    } else {
+      this.input.removeAttribute('disabled');
+    }
+  }
+}
+
+const buttonVars = ButtonClass.cssVarList;
+const { host, wrapper, icon, title, description, requiredIndicator } = {
+  host: { selector: () => ':host' },
+  wrapper: { selector: () => ':host > div' },
+  icon: { selector: () => '::slotted(*)' },
+  title: { selector: () => '.title' },
+  description: { selector: () => '.description' },
+  requiredIndicator: { selector: () => '.title::after' },
+};
+
+export const UploadFileClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      fontSize: {},
+      fontFamily: {},
+      borderColor: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderRadius: {},
+      hostHeight: { ...host, property: 'height' },
+      hostWidth: { ...host, property: 'width' },
+      hostPadding: { property: 'padding' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
+      ],
+      gap: { ...wrapper },
+      lineHeight: { ...wrapper, property: 'line-height' },
+      titleFontSize: { ...title, property: 'font-size' },
+      titleFontWeight: { ...title, property: 'font-weight' },
+      descriptionFontSize: { ...description, property: 'font-size' },
+      labelTextColor: [
+        { ...title, property: 'color' },
+        { ...description, property: 'color' },
+      ],
+      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 };