@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
36 lines (35 loc) • 1.38 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 { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
import { g as guid } from "../../chunks/guid.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
container: "container",
selected: "selected"
};
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 = `calcite-carousel-item-${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
};