@limetech/lime-elements
Version:
160 lines (159 loc) • 4.71 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-composite
*/
export class IconButton {
constructor() {
this.tooltipId = createRandomString();
this.filterClickWhenDisabled = (e) => {
if (this.disabled) {
e.preventDefault();
}
};
this.icon = undefined;
this.elevated = false;
this.label = undefined;
this.disabled = false;
}
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, { onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ 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 });
}
}
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"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The icon to display."
},
"attribute": "icon",
"reflect": false
},
"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."
},
"attribute": "elevated",
"reflect": true,
"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."
},
"attribute": "label",
"reflect": true
},
"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."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=icon-button.js.map