UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

57 lines (56 loc) 3.62 kB
/*! 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 };