@angular/material
Version:
Angular Material
367 lines (363 loc) • 13.1 kB
JavaScript
import { BidiModule } from '@angular/cdk/bidi';
import * as i0 from '@angular/core';
import { InjectionToken, inject, DOCUMENT, ElementRef, ErrorHandler, HostAttributeToken, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { MatIconRegistry } from './_icon-registry-chunk.mjs';
export { getMatIconFailedToSanitizeLiteralError, getMatIconFailedToSanitizeUrlError, getMatIconNameNotFoundError, getMatIconNoHttpProviderError } from './_icon-registry-chunk.mjs';
import '@angular/cdk/private';
import '@angular/common/http';
import '@angular/platform-browser';
const MAT_ICON_DEFAULT_OPTIONS = new InjectionToken('MAT_ICON_DEFAULT_OPTIONS');
const MAT_ICON_LOCATION = new InjectionToken('mat-icon-location', {
providedIn: 'root',
factory: () => {
const _document = inject(DOCUMENT);
const _location = _document ? _document.location : null;
return {
getPathname: () => _location ? _location.pathname + _location.search : ''
};
}
});
const funcIriAttributes = ['clip-path', 'color-profile', 'src', 'cursor', 'fill', 'filter', 'marker', 'marker-start', 'marker-mid', 'marker-end', 'mask', 'stroke'];
const funcIriAttributeSelector = funcIriAttributes.map(attr => `[${attr}]`).join(', ');
const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
class MatIcon {
_elementRef = inject(ElementRef);
_iconRegistry = inject(MatIconRegistry);
_location = inject(MAT_ICON_LOCATION);
_errorHandler = inject(ErrorHandler);
_defaultColor;
get color() {
return this._color || this._defaultColor;
}
set color(value) {
this._color = value;
}
_color;
inline = false;
get svgIcon() {
return this._svgIcon;
}
set svgIcon(value) {
if (value !== this._svgIcon) {
if (value) {
this._updateSvgIcon(value);
} else if (this._svgIcon) {
this._clearSvgElement();
}
this._svgIcon = value;
}
}
_svgIcon;
get fontSet() {
return this._fontSet;
}
set fontSet(value) {
const newValue = this._cleanupFontValue(value);
if (newValue !== this._fontSet) {
this._fontSet = newValue;
this._updateFontIconClasses();
}
}
_fontSet;
get fontIcon() {
return this._fontIcon;
}
set fontIcon(value) {
const newValue = this._cleanupFontValue(value);
if (newValue !== this._fontIcon) {
this._fontIcon = newValue;
this._updateFontIconClasses();
}
}
_fontIcon;
_previousFontSetClass = [];
_previousFontIconClass;
_svgName;
_svgNamespace;
_previousPath;
_elementsWithExternalReferences;
_currentIconFetch = Subscription.EMPTY;
constructor() {
const ariaHidden = inject(new HostAttributeToken('aria-hidden'), {
optional: true
});
const defaults = inject(MAT_ICON_DEFAULT_OPTIONS, {
optional: true
});
if (defaults) {
if (defaults.color) {
this.color = this._defaultColor = defaults.color;
}
if (defaults.fontSet) {
this.fontSet = defaults.fontSet;
}
}
if (!ariaHidden) {
this._elementRef.nativeElement.setAttribute('aria-hidden', 'true');
}
}
_splitIconName(iconName) {
if (!iconName) {
return ['', ''];
}
const parts = iconName.split(':');
switch (parts.length) {
case 1:
return ['', parts[0]];
case 2:
return parts;
default:
throw Error(`Invalid icon name: "${iconName}"`);
}
}
ngOnInit() {
this._updateFontIconClasses();
}
ngAfterViewChecked() {
const cachedElements = this._elementsWithExternalReferences;
if (cachedElements && cachedElements.size) {
const newPath = this._location.getPathname();
if (newPath !== this._previousPath) {
this._previousPath = newPath;
this._prependPathToReferences(newPath);
}
}
}
ngOnDestroy() {
this._currentIconFetch.unsubscribe();
if (this._elementsWithExternalReferences) {
this._elementsWithExternalReferences.clear();
}
}
_usingFontIcon() {
return !this.svgIcon;
}
_setSvgElement(svg) {
this._clearSvgElement();
const path = this._location.getPathname();
this._previousPath = path;
this._cacheChildrenWithExternalReferences(svg);
this._prependPathToReferences(path);
this._elementRef.nativeElement.appendChild(svg);
}
_clearSvgElement() {
const layoutElement = this._elementRef.nativeElement;
let childCount = layoutElement.childNodes.length;
if (this._elementsWithExternalReferences) {
this._elementsWithExternalReferences.clear();
}
while (childCount--) {
const child = layoutElement.childNodes[childCount];
if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') {
child.remove();
}
}
}
_updateFontIconClasses() {
if (!this._usingFontIcon()) {
return;
}
const elem = this._elementRef.nativeElement;
const fontSetClasses = (this.fontSet ? this._iconRegistry.classNameForFontAlias(this.fontSet).split(/ +/) : this._iconRegistry.getDefaultFontSetClass()).filter(className => className.length > 0);
this._previousFontSetClass.forEach(className => elem.classList.remove(className));
fontSetClasses.forEach(className => elem.classList.add(className));
this._previousFontSetClass = fontSetClasses;
if (this.fontIcon !== this._previousFontIconClass && !fontSetClasses.includes('mat-ligature-font')) {
if (this._previousFontIconClass) {
elem.classList.remove(this._previousFontIconClass);
}
if (this.fontIcon) {
elem.classList.add(this.fontIcon);
}
this._previousFontIconClass = this.fontIcon;
}
}
_cleanupFontValue(value) {
return typeof value === 'string' ? value.trim().split(' ')[0] : value;
}
_prependPathToReferences(path) {
const elements = this._elementsWithExternalReferences;
if (elements) {
elements.forEach((attrs, element) => {
attrs.forEach(attr => {
element.setAttribute(attr.name, `url('${path}#${attr.value}')`);
});
});
}
}
_cacheChildrenWithExternalReferences(element) {
const elementsWithFuncIri = element.querySelectorAll(funcIriAttributeSelector);
const elements = this._elementsWithExternalReferences = this._elementsWithExternalReferences || new Map();
for (let i = 0; i < elementsWithFuncIri.length; i++) {
funcIriAttributes.forEach(attr => {
const elementWithReference = elementsWithFuncIri[i];
const value = elementWithReference.getAttribute(attr);
const match = value ? value.match(funcIriPattern) : null;
if (match) {
let attributes = elements.get(elementWithReference);
if (!attributes) {
attributes = [];
elements.set(elementWithReference, attributes);
}
attributes.push({
name: attr,
value: match[1]
});
}
});
}
}
_updateSvgIcon(rawName) {
this._svgNamespace = null;
this._svgName = null;
this._currentIconFetch.unsubscribe();
if (rawName) {
const [namespace, iconName] = this._splitIconName(rawName);
if (namespace) {
this._svgNamespace = namespace;
}
if (iconName) {
this._svgName = iconName;
}
this._currentIconFetch = this._iconRegistry.getNamedSvgIcon(iconName, namespace).pipe(take(1)).subscribe(svg => this._setSvgElement(svg), err => {
const errorMessage = `Error retrieving icon ${namespace}:${iconName}! ${err.message}`;
this._errorHandler.handleError(new Error(errorMessage));
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIcon,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "16.1.0",
version: "21.0.3",
type: MatIcon,
isStandalone: true,
selector: "mat-icon",
inputs: {
color: "color",
inline: ["inline", "inline", booleanAttribute],
svgIcon: "svgIcon",
fontSet: "fontSet",
fontIcon: "fontIcon"
},
host: {
attributes: {
"role": "img"
},
properties: {
"class": "color ? \"mat-\" + color : \"\"",
"attr.data-mat-icon-type": "_usingFontIcon() ? \"font\" : \"svg\"",
"attr.data-mat-icon-name": "_svgName || fontIcon",
"attr.data-mat-icon-namespace": "_svgNamespace || fontSet",
"attr.fontIcon": "_usingFontIcon() ? fontIcon : null",
"class.mat-icon-inline": "inline",
"class.mat-icon-no-color": "color !== \"primary\" && color !== \"accent\" && color !== \"warn\""
},
classAttribute: "mat-icon notranslate"
},
exportAs: ["matIcon"],
ngImport: i0,
template: '<ng-content></ng-content>',
isInline: true,
styles: ["mat-icon,mat-icon.mat-primary,mat-icon.mat-accent,mat-icon.mat-warn{color:var(--mat-icon-color, inherit)}.mat-icon{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px;overflow:hidden}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.mat-icon.mat-ligature-font[fontIcon]::before{content:attr(fontIcon)}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1, 1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIcon,
decorators: [{
type: Component,
args: [{
template: '<ng-content></ng-content>',
selector: 'mat-icon',
exportAs: 'matIcon',
host: {
'role': 'img',
'class': 'mat-icon notranslate',
'[class]': 'color ? "mat-" + color : ""',
'[attr.data-mat-icon-type]': '_usingFontIcon() ? "font" : "svg"',
'[attr.data-mat-icon-name]': '_svgName || fontIcon',
'[attr.data-mat-icon-namespace]': '_svgNamespace || fontSet',
'[attr.fontIcon]': '_usingFontIcon() ? fontIcon : null',
'[class.mat-icon-inline]': 'inline',
'[class.mat-icon-no-color]': 'color !== "primary" && color !== "accent" && color !== "warn"'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["mat-icon,mat-icon.mat-primary,mat-icon.mat-accent,mat-icon.mat-warn{color:var(--mat-icon-color, inherit)}.mat-icon{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px;overflow:hidden}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.mat-icon.mat-ligature-font[fontIcon]::before{content:attr(fontIcon)}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1, 1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
color: [{
type: Input
}],
inline: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
svgIcon: [{
type: Input
}],
fontSet: [{
type: Input
}],
fontIcon: [{
type: Input
}]
}
});
class MatIconModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIconModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIconModule,
imports: [MatIcon],
exports: [MatIcon, BidiModule]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIconModule,
imports: [BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.3",
ngImport: i0,
type: MatIconModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatIcon],
exports: [MatIcon, BidiModule]
}]
}]
});
export { MAT_ICON_DEFAULT_OPTIONS, MAT_ICON_LOCATION, MatIcon, MatIconModule, MatIconRegistry };
//# sourceMappingURL=icon.mjs.map