@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
336 lines (335 loc) • 11.4 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 LinkButton {
constructor() {
this.disabled = undefined;
this.type = undefined;
this.inline = 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;
}
render() {
const { hostElement, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
const handleClick = () => {
const button = this.hostElement.querySelector('button[hidden]');
if (button) {
button.click();
}
};
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: '54e516e8ca6e356cc0b173bc47133487086af4d1', class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '52574b1a99e1dcba32c042f8b8f847e760e5b4db' })));
}
static get is() { return "utrecht-link-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["link-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["link-button.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false
},
"inline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "inline",
"reflect": false
},
"pressed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"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": "form",
"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
}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=link-button.js.map