@cbpds/web-components
Version:
Web components for the CBP Design System.
142 lines (141 loc) • 5.51 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
export class CbpDotIndicator {
constructor() {
this.selectedIndex = 0;
this.focusIndex = 0;
this.current = 0;
this.itemName = 'Item';
this.items = undefined;
}
setIndexActive(index) {
if (index >= this.items) {
index = 0;
}
else if (index < 0) {
index = this.items - 1;
}
this.selectedIndex = this.focusIndex = index;
this.current = index;
this.navigateCollection.emit({
host: this.host,
index: this.current
});
}
generateIndicator() {
let dots = [];
for (let x = 0; x < this.items; x++) {
let newIndicator = h("button", { role: "tab", "aria-label": `${this.itemName} ${x + 1}`, "aria-selected": x == this.current ? "true" : "false", tabindex: x == this.current ? "0" : "-1", onClick: () => this.setIndexActive(x) }, h("span", null));
dots = [...dots, newIndicator];
}
return dots;
}
keyboardNav(key) {
const l = this.items - 1;
const n = {
Home: 0,
ArrowLeft: -1 < this.focusIndex + -1 ? this.focusIndex + -1 : l,
ArrowRight: l + 1 > this.focusIndex + 1 ? this.focusIndex + 1 : 0,
End: l,
Tab: this.focusIndex = this.selectedIndex,
}[key];
if (n !== undefined && key !== 'Tab') {
this.focusIndex = n;
let focusedIndicator = this.host.querySelectorAll(`.dot-indicators-container button`)[this.focusIndex];
focusedIndicator.focus();
}
}
render() {
return (h(Host, { key: '36f2b5f319f7eb07386042e69f906085955a3941' }, h("cbp-button", { key: 'a64f5926f43ad66d10a3e21f1d4ca59e85e06573', fill: "ghost", color: "secondary", variant: "square", accessibilityText: "previous " + this.itemName, onClick: () => { this.setIndexActive(this.selectedIndex - 1); } }, h("cbp-icon", { key: 'b99c262889bf6fc521fcb3cdddcfa7f5946df818', name: "angle-down", rotate: 90 })), h("div", { key: '65783cfe74d601b999710fce834da045282b3ce6', class: "dot-indicators-container", role: "tablist", onKeyDown: ({ key }) => { this.keyboardNav(key); } }, this.generateIndicator()), h("cbp-button", { key: '55a5b0b0c111a4b85d4fa37d20b8bf22448a4f4b', fill: "ghost", color: "secondary", variant: "square", accessibilityText: "next " + this.itemName, onClick: () => { this.setIndexActive(this.selectedIndex + 1); } }, h("cbp-icon", { key: '3e662713a13e742541f43245089b9c49b3610720', name: "angle-down", rotate: 270 }))));
}
static get is() { return "cbp-dot-indicator"; }
static get originalStyleUrls() {
return {
"$": ["cbp-dot-indicator.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-dot-indicator.css"]
};
}
static get properties() {
return {
"current": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "the currently active dot"
},
"attribute": "current",
"reflect": false,
"defaultValue": "0"
},
"itemName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "unit of measure for what the dot indicator is measuring"
},
"attribute": "item-name",
"reflect": false,
"defaultValue": "'Item'"
},
"items": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Length of index dot-indicator is tracking"
},
"attribute": "items",
"reflect": false
}
};
}
static get events() {
return [{
"method": "navigateCollection",
"name": "navigateCollection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event emitted when the Dot-indicator changes active indicator"
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-dot-indicator.js.map