• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

IgniteUI / igniteui-webcomponents / 18314611227

07 Oct 2025 01:39PM UTC coverage: 98.142% (-0.06%) from 98.201%
18314611227

Pull #1835

github

web-flow
Merge 9a79f8f75 into 690c85f9b
Pull Request #1835: feat(localization): Integration of new i18nManager resource strings.

5297 of 5577 branches covered (94.98%)

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.

35164 of 35650 relevant lines covered (98.64%)

1639.18 hits per line

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

93.28
/src/components/chip/chip.ts
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✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc