@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
209 lines (203 loc) • 11.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 { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { f as slotChangeHasAssignedElement } from './dom.js';
import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
import { d as defineCustomElement$4 } from './action.js';
import { d as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './loader.js';
const CSS = {
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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.calciteNavigationActionSelect = createEvent(this, "calciteNavigationActionSelect", 6);
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.actionClickHandler = () => {
this.calciteNavigationActionSelect.emit();
};
this.handleUserSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.userSlotHasElements = slotChangeHasAssignedElement(event);
}
};
this.handleLogoSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.logoSlotHasElements = slotChangeHasAssignedElement(event);
}
};
this.handleContentStartSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentStartSlotHasElements = slotChangeHasAssignedElement(event);
}
};
this.handleContentEndSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentEndSlotHasElements = slotChangeHasAssignedElement(event);
}
};
this.handleContentCenterSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.primaryContentCenterSlotHasElements = slotChangeHasAssignedElement(event);
}
};
this.handleSecondarySlotChange = (event) => {
this.secondarySlotHasElements = slotChangeHasAssignedElement(event);
};
this.handleTertiarySlotChange = (event) => {
this.tertiarySlotHasElements = slotChangeHasAssignedElement(event);
};
this.handleMenuActionSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.navigationActionSlotHasElements = slotChangeHasAssignedElement(event);
if (this.navigationActionSlotHasElements) {
this.navigationAction = false;
}
}
};
this.handleProgressSlotChange = (event) => {
if (this.isPrimaryLevel()) {
this.progressSlotHasElement = 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 componentLoaded(this);
await this.navigationActionEl?.setFocus();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
setUpLoadableComponent(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
isPrimaryLevel() {
return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
}
//--------------------------------------------------------------------------
//
// Render Methods
//
//--------------------------------------------------------------------------
renderMenuAction() {
return (h("slot", { name: SLOTS.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (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 (h(Host, null, h("div", { class: {
[CSS.container]: true,
[CSS.secondary]: slotName === SLOTS.navSecondary,
[CSS.tertiary]: slotName === SLOTS.navTertiary,
[CSS.primary]: primaryLevelHasElements
} }, h("div", { class: { [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true } }, h("slot", { name: SLOTS.progress, onSlotchange: this.handleProgressSlotChange })), h("div", { class: { [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), h("div", { class: { [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true } }, h("slot", { name: SLOTS.logo, onSlotchange: this.handleLogoSlotChange })), h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange }), h("slot", { name: SLOTS.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange }), h("div", { class: { [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true } }, h("slot", { name: SLOTS.user, onSlotchange: this.handleUserSlotChange })))), h(Fragment, null, h("slot", { name: SLOTS.navSecondary, onSlotchange: this.handleSecondarySlotChange }), h("slot", { name: SLOTS.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
}
get el() { return this; }
static get style() { return navigationCss; }
}, [1, "calcite-navigation", {
"label": [1],
"navigationAction": [516, "navigation-action"],
"logoSlotHasElements": [32],
"navigationActionSlotHasElements": [32],
"primaryContentCenterSlotHasElements": [32],
"primaryContentEndSlotHasElements": [32],
"primaryContentStartSlotHasElements": [32],
"progressSlotHasElement": [32],
"secondarySlotHasElements": [32],
"tertiarySlotHasElements": [32],
"userSlotHasElements": [32],
"setFocus": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-navigation", "calcite-action", "calcite-icon", "calcite-loader"];
components.forEach(tagName => { switch (tagName) {
case "calcite-navigation":
if (!customElements.get(tagName)) {
customElements.define(tagName, CalciteNavigation$1);
}
break;
case "calcite-action":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "calcite-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "calcite-loader":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const CalciteNavigation = CalciteNavigation$1;
const defineCustomElement = defineCustomElement$1;
export { CalciteNavigation, defineCustomElement };