@descope/web-components-ui 1.0.176 → 1.0.178

package/src/components/descope-single-select/descope-select-item/SelectItemClass.js

@@ -0,0 +1,102 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
+import { createBaseClass } from '../../../baseClasses/createBaseClass';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import { ButtonClass } from '../../descope-button/ButtonClass';
+
+export const componentName = getComponentName('select-item');
+
+class RawSelectItem extends createBaseClass({
+  componentName,
+  baseSelector: ':host > descope-button',
+}) {
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'contained';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(value) {
+    this.setAttribute('value', value);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      descope-button {
+        max-width: 100%;
+      }
+			descope-button > slot {
+				width: 100%;
+				overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+			}
+			:host {
+				display: inline-block;
+        max-width: 100%
+			}
+		</style>
+    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
+      <slot></slot>
+    </descope-button>
+	`;
+
+    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+  }
+
+  handleFocus() {
+    this.shadowRoot.querySelector('descope-button')?.focus();
+  }
+
+  focus() {
+    this.handleFocus();
+  }
+
+  init() {
+    super.init();
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.handleFocus();
+      }
+    });
+  }
+}
+
+export const SelectItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      backgroundColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.backgroundColor,
+      },
+      labelTextColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.labelTextColor,
+      },
+      borderColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderColor,
+      },
+      borderStyle: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderStyle,
+      },
+      borderRadius: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderRadius,
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSelectItem);

package/src/components/descope-single-select/descope-select-item/index.js

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

package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js

@@ -0,0 +1,137 @@
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import {
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../../helpers/componentHelpers';
+import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
+
+export const componentName = getComponentName('single-select-internal');
+
+export class SingleSelectInternalClass extends createBaseInputClass({
+  componentName,
+  baseSelector: 'slot',
+}) {
+  constructor() {
+    super();
+
+    this.innerHTML = `
+    <style>
+    slot {
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  </style>
+  <slot part="wrapper"></slot>
+		`;
+  }
+
+  #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+  get items() {
+    return this.querySelector('slot').assignedElements();
+  }
+
+  get isReadonly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  getSelectedNode() {
+    return this.items.find((item) => item.hasAttribute('selected'));
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  removeSelected() {
+    this.getSelectedNode()?.removeAttribute('selected');
+  }
+
+  onNodeClick(e) {
+    if (!this.isReadonly) {
+      this.setSelected(e.target);
+      this.#dispatchChange();
+    }
+  }
+
+  setSelected(node) {
+    if (node !== this.getSelectedNode()) {
+      this.removeSelected();
+      node?.setAttribute('selected', 'true');
+    }
+  }
+
+  get value() {
+    return this.getSelectedNode()?.value;
+  }
+
+  set value(value) {
+    const node = this.items.find((child) => child.value === value);
+    this.setSelected(node);
+  }
+
+  get defaultValue() {
+    return this.getAttribute('default-value');
+  }
+
+  setDefaultValue() {
+    // we want to defer this action until all attributes are synched
+    setTimeout(() => {
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+        this.setCustomValidity();
+      }
+    });
+  }
+
+  onSizeChange() {
+    this.items.forEach((item) => {
+      item.setAttribute('size', this.size);
+    });
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  onObservedAttributeChange(attrs) {
+    attrs.forEach((attr) => {
+      switch (attr) {
+        case 'size':
+          this.onSizeChange();
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  init() {
+    // we are adding listeners before calling to super because it's stopping the events
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.items[0].focus();
+      }
+    });
+
+    super.init?.();
+    this.setDefaultValue();
+
+    observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
+
+    observeChildren(this, ({ addedNodes }) => {
+      addedNodes.forEach((node) => {
+        node.addEventListener('click', this.onNodeClick.bind(this));
+        node.setAttribute('size', this.size);
+      });
+    });
+  }
+}

package/src/components/descope-single-select/descope-single-select-internal/index.js

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

package/src/components/descope-single-select/index.js

@@ -0,0 +1,6 @@
+import { componentName, SingleSelectClass } from './SingleSelectClass';
+import './descope-single-select-internal';
+
+customElements.define(componentName, SingleSelectClass);
+
+export { SingleSelectClass };

package/src/index.cjs.js

@@ -26,3 +26,6 @@ export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/P
 export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
 export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
 export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
+export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
+export { SingleSelectClass } from './components/descope-single-select/SingleSelectClass';
+export { SelectItemClass } from './components/descope-single-select/descope-select-item/SelectItemClass';

package/src/index.d.ts

@@ -47,7 +47,6 @@ export type Theme = {
     logo: Record<string, any>;
     container: Record<string, any>;
     link: Record<string, any>;
-    button: Record<string, any>;
     text: Record<string, any>;
     inputWrapper: Record<string, any>;
   };

package/src/index.js

@@ -22,6 +22,8 @@ export * from './components/phone-fields/descope-phone-input-box-field';
 export * from './components/descope-new-password';
 export * from './components/descope-recaptcha';
 export * from './components/descope-upload-file';
+export * from './components/descope-single-select';
+export * from './components/descope-single-select/descope-select-item';
 
 export {
   globalsThemeToStyle,

package/src/mixins/createProxy.js

@@ -21,8 +21,13 @@ export const createProxy = ({
       super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
 			<style id="create-proxy">${isFunction(style) ? style() : style}</style>
 			<${wrappedEleName}>
-			<slot></slot>
-			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
+			${slots
+        .map(
+          (
+            slot // when slot is an empty string, we will create the default slot (without a name)
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
+        )
+        .join('')}
 			</${wrappedEleName}>
 		`;
     }

package/src/theme/components/button.js

@@ -15,9 +15,6 @@ const mode = {
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
 
-const verticalPaddingRatio = 3;
-const horizontalPaddingRatio = 2;
-
 const button = {
   ...helperTheme,
 
@@ -25,6 +22,7 @@ const button = {
 
   [compVars.cursor]: 'pointer',
   [compVars.hostHeight]: '3em',
+  [compVars.hostWidth]: 'auto',
 
   [compVars.borderRadius]: globalRefs.radius.sm,
   [compVars.borderWidth]: globalRefs.border.xs,
@@ -33,8 +31,7 @@ const button = {
 
   [compVars.labelSpacing]: '0.25em',
 
-  [compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
-  [compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
+  [compVars.verticalPadding]: '1em',
 
   [compVars.outlineWidth]: globals.border.sm,
   [compVars.outlineOffset]: '0px', // keep `px` unit for external calc
@@ -48,6 +45,12 @@ const button = {
     lg: { [compVars.fontSize]: '18px' },
   },
 
+  _square: {
+    [compVars.hostHeight]: '3em',
+    [compVars.hostWidth]: '3em',
+    [compVars.verticalPadding]: '0',
+  },
+
   _fullWidth: {
     [compVars.hostWidth]: '100%',
   },

package/src/theme/components/index.js

@@ -21,6 +21,8 @@ import * as phoneInputBoxField from './phoneInputBoxField';
 import * as newPassword from './newPassword';
 import * as inputWrapper from './inputWrapper';
 import * as uploadFile from './uploadFile';
+import * as selectItem from './single-select/selectItem';
+import * as singleSelect from './single-select/singleSelect';
 
 const components = {
   button,
@@ -47,6 +49,8 @@ const components = {
   newPassword,
   inputWrapper,
   uploadFile,
+  selectItem,
+  singleSelect,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/single-select/selectItem.js

@@ -0,0 +1,27 @@
+import { SelectItemClass } from '../../../components/descope-single-select/descope-select-item/SelectItemClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+
+const globalRefs = getThemeRefs(globals);
+
+export const vars = SelectItemClass.cssVarList;
+
+const selectItem = {
+  [vars.backgroundColor]: globalRefs.colors.surface.light,
+  [vars.labelTextColor]: globalRefs.colors.surface.contrast,
+  [vars.borderColor]: globalRefs.colors.surface.main,
+  [vars.borderStyle]: 'solid',
+  [vars.borderRadius]: globalRefs.radius.sm,
+
+  _hover: {
+    [vars.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+  },
+
+  _selected: {
+    [vars.borderColor]: globalRefs.colors.surface.contrast,
+    [vars.backgroundColor]: globalRefs.colors.surface.contrast,
+    [vars.labelTextColor]: globalRefs.colors.surface.light,
+  },
+};
+
+export default selectItem;

package/src/theme/components/single-select/singleSelect.js

@@ -0,0 +1,19 @@
+import { SingleSelectClass } from '../../../components/descope-single-select/SingleSelectClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = SingleSelectClass.cssVarList;
+
+const singleSelect = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.itemsSpacing]: globalRefs.spacing.sm,
+  [vars.hostWidth]: refs.width,
+};
+
+export default singleSelect;
+export { vars };