@limetech/lime-elements
Version:
200 lines (199 loc) • 6.97 kB
JavaScript
import { h, } from '@stencil/core';
import { getIconColor } from '../icon/get-icon-props';
/**
* @exampleComponent limel-example-progress-flow-basic
* @exampleComponent limel-example-progress-flow-secondary-text
* @exampleComponent limel-example-progress-flow-disabled-step
* @exampleComponent limel-example-progress-flow-colors
* @exampleComponent limel-example-progress-flow-colors-css
* @exampleComponent limel-example-progress-flow-off-progress-steps
* @exampleComponent limel-example-progress-flow-narrow
*/
export class ProgressFlow {
constructor() {
this.renderRegularFlowItem = (item, index, array) => {
return (h("limel-progress-flow-item", { class: {
'flow-item': true,
first: index === 0,
last: index === array.length - 1,
passed: index < this.selectedItemIndex,
selected: item.selected,
}, style: this.getItemStyle(item), disabled: this.disabled || this.readonly, readonly: this.readonly, item: item, onInteract: this.handleFlowItemClick(item), "data-tracking-value": item.value, currentStep: index === this.selectedItemIndex }));
};
this.renderEndPhaseItem = (item, index, array) => {
return (h("limel-progress-flow-item", { class: {
'flow-item': true,
'off-progress-item': true,
selected: item.selected,
'first-off-progress-item': index === 0,
'last-off-progress-item': index === array.length - 1,
}, style: this.getItemStyle(item), disabled: this.disabled || this.readonly, readonly: this.readonly, item: item, onInteract: this.handleFlowItemClick(item), "data-tracking-value": item.value }));
};
this.handleFlowItemClick = (flowItem) => () => {
if (!flowItem.selected && !flowItem.disabled && !this.disabled) {
this.change.emit(flowItem);
}
};
this.flowItems = [];
this.disabled = false;
this.readonly = false;
}
componentDidRender() {
this.scrollToSelectedItem();
}
componentDidLoad() {
this.triggerIconColorWarning();
}
render() {
const regularFlowItems = this.flowItems.filter((item) => {
return !item.isOffProgress;
});
const endPhaseItems = this.flowItems.filter((item) => {
return item.isOffProgress;
});
this.selectedItemIndex = regularFlowItems.findIndex((item) => {
return item.selected;
});
return [
regularFlowItems.map(this.renderRegularFlowItem),
endPhaseItems.map(this.renderEndPhaseItem),
];
}
getItemStyle(flowItem) {
const color = getIconColor(flowItem.icon, flowItem.iconColor);
const style = {};
if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.selectedColor) {
style['--progress-flow-step-background-color--selected'] =
flowItem.selectedColor;
}
if (flowItem === null || flowItem === void 0 ? void 0 : flowItem.passedColor) {
style['--progress-flow-step-background-color--passed'] =
flowItem.passedColor;
}
if (color) {
style['--progress-flow-icon-color--inactive'] = color;
}
return style;
}
scrollToSelectedItem() {
const selectedElement = this.getElementForSelectedItem();
if (selectedElement) {
const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
const selectedElementCentered = selectedElementLeftPositionCentered +
selectedElement.offsetWidth / 2;
this.element.scrollTo({
behavior: 'smooth',
left: selectedElementCentered,
});
}
}
getElementForSelectedItem() {
return this.element.shadowRoot.querySelector('.flow-item.selected');
}
triggerIconColorWarning() {
for (const flowItem of this.flowItems) {
if (flowItem.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-progress-flow"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["progress-flow.scss"]
};
}
static get styleUrls() {
return {
"$": ["progress-flow.css"]
};
}
static get properties() {
return {
"flowItems": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "FlowItem[]",
"resolved": "FlowItem[]",
"references": {
"FlowItem": {
"location": "import",
"path": "./progress-flow.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "What flow items to render"
},
"defaultValue": "[]"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to disable the progress flow.\nUse `disabled` to indicate that the component can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables the progress flow when `true`.\nThis does not visualize the component that much differently.\nBut since the component does not provide any feedback that users can\ninteract with the component, it makes it perfect for illustrative and\ninformative porpuses."
},
"attribute": "readonly",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a new value has been selected from the progress flow"
},
"complexType": {
"original": "FlowItem",
"resolved": "FlowItem",
"references": {
"FlowItem": {
"location": "import",
"path": "./progress-flow.types"
}
}
}
}];
}
static get elementRef() { return "element"; }
}
//# sourceMappingURL=progress-flow.js.map