@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/cjs/index.cjs.js +92 -19
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +104 -22
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +3 -3
- package/package.json +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +18 -8
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +17 -4
- package/src/helpers/themeHelpers/colorsHelpers.js +71 -11
- package/src/theme/components/mappingsField.js +3 -0
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 {
|
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
|
-
|
9012
|
-
|
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 ${
|
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
|
-
|
9369
|
-
|
9370
|
-
|
9371
|
-
|
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'),
|
9402
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
9375
9403
|
.saturate(1)
|
9376
9404
|
.hex();
|
9377
9405
|
};
|
9378
9406
|
|
9379
|
-
const
|
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
|
-
|
9459
|
+
const res = {
|
9383
9460
|
main: mainColor.hex(),
|
9384
|
-
dark: color.dark ||
|
9385
|
-
light: color.light ||
|
9386
|
-
highlight: color.highlight ||
|
9387
|
-
contrast: color.contrast ||
|
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({
|