@getflip/swirl-components 0.394.0 → 0.395.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/components.json +38 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +1 -1
- package/dist/cjs/swirl-text-input.cjs.entry.js +11 -6
- package/dist/collection/components/swirl-modal/swirl-modal.css +3 -1
- package/dist/collection/components/swirl-text-input/swirl-text-input.css +4 -0
- package/dist/collection/components/swirl-text-input/swirl-text-input.js +43 -5
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -4
- package/dist/components/swirl-modal.js +1 -1
- package/dist/components/swirl-text-input2.js +12 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-modal.entry.js +1 -1
- package/dist/esm/swirl-text-input.entry.js +11 -6
- package/dist/swirl-components/{p-b80acce3.entry.js → p-16ec5574.entry.js} +1 -1
- package/dist/swirl-components/p-363c660d.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-text-input/swirl-text-input.d.ts +3 -1
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/swirl-components/p-492d52f6.entry.js +0 -1
|
@@ -5,11 +5,12 @@ var index$1 = require('./index-DcAhLZUH.js');
|
|
|
5
5
|
var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
|
|
6
6
|
require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
|
|
8
|
+
const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
|
|
9
9
|
|
|
10
10
|
const SwirlTextInput = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
+
this.clear = index.createEvent(this, "clear", 7);
|
|
13
14
|
this.inputBlur = index.createEvent(this, "inputBlur", 7);
|
|
14
15
|
this.inputFocus = index.createEvent(this, "inputFocus", 7);
|
|
15
16
|
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
@@ -23,11 +24,12 @@ const SwirlTextInput = class {
|
|
|
23
24
|
this.iconSize = 24;
|
|
24
25
|
this.showPassword = false;
|
|
25
26
|
this.mediaQueryUnsubscribe = () => { };
|
|
26
|
-
this.
|
|
27
|
+
this.handleClearClick = () => {
|
|
27
28
|
this.inputEl.value = "";
|
|
28
29
|
this.value = "";
|
|
29
30
|
this.valueChange.emit("");
|
|
30
31
|
this.inputEl.focus();
|
|
32
|
+
this.clear.emit();
|
|
31
33
|
};
|
|
32
34
|
this.onChange = (event) => {
|
|
33
35
|
const el = event.target;
|
|
@@ -150,18 +152,21 @@ const SwirlTextInput = class {
|
|
|
150
152
|
!this.readonly &&
|
|
151
153
|
Boolean(this.value) &&
|
|
152
154
|
!showPasswordToggle &&
|
|
153
|
-
!showStepper
|
|
154
|
-
|
|
155
|
+
!showStepper;
|
|
156
|
+
const characterCount = this.value?.length ?? 0;
|
|
157
|
+
const showCharacterCounter = this.showCharacterCounter &&
|
|
158
|
+
(!this.showCharacterCounterNearLimit ||
|
|
159
|
+
characterCount >= this.maxLength * 0.8);
|
|
155
160
|
const type = this.type === "password" && this.showPassword ? "text" : this.type;
|
|
156
161
|
const className = index$1.classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
|
|
157
162
|
"text-input--auto-grow": this.autoGrow,
|
|
158
|
-
"text-input--clearable":
|
|
163
|
+
"text-input--clearable": showClearButton,
|
|
159
164
|
"text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
|
|
160
165
|
"text-input--has-suffix": Boolean(this.suffixLabel),
|
|
161
166
|
"text-input--inline": this.inline,
|
|
162
167
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
163
168
|
});
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
169
|
+
return (index.h(index.Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, index.h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (index.h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, index.h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), index.h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
165
170
|
}
|
|
166
171
|
static get watchers() { return {
|
|
167
172
|
"value": ["watchValue"]
|
|
@@ -542,8 +542,9 @@
|
|
|
542
542
|
display: flex;
|
|
543
543
|
overflow: hidden;
|
|
544
544
|
overflow-y: auto;
|
|
545
|
-
|
|
545
|
+
min-width: 0;
|
|
546
546
|
flex-basis: 100%;
|
|
547
|
+
flex-grow: 1;
|
|
547
548
|
flex-direction: column;
|
|
548
549
|
}
|
|
549
550
|
|
|
@@ -562,6 +563,7 @@
|
|
|
562
563
|
overflow: visible;
|
|
563
564
|
overflow-x: hidden;
|
|
564
565
|
overflow-y: auto;
|
|
566
|
+
min-width: 0;
|
|
565
567
|
max-width: none;
|
|
566
568
|
max-height: 40%;
|
|
567
569
|
padding-right: var(--s-space-16);
|
|
@@ -28,6 +28,10 @@
|
|
|
28
28
|
padding-right: calc(1.5rem + var(--s-space-8));
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
.text-input--clearable .text-input__character-counter, .text-input--type-number .text-input__character-counter, .text-input--type-password .text-input__character-counter {
|
|
32
|
+
padding-right: calc(1.5rem + var(--s-space-8));
|
|
33
|
+
}
|
|
34
|
+
|
|
31
35
|
.text-input--show-password .text-input__input {
|
|
32
36
|
width: 100%;
|
|
33
37
|
}
|
|
@@ -13,11 +13,12 @@ export class SwirlTextInput {
|
|
|
13
13
|
this.iconSize = 24;
|
|
14
14
|
this.showPassword = false;
|
|
15
15
|
this.mediaQueryUnsubscribe = () => { };
|
|
16
|
-
this.
|
|
16
|
+
this.handleClearClick = () => {
|
|
17
17
|
this.inputEl.value = "";
|
|
18
18
|
this.value = "";
|
|
19
19
|
this.valueChange.emit("");
|
|
20
20
|
this.inputEl.focus();
|
|
21
|
+
this.clear.emit();
|
|
21
22
|
};
|
|
22
23
|
this.onChange = (event) => {
|
|
23
24
|
const el = event.target;
|
|
@@ -140,18 +141,21 @@ export class SwirlTextInput {
|
|
|
140
141
|
!this.readonly &&
|
|
141
142
|
Boolean(this.value) &&
|
|
142
143
|
!showPasswordToggle &&
|
|
143
|
-
!showStepper
|
|
144
|
-
|
|
144
|
+
!showStepper;
|
|
145
|
+
const characterCount = this.value?.length ?? 0;
|
|
146
|
+
const showCharacterCounter = this.showCharacterCounter &&
|
|
147
|
+
(!this.showCharacterCounterNearLimit ||
|
|
148
|
+
characterCount >= this.maxLength * 0.8);
|
|
145
149
|
const type = this.type === "password" && this.showPassword ? "text" : this.type;
|
|
146
150
|
const className = classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
|
|
147
151
|
"text-input--auto-grow": this.autoGrow,
|
|
148
|
-
"text-input--clearable":
|
|
152
|
+
"text-input--clearable": showClearButton,
|
|
149
153
|
"text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
|
|
150
154
|
"text-input--has-suffix": Boolean(this.suffixLabel),
|
|
151
155
|
"text-input--inline": this.inline,
|
|
152
156
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
153
157
|
});
|
|
154
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: '288582bcca41f2ae8cf3c904ed02fcb0a976be7b' }, h("div", { key: '817b0708b7bebf147ded143b4f0dea6206959d49', class: className }, this.prefixLabel && (h("span", { key: '1e1bd63e29fb41cdc58237b78e55b6744bb28cda', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '731a75748b874b5414668e4c4d412fa078b54b3e', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ac53e8616fba0f233c51e95b7a0686d03dc552c', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '48f457dfb8c41726623a34b68ba5f7622705145f', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '5f853517b77fcb680f985c5a4624732026c7d39a', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'a11670fac677c71297420e1ab2b7ce23dfe99671', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e098155b27a7d5dd49019b2c1956b0b94e0c3035', class: "text-input__stepper" }, h("button", { key: '008c30c8f3bc1d7b4227db185b367d0216c051da', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '656e442c33bd16d69057fb59158d0900e8640b2c', size: this.iconSize })), h("button", { key: 'f1123bb4c9440e71727846782135c31a912cebf5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'bbd40a1605fa6b3757d308fd5fca6ef5cd133b59', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '98b9121e7b79872e05cd4d4d1c956405118ba0b8', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
155
159
|
}
|
|
156
160
|
static get is() { return "swirl-text-input"; }
|
|
157
161
|
static get encapsulation() { return "scoped"; }
|
|
@@ -622,6 +626,25 @@ export class SwirlTextInput {
|
|
|
622
626
|
"setter": false,
|
|
623
627
|
"reflect": false
|
|
624
628
|
},
|
|
629
|
+
"showCharacterCounterNearLimit": {
|
|
630
|
+
"type": "boolean",
|
|
631
|
+
"attribute": "show-character-counter-near-limit",
|
|
632
|
+
"mutable": false,
|
|
633
|
+
"complexType": {
|
|
634
|
+
"original": "boolean",
|
|
635
|
+
"resolved": "boolean",
|
|
636
|
+
"references": {}
|
|
637
|
+
},
|
|
638
|
+
"required": false,
|
|
639
|
+
"optional": true,
|
|
640
|
+
"docs": {
|
|
641
|
+
"tags": [],
|
|
642
|
+
"text": ""
|
|
643
|
+
},
|
|
644
|
+
"getter": false,
|
|
645
|
+
"setter": false,
|
|
646
|
+
"reflect": false
|
|
647
|
+
},
|
|
625
648
|
"spellCheck": {
|
|
626
649
|
"type": "boolean",
|
|
627
650
|
"attribute": "spell-check",
|
|
@@ -848,6 +871,21 @@ export class SwirlTextInput {
|
|
|
848
871
|
}
|
|
849
872
|
static get events() {
|
|
850
873
|
return [{
|
|
874
|
+
"method": "clear",
|
|
875
|
+
"name": "clear",
|
|
876
|
+
"bubbles": true,
|
|
877
|
+
"cancelable": true,
|
|
878
|
+
"composed": true,
|
|
879
|
+
"docs": {
|
|
880
|
+
"tags": [],
|
|
881
|
+
"text": ""
|
|
882
|
+
},
|
|
883
|
+
"complexType": {
|
|
884
|
+
"original": "void",
|
|
885
|
+
"resolved": "void",
|
|
886
|
+
"references": {}
|
|
887
|
+
}
|
|
888
|
+
}, {
|
|
851
889
|
"method": "inputBlur",
|
|
852
890
|
"name": "inputBlur",
|
|
853
891
|
"bubbles": true,
|