@descope/web-components-ui 1.0.285 → 1.0.287
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +21 -10
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +33 -11
- 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 +19 -9
- package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js +17 -4
- package/src/theme/components/mappingsField.js +3 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -10053,17 +10053,12 @@ var avatar$1 = /*#__PURE__*/Object.freeze({
|
|
10053
10053
|
vars: vars$2
|
10054
10054
|
});
|
10055
10055
|
|
10056
|
-
customElements.define(componentName$u, TextClass);
|
10057
|
-
|
10058
10056
|
const componentName$3 = getComponentName('mappings-field-internal');
|
10059
10057
|
|
10060
10058
|
createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
|
10061
10059
|
|
10062
10060
|
const componentName$2 = getComponentName('mappings-field');
|
10063
10061
|
|
10064
|
-
const SEPARATOR_WIDTH = '80px';
|
10065
|
-
const REMOVE_BUTTON_WIDTH = '60px';
|
10066
|
-
|
10067
10062
|
const customMixin = (superclass) =>
|
10068
10063
|
class MappingsFieldMixinClass extends superclass {
|
10069
10064
|
get defaultValues() {
|
@@ -10120,7 +10115,17 @@ const customMixin = (superclass) =>
|
|
10120
10115
|
}
|
10121
10116
|
};
|
10122
10117
|
|
10123
|
-
const {
|
10118
|
+
const {
|
10119
|
+
host,
|
10120
|
+
helperText,
|
10121
|
+
errorMessage,
|
10122
|
+
mappingItem,
|
10123
|
+
labels,
|
10124
|
+
valueLabel,
|
10125
|
+
attrLabel,
|
10126
|
+
separator,
|
10127
|
+
labelsContainer,
|
10128
|
+
} = {
|
10124
10129
|
host: { selector: () => ':host' },
|
10125
10130
|
helperText: { selector: '::part(helper-text)' },
|
10126
10131
|
errorMessage: { selector: '::part(error-message)' },
|
@@ -10129,6 +10134,7 @@ const { host, helperText, errorMessage, mappingItem, labels, valueLabel, attrLab
|
|
10129
10134
|
valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
|
10130
10135
|
attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
|
10131
10136
|
separator: { selector: 'descope-mapping-item::part(separator)' },
|
10137
|
+
labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
|
10132
10138
|
};
|
10133
10139
|
|
10134
10140
|
const MappingsFieldClass = compose(
|
@@ -10144,6 +10150,9 @@ const MappingsFieldClass = compose(
|
|
10144
10150
|
itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
|
10145
10151
|
valueLabelMinWidth: { ...valueLabel, property: 'min-width' },
|
10146
10152
|
attrLabelMinWidth: { ...attrLabel, property: 'min-width' },
|
10153
|
+
labelsMarginBottom: { ...labelsContainer, property: 'margin-bottom' },
|
10154
|
+
separatorWidth: {},
|
10155
|
+
removeButtonWidth: {},
|
10147
10156
|
},
|
10148
10157
|
}),
|
10149
10158
|
draggableMixin,
|
@@ -10170,9 +10179,8 @@ const MappingsFieldClass = compose(
|
|
10170
10179
|
}
|
10171
10180
|
|
10172
10181
|
descope-mappings-field-internal [part="labels"] {
|
10173
|
-
|
10174
|
-
|
10175
|
-
grid-template-columns: 1fr ${SEPARATOR_WIDTH} 1fr ${REMOVE_BUTTON_WIDTH};
|
10182
|
+
display: none;
|
10183
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
10176
10184
|
}
|
10177
10185
|
|
10178
10186
|
descope-mappings-field-internal [part="labels"] [part="value-label"],
|
@@ -10190,7 +10198,7 @@ const MappingsFieldClass = compose(
|
|
10190
10198
|
|
10191
10199
|
descope-mapping-item::part(wrapper) {
|
10192
10200
|
display: grid;
|
10193
|
-
grid-template-columns: 1fr ${
|
10201
|
+
grid-template-columns: 1fr var(${MappingsFieldClass.cssVarList.separatorWidth}) 1fr var(${MappingsFieldClass.cssVarList.removeButtonWidth});
|
10194
10202
|
}
|
10195
10203
|
`,
|
10196
10204
|
excludeAttrsSync: [
|
@@ -10221,6 +10229,9 @@ const mappingsField = {
|
|
10221
10229
|
[vars$1.valueLabelMinWidth]: refs.minWidth,
|
10222
10230
|
// To be positioned correctly, the min width has to match the combo box field min width
|
10223
10231
|
[vars$1.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
|
10232
|
+
[vars$1.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
|
10233
|
+
[vars$1.separatorWidth]: '70px',
|
10234
|
+
[vars$1.removeButtonWidth]: '60px',
|
10224
10235
|
};
|
10225
10236
|
|
10226
10237
|
var mappingsField$1 = /*#__PURE__*/Object.freeze({
|