@descope/web-components-ui 1.0.293 → 1.0.295

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -0,0 +1,201 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import greenVIcon from './green-v.svg';
+import { TextClass } from '../descope-text/TextClass';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { BadgeClass } from '../descope-badge/BadgeClass';
+
+export const componentName = getComponentName('user-auth-method');
+class RawUserAuthMethod extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .root',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        .root {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+        }
+
+        .btn-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-grow: 0;
+        }
+
+        .text-wrapper {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        descope-text::part(text-wrapper) {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: initial;
+        }
+
+        descope-text {
+          display: inline-flex;
+        }
+
+        .fulfilled-indicator {
+          width: 1em;
+          height: 1em;
+          display: flex;
+          align-items: center;
+          padding-inline-end: 1em;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        .hidden-btn {
+          width: 0;
+        }
+
+        slot[name="method-icon"]{
+          display: inline-flex;
+          align-items: center;
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <slot name="method-icon"></slot>
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-button size="sm" variant="link" mode="primary">
+            <slot name="button-icon"></slot>
+          </descope-button>
+          <div class="fulfilled-indicator">
+            <vaadin-icon src=${greenVIcon}></vaadin-icon>
+          </div>
+          <descope-button class="hidden-btn"size="sm" variant="link" mode="primary"></descope-button>
+        </div>
+      </div>
+		`;
+
+    this.button = this.shadowRoot.querySelector('descope-button');
+    this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onButtonLabelChange() {
+    let textSpanEle = this.button.querySelector('span');
+
+    if (this.buttonLabel) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        this.button.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = this.buttonLabel;
+    } else if (textSpanEle) {
+      this.button.removeChild(textSpanEle);
+    }
+  }
+
+  onFulfilledChange() {
+    this.button.classList.toggle('hidden', this.isFulfilled);
+    this.fulfilledIndicator.classList.toggle('hidden', !this.isFulfilled);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get buttonLabel() {
+    return this.getAttribute('button-label') || '';
+  }
+
+  get isFulfilled() {
+    return this.getAttribute('fulfilled') === 'true';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onButtonLabelChange();
+    this.onFulfilledChange();
+
+    this.button.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return ['label', 'fulfilled'].concat(super.observedAttributes);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'fulfilled') {
+      this.onFulfilledChange();
+    } else if (name === 'button-label') {
+      this.onButtonLabelChange();
+    }
+  }
+}
+
+const { host, textField, buttons, badge, textWrapper, methodIconSlot } = {
+  host: { selector: () => ':host' },
+  textField: { selector: 'descope-text' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+  methodIconSlot: { selector: 'slot[name="method-icon"]' },
+};
+
+export const UserAuthMethodClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textField, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...textField, property: 'width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+      iconSize: [
+        { ...methodIconSlot, property: 'width' },
+        { ...methodIconSlot, property: 'height' },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAuthMethod);

package/src/components/descope-user-auth-method/green-v.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM7.1 11.7L2.9 7.6L4.3 6.2L7 8.9L12 4L13.4 5.4L7.1 11.7Z" fill="#4CAF50"/>
+</svg>

package/src/components/descope-user-auth-method/index.js

@@ -0,0 +1,9 @@
+import { componentName, UserAuthMethodClass } from './UserAuthMethodClass';
+import '../descope-text';
+import '../descope-button';
+import '../descope-badge';
+import '@vaadin/icon';
+
+customElements.define(componentName, UserAuthMethodClass);
+
+export { UserAuthMethodClass };

package/src/index.cjs.js

@@ -39,6 +39,7 @@ export { BadgeClass } from './components/descope-badge/BadgeClass';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
 export { AvatarClass } from './components/descope-avatar/AvatarClass';
 export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
+export { UserAuthMethodClass } from './components/descope-user-auth-method/UserAuthMethodClass';
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
 export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';

package/src/index.js

@@ -34,6 +34,7 @@ export * from './components/descope-notification';
 export * from './components/descope-avatar';
 export * from './components/mapping-fields/descope-mappings-field';
 export * from './components/descope-user-attribute';
+export * from './components/descope-user-auth-method';
 export * from './components/mapping-fields/descope-saml-group-mappings';
 export * from './components/descope-policy-validation';
 

package/src/theme/components/index.js

@@ -33,6 +33,7 @@ import * as badge from './badge';
 import * as avatar from './avatar';
 import * as mappingsField from './mappingsField';
 import * as userAttribute from './userAttribute';
+import * as userAuthMethod from './userAuthMethod';
 import * as samlGroupMappings from './samlGroupMappings';
 import * as policyValidation from './policyValidation';
 
@@ -73,6 +74,7 @@ const components = {
   avatar,
   mappingsField,
   userAttribute,
+  userAuthMethod,
   samlGroupMappings,
   policyValidation,
 };

package/src/theme/components/userAuthMethod.js

@@ -0,0 +1,19 @@
+import globals from '../globals';
+import { UserAuthMethodClass } from '../../components/descope-user-auth-method/UserAuthMethodClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+export const vars = UserAuthMethodClass.cssVarList;
+
+const userAuthMethod = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.labelTextWidth]: '200px',
+  [vars.itemsGap]: '16px',
+  [vars.hostMinWidth]: '530px',
+  [vars.iconSize]: '24px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default userAuthMethod;