@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
174 lines (171 loc) • 10.3 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var ClassifierLanguageDirective_1;
let ClassifierLanguageComponent = class ClassifierLanguageComponent {
constructor() {
this.focusable = false;
}
};
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageComponent.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageComponent.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], ClassifierLanguageComponent.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], ClassifierLanguageComponent.prototype, "focusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageComponent.prototype, "innerClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageComponent.prototype, "size", void 0);
ClassifierLanguageComponent = __decorate([
Component({
selector: "ibm-icon-classifier-language",
template: `
<svg
ibmIconClassifierLanguage
[size]="size"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby"
[ariaHidden]="ariaHidden"
[title]="title"
[isFocusable]="focusable"
[attr.class]="innerClass">
</svg>
`
})
], ClassifierLanguageComponent);
let ClassifierLanguageDirective = ClassifierLanguageDirective_1 = class ClassifierLanguageDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.isFocusable = false;
this.icons = {
"32": {
metadata: { "moduleName": "ClassifierLanguage32", "filepath": "classifier--language/32.js", "descriptor": { "elem": "svg", "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 32 32", "fill": "currentColor", "width": 32, "height": 32 }, "content": [{ "elem": "path", "attrs": { "d": "M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z" } }], "name": "classifier--language", "size": 32 }, "size": 32 },
svg: `<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><path d="M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z"></path></svg>`
},
"24": {
metadata: { "moduleName": "ClassifierLanguage24", "filepath": "classifier--language/24.js", "descriptor": { "elem": "svg", "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 32 32", "fill": "currentColor", "width": 24, "height": 24 }, "content": [{ "elem": "path", "attrs": { "d": "M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z" } }], "name": "classifier--language", "size": 24 }, "size": 24 },
svg: `<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 32 32" aria-hidden="true"><path d="M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z"></path></svg>`
},
"20": {
metadata: { "moduleName": "ClassifierLanguage20", "filepath": "classifier--language/20.js", "descriptor": { "elem": "svg", "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 32 32", "fill": "currentColor", "width": 20, "height": 20 }, "content": [{ "elem": "path", "attrs": { "d": "M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z" } }], "name": "classifier--language", "size": 20 }, "size": 20 },
svg: `<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z"></path></svg>`
},
"16": {
metadata: { "moduleName": "ClassifierLanguage16", "filepath": "classifier--language/16.js", "descriptor": { "elem": "svg", "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 32 32", "fill": "currentColor", "width": 16, "height": 16 }, "content": [{ "elem": "path", "attrs": { "d": "M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z" } }], "name": "classifier--language", "size": 16 }, "size": 16 },
svg: `<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M30 10V2H22v8h3v4H23v2h7V14H27V10zM24 4h4V8H24zM20 23.41L18.59 22 16 24.59 13.41 22 12 23.41 14.59 26 12 28.59 13.41 30 16 27.41 18.59 30 20 28.59 17.41 26 20 23.41zM20 14L12 14 12 16 15 16 15 21 17 21 17 16 20 16 20 14zM7 9.86a4 4 0 10-2 0V14H2v2H9V14H7zM4 6A2 2 0 116 8 2 2 0 014 6z"></path></svg>`
},
};
}
ngAfterViewInit() {
const svg = this.elementRef.nativeElement;
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
const icon = this.icons[this.size];
const domParser = new DOMParser();
const rawSVG = icon.svg;
const svgElement = domParser.parseFromString(rawSVG, "image/svg+xml").documentElement;
let node = svgElement.firstChild;
while (node) {
// importNode makes a clone of the node
// this ensures we keep looping over the nodes in the parsed document
svg.appendChild(svg.ownerDocument.importNode(node, true));
node = node.nextSibling;
}
const attributes = getAttributes({
width: icon.metadata.descriptor.attrs.height,
height: icon.metadata.descriptor.attrs.height,
viewBox: icon.metadata.descriptor.attrs.viewBox,
title: this.title,
"aria-label": this.ariaLabel,
"aria-labelledby": this.ariaLabelledby,
"aria-hidden": this.ariaHidden,
focusable: this.isFocusable.toString()
});
const attrKeys = Object.keys(attributes);
for (let i = 0; i < attrKeys.length; i++) {
const key = attrKeys[i];
const value = attributes[key];
if (key === "title") {
continue;
}
if (value) {
svg.setAttribute(key, value);
}
}
if (attributes.title) {
const title = document.createElement("title");
title.textContent = attributes.title;
ClassifierLanguageDirective_1.titleIdCounter++;
title.setAttribute("id", `classifier-language-${ClassifierLanguageDirective_1.titleIdCounter}`);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", `classifier-language-${ClassifierLanguageDirective_1.titleIdCounter}`);
}
}
};
ClassifierLanguageDirective.titleIdCounter = 0;
ClassifierLanguageDirective.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageDirective.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageDirective.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], ClassifierLanguageDirective.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageDirective.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], ClassifierLanguageDirective.prototype, "isFocusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], ClassifierLanguageDirective.prototype, "size", void 0);
ClassifierLanguageDirective = ClassifierLanguageDirective_1 = __decorate([
Directive({
selector: "[ibmIconClassifierLanguage]"
}),
__metadata("design:paramtypes", [ElementRef])
], ClassifierLanguageDirective);
let ClassifierLanguageModule = class ClassifierLanguageModule {
};
ClassifierLanguageModule = __decorate([
NgModule({
declarations: [
ClassifierLanguageComponent,
ClassifierLanguageDirective,
],
exports: [
ClassifierLanguageComponent,
ClassifierLanguageDirective,
]
})
], ClassifierLanguageModule);
export { ClassifierLanguageComponent, ClassifierLanguageDirective, ClassifierLanguageModule };