@limetech/lime-elements
Version:
212 lines (211 loc) • 7.88 kB
JavaScript
import { h, } from "@stencil/core";
import { createRandomString } from "../../../util/random-string";
import { makeEnterClickable, removeEnterClickable, } from "../../../util/make-enter-clickable";
import { getIconColor, getIconName, getIconTitle, } from "../../icon/get-icon-props";
/**
* @private
*/
export class ActionBarButton {
constructor() {
/**
* When the item is displayed in the available width,
* this will be `false`.
*/
this.isVisible = true;
/**
* When the item is selected, this will be `true`.
*/
this.selected = false;
this.handleClick = (event) => {
event.stopPropagation();
this.select.emit(this.item);
};
this.tooltipId = createRandomString();
}
componentWillLoad() {
makeEnterClickable(this.host);
}
componentDidLoad() {
this.triggerIconColorWarning();
}
disconnectedCallback() {
removeEnterClickable(this.host);
}
render() {
if (!this.isItem(this.item) && this.item.separator) {
return h("hr", null);
}
return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
'is-selected': this.isItem(this.item) && this.item.selected,
} }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
}
isItem(item) {
return !('separator' in item);
}
isDisabled() {
if (this.isItem(this.item) && this.item.disabled) {
return true;
}
if (!this.isVisible) {
return true;
}
}
renderIcon() {
if (this.isItem(this.item) && !this.item.icon) {
return;
}
if ('icon' in this.item) {
const name = getIconName(this.item.icon);
const color = getIconColor(this.item.icon, this.item.iconColor);
const title = getIconTitle(this.item.icon);
return (h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
'--action-bar-item-icon-color': `${color}`,
} }));
}
}
renderLabel() {
if (!this.isItem(this.item) || this.item.iconOnly) {
return;
}
return h("span", { class: "text" }, this.item.text);
}
renderTooltip() {
if (!this.isItem(this.item)) {
return;
}
return (h("limel-tooltip", { elementId: this.tooltipId, label: this.getTooltipLabel(this.item), helperLabel: this.item.commandText }));
}
getTooltipLabel(item) {
const iconTitle = getIconTitle(item.icon);
const tooltipLabel = item.text;
if (iconTitle && tooltipLabel) {
return `${iconTitle} ${tooltipLabel}`;
}
return tooltipLabel;
}
triggerIconColorWarning() {
if (this.isItem(this.item) && this.item.iconColor) {
console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
}
}
static get is() { return "limel-action-bar-item"; }
static get originalStyleUrls() {
return {
"$": ["action-bar-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["action-bar-item.css"]
};
}
static get properties() {
return {
"item": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ActionBarItem | ListSeparator",
"resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
"references": {
"ActionBarItem": {
"location": "import",
"path": "../../action-bar/action-bar.types",
"id": "src/components/action-bar/action-bar.types.ts::ActionBarItem",
"referenceLocation": "ActionBarItem"
},
"ListSeparator": {
"location": "import",
"path": "../../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListSeparator",
"referenceLocation": "ListSeparator"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Item that is placed in the action bar."
},
"getter": false,
"setter": false
},
"isVisible": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When the item is displayed in the available width,\nthis will be `false`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "is-visible",
"defaultValue": "true"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When the item is selected, this will be `true`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "selected",
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "select",
"name": "select",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "public",
"text": undefined
}],
"text": "Fired when a action bar item has been clicked."
},
"complexType": {
"original": "ActionBarItem | ListSeparator",
"resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
"references": {
"ActionBarItem": {
"location": "import",
"path": "../../action-bar/action-bar.types",
"id": "src/components/action-bar/action-bar.types.ts::ActionBarItem",
"referenceLocation": "ActionBarItem"
},
"ListSeparator": {
"location": "import",
"path": "../../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListSeparator",
"referenceLocation": "ListSeparator"
}
}
}
}];
}
static get elementRef() { return "host"; }
}