@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
285 lines (281 loc) • 17.2 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 { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-c8875db5.js';
import { s as slotChangeGetAssignedElements, p as focusFirstTabbable, t as toAriaBoolean } from './dom-4f5d1224.js';
import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-cff0a7ea.js';
import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-8d606217.js';
import { c as createObserver } from './observers-d19b0d93.js';
import { S as SLOTS$1 } from './resources-0be06eee.js';
import { H as Heading } from './Heading-4ce5f5c4.js';
import { S as SLOTS, C as CSS, I as ICONS } from './resources-4c91211d.js';
import { c as connectLocalized, d as disconnectLocalized } from './locale-0c018cdb.js';
import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f819e5a2.js';
import './guid-bdb80778.js';
import './resources-35f23920.js';
import './browser-4be2add2.js';
import './key-582cee8f.js';
const panelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-footer-padding:0.5rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}.container[hidden]{display:none}.header{border-block-end:1px solid;z-index:var(--calcite-app-z-index-header);inline-size:100%;align-items:stretch;justify-content:flex-start;background-color:var(--calcite-ui-foreground-1);border-block-end-color:var(--calcite-ui-border-3);flex:0 0 auto}.action-bar-container{border-block-end:1px solid;z-index:var(--calcite-app-z-index-header);inline-size:100%;border-block-end-color:var(--calcite-ui-border-3)}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{overflow:auto}.content-height{block-size:100%}.content-container{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;background-color:var(--calcite-ui-background)}.footer{border-block-start:1px solid;display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);border-block-start-color:var(--calcite-ui-border-3);flex:0 0 auto;padding:var(--calcite-panel-footer-padding)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}[hidden]{display:none}";
const Panel = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.calcitePanelClose = createEvent(this, "calcitePanelClose", 6);
this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 6);
this.resizeObserver = createObserver("resize", () => this.resizeHandler());
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.resizeHandler = () => {
const { panelScrollEl } = this;
if (!panelScrollEl ||
typeof panelScrollEl.scrollHeight !== "number" ||
typeof panelScrollEl.offsetHeight !== "number") {
return;
}
panelScrollEl.tabIndex = panelScrollEl.scrollHeight > panelScrollEl.offsetHeight ? 0 : -1;
};
this.setContainerRef = (node) => {
this.containerEl = node;
};
this.setCloseRef = (node) => {
this.closeButtonEl = node;
};
this.setBackRef = (node) => {
this.backButtonEl = node;
};
this.panelKeyDownHandler = (event) => {
if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
this.close();
event.preventDefault();
}
};
this.close = () => {
this.closed = true;
this.calcitePanelClose.emit();
};
this.panelScrollHandler = () => {
this.calcitePanelScroll.emit();
};
this.handleHeaderActionsStartSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasStartActions = !!elements.length;
};
this.handleHeaderActionsEndSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasEndActions = !!elements.length;
};
this.handleHeaderMenuActionsSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasMenuItems = !!elements.length;
};
this.handleActionBarSlotChange = (event) => {
const actionBars = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar"));
actionBars.forEach((actionBar) => (actionBar.layout = "horizontal"));
this.hasActionBar = !!actionBars.length;
};
this.handleHeaderContentSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasHeaderContent = !!elements.length;
};
this.handleFooterSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasFooterContent = !!elements.length;
};
this.handleFooterActionsSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasFooterActions = !!elements.length;
};
this.handleFabSlotChange = (event) => {
const elements = event.target.assignedElements({
flatten: true
});
this.hasFab = !!elements.length;
};
this.setPanelScrollEl = (el) => {
this.panelScrollEl = el;
this.resizeObserver?.disconnect();
if (el) {
this.resizeObserver?.observe(el);
this.resizeHandler();
}
};
this.closed = false;
this.disabled = false;
this.closable = false;
this.headingLevel = undefined;
this.loading = false;
this.heading = undefined;
this.description = undefined;
this.menuOpen = false;
this.messageOverrides = undefined;
this.messages = undefined;
this.hasStartActions = false;
this.hasEndActions = false;
this.hasMenuItems = false;
this.hasHeaderContent = false;
this.hasActionBar = false;
this.hasFooterContent = false;
this.hasFooterActions = false;
this.hasFab = false;
this.defaultMessages = undefined;
this.effectiveLocale = "";
}
onMessagesChange() {
/* wired up by t9n util */
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectInteractive(this);
connectLocalized(this);
connectMessages(this);
}
async componentWillLoad() {
setUpLoadableComponent(this);
await setUpMessages(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
componentDidRender() {
updateHostInteraction(this);
}
disconnectedCallback() {
disconnectInteractive(this);
disconnectLocalized(this);
disconnectMessages(this);
this.resizeObserver?.disconnect();
}
effectiveLocaleChange() {
updateMessages(this, this.effectiveLocale);
}
// --------------------------------------------------------------------------
//
// Methods
//
// --------------------------------------------------------------------------
/**
* Sets focus on the component's first focusable element.
*/
async setFocus() {
await componentLoaded(this);
focusFirstTabbable(this.containerEl);
}
/**
* 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) {
this.panelScrollEl?.scrollTo(options);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderHeaderContent() {
const { heading, headingLevel, description, hasHeaderContent } = this;
const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
const descriptionNode = description ? h("span", { class: CSS.description }, description) : null;
return !hasHeaderContent && (headingNode || descriptionNode) ? (h("div", { class: CSS.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
}
renderActionBar() {
return (h("div", { class: CSS.actionBarContainer, hidden: !this.hasActionBar }, h("slot", { name: SLOTS.actionBar, onSlotchange: this.handleActionBarSlotChange })));
}
/**
* Allows user to override the entire header-content node.
*/
renderHeaderSlottedContent() {
return (h("div", { class: CSS.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, h("slot", { name: SLOTS.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
}
renderHeaderStartActions() {
const { hasStartActions } = this;
return (h("div", { class: { [CSS.headerActionsStart]: true, [CSS.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, h("slot", { name: SLOTS.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
}
renderHeaderActionsEnd() {
const { close, hasEndActions, messages, closable, hasMenuItems } = this;
const text = messages.close;
const closableNode = closable ? (h("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS.close, onClick: close, text: text,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setCloseRef })) : null;
const slotNode = (h("slot", { name: SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
const showContainer = hasEndActions || closableNode || hasMenuItems;
return (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
}
renderMenu() {
const { hasMenuItems, messages, menuOpen } = this;
return (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: messages.options, open: menuOpen, placement: "bottom-end" }, h("calcite-action", { icon: ICONS.menu, slot: SLOTS$1.trigger, text: messages.options }), h("slot", { name: SLOTS.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
}
renderHeaderNode() {
const { hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems } = this;
const headerContentNode = this.renderHeaderContent();
const showHeader = hasHeaderContent ||
headerContentNode ||
hasStartActions ||
hasEndActions ||
closable ||
hasMenuItems;
return (h("header", { class: CSS.header, hidden: !showHeader }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()));
}
renderFooterNode() {
const { hasFooterContent, hasFooterActions } = this;
const showFooter = hasFooterContent || hasFooterActions;
return (h("footer", { class: CSS.footer, hidden: !showFooter }, h("slot", { key: "footer-slot", name: SLOTS.footer, onSlotchange: this.handleFooterSlotChange }), h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
}
renderContent() {
const { hasFab } = this;
const defaultSlotNode = h("slot", { key: "default-slot" });
const containerNode = hasFab ? (h("section", { class: CSS.contentContainer }, defaultSlotNode)) : (defaultSlotNode);
return (h("div", { class: {
[CSS.contentWrapper]: true,
[CSS.contentContainer]: !hasFab,
[CSS.contentHeight]: hasFab
}, onScroll: this.panelScrollHandler,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setPanelScrollEl }, containerNode, this.renderFab()));
}
renderFab() {
return (h("div", { class: CSS.fabContainer, hidden: !this.hasFab }, h("slot", { name: SLOTS.fab, onSlotchange: this.handleFabSlotChange })));
}
render() {
const { loading, panelKeyDownHandler, closed, closable } = this;
const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setContainerRef }, this.renderHeaderNode(), this.renderActionBar(), this.renderContent(), this.renderFooterNode()));
return (h(Fragment, null, loading ? h("calcite-scrim", { loading: loading }) : null, panelNode));
}
static get assetsDirs() { return ["assets"]; }
get el() { return getElement(this); }
static get watchers() { return {
"messageOverrides": ["onMessagesChange"],
"effectiveLocale": ["effectiveLocaleChange"]
}; }
};
Panel.style = panelCss;
export { Panel as calcite_panel };