@descope/web-components-ui 1.0.244 → 1.0.246
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +28 -16
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +2039 -2025
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +2 -2
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/mixins/portalMixin.js +26 -15
package/dist/index.esm.js
CHANGED
@@ -10,6 +10,7 @@ import '@vaadin/combo-box';
|
|
10
10
|
import '@vaadin/grid';
|
11
11
|
import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
|
12
12
|
import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
13
|
+
import '@vaadin/multi-select-combo-box';
|
13
14
|
import merge from 'lodash.merge';
|
14
15
|
import set from 'lodash.set';
|
15
16
|
import Color from 'color';
|
@@ -1060,10 +1061,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
|
|
1060
1061
|
|
1061
1062
|
const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
|
1062
1063
|
|
1063
|
-
const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
1064
|
-
|
1064
|
+
const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
|
1065
|
+
const ele = await getRootElementFn(that);
|
1066
|
+
|
1067
|
+
return new Promise((res) => {
|
1065
1068
|
const MAX_RETRIES = 20;
|
1066
|
-
const ele = getRootElementFn(that);
|
1067
1069
|
let counter = 0;
|
1068
1070
|
|
1069
1071
|
const check = () => {
|
@@ -1076,11 +1078,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
|
|
1076
1078
|
|
1077
1079
|
counter++;
|
1078
1080
|
|
1079
|
-
if (!ele
|
1081
|
+
if (!ele?.shadowRoot) setTimeout(check);
|
1080
1082
|
else res(ele.shadowRoot);
|
1081
1083
|
};
|
1082
1084
|
check();
|
1083
1085
|
});
|
1086
|
+
};
|
1084
1087
|
|
1085
1088
|
const portalMixin =
|
1086
1089
|
({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
|
@@ -1106,35 +1109,44 @@ const portalMixin =
|
|
1106
1109
|
|
1107
1110
|
constructor() {
|
1108
1111
|
// we cannot use "this" before calling "super"
|
1109
|
-
const getRootElement = (that) => {
|
1112
|
+
const getRootElement = async (that) => {
|
1110
1113
|
const baseEle = that.shadowRoot.querySelector(that.baseSelector);
|
1111
|
-
|
1114
|
+
if (!selector) {
|
1115
|
+
return baseEle;
|
1116
|
+
}
|
1112
1117
|
|
1113
|
-
|
1118
|
+
// in case we have a selector, we should first wait for the base element shadow root
|
1119
|
+
// and then look for the internal element
|
1120
|
+
const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
|
1121
|
+
return baseEleShadowRoot.querySelector(selector);
|
1114
1122
|
};
|
1115
1123
|
|
1124
|
+
const getPortalElement = withWaitForShadowRoot(getRootElement);
|
1125
|
+
|
1116
1126
|
super({
|
1117
|
-
getRootElement:
|
1127
|
+
getRootElement: getPortalElement,
|
1118
1128
|
componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
|
1119
1129
|
themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
|
1120
1130
|
baseSelector: ':host',
|
1121
1131
|
});
|
1122
1132
|
|
1123
|
-
this.#portalEle =
|
1133
|
+
this.#portalEle = getPortalElement(this).then((ele) => ele.host);
|
1124
1134
|
}
|
1125
1135
|
|
1126
|
-
#handleHoverAttribute() {
|
1127
|
-
|
1136
|
+
async #handleHoverAttribute() {
|
1137
|
+
const portalEle = await this.#portalEle;
|
1138
|
+
portalEle.onmouseenter = (e) => {
|
1128
1139
|
e.target.setAttribute('hover', 'true');
|
1129
1140
|
};
|
1130
|
-
|
1141
|
+
portalEle.onmouseleave = (e) => {
|
1131
1142
|
e.target.removeAttribute('hover');
|
1132
1143
|
};
|
1133
1144
|
}
|
1134
1145
|
|
1135
|
-
init() {
|
1146
|
+
async init() {
|
1136
1147
|
super.init?.();
|
1137
|
-
|
1148
|
+
const portalEle = await this.#portalEle;
|
1149
|
+
forwardAttrs(this, portalEle, {
|
1138
1150
|
[include ? 'includeAttrs' : 'excludeAttrs']: attributes,
|
1139
1151
|
});
|
1140
1152
|
|
@@ -7202,2425 +7214,2427 @@ const GridClass = compose(
|
|
7202
7214
|
|
7203
7215
|
customElements.define(componentName$5, GridClass);
|
7204
7216
|
|
7205
|
-
const componentName$4 = getComponentName('
|
7217
|
+
const componentName$4 = getComponentName('multi-select-combo-box');
|
7206
7218
|
|
7207
|
-
|
7208
|
-
|
7209
|
-
|
7219
|
+
const multiSelectComboBoxMixin = (superclass) =>
|
7220
|
+
class MultiSelectComboBoxMixinClass extends superclass {
|
7221
|
+
// eslint-disable-next-line class-methods-use-this
|
7222
|
+
#renderItem = ({ displayName, value, label }) => {
|
7223
|
+
return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
|
7224
|
+
};
|
7210
7225
|
|
7211
|
-
|
7212
|
-
|
7213
|
-
|
7214
|
-
|
7215
|
-
|
7216
|
-
|
7217
|
-
|
7226
|
+
#data;
|
7227
|
+
|
7228
|
+
get defaultValues() {
|
7229
|
+
const defaultValuesAttr = this.getAttribute('default-values');
|
7230
|
+
if (defaultValuesAttr) {
|
7231
|
+
try {
|
7232
|
+
const defaultValues = JSON.parse(defaultValuesAttr);
|
7233
|
+
if (this.isValidDataType(defaultValues)) {
|
7234
|
+
return defaultValues;
|
7235
|
+
}
|
7236
|
+
} catch (e) {
|
7237
|
+
// eslint-disable-next-line no-console
|
7238
|
+
console.error('could not parse data string from attribute "default-values" -', e.message);
|
7239
|
+
}
|
7218
7240
|
}
|
7219
|
-
|
7220
|
-
|
7221
|
-
<slot></slot>
|
7222
|
-
</div>
|
7223
|
-
`;
|
7224
|
-
}
|
7225
|
-
}
|
7241
|
+
return [];
|
7242
|
+
}
|
7226
7243
|
|
7227
|
-
|
7228
|
-
|
7229
|
-
|
7230
|
-
hostWidth: [{ selector: () => ':host', property: 'width' }],
|
7231
|
-
hostDirection: { property: 'direction' },
|
7244
|
+
get renderItem() {
|
7245
|
+
return this.#renderItem;
|
7246
|
+
}
|
7232
7247
|
|
7233
|
-
|
7234
|
-
|
7235
|
-
|
7236
|
-
|
7237
|
-
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
7238
|
-
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
7248
|
+
set renderItem(renderFn) {
|
7249
|
+
this.#renderItem = renderFn;
|
7250
|
+
this.renderItems();
|
7251
|
+
}
|
7239
7252
|
|
7240
|
-
|
7241
|
-
|
7242
|
-
borderColor: {},
|
7243
|
-
borderRadius: {},
|
7253
|
+
get data() {
|
7254
|
+
if (this.#data) return this.#data;
|
7244
7255
|
|
7245
|
-
|
7256
|
+
const dataAttr = this.getAttribute('data');
|
7246
7257
|
|
7247
|
-
|
7248
|
-
|
7249
|
-
|
7250
|
-
|
7251
|
-
|
7252
|
-
|
7253
|
-
|
7258
|
+
if (dataAttr) {
|
7259
|
+
try {
|
7260
|
+
const data = JSON.parse(dataAttr);
|
7261
|
+
if (this.isValidDataType(data)) {
|
7262
|
+
return data;
|
7263
|
+
}
|
7264
|
+
} catch (e) {
|
7265
|
+
// eslint-disable-next-line no-console
|
7266
|
+
console.error('could not parse data string from attribute "data" -', e.message);
|
7267
|
+
}
|
7268
|
+
}
|
7254
7269
|
|
7255
|
-
|
7270
|
+
return [];
|
7271
|
+
}
|
7256
7272
|
|
7257
|
-
|
7273
|
+
set data(data) {
|
7274
|
+
if (this.isValidDataType(data)) {
|
7275
|
+
this.#data = data;
|
7276
|
+
this.renderItems();
|
7277
|
+
}
|
7278
|
+
}
|
7258
7279
|
|
7259
|
-
|
7260
|
-
|
7261
|
-
if (val?.constructor !== Object) {
|
7262
|
-
return merge(acc, getTransformation(path.concat(key), val));
|
7280
|
+
get allowCustomValue() {
|
7281
|
+
return this.getAttribute('allow-custom-value') === 'true';
|
7263
7282
|
}
|
7264
|
-
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
7265
|
-
}, {});
|
7266
|
-
};
|
7267
7283
|
|
7268
|
-
|
7269
|
-
|
7284
|
+
get minItemsSelection() {
|
7285
|
+
return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
|
7286
|
+
}
|
7270
7287
|
|
7271
|
-
|
7272
|
-
|
7273
|
-
|
7274
|
-
return stringifyArray(val);
|
7275
|
-
case isUrl(val):
|
7276
|
-
return `url(${val})`;
|
7277
|
-
default:
|
7278
|
-
return val;
|
7279
|
-
}
|
7280
|
-
};
|
7288
|
+
get maxItemsSelection() {
|
7289
|
+
return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
|
7290
|
+
}
|
7281
7291
|
|
7282
|
-
|
7283
|
-
|
7284
|
-
|
7285
|
-
|
7292
|
+
// eslint-disable-next-line class-methods-use-this
|
7293
|
+
isValidDataType(data) {
|
7294
|
+
const isValid = Array.isArray(data);
|
7295
|
+
if (!isValid) {
|
7296
|
+
// eslint-disable-next-line no-console
|
7297
|
+
console.error('data and default-values must be an array, received:', data);
|
7298
|
+
}
|
7286
7299
|
|
7287
|
-
|
7288
|
-
|
7289
|
-
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
7290
|
-
);
|
7300
|
+
return isValid;
|
7301
|
+
}
|
7291
7302
|
|
7292
|
-
|
7293
|
-
|
7303
|
+
getItemsTemplate() {
|
7304
|
+
return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
|
7305
|
+
}
|
7294
7306
|
|
7295
|
-
|
7296
|
-
|
7297
|
-
|
7298
|
-
|
7299
|
-
);
|
7307
|
+
renderItems() {
|
7308
|
+
const template = this.getItemsTemplate();
|
7309
|
+
if (template) this.innerHTML = template;
|
7310
|
+
}
|
7300
7311
|
|
7301
|
-
|
7312
|
+
handleSelectedItems() {
|
7313
|
+
const currentSelected =
|
7314
|
+
this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
|
7302
7315
|
|
7303
|
-
|
7304
|
-
};
|
7316
|
+
this.baseElement.selectedItems = [];
|
7305
7317
|
|
7306
|
-
|
7307
|
-
|
7308
|
-
|
7309
|
-
|
7310
|
-
const componentName = getComponentName(component);
|
7318
|
+
// if previously selected item ID exists in current children, set it as selected
|
7319
|
+
if (currentSelected.length > 0) {
|
7320
|
+
this.value = currentSelected;
|
7321
|
+
}
|
7311
7322
|
|
7312
|
-
|
7313
|
-
|
7314
|
-
|
7323
|
+
// otherwise, if default value is specified, set default value as selected item
|
7324
|
+
if (this.value.length === 0) {
|
7325
|
+
this.setDefaultValues();
|
7326
|
+
}
|
7315
7327
|
}
|
7316
7328
|
|
7317
|
-
//
|
7318
|
-
|
7319
|
-
|
7320
|
-
// we are generating a new theme
|
7321
|
-
let themeName = BASE_THEME_SECTION;
|
7322
|
-
|
7323
|
-
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
7324
|
-
themeName = restPath.shift();
|
7329
|
+
// eslint-disable-next-line class-methods-use-this
|
7330
|
+
customValueTransformFn(val) {
|
7331
|
+
return val;
|
7325
7332
|
}
|
7326
7333
|
|
7327
|
-
//
|
7328
|
-
//
|
7329
|
-
|
7330
|
-
|
7331
|
-
|
7332
|
-
|
7334
|
+
// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
|
7335
|
+
// field that it searches the value, and the finaly display value of the input.
|
7336
|
+
// We provide a custom transform function to override that behavior.
|
7337
|
+
setComboBoxDescriptor() {
|
7338
|
+
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
7339
|
+
this.inputElement.constructor.prototype,
|
7340
|
+
'value'
|
7341
|
+
);
|
7333
7342
|
|
7334
|
-
|
7335
|
-
// eslint-disable-next-line no-console
|
7336
|
-
console.error(
|
7337
|
-
'theme generator',
|
7338
|
-
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
7339
|
-
);
|
7340
|
-
return acc;
|
7341
|
-
}
|
7343
|
+
const comboBox = this;
|
7342
7344
|
|
7343
|
-
|
7344
|
-
|
7345
|
+
Object.defineProperties(this.inputElement, {
|
7346
|
+
value: {
|
7347
|
+
...valueDescriptor,
|
7348
|
+
set(val) {
|
7349
|
+
const transformedValue = comboBox.customValueTransformFn(val) || '';
|
7345
7350
|
|
7346
|
-
|
7351
|
+
if (transformedValue === this.value) {
|
7352
|
+
return;
|
7353
|
+
}
|
7347
7354
|
|
7348
|
-
|
7349
|
-
[componentName]: {
|
7350
|
-
[themeName]: {
|
7351
|
-
[selector]: {
|
7352
|
-
[property]: getCssVarValue(val),
|
7355
|
+
valueDescriptor.set.call(this, transformedValue);
|
7353
7356
|
},
|
7354
7357
|
},
|
7355
|
-
}
|
7356
|
-
}
|
7357
|
-
});
|
7358
|
-
|
7359
|
-
const componentsThemeToStyle = (componentsTheme) =>
|
7360
|
-
Object.entries(componentsTheme).reduce(
|
7361
|
-
(acc, [selector, vars]) =>
|
7362
|
-
`${acc}${selector} { \n${Object.entries(vars)
|
7363
|
-
.map(([key, val]) => `${key}: ${val}`)
|
7364
|
-
.join(';\n')} \n}\n\n`,
|
7365
|
-
''
|
7366
|
-
);
|
7358
|
+
});
|
7359
|
+
}
|
7367
7360
|
|
7368
|
-
|
7369
|
-
|
7361
|
+
// vaadin api is to set props on their combo box node,
|
7362
|
+
// in order to avoid it, we are passing the children of this component
|
7363
|
+
// to the items & renderer props, so it will be used as the combo box items
|
7364
|
+
#onChildrenChange() {
|
7365
|
+
const items = Array.from(this.children);
|
7370
7366
|
|
7371
|
-
|
7372
|
-
|
7367
|
+
// we want the data-name attribute to be accessible as an object attribute
|
7368
|
+
if (items.length) {
|
7369
|
+
this.removeAttribute('has-no-options');
|
7373
7370
|
|
7374
|
-
|
7375
|
-
|
7376
|
-
|
7377
|
-
|
7378
|
-
|
7379
|
-
|
7380
|
-
|
7381
|
-
|
7382
|
-
|
7371
|
+
items.forEach((node) => {
|
7372
|
+
Object.defineProperty(node, 'data-name', {
|
7373
|
+
value: node.getAttribute('data-name'),
|
7374
|
+
configurable: true,
|
7375
|
+
writable: true,
|
7376
|
+
});
|
7377
|
+
Object.defineProperty(node, 'data-id', {
|
7378
|
+
value: node.getAttribute('data-id'),
|
7379
|
+
configurable: true,
|
7380
|
+
writable: true,
|
7381
|
+
});
|
7382
|
+
});
|
7383
7383
|
|
7384
|
-
|
7385
|
-
globals: globalsThemeToStyle(globals, themeName),
|
7386
|
-
components: createComponentsTheme(components),
|
7387
|
-
});
|
7384
|
+
this.baseElement.items = items;
|
7388
7385
|
|
7389
|
-
|
7386
|
+
setTimeout(() => {
|
7387
|
+
// set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
|
7388
|
+
this.handleSelectedItems();
|
7389
|
+
}, 0);
|
7390
|
+
} else {
|
7391
|
+
this.baseElement.items = [];
|
7392
|
+
this.setAttribute('has-no-options', '');
|
7393
|
+
}
|
7390
7394
|
|
7391
|
-
|
7392
|
-
|
7393
|
-
|
7394
|
-
|
7395
|
-
|
7395
|
+
// use vaadin combobox custom renderer to render options as HTML
|
7396
|
+
// and not via default renderer, which renders only the data-name's value
|
7397
|
+
// in its own HTML template
|
7398
|
+
this.baseElement.renderer = (root, combo, model) => {
|
7399
|
+
// eslint-disable-next-line no-param-reassign
|
7400
|
+
root.innerHTML = model.item.outerHTML;
|
7401
|
+
};
|
7402
|
+
}
|
7396
7403
|
|
7397
|
-
|
7398
|
-
|
7404
|
+
// the default vaadin behavior is to attach the overlay to the body when opened
|
7405
|
+
// we do not want that because it's difficult to style the overlay in this way
|
7406
|
+
// so we override it to open inside the shadow DOM
|
7407
|
+
#overrideOverlaySettings() {
|
7408
|
+
const overlay = this.baseElement.shadowRoot
|
7409
|
+
.querySelector('vaadin-multi-select-combo-box-internal')
|
7410
|
+
.shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
|
7411
|
+
overlay._attachOverlay = () => {
|
7412
|
+
overlay.bringToFront();
|
7413
|
+
};
|
7414
|
+
overlay._detachOverlay = () => {};
|
7415
|
+
overlay._enterModalState = () => {};
|
7416
|
+
}
|
7399
7417
|
|
7400
|
-
|
7401
|
-
|
7418
|
+
#handleCustomValues() {
|
7419
|
+
if (this.allowCustomValue) {
|
7420
|
+
this.baseElement.addEventListener('custom-value-set', (e) => {
|
7421
|
+
const newItemHtml = this.#renderItem({
|
7422
|
+
label: e.detail,
|
7423
|
+
displayName: e.detail,
|
7424
|
+
value: e.detail,
|
7425
|
+
});
|
7426
|
+
this.innerHTML += newItemHtml;
|
7427
|
+
// The value needs to be set with a timeout because it needs to execute after
|
7428
|
+
// the custom value is added to items by the children change observer
|
7429
|
+
setTimeout(() => {
|
7430
|
+
this.value = [...this.value, e.detail];
|
7431
|
+
}, 0);
|
7432
|
+
});
|
7433
|
+
}
|
7434
|
+
}
|
7402
7435
|
|
7403
|
-
|
7404
|
-
|
7436
|
+
setGetValidity() {
|
7437
|
+
// eslint-disable-next-line func-names
|
7438
|
+
this.getValidity = function () {
|
7439
|
+
if (this.isRequired && !this.value.length) {
|
7440
|
+
return {
|
7441
|
+
valueMissing: true,
|
7442
|
+
};
|
7443
|
+
}
|
7444
|
+
// If the field is not required, no minimum selection can be set
|
7445
|
+
if (
|
7446
|
+
this.isRequired &&
|
7447
|
+
this.minItemsSelection &&
|
7448
|
+
this.value.length < this.minItemsSelection
|
7449
|
+
) {
|
7450
|
+
return {
|
7451
|
+
rangeUnderflow: true,
|
7452
|
+
};
|
7453
|
+
}
|
7454
|
+
if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
|
7455
|
+
return {
|
7456
|
+
rangeOverflow: true,
|
7457
|
+
};
|
7458
|
+
}
|
7459
|
+
return {};
|
7460
|
+
};
|
7461
|
+
}
|
7405
7462
|
|
7406
|
-
|
7407
|
-
|
7408
|
-
const genContrast = (c, percentage = 0.9) => {
|
7409
|
-
const isDark = c.isDark();
|
7410
|
-
return c
|
7411
|
-
.mix(Color(isDark ? 'white' : 'black'), percentage)
|
7412
|
-
.saturate(1)
|
7413
|
-
.hex();
|
7414
|
-
};
|
7463
|
+
init() {
|
7464
|
+
super.init?.();
|
7415
7465
|
|
7416
|
-
|
7417
|
-
const mainColor = new Color(color.main || color);
|
7466
|
+
this.setGetValidity();
|
7418
7467
|
|
7419
|
-
|
7420
|
-
main: mainColor.hex(),
|
7421
|
-
dark: color.dark || genDark(mainColor),
|
7422
|
-
light: color.light || genLight(mainColor),
|
7423
|
-
contrast: color.contrast || genContrast(mainColor),
|
7424
|
-
};
|
7425
|
-
};
|
7468
|
+
this.setComboBoxDescriptor();
|
7426
7469
|
|
7427
|
-
|
7428
|
-
return Object.keys(colors).reduce((acc, colorName) => {
|
7429
|
-
const currentColor = colors[colorName];
|
7470
|
+
this.#overrideOverlaySettings();
|
7430
7471
|
|
7431
|
-
|
7432
|
-
[colorName]: genColor(currentColor),
|
7433
|
-
});
|
7434
|
-
}, {});
|
7435
|
-
};
|
7472
|
+
this.#handleCustomValues();
|
7436
7473
|
|
7437
|
-
|
7474
|
+
this.renderItems();
|
7438
7475
|
|
7439
|
-
|
7440
|
-
surface: {
|
7441
|
-
main: 'lightgray',
|
7442
|
-
light: '#fff',
|
7443
|
-
dark: '#000',
|
7444
|
-
},
|
7445
|
-
primary: '#006af5',
|
7446
|
-
secondary: '#7D14EB',
|
7447
|
-
success: 'green',
|
7448
|
-
error: '#e21d12',
|
7449
|
-
});
|
7476
|
+
observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
|
7450
7477
|
|
7451
|
-
|
7452
|
-
font1: {
|
7453
|
-
family: [
|
7454
|
-
'Roboto',
|
7455
|
-
'ui-sans-serif',
|
7456
|
-
'system-ui',
|
7457
|
-
'-apple-system',
|
7458
|
-
'BlinkMacSystemFont',
|
7459
|
-
'Segoe UI',
|
7460
|
-
'Helvetica Neue',
|
7461
|
-
'Arial',
|
7462
|
-
'Noto Sans',
|
7463
|
-
'sans-serif',
|
7464
|
-
'Apple Color Emoji',
|
7465
|
-
'Segoe UI Emoji',
|
7466
|
-
'Segoe UI Symbol',
|
7467
|
-
'Noto Color Emoji',
|
7468
|
-
],
|
7469
|
-
label: 'Roboto',
|
7470
|
-
url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
|
7471
|
-
},
|
7472
|
-
font2: {
|
7473
|
-
family: [
|
7474
|
-
'ui-sans-serif',
|
7475
|
-
'system-ui',
|
7476
|
-
'-apple-system',
|
7477
|
-
'BlinkMacSystemFont',
|
7478
|
-
'Segoe UI',
|
7479
|
-
'Roboto',
|
7480
|
-
'Helvetica Neue',
|
7481
|
-
'Arial',
|
7482
|
-
'Noto Sans',
|
7483
|
-
'sans-serif',
|
7484
|
-
'Apple Color Emoji',
|
7485
|
-
'Segoe UI Emoji',
|
7486
|
-
'Segoe UI Symbol',
|
7487
|
-
'Noto Color Emoji',
|
7488
|
-
],
|
7489
|
-
label: 'Sans Serif',
|
7490
|
-
},
|
7491
|
-
};
|
7478
|
+
observeChildren(this, this.#onChildrenChange.bind(this));
|
7492
7479
|
|
7493
|
-
|
7480
|
+
// Note: we need to forward the `placeholder` because the vaadin component observes it and
|
7481
|
+
// tries to override it, causing us to lose the user set placeholder.
|
7482
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
|
7494
7483
|
|
7495
|
-
|
7496
|
-
|
7497
|
-
font: fontsRef.font1.family,
|
7498
|
-
weight: '900',
|
7499
|
-
size: '48px',
|
7500
|
-
},
|
7501
|
-
h2: {
|
7502
|
-
font: fontsRef.font1.family,
|
7503
|
-
weight: '800',
|
7504
|
-
size: '38px',
|
7505
|
-
},
|
7506
|
-
h3: {
|
7507
|
-
font: fontsRef.font1.family,
|
7508
|
-
weight: '600',
|
7509
|
-
size: '28px',
|
7510
|
-
},
|
7511
|
-
subtitle1: {
|
7512
|
-
font: fontsRef.font2.family,
|
7513
|
-
weight: '500',
|
7514
|
-
size: '22px',
|
7515
|
-
},
|
7516
|
-
subtitle2: {
|
7517
|
-
font: fontsRef.font2.family,
|
7518
|
-
weight: '400',
|
7519
|
-
size: '20px',
|
7520
|
-
},
|
7521
|
-
body1: {
|
7522
|
-
font: fontsRef.font1.family,
|
7523
|
-
weight: '400',
|
7524
|
-
size: '16px',
|
7525
|
-
},
|
7526
|
-
body2: {
|
7527
|
-
font: fontsRef.font1.family,
|
7528
|
-
weight: '400',
|
7529
|
-
size: '14px',
|
7530
|
-
},
|
7531
|
-
};
|
7484
|
+
this.setDefaultValues();
|
7485
|
+
}
|
7532
7486
|
|
7533
|
-
|
7534
|
-
|
7535
|
-
|
7536
|
-
md: '8px',
|
7537
|
-
lg: '16px',
|
7538
|
-
xl: '32px',
|
7539
|
-
};
|
7487
|
+
setDefaultValues() {
|
7488
|
+
this.value = this.defaultValues;
|
7489
|
+
}
|
7540
7490
|
|
7541
|
-
|
7542
|
-
|
7543
|
-
|
7544
|
-
md: '3px',
|
7545
|
-
lg: '4px',
|
7546
|
-
xl: '5px',
|
7547
|
-
};
|
7548
|
-
|
7549
|
-
const radius = {
|
7550
|
-
xs: '5px',
|
7551
|
-
sm: '10px',
|
7552
|
-
md: '15px',
|
7553
|
-
lg: '20px',
|
7554
|
-
xl: '25px',
|
7555
|
-
'2xl': '30px',
|
7556
|
-
'3xl': '35px',
|
7557
|
-
};
|
7558
|
-
|
7559
|
-
const shadow = {
|
7560
|
-
wide: {
|
7561
|
-
sm: '0 2px 3px -0.5px',
|
7562
|
-
md: '0 4px 6px -1px',
|
7563
|
-
lg: '0 10px 15px -3px',
|
7564
|
-
xl: '0 20px 25px -5px',
|
7565
|
-
'2xl': '0 25px 50px -12px',
|
7566
|
-
},
|
7567
|
-
narrow: {
|
7568
|
-
sm: '0 1px 2px -1px',
|
7569
|
-
md: '0 2px 4px -2px',
|
7570
|
-
lg: '0 4px 6px -4px',
|
7571
|
-
xl: '0 8px 10px -6px',
|
7572
|
-
'2xl': '0 16px 16px -8px',
|
7573
|
-
},
|
7574
|
-
};
|
7575
|
-
|
7576
|
-
const globals = {
|
7577
|
-
colors,
|
7578
|
-
typography,
|
7579
|
-
spacing,
|
7580
|
-
border,
|
7581
|
-
radius,
|
7582
|
-
shadow,
|
7583
|
-
fonts,
|
7584
|
-
direction,
|
7585
|
-
};
|
7586
|
-
const vars$w = getThemeVars(globals);
|
7587
|
-
|
7588
|
-
const globalRefs$i = getThemeRefs(globals);
|
7589
|
-
const compVars$4 = ButtonClass.cssVarList;
|
7590
|
-
|
7591
|
-
const mode = {
|
7592
|
-
primary: globalRefs$i.colors.primary,
|
7593
|
-
secondary: globalRefs$i.colors.secondary,
|
7594
|
-
success: globalRefs$i.colors.success,
|
7595
|
-
error: globalRefs$i.colors.error,
|
7596
|
-
surface: globalRefs$i.colors.surface,
|
7597
|
-
};
|
7598
|
-
|
7599
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
|
7600
|
-
|
7601
|
-
const button = {
|
7602
|
-
...helperTheme$3,
|
7603
|
-
|
7604
|
-
[compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
|
7605
|
-
|
7606
|
-
[compVars$4.cursor]: 'pointer',
|
7607
|
-
[compVars$4.hostHeight]: '3em',
|
7608
|
-
[compVars$4.hostWidth]: 'auto',
|
7609
|
-
[compVars$4.hostDirection]: globalRefs$i.direction,
|
7610
|
-
|
7611
|
-
[compVars$4.borderRadius]: globalRefs$i.radius.sm,
|
7612
|
-
[compVars$4.borderWidth]: globalRefs$i.border.xs,
|
7613
|
-
[compVars$4.borderStyle]: 'solid',
|
7614
|
-
[compVars$4.borderColor]: 'transparent',
|
7615
|
-
|
7616
|
-
[compVars$4.labelSpacing]: '0.25em',
|
7617
|
-
|
7618
|
-
[compVars$4.verticalPadding]: '1em',
|
7619
|
-
|
7620
|
-
[compVars$4.outlineWidth]: globals.border.sm,
|
7621
|
-
[compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
|
7622
|
-
[compVars$4.outlineStyle]: 'solid',
|
7623
|
-
[compVars$4.outlineColor]: 'transparent',
|
7491
|
+
set value(vals) {
|
7492
|
+
if (vals && vals.length > 0) {
|
7493
|
+
const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
|
7624
7494
|
|
7625
|
-
|
7626
|
-
|
7627
|
-
|
7628
|
-
|
7629
|
-
|
7630
|
-
|
7495
|
+
if (children?.length > 0) {
|
7496
|
+
this.baseElement.selectedItems = children;
|
7497
|
+
}
|
7498
|
+
} else {
|
7499
|
+
this.baseElement.selectedItems = [];
|
7500
|
+
}
|
7501
|
+
}
|
7631
7502
|
|
7632
|
-
|
7633
|
-
|
7634
|
-
|
7635
|
-
|
7636
|
-
},
|
7503
|
+
get value() {
|
7504
|
+
return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
|
7505
|
+
}
|
7506
|
+
};
|
7637
7507
|
|
7638
|
-
|
7639
|
-
|
7508
|
+
const {
|
7509
|
+
host,
|
7510
|
+
inputField,
|
7511
|
+
inputElement,
|
7512
|
+
placeholder,
|
7513
|
+
toggle,
|
7514
|
+
label,
|
7515
|
+
requiredIndicator,
|
7516
|
+
helperText,
|
7517
|
+
errorMessage,
|
7518
|
+
chip,
|
7519
|
+
chipLabel,
|
7520
|
+
overflowChipFirstBorder,
|
7521
|
+
overflowChipSecondBorder,
|
7522
|
+
} = {
|
7523
|
+
host: { selector: () => ':host' },
|
7524
|
+
inputField: { selector: '::part(input-field)' },
|
7525
|
+
inputElement: { selector: 'input' },
|
7526
|
+
placeholder: { selector: '> input:placeholder-shown' },
|
7527
|
+
toggle: { selector: '::part(toggle-button)' },
|
7528
|
+
label: { selector: '::part(label)' },
|
7529
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
7530
|
+
helperText: { selector: '::part(helper-text)' },
|
7531
|
+
errorMessage: { selector: '::part(error-message)' },
|
7532
|
+
chip: { selector: 'vaadin-multi-select-combo-box-chip' },
|
7533
|
+
chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
|
7534
|
+
overflowChipFirstBorder: {
|
7535
|
+
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
|
7640
7536
|
},
|
7641
|
-
|
7642
|
-
|
7643
|
-
[compVars$4.cursor]: 'wait',
|
7644
|
-
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7537
|
+
overflowChipSecondBorder: {
|
7538
|
+
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
|
7645
7539
|
},
|
7540
|
+
};
|
7646
7541
|
|
7647
|
-
|
7648
|
-
|
7649
|
-
|
7650
|
-
|
7651
|
-
|
7652
|
-
|
7542
|
+
const MultiSelectComboBoxClass = compose(
|
7543
|
+
createStyleMixin({
|
7544
|
+
mappings: {
|
7545
|
+
hostWidth: { ...host, property: 'width' },
|
7546
|
+
hostDirection: { ...host, property: 'direction' },
|
7547
|
+
// we apply font-size also on the host so we can set its width with em
|
7548
|
+
fontSize: [{}, host],
|
7549
|
+
chipFontSize: { ...chipLabel, property: 'font-size' },
|
7550
|
+
fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
|
7551
|
+
labelTextColor: [
|
7552
|
+
{ ...label, property: 'color' },
|
7553
|
+
{ ...requiredIndicator, property: 'color' },
|
7554
|
+
],
|
7555
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
7556
|
+
inputHeight: { ...inputField, property: 'min-height' },
|
7557
|
+
inputBackgroundColor: { ...inputField, property: 'background-color' },
|
7558
|
+
inputBorderColor: { ...inputField, property: 'border-color' },
|
7559
|
+
inputBorderWidth: { ...inputField, property: 'border-width' },
|
7560
|
+
inputBorderStyle: { ...inputField, property: 'border-style' },
|
7561
|
+
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
7562
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
7563
|
+
inputValueTextColor: { ...inputField, property: 'color' },
|
7564
|
+
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
7565
|
+
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
7566
|
+
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
7567
|
+
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
7568
|
+
inputDropdownButtonOffset: [
|
7569
|
+
{ ...toggle, property: 'margin-right' },
|
7570
|
+
{ ...toggle, property: 'margin-left' },
|
7571
|
+
],
|
7572
|
+
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
7573
|
+
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
7574
|
+
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
7575
|
+
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
7576
|
+
inputHorizontalPadding: [
|
7577
|
+
{ ...inputElement, property: 'padding-left' },
|
7578
|
+
{ ...inputElement, property: 'padding-right' },
|
7579
|
+
{ ...inputField, property: 'padding-inline-start' },
|
7580
|
+
],
|
7581
|
+
inputVerticalPadding: [
|
7582
|
+
{ ...inputField, property: 'padding-top' },
|
7583
|
+
{ ...inputField, property: 'padding-bottom' },
|
7584
|
+
],
|
7585
|
+
chipTextColor: { ...chipLabel, property: 'color' },
|
7586
|
+
chipBackgroundColor: [
|
7587
|
+
{ ...chip, property: 'background-color' },
|
7588
|
+
{ ...overflowChipFirstBorder, property: 'border-color' },
|
7589
|
+
{ ...overflowChipSecondBorder, property: 'border-color' },
|
7590
|
+
],
|
7653
7591
|
|
7654
|
-
|
7655
|
-
|
7656
|
-
|
7657
|
-
|
7658
|
-
|
7659
|
-
|
7660
|
-
_loading: {
|
7661
|
-
[compVars$4.backgroundColor]: helperRefs$3.main,
|
7662
|
-
},
|
7592
|
+
// we need to use the variables from the portal mixin
|
7593
|
+
// so we need to use an arrow function on the selector
|
7594
|
+
// for that to work, because ComboBox is not available
|
7595
|
+
// at this time.
|
7596
|
+
overlayBackground: {
|
7597
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
|
7663
7598
|
},
|
7664
|
-
|
7665
|
-
|
7599
|
+
overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
|
7600
|
+
overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
|
7601
|
+
overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
|
7602
|
+
overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
|
7603
|
+
overlayItemBoxShadow: {
|
7604
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
|
7666
7605
|
},
|
7667
|
-
|
7668
|
-
|
7669
|
-
outline: {
|
7670
|
-
[compVars$4.labelTextColor]: helperRefs$3.main,
|
7671
|
-
[compVars$4.borderColor]: 'currentColor',
|
7672
|
-
_hover: {
|
7673
|
-
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
7606
|
+
overlayItemPaddingInlineStart: {
|
7607
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
|
7674
7608
|
},
|
7675
|
-
|
7676
|
-
|
7609
|
+
overlayItemPaddingInlineEnd: {
|
7610
|
+
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
|
7677
7611
|
},
|
7678
7612
|
},
|
7679
|
-
|
7680
|
-
|
7681
|
-
|
7682
|
-
|
7683
|
-
|
7684
|
-
|
7613
|
+
}),
|
7614
|
+
draggableMixin,
|
7615
|
+
portalMixin({
|
7616
|
+
name: 'overlay',
|
7617
|
+
selector: 'vaadin-multi-select-combo-box-internal',
|
7618
|
+
mappings: {
|
7619
|
+
backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
|
7620
|
+
minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
7621
|
+
margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
7622
|
+
cursor: { selector: 'vaadin-multi-select-combo-box-item' },
|
7623
|
+
fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
|
7624
|
+
fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
|
7625
|
+
itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
|
7626
|
+
itemPaddingInlineStart: {
|
7627
|
+
selector: 'vaadin-multi-select-combo-box-item',
|
7628
|
+
property: 'padding-inline-start',
|
7685
7629
|
},
|
7686
|
-
|
7687
|
-
|
7630
|
+
itemPaddingInlineEnd: {
|
7631
|
+
selector: 'vaadin-multi-select-combo-box-item',
|
7632
|
+
property: 'padding-inline-end',
|
7688
7633
|
},
|
7689
7634
|
},
|
7690
|
-
|
7691
|
-
|
7692
|
-
|
7693
|
-
|
7694
|
-
},
|
7695
|
-
}
|
7696
|
-
|
7697
|
-
|
7698
|
-
|
7699
|
-
|
7700
|
-
|
7701
|
-
|
7702
|
-
|
7703
|
-
|
7704
|
-
|
7705
|
-
|
7706
|
-
|
7707
|
-
|
7708
|
-
|
7709
|
-
|
7710
|
-
|
7711
|
-
|
7712
|
-
{
|
7713
|
-
labelTextColor: globalRefs$h.colors.surface.contrast,
|
7714
|
-
valueTextColor: globalRefs$h.colors.surface.contrast,
|
7715
|
-
placeholderTextColor: globalRefs$h.colors.surface.main,
|
7716
|
-
requiredIndicator: "'*'",
|
7717
|
-
errorMessageTextColor: globalRefs$h.colors.error.main,
|
7718
|
-
|
7719
|
-
borderWidth: globalRefs$h.border.xs,
|
7720
|
-
borderRadius: globalRefs$h.radius.xs,
|
7721
|
-
borderColor: 'transparent',
|
7722
|
-
|
7723
|
-
outlineWidth: globalRefs$h.border.sm,
|
7724
|
-
outlineStyle: 'solid',
|
7725
|
-
outlineColor: 'transparent',
|
7726
|
-
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
7727
|
-
|
7728
|
-
minWidth: '10em',
|
7729
|
-
toggleButtonSize: '1.5em',
|
7730
|
-
inputHeight: '3em',
|
7731
|
-
horizontalPadding: '0.5em',
|
7732
|
-
verticalPadding: '0.5em',
|
7733
|
-
|
7734
|
-
backgroundColor: globalRefs$h.colors.surface.light,
|
7735
|
-
|
7736
|
-
fontFamily: globalRefs$h.fonts.font1.family,
|
7635
|
+
forward: {
|
7636
|
+
include: false,
|
7637
|
+
attributes: ['size'],
|
7638
|
+
},
|
7639
|
+
}),
|
7640
|
+
composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
|
7641
|
+
componentNameValidationMixin,
|
7642
|
+
multiSelectComboBoxMixin
|
7643
|
+
)(
|
7644
|
+
createProxy({
|
7645
|
+
slots: ['', 'prefix'],
|
7646
|
+
wrappedEleName: 'vaadin-multi-select-combo-box',
|
7647
|
+
style: () => `
|
7648
|
+
:host {
|
7649
|
+
display: inline-flex;
|
7650
|
+
box-sizing: border-box;
|
7651
|
+
-webkit-mask-image: none;
|
7652
|
+
}
|
7653
|
+
${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
|
7654
|
+
${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
|
7655
|
+
${resetInputPlaceholder('vaadin-multi-select-combo-box')}
|
7656
|
+
${resetInputCursor('vaadin-multi-select-combo-box')}
|
7737
7657
|
|
7738
|
-
|
7658
|
+
vaadin-multi-select-combo-box {
|
7659
|
+
padding: 0;
|
7660
|
+
width: 100%;
|
7661
|
+
}
|
7662
|
+
vaadin-multi-select-combo-box::before {
|
7663
|
+
height: initial;
|
7664
|
+
}
|
7665
|
+
vaadin-multi-select-combo-box [slot="input"] {
|
7666
|
+
-webkit-mask-image: none;
|
7667
|
+
min-height: 0;
|
7668
|
+
align-self: center;
|
7669
|
+
box-sizing: border-box;
|
7670
|
+
}
|
7739
7671
|
|
7740
|
-
|
7672
|
+
::part(input-field) {
|
7673
|
+
padding: 0;
|
7674
|
+
box-shadow: none;
|
7675
|
+
}
|
7676
|
+
${resetInputLabelPosition('vaadin-multi-select-combo-box')}
|
7677
|
+
:host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
|
7678
|
+
display: block;
|
7679
|
+
}
|
7741
7680
|
|
7742
|
-
|
7743
|
-
|
7744
|
-
|
7745
|
-
|
7746
|
-
|
7747
|
-
|
7681
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
|
7682
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
|
7683
|
+
left: -4px;
|
7684
|
+
right: -4px;
|
7685
|
+
border-left-width: 0;
|
7686
|
+
border-inline-start-style: solid;
|
7687
|
+
border-inline-start-width: 2px;
|
7688
|
+
}
|
7689
|
+
vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
|
7690
|
+
left: -8px;
|
7691
|
+
right: -8px;
|
7692
|
+
}
|
7748
7693
|
|
7749
|
-
|
7750
|
-
|
7751
|
-
}
|
7694
|
+
:host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
|
7695
|
+
display: none;
|
7696
|
+
}
|
7697
|
+
`,
|
7698
|
+
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
7699
|
+
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
7700
|
+
// and reset items to an empty array, and opening the list box with no items
|
7701
|
+
// to display.
|
7702
|
+
// Note: we exclude `placeholder` because the vaadin component observes it and
|
7703
|
+
// tries to override it, causing us to lose the user set placeholder.
|
7704
|
+
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
7705
|
+
componentName: componentName$4,
|
7706
|
+
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
7707
|
+
})
|
7708
|
+
);
|
7752
7709
|
|
7753
|
-
|
7754
|
-
outlineColor: globalRefs$h.colors.surface.main,
|
7755
|
-
_invalid: {
|
7756
|
-
outlineColor: globalRefs$h.colors.error.main,
|
7757
|
-
},
|
7758
|
-
},
|
7710
|
+
customElements.define(componentName$4, MultiSelectComboBoxClass);
|
7759
7711
|
|
7760
|
-
|
7761
|
-
outlineWidth: globalRefs$h.border.xs,
|
7762
|
-
borderColor: globalRefs$h.colors.surface.main,
|
7763
|
-
borderStyle: 'solid',
|
7764
|
-
_invalid: {
|
7765
|
-
borderColor: globalRefs$h.colors.error.main,
|
7766
|
-
},
|
7767
|
-
},
|
7712
|
+
const componentName$3 = getComponentName('badge');
|
7768
7713
|
|
7769
|
-
|
7770
|
-
|
7771
|
-
|
7772
|
-
valueTextColor: globalRefs$h.colors.surface.dark,
|
7773
|
-
placeholderTextColor: globalRefs$h.colors.surface.dark,
|
7774
|
-
backgroundColor: globalRefs$h.colors.surface.main,
|
7775
|
-
},
|
7776
|
-
},
|
7777
|
-
componentName$3
|
7778
|
-
);
|
7714
|
+
class RawBadge extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > div' }) {
|
7715
|
+
constructor() {
|
7716
|
+
super();
|
7779
7717
|
|
7780
|
-
|
7781
|
-
|
7782
|
-
|
7783
|
-
|
7784
|
-
|
7785
|
-
|
7718
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
7719
|
+
<style>
|
7720
|
+
:host {
|
7721
|
+
display: inline-flex;
|
7722
|
+
}
|
7723
|
+
:host > div {
|
7724
|
+
width: 100%;
|
7725
|
+
}
|
7726
|
+
</style>
|
7727
|
+
<div>
|
7728
|
+
<slot></slot>
|
7729
|
+
</div>
|
7730
|
+
`;
|
7731
|
+
}
|
7732
|
+
}
|
7786
7733
|
|
7787
|
-
const
|
7734
|
+
const BadgeClass = compose(
|
7735
|
+
createStyleMixin({
|
7736
|
+
mappings: {
|
7737
|
+
hostWidth: [{ selector: () => ':host', property: 'width' }],
|
7738
|
+
hostDirection: { property: 'direction' },
|
7788
7739
|
|
7789
|
-
|
7790
|
-
|
7791
|
-
|
7792
|
-
|
7793
|
-
|
7794
|
-
|
7795
|
-
[vars$t.labelTextColor]: refs.labelTextColor,
|
7796
|
-
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
7797
|
-
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
7798
|
-
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
7799
|
-
[vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
|
7800
|
-
[vars$t.inputBorderWidth]: refs.borderWidth,
|
7801
|
-
[vars$t.inputBorderStyle]: refs.borderStyle,
|
7802
|
-
[vars$t.inputBorderColor]: refs.borderColor,
|
7803
|
-
[vars$t.inputBorderRadius]: refs.borderRadius,
|
7804
|
-
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
7805
|
-
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
7806
|
-
[vars$t.inputOutlineColor]: refs.outlineColor,
|
7807
|
-
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
7808
|
-
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
7809
|
-
[vars$t.inputHeight]: refs.inputHeight,
|
7810
|
-
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
7811
|
-
};
|
7740
|
+
fontFamily: {},
|
7741
|
+
fontSize: {},
|
7742
|
+
fontWeight: {},
|
7743
|
+
textTransform: {},
|
7744
|
+
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
7745
|
+
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
7812
7746
|
|
7813
|
-
|
7814
|
-
|
7815
|
-
|
7816
|
-
|
7817
|
-
vars: vars$t
|
7818
|
-
});
|
7747
|
+
borderWidth: {},
|
7748
|
+
borderStyle: {},
|
7749
|
+
borderColor: {},
|
7750
|
+
borderRadius: {},
|
7819
7751
|
|
7820
|
-
|
7821
|
-
const vars$s = PasswordClass.cssVarList;
|
7752
|
+
backgroundColor: {},
|
7822
7753
|
|
7823
|
-
|
7824
|
-
|
7825
|
-
|
7826
|
-
|
7827
|
-
|
7828
|
-
|
7829
|
-
|
7830
|
-
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
7831
|
-
[vars$s.inputHeight]: refs.inputHeight,
|
7832
|
-
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
7833
|
-
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
7834
|
-
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
7835
|
-
[vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7836
|
-
[vars$s.inputBorderWidth]: refs.borderWidth,
|
7837
|
-
[vars$s.inputBorderStyle]: refs.borderStyle,
|
7838
|
-
[vars$s.inputBorderColor]: refs.borderColor,
|
7839
|
-
[vars$s.inputBorderRadius]: refs.borderRadius,
|
7840
|
-
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
7841
|
-
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
7842
|
-
[vars$s.inputOutlineColor]: refs.outlineColor,
|
7843
|
-
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
7844
|
-
[vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
|
7845
|
-
[vars$s.revealButtonSize]: refs.toggleButtonSize,
|
7846
|
-
};
|
7754
|
+
textColor: { property: 'color' },
|
7755
|
+
textAlign: {},
|
7756
|
+
},
|
7757
|
+
}),
|
7758
|
+
draggableMixin,
|
7759
|
+
componentNameValidationMixin
|
7760
|
+
)(RawBadge);
|
7847
7761
|
|
7848
|
-
|
7849
|
-
__proto__: null,
|
7850
|
-
default: password,
|
7851
|
-
vars: vars$s
|
7852
|
-
});
|
7762
|
+
customElements.define(componentName$3, BadgeClass);
|
7853
7763
|
|
7854
|
-
const
|
7764
|
+
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
7855
7765
|
|
7856
|
-
const
|
7857
|
-
[
|
7858
|
-
|
7859
|
-
|
7860
|
-
|
7861
|
-
|
7862
|
-
|
7863
|
-
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
7864
|
-
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
7865
|
-
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
7866
|
-
[vars$r.inputBorderWidth]: refs.borderWidth,
|
7867
|
-
[vars$r.inputBorderStyle]: refs.borderStyle,
|
7868
|
-
[vars$r.inputBorderColor]: refs.borderColor,
|
7869
|
-
[vars$r.inputBorderRadius]: refs.borderRadius,
|
7870
|
-
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
7871
|
-
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
7872
|
-
[vars$r.inputOutlineColor]: refs.outlineColor,
|
7873
|
-
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
7874
|
-
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
7875
|
-
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
7876
|
-
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
7877
|
-
[vars$r.inputHeight]: refs.inputHeight,
|
7766
|
+
const transformTheme = (theme, path, getTransformation) => {
|
7767
|
+
return Object.entries(theme).reduce((acc, [key, val]) => {
|
7768
|
+
if (val?.constructor !== Object) {
|
7769
|
+
return merge(acc, getTransformation(path.concat(key), val));
|
7770
|
+
}
|
7771
|
+
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
7772
|
+
}, {});
|
7878
7773
|
};
|
7879
7774
|
|
7880
|
-
|
7881
|
-
|
7882
|
-
default: numberField,
|
7883
|
-
vars: vars$r
|
7884
|
-
});
|
7885
|
-
|
7886
|
-
const vars$q = EmailFieldClass.cssVarList;
|
7775
|
+
const stringifyArray = (strArr) =>
|
7776
|
+
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
7887
7777
|
|
7888
|
-
const
|
7889
|
-
|
7890
|
-
|
7891
|
-
|
7892
|
-
|
7893
|
-
|
7894
|
-
|
7895
|
-
|
7896
|
-
|
7897
|
-
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
7898
|
-
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
7899
|
-
[vars$q.inputBorderWidth]: refs.borderWidth,
|
7900
|
-
[vars$q.inputBorderStyle]: refs.borderStyle,
|
7901
|
-
[vars$q.inputBorderColor]: refs.borderColor,
|
7902
|
-
[vars$q.inputBorderRadius]: refs.borderRadius,
|
7903
|
-
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
7904
|
-
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
7905
|
-
[vars$q.inputOutlineColor]: refs.outlineColor,
|
7906
|
-
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
7907
|
-
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
7908
|
-
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
7909
|
-
[vars$q.inputHeight]: refs.inputHeight,
|
7778
|
+
const getCssVarValue = (val) => {
|
7779
|
+
switch (true) {
|
7780
|
+
case Array.isArray(val):
|
7781
|
+
return stringifyArray(val);
|
7782
|
+
case isUrl(val):
|
7783
|
+
return `url(${val})`;
|
7784
|
+
default:
|
7785
|
+
return val;
|
7786
|
+
}
|
7910
7787
|
};
|
7911
7788
|
|
7912
|
-
|
7913
|
-
|
7914
|
-
|
7915
|
-
|
7916
|
-
});
|
7917
|
-
|
7918
|
-
const globalRefs$f = getThemeRefs(globals);
|
7919
|
-
const vars$p = TextAreaClass.cssVarList;
|
7789
|
+
const themeToCSSVarsObj = (theme) =>
|
7790
|
+
transformTheme(theme, [], (path, val) => ({
|
7791
|
+
[getVarName(path)]: getCssVarValue(val),
|
7792
|
+
}));
|
7920
7793
|
|
7921
|
-
const
|
7922
|
-
[
|
7923
|
-
|
7924
|
-
|
7925
|
-
[vars$p.fontSize]: refs.fontSize,
|
7926
|
-
[vars$p.fontFamily]: refs.fontFamily,
|
7927
|
-
[vars$p.labelTextColor]: refs.labelTextColor,
|
7928
|
-
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
7929
|
-
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
7930
|
-
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
7931
|
-
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
7932
|
-
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
7933
|
-
[vars$p.inputBorderRadius]: refs.borderRadius,
|
7934
|
-
[vars$p.inputBorderWidth]: refs.borderWidth,
|
7935
|
-
[vars$p.inputBorderStyle]: refs.borderStyle,
|
7936
|
-
[vars$p.inputBorderColor]: refs.borderColor,
|
7937
|
-
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
7938
|
-
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
7939
|
-
[vars$p.inputOutlineColor]: refs.outlineColor,
|
7940
|
-
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
7941
|
-
[vars$p.inputResizeType]: 'vertical',
|
7942
|
-
[vars$p.inputMinHeight]: '5em',
|
7794
|
+
const getThemeRefs = (theme, prefix) =>
|
7795
|
+
transformTheme(theme, [], (path) =>
|
7796
|
+
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
|
7797
|
+
);
|
7943
7798
|
|
7944
|
-
|
7945
|
-
|
7946
|
-
},
|
7799
|
+
const getThemeVars = (theme, prefix) =>
|
7800
|
+
transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
|
7947
7801
|
|
7948
|
-
|
7949
|
-
|
7950
|
-
|
7951
|
-
|
7802
|
+
const globalsThemeToStyle = (theme, themeName = '') => {
|
7803
|
+
const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
|
7804
|
+
(acc, entry) => `${acc}${entry.join(':')};\n`,
|
7805
|
+
''
|
7806
|
+
);
|
7952
7807
|
|
7953
|
-
|
7954
|
-
__proto__: null,
|
7955
|
-
default: textArea,
|
7956
|
-
vars: vars$p
|
7957
|
-
});
|
7808
|
+
if (!themeName) return style;
|
7958
7809
|
|
7959
|
-
|
7960
|
-
|
7810
|
+
return `*[data-theme="${themeName}"] {${style}}`;
|
7811
|
+
};
|
7961
7812
|
|
7962
|
-
const
|
7963
|
-
[
|
7964
|
-
|
7965
|
-
|
7966
|
-
|
7967
|
-
[vars$o.labelTextColor]: refs.labelTextColor,
|
7968
|
-
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
7969
|
-
[vars$o.labelFontWeight]: '400',
|
7970
|
-
[vars$o.labelLineHeight]: checkboxSize,
|
7971
|
-
[vars$o.labelSpacing]: '1em',
|
7972
|
-
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
7973
|
-
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
7974
|
-
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
7975
|
-
[vars$o.inputOutlineColor]: refs.outlineColor,
|
7976
|
-
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
7977
|
-
[vars$o.inputBorderRadius]: refs.borderRadius,
|
7978
|
-
[vars$o.inputBorderColor]: refs.borderColor,
|
7979
|
-
[vars$o.inputBorderWidth]: refs.borderWidth,
|
7980
|
-
[vars$o.inputBorderStyle]: refs.borderStyle,
|
7981
|
-
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
7982
|
-
[vars$o.inputSize]: checkboxSize,
|
7813
|
+
const componentsThemeToStyleObj = (componentsTheme) =>
|
7814
|
+
transformTheme(componentsTheme, [], (path, val) => {
|
7815
|
+
const [component, ...restPath] = path;
|
7816
|
+
const property = restPath.pop();
|
7817
|
+
const componentName = getComponentName(component);
|
7983
7818
|
|
7984
|
-
|
7985
|
-
|
7986
|
-
|
7819
|
+
if (property === 'undefined') {
|
7820
|
+
// eslint-disable-next-line no-console
|
7821
|
+
console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
|
7822
|
+
}
|
7987
7823
|
|
7988
|
-
|
7989
|
-
|
7990
|
-
|
7991
|
-
|
7824
|
+
// we need a support for portal components theme (e.g. overlay)
|
7825
|
+
// this allows us to generate those themes under different sections
|
7826
|
+
// if the theme has root level attribute that starts with #
|
7827
|
+
// we are generating a new theme
|
7828
|
+
let themeName = BASE_THEME_SECTION;
|
7992
7829
|
|
7993
|
-
|
7994
|
-
|
7995
|
-
|
7996
|
-
vars: vars$o
|
7997
|
-
});
|
7830
|
+
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
7831
|
+
themeName = restPath.shift();
|
7832
|
+
}
|
7998
7833
|
|
7999
|
-
|
8000
|
-
|
7834
|
+
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
7835
|
+
// starts with underscore -> attribute selector
|
7836
|
+
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
7837
|
+
if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
8001
7838
|
|
8002
|
-
const
|
8003
|
-
const vars$n = SwitchToggleClass.cssVarList;
|
7839
|
+
const nextSection = restPath[idx + 1];
|
8004
7840
|
|
8005
|
-
|
8006
|
-
|
8007
|
-
|
8008
|
-
|
8009
|
-
|
7841
|
+
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
7842
|
+
// eslint-disable-next-line no-console
|
7843
|
+
console.error(
|
7844
|
+
'theme generator',
|
7845
|
+
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
|
7846
|
+
);
|
7847
|
+
return acc;
|
7848
|
+
}
|
8010
7849
|
|
8011
|
-
|
8012
|
-
|
8013
|
-
[vars$n.inputOutlineColor]: refs.outlineColor,
|
8014
|
-
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
7850
|
+
return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
|
7851
|
+
}, '');
|
8015
7852
|
|
8016
|
-
|
8017
|
-
[vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
8018
|
-
[vars$n.trackBorderColor]: refs.borderColor,
|
8019
|
-
[vars$n.trackBackgroundColor]: 'none',
|
8020
|
-
[vars$n.trackBorderRadius]: globalRefs$e.radius.md,
|
8021
|
-
[vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
8022
|
-
[vars$n.trackHeight]: checkboxHeight,
|
7853
|
+
const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
|
8023
7854
|
|
8024
|
-
|
8025
|
-
|
8026
|
-
|
8027
|
-
|
8028
|
-
|
8029
|
-
|
7855
|
+
return {
|
7856
|
+
[componentName]: {
|
7857
|
+
[themeName]: {
|
7858
|
+
[selector]: {
|
7859
|
+
[property]: getCssVarValue(val),
|
7860
|
+
},
|
7861
|
+
},
|
7862
|
+
},
|
7863
|
+
};
|
7864
|
+
});
|
8030
7865
|
|
8031
|
-
|
8032
|
-
|
8033
|
-
|
8034
|
-
|
8035
|
-
|
8036
|
-
|
7866
|
+
const componentsThemeToStyle = (componentsTheme) =>
|
7867
|
+
Object.entries(componentsTheme).reduce(
|
7868
|
+
(acc, [selector, vars]) =>
|
7869
|
+
`${acc}${selector} { \n${Object.entries(vars)
|
7870
|
+
.map(([key, val]) => `${key}: ${val}`)
|
7871
|
+
.join(';\n')} \n}\n\n`,
|
7872
|
+
''
|
7873
|
+
);
|
8037
7874
|
|
8038
|
-
|
8039
|
-
|
8040
|
-
[vars$n.trackBackgroundColor]: refs.backgroundColor,
|
8041
|
-
[vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
|
8042
|
-
[vars$n.knobColor]: refs.valueTextColor,
|
8043
|
-
[vars$n.knobTextColor]: refs.valueTextColor,
|
8044
|
-
},
|
7875
|
+
const createComponentsTheme = (componentsTheme) => {
|
7876
|
+
const styleObj = componentsThemeToStyleObj(componentsTheme);
|
8045
7877
|
|
8046
|
-
|
8047
|
-
[
|
8048
|
-
[vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
|
8049
|
-
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8050
|
-
[vars$n.labelTextColor]: refs.labelTextColor,
|
8051
|
-
_checked: {
|
8052
|
-
[vars$n.knobColor]: globalRefs$e.colors.surface.light,
|
8053
|
-
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8054
|
-
},
|
8055
|
-
},
|
7878
|
+
return Object.keys(styleObj).reduce((acc, componentName) => {
|
7879
|
+
const componentThemes = styleObj[componentName];
|
8056
7880
|
|
8057
|
-
|
8058
|
-
|
8059
|
-
|
8060
|
-
|
7881
|
+
return Object.assign(acc, {
|
7882
|
+
[componentName]: Object.keys(componentThemes).reduce(
|
7883
|
+
(res, theme) =>
|
7884
|
+
Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
|
7885
|
+
{}
|
7886
|
+
),
|
7887
|
+
});
|
7888
|
+
}, {});
|
8061
7889
|
};
|
8062
7890
|
|
8063
|
-
|
8064
|
-
|
8065
|
-
|
8066
|
-
vars: vars$n
|
7891
|
+
const themeToStyle = ({ globals, components }, themeName) => ({
|
7892
|
+
globals: globalsThemeToStyle(globals, themeName),
|
7893
|
+
components: createComponentsTheme(components),
|
8067
7894
|
});
|
8068
7895
|
|
8069
|
-
const
|
7896
|
+
const useVar = (varName) => `var(${varName})`;
|
8070
7897
|
|
8071
|
-
const
|
7898
|
+
const createHelperVars = (theme, prefix) => {
|
7899
|
+
const res = transformTheme(theme, [], (path, value) => {
|
7900
|
+
const modifiedPath = [...path];
|
7901
|
+
const property = modifiedPath.splice(-1);
|
7902
|
+
const varName = getCssVarName(prefix, property);
|
8072
7903
|
|
8073
|
-
const
|
8074
|
-
|
8075
|
-
|
8076
|
-
|
7904
|
+
const vars = { [property]: varName };
|
7905
|
+
const useVars = { [property]: useVar(varName) };
|
7906
|
+
|
7907
|
+
return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
|
7908
|
+
});
|
7909
|
+
|
7910
|
+
return [res.theme, res.useVars, res.vars];
|
8077
7911
|
};
|
8078
7912
|
|
8079
|
-
const
|
8080
|
-
|
8081
|
-
|
8082
|
-
|
7913
|
+
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
7914
|
+
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
7915
|
+
const genContrast = (c, percentage = 0.9) => {
|
7916
|
+
const isDark = c.isDark();
|
7917
|
+
return c
|
7918
|
+
.mix(Color(isDark ? 'white' : 'black'), percentage)
|
7919
|
+
.saturate(1)
|
7920
|
+
.hex();
|
8083
7921
|
};
|
8084
7922
|
|
8085
|
-
const
|
8086
|
-
|
8087
|
-
verticalAlignment,
|
8088
|
-
horizontalAlignment,
|
8089
|
-
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
8090
|
-
},
|
8091
|
-
componentName$y
|
8092
|
-
);
|
7923
|
+
const genColor = (color) => {
|
7924
|
+
const mainColor = new Color(color.main || color);
|
8093
7925
|
|
8094
|
-
|
7926
|
+
return {
|
7927
|
+
main: mainColor.hex(),
|
7928
|
+
dark: color.dark || genDark(mainColor),
|
7929
|
+
light: color.light || genLight(mainColor),
|
7930
|
+
contrast: color.contrast || genContrast(mainColor),
|
7931
|
+
};
|
7932
|
+
};
|
8095
7933
|
|
8096
|
-
const
|
8097
|
-
|
7934
|
+
const genColors = (colors) => {
|
7935
|
+
return Object.keys(colors).reduce((acc, colorName) => {
|
7936
|
+
const currentColor = colors[colorName];
|
8098
7937
|
|
8099
|
-
|
8100
|
-
|
8101
|
-
|
8102
|
-
|
8103
|
-
|
7938
|
+
return Object.assign(acc, {
|
7939
|
+
[colorName]: genColor(currentColor),
|
7940
|
+
});
|
7941
|
+
}, {});
|
7942
|
+
};
|
8104
7943
|
|
8105
|
-
|
8106
|
-
|
8107
|
-
|
8108
|
-
|
7944
|
+
const direction = 'ltr';
|
7945
|
+
|
7946
|
+
const colors = genColors({
|
7947
|
+
surface: {
|
7948
|
+
main: 'lightgray',
|
7949
|
+
light: '#fff',
|
7950
|
+
dark: '#000',
|
7951
|
+
},
|
7952
|
+
primary: '#006af5',
|
7953
|
+
secondary: '#7D14EB',
|
7954
|
+
success: 'green',
|
7955
|
+
error: '#e21d12',
|
7956
|
+
});
|
7957
|
+
|
7958
|
+
const fonts = {
|
7959
|
+
font1: {
|
7960
|
+
family: [
|
7961
|
+
'Roboto',
|
7962
|
+
'ui-sans-serif',
|
7963
|
+
'system-ui',
|
7964
|
+
'-apple-system',
|
7965
|
+
'BlinkMacSystemFont',
|
7966
|
+
'Segoe UI',
|
7967
|
+
'Helvetica Neue',
|
7968
|
+
'Arial',
|
7969
|
+
'Noto Sans',
|
7970
|
+
'sans-serif',
|
7971
|
+
'Apple Color Emoji',
|
7972
|
+
'Segoe UI Emoji',
|
7973
|
+
'Segoe UI Symbol',
|
7974
|
+
'Noto Color Emoji',
|
7975
|
+
],
|
7976
|
+
label: 'Roboto',
|
7977
|
+
url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
|
7978
|
+
},
|
7979
|
+
font2: {
|
7980
|
+
family: [
|
7981
|
+
'ui-sans-serif',
|
7982
|
+
'system-ui',
|
7983
|
+
'-apple-system',
|
7984
|
+
'BlinkMacSystemFont',
|
7985
|
+
'Segoe UI',
|
7986
|
+
'Roboto',
|
7987
|
+
'Helvetica Neue',
|
7988
|
+
'Arial',
|
7989
|
+
'Noto Sans',
|
7990
|
+
'sans-serif',
|
7991
|
+
'Apple Color Emoji',
|
7992
|
+
'Segoe UI Emoji',
|
7993
|
+
'Segoe UI Symbol',
|
7994
|
+
'Noto Color Emoji',
|
7995
|
+
],
|
7996
|
+
label: 'Sans Serif',
|
7997
|
+
},
|
7998
|
+
};
|
7999
|
+
|
8000
|
+
const fontsRef = getThemeRefs({ fonts }).fonts;
|
8001
|
+
|
8002
|
+
const typography = {
|
8003
|
+
h1: {
|
8004
|
+
font: fontsRef.font1.family,
|
8005
|
+
weight: '900',
|
8006
|
+
size: '48px',
|
8007
|
+
},
|
8008
|
+
h2: {
|
8009
|
+
font: fontsRef.font1.family,
|
8010
|
+
weight: '800',
|
8011
|
+
size: '38px',
|
8109
8012
|
},
|
8110
|
-
|
8111
|
-
|
8112
|
-
|
8113
|
-
|
8114
|
-
lg: { [compVars$3.horizontalPadding]: '20px' },
|
8013
|
+
h3: {
|
8014
|
+
font: fontsRef.font1.family,
|
8015
|
+
weight: '600',
|
8016
|
+
size: '28px',
|
8115
8017
|
},
|
8116
|
-
|
8117
|
-
|
8118
|
-
|
8119
|
-
|
8120
|
-
[compVars$3.alignItems]: helperRefs$2.verticalAlignment,
|
8121
|
-
[compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
|
8122
|
-
[compVars$3.flexWrap]: 'wrap',
|
8123
|
-
horizontalAlignment: {
|
8124
|
-
spaceBetween: {
|
8125
|
-
[helperVars$2.horizontalAlignment]: 'space-between',
|
8126
|
-
},
|
8127
|
-
},
|
8128
|
-
},
|
8129
|
-
column: {
|
8130
|
-
[compVars$3.flexDirection]: 'column',
|
8131
|
-
[compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
|
8132
|
-
[compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
|
8133
|
-
verticalAlignment: {
|
8134
|
-
spaceBetween: {
|
8135
|
-
[helperVars$2.verticalAlignment]: 'space-between',
|
8136
|
-
},
|
8137
|
-
},
|
8138
|
-
},
|
8018
|
+
subtitle1: {
|
8019
|
+
font: fontsRef.font2.family,
|
8020
|
+
weight: '500',
|
8021
|
+
size: '22px',
|
8139
8022
|
},
|
8140
|
-
|
8141
|
-
|
8142
|
-
|
8143
|
-
|
8144
|
-
lg: { [compVars$3.gap]: '30px' },
|
8023
|
+
subtitle2: {
|
8024
|
+
font: fontsRef.font2.family,
|
8025
|
+
weight: '400',
|
8026
|
+
size: '20px',
|
8145
8027
|
},
|
8146
|
-
|
8147
|
-
|
8148
|
-
|
8149
|
-
|
8150
|
-
},
|
8151
|
-
md: {
|
8152
|
-
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
|
8153
|
-
},
|
8154
|
-
lg: {
|
8155
|
-
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
|
8156
|
-
},
|
8157
|
-
xl: {
|
8158
|
-
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
|
8159
|
-
},
|
8160
|
-
'2xl': {
|
8161
|
-
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
8162
|
-
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
|
8163
|
-
},
|
8028
|
+
body1: {
|
8029
|
+
font: fontsRef.font1.family,
|
8030
|
+
weight: '400',
|
8031
|
+
size: '16px',
|
8164
8032
|
},
|
8165
|
-
|
8166
|
-
|
8167
|
-
|
8168
|
-
|
8169
|
-
lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
|
8170
|
-
xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
|
8171
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
|
8172
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
|
8033
|
+
body2: {
|
8034
|
+
font: fontsRef.font1.family,
|
8035
|
+
weight: '400',
|
8036
|
+
size: '14px',
|
8173
8037
|
},
|
8174
8038
|
};
|
8175
8039
|
|
8176
|
-
const
|
8177
|
-
|
8178
|
-
|
8040
|
+
const spacing = {
|
8041
|
+
xs: '2px',
|
8042
|
+
sm: '4px',
|
8043
|
+
md: '8px',
|
8044
|
+
lg: '16px',
|
8045
|
+
xl: '32px',
|
8179
8046
|
};
|
8180
8047
|
|
8181
|
-
|
8182
|
-
|
8183
|
-
|
8184
|
-
|
8185
|
-
|
8048
|
+
const border = {
|
8049
|
+
xs: '1px',
|
8050
|
+
sm: '2px',
|
8051
|
+
md: '3px',
|
8052
|
+
lg: '4px',
|
8053
|
+
xl: '5px',
|
8054
|
+
};
|
8186
8055
|
|
8187
|
-
const
|
8056
|
+
const radius = {
|
8057
|
+
xs: '5px',
|
8058
|
+
sm: '10px',
|
8059
|
+
md: '15px',
|
8060
|
+
lg: '20px',
|
8061
|
+
xl: '25px',
|
8062
|
+
'2xl': '30px',
|
8063
|
+
'3xl': '35px',
|
8064
|
+
};
|
8188
8065
|
|
8189
|
-
const
|
8190
|
-
|
8066
|
+
const shadow = {
|
8067
|
+
wide: {
|
8068
|
+
sm: '0 2px 3px -0.5px',
|
8069
|
+
md: '0 4px 6px -1px',
|
8070
|
+
lg: '0 10px 15px -3px',
|
8071
|
+
xl: '0 20px 25px -5px',
|
8072
|
+
'2xl': '0 25px 50px -12px',
|
8073
|
+
},
|
8074
|
+
narrow: {
|
8075
|
+
sm: '0 1px 2px -1px',
|
8076
|
+
md: '0 2px 4px -2px',
|
8077
|
+
lg: '0 4px 6px -4px',
|
8078
|
+
xl: '0 8px 10px -6px',
|
8079
|
+
'2xl': '0 16px 16px -8px',
|
8080
|
+
},
|
8191
8081
|
};
|
8192
8082
|
|
8193
|
-
|
8194
|
-
|
8195
|
-
|
8196
|
-
|
8197
|
-
|
8083
|
+
const globals = {
|
8084
|
+
colors,
|
8085
|
+
typography,
|
8086
|
+
spacing,
|
8087
|
+
border,
|
8088
|
+
radius,
|
8089
|
+
shadow,
|
8090
|
+
fonts,
|
8091
|
+
direction,
|
8092
|
+
};
|
8093
|
+
const vars$w = getThemeVars(globals);
|
8198
8094
|
|
8199
|
-
const
|
8095
|
+
const globalRefs$i = getThemeRefs(globals);
|
8096
|
+
const compVars$4 = ButtonClass.cssVarList;
|
8200
8097
|
|
8201
|
-
const
|
8202
|
-
|
8098
|
+
const mode = {
|
8099
|
+
primary: globalRefs$i.colors.primary,
|
8100
|
+
secondary: globalRefs$i.colors.secondary,
|
8101
|
+
success: globalRefs$i.colors.success,
|
8102
|
+
error: globalRefs$i.colors.error,
|
8103
|
+
surface: globalRefs$i.colors.surface,
|
8203
8104
|
};
|
8204
8105
|
|
8205
|
-
|
8206
|
-
__proto__: null,
|
8207
|
-
default: logo,
|
8208
|
-
vars: vars$k
|
8209
|
-
});
|
8106
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
|
8210
8107
|
|
8211
|
-
const
|
8212
|
-
|
8108
|
+
const button = {
|
8109
|
+
...helperTheme$3,
|
8213
8110
|
|
8214
|
-
|
8215
|
-
[vars$j.hostDirection]: globalRefs$c.direction,
|
8216
|
-
[vars$j.textLineHeight]: '1.35em',
|
8217
|
-
[vars$j.textAlign]: 'left',
|
8218
|
-
[vars$j.textColor]: globalRefs$c.colors.surface.dark,
|
8219
|
-
variant: {
|
8220
|
-
h1: {
|
8221
|
-
[vars$j.fontSize]: globalRefs$c.typography.h1.size,
|
8222
|
-
[vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
|
8223
|
-
[vars$j.fontFamily]: globalRefs$c.typography.h1.font,
|
8224
|
-
},
|
8225
|
-
h2: {
|
8226
|
-
[vars$j.fontSize]: globalRefs$c.typography.h2.size,
|
8227
|
-
[vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
|
8228
|
-
[vars$j.fontFamily]: globalRefs$c.typography.h2.font,
|
8229
|
-
},
|
8230
|
-
h3: {
|
8231
|
-
[vars$j.fontSize]: globalRefs$c.typography.h3.size,
|
8232
|
-
[vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
|
8233
|
-
[vars$j.fontFamily]: globalRefs$c.typography.h3.font,
|
8234
|
-
},
|
8235
|
-
subtitle1: {
|
8236
|
-
[vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
|
8237
|
-
[vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
|
8238
|
-
[vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
|
8239
|
-
},
|
8240
|
-
subtitle2: {
|
8241
|
-
[vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
|
8242
|
-
[vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
|
8243
|
-
[vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
|
8244
|
-
},
|
8245
|
-
body1: {
|
8246
|
-
[vars$j.fontSize]: globalRefs$c.typography.body1.size,
|
8247
|
-
[vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
|
8248
|
-
[vars$j.fontFamily]: globalRefs$c.typography.body1.font,
|
8249
|
-
},
|
8250
|
-
body2: {
|
8251
|
-
[vars$j.fontSize]: globalRefs$c.typography.body2.size,
|
8252
|
-
[vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
|
8253
|
-
[vars$j.fontFamily]: globalRefs$c.typography.body2.font,
|
8254
|
-
},
|
8255
|
-
},
|
8111
|
+
[compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
|
8256
8112
|
|
8257
|
-
|
8258
|
-
|
8259
|
-
|
8260
|
-
|
8261
|
-
secondary: {
|
8262
|
-
[vars$j.textColor]: globalRefs$c.colors.secondary.main,
|
8263
|
-
},
|
8264
|
-
error: {
|
8265
|
-
[vars$j.textColor]: globalRefs$c.colors.error.main,
|
8266
|
-
},
|
8267
|
-
success: {
|
8268
|
-
[vars$j.textColor]: globalRefs$c.colors.success.main,
|
8269
|
-
},
|
8270
|
-
},
|
8113
|
+
[compVars$4.cursor]: 'pointer',
|
8114
|
+
[compVars$4.hostHeight]: '3em',
|
8115
|
+
[compVars$4.hostWidth]: 'auto',
|
8116
|
+
[compVars$4.hostDirection]: globalRefs$i.direction,
|
8271
8117
|
|
8272
|
-
|
8273
|
-
|
8274
|
-
|
8275
|
-
|
8118
|
+
[compVars$4.borderRadius]: globalRefs$i.radius.sm,
|
8119
|
+
[compVars$4.borderWidth]: globalRefs$i.border.xs,
|
8120
|
+
[compVars$4.borderStyle]: 'solid',
|
8121
|
+
[compVars$4.borderColor]: 'transparent',
|
8122
|
+
|
8123
|
+
[compVars$4.labelSpacing]: '0.25em',
|
8124
|
+
|
8125
|
+
[compVars$4.verticalPadding]: '1em',
|
8126
|
+
|
8127
|
+
[compVars$4.outlineWidth]: globals.border.sm,
|
8128
|
+
[compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
|
8129
|
+
[compVars$4.outlineStyle]: 'solid',
|
8130
|
+
[compVars$4.outlineColor]: 'transparent',
|
8131
|
+
|
8132
|
+
size: {
|
8133
|
+
xs: { [compVars$4.fontSize]: '12px' },
|
8134
|
+
sm: { [compVars$4.fontSize]: '14px' },
|
8135
|
+
md: { [compVars$4.fontSize]: '16px' },
|
8136
|
+
lg: { [compVars$4.fontSize]: '18px' },
|
8276
8137
|
},
|
8277
8138
|
|
8278
|
-
|
8279
|
-
[
|
8139
|
+
_square: {
|
8140
|
+
[compVars$4.hostHeight]: '3em',
|
8141
|
+
[compVars$4.hostWidth]: '3em',
|
8142
|
+
[compVars$4.verticalPadding]: '0',
|
8280
8143
|
},
|
8281
8144
|
|
8282
|
-
|
8283
|
-
[
|
8145
|
+
_fullWidth: {
|
8146
|
+
[compVars$4.hostWidth]: '100%',
|
8284
8147
|
},
|
8285
8148
|
|
8286
|
-
|
8287
|
-
[
|
8149
|
+
_loading: {
|
8150
|
+
[compVars$4.cursor]: 'wait',
|
8151
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8288
8152
|
},
|
8289
8153
|
|
8290
|
-
|
8291
|
-
[
|
8154
|
+
_disabled: {
|
8155
|
+
[helperVars$3.main]: globalRefs$i.colors.surface.main,
|
8156
|
+
[helperVars$3.dark]: globalRefs$i.colors.surface.dark,
|
8157
|
+
[helperVars$3.light]: globalRefs$i.colors.surface.light,
|
8158
|
+
[helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
|
8292
8159
|
},
|
8293
|
-
};
|
8294
|
-
|
8295
|
-
var text$1 = /*#__PURE__*/Object.freeze({
|
8296
|
-
__proto__: null,
|
8297
|
-
default: text,
|
8298
|
-
vars: vars$j
|
8299
|
-
});
|
8300
8160
|
|
8301
|
-
|
8302
|
-
|
8303
|
-
|
8304
|
-
|
8305
|
-
|
8306
|
-
|
8161
|
+
variant: {
|
8162
|
+
contained: {
|
8163
|
+
[compVars$4.labelTextColor]: helperRefs$3.contrast,
|
8164
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
8165
|
+
_hover: {
|
8166
|
+
[compVars$4.backgroundColor]: helperRefs$3.dark,
|
8167
|
+
_loading: {
|
8168
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
8169
|
+
},
|
8170
|
+
},
|
8171
|
+
_active: {
|
8172
|
+
[compVars$4.backgroundColor]: helperRefs$3.main,
|
8173
|
+
},
|
8174
|
+
},
|
8307
8175
|
|
8308
|
-
|
8176
|
+
outline: {
|
8177
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8178
|
+
[compVars$4.borderColor]: 'currentColor',
|
8179
|
+
_hover: {
|
8180
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
8181
|
+
},
|
8182
|
+
_active: {
|
8183
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8184
|
+
},
|
8185
|
+
},
|
8309
8186
|
|
8310
|
-
|
8311
|
-
|
8312
|
-
|
8313
|
-
|
8187
|
+
link: {
|
8188
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
8189
|
+
_hover: {
|
8190
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
8191
|
+
[compVars$4.labelTextDecoration]: 'underline',
|
8192
|
+
},
|
8193
|
+
_active: {
|
8194
|
+
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
8195
|
+
},
|
8196
|
+
},
|
8314
8197
|
},
|
8315
8198
|
|
8316
|
-
|
8317
|
-
[
|
8199
|
+
_focused: {
|
8200
|
+
[compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
|
8318
8201
|
},
|
8202
|
+
};
|
8319
8203
|
|
8320
|
-
|
8321
|
-
|
8322
|
-
|
8323
|
-
},
|
8324
|
-
secondary: {
|
8325
|
-
[vars$i.textColor]: globalRefs$b.colors.secondary.main,
|
8326
|
-
},
|
8327
|
-
error: {
|
8328
|
-
[vars$i.textColor]: globalRefs$b.colors.error.main,
|
8329
|
-
},
|
8330
|
-
success: {
|
8331
|
-
[vars$i.textColor]: globalRefs$b.colors.success.main,
|
8332
|
-
},
|
8333
|
-
},
|
8204
|
+
const vars$v = {
|
8205
|
+
...compVars$4,
|
8206
|
+
...helperVars$3,
|
8334
8207
|
};
|
8335
8208
|
|
8336
|
-
var
|
8209
|
+
var button$1 = /*#__PURE__*/Object.freeze({
|
8337
8210
|
__proto__: null,
|
8338
|
-
default:
|
8339
|
-
vars: vars$
|
8211
|
+
default: button,
|
8212
|
+
vars: vars$v
|
8340
8213
|
});
|
8341
8214
|
|
8342
|
-
const
|
8343
|
-
const
|
8215
|
+
const componentName$2 = getComponentName('input-wrapper');
|
8216
|
+
const globalRefs$h = getThemeRefs(globals);
|
8344
8217
|
|
8345
|
-
const [
|
8218
|
+
const [theme$1, refs, vars$u] = createHelperVars(
|
8346
8219
|
{
|
8347
|
-
|
8348
|
-
|
8349
|
-
|
8350
|
-
|
8351
|
-
|
8220
|
+
labelTextColor: globalRefs$h.colors.surface.contrast,
|
8221
|
+
valueTextColor: globalRefs$h.colors.surface.contrast,
|
8222
|
+
placeholderTextColor: globalRefs$h.colors.surface.main,
|
8223
|
+
requiredIndicator: "'*'",
|
8224
|
+
errorMessageTextColor: globalRefs$h.colors.error.main,
|
8352
8225
|
|
8353
|
-
|
8354
|
-
|
8226
|
+
borderWidth: globalRefs$h.border.xs,
|
8227
|
+
borderRadius: globalRefs$h.radius.xs,
|
8228
|
+
borderColor: 'transparent',
|
8355
8229
|
|
8356
|
-
|
8357
|
-
|
8358
|
-
|
8359
|
-
|
8360
|
-
[compVars$2.hostWidth]: '100%',
|
8361
|
-
[compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
|
8362
|
-
[compVars$2.stripeColorOpacity]: '0.5',
|
8363
|
-
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8364
|
-
[compVars$2.labelTextWidth]: 'fit-content',
|
8365
|
-
[compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
|
8366
|
-
[compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
8367
|
-
[compVars$2.textAlign]: 'center',
|
8230
|
+
outlineWidth: globalRefs$h.border.sm,
|
8231
|
+
outlineStyle: 'solid',
|
8232
|
+
outlineColor: 'transparent',
|
8233
|
+
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
8368
8234
|
|
8369
|
-
|
8370
|
-
|
8371
|
-
|
8372
|
-
|
8373
|
-
|
8374
|
-
[compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
|
8375
|
-
[compVars$2.labelTextWidth]: 'fit-content',
|
8376
|
-
[compVars$2.labelTextMaxWidth]: '100%',
|
8377
|
-
[compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
8378
|
-
},
|
8379
|
-
};
|
8235
|
+
minWidth: '10em',
|
8236
|
+
toggleButtonSize: '1.5em',
|
8237
|
+
inputHeight: '3em',
|
8238
|
+
horizontalPadding: '0.5em',
|
8239
|
+
verticalPadding: '0.5em',
|
8380
8240
|
|
8381
|
-
|
8382
|
-
...compVars$2,
|
8383
|
-
...helperVars$1,
|
8384
|
-
};
|
8241
|
+
backgroundColor: globalRefs$h.colors.surface.light,
|
8385
8242
|
|
8386
|
-
|
8387
|
-
__proto__: null,
|
8388
|
-
default: divider,
|
8389
|
-
vars: vars$h
|
8390
|
-
});
|
8243
|
+
fontFamily: globalRefs$h.fonts.font1.family,
|
8391
8244
|
|
8392
|
-
|
8245
|
+
direction: globalRefs$h.direction,
|
8393
8246
|
|
8394
|
-
|
8395
|
-
[vars$g.hostDirection]: refs.direction,
|
8396
|
-
[vars$g.fontFamily]: refs.fontFamily,
|
8397
|
-
[vars$g.fontSize]: refs.fontSize,
|
8398
|
-
[vars$g.labelTextColor]: refs.labelTextColor,
|
8399
|
-
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
8400
|
-
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
8401
|
-
[vars$g.digitValueTextColor]: refs.valueTextColor,
|
8402
|
-
[vars$g.digitPadding]: '0',
|
8403
|
-
[vars$g.digitTextAlign]: 'center',
|
8404
|
-
[vars$g.digitSpacing]: '4px',
|
8405
|
-
[vars$g.hostWidth]: refs.width,
|
8406
|
-
[vars$g.digitOutlineColor]: 'transparent',
|
8407
|
-
[vars$g.digitOutlineWidth]: refs.outlineWidth,
|
8408
|
-
[vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8409
|
-
[vars$g.digitSize]: refs.inputHeight,
|
8247
|
+
overlayOpacity: '0.3',
|
8410
8248
|
|
8411
|
-
|
8412
|
-
|
8413
|
-
|
8414
|
-
|
8415
|
-
|
8416
|
-
|
8249
|
+
size: {
|
8250
|
+
xs: { fontSize: '12px', chipFontSize: '10px' },
|
8251
|
+
sm: { fontSize: '14px', chipFontSize: '12px' },
|
8252
|
+
md: { fontSize: '16px', chipFontSize: '14px' },
|
8253
|
+
lg: { fontSize: '18px', chipFontSize: '16px' },
|
8254
|
+
},
|
8417
8255
|
|
8418
|
-
|
8419
|
-
|
8420
|
-
|
8256
|
+
_fullWidth: {
|
8257
|
+
width: '100%',
|
8258
|
+
},
|
8421
8259
|
|
8422
|
-
|
8423
|
-
|
8260
|
+
_focused: {
|
8261
|
+
outlineColor: globalRefs$h.colors.surface.main,
|
8262
|
+
_invalid: {
|
8263
|
+
outlineColor: globalRefs$h.colors.error.main,
|
8264
|
+
},
|
8265
|
+
},
|
8266
|
+
|
8267
|
+
_bordered: {
|
8268
|
+
outlineWidth: globalRefs$h.border.xs,
|
8269
|
+
borderColor: globalRefs$h.colors.surface.main,
|
8270
|
+
borderStyle: 'solid',
|
8271
|
+
_invalid: {
|
8272
|
+
borderColor: globalRefs$h.colors.error.main,
|
8273
|
+
},
|
8274
|
+
},
|
8275
|
+
|
8276
|
+
_disabled: {
|
8277
|
+
labelTextColor: globalRefs$h.colors.surface.main,
|
8278
|
+
borderColor: globalRefs$h.colors.surface.main,
|
8279
|
+
valueTextColor: globalRefs$h.colors.surface.dark,
|
8280
|
+
placeholderTextColor: globalRefs$h.colors.surface.dark,
|
8281
|
+
backgroundColor: globalRefs$h.colors.surface.main,
|
8282
|
+
},
|
8424
8283
|
},
|
8284
|
+
componentName$2
|
8285
|
+
);
|
8286
|
+
|
8287
|
+
var inputWrapper = /*#__PURE__*/Object.freeze({
|
8288
|
+
__proto__: null,
|
8289
|
+
default: theme$1,
|
8290
|
+
refs: refs,
|
8291
|
+
vars: vars$u
|
8292
|
+
});
|
8293
|
+
|
8294
|
+
const vars$t = TextFieldClass.cssVarList;
|
8295
|
+
|
8296
|
+
const textField = {
|
8297
|
+
[vars$t.hostWidth]: refs.width,
|
8298
|
+
[vars$t.hostMinWidth]: refs.minWidth,
|
8299
|
+
[vars$t.hostDirection]: refs.direction,
|
8300
|
+
[vars$t.fontSize]: refs.fontSize,
|
8301
|
+
[vars$t.fontFamily]: refs.fontFamily,
|
8302
|
+
[vars$t.labelTextColor]: refs.labelTextColor,
|
8303
|
+
[vars$t.labelRequiredIndicator]: refs.requiredIndicator,
|
8304
|
+
[vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
|
8305
|
+
[vars$t.inputValueTextColor]: refs.valueTextColor,
|
8306
|
+
[vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
|
8307
|
+
[vars$t.inputBorderWidth]: refs.borderWidth,
|
8308
|
+
[vars$t.inputBorderStyle]: refs.borderStyle,
|
8309
|
+
[vars$t.inputBorderColor]: refs.borderColor,
|
8310
|
+
[vars$t.inputBorderRadius]: refs.borderRadius,
|
8311
|
+
[vars$t.inputOutlineWidth]: refs.outlineWidth,
|
8312
|
+
[vars$t.inputOutlineStyle]: refs.outlineStyle,
|
8313
|
+
[vars$t.inputOutlineColor]: refs.outlineColor,
|
8314
|
+
[vars$t.inputOutlineOffset]: refs.outlineOffset,
|
8315
|
+
[vars$t.inputBackgroundColor]: refs.backgroundColor,
|
8316
|
+
[vars$t.inputHeight]: refs.inputHeight,
|
8317
|
+
[vars$t.inputHorizontalPadding]: refs.horizontalPadding,
|
8425
8318
|
};
|
8426
8319
|
|
8427
|
-
var
|
8320
|
+
var textField$1 = /*#__PURE__*/Object.freeze({
|
8428
8321
|
__proto__: null,
|
8429
|
-
default:
|
8430
|
-
|
8322
|
+
default: textField,
|
8323
|
+
textField: textField,
|
8324
|
+
vars: vars$t
|
8431
8325
|
});
|
8432
8326
|
|
8433
|
-
const globalRefs$
|
8434
|
-
const vars$
|
8327
|
+
const globalRefs$g = getThemeRefs(globals);
|
8328
|
+
const vars$s = PasswordClass.cssVarList;
|
8435
8329
|
|
8436
|
-
const
|
8437
|
-
[vars$
|
8438
|
-
[vars$
|
8330
|
+
const password = {
|
8331
|
+
[vars$s.hostWidth]: refs.width,
|
8332
|
+
[vars$s.hostDirection]: refs.direction,
|
8333
|
+
[vars$s.fontSize]: refs.fontSize,
|
8334
|
+
[vars$s.fontFamily]: refs.fontFamily,
|
8335
|
+
[vars$s.labelTextColor]: refs.labelTextColor,
|
8336
|
+
[vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
|
8337
|
+
[vars$s.inputHorizontalPadding]: refs.horizontalPadding,
|
8338
|
+
[vars$s.inputHeight]: refs.inputHeight,
|
8339
|
+
[vars$s.inputBackgroundColor]: refs.backgroundColor,
|
8340
|
+
[vars$s.labelRequiredIndicator]: refs.requiredIndicator,
|
8341
|
+
[vars$s.inputValueTextColor]: refs.valueTextColor,
|
8342
|
+
[vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8343
|
+
[vars$s.inputBorderWidth]: refs.borderWidth,
|
8344
|
+
[vars$s.inputBorderStyle]: refs.borderStyle,
|
8345
|
+
[vars$s.inputBorderColor]: refs.borderColor,
|
8346
|
+
[vars$s.inputBorderRadius]: refs.borderRadius,
|
8347
|
+
[vars$s.inputOutlineWidth]: refs.outlineWidth,
|
8348
|
+
[vars$s.inputOutlineStyle]: refs.outlineStyle,
|
8349
|
+
[vars$s.inputOutlineColor]: refs.outlineColor,
|
8350
|
+
[vars$s.inputOutlineOffset]: refs.outlineOffset,
|
8351
|
+
[vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
|
8352
|
+
[vars$s.revealButtonSize]: refs.toggleButtonSize,
|
8353
|
+
};
|
8439
8354
|
|
8440
|
-
|
8441
|
-
|
8355
|
+
var password$1 = /*#__PURE__*/Object.freeze({
|
8356
|
+
__proto__: null,
|
8357
|
+
default: password,
|
8358
|
+
vars: vars$s
|
8359
|
+
});
|
8442
8360
|
|
8443
|
-
|
8444
|
-
[vars$f.barBorderRadius]: '4px',
|
8361
|
+
const vars$r = NumberFieldClass.cssVarList;
|
8445
8362
|
|
8446
|
-
|
8447
|
-
[vars$
|
8448
|
-
[vars$
|
8449
|
-
[vars$
|
8363
|
+
const numberField = {
|
8364
|
+
[vars$r.hostWidth]: refs.width,
|
8365
|
+
[vars$r.hostMinWidth]: refs.minWidth,
|
8366
|
+
[vars$r.hostDirection]: refs.direction,
|
8367
|
+
[vars$r.fontSize]: refs.fontSize,
|
8368
|
+
[vars$r.fontFamily]: refs.fontFamily,
|
8369
|
+
[vars$r.labelTextColor]: refs.labelTextColor,
|
8370
|
+
[vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
|
8371
|
+
[vars$r.inputValueTextColor]: refs.valueTextColor,
|
8372
|
+
[vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
|
8373
|
+
[vars$r.inputBorderWidth]: refs.borderWidth,
|
8374
|
+
[vars$r.inputBorderStyle]: refs.borderStyle,
|
8375
|
+
[vars$r.inputBorderColor]: refs.borderColor,
|
8376
|
+
[vars$r.inputBorderRadius]: refs.borderRadius,
|
8377
|
+
[vars$r.inputOutlineWidth]: refs.outlineWidth,
|
8378
|
+
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
8379
|
+
[vars$r.inputOutlineColor]: refs.outlineColor,
|
8380
|
+
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
8381
|
+
[vars$r.inputBackgroundColor]: refs.backgroundColor,
|
8382
|
+
[vars$r.labelRequiredIndicator]: refs.requiredIndicator,
|
8383
|
+
[vars$r.inputHorizontalPadding]: refs.horizontalPadding,
|
8384
|
+
[vars$r.inputHeight]: refs.inputHeight,
|
8385
|
+
};
|
8450
8386
|
|
8451
|
-
|
8452
|
-
|
8453
|
-
|
8454
|
-
|
8455
|
-
|
8456
|
-
},
|
8387
|
+
var numberField$1 = /*#__PURE__*/Object.freeze({
|
8388
|
+
__proto__: null,
|
8389
|
+
default: numberField,
|
8390
|
+
vars: vars$r
|
8391
|
+
});
|
8457
8392
|
|
8458
|
-
|
8459
|
-
primary: {
|
8460
|
-
[vars$f.barColor]: globalRefs$9.colors.primary.main,
|
8461
|
-
},
|
8462
|
-
secondary: {
|
8463
|
-
[vars$f.barColor]: globalRefs$9.colors.secondary.main,
|
8464
|
-
},
|
8465
|
-
},
|
8393
|
+
const vars$q = EmailFieldClass.cssVarList;
|
8466
8394
|
|
8467
|
-
|
8468
|
-
|
8469
|
-
|
8395
|
+
const emailField = {
|
8396
|
+
[vars$q.hostWidth]: refs.width,
|
8397
|
+
[vars$q.hostMinWidth]: refs.minWidth,
|
8398
|
+
[vars$q.hostDirection]: refs.direction,
|
8399
|
+
[vars$q.fontSize]: refs.fontSize,
|
8400
|
+
[vars$q.fontFamily]: refs.fontFamily,
|
8401
|
+
[vars$q.labelTextColor]: refs.labelTextColor,
|
8402
|
+
[vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
|
8403
|
+
[vars$q.inputValueTextColor]: refs.valueTextColor,
|
8404
|
+
[vars$q.labelRequiredIndicator]: refs.requiredIndicator,
|
8405
|
+
[vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
|
8406
|
+
[vars$q.inputBorderWidth]: refs.borderWidth,
|
8407
|
+
[vars$q.inputBorderStyle]: refs.borderStyle,
|
8408
|
+
[vars$q.inputBorderColor]: refs.borderColor,
|
8409
|
+
[vars$q.inputBorderRadius]: refs.borderRadius,
|
8410
|
+
[vars$q.inputOutlineWidth]: refs.outlineWidth,
|
8411
|
+
[vars$q.inputOutlineStyle]: refs.outlineStyle,
|
8412
|
+
[vars$q.inputOutlineColor]: refs.outlineColor,
|
8413
|
+
[vars$q.inputOutlineOffset]: refs.outlineOffset,
|
8414
|
+
[vars$q.inputBackgroundColor]: refs.backgroundColor,
|
8415
|
+
[vars$q.inputHorizontalPadding]: refs.horizontalPadding,
|
8416
|
+
[vars$q.inputHeight]: refs.inputHeight,
|
8470
8417
|
};
|
8471
8418
|
|
8472
|
-
var
|
8419
|
+
var emailField$1 = /*#__PURE__*/Object.freeze({
|
8473
8420
|
__proto__: null,
|
8474
|
-
default:
|
8475
|
-
vars: vars$
|
8421
|
+
default: emailField,
|
8422
|
+
vars: vars$q
|
8476
8423
|
});
|
8477
8424
|
|
8478
|
-
const globalRefs$
|
8479
|
-
const
|
8480
|
-
|
8481
|
-
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8482
|
-
{
|
8483
|
-
spinnerColor: globalRefs$8.colors.surface.contrast,
|
8484
|
-
mode: {
|
8485
|
-
primary: {
|
8486
|
-
spinnerColor: globalRefs$8.colors.primary.main,
|
8487
|
-
},
|
8488
|
-
secondary: {
|
8489
|
-
spinnerColor: globalRefs$8.colors.secondary.main,
|
8490
|
-
},
|
8491
|
-
},
|
8492
|
-
},
|
8493
|
-
componentName$z
|
8494
|
-
);
|
8495
|
-
|
8496
|
-
const loaderRadial = {
|
8497
|
-
...helperTheme,
|
8425
|
+
const globalRefs$f = getThemeRefs(globals);
|
8426
|
+
const vars$p = TextAreaClass.cssVarList;
|
8498
8427
|
|
8499
|
-
|
8500
|
-
[
|
8501
|
-
[
|
8502
|
-
[
|
8503
|
-
[
|
8504
|
-
[
|
8505
|
-
[
|
8506
|
-
[
|
8507
|
-
[
|
8508
|
-
[
|
8428
|
+
const textArea = {
|
8429
|
+
[vars$p.hostWidth]: refs.width,
|
8430
|
+
[vars$p.hostMinWidth]: refs.minWidth,
|
8431
|
+
[vars$p.hostDirection]: refs.direction,
|
8432
|
+
[vars$p.fontSize]: refs.fontSize,
|
8433
|
+
[vars$p.fontFamily]: refs.fontFamily,
|
8434
|
+
[vars$p.labelTextColor]: refs.labelTextColor,
|
8435
|
+
[vars$p.labelRequiredIndicator]: refs.requiredIndicator,
|
8436
|
+
[vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
|
8437
|
+
[vars$p.inputBackgroundColor]: refs.backgroundColor,
|
8438
|
+
[vars$p.inputValueTextColor]: refs.valueTextColor,
|
8439
|
+
[vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8440
|
+
[vars$p.inputBorderRadius]: refs.borderRadius,
|
8441
|
+
[vars$p.inputBorderWidth]: refs.borderWidth,
|
8442
|
+
[vars$p.inputBorderStyle]: refs.borderStyle,
|
8443
|
+
[vars$p.inputBorderColor]: refs.borderColor,
|
8444
|
+
[vars$p.inputOutlineWidth]: refs.outlineWidth,
|
8445
|
+
[vars$p.inputOutlineStyle]: refs.outlineStyle,
|
8446
|
+
[vars$p.inputOutlineColor]: refs.outlineColor,
|
8447
|
+
[vars$p.inputOutlineOffset]: refs.outlineOffset,
|
8448
|
+
[vars$p.inputResizeType]: 'vertical',
|
8449
|
+
[vars$p.inputMinHeight]: '5em',
|
8509
8450
|
|
8510
|
-
|
8511
|
-
|
8512
|
-
sm: { [compVars$1.spinnerSize]: '30px' },
|
8513
|
-
md: { [compVars$1.spinnerSize]: '40px' },
|
8514
|
-
lg: { [compVars$1.spinnerSize]: '60px' },
|
8515
|
-
xl: { [compVars$1.spinnerSize]: '80px' },
|
8451
|
+
_disabled: {
|
8452
|
+
[vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
8516
8453
|
},
|
8517
8454
|
|
8518
|
-
|
8519
|
-
[
|
8455
|
+
_readonly: {
|
8456
|
+
[vars$p.inputResizeType]: 'none',
|
8520
8457
|
},
|
8521
8458
|
};
|
8522
|
-
const vars$e = {
|
8523
|
-
...compVars$1,
|
8524
|
-
...helperVars,
|
8525
|
-
};
|
8526
8459
|
|
8527
|
-
var
|
8460
|
+
var textArea$1 = /*#__PURE__*/Object.freeze({
|
8528
8461
|
__proto__: null,
|
8529
|
-
default:
|
8530
|
-
vars: vars$
|
8462
|
+
default: textArea,
|
8463
|
+
vars: vars$p
|
8531
8464
|
});
|
8532
8465
|
|
8533
|
-
const
|
8534
|
-
const
|
8535
|
-
|
8536
|
-
const comboBox = {
|
8537
|
-
[vars$d.hostWidth]: refs.width,
|
8538
|
-
[vars$d.hostDirection]: refs.direction,
|
8539
|
-
[vars$d.fontSize]: refs.fontSize,
|
8540
|
-
[vars$d.fontFamily]: refs.fontFamily,
|
8541
|
-
[vars$d.labelTextColor]: refs.labelTextColor,
|
8542
|
-
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
8543
|
-
[vars$d.inputBorderColor]: refs.borderColor,
|
8544
|
-
[vars$d.inputBorderWidth]: refs.borderWidth,
|
8545
|
-
[vars$d.inputBorderStyle]: refs.borderStyle,
|
8546
|
-
[vars$d.inputBorderRadius]: refs.borderRadius,
|
8547
|
-
[vars$d.inputOutlineColor]: refs.outlineColor,
|
8548
|
-
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
8549
|
-
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
8550
|
-
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
8551
|
-
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
8552
|
-
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
8553
|
-
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8554
|
-
[vars$d.inputBackgroundColor]: refs.backgroundColor,
|
8555
|
-
[vars$d.inputHorizontalPadding]: refs.horizontalPadding,
|
8556
|
-
[vars$d.inputHeight]: refs.inputHeight,
|
8557
|
-
[vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
|
8558
|
-
[vars$d.inputDropdownButtonCursor]: 'pointer',
|
8559
|
-
[vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
|
8560
|
-
[vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
8561
|
-
[vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
|
8562
|
-
[vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
|
8466
|
+
const vars$o = CheckboxClass.cssVarList;
|
8467
|
+
const checkboxSize = '1.35em';
|
8563
8468
|
|
8564
|
-
|
8565
|
-
|
8566
|
-
|
8469
|
+
const checkbox = {
|
8470
|
+
[vars$o.hostWidth]: refs.width,
|
8471
|
+
[vars$o.hostDirection]: refs.direction,
|
8472
|
+
[vars$o.fontSize]: refs.fontSize,
|
8473
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
8474
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
8475
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
8476
|
+
[vars$o.labelFontWeight]: '400',
|
8477
|
+
[vars$o.labelLineHeight]: checkboxSize,
|
8478
|
+
[vars$o.labelSpacing]: '1em',
|
8479
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
8480
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
8481
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
8482
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
8483
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
8484
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
8485
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
8486
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
8487
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
8488
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
8489
|
+
[vars$o.inputSize]: checkboxSize,
|
8567
8490
|
|
8568
|
-
|
8569
|
-
|
8570
|
-
|
8571
|
-
[vars$d.overlayCursor]: 'pointer',
|
8572
|
-
[vars$d.overlayItemBoxShadow]: 'none',
|
8491
|
+
_checked: {
|
8492
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
8493
|
+
},
|
8573
8494
|
|
8574
|
-
|
8575
|
-
|
8576
|
-
|
8495
|
+
_disabled: {
|
8496
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
8497
|
+
},
|
8577
8498
|
};
|
8578
8499
|
|
8579
|
-
var
|
8500
|
+
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
8580
8501
|
__proto__: null,
|
8581
|
-
|
8582
|
-
|
8583
|
-
vars: vars$d
|
8502
|
+
default: checkbox,
|
8503
|
+
vars: vars$o
|
8584
8504
|
});
|
8585
8505
|
|
8586
|
-
const
|
8506
|
+
const knobMargin = '2px';
|
8507
|
+
const checkboxHeight = '1.25em';
|
8587
8508
|
|
8588
|
-
const
|
8509
|
+
const globalRefs$e = getThemeRefs(globals);
|
8510
|
+
const vars$n = SwitchToggleClass.cssVarList;
|
8589
8511
|
|
8590
|
-
|
8591
|
-
|
8592
|
-
|
8593
|
-
vars:
|
8594
|
-
|
8512
|
+
const switchToggle = {
|
8513
|
+
[vars$n.hostWidth]: refs.width,
|
8514
|
+
[vars$n.hostDirection]: refs.direction,
|
8515
|
+
[vars$n.fontSize]: refs.fontSize,
|
8516
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
8595
8517
|
|
8596
|
-
|
8518
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
8519
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
8520
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
8521
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
8597
8522
|
|
8598
|
-
|
8599
|
-
[vars$
|
8600
|
-
[vars$
|
8601
|
-
[vars$
|
8602
|
-
[vars$
|
8603
|
-
[vars$
|
8604
|
-
[vars$
|
8605
|
-
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
8606
|
-
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
8607
|
-
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
8608
|
-
[vars$b.inputBorderStyle]: refs.borderStyle,
|
8609
|
-
[vars$b.inputBorderWidth]: refs.borderWidth,
|
8610
|
-
[vars$b.inputBorderColor]: refs.borderColor,
|
8611
|
-
[vars$b.inputBorderRadius]: refs.borderRadius,
|
8612
|
-
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
8613
|
-
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
8614
|
-
[vars$b.inputOutlineColor]: refs.outlineColor,
|
8615
|
-
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
8616
|
-
[vars$b.phoneInputWidth]: refs.minWidth,
|
8617
|
-
[vars$b.countryCodeInputWidth]: '5em',
|
8618
|
-
[vars$b.countryCodeDropdownWidth]: '20em',
|
8523
|
+
[vars$n.trackBorderStyle]: refs.borderStyle,
|
8524
|
+
[vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
8525
|
+
[vars$n.trackBorderColor]: refs.borderColor,
|
8526
|
+
[vars$n.trackBackgroundColor]: 'none',
|
8527
|
+
[vars$n.trackBorderRadius]: globalRefs$e.radius.md,
|
8528
|
+
[vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
8529
|
+
[vars$n.trackHeight]: checkboxHeight,
|
8619
8530
|
|
8620
|
-
|
8621
|
-
|
8622
|
-
|
8623
|
-
|
8531
|
+
[vars$n.knobSize]: `calc(1em - ${knobMargin})`,
|
8532
|
+
[vars$n.knobRadius]: '50%',
|
8533
|
+
[vars$n.knobTopOffset]: '1px',
|
8534
|
+
[vars$n.knobLeftOffset]: knobMargin,
|
8535
|
+
[vars$n.knobColor]: refs.valueTextColor,
|
8536
|
+
[vars$n.knobTransitionDuration]: '0.3s',
|
8624
8537
|
|
8625
|
-
|
8626
|
-
|
8627
|
-
|
8628
|
-
vars:
|
8629
|
-
|
8538
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
8539
|
+
[vars$n.labelFontWeight]: '400',
|
8540
|
+
[vars$n.labelLineHeight]: '1.35em',
|
8541
|
+
[vars$n.labelSpacing]: '1em',
|
8542
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
8543
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
8630
8544
|
|
8631
|
-
|
8545
|
+
_checked: {
|
8546
|
+
[vars$n.trackBorderColor]: refs.borderColor,
|
8547
|
+
[vars$n.trackBackgroundColor]: refs.backgroundColor,
|
8548
|
+
[vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
|
8549
|
+
[vars$n.knobColor]: refs.valueTextColor,
|
8550
|
+
[vars$n.knobTextColor]: refs.valueTextColor,
|
8551
|
+
},
|
8632
8552
|
|
8633
|
-
|
8634
|
-
|
8635
|
-
|
8636
|
-
|
8637
|
-
|
8638
|
-
|
8639
|
-
|
8640
|
-
|
8641
|
-
|
8642
|
-
|
8643
|
-
|
8644
|
-
|
8645
|
-
|
8646
|
-
|
8647
|
-
[vars$a.inputBorderRadius]: refs.borderRadius,
|
8648
|
-
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
8649
|
-
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
8650
|
-
[vars$a.inputOutlineColor]: refs.outlineColor,
|
8651
|
-
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
8652
|
-
_fullWidth: {
|
8653
|
-
[vars$a.hostWidth]: refs.width,
|
8553
|
+
_disabled: {
|
8554
|
+
[vars$n.knobColor]: globalRefs$e.colors.surface.light,
|
8555
|
+
[vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
|
8556
|
+
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8557
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
8558
|
+
_checked: {
|
8559
|
+
[vars$n.knobColor]: globalRefs$e.colors.surface.light,
|
8560
|
+
[vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
8561
|
+
},
|
8562
|
+
},
|
8563
|
+
|
8564
|
+
_invalid: {
|
8565
|
+
[vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
|
8566
|
+
[vars$n.knobColor]: globalRefs$e.colors.error.main,
|
8654
8567
|
},
|
8655
8568
|
};
|
8656
8569
|
|
8657
|
-
var
|
8570
|
+
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
8658
8571
|
__proto__: null,
|
8659
|
-
default:
|
8660
|
-
vars: vars$
|
8572
|
+
default: switchToggle,
|
8573
|
+
vars: vars$n
|
8661
8574
|
});
|
8662
8575
|
|
8663
|
-
const
|
8576
|
+
const globalRefs$d = getThemeRefs(globals);
|
8664
8577
|
|
8665
|
-
const
|
8666
|
-
[vars$9.hostWidth]: refs.width,
|
8667
|
-
[vars$9.hostMinWidth]: refs.minWidth,
|
8668
|
-
[vars$9.hostDirection]: refs.direction,
|
8669
|
-
[vars$9.fontSize]: refs.fontSize,
|
8670
|
-
[vars$9.fontFamily]: refs.fontFamily,
|
8671
|
-
[vars$9.spaceBetweenInputs]: '1em',
|
8672
|
-
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
8578
|
+
const compVars$3 = ContainerClass.cssVarList;
|
8673
8579
|
|
8674
|
-
|
8675
|
-
|
8676
|
-
|
8677
|
-
|
8678
|
-
[vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
8679
|
-
},
|
8580
|
+
const verticalAlignment = {
|
8581
|
+
start: { verticalAlignment: 'start' },
|
8582
|
+
center: { verticalAlignment: 'safe center' },
|
8583
|
+
end: { verticalAlignment: 'end' },
|
8680
8584
|
};
|
8681
8585
|
|
8682
|
-
|
8683
|
-
|
8684
|
-
|
8685
|
-
|
8686
|
-
}
|
8687
|
-
|
8688
|
-
const vars$8 = UploadFileClass.cssVarList;
|
8586
|
+
const horizontalAlignment = {
|
8587
|
+
start: { horizontalAlignment: 'start' },
|
8588
|
+
center: { horizontalAlignment: 'safe center' },
|
8589
|
+
end: { horizontalAlignment: 'end' },
|
8590
|
+
};
|
8689
8591
|
|
8690
|
-
const
|
8691
|
-
|
8692
|
-
|
8693
|
-
|
8592
|
+
const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
8593
|
+
{
|
8594
|
+
verticalAlignment,
|
8595
|
+
horizontalAlignment,
|
8596
|
+
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
8597
|
+
},
|
8598
|
+
componentName$y
|
8599
|
+
);
|
8694
8600
|
|
8695
|
-
|
8601
|
+
const { shadowColor: shadowColor$1 } = helperRefs$2;
|
8696
8602
|
|
8697
|
-
|
8698
|
-
|
8603
|
+
const container = {
|
8604
|
+
...helperTheme$2,
|
8699
8605
|
|
8700
|
-
[
|
8701
|
-
[
|
8702
|
-
[
|
8606
|
+
[compVars$3.hostWidth]: '100%',
|
8607
|
+
[compVars$3.boxShadow]: 'none',
|
8608
|
+
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
|
8609
|
+
[compVars$3.color]: globalRefs$d.colors.surface.contrast,
|
8610
|
+
[compVars$3.borderRadius]: '0px',
|
8703
8611
|
|
8704
|
-
|
8705
|
-
|
8706
|
-
|
8707
|
-
|
8612
|
+
verticalPadding: {
|
8613
|
+
sm: { [compVars$3.verticalPadding]: '5px' },
|
8614
|
+
md: { [compVars$3.verticalPadding]: '10px' },
|
8615
|
+
lg: { [compVars$3.verticalPadding]: '20px' },
|
8616
|
+
},
|
8708
8617
|
|
8709
|
-
|
8710
|
-
[
|
8618
|
+
horizontalPadding: {
|
8619
|
+
sm: { [compVars$3.horizontalPadding]: '5px' },
|
8620
|
+
md: { [compVars$3.horizontalPadding]: '10px' },
|
8621
|
+
lg: { [compVars$3.horizontalPadding]: '20px' },
|
8711
8622
|
},
|
8712
8623
|
|
8713
|
-
|
8714
|
-
|
8715
|
-
[
|
8716
|
-
[
|
8717
|
-
[
|
8718
|
-
[
|
8719
|
-
|
8624
|
+
direction: {
|
8625
|
+
row: {
|
8626
|
+
[compVars$3.flexDirection]: 'row',
|
8627
|
+
[compVars$3.alignItems]: helperRefs$2.verticalAlignment,
|
8628
|
+
[compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
|
8629
|
+
[compVars$3.flexWrap]: 'wrap',
|
8630
|
+
horizontalAlignment: {
|
8631
|
+
spaceBetween: {
|
8632
|
+
[helperVars$2.horizontalAlignment]: 'space-between',
|
8633
|
+
},
|
8634
|
+
},
|
8720
8635
|
},
|
8721
|
-
|
8722
|
-
[
|
8723
|
-
[
|
8724
|
-
[
|
8725
|
-
|
8726
|
-
|
8636
|
+
column: {
|
8637
|
+
[compVars$3.flexDirection]: 'column',
|
8638
|
+
[compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
|
8639
|
+
[compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
|
8640
|
+
verticalAlignment: {
|
8641
|
+
spaceBetween: {
|
8642
|
+
[helperVars$2.verticalAlignment]: 'space-between',
|
8643
|
+
},
|
8644
|
+
},
|
8645
|
+
},
|
8646
|
+
},
|
8647
|
+
|
8648
|
+
spaceBetween: {
|
8649
|
+
sm: { [compVars$3.gap]: '10px' },
|
8650
|
+
md: { [compVars$3.gap]: '20px' },
|
8651
|
+
lg: { [compVars$3.gap]: '30px' },
|
8652
|
+
},
|
8653
|
+
|
8654
|
+
shadow: {
|
8655
|
+
sm: {
|
8656
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
|
8727
8657
|
},
|
8728
8658
|
md: {
|
8729
|
-
[
|
8730
|
-
[vars$8.hostWidth]: '312px',
|
8731
|
-
[vars$8.titleFontSize]: '1.125em',
|
8732
|
-
[vars$8.descriptionFontSize]: '1em',
|
8733
|
-
[vars$8.lineHeight]: '1.5em',
|
8659
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
|
8734
8660
|
},
|
8735
8661
|
lg: {
|
8736
|
-
[
|
8737
|
-
|
8738
|
-
|
8739
|
-
[
|
8740
|
-
|
8662
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
|
8663
|
+
},
|
8664
|
+
xl: {
|
8665
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
|
8666
|
+
},
|
8667
|
+
'2xl': {
|
8668
|
+
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
8669
|
+
[compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
|
8741
8670
|
},
|
8742
8671
|
},
|
8743
8672
|
|
8744
|
-
|
8745
|
-
[
|
8673
|
+
borderRadius: {
|
8674
|
+
sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
|
8675
|
+
md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
|
8676
|
+
lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
|
8677
|
+
xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
|
8678
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
|
8679
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
|
8746
8680
|
},
|
8747
8681
|
};
|
8748
8682
|
|
8749
|
-
|
8683
|
+
const vars$m = {
|
8684
|
+
...compVars$3,
|
8685
|
+
...helperVars$2,
|
8686
|
+
};
|
8687
|
+
|
8688
|
+
var container$1 = /*#__PURE__*/Object.freeze({
|
8750
8689
|
__proto__: null,
|
8751
|
-
default:
|
8752
|
-
vars: vars$
|
8690
|
+
default: container,
|
8691
|
+
vars: vars$m
|
8753
8692
|
});
|
8754
8693
|
|
8755
|
-
const
|
8756
|
-
|
8757
|
-
const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
|
8758
|
-
|
8759
|
-
const buttonSelectionGroupItem = {
|
8760
|
-
[vars$7.hostDirection]: 'inherit',
|
8761
|
-
[vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
|
8762
|
-
[vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
8763
|
-
[vars$7.borderColor]: globalRefs$6.colors.surface.main,
|
8764
|
-
[vars$7.borderStyle]: 'solid',
|
8765
|
-
[vars$7.borderRadius]: globalRefs$6.radius.sm,
|
8766
|
-
|
8767
|
-
_hover: {
|
8768
|
-
[vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
8769
|
-
},
|
8694
|
+
const vars$l = LogoClass.cssVarList;
|
8770
8695
|
|
8771
|
-
|
8772
|
-
|
8773
|
-
[vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
8774
|
-
[vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
|
8775
|
-
},
|
8696
|
+
const logo$1 = {
|
8697
|
+
[vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
8776
8698
|
};
|
8777
8699
|
|
8778
|
-
var
|
8700
|
+
var logo$2 = /*#__PURE__*/Object.freeze({
|
8779
8701
|
__proto__: null,
|
8780
|
-
default:
|
8781
|
-
vars: vars$
|
8702
|
+
default: logo$1,
|
8703
|
+
vars: vars$l
|
8782
8704
|
});
|
8783
8705
|
|
8784
|
-
const
|
8785
|
-
const vars$6 = ButtonSelectionGroupClass.cssVarList;
|
8706
|
+
const vars$k = TotpImageClass.cssVarList;
|
8786
8707
|
|
8787
|
-
const
|
8788
|
-
[vars$
|
8789
|
-
[vars$6.fontFamily]: refs.fontFamily,
|
8790
|
-
[vars$6.labelTextColor]: refs.labelTextColor,
|
8791
|
-
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
8792
|
-
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
8793
|
-
[vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
|
8794
|
-
[vars$6.hostWidth]: refs.width,
|
8708
|
+
const logo = {
|
8709
|
+
[vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
8795
8710
|
};
|
8796
8711
|
|
8797
|
-
var
|
8712
|
+
var totpImage = /*#__PURE__*/Object.freeze({
|
8798
8713
|
__proto__: null,
|
8799
|
-
default:
|
8800
|
-
vars: vars$
|
8714
|
+
default: logo,
|
8715
|
+
vars: vars$k
|
8801
8716
|
});
|
8802
8717
|
|
8803
|
-
const
|
8718
|
+
const globalRefs$c = getThemeRefs(globals);
|
8719
|
+
const vars$j = TextClass.cssVarList;
|
8804
8720
|
|
8805
|
-
const
|
8806
|
-
|
8807
|
-
|
8808
|
-
|
8809
|
-
|
8721
|
+
const text = {
|
8722
|
+
[vars$j.hostDirection]: globalRefs$c.direction,
|
8723
|
+
[vars$j.textLineHeight]: '1.35em',
|
8724
|
+
[vars$j.textAlign]: 'left',
|
8725
|
+
[vars$j.textColor]: globalRefs$c.colors.surface.dark,
|
8726
|
+
variant: {
|
8727
|
+
h1: {
|
8728
|
+
[vars$j.fontSize]: globalRefs$c.typography.h1.size,
|
8729
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
|
8730
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h1.font,
|
8731
|
+
},
|
8732
|
+
h2: {
|
8733
|
+
[vars$j.fontSize]: globalRefs$c.typography.h2.size,
|
8734
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
|
8735
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h2.font,
|
8736
|
+
},
|
8737
|
+
h3: {
|
8738
|
+
[vars$j.fontSize]: globalRefs$c.typography.h3.size,
|
8739
|
+
[vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
|
8740
|
+
[vars$j.fontFamily]: globalRefs$c.typography.h3.font,
|
8741
|
+
},
|
8742
|
+
subtitle1: {
|
8743
|
+
[vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
|
8744
|
+
[vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
|
8745
|
+
[vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
|
8746
|
+
},
|
8747
|
+
subtitle2: {
|
8748
|
+
[vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
|
8749
|
+
[vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
|
8750
|
+
[vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
|
8751
|
+
},
|
8752
|
+
body1: {
|
8753
|
+
[vars$j.fontSize]: globalRefs$c.typography.body1.size,
|
8754
|
+
[vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
|
8755
|
+
[vars$j.fontFamily]: globalRefs$c.typography.body1.font,
|
8756
|
+
},
|
8757
|
+
body2: {
|
8758
|
+
[vars$j.fontSize]: globalRefs$c.typography.body2.size,
|
8759
|
+
[vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
|
8760
|
+
[vars$j.fontFamily]: globalRefs$c.typography.body2.font,
|
8761
|
+
},
|
8762
|
+
},
|
8810
8763
|
|
8811
|
-
|
8812
|
-
|
8813
|
-
|
8814
|
-
|
8815
|
-
|
8816
|
-
|
8817
|
-
|
8818
|
-
|
8764
|
+
mode: {
|
8765
|
+
primary: {
|
8766
|
+
[vars$j.textColor]: globalRefs$c.colors.primary.main,
|
8767
|
+
},
|
8768
|
+
secondary: {
|
8769
|
+
[vars$j.textColor]: globalRefs$c.colors.secondary.main,
|
8770
|
+
},
|
8771
|
+
error: {
|
8772
|
+
[vars$j.textColor]: globalRefs$c.colors.error.main,
|
8773
|
+
},
|
8774
|
+
success: {
|
8775
|
+
[vars$j.textColor]: globalRefs$c.colors.success.main,
|
8776
|
+
},
|
8777
|
+
},
|
8819
8778
|
|
8820
|
-
|
8821
|
-
|
8822
|
-
|
8779
|
+
textAlign: {
|
8780
|
+
right: { [vars$j.textAlign]: 'right' },
|
8781
|
+
left: { [vars$j.textAlign]: 'left' },
|
8782
|
+
center: { [vars$j.textAlign]: 'center' },
|
8783
|
+
},
|
8823
8784
|
|
8824
|
-
|
8825
|
-
|
8826
|
-
|
8827
|
-
setTimeout(() => {
|
8828
|
-
// we want to sync descope-modal content through vaadin-dialog into the overlay
|
8829
|
-
// so we are adding a slot to the overlay, which allows us to forward the content from
|
8830
|
-
// vaadin-dialog to vaadin-dialog-overlay
|
8831
|
-
this.baseElement.shadowRoot
|
8832
|
-
.querySelector('vaadin-dialog-overlay')
|
8833
|
-
.appendChild(document.createElement('slot'));
|
8785
|
+
_fullWidth: {
|
8786
|
+
[vars$j.hostWidth]: '100%',
|
8787
|
+
},
|
8834
8788
|
|
8835
|
-
|
8789
|
+
_italic: {
|
8790
|
+
[vars$j.fontStyle]: 'italic',
|
8791
|
+
},
|
8836
8792
|
|
8837
|
-
|
8838
|
-
|
8839
|
-
|
8840
|
-
// the component.
|
8841
|
-
this.handleOpened();
|
8842
|
-
});
|
8843
|
-
}
|
8793
|
+
_uppercase: {
|
8794
|
+
[vars$j.textTransform]: 'uppercase',
|
8795
|
+
},
|
8844
8796
|
|
8845
|
-
|
8846
|
-
|
8847
|
-
|
8848
|
-
|
8849
|
-
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
|
8797
|
+
_lowercase: {
|
8798
|
+
[vars$j.textTransform]: 'lowercase',
|
8799
|
+
},
|
8800
|
+
};
|
8850
8801
|
|
8851
|
-
|
8852
|
-
|
8853
|
-
|
8854
|
-
|
8855
|
-
|
8856
|
-
this.baseElement.style.display = 'none';
|
8857
|
-
};
|
8858
|
-
overlay._enterModalState = () => {};
|
8802
|
+
var text$1 = /*#__PURE__*/Object.freeze({
|
8803
|
+
__proto__: null,
|
8804
|
+
default: text,
|
8805
|
+
vars: vars$j
|
8806
|
+
});
|
8859
8807
|
|
8860
|
-
|
8861
|
-
|
8862
|
-
};
|
8808
|
+
const globalRefs$b = getThemeRefs(globals);
|
8809
|
+
const vars$i = LinkClass.cssVarList;
|
8863
8810
|
|
8864
|
-
const
|
8865
|
-
|
8866
|
-
|
8867
|
-
|
8868
|
-
|
8869
|
-
|
8870
|
-
|
8871
|
-
|
8872
|
-
|
8873
|
-
|
8874
|
-
|
8875
|
-
|
8876
|
-
|
8877
|
-
|
8878
|
-
|
8879
|
-
|
8880
|
-
|
8881
|
-
|
8882
|
-
|
8883
|
-
{ selector: () => '::part(overlay)', property: 'background-color' },
|
8884
|
-
],
|
8885
|
-
width: { selector: () => '::part(overlay)', property: 'width' },
|
8886
|
-
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8811
|
+
const link = {
|
8812
|
+
[vars$i.hostDirection]: globalRefs$b.direction,
|
8813
|
+
[vars$i.cursor]: 'pointer',
|
8814
|
+
|
8815
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
8816
|
+
|
8817
|
+
textAlign: {
|
8818
|
+
right: { [vars$i.textAlign]: 'right' },
|
8819
|
+
left: { [vars$i.textAlign]: 'left' },
|
8820
|
+
center: { [vars$i.textAlign]: 'center' },
|
8821
|
+
},
|
8822
|
+
|
8823
|
+
_fullWidth: {
|
8824
|
+
[vars$i.hostWidth]: '100%',
|
8825
|
+
},
|
8826
|
+
|
8827
|
+
mode: {
|
8828
|
+
primary: {
|
8829
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
8887
8830
|
},
|
8888
|
-
|
8889
|
-
|
8890
|
-
attributes: ['opened'],
|
8831
|
+
secondary: {
|
8832
|
+
[vars$i.textColor]: globalRefs$b.colors.secondary.main,
|
8891
8833
|
},
|
8892
|
-
|
8893
|
-
|
8894
|
-
|
8895
|
-
|
8896
|
-
|
8897
|
-
|
8898
|
-
|
8899
|
-
|
8900
|
-
|
8901
|
-
|
8902
|
-
|
8903
|
-
|
8834
|
+
error: {
|
8835
|
+
[vars$i.textColor]: globalRefs$b.colors.error.main,
|
8836
|
+
},
|
8837
|
+
success: {
|
8838
|
+
[vars$i.textColor]: globalRefs$b.colors.success.main,
|
8839
|
+
},
|
8840
|
+
},
|
8841
|
+
};
|
8842
|
+
|
8843
|
+
var link$1 = /*#__PURE__*/Object.freeze({
|
8844
|
+
__proto__: null,
|
8845
|
+
default: link,
|
8846
|
+
vars: vars$i
|
8847
|
+
});
|
8848
|
+
|
8849
|
+
const globalRefs$a = getThemeRefs(globals);
|
8850
|
+
const compVars$2 = DividerClass.cssVarList;
|
8851
|
+
|
8852
|
+
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
8853
|
+
{
|
8854
|
+
thickness: '2px',
|
8855
|
+
spacing: '10px',
|
8856
|
+
},
|
8857
|
+
componentName$w
|
8904
8858
|
);
|
8905
8859
|
|
8906
|
-
const
|
8860
|
+
const divider = {
|
8861
|
+
...helperTheme$1,
|
8907
8862
|
|
8908
|
-
|
8863
|
+
[compVars$2.hostDirection]: globalRefs$a.direction,
|
8864
|
+
[compVars$2.alignItems]: 'center',
|
8865
|
+
[compVars$2.flexDirection]: 'row',
|
8866
|
+
[compVars$2.alignSelf]: 'stretch',
|
8867
|
+
[compVars$2.hostWidth]: '100%',
|
8868
|
+
[compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
|
8869
|
+
[compVars$2.stripeColorOpacity]: '0.5',
|
8870
|
+
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
8871
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
8872
|
+
[compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
|
8873
|
+
[compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
8874
|
+
[compVars$2.textAlign]: 'center',
|
8909
8875
|
|
8910
|
-
|
8911
|
-
|
8912
|
-
|
8913
|
-
|
8876
|
+
_vertical: {
|
8877
|
+
[compVars$2.minHeight]: '200px',
|
8878
|
+
[compVars$2.flexDirection]: 'column',
|
8879
|
+
[compVars$2.hostWidth]: 'fit-content',
|
8880
|
+
[compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
8881
|
+
[compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
|
8882
|
+
[compVars$2.labelTextWidth]: 'fit-content',
|
8883
|
+
[compVars$2.labelTextMaxWidth]: '100%',
|
8884
|
+
[compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
8885
|
+
},
|
8914
8886
|
};
|
8915
8887
|
|
8916
|
-
const vars$
|
8917
|
-
...compVars,
|
8888
|
+
const vars$h = {
|
8889
|
+
...compVars$2,
|
8890
|
+
...helperVars$1,
|
8918
8891
|
};
|
8919
8892
|
|
8920
|
-
var
|
8893
|
+
var divider$1 = /*#__PURE__*/Object.freeze({
|
8921
8894
|
__proto__: null,
|
8922
|
-
default:
|
8923
|
-
vars: vars$
|
8895
|
+
default: divider,
|
8896
|
+
vars: vars$h
|
8924
8897
|
});
|
8925
8898
|
|
8926
|
-
const
|
8927
|
-
const vars$4 = GridClass.cssVarList;
|
8899
|
+
const vars$g = PasscodeClass.cssVarList;
|
8928
8900
|
|
8929
|
-
const
|
8930
|
-
[vars$
|
8931
|
-
[vars$
|
8932
|
-
[vars$
|
8933
|
-
[vars$
|
8901
|
+
const passcode = {
|
8902
|
+
[vars$g.hostDirection]: refs.direction,
|
8903
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
8904
|
+
[vars$g.fontSize]: refs.fontSize,
|
8905
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
8906
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
8907
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
8908
|
+
[vars$g.digitValueTextColor]: refs.valueTextColor,
|
8909
|
+
[vars$g.digitPadding]: '0',
|
8910
|
+
[vars$g.digitTextAlign]: 'center',
|
8911
|
+
[vars$g.digitSpacing]: '4px',
|
8912
|
+
[vars$g.hostWidth]: refs.width,
|
8913
|
+
[vars$g.digitOutlineColor]: 'transparent',
|
8914
|
+
[vars$g.digitOutlineWidth]: refs.outlineWidth,
|
8915
|
+
[vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
8916
|
+
[vars$g.digitSize]: refs.inputHeight,
|
8934
8917
|
|
8935
|
-
|
8936
|
-
|
8918
|
+
size: {
|
8919
|
+
xs: { [vars$g.spinnerSize]: '15px' },
|
8920
|
+
sm: { [vars$g.spinnerSize]: '20px' },
|
8921
|
+
md: { [vars$g.spinnerSize]: '20px' },
|
8922
|
+
lg: { [vars$g.spinnerSize]: '20px' },
|
8923
|
+
},
|
8937
8924
|
|
8938
|
-
|
8939
|
-
|
8940
|
-
|
8925
|
+
_hideCursor: {
|
8926
|
+
[vars$g.digitCaretTextColor]: 'transparent',
|
8927
|
+
},
|
8941
8928
|
|
8942
|
-
|
8943
|
-
|
8944
|
-
|
8945
|
-
|
8929
|
+
_loading: {
|
8930
|
+
[vars$g.overlayOpacity]: refs.overlayOpacity,
|
8931
|
+
},
|
8932
|
+
};
|
8946
8933
|
|
8947
|
-
|
8948
|
-
|
8934
|
+
var passcode$1 = /*#__PURE__*/Object.freeze({
|
8935
|
+
__proto__: null,
|
8936
|
+
default: passcode,
|
8937
|
+
vars: vars$g
|
8938
|
+
});
|
8949
8939
|
|
8950
|
-
|
8951
|
-
|
8940
|
+
const globalRefs$9 = getThemeRefs(globals);
|
8941
|
+
const vars$f = LoaderLinearClass.cssVarList;
|
8952
8942
|
|
8953
|
-
|
8954
|
-
|
8943
|
+
const loaderLinear = {
|
8944
|
+
[vars$f.hostDisplay]: 'inline-block',
|
8945
|
+
[vars$f.hostWidth]: '100%',
|
8946
|
+
|
8947
|
+
[vars$f.barColor]: globalRefs$9.colors.surface.contrast,
|
8948
|
+
[vars$f.barWidth]: '20%',
|
8949
|
+
|
8950
|
+
[vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
|
8951
|
+
[vars$f.barBorderRadius]: '4px',
|
8952
|
+
|
8953
|
+
[vars$f.animationDuration]: '2s',
|
8954
|
+
[vars$f.animationTimingFunction]: 'linear',
|
8955
|
+
[vars$f.animationIterationCount]: 'infinite',
|
8956
|
+
[vars$f.verticalPadding]: '0.25em',
|
8957
|
+
|
8958
|
+
size: {
|
8959
|
+
xs: { [vars$f.barHeight]: '2px' },
|
8960
|
+
sm: { [vars$f.barHeight]: '4px' },
|
8961
|
+
md: { [vars$f.barHeight]: '6px' },
|
8962
|
+
lg: { [vars$f.barHeight]: '8px' },
|
8963
|
+
},
|
8964
|
+
|
8965
|
+
mode: {
|
8966
|
+
primary: {
|
8967
|
+
[vars$f.barColor]: globalRefs$9.colors.primary.main,
|
8968
|
+
},
|
8969
|
+
secondary: {
|
8970
|
+
[vars$f.barColor]: globalRefs$9.colors.secondary.main,
|
8971
|
+
},
|
8972
|
+
},
|
8973
|
+
|
8974
|
+
_hidden: {
|
8975
|
+
[vars$f.hostDisplay]: 'none',
|
8955
8976
|
},
|
8956
8977
|
};
|
8957
8978
|
|
8958
|
-
var
|
8979
|
+
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
8959
8980
|
__proto__: null,
|
8960
|
-
default:
|
8961
|
-
|
8962
|
-
vars: vars$4
|
8981
|
+
default: loaderLinear,
|
8982
|
+
vars: vars$f
|
8963
8983
|
});
|
8964
8984
|
|
8965
|
-
const
|
8985
|
+
const globalRefs$8 = getThemeRefs(globals);
|
8986
|
+
const compVars$1 = LoaderRadialClass.cssVarList;
|
8966
8987
|
|
8967
|
-
const
|
8968
|
-
|
8969
|
-
|
8970
|
-
|
8971
|
-
|
8972
|
-
|
8973
|
-
|
8974
|
-
|
8975
|
-
|
8976
|
-
|
8977
|
-
|
8978
|
-
|
8988
|
+
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
8989
|
+
{
|
8990
|
+
spinnerColor: globalRefs$8.colors.surface.contrast,
|
8991
|
+
mode: {
|
8992
|
+
primary: {
|
8993
|
+
spinnerColor: globalRefs$8.colors.primary.main,
|
8994
|
+
},
|
8995
|
+
secondary: {
|
8996
|
+
spinnerColor: globalRefs$8.colors.secondary.main,
|
8997
|
+
},
|
8998
|
+
},
|
8999
|
+
},
|
9000
|
+
componentName$z
|
9001
|
+
);
|
8979
9002
|
|
8980
|
-
|
8981
|
-
|
9003
|
+
const loaderRadial = {
|
9004
|
+
...helperTheme,
|
8982
9005
|
|
8983
|
-
|
8984
|
-
|
9006
|
+
[compVars$1.animationDuration]: '2s',
|
9007
|
+
[compVars$1.animationTimingFunction]: 'linear',
|
9008
|
+
[compVars$1.animationIterationCount]: 'infinite',
|
9009
|
+
[compVars$1.spinnerBorderStyle]: 'solid',
|
9010
|
+
[compVars$1.spinnerBorderWidth]: '0.2em',
|
9011
|
+
[compVars$1.spinnerBorderRadius]: '50%',
|
9012
|
+
[compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
9013
|
+
[compVars$1.spinnerQuadrant2Color]: 'transparent',
|
9014
|
+
[compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
9015
|
+
[compVars$1.spinnerQuadrant4Color]: 'transparent',
|
8985
9016
|
|
8986
|
-
|
8987
|
-
|
8988
|
-
|
8989
|
-
|
8990
|
-
|
8991
|
-
|
8992
|
-
|
8993
|
-
</div>
|
8994
|
-
</div>
|
8995
|
-
`;
|
9017
|
+
size: {
|
9018
|
+
xs: { [compVars$1.spinnerSize]: '20px' },
|
9019
|
+
sm: { [compVars$1.spinnerSize]: '30px' },
|
9020
|
+
md: { [compVars$1.spinnerSize]: '40px' },
|
9021
|
+
lg: { [compVars$1.spinnerSize]: '60px' },
|
9022
|
+
xl: { [compVars$1.spinnerSize]: '80px' },
|
9023
|
+
},
|
8996
9024
|
|
8997
|
-
|
8998
|
-
|
9025
|
+
_hidden: {
|
9026
|
+
[compVars$1.hostDisplay]: 'none',
|
9027
|
+
},
|
9028
|
+
};
|
9029
|
+
const vars$e = {
|
9030
|
+
...compVars$1,
|
9031
|
+
...helperVars,
|
9032
|
+
};
|
8999
9033
|
|
9000
|
-
|
9001
|
-
|
9034
|
+
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
9035
|
+
__proto__: null,
|
9036
|
+
default: loaderRadial,
|
9037
|
+
vars: vars$e
|
9038
|
+
});
|
9002
9039
|
|
9003
|
-
|
9004
|
-
|
9005
|
-
};
|
9006
|
-
}
|
9007
|
-
};
|
9040
|
+
const globalRefs$7 = getThemeRefs(globals);
|
9041
|
+
const vars$d = ComboBoxClass.cssVarList;
|
9008
9042
|
|
9009
|
-
const
|
9010
|
-
|
9011
|
-
|
9012
|
-
|
9043
|
+
const comboBox = {
|
9044
|
+
[vars$d.hostWidth]: refs.width,
|
9045
|
+
[vars$d.hostDirection]: refs.direction,
|
9046
|
+
[vars$d.fontSize]: refs.fontSize,
|
9047
|
+
[vars$d.fontFamily]: refs.fontFamily,
|
9048
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
9049
|
+
[vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
|
9050
|
+
[vars$d.inputBorderColor]: refs.borderColor,
|
9051
|
+
[vars$d.inputBorderWidth]: refs.borderWidth,
|
9052
|
+
[vars$d.inputBorderStyle]: refs.borderStyle,
|
9053
|
+
[vars$d.inputBorderRadius]: refs.borderRadius,
|
9054
|
+
[vars$d.inputOutlineColor]: refs.outlineColor,
|
9055
|
+
[vars$d.inputOutlineOffset]: refs.outlineOffset,
|
9056
|
+
[vars$d.inputOutlineWidth]: refs.outlineWidth,
|
9057
|
+
[vars$d.inputOutlineStyle]: refs.outlineStyle,
|
9058
|
+
[vars$d.labelRequiredIndicator]: refs.requiredIndicator,
|
9059
|
+
[vars$d.inputValueTextColor]: refs.valueTextColor,
|
9060
|
+
[vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9061
|
+
[vars$d.inputBackgroundColor]: refs.backgroundColor,
|
9062
|
+
[vars$d.inputHorizontalPadding]: refs.horizontalPadding,
|
9063
|
+
[vars$d.inputHeight]: refs.inputHeight,
|
9064
|
+
[vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
|
9065
|
+
[vars$d.inputDropdownButtonCursor]: 'pointer',
|
9066
|
+
[vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9067
|
+
[vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
9068
|
+
[vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
|
9069
|
+
[vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
|
9013
9070
|
|
9014
|
-
|
9015
|
-
|
9016
|
-
|
9017
|
-
hostMinWidth: { selector: selectors.content, property: 'min-width' },
|
9018
|
-
fontFamily: {},
|
9019
|
-
fontSize: {},
|
9020
|
-
backgroundColor: { selector: selectors.content },
|
9021
|
-
textColor: { property: 'color' },
|
9022
|
-
boxShadow: {},
|
9023
|
-
borderWidth: { selector: selectors.content, property: 'border-width' },
|
9024
|
-
borderColor: { selector: selectors.content, property: 'border-color' },
|
9025
|
-
borderStyle: { selector: selectors.content, property: 'border-style' },
|
9026
|
-
borderRadius: [
|
9027
|
-
{ selector: selectors.content, property: 'border-radius' },
|
9028
|
-
{ selector: selectors.overlay, property: 'border-radius' },
|
9029
|
-
],
|
9030
|
-
verticalPadding: [
|
9031
|
-
{ selector: selectors.content, property: 'padding-top' },
|
9032
|
-
{ selector: selectors.content, property: 'padding-bottom' },
|
9033
|
-
],
|
9034
|
-
horizontalPadding: [
|
9035
|
-
{ selector: selectors.content, property: 'padding-right' },
|
9036
|
-
{ selector: selectors.content, property: 'padding-left' },
|
9037
|
-
],
|
9038
|
-
},
|
9039
|
-
}),
|
9040
|
-
notificationCardMixin
|
9041
|
-
)(
|
9042
|
-
createProxy({
|
9043
|
-
slots: [],
|
9044
|
-
wrappedEleName: 'vaadin-notification-card',
|
9045
|
-
style: () => `
|
9046
|
-
vaadin-notification-card {
|
9047
|
-
box-shadow: none;
|
9048
|
-
}
|
9049
|
-
::part(overlay) {
|
9050
|
-
box-shadow: none;
|
9051
|
-
background: none;
|
9052
|
-
}
|
9071
|
+
_readonly: {
|
9072
|
+
[vars$d.inputDropdownButtonCursor]: 'default',
|
9073
|
+
},
|
9053
9074
|
|
9054
|
-
|
9055
|
-
|
9056
|
-
|
9057
|
-
|
9075
|
+
// Overlay theme exposed via the component:
|
9076
|
+
[vars$d.overlayFontSize]: refs.fontSize,
|
9077
|
+
[vars$d.overlayFontFamily]: refs.fontFamily,
|
9078
|
+
[vars$d.overlayCursor]: 'pointer',
|
9079
|
+
[vars$d.overlayItemBoxShadow]: 'none',
|
9058
9080
|
|
9059
|
-
|
9060
|
-
|
9061
|
-
|
9062
|
-
|
9063
|
-
}
|
9081
|
+
// Overlay direct theme:
|
9082
|
+
[vars$d.overlay.minHeight]: '400px',
|
9083
|
+
[vars$d.overlay.margin]: '0',
|
9084
|
+
};
|
9064
9085
|
|
9065
|
-
|
9066
|
-
|
9067
|
-
|
9068
|
-
|
9069
|
-
|
9070
|
-
|
9071
|
-
`,
|
9072
|
-
excludeAttrsSync: ['tabindex'],
|
9073
|
-
componentName: componentName$1,
|
9074
|
-
})
|
9075
|
-
);
|
9086
|
+
var comboBox$1 = /*#__PURE__*/Object.freeze({
|
9087
|
+
__proto__: null,
|
9088
|
+
comboBox: comboBox,
|
9089
|
+
default: comboBox,
|
9090
|
+
vars: vars$d
|
9091
|
+
});
|
9076
9092
|
|
9077
|
-
const
|
9078
|
-
const vars$3 = NotificationCardClass.cssVarList;
|
9093
|
+
const vars$c = ImageClass.cssVarList;
|
9079
9094
|
|
9080
|
-
const
|
9095
|
+
const image = {};
|
9081
9096
|
|
9082
|
-
|
9083
|
-
|
9084
|
-
|
9085
|
-
|
9086
|
-
|
9087
|
-
[vars$3.textColor]: globalRefs$2.colors.surface.contrast,
|
9088
|
-
[vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
|
9089
|
-
[vars$3.verticalPadding]: '0.625em',
|
9090
|
-
[vars$3.horizontalPadding]: '1.5em',
|
9091
|
-
[vars$3.borderRadius]: globalRefs$2.radius.xs,
|
9097
|
+
var image$1 = /*#__PURE__*/Object.freeze({
|
9098
|
+
__proto__: null,
|
9099
|
+
default: image,
|
9100
|
+
vars: vars$c
|
9101
|
+
});
|
9092
9102
|
|
9093
|
-
|
9094
|
-
[vars$3.borderWidth]: globalRefs$2.border.sm,
|
9095
|
-
[vars$3.borderStyle]: 'solid',
|
9096
|
-
[vars$3.borderColor]: 'transparent',
|
9097
|
-
},
|
9103
|
+
const vars$b = PhoneFieldClass.cssVarList;
|
9098
9104
|
|
9099
|
-
|
9100
|
-
|
9101
|
-
|
9102
|
-
|
9103
|
-
|
9104
|
-
|
9105
|
+
const phoneField = {
|
9106
|
+
[vars$b.hostWidth]: refs.width,
|
9107
|
+
[vars$b.hostDirection]: refs.direction,
|
9108
|
+
[vars$b.fontSize]: refs.fontSize,
|
9109
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
9110
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
9111
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
9112
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
9113
|
+
[vars$b.inputValueTextColor]: refs.valueTextColor,
|
9114
|
+
[vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9115
|
+
[vars$b.inputBorderStyle]: refs.borderStyle,
|
9116
|
+
[vars$b.inputBorderWidth]: refs.borderWidth,
|
9117
|
+
[vars$b.inputBorderColor]: refs.borderColor,
|
9118
|
+
[vars$b.inputBorderRadius]: refs.borderRadius,
|
9119
|
+
[vars$b.inputOutlineStyle]: refs.outlineStyle,
|
9120
|
+
[vars$b.inputOutlineWidth]: refs.outlineWidth,
|
9121
|
+
[vars$b.inputOutlineColor]: refs.outlineColor,
|
9122
|
+
[vars$b.inputOutlineOffset]: refs.outlineOffset,
|
9123
|
+
[vars$b.phoneInputWidth]: refs.minWidth,
|
9124
|
+
[vars$b.countryCodeInputWidth]: '5em',
|
9125
|
+
[vars$b.countryCodeDropdownWidth]: '20em',
|
9105
9126
|
|
9106
|
-
|
9107
|
-
|
9108
|
-
|
9109
|
-
[vars$3.textColor]: globalRefs$2.colors.primary.contrast,
|
9110
|
-
[vars$3.borderColor]: globalRefs$2.colors.primary.light,
|
9111
|
-
},
|
9112
|
-
success: {
|
9113
|
-
[vars$3.backgroundColor]: globalRefs$2.colors.success.main,
|
9114
|
-
[vars$3.textColor]: globalRefs$2.colors.success.contrast,
|
9115
|
-
[vars$3.borderColor]: globalRefs$2.colors.success.light,
|
9116
|
-
},
|
9117
|
-
error: {
|
9118
|
-
[vars$3.backgroundColor]: globalRefs$2.colors.error.main,
|
9119
|
-
[vars$3.textColor]: globalRefs$2.colors.error.contrast,
|
9120
|
-
[vars$3.borderColor]: globalRefs$2.colors.error.light,
|
9121
|
-
},
|
9122
|
-
},
|
9127
|
+
// '@overlay': {
|
9128
|
+
// overlayItemBackgroundColor: 'red'
|
9129
|
+
// }
|
9123
9130
|
};
|
9124
9131
|
|
9125
|
-
var
|
9132
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
9126
9133
|
__proto__: null,
|
9127
|
-
default:
|
9128
|
-
vars: vars$
|
9134
|
+
default: phoneField,
|
9135
|
+
vars: vars$b
|
9129
9136
|
});
|
9130
9137
|
|
9131
|
-
const
|
9138
|
+
const vars$a = PhoneFieldInputBoxClass.cssVarList;
|
9132
9139
|
|
9133
|
-
const
|
9134
|
-
|
9135
|
-
|
9136
|
-
|
9137
|
-
|
9138
|
-
|
9140
|
+
const phoneInputBoxField = {
|
9141
|
+
[vars$a.hostWidth]: '16em',
|
9142
|
+
[vars$a.hostMinWidth]: refs.minWidth,
|
9143
|
+
[vars$a.hostDirection]: refs.direction,
|
9144
|
+
[vars$a.fontSize]: refs.fontSize,
|
9145
|
+
[vars$a.fontFamily]: refs.fontFamily,
|
9146
|
+
[vars$a.labelTextColor]: refs.labelTextColor,
|
9147
|
+
[vars$a.labelRequiredIndicator]: refs.requiredIndicator,
|
9148
|
+
[vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
|
9149
|
+
[vars$a.inputValueTextColor]: refs.valueTextColor,
|
9150
|
+
[vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
9151
|
+
[vars$a.inputBorderStyle]: refs.borderStyle,
|
9152
|
+
[vars$a.inputBorderWidth]: refs.borderWidth,
|
9153
|
+
[vars$a.inputBorderColor]: refs.borderColor,
|
9154
|
+
[vars$a.inputBorderRadius]: refs.borderRadius,
|
9155
|
+
[vars$a.inputOutlineStyle]: refs.outlineStyle,
|
9156
|
+
[vars$a.inputOutlineWidth]: refs.outlineWidth,
|
9157
|
+
[vars$a.inputOutlineColor]: refs.outlineColor,
|
9158
|
+
[vars$a.inputOutlineOffset]: refs.outlineOffset,
|
9159
|
+
_fullWidth: {
|
9160
|
+
[vars$a.hostWidth]: refs.width,
|
9161
|
+
},
|
9162
|
+
};
|
9139
9163
|
|
9140
|
-
|
9164
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
9165
|
+
__proto__: null,
|
9166
|
+
default: phoneInputBoxField,
|
9167
|
+
vars: vars$a
|
9168
|
+
});
|
9141
9169
|
|
9142
|
-
|
9143
|
-
const defaultValuesAttr = this.getAttribute('default-values');
|
9144
|
-
if (defaultValuesAttr) {
|
9145
|
-
try {
|
9146
|
-
const defaultValues = JSON.parse(defaultValuesAttr);
|
9147
|
-
if (this.isValidDataType(defaultValues)) {
|
9148
|
-
return defaultValues;
|
9149
|
-
}
|
9150
|
-
} catch (e) {
|
9151
|
-
// eslint-disable-next-line no-console
|
9152
|
-
console.error('could not parse data string from attribute "default-values" -', e.message);
|
9153
|
-
}
|
9154
|
-
}
|
9155
|
-
return [];
|
9156
|
-
}
|
9170
|
+
const vars$9 = NewPasswordClass.cssVarList;
|
9157
9171
|
|
9158
|
-
|
9159
|
-
|
9160
|
-
|
9172
|
+
const newPassword = {
|
9173
|
+
[vars$9.hostWidth]: refs.width,
|
9174
|
+
[vars$9.hostMinWidth]: refs.minWidth,
|
9175
|
+
[vars$9.hostDirection]: refs.direction,
|
9176
|
+
[vars$9.fontSize]: refs.fontSize,
|
9177
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
9178
|
+
[vars$9.spaceBetweenInputs]: '1em',
|
9179
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
9161
9180
|
|
9162
|
-
|
9163
|
-
|
9164
|
-
|
9165
|
-
|
9181
|
+
_required: {
|
9182
|
+
// NewPassword doesn't pass `required` attribute to its Password components.
|
9183
|
+
// That's why we fake the required indicator on each input.
|
9184
|
+
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
9185
|
+
[vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
9186
|
+
},
|
9187
|
+
};
|
9166
9188
|
|
9167
|
-
|
9168
|
-
|
9189
|
+
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
9190
|
+
__proto__: null,
|
9191
|
+
default: newPassword,
|
9192
|
+
vars: vars$9
|
9193
|
+
});
|
9169
9194
|
|
9170
|
-
|
9195
|
+
const vars$8 = UploadFileClass.cssVarList;
|
9171
9196
|
|
9172
|
-
|
9173
|
-
|
9174
|
-
|
9175
|
-
|
9176
|
-
return data;
|
9177
|
-
}
|
9178
|
-
} catch (e) {
|
9179
|
-
// eslint-disable-next-line no-console
|
9180
|
-
console.error('could not parse data string from attribute "data" -', e.message);
|
9181
|
-
}
|
9182
|
-
}
|
9197
|
+
const uploadFile = {
|
9198
|
+
[vars$8.hostDirection]: refs.direction,
|
9199
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
9200
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
9183
9201
|
|
9184
|
-
|
9185
|
-
}
|
9202
|
+
[vars$8.iconSize]: '2em',
|
9186
9203
|
|
9187
|
-
|
9188
|
-
|
9189
|
-
this.#data = data;
|
9190
|
-
this.renderItems();
|
9191
|
-
}
|
9192
|
-
}
|
9204
|
+
[vars$8.hostPadding]: '0.75em',
|
9205
|
+
[vars$8.gap]: '0.5em',
|
9193
9206
|
|
9194
|
-
|
9195
|
-
|
9196
|
-
|
9207
|
+
[vars$8.fontSize]: '16px',
|
9208
|
+
[vars$8.titleFontWeight]: '500',
|
9209
|
+
[vars$8.lineHeight]: '1em',
|
9197
9210
|
|
9198
|
-
|
9199
|
-
|
9200
|
-
|
9211
|
+
[vars$8.borderWidth]: refs.borderWidth,
|
9212
|
+
[vars$8.borderColor]: refs.borderColor,
|
9213
|
+
[vars$8.borderRadius]: refs.borderRadius,
|
9214
|
+
[vars$8.borderStyle]: 'dashed',
|
9201
9215
|
|
9202
|
-
|
9203
|
-
|
9204
|
-
|
9216
|
+
_required: {
|
9217
|
+
[vars$8.requiredIndicator]: refs.requiredIndicator,
|
9218
|
+
},
|
9205
9219
|
|
9206
|
-
|
9207
|
-
|
9208
|
-
|
9209
|
-
|
9210
|
-
|
9211
|
-
|
9212
|
-
|
9220
|
+
size: {
|
9221
|
+
xs: {
|
9222
|
+
[vars$8.hostHeight]: '196px',
|
9223
|
+
[vars$8.hostWidth]: '200px',
|
9224
|
+
[vars$8.titleFontSize]: '0.875em',
|
9225
|
+
[vars$8.descriptionFontSize]: '0.875em',
|
9226
|
+
[vars$8.lineHeight]: '1.25em',
|
9227
|
+
},
|
9228
|
+
sm: {
|
9229
|
+
[vars$8.hostHeight]: '216px',
|
9230
|
+
[vars$8.hostWidth]: '230px',
|
9231
|
+
[vars$8.titleFontSize]: '1em',
|
9232
|
+
[vars$8.descriptionFontSize]: '0.875em',
|
9233
|
+
[vars$8.lineHeight]: '1.25em',
|
9234
|
+
},
|
9235
|
+
md: {
|
9236
|
+
[vars$8.hostHeight]: '256px',
|
9237
|
+
[vars$8.hostWidth]: '312px',
|
9238
|
+
[vars$8.titleFontSize]: '1.125em',
|
9239
|
+
[vars$8.descriptionFontSize]: '1em',
|
9240
|
+
[vars$8.lineHeight]: '1.5em',
|
9241
|
+
},
|
9242
|
+
lg: {
|
9243
|
+
[vars$8.hostHeight]: '280px',
|
9244
|
+
[vars$8.hostWidth]: '336px',
|
9245
|
+
[vars$8.titleFontSize]: '1.125em',
|
9246
|
+
[vars$8.descriptionFontSize]: '1.125em',
|
9247
|
+
[vars$8.lineHeight]: '1.75em',
|
9248
|
+
},
|
9249
|
+
},
|
9213
9250
|
|
9214
|
-
|
9215
|
-
|
9251
|
+
_fullWidth: {
|
9252
|
+
[vars$8.hostWidth]: refs.width,
|
9253
|
+
},
|
9254
|
+
};
|
9216
9255
|
|
9217
|
-
|
9218
|
-
|
9219
|
-
|
9256
|
+
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
9257
|
+
__proto__: null,
|
9258
|
+
default: uploadFile,
|
9259
|
+
vars: vars$8
|
9260
|
+
});
|
9220
9261
|
|
9221
|
-
|
9222
|
-
const template = this.getItemsTemplate();
|
9223
|
-
if (template) this.innerHTML = template;
|
9224
|
-
}
|
9262
|
+
const globalRefs$6 = getThemeRefs(globals);
|
9225
9263
|
|
9226
|
-
|
9227
|
-
const currentSelected =
|
9228
|
-
this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
|
9264
|
+
const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
|
9229
9265
|
|
9230
|
-
|
9266
|
+
const buttonSelectionGroupItem = {
|
9267
|
+
[vars$7.hostDirection]: 'inherit',
|
9268
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
|
9269
|
+
[vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
9270
|
+
[vars$7.borderColor]: globalRefs$6.colors.surface.main,
|
9271
|
+
[vars$7.borderStyle]: 'solid',
|
9272
|
+
[vars$7.borderRadius]: globalRefs$6.radius.sm,
|
9231
9273
|
|
9232
|
-
|
9233
|
-
|
9234
|
-
|
9235
|
-
}
|
9274
|
+
_hover: {
|
9275
|
+
[vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
9276
|
+
},
|
9236
9277
|
|
9237
|
-
|
9238
|
-
|
9239
|
-
|
9240
|
-
|
9241
|
-
|
9278
|
+
_selected: {
|
9279
|
+
[vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
|
9280
|
+
[vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
9281
|
+
[vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
|
9282
|
+
},
|
9283
|
+
};
|
9242
9284
|
|
9243
|
-
|
9244
|
-
|
9245
|
-
|
9246
|
-
|
9285
|
+
var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
|
9286
|
+
__proto__: null,
|
9287
|
+
default: buttonSelectionGroupItem,
|
9288
|
+
vars: vars$7
|
9289
|
+
});
|
9247
9290
|
|
9248
|
-
|
9249
|
-
|
9250
|
-
// We provide a custom transform function to override that behavior.
|
9251
|
-
setComboBoxDescriptor() {
|
9252
|
-
const valueDescriptor = Object.getOwnPropertyDescriptor(
|
9253
|
-
this.inputElement.constructor.prototype,
|
9254
|
-
'value'
|
9255
|
-
);
|
9291
|
+
const globalRefs$5 = getThemeRefs(globals);
|
9292
|
+
const vars$6 = ButtonSelectionGroupClass.cssVarList;
|
9256
9293
|
|
9257
|
-
|
9294
|
+
const buttonSelectionGroup = {
|
9295
|
+
[vars$6.hostDirection]: refs.direction,
|
9296
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
9297
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
9298
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
9299
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
9300
|
+
[vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
|
9301
|
+
[vars$6.hostWidth]: refs.width,
|
9302
|
+
};
|
9258
9303
|
|
9259
|
-
|
9260
|
-
|
9261
|
-
|
9262
|
-
|
9263
|
-
|
9304
|
+
var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
|
9305
|
+
__proto__: null,
|
9306
|
+
default: buttonSelectionGroup,
|
9307
|
+
vars: vars$6
|
9308
|
+
});
|
9264
9309
|
|
9265
|
-
|
9266
|
-
return;
|
9267
|
-
}
|
9310
|
+
const componentName$1 = getComponentName('modal');
|
9268
9311
|
|
9269
|
-
|
9270
|
-
|
9271
|
-
|
9272
|
-
|
9312
|
+
const customMixin = (superclass) =>
|
9313
|
+
class ModalMixinClass extends superclass {
|
9314
|
+
get opened() {
|
9315
|
+
return this.getAttribute('opened') === 'true';
|
9273
9316
|
}
|
9274
9317
|
|
9275
|
-
|
9276
|
-
|
9277
|
-
|
9278
|
-
|
9279
|
-
|
9280
|
-
|
9281
|
-
|
9282
|
-
|
9283
|
-
this.removeAttribute('has-no-options');
|
9318
|
+
handleOpened() {
|
9319
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
|
9320
|
+
if (this.opened) {
|
9321
|
+
this.style.display = '';
|
9322
|
+
} else {
|
9323
|
+
this.style.display = 'none';
|
9324
|
+
}
|
9325
|
+
}
|
9284
9326
|
|
9285
|
-
|
9286
|
-
|
9287
|
-
|
9288
|
-
configurable: true,
|
9289
|
-
writable: true,
|
9290
|
-
});
|
9291
|
-
Object.defineProperty(node, 'data-id', {
|
9292
|
-
value: node.getAttribute('data-id'),
|
9293
|
-
configurable: true,
|
9294
|
-
writable: true,
|
9295
|
-
});
|
9296
|
-
});
|
9327
|
+
init() {
|
9328
|
+
super.init?.();
|
9329
|
+
this.style.display = 'none';
|
9297
9330
|
|
9298
|
-
|
9331
|
+
// vaadin-dialog might not be loaded in time
|
9332
|
+
// in order to make sure it's loaded before this block is running
|
9333
|
+
// we are wrapping it with setTimeout
|
9334
|
+
setTimeout(() => {
|
9335
|
+
// we want to sync descope-modal content through vaadin-dialog into the overlay
|
9336
|
+
// so we are adding a slot to the overlay, which allows us to forward the content from
|
9337
|
+
// vaadin-dialog to vaadin-dialog-overlay
|
9338
|
+
this.baseElement.shadowRoot
|
9339
|
+
.querySelector('vaadin-dialog-overlay')
|
9340
|
+
.appendChild(document.createElement('slot'));
|
9299
9341
|
|
9300
|
-
|
9301
|
-
// set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
|
9302
|
-
this.handleSelectedItems();
|
9303
|
-
}, 0);
|
9304
|
-
} else {
|
9305
|
-
this.baseElement.items = [];
|
9306
|
-
this.setAttribute('has-no-options', '');
|
9307
|
-
}
|
9342
|
+
this.#overrideOverlaySettings();
|
9308
9343
|
|
9309
|
-
|
9310
|
-
|
9311
|
-
|
9312
|
-
|
9313
|
-
|
9314
|
-
|
9315
|
-
};
|
9344
|
+
// we need to always open the modal in `opened=false`
|
9345
|
+
// to prevent it from rendering outside the dialog
|
9346
|
+
// first, we have to run `overrideOverlaySettings` to setup
|
9347
|
+
// the component.
|
9348
|
+
this.handleOpened();
|
9349
|
+
});
|
9316
9350
|
}
|
9317
9351
|
|
9318
9352
|
// the default vaadin behavior is to attach the overlay to the body when opened
|
9319
9353
|
// we do not want that because it's difficult to style the overlay in this way
|
9320
9354
|
// so we override it to open inside the shadow DOM
|
9321
9355
|
#overrideOverlaySettings() {
|
9322
|
-
const overlay = this.baseElement.shadowRoot
|
9323
|
-
|
9324
|
-
.shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
|
9356
|
+
const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
|
9357
|
+
|
9325
9358
|
overlay._attachOverlay = () => {
|
9326
9359
|
overlay.bringToFront();
|
9360
|
+
this.baseElement.setAttribute('style', 'display:flex!important;');
|
9361
|
+
};
|
9362
|
+
overlay._detachOverlay = () => {
|
9363
|
+
this.baseElement.style.display = 'none';
|
9327
9364
|
};
|
9328
|
-
overlay._detachOverlay = () => {};
|
9329
9365
|
overlay._enterModalState = () => {};
|
9330
|
-
}
|
9331
9366
|
|
9332
|
-
|
9333
|
-
if (this.allowCustomValue) {
|
9334
|
-
this.baseElement.addEventListener('custom-value-set', (e) => {
|
9335
|
-
const newItemHtml = this.#renderItem({
|
9336
|
-
label: e.detail,
|
9337
|
-
displayName: e.detail,
|
9338
|
-
value: e.detail,
|
9339
|
-
});
|
9340
|
-
this.innerHTML += newItemHtml;
|
9341
|
-
// The value needs to be set with a timeout because it needs to execute after
|
9342
|
-
// the custom value is added to items by the children change observer
|
9343
|
-
setTimeout(() => {
|
9344
|
-
this.value = [...this.value, e.detail];
|
9345
|
-
}, 0);
|
9346
|
-
});
|
9347
|
-
}
|
9367
|
+
overlay.close = () => false;
|
9348
9368
|
}
|
9369
|
+
};
|
9349
9370
|
|
9350
|
-
|
9351
|
-
|
9352
|
-
|
9353
|
-
|
9354
|
-
|
9355
|
-
|
9356
|
-
|
9357
|
-
|
9358
|
-
|
9359
|
-
|
9360
|
-
|
9361
|
-
|
9362
|
-
|
9363
|
-
)
|
9364
|
-
|
9365
|
-
|
9366
|
-
|
9367
|
-
|
9368
|
-
|
9369
|
-
|
9370
|
-
|
9371
|
-
|
9372
|
-
|
9373
|
-
|
9374
|
-
|
9375
|
-
|
9371
|
+
const ModalClass = compose(
|
9372
|
+
createStyleMixin({
|
9373
|
+
mappings: {
|
9374
|
+
overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
|
9375
|
+
overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
|
9376
|
+
overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
|
9377
|
+
},
|
9378
|
+
}),
|
9379
|
+
portalMixin({
|
9380
|
+
name: 'overlay',
|
9381
|
+
selector: '',
|
9382
|
+
mappings: {
|
9383
|
+
hostDisplay: {
|
9384
|
+
selector: () => ':host(.descope-modal)',
|
9385
|
+
property: 'display',
|
9386
|
+
important: true,
|
9387
|
+
},
|
9388
|
+
backgroundColor: [
|
9389
|
+
{ selector: () => '::part(content)', property: 'background-color' },
|
9390
|
+
{ selector: () => '::part(overlay)', property: 'background-color' },
|
9391
|
+
],
|
9392
|
+
width: { selector: () => '::part(overlay)', property: 'width' },
|
9393
|
+
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
9394
|
+
},
|
9395
|
+
forward: {
|
9396
|
+
include: false,
|
9397
|
+
attributes: ['opened'],
|
9398
|
+
},
|
9399
|
+
}),
|
9400
|
+
draggableMixin,
|
9401
|
+
componentNameValidationMixin,
|
9402
|
+
customMixin
|
9403
|
+
)(
|
9404
|
+
createProxy({
|
9405
|
+
slots: [''],
|
9406
|
+
wrappedEleName: 'vaadin-dialog',
|
9407
|
+
style: () => ``,
|
9408
|
+
excludeAttrsSync: ['tabindex', 'opened'],
|
9409
|
+
componentName: componentName$1,
|
9410
|
+
})
|
9411
|
+
);
|
9376
9412
|
|
9377
|
-
|
9378
|
-
super.init?.();
|
9413
|
+
const globalRefs$4 = getThemeRefs(globals);
|
9379
9414
|
|
9380
|
-
|
9415
|
+
const compVars = ModalClass.cssVarList;
|
9381
9416
|
|
9382
|
-
|
9417
|
+
const modal = {
|
9418
|
+
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
|
9419
|
+
[compVars.overlayShadow]: 'none',
|
9420
|
+
[compVars.overlayWidth]: '700px',
|
9421
|
+
};
|
9383
9422
|
|
9384
|
-
|
9423
|
+
const vars$5 = {
|
9424
|
+
...compVars,
|
9425
|
+
};
|
9385
9426
|
|
9386
|
-
|
9427
|
+
var modal$1 = /*#__PURE__*/Object.freeze({
|
9428
|
+
__proto__: null,
|
9429
|
+
default: modal,
|
9430
|
+
vars: vars$5
|
9431
|
+
});
|
9387
9432
|
|
9388
|
-
|
9433
|
+
const globalRefs$3 = getThemeRefs(globals);
|
9434
|
+
const vars$4 = GridClass.cssVarList;
|
9389
9435
|
|
9390
|
-
|
9436
|
+
const grid = {
|
9437
|
+
[vars$4.hostWidth]: '100%',
|
9438
|
+
[vars$4.hostHeight]: '100%',
|
9439
|
+
[vars$4.hostMinHeight]: '400px',
|
9440
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
|
9391
9441
|
|
9392
|
-
|
9442
|
+
[vars$4.fontSize]: refs.fontSize,
|
9443
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
9393
9444
|
|
9394
|
-
|
9395
|
-
|
9396
|
-
|
9445
|
+
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
|
9446
|
+
[vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
|
9447
|
+
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
|
9397
9448
|
|
9398
|
-
|
9399
|
-
|
9449
|
+
[vars$4.inputBorderWidth]: refs.borderWidth,
|
9450
|
+
[vars$4.inputBorderStyle]: refs.borderStyle,
|
9451
|
+
[vars$4.inputBorderRadius]: refs.borderRadius,
|
9452
|
+
[vars$4.inputBorderColor]: 'transparent',
|
9400
9453
|
|
9401
|
-
|
9402
|
-
|
9403
|
-
}
|
9454
|
+
[vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
|
9455
|
+
[vars$4.separatorColor]: globalRefs$3.colors.surface.main,
|
9404
9456
|
|
9405
|
-
|
9406
|
-
|
9407
|
-
const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
|
9457
|
+
[vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
|
9458
|
+
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
|
9408
9459
|
|
9409
|
-
|
9410
|
-
|
9411
|
-
|
9412
|
-
|
9413
|
-
|
9414
|
-
|
9460
|
+
_bordered: {
|
9461
|
+
[vars$4.inputBorderColor]: refs.borderColor,
|
9462
|
+
},
|
9463
|
+
};
|
9464
|
+
|
9465
|
+
var grid$1 = /*#__PURE__*/Object.freeze({
|
9466
|
+
__proto__: null,
|
9467
|
+
default: grid,
|
9468
|
+
grid: grid,
|
9469
|
+
vars: vars$4
|
9470
|
+
});
|
9471
|
+
|
9472
|
+
const componentName = getComponentName('notification-card');
|
9473
|
+
|
9474
|
+
const notificationCardMixin = (superclass) =>
|
9475
|
+
class NotificationCardMixinClass extends superclass {
|
9476
|
+
close() {
|
9477
|
+
// if animation is not applied to the element, the node will not be removed
|
9478
|
+
// from the DOM. We should avoid that. So, if in any case we allow
|
9479
|
+
// customizing the animation - we should check if animation is applied
|
9480
|
+
// and if it's not applied - remove the element from the DOM and dispatch
|
9481
|
+
// `card-closed` event.
|
9482
|
+
this.baseElement.addEventListener('animationend', () => {
|
9483
|
+
this.remove();
|
9484
|
+
this.dispatchEvent(new Event('card-closed'));
|
9485
|
+
});
|
9486
|
+
|
9487
|
+
this.setAttribute('opened', 'false');
|
9415
9488
|
}
|
9416
9489
|
|
9417
|
-
|
9418
|
-
|
9490
|
+
constructor() {
|
9491
|
+
super();
|
9492
|
+
|
9493
|
+
this.baseElement.innerHTML = `
|
9494
|
+
<div part="root">
|
9495
|
+
<div part="content">
|
9496
|
+
<slot></slot>
|
9497
|
+
</div>
|
9498
|
+
<div part="close">
|
9499
|
+
<slot name="close"></slot>
|
9500
|
+
</div>
|
9501
|
+
</div>
|
9502
|
+
`;
|
9503
|
+
|
9504
|
+
this.closeEle = this.shadowRoot.querySelector('[part="close"]');
|
9419
9505
|
}
|
9420
|
-
};
|
9421
9506
|
|
9422
|
-
|
9423
|
-
|
9424
|
-
|
9425
|
-
|
9426
|
-
|
9427
|
-
|
9428
|
-
|
9429
|
-
|
9430
|
-
|
9431
|
-
|
9432
|
-
|
9433
|
-
|
9434
|
-
overflowChipFirstBorder,
|
9435
|
-
overflowChipSecondBorder,
|
9436
|
-
} = {
|
9437
|
-
host: { selector: () => ':host' },
|
9438
|
-
inputField: { selector: '::part(input-field)' },
|
9439
|
-
inputElement: { selector: 'input' },
|
9440
|
-
placeholder: { selector: '> input:placeholder-shown' },
|
9441
|
-
toggle: { selector: '::part(toggle-button)' },
|
9442
|
-
label: { selector: '::part(label)' },
|
9443
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
9444
|
-
helperText: { selector: '::part(helper-text)' },
|
9445
|
-
errorMessage: { selector: '::part(error-message)' },
|
9446
|
-
chip: { selector: 'vaadin-multi-select-combo-box-chip' },
|
9447
|
-
chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
|
9448
|
-
overflowChipFirstBorder: {
|
9449
|
-
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
|
9450
|
-
},
|
9451
|
-
overflowChipSecondBorder: {
|
9452
|
-
selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
|
9453
|
-
},
|
9507
|
+
init() {
|
9508
|
+
super.init?.();
|
9509
|
+
|
9510
|
+
this.closeEle.onclick = () => {
|
9511
|
+
this.close();
|
9512
|
+
};
|
9513
|
+
}
|
9514
|
+
};
|
9515
|
+
|
9516
|
+
const selectors = {
|
9517
|
+
content: () => 'vaadin-notification-card::part(content)',
|
9518
|
+
overlay: () => 'vaadin-notification-card::part(overlay)',
|
9454
9519
|
};
|
9455
9520
|
|
9456
|
-
const
|
9521
|
+
const NotificationCardClass = compose(
|
9457
9522
|
createStyleMixin({
|
9458
9523
|
mappings: {
|
9459
|
-
|
9460
|
-
|
9461
|
-
|
9462
|
-
|
9463
|
-
|
9464
|
-
|
9465
|
-
|
9466
|
-
|
9467
|
-
|
9468
|
-
|
9469
|
-
|
9470
|
-
|
9471
|
-
inputBackgroundColor: { ...inputField, property: 'background-color' },
|
9472
|
-
inputBorderColor: { ...inputField, property: 'border-color' },
|
9473
|
-
inputBorderWidth: { ...inputField, property: 'border-width' },
|
9474
|
-
inputBorderStyle: { ...inputField, property: 'border-style' },
|
9475
|
-
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
9476
|
-
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
9477
|
-
inputValueTextColor: { ...inputField, property: 'color' },
|
9478
|
-
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
9479
|
-
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
9480
|
-
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
9481
|
-
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
9482
|
-
inputDropdownButtonOffset: [
|
9483
|
-
{ ...toggle, property: 'margin-right' },
|
9484
|
-
{ ...toggle, property: 'margin-left' },
|
9485
|
-
],
|
9486
|
-
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
9487
|
-
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
9488
|
-
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
9489
|
-
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
9490
|
-
inputHorizontalPadding: [
|
9491
|
-
{ ...inputElement, property: 'padding-left' },
|
9492
|
-
{ ...inputElement, property: 'padding-right' },
|
9493
|
-
{ ...inputField, property: 'padding-inline-start' },
|
9524
|
+
hostMinWidth: { selector: selectors.content, property: 'min-width' },
|
9525
|
+
fontFamily: {},
|
9526
|
+
fontSize: {},
|
9527
|
+
backgroundColor: { selector: selectors.content },
|
9528
|
+
textColor: { property: 'color' },
|
9529
|
+
boxShadow: {},
|
9530
|
+
borderWidth: { selector: selectors.content, property: 'border-width' },
|
9531
|
+
borderColor: { selector: selectors.content, property: 'border-color' },
|
9532
|
+
borderStyle: { selector: selectors.content, property: 'border-style' },
|
9533
|
+
borderRadius: [
|
9534
|
+
{ selector: selectors.content, property: 'border-radius' },
|
9535
|
+
{ selector: selectors.overlay, property: 'border-radius' },
|
9494
9536
|
],
|
9495
|
-
|
9496
|
-
{
|
9497
|
-
{
|
9537
|
+
verticalPadding: [
|
9538
|
+
{ selector: selectors.content, property: 'padding-top' },
|
9539
|
+
{ selector: selectors.content, property: 'padding-bottom' },
|
9498
9540
|
],
|
9499
|
-
|
9500
|
-
|
9501
|
-
{
|
9502
|
-
{ ...overflowChipFirstBorder, property: 'border-color' },
|
9503
|
-
{ ...overflowChipSecondBorder, property: 'border-color' },
|
9541
|
+
horizontalPadding: [
|
9542
|
+
{ selector: selectors.content, property: 'padding-right' },
|
9543
|
+
{ selector: selectors.content, property: 'padding-left' },
|
9504
9544
|
],
|
9505
|
-
|
9506
|
-
// we need to use the variables from the portal mixin
|
9507
|
-
// so we need to use an arrow function on the selector
|
9508
|
-
// for that to work, because ComboBox is not available
|
9509
|
-
// at this time.
|
9510
|
-
overlayBackground: {
|
9511
|
-
property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
|
9512
|
-
},
|
9513
|
-
overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
|
9514
|
-
overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
|
9515
|
-
overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
|
9516
|
-
overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
|
9517
|
-
overlayItemBoxShadow: {
|
9518
|
-
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
|
9519
|
-
},
|
9520
|
-
overlayItemPaddingInlineStart: {
|
9521
|
-
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
|
9522
|
-
},
|
9523
|
-
overlayItemPaddingInlineEnd: {
|
9524
|
-
property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
|
9525
|
-
},
|
9526
9545
|
},
|
9527
9546
|
}),
|
9528
|
-
|
9529
|
-
portalMixin({
|
9530
|
-
name: 'overlay',
|
9531
|
-
selector: 'vaadin-multi-select-combo-box-internal',
|
9532
|
-
mappings: {
|
9533
|
-
backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
|
9534
|
-
minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
9535
|
-
margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
|
9536
|
-
cursor: { selector: 'vaadin-multi-select-combo-box-item' },
|
9537
|
-
fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
|
9538
|
-
fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
|
9539
|
-
itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
|
9540
|
-
itemPaddingInlineStart: {
|
9541
|
-
selector: 'vaadin-multi-select-combo-box-item',
|
9542
|
-
property: 'padding-inline-start',
|
9543
|
-
},
|
9544
|
-
itemPaddingInlineEnd: {
|
9545
|
-
selector: 'vaadin-multi-select-combo-box-item',
|
9546
|
-
property: 'padding-inline-end',
|
9547
|
-
},
|
9548
|
-
},
|
9549
|
-
forward: {
|
9550
|
-
include: false,
|
9551
|
-
attributes: ['size'],
|
9552
|
-
},
|
9553
|
-
}),
|
9554
|
-
composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
|
9555
|
-
componentNameValidationMixin,
|
9556
|
-
MultiSelectComboBoxMixin
|
9547
|
+
notificationCardMixin
|
9557
9548
|
)(
|
9558
9549
|
createProxy({
|
9559
|
-
slots: [
|
9560
|
-
wrappedEleName: 'vaadin-
|
9550
|
+
slots: [],
|
9551
|
+
wrappedEleName: 'vaadin-notification-card',
|
9561
9552
|
style: () => `
|
9562
|
-
|
9563
|
-
|
9564
|
-
|
9565
|
-
|
9566
|
-
|
9567
|
-
|
9568
|
-
${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
|
9569
|
-
${resetInputPlaceholder('vaadin-multi-select-combo-box')}
|
9570
|
-
${resetInputCursor('vaadin-multi-select-combo-box')}
|
9571
|
-
|
9572
|
-
vaadin-multi-select-combo-box {
|
9573
|
-
padding: 0;
|
9574
|
-
width: 100%;
|
9575
|
-
}
|
9576
|
-
vaadin-multi-select-combo-box::before {
|
9577
|
-
height: initial;
|
9578
|
-
}
|
9579
|
-
vaadin-multi-select-combo-box [slot="input"] {
|
9580
|
-
-webkit-mask-image: none;
|
9581
|
-
min-height: 0;
|
9582
|
-
align-self: center;
|
9583
|
-
box-sizing: border-box;
|
9584
|
-
}
|
9585
|
-
|
9586
|
-
::part(input-field) {
|
9587
|
-
padding: 0;
|
9588
|
-
box-shadow: none;
|
9589
|
-
}
|
9590
|
-
${resetInputLabelPosition('vaadin-multi-select-combo-box')}
|
9591
|
-
:host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
|
9592
|
-
display: block;
|
9553
|
+
vaadin-notification-card {
|
9554
|
+
box-shadow: none;
|
9555
|
+
}
|
9556
|
+
::part(overlay) {
|
9557
|
+
box-shadow: none;
|
9558
|
+
background: none;
|
9593
9559
|
}
|
9594
9560
|
|
9595
|
-
|
9596
|
-
|
9597
|
-
|
9598
|
-
right: -4px;
|
9599
|
-
border-left-width: 0;
|
9600
|
-
border-inline-start-style: solid;
|
9601
|
-
border-inline-start-width: 2px;
|
9561
|
+
[part="close"] {
|
9562
|
+
cursor: pointer;
|
9563
|
+
display: flex;
|
9602
9564
|
}
|
9603
|
-
|
9604
|
-
|
9605
|
-
|
9565
|
+
|
9566
|
+
[part="content"] {
|
9567
|
+
display: flex;
|
9568
|
+
align-items: center;
|
9569
|
+
flex-grow: 1;
|
9606
9570
|
}
|
9607
9571
|
|
9608
|
-
|
9609
|
-
display:
|
9572
|
+
[part="root"] {
|
9573
|
+
display: flex;
|
9574
|
+
align-items: center;
|
9575
|
+
justify-content: space-between;
|
9576
|
+
width: 100%;
|
9610
9577
|
}
|
9611
|
-
|
9612
|
-
|
9613
|
-
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
9614
|
-
// and reset items to an empty array, and opening the list box with no items
|
9615
|
-
// to display.
|
9616
|
-
// Note: we exclude `placeholder` because the vaadin component observes it and
|
9617
|
-
// tries to override it, causing us to lose the user set placeholder.
|
9618
|
-
excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
|
9578
|
+
`,
|
9579
|
+
excludeAttrsSync: ['tabindex'],
|
9619
9580
|
componentName,
|
9620
|
-
includeForwardProps: ['items', 'renderer', 'selectedItems'],
|
9621
9581
|
})
|
9622
9582
|
);
|
9623
9583
|
|
9584
|
+
const globalRefs$2 = getThemeRefs(globals);
|
9585
|
+
const vars$3 = NotificationCardClass.cssVarList;
|
9586
|
+
|
9587
|
+
const shadowColor = '#00000020';
|
9588
|
+
|
9589
|
+
const notification = {
|
9590
|
+
[vars$3.hostMinWidth]: '415px',
|
9591
|
+
[vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
|
9592
|
+
[vars$3.fontSize]: globalRefs$2.typography.body1.size,
|
9593
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
|
9594
|
+
[vars$3.textColor]: globalRefs$2.colors.surface.contrast,
|
9595
|
+
[vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
|
9596
|
+
[vars$3.verticalPadding]: '0.625em',
|
9597
|
+
[vars$3.horizontalPadding]: '1.5em',
|
9598
|
+
[vars$3.borderRadius]: globalRefs$2.radius.xs,
|
9599
|
+
|
9600
|
+
_bordered: {
|
9601
|
+
[vars$3.borderWidth]: globalRefs$2.border.sm,
|
9602
|
+
[vars$3.borderStyle]: 'solid',
|
9603
|
+
[vars$3.borderColor]: 'transparent',
|
9604
|
+
},
|
9605
|
+
|
9606
|
+
size: {
|
9607
|
+
xs: { [vars$3.fontSize]: '12px' },
|
9608
|
+
sm: { [vars$3.fontSize]: '14px' },
|
9609
|
+
md: { [vars$3.fontSize]: '16px' },
|
9610
|
+
lg: { [vars$3.fontSize]: '18px' },
|
9611
|
+
},
|
9612
|
+
|
9613
|
+
mode: {
|
9614
|
+
primary: {
|
9615
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
|
9616
|
+
[vars$3.textColor]: globalRefs$2.colors.primary.contrast,
|
9617
|
+
[vars$3.borderColor]: globalRefs$2.colors.primary.light,
|
9618
|
+
},
|
9619
|
+
success: {
|
9620
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.success.main,
|
9621
|
+
[vars$3.textColor]: globalRefs$2.colors.success.contrast,
|
9622
|
+
[vars$3.borderColor]: globalRefs$2.colors.success.light,
|
9623
|
+
},
|
9624
|
+
error: {
|
9625
|
+
[vars$3.backgroundColor]: globalRefs$2.colors.error.main,
|
9626
|
+
[vars$3.textColor]: globalRefs$2.colors.error.contrast,
|
9627
|
+
[vars$3.borderColor]: globalRefs$2.colors.error.light,
|
9628
|
+
},
|
9629
|
+
},
|
9630
|
+
};
|
9631
|
+
|
9632
|
+
var notificationCard = /*#__PURE__*/Object.freeze({
|
9633
|
+
__proto__: null,
|
9634
|
+
default: notification,
|
9635
|
+
vars: vars$3
|
9636
|
+
});
|
9637
|
+
|
9624
9638
|
const globalRefs$1 = getThemeRefs(globals);
|
9625
9639
|
const vars$2 = MultiSelectComboBoxClass.cssVarList;
|
9626
9640
|
|
@@ -9795,5 +9809,5 @@ const vars = Object.keys(components).reduce(
|
|
9795
9809
|
const defaultTheme = { globals, components: theme };
|
9796
9810
|
const themeVars = { globals: vars$w, components: vars };
|
9797
9811
|
|
9798
|
-
export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
9812
|
+
export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
|
9799
9813
|
//# sourceMappingURL=index.esm.js.map
|