@descope/web-components-ui 1.0.286 → 1.0.288

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -8719,7 +8719,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8719
8719
  return this.getAttribute('options') || [];
8720
8720
  }
8721
8721
 
8722
- addNewMappingItem() {
8722
+ addNewMappingItem(focusNewItem) {
8723
8723
  const newMappingItem = document.createElement('descope-mapping-item');
8724
8724
  newMappingItem.setAttribute('bordered', 'true');
8725
8725
  this.mappingsContainerEle.appendChild(newMappingItem);
@@ -8740,6 +8740,9 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8740
8740
  this.setCustomValidity('');
8741
8741
  e.stopPropagation();
8742
8742
  });
8743
+ if (focusNewItem) {
8744
+ newMappingItem.focus();
8745
+ }
8743
8746
  }, 0);
8744
8747
  return newMappingItem;
8745
8748
  }
@@ -8784,7 +8787,7 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8784
8787
  mappingItem.value = mapping;
8785
8788
  } else {
8786
8789
  // Add new item
8787
- const newMappingItem = this.addNewMappingItem();
8790
+ const newMappingItem = this.addNewMappingItem(false);
8788
8791
  // Setting the new item value needs to be done with the timeout,
8789
8792
  // otherwise the value is not set correctly
8790
8793
  setTimeout(() => {
@@ -8824,13 +8827,17 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8824
8827
  `;
8825
8828
  const button = this.querySelector('descope-button');
8826
8829
  button.onclick = () => {
8827
- this.addNewMappingItem();
8830
+ this.addNewMappingItem(true);
8828
8831
  };
8829
8832
  forwardAttrs(this, button, {
8830
8833
  includeAttrs: ['disabled'],
8831
8834
  });
8832
8835
  }
8833
8836
 
8837
+ #onMappingsContainerChildrenChange() {
8838
+ this.labelsEle.style.display = this.items.length ? 'grid' : 'none';
8839
+ }
8840
+
8834
8841
  init() {
8835
8842
  // This event listener needs to be placed before the super.init() call
8836
8843
  this.addEventListener('focus', (e) => {
@@ -8857,6 +8864,8 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8857
8864
  this.#errorItem = undefined;
8858
8865
  }
8859
8866
  });
8867
+
8868
+ observeChildren(this.mappingsContainerEle, this.#onMappingsContainerChildrenChange.bind(this));
8860
8869
  }
8861
8870
 
8862
8871
  resetInvalidIndication() {
@@ -8899,9 +8908,6 @@ class MappingsFieldInternal extends BaseInputClass$1 {
8899
8908
 
8900
8909
  const componentName$2 = getComponentName('mappings-field');
8901
8910
 
8902
- const SEPARATOR_WIDTH = '80px';
8903
- const REMOVE_BUTTON_WIDTH = '60px';
8904
-
8905
8911
  const customMixin = (superclass) =>
8906
8912
  class MappingsFieldMixinClass extends superclass {
8907
8913
  get defaultValues() {
@@ -8958,7 +8964,17 @@ const customMixin = (superclass) =>
8958
8964
  }
8959
8965
  };
8960
8966
 
8961
- const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLabel, separator } = {
8967
+ const {
8968
+ host,
8969
+ helperText,
8970
+ errorMessage,
8971
+ mappingItem,
8972
+ labels,
8973
+ valueLabel,
8974
+ attrLabel,
8975
+ separator,
8976
+ labelsContainer,
8977
+ } = {
8962
8978
  host: { selector: () => ':host' },
8963
8979
  helperText: { selector: '::part(helper-text)' },
8964
8980
  errorMessage: { selector: '::part(error-message)' },
@@ -8967,6 +8983,7 @@ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLab
8967
8983
  valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
8968
8984
  attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
8969
8985
  separator: { selector: 'descope-mapping-item::part(separator)' },
8986
+ labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
8970
8987
  };
8971
8988
 
8972
8989
  const MappingsFieldClass = compose(
@@ -8982,6 +8999,9 @@ const MappingsFieldClass = compose(
8982
8999
  itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
8983
9000
  valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
8984
9001
  attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
9002
+ labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
9003
+ separatorWidth: {},
9004
+ removeButtonWidth: {},
8985
9005
  },
8986
9006
  }),
8987
9007
  draggableMixin,
@@ -9008,9 +9028,8 @@ const MappingsFieldClass = compose(
9008
9028
  }
9009
9029
 
9010
9030
  descope-mappings-field-internal [part="labels"] {
9011
- margin-bottom: 0.5em;
9012
- display: grid;
9013
- grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
9031
+ display: none;
9032
+ grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
9014
9033
  }
9015
9034
 
9016
9035
  descope-mappings-field-internal [part="labels"] [part="value-label"],
@@ -9028,7 +9047,7 @@ const MappingsFieldClass = compose(
9028
9047
 
9029
9048
  descope-mapping-item::part(wrapper) {
9030
9049
  display: grid;
9031
- grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
9050
+ grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
9032
9051
  }
9033
9052
  `,
9034
9053
  excludeAttrsSync: [
@@ -9365,27 +9384,87 @@ const createHelperVars = (theme, prefix) => {
9365
9384
  return [res.theme, res.useVars, res.vars];
9366
9385
  };
9367
9386
 
9368
- // TODO: fix generated colors strategy
9369
- const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
9370
- const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
9371
- const genContrast = (c, percentage = 0.9) => {
9387
+ const colorGaps = {
9388
+ darkLight: 0.4,
9389
+ highlight: 0.8,
9390
+ contrast: 1,
9391
+ edgeColor: {
9392
+ darkLight: 0.25,
9393
+ highlight: 0.1,
9394
+ },
9395
+ };
9396
+
9397
+ const darken = (c, percentage) => c.darken(percentage).hex();
9398
+
9399
+ const contrast = (c) => {
9372
9400
  const isDark = c.isDark();
9373
9401
  return c
9374
- .mix(Color(isDark ? 'white' : 'black'), percentage)
9402
+ .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
9375
9403
  .saturate(1)
9376
9404
  .hex();
9377
9405
  };
9378
9406
 
9379
- const genColor = (color) => {
9407
+ const lighten = (c, percentage) => {
9408
+ const isDark = c.lightness() < 0.5;
9409
+
9410
+ if (isDark) {
9411
+ return c.lightness(percentage * 100).hex();
9412
+ }
9413
+
9414
+ return c.lighten(percentage).hex();
9415
+ };
9416
+
9417
+ const isNearBlack = (color) => color.luminosity() < 0.01;
9418
+ const isNearWhite = (color) => color.luminosity() > 0.99;
9419
+
9420
+ const generateDarkColor = (color, theme) => {
9421
+ if (theme === 'dark') {
9422
+ return isNearWhite(color)
9423
+ ? darken(color, colorGaps.edgeColor.darkLight)
9424
+ : lighten(color, colorGaps.darkLight);
9425
+ }
9426
+
9427
+ return isNearBlack(color)
9428
+ ? lighten(color, colorGaps.edgeColor.darkLight)
9429
+ : darken(color, colorGaps.darkLight);
9430
+ };
9431
+
9432
+ const generateLightColor = (color, theme) => {
9433
+ if (theme === 'dark') {
9434
+ return isNearBlack(color)
9435
+ ? lighten(color, colorGaps.edgeColor.darkLight)
9436
+ : darken(color, colorGaps.darkLight);
9437
+ }
9438
+
9439
+ return isNearWhite(color)
9440
+ ? darken(color, colorGaps.edgeColor.darkLight)
9441
+ : lighten(color, colorGaps.darkLight);
9442
+ };
9443
+
9444
+ const generateHighlightColor = (color, theme) => {
9445
+ if (theme === 'dark') {
9446
+ return isNearBlack(color)
9447
+ ? lighten(color, colorGaps.edgeColor.highlight)
9448
+ : darken(color, colorGaps.highlight);
9449
+ }
9450
+
9451
+ return isNearWhite(color)
9452
+ ? darken(color, colorGaps.edgeColor.highlight)
9453
+ : lighten(color, colorGaps.highlight);
9454
+ };
9455
+
9456
+ const genColor = (color, theme) => {
9380
9457
  const mainColor = new Color(color.main || color);
9381
9458
 
9382
- return {
9459
+ const res = {
9383
9460
  main: mainColor.hex(),
9384
- dark: color.dark || genDark(mainColor),
9385
- light: color.light || genLight(mainColor),
9386
- highlight: color.highlight || genLight(mainColor),
9387
- contrast: color.contrast || genContrast(mainColor),
9461
+ dark: color.dark || generateDarkColor(mainColor, theme),
9462
+ light: color.light || generateLightColor(mainColor, theme),
9463
+ highlight: color.highlight || generateHighlightColor(mainColor, theme),
9464
+ contrast: color.contrast || contrast(mainColor),
9388
9465
  };
9466
+
9467
+ return res;
9389
9468
  };
9390
9469
 
9391
9470
  const genColors = (colors) => {
@@ -11145,6 +11224,9 @@ const mappingsField = {
11145
11224
  [vars$1.valueLabelMinWidth]: refs.minWidth,
11146
11225
  // To be positioned correctly, the min width has to match the combo box field min width
11147
11226
  [vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
11227
+ [vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
11228
+ [vars$1.separatorWidth]: '70px',
11229
+ [vars$1.removeButtonWidth]: '60px',
11148
11230
  };
11149
11231
 
11150
11232
  var mappingsField$1 = /*#__PURE__*/Object.freeze({