@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
274 lines (273 loc) • 10.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __rest } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag, KolLinkWcTag } from "../../core/component-names";
import { validateLabel, validateToolbarItems } from "../../schema";
import { KeyboardKey } from "../../schema/enums";
import { validateOrientation } from "../../schema/props/orientation";
import { delegateClick, setClick } from "../../utils/element-click";
import { delegateFocus, setFocus } from "../../utils/element-focus";
export class KolToolbar {
constructor() {
this.state = {
_label: '',
_items: [],
};
this.currentIndex = 0;
this.indexToElement = new Map();
this.renderItem = (raw, index) => {
const element = this.normalizeItem(raw);
const tabIndex = index === this.currentIndex && !(element === null || element === void 0 ? void 0 : element._disabled) ? 0 : -1;
const props = {
key: index,
class: 'button normal kol-toolbar__item',
_tabIndex: tabIndex,
_variant: 'normal',
};
const catchRef = (el) => {
if (el)
this.indexToElement.set(index, el);
};
return element.type === 'link' ? (h(KolLinkWcTag, Object.assign({}, props, element, { ref: catchRef }))) : (h(KolButtonWcTag, Object.assign({}, props, element, { ref: catchRef })));
};
}
async focus() {
const firstEnabledItem = this.indexToElement.get(this.currentIndex);
if (firstEnabledItem) {
return delegateFocus(this.host, () => setFocus(firstEnabledItem));
}
}
async click() {
const currentItem = this.indexToElement.get(this.currentIndex);
if (currentItem) {
return delegateClick(this.host, async () => setClick(currentItem));
}
}
normalizeItem(item) {
const { _icons, _disabled } = item, rest = __rest(item, ["_icons", "_disabled"]);
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
}
render() {
return (h("div", { key: '275f13ac813c33395731de5b9073f1a3ab573734', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
}
validateLabel(value) {
validateLabel(this, value);
}
validateItems(value) {
validateToolbarItems(this, value);
this.indexToElement.clear();
this.setFirstEnabledItemIndex();
}
validateOrientation(value) {
validateOrientation(this, value);
}
getCurrentToolbarItem(index) {
return typeof index === 'number' ? this.indexToElement.get(index) : undefined;
}
setFirstEnabledItemIndex() {
var _a;
this.currentIndex = (_a = this.state._items) === null || _a === void 0 ? void 0 : _a.findIndex((item) => !item._disabled);
}
handleKeyDown(event) {
var _a, _b, _c, _d;
const pressedKey = event.code;
const isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);
if (!isArrowKey)
return;
event.preventDefault();
const lastItemIndex = ((_b = (_a = this._items) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1;
if (lastItemIndex < 0)
return;
const currentIndex = this.currentIndex;
let nextIndex = currentIndex;
switch (pressedKey) {
case KeyboardKey.ArrowUp:
case KeyboardKey.ArrowLeft:
nextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;
break;
case KeyboardKey.ArrowDown:
case KeyboardKey.ArrowRight:
nextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;
break;
}
if (currentIndex === nextIndex) {
return;
}
if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled) {
return;
}
this.currentIndex = nextIndex;
const item = this.getCurrentToolbarItem(nextIndex);
if (this.host) {
void (item === null || item === void 0 ? void 0 : item.focus());
}
}
handleFocusout(event) {
if (event.target === this.host)
this.setFirstEnabledItemIndex();
}
componentWillLoad() {
this.validateLabel(this._label);
this.validateItems(this._items);
this.validateOrientation(this._orientation);
this.setFirstEnabledItemIndex();
}
static get is() { return "kol-toolbar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ToolbarItemsPropType",
"resolved": "ToolbarItemPropType[]",
"references": {
"ToolbarItemsPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ToolbarItemsPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the functional elements of toolbar to render (e.g. kol-link, kol-button)."
},
"getter": false,
"setter": false
},
"_orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OrientationPropType",
"resolved": "\"horizontal\" | \"vertical\" | undefined",
"references": {
"OrientationPropType": {
"location": "import",
"path": "../../schema/props/orientation",
"id": "src/schema/props/orientation.ts::OrientationPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the orientation of the component is horizontal or vertical."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_orientation"
}
};
}
static get states() {
return {
"state": {},
"currentIndex": {}
};
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the currently active toolbar item.",
"tags": []
}
},
"click": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Triggers a click on the currently active toolbar item.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_items",
"methodName": "validateItems"
}, {
"propName": "_orientation",
"methodName": "validateOrientation"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "focusout",
"method": "handleFocusout",
"target": undefined,
"capture": true,
"passive": false
}];
}
}
//# sourceMappingURL=shadow.js.map