@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
88 lines (87 loc) • 5.04 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 { keyed } from "lit-html/directives/keyed.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { H as Heading, c as constrainHeadingLevel } from "../../chunks/Heading.js";
import { l as logger } from "../../chunks/logger.js";
import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
container: "container",
header: "header",
heading: "heading",
close: "close",
imageFrame: "image-frame",
content: "content",
info: "info",
infoNoThumbnail: "info--no-thumbnail"
};
const ICONS = {
close: "x"
};
const SLOTS = {
thumbnail: "thumbnail"
};
const styles = css`:host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0;border-style:none;padding:0}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{margin-block-end:.5rem}.header .heading{padding:0;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info--no-thumbnail{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}`;
class Tip extends LitElement {
constructor() {
super(...arguments);
this.messages = useT9n();
this.hasThumbnail = false;
this.closeDisabled = false;
this.closed = false;
this.selected = false;
this.calciteTipDismiss = createEvent({ cancelable: false });
}
static {
this.properties = { hasThumbnail: [16, {}, { state: true }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], messageOverrides: [0, {}, { attribute: false }], selected: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
async load() {
logger.deprecated("component", {
name: "tip",
removalVersion: 4,
suggested: ["card", "notice", "panel", "tile"]
});
}
hideTip() {
this.closed = true;
this.calciteTipDismiss.emit();
}
handleThumbnailSlotChange(event) {
this.hasThumbnail = slotChangeHasAssignedElement(event);
}
renderHeader() {
const { heading, headingLevel, el } = this;
const parentLevel = el.closest("calcite-tip-manager")?.headingLevel;
const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
const level = headingLevel || relativeLevel;
return heading ? html`<header class=${safeClassMap(CSS.header)}>${Heading({ class: CSS.heading, level, children: heading })}</header>` : null;
}
renderDismissButton() {
const { closeDisabled, hideTip } = this;
return !closeDisabled ? html`<calcite-action class=${safeClassMap(CSS.close)} .icon=${ICONS.close} @click=${hideTip} scale=l .text=${this.messages.close}></calcite-action>` : null;
}
renderImageFrame() {
return keyed("thumbnail", html`<div class=${safeClassMap(CSS.imageFrame)} .hidden=${!this.hasThumbnail}><slot name=${SLOTS.thumbnail} @slotchange=${this.handleThumbnailSlotChange}></slot></div>`);
}
renderInfoNode() {
return html`<div class=${safeClassMap({ [CSS.info]: true, [CSS.infoNoThumbnail]: !this.hasThumbnail })}><slot></slot></div>`;
}
renderContent() {
return html`<div class=${safeClassMap(CSS.content)}>${this.renderImageFrame()}${this.renderInfoNode()}</div>`;
}
render() {
return html`<article class=${safeClassMap(CSS.container)}>${this.renderHeader()}${this.renderContent()}</article>${this.renderDismissButton()}`;
}
}
customElement("calcite-tip", Tip);
export {
Tip
};