18190547640

Committed 02 Oct 2025 10:35AM UTC coverage: 98.119% (-0.06%) from 98.178%

Build # 18190547640

Build Type

Pull #1835

github

Committed by

web-flow

Commit Message

Merge 3ff39a907 into a9ac4512d

Pull Request Pull Request #1835: feat(localization): Integration of new i18nManager resource strings.

Run Details

5316 of 5598 branches covered (94.96%)

Branch coverage included in aggregate %.

602 of 629 new or added lines in 23 files covered. (95.71%)

1 existing line in 1 file now uncovered.

35112 of 35605 relevant lines covered (98.62%)

1641.16 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.28

/src/components/chip/chip.ts

import {
  ChipResourceStringsEN,
  type IChipResourceStrings,
} from 'igniteui-i18n-core';
import { html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { addKeybindings } from '../common/controllers/key-bindings.js';
import { addSlotController, setSlots } from '../common/controllers/slot.js';
import { registerComponent } from '../common/definitions/register.js';
import { addI18nController } from '../common/i18n/i18n-controller.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import IgcIconComponent from '../icon/icon.js';
import type { StyleVariant } from '../types.js';
import { styles } from './themes/chip.base.css.js';
import { styles as shared } from './themes/shared/chip.common.css.js';
import { all } from './themes/themes.js';

export interface IgcChipComponentEventMap {
  igcRemove: CustomEvent<boolean>;
  igcSelect: CustomEvent<boolean>;
}

/**
 * Chips help people enter information, make selections, filter content, or trigger actions.
 *
 * @element igc-chip
 *
 * @slot - Renders content in the default slot of the chip.
 * @slot prefix - Renders content at the start of the chip, before the default content.
 * @slot suffix - Renders content at the end of the chip after the default content.
 * @slot select - Content to render when the chip in selected state.
 * @slot remove - Content to override the default remove chip icon.
 *
 * @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.
 * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.
 *
 * @csspart base - The base wrapper of the chip.
 * @csspart prefix - The prefix container of the chip.
 * @csspart suffix - The suffix container of the chip.
 */
export default class IgcChipComponent extends EventEmitterMixin<
  IgcChipComponentEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-chip';
  public static styles = [styles, shared];

  /* blazorSuppress */
  public static register(): void {
    registerComponent(IgcChipComponent, IgcIconComponent);
  }

  private readonly _removePartRef = createRef<HTMLSlotElement>();

  private readonly _slots = addSlotController(this, {
    slots: setSlots('prefix', 'suffix', 'start', 'end', 'select', 'remove'),
  });

  /**
   * Sets the disabled state for the chip.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  /**
   * Defines if the chip is removable or not.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public removable = false;

  /**
   * Defines if the chip is selectable or not.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public selectable = false;

  /* @tsTwoWayProperty(true, "igcSelect", "detail", false) */
  /**
   * Defines if the chip is selected or not.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public selected = false;

  /**
   * A property that sets the color variant of the chip component.
   * @attr
   */
  @property({ reflect: true })
  public variant!: StyleVariant;

  /**
   * Gets/Sets the locale used for formatting and displaying the dates in the component.
   * @attr locale
   */
  @property()
  public set locale(value: string) {
    this._i18nController.locale = value;
  }

  public get locale() {
    return this._i18nController.locale;
  }

  /**
   * The resource strings for localization.
   */
  @property({ attribute: false })
  public set resourceStrings(value: IChipResourceStrings) {
    this._i18nController.resourceStrings = value;
  }

  public get resourceStrings(): IChipResourceStrings {
    return this._i18nController.resourceStrings;
  }

  private readonly _i18nController = addI18nController<IChipResourceStrings>(
    this,
    {
      defaultEN: ChipResourceStringsEN,
    }
  );

  constructor() {
    super();

    addThemingController(this, all);

    addKeybindings(this, {
      ref: this._removePartRef,
      bindingDefaults: { triggers: ['keyup'] },
    }).setActivateHandler(this._handleRemove);
  }

  protected _handleSelect(): void {
    if (this.selectable) {
      this.selected = !this.selected;
      this.emitEvent('igcSelect', { detail: this.selected });
    }
  }

  protected _handleRemove(event: Event): void {
    event.stopPropagation();
    this.emitEvent('igcRemove');
  }

  protected _renderPrefix() {
    const isVisible =
      this._slots.hasAssignedElements('prefix') ||
      this._slots.hasAssignedElements('start');

    const selectSlot =
      this.selectable && this.selected
        ? html`
            <slot name="select">
              <igc-icon
                name="selected"
                collection="default"
                aria-label=${this.resourceStrings.chip_select ?? 'select chip'}
              ></igc-icon>
            </slot>
          `
        : nothing;

    return html`
      <span part="prefix" ?hidden=${!isVisible && !this.selected}>
        ${selectSlot}
        <slot name="start"></slot>
        <slot name="prefix"></slot>
      </span>
    `;
  }

  protected _renderSuffix() {
    const isVisible =
      this._slots.hasAssignedElements('suffix') ||
      this._slots.hasAssignedElements('end');

    const removeSlot =
      this.removable && !this.disabled
        ? html`
            <slot
              ${ref(this._removePartRef)}
              name="remove"
              @click=${this._handleRemove}
            >
              <igc-icon
                name="remove"
                collection="default"
                tabindex="0"
                role="button"
                aria-label=${this.resourceStrings.chip_remove ?? 'remove chip'}
              ></igc-icon>
            </slot>
          `
        : nothing;

    return html`
      <span part="suffix" ?hidden=${!isVisible && !this.removable}>
        <slot name="end"></slot>
        <slot name="suffix"></slot>
        ${removeSlot}
      </span>
    `;
  }

  protected override render() {
    const ariaPressed = this.selectable ? this.selected.toString() : null;

    return html`
      <button
        part="base"
        .ariaPressed=${ariaPressed}
        ?disabled=${this.disabled}
        @click=${this._handleSelect}
      >
        ${this._renderPrefix()}
        <slot></slot>
        ${this._renderSuffix()}
      </button>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-chip': IgcChipComponent;
  }
}

1	import {	17✔
2	ChipResourceStringsEN,	17✔
3	type IChipResourceStrings,	17✔
4	} from 'igniteui-i18n-core';	17✔
5	import { html, LitElement, nothing } from 'lit';	17✔
6	import { property } from 'lit/decorators.js';	17✔
7	import { createRef, ref } from 'lit/directives/ref.js';	17✔
8	import { addThemingController } from '../../theming/theming-controller.js';	17✔
9	import { addKeybindings } from '../common/controllers/key-bindings.js';	17✔
10	import { addSlotController, setSlots } from '../common/controllers/slot.js';	17✔
11	import { registerComponent } from '../common/definitions/register.js';	17✔
12	import { addI18nController } from '../common/i18n/i18n-controller.js';	17✔
13	import type { Constructor } from '../common/mixins/constructor.js';	17✔
14	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	17✔
15	import IgcIconComponent from '../icon/icon.js';	17✔
16	import type { StyleVariant } from '../types.js';	17✔
17	import { styles } from './themes/chip.base.css.js';	17✔
18	import { styles as shared } from './themes/shared/chip.common.css.js';	17✔
19	import { all } from './themes/themes.js';	17✔
20		17✔
21	export interface IgcChipComponentEventMap {	17✔
22	igcRemove: CustomEvent<boolean>;	17✔
23	igcSelect: CustomEvent<boolean>;	17✔
24	}	17✔
25		17✔
26	/**	17✔
27	* Chips help people enter information, make selections, filter content, or trigger actions.	17✔
28	*	17✔
29	* @element igc-chip	17✔
30	*	17✔
31	* @slot - Renders content in the default slot of the chip.	17✔
32	* @slot prefix - Renders content at the start of the chip, before the default content.	17✔
33	* @slot suffix - Renders content at the end of the chip after the default content.	17✔
34	* @slot select - Content to render when the chip in selected state.	17✔
35	* @slot remove - Content to override the default remove chip icon.	17✔
36	*	17✔
37	* @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.	17✔
38	* @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.	17✔
39	*	17✔
40	* @csspart base - The base wrapper of the chip.	17✔
41	* @csspart prefix - The prefix container of the chip.	17✔
42	* @csspart suffix - The suffix container of the chip.	17✔
43	*/	17✔
44	export default class IgcChipComponent extends EventEmitterMixin<	17✔
45	IgcChipComponentEventMap,	17✔
46	Constructor<LitElement>	17✔
47	>(LitElement) {	17✔
48	public static readonly tagName = 'igc-chip';	17✔
49	public static styles = [styles, shared];	17✔
50		17✔
51	/* blazorSuppress */	17✔
52	public static register(): void {	17✔
53	registerComponent(IgcChipComponent, IgcIconComponent);	8✔
54	}	8✔
55		17✔
56	private readonly _removePartRef = createRef<HTMLSlotElement>();	17✔
57		17✔
58	private readonly _slots = addSlotController(this, {	17✔
59	slots: setSlots('prefix', 'suffix', 'start', 'end', 'select', 'remove'),	17✔
60	});	17✔
61		17✔
62	/**	17✔
63	* Sets the disabled state for the chip.	17✔
64	* @attr	17✔
65	*/	17✔
66	@property({ type: Boolean, reflect: true })	17✔
67	public disabled = false;	17✔
68		17✔
69	/**	17✔
70	* Defines if the chip is removable or not.	17✔
71	* @attr	17✔
72	*/	17✔
73	@property({ type: Boolean, reflect: true })	17✔
74	public removable = false;	17✔
75		17✔
76	/**	17✔
77	* Defines if the chip is selectable or not.	17✔
78	* @attr	17✔
79	*/	17✔
80	@property({ type: Boolean, reflect: true })	17✔
81	public selectable = false;	17✔
82		17✔
83	/* @tsTwoWayProperty(true, "igcSelect", "detail", false) */	17✔
84	/**	17✔
85	* Defines if the chip is selected or not.	17✔
86	* @attr	17✔
87	*/	17✔
88	@property({ type: Boolean, reflect: true })	17✔
89	public selected = false;	17✔
90		17✔
91	/**	17✔
92	* A property that sets the color variant of the chip component.	17✔
93	* @attr	17✔
94	*/	17✔
95	@property({ reflect: true })	17✔
96	public variant!: StyleVariant;	17✔
97		17✔
98	/**	17✔
99	* Gets/Sets the locale used for formatting and displaying the dates in the component.	17✔
100	* @attr locale	17✔
101	*/	17✔
102	@property()	17✔
103	public set locale(value: string) {	17✔
NEW 104	this._i18nController.locale = value;	×
NEW 105	}	×
106		17✔
107	public get locale() {	17✔
108	return this._i18nController.locale;	74✔
109	}	74✔
110		17✔
111	/**	17✔
112	* The resource strings for localization.	17✔
113	*/	17✔
114	@property({ attribute: false })	17✔
115	public set resourceStrings(value: IChipResourceStrings) {	17✔
NEW 116	this._i18nController.resourceStrings = value;	×
NEW 117	}	×
118		17✔
119	public get resourceStrings(): IChipResourceStrings {	17✔
120	return this._i18nController.resourceStrings;	95✔
121	}	95✔
122		17✔
123	private readonly _i18nController = addI18nController<IChipResourceStrings>(	17✔
124	this,	17✔
125	{	17✔
126	defaultEN: ChipResourceStringsEN,	17✔
127	}	17✔
128	);	17✔
129		17✔
130	constructor() {	17✔
131	super();	98✔
132		98✔
133	addThemingController(this, all);	98✔
134		98✔
135	addKeybindings(this, {	98✔
136	ref: this._removePartRef,	98✔
137	bindingDefaults: { triggers: ['keyup'] },	98✔
138	}).setActivateHandler(this._handleRemove);	98✔
139	}	98✔
140		17✔
141	protected _handleSelect(): void {	17✔
142	if (this.selectable) {	×
143	this.selected = !this.selected;	×
144	this.emitEvent('igcSelect', { detail: this.selected });	×
145	}	×
146	}	×
147		17✔
148	protected _handleRemove(event: Event): void {	17✔
149	event.stopPropagation();	3✔
150	this.emitEvent('igcRemove');	3✔
151	}	3✔
152		17✔
153	protected _renderPrefix() {	17✔
154	const isVisible =	149✔
155	this._slots.hasAssignedElements('prefix') \|\|	149✔
156	this._slots.hasAssignedElements('start');	139✔
157		149✔
158	const selectSlot =	149✔
159	this.selectable && this.selected	149!
160	? html`	×
UNCOV 161	<slot name="select">	×
NEW 162	<igc-icon	×
NEW 163	name="selected"	×
NEW 164	collection="default"	×
NEW 165	aria-label=${this.resourceStrings.chip_select ?? 'select chip'}	×
166	></igc-icon>	149✔
167	</slot>	149✔
168	`	149✔
169	: nothing;	149✔
170		149✔
171	return html`	149✔
172	<span part="prefix" ?hidden=${!isVisible && !this.selected}>	149✔
173	${selectSlot}	149✔
174	<slot name="start"></slot>	149✔
175	<slot name="prefix"></slot>	149✔
176	</span>	149✔
177	`;	149✔
178	}	149✔
179		17✔
180	protected _renderSuffix() {	17✔
181	const isVisible =	149✔
182	this._slots.hasAssignedElements('suffix') \|\|	149✔
183	this._slots.hasAssignedElements('end');	149✔
184		149✔
185	const removeSlot =	149✔
186	this.removable && !this.disabled	149✔
187	? html`	21✔
188	<slot	21✔
189	${ref(this._removePartRef)}	21✔
190	name="remove"	21✔
191	@click=${this._handleRemove}	21✔
192	>	21✔
193	<igc-icon	21✔
194	name="remove"	21✔
195	collection="default"	21✔
196	tabindex="0"	21✔
197	role="button"	21✔
198	aria-label=${this.resourceStrings.chip_remove ?? 'remove chip'}	21!
199	></igc-icon>	128✔
200	</slot>	128✔
201	`	128✔
202	: nothing;	128✔
203		149✔
204	return html`	149✔
205	<span part="suffix" ?hidden=${!isVisible && !this.removable}>	149✔
206	<slot name="end"></slot>	149✔
207	<slot name="suffix"></slot>	149✔
208	${removeSlot}	149✔
209	</span>	149✔
210	`;	149✔
211	}	149✔
212		17✔
213	protected override render() {	17✔
214	const ariaPressed = this.selectable ? this.selected.toString() : null;	149✔
215		149✔
216	return html`	149✔
217	<button	149✔
218	part="base"	149✔
219	.ariaPressed=${ariaPressed}	149✔
220	?disabled=${this.disabled}	149✔
221	@click=${this._handleSelect}	149✔
222	>	149✔
223	${this._renderPrefix()}	149✔
224	<slot></slot>	149✔
225	${this._renderSuffix()}	149✔
226	</button>	149✔
227	`;	149✔
228	}	149✔
229	}	17✔
230		17✔
231	declare global {	17✔
232	interface HTMLElementTagNameMap {	17✔
233	'igc-chip': IgcChipComponent;	17✔
234	}	17✔
235	}	17✔

IgniteUI / igniteui-webcomponents / 18190547640

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous