@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
55 lines (54 loc) • 3.38 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-html";
import { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
import { b as focusElement } from "../../chunks/dom.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
button: "button"
};
const ICONS = {
plus: "plus"
};
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;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}:host([hidden]){display:none}[hidden]{display:none}`;
class Fab extends LitElement {
constructor() {
super(...arguments);
this.buttonEl = createRef();
this.appearance = "solid";
this.disabled = false;
this.icon = ICONS.plus;
this.iconFlipRtl = false;
this.kind = "brand";
this.loading = false;
this.scale = "m";
this.textEnabled = false;
}
static {
this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
async setFocus() {
await componentFocusable(this);
focusElement(this.buttonEl.value);
}
updated() {
updateHostInteraction(this);
}
render() {
const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl } = this;
const title = !textEnabled ? label || text || null : null;
return InteractiveContainer({ disabled, children: html`<calcite-button .appearance=${appearance === "solid" ? "solid" : "outline-fill"} class=${safeClassMap(CSS.button)} .disabled=${disabled} .iconFlipRtl=${iconFlipRtl ? "start" : null} .iconStart=${icon} .kind=${kind} .label=${label} .loading=${loading} round .scale=${scale} title=${title ?? nothing} type=button width=auto ${ref(this.buttonEl)}>${this.textEnabled ? this.text : null}</calcite-button>` });
}
}
customElement("calcite-fab", Fab);
export {
Fab
};