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.
43 lines • 1.52 kB
JavaScript
import { html, nothing } from 'lit';
import IgcValidationContainerComponent from '../../validation-container/validation-container.js';
import { partMap } from '../part-map.js';
let _nextInputId = 1;
export function nextInputId() {
return `input-${_nextInputId++}`;
}
function renderLabel(forId, label) {
return label
? html `<label part="label" for=${forId}>${label}</label>`
: nothing;
}
function renderPrefix() {
return html `<div part="prefix"><slot name="prefix"></slot></div>`;
}
function renderSuffix() {
return html `<div part="suffix"><slot name="suffix"></slot></div>`;
}
export function renderInputShell(host, { containerParts, renderFileParts, renderInput, theme, label, labelId, }) {
const validator = IgcValidationContainerComponent.create(host);
const input = renderInput.call(host);
const fileParts = renderFileParts?.call(host) ?? nothing;
if (theme === 'material') {
return html `
<div part=${partMap({ ...containerParts, labelled: !!label })}>
<div part="start">${renderPrefix()}</div>
${input}${fileParts}
<div part="notch">${renderLabel(labelId, label)}</div>
<div part="filler"></div>
<div part="end">${renderSuffix()}</div>
</div>
${validator}
`;
}
return html `
${renderLabel(labelId, label)}
<div part=${partMap(containerParts)}>
${renderPrefix()}${fileParts}${input}${renderSuffix()}
</div>
${validator}
`;
}
//# sourceMappingURL=input-shell.js.map