@fluid-topics/ft-button 1.3.22 → 1.3.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-base-button.d.ts +2 -0
- package/build/ft-base-button.js +8 -2
- package/build/ft-button.js +1 -1
- package/build/ft-button.light.js +60 -52
- package/build/ft-button.min.js +51 -43
- package/package.json +8 -8
|
@@ -17,6 +17,7 @@ export interface FtBaseButtonProperties {
|
|
|
17
17
|
tooltipPosition?: Position;
|
|
18
18
|
hideTooltip?: boolean;
|
|
19
19
|
forceTooltip?: boolean;
|
|
20
|
+
ariaHasPopupp?: string | null;
|
|
20
21
|
}
|
|
21
22
|
declare const FtBaseButton_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
|
|
22
23
|
export declare class FtBaseButton extends FtBaseButton_base implements FtBaseButtonProperties {
|
|
@@ -31,6 +32,7 @@ export declare class FtBaseButton extends FtBaseButton_base implements FtBaseBut
|
|
|
31
32
|
trailingIcon: boolean;
|
|
32
33
|
loading: boolean;
|
|
33
34
|
ariaLabel: string | null;
|
|
35
|
+
ariaHasPopup: string | null;
|
|
34
36
|
tooltipPosition: Position;
|
|
35
37
|
hideTooltip: boolean;
|
|
36
38
|
forceTooltip: boolean;
|
package/build/ft-base-button.js
CHANGED
|
@@ -13,6 +13,7 @@ import { FtLoader } from "@fluid-topics/ft-loader";
|
|
|
13
13
|
import { html } from "lit";
|
|
14
14
|
import { classMap } from "lit/directives/class-map.js";
|
|
15
15
|
import { property, query } from "lit/decorators.js";
|
|
16
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
16
17
|
class FtBaseButton extends toFtFormComponent(FtLitElement) {
|
|
17
18
|
get buttonClasses() {
|
|
18
19
|
return {};
|
|
@@ -31,6 +32,7 @@ class FtBaseButton extends toFtFormComponent(FtLitElement) {
|
|
|
31
32
|
this.trailingIcon = false;
|
|
32
33
|
this.loading = false;
|
|
33
34
|
this.ariaLabel = null;
|
|
35
|
+
this.ariaHasPopup = null;
|
|
34
36
|
this.tooltipPosition = "bottom";
|
|
35
37
|
this.hideTooltip = false;
|
|
36
38
|
this.forceTooltip = false;
|
|
@@ -55,7 +57,7 @@ class FtBaseButton extends toFtFormComponent(FtLitElement) {
|
|
|
55
57
|
?activated=${this.activated}
|
|
56
58
|
></ft-ripple>
|
|
57
59
|
<ft-typography part="label"
|
|
58
|
-
variant
|
|
60
|
+
variant="${this.typographyVariant}"
|
|
59
61
|
element="span"
|
|
60
62
|
class="ft-button--label ${isSafari ? "ft-safari-ellipsis-fix" : ""}"
|
|
61
63
|
?hidden=${!this.hasTextContent()}>
|
|
@@ -77,6 +79,7 @@ class FtBaseButton extends toFtFormComponent(FtLitElement) {
|
|
|
77
79
|
<button part="button"
|
|
78
80
|
class="${classMap(this.buttonClasses)}"
|
|
79
81
|
aria-label="${(_c = this.ariaLabel) !== null && _c !== void 0 ? _c : this.getLabel()}"
|
|
82
|
+
aria-haspopup="${ifDefined(this.ariaHasPopup)}"
|
|
80
83
|
?disabled=${this.isDisabled()}>
|
|
81
84
|
${content}
|
|
82
85
|
</button>
|
|
@@ -100,7 +103,7 @@ class FtBaseButton extends toFtFormComponent(FtLitElement) {
|
|
|
100
103
|
}
|
|
101
104
|
else {
|
|
102
105
|
return this.icon ? html `
|
|
103
|
-
<ft-icon part="icon" .variant
|
|
106
|
+
<ft-icon part="icon" .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
|
|
104
107
|
` : html `
|
|
105
108
|
<slot part="icon" name="icon"></slot>
|
|
106
109
|
`;
|
|
@@ -182,6 +185,9 @@ __decorate([
|
|
|
182
185
|
__decorate([
|
|
183
186
|
property({ attribute: "aria-label" })
|
|
184
187
|
], FtBaseButton.prototype, "ariaLabel", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
property()
|
|
190
|
+
], FtBaseButton.prototype, "ariaHasPopup", void 0);
|
|
185
191
|
__decorate([
|
|
186
192
|
property()
|
|
187
193
|
], FtBaseButton.prototype, "tooltipPosition", void 0);
|