@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
139 lines (138 loc) • 5.42 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { devHint, validateColor, watchBoolean } from "../../schema";
import { translate } from "../../i18n";
import rgba from "color-rgba";
export class KolKolibri {
constructor() {
this.translateKolibriLogo = translate('kol-kolibri-logo');
this._color = '#003c78';
this._labeled = true;
this.state = {
_color: {
red: 0,
green: 60,
blue: 120,
},
_labeled: true,
};
this.handleColorChange = (nextValue, nextState) => {
if (typeof nextValue === 'string') {
const rgb = rgba(nextValue);
nextState.set('_color', {
red: rgb[0],
green: rgb[1],
blue: rgb[2],
});
}
else {
devHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);
}
};
}
render() {
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
return (h("svg", { key: 'fb287d59e0565598a879a7d2b0a2c060b4f823c5', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, h("path", { key: 'c579830724ffe72342d1753d6815f38ac8487a98', d: "M353 322L213 304V434L353 322Z" }), h("path", { key: '07937d3751c91faa5550f2b680591c8ce1d8c2e6', d: "M209 564V304L149 434L209 564Z" }), h("path", { key: '444060f3b85b5d7d12bd5daa4022be7001d365db', d: "M357 316L417 250L361 210L275 244L357 316Z" }), h("path", { key: '41d95ce3a9cb93b932bb7a33fabe32d53c26e22e', d: "M329 218L237 92L250 222L272 241L329 218Z" }), h("path", { key: '8d35eae37da444a126be0b18703d6c6b962ca69a', d: "M353 318L35 36L213 300L353 318Z" }), h("path", { key: '4a8a7e2ffecf4502c967df9d2449a3fff332ee80', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (h("text", { key: 'a8a21eca0b1e15af92b25bbd4d0c468fd511a393', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
}
validateColor(value) {
validateColor(this, value, {
defaultValue: '#003c78',
hooks: {
beforePatch: this.handleColorChange,
},
});
}
validateLabeled(value) {
watchBoolean(this, '_labeled', value, {
defaultValue: true,
});
}
componentWillLoad() {
this.validateColor(this._color);
this.validateLabeled(this._labeled);
}
static get is() { return "kol-kolibri"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<PropColor>",
"resolved": "string | undefined | { backgroundColor: string; foregroundColor: string; }",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"PropColor": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::PropColor"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the color of the logo and label."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_color",
"defaultValue": "'#003c78'"
},
"_labeled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the component has a label."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_labeled",
"defaultValue": "true"
}
};
}
static get states() {
return {
"state": {}
};
}
static get watchers() {
return [{
"propName": "_color",
"methodName": "validateColor"
}, {
"propName": "_labeled",
"methodName": "validateLabeled"
}];
}
}
//# sourceMappingURL=shadow.js.map