@fluid-topics/ft-button 0.3.11 → 0.3.13

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.
Files changed (11) hide show
  1. package/build/ft-button.css.d.ts +19 -0
  2. package/build/ft-button.css.js +164 -0
  3. package/build/ft-button.d.ts +2 -32
  4. package/build/ft-button.js +9 -166
  5. package/build/ft-button.light.js +340 -346
  6. package/build/ft-button.min.js +348 -348
  7. package/build/ft-button.properties.d.ts +17 -0
  8. package/build/ft-button.properties.js +2 -0
  9. package/build/index.d.ts +2 -0
  10. package/build/index.js +2 -0
  11. package/package.json +8 -8
package/build/ft-button.css.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export declare const FtButtonCssVariables: {
2
+ backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
3
+ borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
4
+ color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
5
+ fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
6
+ iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
7
+ rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
8
+ opacityDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
9
+ };
10
+ export declare const FtButtonPrimaryCssVariables: {
11
+ backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
12
+ color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
13
+ rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
14
+ };
15
+ export declare const FtButtonDenseCssVariables: {
16
+ borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
17
+ };
18
+ export declare const styles: import("lit").CSSResult[];
19
+ //# sourceMappingURL=ft-button.css.d.ts.map
package/build/ft-button.css.js ADDED
@@ -0,0 +1,164 @@
1
+ import { css, } from "lit";
2
+ import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
3
+ import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
4
+ import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
5
+ import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.css";
6
+ import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
7
+ const buttonColor = FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorPrimary);
8
+ export const FtButtonCssVariables = {
9
+ backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorSurface),
10
+ borderRadius: FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusL),
11
+ color: buttonColor,
12
+ fontSize: FtCssVariableFactory.extend("--ft-button-font-size", FtTypographyButtonCssVariables.fontSize),
13
+ iconSize: FtCssVariableFactory.create("--ft-button-icon-size", "SIZE", "24px"),
14
+ rippleColor: FtCssVariableFactory.extend("--ft-button-ripple-color", buttonColor),
15
+ opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system")
16
+ };
17
+ const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorOnPrimary));
18
+ export const FtButtonPrimaryCssVariables = {
19
+ backgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorPrimary)),
20
+ color: buttonPrimaryColor,
21
+ rippleColor: FtCssVariableFactory.extend("--ft-button-primary-ripple-color", buttonPrimaryColor),
22
+ };
23
+ export const FtButtonDenseCssVariables = {
24
+ borderRadius: FtCssVariableFactory.extend("--ft-button-dense-border-radius", FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusM)),
25
+ };
26
+ //language=css
27
+ export const styles = [
28
+ noTextSelect,
29
+ css `
30
+ :host {
31
+ display: inline-block;
32
+ max-width: 100%;
33
+ pointer-events: none;
34
+ }
35
+
36
+ button {
37
+ box-shadow: 0px 0px 0px transparent;
38
+ border: 0px solid transparent;
39
+ text-shadow: 0px 0px 0px transparent;
40
+ font-size: ${FtButtonCssVariables.fontSize};
41
+ }
42
+
43
+ button:hover {
44
+ box-shadow: 0px 0px 0px transparent;
45
+ border: 0px solid transparent;
46
+ text-shadow: 0px 0px 0px transparent;
47
+ }
48
+
49
+ button:active {
50
+ outline: none;
51
+ border: none;
52
+ }
53
+
54
+ button:focus {
55
+ outline: 0;
56
+ }
57
+
58
+ .ft-button {
59
+ position: relative;
60
+ display: flex;
61
+ justify-content: center;
62
+ align-items: center;
63
+ width: 100%;
64
+ overflow: hidden;
65
+ box-sizing: border-box;
66
+ border: none;
67
+ pointer-events: auto;
68
+
69
+ --ft-button-internal-line-height: calc(${FtButtonCssVariables.fontSize} + 2px);
70
+ --ft-button-internal-color: ${FtButtonCssVariables.color};
71
+ ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
72
+ --ft-button-internal-vertical-padding: 6px;
73
+ --ft-button-internal-horizontal-padding: 8px;
74
+ ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
75
+ --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), ${FtButtonCssVariables.iconSize});
76
+
77
+ border-radius: ${FtButtonCssVariables.borderRadius};
78
+ padding: var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);
79
+ background-color: ${FtButtonCssVariables.backgroundColor};
80
+ color: var(--ft-button-internal-color);
81
+ -webkit-mask-image: radial-gradient(white, black);
82
+ }
83
+
84
+ .ft-button:not([disabled]):hover {
85
+ cursor: pointer;
86
+ }
87
+
88
+ .ft-button--dense {
89
+ --ft-button-internal-vertical-padding: 2px;
90
+ --ft-button-internal-horizontal-padding: 4px;
91
+ border-radius: ${FtButtonDenseCssVariables.borderRadius};
92
+ }
93
+
94
+ .ft-button--round {
95
+ border-radius: calc(var(--ft-button-internal-content-height) / 2 + var(--ft-button-internal-vertical-padding));
96
+ }
97
+
98
+ .ft-button[disabled] {
99
+ filter: grayscale(1);
100
+ opacity: ${FtButtonCssVariables.opacityDisabled};
101
+ }
102
+
103
+ .ft-button.ft-button--primary {
104
+ background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
105
+ --ft-button-internal-color: ${FtButtonPrimaryCssVariables.color};
106
+ ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
107
+ }
108
+
109
+ .ft-button.ft-button--outlined {
110
+ border: 1px solid var(--ft-button-internal-color);
111
+ padding: calc(var(--ft-button-internal-vertical-padding) - 1px) calc(var(--ft-button-internal-horizontal-padding) - 1px);
112
+ }
113
+
114
+ .ft-button:focus {
115
+ outline: none;
116
+ }
117
+
118
+ .ft-button--label {
119
+ position: relative;
120
+ overflow: hidden;
121
+ white-space: nowrap;
122
+ text-overflow: ellipsis;
123
+ display: block;
124
+ margin: 0 var(--ft-button-internal-horizontal-padding);
125
+ ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
126
+ ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-button-internal-content-height)")};
127
+ }
128
+
129
+ .ft-button--safari-fix .ft-button--label {
130
+ margin-right: 0;
131
+ }
132
+
133
+ .ft-button--safari-fix .ft-button--label:after {
134
+ content: "\\0000a0";
135
+ display: inline-block;
136
+ width: 0;
137
+ }
138
+
139
+ .ft-button--label[hidden] {
140
+ display: none;
141
+ }
142
+
143
+ ft-icon {
144
+ flex-shrink: 0;
145
+ position: relative;
146
+ }
147
+
148
+ .ft-button--label[hidden] + ft-icon {
149
+ margin: 0 calc(var(--ft-button-internal-horizontal-padding) * -1);
150
+ padding: 0 var(--ft-button-internal-vertical-padding);
151
+ }
152
+
153
+ .ft-button:not(.ft-button--trailing-icon) ft-icon,
154
+ .ft-button:not(.ft-button--trailing-icon) ft-loader {
155
+ order: -1;
156
+ }
157
+
158
+ ft-loader {
159
+ ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
160
+ ${setVariable(FtLoaderCssVariables.color, "var(--ft-button-internal-color)")};
161
+ }
162
+ `
163
+ ];
164
+ //# sourceMappingURL=ft-button.css.js.map
package/build/ft-button.d.ts CHANGED
@@ -3,37 +3,7 @@ import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
3
3
  import { Position } from "@fluid-topics/ft-tooltip";
