igniteui-webcomponents 3.3.0-beta.0 → 3.3.0

package/components/rating/rating.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[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="symbols-wrapper selected"],[part~=fraction]{position:absolute !important;overflow:hidden;inset-inline-start:0 !important;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~=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}[part="symbol small"]{font-size:var(--symbol-size, 1.125rem)}[part="symbol medium"]{font-size:var(--symbol-size, 1.5rem)}[part="symbol large"]{font-size:var(--symbol-size, 2.25rem)}[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="symbols-wrapper selected"]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part="symbols-wrapper selected"] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}: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="symbols-wrapper selected"]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:var(--symbol-size, 2.25rem);min-height:var(--symbol-size, 2.25rem);line-height:var(--symbol-size, 2.25rem);width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem)}[part~=large] igc-icon{width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem);font-size:var(--symbol-size, 2.25rem)}[part~=medium]{min-width:var(--symbol-size, 1.5rem);min-height:var(--symbol-size, 1.5rem);line-height:var(--symbol-size, 1.5rem);width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem)}[part~=medium] igc-icon{width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem);font-size:var(--symbol-size, 1.5rem)}[part~=small]{min-width:var(--symbol-size, 1.125rem);min-height:var(--symbol-size, 1.125rem);line-height:var(--symbol-size, 1.125rem);width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem)}[part~=small] igc-icon{width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem);font-size:var(--symbol-size, 1.125rem)}[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(var(--symbol-size, 2.25rem) + (0.125rem * 2));height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2))}[part="fraction medium"]{min-height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2))}[part="fraction small"]{min-height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2))}`;
+export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{--symbol-full-color: hsla(var(--igc-warn-500), var(--igc-warn-a));--symbol-empty-color: hsla(var(--igc-gray-600), var(--igc-gray-a));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}:host([size=small]){--symbol-size: 1.125rem}:host([size=medium]){--symbol-size: 1.5rem}:host([size=large]){--symbol-size: 2.25rem}[part=base]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.25rem}[part~=symbols]{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;inset-inline-start:0}[part~=value-label]{font-family:var(--igc-subtitle-font-family);font-weight:var(--igc-subtitle-font-weight);font-size:var(--igc-subtitle-font-size);font-style:var(--igc-subtitle-font-style);letter-spacing:var(--igc-subtitle-letter-spacing);text-transform:var(--igc-subtitle-text-transform);line-height:var(--igc-subtitle-line-height);margin-top:var(--igc-subtitle-margin-top);margin-bottom:var(--igc-subtitle-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}[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:.25rem;padding-inline-start:.25rem;height:auto;width:auto;min-height:0;min-width:0;margin:0}:host(:not([disabled],[readonly])) [part~=symbols]{cursor:pointer}:host([disabled]){--symbol-full-color: hsla(var(--igc-warn-200), var(--igc-warn-a));--symbol-empty-color: hsla(var(--igc-gray-400), var(--igc-gray-a));--symbol-full-filter: grayscale(50%);--symbol-empty-filter: grayscale(100%) opacity(50%)}:host([disabled]) [part~=value-label],:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=symbols]{cursor:initial}`;
 //# sourceMappingURL=rating.base.css.js.map

package/components/rating/rating.base.css.js.map

@@ -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,i3JAAi3J,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, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[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=\"symbols-wrapper selected\"],[part~=fraction]{position:absolute !important;overflow:hidden;inset-inline-start:0 !important;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~=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}[part=\"symbol small\"]{font-size:var(--symbol-size, 1.125rem)}[part=\"symbol medium\"]{font-size:var(--symbol-size, 1.5rem)}[part=\"symbol large\"]{font-size:var(--symbol-size, 2.25rem)}[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=\"symbols-wrapper selected\"]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part=\"symbols-wrapper selected\"] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}: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=\"symbols-wrapper selected\"]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:var(--symbol-size, 2.25rem);min-height:var(--symbol-size, 2.25rem);line-height:var(--symbol-size, 2.25rem);width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem)}[part~=large] igc-icon{width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem);font-size:var(--symbol-size, 2.25rem)}[part~=medium]{min-width:var(--symbol-size, 1.5rem);min-height:var(--symbol-size, 1.5rem);line-height:var(--symbol-size, 1.5rem);width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem)}[part~=medium] igc-icon{width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem);font-size:var(--symbol-size, 1.5rem)}[part~=small]{min-width:var(--symbol-size, 1.125rem);min-height:var(--symbol-size, 1.125rem);line-height:var(--symbol-size, 1.125rem);width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem)}[part~=small] igc-icon{width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem);font-size:var(--symbol-size, 1.125rem)}[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(var(--symbol-size, 2.25rem) + (0.125rem * 2));height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2))}[part=\"fraction medium\"]{min-height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2))}[part=\"fraction small\"]{min-height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2))}`;\n"]}
+{"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,4yGAA4yG,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, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{--symbol-full-color: hsla(var(--igc-warn-500), var(--igc-warn-a));--symbol-empty-color: hsla(var(--igc-gray-600), var(--igc-gray-a));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}:host([size=small]){--symbol-size: 1.125rem}:host([size=medium]){--symbol-size: 1.5rem}:host([size=large]){--symbol-size: 2.25rem}[part=base]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.25rem}[part~=symbols]{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;inset-inline-start:0}[part~=value-label]{font-family:var(--igc-subtitle-font-family);font-weight:var(--igc-subtitle-font-weight);font-size:var(--igc-subtitle-font-size);font-style:var(--igc-subtitle-font-style);letter-spacing:var(--igc-subtitle-letter-spacing);text-transform:var(--igc-subtitle-text-transform);line-height:var(--igc-subtitle-line-height);margin-top:var(--igc-subtitle-margin-top);margin-bottom:var(--igc-subtitle-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}[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:.25rem;padding-inline-start:.25rem;height:auto;width:auto;min-height:0;min-width:0;margin:0}:host(:not([disabled],[readonly])) [part~=symbols]{cursor:pointer}:host([disabled]){--symbol-full-color: hsla(var(--igc-warn-200), var(--igc-warn-a));--symbol-empty-color: hsla(var(--igc-gray-400), var(--igc-gray-a));--symbol-full-filter: grayscale(50%);--symbol-empty-filter: grayscale(100%) opacity(50%)}:host([disabled]) [part~=value-label],:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part~=symbols]{cursor:initial}`;\n"]}

