@universal-material/web
Version:
Material web components
174 lines • 6.23 kB
JavaScript
import { __decorate } from "tslib";
import { consume, ContextProvider } from '@lit/context';
import { html, LitElement, nothing } from 'lit';
import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles as baseStyles } from '../shared/base.styles.js';
import { styles } from './field-base.styles.js';
import { fieldDefaultsContext } from './field-defaults-context.js';
export class UmFieldBase extends LitElement {
static { this.styles = [baseStyles, styles]; }
static setDefaults(contextRoot, config) {
return new ContextProvider(contextRoot, {
context: fieldDefaultsContext,
initialValue: config,
});
}
constructor() {
super();
this.variant = 'filled';
this.hideCounter = false;
/**
* Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
*/
this.empty = false;
this.disabled = false;
/**
* Get or sets where or not the field is in a visually invalid state.
*/
this.invalid = false;
/**
* Whether the field has a leading icon or not
*
* _Note:_ Readonly
*/
this.hasLeadingIcon = false;
/**
* Whether the field has a trailing icon or not
*
* _Note:_ Readonly
*/
this.hasTrailingIcon = false;
/**
* Whether the field has an error text or not
*
* _Note:_ Readonly
*/
this.hasErrorText = false;
this.variant = undefined;
}
render() {
const variant = this.variant ?? this.config?.variant ?? 'filled';
const classes = {
[variant]: true,
'no-label': !this.label,
};
const counter = html `
<slot class="counter" name="counter">
<div>${this.counter ?? this._innerCounter}</div>
</slot>
`;
const outline = html `
<div class="outline">
<div class="outline-start"></div>
<div class="outline-notch">
<div class="outline-notch-label">${this.label}</div>
</div>
<div class="outline-end"></div>
</div>
`;
return html `
<div class="container ${classMap(classes)}">
${variant === 'outlined' ? outline : nothing}
<slot class="icon leading-icon" name="leading-icon" ="${this.handleLeadingIconSlotChange}"></slot>
<label class="label" id="label">${this.label}</label>
<div class="input-wrapper" part="wrapper">${this.renderControl()}</div>
<slot class="icon trailing-icon" name="trailing-icon" ="${this.handleTrailingIconSlotChange}">
<span>${this.renderDefaultTrailingIcon()}</span>
</slot>
</div>
<div class="supporting-text" id="supporting-text">
<slot class="error-text" name="error-text" ="${this.handleErrorTextSlotChange}">
<div>${this.errorText}</div>
</slot>
<slot name="supporting-text" id="supporting-text">
<div>${this.supportingText}</div>
</slot>
${this.hideCounter ? nothing : counter}
</div>
${this.renderAfterContent()}
`;
}
renderAfterContent() {
return html ``;
}
connectedCallback() {
super.connectedCallback();
this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
}
handleLeadingIconSlotChange() {
this._labelElement.style.transition = 'none';
this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
setTimeout(() => {
this._labelElement.style.transition = '';
});
}
handleTrailingIconSlotChange() {
this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
}
handleErrorTextSlotChange() {
this.hasErrorText = this.assignedErrorTexts.length > 0;
}
renderDefaultTrailingIcon() {
return nothing;
}
}
__decorate([
consume({ context: fieldDefaultsContext, subscribe: true }),
state()
], UmFieldBase.prototype, "config", void 0);
__decorate([
property()
], UmFieldBase.prototype, "variant", void 0);
__decorate([
property()
], UmFieldBase.prototype, "label", void 0);
__decorate([
state()
], UmFieldBase.prototype, "_innerCounter", void 0);
__decorate([
property()
], UmFieldBase.prototype, "counter", void 0);
__decorate([
property({ type: Boolean, attribute: 'hide-counter' })
], UmFieldBase.prototype, "hideCounter", void 0);
__decorate([
property({ attribute: 'supporting-text' })
], UmFieldBase.prototype, "supportingText", void 0);
__decorate([
property({ attribute: 'error-text' })
], UmFieldBase.prototype, "errorText", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmFieldBase.prototype, "empty", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmFieldBase.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmFieldBase.prototype, "invalid", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
], UmFieldBase.prototype, "hasLeadingIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
], UmFieldBase.prototype, "hasTrailingIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-error-text', reflect: true })
], UmFieldBase.prototype, "hasErrorText", void 0);
__decorate([
queryAssignedElements({ slot: 'leading-icon', flatten: true })
], UmFieldBase.prototype, "assignedLeadingIcons", void 0);
__decorate([
queryAssignedElements({ slot: 'trailing-icon', flatten: true })
], UmFieldBase.prototype, "assignedTrailingIcons", void 0);
__decorate([
queryAssignedElements({ slot: 'error-text', flatten: true })
], UmFieldBase.prototype, "assignedErrorTexts", void 0);
__decorate([
query('.label', true)
], UmFieldBase.prototype, "_labelElement", void 0);
__decorate([
query('.container', true)
], UmFieldBase.prototype, "_container", void 0);
//# sourceMappingURL=field-base.js.map