@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
422 lines (421 loc) • 15 kB
JavaScript
import { h } from "@stencil/core";
import clsx from "clsx";
export class Button {
constructor() {
this.appearance = undefined;
this.busy = undefined;
this.disabled = undefined;
this.expanded = undefined;
this.pressed = undefined;
this.form = undefined;
this.formAction = undefined;
this.formEnctype = undefined;
this.formMethod = undefined;
this.formNoValidate = undefined;
this.formTarget = undefined;
this.popoverTarget = undefined;
this.popoverTargetAction = undefined;
this.name = undefined;
this.value = undefined;
this.type = undefined;
}
render() {
const handleReset = () => {
var _a, _b;
const event = this.utrechtRequestReset.emit();
if (!event.defaultPrevented) {
(_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.reset();
}
};
const handleSubmit = () => {
var _a, _b;
const event = this.utrechtRequestSubmit.emit();
if (!event.defaultPrevented) {
(_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.requestSubmit();
}
};
const handleClick = () => {
if (this.type === 'reset') {
handleReset();
}
else if (this.type === 'submit') {
handleSubmit();
}
else {
const button = this.hostElement.querySelector('button[hidden]');
if (button) {
button.click();
}
}
};
const { hostElement, expanded, pressed, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
let button = hostElement.querySelector('button[hidden]');
const needsButton = !!(name ||
form ||
formTarget ||
formEnctype ||
formMethod ||
formNoValidate ||
popoverTarget ||
popoverTargetAction ||
type === 'submit');
if (button && !needsButton) {
button.parentNode.removeChild(button);
}
if (!button && needsButton) {
button = hostElement.ownerDocument.createElement('button');
button.hidden = true;
button.tabIndex = -1;
button.ariaHidden = 'true';
hostElement.appendChild(button);
}
const setAttribute = (el, name, value) => {
if (typeof value === 'string') {
el.setAttribute(name, value);
}
else {
el.removeAttribute(name);
}
};
if (button) {
setAttribute(button, 'name', name);
setAttribute(button, 'type', type);
setAttribute(button, 'form', form);
setAttribute(button, 'formaction', formAction);
setAttribute(button, 'form', form);
setAttribute(button, 'formtarget', formTarget);
setAttribute(button, 'formenctype', formEnctype);
setAttribute(button, 'formmethod', formMethod);
setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);
setAttribute(button, 'popovertargetaction', popoverTargetAction);
setAttribute(button, 'popovertarget', popoverTarget);
setAttribute(button, 'type', type);
button.style.display = 'none';
button.value = value || '';
}
return (h("button", { key: 'f9a03c6eb1802e4c95f586b904d81efab6192bc4', class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '60bbb545abd7474e87801bce05c50be6b44b3b34', name: "icon" }), h("span", { key: 'd6d6ccb23d86b266b0885104a5355f7a89d0c727', class: "utrecht-button__label" }, h("slot", { key: '0940dbf409384db621f3d7bb895e7f3546da9a19' }))));
}
static get is() { return "utrecht-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["button.scss"]
};
}
static get styleUrls() {
return {
"$": ["button.css"]
};
}
static get properties() {
return {
"appearance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "appearance",
"reflect": false
},
"busy": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "busy",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"expanded": {
"type": "any",
"mutable": false,
"complexType": {
"original": "boolean | string | 'false' | 'true'",
"resolved": "boolean | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "expanded",
"reflect": false
},
"pressed": {
"type": "any",
"mutable": false,
"complexType": {
"original": "boolean | string | 'false' | 'true'",
"resolved": "boolean | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "pressed",
"reflect": false
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "readonly",
"reflect": true
},
"formAction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "formaction",
"reflect": true
},
"formEnctype": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "formenctype",
"reflect": true
},
"formMethod": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "formmethod",
"reflect": true
},
"formNoValidate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "formnovalidate",
"reflect": true
},
"formTarget": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "formtarget",
"reflect": true
},
"popoverTarget": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "popovertarget",
"reflect": true
},
"popoverTargetAction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "popovertargetaction",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false
}
};
}
static get events() {
return [{
"method": "utrechtRequestReset",
"name": "utrechtRequestReset",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "utrechtRequestSubmit",
"name": "utrechtRequestSubmit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=button.js.map