@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
141 lines (140 loc) • 6.33 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
import clsx from "clsx";
export class StepProgressListItem {
constructor() {
this.checked = false;
this.from = undefined;
this.to = undefined;
this.appearance = undefined;
this.details = false;
this._open = false;
}
render() {
const { appearance, checked, details, from, _open, to } = this;
return (h("li", { key: 'fbdcd6e3318a319ffb0987c46b6e8285ea1f54e2', class: clsx('denhaag-process-steps__step', {
'denhaag-process-steps__step--checked': checked,
'denhaag-process-steps__step--not-checked': !checked,
}) }, h("div", { key: 'e73e5b95e38c97622b9dcb322257f5ead9d1532f', class: "denhaag-process-steps__step-header" }, h("div", { key: '0185ed3f37f4efcf2ef77fe7d921ee1b04d335b0', class: clsx('denhaag-step-marker', {
'denhaag-step-marker--checked': checked,
'denhaag-step-marker--not-checked': !checked,
}) }, h("slot", { key: '39efda6a93fda9d40faf6bc1f11dde0b4e34f12b', name: "marker" }), checked && (h("svg", { key: 'cf26c63bcad32612297f2e0bf00bffc0b0a04dcc', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, h("path", { key: '34cccfa0c73ada75dc34392decc4bab0cbd55ae5', d: "M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z", stroke: "currentColor", "stroke-width": "1.75" })))), details ? (h("utrecht-button", { onClick: () => (this._open = !this._open), appearance: "subtle-button", class: "denhaag-process-steps__step-header-toggle", "aria-controls": "details", "aria-expanded": _open ? 'true' : 'false' }, h("p", { class: clsx('denhaag-process-steps__step-heading', {
'denhaag-process-steps__step-heading--checked': checked,
}) }, h("slot", null)))) : (h("p", { class: clsx('denhaag-process-steps__step-heading', {
'denhaag-process-steps__step-heading--checked': checked,
}) }, h("slot", null)))), h("div", { key: '86593b5f2e6045ecb834321ca1d177c71a4c79c4', class: clsx('denhaag-process-steps__step-body') }, h("div", { key: '0d2253bc3f1995bff6ddc6502cd81e54258b156f', class: clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), h("div", { key: '74d9b3b0915df0c3fa8f1f3b124df9c40c5021d5', class: "denhaag-process-steps__step-meta" }, h("slot", { key: 'd5342f0983accefdd94ed0cfadfc93829eb3bc79', name: "body" }))), h("div", { key: '7aff1d7144d321887eec570535e87b73a453688c', id: "details", class: clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, h("slot", { key: '6ca3c5b71e803188d0ec206ac4b28895e95b1bf8', name: "details" }))));
}
static get is() { return "utrecht-progress-list-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["progress-list.scss"]
};
}
static get styleUrls() {
return {
"$": ["progress-list.css"]
};
}
static get properties() {
return {
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"from": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "from",
"reflect": false
},
"to": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "to",
"reflect": false
},
"appearance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "appearance",
"reflect": false
},
"details": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "details",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"_open": {}
};
}
}
//# sourceMappingURL=progress-list-item.js.map