@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
120 lines (119 loc) • 7.65 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { css } from "@lit/reactive-element/css-tag.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 styles = css`:host([hidden]){display:none}[hidden]{display:none}:host{display:block}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.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:.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:0}`;
class Navigation extends LitElement {
constructor() {
super(...arguments);
this.navigationActionEl = createRef();
this.navigationAction = false;
this.calciteNavigationActionSelect = createEvent({ cancelable: false });
}
static {
this.properties = { logoSlotHasElements: [16, {}, { state: true }], navigationActionSlotHasElements: [16, {}, { state: true }], primaryContentCenterSlotHasElements: [16, {}, { state: true }], primaryContentEndSlotHasElements: [16, {}, { state: true }], primaryContentStartSlotHasElements: [16, {}, { state: true }], progressSlotHasElement: [16, {}, { state: true }], secondarySlotHasElements: [16, {}, { state: true }], tertiarySlotHasElements: [16, {}, { state: true }], userSlotHasElements: [16, {}, { state: true }], label: 1, navigationAction: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
async setFocus() {
await componentFocusable(this);
return this.navigationActionEl.value?.setFocus();
}
actionClickHandler() {
this.calciteNavigationActionSelect.emit();
}
handleUserSlotChange(event) {
if (this.isPrimaryLevel()) {
this.userSlotHasElements = slotChangeHasAssignedElement(event);
}
}
handleLogoSlotChange(event) {
if (this.isPrimaryLevel()) {
this.logoSlotHasElements = slotChangeHasAssignedElement(event);
}
}
handleContentStartSlotChange(event) {
if (this.isPrimaryLevel()) {
this.primaryContentStartSlotHasElements = slotChangeHasAssignedElement(event);
}
}
handleContentEndSlotChange(event) {
if (this.isPrimaryLevel()) {
this.primaryContentEndSlotHasElements = slotChangeHasAssignedElement(event);
}
}
handleContentCenterSlotChange(event) {
if (this.isPrimaryLevel()) {
this.primaryContentCenterSlotHasElements = slotChangeHasAssignedElement(event);
}
}
handleSecondarySlotChange(event) {
this.secondarySlotHasElements = slotChangeHasAssignedElement(event);
}
handleTertiarySlotChange(event) {
this.tertiarySlotHasElements = slotChangeHasAssignedElement(event);
}
handleMenuActionSlotChange(event) {
if (this.isPrimaryLevel()) {
this.navigationActionSlotHasElements = slotChangeHasAssignedElement(event);
if (this.navigationActionSlotHasElements) {
this.navigationAction = false;
}
}
}
handleProgressSlotChange(event) {
if (this.isPrimaryLevel()) {
this.progressSlotHasElement = slotChangeHasAssignedElement(event);
}
}
isPrimaryLevel() {
return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
}
renderMenuAction() {
return html`<slot name=${SLOTS.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && html`<calcite-action .icon=${ICONS.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${ref(this.navigationActionEl)}></calcite-action>` || ""}</slot>`;
}
render() {
const primaryLevelHasElements = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction;
const slotName = this.el.slot;
return html`<div class=${safeClassMap({
[CSS.container]: true,
[CSS.secondary]: slotName === SLOTS.navSecondary,
[CSS.tertiary]: slotName === SLOTS.navTertiary,
[CSS.primary]: primaryLevelHasElements
})}><div class=${safeClassMap({ [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true })}><slot name=${SLOTS.progress} @slotchange=${this.handleProgressSlotChange}></slot></div><div class=${safeClassMap({ [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement })}>${this.renderMenuAction()}<div class=${safeClassMap({ [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true })}><slot name=${SLOTS.logo} @slotchange=${this.handleLogoSlotChange}></slot></div><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot><slot name=${SLOTS.contentCenter} @slotchange=${this.handleContentCenterSlotChange}></slot><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot><div class=${safeClassMap({ [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true })}><slot name=${SLOTS.user} @slotchange=${this.handleUserSlotChange}></slot></div></div></div><slot name=${SLOTS.navSecondary} @slotchange=${this.handleSecondarySlotChange}></slot><slot name=${SLOTS.navTertiary} @slotchange=${this.handleTertiarySlotChange}></slot>`;
}
}
customElement("calcite-navigation", Navigation);
export {
Navigation
};