@cardboard-box/ngx-box
Version:
A collection of useful directives, components and services for angular
44 lines • 5.5 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class SquareComponent {
constructor() {
this.width = 100;
this.height = 100;
this.color = '#fff';
}
get deg() {
if (this.rotate)
return this.rotate;
if (!this.total || !this.index)
return 0;
return 90 / this.total * this.index;
}
ngOnInit() {
}
style() {
const w = (Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2);
return `width: calc(${w}% - 10px);
height: calc(${w}% - 10px);
transform: translate(-50%, -50%) rotate(${this.deg}deg);
transform-origin: center center`;
}
}
SquareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: SquareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SquareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: SquareComponent, selector: "mc-square", inputs: { width: "width", height: "height", color: "color", rotate: "rotate", total: "total", index: "index" }, ngImport: i0, template: "<div class=\"square\" [style]=\"style()\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:calc(100% - 5px);height:calc(100% - 5px);padding:5px}.square{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff;padding:5px}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: SquareComponent, decorators: [{
type: Component,
args: [{ selector: 'mc-square', template: "<div class=\"square\" [style]=\"style()\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:calc(100% - 5px);height:calc(100% - 5px);padding:5px}.square{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff;padding:5px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], rotate: [{
type: Input
}], total: [{
type: Input
}], index: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3F1YXJlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhcmRib2FyZGJveC9uZ3gtYm94L3NyYy9saWIvY29tcG9uZW50cy9tYWdpYy1jaXJjbGUvc3F1YXJlL3NxdWFyZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jYXJkYm9hcmRib3gvbmd4LWJveC9zcmMvbGliL2NvbXBvbmVudHMvbWFnaWMtY2lyY2xlL3NxdWFyZS9zcXVhcmUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBT3pELE1BQU0sT0FBTyxlQUFlO0lBa0J4QjtRQWhCUyxVQUFLLEdBQVcsR0FBRyxDQUFDO1FBQ3BCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsVUFBSyxHQUFXLE1BQU0sQ0FBQztJQWNoQixDQUFDO0lBUmpCLElBQUksR0FBRztRQUNILElBQUksSUFBSSxDQUFDLE1BQU07WUFBRSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7UUFFcEMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSztZQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRXpDLE9BQU8sRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztJQUN4QyxDQUFDO0lBSUQsUUFBUTtJQUNSLENBQUM7SUFFRCxLQUFLO1FBQ0QsTUFBTSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUM5RSxPQUFPLGVBQWUsQ0FBQzt1QkFDUixDQUFDO2tEQUMwQixJQUFJLENBQUMsR0FBRzt3Q0FDbEIsQ0FBQztJQUNyQyxDQUFDOzs0R0E3QlEsZUFBZTtnR0FBZixlQUFlLGlLQ1A1QixtRkFFTTsyRkRLTyxlQUFlO2tCQUwzQixTQUFTOytCQUNJLFdBQVc7MEVBTVosS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdtYy1zcXVhcmUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zcXVhcmUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NxdWFyZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNxdWFyZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSB3aWR0aDogbnVtYmVyID0gMTAwO1xuICAgIEBJbnB1dCgpIGhlaWdodDogbnVtYmVyID0gMTAwO1xuICAgIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmcgPSAnI2ZmZic7XG4gICAgQElucHV0KCkgcm90YXRlPzogbnVtYmVyO1xuXG4gICAgQElucHV0KCkgdG90YWw/OiBudW1iZXI7XG4gICAgQElucHV0KCkgaW5kZXg/OiBudW1iZXI7XG5cbiAgICBnZXQgZGVnKCkge1xuICAgICAgICBpZiAodGhpcy5yb3RhdGUpIHJldHVybiB0aGlzLnJvdGF0ZTtcblxuICAgICAgICBpZiAoIXRoaXMudG90YWwgfHwgIXRoaXMuaW5kZXgpIHJldHVybiAwO1xuXG4gICAgICAgIHJldHVybiA5MCAvIHRoaXMudG90YWwgKiB0aGlzLmluZGV4O1xuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB9XG5cbiAgICBzdHlsZSgpIHtcbiAgICAgICAgY29uc3QgdyA9IChNYXRoLnNxcnQoTWF0aC5wb3codGhpcy53aWR0aCwgMikgKyBNYXRoLnBvdyh0aGlzLmhlaWdodCwgMikpIC8gMik7IFxuICAgICAgICByZXR1cm4gYHdpZHRoOiBjYWxjKCR7d30lIC0gMTBweCk7IFxuICAgICAgICBoZWlnaHQ6IGNhbGMoJHt3fSUgLSAxMHB4KTtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSkgcm90YXRlKCR7dGhpcy5kZWd9ZGVnKTtcbiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogY2VudGVyIGNlbnRlcmA7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNxdWFyZVwiIFtzdHlsZV09XCJzdHlsZSgpXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+Il19