@carbon/icons-angular
Version:
Angular components for icons in digital and software products using the Carbon Design System
169 lines (166 loc) • 14.2 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Input, Component, ElementRef, Directive, NgModule } from '@angular/core';
import { getAttributes } from '@carbon/icon-helpers';
var QrCodeComponent = /** @class */ (function () {
function QrCodeComponent() {
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: "\n <svg\n ibmIconQrCode\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 "
})
], QrCodeComponent);
return QrCodeComponent;
}());
var QrCodeDirective = /** @class */ (function () {
function QrCodeDirective(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>"
},
};
}
QrCodeDirective_1 = QrCodeDirective;
QrCodeDirective.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;
QrCodeDirective_1.titleIdCounter++;
title.setAttribute("id", "qr-code-" + QrCodeDirective_1.titleIdCounter);
svg.appendChild(title);
svg.setAttribute("aria-labelledby", "qr-code-" + QrCodeDirective_1.titleIdCounter);
}
};
var QrCodeDirective_1;
QrCodeDirective.titleIdCounter = 0;
QrCodeDirective.ctorParameters = function () { return [
{ 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);
return QrCodeDirective;
}());
var QrCodeModule = /** @class */ (function () {
function QrCodeModule() {
}
QrCodeModule = __decorate([
NgModule({
declarations: [
QrCodeComponent,
QrCodeDirective,
],
exports: [
QrCodeComponent,
QrCodeDirective,
]
})
], QrCodeModule);
return QrCodeModule;
}());
export { QrCodeComponent, QrCodeDirective, QrCodeModule };