@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
62 lines (61 loc) • 3.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 { keyed } from "lit-html/directives/keyed.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
import { l as logger } from "../../chunks/logger.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
actionBarContainer: "action-bar-container",
content: "content"
};
const SLOTS = {
actionBar: "action-bar"
};
const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{z-index:var(--calcite-z-index);display:flex;flex:1 1 auto;overflow:hidden;background-color:transparent}.content{margin:0;display:flex;block-size:100%;inline-size:100%;overflow:hidden;flex:1 0 0}.action-bar-container{display:flex}:host([detached]){margin-inline:.5rem;margin-block:.5rem 1.5rem}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}:host([detached]){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;border-width:0px;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([position=end]){align-self:flex-end}:host([position=start]){align-self:flex-start}:host([height-scale=s]){block-size:33.333333%}:host([height-scale=m]){block-size:70%}:host([height-scale=l]){block-size:100%}:host([height-scale=l][detached]){block-size:calc(100% - 2rem)}::slotted(calcite-panel){block-size:100%;inline-size:100%}::slotted(calcite-action-bar),::slotted(calcite-action-bar[position=end]){border-inline-end:1px solid;border-color:var(--calcite-color-border-3)}:host([hidden]){display:none}[hidden]{display:none}`;
class ShellCenterRow extends LitElement {
constructor() {
super(...arguments);
this.detached = false;
this.heightScale = "s";
this.position = "end";
}
static {
this.properties = { actionBar: [16, {}, { state: true }], detached: [7, {}, { reflect: true, type: Boolean }], heightScale: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
load() {
logger.deprecated("component", {
name: "shell-center-row",
removalVersion: 4,
suggested: "shell-panel"
});
}
loaded() {
if (this.actionBar?.position === "end") {
this.requestUpdate();
}
}
handleActionBarSlotChange(event) {
this.actionBar = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-bar"))[0];
}
render() {
const { actionBar } = this;
const contentNode = html`<div class=${safeClassMap(CSS.content)}><slot></slot></div>`;
const actionBarNode = keyed("action-bar", html`<div class=${safeClassMap(CSS.actionBarContainer)} .hidden=${!this.actionBar}><slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`);
const children = [actionBarNode, contentNode];
if (actionBar?.position === "end") {
children.reverse();
}
return children;
}
}
customElement("calcite-shell-center-row", ShellCenterRow);
export {
ShellCenterRow
};