@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
515 lines (514 loc) • 16.9 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 { h, Host } from "@stencil/core";
import { getElementDir } from "../../utils/dom";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
import { SLOTS as PANEL_SLOTS } from "../panel/resources";
import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding custom content.
* @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
* @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
* @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
* @slot header-content - A slot for adding custom content to the component's header.
* @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
* @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
* @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
* @slot footer - A slot for adding custom content to the component's footer.
*/
export class FlowItem {
constructor() {
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.handlePanelScroll = (event) => {
event.stopPropagation();
this.calciteFlowItemScroll.emit();
};
this.handlePanelClose = (event) => {
event.stopPropagation();
this.calciteFlowItemClose.emit();
};
this.backButtonClick = () => {
this.calciteFlowItemBack.emit();
};
this.setBackRef = (node) => {
this.backButtonEl = node;
};
this.setContainerRef = (node) => {
this.containerEl = node;
};
this.closable = false;
this.closed = false;
this.beforeBack = undefined;
this.description = undefined;
this.disabled = false;
this.heading = undefined;
this.headingLevel = undefined;
this.loading = false;
this.menuOpen = false;
this.messageOverrides = undefined;
this.messages = undefined;
this.showBackButton = false;
this.backButtonEl = undefined;
this.defaultMessages = undefined;
this.effectiveLocale = "";
}
onMessagesChange() {
/* wired up by t9n util */
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectInteractive(this);
connectLocalized(this);
connectMessages(this);
}
async componentWillLoad() {
await setUpMessages(this);
setUpLoadableComponent(this);
}
componentDidRender() {
updateHostInteraction(this);
}
disconnectedCallback() {
disconnectInteractive(this);
disconnectLocalized(this);
disconnectMessages(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
effectiveLocaleChange() {
updateMessages(this, this.effectiveLocale);
}
// --------------------------------------------------------------------------
//
// Methods
//
// --------------------------------------------------------------------------
/**
* Sets focus on the component.
*/
async setFocus() {
await componentLoaded(this);
const { backButtonEl, containerEl } = this;
if (backButtonEl) {
backButtonEl.setFocus();
return;
}
containerEl?.setFocus();
}
/**
* Scrolls the component's content to a specified set of coordinates.
*
* @example
* myCalciteFlowItem.scrollContentTo({
* left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
* top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
* behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
* });
* @param options
*/
async scrollContentTo(options) {
await this.containerEl?.scrollContentTo(options);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderBackButton() {
const { el } = this;
const rtl = getElementDir(el) === "rtl";
const { showBackButton, backButtonClick, messages } = this;
const label = messages.back;
const icon = rtl ? ICONS.backRight : ICONS.backLeft;
return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setBackRef })) : null;
}
render() {
const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, backButtonEl } = this;
const label = messages.back;
return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: PANEL_SLOTS.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: PANEL_SLOTS.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: PANEL_SLOTS.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: PANEL_SLOTS.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: PANEL_SLOTS.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: PANEL_SLOTS.fab }), h("slot", { name: SLOTS.footerActions, slot: PANEL_SLOTS.footerActions }), h("slot", { name: SLOTS.footer, slot: PANEL_SLOTS.footer }), h("slot", null)), backButtonEl ? (h("calcite-tooltip", { closeOnClick: true, label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
}
static get is() { return "calcite-flow-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["flow-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["flow-item.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"closable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, displays a close button in the trailing side of the component's header."
},
"attribute": "closable",
"reflect": true,
"defaultValue": "false"
},
"closed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component will be hidden."
},
"attribute": "closed",
"reflect": true,
"defaultValue": "false"
},
"beforeBack": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => Promise<void>",
"resolved": "() => Promise<void>",
"references": {
"Promise": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When provided, the method will be called before it is removed from its parent `calcite-flow`."
}
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A description for the component."
},
"attribute": "description",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "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
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, a busy indicator is displayed."
},
"attribute": "loading",
"reflect": true,
"defaultValue": "false"
},
"menuOpen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the action menu items in the `header-menu-actions` slot are open."
},
"attribute": "menu-open",
"reflect": true,
"defaultValue": "false"
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<FlowItemMessages>",
"resolved": "{ back?: string; close?: string; options?: string; }",
"references": {
"Partial": {
"location": "global"
},
"FlowItemMessages": {
"location": "import",
"path": "./assets/flow-item/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "FlowItemMessages",
"resolved": "{ back: string; close: string; options: string; }",
"references": {
"FlowItemMessages": {
"location": "import",
"path": "./assets/flow-item/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"showBackButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "When `true`, displays a back button in the component's header."
},
"attribute": "show-back-button",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"backButtonEl": {},
"defaultMessages": {},
"effectiveLocale": {}
};
}
static get events() {
return [{
"method": "calciteFlowItemBack",
"name": "calciteFlowItemBack",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the back button is clicked."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteFlowItemScroll",
"name": "calciteFlowItemScroll",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the content is scrolled."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteFlowItemClose",
"name": "calciteFlowItemClose",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the close button is clicked."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the component.",
"tags": []
}
},
"scrollContentTo": {
"complexType": {
"signature": "(options?: ScrollToOptions) => Promise<void>",
"parameters": [{
"tags": [{
"name": "param",
"text": "options"
}],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"ScrollToOptions": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Scrolls the component's content to a specified set of coordinates.",
"tags": [{
"name": "example",
"text": "myCalciteFlowItem.scrollContentTo({\n left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n});"
}, {
"name": "param",
"text": "options"
}]
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleChange"
}];
}
}