@limetech/lime-elements
Version:
178 lines (177 loc) • 4.69 kB
JavaScript
import { h, } from '@stencil/core';
import { getIconName } from '../../icon/get-icon-props';
/**
* @private
*/
export class ProgressFlowItem {
constructor() {
this.handleClick = () => {
this.interact.emit();
};
this.item = null;
this.disabled = false;
this.readonly = false;
this.currentStep = false;
}
render() {
var _a;
if (!this.item) {
return;
}
return [
h("button", { tabindex: "0", title: this.getToolTipText(), type: "button", class: {
step: true,
selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
disabled: this.isDisabled(),
readonly: this.readonly,
}, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
this.renderSecondaryText(),
];
}
isDisabled() {
var _a;
return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disabled) || this.readonly || this.disabled;
}
getToolTipText() {
if (!this.item.secondaryText) {
return this.item.text;
}
return [this.item.text, this.item.secondaryText].join(' · ');
}
renderSecondaryText() {
var _a;
if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.secondaryText)) {
return;
}
return h("div", { class: "secondary-text" }, this.item.secondaryText);
}
renderIcon() {
if (!this.item.icon) {
return;
}
const name = getIconName(this.item.icon);
return h("limel-icon", { name: name, size: "small", class: "icon" });
}
renderDivider() {
if (this.item.isOffProgress) {
return;
}
return h("div", { class: "divider" });
}
renderLockIcon() {
if (!this.isDisabled()) {
return;
}
return h("limel-icon", { name: "lock", class: "lock-icon" });
}
static get is() { return "limel-progress-flow-item"; }
static get originalStyleUrls() {
return {
"$": ["progress-flow-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["progress-flow-item.css"]
};
}
static get properties() {
return {
"item": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "FlowItem",
"resolved": "FlowItem",
"references": {
"FlowItem": {
"location": "import",
"path": "../progress-flow.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The flow item that should be rendered"
},
"defaultValue": "null"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "True if the flow item should be disabled"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "True if the flow item should be readonly"
},
"attribute": "readonly",
"reflect": false,
"defaultValue": "false"
},
"currentStep": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "True for current step"
},
"attribute": "current-step",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "interact",
"name": "interact",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when clicking on the flow item"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "element"; }
}
//# sourceMappingURL=progress-flow-item.js.map