4
4
  import "@fluid-topics/ft-loader";
5
5
  import { FtIconVariants } from "@fluid-topics/ft-icon";
6
- export interface FtButtonProperties {
7
- primary: boolean;
8
- outlined: boolean;
9
- disabled: boolean;
10
- dense: boolean;
11
- round: boolean;
12
- label: string;
13
- icon?: string;
14
- iconVariant: FtIconVariants;
15
- trailingIcon: boolean;
16
- loading: boolean;
17
- tooltipPosition: Position;
18
- hideTooltip: boolean;
19
- }
20
- export declare const FtButtonCssVariables: {
21
- backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
22
- borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
23
- color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
24
- fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
25
- iconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
26
- rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
27
- opacityDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
28
- };
29
- export declare const FtButtonPrimaryCssVariables: {
30
- backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
31
- color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
32
- rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
33
- };
34
- export declare const FtButtonDenseCssVariables: {
35
- borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
36
- };
6
+ import { FtButtonProperties } from "./ft-button.properties";
37
7
  export declare class FtButton extends FtLitElement implements FtButtonProperties {
38
8
  static elementDefinitions: ElementDefinitionsMap;
39
9
  primary: boolean;
@@ -50,7 +20,7 @@ export declare class FtButton extends FtLitElement implements FtButtonProperties
50
20
  hideTooltip: boolean;
51
21
  private button?;
52
22
  private slottedContent?;
53
- static get styles(): import("lit").CSSResult[];
23
+ static styles: import("lit").CSSResult[];
54
24
  protected render(): HTMLTemplateResult;
55
25
  private addTooltipIfNeeded;
56
26
  private resolveIcon;
package/build/ft-button.js CHANGED
@@ -4,35 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- import { css, html, nothing, } from "lit";
7
+ import { html, nothing, } from "lit";
8
8
  import { property, query } from "lit/decorators.js";
9
9
  import { classMap } from "lit/directives/class-map.js";
10
- import { designSystemVariables, FtCssVariableFactory, FtLitElement, isSafari, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
11
- import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
12
- import { FtTypography, FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
10
+ import { FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
11
+ import { FtRipple } from "@fluid-topics/ft-ripple";
12
+ import { FtTypography } from "@fluid-topics/ft-typography";
13
13
  import { FtTooltip } from "@fluid-topics/ft-tooltip";
14
- import { FtLoader, FtLoaderCssVariables } from "@fluid-topics/ft-loader";
14
+ import { FtLoader } from "@fluid-topics/ft-loader";
15
15
  import "@fluid-topics/ft-loader";
16
- import { FtIcon, FtIconCssVariables, FtIconVariants } from "@fluid-topics/ft-icon";
17
- const buttonColor = FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorPrimary);
18
- export const FtButtonCssVariables = {
19
- backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorSurface),
20
- borderRadius: FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusL),
21
- color: buttonColor,
22
- fontSize: FtCssVariableFactory.extend("--ft-button-font-size", FtTypographyButtonCssVariables.fontSize),
23
- iconSize: FtCssVariableFactory.create("--ft-button-icon-size", "SIZE", "24px"),
24
- rippleColor: FtCssVariableFactory.extend("--ft-button-ripple-color", buttonColor),
25
- opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system")
26
- };
27
- const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", FtCssVariableFactory.extend("--ft-button-color", designSystemVariables.colorOnPrimary));
28
- export const FtButtonPrimaryCssVariables = {
29
- backgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", FtCssVariableFactory.extend("--ft-button-background-color", designSystemVariables.colorPrimary)),
30
- color: buttonPrimaryColor,
31
- rippleColor: FtCssVariableFactory.extend("--ft-button-primary-ripple-color", buttonPrimaryColor),
32
- };
33
- export const FtButtonDenseCssVariables = {
34
- borderRadius: FtCssVariableFactory.extend("--ft-button-dense-border-radius", FtCssVariableFactory.extend("--ft-button-border-radius", designSystemVariables.borderRadiusM)),
35
- };
16
+ import { FtIcon, FtIconVariants } from "@fluid-topics/ft-icon";
17
+ import { styles } from "./ft-button.css";
36
18
  export class FtButton extends FtLitElement {
37
19
  constructor() {
38
20
  super(...arguments);
@@ -56,146 +38,6 @@ export class FtButton extends FtLitElement {
56
38
  }
57
39
  };
58
40
  }
59
- static get styles() {
60
- //language=css
61
- return [
62
- noTextSelect,
63
- css `
64
- :host {
65
- display: inline-block;
66
- max-width: 100%;
67
- pointer-events: none;
68
- }
69
-
70
- button {
71
- box-shadow: 0px 0px 0px transparent;
72
- border: 0px solid transparent;
73
- text-shadow: 0px 0px 0px transparent;
74
- font-size: ${FtButtonCssVariables.fontSize};
75
- }
76
-
77
- button:hover {
78
- box-shadow: 0px 0px 0px transparent;
79
- border: 0px solid transparent;
80
- text-shadow: 0px 0px 0px transparent;
81
- }
82
-
83
- button:active {
84
- outline: none;
85
- border: none;
86
- }
87
-
88
- button:focus {
89
- outline: 0;
90
- }
91
-
92
- .ft-button {
93
- position: relative;
94
- display: flex;
95
- justify-content: center;
96
- align-items: center;
97
- width: 100%;
98
- overflow: hidden;
99
- box-sizing: border-box;
100
- border: none;
101
- pointer-events: auto;
102
-
103
- --ft-button-internal-line-height: calc(${FtButtonCssVariables.fontSize} + 2px);
104
- --ft-button-internal-color: ${FtButtonCssVariables.color};
105
- ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
106
- --ft-button-internal-vertical-padding: 6px;
107
- --ft-button-internal-horizontal-padding: 8px;
108
- ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
109
- --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), ${FtButtonCssVariables.iconSize});
110
-
111
- border-radius: ${FtButtonCssVariables.borderRadius};
112
- padding: var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);
113
- background-color: ${FtButtonCssVariables.backgroundColor};
114
- color: var(--ft-button-internal-color);
115
- -webkit-mask-image: radial-gradient(white, black);
116
- }
117
-
118
- .ft-button:not([disabled]):hover {
119
- cursor: pointer;
120
- }
121
-
122
- .ft-button--dense {
123
- --ft-button-internal-vertical-padding: 2px;
124
- --ft-button-internal-horizontal-padding: 4px;
125
- border-radius: ${FtButtonDenseCssVariables.borderRadius};
126
- }
127
-
128
- .ft-button--round {
129
- border-radius: calc(var(--ft-button-internal-content-height) / 2 + var(--ft-button-internal-vertical-padding));
130
- }
131
-
132
- .ft-button[disabled] {
133
- filter: grayscale(1);
134
- opacity: ${FtButtonCssVariables.opacityDisabled};
135
- }
136
-
137
- .ft-button.ft-button--primary {
138
- background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
139
- --ft-button-internal-color: ${FtButtonPrimaryCssVariables.color};
140
- ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
141
- }
142
-
143
- .ft-button.ft-button--outlined {
144
- border: 1px solid var(--ft-button-internal-color);
145
- padding: calc(var(--ft-button-internal-vertical-padding) - 1px) calc(var(--ft-button-internal-horizontal-padding) - 1px);
146
- }
147
-
148
- .ft-button:focus {
149
- outline: none;
150
- }
151
-
152
- .ft-button--label {
153
- position: relative;
154
- overflow: hidden;
155
- white-space: nowrap;
156
- text-overflow: ellipsis;
157
- display: block;
158
- margin: 0 var(--ft-button-internal-horizontal-padding);
159
- ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
160
- ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-button-internal-content-height)")};
161
- }
162
-
163
- .ft-button--safari-fix .ft-button--label {
164
- margin-right: 0;
165
- }
166
-
167
- .ft-button--safari-fix .ft-button--label:after {
168
- content: "\\0000a0";
169
- display: inline-block;
170
- width: 0;
171
- }
172
-
173
- .ft-button--label[hidden] {
174
- display: none;
175
- }
176
-
177
- ft-icon {
178
- flex-shrink: 0;
179
- position: relative;
180
- }
181
-
182
- .ft-button--label[hidden] + ft-icon {
183
- margin: 0 calc(var(--ft-button-internal-horizontal-padding) * -1);
184
- padding: 0 var(--ft-button-internal-vertical-padding);
185
- }
186
-
187
- .ft-button:not(.ft-button--trailing-icon) ft-icon,
188
- .ft-button:not(.ft-button--trailing-icon) ft-loader {
189
- order: -1;
190
- }
191
-
192
- ft-loader {
193
- ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
194
- ${setVariable(FtLoaderCssVariables.color, "var(--ft-button-internal-color)")};
195
- }
196
- `
197
- ];
198
- }
199
41
  render() {
200
42
  const classes = {
201
43
  "ft-button": true,
@@ -243,7 +85,7 @@ export class FtButton extends FtLitElement {
243
85
  else {
244
86
  return this.icon
245
87
  ? html `
246
- <ft-icon .variant=${this.iconVariant} value=${this.icon}></ft-icon> `
88
+ <ft-icon variant="${this.iconVariant}" value="${this.icon}"></ft-icon> `
247
89
  : nothing;
248
90
  }
249
91
  }
@@ -280,6 +122,7 @@ FtButton.elementDefinitions = {
280
122
  "ft-icon": FtIcon,
281
123
  "ft-loader": FtLoader,
282
124
  };
125
+ FtButton.styles = styles;
283
126
  __decorate([
284
127
  property({ type: Boolean })
285
128
  ], FtButton.prototype, "primary", void 0);