@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.0 → 0.0.0-pr624.1
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/components/combobox/demo/api.min.js +33 -126
- package/components/combobox/demo/index.min.js +33 -126
- package/components/combobox/dist/index.js +33 -126
- package/components/combobox/dist/registered.js +33 -126
- package/components/datepicker/demo/api.min.js +33 -126
- package/components/datepicker/demo/index.min.js +33 -126
- package/components/datepicker/dist/index.js +33 -126
- package/components/datepicker/dist/registered.js +33 -126
- package/components/input/README.md +1 -1
- package/components/input/demo/api.md +6 -6
- package/components/input/demo/api.min.js +33 -126
- package/components/input/demo/index.md +4 -4
- package/components/input/demo/index.min.js +33 -126
- package/components/input/demo/readme.md +1 -1
- package/components/input/dist/auro-input.d.ts +2 -1
- package/components/input/dist/index.js +33 -126
- package/components/input/dist/registered.js +33 -126
- package/components/input/dist/styles/classic/color-css.d.ts +2 -0
- package/components/input/dist/styles/classic/style-css.d.ts +2 -0
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
6
|
|
|
7
|
-
var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:
|
|
7
|
+
var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
|
|
8
8
|
|
|
9
9
|
var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
|
|
10
10
|
|
|
@@ -14,6 +14,10 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
14
14
|
|
|
15
15
|
var tokensCss$4 = css`:host(:not(ondark)){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
16
16
|
|
|
17
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;cursor:text}.layout-classic .mainContent label{cursor:text;padding-top:4px;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);padding-bottom:8px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);height:auto}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start;padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;line-height:0;padding-bottom:0}.layout-classic .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-classic .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-classic .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color);justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}`;
|
|
18
|
+
|
|
19
|
+
var classicColorCss = css`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
|
|
20
|
+
|
|
17
21
|
var emphasizedStyleCss = css`:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{background:unset;width:100%;padding:0;border:0;outline:none;overflow:hidden;text-overflow:ellipsis}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized .accents,.layout-emphasized-left .accents,.layout-emphasized-right .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:24px}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:24px}.layout-emphasized-left .alertNotification{margin-right:8px}.layout-emphasized-left .clear{margin-left:8px}.layout-emphasized-right .alertNotification{margin-left:8px}.layout-emphasized-right .clear{margin-right:8px}`;
|
|
18
22
|
|
|
19
23
|
var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
@@ -4958,9 +4962,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
4958
4962
|
this.required = false;
|
|
4959
4963
|
this.setCustomValidityForType = undefined;
|
|
4960
4964
|
|
|
4961
|
-
this.layout = '
|
|
4965
|
+
this.layout = 'classic';
|
|
4962
4966
|
this.shape = 'rounded';
|
|
4963
|
-
this.size = '
|
|
4967
|
+
this.size = 'lg';
|
|
4964
4968
|
}
|
|
4965
4969
|
|
|
4966
4970
|
/**
|
|
@@ -7090,6 +7094,8 @@ class AuroInput extends BaseInput {
|
|
|
7090
7094
|
css`${styleCss$4}`,
|
|
7091
7095
|
css`${styleDefaultCss}`,
|
|
7092
7096
|
css`${tokensCss$4}`,
|
|
7097
|
+
css`${classicStyleCss}`,
|
|
7098
|
+
css`${classicColorCss}`,
|
|
7093
7099
|
css`${emphasizedStyleCss}`,
|
|
7094
7100
|
css`${emphasizedColorCss}`,
|
|
7095
7101
|
css`${snowflakeStyleCss}`
|
|
@@ -7200,14 +7206,19 @@ class AuroInput extends BaseInput {
|
|
|
7200
7206
|
/**
|
|
7201
7207
|
* Returns HTML for the HTML5 input element.
|
|
7202
7208
|
* @private
|
|
7209
|
+
* @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
|
|
7203
7210
|
* @returns {html} - Returns HTML for the HTML5 input element.
|
|
7204
7211
|
*/
|
|
7205
|
-
renderHtmlInput() {
|
|
7212
|
+
renderHtmlInput(hideInputWhenBlurred = false) {
|
|
7206
7213
|
const displayValueClasses = {
|
|
7207
7214
|
'displayValue': true,
|
|
7208
7215
|
'hasContent': this.hasDisplayValueContent,
|
|
7209
7216
|
'hasFocus': this.hasFocus,
|
|
7210
|
-
'withValue': this.value && this.value.length > 0
|
|
7217
|
+
'withValue': this.value && this.value.length > 0,
|
|
7218
|
+
};
|
|
7219
|
+
|
|
7220
|
+
const inputClasses = {
|
|
7221
|
+
'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
|
|
7211
7222
|
};
|
|
7212
7223
|
|
|
7213
7224
|
return html$1`
|
|
@@ -7230,6 +7241,7 @@ class AuroInput extends BaseInput {
|
|
|
7230
7241
|
autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7231
7242
|
autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
|
|
7232
7243
|
autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7244
|
+
class="${classMap(inputClasses)}"
|
|
7233
7245
|
id="${this.inputId}"
|
|
7234
7246
|
inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
|
|
7235
7247
|
lang="${ifDefined(this.lang)}"
|
|
@@ -7375,137 +7387,32 @@ class AuroInput extends BaseInput {
|
|
|
7375
7387
|
/**
|
|
7376
7388
|
* Returns HTML for the default layout.
|
|
7377
7389
|
* @private
|
|
7378
|
-
* @returns {
|
|
7390
|
+
* @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
|
|
7379
7391
|
*/
|
|
7380
7392
|
renderLayoutClassic() {
|
|
7381
|
-
const wrapperClasses = {
|
|
7382
|
-
'layoutDefault': true
|
|
7383
|
-
};
|
|
7384
|
-
|
|
7385
|
-
// is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
|
|
7386
|
-
const labelClasses = {
|
|
7387
|
-
'is-disabled': this.disabled,
|
|
7388
|
-
'withIcon': this.hasTypeIcon(),
|
|
7389
|
-
'withValue': this.value && this.value.length > 0
|
|
7390
|
-
};
|
|
7391
|
-
|
|
7392
7393
|
return html$1`
|
|
7393
|
-
<div
|
|
7394
|
-
|
|
7395
|
-
|
|
7396
|
-
|
|
7397
|
-
|
|
7398
|
-
|
|
7399
|
-
This should be cleaned up when auro-icon issue #31 is resolved. -->
|
|
7400
|
-
${this.inputIconName
|
|
7401
|
-
? repeat([this.inputIconName], (val) => val, (name) => html$1`
|
|
7402
|
-
<${this.iconTag}
|
|
7403
|
-
class="accentIcon"
|
|
7404
|
-
category="payment"
|
|
7405
|
-
name="${name}"
|
|
7406
|
-
part="accentIcon"
|
|
7407
|
-
?onDark="${this.onDark}"
|
|
7408
|
-
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
7409
|
-
</${this.iconTag}>
|
|
7410
|
-
`) : undefined
|
|
7411
|
-
}
|
|
7412
|
-
|
|
7413
|
-
${this.type === 'date'
|
|
7414
|
-
? html$1`
|
|
7415
|
-
<${this.iconTag}
|
|
7416
|
-
class="accentIcon"
|
|
7417
|
-
category="interface"
|
|
7418
|
-
name="calendar"
|
|
7419
|
-
part="accentIcon"
|
|
7420
|
-
?onDark="${this.onDark}"
|
|
7421
|
-
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
7422
|
-
</${this.iconTag}>`
|
|
7423
|
-
: undefined
|
|
7424
|
-
}
|
|
7425
|
-
</div>
|
|
7426
|
-
<label for=${this.id} class="${classMap(labelClasses)}" part="label">
|
|
7427
|
-
<slot name="label">
|
|
7428
|
-
${this.label}
|
|
7429
|
-
</slot>
|
|
7430
|
-
${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
|
|
7431
|
-
</label>
|
|
7432
|
-
|
|
7433
|
-
${this.renderHtmlInput()}
|
|
7394
|
+
<div
|
|
7395
|
+
@click="${this.handleClick}"
|
|
7396
|
+
class="${classMap(this.commonWrapperClasses)} thin"
|
|
7397
|
+
part="wrapper">
|
|
7398
|
+
<div class="accents left">
|
|
7399
|
+
${this.renderHtmlTypeIcon()}
|
|
7434
7400
|
</div>
|
|
7435
|
-
<div
|
|
7436
|
-
|
|
7437
|
-
|
|
7438
|
-
|
|
7439
|
-
${this.
|
|
7440
|
-
<div class="notification alertNotification">
|
|
7441
|
-
<${this.iconTag}
|
|
7442
|
-
category="alert"
|
|
7443
|
-
customColor
|
|
7444
|
-
name="error-stroke"
|
|
7445
|
-
</${this.iconTag}>
|
|
7446
|
-
</div>
|
|
7447
|
-
` : undefined}
|
|
7401
|
+
<div class="mainContent">
|
|
7402
|
+
${this.renderHtmlInput(true)}
|
|
7403
|
+
</div>
|
|
7404
|
+
<div class="accents right">
|
|
7405
|
+
${this.renderValidationErrorIconHtml()}
|
|
7448
7406
|
${this.hasValue ? html$1`
|
|
7449
|
-
${this.type === 'password' ? html$1`
|
|
7450
|
-
<div class="notification">
|
|
7451
|
-
<${this.buttonTag}
|
|
7452
|
-
@click="${this.handleClickShowPassword}"
|
|
7453
|
-
?onDark="${this.onDark}"
|
|
7454
|
-
aria-hidden="true"
|
|
7455
|
-
class="notificationBtn passwordBtn"
|
|
7456
|
-
tabindex="-1"
|
|
7457
|
-
variant="flat">
|
|
7458
|
-
<${this.iconTag}
|
|
7459
|
-
?hidden=${!this.showPassword}
|
|
7460
|
-
category="interface"
|
|
7461
|
-
customColor
|
|
7462
|
-
name="hide-password-stroke">
|
|
7463
|
-
</${this.iconTag}>
|
|
7464
|
-
<${this.iconTag}
|
|
7465
|
-
?hidden=${this.showPassword}
|
|
7466
|
-
category="interface"
|
|
7467
|
-
customColor
|
|
7468
|
-
name="view-password-stroke">
|
|
7469
|
-
</${this.iconTag}>
|
|
7470
|
-
</${this.buttonTag}>
|
|
7471
|
-
</div>
|
|
7472
|
-
` : undefined}
|
|
7473
7407
|
${!this.disabled && !this.readonly ? html$1`
|
|
7474
|
-
|
|
7475
|
-
<${this.buttonTag}
|
|
7476
|
-
@click="${this.handleClickClear}"
|
|
7477
|
-
?onDark="${this.onDark}"
|
|
7478
|
-
arialabel="${i18n(this.lang, 'clearInput')}"
|
|
7479
|
-
class="notificationBtn clearBtn"
|
|
7480
|
-
variant="flat">
|
|
7481
|
-
<${this.iconTag}
|
|
7482
|
-
category="interface"
|
|
7483
|
-
customColor
|
|
7484
|
-
name="x-lg">
|
|
7485
|
-
</${this.iconTag}>
|
|
7486
|
-
</${this.buttonTag}>
|
|
7487
|
-
</div>
|
|
7408
|
+
${this.renderHtmlActionClear()}
|
|
7488
7409
|
` : undefined}
|
|
7489
7410
|
` : undefined}
|
|
7490
7411
|
</div>
|
|
7491
7412
|
</div>
|
|
7492
|
-
|
|
7493
|
-
|
|
7494
|
-
|
|
7495
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7496
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
7497
|
-
<slot name="helptext">${this.getHelpText()}</slot>
|
|
7498
|
-
</p>
|
|
7499
|
-
</${this.helpTextTag}>
|
|
7500
|
-
`
|
|
7501
|
-
: html$1`
|
|
7502
|
-
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
7503
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
7504
|
-
${this.errorMessage}
|
|
7505
|
-
</p>
|
|
7506
|
-
</${this.helpTextTag}>
|
|
7507
|
-
`
|
|
7508
|
-
}
|
|
7413
|
+
<div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
|
|
7414
|
+
${this.renderHtmlHelpText()}
|
|
7415
|
+
</div>
|
|
7509
7416
|
`;
|
|
7510
7417
|
}
|
|
7511
7418
|
|
|
@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
6
|
|
|
7
|
-
var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:
|
|
7
|
+
var shapeSizeCss = css`.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md{min-height:72px;max-height:72px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}`;
|
|
8
8
|
|
|
9
9
|
var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}`;
|
|
10
10
|
|
|
@@ -14,6 +14,10 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
14
14
|
|
|
15
15
|
var tokensCss$4 = css`:host(:not(ondark)){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
16
16
|
|
|
17
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row}.layout-classic .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;cursor:text}.layout-classic .mainContent label{cursor:text;padding-top:4px;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);padding-bottom:8px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);height:auto}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start;padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;line-height:0;padding-bottom:0}.layout-classic .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-classic .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-classic .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color);justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}`;
|
|
18
|
+
|
|
19
|
+
var classicColorCss = css`.layout-default label{color:var(--ds-auro-input-label-text-color)}`;
|
|
20
|
+
|
|
17
21
|
var emphasizedStyleCss = css`:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{background:unset;width:100%;padding:0;border:0;outline:none;overflow:hidden;text-overflow:ellipsis}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.layout-emphasized .accents,.layout-emphasized-left .accents,.layout-emphasized-right .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:24px}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:24px}.layout-emphasized-left .alertNotification{margin-right:8px}.layout-emphasized-left .clear{margin-left:8px}.layout-emphasized-right .alertNotification{margin-left:8px}.layout-emphasized-right .clear{margin-right:8px}`;
|
|
18
22
|
|
|
19
23
|
var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
@@ -4958,9 +4962,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
4958
4962
|
this.required = false;
|
|
4959
4963
|
this.setCustomValidityForType = undefined;
|
|
4960
4964
|
|
|
4961
|
-
this.layout = '
|
|
4965
|
+
this.layout = 'classic';
|
|
4962
4966
|
this.shape = 'rounded';
|
|
4963
|
-
this.size = '
|
|
4967
|
+
this.size = 'lg';
|
|
4964
4968
|
}
|
|
4965
4969
|
|
|
4966
4970
|
/**
|
|
@@ -7090,6 +7094,8 @@ class AuroInput extends BaseInput {
|
|
|
7090
7094
|
css`${styleCss$4}`,
|
|
7091
7095
|
css`${styleDefaultCss}`,
|
|
7092
7096
|
css`${tokensCss$4}`,
|
|
7097
|
+
css`${classicStyleCss}`,
|
|
7098
|
+
css`${classicColorCss}`,
|
|
7093
7099
|
css`${emphasizedStyleCss}`,
|
|
7094
7100
|
css`${emphasizedColorCss}`,
|
|
7095
7101
|
css`${snowflakeStyleCss}`
|
|
@@ -7200,14 +7206,19 @@ class AuroInput extends BaseInput {
|
|
|
7200
7206
|
/**
|
|
7201
7207
|
* Returns HTML for the HTML5 input element.
|
|
7202
7208
|
* @private
|
|
7209
|
+
* @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
|
|
7203
7210
|
* @returns {html} - Returns HTML for the HTML5 input element.
|
|
7204
7211
|
*/
|
|
7205
|
-
renderHtmlInput() {
|
|
7212
|
+
renderHtmlInput(hideInputWhenBlurred = false) {
|
|
7206
7213
|
const displayValueClasses = {
|
|
7207
7214
|
'displayValue': true,
|
|
7208
7215
|
'hasContent': this.hasDisplayValueContent,
|
|
7209
7216
|
'hasFocus': this.hasFocus,
|
|
7210
|
-
'withValue': this.value && this.value.length > 0
|
|
7217
|
+
'withValue': this.value && this.value.length > 0,
|
|
7218
|
+
};
|
|
7219
|
+
|
|
7220
|
+
const inputClasses = {
|
|
7221
|
+
'util_displayHiddenVisually': hideInputWhenBlurred && !this.hasFocus && !this.value
|
|
7211
7222
|
};
|
|
7212
7223
|
|
|
7213
7224
|
return html$1`
|
|
@@ -7230,6 +7241,7 @@ class AuroInput extends BaseInput {
|
|
|
7230
7241
|
autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7231
7242
|
autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
|
|
7232
7243
|
autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7244
|
+
class="${classMap(inputClasses)}"
|
|
7233
7245
|
id="${this.inputId}"
|
|
7234
7246
|
inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
|
|
7235
7247
|
lang="${ifDefined(this.lang)}"
|
|
@@ -7375,137 +7387,32 @@ class AuroInput extends BaseInput {
|
|
|
7375
7387
|
/**
|
|
7376
7388
|
* Returns HTML for the default layout.
|
|
7377
7389
|
* @private
|
|
7378
|
-
* @returns {
|
|
7390
|
+
* @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
|
|
7379
7391
|
*/
|
|
7380
7392
|
renderLayoutClassic() {
|
|
7381
|
-
const wrapperClasses = {
|
|
7382
|
-
'layoutDefault': true
|
|
7383
|
-
};
|
|
7384
|
-
|
|
7385
|
-
// is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
|
|
7386
|
-
const labelClasses = {
|
|
7387
|
-
'is-disabled': this.disabled,
|
|
7388
|
-
'withIcon': this.hasTypeIcon(),
|
|
7389
|
-
'withValue': this.value && this.value.length > 0
|
|
7390
|
-
};
|
|
7391
|
-
|
|
7392
7393
|
return html$1`
|
|
7393
|
-
<div
|
|
7394
|
-
|
|
7395
|
-
|
|
7396
|
-
|
|
7397
|
-
|
|
7398
|
-
|
|
7399
|
-
This should be cleaned up when auro-icon issue #31 is resolved. -->
|
|
7400
|
-
${this.inputIconName
|
|
7401
|
-
? repeat([this.inputIconName], (val) => val, (name) => html$1`
|
|
7402
|
-
<${this.iconTag}
|
|
7403
|
-
class="accentIcon"
|
|
7404
|
-
category="payment"
|
|
7405
|
-
name="${name}"
|
|
7406
|
-
part="accentIcon"
|
|
7407
|
-
?onDark="${this.onDark}"
|
|
7408
|
-
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
7409
|
-
</${this.iconTag}>
|
|
7410
|
-
`) : undefined
|
|
7411
|
-
}
|
|
7412
|
-
|
|
7413
|
-
${this.type === 'date'
|
|
7414
|
-
? html$1`
|
|
7415
|
-
<${this.iconTag}
|
|
7416
|
-
class="accentIcon"
|
|
7417
|
-
category="interface"
|
|
7418
|
-
name="calendar"
|
|
7419
|
-
part="accentIcon"
|
|
7420
|
-
?onDark="${this.onDark}"
|
|
7421
|
-
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
7422
|
-
</${this.iconTag}>`
|
|
7423
|
-
: undefined
|
|
7424
|
-
}
|
|
7425
|
-
</div>
|
|
7426
|
-
<label for=${this.id} class="${classMap(labelClasses)}" part="label">
|
|
7427
|
-
<slot name="label">
|
|
7428
|
-
${this.label}
|
|
7429
|
-
</slot>
|
|
7430
|
-
${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
|
|
7431
|
-
</label>
|
|
7432
|
-
|
|
7433
|
-
${this.renderHtmlInput()}
|
|
7394
|
+
<div
|
|
7395
|
+
@click="${this.handleClick}"
|
|
7396
|
+
class="${classMap(this.commonWrapperClasses)} thin"
|
|
7397
|
+
part="wrapper">
|
|
7398
|
+
<div class="accents left">
|
|
7399
|
+
${this.renderHtmlTypeIcon()}
|
|
7434
7400
|
</div>
|
|
7435
|
-
<div
|
|
7436
|
-
|
|
7437
|
-
|
|
7438
|
-
|
|
7439
|
-
${this.
|
|
7440
|
-
<div class="notification alertNotification">
|
|
7441
|
-
<${this.iconTag}
|
|
7442
|
-
category="alert"
|
|
7443
|
-
customColor
|
|
7444
|
-
name="error-stroke"
|
|
7445
|
-
</${this.iconTag}>
|
|
7446
|
-
</div>
|
|
7447
|
-
` : undefined}
|
|
7401
|
+
<div class="mainContent">
|
|
7402
|
+
${this.renderHtmlInput(true)}
|
|
7403
|
+
</div>
|
|
7404
|
+
<div class="accents right">
|
|
7405
|
+
${this.renderValidationErrorIconHtml()}
|
|
7448
7406
|
${this.hasValue ? html$1`
|
|
7449
|
-
${this.type === 'password' ? html$1`
|
|
7450
|
-
<div class="notification">
|
|
7451
|
-
<${this.buttonTag}
|
|
7452
|
-
@click="${this.handleClickShowPassword}"
|
|
7453
|
-
?onDark="${this.onDark}"
|
|
7454
|
-
aria-hidden="true"
|
|
7455
|
-
class="notificationBtn passwordBtn"
|
|
7456
|
-
tabindex="-1"
|
|
7457
|
-
variant="flat">
|
|
7458
|
-
<${this.iconTag}
|
|
7459
|
-
?hidden=${!this.showPassword}
|
|
7460
|
-
category="interface"
|
|
7461
|
-
customColor
|
|
7462
|
-
name="hide-password-stroke">
|
|
7463
|
-
</${this.iconTag}>
|
|
7464
|
-
<${this.iconTag}
|
|
7465
|
-
?hidden=${this.showPassword}
|
|
7466
|
-
category="interface"
|
|
7467
|
-
customColor
|
|
7468
|
-
name="view-password-stroke">
|
|
7469
|
-
</${this.iconTag}>
|
|
7470
|
-
</${this.buttonTag}>
|
|
7471
|
-
</div>
|
|
7472
|
-
` : undefined}
|
|
7473
7407
|
${!this.disabled && !this.readonly ? html$1`
|
|
7474
|
-
|
|
7475
|
-
<${this.buttonTag}
|
|
7476
|
-
@click="${this.handleClickClear}"
|
|
7477
|
-
?onDark="${this.onDark}"
|
|
7478
|
-
arialabel="${i18n(this.lang, 'clearInput')}"
|
|
7479
|
-
class="notificationBtn clearBtn"
|
|
7480
|
-
variant="flat">
|
|
7481
|
-
<${this.iconTag}
|
|
7482
|
-
category="interface"
|
|
7483
|
-
customColor
|
|
7484
|
-
name="x-lg">
|
|
7485
|
-
</${this.iconTag}>
|
|
7486
|
-
</${this.buttonTag}>
|
|
7487
|
-
</div>
|
|
7408
|
+
${this.renderHtmlActionClear()}
|
|
7488
7409
|
` : undefined}
|
|
7489
7410
|
` : undefined}
|
|
7490
7411
|
</div>
|
|
7491
7412
|
</div>
|
|
7492
|
-
|
|
7493
|
-
|
|
7494
|
-
|
|
7495
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7496
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
7497
|
-
<slot name="helptext">${this.getHelpText()}</slot>
|
|
7498
|
-
</p>
|
|
7499
|
-
</${this.helpTextTag}>
|
|
7500
|
-
`
|
|
7501
|
-
: html$1`
|
|
7502
|
-
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
7503
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
7504
|
-
${this.errorMessage}
|
|
7505
|
-
</p>
|
|
7506
|
-
</${this.helpTextTag}>
|
|
7507
|
-
`
|
|
7508
|
-
}
|
|
7413
|
+
<div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
|
|
7414
|
+
${this.renderHtmlHelpText()}
|
|
7415
|
+
</div>
|
|
7509
7416
|
`;
|
|
7510
7417
|
}
|
|
7511
7418
|
|
package/package.json
CHANGED