@@ -13,6 +13,7 @@ import { EventType } from '../core/Event';
13
13
* @property {String } textTransform - If the button text should be transformed
14
14
* (uppercase, lowercase, capitalize)
15
15
* @property {Boolean } disabled - Whether the button is disabled
16
+ * @property {String } popup - The associated popup to show when the button is clicked
16
17
*
17
18
* @example
18
19
* <wc-button type="control">Close</wc-button>
@@ -30,6 +31,7 @@ export class ButtonElement extends LitElement {
30
31
this . type = '' ;
31
32
this . textTransform = '' ;
32
33
this . disabled = false ;
34
+ this . popup = '' ;
33
35
}
34
36
35
37
static get properties ( ) {
@@ -38,6 +40,7 @@ export class ButtonElement extends LitElement {
38
40
type : { type : String } ,
39
41
textTransform : { type : String } ,
40
42
disabled : { type : Boolean } ,
43
+ popup : { type : String } ,
41
44
} ;
42
45
}
43
46
@@ -103,25 +106,48 @@ export class ButtonElement extends LitElement {
103
106
}
104
107
}
105
108
109
+ firstUpdated ( ) {
110
+ if ( this . popup ) {
111
+ // Attach the popover target element
112
+ const buttonNode = this . shadowRoot . querySelector ( 'button' ) ;
113
+ const targetNode = document . getElementById ( this . popup ) ;
114
+ if ( buttonNode && targetNode ) {
115
+ buttonNode . popoverTargetElement = targetNode ;
116
+ }
117
+ }
118
+ }
119
+
106
120
renderButton ( ) {
107
121
return html `
108
- < button class =${ this . classes . join ( ' ' ) || nothing } ?disabled =${ this . disabled } name=${ this . name || nothing } value=${ this . buttonTitle || nothing } @click=${ this . onClick } >
122
+ < button class =${ this . classes . join ( ' ' ) || nothing }
123
+ name =${ this . name || nothing } value=${ this . buttonTitle || nothing }
124
+ ?disabled=${ this . disabled }
125
+ @click=${ this . onClick } >
109
126
< slot > </ slot >
110
127
</ button >
111
128
` ;
112
129
}
113
130
114
131
renderSubmit ( ) {
115
132
return html `
116
- < button class =${ this . classes . join ( ' ' ) || nothing } type ="submit" ?disabled=${ this . disabled } name=${ this . name || nothing } value=${ this . buttonTitle || nothing } @click=${ this . onClick } > < slot > </ slot > </ button >
133
+ < button class =${ this . classes . join ( ' ' ) || nothing }
134
+ type ="submit" ?disabled=${ this . disabled }
135
+ name=${ this . name || nothing } value=${ this . buttonTitle || nothing }
136
+ ?disabled=${ this . disabled }
137
+ @click=${ this . onClick } >
138
+ < slot > </ slot >
139
+ </ button >
117
140
` ;
118
141
}
119
142
120
143
renderControl ( ) {
121
144
const icon = this . controlButtonIcon ;
122
145
if ( icon ) {
123
146
return html `
124
- < button class =${ this . classes . join ( ' ' ) || nothing } ?disabled =${ this . disabled } name=${ this . name || nothing } value=${ this . buttonTitle || nothing } @click=${ this . onClick } >
147
+ < button class =${ this . classes . join ( ' ' ) || nothing }
148
+ name =${ this . name || nothing } value=${ this . buttonTitle || nothing }
149
+ ?disabled=${ this . disabled }
150
+ @click=${ this . onClick } >
125
151
< wc-icon name =${ icon } > </ wc-icon >
126
152
</ button >
127
153
` ;
0 commit comments