@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
52 lines (51 loc) • 3.76 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";
import { d as setRequestedIcon } from "../../chunks/dom.js";
const StatusIconDefaults = {
valid: "check-circle",
invalid: "exclamation-mark-triangle",
idle: "information"
};
const styles = css`:host{box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-block-start:var(--calcite-input-message-spacing, var(--calcite-input-message-spacing-value, var(--calcite-spacing-xxs)))}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-inline-end:var(--calcite-spacing-sm)}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-danger))))}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-success))))}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand))))}:host([scale=s]){font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-xs)}:host([scale=m]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=l]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
inputMessageIcon: "calcite-input-message-icon"
};
class InputMessage extends LitElement {
constructor() {
super(...arguments);
this.iconFlipRtl = false;
this.scale = "m";
this.status = "idle";
}
static {
this.properties = { icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
}
willUpdate(changes) {
if (changes.has("status") && (this.hasUpdated || this.status !== "idle") || changes.has("icon")) {
this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
}
}
render() {
const hidden = this.el.hidden;
setAttribute(this.el, "calcite-hydrated-hidden", hidden);
return html`${this.renderIcon(this.requestedIcon)}<slot></slot>`;
}
renderIcon(iconName) {
if (iconName) {
return html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>`;
}
}
}
customElement("calcite-input-message", InputMessage);
export {
InputMessage
};