@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: '1f8508419e7e90700a1de2ab935221ac3f6047e4', role: "region", "aria-roledescription": "carousel" }, h("cbp-resize-observer", { key: 'a5c8deeb8b0cf6557d42957bad64980357cb97d5', onResized: debounce(() => {
this.handleResize();
}, 10) }, h("div", { key: '5167a3076f8d0a66375bf555659590fc2f8740ce', class: "cbp-carousel-viewer", role: "group", "aria-description": "slides" }, h("div", { key: 'c07ae019f72ee7ba5a38825ac8ee3053f5a718c3', class: "cbp-carousel-container" }, h("slot", { key: '44cd1ed22ac20ac1fb4b8ae3516da9e40c9ff8f9' })))), h("slot", { key: '784c460711991c4b6b893a3533e8b43482c17ffd', 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