@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
280 lines (267 loc) • 21.4 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
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-55f8a3b7.js');
const dom = require('./dom-18ca68ff.js');
const loadable = require('./loadable-53f729bb.js');
require('./guid-db20443e.js');
require('./resources-45d84c94.js');
const CSS$2 = {
container: "container",
containerContent: "container-content",
hasProgress: "progress-bar",
hide: "hide",
primary: "primary",
secondary: "secondary",
tertiary: "tertiary"
};
const SLOTS = {
logo: "logo",
user: "user",
progress: "progress",
navigationAction: "navigation-action",
contentStart: "content-start",
contentEnd: "content-end",
contentCenter: "content-center",
navSecondary: "navigation-secondary",
navTertiary: "navigation-tertiary"
};
const ICONS = {
hamburger: "hamburger"
};
const navigationCss = "@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}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}.container{margin-inline:auto;display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background, var(--calcite-ui-foreground-1))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-ui-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary{block-size:3rem}.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:0.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0px}";
const CalciteNavigation = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.calciteNavigationActionSelect = index.createEvent(this, "calciteNavigationActionSelect", 6);
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.actionClickHandler = () => {
this.calciteNavigationActionSelect.emit();
};
this.handleUserSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.userSlotHasElements = dom.slotChangeHasAssignedElement(event);
}
};
this.handleLogoSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.logoSlotHasElements = dom.slotChangeHasAssignedElement(event);
}
};
this.handleContentStartSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentStartSlotHasElements = dom.slotChangeHasAssignedElement(event);
}
};
this.handleContentEndSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentEndSlotHasElements = dom.slotChangeHasAssignedElement(event);
}
};
this.handleContentCenterSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentCenterSlotHasElements = dom.slotChangeHasAssignedElement(event);
}
};
this.handleSecondarySlotChange = (event) => {
this.secondarySlotHasElements = dom.slotChangeHasAssignedElement(event);
};
this.handleTertiarySlotChange = (event) => {
this.tertiarySlotHasElements = dom.slotChangeHasAssignedElement(event);
};
this.handleMenuActionSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.navigationActionSlotHasElements = dom.slotChangeHasAssignedElement(event);
if (this.navigationActionSlotHasElements) {
this.navigationAction = false;
}
}
};
this.handleProgressSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.progressSlotHasElement = dom.slotChangeHasAssignedElement(event);
}
};
this.label = undefined;
this.navigationAction = false;
this.logoSlotHasElements = undefined;
this.navigationActionSlotHasElements = undefined;
this.primaryContentCenterSlotHasElements = undefined;
this.primaryContentEndSlotHasElements = undefined;
this.primaryContentStartSlotHasElements = undefined;
this.progressSlotHasElement = undefined;
this.secondarySlotHasElements = undefined;
this.tertiarySlotHasElements = undefined;
this.userSlotHasElements = undefined;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** When `navigation-action` is `true`, sets focus on the component's action element. */
async setFocus() {
await loadable.componentLoaded(this);
await this.navigationActionEl?.setFocus();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
loadable.setUpLoadableComponent(this);
}
componentDidLoad() {
loadable.setComponentLoaded(this);
}
isPrimaryLevel() {
return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
}
//--------------------------------------------------------------------------
//
// Render Methods
//
//--------------------------------------------------------------------------
renderMenuAction() {
return (index.h("slot", { name: SLOTS.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (index.h("calcite-action", { icon: ICONS.hamburger, onClick: this.actionClickHandler, text: this.label,
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.navigationActionEl = el) }))));
}
render() {
const primaryLevelHasElements = this.logoSlotHasElements ||
this.userSlotHasElements ||
this.navigationActionSlotHasElements ||
this.primaryContentCenterSlotHasElements ||
this.primaryContentEndSlotHasElements ||
this.primaryContentStartSlotHasElements ||
this.navigationAction;
const slotName = this.el.slot;
return (index.h(index.Host, null, index.h("div", { class: {
[CSS$2.container]: true,
[CSS$2.secondary]: slotName === SLOTS.navSecondary,
[CSS$2.tertiary]: slotName === SLOTS.navTertiary,
[CSS$2.primary]: primaryLevelHasElements
} }, index.h("div", { class: { [CSS$2.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true } }, index.h("slot", { name: SLOTS.progress, onSlotchange: this.handleProgressSlotChange })), index.h("div", { class: { [CSS$2.containerContent]: true, [CSS$2.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), index.h("div", { class: { [CSS$2.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true } }, index.h("slot", { name: SLOTS.logo, onSlotchange: this.handleLogoSlotChange })), index.h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange }), index.h("slot", { name: SLOTS.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), index.h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange }), index.h("div", { class: { [CSS$2.hide]: !this.userSlotHasElements, [SLOTS.user]: true } }, index.h("slot", { name: SLOTS.user, onSlotchange: this.handleUserSlotChange })))), index.h(index.Fragment, null, index.h("slot", { name: SLOTS.navSecondary, onSlotchange: this.handleSecondarySlotChange }), index.h("slot", { name: SLOTS.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
}
get el() { return index.getElement(this); }
};
CalciteNavigation.style = navigationCss;
const CSS$1 = {
container: "container",
heading: "heading",
description: "description",
anchor: "anchor",
image: "image"
};
const navigationLogoCss = "@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}}: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{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-ui-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n -2px *\n calc(\n 1 -\n 2 * clamp(\n 0,\n var(--calcite-ui-focus-offset-invert),\n 1\n )\n )\n )}.anchor:active{background-color:var(--calcite-ui-foreground-3)}.image{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-ui-text-1)}:host([active]) .anchor{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
const CalciteNavigationLogo = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.active = undefined;
this.href = undefined;
this.label = undefined;
this.rel = undefined;
this.description = undefined;
this.target = undefined;
this.heading = undefined;
this.thumbnail = undefined;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await loadable.componentLoaded(this);
if (this.href) {
this.el.focus();
}
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
loadable.setUpLoadableComponent(this);
}
componentDidLoad() {
loadable.setComponentLoaded(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { heading, description, thumbnail } = this;
return (index.h(index.Host, null, index.h("a", { class: CSS$1.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && index.h("img", { alt: this.label || "", class: CSS$1.image, src: thumbnail }), (heading || description) && (index.h("div", { class: CSS$1.container }, heading && (index.h("span", { "aria-label": this.heading, class: CSS$1.heading, key: CSS$1.heading }, heading)), description && (index.h("span", { "aria-label": this.description, class: CSS$1.description, key: CSS$1.description }, description)))))));
}
static get delegatesFocus() { return true; }
get el() { return index.getElement(this); }
};
CalciteNavigationLogo.style = navigationLogoCss;
const CSS = {
textContainer: "text-container",
fullName: "full-name",
username: "username",
button: "button"
};
const navigationUserCss = "@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}}: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{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-ui-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n -2px *\n calc(\n 1 -\n 2 * clamp(\n 0,\n var(--calcite-ui-focus-offset-invert),\n 1\n )\n )\n )}:host(:active) .button{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1);--calcite-ui-icon-color:var(--calcite-ui-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.username{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
const CalciteNavigationUser = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.active = undefined;
this.fullName = undefined;
this.label = undefined;
this.textDisabled = false;
this.thumbnail = undefined;
this.userId = undefined;
this.username = undefined;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await loadable.componentLoaded(this);
this.el.focus();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
loadable.setUpLoadableComponent(this);
}
componentDidLoad() {
loadable.setComponentLoaded(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
return (index.h(index.Host, null, index.h("button", { "aria-label": this.label, class: CSS.button }, index.h("calcite-avatar", { "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (index.h("div", { class: CSS.textContainer }, this.fullName && (index.h("span", { class: CSS.fullName, key: CSS.fullName }, this.fullName)), this.username && (index.h("span", { class: CSS.username, key: CSS.username }, this.username)))))));
}
static get delegatesFocus() { return true; }
get el() { return index.getElement(this); }
};
CalciteNavigationUser.style = navigationUserCss;
exports.calcite_navigation = CalciteNavigation;
exports.calcite_navigation_logo = CalciteNavigationLogo;
exports.calcite_navigation_user = CalciteNavigationUser;