MOBILE-4270 chore: Final deprecation of CoreIconComponent
parent
2bedc67695
commit
ec86719833
|
@ -33,7 +33,6 @@ import { CoreDynamicComponent } from './dynamic-component/dynamic-component';
|
||||||
import { CoreEmptyBoxComponent } from './empty-box/empty-box';
|
import { CoreEmptyBoxComponent } from './empty-box/empty-box';
|
||||||
import { CoreFileComponent } from './file/file';
|
import { CoreFileComponent } from './file/file';
|
||||||
import { CoreFilesComponent } from './files/files';
|
import { CoreFilesComponent } from './files/files';
|
||||||
import { CoreIconComponent } from './icon/icon';
|
|
||||||
import { CoreIframeComponent } from './iframe/iframe';
|
import { CoreIframeComponent } from './iframe/iframe';
|
||||||
import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
|
import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
|
||||||
import { CoreInputErrorsComponent } from './input-errors/input-errors';
|
import { CoreInputErrorsComponent } from './input-errors/input-errors';
|
||||||
|
@ -82,7 +81,6 @@ import { CoreSheetModalComponent } from '@components/sheet-modal/sheet-modal';
|
||||||
CoreFileComponent,
|
CoreFileComponent,
|
||||||
CoreFilesComponent,
|
CoreFilesComponent,
|
||||||
CoreGroupSelectorComponent,
|
CoreGroupSelectorComponent,
|
||||||
CoreIconComponent,
|
|
||||||
CoreIframeComponent,
|
CoreIframeComponent,
|
||||||
CoreInfiniteLoadingComponent,
|
CoreInfiniteLoadingComponent,
|
||||||
CoreInputErrorsComponent,
|
CoreInputErrorsComponent,
|
||||||
|
@ -136,7 +134,6 @@ import { CoreSheetModalComponent } from '@components/sheet-modal/sheet-modal';
|
||||||
CoreFileComponent,
|
CoreFileComponent,
|
||||||
CoreFilesComponent,
|
CoreFilesComponent,
|
||||||
CoreGroupSelectorComponent,
|
CoreGroupSelectorComponent,
|
||||||
CoreIconComponent,
|
|
||||||
CoreIframeComponent,
|
CoreIframeComponent,
|
||||||
CoreInfiniteLoadingComponent,
|
CoreInfiniteLoadingComponent,
|
||||||
CoreInputErrorsComponent,
|
CoreInputErrorsComponent,
|
||||||
|
|
|
@ -1,128 +0,0 @@
|
||||||
:host {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host-context([dir=rtl]).icon-flip-rtl {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host-context(ion-item.md) ion-icon {
|
|
||||||
&[slot] {
|
|
||||||
color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
|
|
||||||
font-size: 24px;
|
|
||||||
margin-top: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
&[slot=start] {
|
|
||||||
margin-right: 32px;
|
|
||||||
}
|
|
||||||
&[slot=end] {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=start] {
|
|
||||||
margin-right: unset;
|
|
||||||
-webkit-margin-end: 32px;
|
|
||||||
margin-inline-end: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=end] {
|
|
||||||
margin-left: unset;
|
|
||||||
-webkit-margin-start: 16px;
|
|
||||||
margin-inline-start: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:host-context(ion-item.ios) ion-icon {
|
|
||||||
&[slot] {
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
&[slot=start] {
|
|
||||||
margin-top: 7px;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
&[slot=end] {
|
|
||||||
margin-top: 7px;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=start] {
|
|
||||||
margin-left: unset;
|
|
||||||
margin-right: unset;
|
|
||||||
-webkit-margin-start: 0;
|
|
||||||
margin-inline-start: 0;
|
|
||||||
-webkit-margin-end: 20px;
|
|
||||||
margin-inline-end: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=end] {
|
|
||||||
margin-left: unset;
|
|
||||||
margin-right: unset;
|
|
||||||
-webkit-margin-start: 10px;
|
|
||||||
margin-inline-start: 10px;
|
|
||||||
-webkit-margin-end: 10px;
|
|
||||||
margin-inline-end: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:host-context(ion-item.ion-color) {
|
|
||||||
color: var(--ion-color-contrast);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host-context(ion-button.md) ion-icon,
|
|
||||||
:host-context(ion-button.ios) ion-icon {
|
|
||||||
&[slot] {
|
|
||||||
font-size: 1.4em;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
&[slot=start] {
|
|
||||||
margin-left: -0.3em;
|
|
||||||
margin-right: 0.3em;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
&[slot=end] {
|
|
||||||
margin-left: 0.3em;
|
|
||||||
margin-right: -0.2em;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
&[slot=icon-only] {
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=start] {
|
|
||||||
margin-left: unset;
|
|
||||||
margin-right: unset;
|
|
||||||
-webkit-margin-start: -0.3em;
|
|
||||||
margin-inline-start: -0.3em;
|
|
||||||
-webkit-margin-end: 0.3em;
|
|
||||||
margin-inline-end: 0.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
|
|
||||||
&[slot=end] {
|
|
||||||
margin-left: unset;
|
|
||||||
margin-right: unset;
|
|
||||||
-webkit-margin-start: 0.3em;
|
|
||||||
margin-inline-start: 0.3em;
|
|
||||||
-webkit-margin-end: -0.2em;
|
|
||||||
margin-inline-end: -0.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,116 +0,0 @@
|
||||||
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
|
|
||||||
import { Component, Input, OnChanges, ElementRef, SimpleChange } from '@angular/core';
|
|
||||||
import { CoreLogger } from '@singletons/logger';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Core Icon is a component that enables the posibility to add fontawesome icon to the html. It
|
|
||||||
* To use fontawesome just place the full icon name with the fa- prefix and
|
|
||||||
* the component will detect it.
|
|
||||||
*
|
|
||||||
* Check available icons at https://fontawesome.com/icons?d=gallery&m=free
|
|
||||||
*
|
|
||||||
* @deprecated since 3.9.3. Please use <ion-icon name="fas-icon"> instead.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'core-icon',
|
|
||||||
template: '<ion-icon [name]="name"><ng-content></ng-content></ion-icon>',
|
|
||||||
styleUrls: ['icon.scss'],
|
|
||||||
})
|
|
||||||
export class CoreIconComponent implements OnChanges {
|
|
||||||
|
|
||||||
// Common params.
|
|
||||||
@Input() name = '';
|
|
||||||
@Input() color?: string;
|
|
||||||
@Input() slash?: boolean; // Display a red slash over the icon.
|
|
||||||
|
|
||||||
// FontAwesome params.
|
|
||||||
@Input('fixed-width') fixedWidth?: boolean; // eslint-disable-line @angular-eslint/no-input-rename
|
|
||||||
|
|
||||||
@Input() label?: string;
|
|
||||||
@Input() flipRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false.
|
|
||||||
|
|
||||||
protected element: HTMLElement;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
el: ElementRef,
|
|
||||||
) {
|
|
||||||
this.element = el.nativeElement;
|
|
||||||
|
|
||||||
CoreLogger.getInstance('CoreIconComponent').error('CoreIconComponent is deprecated. Please use ion-icon instead.');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Detect changes on input properties.
|
|
||||||
*/
|
|
||||||
ngOnChanges(changes: {[name: string]: SimpleChange}): void {
|
|
||||||
if (!changes.name || !this.name) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.updateIcon(this.element.children[0]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
protected updateIcon(iconElement: Element): void {
|
|
||||||
!this.label && iconElement.setAttribute('aria-hidden', 'true');
|
|
||||||
!this.label && iconElement.setAttribute('role', 'presentation');
|
|
||||||
this.label && iconElement.setAttribute('aria-label', this.label);
|
|
||||||
this.label && iconElement.setAttribute('title', this.label);
|
|
||||||
|
|
||||||
const attrs = this.element.attributes;
|
|
||||||
for (let i = attrs.length - 1; i >= 0; i--) {
|
|
||||||
if (attrs[i].name != 'name') {
|
|
||||||
iconElement.setAttribute(attrs[i].name, attrs[i].value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isTrueProperty(this.slash)) {
|
|
||||||
iconElement.classList.add('icon-slash');
|
|
||||||
} else {
|
|
||||||
iconElement.classList.remove('icon-slash');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isTrueProperty(this.flipRtl)) {
|
|
||||||
iconElement.classList.add('icon-flip-rtl');
|
|
||||||
} else {
|
|
||||||
iconElement.classList.remove('icon-flip-rtl');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isTrueProperty(this.fixedWidth)) {
|
|
||||||
iconElement.classList.add('fa-fw');
|
|
||||||
} else {
|
|
||||||
iconElement.classList.remove('fa-fw');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if the value is true or on.
|
|
||||||
*
|
|
||||||
* @param val Value to be checked.
|
|
||||||
* @returns If has a value equivalent to true.
|
|
||||||
*/
|
|
||||||
isTrueProperty(val: unknown): boolean {
|
|
||||||
if (typeof val === 'string') {
|
|
||||||
val = val.toLowerCase().trim();
|
|
||||||
|
|
||||||
return (val === 'true' || val === 'on' || val === '');
|
|
||||||
}
|
|
||||||
|
|
||||||
return !!val;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,36 +0,0 @@
|
||||||
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
|
|
||||||
import { CoreIconComponent } from '@components/icon/icon';
|
|
||||||
|
|
||||||
import { renderWrapperComponent } from '@/testing/utils';
|
|
||||||
|
|
||||||
describe('CoreIconComponent', () => {
|
|
||||||
|
|
||||||
it('should render', async () => {
|
|
||||||
// Act
|
|
||||||
const fixture = await renderWrapperComponent(CoreIconComponent, 'core-icon', { name: 'fa-thumbs-up' });
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(fixture.nativeElement.innerHTML.trim()).not.toHaveLength(0);
|
|
||||||
|
|
||||||
const icon = fixture.nativeElement.querySelector('ion-icon');
|
|
||||||
const name = icon?.getAttribute('name') || icon?.getAttribute('ng-reflect-name') || '';
|
|
||||||
|
|
||||||
expect(icon).not.toBeNull();
|
|
||||||
expect(name).toEqual('fa-thumbs-up');
|
|
||||||
expect(icon?.getAttribute('role')).toEqual('presentation');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
|
@ -1,6 +1,10 @@
|
||||||
This files describes API changes in the Moodle Mobile app,
|
This files describes API changes in the Moodle Mobile app,
|
||||||
information provided here is intended especially for developers.
|
information provided here is intended especially for developers.
|
||||||
|
|
||||||
|
=== 4.2.0 ===
|
||||||
|
|
||||||
|
- CoreIconComponent has been removed after deprecation period: Use CoreFaIconDirective instead.
|
||||||
|
|
||||||
=== 4.1.0 ===
|
=== 4.1.0 ===
|
||||||
|
|
||||||
- Zoom levels changed from "normal / low / high" to " none / medium / high".
|
- Zoom levels changed from "normal / low / high" to " none / medium / high".
|
||||||
|
|
Loading…
Reference in New Issue