@aqua-ds/web-components
Version:
AquaDS Web Components
199 lines (194 loc) • 14 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { L as Label } from './label.js';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { T as TEXT_AREA_MAX_LENGTH, D as DEFAULT_MAX_LENGTH, M as MAX_LENGTH } from './MaxLength.js';
import { d as defineCustomElement$3 } from './aq-helper-text2.js';
import { d as defineCustomElement$2 } from './aq-label2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
import { E as Events } from './Events.js';
const ICON_DISCLOSURE = 'aq-icon-chevron-down';
const ICON_CLOSE = 'aq-icon-close';
const aqTextFieldCss = ".aq-text-field{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.aq-text-field__container{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;min-height:var(--spacing-size-big);border:var(--spacing-size-basic) solid var(--color-paper-light);background:var(--color-white);border-radius:var(--spacing-size-minor);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:calc(var(--spacing-size-small) * 3) calc(var(--spacing-size-small) * 3) calc(var(--spacing-size-small) * 3) var(--spacing-size-short);gap:var(--spacing-size-short)}.aq-text-field__container--plain:not(:hover,.aq-text-field__container--error,.aq-text-field__container--disabled){border:var(--spacing-size-basic) solid transparent}.aq-text-field__container:focus-within{z-index:1;-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);border:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-text-field__container--error{border:var(--spacing-size-basic) solid var(--color-danger-base) !important}.aq-text-field__container--disabled{color:var(--color-paper-dark);background-color:var(--color-paper-lighter);pointer-events:none}.aq-text-field__container--readonly{pointer-events:none;background-color:transparent;padding-left:0}.aq-text-field__container--textarea{-ms-flex-align:baseline;align-items:baseline}.aq-text-field__container:focus-within{z-index:1;-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);border:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-text-field__left-content{white-space:nowrap;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-text-field__left-content:empty{display:none}.aq-text-field__input{position:relative;font-size:var(--font-size-s);font-family:var(--font-family-basic);font-style:normal;line-height:var(--font-line-height-7);background:var(--color-white);border:none;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--spacing-size-minor);outline:none;padding:0;-webkit-transition:all 0.2s;transition:all 0.2s;-ms-flex:0 1 auto;flex:0 1 auto;resize:none}.aq-text-field__input ::-webkit-input-placeholder{color:var(--color-paper-darker)}.aq-text-field__input ::-moz-placeholder{color:var(--color-paper-darker)}.aq-text-field__input :-ms-input-placeholder{color:var(--color-paper-darker)}.aq-text-field__input ::-ms-input-placeholder{color:var(--color-paper-darker)}.aq-text-field__input ::placeholder{color:var(--color-paper-darker)}.aq-text-field__input[disabled]{color:var(--color-paper-dark);background-color:var(--color-paper-lighter)}.aq-text-field__input[readonly]{background-color:transparent}.aq-text-field__input:hover .aq-text-field__icon-clear--on-hover{opacity:1;-webkit-transition:all 0.2s;transition:all 0.2s}.aq-text-field__right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-text-field__right em{color:var(--color-paper-base);cursor:pointer}.aq-text-field__icon-clear{font-size:var(--font-size-xs)}.aq-text-field__icon-clear--on-hover{opacity:0}.aq-text-field__icon-clear--on-hover:hover{opacity:1;-webkit-transition:all 0.2s;transition:all 0.2s}.aq-text-field__label{display:-ms-inline-flexbox;display:inline-flex;margin-bottom:var(--spacing-size-minor);line-height:var(--font-line-height-7)}.aq-text-field__sublabel{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;white-space:nowrap;gap:var(--spacing-size-small);font-size:var(--font-size-xs);line-height:var(--font-line-height-7);z-index:1;color:var(--color-ink-lighter);font-weight:var(--font-weight-semi-bold);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aq-text-field__footer-container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--spacing-size-minor)}.aq-text-field__icon{font-size:var(--font-size-m)}";
const AqTextField = /*@__PURE__*/ proxyCustomElement(class AqTextField extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.clear = createEvent(this, "clear", 7);
this.clickDisclosure = createEvent(this, "clickDisclosure", 7);
this.value = '';
this.type = 'text';
this.autocomplete = 'off';
this.iconClear = ICON_CLOSE;
this.label = '';
this.sublabel = '';
this.helperText = '';
this.placeholder = '';
this.icon = '';
this.textareaHeight = TEXT_AREA_MAX_LENGTH;
this.maxLength = DEFAULT_MAX_LENGTH;
this.tooltipWidth = '';
this.info = '';
this.isTextarea = false;
this.strictLength = false;
this.charCounter = false;
this.isDisabled = false;
this.isReadonly = false;
this.isRequired = false;
this.isError = false;
this.hasDisclosure = false;
this.iconDisclosure = ICON_DISCLOSURE;
this.hasClear = false;
this.showClearOnHover = false;
this.isPlain = false;
this.localType = this.type;
this.hasFocus = false;
this.isPassword = false;
this.showPassword = false;
this.labelHelper = Label(this);
}
valueChanged() {
this.value = this.getValue();
}
getValueLength() {
const newValue = this.getValue();
return newValue.length;
}
getMaxLength() {
return this.strictLength ? this.maxLength : MAX_LENGTH;
}
getValue() {
return this.value.toString();
}
getHasError() {
return this.isError && !this.isDisabled;
}
getInputTypeConfig() {
this.localType = this.type;
if (this.type === 'password')
this.isPassword = true;
}
getShowPasswordIcon() {
return {
'aq-icon-sight-on': !this.showPassword,
'aq-icon-sight-off': this.showPassword,
};
}
renderCounter() {
return h("aq-helper-text", null, h("span", { slot: "text" }, `${this.getValueLength()}/${this.maxLength}`));
}
getContainerClass() {
return {
'aq-text-field__container--plain': this.isPlain,
'aq-text-field__container--error': this.getHasError(),
'aq-text-field__container--disabled': this.isDisabled,
'aq-text-field__container--readonly': this.isReadonly,
'aq-text-field__container--textarea': this.isTextarea,
'aq-text-field__container': true,
};
}
componentWillLoad() {
this.getInputTypeConfig();
this.idTextField = this.idTextField || new UniqueIdGenerator().generateId();
}
/* Events */
handleInput(event) {
const input = event.target;
if (input)
this.value = input.value || '';
const newValue = this.getValue();
emitEvent(Events.EVENT_NAME_INPUT, this.hostElement, { value: newValue, event }, event);
}
handleChange(event) {
emitEvent(Events.EVENT_NAME_CHANGE, this.hostElement, { value: this.value, event }, event);
}
handleFocus(hasFocus) {
this.hasFocus = hasFocus;
emitEvent(hasFocus ? Events.EVENT_NAME_FOCUS : Events.EVENT_NAME_BLUR, this.hostElement);
}
handleClose(event) {
this.clear.emit({ clear: true, value: this.value, event });
}
handleDisclosure() {
this.clickDisclosure.emit();
}
toggleShowPasswordIcon() {
this.showPassword = !this.showPassword;
this.localType = this.showPassword ? 'text' : 'password';
}
render() {
const showDisclosure = this.hasDisclosure && !this.isPassword && !this.isReadonly;
const showClear = this.hasClear && !this.isPassword;
return (h("div", { key: '325a6410ca618c5662456195b64b15c39ce1a997', class: "aq-text-field" }, this.labelHelper.isLabelVisible && (h("aq-label", { key: '5fec979c446398d07658ed2d195e6915643425b7', class: "aq-text-field__label", for: this.name || this.idTextField, ...this.labelHelper.bindsLabel }, h("span", { key: '5c3501f1be2f5ea074738d1d68fa97bcef8d91df', slot: "text" }, this.label))), h("div", { key: '420212f61986cb49409cfbf7306909dd7ea8d0eb', class: this.getContainerClass() }, (this.sublabel || this.icon) && (h("label", { key: '5ff0a554c5e31752b0e8a294f7fb8c003e4796c0', class: "aq-text-field__sublabel" }, !this.isTextarea && h("em", { key: 'e09272f42c6e5a91e0f237fc642b59d414725533', class: `${this.icon} aq-text-field__icon` }), h("span", { key: 'ecd49893259cca297bbc844d50f72ed0dd618114' }, this.sublabel))), h("div", { key: 'd1084de233a0120b78cd451d4b638c3b11a6f9ed', class: "aq-text-field__left-content" }, h("slot", { key: '0266b92b56140169073c3aca943ec404fb6c4f52', name: "left-content" })), !this.isTextarea && (h("input", { key: 'e04aa18baece1b70679c6788042a1f9abb545c3a', class: "aq-text-field__input", placeholder: this.placeholder, autoComplete: this.autocomplete, id: this.idTextField, name: this.name, type: this.localType, value: this.value, disabled: this.isDisabled, readonly: this.isReadonly, required: this.isRequired, maxLength: this.getMaxLength(), onInput: e => this.handleInput(e), onChange: e => this.handleChange(e), onFocus: () => this.handleFocus(true), onBlur: () => this.handleFocus(false) })), this.isTextarea && (h("textarea", { key: '368407095295c83e2507243c0a40807a246b5f10', class: "aq-text-field__input", placeholder: this.placeholder, id: this.idTextField, name: this.name, value: this.value, disabled: this.isDisabled, readonly: this.isReadonly, required: this.isRequired, maxLength: this.getMaxLength(), onInput: e => this.handleInput(e), onChange: e => this.handleChange(e), onFocus: () => this.handleFocus(true), onBlur: () => this.handleFocus(false), style: { height: `${this.textareaHeight}px` } })), h("div", { key: '14a5458b3040dbbc486fbc05b8c1d4641ff99ca6', class: "aq-text-field__right" }, showClear && (h("em", { key: 'ce92c4c03921048f2c0b5edb378f658d72c60894', class: `aq-text-field__icon-clear ${this.showClearOnHover ? 'aq-text-field__icon-clear--on-hover' : ''} ${this.iconClear}`, onClick: e => this.handleClose(e) })), showDisclosure && h("em", { key: 'c17d93d5f5316d3ecee2bf61bd4d62083ef4ae7b', class: this.iconDisclosure, onClick: () => this.handleDisclosure() }), this.isPassword && h("em", { key: '47d5bf1598cd4664f018cfbf818364edd89dba5c', onClick: () => this.toggleShowPasswordIcon(), class: this.getShowPasswordIcon() }))), (this.helperText || this.charCounter) && (h("div", { key: '4a378399cc3075e84703dd0a938e3cffcc54d85b', class: "aq-text-field__footer-container" }, h("aq-helper-text", { key: '9aab112222b92d0a3b5763eaee08d83214dd8647', isError: this.getHasError() }, h("span", { key: 'ee8118ab08dc4025e1cea978470efd4f6f0fa896', slot: "text" }, this.helperText)), this.charCounter && this.renderCounter()))));
}
get hostElement() { return this; }
static get watchers() { return {
"value": ["valueChanged"]
}; }
static get style() { return aqTextFieldCss; }
}, [260, "aq-text-field", {
"value": [1544],
"idTextField": [1025, "id-text-field"],
"name": [1],
"type": [1],
"autocomplete": [1],
"iconClear": [1, "icon-clear"],
"label": [1],
"sublabel": [1],
"helperText": [1, "helper-text"],
"placeholder": [1],
"icon": [1],
"textareaHeight": [1, "textarea-height"],
"maxLength": [2, "max-length"],
"tooltipWidth": [1, "tooltip-width"],
"info": [1],
"isTextarea": [4, "is-textarea"],
"strictLength": [4, "strict-length"],
"charCounter": [4, "char-counter"],
"isDisabled": [4, "is-disabled"],
"isReadonly": [4, "is-readonly"],
"isRequired": [4, "is-required"],
"isError": [1540, "is-error"],
"hasDisclosure": [4, "has-disclosure"],
"iconDisclosure": [1, "icon-disclosure"],
"hasClear": [4, "has-clear"],
"showClearOnHover": [4, "show-clear-on-hover"],
"isPlain": [4, "is-plain"],
"localType": [32],
"hasFocus": [32],
"isPassword": [32],
"showPassword": [32]
}, undefined, {
"value": ["valueChanged"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-text-field", "aq-helper-text", "aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-text-field":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTextField);
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqTextField as A, defineCustomElement as d };