@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
37 lines (36 loc) • 1.29 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
import { g as guid } from "../../chunks/guid.js";
const CSS = {
container: "container",
selected: "selected"
};
const idPrefix = "calcite-carousel-item";
const IDS = {
host: (id) => `${idPrefix}-${id}`
};
const styles = css`:host{display:flex}.container{display:none;inline-size:var(--calcite-container-size-content-fluid)}:host([selected]) .container{display:block}:host([hidden]){display:none}[hidden]{display:none}`;
class CarouselItem extends LitElement {
constructor() {
super(...arguments);
this.guid = IDS.host(guid());
this.selected = false;
}
static {
this.properties = { label: 1, selected: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
render() {
const id = this.el.id || this.guid;
setAttribute(this.el, "id", id);
return html`<div .ariaLabel=${this.label} class=${safeClassMap({ [CSS.container]: true, [CSS.selected]: this.selected })} role=tabpanel><slot></slot></div>`;
}
}
customElement("calcite-carousel-item", CarouselItem);
export {
CarouselItem
};