@fluid-topics/ft-reader-feedback 0.3.55 → 0.3.56
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-reader-feedback.css.d.ts +6 -0
- package/build/ft-reader-feedback.css.js +25 -3
- package/build/ft-reader-feedback.light.js +569 -554
- package/build/ft-reader-feedback.min.js +596 -581
- package/build/ft-reader-map-feedback.d.ts +5 -0
- package/build/ft-reader-map-feedback.js +66 -36
- package/build/ft-reader-topic-feedback.d.ts +3 -0
- package/build/ft-reader-topic-feedback.js +39 -17
- package/build/utils/labels.d.ts +1 -0
- package/build/utils/labels.js +2 -0
- package/package.json +3 -3
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
export declare const FtReaderFeedbackCssVariables: {
|
|
2
2
|
feedbackInputMinWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
3
|
ratedDateColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
|
+
sendFeedbackColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
5
|
+
sendFeedbackBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
6
|
+
filledRatingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
7
|
+
emptyRatingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
8
|
+
mainTitleFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
9
|
+
sectionTitleFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
10
|
};
|
|
5
11
|
export declare const styles: import("lit").CSSResult;
|
|
6
12
|
//# sourceMappingURL=ft-reader-feedback.css.d.ts.map
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
|
-
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
3
|
+
import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
|
|
4
|
+
import { FtSwitchCssVariables } from "@fluid-topics/ft-switch/build/ft-switch.css";
|
|
5
|
+
import { FtTypographyTitleCssVariables, FtTypographyTitleDenseCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
|
|
3
6
|
export const FtReaderFeedbackCssVariables = {
|
|
4
7
|
feedbackInputMinWidth: FtCssVariableFactory.create("--ft-reader-feedback-input-min-width", "SIZE", "300px"),
|
|
5
|
-
ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system")
|
|
8
|
+
ratedDateColor: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
|
|
9
|
+
sendFeedbackColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-color", designSystemVariables.colorOnPrimary),
|
|
10
|
+
sendFeedbackBackgroundColor: FtCssVariableFactory.extend("--ft-reader-feedback-send-feedback-background-color", designSystemVariables.colorPrimary),
|
|
11
|
+
filledRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-filled-rating-color", designSystemVariables.colorPrimary),
|
|
12
|
+
emptyRatingColor: FtCssVariableFactory.extend("--ft-reader-feedback-empty-rating-color", designSystemVariables.colorOnSurfaceMedium),
|
|
13
|
+
mainTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleCssVariables.fontSize, "Typography"),
|
|
14
|
+
sectionTitleFontSize: FtCssVariableFactory.external(FtTypographyTitleDenseCssVariables.fontSize, "Typography"),
|
|
6
15
|
};
|
|
7
16
|
// language=CSS
|
|
8
17
|
export const styles = css `
|
|
@@ -38,9 +47,9 @@ export const styles = css `
|
|
|
38
47
|
display: flex;
|
|
39
48
|
flex-direction: row;
|
|
40
49
|
align-items: center;
|
|
50
|
+
margin-left: -6px;
|
|
41
51
|
}
|
|
42
52
|
|
|
43
|
-
|
|
44
53
|
.ft-reader-feedback--rating, .ft-reader-feedback--feedback {
|
|
45
54
|
display: flex;
|
|
46
55
|
flex-direction: column;
|
|
@@ -50,6 +59,17 @@ export const styles = css `
|
|
|
50
59
|
margin-bottom: 8px;
|
|
51
60
|
}
|
|
52
61
|
|
|
62
|
+
.ft-reader-feedback--rating {
|
|
63
|
+
${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.emptyRatingColor)};
|
|
64
|
+
${setVariable(FtButtonCssVariables.rippleColor, FtReaderFeedbackCssVariables.filledRatingColor)};
|
|
65
|
+
${setVariable(FtSwitchCssVariables.textColor, FtReaderFeedbackCssVariables.emptyRatingColor)};
|
|
66
|
+
${setVariable(FtSwitchCssVariables.selectedTextColor, FtReaderFeedbackCssVariables.filledRatingColor)};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.ft-reader-feedback--rating .ft-reader-feedback--active {
|
|
70
|
+
${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.filledRatingColor)};
|
|
71
|
+
}
|
|
72
|
+
|
|
53
73
|
.ft-reader-feedback--feedback {
|
|
54
74
|
gap: 8px;
|
|
55
75
|
}
|
|
@@ -64,6 +84,8 @@ export const styles = css `
|
|
|
64
84
|
|
|
65
85
|
.ft-reader-feedback--send-feedback, .ft-reader-feedback--feedback-link {
|
|
66
86
|
align-self: flex-end;
|
|
87
|
+
${setVariable(FtButtonCssVariables.color, FtReaderFeedbackCssVariables.sendFeedbackColor)};
|
|
88
|
+
${setVariable(FtButtonCssVariables.backgroundColor, FtReaderFeedbackCssVariables.sendFeedbackBackgroundColor)};
|
|
67
89
|
}
|
|
68
90
|
`;
|
|
69
91
|
//# sourceMappingURL=ft-reader-feedback.css.js.map
|