@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
49 lines • 9.03 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SegmentedControlButtonComponent {
constructor(el, cdr) {
this.el = el;
this.cdr = cdr;
/**
* Whether button is selected or notre
*/
this.isSelected = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
getClientBoundingRect() {
return this.el?.nativeElement?.getBoundingClientRect();
}
setIsSelected(isSelected) {
this.isSelected = isSelected;
this.cdr.markForCheck();
}
setIsDisabled(isDisabled) {
this.isDisabled = isDisabled;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedControlButtonComponent, isStandalone: true, selector: "nj-segmented-control-button", inputs: { value: "value", isSelected: "isSelected", isDisabled: "isDisabled", hasCustomIcon: "hasCustomIcon", iconName: "iconName" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button class=\"nj-segmented-control-btn\" type=\"button\"\n [ngClass]=\"{'nj-segmented-control-btn--selected': isSelected}\"\n [attr.aria-pressed]=\"isSelected ? 'true' : 'false'\"\n [disabled]=\"isDisabled\" [attr.data-value]=\"value\" (click)=\"buttonClick.emit($event)\">\n <nj-icon *ngIf=\"iconName && !hasCustomIcon\" size=\"inherit\" variant=\"inherit\" class=\"nj-segmented-control-btn__icon\" [name]=\"iconName\"></nj-icon>\n <span class=\"nj-segmented-control-btn__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;height:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedControlButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-segmented-control-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [IconComponent, CommonModule], template: "<button class=\"nj-segmented-control-btn\" type=\"button\"\n [ngClass]=\"{'nj-segmented-control-btn--selected': isSelected}\"\n [attr.aria-pressed]=\"isSelected ? 'true' : 'false'\"\n [disabled]=\"isDisabled\" [attr.data-value]=\"value\" (click)=\"buttonClick.emit($event)\">\n <nj-icon *ngIf=\"iconName && !hasCustomIcon\" size=\"inherit\" variant=\"inherit\" class=\"nj-segmented-control-btn__icon\" [name]=\"iconName\"></nj-icon>\n <span class=\"nj-segmented-control-btn__icon\" *ngIf=\"hasCustomIcon\">\n <ng-content select=\"[njTagIcon]\"></ng-content>\n </span>\n <span>\n <ng-content></ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: Input
}], isSelected: [{
type: Input
}], isDisabled: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], iconName: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VnbWVudGVkLWNvbnRyb2wtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3NlZ21lbnRlZC1jb250cm9sLWJ1dHRvbi9zZWdtZW50ZWQtY29udHJvbC1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2VnbWVudGVkLWNvbnRyb2wtYnV0dG9uL3NlZ21lbnRlZC1jb250cm9sLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7QUFVckQsTUFBTSxPQUFPLCtCQUErQjtJQWdDMUMsWUFBb0IsRUFBYyxFQUFVLEdBQXNCO1FBQTlDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQXpCbEU7O1dBRUc7UUFDTSxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBaUI1Qjs7V0FFRztRQUNPLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztJQUd2RCxDQUFDO0lBRUQscUJBQXFCO1FBQ25CLE9BQU8sSUFBSSxDQUFDLEVBQUUsRUFBRSxhQUFhLEVBQUUscUJBQXFCLEVBQUUsQ0FBQztJQUN6RCxDQUFDO0lBRUQsYUFBYSxDQUFDLFVBQW1CO1FBQy9CLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO1FBQzdCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGFBQWEsQ0FBQyxVQUFtQjtRQUMvQixJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztRQUM3QixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7K0dBL0NVLCtCQUErQjttR0FBL0IsK0JBQStCLHNRQ3BCNUMscXBCQVlBLGtHRE1ZLGFBQWEsZ0ZBQUUsWUFBWTs7NEZBRTFCLCtCQUErQjtrQkFSM0MsU0FBUzsrQkFDRSw2QkFBNkIsbUJBR3RCLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQztpSUFPN0IsS0FBSztzQkFBYixLQUFLO2dCQUtHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFLRyxhQUFhO3NCQUFyQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7SWNvbkNvbXBvbmVudH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25qLXNlZ21lbnRlZC1jb250cm9sLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWdtZW50ZWQtY29udHJvbC1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWdtZW50ZWQtY29udHJvbC1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtJY29uQ29tcG9uZW50LCBDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFNlZ21lbnRlZENvbnRyb2xCdXR0b25Db21wb25lbnQge1xuXG4gIC8qKlxuICAgKiBTZWdtZW50ZWQgY29udHJvbCBidXR0b24gdmFsdWVcbiAgICovXG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgYnV0dG9uIGlzIHNlbGVjdGVkIG9yIG5vdHJlXG4gICAqL1xuICBASW5wdXQoKSBpc1NlbGVjdGVkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdG9nZ2xlIGlzIGRpc2FibGVkIG9yIG5vXG4gICAqL1xuICBASW5wdXQoKSBpc0Rpc2FibGVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRvZ2dsZSBoYXMgY3VzdG9tIGljb25cbiAgICovXG4gIEBJbnB1dCgpIGhhc0N1c3RvbUljb246IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRvZ2dsZSBtYXRlcmlhbCBpY29uIG5hbWVcbiAgICovXG4gIEBJbnB1dCgpIGljb25OYW1lOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEJ1dHRvbiBjbGljayBvdXRwdXQuIEVtaXRzIGEgTW91c2VFdmVudFxuICAgKi9cbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge1xuICB9XG5cbiAgZ2V0Q2xpZW50Qm91bmRpbmdSZWN0KCk6IERPTVJlY3Qge1xuICAgIHJldHVybiB0aGlzLmVsPy5uYXRpdmVFbGVtZW50Py5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgfVxuXG4gIHNldElzU2VsZWN0ZWQoaXNTZWxlY3RlZDogYm9vbGVhbikge1xuICAgIHRoaXMuaXNTZWxlY3RlZCA9IGlzU2VsZWN0ZWQ7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBzZXRJc0Rpc2FibGVkKGlzRGlzYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmlzRGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICB9XG59XG4iLCI8YnV0dG9uIGNsYXNzPVwibmotc2VnbWVudGVkLWNvbnRyb2wtYnRuXCIgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnbmotc2VnbWVudGVkLWNvbnRyb2wtYnRuLS1zZWxlY3RlZCc6IGlzU2VsZWN0ZWR9XCJcbiAgICAgICAgW2F0dHIuYXJpYS1wcmVzc2VkXT1cImlzU2VsZWN0ZWQgPyAndHJ1ZScgOiAnZmFsc2UnXCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImlzRGlzYWJsZWRcIiBbYXR0ci5kYXRhLXZhbHVlXT1cInZhbHVlXCIgKGNsaWNrKT1cImJ1dHRvbkNsaWNrLmVtaXQoJGV2ZW50KVwiPlxuICA8bmotaWNvbiAqbmdJZj1cImljb25OYW1lICYmICFoYXNDdXN0b21JY29uXCIgc2l6ZT1cImluaGVyaXRcIiB2YXJpYW50PVwiaW5oZXJpdFwiIGNsYXNzPVwibmotc2VnbWVudGVkLWNvbnRyb2wtYnRuX19pY29uXCIgW25hbWVdPVwiaWNvbk5hbWVcIj48L25qLWljb24+XG4gIDxzcGFuIGNsYXNzPVwibmotc2VnbWVudGVkLWNvbnRyb2wtYnRuX19pY29uXCIgKm5nSWY9XCJoYXNDdXN0b21JY29uXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW25qVGFnSWNvbl1cIj48L25nLWNvbnRlbnQ+XG4gIDwvc3Bhbj5cbiAgPHNwYW4+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L3NwYW4+XG48L2J1dHRvbj5cbiJdfQ==