diff --git a/packages/web-component-library-stencil/src/components/link-button.tsx b/packages/web-component-library-stencil/src/components/link-button.tsx index 20d13bccdc5..667d0d5007a 100644 --- a/packages/web-component-library-stencil/src/components/link-button.tsx +++ b/packages/web-component-library-stencil/src/components/link-button.tsx @@ -4,7 +4,7 @@ * Copyright (c) 2020-2022 Frameless B.V. */ -import { Component, h, Prop } from '@stencil/core'; +import { Component, Element, h, Prop } from '@stencil/core'; import clsx from 'clsx'; @Component({ @@ -17,7 +17,109 @@ export class LinkButton { @Prop() type: string; @Prop() inline: boolean; @Prop() pressed: boolean; + @Prop({ attribute: 'form', reflect: true }) form: string; + @Prop({ attribute: 'formaction', reflect: true }) formAction: string; + @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string; + @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string; + @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean; + @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string; + @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string; + @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string; + @Prop() name: string; + @Prop() value: string; + @Element() hostElement: HTMLElement; render() { + const { + hostElement, + name, + value, + form, + formAction, + formEnctype, + formTarget, + formNoValidate, + formMethod, + popoverTargetAction, + popoverTarget, + type, + } = this; + const handleReset = () => { + // const event = this.utrechtRequestReset.emit(); + // if (!event.defaultPrevented) { + this.hostElement?.closest('form')?.reset(); + // } + }; + + const handleSubmit = () => { + // const event = this.utrechtRequestSubmit.emit(); + // if (!event.defaultPrevented) { + this.hostElement?.closest('form')?.requestSubmit(); + // } + }; + + const handleClick = () => { + if (this.type === 'reset') { + handleReset(); + } else if (this.type === 'submit') { + handleSubmit(); + } else { + const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null; + if (button) { + button.click(); + } + } + }; + + let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null; + + 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: HTMLElement, name: string, value?: string | null) => { + 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 (