@descope/web-components-ui 1.0.387 → 1.0.388

package/src/components/descope-scopes-list/ScopesListClass.js

@@ -0,0 +1,111 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { createDynamicDataMixin } from '../../mixins/createDynamicDataMixin';
+import { CheckboxClass } from '../boolean-fields/descope-checkbox/CheckboxClass';
+import { SwitchToggleClass } from '../boolean-fields/descope-switch-toggle/SwitchToggleClass';
+
+export const componentName = getComponentName('scopes-list');
+const variants = ['checkbox', 'switch'];
+
+const itemRenderer = ({ id, desc, required = false }, _, ref) => {
+  const ComponentClass = ref.variant === 'checkbox' ? CheckboxClass : SwitchToggleClass;
+
+  return `
+    <${ComponentClass.componentName}
+      bordered="true"
+      size=${ref.size}
+      label="${desc}"
+      data-id="${id}"
+      readonly="${required || ref.isReadOnly}"
+      required="${required}"
+      checked="true"
+    ></${ComponentClass.componentName}>
+`;
+};
+
+class RawScopesList extends createBaseClass({ componentName, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  get isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'sm';
+  }
+
+  get value() {
+    return Array.from(this.shadowRoot.querySelector('div').children).reduce(
+      (acc, el) => ({ ...acc, [el.getAttribute('data-id')]: el.checked }),
+      {}
+    );
+  }
+
+  get variant() {
+    const variant = this.getAttribute('variant');
+
+    return variants.includes(variant) ? variant : variants[0];
+  }
+}
+
+export const ScopesListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => CheckboxClass.componentName,
+          property: CheckboxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => SwitchToggleClass.componentName,
+          property: SwitchToggleClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+      requiredInputBorderColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputBorderColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.inputBorderColor,
+        },
+      ],
+      requiredInputValueTextColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputValueTextColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.knobColor,
+        },
+      ],
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawScopesList);

package/src/components/descope-scopes-list/index.js

@@ -0,0 +1,7 @@
+import { componentName, ScopesListClass } from './ScopesListClass';
+import '../descope-list';
+import '../boolean-fields/descope-checkbox';
+
+customElements.define(componentName, ScopesListClass);
+
+export { ScopesListClass };

package/src/index.cjs.js

@@ -52,3 +52,4 @@ export { CalendarClass } from './components/descope-date-field/descope-calendar/
 export { ListClass } from './components/descope-list/ListClass';
 export { ListItemClass } from './components/descope-list/ListItemClass';
 export { AppsListClass } from './components/descope-apps-list/AppsListClass';
+export { ScopesListClass } from './components/descope-scopes-list/ScopesListClass';

package/src/index.js

@@ -44,6 +44,7 @@ export * from './components/descope-code-snippet';
 export * from './components/descope-radio-group';
 export * from './components/descope-list';
 export * from './components/descope-apps-list';
+export * from './components/descope-scopes-list';
 
 export {
   globalsThemeToStyle,

package/src/mixins/createDynamicDataMixin.js

@@ -75,18 +75,14 @@ export const createDynamicDataMixin =
       init() {
         super.init?.();
 
-        if (rerenderAttrsList.length) {
-          observeAttributes(
-            this,
-            (attrs) => {
-              if (attrs.includes('data')) this.#handleDataAttr();
-              if (attrs.some((attr) => attr !== 'data')) this.#renderItems();
-            },
-            { includeAttrs: [...rerenderAttrsList, 'data'] }
-          );
-        } else {
-          this.#renderItems();
-        }
+        observeAttributes(
+          this,
+          (attrs) => {
+            if (attrs.includes('data')) this.#handleDataAttr();
+            else this.#renderItems();
+          },
+          { includeAttrs: [...rerenderAttrsList, 'data'] }
+        );
       }
 
       #handleDataAttr() {
@@ -95,25 +91,10 @@ export const createDynamicDataMixin =
         if (!dataAttr) return;
 
         try {
-          this.#data = JSON.parse(dataAttr);
+          this.data = JSON.parse(dataAttr);
         } catch (e) {
           // eslint-disable-next-line no-console
           console.warn('Invalid JSON data', dataAttr);
         }
       }
-
-      attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback?.(name, oldValue, newValue);
-
-        if (newValue === oldValue) return;
-
-        if (name === 'data') {
-          try {
-            this.data = JSON.parse(newValue);
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn('Invalid JSON data', newValue);
-          }
-        }
-      }
     };

package/src/theme/components/checkbox.js

@@ -25,14 +25,7 @@ const checkbox = {
   [vars.inputBorderStyle]: refs.borderStyle,
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputSize]: checkboxSize,
-
-  _checked: {
-    [vars.inputValueTextColor]: refs.valueTextColor,
-  },
-
-  _disabled: {
-    [vars.labelTextColor]: refs.labelTextColor,
-  },
+  [vars.inputValueTextColor]: refs.valueTextColor,
 };
 
 export default checkbox;

package/src/theme/components/index.js

@@ -46,6 +46,7 @@ import * as dateField from './dateField';
 import * as list from './list/list';
 import * as listItem from './list/listItem';
 import * as appsList from './appsList';
+import * as scopesList from './scopesList';
 
 const components = {
   button,
@@ -97,6 +98,7 @@ const components = {
   list,
   listItem,
   appsList,
+  scopesList,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/scopesList.js

@@ -0,0 +1,15 @@
+import { ScopesListClass } from '../../components/descope-scopes-list/ScopesListClass';
+import theme, { vars as inputVars } from './inputWrapper';
+
+export const vars = ScopesListClass.cssVarList;
+
+const scopesList = {
+  [vars.requiredInputBorderColor]: theme._disabled[inputVars.borderColor],
+  [vars.requiredInputValueTextColor]: theme._disabled[inputVars.valueTextColor],
+  [vars.hostWidth]: '280px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default scopesList;