9936542666

Committed 15 Jul 2024 08:58AM UTC coverage: 97.866% (+0.02%) from 97.845%

Build # 9936542666

Build Type

push

github

Committed by

web-flow

Commit Message

refactor: Removing size property from components (#1279)

* refactor: Removing size property from components
---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Run Details

3526 of 3744 branches covered (94.18%)

Branch coverage included in aggregate %.

42 of 43 new or added lines in 11 files covered. (97.67%)

1 existing line in 1 file now uncovered.

22019 of 22358 relevant lines covered (98.48%)

418.72 hits per line

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

93.68

/src/components/chip/chip.ts

import { LitElement, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { type Ref, createRef, ref } from 'lit/directives/ref.js';

import { themes } from '../../theming/theming-decorator.js';
import { addKeybindings } from '../common/controllers/key-bindings.js';
import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import IgcIconComponent from '../icon/icon.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 IgcChipEventMap {
  igcRemove: CustomEvent<boolean>;
  igcSelect: CustomEvent<boolean>;
}
/**
 * Chips help people enter information, make selections, filter content, or trigger actions.
 *
 * @element igc-chip
 *
 * @slot - Renders the chip data.
 * @slot prefix - Renders content before the data of the chip.
 * @slot suffix - Renders content after the data of the chip.
 *
 * @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.
 */
@themes(all)
export default class IgcChipComponent extends EventEmitterMixin<
  IgcChipEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-chip';
  public static styles = [styles, shared];

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

  private _removePartRef: Ref<HTMLSlotElement> = createRef();

  /**
   * 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;

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

  /**
   * A property that sets the color variant of the chip component.
   * @attr
   */
  @property({ reflect: true })
  public variant!: 'primary' | 'success' | 'danger' | 'warning' | 'info';

  constructor() {
    super();

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

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    root.addEventListener('slotchange', () => this.requestUpdate());
    return root;
  }

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

  protected handleRemove(e: Event) {
    this.emitEvent('igcRemove');
    e.stopPropagation();
  }

  protected override render() {
    return html`
      <button
        part="base"
        .disabled="${this.disabled}"
        aria-selected="${this.selected ? 'true' : 'false'}"
        aria-disabled="${this.disabled ? 'true' : 'false'}"
        @click=${this.handleSelect}
      >
        <span part="prefix">
          ${this.selectable && this.selected
            ? html`<slot name="select">
                <igc-icon name="chip_select" collection="internal"></igc-icon>
              </slot>`
            : nothing}
          <slot name="start"></slot>
          <slot name="prefix"></slot>
        </span>
        <slot></slot>
        <span part="suffix">
          <slot name="end"></slot>
          <slot name="suffix"></slot>
          ${this.removable && !this.disabled
            ? html`<slot
                ${ref(this._removePartRef)}
                @click=${this.handleRemove}
                name="remove"
              >
                <igc-icon
                  name="chip_cancel"
                  collection="internal"
                  tabindex="0"
                  role="button"
                  aria-label="remove"
                ></igc-icon>
              </slot>`
            : nothing}
        </span>
      </button>
    `;
  }
}

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

