@kelvininc/ui-components
Version:
Kelvin UI Components
155 lines (154 loc) • 5.63 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
export class KvInputWrapper {
constructor() {
/** @inheritdoc */
this.contentHidden = false;
/** @inheritdoc */
this.icon = EIconName.Edit;
this.handleContentClick = () => {
if (!this.contentVisible && !this.contentHidden) {
this.contentClick.emit(this.contentVisible);
}
};
}
render() {
return (h(Host, { key: 'e3bdb69251bc0585c247ffb151cdde63a08602b4' }, h("div", { key: '85a07478335d00c75866ae1c4cc1b50e8e41fca1', class: {
'input-container': true,
'input-container--content-hidden': !this.contentVisible && !this.contentHidden
}, onClick: this.handleContentClick }, this.contentVisible && !this.contentHidden ? (h("div", { class: "slot-container" }, h("slot", null))) : (h("div", { class: "label-container" }, h("div", { class: "label" }, this.label), h("kv-icon", { name: this.icon }))))));
}
static get is() { return "kv-input-wrapper"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["input-wrapper.scss"]
};
}
static get styleUrls() {
return {
"$": ["input-wrapper.css"]
};
}
static get properties() {
return {
"contentVisible": {
"type": "boolean",
"attribute": "content-visible",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Defines the state of the component"
},
"getter": false,
"setter": false,
"reflect": false
},
"contentHidden": {
"type": "boolean",
"attribute": "content-hidden",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Defines if the content can be seen"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Label that is shown when the component is in Default state"
},
"getter": false,
"setter": false,
"reflect": false
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Icon that is displayed when the component is hovered and is in default state"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EIconName.Edit"
}
};
}
static get events() {
return [{
"method": "contentClick",
"name": "contentClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Event emitted when the component is clicked to display the wrapped content"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
}