package/components/rating/rating.bootstrap.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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}`;
+export const styles = css `[part=base]{gap:.4375rem}[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))}[part~=value-label]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}`;
 //# sourceMappingURL=rating.bootstrap.css.js.map

package/components/rating/rating.bootstrap.css.js.map

@@ -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"]}
+{"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,u6BAAu6B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base]{gap:.4375rem}[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))}[part~=value-label]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}`;\n"]}

package/components/rating/rating.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
-import type IgcRatingSymbolComponent from './rating-symbol';
+import IgcRatingSymbolComponent from './rating-symbol.js';
 export interface IgcRatingEventMap {
     igcChange: CustomEvent<number>;
     igcHover: CustomEvent<number>;
@@ -17,17 +17,23 @@ declare const IgcRatingComponent_base: Constructor<import("../common/mixins/siza
  *
  * @csspart base - The main wrapper which holds all of the rating elements.
  * @csspart label - The label part.
- * @csspart symbol - The part for a single symbol.
- * @csspart fraction -The part for the selected symbols.
- * @csspart symbols-wrapper - The wrapper that holds all symbols.
- * @csspart large - A part responsible for the symbols size.
- * @csspart medium - A part responsible for the symbols size.
- * @csspart small- A part responsible for the symbols size.
+ * @csspart value-label - The value label part.
+ * @csspart symbols - A wrapper for all rating symbols.
+ * @csspart symbol - The part of the encapsulated default symbol.
+ * @csspart full - The part of the encapsulated full symbols.
+ * @csspart empty - The part of the encapsulated empty symbols.
+ *
+ * @cssproperty --symbol-size - The size of the symbols.
+ * @cssproperty --symbol-full-color - The color of the filled symbol.
+ * @cssproperty --symbol-empty-color - The color of the empty symbol.
+ * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.
+ * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.
  */
 export default class IgcRatingComponent extends IgcRatingComponent_base {
     static readonly tagName = "igc-rating";
     static styles: import("lit").CSSResult[];
     protected container: HTMLElement;
+    protected valueLabel: Array<Node>;
     protected ratingSymbols: Array<IgcRatingSymbolComponent>;
     protected hoverValue: number;
     protected hoverState: boolean;
@@ -39,8 +45,6 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
     max: number;
     /** The minimum value change allowed. */
     step: number;
-    /** The symbol which the rating will display. */
-    symbol: string;
     /** The name attribute of the control */
     name: string;
     /** The label of the control. */
@@ -59,9 +63,12 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
     hoverPreview: boolean;
     /** Sets the readonly state of the component */
     readonly: boolean;
+    /** Toggles single selection visual mode. */
+    single: boolean;
     protected handleMaxChange(): void;
     protected handleValueChange(): void;
     protected handlePrecisionChange(): void;
+    protected handleSelectionChange(): void;
     constructor();
     protected handleClick({ clientX }: MouseEvent): void;
     protected handleMouseMove({ clientX }: MouseEvent): void;
@@ -72,6 +79,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
     protected calcNewValue(x: number): number;
     protected getPrecision(num: number): number;
     protected round(value: number): number;
+    protected clipSymbol(index: number, direction: 'forward' | 'backward'): string;
     /**
      * Increments the value of the control by `n` steps multiplied by the
      * step factor.
@@ -83,10 +91,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      */
     stepDown(n?: number): void;
     protected renderSymbols(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
-    protected renderProjected(): import("lit-html").TemplateResult<1>;
-    protected renderFractionWrapper(styles: {
-        width: string;
-    }): import("lit-html").TemplateResult<1>;
+    protected clipProjected(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/rating/rating.fluent.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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="symbols-wrapper selected"]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;
+export const styles = css `[part=base],:host{gap:.375rem}[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))}[part~=value-label]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([disabled]) [part~=value-label],:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part="symbols-wrapper selected"]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;
 //# sourceMappingURL=rating.fluent.css.js.map

package/components/rating/rating.fluent.css.js.map

@@ -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,2zBAA2zB,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=\"symbols-wrapper selected\"]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;\n"]}
+{"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,6wCAA6wC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base],:host{gap:.375rem}[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))}[part~=value-label]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host([disabled]) [part~=value-label],:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part=\"symbols-wrapper selected\"]{color:hsla(var(--igc-gray-500), var(--igc-gray-a))}`;\n"]}

package/components/rating/rating.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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}`;
+export const styles = css `:host{gap:.3125rem}[part=base]{gap:.5rem}[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))}[part~=value-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))}`;
 //# sourceMappingURL=rating.indigo.css.js.map

package/components/rating/rating.indigo.css.js.map

@@ -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"]}
+{"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,u7BAAu7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{gap:.3125rem}[part=base]{gap:.5rem}[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))}[part~=value-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))}`;\n"]}

package/components/rating/rating.js