1	import { LitElement, html, nothing } from 'lit';	19✔
2	import { property } from 'lit/decorators.js';	19✔
3	import { type Ref, createRef, ref } from 'lit/directives/ref.js';	19✔
4		19✔
5	import { themes } from '../../theming/theming-decorator.js';	19✔
6	import { addKeybindings } from '../common/controllers/key-bindings.js';	19✔
7	import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';	19✔
8	import { registerComponent } from '../common/definitions/register.js';	19✔
9	import type { Constructor } from '../common/mixins/constructor.js';	19✔
10	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	19✔
11	import IgcIconComponent from '../icon/icon.js';	19✔
12	import { styles } from './themes/chip.base.css.js';	19✔
13	import { styles as shared } from './themes/shared/chip.common.css.js';	19✔
14	import { all } from './themes/themes.js';	19✔
15		19✔
16	export interface IgcChipEventMap {	19✔
17	igcRemove: CustomEvent<boolean>;	19✔
18	igcSelect: CustomEvent<boolean>;	19✔
19	}	19✔
20	/**	19✔
21	* Chips help people enter information, make selections, filter content, or trigger actions.	19✔
22	*	19✔
23	* @element igc-chip	19✔
24	*	19✔
25	* @slot - Renders the chip data.	19✔
26	* @slot prefix - Renders content before the data of the chip.	19✔
27	* @slot suffix - Renders content after the data of the chip.	19✔
28	*	19✔
29	* @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.	19✔
30	* @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.	19✔
31	*	19✔
32	* @csspart base - The base wrapper of the chip.	19✔
33	* @csspart prefix - The prefix container of the chip.	19✔
34	* @csspart suffix - The suffix container of the chip.	19✔
35	*/	19✔
36	@themes(all)	19✔
37	export default class IgcChipComponent extends EventEmitterMixin<	19✔
38	IgcChipEventMap,	19✔
39	Constructor<LitElement>	19✔
40	>(LitElement) {	19✔
41	public static readonly tagName = 'igc-chip';	19✔
42	public static styles = [styles, shared];	19✔
43		19✔
44	/* blazorSuppress */	19✔
45	public static register() {	19✔
46	registerComponent(IgcChipComponent, IgcIconComponent);	1✔
47	}	1✔
48		19✔
49	private _removePartRef: Ref<HTMLSlotElement> = createRef();	19✔
50		19✔
51	/**	19✔
52	* Sets the disabled state for the chip.	19✔
53	* @attr	19✔
54	*/	19✔
55	@property({ type: Boolean, reflect: true })	19✔
56	public disabled = false;	19✔
57		19✔
58	/**	19✔
59	* Defines if the chip is removable or not.	19✔
60	* @attr	19✔
61	*/	19✔
62	@property({ type: Boolean, reflect: true })	19✔
63	public removable = false;	19✔
64		19✔
65	/**	19✔
66	* Defines if the chip is selectable or not.	19✔
67	* @attr	19✔
68	*/	19✔
69	@property({ type: Boolean, reflect: true })	19✔
70	public selectable = false;	19✔
71		19✔
72	/**	19✔
73	* Defines if the chip is selected or not.	19✔
74	* @attr	19✔
75	*/	19✔
76	@property({ type: Boolean, reflect: true })	19✔
77	@blazorTwoWayBind('igcSelect', 'detail')	19✔
78	public selected = false;	19✔
79		19✔
80	/**	19✔
81	* A property that sets the color variant of the chip component.	19✔
82	* @attr	19✔
83	*/	19✔
84	@property({ reflect: true })	19✔
85	public variant!: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info';	19✔
86		19✔
87	constructor() {	19✔
88	super();	30✔
89		30✔
90	addKeybindings(this, {	30✔
91	ref: this._removePartRef,	30✔
92	bindingDefaults: { triggers: ['keyup'] },	30✔
93	}).setActivateHandler(this.handleRemove);	30✔
94	}	30✔
95		19✔
96	protected override createRenderRoot() {	19✔
97	const root = super.createRenderRoot();	6✔
98	root.addEventListener('slotchange', () => this.requestUpdate());	6✔
99	return root;	6✔
100	}	6✔
101		19✔
102	protected handleSelect() {	19✔
103	if (this.selectable) {	×
104	this.selected = !this.selected;	×
105	this.emitEvent('igcSelect', { detail: this.selected });	×
106	}	×
107	}	×
108		19✔
109	protected handleRemove(e: Event) {	19✔
110	this.emitEvent('igcRemove');	×
111	e.stopPropagation();	×
112	}	×
113		19✔
114	protected override render() {	19✔
115	return html`	17✔
116	<button	17✔
117	part="base"	17✔
118	.disabled="${this.disabled}"	17✔
119	aria-selected="${this.selected ? 'true' : 'false'}"	17✔
120	aria-disabled="${this.disabled ? 'true' : 'false'}"	17✔
121	@click=${this.handleSelect}	17✔
122	>	17✔
123	<span part="prefix">	17✔
124	${this.selectable && this.selected	17✔
125	? html`<slot name="select">	17!
NEW 126	<igc-icon name="chip_select" collection="internal"></igc-icon>	×
UNCOV 127	</slot>`	×
128	: nothing}	17✔
129	<slot name="start"></slot>	17✔
130	<slot name="prefix"></slot>	17✔
131	</span>	17✔
132	<slot></slot>	17✔
133	<span part="suffix">	17✔
134	<slot name="end"></slot>	17✔
135	<slot name="suffix"></slot>	17✔
136	${this.removable && !this.disabled	17✔
137	? html`<slot	17✔
138	${ref(this._removePartRef)}	1✔
139	@click=${this.handleRemove}	1✔
140	name="remove"	1✔
141	>	1✔
142	<igc-icon	1✔
143	name="chip_cancel"	1✔
144	collection="internal"	1✔
145	tabindex="0"	1✔
146	role="button"	1✔
147	aria-label="remove"	1✔
148	></igc-icon>	1✔
149	</slot>`	1✔
150	: nothing}	17✔
151	</span>	17✔
152	</button>	17✔
153	`;	17✔
154	}	17✔
155	}	19✔
156		19✔
157	declare global {	19✔
158	interface HTMLElementTagNameMap {	19✔
159	'igc-chip': IgcChipComponent;	19✔
160	}	19✔
161	}	19✔

IgniteUI / igniteui-webcomponents / 9936542666

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