@cardboard-box/ngx-box
Version:
A collection of useful directives, components and services for angular
71 lines • 10 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
export class RingComponent {
constructor() {
this._text = 'This is a magic circle. It is very magical, but its also pretty weird.';
this.width = '100%';
this.height = '100%';
this.color = '#fff';
this.innerWidth = '60px';
}
set text(value) { this._text = value; this.doText(); }
get text() { return this._text; }
ngAfterViewInit() {
this.doText();
}
ngOnInit() {
this.doText();
}
doText() {
if (!this.textEl)
return;
const el = this.textEl.nativeElement;
el.innerHTML = '';
const letters = this.text.split('');
if (letters.length == 0)
return;
letters.map((t, i) => {
const e = document.createElement('div');
e.classList.add('rotater');
e.style.cssText = this.textStyle(i, letters.length);
e.innerHTML = `<span>${t}</span>`;
el.appendChild(e);
return e;
});
}
textStyle(i, size) {
const rot = ((i + 1) / size) * 360;
return `height: calc(${this.width});
transform: rotate(${rot}deg);
position: absolute;
top: 0;
left: 50%;
transform-origin: center;`;
}
style() {
return `width: ${this.width}; height: ${this.height}; border-color: ${this.color}; color: ${this.color}`;
}
innerStyle() {
return `border-color: ${this.color}; color: ${this.color}; width: calc(100% - ${this.innerWidth}); height: calc(100% - ${this.innerWidth});`;
}
}
RingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: RingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: RingComponent, selector: "mc-ring", inputs: { width: "width", height: "height", color: "color", innerWidth: "innerWidth", text: "text" }, viewQueries: [{ propertyName: "textEl", first: true, predicate: ["textoutput"], descendants: true }], ngImport: i0, template: "<div class=\"ring\" [style]=\"style()\">\n <div class=\"text\" #textoutput></div>\n <div class=\"inner-ring\" [style]=\"innerStyle()\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{width:100%;height:100%}.ring{position:relative;border:1px solid #fff;border-radius:50%}.ring .text{position:absolute;top:50%;left:50%;width:calc(100% - 5px);height:calc(100% - 5px);transform:translate(-50%,-50%) translate(-5px);font-size:18px;font-family:monospace}.ring .inner-ring{position:absolute;border:1px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: RingComponent, decorators: [{
type: Component,
args: [{ selector: 'mc-ring', template: "<div class=\"ring\" [style]=\"style()\">\n <div class=\"text\" #textoutput></div>\n <div class=\"inner-ring\" [style]=\"innerStyle()\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{width:100%;height:100%}.ring{position:relative;border:1px solid #fff;border-radius:50%}.ring .text{position:absolute;top:50%;left:50%;width:calc(100% - 5px);height:calc(100% - 5px);transform:translate(-50%,-50%) translate(-5px);font-size:18px;font-family:monospace}.ring .inner-ring{position:absolute;border:1px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], innerWidth: [{
type: Input
}], textEl: [{
type: ViewChild,
args: ['textoutput']
}], text: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jYXJkYm9hcmRib3gvbmd4LWJveC9zcmMvbGliL2NvbXBvbmVudHMvbWFnaWMtY2lyY2xlL3JpbmcvcmluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jYXJkYm9hcmRib3gvbmd4LWJveC9zcmMvbGliL2NvbXBvbmVudHMvbWFnaWMtY2lyY2xlL3JpbmcvcmluZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxTQUFTLEVBQTZCLE1BQU0sZUFBZSxDQUFDOztBQU8vRixNQUFNLE9BQU8sYUFBYTtJQWN0QjtRQVpRLFVBQUssR0FBVyx3RUFBd0UsQ0FBQztRQUV4RixVQUFLLEdBQVcsTUFBTSxDQUFDO1FBQ3ZCLFdBQU0sR0FBVyxNQUFNLENBQUM7UUFDeEIsVUFBSyxHQUFXLE1BQU0sQ0FBQztRQUN2QixlQUFVLEdBQVcsTUFBTSxDQUFDO0lBT3JCLENBQUM7SUFIakIsSUFBYSxJQUFJLENBQUMsS0FBYSxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN2RSxJQUFJLElBQUksS0FBSyxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBSWpDLGVBQWU7UUFDWCxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVPLE1BQU07UUFDVixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU07WUFBRSxPQUFPO1FBRXpCLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDO1FBRXJDLEVBQUUsQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO1FBRWxCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3BDLElBQUksT0FBTyxDQUFDLE1BQU0sSUFBSSxDQUFDO1lBQUUsT0FBTztRQUVoQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ2pCLE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDeEMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDM0IsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ3BELENBQUMsQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDLFNBQVMsQ0FBQztZQUNsQyxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ2xCLE9BQU8sQ0FBQyxDQUFDO1FBQ2IsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsU0FBUyxDQUFDLENBQVMsRUFBRSxJQUFZO1FBQzdCLE1BQU0sR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsR0FBRyxDQUFDO1FBQ25DLE9BQU8sZ0JBQWdCLElBQUksQ0FBQyxLQUFLOzRCQUNiLEdBQUc7Ozs7a0NBSUcsQ0FBQztJQUMvQixDQUFDO0lBRUQsS0FBSztRQUNELE9BQU8sVUFBVSxJQUFJLENBQUMsS0FBSyxhQUFhLElBQUksQ0FBQyxNQUFNLG1CQUFtQixJQUFJLENBQUMsS0FBSyxZQUFZLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUM3RyxDQUFDO0lBRUQsVUFBVTtRQUNOLE9BQU8saUJBQWlCLElBQUksQ0FBQyxLQUFLLFlBQVksSUFBSSxDQUFDLEtBQUssd0JBQXdCLElBQUksQ0FBQyxVQUFVLDBCQUEwQixJQUFJLENBQUMsVUFBVSxJQUFJLENBQUM7SUFDakosQ0FBQzs7MEdBNURRLGFBQWE7OEZBQWIsYUFBYSwyUENQMUIsc01BS007MkZERU8sYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxTQUFTOzBFQVFSLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRW1CLE1BQU07c0JBQTlCLFNBQVM7dUJBQUMsWUFBWTtnQkFFVixJQUFJO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYsIEFmdGVyVmlld0luaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWMtcmluZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9yaW5nLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcmluZy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFJpbmdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuXG4gICAgcHJpdmF0ZSBfdGV4dDogc3RyaW5nID0gJ1RoaXMgaXMgYSBtYWdpYyBjaXJjbGUuIEl0IGlzIHZlcnkgbWFnaWNhbCwgYnV0IGl0cyBhbHNvIHByZXR0eSB3ZWlyZC4nO1xuXG4gICAgQElucHV0KCkgd2lkdGg6IHN0cmluZyA9ICcxMDAlJztcbiAgICBASW5wdXQoKSBoZWlnaHQ6IHN0cmluZyA9ICcxMDAlJztcbiAgICBASW5wdXQoKSBjb2xvcjogc3RyaW5nID0gJyNmZmYnO1xuICAgIEBJbnB1dCgpIGlubmVyV2lkdGg6IHN0cmluZyA9ICc2MHB4JztcblxuICAgIEBWaWV3Q2hpbGQoJ3RleHRvdXRwdXQnKSB0ZXh0RWwhOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICAgIEBJbnB1dCgpIHNldCB0ZXh0KHZhbHVlOiBzdHJpbmcpIHsgdGhpcy5fdGV4dCA9IHZhbHVlOyB0aGlzLmRvVGV4dCgpOyB9XG4gICAgZ2V0IHRleHQoKSB7IHJldHVybiB0aGlzLl90ZXh0OyB9XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRvVGV4dCgpO1xuICAgIH1cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRvVGV4dCgpO1xuICAgIH1cblxuICAgIHByaXZhdGUgZG9UZXh0KCkge1xuICAgICAgICBpZiAoIXRoaXMudGV4dEVsKSByZXR1cm47XG5cbiAgICAgICAgY29uc3QgZWwgPSB0aGlzLnRleHRFbC5uYXRpdmVFbGVtZW50O1xuXG4gICAgICAgIGVsLmlubmVySFRNTCA9ICcnO1xuXG4gICAgICAgIGNvbnN0IGxldHRlcnMgPSB0aGlzLnRleHQuc3BsaXQoJycpO1xuICAgICAgICBpZiAobGV0dGVycy5sZW5ndGggPT0gMCkgcmV0dXJuO1xuXG4gICAgICAgIGxldHRlcnMubWFwKCh0LCBpKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG4gICAgICAgICAgICBlLmNsYXNzTGlzdC5hZGQoJ3JvdGF0ZXInKTtcbiAgICAgICAgICAgIGUuc3R5bGUuY3NzVGV4dCA9IHRoaXMudGV4dFN0eWxlKGksIGxldHRlcnMubGVuZ3RoKTtcbiAgICAgICAgICAgIGUuaW5uZXJIVE1MID0gYDxzcGFuPiR7dH08L3NwYW4+YDtcbiAgICAgICAgICAgIGVsLmFwcGVuZENoaWxkKGUpO1xuICAgICAgICAgICAgcmV0dXJuIGU7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHRleHRTdHlsZShpOiBudW1iZXIsIHNpemU6IG51bWJlcikge1xuICAgICAgICBjb25zdCByb3QgPSAoKGkgKyAxKSAvIHNpemUpICogMzYwO1xuICAgICAgICByZXR1cm4gYGhlaWdodDogY2FsYygke3RoaXMud2lkdGh9KTtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoJHtyb3R9ZGVnKTtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICB0b3A6IDA7XG4gICAgICAgIGxlZnQ6IDUwJTtcbiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyO2A7XG4gICAgfVxuXG4gICAgc3R5bGUoKSB7XG4gICAgICAgIHJldHVybiBgd2lkdGg6ICR7dGhpcy53aWR0aH07IGhlaWdodDogJHt0aGlzLmhlaWdodH07IGJvcmRlci1jb2xvcjogJHt0aGlzLmNvbG9yfTsgY29sb3I6ICR7dGhpcy5jb2xvcn1gO1xuICAgIH1cblxuICAgIGlubmVyU3R5bGUoKSB7XG4gICAgICAgIHJldHVybiBgYm9yZGVyLWNvbG9yOiAke3RoaXMuY29sb3J9OyBjb2xvcjogJHt0aGlzLmNvbG9yfTsgd2lkdGg6IGNhbGMoMTAwJSAtICR7dGhpcy5pbm5lcldpZHRofSk7IGhlaWdodDogY2FsYygxMDAlIC0gJHt0aGlzLmlubmVyV2lkdGh9KTtgO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJyaW5nXCIgW3N0eWxlXT1cInN0eWxlKClcIj5cbiAgICA8ZGl2IGNsYXNzPVwidGV4dFwiICN0ZXh0b3V0cHV0PjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpbm5lci1yaW5nXCIgW3N0eWxlXT1cImlubmVyU3R5bGUoKVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=