@@ -5,18 +5,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
+import { clamp } from '../common/util.js';
 import { styles } from './rating.base.css.js';
 import { styles as bootstrap } from './rating.bootstrap.css.js';
 import { styles as fluent } from './rating.fluent.css.js';
 import { styles as indigo } from './rating.indigo.css.js';
-import { clamp } from '../common/util.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcRatingSymbolComponent from './rating-symbol.js';
+import IgcIconComponent from '../icon/icon.js';
+defineComponents(IgcRatingSymbolComponent, IgcIconComponent);
 let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super();
@@ -24,11 +28,11 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         this.hoverState = false;
         this.max = 5;
         this.step = 1;
-        this.symbol = '⭐';
         this.value = 0;
         this.disabled = false;
         this.hoverPreview = false;
         this.readonly = false;
+        this.single = false;
         this.addEventListener('keydown', this.handleKeyDown);
     }
     get isInteractive() {
@@ -57,7 +61,13 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         this.value = clamp(this.value, 0, this.max);
     }
     handlePrecisionChange() {
-        this.step = clamp(this.step, 0.001, 1);
+        this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;
+    }
+    handleSelectionChange() {
+        if (this.single) {
+            this.step = 1;
+            this.value = Math.ceil(this.value);
+        }
     }
     handleClick({ clientX }) {
         if (!this.isInteractive) {
@@ -135,6 +145,22 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         value = Math.round(value / this.step) * this.step;
         return Number(value.toFixed(this.getPrecision(this.step)));
     }
+    clipSymbol(index, direction) {
+        const value = this.hoverState ? this.hoverValue : this.value;
+        const progress = index + 1 - value;
+        const exclusive = progress === 0 || this.value === index + 1 ? 0 : 1;
+        const selection = this.single ? exclusive : progress;
+        const activate = (p) => clamp(p * 100, 0, 100);
+        const forward = `inset(0 ${activate(this.isLTR ? selection : 1 - selection)}% 0 0)`;
+        const backward = `inset(0 0 0 ${activate(this.isLTR ? 1 - selection : selection)}%)`;
+        switch (direction) {
+            case 'backward':
+                return this.isLTR ? backward : forward;
+            case 'forward':
+            default:
+                return this.isLTR ? forward : backward;
+        }
+    }
     stepUp(n = 1) {
         this.value += this.round(n * this.step);
     }
@@ -143,45 +169,41 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
     }
     *renderSymbols() {
         for (let i = 0; i < this.max; i++) {
-            yield html `<span part="symbol ${this.size}">${this.symbol}</span>`;
+            yield html `<igc-rating-symbol exportparts="symbol, full, empty">
+        <igc-icon
+          collection="internal"
+          name="star"
+          style=${styleMap({ clipPath: this.clipSymbol(i, 'forward') })}
+        ></igc-icon>
+        <igc-icon
+          collection="internal"
+          name="star_border"
+          style=${styleMap({ clipPath: this.clipSymbol(i, 'backward') })}
+          slot="empty"
+        ></igc-icon>
+      </igc-rating-symbol>`;
         }
     }
-    renderProjected() {
-        return html `${this.ratingSymbols.map((each) => {
-            const clone = each.cloneNode(true);
-            clone.setAttribute('part', `symbol ${this.size}`);
-            return clone;
-        })}`;
-    }
-    renderFractionWrapper(styles) {
-        return html `<div
-      @click=${this.handleClick}
-      @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}
-      @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}
-      @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}
-    >
-      <slot @slotchange=${this.handleSlotChange}></slot>
-
-      <div style=${styleMap(styles)} part="fraction ${this.size}">
-        <div part="symbols-wrapper selected">
-          ${this.hasProjectedSymbols
-            ? this.renderProjected()
-            : this.renderSymbols()}
-        </div>
-      </div>
-      <div part="symbols-wrapper">
-        ${this.hasProjectedSymbols
-            ? this.renderProjected()
-            : this.renderSymbols()}
-      </div>
-    </div>`;
+    clipProjected() {
+        if (this.hasProjectedSymbols) {
+            this.ratingSymbols.forEach((symbol, i) => {
+                var _a, _b;
+                const full = (_a = symbol.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="symbol full"]');
+                const empty = (_b = symbol.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[part="symbol empty"]');
+                if (full) {
+                    full.style.clipPath = this.clipSymbol(i, 'forward');
+                }
+                if (empty) {
+                    empty.style.clipPath = this.clipSymbol(i, 'backward');
+                }
+            });
+        }
     }
     render() {
         var _a;
-        const value = this.hoverState ? this.hoverValue : this.value;
-        const styles = { width: `${Math.round((value / this.max) * 100)}%` };
+        this.clipProjected();
         return html `
-      <label part="label ${this.size}">${this.label}</label>
+      <label part="label" ?hidden=${!this.label}>${this.label}</label>
       <div
         part="base"
         role="slider"
@@ -192,7 +214,21 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         aria-valuemax=${this.max}
         aria-valuetext=${this.valueText}
       >
-        ${this.renderFractionWrapper(styles)}
+        <div
+          aria-hidden="true"
+          part="symbols"
+          @click=${this.handleClick}
+          @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}
+          @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}
+          @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}
+        >
+          <slot @slotchange=${this.handleSlotChange}>
+            ${this.renderSymbols()}
+          </slot>
+        </div>
+        <label part="value-label" ?hidden=${this.valueLabel.length === 0}>
+          <slot name="value-label"></slot>
+        </label>
       </div>
     `;
     }
@@ -200,8 +236,11 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
 IgcRatingComponent.tagName = 'igc-rating';
 IgcRatingComponent.styles = [styles];
 __decorate([
-    query('[part="base"]', true)
+    query('[part="symbols"]', true)
 ], IgcRatingComponent.prototype, "container", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'value-label', flatten: true })
+], IgcRatingComponent.prototype, "valueLabel", void 0);
 __decorate([
     queryAssignedElements({ selector: 'igc-rating-symbol' })
 ], IgcRatingComponent.prototype, "ratingSymbols", void 0);
