@aqua-ds/web-components
Version:
AquaDS Web Components
293 lines (288 loc) • 16.2 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 { D as DEFAULT_MAX_LENGTH } from './MaxLength.js';
import { d as defineCustomElement$5 } from './aq-helper-text2.js';
import { d as defineCustomElement$4 } from './aq-label2.js';
import { d as defineCustomElement$3 } from './aq-tag2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
const aqTagFieldCss = ".aq-tag-field{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;width:100%}.aq-tag-field__label{display:-ms-inline-flexbox;display:inline-flex;margin-bottom:var(--spacing-size-minor);line-height:var(--font-line-height-7)}.aq-tag-field__sublabel{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;white-space:nowrap;gap:var(--spacing-size-small);color:var(--color-ink-lighter);font-size:var(--font-size-xs);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-7);z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aq-tag-field__icon{font-size:var(--font-size-m)}.aq-tag-field__left-content{white-space:nowrap;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-tag-field__left-content:empty{display:none}.aq-tag-field__icon-clear{font-size:var(--font-size-xs);opacity:0}.aq-tag-field__icon-clear:hover{opacity:1;-webkit-transition:all 0.2s;transition:all 0.2s}.aq-tag-field__input{position:relative;width:100%;-ms-flex:1 0 120px;flex:1 0 120px;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;resize:none}.aq-tag-field__input ::-webkit-input-placeholder{color:var(--color-paper-darker)}.aq-tag-field__input ::-moz-placeholder{color:var(--color-paper-darker)}.aq-tag-field__input :-ms-input-placeholder{color:var(--color-paper-darker)}.aq-tag-field__input ::-ms-input-placeholder{color:var(--color-paper-darker)}.aq-tag-field__input ::placeholder{color:var(--color-paper-darker)}.aq-tag-field__input[disabled]{color:var(--color-paper-dark);background-color:var(--color-paper-lighter)}.aq-tag-field__input[readonly]{background-color:transparent}.aq-tag-field__right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-tag-field__right em{color:var(--color-paper-base);cursor:pointer}.aq-tag-field__footer-container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:end;justify-content:end;margin-top:var(--spacing-size-minor)}.aq-tag-field__container{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-wrap:wrap;flex-wrap:wrap;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) var(--spacing-size-short) calc(var(--spacing-size-small) * 3) var(--spacing-size-short);gap:var(--spacing-size-short)}.aq-tag-field__container--plain:not(:hover,.aq-tag-field__container--error){border:var(--spacing-size-basic) solid transparent}.aq-tag-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-tag-field__container--error{border:var(--spacing-size-basic) solid var(--color-danger-base) !important}.aq-tag-field__container--disabled{color:var(--color-paper-dark);background-color:var(--color-paper-lighter);pointer-events:none}.aq-tag-field__container--readonly{border:var(--spacing-size-basic) solid transparent;pointer-events:none;background-color:transparent;padding-left:0}.aq-tag-field__container--textarea{-ms-flex-align:baseline;align-items:baseline}.aq-tag-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-tag-field__container:hover .aq-tag-field__right>.aq-tag-field__icon-clear{opacity:1 !important;-webkit-transition:all 0.2s;transition:all 0.2s}.aq-tag-field__container:active{-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}";
const AqTagField$1 = /*@__PURE__*/ proxyCustomElement(class AqTagField extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.textChange = createEvent(this, "textChange", 7);
this.closeTag = createEvent(this, "closeTag", 7);
this.value = [];
this.textValue = '';
this.autocomplete = 'off';
this.placeholder = '';
this.maxLength = DEFAULT_MAX_LENGTH;
this.strictLength = false;
this.icon = '';
this.label = '';
this.sublabel = '';
this.info = '';
this.tooltipWidth = '';
this.helperText = '';
this.isRequired = false;
this.isError = false;
this.isDisabled = false;
this.isReadonly = false;
this.isPlain = false;
this.hasClear = false;
this.maxSelect = 5;
this.maxShowSelected = 3;
this.addOnKey = 'Enter';
this.overflowText = '+';
this.clearOnEscape = false;
this.showSelectedCounter = false;
this.validator = () => (true);
this.items = [];
this.itemsShowedInTag = [];
this.canDeleteTag = false;
this.labelHelper = Label(this);
this.handleKeyUp = (event) => {
if (event.key === 'Backspace' || event.key === 'Delete') {
const trimmed = this.textValue.trim() || '';
if (trimmed.length === 0) {
this.canDeleteTag = true;
}
else {
this.canDeleteTag = false;
}
}
};
this.handleKeyDown = (event) => {
const value = this.textValue.trim();
switch (event.key) {
case this.normalizedAddOnKey:
event.preventDefault();
this.addNewTagValue(value);
break;
case 'Escape':
if (this.clearOnEscape)
this.clearInputAndItems();
break;
case 'Backspace':
case 'Delete':
const trimmed = this.textValue.trim() || '';
if (trimmed.length === 0 && this.canDeleteTag && this.items.length > 0) {
this.deleteItem();
this.canDeleteTag = false;
}
if (trimmed.length > 0)
this.canDeleteTag = false;
break;
}
};
}
valueChanged() {
this.textValue = this.getValue();
}
itemsChanged() {
this.validateShowSelected();
this.emitItems();
}
valueWatcher(newValue = []) {
if (!this.areArraysEqual(this.items, newValue)) {
this.items = [...this.validateItems(newValue)];
}
}
// Component API
async setTagFieldValues(newConfig) {
this.items = [...this.validateItems(newConfig)];
}
async addTag(newTag) {
this.addNewTagValue(newTag);
}
async removeTag(idx) {
const newValue = [...this.items];
newValue.splice(idx, 1);
this.items = [...newValue];
}
async clearSelection() {
this.clearSelectedItems();
}
get normalizedAddOnKey() {
if (this.addOnKey === 'Spacebar')
return ' ';
return this.addOnKey;
}
get overflowCount() {
const hiddenItemsNumber = this.items.length - this.maxShowSelected;
return hiddenItemsNumber > 0 ? hiddenItemsNumber : 0;
}
// Utility functions
areArraysEqual(a, b) {
return a.length === b.length && a.every((val, idx) => val === b[idx]);
}
validateItems(items) {
const validTags = items
.filter((val) => this.validator(val) && val)
.slice(0, this.maxSelect);
return validTags;
}
addNewTagValue(value) {
if (this.validator(value) && value && this.items.length < this.maxSelect) {
this.items = [...this.items, value];
this.textValue = '';
requestAnimationFrame(() => this.inputEl?.focus());
}
}
validateShowSelected() {
this.itemsShowedInTag = [...this.items];
this.itemsShowedInTag = this.items.slice(0, this.maxShowSelected);
}
getMaxLength() {
return this.strictLength ? this.maxLength : 524288;
}
getValue() {
return this.textValue.toString();
}
getHasError() {
return this.isError && !this.isDisabled;
}
renderCounter() {
return h("aq-helper-text", null, h("span", { slot: "text" }, `${this.items.length}/${this.maxSelect}`));
}
onClosedTag(idx) {
const removedTag = this.items.splice(idx, 1);
this.items = [...this.items];
this.closeTag.emit({ value: removedTag[0], idx });
}
clearInputAndItems() {
this.textValue = '';
this.clearSelectedItems();
}
clearOverflowItems() {
this.items = this.items.slice(0, this.maxShowSelected);
}
deleteItem() {
this.items.splice(-1, 1);
this.items = [...this.items];
requestAnimationFrame(() => this.inputEl?.focus());
}
emitItems() {
this.value = [...this.items];
emitEvent('input', this.hostElement, { value: this.value });
emitEvent('change', this.hostElement, { value: this.value });
}
getContainerClass() {
return {
'aq-tag-field__container--plain': this.isPlain,
'aq-tag-field__container--error': this.getHasError(),
'aq-tag-field__container--disabled': this.isDisabled,
'aq-tag-field__container--readonly': this.isReadonly,
'aq-tag-field__container': true,
};
}
componentWillLoad() {
this.idTagField = this.idTagField || new UniqueIdGenerator().generateId();
this.valueWatcher(this.value);
}
/* Events */
handleInput(event) {
event.stopPropagation();
const input = event.target;
if (input) {
this.textValue = input.value || '';
this.textChange.emit({ value: this.textValue });
}
}
clearSelectedItems() {
this.items = [...[]];
}
render() {
const showClear = this.hasClear && (!!this.textValue || this.items.length > 0);
return (h("div", { key: '506038f1c062140e5588da04a0be9048cde55cba', class: "aq-tag-field" }, this.labelHelper.isLabelVisible && (h("aq-label", { key: '49eedb6701ea7aa729026e2edf118ba8fcb0faff', class: "aq-tag-field__label", for: this.idTagField, ...this.labelHelper.bindsLabel }, h("span", { key: 'b3dd95bea4eb14cbdb2068dd35584cd52d10c857', slot: "text" }, this.label))), h("div", { key: '1cdde67a9b6db3a493e95a706b4e03886c874480', class: this.getContainerClass() }, (this.sublabel || this.icon) &&
h("span", { key: 'd877347e175967596bf8f74bcf598e58e746cd99', class: "aq-tag-field__sublabel" }, this.icon && h("em", { key: '674b1d5927390621c78e8d8b22ebced5d7ea8511', class: `${this.icon} aq-tag-field__icon` }), this.sublabel && h("span", { key: 'e1d315f4e1167b13e391efe05b9e3a0487a66976' }, this.sublabel)), h("div", { key: '93ed30ed3be239a1ad0c98efd99d89b004d24427', class: "aq-tag-field__left-content" }, h("slot", { key: '3f8a12f2cdb731452bcdb02a4643e44b86af173b', name: "left-content" })), this.itemsShowedInTag.map((tag, idx) => (h("aq-tag", { key: `${tag}-${idx}`, text: tag, hasCloseIcon: true, onClose: () => this.onClosedTag(idx) }))), this.overflowCount > 0 && (h("aq-tag", { key: "overflow-tag", text: `${this.overflowCount}${this.overflowText}`, hasCloseIcon: true, onClose: () => this.clearOverflowItems() })), h("input", { key: '7fe2cc0185e36e69c63a4427a0df3885168e3e0d', class: "aq-tag-field__input", type: "text", ref: el => this.inputEl = el, placeholder: this.placeholder, autoComplete: this.autocomplete, id: this.idTagField, name: this.name, value: this.textValue, disabled: this.isDisabled, readonly: this.isReadonly, required: this.isRequired, maxLength: this.getMaxLength(), onInput: (e) => this.handleInput(e), onChange: (e) => e.stopPropagation(), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }), showClear &&
h("div", { key: 'a790979f8bd11f51d1e42161a3c856b2ff02061a', class: "aq-tag-field__right" }, h("em", { key: 'c67456c227ebce5628671182193927fe9ef4547a', class: 'aq-tag-field__icon-clear aq-icon-close', onClick: () => this.clearInputAndItems() }))), h("div", { key: '768ecf5fb1a5cc48d61f6054a129b22b087d5c85', class: "aq-tag-field__footer-container" }, this.showSelectedCounter &&
this.renderCounter())));
}
get hostElement() { return this; }
static get watchers() { return {
"textValue": ["valueChanged"],
"items": ["itemsChanged"],
"value": ["valueWatcher"]
}; }
static get style() { return aqTagFieldCss; }
}, [260, "aq-tag-field", {
"value": [1040],
"textValue": [1537, "text-value"],
"idTagField": [1025, "id-tag-field"],
"name": [1],
"autocomplete": [1],
"placeholder": [1],
"maxLength": [2, "max-length"],
"strictLength": [4, "strict-length"],
"icon": [1],
"label": [1],
"sublabel": [1],
"info": [1],
"tooltipWidth": [1, "tooltip-width"],
"helperText": [1, "helper-text"],
"isRequired": [4, "is-required"],
"isError": [1540, "is-error"],
"isDisabled": [4, "is-disabled"],
"isReadonly": [4, "is-readonly"],
"isPlain": [4, "is-plain"],
"hasClear": [4, "has-clear"],
"maxSelect": [2, "max-select"],
"maxShowSelected": [2, "max-show-selected"],
"addOnKey": [1, "add-on-key"],
"overflowText": [1, "overflow-text"],
"clearOnEscape": [4, "clear-on-escape"],
"showSelectedCounter": [4, "show-selected-counter"],
"validator": [16],
"items": [32],
"itemsShowedInTag": [32],
"canDeleteTag": [32],
"setTagFieldValues": [64],
"addTag": [64],
"removeTag": [64],
"clearSelection": [64]
}, undefined, {
"textValue": ["valueChanged"],
"items": ["itemsChanged"],
"value": ["valueWatcher"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-tag-field", "aq-helper-text", "aq-label", "aq-tag", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-tag-field":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTagField$1);
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-tag":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqTagField = AqTagField$1;
const defineCustomElement = defineCustomElement$1;
export { AqTagField, defineCustomElement };