@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
174 lines (171 loc) • 10.5 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var StarReviewDirective_1;
let StarReviewComponent = class StarReviewComponent {
constructor() {
this.focusable = false;
}
};
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewComponent.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewComponent.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], StarReviewComponent.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], StarReviewComponent.prototype, "focusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewComponent.prototype, "innerClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewComponent.prototype, "size", void 0);
StarReviewComponent = __decorate([
Component({
selector: "ibm-icon-star-review",
template: `
<svg
ibmIconStarReview
[size]="size"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby"
[ariaHidden]="ariaHidden"
[title]="title"
[isFocusable]="focusable"
[attr.class]="innerClass">
</svg>
`
})
], StarReviewComponent);
let StarReviewDirective = StarReviewDirective_1 = class StarReviewDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.isFocusable = false;
this.icons = {
"32": {
metadata: { "moduleName": "StarReview32", "filepath": "star--review/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": "M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z" } }, { "elem": "path", "attrs": { "d": "M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z" } }], "name": "star--review", "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="M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z"></path><path d="M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z"></path></svg>`
},
"24": {
metadata: { "moduleName": "StarReview24", "filepath": "star--review/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": "M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z" } }, { "elem": "path", "attrs": { "d": "M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z" } }], "name": "star--review", "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="M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z"></path><path d="M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z"></path></svg>`
},
"20": {
metadata: { "moduleName": "StarReview20", "filepath": "star--review/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": "M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z" } }, { "elem": "path", "attrs": { "d": "M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z" } }], "name": "star--review", "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="M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z"></path><path d="M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z"></path></svg>`
},
"16": {
metadata: { "moduleName": "StarReview16", "filepath": "star--review/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": "M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z" } }, { "elem": "path", "attrs": { "d": "M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z" } }], "name": "star--review", "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="M18 26H26V28H18zM18 22H30V24H18zM18 18H30V20H18z"></path><path d="M20.549 11.217L16 2 11.451 11.217 1.28 12.695 8.64 19.87 6.902 30 14 26.269 14 24.009 9.559 26.344 10.611 20.208 10.789 19.171 10.036 18.438 5.578 14.091 11.739 13.196 12.779 13.045 13.245 12.102 16 6.519 18.755 12.102 19.221 13.045 20.261 13.196 27.715 14.281 28 12.3 20.549 11.217z"></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;
StarReviewDirective_1.titleIdCounter++;
title.setAttribute("id", `star-review-${StarReviewDirective_1.titleIdCounter}`);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", `star-review-${StarReviewDirective_1.titleIdCounter}`);
}
}
};
StarReviewDirective.titleIdCounter = 0;
StarReviewDirective.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewDirective.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewDirective.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], StarReviewDirective.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewDirective.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], StarReviewDirective.prototype, "isFocusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarReviewDirective.prototype, "size", void 0);
StarReviewDirective = StarReviewDirective_1 = __decorate([
Directive({
selector: "[ibmIconStarReview]"
}),
__metadata("design:paramtypes", [ElementRef])
], StarReviewDirective);
let StarReviewModule = class StarReviewModule {
};
StarReviewModule = __decorate([
NgModule({
declarations: [
StarReviewComponent,
StarReviewDirective,
],
exports: [
StarReviewComponent,
StarReviewDirective,
]
})
], StarReviewModule);
export { StarReviewComponent, StarReviewDirective, StarReviewModule };