@limetech/lime-elements
Version:
142 lines (141 loc) • 4.53 kB
JavaScript
import { getIconName } from '../icon/get-icon-props';
import { h } from '@stencil/core';
/**
* This components displays a different label depending on the current given
* value. A label can consist of a text and an optional icon. If no matching
* label is found among the given `labels`, the `defaultLabel` will be displayed.
*
* One use case of the component is to enhance the visualization of a `boolean`
* field like a checkbox or switch in a `readonly` state.
*
* The reason we offer this component is that the default styling
* of the Checkbox or Toggle switch in the `readonly` state may not always
* provide the best way of _visualizing information_, potentially leading to
* confusion and negatively affecting the end-users' experience.
*
* @exampleComponent limel-example-dynamic-label
* @exampleComponent limel-example-dynamic-label-readonly-boolean
*/
export class DynamicLabel {
constructor() {
this.value = undefined;
this.defaultLabel = {};
this.labels = [];
}
render() {
var _a, _b;
const label = this.labels.find((l) => l.value === this.value);
return [
this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
];
}
renderIcon(icon) {
const iconName = getIconName(icon);
if (!iconName) {
return;
}
let iconColor;
let iconBackgroundColor;
if (typeof icon === 'object') {
iconColor = icon.color;
iconBackgroundColor = icon.backgroundColor;
}
const iconProps = {
role: 'presentation',
name: iconName,
style: {
color: iconColor,
'background-color': iconBackgroundColor,
},
};
return h("limel-icon", Object.assign({}, iconProps));
}
renderLabel(label = '') {
return h("label", null, label);
}
static get is() { return "limel-dynamic-label"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["dynamic-label.scss"]
};
}
static get styleUrls() {
return {
"$": ["dynamic-label.css"]
};
}
static get properties() {
return {
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "LabelValue",
"resolved": "boolean | number | string",
"references": {
"LabelValue": {
"location": "import",
"path": "./label.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The current value of the component which is used to match with the given\n`labels` to determine what label to display.\n\nIf not matching label is found, the `defaultLabel` is displayed."
},
"attribute": "value",
"reflect": false
},
"defaultLabel": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Omit<Label, 'value'>",
"resolved": "{ text?: string; icon?: string | Icon; }",
"references": {
"Omit": {
"location": "global"
},
"Label": {
"location": "import",
"path": "./label.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The label to display when no matching value is found in the `labels`\narray. This is a fallback label that ensures there's always a label\ndisplayed for the component."
},
"defaultValue": "{}"
},
"labels": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Label[]",
"resolved": "Label<LabelValue>[]",
"references": {
"Label": {
"location": "import",
"path": "./label.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A list of available labels. Each label has a corresponding value that\nwill be matched with the current `value` of the component to determine\nwhat label to display."
},
"defaultValue": "[]"
}
};
}
}
//# sourceMappingURL=dynamic-label.js.map