Skip to content

Commit 774346d

Browse files
ZneekyZneeky
authored
Merge branch '18.2.x' into aahmedov/fix-column-resize-line-positioning-for-scaled-grid-18.2.x
2 parents d00780c + fa2b62d commit 774346d

File tree

6 files changed

+37
-57
lines changed

6 files changed

+37
-57
lines changed

‎projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,17 @@ describe('Avatar', () => {
159159
expect(hostEl.getAttribute('aria-roledescription')).toEqual('image avatar');
160160
expect(hostEl.getAttribute('aria-label')).toEqual('avatar');
161161
});
162+
163+
it('Normalizes the value of the `src` input', () => {
164+
const fixture = TestBed.createComponent(InitImageAvatarComponent);
165+
fixture.detectChanges();
166+
167+
const instance = fixture.componentInstance.avatar;
168+
instance.src = "/assets/Test - 17.jpg";
169+
fixture.detectChanges();
170+
171+
expect(instance.src).toEqual("/assets/Test%20-%2017.jpg");
172+
});
162173
});
163174

164175
@Component({

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
ViewChild
1010
} from '@angular/core';
1111

12-
import { mkenum } from '../core/utils';
12+
import { mkenum, normalizeURI } from '../core/utils';
1313
import { IgxIconComponent } from '../icon/icon.component';
1414

1515
let NEXT_ID = 0;
@@ -202,7 +202,13 @@ export class IgxAvatarComponent implements OnInit {
202202
* @igxFriendlyName Image URL
203203
*/
204204
@Input()
205-
public src: string;
205+
public set src(value: string) {
206+
this._src = normalizeURI(value);
207+
}
208+
209+
public get src() {
210+
return this._src;
211+
}
206212

207213
/** @hidden @internal */
208214
@ViewChild('defaultTemplate', { read: TemplateRef, static: true })
@@ -225,6 +231,7 @@ export class IgxAvatarComponent implements OnInit {
225231
* @internal
226232
*/
227233
private _size: string | IgxAvatarSize;
234+
private _src: string;
228235

229236
/**
230237
* Returns the size of the avatar.

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 7 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -287,30 +287,6 @@
287287
'indigo': rem(8px),
288288
), $variant);
289289

290-
$list-icon-margin-inline: (
291-
comfortable: rem(16px),
292-
cosy: rem(8px),
293-
compact: rem(4px)
294-
);
295-
296-
$list-icon-margin-block: (
297-
comfortable: rem(8px),
298-
cosy: rem(6px),
299-
compact: rem(4px)
300-
);
301-
302-
$list-line-margin: (
303-
comfortable: rem(16px),
304-
cosy: rem(12px),
305-
compact: rem(8px)
306-
);
307-
308-
$list-actions-margin: (
309-
comfortable: rem(8px),
310-
cosy: rem(6px),
311-
compact: rem(4px)
312-
);
313-
314290
%igx-list {
315291
@include sizable();
316292

@@ -326,6 +302,10 @@
326302
z-index: 0;
327303
border-radius: var-get($theme, 'border-radius');
328304

305+
@if $variant == 'bootstrap' {
306+
border: rem(1px) solid var-get($theme, 'border-color');
307+
}
308+
329309
&:focus-visible {
330310
outline-style: none;
331311
}
@@ -479,21 +459,14 @@
479459
align-items: center;
480460
justify-content: center;
481461
color: var-get($theme, 'item-action-color');
482-
483-
@if $variant == 'indigo' {
484-
gap: sizable(rem(4), rem(6), rem(8));
485-
}
462+
gap: if($variant == 'indigo', sizable(rem(4), rem(6), rem(8)), rem(8px));
486463

487464
&:empty {
488465
display: none;
489466
}
490467

491468
> * {
492469
--component-size: #{if($variant == 'indigo', 2, var(--list-size))};
493-
494-
@if $variant != 'indigo' {
495-
margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable'));
496-
}
497470
}
498471

499472
igc-icon,
@@ -517,10 +490,7 @@
517490
border-radius: var-get($theme, 'item-border-radius');
518491
background: inherit;
519492
z-index: 2;
520-
521-
@if $variant == 'indigo' {
522-
gap: rem(8px);
523-
}
493+
gap: if($variant == 'indigo', rem(8px), rem(16px));
524494
}
525495

526496
%igx-list-header,
@@ -533,7 +503,7 @@
533503
display: flex;
534504
align-items: center;
535505
justify-content: center;
536-
align-self: if($variant == 'indigo', center, flex-start);
506+
align-self: center;
537507
padding: 0;
538508
color: var-get($theme, 'item-thumbnail-color');
539509
gap: rem(8px);
@@ -542,12 +512,6 @@
542512
> igx-icon,
543513
> igc-icon {
544514
--component-size: #{if($variant == 'indigo', 2, var(--list-size))};
545-
546-
@if $variant != 'indigo' {
547-
margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable'));
548-
margin-inline-start: 0;
549-
margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable'));
550-
}
551515
}
552516

553517
&:empty {
@@ -557,16 +521,6 @@
557521

558522
%igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines {
559523
--component-size: var(--list-size);
560-
561-
@if $variant != 'indigo' {
562-
margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable'));
563-
}
564-
}
565-
566-
@if $variant != 'indigo' {
567-
%igx-list__item-lines + %igx-list__item-actions {
568-
margin-inline-start: rem(8px);
569-
}
570524
}
571525

572526
%igx-list-item-content--active {

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -639,3 +639,11 @@ export function getComponentCssSizeVar(size: string) {
639639
return 'var(--ig-size, var(--ig-size-large))';
640640
}
641641
}
642+
643+
/**
644+
* @param path - The URI path to be normalized.
645+
* @returns string encoded using the encodeURI function.
646+
*/
647+
export function normalizeURI(path: string) {
648+
return path.split('/').map(encodeURI).join('/');
649+
}

‎src/app/avatar/avatar.sample.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h4 class="sample-title">Circular Avatars</h4>
1717

1818
<igx-avatar src="https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80" size="small" shape="circle"></igx-avatar>
1919

20-
<igx-avatar src="assets/images/avatar/17.jpg" size="medium" shape="circle"></igx-avatar>
20+
<igx-avatar src="assets/images/avatar/17 - Test.jpg" size="medium" shape="circle"></igx-avatar>
2121

2222
<igx-avatar src="https://images.unsplash.com/photo-1506804880640-f3205deb1b8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2f8dd0c16478825034602dce63d9aaca&auto=format&fit=crop&w=1350&q=80" size="large" shape="circle"></igx-avatar>
2323
</article>
@@ -41,7 +41,7 @@ <h4 class="sample-title">Rounded Avatars</h4>
4141

4242
<igx-avatar src="https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80" size="small" shape="rounded"></igx-avatar>
4343

44-
<igx-avatar src="assets/images/avatar/17.jpg" size="medium"
44+
<igx-avatar src="assets/images/avatar/17 - Test.jpg" size="medium"
4545
shape="rounded"></igx-avatar>
4646

4747
<igx-avatar src="https://images.unsplash.com/photo-1506804880640-f3205deb1b8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2f8dd0c16478825034602dce63d9aaca&auto=format&fit=crop&w=1350&q=80" size="large" shape="rounded"></igx-avatar>

src/assets/images/avatar/17.jpg renamed to src/assets/images/avatar/17 - Test.jpg

File renamed without changes.

0 commit comments

Comments
 (0)