@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
290 lines (288 loc) • 10.5 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import KolCollapsibleFc from "../../functional-components/Collapsible";
import { featureHint, validateAccordionCallbacks, validateDisabled, validateLabel, validateOpen } from "../../schema";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { watchHeadingLevel } from "../heading/validation";
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
- onClick auf der KolAccordion anwenden
- Click-Event prüft den _open-Status der Accordions
- Logik Öffnet und Schließt entsprechend`);
featureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);
export class KolAccordion {
constructor() {
this.id = createUniqueId('accordion');
this.ctaRef = createCtaRef();
this.handleOnClick = (event) => {
this._open = !this._open;
setTimeout(() => {
var _a, _b, _c, _d;
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event, Boolean(this._open));
(_d = (_c = this.state._on) === null || _c === void 0 ? void 0 : _c.onToggle) === null || _d === void 0 ? void 0 : _d.call(_c, event, Boolean(this._open));
if (this.host) {
dispatchDomEvent(this.host, KolEvent.click, Boolean(this._open));
dispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));
}
});
};
this._disabled = false;
this._level = 0;
this._open = false;
this.state = {
_label: '',
_level: 0,
_on: {},
};
}
async focus() { }
async click() { }
render() {
const { _open, _label, _disabled, _level } = this.state;
const rootClass = 'kol-accordion';
const props = {
id: this.id,
label: _label,
open: _open,
disabled: _disabled,
level: _level,
onClick: this.handleOnClick,
class: rootClass,
HeadingProps: { class: `${rootClass}__heading` },
HeadingButtonProps: {
ref: this.ctaRef,
class: `${rootClass}__heading-button`,
},
ContentProps: {
class: `${rootClass}__content`,
wrapperClass: `${rootClass}__wrapper`,
animationClass: `${rootClass}__wrapper-animation`,
},
};
return (h(KolCollapsibleFc, Object.assign({ key: 'cd3d50a344997e204c341937fe6f6643adcce51f' }, props), h("slot", { key: '3a38af2e5141904a17f3beacf52db4f479b73133' })));
}
validateDisabled(value) {
validateDisabled(this, value);
}
validateLabel(value) {
validateLabel(this, value, {
required: true,
});
}
validateLevel(value) {
watchHeadingLevel(this, value);
}
validateOn(on) {
validateAccordionCallbacks(this, on);
}
validateOpen(value) {
validateOpen(this, value);
}
componentWillLoad() {
this.validateDisabled(this._disabled);
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
this.validateOpen(this._open);
}
static get is() { return "kol-accordion"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Makes the element not focusable and ignore all events."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_disabled",
"defaultValue": "false"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"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"
},
"_level": {
"type": "number",
"mutable": false,
"complexType": {
"original": "HeadingLevel",
"resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"references": {
"HeadingLevel": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::HeadingLevel"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_level",
"defaultValue": "0"
},
"_on": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "AccordionCallbacksPropType<boolean>",
"resolved": "undefined | { onClick?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; }",
"references": {
"AccordionCallbacksPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AccordionCallbacksPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Gibt die EventCallback-Funktionen an."
},
"getter": false,
"setter": false
},
"_open": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `OpenPropType` after Stencil#4663 has been resolved."
}],
"text": "Opens/expands the element when truthy, closes/collapses when falsy."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "_open",
"defaultValue": "false"
}
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the internal element.",
"tags": []
}
},
"click": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Triggers a click on the trigger button of the first section.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_disabled",
"methodName": "validateDisabled"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_level",
"methodName": "validateLevel"
}, {
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_open",
"methodName": "validateOpen"
}];
}
}
__decorate([
delegateFocus('ctaRef')
], KolAccordion.prototype, "focus", null);
__decorate([
delegateClick('ctaRef')
], KolAccordion.prototype, "click", null);
//# sourceMappingURL=shadow.js.map