@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
174 lines (171 loc) • 13.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var QrCodeDirective_1;
let QrCodeComponent = class QrCodeComponent {
constructor() {
this.focusable = false;
}
};
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeComponent.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeComponent.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], QrCodeComponent.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], QrCodeComponent.prototype, "focusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeComponent.prototype, "innerClass", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeComponent.prototype, "size", void 0);
QrCodeComponent = __decorate([
Component({
selector: "ibm-icon-qr-code",
template: `
<svg
ibmIconQrCode
[size]="size"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby"
[ariaHidden]="ariaHidden"
[title]="title"
[isFocusable]="focusable"
[attr.class]="innerClass">
</svg>
`
})
], QrCodeComponent);
let QrCodeDirective = QrCodeDirective_1 = class QrCodeDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.isFocusable = false;
this.icons = {
"32": {
metadata: { "moduleName": "QrCode32", "filepath": "qr-code/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": "M24 26H26V28H24z", "transform": "rotate(-90 25 27)" } }, { "elem": "path", "attrs": { "d": "M18 22H20V24H18z", "transform": "rotate(-90 19 23)" } }, { "elem": "path", "attrs": { "d": "M18 30L22 30 22 28 20 28 20 26 18 26 18 30z" } }, { "elem": "path", "attrs": { "d": "M25 23H29V25H25z", "transform": "rotate(-90 27 24)" } }, { "elem": "path", "attrs": { "d": "M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z" } }, { "elem": "path", "attrs": { "d": "M19 17H21V21H19z", "transform": "rotate(-90 20 19)" } }, { "elem": "path", "attrs": { "d": "M6 22H10V26H6z" } }, { "elem": "path", "attrs": { "d": "M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z" } }, { "elem": "path", "attrs": { "d": "M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z" } }, { "elem": "path", "attrs": { "d": "M14,14H2V2H14ZM4,12h8V4H4Z" } }], "name": "qr-code", "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="M24 26H26V28H24z" transform="rotate(-90 25 27)"></path><path d="M18 22H20V24H18z" transform="rotate(-90 19 23)"></path><path d="M18 30L22 30 22 28 20 28 20 26 18 26 18 30z"></path><path d="M25 23H29V25H25z" transform="rotate(-90 27 24)"></path><path d="M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z"></path><path d="M19 17H21V21H19z" transform="rotate(-90 20 19)"></path><path d="M6 22H10V26H6z"></path><path d="M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z"></path><path d="M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z"></path><path d="M14,14H2V2H14ZM4,12h8V4H4Z"></path></svg>`
},
"24": {
metadata: { "moduleName": "QrCode24", "filepath": "qr-code/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": "M24 26H26V28H24z", "transform": "rotate(-90 25 27)" } }, { "elem": "path", "attrs": { "d": "M18 22H20V24H18z", "transform": "rotate(-90 19 23)" } }, { "elem": "path", "attrs": { "d": "M18 30L22 30 22 28 20 28 20 26 18 26 18 30z" } }, { "elem": "path", "attrs": { "d": "M25 23H29V25H25z", "transform": "rotate(-90 27 24)" } }, { "elem": "path", "attrs": { "d": "M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z" } }, { "elem": "path", "attrs": { "d": "M19 17H21V21H19z", "transform": "rotate(-90 20 19)" } }, { "elem": "path", "attrs": { "d": "M6 22H10V26H6z" } }, { "elem": "path", "attrs": { "d": "M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z" } }, { "elem": "path", "attrs": { "d": "M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z" } }, { "elem": "path", "attrs": { "d": "M14,14H2V2H14ZM4,12h8V4H4Z" } }], "name": "qr-code", "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="M24 26H26V28H24z" transform="rotate(-90 25 27)"></path><path d="M18 22H20V24H18z" transform="rotate(-90 19 23)"></path><path d="M18 30L22 30 22 28 20 28 20 26 18 26 18 30z"></path><path d="M25 23H29V25H25z" transform="rotate(-90 27 24)"></path><path d="M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z"></path><path d="M19 17H21V21H19z" transform="rotate(-90 20 19)"></path><path d="M6 22H10V26H6z"></path><path d="M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z"></path><path d="M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z"></path><path d="M14,14H2V2H14ZM4,12h8V4H4Z"></path></svg>`
},
"20": {
metadata: { "moduleName": "QrCode20", "filepath": "qr-code/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": "M24 26H26V28H24z", "transform": "rotate(-90 25 27)" } }, { "elem": "path", "attrs": { "d": "M18 22H20V24H18z", "transform": "rotate(-90 19 23)" } }, { "elem": "path", "attrs": { "d": "M18 30L22 30 22 28 20 28 20 26 18 26 18 30z" } }, { "elem": "path", "attrs": { "d": "M25 23H29V25H25z", "transform": "rotate(-90 27 24)" } }, { "elem": "path", "attrs": { "d": "M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z" } }, { "elem": "path", "attrs": { "d": "M19 17H21V21H19z", "transform": "rotate(-90 20 19)" } }, { "elem": "path", "attrs": { "d": "M6 22H10V26H6z" } }, { "elem": "path", "attrs": { "d": "M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z" } }, { "elem": "path", "attrs": { "d": "M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z" } }, { "elem": "path", "attrs": { "d": "M14,14H2V2H14ZM4,12h8V4H4Z" } }], "name": "qr-code", "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="M24 26H26V28H24z" transform="rotate(-90 25 27)"></path><path d="M18 22H20V24H18z" transform="rotate(-90 19 23)"></path><path d="M18 30L22 30 22 28 20 28 20 26 18 26 18 30z"></path><path d="M25 23H29V25H25z" transform="rotate(-90 27 24)"></path><path d="M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z"></path><path d="M19 17H21V21H19z" transform="rotate(-90 20 19)"></path><path d="M6 22H10V26H6z"></path><path d="M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z"></path><path d="M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z"></path><path d="M14,14H2V2H14ZM4,12h8V4H4Z"></path></svg>`
},
"16": {
metadata: { "moduleName": "QrCode16", "filepath": "qr-code/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": "M24 26H26V28H24z", "transform": "rotate(-90 25 27)" } }, { "elem": "path", "attrs": { "d": "M18 22H20V24H18z", "transform": "rotate(-90 19 23)" } }, { "elem": "path", "attrs": { "d": "M18 30L22 30 22 28 20 28 20 26 18 26 18 30z" } }, { "elem": "path", "attrs": { "d": "M25 23H29V25H25z", "transform": "rotate(-90 27 24)" } }, { "elem": "path", "attrs": { "d": "M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z" } }, { "elem": "path", "attrs": { "d": "M19 17H21V21H19z", "transform": "rotate(-90 20 19)" } }, { "elem": "path", "attrs": { "d": "M6 22H10V26H6z" } }, { "elem": "path", "attrs": { "d": "M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z" } }, { "elem": "path", "attrs": { "d": "M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z" } }, { "elem": "path", "attrs": { "d": "M14,14H2V2H14ZM4,12h8V4H4Z" } }], "name": "qr-code", "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="M24 26H26V28H24z" transform="rotate(-90 25 27)"></path><path d="M18 22H20V24H18z" transform="rotate(-90 19 23)"></path><path d="M18 30L22 30 22 28 20 28 20 26 18 26 18 30z"></path><path d="M25 23H29V25H25z" transform="rotate(-90 27 24)"></path><path d="M28 26L30 26 30 30 26 30 26 28 28 28 28 26zM26 20L26 18 30 18 30 22 28 22 28 20 26 20zM24 20L22 20 22 24 20 24 20 26 24 26 24 20z"></path><path d="M19 17H21V21H19z" transform="rotate(-90 20 19)"></path><path d="M6 22H10V26H6z"></path><path d="M14 30H2V18H14zM4 28h8V20H4zM22 6H26V10H22z"></path><path d="M30 14H18V2H30zM20 12h8V4H20zM6 6H10V10H6z"></path><path d="M14,14H2V2H14ZM4,12h8V4H4Z"></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;
QrCodeDirective_1.titleIdCounter++;
title.setAttribute("id", `qr-code-${QrCodeDirective_1.titleIdCounter}`);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", `qr-code-${QrCodeDirective_1.titleIdCounter}`);
}
}
};
QrCodeDirective.titleIdCounter = 0;
QrCodeDirective.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeDirective.prototype, "ariaLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeDirective.prototype, "ariaLabelledby", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], QrCodeDirective.prototype, "ariaHidden", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeDirective.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], QrCodeDirective.prototype, "isFocusable", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], QrCodeDirective.prototype, "size", void 0);
QrCodeDirective = QrCodeDirective_1 = __decorate([
Directive({
selector: "[ibmIconQrCode]"
}),
__metadata("design:paramtypes", [ElementRef])
], QrCodeDirective);
let QrCodeModule = class QrCodeModule {
};
QrCodeModule = __decorate([
NgModule({
declarations: [
QrCodeComponent,
QrCodeDirective,
],
exports: [
QrCodeComponent,
QrCodeDirective,
]
})
], QrCodeModule);
export { QrCodeComponent, QrCodeDirective, QrCodeModule };