@coreui/angular
Version:
CoreUI Components Library for Angular
82 lines • 9.97 kB
JavaScript
import { Component, HostBinding, HostListener, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../carousel-state";
export class CarouselControlComponent {
constructor(changeDetectorRef, carouselState) {
this.changeDetectorRef = changeDetectorRef;
this.carouselState = carouselState;
/**
* Carousel control direction. [docs]
* @type {'next' | 'prev'}
*/
this.direction = 'next';
this.hasContent = true;
}
/**
* Carousel control caption. [docs]
* @type string
*/
set caption(value) {
this._caption = value;
}
get caption() {
return !!this._caption ? this._caption : this.direction === 'prev' ? 'Previous' : 'Next';
}
get hostRole() {
return 'button';
}
get hostClasses() {
return `carousel-control-${this.direction}`;
}
get carouselControlIconClass() {
return `carousel-control-${this.direction}-icon`;
}
onKeyUp($event) {
if ($event.key === 'Enter') {
this.play();
}
if ($event.key === 'ArrowLeft') {
this.play('prev');
}
if ($event.key === 'ArrowRight') {
this.play('next');
}
}
onClick($event) {
this.play();
}
ngAfterViewInit() {
this.hasContent = this.content?.nativeElement.childNodes.length ?? false;
this.changeDetectorRef.detectChanges();
}
play(direction = this.direction) {
const nextIndex = this.carouselState.direction(direction);
this.carouselState.state = { activeItemIndex: nextIndex };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CarouselControlComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CarouselState }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { caption: "caption", direction: "direction" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "this.hostRole", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "@if (hasContent) {\n <div #content>\n <ng-content />\n </div>\n} @else {\n <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n <span class=\"visually-hidden\">{{ caption }}</span>\n}\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CarouselControlComponent, decorators: [{
type: Component,
args: [{ selector: 'c-carousel-control', standalone: true, template: "@if (hasContent) {\n <div #content>\n <ng-content />\n </div>\n} @else {\n <span [class]=\"carouselControlIconClass\" [attr.aria-label]=\"direction\" [attr.aria-hidden]=\"true\"></span>\n <span class=\"visually-hidden\">{{ caption }}</span>\n}\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.CarouselState }], propDecorators: { caption: [{
type: Input
}], direction: [{
type: Input
}], hostRole: [{
type: HostBinding,
args: ['attr.role']
}], hostClasses: [{
type: HostBinding,
args: ['class']
}], content: [{
type: ViewChild,
args: ['content']
}], onKeyUp: [{
type: HostListener,
args: ['keyup', ['$event']]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2Fyb3VzZWwtY29udHJvbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL2Nhcm91c2VsL2Nhcm91c2VsLWNvbnRyb2wvY2Fyb3VzZWwtY29udHJvbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL2Nhcm91c2VsL2Nhcm91c2VsLWNvbnRyb2wvY2Fyb3VzZWwtY29udHJvbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBR0wsU0FBUyxFQUVULFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUNMLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQzs7O0FBU3ZCLE1BQU0sT0FBTyx3QkFBd0I7SUFFbkMsWUFDVSxpQkFBb0MsRUFDcEMsYUFBNEI7UUFENUIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUNwQyxrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQWlCdEM7OztXQUdHO1FBQ00sY0FBUyxHQUFvQixNQUFNLENBQUM7UUFrQjdDLGVBQVUsR0FBRyxJQUFJLENBQUM7SUF0Q2YsQ0FBQztJQUdKOzs7T0FHRztJQUNILElBQ0ksT0FBTyxDQUFDLEtBQUs7UUFDZixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBSSxPQUFPO1FBQ1QsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsS0FBSyxNQUFNLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO0lBQzNGLENBQUM7SUFRRCxJQUNJLFFBQVE7UUFDVixPQUFPLFFBQVEsQ0FBQztJQUNsQixDQUFDO0lBRUQsSUFDSSxXQUFXO1FBQ2IsT0FBTyxvQkFBb0IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQzlDLENBQUM7SUFFRCxJQUFJLHdCQUF3QjtRQUMxQixPQUFPLG9CQUFvQixJQUFJLENBQUMsU0FBUyxPQUFPLENBQUM7SUFDbkQsQ0FBQztJQU9ELE9BQU8sQ0FBQyxNQUFxQjtRQUMzQixJQUFJLE1BQU0sQ0FBQyxHQUFHLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDM0IsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQztRQUNELElBQUksTUFBTSxDQUFDLEdBQUcsS0FBSyxXQUFXLEVBQUUsQ0FBQztZQUMvQixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3BCLENBQUM7UUFDRCxJQUFJLE1BQU0sQ0FBQyxHQUFHLEtBQUssWUFBWSxFQUFFLENBQUM7WUFDaEMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUdNLE9BQU8sQ0FBQyxNQUFrQjtRQUMvQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDZCxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxhQUFhLENBQUMsVUFBVSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUM7UUFDekUsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFTyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTO1FBQ3JDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxHQUFHLEVBQUUsZUFBZSxFQUFFLFNBQVMsRUFBRSxDQUFDO0lBQzVELENBQUM7K0dBdkVVLHdCQUF3QjttR0FBeEIsd0JBQXdCLHNZQ2xCckMsOFBBUUE7OzRGRFVhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDRSxvQkFBb0IsY0FFbEIsSUFBSTtrSEFlWixPQUFPO3NCQURWLEtBQUs7Z0JBYUcsU0FBUztzQkFBakIsS0FBSztnQkFHRixRQUFRO3NCQURYLFdBQVc7dUJBQUMsV0FBVztnQkFNcEIsV0FBVztzQkFEZCxXQUFXO3VCQUFDLE9BQU87Z0JBU0UsT0FBTztzQkFBNUIsU0FBUzt1QkFBQyxTQUFTO2dCQUtwQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQWMxQixPQUFPO3NCQURiLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2Fyb3VzZWxTdGF0ZSB9IGZyb20gJy4uL2Nhcm91c2VsLXN0YXRlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYy1jYXJvdXNlbC1jb250cm9sJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Nhcm91c2VsLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIENhcm91c2VsQ29udHJvbENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgY2Fyb3VzZWxTdGF0ZTogQ2Fyb3VzZWxTdGF0ZVxuICApIHt9XG5cbiAgcHJpdmF0ZSBfY2FwdGlvbj86IHN0cmluZztcbiAgLyoqXG4gICAqIENhcm91c2VsIGNvbnRyb2wgY2FwdGlvbi4gW2RvY3NdXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgQElucHV0KClcbiAgc2V0IGNhcHRpb24odmFsdWUpIHtcbiAgICB0aGlzLl9jYXB0aW9uID0gdmFsdWU7XG4gIH1cblxuICBnZXQgY2FwdGlvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiAhIXRoaXMuX2NhcHRpb24gPyB0aGlzLl9jYXB0aW9uIDogdGhpcy5kaXJlY3Rpb24gPT09ICdwcmV2JyA/ICdQcmV2aW91cycgOiAnTmV4dCc7XG4gIH1cblxuICAvKipcbiAgICogQ2Fyb3VzZWwgY29udHJvbCBkaXJlY3Rpb24uIFtkb2NzXVxuICAgKiBAdHlwZSB7J25leHQnIHwgJ3ByZXYnfVxuICAgKi9cbiAgQElucHV0KCkgZGlyZWN0aW9uOiAncHJldicgfCAnbmV4dCcgPSAnbmV4dCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKVxuICBnZXQgaG9zdFJvbGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gJ2J1dHRvbic7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGhvc3RDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGBjYXJvdXNlbC1jb250cm9sLSR7dGhpcy5kaXJlY3Rpb259YDtcbiAgfVxuXG4gIGdldCBjYXJvdXNlbENvbnRyb2xJY29uQ2xhc3MoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYGNhcm91c2VsLWNvbnRyb2wtJHt0aGlzLmRpcmVjdGlvbn0taWNvbmA7XG4gIH1cblxuICBAVmlld0NoaWxkKCdjb250ZW50JykgY29udGVudD86IEVsZW1lbnRSZWY7XG5cbiAgaGFzQ29udGVudCA9IHRydWU7XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5dXAnLCBbJyRldmVudCddKVxuICBvbktleVVwKCRldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGlmICgkZXZlbnQua2V5ID09PSAnRW50ZXInKSB7XG4gICAgICB0aGlzLnBsYXkoKTtcbiAgICB9XG4gICAgaWYgKCRldmVudC5rZXkgPT09ICdBcnJvd0xlZnQnKSB7XG4gICAgICB0aGlzLnBsYXkoJ3ByZXYnKTtcbiAgICB9XG4gICAgaWYgKCRldmVudC5rZXkgPT09ICdBcnJvd1JpZ2h0Jykge1xuICAgICAgdGhpcy5wbGF5KCduZXh0Jyk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBwdWJsaWMgb25DbGljaygkZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLnBsYXkoKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmhhc0NvbnRlbnQgPSB0aGlzLmNvbnRlbnQ/Lm5hdGl2ZUVsZW1lbnQuY2hpbGROb2Rlcy5sZW5ndGggPz8gZmFsc2U7XG4gICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cblxuICBwcml2YXRlIHBsYXkoZGlyZWN0aW9uID0gdGhpcy5kaXJlY3Rpb24pOiB2b2lkIHtcbiAgICBjb25zdCBuZXh0SW5kZXggPSB0aGlzLmNhcm91c2VsU3RhdGUuZGlyZWN0aW9uKGRpcmVjdGlvbik7XG4gICAgdGhpcy5jYXJvdXNlbFN0YXRlLnN0YXRlID0geyBhY3RpdmVJdGVtSW5kZXg6IG5leHRJbmRleCB9O1xuICB9XG59XG4iLCJAaWYgKGhhc0NvbnRlbnQpIHtcbiAgPGRpdiAjY29udGVudD5cbiAgICA8bmctY29udGVudCAvPlxuICA8L2Rpdj5cbn0gQGVsc2Uge1xuICA8c3BhbiBbY2xhc3NdPVwiY2Fyb3VzZWxDb250cm9sSWNvbkNsYXNzXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJkaXJlY3Rpb25cIiBbYXR0ci5hcmlhLWhpZGRlbl09XCJ0cnVlXCI+PC9zcGFuPlxuICA8c3BhbiBjbGFzcz1cInZpc3VhbGx5LWhpZGRlblwiPnt7IGNhcHRpb24gfX08L3NwYW4+XG59XG4iXX0=