@fluentui/web-components 3.0.0-beta.36 → 3.0.0-beta.37
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/CHANGELOG.md +15 -2
- package/dist/dts/index-rollup.d.ts +2 -0
- package/dist/dts/index.d.ts +1 -0
- package/dist/dts/message-bar/define.d.ts +1 -0
- package/dist/dts/message-bar/index.d.ts +5 -0
- package/dist/dts/message-bar/message-bar.bench.d.ts +3 -0
- package/dist/dts/message-bar/message-bar.d.ts +66 -0
- package/dist/dts/message-bar/message-bar.definition.d.ts +9 -0
- package/dist/dts/message-bar/message-bar.options.d.ts +30 -0
- package/dist/dts/message-bar/message-bar.styles.d.ts +7 -0
- package/dist/dts/message-bar/message-bar.template.d.ts +14 -0
- package/dist/dts/rating-display/define.d.ts +1 -0
- package/dist/dts/rating-display/index.d.ts +5 -0
- package/dist/dts/rating-display/rating-display.d.ts +94 -0
- package/dist/dts/rating-display/rating-display.definition.d.ts +9 -0
- package/dist/dts/rating-display/rating-display.options.d.ts +29 -0
- package/dist/dts/rating-display/rating-display.styles.d.ts +6 -0
- package/dist/dts/rating-display/rating-display.template.d.ts +14 -0
- package/dist/dts/styles/states/index.d.ts +20 -0
- package/dist/dts/theme/set-theme.bench.d.ts +3 -0
- package/dist/esm/index-rollup.js +2 -0
- package/dist/esm/index-rollup.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/menu/menu.js +5 -1
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/message-bar/define.js +4 -0
- package/dist/esm/message-bar/define.js.map +1 -0
- package/dist/esm/message-bar/index.js +6 -0
- package/dist/esm/message-bar/index.js.map +1 -0
- package/dist/esm/message-bar/message-bar.bench.js +56 -0
- package/dist/esm/message-bar/message-bar.bench.js.map +1 -0
- package/dist/esm/message-bar/message-bar.definition.js +20 -0
- package/dist/esm/message-bar/message-bar.definition.js.map +1 -0
- package/dist/esm/message-bar/message-bar.js +79 -0
- package/dist/esm/message-bar/message-bar.js.map +1 -0
- package/dist/esm/message-bar/message-bar.options.js +27 -0
- package/dist/esm/message-bar/message-bar.options.js.map +1 -0
- package/dist/esm/message-bar/message-bar.styles.js +108 -0
- package/dist/esm/message-bar/message-bar.styles.js.map +1 -0
- package/dist/esm/message-bar/message-bar.template.js +25 -0
- package/dist/esm/message-bar/message-bar.template.js.map +1 -0
- package/dist/esm/rating-display/define.js +4 -0
- package/dist/esm/rating-display/define.js.map +1 -0
- package/dist/esm/rating-display/index.js +6 -0
- package/dist/esm/rating-display/index.js.map +1 -0
- package/dist/esm/rating-display/rating-display.definition.js +17 -0
- package/dist/esm/rating-display/rating-display.definition.js.map +1 -0
- package/dist/esm/rating-display/rating-display.js +97 -0
- package/dist/esm/rating-display/rating-display.js.map +1 -0
- package/dist/esm/rating-display/rating-display.options.js +19 -0
- package/dist/esm/rating-display/rating-display.options.js.map +1 -0
- package/dist/esm/rating-display/rating-display.styles.js +120 -0
- package/dist/esm/rating-display/rating-display.styles.js.map +1 -0
- package/dist/esm/rating-display/rating-display.template.js +32 -0
- package/dist/esm/rating-display/rating-display.template.js.map +1 -0
- package/dist/esm/styles/partials/badge.partials.js +4 -5
- package/dist/esm/styles/partials/badge.partials.js.map +1 -1
- package/dist/esm/styles/states/index.js +20 -0
- package/dist/esm/styles/states/index.js.map +1 -1
- package/dist/esm/theme/set-theme.bench.js +23 -0
- package/dist/esm/theme/set-theme.bench.js.map +1 -0
- package/dist/esm/theme/set-theme.js +35 -19
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/web-components.d.ts +148 -0
- package/dist/web-components.js +609 -411
- package/dist/web-components.min.js +249 -243
- package/package.json +12 -3
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, FASTElement } from '@microsoft/fast-element';
|
|
3
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
4
|
+
/**
|
|
5
|
+
* A Message Bar Custom HTML Element.
|
|
6
|
+
*
|
|
7
|
+
* @slot actions - Content that can be provided for the actions
|
|
8
|
+
* @slot dismiss - Content that can be provided for the dismiss button
|
|
9
|
+
* @slot - The default slot for the content
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
export class MessageBar extends FASTElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
/**
|
|
16
|
+
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
17
|
+
*
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
this.elementInternals = this.attachInternals();
|
|
21
|
+
/**
|
|
22
|
+
* @public
|
|
23
|
+
* Method to emit a `dismiss` event when the message bar is dismissed
|
|
24
|
+
*/
|
|
25
|
+
this.dismissMessageBar = () => {
|
|
26
|
+
this.$emit('dismiss', {});
|
|
27
|
+
};
|
|
28
|
+
this.elementInternals.role = 'status';
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Handles changes to shape attribute custom states
|
|
32
|
+
* @param prev - the previous state
|
|
33
|
+
* @param next - the next state
|
|
34
|
+
*/
|
|
35
|
+
shapeChanged(prev, next) {
|
|
36
|
+
if (prev) {
|
|
37
|
+
toggleState(this.elementInternals, prev, false);
|
|
38
|
+
}
|
|
39
|
+
if (next) {
|
|
40
|
+
toggleState(this.elementInternals, next, true);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Handles changes to the layout attribute custom states
|
|
45
|
+
* @param prev - the previous state
|
|
46
|
+
* @param next - the next state
|
|
47
|
+
*/
|
|
48
|
+
layoutChanged(prev, next) {
|
|
49
|
+
if (prev) {
|
|
50
|
+
toggleState(this.elementInternals, prev, false);
|
|
51
|
+
}
|
|
52
|
+
if (next) {
|
|
53
|
+
toggleState(this.elementInternals, next, true);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Handles changes to the intent attribute custom states
|
|
58
|
+
* @param prev - the previous state
|
|
59
|
+
* @param next - the next state
|
|
60
|
+
*/
|
|
61
|
+
intentChanged(prev, next) {
|
|
62
|
+
if (prev) {
|
|
63
|
+
toggleState(this.elementInternals, prev, false);
|
|
64
|
+
}
|
|
65
|
+
if (next) {
|
|
66
|
+
toggleState(this.elementInternals, next, true);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
__decorate([
|
|
71
|
+
attr
|
|
72
|
+
], MessageBar.prototype, "shape", void 0);
|
|
73
|
+
__decorate([
|
|
74
|
+
attr
|
|
75
|
+
], MessageBar.prototype, "layout", void 0);
|
|
76
|
+
__decorate([
|
|
77
|
+
attr
|
|
78
|
+
], MessageBar.prototype, "intent", void 0);
|
|
79
|
+
//# sourceMappingURL=message-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAQzC;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA+EnE;;;WAGG;QACI,sBAAiB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC;QAjFA,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAiC,EAAE,IAAiC;QACtF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAAkC,EAAE,IAAkC;QACzF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;IAYD;;;;OAIG;IACI,aAAa,CAAC,IAAkC,EAAE,IAAkC;QACzF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAChD;IACH,CAAC;CASF;AAvEC;IADC,IAAI;yCAC0B;AAwB/B;IADC,IAAI;0CAC4B;AAwBjC;IADC,IAAI;0CAC4B"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @public
|
|
3
|
+
* The `layout` variations for the MessageBar component.
|
|
4
|
+
*/
|
|
5
|
+
export const MessageBarLayout = {
|
|
6
|
+
multiline: 'multiline',
|
|
7
|
+
singleline: 'singleline',
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* @public
|
|
11
|
+
* The `shape` variations for the MessageBar component.
|
|
12
|
+
*/
|
|
13
|
+
export const MessageBarShape = {
|
|
14
|
+
rounded: 'rounded',
|
|
15
|
+
square: 'square',
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* @public
|
|
19
|
+
* The `intent` variations for the MessageBar component.
|
|
20
|
+
*/
|
|
21
|
+
export const MessageBarIntent = {
|
|
22
|
+
success: 'success',
|
|
23
|
+
warning: 'warning',
|
|
24
|
+
error: 'error',
|
|
25
|
+
info: 'info',
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=message-bar.options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { borderRadiusMedium, colorNeutralBackground3, colorNeutralForeground3, colorNeutralStroke1, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBorder1, colorPaletteGreenBackground1, colorPaletteGreenBorder1, colorPaletteRedBackground1, colorPaletteRedBorder1, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalM, spacingHorizontalS, spacingVerticalMNudge, spacingVerticalS, } from '../theme/design-tokens.js';
|
|
3
|
+
import { errorState, multiLineState, squareState, successState, warningState } from '../styles/states/index.js';
|
|
4
|
+
/**
|
|
5
|
+
* Styles for the MessageBar component.
|
|
6
|
+
*
|
|
7
|
+
* @public
|
|
8
|
+
*/
|
|
9
|
+
export const styles = css `
|
|
10
|
+
:host {
|
|
11
|
+
display: grid;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
font-family: ${fontFamilyBase};
|
|
14
|
+
font-size: ${fontSizeBase200};
|
|
15
|
+
line-height: ${lineHeightBase200};
|
|
16
|
+
width: 100%;
|
|
17
|
+
background: ${colorNeutralBackground3};
|
|
18
|
+
border: 1px solid ${colorNeutralStroke1};
|
|
19
|
+
padding-inline: ${spacingHorizontalM};
|
|
20
|
+
border-radius: ${borderRadiusMedium};
|
|
21
|
+
min-height: 36px;
|
|
22
|
+
align-items: center;
|
|
23
|
+
grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
|
|
24
|
+
contain: layout style paint;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(${squareState}) {
|
|
28
|
+
border-radius: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:host(${successState}) {
|
|
32
|
+
background-color: ${colorPaletteGreenBackground1};
|
|
33
|
+
border-color: ${colorPaletteGreenBorder1};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
:host(${warningState}) {
|
|
37
|
+
background-color: ${colorPaletteDarkOrangeBackground1};
|
|
38
|
+
border-color: ${colorPaletteDarkOrangeBorder1};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host(${errorState}) {
|
|
42
|
+
background-color: ${colorPaletteRedBackground1};
|
|
43
|
+
border-color: ${colorPaletteRedBorder1};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host(${multiLineState}) {
|
|
47
|
+
grid-template-areas:
|
|
48
|
+
'icon body dismiss'
|
|
49
|
+
'actions actions actions';
|
|
50
|
+
grid-template-columns: auto 1fr auto;
|
|
51
|
+
grid-template-rows: auto auto 1fr;
|
|
52
|
+
padding-block: ${spacingVerticalMNudge};
|
|
53
|
+
padding-inline: ${spacingHorizontalM};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.content {
|
|
57
|
+
grid-area: body;
|
|
58
|
+
max-width: 520px;
|
|
59
|
+
padding-block: ${spacingVerticalMNudge};
|
|
60
|
+
padding-inline: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host(${multiLineState}) .content {
|
|
64
|
+
padding: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
::slotted([slot='icon']) {
|
|
68
|
+
display: flex;
|
|
69
|
+
grid-area: icon;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
align-items: center;
|
|
72
|
+
color: ${colorNeutralForeground3};
|
|
73
|
+
margin-inline-end: ${spacingHorizontalS};
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
:host(${multiLineState}) ::slotted([slot='icon']) {
|
|
77
|
+
align-items: start;
|
|
78
|
+
height: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
::slotted([slot='dismiss']) {
|
|
82
|
+
grid-area: dismiss;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.actions {
|
|
86
|
+
grid-area: actions;
|
|
87
|
+
display: flex;
|
|
88
|
+
justify-self: end;
|
|
89
|
+
margin-inline-end: ${spacingHorizontalS};
|
|
90
|
+
gap: ${spacingHorizontalS};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:host(${multiLineState}) .actions {
|
|
94
|
+
margin-block-start: ${spacingVerticalMNudge};
|
|
95
|
+
margin-inline-end: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:host(${multiLineState}) ::slotted([slot='dismiss']) {
|
|
99
|
+
align-items: start;
|
|
100
|
+
height: 100%;
|
|
101
|
+
padding-block-start: ${spacingVerticalS};
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
::slotted(*) {
|
|
105
|
+
font-size: inherit;
|
|
106
|
+
}
|
|
107
|
+
`;
|
|
108
|
+
//# sourceMappingURL=message-bar.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;UAO7B,WAAW;;;;UAIX,YAAY;wBACE,4BAA4B;oBAChC,wBAAwB;;;UAGlC,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,UAAU;wBACI,0BAA0B;oBAC9B,sBAAsB;;;UAGhC,cAAc;;;;;;qBAMH,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;UAIhC,cAAc;;;;;;;;;aASX,uBAAuB;yBACX,kBAAkB;;;UAGjC,cAAc;;;;;;;;;;;;;yBAaC,kBAAkB;WAChC,kBAAkB;;;UAGnB,cAAc;0BACE,qBAAqB;;;;UAIrC,cAAc;;;2BAGG,gBAAgB;;;;;;CAM1C,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { html } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* Generates a template for the MessageBar component.
|
|
4
|
+
* @public
|
|
5
|
+
* @param {MessageBar} T - The type of the MessageBar.
|
|
6
|
+
* @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
|
|
7
|
+
*/
|
|
8
|
+
export function messageBarTemplate() {
|
|
9
|
+
return html `
|
|
10
|
+
<slot name="icon"></slot>
|
|
11
|
+
<div class="content">
|
|
12
|
+
<slot></slot>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="actions">
|
|
15
|
+
<slot name="actions"></slot>
|
|
16
|
+
</div>
|
|
17
|
+
<slot name="dismiss"></slot>
|
|
18
|
+
`;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* The template for the MessageBar component.
|
|
22
|
+
* @type {ElementViewTemplate<MessageBar>}
|
|
23
|
+
*/
|
|
24
|
+
export const template = messageBarTemplate();
|
|
25
|
+
//# sourceMappingURL=message-bar.template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-bar.template.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;GASb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/rating-display/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { RatingDisplay } from './rating-display.js';
|
|
2
|
+
export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
|
|
3
|
+
export { template as RatingDisplayTemplate } from './rating-display.template.js';
|
|
4
|
+
export { styles as RatingDisplayStyles } from './rating-display.styles.js';
|
|
5
|
+
export { definition as RatingDisplayDefinition } from './rating-display.definition.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FluentDesignSystem } from '../fluent-design-system.js';
|
|
2
|
+
import { RatingDisplay } from './rating-display.js';
|
|
3
|
+
import { styles } from './rating-display.styles.js';
|
|
4
|
+
import { template } from './rating-display.template.js';
|
|
5
|
+
/**
|
|
6
|
+
* The definition for the Fluent Rating Display component.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
* @remarks
|
|
10
|
+
* HTML Element: `<fluent-rating-display>`
|
|
11
|
+
*/
|
|
12
|
+
export const definition = RatingDisplay.compose({
|
|
13
|
+
name: `${FluentDesignSystem.prefix}-rating-display`,
|
|
14
|
+
template,
|
|
15
|
+
styles,
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=rating-display.definition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
|
|
3
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
4
|
+
/**
|
|
5
|
+
* The base class used for constructing a fluent-rating-display custom element
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export class RatingDisplay extends FASTElement {
|
|
9
|
+
/**
|
|
10
|
+
* Handles changes to the color attribute.
|
|
11
|
+
*
|
|
12
|
+
* @param prev - The previous state
|
|
13
|
+
* @param next - The next state
|
|
14
|
+
*/
|
|
15
|
+
colorChanged(prev, next) {
|
|
16
|
+
if (prev)
|
|
17
|
+
toggleState(this.elementInternals, prev, false);
|
|
18
|
+
if (next)
|
|
19
|
+
toggleState(this.elementInternals, next, true);
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Handles changes to the size attribute.
|
|
23
|
+
*
|
|
24
|
+
* @param prev - The previous state
|
|
25
|
+
* @param next - The next state
|
|
26
|
+
*/
|
|
27
|
+
sizeChanged(prev, next) {
|
|
28
|
+
if (prev)
|
|
29
|
+
toggleState(this.elementInternals, prev, false);
|
|
30
|
+
if (next)
|
|
31
|
+
toggleState(this.elementInternals, next, true);
|
|
32
|
+
}
|
|
33
|
+
constructor() {
|
|
34
|
+
super();
|
|
35
|
+
/**
|
|
36
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
37
|
+
*
|
|
38
|
+
* @internal
|
|
39
|
+
*/
|
|
40
|
+
this.elementInternals = this.attachInternals();
|
|
41
|
+
/**
|
|
42
|
+
* Renders a single filled icon with a label next to it.
|
|
43
|
+
*
|
|
44
|
+
* @public
|
|
45
|
+
* @remarks
|
|
46
|
+
* HTML Attribute: `compact`
|
|
47
|
+
*/
|
|
48
|
+
this.compact = false;
|
|
49
|
+
this.intlNumberFormatter = new Intl.NumberFormat();
|
|
50
|
+
this.elementInternals.role = 'img';
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Returns "count" as string, formatted according to the locale.
|
|
54
|
+
*
|
|
55
|
+
* @internal
|
|
56
|
+
*/
|
|
57
|
+
get formattedCount() {
|
|
58
|
+
return this.count ? this.intlNumberFormatter.format(this.count) : '';
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Generates the icon SVG elements based on the "max" attribute.
|
|
62
|
+
*
|
|
63
|
+
* @internal
|
|
64
|
+
*/
|
|
65
|
+
generateIcons() {
|
|
66
|
+
var _a, _b;
|
|
67
|
+
let htmlString = '';
|
|
68
|
+
// The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
|
|
69
|
+
const selectedValue = Math.round((this.compact ? 1 : (_a = this.value) !== null && _a !== void 0 ? _a : 0) * 2) / 2;
|
|
70
|
+
// Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
|
|
71
|
+
// If "compact" is true, only render one filled icon.
|
|
72
|
+
for (let i = 0; i < (this.compact ? 1 : (_b = this.max) !== null && _b !== void 0 ? _b : 5) * 2; i++) {
|
|
73
|
+
const iconValue = (i + 1) / 2;
|
|
74
|
+
htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? 'selected' : ''}><use href="#star"></use></svg>`;
|
|
75
|
+
}
|
|
76
|
+
return htmlString;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
__decorate([
|
|
80
|
+
attr
|
|
81
|
+
], RatingDisplay.prototype, "color", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
attr({ mode: 'boolean' })
|
|
84
|
+
], RatingDisplay.prototype, "compact", void 0);
|
|
85
|
+
__decorate([
|
|
86
|
+
attr({ converter: nullableNumberConverter })
|
|
87
|
+
], RatingDisplay.prototype, "count", void 0);
|
|
88
|
+
__decorate([
|
|
89
|
+
attr({ converter: nullableNumberConverter })
|
|
90
|
+
], RatingDisplay.prototype, "max", void 0);
|
|
91
|
+
__decorate([
|
|
92
|
+
attr
|
|
93
|
+
], RatingDisplay.prototype, "size", void 0);
|
|
94
|
+
__decorate([
|
|
95
|
+
attr({ converter: nullableNumberConverter })
|
|
96
|
+
], RatingDisplay.prototype, "value", void 0);
|
|
97
|
+
//# sourceMappingURL=rating-display.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAmB5C;;;;;OAKG;IACI,YAAY,CAAC,IAAoC,EAAE,IAAoC;QAC5F,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1D,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IA6CD;;;;;OAKG;IACI,WAAW,CAAC,IAAmC,EAAE,IAAmC;QACzF,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1D,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QAhGV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAwBnE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;QAwDxB,wBAAmB,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QAKpD,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACI,aAAa;;QAClB,IAAI,UAAU,GAAW,EAAE,CAAC;QAE5B,+FAA+F;QAC/F,MAAM,aAAa,GAAW,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAEvF,sFAAsF;QACtF,qDAAqD;QACrD,KAAK,IAAI,CAAC,GAAW,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,GAAG,mCAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACvE,MAAM,SAAS,GAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEtC,UAAU,IAAI,2BACZ,SAAS,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC7C,iCAAiC,CAAC;SACnC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;CACF;AArHC;IADC,IAAI;4CAC6B;AAqBlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACM;AAUhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACvB;AAYtB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CACzB;AAWpB;IADC,IAAI;2CAC2B;AAqBhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACvB"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export const RatingDisplayColor = {
|
|
6
|
+
neutral: 'neutral',
|
|
7
|
+
brand: 'brand',
|
|
8
|
+
marigold: 'marigold',
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* The size of a Rating Display can be `small`, `medium`, or `large`.
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
export const RatingDisplaySize = {
|
|
15
|
+
small: 'small',
|
|
16
|
+
medium: 'medium',
|
|
17
|
+
large: 'large',
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=rating-display.options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.options.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
|
|
3
|
+
import { colorBrandBackground, colorBrandStroke2, colorNeutralBackground1Pressed, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
|
|
4
|
+
import { brandState, largeState, neutralState, smallState } from '../styles/states/index.js';
|
|
5
|
+
/**
|
|
6
|
+
* The styles for the Rating Display component.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export const styles = css `
|
|
11
|
+
${display('inline-flex')}
|
|
12
|
+
|
|
13
|
+
:host {
|
|
14
|
+
--icon-size: 16px;
|
|
15
|
+
align-items: center;
|
|
16
|
+
color: ${colorNeutralForeground1};
|
|
17
|
+
font-family: ${fontFamilyBase};
|
|
18
|
+
font-size: ${fontSizeBase200};
|
|
19
|
+
line-height: ${lineHeightBase200};
|
|
20
|
+
contain: layout style;
|
|
21
|
+
user-select: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host(${smallState}) {
|
|
25
|
+
--icon-size: 12px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:host(${largeState}) {
|
|
29
|
+
--icon-size: 20px;
|
|
30
|
+
font-size: ${fontSizeBase300};
|
|
31
|
+
line-height: ${lineHeightBase300};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
svg {
|
|
35
|
+
width: var(--icon-size);
|
|
36
|
+
height: var(--icon-size);
|
|
37
|
+
fill: ${colorPaletteMarigoldBackground3};
|
|
38
|
+
margin-inline-end: ${spacingHorizontalXXS};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
svg:nth-child(even) {
|
|
42
|
+
clip-path: inset(0 50% 0 0);
|
|
43
|
+
margin-inline-end: calc(0px - var(--icon-size));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host(${neutralState}) svg {
|
|
47
|
+
fill: ${colorNeutralForeground1};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:host(${brandState}) svg {
|
|
51
|
+
fill: ${colorBrandBackground};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host(:is([value^='-'], [value='0'])) svg,
|
|
55
|
+
:host(:not([value])) svg,
|
|
56
|
+
svg[selected] ~ svg {
|
|
57
|
+
fill: ${colorPaletteMarigoldBackground2};
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host(${neutralState}:is([value^='-'], [value='0'])) svg,
|
|
61
|
+
:host(${neutralState}:not([value])) svg,
|
|
62
|
+
:host(${neutralState}) svg[selected] ~ svg {
|
|
63
|
+
fill: ${colorNeutralBackground1Pressed};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host(${brandState}:is([value^='-'], [value='0'])) svg,
|
|
67
|
+
:host(${brandState}:not([value])) svg,
|
|
68
|
+
:host(${brandState}) svg[selected] ~ svg {
|
|
69
|
+
fill: ${colorBrandStroke2};
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.value-label,
|
|
73
|
+
::slotted([slot='value']) {
|
|
74
|
+
display: block;
|
|
75
|
+
margin-inline-start: ${spacingHorizontalXS};
|
|
76
|
+
font-weight: ${fontWeightSemibold};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host(${smallState}) .value-label,
|
|
80
|
+
:host(${smallState}) ::slotted([slot='value']) {
|
|
81
|
+
margin-inline-start: ${spacingHorizontalXXS};
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host(${largeState}) .value-label,
|
|
85
|
+
:host(${largeState}) ::slotted([slot='value']) {
|
|
86
|
+
margin-inline-start: ${spacingHorizontalSNudge};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host(:not([count])) .count-label {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.count-label::before,
|
|
94
|
+
::slotted([slot='count'])::before {
|
|
95
|
+
content: '·';
|
|
96
|
+
margin-inline: ${spacingHorizontalXS};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
:host(${smallState}) .count-label::before,
|
|
100
|
+
:host(${smallState}) ::slotted([slot='count'])::before {
|
|
101
|
+
margin-inline: ${spacingHorizontalXXS};
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
:host(${largeState}) .count-label::before,
|
|
105
|
+
:host(${largeState}) ::slotted([slot='count'])::before {
|
|
106
|
+
margin-inline: ${spacingHorizontalSNudge};
|
|
107
|
+
}
|
|
108
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
109
|
+
:host([color]) svg {
|
|
110
|
+
fill: CanvasText;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:host([color]:is([value^='-'], [value='0'])) svg,
|
|
114
|
+
:host(:not([value])) svg,
|
|
115
|
+
:host([color]) svg[selected] ~ svg {
|
|
116
|
+
fill: Canvas;
|
|
117
|
+
stroke: CanvasText;
|
|
118
|
+
}
|
|
119
|
+
`));
|
|
120
|
+
//# sourceMappingURL=rating-display.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,8BAA8B,EAC9B,uBAAuB,EACvB,+BAA+B,EAC/B,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE7F;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;UAK1B,UAAU;;;;UAIV,UAAU;;iBAEH,eAAe;mBACb,iBAAiB;;;;;;YAMxB,+BAA+B;yBAClB,oBAAoB;;;;;;;;UAQnC,YAAY;YACV,uBAAuB;;;UAGzB,UAAU;YACR,oBAAoB;;;;;;YAMpB,+BAA+B;;;UAGjC,YAAY;UACZ,YAAY;UACZ,YAAY;YACV,8BAA8B;;;UAGhC,UAAU;UACV,UAAU;UACV,UAAU;YACR,iBAAiB;;;;;;2BAMF,mBAAmB;mBAC3B,kBAAkB;;;UAG3B,UAAU;UACV,UAAU;2BACO,oBAAoB;;;UAGrC,UAAU;UACV,UAAU;2BACO,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;UAG9B,UAAU;UACV,UAAU;qBACC,oBAAoB;;;UAG/B,UAAU;UACV,UAAU;qBACC,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { html } from '@microsoft/fast-element';
|
|
2
|
+
/**
|
|
3
|
+
* Reusable star icon symbol
|
|
4
|
+
*/
|
|
5
|
+
const star = html `
|
|
6
|
+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
7
|
+
<symbol id="star" viewBox="0 0 12 12">
|
|
8
|
+
<path
|
|
9
|
+
d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z"
|
|
10
|
+
/>
|
|
11
|
+
</symbol>
|
|
12
|
+
</svg>
|
|
13
|
+
`;
|
|
14
|
+
/**
|
|
15
|
+
* Generates a template for the Rating Display component.
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
*/
|
|
19
|
+
export function ratingDisplayTemplate() {
|
|
20
|
+
return html `
|
|
21
|
+
${star} ${x => html `${html.partial(x.generateIcons())}`}
|
|
22
|
+
<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot>
|
|
23
|
+
<slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* The template for the Rating Display component.
|
|
28
|
+
*
|
|
29
|
+
* @public
|
|
30
|
+
*/
|
|
31
|
+
export const template = ratingDisplayTemplate();
|
|
32
|
+
//# sourceMappingURL=rating-display.template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;sEACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}
|
|
@@ -2,7 +2,6 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { display } from '../../utils/index.js';
|
|
3
3
|
import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
|
|
4
4
|
import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
|
|
5
|
-
const textPadding = spacingHorizontalXXS;
|
|
6
5
|
export const badgeBaseStyles = css.partial `
|
|
7
6
|
${display('inline-flex')} :host {
|
|
8
7
|
position: relative;
|
|
@@ -15,7 +14,7 @@ export const badgeBaseStyles = css.partial `
|
|
|
15
14
|
line-height: ${lineHeightBase200};
|
|
16
15
|
min-width: 20px;
|
|
17
16
|
height: 20px;
|
|
18
|
-
padding-inline: calc(${spacingHorizontalXS} + ${
|
|
17
|
+
padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
|
|
19
18
|
border-radius: ${borderRadiusCircular};
|
|
20
19
|
border-color: ${colorTransparentStroke};
|
|
21
20
|
background-color: ${colorBrandBackground};
|
|
@@ -72,7 +71,7 @@ export const badgeSizeStyles = css.partial `
|
|
|
72
71
|
height: 16px;
|
|
73
72
|
font-size: ${fontSizeBase100};
|
|
74
73
|
line-height: ${lineHeightBase100};
|
|
75
|
-
padding-inline: calc(${spacingHorizontalXXS} + ${
|
|
74
|
+
padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
|
|
76
75
|
}
|
|
77
76
|
:host(${smallState}) ::slotted(svg) {
|
|
78
77
|
font-size: 12px;
|
|
@@ -82,7 +81,7 @@ export const badgeSizeStyles = css.partial `
|
|
|
82
81
|
height: 24px;
|
|
83
82
|
font-size: ${fontSizeBase200};
|
|
84
83
|
line-height: ${lineHeightBase200};
|
|
85
|
-
padding-inline: calc(${spacingHorizontalXS} + ${
|
|
84
|
+
padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
|
|
86
85
|
}
|
|
87
86
|
:host(${largeState}) ::slotted(svg) {
|
|
88
87
|
font-size: 16px;
|
|
@@ -92,7 +91,7 @@ export const badgeSizeStyles = css.partial `
|
|
|
92
91
|
height: 32px;
|
|
93
92
|
font-size: ${fontSizeBase200};
|
|
94
93
|
line-height: ${lineHeightBase200};
|
|
95
|
-
padding-inline: calc(${spacingHorizontalSNudge} + ${
|
|
94
|
+
padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
|
|
96
95
|
}
|
|
97
96
|
:host(${extraLargeState}) ::slotted(svg) {
|
|
98
97
|
font-size: 20px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,8BAA8B,EAC9B,6BAA6B,EAC7B,oCAAoC,EACpC,mBAAmB,EACnB,4BAA4B,EAC5B,iCAAiC,EACjC,iCAAiC,EACjC,6BAA6B,EAC7B,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,6BAA6B,EAC7B,yBAAyB,EACzB,6BAA6B,EAC7B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,oBAAoB,CAAC;AAE5B,MAAM,
|
|
1
|
+
{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}
|