@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
169 lines (166 loc) • 9.83 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var HtmlComponent = /** @class */ (function () {
function HtmlComponent() {
this.focusable = false;
}
__decorate([
Input(),
__metadata("design:type", String)
], HtmlComponent.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlComponent.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], HtmlComponent.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], HtmlComponent.prototype, "focusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlComponent.prototype, "innerClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlComponent.prototype, "size", void 0);
HtmlComponent = __decorate([
Component({
selector: "ibm-icon-html",
template: "\n <svg\n ibmIconHtml\n [size]=\"size\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledby]=\"ariaLabelledby\"\n [ariaHidden]=\"ariaHidden\"\n [title]=\"title\"\n [isFocusable]=\"focusable\"\n [attr.class]=\"innerClass\">\n </svg>\n "
})
], HtmlComponent);
return HtmlComponent;
}());
var HtmlDirective = /** @class */ (function () {
function HtmlDirective(elementRef) {
this.elementRef = elementRef;
this.isFocusable = false;
this.icons = {
"32": {
metadata: { "moduleName": "Html32", "filepath": "HTML/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": "M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z" } }], "name": "HTML", "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=\"M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z\"></path></svg>"
},
"24": {
metadata: { "moduleName": "Html24", "filepath": "HTML/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": "M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z" } }], "name": "HTML", "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=\"M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z\"></path></svg>"
},
"20": {
metadata: { "moduleName": "Html20", "filepath": "HTML/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": "M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z" } }], "name": "HTML", "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=\"M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z\"></path></svg>"
},
"16": {
metadata: { "moduleName": "Html16", "filepath": "HTML/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": "M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z" } }], "name": "HTML", "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=\"M28 19L28 11 26 11 26 21 32 21 32 19 28 19zM24 11L22 11 20.5 15 19 11 17 11 17 21 19 21 19 14 20.5 18 22 14 22 21 24 21 24 11zM9 13L11 13 11 21 13 21 13 13 15 13 15 11 9 11 9 13zM5 11L5 15 2 15 2 11 0 11 0 21 2 21 2 17 5 17 5 21 7 21 7 11 5 11z\"></path></svg>"
},
};
}
HtmlDirective_1 = HtmlDirective;
HtmlDirective.prototype.ngAfterViewInit = function () {
var svg = this.elementRef.nativeElement;
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
var icon = this.icons[this.size];
var domParser = new DOMParser();
var rawSVG = icon.svg;
var svgElement = domParser.parseFromString(rawSVG, "image/svg+xml").documentElement;
var 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;
}
var 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()
});
var attrKeys = Object.keys(attributes);
for (var i = 0; i < attrKeys.length; i++) {
var key = attrKeys[i];
var value = attributes[key];
if (key === "title") {
continue;
}
if (value) {
svg.setAttribute(key, value);
}
}
if (attributes.title) {
var title = document.createElement("title");
title.textContent = attributes.title;
HtmlDirective_1.titleIdCounter++;
title.setAttribute("id", "html-" + HtmlDirective_1.titleIdCounter);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", "html-" + HtmlDirective_1.titleIdCounter);
}
};
var HtmlDirective_1;
HtmlDirective.titleIdCounter = 0;
HtmlDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Input(),
__metadata("design:type", String)
], HtmlDirective.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlDirective.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], HtmlDirective.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlDirective.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], HtmlDirective.prototype, "isFocusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], HtmlDirective.prototype, "size", void 0);
HtmlDirective = HtmlDirective_1 = __decorate([
Directive({
selector: "[ibmIconHtml]"
}),
__metadata("design:paramtypes", [ElementRef])
], HtmlDirective);
return HtmlDirective;
}());
var HtmlModule = /** @class */ (function () {
function HtmlModule() {
}
HtmlModule = __decorate([
NgModule({
declarations: [
HtmlComponent,
HtmlDirective,
],
exports: [
HtmlComponent,
HtmlDirective,
]
})
], HtmlModule);
return HtmlModule;
}());
export { HtmlComponent, HtmlDirective, HtmlModule };