@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
174 lines (171 loc) • 11.9 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var CloudSnowDirective_1;
let CloudSnowComponent = class CloudSnowComponent {
constructor() {
this.focusable = false;
}
};
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowComponent.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowComponent.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CloudSnowComponent.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CloudSnowComponent.prototype, "focusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowComponent.prototype, "innerClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowComponent.prototype, "size", void 0);
CloudSnowComponent = __decorate([
Component({
selector: "ibm-icon-cloud-snow",
template: `
<svg
ibmIconCloudSnow
[size]="size"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby"
[ariaHidden]="ariaHidden"
[title]="title"
[isFocusable]="focusable"
[attr.class]="innerClass">
</svg>
`
})
], CloudSnowComponent);
let CloudSnowDirective = CloudSnowDirective_1 = class CloudSnowDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.isFocusable = false;
this.icons = {
"32": {
metadata: { "moduleName": "CloudSnow32", "filepath": "cloud--snow/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": "M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z" } }], "name": "cloud--snow", "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="M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z"></path></svg>`
},
"24": {
metadata: { "moduleName": "CloudSnow24", "filepath": "cloud--snow/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": "M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z" } }], "name": "cloud--snow", "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="M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z"></path></svg>`
},
"20": {
metadata: { "moduleName": "CloudSnow20", "filepath": "cloud--snow/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": "M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z" } }], "name": "cloud--snow", "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="M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z"></path></svg>`
},
"16": {
metadata: { "moduleName": "CloudSnow16", "filepath": "cloud--snow/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": "M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z" } }], "name": "cloud--snow", "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="M23.5 22H8.5A6.5 6.5 0 017.2 9.14a9 9 0 0117.6 0A6.5 6.5 0 0123.5 22zM16 4a7 7 0 00-6.94 6.14L9 11 8.14 11a4.5 4.5 0 00.36 9h15a4.5 4.5 0 00.36-9L23 11l-.1-.82A7 7 0 0016 4zM12 25.05L10.95 24 9.5 25.45 8.05 24 7 25.05 8.45 26.5 7 27.95 8.05 29 9.5 27.55 10.95 29 12 27.95 10.55 26.5 12 25.05zM26 25.05L24.95 24 23.5 25.45 22.05 24 21 25.05 22.45 26.5 21 27.95 22.05 29 23.5 27.55 24.95 29 26 27.95 24.55 26.5 26 25.05zM19 27.05L17.95 26 16.5 27.45 15.05 26 14 27.05 15.45 28.5 14 29.95 15.05 31 16.5 29.55 17.95 31 19 29.95 17.55 28.5 19 27.05z"></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;
CloudSnowDirective_1.titleIdCounter++;
title.setAttribute("id", `cloud-snow-${CloudSnowDirective_1.titleIdCounter}`);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", `cloud-snow-${CloudSnowDirective_1.titleIdCounter}`);
}
}
};
CloudSnowDirective.titleIdCounter = 0;
CloudSnowDirective.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowDirective.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowDirective.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CloudSnowDirective.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowDirective.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CloudSnowDirective.prototype, "isFocusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CloudSnowDirective.prototype, "size", void 0);
CloudSnowDirective = CloudSnowDirective_1 = __decorate([
Directive({
selector: "[ibmIconCloudSnow]"
}),
__metadata("design:paramtypes", [ElementRef])
], CloudSnowDirective);
let CloudSnowModule = class CloudSnowModule {
};
CloudSnowModule = __decorate([
NgModule({
declarations: [
CloudSnowComponent,
CloudSnowDirective,
],
exports: [
CloudSnowComponent,
CloudSnowDirective,
]
})
], CloudSnowModule);
export { CloudSnowComponent, CloudSnowDirective, CloudSnowModule };