@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
25 lines (24 loc) • 1.28 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { safeClassMap } from "@arcgis/lumina";
import { nothing, html } from "lit";
const CSS = {
alignmentCenter: "internal-label-alignment--center",
alignmentEnd: "internal-label-alignment--end",
container: "internal-label--container",
requiredIndicator: "internal-label-required--indicator",
spacingBottom: "internal-label-spacing--bottom",
spacingInlineEnd: "internal-label-spacing-inline--end",
spacingInlineStart: "internal-label-spacing-inline--start",
text: "internal-label--text"
};
const InternalLabel = ({ alignmentCenter, bottomSpacingDisabled, labelText, onClick, required, spacingInlineEnd, spacingInlineStart, tooltipText }) => html`<div class=${safeClassMap({
[CSS.alignmentCenter]: alignmentCenter,
[CSS.alignmentEnd]: !alignmentCenter,
[CSS.container]: true,
[CSS.spacingBottom]: !bottomSpacingDisabled,
[CSS.spacingInlineEnd]: spacingInlineEnd,
[CSS.spacingInlineStart]: spacingInlineStart
})} @click=${onClick}><div class=${safeClassMap(CSS.text)}>${labelText}${required && html`<span aria-hidden=true class=${safeClassMap(CSS.requiredIndicator)} title=${tooltipText ?? nothing}>*</span>` || ""}</div><slot name=label-content></slot></div>`;
export {
InternalLabel as I
};