@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
73 lines (72 loc) • 4.27 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";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
accordion: "accordion",
transparent: "accordion--transparent"
};
const styles = css`:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-color-border-2));background-color:var(--calcite-accordion-background-color, var(--calcite-color-foreground-1))}.accordion--transparent{--calcite-accordion-border-color: transparent;border-color:var(--calcite-color-transparent);background-color:var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-accordion-item-spacing-unit: .25rem;--calcite-internal-accordion-icon-margin: .5rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-internal-accordion-item-spacing-unit: .5rem;--calcite-internal-accordion-icon-margin: .75rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-internal-accordion-item-spacing-unit: .75rem;--calcite-internal-accordion-icon-margin: 1rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
class Accordion extends LitElement {
constructor() {
super();
this.mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
this.appearance = "solid";
this.iconPosition = "end";
this.iconType = "chevron";
this.scale = "m";
this.selectionMode = "multiple";
this.calciteInternalAccordionChange = createEvent({ cancelable: false });
this.listen("calciteInternalAccordionItemSelect", this.updateActiveItemOnChange);
}
static {
this.properties = { appearance: [3, {}, { reflect: true }], iconPosition: [3, {}, { reflect: true }], iconType: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.mutationObserver?.observe(this.el, { childList: true });
this.updateAccordionItems();
}
willUpdate(changes) {
if (changes.has("appearance") && (this.hasUpdated || this.appearance !== "solid") || changes.has("iconPosition") && (this.hasUpdated || this.iconPosition !== "end") || changes.has("iconType") && (this.hasUpdated || this.iconType !== "chevron") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "multiple")) {
this.updateAccordionItems();
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
}
updateActiveItemOnChange(event) {
this.calciteInternalAccordionChange.emit({
requestedAccordionItem: event.detail.requestedAccordionItem
});
event.stopPropagation();
}
updateAccordionItems() {
this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
item.appearance = this.appearance;
item.iconPosition = this.iconPosition;
item.iconType = this.iconType;
item.scale = this.scale;
});
document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
}
render() {
const transparent = this.appearance === "transparent";
return html`<div class=${safeClassMap({
[CSS.transparent]: transparent,
[CSS.accordion]: !transparent
})}><slot></slot></div>`;
}
}
customElement("calcite-accordion", Accordion);
export {
Accordion
};