igniteui-webcomponents 2.1.0-beta.0 → 2.1.1
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 +23 -6
- package/components/common/definitions/defineAllComponents.js +4 -0
- package/components/common/definitions/defineAllComponents.js.map +1 -1
- package/components/form/form.js +2 -2
- package/components/form/form.js.map +1 -1
- package/components/rating/rating-symbol.d.ts +18 -0
- package/components/rating/rating-symbol.js +8 -0
- package/components/rating/rating-symbol.js.map +1 -0
- package/components/rating/rating.base.css.d.ts +1 -0
- package/components/rating/rating.base.css.js +3 -0
- package/components/rating/rating.base.css.js.map +1 -0
- package/components/rating/rating.bootstrap.css.d.ts +1 -0
- package/components/rating/rating.bootstrap.css.js +3 -0
- package/components/rating/rating.bootstrap.css.js.map +1 -0
- package/components/rating/rating.d.ts +97 -0
- package/components/rating/rating.fluent.css.d.ts +1 -0
- package/components/rating/rating.fluent.css.js +3 -0
- package/components/rating/rating.fluent.css.js.map +1 -0
- package/components/rating/rating.indigo.css.d.ts +1 -0
- package/components/rating/rating.indigo.css.js +3 -0
- package/components/rating/rating.indigo.css.js.map +1 -0
- package/components/rating/rating.js +257 -0
- package/components/rating/rating.js.map +1 -0
- package/custom-elements.json +218 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/themes/dark/bootstrap.css +1 -1
- package/themes/dark/fluent.css +1 -1
- package/themes/dark/indigo.css +1 -1
- package/themes/dark/material.css +1 -1
- package/themes/light/bootstrap.css +1 -1
- package/themes/light/fluent.css +1 -1
- package/themes/light/indigo.css +1 -1
- package/themes/light/material.css +1 -1
- package/vscode-html-custom-data.json +77 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,15 +5,30 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
7
7
|
|
|
8
|
-
## [
|
|
8
|
+
## [2.1.1] - 2022-03-15
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- Control border radius and elevation from `--igc-radius-factor` and `--igc-elevation-factor`:
|
|
12
|
+
|
|
13
|
+
Example:
|
|
14
|
+
```css
|
|
15
|
+
/* Make all components square and remove all shadows */
|
|
16
|
+
:root {
|
|
17
|
+
--igc-radius-factor: 0;
|
|
18
|
+
--igc-elevation-factor: 0;
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## [2.1.0] - 2022-03-15
|
|
9
23
|
|
|
10
24
|
### Added
|
|
11
25
|
|
|
12
26
|
- Linear Progress component
|
|
13
27
|
- Circular Progress component
|
|
14
|
-
- Chip
|
|
15
|
-
- Snackbar
|
|
16
|
-
- Toast
|
|
28
|
+
- Chip component
|
|
29
|
+
- Snackbar component
|
|
30
|
+
- Toast component
|
|
31
|
+
- Rating component
|
|
17
32
|
- Component themes can be changed at runtime by calling the `configureTheme(theme: Theme)` function
|
|
18
33
|
|
|
19
34
|
## [2.0.0] - 2022-02-03
|
|
@@ -60,5 +75,7 @@ Initial release of Ignite UI Web Components
|
|
|
60
75
|
- Ripple component
|
|
61
76
|
- Switch component
|
|
62
77
|
|
|
63
|
-
[2.
|
|
64
|
-
[1.0
|
|
78
|
+
[2.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.1.0...2.1.1
|
|
79
|
+
[2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.0.0...2.1.0
|
|
80
|
+
[2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/1.0.0...2.0.0
|
|
81
|
+
[1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
|
|
@@ -25,6 +25,8 @@ import IgcNavDrawerItemComponent from '../../nav-drawer/nav-drawer-item';
|
|
|
25
25
|
import IgcNavbarComponent from '../../navbar/navbar';
|
|
26
26
|
import IgcRadioGroupComponent from '../../radio-group/radio-group';
|
|
27
27
|
import IgcRadioComponent from '../../radio/radio';
|
|
28
|
+
import IgcRatingComponent from '../../rating/rating';
|
|
29
|
+
import IgcRatingSymbolComponent from '../../rating/rating-symbol';
|
|
28
30
|
import IgcRippleComponent from '../../ripple/ripple';
|
|
29
31
|
import IgcRangeSliderComponent from '../../slider/range-slider';
|
|
30
32
|
import IgcSliderComponent from '../../slider/slider';
|
|
@@ -59,6 +61,8 @@ const allComponents = [
|
|
|
59
61
|
IgcNavbarComponent,
|
|
60
62
|
IgcRadioComponent,
|
|
61
63
|
IgcRadioGroupComponent,
|
|
64
|
+
IgcRatingComponent,
|
|
65
|
+
IgcRatingSymbolComponent,
|
|
62
66
|
IgcRippleComponent,
|
|
63
67
|
IgcSliderComponent,
|
|
64
68
|
IgcToastComponent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defineAllComponents.js","sourceRoot":"","sources":["../../../../src/components/common/definitions/defineAllComponents.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,uBAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAC5D,OAAO,qBAAqB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,4BAA4B,MAAM,kCAAkC,CAAC;AAC5E,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,0BAA0B,MAAM,gCAAgC,CAAC;AACxE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAC5D,OAAO,oBAAoB,MAAM,sBAAsB,CAAC;AACxD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,yBAAyB,MAAM,kCAAkC,CAAC;AACzE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,sBAAsB,MAAM,+BAA+B,CAAC;AACnE,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,4BAA4B,MAAM,kCAAkC,CAAC;AAE5E,MAAM,aAAa,GAA+B;IAChD,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;IAClB,sBAAsB;IACtB,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,kBAAkB;IAClB,gBAAgB;IAChB,gBAAgB;IAChB,iBAAiB;IACjB,sBAAsB;IACtB,oBAAoB;IACpB,gBAAgB;IAChB,+BAA+B;IAC/B,yBAAyB;IACzB,qBAAqB;IACrB,kBAAkB;IAClB,iBAAiB;IACjB,sBAAsB;IACtB,kBAAkB;IAClB,kBAAkB;IAClB,iBAAiB;IACjB,uBAAuB;IACvB,uBAAuB;IACvB,4BAA4B;IAC5B,0BAA0B;IAC1B,4BAA4B;IAC5B,oBAAoB;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,gBAAgB,CAAC,GAAG,aAAa,CAAC,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import IgcAvatarComponent from '../../avatar/avatar';\nimport IgcBadgeComponent from '../../badge/badge';\nimport IgcButtonComponent from '../../button/button';\nimport IgcIconButtonComponent from '../../button/icon-button';\nimport IgcCalendarComponent from '../../calendar/calendar';\nimport IgcCardComponent from '../../card/card';\nimport IgcCardActionsComponent from '../../card/card.actions';\nimport IgcCardContentComponent from '../../card/card.content';\nimport IgcCardHeaderComponent from '../../card/card.header';\nimport IgcCardMediaComponent from '../../card/card.media';\nimport IgcCheckboxComponent from '../../checkbox/checkbox';\nimport IgcChipComponent from '../../chip/chip';\nimport IgcCircularProgressComponent from '../../progress/circular-progress';\nimport IgcSwitchComponent from '../../checkbox/switch';\nimport IgcFormComponent from '../../form/form';\nimport IgcIconComponent from '../../icon/icon';\nimport IgcInputComponent from '../../input/input';\nimport IgcLinearProgressComponent from '../../progress/linear-progress';\nimport IgcListComponent from '../../list/list';\nimport IgcListHeaderComponent from '../../list/list-header';\nimport IgcListItemComponent from '../../list/list-item';\nimport IgcNavDrawerComponent from '../../nav-drawer/nav-drawer';\nimport IgcNavDrawerHeaderItemComponent from '../../nav-drawer/nav-drawer-header-item';\nimport IgcNavDrawerItemComponent from '../../nav-drawer/nav-drawer-item';\nimport IgcNavbarComponent from '../../navbar/navbar';\nimport IgcRadioGroupComponent from '../../radio-group/radio-group';\nimport IgcRadioComponent from '../../radio/radio';\nimport IgcRippleComponent from '../../ripple/ripple';\nimport IgcRangeSliderComponent from '../../slider/range-slider';\nimport IgcSliderComponent from '../../slider/slider';\nimport IgcSnackbarComponent from '../../snackbar/snackbar';\nimport IgcToastComponent from '../../toast/toast';\nimport IgcSliderLabelComponent from '../../slider/slider-label';\nimport { defineComponents } from './defineComponents';\nimport IgcCircularGradientComponent from '../../progress/circular-gradient';\n\nconst allComponents: CustomElementConstructor[] = [\n IgcAvatarComponent,\n IgcBadgeComponent,\n IgcButtonComponent,\n IgcIconButtonComponent,\n IgcCalendarComponent,\n IgcCardActionsComponent,\n IgcCardContentComponent,\n IgcCardHeaderComponent,\n IgcCardMediaComponent,\n IgcCardComponent,\n IgcCheckboxComponent,\n IgcChipComponent,\n IgcSwitchComponent,\n IgcFormComponent,\n IgcIconComponent,\n IgcInputComponent,\n IgcListHeaderComponent,\n IgcListItemComponent,\n IgcListComponent,\n IgcNavDrawerHeaderItemComponent,\n IgcNavDrawerItemComponent,\n IgcNavDrawerComponent,\n IgcNavbarComponent,\n IgcRadioComponent,\n IgcRadioGroupComponent,\n IgcRippleComponent,\n IgcSliderComponent,\n IgcToastComponent,\n IgcSliderLabelComponent,\n IgcRangeSliderComponent,\n IgcCircularProgressComponent,\n IgcLinearProgressComponent,\n IgcCircularGradientComponent,\n IgcSnackbarComponent,\n];\n\nexport const defineAllComponents = () => {\n defineComponents(...allComponents);\n};\n"]}
|
|
1
|
+
{"version":3,"file":"defineAllComponents.js","sourceRoot":"","sources":["../../../../src/components/common/definitions/defineAllComponents.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,uBAAuB,MAAM,yBAAyB,CAAC;AAC9D,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAC5D,OAAO,qBAAqB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,4BAA4B,MAAM,kCAAkC,CAAC;AAC5E,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AACvD,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,0BAA0B,MAAM,gCAAgC,CAAC;AACxE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAC5D,OAAO,oBAAoB,MAAM,sBAAsB,CAAC;AACxD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,yBAAyB,MAAM,kCAAkC,CAAC;AACzE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,sBAAsB,MAAM,+BAA+B,CAAC;AACnE,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAClE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,4BAA4B,MAAM,kCAAkC,CAAC;AAE5E,MAAM,aAAa,GAA+B;IAChD,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;IAClB,sBAAsB;IACtB,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,kBAAkB;IAClB,gBAAgB;IAChB,gBAAgB;IAChB,iBAAiB;IACjB,sBAAsB;IACtB,oBAAoB;IACpB,gBAAgB;IAChB,+BAA+B;IAC/B,yBAAyB;IACzB,qBAAqB;IACrB,kBAAkB;IAClB,iBAAiB;IACjB,sBAAsB;IACtB,kBAAkB;IAClB,wBAAwB;IACxB,kBAAkB;IAClB,kBAAkB;IAClB,iBAAiB;IACjB,uBAAuB;IACvB,uBAAuB;IACvB,4BAA4B;IAC5B,0BAA0B;IAC1B,4BAA4B;IAC5B,oBAAoB;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,gBAAgB,CAAC,GAAG,aAAa,CAAC,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import IgcAvatarComponent from '../../avatar/avatar';\nimport IgcBadgeComponent from '../../badge/badge';\nimport IgcButtonComponent from '../../button/button';\nimport IgcIconButtonComponent from '../../button/icon-button';\nimport IgcCalendarComponent from '../../calendar/calendar';\nimport IgcCardComponent from '../../card/card';\nimport IgcCardActionsComponent from '../../card/card.actions';\nimport IgcCardContentComponent from '../../card/card.content';\nimport IgcCardHeaderComponent from '../../card/card.header';\nimport IgcCardMediaComponent from '../../card/card.media';\nimport IgcCheckboxComponent from '../../checkbox/checkbox';\nimport IgcChipComponent from '../../chip/chip';\nimport IgcCircularProgressComponent from '../../progress/circular-progress';\nimport IgcSwitchComponent from '../../checkbox/switch';\nimport IgcFormComponent from '../../form/form';\nimport IgcIconComponent from '../../icon/icon';\nimport IgcInputComponent from '../../input/input';\nimport IgcLinearProgressComponent from '../../progress/linear-progress';\nimport IgcListComponent from '../../list/list';\nimport IgcListHeaderComponent from '../../list/list-header';\nimport IgcListItemComponent from '../../list/list-item';\nimport IgcNavDrawerComponent from '../../nav-drawer/nav-drawer';\nimport IgcNavDrawerHeaderItemComponent from '../../nav-drawer/nav-drawer-header-item';\nimport IgcNavDrawerItemComponent from '../../nav-drawer/nav-drawer-item';\nimport IgcNavbarComponent from '../../navbar/navbar';\nimport IgcRadioGroupComponent from '../../radio-group/radio-group';\nimport IgcRadioComponent from '../../radio/radio';\nimport IgcRatingComponent from '../../rating/rating';\nimport IgcRatingSymbolComponent from '../../rating/rating-symbol';\nimport IgcRippleComponent from '../../ripple/ripple';\nimport IgcRangeSliderComponent from '../../slider/range-slider';\nimport IgcSliderComponent from '../../slider/slider';\nimport IgcSnackbarComponent from '../../snackbar/snackbar';\nimport IgcToastComponent from '../../toast/toast';\nimport IgcSliderLabelComponent from '../../slider/slider-label';\nimport { defineComponents } from './defineComponents';\nimport IgcCircularGradientComponent from '../../progress/circular-gradient';\n\nconst allComponents: CustomElementConstructor[] = [\n IgcAvatarComponent,\n IgcBadgeComponent,\n IgcButtonComponent,\n IgcIconButtonComponent,\n IgcCalendarComponent,\n IgcCardActionsComponent,\n IgcCardContentComponent,\n IgcCardHeaderComponent,\n IgcCardMediaComponent,\n IgcCardComponent,\n IgcCheckboxComponent,\n IgcChipComponent,\n IgcSwitchComponent,\n IgcFormComponent,\n IgcIconComponent,\n IgcInputComponent,\n IgcListHeaderComponent,\n IgcListItemComponent,\n IgcListComponent,\n IgcNavDrawerHeaderItemComponent,\n IgcNavDrawerItemComponent,\n IgcNavDrawerComponent,\n IgcNavbarComponent,\n IgcRadioComponent,\n IgcRadioGroupComponent,\n IgcRatingComponent,\n IgcRatingSymbolComponent,\n IgcRippleComponent,\n IgcSliderComponent,\n IgcToastComponent,\n IgcSliderLabelComponent,\n IgcRangeSliderComponent,\n IgcCircularProgressComponent,\n IgcLinearProgressComponent,\n IgcCircularGradientComponent,\n IgcSnackbarComponent,\n];\n\nexport const defineAllComponents = () => {\n defineComponents(...allComponents);\n};\n"]}
|
package/components/form/form.js
CHANGED
|
@@ -18,7 +18,7 @@ export default class IgcFormComponent extends EventEmitterMixin(LitElement) {
|
|
|
18
18
|
'igc-switch',
|
|
19
19
|
'igc-checkbox',
|
|
20
20
|
];
|
|
21
|
-
this._controlsWithValue = ['input', 'igc-input', 'textarea'];
|
|
21
|
+
this._controlsWithValue = ['input', 'igc-input', 'textarea', 'igc-rating'];
|
|
22
22
|
this._controlsThatSubmit = [
|
|
23
23
|
'input',
|
|
24
24
|
'button',
|
|
@@ -51,7 +51,7 @@ export default class IgcFormComponent extends EventEmitterMixin(LitElement) {
|
|
|
51
51
|
(tagName !== 'input' && this._controlsWithChecked.includes(tagName))) {
|
|
52
52
|
element.checked = element.hasAttribute('checked');
|
|
53
53
|
}
|
|
54
|
-
else if (tagName === 'igc-input') {
|
|
54
|
+
else if (tagName === 'igc-input' || tagName === 'igc-rating') {
|
|
55
55
|
element.value = element.getAttribute('value');
|
|
56
56
|
}
|
|
57
57
|
else if (this._controlsWithValue.includes(tagName)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAmBrE,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,iBAAiB,CAG7D,UAAU,CAAC;IA2BX;QACE,KAAK,EAAE,CAAC;QAnBF,yBAAoB,GAAG;YAC7B,OAAO;YACP,OAAO;YACP,WAAW;YACX,YAAY;YACZ,cAAc;SACf,CAAC;QACM,uBAAkB,GAAG,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter';\nimport { alternateName, blazorSuppress } from '../common/decorators';\nimport { Constructor } from '../common/mixins/constructor';\n\nexport interface IgcFormEventMap {\n igcSubmit: CustomEvent<FormData>;\n igcReset: CustomEvent;\n}\n\n/**\n * The form is a component used to collect user input from\n * interactive controls.\n *\n * @element igc-form\n *\n * @slot - Default slot for the form.\n *\n * @fires igcSubmit - Emitted when the form is submitted.\n * @fires igcReset - Emitted when the form is reset.\n */\nexport default class IgcFormComponent extends EventEmitterMixin<\n IgcFormEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-form';\n\n public static styles = css`\n :host {\n display: block;\n }\n `;\n\n private _controlsWithChecked = [\n 'input',\n 'radio',\n 'igc-radio',\n 'igc-switch',\n 'igc-checkbox',\n ];\n private _controlsWithValue = ['input', 'igc-input', 'textarea', 'igc-rating'];\n private _controlsThatSubmit = [\n 'input',\n 'button',\n 'igc-button',\n 'igc-icon-button',\n ];\n\n /** Specifies if form data validation should be skipped on submit. */\n @property({ type: Boolean, reflect: true }) public novalidate = false;\n\n constructor() {\n super();\n\n this.addEventListener('click', this.handleClick);\n }\n\n /** Submits the form. */\n @alternateName('performSubmit')\n public submit(): boolean {\n const formData = this.getFormData();\n if (!this.novalidate && !this.reportValidity()) {\n return false;\n }\n\n this.emitEvent('igcSubmit', { detail: formData });\n return true;\n }\n\n /** Resets the form. */\n @alternateName('performReset')\n public reset() {\n const formElements = this.getFormElements();\n formElements.forEach((element) => {\n const tagName = element.tagName.toLowerCase();\n if (tagName === 'select') {\n for (let i = 0; i < element.options.length; i++) {\n const option = element.options[i];\n option.selected = option.defaultSelected;\n }\n } else if (\n (tagName === 'input' &&\n (element.type === 'checkbox' || element.type == 'radio')) ||\n (tagName !== 'input' && this._controlsWithChecked.includes(tagName))\n ) {\n element.checked = element.hasAttribute('checked');\n } else if (tagName === 'igc-input' || tagName === 'igc-rating') {\n element.value = element.getAttribute('value');\n } else if (this._controlsWithValue.includes(tagName)) {\n element.value = element.defaultValue;\n }\n });\n\n this.emitEvent('igcReset');\n }\n\n private getFormElements(): any[] {\n const slot = this.shadowRoot?.querySelector('slot');\n const assignedElements = slot?.assignedElements({ flatten: true });\n const formElements: any[] = [];\n assignedElements?.forEach((element: any) => {\n if (!element.disabled) {\n formElements.push(element);\n }\n const children = Array.from(element.getElementsByTagName('*')).filter(\n (element: any) => !element.disabled\n );\n formElements.push(...children);\n });\n\n return formElements;\n }\n\n //suppressing in blazor for now due to an issue, bringing it back later\n /** Retrieves the data from the form in the format of a FormData object. */\n @blazorSuppress()\n public getFormData() {\n const formData = new FormData();\n\n const formElements = this.getFormElements();\n formElements.forEach((element) => {\n const tagName = element.tagName.toLowerCase();\n if (tagName === 'select') {\n for (let i = 0; i < element.options.length; i++) {\n const option = element.options[i];\n if (option.selected) {\n formData.append(element.name, option.value);\n }\n }\n } else if (\n this._controlsWithChecked.includes(tagName) &&\n element.checked\n ) {\n formData.append(element.name, element.value || 'on');\n } else if (\n this._controlsWithValue.includes(tagName) &&\n element.type !== 'checkbox' &&\n element.type !== 'radio' &&\n element.type !== 'submit'\n ) {\n formData.append(element.name, element.value);\n }\n });\n\n return formData;\n }\n\n /** Checks for validity of the form. */\n public reportValidity(): boolean {\n const formElements = this.getFormElements();\n return !formElements.some(\n (element) =>\n typeof element.reportValidity === 'function' &&\n element.reportValidity() === false\n );\n }\n\n private handleClick(event: MouseEvent) {\n const targetElement: any = event.target as HTMLElement;\n if (\n this._controlsThatSubmit.includes(targetElement.tagName.toLowerCase()) &&\n targetElement.type.toLowerCase() === 'submit'\n ) {\n this.submit();\n } else if (targetElement.type?.toLowerCase() === 'reset') {\n this.reset();\n }\n\n return true;\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-form': IgcFormComponent;\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* Used when a custom icon/symbol/element needs to be passed to the igc-rating component.
|
|
5
|
+
*
|
|
6
|
+
* @element igc-rating-symbol
|
|
7
|
+
*
|
|
8
|
+
* @slot - Default slot for projected symbols/icons.
|
|
9
|
+
*/
|
|
10
|
+
export default class IgcRatingSymbolComponent extends LitElement {
|
|
11
|
+
static readonly tagName = "igc-rating-symbol";
|
|
12
|
+
protected createRenderRoot(): this;
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'igc-rating-symbol': IgcRatingSymbolComponent;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating-symbol.js","sourceRoot":"","sources":["../../../src/components/rating/rating-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,UAAU;IAG3C,gBAAgB;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;;AAJsB,gCAAO,GAAG,mBAAmB,CAAC","sourcesContent":["import { LitElement } from 'lit';\n\n/**\n *\n * Used when a custom icon/symbol/element needs to be passed to the igc-rating component.\n *\n * @element igc-rating-symbol\n *\n * @slot - Default slot for projected symbols/icons.\n */\nexport default class IgcRatingSymbolComponent extends LitElement {\n public static readonly tagName = 'igc-rating-symbol';\n\n protected override createRenderRoot() {\n return this;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-rating-symbol': IgcRatingSymbolComponent;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--igc-font-family);-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem}[part~=fraction] [part=symbols-wrapper],[part~=fraction]{position:absolute;overflow:hidden;inset-inline-start:0;min-width:0 !important;z-index:1}slot{display:none}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part~=label]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);color:hsla(var(--igc-gray-700), var(--igc-gray-a));-webkit-padding-start:.125rem;padding-inline-start:.125rem}[part~=symbols-wrapper]{color:hsla(var(--igc-gray-900), var(--igc-gray-a));position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.125rem;gap:.125rem;counter-reset:symbols;inset-inline-start:0}[part~=fraction] [part=symbols-wrapper]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part~=fraction] [part=symbols-wrapper] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}[part~=symbol]{color:inherit;font-size:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-filter:grayscale(100%);filter:grayscale(100%);cursor:pointer}[part~=symbol] igc-icon{color:inherit}[part~=symbol]:empty::before{content:counter(symbols);counter-increment:symbols}:host([disabled]){pointer-events:none}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a)) !important}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=fraction] [part=symbols-wrapper]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:1.5rem;min-height:1.5rem;line-height:1.5rem;width:1.5rem;height:1.5rem}[part~=large] igc-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}[part~=medium]{min-width:1.25rem;min-height:1.25rem;line-height:1.25rem;width:1.25rem;height:1.25rem}[part~=medium] igc-icon{width:1.25rem;height:1.25rem;font-size:1.25rem}[part~=small]{min-width:1rem;min-height:1rem;line-height:1rem;width:1rem;height:1rem}[part~=small] igc-icon{width:1rem;height:1rem;font-size:1rem}[part="label large"],[part="label medium"],[part="label small"]{height:auto;width:auto;min-height:0;min-width:0}[part="fraction large"]{min-height:calc(1.5rem + (0.125rem * 2));height:calc(1.5rem + (0.125rem * 2))}[part="fraction medium"]{min-height:calc(1.25rem + (0.125rem * 2));height:calc(1.25rem + (0.125rem * 2))}[part="fraction small"]{min-height:calc(1rem + (0.125rem * 2));height:calc(1rem + (0.125rem * 2))}`;
|
|
3
|
+
//# sourceMappingURL=rating.base.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,w2HAAw2H,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size);scrollbar-color:var(--igc-scrollbar-thumb-color) var(--igc-scrollbar-track-color)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size);height:var(--scrolbar-size);background:var(--igc-scrollbar-track-color)}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color)}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--igc-font-family);-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem}[part~=fraction] [part=symbols-wrapper],[part~=fraction]{position:absolute;overflow:hidden;inset-inline-start:0;min-width:0 !important;z-index:1}slot{display:none}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part~=label]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);color:hsla(var(--igc-gray-700), var(--igc-gray-a));-webkit-padding-start:.125rem;padding-inline-start:.125rem}[part~=symbols-wrapper]{color:hsla(var(--igc-gray-900), var(--igc-gray-a));position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.125rem;gap:.125rem;counter-reset:symbols;inset-inline-start:0}[part~=fraction] [part=symbols-wrapper]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part~=fraction] [part=symbols-wrapper] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}[part~=symbol]{color:inherit;font-size:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-filter:grayscale(100%);filter:grayscale(100%);cursor:pointer}[part~=symbol] igc-icon{color:inherit}[part~=symbol]:empty::before{content:counter(symbols);counter-increment:symbols}:host([disabled]){pointer-events:none}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a)) !important}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=fraction] [part=symbols-wrapper]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:1.5rem;min-height:1.5rem;line-height:1.5rem;width:1.5rem;height:1.5rem}[part~=large] igc-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}[part~=medium]{min-width:1.25rem;min-height:1.25rem;line-height:1.25rem;width:1.25rem;height:1.25rem}[part~=medium] igc-icon{width:1.25rem;height:1.25rem;font-size:1.25rem}[part~=small]{min-width:1rem;min-height:1rem;line-height:1rem;width:1rem;height:1rem}[part~=small] igc-icon{width:1rem;height:1rem;font-size:1rem}[part=\"label large\"],[part=\"label medium\"],[part=\"label small\"]{height:auto;width:auto;min-height:0;min-width:0}[part=\"fraction large\"]{min-height:calc(1.5rem + (0.125rem * 2));height:calc(1.5rem + (0.125rem * 2))}[part=\"fraction medium\"]{min-height:calc(1.25rem + (0.125rem * 2));height:calc(1.25rem + (0.125rem * 2))}[part=\"fraction small\"]{min-height:calc(1rem + (0.125rem * 2));height:calc(1rem + (0.125rem * 2))}`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `[part~=label]{font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.25rem;padding-inline-start:.25rem}`;
|
|
3
|
+
//# sourceMappingURL=rating.bootstrap.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.bootstrap.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8fAA8f,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=label]{font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.25rem;padding-inline-start:.25rem}`;\n"]}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { Constructor } from '../common/mixins/constructor';
|
|
3
|
+
import type IgcRatingSymbolComponent from './rating-symbol';
|
|
4
|
+
export interface IgcRatingEventMap {
|
|
5
|
+
igcChange: CustomEvent<number>;
|
|
6
|
+
igcHover: CustomEvent<number>;
|
|
7
|
+
}
|
|
8
|
+
declare const IgcRatingComponent_base: Constructor<import("../common/mixins/sizable").SizableInterface> & Constructor<import("../common/mixins/event-emitter").EventEmitterInterface<IgcRatingEventMap>> & Constructor<LitElement>;
|
|
9
|
+
/**
|
|
10
|
+
* Rating provides insight regarding others' opinions and experiences,
|
|
11
|
+
* and can allow the user to submit a rating of their own
|
|
12
|
+
*
|
|
13
|
+
* @element igc-rating
|
|
14
|
+
*
|
|
15
|
+
* @fires igcChange - Emitted when the value of the control changes.
|
|
16
|
+
* @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.
|
|
17
|
+
*
|
|
18
|
+
* @csspart base - The main wrapper which holds all of the rating elements.
|
|
19
|
+
* @csspart label - The label part.
|
|
20
|
+
* @csspart symbol - The part for a single symbol.
|
|
21
|
+
* @csspart fraction -The part for the selected symbols.
|
|
22
|
+
* @csspart symbols-wrapper - The wrapper that holds all symbols.
|
|
23
|
+
* @csspart large - A part responsible for the symbols size.
|
|
24
|
+
* @csspart medium - A part responsible for the symbols size.
|
|
25
|
+
* @csspart small- A part responsible for the symbols size.
|
|
26
|
+
*/
|
|
27
|
+
export default class IgcRatingComponent extends IgcRatingComponent_base {
|
|
28
|
+
static readonly tagName = "igc-rating";
|
|
29
|
+
static styles: import("lit").CSSResult[];
|
|
30
|
+
protected container: HTMLElement;
|
|
31
|
+
protected ratingSymbols: Array<IgcRatingSymbolComponent>;
|
|
32
|
+
protected hoverValue: number;
|
|
33
|
+
protected hoverState: boolean;
|
|
34
|
+
protected get isInteractive(): boolean;
|
|
35
|
+
protected get hasProjectedSymbols(): boolean;
|
|
36
|
+
protected get isLTR(): boolean;
|
|
37
|
+
protected get valueText(): string | number;
|
|
38
|
+
/** The maximum value for the rating */
|
|
39
|
+
max: number;
|
|
40
|
+
/** The minimum value change allowed. */
|
|
41
|
+
step: number;
|
|
42
|
+
/** The symbol which the rating will display. */
|
|
43
|
+
symbol: string;
|
|
44
|
+
/** The name attribute of the control */
|
|
45
|
+
name: string;
|
|
46
|
+
/** The label of the control. */
|
|
47
|
+
label: string;
|
|
48
|
+
/**
|
|
49
|
+
* A format string which sets aria-valuetext. All instances of '{0}' will be replaced
|
|
50
|
+
* with the current value of the control.
|
|
51
|
+
* Important for screen-readers and useful for localization.
|
|
52
|
+
*/
|
|
53
|
+
valueFormat: string;
|
|
54
|
+
/** The current value of the component */
|
|
55
|
+
value: number;
|
|
56
|
+
/** Sets the disabled state of the component */
|
|
57
|
+
disabled: boolean;
|
|
58
|
+
/** Sets hover preview behavior for the component */
|
|
59
|
+
hoverPreview: boolean;
|
|
60
|
+
/** Sets the readonly state of the component */
|
|
61
|
+
readonly: boolean;
|
|
62
|
+
protected handleMaxChange(): void;
|
|
63
|
+
protected handleValueChange(): void;
|
|
64
|
+
protected handlePrecisionChange(): void;
|
|
65
|
+
constructor();
|
|
66
|
+
protected handleClick({ clientX }: MouseEvent): void;
|
|
67
|
+
protected handleMouseMove({ clientX }: MouseEvent): void;
|
|
68
|
+
protected handleMouseEnter(): void;
|
|
69
|
+
protected handleMouseLeave(): void;
|
|
70
|
+
protected handleKeyDown({ key }: KeyboardEvent): void;
|
|
71
|
+
protected handleSlotChange(): void;
|
|
72
|
+
protected calcNewValue(x: number): number;
|
|
73
|
+
protected getPrecision(num: number): number;
|
|
74
|
+
protected round(value: number): number;
|
|
75
|
+
/**
|
|
76
|
+
* Increments the value of the control by `n` steps multiplied by the
|
|
77
|
+
* step factor.
|
|
78
|
+
*/
|
|
79
|
+
stepUp(n?: number): void;
|
|
80
|
+
/**
|
|
81
|
+
* Decrements the value of the control by `n` steps multiplied by
|
|
82
|
+
* the step factor.
|
|
83
|
+
*/
|
|
84
|
+
stepDown(n?: number): void;
|
|
85
|
+
protected renderSymbols(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
|
|
86
|
+
protected renderProjected(): import("lit-html").TemplateResult<1>;
|
|
87
|
+
protected renderFractionWrapper(styles: {
|
|
88
|
+
width: string;
|
|
89
|
+
}): import("lit-html").TemplateResult<1>;
|
|
90
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
91
|
+
}
|
|
92
|
+
declare global {
|
|
93
|
+
interface HTMLElementTagNameMap {
|
|
94
|
+
'igc-rating': IgcRatingComponent;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `[part~=label]{font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.375rem;padding-inline-start:.375rem}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=fraction] [part~=symbols-wrapper]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;
|
|
3
|
+
//# sourceMappingURL=rating.fluent.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.fluent.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,k0BAAk0B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=label]{font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.375rem;padding-inline-start:.375rem}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=fraction] [part~=symbols-wrapper]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `[part~=label]{font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.3125rem;padding-inline-start:.3125rem}`;
|
|
3
|
+
//# sourceMappingURL=rating.indigo.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rating.indigo.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kgBAAkgB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=label]{font-family:var(--igc-body-1-font-family);font-weight:var(--igc-body-1-font-weight);font-size:var(--igc-body-1-font-size);font-style:var(--igc-body-1-font-style);letter-spacing:var(--igc-body-1-letter-spacing);text-transform:var(--igc-body-1-text-transform);line-height:var(--igc-body-1-line-height);margin-top:var(--igc-body-1-margin-top);margin-bottom:var(--igc-body-1-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-padding-start:.3125rem;padding-inline-start:.3125rem}`;\n"]}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
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
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, nothing } from 'lit';
|
|
8
|
+
import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
|
|
9
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
10
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { watch } from '../common/decorators/watch';
|
|
12
|
+
import { EventEmitterMixin } from '../common/mixins/event-emitter';
|
|
13
|
+
import { SizableMixin } from '../common/mixins/sizable';
|
|
14
|
+
import { styles } from './rating.base.css';
|
|
15
|
+
import { styles as bootstrap } from './rating.bootstrap.css';
|
|
16
|
+
import { styles as fluent } from './rating.fluent.css';
|
|
17
|
+
import { styles as indigo } from './rating.indigo.css';
|
|
18
|
+
import { clamp } from '../common/util';
|
|
19
|
+
import { themes } from '../../theming';
|
|
20
|
+
let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
|
|
21
|
+
constructor() {
|
|
22
|
+
super();
|
|
23
|
+
this.hoverValue = -1;
|
|
24
|
+
this.hoverState = false;
|
|
25
|
+
this.max = 5;
|
|
26
|
+
this.step = 1;
|
|
27
|
+
this.symbol = '⭐';
|
|
28
|
+
this.value = 0;
|
|
29
|
+
this.disabled = false;
|
|
30
|
+
this.hoverPreview = false;
|
|
31
|
+
this.readonly = false;
|
|
32
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
|
33
|
+
}
|
|
34
|
+
get isInteractive() {
|
|
35
|
+
return !(this.readonly || this.disabled);
|
|
36
|
+
}
|
|
37
|
+
get hasProjectedSymbols() {
|
|
38
|
+
return this.ratingSymbols.length > 0;
|
|
39
|
+
}
|
|
40
|
+
get isLTR() {
|
|
41
|
+
return (window.getComputedStyle(this).getPropertyValue('direction') === 'ltr');
|
|
42
|
+
}
|
|
43
|
+
get valueText() {
|
|
44
|
+
return this.valueFormat
|
|
45
|
+
? this.valueFormat.replace(/\{0\}/gm, `${this.value}`)
|
|
46
|
+
: this.value;
|
|
47
|
+
}
|
|
48
|
+
handleMaxChange() {
|
|
49
|
+
this.hasProjectedSymbols
|
|
50
|
+
? (this.max = this.ratingSymbols.length)
|
|
51
|
+
: (this.max = Math.max(0, this.max));
|
|
52
|
+
if (this.max < this.value) {
|
|
53
|
+
this.value = this.max;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
handleValueChange() {
|
|
57
|
+
this.value = clamp(this.value, 0, this.max);
|
|
58
|
+
}
|
|
59
|
+
handlePrecisionChange() {
|
|
60
|
+
this.step = clamp(this.step, 0.001, 1);
|
|
61
|
+
}
|
|
62
|
+
handleClick({ clientX }) {
|
|
63
|
+
if (!this.isInteractive) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const value = this.calcNewValue(clientX);
|
|
67
|
+
this.value === value ? (this.value = 0) : (this.value = value);
|
|
68
|
+
this.emitEvent('igcChange', { detail: this.value });
|
|
69
|
+
}
|
|
70
|
+
handleMouseMove({ clientX }) {
|
|
71
|
+
if (!this.isInteractive) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const value = this.calcNewValue(clientX);
|
|
75
|
+
if (this.hoverValue !== value) {
|
|
76
|
+
this.hoverValue = value;
|
|
77
|
+
this.emitEvent('igcHover', { detail: this.hoverValue });
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
handleMouseEnter() {
|
|
81
|
+
if (this.isInteractive) {
|
|
82
|
+
this.hoverState = true;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
handleMouseLeave() {
|
|
86
|
+
if (this.isInteractive) {
|
|
87
|
+
this.hoverState = false;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
handleKeyDown({ key }) {
|
|
91
|
+
if (!this.isInteractive) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
let result = this.value;
|
|
95
|
+
switch (key) {
|
|
96
|
+
case 'ArrowUp':
|
|
97
|
+
case 'ArrowRight':
|
|
98
|
+
result += this.isLTR ? this.step : -this.step;
|
|
99
|
+
break;
|
|
100
|
+
case 'ArrowDown':
|
|
101
|
+
case 'ArrowLeft':
|
|
102
|
+
result -= this.isLTR ? this.step : -this.step;
|
|
103
|
+
break;
|
|
104
|
+
case 'Home':
|
|
105
|
+
result = this.step;
|
|
106
|
+
break;
|
|
107
|
+
case 'End':
|
|
108
|
+
result = this.max;
|
|
109
|
+
break;
|
|
110
|
+
default:
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
this.value = clamp(result, 0, this.max);
|
|
114
|
+
if (result === this.value) {
|
|
115
|
+
this.emitEvent('igcChange', { detail: this.value });
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
handleSlotChange() {
|
|
119
|
+
if (this.hasProjectedSymbols) {
|
|
120
|
+
this.max = this.ratingSymbols.length;
|
|
121
|
+
}
|
|
122
|
+
this.requestUpdate();
|
|
123
|
+
}
|
|
124
|
+
calcNewValue(x) {
|
|
125
|
+
const { width, left, right } = this.container.getBoundingClientRect();
|
|
126
|
+
const percent = this.isLTR ? (x - left) / width : (right - x) / width;
|
|
127
|
+
const value = this.round(this.max * percent + this.step / 2);
|
|
128
|
+
return clamp(value, this.step, this.max);
|
|
129
|
+
}
|
|
130
|
+
getPrecision(num) {
|
|
131
|
+
const [_, decimal] = num.toString().split('.');
|
|
132
|
+
return decimal ? decimal.length : 0;
|
|
133
|
+
}
|
|
134
|
+
round(value) {
|
|
135
|
+
value = Math.round(value / this.step) * this.step;
|
|
136
|
+
return Number(value.toFixed(this.getPrecision(this.step)));
|
|
137
|
+
}
|
|
138
|
+
stepUp(n = 1) {
|
|
139
|
+
this.value += this.round(n * this.step);
|
|
140
|
+
}
|
|
141
|
+
stepDown(n = 1) {
|
|
142
|
+
this.value -= this.round(n * this.step);
|
|
143
|
+
}
|
|
144
|
+
*renderSymbols() {
|
|
145
|
+
for (let i = 0; i < this.max; i++) {
|
|
146
|
+
yield html `<span part="symbol ${this.size}">${this.symbol}</span>`;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
renderProjected() {
|
|
150
|
+
return html `${this.ratingSymbols.map((each) => {
|
|
151
|
+
const clone = each.cloneNode(true);
|
|
152
|
+
clone.setAttribute('part', `symbol ${this.size}`);
|
|
153
|
+
return clone;
|
|
154
|
+
})}`;
|
|
155
|
+
}
|
|
156
|
+
renderFractionWrapper(styles) {
|
|
157
|
+
return html `<div
|
|
158
|
+
@click=${this.handleClick}
|
|
159
|
+
@mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}
|
|
160
|
+
@mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}
|
|
161
|
+
@mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}
|
|
162
|
+
>
|
|
163
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
164
|
+
|
|
165
|
+
<div style=${styleMap(styles)} part="fraction ${this.size}">
|
|
166
|
+
<div part="symbols-wrapper">
|
|
167
|
+
${this.hasProjectedSymbols
|
|
168
|
+
? this.renderProjected()
|
|
169
|
+
: this.renderSymbols()}
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div part="symbols-wrapper">
|
|
173
|
+
${this.hasProjectedSymbols
|
|
174
|
+
? this.renderProjected()
|
|
175
|
+
: this.renderSymbols()}
|
|
176
|
+
</div>
|
|
177
|
+
</div>`;
|
|
178
|
+
}
|
|
179
|
+
render() {
|
|
180
|
+
var _a;
|
|
181
|
+
const value = this.hoverState ? this.hoverValue : this.value;
|
|
182
|
+
const styles = { width: `${Math.round((value / this.max) * 100)}%` };
|
|
183
|
+
return html `
|
|
184
|
+
<label part="label ${this.size}">${this.label}</label>
|
|
185
|
+
<div
|
|
186
|
+
part="base"
|
|
187
|
+
role="slider"
|
|
188
|
+
tabindex=${ifDefined(this.disabled ? undefined : 0)}
|
|
189
|
+
aria-label=${(_a = this.label) !== null && _a !== void 0 ? _a : nothing}
|
|
190
|
+
aria-valuemin="0"
|
|
191
|
+
aria-valuenow=${this.value}
|
|
192
|
+
aria-valuemax=${this.max}
|
|
193
|
+
aria-valuetext=${this.valueText}
|
|
194
|
+
>
|
|
195
|
+
${this.renderFractionWrapper(styles)}
|
|
196
|
+
</div>
|
|
197
|
+
`;
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
IgcRatingComponent.tagName = 'igc-rating';
|
|
201
|
+
IgcRatingComponent.styles = [styles];
|
|
202
|
+
__decorate([
|
|
203
|
+
query('[part="base"]', true)
|
|
204
|
+
], IgcRatingComponent.prototype, "container", void 0);
|
|
205
|
+
__decorate([
|
|
206
|
+
queryAssignedElements({ selector: 'igc-rating-symbol' })
|
|
207
|
+
], IgcRatingComponent.prototype, "ratingSymbols", void 0);
|
|
208
|
+
__decorate([
|
|
209
|
+
state()
|
|
210
|
+
], IgcRatingComponent.prototype, "hoverValue", void 0);
|
|
211
|
+
__decorate([
|
|
212
|
+
state()
|
|
213
|
+
], IgcRatingComponent.prototype, "hoverState", void 0);
|
|
214
|
+
__decorate([
|
|
215
|
+
property({ type: Number })
|
|
216
|
+
], IgcRatingComponent.prototype, "max", void 0);
|
|
217
|
+
__decorate([
|
|
218
|
+
property({ type: Number })
|
|
219
|
+
], IgcRatingComponent.prototype, "step", void 0);
|
|
220
|
+
__decorate([
|
|
221
|
+
property()
|
|
222
|
+
], IgcRatingComponent.prototype, "symbol", void 0);
|
|
223
|
+
__decorate([
|
|
224
|
+
property()
|
|
225
|
+
], IgcRatingComponent.prototype, "name", void 0);
|
|
226
|
+
__decorate([
|
|
227
|
+
property()
|
|
228
|
+
], IgcRatingComponent.prototype, "label", void 0);
|
|
229
|
+
__decorate([
|
|
230
|
+
property({ attribute: 'value-format' })
|
|
231
|
+
], IgcRatingComponent.prototype, "valueFormat", void 0);
|
|
232
|
+
__decorate([
|
|
233
|
+
property({ type: Number })
|
|
234
|
+
], IgcRatingComponent.prototype, "value", void 0);
|
|
235
|
+
__decorate([
|
|
236
|
+
property({ type: Boolean, reflect: true })
|
|
237
|
+
], IgcRatingComponent.prototype, "disabled", void 0);
|
|
238
|
+
__decorate([
|
|
239
|
+
property({ type: Boolean, reflect: true, attribute: 'hover-preview' })
|
|
240
|
+
], IgcRatingComponent.prototype, "hoverPreview", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
property({ type: Boolean, reflect: true })
|
|
243
|
+
], IgcRatingComponent.prototype, "readonly", void 0);
|
|
244
|
+
__decorate([
|
|
245
|
+
watch('max')
|
|
246
|
+
], IgcRatingComponent.prototype, "handleMaxChange", null);
|
|
247
|
+
__decorate([
|
|
248
|
+
watch('value')
|
|
249
|
+
], IgcRatingComponent.prototype, "handleValueChange", null);
|
|
250
|
+
__decorate([
|
|
251
|
+
watch('step')
|
|
252
|
+
], IgcRatingComponent.prototype, "handlePrecisionChange", null);
|
|
253
|
+
IgcRatingComponent = __decorate([
|
|
254
|
+
themes({ fluent, bootstrap, indigo })
|
|
255
|
+
], IgcRatingComponent);
|
|
256
|
+
export default IgcRatingComponent;
|
|
257
|
+
//# sourceMappingURL=rating.js.map
|