@descope/web-components-ui 1.0.288 → 1.0.290

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -0,0 +1,228 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import deleteIcon from './delete.svg';
+import editIcon from './edit.svg';
+import { TextClass } from '../descope-text/TextClass';
+import { ButtonClass } from '../descope-button/ButtonClass';
+import { BadgeClass } from '../descope-badge/BadgeClass';
+
+export const componentName = getComponentName('user-attribute');
+class RawUserAttribute 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;
+        }
+
+        descope-badge {
+          margin-inline-end: 10px;
+        }
+
+        descope-text[data-id="label-text"].required:after {
+          content: '*';
+          color: var(${TextClass.cssVarList.textColor});
+        }
+      </style>
+
+
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${editIcon}></vaadin-icon>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
+    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
+    this.badge = this.shadowRoot.querySelector('descope-badge');
+    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
+  }
+
+  onLabelChange() {
+    this.labelText.innerText = this.label;
+    this.labelText.setAttribute('title', this.label);
+  }
+
+  onValueOrPlaceholderChange() {
+    const text = this.value || this.placeholder;
+    const mode = this.value ? 'primary' : 'secondary';
+
+    this.valueText.innerText = text;
+    this.valueText.setAttribute('title', text);
+    this.valueText.setAttribute('mode', mode);
+  }
+
+  onBadgeLabelChange() {
+    if (!this.badgeLabel) {
+      this.badge.style.display = 'none';
+    } else {
+      this.badge.innerText = this.badgeLabel;
+      this.badge.style.display = '';
+    }
+  }
+
+  onBadgeTooltipTextChange() {
+    this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
+  }
+
+  onIsRequiredChange() {
+    this.labelText.classList.toggle('required', this.isRequired);
+  }
+
+  get label() {
+    return this.getAttribute('label') || '';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  get placeholder() {
+    return this.getAttribute('placeholder') || '';
+  }
+
+  get isRequired() {
+    return this.getAttribute('required') === 'true';
+  }
+
+  get badgeLabel() {
+    return this.getAttribute('badge-label') || '';
+  }
+
+  get badgeTooltipText() {
+    return this.getAttribute('badge-tooltip-text') || '';
+  }
+
+  init() {
+    this.onLabelChange();
+    this.onValueOrPlaceholderChange();
+    this.onIsRequiredChange();
+    this.onBadgeLabelChange();
+    this.onBadgeTooltipTextChange();
+
+    this.deleteButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
+    );
+
+    this.editButton.addEventListener('click', () =>
+      this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
+    );
+  }
+
+  static get observedAttributes() {
+    return [
+      'label',
+      'value',
+      'placeholder',
+      'required',
+      'badge-label',
+      'badge-tooltip-text',
+    ].concat(super.observedAttributes);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'label') {
+      this.onLabelChange();
+    } else if (name === 'value' || name === 'placeholder') {
+      this.onValueOrPlaceholderChange();
+    } else if (name === 'required') {
+      this.onIsRequiredChange();
+    } else if (name === 'badge-label') {
+      this.onBadgeLabelChange();
+    } else if (name === 'badge-tooltip-text') {
+      this.onBadgeTooltipTextChange();
+    }
+  }
+}
+
+const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
+  host: { selector: () => ':host' },
+  textFields: { selector: 'descope-text' },
+  valueText: { selector: 'descope-text[data-id="value-text"]' },
+  labelText: { selector: 'descope-text[data-id="label-text"]' },
+  buttons: { selector: 'descope-button' },
+  badge: { selector: 'descope-badge' },
+  textWrapper: { selector: ' .text-wrapper' },
+};
+
+export const UserAttributeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        { ...textFields, property: TextClass.cssVarList.hostDirection },
+        { ...buttons, property: ButtonClass.cssVarList.hostDirection },
+        { ...badge, property: BadgeClass.cssVarList.hostDirection },
+      ],
+      labelTextWidth: { ...labelText, property: 'width' },
+      valueTextWidth: { ...valueText, property: 'width' },
+      badgeMaxWidth: { ...badge, property: 'max-width' },
+      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawUserAttribute);

package/src/components/descope-user-attribute/delete.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/edit.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/index.js

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

package/src/helpers/themeHelpers/componentsThemeManager.js

@@ -36,6 +36,10 @@ class ComponentsThemeManager {
     this.#themes = themes;
     this.#notify();
   }
+
+  get hasThemes() {
+    return !!Object.keys(this.#themes).length;
+  }
 }
 
 export const componentsThemeManager = new ComponentsThemeManager();

package/src/index.cjs.js

@@ -38,4 +38,5 @@ export { GridClass } from './components/descope-grid/GridClass';
 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 { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';

package/src/index.d.ts

@@ -51,6 +51,8 @@ export type Theme = {
     typography: Record<string, any>;
     shadow: Record<string, string>;
     spacing: Record<string, string>;
+    radius: Record<string, string>;
+    border: Record<string, string>;
   };
   components: {
     button: Record<string, any>;
@@ -60,5 +62,6 @@ export type Theme = {
     link: Record<string, any>;
     text: Record<string, any>;
     inputWrapper: Record<string, any>;
+    buttonSelectionGroupItem: Record<string, any>;
   };
 };

package/src/index.js

@@ -33,6 +33,7 @@ export * from './components/descope-modal';
 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 {
   globalsThemeToStyle,

package/src/theme/components/avatar.js

@@ -13,6 +13,10 @@ const avatar = {
   [compVars.avatarTextColor]: globalRefs.colors.surface.main,
   [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,
 
+  _editable: {
+    [compVars.cursor]: 'pointer',
+  },
+
   size: {
     xs: {
       [compVars.hostWidth]: '30px',

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -14,6 +14,7 @@ const buttonSelectionGroupItem = {
   [vars.borderStyle]: 'solid',
   [vars.borderRadius]: globalRefs.radius.sm,
   [vars.outlineColor]: 'transparent',
+  [vars.borderWidth]: globalRefs.border.xs,
 
   _hover: {
     [vars.backgroundColor]: globalRefs.colors.surface.highlight,

package/src/theme/components/index.js

@@ -32,6 +32,7 @@ import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
 import * as avatar from './avatar';
 import * as mappingsField from './mappingsField';
+import * as userAttribute from './userAttribute';
 
 const components = {
   button,
@@ -69,6 +70,7 @@ const components = {
   badge,
   avatar,
   mappingsField,
+  userAttribute,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/userAttribute.js

@@ -0,0 +1,20 @@
+import globals from '../globals';
+import { UserAttributeClass } from '../../components/descope-user-attribute/UserAttributeClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+export const vars = UserAttributeClass.cssVarList;
+
+const userAttribute = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.labelTextWidth]: '150px',
+  [vars.valueTextWidth]: '200px',
+  [vars.badgeMaxWidth]: '85px',
+  [vars.itemsGap]: '16px',
+  [vars.hostMinWidth]: '530px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default userAttribute;