@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
180 lines (179 loc) • 5.87 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../../../internal/functional-components/base-web-component";
import { SkeletonFC } from "../../../../internal/functional-components/skeleton/component";
import { SkeletonController } from "../../../../internal/functional-components/skeleton/controller";
import { Log } from "../../../../schema";
export class KolSkeleton extends BaseWebComponent {
constructor() {
this.ctrl = new SkeletonController(this.stateAccess);
this.count = 0;
this.label = 'Label';
this.show = true;
super();
}
async focus() {
return Promise.resolve(this.ctrl.focus());
}
async toggle() {
return Promise.resolve(this.ctrl.toggle());
}
watchName(value) {
this.ctrl.watchName(value);
}
handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
Log.debug('button pressed');
this.ctrl.handleClick();
}
}
onKeydown(event) {
this.ctrl.onKeydown(event);
}
componentWillLoad() {
this.ctrl.componentWillLoad({
name: this._name,
});
this.ctrl.setOnLoadedCallback((count) => {
this.loaded.emit(count);
});
}
componentDidLoad() {
requestAnimationFrame(() => {
this.rendered.emit();
});
}
disconnectedCallback() {
this.ctrl.destroy();
}
render() {
return (h(Host, { key: 'ff0f258279d6e18440f82f7fb4de42ed9bf4eaac' }, h(SkeletonFC, { key: '2a07e293ba5934de959d7099f927db80ad396c68', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => this.ctrl.setButtonRef(element) })));
}
static get is() { return "kol-skeleton"; }
static get encapsulation() { return "shadow"; }
static get properties() {
return {
"_name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the name of the skeleton component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_name"
}
};
}
static get states() {
return {
"count": {},
"label": {},
"show": {}
};
}
static get events() {
return [{
"method": "loaded",
"name": "loaded",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the skeleton has finished loading."
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "rendered",
"name": "rendered",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the skeleton has been rendered for the first time."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focuses the interactive element of the component.",
"tags": []
}
},
"toggle": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Toggles the visibility of the skeleton component.",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "_name",
"methodName": "watchName"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "onKeydown",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=component.js.map