@kelvininc/ui-components
Version:
Kelvin UI Components
217 lines (216 loc) • 8.96 kB
JavaScript
import { Host, h } from "@stencil/core";
import { ALERT_ICON_NAMES } from "./alert.config";
import { EActionButtonType, EComponentSize, EIconName } from "../../types";
import { isEmpty } from "lodash-es";
/**
* @part container - The alert container.
*/
export class KvAlert {
constructor() {
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.showIcon = true;
/** @inheritdoc */
this.closable = false;
this.onCloseClick = (event) => {
this.clickCloseButton.emit(event);
};
}
render() {
return (h(Host, { key: 'fef4b74603eef1155295000e6ab01664b328e65d' }, h("div", { key: 'af27e31dbbef30303faecc97ce5b58b4a450bfb1', class: "alert-container" }, h("div", { key: '8f04189f2218982b7ec0538e87e2802e3a960336', part: "container", class: {
'alert': true,
[`alert--type-${this.type}`]: true,
'alert--size-small': this.size === EComponentSize.Small || !isEmpty(this.description)
} }, h("div", { key: 'd109469c67d7809d594e38ad2ef47aa10158b3ed', class: { 'main': true, 'show-icon': !!this.showIcon } }, h("div", { key: '84da6efac503aca62e0cfbb417e5bcd499a26b98', class: "information" }, this.showIcon && h("kv-icon", { key: '7d89b0ecdc953cafc2fdfeb370926a81b02e5469', name: ALERT_ICON_NAMES[this.type], class: "icon" }), h("div", { key: '0a98637c22264ef2ab6035e64d2e065ceeff9967', class: "text-container" }, h("div", { key: 'd2d719d7cefd6e865ddafbb12990741a2979b668', class: "title" }, this.label), h("slot", { key: 'a8527efd5f572058372b5436fdcb6ebb04ce3e6d', name: "description" }, this.description && h("div", { key: 'c89e341cc507ccdeece9619b355754b4514d7bc2', class: "description" }, this.description)))), h("slot", { key: 'a04eb17b38e37035ab1e736afe4484f29b96e4ff', name: "actions" }), this.closable && (h("kv-action-button-text", { key: '50d5403b2477a9e4c52bc79913b2e0d8038d4135', size: EComponentSize.Small, type: EActionButtonType.Text, icon: EIconName.Close, class: "close-button", onClick: this.onCloseClick }))), h("slot", { key: 'b599e02e47a1be38cbe45504c305dec8d0cdc2d6', name: "alert-content" })))));
}
static get is() { return "kv-alert"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["alert.scss"]
};
}
static get styleUrls() {
return {
"$": ["alert.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "EAlertType",
"resolved": "EAlertType.Error | EAlertType.Info | EAlertType.Success | EAlertType.Warning",
"references": {
"EAlertType": {
"location": "import",
"path": "./alert.types",
"id": "src/components/alert/alert.types.ts::EAlertType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the type of alert to show, possible values are defined in `EAlertType`"
},
"getter": false,
"setter": false,
"reflect": true
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the size of the component, defaults to EComponentType.Large"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Large"
},
"showIcon": {
"type": "boolean",
"attribute": "show-icon",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the icon should be shown, defaults to `true`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the label (title) text to show"
},
"getter": false,
"setter": false,
"reflect": true
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the description text to show"
},
"getter": false,
"setter": false,
"reflect": true
},
"closable": {
"type": "boolean",
"attribute": "closable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the close button should be shown, defaults to `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "clickCloseButton",
"name": "clickCloseButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the close button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
}