igniteui-webcomponents 7.4.0 → 7.4.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 +38 -0
- package/components/checkbox/checkbox-base.d.ts +2 -0
- package/components/checkbox/checkbox-base.js +4 -0
- package/components/checkbox/checkbox-base.js.map +1 -1
- package/components/checkbox/checkbox.js +3 -11
- package/components/checkbox/checkbox.js.map +1 -1
- package/components/checkbox/switch.js +1 -8
- package/components/checkbox/switch.js.map +1 -1
- package/components/color-picker/color-picker.js +3 -3
- package/components/color-picker/color-picker.js.map +1 -1
- package/components/combo/combo.d.ts +6 -4
- package/components/combo/combo.js +13 -24
- package/components/combo/combo.js.map +1 -1
- package/components/date-picker/date-picker.base.d.ts +3 -3
- package/components/date-picker/date-picker.base.js +2 -2
- package/components/date-picker/date-picker.base.js.map +1 -1
- package/components/date-picker/date-picker.d.ts +1 -1
- package/components/date-range-picker/date-range-picker.d.ts +1 -1
- package/components/date-time-input/date-time-input.base.d.ts +4 -4
- package/components/date-time-input/date-time-input.base.js +3 -5
- package/components/date-time-input/date-time-input.base.js.map +1 -1
- package/components/file-input/file-input.d.ts +5 -0
- package/components/file-input/file-input.js +4 -0
- package/components/file-input/file-input.js.map +1 -1
- package/components/input/input-base.d.ts +2 -2
- package/components/input/input-base.js +3 -5
- package/components/input/input-base.js.map +1 -1
- package/components/input/input.d.ts +1 -1
- package/components/radio/radio.d.ts +2 -0
- package/components/radio/radio.js +7 -11
- package/components/radio/radio.js.map +1 -1
- package/components/rating/rating.d.ts +3 -0
- package/components/rating/rating.js +17 -18
- package/components/rating/rating.js.map +1 -1
- package/components/select/select.js +1 -1
- package/components/select/select.js.map +1 -1
- package/components/slider/range-slider.d.ts +0 -1
- package/components/slider/range-slider.js +6 -11
- package/components/slider/range-slider.js.map +1 -1
- package/components/slider/slider-base.d.ts +4 -1
- package/components/slider/slider-base.js +20 -18
- package/components/slider/slider-base.js.map +1 -1
- package/components/slider/slider.d.ts +2 -0
- package/components/slider/slider.js +5 -1
- package/components/slider/slider.js.map +1 -1
- package/components/textarea/textarea.d.ts +1 -4
- package/components/textarea/textarea.js +3 -5
- package/components/textarea/textarea.js.map +1 -1
- package/components/validation-container/validation-container.js +2 -1
- package/components/validation-container/validation-container.js.map +1 -1
- package/components/virtualization/engine.d.ts +35 -4
- package/components/virtualization/engine.js +126 -61
- package/components/virtualization/engine.js.map +1 -1
- package/components/virtualization/recycle.d.ts +13 -0
- package/components/virtualization/recycle.js +152 -0
- package/components/virtualization/recycle.js.map +1 -0
- package/components/virtualization/virtualization.d.ts +32 -11
- package/components/virtualization/virtualization.js +14 -11
- package/components/virtualization/virtualization.js.map +1 -1
- package/custom-elements.json +2382 -79
- package/igniteui-webcomponents.html-data.json +1 -1
- package/index.d.ts +1 -1
- package/index.js.map +1 -1
- package/internals/controllers/aria-projection.d.ts +61 -23
- package/internals/controllers/aria-projection.js +77 -26
- package/internals/controllers/aria-projection.js.map +1 -1
- package/internals/mixins/forms/associated.js +34 -0
- package/internals/mixins/forms/associated.js.map +1 -1
- package/internals/mixins/forms/types.d.ts +5 -0
- package/internals/mixins/forms/types.js.map +1 -1
- package/internals/templates/toggle-shell.d.ts +15 -14
- package/internals/templates/toggle-shell.js +12 -8
- package/internals/templates/toggle-shell.js.map +1 -1
- package/internals/utils/dom.d.ts +2 -2
- package/internals/utils/dom.js +2 -2
- package/internals/utils/dom.js.map +1 -1
- package/package.json +1 -1
- package/skills/README.md +2 -4
- package/skills/igniteui-wc-choose-components/SKILL.md +2 -1
- package/skills/igniteui-wc-customize-component-theme/SKILL.md +2 -1
- package/skills/igniteui-wc-figma-to-app/SKILL.md +133 -712
- package/skills/igniteui-wc-figma-to-app/references/asset-extraction.md +42 -62
- package/skills/igniteui-wc-figma-to-app/references/design-provenance.md +199 -0
- package/skills/igniteui-wc-figma-to-app/references/design-token-bridge.md +189 -107
- package/skills/igniteui-wc-figma-to-app/references/figma-component-map.md +129 -84
- package/skills/igniteui-wc-figma-to-app/references/figma-exploration.md +222 -0
- package/skills/igniteui-wc-figma-to-app/references/mcp-setup.md +81 -127
- package/skills/igniteui-wc-figma-to-app/references/project-setup.md +105 -0
- package/skills/igniteui-wc-figma-to-app/references/theme-generation.md +180 -0
- package/skills/igniteui-wc-figma-to-app/references/validation-patterns.md +74 -80
- package/skills/igniteui-wc-generate-from-image-design/SKILL.md +2 -1
- package/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +3 -3
- package/skills/igniteui-wc-grids/SKILL.md +133 -0
- package/skills/igniteui-wc-integrate-with-framework/SKILL.md +2 -1
- package/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +2 -1
- package/skills/igniteui-wc-optimize-bundle-size/SKILL.md +2 -1
- package/web-types.json +1 -1
|
@@ -37,7 +37,7 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
|
|
|
37
37
|
private static readonly _revalidate;
|
|
38
38
|
static register(): void;
|
|
39
39
|
protected readonly _themes: import("#theming/theming-controller.js").ThemingController;
|
|
40
|
-
protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "
|
|
40
|
+
protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "range-overflow" | "range-underflow" | "custom-error" | "too-long" | "too-short" | "type-mismatch" | "pattern-mismatch" | "step-mismatch">;
|
|
41
41
|
protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<string>;
|
|
42
42
|
protected get __validators(): import("../../internals/validators.js").Validator<IgcInputComponent>[];
|
|
43
43
|
/**
|
|
@@ -78,6 +78,8 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
|
|
|
78
78
|
protected willUpdate(properties: PropertyValues<this>): void;
|
|
79
79
|
protected firstUpdated(): Promise<void>;
|
|
80
80
|
protected _handleSlotChange(): void;
|
|
81
|
+
/** Focuses and checks the radio, as a native radio label does. */
|
|
82
|
+
protected _handleLabelActivation(): void;
|
|
81
83
|
protected _setDefaultValue(current: string | null): void;
|
|
82
84
|
/**
|
|
83
85
|
* Restores the default state without the `checked` setter. That setter unchecks all
|
|
@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
8
|
import { property, query, state } from 'lit/decorators.js';
|
|
9
|
+
import { helperText } from '#internals/controllers/aria-projection.js';
|
|
9
10
|
import { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';
|
|
10
11
|
import { addRovingFocusController } from '#internals/controllers/roving-focus.js';
|
|
11
12
|
import { addSlotController, setSlots } from '#internals/controllers/slot.js';
|
|
@@ -139,6 +140,10 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
|
|
|
139
140
|
_handleSlotChange() {
|
|
140
141
|
this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);
|
|
141
142
|
}
|
|
143
|
+
_handleLabelActivation() {
|
|
144
|
+
this._input.focus();
|
|
145
|
+
this._input.click();
|
|
146
|
+
}
|
|
142
147
|
_setDefaultValue(current) {
|
|
143
148
|
this._formValue.defaultValue = isString(current);
|
|
144
149
|
for (const radio of this._siblings()) {
|
|
@@ -221,10 +226,9 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
|
|
|
221
226
|
});
|
|
222
227
|
}
|
|
223
228
|
render() {
|
|
224
|
-
const labelledBy = this.getAttribute('aria-labelledby');
|
|
225
229
|
const checked = this.checked;
|
|
226
230
|
return html `
|
|
227
|
-
${renderToggleShell({
|
|
231
|
+
${renderToggleShell(this, {
|
|
228
232
|
type: 'radio',
|
|
229
233
|
inputId: this._inputId,
|
|
230
234
|
labelId: this._labelId,
|
|
@@ -241,17 +245,9 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
|
|
|
241
245
|
?hidden=${this.disabled}
|
|
242
246
|
></span>
|
|
243
247
|
`,
|
|
244
|
-
checked,
|
|
245
248
|
hideLabel: this._hideLabel,
|
|
246
|
-
name: this.name,
|
|
247
|
-
value: this.value,
|
|
248
|
-
required: this.required,
|
|
249
|
-
disabled: this.disabled,
|
|
250
249
|
tabindex: this._tabIndex,
|
|
251
|
-
|
|
252
|
-
ariaDescribedBy: this._slots.hasAssignedElements('helper-text')
|
|
253
|
-
? 'helper-text'
|
|
254
|
-
: undefined,
|
|
250
|
+
describedBy: helperText(this, this._slots)?.id,
|
|
255
251
|
onClick: this._handleClick,
|
|
256
252
|
onKeyDown: this._handleEnterKeydown,
|
|
257
253
|
})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { addRovingFocusController } from '#internals/controllers/roving-focus.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { isString } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { addRadioGroupController, getGroupMembers } from './controller.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n checked: boolean;\n value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\nconst nextId = createIdGenerator('radio');\n\n/**\n * The radio component allows the user to select a single option from an available set of options that are listed side by side.\n *\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-radio';\n protected static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n }\n\n protected override get __validators() {\n return radioValidators;\n }\n\n private readonly _inputId = nextId();\n private readonly _labelId = `radio-label-${this._inputId}`;\n private readonly _focusRingManager = addKeyboardFocusRing(this);\n\n /**\n * Keeps the roving tab index of the group. The checked radio is the only tab\n * stop. If the group has no selection, each radio is a tab stop.\n */\n private readonly _group = addRadioGroupController(this, (hasCheckedRadio) => {\n this._tabIndex = !hasCheckedRadio || this.checked ? 0 : -1;\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: false,\n transformers: FormValueBooleanTransformers,\n });\n\n protected _value!: string;\n\n @query('input', true)\n protected readonly _input!: HTMLInputElement;\n\n @state()\n protected _hideLabel = true;\n\n @state()\n private _tabIndex = 0;\n\n /** All radios of the group, that is having the same name property, in DOM order. */\n private get _radios(): IgcRadioComponent[] {\n return getGroupMembers(this);\n }\n\n /** All radios of the group that are not disabled. */\n private get _activeRadios(): IgcRadioComponent[] {\n return this._radios.filter((radio) => !radio.disabled);\n }\n\n /** All radios of the group except this one. Yields, so it copies nothing. */\n private *_siblings(): Generator<IgcRadioComponent> {\n for (const radio of this._radios) {\n if (radio !== this) {\n yield radio;\n }\n }\n }\n\n /** Whether this radio is the last checked one of its group. */\n private _isLastChecked(): boolean {\n return this._radios.findLast((radio) => radio.checked) === this;\n }\n\n @property({ type: Boolean, reflect: true })\n public override set required(value: boolean) {\n super.required = value;\n\n if (this.hasUpdated) {\n for (const radio of this._siblings()) {\n radio._validate();\n }\n }\n }\n\n public override get required(): boolean {\n return this._required;\n }\n\n /**\n * The value of the control.\n * @attr\n */\n @property()\n public set value(value: string) {\n this._value = value;\n if (this.checked) {\n this._formValue.setValueAndFormState(this.checked);\n }\n }\n\n public get value(): string {\n return this._value;\n }\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n public set checked(value: boolean) {\n const previous = this.checked;\n\n this._formValue.setValueAndFormState(value);\n if (this.hasUpdated && this.checked) {\n this._updateCheckedState();\n }\n\n // The tab stop is a state of the group, so a change of the selection derives it\n // again. A write of the same state leaves the group as it is.\n if (this.checked !== previous) {\n this._group.sync();\n }\n }\n\n public get checked(): boolean {\n return this._formValue.value;\n }\n\n /**\n * The label position of the radio control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: ToggleLabelPosition = 'after';\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n addRovingFocusController(this, {\n keybindings: {\n skip: () => this.disabled,\n bindingDefaults: { preventDefault: true, repeat: true },\n },\n vertical: true,\n homeEnd: false,\n items: () => this._activeRadios,\n current: () => this,\n focusItem: (radio) => this._navigate(radio),\n });\n }\n\n protected override willUpdate(properties: PropertyValues<this>): void {\n // The name is half of the identity of a group, so a new name moves this radio to another one.\n if (properties.has('name')) {\n this._group.updateMembership();\n }\n\n // The tab stop of the group depends on which of its radios are disabled.\n if (properties.has('disabled')) {\n this._group.sync();\n }\n }\n\n protected override async firstUpdated(): Promise<void> {\n await this.updateComplete;\n\n if (this.checked && this._isLastChecked()) {\n for (const radio of this._siblings()) {\n radio.checked = false;\n radio.defaultChecked = false;\n }\n } else {\n this._validate();\n }\n }\n\n protected _handleSlotChange(): void {\n this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n }\n\n protected override _setDefaultValue(current: string | null): void {\n // The base mixin gives 'true' if the `checked` attribute is there, and null\n // if it is removed. `isDefined` accepts null as present, and would check the\n // radio again on a form reset.\n this._formValue.defaultValue = isString(current);\n for (const radio of this._siblings()) {\n radio.defaultChecked = false;\n }\n }\n\n /**\n * Restores the default state without the `checked` setter. That setter unchecks all\n * siblings, which damages the state of the radios that the browser already reset in\n * the same `form.reset()` pass.\n */\n protected override _restoreDefaultValue(): void {\n const checked = this.checked;\n this._formValue.setValueAndFormState(this.defaultChecked);\n this.requestUpdate('checked', checked);\n }\n\n /** Simulates a click on the radio control. */\n public override click(): void {\n this._input.click();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus on the radio control. */\n public override focus(options?: FocusOptions): void {\n this._input.focus(options);\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the radio control. */\n public override blur(): void {\n this._input.blur();\n }\n\n private _checkValidity(): boolean {\n return super.checkValidity();\n }\n\n private _reportValidity(): boolean {\n return super.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it's invalid. */\n public override checkValidity(): boolean {\n for (const radio of this._siblings()) {\n radio._checkValidity();\n }\n\n return this._checkValidity();\n }\n\n /** Checks for validity of the control and shows the browser message if it's invalid. */\n public override reportValidity(): boolean {\n for (const radio of this._siblings()) {\n radio._reportValidity();\n }\n\n return this._reportValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public override setCustomValidity(message: string): void {\n for (const radio of this._radios) {\n radio._validate(message);\n radio.requestUpdate();\n }\n }\n\n private _updateCheckedState(): void {\n for (const radio of this._siblings()) {\n radio.checked = false;\n }\n }\n\n protected override formResetCallback(): void {\n super.formResetCallback();\n this._group.sync();\n this.updateComplete.then(() => this._validate());\n }\n\n protected override formAssociatedCallback(form: HTMLFormElement): void {\n super.formAssociatedCallback(form);\n\n // The form owner is the other half, so a new one moves this radio as well.\n this._group.updateMembership();\n }\n\n protected _handleClick(event: PointerEvent) {\n event.stopPropagation();\n this._setTouchedState();\n\n if (this.checked) {\n return;\n }\n\n this.checked = true;\n this._input.focus();\n this.emitEvent('igcChange', {\n detail: {\n checked: this.checked,\n value: this.value,\n },\n });\n }\n\n protected _navigate(radio: IgcRadioComponent): void {\n this._setTouchedState();\n radio.focus();\n radio.checked = true;\n radio.emitEvent('igcChange', {\n detail: { checked: radio.checked, value: radio.value },\n });\n }\n\n protected override render() {\n const labelledBy = this.getAttribute('aria-labelledby');\n const checked = this.checked;\n\n return html`\n ${renderToggleShell({\n type: 'radio',\n inputId: this._inputId,\n labelId: this._labelId,\n baseParts: {\n base: true,\n checked,\n focused: this._focusRingManager.focused,\n },\n controlParts: { control: true, checked },\n labelParts: { label: true, checked },\n renderControl: () => html`\n <span\n part=${partMap({ ripple: true, checked })}\n ?hidden=${this.disabled}\n ></span>\n `,\n checked,\n hideLabel: this._hideLabel,\n name: this.name,\n value: this.value,\n required: this.required,\n disabled: this.disabled,\n tabindex: this._tabIndex,\n ariaLabelledBy: labelledBy ? labelledBy : this._labelId,\n ariaDescribedBy: this._slots.hasAssignedElements('helper-text')\n ? 'helper-text'\n : undefined,\n onClick: this._handleClick,\n onKeyDown: this._handleEnterKeydown,\n })}\n ${IgcValidationContainerComponent.create(this)}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio': IgcRadioComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { helperText } from '#internals/controllers/aria-projection.js';\nimport { addKeyboardFocusRing } from '#internals/controllers/focus-ring.js';\nimport { addRovingFocusController } from '#internals/controllers/roving-focus.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { renderToggleShell } from '#internals/templates/toggle-shell.js';\nimport { createIdGenerator } from '#internals/utils/strings.js';\nimport { isString } from '#internals/utils/types.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { addRadioGroupController, getGroupMembers } from './controller.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n checked: boolean;\n value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n // For analyzer meta only:\n /* skipWCPrefix */\n focus: FocusEvent;\n /* skipWCPrefix */\n blur: FocusEvent;\n}\n\nconst nextId = createIdGenerator('radio');\n\n/**\n * The radio component allows the user to select a single option from an available set of options that are listed side by side.\n *\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-radio';\n protected static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n }\n\n protected override get __validators() {\n return radioValidators;\n }\n\n private readonly _inputId = nextId();\n private readonly _labelId = `radio-label-${this._inputId}`;\n private readonly _focusRingManager = addKeyboardFocusRing(this);\n\n /**\n * Keeps the roving tab index of the group. The checked radio is the only tab\n * stop. If the group has no selection, each radio is a tab stop.\n */\n private readonly _group = addRadioGroupController(this, (hasCheckedRadio) => {\n this._tabIndex = !hasCheckedRadio || this.checked ? 0 : -1;\n });\n\n private readonly _slots = addSlotController(this, {\n slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: false,\n transformers: FormValueBooleanTransformers,\n });\n\n protected _value!: string;\n\n @query('input', true)\n protected readonly _input!: HTMLInputElement;\n\n @state()\n protected _hideLabel = true;\n\n @state()\n private _tabIndex = 0;\n\n /** All radios of the group, that is having the same name property, in DOM order. */\n private get _radios(): IgcRadioComponent[] {\n return getGroupMembers(this);\n }\n\n /** All radios of the group that are not disabled. */\n private get _activeRadios(): IgcRadioComponent[] {\n return this._radios.filter((radio) => !radio.disabled);\n }\n\n /** All radios of the group except this one. Yields, so it copies nothing. */\n private *_siblings(): Generator<IgcRadioComponent> {\n for (const radio of this._radios) {\n if (radio !== this) {\n yield radio;\n }\n }\n }\n\n /** Whether this radio is the last checked one of its group. */\n private _isLastChecked(): boolean {\n return this._radios.findLast((radio) => radio.checked) === this;\n }\n\n @property({ type: Boolean, reflect: true })\n public override set required(value: boolean) {\n super.required = value;\n\n if (this.hasUpdated) {\n for (const radio of this._siblings()) {\n radio._validate();\n }\n }\n }\n\n public override get required(): boolean {\n return this._required;\n }\n\n /**\n * The value of the control.\n * @attr\n */\n @property()\n public set value(value: string) {\n this._value = value;\n if (this.checked) {\n this._formValue.setValueAndFormState(this.checked);\n }\n }\n\n public get value(): string {\n return this._value;\n }\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n public set checked(value: boolean) {\n const previous = this.checked;\n\n this._formValue.setValueAndFormState(value);\n if (this.hasUpdated && this.checked) {\n this._updateCheckedState();\n }\n\n // The tab stop is a state of the group, so a change of the selection derives it\n // again. A write of the same state leaves the group as it is.\n if (this.checked !== previous) {\n this._group.sync();\n }\n }\n\n public get checked(): boolean {\n return this._formValue.value;\n }\n\n /**\n * The label position of the radio control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: ToggleLabelPosition = 'after';\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n addRovingFocusController(this, {\n keybindings: {\n skip: () => this.disabled,\n bindingDefaults: { preventDefault: true, repeat: true },\n },\n vertical: true,\n homeEnd: false,\n items: () => this._activeRadios,\n current: () => this,\n focusItem: (radio) => this._navigate(radio),\n });\n }\n\n protected override willUpdate(properties: PropertyValues<this>): void {\n // The name is half of the identity of a group, so a new name moves this radio to another one.\n if (properties.has('name')) {\n this._group.updateMembership();\n }\n\n // The tab stop of the group depends on which of its radios are disabled.\n if (properties.has('disabled')) {\n this._group.sync();\n }\n }\n\n protected override async firstUpdated(): Promise<void> {\n await this.updateComplete;\n\n if (this.checked && this._isLastChecked()) {\n for (const radio of this._siblings()) {\n radio.checked = false;\n radio.defaultChecked = false;\n }\n } else {\n this._validate();\n }\n }\n\n protected _handleSlotChange(): void {\n this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n }\n\n /** Focuses and checks the radio, as a native radio label does. */\n protected override _handleLabelActivation(): void {\n this._input.focus();\n this._input.click();\n }\n\n protected override _setDefaultValue(current: string | null): void {\n // The base mixin gives 'true' if the `checked` attribute is there, and null\n // if it is removed. `isDefined` accepts null as present, and would check the\n // radio again on a form reset.\n this._formValue.defaultValue = isString(current);\n for (const radio of this._siblings()) {\n radio.defaultChecked = false;\n }\n }\n\n /**\n * Restores the default state without the `checked` setter. That setter unchecks all\n * siblings, which damages the state of the radios that the browser already reset in\n * the same `form.reset()` pass.\n */\n protected override _restoreDefaultValue(): void {\n const checked = this.checked;\n this._formValue.setValueAndFormState(this.defaultChecked);\n this.requestUpdate('checked', checked);\n }\n\n /** Simulates a click on the radio control. */\n public override click(): void {\n this._input.click();\n }\n\n /* alternateName: focusComponent */\n /** Sets focus on the radio control. */\n public override focus(options?: FocusOptions): void {\n this._input.focus(options);\n }\n\n /* alternateName: blurComponent */\n /** Removes focus from the radio control. */\n public override blur(): void {\n this._input.blur();\n }\n\n private _checkValidity(): boolean {\n return super.checkValidity();\n }\n\n private _reportValidity(): boolean {\n return super.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it's invalid. */\n public override checkValidity(): boolean {\n for (const radio of this._siblings()) {\n radio._checkValidity();\n }\n\n return this._checkValidity();\n }\n\n /** Checks for validity of the control and shows the browser message if it's invalid. */\n public override reportValidity(): boolean {\n for (const radio of this._siblings()) {\n radio._reportValidity();\n }\n\n return this._reportValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public override setCustomValidity(message: string): void {\n for (const radio of this._radios) {\n radio._validate(message);\n radio.requestUpdate();\n }\n }\n\n private _updateCheckedState(): void {\n for (const radio of this._siblings()) {\n radio.checked = false;\n }\n }\n\n protected override formResetCallback(): void {\n super.formResetCallback();\n this._group.sync();\n this.updateComplete.then(() => this._validate());\n }\n\n protected override formAssociatedCallback(form: HTMLFormElement): void {\n super.formAssociatedCallback(form);\n\n // The form owner is the other half, so a new one moves this radio as well.\n this._group.updateMembership();\n }\n\n protected _handleClick(event: PointerEvent) {\n event.stopPropagation();\n this._setTouchedState();\n\n if (this.checked) {\n return;\n }\n\n this.checked = true;\n this._input.focus();\n this.emitEvent('igcChange', {\n detail: {\n checked: this.checked,\n value: this.value,\n },\n });\n }\n\n protected _navigate(radio: IgcRadioComponent): void {\n this._setTouchedState();\n radio.focus();\n radio.checked = true;\n radio.emitEvent('igcChange', {\n detail: { checked: radio.checked, value: radio.value },\n });\n }\n\n protected override render() {\n const checked = this.checked;\n\n return html`\n ${renderToggleShell(this, {\n type: 'radio',\n inputId: this._inputId,\n labelId: this._labelId,\n baseParts: {\n base: true,\n checked,\n focused: this._focusRingManager.focused,\n },\n controlParts: { control: true, checked },\n labelParts: { label: true, checked },\n renderControl: () => html`\n <span\n part=${partMap({ ripple: true, checked })}\n ?hidden=${this.disabled}\n ></span>\n `,\n hideLabel: this._hideLabel,\n tabindex: this._tabIndex,\n describedBy: helperText(this, this._slots)?.id,\n onClick: this._handleClick,\n onKeyDown: this._handleEnterKeydown,\n })}\n ${IgcValidationContainerComponent.create(this)}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-radio': IgcRadioComponent;\n }\n}\n"]}
|
|
@@ -67,6 +67,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
|
|
|
67
67
|
protected readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<number>;
|
|
68
68
|
private _symbols;
|
|
69
69
|
private _container?;
|
|
70
|
+
private readonly _slider;
|
|
70
71
|
private _hoverValue;
|
|
71
72
|
private _hoverState;
|
|
72
73
|
private get _isInteractive();
|
|
@@ -147,6 +148,8 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
|
|
|
147
148
|
private _handleClick;
|
|
148
149
|
private _handlePointerMove;
|
|
149
150
|
private _handleSlotChange;
|
|
151
|
+
/** Focuses the slider, as a native range input label does. */
|
|
152
|
+
protected _handleLabelActivation(): void;
|
|
150
153
|
private _handleHoverEnabled;
|
|
151
154
|
private _handleHoverDisabled;
|
|
152
155
|
private _emitValueUpdate;
|
|
@@ -6,12 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement, nothing } from 'lit';
|
|
8
8
|
import { property, query, state } from 'lit/decorators.js';
|
|
9
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
9
|
import { map } from 'lit/directives/map.js';
|
|
11
10
|
import { range } from 'lit/directives/range.js';
|
|
12
11
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
12
|
+
import { ariaBindings, resolveNaming, } from '#internals/controllers/aria-projection.js';
|
|
13
13
|
import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, } from '#internals/controllers/key-bindings.js';
|
|
14
|
-
import { createMutationController } from '#internals/controllers/mutation-observer.js';
|
|
15
14
|
import { addSlotController, setSlots, } from '#internals/controllers/slot.js';
|
|
16
15
|
import { coercedProperty } from '#internals/decorators/coerced-property.js';
|
|
17
16
|
import { registerComponent } from '#internals/definitions/register.js';
|
|
@@ -74,10 +73,6 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
|
|
|
74
73
|
this.single = false;
|
|
75
74
|
this.allowReset = false;
|
|
76
75
|
addThemingController(this, all);
|
|
77
|
-
createMutationController(this, {
|
|
78
|
-
callback: () => this.requestUpdate(),
|
|
79
|
-
config: { attributeFilter: ['aria-label'] },
|
|
80
|
-
});
|
|
81
76
|
addKeybindings(this, {
|
|
82
77
|
skip: () => !this._isInteractive,
|
|
83
78
|
bindingDefaults: { repeat: true },
|
|
@@ -125,6 +120,9 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
|
|
|
125
120
|
}
|
|
126
121
|
}
|
|
127
122
|
}
|
|
123
|
+
_handleLabelActivation() {
|
|
124
|
+
this._slider.focus();
|
|
125
|
+
}
|
|
128
126
|
_handleHoverEnabled() {
|
|
129
127
|
this._hoverState = true;
|
|
130
128
|
}
|
|
@@ -168,18 +166,19 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
|
|
|
168
166
|
}
|
|
169
167
|
}
|
|
170
168
|
}
|
|
171
|
-
_clipSymbol(index,
|
|
169
|
+
_clipSymbol(index, ltr) {
|
|
172
170
|
const value = this._hoverState ? this._hoverValue : this.value;
|
|
173
171
|
const progress = index + 1 - value;
|
|
174
172
|
const exclusive = progress === 0 ? 0 : 1;
|
|
175
173
|
const selection = this.single ? exclusive : progress;
|
|
176
|
-
const
|
|
177
|
-
const
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
174
|
+
const full = clamp(selection * 100, 0, 100);
|
|
175
|
+
const empty = clamp((1 - selection) * 100, 0, 100);
|
|
176
|
+
return ltr
|
|
177
|
+
? { forward: `inset(0 ${full}% 0 0)`, backward: `inset(0 0 0 ${empty}%)` }
|
|
178
|
+
: {
|
|
179
|
+
forward: `inset(0 0 0 ${full}%)`,
|
|
180
|
+
backward: `inset(0 ${empty}% 0 0)`,
|
|
181
|
+
};
|
|
183
182
|
}
|
|
184
183
|
stepUp(n = 1) {
|
|
185
184
|
this.value = this._normalize(this.value + n * this.step);
|
|
@@ -211,18 +210,15 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
|
|
|
211
210
|
render() {
|
|
212
211
|
const hoverActive = this.hoverPreview && this._isInteractive;
|
|
213
212
|
const valueLabelHidden = !this._slots.hasAssignedNodes('value-label', true);
|
|
214
|
-
const labelId = this.label ? 'rating-label' : undefined;
|
|
215
|
-
const ariaLabel = this.label ? undefined : (this.ariaLabel ?? undefined);
|
|
216
213
|
return html `
|
|
217
214
|
<label part="label" id="rating-label" ?hidden=${!this.label}
|
|
218
215
|
>${this.label}</label
|
|
219
216
|
>
|
|
220
217
|
<div
|
|
218
|
+
${ariaBindings(resolveNaming(this, Boolean(this.label) && 'rating-label'))}
|
|
221
219
|
part="base"
|
|
222
220
|
role="slider"
|
|
223
221
|
tabindex=${this.disabled ? -1 : 0}
|
|
224
|
-
aria-labelledby=${ifDefined(labelId)}
|
|
225
|
-
aria-label=${ifDefined(ariaLabel)}
|
|
226
222
|
aria-valuemin="0"
|
|
227
223
|
aria-valuenow=${this.value}
|
|
228
224
|
aria-valuemax=${this.max}
|
|
@@ -253,6 +249,9 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
|
|
|
253
249
|
__decorate([
|
|
254
250
|
query('[part="symbols"]', true)
|
|
255
251
|
], IgcRatingComponent.prototype, "_container", void 0);
|
|
252
|
+
__decorate([
|
|
253
|
+
query('[part="base"]', true)
|
|
254
|
+
], IgcRatingComponent.prototype, "_slider", void 0);
|
|
256
255
|
__decorate([
|
|
257
256
|
state()
|
|
258
257
|
], IgcRatingComponent.prototype, "_hoverValue", void 0);
|
|
@@ -1 +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 { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '#internals/controllers/key-bindings.js';\nimport { createMutationController } from '#internals/controllers/mutation-observer.js';\nimport {\n addSlotController,\n type InferSlotNames,\n type SlotChangeCallbackParameters,\n setSlots,\n} from '#internals/controllers/slot.js';\nimport { coercedProperty } from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedMixin } from '#internals/mixins/forms/associated.js';\nimport { FormValueNumberTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { isLTR, pointToFraction } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport {\n asNumber,\n clamp,\n numberOfDecimals,\n roundPrecise,\n} from '#internals/utils/math.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcRatingSymbolComponent from './rating-symbol.js';\nimport { styles } from './themes/rating.base.css.js';\nimport { styles as shared } from './themes/shared/rating.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcRatingComponentEventMap {\n igcChange: CustomEvent<number>;\n igcHover: CustomEvent<number>;\n}\n\nconst Slots = setSlots('symbol', 'value-label');\n\n/**\n * A rating component that allows users to view and provide ratings using customizable symbols.\n * It supports fractional values, hover previews, keyboard navigation, single-selection mode,\n * and integrates with forms as a number input.\n *\n * @example\n * ```html\n * <!-- Basic rating -->\n * <igc-rating value=\"3\" max=\"5\" label=\"Rate this product\"></igc-rating>\n * ```\n *\n * @example\n * ```html\n * <!-- Half-star rating with hover preview -->\n * <igc-rating step=\"0.5\" hover-preview value-format=\"{0} out of {1} stars\"></igc-rating>\n * ```\n *\n * @example\n * ```html\n * <!-- Custom symbols via projected rating symbols -->\n * <igc-rating>\n * <igc-rating-symbol>\n * <igc-icon name=\"heart_filled\" collection=\"default\"></igc-icon>\n * <igc-icon name=\"heart_outlined\" collection=\"default\" slot=\"empty\"></igc-icon>\n * </igc-rating-symbol>\n * <igc-rating-symbol>\n * <igc-icon name=\"heart_filled\" collection=\"default\"></igc-icon>\n * <igc-icon name=\"heart_outlined\" collection=\"default\" slot=\"empty\"></igc-icon>\n * </igc-rating-symbol>\n * </igc-rating>\n * ```\n *\n * @element igc-rating\n *\n * @slot symbol - Slot for projecting custom rating symbol elements. When used, the number of symbols determines the `max` value.\n * @slot value-label - Slot for custom content displayed alongside the rating value.\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) applied to projected full symbols, other than icons, when the rating is disabled.\n * @cssproperty --symbol-empty-filter - The filter(s) applied to projected empty symbols, other than icons, when the rating is disabled.\n */\nexport default class IgcRatingComponent extends FormAssociatedMixin(\n EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-rating';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcRatingComponent,\n IgcIconComponent,\n IgcRatingSymbolComponent\n );\n }\n\n //#region Internal state and properties\n\n protected readonly _slots = addSlotController(this, {\n slots: Slots,\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: 0,\n transformers: FormValueNumberTransformers,\n });\n\n private _symbols: IgcRatingSymbolComponent[] = [];\n\n @query('[part=\"symbols\"]', true)\n private _container?: HTMLElement;\n\n @state()\n private _hoverValue = -1;\n\n @state()\n private _hoverState = false;\n\n private get _isInteractive(): boolean {\n return !(this.readOnly || this.disabled);\n }\n\n private get _hasProjectedSymbols(): boolean {\n return this._symbols.length > 0;\n }\n\n private get _valueText(): string {\n return this.valueFormat\n ? formatString(this.valueFormat, this.value, this.max)\n : `${this.value} of ${this.max}`;\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * The maximum value for the rating.\n *\n * If there are projected symbols, the maximum value will be resolved\n * based on the number of symbols.\n *\n * @attr max\n * @default 5\n */\n @property({ type: Number })\n @coercedProperty<number, IgcRatingComponent>({\n transform: ({ value, host }) =>\n host._hasProjectedSymbols\n ? host._symbols.length\n : Math.max(0, asNumber(value)),\n onChange: ({ value, host }) => {\n if (value < host.value) {\n host.value = value;\n }\n },\n })\n public max = 5;\n\n /**\n * The minimum value change allowed.\n *\n * Valid values are in the interval between 0.001 and 1 inclusive.\n * The component clamps a value outside of the interval to the closest bound.\n *\n * @attr step\n * @default 1\n */\n @property({ type: Number })\n @coercedProperty<number, IgcRatingComponent>({\n transform: ({ value, host }) =>\n host.single ? 1 : clamp(asNumber(value, 1), 0.001, 1),\n })\n public step = 1;\n\n /**\n * The label of the control.\n * @attr label\n */\n @property()\n public label?: string;\n\n /**\n * A format string which sets aria-valuetext. Instances of '{0}' will be replaced\n * with the current value of the control and instances of '{1}' with the maximum value for the control.\n *\n * Important for screen-readers and useful for localization.\n * @attr value-format\n */\n @property({ attribute: 'value-format' })\n public valueFormat?: string;\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n /**\n * The value of the component\n *\n * @attr value\n * @default 0\n */\n @property({ type: Number })\n public set value(number: number) {\n const value = asNumber(number);\n this._formValue.setValueAndFormState(\n this.hasUpdated ? clamp(value, 0, this.max) : Math.max(value, 0)\n );\n }\n\n public get value(): number {\n return this._formValue.value;\n }\n\n /**\n * Whether to show a preview of the value when hovering over the symbols.\n *\n * @attr hover-preview\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n public hoverPreview = false;\n\n /**\n * Makes the control a readonly field.\n *\n * @attr readonly\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'readonly' })\n public readOnly = false;\n\n /**\n * Toggles single selection visual mode.\n *\n * @attr single\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n @coercedProperty<boolean, IgcRatingComponent>({\n transform: ({ value }) => Boolean(value),\n onChange: ({ value, host }) => {\n if (value) {\n host.step = 1;\n host.value = Math.ceil(host.value);\n }\n },\n })\n public single = false;\n\n /**\n * Whether to reset the rating when the user selects the same value.\n *\n * @attr allow-reset\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-reset' })\n public allowReset = false;\n\n //#endregion\n\n //#region Lit lifecycle hooks\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n createMutationController(this, {\n callback: () => this.requestUpdate(),\n config: { attributeFilter: ['aria-label'] },\n });\n\n addKeybindings(this, {\n skip: () => !this._isInteractive,\n bindingDefaults: { repeat: true },\n })\n .set(arrowUp, () => this._emitValueUpdate(this.value + this.step))\n .set(arrowRight, () =>\n this._emitValueUpdate(\n isLTR(this) ? this.value + this.step : this.value - this.step\n )\n )\n .set(arrowDown, () => this._emitValueUpdate(this.value - this.step))\n .set(arrowLeft, () =>\n this._emitValueUpdate(\n isLTR(this) ? this.value - this.step : this.value + this.step\n )\n )\n .set(homeKey, () => this._emitValueUpdate(this.step))\n .set(endKey, () => this._emitValueUpdate(this.max));\n }\n\n protected override firstUpdated(): void {\n this._formValue.setValueAndFormState(clamp(this.value, 0, this.max));\n this._pristine = true;\n }\n\n protected override updated(): void {\n if (this._hasProjectedSymbols) {\n this._updateProjectedSymbols();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleClick({ clientX }: PointerEvent): void {\n const value = this._calcNewValue(clientX);\n const sameValue = this.value === value;\n\n if (this.allowReset && sameValue) {\n this._emitValueUpdate(0);\n } else if (!sameValue) {\n this._emitValueUpdate(value);\n }\n }\n\n private _handlePointerMove({ clientX }: PointerEvent): void {\n const value = this._calcNewValue(clientX);\n\n if (this._hoverValue !== value) {\n // Since pointermove spams a lot, only emit on a value change\n this._hoverValue = value;\n this.emitEvent('igcHover', { detail: this._hoverValue });\n }\n }\n\n private _handleSlotChange({\n slot,\n }: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>): void {\n if (slot === 'symbol') {\n this._symbols = this._slots.getAssignedElements('symbol', {\n selector: IgcRatingSymbolComponent.tagName,\n });\n\n if (this._hasProjectedSymbols) {\n this.max = this._symbols.length;\n }\n }\n }\n\n private _handleHoverEnabled(): void {\n this._hoverState = true;\n }\n\n private _handleHoverDisabled(): void {\n this._hoverState = false;\n this._hoverValue = -1;\n }\n\n //#endregion\n\n //#region Private methods\n\n private _emitValueUpdate(next: number): void {\n this._setTouchedState();\n\n const clamped = clamp(this._normalize(next), 0, this.max);\n if (clamped !== this.value) {\n this.value = clamped;\n this.emitEvent('igcChange', { detail: this.value });\n }\n }\n\n private _calcNewValue(x: number): number {\n const fraction = this._container\n ? pointToFraction(this._container, x, isLTR(this))\n : 0;\n\n return clamp(this._ceilToStep(this.max * fraction), this.step, this.max);\n }\n\n /** Rounds a value up to the next multiple of the step. */\n private _ceilToStep(value: number): number {\n return roundPrecise(\n Math.ceil(value / this.step) * this.step,\n numberOfDecimals(this.step)\n );\n }\n\n /**\n * Removes the floating point noise of the step arithmetic. The decimals of\n * the value and of the step stay, so a value from the consumer keeps its\n * precision, and the value, the event payload and `aria-valuenow` stay\n * readable.\n */\n private _normalize(value: number): number {\n return roundPrecise(\n value,\n numberOfDecimals(this.value) + numberOfDecimals(this.step)\n );\n }\n\n private _updateProjectedSymbols(): void {\n const ltr = isLTR(this);\n const partFull = '[part=\"symbol full\"]';\n const partEmpty = '[part=\"symbol empty\"]';\n\n for (const [i, symbol] of this._symbols.entries()) {\n const full = symbol.renderRoot.querySelector<HTMLElement>(partFull);\n const empty = symbol.renderRoot.querySelector<HTMLElement>(partEmpty);\n const { forward, backward } = this._clipSymbol(i, ltr);\n\n if (full) {\n full.style.clipPath = forward;\n }\n\n if (empty) {\n empty.style.clipPath = backward;\n }\n }\n }\n\n private _clipSymbol(index: number, isLTR = true) {\n const value = this._hoverState ? this._hoverValue : this.value;\n const progress = index + 1 - value;\n const exclusive = progress === 0 ? 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 isLTR ? selection : 1 - selection\n )}% 0 0)`;\n const backward = `inset(0 0 0 ${activate(\n isLTR ? 1 - selection : selection\n )}%)`;\n\n return {\n backward: isLTR ? backward : forward,\n forward: isLTR ? forward : backward,\n };\n }\n\n //#endregion\n\n //#region Public methods\n\n /**\n * Increments the value of the control by `n` steps multiplied by the\n * step factor.\n */\n public stepUp(n = 1): void {\n this.value = this._normalize(this.value + 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): void {\n this.value = this._normalize(this.value - n * this.step);\n }\n\n //#endregion\n\n private _renderSymbols() {\n const ltr = isLTR(this);\n\n return map(range(this.max), (i) => {\n const { forward, backward } = this._clipSymbol(i, ltr);\n\n return html`\n <igc-rating-symbol exportparts=\"symbol, full, empty\">\n <igc-icon\n collection=\"default\"\n name=\"star_filled\"\n style=${styleMap({ clipPath: forward })}\n ></igc-icon>\n <igc-icon\n collection=\"default\"\n name=\"star_outlined\"\n style=${styleMap({ clipPath: backward })}\n slot=\"empty\"\n ></igc-icon>\n </igc-rating-symbol>\n `;\n });\n }\n\n protected override render() {\n const hoverActive = this.hoverPreview && this._isInteractive;\n const valueLabelHidden = !this._slots.hasAssignedNodes('value-label', true);\n const labelId = this.label ? 'rating-label' : undefined;\n const ariaLabel = this.label ? undefined : (this.ariaLabel ?? undefined);\n\n return html`\n <label part=\"label\" id=\"rating-label\" ?hidden=${!this.label}\n >${this.label}</label\n >\n <div\n part=\"base\"\n role=\"slider\"\n tabindex=${this.disabled ? -1 : 0}\n aria-labelledby=${ifDefined(labelId)}\n aria-label=${ifDefined(ariaLabel)}\n aria-valuemin=\"0\"\n aria-valuenow=${this.value}\n aria-valuemax=${this.max}\n aria-valuetext=${this._valueText}\n aria-disabled=${this.disabled}\n aria-readonly=${this.readOnly}\n >\n <div\n aria-hidden=\"true\"\n part=\"symbols\"\n @click=${bindIf(this._isInteractive, this._handleClick)}\n @pointerenter=${bindIf(hoverActive, this._handleHoverEnabled)}\n @pointerleave=${bindIf(hoverActive, this._handleHoverDisabled)}\n @pointercancel=${bindIf(hoverActive, this._handleHoverDisabled)}\n @pointermove=${bindIf(hoverActive, this._handlePointerMove)}\n >\n <slot name=\"symbol\">\n ${this._hasProjectedSymbols ? nothing : this._renderSymbols()}\n </slot>\n </div>\n <label part=\"value-label\" ?hidden=${valueLabelHidden}>\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"]}
|
|
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 { property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n ariaBindings,\n resolveNaming,\n} from '#internals/controllers/aria-projection.js';\nimport {\n addKeybindings,\n arrowDown,\n arrowLeft,\n arrowRight,\n arrowUp,\n endKey,\n homeKey,\n} from '#internals/controllers/key-bindings.js';\nimport {\n addSlotController,\n type InferSlotNames,\n type SlotChangeCallbackParameters,\n setSlots,\n} from '#internals/controllers/slot.js';\nimport { coercedProperty } from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedMixin } from '#internals/mixins/forms/associated.js';\nimport { FormValueNumberTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { isLTR, pointToFraction } from '#internals/utils/dom.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport {\n asNumber,\n clamp,\n numberOfDecimals,\n roundPrecise,\n} from '#internals/utils/math.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcRatingSymbolComponent from './rating-symbol.js';\nimport { styles } from './themes/rating.base.css.js';\nimport { styles as shared } from './themes/shared/rating.common.css.js';\nimport { all } from './themes/themes.js';\n\nexport interface IgcRatingComponentEventMap {\n igcChange: CustomEvent<number>;\n igcHover: CustomEvent<number>;\n}\n\nconst Slots = setSlots('symbol', 'value-label');\n\n/**\n * A rating component that allows users to view and provide ratings using customizable symbols.\n * It supports fractional values, hover previews, keyboard navigation, single-selection mode,\n * and integrates with forms as a number input.\n *\n * @example\n * ```html\n * <!-- Basic rating -->\n * <igc-rating value=\"3\" max=\"5\" label=\"Rate this product\"></igc-rating>\n * ```\n *\n * @example\n * ```html\n * <!-- Half-star rating with hover preview -->\n * <igc-rating step=\"0.5\" hover-preview value-format=\"{0} out of {1} stars\"></igc-rating>\n * ```\n *\n * @example\n * ```html\n * <!-- Custom symbols via projected rating symbols -->\n * <igc-rating>\n * <igc-rating-symbol>\n * <igc-icon name=\"heart_filled\" collection=\"default\"></igc-icon>\n * <igc-icon name=\"heart_outlined\" collection=\"default\" slot=\"empty\"></igc-icon>\n * </igc-rating-symbol>\n * <igc-rating-symbol>\n * <igc-icon name=\"heart_filled\" collection=\"default\"></igc-icon>\n * <igc-icon name=\"heart_outlined\" collection=\"default\" slot=\"empty\"></igc-icon>\n * </igc-rating-symbol>\n * </igc-rating>\n * ```\n *\n * @element igc-rating\n *\n * @slot symbol - Slot for projecting custom rating symbol elements. When used, the number of symbols determines the `max` value.\n * @slot value-label - Slot for custom content displayed alongside the rating value.\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) applied to projected full symbols, other than icons, when the rating is disabled.\n * @cssproperty --symbol-empty-filter - The filter(s) applied to projected empty symbols, other than icons, when the rating is disabled.\n */\nexport default class IgcRatingComponent extends FormAssociatedMixin(\n EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>(\n LitElement\n )\n) {\n public static readonly tagName = 'igc-rating';\n public static styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcRatingComponent,\n IgcIconComponent,\n IgcRatingSymbolComponent\n );\n }\n\n //#region Internal state and properties\n\n protected readonly _slots = addSlotController(this, {\n slots: Slots,\n onChange: this._handleSlotChange,\n });\n\n protected override readonly _formValue = createFormValueState(this, {\n initialValue: 0,\n transformers: FormValueNumberTransformers,\n });\n\n private _symbols: IgcRatingSymbolComponent[] = [];\n\n @query('[part=\"symbols\"]', true)\n private _container?: HTMLElement;\n\n @query('[part=\"base\"]', true)\n private readonly _slider!: HTMLElement;\n\n @state()\n private _hoverValue = -1;\n\n @state()\n private _hoverState = false;\n\n private get _isInteractive(): boolean {\n return !(this.readOnly || this.disabled);\n }\n\n private get _hasProjectedSymbols(): boolean {\n return this._symbols.length > 0;\n }\n\n private get _valueText(): string {\n return this.valueFormat\n ? formatString(this.valueFormat, this.value, this.max)\n : `${this.value} of ${this.max}`;\n }\n\n //#endregion\n\n //#region Public attributes and properties\n\n /**\n * The maximum value for the rating.\n *\n * If there are projected symbols, the maximum value will be resolved\n * based on the number of symbols.\n *\n * @attr max\n * @default 5\n */\n @property({ type: Number })\n @coercedProperty<number, IgcRatingComponent>({\n transform: ({ value, host }) =>\n host._hasProjectedSymbols\n ? host._symbols.length\n : Math.max(0, asNumber(value)),\n onChange: ({ value, host }) => {\n if (value < host.value) {\n host.value = value;\n }\n },\n })\n public max = 5;\n\n /**\n * The minimum value change allowed.\n *\n * Valid values are in the interval between 0.001 and 1 inclusive.\n * The component clamps a value outside of the interval to the closest bound.\n *\n * @attr step\n * @default 1\n */\n @property({ type: Number })\n @coercedProperty<number, IgcRatingComponent>({\n transform: ({ value, host }) =>\n host.single ? 1 : clamp(asNumber(value, 1), 0.001, 1),\n })\n public step = 1;\n\n /**\n * The label of the control.\n * @attr label\n */\n @property()\n public label?: string;\n\n /**\n * A format string which sets aria-valuetext. Instances of '{0}' will be replaced\n * with the current value of the control and instances of '{1}' with the maximum value for the control.\n *\n * Important for screen-readers and useful for localization.\n * @attr value-format\n */\n @property({ attribute: 'value-format' })\n public valueFormat?: string;\n\n /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n /**\n * The value of the component\n *\n * @attr value\n * @default 0\n */\n @property({ type: Number })\n public set value(number: number) {\n const value = asNumber(number);\n this._formValue.setValueAndFormState(\n this.hasUpdated ? clamp(value, 0, this.max) : Math.max(value, 0)\n );\n }\n\n public get value(): number {\n return this._formValue.value;\n }\n\n /**\n * Whether to show a preview of the value when hovering over the symbols.\n *\n * @attr hover-preview\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n public hoverPreview = false;\n\n /**\n * Makes the control a readonly field.\n *\n * @attr readonly\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'readonly' })\n public readOnly = false;\n\n /**\n * Toggles single selection visual mode.\n *\n * @attr single\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n @coercedProperty<boolean, IgcRatingComponent>({\n transform: ({ value }) => Boolean(value),\n onChange: ({ value, host }) => {\n if (value) {\n host.step = 1;\n host.value = Math.ceil(host.value);\n }\n },\n })\n public single = false;\n\n /**\n * Whether to reset the rating when the user selects the same value.\n *\n * @attr allow-reset\n * @default false\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-reset' })\n public allowReset = false;\n\n //#endregion\n\n //#region Lit lifecycle hooks\n\n constructor() {\n super();\n\n addThemingController(this, all);\n\n addKeybindings(this, {\n skip: () => !this._isInteractive,\n bindingDefaults: { repeat: true },\n })\n .set(arrowUp, () => this._emitValueUpdate(this.value + this.step))\n .set(arrowRight, () =>\n this._emitValueUpdate(\n isLTR(this) ? this.value + this.step : this.value - this.step\n )\n )\n .set(arrowDown, () => this._emitValueUpdate(this.value - this.step))\n .set(arrowLeft, () =>\n this._emitValueUpdate(\n isLTR(this) ? this.value - this.step : this.value + this.step\n )\n )\n .set(homeKey, () => this._emitValueUpdate(this.step))\n .set(endKey, () => this._emitValueUpdate(this.max));\n }\n\n protected override firstUpdated(): void {\n this._formValue.setValueAndFormState(clamp(this.value, 0, this.max));\n this._pristine = true;\n }\n\n protected override updated(): void {\n if (this._hasProjectedSymbols) {\n this._updateProjectedSymbols();\n }\n }\n\n //#endregion\n\n //#region Event handlers\n\n private _handleClick({ clientX }: PointerEvent): void {\n const value = this._calcNewValue(clientX);\n const sameValue = this.value === value;\n\n if (this.allowReset && sameValue) {\n this._emitValueUpdate(0);\n } else if (!sameValue) {\n this._emitValueUpdate(value);\n }\n }\n\n private _handlePointerMove({ clientX }: PointerEvent): void {\n const value = this._calcNewValue(clientX);\n\n if (this._hoverValue !== value) {\n // Since pointermove spams a lot, only emit on a value change\n this._hoverValue = value;\n this.emitEvent('igcHover', { detail: this._hoverValue });\n }\n }\n\n private _handleSlotChange({\n slot,\n }: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>): void {\n if (slot === 'symbol') {\n this._symbols = this._slots.getAssignedElements('symbol', {\n selector: IgcRatingSymbolComponent.tagName,\n });\n\n if (this._hasProjectedSymbols) {\n this.max = this._symbols.length;\n }\n }\n }\n\n /** Focuses the slider, as a native range input label does. */\n protected override _handleLabelActivation(): void {\n this._slider.focus();\n }\n\n private _handleHoverEnabled(): void {\n this._hoverState = true;\n }\n\n private _handleHoverDisabled(): void {\n this._hoverState = false;\n this._hoverValue = -1;\n }\n\n //#endregion\n\n //#region Private methods\n\n private _emitValueUpdate(next: number): void {\n this._setTouchedState();\n\n const clamped = clamp(this._normalize(next), 0, this.max);\n if (clamped !== this.value) {\n this.value = clamped;\n this.emitEvent('igcChange', { detail: this.value });\n }\n }\n\n private _calcNewValue(x: number): number {\n const fraction = this._container\n ? pointToFraction(this._container, x, isLTR(this))\n : 0;\n\n return clamp(this._ceilToStep(this.max * fraction), this.step, this.max);\n }\n\n /** Rounds a value up to the next multiple of the step. */\n private _ceilToStep(value: number): number {\n return roundPrecise(\n Math.ceil(value / this.step) * this.step,\n numberOfDecimals(this.step)\n );\n }\n\n /**\n * Removes the floating point noise of the step arithmetic. The decimals of\n * the value and of the step stay, so a value from the consumer keeps its\n * precision, and the value, the event payload and `aria-valuenow` stay\n * readable.\n */\n private _normalize(value: number): number {\n return roundPrecise(\n value,\n numberOfDecimals(this.value) + numberOfDecimals(this.step)\n );\n }\n\n private _updateProjectedSymbols(): void {\n const ltr = isLTR(this);\n const partFull = '[part=\"symbol full\"]';\n const partEmpty = '[part=\"symbol empty\"]';\n\n for (const [i, symbol] of this._symbols.entries()) {\n const full = symbol.renderRoot.querySelector<HTMLElement>(partFull);\n const empty = symbol.renderRoot.querySelector<HTMLElement>(partEmpty);\n const { forward, backward } = this._clipSymbol(i, ltr);\n\n if (full) {\n full.style.clipPath = forward;\n }\n\n if (empty) {\n empty.style.clipPath = backward;\n }\n }\n }\n\n private _clipSymbol(index: number, ltr: boolean) {\n const value = this._hoverState ? this._hoverValue : this.value;\n const progress = index + 1 - value;\n const exclusive = progress === 0 ? 0 : 1;\n const selection = this.single ? exclusive : progress;\n const full = clamp(selection * 100, 0, 100);\n const empty = clamp((1 - selection) * 100, 0, 100);\n\n return ltr\n ? { forward: `inset(0 ${full}% 0 0)`, backward: `inset(0 0 0 ${empty}%)` }\n : {\n forward: `inset(0 0 0 ${full}%)`,\n backward: `inset(0 ${empty}% 0 0)`,\n };\n }\n\n //#endregion\n\n //#region Public methods\n\n /**\n * Increments the value of the control by `n` steps multiplied by the\n * step factor.\n */\n public stepUp(n = 1): void {\n this.value = this._normalize(this.value + 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): void {\n this.value = this._normalize(this.value - n * this.step);\n }\n\n //#endregion\n\n private _renderSymbols() {\n const ltr = isLTR(this);\n\n return map(range(this.max), (i) => {\n const { forward, backward } = this._clipSymbol(i, ltr);\n\n return html`\n <igc-rating-symbol exportparts=\"symbol, full, empty\">\n <igc-icon\n collection=\"default\"\n name=\"star_filled\"\n style=${styleMap({ clipPath: forward })}\n ></igc-icon>\n <igc-icon\n collection=\"default\"\n name=\"star_outlined\"\n style=${styleMap({ clipPath: backward })}\n slot=\"empty\"\n ></igc-icon>\n </igc-rating-symbol>\n `;\n });\n }\n\n protected override render() {\n const hoverActive = this.hoverPreview && this._isInteractive;\n const valueLabelHidden = !this._slots.hasAssignedNodes('value-label', true);\n\n return html`\n <label part=\"label\" id=\"rating-label\" ?hidden=${!this.label}\n >${this.label}</label\n >\n <div\n ${ariaBindings(resolveNaming(this, Boolean(this.label) && 'rating-label'))}\n part=\"base\"\n role=\"slider\"\n tabindex=${this.disabled ? -1 : 0}\n aria-valuemin=\"0\"\n aria-valuenow=${this.value}\n aria-valuemax=${this.max}\n aria-valuetext=${this._valueText}\n aria-disabled=${this.disabled}\n aria-readonly=${this.readOnly}\n >\n <div\n aria-hidden=\"true\"\n part=\"symbols\"\n @click=${bindIf(this._isInteractive, this._handleClick)}\n @pointerenter=${bindIf(hoverActive, this._handleHoverEnabled)}\n @pointerleave=${bindIf(hoverActive, this._handleHoverDisabled)}\n @pointercancel=${bindIf(hoverActive, this._handleHoverDisabled)}\n @pointermove=${bindIf(hoverActive, this._handlePointerMove)}\n >\n <slot name=\"symbol\">\n ${this._hasProjectedSymbols ? nothing : this._renderSymbols()}\n </slot>\n </div>\n <label part=\"value-label\" ?hidden=${valueLabelHidden}>\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"]}
|
|
@@ -104,8 +104,8 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
|
|
|
104
104
|
expanded: `${this.open}`,
|
|
105
105
|
controls: this._list ? [this._list] : null,
|
|
106
106
|
describedBy: this._helperText ? [this._helperText] : null,
|
|
107
|
-
labelledBy: this._internals.labels,
|
|
108
107
|
}),
|
|
108
|
+
hasOwnLabel: () => Boolean(this.label),
|
|
109
109
|
});
|
|
110
110
|
addKeybindings(this, {
|
|
111
111
|
skip: () => this.disabled,
|