@@ -217,9 +256,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IgcRatingComponent.prototype, "step", void 0);
-__decorate([
-    property()
-], IgcRatingComponent.prototype, "symbol", void 0);
 __decorate([
     property()
 ], IgcRatingComponent.prototype, "name", void 0);
@@ -241,6 +277,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcRatingComponent.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcRatingComponent.prototype, "single", void 0);
 __decorate([
     watch('max')
 ], IgcRatingComponent.prototype, "handleMaxChange", null);
@@ -250,6 +289,9 @@ __decorate([
 __decorate([
     watch('step')
 ], IgcRatingComponent.prototype, "handlePrecisionChange", null);
+__decorate([
+    watch('single')
+], IgcRatingComponent.prototype, "handleSelectionChange", null);
 IgcRatingComponent = __decorate([
     themes({ fluent, bootstrap, indigo })
 ], IgcRatingComponent);

package/components/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './rating.base.css.js';\nimport { styles as bootstrap } from './rating.bootstrap.css.js';\nimport { styles as fluent } from './rating.fluent.css.js';\nimport { styles as indigo } from './rating.indigo.css.js';\nimport { clamp } from '../common/util.js';\nimport type IgcRatingSymbolComponent from './rating-symbol';\nimport { themes } from '../../theming/theming-decorator.js';\n\nexport interface IgcRatingEventMap {\n  igcChange: CustomEvent<number>;\n  igcHover: CustomEvent<number>;\n}\n\n/**\n * Rating provides insight regarding others' opinions and experiences,\n * and can allow the user to submit a rating of their own\n *\n * @element igc-rating\n *\n * @fires igcChange - Emitted when the value of the control changes.\n * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.\n *\n * @csspart base - The main wrapper which holds all of the rating elements.\n * @csspart label - The label part.\n * @csspart symbol - The part for a single symbol.\n * @csspart fraction -The part for the selected symbols.\n * @csspart symbols-wrapper - The wrapper that holds all symbols.\n * @csspart large - A part responsible for the symbols size.\n * @csspart medium - A part responsible for the symbols size.\n * @csspart small- A part responsible for the symbols size.\n */\n@themes({ fluent, bootstrap, indigo })\nexport default class IgcRatingComponent extends SizableMixin(\n  EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-rating';\n\n  public static styles = [styles];\n\n  @query('[part=\"base\"]', true)\n  protected container!: HTMLElement;\n\n  @queryAssignedElements({ selector: 'igc-rating-symbol' })\n  protected ratingSymbols!: Array<IgcRatingSymbolComponent>;\n\n  @state()\n  protected hoverValue = -1;\n\n  @state()\n  protected hoverState = false;\n\n  protected get isInteractive() {\n    return !(this.readonly || this.disabled);\n  }\n\n  protected get hasProjectedSymbols() {\n    return this.ratingSymbols.length > 0;\n  }\n\n  protected get isLTR() {\n    return (\n      window.getComputedStyle(this).getPropertyValue('direction') === 'ltr'\n    );\n  }\n\n  protected get valueText() {\n    return this.valueFormat\n      ? this.valueFormat.replace(/\\{0\\}/gm, `${this.value}`)\n      : this.value;\n  }\n\n  /** The maximum value for the rating */\n  @property({ type: Number })\n  public max = 5;\n\n  /** The minimum value change allowed. */\n  @property({ type: Number })\n  public step = 1;\n\n  /** The symbol which the rating will display. */\n  @property()\n  public symbol = '⭐';\n\n  /** The name attribute of the control */\n  @property()\n  public name!: string;\n\n  /** The label of the control. */\n  @property()\n  public label!: string;\n\n  /**\n   * A format string which sets aria-valuetext. All instances of '{0}' will be replaced\n   * with the current value of the control.\n   * Important for screen-readers and useful for localization.\n   */\n  @property({ attribute: 'value-format' })\n  public valueFormat!: string;\n\n  /** The current value of the component */\n  @property({ type: Number })\n  public value = 0;\n\n  /** Sets the disabled state of the component */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets hover preview behavior for the component */\n  @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n  public hoverPreview = false;\n\n  /** Sets the readonly state of the component */\n  @property({ type: Boolean, reflect: true })\n  public readonly = false;\n\n  @watch('max')\n  protected handleMaxChange() {\n    this.hasProjectedSymbols\n      ? (this.max = this.ratingSymbols.length)\n      : (this.max = Math.max(0, this.max));\n    if (this.max < this.value) {\n      this.value = this.max;\n    }\n  }\n\n  @watch('value')\n  protected handleValueChange() {\n    this.value = clamp(this.value, 0, this.max);\n  }\n\n  @watch('step')\n  protected handlePrecisionChange() {\n    this.step = clamp(this.step, 0.001, 1);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  protected handleClick({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n    this.value === value ? (this.value = 0) : (this.value = value);\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected handleMouseMove({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n\n    if (this.hoverValue !== value) {\n      // Since mousemove spams a lot, only emit on a value change\n      this.hoverValue = value;\n      this.emitEvent('igcHover', { detail: this.hoverValue });\n    }\n  }\n\n  protected handleMouseEnter() {\n    if (this.isInteractive) {\n      this.hoverState = true;\n    }\n  }\n\n  protected handleMouseLeave() {\n    if (this.isInteractive) {\n      this.hoverState = false;\n    }\n  }\n\n  protected handleKeyDown({ key }: KeyboardEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    let result = this.value;\n\n    switch (key) {\n      case 'ArrowUp':\n      case 'ArrowRight':\n        result += this.isLTR ? this.step : -this.step;\n        break;\n      case 'ArrowDown':\n      case 'ArrowLeft':\n        result -= this.isLTR ? this.step : -this.step;\n        break;\n      case 'Home':\n        result = this.step;\n        break;\n      case 'End':\n        result = this.max;\n        break;\n      default:\n        return;\n    }\n\n    // Verify new value is in bounds and emit\n    this.value = clamp(result, 0, this.max);\n\n    if (result === this.value) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected handleSlotChange() {\n    if (this.hasProjectedSymbols) {\n      this.max = this.ratingSymbols.length;\n    }\n    this.requestUpdate();\n  }\n\n  protected calcNewValue(x: number) {\n    const { width, left, right } = this.container.getBoundingClientRect();\n    const percent = this.isLTR ? (x - left) / width : (right - x) / width;\n    const value = this.round(this.max * percent + this.step / 2);\n\n    return clamp(value, this.step, this.max);\n  }\n\n  protected getPrecision(num: number) {\n    const [_, decimal] = num.toString().split('.');\n    return decimal ? decimal.length : 0;\n  }\n\n  protected round(value: number) {\n    value = Math.round(value / this.step) * this.step;\n    return Number(value.toFixed(this.getPrecision(this.step)));\n  }\n\n  /**\n   * Increments the value of the control by `n` steps multiplied by the\n   * step factor.\n   */\n  public stepUp(n = 1) {\n    this.value += this.round(n * this.step);\n  }\n\n  /**\n   * Decrements the value of the control by `n` steps multiplied by\n   * the step factor.\n   */\n  public stepDown(n = 1) {\n    this.value -= this.round(n * this.step);\n  }\n\n  protected *renderSymbols() {\n    for (let i = 0; i < this.max; i++) {\n      yield html`<span part=\"symbol ${this.size}\">${this.symbol}</span>`;\n    }\n  }\n\n  protected renderProjected() {\n    return html`${this.ratingSymbols.map((each) => {\n      const clone = each.cloneNode(true) as IgcRatingSymbolComponent;\n      clone.setAttribute('part', `symbol ${this.size}`);\n      return clone;\n    })}`;\n  }\n\n  protected renderFractionWrapper(styles: { width: string }) {\n    return html`<div\n      @click=${this.handleClick}\n      @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}\n      @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}\n      @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}\n    >\n      <slot @slotchange=${this.handleSlotChange}></slot>\n\n      <div style=${styleMap(styles)} part=\"fraction ${this.size}\">\n        <div part=\"symbols-wrapper selected\">\n          ${this.hasProjectedSymbols\n            ? this.renderProjected()\n            : this.renderSymbols()}\n        </div>\n      </div>\n      <div part=\"symbols-wrapper\">\n        ${this.hasProjectedSymbols\n          ? this.renderProjected()\n          : this.renderSymbols()}\n      </div>\n    </div>`;\n  }\n\n  protected override render() {\n    const value = this.hoverState ? this.hoverValue : this.value;\n    const styles = { width: `${Math.round((value / this.max) * 100)}%` };\n\n    return html`\n      <label part=\"label ${this.size}\">${this.label}</label>\n      <div\n        part=\"base\"\n        role=\"slider\"\n        tabindex=${ifDefined(this.disabled ? undefined : 0)}\n        aria-label=${this.label ?? nothing}\n        aria-valuemin=\"0\"\n        aria-valuenow=${this.value}\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n      >\n        ${this.renderFractionWrapper(styles)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating': IgcRatingComponent;\n  }\n}\n"]}
+{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { clamp } from '../common/util.js';\nimport { styles } from './rating.base.css.js';\nimport { styles as bootstrap } from './rating.bootstrap.css.js';\nimport { styles as fluent } from './rating.fluent.css.js';\nimport { styles as indigo } from './rating.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcRatingSymbolComponent from './rating-symbol.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcRatingSymbolComponent, IgcIconComponent);\n\nexport interface IgcRatingEventMap {\n  igcChange: CustomEvent<number>;\n  igcHover: CustomEvent<number>;\n}\n\n/**\n * Rating provides insight regarding others' opinions and experiences,\n * and can allow the user to submit a rating of their own\n *\n * @element igc-rating\n *\n * @fires igcChange - Emitted when the value of the control changes.\n * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.\n *\n * @csspart base - The main wrapper which holds all of the rating elements.\n * @csspart label - The label part.\n * @csspart value-label - The value label part.\n * @csspart symbols - A wrapper for all rating symbols.\n * @csspart symbol - The part of the encapsulated default symbol.\n * @csspart full - The part of the encapsulated full symbols.\n * @csspart empty - The part of the encapsulated empty symbols.\n *\n * @cssproperty --symbol-size - The size of the symbols.\n * @cssproperty --symbol-full-color - The color of the filled symbol.\n * @cssproperty --symbol-empty-color - The color of the empty symbol.\n * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.\n * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.\n */\n@themes({ fluent, bootstrap, indigo })\nexport default class IgcRatingComponent extends SizableMixin(\n  EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-rating';\n\n  public static styles = [styles];\n\n  @query('[part=\"symbols\"]', true)\n  protected container!: HTMLElement;\n\n  @queryAssignedNodes({ slot: 'value-label', flatten: true })\n  protected valueLabel!: Array<Node>;\n\n  @queryAssignedElements({ selector: 'igc-rating-symbol' })\n  protected ratingSymbols!: Array<IgcRatingSymbolComponent>;\n\n  @state()\n  protected hoverValue = -1;\n\n  @state()\n  protected hoverState = false;\n\n  protected get isInteractive() {\n    return !(this.readonly || this.disabled);\n  }\n\n  protected get hasProjectedSymbols() {\n    return this.ratingSymbols.length > 0;\n  }\n\n  protected get isLTR() {\n    return (\n      window.getComputedStyle(this).getPropertyValue('direction') === 'ltr'\n    );\n  }\n\n  protected get valueText() {\n    return this.valueFormat\n      ? this.valueFormat.replace(/\\{0\\}/gm, `${this.value}`)\n      : this.value;\n  }\n\n  /** The maximum value for the rating */\n  @property({ type: Number })\n  public max = 5;\n\n  /** The minimum value change allowed. */\n  @property({ type: Number })\n  public step = 1;\n\n  /** The name attribute of the control */\n  @property()\n  public name!: string;\n\n  /** The label of the control. */\n  @property()\n  public label!: string;\n\n  /**\n   * A format string which sets aria-valuetext. All instances of '{0}' will be replaced\n   * with the current value of the control.\n   * Important for screen-readers and useful for localization.\n   */\n  @property({ attribute: 'value-format' })\n  public valueFormat!: string;\n\n  /** The current value of the component */\n  @property({ type: Number })\n  public value = 0;\n\n  /** Sets the disabled state of the component */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets hover preview behavior for the component */\n  @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n  public hoverPreview = false;\n\n  /** Sets the readonly state of the component */\n  @property({ type: Boolean, reflect: true })\n  public readonly = false;\n\n  /** Toggles single selection visual mode. */\n  @property({ type: Boolean })\n  public single = false;\n\n  @watch('max')\n  protected handleMaxChange() {\n    this.hasProjectedSymbols\n      ? (this.max = this.ratingSymbols.length)\n      : (this.max = Math.max(0, this.max));\n    if (this.max < this.value) {\n      this.value = this.max;\n    }\n  }\n\n  @watch('value')\n  protected handleValueChange() {\n    this.value = clamp(this.value, 0, this.max);\n  }\n\n  @watch('step')\n  protected handlePrecisionChange() {\n    this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;\n  }\n\n  @watch('single')\n  protected handleSelectionChange() {\n    if (this.single) {\n      this.step = 1;\n      this.value = Math.ceil(this.value);\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  protected handleClick({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n    this.value === value ? (this.value = 0) : (this.value = value);\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected handleMouseMove({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n\n    if (this.hoverValue !== value) {\n      // Since mousemove spams a lot, only emit on a value change\n      this.hoverValue = value;\n      this.emitEvent('igcHover', { detail: this.hoverValue });\n    }\n  }\n\n  protected handleMouseEnter() {\n    if (this.isInteractive) {\n      this.hoverState = true;\n    }\n  }\n\n  protected handleMouseLeave() {\n    if (this.isInteractive) {\n      this.hoverState = false;\n    }\n  }\n\n  protected handleKeyDown({ key }: KeyboardEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    let result = this.value;\n\n    switch (key) {\n      case 'ArrowUp':\n      case 'ArrowRight':\n        result += this.isLTR ? this.step : -this.step;\n        break;\n      case 'ArrowDown':\n      case 'ArrowLeft':\n        result -= this.isLTR ? this.step : -this.step;\n        break;\n      case 'Home':\n        result = this.step;\n        break;\n      case 'End':\n        result = this.max;\n        break;\n      default:\n        return;\n    }\n\n    // Verify new value is in bounds and emit\n    this.value = clamp(result, 0, this.max);\n\n    if (result === this.value) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected handleSlotChange() {\n    if (this.hasProjectedSymbols) {\n      this.max = this.ratingSymbols.length;\n    }\n    this.requestUpdate();\n  }\n\n  protected calcNewValue(x: number) {\n    const { width, left, right } = this.container.getBoundingClientRect();\n    const percent = this.isLTR ? (x - left) / width : (right - x) / width;\n    const value = this.round(this.max * percent + this.step / 2);\n\n    return clamp(value, this.step, this.max);\n  }\n\n  protected getPrecision(num: number) {\n    const [_, decimal] = num.toString().split('.');\n    return decimal ? decimal.length : 0;\n  }\n\n  protected round(value: number) {\n    value = Math.round(value / this.step) * this.step;\n    return Number(value.toFixed(this.getPrecision(this.step)));\n  }\n\n  protected clipSymbol(index: number, direction: 'forward' | 'backward') {\n    const value = this.hoverState ? this.hoverValue : this.value;\n    const progress = index + 1 - value;\n    const exclusive = progress === 0 || this.value === index + 1 ? 0 : 1;\n    const selection = this.single ? exclusive : progress;\n    const activate = (p: number) => clamp(p * 100, 0, 100);\n\n    const forward = `inset(0 ${activate(\n      this.isLTR ? selection : 1 - selection\n    )}% 0 0)`;\n    const backward = `inset(0 0 0 ${activate(\n      this.isLTR ? 1 - selection : selection\n    )}%)`;\n\n    switch (direction) {\n      case 'backward':\n        return this.isLTR ? backward : forward;\n      case 'forward':\n      default:\n        return this.isLTR ? forward : backward;\n    }\n  }\n\n  /**\n   * Increments the value of the control by `n` steps multiplied by the\n   * step factor.\n   */\n  public stepUp(n = 1) {\n    this.value += this.round(n * this.step);\n  }\n\n  /**\n   * Decrements the value of the control by `n` steps multiplied by\n   * the step factor.\n   */\n  public stepDown(n = 1) {\n    this.value -= this.round(n * this.step);\n  }\n\n  protected *renderSymbols() {\n    for (let i = 0; i < this.max; i++) {\n      yield html`<igc-rating-symbol exportparts=\"symbol, full, empty\">\n        <igc-icon\n          collection=\"internal\"\n          name=\"star\"\n          style=${styleMap({ clipPath: this.clipSymbol(i, 'forward') })}\n        ></igc-icon>\n        <igc-icon\n          collection=\"internal\"\n          name=\"star_border\"\n          style=${styleMap({ clipPath: this.clipSymbol(i, 'backward') })}\n          slot=\"empty\"\n        ></igc-icon>\n      </igc-rating-symbol>`;\n    }\n  }\n\n  protected clipProjected() {\n    if (this.hasProjectedSymbols) {\n      this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {\n        const full = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol full\"]'\n        ) as HTMLElement;\n\n        const empty = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol empty\"]'\n        ) as HTMLElement;\n\n        if (full) {\n          full.style.clipPath = this.clipSymbol(i, 'forward');\n        }\n\n        if (empty) {\n          empty.style.clipPath = this.clipSymbol(i, 'backward');\n        }\n      });\n    }\n  }\n\n  protected override render() {\n    this.clipProjected();\n\n    return html`\n      <label part=\"label\" ?hidden=${!this.label}>${this.label}</label>\n      <div\n        part=\"base\"\n        role=\"slider\"\n        tabindex=${ifDefined(this.disabled ? undefined : 0)}\n        aria-label=${this.label ?? nothing}\n        aria-valuemin=\"0\"\n        aria-valuenow=${this.value}\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n      >\n        <div\n          aria-hidden=\"true\"\n          part=\"symbols\"\n          @click=${this.handleClick}\n          @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}\n          @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}\n          @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}\n        >\n          <slot @slotchange=${this.handleSlotChange}>\n            ${this.renderSymbols()}\n          </slot>\n        </div>\n        <label part=\"value-label\" ?hidden=${this.valueLabel.length === 0}>\n          <slot name=\"value-label\"></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating': IgcRatingComponent;\n  }\n}\n"]}

package/components/slider/range-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\nexport interface IgcRangeSliderValue {\n  lower: number;\n  upper: number;\n}\n\nexport interface IgcRangeSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<IgcRangeSliderValue>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<IgcRangeSliderValue>;\n}\n\n/**\n * A range slider component used to select two numeric values within a range.\n *\n * @element igc-range-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcRangeSliderComponent extends EventEmitterMixin<\n  IgcRangeSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-range-slider';\n\n  @query(`#thumbFrom`)\n  private thumbFrom!: HTMLElement;\n\n  @query(`#thumbTo`)\n  private thumbTo!: HTMLElement;\n\n  private _lower = 0;\n  private _upper = 0;\n\n  public set lower(val: number) {\n    const oldVal = this._lower;\n    this._lower = this.validateValue(val);\n    this.requestUpdate('lower', oldVal);\n  }\n\n  /**\n   * The current value of the lower thumb.\n   */\n  @property({ type: Number })\n  public get lower() {\n    return this._lower;\n  }\n\n  public set upper(val: number) {\n    const oldVal = this._upper;\n    this._upper = this.validateValue(val);\n    this.requestUpdate('upper', oldVal);\n  }\n\n  /**\n   * The current value of the upper thumb.\n   */\n  @property({ type: Number })\n  public get upper() {\n    return this._upper;\n  }\n\n  /**\n   * The aria label of the lower thumb.\n   */\n  @property({ attribute: 'aria-label-lower' })\n  public ariaLabelLower!: string;\n\n  /**\n   * The aria label of the upper thumb.\n   */\n  @property({ attribute: 'aria-label-upper' })\n  public ariaLabelUpper!: string;\n\n  protected override get activeValue(): number {\n    return this.activeThumb === this.thumbFrom ? this.lower : this.upper;\n  }\n\n  protected override normalizeValue(): void {\n    this._lower = this.validateValue(this._lower);\n    this._upper = this.validateValue(this._upper);\n  }\n\n  protected override getTrackStyle() {\n    const toPosition = this.valueToFraction(this.upper);\n    const fromPosition = this.valueToFraction(this.lower);\n    const positionGap = toPosition - fromPosition;\n\n    const filledTrackStyle = {\n      width: `${positionGap * 100}%`,\n      insetInlineStart: `${fromPosition * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  private closestTo(goal: number, positions: number[]): number {\n    return positions.reduce((previous, current) =>\n      Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous\n    );\n  }\n\n  protected override closestHandle(event: PointerEvent): HTMLElement {\n    const fromOffset =\n      this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;\n    const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;\n    const xPointer = event.clientX - this.getBoundingClientRect().left;\n    const match = this.closestTo(xPointer, [fromOffset, toOffset]);\n\n    if (fromOffset === toOffset && toOffset < xPointer) {\n      return this.thumbTo;\n    } else if (fromOffset === toOffset && toOffset > xPointer) {\n      return this.thumbFrom;\n    } else if (match === fromOffset) {\n      return this.thumbFrom;\n    } else {\n      return this.thumbTo;\n    }\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.activeValue;\n\n    let lower = this.lower;\n    let upper = this.upper;\n\n    if (this.activeThumb === this.thumbFrom) {\n      lower += increment;\n    } else {\n      upper += increment;\n    }\n\n    if (lower >= upper) {\n      this.swapValues(lower, upper);\n      this.toggleActiveThumb();\n    } else {\n      if (this.activeThumb === this.thumbFrom) {\n        this.lower = lower;\n      } else {\n        this.upper = upper;\n      }\n    }\n\n    if (oldValue === this.activeValue) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  private swapValues(lower: number, upper: number) {\n    this.lower = upper;\n    this.upper = lower;\n  }\n\n  private toggleActiveThumb() {\n    const thumb =\n      this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;\n    thumb.focus();\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(\n      this.lower,\n      this.ariaLabelLower,\n      'thumbFrom'\n    )}\n    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-range-slider': IgcRangeSliderComponent;\n  }\n}\n"]}
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\n/* blazorSuppress */\nexport interface IgcRangeSliderValue {\n  lower: number;\n  upper: number;\n}\n\nexport interface IgcRangeSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<IgcRangeSliderValue>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<IgcRangeSliderValue>;\n}\n\n/**\n * A range slider component used to select two numeric values within a range.\n *\n * @element igc-range-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcRangeSliderComponent extends EventEmitterMixin<\n  IgcRangeSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-range-slider';\n\n  @query(`#thumbFrom`)\n  private thumbFrom!: HTMLElement;\n\n  @query(`#thumbTo`)\n  private thumbTo!: HTMLElement;\n\n  private _lower = 0;\n  private _upper = 0;\n\n  public set lower(val: number) {\n    const oldVal = this._lower;\n    this._lower = this.validateValue(val);\n    this.requestUpdate('lower', oldVal);\n  }\n\n  /**\n   * The current value of the lower thumb.\n   */\n  @property({ type: Number })\n  public get lower() {\n    return this._lower;\n  }\n\n  public set upper(val: number) {\n    const oldVal = this._upper;\n    this._upper = this.validateValue(val);\n    this.requestUpdate('upper', oldVal);\n  }\n\n  /**\n   * The current value of the upper thumb.\n   */\n  @property({ type: Number })\n  public get upper() {\n    return this._upper;\n  }\n\n  /**\n   * The aria label of the lower thumb.\n   */\n  @property({ attribute: 'aria-label-lower' })\n  public ariaLabelLower!: string;\n\n  /**\n   * The aria label of the upper thumb.\n   */\n  @property({ attribute: 'aria-label-upper' })\n  public ariaLabelUpper!: string;\n\n  protected override get activeValue(): number {\n    return this.activeThumb === this.thumbFrom ? this.lower : this.upper;\n  }\n\n  protected override normalizeValue(): void {\n    this._lower = this.validateValue(this._lower);\n    this._upper = this.validateValue(this._upper);\n  }\n\n  protected override getTrackStyle() {\n    const toPosition = this.valueToFraction(this.upper);\n    const fromPosition = this.valueToFraction(this.lower);\n    const positionGap = toPosition - fromPosition;\n\n    const filledTrackStyle = {\n      width: `${positionGap * 100}%`,\n      insetInlineStart: `${fromPosition * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  private closestTo(goal: number, positions: number[]): number {\n    return positions.reduce((previous, current) =>\n      Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous\n    );\n  }\n\n  protected override closestHandle(event: PointerEvent): HTMLElement {\n    const fromOffset =\n      this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;\n    const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;\n    const xPointer = event.clientX - this.getBoundingClientRect().left;\n    const match = this.closestTo(xPointer, [fromOffset, toOffset]);\n\n    if (fromOffset === toOffset && toOffset < xPointer) {\n      return this.thumbTo;\n    } else if (fromOffset === toOffset && toOffset > xPointer) {\n      return this.thumbFrom;\n    } else if (match === fromOffset) {\n      return this.thumbFrom;\n    } else {\n      return this.thumbTo;\n    }\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.activeValue;\n\n    let lower = this.lower;\n    let upper = this.upper;\n\n    if (this.activeThumb === this.thumbFrom) {\n      lower += increment;\n    } else {\n      upper += increment;\n    }\n\n    if (lower >= upper) {\n      this.swapValues(lower, upper);\n      this.toggleActiveThumb();\n    } else {\n      if (this.activeThumb === this.thumbFrom) {\n        this.lower = lower;\n      } else {\n        this.upper = upper;\n      }\n    }\n\n    if (oldValue === this.activeValue) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  private swapValues(lower: number, upper: number) {\n    this.lower = upper;\n    this.upper = lower;\n  }\n\n  private toggleActiveThumb() {\n    const thumb =\n      this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;\n    thumb.focus();\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(\n      this.lower,\n      this.ariaLabelLower,\n      'thumbFrom'\n    )}\n    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-range-slider': IgcRangeSliderComponent;\n  }\n}\n"]}

package/components/slider/slider-base.js

@@ -16,6 +16,9 @@ import { styles as bootstrap } from './themes/light/slider.bootstrap.css.js';
 import { styles as fluent } from './themes/light/slider.fluent.css.js';
 import { styles as indigo } from './themes/light/slider.indigo.css.js';
 import { styles as material } from './themes/light/slider.material.css.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcSliderLabelComponent from './slider-label.js';
+defineComponents(IgcSliderLabelComponent);
 let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
     constructor() {
         super();
@@ -404,7 +407,7 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
             x2="100%"
             y2="1"
             stroke="currentColor"
-            stroke-dasharray="1.5px, calc(${interval * Math.sqrt(2)}% - 1.5px)"
+            stroke-dasharray="0, calc(${interval * Math.sqrt(2)}%)"
             stroke-linecap="round"
             stroke-width="2px"
           ></line>