Skip to content

Commit 1e91a05

Browse files
SAndreevaSAndreeva
committed
feat(igxGrid): drag ghost rework, ESC functionality #935 
2 parents a900f82 + 9703374 commit 1e91a05

38 files changed

+2896
-238
lines changed

‎projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts

+232-21
Original file line numberDiff line numberDiff line change
@@ -46,50 +46,240 @@ let nextId = 0;
4646
templateUrl: 'checkbox.component.html'
4747
})
4848
export class IgxCheckboxComponent implements ControlValueAccessor {
49+
/**
50+
*@hidden
51+
*/
4952
protected _value: any;
50-
53+
/**
54+
* Returns reference to the native checkbox element.
55+
* ```typescript
56+
* let checkboxElement = this.checkbox.checkboxElement;
57+
* ```
58+
* @memberof IgxSwitchComponent
59+
*/
5160
@ViewChild('checkbox') public nativeCheckbox;
61+
/**
62+
* Returns reference to the native label element.
63+
* ```typescript
64+
* let labelElement = this.checkbox.nativeLabel;
65+
* ```
66+
* @memberof IgxSwitchComponent
67+
*/
5268
@ViewChild('label') public nativeLabel;
69+
/**
70+
* Returns reference to the label placeholder element.
71+
* ```typescript
72+
* let labelPlaceholder = this.checkbox.placeholderLabel;
73+
* ```
74+
* @memberof IgxSwitchComponent
75+
*/
5376
@ViewChild('placeholderLabel') public placeholderLabel;
54-
77+
/**
78+
* Sets/gets the `id` of the checkbox component.
79+
* If not set, the `id` of the first checkbox component will be `"igx-checkbox-0"`.
80+
* ```html
81+
* <igx-checkbox id="my-first-checkbox"></igx-checkbox>
82+
* ```
83+
* ```typescript
84+
* let checkboxId = this.checkbox.id;
85+
* ```
86+
* @memberof IgxCheckboxComponent
87+
*/
5588
@HostBinding('attr.id')
5689
@Input() public id = `igx-checkbox-${nextId++}`;
90+
/**
91+
* Sets/gets the id of the `label` element.
92+
* If not set, the id of the `label` in the first checkbox component will be `"igx-checkbox-0-label"`.
93+
* ```html
94+
* <igx-checkbox labelId = "Label1"></igx-checkbox>
95+
* ```
96+
* ```typescript
97+
* let labelId = this.checkbox.labelId;
98+
* ```
99+
* @memberof IgxCheckboxComponent
100+
*/
57101
@Input() public labelId = `${this.id}-label`;
102+
/**
103+
* Sets/gets the `value` attribute.
104+
* ```html
105+
* <igx-checkbox [value] = "'CheckboxValue'"></igx-checkbox>
106+
* ```
107+
* ```typescript
108+
* let value = this.checkbox.value;
109+
* ```
110+
* @memberof IgxCheckboxComponent
111+
*/
58112
@Input() public value: any;
113+
/**
114+
* Sets/gets the `name` attribute.
115+
* ```html
116+
* <igx-checkbox name = "Checkbox1"></igx-checkbox>
117+
* ```
118+
* ```typescript
119+
* let name = this.checkbox.name;
120+
* ```
121+
* @memberof IgxCheckboxComponent
122+
*/
59123
@Input() public name: string;
124+
/**
125+
* Sets/gets the value of the `tabindex` attribute.
126+
* ```html
127+
* <igx-checkbox [tabindex] = "1"></igx-checkbox>
128+
* ```
129+
* ```typescript
130+
* let tabIndex = this.checkbox.tabindex;
131+
* ```
132+
* @memberof IgxCheckboxComponent
133+
*/
60134
@Input() public tabindex: number = null;
135+
/**
136+
* Sets/gets the position of the `label`.
137+
* If not set, the `labelPosition` will have value `"after"`.
138+
* ```html
139+
* <igx-checkbox labelPosition = "before"></igx-checkbox>
140+
* ```
141+
* ```typescript
142+
* let labelPosition = this.checkbox.labelPosition;
143+
* ```
144+
* @memberof IgxCheckboxComponent
145+
*/
61146
@Input() public labelPosition: LabelPosition | string = LabelPosition.AFTER;
147+
/**
148+
* Enables/Disables the ripple effect.
149+
* If not set, `disableRipple` will have value `false`.
150+
* ```html
151+
* <igx-checkbox [disableRipple] = "true"></igx-checkbox>
152+
* ```
153+
* ```typescript
154+
* let isRippleDisabled = this.checkbox.desableRipple;
155+
* ```
156+
* @memberof IgxCheckboxComponent
157+
*/
62158
@Input() public disableRipple = false;
159+
/**
160+
* Sets/gets whether the checkbox is required.
161+
* If not set, `required` will have value `false`.
162+
* ```html
163+
* <igx-checkbox [required] = "true"></igx-checkbox>
164+
* ```
165+
* ```typescript
166+
* let isRequired = this.checkbox.required;
167+
* ```
168+
* @memberof IgxCheckboxComponent
169+
*/
63170
@Input() public required = false;
64-
171+
/**
172+
* Sets/gets the `aria-labelledby` attribute.
173+
* If not set, the `aria-labelledby` will be equal to the value of `labelId` attribute.
174+
* ```html
175+
* <igx-checkbox aria-labelledby = "Checkbox1"></igx-checkbox>
176+
* ```
177+
* ```typescript
178+
* let ariaLabelledBy = this.checkbox.ariaLabelledBy;
179+
* ```
180+
* @memberof IgxCheckboxComponent
181+
*/
65182
@Input('aria-labelledby')
66183
public ariaLabelledBy = this.labelId;
67-
184+
/**
185+
* Sets/gets the value of the `aria-label` attribute.
186+
* ```html
187+
* <igx-checkbox aria-label = "Checkbox1"></igx-checkbox>
188+
* ```
189+
* ```typescript
190+
* let ariaLabel = this.checkbox.aruaLabel;
191+
* ```
192+
* @memberof IgxCheckboxComponent
193+
*/
68194
@Input('aria-label')
69195
public ariaLabel: string | null = null;
70-
196+
/**
197+
* An event that is emitted after the checkbox state is changed.
198+
* Provides references to the `IgxCheckboxComponent` and the `checked` property as event arguments.
199+
* @memberof IgxCheckboxComponent
200+
*/
71201
@Output()
72202
readonly change: EventEmitter<IChangeCheckboxEventArgs> = new EventEmitter<IChangeCheckboxEventArgs>();
73-
203+
/**
204+
* Returns the class of the checkbox component.
205+
* ```typescript
206+
* let class = this.checkbox.cssClass;
207+
* ```
208+
* @memberof IgxCheckboxComponent
209+
*/
74210
@HostBinding('class.igx-checkbox')
75211
public cssClass = 'igx-checkbox';
76-
212+
/**
213+
* Sets/gets whether the checkbox component is on focus.
214+
* Default value is `false`.
215+
* ```typescript
216+
* this.checkbox.focused = true;
217+
* ```
218+
* ```typescript
219+
* let isFocused = this.checkbox.focused;
220+
* ```
221+
* @memberof IgxCheckboxComponent
222+
*/
77223
@HostBinding('class.igx-checkbox--focused')
78224
public focused = false;
79-
225+
/**
226+
* Sets/gets the checkbox indeterminate visual state.
227+
* Default value is `false`;
228+
* ```html
229+
* <igx-checkbox [indeterminate] = "true"></igx-checkbox>
230+
* ```
231+
* ```typescript
232+
* let isIndeterminate = this.checkbox.indeterminate;
233+
* ```
234+
* @memberof IgxCheckboxComponent
235+
*/
80236
@HostBinding('class.igx-checkbox--indeterminate')
81237
@Input() public indeterminate = false;
82-
238+
/**
239+
* Sets/gets whether the checkbox is checked.
240+
* Default value is `false`.
241+
* ```html
242+
* <igx-checkbox [checked] = "true"></igx-checkbox>
243+
* ```
244+
* ```typescript
245+
* let isChecked = this.checkbox.checked;
246+
* ```
247+
* @memberof IgxCheckboxComponent
248+
*/
83249
@HostBinding('class.igx-checkbox--checked')
84250
@Input() public checked = false;
85-
251+
/**
252+
* Sets/gets whether the checkbox is disabled.
253+
* Default value is `false`.
254+
* ```html
255+
* <igx-checkbox [disabled] = "true"></igx-checkbox>
256+
* ```
257+
* ```typescript
258+
* let isDesabled = this.checkbox.disabled;
259+
* ```
260+
* @memberof IgxCheckboxComponent
261+
*/
86262
@HostBinding('class.igx-checkbox--disabled')
87263
@Input() public disabled = false;
88-
264+
/**
265+
*@hidden
266+
*/
89267
public inputId = `${this.id}-input`;
268+
/**
269+
*@hidden
270+
*/
90271
private _onTouchedCallback: () => void = noop;
272+
/**
273+
* @hidden
274+
*/
91275
private _onChangeCallback: (_: any) => void = noop;
92-
276+
/**
277+
* If `disabled` is `false`, switches the `checked` state.
278+
* ```typescript
279+
* this.checkbox.toggle();
280+
* ```
281+
* @memberof IgxCheckboxComponent
282+
*/
93283
public toggle() {
94284
if (this.disabled) {
95285
return;
@@ -102,13 +292,17 @@ export class IgxCheckboxComponent implements ControlValueAccessor {
102292
this.change.emit({ checked: this.checked, checkbox: this });
103293
this._onChangeCallback(this.checked);
104294
}
105-
295+
/**
296+
*@hidden
297+
*/
106298
public _onCheckboxChange(event) {
107299
// We have to stop the original checkbox change event
108300
// from bubbling up since we emit our own change event
109301
event.stopPropagation();
110302
}
111-
303+
/**
304+
*@hidden
305+
*/
112306
public _onCheckboxClick(event) {
113307
// Since the original checkbox is hidden and the label
114308
// is used for styling and to change the checked state of the checkbox,
@@ -117,29 +311,39 @@ export class IgxCheckboxComponent implements ControlValueAccessor {
117311
event.stopPropagation();
118312
this.toggle();
119313
}
120-
314+
/**
315+
*@hidden
316+
*/
121317
public _onLabelClick(event) {
122318
// We use a span element as a placeholder label
123319
// in place of the native label, we need to emit
124320
// the change event separately here alongside
125321
// the click event emitted on click
126322
this.toggle();
127323
}
128-
324+
/**
325+
*@hidden
326+
*/
129327
public onFocus(event) {
130328
this.focused = true;
131329
}
132-
330+
/**
331+
*@hidden
332+
*/
133333
public onBlur(event) {
134334
this.focused = false;
135335
this._onTouchedCallback();
136336
}
137-
337+
/**
338+
*@hidden
339+
*/
138340
public writeValue(value) {
139341
this._value = value;
140342
this.checked = !!this._value;
141343
}
142-
344+
/**
345+
*@hidden
346+
*/
143347
public get labelClass(): string {
144348
switch (this.labelPosition) {
145349
case LabelPosition.BEFORE:
@@ -149,8 +353,13 @@ export class IgxCheckboxComponent implements ControlValueAccessor {
149353
return `${this.cssClass}__label`;
150354
}
151355
}
152-
356+
/**
357+
*@hidden
358+
*/
153359
public registerOnChange(fn: (_: any) => void) { this._onChangeCallback = fn; }
360+
/**
361+
*@hidden
362+
*/
154363
public registerOnTouched(fn: () => void) { this._onTouchedCallback = fn; }
155364
}
156365

@@ -168,7 +377,9 @@ export const IGX_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
168377
providers: [IGX_CHECKBOX_REQUIRED_VALIDATOR]
169378
})
170379
export class IgxCheckboxRequiredDirective extends CheckboxRequiredValidator { }
171-
380+
/**
381+
*The IgxCheckboxModule provides the {@link IgxCheckboxComponent} inside your application.
382+
*/
172383
@NgModule({
173384
declarations: [IgxCheckboxComponent, IgxCheckboxRequiredDirective],
174385
exports: [IgxCheckboxComponent, IgxCheckboxRequiredDirective],

‎projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
align-items: center;
5454
color: --var($theme, 'text-color');
5555
background: --var($theme, 'background-color');
56-
grid-row: 6;
56+
grid-row: 7;
5757
padding: rem(5px) 0;
5858
font-size: 12px;
5959
border-top: 1px dotted --var($theme, 'border-color');

‎projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
////
2+
/// @group components
3+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
@include b(igx-grid-toolbar) {
9+
$this: bem--selector-to-string(&);
10+
@include register-component(str-slice($this, 2, -1));
11+
12+
@extend %igx-grid-toolbar !optional;
13+
14+
@include e(title){
15+
@extend %igx-grid-toolbar__title !optional;
16+
}
17+
18+
@include e(actions){
19+
@extend %igx-grid-toolbar__actions !optional;
20+
}
21+
22+
@include e(dropdown){
23+
@extend %igx-grid-toolbar__dropdown !optional;
24+
}
25+
26+
@include e(dd-list-items){
27+
@extend %igx-grid-toolbar__dd-list-items !optional;
28+
}
29+
30+
@include e(button-space){
31+
@extend %igx-grid-toolbar__button-space !optional;
32+
}
33+
34+
@include e(dd-list){
35+
@extend %igx-grid-toolbar__dd-list !optional;
36+
}
37+
}

0 commit comments

Comments
 (0)