wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
83 lines (82 loc) • 3.54 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import WJElement from "./wje-element.js";
import { event } from "./event.js";
const styles = "/*\n[ WJ Carousel Item ]\n*/\n\n:host {\n display: flex;\n align-items: stretch;\n justify-content: flex-start;\n flex-direction: column;\n width: var(--wje-carousel-item-basis, var(--wje-carousel-size, 100%));\n min-width: 0;\n max-width: 100%;\n max-height: 100%;\n align-self: stretch;\n aspect-ratio: var(--wje-carousel-item-aspect-ratio, inherit);\n scroll-snap-align: start;\n scroll-snap-stop: always;\n box-sizing: border-box;\n}\n\n.native-carousel-item {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1 1 auto;\n align-items: stretch;\n justify-content: flex-start;\n min-width: 0;\n box-sizing: border-box;\n}\n\nslot {\n display: flex;\n width: 100%;\n height: 100%;\n flex: 1 1 auto;\n align-items: stretch;\n justify-content: center;\n min-width: 0;\n}\n\n:host([single-content]) ::slotted(*) {\n width: 100%;\n min-width: 0;\n flex: 1 1 auto;\n}\n\n::slotted(wje-img) {\n width: 100% !important;\n height: 100% !important;\n object-fit: contain;\n display: flex;\n}\n";
class CarouselItem extends WJElement {
/**
* CarouselItem constructor method.
*/
constructor() {
super();
/**
* Class name for the CarouselItem element.
* @type {string}
*/
__publicField(this, "className", "CarouselItem");
}
/**
* Getter for the CSS stylesheet.
* @returns {*}
*/
static get cssStyleSheet() {
return styles;
}
/**
* Getter for the observed attributes.
* @returns {*[]}
*/
static get observedAttributes() {
return [];
}
/**
* Sets up the attributes for the CarouselItem.
*/
setupAttributes() {
this.isShadowRoot = "open";
}
/**
* Draws the CarouselItem element.
* @returns {DocumentFragment}
*/
draw() {
let fragment = document.createDocumentFragment();
let native = document.createElement("div");
native.classList.add("native-carousel-item");
native.setAttribute("part", "native");
let slot = document.createElement("slot");
this.defaultSlot = slot;
native.appendChild(slot);
fragment.appendChild(native);
return fragment;
}
/**
* After draw event for the CarouselItem element.
*/
afterDraw() {
event.addListener(this, "click", "wje-carousel-item:click");
this.syncContentLayoutMode();
if (this.defaultSlot && !this.defaultSlot.dataset.wjeCarouselItemBound) {
this.defaultSlot.addEventListener("slotchange", () => this.syncContentLayoutMode());
this.defaultSlot.dataset.wjeCarouselItemBound = "true";
}
}
/**
* Keeps a simple layout hint for single-wrapper content.
*/
syncContentLayoutMode() {
var _a;
const assignedElements = ((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || [];
if (assignedElements.length === 1) {
this.setAttribute("single-content", "");
return;
}
this.removeAttribute("single-content");
}
}
WJElement.define("wje-carousel-item", CarouselItem);
export {
CarouselItem as default
};
//# sourceMappingURL=wje-carousel-item.js.map