@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
282 lines (281 loc) • 8.49 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.
* v1.5.0-next.4
*/
import { Fragment, h } from "@stencil/core";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
import { getSlotted } from "../../utils/dom";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
import { constrainHeadingLevel, Heading } from "../functional/Heading";
import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding text and a hyperlink.
* @slot thumbnail - A slot for adding an HTML image element.
*/
export class Tip {
constructor() {
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.hideTip = () => {
this.closed = true;
this.calciteTipDismiss.emit();
};
this.closed = false;
this.closeDisabled = false;
this.heading = undefined;
this.headingLevel = undefined;
this.selected = false;
this.messages = undefined;
this.messageOverrides = undefined;
this.defaultMessages = undefined;
this.effectiveLocale = "";
}
onMessagesChange() {
/* wired up by t9n util */
}
effectiveLocaleChange() {
updateMessages(this, this.effectiveLocale);
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
connectConditionalSlotComponent(this);
connectLocalized(this);
connectMessages(this);
}
async componentWillLoad() {
await setUpMessages(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
disconnectLocalized(this);
disconnectMessages(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
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 ? (h("header", { class: CSS.header }, h(Heading, { class: CSS.heading, level: level }, heading))) : null;
}
renderDismissButton() {
const { closeDisabled, hideTip } = this;
return !closeDisabled ? (h("calcite-action", { class: CSS.close, icon: ICONS.close, onClick: hideTip, scale: "l", text: this.messages.close })) : 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 assetsDirs() { return ["assets"]; }
static get properties() {
return {
"closed": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component does not display."
},
"attribute": "closed",
"reflect": true,
"defaultValue": "false"
},
"closeDisabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the close button is not present on the component."
},
"attribute": "close-disabled",
"reflect": true,
"defaultValue": "false"
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component header text."
},
"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": "Specifies the number at which section headings should start."
},
"attribute": "heading-level",
"reflect": true
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n\nOnly one tip can be selected within the `calcite-tip-manager` parent."
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "TipMessages",
"resolved": "{ close: string; }",
"references": {
"TipMessages": {
"location": "import",
"path": "./assets/tip/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<TipMessages>",
"resolved": "{ close?: string; }",
"references": {
"Partial": {
"location": "global"
},
"TipMessages": {
"location": "import",
"path": "./assets/tip/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
}
};
}
static get states() {
return {
"defaultMessages": {},
"effectiveLocale": {}
};
}
static get events() {
return [{
"method": "calciteTipDismiss",
"name": "calciteTipDismiss",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the component has been closed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleChange"
}];
}
}