ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
37 lines • 6.2 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DotsComponent {
constructor() {
this.count = 0;
this.activeIndex = 0;
this.small = false;
this.selected = new EventEmitter();
this.dots = [];
}
clickHandler(index) {
this.selected.emit(index);
this.activeIndex = index;
}
ngOnChanges(changes) {
this.dots = new Array(this.count);
}
ngOnInit() {
this.dots = new Array(Number(this.count));
}
}
DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DotsComponent, selector: "sdk-dots", inputs: { count: "count", activeIndex: "activeIndex", small: "small" }, outputs: { selected: "selected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sdk-dots\" [class.sdk-dots--small]=\"small\">\n <div class=\"sdk-dots__dot\" [class.sdk-dots__dot--active]=\"activeIndex === i\" *ngFor=\"let dot of dots; let i = index\"\n (click)=\"clickHandler(i)\"></div>\n</div>\n", styles: [".sdk-dots{display:flex;align-items:center;min-height:20px}.sdk-dots .sdk-dots__dot{width:12px;height:12px;border-radius:50%;background-color:var(--background-a80);margin:0 6px;cursor:pointer;transition:all .4s}.sdk-dots .sdk-dots__dot:hover{background-color:var(--background-a60)}.sdk-dots .sdk-dots__dot--active{background-color:var(--primary);width:20px;height:20px}.sdk-dots .sdk-dots__dot--active:hover{background-color:var(--primary)}.sdk-dots--small .sdk-dots__dot{width:10px;height:10px}.sdk-dots--small .sdk-dots__dot--active{width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DotsComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-dots', template: "<div class=\"sdk-dots\" [class.sdk-dots--small]=\"small\">\n <div class=\"sdk-dots__dot\" [class.sdk-dots__dot--active]=\"activeIndex === i\" *ngFor=\"let dot of dots; let i = index\"\n (click)=\"clickHandler(i)\"></div>\n</div>\n", styles: [".sdk-dots{display:flex;align-items:center;min-height:20px}.sdk-dots .sdk-dots__dot{width:12px;height:12px;border-radius:50%;background-color:var(--background-a80);margin:0 6px;cursor:pointer;transition:all .4s}.sdk-dots .sdk-dots__dot:hover{background-color:var(--background-a60)}.sdk-dots .sdk-dots__dot--active{background-color:var(--primary);width:20px;height:20px}.sdk-dots .sdk-dots__dot--active:hover{background-color:var(--primary)}.sdk-dots--small .sdk-dots__dot{width:10px;height:10px}.sdk-dots--small .sdk-dots__dot--active{width:14px;height:14px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { count: [{
type: Input
}], activeIndex: [{
type: Input
}], small: [{
type: Input
}], selected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG90cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL25neC1zbGljZS1raXQvc3JjL2xpYi9sYXlvdXQvZG90cy9kb3RzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL2xheW91dC9kb3RzL2RvdHMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU8xRixNQUFNLE9BQU8sYUFBYTtJQVV0QjtRQVJnQixVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBQ2xCLGdCQUFXLEdBQVcsQ0FBQyxDQUFDO1FBQ3hCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFFdEIsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFeEMsU0FBSSxHQUFHLEVBQUUsQ0FBQztJQUdqQixDQUFDO0lBRU0sWUFBWSxDQUFDLEtBQWE7UUFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDN0IsQ0FBQztJQUVNLFdBQVcsQ0FBQyxPQUFPO1FBQ3RCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFTSxRQUFRO1FBQ1gsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDOUMsQ0FBQzs7MEdBeEJRLGFBQWE7OEZBQWIsYUFBYSxnTENQMUIsbVBBSUE7MkZER2EsYUFBYTtrQkFMekIsU0FBUzsrQkFDSSxVQUFVOzBFQU1KLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsV0FBVztzQkFBMUIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUVXLFFBQVE7c0JBQXhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdzZGstZG90cycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RvdHMuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RvdHMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEb3RzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuXG4gICAgQElucHV0KCkgcHVibGljIGNvdW50OiBudW1iZXIgPSAwO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBhY3RpdmVJbmRleDogbnVtYmVyID0gMDtcbiAgICBASW5wdXQoKSBwdWJsaWMgc21hbGw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIEBPdXRwdXQoKSBwdWJsaWMgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBwdWJsaWMgZG90cyA9IFtdO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgfVxuXG4gICAgcHVibGljIGNsaWNrSGFuZGxlcihpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdChpbmRleCk7XG4gICAgICAgIHRoaXMuYWN0aXZlSW5kZXggPSBpbmRleDtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdPbkNoYW5nZXMoY2hhbmdlcyk6IHZvaWQge1xuICAgICAgICB0aGlzLmRvdHMgPSBuZXcgQXJyYXkodGhpcy5jb3VudCk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRvdHMgPSBuZXcgQXJyYXkoTnVtYmVyKHRoaXMuY291bnQpKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2RrLWRvdHNcIiBbY2xhc3Muc2RrLWRvdHMtLXNtYWxsXT1cInNtYWxsXCI+XG4gICAgPGRpdiBjbGFzcz1cInNkay1kb3RzX19kb3RcIiBbY2xhc3Muc2RrLWRvdHNfX2RvdC0tYWN0aXZlXT1cImFjdGl2ZUluZGV4ID09PSBpXCIgKm5nRm9yPVwibGV0IGRvdCBvZiBkb3RzOyBsZXQgaSA9IGluZGV4XCJcbiAgICAgICAgIChjbGljayk9XCJjbGlja0hhbmRsZXIoaSlcIj48L2Rpdj5cbjwvZGl2PlxuIl19