@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
202 lines (201 loc) • 7.73 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { TooltipFC } from "../../internal/functional-components/tooltip/component";
import { TooltipController } from "../../internal/functional-components/tooltip/controller";
export class KolTooltipWc {
constructor() {
this.controller = new TooltipController(BaseWebComponent.stateLess);
this._align = 'top';
}
validateAlign(value) {
var _a;
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.watchAlign(value);
}
validateId(value) {
var _a;
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.watchId(value);
}
validateLabel(value) {
var _a;
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.watchLabel(value);
}
hideTooltip() {
var _a;
return Promise.resolve((_a = this.controller) === null || _a === void 0 ? void 0 : _a.hideTooltip());
}
componentWillLoad() {
this.controller.componentWillLoad({
label: this._label,
align: this._align,
badgeText: this._badgeText,
id: this._id,
});
}
connectedCallback() {
var _a, _b, _c;
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.initContext(((_c = (_b = this.host) === null || _b === void 0 ? void 0 : _b.previousElementSibling) !== null && _c !== void 0 ? _c : undefined));
}
componentDidRender() {
var _a;
if (this.host) {
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.handleEventListeners(this.host);
}
}
disconnectedCallback() {
var _a;
(_a = this.controller) === null || _a === void 0 ? void 0 : _a.destroy();
}
render() {
return (h(Host, { key: 'f677d58b886cdb9f1aab620608155ee412e0ef7d', class: "kol-tooltip" }, h(TooltipFC, { key: 'd86d1adc81a94fbb1116532e9f2529d96362834d', label: this.controller.getRenderProp('label'), badgeText: this._badgeText, id: this.controller.getRenderProp('id'), refFloating: (el) => { var _a; return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setTooltipElementRef(el); } })));
}
static get is() { return "kol-tooltip-wc"; }
static get properties() {
return {
"_badgeText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "BadgeTextPropType",
"resolved": "string | undefined",
"references": {
"BadgeTextPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::BadgeTextPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the elements badge text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_badge-text"
},
"_align": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AlignPropType",
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"references": {
"AlignPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AlignPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the alignment of the tooltip, popover or tabs in relation to the element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_align",
"defaultValue": "'top'"
},
"_id": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IdPropType",
"resolved": "string | undefined",
"references": {
"IdPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::IdPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Will be removed in next major release. The ID is now generated internally and cannot be set via props."
}, {
"name": "internal",
"text": undefined
}],
"text": "Defines the internal ID of the primary component element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_id"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelPropType",
"resolved": "string",
"references": {
"LabelPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
}
};
}
static get methods() {
return {
"hideTooltip": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Hides the tooltip.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_align",
"methodName": "validateAlign"
}, {
"propName": "_id",
"methodName": "validateId"
}, {
"propName": "_label",
"methodName": "validateLabel"
}];
}
}
//# sourceMappingURL=component.js.map