@cbpds/web-components
Version:
Web components for the CBP Design System.
183 lines (182 loc) • 6.58 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { debounce } from "../../utils/utils";
import { setCSSProps } from "../../utils/utils";
export class CbpCarousel {
constructor() {
this.items = [];
this.height = '100%';
this.width = '100%';
this.current = 0;
this.sx = {};
this.context = undefined;
}
watchCurrent() {
if (this.control)
this.control.current = this.current;
this.scrollToItem();
}
navigateCollection(e) {
this.updateCurrent(e.detail.index);
}
handleResize() {
this.scrollToItem();
}
scrollToItem() {
let carouselOffset = 0;
for (let x = 0; x < this.current; x++) {
carouselOffset -= this.items[x].offsetWidth;
}
setCSSProps(this.host, {
"--cbp-carousel-offset": `${carouselOffset}px`,
});
}
updateCurrent(index) {
let max = this.items.length - 1;
if (index < 0) {
this.current = 0;
}
else if (index > max) {
this.current = max;
}
else
this.current = index;
this.scrollToItem();
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ "--cbp-carousel-height": `${this.height}`, "--cbp-carousel-width": `${this.width}` }, this.sx));
this.control = this.host.querySelector('[slot="cbp-carousel-controls"]');
this.items = Array.from(this.host.querySelectorAll('cbp-carousel-item'));
}
render() {
return (h(Host, { key: 'ea8f60e825193cc3657b2ff7907e21324d05bd3f', role: "region", "aria-roledescription": "carousel" }, h("cbp-resize-observer", { key: 'ba2d8fc37bdb5b89a1c7d1b57e56c95622d79620', onResized: debounce(() => {
this.handleResize();
}, 10) }, h("div", { key: '1ac8ec4964776bd4ce4a04c867d56041efe757dc', class: "cbp-carousel-viewer", role: "group", "aria-description": "slides" }, h("div", { key: '17fc6eb5c5f3c3af9021db1c8b22ec3c977027c4', class: "cbp-carousel-container" }, h("slot", { key: '029d1d2c7387cc26b0e174de129c792b2f5ecffe' })))), h("slot", { key: '6c7c6a5aec151920617d79ee045d70597b4c9440', name: "cbp-carousel-controls" })));
}
static get is() { return "cbp-carousel"; }
static get originalStyleUrls() {
return {
"$": ["cbp-carousel.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-carousel.css"]
};
}
static get properties() {
return {
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "used to set the height (in CSS units or content values) of the carousel"
},
"attribute": "height",
"reflect": false,
"defaultValue": "'100%'"
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "used to set the width (in CSS units or content values) of the carousel"
},
"attribute": "width",
"reflect": false,
"defaultValue": "'100%'"
},
"current": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "used to set the current for the carousel"
},
"attribute": "current",
"reflect": false,
"defaultValue": "0"
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "current",
"methodName": "watchCurrent"
}];
}
static get listeners() {
return [{
"name": "navigateCollection",
"method": "navigateCollection",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-carousel.js.map