igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
177 lines • 6.45 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, isServer, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { createAbortHandle } from '../common/abort-handler.js';
import { registerComponent } from '../common/definitions/register.js';
import { InternalInvalidEvent, InternalResetEvent, } from '../common/mixins/forms/types.js';
import { partMap } from '../common/part-map.js';
import { isEmpty, toKebabCase } from '../common/util.js';
import IgcIconComponent from '../icon/icon.js';
import { all as inputThemes } from '../input/themes/themes.js';
import { styles as shared } from './themes/shared/validator.common.css.js';
import { styles } from './themes/validator.base.css.js';
const ALL_SLOTS_SELECTOR = 'slot';
const QUERY_CONFIG = { flatten: true };
const VALIDITY_KEYS = [
'badInput',
'customError',
'patternMismatch',
'rangeOverflow',
'rangeUnderflow',
'stepMismatch',
'tooLong',
'tooShort',
'typeMismatch',
'valueMissing',
];
function* activeValidationSlots(validity) {
if (!validity.valid) {
yield 'invalid';
}
for (const key of VALIDITY_KEYS) {
if (validity[key]) {
yield toKebabCase(key);
}
}
}
export default class IgcValidationContainerComponent extends LitElement {
static { this.tagName = 'igc-validator'; }
static { this.styles = [styles, shared]; }
static register() {
registerComponent(IgcValidationContainerComponent, IgcIconComponent);
}
static create(host, config = {
id: 'helper-text',
hasHelperText: true,
}) {
const helperText = config.hasHelperText
? html `<slot name="helper-text" slot="helper-text"></slot>`
: nothing;
const validationSlots = host.hasUpdated
? Iterator.from(activeValidationSlots(host.validity))
.map((name) => html `<slot name=${name} slot=${name}></slot>`)
.toArray()
: nothing;
return html `
<igc-validator
id=${ifDefined(config.id)}
part=${ifDefined(config.part)}
slot=${ifDefined(config.slot)}
?invalid=${host.invalid}
.target=${host}
exportparts="helper-text, validation-message, validation-icon"
>
${helperText}${validationSlots}
</igc-validator>
`;
}
set target(value) {
if (this._target === value) {
return;
}
this._abortHandle.abort();
const { signal } = this._abortHandle;
this._target = value;
this._target.addEventListener(InternalInvalidEvent, this, { signal });
this._target.addEventListener(InternalResetEvent, this, { signal });
}
get target() {
return this._target;
}
constructor() {
super();
this._abortHandle = createAbortHandle();
this.invalid = false;
addThemingController(this, inputThemes);
}
createRenderRoot() {
const root = super.createRenderRoot();
root.addEventListener('slotchange', this);
return root;
}
handleEvent(event) {
switch (event.type) {
case InternalInvalidEvent:
this.invalid = true;
break;
case InternalResetEvent:
this.invalid = false;
break;
}
this.requestUpdate();
}
_collectProjectedSlots() {
const validation = new Set();
if (isServer || !this.hasUpdated) {
return { isProjectionEmpty: false, validation };
}
const slots = Array.from(this.renderRoot.querySelectorAll(ALL_SLOTS_SELECTOR));
let isProjectionEmpty = true;
for (const slot of slots) {
if (isEmpty(slot.assignedElements(QUERY_CONFIG))) {
continue;
}
isProjectionEmpty = false;
if (slot.name && slot.name !== 'helper-text') {
validation.add(slot.name);
}
}
return { isProjectionEmpty, validation };
}
_renderValidationMessage(slotName, projectedSlots) {
const hasProjectedIcon = projectedSlots.has(slotName);
const parts = { 'validation-message': true, empty: !hasProjectedIcon };
const icon = hasProjectedIcon
? html `
<igc-icon
aria-hidden="true"
name="error"
part="validation-icon"
></igc-icon>
`
: nothing;
return html `<div part=${partMap(parts)}>
${icon}<slot name=${slotName}></slot>
</div>`;
}
_renderHelper(hasValidationProjection) {
return this.invalid && hasValidationProjection
? nothing
: html `<slot name="helper-text"></slot>`;
}
firstUpdated() {
if (this.invalid) {
queueMicrotask(() => this.requestUpdate());
}
}
render() {
const { isProjectionEmpty, validation } = this._collectProjectedSlots();
const messages = this.hasUpdated && this.invalid
? Iterator.from(activeValidationSlots(this.target.validity))
.map((name) => this._renderValidationMessage(name, validation))
.toArray()
: nothing;
return html `
<div
part=${partMap({ 'helper-text': true, empty: isProjectionEmpty })}
aria-live="polite"
>
${messages}${this._renderHelper(!isEmpty(validation))}
</div>
`;
}
}
__decorate([
property({ type: Boolean })
], IgcValidationContainerComponent.prototype, "invalid", void 0);
__decorate([
property({ attribute: false })
], IgcValidationContainerComponent.prototype, "target", null);
//# sourceMappingURL=validation-container.js.map