@kelvininc/ui-components
Version:
Kelvin UI Components
60 lines (59 loc) • 5.4 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getClassMap } from "../../../utils/css-class.helper";
/**
* @part illustration - The illustration container.
*/
export class KvNoMatchingResults {
constructor() {
/** @inheritdoc */
this.customClass = '';
}
render() {
return (h(Host, { key: 'f8613f59ae263e14e6cb3df86404670e0d91db70' }, h("svg", { key: 'f9f56c70d192646e566848ed8a4efdfae21c4adb', part: "illustration", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 86", fill: "none", class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { illustration: true }) }, h("circle", { key: '8fccf3bb49c41d8e5f37118cf057282db1b97249', cx: "57.422", cy: "43", r: "40", fill: "var(--illustrations-background, var(--color-gray-800, #262626))" }), h("mask", { key: 'bfc765dfcbe10c4e1b47509c7a5e3ca5503de06b', id: "a", width: "81", height: "80", x: "17", y: "3", maskUnits: "userSpaceOnUse", style: { "mask-type": "alpha" } }, h("circle", { key: 'f013b08407ee76429a7d0d80494e5473849797d5', cx: "57.422", cy: "43", r: "40", fill: "var(--illustrations-background, var(--color-gray-800, #262626))" })), h("g", { key: 'daae129efecb266762e6e4b0d2faca029505fbcb', mask: "url(#a)" }, h("path", { key: 'f899120e2358e6c6097780523d4e6c625f6ee071', fill: "var(--illustrations-shape-secondary, #404040)", d: "M111.422 43h-103v13h103z" }), h("path", { key: 'c5956fbf6107773d6fa749bc7985391fa98ecb50', fill: "var(--illustrations-shape-secondary, #404040)", d: "M77.422 42h-23v15h23z" }), h("rect", { key: 'ea43ed5e0bba58f2af6c9ecf00c0b05b61bd65cf', width: "3", height: "17", x: "53.422", y: "41", fill: "var(--illustrations-shape-tertiary, #1a1a1a)", rx: "1.5" }), h("rect", { key: 'c976b862b3e834dbea8d023dddd446d2b41d59b7', width: "3", height: "17", x: "75.422", y: "41", fill: "var(--illustrations-shape-tertiary, #1a1a1a)", rx: "1.5" }), h("path", { key: 'f90fd4440ced97dd9ebe73dda90c2920bd2e18a8', fill: "var(--illustrations-shape-tertiary, #1a1a1a)", d: "M67.319 40.504 76.823 31l-1.415-1.414-9.503 9.503z" }), h("path", { key: '54c25999623b49cd9322a6e21285096623c0a865', fill: "var(--illustrations-shape-tertiary, #1a1a1a)", d: "M64.525 40.504 55.022 31l1.414-1.414 9.503 9.503z" }), h("path", { key: 'a5180713322f70d20f893ef0522584a82a795d3f', fill: "var(--illustrations-shape-tertiary, #1a1a1a)", d: "M67.422 40v-9h-3v9z" }), h("path", { key: '1e521fff129a7c6bab9865c99734a7ec932bca60', fill: "var(--illustrations-shape-tertiary, #1a1a1a)", d: "M70.422 39h-9v3h9z" }), h("rect", { key: 'f72c5d9b5b9318abab0db64d850bd802ad6c0c48', width: "29", height: "4", x: "51.422", y: "29", fill: "var(--illustrations-shape-primary, #595959)", rx: "2" })), h("rect", { key: '4b279e0a9475d1f4944d5a56eb8ea62613e73f06', width: "14", height: "6", x: "15.59", y: "77", fill: "var(--illustrations-icon-primary, #e5e5e5)", rx: "3" }), h("path", { key: '24f44e2c0bb72554c54d1e623417eb85248d367c', fill: "var(--illustrations-icon-secondary, #bfbfbf)", d: "M15.59 80h14a3 3 0 0 1-3 3h-8a3 3 0 0 1-3-3" }), h("rect", { key: '351d9168e64d638772714f40f12cd5bf0869611c', width: "28", height: "6", x: "8.59", y: "65", fill: "var(--illustrations-accent-primary, #7c4dff)", rx: "3" }), h("path", { key: '99ac849adeba5136d1c78ec58b1c5b3ef62c7f26', fill: "var(--illustrations-accent-secondary, #6933ff)", d: "M8.59 68h28a3 3 0 0 1-3 3h-22a3 3 0 0 1-3-3" }), h("rect", { key: '375c5f64da6adb77ffb6cfd75d33110f8b00487c', width: "40", height: "6", x: "2.59", y: "53", fill: "var(--illustrations-icon-primary, #e5e5e5)", rx: "3" }), h("path", { key: 'bd6028b461857e3c06d7cec32b97dc06e9256ec8', fill: "var(--illustrations-icon-secondary, #bfbfbf)", d: "M2.59 56h40a3 3 0 0 1-3 3h-34a3 3 0 0 1-3-3" }))));
}
static get is() { return "kv-no-matching-results"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["../../../illustrations/illustrations.scss"]
};
}
static get styleUrls() {
return {
"$": ["../../../illustrations/illustrations.css"]
};
}
static get properties() {
return {
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
}