@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
232 lines (231 loc) • 6.86 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/
import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
import { getSlotted } from "../../utils/dom";
import { Heading, constrainHeadingLevel } from "../functional/Heading";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
/**
* @slot - A slot for adding text and a hyperlink.
* @slot thumbnail - A slot for adding an HTML image element to the tip.
*/
export class Tip {
constructor() {
// --------------------------------------------------------------------------
//
// Properties
//
// --------------------------------------------------------------------------
/**
* No longer displays the tip.
*/
this.dismissed = false;
/**
* Indicates whether the tip can be dismissed.
*/
this.nonDismissible = false;
/**
* The selected state of the tip if it is being used inside a `calcite-tip-manager`.
*/
this.selected = false;
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.hideTip = () => {
this.dismissed = true;
this.calciteTipDismiss.emit();
};
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
connectConditionalSlotComponent(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderHeader() {
var _a;
const { heading, headingLevel, el } = this;
const parentLevel = (_a = el.closest("calcite-tip-manager")) === null || _a === void 0 ? void 0 : _a.headingLevel;
const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
const level = headingLevel || relativeLevel || HEADING_LEVEL;
return heading ? (h("header", { class: CSS.header },
h(Heading, { class: CSS.heading, level: level }, heading))) : null;
}
renderDismissButton() {
const { nonDismissible, hideTip, intlClose } = this;
const text = intlClose || TEXT.close;
return !nonDismissible ? (h("calcite-action", { class: CSS.close, icon: ICONS.close, onClick: hideTip, scale: "l", text: text })) : null;
}
renderImageFrame() {
const { el } = this;
return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame, key: "thumbnail" },
h("slot", { name: SLOTS.thumbnail }))) : null;
}
renderInfoNode() {
return (h("div", { class: CSS.info },
h("slot", null)));
}
renderContent() {
return (h("div", { class: CSS.content },
this.renderImageFrame(),
this.renderInfoNode()));
}
render() {
return (h(Fragment, null,
h("article", { class: CSS.container },
this.renderHeader(),
this.renderContent()),
this.renderDismissButton()));
}
static get is() { return "calcite-tip"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["tip.scss"]
}; }
static get styleUrls() { return {
"$": ["tip.css"]
}; }
static get properties() { return {
"dismissed": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "No longer displays the tip."
},
"attribute": "dismissed",
"reflect": true,
"defaultValue": "false"
},
"nonDismissible": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indicates whether the tip can be dismissed."
},
"attribute": "non-dismissible",
"reflect": true,
"defaultValue": "false"
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The heading of the tip."
},
"attribute": "heading",
"reflect": false
},
"headingLevel": {
"type": "number",
"mutable": false,
"complexType": {
"original": "HeadingLevel",
"resolved": "1 | 2 | 3 | 4 | 5 | 6",
"references": {
"HeadingLevel": {
"location": "import",
"path": "../functional/Heading"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number at which section headings should start for this component."
},
"attribute": "heading-level",
"reflect": false
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"intlClose": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Alternate text for closing the tip."
},
"attribute": "intl-close",
"reflect": false
}
}; }
static get events() { return [{
"method": "calciteTipDismiss",
"name": "calciteTipDismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the component has been dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
}