@descope-ui/descope-multi-line-mappings 3.9.0

package/src/component/index.js

@@ -0,0 +1,11 @@
+import '@descope-ui/descope-button';
+import '@descope-ui/descope-multi-select-combo-box';
+
+import {
+  componentName,
+  MultiLineMappingsClass,
+} from './MultiLineMappingsClass';
+
+customElements.define(componentName, MultiLineMappingsClass);
+
+export { MultiLineMappingsClass, componentName };

package/src/theme.js

@@ -0,0 +1,24 @@
+import globals from '@descope-ui/theme-globals';
+import { refs } from '@descope-ui/theme-input-wrapper';
+import { MultiLineMappingsClass } from './component/MultiLineMappingsClass';
+
+const vars = MultiLineMappingsClass.cssVarList;
+
+const multiLineMappings = {
+  [vars.hostDirection]: refs.direction,
+
+  [vars.rowsGap]: globals.spacing.sm,
+  [vars.rowGap]: globals.spacing.sm,
+  [vars.rowAlignItems]: 'flex-end',
+  [vars.rowWrap]: 'nowrap',
+
+  [vars.addActionJustifyContent]: 'flex-start',
+  [vars.addActionMarginTop]: globals.spacing.xs,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default multiLineMappings;
+export { vars };

package/stories/descope-multi-line-mappings.stories.js

@@ -0,0 +1,174 @@
+import { componentName } from '../src/component';
+import {
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+} from '@descope-ui/common/sb-controls';
+import { withForm } from '@descope-ui/common/sb-helpers';
+
+const DEFAULT_DATA = {
+  'tenant-a': ['viewer', 'editor', 'admin'],
+  'tenant-b': ['viewer', 'editor'],
+  'tenant-c': ['viewer', 'auditor'],
+};
+
+const DEFAULT_VALUE = [
+  {
+    firstValues: 'tenant-a',
+    secondValues: ['viewer'],
+  },
+];
+
+const Template = ({
+  size,
+  disabled,
+  readonly,
+  'full-width': fullWidth,
+  direction,
+  'max-rows': maxRows,
+  'first-label': firstLabel,
+  'second-label': secondLabel,
+  'first-placeholder': firstPlaceholder,
+  'second-placeholder': secondPlaceholder,
+  'first-value-key': firstValueKey,
+  'second-value-key': secondValueKey,
+  'merge-rows': mergeRows,
+  customAddButtonContent,
+  data,
+}) => `
+  <descope-multi-line-mappings
+    size="${size || 'md'}"
+    disabled="${disabled || false}"
+    readonly="${readonly || false}"
+    full-width="${fullWidth || false}"
+    st-host-direction="${direction || ''}"
+    max-rows="${maxRows ?? ''}"
+    first-label="${firstLabel || ''}"
+    second-label="${secondLabel || ''}"
+    first-placeholder="${firstPlaceholder || ''}"
+    second-placeholder="${secondPlaceholder || ''}"
+    first-value-key="${firstValueKey || ''}"
+    second-value-key="${secondValueKey || ''}"
+    merge-rows="${mergeRows || false}"
+    data='${JSON.stringify(data || {})}'
+  >
+    <span slot="add-button-content">${customAddButtonContent || '+ Add mapping'}</span>
+  </descope-multi-line-mappings>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-multi-line-mappings',
+  decorators: [
+    withForm,
+    (story, { args }) => {
+      setTimeout(() => {
+        const component = document.querySelector(componentName);
+
+        if (!component) {
+          return;
+        }
+
+        const firstKey = args['first-value-key'] || 'firstValues';
+        const secondKey = args['second-value-key'] || 'secondValues';
+
+        component.value = (args.value || []).map((item) => ({
+          [firstKey]: item[firstKey] ?? item.firstValues ?? '',
+          [secondKey]: item[secondKey] ?? item.secondValues ?? [],
+        }));
+      });
+
+      return story();
+    },
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...directionControl,
+    'max-rows': {
+      name: 'Max Rows',
+      control: { type: 'number' },
+    },
+    'first-label': {
+      name: 'First Combo Label',
+      control: { type: 'text' },
+    },
+    'second-label': {
+      name: 'Second Combo Label',
+      control: { type: 'text' },
+    },
+    'first-placeholder': {
+      name: 'First Combo Placeholder',
+      control: { type: 'text' },
+    },
+    'second-placeholder': {
+      name: 'Second Combo Placeholder',
+      control: { type: 'text' },
+    },
+    'first-value-key': {
+      name: 'First Value Key',
+      control: { type: 'text' },
+    },
+    'second-value-key': {
+      name: 'Second Value Key',
+      control: { type: 'text' },
+    },
+    'merge-rows': {
+      name: 'Merge Rows',
+      control: { type: 'boolean' },
+    },
+    customAddButtonContent: {
+      name: 'Custom Add slot content',
+      control: { type: 'text' },
+    },
+    data: {
+      name: 'Data',
+      control: { type: 'object' },
+    },
+    value: {
+      name: 'Component Value',
+      control: { type: 'object' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  disabled: false,
+  readonly: false,
+  'full-width': false,
+  direction: 'ltr',
+  'max-rows': 5,
+  'first-label': 'Tenants',
+  'second-label': 'Roles',
+  'first-value-key': 'firstValues',
+  'second-value-key': 'secondValues',
+  'merge-rows': false,
+  customAddButtonContent: '+ Assign tenant/role',
+  data: DEFAULT_DATA,
+  value: DEFAULT_VALUE,
+};
+
+export const CustomKeys = Template.bind({});
+
+CustomKeys.args = {
+  ...Default.args,
+  'first-value-key': 'tenants',
+  'second-value-key': 'roles',
+  value: [
+    {
+      tenants: 'tenant-a',
+      roles: ['viewer'],
+    },
+    {
+      tenants: 'tenant-b',
+      roles: ['viewer'],
+    },
+  ],
+};