@limetech/lime-elements
Version:
194 lines (193 loc) • 7.11 kB
JavaScript
import { h, Host } from "@stencil/core";
import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter-clickable";
import { createRandomString } from "../../util/random-string";
import { getIconName, getIconTitle } from "../icon/get-icon-props";
/**
* @exampleComponent limel-example-icon-button-basic
* @exampleComponent limel-example-icon-button-disabled
* @exampleComponent limel-example-icon-button-elevated
* @exampleComponent limel-example-icon-button-toggle-state
* @exampleComponent limel-example-icon-button-icon
* @exampleComponent limel-example-icon-button-helper-label
* @exampleComponent limel-example-icon-button-composite
*/
export class IconButton {
constructor() {
/**
* Set to `true` to give the button our standard "elevated" look, lifting
* it off the flat layout.
*/
this.elevated = false;
/**
* Set to `true` to disable the button.
*/
this.disabled = false;
this.tooltipId = createRandomString();
this.filterClickWhenDisabled = (e) => {
if (this.disabled) {
e.preventDefault();
}
};
}
connectedCallback() {
this.initialize();
}
componentWillLoad() {
makeEnterClickable(this.host);
}
disconnectedCallback() {
removeEnterClickable(this.host);
}
componentDidLoad() {
this.initialize();
}
initialize() {
const element = this.host.shadowRoot.querySelector('.mdc-icon-button');
if (!element) {
return;
}
}
render() {
const buttonAttributes = {};
if (this.host.hasAttribute('tabindex')) {
buttonAttributes.tabindex = this.host.getAttribute('tabindex');
}
return (h(Host, { key: '0df3febef19dcdb72c7c7f3740090414b313be51', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'fd0d61e30789619c52cd6a71269602efc7065f8e', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
}
renderIcon() {
var _a, _b;
const icon = getIconName(this.icon);
const title = getIconTitle(this.icon);
return (h("limel-icon", { name: icon, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
'--icon-background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
} }));
}
renderTooltip(tooltipId) {
if (this.label) {
return (h("limel-tooltip", { elementId: tooltipId, label: this.label, helperLabel: this.helperLabel }));
}
}
static get is() { return "limel-icon-button"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["icon-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["icon-button.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | Icon",
"resolved": "Icon | string",
"references": {
"Icon": {
"location": "import",
"path": "../../global/shared-types/icon.types",
"id": "src/global/shared-types/icon.types.ts::Icon",
"referenceLocation": "Icon"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The icon to display."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"elevated": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to give the button our standard \"elevated\" look, lifting\nit off the flat layout."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "elevated",
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text to show to screenreaders and other assistive tech.\nIt is also displayed as a tooltip when the user hovers\nor focuses the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label"
},
"helperLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Additional helper text for the tooltip.\nExample usage can be a keyboard shortcut to activate\nthe function of the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "helper-label"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to disable the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
}