@cbpds/web-components
Version:
Web components for the CBP Design System.
69 lines (63 loc) • 5.46 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const cbpDotIndicatorCss = ":root{--cbp-dot-indicator-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-dot-indicator-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-dot-indicator-color-focus:var(--cbp-color-interactive-focus-dark);--cbp-dot-indicator-color-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-dot-indicator-color-selected:var(--cbp-color-interactive-secondary-darker);--cbp-dot-indicator-color-selected-dark:var(--cbp-color-interactive-selected-light)}[data-cbp-theme=light] cbp-dot-indicator[context*=dark],[data-cbp-theme=dark] cbp-dot-indicator:not([context=dark-inverts]):not([context=light-always]){--cbp-dot-indicator-color-hover:var(--cbp-dot-indicator-color-hover-dark);--cbp-dot-indicator-color-focus:var(--cbp-dot-indicator-color-focus-dark);--cbp-dot-indicator-color-selected:var(--cbp-dot-indicator-color-selected-dark)}cbp-dot-indicator{display:flex;justify-content:center}cbp-dot-indicator .dot-indicators-container{display:inline-flex}cbp-dot-indicator .dot-indicators-container button{height:var(--cbp-space-9x);width:var(--cbp-space-9x);border:0;background-color:transparent;padding:none;display:inline-flex;align-items:center;justify-content:center}cbp-dot-indicator .dot-indicators-container button span{height:var(--cbp-space-4x);width:var(--cbp-space-4x);border:var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-darker);border-radius:var(--cbp-border-radius-circle)}cbp-dot-indicator .dot-indicators-container button:hover span{background-color:var(--cbp-dot-indicator-color-hover);border-color:var(--cbp-dot-indicator-color-hover)}cbp-dot-indicator .dot-indicators-container button:focus span{background-color:var(--cbp-dot-indicator-color-focus);border-color:var(--cbp-dot-indicator-color-focus);outline:var(--cbp-space-half-x) solid var(--cbp-dot-indicator-color-focus);outline-offset:var(--cbp-space-half-x)}cbp-dot-indicator .dot-indicators-container button[aria-selected=true] span{background-color:var(--cbp-dot-indicator-color-selected);border-color:var(--cbp-dot-indicator-color-selected)}cbp-dot-indicator .dot-indicators-container:focus-visible,cbp-dot-indicator .dot-indicators-container button:focus-visible{border:none;outline:none}";
const CbpDotIndicatorStyle0 = cbpDotIndicatorCss;
const CbpDotIndicator = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.navigateCollection = index.createEvent(this, "navigateCollection", 7);
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 = index.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) }, index.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 (index.h(index.Host, { key: '36f2b5f319f7eb07386042e69f906085955a3941' }, index.h("cbp-button", { key: 'a64f5926f43ad66d10a3e21f1d4ca59e85e06573', fill: "ghost", color: "secondary", variant: "square", accessibilityText: "previous " + this.itemName, onClick: () => { this.setIndexActive(this.selectedIndex - 1); } }, index.h("cbp-icon", { key: 'b99c262889bf6fc521fcb3cdddcfa7f5946df818', name: "angle-down", rotate: 90 })), index.h("div", { key: '65783cfe74d601b999710fce834da045282b3ce6', class: "dot-indicators-container", role: "tablist", onKeyDown: ({ key }) => { this.keyboardNav(key); } }, this.generateIndicator()), index.h("cbp-button", { key: '55a5b0b0c111a4b85d4fa37d20b8bf22448a4f4b', fill: "ghost", color: "secondary", variant: "square", accessibilityText: "next " + this.itemName, onClick: () => { this.setIndexActive(this.selectedIndex + 1); } }, index.h("cbp-icon", { key: '3e662713a13e742541f43245089b9c49b3610720', name: "angle-down", rotate: 270 }))));
}
get host() { return index.getElement(this); }
};
CbpDotIndicator.style = CbpDotIndicatorStyle0;
exports.cbp_dot_indicator = CbpDotIndicator;
//# sourceMappingURL=cbp-dot-indicator.cjs.entry.js.map