@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
248 lines (247 loc) • 19.1 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { live } from "lit-html/directives/live.js";
import { html } from "lit-html";
import { throttle } from "lodash-es";
import { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, createEvent, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
import { useWatchAttributes } from "@arcgis/lumina/controllers";
import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { n as numberStringFormatter } from "../../chunks/locale.js";
import { c as createObserver } from "../../chunks/observers.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { g as guid } from "../../chunks/guid.js";
import { V as Validation } from "../../chunks/Validation.js";
import { s as syncHiddenFormInput } from "../../chunks/input.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
assistiveText: "assistive-text",
characterLimit: "character-limit",
content: "content",
container: "container",
footer: "footer",
characterOverLimit: "character--over-limit",
readOnly: "readonly",
textAreaInvalid: "text-area--invalid",
footerSlotted: "footer--slotted",
hide: "hide",
footerEndSlotOnly: "footer--end-only",
textArea: "text-area",
textAreaOnly: "text-area--only",
wrapper: "wrapper"
};
const IDS = {
validationMessage: "textAreaValidationMessage"
};
const SLOTS = {
footerStart: "footer-start",
footerEnd: "footer-end"
};
const RESIZE_TIMEOUT = 100;
const NO_DIMENSIONS = Object.freeze({ height: 0, width: 0 });
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:inline-block;block-size:100%;inline-size:100%;--calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-border-input));--calcite-internal-text-area-footer-border-color: var( --calcite-text-area-footer-border-color, var(--calcite-internal-text-area-border-color) );--calcite-internal-text-area-corner-radius: var( --calcite-text-area-corner-radius, var(--calcite-corner-radius-default) );--calcite-internal-text-area-shadow: var(--calcite-text-area-shadow, var(--calcite-shadow-none));--calcite-internal-text-area-footer-background-color: var( --calcite-text-area-footer-background-color, var(--calcite-text-area-background-color, var(--calcite-color-foreground-1)) );min-block-size:var(--calcite-text-area-min-height, calc(2 * var(--calcite-internal-text-area-padding-block) + 2 * var(--calcite-border-width-sm)));min-inline-size:var(--calcite-text-area-min-width, 12rem)}.wrapper{box-sizing:border-box;block-size:100%;inline-size:100%;box-shadow:var(--calcite-internal-text-area-shadow);border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area,.footer{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));padding-block:var(--calcite-internal-text-area-padding-block);padding-inline:var(--calcite-internal-text-area-padding-inline)}.footer{background-color:var(--calcite-internal-text-area-footer-background-color);border-radius:0 0 var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius)}.text-area{position:relative;margin:0;box-sizing:border-box;display:block;inline-size:100%;font-family:var(--calcite-font-family);--calcite-internal-text-area-border-block-end-color: var(--calcite-internal-text-area-border-color);border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-border-color);border-block-end-color:var(--calcite-internal-text-area-border-block-end-color);color:var(--calcite-text-area-text-color, var(--calcite-color-text-1));font-family:var(--calcite-sans-family);max-block-size:var(--calcite-text-area-max-height);min-block-size:calc(var(--calcite-text-area-min-height, 0px) - var(--calcite-internal-text-area-footer-min-height, 0px));max-inline-size:var(--calcite-text-area-max-width);min-inline-size:var(--calcite-text-area-min-width, 12rem);background-color:var(--calcite-text-area-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-internal-text-area-corner-radius) var(--calcite-internal-text-area-corner-radius) 0 0}.text-area::placeholder{font-weight:var(--calcite-font-weight-normal)}@media screen and (max-width: 480px){.text-area{resize:none}}.text-area:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.text-area--invalid{--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}.text-area.text-area--invalid:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.text-area.footer--slotted{min-inline-size:18rem}.text-area.text-area--only{border-radius:var(--calcite-internal-text-area-corner-radius)}.text-area:not(.text-area--only,.text-area--invalid){--calcite-internal-text-area-border-block-end-color: var( --calcite-text-area-divider-color, var(--calcite-color-border-3) )}.footer{box-sizing:border-box;display:flex;align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-internal-text-area-footer-border-color);border-block-start:var(--calcite-border-width-none);min-block-size:var(--calcite-internal-text-area-footer-min-height)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--1));font-weight:var(--calcite-font-weight-regular);color:var(--calcite-text-area-character-limit-text-color, var(--calcite-color-text-2));padding-inline-start:var(--calcite-spacing-md)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}.readonly{background-color:var(--calcite-text-area-background-color, var(--calcite-color-background));font-weight:var(--calcite-font-weight-medium)}.footer.readonly{background-color:var(--calcite-internal-text-area-footer-background-color, var(--calcite-color-background))}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-area.text-area--only{block-size:100%;min-block-size:var(--calcite-text-area-min-height, 0)}:host([resize=none]) .text-area{resize:none}:host([resize=horizontal]) .text-area{resize:horizontal}:host([resize=vertical]) .text-area{resize:vertical}:host([scale=s]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-xxs);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-sm);--calcite-internal-text-area-footer-min-height: 1.75rem}:host([scale=s]) .text-area,:host([scale=s]) .footer,:host([scale=s]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size--2))}:host([scale=s]) .character-limit{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-sm);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-md);--calcite-internal-text-area-footer-min-height: 2.25rem}:host([scale=l]){--calcite-internal-text-area-padding-block: var(--calcite-spacing-md);--calcite-internal-text-area-padding-inline: var(--calcite-spacing-lg);--calcite-internal-text-area-footer-min-height: 2.75rem}:host([scale=l]) .text-area,:host([scale=l]) .footer,:host([scale=l]) .character-limit{font-size:var(--calcite-text-area-font-size, var(--calcite-font-size-0))}:host([scale=l]) .character-limit{padding-inline-start:var(--calcite-spacing-lg)}:host([status=invalid]){--calcite-internal-text-area-border-color: var(--calcite-color-status-danger)}:host([status=invalid]) .text-area:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .text-area,:host([disabled]) .footer{opacity:var(--calcite-opacity-half)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0;opacity:0;outline:none;padding:0;position:absolute;inset:0;transform:none;-webkit-appearance:none;z-index:-1}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
class TextArea extends LitElement {
constructor() {
super(...arguments);
this.attributeWatch = useWatchAttributes(["autofocus", "spellcheck"], this.handleGlobalAttributesChanged);
this.footerEl = createRef();
this.guid = guid();
this.resizeObserver = createObserver("resize", async () => {
await this.componentOnReady();
const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth, validationMessageHeight } = this.getHeightAndWidthOfElements();
if (footerWidth > 0 && footerWidth !== textAreaWidth) {
this.footerEl.value.style.width = `${textAreaWidth}px`;
}
if (this.resize === "none") {
return;
}
const { width: elStyleWidth, height: elStyleHeight } = getComputedStyle(this.el);
if (elWidth !== textAreaWidth && elStyleWidth !== "auto") {
this.updateSizeToAuto("width");
}
if (elHeight !== textAreaHeight + footerHeight + validationMessageHeight && elStyleHeight !== "auto") {
this.updateSizeToAuto("height");
}
});
this.updateSizeToAuto = throttle((dimension) => {
this.el.style[dimension] = "auto";
}, RESIZE_TIMEOUT, { leading: false });
this.messages = useT9n({ blocking: true });
this.disabled = false;
this.groupSeparator = false;
this.limitText = false;
this.readOnly = false;
this.required = false;
this.resize = "both";
this.scale = "m";
this.status = "idle";
this.validity = {
valid: false,
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valueMissing: false
};
this.value = "";
this.wrap = "soft";
this.calciteTextAreaChange = createEvent();
this.calciteTextAreaInput = createEvent();
}
static {
this.properties = { endSlotHasElements: [16, {}, { state: true }], startSlotHasElements: [16, {}, { state: true }], columns: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], label: 1, limitText: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], numberingSystem: 1, placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], resize: [3, {}, { reflect: true }], rows: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
async selectText() {
await this.componentOnReady();
this.textAreaEl.select();
}
async setFocus() {
await componentFocusable(this);
this.textAreaEl.focus();
}
connectedCallback() {
super.connectedCallback();
connectLabel(this);
connectForm(this);
}
updated() {
updateHostInteraction(this);
this.setTextAreaHeight();
}
disconnectedCallback() {
super.disconnectedCallback();
disconnectLabel(this);
disconnectForm(this);
this.resizeObserver?.disconnect();
this.updateSizeToAuto?.cancel();
}
handleGlobalAttributesChanged() {
this.requestUpdate();
}
onLabelClick() {
this.setFocus();
}
handleInput(event) {
this.value = event.target["value"];
this.calciteTextAreaInput.emit();
}
handleChange() {
this.calciteTextAreaChange.emit();
}
contentSlotChangeHandler() {
if (!this.value) {
const nodes = this.el.childNodes;
nodes.forEach((el) => {
if (el.nodeName === "#text") {
this.value = el.nodeValue.trim();
}
});
}
}
getLocalizedCharacterLength() {
const currentLength = this.value ? this.value.length.toString() : "0";
const maxLength = this.maxLength.toString();
if (this.numberingSystem === "latn") {
return { currentLength, maxLength };
}
numberStringFormatter.numberFormatOptions = {
locale: this.messages._lang,
numberingSystem: this.numberingSystem,
signDisplay: "never",
useGrouping: this.groupSeparator
};
return {
currentLength: numberStringFormatter.localize(currentLength),
maxLength: numberStringFormatter.localize(maxLength)
};
}
syncHiddenFormInput(input) {
input.setCustomValidity("");
if (this.isCharacterLimitExceeded()) {
input.setCustomValidity(this.replacePlaceholdersInMessages());
}
syncHiddenFormInput("textarea", this, input);
}
setTextAreaEl(el) {
if (!el) {
return;
}
this.textAreaEl = el;
this.resizeObserver?.observe(el);
}
setTextAreaHeight() {
const { textAreaHeight, elHeight, footerHeight, validationMessageHeight } = this.getHeightAndWidthOfElements();
if (footerHeight > 0 && textAreaHeight + footerHeight + validationMessageHeight != elHeight) {
this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
}
}
getHeightAndWidthOfElements() {
const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl ? this.textAreaEl.getBoundingClientRect() : NO_DIMENSIONS;
const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
const { height: footerHeight, width: footerWidth } = this.footerEl.value ? this.footerEl.value.getBoundingClientRect() : NO_DIMENSIONS;
const { height: validationMessageHeight } = this.validationMessageEl ? this.validationMessageEl.getBoundingClientRect() : NO_DIMENSIONS;
return {
textAreaHeight,
textAreaWidth,
elHeight,
elWidth,
footerHeight,
footerWidth,
validationMessageHeight
};
}
replacePlaceholdersInMessages() {
return this.messages.tooLong.replace("{maxLength}", this.localizedCharacterLengthObj.maxLength).replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
}
isCharacterLimitExceeded() {
return this.value?.length > this.maxLength;
}
setValidationRef(el) {
if (!el) {
return;
}
this.validationMessageEl = el;
}
render() {
const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}><textarea aria-describedby=${this.guid ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid" || this.isCharacterLimitExceeded()} .ariaLabel=${getLabelText(this)} .autofocus=${this.el.autofocus} class=${safeClassMap({
[CSS.textArea]: true,
[CSS.readOnly]: this.readOnly,
[CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
[CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
[CSS.textAreaOnly]: !hasFooter
})} .cols=${this.columns} .disabled=${this.disabled} maxlength=${(this.limitText ? this.maxLength : void 0) ?? nothing} name=${this.name ?? nothing} @change=${this.handleChange} @input=${this.handleInput} placeholder=${this.placeholder ?? nothing} .readOnly=${this.readOnly} .required=${this.required} .rows=${this.rows} spellcheck=${this.el.spellcheck ?? nothing} .value=${live(this.value ?? "")} wrap=${this.wrap ?? nothing} ${ref(this.setTextAreaEl)}></textarea><span class=${safeClassMap({ [CSS.content]: true })}><slot @slotchange=${this.contentSlotChangeHandler}></slot></span><footer class=${safeClassMap({
[CSS.footer]: true,
[CSS.readOnly]: this.readOnly,
[CSS.hide]: !hasFooter
})} ${ref(this.footerEl)}><div class=${safeClassMap({
[CSS.container]: true,
[CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements
})}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${HiddenFormInputSlot({ component: this })}${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
}
renderCharacterLimit() {
if (this.maxLength) {
this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
return html`<span class=${safeClassMap(CSS.characterLimit)}><span class=${safeClassMap({ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() })}>${this.localizedCharacterLengthObj.currentLength}</span>/${this.localizedCharacterLengthObj.maxLength}</span>`;
}
return null;
}
}
customElement("calcite-text-area", TextArea);
export {
TextArea
};