@vonage/vivid 5.1.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/audio-player/definition.cjs +37 -4
- package/audio-player/definition.js +37 -4
- package/audio-player/index.cjs +25 -25
- package/audio-player/index.js +86 -62
- package/bundled/definition13.cjs +2 -2
- package/bundled/definition13.js +4 -4
- package/bundled/definition19.cjs +18 -15
- package/bundled/definition19.js +85 -77
- package/bundled/definition6.cjs +6 -6
- package/bundled/definition6.js +34 -31
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +2 -1
- package/bundled/picker-field.template.cjs +18 -13
- package/bundled/picker-field.template.js +44 -36
- package/bundled/text-field.cjs +1 -1
- package/bundled/text-field.js +1 -1
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/bundled/with-contextual-help.cjs +1 -1
- package/bundled/with-contextual-help.js +17 -7
- package/combobox/definition.cjs +12 -5
- package/combobox/definition.js +12 -5
- package/combobox/index.cjs +15 -11
- package/combobox/index.js +83 -76
- package/custom-elements.json +95 -3
- package/dial-pad/definition.cjs +51 -1
- package/dial-pad/definition.js +52 -2
- package/dial-pad/index.cjs +21 -18
- package/dial-pad/index.js +123 -92
- package/file-picker/definition.cjs +14 -5
- package/file-picker/definition.js +15 -6
- package/file-picker/index.cjs +12 -9
- package/file-picker/index.js +102 -92
- package/lib/audio-player/audio-player.d.ts +4 -0
- package/lib/combobox/combobox.d.ts +483 -66
- package/lib/date-picker/date-picker.d.ts +839 -827
- package/lib/date-range-picker/date-range-picker.d.ts +580 -574
- package/lib/date-time-picker/date-time-picker.d.ts +863 -851
- package/lib/dial-pad/dial-pad.template.d.ts +1 -1
- package/lib/dial-pad/locale.d.ts +1 -0
- package/lib/file-picker/file-picker.d.ts +483 -66
- package/lib/menu/menu.d.ts +1 -0
- package/lib/number-field/number-field.d.ts +1 -0
- package/lib/searchable-select/searchable-select.d.ts +505 -88
- package/lib/select/select.d.ts +470 -53
- package/lib/text-area/text-area.d.ts +1 -0
- package/lib/text-field/text-field.d.ts +1 -0
- package/lib/time-picker/time-picker.d.ts +551 -545
- package/locales/de-DE.cjs +2 -1
- package/locales/de-DE.js +2 -1
- package/locales/en-GB.cjs +2 -1
- package/locales/en-GB.js +2 -1
- package/locales/en-US.cjs +2 -1
- package/locales/en-US.js +2 -1
- package/locales/ja-JP.cjs +2 -1
- package/locales/ja-JP.js +2 -1
- package/locales/zh-CN.cjs +2 -1
- package/locales/zh-CN.js +2 -1
- package/menu/definition.cjs +6 -2
- package/menu/definition.js +7 -3
- package/number-field/definition.cjs +2 -2
- package/number-field/definition.js +3 -3
- package/number-field/index.cjs +9 -9
- package/number-field/index.js +28 -27
- package/package.json +1 -1
- package/searchable-select/definition.cjs +27 -18
- package/searchable-select/definition.js +28 -19
- package/searchable-select/index.cjs +28 -25
- package/searchable-select/index.js +150 -141
- package/select/definition.cjs +14 -6
- package/select/definition.js +14 -6
- package/shared/patterns/form-elements/index.d.ts +1 -0
- package/shared/patterns/form-elements/with-contextual-help.d.ts +1 -0
- package/shared/picker-field/mixins/calendar-picker.d.ts +442 -439
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +442 -439
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +584 -578
- package/shared/picker-field/mixins/single-date-picker.d.ts +696 -687
- package/shared/picker-field/mixins/single-value-picker.d.ts +441 -438
- package/shared/picker-field/mixins/time-selection-picker.d.ts +562 -556
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +551 -545
- package/shared/picker-field/picker-field.d.ts +483 -66
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/text-area/definition.cjs +1 -1
- package/text-area/definition.js +1 -1
- package/text-area/index.cjs +1 -1
- package/text-area/index.js +1 -1
- package/text-field/definition.cjs +1 -1
- package/text-field/definition.js +1 -1
- package/unbundled/picker-field.template.cjs +11 -3
- package/unbundled/picker-field.template.js +11 -3
- package/unbundled/text-field.cjs +1 -1
- package/unbundled/text-field.js +1 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/unbundled/with-contextual-help.cjs +11 -0
- package/unbundled/with-contextual-help.js +11 -0
- package/vivid.api.json +30 -0
package/locales/de-DE.cjs
CHANGED
|
@@ -369,7 +369,8 @@ const deDE = {
|
|
|
369
369
|
digitNineLabel: "9 WXYZ",
|
|
370
370
|
digitAsteriskLabel: "*",
|
|
371
371
|
digitZeroLabel: "0",
|
|
372
|
-
digitHashtagLabel: "#"
|
|
372
|
+
digitHashtagLabel: "#",
|
|
373
|
+
errorLabel: "Fehler:"
|
|
373
374
|
},
|
|
374
375
|
tab: {
|
|
375
376
|
dismissButtonLabel: "Drücken Sie die ENTF-Taste, um diese Registerkarte zu schließen"
|
package/locales/de-DE.js
CHANGED
|
@@ -367,7 +367,8 @@ const deDE = {
|
|
|
367
367
|
digitNineLabel: "9 WXYZ",
|
|
368
368
|
digitAsteriskLabel: "*",
|
|
369
369
|
digitZeroLabel: "0",
|
|
370
|
-
digitHashtagLabel: "#"
|
|
370
|
+
digitHashtagLabel: "#",
|
|
371
|
+
errorLabel: "Fehler:"
|
|
371
372
|
},
|
|
372
373
|
tab: {
|
|
373
374
|
dismissButtonLabel: "Drücken Sie die ENTF-Taste, um diese Registerkarte zu schließen"
|
package/locales/en-GB.cjs
CHANGED
|
@@ -201,7 +201,8 @@ const enGB = {
|
|
|
201
201
|
digitNineLabel: "9 WXYZ",
|
|
202
202
|
digitAsteriskLabel: "*",
|
|
203
203
|
digitZeroLabel: "0",
|
|
204
|
-
digitHashtagLabel: "#"
|
|
204
|
+
digitHashtagLabel: "#",
|
|
205
|
+
errorLabel: "Error:"
|
|
205
206
|
},
|
|
206
207
|
tab: {
|
|
207
208
|
dismissButtonLabel: "Press the DELETE key to close this tab"
|
package/locales/en-GB.js
CHANGED
|
@@ -199,7 +199,8 @@ const enGB = {
|
|
|
199
199
|
digitNineLabel: "9 WXYZ",
|
|
200
200
|
digitAsteriskLabel: "*",
|
|
201
201
|
digitZeroLabel: "0",
|
|
202
|
-
digitHashtagLabel: "#"
|
|
202
|
+
digitHashtagLabel: "#",
|
|
203
|
+
errorLabel: "Error:"
|
|
203
204
|
},
|
|
204
205
|
tab: {
|
|
205
206
|
dismissButtonLabel: "Press the DELETE key to close this tab"
|
package/locales/en-US.cjs
CHANGED
|
@@ -369,7 +369,8 @@ const enUS = {
|
|
|
369
369
|
digitNineLabel: "9 WXYZ",
|
|
370
370
|
digitAsteriskLabel: "*",
|
|
371
371
|
digitZeroLabel: "0",
|
|
372
|
-
digitHashtagLabel: "#"
|
|
372
|
+
digitHashtagLabel: "#",
|
|
373
|
+
errorLabel: "Error:"
|
|
373
374
|
},
|
|
374
375
|
tab: {
|
|
375
376
|
dismissButtonLabel: "Press the DELETE key to close this tab"
|
package/locales/en-US.js
CHANGED
|
@@ -367,7 +367,8 @@ const enUS = {
|
|
|
367
367
|
digitNineLabel: "9 WXYZ",
|
|
368
368
|
digitAsteriskLabel: "*",
|
|
369
369
|
digitZeroLabel: "0",
|
|
370
|
-
digitHashtagLabel: "#"
|
|
370
|
+
digitHashtagLabel: "#",
|
|
371
|
+
errorLabel: "Error:"
|
|
371
372
|
},
|
|
372
373
|
tab: {
|
|
373
374
|
dismissButtonLabel: "Press the DELETE key to close this tab"
|
package/locales/ja-JP.cjs
CHANGED
package/locales/ja-JP.js
CHANGED
package/locales/zh-CN.cjs
CHANGED
package/locales/zh-CN.js
CHANGED
package/menu/definition.cjs
CHANGED
|
@@ -12,7 +12,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
|
|
|
12
12
|
const divider = require('../unbundled/divider.cjs');
|
|
13
13
|
const index = require('../unbundled/index.cjs');
|
|
14
14
|
|
|
15
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding
|
|
15
|
+
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
|
|
16
16
|
|
|
17
17
|
var __defProp = Object.defineProperty;
|
|
18
18
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -30,6 +30,7 @@ const isMenuItemElement = (el) => el instanceof menuItem_definition.MenuItem ? t
|
|
|
30
30
|
class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.VividElement)) {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments);
|
|
33
|
+
this.offset = null;
|
|
33
34
|
this.expandedItem = null;
|
|
34
35
|
/**
|
|
35
36
|
* The index of the focusable element in the items array
|
|
@@ -285,6 +286,9 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
|
|
|
285
286
|
return true;
|
|
286
287
|
}
|
|
287
288
|
}
|
|
289
|
+
__decorateClass([
|
|
290
|
+
fastElement.attr({ attribute: "offset", converter: fastElement.nullableNumberConverter })
|
|
291
|
+
], Menu.prototype, "offset");
|
|
288
292
|
__decorateClass([
|
|
289
293
|
fastElement.observable
|
|
290
294
|
], Menu.prototype, "items");
|
|
@@ -346,7 +350,7 @@ const MenuTemplate = (context) => {
|
|
|
346
350
|
:open=${(x) => x.open}
|
|
347
351
|
:anchor=${(x) => x._anchorEl}
|
|
348
352
|
:strategy="${(x) => x.positionStrategy}"
|
|
349
|
-
:offset=${(x) => x._popupOffset}
|
|
353
|
+
:offset=${(x) => x.offset || x._popupOffset}
|
|
350
354
|
@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
|
|
351
355
|
@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
|
|
352
356
|
@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
|
package/menu/definition.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
|
|
2
2
|
import { M as MenuItem, a as MenuItemRole, m as menuItemDefinition, b as menuName } from '../unbundled/definition2.js';
|
|
3
3
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
4
|
-
import { DOM,
|
|
4
|
+
import { DOM, attr, nullableNumberConverter, observable, ref, slotted, html } from '@microsoft/fast-element';
|
|
5
5
|
import { keyHome, keyEnd, keyArrowUp, keyArrowDown, classNames } from '@microsoft/fast-web-utilities';
|
|
6
6
|
import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
|
|
7
7
|
import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
|
|
8
8
|
import { D as Divider } from '../unbundled/divider.js';
|
|
9
9
|
import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
|
|
10
10
|
|
|
11
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding
|
|
11
|
+
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -26,6 +26,7 @@ const isMenuItemElement = (el) => el instanceof MenuItem ? true : Boolean(el.rol
|
|
|
26
26
|
class Menu extends Anchored(DelegatesAria(VividElement)) {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments);
|
|
29
|
+
this.offset = null;
|
|
29
30
|
this.expandedItem = null;
|
|
30
31
|
/**
|
|
31
32
|
* The index of the focusable element in the items array
|
|
@@ -281,6 +282,9 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
|
|
|
281
282
|
return true;
|
|
282
283
|
}
|
|
283
284
|
}
|
|
285
|
+
__decorateClass([
|
|
286
|
+
attr({ attribute: "offset", converter: nullableNumberConverter })
|
|
287
|
+
], Menu.prototype, "offset");
|
|
284
288
|
__decorateClass([
|
|
285
289
|
observable
|
|
286
290
|
], Menu.prototype, "items");
|
|
@@ -342,7 +346,7 @@ const MenuTemplate = (context) => {
|
|
|
342
346
|
:open=${(x) => x.open}
|
|
343
347
|
:anchor=${(x) => x._anchorEl}
|
|
344
348
|
:strategy="${(x) => x.positionStrategy}"
|
|
345
|
-
:offset=${(x) => x._popupOffset}
|
|
349
|
+
:offset=${(x) => x.offset || x._popupOffset}
|
|
346
350
|
@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
|
|
347
351
|
@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
|
|
348
352
|
@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
|
|
@@ -22,7 +22,7 @@ const localized = require('../unbundled/localized.cjs');
|
|
|
22
22
|
const enums = require('../unbundled/enums.cjs');
|
|
23
23
|
const divider = require('../unbundled/divider.cjs');
|
|
24
24
|
|
|
25
|
-
const styles = "
|
|
25
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
26
26
|
|
|
27
27
|
var __defProp = Object.defineProperty;
|
|
28
28
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -373,7 +373,7 @@ const NumberFieldTemplate = (context) => {
|
|
|
373
373
|
return fastElement.html`
|
|
374
374
|
<div class="base ${getStateClasses}">
|
|
375
375
|
${fastElement.when((x) => x.label, renderLabel())}
|
|
376
|
-
<slot name="contextual-help"></slot>
|
|
376
|
+
<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
|
|
377
377
|
<div class="fieldset">
|
|
378
378
|
<div class="wrapper">
|
|
379
379
|
<input
|
|
@@ -5,7 +5,7 @@ import { iconDefinition } from '../icon/definition.js';
|
|
|
5
5
|
import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
|
|
6
6
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
7
7
|
import { contextualHelpDefinition } from '../contextual-help/definition.js';
|
|
8
|
-
import { DOM, attr, nullableNumberConverter, observable, when, ref, html } from '@microsoft/fast-element';
|
|
8
|
+
import { DOM, attr, nullableNumberConverter, observable, when, slotted, ref, html } from '@microsoft/fast-element';
|
|
9
9
|
import { keyArrowDown, keyArrowUp, classNames } from '@microsoft/fast-web-utilities';
|
|
10
10
|
import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
|
|
11
11
|
import { F as FormAssociated } from '../unbundled/form-associated.js';
|
|
@@ -18,7 +18,7 @@ import { L as Localized } from '../unbundled/localized.js';
|
|
|
18
18
|
import { S as Shape } from '../unbundled/enums.js';
|
|
19
19
|
import { D as Divider } from '../unbundled/divider.js';
|
|
20
20
|
|
|
21
|
-
const styles = "
|
|
21
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
22
22
|
|
|
23
23
|
var __defProp = Object.defineProperty;
|
|
24
24
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -369,7 +369,7 @@ const NumberFieldTemplate = (context) => {
|
|
|
369
369
|
return html`
|
|
370
370
|
<div class="base ${getStateClasses}">
|
|
371
371
|
${when((x) => x.label, renderLabel())}
|
|
372
|
-
<slot name="contextual-help"></slot>
|
|
372
|
+
<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
|
|
373
373
|
<div class="fieldset">
|
|
374
374
|
<div class="wrapper">
|
|
375
375
|
<input
|
package/number-field/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition12.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),A=require("../bundled/definition11.cjs"),y=require("../bundled/delegates-aria.cjs"),q=require("../bundled/form-associated.cjs"),D=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/class-names.cjs"),E=require("../bundled/when.cjs"),I=require("../bundled/ref.cjs"),O='.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var U=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&U(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},L=w(/\./),H=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends D.WithContextualHelp(g.WithFeedback(S.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(q.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?H:L}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.DOM.queueUpdate(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const W=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>P.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function R(){return r.html` <label for="control" class="label">
|
|
1
|
+
"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition12.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),q=require("../bundled/definition11.cjs"),y=require("../bundled/delegates-aria.cjs"),A=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),D=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/class-names.cjs"),E=require("../bundled/when.cjs"),I=require("../bundled/slotted.cjs"),O=require("../bundled/ref.cjs"),U=':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var L=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&L(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},H=w(/\./),W=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends S.WithContextualHelp(g.WithFeedback(D.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(A.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?W:H}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.DOM.queueUpdate(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const R=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>P.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function M(){return r.html` <label for="control" class="label">
|
|
2
2
|
${a=>a.label}
|
|
3
|
-
</label>`}function m(a){return a.shape===u.Shape.Pill?u.Shape.Pill:null}function f(a){return a.disabled||a.readOnly?"-1":null}function
|
|
3
|
+
</label>`}function m(a){return a.shape===u.Shape.Pill?u.Shape.Pill:null}function f(a){return a.disabled||a.readOnly?"-1":null}function K(a){const t=a.tagFor(x.Button),e=a.tagFor(T.Divider);return r.html`
|
|
4
4
|
<div class="control-buttons" ?inert="${o=>o.disabled||o.readOnly}">
|
|
5
5
|
<${t} id="subtract" icon="minus-line"
|
|
6
6
|
?disabled="${o=>o.disabled||o.readOnly}"
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
tabindex="${f}"
|
|
21
21
|
@click="${o=>o.stepUp()}"></${t}>
|
|
22
22
|
</div>
|
|
23
|
-
`}const
|
|
24
|
-
<div class="base ${
|
|
25
|
-
${E.when(e=>e.label,
|
|
26
|
-
<slot name="contextual-help"></slot>
|
|
23
|
+
`}const j=a=>{const t=a.tagFor(_.VisuallyHidden);return r.html`
|
|
24
|
+
<div class="base ${R}">
|
|
25
|
+
${E.when(e=>e.label,M())}
|
|
26
|
+
<slot name="contextual-help" ${I.slotted("_contextualHelpSlottedContent")}></slot>
|
|
27
27
|
<div class="fieldset">
|
|
28
28
|
<div class="wrapper">
|
|
29
29
|
<input
|
|
@@ -48,13 +48,13 @@
|
|
|
48
48
|
type="text"
|
|
49
49
|
aria-describedby="${e=>e._feedbackDescribedBy}"
|
|
50
50
|
${y.delegateAria()}
|
|
51
|
-
${
|
|
51
|
+
${O.ref("control")}
|
|
52
52
|
/>
|
|
53
53
|
</div>
|
|
54
|
-
${()=>
|
|
54
|
+
${()=>K(a)}
|
|
55
55
|
</div>
|
|
56
56
|
${e=>e._getFeedbackTemplate(a)}
|
|
57
57
|
<${t} id="value-announcement" role="status" aria-atomic="true">
|
|
58
58
|
${e=>e._updatedValueAnnouncement}</${t}>
|
|
59
59
|
</div>
|
|
60
|
-
`},
|
|
60
|
+
`},Y=r.defineVividComponent("number-field",n,j,[x.buttonDefinition,z.dividerDefinition,C.iconDefinition,g.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:U,shadowOptions:{delegatesFocus:!0}}),G=r.createRegisterFunction(Y);G();
|
package/number-field/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { B as
|
|
1
|
+
import { B as $, b as k } from "../bundled/definition3.js";
|
|
2
2
|
import { d as z } from "../bundled/definition14.js";
|
|
3
|
-
import { V as
|
|
3
|
+
import { V as C, v as D } from "../bundled/definition12.js";
|
|
4
4
|
import { i as V } from "../bundled/definition2.js";
|
|
5
5
|
import { W as A, f as S } from "../bundled/mixins.js";
|
|
6
6
|
import { V as F, D as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
|
|
@@ -18,12 +18,13 @@ import { b } from "../bundled/enums.js";
|
|
|
18
18
|
import { D as j } from "../bundled/divider.js";
|
|
19
19
|
import { c as Y } from "../bundled/class-names.js";
|
|
20
20
|
import { w as G } from "../bundled/when.js";
|
|
21
|
-
import {
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
import { s as J } from "../bundled/slotted.js";
|
|
22
|
+
import { r as Q } from "../bundled/ref.js";
|
|
23
|
+
const X = ':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';
|
|
24
|
+
var Z = Object.defineProperty, n = (a, t, e, o) => {
|
|
24
25
|
for (var l = void 0, s = a.length - 1, p; s >= 0; s--)
|
|
25
26
|
(p = a[s]) && (l = p(t, e, l) || l);
|
|
26
|
-
return l &&
|
|
27
|
+
return l && Z(t, e, l), l;
|
|
27
28
|
};
|
|
28
29
|
const m = {
|
|
29
30
|
up: 1,
|
|
@@ -43,7 +44,7 @@ const g = (a) => {
|
|
|
43
44
|
trailingDecimalSeparator: new RegExp(`${t}$`),
|
|
44
45
|
decimalSeparator: a
|
|
45
46
|
};
|
|
46
|
-
},
|
|
47
|
+
}, ee = g(/\./), te = g(/,/), f = /^-?((\d*\.\d+)|(\d+))$/;
|
|
47
48
|
class r extends U(
|
|
48
49
|
A(
|
|
49
50
|
W(
|
|
@@ -103,7 +104,7 @@ class r extends U(
|
|
|
103
104
|
* @internal
|
|
104
105
|
*/
|
|
105
106
|
get _numberPatterns() {
|
|
106
|
-
return this.locale.common.useCommaAsDecimalSeparator ?
|
|
107
|
+
return this.locale.common.useCommaAsDecimalSeparator ? te : ee;
|
|
107
108
|
}
|
|
108
109
|
#e(t) {
|
|
109
110
|
return t.replace(
|
|
@@ -247,7 +248,7 @@ n([
|
|
|
247
248
|
n([
|
|
248
249
|
i
|
|
249
250
|
], r.prototype, "autoComplete");
|
|
250
|
-
const
|
|
251
|
+
const ae = ({
|
|
251
252
|
errorValidationMessage: a,
|
|
252
253
|
disabled: t,
|
|
253
254
|
value: e,
|
|
@@ -270,7 +271,7 @@ const te = ({
|
|
|
270
271
|
["success", !!w],
|
|
271
272
|
[`size-${v}`, !!v]
|
|
272
273
|
);
|
|
273
|
-
function
|
|
274
|
+
function oe() {
|
|
274
275
|
return u` <label for="control" class="label">
|
|
275
276
|
${(a) => a.label}
|
|
276
277
|
</label>`;
|
|
@@ -281,8 +282,8 @@ function x(a) {
|
|
|
281
282
|
function _(a) {
|
|
282
283
|
return a.disabled || a.readOnly ? "-1" : null;
|
|
283
284
|
}
|
|
284
|
-
function
|
|
285
|
-
const t = a.tagFor(
|
|
285
|
+
function re(a) {
|
|
286
|
+
const t = a.tagFor($), e = a.tagFor(j);
|
|
286
287
|
return u`
|
|
287
288
|
<div class="control-buttons" ?inert="${(o) => o.disabled || o.readOnly}">
|
|
288
289
|
<${t} id="subtract" icon="minus-line"
|
|
@@ -305,12 +306,12 @@ function oe(a) {
|
|
|
305
306
|
</div>
|
|
306
307
|
`;
|
|
307
308
|
}
|
|
308
|
-
const
|
|
309
|
-
const t = a.tagFor(
|
|
309
|
+
const ne = (a) => {
|
|
310
|
+
const t = a.tagFor(C);
|
|
310
311
|
return u`
|
|
311
|
-
<div class="base ${
|
|
312
|
-
${G((e) => e.label,
|
|
313
|
-
<slot name="contextual-help"></slot>
|
|
312
|
+
<div class="base ${ae}">
|
|
313
|
+
${G((e) => e.label, oe())}
|
|
314
|
+
<slot name="contextual-help" ${J("_contextualHelpSlottedContent")}></slot>
|
|
314
315
|
<div class="fieldset">
|
|
315
316
|
<div class="wrapper">
|
|
316
317
|
<input
|
|
@@ -335,35 +336,35 @@ const re = (a) => {
|
|
|
335
336
|
type="text"
|
|
336
337
|
aria-describedby="${(e) => e._feedbackDescribedBy}"
|
|
337
338
|
${L()}
|
|
338
|
-
${
|
|
339
|
+
${Q("control")}
|
|
339
340
|
/>
|
|
340
341
|
</div>
|
|
341
|
-
${() =>
|
|
342
|
+
${() => re(a)}
|
|
342
343
|
</div>
|
|
343
344
|
${(e) => e._getFeedbackTemplate(a)}
|
|
344
345
|
<${t} id="value-announcement" role="status" aria-atomic="true">
|
|
345
346
|
${(e) => e._updatedValueAnnouncement}</${t}>
|
|
346
347
|
</div>
|
|
347
348
|
`;
|
|
348
|
-
},
|
|
349
|
+
}, ie = N(
|
|
349
350
|
"number-field",
|
|
350
351
|
r,
|
|
351
|
-
|
|
352
|
+
ne,
|
|
352
353
|
[
|
|
353
|
-
|
|
354
|
+
k,
|
|
354
355
|
z,
|
|
355
356
|
V,
|
|
356
357
|
S,
|
|
357
|
-
|
|
358
|
+
D,
|
|
358
359
|
T
|
|
359
360
|
],
|
|
360
361
|
{
|
|
361
|
-
styles:
|
|
362
|
+
styles: X,
|
|
362
363
|
shadowOptions: {
|
|
363
364
|
delegatesFocus: !0
|
|
364
365
|
}
|
|
365
366
|
}
|
|
366
|
-
),
|
|
367
|
-
|
|
367
|
+
), le = P(
|
|
368
|
+
ie
|
|
368
369
|
);
|
|
369
|
-
|
|
370
|
+
le();
|