@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
57 lines (56 loc) • 3.62 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledComponent, b as labelDisconnectedEvent } from "../../chunks/label.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
container: "container"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .5rem)}:host([scale=m]) .container{gap:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .75rem)}:host([scale=l]) .container{gap:.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-color-text-1);color:var(--calcite-label-text-color, var(--calcite-color-text-1))}:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host([layout=inline][scale=l]) .container{gap:.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity: 1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity: 0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
class Label extends LitElement {
constructor() {
super();
this.alignment = "start";
this.layout = "default";
this.scale = "m";
this.calciteInternalLabelClick = createEvent({ bubbles: false, cancelable: false });
this.listen("click", this.labelClickHandler);
}
static {
this.properties = { alignment: [3, {}, { reflect: true }], for: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
document.dispatchEvent(new CustomEvent(labelConnectedEvent));
}
willUpdate(changes) {
if (changes.has("for")) {
associateExplicitLabelToUnlabeledComponent(this.el);
}
}
disconnectedCallback() {
super.disconnectedCallback();
document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
}
labelClickHandler(event) {
if (window.getSelection()?.type === "Range") {
return;
}
this.calciteInternalLabelClick.emit({
sourceEvent: event
});
}
render() {
return html`<div class=${safeClassMap(CSS.container)}><slot></slot></div>`;
}
}
customElement("calcite-label", Label);
export {
Label
};